:root {
  --bg: #f4efe4; --card: #fffaf0; --ink: #2b2b2b; --mute: #7a7266; --line: #d8cfbd;
  --accent: #2f6b4f; --gold: #c9971c;
  --c0: #e05a4f; --c1: #ee8a35; --c2: #e2bd2c; --c3: #5aa651; --c4: #4f8fd6; --c5: #9b6fd0;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1d1c1a; --card: #2a2825; --ink: #eee8dc; --mute: #a39b8d; --line: #45413a; --accent: #5fb38a; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.4 system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
header { display: flex; align-items: center; gap: .4rem; padding: .4rem .75rem; background: #2f4a3a; color: #fff; }
header h1 { font-size: 1rem; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
main { max-width: 34rem; margin: 0 auto; padding: .8rem 1rem 2rem; }
#game { padding: .5rem .5rem 11rem; }
.stack { display: grid; gap: .6rem; }
.stack button { padding: .8rem; }
h2 { font-size: 1.1rem; }
h2.small { font-size: .85rem; color: var(--mute); margin: .8rem .25rem .3rem; }
.note { font-size: .85rem; color: var(--mute); }
button { font: inherit; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: .6rem; padding: .55rem .9rem; cursor: pointer; }
button:disabled { opacity: .45; }
button.primary { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
button.ghost { background: transparent; color: inherit; border-color: currentColor; padding: .25rem .6rem; font-size: .85rem; }
button.big { display: block; width: 100%; margin-top: 1rem; padding: .9rem; font-size: 1.1rem; }
.row { display: flex; gap: .6rem; margin: .7rem 0; }
.row > * { flex: 1; }
.seg { display: flex; gap: .5rem; }
.seg button { flex: 1; font-size: 1.3rem; padding: .7rem 0; }
.seg button.on { background: var(--accent); color: #fff; border-color: transparent; }

#dice { display: flex; gap: .4rem; justify-content: center; margin: .2rem 0 .5rem; }
.die { width: 2.5rem; height: 2.5rem; border-radius: .5rem; display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; border: 2px solid rgba(0,0,0,.15); color: #fff; background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.25); transition: opacity .35s, transform .35s; }
.die.num { color: #222; }
.die.gap { margin-left: .6rem; }
.die.taken { opacity: .25; transform: scale(.8) translateY(4px); }
.die.used { outline: 3px solid var(--ink); outline-offset: 2px; }
.die.tumble { animation: tumble .22s linear infinite; }
.die.land { animation: land .3s ease-out; }
@keyframes tumble {
  0% { transform: translateY(-6px) rotate(-18deg) scale(.92); }
  50% { transform: translateY(3px) rotate(14deg) scale(1.04); }
  100% { transform: translateY(-6px) rotate(-18deg) scale(.92); }
}
@keyframes land { 0% { transform: scale(1.25); } 60% { transform: scale(.94); } 100% { transform: none; } }

#options { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
#options:empty { display: none; }
.opt { position: relative; width: 2.6rem; height: 2.6rem; padding: 0; border: none; border-radius: .5rem; background: var(--col, var(--mute)); color: #fff; font-weight: 700; font-size: 1.15rem; transition: transform .12s; }
.opt.sel { outline: 3px solid var(--ink); outline-offset: 2px; transform: scale(1.08); }
.opt.hint { box-shadow: 0 0 0 3px var(--gold); }
.opt.hint::after { content: '💡'; position: absolute; top: -.6rem; right: -.45rem; font-size: .8rem; }
.turnlog { width: 100%; text-align: center; font-size: .9rem; color: var(--mute); padding: 0 .25rem; }
.turnlog b { color: var(--ink); }

#log { list-style: none; padding: .4rem .7rem; margin: 0; background: var(--card); border-radius: .6rem; font-size: .85rem; color: var(--mute); }
#log b { color: var(--ink); }
.tabrow { display: flex; align-items: end; gap: .25rem; }
#tabs { display: flex; gap: .25rem; overflow-x: auto; flex: 1; }
#menuBtn { padding: .2rem .65rem; margin-bottom: 3px; font-size: 1.1rem; }
#tabs button { border-radius: .55rem .55rem 0 0; border-bottom: none; padding: .25rem .55rem; font-size: .85rem; white-space: nowrap; }
#tabs button.on { background: var(--card); font-weight: 700; border-color: var(--accent); }

.sheet { background: var(--card); border-radius: 0 .6rem .6rem .6rem; padding: .35rem .25rem; display: grid; grid-template-columns: 1.55rem repeat(6, 1fr) .15rem repeat(2, 1fr) 1.75rem; gap: 2px; }
.sheet > div { min-height: 1.8rem; display: grid; place-items: center; border-radius: .3rem; }
.sheet .lbl { font-size: .68rem; color: var(--mute); min-height: 0; line-height: 1.1; }
.sheet .neg { color: #c0392b; }
.sheet .head { font-size: .75rem; font-weight: 700; min-height: 1.3rem; }
.sheet .box { background: color-mix(in srgb, var(--col) 30%, var(--card)); font-weight: 700; font-size: 1.05rem; }
.sheet .box.on { background: var(--col); color: #fff; }
.sheet .box .ico { font-size: .75rem; opacity: .55; }
.sheet .side { background: color-mix(in srgb, var(--mute) 18%, var(--card)); font-size: .8rem; }
.sheet .side:not(.on) { opacity: .4; }
.sheet .side.on { background: var(--mute); }
.sheet .bridge { min-height: 1.2rem; font-size: .68rem; font-weight: 700; color: var(--mute); border: 1px dashed var(--line); }
.sheet .bridge.won { background: var(--gold); color: #fff; border-color: transparent; }
.sheet .bridge.lost { text-decoration: line-through; opacity: .5; }
.sheet .spacer { grid-column: 1 / -1; min-height: 2px; }
.sheet .circ { border-radius: 50%; aspect-ratio: 1; width: 1.7rem; min-height: 0; margin: auto; background: color-mix(in srgb, var(--col) 30%, var(--card)); font-size: .65rem; font-weight: 700; }
.sheet .circ.on { background: var(--col); color: #fff; }
.sheet .circ.off { opacity: .3; text-decoration: line-through; }
.sheet .goal { min-height: 1.1rem; font-size: .75rem; opacity: .35; }
.sheet .goal.on { opacity: 1; }
.sheet .pv { outline: 3px solid var(--ink); outline-offset: -1px; animation: pulse 1s infinite alternate; }
.sheet .new { box-shadow: inset 0 0 0 3px var(--gold); opacity: 1; }
@keyframes pulse { to { outline-color: transparent; } }

#bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgba(0,0,0,.15);
  padding: .5rem max(.6rem, calc((100% - 34rem) / 2)) calc(.5rem + env(safe-area-inset-bottom)); }
#bar .row { margin: .45rem 0 0; gap: .5rem; }
#bar .row button { padding: .7rem .5rem; }
#bar .row #hintBtn { flex: 0 0 auto; }

dialog { border: none; border-radius: .9rem; max-width: 32rem; width: calc(100% - 2rem); background: var(--card); color: var(--ink); padding: 1rem 1.2rem; }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog p { margin: .5rem 0; font-size: .95rem; }
dialog .close { float: right; border: none; font-size: 1.2rem; padding: .2rem .5rem; }
#endTable table { width: 100%; border-collapse: collapse; font-size: .85rem; }
#endTable th, #endTable td { padding: .3rem .25rem; text-align: right; border-bottom: 1px solid var(--line); }
#endTable th:first-child, #endTable td:first-child { text-align: left; }
#endTable tr.win td { font-weight: 700; }

.field { display: grid; gap: .3rem; font-weight: 600; }
input { font: inherit; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--card); color: var(--ink); min-width: 0; }
#codeIn { text-transform: uppercase; letter-spacing: .2em; font-weight: 700; text-align: center; }
.or { text-align: center; color: var(--mute); margin: 1.2rem 0 .2rem; }
.code { font-family: ui-monospace, monospace; letter-spacing: .15em; background: var(--card); padding: .1rem .5rem; border-radius: .4rem; }
.seats { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.seats li { background: var(--card); border-radius: .5rem; padding: .5rem .75rem; }
.seats li.bot { color: var(--mute); }

@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }
.opt.rej { background: var(--card); color: var(--ink); border: 1px solid var(--line); }