:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);touch-action:manipulation;-webkit-user-select:none;user-select:none;}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#0d1117;color:#fff;}
img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: fixed 960×540 stage (scene art 480×270 ×2) scaled to fit; screens, desk props and dialogs are DOM layers over the canvas. */
@font-face { font-family: 'fp12'; src: url('./fp12.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'fp8'; src: url('./fp8.woff2') format('woff2'); font-display: block; }
:root {
  color-scheme: dark;
  --ink: #0b0e10;
  --paper: #e9dcc0;
  --paper-dim: #b9a98a;
  --rust: #b4553c;
  --rust-dk: #6b2e21;
  --amber: #f2c46a;
  --fb: #2f6fd6;
  --fb-dk: #173a73;
  --shop: #3fa066;
  --shop-dk: #1d4a31;
  --scr: #0d151d;
  --scr-2: #13202b;
  --scr-line: #1d2c38;
  --scr-text: #c9d6de;
  --scr-dim: #6f8593;
  --good: #6fe08a;
  --bad: #ff6a5a;
  --warn: #ffc24a;
  --px: 'fp12', 'Noto Sans SC', monospace;
  --px8: 'fp8', 'fp12', monospace;
}
html, body { height: 100%; }
body {
  background: var(--ink); color: var(--paper); font-family: var(--px); font-size: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 12px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  -webkit-font-smoothing: none; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button, table { font: inherit; }
.topline { width: 100%; max-width: 1440px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.topline h1 { margin: 0; font-size: 24px; font-weight: normal; color: var(--amber); text-shadow: 2px 2px 0 var(--rust-dk); }
.topline span { color: var(--paper-dim); }
#frame { position: relative; width: 100%; max-width: 1440px; display: flex; justify-content: center; }
#stage-wrap { position: relative; overflow: hidden; border: 4px solid #000; box-shadow: 0 0 0 2px #2a2f33; background: #000; }
#stage { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; }
#scene { position: absolute; inset: 0; width: 960px; height: 540px; image-rendering: pixelated; }
.abs { position: absolute; }
.day-only { display: none !important; }
#stage.day .day-only { display: block !important; }
#stage.day .night-only { display: none !important; }
:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ---------- screens ---------- */
.screen { position: absolute; overflow: hidden; background: var(--scr); color: var(--scr-text); }
.screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 24px rgba(0,0,0,.5); }
.bar { height: 18px; display: flex; align-items: center; gap: 6px; padding: 0 6px; color: #fff; }
.grow { flex: 1; }
.fb .bar { background: var(--fb); border-bottom: 2px solid var(--fb-dk); }
.shop .bar { background: var(--shop); border-bottom: 2px solid var(--shop-dk); }
.logo { width: 12px; height: 12px; display: grid; place-items: center; background: #fff; color: var(--fb); line-height: 12px; }
.shop .logo { color: var(--shop); }
.tabs { height: 18px; display: flex; align-items: stretch; gap: 2px; padding: 0 4px; border-bottom: 2px solid var(--scr-line); background: #0a1118; }
.tab { border: 0; background: transparent; color: var(--scr-dim); padding: 0 8px; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--scr); color: #fff; box-shadow: inset 0 2px 0 var(--fb); }
.shop .tab[aria-selected="true"] { box-shadow: inset 0 2px 0 var(--good); }
.bar .tab { color: #d8f0e0; height: 18px; flex-shrink: 0; }
.bar .tab[aria-selected="true"] { background: var(--shop-dk); color: #fff; box-shadow: none; }
.tabs .meta { margin-left: auto; align-self: center; color: var(--scr-dim); }
.body { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.g { color: var(--good); } .r { color: var(--bad); } .y { color: var(--warn); } .dim { color: var(--scr-dim); }
.btn { border: 0; cursor: pointer; padding: 0 6px; height: 16px; line-height: 16px; background: #2a3b4a; color: #e8eef2; box-shadow: inset 0 -2px 0 #172430; white-space: nowrap; }
.btn:hover { background: #34495b; }
.btn:active { box-shadow: none; transform: translateY(1px); }
.btn.pri { background: var(--fb); box-shadow: inset 0 -2px 0 var(--fb-dk); }
.btn.go { background: #2f8a55; box-shadow: inset 0 -2px 0 #1d4a31; }
.btn.warn { background: #6a2a22; box-shadow: inset 0 -2px 0 #3a1410; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.sq { width: 16px; padding: 0; text-align: center; }
.chip { display: inline-block; padding: 0 4px; height: 14px; line-height: 14px; background: #1b2a36; color: #b9c9d4; border: 0; font-family: var(--px); }
button.chip { cursor: pointer; }
button.chip[aria-pressed="true"] { background: var(--fb); color: #fff; }
.chip.clue { background: #2a2414; color: var(--amber); }
.chip.lock { background: #1a1a1a; color: #5d6870; }
.hl { animation: hl .7s steps(2) infinite; }
@keyframes hl { 50% { box-shadow: 0 0 0 2px var(--amber), 0 0 12px var(--amber); } }

/* pick tab */
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
.pick { max-height: 218px; overflow-y: auto; box-sizing: border-box; }
.newtag { background: var(--bad); color: #fff; font-family: var(--px8); font-size: 8px; padding: 0 3px; vertical-align: 2px; }
.chip.trait { background: #3a1a14; color: #ffb4a0; font-family: var(--px8); font-size: 8px; height: 10px; line-height: 10px; }
.card { background: var(--scr-2); border: 2px solid var(--scr-line); padding: 4px; display: flex; flex-direction: column; gap: 4px; min-height: 102px; box-sizing: border-box; }
.card.in { border-color: #2f6a48; }
.card .hd { display: flex; gap: 5px; align-items: center; }
.card img { width: 32px; height: 32px; image-rendering: pixelated; background: #0a1118; flex: none; }
.card .nm { line-height: 14px; }
.card .px { line-height: 14px; color: var(--scr-dim); }
.card .clues { display: flex; flex-wrap: wrap; gap: 2px; }
.card .clues .chip { font-family: var(--px); font-size: 12px; height: 14px; line-height: 14px; }
.card .ft { margin-top: auto; display: flex; justify-content: flex-end; }

/* ads tab */
.toolbar { height: 20px; display: flex; align-items: center; gap: 4px; padding: 0 4px; }
.adtable { height: 112px; overflow-y: auto; }
table.ads { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ads th { font-weight: normal; color: var(--scr-dim); text-align: right; padding: 0 3px; height: 14px; border-bottom: 2px solid var(--scr-line); position: sticky; top: 0; background: var(--scr); }
.ads th.l, .ads td.l { text-align: left; }
.ads td { text-align: right; padding: 0 3px; height: 24px; border-bottom: 2px solid var(--scr-line); white-space: nowrap; }
.ads tr { cursor: pointer; }
.ads tr.sel td { background: var(--scr-2); }
.ads tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--fb); }
.ads tr.off td { color: #4b5b66; }
.ads tr.hot td { animation: hot .8s steps(2) infinite; }
.ads tr.hot td:first-child { box-shadow: inset 2px 0 0 var(--amber); }
.ads tr.bleed td.roas { animation: blink 1s steps(2) infinite; }
@keyframes hot { 0% { background: #2b2410; } 100% { background: #3e3412; } }
@keyframes blink { 50% { opacity: .4; } }
.ads td.name { line-height: 12px; }
.ads .st { font-weight: normal; font-family: var(--px8); font-size: 8px; padding: 0 2px; }
.ads .st.y { background: #4a3a10; color: var(--warn); } .ads .st.g { background: #163d22; color: var(--good); } .ads .st.o { background: #4a2a10; color: #ffa04a; } .ads .st.r { background: #4a1a16; color: var(--bad); }
.ads td.name i { font-style: normal; color: var(--scr-dim); font-family: var(--px8); font-size: 8px; display: block; margin-top: 1px; }
.tog { width: 24px; height: 14px; background: #2a3640; border: 0; padding: 0; position: relative; cursor: pointer; vertical-align: middle; }
.tog::after { content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; background: #6f8593; }
.tog[aria-pressed="true"] { background: #2f8a55; }
.tog[aria-pressed="true"]::after { left: 12px; background: #fff; }
.bud { display: inline-flex; align-items: center; gap: 2px; }
.bud .btn { height: 18px; line-height: 18px; width: 18px; padding: 0; font-size: 12px; }
.ads th.sort { cursor: pointer; } .ads th.sort:hover { color: #e8eef2; } .ads th.sort.on { color: #8fb8ff; }
.detail { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; border-top: 2px solid var(--scr-line); padding: 4px 6px; box-sizing: border-box; }
.detail h3 { margin: 0 0 2px; font-size: 12px; font-weight: normal; display: flex; justify-content: space-between; align-items: center; height: 16px; gap: 4px; }
.detail h3 > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.detail h3 .bs { display: flex; gap: 3px; flex-shrink: 0; margin-left: auto; }
.detail h3 .fr { flex-shrink: 0; white-space: nowrap; }
.paper table.ledger { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.paper .ledger th { font-weight: normal; color: #8a7458; text-align: right; border-bottom: 2px solid #cdb98f; padding: 1px 4px; }
.paper .ledger td { text-align: right; padding: 1px 4px; border-bottom: 1px dotted #cdb98f; line-height: 16px; }
.paper .ledger th:first-child, .paper .ledger td:first-child { text-align: left; }
.paper .shop-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 2px dotted #cdb98f; padding: 4px 0; }
.paper .shop-row small { display: block; color: #8a7458; }
.paper .shop-row .pbtn:disabled { opacity: .45; cursor: not-allowed; }
.card .tierT { font-family: var(--px8); font-size: 8px; padding: 0 3px; vertical-align: 2px; }
.tierT.t2 { background: #2a3a6a; color: #bcd0ff; } .tierT.t3 { background: #5a2a6a; color: #f0c0ff; }
.evwin { color: #ffe27a; margin-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.evwin.bad { color: #ff8a7a; }
.fun { display: flex; align-items: stretch; gap: 2px; }
.fbox { flex: 1; background: var(--scr-2); padding: 2px 3px; height: 30px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
.fbox .k { color: var(--scr-dim); font-family: var(--px8); font-size: 8px; line-height: 8px; }
.fbox .v { line-height: 12px; font-variant-numeric: tabular-nums; }
.fbox .v small { font-family: var(--px8); font-size: 8px; color: var(--scr-dim); }
.fbox.lock { background: #101418; }
.fbox.lock .v { color: #4b5660; }
.farrow { align-self: center; color: #3f5260; font-family: var(--px8); font-size: 8px; }
.diagline { margin-top: 2px; line-height: 14px; max-height: 28px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.empty { padding: 20px 10px; text-align: center; color: var(--scr-dim); line-height: 18px; }

/* create-ad window inside the left screen */
.win { position: absolute; inset: 0; background: rgba(5,9,13,.75); z-index: 10; display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; }
.win .box { width: 364px; max-height: calc(100% - 8px); overflow-y: auto; background: #101b25; border: 2px solid var(--fb); box-shadow: 4px 4px 0 rgba(0,0,0,.6); }
.win .ttl { height: 16px; background: var(--fb); color: #fff; display: flex; align-items: center; padding: 0 4px; }
.win .ttl .x { margin-left: auto; background: transparent; border: 0; color: #fff; cursor: pointer; }
.win .rows { padding: 4px 6px; display: flex; flex-direction: column; gap: 4px; }
.win .row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.win .prods { max-height: 34px; overflow-y: auto; align-content: flex-start; }
.win .prods > b { align-self: flex-start; }
.win .row > b { font-weight: normal; color: var(--scr-dim); width: 36px; flex: none; }
.win .hint { line-height: 14px; color: var(--amber); padding-left: 40px; min-height: 14px; }
.win .foot { display: flex; justify-content: flex-end; gap: 4px; padding: 4px 6px 6px; }

/* shop: products */
.plist { padding: 4px; display: flex; flex-direction: column; gap: 4px; height: 100%; overflow-y: auto; box-sizing: border-box; }
.prow { background: #0f1d17; border: 2px solid #1d3a2a; padding: 4px; display: grid; grid-template-columns: 32px 1fr auto; gap: 2px 6px; align-items: center; cursor: pointer; }
.prow.sel { border-color: var(--good); }
.prow img { width: 32px; height: 32px; image-rendering: pixelated; grid-row: span 2; background: #0a1118; }
.prow .px { grid-column: 2 / span 2; font-family: var(--px8); font-size: 8px; line-height: 10px; color: #79a58c; }
.price { display: inline-flex; align-items: center; gap: 3px; }
.price b { font-weight: normal; color: #fff; min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.prow .comp { grid-column: 2 / span 2; display: flex; gap: 3px; flex-wrap: wrap; }
.prow .comp .chip { font-family: var(--px8); font-size: 8px; height: 10px; line-height: 10px; }
.prow .comp .chip.comp { font-family: var(--px); font-size: 12px; height: 14px; line-height: 14px; cursor: pointer; }
button.chip.comp[aria-pressed="true"] { background: #2f8a55; color: #fff; }
.app { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; background: #0f1d17; border: 2px solid #1d3a2a; padding: 4px 6px; }
.app.locked { opacity: .55; }
.app .d { font-family: var(--px8); font-size: 8px; line-height: 10px; color: #79a58c; }
/* shop: live */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px 6px; }
.tile { background: #0f1d17; border: 2px solid #1d3a2a; padding: 2px 5px; }
.tile .k { color: #79a58c; }
.tile .v { font-size: 24px; line-height: 24px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile.flash { animation: flash .5s steps(2) 2; }
@keyframes flash { 50% { border-color: var(--good); background: #183a24; } }
.chart { margin: 0 6px; height: 56px; border-bottom: 2px solid #1d3a2a; display: flex; align-items: flex-end; gap: 2px; }
.chart .b { flex: 1; background: #2a6a45; min-height: 2px; }
.chart .b.now { background: var(--amber); }
.axis { display: flex; justify-content: space-between; margin: 2px 6px 0; color: #4f7262; font-family: var(--px8); font-size: 8px; }
.feed { margin: 3px 6px 0; display: flex; flex-direction: column; gap: 2px; }
.feed div { display: flex; gap: 6px; height: 14px; align-items: center; white-space: nowrap; overflow: hidden; }
.feed div.new { background: #163d22; animation: slidein .3s steps(3); }
.feed .t { color: #79a58c; } .feed .m { margin-left: auto; color: var(--good); }
@keyframes slidein { from { transform: translateX(24px); opacity: .2; } }
.live { width: 6px; height: 6px; background: #ff5a4a; animation: blink .8s steps(2) infinite; }

/* phone */
.phone { background: #f3ede0; color: #2a2522; }
.phone::after { box-shadow: inset 0 0 10px rgba(0,0,0,.25); background: none; }
.ph-status { height: 10px; display: flex; justify-content: space-between; padding: 0 3px; font-family: var(--px8); font-size: 8px; line-height: 10px; color: #6a5f55; }
.ph-img { height: 60px; background: #f2c9c0; display: grid; place-items: center; }
.ph-img img { width: 48px; height: 48px; image-rendering: pixelated; }
.ph-body { padding: 3px 4px; display: flex; flex-direction: column; gap: 3px; }
.ph-title { line-height: 12px; height: 24px; overflow: hidden; }
.ph-price { display: flex; align-items: baseline; gap: 4px; }
.ph-price b { font-weight: normal; color: #c23b2a; }
.ph-price s { font-family: var(--px8); font-size: 8px; color: #9a8f84; }
.ph-small { font-family: var(--px8); font-size: 8px; line-height: 10px; color: #9a8f84; }
.ph-ship { font-family: var(--px8); font-size: 8px; line-height: 10px; color: #6a5f55; }
.ph-btn { height: 18px; line-height: 18px; text-align: center; color: #fff; background: #2a2522; box-shadow: inset 0 -2px 0 #000; }
.ph-btn.alt { background: #c23b2a; box-shadow: inset 0 -2px 0 #7a2015; }
.ph-stars { font-family: var(--px8); font-size: 8px; line-height: 10px; color: #b98a1a; }
.ph-cd { background: #c23b2a; color: #fff; text-align: center; height: 14px; line-height: 14px; font-variant-numeric: tabular-nums; }
.ph-free { background: #2f8a55; color: #fff; text-align: center; height: 14px; line-height: 14px; }
.ph-bundle { font-family: var(--px8); font-size: 8px; line-height: 10px; color: #c23b2a; border: 1px dashed #c23b2a; text-align: center; }
.ph-badge { font-family: var(--px8); font-size: 8px; line-height: 10px; color: #4a6a8a; text-align: center; }
.ph-empty { padding: 50px 8px; text-align: center; color: #9a8f84; line-height: 16px; }
.ph-note { position: absolute; left: 3px; right: 3px; top: -44px; background: #222a30; color: #e8eef2; padding: 3px; border: 2px solid #3a4650; font-family: var(--px8); font-size: 8px; line-height: 10px; transition: top .25s steps(4); z-index: 2; }
.ph-note b { font-weight: normal; color: var(--good); }
.ph-note.show { top: 12px; }
#phone.buzz { animation: buzz .3s steps(2) 2; }
@keyframes buzz { 0% { transform: translateX(-2px); } 100% { transform: translateX(2px); } }

/* desk */
.note { position: absolute; background: #f2d36a; color: #3a2a12; padding: 4px 5px; line-height: 14px; box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.note b { font-weight: normal; color: #a22a18; }
.lcd { position: absolute; font-family: var(--px8); font-size: 8px; line-height: 8px; color: #2b3622; text-align: right; }
.lcd.low { color: #a22a18; animation: blink .6s steps(2) infinite; }
.energy { position: absolute; z-index: 3; background: #14100c; border: 2px solid #6b4a2a; box-shadow: 2px 2px 0 rgba(0,0,0,.5), 0 0 10px rgba(242,196,106,.35); padding: 2px 4px 3px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.energy .row1 { display: flex; justify-content: space-between; align-items: baseline; color: #e9c48a; line-height: 12px; }
.energy b { font-weight: normal; color: #ffe27a; text-shadow: 0 0 4px rgba(255,226,122,.6); }
.energy i { display: block; height: 4px; background: #3a2a1e; }
.energy u { display: block; height: 4px; background: #f2c46a; text-decoration: none; }
.energy.low { border-color: #b33a2e; animation: blink .6s steps(2) infinite; }
.energy.low b { color: #ff6a5a; } .energy.low u { background: #ff6a5a; }
.lamp-tag { position: absolute; z-index: 4; border: 0; padding: 2px 6px; background: #f2c46a; color: #3a1810; box-shadow: 2px 2px 0 rgba(0,0,0,.5); cursor: pointer; white-space: nowrap; }
.lamp-tag::after { content: ''; position: absolute; left: 20px; top: -8px; border: 4px solid transparent; border-bottom-color: #f2c46a; }
.lamp-tag.flash { animation: hl .7s steps(2) 4; }
.pig-label { position: absolute; font-family: var(--px8); font-size: 8px; line-height: 8px; color: #fff; background: #6b2e21; padding: 1px 2px; }
.hit { position: absolute; background: transparent; border: 0; cursor: pointer; padding: 0; }
.hit:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap; background: #1b1716; color: #f0e2c4; border: 2px solid #6b4a2a; padding: 2px 5px; z-index: 30; }
.fu-wrap { position: absolute; width: 72px; height: 100px; transform-origin: 36px 0; animation: swing 2.4s steps(6) infinite alternate; z-index: 4; cursor: pointer; }
.fu-string { position: absolute; left: 35px; top: 0; width: 2px; height: 10px; background: #d8b25a; }
.fu-paper { position: absolute; left: 12px; top: 16px; width: 48px; height: 48px; transform: rotate(45deg); background: #c8302a;
  box-shadow: inset 0 0 0 2px #f2c46a, inset 0 0 0 4px #c8302a, inset 0 0 0 6px #8a1e18, 0 0 22px rgba(255,90,60,.6), 4px 4px 0 rgba(0,0,0,.45); }
.fu-paper span { position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(135deg); font-size: 48px; line-height: 48px; color: #ffd75a; text-shadow: 2px 2px 0 #6b1d14, 0 0 10px rgba(255,215,90,.6); }
.fu-tassel { position: absolute; left: 33px; top: 74px; width: 6px; height: 20px; background: repeating-linear-gradient(to right, #c8302a 0 2px, #9b2218 2px 4px); box-shadow: 0 -4px 0 #f2c46a; }
@keyframes swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.fu-wrap.jolt { animation: jolt .5s steps(5); }
.fu-wrap.jolt .fu-paper { background: #e8402e; box-shadow: inset 0 0 0 2px #fff2b0, inset 0 0 0 4px #e8402e, inset 0 0 0 6px #8a1e18, 0 0 40px rgba(255,200,80,.9), 4px 4px 0 rgba(0,0,0,.45); }
@keyframes jolt { 0% { transform: rotate(-16deg) scale(1.15); } 50% { transform: rotate(14deg) scale(1.1); } 100% { transform: rotate(0) scale(1); } }

.clockdev { position: absolute; display: flex; align-items: center; gap: 6px; }
.led { width: 96px; height: 28px; background: #0e0f10; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.led .tm { font-size: 24px; line-height: 22px; color: #ff4a3a; text-shadow: 0 0 6px rgba(255,74,58,.6); font-variant-numeric: tabular-nums; }
.led .zn { font-family: var(--px8); font-size: 8px; line-height: 8px; color: #b04a3a; white-space: nowrap; }
.tbtns { display: flex; gap: 4px; }
.tbtn { min-width: 26px; height: 22px; border: 0; padding: 0 4px; color: #3a1810; background: #e7c9a2; box-shadow: inset 0 -4px 0 #a9825c, 0 2px 0 #3a1810; cursor: pointer; }
.tbtn[aria-pressed="true"] { background: #f2c46a; box-shadow: inset 0 -2px 0 #a9825c; transform: translateY(2px); }
.tbtn.big { min-width: 78px; background: #f2c46a; }

/* speech bubble */
.bubble { position: absolute; left: 520px; top: 14px; width: 270px; background: #1b1716; border: 2px solid #6b4a2a; color: #f0e2c4; padding: 7px 8px 5px; line-height: 14px; box-shadow: 4px 4px 0 rgba(0,0,0,.5); z-index: 12; cursor: pointer; display: none; }
.bubble.show { display: block; }
.bubble .who { position: absolute; left: 8px; top: -12px; background: #7a2a1e; color: #f2d9a8; padding: 0 5px; line-height: 14px; }
.bubble .more { position: absolute; right: 5px; bottom: 1px; color: var(--amber); font-family: var(--px8); font-size: 8px; animation: blink .8s steps(2) infinite; }
.bubble .choices { display: flex; gap: 6px; margin-top: 6px; }
.bubble .choices button { border: 0; padding: 2px 8px; background: #e7c9a2; color: #3a1810; box-shadow: inset 0 -2px 0 #a9825c; cursor: pointer; }
.bubble.day::after { content: ''; position: absolute; right: -10px; top: 14px; border: 5px solid transparent; border-left-color: #6b4a2a; }
.bubble.wechat { border-color: #2f8a55; left: 250px; top: 464px; width: 330px; }
.bubble.wechat .who { background: #2f8a55; color: #fff; }
.bubble.self { border-color: #5a6a8a; background: #161a22; color: #d8e0ee; left: 40px; top: 360px; width: 330px; }
.bubble.self .who { background: #3a4a6a; color: #e8eef6; }
.bubble.self::after { content: ''; position: absolute; left: 18px; bottom: -10px; border: 5px solid transparent; border-top-color: #5a6a8a; }

/* FX */
#combo { position: absolute; left: 520px; top: 12px; width: 188px; height: 56px; pointer-events: none; display: none; z-index: 5; }
#combo canvas { position: absolute; left: 0; bottom: 0; width: 188px; height: 40px; image-rendering: pixelated; }
#combo .txt { position: absolute; left: -20px; right: -20px; top: 16px; text-align: center; font-size: 24px; line-height: 24px; color: #ffe27a;
  text-shadow: 2px 0 #9b2a16, -2px 0 #9b2a16, 0 2px #9b2a16, 0 -2px #9b2a16, 4px 4px 0 #3a0e06; }
#combo.pop .txt { animation: pop .3s steps(3); }
#combo.big .txt { font-size: 36px; line-height: 36px; top: 4px; color: #fff2b0; }
@keyframes pop { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
#fxc { position: absolute; inset: 0; width: 960px; height: 540px; image-rendering: pixelated; pointer-events: none; z-index: 6; }
.screen.glow { box-shadow: 0 0 0 2px var(--good), 0 0 36px rgba(111,224,138,.8); animation: scrglow .4s steps(2) infinite; overflow: hidden; }
@keyframes scrglow { 50% { box-shadow: 0 0 0 2px #fff2b0, 0 0 48px rgba(255,226,122,.9); } }
.float { position: absolute; font-size: 12px; color: var(--good); text-shadow: 2px 2px 0 #0b2a16; pointer-events: none; animation: rise 1.2s steps(8) forwards; z-index: 7; white-space: nowrap; }
.float.bad { color: var(--bad); text-shadow: 2px 2px 0 #2a0b08; }
@keyframes rise { to { transform: translateY(-48px); opacity: 0; } }
#mile { position: absolute; left: 0; right: 0; top: 190px; text-align: center; pointer-events: none; z-index: 8; display: none; }
#mile .big { font-size: 72px; line-height: 72px; color: #ffe27a; text-shadow: 4px 0 #9b2a16, -4px 0 #9b2a16, 0 4px #9b2a16, 0 -4px #9b2a16, 8px 8px 0 #3a0e06; }
#mile .small { margin-top: 8px; display: inline-block; font-size: 24px; line-height: 24px; color: #fff; background: #9b2a16; padding: 4px 10px; box-shadow: 4px 4px 0 #3a0e06; }
#mile.show { display: block; animation: mile 1.6s steps(8) forwards; }
#ach { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 9; pointer-events: none; display: none; background: #2a1e10; color: #ffe27a; border: 2px solid #ffe27a; box-shadow: 4px 4px 0 #000; padding: 4px 12px; text-align: center; white-space: nowrap; }
#ach small { display: block; color: #e8dcc0; font-family: var(--px8); font-size: 8px; line-height: 10px; }
#ach.show { display: block; animation: achin 3s steps(6) forwards; }
body.mobile #ach { top: 72px; }
@keyframes achin { 0% { opacity: 0; margin-top: -16px; } 10%, 85% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: 0; } }
.paper .book { max-height: 330px; overflow-y: auto; }
.paper .bk { margin-bottom: 6px; } .paper .bk b { font-weight: normal; color: #b33a2e; display: block; border-bottom: 2px dotted #cdb98f; }
.paper .bk p { margin: 3px 0 0; line-height: 16px; } .paper .bk p.dim { color: #a8957a; }
.paper .fired { display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; }
.paper .fired img { width: 96px; height: 84px; image-rendering: pixelated; flex-shrink: 0; background: #cdb98f; box-shadow: 3px 3px 0 #8a7458; }
.paper .why p { margin: 3px 0 0; line-height: 16px; }
.paper .achs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; max-height: 300px; overflow-y: auto; margin-top: 6px; }
.paper .achs div { border-bottom: 2px dotted #cdb98f; padding: 2px 0; line-height: 14px; }
.paper .achs b { font-weight: normal; color: #b33a2e; } .paper .achs .lock b { color: #a8957a; }
.paper .achs small { display: block; color: #8a7458; font-family: var(--px8); font-size: 8px; line-height: 10px; }
@keyframes mile { 0% { transform: scale(2.4); opacity: 0; } 15% { transform: scale(.9); opacity: 1; } 25% { transform: scale(1.05); } 80% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
#frame.shake { animation: shake .45s steps(6); }
@keyframes shake { 0% { transform: translate(-8px, 4px); } 25% { transform: translate(8px, -6px); } 50% { transform: translate(-6px, -4px); } 75% { transform: translate(6px, 6px); } 100% { transform: translate(0, 0); } }
#goldflash { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
#goldflash.on { animation: gflash .6s steps(3); }
@keyframes gflash { 0% { box-shadow: inset 0 0 0 16px #ffe27a, inset 0 0 120px rgba(255,226,122,.7); background: rgba(255,240,180,.25); } 100% { box-shadow: none; background: transparent; } }
#dark { position: absolute; inset: 0; background: #02040a; opacity: 0; pointer-events: none; z-index: 9; transition: opacity .6s steps(5); }
#dark.on { opacity: .82; }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s steps(4); z-index: 40; }
#fade.on { opacity: 1; }

/* paper overlay: title, morning report, ending */
#overlay { position: absolute; inset: 0; z-index: 30; background: rgba(4,6,8,.7); display: none; align-items: center; justify-content: center; }
#overlay.show { display: flex; }
.paper { width: 440px; background: #e9dcc0; color: #3a2a1e; padding: 14px 18px 12px; box-shadow: 6px 6px 0 rgba(0,0,0,.6), inset 0 0 0 2px #cdb98f; position: relative; animation: drop .35s steps(4); }
@keyframes drop { from { transform: translateY(-30px); opacity: 0; } }
.paper .stamp { position: absolute; right: 16px; top: 12px; border: 2px solid #b33a2e; color: #b33a2e; padding: 2px 6px; transform: rotate(8deg); }
.paper .stamp.g { border-color: #2f7a4a; color: #2f7a4a; }
.paper .stamp.boom { border-color: #c98a10; color: #fff; background: #d8a020; box-shadow: 0 0 0 2px #e9dcc0, 0 0 0 4px #c98a10; transform: rotate(-6deg) scale(1.15); }
.paper h2 { margin: 0; font-size: 24px; line-height: 28px; font-weight: normal; color: #7a2a1e; }
.paper .sub { color: #8a7458; margin-bottom: 8px; }
.paper .bar2 { height: 4px; background: #b33a2e; margin: 6px 0 8px; }
.paper .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.paper .grid div { display: flex; justify-content: space-between; border-bottom: 2px dotted #cdb98f; line-height: 18px; }
.paper .grid span:first-child { color: #8a7458; }
.paper .big { grid-column: span 2; font-size: 24px; line-height: 30px; }
.paper .pos { color: #2f7a4a; } .paper .neg { color: #b33a2e; }
.paper .memo { margin-top: 8px; background: #f4ead2; padding: 6px 8px; line-height: 16px; border-left: 4px solid #b4553c; }
.paper .memo b { font-weight: normal; color: #7a2a1e; }
.paper .preview { margin-top: 6px; background: #2a2018; color: #f0e2c4; padding: 6px 8px; line-height: 16px; }
.paper .preview b { font-weight: normal; color: var(--amber); display: block; }
.paper .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.pbtn { border: 0; padding: 4px 12px; background: #3a2a1e; color: #f4ead2; box-shadow: inset 0 -3px 0 #1a120c; cursor: pointer; }
.pbtn.hot { background: #b33a2e; box-shadow: inset 0 -3px 0 #6b1d14; }
.paper .title { font-size: 36px; line-height: 40px; color: #7a2a1e; text-shadow: 2px 2px 0 #cdb98f; }
.paper ul { margin: 6px 0 0; padding-left: 18px; line-height: 18px; }

.controls { width: 100%; max-width: 1440px; display: flex; gap: 14px; flex-wrap: wrap; color: var(--paper-dim); justify-content: space-between; }
.controls b { font-weight: normal; color: var(--paper); }
.ctl { border: 0; padding: 3px 8px; background: #2a2f33; color: var(--paper); cursor: pointer; }
/* in-stage menu button */
.menu-btn { position: absolute; left: 924px; top: 6px; width: 30px; height: 26px; z-index: 25; border: 0; padding: 0; font-size: 24px; line-height: 24px; color: #3a1810; background: #e7c9a2; box-shadow: inset 0 -3px 0 #a9825c, 2px 2px 0 rgba(0,0,0,.5); cursor: pointer; }
.paper .menu { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.paper .menu .pbtn { text-align: left; padding: 8px 12px; }
/* phones held sideways: the scene takes the whole screen */
@media (max-height: 520px) and (orientation: landscape) {
  .topline, .controls { display: none; }
  body { padding-block: 2px; gap: 0; }
  #stage-wrap { border-width: 2px; box-shadow: none; }
}
/* touch: bigger invisible hit areas around tiny controls */
@media (pointer: coarse) {
  .bud .btn, .btn.sq, .tog, .tab, button.chip, .tbtn, .btn { position: relative; }
  .bud .btn::after, .btn.sq::after { content: ''; position: absolute; inset: -6px; }
  .tog { border: 6px solid transparent; background-clip: padding-box; margin: -6px; box-sizing: content-box; }
  button.chip::after, .tab::after, .btn:not(.sq)::after { content: ''; position: absolute; inset: -3px; }
  .hit:hover::after { display: none; }
}
/* portrait phones: ask to rotate */
/* phone landscape: the stage crops to the two monitors and the desk props move into a native-size bar at the bottom */
#mhud { display: none; }
body.mobile { padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); gap: 0; justify-content: flex-start; }
body.mobile .topline, body.mobile .controls { display: none; }
body.mobile #stage-wrap { border: 0; box-shadow: none; }
body.mobile #mhud { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 46px; padding: 3px max(6px, env(safe-area-inset-right, 0px)) calc(3px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); box-sizing: content-box; gap: 4px; align-items: stretch; background: #15110d; border-top: 2px solid #3a2a1e; z-index: 40; }
#mhud .mb { border: 0; min-width: 40px; padding: 0 6px; background: #2a2018; color: #f0e2c4; box-shadow: inset 0 -3px 0 #120d09; line-height: 14px; cursor: pointer; white-space: nowrap; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#mhud .mb b { font-weight: normal; color: #ffe27a; }
#mhud .mb.hot { background: #c23b2a; color: #fff; box-shadow: inset 0 -3px 0 #6b1a10; }
#mhud .mb[aria-pressed="true"] { background: #3a6a3a; }
#mhud .mb.low b { color: #ff6a5a; }
#mhud .men i { display: block; width: 44px; height: 4px; background: #000; margin-top: 2px; } #mhud .men u { display: block; height: 100%; background: #6fe08a; }
#mhud .mkpi { flex: 1; min-width: 0; font-size: 12px; line-height: 15px; color: #f0e2c4; display: flex; flex-direction: column; justify-content: center; overflow: hidden; white-space: nowrap; }
#mhud .mkpi b { font-weight: normal; color: #ffe27a; }
#mhud .mclock { display: flex; align-items: center; color: #ff5a4a; font-size: 16px; padding: 0 2px; }
#mhud.day .night-only, #mhud.night .day-only { display: none !important; }
#mhud.day .day-only, #mhud.night .night-only { display: flex !important; }
body.mobile #frame { flex: 1; align-items: center; padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
#mhud .hl { animation: hl .7s steps(2) infinite; }
body.mobile #overlay { position: fixed; z-index: 50; }
body.mobile .paper { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); max-width: calc(100vw - 24px); overflow-y: auto; box-sizing: border-box; }
body.mobile .paper .achs, body.mobile .paper .book { max-height: none; }
body.mobile .bubble { position: fixed; z-index: 45; left: 50% !important; top: auto !important; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(560px, calc(100vw - 24px)) !important; box-sizing: border-box; }
body.mobile .bubble::after { display: none; }
#rotate { position: fixed; inset: 0; z-index: 100; background: rgba(8,10,12,.94); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px max(16px, env(safe-area-inset-left, 0px)); color: var(--paper); }
#rotate .ph { width: 40px; height: 64px; border: 4px solid var(--amber); animation: rot 1.6s steps(4) infinite; }
@keyframes rot { 50%, 100% { transform: rotate(90deg); } }
#rotate b { font-size: 24px; font-weight: normal; color: var(--amber); }
@media (orientation: portrait) and (max-width: 600px) { body:not(.portrait-ok) #rotate { display: flex; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Xiaohongshu Toast & Modal styles */
.xhs-toast {
  position: fixed;
  top: max(20px, env(safe-area-inset-top, 20px));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 26, 0.95);
  color: #fff;
  border: 1px solid #ff2442;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  z-index: 999999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  pointer-events: none;
  transition: opacity 0.3s ease;
  text-align: center;
  white-space: nowrap;
}
.xhs-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.xhs-modal-box {
  background: #171b22;
  border: 2px solid #384252;
  border-radius: 12px;
  max-width: 360px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 16px;
  color: #e5e5e5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  box-sizing: border-box;
}
.xhs-modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #f6e3b0;
  margin-bottom: 10px;
  text-align: center;
}
.xhs-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xhs-modal-body img {
  max-width: 100%;
  max-height: 55vh;
  border-radius: 8px;
  border: 1px solid #384252;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.xhs-modal-tip {
  font-size: 12px;
  color: #94a3b8;
  margin: 10px 0 6px 0;
  text-align: center;
  line-height: 1.5;
}
.xhs-modal-tip b {
  color: #ff2442;
}
.xhs-modal-acts {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.xhs-modal-acts button {
  padding: 8px 28px;
  background: #ff2442;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}