/* Harmony Hopz — game shell styles */
body.game-page{background:var(--c3,#fff3cf);overscroll-behavior:none;display:flex;flex-direction:column;height:100vh;height:100dvh}
body.game-page main{flex:1;min-height:0;display:flex}
body.game-page .site-footer{display:none}
.hh-game{display:flex;flex-direction:column;flex:1;width:100%;min-height:400px;max-width:1100px;margin:0 auto;padding:8px 8px 10px}
.hh-bar{display:flex;align-items:center;gap:8px;padding:0 0 8px}
.hh-bar h1{flex:1;margin:0;font-size:clamp(17px,3.6vw,26px);text-align:center;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbtn{font-family:inherit;border:0;background:#fff;color:var(--ink);border-radius:999px;min-width:52px;height:52px;padding:0 14px;font-size:24px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 0 rgba(0,0,0,.15);cursor:pointer;text-decoration:none;flex:none}
.rbtn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.rbtn .lbl{font-size:16px}
@media (max-width:520px){.rbtn .lbl{display:none}.rbtn{min-width:48px;height:48px;padding:0 10px}}
.hh-stage{position:relative;flex:1;border-radius:28px;overflow:hidden;background:linear-gradient(170deg,var(--c1,#8fdcff),var(--c2,#ffd2e6));box-shadow:inset 0 0 0 5px rgba(255,255,255,.7),0 8px 24px rgba(0,0,0,.12);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hh-stage{background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.55) 0 7%,transparent 7.5%),radial-gradient(circle at 82% 30%,rgba(255,255,255,.4) 0 5%,transparent 5.5%),radial-gradient(circle at 70% 78%,rgba(255,255,255,.35) 0 9%,transparent 9.5%),radial-gradient(circle at 30% 70%,rgba(255,255,255,.3) 0 4%,transparent 4.5%),linear-gradient(170deg,var(--c1,#8fdcff),var(--c2,#ffd2e6))}
.hh-stage .backdrop{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(22px) saturate(1.3);opacity:.16;pointer-events:none}
.hh-stage .medal{position:absolute;left:10px;top:8px;width:46px;height:46px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.15);z-index:5;pointer-events:none;animation:hh-spin 9s linear infinite}
@keyframes hh-spin{to{transform:rotate(360deg)}}
.win-disc{position:relative;width:min(34vh,220px);aspect-ratio:1;display:grid;place-items:center}
.win-disc img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;border:8px solid #fff;box-shadow:0 0 0 8px var(--c4,#ffc93c),0 16px 36px rgba(0,0,0,.25);animation:hh-spin 6s linear infinite;object-fit:cover}
.win-disc .win-big{position:relative;font-size:clamp(60px,12vh,110px);filter:drop-shadow(0 6px 0 rgba(255,255,255,.9))}
.sticker{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 16px;font-weight:700;font-size:18px;box-shadow:0 4px 0 rgba(0,0,0,.1);color:var(--ink)}
@media (max-width:720px){body.game-page .site-header .nav{display:none}}
.hh-stage .ground{position:absolute;left:0;right:0;bottom:0;height:18%;background:rgba(255,255,255,.35);border-top:4px solid rgba(255,255,255,.6);pointer-events:none}
.hh-stage .deco{position:absolute;font-size:34px;opacity:.55;pointer-events:none;filter:saturate(1.1)}
.hh-layer{position:absolute;inset:0}
.hh-hud{position:absolute;left:0;right:0;top:8px;display:flex;justify-content:center;gap:4px;z-index:5;pointer-events:none;flex-wrap:wrap;padding:0 60px}
.hh-hud .st{font-size:22px;filter:grayscale(1) opacity(.35);transition:transform .3s}
.hh-hud .st.on{filter:none;transform:scale(1.2)}
.hh-prompt{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:6;background:#fff;color:var(--ink);font-weight:700;font-size:clamp(20px,4.4vw,32px);padding:8px 22px;border-radius:999px;box-shadow:0 5px 0 rgba(0,0,0,.12);white-space:nowrap;pointer-events:none;display:flex;align-items:center;gap:10px;max-width:94%}
.hh-prompt:empty{display:none}
.hh-prompt .em{font-size:1.3em;line-height:1}
.sprite{position:absolute;line-height:1;text-align:center;transform:translate(-50%,-50%);will-change:transform;pointer-events:none}
.tap{pointer-events:auto;cursor:pointer;border:0;background:none;padding:0;font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.tile{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;background:#fff;border-radius:24px;box-shadow:0 6px 0 rgba(0,0,0,.14);font-weight:700;color:var(--ink);transition:transform .15s}
.tile:active{transform:translate(-50%,-50%) scale(.94)}
.tile .lab{font-size:.34em;display:block;margin-top:2px;line-height:1.05}
.wobble{animation:hh-wobble .45s}
@keyframes hh-wobble{0%,100%{rotate:0deg}25%{rotate:-12deg}75%{rotate:12deg}}
.boing{animation:hh-boing .4s}
@keyframes hh-boing{0%{scale:1}40%{scale:1.3}100%{scale:1}}
.hint{animation:hh-hint 1s infinite}
@keyframes hh-hint{0%,100%{box-shadow:0 0 0 0 rgba(255,201,60,.9),0 6px 0 rgba(0,0,0,.14)}50%{box-shadow:0 0 0 14px rgba(255,201,60,0),0 6px 0 rgba(0,0,0,.14)}}
.float-txt{position:absolute;transform:translate(-50%,-50%);font-weight:700;font-size:28px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25);pointer-events:none;animation:hh-up 1s forwards;z-index:8}
@keyframes hh-up{to{translate:0 -70px;opacity:0}}
.spark{position:absolute;pointer-events:none;font-size:22px;animation:hh-spark .8s forwards;z-index:7}
@keyframes hh-spark{to{translate:var(--dx) var(--dy);opacity:0;scale:.4}}

/* overlays */
.hh-ov{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hh-ov[hidden]{display:none}
.hh-ov .cover{width:min(46vh,62vw,320px);aspect-ratio:1;border-radius:26px;box-shadow:0 10px 0 rgba(0,0,0,.12),0 18px 40px rgba(0,0,0,.2);border:6px solid #fff;object-fit:cover}
.hh-ov h2{margin:0;font-size:clamp(26px,5.4vw,44px);line-height:1.05;color:var(--ink)}
.hh-ov .how{font-size:clamp(18px,3.6vw,24px);font-weight:600;background:#fff;border-radius:999px;padding:8px 20px;box-shadow:0 4px 0 rgba(0,0,0,.1);display:flex;align-items:center;gap:10px}
.hh-ov .how .em{font-size:1.4em}
.bigplay{font-family:inherit;font-size:34px;font-weight:700;border:0;border-radius:999px;padding:16px 46px;min-height:84px;color:#fff;background:var(--grass);box-shadow:0 8px 0 #3b9a2c;cursor:pointer;display:inline-flex;align-items:center;gap:12px;animation:hh-pulse 1.6s infinite}
.bigplay:active{transform:translateY(4px);box-shadow:0 4px 0 #3b9a2c}
@keyframes hh-pulse{50%{scale:1.06}}
.win-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.win-big{font-size:clamp(70px,16vh,130px);line-height:1;animation:hh-boing 1s infinite}
.confetti{position:absolute;top:-30px;font-size:26px;pointer-events:none;animation:hh-fall linear forwards;z-index:21}
@keyframes hh-fall{to{translate:var(--dx) 115vh;rotate:540deg}}
.toast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:9;background:var(--ink);color:#fff;font-weight:600;padding:8px 18px;border-radius:999px;font-size:18px;pointer-events:none;opacity:0;transition:opacity .3s}
.toast.show{opacity:1}

/* game-specific helpers */
.pad{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:min(58vmin,340px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 55%,rgba(255,255,255,.4) 56% 100%);box-shadow:0 10px 0 rgba(0,0,0,.12);display:grid;place-items:center;font-size:min(30vmin,170px)}
.pad .ring{position:absolute;inset:-6%;border-radius:50%;border:8px solid var(--c4,#ffc93c);opacity:0}
.pad.beat .ring{animation:hh-ring .5s ease-out}
@keyframes hh-ring{0%{opacity:.9;scale:.9}100%{opacity:0;scale:1.2}}
.bins{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:10px;padding:0 10px}
.bin{flex:1;max-width:200px;min-height:110px;border-radius:22px;background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:48px;font-weight:700;border:5px solid var(--bc,#fff)}
.bin .lab{font-size:16px;color:var(--ink)}
.choice-row{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:14px;padding:0 12px}
.choice{flex:1;max-width:260px;min-height:150px;border-radius:26px;background:#fff;box-shadow:0 7px 0 rgba(0,0,0,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:64px;gap:4px}
.choice .lab{font-size:clamp(16px,3.4vw,21px);font-weight:700;color:var(--ink);padding:0 8px;line-height:1.1}
.numrow{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:14px}
.num{width:min(24vw,110px);height:min(24vw,110px);border-radius:50%;background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.14);font-size:min(12vw,56px);font-weight:700;color:var(--ink)}
.card{position:absolute;transform:translate(-50%,-50%);perspective:600px}
.card .in{position:relative;width:100%;height:100%;transition:transform .35s;transform-style:preserve-3d}
.card.up .in{transform:rotateY(180deg)}
.card .f,.card .b{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 5px 0 rgba(0,0,0,.14);display:grid;place-items:center}
.card .b{background:#fff center/cover;border:4px solid #fff}
.card .f{background:#fff;transform:rotateY(180deg)}
.card.done .f{background:#eaffd9}
.palette{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 8px}
.palette .tap{width:min(18vw,84px);height:min(18vw,84px);border-radius:22px;background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.14);font-size:min(10vw,46px)}
.palette .tap.sel{outline:5px solid var(--c4,#ffc93c)}
.palette .tap.got{opacity:.45}
.recipe{position:absolute;right:10px;top:44px;background:#fff;border-radius:18px;padding:8px 10px;box-shadow:0 4px 0 rgba(0,0,0,.12);font-size:28px;z-index:6;display:flex;flex-direction:column;gap:2px}
.recipe .ok{opacity:.35;text-decoration:line-through}
.dark{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at var(--x,50%) var(--y,50%),transparent 0,transparent 16vmin,rgba(10,14,40,.93) 24vmin)}
.hole{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:rgba(40,30,20,.35);box-shadow:inset 0 8px 0 rgba(0,0,0,.25)}
.meter{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:min(80%,420px);height:30px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 4px #fff;overflow:hidden}
.meter .zone{position:absolute;top:0;bottom:0;background:var(--grass);opacity:.8}
.meter .needle{position:absolute;top:-4px;bottom:-4px;width:10px;margin-left:-5px;border-radius:6px;background:var(--ink)}
.pole{position:absolute;left:50%;top:9%;bottom:6%;width:46px;margin-left:-23px;border-radius:23px;background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 4px #fff}
@media (prefers-reduced-motion:reduce){.bigplay,.win-big,.medal,.win-disc img{animation:none}.hh-stage{animation:none!important}}
.hh-ov{overflow:auto;justify-content:safe center}

/* ---- QA fixes 2026-11-11: no truncated game titles on phones, safe areas ---- */
.hh-game{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px));padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
@media (max-width:520px){
  .hh-bar{gap:5px}
  .rbtn{min-width:44px;height:44px;padding:0 8px;font-size:22px}
  .hh-bar h1{font-size:15px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;line-height:1.15}
}
.win-founders{margin-top:10px;font-weight:700;color:inherit}