/* Five Dice: the table, the pad and the dice. Every size is in em: game.js sets one font size per screen. */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* ---------------- home */
.home{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:.5em}
.home-right{gap:.6em;min-width:15em}
.home-right .pill{width:100%}
.title{margin:.1em 0 0;font:900 3.4em/1 var(--round);color:var(--paper);letter-spacing:.01em;text-shadow:0 3px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.35)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em}
.best{margin:0;color:var(--gold-hi);font-weight:700;min-height:1.4em}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .2em}
.links .link{font-size:.95em}
.home.wide{flex-direction:row;gap:3em}
.home-art{display:flex;gap:.9em;margin-bottom:.4em;--d:2.9em}
.art-die{width:var(--d);height:var(--d);animation:bob 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
@keyframes bob{50%{transform:translateY(-.25em)}}

/* ---------------- the game stage */
.stage{position:absolute;inset:0;margin:0 auto;max-width:72em;display:grid;gap:.35em;padding:max(.4em,env(safe-area-inset-top)) max(.5em,env(safe-area-inset-right)) max(.4em,env(safe-area-inset-bottom)) max(.5em,env(safe-area-inset-left));
  grid-template-columns:minmax(0,1fr);grid-template-rows:2.8em 2.6em minmax(0,1fr) 5.4em 5.6em;grid-template-areas:"bar" "players" "sheet" "tray" "controls"}
#game.wide .stage{grid-template-columns:31em minmax(0,1fr);grid-template-rows:2.8em 2.6em minmax(0,1fr) 5.6em;column-gap:1em;
  grid-template-areas:"sheet bar" "sheet players" "sheet tray" "sheet controls"}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.5em}
.bar .jewel{width:2.6em;height:2.6em}
.bar-pad{width:2.6em;min-width:44px}
.round{font:800 1.1em/1 var(--round);color:var(--ink);letter-spacing:.02em}

.players{grid-area:players;display:flex;gap:.35em;justify-content:center;min-width:0}
.chip{display:flex;align-items:center;gap:.45em;padding:0 .8em;min-height:2.4em;border-radius:999px;border:0;background:rgba(0,0,0,.22);color:var(--ink);font-size:.95em;min-width:0;position:relative}
.chip b{font:800 1.1em/1 var(--round)}
.chip .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.on{background:var(--paper);color:var(--paper-ink)}
.chip.up::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--gold);box-shadow:0 0 .5em var(--gold);flex:none}
.chip.best{background:none;box-shadow:inset 0 0 0 2px var(--hair);color:var(--ink-soft)}

/* ---------------- the score pad */
.sheet{grid-area:sheet;display:grid;grid-template-columns:1fr 1fr;background:var(--paper);color:var(--paper-ink);border-radius:.9em;
  box-shadow:0 .5em 1.4em rgba(0,0,0,.3);overflow:hidden;min-height:0}
.col{display:grid;grid-template-rows:repeat(8,minmax(0,1fr));min-height:0}
.col+.col{border-left:2px solid #e4d8bd}
.cat{display:flex;align-items:center;justify-content:space-between;gap:.3em;padding:0 .7em;border:0;border-bottom:1px solid #ebe1c9;background:none;color:var(--paper-ink);
  font-size:.95em;text-align:left;min-height:0;width:100%;position:relative}
.cat:last-child{border-bottom:0}
.cat .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat .val{font:800 1.15em/1 var(--round);min-width:1.6em;text-align:right;white-space:nowrap}
.cat:disabled{cursor:default;color:var(--paper-ink)}
.cat.filled .name{color:var(--paper-soft)}
.cat.legal{background:#fffdf6;cursor:pointer}
.cat.legal .val{color:var(--blue);font-weight:700;font-style:italic}
.cat.legal.zero .val{color:#b9ae9c}
.cat.legal:hover{background:#fff6dc}
.cat.sel{background:var(--gold-hi)!important;box-shadow:inset .3em 0 0 var(--gold-lo)}
.cat.sel .val{color:var(--paper-ink);font-style:normal}
.cat.flash{animation:flash .9s ease-out}
@keyframes flash{0%{background:var(--gold)}100%{background:transparent}}
.cat.sum{font-size:.82em;color:var(--paper-soft);background:var(--paper-2)}
.cat.sum .val{font-size:1.15em;color:var(--paper-soft)}
.cat.sum.got .val{color:#1f7a55}
.cat.total{background:var(--felt);color:#fff}
.cat.total .val{font-size:1.4em}

/* ---------------- dice */
.tray{grid-area:tray;display:flex;justify-content:center;align-items:center;gap:.7em;--d:3.5em}
#game.wide .tray{--d:4em;gap:.6em}
.die{position:relative;width:var(--d);padding:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:.3em;min-width:44px}
.die:disabled{cursor:default}
.hop{display:block;width:var(--d);height:var(--d);transition:transform .18s}
.die.held .hop{transform:translateY(-.35em)}
.die.held .face{box-shadow:inset 0 0 0 .16em var(--gold),inset -.08em -.14em .25em rgba(120,95,50,.22),0 .12em 0 #cdbd98,0 .5em .8em rgba(0,0,0,.35)}
.held-tag{font:800 .72em/1 var(--round);letter-spacing:.06em;text-transform:uppercase;color:var(--felt-lo);background:var(--gold);border-radius:999px;padding:.25em .6em;visibility:hidden}
.die.held .held-tag{visibility:visible}
.die.idle .hop{opacity:.55;filter:saturate(.6)}
.die:focus-visible{outline:none}
.die:focus-visible .hop{outline:3px solid var(--gold-hi);outline-offset:4px;border-radius:.6em}

.face{position:relative;display:grid;width:var(--d);height:var(--d);grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:15%;border-radius:18%;
  background:radial-gradient(circle at 32% 28%,#fffef9,#f4ecda 62%,#e2d5b9);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),inset -.08em -.14em .25em rgba(120,95,50,.22),inset .06em .08em .12em #fff,0 .12em 0 #cdbd98,0 .3em .5em rgba(0,0,0,.3)}
.face i{width:78%;height:78%;border-radius:50%;place-self:center;background:radial-gradient(circle at 40% 35%,#4a423a,#16120f 70%);box-shadow:inset 0 .05em .05em rgba(255,255,255,.2)}
.face.one i{width:100%;height:100%;background:radial-gradient(circle at 40% 35%,#e0604e,#a82d1f 70%)}
.p1{grid-area:1/1}.p3{grid-area:1/3}.p4{grid-area:2/1}.p5{grid-area:2/2}.p6{grid-area:2/3}.p7{grid-area:3/1}.p9{grid-area:3/3}

/* ---------------- controls */
.controls{grid-area:controls;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.3em;min-width:0}
.say{margin:0;color:var(--ink-soft);font-size:.95em;min-height:1.4em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.btns{display:flex;gap:.6em;justify-content:center;width:100%}
.btns .pill{flex:1 1 0;max-width:14em;padding:.6em 1em;min-height:2.9em;white-space:nowrap}
.pill.score{background:var(--paper);color:var(--felt);box-shadow:0 4px 0 #b9ab8a,0 8px 16px rgba(0,0,0,.3)}

/* ---------------- cards */
.card .label{margin:.6em 0 .3em;font-weight:700;color:var(--paper-soft);font-size:.9em}
.card .choices .choice{flex:1}
.how p{margin:.35em 0;line-height:1.35}
.standings .row.me{background:#fff2cc}
.result.won h2{color:#b0700a}