:root{
  --accent:#57dfff;--accent-soft:rgba(87,223,255,.28);--accent-line:rgba(87,223,255,.9);
  --theme:#0a4a95;--theme-dark:#062b60;--gold:#f7ce59;
  --safe-t:max(8px,env(safe-area-inset-top));--safe-r:max(10px,env(safe-area-inset-right));
  --safe-b:max(14px,env(safe-area-inset-bottom));--safe-l:max(10px,env(safe-area-inset-left));
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--theme-dark);color:#fff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body{-webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none}
button,a{font:inherit}
.app{position:relative;width:100vw;height:100dvh;overflow:hidden;background:var(--theme-dark)}
.art{position:absolute;inset:0;background-position:center center;background-repeat:no-repeat;background-size:cover;background-color:var(--theme-dark)}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,9,25,.02),transparent 52%,rgba(0,8,25,.06) 68%,rgba(0,8,25,.42) 100%)}
.top{position:absolute;z-index:70;left:var(--safe-l);right:var(--safe-r);top:var(--safe-t);height:58px;display:grid;grid-template-columns:54px 1fr 44px;gap:8px;align-items:center;pointer-events:none}
.logo,.help{pointer-events:auto}.logo{width:52px;height:52px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:rgba(4,22,52,.90);border:1px solid rgba(247,206,89,.94);box-shadow:0 4px 14px #0007}.logo img{width:95%;height:95%;object-fit:contain}.help{width:42px;height:42px;border-radius:13px;border:1px solid var(--gold);background:rgba(5,26,60,.94);color:#fff;font-size:21px;font-weight:1000;cursor:pointer}
.title{justify-self:center;max-width:min(390px,64vw);padding:5px 13px 6px;border-radius:17px;background:linear-gradient(180deg,rgba(5,30,66,.95),rgba(3,18,43,.95));border:1px solid rgba(247,206,89,.92);text-align:center;box-shadow:0 5px 14px #0007}.title small{display:block;color:#ffe589;font-size:7px;font-weight:1000;letter-spacing:.13em}.title h1{margin:1px 0 0;color:var(--accent);font-size:clamp(16px,2.8vw,25px);line-height:1}.title span{display:block;margin-top:2px;color:#e7f3ff;font-size:7px;font-weight:900}
.play-zone{position:absolute;z-index:20;inset:0;pointer-events:none}.grid-wrap{position:absolute;z-index:22;pointer-events:auto;overflow:visible}.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);border:2px solid var(--accent);border-radius:18px;overflow:hidden;background:rgba(5,20,48,.07);box-shadow:0 0 20px var(--accent-soft),inset 0 0 24px rgba(6,18,42,.08);backdrop-filter:blur(.7px)}
.cell{position:relative;min-width:0;min-height:0;border:1px solid var(--accent-line);background:rgba(255,255,255,.018);padding:0;cursor:pointer}.cell.choice{background:rgba(255,255,255,.16);box-shadow:inset 0 0 18px var(--accent-soft)}.cell.choice::after{content:"";position:absolute;inset:28%;border:2px solid #fff;border-radius:50%;box-shadow:0 0 12px var(--accent)}
.lock-tile{position:absolute;left:50%;top:50%;width:72%;height:72%;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#f3c64e,#c78616);border:2px solid #fff0a1;box-shadow:0 5px 12px #0007,inset 0 2px 0 rgba(255,255,255,.38);z-index:5}.lock-tile .icon{font-size:clamp(15px,3vw,26px)}.lock-tile.on{background:linear-gradient(145deg,#38d36a,#0b8734);border-color:#e3ffea;box-shadow:0 0 20px rgba(63,255,119,.88),0 5px 12px #0007}.lock-num{position:absolute;right:-6px;top:-6px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#071b3d;border:1px solid #ffe786;color:#fff;font-style:normal;font-size:10px;font-weight:1000}
.player{position:absolute;z-index:8;transform:translate(-50%,-50%);pointer-events:none;transition:left .26s cubic-bezier(.2,.8,.2,1),top .26s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 6px 7px #0008)}.player img{width:100%;height:100%;object-fit:contain}
.toast{position:absolute;z-index:80;left:50%;top:43%;transform:translate(-50%,-50%);padding:7px 14px;border-radius:999px;background:rgba(3,18,44,.94);border:1px solid #ffe071;color:#fff;font-size:11px;font-weight:1000;opacity:0;pointer-events:none}.toast.show{animation:pop .85s ease}
.controls{position:absolute;z-index:55;left:var(--safe-l);right:var(--safe-r);bottom:var(--safe-b);display:grid;grid-template-rows:auto auto auto auto auto;gap:7px;align-content:end;pointer-events:none}.controls>*{pointer-events:auto}
.lock-strip{justify-self:center;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:4px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(8,43,94,.95),rgba(4,23,55,.96));border:2px solid var(--gold);box-shadow:0 5px 14px #0007;pointer-events:none}.progress-lock{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(220,232,248,.18);border:1px solid rgba(235,243,255,.48);font-size:18px;filter:grayscale(.55);transition:.18s}.progress-lock.on{background:rgba(21,165,69,.96);border-color:#caffd7;box-shadow:0 0 15px rgba(63,255,119,.82);filter:none}
.status{justify-self:center;max-width:92vw;padding:6px 12px;border-radius:999px;background:rgba(4,21,50,.95);border:1px solid rgba(247,206,89,.84);font-size:9px;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:min(96vw,680px);justify-self:center}.stat{padding:7px 5px 8px;border-radius:14px;background:rgba(5,27,61,.96);border:1px solid rgba(247,206,89,.84);text-align:center;box-shadow:0 4px 10px #0006}.stat small{display:block;color:#d3eaff;font-size:7px;font-weight:1000;letter-spacing:.08em}.stat b{display:block;margin-top:2px;color:#ffe36f;font-size:20px;line-height:1}
.actions{display:grid;grid-template-columns:minmax(88px,1fr) 76px minmax(88px,1fr);gap:10px;align-items:center}.actions a,.actions button{height:50px;border-radius:15px;border:1px solid var(--gold);background:linear-gradient(180deg,rgba(8,40,90,.97),rgba(4,23,55,.97));color:#fff;font-size:11px;font-weight:1000;text-decoration:none;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 12px #0008;cursor:pointer}.home{justify-self:start;width:min(100%,170px)}.share{justify-self:end;width:min(100%,170px)}
.spinner{position:relative;width:76px!important;height:76px!important;border-radius:50%!important;padding:0!important;border:3px solid var(--gold)!important;background:conic-gradient(from -45deg,var(--accent) 0 25%,#3559c7 0 50%,var(--accent) 0 75%,#3559c7 0)!important;box-shadow:inset 0 0 0 5px #061a3a,0 0 18px var(--accent-soft),0 5px 12px #0009!important}.spinner span{position:absolute;font-size:15px;font-weight:1000;text-shadow:0 1px 2px #000}.spinner .u{top:3px;left:50%;transform:translateX(-50%)}.spinner .r{right:5px;top:50%;transform:translateY(-50%)}.spinner .d{bottom:3px;left:50%;transform:translateX(-50%)}.spinner .l{left:5px;top:50%;transform:translateY(-50%)}.spinner .center{position:absolute;inset:30%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#ffe779,#d59c21);border:2px solid #fff1a7;color:#061a38;font-size:10px;font-weight:1000}.spinner.ready{animation:pulse 1.2s ease-in-out infinite}.spinner.spinning{animation:spin .52s cubic-bezier(.2,.75,.2,1)}
.copy{text-align:center;color:rgba(255,255,255,.9);font-size:8px;text-shadow:0 1px 2px #000}
.modal{position:absolute;z-index:110;inset:0;display:grid;place-items:center;padding:18px;background:rgba(1,7,18,.84);backdrop-filter:blur(5px)}.modal[hidden]{display:none}.card{width:min(420px,92vw);padding:20px;border-radius:20px;background:linear-gradient(180deg,#0a326d,#061a3d);border:1px solid var(--gold);box-shadow:0 18px 55px #000b;text-align:center}.card small{color:#ffe17a;font-weight:1000;letter-spacing:.13em}.card h2{margin:4px 0 7px;font-size:28px;color:var(--accent)}.card p{margin:7px 0;color:#e0efff;font-size:13px;line-height:1.45}.result{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}.result div{padding:9px;border-radius:12px;background:#061a3b;border:1px solid #2d557c}.result b{display:block;color:#ffe36b;font-size:20px}.result span{font-size:8px;color:#bdd8f4}.card button,.card a{width:100%;height:46px;margin-top:8px;border-radius:12px;border:1px solid var(--gold);background:#0a397e;color:#fff;font-weight:1000;display:grid;place-items:center;text-decoration:none;cursor:pointer}
@keyframes pulse{50%{box-shadow:inset 0 0 0 5px #061a3a,0 0 28px var(--accent),0 5px 12px #0009!important}}@keyframes spin{to{rotate:720deg}}@keyframes pop{0%{opacity:0;scale:.72}18%{opacity:1;scale:1.07}70%{opacity:1}100%{opacity:0;scale:.94}}
@media(orientation:landscape){
  .top{height:46px;grid-template-columns:44px 1fr 38px}.logo{width:42px;height:42px;border-radius:11px}.help{width:36px;height:36px;border-radius:10px}.title{padding:4px 10px 5px;max-width:min(360px,42vw)}.title small{font-size:5.5px}.title h1{font-size:15px}.title span{font-size:6px}
  .controls{gap:4px}.lock-strip{min-height:30px;padding:2px 8px;border-radius:11px}.progress-lock{width:26px;height:26px;font-size:12px;border-radius:7px}.status{font-size:6.5px;padding:3px 8px}.stats{width:min(52vw,620px);gap:5px}.stat{padding:3px 5px}.stat small{font-size:5.5px}.stat b{font-size:14px}.actions{width:min(62vw,760px);justify-self:center;grid-template-columns:minmax(88px,1fr) 56px minmax(88px,1fr)}.actions a,.actions button{height:36px;font-size:8.5px}.spinner{width:56px!important;height:56px!important}.spinner span{font-size:11px}.spinner .center{font-size:7px}.copy{font-size:6px}
}
@media(max-width:390px) and (orientation:portrait){.top{grid-template-columns:44px 1fr 36px;gap:5px}.logo{width:42px;height:42px}.help{width:34px;height:34px}.title{padding:4px 7px;max-width:64vw}.title small{font-size:5.5px}.title h1{font-size:12px}.title span{font-size:5px}.stats{width:96vw}.stat b{font-size:18px}.actions{grid-template-columns:1fr 64px 1fr}.spinner{width:64px!important;height:64px!important}.lock-strip{min-height:40px}.progress-lock{width:30px;height:30px;font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* V8 — universal app/ultra-wide phone landscape pass (Easy / Medium / Hard) */
@media(display-mode:standalone){
  :root{
    --safe-b:max(30px,calc(env(safe-area-inset-bottom) + 18px));
  }
}
@media(display-mode:standalone) and (orientation:landscape){
  :root{
    --safe-l:max(30px,calc(env(safe-area-inset-left) + 18px));
    --safe-r:max(52px,calc(env(safe-area-inset-right) + 34px));
    --safe-b:max(20px,calc(env(safe-area-inset-bottom) + 10px));
  }
}

/* Long / ultra-wide phones need a horizontal HUD instead of a tall stacked footer. */
@media (orientation:landscape) and (max-height:520px) and (min-aspect-ratio:16/9){
  .top{
    left:var(--safe-l);right:var(--safe-r);top:var(--safe-t);
    height:44px;grid-template-columns:42px 1fr 36px;gap:6px;
  }
  .logo{width:40px;height:40px;border-radius:10px}
  .help{width:34px;height:34px;border-radius:10px;font-size:18px}
  .title{max-width:min(330px,42vw);padding:3px 9px 4px;border-radius:13px}
  .title small{font-size:5px}.title h1{font-size:14px}.title span{font-size:5.5px}

  .controls{
    left:max(12px,var(--safe-l));
    right:max(12px,var(--safe-r));
    bottom:max(8px,var(--safe-b));
    display:grid;
    grid-template-columns:minmax(92px,1.1fr) minmax(70px,.9fr) minmax(70px,.9fr) 56px minmax(70px,.9fr) minmax(92px,1.1fr);
    grid-template-rows:28px 38px 8px;
    grid-template-areas:
      "status status status locks locks locks"
      "home stat1 stat2 spin stat3 share"
      "copy copy copy copy copy copy";
    column-gap:6px;
    row-gap:3px;
    align-items:center;
    align-content:end;
  }
  .lock-strip{grid-area:locks;justify-self:stretch;width:100%;height:28px;min-height:28px;padding:1px 6px;gap:5px;border-width:1px;border-radius:10px}
  .progress-lock{width:23px;height:23px;font-size:11px;border-radius:6px}
  .status{grid-area:status;justify-self:stretch;max-width:none;width:100%;height:28px;padding:5px 8px;font-size:6.5px;display:flex;align-items:center;justify-content:center}
  .stats,.actions{display:contents}
  .stats .stat:nth-child(1){grid-area:stat1}
  .stats .stat:nth-child(2){grid-area:stat2}
  .stats .stat:nth-child(3){grid-area:stat3}
  .stat{height:38px;padding:3px 4px;border-radius:10px;display:flex;flex-direction:column;justify-content:center}
  .stat small{font-size:5px}.stat b{font-size:14px;margin-top:1px}
  .actions .home{grid-area:home;width:100%;justify-self:stretch}
  .actions .spinner{grid-area:spin;justify-self:center}
  .actions .share{grid-area:share;width:100%;justify-self:stretch}
  .actions a,.actions button{height:38px;border-radius:11px;font-size:8px}
  .spinner{width:56px!important;height:56px!important;align-self:center;margin-top:-9px;margin-bottom:-9px}
  .spinner span{font-size:11px}.spinner .center{font-size:7px}
  .copy{grid-area:copy;font-size:5.5px;line-height:8px;height:8px;display:flex;align-items:center;justify-content:center;pointer-events:none}
}

/* Extra-short landscape phones: shave a little more HUD height but keep every control visible. */
@media (orientation:landscape) and (max-height:380px) and (min-aspect-ratio:16/9){
  .controls{
    grid-template-rows:24px 34px 7px;
    row-gap:2px;
  }
  .lock-strip,.status{height:24px;min-height:24px}
  .progress-lock{width:20px;height:20px;font-size:10px}
  .stat{height:34px}.actions a,.actions button{height:34px}
  .spinner{width:50px!important;height:50px!important;margin-top:-8px;margin-bottom:-8px}
  .copy{height:7px;line-height:7px;font-size:5px}
}