@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  color-scheme:dark;
  --bg:#071018;
  --panel:rgba(10,24,35,.78);
  --panel-strong:rgba(8,18,27,.94);
  --line:rgba(194,232,255,.15);
  --text:#eef8ff;
  --muted:#90a7b5;
  --cyan:#78e6ff;
  --mint:#9effc7;
  --pink:#ff83c7;
  --gold:#ffd273;
  --violet:#bca2ff;
  --danger:#ff7f8d;
}

*{box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none}
body{
  margin:0;
  min-height:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 10%,rgba(43,121,151,.18),transparent 33%),
    radial-gradient(circle at 80% 90%,rgba(134,69,145,.15),transparent 35%),
    var(--bg);
  color:var(--text);
  font-family:Manrope,Arial,sans-serif;
}
button,a{font:inherit}
button{color:inherit}
a{color:inherit}

.aurora{position:fixed;inset:0;pointer-events:none;overflow:hidden;opacity:.65}
.aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.16;animation:drift 15s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:42vw;height:42vw;left:-12vw;top:-12vw;background:var(--cyan)}
.aurora i:nth-child(2){width:34vw;height:34vw;right:-7vw;top:9vh;background:var(--pink);animation-duration:18s}
.aurora i:nth-child(3){width:38vw;height:38vw;left:35vw;bottom:-24vw;background:var(--violet);animation-duration:20s}
@keyframes drift{to{transform:translate3d(6vw,4vh,0) scale(1.12)}}

.game-header{
  position:relative;
  z-index:5;
  height:72px;
  display:grid;
  grid-template-columns:minmax(210px,1fr) auto minmax(44px,1fr);
  align-items:center;
  gap:22px;
  padding:10px clamp(14px,3vw,34px);
  border-bottom:1px solid var(--line);
  background:rgba(5,13,20,.72);
  backdrop-filter:blur(18px);
}
.brand{display:inline-flex;align-items:center;gap:12px;width:max-content;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(120,230,255,.5);border-radius:11px;font:500 12px 'DM Mono',monospace;color:var(--cyan);box-shadow:0 0 26px rgba(120,230,255,.12)}
.brand-copy{display:flex;flex-direction:column;line-height:1.15}
.brand-copy strong{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600}
.brand-copy span{margin-top:4px;color:var(--muted);font:400 9px 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase}
.header-stats{display:flex;align-items:center;gap:clamp(18px,4vw,48px)}
.header-stats>span{display:flex;flex-direction:column;align-items:center;min-width:54px}
.header-stats small,.eyebrow{font:500 9px/1.2 'DM Mono',monospace;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.header-stats strong{margin-top:2px;font:500 17px/1.2 'DM Mono',monospace;color:#fff}
.icon-button{justify-self:end;width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035);cursor:pointer;font:500 17px 'DM Mono',monospace}
.icon-button:hover,.icon-button:focus-visible{border-color:rgba(120,230,255,.55);background:rgba(120,230,255,.08);outline:none}

.game-shell{
  position:relative;
  z-index:1;
  height:calc(100dvh - 72px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:18px;
  padding:18px clamp(14px,2.4vw,28px) 22px;
  max-width:1320px;
  margin:auto;
}
.play-card{
  position:relative;
  width:min(100%, calc((100dvh - 112px) * 4 / 3));
  aspect-ratio:4 / 3;
  justify-self:center;
  align-self:center;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(11,27,39,.78),rgba(4,12,19,.9));
  box-shadow:0 25px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.025);
}
#game{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  touch-action:none;
  cursor:none;
}
.status-pill{
  position:absolute;
  top:14px;
  left:14px;
  pointer-events:none;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(2,10,16,.55);
  backdrop-filter:blur(10px);
  color:#c6d9e3;
  font:500 9px 'DM Mono',monospace;
  letter-spacing:.04em;
}
.power-strip{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);display:flex;gap:7px;pointer-events:none;white-space:nowrap}
.power-chip{padding:6px 9px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(3,12,18,.72);font:500 9px 'DM Mono',monospace;letter-spacing:.03em;color:#dff7ff;box-shadow:0 6px 18px rgba(0,0,0,.15)}

.help-card{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  padding:23px 20px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--panel);
  backdrop-filter:blur(18px);
}
.help-card p{margin:9px 0;color:#b5c8d2;font-size:12px;line-height:1.55}
.help-card b{color:#fff;font-weight:600}
.power-key{display:grid;gap:8px}
.power-key .eyebrow{margin-bottom:4px}
.power-key span{display:flex;align-items:center;gap:8px;color:#b5c8d2;font-size:11px}
.power-key i,.power-ribbon i{display:grid;place-items:center;font-style:normal;font:600 10px 'DM Mono',monospace;color:#061018;background:linear-gradient(135deg,var(--cyan),var(--mint));border-radius:7px}
.power-key i{width:23px;height:23px;flex:0 0 23px}
.help-card .tiny{font-size:10px;color:#708895;line-height:1.55}

.overlay{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:24px;background:rgba(2,8,13,.72);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .18s ease}
.overlay.visible{opacity:1;pointer-events:auto}
.overlay[hidden]{display:none}
.menu-card{width:min(560px,100%);padding:clamp(30px,5vw,52px);border:1px solid rgba(145,224,255,.2);border-radius:28px;background:linear-gradient(160deg,rgba(13,31,45,.98),rgba(7,17,26,.98));box-shadow:0 35px 100px rgba(0,0,0,.45);text-align:center}
.menu-card h1,.menu-card h2{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.035em;margin:12px 0 16px}
.menu-card h1{font-size:clamp(55px,11vw,88px);line-height:.9}
.menu-card h2{font-size:clamp(38px,8vw,55px);line-height:1}
.menu-card>p:not(.eyebrow){max-width:460px;margin:0 auto 25px;color:#afc5d0;font-size:14px;line-height:1.7}
.menu-card.compact{width:min(490px,100%)}
.power-ribbon{display:flex;justify-content:center;gap:8px;margin:25px 0 28px}
.power-ribbon i{width:34px;height:34px;border-radius:10px;box-shadow:0 0 24px rgba(120,230,255,.12)}
.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:47px;padding:0 20px;border-radius:999px;cursor:pointer;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.01em}
.primary-button{border:1px solid var(--cyan);background:linear-gradient(135deg,var(--cyan),var(--mint));color:#051017;box-shadow:0 8px 35px rgba(120,230,255,.14)}
.primary-button:hover,.primary-button:focus-visible{filter:brightness(1.08);outline:none;transform:translateY(-1px)}
.secondary-button{border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.04);color:#fff}
.secondary-button:hover,.secondary-button:focus-visible{border-color:rgba(120,230,255,.5);outline:none}
.home-link{display:block;width:max-content;margin:17px auto 0;color:var(--muted);font:500 10px 'DM Mono',monospace;text-underline-offset:4px}
.menu-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:27px}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:27px 0 8px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line)}
.results>div{padding:17px 10px;background:rgba(5,15,23,.9)}
.results span{display:block;color:var(--muted);font:500 9px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}
.results strong{display:block;margin-top:5px;font:500 18px 'DM Mono',monospace}

@media(max-width:900px){
  .game-shell{grid-template-columns:1fr;padding-bottom:14px}
  .help-card{display:none}
  .desktop-stat{display:none!important}
  #game{cursor:default}
}
@media(max-width:640px){
  .game-header{height:64px;grid-template-columns:1fr auto auto;gap:10px;padding:8px 10px}
  .brand-mark{width:34px;height:34px}
  .brand-copy span{display:none}
  .header-stats{gap:12px}
  .header-stats>span{min-width:40px}
  .header-stats strong{font-size:14px}
  .header-stats small{font-size:8px}
  .icon-button{width:38px;height:38px}
  .game-shell{height:calc(100dvh - 64px);padding:8px}
  .play-card{border-radius:17px}
  .status-pill{top:9px;left:9px;padding:6px 8px}
  .power-strip{bottom:9px;max-width:90%;overflow:hidden}
  .power-chip{font-size:8px;padding:5px 7px}
  .menu-card{border-radius:22px;padding:30px 22px}
}
@media(max-width:420px){
  .brand-copy strong{font-size:16px}
  .header-stats{gap:7px}
  .header-stats>span{min-width:34px}
  .header-stats small{font-size:7px}
  .header-stats strong{font-size:13px}
  .power-ribbon{gap:6px}
  .power-ribbon i{width:31px;height:31px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}