:root{
  --bg:#0b0f1a;
  --panel:#182136;
  --panel2:#1f2a44;
  --line:#2c3a5c;
  --text:#e8eeff;
  --muted:#93a3c4;
  --accent:#5b8cff;
  --good:#2fbf5c;
  --bad:#ff4d6d;
  --gold:#ffd54a;
  --gold-ink:var(--gold);   /* gold as text; the light themes darken it to stay readable */
  --card:#121a2c;
  --input:#0e1526;
  --panel3:#151d31;
  --glow:#1c2745;
  --chip:#3a4665;
}
:root[data-theme="light"]{
  --bg:#eef2fb;
  --panel:#ffffff;
  --panel2:#e7ecf9;
  --panel3:#f4f7ff;
  --line:#ccd6ee;
  --text:#17203a;
  --muted:#5c6b8c;
  --accent:#3f6ff0;
  --good:#1c9e49;
  --bad:#e0244a;
  --card:#f4f7ff;
  --input:#ffffff;
  --glow:#ffffff;
  --chip:#c3cee6;
  /* #ffd54a on a near-white card is 1.3:1 — these three are text, so they darken */
  --gold-ink:#8a5a00;
  --tier-rare:#1f6fd0;
  --tier-superrare:#7b3fc4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:radial-gradient(1200px 700px at 50% -10%, var(--glow) 0%, var(--bg) 60%);
  color:var(--text);
  font:16px/1.45 ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
.choice:focus:not(:focus-visible){outline:none}
.wrap{max-width:760px;margin:0 auto;padding:18px 16px 60px}
header{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.logo{font-size:26px;font-weight:800;letter-spacing:-.5px;background:none;border:0;padding:0;color:var(--text);font-family:inherit;cursor:pointer}
.logo span{color:var(--accent)}
.spacer{flex:1}
.iconbtn{
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  width:38px;height:38px;border-radius:12px;font-size:17px;cursor:pointer;
}
.iconbtn:hover{background:var(--panel2)}
/* the signed-in name, sitting to the left of the account button */
.acctname{
  background:none;border:0;padding:0;color:var(--muted);font-family:inherit;
  font-size:13px;font-weight:800;cursor:pointer;max-width:34vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acctname:hover{color:var(--text)}

.card{
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel3) 100%);
  border:1px solid var(--line);border-radius:20px;padding:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
h2{margin:0 0 4px;font-size:22px;letter-spacing:-.3px}
.sub{color:var(--muted);font-size:14px;margin:0 0 16px}

.btn{
  display:block;width:100%;padding:15px 18px;border-radius:14px;border:0;
  background:linear-gradient(180deg,#6f9bff,#3f6ff0);color:#fff;
  font-family:inherit;font-weight:700;font-size:17px;line-height:1;cursor:pointer;
  box-shadow:0 8px 18px rgba(63,111,240,.35);
  transition:transform .08s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(2px)}
.btn.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--text);box-shadow:none}
.btn.gold{background:linear-gradient(180deg,#ffe27a,#e0a521);color:#3a2a00;box-shadow:0 8px 20px rgba(224,165,33,.35)}
.btn+.btn{margin-top:10px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.small{padding:9px 10px;font-size:12px;border-radius:11px;box-shadow:none}

/* The home actions stack on a phone and pair up once there is room. The two that
   start something keep the full width at both sizes — they are what the page is
   for, and the other four are places to go. */
.homeacts{display:grid;gap:10px}
.homeacts .btn+.btn{margin-top:0}
@media (min-width:560px){
  .homeacts{grid-template-columns:1fr 1fr}
  .homeacts .btn.wide{grid-column:1 / -1}
}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 4px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 8px;text-align:center}
.stat b{display:block;font-size:20px}
.stat small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px}

.prog{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:12px}
.prog .top{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);margin-bottom:8px}
.prog .top b{color:var(--text)}
.bar{height:10px;border-radius:999px;background:var(--input);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#3f6ff0,#22d3ee);transition:width .4s ease}

.ops{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.op{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 12px;
  cursor:pointer;text-align:center;transition:transform .1s ease,border-color .15s ease;
}
.op:hover{border-color:var(--accent);transform:translateY(-2px)}
.op .sym{font-size:34px;font-weight:800;line-height:1}
.op .nm{margin-top:6px;font-size:14px;color:var(--muted)}

.subjects{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.subj{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 12px;
  cursor:pointer;text-align:center;transition:transform .1s ease,border-color .15s ease;
}
.subj:hover{border-color:var(--accent);transform:translateY(-2px)}
.subj .sym{font-size:34px;font-weight:800;line-height:1}
.subj .nm{margin-top:6px;font-size:17px;font-weight:800}
.subj .ds{margin-top:3px;font-size:12px;color:var(--muted)}
.subj .pk{margin-top:5px;font-size:11px;color:var(--faint,var(--muted));opacity:.8}
.subj.spent{opacity:.62}
.subj.spent .pk{color:var(--gold-ink);opacity:1;font-weight:700}

.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lvl{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 12px;
  cursor:pointer;transition:transform .1s ease,border-color .15s ease;position:relative;
}
.lvl:hover{border-color:var(--accent);transform:translateY(-2px)}
.lvl .no{font-weight:800;font-size:17px}
.lvl .set{font-size:12px;color:var(--accent);font-weight:700;margin-top:1px}
.lvl .ds{font-size:12px;color:var(--muted);margin-top:4px}
.lvl .bar{margin-top:9px;height:7px}
.lvl.locked{opacity:.42;cursor:not-allowed}
.lvl.locked:hover{transform:none;border-color:var(--line)}
.lvl.done{border-color:var(--good)}
.lvl .flag{position:absolute;top:10px;right:11px;font-size:13px}

.dots{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.dot{width:11px;height:11px;border-radius:50%;background:#2b3a5c}
.dot.ok{background:var(--good)}
.dot.miss{background:var(--bad)}
.dot.now{background:var(--accent);box-shadow:0 0 0 4px rgba(91,140,255,.2)}

.timerrow{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.timerbar{flex:1;height:12px;border-radius:999px;background:var(--input);border:1px solid var(--line);overflow:hidden}
.timerbar i{
  display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,#ff4d6d,#f5c518 45%,#2fbf5c);
  transform-origin:left center;transition:transform .18s linear;
}
.timerbar.hit{animation:hit .35s}
@keyframes hit{0%,100%{transform:none}30%{transform:translateX(-7px)}65%{transform:translateX(7px)}}
.pts{min-width:56px;text-align:right;font-weight:800;font-size:20px;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.scoreline{text-align:center;color:var(--muted);font-size:13px}
.scoreline b{color:var(--text);font-size:15px}
.scoreline.up{animation:bump .35s}
@keyframes bump{50%{transform:scale(1.14)}}
.helpline{text-align:center;font-size:12px;color:var(--gold-ink);height:18px;margin-top:3px}

.q{font-size:clamp(44px,12vw,62px);font-weight:800;text-align:center;letter-spacing:1px;margin:12px 0 20px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.choice{
  background:var(--input);border:3px solid var(--line);border-radius:20px;color:var(--text);
  font-family:inherit;font-weight:800;font-size:clamp(60px,17vw,96px);line-height:1;
  padding:32px 10px;min-height:152px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease,border-color .15s ease,background .15s ease,opacity .3s ease;
}
.choice:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}
.choice:disabled{cursor:default}
.choice.right{background:rgba(47,191,92,.18);border-color:var(--good);color:#7bf0a4}
.choice.wrong{background:rgba(255,77,109,.16);border-color:var(--bad);color:#ff90a5}
.choice.dim{opacity:.4}
.choice.gone{opacity:.12;text-decoration:line-through}
/* a flag stands in for the question text, so the box stops being about type size */
.q.art{margin:6px 0 18px;line-height:0}
/* Real flags run from a Nepal pennant to the long Qatar bar. Every one sits in the
   same 3:2 box and keeps its own shape inside it, so nothing on the screen moves
   when the next question arrives. The height cap is what keeps a landscape tablet
   showing the question and all four answers at once. */
.flagart{
  width:min(320px,78vw);aspect-ratio:3/2;height:auto;max-height:22vh;
  object-fit:contain;border:0;background:transparent;
  /* the box keeps the space; the shadow follows the flag inside it, not the box */
  filter:drop-shadow(0 8px 16px rgba(13,20,36,.3));
}

/* a state outline is drawn, not photographed, so it takes the theme's own ink.
   An outline is square where a flag is wide, so it needs the tighter cap to leave
   room for all four answers on a landscape tablet. */
.shapeart{width:min(230px,58vw);height:auto;max-height:22vh;display:block;margin:0 auto;color:var(--accent)}
.choices.art .shapepick{width:100%;height:auto;max-height:20vh;display:block;color:var(--accent)}
.subj .subjicon{width:34px;height:34px;display:block;margin:0 auto;color:currentColor}

/* answers that are pictures: the button is the frame, the flag fills it */
.choices.art .choice{padding:12px;min-height:0;font-size:0}
.choices.art .choice img{
  display:block;width:100%;aspect-ratio:3/2;height:auto;max-height:20vh;
  object-fit:contain;border:0;background:transparent;
  filter:drop-shadow(0 4px 10px rgba(13,20,36,.28));
}
.choices.art .choice.gone{text-decoration:none}
.choices.art .choice.gone img{filter:grayscale(1) drop-shadow(0 4px 10px rgba(13,20,36,.2))}

/* answers that are words, not numbers: the giant digit sizes do not fit a city name */
.q.words{font-size:clamp(22px,5.5vw,34px);letter-spacing:0;line-height:1.25}
.choices.words .choice{
  font-size:clamp(17px,4.2vw,24px);line-height:1.2;padding:18px 12px;min-height:104px;
  text-align:center;hyphens:manual;
}
.fb{height:26px;text-align:center;font-weight:700;margin-top:14px}
.fb.good{color:var(--good)}
.fb.bad{color:var(--bad)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}}

/* ---------- cube ---------- */
.scene{perspective:700px;display:flex;align-items:center;justify-content:center}
.cube{
  --s:130px;
  width:var(--s);height:var(--s);position:relative;transform-style:preserve-3d;
  animation:spin 7s linear infinite;
}
.cube.still{animation:none;transform:rotateX(-22deg) rotateY(-35deg)}
@keyframes spin{
  from{transform:rotateX(-20deg) rotateY(0)}
  to{transform:rotateX(-20deg) rotateY(360deg)}
}
.face{
  position:absolute;inset:0;border-radius:6px;
  background:var(--c1);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.14);
  backface-visibility:hidden;
}
.f-front {transform:translateZ(calc(var(--s)/2))}
.f-back  {transform:rotateY(180deg) translateZ(calc(var(--s)/2));filter:brightness(.65)}
.f-right {transform:rotateY(90deg) translateZ(calc(var(--s)/2));filter:brightness(.82)}
.f-left  {transform:rotateY(-90deg) translateZ(calc(var(--s)/2));filter:brightness(.72)}
.f-top   {transform:rotateX(90deg) translateZ(calc(var(--s)/2));filter:brightness(1.2)}
.f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--s)/2));filter:brightness(.5)}

/* Epic: gold running through the whole spectrum and back, slower and wider than
   any other tier so it reads as a different thing rather than a brighter one. */
.cube.epic .face{
  background:linear-gradient(120deg,#ffd54a,#ff5fa2 18%,#a855f7 36%,#22d3ee 54%,
                             #4dff88 72%,#ffe27a 86%,#ffd54a);
  background-size:400% 400%;background-repeat:no-repeat;animation:shimmer 4.2s ease-in-out infinite alternate;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 0 22px rgba(255,213,74,.45);
}
.cube.rare .face{background:linear-gradient(135deg,var(--c1),var(--c2))}
.cube.superrare .face{
  background:linear-gradient(120deg,var(--c1),var(--c2),#ffffff,var(--c1),var(--c2));
  background-size:300% 300%;background-repeat:no-repeat;animation:shimmer 2.6s ease-in-out infinite alternate;
}
/* No tiling, so there is no tile edge to see: the image is wider than the box
   and slides from flush-left to flush-right, then eases back. A repeating
   gradient at an angle always shows the seam where one tile meets the next. */
@keyframes shimmer{from{background-position:0% 50%}to{background-position:100% 50%}}
/* the sheen is white rather than cream, and the halo takes the cube's own color,
   so a silver or a sapphire is not dragged back toward gold */
.cube.legendary .face{
  background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 35%,#fff 50%,var(--c2) 65%,var(--c1) 100%);
  background-size:250% 250%;background-repeat:no-repeat;animation:shimmer 3.4s ease-in-out infinite alternate;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),
             0 0 26px color-mix(in srgb, var(--c1) 55%, transparent);
}
.glow{filter:drop-shadow(0 0 22px var(--c1))}

/* ---------- cube patterns ---------- */
/* A level's finish rides on top of whatever the tier already paints, so a rare
   dotted cube keeps its gradient and gains the dots. Every pattern draws in the
   cube's own second color, so one rule serves all 18 cubes in a level. */
.cube .face::after{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
}
.cube.p-dot .face::after{
  background:radial-gradient(circle at 50% 50%, var(--c2) 30%, transparent 32%) 0 0/26% 26%;
  opacity:.8;
}
.cube.p-stripe .face::after{
  background:repeating-linear-gradient(90deg, var(--c2) 0 9%, transparent 9% 25%);
  opacity:.72;
}
.cube.p-slant .face::after{
  background:repeating-linear-gradient(58deg, var(--c2) 0 6%, transparent 6% 21%);
  opacity:.72;
}
/* fine scattered specks, so a starfield never reads as the polka dots of level 4 */
.cube.p-spark .face::after{
  background:
    radial-gradient(circle at 30% 26%, #fff 15%, transparent 17%) 0 0/17% 17%,
    radial-gradient(circle at 74% 62%, var(--c2) 20%, transparent 22%) 0 0/23% 23%,
    radial-gradient(circle at 12% 80%, #fff 11%, transparent 13%) 0 0/31% 31%;
  opacity:.9;
}
/* The finishes of the first levels: light on the face rather than a motif on it.
   Level 1 is matte and names none. */
.cube.s-gloss .face::after{
  background:linear-gradient(118deg, transparent 28%, rgba(255,255,255,.62) 43%,
             rgba(255,255,255,.14) 52%, transparent 64%);
}
.cube.s-glow .face::after{
  background:radial-gradient(120% 82% at 50% 116%, rgba(255,214,150,.72) 0%,
             rgba(255,190,110,.34) 42%, rgba(255,190,110,0) 72%);
}
.cube.p-harlequin .face::after{
  background:
    repeating-linear-gradient(45deg, var(--c2) 0 8%, transparent 8% 20%),
    repeating-linear-gradient(-45deg, var(--c2) 0 8%, transparent 8% 20%);
  opacity:.6;
}
/* Shapes a gradient cannot draw come from a tiny inline SVG used as a mask, so the
   art carries the outline and the cube still supplies the color. */
.cube.p-wave .face::after,
.cube.p-leopard .face::after{ background:var(--c2); }
.cube.p-wave .face::after{
  -webkit-mask:var(--m-wave) 0 0/58% 30% repeat;
          mask:var(--m-wave) 0 0/58% 30% repeat;
  opacity:.7;
}
.cube.p-leopard .face::after{
  -webkit-mask:var(--m-leopard) 0 0/78% 78% repeat;
          mask:var(--m-leopard) 0 0/78% 78% repeat;
  opacity:.92;
}
:root{
  /* two sine bands per tile, so the crests line up wherever the tile repeats */
  --m-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 8 Q10 1 20 8 T40 8' fill='none' stroke='%23fff' stroke-width='4.6'/%3E%3C/svg%3E");
  /* rosettes: broken rings, which is what makes leopard read as leopard and not spots */
  --m-leopard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cellipse cx='15' cy='14' rx='8' ry='6.4' stroke-dasharray='6 3.4'/%3E%3Cellipse cx='42' cy='27' rx='7.4' ry='6' stroke-dasharray='5.6 3.2'/%3E%3Cellipse cx='22' cy='45' rx='8' ry='6.2' stroke-dasharray='6 3.4'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cellipse cx='51' cy='51' rx='3' ry='2.4'/%3E%3Cellipse cx='4.5' cy='32' rx='2.6' ry='2.2'/%3E%3Cellipse cx='33' cy='6' rx='2.4' ry='2'/%3E%3Cellipse cx='53' cy='9' rx='2.2' ry='2.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- reward box ---------- */
.box{
  width:186px;height:150px;margin:38px auto 10px;cursor:pointer;position:relative;
  transition:transform .12s ease;
}
.box:hover{transform:translateY(-4px) scale(1.02)}
/* the crate body, with a lit top face and a ribbon down the middle */
.box:before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:112px;border-radius:10px 10px 14px 14px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 22%,rgba(255,255,255,.10) 52%,rgba(0,0,0,.18)),
    linear-gradient(180deg,#c4823f 0%,#9a5f28 45%,#7a4a1d 100%);
  box-shadow:0 18px 34px rgba(0,0,0,.42), inset 0 -8px 14px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.10);
}
.box:after{
  content:"";position:absolute;left:50%;bottom:0;width:26px;height:112px;transform:translateX(-50%);
  border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,var(--gold),#e0a521);
  box-shadow:inset -3px 0 5px rgba(0,0,0,.18), inset 3px 0 5px rgba(255,255,255,.28);
}
/* the lid, hinged at its back edge */
.box .lid{
  position:absolute;left:-9px;right:-9px;bottom:104px;height:42px;border-radius:12px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#d9954d,#a9682c);
  box-shadow:0 6px 12px rgba(0,0,0,.30), inset 0 0 0 2px rgba(255,255,255,.14);
  transform-origin:left bottom;
  transition:transform .5s cubic-bezier(.3,1.5,.5,1);
}
.box .lid:after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:26px;transform:translateX(-50%);
  background:linear-gradient(180deg,#ffe27a,var(--gold));
  box-shadow:inset -3px 0 5px rgba(0,0,0,.16);
}
/* The bow where the ribbon meets the lid. It is one drawing rather than a stack
   of CSS shapes: two loops, two tails and a knot read better as paths, and the
   whole thing scales with the box. */
.box .bow{
  position:absolute;left:50%;bottom:108px;width:100px;height:48px;transform:translateX(-50%);
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 46'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff2bd'/><stop offset='.55' stop-color='%23f0bb32'/><stop offset='1' stop-color='%23cb8d14'/></linearGradient><linearGradient id='t' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23edb92f'/><stop offset='1' stop-color='%23b9800f'/></linearGradient><radialGradient id='k' cx='.36' cy='.28' r='.75'><stop offset='0' stop-color='%23fff8d8'/><stop offset='.6' stop-color='%23f2c33c'/><stop offset='1' stop-color='%23cf9016'/></radialGradient></defs><path d='M44 25 C41 32 37 38 33 44 L45 41 C46 35 47 30 47 27 Z' fill='url(%23t)'/><path d='M52 25 C55 32 59 38 63 44 L51 41 C50 35 49 30 49 27 Z' fill='url(%23t)'/><path d='M48 21 C40 7 15 4 10 16 C5 29 29 33 48 23 Z' fill='url(%23g)'/><path d='M48 21 C56 7 81 4 86 16 C91 29 67 33 48 23 Z' fill='url(%23g)'/><path d='M48 21 C42 17 40 26 48 24 Z' fill='%23c98b12' opacity='.45'/><path d='M48 21 C54 17 56 26 48 24 Z' fill='%23c98b12' opacity='.45'/><ellipse cx='48' cy='21' rx='9' ry='8' fill='url(%23k)'/></svg>") no-repeat center/contain;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.32));
  transition:transform .45s cubic-bezier(.3,1.5,.5,1), opacity .18s ease;
}

.box.shaking{animation:boxshake .72s ease-in-out}
@keyframes boxshake{
  0%,100%{transform:none}
  12%{transform:translateX(-7px) rotate(-3.5deg)}
  26%{transform:translateX(7px) rotate(3.5deg)}
  40%{transform:translateX(-6px) rotate(-3deg)}
  54%{transform:translateX(6px) rotate(3deg)}
  70%{transform:translateX(-4px) rotate(-1.6deg)}
  86%{transform:translateX(3px) rotate(1.2deg)}
}
.box.open .lid{transform:rotate(-116deg) translateY(-8px)}
/* the bow goes with the lid: up, over, and gone before the lid finishes */
.box.open .bow{transform:translateX(-50%) translateY(-34px) rotate(-26deg) scale(.9);opacity:0}
.box.open{animation:boxpop .5s ease}
@keyframes boxpop{0%{transform:scale(1)}35%{transform:scale(1.07) rotate(-2deg)}100%{transform:scale(1)}}

/* ---------- packs ---------- */
.packgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:6px}
.packcard{
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 10px;
  text-align:center;position:relative;
}
.hit-area{cursor:pointer;transition:transform .1s ease}
.hit-area:hover{transform:translateY(-3px)}
.packcard .nm{font-weight:800;font-size:14px;margin-top:10px}
.packcard .od{font-size:11px;color:var(--muted);margin-top:3px;margin-bottom:8px}
.packbig{
  width:150px;height:190px;margin:6px auto 12px;border-radius:18px;position:relative;overflow:hidden;
  box-shadow:0 18px 34px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
}
.packbig.sm{width:88px;height:112px;margin:0 auto;border-radius:14px;box-shadow:0 10px 20px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.2)}
.packbig em{
  position:relative;z-index:2;font-size:52px;font-style:normal;line-height:1;
  color:rgba(255,255,255,.92);text-shadow:0 3px 8px rgba(0,0,0,.45);
}
.packbig.sm em{font-size:32px}

.p-regular{background:linear-gradient(160deg,#6b7da8,#33415f)}
.p-regular:before{
  content:"";position:absolute;left:0;right:0;top:50%;height:20px;transform:translateY(-50%);
  background:rgba(255,255,255,.22);
}
.p-rare{background:linear-gradient(160deg,#6ab0ff,#1737b8)}
.p-rare:before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(125deg,rgba(255,255,255,.22) 0 10px,rgba(255,255,255,0) 10px 28px);
}
.p-rare:after{
  content:"";position:absolute;left:0;right:0;top:0;height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));
}
.p-superrare{
  background:linear-gradient(120deg,#22d3ee,#a855f7 35%,#ff5fa2 62%,#22d3ee);
  background-size:300% 300%;background-repeat:no-repeat;animation:shimmer 3s ease-in-out infinite alternate;
  box-shadow:0 18px 34px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.4), 0 0 26px rgba(168,85,247,.45);
}
.p-superrare:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 28% 24%,rgba(255,255,255,.6),transparent 42%),
             radial-gradient(circle at 74% 72%,rgba(255,255,255,.4),transparent 38%);
}
/* The wheel turns behind the wrapper, not with it: the gradient lives on a square
   larger than the pack so the corners never sweep into view, and .packbig already
   clips. Rotating the pack itself would tilt the whole card. */
.p-epic{
  background:#3a2400;
  box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.6),
             0 0 34px rgba(255,213,74,.65);
}
.p-epic:before{
  content:"";position:absolute;left:50%;top:50%;width:280px;height:280px;margin:-140px 0 0 -140px;
  background:conic-gradient(from 0deg,#ffd54a,#ff5fa2,#a855f7,#22d3ee,#4dff88,#ffe27a,#ffd54a);
  animation:swirl 6s linear infinite;
}
.p-epic.sm:before{width:170px;height:170px;margin:-85px 0 0 -85px}
/* a gold wash over the wheel, so the starburst on top stays readable */
.p-epic:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 50% 46%,rgba(255,251,232,.92),rgba(255,213,74,.30) 40%,transparent 70%);
}
.p-epic em{color:#7a4b00;text-shadow:0 0 12px rgba(255,255,255,.95);animation:burst 2.4s ease-in-out infinite}
@keyframes swirl{to{transform:rotate(360deg)}}
@keyframes burst{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.16) rotate(22deg)}}

