/* 暖紙色介面皮膚：版面仍由 style.css 管理，配色與字級由 THEME 注入。
   技能、手牌、操作台、HUD 與演出卡共用紙色；深綠只強調主要動作。 */
.paper-ui {
  --reading-size: var(--fz-body, 17px);
  --caption-size: var(--fz-small, 14px);
  --heading-size: var(--fz-name, 18px);
  --paper-hud-width: 340px;
}

.paper-ui :is(.action-dock, .hud-block, .hand-wrap, .hand-preview, .skill-popover,
  .choice-bar, .node-tip, .purchase-receipt, .help-card, .result-card, .fx-card, .fxs-row, .char-card, .event-bar) {
  --hud-text: var(--card-ink);
  --hud-dim: var(--card-muted);
  --panel: var(--card-surface);
  --panel-2: var(--card-inset);
  --panel-line: var(--card-border);
  --gold-lt: var(--card-gold);
  color: var(--card-ink);
  background: linear-gradient(155deg, var(--card-raised), var(--card-surface));
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  backdrop-filter: none;
}

.paper-ui :is(.pager button, .subtle-btn, .profile-overview, .skill-pop-actions button, .skill-opponents button) {
  color: var(--card-ink);
  background: var(--card-inset);
  border-color: var(--card-border);
  font-size: var(--caption-size);
  min-height: 34px;
}
.paper-ui .pager span { color: var(--card-muted); font-size: var(--caption-size); }
.paper-ui .pager button:disabled { opacity: 1; color: #938674; background: #eee9dd; }
.paper-ui :is(.pager button, .subtle-btn):focus-visible { outline-color: var(--card-action); }
.paper-ui :is(.profile-readout, .sb-finances, .owned-shop) { font-variant-numeric: tabular-nums; }

/* 個人操作台：名字、資產與可操作按鈕先讀得到。 */
.paper-ui .action-dock { width: min(640px, 100%); grid-template-columns: 84px minmax(0, 1fr); padding: 12px; gap: 8px 14px; }
.paper-ui .profile-portrait { position: relative; grid-row: 1; align-self: center; width: 84px; height: 84px; border-radius: 12px; background: var(--card-raised); }
.paper-ui .profile-name { font-size: var(--heading-size); }
.paper-ui .profile-name > span { color: var(--card-muted); font-size: var(--caption-size); }
.paper-ui .profile-assets { font-size: var(--caption-size); margin: 5px 0; }
.paper-ui .profile-assets strong { font-size: var(--fz-asset, 28px); color: var(--card-gold); }
.paper-ui .profile-cash { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--caption-size); }
.paper-ui .profile-cash b { color: var(--card-ink); font-size: 18px; }
.paper-ui .profile-cash b.neg { color: var(--card-danger); }
.paper-ui .profile-overview { padding: 2px 9px; min-height: 28px; }
.paper-ui #myPaperBonus { margin-left: 4px; color: var(--card-gold); border-color: var(--card-border); background: #f4e5bc; font-size: 13px; }
.paper-ui .action-progress { grid-column: 1 / -1; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--card-muted); }
.paper-ui .action-progress [data-step] { padding: 2px 0; }
.paper-ui .action-progress .current { color: var(--card-action); box-shadow: 0 2px var(--card-action); }
.paper-ui .action-progress .sell-btn { font-size: var(--caption-size); background: var(--card-warningSoft); color: var(--card-warning); border-color: #cb9982; }
.paper-ui .action-row.controls button { min-height: 60px; background: var(--card-inset); color: var(--card-ink); border-color: var(--card-border); font-size: var(--heading-size); }
.paper-ui .action-row.controls button small { font-size: var(--caption-size); opacity: 1; margin-top: 4px; }
.paper-ui .action-row.controls button.primary,
.paper-ui .skill-pop-actions #btnSkillActivate,
.paper-ui .rc-actions .primary { color: #fff9e9; background: var(--card-action); border-color: var(--card-action); text-shadow: none; }
.paper-ui .action-row.controls button.primary { font-size: 20px; }
.paper-ui .action-row.controls { grid-template-columns: 1fr 1.2fr 1.35fr; }
.paper-ui .prep-hint { color: var(--card-action); font-size: 15px; font-weight: bold; }
.paper-ui .action-progress:has(.prep-hint:not([hidden])) [data-step] { display: none; }
.paper-ui #btnHand.has-new-cards { border-color: var(--card-gold); box-shadow: inset 0 0 0 1px var(--card-gold); }
.paper-ui .hand-card.new-card::after { content: "新"; display: inline-block; padding: 1px 5px; margin-top: 5px; border-radius: 4px; color: var(--card-gold); background: #f5e4b9; font-size: 12px; }
.paper-ui .action-row.controls .skill-btn.available { color: #51435f; background: #eee6f0; border-color: #b3a0bc; }
.paper-ui #btnHand.available { color: #315b49; background: #e3ecdf; border-color: #9db296; }
.paper-ui #btnHand[data-hand-state="used"] { background: #ead9b7; border: 2px solid var(--card-gold); color: var(--card-ink); box-shadow: inset 0 -4px 0 var(--card-gold); }
.paper-ui #btnHand[data-hand-state="used"] b { font-size: 21px; }
.paper-ui #btnHand[data-hand-state="empty"] { background: #e9e3d5; border: 2px dashed #9b8e75; color: #665b49; }
.paper-ui #btnHand[data-hand-state="empty"] b { font-size: 19px; }
.paper-ui #btnHand[data-hand-state="used"] small, .paper-ui #btnHand[data-hand-state="empty"] small { color: inherit; font-weight: bold; font-size: 13px; }
.paper-ui .personal-skip-reason { flex-basis: 100%; color: var(--card-danger); font-size: 15px; line-height: 1.45; }
.paper-ui .action-row.controls button:disabled { opacity: 1; filter: none; color: #827867; background: #e8e1d2; border-color: #c8bda8; }
.paper-ui .action-row.controls .primary.cta { animation: paperCta 2.5s ease-in-out infinite; }
@keyframes paperCta { 0%,100% { box-shadow: 0 0 0 0 rgba(49,90,72,.18); } 50% { box-shadow: 0 0 0 4px rgba(49,90,72,.08); } }
.paper-ui .personal-effects { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 8px; padding: 7px; border-radius: 7px; background: var(--card-inset); }
.paper-ui .personal-effect { display: inline-flex; align-items: center; gap: 4px; font-size: var(--caption-size); font-weight: bold; line-height: 1.5; padding: 2px 5px; border-radius: 4px; }
.paper-ui .personal-effect .ui-icon { width: 17px; height: 17px; }
.paper-ui .personal-effect.caution { color: var(--card-danger); background: var(--card-warningSoft); }
.paper-ui .personal-effect.neutral { color: var(--card-info); background: var(--card-infoSoft); }
.paper-ui .action-dock[data-restriction="paused"], .paper-ui .action-dock[data-restriction="investment"] { box-shadow: inset 4px 0 var(--card-danger), var(--card-shadow); }
.paper-ui .action-dock[data-restriction="paused"] .profile-portrait { border-color: var(--card-danger); }
.paper-ui .action-dock[data-restriction="paused"] .action-row button.primary { background: var(--card-warning); border-color: var(--card-warning); }
.paper-ui .portrait-state { position: absolute; right: 2px; bottom: 2px; border-radius: 4px; padding: 2px 5px; font-size: 14px; font-weight: bold; background: var(--card-danger); color: #fffaf0; box-shadow: 0 1px 3px rgba(40,20,10,.2); }
.paper-ui .portrait-state.neutral { background: var(--card-info); }

/* 手牌與技能說明共用同一種紙卡，顏色只用於分類和狀態。 */
.paper-ui .hand-wrap { width: min(760px,100%); padding: 10px 12px; }
.paper-ui .hand-open .board-foot { z-index: 12; }
.paper-ui .hand-open #eventBar { display: none; }
.paper-ui .hand-bar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.paper-ui .hand-title, .paper-ui .hand-sub, .paper-ui .hand-empty { font-size: var(--caption-size); color: var(--card-muted); }
.paper-ui .hand-card { width: auto; min-width: 0; padding: 9px 8px; overflow-wrap: anywhere; color: var(--card-ink); background: var(--card-raised); border: 1px solid var(--card-border); box-shadow: 0 2px 6px rgba(65,45,15,.12); }
.paper-ui .hand-card .hc-name { font-size: var(--fz-hand,18px); color: var(--card-ink); }
.paper-ui .hand-card .hc-kind { font-size: var(--caption-size); color: var(--card-muted); }
.paper-ui :is(.hand-card, .hand-preview, .fx-card).card-buff { border-top: 4px solid var(--card-success); }
.paper-ui :is(.hand-card, .hand-preview, .fx-card).card-prank { border-top: 4px solid #b7832f; }
.paper-ui :is(.hand-card, .hand-preview, .fx-card).card-debuff { border-top: 4px solid var(--card-danger); }
.paper-ui .hand-card.card-daji { box-shadow: inset 0 0 0 2px #c7a24d, 0 2px 6px rgba(65,45,15,.12); }
.paper-ui .hand-card:hover { transform: translateY(-2px); }
.paper-ui .hand-empty { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .paper-ui .hand-bar { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .paper-ui .hand-wrap { padding: 8px; }
  .paper-ui .hand-bar { gap: 6px; padding: 0; }
  .paper-ui .hand-card { padding: 7px 5px; }
  .paper-ui .hand-card .hc-name { line-height: 1.35; }
  .paper-ui .hand-crowded .hand-bar { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .paper-ui .hand-crowded .hand-card { padding: 4px; }
}
.paper-ui .hand-preview { width: min(340px,calc(100vw - 16px)); }
.paper-ui .hp-name { font-size: 24px; color: var(--card-ink); }
.paper-ui .hp-desc { font-size: var(--reading-size); color: var(--card-ink); }
.paper-ui :is(.hp-kind, .hp-target, .hp-status, .hp-enhanced) { font-size: var(--caption-size); color: var(--card-muted); }
.paper-ui :is(.hp-status, .hp-enhanced) { color: var(--card-gold); }
.paper-ui .skill-popover { width: min(390px,calc(100vw - 16px)); }
.paper-ui .skill-pop-head h3 { font-size: 23px; }
.paper-ui .skill-portrait { width: 60px; height: 60px; flex-basis: 60px; }
.paper-ui #skillQuota { font-size: var(--caption-size); color: var(--card-muted); }
.paper-ui .skill-popover p, .paper-ui #skillExtra { font-size: var(--reading-size); color: var(--card-ink); line-height: 1.55; }
.paper-ui .skill-popover .skill-usage { font-size: 15px; background: var(--card-inset); color: var(--card-muted); }
.paper-ui .skill-pop-actions button { min-height: 42px; font-size: 16px; }
.paper-ui .skill-opponents button[aria-pressed="true"] { background: #ddd0b2; }

/* HUD 與交易資訊：淡底深字，保留玩家色條。 */
.paper-ui .hud-tabs button { font-size: 16px; color: var(--card-ink); background: var(--card-surface); border-color: var(--card-border); min-height: 42px; }
.paper-ui .hud { width: var(--paper-hud-width); }
.paper-ui .board-foot { right: calc(var(--paper-hud-width) + 28px); }
.paper-ui .hud-tabs button[aria-selected="true"] { background: var(--card-action); color: #fff9e9; }
.paper-ui .hud-sheet-close { display: none; position: absolute; right: 0; top: 0; min-height: 38px; width: 60px; padding: 6px; border: 1px solid var(--card-border); border-radius: 8px; font-size: 14px; background: var(--card-inset); color: var(--card-ink); cursor: pointer; }
.paper-ui .hud-title { font-size: var(--heading-size); color: var(--card-ink); letter-spacing: 1px; }
.paper-ui .trial-badge { color: #ffe4a1; border: 1px solid #b59a55; border-radius: 5px; padding: 3px 10px; margin-bottom: 8px; font-size: 14px; }
.paper-ui #minimap { width: 100%; height: 170px; display: block; }
.paper-ui .mini-destination { display: block; padding: 3px 0; margin-bottom: 6px; border: 0; background: none; color: var(--card-destination); font: inherit; font-size: 15px; font-weight: bold; text-align: left; cursor: pointer; }
.paper-ui .mini-key { margin: 6px 0; font-size: 12px; color: var(--card-muted); }
.paper-ui .minimap-players { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.paper-ui .mini-player { padding: 5px; min-width: 0; border: 1px solid var(--card-border); border-left: 3px solid var(--pc); border-radius: 6px; background: var(--card-raised); color: var(--card-ink); cursor: pointer; text-align: left; font: inherit; }
.paper-ui .mini-player-head { display: flex; align-items: center; gap: 4px; }
.paper-ui .mini-player b { font-size: 14px; }
.paper-ui .mini-player i { margin-left: auto; padding: 1px 5px; border-radius: 50%; background: var(--card-action); color: white; font-size: 12px; font-style: normal; }
.paper-ui .mini-avatar { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; overflow: hidden; border-radius: 50%; background: var(--card-inset); }
.paper-ui .mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.paper-ui .mini-player small { display: block; margin-top: 3px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--card-muted); }
@media (max-width: 600px) { .paper-ui #minimap { height: 130px; } }
.paper-ui .hud-hint { font-size: var(--caption-size); color: var(--card-muted); }
.paper-ui .destination-label, .paper-ui .destination-blessing { font-size: var(--caption-size); }
.paper-ui .destination-name { color: var(--card-ink); font-size: 21px; }
.paper-ui .destination-name:hover { color: var(--card-gold); }
.paper-ui .sb-row { background: #f3ead7; padding: 7px 9px; box-shadow: none; }
.paper-ui .sb-row.sb-cur { background: #e5eddc; box-shadow: inset 0 0 0 1px #b8c6a5; }
.paper-ui .sb-name { font-size: var(--heading-size); color: var(--card-ink); }
.paper-ui .sb-top > .sb-avatar { width: 32px; height: 32px; flex-basis: 32px; }
.paper-ui :is(.sb-shopcount, .sb-rank, .sb-bottom, .sb-distance-compact) { font-size: 13px; color: var(--card-muted); }
.paper-ui :is(.sb-dist, .sb-own) { font-size: 13px; color: var(--card-muted); }
.paper-ui .sb-bless { background: #ecdbac; color: #664614; font-size: 13px; }
.paper-ui .sb-rank.top, .paper-ui .sb-shopcount.leading { color: var(--card-gold); }
.paper-ui .sb-finances { display: flex; flex-direction: column; gap: 3px; }
.paper-ui .sb-finances > span { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.paper-ui .sb-finances small { font-size: 13px; color: var(--card-muted); }
.paper-ui .sb-cash { color: var(--card-muted); font-size: 14px; font-weight: normal; }
.paper-ui .sb-val { color: var(--card-gold); font-size: 20px; }
.paper-ui .sb-cash.neg { color: var(--card-danger); }
.paper-ui .sb-track { background: #ddd0b8; height: 5px; }
.paper-ui .sb-dist.near { color: #866016; animation: none; }
.paper-ui .sb-effect { font-size: 13px; }
.paper-ui .sb-effect.benefit { color: var(--card-success); background: #e2ecdd; }
.paper-ui .sb-effect.caution { color: var(--card-warning); background: var(--card-warningSoft); }
.paper-ui .sb-effect.neutral { color: var(--card-info); background: var(--card-infoSoft); }
.paper-ui :is(.owned-hint, .owned-shop small, .owned-bonus, .season-caption, .map-key) { font-size: var(--caption-size); }
.paper-ui .owned-shop b { font-size: 16px; }
.paper-ui .owned-shop strong { font-size: 18px; color: var(--card-success); }
.paper-ui .owned-bonus.on { color: var(--card-gold); font-weight: bold; }
.paper-ui .season-step { background: var(--card-inset); font-size: 16px; }
.paper-ui .season-step.current { color: var(--card-action); border-color: var(--card-action); }
.paper-ui .season-step.done { color: #fff9e9; background: var(--card-action); }
.paper-ui .sg-row > span { font-size: 16px; }
.paper-ui .sg-row small { font-size: var(--caption-size); }
.paper-ui .sg-row strong { color: var(--card-success); font-size: 19px; }
.paper-ui .log > div { font-size: var(--reading-size); line-height: 1.5; padding: 9px 0; }
.paper-ui .log-round { font-size: var(--caption-size); color: var(--card-gold); }
.paper-ui .event-bar { font-size: 16px; border-left: 3px solid var(--card-gold); }
.paper-ui .purchase-receipt :is(b, small) { font-size: var(--caption-size); color: var(--card-ink); }
.paper-ui .purchase-receipt strong { color: var(--card-gold); }

/* 決策面板、說明與戰績延續紙卡材質，避免開窗後突然換一套風格。 */
.paper-ui .choice-bar .dir-hint-title { color: var(--card-ink); font-size: 21px; }
.paper-ui .choice-bar .dir-hint-sub { color: var(--card-muted); font-size: var(--caption-size); line-height: 1.5; }
.paper-ui .choice-btn { color: var(--card-ink); background: var(--card-inset); border-color: var(--card-border); font-size: var(--heading-size); }
.paper-ui .choice-btn:hover:not(:disabled) { color: var(--card-ink); background: #eee0bb; border-color: #9a7c43; box-shadow: 0 3px 8px rgba(65,45,15,.16); }
.paper-ui .choice-btn:disabled { opacity: 1; color: #8a7c65; background: #eee9de; }
.paper-ui .investment-choice .db-label small { color: var(--card-gold); font-size: 21px; }
.paper-ui .investment-line { color: var(--card-muted); font-size: var(--caption-size); }
.paper-ui .investment-line.income { color: var(--card-success); font-size: 17px; }
.paper-ui .investment-line.notice { background: #f2ead6; }
.paper-ui .investment-line.warning { color: var(--card-danger); }
.paper-ui .choice-timer { color: var(--card-action); background: #e5ecdf; border-color: #acbda5; font-size: 17px; }
.paper-ui .choice-timer.warn { color: var(--card-danger); background: var(--card-warningSoft); animation: none; }
.paper-ui :is(.choice-bar, .hand-card, .exit-chip) kbd.key-hint { color: var(--card-muted); background: #eee4ce; border-color: var(--card-border); font-size: 12px; height: 19px; }
.paper-ui :is(.help-card, .result-card) h2 { color: var(--card-ink); text-shadow: none; }
.paper-ui .help-grid section { background: var(--card-raised); border-color: var(--card-border); }
.paper-ui .help-grid h3 { color: var(--card-ink); font-size: 21px; }
.paper-ui .help-grid p { color: var(--card-ink); font-size: var(--reading-size); line-height: 1.55; }
.paper-ui .help-grid p b { color: var(--card-gold); }
.paper-ui #bonusHelp p + p { margin-top: 14px; }
.paper-ui .time-diagram div { background: var(--card-inset); }
.paper-ui .time-diagram b { font-size: 17px; }
.paper-ui .time-diagram small { font-size: var(--caption-size); }
.paper-ui :is(.rc-sub, .rc-detail) { color: var(--card-muted); font-size: var(--caption-size); }
.paper-ui :is(.rc-name, .rc-rank) { color: var(--card-ink); font-size: var(--heading-size); }
.paper-ui .rc-row { background: var(--card-raised); border-color: var(--card-border); border-left-color: var(--pc); }
.paper-ui .rc-row.rc-win { background: #f5e9c8; box-shadow: none; }
.paper-ui .rc-assets { color: var(--card-gold); font-size: 22px; }
.paper-ui .rc-neg .rc-assets { color: var(--card-danger); }
.paper-ui .rc-actions .primary { font-size: 18px; min-height: 46px; box-shadow: none; }
.paper-ui .fx-card .fc-name { color: var(--card-ink); font-size: 22px; }
.paper-ui .fx-card .fc-desc { color: var(--card-muted); font-size: 17px; }
.paper-ui .fx-card .fc-kind { color: var(--card-gold); font-size: 15px; }
.paper-ui :is(.fxs-name, .fxs-assets, .fxs-rank) { color: var(--card-ink); }
.paper-ui .fxs-income.gain { color: var(--card-success); }
.paper-ui .fxs-income.zero { color: var(--card-muted); }
.paper-ui .fxs-assets.loss { color: var(--card-danger); }
.paper-ui .fxs-row.top { background: #f3e6c3; box-shadow: none; }
.paper-ui .fx-stage { max-width: calc(100vw - 28px); width: max-content; }
.paper-ui .fx-participants { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.paper-ui .fx-person { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 12px; background: var(--card-surface); color: var(--card-ink); border: 1px solid var(--card-border); min-width: 0; }
.paper-ui .fx-avatar { flex: 0 0 56px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; border: 2px solid var(--pc); background: var(--card-raised); color: var(--card-ink); font-size: 25px; }
.paper-ui .fx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.paper-ui .fx-person-name { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.paper-ui .fx-person-name b { font-size: 21px; white-space: nowrap; }
.paper-ui .fx-person-name small { font-size: 14px; color: var(--card-muted); }
.paper-ui .fx-person-arrow { color: #fff9eb; font-size: 24px; }
.paper-ui .fx-pause-reason { background: var(--card-surface); color: var(--card-danger); border: 2px solid var(--card-danger); border-radius: 10px; padding: 12px 18px; text-shadow: none; }
.paper-ui .fxs-name { display: flex; align-items: center; gap: 7px; }
.paper-ui .fxs-name .fx-avatar { flex-basis: 30px; width: 30px; height: 30px; font-size: 17px; }
@media (max-width: 600px) {
  .paper-ui .fx-person { gap: 6px; padding: 6px 8px; }
  .paper-ui .fx-avatar { width: 42px; height: 42px; flex-basis: 42px; }
  .paper-ui .fx-person-name b { font-size: 17px; }
  .paper-ui .fx-participants { gap: 6px; }
  .paper-ui .personal-skip-reason { font-size: 14px; }
}
@media (max-height: 700px) {
  .paper-ui .fx-stage { top: 50%; gap: 8px; }
  .paper-ui .fx-hero { width: 100px; height: 100px; }
}

.paper-ui .node-tip { max-width: min(320px,calc(100vw - 16px)); }
.paper-ui .nt-name { font-size: 19px; color: var(--card-ink); }
.paper-ui .nt-effect { font-size: 16px; color: var(--card-muted); }
.paper-ui :is(.nt-tag, .nt-shop) { font-size: 14px; }
.paper-ui .nt-owner { color: var(--card-ink) !important; text-shadow: none; }
.paper-ui .nt-players { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 8px; }
.paper-ui .nt-player { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.paper-ui .nt-avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pc); background: var(--card-raised); }
.paper-ui .nt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.paper-ui .map-read-hint { font-size: 13px; color: var(--card-muted); line-height: 1.5; margin: 8px 0; }
.paper-ui .map-tools a { text-decoration: none; display: inline-flex; align-items: center; }
.paper-ui .pick-hint .link-btn { font-size: 14px; }
.paper-ui .exit-chip { min-width: 215px; max-width: min(280px,calc(100vw - 24px)); font-size: 19px; }
.paper-ui :is(.exit-type, .exit-meta, .exit-distance) { font-size: var(--caption-size); }
.paper-ui .char-card { border-radius: 12px; }
.paper-ui .char-card:hover { transform: translateY(-2px); border-color: #9c8656; box-shadow: 0 5px 15px rgba(30,25,10,.28); }
.paper-ui .char-nick { color: var(--card-ink) !important; font-size: 20px; }
.paper-ui .char-card .char-skill { color: var(--card-muted); font-size: 16px; min-height: 42px; }
.paper-ui .char-go { color: var(--card-action); font-size: 13px; }

@media (max-width: 1280px) {
  .paper-ui { --paper-hud-width: 320px; }
  .paper-ui .scoreboard { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
  .paper-ui .sb-row { padding: 6px; }
  .paper-ui .sb-name { font-size: 16px; }
  .paper-ui .sb-top > .sb-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .paper-ui .sb-top { gap: 3px; }
  .paper-ui .sb-rank, .paper-ui .sb-shopcount { font-size: 12px; }
  .paper-ui .sb-total { flex-direction: column; align-items: flex-start !important; gap: 0 !important; }
  .paper-ui .sb-val { font-size: 18px; }
  .paper-ui .sb-bottom, .paper-ui .sb-distance-compact { display: none; }
}
@media (max-width: 600px) {
  .paper-ui { --reading-size: 16px; --caption-size: 13px; --heading-size: 16px; }
  .paper-ui .action-dock { grid-template-columns: 68px minmax(0,1fr); padding: 9px; gap: 6px 9px; }
  .paper-ui .profile-portrait { width: 68px; height: 68px; }
  .paper-ui .profile-assets strong { font-size: 26px; }
  .paper-ui .profile-cash b { font-size: 16px; }
  .paper-ui .action-progress { font-size: 12px; gap: 6px 12px; }
  .paper-ui .action-row.controls button { min-height: 57px; font-size: 16px; }
  .paper-ui .action-row.controls button.primary { font-size: 18px; }
  .paper-ui .action-row.controls button small { font-size: 12px; }
  .paper-ui .hand-card .hc-name { font-size: 16px; }
  .paper-ui .hand-open .hud-pages { display: none; }
  .paper-ui .hud-tabs button { font-size: 14px; min-height: 38px; }
  .paper-ui .hud { width: calc(100% - 24px); }
  .paper-ui .board-foot { right: 12px; }
  .paper-ui .sb-cash { font-size: 14px; }
  .paper-ui .sb-val { font-size: 18px; }
  .paper-ui .sb-name { font-size: 16px; }
  .paper-ui .sb-top > .sb-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .paper-ui .round-strip { width: 100%; border-radius: 10px; gap: 4px; }
  .paper-ui .round-strip .round-pill { flex: 1 0 100%; background: transparent; color: #fff0c8; padding: 1px; font-size: 14px; }
  .paper-ui .round-strip .sound-btn { flex: 1; padding: 5px; font-size: 14px; }
  .paper-ui .topbar .title { font-size: 17px; }
  .paper-ui .status-bar { font-size: 16px; }
  .paper-ui .help-card, .paper-ui .result-card { padding: 12px; }
  .paper-ui .help-grid section { padding: 12px; }
  .paper-ui .sg-row { gap: 8px; padding: 9px 0; }
  .paper-ui .sg-row > span { font-size: 14px; }
  .paper-ui .sg-row strong { font-size: 17px; }
  .paper-ui .time-diagram { gap: 5px; }
  .paper-ui .time-diagram b { font-size: 15px; }
  .paper-ui .fxs-row { grid-template-columns: auto 1fr auto; gap: 6px; padding: 7px 10px; }
  .paper-ui .fxs-assets { grid-column: 2 / -1; font-size: 14px; }
  .paper-ui .fxs-assets::before { content: "資產 "; }
  .paper-ui .char-nick { font-size: 16px; }
  .paper-ui .char-card .char-skill { font-size: 13px; min-height: 40px; }
  .paper-ui .hud-pages { display: none; }
  .paper-ui .hud-reading .topbar { visibility: hidden; }
  .paper-ui .hud-reading .hud { top: 10px; }
  .paper-ui .hud-reading .destination-block { display: none; }
  .paper-ui .hud-reading .hud-pages { display: block; }
  .paper-ui .hud-reading .hud-tabs { padding-right: 66px; }
  .paper-ui .hud-reading .hud-sheet-close { display: block; }
  .paper-ui .hud-reading .hud-block { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-ui .action-row.controls .primary.cta { animation: none; }
}

/* 選角閱讀層：短畫面改分頁與精簡說明，保留可讀字級。 */
.paper-ui #select-screen .subtitle { font-size: var(--fz-pick-body); }
.paper-ui #select-screen .gs-txt b { font-size: var(--fz-pick-body); }
.paper-ui #select-screen .gs-txt small { font-size: var(--fz-pick-meta); }
.paper-ui #select-screen .goal-strip { flex-wrap: nowrap; }
.paper-ui #select-screen .goal-step { min-width: 0; flex: 1; }
.paper-ui #select-screen .len-label { font-size: var(--fz-pick-body); letter-spacing: 1px; }
.paper-ui #select-screen .len-btn b { font-size: var(--fz-pick-body); }
.paper-ui #select-screen .len-btn small { font-size: var(--fz-pick-meta); }
.paper-ui #select-screen .len-estimate { margin-left: 8px; }
.paper-ui #select-screen .pick-hint { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: var(--fz-pick-body); }
.paper-ui #select-screen .pick-hint::before, .paper-ui #select-screen .pick-hint::after { display: none; }
.paper-ui #select-screen .link-btn { font-size: var(--fz-pick-meta); margin: 0; }
.paper-ui #select-screen .char-list { width: min(1000px,100%); }
.paper-ui #select-screen .char-nick { font-size: var(--fz-pick-name); }
.paper-ui #select-screen .char-skill { font-size: var(--fz-pick-body); min-height: 54px; margin-top: 14px; line-height: 1.6; }
.paper-ui #select-screen .char-go { font-size: var(--fz-pick-meta); }
.paper-ui #charPager .pager { margin-top: 10px; }
.paper-ui #charPager .pager span { color: #e3dccb; }
.paper-ui #charPager .pager button { font-size: var(--fz-pick-meta); min-height: 40px; }
@media (max-height: 800px) {
  .paper-ui #select-screen .goal-strip, .paper-ui #select-screen .sel-crest { display: none; }
  .paper-ui #select-screen .subtitle { margin-bottom: 12px; }
  .paper-ui #select-screen .char-avatar { width: 64px; height: 64px; }
}
@media (max-width: 760px) {
  .paper-ui #select-screen { padding: 12px; }
  .paper-ui #select-screen h1 { font-size: 28px; letter-spacing: 2px; line-height: 1.2; }
  .paper-ui #select-screen .subtitle, .paper-ui #select-screen .goal-strip, .paper-ui #select-screen .sel-crest { display: none; }
  .paper-ui #select-screen .len-pick { flex-direction: column; gap: 5px; width: 100%; margin-bottom: 10px; }
  .paper-ui #select-screen .len-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; width: 100%; }
  .paper-ui #select-screen .len-btn { padding: 6px 2px; }
  .paper-ui #select-screen .len-btn b { letter-spacing: 0; }
  .paper-ui #select-screen .len-estimate { display: block; margin-left: 0; }
  .paper-ui #select-screen .pick-hint { margin-bottom: 10px; }
  .paper-ui #select-screen .char-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .paper-ui #select-screen .char-card { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 4px 6px; padding: 8px; }
  .paper-ui #select-screen .char-avatar { width: 48px; height: 48px; margin: 0; }
  .paper-ui #select-screen .char-nick { font-size: calc(var(--fz-pick-name) - 4px); letter-spacing: 0; margin: 0; }
  .paper-ui #select-screen .char-skill { grid-column: 1 / -1; display: block; font-size: var(--fz-pick-meta); min-height: 46px; margin: 10px 0 0; line-height: 1.6; }
  .paper-ui #select-screen .char-go { display: none; }
}

/* 小地圖與目的地有固定識別，不只靠滑鼠移上去才看得出入口。 */
.paper-ui .hud-tabs button[data-panel="mapPanel"] { flex: 1.3; border: 2px solid var(--card-action); font-weight: bold; }
.paper-ui .hud-tabs button[data-panel="mapPanel"] .ui-icon { display: inline-block; flex: 0 0 18px; }
.paper-ui .hud-tabs button[data-panel="mapPanel"][aria-selected="false"] { background: #e5eddf; color: var(--card-action); }
.paper-ui .hud-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--card-gold); }
.paper-ui .destination-block { border: 2px solid var(--card-destination); background: var(--card-destinationSoft); }
.paper-ui .destination-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; color: var(--card-destination); font-weight: bold; letter-spacing: 1px; }
.paper-ui .destination-label small { font-size: 12px; font-weight: normal; letter-spacing: 0; white-space: nowrap; }
.paper-ui .destination-name { color: var(--card-destination); font-size: 23px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.paper-ui #previewExit { display: block; margin-top: 6px; width: 100%; max-width: 220px; min-height: 32px; border: 1px solid var(--card-border); border-radius: 6px; padding: 3px 6px; background: var(--card-raised); color: var(--card-ink); font: inherit; font-size: 15px; }
.paper-ui .action-row { position: relative; }
.paper-ui .step-previewing .action-row > button { visibility: hidden; }
.paper-ui .step-preview { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 4px; padding: 3px; background: var(--card-surface); text-align: left; }
.paper-ui #stepPreviewTitle { font-size: 14px; font-weight: bold; color: var(--card-action); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paper-ui #stepPreviewCells { display: flex; gap: 5px; padding: 0; margin: 0; list-style: none; }
.paper-ui #stepPreviewCells li { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--card-border); border-radius: 5px; background: var(--card-raised); }
.paper-ui #stepPreviewCells b { font-size: 16px; color: var(--card-action); }
.paper-ui #stepPreviewCells img { width: 24px; height: 24px; }
@media (max-width: 600px) {
  .paper-ui .destination-block { padding: 7px 10px; }
  .paper-ui .destination-name { font-size: 21px; padding: 2px 0; }
  .paper-ui .destination-label { font-size: 14px; }
  .paper-ui .hud-tabs button[data-panel="mapPanel"] { gap: 3px; }
  .paper-ui .routing-preview .hud-tabs { visibility: hidden; pointer-events: none; }
  .paper-ui .routing-preview #dirBar { top: var(--route-toolbar-top); left: 12px; width: calc(100% - 24px); min-height: 38px; padding: 3px 8px; border-radius: 8px; gap: 8px; box-sizing: border-box; }
  .paper-ui .routing-preview #dirBar .dir-hint-title, .paper-ui .routing-preview #dirBar .dir-hint-sub { display: none; }
  .paper-ui .routing-preview #dirBar .dir-hint-wrap { flex: 1; min-width: 0; }
  .paper-ui .routing-preview #dirBar .dir-timer, .paper-ui .routing-preview #dirBar .dir-timer svg { width: 30px; height: 30px; }
  .paper-ui .routing-preview #previewExit { margin-top: 0; max-width: none; min-height: 30px; }
  .paper-ui #stepPreviewCells img { width: 21px; height: 21px; }
}
/* 短手機：資訊按需聚焦於畫面上方，自己的角色與資產仍留在底部。 */
@media (max-width: 600px) and (max-height: 760px) {
  .paper-ui .topbar .title { display: none; }
  .paper-ui .topbar .round-strip { grid-row: 1; }
  .paper-ui .topbar .status-bar { grid-row: 2; }
}