/* 1002 介面改版「小緣的北台灣觀光網紅之旅」——觀光護照／旅行手帳／車票／行李吊牌／郵戳印章 ＋ HD 像素。
   放在所有 city*.css 之後，只覆寫外觀；版面量測（--header-h／--footer-h／--left-w／--right-w）沿用 cityMain.fitStage。
   素材：ui/pixel/hd/ui/（tools/hd_ui_assets.py）。9-slice 邊框 24×24、slice 8，以 2 倍（16px）pixelated 放大。 */
:root {
  --ink:#4a2e1f; --ink-2:#6b4a33; --ink-soft:#8a6a4e;
  --cream:#fbf2dc; --cream-2:#f3e4c2; --cream-3:#e9d6ac;
  --red:#c8402e; --red-d:#8f2a1c; --red-l:#ef7a5c;
  --teal:#2f7f7a; --teal-d:#1d5551; --teal-l:#5fb3a8;
  --gold:#f0b43c; --gold-d:#a8701a;
  --leather:#2b5d52; --leather-d:#1b3f37;
  --num:var(--font-num,"Arial Rounded MT Bold","Segoe UI Black","Microsoft JhengHei",sans-serif); /* 字型規範見 cityFonts.css */
  --title:var(--font-display,"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif);
  --f-paper:url(pixel/hd/ui/frame_paper.png); --f-ticket:url(pixel/hd/ui/frame_ticket.png); --f-wood:url(pixel/hd/ui/frame_wood.png); --f-tag:url(pixel/hd/ui/frame_tag.png); --f-ink:url(pixel/hd/ui/frame_ink.png);
  --grid:url(pixel/hd/ui/paper_grid.png);
  font-family:var(--title); color:var(--ink);
}
img { image-rendering:pixelated; }
.ico { width:24px; height:24px; object-fit:contain; flex:0 0 auto; vertical-align:middle; }
button, select { font-family:inherit; }
button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.stat { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.stat b { font-family:var(--num); font-variant-numeric:tabular-nums; }
.stat.bad b { color:var(--red-d); } .stat.good b { color:var(--teal-d); }

/* ═════════ 入口頁：海報主視覺＋護照跨頁 ═════════ */
.intro { position:relative; height:100dvh; padding:clamp(8px, 2.4vh, 28px) clamp(8px, 2vw, 28px); overflow:hidden; display:grid; place-items:center; background:#6fb3cf; }
.intro-hero { position:absolute; inset:0; background:url(pixel/hd/ui/hero_wide.png) center 40% / cover no-repeat; image-rendering:pixelated; }
.intro-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 55%, #0000 35%, #1b100a88 100%), linear-gradient(#0000 60%, #1b100a66); }
.intro-card.passport { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); width:min(1180px, 100%); max-width:none; max-height:100%; padding:14px; text-align:left; border:0; border-radius:18px;
  background:linear-gradient(135deg, #36705f, var(--leather) 40%, var(--leather-d)); box-shadow:0 0 0 3px var(--ink), 0 10px 0 #1b100a66, 0 24px 60px #1b100a88, inset 0 0 0 5px #3f8270, inset 0 0 0 7px #d9b45a55; }
.intro-card.passport::before { content:""; position:absolute; left:calc(5 / 12 * (100% - 28px) + 14px); top:14px; bottom:14px; width:14px; transform:translateX(-50%); z-index:2; background:linear-gradient(90deg, #0000, #4a2e1f30 40%, #4a2e1f55 50%, #4a2e1f30 60%, #0000); pointer-events:none; }
.passport-page { position:relative; min-width:0; min-height:0; padding:18px 22px; background:var(--grid) 0 0 / 32px 32px, var(--cream); image-rendering:pixelated; box-shadow:inset 0 0 0 2px var(--ink); display:flex; flex-direction:column; gap:10px; }
.cover-page { border-radius:10px 2px 2px 10px; align-items:center; text-align:center; justify-content:center; background:radial-gradient(circle at 50% 30%, #fff8e6, #0000 70%), var(--grid) 0 0 / 32px 32px, var(--cream); }
.pick-page { border-radius:2px 10px 10px 2px; }
.intro .eyebrow { align-self:center; font-size:12px; letter-spacing:.12em; color:var(--ink-soft); background:#fff6; padding:2px 10px; border:1px dashed var(--ink-soft); border-radius:99px; }
.intro h1.logo { margin:2px 0 0; font-size:clamp(40px, 5.2vw, 66px); line-height:1.02; font-weight:900; letter-spacing:.04em; color:#fff3d6;
  text-shadow:3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 8px 0 var(--ink), 3px 8px 0 var(--ink), -3px 8px 0 var(--ink); }
.intro h1.logo span { color:#ffb9a6; display:inline-block; transform:rotate(-4deg); }
.intro h2.ribbon { position:relative; margin:6px auto 2px; padding:5px 26px 6px; white-space:nowrap; font-size:clamp(16px, 1.7vw, 21px); font-weight:900; letter-spacing:.1em; color:#fff; background:var(--red); border:2px solid var(--ink); box-shadow:0 4px 0 var(--red-d); }
.intro h2.ribbon::before, .intro h2.ribbon::after { content:""; position:absolute; top:6px; width:16px; height:100%; background:var(--red-d); border:2px solid var(--ink); z-index:-1; }
.intro h2.ribbon::before { left:-12px; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 6px 50%); } .intro h2.ribbon::after { right:-12px; clip-path:polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); }
.intro-pitch { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:4px 0 0; padding:0; }
.intro-pitch li { display:inline-flex; align-items:center; gap:4px; padding:3px 9px 3px 4px; font-size:14px; font-weight:700; background:#fffaf0; border:2px solid var(--ink); border-radius:99px; box-shadow:0 2px 0 var(--ink); }
.intro-pitch img { width:22px; height:22px; object-fit:contain; }
.hero-char { position:relative; display:grid; grid-template-columns:auto auto; align-items:end; justify-content:center; gap:4px 14px; margin-top:6px; }
.hero-photo { position:relative; padding:8px 8px 22px; background:#fff; border:2px solid var(--ink); box-shadow:4px 4px 0 #4a2e1f44; transform:rotate(-3deg); }
.hero-photo .portrait { width:clamp(110px, 12vw, 150px); height:clamp(110px, 12vw, 150px); border-radius:2px; border:0; background:color-mix(in srgb, var(--pc) 22%, #fff8ec); }
.hero-photo::before { content:""; position:absolute; top:-10px; left:50%; width:64px; height:18px; transform:translateX(-50%) rotate(2deg); background:#f3c95ccc; border:1px solid #c9a03a; }
.hero-stamp { position:absolute; right:-18px; bottom:-8px; width:62px; height:62px; display:grid; place-items:center; font-size:15px; font-weight:900; color:var(--red); border:3px double var(--red); border-radius:50%; background:#fff8; transform:rotate(-14deg); opacity:.88; }
.hero-walk { height:clamp(80px, 9vw, 112px); width:auto; filter:drop-shadow(0 4px 0 #4a2e1f33); }
.hero-tag { grid-column:1 / -1; display:inline-flex; align-items:center; gap:10px; justify-self:center; margin-top:6px; }
.hero-tag > b { font-size:24px; font-weight:900; color:var(--pc); text-shadow:2px 2px 0 #fff; }
.hero-kind { display:inline-flex; align-items:center; gap:4px; padding:2px 10px 2px 4px; font-size:14px; font-weight:700; color:#fff; background:var(--pc); border:2px solid var(--ink); border-radius:6px; }
.intro .skill-preview { position:relative; min-height:0; margin:2px 0 0; padding:8px 14px; max-width:340px; font-size:15px; line-height:1.45; color:var(--ink); background:#fff; border:2px solid var(--ink); border-radius:12px; box-shadow:0 3px 0 #4a2e1f44; }
.intro .skill-preview::before { content:""; position:absolute; top:-10px; left:50%; border:8px solid transparent; border-bottom-color:var(--ink); border-top:0; transform:translateX(-50%); }
.intro .skill-preview b { display:block; font-size:15px; color:var(--red-d); }
.pick-title { display:flex; align-items:center; gap:8px; margin:0; font-size:20px; font-weight:900; }
.pick-title img { width:28px; height:28px; object-fit:contain; }
.pick-title small { display:inline; margin-left:auto; font-size:13px; font-weight:400; color:var(--ink-soft); }
.intro .char-pick { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0; }
.intro .char-card { position:relative; display:grid; grid-template-rows:auto auto auto; justify-items:center; gap:2px; padding:0 4px 8px; overflow:hidden; color:var(--ink);
  background:linear-gradient(var(--pc) 0 34%, #fffaf0 34%); border:3px solid var(--ink); border-radius:10px; box-shadow:0 4px 0 var(--ink), inset 0 0 0 2px #fff8; transition:transform .12s; }
.intro .char-card::before { content:""; position:absolute; inset:0 0 auto; height:34%; background:repeating-linear-gradient(45deg, #fff2 0 6px, #0000 6px 12px); pointer-events:none; }
.intro .char-card .portrait { width:clamp(58px, 6.6vw, 84px); height:clamp(58px, 6.6vw, 84px); margin-top:8px; border:3px solid #fff; border-radius:50%; background:#fff8ec; box-shadow:0 0 0 2px var(--ink); }
.intro .char-card > b { font-size:17px; font-weight:900; }
.intro .char-card .card-skill { display:inline-flex; align-items:center; gap:3px; font-size:13px; font-weight:700; color:var(--ink-2); }
.intro .char-card .card-skill .ico { width:18px; height:18px; }
.intro .char-card:hover:not(:disabled) { background:linear-gradient(var(--pc) 0 34%, #fff 34%); transform:translateY(-2px); }
.intro .char-card.chosen { transform:translateY(-4px); box-shadow:0 0 0 3px var(--gold), 0 8px 0 var(--ink); background:linear-gradient(var(--pc) 0 34%, #fff6d8 34%); }
.intro .char-card.chosen::after { content:"✓"; position:absolute; top:4px; right:4px; width:22px; height:22px; display:grid; place-items:center; font-size:14px; font-weight:900; color:#fff; background:var(--red); border:2px solid var(--ink); border-radius:50%; }
.intro .setup { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:2px 0 0; }
.intro .ticket-opt { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; align-items:center; gap:2px 8px; padding:8px 12px 8px 10px; cursor:pointer;
  border:6px solid transparent; border-image:var(--f-ticket) 8 fill / 16px / 0 round; image-rendering:pixelated; filter:drop-shadow(0 3px 0 #4a2e1f44); }
.intro .ticket-opt img { grid-row:1 / 3; width:34px; height:34px; object-fit:contain; }
.intro .ticket-opt span { font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--red-d); }
.intro .ticket-opt select { min-width:0; width:100%; padding:2px 4px; font-size:15px; font-weight:700; color:var(--ink); background:transparent; border:0; border-bottom:2px dashed var(--ink-soft); border-radius:0; cursor:pointer; text-overflow:ellipsis; }
.intro #onlineLobby:empty { display:none; }
.intro-actions { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:auto; padding-top:4px; }
.intro .stamp-btn, .intro button#start { order:1; position:relative; width:118px; height:118px; padding:0; font-size:34px; font-weight:900; letter-spacing:.06em; color:#fff; border-radius:50%; border:4px solid var(--ink);
  background:radial-gradient(circle at 38% 32%, var(--red-l), var(--red) 55%, var(--red-d)); box-shadow:0 7px 0 var(--ink), inset 0 0 0 5px #fff3, inset 0 0 0 9px var(--red), inset 0 0 0 11px #ffe3d6aa; text-shadow:0 3px 0 var(--red-d); transform:rotate(-6deg); transition:transform .12s; }
.intro button#start:hover:not(:disabled) { background:radial-gradient(circle at 38% 32%, #ff9a7c, var(--red) 55%, var(--red-d)); transform:rotate(-2deg) scale(1.04); }
.intro button#start:active:not(:disabled) { transform:rotate(-2deg) translateY(5px); box-shadow:0 2px 0 var(--ink), inset 0 0 0 5px #fff3, inset 0 0 0 9px var(--red), inset 0 0 0 11px #ffe3d6aa; }
.intro button#start:disabled { font-size:13px; letter-spacing:0; background:#bba78a; text-shadow:none; }
.intro .wood-btn, .intro #introHelp { order:0; display:inline-flex; align-items:center; gap:6px; padding:6px 16px; font-size:17px; font-weight:900; color:#fff3dc; text-shadow:0 2px 0 #5a3519;
  border:6px solid transparent; border-image:var(--f-wood) 8 fill / 16px / 0 stretch; image-rendering:pixelated; background:none; filter:drop-shadow(0 4px 0 #4a2e1f66); }
.intro #introHelp img { width:24px; height:24px; }
.intro #introHelp:hover { background:none; filter:drop-shadow(0 4px 0 #4a2e1f66) brightness(1.08); }
.intro .legacy-link { order:2; font-size:13px; color:var(--ink-soft); }
#loadError:empty { display:none; }

@media (max-width:1000px) and (min-width:701px) {
  .intro-card.passport { padding:10px; }
  .intro-card.passport::before { left:calc(5 / 12 * (100% - 20px) + 10px); top:10px; bottom:10px; }
  .passport-page { padding:12px 14px; gap:8px; }
  .intro .char-pick { gap:7px; }
  .intro .char-card > b { font-size:15px; }
  .intro .char-card .card-skill { font-size:12px; }
  .intro .setup { gap:6px; }
  .intro .ticket-opt { padding:6px 6px 6px 6px; gap:0 4px; }
  .intro .ticket-opt img { width:26px; height:26px; }
  .intro .ticket-opt select { font-size:13px; }
  .intro .stamp-btn, .intro button#start { width:96px; height:96px; font-size:28px; }
  .intro-pitch li { font-size:12px; }
}
@media (max-width:700px) {
  .intro { padding:8px; place-items:stretch; }
  .intro-hero { background-image:url(pixel/hd/ui/hero_tall.png); background-position:center top; }
  .intro-card.passport { grid-template-columns:1fr; grid-template-rows:auto minmax(0, 1fr); padding:7px; border-radius:14px; height:100%; }
  .intro-card.passport::before { display:none; }
  .passport-page { padding:9px 10px; gap:6px; }
  .cover-page { border-radius:8px 8px 2px 2px; display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"logo logo" "ribbon ribbon" "hero bubble"; align-items:center; gap:4px 8px; }
  .pick-page { border-radius:2px 2px 8px 8px; }
  .intro .eyebrow, .intro-pitch { display:none; }
  .intro h1.logo { grid-area:logo; font-size:36px; }
  .intro h2.ribbon { grid-area:ribbon; font-size:15px; padding:3px 18px 4px; margin:2px auto 4px; }
  .hero-char { grid-area:hero; grid-template-columns:auto; margin:0; }
  .hero-photo { padding:4px 4px 12px; }
  .hero-photo .portrait { width:64px; height:64px; }
  .hero-stamp { width:38px; height:38px; font-size:10px; right:-12px; bottom:-6px; border-width:2px; }
  .hero-walk, .hero-tag { display:none; }
  .intro .skill-preview { grid-area:bubble; max-width:none; font-size:13px; padding:6px 9px; text-align:left; }
  .intro .skill-preview::before { top:50%; left:-10px; transform:translateY(-50%); border:8px solid transparent; border-right-color:var(--ink); border-left:0; }
  .pick-title { font-size:16px; } .pick-title img { width:22px; height:22px; } .pick-title small { font-size:11px; }
  .intro .char-pick { gap:6px; }
  .intro .char-card { padding:0 2px 5px; border-width:2px; box-shadow:0 3px 0 var(--ink); }
  .intro .char-card .portrait { width:52px; height:52px; margin-top:5px; border-width:2px; }
  .intro .char-card > b { font-size:13px; }
  .intro .char-card .card-skill { font-size:11px; }
  .intro .char-card .card-skill .ico { width:14px; height:14px; }
  .intro .setup { gap:5px; }
  .intro .ticket-opt { grid-template-columns:auto minmax(0, 1fr); padding:3px 4px; gap:0 3px; border-image-width:12px; border-width:5px; }
  .intro .ticket-opt img { width:20px; height:20px; grid-row:1; }
  .intro .ticket-opt span { font-size:10px; letter-spacing:0; }
  .intro .ticket-opt select { grid-column:1 / -1; font-size:12px; }
  .intro-actions { gap:14px; }
  .intro .stamp-btn, .intro button#start { width:84px; height:84px; font-size:24px; }
  .intro #introHelp { font-size:14px; padding:4px 10px; }
}
@media (max-width:700px) and (min-height:780px) {
  .cover-page { grid-template-areas:"logo logo" "ribbon ribbon" "pitch pitch" "hero bubble"; }
  .intro-pitch { display:flex; grid-area:pitch; gap:4px; margin:0 0 4px; }
  .intro-pitch li { font-size:12px; padding:2px 7px 2px 3px; }
  .intro-pitch img { width:18px; height:18px; }
  .hero-photo .portrait { width:84px; height:84px; }
  .intro .char-card .portrait { width:60px; height:60px; }
  .intro .char-pick { gap:8px; }
  .intro .ticket-opt { padding:5px 6px; }
  .intro .stamp-btn, .intro button#start { width:96px; height:96px; font-size:28px; }
}
@media (max-width:700px) and (max-height:700px) {
  .intro h1.logo { font-size:28px; } .intro .char-card .portrait { width:42px; height:42px; }
  .intro .stamp-btn, .intro button#start { width:70px; height:70px; font-size:20px; }
}
@media (min-width:701px) and (max-height:760px) {
  .hero-photo .portrait { width:96px; height:96px; } .hero-walk { height:76px; }
  .intro h1.logo { font-size:44px; }
  .intro .char-card .portrait { width:56px; height:56px; }
  .intro .stamp-btn, .intro button#start { width:90px; height:90px; font-size:26px; }
  .passport-page { gap:7px; padding:12px 16px; }
}

/* ═════════ 遊戲中：頂列（浮在地圖上的護照徽章、行李吊牌、爆紅車票、木牌工具） ═════════ */
#app > header { background:linear-gradient(#2a1a1066, #2a1a1000); backdrop-filter:none; box-shadow:none; border:0; padding:6px 10px 10px; }
#app header .brand { display:inline-flex; align-items:center; gap:6px; padding:3px 12px 3px 5px; font-size:17px; font-weight:900; color:#fff3d6; background:var(--leather); border:2px solid var(--ink); border-radius:8px; box-shadow:0 3px 0 var(--ink), inset 0 0 0 2px #d9b45a66; text-shadow:0 2px 0 var(--leather-d); }
#app header .brand img { width:24px; height:24px; object-fit:contain; }
#app header .brand small { display:none; }
/* 行李吊牌計分卡 */
#app header #scoreboard { gap:8px; overflow:visible; }
#app header .score, .score { position:relative; display:flex; align-items:center; gap:7px; min-width:0; padding:3px 18px 3px 3px; color:var(--ink); clip-path:none; border:2px solid var(--ink); border-radius:8px 16px 16px 8px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--pc) 30%, #fbf2dc), #fbf2dc 70%); box-shadow:0 3px 0 var(--ink), inset 0 -3px 0 color-mix(in srgb, var(--pc) 35%, #e9d6ac); }
#app header .score::after, .score::after { content:""; position:absolute; right:6px; top:50%; width:7px; height:7px; margin-top:-4px; border-radius:50%; background:#2a1a10; box-shadow:0 0 0 2px #e9d6ac; }
#app header .score:hover:not(:disabled) { filter:brightness(1.05); }
#app header .score.active, .score.active { background:var(--pc); color:#fff; border-color:var(--ink); box-shadow:0 3px 0 var(--ink), 0 0 0 3px var(--gold), inset 0 -3px 0 #0003; transform:translateY(-2px); }
#app header .score.active strong, .score.active strong { color:#fff; text-shadow:0 2px 0 #0004; }
.score-face { position:relative; flex:0 0 auto; }
#app header .score .portrait { width:36px; height:36px; border:2px solid var(--ink); background:#fff8ec; }
.score.active .portrait { border-color:#fff !important; }
.score-face .rank { position:absolute; left:-5px; top:-5px; width:16px; height:16px; display:grid; place-items:center; font:900 10px/1 var(--num); font-style:normal; color:var(--ink); background:#fbf2dc; border:2px solid var(--ink); border-radius:50%; }
.score-face .who { position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); padding:0 4px; font:900 10px/13px var(--title); font-style:normal; color:#fff; background:var(--red); border:1.5px solid var(--ink); border-radius:4px; white-space:nowrap; }
.score-face .who-cpu { position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); width:20px; height:12px; object-fit:contain; }
.score-face .halo-pip { position:absolute; right:-8px; top:-6px; padding:0 3px; font:900 10px/13px var(--num); font-style:normal; color:var(--ink); background:var(--gold); border:1.5px solid var(--ink); border-radius:6px; }
.score-money strong { font:900 20px/1 var(--num); letter-spacing:-.01em; white-space:nowrap; }
.score-shops { display:inline-flex; align-items:center; gap:2px; padding:1px 5px 1px 2px; background:#fff9; border-radius:6px; border:1.5px solid #4a2e1f55; }
.score-shops .ico { width:20px; height:20px; }
.score-shops b { font:900 14px/1 var(--num); color:var(--ink); }
.score.active .score-shops { background:#fff3; border-color:#fff8; } .score.active .score-shops b { color:#fff; }
/* 爆紅地點：車票 */
#app header #destination { position:relative; display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:300px; padding:2px 60px 2px 6px; color:var(--ink); font-weight:700;
  border:6px solid transparent; border-image:var(--f-ticket) 8 fill / 16px / 0 round; border-radius:0; background:none; image-rendering:pixelated; filter:drop-shadow(0 3px 0 #2a1a1066); }
#destination .dest-pin { width:24px; height:24px; animation:pin-bob 1.6s ease-in-out infinite; }
#destination .dest-text { display:grid; text-align:left; line-height:1.1; min-width:0; }
#destination .dest-text small { font-size:12px; letter-spacing:.06em; color:var(--red); font-weight:900; }
#destination .dest-text b { font-size:16px; font-weight:900; color:var(--red-d); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#destination .dest-thumb { position:absolute; right:0; bottom:-2px; height:42px; width:54px; object-fit:contain; object-position:center bottom; filter:drop-shadow(1px 2px 0 #4a2e1f66); }
@keyframes pin-bob { 50% { transform:translateY(-3px); } }
#app header .halo-chip { padding:2px 8px 2px 4px; border:2px solid var(--ink); border-radius:99px; background:#fbf2dc; box-shadow:0 3px 0 var(--ink); }
#app header .halo-chip .muted { font-size:12px; color:var(--ink-soft); }
#app header .pixel-icon { width:46px; height:46px; color:#fff3dc; border:6px solid transparent; border-image:var(--f-wood) 8 fill / 16px / 0 stretch; border-radius:0; background:none; box-shadow:none; filter:drop-shadow(0 3px 0 #2a1a1088); padding:0; gap:0; align-content:center; }
#app header .pixel-icon small { font-size:12px; font-weight:900; color:#fff3dc; text-shadow:0 1px 0 #5a3519; white-space:nowrap; } /* 1006 QA：10px 太小 */
@media (min-width:701px) { #app header .pixel-icon:has(small) { width:52px; } }
#app header .pixel-icon:hover { background:none; filter:drop-shadow(0 3px 0 #2a1a1088) brightness(1.1); }
#app header .pixel-icon[aria-pressed=true], #app header .pixel-icon[aria-expanded=true] { filter:drop-shadow(0 1px 0 #2a1a1088) brightness(.92); transform:translateY(2px); }
.menu { border:6px solid transparent; border-image:var(--f-paper) 8 fill / 16px / 0 round; border-radius:0; background:none; box-shadow:none; filter:drop-shadow(0 6px 0 #2a1a1055); padding:10px; }
.menu button, .menu select { background:#fffaf0; border:2px solid var(--ink); border-radius:6px; box-shadow:0 2px 0 var(--ink); font-weight:700; }

/* ═════════ 右側：旅行手帳（書籤頁籤） ═════════ */
aside#info, .log-dock { border:6px solid transparent; border-image:var(--f-paper) 8 fill / 16px / 0 round; border-radius:0; background:none; backdrop-filter:none; box-shadow:none; filter:drop-shadow(0 5px 0 #2a1a1055); }
aside#info { padding:4px 8px 8px; }
#info nav { padding:0 4px; gap:4px; }
#info nav button { display:inline-flex; align-items:center; justify-content:center; gap:4px; margin:0; padding:5px 10px 6px; font-size:15px; font-weight:900; clip-path:none; transform:translateY(3px); color:var(--ink-2);
  background:var(--cream-3); border:2px solid var(--ink); border-bottom:0; border-radius:8px 8px 0 0; box-shadow:inset 0 2px 0 #fff6; }
#info nav button::before { content:""; width:20px; height:20px; background:center / contain no-repeat; image-rendering:pixelated; }
#info nav button[data-panel=place]::before { background-image:url(pixel/hd/ui/ic_pin.png); }
#info nav button[data-panel=player]::before { background-image:url(pixel/hd/ui/ic_people.png); }
#info nav button[aria-pressed=true] { color:#fff; background:var(--teal); transform:none; box-shadow:inset 0 2px 0 #fff4; }
#info nav button[data-panel=player][aria-pressed=true] { background:var(--red); }
#info nav #backMap { border:0; background:none; box-shadow:none; transform:none; text-decoration:none; color:var(--teal-d); }
#info nav #backMap::before { display:none; }
#infoBody { padding:10px; border:2px solid var(--ink); border-radius:0 0 8px 8px; background:#fffaf0; overflow:hidden; }
#infoPager button, .pager button { background:#fffaf0; border:2px solid var(--ink); border-radius:6px; box-shadow:0 2px 0 var(--ink); font-weight:700; }
/* 地點頁：明信片 */
.place-card { position:relative; margin:0 0 8px; border:2px solid var(--ink); border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 3px 0 #4a2e1f44; }
.place-art { display:block; width:100%; height:128px; padding:8px 8px 0; object-fit:contain; object-position:center bottom; background:linear-gradient(#bfe3ef 0 55%, #cfe6b2 55% 80%, #b9d58f 80%); }
.place-card.type-temple .place-art { background:linear-gradient(#f7d9a8 0 55%, #e9cf97 55%); }
.place-card.type-event .place-art, .place-card.type-card .place-art, .place-card.type-cash .place-art, .place-card.type-debt .place-art { padding:18px; background:repeating-linear-gradient(45deg, #f3e4c2 0 8px, #efdcb4 8px 16px); }
.region-stamp { position:absolute; left:6px; top:6px; padding:2px 8px; font-size:11px; font-weight:900; color:var(--teal-d); border:2px solid var(--teal-d); border-radius:99px; background:#ffffffb0; transform:rotate(-8deg); }
.hot-stamp { position:absolute; right:6px; top:6px; width:44px; height:44px; display:grid; place-items:center; font-size:13px; font-weight:900; color:var(--red); border:3px double var(--red); border-radius:50%; background:#fff8; transform:rotate(12deg); }
.place-card figcaption { padding:6px 10px 8px; border-top:2px dashed var(--cream-3); background:#fffaf0; }
#infoBody .place-card h2 { margin:0 0 4px; font-size:22px; font-weight:900; line-height:1.15; }
.place-sub { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.cat-chip, .sale-chip, .hot-chip, .owner-chip { display:inline-flex; align-items:center; gap:3px; height:24px; padding:0 8px 0 4px; font-size:13px; font-weight:700; border:2px solid var(--ink); border-radius:6px; background:var(--cream-2); }
.cat-chip img { width:18px; height:18px; }
.sale-chip { padding:0 8px; color:#fff; background:var(--red); }
.hot-chip { padding:0 8px; color:var(--ink); background:var(--gold); }
.owner-chip { padding:0 8px 0 0; color:#fff; background:var(--pc); box-shadow:inset 0 0 0 2px var(--lv); }
.owner-chip .portrait { width:22px; height:22px; border:0; border-radius:4px 0 0 4px; }
.place-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:5px; margin:0 0 6px; }
.place-stats .stat { display:grid; justify-items:center; gap:0; padding:5px 2px 4px; background:var(--cream-2); border:2px solid var(--ink); border-radius:6px; box-shadow:0 2px 0 #4a2e1f44; }
.place-stats .stat .ico { width:30px; height:30px; }
.place-stats .stat b { font-size:15px; line-height:1.2; }
.place-stats .stat small { font-size:11px; font-weight:700; color:var(--ink-soft); }
#infoBody p.place-line { margin:0 0 6px; font-size:14px; font-weight:700; color:var(--ink-2); text-align:center; }
#infoBody details.more { margin:0; border:2px dashed var(--cream-3); border-radius:6px; background:none; }
#infoBody details.more summary { padding:3px 10px; font-size:13px; color:var(--ink-soft); }
#infoBody details.more[open] summary { border-bottom:1px dashed var(--cream-3); }
#infoBody details.more p { margin:6px 8px; font-size:13px; line-height:1.5; font-weight:400; }
#infoBody details.more .tags { padding:6px 8px 0; }
#infoBody .tag { background:var(--cream-2); border:1px solid var(--ink-soft); border-radius:4px; font-size:12px; }
#infoBody .place-sub .tag { padding:1px 7px; font-size:12px; font-weight:700; border:2px solid var(--ink); border-radius:5px; background:#fffaf0; }
#infoBody .locate-btn { align-self:flex-start; margin:2px 0 4px; padding:4px 10px; font-size:13px; font-weight:700; background:#fffaf0; border:2px solid var(--ink); border-radius:6px; box-shadow:0 2px 0 var(--ink); }
/* 玩家頁 */
.player-strip { gap:4px; margin-bottom:8px; }
.player-chip { padding:3px 0; border:2px solid var(--ink); border-radius:8px; background:var(--cream-2); opacity:.6; box-shadow:0 2px 0 var(--ink); }
.player-chip.on { opacity:1; background:var(--pc); transform:translateY(-1px); }
/* 1006：頭像按鈕 hover 不吃 city.css 通用 button:hover 的米白底，只做輕微放大＋外框加亮；選取中＝玩家色底＋金框 */
.player-chip { transition:transform .12s, box-shadow .12s, opacity .12s; }
.player-chip:hover:not(:disabled) { background:var(--cream-2); opacity:.85; transform:scale(1.05); box-shadow:0 2px 0 var(--ink), 0 0 0 2px color-mix(in srgb, var(--pc) 70%, #fff); }
.player-chip.on, .player-chip.on:hover:not(:disabled) { opacity:1; background:var(--pc); box-shadow:0 2px 0 var(--ink), 0 0 0 3px var(--gold); }
.player-chip.on:hover:not(:disabled) { transform:translateY(-1px) scale(1.05); }
.pp-chip:hover:not(:disabled) { background:none; opacity:.9; transform:scale(1.05); }
.pp-chip.on:hover:not(:disabled) { opacity:1; transform:scale(1.12); }
.pp-chip.on .pp-face { box-shadow:0 0 0 3px var(--gold); }
.pp-summary-row:hover:not(:disabled) { background:#fff; border-color:var(--pc); }
.ol-char:hover:not(:disabled) { background:#fffbf2; transform:scale(1.04); }
.ol-char.mine:hover:not(:disabled) { background:#f1ebdd; }
#infoBody > .person { margin-bottom:8px; }
#infoBody > .person .person-text b { font-size:18px; font-weight:900; }
.asset-grid { gap:5px; margin:6px 0 8px; }
.asset-cell { grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; align-items:center; gap:0 6px; padding:4px 8px 4px 5px; background:var(--cream-2); border:2px solid var(--ink); border-radius:6px; box-shadow:0 2px 0 #4a2e1f33; }
.asset-cell .ico { grid-row:1 / 3; width:26px; height:26px; }
.asset-cell small { font-size:12px; color:var(--ink-soft); line-height:1.1; }
.asset-cell b { font:900 14px/1.2 var(--num); letter-spacing:-.02em; white-space:nowrap; }
.asset-cell .ico { grid-row:1 / 3; width:22px; height:22px; }
.asset-cell.big { background:#fff1c9; }
.asset-cell.big .ico { width:34px; height:34px; }
.asset-cell.big b { font-size:24px; color:var(--red-d); }
.shop-head { font-size:15px; font-weight:900; color:var(--ink); }
#infoBody .shop-entry { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:0 8px; padding:4px 8px 4px 4px; border:2px solid var(--ink); border-left:6px solid var(--lv, #bba982); border-radius:6px; background:#fffaf0; }
.shop-thumb { grid-row:1 / 3; width:36px; height:36px; object-fit:contain; }
#infoBody .shop-entry button { font-size:14px; font-weight:900; text-decoration:none; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#infoBody .shop-entry p { display:flex; gap:10px; margin:0; font-size:12px; }
#infoBody .shop-entry .ico { width:18px; height:18px; }

/* ═════════ 左側：旅程記錄（手帳日記） ═════════ */
.log-dock { padding:6px 8px 8px; }
.dock-head b { display:inline-flex; align-items:center; gap:6px; font-size:16px; font-weight:900; }
.dock-head b::before { content:""; width:22px; height:22px; background:url(pixel/hd/ui/ic_camera.png) center / contain no-repeat; image-rendering:pixelated; }
#logBody { border:2px solid var(--ink); border-radius:6px; background:var(--grid) 0 0 / 32px 32px, #fffaf0; image-rendering:pixelated; }
#logBody .log-entry { border-left:4px solid var(--pc, #bba982); background:#fffaf0cc; border-radius:0 4px 4px 0; }
#logBody .log-entry small { font:900 12px/1 var(--num); color:var(--ink-soft); padding:2px 4px; border:1px solid var(--ink-soft); border-radius:3px; }
.pixel-tab { border:2px solid var(--ink); border-left:0; background:var(--cream); box-shadow:2px 3px 0 var(--ink); }
.map-tools #showInfo { display:none; }
@media (max-width:700px) { .map-tools #showInfo { display:inline-flex; align-items:center; gap:4px; padding:3px 10px 3px 4px; font-size:13px; font-weight:900; background:var(--cream); border:2px solid var(--ink); border-radius:8px; box-shadow:0 3px 0 var(--ink); }
  .map-tools #showInfo::before { content:""; width:20px; height:20px; background:url(pixel/hd/ui/ic_pin.png) center / contain no-repeat; image-rendering:pixelated; } }

/* ═════════ 決策面板：車票 ═════════ */
.map-stage #decision { padding:8px 12px 8px; border:6px solid transparent; border-image:var(--f-ticket) 8 fill / 16px / 0 round; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; filter:drop-shadow(0 6px 0 #2a1a1066); }
.decision-heading { gap:8px; margin-bottom:4px; }
#decisionTitle { display:inline-flex; align-items:center; gap:7px; min-width:0; font-size:19px; font-weight:900; }
#decisionTitle .ico { width:28px; height:28px; }
#decisionTitle .portrait { width:30px; height:30px; }
#decisionTitle > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.step-badge { flex:0 0 auto; padding:1px 10px; font-size:15px; font-style:normal; font-weight:900; color:#fff; background:var(--red); border:2px solid var(--ink); border-radius:99px; box-shadow:0 2px 0 var(--red-d); transform:rotate(-2deg); }
#timer { font:900 14px var(--num); color:var(--red-d); }
#decisionDetail { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin:0 0 6px; font-size:14px; color:var(--ink-2); }
#decisionDetail:empty { display:none; }
#decisionDetail .stat { padding:2px 8px 2px 3px; background:var(--cream-2); border:2px solid var(--ink); border-radius:6px; }
#decisionDetail .stat .ico { width:24px; height:24px; }
#decisionDetail .stat b { font-size:16px; }
.sale-badge { font-style:normal; font-weight:900; color:#fff; background:var(--red); padding:0 8px; border-radius:4px; }
#choices { gap:8px; }
#choices button { position:relative; display:flex; align-items:center; gap:6px; min-width:0; padding:8px 12px; font-size:17px; font-weight:900; text-align:left; color:var(--ink); background:#fffaf0; border:3px solid var(--ink); border-radius:8px; box-shadow:0 4px 0 var(--ink); }
#choices button:hover:not(:disabled):not(.primary) { background:#fff; }
#choices button:hover:not(:disabled) { transform:translateY(-1px); }
#choices button:active:not(:disabled) { transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
#choices button:disabled { opacity:.5; }
#choices button .ico { width:28px; height:28px; }
#choices button small { display:inline; margin:0; font-size:13px; font-weight:700; color:var(--ink-soft); }
#choices .route-choice { flex:1 1 180px; flex-wrap:wrap; row-gap:0; }
#choices .route-choice kbd { width:22px; height:22px; display:grid; place-items:center; font:900 12px var(--num); color:#fff; background:var(--ink); border-radius:50%; }
#choices .route-choice .dir-arrow { font:900 26px/1 var(--num); color:var(--teal); }
#choices .route-choice b { font-size:17px; white-space:nowrap; }
#choices .route-choice small { flex-basis:100%; padding-left:28px; }
#choices .route-choice .stat { padding:0 6px 0 2px; font-size:13px; background:var(--cream-2); border-radius:5px; }
#choices .route-choice .stat .ico { width:20px; height:20px; }
#choices .buy-choice { flex:2 1 260px; color:#fff; background:linear-gradient(var(--teal-l) 0 4px, var(--teal) 4px); box-shadow:0 4px 0 var(--teal-d), 0 4px 0 2px var(--ink); }
#choices .buy-choice:hover:not(:disabled) { background:linear-gradient(#7fcabe 0 4px, #3a948e 4px); }
#choices .buy-choice b { font:900 24px/1 var(--num); }
#choices .buy-choice small { margin-left:auto; color:#e6fff9; }
#choices .buy-choice[data-unavailable=true] { background:#b9ab90; box-shadow:0 4px 0 #7d705a; }
#choices .pass-choice { flex:1 1 120px; justify-content:center; }
#choices .primary:not(.buy-choice) { color:#fff; background:var(--red); box-shadow:0 4px 0 var(--red-d), 0 4px 0 2px var(--ink); }
#choices .primary:not(.buy-choice):hover:not(:disabled) { background:#d94c38; }
#choices .card-pick small { color:#ffe3d6; }
.fly-select select { border:3px solid var(--ink); border-radius:8px; background:#fffaf0; font-weight:700; box-shadow:0 4px 0 var(--ink); }
.step-preview { font-size:12px; color:var(--teal-d); font-weight:700; }
.step-preview:empty { display:none; }

/* ═════════ 底列：旅行櫃台（一個主要動作＝擲骰印章） ═════════ */
#app > footer { background:var(--grid) 0 0 / 32px 32px, var(--cream); image-rendering:pixelated; border-top:3px solid var(--ink); box-shadow:inset 0 4px 0 var(--pc, #bba982), 0 -4px 0 #2a1a1033; padding:6px 14px 7px; gap:14px; }
.turn-guide { gap:3px 10px; }
#turnLabel { display:inline-flex; align-items:center; gap:6px; padding:2px 12px 2px 2px; font-size:17px; font-weight:900; color:#fff; background:var(--pc, #bba982); border:2px solid var(--ink); border-left:2px solid var(--ink); border-radius:99px; box-shadow:0 3px 0 var(--ink); }
#turnLabel .portrait { width:28px; height:28px; border:2px solid #fff; }
#season { display:inline-flex; gap:8px; font-size:13px; font-weight:700; color:var(--ink-2); }
#season .ico { width:20px; height:20px; }
#season .stat b { font-size:13px; }
#phaseSteps { gap:3px; }
#phaseSteps li { display:inline-flex; align-items:center; gap:3px; padding:1px 7px 1px 3px; font-size:12px; font-weight:700; color:var(--ink-soft); background:#0000; border:1.5px dashed #4a2e1f44; border-radius:6px; }
#phaseSteps li img { width:18px; height:18px; object-fit:contain; filter:grayscale(1) opacity(.55); }
#phaseSteps li.active { color:#fff; background:var(--teal); border:1.5px solid var(--ink); box-shadow:0 2px 0 var(--ink); }
#phaseSteps li.active img { filter:none; }
#status { position:relative; justify-self:start; max-width:100%; padding:5px 12px; font-size:15px; font-weight:700; color:var(--ink); background:#fff; border:2px solid var(--ink); border-radius:10px; box-shadow:0 2px 0 #4a2e1f44; }
#status::before { content:""; position:absolute; left:-9px; top:50%; margin-top:-6px; border:6px solid transparent; border-right-color:var(--ink); border-left:0; border-right-width:8px; }
.action-dock { gap:12px; }
#actor .portrait { width:42px; height:42px; border:2px solid var(--ink); }
#actor .person-text b { font-size:16px; font-weight:900; }
#actor .person-text small { font-size:11px; color:#fff; background:var(--red); padding:0 5px; border-radius:4px; width:max-content; }
.wallet { display:grid; grid-template-columns:auto auto; align-items:center; gap:0 5px; padding:3px 10px 3px 4px; background:#fff3c8; border:2px solid var(--ink); border-radius:8px; box-shadow:0 3px 0 var(--ink); }
.wallet .ico { width:30px; height:30px; }
.wallet strong { font:900 24px/1 var(--num); font-variant-numeric:tabular-nums; }
.wallet #effects { grid-column:1 / -1; }
.wallet #effects:empty { display:none; }
.effect-chip { border-width:2px; border-radius:5px; font-weight:700; box-shadow:0 1px 0 var(--ink); }
.actions { gap:8px; align-items:center; }
.actions #skill, .actions #hand { display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:4px 12px 4px 6px; font-size:15px; font-weight:900; color:var(--ink); background:#fffaf0; border:2px solid var(--ink); border-radius:8px; box-shadow:0 3px 0 var(--ink); }
.actions #skill::before, .actions #hand::before { content:""; width:26px; height:26px; background:center / contain no-repeat; image-rendering:pixelated; }
.actions #skill::before { background-image:url(pixel/hd/ui/ic_skill.png); }
.actions #hand::before { background-image:url(pixel/hd/ui/ic_cards.png); }
.actions #skill[data-charge=off] { opacity:.6; } .actions #skill[data-charge=off]::before { filter:grayscale(1); }
.actions #skill.ready { color:var(--teal-d); background:#e4f5ef; border-color:var(--ink); box-shadow:0 3px 0 var(--ink), 0 0 0 3px var(--teal-l); }
.actions #skill:active:not(:disabled), .actions #hand:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
.actions #roll.primary { display:inline-flex; align-items:center; gap:6px; min-width:150px; min-height:52px; padding:4px 18px 4px 10px; font-size:20px; font-weight:900; letter-spacing:.04em; color:#fff; text-shadow:0 2px 0 var(--red-d);
  background:linear-gradient(var(--red-l) 0 4px, var(--red) 4px); border:3px solid var(--ink); border-radius:12px; box-shadow:0 5px 0 var(--red-d), 0 5px 0 2px var(--ink); }
.actions #roll.primary::before { content:""; width:34px; height:34px; background:url(pixel/hd/ui/ic_dice.png) center / contain no-repeat; image-rendering:pixelated; }
.actions #roll.primary:not(:disabled) { animation:roll-pulse 1.8s ease-in-out infinite; }
.actions #roll.primary:not(:disabled)::before { animation:dice-wobble 1.8s ease-in-out infinite; }
.actions #roll.primary:hover:not(:disabled) { background:linear-gradient(#ff9a7c 0 4px, #d94c38 4px); }
.actions #roll.primary:active:not(:disabled) { transform:translateY(4px); box-shadow:0 1px 0 var(--red-d), 0 1px 0 2px var(--ink); animation:none; }
.actions #roll.primary:disabled { opacity:1; color:#f5ecdb; text-shadow:none; background:#bfae92; box-shadow:0 5px 0 #8a7a62, 0 5px 0 2px var(--ink); font-size:16px; }
.actions #roll.primary:disabled::before { filter:grayscale(1) opacity(.7); }
@keyframes roll-pulse { 50% { box-shadow:0 5px 0 var(--red-d), 0 5px 0 2px var(--ink), 0 0 0 6px #f0b43c88; } }
@keyframes dice-wobble { 0%, 70%, 100% { transform:rotate(0); } 78% { transform:rotate(-14deg); } 86% { transform:rotate(12deg); } 94% { transform:rotate(-6deg); } }
@media (prefers-reduced-motion:reduce) { .actions #roll.primary, .actions #roll.primary::before, #destination .dest-pin { animation:none !important; } }

/* ═════════ 對話框／事件卡／規則容器／局終：手帳紙 ═════════ */
dialog { color:var(--ink); border:8px solid transparent; border-image:var(--f-paper) 8 fill / 16px / 0 round; border-radius:0; background:none; filter:drop-shadow(0 8px 0 #2a1a1066); }
dialog::backdrop { background:#1b100a99; }
.dialog-head { padding-bottom:8px; border-bottom:2px dashed var(--cream-3); }
.dialog-head h2 { font-weight:900; }
.dialog-head button, #helpDialog .pager button, #resultDialog button:not(.primary), #skillOptions button:not(.primary), #cardTargets button:not(.primary) { background:#fffaf0; border:2px solid var(--ink); border-radius:8px; box-shadow:0 3px 0 var(--ink); font-weight:900; }
dialog .primary, #skillOptions .primary, #cardTargets .primary { color:#fff; background:var(--red); border:2px solid var(--ink); border-radius:8px; box-shadow:0 3px 0 var(--red-d), 0 3px 0 2px var(--ink); font-weight:900; }
dialog .primary:hover:not(:disabled) { background:#d94c38; }
#helpDialog { width:min(760px, 94vw); }
#helpDialog .dialog-head h2::before { content:""; display:inline-block; width:28px; height:28px; margin-right:6px; vertical-align:-6px; background:url(pixel/hd/ui/ic_passport.png) center / contain no-repeat; image-rendering:pixelated; }
#helpBody { background:var(--grid) 0 0 / 32px 32px, #fffaf0; image-rendering:pixelated; border:2px solid var(--ink); border-radius:6px; padding:10px 14px; margin:8px 0; }
.hand-list button { position:relative; display:grid; align-content:center; gap:2px; padding:8px 10px 8px 12px; font-weight:900; text-align:left; background:#fffaf0; border:3px solid var(--ink); border-radius:8px; box-shadow:0 4px 0 var(--ink); }
.hand-list button::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--kc, #bba982); border-radius:4px 0 0 4px; }
.hand-list button[data-kind=BUFF] { --kc:var(--teal); } .hand-list button[data-kind=PRANK] { --kc:var(--gold); } .hand-list button[data-kind=DEBUFF] { --kc:var(--red); }
.hand-list button small { font-size:11px; font-weight:700; color:var(--kc, var(--ink-soft)); }
.hand-list button[aria-pressed=true] { background:#fff6d8; border-color:var(--ink); box-shadow:0 4px 0 var(--ink), 0 0 0 3px var(--gold); }
#handDialog .dialog-head h2::before, #skillDialog .dialog-head h2::before { content:""; display:inline-block; width:28px; height:28px; margin-right:6px; vertical-align:-6px; background:center / contain no-repeat; image-rendering:pixelated; }
#handDialog .dialog-head h2::before { background-image:url(pixel/hd/ui/ic_cards.png); } #skillDialog .dialog-head h2::before { background-image:url(pixel/hd/ui/ic_skill.png); }
#resultDialog { text-align:center; }
#resultDialog h2 { font-weight:900; }
#resultDialog h2::before { content:""; display:block; width:56px; height:56px; margin:0 auto 4px; background:url(pixel/hd/ui/ic_star.png) center / contain no-repeat; image-rendering:pixelated; }
#results .data-row { padding:6px 8px; margin-bottom:6px; background:#fffaf0; border:2px solid var(--ink); border-radius:8px; }
#results .data-row:first-child { background:#fff1c9; box-shadow:0 0 0 3px var(--gold); }
#results strong { font-family:var(--num); }
.event-card { border:8px solid transparent; border-image:var(--f-paper) 8 fill / 16px / 0 round; border-radius:0; background:none; filter:drop-shadow(0 8px 0 #2a1a1066); }
.event-art { border-bottom:2px dashed var(--cream-3); }
#eventTag { display:inline-block; padding:2px 12px; color:#fff; background:var(--red); border:2px solid var(--ink); border-radius:99px; letter-spacing:.06em; }
.portrait { border-color:var(--pc, var(--ink)); }

/* ═════════ 中寬（701～1000）＝頂列兩行、右欄窄 ═════════ */
@media (max-width:1400px) and (min-width:701px) {
  #app header .score .portrait { width:30px; height:30px; }
  .score-money strong { font-size:17px; }
  #app header #destination { max-width:230px; }
}
@media (max-width:1000px) and (min-width:701px) {
  #app > footer { grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"guide status" "dock dock"; gap:5px 12px; }
  #app > footer .turn-guide { grid-area:guide; display:flex; align-items:center; gap:8px; }
  #app > footer #status { grid-area:status; justify-self:stretch; padding:3px 10px; white-space:nowrap; }
  #app > footer .action-dock { grid-area:dock; justify-content:flex-start; }
  #app > footer .actions { margin-left:auto; }
  #app > header { gap:6px 8px; }
  #app header #scoreboard { gap:6px; }
  #app header .score { padding-right:16px; }
  .actions #roll.primary { min-width:120px; font-size:17px; }
  .actions #skill, .actions #hand { font-size:13px; padding:4px 8px 4px 4px; }
  #status { font-size:13px; }
  .wallet strong { font-size:20px; }
  #phaseSteps li { font-size:11px; }
  #info nav button { padding:4px 6px 5px; font-size:13px; white-space:nowrap; }
  #info nav button::before { width:16px; height:16px; }
  #info nav #backMap { padding:4px 2px; }
}
@media (min-width:701px) and (max-height:820px) {
  .place-art { height:84px; padding-top:4px; }
  #infoBody .place-card h2 { font-size:19px; }
  #infoBody .spot-quip { display:none; }
  .place-stats .stat .ico { width:24px; height:24px; }
}
@media (min-width:701px) and (max-height:760px) {
  #app header .score .portrait { width:28px; height:28px; }
  .actions #roll.primary { min-height:44px; }
}

/* ═════════ 手機直式 ═════════ */
@media (max-width:700px) {
  #app > header { background:var(--leather); padding:5px 6px 7px; border-bottom:3px solid var(--ink); }
  #app header .brand { font-size:15px; padding:2px 8px 2px 3px; }
  #app header .pixel-icon { width:40px; height:40px; }
  #app header .spotlight { flex-direction:row; align-items:center; justify-content:space-between; gap:6px; }
  #app header #destination { max-width:none; flex:1 1 auto; }
  #app header .halo-chip { flex:0 0 auto; }
  #app header #scoreboard { gap:5px; }
  #app header .score { padding:2px 16px 2px 3px; gap:5px; }
  #app header .score .portrait { width:28px; height:28px; }
  .score-money strong { font-size:16px; }
  .score-shops .ico { width:16px; height:16px; }
  #app > footer { padding:5px 7px 6px; gap:4px; }
  .turn-guide { grid-template-columns:auto minmax(0, 1fr) auto; }
  #turnLabel { font-size:14px; padding:1px 8px 1px 1px; }
  #turnLabel .portrait { width:22px; height:22px; }
  #season { gap:4px; font-size:11px; }
  #season .ico { width:16px; height:16px; }
  #phaseSteps li { padding:1px 3px; font-size:0; }
  #phaseSteps li img { width:18px; height:18px; }
  #status { font-size:13px; padding:3px 9px; justify-self:stretch; }
  #status::before { display:none; }
  #actor .portrait { width:34px; height:34px; }
  .wallet strong { font-size:20px; }
  .wallet .ico { width:24px; height:24px; }
  .actions #skill, .actions #hand { flex:1; justify-content:center; min-height:44px; font-size:14px; }
  .actions #roll.primary { flex:1.6; justify-content:center; min-width:0; min-height:48px; font-size:17px; }
  .actions #roll.primary::before { width:28px; height:28px; }
  .map-stage #decision { padding:5px 8px 6px; border-image-width:12px; border-width:5px; }
  #decisionTitle { font-size:16px; } #decisionTitle .ico { width:22px; height:22px; }
  .step-badge { font-size:13px; padding:0 8px; }
  #choices { gap:5px; }
  #choices button { padding:5px 8px; font-size:14px; border-width:2px; box-shadow:0 3px 0 var(--ink); }
  #choices .route-choice { flex:1 1 calc(50% - 5px); }
  #choices .route-choice b { font-size:14px; overflow:hidden; text-overflow:ellipsis; }
  #choices .route-choice .dir-arrow { font-size:20px; }
  #choices .route-choice small { padding-left:0; font-size:11px; }
  #choices .route-choice kbd { display:none; }
  #choices .buy-choice b { font-size:19px; }
  #choices .buy-choice small { font-size:11px; }
  #decisionDetail .stat b { font-size:14px; }
  aside#info, .log-dock { border-image:none; border:0; filter:none; background:var(--grid) 0 0 / 32px 32px, var(--cream); }
  .place-art { height:104px; }
}

/* ═════════ 1005：數字圖示（程式繪製 24 格，×3 輸出 72px）——只用 24／48px 顯示，取樣剛好整格 ═════════ */
.stat .stat-tag { font-size:12px; font-weight:900; line-height:16px; letter-spacing:0; color:var(--ink-2); padding:0 3px; border-radius:3px; background:#4a2e1f14; }
.stat.bad .stat-tag { color:var(--red-d); background:#c8402e1a; }
.score-shops .ico, #season .ico, #decisionDetail .stat .ico, #choices button .ico, #choices .route-choice .stat .ico, .asset-cell .ico, #infoBody .shop-entry .ico, .wallet .ico, #decisionTitle .ico { width:24px; height:24px; }
.place-stats .stat .ico, .asset-cell.big .ico { width:48px; height:48px; }
.intro-pitch img, #phaseSteps li img, .intro .char-card .card-skill .ico { width:24px; height:24px; }
@media (max-width:700px) { .intro .char-card .card-skill { white-space:nowrap; } .intro .char-card .card-skill .ico { display:none; } } /* 1006 QA：窄卡片上「再聽一次」「老店傳承」被圖示擠成兩行，手機只留技能名（類型在提示泡泡） */
#infoBody .shop-entry p { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:center; }
#infoBody .shop-entry .stat { gap:2px; }
#infoBody .shop-entry .stat .stat-tag { padding:0 2px; }
#infoBody .shop-entry .stat b { font-size:14px; }
.place-stats .stat small { font-size:12px; }
@media (min-width:701px) and (max-height:820px) { .place-stats .stat .ico { width:24px; height:24px; } }

/* ═════════ 1005：玩家色可淺可深——玩家色底上的白字一律加深色描邊（小緣淺粉、老奶奶黃也讀得到） ═════════ */
:root { --on-pc:1px 0 0 #3a2418, -1px 0 0 #3a2418, 0 1px 0 #3a2418, 0 -1px 0 #3a2418, 1px 1px 0 #3a2418, -1px 1px 0 #3a2418, 1px -1px 0 #3a2418, -1px -1px 0 #3a2418, 0 2px 0 #3a2418; }
#app header .score.active strong, .score.active strong, .score.active .score-shops b, #turnLabel > span, .owner-chip b, .hero-kind, .portrait-fallback, .ol-no { color:#fff; text-shadow:var(--on-pc); }
.score.active .score-shops { background:#fff6; border-color:#3a241866; }
.hero-tag > b { color:var(--ink); text-shadow:none; }
.hero-tag > b::before { content:""; display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:2px; background:var(--pc); border:2px solid var(--ink); border-radius:3px; }
.net-pop b { -webkit-text-stroke:5px #3a2418; text-shadow:0 3px 0 var(--pc); }
.net-tag { font-size:12px; }

/* ═════════ 1005：手機共用——觸控區 ≥40px、字級 ≥12px、瀏海／底部安全區 ═════════ */
@media (max-width:700px), (max-height:500px) {
  .intro { padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); }
  .intro .ticket-opt span, .pick-title small, .intro .char-card .card-skill, .hero-stamp { font-size:12px; }
  .intro .ticket-opt select { min-height:40px; font-size:14px; padding:0 2px; }
  .intro .legacy-link { display:inline-flex; align-items:center; min-height:40px; font-size:13px; }
  #app header .pixel-icon small, #destination .dest-text small, .score-face .rank, .score-face .who, .score-face .halo-pip, #app header .halo-chip .muted { font-size:12px; }
  .score-face .rank { width:19px; height:19px; left:-6px; top:-6px; }
  .score-face .who { line-height:14px; }
  #app header .halo-chip { min-height:40px; }
  .map-tools #showInfo { min-height:40px; }
  #choices button { min-height:44px; }
  #choices .buy-choice small, #choices .route-choice small, .region-stamp, .spot-stamped, .asset-cell small, .hand-list button small, #logBody .log-entry small, .tut-face small, .tut-cast small, .pp-stamp small, .pp-bar small, .pp-who small { font-size:12px; }
  .effect-chip { position:relative; min-height:28px; font-size:12px; }
  #actor .person-text small { font-size:12px; }
  .effect-chip::after { content:""; position:absolute; inset:-6px -2px; }
  #info nav button, #info nav #backMap, #infoPager button, .pager button { min-height:44px; }
  #infoBody details.more summary { display:flex; align-items:center; min-height:40px; }
  #infoBody .locate-btn { min-height:40px; }
  #infoBody .shop-entry button { display:flex; align-items:center; min-height:40px; }
  .player-chip { min-height:44px; }
  .dialog-head button, #closeHand, #closeSkill, #closeNote, #closeHelp, #restart, #inspect, #cardTargets button, #skillOptions button { min-height:44px; }
  .tut-close { min-height:40px; padding:0 10px; }
  .tut-nav button:not(.tut-dot) { min-height:44px; }
  .tut-dot { pointer-events:none; } /* 圓點只顯示進度；手機以左右滑或上一張／下一張翻頁 */
  .tour-btns button { min-height:44px; }
  .tut-tip-more { min-height:32px; } .tut-tip-close { min-width:40px; min-height:40px; }
  .pp-close, .pp-nav button { min-height:44px; }
  .pp-chip .pp-face { width:40px; height:40px; }
  .pp-bar { min-height:40px; }
  .pp-open { min-height:48px; }
  .pp-summary-row { min-height:44px; }
  .ol-ghost, .ol-sit, .ol-field select { min-height:44px; }
  #onlineLobby .ol-name input { min-height:44px; font-size:16px; }
}

/* ═════════ 1005：手機直式——頂列壓成兩行（爆紅車票＋工具｜四張吊牌一列）、資訊頁全螢幕、底列避開瀏海 ═════════ */
@media (max-width:700px) {
  #app > header { padding:calc(5px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) 6px calc(6px + env(safe-area-inset-left)); gap:6px; }
  #app header .brand { display:none; }
  #app header .topline { grid-template-columns:minmax(0, 1fr) auto; gap:6px; }
  #app header .spotlight { grid-column:1; grid-row:1; min-width:0; }
  #app header .toolbar { grid-column:2; grid-row:1; }
  #app header .toolbar { gap:4px; }
  #app header .pixel-icon { width:44px; height:48px; }
  #app header .pixel-icon img { width:22px; height:22px; }
  #app header #destination { min-height:44px; padding-right:6px; }
  #destination .dest-thumb { display:none; }
  #destination .dest-text b { font-size:15px; }
  #app header #scoreboard { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; }
  #app header .score { display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; align-items:center; gap:1px 4px; min-height:50px; padding:3px 4px 3px 3px; border-radius:8px; }
  #app header .score::after { display:none; }
  #app header .score .score-face { grid-row:1 / 3; }
  #app header .score .portrait { width:30px; height:30px; }
  #app header .score .score-money strong { font-size:15px; letter-spacing:-.03em; }
  #app header .score .score-money { padding-left:4px; min-width:0; }
  #app header .score .score-shops { justify-self:start; padding:0 4px 0 0; gap:1px; }
  #app header .score .score-shops b { font-size:13px; }
  #app > footer { padding:5px calc(7px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(7px + env(safe-area-inset-left)); }
  #phaseSteps { display:none; }
  .turn-guide { grid-template-columns:auto minmax(0, 1fr); }
  #season { grid-row:auto; grid-column:auto; justify-self:end; gap:6px; font-size:12px; }
  #season .stat b { font-size:13px; }
  #status { font-size:14px; }
  .pixel-tab { width:40px; height:52px; }
  /* 資訊頁（地點／玩家）：手機改成蓋滿全螢幕的手帳頁，不再擠在頂列與底列之間 */
  main.info-open aside#info { position:fixed; inset:0; z-index:45; padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); }
  #info nav #backMap { margin-left:auto; padding:0 14px; font-size:15px; font-weight:900; color:var(--ink); background:#fffaf0; border:2px solid var(--ink); border-radius:8px; box-shadow:0 2px 0 var(--ink); text-decoration:none; transform:translateY(-2px); }
  .place-art { height:132px; }
  #infoBody .place-card h2 { font-size:22px; }
  .hand-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #handDialog { width:94vw; }
  .tut-cast { flex-wrap:wrap; justify-content:center; gap:4px 6px; }
  .tut-face { width:44px; }
  .tut-face small { letter-spacing:-.04em; }
  .pp-bars { gap:4px; } .pp-bar { padding:2px 8px; }
}
@media (max-width:700px) and (min-height:800px) {
  .intro .char-card .portrait { width:64px; height:64px; }
  .intro .char-card > b { font-size:15px; }
  .hero-photo .portrait { width:88px; height:88px; }
}
@media (max-width:700px) and (max-height:700px) {
  .place-art { height:96px; }
  .intro .ticket-opt img { display:none; }
  .intro .ticket-opt { grid-template-columns:minmax(0, 1fr); }
}

/* ═════════ 1005：局終／對話框——矮螢幕不溢出 ═════════ */
@media (max-height:760px), (max-width:700px) {
  #resultDialog { width:min(640px, 96vw); max-height:calc(100dvh - 16px); padding:10px 12px; overflow:hidden; }
  #resultDialog h2 { margin:0 0 6px; font-size:18px; line-height:1.3; }
  #resultDialog h2::before { width:32px; height:32px; margin-bottom:2px; }
  #results .data-row { padding:3px 8px; margin-bottom:4px; }
  #results .data-row .portrait { width:32px; height:32px; }
  #results .person-text small { font-size:12px; }
  #results strong { font-size:18px; }
  #results .pp-summary { margin:4px 0; padding:5px 8px; }
  #results .pp-summary h3 { margin-bottom:4px; font-size:14px; }
  #results .pp-summary-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px; }
  #results .pp-summary-row { padding:2px 6px 2px 2px; gap:4px; }
  #results .pp-summary-row .pp-face { width:30px; height:30px; border-width:2px; }
  #results .pp-summary-row strong { font-size:15px; white-space:nowrap; }
  #results .pp-summary-text b { font-size:13px; }
  #results .pp-title { font-size:12px; padding:0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  #results .pp-summary-text { min-width:0; }
  #resultStats { margin:4px 0 8px; font-size:13px; line-height:1.4; }
}

/* ═════════ 1005：手機橫向（矮於 500px）——頂列、底列各一行，右欄窄手帳，入口頁兩頁並排壓縮 ═════════ */
@media (min-width:701px) and (max-height:500px) {
  /* 入口頁 */
  .intro { padding:6px calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left)); place-items:stretch; }
  .intro-card.passport { height:100%; padding:6px; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); }
  .intro-card.passport::before { left:calc(4 / 12 * (100% - 12px) + 6px); top:6px; bottom:6px; }
  .passport-page { padding:8px 10px; gap:5px; }
  .intro .eyebrow, .intro-pitch, .hero-tag { display:none; }
  .intro h1.logo { font-size:30px; }
  .intro h2.ribbon { font-size:14px; padding:2px 16px 3px; margin:2px auto; }
  .hero-char { margin-top:2px; gap:2px 8px; }
  .hero-photo { padding:4px 4px 12px; } .hero-photo .portrait { width:64px; height:64px; }
  .hero-stamp { width:40px; height:40px; right:-12px; bottom:-6px; border-width:2px; }
  .hero-walk { height:58px; }
  .intro .skill-preview { font-size:13px; padding:5px 9px; line-height:1.35; }
  .intro .skill-preview b { font-size:13px; }
  .pick-title { font-size:16px; } .pick-title img { width:24px; height:24px; }
  .intro .char-pick { gap:5px; }
  .intro .char-card { grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; justify-items:start; align-items:center; gap:0 6px; padding:3px 4px; text-align:left; border-width:2px; box-shadow:0 3px 0 var(--ink);
    background:linear-gradient(90deg, var(--pc) 0 22px, #fffaf0 22px); }
  .intro .char-card:hover:not(:disabled) { background:linear-gradient(90deg, var(--pc) 0 22px, #fff 22px); }
  .intro .char-card.chosen { background:linear-gradient(90deg, var(--pc) 0 22px, #fff6d8 22px); transform:translateY(-2px); }
  .intro .char-card::before { inset:0 auto 0 0; width:22px; height:auto; }
  .intro .char-card .portrait { grid-row:1 / 3; width:38px; height:38px; margin:0; border-width:2px; }
  .intro .char-card > b { font-size:14px; }
  .intro .char-card.chosen::after { width:18px; height:18px; font-size:11px; top:2px; right:2px; }
  .intro .setup { gap:6px; }
  .intro .ticket-opt { padding:2px 6px; gap:0 4px; border-width:5px; border-image-width:12px; }
  .intro .ticket-opt img { width:24px; height:24px; grid-row:1 / 3; }
  .intro .ticket-opt select { font-size:13px; }
  .intro-actions { gap:16px; padding-top:0; }
  .intro .stamp-btn, .intro button#start { width:64px; height:64px; font-size:20px; box-shadow:0 4px 0 var(--ink), inset 0 0 0 4px #fff3, inset 0 0 0 7px var(--red); }
  .intro #introHelp { font-size:14px; padding:2px 10px; min-height:44px; }
  /* 遊戲中：頂列一行 */
  #app > header { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; padding:4px calc(8px + env(safe-area-inset-right)) 4px calc(8px + env(safe-area-inset-left)); }
  #app header .brand { display:none; }
  #app header #scoreboard { order:1; flex:1 1 auto; display:flex; gap:5px; min-width:0; }
  #app header .score { flex:1 1 0; display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; align-items:center; gap:0 4px; min-height:44px; padding:2px 6px 2px 3px; border-radius:8px; }
  #app header .score::after { display:none; }
  #app header .score .score-face { grid-row:1 / 3; }
  #app header .score .portrait { width:28px; height:28px; }
  #app header .score .score-money strong { font-size:15px; }
  #app header .score .score-money { padding-left:4px; min-width:0; }
  #app header .score .score-shops { justify-self:start; padding:0 4px 0 0; }
  #app header .score .score-shops b { font-size:13px; }
  #app header .spotlight { order:2; flex:0 0 auto; gap:5px; }
  #app header #destination { max-width:190px; min-height:44px; padding-right:6px; }
  #destination .dest-thumb { display:none; }
  #destination .dest-text b { font-size:14px; }
  #app header .toolbar { order:3; margin-left:0; gap:4px; }
  #app header .pixel-icon { width:44px; height:44px; }
  #app header .pixel-icon img { width:20px; height:20px; }
  /* 底列一行：行動者｜回合｜狀態｜現金｜技能／手牌／擲骰 */
  #app > footer { grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:none; align-items:center; gap:8px; padding:4px calc(10px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); }
  #app > footer .turn-guide { grid-area:auto; display:flex; align-items:center; gap:6px; }
  #app > footer #status { grid-area:auto; justify-self:stretch; padding:3px 10px; font-size:13px; white-space:nowrap; }
  #app > footer #status::before { display:none; }
  #app > footer .action-dock { grid-area:auto; gap:6px; }
  #app > footer .actions { margin-left:0; gap:6px; }
  #phaseSteps, #actor { display:none; }
  #turnLabel { font-size:14px; } #turnLabel .portrait { width:24px; height:24px; }
  #season { gap:4px; font-size:12px; } #season .stat b { font-size:12px; } #season .stat-tag { display:none; }
  .wallet { grid-template-columns:auto auto auto; padding:2px 8px 2px 4px; }
  .wallet strong { font-size:18px; }
  .wallet #effects { grid-column:auto; }
  .actions #skill, .actions #hand { min-height:44px; font-size:13px; padding:2px 8px 2px 4px; }
  .actions #skill::before, .actions #hand::before { width:24px; height:24px; }
  .actions #roll.primary { min-width:112px; min-height:44px; font-size:16px; padding:2px 12px 2px 6px; }
  .actions #roll.primary::before { width:24px; height:24px; }
  /* 資訊頁：橫向只有約 290px 高，改成點「查看資訊」／點地圖格才開的全螢幕手帳，左右兩欄 */
  aside#info { display:none; }
  main.info-open aside#info { display:flex; position:fixed; inset:0; width:auto; z-index:45; padding:4px calc(10px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); border-image:none; border:0; filter:none; background:var(--grid) 0 0 / 32px 32px, var(--cream); }
  .map-tools #showInfo { display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:3px 10px 3px 4px; font-size:13px; font-weight:900; background:var(--cream); border:2px solid var(--ink); border-radius:8px; box-shadow:0 3px 0 var(--ink); }
  .map-tools #showInfo::before { content:""; width:24px; height:24px; background:url(pixel/hd/ui/ic_pin.png) center / contain no-repeat; image-rendering:pixelated; }
  #info nav #backMap { display:inline-flex; align-items:center; margin-left:auto; padding:0 14px; font-size:15px; font-weight:900; color:var(--ink); background:#fffaf0; border:2px solid var(--ink); border-radius:8px; box-shadow:0 2px 0 var(--ink); text-decoration:none; transform:translateY(-2px); }
  #infoBody { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow:row dense; align-content:start; gap:0 14px; padding:8px 10px; }
  #infoBody > * { grid-column:2; }
  #infoBody > .place-card, #infoBody > .player-strip, #infoBody > .person, #infoBody > .asset-grid, #infoBody > .pp-open { grid-column:1; }
  #infoBody > .place-card { grid-row:span 8; }
  .place-art { height:150px; }
  #infoBody .spot-card { margin-top:0; }
  .asset-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; margin:4px 0; }
  .asset-cell .ico { width:24px; height:24px; }
  .asset-cell.big .ico { width:24px; height:24px; }
  .asset-cell.big b { font-size:20px; }
  .shop-head { margin:0 0 4px; }
  /* 決策面板：左下、一行選項 */
  .map-stage #decision { bottom:calc(var(--footer-h, 52px) + 6px); left:calc(var(--left-w, 0px) + 8px + env(safe-area-inset-left)); width:min(560px, calc(100% - var(--left-w, 0px) - var(--right-w, 260px) - 20px)); padding:4px 10px 6px; border-width:5px; border-image-width:12px; }
  #decisionTitle { font-size:16px; } #decisionTitle .portrait { width:24px; height:24px; }
  #decisionDetail { margin:0 0 4px; font-size:13px; }
  #decisionDetail .stat b { font-size:14px; }
  #choices { gap:6px; }
  #choices button { min-width:0; padding:4px 10px; font-size:15px; border-width:2px; box-shadow:0 3px 0 var(--ink); }
  #choices .buy-choice b { font-size:19px; }
  #choices .route-choice small { padding-left:0; font-size:12px; }
  #choices .route-choice kbd { display:none; }
  .step-preview { display:none; }
  /* 對話框 */
  #results { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 8px; }
  #results .pp-summary { grid-column:1 / -1; }
  #results .pp-summary-list { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  #results .pp-summary-row strong { font-size:14px; }
  dialog { max-height:calc(100dvh - 12px); padding:10px 14px; }
  .dialog-head { margin-bottom:6px; padding-bottom:4px; }
  .dialog-head h2 { font-size:19px; }
  .hand-list button { min-height:52px; }
  #cardDetail { min-height:0; padding:6px 0; }
  /* 教學卡：圖左文右 */
  #helpDialog.tut-cards { width:min(820px, 96vw); }
  #helpDialog.tut-cards .tut-root { padding:8px 12px; gap:6px; height:calc(100dvh - 16px); }
  #helpDialog .tut-card { flex-direction:row; gap:12px; }
  #helpDialog .tut-art { flex:0 0 42%; width:42%; aspect-ratio:auto; height:100%; max-height:none; }
  #helpDialog .tut-body { flex:1 1 auto; min-width:0; overflow:hidden; }
  #helpDialog .tut-title { font-size:19px; } #helpDialog .tut-lines { font-size:14px; line-height:1.45; }
  #helpDialog .tut-chip b { font-size:16px; } #helpDialog .tut-chip-icon { width:24px; height:24px; }
  #helpDialog .tut-lv img { height:30px; }
  #helpDialog .tut-face { width:40px; } #helpDialog .tut-face img { width:32px; height:32px; }
  #helpDialog .tut-cast { gap:3px 4px; flex-wrap:wrap; }
  /* 地圖導覽泡泡：收掉小人，矮螢幕放得下 */
  #helpDialog .tour-guide { display:none; }
  .tour-bubble { padding:6px 10px; }
  .tour-text b { font-size:16px; } .tour-text p { font-size:14px; line-height:1.35; }
  /* 護照 */
  #passportDialog { display:none; } #passportDialog[open] { display:flex; flex-direction:column; padding:6px 8px; height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); }
  #passportDialog .pp-head { padding-bottom:4px; } #passportDialog .pp-cover { height:30px; } #passportDialog .pp-who b { font-size:17px; }
  #passportDialog .pp-spread { flex:1 1 auto; min-height:0; }
  #passportDialog .pp-page { padding:6px 10px; min-height:0; }
  #passportDialog .pp-id { gap:4px; display:grid; grid-template-columns:auto 1fr; align-content:start; align-items:center; }
  #passportDialog .pp-idrow .pp-face { width:40px; height:40px; } #passportDialog .pp-idrow b { font-size:16px; }
  #passportDialog .pp-count strong { font-size:28px; }
  #passportDialog .pp-bars { grid-column:1 / -1; display:grid; grid-template-columns:1fr; gap:2px; }
  #passportDialog .pp-bar { grid-template-columns:5.2em 1fr auto; min-height:40px; padding:1px 6px; font-size:13px; gap:6px; }
  #passportDialog .pp-stamps { overflow:hidden; }
  #passportDialog .pp-ring { width:50px; height:50px; } #passportDialog .pp-ring img { max-width:38px; max-height:38px; }
  #passportDialog .pp-grid { flex:1 1 auto; min-height:0; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:2px 6px; overflow:hidden; }
  #passportDialog .pp-region b { font-size:17px; }
  /* 線上大廳 */
  #onlineLobby.ol-overlay { padding:6px calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left)); }
  #onlineLobby .ol-card { padding:8px 14px 36px; gap:6px; }
  #onlineLobby .ol-head h2 { font-size:19px; } #onlineLobby .ol-flag { width:26px; }
  #onlineLobby .ol-tile { padding:6px 8px; gap:3px; }
  #onlineLobby .ol-tile-art, #onlineLobby .ol-walker { height:48px; }
  #onlineLobby .ol-tile b { font-size:17px; }
  #onlineLobby .ol-slot { width:34px; height:40px; font-size:22px; }
  #onlineLobby .ol-skyline { height:30px; } #onlineLobby .ol-skyline img { height:26px; }
  #onlineLobby .ol-room { padding-bottom:36px; }
  #onlineLobby .ol-stage { height:50px; } #onlineLobby .ol-body { height:46px; }
  #onlineLobby .ol-face { width:34px; height:34px; }
  #onlineLobby .ol-chars { gap:4px; }
  #onlineLobby .ol-start { font-size:16px; padding:8px 20px; }
}

/* ═════════ 1006：版面減法（地圖優先）——記錄預設收、右欄改點了才滑出的浮卡、底列一行＋擲骰鍵上方一行提示、手牌卡面 ═════════
   cityMain.js：toggleLog（localStorage city_log_open）、pickPlace／calmPanels（main.info-open、main.overview-calm）、fitStage（依面板實際開關算安全區）、
   #status[data-phase]（準備／擲骰／結算章）、walletWorth（.wallet-worth）、openHand 的 .hand-card（.card-top／.card-bottom、data-state）。 */
/* 底列：頭像＋身家／現金｜（發薪倒數）｜手牌｜技能｜擲骰——行動者名牌與三步指示收起，三步併進 #status 的階段章 */
#app > footer { display:flex; align-items:center; gap:10px; }
#app > footer .turn-guide, #app > footer .action-dock { display:contents; }
#app > footer #turnLabel, #app > footer #phaseSteps { display:none; }
#app > footer #actor { order:1; min-width:0; }
#app > footer #actor .person-text { display:none; }
#app > footer #actor .portrait { width:48px; height:48px; }
#app > footer .wallet { order:2; grid-template-columns:auto auto auto; gap:0 6px; }
.wallet-worth { display:grid; justify-items:start; line-height:1.05; padding-right:6px; margin-right:2px; border-right:2px dashed #4a2e1f33; }
.wallet-worth small { font-size:12px; font-weight:900; color:var(--ink-soft); }
.wallet-worth b { font:900 17px/1.1 var(--num); color:var(--ink-2); white-space:nowrap; }
#app > footer #season { order:3; display:inline-flex; gap:6px; opacity:.85; }
#app > footer .actions { order:4; margin-left:auto; gap:10px; }
/* 擲骰鍵：唯一主色、最大 */
#app > footer .actions #roll.primary { min-width:200px; min-height:62px; padding:4px 22px 4px 12px; font-size:25px; border-radius:14px; }
#app > footer .actions #roll.primary::before { width:42px; height:42px; }
#app > footer .actions #roll.primary:disabled { font-size:17px; }
/* 一行提示（原 #status＋三步指示）：浮在擲骰鍵正上方，前面是階段章 */
#app > footer #status { position:absolute; right:12px; bottom:calc(100% + 8px); z-index:2; display:flex; align-items:center; gap:8px; max-width:min(460px, calc(100vw - 24px)); min-height:32px; padding:3px 12px 3px 4px; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
#app > footer #status::before { content:none; position:static; display:inline-flex; align-items:center; flex:0 0 auto; margin:0; height:24px; padding:0 8px 0 26px; font:900 13px/24px var(--font-display, sans-serif); color:#fff; border:0; border-radius:99px; background:var(--teal) 3px center / 20px 20px no-repeat; image-rendering:pixelated; }
#app > footer #status[data-phase=prepare]::before { content:"準備"; background-image:url(pixel/hd/ui/ic_cards.png); }
#app > footer #status[data-phase=move]::before { content:"擲骰"; background-image:url(pixel/hd/ui/ic_dice.png); background-color:var(--red); }
#app > footer #status[data-phase=land]::before { content:"結算"; background-image:url(pixel/hd/ui/ic_shop.png); background-color:#b07a1e; }
#app > footer #status::after { content:""; position:absolute; right:64px; bottom:-8px; border:7px solid transparent; border-top-color:var(--ink); border-bottom:0; }
#app > footer #status:empty { display:none; }
/* 有決策面板時，提示與面板標題重複：收起 */
#app:has(#decision:not([hidden])) footer #status { display:none; }
/* 頂列：行動者吊牌放大＋跳動箭頭（計分卡內容由 refresh 產生，這裡只加樣式） */
#app header .score { transition:transform .18s; }
#app header .score.active { z-index:2; transform:translateY(-1px) scale(1.1); transform-origin:center top; }
#app header .score.active::before { content:""; position:absolute; left:50%; bottom:-17px; margin-left:-9px; border:9px solid transparent; border-bottom:11px solid var(--gold); border-top:0; filter:drop-shadow(0 2px 0 var(--ink)); animation:turn-arrow .9s ease-in-out infinite; pointer-events:none; }
@keyframes turn-arrow { 50% { transform:translateY(-5px); } }
@media (prefers-reduced-motion:reduce) { #app header .score.active::before { animation:none; } }
/* 右欄 #info：桌面改成點地點／計分卡才滑出的浮卡（高度隨內容，最多到底列上方），右上「回地圖」改成關閉叉 */
@media (min-width:701px) and (min-height:501px) {
  aside#info { display:none; bottom:auto; width:300px; max-height:calc(100% - var(--header-h, 52px) - var(--footer-h, 64px) - 60px); }
  main.info-open aside#info { display:flex; animation:info-in .2s ease-out both; }
  #info nav #backMap { width:36px; min-width:36px; height:32px; padding:0; margin-left:auto; font-size:0; text-decoration:none; background:url(pixel/icons/close.png) center / 24px 24px no-repeat; image-rendering:pixelated; transform:none; }
  #info nav #backMap:hover { filter:brightness(1.15); }
}
@keyframes info-in { from { opacity:0; transform:translateX(24px); } }
@media (prefers-reduced-motion:reduce) { main.info-open aside#info { animation:none; } }
/* 全圖時兩側面板暫收（main.overview-calm 由 calmPanels 加上；記錄頁籤照常可點） */
main.overview-calm #logDock { display:none; }

/* 手牌卡面：上半類別色＋插圖、下半卡名＋一行效果；可出＝金框亮起，等待中＝褪色 */
#handDialog { width:min(800px, 94vw); }
#handNotice { margin:6px 0 8px; font-size:14px; color:var(--ink-soft); }
.hand-list { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
.hand-list button.hand-card { display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:0; padding:0; overflow:visible; text-align:center; background:#fffaf0; border:3px solid var(--ink); border-radius:10px; box-shadow:0 4px 0 var(--ink); transition:transform .12s, box-shadow .12s, opacity .12s; }
.hand-list button.hand-card::before { content:none; }
.hand-list .hand-card[data-kind=BUFF] { --kc:#3f9a5a; --kc2:#7cc48a; } .hand-list .hand-card[data-kind=PRANK] { --kc:#e0842a; --kc2:#f4b25e; } .hand-list .hand-card[data-kind=DEBUFF] { --kc:#7a4fb0; --kc2:#a885d6; }
.card-top { position:relative; display:grid; place-items:center; height:88px; border-radius:7px 7px 0 0; border-bottom:3px solid var(--ink); background:radial-gradient(circle at 50% 60%, var(--kc2) 0 34%, transparent 35%), repeating-linear-gradient(45deg, var(--kc) 0 8px, color-mix(in srgb, var(--kc) 85%, #000) 8px 16px); }
.card-art { width:64px; height:64px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 3px 0 #2a1a1066); }
.card-kind { position:absolute; left:6px; bottom:5px; font-size:12px; font-weight:900; line-height:1; color:#fff; text-shadow:var(--on-pc); }
.hand-list .hand-card .card-kind { left:4px; bottom:4px; padding:2px 5px; font-size:12px; color:#fff; background:color-mix(in srgb, var(--kc) 55%, #1e140c); border:2px solid var(--ink); border-radius:5px; text-shadow:none; } /* 1006 QA：斜紋上 11px 白字讀不到，改實心小章 */
.card-state { position:absolute; right:-6px; top:-9px; padding:2px 7px; font-size:12px; font-style:normal; font-weight:900; line-height:1.2; color:var(--ink); background:#fffaf0; border:2px solid var(--ink); border-radius:99px; box-shadow:0 2px 0 var(--ink); white-space:nowrap; }
.card-bottom { display:grid; align-content:start; gap:3px; padding:6px 6px 8px; }
.card-name { font-size:16px; font-weight:900; line-height:1.2; color:var(--ink); }
.card-line { font-size:13px; font-weight:700; line-height:1.3; color:var(--ink-2); }
.hand-list .hand-card[data-state=ready] { box-shadow:0 4px 0 var(--ink), 0 0 0 3px var(--gold); }
.hand-list .hand-card[data-state=ready] .card-state { color:#fff; background:var(--red); text-shadow:0 1px 0 var(--red-d); }
.hand-list .hand-card[data-state=wait] { opacity:.78; } .hand-list .hand-card[data-state=wait] .card-top { filter:saturate(.35) brightness(1.05); }
.hand-list .hand-card[data-state=reaction] .card-state, .hand-list .hand-card[data-state=land] .card-state { background:#e9f3ff; }
.hand-list .hand-card:hover:not(:disabled) { background:#fffaf0; transform:translateY(-3px); }
.hand-list .hand-card[aria-pressed=true] { background:#fff6d8; transform:translateY(-4px); box-shadow:0 6px 0 var(--ink), 0 0 0 4px var(--gold); opacity:1; }
.hand-list .hand-card[aria-pressed=true] .card-top { filter:none; }
.hand-list .hand-card .tip-badge { top:-10px; left:-10px; right:auto; }
#cardDetail { min-height:0; padding:8px 0 4px; font-size:15px; line-height:1.5; }
#cardDetail .flavor:empty { display:none; }
@media (prefers-reduced-motion:reduce) { .hand-list button.hand-card { transition:none; } }

/* 選路／反應選項：方向圖示＋地名＋一個數字 */
#choices .route-choice { flex-wrap:nowrap; }
#choices .route-choice b { flex:1 1 auto; min-width:4.2em; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:701px) and (min-height:501px) { .map-stage #decision { width:min(760px, calc(100% - var(--left-w, 0px) - var(--right-w, 0px) - 24px)); } }
#choices .route-num { flex:0 0 auto; margin-left:auto; padding:0 8px; font:900 15px/24px var(--num); font-style:normal; color:var(--ink); background:var(--cream-2); border:2px solid var(--ink); border-radius:6px; }
#choices .route-num.stop { color:#fff; background:var(--teal); }
#choices .route-choice .stat { margin-left:auto; }
#choices .primary .route-num { color:var(--ink); background:#fffaf0; }
#choices .route-choice .back-tag { flex:0 0 auto; padding:0 5px; font:700 12px/20px var(--font-display); color:#7a4a12; background:#ffe9b8; border:1px solid #b07a2a; border-radius:5px; white-space:nowrap; }

/* 手機直式：底列一行（頭像｜身家／現金｜手牌｜技能｜擲骰），提示與發薪倒數浮在地圖底緣一行 */
@media (max-width:700px) {
  #app { grid-template-columns:minmax(0, 1fr); }
  #app > footer { position:relative; min-width:0; gap:5px; padding:5px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); }
  #app > footer > *, #app > footer .actions > * { min-width:0; }
  #app > footer .actions .hand-label, #app > footer .actions .hand-played { display:none; }
  #app > footer .actions .hand-count { font:900 17px/1 var(--num); }
  #app > footer #actor .portrait { width:36px; height:36px; }
  #app > footer .wallet { grid-template-columns:auto; padding:2px 6px; gap:0; }
  #app > footer .wallet > .ico { display:none; }
  .wallet-worth { grid-auto-flow:column; gap:3px; align-items:baseline; padding:0; margin:0; border:0; white-space:nowrap; }
  #app > footer #season .stat-tag { display:none; }
  #app > footer #season { gap:4px; padding:2px 6px; }
  .wallet-worth small { font-size:12px; } .wallet-worth b { font-size:13px; }
  #app > footer .wallet strong { font-size:18px; }
  #app > footer .wallet #effects { position:absolute; left:6px; bottom:calc(100% + 6px); display:flex; flex-wrap:nowrap; gap:4px; max-width:46%; overflow:visible; }
  #app > footer .wallet #effects:empty { display:none; }
  #app > footer #season { position:absolute; left:6px; bottom:calc(100% + 6px); padding:2px 8px; background:#fff8e9; border:2px solid var(--ink); border-radius:8px; box-shadow:0 2px 0 #4a2e1f44; opacity:1; }
  #app:has(#effects:not(:empty)) footer #season { display:none; }
  #app > footer .actions { display:flex; flex:1 1 auto; width:auto; gap:5px; margin-left:0; }
  #app > footer .actions #skill, #app > footer .actions #hand { flex:0 1 auto; min-width:0; padding:2px 6px 2px 3px; font-size:13px; }
  #app > footer .actions #skill::before, #app > footer .actions #hand::before { width:22px; height:22px; }
  #app > footer .actions #roll.primary { flex:1 1 auto; min-width:0; min-height:54px; padding:2px 8px 2px 4px; font-size:19px; }
  #app > footer .actions #roll.primary::before { width:30px; height:30px; }
  #app > footer .actions #roll.primary:disabled { font-size:14px; }
  #app > footer #status { right:6px; bottom:calc(100% + 6px); max-width:calc(100% - 140px); min-height:30px; font-size:13px; padding:2px 10px 2px 3px; }
  #app > footer #status::after { right:44px; }
  #app:has(#decision:not([hidden])) footer #season, #app:has(#decision:not([hidden])) footer #effects { display:none; }
  .map-stage #decision { bottom:10px; }
  .hand-list { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .card-top { height:62px; } .card-art { width:48px; height:48px; }
  .card-name { font-size:14px; } .card-line { font-size:12px; }
  .card-bottom { padding:4px 4px 6px; }
}
/* 手機橫向：卡片一排、底列一行；決策面板標題與數字併成一行、避開左側記錄頁籤 */
@media (min-width:701px) and (max-height:500px) {
  .map-stage #decision { display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; left:calc(46px + env(safe-area-inset-left)); }
  .map-stage #decision .decision-heading { flex:0 1 auto; margin:0; }
  .map-stage #decision #decisionDetail { flex:1 1 auto; margin:0; }
  .map-stage #decision #choices { flex:1 1 100%; }
  .map-stage #decision #choices:has(.route-choice) { flex-wrap:nowrap; }
  #choices .route-choice { flex:1 1 0; min-width:0; }
  #choices .route-choice b { min-width:2.5em; }
  .map-stage #decision:has(.route-choice) { right:calc(10px + env(safe-area-inset-right)); width:auto; max-width:none; } /* 1006 QA：三條路一列時地名被截成「桃園…」→ 面板放滿寬 */
  #choices .route-choice { padding:4px 6px; gap:4px; }
  #app header .score.active { transform:translateY(-1px) scale(1.05); }
}
@media (min-width:701px) and (max-width:1100px) {
  #app > footer .actions #roll.primary { min-width:150px; font-size:21px; }
  #app > footer #season .stat-tag { display:none; }
  #app > footer #actor .portrait { width:40px; height:40px; }
}
@media (min-width:701px) and (max-height:500px) {
  #app > footer #actor { display:block; } #app > footer #actor .portrait { width:30px; height:30px; }
  #app > footer { padding-top:3px; padding-bottom:calc(3px + env(safe-area-inset-bottom)); }
  #app > footer .actions #roll.primary { min-width:140px; min-height:44px; font-size:19px; }
  #app > footer .actions #roll.primary::before { width:28px; height:28px; }
  #app > footer #status { font-size:13px; min-height:28px; bottom:calc(100% + 5px); }
  .wallet-worth b { font-size:14px; }
  #handDialog { width:min(820px, 96vw); }
  .hand-list { grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px; }
  .card-top { height:56px; } .card-art { width:44px; height:44px; }
  .card-name { font-size:14px; } .card-line { font-size:12px; }
  .card-bottom { padding:3px 4px 5px; }
}

/* ═════════ 1006：可愛 to C 化——入口頁、計分卡名次／店類、開局 VS 卡、局終冠軍頁、查看棋盤浮動列 ═════════ */
/* 入口頁：玩法四項是說明不是按鈕（無框、圖示＋字）；可按的東西一律立體（厚底陰影、按下會沉） */
.intro-pitch { gap:4px 12px; }
.intro-pitch li, .intro-pitch li:hover { padding:0; background:none; border:0; border-radius:0; box-shadow:none; cursor:default; color:var(--ink-2); font-weight:700; user-select:none; }
@media (max-width:700px) { .intro-pitch { flex-wrap:nowrap; gap:6px; } .intro-pitch li { gap:2px; white-space:nowrap; } .intro-pitch img { width:24px; height:24px; } }
.intro .ticket-opt { transition:transform .1s, filter .1s; filter:drop-shadow(0 4px 0 var(--ink)); }
.intro .ticket-opt:hover { transform:translateY(-2px); filter:drop-shadow(0 6px 0 var(--ink)); }
.intro .ticket-opt:active { transform:translateY(3px); filter:drop-shadow(0 1px 0 var(--ink)); }
.intro .ticket-opt select { text-overflow:clip; border-bottom:0; padding-right:0; }
.intro .legacy-link { display:inline-flex; align-items:center; min-height:34px; padding:2px 12px; font-size:13px; font-weight:900; color:var(--ink); text-decoration:none; background:#fffaf0; border:2px solid var(--ink); border-radius:8px; box-shadow:0 3px 0 var(--ink); }
.intro .legacy-link:hover { background:#fff; transform:translateY(-1px); } .intro .legacy-link:active { transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
.intro .wood-btn:active, .intro #introHelp:active { transform:translateY(3px); filter:drop-shadow(0 1px 0 #4a2e1f66); }
.release-foot { align-self:flex-end; font-size:12px; color:var(--ink-soft); opacity:.7; }
.release-foot:empty { display:none; }
@media (max-width:700px) {
  .intro .setup { gap:6px; }
  .intro .ticket-opt select { font-size:13px; letter-spacing:-.02em; }
  .intro .legacy-link { min-height:40px; font-size:12px; padding:2px 8px; }
}

/* 計分卡：名次徽章（像素皇冠 15×8 原生格 ×2）＋三類店小圖示各帶數字 */
#app header .score-face .rank.crown { left:-9px; top:-7px; width:30px; height:16px; padding:0; background:none; border:0; border-radius:0; }
#app header .score-face .rank.crown img { display:block; width:30px; height:16px; image-rendering:pixelated; filter:drop-shadow(0 1px 0 #3a241888); }
#app header .score[data-rank="1"] .portrait { box-shadow:0 0 0 2px #ffd23a; }
.score-shops .score-cat, .res-cats .score-cat { display:inline-flex; align-items:center; gap:1px; }
.score-shops .score-cat + .score-cat { margin-left:3px; }
.score-shops .cat-ico, .res-cats .cat-ico { width:16px; height:16px; image-rendering:pixelated; }
.score-shops.none { opacity:.6; }
.score-shops .score-cat b { font:900 14px/1 var(--num); }
.score.active .score-shops .score-cat b { color:#fff; text-shadow:var(--on-pc); }
#infoBody .shop-entry .cat-ico { width:16px; height:16px; margin-right:3px; vertical-align:-2px; }
@media (max-width:700px), (max-height:500px) {
  #app header .score-face .rank.crown { left:-8px; top:-7px; }
  #app header .score .score-shops { gap:0; }
  .score-shops .score-cat + .score-cat { margin-left:1px; }
  .score-shops .cat-ico { width:14px; height:14px; }
  .score-shops .score-cat b { font-size:12px; }
}

/* 開局卡：四人頭像並排登場（VS） */
.event-card.vs-card { max-width:760px; padding:18px 16px 20px; }
.event-card.vs-card .event-people { display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:nowrap; margin:4px 0 10px; }
.vs-fighter { display:grid; justify-items:center; gap:2px; min-width:0; animation:vsIn .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay:calc(var(--i) * .16s); }
.vs-fighter .vs-face { width:clamp(64px, 11vw, 128px); aspect-ratio:1; object-fit:cover; border:3px solid var(--ink); border-radius:12px; background:color-mix(in srgb, var(--pc) 35%, #fff8ec); box-shadow:0 4px 0 var(--ink), inset 0 0 0 3px #fff8; image-rendering:pixelated; }
.vs-fighter b { font-size:17px; font-weight:900; color:var(--ink); }
.vs-fighter small { font-size:12px; padding:0 6px; color:#fff; background:var(--pc); border-radius:4px; text-shadow:var(--on-pc); }
.vs-mark { font:900 22px/1 var(--font-display, sans-serif); color:#fff3d6; -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; transform:rotate(-8deg); padding:0 2px; animation:vsIn .4s ease-out both; animation-delay:.5s; }
.event-card.vs-card h2 { font-size:clamp(20px, 2.4vw, 28px); }
.event-card.vs-card #eventBody:empty { display:none; }
@keyframes vsIn { from { opacity:0; transform:translateY(18px) scale(.7); } }
@media (max-width:700px) { .vs-fighter .vs-face { width:64px; border-width:2px; } .vs-fighter b { font-size:13px; } .vs-mark { font-size:15px; -webkit-text-stroke:4px var(--ink); padding:0; } .event-card.vs-card { padding:12px 8px 14px; } }
@media (prefers-reduced-motion:reduce) { .vs-fighter, .vs-mark { animation:none; } }

/* 局終（1007 晚重排，使用者：冠軍卡像 KPI 表）。設計原則：
   層級＝一個主角（冠軍大頭像）＋一個主數字（身家），其餘降級；分組＝名字與身家是同一組標題、台詞是頭像說的話；
   對齊＝整張卡只用一條左對齊軸（頭像右緣起算），不混置中；減法＝店數／錢包／統計收進「詳細」；說故事＝台詞做成從頭像冒出的對話泡泡。
   二～四名列用同一套軸：頭像｜名字＋身家｜一句台詞泡泡。 */
#resultDialog { width:min(820px, 96vw); text-align:left; }
#resultDialog > h2 { margin:0 0 8px; font-size:26px; text-align:center; }
#resultDialog > h2::before { display:none; }
#resultDialog .res-people { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:12px; align-items:stretch; text-align:left; }
.res-champ { --face:clamp(120px, 15vw, 168px); position:relative; display:grid; grid-template-columns:var(--face) minmax(0, 1fr); grid-template-rows:auto auto; align-items:center; align-content:center; gap:12px 14px; padding:14px 14px 16px; text-align:left;
  background:radial-gradient(circle at 22% 30%, #fff6c8, #ffe9a8 55%, #f7d77a); border:3px solid var(--ink); border-radius:12px; box-shadow:0 4px 0 var(--ink), inset 0 0 0 3px #fff8; overflow:hidden; }
.res-champ::before { content:""; position:absolute; left:calc(14px + var(--face) / 2); top:calc(14px + var(--face) / 2); width:900px; height:900px; margin:-450px 0 0 -450px; background:repeating-conic-gradient(from 0deg, #fff5 0 10deg, #0000 10deg 20deg); animation:resSpin 24s linear infinite; pointer-events:none; }
.res-champ-art { position:relative; display:grid; justify-items:center; width:var(--face); }
.res-crown { position:relative; z-index:1; width:60px; height:32px; margin-bottom:-12px; image-rendering:pixelated; filter:drop-shadow(0 2px 0 #3a241866); animation:crownBob 1.8s ease-in-out infinite; }
.res-champ .res-face { width:var(--face); aspect-ratio:1; object-fit:cover; border:4px solid var(--ink); border-radius:16px; background:color-mix(in srgb, var(--pc) 35%, #fff8ec); box-shadow:0 5px 0 var(--ink); image-rendering:pixelated; }
/* 冠軍緞帶：斜貼在頭像左上角（像貼紙），不再自己佔一行 */
.res-ribbon { position:absolute; z-index:2; left:-12px; top:28px; padding:3px 12px 3px 10px; font:400 15px/1.1 var(--font-display); letter-spacing:.08em; color:#fff; white-space:nowrap; background:var(--red); border:2px solid var(--ink); border-radius:4px; box-shadow:0 3px 0 var(--red-d), 0 3px 0 2px var(--ink); transform:rotate(-12deg); transform-origin:left center; text-shadow:0 2px 0 var(--red-d); }
/* 標題組：名字（大）＋身家（金色大數字）緊貼、同一左對齊軸 */
.res-champ-text { position:relative; display:grid; justify-items:start; align-content:center; gap:4px; min-width:0; }
.res-name { max-width:100%; font:900 clamp(26px, 3vw, 34px)/1.1 var(--font-display); color:var(--ink); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#results .res-name.long { font-size:clamp(20px, 2.2vw, 27px); letter-spacing:0; } /* 4 字以上（魔鏡皇后、線上暱稱）不換行 */
.res-money { display:grid; justify-items:start; gap:0; }
.res-money small { font:400 13px/1 var(--font-display); color:var(--ink-2); letter-spacing:.1em; }
#results .res-money strong { font:400 clamp(34px, 4.2vw, 46px)/1 var(--font-num); color:#ffd23a; -webkit-text-stroke:6px var(--ink); paint-order:stroke fill; text-shadow:0 4px 0 var(--ink); letter-spacing:.01em; white-space:nowrap; }
/* 台詞＝漫畫對話泡泡：跨兩欄、尾巴往上指向頭像嘴邊 */
.res-quip { position:relative; grid-column:1 / -1; margin:4px 0 0; padding:9px 14px; font:400 16px/1.45 var(--font-display); color:var(--ink); text-align:left; background:#fff; border:3px solid var(--ink); border-radius:16px; box-shadow:0 3px 0 #4a2e1f55; }
.res-quip::before, .res-quip::after { content:""; position:absolute; left:calc(var(--face) * .55); bottom:100%; border:solid transparent; }
.res-quip::before { margin-left:-2px; border-width:0 12px 16px 4px; border-bottom-color:var(--ink); }
.res-quip::after { margin-left:1px; margin-bottom:-4px; border-width:0 8px 12px 3px; border-bottom-color:#fff; }
.res-runners { list-style:none; margin:0; padding:0; display:grid; gap:6px; align-content:start; }
.res-side { display:grid; align-content:start; gap:8px; min-width:0; }
#resultDialog .res-side .pp-summary { margin:0; }
#resultDialog .res-side .pp-summary-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
#resultDialog .res-side .pp-summary-row strong { white-space:nowrap; font-size:18px; }
#resultDialog .res-side .pp-summary-text { min-width:0; }
#resultDialog .res-side .pp-title { display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 二～四名：頭像｜名字＋身家（上下同一組）｜一句台詞泡泡（尾巴指向頭像） */
.res-row { display:grid; grid-template-columns:auto 6.2em minmax(0, 1fr); align-items:center; gap:10px; padding:6px 10px 6px 6px; background:#fffaf0; border:2px solid var(--ink); border-left:6px solid var(--pc); border-radius:8px; box-shadow:0 3px 0 #4a2e1f44; }
.res-row.r1 { background:#fff1c9; }
.res-mini { position:relative; } .res-mini .portrait { width:44px; height:44px; }
.res-mini .rank { position:absolute; left:-7px; top:-9px; display:grid; place-items:center; width:20px; height:20px; font:900 12px/1 var(--num); font-style:normal; background:#fbf2dc; border:2px solid var(--ink); border-radius:50%; }
.res-mini .rank.crown { left:-8px; top:-12px; width:30px; height:16px; background:none; border:0; border-radius:0; } .res-mini .rank.crown img { width:30px; height:16px; display:block; }
.res-row-text { min-width:0; display:grid; justify-items:start; gap:2px; } .res-row-text b { font:900 16px/1.1 var(--font-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#results .res-row-text strong { font:400 21px/1 var(--font-num); color:var(--red-d); white-space:nowrap; }
.res-row .result-quip { min-width:0; margin-left:2px; padding:4px 9px; font:400 13px/1.35 var(--font-display); color:var(--ink-2); white-space:normal; background:#fff; border:2px solid var(--ink-soft, #8a7356); border-radius:2px 12px 12px 12px; /* 左上尖角＝話從左邊頭像說出來（line-clamp 要 overflow:hidden，尾巴會被裁，改用尖角） */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#resultDialog .result-more { margin:8px 0 0; text-align:left; font-size:13px; }
#resultDialog .result-more summary { cursor:pointer; width:max-content; margin:0 auto; padding:2px 12px; font-weight:900; color:var(--ink-2); border:2px dashed var(--ink-soft); border-radius:99px; }
.res-detail { display:grid; gap:2px; margin:6px 0 2px; }
.res-detail-row { display:grid; grid-template-columns:6em 1fr 1fr 7em; gap:8px; align-items:center; padding:2px 8px; border-left:4px solid var(--pc); background:#fff8; }
.res-detail-row > :last-child { justify-self:end; } /* 1006 QA：每列各自 grid，最後一欄 auto 時有店的列會把「店面」欄擠歪 */
.res-stats-line { margin:4px 0 0; color:var(--ink-soft); }
#resultDialog .result-actions { display:flex; justify-content:center; gap:12px; margin-top:10px; }
#resultDialog .result-actions button { min-height:44px; padding:6px 22px; font-size:17px; }
@keyframes resSpin { to { transform:rotate(360deg); } }
@keyframes crownBob { 50% { transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { .res-champ::before, .res-crown { animation:none; } }
@media (max-width:700px), (max-height:760px) {
  #resultDialog { width:min(820px, 96vw); padding:8px 10px; }
  #resultDialog > h2 { font-size:20px; margin-bottom:6px; }
  #resultDialog .res-people { grid-template-columns:1fr; gap:6px; }
  .res-champ { --face:96px; gap:8px 12px; padding:8px 10px 10px; }
  .res-champ .res-face { border-width:3px; border-radius:12px; box-shadow:0 3px 0 var(--ink); }
  .res-crown { width:45px; height:24px; margin-bottom:-9px; }
  .res-ribbon { left:-8px; top:20px; font-size:12px; padding:2px 8px; }
  .res-name { font-size:24px; } #results .res-money strong { font-size:32px; -webkit-text-stroke:5px var(--ink); text-shadow:0 3px 0 var(--ink); }
  .res-quip { margin-top:2px; font-size:14px; padding:6px 10px; border-width:2px; border-radius:12px; }
  .res-quip::before { border-width:0 10px 12px 3px; } .res-quip::after { margin-left:0; margin-bottom:-3px; border-width:0 7px 9px 2px; }
  .res-row { grid-template-columns:auto 5.4em minmax(0, 1fr); padding:3px 8px 3px 5px; gap:8px; }
  .res-mini .portrait { width:34px; height:34px; }
  .res-row-text b { font-size:14px; } #results .res-row-text strong { font-size:18px; } .res-row .result-quip { font-size:12px; line-height:1.3; padding:3px 7px; }
  #results .pp-summary { margin:6px 0 0; }
  #resultDialog .result-actions { margin-top:6px; }
  #resultDialog .result-actions button { min-height:42px; font-size:15px; padding:4px 16px; }
}
@media (max-width:700px) {
  .res-detail-row { grid-template-columns:4.5em 1fr 1fr 4.6em; gap:4px; white-space:nowrap; }
  #resultDialog:has(.result-more[open]) .res-side .pp-summary { display:none; } /* 1006 QA：展開詳細時按鈕被擠出畫面 */
}
@media (min-width:701px) and (max-height:500px) {
  #resultDialog .res-people { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  #results { display:block; }
  .res-champ { --face:84px; align-content:start; gap:6px 10px; padding:6px 10px; }
  .res-crown { width:36px; height:19px; margin-bottom:-7px; }
  .res-ribbon { left:-6px; top:14px; font-size:12px; padding:1px 6px; }
  .res-name { font-size:20px; } .res-money small { display:none; } #results .res-money strong { font-size:26px; -webkit-text-stroke:4px var(--ink); text-shadow:0 2px 0 var(--ink); }
  .res-quip { font-size:13px; line-height:1.35; padding:4px 8px; }
  .res-row { grid-template-columns:auto minmax(0, 1fr); padding:2px 8px 2px 5px; } .res-mini .portrait { width:30px; height:30px; } .res-runners { gap:5px; }
  .res-row .result-quip { display:none; }
  .res-row-text { grid-template-columns:minmax(0, 1fr) auto; align-items:center; width:100%; } #results .res-row-text strong { justify-self:end; }
  /* 1006 QA：手機橫向「再出發一趟／查看棋盤」被擠出畫面 → 放進冠軍卡下半的空白；展開詳細時收起護照摘要 */
  #resultDialog .result-actions { position:absolute; left:22px; width:calc(50% - 36px); bottom:52px; margin:0; z-index:2; }
  #resultDialog .result-more summary { margin:0 0 0 auto; }
  #resultDialog:has(.result-more[open]) .res-side { display:none; } /* 詳細表已按名次列出四人 */
  #resultDialog:has(.result-more[open]) .res-people { grid-template-columns:1fr; }
  #resultDialog:has(.result-more[open]) .result-actions { position:static; width:auto; margin-top:4px; }
  #resultDialog:has(.result-more[open]) .res-champ { --face:48px; } #resultDialog:has(.result-more[open]) .res-quip { display:none; }
  #resultDialog .result-more[open] .res-detail { margin:2px 0 0; } #resultDialog .result-more[open] .res-stats-line { margin:0; }
}

/* 查看棋盤後：地圖上方浮動列（回到結果／再出發一趟） */
.finish-bar { position:absolute; left:50%; top:calc(var(--header-h, 0px) + 10px); transform:translateX(-50%); z-index:26; display:flex; align-items:center; gap:10px; padding:6px 10px 6px 14px; background:#fff8e9; border:3px solid var(--ink); border-radius:12px; box-shadow:0 5px 0 var(--ink), 0 10px 24px #0004; white-space:nowrap; }
.finish-bar > b { font-size:17px; font-weight:900; }
.finish-bar button { display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:4px 14px 4px 8px; font-size:16px; font-weight:900; color:var(--ink); background:#fffaf0; border:2px solid var(--ink); border-radius:8px; box-shadow:0 3px 0 var(--ink); }
.finish-bar button.primary { color:#fff; background:var(--red); box-shadow:0 3px 0 var(--red-d), 0 3px 0 2px var(--ink); text-shadow:0 2px 0 var(--red-d); }
.finish-bar button:active { transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
.finish-bar .ico { width:24px; height:24px; }
@media (max-width:700px) { .finish-bar { top:calc(var(--header-h, 0px) + 112px); gap:6px; padding:5px 6px 5px 8px; } .finish-bar > b { display:none; } .finish-bar button { font-size:14px; padding:4px 10px 4px 6px; } }

/* ═════════ 1007：一局時間感／距離格數／目標提示／行動者「正在」／集章成就（cityMain.js、cityPassport.js） ═════════ */
/* 剩幾輪＋預估時間（#season 的第一個 stat），最後 3 輪轉紅；「最後衝刺」橫幅 */
#season .stat .eta { margin-left:3px; font-size:12px; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
#season.final .stat.final { padding:0 6px 0 2px; color:#fff; background:var(--red); border:2px solid var(--ink); border-radius:8px; animation:final-pulse 1.2s ease-in-out infinite; }
#season.final .stat.final b, #season.final .stat.final small { color:#fff; text-shadow:0 1px 0 var(--red-d); }
@keyframes final-pulse { 50% { box-shadow:0 0 0 3px #f0b43c88; } }
.final-sprint { position:absolute; left:50%; top:calc(var(--header-h, 52px) + 70px); z-index:27; display:flex; align-items:center; gap:10px; padding:8px 22px 8px 12px; transform:translateX(-50%); pointer-events:none;
  background:repeating-linear-gradient(-45deg, var(--red) 0 14px, #b8352a 14px 28px); border:3px solid var(--ink); border-radius:12px; box-shadow:0 5px 0 var(--ink), 0 12px 28px #0005; animation:sprint-in 2.8s ease-out both; white-space:nowrap; }
.final-sprint img { width:40px; height:40px; image-rendering:pixelated; animation:sprint-shake .25s steps(2) 6; }
.final-sprint b { font:900 30px/1 var(--font-display); color:#fff; text-shadow:0 3px 0 var(--red-d), 0 0 2px var(--ink); letter-spacing:.04em; }
.final-sprint small { font:900 16px/1 var(--font-display); color:#fff4c8; text-shadow:0 2px 0 var(--red-d); }
@keyframes sprint-in { 0% { opacity:0; transform:translateX(-50%) scale(.4) rotate(-6deg); } 12% { opacity:1; transform:translateX(-50%) scale(1.12) rotate(2deg); } 20% { transform:translateX(-50%) scale(1) rotate(0); } 85% { opacity:1; transform:translateX(-50%) scale(1); } 100% { opacity:0; transform:translateX(-50%) translateY(-16px) scale(.96); } }
@keyframes sprint-shake { 50% { transform:rotate(-10deg); } }
@media (max-width:700px) { .final-sprint { top:calc(var(--header-h, 0px) + 120px); padding:6px 14px 6px 8px; } .final-sprint b { font-size:24px; } .final-sprint img { width:32px; height:32px; } }
@media (min-width:701px) and (max-height:500px) { .final-sprint { top:56px; } .final-sprint b { font-size:22px; } }
/* 距離格數：爆紅車票「離你 N 格」、地點頁小籤、選路「★N格」 */
#destination .dest-dist { flex:0 0 auto; padding:0 6px; font:900 13px/20px var(--font-num); font-style:normal; color:#fff; background:var(--red); border:2px solid var(--ink); border-radius:6px; white-space:nowrap; }
#destination .dest-dist i { font-style:normal; font-size:12px; margin-right:1px; }
#infoBody .place-sub .dist-chip { padding:1px 7px; font-size:13px; font-weight:900; color:#fff; background:var(--teal); border:2px solid var(--ink); border-radius:5px; white-space:nowrap; }
#choices .route-choice .spot-dist { flex:0 0 auto; display:inline-flex; align-items:center; gap:1px; padding:0 4px 0 1px; font:900 12px/20px var(--font-num); color:var(--red-d); background:#fff3c8; border:1px solid #c98a12; border-radius:5px; white-space:nowrap; }
#choices .route-choice .spot-dist .ico { width:16px; height:16px; }
@media (max-width:700px) { #destination .dest-dist i { display:none; } #app > footer #status { max-width:calc(100% - 196px); } #app > footer #season .stat .eta { margin-left:1px; } }
@media (min-width:701px) and (max-height:500px) { #destination .dest-dist i { display:none; } #choices .route-choice .spot-dist:not(.near):not(.land) { display:none; } }
/* 1014：選路「最近爆紅」／「可停爆紅」——金框＋實心章，其他路的步數維持淡色小章 */
#choices .route-choice .spot-dist.near, #choices .route-choice .spot-dist.land { color:#fff; background:var(--red-d, #a8321f); border-color:var(--ink); }
#choices .route-choice.spot-best { box-shadow:0 0 0 3px #f2c230, 0 3px 0 var(--ink); }
/* 行動者「正在…」小章：計分卡右下角，不搶畫面 */
#app header .score { position:relative; }
.score-doing { position:absolute; right:-4px; bottom:-12px; z-index:3; display:inline-flex; align-items:center; gap:2px; padding:0 6px 0 2px; font:900 12px/18px var(--font-display); color:var(--ink); background:#fffaf0; border:2px solid var(--ink); border-radius:99px; box-shadow:0 2px 0 #4a2e1f55; white-space:nowrap; pointer-events:none; animation:doing-in .18s ease-out; }
.score-doing img { width:16px; height:16px; image-rendering:pixelated; }
.score-doing b { font-weight:900; color:var(--ink); text-shadow:none; }
#app header .score.active .score-doing b { color:var(--ink); text-shadow:none; }
.score-doing .dots { width:12px; height:4px; margin-left:1px; background:radial-gradient(circle, var(--ink) 1.5px, transparent 2px) 0 50% / 4px 4px repeat-x; animation:doing-dots 1s steps(4) infinite; }
@keyframes doing-in { from { transform:scale(.6); opacity:0; } }
@keyframes doing-dots { 0% { width:0; } 100% { width:12px; } }
@media (prefers-reduced-motion:reduce) { .score-doing, .score-doing .dots, #season.final .stat.final, .final-sprint, .final-sprint img { animation:none; } }
@media (max-width:700px) { .score-doing { right:-2px; bottom:-10px; padding:0 4px 0 1px; } .score-doing .dots { display:none; } }
/* 目標提示：輪到我準備時，擲骰鍵上方提示（#status）再上面一則「可以做的事」，點開看說明 */
.goal-tip { position:absolute; right:12px; bottom:calc(100% + 50px); z-index:3; display:grid; grid-template-columns:minmax(0, 1fr) auto; max-width:min(440px, calc(100vw - 24px)); background:#fff8e1; border:2px solid var(--ink); border-radius:12px; box-shadow:0 3px 0 var(--ink), 0 8px 18px #0003; animation:goal-in .3s ease-out; }
.goal-tip[hidden] { display:none; }
.goal-tip .goal-head { display:flex; align-items:center; gap:6px; min-width:0; min-height:40px; padding:3px 4px 3px 4px; background:none; border:0; border-radius:10px 0 0 10px; box-shadow:none; color:var(--ink); text-align:left; cursor:pointer; }
.goal-tip .goal-head:hover:not(:disabled) { background:#fff2c4; }
.goal-tip .goal-tag { flex:0 0 auto; padding:0 6px; font:900 12px/20px var(--font-display); color:#fff; background:var(--gold-d); border-radius:99px; }
.goal-tip .goal-head img { flex:0 0 auto; width:24px; height:24px; image-rendering:pixelated; }
.goal-tip .goal-head b { min-width:0; font-size:15px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.goal-tip .goal-x { width:36px; min-width:36px; min-height:40px; padding:0; font-size:20px; font-weight:900; color:var(--ink-soft); background:none; border:0; border-left:2px dashed #4a2e1f33; border-radius:0 10px 10px 0; box-shadow:none; }
.goal-tip .goal-more { grid-column:1 / -1; padding:2px 10px 8px; border-top:2px dashed #4a2e1f33; }
.goal-tip .goal-more p { margin:4px 0 6px; font-size:14px; line-height:1.45; color:var(--ink-2); white-space:normal; }
.goal-tip .goal-actions { display:flex; gap:8px; justify-content:flex-end; }
.goal-tip .goal-actions button { min-height:34px; padding:2px 12px; font-size:14px; font-weight:900; border:2px solid var(--ink); border-radius:8px; box-shadow:0 2px 0 var(--ink); background:#fffaf0; color:var(--ink); }
.goal-tip .goal-actions .goal-go { color:#fff; background:var(--teal); text-shadow:0 1px 0 var(--teal-d); }
.goal-tip .goal-actions .goal-off { font-weight:700; color:var(--ink-soft); }
@keyframes goal-in { from { opacity:0; transform:translateY(8px); } }
#app:has(#decision:not([hidden])) .goal-tip { display:none; }
@media (max-width:700px) { .goal-tip { right:6px; left:6px; bottom:calc(100% + 42px); max-width:none; } .goal-tip .goal-head b { font-size:14px; } }
@media (min-width:701px) and (max-height:500px) { .goal-tip { right:6px; bottom:calc(100% + 40px); max-width:min(420px, 60vw); } .goal-tip .goal-head { min-height:34px; } .goal-tip .goal-x { min-height:34px; } }
@media (prefers-reduced-motion:reduce) { .goal-tip { animation:none; } }
/* 集章成就（護照頁、玩家頁護照鈕、局終摘要、蓋章提示） */
.pp-medal-img { width:26px; height:34px; image-rendering:pixelated; }
.pp-medal-img.small { width:13px; height:17px; }
.pp-ach { display:grid; gap:2px; padding:6px 8px; background:#fffaf0; border:2px dashed #d7c49b; border-radius:10px; }
.pp-ach > b { font-size:14px; font-weight:900; color:var(--ink); }
.pp-medals { display:flex; gap:10px; }
.pp-medal { display:inline-flex; flex-direction:column; align-items:center; gap:0; filter:grayscale(1) opacity(.45); }
.pp-medal.on { filter:none; }
.pp-medal small { font-size:12px; font-weight:900; color:var(--ink-2); }
.pp-ach .pp-next { font-size:12px; font-weight:700; color:var(--red-d); }
.pp-ach .pp-reward { margin:0; font-size:12px; line-height:1.4; color:var(--ink-soft); }
.pp-bar.done { background:#fff6d8; }
.pp-bar .pp-medal-img.small { margin-left:-2px; }
.pp-bar.done { grid-template-columns:5.2em 1fr auto auto; }
.pp-row-medals { display:inline-flex; gap:2px; align-items:center; }
.pp-open .pp-row-medals { margin-left:auto; }
.pp-summary-row { position:relative; }
.pp-summary-row .pp-row-medals { position:absolute; right:8px; top:-9px; padding:0 2px; background:#fffaf0; border-radius:4px; pointer-events:none; }
.pp-toast.pp-toast-medal { background:#fff3c8; } .pp-toast .pp-medal-img { width:22px; height:29px; }
@media (max-width:700px), (min-width:701px) and (max-height:500px) {
  .pp-ach { grid-column:1 / -1; padding:4px 6px; grid-template-columns:auto auto 1fr; align-items:center; gap:2px 8px; }
  .pp-ach > b { grid-column:1; } .pp-ach .pp-medals { gap:6px; } .pp-ach .pp-next { justify-self:end; }
  .pp-ach .pp-reward { grid-column:1 / -1; }
  .pp-medal-img { width:18px; height:24px; } .pp-medal { flex-direction:row; gap:2px; }
}
#passportDialog .pp-bar.done { grid-template-columns:5.2em 1fr auto auto; }
@media (max-width:700px) { #passportDialog .pp-bar.done { grid-template-columns:auto 26px auto auto; } }
@media (min-width:701px) and (max-height:500px) { /* 橫向左頁很窄：成就只留一行獎章，獎勵說明收進提示泡泡 */
  #passportDialog .pp-ach { grid-template-columns:auto 1fr; padding:2px 6px; }
  #passportDialog .pp-ach > b { white-space:nowrap; font-size:13px; }
  #passportDialog .pp-ach .pp-next, #passportDialog .pp-ach .pp-reward { display:none; }
  #passportDialog .pp-ach .pp-medal small { display:none; }
}

/* ═════════ 1007 晚：演出大字＝粉圓貼紙字（與 cityTitle.drawTitle 同一套：深色粗外框＋白邊＋下方厚度）；排版減法 ═════════ */
/* 最後衝刺橫幅：白字＋深色粗外框＋奶油白邊（cityFonts.css .sticker-text 同規格） */
.final-sprint b { font:400 32px/1 var(--font-display); color:#fff; -webkit-text-stroke:6px var(--ink); paint-order:stroke fill; letter-spacing:.06em; text-shadow:none;
  filter:drop-shadow(2px 0 0 #fff8e6) drop-shadow(-2px 0 0 #fff8e6) drop-shadow(0 -2px 0 #fff8e6) drop-shadow(0 2px 0 #fff8e6) drop-shadow(0 3px 0 var(--red-d)); }
.final-sprint small { font:400 16px/1 var(--font-display); color:#fff4c8; -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; text-shadow:none; }
@media (max-width:700px) { .final-sprint b { font-size:24px; -webkit-text-stroke:5px var(--ink); } }
@media (min-width:701px) and (max-height:500px) { .final-sprint b { font-size:22px; -webkit-text-stroke:5px var(--ink); } }
/* 開局 VS 卡：一個大標題（貼紙字，放最上面）＋四人陣容；拿掉與標題重複的小章 */
.event-card.vs-card { display:flex; flex-direction:column; align-items:center; }
.event-card.vs-card #eventTitle { order:-1; margin:0 0 10px; font:400 clamp(24px, 2.8vw, 34px)/1.2 var(--font-display); color:#ffd23a; -webkit-text-stroke:6px var(--ink); paint-order:stroke fill; text-shadow:0 4px 0 var(--ink); letter-spacing:.04em; }
.event-card.vs-card #eventTag { display:none; }
.vs-mark { font:400 26px/1 var(--font-display); color:#fff; -webkit-text-stroke:6px var(--ink); paint-order:stroke fill; filter:drop-shadow(0 3px 0 var(--red-d)); }
.vs-fighter b { font:900 17px/1.2 var(--font-display); }
@media (max-width:700px) { .event-card.vs-card #eventTitle { font-size:20px; -webkit-text-stroke:5px var(--ink); text-shadow:0 3px 0 var(--ink); } .vs-mark { font-size:16px; -webkit-text-stroke:4px var(--ink); } .vs-fighter b { font-size:13px; } }
/* 1013：時間單位只用「輪」——#season 底下細進度條（已過輪數／總輪數）、技能鍵狀態小字（可用／N輪後／用完） */
#season { position:relative; }
#season .round-bar { position:absolute; left:4px; right:4px; bottom:-4px; height:4px; background:#e6d9bd; border:1px solid var(--ink); border-radius:3px; overflow:hidden; pointer-events:none; }
#season .round-bar::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--p, 0%); background:var(--teal-d, #2c8a78); }
#season.final .round-bar::after { background:var(--red); }
.actions #skill .skill-state { margin-left:3px; padding:0 4px; font:700 12px/1.5 var(--font-display); color:var(--ink-soft); background:#f1e7d2; border-radius:4px; white-space:nowrap; }
.actions #skill[data-charge=on] .skill-state { color:#fff; background:var(--teal-d, #2c8a78); }
@media (max-width:700px), (min-width:701px) and (max-height:500px) { .actions #skill { position:relative; overflow:visible; } .actions #skill .skill-state { position:absolute; left:-2px; top:-10px; margin:0; padding:0 3px; line-height:16px; border:1px solid var(--ink); pointer-events:none; } }
/* 1014：選路選項重排——箭頭｜地名＋一行小字｜★爆紅步數（單一色塊，取消鍵帽與多色底） */
#decision #choices .route-choice { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:2px 8px; padding:6px 10px; flex-wrap:nowrap; text-align:left; }
#decision #choices .route-choice > .dir-arrow { font:900 24px/1 var(--font-num); color:var(--teal); }
#decision #choices .route-choice .rc-main { display:grid; min-width:0; line-height:1.15; }
#decision #choices .route-choice .rc-main b { font:900 17px/1.2 var(--font-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
#decision #choices .route-choice .rc-main small { flex:none; padding:0; font:700 12px/1.3 var(--font-display); color:var(--ink-soft); white-space:nowrap; }
#decision #choices .route-choice .rc-sub.good { color:#2f7d4a; } #decision #choices .route-choice .rc-sub.bad { color:#b0392b; }
#decision #choices .route-choice .spot-dist { grid-column:3; grid-row:1; justify-self:end; display:inline-block; padding:1px 7px; font:900 13px/1.4 var(--font-num); color:#8a5a12; background:#fff3c8; border:2px solid #c98a12; border-radius:999px; }
#decision #choices .route-choice .spot-dist.near, #decision #choices .route-choice .spot-dist.land { color:#fff; background:#c0392b; border-color:var(--ink); }
#decision #choices .route-choice .back-tag { grid-column:2; }
@media (max-width:700px), (min-width:701px) and (max-height:500px) { #decision #choices .route-choice { padding:4px 6px; gap:0 5px; } #decision #choices .route-choice .rc-main b { font-size:14px; } #decision #choices .route-choice > .dir-arrow { font-size:19px; } #decision #choices .route-choice .spot-dist { font-size:12px; padding:0 5px; } #decision #choices .route-choice .spot-dist:not(.near):not(.land) { display:inline-block; } }
/* 1014：底列錢包＋輪數重排——兩格同款「小標在上、數字在下」，輪數卡＝大字剩幾輪＋一行小字＋進度條 */
#app > footer .wallet { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; grid-auto-flow:column; align-items:end; gap:0 12px; padding:4px 12px; }
#app > footer .wallet > .ico { display:none; }
#app > footer .wallet .wallet-worth { display:contents; }
#app > footer .wallet .wallet-worth small, #app > footer .wallet .wallet-cash-label { grid-row:1; font:800 12px/1.2 var(--font-display); color:var(--ink-soft); letter-spacing:.05em; }
#app > footer .wallet .wallet-worth b { grid-row:2; font:900 24px/1.05 var(--font-num); color:var(--ink); white-space:nowrap; }
#app > footer .wallet #cash { grid-row:2; font:900 18px/1.1 var(--font-num); color:var(--ink-2); white-space:nowrap; padding-left:12px; border-left:2px dashed #4a2e1f33; }
#app > footer .wallet .wallet-cash-label { padding-left:12px; }
#app > footer .wallet #effects { grid-row:1 / 3; }
#app > footer #season { display:inline-grid; grid-template-rows:auto auto; gap:0; padding:3px 10px 7px; line-height:1.15; opacity:1; }
#app > footer #season .sn-main { font:900 16px/1.15 var(--font-display); color:var(--ink); white-space:nowrap; }
#app > footer #season .sn-sub { font:700 12px/1.3 var(--font-display); color:var(--ink-soft); white-space:nowrap; }
#app > footer #season.final .sn-main { color:var(--red, #c0392b); }
#app > footer #season .round-bar { bottom:1px; left:10px; right:10px; height:3px; border:0; }
@media (max-width:700px) { #app > footer .wallet { gap:0 8px; padding:2px 8px; } #app > footer .wallet .wallet-worth b { font-size:18px; } #app > footer .wallet #cash { font-size:14px; padding-left:8px; } #app > footer .wallet .wallet-cash-label { padding-left:8px; } #app > footer #season .sn-main { font-size:13px; } }
@media (max-width:700px) { #app > footer .wallet { grid-template-rows:auto; align-items:baseline; gap:0 3px; padding:2px 6px; } #app > footer .wallet .wallet-worth small, #app > footer .wallet .wallet-cash-label, #app > footer .wallet .wallet-worth b, #app > footer .wallet #cash { grid-row:1; } #app > footer .wallet .wallet-worth small, #app > footer .wallet .wallet-cash-label { font-size:10px; letter-spacing:0; } #app > footer .wallet .wallet-cash-label { padding-left:5px; margin-left:2px; border-left:2px dashed #4a2e1f33; } #app > footer .wallet #cash { padding-left:0; border-left:0; font-size:13px; } #app > footer .wallet .wallet-worth b { font-size:16px; } }
@media (max-width:700px) { #app > footer .wallet .wallet-worth small, #app > footer .wallet .wallet-cash-label { display:inline; white-space:nowrap; } }
#cardTargets .cat-choice { display:grid; justify-items:start; gap:1px; text-align:left; } #cardTargets .cat-choice small { font:700 12px/1.3 var(--font-display); opacity:.85; } #cardTargets .cat-choice.best { box-shadow:0 0 0 3px #f2c230, 0 3px 0 var(--ink); }
/* 1014：發薪榜單 */
#eventCard.pay-card #eventTag, #eventCard.pay-card #eventPeople { display:none; }
#eventCard.pay-card #eventTitle { font:900 26px/1.2 var(--font-display); text-align:center; margin:2px 0 8px; }
#eventCard.pay-card #eventBody { display:grid; gap:6px; }
#eventCard .pay-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; padding:6px 12px 6px 6px; background:#fff; border:2px solid var(--ink); border-left:6px solid var(--pc); border-radius:10px; }
#eventCard .pay-face { width:44px; height:44px; border-radius:50%; overflow:hidden; border:2px solid var(--pc); background:#fff; }
#eventCard .pay-face img, #eventCard .pay-face canvas { width:100%; height:100%; object-fit:cover; }
#eventCard .pay-who { display:flex; align-items:center; gap:6px; min-width:0; }
#eventCard .pay-who b { font:900 17px/1.2 var(--font-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#eventCard .pay-halo { flex:none; padding:0 8px; font:900 12px/1.6 var(--font-display); font-style:normal; color:#7a4a12; background:#ffe27a; border:2px solid #c98a12; border-radius:999px; }
#eventCard .pay-money { display:grid; justify-items:end; line-height:1.1; }
#eventCard .pay-money strong { font:900 22px/1.1 var(--font-num); color:#b07a12; }
#eventCard .pay-money small { font:700 12px/1.3 var(--font-display); color:var(--ink-soft); }
@media (max-width:700px) { #app > footer .wallet { grid-template-columns:auto auto; grid-template-rows:auto auto; grid-auto-flow:row; gap:0 2px; align-items:baseline; } #app > footer .wallet .wallet-worth small { display:none; } #app > footer .wallet .wallet-worth b { grid-row:1; grid-column:1 / -1; font-size:16px; } #app > footer .wallet .wallet-cash-label { grid-row:2; grid-column:1; padding:0; margin:0; border:0; font-size:10px; } #app > footer .wallet #cash { grid-row:2; grid-column:2; font-size:11px; } }
/* 1015：手牌視窗——小章、空格位、說明條改粉圓粗字 */
#handDialog #handNotice { display:flex; gap:6px; margin:6px 0 10px; }
#handDialog .hn-chip { padding:2px 10px; font:800 13px/1.6 var(--font-display); color:var(--ink-2); background:#fff; border:2px solid var(--ink); border-radius:999px; box-shadow:0 2px 0 var(--ink); }
#handDialog .hn-chip.on { color:#fff; background:#3f9a5a; }
#handDialog .hand-list .hand-slot { display:block; aspect-ratio:0.72; border:3px dashed #4a2e1f33; border-radius:12px; background:repeating-linear-gradient(135deg, #0000 0 10px, #4a2e1f0a 10px 20px); }
#handDialog #cardDetail { margin-top:10px; padding:8px 12px; font:800 15px/1.45 var(--font-display); color:var(--ink); background:#fff3c8; border:2px solid var(--ink); border-radius:10px; box-shadow:0 2px 0 var(--ink); }
#handDialog #cardDetail:empty { display:none; }
#handDialog #cardDetail .flavor { margin:3px 0 0; font:600 13px/1.45 var(--font-display); color:var(--ink-soft); }
#handDialog #cardTargets > span { font:700 14px/1.5 var(--font-display); color:var(--ink-soft); }
.stream-btn { position:fixed; right:10px; bottom:84px; z-index:60; padding:4px 12px; font:800 13px/1.6 var(--font-display); background:#3b2417; color:#ffe9a8; border:2px solid #000; border-radius:999px; }
/* 1016：實況紀錄小窗、入口版本連結 */
.stream-panel { position:fixed; right:10px; top:64px; z-index:60; width:min(360px, 46vw); display:grid; grid-template-rows:auto 1fr; max-height:42vh; background:#fffaf0f2; border:2px solid var(--ink); border-radius:10px; box-shadow:0 3px 0 var(--ink); overflow:hidden; }
.stream-panel .sp-head { display:flex; gap:4px; align-items:center; padding:4px 6px; background:#3b2417; color:#ffe9a8; }
.stream-panel .sp-head b { margin-right:auto; font:900 14px var(--font-display); }
.stream-panel .sp-head button { min-height:26px; padding:0 8px; font:800 12px var(--font-display); border-radius:6px; }
.stream-panel .sp-feed { overflow:auto; padding:4px 8px; font:600 12px/1.5 var(--font-body); color:var(--ink); }
.stream-panel .sp-feed div { border-bottom:1px dashed #4a2e1f22; padding:1px 0; }
.stream-panel.min .sp-feed { display:none; }
.intro .version-links { margin:6px 0 0; font:800 13px/1.6 var(--font-display); color:var(--ink-soft); text-align:center; }
.intro .version-links a { color:#8a3b12; }
.stream-panel { top:110px; } .stream-panel .sp-head button { color:#3b2417; background:#fffaf0; border:1px solid #000; box-shadow:none; }
#choices .pay-tag { margin-left:6px; padding:0 7px; font:800 12px/1.6 var(--font-display); color:#7a4a12; background:#fff3c8; border:1px solid #c98a12; border-radius:999px; white-space:nowrap; } #choices .pay-tag.free { color:#fff; background:#2f9a5a; border-color:#1e6b3c; }
/* 1016 實況代打：要按的按鈕先亮起（像游標移上去）、再壓下 */
.auto-hover { outline:4px solid #f2c230 !important; outline-offset:2px; box-shadow:0 0 0 7px #f2c23066 !important; transition:transform .12s; z-index:5; position:relative; }
.auto-press { transform:translateY(3px) scale(.97) !important; filter:brightness(.92); }
/* 1016：手牌卡改像素風——直角＋階梯缺角、像素格紋（取代圓角與斜紋）、內緣亮暗兩階斜面、硬邊投影 */
.hand-list button.hand-card { --px:3px; border:0; border-radius:0; background:#3b2417; padding:var(--px); box-shadow:none !important;
  clip-path:polygon(0 calc(var(--px)*2), var(--px) calc(var(--px)*2), var(--px) var(--px), calc(var(--px)*2) var(--px), calc(var(--px)*2) 0, calc(100% - var(--px)*2) 0, calc(100% - var(--px)*2) var(--px), calc(100% - var(--px)) var(--px), calc(100% - var(--px)) calc(var(--px)*2), 100% calc(var(--px)*2), 100% calc(100% - var(--px)*2), calc(100% - var(--px)) calc(100% - var(--px)*2), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)*2) calc(100% - var(--px)), calc(100% - var(--px)*2) 100%, calc(var(--px)*2) 100%, calc(var(--px)*2) calc(100% - var(--px)), var(--px) calc(100% - var(--px)), var(--px) calc(100% - var(--px)*2), 0 calc(100% - var(--px)*2));
  filter:drop-shadow(0 4px 0 #3b2417); }
.hand-list .hand-card .card-top { border-radius:0; border-bottom:var(--px) solid #3b2417; box-shadow:inset var(--px) var(--px) 0 #ffffff55, inset calc(var(--px)*-1) calc(var(--px)*-1) 0 #00000033;
  background:radial-gradient(circle at 50% 58%, #ffffff40 0 30%, transparent 31%), conic-gradient(var(--kc) 25%, color-mix(in srgb, var(--kc) 82%, #000) 0 50%, var(--kc) 0 75%, color-mix(in srgb, var(--kc) 82%, #000) 0) 0 0 / 6px 6px; }
.hand-list .hand-card .card-bottom { background:#fff6e0; box-shadow:inset var(--px) var(--px) 0 #fff, inset calc(var(--px)*-1) calc(var(--px)*-1) 0 #e6d3a8; }
.hand-list .hand-card .card-name { font-family:var(--font-display); }
.hand-list .hand-card .card-kind, .hand-list .hand-card .card-state { border-radius:0; box-shadow:2px 2px 0 #3b2417; }
.hand-list .hand-card[data-state=ready] { filter:drop-shadow(0 4px 0 #3b2417) drop-shadow(0 0 0 #f2c230) drop-shadow(3px 0 0 #f2c230) drop-shadow(-3px 0 0 #f2c230) drop-shadow(0 -3px 0 #f2c230); }
.hand-list .hand-card[aria-pressed=true] { filter:drop-shadow(0 6px 0 #3b2417) drop-shadow(4px 0 0 #f2c230) drop-shadow(-4px 0 0 #f2c230) drop-shadow(0 -4px 0 #f2c230); }
#handDialog .hand-list .hand-slot { border-radius:0; }
#handDialog .hn-chip, #handDialog #cardDetail { border-radius:0; box-shadow:3px 3px 0 var(--ink); }
.auto-hover { outline-color:#3fb5ff !important; box-shadow:0 0 0 7px #3fb5ff55 !important; }
.auto-hover::after { content:""; position:absolute; left:50%; top:-14px; width:0; height:0; border:8px solid transparent; border-top:10px solid #3fb5ff; transform:translateX(-50%); animation:auto-bob .5s ease-in-out infinite alternate; pointer-events:none; }
@keyframes auto-bob { to { transform:translate(-50%, -4px); } }
.hand-list .hand-card .card-bottom { flex:1 1 auto; } .hand-list .hand-card .card-state { top:calc(var(--px) + 3px) !important; right:calc(var(--px) + 3px) !important; } .hand-list .hand-card[data-state=ready] { background:#f2c230; }
.hand-list button.hand-card, .hand-list .hand-card[data-state=ready] { background:#fff6e0; box-shadow:inset 0 0 0 var(--px) #3b2417 !important; } .hand-list .hand-card[data-state=ready] { box-shadow:inset 0 0 0 var(--px) #f2c230 !important; } .hand-list .hand-card .card-top { margin:0; }
/* 1016 晚：代打按鈕＝跟玩家滑鼠移上去、按下去一樣的樣子（取消藍框箭頭） */
.auto-hover { outline:none !important; box-shadow:revert-layer; }
.auto-hover::after { content:none !important; }
#choices button.auto-hover:not(.primary) { background:#fff; }
#choices button.auto-hover { transform:translateY(-1px); }
#choices .buy-choice.auto-hover { background:linear-gradient(#7fcabe 0 4px, #3a948e 4px); }
#choices .primary.auto-hover:not(.buy-choice), dialog .primary.auto-hover { background:#d94c38; }
.actions #roll.primary.auto-hover { background:linear-gradient(#ff9a7c 0 4px, #d94c38 4px); }
.hand-list .hand-card.auto-hover { transform:translateY(-3px); }
.auto-press { transform:translateY(2px) !important; filter:none; }
/* 1017：台詞框標出講話的人（頭像＋名字小籤、玩家色邊框） */
.fx-bubble.say.has-who { border-color:var(--pc); box-shadow:3px 3px 0 color-mix(in srgb, var(--pc) 70%, #3a2f22); padding-top:12px; margin-top:10px; }
.fx-bubble.say.has-who::before { border-right-color:var(--pc); }
.fx-bubble .fx-who { position:absolute; left:8px; top:-11px; display:inline-flex; align-items:center; gap:3px; padding:0 7px 0 2px; height:20px; font:800 12px/20px var(--font-display); color:#fff; background:var(--pc); border:2px solid #3a2f22; border-radius:999px; text-shadow:0 1px 0 #0006; white-space:nowrap; }
.fx-bubble .fx-who img { width:16px; height:16px; border-radius:50%; object-fit:cover; background:#fff; }
.fx-bubble .fx-who { top:-13px; height:24px; font-size:14px; line-height:24px; padding:0 9px 0 2px; } .fx-bubble .fx-who img { width:20px; height:20px; } .fx-bubble.say.has-who { padding-top:14px; }
/* 1020：計分卡離爆紅步數、財神標記、卡面使用時機、記錄回看、圖鑑、右欄收合頁籤 */
.score-face .spot-steps { position:absolute; right:-6px; bottom:-6px; padding:0 4px; font:900 11px/16px var(--font-num); font-style:normal; color:#7a4a12; background:#fff3c8; border:1px solid #c98a12; border-radius:6px; white-space:nowrap; pointer-events:none; }
.score-face .fortune-pip { position:absolute; left:-8px; top:-10px; width:22px; height:22px; image-rendering:pixelated; pointer-events:none; }
.hand-card .card-when { display:block; margin-top:2px; font:800 11px/1.3 var(--font-display); color:#8a6a3a; }
#logBody .log-entry.replay { cursor:pointer; } #logBody .log-entry.replay::after { content:"回看"; margin-left:6px; padding:0 5px; font:800 11px/1.5 var(--font-display); color:#fff; background:#2a8fc8; border-radius:4px; }
.ev-replay { display:grid; gap:6px; } .ev-replay img { width:100%; max-height:52vh; object-fit:contain; border:3px solid #3b2417; border-radius:6px; } .ev-replay .ev-eff { font:900 16px var(--font-display); } .ev-replay .ev-flv { margin:0; color:#6b5a48; font:700 14px var(--font-display); }
.book-grid.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; max-height:64vh; overflow:auto; }
.book-grid.cards .book-card { display:flex; flex-direction:column; pointer-events:none; }
.book-grid.temples { display:grid; gap:6px; } .book-temple { display:grid; grid-template-columns:36px 1fr auto; grid-template-rows:auto auto; gap:0 8px; align-items:center; padding:6px 8px; background:#fff; border:2px solid #3b2417; border-radius:8px; }
.book-temple img { grid-row:1 / 3; width:36px; height:36px; object-fit:contain; image-rendering:pixelated; } .book-temple b { font:900 15px var(--font-display); } .book-temple em { font:800 12px var(--font-display); font-style:normal; color:#7a4a12; } .book-temple span { grid-column:2 / 4; font:700 13px var(--font-display); color:#4a2e1f; }
#infoTab { position:absolute; right:0; top:50%; z-index:6; transform:translateY(-50%); min-height:64px; width:34px; padding:6px 4px; writing-mode:vertical-rl; font:900 14px var(--font-display); color:#3b2417; background:#fffaf0; border:2px solid #3b2417; border-right:0; border-radius:8px 0 0 8px; box-shadow:-2px 2px 0 #3b2417; }
main.info-open #infoTab { display:none; }
/* 1020 U2：平板尺寸不再互相擠壓——寬 701～1279 時頂列分兩行（標題／爆紅一行、計分卡一行）；寬 701～900 時底列收掉輪數卡、擲骰鍵縮窄 */
@media (min-width:701px) and (max-width:1279px) and (min-height:501px) {
  #app > header { display:flex; align-items:center; gap:6px; }
  #app > header .topline { display:contents; }
  #app > header .brand { display:none; }
  #app > header .spotlight { order:1; flex:none; }
  #app > header #scoreboard { order:2; position:static !important; transform:none !important; left:auto !important; right:auto !important; top:auto !important; flex:1 1 auto; min-width:0; justify-content:center; margin:0; }
  #app > header .toolbar { order:3; flex:none; margin-left:0; }
  #app > header #scoreboard .score { min-width:0; }
}@media (min-width:701px) and (max-width:900px) and (min-height:501px) {
  #app > footer #season { display:none; }
  #app > footer .actions #roll { min-width:0; width:auto; padding-left:14px; padding-right:14px; }
  #app > footer .actions { gap:6px; }
}
@media (min-width:701px) and (max-width:900px) and (min-height:501px) { #app > header { flex-wrap:wrap; row-gap:2px; } #app > header .toolbar { order:2; margin-left:auto; } #app > header #scoreboard { order:3; flex:1 1 100%; } }
/* 1020：玩家頁店鋪＝一顆「店鋪 N 間・看全部」，點開清單（不再翻頁） */
#infoBody .shop-open { display:grid; grid-template-columns:28px 1fr auto; grid-template-rows:auto auto; align-items:center; gap:0 8px; width:100%; padding:6px 10px; text-align:left; background:#fff; border:2px solid var(--ink); border-radius:10px; box-shadow:0 2px 0 var(--ink); }
#infoBody .shop-open .ico { grid-row:1 / 3; width:24px; height:24px; } #infoBody .shop-open b { font:900 15px var(--font-display); } #infoBody .shop-open small { grid-column:2; font:700 12px var(--font-display); color:var(--ink-soft); } #infoBody .shop-open em { grid-row:1 / 3; grid-column:3; font:800 13px var(--font-display); font-style:normal; color:#8a3b12; }
.shop-book { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:6px; max-height:66vh; overflow:auto; }
/* 1020：底列錢包是決策用的數字 → 錢包大字深色、身家降成小字淺色 */
#app > footer .wallet #cash { font-size:24px; color:var(--ink); }
#app > footer .wallet .wallet-worth b { font-size:16px; color:var(--ink-soft); font-weight:800; }
@media (max-width:700px) { #app > footer .wallet .wallet-worth b { font-size:12px; } #app > footer .wallet #cash { font-size:16px; } }
/* 1020：寬螢幕頂列也改成順序排列（計分卡不再絕對置中、壓到爆紅車票） */
@media (min-width:1280px) {
  #app > header { display:flex; align-items:center; gap:8px; }
  #app > header .topline { display:contents; }
  #app > header .brand { order:0; flex:none; }
  #app > header .spotlight { order:2; flex:none; }
  /* 頂列兩組各自靠邊：左＝品牌＋玩家（緊接品牌、靠左），右＝爆紅＋工具（靠右）；剩下的空白只留在兩組中間 */
  #app > header #scoreboard { order:1; position:static !important; transform:none !important; left:auto !important; right:auto !important; top:auto !important; flex:0 1 auto; min-width:0; justify-content:flex-start; margin:0 0 0 6px; }
  #app > header .spotlight { margin-left:auto; }
  #app > header .toolbar { order:3; flex:none; margin-left:0; }
}
@media (max-width:700px) { #app > footer .actions { gap:4px; } #app > footer .actions #roll { min-width:0; width:auto; flex:1 1 auto; padding-left:8px; padding-right:8px; } #app > footer .actions #skill { max-width:76px; overflow:hidden; } #app > footer .actions { min-width:0; flex:1 1 auto; } }
@media (max-width:700px) { #app > footer .actions #stocks { flex:none; width:40px; min-width:40px; padding:4px; } #app > footer .actions #stocks img { width:24px; height:24px; } #app > footer .actions #skill { max-width:68px; font-size:12px; } #app > footer .actions #hand { flex:none; } }
/* 1020 晚：角色技能圖鑑（兩欄、頭像加玩家色框） */ .book-grid.chars { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px; max-height:66vh; overflow:auto; } .book-char { border-left:6px solid var(--pc); } .book-char img { width:40px; height:40px; border-radius:50%; background:var(--pc); object-fit:cover; image-rendering:auto; }
/* 1021：離開遊戲確認 */ .leave-confirm p { margin:4px 0 12px; font:700 16px/1.5 var(--font-display); color:#3b2417; } .leave-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; } .leave-actions button { min-height:40px; padding:4px 16px; font:800 15px var(--font-display); } .leave-actions .leave-go { background:#c0392b; color:#fff; border-color:#3b2417; } #menu .menu-leave { color:#c0392b; }
/* 1021：欠錢規則 */ #app > footer .wallet { position:relative; } #app > footer .wallet .debt-chip { position:absolute; top:-12px; right:-8px; min-height:0; padding:1px 8px; font:900 12px/1.5 var(--font-display); color:#fff; background:#c0392b; border:2px solid #3b2417; border-radius:999px; box-shadow:0 2px 0 #3b2417; cursor:pointer; animation:debtPulse 1.6s ease-in-out infinite; } #app > footer .wallet .debt-chip[hidden] { display:none; } @keyframes debtPulse { 50% { transform:scale(1.08); } } @media (prefers-reduced-motion:reduce) { #app > footer .wallet .debt-chip { animation:none; } } .debt-book { display:grid; gap:6px; max-width:520px; } .debt-now { margin:0 0 4px; font:900 16px/1.5 var(--font-display); color:#c0392b; } .debt-row { display:grid; grid-template-columns:92px 1fr; gap:8px; align-items:baseline; padding:6px 10px; background:#fff; border:2px solid #3b2417; border-left:6px solid #8a7a62; border-radius:8px; } .debt-row b { font:900 14px var(--font-display); color:#3b2417; } .debt-row span { font:700 14px/1.5 var(--font-display); color:#4a2e1f; } .debt-row.warn { border-left-color:#e0842a; } .debt-row.bad { border-left-color:#c0392b; } @media (max-width:700px) { .debt-row { grid-template-columns:72px 1fr; padding:4px 8px; } .debt-row span { font-size:13px; } }
/* 1021：賣東西還債／湊錢、發薪發牌 */ #decision[data-kind="sell"] #choices { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:6px; } #decision[data-kind="sell"] .sell-choice { display:flex; align-items:center; gap:6px; justify-content:flex-start; } #decision[data-kind="sell"] .sell-choice b { margin-left:auto; color:#2f7a48; } #decision[data-kind="sell"] .sell-note { display:block; font:700 12px/1.4 var(--font-display); color:#6b5b48; } #choices .fund-choice { display:flex; align-items:center; gap:6px; } .pay-who .pay-card { margin-left:6px; padding:0 6px; font:800 12px/1.5 var(--font-display); font-style:normal; color:#5b3a99; background:#efe6fb; border:1px solid #7a4fb0; border-radius:6px; } .pay-note { margin:6px 0 0; font:700 13px/1.4 var(--font-display); color:#6b5b48; } @media (max-width:700px) { #decision[data-kind="sell"] #choices { grid-template-columns:1fr 1fr; } }
/* 1021 實況：小緣手牌常駐 */ .stream-hand { position:absolute; left:10px; bottom:10px; z-index:12; display:flex; flex-direction:column; gap:4px; max-width:220px; padding:6px 8px; background:rgba(255,250,240,.94); border:2px solid #3b2417; border-radius:10px; box-shadow:0 3px 0 #3b2417; pointer-events:auto; } .stream-hand[hidden] { display:none; } .stream-hand .sh-title { font:900 14px var(--font-display); color:#3b2417; } .stream-hand .sh-none { font:700 12px var(--font-display); color:#8a7a62; } .stream-hand .sh-card { display:grid; padding:2px 8px; background:#fff; border:2px solid #3b2417; border-left:6px solid #8a7a62; border-radius:6px; } .stream-hand .sh-card[data-kind="BUFF"] { border-left-color:#3f9a5a; } .stream-hand .sh-card[data-kind="PRANK"] { border-left-color:#e0842a; } .stream-hand .sh-card[data-kind="DEBUFF"] { border-left-color:#7a4fb0; } .stream-hand .sh-card b { font:900 13px/1.3 var(--font-display); color:#3b2417; } .stream-hand .sh-card small { font:700 12px/1.3 var(--font-display); color:#6b5b48; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stream-hand { bottom:auto; top:64px; } @media (max-width:1279px) { .stream-hand { top:110px; } }
/* 1021 右欄改版：玩家頁籤拿掉（點人物卡開）；地點小泡泡 */ #info nav [data-panel] { display:none; } #info nav { justify-content:flex-end; } .tile-tip { position:absolute; z-index:14; display:grid; gap:1px; max-width:210px; padding:5px 10px; background:rgba(255,250,240,.96); border:2px solid #3b2417; border-radius:8px; box-shadow:0 3px 0 #3b2417; pointer-events:none; } .tile-tip[hidden] { display:none; } .tile-tip b { font:900 15px var(--font-display); color:#3b2417; } .tile-tip .tt-owner { font:800 13px var(--font-display); color:#3b2417; border-left:5px solid var(--pc); padding-left:5px; } .tile-tip small { font:700 12px var(--font-display); color:#6b5b48; } .tile-tip .tt-hot { font:900 12px var(--font-display); font-style:normal; color:#c0392b; }