.p-legendary{
  background:linear-gradient(135deg,#b8860b,#ffe27a 32%,#fffbe8 50%,#ffd54a 68%,#b8860b);
  background-size:250% 250%;background-repeat:no-repeat;animation:shimmer 3.6s ease-in-out infinite alternate;
  box-shadow:0 18px 34px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.55), 0 0 30px rgba(255,213,74,.5);
}
.p-legendary:before{
  content:"";position:absolute;inset:9px;border-radius:12px;border:2px dashed rgba(96,64,0,.5);
}
.p-legendary.sm:before{inset:6px;border-radius:9px;border-width:1.5px}
.p-legendary em{color:#5a3c00;text-shadow:0 2px 4px rgba(255,255,255,.5)}
.rip-stage{padding:10px 0;text-align:center}
/* Three bursts of shaking, each one faster and harder than the last, and the pack
   stays on screen the whole way — 2 shakes in 1s, 3 in 0.8s, 4 in 0.7s, then it
   opens. The stops are fractions of the 2.7s the animation runs, so the sequence
   speeds up or slows down with that one number. packs.js holds the same number in
   RIP_MS, fires the confetti at the 92.6% stop where the pack goes, and waits the
   rest out before the cube appears. Every angle here carries a unit: Safari drops
   a keyframe that says rotate(0) with no unit, which left the pack sitting still
   on an iPhone. */
.packbig.rip{animation:rip 2.7s ease-in-out forwards}
@keyframes rip{
  /* two shakes, 1s */
  0%{transform:rotate(0deg) scale(1);opacity:1}
  4.6%{transform:rotate(-5deg) scale(1.03);opacity:1}
  13.9%{transform:rotate(5deg) scale(1.03);opacity:1}
  23.1%{transform:rotate(-5deg) scale(1.03);opacity:1}
  32.4%{transform:rotate(5deg) scale(1.03);opacity:1}
  37%{transform:rotate(0deg) scale(1);opacity:1}
  /* three shakes, 0.8s */
  39.5%{transform:rotate(-7deg) scale(1.05);opacity:1}
  44.4%{transform:rotate(7deg) scale(1.05);opacity:1}
  49.4%{transform:rotate(-7deg) scale(1.05);opacity:1}
  54.3%{transform:rotate(7deg) scale(1.05);opacity:1}
  59.3%{transform:rotate(-7deg) scale(1.05);opacity:1}
  64.2%{transform:rotate(7deg) scale(1.05);opacity:1}
  66.7%{transform:rotate(0deg) scale(1);opacity:1}
  /* four shakes, 0.7s */
  68.3%{transform:rotate(-9deg) scale(1.08);opacity:1}
  71.5%{transform:rotate(9deg) scale(1.08);opacity:1}
  74.8%{transform:rotate(-9deg) scale(1.08);opacity:1}
  78%{transform:rotate(9deg) scale(1.08);opacity:1}
  81.2%{transform:rotate(-9deg) scale(1.08);opacity:1}
  84.5%{transform:rotate(9deg) scale(1.08);opacity:1}
  87.7%{transform:rotate(-9deg) scale(1.08);opacity:1}
  90.9%{transform:rotate(9deg) scale(1.08);opacity:1}
  /* and it opens */
  92.6%{transform:rotate(0deg) scale(1.1);opacity:1}
  100%{transform:rotate(0deg) scale(0);opacity:0}
}
}
.fromline{color:var(--muted);font-size:13px;margin-top:10px}

