:root{
  --bg:#050814;
  --bg2:#02040a;
  --panel:rgba(12,18,34,.92);
  --panel2:rgba(10,14,28,.82);
  --text:#eef4ff;
  --muted:#9db5d9;
  --cyan:#65f4ff;
  --pink:#ff4fd8;
  --violet:#9d7bff;
  --amber:#ffb547;
  --good:#74ffad;
  --danger:#ff5b76;
  --shadow:0 20px 44px rgba(0,0,0,.48);
  --radius:24px;
  --controlHeight:min(30svh, 260px);
  --hudH:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:var(--bg2);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;}
body{overflow:hidden;letter-spacing:.01em;}
button,select,input{font:inherit;}
button{cursor:pointer;}
input,select,button{touch-action:manipulation;}
.app{
  position:relative;
  width:100%;
  height:100%;
  min-height:100svh;
  overflow:hidden;
  touch-action:none;
  background:
    radial-gradient(circle at 18% 12%, rgba(101,244,255,.16), transparent 22%),
    radial-gradient(circle at 78% 16%, rgba(255,79,216,.14), transparent 24%),
    radial-gradient(circle at 48% 68%, rgba(157,123,255,.12), transparent 34%),
    linear-gradient(180deg, #060916 0%, #02040b 48%, #010208 100%);
}
.app::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, transparent 0%, rgba(101,244,255,.05) 68%, transparent 100%);
  opacity:.4;
  mix-blend-mode:screen;
}
.app::after{
  content:"";
  position:absolute; left:-12%; right:-12%; bottom:28%; height:22%;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent, rgba(255,79,216,.04)),
    repeating-linear-gradient(90deg, rgba(101,244,255,.1) 0 2px, transparent 2px 30px),
    linear-gradient(0deg, rgba(101,244,255,.18), rgba(101,244,255,0));
  transform:perspective(420px) rotateX(72deg);
  opacity:.22;
}
.bgfx,.bgpulse{position:absolute; inset:0; pointer-events:none;}
.bgfx::before,.bgfx::after{
  content:"";
  position:absolute; inset:-18%;
  background:conic-gradient(from 0deg, transparent 0 48deg, rgba(101,244,255,.14) 88deg, transparent 162deg, rgba(255,79,216,.12) 224deg, transparent 298deg, rgba(157,123,255,.15) 334deg, transparent 360deg);
  filter:blur(86px) saturate(130%);
  animation:swirl 18s linear infinite;
  opacity:.82;
}
.bgfx::after{animation-duration:26s; animation-direction:reverse; transform:scale(1.16);}
.bgpulse{
  background:radial-gradient(circle at center, rgba(255,255,255,.08), transparent 30%), radial-gradient(circle at center, rgba(101,244,255,.06), transparent 52%);
  opacity:var(--pulseOpacity,.1);
  transform:scale(var(--pulseScale,1));
  transition:opacity .18s ease, transform .18s ease;
}
@keyframes swirl{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.shell{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  gap:10px;
  padding:max(env(safe-area-inset-top),10px) 10px max(env(safe-area-inset-bottom),10px);
}
.topbar{
  min-height:var(--hudH);
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:8px;
}
.hudgroup{display:flex;gap:8px;min-width:0;align-items:stretch;}
.hud-left{flex:1 1 auto;min-width:0;}
.hud-right{flex:0 1 auto;min-width:0;}
.card,.zone,.panel,.setting-row,.toast{
  position:relative;
  background:linear-gradient(180deg, rgba(18,24,44,.9), rgba(8,11,24,.94));
  border:1px solid rgba(101,244,255,.14);
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03), var(--shadow), 0 0 34px rgba(101,244,255,.06);
  backdrop-filter:blur(14px);
}
.modepill,.stat{display:flex;flex-direction:column;justify-content:center;min-width:0;overflow:hidden;}
.modepill{padding:10px 12px;min-width:0;max-width:100%;}
.brandpill{min-width:104px;}
.stat{padding:8px 10px;min-width:70px;}
.stat.compact{min-width:58px;}
.label{font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.12em;color:#a7d7ff;}
.value{font-size:18px;font-weight:800;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 14px rgba(101,244,255,.12);}
.modepill .value{font-size:20px;letter-spacing:.04em;}
.main{flex:1;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:0;}
.play-area{
  min-height:0;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 76px;
  gap:10px;
  align-items:center;
}
.zone-meter-wrap,.sidepanel{display:flex;flex-direction:column;gap:10px;min-height:0;}
.zone-meter{flex:1;min-height:0;padding:6px;}
.zone-bar{position:absolute;inset:8px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));overflow:hidden;}
.zone-fill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(180deg, rgba(101,244,255,.32), rgba(255,255,255,.98) 65%, rgba(255,79,216,.78));box-shadow:0 0 20px rgba(255,255,255,.65), 0 0 44px rgba(101,244,255,.5) inset, 0 0 28px rgba(255,79,216,.24);transition:height .12s linear, filter .2s ease;}
.zone-fill.pulse{animation:zonePulse .8s ease-in-out infinite alternate;}
@keyframes zonePulse{from{filter:brightness(1)}to{filter:brightness(1.45)}}
.zone-label{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) rotate(-90deg);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#a7d7ff;pointer-events:none;}
.board-wrap{
  position:relative;
  justify-self:center;
  align-self:center;
  width:min(100%, 100%);
  height:100%;
  max-height:100%;
  aspect-ratio:10 / 20;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(5,10,22,.92), rgba(7,10,20,.82));
  border:1px solid rgba(101,244,255,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.03), var(--shadow), 0 0 34px rgba(101,244,255,.06);
  justify-self:center;
}
.board-wrap::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 20%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(101,244,255,.04), transparent 24%, transparent 76%, rgba(255,79,216,.04));
  opacity:.68;
}
.board-wrap::after{
  content:"";
  position:absolute;left:10%;right:10%;top:14px;height:2px;
  background:linear-gradient(90deg, transparent, rgba(101,244,255,.75), transparent);
  box-shadow:0 0 16px rgba(101,244,255,.6);
  pointer-events:none;
}
.board-wrap.zone-active{transform:scale(1.01); box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 0 28px rgba(255,255,255,.22), var(--shadow);}
#boardCanvas,#fxCanvas{position:absolute; inset:0; width:100%; height:100%;}
.board-overlay{position:absolute;inset:0;pointer-events:none;}
.board-title{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;font-size:11px;color:#a7d7ff;text-transform:uppercase;letter-spacing:.16em;text-shadow:0 0 14px rgba(101,244,255,.12);}
.board-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:6px 10px;border-radius:999px;background:rgba(4,8,18,.46);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(235,243,255,.82);white-space:nowrap;max-width:calc(100% - 18px);overflow:hidden;text-overflow:ellipsis;}
.thumb-ghost{position:absolute;width:68px;height:68px;border-radius:999px;border:1px solid rgba(101,244,255,.28);background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.22), rgba(101,244,255,.06));box-shadow:0 0 30px rgba(101,244,255,.14);opacity:0;transform:translate(-50%,-50%) scale(.82);transition:opacity .12s ease, transform .12s ease;pointer-events:none;}
.thumb-ghost.active{opacity:.8;transform:translate(-50%,-50%) scale(1);}
.sidepanel{min-width:0;}
.mini{padding:8px;min-height:98px;display:flex;flex-direction:column;}
.mini .label{margin-bottom:4px;}
.mini canvas{display:block;width:100%;height:74px;}
.hudmenu{padding:10px 8px;font-size:12px;line-height:1;}
.controls{
  min-height:170px;
  height:var(--controlHeight);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.controls.one-handed{grid-template-columns:minmax(0, 1fr);}
.zone{
  overflow:hidden;
  border-radius:28px;
  touch-action:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%),
    linear-gradient(90deg, rgba(101,244,255,.08), transparent 18%, transparent 82%, rgba(255,79,216,.08)),
    radial-gradient(circle at 50% 100%, rgba(101,244,255,.14), transparent 38%),
    linear-gradient(180deg, rgba(18,24,44,.9), rgba(8,11,24,.94));
}
.zone::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, transparent, rgba(255,255,255,.03));
  mix-blend-mode:screen;
}
.zone .title{position:absolute;left:18px;top:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#a7d7ff;text-shadow:0 0 14px rgba(101,244,255,.12);}
.zone .legend{position:absolute;left:18px;bottom:16px;right:18px;font-size:12px;line-height:1.25;color:rgba(255,255,255,.86);text-shadow:0 2px 12px rgba(0,0,0,.3);}
.left-zone .grid,.right-zone .grid,.one-zone .grid{position:absolute;inset:0;display:grid;pointer-events:none;}
.left-zone .grid{grid-template-columns:repeat(10,1fr);}
.right-zone .grid{grid-template-columns:1fr 1fr;}
.one-zone .grid{grid-template-columns:30% 40% 30%;}
.grid>div{border-left:1px solid rgba(255,255,255,.05);}
.grid>div:first-child{border-left:none;}
.gesture-up{position:absolute;right:16px;top:14px;font-size:22px;color:rgba(255,255,255,.98);text-shadow:0 0 20px rgba(101,244,255,.8), 0 0 34px rgba(255,79,216,.35);opacity:0;transform:translateY(8px);transition:opacity .18s ease, transform .18s ease;pointer-events:none;}
.gesture-up.show{opacity:1;transform:translateY(0);}
.onezone-label{position:absolute;top:48px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.74);pointer-events:none;}
.onezone-label.left{left:7%;}
.onezone-label.center{left:50%;transform:translateX(-50%);}
.onezone-label.right{right:7%;}
.overlay{position:absolute;inset:0;background:rgba(3,5,11,.76);display:none;align-items:center;justify-content:center;padding:18px;z-index:50;backdrop-filter:blur(12px);}
.overlay.show{display:flex;}
.panel{width:min(560px,100%);max-height:min(92svh, 100%);overflow:auto;padding:18px;border-radius:28px;}
.menu-panel{width:min(640px,100%);}
.menu-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px;}
.menu-tabs,.btnrow,.menu-actions,.pause-actions{display:flex;gap:10px;flex-wrap:wrap;}
.menu-tabs button,.menu-actions button,.pause-actions button,.btnrow button,.modegrid button,.worldgrid button,.hudmenu,.menu-tab{
  border:none;color:var(--text);cursor:pointer;border-radius:16px;padding:12px 14px;font-weight:700;
  background:linear-gradient(180deg, rgba(17,22,44,.9), rgba(9,12,24,.95));
  border:1px solid rgba(101,244,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 0 18px rgba(101,244,255,.05);
}
button.primary,.menu-tab.active{background:linear-gradient(135deg, rgba(101,244,255,.28), rgba(255,79,216,.18) 55%, rgba(157,123,255,.26));}
button.ghost{background:rgba(255,255,255,.04);}
button:hover,button:active,select:hover{filter:brightness(1.06);}
h1,h2,h3,p{margin:0;}
h1,h2{letter-spacing:.08em;text-shadow:0 0 14px rgba(101,244,255,.12);}
.sub,.small,.tiny{color:#a4bfe5;}
.tiny{font-size:11px;}
.menu-page{display:none;gap:14px;}
.menu-page.active{display:grid;}
.menu-block{display:grid;gap:10px;}
.compact-block{padding-top:4px;}
.section-title{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#a7d7ff;}
.modegrid,.worldgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.modegrid button,.worldgrid button{min-width:0;}
.settingslist{display:grid;gap:10px;}
.setting-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;min-height:56px;
}
.setting-row input[type="checkbox"]{transform:scale(1.15);}
.setting-row span{font-weight:600;}
.setting-row select{
  min-width:88px;
  border:none;color:var(--text);cursor:pointer;border-radius:14px;padding:10px 12px;
  background:linear-gradient(180deg, rgba(17,22,44,.9), rgba(9,12,24,.95));
  border:1px solid rgba(101,244,255,.18);
}
.pause-panel,.summary-panel,.compact-warning{text-align:left;}
.compact-scoreline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0;color:#cfe0fb;}
.center-row{justify-content:center;}
.landscape-lock{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,4,10,.96);z-index:60;padding:20px;text-align:center;}
.landscape-lock.show{display:flex;}
.stars{margin:10px 0 4px;font-size:22px;letter-spacing:.2em;color:#ffd166;}
.toast{position:absolute;left:50%;top:88px;transform:translateX(-50%) translateY(-12px);padding:10px 14px;border-radius:999px;background:rgba(6,10,20,.9);border:1px solid rgba(101,244,255,.16);color:#eaf7ff;letter-spacing:.12em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:30;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.hidden{display:none !important;}
body.high-contrast{
  --text:#fff;
  --muted:#d4def6;
  --panel:rgba(0,0,0,.92);
  --panel2:rgba(0,0,0,.88);
  --cyan:#fff44d;
  --violet:#00f0ff;
  --good:#afff2b;
}
body.high-contrast .card,body.high-contrast .zone,body.high-contrast .panel,body.high-contrast .setting-row{border-color:rgba(255,255,255,.42);box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 18px 40px rgba(0,0,0,.55);}
body.motion-reduced .bgfx::before,body.motion-reduced .bgfx::after,body.motion-reduced .zone-fill.pulse{animation:none !important;}
body.large-zones{--controlHeight:min(38svh,320px);}
@media (max-width: 760px){
  .panel{padding:16px;}
  .topbar{min-height:58px;}
  .value{font-size:16px;}
  .modepill .value{font-size:18px;}
  .hud-left .worldstat{display:none;}
}
@media (max-width: 560px){
  :root{--controlHeight:min(28svh,220px); --hudH:56px;}
  .shell{padding:max(env(safe-area-inset-top),8px) 8px max(env(safe-area-inset-bottom),8px);gap:8px;}
  .topbar{flex-wrap:wrap;gap:6px;}
  .hud-left,.hud-right{width:100%;}
  .hudgroup{gap:6px;}
  .brandpill{flex:1 1 auto;min-width:0;}
  .stagestat{display:none;}
  .scorestat{flex:1 1 auto;min-width:0;}
  .play-area{grid-template-columns:42px minmax(0,1fr) 64px;gap:8px;}
  .mini{min-height:84px;padding:6px;}
  .mini canvas{height:58px;}
  .board-hint{font-size:9px;bottom:8px;}
  .zone .legend{font-size:11px;}
  .onezone-label{font-size:10px;top:46px;}
  .menu-header{flex-direction:column;align-items:flex-start;}
  .menu-tabs{width:100%;}
  .menu-tabs button{flex:1 1 0;}
}
@media (max-width: 420px){
  .topbar .card{border-radius:16px;}
  .stat{padding:8px 8px;min-width:54px;}
  .label{font-size:10px;}
  .value{font-size:15px;}
  .play-area{grid-template-columns:38px minmax(0,1fr) 56px;}
  .zone .title{font-size:10px;top:12px;}
  .zone .legend{left:14px;right:14px;bottom:14px;}
  .modegrid,.worldgrid{grid-template-columns:1fr 1fr;}
}