/* GINZA DESK: a trading terminal. Tokens, buttons, the title page and the mode switch come from style.css. */
body.desk #app { max-width: 1500px; height: 100dvh; min-height: 0; }
body.desk.playing { position: static; }
body.desk:not(.playing) #hud, body.desk:not(.playing) #foot { visibility: visible; }
body.desk #hud, body.desk #foot, body.desk .panel { zoom: 1; }
#desk { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
@media (min-width: 900px) { #desk { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: minmax(0, 1fr); gap: 12px; } }

/* ---- the chart ---- */
#chartWrap { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: #050505; overflow: hidden; }
#bar { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; }
#bar b { font-size: 13px; color: var(--fg); letter-spacing: 0.02em; }
#last { color: var(--fg); font-variant-numeric: tabular-nums; }
#chg.dn { color: var(--dim); }
#chg.up { color: var(--fg); }
#lens { margin-left: auto; font-weight: 700; letter-spacing: 0.08em; }
#lens.hot { color: var(--red); }
#chart { flex: 1; min-height: 0; width: 100%; display: block; touch-action: none; }

/* ---- the order side ---- */
#side { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
#ticket { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; background: #070707; font-family: var(--mono); display: flex; flex-direction: column; gap: 6px; min-height: 76px; }
#ticket .t1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#ticket .side { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; }
#ticket .amt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
#ticket .dl { height: 4px; background: var(--line2); border-radius: 2px; overflow: hidden; }
#ticket .dl u { display: block; height: 100%; width: 100%; background: var(--fg); transform-origin: left; text-decoration: none; }
#ticket .dl.late u { background: var(--red); }
#ticket .t2 { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.08em; color: var(--muted); }
#ticket.pending { border-color: var(--fg); }
#ticket .st { color: var(--fg); }
#ticket .st.bad { color: var(--red); }
#ticket .st.good { color: var(--gold); }

#tols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 900px) { #tols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#tols button { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 9px 11px; min-height: 74px; border: 1px solid var(--line2); border-radius: 10px; background: #0a0a0a; color: var(--fg); font-family: var(--mono); text-align: left; transition: transform 0.1s var(--out), border-color 0.15s, opacity 0.15s; }
#tols button:active { transform: scale(0.96); }
#tols button:disabled { opacity: 0.35; }
#tols .k { font-size: 9px; color: var(--dim); }
#tols .tv { font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
#tols .ex { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
#tols .odds { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; display: flex; }
#tols .odds i { display: block; height: 100%; }
#tols .odds .f { background: var(--fg); }
#tols .odds .r { background: #4a4a4a; }
#tols .odds .s { background: var(--red); }
#tols button.best { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
#tols button.best .ex { color: var(--gold); }
#tols button.trap { border-color: rgba(235, 13, 23, 0.55); }
#tols .tag { position: absolute; top: 7px; right: 8px; font-size: 8px; letter-spacing: 0.1em; color: var(--gold); }
#tols button.trap .tag { color: var(--red); }

#log { flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-family: var(--mono); font-size: 10.5px; display: flex; flex-direction: column; gap: 3px; }
#log .row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: baseline; color: var(--muted); white-space: nowrap; }
#log .row b { color: var(--fg); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
#log .row.bad b { color: var(--red); }
#log .row.saw b { color: var(--gold); }
#log .row em { font-style: normal; font-variant-numeric: tabular-nums; }
#log h4 { font-size: 9px; font-weight: 500; letter-spacing: 0.12em; color: var(--dim); padding-bottom: 2px; border-bottom: 1px solid var(--line); }
@media (max-width: 899px) { #log { max-height: 64px; flex: none; } }

/* the budget: what is left to lose, right above the order */
#budget { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 8px; padding: 0 2px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--muted); border-radius: 6px; }
#budget b { font-size: 12px; letter-spacing: 0; color: var(--fg); font-variant-numeric: tabular-nums; }
#budget .bar { grid-column: 1 / -1; display: block; height: 6px; background: var(--line2); border-radius: 3px; overflow: hidden; }
#budget u { display: block; height: 100%; width: 100%; background: var(--fg); text-decoration: none; transition: width 0.3s var(--out); }
#budget.low b { color: var(--red); }
#budget.low u { background: var(--red); }

/* what the three colours of an odds bar mean */
#legend { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--muted); padding: 0 2px; }
#legend:empty { display: none; }
#legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#legend i { width: 7px; height: 7px; display: block; }
#legend .f { background: var(--fg); } #legend .r { background: #4a4a4a; } #legend .s { background: var(--red); }

/* the coach: one line on the chart's lower edge, and a ring on the thing it is about */
#coach { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--gold); border-radius: 10px; background: rgba(0, 0, 0, 0.92); font-family: var(--mono); font-size: 12px; line-height: 1.35; color: var(--fg); pointer-events: none; animation: rise 0.35s var(--out) backwards; }
#coach.tip { border-color: var(--line2); color: #cfcfcf; }
#coach span { flex: 1; min-width: 0; }
#coach button { pointer-events: auto; flex: none; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--muted); }
.spot { animation: spot 1.1s ease-in-out infinite; }
@keyframes spot { 0%, 100% { box-shadow: 0 0 0 0 rgba(227, 193, 79, 0.75); } 70% { box-shadow: 0 0 0 9px rgba(227, 193, 79, 0); } }
#chartWrap { transition: border-color 0.3s; }
#chartWrap.hit { border-color: var(--red); }

/* game over: the panel takes the place of the buttons */
body.desk .panel { position: static; flex: 1; min-height: 0; padding: 4px 2px; }
body.desk .go-break { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-family: var(--mono); }
body.desk .go-break div { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
body.desk .go-break span { display: block; font-size: 8px; letter-spacing: 0.1em; color: var(--muted); }
body.desk .go-break b { font-size: 13px; font-variant-numeric: tabular-nums; }
body.desk .go-break .bot b { color: var(--red); }

/* phone: four narrow buttons in a row: no room for the caption, the tag sits on its own line */
@media (max-width: 899px) {
  #tols .k { display: none; }
  #tols .tag { position: static; order: -1; min-height: 10px; }
  #tols button { padding: 7px 7px 11px; min-height: 78px; }
  #tols .tv { font-size: 17px; }
}
@media (min-width: 900px) {
  #ticket .side { font-size: 22px; } #ticket .amt { font-size: 13px; } #ticket .t2 { font-size: 11px; }
  #tols button { min-height: 92px; padding: 12px 12px 14px; } #tols .tv { font-size: 24px; } #tols .ex { font-size: 12px; } #tols .k, #tols .tag { font-size: 10px; }
  #log { font-size: 12px; } #bar { font-size: 12px; } #bar b { font-size: 15px; }
}
/* the title sits over a live chart: darker than over the pitch, so the text reads */
body.desk #overlay.title { background: rgba(0, 0, 0, 0.9); }

/* ---- second pass: buttons a newcomer can read ---- */
#tols button { touch-action: manipulation; }
#tols .tag { position: static; order: -1; min-height: 10px; font-size: 8px; letter-spacing: 0.1em; color: var(--gold); }
#tols button.trap .tag { color: var(--red); }
#tols button.least { border-color: var(--line2); }
#tols button.least .tag { color: var(--muted); }
#tols .pf { font-size: 10px; color: var(--fg); font-variant-numeric: tabular-nums; }
#tols .ex { white-space: nowrap; overflow: hidden; max-width: 100%; }
#tols .odds { height: 8px; gap: 1px; }
#tols button.picked { opacity: 1; border-color: var(--fg); }
#tols button:disabled:not(.picked) { opacity: 0.28; }
#ticket { min-height: 80px; }
#ticket .t2 { gap: 8px; white-space: nowrap; }
#ticket .t2 .st { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#ticket .st.res { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
#pair, #last, #chg, #lens { flex: none; }
#pool { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#lens.quiet { color: var(--muted); }
body.desk .go-break .top { border-color: var(--fg); }
body.desk .go-break .bot.top { border-color: var(--red); }
@media (max-width: 899px) {
  #pool { display: none; }
  #log { order: -1; max-height: 24px; padding: 4px 10px; }
  #log h4 { display: none; }
  #tols button { min-height: 96px; }
  #tols .tag { font-size: 7.5px; }
}
@media (min-width: 900px) {
  #ticket { min-height: 88px; } #ticket .st.res { font-size: 15px; }
  #tols .odds { height: 10px; } #tols .pf { font-size: 12px; } #tols .tag { font-size: 10px; }
  #legend { font-size: 10px; } #budget { font-size: 10px; } #budget b { font-size: 14px; }
  #coach { font-size: 14px; left: 14px; right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .spot { animation: none; box-shadow: 0 0 0 3px rgba(227, 193, 79, 0.7); } }
@media (max-width: 899px) { #log:not(:has(.row)) { display: none; } }

/* ---- third pass: reasons to keep playing ---- */
/* the multiplier meter: the score engine in plain sight */
#mult { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 2px; font-family: var(--mono); color: var(--dim); }
#mult b { font-size: 16px; line-height: 1; min-width: 2.2em; color: var(--muted); font-variant-numeric: tabular-nums; }
#mult.hot b { color: var(--gold); text-shadow: 0 0 10px rgba(227, 193, 79, 0.6); }
#mult .pips { display: flex; gap: 3px; font-size: 9px; letter-spacing: 0.1em; color: var(--gold); }
#mult .pips u { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--dim); text-decoration: none; }
#mult .pips u.on { background: var(--gold); border-color: var(--gold); }
#mult .track { flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
#mult .track i { height: 5px; background: var(--line2); border-radius: 2px; }
#mult .track i.on { background: var(--gold); }
#mult.off { border: 1px dashed var(--line2); border-radius: 6px; justify-content: center; }
#mult.off span { font-size: 9px; letter-spacing: 0.1em; }
#mult.lost b, #mult.lost .pips { color: var(--red); text-shadow: none; }
#mult.lost .track i { background: var(--red); animation: drain 0.4s var(--out) forwards; }
@keyframes drain { to { background: var(--line2); } }
/* the chase: the next score to beat, and how close */
.stat.next { min-width: 78px; }
.stat.next .lbl { white-space: nowrap; }
.stat.next .bar { display: block; width: 100%; height: 2px; margin-top: 2px; background: var(--line2); }
.stat.next .bar u { display: block; height: 100%; width: 0; background: var(--gold); text-decoration: none; transition: width 0.3s var(--out); }
.stat.next .bar.off u { background: var(--dim); }
#lv { flex: none; padding: 0 5px; border: 1px solid var(--line2); border-radius: 4px; font-size: 10px; color: var(--fg); }
#lv:empty { display: none; }
/* a whale: six times an order */
#ticket.whale { border: 2px solid var(--fg); }
#ticket.whale .side em { font-style: normal; font-size: 10px; letter-spacing: 0.1em; padding: 1px 5px; margin-right: 2px; background: var(--fg); color: #000; border-radius: 3px; vertical-align: middle; }
#ticket .amt em { font-style: normal; color: var(--gold); font-weight: 700; }
/* game over, reordered: RETRY sits under the thumb */
body.desk .go-cause { font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--muted); }
body.desk .go-cause b { display: block; color: var(--red); font-weight: 700; letter-spacing: 0.02em; }
body.desk .go-retry { flex: none; min-height: 64px; flex-direction: column; gap: 2px; }
body.desk .go-retry span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: #fff; mix-blend-mode: difference; }
body.desk .go-links { display: flex; gap: 4px; justify-content: center; margin: -8px 0; }
body.desk .go-links button { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 14px 12px; }
body.desk .go-links button:disabled { opacity: 0.4; }
/* today's tape */
.btn.day { min-height: 52px; border-color: var(--gold); }
.btn.day b { color: var(--gold); }
.btn.day.done { border-color: var(--line2); }
.btn.day.done b { color: var(--fg); }
@media (min-width: 900px) { #mult b { font-size: 20px; } #mult .track i { height: 7px; } }
/* phones: the budget and the multiplier share one row, so the chart keeps its height; RETRY stays where the buttons were */
@media (max-width: 899px) {
  #side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; align-content: start; }
  #side > * { grid-column: 1 / -1; }
  #side > #budget, #side > #mult { grid-column: auto; align-self: center; }
  #mult.off span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #mult .pips { display: none; }
  body.desk .go-retry { order: 9; }
  #side:has(#panel:not([hidden])) #log { display: none; }
}
@media (max-width: 480px) { #chg { display: none; } #bar { gap: 8px; } }
@media (max-width: 340px) { #last { display: none; } }
#ticket .t1 .amt { flex: none; white-space: nowrap; }
.btn.day.done { pointer-events: none; }