/* Breadlands: a board game on a dark table. The island is the hero; everything you press is Hiro's black glass. */
:root {
  --night: #030303;
  --glass: rgba(14, 15, 18, 0.86);
  --glass-solid: rgba(16, 17, 21, 0.97);
  --edge: rgba(255, 255, 255, 0.1);
  --edge-hi: rgba(255, 255, 255, 0.2);
  --text: #f2f3f5;
  --sub: #a3a8b0;
  --dim: #6f747c;
  --ice: #93c9ea;
  --gold: #ffc24a;
  --crust: #e2a04a;
  --bad: #ff6b5e;
  --good: #6fd08a;
  --chrome: linear-gradient(180deg, #ffffff 0%, #f3f4f6 55%, #dfe2e6 100%); /* plain silver: no dark streak (owner) */
  --display: 'Saira', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  --c-red: #e5483f; --c-blue: #3f84e8; --c-green: #3fb653; --c-yellow: #f2c230; --c-purple: #a35ce0; --c-orange: #f08a2c;
  --safe-t: env(safe-area-inset-top, 0px);
  /* The browser's own bars: the game fills the tallest viewport (nothing else shows below it), and everything pinned to
     the bottom is lifted by the space the browser's toolbar can take, so it's never hidden behind it. */
  --bars-b: 0px;
  --safe-b: calc(env(safe-area-inset-bottom, 0px) + var(--bars-b));
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); touch-action: manipulation; } /* no double-tap page zoom */
body {
  margin: 0;
  color: var(--text);
  font: 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, .email { -webkit-user-select: text; user-select: text; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
img { -webkit-user-drag: none; user-select: none; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.ico { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; }

/* ---- The table fills the screen; the guide sits below it ---- */
.game {
  position: relative;
  height: 100vh; height: 100svh; height: 100lvh; min-height: 520px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, #14231f 0%, #0a1311 45%, #040606 100%);
  touch-action: none;
}
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.glass {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: 16px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 8px 16px;
  border-radius: 12px; border: 1px solid var(--edge-hi);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: background .15s, transform .08s, opacity .15s;
}
.btn:hover { background: rgba(255, 255, 255, 0.12); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn.primary { background: var(--chrome); color: #060606; border-color: transparent; box-shadow: 0 6px 18px rgba(255, 255, 255, 0.12); }
.btn.gold { background: linear-gradient(180deg, #ffe08a, #f0a92c 55%, #c97a12); color: #2a1500; border-color: rgba(0,0,0,.3); box-shadow: 0 6px 20px rgba(240, 169, 44, 0.3); }
.btn.danger { border-color: rgba(255, 107, 94, .5); color: #ffb3aa; }
.btn.small { min-height: 34px; padding: 5px 11px; font-size: 13px; border-radius: 10px; }
.btn img { width: 22px; height: 22px; object-fit: contain; }
.iconbtn {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--edge); background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.iconbtn:hover { background: rgba(40, 42, 48, .92); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn .dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px #111; }

/* ---- Top: players (left), buttons (right), news ticker (middle) ---- */
.players {
  position: absolute; z-index: 6;
  top: calc(var(--safe-t) + 10px); left: calc(var(--safe-l) + 10px);
  display: grid; gap: 4px;
  padding: 6px; max-width: min(300px, calc(100vw - 120px));
}
.prow {
  position: relative;
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px;
  padding: 4px 8px 4px 5px; border-radius: 10px;
  border: 1px solid transparent;
}
.prow.turn { background: rgba(255, 255, 255, 0.08); border-color: var(--edge-hi); }
.prow.turn::before { content: ''; position: absolute; left: -6px; top: 50%; width: 4px; height: 60%; transform: translateY(-50%); border-radius: 2px; background: var(--pc); box-shadow: 0 0 10px var(--pc); }
.prow.out { opacity: .4; }
.prow img.m { width: 22px; height: 22px; }
.prow .nm { min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.15; }
.prow .nm span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .nm small { display: block; color: var(--dim); font-weight: 600; font-size: 11px; }
.prow .nm small.away { color: var(--bad); }
.prow .st { display: flex; gap: 8px; font: 600 13px var(--mono); font-variant-numeric: tabular-nums; color: var(--sub); }
.prow .st b { color: var(--text); font-weight: 600; }
.prow .st span { display: inline-flex; align-items: center; gap: 3px; }
.prow .st img { width: 16px; height: 16px; }
.hexi { display: inline-block; width: 12px; height: 13px; background: var(--pc); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.prow .st .coins-col { display: none; }
@media (min-width: 720px) { .prow .st .coins-col { display: inline-flex; } }
@media (max-width: 719px) { .players { max-width: calc(100vw - 200px); } .topright { gap: 4px; } .topright .iconbtn { width: 38px; height: 38px; } .prow { grid-template-columns: 20px minmax(0, 1fr) auto; padding: 3px 6px 3px 4px; } .prow .nm { font-size: 13px; } }

/* Pixel emotes pop up beside the player's name: three pop frames, then a bobbing idle loop. */
.emote {
  position: absolute; left: calc(100% + 4px); top: 50%; z-index: 2;
  width: 40px; height: 40px; margin-top: -22px;
  image-rendering: pixelated;
  background-repeat: no-repeat; background-size: auto 40px;
  animation: e-pop .3s steps(3) forwards, e-idle .66s steps(2) .3s infinite;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.emote.three { animation: e-pop .3s steps(3) forwards, e-idle3 1s steps(3) .3s infinite; }
.emote.bye { animation: e-out .25s ease-in forwards; }
@keyframes e-pop { from { background-position: 0 0; } to { background-position: -120px 0; } }
@keyframes e-idle { from { background-position: -120px 0; } to { background-position: -200px 0; } }
@keyframes e-idle3 { from { background-position: -120px 0; } to { background-position: -240px 0; } }
@keyframes e-out { to { opacity: 0; transform: translateY(-8px) scale(.8); } }

.topright {
  position: absolute; z-index: 7;
  top: calc(var(--safe-t) + 10px); right: calc(var(--safe-r) + 10px);
  display: flex; gap: 6px;
}
.ticker {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
  top: calc(var(--safe-t) + 12px);
  max-width: min(440px, calc(100vw - 420px));
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; color: var(--sub); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .3s;
}
@media (max-width: 860px) { .ticker { display: none; } }

/* ---- Bottom: your kingdom and what you can do ---- */
.dock {
  position: absolute; z-index: 6;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 10px);
  width: min(760px, calc(100vw - 20px));
  padding: 10px;
  display: grid; gap: 8px;
}
.me { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 4px; }
.me .res { display: inline-flex; align-items: center; gap: 6px; font: 600 17px var(--mono); font-variant-numeric: tabular-nums; }
.me .res img { width: 28px; height: 28px; object-fit: contain; }
.me .res small { font: 600 12px var(--body); color: var(--sub); }
.me .res.warn b { color: var(--bad); }
.me .timer { margin-left: auto; font: 600 13px var(--mono); color: var(--sub); }
.me .timer.low { color: var(--bad); }
.status { padding: 0 4px; font-size: 14px; color: var(--sub); min-height: 21px; }
.status b { color: var(--text); }
.status.alert { color: #ffd2cc; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions .btn { flex: 1 1 auto; }
.actions .btn.roll { flex: 3 1 auto; min-height: 50px; font-size: 18px; }
.actions .btn.roll img { width: 30px; height: 30px; }
@media (max-width: 520px) {
  .actions .btn { padding: 8px 10px; font-size: 14px; }
  .me { gap: 10px; }
  .me .res { font-size: 15px; }
  .me .res img { width: 24px; height: 24px; }
}

/* ---- Dialogs (market, trade, offers, menus) ---- */
.scrim { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.5); }
.dialog {
  width: min(460px, 100%); max-height: calc(100% - 16px); overflow: auto;
  padding: 20px; display: grid; gap: 14px;
  background: var(--glass-solid);
}
.dialog h2 { margin: 0; font: italic 900 26px/1 var(--display); text-transform: uppercase; }
.dialog p { margin: 0; color: var(--sub); }
.dialog .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dialog .row .btn { flex: 1 1 auto; }
.kv { display: flex; justify-content: space-between; gap: 12px; color: var(--sub); }
.kv b { color: var(--text); font-family: var(--mono); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper .val { min-width: 64px; text-align: center; font: 600 22px var(--mono); }
.stepper .btn { min-width: 44px; padding: 6px 10px; }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 700; }

.who { display: flex; gap: 6px; flex-wrap: wrap; }
.who button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--edge); background: rgba(255,255,255,.04); font-weight: 600; font-size: 14px; }
.who button[aria-pressed="true"] { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 22%, transparent); }
.who img { width: 20px; height: 20px; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(255,255,255,.03); }
.side .line { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px; }
.side .line img { width: 22px; height: 22px; }
.mini { display: flex; align-items: center; gap: 4px; }
.mini button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--edge); background: rgba(255,255,255,.05); font-weight: 700; }
.mini .v { min-width: 34px; text-align: center; font: 600 15px var(--mono); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 2px; border-radius: 8px; border: 1px solid var(--edge); background: rgba(255,255,255,.04); font: 600 12px var(--mono); }
.chip img { width: 22px; height: 25px; }
.chip[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 194, 74, .16); }
@media (max-width: 460px) { .sides { grid-template-columns: 1fr; } }

.offer { position: absolute; z-index: 15; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 64px); width: min(420px, calc(100vw - 20px)); padding: 14px; display: grid; gap: 10px; animation: drop .3s cubic-bezier(.2,1.4,.4,1); }
.offer .deal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-size: 14px; }
.offer .deal > div { padding: 8px; border-radius: 10px; background: rgba(255,255,255,.05); }
.offer .deal small { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
@keyframes drop { from { transform: translate(-50%, -20px); opacity: 0; } }

/* ---- Dice: thrown onto the table, tumbling until they settle ---- */
.dicetray { position: absolute; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; transition: opacity .6s; }
.dicetray.fade { opacity: 0; }
.dicetray .die { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.dicetray .die.landed { animation: settle .3s ease-out; }
.dicetray .dshadow { position: absolute; left: 0; top: 0; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); will-change: transform; }
@keyframes settle { 50% { filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)) brightness(1.25); } }

/* ---- Plain-words notes about what just happened ---- */
.note {
  position: absolute; z-index: 13; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 190px);
  width: max-content; max-width: calc(100vw - 24px); padding: 8px 16px;
  font-size: 14px; line-height: 1.4; text-align: center; color: var(--text);
  animation: drop .25s ease-out; transition: opacity .4s;
}
.note.good { border-color: rgba(255, 194, 74, .55); }
.note.bad { border-color: rgba(255, 107, 94, .6); }
.note.bye { opacity: 0; }

