/* Bergerboard. Themes are sets of variables; everything else reads them. */

:root, [data-theme="walnut"] {
  --bg: #2b1d14; --bar: #3a271a; --surface: #f6efe2; --text: #2a1d12; --on-bg: #f6efe2; --muted: #8b7663;
  --board: #5b3a24; --line: #4a2e1c; --cell: #efe3cc; --cell-text: #9b8466;
  --tw: #b23a2e; --dw: #e0a28f; --tl: #2d5d86; --dl: #9cc2dc; --centre: #e0a28f; --prem-text: #fff;
  --tile: #fbf3dc; --tile-edge: #c9b48b; --tile-text: #2a1d12; --blank-text: #b23a2e;
  --accent: #d98c2b; --accent-text: #fff; --warn: #b23a2e; --last: #ffcf4a; --pend: #e4572e; --dot: #4cd964;
  --card: #3a271a; --card-text: #f6efe2; --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}
[data-theme="paper"] {
  --bg: #f4f1ea; --bar: #ffffff; --surface: #ffffff; --text: #1f2328; --on-bg: #1f2328; --muted: #7a7f87;
  --board: #d9d4c7; --line: #d9d4c7; --cell: #fbfaf6; --cell-text: #b5b0a3;
  --tw: #ef6351; --dw: #f9b9a8; --tl: #2a9d8f; --dl: #a8dad3; --centre: #f9b9a8; --prem-text: #fff;
  --tile: #1f2328; --tile-edge: #000; --tile-text: #fff; --blank-text: #f9c74f;
  --accent: #2a9d8f; --accent-text: #fff; --warn: #ef6351; --last: #f9c74f; --pend: #ef6351; --dot: #2a9d8f;
  --card: #ffffff; --card-text: #1f2328;
}
[data-theme="midnight"] {
  --bg: #0d1324; --bar: #141c33; --surface: #1b2542; --text: #e8ecf7; --on-bg: #e8ecf7; --muted: #8590ad;
  --board: #0a0f1d; --line: #0a0f1d; --cell: #1d2747; --cell-text: #4b5980;
  --tw: #c0395b; --dw: #7a3e7a; --tl: #2f6ec4; --dl: #2b4f7e; --centre: #7a3e7a; --prem-text: #f1e9d2;
  --tile: #e9c46a; --tile-edge: #b8933d; --tile-text: #1b1405; --blank-text: #7a3e7a;
  --accent: #e9c46a; --accent-text: #1b1405; --warn: #e05a7a; --last: #7fe0ff; --pend: #ff6b8b; --dot: #6cf09a;
  --card: #141c33; --card-text: #e8ecf7;
}
[data-theme="seaside"] {
  --bg: #e9dfc8; --bar: #2f6f8f; --surface: #fffaf0; --text: #1d3b4a; --on-bg: #1d3b4a; --muted: #6f8794;
  --board: #c8b48a; --line: #c8b48a; --cell: #f3ead3; --cell-text: #b6a37c;
  --tw: #f26b5b; --dw: #f7b29e; --tl: #1f6f9c; --dl: #8ccbe0; --centre: #f7b29e; --prem-text: #fff;
  --tile: #ffffff; --tile-edge: #b9cdd6; --tile-text: #1d3b4a; --blank-text: #f26b5b;
  --accent: #1f6f9c; --accent-text: #fff; --warn: #f26b5b; --last: #ffb703; --pend: #f26b5b; --dot: #2bb673;
  --card: #fffaf0; --card-text: #1d3b4a;
}
[data-theme="garden"] {
  --bg: #2f3d2c; --bar: #4f6b4a; --surface: #f4efe1; --text: #26301f; --on-bg: #f4efe1; --muted: #8a957f;
  --board: #3e5239; --line: #3e5239; --cell: #e3e5cf; --cell-text: #9aa48a;
  --tw: #c0623c; --dw: #e3a585; --tl: #5b7d3a; --dl: #b5c98e; --centre: #e3a585; --prem-text: #fff;
  --tile: #fbf6e6; --tile-edge: #cdbf98; --tile-text: #26301f; --blank-text: #c0623c;
  --accent: #c0623c; --accent-text: #fff; --warn: #b04a2a; --last: #f2cc5c; --pend: #c0623c; --dot: #9be36b;
  --card: #4f6b4a; --card-text: #f4efe1;
}
[data-theme="neon"] {
  --bg: #07070d; --bar: #0b0b12; --surface: #14141f; --text: #f2f2ff; --on-bg: #f2f2ff; --muted: #8080a0;
  --board: #000; --line: #000; --cell: #11111b; --cell-text: #3a3a55;
  --tw: #ff2e88; --dw: #7a1f5a; --tl: #00c2ff; --dl: #0b4f6b; --centre: #7a1f5a; --prem-text: #fff;
  --tile: #1c1c2e; --tile-edge: #39ff14; --tile-text: #39ff14; --blank-text: #ff2e88;
  --accent: #ff2e88; --accent-text: #fff; --warn: #ff2e88; --last: #ffe600; --pend: #ff2e88; --dot: #39ff14;
  --card: #14141f; --card-text: #f2f2ff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--on-bg); font-family: var(--font); }
body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; }
h1 { font-size: 18px; margin: 0; }
h2 { font-size: 18px; margin: 0; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.center { text-align: center; }
.err { color: var(--warn); }
.grow { flex: 1; }
[hidden] { display: none !important; }

/* ---------- bars and buttons ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px; background: var(--bar); color: var(--on-bg);
  position: sticky; top: 0; z-index: 5;
}
[data-theme="seaside"] .bar, [data-theme="garden"] .bar { color: #fff; }
.icon-btn { background: none; border: 0; font-size: 26px; line-height: 1; padding: 4px 10px; min-width: 44px; min-height: 40px; cursor: pointer; }
.btn {
  border: 0; border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 15px;
  background: var(--surface); color: var(--text); box-shadow: 0 1px 0 rgba(0,0,0,.15); cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.warn { background: var(--warn); color: #fff; }
.btn.small { padding: 7px 11px; font-size: 13px; border-radius: 10px; }
.btn.big { width: 100%; padding: 16px; font-size: 17px; }
.btn:disabled { opacity: .45; }
.link { background: none; border: 0; color: var(--accent); padding: 4px 0; font-weight: 600; }
.row-btns { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.row-btns .btn { flex: 1; }
.chip { font-size: 11px; padding: 2px 7px; border-radius: 99px; background: var(--accent); color: var(--accent-text); font-weight: 700; }

/* ---------- logo ---------- */
.logo { display: flex; align-items: flex-end; gap: 3px; justify-content: center; }
.logo .tile { width: 40px; height: 40px; font-size: 24px; position: static; display: grid; place-items: center; }
.logo-word { font-weight: 800; font-size: 26px; margin-left: 5px; letter-spacing: .02em; }
.logo.small .tile { width: 24px; height: 24px; font-size: 14px; border-radius: 4px; }
.logo.small .logo-word { font-size: 17px; }
[data-theme="seaside"] .logo.small .logo-word, [data-theme="garden"] .logo.small .logo-word { color: #fff; }

/* ---------- sign in ---------- */
.signin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 24px; max-width: 420px; margin: 0 auto; text-align: center; }
.signin form { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
input[type=text], input[type=password] {
  font: inherit; font-size: 17px; padding: 14px; border-radius: 12px; border: 1px solid var(--muted);
  background: var(--surface); color: var(--text);
}

/* ---------- home ---------- */
.home, .newgame, .settings { padding: 16px 16px calc(env(safe-area-inset-bottom) + 32px); max-width: 560px; margin: 0 auto; }
.hint { background: var(--card); color: var(--card-text); border-radius: 14px; padding: 4px 14px 10px; margin-top: 14px; font-size: 14px; }
.game-card {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 16px; padding: 14px; margin-bottom: 10px;
  background: var(--card); color: var(--card-text); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.game-card.mine { outline: 3px solid var(--accent); }
.gc-top { display: flex; gap: 8px; align-items: center; }
.gc-top strong { font-size: 17px; }
.gc-status { margin-left: auto; font-weight: 700; color: var(--accent); font-size: 14px; }
.gc-scores { display: flex; gap: 14px; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.gc-scores .turn { font-weight: 800; }
.gc-last { font-size: 13px; }

/* ---------- new game ---------- */
.people { display: flex; flex-wrap: wrap; gap: 8px; }
.person { border: 2px solid var(--muted); background: transparent; border-radius: 99px; padding: 10px 16px; font-weight: 600; cursor: pointer; }
.person.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.rules-pick { display: flex; flex-direction: column; gap: 10px; }
.option { text-align: left; border: 2px solid transparent; border-radius: 14px; padding: 12px 14px; background: var(--card); color: var(--card-text); cursor: pointer; }
.option strong { display: block; font-size: 16px; margin-bottom: 4px; }
.option span { font-size: 14px; opacity: .85; }
.option.on { border-color: var(--accent); }
.seg { display: flex; background: var(--card); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 9px; font-weight: 600; color: var(--card-text); }
.seg button.on { background: var(--accent); color: var(--accent-text); }
.newgame > .btn.big { margin-top: 28px; }

/* ---------- settings ---------- */
.themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.theme { border: 3px solid transparent; border-radius: 14px; padding: 10px; background: var(--bg); color: var(--on-bg); text-align: left; cursor: pointer; }
.theme.on { border-color: var(--accent); }
.theme strong { display: block; margin-top: 8px; }
.theme span { font-size: 12px; opacity: .8; }
.mini { display: grid; grid-template-columns: repeat(15, 1fr); gap: 1px; background: var(--line); border: 3px solid var(--board); border-radius: 4px; aspect-ratio: 1; }
.mini i { background: var(--cell); }
.mini .sq-tw { background: var(--tw); } .mini .sq-dw, .mini .sq-c { background: var(--dw); }
.mini .sq-tl { background: var(--tl); } .mini .sq-dl { background: var(--dl); }
.mini .sq-tile { background: var(--tile); }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 16px; }
.switch-row input { width: 22px; height: 22px; accent-color: var(--accent); }
.push-box .btn { margin-top: 6px; }
.change ul { margin: 4px 0 12px; padding-left: 20px; font-size: 14px; }

/* ---------- game screen ---------- */
body[data-screen="game"] { overflow: hidden; position: fixed; inset: 0; }
.game { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.game-bar { padding-bottom: 6px; }
.players { display: flex; gap: 6px; flex: 1; justify-content: center; overflow: hidden; }
.pl { display: flex; flex-direction: column; align-items: center; padding: 3px 10px; border-radius: 10px; min-width: 64px; border-bottom: 3px solid transparent; }
.pl.turn { border-bottom-color: var(--accent); background: rgba(255,255,255,.08); }
.pl.out { opacity: .4; text-decoration: line-through; }
.pl-name { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; max-width: 90px; overflow: hidden; white-space: nowrap; }
.pl-score { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); display: inline-block; box-shadow: 0 0 6px var(--dot); }
.status { display: flex; align-items: center; gap: 8px; padding: 6px 12px; min-height: 42px; font-size: 14px; flex-wrap: wrap; }
.status .bag { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.reacts { display: flex; gap: 2px; }
.react { background: none; border: 0; font-size: 20px; padding: 2px 4px; cursor: pointer; }

.board-area { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.board-wrap { width: var(--base); height: var(--base); overflow: hidden; border-radius: 6px; touch-action: manipulation; }
.board-wrap.zoomed { overflow: auto; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.board-scroll { position: relative; width: calc(var(--base) * var(--zoom)); height: calc(var(--base) * var(--zoom)); }
.board {
  display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr);
  gap: 1px; padding: 1px; width: 100%; height: 100%; background: var(--line); border-radius: 6px;
  box-shadow: 0 0 0 3px var(--board);
}
.sq { background: var(--cell); position: relative; display: grid; place-items: center; overflow: visible; border-radius: 2px; }
.sq-tw { background: var(--tw); } .sq-dw { background: var(--dw); } .sq-tl { background: var(--tl); } .sq-dl { background: var(--dl); }
.sq-c { background: var(--centre); }
.lab { font-size: calc(var(--cs) * .34); font-weight: 800; color: var(--prem-text); opacity: .95; letter-spacing: -.02em; }
.sq-c .lab { font-size: calc(var(--cs) * .6); }
.sq.hover { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 2; }

.tile {
  position: relative; display: grid; place-items: center; background: var(--tile); color: var(--tile-text);
  border-radius: 12%; box-shadow: inset 0 -2px 0 var(--tile-edge), 0 1px 1px rgba(0,0,0,.3); font-weight: 800;
}
.sq .tile { position: absolute; inset: 0; font-size: calc(var(--cs) * .58); }
.tile .l { line-height: 1; }
.tile .v { position: absolute; right: 8%; bottom: 4%; font-size: .36em; font-weight: 700; }
.tile.blank .l { color: var(--blank-text); }
[data-theme="neon"] .tile { box-shadow: 0 0 0 1px var(--tile-edge), 0 0 6px rgba(57,255,20,.5); text-shadow: 0 0 6px rgba(57,255,20,.7); }
.sq .tile.placed { box-shadow: inset 0 -2px 0 var(--tile-edge), 0 0 0 2px var(--accent); touch-action: none; cursor: grab; }
.sq .tile.last { box-shadow: inset 0 -2px 0 var(--tile-edge), 0 0 0 2px var(--last); }
.sq .tile.pend { box-shadow: inset 0 -2px 0 var(--tile-edge), 0 0 0 2px var(--pend); animation: pend 1.6s ease-in-out infinite; }
@keyframes pend { 50% { box-shadow: inset 0 -2px 0 var(--tile-edge), 0 0 0 2px transparent; } }
.tile.lifted { opacity: .25; }

.bubble {
  position: absolute; z-index: 3; pointer-events: none;
  left: calc((var(--c) + 1) * var(--cs) - 6px); top: calc(var(--r) * var(--cs) - 14px);
  background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: 13px;
  padding: 2px 7px; border-radius: 99px; box-shadow: 0 2px 4px rgba(0,0,0,.3); white-space: nowrap;
}
.bubble.bad { background: var(--warn); color: #fff; }
.zoom-btn {
  position: absolute; right: 8px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; border: 0; z-index: 4;
  background: var(--surface); color: var(--text); font-size: 18px; opacity: .85; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.rack-area { padding: 10px 8px 4px; display: flex; justify-content: center; }
.rack { position: relative; display: flex; gap: 6px; justify-content: center; width: 100%; max-width: 520px; min-height: calc(var(--rack-tile, 48px) + 4px); }
.rack .tile { width: var(--rack-tile, 48px); height: var(--rack-tile, 48px); font-size: calc(var(--rack-tile, 48px) * .55); touch-action: none; cursor: grab; transition: transform .12s; }
.rack .tile.sel { transform: translateY(-8px); box-shadow: inset 0 -2px 0 var(--tile-edge), 0 0 0 3px var(--accent); }
.rack .tile.swap { transform: translateY(-8px); box-shadow: inset 0 -2px 0 var(--tile-edge), 0 0 0 3px var(--warn); }
.rack .tile.lifted, .rack .tile.gap { opacity: 1; background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.rack .tile.lifted > * { visibility: hidden; }
.rack .ghost-slot { background: transparent; box-shadow: inset 0 0 0 1px rgba(127,127,127,.25); }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; width: 54px; height: 54px; font-size: 30px;
  box-shadow: 0 8px 18px rgba(0,0,0,.4), inset 0 -2px 0 var(--tile-edge);
}
.actions { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 8px; padding: 8px 10px calc(env(safe-area-inset-bottom) + 10px); }
.actions .btn { padding: 13px 6px; }
.actions .btn:only-child, .actions .btn:first-child:nth-last-child(2) { grid-column: span 2; }
.actions .btn:first-child:nth-last-child(2) ~ .btn { grid-column: span 2; }

.float-emoji { position: fixed; left: 50%; top: 40%; font-size: 72px; z-index: 60; pointer-events: none; animation: floatup 1.8s ease-out forwards; }
@keyframes floatup { 0% { transform: translate(-50%, 20px) scale(.4); opacity: 0; } 20% { transform: translate(-50%, 0) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -140px) scale(1); opacity: 0; } }

/* ---------- sheets, toast ---------- */
.sheet-wrap { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 40; display: flex; align-items: flex-end; justify-content: center; transition: background .2s; }
.sheet-wrap.open { background: rgba(0,0,0,.45); }
.sheet {
  width: 100%; max-width: 560px; max-height: 85vh; overflow: auto; background: var(--surface); color: var(--text);
  border-radius: 20px 20px 0 0; padding: 14px 18px calc(env(safe-area-inset-bottom) + 20px);
  transform: translateY(100%); transition: transform .2s ease-out;
}
.sheet-wrap.open .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet .btn { background: var(--bg); color: var(--on-bg); }
.sheet .btn.primary { background: var(--accent); color: var(--accent-text); }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 14px 2px; font-size: 17px; border-bottom: 1px solid rgba(127,127,127,.2); color: var(--text); cursor: pointer; }
.menu-item.danger { color: var(--warn); }
.menu-note { padding: 12px 2px; font-size: 14px; }
.letters { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.letters .tile { aspect-ratio: 1; border: 0; font-size: 22px; cursor: pointer; }
.history { padding-left: 0; list-style: none; margin: 0; }
.history li { padding: 8px 0; border-bottom: 1px solid rgba(127,127,127,.2); }
.history .who { font-weight: 700; display: inline-block; min-width: 64px; }
.struck { text-decoration: line-through; }
.unseen { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 16px; }
.final { padding-left: 22px; font-size: 18px; }
.final li { padding: 4px 0; }
.final b { margin-left: 10px; }
#toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 140px); transform: translate(-50%, 20px); z-index: 70;
  background: rgba(20,20,20,.92); color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 15px; max-width: 90vw;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }