/* ==========================================================================
   Yahtzee — Apple design language.
   System typography with size-specific tracking, translucent materials,
   hairline borders, soft layered depth. Light + dark from one token set.
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#f2f2f7;
  --surface:rgba(255,255,255,.78);
  --surface-solid:#ffffff;
  --fill:rgba(120,120,128,.10);
  --fill-2:rgba(120,120,128,.18);
  /* text */
  --label:#1d1d1f;
  --label-2:rgba(60,60,67,.62);
  --label-3:rgba(60,60,67,.30);
  /* accents (iOS system palette) */
  --accent:#007aff; --green:#34c759; --red:#ff3b30;
  --orange:#ff9500; --yellow:#ffcc00; --purple:#af52de;
  --accent-tint:rgba(0,122,255,.12);
  --green-tint:rgba(52,199,89,.14);  --green-tint-2:rgba(52,199,89,.24);
  --red-tint:rgba(255,59,48,.12);    --red-tint-2:rgba(255,59,48,.22);
  --yellow-tint:rgba(255,204,0,.16);
  --green-text:#157f3c; --red-text:#d70015;
  --on-accent:#fff;
  /* depth */
  --hairline:rgba(60,60,67,.18);
  --border:1px solid var(--hairline);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.04);
  --shadow-md:0 1px 2px rgba(0,0,0,.05),0 10px 30px rgba(0,0,0,.10);
  --edge:inset 0 1px 0 rgba(255,255,255,.55); /* light catching the top of the material */
  --blur:saturate(180%) blur(20px);
  --radius:20px; --radius-md:12px;
  /* background washes */
  --wash-1:rgba(0,122,255,.06);
  --wash-2:rgba(175,82,222,.05);
  /* type */
  --display:-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --body:var(--display);
  color-scheme:light;
}

html[data-theme="dark"]{
  --bg:#000000;
  --surface:rgba(28,28,30,.72);
  --surface-solid:#1c1c1e;
  --fill:rgba(120,120,128,.18);
  --fill-2:rgba(120,120,128,.28);
  --label:#f5f5f7;
  --label-2:rgba(235,235,245,.60);
  --label-3:rgba(235,235,245,.28);
  --accent:#0a84ff; --green:#30d158; --red:#ff453a;
  --orange:#ff9f0a; --yellow:#ffd60a; --purple:#bf5af2;
  --accent-tint:rgba(10,132,255,.22);
  --green-tint:rgba(48,209,88,.20);  --green-tint-2:rgba(48,209,88,.32);
  --red-tint:rgba(255,69,58,.18);    --red-tint-2:rgba(255,69,58,.30);
  --yellow-tint:rgba(255,214,10,.16);
  --green-text:#30d158; --red-text:#ff6961;
  --hairline:rgba(255,255,255,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.30),0 2px 10px rgba(0,0,0,.30);
  --shadow-md:0 1px 2px rgba(0,0,0,.35),0 12px 34px rgba(0,0,0,.45);
  --edge:inset 0 1px 0 rgba(255,255,255,.08);
  --wash-1:rgba(10,132,255,.10);
  --wash-2:rgba(191,90,242,.08);
  color-scheme:dark;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font:400 1rem/1.5 var(--body);
  color:var(--label);
  background:
    radial-gradient(1200px 800px at 85% -10%, var(--wash-1), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, var(--wash-2), transparent 60%),
    var(--bg);
  min-height:100%;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 48px}
h1,h2,h3{margin:0;font-family:var(--display)}
.hidden{display:none!important}
.muted{color:var(--label-2);font-weight:500}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- theme toggle ---- */
.theme-toggle{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:70;
  width:44px;height:44px;padding:0;border:var(--border);border-radius:50%;
  background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--label);font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow-sm);transition:transform .1s ease-out, background .15s}
.theme-toggle:hover{background:var(--surface-solid)}
.theme-toggle:active{transform:scale(.94)}

/* ---- in-room chat (online) ---- */
#chatRoot.hidden{display:none}
.chat-launcher{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));
  z-index:76;width:54px;height:54px;border-radius:50%;border:none;background:var(--accent);color:#fff;
  font-size:1.5rem;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-md);
  transition:transform .1s ease-out}
.chat-launcher:active{transform:scale(.93)}
.chat-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--red);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--surface-solid)}
.chat-badge.hidden{display:none}
.chat-panel{position:fixed;right:max(14px,env(safe-area-inset-right));
  bottom:calc(max(14px,env(safe-area-inset-bottom)) + 66px);z-index:76;
  width:min(360px,92vw);height:min(460px,62vh);display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md),var(--edge)}
.chat-panel.hidden{display:none}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;
  border-bottom:var(--border);font-weight:600;color:var(--label);letter-spacing:-.01em}
