/* app.css — Buba's Reading Road
   Chunky, high-contrast, thumb-sized. Cream cards on a calm ground, buttons
   that physically depress, one accent per role.

   THEMES. The ground colour is a token, not a decision baked into the markup,
   so a child can pick the one they like from settings. Two rules hold across
   all four:
     - the ground is calm and low-chroma; nothing full-screen is ever loud
     - yellow is reserved for stars and rewards, never for large areas
   Buba stays warm amber in every theme: a warm figure on a cool ground gives
   him somewhere to stand out. */

:root{
  /* fixed in every theme */
  --paper:#FFFDF7; --cream:#FFF3D6;
  --star:#FFC93C; --star-deep:#E0A81C;
  --mint:#1FB894; --mint-deep:#128F72;
  --tomato:#E8453C;
  --focus:#3E7BFA;

  /* Buba is amber everywhere — he is the warm point in a cool picture */
  --buba:#F0A63A; --buba-deep:#CE8420; --buba-belly:#FFF3DA; --buba-ink:#533A12;

  --disp:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  --read:'Andika',Georgia,serif;
  --acc:var(--action);
}

/* ---- Sky: the default. Pale, desaturated blue — sky rather than primary. ---- */
body{
  --ground:#E3EDF8; --ground2:#F2F7FC; --dot:rgba(255,255,255,.8);
  --ink:#2B3A67; --ink-soft:#4A5B87; --on-card:#2B3A67;
  --action:#4468C8; --action-deep:#2F4EA0;
  --locked:#C6D3E4; --tint:rgba(255,255,255,.55); --trail:rgba(255,255,255,.95);
  --stone-ink:#FFFFFF;
  --st1:#2F9A5E; --st2:#158C86; --st3:#2B77C9; --st4:#4A5AC2; --st5:#6E45B2;
  --st6:#943B93; --st7:#C13C69; --st8:#D24E28; --st9:#B87A10;
}
body[data-theme="meadow"]{
  --ground:#E2EFE3; --ground2:#F1F8F1; --dot:rgba(255,255,255,.8);
  --ink:#24463A; --ink-soft:#456052; --on-card:#24463A;
  --action:#2E8B6B; --action-deep:#1F6A50;
  --locked:#C6DCC9; --tint:rgba(255,255,255,.55); --trail:rgba(255,255,255,.95);
}
body[data-theme="blossom"]{
  --ground:#F4E6F2; --ground2:#FBF3FA; --dot:rgba(255,255,255,.8);
  --ink:#4A2B52; --ink-soft:#6B4571; --on-card:#4A2B52;
  --action:#A2489B; --action-deep:#7E3378;
  --locked:#E0CADE; --tint:rgba(255,255,255,.55); --trail:rgba(255,255,255,.95);
}
/* Dusk keeps the cream cards and flips only the ground, so every word the
   child actually reads still sits on paper. */
body[data-theme="dusk"]{
  --ground:#2A3453; --ground2:#222B45; --dot:rgba(255,255,255,.09);
  --ink:#EAF0FF; --ink-soft:#B9C6E4; --on-card:#2A3453;
  --action:#5B8CF0; --action-deep:#3A66C4;
  --locked:#414D74; --tint:rgba(255,255,255,.09); --trail:rgba(255,255,255,.32);
  --stone-ink:#1E2740;
  --st1:#57C98A; --st2:#37C0B7; --st3:#5AA6F0; --st4:#7E8CE8; --st5:#A278DC;
  --st6:#C468C2; --st7:#EC6D95; --st8:#F57A52; --st9:#F0B23C;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  font-family:var(--disp);
  background:var(--ground);
  background-image:
    radial-gradient(circle at 1px 1px, var(--dot) 2px, transparent 2px),
    linear-gradient(170deg, var(--ground2), var(--ground) 55%);
  background-size:26px 26px, 100% 100%;
  color:var(--ink); user-select:none; overflow:hidden;
  transition:background-color .3s;
}

/* ================= Buba ================= */

