/* QuizRips Home: snap on the left, play modes on the right, a reward strip, then your quizzes.
   One tile style everywhere: navy surface, colored icon chip, colored bottom edge, lift on hover. */
:root{--tile:linear-gradient(180deg,#22316A,#1A2654);--tile-b:#33478A;--tile-edge:#0C1434}
:root[data-theme="light"]{--tile:linear-gradient(180deg,#FFFFFF,#F4F6FD);--tile-b:#D3D9EA;--tile-edge:#C9D1E6}
.home2{display:flex;flex-direction:column;gap:16px;margin:16px 0 28px}
.h-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:stretch}
@media (max-width:899px){.h-top{grid-template-columns:1fr}}

/* left: compact snap card */
.snaphero.compact{margin:0;padding:20px 22px 16px;gap:4px;justify-content:center}
.snaphero.compact .sh-illo{width:132px}
.snaphero.compact h1{font-size:clamp(28px,4vw,36px)}
.snaphero.compact .sh-sub{font-size:16px;margin-bottom:8px}
.snaphero.compact .sh-actions{flex-direction:row;flex-wrap:wrap;width:100%;justify-content:center}
.snaphero.compact .sh-actions>.btn{flex:1 1 180px;min-height:56px}
.snaphero.compact .sh-actions>.sh-tip{flex-basis:100%;text-align:center;font-size:14px}
.snaphero.compact .sh-ready .sh-actions,.snaphero.compact .sh-paste .sh-actions{flex-direction:column;align-items:center}
@media (max-width:620px){.snaphero.compact{padding:16px 16px 12px}.snaphero.compact .sh-illo{width:96px}.snaphero.compact .sh-sub{font-size:15px}}

/* right: play modes */
.h-play{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:16px;display:flex;flex-direction:column;gap:12px}
.hsech{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hsech h2{font-family:var(--f-display);font-size:24px}
.hsech span{color:var(--muted);font-size:14px}
.h-play .modes2{grid-template-columns:1fr 1fr!important;gap:10px;margin:0;flex:1}
.h-play .modetile{background:var(--tile);color:var(--ink);border:1px solid var(--tile-b);box-shadow:0 4px 0 var(--tile-edge);border-radius:18px;padding:14px;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;min-height:118px;transition:transform .12s,border-color .12s}
.h-play .modetile:hover{transform:translateY(-2px);border-color:#4FA3FF}
.h-play .modetile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tile-edge)}
.h-play .modetile b{font-size:18px;color:var(--ink)}
.h-play .modetile small{font-size:14px;color:var(--muted)}
.h-play .mt-ic{width:48px;height:48px;border-radius:14px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.h-play .modetile.speed{grid-column:auto!important;order:0!important}
@media (max-width:420px){.h-play .modetile{min-height:104px;padding:12px}.h-play .modetile b{font-size:16px}.h-play .modetile small{font-size:13px}}

/* reward strip */
.h-rewards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.h-rewards .hpack{grid-column:1/-1}
@media (max-width:760px){.h-rewards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hstat,.hpack{display:flex;align-items:center;gap:12px;text-align:left;background:var(--tile);border:1px solid var(--tile-b);box-shadow:0 4px 0 var(--tile-edge);border-radius:18px;padding:12px 14px;color:var(--ink);min-width:0}
button.hstat{transition:transform .12s}
button.hstat:hover{transform:translateY(-2px)}
.hstat{flex-direction:column;align-items:flex-start;gap:8px}
.hs-ic{display:flex;align-items:center;justify-content:center;min-height:36px;font-size:28px}
.hs-tx{display:flex;flex-direction:column;gap:3px;min-width:0;width:100%}
.hs-tx small{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hs-tx b{font-family:var(--f-display);font-size:17px;line-height:1.15}
.hbar{display:block;height:10px;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden;margin-top:3px}
.hbar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#4FA3FF,#2D5BFF);animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
.hbar.gold i{background:linear-gradient(90deg,#FFE27A,#FFB020)}
.hbar.rp i{background:linear-gradient(90deg,#B66BFF,#7B3FF2)}
@keyframes grow{from{width:0}}
.lvlbadge.sm{width:38px;height:38px;border-radius:11px;font-size:15px}
.lvlbadge.sm small{font-size:8px}
.qdots{display:flex;gap:4px;margin-top:3px}
.qdots i{flex:1;height:10px;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,transparent);position:relative;overflow:hidden}
.qdots i::after{content:"";position:absolute;inset:0;width:var(--w);background:#2DD4A0;border-radius:inherit;animation:grow 1s both}
.qdots i.on::after{width:100%}
.hs-ic.cards{position:relative;width:70px;height:40px;justify-content:flex-start}
.hs-ic.cards .ccard{position:absolute;width:28px;top:-2px}
.hs-ic.cards .ccard:nth-child(1){left:0;transform:rotate(-10deg)}.hs-ic.cards .ccard:nth-child(2){left:20px;transform:rotate(2deg)}.hs-ic.cards .ccard:nth-child(3){left:40px;transform:rotate(12deg)}
/* the pack card: the most exciting thing on the page when you have packs */
.hpack{gap:14px;padding:12px 16px;position:relative;overflow:hidden}
.hpack.ready{border:2px solid #FFD23F;background:radial-gradient(circle at 18% 50%,rgba(255,210,63,.35),transparent 55%),linear-gradient(110deg,#2D4BD8,#6A2FE0);color:#fff;box-shadow:0 4px 0 #3A1C8C,0 14px 30px -12px rgba(255,210,63,.6);animation:packglow 2.4s ease-in-out infinite}
.hpack.ready::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);background-size:250% 100%;animation:sweep 3s ease-in-out infinite;pointer-events:none}
@keyframes packglow{50%{box-shadow:0 4px 0 #3A1C8C,0 14px 38px -8px rgba(255,210,63,.9)}}
@keyframes sweep{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}
.hpack.ready:hover{transform:translateY(-2px)}
.hp-shelf{position:relative;width:120px;height:88px;flex:none}
.hp-p{position:absolute;left:calc(var(--i) * 20px);top:0;transform:rotate(calc((var(--i) - 1) * 9deg));animation:packbob 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s)}
.hp-p .rpack.small{width:60px}
.hp-p{left:calc(var(--i) * 26px)}
.hpack .hp-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.hpack .hp-tx small{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
.hpack .hp-tx b{font-family:var(--f-display);font-size:24px;line-height:1.05}
.hp-sub{font-size:14px;color:var(--muted)}
.hp-go{flex:none;font:800 20px/1 var(--f-display);color:#2A1A00;background:#FFD23F;border-radius:999px;padding:14px 22px;box-shadow:0 4px 0 #B57A00;animation:gopulse 1.4s ease-in-out infinite}
@keyframes gopulse{50%{transform:scale(1.07)}}
.hpack.next .hp-tx b{font-size:20px}
.ring{--p:0;flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#FFD23F calc(var(--p) * 1%),color-mix(in srgb,var(--line) 70%,transparent) 0)}
.ring b{width:50px;height:50px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font:800 18px/1 var(--f-display)}
.ring b small{font-size:11px;color:var(--muted)}

/* quizzes */
.h-sets .sech{margin-top:4px}
.plays2{display:flex;gap:8px;align-items:stretch}
.plays2 .play1{flex:1;min-width:0;padding-inline:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:17px;border-radius:14px;min-height:50px}
.mbtn{flex:0 0 52px;width:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:14px;border:1px solid var(--tile-b);background:var(--tile);box-shadow:0 3px 0 var(--tile-edge);font-size:12px;font-weight:800;color:var(--muted)}
.mbtn span,.mbtn svg{font-size:18px;width:18px;height:18px;line-height:1}
.mbtn.spd{color:#FFB020}.mbtn.bat{color:#B66BFF}.mbtn.wu{color:#2DD4A0}
.mbtn:hover{border-color:#4FA3FF}

/* header pack button: always one tap away */
.hpill.packs{border-color:#FFD23F;background:linear-gradient(110deg,#2D4BD8,#6A2FE0);color:#fff;animation:gopulse 1.6s ease-in-out infinite}
.hpill.packs .pk-lbl{font:800 12px/1 var(--f-display);color:#2A1A00;background:#FFD23F;border-radius:999px;padding:4px 7px}
@media (max-width:420px){.hdrstats:has(.packs) .hpill:not(.coins):not(.packs){display:none}.hpill.packs .pk-lbl{display:none}}
@media (prefers-reduced-motion:reduce){.hpack.ready,.hpack.ready::after,.hp-p,.hp-go,.hpill.packs{animation:none}}
.hpack.ready .hp-tx b{font-size:clamp(22px,3.4vw,30px)}
@media (max-width:420px){.hp-shelf{width:92px;height:70px}.hp-p .rpack.small{width:48px}.hp-p{left:calc(var(--i) * 20px)}.hp-go{padding:12px 16px;font-size:18px}.hpack.ready .hp-tx b{font-size:20px}}
.mob-pack{display:none}
@media (max-width:899px){.mob-pack{display:block}.mob-pack+.h-play{margin-top:0}.home2:has(.mob-pack) .h-rewards>.hpack{display:none}}

/* ---------- Home v3: phones show one path, not three ---------- */
/* the mode tiles repeat the Play/Speed/Battle/Easy buttons on every quiz, so phones skip them */
@media (max-width:760px){.h-play{display:none}}
/* returning kids on phones: the create card becomes one slim bar */
@media (max-width:760px){
  .snaphero.compact.ret{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left;padding:14px 16px;gap:10px}
  .snaphero.compact.ret .sh-illo,.snaphero.compact.ret .sh-tag,.snaphero.compact.ret .sh-sub,.snaphero.compact.ret .sh-tip,.snaphero.compact.ret .sh-priv{display:none}
  .snaphero.compact.ret h1{font-size:22px;margin:0;flex:1 1 100%}
  .snaphero.compact.ret .sh-actions{flex:1 1 100%;gap:10px}
  .snaphero.compact.ret .sh-actions>.btn{flex:1 1 0;min-height:50px;font-size:17px}
}
.mob-pack{margin:0}
.hstat.shd .hs-ic svg,.hstat.shd .hs-ic img{width:30px;height:30px}
.hs-note{font-size:12.5px;color:var(--muted);font-weight:600}
.hpack .hp-sub{font-size:13px;opacity:.85}
@media (max-width:480px){
  .hpack.ready{gap:10px;padding:12px 12px 12px 10px}
  .hpack .hp-sub{display:none}
  .hp-shelf{width:calc(48px + (var(--n,1) - 1) * 20px);height:70px}
  .hpack.ready .hp-tx b{font-size:21px;line-height:1.1}
  .hpack .hp-tx small{font-size:12px}
  .hp-go{padding:11px 14px;font-size:16px}
}
@media (max-width:760px){.snaphero.compact.ret .sh-actions>.btn{white-space:nowrap;padding:0 12px;gap:8px;font-size:16px}.snaphero.compact.ret .sh-actions>.btn svg{width:20px;height:20px;flex:none}}