/* ---- Your turn, step by step ---- */
.steps { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px; }
.step { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--dim); border: 1px solid var(--edge); }
.step.done { color: var(--sub); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.step.now { color: #060606; background: #f2f3f5; border-color: transparent; }
.steps.waiting .step.now { background: rgba(255,255,255,.1); color: var(--text); border-color: var(--edge-hi); }
.steps .hint { align-self: center; font-size: 12px; color: var(--dim); }
.me .res .rv { display: grid; line-height: 1.05; }
.me .res .rv small { font-size: 11px; white-space: nowrap; }
.hexi.big { width: 22px; height: 24px; }

/* ---- How to play cards ---- */
.howto { display: grid; gap: 12px; text-align: center; }
.howto h2 { margin: 0; }
.howto p { color: var(--sub); font-size: 15px; line-height: 1.5; min-height: 4.5em; }
.howpics { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 78px; }
.howpics img { width: 56px; height: 56px; object-fit: contain; }
.howpics img.hex { width: 64px; height: 74px; }
.dots { display: flex; justify-content: center; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--edge-hi); }
.dots i.on { background: var(--text); }

/* ---- Chat and emotes ---- */
.drawer {
  position: absolute; z-index: 14;
  top: calc(var(--safe-t) + 60px); right: calc(var(--safe-r) + 10px);
  width: min(340px, calc(100vw - 20px)); max-height: min(460px, calc(100% - 240px));
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
}
.drawer header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--edge); font-weight: 700; }
.drawer header label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); font-weight: 600; }
.msgs { overflow-y: auto; padding: 8px 12px; display: grid; gap: 4px; align-content: start; min-height: 120px; }
.msg { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.msg b { color: var(--pc, var(--text)); }
.msg.sys { color: var(--dim); font-size: 12px; }
.say { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--edge); }
.say input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--edge); background: rgba(0,0,0,.35); color: var(--text); font: inherit; }
.emotes { position: absolute; z-index: 14; top: calc(var(--safe-t) + 60px); right: calc(var(--safe-r) + 10px); padding: 10px; display: grid; grid-template-columns: repeat(6, 44px); gap: 4px; }
.emotes button { width: 44px; height: 44px; padding: 2px; border: 1px solid transparent; border-radius: 10px; background: transparent; }
.emotes button:hover { background: rgba(255,255,255,.08); border-color: var(--edge); }
.emotes button span { display: block; width: 40px; height: 40px; image-rendering: pixelated; background-repeat: no-repeat; background-size: auto 40px; background-position: -80px 0; }
.bubble { position: absolute; z-index: 9; right: calc(var(--safe-r) + 10px); top: calc(var(--safe-t) + 60px); max-width: min(300px, calc(100vw - 20px)); padding: 8px 12px; font-size: 14px; animation: drop .25s ease-out; }
.bubble b { color: var(--pc); }

