/* Shut the Box: the walnut table, the felt box, the tiles and the dice. In #game every size is in em
   (game.js sets one font size per screen) or in the tile vars --tw/--th/--gap it measures. */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* ---------------- home */
.home{align-items:center;justify-content:center;gap:.9em;padding:1em;text-align:center}
.home-left,.home-right{display:flex;flex-direction:column;align-items:center;gap:.45em}
.home-right{min-width:15em}
.home-right .pill{width:100%}
.title{margin:.05em 0 0;font:900 3.3em/1 var(--round);color:var(--paper);letter-spacing:.01em;text-shadow:0 3px 0 rgba(0,0,0,.3),0 10px 24px rgba(0,0,0,.4)}
.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}
.home.wide{flex-direction:row;gap:2.6em}
.home-art{display:flex;gap:.3em;padding:.45em .55em .55em;border-radius:.6em;background:linear-gradient(var(--wood-hi),var(--wood));box-shadow:inset 0 0 0 .3em var(--wood-lo),0 .5em 1.2em rgba(0,0,0,.4)}
.home-art i{display:grid;place-items:center;width:1.9em;height:2.6em;border-radius:.3em;font:900 1.3em/1 var(--round);font-style:normal;color:var(--paper-ink);
  background:linear-gradient(180deg,#fffdf6,#efe3c8);box-shadow:0 .12em 0 #c9b48e;animation:bob 3.4s ease-in-out infinite;animation-delay:calc(var(--k,0) * -.6s)}
.home-art i:nth-child(2){--k:1}.home-art i:nth-child(3){--k:2}.home-art i:nth-child(4){--k:3}.home-art i:nth-child(5){--k:4}
.home-art i.down{color:transparent;background:linear-gradient(180deg,var(--wood-lo),#5d3519);box-shadow:none;transform:translateY(.95em) scaleY(.28);animation:none}
@keyframes bob{50%{transform:translateY(-.18em)}}
.levels{display:grid;grid-template-columns:repeat(4,3em);gap:.4em;justify-content:center}
.lv{width:3em;height:2.6em;min-width:44px;min-height:44px;border-radius:.6em;border:2px solid var(--hair);background:rgba(0,0,0,.22);color:var(--ink);font:800 1.1em/1 var(--round);padding:0}
.lv[aria-pressed=true]{background:var(--paper);color:var(--paper-ink);border-color:var(--gold-hi);box-shadow:0 0 0 2px var(--gold)}
.lv.locked{opacity:.4;cursor:default;border-style:dashed}
.lv:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}
.level-say{margin:0 0 .2em;color:var(--ink-soft);font-size:.95em;min-height:1.4em}

/* ---------------- the game stage */
.stage{position:absolute;inset:0;margin:0 auto;display:grid;gap:.5em;align-content:stretch;
  padding:max(.4em,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));
  grid-template-columns:minmax(0,1fr);grid-template-rows:3.2em minmax(0,1fr) auto}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:0}
.bar .jewel{width:2.7em;height:2.7em}
.tools{display:flex;gap:.45em}
.info{display:flex;flex-direction:column;align-items:center;line-height:1.15;min-width:0;text-align:center}
.info b{font:800 1.15em/1.1 var(--round)}
.info span{color:var(--gold-hi);font-weight:700;font-size:.9em;white-space:nowrap}

/* the box: a wooden frame, felt inside, a rail with the score */
.boxwrap{display:grid;place-items:center;min-height:0}
.box{position:relative;padding:.7em .7em 2em;border-radius:1em;
  background:radial-gradient(ellipse at 50% 40%,var(--felt-hi),var(--felt) 60%,var(--felt-lo));
  box-shadow:inset 0 0 0 .45em var(--wood),inset 0 0 0 .55em var(--wood-lo),inset 0 .9em 1.4em rgba(0,0,0,.35),0 .7em 1.6em rgba(0,0,0,.45),0 0 0 .2em var(--wood-hi)}
.box.thud{animation:thud .22s ease-out}
@keyframes thud{40%{transform:translateY(.12em) scale(1.004,.996)}}
.box.shake{animation:boxshake .45s}
@keyframes boxshake{20%{transform:translateX(-.35em)}45%{transform:translateX(.3em)}70%{transform:translateX(-.18em)}}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);width:calc(var(--cols) * var(--tw) + (var(--cols) - 1) * var(--gap))}
.score-chip{position:absolute;left:50%;bottom:.3em;transform:translateX(-50%);font:700 .95em/1 var(--round);color:var(--ink-soft);white-space:nowrap;
  background:rgba(0,0,0,.28);padding:.25em .8em;border-radius:999px}
.score-chip b{color:var(--paper);font-size:1.2em;display:inline-block;min-width:1.4em}

