/* Sano 證券交易所：大廳與大門共用。像素字（Cubic 11，OFL）、粗像素框、海軍藍＋黃銅。 */
@font-face { font-family: "Cubic11"; src: url("/hall/fonts/Cubic_11.woff2") format("woff2"); font-display: swap; }

:root {
  --night: #141b2b;
  --navy: #22304d;
  --navy-light: #34476e;
  --brass: #c8973a;
  --brass-light: #e8c46a;
  --paper: #f3e6c4;
  --paper-dark: #dcc796;
  --ink: #1d2433;
  --muted: #5d5a52;
  --up: #d23c3c;      /* 台股：紅漲 */
  --down: #2f8a3e;    /* 綠跌 */
  --px: 3px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); color: var(--ink); font: 16px/1.5 "Cubic11", "Noto Sans TC", system-ui, sans-serif; -webkit-font-smoothing: none; }
body { background-image: radial-gradient(#1d2638 1px, transparent 1px); background-size: 6px 6px; min-height: 100vh; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: var(--px) solid var(--brass-light); outline-offset: 2px; }
canvas { image-rendering: pixelated; display: block; }
[hidden] { display: none !important; }

.game { max-width: 560px; margin: 0 auto; padding: 10px 10px 40px; display: grid; gap: 10px; }

/* 像素框：兩層實線疊出階梯角 */
.panel {
  background: var(--paper);
  border: var(--px) solid var(--ink);
  box-shadow: inset 0 0 0 var(--px) var(--paper-dark), 0 var(--px) 0 var(--ink);
  border-radius: 2px;
  padding: 10px 12px;
}
.panel.dark { background: var(--navy); color: var(--paper); box-shadow: inset 0 0 0 var(--px) var(--navy-light), 0 var(--px) 0 #000; }
.btn {
  background: var(--brass); color: var(--ink); border: var(--px) solid var(--ink);
  box-shadow: inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #9c6f22, inset var(--px) var(--px) 0 var(--brass-light);
  padding: 6px 12px; min-height: 40px;
}
.btn:active { transform: translateY(2px); box-shadow: inset var(--px) var(--px) 0 #9c6f22; }
.btn:disabled { filter: grayscale(.8); opacity: .7; cursor: wait; }
.btn.ghost { background: var(--paper); box-shadow: inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--paper-dark); }
.btn.red { background: #e06a5a; }
.btn.green { background: #7cbf6a; }
.muted { color: var(--muted); }
.up { color: var(--up); } .down { color: var(--down); }

/* ---------- 大廳 ---------- */
.hud { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.title-plate { display: flex; align-items: center; gap: 8px; }
.title-plate h1 { font-size: 16px; margin: 0; white-space: nowrap; }
.title-plate a { font-size: 12px; }
.title-plate small { display: block; font-size: 12px; color: var(--muted); }
.hud-right { text-align: right; font-size: 14px; line-height: 1.45; }
.hud-right b { font-size: 18px; }
.coin { display: inline-block; width: 12px; height: 12px; background: var(--brass-light); border: 2px solid #8a5f1c; border-radius: 50%; vertical-align: -1px; margin-right: 4px; }

.stage-wrap { position: relative; padding: 0; overflow: hidden; display: grid; justify-items: center; background: #0e1320; }
.stage-wrap canvas { cursor: pointer; }
.labels { position: absolute; inset: 0; pointer-events: none; }
.tag {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: auto; cursor: pointer;
  background: var(--paper); border: 2px solid var(--ink); font-size: 11px; line-height: 1.25; padding: 1px 4px; border-radius: 1px;
}
.tag.station { background: var(--navy); color: var(--paper); border-color: #000; }
.tag.desk { white-space: pre; text-align: center; font-size: 10px; line-height: 1.1; padding: 1px 3px; }
.tag.alert { background: #ffdf7a; animation: bob 1s steps(2) infinite; }
@keyframes bob { 50% { transform: translate(-50%, calc(-100% - 2px)); } }
.toast-scene { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 4px 10px; font-size: 13px; border: 2px solid var(--brass); opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
.toast-scene.on { opacity: 1; }
.corner { position: absolute; top: 6px; display: flex; gap: 6px; }
.corner.left { left: 6px; } .corner.right { right: 6px; }
.corner .btn { min-height: 32px; padding: 2px 8px; font-size: 13px; }

.dialog { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.dialog canvas { width: 64px; height: 64px; border: var(--px) solid var(--ink); background: #9cc3e6; }
.dialog b { display: block; font-size: 13px; color: var(--muted); }
.dialog p { margin: 2px 0 0; font-size: 16px; }

.quests h2, .tab-body h2 { font-size: 15px; margin: 0 0 6px; }
.quest { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; border-bottom: 2px dashed var(--paper-dark); }
.quest:last-child { border-bottom: 0; }
.check { width: 18px; height: 18px; border: var(--px) solid var(--ink); background: #fff; flex: none; display: grid; place-items: center; font-size: 12px; line-height: 1; }
.quest.done .check { background: var(--brass-light); }
.quest.done span { color: var(--muted); text-decoration: line-through; }
.streak { font-size: 13px; color: var(--muted); margin-top: 4px; }

.tabs { display: flex; gap: 4px; padding-left: 6px; margin-bottom: -10px; z-index: 1; }
.tabs button { background: var(--navy); color: var(--paper); border: var(--px) solid var(--ink); border-bottom: 0; padding: 6px 12px 8px; font-size: 14px; }
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.tab-body { min-height: 120px; }

/* 委託單卡片 */
.cards { display: grid; gap: 8px; }
.card { background: #fffaf0; border: var(--px) solid var(--ink); padding: 8px 10px; position: relative; display: grid; gap: 4px; }
.card .ribbon { position: absolute; top: -3px; right: 8px; background: var(--ink); color: var(--paper); font-size: 11px; padding: 0 6px; }
.card.buy { border-left: 10px solid var(--up); }
.card.sell { border-left: 10px solid var(--down); }
.card.backup { border-left: 10px solid var(--brass); }
.card h3 { margin: 0; font-size: 16px; }
.card .meta { font-size: 13px; color: var(--muted); }
.card .row { display: flex; gap: 6px; flex-wrap: wrap; }
.card.resolved { opacity: .65; }
.stamp { position: absolute; right: 12px; bottom: 8px; color: var(--up); border: 3px solid var(--up); padding: 0 6px; transform: rotate(-12deg); font-size: 16px; opacity: .85; }
.stamp.skip { color: var(--muted); border-color: var(--muted); }
.stamp.new { animation: stamp .35s steps(3) both; }
@keyframes stamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .85; } }

.list { display: grid; gap: 6px; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 0; border-bottom: 2px dashed var(--paper-dark); font-size: 14px; }
.item:last-child { border-bottom: 0; }
.item b { font-size: 15px; }
.bar { height: 8px; border: 2px solid var(--ink); background: #fff; position: relative; grid-column: 1 / -1; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--down); }
.bar.hp i { background: #6cc35a; } .bar.hp.low i { background: #e2a03b; } .bar.hp.danger i { background: var(--up); }
.bar.xp i { background: #6a8fe0; }
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.kv div { background: #fffaf0; border: 2px solid var(--ink); padding: 4px 8px; font-size: 13px; }
.kv b { display: block; font-size: 17px; }
.ribbon-history { display: flex; height: 14px; border: 2px solid var(--ink); }
.ribbon-history i { flex: 1; }
.lamps { display: grid; gap: 4px; }
.lamp { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.lamp i { width: 14px; height: 14px; border: 2px solid var(--ink); background: #555; flex: none; }
.lamp.on i { background: #ff4d3a; box-shadow: 0 0 6px #ff4d3a; }

/* K 線：卡片、交易桌名字旁的小按鈕，和視窗裡的像素圖 */
.kbtn { display: inline-flex; align-items: center; gap: 4px; vertical-align: 2px; margin-left: 4px; padding: 0 6px; min-height: 26px; font-size: 12px;
        background: var(--navy); color: var(--paper); border: 2px solid var(--ink); box-shadow: inset -2px -2px 0 #141b2b, inset 2px 2px 0 var(--navy-light); }
.kbtn:active { transform: translateY(1px); box-shadow: inset 2px 2px 0 #141b2b; }
.kbtn i { width: 8px; height: 12px; flex: none;   /* a red and a green candle */
          background: linear-gradient(var(--up), var(--up)) 1px 3px / 3px 6px no-repeat, linear-gradient(var(--up), var(--up)) 2px 1px / 1px 10px no-repeat,
                      linear-gradient(#7cbf6a, #7cbf6a) 5px 5px / 3px 5px no-repeat, linear-gradient(#7cbf6a, #7cbf6a) 6px 3px / 1px 9px no-repeat; }
.kinfo { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 14px; min-height: 44px; padding: 4px 8px; margin-bottom: 6px;
         background: var(--navy); color: var(--paper); border: var(--px) solid var(--ink); }
.kinfo > b { font-size: 15px; color: var(--brass-light); }
.kinfo em { font-style: normal; font-size: 11px; margin-left: 6px; padding: 0 4px; background: var(--brass); color: var(--ink); animation: blip 1.2s steps(2) infinite; display: inline-block; }
@keyframes blip { 50% { opacity: .55; } }
.kinfo .up { color: #ff8a7a; } .kinfo .down { color: #8fe09a; } .kinfo .muted { color: #aab3c8; }
.kchart { border: var(--px) solid var(--ink); background: #fffaf0; display: grid; justify-items: center; }
.kchart canvas { cursor: crosshair; }
.klegend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; margin-top: 6px; color: var(--muted); }
.klegend i { display: inline-block; width: 12px; height: 3px; vertical-align: 3px; margin-right: 4px; }
.klegend i.dash { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 6px); }
.growth-lead { font-size: 14px; margin: 0 0 6px; }
.kfoot { font-size: 12px; margin: 6px 0 0; }
.back { min-height: 32px; padding: 2px 10px; font-size: 13px; margin-bottom: 8px; }

/* 視窗 */
.modal { position: fixed; inset: 0; display: grid; place-items: end center; z-index: 10; }
.scrim { position: absolute; inset: 0; background: rgba(8, 10, 18, .45); }
/* opens at once, in four pixel steps: the sheet slides up, the scrim fades */
.modal.in .modal-body { animation: sheet-up .16s steps(4, end) both; }
.modal.in .scrim { animation: scrim-in .16s steps(4, end) both; }
@keyframes sheet-up { from { transform: translateY(40%); } to { transform: none; } }
@keyframes scrim-in { from { opacity: 0; } }
.modal-head { display: flex; align-items: center; gap: 8px; }
.modal-head canvas { height: 32px; width: auto; flex: none; }
.modal-body { position: relative; width: min(560px, 100%); max-height: 86vh; overflow: auto; margin: 0 0 0; border-bottom: 0; }
.modal-body h2 { margin: 0 32px 8px 0; font-size: 18px; }
.modal-body .x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 22px; }
.form { display: grid; gap: 8px; margin-top: 6px; }
.form label { font-size: 13px; color: var(--muted); display: grid; gap: 2px; }
.form input, .form select { background: #fff; border: var(--px) solid var(--ink); padding: 6px 8px; min-height: 40px; width: 100%; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.status { min-height: 20px; font-size: 13px; }
.status.error { color: var(--up); }
.offline { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); background: var(--up); color: #fff; padding: 4px 10px; border: 2px solid #000; }

/* ---------- 大門（登入） ---------- */
.gate { max-width: 460px; margin: 0 auto; padding: 14px 10px 40px; display: grid; gap: 10px; }
.gate .stage-wrap { padding: 0; }
.gate .speech { font-size: 16px; min-height: 48px; }
.gate .speech b { display: block; font-size: 13px; color: var(--muted); }
.terminal { background: #0f1a14; color: #8ff0a4; border: var(--px) solid #000; box-shadow: inset 0 0 0 var(--px) #23412f; padding: 12px; display: grid; gap: 10px; }
.terminal label { font-size: 13px; color: #6fbf82; display: grid; gap: 4px; }
.terminal input { background: #07100b; color: #b6ffc6; border: 2px solid #3d7a50; padding: 8px; min-height: 42px; caret-color: #b6ffc6; }
.terminal .btn { width: 100%; }
.terminal .status { color: #ffd479; }
@media (prefers-reduced-motion: reduce) { .tag.alert, .stamp.new, .kinfo em, .modal.in .modal-body, .modal.in .scrim { animation: none; } }