:root {
  --bg: #14100d;
  --card: #201914;
  --line: #3d3128;
  --field: #191310;
  --text: #f5ece1;
  --muted2: #ab9885;
  --accent: #ff6b35;
  --accent2: #2b2018;
  --good: #6bbf59;
  --bad: #e5484d;
  --gold: #ffc94d;
  --die: #f7f2e8;
  --die-ink: #241c14;
  --die-edge: #c9b8a0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
#app { max-width: 460px; margin: 0 auto; min-height: 100vh; padding: 10px 12px 16px; display: flex; flex-direction: column; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.muted { color: var(--muted2); font-size: 14px; }
.h { font-size: 12px; color: var(--muted2); text-transform: uppercase; letter-spacing: .06em; }
input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--text); font-size: 16px; margin: 6px 0; }
button { width: 100%; padding: 13px; border-radius: 10px; border: 0; background: var(--accent); color: #2b0f02; font-size: 15px; font-weight: 800; margin-top: 10px; cursor: pointer; }
button.sec { background: var(--accent2); color: var(--text); font-weight: 600; border: 1px solid var(--line); }
button.ghost { background: transparent; color: var(--muted2); border: 1px solid var(--line); font-weight: 600; }
button:disabled { opacity: .4; cursor: not-allowed; }
.err { color: var(--bad); font-size: 14px; min-height: 18px; margin-top: 8px; }
.right { margin-left: auto; }
.good { color: var(--good); } .bad { color: var(--bad); } .gold { color: var(--gold); }

/* Home / hero */
.hero { text-align: center; padding: 22px 0 6px; }
.logo-dice { display: inline-flex; gap: 10px; }
.logo-dice .ld { width: 54px; height: 54px; border-radius: 12px; background: var(--die); box-shadow: 0 4px 0 var(--die-edge), 0 8px 22px rgba(255,107,53,.25); transform: rotate(-8deg); display: grid; place-items: center; font-size: 30px; }
.logo-dice .ld:nth-child(2) { transform: rotate(7deg); }
.title { font-size: 34px; font-weight: 900; letter-spacing: .04em; margin-top: 14px; }
.title .hot { color: var(--accent); }
.tag { color: var(--muted2); margin-top: 8px; font-size: 15px; }

/* Lobby */
.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.brand { font-weight: 800; letter-spacing: .02em; }
.code { font-size: 30px; font-weight: 800; letter-spacing: .12em; text-align: center; margin: 4px 0; color: var(--accent); }
.row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.av { width: 30px; height: 30px; border-radius: 8px; background: var(--die); color: var(--die-ink); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex: none; }
.pill { font-size: 11px; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted2); }
.tiers { display: flex; gap: 6px; margin-top: 6px; }
.tier { flex: 1; padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.tier.sel { border-color: var(--accent); background: rgba(255,107,53,.14); color: var(--accent); }
.iconbtn { width: auto; margin: 0; padding: 5px 9px; font-size: 13px; background: transparent; border: 1px solid var(--line); color: var(--muted2); }

/* Play */
.playbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.turnchip { font-weight: 800; font-size: 15px; }
.turnchip.you { color: var(--accent); }
.metachip { font-size: 12px; color: var(--muted2); }
.metachip.final { color: var(--gold); font-weight: 800; }
.scores { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; }
.pscore { flex: 1 0 auto; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px; background: var(--field); font-size: 12px; }
.pscore.turn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pscore .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 86px; }
.pscore .sc { font-size: 16px; font-weight: 800; }

