/* ==========================================================================
   1. TOKENS + RESET
   ========================================================================== */
:root{
  --ink:#16213c;
  --muted:#5b6b82;
  --line:#d5e0ee;
  --page:#eef6fc;
  --paper:#ffffff;

  --sky-1:#2f8fd8;
  --sky-2:#7fd0f2;
  --sky-3:#dff4ff;

  --grass:#4fb85e;
  --grass-dark:#37974a;

  --shadow:0 10px 24px rgba(31,58,96,.14);
  --shadow-soft:0 6px 16px rgba(31,58,96,.10);

  --font:ui-rounded,"Arial Rounded MT Bold","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;

  /* tense / form tones: base, dark (borders), light (gradient top), tint (fills) */
  --tone-blue:#2f6fdd;   --tone-blue-d:#1b478f;   --tone-blue-l:#639aef;   --tone-blue-bg:#eaf2ff;
  --tone-red:#e0483f;    --tone-red-d:#9c2a24;    --tone-red-l:#f0837b;    --tone-red-bg:#fff0ee;
  --tone-amber:#e0940f;  --tone-amber-d:#96600a;  --tone-amber-l:#f7c249;  --tone-amber-bg:#fff8e6;
  --tone-teal:#12909f;   --tone-teal-d:#0a616c;   --tone-teal-l:#45bfcd;   --tone-teal-bg:#e6f8fa;
  --tone-green:#1f9c58;  --tone-green-d:#127040;  --tone-green-l:#51c384;  --tone-green-bg:#e9faf0;
  --tone-pink:#d33a80;   --tone-pink-d:#93225a;   --tone-pink-l:#e876aa;   --tone-pink-bg:#fff0f7;
  --tone-purple:#8149cf; --tone-purple-d:#552f8c; --tone-purple-l:#a97ce4; --tone-purple-bg:#f4edff;
  --tone-slate:#5a6b85;  --tone-slate-d:#38465c;  --tone-slate-l:#8698af;  --tone-slate-bg:#eef2f8;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body,#app{width:100%;height:100%;margin:0;padding:0}
html,body{overflow:hidden}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--page);
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
}
button,a,input{font:inherit;touch-action:manipulation}
button{cursor:pointer;border:0;background:none;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid #111827;outline-offset:3px}
img{-webkit-user-drag:none}

/* ==========================================================================
   2. SCREEN PLUMBING
   ========================================================================== */
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}
.screen.scrolls{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

/* Chunky arcade press for every big control */
.press{transition:transform .09s ease,box-shadow .09s ease}
.press:active{transform:translateY(6px)!important;box-shadow:0 0 0 rgba(0,0,0,0)!important}

/* ==========================================================================
   3. TITLE SCREEN
   ========================================================================== */
#s-title{overflow:hidden;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 52%,var(--sky-3) 100%)}

/* "meet" guarantees the crane is never cropped on wide or short boards. The
   scene's ground/hill paths run far past the viewBox and overflow:visible lets
   them paint into the side letterbox, so no gap ever shows. The sky itself is
   the CSS gradient on #s-title, so the SVG can stay transparent. */
.scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;overflow:visible}

.sun{position:absolute;top:clamp(6px,2vh,26px);right:clamp(6px,2vw,34px);width:clamp(76px,11vw,168px);height:clamp(76px,11vw,168px);z-index:1;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(180,120,0,.28))}
.sun .rays{animation:spin 46s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}

.clouds{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.cloudlogo{position:absolute;left:-620px;animation:drift linear infinite}
.cloudlogo img{display:block;width:100%;height:auto;animation:bob 5.5s ease-in-out infinite;filter:drop-shadow(0 6px 12px rgba(20,70,110,.20))}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 660px))}}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.02)}}
.c1{top:4%;width:clamp(190px,26vw,380px);animation-duration:52s;animation-delay:-6s;opacity:.8}
.c2{top:17%;width:clamp(130px,17vw,250px);animation-duration:38s;animation-delay:-24s;opacity:.58}
.c3{top:29%;width:clamp(150px,21vw,310px);animation-duration:66s;animation-delay:-46s;opacity:.42}