/* ---- Menu, lobby and results cards ---- */
.screen { position: absolute; inset: 0; z-index: 18; display: grid; place-items: center; padding: calc(var(--safe-t) + 64px) 16px calc(var(--safe-b) + 16px); /* room above for the All games button */ overflow: auto; background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.65)); }
.card { width: min(440px, 100%); padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; background: var(--glass-solid); }
.logo { margin: 0; text-align: center; font: italic 900 clamp(38px, 10vw, 54px)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .1em; }
.tag { margin: -4px 0 4px; text-align: center; color: var(--sub); }
.pieces { display: flex; justify-content: center; gap: 6px; margin-top: -6px; }
.pieces img { width: 40px; height: 40px; }
.field { display: grid; gap: 6px; }
.field input, .split input { width: 100%; min-width: 0; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--edge-hi); background: rgba(0,0,0,.35); color: var(--text); font: 600 16px var(--body); }
input.code { text-transform: uppercase; letter-spacing: .3em; font-family: var(--mono); }
.split { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sizes { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--edge); }
.sizes button { flex: 1; min-height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--sub); font-weight: 700; }
.sizes button[aria-pressed="true"] { background: var(--chrome); color: #060606; }
.or { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--edge); }
.small-links { display: flex; justify-content: center; gap: 16px; font-size: 13px; color: var(--sub); }
.small-links a { color: var(--sub); }
.roomcode { text-align: center; font: 600 40px/1 var(--mono); letter-spacing: .25em; padding-left: .25em; }
.seats { display: grid; gap: 6px; }
.seat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(255,255,255,.03); font-weight: 600; }
.seat img { width: 26px; height: 26px; }
.seat small { margin-left: auto; color: var(--dim); font-weight: 600; }
.seat.empty { color: var(--dim); border-style: dashed; }
.results { display: grid; gap: 6px; }
.results .seat b { margin-left: auto; font-family: var(--mono); }
.crown { font-size: 18px; }
.back { position: absolute; top: calc(var(--safe-t) + 12px); left: calc(var(--safe-l) + 12px); z-index: 19; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; border: 1px solid var(--edge); background: var(--glass); text-decoration: none; color: var(--sub); font-weight: 600; font-size: 14px; }
.back svg { width: 16px; height: 16px; }
.back:hover { color: var(--text); }
.toast { position: absolute; z-index: 30; left: 50%; bottom: calc(var(--safe-b) + 190px); transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: var(--glass-solid); border: 1px solid var(--edge-hi); box-shadow: var(--shadow); font-size: 14px; max-width: calc(100vw - 32px); text-align: center; animation: drop .2s ease-out; }
.toast.bad { border-color: rgba(255,107,94,.6); }