.bubawrap{display:grid; place-items:center; flex:none;}
.buba{width:100%; height:100%; display:block; overflow:visible;}
.b-head,.b-body,.b-ear{fill:var(--buba);}
.b-arm ellipse,.b-foot{fill:var(--buba-deep);}
.b-belly,.b-muzzle,.b-ear-in{fill:var(--buba-belly);}
.b-white{fill:#fff;}
.b-pupil,.b-nose{fill:var(--buba-ink);}
.b-glint{fill:#fff;}
.b-shadow{fill:rgba(0,0,0,.14);}
.b-line{fill:none; stroke:var(--buba-ink); stroke-width:4; stroke-linecap:round;}
.b-mouth{fill:var(--buba-ink);}
.b-mouth-smile{fill:none; stroke:var(--buba-ink); stroke-width:3.4; stroke-linecap:round;}
.b-mouth-oops{fill:none; stroke:var(--buba-ink); stroke-width:3.2; stroke-linecap:round;}
.b-cheek{fill:rgba(232,69,60,.3);}
.b-spark{fill:var(--star);}

/* Only one set of eyes and one mouth is ever visible. Mood is a data attribute,
   so there is no animation state that can fall out of sync. */
.bubawrap .b-eyes,.bubawrap .b-mouth,.bubawrap .b-cheek,.bubawrap .b-spark{display:none;}
[data-mood="idle"]  .b-eyes-open,[data-mood="idle"]  .b-mouth-smile,
[data-mood="oops"]  .b-eyes-open,[data-mood="oops"]  .b-mouth-oops,
[data-mood="think"] .b-eyes-look,[data-mood="think"] .b-mouth-o,
[data-mood="happy"] .b-eyes-happy,[data-mood="happy"] .b-mouth-big,
[data-mood="cheer"] .b-eyes-happy,[data-mood="cheer"] .b-mouth-big{display:block;}
[data-mood="happy"] .b-cheek,[data-mood="cheer"] .b-cheek,[data-mood="cheer"] .b-spark{display:block;}

[data-mood="idle"]  .b-all{animation:breathe 3.4s ease-in-out infinite;}
[data-mood="idle"]  .b-eyes-open{animation:blink 5.2s infinite;}
[data-mood="cheer"] .b-all{animation:jump .55s cubic-bezier(.2,1.7,.4,1) 2;}
[data-mood="cheer"] .b-arm-l{transform:rotate(-42deg); transform-origin:26px 74px;}
[data-mood="cheer"] .b-arm-r{transform:rotate(42deg);  transform-origin:94px 74px;}
[data-mood="cheer"] .b-spark{animation:twinkle .7s ease-in-out infinite alternate;}
[data-mood="oops"]  .b-all{animation:sway .8s ease-in-out;}
.b-arm{transition:transform .25s cubic-bezier(.2,1.7,.4,1);}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2.5px) scale(1.012)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-13px)}}
@keyframes sway{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(4deg)}}
@keyframes twinkle{from{opacity:.35; transform:scale(.8)}to{opacity:1; transform:scale(1.12)}}
.b-eyes-open{transform-origin:60px 43px;}

/* ================= top bar ================= */

.bar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:9px; padding:10px 12px;
}
.bar .spacer{flex:1;}
.chip{
  border:0; cursor:pointer; font:inherit; font-weight:600;
  background:var(--paper); color:var(--on-card);
  width:46px; height:46px; border-radius:15px; font-size:21px;
  box-shadow:0 5px 0 rgba(0,0,0,.16);
  display:grid; place-items:center;
  transition:transform .1s, box-shadow .1s;
}
.chip:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.16);}
.chip[data-off="true"]{opacity:.45;}
.chip.quiet{background:var(--tint); color:var(--ink); box-shadow:0 4px 0 rgba(0,0,0,.1); font-size:19px;}

.hearts{display:flex; gap:5px; font-size:24px; line-height:1;}
.hearts span{transition:transform .3s cubic-bezier(.2,1.6,.4,1), opacity .3s;}
.hearts span.gone{opacity:.28; transform:scale(.72);}
.hearts span.losing{animation:heartbreak .6s ease both;}
@keyframes heartbreak{
  0%{transform:scale(1)} 30%{transform:scale(1.45) rotate(-12deg)}
  100%{transform:scale(.72); opacity:.28}
}

/* Banked total and points-at-risk are deliberately different weights: the big
   number is the one that is safe, and it should always look safe. */
.score{
  display:flex; align-items:center; gap:7px;
  background:var(--paper); border-radius:999px;
  padding:7px 14px; box-shadow:0 4px 0 rgba(0,0,0,.14);
  font-weight:600; font-size:15px; color:var(--on-card);
}
.score b{font-size:18px;}
.score .pend{
  color:var(--mint-deep); font-size:14px; font-weight:600;
  padding-left:7px; border-left:2px solid rgba(0,0,0,.1);
}
.score.bump{animation:bump .45s cubic-bezier(.2,1.7,.4,1);}
@keyframes bump{45%{transform:scale(1.14)}}

.dots{display:flex; gap:6px; align-items:center;}
.dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--tint); box-shadow:inset 0 2px 0 rgba(0,0,0,.07);
  transition:transform .3s cubic-bezier(.2,1.6,.4,1), background .3s;
}
.dot.on{background:var(--mint); transform:scale(1.3);}

/* ================= screens ================= */

.screen{
  position:absolute; inset:0; padding:66px 14px 18px;
  display:flex; flex-direction:column; align-items:center; overflow:hidden;
}
.screen[hidden]{display:none;}
.screen.center{justify-content:center; gap:clamp(9px,2vh,18px);}
.screen.scroll{overflow-y:auto; -webkit-overflow-scrolling:touch;}

/* ================= masthead ================= */

.masthead{
  display:flex; align-items:center; gap:14px;
  width:min(560px,96vw); margin-bottom:12px;
}
.masthead .bubawrap{width:78px; height:78px;}
.masthead .words{flex:1; min-width:0;}
.series{
  font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.75; margin-bottom:2px;
}
.wordmark{
  font-family:var(--read); font-weight:700; margin:0;
  font-size:clamp(25px,6.4vw,38px); color:var(--ink);
  letter-spacing:-.5px; line-height:1; text-shadow:0 3px 0 rgba(255,255,255,.75);
}
.tagline{margin:5px 0 0; font-size:13px; font-weight:500; color:var(--ink-soft); opacity:.9;}

.resume{
  border:0; cursor:pointer; font:inherit; color:#fff;
  background:var(--action); box-shadow:0 7px 0 var(--action-deep);
  border-radius:22px; padding:13px 24px; margin-bottom:16px;
  width:min(560px,96vw);
  font-size:clamp(16px,4vw,20px); font-weight:600;
  display:flex; align-items:center; gap:13px; text-align:left;
  transition:transform .1s, box-shadow .1s;
}
.resume:active{transform:translateY(5px); box-shadow:0 2px 0 var(--action-deep);}
.resume u{text-decoration:none; flex:1;}
.resume small{display:block; font-size:12px; font-weight:500; opacity:.72; margin-top:2px;}
.resume i{font-style:normal; font-size:27px;}

/* ================= the road ================= */

.map{width:min(560px,96vw); padding-bottom:34px;}

.stagebox{
  position:relative; margin-bottom:14px; padding:12px 10px 16px;
  border-radius:24px; background:var(--tint);
  box-shadow:inset 0 0 0 3px var(--tint);
}
.stagebox.done{background:var(--tint); box-shadow:inset 0 0 0 3px var(--acc);}
.stagehead{display:flex; align-items:center; gap:10px; margin:0 4px 6px;}
.stagehead .badge{
  color:var(--stone-ink);
  width:38px; height:38px; border-radius:13px; flex:none;
  display:grid; place-items:center; font-size:20px;
  background:var(--acc); box-shadow:0 4px 0 rgba(0,0,0,.18);
}
.stagehead b{font-size:15.5px; color:var(--ink); display:block; line-height:1.2;}
.stagehead small{font-size:11.5px; opacity:.6; font-weight:500;}
.stagehead .right{margin-left:auto; font-size:12px; font-weight:600; opacity:.55; padding-right:4px;}