.chat-head button{background:none;border:none;color:var(--label-2);font-size:1.05rem;cursor:pointer;line-height:1;padding:4px}
.chat-log{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:7px;-webkit-overflow-scrolling:touch}
.chat-empty{margin:auto;color:var(--label-3);font-size:.9rem;text-align:center}
.chat-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:82%}
.chat-msg.me{align-self:flex-end;align-items:flex-end}
.chat-name{font-size:.72rem;font-weight:700;margin:0 0 2px 6px;letter-spacing:-.01em}
.chat-bubble{padding:8px 12px;border-radius:17px;background:var(--fill);color:var(--label);
  font-size:.92rem;line-height:1.32;word-break:break-word;white-space:pre-wrap}
.chat-msg.me .chat-bubble{background:var(--accent);color:#fff}
.chat-form{display:flex;gap:8px;padding:10px;border-top:var(--border)}
.chat-form input{flex:1;min-width:0;padding:10px 14px;border-radius:999px;border:var(--border);
  background:var(--surface-solid);color:var(--label);font-size:1rem;outline:none}
.chat-form input:focus{border-color:var(--accent)}
.chat-send{flex:none;width:40px;height:40px;border-radius:50%;border:none;background:var(--accent);color:#fff;
  font-size:1rem;cursor:pointer;transition:transform .1s}
.chat-send:active{transform:scale(.92)}

/* ---- brand ---- */
.brand{display:flex;align-items:center;gap:14px;justify-content:center;margin:12px 0 24px}
.brand .logo{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.625rem;
  background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:var(--border);box-shadow:var(--shadow-sm),var(--edge)}
.brand h1{font-size:2rem;font-weight:700;letter-spacing:-.022em;color:var(--label)}
.brand span{color:var(--label-2);font-weight:500;font-size:.8125rem}

/* ---- cards (translucent material) ---- */
.card{
  background:var(--surface);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-md),var(--edge);
  padding:24px;position:relative;
}
.screen-title{font-size:1.5rem;font-weight:700;letter-spacing:-.015em;margin-bottom:4px}
.sub{color:var(--label-2);margin:0 0 18px;font-weight:400}
.hint{color:var(--label-2);font-size:.78rem;text-align:center;font-weight:400}
/* screens with edge-swipe back: let vertical pans scroll, horizontal ones reach JS */
#localSetup,#onlineHome{touch-action:pan-y}
.back{display:inline-flex;align-items:center;gap:4px;margin-bottom:14px;cursor:pointer;
  background:var(--fill);border:none;border-radius:999px;padding:7px 14px;
  color:var(--accent);font-family:var(--body);font-weight:600;font-size:.8125rem;
  transition:transform .1s ease-out, background .15s}
.back:hover{background:var(--fill-2)}
.back:active{transform:scale(.96)}

/* ---- buttons ---- */
.btn{
  font-family:var(--body);font-weight:600;font-size:1.0625rem;
  border:none;border-radius:14px;padding:14px 20px;cursor:pointer;
  color:var(--on-accent);background:var(--accent);box-shadow:var(--shadow-sm);
  transition:transform .1s ease-out, filter .15s, opacity .15s;width:100%;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:default;filter:none;transform:none}
.btn.ghost{background:var(--fill);color:var(--accent);box-shadow:none}
.btn.ghost:hover{background:var(--fill-2);filter:none}
.btn.gold{background:var(--yellow);color:#1d1d1f}
.btn.small{width:auto;padding:8px 14px;font-size:.875rem;border-radius:999px}

/* ---- mode grid ---- */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mode-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;
  padding:20px;border-radius:16px;border:var(--border);background:var(--surface-solid);color:var(--label);
  box-shadow:var(--shadow-sm);transition:transform .12s ease-out, box-shadow .12s ease-out;font-family:var(--body)}
.mode-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.mode-btn:active{transform:scale(.98);box-shadow:var(--shadow-sm)}
.mode-btn .mi{font-size:1.875rem}
.mode-btn b{font-size:1.0625rem;font-weight:600}
.mode-btn small{color:var(--label-2);font-weight:400}
@media(max-width:520px){.mode-grid{grid-template-columns:1fr}}

/* ---- local setup ---- */
.count-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.count-row button{flex:1;min-width:54px;padding:11px 0;border-radius:var(--radius-md);border:none;
  background:var(--fill);color:var(--label);font-family:var(--body);font-weight:600;font-size:1.0625rem;cursor:pointer;
  transition:transform .1s ease-out, background .15s}
.count-row button:hover{background:var(--fill-2)}
.count-row button:active{transform:scale(.95)}
.count-row button.active{background:var(--accent);color:var(--on-accent)}
.players-inputs{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.pinput{display:flex;align-items:center;gap:10px}
.pinput .dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pinput input{flex:1;padding:12px 14px;border-radius:var(--radius-md);border:1px solid transparent;
  background:var(--fill);color:var(--label);font-size:1rem;font-family:var(--body);font-weight:400;outline:none;
  transition:border-color .15s, box-shadow .15s}
.pinput input:focus{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-tint)}

/* ---- online forms ---- */
.online-forms{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.of-block h3{font-size:1.0625rem;margin-bottom:2px;font-weight:600}
.of-divider{display:flex;align-items:center;justify-content:center}
.of-divider span{background:var(--hairline);width:1px;height:100%;position:relative;font-size:0}
.of-divider span::after{content:"or";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--surface-solid);padding:4px 8px;border-radius:999px;
  color:var(--label-2);font-size:.75rem;font-weight:500}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.fld span{font-size:.8125rem;color:var(--label-2);font-weight:500}
.fld input{padding:12px 14px;border-radius:var(--radius-md);border:1px solid transparent;
  background:var(--fill);color:var(--label);font-size:1rem;font-family:var(--body);font-weight:400;outline:none;
  transition:border-color .15s, box-shadow .15s}
.fld input:focus{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-tint)}
.form-error{margin-top:14px;padding:11px 14px;border-radius:var(--radius-md);background:var(--red-tint);
  color:var(--red-text);font-weight:600;font-size:.875rem;text-align:center}
@media(max-width:640px){.online-forms{grid-template-columns:1fr}.of-divider span{width:100%;height:1px}}

/* ---- lobby ---- */
.roomcode-box{background:var(--fill);border-radius:16px;padding:16px;text-align:center;margin-bottom:20px}
.rc-label{display:block;color:var(--label-2);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:8px}
.rc-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.rc-code{font-size:2.5rem;font-weight:700;letter-spacing:.12em;color:var(--label);
  font-family:ui-rounded,var(--display);font-variant-numeric:tabular-nums}
.lb-h{font-size:1.0625rem;margin-bottom:10px;font-weight:600}
.lobby-players{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.lp-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--radius-md);background:var(--fill)}
.lp-row .dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.lp-row .nm{font-weight:600;flex:1}
.lp-row .tag{font-size:.6875rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--fill-2);color:var(--label-2);margin-left:6px}
.lp-row .tag.host{background:var(--yellow-tint);color:var(--label)}
.lp-row .tag.you{background:var(--accent-tint);color:var(--accent)}
.lp-row.offline{opacity:.45}

/* ---- net banner ---- */
.net-banner{position:fixed;top:0;left:0;right:0;z-index:60;text-align:center;
  padding:calc(9px + env(safe-area-inset-top)) 12px 9px;font-weight:600;font-size:.8125rem;
  border-bottom:var(--border)}