/* ---- The guide under the game ---- */
.guide { max-width: 760px; margin: 0 auto; padding: 48px 20px 24px; color: #d6d9de; }
.guide h1 { font: italic 900 34px/1.05 var(--display); text-transform: uppercase; color: var(--text); }
.guide h2 { margin-top: 32px; font-size: 21px; color: var(--text); }
.guide h3 { font-size: 16px; color: var(--text); margin-bottom: 4px; }
.guide li { margin: 6px 0; }
.guide table { border-collapse: collapse; width: 100%; font-size: 14px; }
.guide td, .guide th { padding: 6px 8px; border-bottom: 1px solid var(--edge); text-align: left; }
.guide .tiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.guide .tiles img { width: 48px; height: 55px; }
.guide .more { display: flex; gap: 10px; flex-wrap: wrap; }
.guide .more a { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--edge); text-decoration: none; }
.foot { max-width: 760px; margin: 0 auto; padding: 24px 20px 40px; color: var(--dim); font-size: 13px; }
.foot a { color: var(--sub); }
#ad-under-game { max-width: 970px; margin: 24px auto 0; padding: 0 16px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 520px) {
  .me { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px; padding: 0; }
  .me .timer { grid-column: 1 / -1; justify-self: end; margin-top: -4px; }
  .me .res { gap: 4px; }
  .step { font-size: 11px; padding: 2px 7px; }
  .status { font-size: 13px; }
}