.reveal{text-align:center}
.reveal .scene{height:210px;margin-bottom:6px}
.pop{animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.rname{font-size:24px;font-weight:800;margin-top:4px}
.rtag{
  display:inline-block;margin-top:8px;padding:5px 14px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
}
.t-regular{background:#33405e;color:#c8d5f2}
.t-rare{background:#1d4ed8;color:#dbe6ff}
.t-superrare{background:linear-gradient(90deg,#a855f7,#22d3ee);color:#fff}
.t-legendary{background:linear-gradient(90deg,#f59e0b,#ffe27a);color:#3a2a00}
.t-epic{
  background:linear-gradient(90deg,#ffd54a,#ff5fa2,#a855f7,#22d3ee,#ffd54a);
  background-size:300% 300%;background-repeat:no-repeat;animation:shimmer 2.6s ease-in-out infinite alternate;color:#2a1400;
}
.new{display:inline-block;margin-left:8px;background:var(--good);color:#06210f;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}
.copies{display:inline-block;margin-left:8px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}
.odds{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:-6px 0 14px}
.odd{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--muted)}
/* one color per tier, so gold means legendary and nothing else */
.odd.o-rare{color:var(--tier-rare,#6ab0ff)}
.odd.o-superrare{color:var(--tier-superrare,#c084fc)}
.odd.o-legendary{color:var(--gold-ink)}
.odd.o-epic{color:var(--gold-ink);border-color:currentColor}
.tierhead.epic{color:var(--gold-ink)}
.odd.boosted{border-color:currentColor}
.odd.o-regular.boosted{border-color:var(--muted)}

/* ---------- collection ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.tabs.modes{margin:10px 0 8px}
.tabs.modes .tab{flex:1 1 0;padding:9px 10px;font-size:13px}
.tab{
  background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:10px;
  padding:7px 11px;font-family:inherit;font-weight:700;font-size:13px;line-height:1;cursor:pointer;
}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tab.locked{opacity:.35;cursor:not-allowed}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;margin-top:14px}
.slot{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 6px 8px;text-align:center;position:relative}
.slot .scene{height:74px}
.slot .nm{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.25;min-height:28px}
.slot.locked{opacity:.35}
.slot.locked .cube .face{background:#4a5772 !important;animation:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.slot.pick{cursor:pointer;transition:transform .1s ease,border-color .15s ease}
.slot.pick:hover{border-color:var(--accent);transform:translateY(-2px)}
.count{position:absolute;top:6px;right:6px;background:var(--accent);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:2px 7px}
.tierhead{margin:20px 0 2px;font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}

/* ---------- avatar ---------- */
.avwrap{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.avstage{
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.avstage svg{display:block}
.avside{flex:1 1 260px;min-width:240px}
.basepick{display:flex;gap:10px;margin-bottom:12px}
.basepick button{
  flex:1;background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:12px;
  padding:11px 8px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;
}
.basepick button.on{background:var(--accent);border-color:var(--accent);color:#fff}
#go-look{margin-bottom:12px}

/* ---------- body & colors ---------- */
.lookrow{margin-bottom:16px}
.looklabel{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.6px}
.looklabel span{text-transform:none;letter-spacing:0;font-weight:600}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
.sw{
  aspect-ratio:1;border:2px solid var(--line);border-radius:12px;cursor:pointer;padding:0;
  transition:transform .1s ease,border-color .15s ease;
}
.sw:hover{transform:translateY(-2px);border-color:var(--accent)}
.sw.on{border-color:var(--text);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--text)}
.sw.fun{border-radius:50%}
.pickfield{
  width:100%;background:var(--input);border:2px solid var(--line);border-radius:12px;color:var(--text);
  font-family:inherit;font-size:16px;font-weight:700;padding:11px 14px;outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.pickfield:focus{border-color:var(--accent)}

.hstyles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.hstyle{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 10px;
  text-align:left;cursor:pointer;font-family:inherit;color:var(--text);
}
.hstyle:hover:not(:disabled){border-color:var(--accent)}
.hstyle .sn{display:block;font-size:13px;font-weight:800}
.hstyle .sv{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.hstyle.on{border-color:var(--good)}
.hstyle.locked{opacity:.5;cursor:not-allowed}

.slotlist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slotbtn{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 10px;
  text-align:left;cursor:pointer;font-family:inherit;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.slotbtn:hover{border-color:var(--accent)}
.slotbtn .chip{width:14px;height:14px;border-radius:4px;background:var(--chip);flex:0 0 auto;border:1px solid rgba(255,255,255,.25)}
.slotbtn .txt{min-width:0}
.slotbtn .sn{display:block;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slotbtn .sv{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* On a phone the slot list stands beside the figure in one column rather than
   below it, and the figure stays put while that column scrolls. The figure gives
   up width to do it — a 390px screen cannot hold the full-size drawing and a
   readable list at once — so it takes a share of the row instead of a fixed size. */
@media (max-width:559px){
  .avwrap{flex-wrap:nowrap;gap:10px}
  .avwrap .avstage{position:sticky;top:10px;padding:8px;flex:0 1 auto;max-width:60%;min-width:0}
  .avwrap .avstage svg{width:100%;height:auto}
  .avside{flex:1 1 0;min-width:0}
  .slotlist{grid-template-columns:1fr}
}

/* A tablet or a desktop has width the phone does not, so the figure takes some
   of it. Every stage grows together — the drip page, the body page, the craft
   page, the public profile — so the drawing is one size across the game. A short
   window caps it by height instead, so the whole figure still fits on screen. */
@media (min-width:560px){
  .avstage svg{width:min(240px, 34vh);height:auto}
}
@media (min-width:900px){
  .avstage svg{width:min(290px, 38vh);height:auto}
}

.stylelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:6px}
.stylebtn{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 10px;
  cursor:pointer;font-family:inherit;color:var(--text);text-align:center;
}
.stylebtn:hover{border-color:var(--accent)}
/* no cube with enough copies yet: the style stays in the list, dimmed */
.stylebtn.off{opacity:.6}
.stylebtn.off .cost{color:var(--muted)}
.stylebtn .sn{font-weight:800;font-size:14px}
.stylebtn .cost{font-size:11px;color:var(--gold-ink);margin-top:3px;font-weight:700}
.stylebtn.owned{border-color:var(--good)}
/* a made piece: wear it with the big button, hand it back with the small one */
.madepc{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.madepc.owned{border-color:var(--good)}
.wearbtn{
  display:block;width:100%;background:none;border:0;padding:12px 10px;
  cursor:pointer;font-family:inherit;color:var(--text);text-align:center;
}
.wearbtn:hover{background:var(--panel2)}
.wearbtn .sn{font-weight:800;font-size:14px}
.wearbtn .cost{font-size:11px;color:var(--gold-ink);margin-top:3px;font-weight:700}
.undobtn{
  display:block;width:100%;background:var(--panel2);border:0;border-top:1px solid var(--line);
  padding:8px 6px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:800;
  color:var(--muted);letter-spacing:.3px;
}
.undobtn:hover{color:var(--text);background:var(--line)}
.slot.dimmed{opacity:.45}
.records{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--muted);margin-bottom:6px}
.records b{color:var(--text)}
.records span{display:inline-block;margin-right:14px}

/* ---------- admin ---------- */
/* The account table is the one wide thing in the game, so it scrolls inside its
   own box rather than pushing the page sideways. */
.admscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 2px}
.admtable{border-collapse:collapse;width:100%;min-width:560px;font-size:13px}
.admtable th{
  text-align:left;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.admtable td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.admtable tbody tr[data-name]{cursor:pointer}
.admtable tbody tr[data-name]:hover{background:var(--panel2)}
.admtable tbody tr.now{background:var(--glow)}
.admtable td.nm{font-weight:800}
.admtable td.lbrank{color:var(--muted);font-weight:800;width:1%}
/* six drip spots, rarest first, three across and two down. The grid keeps its
   shape when a player wears fewer than six pieces — the empty spots stay. */
.dripgrid{display:inline-grid;grid-template-columns:repeat(3,12px);gap:3px;vertical-align:middle}
.dripchip{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.2);background-repeat:no-repeat}
.driprow{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.driprow .dripgrid{grid-template-columns:repeat(3,16px)}
.driprow .dripchip{width:16px;height:16px;border-radius:5px}
.dripcap{font-size:12px;color:var(--muted);font-weight:700}
.admtable td.nm .sub2{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.admtable td.when{color:var(--muted)}
/* the figure stands beside the summary, and drops above it when the row is
   too narrow to hold both */
.admtop{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:4px}
.admtop .avstage{flex:0 0 auto;padding:10px}
.admtopstats{flex:1 1 280px;min-width:0}
.admtopstats .records:last-child{margin-bottom:0}
.admtiers{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.admtier{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:12px;color:var(--muted);
}
.admtier b{color:var(--text)}
.admtier.gone{opacity:.5;text-decoration:line-through}
.admtier.t-rare{border-color:#1d4ed8}
.admtier.t-superrare{border-color:#a855f7}
.admtier.t-legendary{border-color:var(--gold)}
.admtier.t-epic{border-color:var(--gold);box-shadow:0 0 10px rgba(255,213,74,.4)}

/* Admin art preview: a wall of figures, each wearing one piece. The tile is
   taller than a cube tile, so it does not borrow .slot. */
.artgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:10px}
.artcell{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 6px 6px;text-align:center}
.artcell svg{display:block;margin:0 auto;max-width:100%;height:auto}
.artcell .nm{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.3}
.artcell .nm b{display:block;color:var(--text);font-size:12px}

/* ---------- account ---------- */
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.6px}
.field input{
  width:100%;background:var(--input);border:2px solid var(--line);border-radius:12px;color:var(--text);
  font-family:inherit;font-size:16px;padding:12px 14px;outline:none;
}
.field input:focus{border-color:var(--accent)}
.field .row{display:flex;gap:8px}
.field .row input{flex:1;min-width:0}
.field .row .btn{width:auto;flex:0 0 auto}
.hint{font-size:12px;color:var(--muted);margin:-6px 0 12px}
/* the note under a style list needs the room the negative top margin takes away */
.stylelist + .hint{margin-top:14px}
.msg{min-height:22px;font-size:13px;font-weight:700;margin-top:10px}
.msg.ok{color:var(--good)}
.msg.bad{color:var(--bad)}
.msg.busy{color:var(--muted)}
.who{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.who b{font-size:17px}
.who .sm{font-size:12px;color:var(--muted);margin-top:3px}
.syncdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:6px;vertical-align:middle}
.syncdot.on{background:var(--good)}
.syncdot.busy{background:var(--gold)}
.syncdot.off{background:var(--bad)}

/* ---------- QR ---------- */
.qr{margin-top:18px;text-align:center}
.qr svg{border-radius:10px;display:block;margin:0 auto;max-width:100%;height:auto}
.qr .cap{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.4}
.qr .cap b{color:var(--text)}

.confetti{position:fixed;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:50}
.hidden{display:none}
.center{text-align:center}
.mt{margin-top:14px}

/* the few places the dark palette bakes its own colors in */
:root[data-theme="light"] .card{box-shadow:0 14px 32px rgba(23,32,58,.12)}
:root[data-theme="light"] .choice.right{color:#12813a}
:root[data-theme="light"] .choice.wrong{color:#c01a3c}
:root[data-theme="light"] .slotbtn .chip{border-color:rgba(0,0,0,.15)}

/* ================= design skins — ?v=1 Sunny Blocks, ?v=2 Arcade Night ================= */

/* ---------- v=1 · Sunny Blocks: cream paper, chunky press-down blocks ---------- */
:root[data-design="sunny"]{
  --bg:#f4e9d6;
  --panel:#fdf6ec;
  --panel2:#ffffff;
  --panel3:#fdf6ec;
  --line:#e8dcc8;
  --text:#3d3450;
  --muted:#8a7f9b;
  --accent:#ff6b35;
  --good:#06bf7f;
  --bad:#ff5d5d;
  --gold:#f0a500;
  --gold-ink:#8a5a00;       /* #f0a500 is 1.9:1 on this skin's white cards */
  --card:#ffffff;
  --input:#ffffff;
  --glow:#fffaf2;
  --chip:#f1e7d4;
  --press:#e8dcc8;      /* the solid block under a raised surface */
  --press-hot:#d14a17;
  --track:#f1e7d4;      /* progress and timer troughs */
  --faint:#b0a591;      /* the quietest label color */
}
:root[data-design="sunny"] body{font-family:"Baloo 2",ui-rounded,"SF Pro Rounded",system-ui,sans-serif}
:root[data-design="sunny"] .logo,
:root[data-design="sunny"] h2,
:root[data-design="sunny"] .btn,
:root[data-design="sunny"] .choice,
:root[data-design="sunny"] .stat b,
:root[data-design="sunny"] .q{font-weight:800}
:root[data-design="sunny"] .sub,
:root[data-design="sunny"] .hint,
:root[data-design="sunny"] .scoreline{font-weight:500}

:root[data-design="sunny"] .card{
  background:var(--panel);border:0;border-radius:24px;
  box-shadow:0 12px 28px rgba(61,52,80,.12);
}
:root[data-design="sunny"] .iconbtn{
  background:#fff;border:2px solid var(--line);border-bottom-width:4px;border-radius:12px;color:var(--text);
}
:root[data-design="sunny"] .btn{
  background:var(--accent);color:#fff;border-radius:16px;box-shadow:0 4px 0 var(--press-hot);
}
:root[data-design="sunny"] .btn.ghost{
  background:#fff;border:2px solid var(--line);color:var(--text);box-shadow:0 4px 0 var(--press);
}
:root[data-design="sunny"] .btn.gold{
  background:#ffb703;color:#3a2405;box-shadow:0 4px 0 #d08c00;
}
:root[data-design="sunny"] .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--press-hot)}
:root[data-design="sunny"] .btn.ghost:active,
:root[data-design="sunny"] .btn.gold:active{box-shadow:0 1px 0 var(--press)}
:root[data-design="sunny"] .btn:disabled{background:var(--track);color:var(--muted);box-shadow:0 4px 0 #ddd0b6;opacity:1}

:root[data-design="sunny"] .stat,
:root[data-design="sunny"] .prog,
:root[data-design="sunny"] .records,
:root[data-design="sunny"] .who,
:root[data-design="sunny"] .odd,
:root[data-design="sunny"] .slot,
:root[data-design="sunny"] .packcard,
:root[data-design="sunny"] .field input{background:#fff;border:2px solid var(--line);border-radius:14px}
:root[data-design="sunny"] .field input:focus{border-color:var(--accent)}
:root[data-design="sunny"] .stat small,
:root[data-design="sunny"] .slot .nm,
:root[data-design="sunny"] .count,
:root[data-design="sunny"] .fromline{font-weight:700}
:root[data-design="sunny"] .stat small{color:var(--faint);letter-spacing:.06em}

:root[data-design="sunny"] .lvl,
:root[data-design="sunny"] .op,
:root[data-design="sunny"] .slotbtn,
:root[data-design="sunny"] .stylebtn,
:root[data-design="sunny"] .madepc,
:root[data-design="sunny"] .basepick button{
  background:#fff;border:2px solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--press);
}
:root[data-design="sunny"] .basepick button.on{
  background:#2ea8ff;border-color:#2ea8ff;color:#fff;box-shadow:0 3px 0 #1c7fd1;
}
:root[data-design="sunny"] .lvl.locked{background:#f7efdf;box-shadow:none}
:root[data-design="sunny"] .lvl .set{font-weight:700}
:root[data-design="sunny"] .stylebtn.owned,
:root[data-design="sunny"] .madepc.owned{border-color:var(--good);box-shadow:0 4px 0 #04a06b}

:root[data-design="sunny"] .choice{
  background:#fff;border:2px solid var(--line);border-radius:18px;box-shadow:0 5px 0 var(--press);
}
:root[data-design="sunny"] .choice.right{background:#e6faf0;border-color:var(--good);color:#04794f;box-shadow:0 5px 0 #9fe6c8}
:root[data-design="sunny"] .choice.wrong{background:#ffeceb;border-color:var(--bad);color:#c62f2f;box-shadow:0 5px 0 #f5bcbc}

:root[data-design="sunny"] .tab{background:#fff;border:2px solid var(--line);border-radius:10px;color:var(--muted);font-weight:800}
:root[data-design="sunny"] .tab.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 0 var(--press-hot)}

:root[data-design="sunny"] .bar,
:root[data-design="sunny"] .timerbar{background:var(--track);border:0;border-radius:6px}
:root[data-design="sunny"] .bar i{background:linear-gradient(90deg,#ffb703,var(--accent))}
:root[data-design="sunny"] .dot{background:var(--track)}
:root[data-design="sunny"] .dot.now{background:var(--accent);box-shadow:0 0 0 4px rgba(255,107,53,.2)}
:root[data-design="sunny"] .dot.ok{background:var(--good)}
:root[data-design="sunny"] .pts{color:var(--gold-ink)}
:root[data-design="sunny"] .tierhead{color:var(--muted);letter-spacing:.06em}
:root[data-design="sunny"] .t-regular{background:var(--track);color:var(--muted)}
:root[data-design="sunny"] .t-rare{background:#2ea8ff;color:#fff}
:root[data-design="sunny"] .copies{background:#fff;border:2px solid var(--line);color:var(--muted)}
:root[data-design="sunny"] .slotbtn .chip{border-color:rgba(61,52,80,.15)}
:root[data-design="sunny"] .avstage{background:#fff;border:2px solid var(--line);border-radius:18px}

/* Sunny Blocks after dark. The skin keeps its chunky press-down blocks and its
   orange; only the paper changes — warm plum instead of cream, so it still reads
   as the same toy rather than as the house style with a filter on. Everything
   below undoes a color the light skin nails down, since those cannot follow a
   variable. */
:root[data-design="sunny"][data-theme="dark"]{
  --bg:#241c2e;
  --panel:#2f2640;
  --panel2:#3a3050;
  --panel3:#2a2239;
  --line:#453a5e;
  --text:#f6efe4;           /* the cream the light skin uses as paper, now the ink */
  --muted:#b6a8ca;
  --accent:#ff7a45;         /* a shade brighter, so the orange holds on dark */
  --good:#2fd79a;
  --bad:#ff6b6b;
  --gold:#ffc233;
  --gold-ink:#ffc233;       /* a dark skin: gold reads fine as text */
  --card:#372d4a;
  --input:#2a2239;
  --glow:#3a2f4e;
  --chip:#453a5e;
  --press:#1c1626;          /* the solid block under a raised surface */
  --press-hot:#bf4415;
  --track:#241c2e;
  --faint:#9386ab;
}
:root[data-design="sunny"][data-theme="dark"] .card{box-shadow:0 14px 32px rgba(0,0,0,.45)}
:root[data-design="sunny"][data-theme="dark"] .iconbtn,
:root[data-design="sunny"][data-theme="dark"] .btn.ghost,
:root[data-design="sunny"][data-theme="dark"] .stat,
:root[data-design="sunny"][data-theme="dark"] .prog,
:root[data-design="sunny"][data-theme="dark"] .records,
:root[data-design="sunny"][data-theme="dark"] .who,
:root[data-design="sunny"][data-theme="dark"] .odd,
:root[data-design="sunny"][data-theme="dark"] .slot,
:root[data-design="sunny"][data-theme="dark"] .packcard,
:root[data-design="sunny"][data-theme="dark"] .field input,
:root[data-design="sunny"][data-theme="dark"] .lvl,
:root[data-design="sunny"][data-theme="dark"] .op,
:root[data-design="sunny"][data-theme="dark"] .subj,
:root[data-design="sunny"][data-theme="dark"] .slotbtn,
:root[data-design="sunny"][data-theme="dark"] .stylebtn,
:root[data-design="sunny"][data-theme="dark"] .madepc,
:root[data-design="sunny"][data-theme="dark"] .basepick button,
:root[data-design="sunny"][data-theme="dark"] .choice,
:root[data-design="sunny"][data-theme="dark"] .tab,
:root[data-design="sunny"][data-theme="dark"] .copies,
:root[data-design="sunny"][data-theme="dark"] .avstage{background:var(--card)}
:root[data-design="sunny"][data-theme="dark"] .btn:disabled{box-shadow:0 4px 0 var(--press)}
:root[data-design="sunny"][data-theme="dark"] .btn.gold{box-shadow:0 4px 0 #a86f00}
:root[data-design="sunny"][data-theme="dark"] .lvl.locked{background:var(--panel3)}
:root[data-design="sunny"][data-theme="dark"] .choice.right{
  background:rgba(47,215,154,.16);color:#8af0c6;box-shadow:0 5px 0 #1b7d5b;
}
:root[data-design="sunny"][data-theme="dark"] .choice.wrong{
  background:rgba(255,107,107,.16);color:#ffa6a6;box-shadow:0 5px 0 #973636;
}
:root[data-design="sunny"][data-theme="dark"] .t-regular{background:var(--panel2);color:var(--text)}
:root[data-design="sunny"][data-theme="dark"] .slotbtn .chip{border-color:rgba(255,255,255,.25)}

/* ---------- v=2 · Arcade Night: neon on near-black, hard edges ---------- */
:root[data-design="arcade"]{
  --bg:#08060f;
  --panel:#0b0b14;
  --panel2:#151027;
  --panel3:#100a1c;
  --line:#2b1d4a;
  --text:#e6f6ff;
  --muted:#8f7fc0;
  --accent:#00f0ff;
  --good:#4dff88;
  --bad:#ff2f6d;
  --gold:#ffd60a;
  --gold-ink:#ffd60a;       /* a dark skin: gold reads fine as text */
  --card:#151027;
  --input:#0b0817;
  --glow:#170f36;
  --chip:#1c1633;
  --line2:#3b2a63;      /* the brighter of the two rule colors */
  --faint:#6b5c99;
}
:root[data-design="arcade"] body{font-family:"Space Grotesk",ui-monospace,system-ui,sans-serif}
:root[data-design="arcade"] .logo span{color:var(--good);text-shadow:0 0 12px rgba(77,255,136,.5)}
:root[data-design="arcade"] h2{color:#fff;font-weight:700}
:root[data-design="arcade"] .q{color:#fff;text-shadow:0 0 20px rgba(0,240,255,.35);font-weight:700}

:root[data-design="arcade"] .card{
  background:linear-gradient(180deg,var(--panel),var(--panel3));
  border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 44px rgba(0,0,0,.6);
}
:root[data-design="arcade"] .iconbtn{background:transparent;border:1px solid var(--line2);border-radius:4px;color:var(--muted)}
:root[data-design="arcade"] .iconbtn:hover{background:rgba(0,240,255,.08);border-color:var(--accent)}

:root[data-design="arcade"] .btn{
  background:linear-gradient(180deg,var(--good),#12c96b);color:#04170c;
  border-radius:8px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 0 20px rgba(77,255,136,.4);
}
:root[data-design="arcade"] .btn.ghost{
  background:transparent;border:1px solid var(--accent);color:var(--accent);
  box-shadow:0 0 12px rgba(0,240,255,.18);
}
:root[data-design="arcade"] .btn.gold{
  background:transparent;border:1px solid var(--gold);color:var(--gold);box-shadow:0 0 14px rgba(255,214,10,.22);
}
:root[data-design="arcade"] .btn:disabled{
  background:transparent;border:1px dashed var(--line2);color:var(--faint);box-shadow:none;opacity:1;
}

:root[data-design="arcade"] .stat,
:root[data-design="arcade"] .prog,
:root[data-design="arcade"] .records,
:root[data-design="arcade"] .who,
:root[data-design="arcade"] .slot,
:root[data-design="arcade"] .packcard,
:root[data-design="arcade"] .lvl,
:root[data-design="arcade"] .op,
:root[data-design="arcade"] .slotbtn,
:root[data-design="arcade"] .stylebtn,
:root[data-design="arcade"] .madepc{background:var(--panel2);border:1px solid var(--line);border-radius:8px}
:root[data-design="arcade"] .stat small,
:root[data-design="arcade"] .tierhead,
:root[data-design="arcade"] .scoreline,
:root[data-design="arcade"] .field label{letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
:root[data-design="arcade"] .lvl:hover,
:root[data-design="arcade"] .op:hover,
:root[data-design="arcade"] .slot.pick:hover{border-color:var(--accent);box-shadow:0 0 16px rgba(0,240,255,.25)}
:root[data-design="arcade"] .lvl.locked{background:#0f0c1c;border-color:#221838}
:root[data-design="arcade"] .stylebtn.owned,
:root[data-design="arcade"] .madepc.owned{border-color:var(--good);box-shadow:0 0 14px rgba(77,255,136,.25)}
:root[data-design="arcade"] .basepick button{background:transparent;border:1px solid var(--line2);border-radius:6px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
:root[data-design="arcade"] .basepick button.on{border-color:var(--accent);color:var(--accent);background:rgba(0,240,255,.08);box-shadow:0 0 10px rgba(0,240,255,.25)}

:root[data-design="arcade"] .choice{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;font-weight:700}
:root[data-design="arcade"] .choice:hover:not(:disabled){border-color:var(--accent);box-shadow:0 0 16px rgba(0,240,255,.3);color:var(--accent)}
:root[data-design="arcade"] .choice.right{background:rgba(77,255,136,.1);border-color:var(--good);color:var(--good);box-shadow:0 0 18px rgba(77,255,136,.3)}
:root[data-design="arcade"] .choice.wrong{background:rgba(255,47,109,.1);border-color:var(--bad);color:var(--bad)}

:root[data-design="arcade"] .tab{background:transparent;border:1px solid var(--line2);border-radius:4px}
:root[data-design="arcade"] .tab.on{background:rgba(0,240,255,.08);border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px rgba(0,240,255,.3)}

:root[data-design="arcade"] .bar,
:root[data-design="arcade"] .timerbar{background:var(--input);border:1px solid var(--line);border-radius:2px}
:root[data-design="arcade"] .bar i{background:linear-gradient(90deg,var(--accent),var(--good))}
:root[data-design="arcade"] .timerbar i{border-radius:0;background:linear-gradient(90deg,var(--bad),var(--gold) 45%,var(--good))}
:root[data-design="sunny"] .timerbar i{background:linear-gradient(90deg,#ff5d5d,#ffb703 45%,#06bf7f)}
:root[data-design="arcade"] .dot{width:10px;height:10px;border-radius:0;background:var(--panel2);border:1px solid var(--line)}
:root[data-design="arcade"] .dot.now{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px rgba(0,240,255,.7)}
:root[data-design="arcade"] .dot.ok{background:var(--good);border-color:var(--good)}
:root[data-design="arcade"] .dot.miss{background:var(--bad);border-color:var(--bad)}
:root[data-design="arcade"] .pts{color:var(--gold-ink);text-shadow:0 0 10px rgba(255,214,10,.5)}
:root[data-design="arcade"][data-theme="light"]{
  --bg:#e9e5f6;
  --panel:#ffffff;
  --panel2:#f3f0fc;
  --panel3:#f8f6ff;
  --line:#c6bce4;
  --text:#1b1233;
  --muted:#5d4f8a;
  --accent:#0091a8;      /* the cyan, darkened until it reads as text on white */
  --good:#0f8f47;
  --bad:#c8004b;
  --gold:#ffd60a;
  --gold-ink:#8a5a00;
  --card:#ffffff;
  --input:#ffffff;
  --glow:#ffffff;
  --chip:#ddd5f1;
  --line2:#b3a6d9;
  --faint:#7a6bb0;
}
/* the glows are tuned for a black ground; on a pale one they only muddy it */
:root[data-design="arcade"][data-theme="light"] .card,
:root[data-design="arcade"][data-theme="light"] .choice,
:root[data-design="arcade"][data-theme="light"] .choice:hover:not(:disabled),
:root[data-design="arcade"][data-theme="light"] .btn,
:root[data-design="arcade"][data-theme="light"] .odd,
:root[data-design="arcade"][data-theme="light"] .tab.on,
:root[data-design="arcade"][data-theme="light"] .pts{box-shadow:none;text-shadow:none}
:root[data-design="arcade"][data-theme="light"] body{background:var(--bg)}
/* the pieces arcade paints white outright, which a pale ground swallows */
:root[data-design="arcade"][data-theme="light"] h2,
:root[data-design="arcade"][data-theme="light"] .q{color:var(--text)}
:root[data-design="arcade"][data-theme="light"] .logo span{color:var(--accent)}

:root[data-design="arcade"] .odd{background:var(--panel2);border-color:var(--line2)}
:root[data-design="arcade"] .copies{background:var(--panel2);border-color:var(--line2)}
:root[data-design="arcade"] .t-regular{background:var(--panel2);color:var(--muted);border:1px solid var(--line2)}
:root[data-design="arcade"] .t-rare{background:rgba(0,240,255,.12);color:var(--accent);border:1px solid var(--accent)}
:root[data-design="arcade"] .new{background:var(--good);color:#04170c}
:root[data-design="arcade"] .avstage{background:var(--panel2);border:1px solid var(--line);border-radius:12px}
:root[data-design="arcade"] .field input{background:var(--input);border:1px solid var(--line2);border-radius:6px}
:root[data-design="arcade"] .field input:focus{border-color:var(--accent);box-shadow:0 0 12px rgba(0,240,255,.2)}

/* per-tier odds colors, tuned for each skin */
:root[data-design="sunny"] .odd.o-rare{color:#2ea8ff}
:root[data-design="sunny"] .odd.o-superrare{color:#9b5de5}
:root[data-design="arcade"] .odd.o-rare{color:var(--accent)}
:root[data-design="arcade"] .odd.o-superrare{color:#ff2fb9}

/* a skin brings its own light or dark, so the theme toggle steps aside */
:root[data-design] #themeBtn{display:none}

/* touch devices keep :hover on the last tap, so the last pick stays lit.
   this block stays last in the sheet so it beats the rules above it. */
@media (hover:none){
  .choice:hover:not(:disabled){border-color:var(--line);transform:none}
  .btn:hover{filter:none}
  .op:hover, .lvl:hover, .hit-area:hover, .slot.pick:hover, .packcard:hover,
  .slotbtn:hover, .stylebtn:hover, .box:hover, .tab:hover{transform:none;border-color:var(--line)}
  .stylebtn.owned:hover{border-color:var(--good)}
  .tab.on:hover{border-color:var(--accent)}
  .choice.right:hover{border-color:var(--good)}
  .choice.wrong:hover{border-color:var(--bad)}
  .iconbtn:hover{background:var(--panel)}
}