.table { background: radial-gradient(ellipse at 50% 20%, #2a2019 0%, #1b1510 70%); border: 1px solid var(--line); border-radius: 16px; padding: 14px 12px 16px; }
.keptrow { display: flex; align-items: center; gap: 5px; min-height: 34px; flex-wrap: wrap; }
.keptrow .lbl { font-size: 11px; color: var(--muted2); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.turnpts { margin-left: auto; font-size: 20px; font-weight: 900; color: var(--gold); }
.dicerow { display: flex; justify-content: center; gap: 9px; margin: 16px 0 6px; min-height: 56px; flex-wrap: wrap; }

/* Dice with CSS pips */
.die { position: relative; width: 52px; height: 52px; border-radius: 11px; background: var(--die); box-shadow: 0 3px 0 var(--die-edge); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 8px; gap: 1px; cursor: default; border: 0; margin: 0; flex: none; transition: transform .08s; }
.die .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--die-ink); place-self: center; }
.die.mini { width: 30px; height: 30px; border-radius: 7px; padding: 5px; box-shadow: 0 2px 0 var(--die-edge); }
.die.mini .pip { width: 5px; height: 5px; }
.die.scoring { cursor: pointer; box-shadow: 0 3px 0 var(--die-edge), 0 0 0 2px rgba(255,201,77,.55); }
.die.sel { transform: translateY(-7px); box-shadow: 0 8px 0 var(--die-edge), 0 0 0 3px var(--accent); }
.die.dud { opacity: .55; }
/* pip layout via value class */
.p1 .pip:nth-child(1) { grid-area: 2 / 2; }
.p2 .pip:nth-child(1) { grid-area: 1 / 3; } .p2 .pip:nth-child(2) { grid-area: 3 / 1; }
.p3 .pip:nth-child(1) { grid-area: 1 / 3; } .p3 .pip:nth-child(2) { grid-area: 2 / 2; } .p3 .pip:nth-child(3) { grid-area: 3 / 1; }
.p4 .pip:nth-child(1) { grid-area: 1 / 1; } .p4 .pip:nth-child(2) { grid-area: 1 / 3; } .p4 .pip:nth-child(3) { grid-area: 3 / 1; } .p4 .pip:nth-child(4) { grid-area: 3 / 3; }
.p5 .pip:nth-child(1) { grid-area: 1 / 1; } .p5 .pip:nth-child(2) { grid-area: 1 / 3; } .p5 .pip:nth-child(3) { grid-area: 2 / 2; } .p5 .pip:nth-child(4) { grid-area: 3 / 1; } .p5 .pip:nth-child(5) { grid-area: 3 / 3; }
.p6 .pip:nth-child(1) { grid-area: 1 / 1; } .p6 .pip:nth-child(2) { grid-area: 1 / 3; } .p6 .pip:nth-child(3) { grid-area: 2 / 1; } .p6 .pip:nth-child(4) { grid-area: 2 / 3; } .p6 .pip:nth-child(5) { grid-area: 3 / 1; } .p6 .pip:nth-child(6) { grid-area: 3 / 3; }

@keyframes shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.rolling .die { animation: shake .35s ease-in-out; }

.selpts { text-align: center; min-height: 20px; font-size: 14px; font-weight: 800; color: var(--gold); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.acts button { margin-top: 0; padding: 13px 6px; font-size: 15px; }
.acts .bank { background: var(--gold); color: #2b1d02; }
.hint { text-align: center; font-size: 12px; color: var(--muted2); min-height: 16px; margin-top: 6px; }

/* FX overlays */
.fxwrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 100; }
.farkle-fx { font-size: 46px; font-weight: 900; color: var(--bad); text-shadow: 0 4px 30px rgba(229,72,77,.6); animation: slam .28s ease-out; letter-spacing: .04em; background: rgba(15,10,8,.88); border: 2px solid var(--bad); border-radius: 18px; padding: 18px 30px; }
.hot-fx { font-size: 30px; font-weight: 900; color: var(--accent); text-shadow: 0 4px 30px rgba(255,107,53,.65); animation: slam .28s ease-out; background: rgba(15,10,8,.88); border: 2px solid var(--accent); border-radius: 18px; padding: 14px 24px; }
@keyframes slam { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Results */
.res-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; background: var(--field); border: 1px solid var(--line); margin-bottom: 6px; }
.res-row.win { border-color: var(--gold); background: rgba(255,201,77,.1); }
.res-row .rk { width: 24px; font-weight: 800; color: var(--muted2); }
.res-row .sc { margin-left: auto; font-size: 20px; font-weight: 800; }
.bigscore { text-align: center; font-size: 52px; font-weight: 900; color: var(--gold); margin: 6px 0; }
.pb { text-align: center; font-size: 14px; color: var(--muted2); }
.pb .new { color: var(--good); font-weight: 800; }

/* Overlays (QR / rules / about / name edit) */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; text-align: center; max-width: 340px; width: 100%; max-height: 86vh; overflow-y: auto; }
.box img { display: block; margin: 12px auto; border-radius: 10px; background: #fff; padding: 8px; width: 200px; }
.box p { color: var(--muted2); font-size: 14px; line-height: 1.5; }
.rules-t { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.rules-t td { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.rules-t td:last-child { text-align: right; font-weight: 700; color: var(--gold); }
.bmc { background: var(--gold); color: #2b1d02; }
.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(38,28,20,.97); border: 1px solid var(--accent); color: var(--text); padding: 9px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; z-index: 200; max-width: 92%; text-align: center; transition: opacity .5s; }
.linkrow { text-align: center; margin-top: 14px; }
.linkrow a { color: var(--muted2); font-size: 12px; text-decoration: underline; }
.linkbtn { background: none; border: 0; color: var(--muted2); font-size: 12px; text-decoration: underline; cursor: pointer; width: auto; margin: 0; padding: 0; }