/* ---- The tutorial coach ---- */
.coach {
  position: absolute; z-index: 16; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 190px);
  width: min(460px, calc(100vw - 20px)); padding: 12px 16px 14px;
  display: grid; gap: 8px;
  border-color: rgba(255, 210, 90, .55);
  animation: drop .25s ease-out;
}
.coach p { margin: 0; font-size: 15px; line-height: 1.45; }
.coach .row { display: flex; gap: 8px; justify-content: flex-end; }
.coach-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.linkish { border: 0; background: none; color: var(--sub); font-size: 12px; text-decoration: underline; padding: 2px; text-transform: none; letter-spacing: 0; }
.coach-target { position: relative; z-index: 3; animation: coach-pulse 1.1s ease-in-out infinite; }
.iconbtn.coach-target { border-color: rgba(255, 210, 90, .9); }
@keyframes coach-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 90, .9); } 50% { box-shadow: 0 0 0 7px rgba(255, 210, 90, 0); } }

/* ---- The roll, kept in the turn bar ---- */
.rolled { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: -5px; }
.rolled img { width: 20px; height: 20px; }
.steps .hint { display: inline-flex; align-items: center; gap: 2px; }
.note-roll { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.note-roll .dot-sep { color: var(--sub); }
.inline-die { width: 28px; height: 28px; }

/* ---- Room code in an online game ---- */
.roomtag { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.roomtag .timer { margin-left: 0; }
.roomchip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--edge-hi); background: rgba(255,255,255,.06); font: 600 12px var(--mono); letter-spacing: .08em; color: var(--text); }
.roomchip:hover { background: rgba(255,255,255,.12); }

