@font-face { font-family: 'Archivo'; src: url(fonts/archivo-wdth.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/plexmono-400.woff2) format('woff2'); font-weight: 400 500; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/plexmono-600.woff2) format('woff2'); font-weight: 600 700; }

/* A Gerstner page: one 8px unit, everything a multiple of it. The tool stays black and white with one red,
   so the only colour on screen belongs to the game being made. */
:root {
  --u: 8px; --tool: #fff; --type: #000; --rule: #000; --soft: #e9e9e6; --mute: #777; --red: #e8290b; --ok: #0a7d3c; --amb: #c98a00;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --paper: #f3f0e8; --ink: #0e0e0e; --hot: #e8391d; --cool: #1d4fd8; --faint: #e0ddd6; --dim: #bbb; --mid: #777;
  --s0: #e8391d; --s1: #1d4fd8; --s2: #777; --s3: #333;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--tool); color: var(--type); font: 400 13px/1.35 var(--sans); overflow: hidden; display: flex; flex-direction: column; }
button, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
kbd { font: inherit; }

#top { flex: none; height: calc(var(--u) * 6); display: flex; align-items: stretch; border-bottom: 2px solid var(--rule); }
#top h1 { margin: 0; padding: 0 calc(var(--u) * 2); font: 900 26px/48px var(--sans); font-stretch: 75%; letter-spacing: -0.01em; text-transform: lowercase; background: var(--type); color: var(--tool); }
#games { align-self: center; margin-left: 12px; height: 32px; max-width: 240px; padding: 0 6px; font: 700 13px var(--sans); background: var(--tool); color: var(--type); border: 2px solid var(--rule); border-radius: 0; }
#credit { align-self: center; margin-left: 12px; font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#views { display: none; }
#samples { display: flex; }
#samples button { padding: 0 calc(var(--u) * 1.5); border-right: 1px solid var(--rule); font-weight: 700; text-align: left; line-height: 1.1; }
#samples button small { display: block; font: 400 10px var(--sans); color: var(--mute); }
#samples button:hover { background: var(--soft); }
#samples button.on { background: var(--red); color: #fff; }
#samples button.on small { color: #fff; }
#samples .new { font-weight: 700; }
.grow { flex: 1; }
#top > button { padding: 0 calc(var(--u) * 2); border-left: 1px solid var(--rule); font-weight: 700; }
#top > button:hover { background: var(--soft); }
#top > button.on { background: var(--type); color: var(--tool); }
.seats { display: flex; align-items: center; gap: 6px; padding: 0 var(--u); font-size: 11px; color: var(--mute); }
.seats select { background: var(--tool); border: 1px solid var(--rule); padding: 2px; color: var(--type); }

#main { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(340px, 34fr) minmax(420px, 46fr) minmax(220px, 20fr); }
#left { position: relative; min-width: 0; display: flex; flex-direction: column; border-right: 2px solid var(--rule); }
#side { min-width: 0; display: flex; flex-direction: column; border-left: 2px solid var(--rule); background: var(--tool); }

/* editor */
#ed { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; font: 400 13px/19px var(--mono); }
.gutter { flex: none; width: 38px; padding-top: 12px; text-align: right; color: #aaa; user-select: none; will-change: transform; }
.gutter div { padding-right: 8px; height: 19px; }
.gutter .ge { background: var(--red); color: #fff; }
.gutter .gw { background: var(--amb); color: #fff; }
.pane { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.hl, .pane textarea { position: absolute; inset: 0; margin: 0; padding: 12px 12px 120px 6px; font: inherit; white-space: pre; tab-size: 2; border: 0; }
.hl { pointer-events: none; color: var(--type); inset: 0 auto auto 0; min-width: 100%; will-change: transform; }
.pane textarea { width: 100%; height: 100%; resize: none; outline: 0; background: transparent; color: transparent; caret-color: var(--type); overflow: auto; }
.pane textarea::selection { background: rgba(232, 41, 11, 0.22); color: transparent; }
.ln { height: 19px; }
.ln i { font-style: normal; }
.ln .d { font-weight: 600; color: var(--red); }
.ln .k { font-weight: 600; }
.ln .v { color: #0a58ca; }
.ln .t { color: #0a7d3c; }
.ln .n { color: #a0009c; }
.ln .s { color: #0a7d3c; }
.ln .a { color: var(--red); font-weight: 600; }
.ln .c { color: #8a8a84; }
.ln u { text-decoration: none; }
.ln .bad { background: var(--red); color: #fff; }
.ln .meh { box-shadow: inset 0 -2px 0 var(--amb); }
.ln.err { background: #fff0ec; }
.ln.warn { background: #fff8e6; }
.ln.why { background: #ffe68a; }
.ln.live { background: var(--type); color: #fff; }
.ln.live i { color: #fff; }
.ac { position: absolute; z-index: 5; list-style: none; margin: 0; padding: 0; min-width: 120px; background: var(--type); color: var(--tool); font: 400 12px/18px var(--mono); }
.ac[hidden] { display: none; }
.ac li { padding: 0 8px; cursor: pointer; white-space: nowrap; }
.ac li.on { background: var(--red); }
.ac li kbd { float: right; margin-left: 16px; font-size: 10px; opacity: 0.7; }
.lens { margin-left: 16px; font: 700 11px var(--sans); color: var(--red); }
.ln.warn .lens { color: var(--amb); }
body.scrub, body.scrub * { cursor: ew-resize !important; user-select: none; }

#problems { flex: none; min-height: 32px; border-top: 2px solid var(--rule); padding: 7px 12px; font-size: 12px; }
#problems.ok span { font-weight: 800; color: var(--ok); margin-right: 4px; }
#problems.bad { background: var(--red); color: #fff; }
#problems.meh { background: #ffefc2; }
#problems button { display: block; width: 100%; text-align: left; padding: 1px 0; font-weight: 700; }
#problems button b { display: inline-block; min-width: 24px; font: 600 11px var(--mono); }
#problems button i { font-style: normal; font-weight: 400; }
#problems .pr { display: flex; align-items: flex-start; gap: 8px; }
#problems .pr button:first-child { flex: 1; min-width: 0; }
#problems button.fix { flex: none; width: auto; padding: 1px 8px; background: #fff; color: #000; font: 600 11px/18px var(--mono); }
#problems button.fix:hover { background: #000; color: #fff; }
#problems button.fix.alt { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; font-weight: 400; }
#problems button.fix.alt:hover { background: #000; color: #fff; box-shadow: none; }
#problems .kept { margin-top: 3px; font-size: 11px; }

#lesson { flex: none; position: relative; border-top: 2px solid var(--rule); background: var(--type); color: var(--tool); padding: 12px 12px 12px 56px; min-height: 96px; }
#lesson .n { position: absolute; left: 12px; top: 6px; font: 900 34px/1 var(--sans); font-stretch: 75%; }
#lesson .n span { display: block; font: 400 10px var(--mono); }
#lesson p { margin: 0 56px 8px 0; font-weight: 600; }
#lesson .ins { display: block; text-align: left; background: var(--tool); color: var(--type); padding: 4px 8px; width: 100%; }
#lesson .ins:hover { background: var(--red); color: #fff; }
#lesson code { font: 400 12px/1.45 var(--mono); }
#lesson .nav { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#lesson .nav button { padding: 4px 14px; background: var(--tool); color: var(--type); font-weight: 800; }
#lesson .nav button:disabled { opacity: 0.35; cursor: default; }
#lesson .nav .next.ready { background: var(--red); color: #fff; }
#lesson .nav .state { flex: 1; font-size: 11px; }
#lesson .x { position: absolute; right: 12px; top: 10px; font-size: 11px; text-decoration: underline; }

#lang { position: relative; min-width: 0; overflow: auto; background: var(--tool); padding: 12px; border-right: 2px solid var(--rule); }
#lang[hidden] { display: none; }
body.lang #main { grid-template-columns: minmax(320px, 1fr) 320px minmax(400px, 1.15fr) minmax(220px, 0.6fr); }
#lang h3 { margin: 0 0 4px; font: 900 34px/1 var(--sans); font-stretch: 75%; }
#lang h4 { margin: 16px 0 4px; font: 800 12px var(--sans); border-top: 2px solid var(--rule); padding-top: 4px; }
#lang pre { margin: 0; font: 400 11px/1.45 var(--mono); white-space: pre-wrap; }
#lang p { margin: 0; font-size: 12px; }
#lang .close { position: absolute; right: 12px; top: 12px; text-decoration: underline; font-size: 11px; }

/* board: everything in here takes the game's own colours */
#board { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); }
.seatbar { flex: none; height: calc(var(--u) * 5); display: flex; align-items: center; gap: 0; border-bottom: 2px solid var(--ink); }
.seat { position: relative; height: 100%; padding: 0 12px 0 14px; display: flex; align-items: center; gap: 6px; border-right: 1px solid var(--ink); }
.seat i { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.seat b { font: 900 22px/1 var(--sans); font-stretch: 75%; }
.seat span { font-size: 11px; }
.seat.on { background: var(--c); color: var(--paper); }
.ph { padding: 0 10px; font: 700 12px var(--sans); }
.sp { flex: 1; }
.tb { height: 100%; padding: 0 10px; border-left: 1px solid var(--ink); font-size: 11px; font-weight: 700; }
.tb:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.tb:disabled { opacity: 0.3; cursor: default; }
.felt { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.felt canvas { display: block; position: absolute; inset: 0; touch-action: manipulation; }
.prompt { flex: none; border-top: 2px solid var(--ink); display: flex; flex-direction: column; min-height: calc(var(--u) * 9); }
.say { padding: 4px 12px 0; font: 600 12px/18px var(--sans); min-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.say.warn { animation: nudge 0.3s; color: var(--hot); }
@keyframes nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 12px 8px; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px 4px 6px; background: var(--ink); color: var(--paper); font-weight: 800; }
.chip kbd { font: 400 10px var(--mono); opacity: 0.7; }
.chip sup { font: 400 10px var(--mono); vertical-align: baseline; opacity: 0.8; }
.chip:hover { background: var(--hot); }
.chip.sel { background: var(--hot); }
.chip.go { background: var(--hot); padding: 10px 18px; font-size: 16px; }
.chip.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); padding: 10px 14px; }
.chip.off { background: transparent; color: var(--ink); opacity: 0.62; box-shadow: inset 0 0 0 1.5px var(--ink); text-decoration: line-through; }

.passcard { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--c); color: #fff; text-align: center; }
.passcard[hidden] { display: none; }
.passcard h2 { margin: 0; font: 900 72px/1 var(--sans); font-stretch: 75%; }
.passcard p { margin: 0; font-weight: 600; }
.passcard button { min-height: 48px; padding: 0 24px; background: #fff; color: #000; font-weight: 800; }
.endcard { position: absolute; left: 0; right: 0; top: 18%; background: var(--ink); color: var(--paper); padding: 16px 20px; }
.endcard h2 { margin: 0; font: 900 64px/1 var(--sans); font-stretch: 75%; letter-spacing: -0.01em; }
.endcard ol { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.endcard li { display: flex; align-items: baseline; gap: 6px; border-left: 6px solid var(--c); padding-left: 8px; }
.endcard li b { font: 900 32px/1 var(--sans); }
.endcard .tg { margin: 0 0 8px; }
.endcard .row { display: flex; gap: 6px; }
.endcard button { background: var(--paper); color: var(--ink); padding: 6px 14px; font-weight: 800; }
.endcard button:hover { background: var(--hot); color: var(--paper); }

/* rules card and bots */
#card { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px; font-size: 12px; line-height: 1.3; }
#side header { display: flex; align-items: baseline; justify-content: space-between; }
#side h3 { margin: 0; font: 900 20px/1 var(--sans); font-stretch: 75%; }
#side header span { font: 400 10px var(--mono); color: var(--mute); }
#card h4 { margin: 8px 0 2px; font: 800 10px var(--sans); text-transform: uppercase; letter-spacing: 0.04em; border-top: 1px solid var(--rule); padding-top: 3px; }
#card p { margin: 0 0 3px; cursor: pointer; }
#card p:hover { background: #ffe68a; }
#card p b { font-weight: 800; }
#card p.dead, #card p.dead b { text-decoration: line-through; color: var(--mute); }
#bal { flex: none; border-top: 2px solid var(--rule); padding: 8px 10px 10px; font-size: 11px; min-height: 160px; max-height: 46%; overflow: hidden; }
#bal.busy { background-image: linear-gradient(90deg, var(--red) 0 30%, transparent 30%); background-size: 100% 2px; background-repeat: no-repeat; }
#bal table { width: 100%; border-collapse: collapse; margin: 4px 0; }
#bal th { text-align: left; font-weight: 400; color: var(--mute); padding: 0; }
#bal td { text-align: right; font: 600 12px var(--mono); padding: 0; white-space: nowrap; }
#bal td i { font-style: normal; font-weight: 400; color: var(--mute); font-size: 10px; }
#bal td.d { width: 30px; font-size: 10px; }
#bal em { font-style: normal; }
#bal em.up { color: var(--ok); }
#bal em.dn { color: var(--red); }
.fires div { display: grid; grid-template-columns: 56px 1fr 26px; align-items: center; gap: 4px; height: 13px; }
.fires span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fires b { display: block; height: 7px; background: var(--type); }
.fires i { font: 400 10px var(--mono); font-style: normal; text-align: right; }
.fires .dead span { text-decoration: line-through; color: var(--red); font-weight: 700; }
.line { margin: 4px 0 0; }
.line span { color: var(--mute); }

body.solo #board { height: 100%; }
.sharelink { width: 100%; font: 400 11px var(--mono); }

/* Play: the editor folds away, so the game has the whole page. */
body.focus #left, body.focus #side, body.focus #lang { display: none; }
body.focus #main { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) {
  #views { display: flex; }
  #views button { padding: 0 12px; border-left: 1px solid var(--rule); font-weight: 700; }
  #views button.on { background: var(--type); color: var(--tool); }
  #views #btn-rules { display: none; }
}

/* The phone: one thing at a time, with targets a thumb can hit. */
@media (max-width: 760px) {
  html, body { overscroll-behavior: none; }
  body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  #top { height: auto; flex-wrap: wrap; align-items: stretch; }
  #top h1 { display: none; }
  #games { flex: 1; min-width: 0; max-width: none; margin: 4px; height: 44px; font-size: 15px; }
  #credit, .grow { display: none; }
  .seats { padding: 0 6px; }
  .seats select { height: 36px; font-size: 15px; }
  #views { display: flex; order: 3; width: 100%; border-top: 1px solid var(--rule); }
  #views button { flex: 1; height: 44px; font-weight: 800; }
  #views button.on { background: var(--type); color: var(--tool); }
  #top > button { height: 44px; padding: 0 10px; font-size: 13px; border-left: 1px solid var(--rule); }
  #btn-lang, #btn-gist { display: none; }
  body:not(.focus) #board { display: none; }
  body:not(.focus):not(.rules) #main { grid-template-columns: minmax(0, 1fr); }
  body.rules #left { display: none; }
  body.rules #main { grid-template-columns: minmax(0, 1fr); }
  body.rules #side { display: flex; border: 0; }
  body.lang #main { grid-template-columns: minmax(0, 1fr); }
  body.lang #lang { display: none; }
  .seatbar { height: 44px; }
  .seat { padding: 0 8px 0 12px; }
  .ph, .tb[data-a=speed] { display: none; }
  .tb { padding: 0 8px; }
  .prompt { min-height: 96px; }
  .say { white-space: normal; max-height: 56px; overflow: auto; font-size: 13px; }
  .chips { flex-wrap: wrap; max-height: 112px; overflow: auto; }
  .chip { min-height: 44px; align-items: center; padding: 0 14px 0 10px; font-size: 15px; }
  .chip.go { flex: 1; justify-content: center; font-size: 17px; }
  .endcard h2 { font-size: 48px; }
  .endcard button { min-height: 44px; }
}

@media (max-width: 1040px) {
  #main { grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.3fr); }
  #side { display: none; }
}
/* With the reference open, the rules column gives up its room: the board stays playable. */
@media (max-width: 1500px) {
  body.lang #main { grid-template-columns: minmax(300px, 1fr) 300px minmax(380px, 1.1fr); }
  body.lang #side { display: none; }
}
@media (max-width: 1040px) {
  body.lang #main { grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); }
  body.lang #board { display: none; }
}