/* Rows alternate direction so the dashed line reads as one continuous road
   winding down the page rather than a grid of buttons. */
.trailrow{
  position:relative; display:flex; justify-content:center;
  gap:clamp(6px,2vw,14px); padding:9px 0;
}
.trailrow.rev{flex-direction:row-reverse;}
.trailrow::before{
  content:''; position:absolute; left:7%; right:7%; top:50%;
  border-top:5px dashed var(--trail); transform:translateY(-50%); z-index:0;
}
.trailrow.tail::after{
  content:''; position:absolute; right:9%; top:50%; bottom:-19px; width:5px;
  border-right:5px dashed var(--trail); z-index:0;
}
.trailrow.rev.tail::after{right:auto; left:9%;}

.rung{
  position:relative; z-index:1;
  border:0; cursor:pointer; font:inherit;
  width:clamp(52px,14vw,62px); height:clamp(52px,14vw,62px); border-radius:50%;
  background:var(--paper); color:var(--on-card);
  box-shadow:0 6px 0 rgba(0,0,0,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  transition:transform .1s, box-shadow .1s;
}
.rung:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.18);}
.rung b{font-size:17px; font-weight:700; line-height:1;}
.rung small{font-size:9px; opacity:.62; font-weight:600; line-height:1.1; max-width:90%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rung .tick{position:absolute; top:-5px; right:-4px; font-size:15px;}

.rung[data-state="cleared"]{background:var(--acc); color:var(--stone-ink); box-shadow:0 6px 0 rgba(0,0,0,.25);}
.rung[data-state="cleared"] small{opacity:.85;}
.rung[data-state="open"]{box-shadow:0 6px 0 var(--acc);}
.rung[data-state="next"]{
  box-shadow:0 6px 0 var(--acc), 0 0 0 5px var(--trail);
  animation:beckon 2.4s ease-in-out infinite;
}
.rung[data-state="locked"]{
  background:var(--locked); color:rgba(0,0,0,.32);
  box-shadow:0 5px 0 rgba(0,0,0,.09); cursor:default;
}
.rung[data-state="locked"] small{display:none;}
@keyframes beckon{50%{transform:translateY(-6px)}}

/* ================= playing ================= */

.playtop{display:flex; align-items:center; gap:12px; justify-content:center;}
.playtop .bubawrap{width:clamp(56px,13vh,86px); height:clamp(56px,13vh,86px);}
.pic{
  font-size:clamp(48px,12vh,96px); line-height:1;
  filter:drop-shadow(0 8px 0 rgba(0,0,0,.12));
  animation:bob 2.6s ease-in-out infinite;
}
.pic.mystery{opacity:.45; filter:none;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.prompt{
  font-size:clamp(14.5px,3.6vw,18px); font-weight:500;
  color:var(--ink); opacity:.85; text-align:center;
  max-width:min(520px,94vw); margin:0;
}

.say{
  border:0; cursor:pointer;
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; font-size:29px;
  background:var(--paper); box-shadow:0 6px 0 rgba(0,0,0,.16);
  transition:transform .1s, box-shadow .1s; flex:none;
}
.say:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.16);}
.say.ping{animation:ping 1.7s ease-out infinite;}
@keyframes ping{
  0%{box-shadow:0 6px 0 rgba(0,0,0,.16), 0 0 0 0 rgba(255,255,255,.85);}
  70%,100%{box-shadow:0 6px 0 rgba(0,0,0,.16), 0 0 0 24px rgba(255,255,255,0);}
}