/* ---- Volume sliders ---- */
.vols { display: grid; gap: 10px; }
.vol { display: grid; grid-template-columns: 64px 1fr 44px; align-items: center; gap: 10px; color: var(--sub); font-weight: 600; }
.vol b { color: var(--text); font: 600 13px var(--mono); text-align: right; }
.vol input[type=range] { width: 100%; accent-color: #f2f3f5; }
@media (max-width: 520px) { .me .roomtag { grid-column: 1 / -1; justify-self: end; margin-top: -4px; } }

/* iPhone Safari can draw the page under the clock and battery without reporting the space: keep clear of it. */
html.ios { --safe-t: max(env(safe-area-inset-top, 0px), 44px); }
@supports (height: 100lvh) { :root { --bars-b: calc(100lvh - 100svh); } }
@media (max-width: 520px) { .inline-die { width: 22px; height: 22px; } .note-roll { gap: 4px; } .note { font-size: 13px; } }

/* ======================================================================================================================
   Simple mode: a turn is Roll, tap land, Done. One big button says what to do; numbers are pictures; things bounce.
   ==================================================================================================================== */
.ticker { display: none !important; }
.dock { gap: 6px; padding: 10px 10px 10px; width: min(620px, calc(100vw - 20px)); }
.me { gap: 16px; padding: 0 6px; flex-wrap: nowrap; }
.me .res { font: 800 22px var(--body); gap: 6px; }
.me .res img { width: 30px; height: 30px; }
.me .res.bread.warn b { color: var(--bad); }
.me .res.people { gap: 0; margin-left: auto; }
.me .res.people img.m { width: 26px; height: 26px; margin-left: -6px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.me .res.people img.m:first-child { margin-left: 0; }
.me .res.people .ghost { position: relative; display: inline-grid; margin-left: -4px; }
.me .res.people .ghost img.m { opacity: .38; margin-left: 0; filter: grayscale(.4); }
.me .res.people .ghost small { position: absolute; right: -3px; bottom: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #ffd27a; color: #2a1500; font: 800 10px/15px var(--body); text-align: center; }
.me .res.people .more { margin-left: 3px; font: 800 13px var(--body); color: var(--sub); }
.me .res.people .none img.m { opacity: .25; }
.me .res.people .none + b { display: none; }
.me .rolled:empty { display: none; }
.me .rolled img { width: 24px; height: 24px; }
.me .roomtag { margin-left: 0; }
.status { text-align: center; font-size: 15px; min-height: 22px; color: var(--sub); }
.status b { color: var(--text); }
.status .sent { color: var(--gold); white-space: nowrap; }
.actions { flex-wrap: nowrap; gap: 8px; align-items: stretch; }
.actions .btn { flex: 0 0 auto; }
.btn.big { flex: 1 1 auto !important; min-height: 60px; font: italic 900 26px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; border-radius: 16px; }
.btn.big img { width: 36px; height: 36px; }
.btn.big svg { width: 26px; height: 26px; }
.btn.big.waiting { cursor: default; font: 700 17px var(--body); text-transform: none; letter-spacing: 0; color: var(--sub); background: rgba(255,255,255,.04); border-color: color-mix(in srgb, var(--pc, #fff) 45%, transparent); }
.btn.big.waiting img { width: 28px; height: 28px; }
.btn.icon { width: 60px; padding: 0; border-radius: 16px; }
.btn.icon img { width: 32px; height: 32px; }
.btn.icon svg { width: 26px; height: 26px; }
.btn.glow { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55), 0 6px 18px rgba(255,255,255,.12); } 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0), 0 6px 26px rgba(255,255,255,.3); } }
.btn.big.roll img { animation: wobble 1.6s ease-in-out infinite; }
@keyframes wobble { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-16deg); } 86% { transform: rotate(12deg); } 93% { transform: rotate(-5deg); } }
.dots3 { display: inline-flex; gap: 3px; margin-left: 2px; }
.dots3 i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: dot 1.2s infinite; }
.dots3 i:nth-child(2) { animation-delay: .2s; } .dots3 i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* Numbers that change bounce: green up, red down. */
b.pop { display: inline-block; animation: pop .55s cubic-bezier(.2, 1.6, .4, 1); }
b.pop.up { animation-name: pop, flash-up; animation-duration: .55s, 1s; }
b.pop.down { animation-name: pop, flash-down; animation-duration: .55s, 1s; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes flash-up { 0%, 50% { color: #8dffa8; } }
@keyframes flash-down { 0%, 50% { color: #ff8a7a; } }
.res.bump img { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }

/* Players: a race for land. */
.prow { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 3px; }
.prow .st { font: 800 16px var(--body); color: var(--text); gap: 4px; align-items: center; }
.prow .race { grid-column: 2 / -1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.prow .race i { display: block; height: 100%; background: var(--pc); border-radius: 2px; transition: width .6s cubic-bezier(.2, .9, .3, 1); }
.prow .lead { font-style: normal; margin-right: 4px; }
.prow.you .nm span { color: #fff; }

/* "Your turn!" across the table. */
.banner { position: absolute; z-index: 17; left: 0; right: 0; top: 38%; display: grid; place-items: center; pointer-events: none; }
.banner span { padding: 10px 34px; font: italic 900 clamp(34px, 9vw, 60px)/1 var(--display); text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc) 70%, #000) 18%, color-mix(in srgb, var(--pc) 70%, #000) 82%, transparent);
  text-shadow: 0 3px 0 rgba(0,0,0,.35); animation: banner 1.5s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes banner { 0% { transform: translateX(-60vw) skewX(-12deg); opacity: 0; } 18% { transform: translateX(0) skewX(-6deg); opacity: 1; } 78% { transform: translateX(2vw) skewX(-6deg); opacity: 1; } 100% { transform: translateX(60vw) skewX(-12deg); opacity: 0; } }

/* The finger that points at what to do when you've been still a while. */
.hand { position: absolute; z-index: 14; font-size: 44px; line-height: 1; transform: translate(-50%, 0); pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); animation: tap 1s ease-in-out infinite, fadein .3s; }
@keyframes tap { 0%, 100% { margin-top: 14px; } 50% { margin-top: 0; } }
@keyframes fadein { from { opacity: 0; } }

/* The roll note: the bread you got, big. */
.note-roll .gain { display: inline-flex; align-items: center; gap: 2px; color: #ffe08a; font-size: 18px; }

/* Bread shop. */
.buyopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.btn.buyopt { flex-direction: column; gap: 2px; min-height: 76px; }
.btn.buyopt .amt { display: inline-flex; align-items: center; gap: 4px; font: 900 24px var(--body); }
.btn.buyopt .amt img { width: 30px; height: 30px; }
.btn.buyopt small { display: inline-flex; align-items: center; gap: 3px; font: 700 13px var(--body); opacity: .8; }
.btn.buyopt small img { width: 16px; height: 16px; }
.btn.grant { border-color: rgba(255, 210, 122, .6); }
.dialog .fine { font-size: 13px; color: var(--dim); text-align: center; }

/* Tutorial progress as dots. */
.coach-head .pips { display: inline-flex; gap: 4px; }
.coach-head .pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.15); }
.coach-head .pips i.done { background: rgba(255, 210, 90, .5); }
.coach-head .pips i.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.coach p { font-size: 17px; font-weight: 700; }

/* Confetti for a win. */
.confetti { position: absolute; inset: 0; z-index: 25; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--sx), 110vh) rotate(var(--r)); } }

@media (max-width: 520px) {
  .me { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 0 2px; }
  .me .res { font-size: 19px; gap: 4px; }
  .me .res img { width: 26px; height: 26px; }
  .me .res.people img.m { width: 22px; height: 22px; }
  .me .rolled img { width: 20px; height: 20px; }
  .btn.big { min-height: 56px; font-size: 23px; }
  .btn.icon { width: 52px; }
  .status { font-size: 14px; }
}

/* ---- Strategy: rounds, turn order, mills ---- */
.players { display: flex; flex-direction: column; }
.roundhdr { order: -1; padding: 2px 6px 4px; font: 800 11px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--sub); }
.roundhdr b { color: var(--gold); }
.prow.played { opacity: .6; }
.prow.played.turn { opacity: 1; }
.btn.small.gold.mill img { width: 18px; height: 18px; }
.millnote { font-size: 12px; color: var(--gold); }
.sizes.levels { align-items: center; }
.sizes.levels .lbl { padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }