:root{
  --accent:#00f0ff; --accent2:#ff2bd6; --ball:#ffd60a; --violet:#b48cff;
  --gridRgb:0,240,255;
  --bgA:#101a3d; --bgB:#04060f;
  --courtA:#070b1c; --courtB:#0b1230;
  --text:#cfe9ff; --dim:#5f7ba6; --ink:#04060f;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ height:100%; }
body{
  font-family:'Rajdhani',sans-serif; color:var(--text);
  background:radial-gradient(1200px 700px at 50% -10%, var(--bgA) 0%, var(--bgB) 60%);
  overflow-x:hidden; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  touch-action:manipulation;
}
.gridFloor{
  position:fixed; left:-20%; right:-20%; bottom:-6%; height:46vh;
  background:
    repeating-linear-gradient(90deg, rgba(var(--gridRgb),.14) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(var(--gridRgb),.14) 0 1px, transparent 1px 44px);
  transform:perspective(420px) rotateX(62deg); transform-origin:top center;
  animation:gridScroll 2.6s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 35%);
  mask-image:linear-gradient(to bottom, transparent, #000 35%);
  pointer-events:none; z-index:0;
}
@keyframes gridScroll{ to{ background-position:0 0, 0 44px; } }
.horizon{
  position:fixed; left:0; right:0; bottom:40vh; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent2), var(--accent), transparent);
  filter:blur(1px); opacity:.5; pointer-events:none; z-index:0;
}
.scanlines{
  position:fixed; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  pointer-events:none; z-index:50; mix-blend-mode:overlay;
}
.fpsMeter{
position:fixed; left:10px;
bottom:calc(10px + env(safe-area-inset-bottom, 0px));
z-index:60;
font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700;
letter-spacing:1px; color:#6bff8e;
background:rgba(4,6,15,.55); border:1px solid rgba(255,255,255,.14);
border-radius:4px; padding:4px 9px;
pointer-events:none; user-select:none; -webkit-user-select:none;
}
.fpsMeter.warn{ color:#ff9e3d; }
.fpsMeter.bad{ color:#ff4d6d; }
.vignette{
  position:fixed; inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
  pointer-events:none; z-index:40;
}
header{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px 8px; gap:16px; flex-wrap:nowrap;
  min-width:0;
}
.brand{
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:26px;
  letter-spacing:3px; color:var(--accent); text-shadow:0 0 14px var(--accent);
  animation:brandPulse 3s ease-in-out infinite;
  white-space:nowrap;
}
.brand b{ color:var(--accent2); text-shadow:0 0 14px var(--accent2); }
@keyframes brandPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.75; } }
.score{
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:40px;
  display:flex; align-items:center; gap:18px; line-height:1;
  white-space:nowrap;
  flex-shrink:0;
}
.score .p, .score .a{
  min-width:1.4em; display:inline-block; text-align:center;
}
.score .p{ color:var(--accent); text-shadow:0 0 18px var(--accent); }
.score .a{ color:var(--accent2); text-shadow:0 0 18px var(--accent2); }
.score .vs{ color:var(--dim); font-size:26px; }
.score span.bump{ animation:bump .35s ease; }
@keyframes bump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.5); } 100%{ transform:scale(1); } }