.word{display:flex; gap:7px; justify-content:center; flex-wrap:wrap; min-height:4px;}
.slot{
  font-family:var(--read); font-weight:700;
  width:clamp(44px,11.5vw,64px); height:clamp(54px,13.5vw,76px);
  display:grid; place-items:center; border-radius:16px;
  font-size:clamp(29px,7.6vw,42px);
  background:var(--paper); color:var(--on-card);
  box-shadow:0 6px 0 rgba(0,0,0,.15);
  transition:transform .25s, background .25s, color .25s, box-shadow .25s;
}
.slot.blank{background:rgba(255,255,255,.5); color:transparent; box-shadow:inset 0 0 0 4px rgba(255,255,255,.75);}
.slot.empty{background:rgba(255,255,255,.38); color:transparent; box-shadow:inset 0 0 0 4px rgba(255,255,255,.6);}
/* .lit marks every letter of ONE sound — for "cake" that is the a and the
   silent e together, which is the whole lesson of magic e made visible. */
.slot.lit{background:var(--mint); color:#fff; transform:translateY(-8px) scale(1.06); box-shadow:0 6px 0 var(--mint-deep);}
.slot.whole{background:var(--action); color:#fff; box-shadow:0 6px 0 var(--action-deep);}
.caps .slot,.caps .tile{text-transform:uppercase;}

.sentence{
  font-family:var(--read); font-weight:700;
  font-size:clamp(21px,5.2vw,32px); color:var(--on-card);
  background:var(--paper); border-radius:20px;
  padding:15px 19px; box-shadow:0 7px 0 rgba(0,0,0,.15);
  max-width:min(620px,94vw); text-align:center; line-height:1.35;
}

.choices{display:flex; gap:clamp(7px,2.2vw,15px); justify-content:center; flex-wrap:wrap; max-width:min(760px,96vw);}
.tile{
  border:0; cursor:pointer; font-family:var(--read); font-weight:700;
  background:var(--paper); color:var(--on-card);
  border-radius:20px; box-shadow:0 8px 0 rgba(0,0,0,.18);
  transition:transform .12s, box-shadow .12s, background .2s, color .2s;
}
.tile:active{transform:translateY(6px) rotate(0deg)!important; box-shadow:0 2px 0 rgba(0,0,0,.18);}
.tile:focus-visible{outline:5px solid var(--focus); outline-offset:4px;}
.tile.letter{width:clamp(62px,16vw,94px); height:clamp(72px,18vw,104px); font-size:clamp(36px,9.5vw,56px);}
.tile.small{width:clamp(52px,13vw,76px); height:clamp(62px,15vw,88px); font-size:clamp(28px,7.5vw,44px);}
.tile.wordchoice{padding:12px clamp(12px,3.2vw,23px); font-size:clamp(25px,6.4vw,38px); letter-spacing:1px;}
.tile.picchoice{width:clamp(74px,19vw,106px); height:clamp(74px,19vw,106px); font-size:clamp(36px,9.5vw,52px); display:grid; place-items:center;}
.tile.verdict{padding:14px 25px; font-family:var(--disp); font-size:clamp(18px,4.4vw,24px); font-weight:600;}

.tile.right{background:var(--mint); color:#fff; box-shadow:0 8px 0 var(--mint-deep); animation:pop .45s cubic-bezier(.2,1.7,.4,1);}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.16) rotate(-3deg)}100%{transform:scale(1.05)}}
.tile.nope{animation:wobble .5s ease; opacity:.5;}
@keyframes wobble{0%,100%{transform:translateX(0)}20%{transform:translateX(-11px)}40%{transform:translateX(11px)}60%{transform:translateX(-7px)}80%{transform:translateX(5px)}}
.tile.hint{box-shadow:0 8px 0 rgba(0,0,0,.18), 0 0 0 6px rgba(31,184,148,.9); animation:glow 1.2s ease-in-out infinite;}
@keyframes glow{50%{box-shadow:0 8px 0 rgba(0,0,0,.18), 0 0 0 15px rgba(31,184,148,.22);}}
.tile.used{opacity:.32; pointer-events:none;}
.lock{pointer-events:none;}

.plusone{
  position:fixed; z-index:30; pointer-events:none;
  font-weight:700; font-size:25px; color:var(--mint-deep);
  text-shadow:0 2px 0 rgba(255,255,255,.9);
  animation:floatup 1s ease-out forwards;
}
@keyframes floatup{to{transform:translateY(-58px); opacity:0;}}

/* ================= end screens ================= */

.endbuba{width:clamp(120px,26vh,190px); height:clamp(120px,26vh,190px);}
.yay{
  font-family:var(--read); font-weight:700;
  font-size:clamp(28px,7vw,48px); color:var(--ink);
  text-shadow:0 4px 0 rgba(255,255,255,.7); text-align:center; line-height:1.15;
}
.tally{
  color:var(--on-card);
  background:var(--paper); border-radius:22px; padding:15px 25px;
  box-shadow:0 7px 0 rgba(0,0,0,.15); text-align:center; min-width:min(300px,86vw);
}
.tally .row{display:flex; justify-content:space-between; gap:20px; font-size:15.5px; font-weight:500; padding:4px 0;}
.tally .row b{font-weight:700;}
.tally .row.total{border-top:2px solid rgba(0,0,0,.1); margin-top:6px; padding-top:9px; font-size:18px; color:var(--action);}
.big-btn{
  border:0; cursor:pointer; font:inherit; font-weight:600;
  background:var(--action); color:#fff; padding:14px 30px;
  border-radius:999px; font-size:clamp(16px,4.2vw,21px);
  box-shadow:0 7px 0 var(--action-deep); transition:transform .1s, box-shadow .1s;
}
.big-btn:active{transform:translateY(5px); box-shadow:0 2px 0 var(--action-deep);}
.ghost-btn{
  border:0; cursor:pointer; font:inherit; font-weight:600;
  background:rgba(255,255,255,.82); color:var(--on-card);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);
  padding:11px 22px; border-radius:999px; font-size:15.5px;
}
.kind{
  font-size:14px; font-weight:500; color:var(--ink-soft);
  opacity:.72; text-align:center; max-width:min(400px,90vw); line-height:1.5; margin:0;
}

.confetti{position:fixed; top:-30px; width:13px; height:19px; border-radius:3px; z-index:1; animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(115vh) rotate(720deg);}}

/* ================= grown-up settings ================= */

.sheet{position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  background:rgba(20,26,48,.6); padding:18px;}
.sheet[hidden]{display:none;}
.card{
  color:var(--on-card);
  background:var(--paper); border-radius:26px; padding:22px;
  width:min(430px,94vw); max-height:88vh; overflow-y:auto;
  box-shadow:0 14px 40px rgba(0,0,0,.3);
}
.card h2{margin:0 0 4px; font-size:20px; color:var(--action);}
.card p.sub{margin:0 0 15px; font-size:12.5px; opacity:.62; line-height:1.5;}
.field{margin-bottom:15px;}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--on-card);}
.field .note{font-size:11.5px; opacity:.62; font-weight:500; margin-top:6px; line-height:1.45;}
.seg{display:flex; gap:4px; background:rgba(0,0,0,.07); padding:5px; border-radius:999px;}
.seg button{
  flex:1; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:14px;
  padding:9px 6px; border-radius:999px; background:transparent; color:var(--on-card);
  transition:background .18s, box-shadow .18s;
}
.seg button[aria-pressed="true"]{background:var(--paper); color:var(--action); box-shadow:0 3px 0 rgba(0,0,0,.13);}
.field input[type=text],.field input[type=number]{
  width:100%; font:inherit; font-size:16px; padding:11px 13px;
  border:2px solid rgba(0,0,0,.16); border-radius:14px; background:#fff; color:var(--on-card);
}
.danger{color:var(--tomato); background:rgba(232,69,60,.1);}
.gate{text-align:center;}
.gate .q{font-size:26px; font-weight:700; color:var(--action); margin:10px 0 14px;}