.net-banner.warn{background:var(--yellow);color:#1d1d1f}
.net-banner.err{background:var(--red);color:#fff}
.net-banner.ok{background:var(--green);color:#fff}

/* ---- turn bar ---- */
.turnbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;margin-bottom:16px;
  background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:var(--border);box-shadow:var(--shadow-sm),var(--edge)}
.turnbar .who{display:flex;align-items:center;gap:12px;min-width:0}
.turnbar .who .dot{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.turnbar .who h2{font-size:1.125rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.turnbar .who small{display:block;color:var(--label-2);font-weight:400;font-size:.8125rem}
.turnbar .score-pill{background:var(--fill);border-radius:var(--radius-md);padding:7px 14px;text-align:center;flex:none}
.turnbar .score-pill b{font-size:1.375rem;display:block;line-height:1.05;font-weight:700;font-variant-numeric:tabular-nums}
.turnbar .score-pill span{font-size:.6875rem;color:var(--label-2);text-transform:uppercase;letter-spacing:.06em;font-weight:500}

/* ---- dice ---- */
.dice-area{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:8px}
.dice-row{display:flex;gap:13px;flex-wrap:wrap;justify-content:center}
.die{
  appearance:none;-webkit-appearance:none;font:inherit;
  width:70px;height:70px;border-radius:16px;background:#fff;border:var(--border);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:12px;cursor:pointer;position:relative;
  transition:transform .15s ease-out, box-shadow .15s ease-out, background .15s;
  box-shadow:var(--shadow-sm),var(--edge);user-select:none;will-change:transform;
}
.die:hover:not(.disabled):not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md),var(--edge)}
/* press feedback on pointer-down, not on release */
.die:active:not(.disabled):not(:disabled){transform:scale(.94);box-shadow:var(--shadow-sm),var(--edge);transition-duration:.1s}
.die .pip{width:12px;height:12px;border-radius:50%;background:#1d1d1f;align-self:center;justify-self:center;display:none}
.die[data-v="1"] .pip:nth-child(-n+1),
.die[data-v="2"] .pip:nth-child(-n+2),
.die[data-v="3"] .pip:nth-child(-n+3),
.die[data-v="4"] .pip:nth-child(-n+4),
.die[data-v="5"] .pip:nth-child(-n+5),
.die[data-v="6"] .pip:nth-child(-n+6){display:block}
.die.held{box-shadow:0 0 0 2px var(--accent),var(--shadow-sm);background:var(--accent-tint)}
.die.held::after{content:"Held";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-family:var(--body);font-size:.625rem;font-weight:600;letter-spacing:.02em;
  padding:2px 8px;border-radius:999px;box-shadow:var(--shadow-sm);animation:badge-in .25s ease-out}
@keyframes badge-in{from{transform:translateX(-50%) scale(.6);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
html[data-theme="dark"] .die{background:#ececf0}
html[data-theme="dark"] .die.held{background:#d9e6f8}
.die.disabled,.die:disabled{cursor:default;opacity:.92}
.die[data-v="1"] .pip:nth-child(1){grid-area:2/2}
.die[data-v="2"] .pip:nth-child(1){grid-area:1/1}.die[data-v="2"] .pip:nth-child(2){grid-area:3/3}
.die[data-v="3"] .pip:nth-child(1){grid-area:1/1}.die[data-v="3"] .pip:nth-child(2){grid-area:2/2}.die[data-v="3"] .pip:nth-child(3){grid-area:3/3}
.die[data-v="4"] .pip:nth-child(1){grid-area:1/1}.die[data-v="4"] .pip:nth-child(2){grid-area:1/3}.die[data-v="4"] .pip:nth-child(3){grid-area:3/1}.die[data-v="4"] .pip:nth-child(4){grid-area:3/3}
.die[data-v="5"] .pip:nth-child(1){grid-area:1/1}.die[data-v="5"] .pip:nth-child(2){grid-area:1/3}.die[data-v="5"] .pip:nth-child(3){grid-area:2/2}.die[data-v="5"] .pip:nth-child(4){grid-area:3/1}.die[data-v="5"] .pip:nth-child(5){grid-area:3/3}
.die[data-v="6"] .pip:nth-child(1){grid-area:1/1}.die[data-v="6"] .pip:nth-child(2){grid-area:1/3}.die[data-v="6"] .pip:nth-child(3){grid-area:2/1}.die[data-v="6"] .pip:nth-child(4){grid-area:2/3}.die[data-v="6"] .pip:nth-child(5){grid-area:3/1}.die[data-v="6"] .pip:nth-child(6){grid-area:3/3}

.roll-controls{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 6px}
.rollbtn{min-width:230px}
.roll-info{color:var(--label-2);font-size:.8125rem;font-weight:500;min-height:18px;text-align:center}

/* ---- scorecard ---- */
.score-wrap{margin-top:18px;overflow-x:auto;border-radius:16px;border:var(--border);box-shadow:var(--shadow-sm);background:var(--surface-solid)}
table.score{border-collapse:collapse;width:100%;min-width:340px;background:var(--surface-solid)}
table.score th,table.score td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--hairline);font-size:.875rem}
/* sticky header separates from content with a soft scroll edge, not a hard divider */
table.score thead th{position:sticky;top:0;background:var(--surface-solid);font-size:.8125rem;z-index:2;font-weight:600;
  border-bottom:none;box-shadow:0 1px 0 var(--hairline),0 6px 10px -6px rgba(0,0,0,.10)}
table.score th.cat{text-align:left;font-weight:600;color:var(--label)}
table.score td.cat{text-align:left;color:var(--label-2);font-weight:500;white-space:nowrap}
/* first column stays put while the table scrolls sideways on small screens */
table.score td.cat,table.score th.cat{position:sticky;left:0;background:var(--surface-solid);z-index:1}
table.score thead th.cat{z-index:3}
table.score td.cat .pts{color:var(--label-3);font-weight:400;font-size:.6875rem;margin-left:4px}
.col-current{background:var(--accent-tint)}
th.col-current{background:var(--accent)!important;color:var(--on-accent)}
td.cell{font-variant-numeric:tabular-nums;font-weight:600;color:var(--label)}
td.cell.empty{color:var(--label-3)}
td.cell.preview{cursor:pointer;color:var(--green-text);background:var(--green-tint);border-radius:8px}
td.cell.preview:hover,td.cell.preview:focus-visible{background:var(--green-tint-2)}
td.cell.preview.zero{color:var(--red-text);background:var(--red-tint)}
td.cell.preview.zero:hover,td.cell.preview.zero:focus-visible{background:var(--red-tint-2)}
td.cell.illegal{color:var(--label-3)}
/* usable this turn: steady ring, no pulsing */
td.cell.usable{outline:2px solid var(--green);outline-offset:-2px}
td.cell.preview.zero.usable{outline-color:var(--red)}
/* can't use this turn (already scored, or illegal under Joker) */
td.cell.locked{opacity:.35}
tr.section-head td{background:var(--fill);color:var(--label-2);text-transform:uppercase;font-size:.6875rem;letter-spacing:.06em;
  text-align:left;font-weight:600;position:static}
tr.subtotal td,tr.total td{font-weight:600}
tr.subtotal td{color:var(--label-2)}
tr.total td{background:var(--fill)}
tr.total td.cell{color:var(--label);font-size:1rem;font-weight:700}
tr.total td.cat{background:var(--fill)}
th .pdot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
th .poff{opacity:.4}

.joker-note{margin:10px 0 0;padding:11px 14px;border-radius:var(--radius-md);text-align:center;font-weight:500;font-size:.875rem;
  background:var(--yellow-tint);color:var(--label);animation:pop-in .25s ease-out}
@keyframes pop-in{0%{transform:scale(.95);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---- Yahtzee celebration ---- */
.yahtzee-flash{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:9999;opacity:0;
  background:radial-gradient(60% 50% at 50% 45%,rgba(0,0,0,.22),transparent 70%)}
.yahtzee-flash.show{opacity:1} /* static fallback; the animated path runs via WAAPI */
.yahtzee-flash span{
  font-family:var(--display);font-weight:800;font-size:clamp(44px,13vw,140px);letter-spacing:-.02em;line-height:.95;
  text-align:center;
  background:linear-gradient(120deg,var(--accent),var(--purple),var(--red),var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
.dice-row.yz-pop .die{animation:yzDie .6s ease}
.dice-row.yz-pop .die:nth-child(2){animation-delay:.05s}
.dice-row.yz-pop .die:nth-child(3){animation-delay:.1s}
.dice-row.yz-pop .die:nth-child(4){animation-delay:.15s}
.dice-row.yz-pop .die:nth-child(5){animation-delay:.2s}
@keyframes yzDie{0%{transform:translateY(0)}30%{transform:translateY(-18px) scale(1.14) rotate(-7deg)}60%{transform:translateY(2px) scale(.97)}100%{transform:translateY(0)}}

/* ---- winner ---- */
.winner h2{font-size:1.625rem;text-align:center;margin-bottom:4px;font-weight:700;letter-spacing:-.015em}
.winner .crown{font-size:3.25rem;text-align:center;display:block;margin-bottom:4px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.15))}
.winner .champ{text-align:center;color:var(--label);font-weight:600;font-size:1.375rem;margin-bottom:18px}
.leaderboard{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.lbrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--fill)}
.lbrow.first{background:var(--yellow-tint)}
.lbrow .rank{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--fill-2);flex:none;font-variant-numeric:tabular-nums}
.lbrow.first .rank{background:var(--yellow);color:#1d1d1f}
.lbrow .nm{flex:1;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
.lbrow .nm .dot{width:13px;height:13px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.lbrow .sc{font-weight:700;font-size:1.25rem;font-variant-numeric:tabular-nums}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}

.footer{text-align:center;color:var(--label-2);font-size:.75rem;margin-top:22px;font-weight:400}
.footer-mini{text-align:center;color:var(--label-3);font-size:.6875rem;margin-top:26px;font-weight:400}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}

@media (max-width:560px){
  /* keep all five dice on one row on small phones */
  .dice-row{gap:9px;flex-wrap:nowrap}
  .die{width:56px;height:56px;border-radius:14px;padding:9px}
  .die .pip{width:10px;height:10px}
  .brand h1{font-size:1.625rem}
  .brand .logo{width:44px;height:44px;font-size:1.375rem}
  .wrap{padding:12px 10px 36px}
  .card{padding:18px}
  .rollbtn{min-width:190px}
  table.score th,table.score td{padding:8px 6px;font-size:.8125rem}
  .rc-code{font-size:1.875rem;letter-spacing:.1em}
}

/* ---- graceful fallbacks for materials ---- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.turnbar,.theme-toggle,.brand .logo{background:var(--surface-solid)}
}
@media (prefers-reduced-transparency:reduce){
  .card,.turnbar,.theme-toggle,.brand .logo{background:var(--surface-solid);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--hairline:rgba(60,60,67,.45)}
  html[data-theme="dark"]{--hairline:rgba(255,255,255,.38)}
  .card,.turnbar,.theme-toggle{background:var(--surface-solid);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---- eased theme change — no abrupt dark↔light brightness jump ----
   (applied via a short-lived .theme-fade class on <html> when toggling;
   more specific than the reduced-motion kill switch below, intentionally:
   easing a brightness change is itself an accessibility win) */
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease!important}

/* ---- optional sign-in (home screen) ---- */
.auth-area{margin-top:18px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:4px 0 14px;color:var(--label-3);
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--fill-2)}
.gsi-button{display:flex;justify-content:center;margin-bottom:8px;min-height:44px}
.auth-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);
  background:var(--fill);flex-wrap:wrap}
.auth-avatar{width:36px;height:36px;border-radius:50%;flex:none;background:var(--fill-2)}
.auth-avatar.hidden{display:none}
.auth-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.auth-meta b{font-weight:600;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-meta small{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- history screen ---- */
.history-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.hs-box{background:var(--fill);border-radius:var(--radius-md);padding:12px 8px;text-align:center}
.hs-box b{display:block;font-size:1.35rem;font-weight:700;color:var(--label);font-variant-numeric:tabular-nums}
.hs-box span{font-size:.72rem;color:var(--label-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.history-list{display:flex;flex-direction:column;gap:8px}
.hist-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md);background:var(--fill)}
.hist-row.won{background:var(--accent-tint)}
.hist-date{flex:none;width:86px;font-size:.72rem;color:var(--label-2);font-weight:600;line-height:1.3}
.hist-main{flex:1;min-width:0}
.hist-players{font-size:.88rem;font-weight:600;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-sub{font-size:.75rem;color:var(--label-2);margin-top:2px}
.hist-score{flex:none;font-size:1.2rem;font-weight:700;color:var(--label);font-variant-numeric:tabular-nums}

/* ---- room visibility badge (lobby) ---- */
.lobby-visibility{margin:10px 0 0;font-size:.8rem;font-weight:600;color:var(--label-2);text-align:center}
.lobby-visibility.is-public{color:var(--green)}

/* ---- danger (kick) buttons ---- */
.btn.danger{background:var(--red);color:#fff}
.lp-row .kick-btn{margin-left:8px;flex:none}
#skipRow .btn{margin:4px}

/* ---- public-room checkbox ---- */
.check-row{display:flex;align-items:center;gap:9px;margin:2px 0 12px;cursor:pointer;
  font-size:.85rem;font-weight:500;color:var(--label-2)}
.check-row input{width:18px;height:18px;accent-color:var(--accent);flex:none;cursor:pointer}

/* ---- game browser ---- */
.browse-list{display:flex;flex-direction:column;gap:8px}
.browse-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md);background:var(--fill)}
.browse-row.playing{opacity:.72}
.br-main{flex:1;min-width:0}
.br-title{font-weight:600;color:var(--label);font-size:.95rem}
.br-sub{font-size:.78rem;color:var(--label-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-count{flex:none;font-size:.75rem;font-weight:700;color:var(--label-2);background:var(--fill-2);
  padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.br-count.live{color:#fff;background:var(--green)}
.browse-row .btn.small{width:auto;flex:none}

/* ==========================================================================
   PARTY LAYER — "Roll Five" fun skin on top of the clean base above.
   Rounded type, a colourful room, chunky tactile buttons, glossy dice.
   Everything below only overrides; delete this block to get the plain look.
   ========================================================================== */
@font-face{font-family:'Fredoka';src:url('/fonts/fredoka-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url('/fonts/nunito-latin.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
:root{
  --display:'Fredoka',ui-rounded,'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Nunito',ui-rounded,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --coral:#ff5f6d; --sunny:#ffb340; --violet:#6c4cf5; --mint:#22c58b; --sky:#3da9fc; --pink:#ff6fa8;
  --accent:#6c4cf5; --accent-tint:rgba(108,76,245,.13);
  --bg:#fbf7ff;
  --radius:24px; --radius-md:14px;
  --g-primary:linear-gradient(135deg,#7b5cff,#5a3df0);
  --g-roll:linear-gradient(135deg,#ff8a4c,#ff4f7b);
  --g-sunny:linear-gradient(135deg,#ffd166,#ffab2e);
  --g-mint:linear-gradient(135deg,#3ddc97,#16b37c);
  --press:0 5px 0 rgba(30,10,80,.22);
}
html[data-theme="dark"]{
  --accent:#8f78ff; --accent-tint:rgba(143,120,255,.22);
  --bg:#130f24;
  --press:0 5px 0 rgba(0,0,0,.45);
}
body{
  background:
    radial-gradient(700px 520px at 8% -6%, rgba(255,95,109,.22), transparent 62%),
    radial-gradient(640px 520px at 104% 8%, rgba(108,76,245,.24), transparent 62%),
    radial-gradient(760px 600px at 50% 112%, rgba(34,197,139,.18), transparent 62%),
    radial-gradient(rgba(108,76,245,.075) 1.3px, transparent 1.4px) 0 0/22px 22px,
    var(--bg);
  background-attachment:fixed;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(700px 520px at 8% -6%, rgba(255,95,109,.20), transparent 62%),
    radial-gradient(640px 520px at 104% 8%, rgba(108,76,245,.34), transparent 62%),
    radial-gradient(760px 600px at 50% 112%, rgba(34,197,139,.16), transparent 62%),
    radial-gradient(rgba(255,255,255,.05) 1.3px, transparent 1.4px) 0 0/22px 22px,
    var(--bg);
  background-attachment:fixed;
}
h1,h2,h3,.screen-title,.btn,.mode-btn b,.rc-code,.turnbar .who h2,.score-pill b,.champ,.lbrow .sc{font-family:var(--display)}

/* brand: tilted die that wiggles now and then + candy wordmark */
.brand .logo{transform:rotate(-10deg);background:#fff;font-size:1.9rem;box-shadow:var(--press),var(--shadow-md);
  animation:logo-wiggle 6s ease-in-out infinite}
@keyframes logo-wiggle{0%,88%,100%{transform:rotate(-10deg)}91%{transform:rotate(12deg) scale(1.12)}94%{transform:rotate(-16deg) scale(1.06)}97%{transform:rotate(-6deg)}}
.brand h1{font-size:2.5rem;font-weight:700;letter-spacing:-.01em;line-height:1;
  background:linear-gradient(100deg,var(--coral),var(--sunny) 45%,var(--violet) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand span{font-weight:700;letter-spacing:.02em}

.screen-title{font-size:1.65rem;font-weight:700}
.card{border-radius:var(--radius)}

/* buttons: chunky + tactile (3D lip that squishes on press) */
.btn{background:var(--g-primary);font-weight:600;font-size:1.1rem;border-radius:16px;box-shadow:var(--press),0 10px 22px -10px rgba(108,76,245,.7);
  transition:transform .08s ease-out, box-shadow .08s ease-out, filter .15s}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 rgba(30,10,80,.22),0 4px 10px -6px rgba(108,76,245,.6)}
.btn.ghost{background:var(--surface-solid);color:var(--accent);box-shadow:var(--press);border:2px solid var(--accent-tint)}
.btn.ghost:active:not(:disabled){box-shadow:0 1px 0 rgba(30,10,80,.18)}
.btn.gold{background:var(--g-sunny);color:#3a2300;box-shadow:0 5px 0 #c97a00,0 10px 22px -10px rgba(255,171,46,.8)}
.btn.danger{background:linear-gradient(135deg,#ff6b6b,#e8304a);box-shadow:0 4px 0 #a3172c}
.btn.small{border-radius:999px;font-size:.9rem;box-shadow:0 3px 0 rgba(30,10,80,.2)}
.btn.small:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 rgba(30,10,80,.2)}
.btn:disabled{box-shadow:none}

/* the hero: Roll button, pulsing when it's your go */
.rollbtn{background:var(--g-roll);font-size:1.3rem;padding:16px 28px;min-width:250px;border-radius:20px;
  box-shadow:0 6px 0 #c42a52,0 14px 28px -10px rgba(255,79,123,.75)}
.rollbtn:active:not(:disabled){box-shadow:0 2px 0 #c42a52,0 6px 14px -8px rgba(255,79,123,.6)}
.rollbtn.your-go{animation:roll-pulse 1.6s ease-in-out infinite}
@keyframes roll-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* home mode tiles */
.mode-btn{border:none;color:#fff;padding:22px;border-radius:22px;box-shadow:var(--press),var(--shadow-md);position:relative;overflow:hidden}
.mode-btn::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14)}
#modeLocal{background:linear-gradient(135deg,#ff9a5c,#ff4f7b)}
#modeOnline{background:linear-gradient(135deg,#7b5cff,#3da9fc)}
.mode-btn small{color:rgba(255,255,255,.88);font-weight:600}
.mode-btn b{font-size:1.25rem;font-weight:700}
.mode-btn .mi{font-size:2.3rem;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));transition:transform .2s}
.mode-btn:hover{transform:translateY(-3px) rotate(-.6deg)}
.mode-btn:hover .mi{transform:rotate(-12deg) scale(1.12)}
.mode-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(30,10,80,.22)}

/* player-count picker + inputs */
.count-row button{font-family:var(--display);font-size:1.15rem;border-radius:14px;background:var(--surface-solid);box-shadow:0 3px 0 rgba(30,10,80,.12)}
.count-row button.active{background:var(--g-primary);color:#fff;box-shadow:0 3px 0 #3c22b8;transform:translateY(-1px)}
.pinput .dot{width:18px;height:18px;box-shadow:0 0 0 3px rgba(255,255,255,.7),0 2px 4px rgba(0,0,0,.15)}
.pinput input,.fld input{background:var(--surface-solid);border:2px solid var(--fill-2)}

/* turn bar wears the current player's colour */
.turnbar{--player:var(--accent);border-left:6px solid var(--player);
  background:linear-gradient(100deg,color-mix(in srgb,var(--player) 18%,transparent),transparent 70%),var(--surface)}
.turnbar .who .dot{width:20px;height:20px;box-shadow:0 0 0 4px color-mix(in srgb,var(--player) 25%,transparent)}
.turnbar .who h2{font-size:1.3rem;font-weight:700}
.turnbar .score-pill{background:var(--g-sunny);color:#3a2300;box-shadow:0 3px 0 #c97a00}
.turnbar .score-pill span{color:rgba(58,35,0,.75);font-weight:700}

/* dice: glossy, with a chunky edge; gold when held */
.die{border-radius:18px;border:none;background:linear-gradient(160deg,#ffffff 0%,#f4f0ff 100%);
  box-shadow:0 5px 0 #d6cff2,0 10px 18px -8px rgba(60,30,140,.35),inset 0 1px 0 #fff}
.die .pip{background:radial-gradient(circle at 35% 30%,#4a3f6b,#1d1630)}
.die[data-v="1"] .pip{background:radial-gradient(circle at 35% 30%,#ff7a8a,#e02950);width:15px;height:15px}
.die.held{background:linear-gradient(160deg,#fff4cf,#ffd56b);box-shadow:0 0 0 3px var(--sunny),0 5px 0 #d99a1f,0 10px 18px -8px rgba(255,171,46,.6)}
.die.held::after{content:"HELD";background:var(--g-sunny);color:#3a2300;font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.06em}
html[data-theme="dark"] .die{background:linear-gradient(160deg,#ffffff,#e8e3ff)}
html[data-theme="dark"] .die.held{background:linear-gradient(160deg,#fff4cf,#ffd56b)}

/* scorecard: candy chips */
.score-wrap{border-radius:20px;box-shadow:var(--press),var(--shadow-md)}
td.cell.preview{background:var(--g-mint);color:#fff;border-radius:10px;font-weight:800;text-shadow:0 1px 0 rgba(0,0,0,.12)}
td.cell.preview:hover,td.cell.preview:focus-visible{filter:brightness(1.07)}
td.cell.preview.zero{background:linear-gradient(135deg,#ff8a8a,#f2546b);color:#fff}
td.cell.usable{outline:3px solid rgba(255,255,255,.9);outline-offset:-4px}
td.cell.preview.zero.usable{outline-color:rgba(255,255,255,.9)}
tr.total td,tr.total td.cat{background:var(--yellow-tint)}
tr.total td.cell{font-family:var(--display);font-size:1.15rem}
tr.section-head td{color:var(--accent);font-weight:800}

/* lobby + winner */
.rc-code{background:linear-gradient(100deg,var(--coral),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.lbrow{border-radius:16px}
.lbrow.first{background:var(--g-sunny);color:#3a2300;box-shadow:0 4px 0 #c97a00;transform:scale(1.02)}
.lbrow.first .rank{background:#fff;color:#c97a00}
.winner .crown{animation:crown-bob 2.4s ease-in-out infinite;display:inline-block;width:100%}
@keyframes crown-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}
.champ{font-size:1.6rem;font-weight:700;background:linear-gradient(100deg,var(--coral),var(--sunny),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* floating controls pick up the party palette */
.chat-launcher{background:var(--g-primary);box-shadow:var(--press),var(--shadow-md)}
.chat-msg.me .chat-bubble,.chat-send{background:var(--g-primary)}

/* ---- Android app: ad-banner space + native feel ----
   --ad-h is set from the banner's real height (0 on the website / no ad), so
   the page and every floating control sit above the banner, never under it. */
:root{--ad-h:0px}
html.is-native body{padding-bottom:calc(var(--ad-h) + env(safe-area-inset-bottom))}
.chat-launcher{bottom:calc(max(14px,env(safe-area-inset-bottom)) + var(--ad-h))}
.chat-panel{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 66px + var(--ad-h))}
html.is-native{-webkit-user-select:none;user-select:none;overscroll-behavior:none}
html.is-native input,html.is-native textarea{-webkit-user-select:text;user-select:text}
button,.die,td.cell{touch-action:manipulation}

/* ---- chat safety UI ---- */
.chat-terms{padding:12px 14px;border-top:var(--border);font-size:.82rem;color:var(--label-2);line-height:1.4}
.chat-terms p{margin:0 0 10px}
.chat-terms .btn{width:100%}
.chat-bubble.tappable{cursor:pointer}
.chat-actions{display:flex;gap:6px;margin:4px 0 2px 4px}
.chat-actions button{border:none;border-radius:999px;padding:5px 11px;font:inherit;font-size:.75rem;font-weight:700;
  background:var(--fill-2);color:var(--label);cursor:pointer}
.chat-actions button.danger{background:var(--red);color:#fff}
.chat-form.hidden{display:none}
.lp-row .report-btn{margin-left:8px;flex:none;min-width:34px;padding:6px 8px}
.terms-note{margin:14px 0 0}
.terms-note a{color:inherit}

/* ---- footer legal links ---- */
.footer-mini a{color:inherit}
.link-btn{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}

/* ---- toast ---- */
.cheat-toast{position:fixed;left:50%;bottom:calc(max(24px,env(safe-area-inset-bottom)) + var(--ad-h));
  transform:translate(-50%,16px);z-index:9998;max-width:88vw;padding:11px 18px;border-radius:980px;
  border:var(--border);background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--label);font-weight:600;font-size:.9rem;text-align:center;box-shadow:var(--shadow-md);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.cheat-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- accessibility: calm everything down on request ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}