/* Farkle Fever: a warm felt, ivory dice, brass and fever red. Sizes are in em:
   game.js sets one font size per screen so the whole thing fits any box. */
:root{--felt:#6d1a28;--felt-deep:#2e0a13;--fever:#e2483f;--fever-hi:#ff7a59;--ivory:#fffaf0;--ivory-lo:#efdfbd;--pipc:#33121a;
  --round:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;--good:#2f9e6e}
body{background:radial-gradient(120% 90% at 50% 20%,#8a2333 0%,var(--felt) 45%,var(--felt-deep) 100%) fixed;color:var(--ink)}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* ---------------- home */
.home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;padding:1em;text-align:center}
.home-left,.home-right{display:flex;flex-direction:column;align-items:center;gap:.45em}
.home-right{gap:.7em;min-width:14em}
.home-right .pill{width:100%}
.home .title{font:900 3.3em/1 var(--round);color:var(--ivory);letter-spacing:.01em;text-shadow:0 3px 0 #5a1420,0 10px 26px rgba(0,0,0,.45)}
.home .title::first-letter{color:var(--fever-hi)}
.home-art{width:10em;height:6em;animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-.25em) rotate(-2deg)}}
.tagline{margin:0;color:var(--ink);font-size:1.15em}
.best{margin:0;color:var(--brass-hi);font-weight:700;min-height:1.4em}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .3em}
.links .link{min-height:44px;font-size:1em}
.home.wide{flex-direction:row;gap:3em}

/* buttons */
.pill{font-family:var(--round);font-size:1.2em;min-height:2.4em;padding:.45em 1.6em;border-radius:999px;transition:transform .08s,filter .2s,opacity .2s}
.pill:disabled{filter:grayscale(.85) brightness(.75);opacity:.6;cursor:default;transform:none}
.pill.bank{background:linear-gradient(180deg,#7fe0b0,var(--good) 50%,#1d6e4b);color:#062418;box-shadow:0 1px 0 #fff8 inset,0 4px 0 #134a32,0 8px 16px rgba(0,0,0,.4)}
.pill.ghost{background:rgba(0,0,0,.25);color:var(--ink);box-shadow:inset 0 0 0 2px var(--hair)}
.pill.pulse:not(:disabled){animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{filter:brightness(1.18) drop-shadow(0 0 .5em rgba(246,227,171,.7))}}

/* ---------------- game stage */
#game{font-size:16px}
.stage{position:absolute;inset:0;margin:0 auto;max-width:70em;display:flex;flex-direction:column;
  padding:max(.35em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) max(.5em,env(safe-area-inset-bottom)) max(.6em,env(safe-area-inset-left))}
.bar{padding:0;flex:none;height:3em;gap:.6em}
.bar .jewel{width:2.6em;height:2.6em;min-width:44px;min-height:44px}
.status{font:800 1.2em/1.1 var(--round);text-align:center;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status.cpu{color:var(--fever-hi)}
.lvl{font:700 .85em/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--brass-hi);background:rgba(0,0,0,.28);border:1px solid var(--hair);border-radius:999px;padding:.55em .9em;white-space:nowrap}

.board{flex:1;min-height:0;display:flex;flex-direction:column;gap:.5em}
.side{display:flex;flex-direction:column;gap:.5em;flex:none}
.play{flex:1;min-height:0;display:flex;flex-direction:column;gap:.4em}
#game.wide .board{flex-direction:row;gap:1em}
#game.wide .side{width:40%;max-width:24em;justify-content:center}
#game.wide .scores{flex-direction:column}

.scores{display:flex;gap:.5em}
.pl{flex:1;min-width:0;position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 .5em;padding:.45em .8em .6em;border-radius:.9em;
  background:rgba(0,0,0,.24);border:2px solid transparent;transition:border-color .25s,background .25s,transform .25s}
.pl .who{font-size:1em;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .num{font:900 1.75em/1.05 var(--round);color:var(--ivory);font-variant-numeric:tabular-nums}
.pl .meter{grid-column:1/-1;height:.45em;border-radius:1em;background:rgba(0,0,0,.35);overflow:hidden;margin-top:.25em}
.pl .meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi));transition:width .6s cubic-bezier(.2,.8,.2,1)}
#pl1 .meter i{background:linear-gradient(90deg,#a3322e,var(--fever-hi))}
.pl.on{border-color:var(--brass);background:rgba(255,236,190,.1)}
#pl1.on{border-color:var(--fever)}
.pl.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.06)}}

