/* =========================================================
   Age of Doubloons - sys-hud.css
   スマホの上の小さな札・札のカード・下のアイコン・メニュー（js/sys/hud.js。2026-09-13 案C）
   札とカードは文字の大きさの設定で大きくしない（上の窓と同じ。数字はもともと大きい）
   ========================================================= */
.hud-pills,.hud-card{--fs:1.2;--fs-big:1.06;--fs-min:12px}
.hud-pills,.hud-card{display:none}
.hud-card[hidden]{display:none!important}

/* ---------------- 狭い画面：上の 2 つの窓と航海バーを隠して、札に替える ----------------
   スマホを横にした時（幅 874・高さ 402 など）も札にする。大きな窓が柵・ランタン・船首楼を隠していた（2026-09-14） */
@media (max-width:820px), (max-height:500px){
  #stage .plate.tl,#stage .plate.tr,#voyageBar{display:none!important}
  .hud-pills{display:block}
  .hud-card{display:block}
}
/* 縦のスマホでは、画面の上の真ん中に出る通知を上から 35% の所へ（押しやすい高さ。2026-09-15 オーナーが案1 を選んだ） */
@media (max-width:820px) and (orientation:portrait){
  #stage .notify{top:35%}
}

/* ---------------- 札 ---------------- */
.hud-pill{position:absolute;z-index:6;display:flex;align-items:center;gap:6px;height:30px;box-sizing:border-box;
  padding:0 11px 0 6px;border-radius:15px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:rgba(18,12,6,.74);border:1px solid rgba(232,194,92,.62);box-shadow:0 3px 10px rgba(0,0,0,.45);
  color:#ffe9a8;font:800 15px/1 "DIN Alternate","Helvetica Neue",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.hud-pill:active{transform:scale(.96)}
.hp-medal{top:calc(8px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px))}
.hp-dbl{top:calc(43px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));height:26px;padding-right:9px;
  color:#ffb89a;font-size:13px;border-color:rgba(220,110,80,.6)}
.hp-lv{top:calc(8px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));padding:0 7px 0 10px;color:#f3e6c2}
.hp-port{top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);max-width:40vw;padding:0 11px 0 9px;
  font:700 12px/1 "Hiragino Sans","Yu Gothic",sans-serif;color:#e6dbc0}
