/* Snakes and Ladders: the garden, the board, the tokens and the dice. In #game every size is in em (game.js sets
   one font size per screen) or in --B, the board's side, which 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:.55em;padding:1em;text-align:center}
.home:not(.wide) .home-left,.home:not(.wide) .home-right{display:contents}
.home.wide{flex-direction:row;gap:2.4em}
.home.wide .home-left,.home.wide .home-right{display:flex;flex-direction:column;align-items:center;gap:.45em}
.home-art{width:5.2em;height:5.2em;border-radius:1.2em;box-shadow:0 .5em 1.2em rgba(0,0,0,.35);animation:bob 3.6s ease-in-out infinite;order:1}
@keyframes bob{50%{transform:translateY(-.2em) rotate(-2deg)}}
.title{order:2;margin:0;font:900 3.1em/1.02 var(--round);color:var(--paper);letter-spacing:.01em;text-shadow:0 3px 0 rgba(0,0,0,.28),0 10px 24px rgba(0,0,0,.35);max-width:9.5em}
.tagline{order:3;margin:0;color:var(--ink-soft);font-size:1.12em}
.best{order:4;margin:0;color:var(--gold-hi);font-weight:700;min-height:1.3em}
.levels{order:5;display:flex;gap:.4em;justify-content:center;flex-wrap:wrap}
.level-say{order:6;margin:0;color:var(--ink-soft);font-size:.98em;min-height:1.4em}
.pcount{order:7;display:flex;gap:.4em;align-items:center;justify-content:center}
.pcount span{color:var(--ink-soft);font-weight:700;margin-right:.3em}
.go{order:8;display:flex;gap:.6em;justify-content:center;flex-wrap:wrap}
.links{order:9;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .2em}
.lv,.pc{width:2.6em;height:2.6em;min-width:44px;min-height:44px;border-radius:.6em;border:2px solid var(--hair);background:rgba(0,0,0,.2);color:var(--ink);font:800 1.1em/1 var(--round);padding:0}
.lv[aria-pressed=true],.pc[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,.pc:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}

/* ---------------- the game stage: board under the panel on a phone, beside it when wide */
.stage{position:absolute;inset:0;display:grid;gap:.45em;justify-content:center;align-content:center;
  padding:max(.5em,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:var(--B);grid-template-areas:"bar" "players" "board" "controls"}
#game.wide .stage{grid-template-columns:var(--B) var(--P);column-gap:1em;grid-template-rows:auto auto minmax(0,1fr);height:100%;align-content:center;
  grid-template-areas:"board bar" "board players" "board controls"}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:0}