.title-stack{
  position:relative;z-index:5;
  padding:clamp(10px,3.5vh,44px) 16px 0;
  text-align:center;pointer-events:none;
  animation:fadeUp .8s ease-out both
}
/* Keeps the white title legible whichever cloud logo drifts behind it. */
.title-stack::before{
  content:"";position:absolute;z-index:-1;
  inset:-14% -6% -22%;
  background:radial-gradient(ellipse at 50% 34%,rgba(13,71,117,.34) 0%,rgba(13,71,117,.16) 46%,transparent 70%);
  pointer-events:none
}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.mega{
  margin:0;
  font-size:clamp(2.6rem,9.4vmin,7.4rem);
  font-weight:900;line-height:.92;letter-spacing:-.035em;
  color:#fff;text-transform:uppercase;
  text-shadow:0 4px 0 #1d6ea8,0 9px 22px rgba(6,44,73,.42)
}
.mega small{display:block;margin-top:.1em;font-size:.28em;letter-spacing:.13em;color:#fff8d8;text-shadow:0 2px 0 #1d6ea8}

.chips{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  width:fit-content;
  gap:clamp(5px,1vw,13px);
  margin:clamp(8px,1.8vh,20px) auto 0;
  padding:clamp(6px,1.2vh,13px) clamp(12px,2.2vw,28px);
  background:rgba(255,255,255,.94);
  border:4px solid #fff;border-radius:999px;
  box-shadow:0 7px 0 rgba(23,86,133,.25),0 16px 30px rgba(12,60,98,.22)
}
.chips b{font-size:clamp(.85rem,2.1vmin,1.7rem);font-weight:900}
.chips .arw{color:#93a3b8;font-size:clamp(.7rem,1.6vmin,1.25rem);font-weight:900;letter-spacing:.08em}
.chips .t-past{color:var(--tone-red-d)}
.chips .t-pres{color:var(--tone-blue-d)}
.chips .t-fut{color:var(--tone-amber-d)}

.sub{
  width:fit-content;max-width:min(620px,92vw);
  margin:clamp(6px,1.2vh,13px) auto 0;
  padding:clamp(4px,.8vh,8px) clamp(11px,1.8vw,19px);
  background:rgba(10,54,90,.46);
  border:2px solid rgba(255,255,255,.5);
  border-radius:999px;
  color:#fff;font-size:clamp(.66rem,1.5vmin,.94rem);font-weight:800;
  letter-spacing:.03em;line-height:1.35;
  text-shadow:0 1px 4px rgba(2,26,48,.75)
}

.title-actions{
  position:absolute;left:0;right:0;bottom:clamp(12px,3.6vh,46px);
  z-index:6;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.4vh,14px)
}
.big-start{
  display:inline-flex;align-items:center;gap:.5em;
  padding:clamp(11px,2.1vh,22px) clamp(24px,4.6vw,64px);
  background:linear-gradient(180deg,#ffdc6a 0%,#ffb524 100%);
  color:#6b3d00;border:5px solid #c07a10;border-radius:999px;
  font-size:clamp(1.05rem,3.5vmin,2.5rem);font-weight:900;
  letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 9px 0 #96580a,0 18px 34px rgba(94,54,4,.35);
  animation:fadeUp .7s ease-out .35s both
}
.title-note{
  color:#eaf7ff;font-size:clamp(.66rem,1.5vmin,.9rem);font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;text-shadow:0 1px 3px rgba(0,20,40,.45)
}

/* crane hoist motion */
#hoist{animation:hoist 7.5s ease-in-out infinite;transform-origin:415px 338px;transform-box:view-box}
@keyframes hoist{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-52px) rotate(2.2deg)}
  55%{transform:translateY(-24px) rotate(-1.8deg)}
  80%{transform:translateY(-58px) rotate(1deg)}
}
.flagwave{animation:flagwave 2.6s ease-in-out infinite;transform-origin:left center;transform-box:fill-box}
@keyframes flagwave{0%,100%{transform:scaleX(1) skewY(0deg)}50%{transform:scaleX(.86) skewY(-4deg)}}

/* ==========================================================================
   4. SETUP SCREEN  (2.2 launcher language: sky hero + card grid)
   ========================================================================== */
#s-setup{background:var(--page)}