.hp-port:active{transform:translateX(-50%) scale(.96)}
.hp-port .hp-pic{font-size:13px}
.hp-port .hp-ptxt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.hp-port .hp-pbar{display:none;position:absolute;left:10px;right:10px;bottom:3px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.hp-port.sea .hp-pbar{display:block}
.hp-port .hp-pbar i{display:block;height:100%;width:0;background:#7fe3a0}
.hp-port.glow{border-color:#ffe9a8;box-shadow:0 0 14px rgba(255,210,100,.75)}
.hp-coin{width:18px;height:18px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 38% 35%,#fff3b0,#f0c040 45%,#9a6a10)}
.hp-dic{width:19px;height:19px;border-radius:50%;flex:0 0 auto;
  background:var(--dbl-ic, radial-gradient(circle,#b8391c 0 42%,#e9b53a 44% 100%)) center/76% no-repeat,
    conic-gradient(#ff5a3c calc(var(--p, 0) * 360deg), rgba(255,255,255,.16) 0)}
.hp-dbl.bump .hp-dic{animation:dblBump .5s ease-out}
.hp-lv .hp-lvl{font:700 11px/1 "Helvetica Neue",sans-serif;color:#b39a58}
.hp-lv b{font-size:17px}
.hp-ring{width:15px;height:15px;border-radius:50%;flex:0 0 auto;margin-left:2px;
  background:conic-gradient(#7fe3a0 calc(var(--p, 0) * 360deg), rgba(255,255,255,.16) 0);
  -webkit-mask:radial-gradient(circle,transparent 0 44%,#000 47%);mask:radial-gradient(circle,transparent 0 44%,#000 47%)}
.hud-pill .badge{position:absolute;top:-6px;right:-6px}
/* 依頼の案内の札（2026-09-15 オーナー「依頼を常時受けるよう誘導する UI」）。Lv の札の下。押すと依頼のタブ。
   受けられる依頼がある＝金色にゆっくり光る、報告できる＝緑に光る。?noqpill で出さない */
.hp-quest{top:calc(43px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));height:26px;max-width:54vw;
  padding:0 10px 0 7px;gap:5px;font:700 12px/1 "Hiragino Sans","Yu Gothic",sans-serif;color:#e6dbc0}
.hp-quest .hq-ic{font-size:13px}
.hp-quest .hq-t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.hp-quest.avail{border-color:#ffe29a;color:#fff0c8;animation:hqGlow 2.4s ease-in-out infinite}
.hp-quest.ready{border-color:#7fe3a0;color:#d6ffe6;animation:hqGlowG 1.8s ease-in-out infinite}
.hp-quest.none{color:#f3d9a0;border-color:rgba(232,194,92,.8)}
@keyframes hqGlow{0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.45)}50%{box-shadow:0 0 14px rgba(255,210,100,.85)}}
@keyframes hqGlowG{0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.45)}50%{box-shadow:0 0 14px rgba(110,230,150,.9)}}
.hud-ico .badge.avail{background:#2f7fd6;color:#fff;border-color:#bfe0ff}

/* とても狭い画面（320px ほど）：所持メダルの桁が多いと港の札に重なるので、港の札は錨の印だけにする */
@media (max-width:340px){
  .hp-port .hp-ptxt{display:none}
  .hp-port{padding:0 8px}
}

/* ---------------- 札を押した時のカード ---------------- */
.hud-card{position:absolute;z-index:7;width:min(290px,calc(100vw - 20px));box-sizing:border-box;padding:12px 14px;border-radius:12px;
  background:rgba(20,13,6,.95);border:1px solid rgba(232,194,92,.72);box-shadow:0 10px 28px rgba(0,0,0,.6);
  color:#e6dbc0;font-size:13px;line-height:1.5}
.hc-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hc-cap{font-size:11px;color:#b39a58;letter-spacing:.08em}
.hc-big{font:800 22px/1.15 "DIN Alternate","Helvetica Neue",sans-serif;color:#ffe9a8}
.hc-big small{font:600 12px/1 "Hiragino Sans","Yu Gothic",sans-serif;color:#c3a05a}
.hc-big.red{color:#ffb89a}
.hc-port .hc-big{font:800 17px/1.25 "Hiragino Sans","Yu Gothic",sans-serif}
.hc-sub{font-size:11px;color:#c9b27a;line-height:1.4}
.hc-ic{font-size:28px;line-height:1}
.hc-coin{width:40px;height:40px;border-radius:50%;flex:0 0 auto;background:radial-gradient(circle at 38% 35%,#fff3b0,#f0c040 45%,#9a6a10)}
.hc-coin.red{background:radial-gradient(circle,#b8391c 0 42%,#e9b53a 44% 100%)}
.hc-dimg{width:46px;height:46px;flex:0 0 auto}
.hud-card .sys-img{border-radius:50%;flex:0 0 auto}
.hc-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px}
.hc-row b{color:#f3e6c2;font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin:6px 0}
.hc-bar i{display:block;height:100%;background:linear-gradient(90deg,#9e2a1c,#ffb347)}
.hc-lv .hc-bar i,.hc-port .hc-bar i{background:linear-gradient(90deg,#3d8f5c,#7fe3a0)}
.hc-note{font-size:11px;color:#a99d80;margin:6px 0 2px;line-height:1.55}
.hc-btns{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.hc-btns .sys-btn{flex:1 1 auto}

/* ---------------- 下のアイコン（持ち物・港・海図・依頼・メニュー） ---------------- */
.ico.hud-ico,.ico.hud-ico:hover{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:0;background:url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat}
.hud-ico .hi-e{font-size:15px;line-height:1}
.hud-ico .hi-l{font-size:9px;line-height:1;font-weight:700;color:#f3e6c2;letter-spacing:-.02em;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.9)}
.hud-ico.off{opacity:.55}
.ico.hud-ico.img,.ico.hud-ico.img:hover{background:var(--ico) center 36%/56% no-repeat,url(../assets/sys/ui_btn_icon.webp) center/100% 100% no-repeat}
.hud-ico.img .hi-e{visibility:hidden;height:15px}

/* 数の札は、数がある時だけ出す（空のまま黒い丸が見えていた。今までの操作卓の「船長」のボタンにも出ていた） */
.hud-ico .badge:empty,.hm-item .badge:empty,.hud-pill .badge:empty{display:none}

/* ---------------- メニュー（今までの 6 つのボタン） ---------------- */
.hud-menu{position:fixed;right:calc(10px + env(safe-area-inset-right,0px));z-index:45;padding:12px 12px 10px;border-radius:12px;
  background:rgba(20,13,6,.96);border:1px solid rgba(232,194,92,.72);box-shadow:0 10px 28px rgba(0,0,0,.6)}
.hud-menu[hidden]{display:none}
.hm-grid{display:grid;grid-template-columns:repeat(3,66px);gap:10px 6px}
.hm-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.hm-item .ico{position:relative;width:44px;height:44px}
.hm-lbl{font-size:11px;color:#e6dbc0;white-space:nowrap}

/* ---------------- 広い画面（PC）でも、手引き・依頼の札だけは出す ----------------
   2026-09-16 オーナー「手引きは広い画面版でも表示した方がいい」。
   広い画面では上の窓（所持メダル・階級）と航海バーが出ているので、札はそれらの下（右上の窓の下）に置く */
@media (min-width:821px) and (min-height:501px){
  .hud-pills{display:block;pointer-events:none}
  .hud-pills > *{display:none}
  .hud-pills > #pillQuest{
    display:flex;pointer-events:auto;height:32px;
    top:calc(140px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));left:auto;max-width:34vw;
  }
}

/* 見本 ?portright（9/19 オーナー「行き先を右側に移動」）：行き先の札を Lv の左に寄せ、マストの先の上を空ける */
html.portright .hp-port{left:auto;right:calc(92px + env(safe-area-inset-right,0px));transform:none;max-width:calc(100vw - 210px)}
html.portright .hp-quest{max-width:44vw}
/* 見本 ?portunder（9/19 オーナー「行き先を右側のレベルの下に」）：行き先の札を Lv の下、受注中の札をその下へ */
html.portunder .hp-port{left:auto;right:calc(8px + env(safe-area-inset-right,0px));transform:none;top:calc(43px + env(safe-area-inset-top,0px));max-width:54vw}
html.portunder .hp-quest{top:calc(78px + env(safe-area-inset-top,0px))}
/* 行き先の札を下の帯へ移したので（2026-09-23 オーナー）、受注中の札は Lv のすぐ下（左のダブロンと同じ高さ）に上げる */
html.panel2.portunder .hp-quest{top:calc(43px + env(safe-area-inset-top,0px))}
/* メニュー整理 案C（2026-09-22）：中身をほかのタブへ移したボタンは隠す（js/sys/hud.js の MENU_HIDE） */
.hm-item.hm-off{display:none}
/* 見本 ?storyguide（10/7）：上の札に物語の次の行き先（深紅と金。物語の札と同じ色） */
.hp-quest.story{border-color:#e8c25c;color:#ffe9b0;background:linear-gradient(180deg,rgba(126,31,24,.92),rgba(60,18,12,.92))}
.vy-arrive-q.sg{border-color:rgba(232,194,92,.75);background:rgba(126,31,24,.35)}