.bar .jewel{width:2.6em;height:2.6em}
.bar-end{width:2.6em}
.info{display:flex;flex-direction:column;align-items:center;line-height:1.15;min-width:0;text-align:center}
.info b{font:800 1.12em/1.1 var(--round)}
.info span{color:var(--gold-hi);font-weight:700;font-size:.9em;white-space:nowrap}
.players{grid-area:players;display:flex;gap:.3em;justify-content:center;flex-wrap:nowrap;font-size:.86em}
#game.wide .players{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.6em,1fr));font-size:1em;gap:.35em}
.chip{display:flex;align-items:center;gap:.35em;padding:.25em .55em;border-radius:999px;background:rgba(0,0,0,.22);border:2px solid transparent;white-space:nowrap;min-width:0;transition:background .2s,border-color .2s}
.chip i{width:.95em;height:.95em;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff;flex:none}
.chip span{overflow:hidden;text-overflow:ellipsis;font-weight:700}
.chip b{font:900 1.15em/1 var(--round);color:var(--gold-hi);margin-left:auto}
.chip.now{border-color:var(--c);background:rgba(255,255,255,.14)}
.boardwrap{grid-area:board;display:grid;place-items:center;min-height:0}
#game.wide .boardwrap{align-self:center}
.controls{grid-area:controls;display:flex;flex-direction:column;align-items:center;gap:.35em}
#game.wide .controls{justify-content:center;gap:.6em}
.say{margin:0;font-size:1.08em;font-weight:700;color:var(--ink);text-align:center;min-height:2.6em;line-height:1.25;display:flex;align-items:center;justify-content:center}
.dicerow{display:flex;align-items:center;justify-content:center;gap:1em}
#game.wide .dicerow{flex-direction:column;gap:.6em}
#roll{min-width:6.5em;font-size:1.2em;padding:.55em 1.5em}
#roll:disabled{opacity:.45}
#roll.ready{animation:ready 1.6s ease-in-out infinite}
@keyframes ready{50%{box-shadow:0 1px 0 #fff8 inset,0 4px 0 #8a5a06,0 0 0 .3em rgba(255,217,119,.35),0 8px 16px rgba(0,0,0,.35)}}
#roll.shake,.die.shake{animation:tshake .3s}
@keyframes tshake{25%{transform:translateX(-10%) rotate(-3deg)}75%{transform:translateX(10%) rotate(3deg)}}

/* ---------------- the board */
.board{position:relative;width:var(--B);height:var(--B);border-radius:calc(var(--B) * .02);overflow:hidden;
  box-shadow:0 0 0 calc(var(--B) * .012) #fff3d6,0 0 0 calc(var(--B) * .022) var(--wood),0 1.2em 2em rgba(0,0,0,.45)}
.board.wobble{animation:wobble .5s}
@keyframes wobble{20%{transform:rotate(-.8deg)}50%{transform:rotate(.6deg)}80%{transform:rotate(-.3deg)}}
.squares{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr)}
.sq{position:relative;background:#fff6dc;transition:background .25s}
.sq.alt{background:#d9edc0}
.board[data-theme=garden] .sq{background:#fff2e2}.board[data-theme=garden] .sq.alt{background:#f7d6c8}
.board[data-theme=jungle] .sq{background:#eef3d4}.board[data-theme=jungle] .sq.alt{background:#b9d99b}
.sq span{position:absolute;left:.25em;top:.12em;font:800 calc(var(--B) * .026)/1 var(--round);color:rgba(42,42,34,.62)}
.sq.home{background:radial-gradient(circle,#fff6bf,#ffd977)!important}
.sq.home::after{content:"";position:absolute;inset:22%;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 21l1.6-7L2 9.2l7.1-.6z' fill='%23f2b632' stroke='%23b07a0e' stroke-width='1.2'/%3E%3C/svg%3E")}
.sq.up::before,.sq.down::before{content:"";position:absolute;inset:8%;border-radius:22%;opacity:.35}
.sq.up::before{background:#ffe08a}
.sq.down::before{background:#ffb3a8}
.sq.aim{box-shadow:inset 0 0 0 calc(var(--B) * .006) #2a2a22}
.sq.glow{animation:sqglow .9s ease-out}
.sq.ouch{animation:sqouch .9s ease-out}
@keyframes sqglow{0%{background:#fff;box-shadow:inset 0 0 0 .3em #ffd977}}
@keyframes sqouch{0%{background:#ffc2b8}}
.art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.goal{position:absolute;width:calc(var(--B) * .085);height:calc(var(--B) * .085);margin:calc(var(--B) * -.0425) 0 0 calc(var(--B) * -.0425);border-radius:50%;
  border:calc(var(--B) * .007) dashed #2a2a22;background:rgba(255,255,255,.45);opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s;pointer-events:none}
.goal.on{opacity:1;transform:scale(1)}
.goal.bad{border-color:var(--red);background:rgba(255,190,180,.5)}
.tokens{position:absolute;inset:0;pointer-events:none}
.token{position:absolute;width:calc(var(--B) * .056);height:calc(var(--B) * .056);margin:calc(var(--B) * -.028) 0 0 calc(var(--B) * -.028);z-index:1}
.token.smooth{transition:left .25s ease,top .25s ease}
.token i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9 0 12%,transparent 30%),var(--c);
  box-shadow:0 0 0 calc(var(--B) * .004) #fff,0 calc(var(--B) * .006) 0 rgba(0,0,0,.35),0 calc(var(--B) * .01) calc(var(--B) * .015) rgba(0,0,0,.35)}
.token.you{width:calc(var(--B) * .066);height:calc(var(--B) * .066);margin:calc(var(--B) * -.033) 0 0 calc(var(--B) * -.033);z-index:2}
.token.you i::after{content:"";position:absolute;inset:26%;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 21l1.6-7L2 9.2l7.1-.6z' fill='%23fff'/%3E%3C/svg%3E")}
.token.turn i{animation:pulse 1.4s ease-in-out infinite}
.token.moving{z-index:5}
.token.moving i{animation:none}
@keyframes pulse{50%{box-shadow:0 0 0 calc(var(--B) * .004) #fff,0 0 0 calc(var(--B) * .012) var(--c),0 calc(var(--B) * .01) calc(var(--B) * .015) rgba(0,0,0,.35)}}

/* ---------------- dice */
.dice{display:flex;align-items:center;gap:.6em;--d:3.2em}
.die{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:var(--d);height:var(--d);min-width:44px;min-height:44px;padding:calc(var(--d) * .14);border-radius:20%;border:0;
  background:radial-gradient(circle at 32% 28%,#fffef9,#f6eedc 60%,#e3d4b2);touch-action:manipulation;
  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 .2s,filter .2s,transform .15s}
.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 i.on{visibility:visible}
.die.idle{opacity:.55;filter:saturate(.6)}
.die:disabled{cursor:default}
.die.can{box-shadow:0 0 0 .2em var(--c),inset -.08em -.14em .25em rgba(120,95,50,.25),0 .14em 0 #cdbd98,0 .35em .6em rgba(0,0,0,.4)}
.die.can:hover{transform:translateY(-.15em)}
.die.tip{box-shadow:0 0 0 .2em #7be0a6,0 0 1em #7be0a6,0 .14em 0 #cdbd98,0 .35em .6em rgba(0,0,0,.4);animation:tip 1.2s ease-in-out infinite}
@keyframes tip{50%{box-shadow:0 0 0 .32em #7be0a6,0 0 1.6em #7be0a6,0 .14em 0 #cdbd98,0 .35em .6em rgba(0,0,0,.4)}}
.die.chosen{transform:translateY(-.25em) scale(1.12);box-shadow:0 0 0 .2em var(--c),0 .35em .6em rgba(0,0,0,.4)}
.die:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}

/* ---------------- cards */
.how p{margin:0 0 .5em}
.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.1em/1 var(--round);color:var(--paper-ink)}
.card.result.won h2{color:#1f7a45}
.card.result.lost h2{color:var(--red)}
.card .up{color:#1f7a45;font-weight:700}
.card .links .link{min-height:44px}
.card h2{color:var(--felt-lo)}
.toast{pointer-events:none}
@media (max-height:440px){
  .card{padding:.7em 1em .6em}
  .card h2{margin-bottom:.25em;font-size:1.3em}
  .card .big b{font-size:2.2em}
  .card .note{margin:.1em 0}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.4em}
  .card .actions .pill{padding:.5em 1.3em}
  .title{font-size:2.4em}
  .home{gap:.4em}
  .home-art{display:none}
}
@media (max-width:420px){.title{font-size:2.6em}}
.home.wide .levels{flex-wrap:nowrap}
#game:not(.wide) .players.many{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:24em;margin:0 auto;font-size:1em}