* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0e141b; color: #dde6ee; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
#app { display: flex; height: 100vh; }
#stage { flex: 1; display: flex; flex-direction: column; padding: 12px 16px; min-width: 0; }
header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
h1 { font-size: 20px; margin: 0; letter-spacing: .5px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #8aa0b4; margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; }
.pill { background: #1c2733; border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.dim { color: #7b8d9e; }
/* clips (worklog #22): Save clip / Record in the top bar, a red REC dot while recording */
.clipBar { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.clipBar button { font-size: 13px; padding: 4px 10px; }
.recDot { color: #ff5c6c; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; animation: recBlink 1.2s step-start infinite; }
@keyframes recBlink { 50% { opacity: .45; } }
.clipNote { font-size: 12px; }
#canvasWrap { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
canvas { max-width: 100%; max-height: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: 8px; box-shadow: 0 6px 30px #0008; outline: 3px solid transparent; outline-offset: 2px; }
/* the change animation only tints the border: nothing is drawn over the game */
canvas.morphing { animation: morphBorder 3s ease-in-out; }
@keyframes morphBorder { 0% { outline-color: transparent; box-shadow: 0 6px 30px #0008; } 20%, 75% { outline-color: #ffd166; box-shadow: 0 0 0 6px #ffd16655, 0 0 34px #ffd166aa; } 100% { outline-color: transparent; box-shadow: 0 6px 30px #0008; } }
/* referee status, in the side panel next to the request box */
.statusBox { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.status { background: #142231; border: 1px solid #2c4a66; padding: 7px 10px; border-radius: 6px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.status.fail { background: #3a1016; border-color: #b33a4a; color: #ffd9de; }
.statusDetails { font-size: 12px; color: #7b8d9e; }
.statusDetails summary { cursor: pointer; user-select: none; }
.statusDetails ol { margin: 4px 0 0; padding-left: 18px; max-height: 160px; overflow-y: auto; font-family: ui-monospace, monospace; font-size: 11px; overflow-wrap: anywhere; }
.spinner { width: 12px; height: 12px; border: 2px solid #4fa3ff; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.metaCard { background: linear-gradient(160deg, #fff8e1, #ffe0a3); color: #2b1d00; border-radius: 8px; padding: 10px 12px; animation: chrysalis .5s ease-out both; }
@keyframes chrysalis { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.metaKicker { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: #8a5a00; }
.metaTitle { font-size: 16px; font-weight: 700; margin: 2px 0 4px; }
.metaChangelog { font-size: 13px; }
.metaWho { margin-top: 6px; font-size: 12px; color: #6b4a00; }
.hidden { display: none !important; }
.players { list-style: none; margin: 0; padding: 0; font-size: 13px; color: #b9c7d4; }
.players li { padding: 3px 8px; border-radius: 6px; margin: 2px 0; background: #142130; }
.players li.me { background: #173a22; color: #d6f8df; }
.players li.watching { opacity: .75; }
/* the "now" line and the four tabs */
.now { padding: 7px 10px; border-radius: 6px; background: #142231; font-size: 13px; min-height: 34px; display: flex; gap: 8px; align-items: center; }
.metaLine { background: #1d3a24; color: #c8f7d3; border: 1px solid #2f7a45; animation: chrysalis .5s ease-out both; }
.metaLine .tick { font-weight: 700; color: #3fb950; }
.queueMore summary { cursor: pointer; color: #8aa0b4; font-size: 13px; padding: 3px 0; }
.tabs { display: flex; gap: 4px; margin: 10px 0 8px; border-bottom: 1px solid #1f2c39; }
.tabs .tab { flex: 1; background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; color: #8aa0b4; padding: 6px 4px; font-size: 13px; }
.tabs .tab.on { background: #1a2836; border-color: #2f4357; color: #e8eef2; }
.tabPanel { margin-bottom: 12px; }
.applyRow, .watchRow { align-items: center; gap: 8px; } .applyRow .lbl { margin: 0; white-space: nowrap; } .applyRow select { flex: 1; }
#side { width: 390px; flex: none; background: #121b24; border-left: 1px solid #1f2c39; overflow-y: auto; padding: 12px 14px; }
section { margin-bottom: 16px; }
.lbl { display: block; font-size: 12px; color: #8aa0b4; margin-bottom: 4px; }
.row { display: flex; gap: 6px; margin: 6px 0; }
input { flex: 1; min-width: 0; background: #0c1219; color: #e8eef2; border: 1px solid #2a3a4a; border-radius: 6px; padding: 7px 9px; font: inherit; }
input:focus { outline: none; border-color: #4fa3ff; }
button { background: #223142; color: #dde6ee; border: 1px solid #2f4357; border-radius: 6px; padding: 6px 11px; font: inherit; cursor: pointer; }
button:hover { background: #2b3e53; }
button.primary { background: #1f6feb; border-color: #1f6feb; color: white; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.xcard { background: #4a1820; border-color: #8a2e3c; color: #ffd0d6; font-size: 12px; text-transform: none; letter-spacing: 0; padding: 4px 9px; }
.turn { padding: 7px 10px; border-radius: 6px; background: #1a2836; font-size: 13px; }
.turn.mine { background: #173a22; color: #b9f5c8; }
.turn.busy { background: #2d2a14; color: #f5e7a1; }
.chatLog { height: 210px; overflow-y: auto; background: #0c1219; border: 1px solid #1f2c39; border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.chatLog .m { margin: 3px 0; word-wrap: break-word; }
.chatLog .who { color: #79b8ff; font-weight: 600; }
.chatLog .sys { color: #c9b26b; }
.chatLog .req { color: #d2a8ff; }
.chatLog .prog { color: #7b8d9e; font-size: 12px; }
.rules { white-space: pre-wrap; background: #0c1219; border: 1px solid #1f2c39; border-radius: 6px; padding: 8px 10px; font-size: 13px; max-height: 220px; overflow-y: auto; }
.controls { margin: 0; padding-left: 0; list-style: none; }
.controls li { margin: 3px 0; font-size: 13px; }
kbd { background: #223142; border: 1px solid #3a5068; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 12px; font-family: ui-monospace, monospace; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { border-left: 3px solid #2f4357; padding: 5px 8px; margin: 4px 0; background: #0f171f; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 12.5px; }
.timeline li:hover { background: #16222e; }
.timeline li.active { border-left-color: #3fb950; background: #12261a; cursor: default; }
.timeline li.failed { opacity: .55; border-left-color: #8a2e3c; cursor: default; }
.timeline li.rollback { border-left-color: #d29922; }
.timeline .v { font-weight: 700; }
.timeline .meta2 { color: #7b8d9e; font-size: 11.5px; }

.timeTravel { font-size: 12px; margin: 4px 0 8px; }
.timeTravel.mine { color: #3fb950; opacity: 1; }
.timeline.locked li { cursor: not-allowed; }

/* house rules */
.houseRow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; min-height: 0; }
.hcard { background: linear-gradient(160deg, #fff8e1, #ffe7b0); color: #2b1d00; border-radius: 8px; padding: 6px 10px; max-width: 300px; font-size: 13px; box-shadow: 0 2px 8px #0006; }
.hcard .hauthor { color: #7a5200; font-style: italic; white-space: nowrap; }
.hcard .hbadge { font-size: 11px; color: #8a5a00; margin-top: 2px; }
.hcard .hreason { font-size: 11.5px; color: #8a2e3c; margin-top: 2px; }
.hcard.facedown { background: repeating-linear-gradient(135deg, #28408f 0 6px, #3e5bc2 6px 12px); color: #eef2ff; cursor: pointer; border: 2px solid #dfe6ff; }
.hcard.facedown .hauthor { color: #dfe6ff; }
.hcard.facedown.selected { outline: 3px solid #ffd166; }
.hcard.mysecret { border: 2px dashed #8a5a00; }
.hcard.retired { opacity: .6; filter: grayscale(.8); }
.hcard.retired .htext { text-decoration: line-through; }
.hcard.wiring { opacity: .8; }
.hcard.fired { animation: hfire 1.2s ease-out; }
@keyframes hfire { 0% { box-shadow: 0 0 0 0 #ffd166; transform: scale(1.06); } 100% { box-shadow: 0 0 0 14px #ffd16600; transform: scale(1); } }
#houseToast { background: #fff3c4; color: #2b1d00; border: 1px solid #d29922; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.switch { font-size: 12px; text-transform: none; letter-spacing: 0; color: #dde6ee; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.houseEarn { padding: 6px 10px; border-radius: 6px; background: #1a2836; font-size: 13px; }
.houseEarn.mine { background: #3a2f0d; color: #ffe08a; }
.chk { font-size: 12px; color: #9fb3c8; display: flex; gap: 6px; align-items: center; }
#revealAllBtn { margin-top: 6px; font-size: 12px; }
.hcard.facedown .hreason, .hcard.facedown .hbadge { color: #fff; background: #1b2a5ccc; border-radius: 4px; padding: 1px 4px; display: inline-block; }
.hcard.facedown.retired .htext { text-decoration: none; }

/* ---------- phones and touch ---------- */
#reqSec { margin-bottom: 0; }
.touchPad { display: none; }
.touchPad button { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
  .touchPad:not(.empty) { display: flex; }
}
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  html, body { height: auto; min-height: 100%; overflow-x: hidden; }
  body { font-size: 15px; -webkit-text-size-adjust: 100%; }
  /* one column: the game, the touch buttons, the request box, then everything else */
  #app { flex-direction: column; height: auto; min-height: 100svh; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  #stage, #side { display: contents; }
  #app > * , #stage > *, #side > * { min-width: 0; max-width: 100%; }
  header { order: 1; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
  h1 { font-size: 17px; white-space: nowrap; }
  #gameTitle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #houseRow { order: 2; }
  #canvasWrap { order: 3; flex: none; display: block; text-align: center; }
  canvas { display: inline-block; vertical-align: top; width: auto; height: auto; max-width: 100%; max-height: 72svh; border-radius: 6px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .touchPad:not(.empty) { display: flex; order: 4; }
  #reqSec { order: 5; margin: 6px 0 0; }
  #queueSec { order: 6; margin-top: 6px; }
  #playersSec { order: 7; }
  .resetRow { order: 8; }
  #tabs { order: 9; }
  .tabPanel { order: 10; }
  section { margin-bottom: 12px; }
  /* 16px stops iOS zooming in when an input gets focus */
  input, button { font-size: 16px; }
  input { padding: 9px 10px; }
  button { padding: 8px 12px; min-height: 40px; }
  button.xcard { font-size: 13px; min-height: 34px; }
  .chatLog { height: 130px; }
  .rules { max-height: 260px; }
  .players, .chatLog .m, .timeline li, .rules, .turn { overflow-wrap: anywhere; }
  .tabs .tab { min-height: 40px; }
  /* referee status sits under the game (in the request section), never over it */
  .status, .metaChangelog { font-size: 14px; }
  .hcard { max-width: 100%; }
}
/* touch buttons generated from the cartridge's declared key controls */
.touchPad { flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; justify-content: center; }
.touchPad button { flex: 1 1 120px; min-height: 58px; padding: 6px 8px; font-size: 15px; line-height: 1.15; background: #1a2836; border: 1px solid #3a5068; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.touchPad button .tk { font-size: 22px; font-weight: 700; }
.touchPad button .tl { font-size: 12px; color: #9fb3c8; }
.touchPad button.held { background: #1f6feb; border-color: #4fa3ff; color: #fff; }
.touchPad button.held .tl { color: #dbe9ff; }

.brainRow { align-items: center; gap: 8px; margin-top: 6px; }
.brainRow .lbl { margin: 0; white-space: nowrap; }
.brainRow select { flex: 1; font-size: 14px; padding: 3px 4px; }
@media (max-width: 820px) { .brainRow select { font-size: 16px; } }

/* stage 2: queue, single box, collapsed chat, join card */
.hint { font-size: 11px; margin: -2px 0 4px; }
.queue { list-style: none; margin: 4px 0; padding: 0; max-height: 220px; overflow-y: auto; }
.queue li { display: flex; gap: 6px; align-items: baseline; padding: 4px 6px; margin: 2px 0; border-radius: 6px; background: #142130; font-size: 13px; }
.queue li .qtext { flex: 1; word-break: break-word; }
.queue li .qwho { color: #8aa0b4; font-size: 11px; white-space: nowrap; }
.queue li .qst { font-size: 11px; white-space: nowrap; padding: 1px 6px; border-radius: 9px; background: #23384d; }
.queue li.building .qst { background: #1f6feb; color: #fff; }
.queue li.ready .qst { background: #6a4c00; color: #ffd166; }
.queue li.applied { opacity: .7; } .queue li.applied .qst { background: #1d5d38; color: #b8f5c9; }
.queue li.failed, .queue li.declined { opacity: .7; } .queue li.failed .qst, .queue li.declined .qst { background: #5d1d24; color: #ffc9cf; }
.queue li button.qrm, .queue li button.qup, .queue li button.qdn { padding: 0 6px; font-size: 12px; line-height: 18px; }
.queue li button.qup, .queue li button.qdn { font-size: 10px; } .queue li button:disabled { opacity: .35; cursor: default; }
#queueSec h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.applyLbl { font-size: 11px; font-weight: normal; color: #8aa0b4; display: flex; gap: 4px; align-items: center; }
.applyLbl select { font-size: 12px; }
.chatToggle { margin: 6px 0; }
.chatToggle summary { cursor: pointer; color: #8aa0b4; font-size: 13px; }
.unread:not(:empty) { background: #1f6feb; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.refNote { font-size: 13px; padding: 6px 8px; border-radius: 6px; background: #22303f; color: #ffd166; margin: 4px 0; }
.joinCard { position: fixed; inset: 0; background: rgba(5, 10, 16, .82); display: flex; align-items: center; justify-content: center; z-index: 50; }
.joinCard form { background: #142130; padding: 20px 24px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 260px; }
.joinTitle { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
@media (max-width: 820px) { .applyLbl select, .joinCard input { font-size: 16px; } }

/* credits, prices, the reset button */
.queue li .qprice { font-size: 11px; white-space: nowrap; color: #ffd166; }
.resetRow { margin: 10px 0 0; }
button.bigred { width: 100%; min-height: 48px; font-size: 18px; white-space: nowrap; background: #c62828; border-color: #e53935; color: #fff; font-weight: 800; letter-spacing: .04em; border-radius: 10px; box-shadow: 0 3px 0 #7f1717; }
button.bigred:hover { background: #d32f2f; }
button.bigred:disabled { opacity: .6; cursor: default; }
.resetVote { font-size: 12px; color: #ffb4b4; margin-top: 4px; text-align: center; }
.styleRow { align-items: center; gap: 8px; margin-top: 6px; } .styleRow .lbl { margin: 0; white-space: nowrap; } .styleRow input { flex: 1; min-width: 0; }
.watchRow, .whoRow, .aiRow { align-items: center; gap: 8px; margin-top: 6px; } .whoRow .lbl, .aiRow .lbl { margin: 0; } .whoRow select, .aiRow select { flex: 1; min-width: 0; }
.aiList { font-size: 12px; margin-top: 4px; }
body.spectating #touchPad { display: none; }
.queue li .qtext.secret { font-style: italic; color: #9fb3c8; }
.queue li .qhid { font-size: 11px; color: #8aa0b4; }
.queue li button.qreveal { padding: 0 6px; font-size: 11px; line-height: 18px; }
.turn.locked { background: #3a2a10; color: #ffd166; }
.joinWatchLbl { display: block; margin: 8px 0; font-size: 14px; }
#side section { margin-bottom: 10px; }

.pics { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pics li { display: flex; align-items: center; gap: 8px; background: #142130; border-radius: 6px; padding: 4px 6px; font-size: 13px; }
.pics img { width: 40px; height: 40px; object-fit: contain; background: #0c1219; border-radius: 4px; }
.pics .picWait { width: 40px; font-size: 10px; color: #7b8d9e; }
.pics .picDesc { flex: 1; }
.pics button.reroll { font-size: 16px; padding: 2px 10px; min-height: 32px; }

.newGameSec { margin-bottom: 10px; } .newGameSec select { flex: 1; min-width: 0; } .starterPitch { font-size: 12px; }

.understood { flex-basis: 100%; font-weight: 600; color: #e8eef2; }
/* a surprising reading (removes/closes, reversed, a new genre, ambiguous) stands out before the player confirms */
.readFlag { flex-basis: 100%; padding: 5px 8px; border-radius: 6px; background: #4a3205; border: 1px solid #e0a020; color: #ffd27a; font-weight: 700; }
.understood.flagged { color: #ffd27a; }
.now.reading { justify-content: space-between; color: #cfe0ee; }
.now.reading.flagged { border: 1px solid #e0a020; color: #ffd27a; }
.nowCancel { flex: none; }
.readBody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.readNote { font-size: 12px; color: #9fb3c8; font-weight: 400; }
.now.note { background: #1a2836; color: #cfe0ee; border: 1px solid #2f4357; }


/* laws (worklog #15) */
.lawList { margin: 0 0 6px; padding-left: 22px; font-size: 13px; }
.lawList li { margin: 3px 0; } .lawList li .lawBy { color: #8aa0b4; font-size: 12px; } .lawList li button { margin-left: 6px; padding: 0 8px; font-size: 11px; line-height: 18px; }
.lawNote { font-size: 12px; margin: 4px 0 8px; }
.lawVote { padding: 8px 10px; border-radius: 8px; background: #1c2a14; border: 1px solid #6a8f2e; color: #e3f5c8; font-size: 13px; }
.lawVoteBtns { gap: 6px; margin-top: 6px; }
.restartBtn { width: 100%; min-height: 36px; margin-bottom: 6px; font-weight: 600; }
.saveNote { font-size: 12px; margin: 4px 0; } .saveNote a, .savedList a { color: #8ecbff; }
.savedList { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: #b9c7d4; } .savedList li { padding: 2px 0; } .savedList .code { font-family: ui-monospace, monospace; color: #ffd166; }

/* lobby / title screen (worklog #17) */
.lobby { position: fixed; inset: 0; background: rgba(6, 12, 18, .94); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 12px; }
.lobbyCard { background: #142130; border: 1px solid #2f4357; border-radius: 14px; padding: 22px 26px; width: min(460px, 100%); display: flex; flex-direction: column; gap: 10px; }
.lobbyTitle { font-size: 30px; font-weight: 800; color: #ffd166; letter-spacing: .02em; }
.lobbySub { color: #9fb3c8; font-size: 14px; margin-top: -6px; }
.lobbyTagline { color: #ffd166; font-size: 15px; font-style: italic; margin-top: -6px; }
.aiDisclosure { color: #7b8d9e; font-size: 12px; }
.lobbyGameLine { font-size: 15px; color: #e8eef2; }
.lobbyPickRow { align-items: center; gap: 8px; } .lobbyPickRow .lbl { margin: 0; } .lobbyPickRow select { flex: 1; min-width: 0; }
.lobbyWho { list-style: none; margin: 0; padding: 0; font-size: 14px; } .lobbyWho li { padding: 4px 8px; margin: 2px 0; border-radius: 6px; background: #1a2836; } .lobbyWho li.me { background: #173a22; }
/* your role: a segmented choice (not an action); the selected half is highlighted, nothing here looks like the primary button */
.lobbyRoleHead { font-size: 12px; color: #9fb3c8; text-transform: uppercase; letter-spacing: .06em; margin-bottom: -4px; }
.lobbyRoles { display: flex; border: 1px solid #2f4357; border-radius: 10px; padding: 3px; background: #0f1a26; gap: 3px; }
.lobbyRoles button { flex: 1; min-height: 38px; font-size: 15px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #9fb3c8; }
.lobbyRoles button.on { background: #24384d; border-color: #ffd166; color: #ffd166; font-weight: 700; }
.lobbyRoles button.on::before { content: '\2713  '; }
/* Start game: the one big primary button; I'm ready: a small secondary one */
.lobbyStartRow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
#lobbyStart { min-height: 52px; font-size: 19px; font-weight: 700; }
#lobbyReady { align-self: center; min-height: 32px; font-size: 13px; background: transparent; border-color: #2f4357; color: #c9d6e3; }
#lobbyReady.on { border-color: #3fb950; color: #3fb950; }
.lobbyHint { font-size: 12px; }
@media (max-width: 820px) { .lobby select { font-size: 16px; } }
/* rotating Designer (worklog #19) */
.turn.designer { background: #2a1f4a; color: #e2d4ff; }
.turn.designer.mine { background: #173a22; color: #b9f5c8; font-weight: 600; }
.passBtn { margin-top: 4px; width: 100%; }
.lookLine { margin: 4px 0 8px; font-size: 13px; }

/* ---------- worklog #23: feedback from the 4-player session ---------- */
/* the rules at a glance, under the game: laws, keys, the latest changes */
.rulesStrip { flex: none; margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; background: #121b24; border: 1px solid #24364a; font-size: 13px; display: flex; flex-direction: column; gap: 4px; max-height: 132px; overflow-y: auto; }
.rsHead { display: flex; align-items: baseline; gap: 8px; }
.rsKicker { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: #ffd166; font-weight: 700; white-space: nowrap; }
.rsTitle { flex: 1; min-width: 0; color: #e8eef2; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.rsOpen { flex: none; padding: 2px 10px; font-size: 12px; background: #2a2410; border-color: #8a6d1a; color: #ffd166; }
.rsLaws { color: #e3f5c8; background: #1c2a14; border: 1px solid #3f5a1c; border-radius: 6px; padding: 3px 8px; }
.rsKeys { display: flex; flex-wrap: wrap; gap: 4px 14px; color: #c9d6e2; }
.rsKey kbd + kbd { margin-left: 2px; }
.rsRecent { list-style: none; margin: 0; padding: 0; color: #b8d8c1; }
.rsRecent li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsRecent li:first-child { color: #d6f8df; }
.rsRecent .tick { color: #3fb950; font-weight: 700; } .rsRecent .rsV { color: #7b8d9e; font-size: 12px; }
/* the Rules tab stands out; "new" when the rules changed while it was closed */
.tabs .tab.rulesTab { color: #ffd166; font-weight: 700; }
.tabs .tab.rulesTab.on { color: #ffe08a; border-color: #8a6d1a; }
.rulesNew { background: #ffd166; color: #2b1d00; border-radius: 9px; padding: 0 6px; font-size: 10.5px; margin-left: 4px; text-transform: uppercase; }
/* the rulebook as flaggable lines */
ol.rules { list-style: none; margin: 0 0 8px; white-space: normal; }
.rules li.ruleLine { display: block; padding: 1px 0; }
.rules li.ruleLine:hover, .controls li:hover { background: #142130; }
button.flagBtn { padding: 0 6px; margin-left: 6px; font-size: 11px; line-height: 17px; min-height: 0; background: transparent; border-color: #3a2a2a; color: #c98b8b; opacity: .55; vertical-align: baseline; }
button.flagBtn::before { content: '⚑'; }
li:hover > button.flagBtn, button.flagBtn:focus { opacity: 1; }
.fixHint { font-size: 12px; margin: -4px 0 6px; }
.fixForm { margin: 6px 0; padding: 7px 9px; border-radius: 8px; background: #2a1a1a; border: 1px solid #7a3a3a; }
.fixWhat { font-size: 13px; color: #ffd0d0; font-weight: 600; }
.fixVote { padding: 8px 10px; border-radius: 8px; background: #2a1a12; border: 1px solid #b0683a; color: #ffe2c8; font-size: 13px; }
.fixVoteBtns { gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.fixOffer { justify-content: space-between; } .fixOffer button { flex: none; }
.queue li .qprice.qfix { color: #9fe8b4; }
/* the change line: 20 s, or until ✕ */
.metaLine .metaText { flex: 1; min-width: 0; }
button.metaClose { flex: none; padding: 0 7px; font-size: 12px; line-height: 18px; min-height: 0; background: transparent; border-color: #2f7a45; color: #c8f7d3; }
/* names and typing */
.players li button.editName, .lobbyWho li button.editName { padding: 0 7px; margin-left: 6px; font-size: 11px; line-height: 18px; min-height: 0; }
/* the label is drawn by CSS so a player line reads as before ("Ana (you) · plays") */
button.editName::before { content: 'Edit name'; }
.players li .typingTag { color: #79b8ff; font-style: italic; font-size: 12px; }
.typingLine { font-size: 12px; color: #79b8ff; margin: 2px 0 4px; }
.nameRow { align-items: center; }
button.takeBack { background: #3a2f0d !important; border-color: #d29922 !important; color: #ffe08a !important; box-shadow: none !important; }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .rulesStrip { order: 7; max-height: none; }
  #fixVote { order: 7; }
  .players li button.editName, button.flagBtn, button.metaClose { min-height: 28px; font-size: 13px; }
}
/* rooms (worklog #24): the room's code in the header (a click copies its link), the invite line in the lobby, the busy / removed card */
button.roomPill { border: 1px solid #2f4357; color: #ffd166; font-weight: 600; cursor: pointer; }
button.roomPill:hover { background: #24384d; }
/* sound (worklog #26): the mute toggle in the header */
button.muteBtn { border: 1px solid #2f4357; cursor: pointer; font-size: 14px; line-height: 1; padding: 3px 9px; }
button.muteBtn:hover { background: #24384d; }
button.muteBtn.muted { opacity: 0.7; }
.lobbyInvite { font-size: 13px; color: #c9d6e3; word-break: break-all; } .lobbyInvite .code { color: #ffd166; font-weight: 700; letter-spacing: .08em; }
.lobbyInvite a { color: #4fa3ff; }
.roomGoneCard { background: #142130; padding: 20px 24px; border-radius: 12px; max-width: 420px; display: flex; flex-direction: column; gap: 4px; }
.roomGoneCard p { margin: 4px 0; font-size: 15px; } .roomGoneCard a { color: #4fa3ff; }
/* phones (2026-10-30): the header gained the mute and Report buttons; "connected" is the one pill a phone can do without
   (connecting / reconnecting / disconnected still show, they are .dim), so the game stays at the top on a 360 px screen */
@media (max-width: 480px) { #conn:not(.dim) { display: none; } }