/* Fun activities: shared game layout, HUD, overlay and leaderboard */
.game-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.game-stage{min-width:0}
.game-hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.game-hud .hs{display:flex;flex-direction:column;background:var(--mist);border-radius:14px;padding:8px 16px;min-width:84px}
.game-hud .hs span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.game-hud .hs b{font-size:22px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.game-hud .hs.lives b{display:flex;gap:4px;align-items:center;min-height:25px}
.game-hud .hs.lives img{width:31px;height:22px;object-fit:contain}
.game-hud .hs.meter{flex:1;min-width:130px}
.game-hud .meter i{display:block;height:10px;border-radius:99px;background:#e3e6ea;overflow:hidden;margin-top:6px}
.game-hud .meter i u{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),#7ec99a);transition:width .15s}
.game-hud .meter.low i u{background:linear-gradient(90deg,#c4475e,#e07a5f)}
.game-hud .meter.en i u{background:linear-gradient(90deg,var(--blue),#5f9cf0)}
.game-hud .combo{font-weight:800;color:var(--green-d);min-width:56px}
.game-cv{position:relative;background:#0b1a2a;border-radius:22px;overflow:hidden;touch-action:none;display:flex;justify-content:center;user-select:none;-webkit-user-select:none}
.game-cv canvas{display:block;max-width:100%}
.game-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:#fff;background:rgba(11,26,42,.84);padding:20px;z-index:2}
.game-ov[hidden]{display:none}
.game-ov h2{font-size:clamp(28px,5vw,40px);letter-spacing:-.04em;line-height:1.05}
.game-ov .ov-art{width:auto;height:96px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(96,147,114,.7))}
.game-ov .ov-score{display:flex;flex-direction:column;gap:2px}
.game-ov .ov-score span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9fb2c6}
.game-ov .ov-score b{font-size:clamp(44px,9vw,68px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.game-ov .ov-sub{color:#c9d6e3;font-weight:600}
.game-ov .ov-rank{font-weight:700;color:#8fe0ad}
.game-ov .ov-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.game-ov .muted{color:#9fb2c6}
.game-ov a:not(.btn){text-decoration:underline}
.ov-form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.ov-form input{font:inherit;padding:11px 14px;border-radius:12px;border:1px solid #3b5575;background:#12273d;color:#fff;width:150px}
.ov-form input::placeholder{color:#7f95ab}
.ov-err{color:#ff9aa8;font-weight:600;min-height:1em}
.dpad{display:none;margin:14px auto 0;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,56px);gap:8px;justify-content:center}
.dpad button{border:0;border-radius:16px;background:var(--blue);color:#fff;font-size:22px;font-weight:800;touch-action:manipulation}
.dpad button:active{background:var(--green-d)}
.dpad .u{grid-column:2;grid-row:1}.dpad .l{grid-column:1;grid-row:2}.dpad .d{grid-column:2;grid-row:2}.dpad .r{grid-column:3;grid-row:2}
.boostbtn{display:none;margin:14px auto 0;padding:16px 40px;border:0;border-radius:99px;background:var(--blue);color:#fff;font:inherit;font-weight:800;touch-action:manipulation}
.boostbtn:active{background:var(--green-d)}
@media (pointer:coarse){.dpad{display:grid}.boostbtn{display:block}}
.gboard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px}
.lb-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lb-h h3{font-size:22px;letter-spacing:-.03em}
.lb-tabs{display:inline-flex;background:var(--mist);border-radius:99px;padding:3px}
.lb-tabs button{border:0;background:none;font:inherit;font-size:13px;font-weight:700;padding:6px 14px;border-radius:99px;cursor:pointer;color:var(--muted)}
.lb-tabs button.on{background:var(--charcoal);color:#fff}
.lb-list{list-style:none;display:flex;flex-direction:column;gap:2px;min-height:60px}
.lb-list li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;font-size:15px}
.lb-list li b{font-variant-numeric:tabular-nums;color:var(--muted);text-align:center}
.lb-list li:nth-child(1) b{color:#c8902e}.lb-list li:nth-child(2) b{color:#8a96a3}.lb-list li:nth-child(3) b{color:#a8693a}
.lb-list li .nm{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-list li .nm small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.lb-list li em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.lb-list li.you{background:var(--green-l)}
.lb-list li.empty{display:block;color:var(--muted);text-align:center;padding:18px 0}
.lb-me{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;font-weight:700;color:var(--green-d)}
.lb-me:empty{display:none}
.game-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.game-card{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:.25s}
.game-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,26,42,.1)}
.game-card .art{aspect-ratio:16/9;background:#0b1a2a;display:block}
.game-card .art svg{width:100%;height:100%;display:block}
.game-card .gc{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.game-card h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.04em}
.game-card p{font-size:14px;color:var(--muted)}
.game-card .mini{list-style:none;display:flex;flex-direction:column;gap:2px;font-size:14px;margin-top:6px}
.game-card .mini li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed var(--line)}
.game-card .mini li b{font-weight:700}
.game-card .mini li em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.game-card .more{margin-top:auto;padding-top:12px}
@media (max-width:900px){.game-grid{grid-template-columns:1fr}}
.game-hud .hs.pw{border:0;font:inherit;text-align:left;cursor:pointer;color:inherit;min-width:92px;transition:.2s}
.game-hud .hs.pw i{display:block;height:6px;border-radius:99px;background:#e3e6ea;margin-top:6px;overflow:hidden}
.game-hud .hs.pw u{display:block;height:100%;width:0;background:var(--blue);border-radius:99px;transition:width .15s}
.game-hud .hs.pw.on{background:var(--green-l);box-shadow:0 0 0 2px var(--green)}
.game-hud .hs.pw.on u{background:var(--green)}

/* ---- HUD polish: cards, vacuum layout, power buttons ---- */
.game-hud .hs{background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(11,26,42,.05)}
.game-hud .hs b{color:var(--ink)}
.vhud{display:grid;grid-template-columns:1fr auto;grid-template-areas:"main pow" "met met";gap:12px;align-items:stretch}
.vhud .hud-main{grid-area:main;display:flex;gap:10px}
.vhud .hud-main .hs{flex:1;justify-content:center}
.vhud .hs.big{position:relative;flex:1.7;background:linear-gradient(135deg,#fff 40%,var(--green-l))}
.vhud .hs.big b{font-size:34px;line-height:1}
.vhud .combo-b{position:absolute;top:10px;right:12px;background:var(--green);color:#fff;border-radius:99px;padding:2px 10px;font-style:normal;font-weight:800;font-size:14px;animation:cb .25s ease}
.vhud .combo-b:empty{display:none}
@keyframes cb{from{transform:scale(1.5)}to{transform:scale(1)}}
.vhud .hud-powers{grid-area:pow;display:flex;gap:10px}
.pwr{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;min-width:138px;padding:10px 16px 14px 12px;border-radius:16px;border:1px solid var(--line);background:#fff;font:inherit;color:inherit;text-align:left;cursor:pointer;box-shadow:0 1px 3px rgba(11,26,42,.05);transition:.2s}
.pwr .ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--ic);opacity:.45;transition:.2s}
.pwr .ic svg{width:22px;height:22px}
.pwr .tx{display:flex;flex-direction:column;line-height:1.1}
.pwr .tx span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pwr .tx b{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pwr i{position:absolute;left:0;right:0;bottom:0;height:5px;background:#e9edf1}
.pwr u{display:block;height:100%;width:0;background:var(--ic);transition:width .15s}
.pwr.on{border-color:var(--green);box-shadow:0 0 0 3px rgba(96,147,114,.28);animation:pwg 1.6s ease-in-out infinite}
.pwr.on .ic{opacity:1;box-shadow:0 0 14px var(--ic)}
@keyframes pwg{50%{box-shadow:0 0 0 6px rgba(96,147,114,.12)}}
.vhud .hud-meters{grid-area:met;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vhud .hud-meters .hs.meter{min-width:0;padding:10px 16px 12px}
.vhud .meter i{height:12px}
@media (max-width:640px){
  .vhud{grid-template-columns:1fr;grid-template-areas:"main" "pow" "met"}
  .vhud .hud-powers .pwr{flex:1;min-width:0}
  .vhud .hs.big b{font-size:30px}
}

/* ---- Capsulorhexis results, IOL Crush progress and legend ---- */
.rx-res{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.rx-res[hidden]{display:none}
.rx-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.rx-h b{font-size:24px;letter-spacing:-.02em}.rx-h span{color:var(--muted);font-weight:600}.rx-h.bad b{color:#c4475e}
.rx-b{display:grid;grid-template-columns:140px 1fr 44px;gap:10px;align-items:center;font-size:14px;font-weight:600}
.rx-b i{display:block;height:8px;border-radius:99px;background:#e9edf1;overflow:hidden}
.rx-b u{display:block;height:100%;background:linear-gradient(90deg,var(--green),#7ec99a)}
.rx-b b{text-align:right;font-variant-numeric:tabular-nums}
.rx-res .btn{align-self:flex-start;margin-top:4px}
.ic-prog{height:10px;border-radius:99px;background:#e3e6ea;overflow:hidden;margin:0 0 12px}
.ic-prog u{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),#5f9cf0);transition:width .3s}
.ic-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:13px;font-weight:600;color:var(--muted)}
.ic-legend span{display:inline-flex;align-items:center;gap:6px}
.ic-legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
@media (max-width:640px){.rx-b{grid-template-columns:104px 1fr 40px}}

/* ---- Capsulorhexis tools ---- */
.rx-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rx-t{display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 14px;font:inherit;cursor:pointer;touch-action:manipulation}
.rx-t b{font-weight:700;font-size:14px}.rx-t i{font-style:normal;font-weight:700;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rx-t.on{background:var(--ink);border-color:var(--ink);color:#fff}.rx-t.on i{color:#cfe8d9}
.rx-t.pw{border-color:var(--green)}.rx-t.pw i{color:var(--green)}
.rx-t.lk{opacity:.45}.rx-t:disabled{cursor:default}.rx-t:disabled:not(.lk):not(.on){opacity:.55}
.rx-unl{font-weight:700;color:var(--green)}

.rx-t.dim{opacity:.55}

/* ---- Read instructions, YOSI 360 login prompt, how-to-play dialog ---- */
.game-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.how-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.how-link svg{width:19px;height:19px;flex:none}
.gb-ok{font-size:13px;font-weight:700;color:var(--green-d);background:var(--mist);padding:6px 12px;border-radius:99px}
.gb-id:empty{display:none}
.lb-id{margin:0 0 14px;padding:12px 14px;background:var(--mist);border-radius:14px;font-size:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;line-height:1.45}
.lb-id:empty{display:none}.lb-id p{margin:0}.lb-id small{color:var(--muted)}.lb-id small a{text-decoration:underline}
.how{position:fixed;inset:0;z-index:1000;background:rgba(11,26,42,.62);display:flex;align-items:center;justify-content:center;padding:16px}
.how[hidden]{display:none}
.how-card{position:relative;background:#fff;border-radius:var(--r-card);max-width:640px;width:100%;max-height:88vh;overflow:auto;padding:28px 28px 22px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.how-card h2{font-size:26px;letter-spacing:-.03em;margin:0 40px 8px 0}
.how-card h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 6px}
.how-card ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;line-height:1.5}
.how-card p{margin:0;line-height:1.5}
.how-goal{font-size:16px;font-weight:600}
.how-x{position:absolute;right:14px;top:12px;border:0;background:var(--mist);width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
.how-act{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.how-act [hidden]{display:none}
.how kbd{font:700 12px/1 inherit;background:#eef1f4;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 6px;white-space:nowrap}
body.how-open{overflow:hidden}
.how-card ul{list-style:disc}
.how-card li::marker{color:var(--green)}
/* ---- games page tiles ---- */
.game-cards{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.game-card.gs2{border:0;border-radius:28px;background:#fff;box-shadow:0 14px 30px rgba(11,26,42,.12)}
.game-card.gs2:hover{transform:translateY(-8px) rotate(-.8deg);box-shadow:0 26px 50px rgba(11,26,42,.2)}
.gs2-top{display:block;position:relative;height:240px;overflow:hidden;background:var(--gs)}
.gs2-top::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0,rgba(255,255,255,.28),transparent 60%);pointer-events:none}
.gs2 .gs-art{position:absolute;left:0;top:0;width:100%;height:100%;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gs2:hover .gs-art{transform:scale(1.06)}
.gs2 .gs-art svg{width:100%;height:100%;display:block}
.gs2 .gs-chip{position:absolute;left:14px;top:14px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.94);color:#17233a;padding:6px 11px;border-radius:99px}
.game-card.gs2 h3{font-size:24px}

/* RRR: points and "Next patient" over the bottom of the play area */
.rx-next{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:1;display:flex;align-items:center;gap:14px;max-width:calc(100% - 24px);padding:8px 8px 8px 18px;border-radius:999px;background:rgba(11,26,42,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.7);animation:rxin .25s ease-out}
.rx-next[hidden]{display:none}
.rx-nh{display:flex;align-items:baseline;gap:8px;white-space:nowrap;min-width:0}
.rx-nh b{font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.rx-nh b.bad{color:#ff8a9c;font-size:17px}
.rx-nh span{color:#c9d6e3;font-weight:600;font-size:13px}
.rx-next .btn{white-space:nowrap}
@keyframes rxin{from{opacity:0;transform:translate(-50%,12px)}}
@media(max-width:520px){.rx-next{bottom:10px;gap:10px;padding:6px 6px 6px 14px}.rx-nh span{display:none}.rx-next .btn{padding:10px 16px}}
@media(prefers-reduced-motion:reduce){.rx-next{animation:none}}

/* touch controls (phones and tablets) */
.tpad,.joy{display:none;touch-action:none;user-select:none;-webkit-user-select:none}
@media (pointer:coarse){
 .tpad{display:grid;place-items:center;margin:12px auto 0;width:100%;max-width:520px;height:132px;border-radius:22px;background:radial-gradient(120% 140% at 50% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),linear-gradient(180deg,#14305f,#0b1e3f);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 2px 14px rgba(0,0,0,.35)}
 .tpad i{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.35);box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 0 22px rgba(255,255,255,.04);transition:.15s}
 .tpad.on i{border-color:#7fd0ff;box-shadow:0 0 0 10px rgba(127,208,255,.18),0 0 0 22px rgba(127,208,255,.08)}
 .joy{display:block;position:relative;margin:14px auto 0;width:164px;height:164px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1d427f,#0b1e3f);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 2px 14px rgba(0,0,0,.4),0 10px 22px -12px rgba(8,22,44,.6)}
 .joy::before,.joy::after{content:"";position:absolute;background:rgba(255,255,255,.1)}
 .joy::before{left:50%;top:14px;bottom:14px;width:2px;transform:translateX(-1px)}.joy::after{top:50%;left:14px;right:14px;height:2px;transform:translateY(-1px)}
 .joy-k{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9fc6ff 55%,#4c86e8);box-shadow:0 8px 16px rgba(0,0,0,.4);transition:transform .08s}
 .joy.on .joy-k{transition:none}
 .dpad{display:none!important}
}