.turnbox{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.4em .9em;border-radius:.9em;background:rgba(255,250,240,.08);border:1px solid var(--hair);min-height:4.2em;position:relative}
.tleft{display:flex;flex-direction:column;line-height:1}
.lbl{font-size:.85em;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}
#turnPts{font:900 2.3em/1.05 var(--round);color:var(--brass-hi);font-variant-numeric:tabular-nums}
#turnPts.lost{color:#b9a7a0;text-decoration:line-through}
.tright{display:flex;flex-direction:column;align-items:flex-end;gap:.25em;min-width:0}
.selpts{font:800 1.1em/1 var(--round);color:var(--good);min-height:1em;white-space:nowrap}
.selpts.no{color:#ffb0a0;font-weight:600;font-size:.95em}
.kept{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.2em;min-height:1.6em;--d:1.6em}
.kept .die{cursor:default;box-shadow:0 .08em .15em rgba(0,0,0,.35)}

/* the tray and its dice */
.tray{flex:1;min-height:0;position:relative;display:grid;place-items:center;border-radius:1.1em;
  background:radial-gradient(90% 80% at 50% 40%,rgba(255,255,255,.07),rgba(0,0,0,.22));box-shadow:inset 0 .2em .8em rgba(0,0,0,.4)}
.dice{display:grid;gap:calc(var(--d) * .2);grid-template-columns:repeat(var(--cols,3),var(--d));--d:4em}
.die{width:var(--d);height:var(--d);padding:calc(var(--d) * .12);border:0;border-radius:calc(var(--d) * .2);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);
  background:linear-gradient(155deg,#fff 0%,var(--ivory) 45%,var(--ivory-lo) 100%);
  box-shadow:inset 0 calc(var(--d)*-.05) 0 rgba(150,110,60,.25),0 calc(var(--d)*.06) 0 #b9a27a,0 calc(var(--d)*.12) calc(var(--d)*.18) rgba(0,0,0,.4);
  transition:transform .16s cubic-bezier(.3,1.6,.5,1),box-shadow .16s,filter .3s,opacity .3s;position:relative;touch-action:manipulation}
.die i{align-self:center;justify-self:center;width:62%;height:62%;border-radius:50%;background:transparent}
.die i.on{background:radial-gradient(circle at 35% 30%,#6a2a33,var(--pipc) 70%)}
.die.f1 i.on{background:radial-gradient(circle at 35% 30%,#ff8a7a,#c62f3a 70%);width:80%;height:80%}
.die.held{transform:translateY(calc(var(--d)*-.12)) scale(1.04);box-shadow:0 0 0 calc(var(--d)*.05) var(--brass-hi),0 0 calc(var(--d)*.35) var(--brass),0 calc(var(--d)*.2) calc(var(--d)*.25) rgba(0,0,0,.45)}
.die.hint::after{content:"";position:absolute;left:30%;right:30%;bottom:calc(var(--d)*-.16);height:calc(var(--d)*.06);border-radius:1em;background:var(--brass-hi);opacity:.85;box-shadow:0 0 .5em var(--brass)}
.die.held.hint::after{display:none}
.die.idle{opacity:.55;filter:saturate(.4)}
.die.dead{filter:grayscale(1) brightness(.6);transform:rotate(-6deg)}
.die.shake{animation:dshake .35s}
@keyframes dshake{20%{transform:translateX(-6%) rotate(-6deg)}50%{transform:translateX(6%) rotate(5deg)}80%{transform:translateX(-3%)}}
.die:focus-visible{outline:3px solid var(--brass-hi);outline-offset:4px}
.die:disabled{cursor:default;color:inherit}

.say{margin:0;text-align:center;min-height:1.5em;font-size:1.05em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.say.warn{color:#ffc2b5}
.say.good{color:#9ff0c6}
.btns{display:flex;gap:.7em;justify-content:center;flex:none}
.btns .pill{flex:1;max-width:12em;padding:.4em .6em;white-space:nowrap}

/* the big word: Farkle! / Hot dice! */
.stamp{position:absolute;left:50%;top:50%;z-index:10;pointer-events:none;font:900 3.6em/1 var(--round);color:var(--ivory);white-space:nowrap;
  text-shadow:0 .06em 0 #5a1420,0 .15em .5em rgba(0,0,0,.6);opacity:0;transform:translate(-50%,-50%) scale(.3)}
.stamp.show{animation:stamp 1.1s cubic-bezier(.2,1.4,.4,1) forwards}
.stamp.red{color:#ffd9cf;-webkit-text-stroke:.03em #c62f3a}
.stamp.gold{color:var(--brass-hi)}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(-3deg)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}100%{opacity:0;transform:translate(-50%,-62%) scale(.96) rotate(-3deg)}}
.float{position:fixed;z-index:12;pointer-events:none;font:900 1.8em/1 var(--round);color:var(--brass-hi);text-shadow:0 .1em .3em rgba(0,0,0,.6)}

/* cards */
.card{font-size:1em}
.card p{margin:.3em 0}
.how-table{width:100%;border-collapse:collapse;margin:.4em 0}
.how-table td{padding:.3em .2em;border-bottom:1px solid rgba(224,189,109,.14)}
.how-table td:last-child{text-align:right;font-weight:700;color:var(--brass-hi);white-space:nowrap}
.row:disabled{opacity:.5;cursor:default}
.row .tag{font-size:.8em;color:var(--brass-hi);white-space:nowrap}
.card.result h2{font-size:2em}
.card.result.won h2{color:var(--brass-hi)}
.card.result .final{font:800 1.15em/1.3 var(--round);text-align:center;margin:.2em 0}
.card .actions .pill{min-width:11em}
.card .rows .row{min-height:44px}
@media (max-height:420px){.card{padding:.8em 1em .8em}.card h2{margin-bottom:.35em;font-size:1.35em}.card .actions{margin-top:.5em;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .card .actions .pill{min-width:0;font-size:1.05em}.card.result h2{font-size:1.5em}.card .stats{margin:.1em 0 .2em}}
.home.wide .home-art{width:7.5em;height:4.5em}