button{
  font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:2px;
  font-size:13px; color:var(--accent);
  background:rgba(255,255,255,.04); border:1px solid var(--accent);
  padding:10px 18px; cursor:pointer; border-radius:4px; transition:all .18s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
button:hover{ box-shadow:0 0 18px var(--accent); transform:translateY(-2px); }
button:active{ transform:translateY(0); }
button.magenta{ color:var(--accent2); border-color:var(--accent2); }
button.magenta:hover{ box-shadow:0 0 18px var(--accent2); }
button.big{ font-size:16px; padding:14px 34px; }
button.warn{ color:var(--ball); border-color:var(--ball); }
button.warn:hover{ box-shadow:0 0 18px var(--ball); }
button.ghost{ color:var(--dim); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.02); }
button.ghost:hover{ color:var(--accent); border-color:var(--accent); box-shadow:0 0 16px var(--accent); }
button.sett{ color:var(--violet); border-color:rgba(180,140,255,.55); background:rgba(180,140,255,.06); }
button.sett:hover{ color:#e2d4ff; border-color:var(--violet); box-shadow:0 0 20px rgba(180,140,255,.65); background:rgba(180,140,255,.14); }

main{
  position:relative; z-index:10; flex:1;
  display:flex; justify-content:center; align-items:flex-start;
  padding:14px 28px 30px;
}
.stage{ width:100%; max-width:1120px; display:flex; justify-content:center; align-items:flex-start; }
.playArea{ display:flex; gap:12px; align-items:center; justify-content:center; }
.playArea.vertField{ flex-direction:column; }
.playArea.vertField #trackRight{ order:1; }
.playArea.vertField .canvasWrap{ order:2; }
.playArea.vertField #trackLeft{ order:3; }
.playArea.horizField{ flex-direction:row; }
.playArea.horizField #trackLeft{ order:1; }
.playArea.horizField .canvasWrap{ order:2; }
.playArea.horizField #trackRight{ order:3; }

.canvasWrap{ position:relative; line-height:0; }
canvas{
  display:block; border:1px solid rgba(var(--gridRgb),.4); border-radius:8px;
  background:linear-gradient(180deg, var(--courtA), var(--courtB));
  box-shadow:0 0 40px rgba(var(--gridRgb),.18), inset 0 0 60px rgba(0,0,0,.5);
  touch-action:none; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;
}

.sliderTrack{
  position:relative; border-radius:10px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 14px rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.playArea.live .sliderTrack{ opacity:1; pointer-events:auto; }
.playArea.noTouch .sliderTrack{ display:none; }
.playArea.pve #trackRight{ display:none; }
.playArea.vertField .sliderTrack{ height:46px; }
.playArea.horizField .sliderTrack{ width:46px; }
.sliderThumb{
  position:absolute; border-radius:8px;
  transition:filter .12s ease, box-shadow .12s ease;
}
.playArea.vertField .sliderThumb{
  top:50%; transform:translateY(-50%); height:62%; width:25%;
}
.playArea.horizField .sliderThumb{
  left:50%; transform:translateX(-50%); width:62%; height:25%;
}
#trackLeft .sliderThumb{
  background:linear-gradient(180deg, rgba(255,255,255,.55), var(--accent));
  box-shadow:0 0 16px var(--accent), inset 0 0 8px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.5);
}
#trackRight .sliderThumb{
  background:linear-gradient(180deg, rgba(255,255,255,.55), var(--accent2));
  box-shadow:0 0 16px var(--accent2), inset 0 0 8px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.5);
}
.sliderTrack.hit .sliderThumb{ filter:brightness(1.9); }
#trackLeft.hit .sliderThumb{ box-shadow:0 0 30px var(--accent), 0 0 12px #fff; }
#trackRight.hit .sliderThumb{ box-shadow:0 0 30px var(--accent2), 0 0 12px #fff; }

.overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  justify-content:safe center;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  gap:20px; background:rgba(4,6,15,.93);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border-radius:8px; text-align:center; padding:26px;
  line-height:1.5;
}
.overlay > *{ flex-shrink:0; }
.overlay.hidden{ display:none; }
.overlay h1{
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size:clamp(28px,4.5vw,46px); letter-spacing:4px; color:var(--accent);
  line-height:1.1;
  text-shadow:0 0 22px currentColor, 0 3px 10px rgba(0,0,0,.9);
}
.overlay h1 .mg{ color:var(--accent2); text-shadow:0 0 22px var(--accent2), 0 3px 10px rgba(0,0,0,.9); }
.overlay h1.win{ color:var(--ball); text-shadow:0 0 22px var(--ball), 0 3px 10px rgba(0,0,0,.9); }
.overlay p{
  color:var(--dim); font-size:16px; font-weight:500; letter-spacing:1px;
  line-height:1.5; text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.overlay .keys{ color:var(--text); }
.overlay .subline{
  color:#eaf6ff; font-size:19px; font-weight:700; letter-spacing:1.5px;
  line-height:1.5;
  text-shadow:0 2px 12px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.9);
}
.overlay .finalScore{
  font-family:'Orbitron',sans-serif; font-size:30px; font-weight:700;
  color:#fff; letter-spacing:4px; margin-top:2px;
  text-shadow:0 0 16px rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.95);
}
.modTags{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; max-width:460px; min-height:24px; }
.modTag{
  font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:1.5px;
  padding:4px 9px; border-radius:20px; color:var(--ink);
  background:var(--accent); box-shadow:0 0 12px var(--accent);
  animation:tagIn .3s ease;
}
.modTag.none{ color:var(--dim); background:transparent; box-shadow:none; border:1px dashed rgba(255,255,255,.2); }
@keyframes tagIn{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
.overlay .btnRow{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.pauseGrid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  width:100%; max-width:540px;
}
.pauseGrid button{ width:100%; }
.pauseGrid .span2{ grid-column:1 / -1; }

.fullscreen{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(28px,7vh,84px) 24px 40px;
  background:radial-gradient(1200px 700px at 50% -10%, var(--bgA) 0%, var(--bgB) 62%);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:fadeIn .2s ease;
}
.fullscreen.hidden{ display:none; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.settingsInner{ width:min(760px,96vw); text-align:center; }
.settingsInner > h1{
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size:clamp(28px,5vw,46px); letter-spacing:5px; color:#eaf6ff;
  text-shadow:0 0 26px var(--accent), 0 3px 12px rgba(0,0,0,.9);
}
.tabs{ display:flex; gap:8px; justify-content:center; margin:20px 0 28px; flex-wrap:wrap; }
.tabs button{
  font-size:13px; letter-spacing:2px; color:var(--dim);
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.18);
  padding:11px 26px; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.tabs button:hover{ box-shadow:0 0 12px var(--accent); }
.tabs button.on{
  color:var(--accent); border-color:var(--accent);
  background:rgba(0,240,255,.07); box-shadow:0 0 18px var(--accent);
}
.tabPane{ text-align:left; max-width:660px; margin:0 auto; }
.tabPane.hidden{ display:none; }
.sblock{ padding:17px 6px; border-bottom:1px solid rgba(255,255,255,.07); }
.sblock .slabel{ display:block; font-weight:700; font-size:18px; letter-spacing:.5px; color:var(--text); margin-bottom:11px; }
.sblock .row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:13px; }
.sblock .row .slabel{ display:inline; margin-bottom:0; }
.sblock .shint{ color:var(--dim); font-size:13px; margin-top:10px; line-height:1.4; }
.sblock output{
  font-family:'Orbitron',sans-serif; color:var(--ball);
  text-shadow:0 0 10px var(--ball); font-size:18px; font-weight:700;
}
.seg{ display:flex; gap:6px; flex-wrap:wrap; }
.seg button{
  flex:1; min-width:64px; font-size:11px; padding:9px 6px; letter-spacing:1px;
  color:var(--dim); border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.03);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.seg button:hover{ box-shadow:0 0 10px var(--accent); }
.seg button.on{
  color:var(--ink); background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 14px var(--accent); font-weight:700;
}
#s_fieldSeg button{ display:flex; flex-direction:column; gap:1px; padding:8px 6px; }
.fsName{ font-size:11px; letter-spacing:1px; }
.fsDim{ font-size:9px; letter-spacing:.5px; opacity:.6; font-family:'Rajdhani',sans-serif; font-weight:600; }
.fsAutoRes{ font-size:10px; letter-spacing:.5px; opacity:.9; font-family:'Orbitron',sans-serif; font-weight:700; color:var(--ink); white-space:nowrap; }
.seg button.on .fsDim{ opacity:.9; }
.swatches{ display:flex; gap:12px; flex-wrap:wrap; }
.swatch{
  width:34px; height:34px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25); padding:0; transition:all .18s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.swatch:hover{ transform:scale(1.15); box-shadow:0 0 14px rgba(255,255,255,.4); }
.swatch.on{ border-color:#fff; transform:scale(1.12); box-shadow:0 0 16px rgba(255,255,255,.6); }
.backBtn{ margin-top:30px; }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2)); outline:none; cursor:pointer;
  touch-action:manipulation;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--ball); border:2px solid var(--ink);
  box-shadow:0 0 14px var(--ball); transition:transform .15s ease;
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.25); }
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--ball);
  border:2px solid var(--ink); box-shadow:0 0 14px var(--ball);
}

.modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(2,4,10,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:fadeIn .2s ease;
}
.modal.hidden{ display:none; }
.modalBox{
  width:min(560px, 96vw); max-height:90vh; max-height:90dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg, rgba(12,18,40,.98), rgba(7,10,24,.98));
  border:1px solid var(--accent2); border-radius:12px;
  box-shadow:0 0 50px rgba(255,43,214,.35), inset 0 0 40px rgba(0,0,0,.5);
  padding:26px 26px 22px;
  animation:popIn .25s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes popIn{ from{ transform:scale(.9) translateY(12px); opacity:0; } to{ transform:scale(1) translateY(0); opacity:1; } }
.modalBox h2{
  font-family:'Orbitron',sans-serif; font-size:20px; letter-spacing:3px;
  color:var(--accent2); text-shadow:0 0 16px var(--accent2); margin-bottom:4px;
}
.modalBox .msub{ color:var(--dim); font-size:14px; margin-bottom:18px; letter-spacing:.5px; line-height:1.4; }
.modRow{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 14px; margin-bottom:9px; border-radius:8px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  transition:border-color .18s ease, background .18s ease;
}
.modRow:hover{ border-color:rgba(0,240,255,.4); background:rgba(0,240,255,.05); }
.modRow.active{ border-color:var(--accent); box-shadow:0 0 16px rgba(0,240,255,.18); }
.modInfo{ flex:1; }
.modInfo .mt{
  font-family:'Orbitron',sans-serif; font-size:13px; letter-spacing:1.5px;
  color:var(--text); text-transform:uppercase;
}
.modInfo .md{ color:var(--dim); font-size:12.5px; line-height:1.35; margin-top:3px; }
.switch{ position:relative; width:52px; height:28px; flex:0 0 auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; inset:0; cursor:pointer; border-radius:20px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  transition:all .22s ease;
}
.slider:before{
  content:''; position:absolute; height:20px; width:20px; left:3px; top:3px;
  border-radius:50%; background:var(--dim); transition:all .22s ease;
}
.switch input:checked + .slider{ background:rgba(0,240,255,.25); border-color:var(--accent); box-shadow:0 0 14px rgba(0,240,255,.5); }
.switch input:checked + .slider:before{ transform:translateX(24px); background:var(--accent); box-shadow:0 0 10px var(--accent); }
.modalActions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.modalActions button{ flex:1; min-width:120px; }

.coinScene{
  width:160px; height:160px; perspective:900px;
  cursor:pointer; touch-action:none; user-select:none; margin:4px 0;
}
.coin{
  width:160px; height:160px; position:relative;
  transform-style:preserve-3d;
  transform:rotateX(22deg) rotateY(-22deg);
}
.coinFace{
  position:absolute; inset:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden;
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:18px; letter-spacing:1px;
  white-space:nowrap;
  border:3px solid rgba(255,255,255,.6);
}
.coinFront{
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.5), transparent 58%), var(--accent);
  color:var(--ink);
  box-shadow:0 0 34px var(--accent), inset 0 0 26px rgba(0,0,0,.32);
}
.coinBack{
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.5), transparent 58%), var(--accent2);
  color:var(--ink);
  box-shadow:0 0 34px var(--accent2), inset 0 0 26px rgba(0,0,0,.32);
}
.coinRim{
  position:absolute; inset:0; border-radius:50%;
  backface-visibility:visible;
  background:linear-gradient(180deg, rgba(255,255,255,.5), var(--accent) 30%, var(--accent2) 70%, rgba(0,0,0,.45));
  border:1px solid rgba(255,255,255,.35);
}
.coinResult{
  font-family:'Orbitron',sans-serif; font-size:18px; letter-spacing:2px;
  min-height:26px; max-width:92%; color:var(--ball); text-shadow:0 0 14px var(--ball);
}
.coinHint{ color:var(--dim); font-size:14px; letter-spacing:.5px; max-width:92%; }

.splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(1200px 700px at 50% -10%, var(--bgA) 0%, var(--bgB) 60%);
  transition:opacity 0.5s ease;
  min-height:100dvh;
}
.splash.hidden{
  opacity:0;
  pointer-events:none;
}
.splash h1{
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size:clamp(32px,8vw,120px); letter-spacing:2px;
  color:var(--accent); text-shadow:0 0 40px var(--accent), 0 0 80px var(--accent);
  animation:splashPulse 1.5s ease-in-out infinite;
  margin-bottom:60px;
  text-align:center;
  padding:0 10px;
}
.splash h1 b{
  color:var(--accent2); text-shadow:0 0 40px var(--accent2), 0 0 80px var(--accent2);
}
@keyframes splashPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.85; transform:scale(1.02); }
}
.splashProgress{
  width:min(400px,80vw); height:8px;
  background:rgba(255,255,255,0.1); border-radius:4px;
  overflow:hidden; border:1px solid rgba(255,255,255,0.2);
}
.splashProgressFill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow:0 0 20px var(--accent);
  transition:width 0.3s ease;
}

.tutorial{
  position:fixed; inset:0; z-index:9998;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(4,6,15,0.95);
  transition:opacity 0.5s ease;
}
.tutorial.hidden{
  opacity:0;
  pointer-events:none;
}
.tutorialText{
  font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:clamp(24px,5vw,48px); letter-spacing:3px;
  color:var(--accent); text-shadow:0 0 20px var(--accent);
  margin-bottom:40px;
  text-align:center;
}
.tutorialArrow{
  width:60px; height:60px;
  border:3px solid var(--accent);
  border-radius:50%;
  animation:tutorialPulse 1s ease-in-out infinite;
  position:relative;
}
.tutorialArrow::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:0; height:0;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:20px solid var(--accent);
}
@keyframes tutorialPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.2); opacity:0.7; }
}

@media (max-width:520px){
  .pauseGrid{ grid-template-columns:1fr; gap:10px; }
  header{ padding:10px 14px 6px; gap:8px; flex-wrap:nowrap; }
  main{ padding:6px 10px 10px; }
  .brand{ font-size:18px; letter-spacing:2px; }
  .score{ font-size:26px; gap:10px; }
  .score .vs{ font-size:18px; }
  .score .p, .score .a{ min-width:1.3em; }
  #pauseBtn{ padding:8px 12px; font-size:11px; letter-spacing:1px; }
  main{ padding:10px 12px 20px; }
  .brand{ font-size:18px; letter-spacing:2px; }
  .score{ font-size:26px; gap:10px; }
  .score .vs{ font-size:18px; }
  .score .p, .score .a{ min-width:1.3em; }
  .overlay{ padding:14px; gap:12px; }
  .overlay h1{ font-size:30px; letter-spacing:3px; }
  button.big{ font-size:13px; padding:11px 16px; letter-spacing:1.5px; }
  .modTag{ font-size:9px; padding:3px 7px; letter-spacing:1px; }
  .coinScene{ width:120px; height:120px; }
  .coin{ width:120px; height:120px; }
  .coinFace{ font-size:14px; }
  .coinResult{ font-size:14px; letter-spacing:1.5px; }
  .coinHint{ font-size:13px; }
  .splash h1{ letter-spacing:1px; }
}
@media (max-width:520px) and (orientation:portrait){
  main{ align-items:flex-start; padding:4px 8px 8px; }
  .stage{ max-width:100vw; }
  .playArea{ gap:6px; }
  .playArea.vertField .sliderTrack{ height:34px; }
  .playArea.horizField .sliderTrack{ width:34px; }
}
@media (max-width:380px){
  .splash h1{ font-size:clamp(24px,7vw,80px); letter-spacing:0px; }
  header{ padding:8px 10px 4px; }
  .brand{ font-size:16px; letter-spacing:1px; }
  .score{ font-size:22px; gap:8px; }
  button.big{ font-size:12px; padding:10px 14px; }
}
@media (max-width:380px){
  .splash h1{
    font-size:clamp(24px,7vw,80px);
    letter-spacing:0px;
  }
}

/* слабый режим от губернатора: body.lowFx вешает main.js */
body.lowFx .gridFloor{ animation: none; }
body.lowFx .scanlines{ display: none; }
body.lowFx .overlay, body.lowFx .modal{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* сетку переносим на композитор */
.gridFloor{ will-change: transform; }
@keyframes gridScroll{
  from{ transform: perspective(420px) rotateX(62deg) translateY(0); }
  to{ transform: perspective(420px) rotateX(62deg) translateY(44px); }
}

/* на тач-устройствах blend-оверлей сканлайнов несоразмерно дорог */
@media (pointer: coarse){
  .scanlines{ mix-blend-mode: normal; opacity: .5; }
}