@media (max-width:360px){
  .chip{width:42px; height:42px; font-size:19px;}
  .masthead .bubawrap{width:62px; height:62px;}
  .score{padding:6px 11px; font-size:14px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important;}
}

/* ---- theme picker ---- */
.swatches{display:flex; gap:9px;}
.swatch{
  flex:1; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:11.5px;
  padding:9px 4px 8px; border-radius:15px; color:var(--on-card);
  background:rgba(0,0,0,.05); display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:inset 0 0 0 2px transparent; transition:box-shadow .18s, background .18s;
}
.swatch i{width:26px; height:26px; border-radius:50%; display:block; box-shadow:inset 0 0 0 3px rgba(255,255,255,.75);}
.swatch[aria-pressed="true"]{background:var(--paper); box-shadow:inset 0 0 0 3px var(--action), 0 3px 0 rgba(0,0,0,.12);}
.sw-sky i{background:#E3EDF8;} .sw-meadow i{background:#E2EFE3;}
.sw-blossom i{background:#F4E6F2;} .sw-dusk i{background:#2A3453;}

/* ---- profiles ---- */
.pchip{
  flex:none; border:0; cursor:pointer; font:inherit;
  width:52px; height:52px; border-radius:50%; font-size:25px;
  background:var(--paper); box-shadow:0 5px 0 rgba(0,0,0,.16);
  display:grid; place-items:center; transition:transform .1s, box-shadow .1s;
}
.pchip:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.16);}