/* tiles: tall cream blocks with a big numeral; a shut tile falls flat into dark wood */
.tile{position:relative;width:var(--tw);height:var(--th);padding:0;border:0;background:none;border-radius:calc(var(--tw) * .14);touch-action:manipulation}
.face{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;transform-origin:50% 100%;
  background:linear-gradient(180deg,#fffdf6 0%,#f7eedb 55%,#e9dbbb 100%);
  box-shadow:inset 0 calc(var(--tw) * .04) 0 #fff,inset 0 calc(var(--tw) * -.06) 0 rgba(150,115,60,.22),0 calc(var(--tw) * .06) 0 #b99b6b,0 calc(var(--tw) * .12) calc(var(--tw) * .16) rgba(0,0,0,.35);
  transition:transform .28s cubic-bezier(.3,1.5,.5,1),background .2s,box-shadow .2s,filter .2s,opacity .2s}
.num{font:900 calc(var(--tw) * .62)/1 var(--round);color:var(--paper-ink);transition:opacity .15s;letter-spacing:-.02em}
.tile:hover .face{filter:brightness(1.04)}
.tile.lit .face{box-shadow:0 0 0 calc(var(--tw) * .05) var(--gold-hi),0 0 calc(var(--tw) * .3) var(--gold),0 calc(var(--tw) * .06) 0 #b99b6b}
.tile.dim .face{filter:brightness(.72) saturate(.7)}
.tile.sel .face{transform:translateY(calc(var(--tw) * -.16));background:linear-gradient(180deg,#fff3c9,#ffd78a);
  box-shadow:0 0 0 calc(var(--tw) * .05) var(--gold-lo),0 calc(var(--tw) * .22) calc(var(--tw) * .2) rgba(0,0,0,.35)}
.tile.hint .face{animation:hintpulse .8s ease-in-out infinite}
@keyframes hintpulse{50%{transform:translateY(calc(var(--tw) * -.1));box-shadow:0 0 0 calc(var(--tw) * .07) #8fe0c0,0 0 calc(var(--tw) * .4) #8fe0c0}}
.tile.shut{cursor:default}
.tile.shut .face{transform:scaleY(.3);background:linear-gradient(180deg,#5d3519,var(--wood-lo));box-shadow:inset 0 .1em 0 rgba(255,255,255,.12),0 .1em .2em rgba(0,0,0,.4)}
.tile.shut .num{opacity:0}
.tile.shake .face{animation:tshake .3s}
@keyframes tshake{25%{transform:translateX(-12%) rotate(-3deg)}75%{transform:translateX(12%) rotate(3deg)}}
.tile:focus-visible{outline:none}
.tile:focus-visible .face{outline:3px solid var(--gold-hi);outline-offset:3px}

/* ---------------- dice and the controls */
.controls{display:grid;grid-template-columns:auto;justify-items:center;align-items:center;gap:.4em}
#game.wide .controls{grid-template-columns:auto minmax(0,1fr) auto;gap:1em;max-width:52em;width:100%;margin:0 auto}
.dice{display:flex;align-items:center;gap:.6em;--d:3.6em;min-height:var(--d)}
#game.wide .dice{--d:3.3em}
.die{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:var(--d);height:var(--d);padding:calc(var(--d) * .14);border-radius:20%;
  background:radial-gradient(circle at 32% 28%,#fffef9,#f6eedc 60%,#e3d4b2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset -.08em -.14em .25em rgba(120,95,50,.25),0 .14em 0 #cdbd98,0 .35em .6em rgba(0,0,0,.4);transition:opacity .25s,filter .25s}
.die i{width:calc(var(--d) * .19);height:calc(var(--d) * .19);border-radius:50%;place-self:center;visibility:hidden;background:radial-gradient(circle at 40% 35%,#4a423a,#16120f 70%)}
.die[data-v="1"] i.on{background:radial-gradient(circle at 40% 35%,#e0604b,#a52a1c 70%)}
.die i.on{visibility:visible}
.die.idle{opacity:.6;filter:saturate(.6)}
.die.gone{display:none}
.total{font:900 1.9em/1 var(--round);color:var(--gold-hi);min-width:2.2em;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.total.idle{opacity:.5}
.say{margin:0;font-size:1.1em;font-weight:700;color:var(--ink);text-align:center;min-height:1.4em;line-height:1.25}
#game.wide .say{text-align:left}
#roll{min-width:7.5em;font-size:1.2em;padding:.6em 1.6em}
#roll:disabled{opacity:.45}
#roll.shake{animation:tshake .3s}

/* ---------------- cards */
.how p{margin:0 0 .55em}
.how .keys{color:var(--paper-soft);font-size:.9em}
.card .big{display:flex;flex-direction:column;align-items:center;margin:-.2em 0 .2em}
.card .big small{color:var(--paper-soft);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8em}
.card .big b{font:900 3.2em/1 var(--round);color:var(--paper-ink)}
.card.result.won h2{color:#1f7a55}
.card.result.lost h2{color:var(--red)}
.card .up{color:#1f7a55;font-weight:700}
.card .links .link{min-height:44px}
.toast{pointer-events:none}
@media (max-height:440px){
  .card{padding:.8em 1em .7em}
  .card h2{margin-bottom:.3em;font-size:1.3em}
  .card .big b{font-size:2.3em}
  .card .note{margin:.1em 0}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .actions .pill{padding:.55em 1.3em}
  .title{font-size:2.5em}
  .home{gap:.5em}
}
@media (max-width:420px){.title{font-size:2.7em}}