/* =========================================================
   Age of Doubloons - sys-guide.css
   はじめての人向けの案内（トマス爺さんの札）。操作卓の上の左下に小さく出す。
   事件の選択の札（右下・sys-events.css）と同じ高さで左右に分ける。
   狭い画面ではどちらも横いっぱいになるので、同時には出さない（guide.js が待たせる）。
   ========================================================= */
.gd-card{
  position:absolute;left:14px;bottom:150px;z-index:54;
  width:340px;max-width:calc(100vw - 28px);
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px 9px 10px;border-radius:12px;
  background:linear-gradient(180deg,rgba(40,29,12,.95),rgba(16,11,5,.95));
  border:1px solid rgba(232,194,92,.55);
  box-shadow:0 8px 26px rgba(0,0,0,.55),0 0 18px rgba(255,200,90,.12);
  opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;
  /* 消える時は薄れてから隠す（隠れたボタンに Tab で焦点が行かないように） */
  transition:opacity .25s,transform .25s,visibility 0s linear .25s;
}
.gd-card.show{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .25s,transform .25s}

.gd-face{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(232,194,92,.75);box-shadow:0 0 10px rgba(255,205,90,.25);
  background:radial-gradient(circle at 50% 40%,#5a4526,#1c140a);
  display:flex;align-items:center;justify-content:center;
}
.gd-face .sys-img{width:100%;height:100%;object-fit:cover;display:block}
.gd-face .sys-emo{line-height:1}

.gd-main{flex:1;min-width:0}
.gd-head{display:flex;align-items:baseline;gap:6px;margin:1px 0 4px}
.gd-title{flex:1;min-width:0;font-size:max(var(--fs-min),calc(13px*var(--fs)));font-weight:900;color:#ffe08a;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-who{font-size:max(var(--fs-min),calc(9.5px*var(--fs)));font-weight:700;color:#b9a77a;white-space:nowrap}
.gd-lines p{margin:0 0 3px;font-size:max(var(--fs-min),calc(11.5px*var(--fs)));line-height:1.55;color:#eadfbf}
.gd-lines b{color:#ffe08a;font-weight:800}

.gd-btns{display:flex;align-items:center;gap:6px;margin-top:7px}
.gd-btns .sys-btn{padding:5px 12px}
.gd-btns .gd-look{background:transparent;border-color:rgba(232,194,92,.45);color:#f1e4c0}
.gd-btns .gd-look:hover:not(:disabled){background:rgba(232,194,92,.16)}
.gd-off{
  margin-left:auto;appearance:none;cursor:pointer;font-family:inherit;white-space:nowrap;
  background:none;border:none;padding:3px 2px;
  font-size:max(var(--fs-min),calc(10px*var(--fs)));color:#b7a987;text-decoration:underline;text-underline-offset:2px;
}
.gd-off:hover{color:#cbbf9f}

/* ⚙ 設定の欄の行（「進行状況をリセット」の上） */
.gd-cfg .cbtn span{white-space:nowrap}

@media (max-width:700px){
  .gd-card{left:10px;right:10px;width:auto;max-width:none;padding:9px 10px 8px 9px;gap:9px}
  .gd-face{flex-basis:40px;width:40px;height:40px}
  .gd-lines p{font-size:max(var(--fs-min),calc(11px*var(--fs)));line-height:1.5}
}

/* =========================================================
   航海の手引き（js/sys/handbook.js、2026-09-16）。⚓ 航海メニューの［手引き］のタブ
   ========================================================= */
.hb-wrap{display:flex;flex-direction:column;gap:12px}
.hb-top{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;
  background:linear-gradient(180deg,rgba(60,44,20,.55),rgba(24,17,8,.55));border:1px solid rgba(232,194,92,.35)}
.hb-top .sys-icon,.hb-top .sys-img,.hb-top>span:first-child{flex:0 0 52px;border-radius:50%}
.hb-intro{flex:1;min-width:0}
.hb-intro p{margin:0;font-size:max(var(--fs-min),calc(12.5px*var(--fs)));line-height:1.6;color:#f1e6c6}
.hb-sign{text-align:right;font-size:max(var(--fs-min),calc(10px*var(--fs)));color:#c4b795;margin:2px 0 6px}
.hb-prog{display:flex;align-items:center;gap:8px;font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#d4c8a8;white-space:nowrap}
.hb-prog b{color:#ffe08a;font-size:1.2em}
.hb-prog .hb-bar{flex:1;margin:0}
.hb-bar{height:7px;border-radius:4px;background:rgba(0,0,0,.45);border:1px solid rgba(232,194,92,.3);overflow:hidden;margin:6px 0 2px}
.hb-bar i{display:block;height:100%;background:linear-gradient(90deg,#c9962e,#ffe08a);border-radius:4px}
.hb-pn{font-size:max(var(--fs-min),calc(10px*var(--fs)));color:#c4b795;text-align:right}
.hb-all{width:100%;padding:10px;font-weight:900}

.hb-ch{display:flex;flex-direction:column;gap:6px}
.hb-ch-h{display:flex;align-items:baseline;gap:8px;font-weight:900;color:#ffe08a;letter-spacing:.04em;
  font-size:max(var(--fs-min),calc(13.5px*var(--fs)));border-bottom:1px solid rgba(232,194,92,.3);padding-bottom:4px}
.hb-ch-h small{margin-left:auto;color:#c4b795;font-weight:700;font-size:.8em}
.hb-cd{font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#c9ba90;line-height:1.55}

.hb-step{border-radius:10px;border:1px solid rgba(232,194,92,.22);background:rgba(20,14,6,.55);padding:8px 10px}
.hb-step>summary{list-style:none;cursor:pointer}
.hb-step>summary::-webkit-details-marker{display:none}
.hb-sh{display:flex;align-items:center;gap:8px;min-width:0}
.hb-no{flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#2a1c08;background:#b39455}
.hb-t{flex:1;min-width:0;font-weight:800;color:#eadfbf;font-size:max(var(--fs-min),calc(12.5px*var(--fs)));line-height:1.35}
.hb-tag{flex:0 0 auto;font-size:max(var(--fs-min),calc(10px*var(--fs)));font-weight:900;padding:2px 7px;border-radius:8px;
  color:#2a1c08;background:#ffd76a}
.hb-why{margin:7px 0 5px;font-size:max(var(--fs-min),calc(11.5px*var(--fs)));line-height:1.6;color:#eadfbf}
.hb-how{font-size:max(var(--fs-min),calc(11.5px*var(--fs)));line-height:1.6;color:#d4c8a8;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.28)}
.hb-how span{display:inline-block;margin-right:6px;padding:0 6px;border-radius:6px;font-size:.85em;font-weight:900;color:#2a1c08;background:#c9ba90}
.hb-how b{color:#ffe08a}
.hb-rw{margin-top:5px;font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#ffd76a;font-weight:700}
.hb-act{display:flex;justify-content:flex-end;margin-top:7px}
.hb-act .sys-btn{padding:6px 16px}
.hb-ok{font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#8fd8a2;font-weight:800}

/* 今の一歩：金の縁で目立たせる。達成：緑。済み：薄く */
.hb-step.cur{border-color:#ffd76a;background:linear-gradient(180deg,rgba(70,52,18,.75),rgba(28,20,8,.75));box-shadow:0 0 14px rgba(255,205,90,.18)}
.hb-step.cur .hb-no{background:#ffd76a}
.hb-step.ready{border-color:#7fe3a0;background:linear-gradient(180deg,rgba(24,60,36,.7),rgba(10,26,16,.7));box-shadow:0 0 14px rgba(120,230,150,.2)}
.hb-step.ready .hb-no,.hb-step.ready .hb-tag{background:#7fe3a0}
.hb-claim{background:linear-gradient(180deg,#4fb26c,#2d7a45)!important;border-color:#9ff0b8!important;color:#fff!important;font-weight:900}
.hb-step.got{opacity:.62}
.hb-step.got .hb-no{background:#6d8f6f;color:#e8ffe8}

.hb-adv{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  padding:9px 10px;border-radius:10px;border:1px solid rgba(232,194,92,.4);background:rgba(40,29,12,.7);color:#f1e6c6;
  font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.hb-adv .i{font-size:1.3em}
.hb-adv .tx{flex:1;min-width:0;line-height:1.45}
.hb-adv .ar{color:#ffd76a;font-size:1.3em}

.hb-order{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;counter-reset:hbo}
.hb-order li{display:flex;gap:10px;align-items:flex-start;padding:7px 9px;border-radius:9px;background:rgba(20,14,6,.45);border:1px solid rgba(232,194,92,.16)}
.hb-order li::before{counter-increment:hbo;content:counter(hbo);flex:0 0 20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#2a1c08;background:#b39455;margin-top:1px}
.hb-order .i{flex:0 0 auto;font-size:1.15em}
.hb-order b{display:block;color:#eadfbf;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.hb-order small{display:block;color:#c4b795;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));line-height:1.5}

/* 上の札（hud.js の #pillQuest を手引きに使う時） */
.hp-quest.hb{border-color:#9cc8ff;color:#e6f1ff;animation:hqGlowB 2.6s ease-in-out infinite}
@keyframes hqGlowB{0%,100%{box-shadow:0 0 0 rgba(120,180,255,0)}50%{box-shadow:0 0 12px rgba(120,180,255,.55)}}

/* 港の画面の「この港でやること」（handbook.js portTodoHTML。voyage.js の港の画面のいちばん上） */
.hb-todo{display:flex;flex-direction:column;gap:4px;margin:8px 0 4px;padding:7px 9px;border-radius:11px;
  background:linear-gradient(180deg,rgba(64,48,18,.7),rgba(26,19,8,.7));border:1px solid rgba(255,215,106,.55);box-shadow:0 0 14px rgba(255,205,90,.14)}
.hb-todo-h{font-weight:900;color:#ffe08a;letter-spacing:.06em;font-size:max(var(--fs-min),calc(12.5px*var(--fs)))}
.hb-todo .hb-adv{padding:6px 9px}
/* 港の画面では小さめに（施設の一覧を押し出しすぎない） */
.hb-todo{gap:4px;padding:7px 8px}
.hb-todo .hb-adv{padding:5px 9px;font-size:max(var(--fs-min),calc(11.5px*var(--fs)));gap:8px}
.hb-todo .hb-adv .tx{line-height:1.35}

/* ボタンは［見てみる］が主、［後で］は控えめ（2026-09-16 オーナー） */
.gd-btns .gd-look{background:linear-gradient(180deg,#6a4f18,#34260b);border-color:rgba(232,194,92,.75);color:#ffeec0}
.gd-btns .gd-look:hover:not(:disabled){background:linear-gradient(180deg,#8d6a22,#4b370f)}
.gd-btns .gd-ok.ghost{background:transparent;border-color:rgba(232,194,92,.45);color:#f1e4c0}
.gd-btns .gd-ok.ghost:hover:not(:disabled){background:rgba(232,194,92,.16)}

/* しくみの解説（押すと開く。2026-09-18） */
.hb-know{margin:6px 0;border-radius:9px;background:rgba(20,14,6,.45);border:1px solid rgba(232,194,92,.16)}
.hb-know summary{cursor:pointer;padding:9px 10px;font-weight:800;color:#f3dfa6;display:flex;gap:8px;align-items:center;list-style:none}
.hb-know summary::-webkit-details-marker{display:none}
.hb-know summary::after{content:'＋';margin-left:auto;opacity:.7}
.hb-know[open] summary::after{content:'－'}
.hb-know ul{margin:0;padding:0 12px 10px 28px;display:flex;flex-direction:column;gap:6px;line-height:1.55}
.hb-know b{color:#ffe08a}

/* 見本 ?portglow（2026-09-30）：港でやる事がある時だけ、ランタンの灯りのようにゆっくり明滅（電気の光に見えないよう、暖かい金色で 3.2 秒） */
.hb-todo.has-hot{border-color:rgba(255,215,106,.85);animation:pgBox 3.2s ease-in-out infinite}
.hb-todo .hb-adv.hot{position:relative;border-color:rgba(255,206,96,.9);background:linear-gradient(180deg,rgba(92,64,18,.85),rgba(46,32,10,.85));
  color:#fff3d0;animation:pgRow 3.2s ease-in-out infinite}
.hb-todo .hb-adv.hot .ar{color:#ffe28a}
.vy-foldbar.hot{border-color:rgba(255,215,106,.9)!important;animation:pgRow 3.2s ease-in-out infinite}
.vy-foldbar.hot .sub{display:none}   /* 札が入ると狭い幅で説明が縦に1字ずつ折れたので、札の時は説明を隠す（札が「この港でやること」の代わり） */
.vy-foldbar.hot .vy-foldhot{margin-left:auto}
.vy-foldbar.hot{flex-wrap:nowrap}   /* 札の時は説明を隠すので1行のまま（折り返すと札だけ2行目に落ちた 10/2） */
@media (max-width:360px){.vy-foldbar.hot{gap:5px;padding:6px 28px 6px 8px}.vy-foldbar.hot .vy-foldhot{padding:2px 6px;letter-spacing:-.02em}.vy-foldbar.hot .nm{font-size:max(var(--fs-min),calc(12px*var(--fs)))}}   /* 幅320 で「アムステルダム」と札が並ぶと ▼ が押し出された */
.vy-foldhot{flex:0 0 auto;padding:2px 8px;border-radius:999px;font-weight:900;color:#2a1a04;background:linear-gradient(180deg,#ffe08a,#d9a53a);border:1px solid #fff0b8;white-space:nowrap;font-size:max(var(--fs-min),calc(11px*var(--fs)));animation:pgChip 3.2s ease-in-out infinite}
@keyframes pgChip{0%,100%{box-shadow:0 0 0 rgba(255,190,70,0)}50%{box-shadow:0 0 12px rgba(255,190,70,.9)}}
@keyframes pgRow{0%,100%{box-shadow:0 0 2px rgba(255,180,60,.1),inset 0 0 0 rgba(255,200,90,0);border-color:rgba(255,206,96,.6)}50%{box-shadow:0 0 16px rgba(255,176,50,.8),inset 0 0 14px rgba(255,214,120,.35);border-color:rgba(255,236,170,1)}}
@keyframes pgBox{0%,100%{box-shadow:0 0 10px rgba(255,205,90,.14)}50%{box-shadow:0 0 18px rgba(255,190,70,.38)}}
@media (prefers-reduced-motion:reduce){.hb-todo.has-hot,.hb-todo .hb-adv.hot,.vy-foldbar.hot,.vy-foldhot{animation:none;box-shadow:0 0 10px rgba(255,180,60,.45)}}