.who{
  display:flex; flex-wrap:wrap; gap:13px; justify-content:center;
  max-width:min(560px,94vw);
}
.playercard{
  border:0; cursor:pointer; font:inherit; color:var(--on-card);
  background:var(--paper); border-radius:24px;
  width:clamp(96px,26vw,124px); padding:15px 8px 13px;
  box-shadow:0 8px 0 rgba(0,0,0,.18);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  transition:transform .1s, box-shadow .1s;
}
.playercard:active{transform:translateY(6px); box-shadow:0 2px 0 rgba(0,0,0,.18);}
.playercard .av{font-size:44px; line-height:1;}
.playercard b{font-size:15px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.playercard small{font-size:11.5px; opacity:.62; font-weight:600;}
.playercard.here{box-shadow:0 8px 0 var(--action), inset 0 0 0 3px var(--action);}
.playercard.add{background:var(--tint); box-shadow:inset 0 0 0 3px var(--trail); color:var(--ink);}
.playercard.add .av{font-size:38px; opacity:.7;}

.avatars{display:flex; flex-wrap:wrap; gap:7px;}
.avatars button{
  border:0; cursor:pointer; font-size:25px; line-height:1;
  width:44px; height:44px; border-radius:14px; background:rgba(0,0,0,.05);
  box-shadow:inset 0 0 0 2px transparent; transition:box-shadow .15s, background .15s;
}
.avatars button[aria-pressed="true"]{background:var(--paper); box-shadow:inset 0 0 0 3px var(--action);}
.avatars button[disabled]{opacity:.28; cursor:default;}

.playerrow{
  display:flex; align-items:center; gap:9px; padding:8px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.playerrow:last-of-type{border-bottom:0;}
.playerrow .av{font-size:26px; flex:none;}
.playerrow .nm{flex:1; min-width:0;}
.playerrow .nm b{display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.playerrow .nm small{font-size:11.5px; opacity:.6; font-weight:600;}
.playerrow button{
  border:0; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600;
  padding:7px 11px; border-radius:999px; background:rgba(0,0,0,.06); color:var(--on-card);
}
.playerrow button.del{background:rgba(232,69,60,.12); color:var(--tomato);}

/* the animal in a settings row doubles as the button to change it */
.playerrow .avbtn{
  border:0; cursor:pointer; font-size:26px; line-height:1; flex:none;
  width:42px; height:42px; border-radius:13px; padding:0;
  background:rgba(0,0,0,.05); box-shadow:inset 0 0 0 2px transparent;
  transition:box-shadow .15s, background .15s;
}
.playerrow .avbtn:active{background:var(--paper); box-shadow:inset 0 0 0 3px var(--action);}