.hero{
  position:relative;flex-shrink:0;overflow:hidden;
  padding:clamp(14px,2.6vh,26px) 18px clamp(16px,2.8vh,30px);
  text-align:center;
  background:
    radial-gradient(circle at 94% 24%,#fff7cc 0 2.2%,#ffd95d 2.3% 3.3%,transparent 3.5%),
    linear-gradient(180deg,#1a6fa8 0%,#3d9ad4 50%,#7ec4eb 100%);
  border-bottom:4px solid rgba(255,255,255,.35);
  box-shadow:0 10px 28px rgba(20,70,110,.18)
}
.hero .puff{position:absolute;z-index:1;pointer-events:none;border-radius:999px;background:rgba(255,255,255,.62);opacity:.75}
.hero .puff::before,.hero .puff::after{content:"";position:absolute;background:inherit;border-radius:50%}
.hero .p1{width:96px;height:34px;top:22%;left:6%}
.hero .p1::before{width:42px;height:42px;top:-19px;left:14px}
.hero .p1::after{width:54px;height:54px;top:-26px;left:38px}
.hero .p2{width:124px;height:40px;top:58%;left:74%;opacity:.5}
.hero .p2::before{width:50px;height:50px;top:-22px;left:18px}
.hero .p2::after{width:62px;height:62px;top:-30px;left:50px}

.hero-inner{position:relative;z-index:3;width:min(940px,100%);margin:0 auto}
.hero-logo{display:block;width:clamp(126px,15vw,186px);height:auto;margin:0 auto 6px;filter:drop-shadow(0 4px 10px rgba(0,40,80,.28))}
.eyebrow{margin:0 0 5px;color:#eaf7ff;font-size:clamp(9px,1.2vw,12px);font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.hero h1{margin:0;color:#fff;font-size:clamp(22px,4vw,42px);font-weight:900;line-height:1.1;letter-spacing:-.03em;text-shadow:0 3px 0 rgba(21,75,117,.3)}
.lead{
  max-width:700px;margin:10px auto 0;padding:9px 14px;
  color:#0f3a5c;background:rgba(255,255,255,.9);
  border:2px solid rgba(255,255,255,.95);border-radius:14px;
  font-size:clamp(12px,1.5vw,15px);font-weight:750;line-height:1.45
}

.setup-body{max-width:1180px;width:100%;margin:0 auto;padding:clamp(14px,2.4vh,26px) 16px clamp(20px,4vh,44px)}

.sec{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin:0 0 12px}
.sec h2{margin:0;font-size:clamp(17px,2.4vw,25px);font-weight:900;letter-spacing:-.02em}
.sec p{margin:0;color:var(--muted);font-size:13px;font-weight:750}

.lvl-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:clamp(18px,3vh,32px)}
@media (min-width:560px){.lvl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.lvl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lvl{
  position:relative;display:flex;flex-direction:column;gap:2px;
  padding:14px 14px 13px;text-align:left;
  background:linear-gradient(165deg,#fff 0%,var(--tint) 100%);
  border:3px solid var(--line);border-radius:20px;
  box-shadow:0 6px 0 #c9d6e6,0 12px 22px rgba(31,58,96,.08);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease
}
.lvl::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--th);border-radius:17px 17px 0 0}
.lvl:hover{transform:translateY(-4px);border-color:var(--th);box-shadow:0 10px 0 #b7c7db,0 16px 28px rgba(31,58,96,.12)}
.lvl[aria-pressed="true"]{
  border-color:var(--th);
  box-shadow:0 0 0 4px var(--tint),0 8px 0 var(--th),0 16px 28px rgba(31,58,96,.16);
  transform:translateY(-2px)
}
.lvl-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px}
.lvl-ico{display:grid;place-items:center;width:50px;height:50px;background:#fff;border:2px solid var(--line);border-radius:15px;font-size:27px;line-height:1}
.lvl-num{color:#7a8aa0;font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;text-align:right}
.lvl-pill{display:inline-block;margin-top:4px;padding:3px 9px;background:var(--th);color:#fff;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.05em}
.lvl .lvl-name{display:block;margin:10px 0 6px;font-size:17px;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.lvl .turn{
  align-self:flex-start;padding:5px 10px;
  color:var(--th);background:rgba(255,255,255,.92);
  border:2px solid var(--tint2);border-radius:999px;
  font-size:11.5px;font-weight:900;line-height:1.3
}
.lvl .teach{flex:1;margin:8px 0 9px;color:var(--muted);font-size:12.5px;font-weight:650;line-height:1.4}
.lvl .cnt{color:var(--th);font-size:12px;font-weight:900}
.lvl .tick{
  position:absolute;top:-11px;right:-9px;
  display:none;place-items:center;width:32px;height:32px;
  background:var(--th);color:#fff;border:3px solid #fff;border-radius:50%;
  font-size:16px;font-weight:900;
  box-shadow:0 4px 10px rgba(16,36,64,.28)
}
.lvl[aria-pressed="true"] .tick{display:grid}

.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.panel{padding:16px 16px 18px;background:#fff;border:3px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft)}
.panel h3{margin:0 0 3px;font-size:15px;font-weight:900}
.panel .hint{margin:0 0 13px;color:var(--muted);font-size:12.5px;font-weight:700;line-height:1.4}

.count-row{display:flex;gap:9px;margin-bottom:15px}
.count-btn{
  flex:1;min-height:66px;padding:6px 8px;
  background:#f8fafc;color:#344054;
  border:3px solid #cbd5e1;border-radius:17px;
  box-shadow:0 5px 0 #aab8c8;font-weight:900
}
.count-btn .n{display:block;font-size:25px;line-height:1}
.count-btn .l{display:block;margin-top:3px;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.count-btn[aria-pressed="true"]{color:#6b4400;background:#fff1a4;border-color:#e0a300;box-shadow:0 5px 0 #a56900}

.name-list{display:flex;flex-direction:column;gap:8px}
.name-row{display:flex;align-items:center;gap:9px}
.swatch{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:var(--tc);border:2px solid var(--tcd);box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}
.name-row input{
  flex:1;min-width:0;min-height:44px;padding:8px 12px;
  color:var(--ink);background:#f9fbfe;
  border:2.5px solid var(--line);border-radius:12px;
  font-size:15px;font-weight:800
}
.name-row input:focus{border-color:var(--tc);background:#fff;outline:none}

.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:2px solid #edf2f9}
.opt:first-of-type{border-top:0}
.opt-txt strong{display:block;font-size:13.5px;font-weight:900}
.opt-txt span{display:block;margin-top:2px;color:var(--muted);font-size:11.5px;font-weight:700;line-height:1.35}
.toggle{
  position:relative;flex-shrink:0;
  width:82px;height:42px;padding:0;
  background:#e6ecf5;border:2.5px solid #c3d0e2;border-radius:999px;
  font-size:12px;font-weight:900;color:#5b6b82;
  transition:background .16s ease,border-color .16s ease,color .16s ease
}
.toggle .knob{
  position:absolute;top:50%;left:4px;
  width:28px;height:28px;margin-top:-14px;
  background:#fff;border:2px solid #c3d0e2;border-radius:50%;
  box-shadow:0 2px 4px rgba(31,58,96,.2);
  transition:left .16s ease,border-color .16s ease
}
.toggle .lbl{
  position:absolute;inset:0;display:grid;place-items:center;
  padding-left:26px;letter-spacing:.06em;
  transition:padding .16s ease
}
.toggle[aria-pressed="true"]{background:#d6f5e0;border-color:#5cc47c;color:#137a41}
.toggle[aria-pressed="true"] .knob{left:calc(100% - 32px);border-color:#5cc47c}
.toggle[aria-pressed="true"] .lbl{padding-left:0;padding-right:26px}

.go-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:clamp(18px,3vh,30px)}
.go{
  display:inline-flex;align-items:center;gap:.45em;
  min-height:66px;padding:12px 40px;
  background:linear-gradient(180deg,#ffdc6a,#ffb524);
  color:#6b3d00;border:4px solid #c07a10;border-radius:20px;
  box-shadow:0 8px 0 #96580a,0 16px 28px rgba(94,54,4,.24);
  font-size:clamp(19px,2.6vw,26px);font-weight:900
}
.ghost{
  display:inline-flex;align-items:center;min-height:52px;padding:10px 20px;
  color:#2e4f82;background:#eef5ff;
  border:3px solid #7b9fd5;border-radius:16px;
  font-size:14px;font-weight:900
}
.foot{padding:6px 20px 26px;color:#7b8ba1;font-size:11.5px;font-weight:750;text-align:center}

/* ==========================================================================
   5. SHARED HEADER (game + race)
   ========================================================================== */
.bar{
  position:relative;z-index:40;flex-shrink:0;
  height:clamp(54px,8.6vh,84px);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 clamp(8px,1.6vw,20px);
  background:rgba(255,255,255,.9);
  border-bottom:4px solid #cfe3f4;
  box-shadow:0 4px 14px rgba(39,69,105,.1);
  backdrop-filter:blur(6px)
}
.brand{
  display:flex;align-items:center;gap:clamp(6px,1vw,13px);
  min-width:0;height:80%;padding:0 clamp(8px,1.2vw,14px) 0 clamp(5px,.8vw,9px);
  border:3px solid transparent;border-radius:16px;
  transition:background .14s ease,border-color .14s ease,transform .09s ease
}
.brand:hover{background:#eef6ff;border-color:#9dc3ea}
.brand:active{transform:translateY(2px)}
.brand img{height:clamp(24px,4.4vh,44px);width:auto;flex-shrink:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.14))}
.brand-txt{min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.brand-name{
  color:#1f6fd0;font-size:clamp(.86rem,2.5vmin,1.62rem);font-weight:900;
  letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;
  text-shadow:2px 2px 0 rgba(255,255,255,.85)
}
.brand-back{
  display:flex;align-items:center;gap:3px;margin-top:2px;
  color:#7b90ab;font-size:clamp(.5rem,1.35vmin,.72rem);font-weight:900;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap
}
.brand:hover .brand-back{color:#2f6fdd}

.bar-right{display:flex;align-items:center;gap:clamp(5px,.9vw,10px);flex-shrink:0}
.levelchip{
  display:none;align-items:center;gap:6px;
  padding:6px 13px;background:var(--th,#2f6fdd);color:#fff;
  border-radius:999px;font-size:clamp(.55rem,1.35vmin,.78rem);font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.18)
}
@media (min-width:820px){.levelchip{display:inline-flex}}
.roundchip{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;background:#eef4fc;color:#3f5876;
  border:2.5px solid #cddef2;border-radius:999px;
  font-size:clamp(.55rem,1.35vmin,.78rem);font-weight:900;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap
}
.icon-btn{
  display:grid;place-items:center;width:clamp(34px,5.2vh,44px);height:clamp(34px,5.2vh,44px);
  background:#eef4fc;border:2.5px solid #cddef2;border-radius:13px;
  font-size:clamp(14px,2.2vh,19px);line-height:1;
  box-shadow:0 3px 0 #b9cee6
}
.icon-btn:hover{background:#e2eefc}
.who{
  position:relative;display:inline-flex;align-items:center;
  padding:9px 16px 9px 15px;
  background:linear-gradient(180deg,#ffdc6a,#ffbe2e);
  color:#6b4400;border:3px solid #cf8f13;border-radius:15px;
  box-shadow:0 5px 0 #a06a08;
  font-size:clamp(.66rem,1.75vmin,1rem);font-weight:900;white-space:nowrap
}
.who .star{
  position:absolute;top:-10px;right:-9px;width:25px;height:25px;
  padding:3px;background:#fff;border:2.5px solid #f0b419;border-radius:50%;
  color:#f5a623;box-shadow:0 3px 7px rgba(0,0,0,.2)
}

/* ==========================================================================
   6. GAME SCREEN
   ========================================================================== */
#s-game{background:#f2fbf4;background-image:radial-gradient(#c4f0cf 2px,transparent 2px);background-size:38px 38px}

.play{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);padding:clamp(7px,1.3vh,16px) clamp(8px,1.4vw,20px);position:relative;isolation:isolate;overflow:hidden}
.qwrap{position:relative;z-index:1;width:100%;max-width:1240px;height:100%;min-height:0;margin:0 auto;display:grid;grid-template-rows:minmax(0,1fr);align-items:center}

/* ==========================================================================
   WELLESLEY BACKGROUND BRANDING
   Three instances of the one SVG, drawn as CSS backgrounds so the artwork is
   declared once — the offline bundle inlines a 237 KB logo, and three <img>
   tags would embed it three times over.

   The logo keeps its own colours; opacity alone softens it. No filters, so
   the reds, oranges and greens stay Wellesley's. The layer sits at z-index 0
   under .qwrap, takes no pointer events and no focus, and is aria-hidden.
   ========================================================================== */
.wellesley-background-logos{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;user-select:none
}
.wellesley-bg-logo{
  position:absolute;display:block;
  background-image:url("../assets/logo.svg");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  pointer-events:none
}
/* Asymmetric on purpose: two anchors bleeding off opposite edges at different
   sizes, and a third smaller one set high between them. Opacities differ
   slightly so the composition reads as depth rather than three stamps. */
.logo-one{
  width:clamp(300px,38vw,760px);aspect-ratio:3/2;
  left:-6%;bottom:-4%;
  opacity:.17;transform:rotate(-6deg)
}
.logo-two{
  width:clamp(260px,32vw,640px);aspect-ratio:3/2;
  right:-7%;top:6%;
  opacity:.15;transform:rotate(5deg)
}
.logo-three{
  width:clamp(190px,22vw,430px);aspect-ratio:3/2;
  left:46%;top:-9%;
  opacity:.11;transform:rotate(-2deg)
}
/* Shorter screens: pull the top logo in so it does not sit behind the badges,
   and shrink rather than drop any of the three. */
@media (max-height:740px){
  .logo-one{width:clamp(240px,30vw,520px);left:-8%;bottom:-8%}
  .logo-two{width:clamp(210px,26vw,460px);right:-9%;top:2%}
  .logo-three{width:clamp(150px,17vw,300px);left:52%;top:-12%}
}
/* Tablet portrait is 768 wide, so the breakpoint sits above it: at the wide
   settings the third logo was more than half off the top edge here. */
@media (max-width:820px){
  .logo-one{width:clamp(220px,52vw,360px);left:-14%;bottom:-6%;opacity:.15}
  .logo-two{width:clamp(200px,46vw,320px);right:-15%;top:4%;opacity:.13}
  .logo-three{width:clamp(140px,32vw,230px);left:38%;top:-3%;opacity:.11}
}

.qcard{
  position:relative;
  max-height:100%;min-height:0;overflow:hidden;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(8px,1.5vh,20px) clamp(10px,1.6vw,22px);
  background:#fff;
  border:clamp(5px,.85vh,9px) solid var(--to-c,#2f6fdd);
  border-radius:clamp(20px,3.4vh,42px);
  box-shadow:0 14px 0 rgba(23,72,120,.1),0 26px 50px rgba(23,72,120,.16);
  transition:border-color .25s ease
}
.qcue{
  position:absolute;top:clamp(6px,1.1vh,14px);left:clamp(8px,1.2vw,18px);
  font-size:clamp(19px,3.4vmin,40px);line-height:1;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.14));pointer-events:none
}

.badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(5px,.9vw,11px);margin-bottom:clamp(4px,.8vh,10px)}
.badge{
  padding:clamp(3px,.6vh,8px) clamp(9px,1.4vw,18px);
  border:clamp(3px,.5vh,5px) solid;border-radius:clamp(13px,2vh,24px);
  font-size:clamp(.85rem,2.5vmin,2.2rem);font-weight:900;line-height:1.1;
  box-shadow:0 3px 0 rgba(0,0,0,.12)
}
.badge-from{background:var(--from-c);border-color:var(--from-d);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.badge-turn{background:#fff;border-color:#cbd5e1;color:#64748b;font-size:clamp(.7rem,1.9vmin,1.5rem)}
.badge-to{position:relative;background:var(--to-c);border-color:var(--to-d);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.badge-to .star{
  position:absolute;top:-11px;right:-11px;width:26px;height:26px;padding:3px;
  background:#fff;border:2.5px solid #f0b419;border-radius:50%;color:#f5a623;
  box-shadow:0 3px 8px rgba(0,0,0,.22);opacity:0;transform:scale(.4);
  transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none
}
.revealed .badge-to .star{opacity:1;transform:scale(1)}

/* The prompt is a real <button>: tapping it spins up a different sentence.
   Everything below the first three lines is the original panel styling, kept
   identical so the card looks exactly as it did in 2.2. */
.readbox{
  appearance:none;-webkit-appearance:none;
  font:inherit;color:inherit;text-align:center;cursor:pointer;
  width:100%;flex:0 1 auto;min-height:0;max-height:100%;
  display:flex;align-items:center;justify-content:center;
  margin:clamp(4px,.7vh,11px) 0;
  padding:clamp(16px,4.6vh,58px) clamp(10px,1.5vw,24px);
  background:linear-gradient(180deg,#fff 0%,var(--from-bg,#eef6ff) 100%);
  border:clamp(4px,.8vh,8px) solid var(--from-c,#2f6fdd);
  border-radius:clamp(16px,2.8vh,34px);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.8);
  transition:border-color .25s ease,background .25s ease,transform .12s ease
}
.readbox:active{transform:translateY(2px) scale(.995)}

/* Brief shuffle while the next sentence is chosen. */
.readbox.rerolling .sentence{
  animation:sentenceSwap .34s ease both
}
@keyframes sentenceSwap{
  0%{opacity:1;transform:translateX(0)}
  45%{opacity:0;transform:translateX(-14px)}
  55%{opacity:0;transform:translateX(14px)}
  100%{opacity:1;transform:translateX(0)}
}

/* ==========================================================================
   "TAP THE SENTENCE TO SPIN"
   The card is the tap target, so the sign has to live OUTSIDE it and point
   back in — a small badge inside the card read as decoration and got missed.
   cardzone is the anchor; the hint hangs off its top edge in the clear space
   above, where every screen size measured leaves at least 150px.
   ========================================================================== */
.cardzone{
  position:relative;
  min-height:0;max-height:100%;
  display:flex;flex-direction:column
}

.reroll-hint{
  position:absolute;z-index:4;
  bottom:100%;                       /* directly above the card */
  right:clamp(14px,9vw,150px);
  display:flex;flex-direction:column;align-items:flex-end;
  gap:clamp(1px,.3vh,4px);
  margin-bottom:clamp(-6px,-.6vh,-2px);
  pointer-events:none;user-select:none
}

.reroll-words{
  transform:rotate(-3deg);
  color:#d07a12;
  font-size:clamp(.95rem,2.5vmin,1.95rem);
  font-weight:900;letter-spacing:.01em;line-height:1;
  white-space:nowrap;
  /* chalkboard-marker look: a white keyline keeps it legible over the
     drifting Wellesley logos behind it */
  text-shadow:
     3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
     3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff,
     0 4px 10px rgba(120,70,10,.22)
}

/* The sweep starts under the text and lands on the card's top edge. */
.reroll-arrow{
  height:clamp(54px,10.5vh,124px);
  width:auto;
  margin-right:clamp(6px,1.4vw,26px);
  color:#eb9a35;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.95))
         drop-shadow(0 6px 9px rgba(120,70,10,.20))
}

/* Nudges the whole sign when a reroll fires, so the tap is acknowledged. */
.reroll-hint.spinning{animation:rerollNudge .34s ease}
@keyframes rerollNudge{
  0%,100%{transform:translate(0,0)}
  40%{transform:translate(-5px,4px)}
}

.reroll-short{display:none}

/* Short screens: the gap above the card shrinks, so the sign does too. */
@media (max-height:700px){
  .reroll-arrow{height:clamp(46px,8.5vh,86px)}
  .reroll-words{font-size:clamp(.85rem,2.1vmin,1.4rem)}
}
@media (max-width:900px){
  .reroll-long{display:none}
  .reroll-short{display:inline}
  .reroll-hint{right:clamp(8px,4vw,40px)}
  .reroll-arrow{height:clamp(50px,9vh,96px)}
}
/* Longest prompts run to ~25 characters ("I am helping the teacher."), so the
   cap is sized to keep those on one line on a board and to wrap to a readable
   two lines rather than a clipped one when it can't. */
.sentence{
  width:100%;
  font-size:clamp(1.9rem,7.2vw,6.6rem);
  font-weight:900;line-height:1.02;letter-spacing:-.04em;
  color:#1f2937;text-align:center;
  overflow-wrap:break-word;text-wrap:balance
}

.saythis{margin-top:clamp(2px,.5vh,7px);color:#78879c;font-size:clamp(.62rem,1.65vmin,1.14rem);font-weight:900;letter-spacing:.13em;text-transform:uppercase;text-align:center}

/* --slot-h is a floor, not a fixed height: a two-line answer grows the row
   instead of being cut off. No percentage heights here, so the children keep a
   definite minimum even though the row itself is auto-height. */
.slot{
  --slot-h:clamp(56px,13vh,120px);
  width:100%;flex-shrink:0;
  margin-top:clamp(5px,.9vh,12px);
  display:flex;align-items:stretch;gap:clamp(6px,1.1vw,15px)
}
.revealbtn{
  flex:1;min-width:0;min-height:var(--slot-h);
  border-radius:clamp(15px,2.2vh,26px);
  background:linear-gradient(180deg,var(--to-l) 0%,var(--to-c) 62%,var(--to-d) 100%);
  color:#fff;border:clamp(4px,.75vh,7px) solid var(--to-d);
  font-size:clamp(1rem,3.2vw,2.9rem);font-weight:900;line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.2);
  box-shadow:0 7px 0 rgba(0,0,0,.2),0 16px 28px rgba(20,40,70,.2);
  animation:popIn .35s cubic-bezier(.34,1.56,.64,1) both
}
.answerbox{
  flex:1;min-width:0;min-height:var(--slot-h);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(7px,1.3vh,16px) clamp(10px,1.6vw,20px);
  background:var(--to-bg);border:clamp(4px,.75vh,7px) solid var(--to-c);
  border-radius:clamp(15px,2.2vh,26px);text-align:center;
  animation:bounceIn .5s ease both
}
/* line-height has to clear the underlines on .ch descenders when this wraps. */
.answer{
  color:var(--to-d);
  font-size:clamp(1.05rem,4vw,3.9rem);
  font-weight:900;line-height:1.16;letter-spacing:-.02em;
  overflow-wrap:break-word;text-wrap:balance
}
.answer .ch{
  color:var(--to-c);
  text-decoration:underline;text-decoration-thickness:.075em;
  text-underline-offset:.14em;text-decoration-color:rgba(0,0,0,.22)
}

.buildbtn{
  position:relative;flex:0 0 auto;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  gap:clamp(3px,.6vw,9px);
  height:var(--slot-h);min-width:clamp(104px,17vw,250px);
  padding:clamp(6px,1vh,12px) clamp(11px,1.6vw,22px);
  background:linear-gradient(135deg,#facc15 0%,#f97316 58%,#dc2626 100%);
  color:#fff;border:clamp(4px,.7vh,7px) solid #92400e;border-radius:999px;
  font-size:clamp(.82rem,2vw,1.9rem);font-weight:900;line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.24);
  box-shadow:0 clamp(5px,.8vh,9px) 0 #92400e,0 clamp(10px,1.8vh,20px) clamp(14px,2.6vh,28px) rgba(124,45,18,.3);
  animation:buildIn .5s cubic-bezier(.34,1.56,.64,1) both,buildWig 1.8s ease-in-out .8s infinite
}
.buildbtn:active{transform:translateY(6px);box-shadow:0 1px 0 #92400e,0 8px 16px rgba(124,45,18,.24)}
.buildbtn .dig{width:clamp(26px,3.4vw,58px);height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.22))}
.buildbtn .tick-line{
  position:absolute;left:12%;right:12%;bottom:clamp(4px,.6vh,8px);height:4px;
  background:rgba(255,255,255,.34);border-radius:99px;overflow:hidden
}
.buildbtn .tick-line i{display:block;height:100%;width:100%;background:#fff;border-radius:99px;transform-origin:left center;animation:countdown linear forwards}
@keyframes countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes buildIn{from{opacity:0;transform:translateX(38px) scale(.7)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes buildWig{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1.6deg)}}

/* Narrow boards: drop the digger art and the label, keep the arrow target big. */
@media (max-width:700px){
  .buildbtn .dig{display:none}
  .buildbtn{min-width:clamp(84px,26vw,150px)}
}
@media (max-height:740px){
  .sentence{font-size:clamp(1.7rem,5.4vw,4.8rem)}
  .slot{--slot-h:clamp(46px,10vh,80px)}
  .answer{font-size:clamp(1rem,3.1vw,2.7rem);line-height:1.12}
  .revealbtn{font-size:clamp(.9rem,2.5vmin,2rem)}
  .badge{font-size:clamp(.74rem,2.1vmin,1.65rem)}
}

/* ==========================================================================
   7. RACE / BUILD SCREEN
   ========================================================================== */
#s-race{background:linear-gradient(180deg,#8fd6f2 0%,#d8f2fd 62%,#eefaff 100%)}
.yard{position:relative;flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;gap:clamp(4px,1vw,20px);padding:clamp(6px,1.2vh,14px) clamp(6px,1.4vw,22px) 0}

/* Sky decoration behind the castles: same drifting logos as the title screen,
   at z-index 0 and before the hills in source order so the grass covers them
   and the lanes (z-index 10) always sit in front. Lanes retuned for the
   shorter yard so a cloud is not permanently parked behind the name plates. */
.yard-clouds{z-index:0}
.yard-clouds .c1{top:15%}
.yard-clouds .c2{top:28%}
.yard-clouds .c3{top:41%}
.hill{position:absolute;left:-8%;bottom:-9vh;width:116%;height:20vh;background:var(--grass);border-top:9px solid var(--grass-dark);border-radius:50% 50% 0 0;z-index:0}
.hill2{position:absolute;left:-14%;bottom:-13vh;width:128%;height:24vh;background:#66c976;border-top:8px solid #4bb05d;border-radius:50% 50% 0 0;z-index:0;opacity:.85}

.flash{
  position:absolute;top:clamp(4px,1vh,12px);left:50%;transform:translateX(-50%);
  z-index:70;display:none;align-items:center;gap:.4em;
  padding:clamp(7px,1.2vh,14px) clamp(14px,2.2vw,30px);
  background:rgba(255,255,255,.97);
  border:4px solid #f5c518;border-radius:999px;
  box-shadow:0 8px 0 rgba(180,130,0,.22),0 18px 34px rgba(20,50,80,.22);
  color:#1f2937;font-size:clamp(.85rem,2.4vmin,1.9rem);font-weight:900;
  white-space:nowrap;animation:popIn .32s cubic-bezier(.34,1.56,.64,1) both
}
.flash.show{display:inline-flex}

.lane{
  position:relative;z-index:10;flex:1;min-width:0;
  display:flex;flex-direction:column;
  padding-bottom:clamp(6px,1.2vh,14px);
  transition:opacity .25s ease,filter .25s ease
}
.lane.dim{opacity:.34;filter:grayscale(.4);pointer-events:none}
.lane.win .plate{animation:winPulse .85s ease-in-out infinite}
@keyframes winPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

.plate{
  flex-shrink:0;width:min(100%,224px);margin:0 auto clamp(4px,.8vh,10px);
  padding:clamp(4px,.8vh,9px) 10px;
  background:rgba(255,255,255,.92);
  border:3px solid #fff;border-radius:17px;
  box-shadow:0 4px 0 rgba(31,72,116,.13),0 8px 18px rgba(31,72,116,.12);
  text-align:center
}
.plate .tn{
  display:block;overflow:hidden;
  color:var(--tcd);font-size:clamp(.8rem,2.3vmin,1.7rem);font-weight:900;
  line-height:1.1;letter-spacing:-.01em;
  text-overflow:ellipsis;white-space:nowrap
}
.plate .row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:2px}
.plate .sc{color:#475569;font-size:clamp(.68rem,1.85vmin,1.15rem);font-weight:900}
.plate .sc b{color:var(--tcd);font-size:1.24em}
.fix{
  display:grid;place-items:center;width:23px;height:23px;
  background:#f1f5f9;color:#64748b;border:1.5px solid #cbd5e1;border-radius:50%;
  font-size:14px;font-weight:900;line-height:1
}
.fix:hover{background:#e2e8f0;color:#334155}

.tower{position:relative;flex:1;min-height:0;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start}
.plinth{
  position:relative;
  flex-shrink:0;width:88%;height:clamp(11px,2vh,20px);
  background:linear-gradient(180deg,#c3ccd8 0%,#93a1b3 55%,#75849a 100%);
  border:2px solid #64748b;border-top-color:#dbe3ec;border-radius:5px 5px 3px 3px;
  box-shadow:0 4px 0 #5b6a80,0 9px 14px rgba(20,40,70,.2)
}
.plinth::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:repeating-linear-gradient(90deg,transparent 0 22%,rgba(70,85,105,.4) 22% 22.9%,transparent 22.9% 50%);
  pointer-events:none
}
.blk{
  position:relative;flex-shrink:0;width:74%;
  background:linear-gradient(180deg,var(--tcl) 0%,var(--tc) 46%,var(--tcd) 100%);
  border:2px solid var(--tcd);border-radius:4px;
  margin-top:-1px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -3px 0 rgba(0,0,0,.16),0 2px 4px rgba(15,23,42,.22);
  animation:drop .3s cubic-bezier(.175,.885,.32,1.275) both
}
.blk::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 48%,rgba(0,0,0,.2) 48% 49.2%,transparent 49.2% 100%);
  border-radius:inherit;pointer-events:none
}
.blk.odd::before{background:repeating-linear-gradient(90deg,transparent 0 23%,rgba(0,0,0,.2) 23% 24.2%,transparent 24.2% 73%,rgba(0,0,0,.2) 73% 74.2%,transparent 74.2% 100%)}
.blk .no{
  position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.9);font-size:clamp(9px,1.5vh,15px);font-weight:900;
  text-shadow:0 2px 3px rgba(0,0,0,.35);pointer-events:none
}
.cap{position:relative;flex-shrink:0;width:74%;height:clamp(8px,1.5vh,15px);display:flex;justify-content:space-between;align-items:flex-end;animation:drop .3s cubic-bezier(.175,.885,.32,1.275) both}
.cap i{
  width:26%;height:100%;
  background:linear-gradient(180deg,var(--tcl),var(--tc));
  border:2px solid var(--tcd);border-bottom:0;border-radius:3px 3px 0 0
}
.crown{
  position:absolute;left:50%;bottom:105%;transform:translateX(-50%);
  font-size:clamp(1.5rem,4.4vh,3rem);line-height:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.28));
  animation:hop 1.1s ease-in-out infinite;pointer-events:none
}
@keyframes hop{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-11px)}}

.tap-zone{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:clamp(3px,.7vh,8px);margin-top:clamp(4px,.9vh,11px);z-index:20}
.tap{
  display:grid;place-items:center;
  width:clamp(58px,10.4vh,108px);height:clamp(58px,10.4vh,108px);
  background:#fff;border:clamp(4px,.8vh,7px) solid var(--tc);border-radius:50%;
  box-shadow:0 8px 0 var(--tcd),0 16px 26px rgba(20,50,90,.2)
}
.tap span{font-size:clamp(24px,5.2vh,54px);line-height:1;animation:hover 1.5s ease-in-out infinite;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.tap:disabled{opacity:.62;cursor:not-allowed;box-shadow:0 3px 0 var(--tcd)}
.tap:disabled span{animation:none}
.tap-lbl{
  padding:clamp(2px,.5vh,5px) clamp(7px,1.1vw,13px);
  background:rgba(255,255,255,.94);
  border:2.5px solid var(--tc);border-radius:999px;
  color:var(--tcd);font-size:clamp(8px,1.4vh,12px);font-weight:900;
  letter-spacing:.07em;text-transform:uppercase;text-align:center;line-height:1.15
}
.tap-key{
  display:none;margin-top:2px;color:#5f7590;
  font-size:clamp(8px,1.25vh,11px);font-weight:800;letter-spacing:.09em;text-transform:uppercase
}
@media (min-width:900px){.tap-key{display:block}}

.race-foot{
  position:relative;z-index:30;flex-shrink:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;
  padding:clamp(5px,1vh,11px) 14px clamp(7px,1.3vh,14px);
  background:rgba(255,255,255,.72);border-top:3px solid rgba(255,255,255,.9)
}
.race-foot .note{color:#4a6280;font-size:clamp(9px,1.4vh,12.5px);font-weight:800;letter-spacing:.03em}

/* ==========================================================================
   8. OVERLAYS
   ========================================================================== */
.ov{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(6,20,38,.82);backdrop-filter:blur(7px)}
.ov.show{display:flex}

.sheet{
  position:relative;z-index:10;width:min(440px,100%);
  padding:26px 24px 22px;text-align:center;
  background:#fff;border:4px solid #fff;border-radius:26px;
  box-shadow:0 18px 0 rgba(4,20,40,.22),0 30px 60px rgba(0,0,0,.4);
  animation:popIn .3s cubic-bezier(.34,1.56,.64,1) both
}
.sheet .big{font-size:44px;line-height:1}
.sheet h2{margin:8px 0 6px;font-size:23px;font-weight:900}
.sheet p{margin:0 0 18px;color:var(--muted);font-size:14px;font-weight:750;line-height:1.45}
.sheet-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn-danger{
  min-height:52px;padding:11px 22px;
  background:linear-gradient(180deg,#ff8a80,#e0483f);color:#fff;
  border:3px solid #9c2a24;border-radius:15px;box-shadow:0 5px 0 #7d1f1a;
  font-size:15px;font-weight:900
}
.btn-calm{
  min-height:52px;padding:11px 22px;
  background:linear-gradient(180deg,#eaf2ff,#d3e5fb);color:#204b86;
  border:3px solid #7ba4dc;border-radius:15px;box-shadow:0 5px 0 #5c86bd;
  font-size:15px;font-weight:900
}

/* winner */
.wwrap{position:relative;z-index:10;width:min(760px,100%);max-height:100%;overflow:auto;text-align:center;animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both}
.wcastle{width:clamp(66px,13vh,124px);height:auto;margin:0 auto;color:var(--wc,#ffd24a);filter:drop-shadow(0 0 28px currentColor)}
.wtitle{margin:8px 0 0;color:#fff;font-size:clamp(1.5rem,5.6vmin,3.6rem);font-weight:900;line-height:1.06;letter-spacing:.02em;text-transform:uppercase;text-shadow:0 4px 14px rgba(0,0,0,.5)}
.wtitle em{font-style:normal;color:#ffe066;text-shadow:0 0 26px rgba(255,214,60,.85)}
.wheight{
  display:inline-block;margin-top:13px;padding:9px 26px;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.34);border-radius:999px;
  color:#ffe066;font-size:clamp(.95rem,2.7vmin,1.7rem);font-weight:900;
  backdrop-filter:blur(4px)
}
.board{display:flex;flex-direction:column;gap:8px;width:min(520px,100%);margin:20px auto 0}
.brow{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px}
.brow .rk{color:rgba(255,255,255,.7);font-size:13px;font-weight:900;text-align:right}
.brow .bar-track{height:26px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden}
.brow .bar-fill{
  height:100%;min-width:26px;width:var(--w);
  background:linear-gradient(90deg,var(--tcl),var(--tc));
  border-radius:99px;display:flex;align-items:center;
  padding-left:11px;
  color:#fff;font-size:12.5px;font-weight:900;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.16);
  transition:width .5s cubic-bezier(.34,1.4,.64,1)
}
.brow .pv{color:#fff;font-size:14px;font-weight:900;min-width:2.2em;text-align:right}
.wactions{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:24px}
.btn-gold{
  min-height:56px;padding:12px 28px;
  background:linear-gradient(180deg,#ffdc6a,#ffb524);color:#6b3d00;
  border:3px solid #c07a10;border-radius:16px;box-shadow:0 6px 0 #96580a;
  font-size:16px;font-weight:900
}
.btn-clear{
  min-height:56px;padding:12px 24px;
  background:rgba(255,255,255,.14);color:#fff;
  border:3px solid rgba(255,255,255,.42);border-radius:16px;
  font-size:15px;font-weight:900
}

/* ==========================================================================
   9. FX
   ========================================================================== */
.fx{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}
.spark{position:absolute;border-radius:50%;animation:burst cubic-bezier(.25,1,.5,1) forwards}
@keyframes burst{0%{transform:translate(0,0) scale(1);opacity:1}78%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}
.ring{position:absolute;width:20px;height:20px;border:26px solid #ffe066;border-radius:50%;opacity:0;animation:ringOut .95s ease-out forwards}
@keyframes ringOut{0%{transform:scale(1);opacity:.95;border-width:26px}100%{transform:scale(34);opacity:0;border-width:0}}

@keyframes popIn{0%{transform:scale(.32);opacity:0}55%{transform:scale(1.05);opacity:1}75%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}
@keyframes bounceIn{0%{transform:scale(.32);opacity:0}55%{transform:scale(1.05);opacity:1}75%{transform:scale(.96)}100%{transform:scale(1);opacity:1}}
@keyframes drop{from{transform:translateY(-46px) scale(1.08);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes hover{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-5deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .cloudlogo{animation:none;left:auto}
  .c1{left:4%}.c2{left:42%}.c3{left:70%}
  /* The reroll swaps the sentence outright instead of shuffling it. The JS
     also skips its own delay when this preference is set. */
  .readbox.rerolling .sentence{animation:none}
  .reroll-hint.spinning{animation:none}
  .readbox:active{transform:none}
}