:root{
 --bg:#050713;--bg2:#0a1120;--panel:#10182a;--panel2:#18263d;
 --cyan:#00f6ff;--cyan2:#6dfdff;--pink:#ff3f9e;--pink2:#ff6eb6;--gold:#ffd36a;
 --text:#f3fbff;--muted:#89a5bc;--line:rgba(0,246,255,.22);--line2:rgba(255,63,158,.22);
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#050713;color:var(--text)}
body{overflow-x:hidden;background:
 linear-gradient(180deg,#03050d,#071120 45%,#040812 100%);
}
button,input,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
#app{
 min-height:100vh;position:relative;isolation:isolate;
 background:
 radial-gradient(circle at 18% 18%,rgba(0,246,255,.10),transparent 24%),
 radial-gradient(circle at 86% 14%,rgba(255,63,158,.13),transparent 24%),
 linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
}
.ambient{
 position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.8;
 background:
 linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.012) 10% 11%,transparent 11% 100%),
 repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px),
 radial-gradient(circle at 30% 30%,rgba(0,246,255,.04),transparent 28%),
 radial-gradient(circle at 70% 20%,rgba(255,63,158,.04),transparent 24%);
 mix-blend-mode:screen;
}
.topbar{
 height:78px;padding:12px clamp(18px,4vw,58px);display:flex;align-items:center;justify-content:space-between;
 border-bottom:1px solid var(--line);background:rgba(7,12,24,.74);backdrop-filter:blur(18px);
 position:sticky;top:0;z-index:20;box-shadow:0 4px 30px rgba(0,0,0,.22), inset 0 -1px 0 rgba(255,255,255,.04);
}
.brand{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:end}
.brand-mark{font-weight:1000;letter-spacing:.24em;color:var(--cyan);font-size:12px;grid-column:1/3;text-shadow:0 0 12px rgba(0,246,255,.45)}
.brand strong{font-size:23px;letter-spacing:.15em;text-shadow:0 0 18px rgba(255,63,158,.22),0 0 9px rgba(0,246,255,.18)}
.brand small{font-size:8px;color:#b7d8e9;letter-spacing:.24em;margin-bottom:4px}
.top-actions{display:flex;gap:8px}
.icon-btn,.back-btn{
 border:1px solid var(--line);color:#fff;background:linear-gradient(180deg,rgba(13,20,40,.96),rgba(7,11,22,.95));
 border-radius:12px;width:42px;height:42px;box-shadow:inset 0 0 12px rgba(0,246,255,.07),0 0 18px rgba(0,0,0,.2)
}
.icon-btn:hover,.back-btn:hover{border-color:rgba(0,246,255,.55);box-shadow:0 0 22px rgba(0,246,255,.18)}

.screen{max-width:1520px;margin:auto;padding:22px clamp(16px,3vw,48px) 42px;position:relative;z-index:1}
.home-screen{padding-top:0}
.hero-stage{
 min-height:650px;position:relative;overflow:hidden;border:1px solid var(--line);border-top:0;border-radius:0 0 30px 30px;
 background:
 linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
 url('/assets/Crimson Moon Over a Spirit-Guarded Valley.png') center/cover no-repeat,
 linear-gradient(115deg,#03060f 0%,#0d1020 45%,#050810 100%);
 box-shadow:0 25px 70px rgba(0,0,0,.35), inset 0 0 60px rgba(0,246,255,.04);
}
.hero-stage:before{
 content:"";position:absolute;inset:0;
 background:
 repeating-linear-gradient(90deg,transparent 0 52px,rgba(255,255,255,.03) 52px 53px),
 linear-gradient(180deg,rgba(0,246,255,.07),transparent 35%);
 mix-blend-mode:screen;pointer-events:none
}
.hero-stage:after{
 content:"";position:absolute;inset:auto 0 0;height:220px;background:linear-gradient(transparent,#040711 60%,#040711)
}
.moon-disc{
 position:absolute;width:470px;height:470px;border-radius:50%;left:12%;top:60px;
 background:radial-gradient(circle at 40% 35%,#ffc6dd,#ff458f 30%,#cc176d 58%,#460b28 100%);
 box-shadow:0 0 90px rgba(255,60,158,.24), 0 0 160px rgba(0,246,255,.08), inset 0 0 50px rgba(255,255,255,.08)
}
.hero-art{
 position:absolute;left:5%;bottom:-12px;height:620px;z-index:2;
 filter:drop-shadow(0 0 28px rgba(0,246,255,.18)) drop-shadow(0 0 36px rgba(255,63,158,.18))
}
.hero-copy{position:absolute;z-index:4;left:54%;top:50%;transform:translateY(-50%);max-width:570px}
.eyebrow{color:var(--cyan);font-weight:900;letter-spacing:.34em;font-size:11px;margin:0 0 11px;text-shadow:0 0 12px rgba(0,246,255,.38)}
.hero-copy h1{font-size:clamp(54px,7vw,102px);line-height:.84;margin:0 0 22px;letter-spacing:-.06em}
.hero-copy h1 span{color:var(--pink);text-shadow:0 0 28px rgba(255,63,158,.32)}
.hero-copy p:not(.eyebrow){max-width:540px;color:#d4eaf4;font-size:17px;line-height:1.68;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.primary-btn,.secondary-btn{
 height:54px;border-radius:14px;padding:0 24px;font-weight:1000;letter-spacing:.13em;margin:8px 8px 0 0
}
.primary-btn{
 border:1px solid rgba(255,63,158,.55);
 background:linear-gradient(180deg,#ff4fa8,#d21878);
 color:#fff;box-shadow:0 0 28px rgba(255,63,158,.2), inset 0 0 18px rgba(255,255,255,.08)
}
.primary-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.secondary-btn{
 border:1px solid var(--line);background:linear-gradient(180deg,rgba(10,20,38,.95),rgba(7,12,24,.95));color:#d9f8ff;
 box-shadow:inset 0 0 16px rgba(0,246,255,.05)
}
.secondary-btn:hover{border-color:rgba(0,246,255,.56)}
.feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:16px}
.feature-strip div{
 padding:18px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(14,26,46,.95),rgba(8,14,28,.96));
 border-radius:16px;display:flex;align-items:center;gap:13px;box-shadow:0 8px 24px rgba(0,0,0,.18), inset 0 0 14px rgba(0,246,255,.04)
}
.feature-strip b{color:var(--cyan);font-size:27px;text-shadow:0 0 14px rgba(0,246,255,.35)}
.feature-strip span{font-size:10px;letter-spacing:.16em;color:#cfeef8;font-weight:800}
.screen-head{display:flex;gap:18px;align-items:center;margin-bottom:25px}.screen-head h2{margin:2px 0;font-size:34px}
.level-map{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.level-card{
 position:relative;min-height:140px;border-radius:18px;border:1px solid var(--line);
 background:linear-gradient(150deg,rgba(17,27,49,.95),rgba(8,14,28,.98));padding:16px;color:#fff;text-align:left;overflow:hidden;
 box-shadow:0 15px 32px rgba(0,0,0,.24), inset 0 0 20px rgba(0,246,255,.05)
}
.level-card:before{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-28px;top:-30px;background:radial-gradient(circle,var(--pink),transparent 65%);opacity:.23}
.level-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),transparent)}
.level-card.locked{opacity:.38;filter:grayscale(.75)}
.level-card:not(.locked):hover{transform:translateY(-3px);border-color:rgba(0,246,255,.55)}
.level-card small{display:block;color:var(--cyan);letter-spacing:.18em;font-weight:900}
.level-card strong{display:block;font-size:16px;margin:8px 0 18px}
.stars{color:#ffd36a;letter-spacing:.1em;text-shadow:0 0 10px rgba(255,211,106,.32)}

.game-screen{max-width:1640px}
.game-head{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;margin-bottom:14px}
.level-meta{display:grid}
.level-meta small{font-size:9px;color:var(--cyan);letter-spacing:.24em}
.level-meta strong{font-size:18px;letter-spacing:.06em}
.score-box{text-align:right}
.score-box small{display:block;color:#9fc1d1;font-size:9px;letter-spacing:.18em}
.score-box b{font-size:25px;color:var(--pink);text-shadow:0 0 18px rgba(255,63,158,.3)}

.battle-layout{display:grid;grid-template-columns:minmax(180px,260px) minmax(580px,720px) minmax(180px,260px);gap:18px;align-items:center;justify-content:center}
.fighter-panel{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.fighter-frame{
 height:460px;position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(0,246,255,.24);
 background:
 radial-gradient(circle at 50% 34%,rgba(255,63,158,.12),transparent 40%),
 radial-gradient(circle at 50% 50%,rgba(0,246,255,.10),rgba(4,9,19,.94) 65%),
 linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
 box-shadow:inset 0 0 65px rgba(0,246,255,.07),0 14px 36px rgba(0,0,0,.28),0 0 25px rgba(0,246,255,.06)
}
.fighter-frame:before{
 content:"";position:absolute;inset:0;
 background:
 linear-gradient(90deg,transparent 0 20%,rgba(255,255,255,.03) 20% 21%,transparent 21% 100%),
 linear-gradient(180deg,rgba(0,246,255,.06),transparent 30%);
 mix-blend-mode:screen;pointer-events:none
}
.fighter-frame img{
 position:absolute;inset:auto 50% 0;transform:translateX(50%);height:96%;max-width:130%;object-fit:contain;
 filter:drop-shadow(0 0 24px rgba(0,246,255,.18)) drop-shadow(0 0 30px rgba(255,63,158,.12))
}
.fighter-name{text-align:center;margin-top:8px;font-weight:1000;letter-spacing:.14em;color:var(--cyan)}
.enemy-name{color:#ecf9ff}
.moon-meter,.enemy-health{margin-top:13px}
.moon-meter span,.enemy-health span{font-size:9px;color:#c3e3f2;letter-spacing:.18em;font-weight:900}
.moon-meter i,.enemy-health i{
 height:8px;background:#10192b;border-radius:99px;overflow:hidden;display:block;margin:5px 0;border:1px solid rgba(0,246,255,.3)
}
.moon-meter em,.enemy-health em{
 display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#68ffff,var(--pink));box-shadow:0 0 18px var(--cyan);transition:width .25s
}
.moon-meter b{float:right;font-size:10px;color:#dbfaff}
.combat-callout{text-align:center;color:var(--pink);font-weight:1000;letter-spacing:.15em;font-size:12px;min-height:22px;margin-top:12px;text-shadow:0 0 14px rgba(255,63,158,.3)}
.enemy-count{text-align:center;color:#d7eff7;font-size:11px;margin-top:8px}

.board-column{width:100%}
.objective-bar{display:grid;grid-template-columns:88px 1fr;gap:10px;margin-bottom:9px}
.moves,.objective-copy{
 border:1px solid var(--line);
 background:linear-gradient(145deg,rgba(15,26,44,.95),rgba(7,13,25,.96));
 border-radius:14px;padding:10px;
 box-shadow:inset 0 0 18px rgba(0,246,255,.05)
}
.moves{text-align:center}
.moves small,.objective-copy small{display:block;color:#bae7f5;font-size:8px;letter-spacing:.18em}
.moves b{font-size:30px;color:#fff;text-shadow:0 0 18px rgba(0,246,255,.2)}
.objective-copy strong{display:block;font-size:13px;margin:2px 0 7px}
.objective-progress{display:flex;gap:9px;align-items:center}
.objective-progress i{height:7px;background:#111b2d;flex:1;border-radius:9px;overflow:hidden;border:1px solid rgba(0,246,255,.16)}
.objective-progress em{height:100%;display:block;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width .25s;box-shadow:0 0 16px rgba(0,246,255,.32)}
.objective-progress span{font-size:9px;color:#d3f2ff}

.board-shell{
 position:relative;border-radius:24px;padding:12px;
 background:
 linear-gradient(145deg,rgba(16,28,48,.94),rgba(7,12,24,.96)),
 url('/assets/ui/board-cyber-bg.webp') center/cover no-repeat;
 border:1px solid rgba(0,246,255,.32);
 box-shadow:0 24px 65px rgba(0,0,0,.45), inset 0 0 45px rgba(0,246,255,.08), 0 0 30px rgba(0,246,255,.08)
}
.board-shell:before{
 content:"";position:absolute;inset:6px;border-radius:20px;
 background:url('/assets/ui/board-frame.webp') center/contain no-repeat;
 opacity:.5;pointer-events:none
}
.board{
 position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:5px;aspect-ratio:1;border-radius:16px;padding:8px;
 background:
 linear-gradient(180deg,rgba(10,17,33,.95),rgba(7,12,24,.96)),
 url('/assets/ui/board-cyber-bg.webp') center/cover no-repeat;
 overflow:hidden;border:1px solid rgba(0,246,255,.12)
}
.board:before{
 content:"";position:absolute;inset:0;
 background:
 repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.03) 58px 59px),
 repeating-linear-gradient(0deg,transparent 0 58px,rgba(255,255,255,.02) 58px 59px);
 opacity:.45;pointer-events:none
}
.tile{
 position:relative;min-width:0;aspect-ratio:1;border:1px solid rgba(0,246,255,.16);border-radius:14px;
 background:linear-gradient(145deg,rgba(16,24,43,.90),rgba(10,15,28,.96));
 box-shadow:inset 0 0 14px rgba(255,255,255,.03),0 2px 6px rgba(0,0,0,.45),0 0 12px rgba(0,246,255,.04);
 padding:6px;transition:transform .14s,border-color .14s,filter .14s,box-shadow .14s
}
.tile:before{
 content:"";position:absolute;inset:2px;border-radius:12px;
 background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 34%);
 pointer-events:none
}
.tile img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 12px rgba(0,246,255,.15)) drop-shadow(0 0 8px rgba(255,63,158,.08));pointer-events:none}
.tile:hover{
 border-color:rgba(0,246,255,.42);transform:scale(1.04);
 box-shadow:0 0 0 1px rgba(0,246,255,.14),0 0 22px rgba(0,246,255,.12), inset 0 0 18px rgba(255,255,255,.03)
}
.tile.selected{
 border-color:var(--pink);box-shadow:0 0 0 2px rgba(255,63,158,.26),0 0 24px rgba(255,63,158,.18), inset 0 0 15px rgba(255,255,255,.04);transform:scale(1.055)
}
.tile.curse:after{
 content:"";position:absolute;inset:3px;border-radius:11px;background:repeating-linear-gradient(135deg,rgba(255,63,158,.17) 0 4px,transparent 4px 9px);
 border:1px solid rgba(255,63,158,.55);pointer-events:none;box-shadow:0 0 14px rgba(255,63,158,.18)
}
.tile.chain:before{
 content:none;position:absolute;inset:0;display:grid;place-items:center;font-size:26px;z-index:4;text-shadow:0 0 8px #000,0 0 16px rgba(0,246,255,.3);pointer-events:none
}
.tile.special-lineH:after,.tile.special-lineV:after,.tile.special-bomb:after,.tile.special-moon:after{
 position:absolute;right:5px;top:3px;z-index:5;font-weight:1000;font-size:13px;color:#fff;text-shadow:0 0 8px var(--pink),0 0 16px var(--cyan)
}
.tile.special-lineH:after{content:"↔"}
.tile.special-lineV:after{content:"↕"}
.tile.special-bomb:after{content:"✹"}
.tile.special-moon:after{content:"●";color:#fff;font-size:18px}
.tile.clearing{animation:tileClear .30s ease-in forwards}
.tile.falling{animation:tileFall .24s ease-out}
.tile.created{animation:specialPop .42s ease-out}
@keyframes tileClear{50%{transform:scale(1.28);filter:brightness(2.6)}100%{transform:scale(.1);opacity:0}}
@keyframes tileFall{from{transform:translateY(-32%);opacity:.42}to{transform:none;opacity:1}}
@keyframes specialPop{0%{transform:scale(.6)}60%{transform:scale(1.22);filter:brightness(2)}100%{transform:none}}
.combo-burst{
 position:absolute;inset:0;display:grid;place-items:center;z-index:9;pointer-events:none;color:#fff;font-weight:1000;font-size:44px;letter-spacing:.08em;
 text-shadow:0 0 18px var(--pink),0 0 26px var(--cyan),0 4px 20px #000;animation:comboPop .7s ease-out forwards
}
@keyframes comboPop{0%{transform:scale(.5);opacity:0}30%{transform:scale(1.08);opacity:1}100%{transform:scale(1.34);opacity:0}}
.board-flash{position:absolute;inset:0;border-radius:24px;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,255,255,.38),rgba(0,246,255,.10) 34%,rgba(255,63,158,.06) 52%,transparent 72%)}
.board-flash.on{animation:flash .22s}
@keyframes flash{0%{opacity:0}45%{opacity:1}100%{opacity:0}}
.enemy-hit{
 position:absolute;inset:0;opacity:0;background:linear-gradient(125deg,transparent 42%,rgba(255,255,255,.95) 48%,rgba(0,246,255,.8) 52%,rgba(255,63,158,.65) 56%,transparent 62%);transform:translateX(-70%)
}
.enemy-hit.on{animation:enemySlash .32s ease-out}
@keyframes enemySlash{0%{opacity:0;transform:translateX(-70%)}35%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
.legend{display:flex;justify-content:center;gap:15px;margin-top:10px;color:#c2e8f5;font-size:9px;letter-spacing:.05em;flex-wrap:wrap}
.legend b{color:#fff}
.modal{position:fixed;inset:0;z-index:50;background:rgba(2,6,12,.82);display:grid;place-items:center;padding:20px;backdrop-filter:blur(12px)}
.modal-card{
 width:min(620px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:24px;padding:28px;
 background:linear-gradient(145deg,rgba(15,25,44,.96),rgba(8,12,24,.98));box-shadow:0 25px 90px #000,inset 0 0 22px rgba(0,246,255,.05);position:relative
}
.modal-close{position:absolute;right:12px;top:12px;border:0;background:transparent;color:#fff;font-size:30px}
.modal h2{font-size:35px;margin:5px 0 10px}.modal p{color:#c8e5f3;line-height:1.6}
.result-score{font-size:48px;color:var(--pink);font-weight:1000;text-shadow:0 0 16px rgba(255,63,158,.28)}
.result-stars{font-size:38px;color:var(--gold);letter-spacing:.1em;text-shadow:0 0 14px rgba(255,211,106,.24)}
.modal-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.leader-table{width:100%;border-collapse:collapse}
.leader-table td,.leader-table th{padding:9px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}
.leader-table th{color:var(--cyan);font-size:9px;letter-spacing:.15em}
.toast{
 position:fixed;left:50%;bottom:25px;z-index:80;transform:translateX(-50%);
 background:linear-gradient(145deg,rgba(15,25,44,.96),rgba(8,12,24,.98));border:1px solid var(--line);color:#fff;padding:10px 18px;border-radius:99px;font-weight:800;font-size:12px;box-shadow:0 8px 35px #000,0 0 18px rgba(0,246,255,.09)
}
.chapter-label{color:var(--cyan)!important}

@media(max-width:1180px){
 .battle-layout{grid-template-columns:160px minmax(520px,680px) 160px}
 .fighter-frame{height:360px}
 .hero-art{left:-2%}
}

/* Legacy mobile media block removed by v3.1.2 */



/* v1.2 — direct manipulation: grab, drag, swipe and slide */
.board{
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.tile{
  touch-action:none;
  -webkit-user-drag:none;
  cursor:grab;
  will-change:transform,filter;
}
.tile:active,.tile.grabbed{
  cursor:grabbing;
}
.tile.grabbed{
  border-color:rgba(255,255,255,.75);
  box-shadow:
    0 0 0 2px rgba(0,246,255,.34),
    0 0 32px rgba(0,246,255,.24),
    0 0 44px rgba(255,63,158,.18),
    inset 0 0 20px rgba(255,255,255,.08);
}
.tile.invalid-swipe{
  animation:invalidSwipe .18s ease-in-out;
}
@keyframes invalidSwipe{
  0%{transform:translateX(0)}
  30%{transform:translateX(-7px)}
  65%{transform:translateX(7px)}
  100%{transform:translateX(0)}
}
.tile img{
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}


/* v1.3 — Generated Ultra-HD Tile Art */
.tile{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.075),transparent 48%),
    linear-gradient(145deg,rgba(18,30,52,.94),rgba(8,13,27,.97));
}
.tile img{
  width:112%;
  height:112%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.18))
    drop-shadow(0 0 10px rgba(0,246,255,.24))
    drop-shadow(0 0 12px rgba(255,63,158,.18));
  transition:transform .15s ease,filter .15s ease;
}
.tile:hover img{
  transform:translate(-50%,-50%) scale(1.055);
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,.25))
    drop-shadow(0 0 14px rgba(0,246,255,.34))
    drop-shadow(0 0 18px rgba(255,63,158,.24));
}
.tile.selected img,.tile.grabbed img{
  transform:translate(-50%,-50%) scale(1.075);
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.32))
    drop-shadow(0 0 18px rgba(0,246,255,.42))
    drop-shadow(0 0 22px rgba(255,63,158,.32));
}
.tile.special-lineH img,
.tile.special-lineV img,
.tile.special-bomb img,
.tile.special-moon img{
  filter:
    brightness(1.12)
    drop-shadow(0 0 8px rgba(255,255,255,.32))
    drop-shadow(0 0 18px rgba(0,246,255,.48))
    drop-shadow(0 0 24px rgba(255,63,158,.42));
}


/* v1.4 ultimate polish */
.hero-stage{
  position:relative;
}
.hero-stage .hero-copy h1{
  text-shadow:0 0 18px rgba(255,63,158,.35),0 0 28px rgba(0,246,255,.12),0 10px 40px rgba(0,0,0,.35);
}
.hero-stage::before{
  animation:scanShift 8s linear infinite;
}
@keyframes scanShift{
  0%{background-position:0 0,0 0}
  100%{background-position:120px 0,0 0}
}
.board-shell.pulse-soft{animation:pulseSoft .26s ease-out}
.board-shell.pulse-hard{animation:pulseHard .30s ease-out}
@keyframes pulseSoft{0%{transform:scale(1)}40%{transform:scale(1.012)}100%{transform:scale(1)}}
@keyframes pulseHard{0%{transform:scale(1)}20%{transform:translateX(-3px) scale(1.015)}40%{transform:translateX(3px) scale(1.02)}100%{transform:none}}
.shake-soft{animation:shakeSoft .22s linear}
@keyframes shakeSoft{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:none}}
.damage-pop{
 position:absolute;left:50%;top:24%;transform:translateX(-50%);
 font-size:40px;font-weight:1000;color:#fff;
 text-shadow:0 0 12px rgba(255,63,158,.5),0 0 20px rgba(0,246,255,.35),0 4px 12px #000;
 animation:damageRise .7s ease-out forwards; pointer-events:none;
}
@keyframes damageRise{
 0%{opacity:0;transform:translate(-50%,18px) scale(.75)}
 15%{opacity:1}
 100%{opacity:0;transform:translate(-50%,-42px) scale(1.18)}
}
.level-intro{
 position:fixed;left:50%;top:96px;transform:translate(-50%,-22px);
 min-width:min(760px,92vw);max-width:92vw;z-index:90;
 padding:18px 26px;border-radius:20px;border:1px solid rgba(0,246,255,.35);
 background:linear-gradient(145deg,rgba(12,23,42,.94),rgba(8,13,25,.98));
 box-shadow:0 18px 60px rgba(0,0,0,.42),0 0 28px rgba(0,246,255,.10),inset 0 0 20px rgba(255,63,158,.05);
 opacity:0;transition:opacity .25s,transform .25s;
 text-align:center;pointer-events:none;
}
.level-intro.visible{opacity:1;transform:translate(-50%,0)}
.level-intro small{display:block;color:#8ffaff;letter-spacing:.3em;font-weight:900;font-size:10px;margin-bottom:7px}
.level-intro strong{display:block;font-size:26px;letter-spacing:.06em;margin-bottom:6px}
.level-intro span{display:block;color:#d2edf7;font-size:14px}
.feature-strip div{position:relative;overflow:hidden}
.feature-strip div::after{
 content:"";position:absolute;inset:auto -20% 0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,246,255,.8),rgba(255,63,158,.7),transparent);
}
.result-score{letter-spacing:.02em}
.toast{letter-spacing:.08em}


/* v1.5 — official generated RONIN Slashdown branding */
.brand-with-logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.topbar-logo{
  width:132px;
  height:52px;
  object-fit:contain;
  object-position:left center;
  filter:
    drop-shadow(0 0 7px rgba(255,50,80,.26))
    drop-shadow(0 0 9px rgba(0,165,255,.16));
}
.brand-with-logo small{
  font-size:8px;
  color:#c9eaff;
  letter-spacing:.22em;
  white-space:nowrap;
}
.hero-logo{
  display:block;
  width:min(610px,88%);
  max-height:330px;
  object-fit:contain;
  object-position:left center;
  margin:2px 0 14px;
  filter:
    drop-shadow(0 12px 20px rgba(0,0,0,.46))
    drop-shadow(0 0 20px rgba(255,25,55,.20))
    drop-shadow(0 0 18px rgba(0,120,255,.11));
}
.hero-stage{
  background:
    linear-gradient(90deg,rgba(2,5,12,.18) 0%,rgba(4,7,14,.30) 38%,rgba(2,5,12,.72) 72%,rgba(2,5,12,.87) 100%),
    url('/assets/Crimson Moon Over a Spirit-Guarded Valley.png') center/cover no-repeat !important;
}
.hero-stage::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 34%),
    radial-gradient(circle at 76% 25%,rgba(255,0,55,.08),transparent 34%) !important;
  animation:none !important;
}
.hero-stage::after{
  height:210px;
  background:linear-gradient(transparent,rgba(4,7,17,.82) 58%,#040711) !important;
}
.moon-disc{display:none}

/* Legacy mobile media block removed by v3.1.2 */



/* v1.6 SUPREME MOTION + STORY COMPLETION */
.game-screen{
  padding-top:12px;
}
.game-head{
  margin-bottom:8px;
}
.battle-layout{
  align-items:start;
  grid-template-columns:minmax(170px,245px) minmax(500px,620px) minmax(170px,245px);
  gap:16px;
}
.board-column{
  width:min(620px,calc(100vh - 215px));
  min-width:500px;
  justify-self:center;
}
.board-shell{
  width:100%;
}
.board{
  width:100%;
}
.fighter-panel{
  padding-top:109px;
}
.fighter-frame{
  height:min(430px,calc(100vh - 400px));
  min-height:330px;
}
.fighter-frame img{
  position:absolute;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  width:110%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
  opacity:.96;
}
.hero-frame img{
  object-position:center 26%;
  animation:roninIdle 5.2s ease-in-out infinite;
}
.enemy-frame img{
  object-position:center 26%;
  animation:kageIdle 4.6s ease-in-out infinite;
}
@keyframes roninIdle{
  0%,100%{transform:translateX(-50%) scale(1.015)}
  50%{transform:translateX(-50%) translateY(-5px) scale(1.025)}
}
@keyframes kageIdle{
  0%,100%{transform:translateX(-50%) scale(1.01)}
  50%{transform:translateX(-50%) translateY(-3px) scale(1.018)}
}
.enemy-panel.noncombat .enemy-frame img{
  opacity:.10;
  filter:grayscale(.5) brightness(.65);
}
.mission-glyph{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:12px;
  background:radial-gradient(circle,rgba(255,38,76,.10),rgba(0,246,255,.03) 35%,transparent 65%);
}
.mission-glyph.hidden{display:none}
.mission-glyph span{
  font-size:86px;color:#ff446f;line-height:1;
  text-shadow:0 0 22px rgba(255,40,80,.55),0 0 40px rgba(0,246,255,.18);
}
.mission-glyph small{
  color:#c8f8ff;font-size:9px;font-weight:1000;letter-spacing:.24em;
}
.tile{
  contain:layout paint;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.drag-source{
  opacity:.16 !important;
}
.drag-proxy{
  position:fixed;z-index:1000;pointer-events:none;margin:0;
  border-radius:14px;
  transform:translate3d(0,0,0) scale(1.035);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.36),
    0 12px 28px rgba(0,0,0,.45),
    0 0 30px rgba(0,246,255,.30),
    0 0 42px rgba(255,63,158,.24);
  will-change:transform;
}
.swap-target{
  transform:scale(.94) !important;
  border-color:rgba(255,255,255,.80) !important;
  box-shadow:
    inset 0 0 22px rgba(0,246,255,.16),
    0 0 24px rgba(255,63,158,.16) !important;
}
.tile.falling{
  animation:none !important;
}
.chapter-label{
  margin:18px 0 3px !important;
  padding:12px 14px;
  border-left:3px solid #00f6ff;
  background:linear-gradient(90deg,rgba(0,246,255,.07),transparent 66%);
}
.chapter-label strong{
  display:block;color:#52fbff;font-size:11px;letter-spacing:.28em;
}
.chapter-label span{
  display:block;margin-top:4px;color:#8eaab9;font-size:10px;letter-spacing:.05em;
}
.screen-head{
  align-items:center;
}
.lore-btn{
  margin-left:auto !important;
}
.lore-section{
  padding:14px 0;border-top:1px solid rgba(0,246,255,.13);
}
.lore-section small{color:#55f7ff;font-weight:900;letter-spacing:.18em}
.lore-section h3{margin:4px 0 7px;font-size:17px}
.lore-section p{margin:0}
.lore-locked{opacity:.38}
.finale{
  text-align:center;
}
.finale-logo{
  width:min(390px,82%);display:block;margin:4px auto 8px;
  filter:drop-shadow(0 0 22px rgba(255,40,72,.22));
}
.finale h2{font-size:34px;margin:4px 0 8px}
.finale h3{color:#dbfaff;font-size:16px;margin:0 0 18px}
.finale-story{
  max-width:520px;margin:0 auto 18px;padding:13px 18px;
  border-top:1px solid rgba(0,246,255,.16);
  border-bottom:1px solid rgba(255,63,158,.16);
}
.finale-story p{margin:7px 0;color:#c5dde7}
.finale-tease{
  color:#73faff;font-weight:1000;letter-spacing:.18em;font-size:11px;margin-top:16px
}
.to-be-continued{
  font-size:32px;font-weight:1000;font-style:italic;letter-spacing:.08em;
  color:#ff3f78;margin:7px 0 15px;
  text-shadow:0 0 18px rgba(255,63,120,.35);
}
.finale-actions{justify-content:center}
@media(max-width:1180px){
  .battle-layout{
    grid-template-columns:145px minmax(480px,590px) 145px;
  }
  .fighter-panel{padding-top:105px}
}

/* Legacy mobile media block removed by v3.1.2 */



/* v2.1 — Supreme Global Ronin Pointer Trail */
#roninPointerFX{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:9998;
  mix-blend-mode:screen;
  opacity:.92;
  filter:saturate(1.12) contrast(1.05);
  transform:translateZ(0);
}
@media (prefers-reduced-motion: reduce){
  #roninPointerFX{display:none!important}
}
@media (pointer:coarse){
  #roninPointerFX{opacity:.55}
}


/* v2.2 — roninslashdown.com routes + mobile-first app viewport */
.route-screen{max-width:1200px;margin:0 auto;padding:20px 24px 90px}
.route-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.route-head h2{margin:2px 0 0;font-size:clamp(25px,4vw,42px)}
.route-shell{border:1px solid rgba(73,230,255,.18);background:linear-gradient(145deg,rgba(7,13,25,.92),rgba(18,5,14,.88));border-radius:22px;box-shadow:0 28px 70px rgba(0,0,0,.42),inset 0 0 38px rgba(0,246,255,.035);padding:20px}
.route-hero{display:flex;justify-content:space-between;align-items:center;padding:18px 4px 24px;border-bottom:1px solid rgba(0,246,255,.12)}
.route-hero small,.profile-card small,.chronicle-act small,.support-card small{color:#6af7ff;font-weight:900;letter-spacing:.17em}
.route-hero h3,.profile-card h3,.chronicle-act h3,.support-card h3{margin:5px 0;font-size:23px}
.rank-medallion{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;font-size:36px;color:#ffe4a0;border:1px solid rgba(255,209,103,.35);background:radial-gradient(circle,rgba(255,203,73,.16),rgba(255,45,99,.04));box-shadow:0 0 34px rgba(255,50,100,.14)}
.leader-tabs{display:flex;gap:8px;padding:16px 0}
.leader-tabs button{flex:1;border:1px solid rgba(0,246,255,.14);background:#07111d;color:#8da8b6;border-radius:12px;padding:11px 8px;font-weight:900;font-size:10px;letter-spacing:.1em}
.leader-tabs button.active{color:#fff;border-color:#ff3e75;background:linear-gradient(135deg,rgba(255,44,103,.25),rgba(0,246,255,.08));box-shadow:0 0 20px rgba(255,40,100,.12)}
.rank-list{display:grid;gap:7px}.rank-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:11px 13px;border-radius:13px;border:1px solid rgba(0,246,255,.09);background:rgba(4,9,18,.68)}.rank-row.podium{border-color:rgba(255,78,128,.28);background:linear-gradient(90deg,rgba(255,42,101,.11),rgba(0,246,255,.04))}.rank-num{font-size:18px;color:#5df5ff}.rank-name strong{display:block}.rank-name small{color:#748c99}.rank-score{font-size:16px}.empty-state,.route-loading{text-align:center;padding:45px 15px;color:#8eabb9;font-weight:900;letter-spacing:.1em}
.profile-card{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid rgba(0,246,255,.12)}.profile-sigil{width:82px;height:82px;display:grid;place-items:center;border-radius:50%;font-size:44px;color:#ff426f;background:radial-gradient(circle,rgba(255,46,103,.2),rgba(0,246,255,.04));border:1px solid rgba(255,61,113,.35);box-shadow:0 0 34px rgba(255,36,94,.17)}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.profile-stats div{padding:15px 8px;border-radius:14px;background:#060d18;border:1px solid rgba(0,246,255,.10);text-align:center}.profile-stats b{display:block;font-size:22px;color:#fff}.profile-stats span{font-size:8px;color:#7594a3;font-weight:900;letter-spacing:.09em}.profile-shell>.primary-btn,.profile-shell>.secondary-btn{width:100%;margin-top:8px}
.chronicle-intro{padding:8px 4px 20px}.chronicle-act{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:20px 2px;border-top:1px solid rgba(0,246,255,.12)}.chronicle-act.sealed{opacity:.38}.act-index{font-size:26px;font-weight:1000;color:#ff3c72}.chronicle-act p{color:#a9c0cb;line-height:1.55}
.support-shell{display:grid;gap:12px}.support-card{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;padding:18px;border:1px solid rgba(0,246,255,.10);background:#060d18;border-radius:16px}.support-card>span{font-size:32px}.support-note{text-align:center;color:#7e9aa8;font-size:11px;margin:8px 0 0}.legal-copy{max-width:820px}.legal-copy h3{margin-top:20px;color:#67f5ff}.legal-copy p{color:#b1c8d2;line-height:1.65}
.site-footer{max-width:1200px;margin:0 auto;padding:20px 24px 28px;display:flex;justify-content:space-between;gap:18px;color:#526c79;font-size:10px;font-weight:900;letter-spacing:.1em}.site-footer nav{display:flex;gap:8px}.site-footer button{background:none;border:0;color:#6d8997;font:inherit;cursor:pointer}
.mobile-dock{display:none}


/* Legacy mobile media block removed by v3.1.2 */



/* Legacy mobile media block removed by v3.1.2 */



/* v2.3 — roninslashdown.com production site */
.support-intro,.contact-intro{padding:5px 4px 18px;border-bottom:1px solid rgba(0,246,255,.11);margin-bottom:3px}.support-intro small,.contact-intro small{color:#67f6ff;font-weight:1000;letter-spacing:.18em}.support-intro h3,.contact-intro h3{font-size:23px;margin:5px 0 7px}.support-intro p,.contact-intro p{max-width:760px;color:#abc1cb;line-height:1.55}.support-card.shield{border-color:rgba(255,210,95,.12)}.support-card button{cursor:pointer}.contact-shell{max-width:820px}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:17px}.contact-form label{display:grid;gap:7px;color:#71f6ff;font-size:9px;font-weight:1000;letter-spacing:.12em}.contact-message-label{grid-column:1/-1}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid rgba(0,246,255,.16);background:#050c17;color:#f5fbff;border-radius:13px;padding:13px 14px;font:inherit;outline:none;box-shadow:inset 0 0 22px rgba(0,246,255,.025)}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:rgba(78,239,255,.62);box-shadow:0 0 0 3px rgba(0,246,255,.06),inset 0 0 25px rgba(0,246,255,.04)}.contact-form textarea{min-height:160px;resize:vertical;line-height:1.5}.contact-form .primary-btn{grid-column:1/-1;min-height:52px}.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}.contact-status{grid-column:1/-1;min-height:22px;text-align:center;color:#7695a4;font-size:9px;font-weight:1000;letter-spacing:.08em}.contact-status.success{color:#66ffd0}.contact-status.error{color:#ff658d}.legal-updated{color:#63808e!important;font-size:9px!important;text-transform:uppercase;letter-spacing:.13em}.text-route{border:0;background:none;padding:0;color:#66f5ff;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.site-footer nav{flex-wrap:wrap;justify-content:flex-end}

/* Legacy mobile media block removed by v3.1.2 */



/* v2.4 — Production Contact + Subscriber System */
.ronin-newsletter{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);align-items:center;gap:34px;margin:24px 0 10px;padding:28px 30px;border:1px solid rgba(0,246,255,.22);border-radius:24px;background:linear-gradient(135deg,rgba(4,12,23,.94),rgba(14,7,22,.92));box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.02);overflow:hidden}
.ronin-newsletter::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 38%,rgba(0,246,255,.045) 48%,transparent 58%);transform:translateX(-60%);animation:newsletterSweep 8s ease-in-out infinite}
@keyframes newsletterSweep{0%,65%{transform:translateX(-65%)}82%,100%{transform:translateX(70%)}}
.newsletter-copy h2{margin:4px 0 8px;font-size:clamp(25px,3vw,44px)}
.newsletter-copy p:last-child{max-width:720px;color:#a9c0cc}
.newsletter-form{display:grid;grid-template-columns:1fr auto;gap:10px;position:relative;z-index:1}
.newsletter-form input,.ronin-contact-form input,.ronin-contact-form select,.ronin-contact-form textarea{width:100%;border:1px solid rgba(0,246,255,.20);background:rgba(2,8,17,.83);color:#eefcff;border-radius:13px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.newsletter-form input{height:54px;padding:0 16px}
.ronin-contact-form input,.ronin-contact-form select{height:50px;padding:0 14px}
.ronin-contact-form textarea{padding:14px;resize:vertical;min-height:150px}
.newsletter-form input:focus,.ronin-contact-form input:focus,.ronin-contact-form select:focus,.ronin-contact-form textarea:focus{border-color:#55f7ff;background:rgba(4,12,23,.96);box-shadow:0 0 0 3px rgba(0,246,255,.08),0 0 24px rgba(0,246,255,.08)}
.form-trust{grid-column:2;margin:8px 0 0;color:#6f8794;font-size:11px;letter-spacing:.04em}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-route{max-width:1180px;margin:0 auto}.route-hero{max-width:850px;margin-bottom:24px}.route-hero h1{font-size:clamp(34px,5vw,66px);margin:4px 0 12px}.route-hero>p:last-child{color:#a9c0cc;font-size:16px;max-width:780px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:20px;align-items:start}
.ronin-contact-form,.contact-side-card{border:1px solid rgba(0,246,255,.19);border-radius:22px;background:linear-gradient(150deg,rgba(4,12,23,.95),rgba(9,7,18,.94));box-shadow:0 22px 60px rgba(0,0,0,.25)}
.ronin-contact-form{padding:24px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ronin-contact-form label{display:grid;gap:8px;margin-bottom:16px;color:#8ffaff;font-size:10px;font-weight:1000;letter-spacing:.18em}
.ronin-contact-form select option{background:#07101a;color:#fff}
.contact-submit-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:4px}.contact-submit-row span{font-size:11px;color:#758c98}
.contact-side-card{padding:25px;min-height:100%}.contact-side-card h2{font-size:25px;margin:4px 0 12px}.contact-side-card p:not(.eyebrow){color:#9eb4bf;line-height:1.7}
.contact-sigil{display:grid;place-items:center;margin:30px auto 4px;width:130px;height:130px;border-radius:50%;border:1px solid rgba(255,49,111,.32);color:#ff456f;font-size:70px;background:radial-gradient(circle,rgba(255,49,111,.11),transparent 64%);box-shadow:0 0 38px rgba(255,49,111,.10)}
.ronin-form-popup{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:22px}.ronin-form-popup.hidden{display:none}.ronin-popup-backdrop{position:absolute;inset:0;background:rgba(1,4,10,.78);backdrop-filter:blur(15px)}
.ronin-popup-card{position:relative;z-index:1;width:min(520px,100%);padding:32px 28px 27px;border:1px solid rgba(0,246,255,.30);border-radius:25px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(255,48,105,.17),transparent 38%),linear-gradient(145deg,#07111d 0%,#090915 64%,#130713 100%);box-shadow:0 32px 100px rgba(0,0,0,.58),0 0 45px rgba(0,246,255,.08);animation:roninPopupIn .28s cubic-bezier(.18,.82,.22,1)}
@keyframes roninPopupIn{from{transform:translateY(20px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.ronin-popup-close{position:absolute;top:12px;right:13px;width:37px;height:37px;border-radius:50%;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);color:#ccecf2;font-size:23px;cursor:pointer}
.ronin-popup-mark{display:grid;place-items:center;width:78px;height:78px;margin:0 auto 13px;border:1px solid rgba(255,49,111,.28);border-radius:50%;color:#ff3f76;font-size:42px;background:radial-gradient(circle,rgba(255,49,111,.12),transparent 66%)}
.ronin-popup-card h2{font-size:29px;margin:5px 0 9px}.ronin-popup-card>p:not(.eyebrow){color:#a9bdc6;line-height:1.65;margin:0 auto 22px;max-width:410px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button[disabled]{opacity:.58;cursor:wait}

/* Legacy mobile media block removed by v3.1.2 */



/* v2.4.1 — contact route repair / subscriber removal */
#subscriberForm,.ronin-newsletter,.newsletter-form,.newsletter-copy,.form-trust{display:none!important}
.contact-shell{max-width:1120px;margin:0 auto;padding-bottom:32px}
.contact-intro{padding:6px 4px 20px;margin-bottom:18px;border-bottom:1px solid rgba(0,246,255,.13)}
.contact-intro small{color:#69f8ff;font-weight:1000;letter-spacing:.18em}
.contact-intro h3{font-size:clamp(23px,3vw,38px);margin:5px 0 9px}
.contact-intro p{max-width:760px;color:#a9c1cc;line-height:1.65}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr);gap:20px;align-items:stretch}
.ronin-contact-form,.contact-side-card{border:1px solid rgba(0,246,255,.18);border-radius:22px;background:linear-gradient(150deg,rgba(4,12,23,.96),rgba(11,7,20,.94));box-shadow:0 22px 60px rgba(0,0,0,.26)}
.ronin-contact-form{padding:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ronin-contact-form label{display:grid;gap:8px;margin-bottom:16px;color:#8ffaff;font-size:10px;font-weight:1000;letter-spacing:.17em}
.ronin-contact-form input,.ronin-contact-form select,.ronin-contact-form textarea{width:100%;border:1px solid rgba(0,246,255,.20);background:rgba(2,8,17,.88);color:#eefcff;border-radius:13px;outline:none;font:inherit}
.ronin-contact-form input,.ronin-contact-form select{height:50px;padding:0 14px}
.ronin-contact-form textarea{min-height:170px;padding:14px;resize:vertical;line-height:1.55}
.ronin-contact-form input:focus,.ronin-contact-form select:focus,.ronin-contact-form textarea:focus{border-color:#55f7ff;box-shadow:0 0 0 3px rgba(0,246,255,.08),0 0 24px rgba(0,246,255,.08)}
.ronin-contact-form select option{background:#07101a;color:#fff}
.contact-submit-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contact-submit-row span{font-size:11px;color:#758c98}
.contact-status{min-height:22px;margin-top:12px;text-align:center;color:#7896a3;font-size:10px;font-weight:900;letter-spacing:.08em}
.contact-status.success{color:#65ffd0}.contact-status.error{color:#ff658d}
.contact-side-card{padding:25px}
.contact-side-card h3{font-size:25px;margin:5px 0 12px}
.contact-side-card p:not(.eyebrow){color:#9eb4bf;line-height:1.7}
.contact-sigil{display:grid;place-items:center;margin:30px auto 4px;width:130px;height:130px;border-radius:50%;border:1px solid rgba(255,49,111,.32);color:#ff456f;font-size:70px;background:radial-gradient(circle,rgba(255,49,111,.11),transparent 64%);box-shadow:0 0 38px rgba(255,49,111,.10)}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
.ronin-form-popup{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:20px}
.ronin-form-popup.hidden{display:none}
.ronin-popup-backdrop{position:absolute;inset:0;background:rgba(1,4,10,.80);backdrop-filter:blur(15px)}
.ronin-popup-card{position:relative;z-index:1;width:min(520px,100%);padding:32px 27px 26px;border:1px solid rgba(0,246,255,.29);border-radius:25px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(255,48,105,.17),transparent 38%),linear-gradient(145deg,#07111d,#090915 64%,#130713);box-shadow:0 32px 100px rgba(0,0,0,.58),0 0 45px rgba(0,246,255,.08)}
.ronin-popup-close{position:absolute;top:12px;right:13px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);color:#d8f4f8;font-size:23px}
.ronin-popup-mark{display:grid;place-items:center;width:78px;height:78px;margin:0 auto 13px;border:1px solid rgba(255,49,111,.28);border-radius:50%;color:#ff3f76;font-size:42px;background:radial-gradient(circle,rgba(255,49,111,.12),transparent 66%)}
.ronin-popup-card h2{font-size:29px;margin:5px 0 9px}
.ronin-popup-card>p:not(.eyebrow){color:#a9bdc6;line-height:1.65;margin:0 auto 22px;max-width:410px}

/* Legacy mobile media block removed by v3.1.2 */



/* v2.4.3 — Mobile viewport audit + production hardening */
:root{
  --app-vh: 100dvh;
  --mobile-nav-h: 74px;
  --mobile-top-h: 64px;
}

html,body{
  width:100%;
  min-width:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@supports not (height:100dvh){
  :root{--app-vh:100vh}
}


/* Legacy mobile media block removed by v3.1.2 */



/* Legacy mobile media block removed by v3.1.2 */



/* Legacy mobile media block removed by v3.1.2 */


.auth-gate{position:fixed;inset:0;z-index:30000;display:grid;place-items:center;padding:22px;overflow:auto;background:#02050c}.auth-gate.hidden{display:none}.auth-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,5,12,.62),rgba(2,5,12,.84)),url('/assets/Crimson Moon Over a Spirit-Guarded Valley.png') center/cover no-repeat}.auth-panel{position:relative;z-index:1;width:min(470px,100%);padding:28px;border:1px solid rgba(0,246,255,.23);border-radius:26px;background:linear-gradient(145deg,rgba(5,13,24,.96),rgba(10,7,20,.96));box-shadow:0 35px 110px rgba(0,0,0,.60)}.auth-logo{display:block;width:min(320px,76%);max-height:180px;object-fit:contain;margin:0 auto}.auth-panel>h1{text-align:center;font-size:clamp(31px,5vw,45px);margin:5px 0 8px}.auth-panel>.eyebrow{text-align:center}.auth-lead{text-align:center;color:#a5bbc5;line-height:1.6;margin:0 auto 20px}.auth-google{width:100%;height:54px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#f8fbff;color:#10151b;font-weight:900}.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#5f7885;font-size:9px;font-weight:900;letter-spacing:.18em}.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:rgba(0,246,255,.11)}.auth-form{display:grid;gap:13px}.auth-field{display:grid;gap:7px}.auth-field.hidden{display:none}.auth-field label{color:#8ffaff;font-size:9px;font-weight:1000;letter-spacing:.18em}.auth-field input{width:100%;height:52px;padding:0 14px;border-radius:13px;border:1px solid rgba(0,246,255,.18);background:rgba(2,7,15,.84);color:#fff;outline:none;font-size:16px}.auth-submit{width:100%;height:54px}.auth-error{min-height:20px;margin-top:10px;text-align:center;color:#ff6b91;font-size:11px}.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:8px}.auth-links button{border:0;background:none;color:#83eaf2;padding:5px 0;font-size:9px;font-weight:900}.auth-terms{text-align:center;color:#637a85;font-size:9px;line-height:1.6;margin-top:14px}.auth-terms a{color:#9cecf2}html.auth-locked body>*:not(#authGate){visibility:hidden}html.auth-locked #authGate{visibility:visible}
/* Legacy mobile media block removed by v3.1.2 */


/* v2.5.2 member account system */
.member-menu-root{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:12000}
.member-menu-root.hidden{display:none}
.member-menu-btn{min-height:48px;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 7px;border:1px solid rgba(0,246,255,.20);border-radius:999px;background:rgba(4,10,18,.88);color:#fff;box-shadow:0 12px 36px rgba(0,0,0,.35);backdrop-filter:blur(18px);cursor:pointer}
.member-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(0,246,255,.55);background:radial-gradient(circle at 30% 25%,#1eeaff,#102438 60%,#080c16);color:#fff;font-weight:1000;font-size:14px}
.member-avatar.large{width:48px;height:48px;font-size:18px}
.member-copy{display:grid;text-align:left;line-height:1}.member-copy strong{font-size:10px;letter-spacing:.09em;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-copy small{font-size:7px;color:#6f9ba8;letter-spacing:.18em;margin-top:4px}.member-chevron{color:#80f4ff}
.member-dropdown{position:absolute;top:58px;right:0;width:min(320px,calc(100vw - 28px));padding:12px;border:1px solid rgba(0,246,255,.19);border-radius:18px;background:linear-gradient(145deg,rgba(4,11,20,.98),rgba(11,7,20,.98));box-shadow:0 30px 80px rgba(0,0,0,.55);backdrop-filter:blur(20px)}
.member-dropdown.hidden{display:none}.member-card-head{display:flex;align-items:center;gap:12px;padding:8px 6px 13px}.member-card-head div{display:grid;min-width:0}.member-card-head strong{font-size:13px}.member-card-head small{font-size:9px;color:#6f8b96;margin-top:4px}
.member-dropdown>button{width:100%;min-height:44px;margin-top:6px;padding:0 13px;text-align:left;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025);color:#d8faff;font-size:10px;font-weight:900;letter-spacing:.09em;cursor:pointer}
.member-dropdown>button.danger{color:#ff7692;border-color:rgba(255,55,95,.18)}.member-divider{height:1px;background:rgba(255,255,255,.07);margin:10px 4px 4px}
.account-modal{position:fixed;inset:0;z-index:35000;display:grid;place-items:center;padding:18px}.account-modal.hidden{display:none}.account-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(7px)}
.account-modal-card{position:relative;z-index:1;width:min(470px,100%);max-height:88dvh;overflow:auto;padding:26px;border:1px solid rgba(0,246,255,.19);border-radius:24px;background:linear-gradient(145deg,rgba(4,12,21,.99),rgba(12,7,19,.99));box-shadow:0 40px 120px rgba(0,0,0,.65)}
.account-modal-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.11);background:#09101a;color:#fff;font-size:18px;cursor:pointer}
.account-modal-copy{color:#9ab1ba;line-height:1.6}.account-modal-label{display:block;color:#80f5ff;font-size:9px;font-weight:1000;letter-spacing:.17em;margin:16px 0 7px}
.account-modal-input{width:100%;height:52px;border-radius:12px;padding:0 13px;border:1px solid rgba(0,246,255,.20);background:#030a12;color:#fff;outline:none;font-size:16px}
.account-modal-action{width:100%;margin-top:15px;min-height:52px}.account-status{min-height:22px;margin-top:12px;color:#ff7793;font-size:11px;text-align:center}
.account-danger-box{padding:15px;border:1px solid rgba(255,56,91,.25);border-radius:14px;background:rgba(255,35,70,.05);color:#ff9aad}.account-danger-box strong{display:block;color:#ff5d7e;font-size:11px;letter-spacing:.15em}.account-danger-box p{margin:7px 0 0;line-height:1.55;font-size:12px}
.delete-confirm-row{display:flex;align-items:flex-start;gap:9px;margin:16px 0;color:#b9c6cb;font-size:11px;line-height:1.5}
.account-delete-btn{width:100%;min-height:52px;border-radius:12px;border:1px solid rgba(255,61,92,.55);background:linear-gradient(90deg,#5d0a19,#b41031);color:#fff;font-weight:1000;font-size:11px;letter-spacing:.12em;cursor:pointer}

/* Legacy mobile media block removed by v3.1.2 */


/* v2.5.3 auth subscription repair */
.newsletter-block{
  width:min(1180px,calc(100% - 32px));
  margin:28px auto;
  padding:24px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  align-items:center;
  border:1px solid rgba(0,246,255,.16);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(4,12,20,.92),rgba(12,7,21,.92));
}
.newsletter-block.hidden{display:none!important}
.newsletter-copy h2{margin:3px 0 7px}
.newsletter-copy p{margin:0;color:#93aeb8;line-height:1.6}
.newsletter-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.newsletter-form input[type="email"]{
  width:100%;height:52px;padding:0 14px;border-radius:12px;
  border:1px solid rgba(0,246,255,.18);background:#030a12;color:#fff;font-size:16px;outline:none
}
.newsletter-form .primary-btn{min-height:52px}
.newsletter-honeypot{display:none!important}
.subscriber-status{grid-column:1/-1;min-height:18px;color:#7ff5ff;font-size:10px}

/* Legacy mobile media block removed by v3.1.2 */


/* v2.6.0 live Firebase leaderboard */
.firebase-leaderboard-rows{width:100%;display:grid;gap:8px;margin-top:24px}
.firebase-leader-row{min-height:58px;display:grid;grid-template-columns:56px minmax(0,1fr) 90px 140px;align-items:center;gap:12px;padding:9px 15px;border:1px solid rgba(0,246,255,.12);border-radius:13px;background:linear-gradient(90deg,rgba(4,12,22,.92),rgba(12,7,19,.82))}
.firebase-leader-row.is-you{border-color:rgba(255,49,134,.65);box-shadow:0 0 28px rgba(255,49,134,.08)}
.firebase-rank{color:#61f8ff;font-weight:1000;font-size:17px}
.firebase-handle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900;letter-spacing:.08em}
.firebase-handle small{margin-left:9px;color:#ff4a97;font-size:8px;letter-spacing:.16em}
.firebase-trials{color:#7898a5;text-align:center;font-size:10px;font-weight:900}
.firebase-score{text-align:right;color:#fff;font-size:17px}
.leader-loading,.leader-empty{min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;text-align:center;color:#8ba7b4;font-weight:900;letter-spacing:.10em}
.leader-empty strong{color:#dffcff}.leader-empty span{font-size:10px}.leader-empty.error strong{color:#ff6793}
.newsletter-block:not(.hidden) #subscriberForm{display:grid!important}
.newsletter-block:not(.hidden) .newsletter-copy{display:block!important}
.newsletter-block.hidden{display:none!important}

/* Legacy mobile media block removed by v3.1.2 */


/* v2.6.1 gameboard-only newsletter exclusion */
#newsletterBlock.hidden{display:none!important}


/* v2.6.2 Supreme Member Icon Dropdown */
.member-menu-root{
  position:fixed;
  top:max(14px,env(safe-area-inset-top));
  right:max(16px,env(safe-area-inset-right));
  z-index:22000;
}
.member-menu-root.hidden{display:none}

.member-icon-btn{
  position:relative;
  width:48px;
  height:48px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,246,255,.26);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(8,18,29,.96),rgba(8,8,19,.96));
  box-shadow:0 14px 38px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.025),0 0 22px rgba(0,246,255,.05);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.member-icon-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(0,246,255,.52);
  box-shadow:0 18px 44px rgba(0,0,0,.48),0 0 28px rgba(0,246,255,.10);
}
.member-icon-btn[aria-expanded="true"]{
  border-color:rgba(255,51,133,.55);
  box-shadow:0 18px 45px rgba(0,0,0,.48),0 0 30px rgba(255,51,133,.12);
}

.member-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,246,255,.58);
  background:radial-gradient(circle at 30% 25%,#25f6ff 0 8%,#0b2332 42%,#080b13 100%);
  color:#fff;
  font-weight:1000;
  font-size:14px;
  box-shadow:0 0 20px rgba(0,246,255,.14);
}
.member-avatar.large{width:50px;height:50px;font-size:18px}
.member-status-dot{
  position:absolute;
  right:5px;
  bottom:5px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#43ff9a;
  border:2px solid #07101a;
  box-shadow:0 0 10px rgba(67,255,154,.75);
}

.member-dropdown{
  position:absolute;
  top:58px;
  right:0;
  width:min(340px,calc(100vw - 28px));
  padding:12px;
  border:1px solid rgba(0,246,255,.20);
  border-radius:20px;
  background:radial-gradient(circle at 85% 5%,rgba(255,38,118,.06),transparent 25%),linear-gradient(145deg,rgba(4,11,20,.99),rgba(11,7,20,.99));
  box-shadow:0 30px 90px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.member-dropdown.hidden{display:none}

.member-dropdown-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 8px 12px;
}
.member-identity{min-width:0;display:grid;gap:2px}
.member-kicker{color:#64f7ff;font-size:8px;font-weight:1000;letter-spacing:.20em}
.member-identity strong{color:#fff;font-size:14px;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-identity small{color:#6f8995;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.member-dropdown-divider{
  height:1px;
  margin:0 5px 8px;
  background:linear-gradient(90deg,transparent,rgba(0,246,255,.20),rgba(255,51,133,.12),transparent);
}

.member-menu-item{
  width:100%;
  min-height:58px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  margin-top:5px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:13px;
  background:rgba(255,255,255,.018);
  color:#dffcff;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.member-menu-item:hover{
  background:rgba(0,246,255,.045);
  border-color:rgba(0,246,255,.24);
  transform:translateX(-1px);
}
.member-menu-item.danger{
  color:#ff879e;
  border-color:rgba(255,60,96,.12);
}
.member-menu-item.danger:hover{
  background:rgba(255,45,86,.05);
  border-color:rgba(255,60,96,.30);
}
.member-menu-symbol{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid rgba(0,246,255,.14);
  background:rgba(0,246,255,.035);
  color:#67f5ff;
  font-size:14px;
  font-weight:1000;
}
.member-menu-item.danger .member-menu-symbol{
  color:#ff6687;
  border-color:rgba(255,55,92,.18);
  background:rgba(255,55,92,.035);
}
.member-menu-text{min-width:0;display:grid;gap:3px}
.member-menu-text strong{font-size:10px;font-weight:1000;letter-spacing:.11em}
.member-menu-text small{color:#6f8995;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-menu-arrow{color:#4f7180;font-size:18px;justify-self:end}


/* Legacy mobile media block removed by v3.1.2 */



/* v2.6.4 member icon + newsletter/footer repair */
.member-menu-root{position:relative!important;inset:auto!important;z-index:28000!important;flex:0 0 auto!important}.member-menu-root.hidden{display:none!important}
.member-icon-btn{position:relative;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid rgba(0,246,255,.25)!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(7,17,28,.98),rgba(8,8,19,.98))!important;cursor:pointer!important}
.member-avatar{width:31px!important;height:31px!important;display:grid!important;place-items:center!important;border-radius:50%!important;border:1px solid rgba(0,246,255,.58)!important;background:radial-gradient(circle at 30% 25%,#25f6ff 0 8%,#0b2332 42%,#080b13 100%)!important;color:#fff!important;font-weight:1000!important}.member-avatar.large{width:50px!important;height:50px!important}.member-status-dot{position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-radius:50%;background:#46ff99;border:2px solid #07101a;box-shadow:0 0 9px rgba(70,255,153,.75)}
.member-dropdown{position:absolute!important;top:calc(100% + 10px)!important;right:0!important;left:auto!important;width:min(340px,calc(100vw - 20px))!important;padding:12px!important;z-index:29000!important;border:1px solid rgba(0,246,255,.20)!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(4,11,20,.99),rgba(11,7,20,.99))!important;box-shadow:0 30px 90px rgba(0,0,0,.58)!important}.member-dropdown.hidden{display:none!important}.member-dropdown-head{display:flex!important;align-items:center!important;gap:12px!important;padding:9px 8px 12px!important}.member-identity{display:grid!important;gap:2px!important;min-width:0!important}.member-kicker{color:#64f7ff!important;font-size:8px!important;font-weight:1000!important;letter-spacing:.20em!important}.member-identity strong{font-size:14px!important;color:#fff!important}.member-identity small{font-size:9px!important;color:#718a95!important}.member-dropdown-divider{height:1px!important;margin:0 5px 8px!important;background:rgba(0,246,255,.14)!important}
.member-menu-item{width:100%!important;min-height:57px!important;display:grid!important;grid-template-columns:34px minmax(0,1fr) 18px!important;align-items:center!important;gap:10px!important;margin-top:5px!important;padding:8px 10px!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:13px!important;background:rgba(255,255,255,.018)!important;color:#dffcff!important;text-align:left!important;cursor:pointer!important}.member-menu-item.danger{color:#ff839c!important;border-color:rgba(255,58,95,.15)!important}.member-menu-symbol{width:30px!important;height:30px!important;display:grid!important;place-items:center!important;border-radius:9px!important;border:1px solid rgba(0,246,255,.14)!important;color:#67f5ff!important;font-size:9px!important;font-weight:1000!important}.member-menu-text{display:grid!important;gap:3px!important;min-width:0!important}.member-menu-text strong{font-size:10px!important;font-weight:1000!important;letter-spacing:.10em!important}.member-menu-text small{font-size:8px!important;color:#718994!important}.member-menu-arrow{justify-self:end!important;color:#55717d!important}
.newsletter-block{width:min(1180px,calc(100% - 36px))!important;max-width:1180px!important;margin:28px auto 18px!important;padding:0!important;display:block!important;border:1px solid rgba(0,246,255,.16)!important;border-radius:22px!important;background:linear-gradient(135deg,rgba(4,12,20,.94),rgba(12,7,21,.94))!important;overflow:hidden!important}.newsletter-block.hidden{display:none!important}.newsletter-inner{width:100%!important;padding:26px 28px!important;display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr)!important;gap:28px!important;align-items:center!important}.newsletter-copy{display:block!important;min-width:0!important}.newsletter-copy h2{margin:4px 0 8px!important;font-size:clamp(28px,4vw,46px)!important;line-height:.98!important}.newsletter-copy p{margin:0!important;color:#91aab5!important;line-height:1.55!important}.newsletter-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important;width:100%!important}.newsletter-form input[type="email"]{width:100%!important;min-width:0!important;height:54px!important;padding:0 15px!important;border-radius:12px!important;border:1px solid rgba(0,246,255,.20)!important;background:#030a12!important;color:#fff!important;font-size:16px!important}.newsletter-form button{min-width:140px!important;min-height:54px!important}.newsletter-honeypot{display:none!important}.subscriber-status{grid-column:1/-1!important;min-height:16px!important;font-size:10px!important;color:#7ff5ff!important}
.newsletter-link-row{min-height:54px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;padding:0 18px!important;border-top:1px solid rgba(0,246,255,.10)!important;background:rgba(2,7,14,.50)!important}.newsletter-link-row button{position:relative!important;min-height:54px!important;padding:0 24px!important;border:0!important;background:transparent!important;color:#7795a2!important;font-size:9px!important;font-weight:1000!important;letter-spacing:.12em!important;cursor:pointer!important}.newsletter-link-row button+button::before{content:""!important;position:absolute!important;left:0!important;top:18px!important;width:1px!important;height:18px!important;background:rgba(0,246,255,.12)!important}
footer [data-route="/support"],footer [data-route="/contact"],footer [data-route="/privacy"],footer [data-route="/terms"]{display:none!important}.top-actions,.header-actions,.nav-actions,.topbar-actions,.topbar-controls,.header-controls,header .actions,.topbar,header{overflow:visible!important}

/* Legacy mobile media block removed by v3.1.2 */


/* Legacy mobile media block removed by v3.1.2 */



/* v2.6.5 member route + community + logout audio */
.ronin-community-bar{
  width:min(1180px,calc(100% - 36px));
  margin:18px auto 22px;
  border:1px solid rgba(0,246,255,.14);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(4,11,18,.95),rgba(11,7,18,.95));
  overflow:hidden;
}
.ronin-community-inner{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px 24px;
  align-items:center;
  padding:18px 22px;
}
.ronin-community-copy{display:grid;gap:4px}
.ronin-community-copy strong{font-size:12px;letter-spacing:.10em}
.ronin-community-actions{display:flex;gap:10px}
.ronin-community-link{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 15px;
  border:1px solid rgba(0,246,255,.18);
  border-radius:10px;
  color:#dffcff;
  text-decoration:none;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.11em;
  background:rgba(0,246,255,.025);
}
.ronin-community-link:hover{
  border-color:rgba(0,246,255,.42);
  background:rgba(0,246,255,.05);
}
.ronin-donation{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding-top:14px;
  border-top:1px solid rgba(0,246,255,.08);
}
.ronin-donation>span{
  color:#71909d;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.14em;
}
.ronin-donation code{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#9bf9ff;
  font-size:10px;
}
.ronin-donation button{
  min-height:34px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid rgba(255,54,127,.22);
  background:rgba(255,54,127,.04);
  color:#ff79ad;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.11em;
  cursor:pointer;
}

/* Legacy mobile media block removed by v3.1.2 */



/* v2.6.7 Settings refresh */
#settingsModal .modal-card,
.settings-modal .modal-card,
#settingsModal .settings-card,
.settings-modal .settings-card{
  width:min(620px,calc(100vw - 28px))!important;
  max-height:min(88dvh,780px)!important;
  overflow:auto!important;
  padding:28px!important;
  border-radius:24px!important;
  border:1px solid rgba(0,246,255,.22)!important;
  background:
    radial-gradient(circle at 85% 0%,rgba(255,40,118,.06),transparent 24%),
    linear-gradient(145deg,rgba(5,14,25,.99),rgba(8,8,20,.99))!important;
  box-shadow:0 38px 110px rgba(0,0,0,.62)!important;
}

#settingsModal h2,
.settings-modal h2{
  margin:4px 0 18px!important;
  font-size:clamp(30px,4vw,44px)!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
}

#settingsModal label,
.settings-modal label{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:15px 0 8px!important;
  color:#dff8ff!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}

#settingsModal input[type="range"],
.settings-modal input[type="range"]{
  width:100%!important;
  accent-color:#29d7ff!important;
}

#settingsModal input[type="checkbox"],
.settings-modal input[type="checkbox"]{
  width:18px!important;
  height:18px!important;
  accent-color:#ff3188!important;
}

.settings-cloud-status{
  margin-top:22px!important;
  padding:14px 15px!important;
  display:grid!important;
  grid-template-columns:12px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:start!important;
  border:1px solid rgba(0,246,255,.12)!important;
  border-radius:14px!important;
  background:rgba(0,246,255,.025)!important;
}

.settings-cloud-dot{
  width:9px!important;
  height:9px!important;
  margin-top:3px!important;
  border-radius:50%!important;
  background:#46ff99!important;
  box-shadow:0 0 12px rgba(70,255,153,.65)!important;
}

.settings-cloud-status[data-state="offline"] .settings-cloud-dot{
  background:#ffbd4a!important;
  box-shadow:0 0 12px rgba(255,189,74,.55)!important;
}

.settings-cloud-status strong{
  display:block!important;
  color:#7ff7ff!important;
  font-size:9px!important;
  font-weight:1000!important;
  letter-spacing:.14em!important;
}

.settings-cloud-status small{
  display:block!important;
  margin-top:4px!important;
  color:#93aab4!important;
  font-size:11px!important;
  line-height:1.45!important;
}


/* Legacy mobile media block removed by v3.1.2 */



/* v2.7.0 Global Member Avatar */
.member-avatar{
  overflow:hidden!important;
  position:relative!important;
}
.member-avatar img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}
.member-avatar.has-photo{
  background-color:#07101a!important;
}

.member-avatar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
}
.member-avatar-actions button{
  min-height:27px;
  padding:0 9px;
  border:1px solid rgba(0,246,255,.14);
  border-radius:8px;
  background:rgba(0,246,255,.025);
  color:#85edf4;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.09em;
  cursor:pointer;
}
.member-avatar-actions button:hover{
  border-color:rgba(0,246,255,.35);
  background:rgba(0,246,255,.055);
}
.member-avatar-actions button:disabled{
  opacity:.55;
  cursor:wait;
}


/* v2.7.1 Avatar flicker fix */
.member-avatar.has-photo{
  background-color:#07101a!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  color:transparent!important;
  font-size:0!important;
}
.member-avatar.has-photo img{
  display:none!important;
}


/* v2.7.2 Avatar blank-image fix */
.member-avatar.has-photo{
  background-color:#07101a!important;
  background-image:var(--ronin-avatar-image)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  color:transparent!important;
  font-size:0!important;
}
.member-avatar.has-photo::before,
.member-avatar.has-photo::after{
  pointer-events:none!important;
}


/* RONIN ECONOMY v3.0.6 */
.ronin-spirit-panel{width:min(1180px,calc(100% - 28px));margin:0 auto 18px;display:grid;grid-template-columns:1fr auto 1.35fr;gap:16px;align-items:center;padding:16px 18px;border:1px solid rgba(255,70,86,.3);border-radius:18px;background:linear-gradient(135deg,rgba(20,7,14,.92),rgba(6,13,22,.92));box-shadow:0 18px 45px rgba(0,0,0,.32),inset 0 0 32px rgba(255,0,55,.04);backdrop-filter:blur(16px)}
.spirit-copy,.spirit-timer{display:flex;flex-direction:column;gap:4px}.spirit-copy small,.spirit-timer small,.boost-bar-head small{font-size:9px;letter-spacing:.18em;color:#9fb6c2}.spirit-copy strong{font-size:22px;letter-spacing:.12em;color:#ff4b64;text-shadow:0 0 18px rgba(255,40,75,.4)}.spirit-copy span,.spirit-timer strong{font-size:12px;color:#e9f8ff}.arsenal-summary{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.arsenal-summary span{display:flex;gap:7px;align-items:center;padding:7px 9px;border:1px solid rgba(130,220,255,.16);border-radius:9px;background:rgba(3,12,19,.58)}.arsenal-summary b{font-size:8px;letter-spacing:.08em;color:#bdd8e4}.arsenal-summary em{font-style:normal;font-size:10px;color:#fff}
.ronin-boost-bar{margin:0 0 12px;padding:10px;border:1px solid rgba(255,70,86,.22);border-radius:14px;background:linear-gradient(180deg,rgba(22,7,13,.78),rgba(6,11,18,.8))}.boost-bar-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}.boost-bar-head span{font-size:8px;letter-spacing:.05em;color:#6f8a98;text-align:right}.boost-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.ronin-boost-btn{min-width:0;padding:8px 6px;border-radius:10px;border:1px solid rgba(139,220,255,.18);background:rgba(3,13,20,.86);color:#dff8ff;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:.18s ease}.ronin-boost-btn strong{font-size:8px;letter-spacing:.08em;white-space:nowrap}.ronin-boost-btn small{font-size:7px;color:#7894a2}.ronin-boost-btn b{font-size:10px;color:#ff6679}.ronin-boost-btn:hover:not(:disabled),.ronin-boost-btn.active{border-color:#ff4b64;box-shadow:0 0 20px rgba(255,40,75,.18);transform:translateY(-1px)}.ronin-boost-btn.active{background:rgba(74,10,24,.75)}.ronin-boost-btn:disabled{opacity:.34;cursor:not-allowed}

/* Legacy mobile media block removed by v3.1.2 */



/* =========================================================
   RONIN ECONOMY VISIBILITY v3.0.7
========================================================= */
.tile{isolation:isolate;overflow:visible}
.tile-status-seal{position:absolute;z-index:12;pointer-events:none;display:flex;align-items:center;justify-content:center;font-family:inherit;font-weight:900}
.tile-status-seal b{font-size:22px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.95));}
.tile-status-seal small{position:absolute;left:50%;transform:translateX(-50%);bottom:2px;font-size:5px;letter-spacing:.12em;font-weight:1000;white-space:nowrap;text-shadow:0 1px 3px #000}
.chain-status-seal{inset:4px;border:2px solid rgba(142,223,255,.92);border-radius:10px;background:linear-gradient(135deg,rgba(0,0,0,.10),rgba(0,20,28,.34));box-shadow:inset 0 0 16px rgba(0,246,255,.18),0 0 12px rgba(0,246,255,.28)}
.chain-status-seal:before,.chain-status-seal:after{content:"";position:absolute;left:8%;right:8%;height:3px;border-radius:99px;background:linear-gradient(90deg,#9beaff,#fff,#69c8ea);box-shadow:0 0 6px rgba(123,226,255,.9)}
.chain-status-seal:before{transform:rotate(42deg)}.chain-status-seal:after{transform:rotate(-42deg)}
.chain-status-seal b{color:#e9fbff;text-shadow:0 0 8px #07151c,0 0 15px #00eaff}.chain-status-seal small{color:#d8f8ff}
.curse-status-seal{right:-4px;top:-5px;width:31px;height:31px;border-radius:50%;border:2px solid rgba(255,81,230,.95);background:radial-gradient(circle,#5b0c61 0,#260526 58%,rgba(5,0,7,.92) 100%);box-shadow:0 0 16px rgba(255,46,219,.75),inset 0 0 9px rgba(255,255,255,.15)}
.curse-status-seal b{font-size:17px;color:#fff0ff;text-shadow:0 0 8px #ff40e5}.curse-status-seal small{display:none}
.tile.chain>img{filter:brightness(.72) saturate(.72) drop-shadow(0 0 10px rgba(0,246,255,.28))}
.tile.curse>img{filter:brightness(.76) saturate(.8) hue-rotate(275deg) drop-shadow(0 0 12px rgba(255,46,219,.42))}

.ronin-life-chip{margin-left:auto;min-width:112px;padding:7px 10px;border-radius:12px;border:1px solid rgba(255,76,96,.55);background:linear-gradient(135deg,rgba(75,9,22,.92),rgba(7,13,20,.94));box-shadow:0 0 20px rgba(255,38,71,.16);display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;text-align:right}
.ronin-life-chip small{grid-row:1/3;font-size:8px;letter-spacing:.16em;color:#ff8191;align-self:center}.ronin-life-chip strong{font-size:13px;line-height:1;color:#fff}.ronin-life-chip span{font-size:7px;letter-spacing:.06em;color:#9ec2cf;white-space:nowrap}
.combat-life-chip{margin-left:10px;flex:0 0 auto}
.arsenal-summary .arsenal-rule{border-color:rgba(255,72,91,.26);background:rgba(57,7,17,.4)}.arsenal-summary .arsenal-rule em{font-size:7px;color:#ff9aa8}


/* Legacy mobile media block removed by v3.1.2 */



/* =========================================================
   RONIN ECONOMY POLISH v3.0.8
========================================================= */
.ronin-life-chip{
  position:relative;min-width:150px;min-height:58px;padding:9px 13px 9px 44px;border-radius:14px;
  border:1px solid rgba(255,78,101,.58);
  background:radial-gradient(circle at 18px 18px,rgba(255,64,91,.24),transparent 20px),linear-gradient(135deg,rgba(68,8,22,.96),rgba(5,14,23,.97));
  box-shadow:0 10px 30px rgba(0,0,0,.28),0 0 22px rgba(255,44,74,.14),inset 0 0 22px rgba(255,255,255,.025);
  display:grid;grid-template-columns:1fr;gap:2px;text-align:left;overflow:hidden;
}
.ronin-life-chip:before{content:"◉";position:absolute;left:13px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,102,124,.6);color:#ff536c;font-size:12px;box-shadow:0 0 16px rgba(255,46,79,.42)}
.ronin-life-chip small{grid-row:auto;font-size:7px;line-height:1;letter-spacing:.17em;color:#ff91a1;align-self:auto}
.ronin-life-chip strong{font-size:14px;line-height:1.1;letter-spacing:.035em;color:#fff;white-space:nowrap}
.ronin-life-chip span{font-size:7px;line-height:1.1;letter-spacing:.09em;color:#9ed9e8;white-space:nowrap}
.combat-life-chip{margin-left:auto;margin-right:12px;flex:0 0 auto}.game-head .combat-life-chip + .score-box{margin-left:0}

.chain-status-seal{inset:2px;border:2px solid rgba(135,229,255,.96);border-radius:11px;background:linear-gradient(135deg,rgba(2,11,17,.30),rgba(0,35,48,.34));box-shadow:inset 0 0 18px rgba(0,229,255,.20),0 0 15px rgba(0,229,255,.38)}
.chain-status-seal:before,.chain-status-seal:after{content:"";position:absolute;left:6%;right:6%;height:4px;border-radius:99px;background:linear-gradient(90deg,#6bc6df,#f2fdff,#6bc6df);box-shadow:0 0 7px rgba(142,239,255,.95),0 2px 3px rgba(0,0,0,.7);z-index:1}
.chain-status-seal:before{top:42%;transform:rotate(43deg)}.chain-status-seal:after{top:42%;transform:rotate(-43deg)}
.chain-link{position:absolute;z-index:3;width:19px;height:12px;border:3px solid #d9f9ff;border-radius:50%;box-shadow:0 0 7px rgba(0,236,255,.95),inset 0 0 4px rgba(0,0,0,.55);background:rgba(1,20,27,.46)}
.chain-link-a{left:14%;top:17%;transform:rotate(43deg)}.chain-link-b{left:40%;top:39%;transform:rotate(-43deg)}.chain-link-c{right:12%;bottom:16%;transform:rotate(43deg)}
.chain-status-seal small{z-index:5;left:50%;bottom:2px;padding:2px 4px;border-radius:5px;background:rgba(0,8,13,.84);color:#eaffff;font-size:5px;letter-spacing:.14em;text-shadow:0 1px 3px #000}

.war-cache-earned{margin:16px auto 18px;padding:13px;border:1px solid rgba(255,78,99,.34);border-radius:14px;background:linear-gradient(135deg,rgba(68,7,18,.55),rgba(5,15,23,.72));box-shadow:inset 0 0 25px rgba(255,43,72,.045)}
.war-cache-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:9px;border-bottom:1px solid rgba(125,208,230,.12)}
.war-cache-head small{font-size:8px;letter-spacing:.18em;color:#ff8293}.war-cache-head strong{font-size:10px;letter-spacing:.08em;color:#e9fbff}
.war-cache-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px;margin-top:9px}
.war-cache-item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 9px;border-radius:9px;border:1px solid rgba(116,210,234,.16);background:rgba(2,12,18,.56)}
.war-cache-item span{font-size:7px;letter-spacing:.08em;color:#b9d8e1}.war-cache-item b{font-size:10px;color:#ff6479}
.arsenal-summary .arsenal-rule{flex-basis:100%;justify-content:space-between}.arsenal-summary .arsenal-rule em{font-size:7px;letter-spacing:.04em;text-align:right}


/* Legacy mobile media block removed by v3.1.2 */



/* ==========================================================
   RONIN v3.1.1 — MOBILE APP SHELL / FIXED BOTTOM DOCK
========================================================== */


/* Legacy mobile media block removed by v3.1.2 */



/* ==========================================================
   RONIN — NON-OBSTRUCTIVE CHAINED TILE STATUS
   Keeps underlying game piece clearly identifiable.
   ========================================================== */

/*
 * Disable the original giant centered chain glyph.
 * Chain state is now communicated by the perimeter seal.
 */
#gameScreen .tile.chain::before{
  content:none !important;
  display:none !important;
}

/*
 * Preserve the original game-piece artwork.
 */
#gameScreen .tile.chain > img{
  opacity:1 !important;

  filter:
    brightness(.98)
    saturate(.96)
    drop-shadow(0 0 8px rgba(0,246,255,.18))
    !important;
}

/*
 * Status seal becomes a perimeter treatment rather than
 * an obstruction over the game-piece artwork.
 */
#gameScreen .chain-status-seal{
  inset:2px !important;

  border:
    2px solid rgba(135,229,255,.94) !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      135deg,
      rgba(0,246,255,.025),
      transparent 38%,
      transparent 68%,
      rgba(0,246,255,.035)
    ) !important;

  box-shadow:
    inset 0 0 7px rgba(0,229,255,.12),
    0 0 9px rgba(0,229,255,.25)
    !important;

  pointer-events:none !important;
}

/*
 * Remove the large X-shaped chain bars crossing the artwork.
 */
#gameScreen .chain-status-seal::before,
#gameScreen .chain-status-seal::after{
  content:none !important;
  display:none !important;
}

/*
 * Small perimeter chain links.
 */
#gameScreen .chain-status-seal .chain-link{
  position:absolute !important;

  z-index:4 !important;

  width:13px !important;
  height:8px !important;

  border:
    2px solid rgba(218,249,255,.96) !important;

  border-radius:
    50% !important;

  background:
    rgba(1,20,27,.78) !important;

  box-shadow:
    0 0 5px rgba(0,236,255,.72),
    inset 0 0 3px rgba(0,0,0,.55)
    !important;
}

/* upper-left status link */
#gameScreen .chain-status-seal .chain-link-a{
  left:5px !important;
  top:5px !important;

  right:auto !important;
  bottom:auto !important;

  transform:
    rotate(-38deg) !important;
}

/*
 * Center chain link is intentionally removed.
 * This is the most important visibility improvement.
 */
#gameScreen .chain-status-seal .chain-link-b{
  display:none !important;
}

/* lower-right status link */
#gameScreen .chain-status-seal .chain-link-c{
  right:5px !important;
  bottom:5px !important;

  left:auto !important;
  top:auto !important;

  transform:
    rotate(-38deg) !important;
}

/*
 * Compact CHAINED badge.
 */
#gameScreen .chain-status-seal small{
  position:absolute !important;

  z-index:6 !important;

  left:50% !important;
  bottom:2px !important;

  transform:
    translateX(-50%) !important;

  width:auto !important;

  padding:
    2px 4px !important;

  border:
    1px solid rgba(137,232,255,.24) !important;

  border-radius:
    4px !important;

  background:
    rgba(1,8,13,.88) !important;

  color:
    #eaffff !important;

  font-size:
    5px !important;

  font-weight:
    1000 !important;

  line-height:
    1.05 !important;

  letter-spacing:
    .12em !important;

  text-shadow:
    0 1px 3px #000,
    0 0 5px rgba(0,234,255,.55)
    !important;

  white-space:
    nowrap !important;
}

/*
 * Slight extra perimeter response on chained tiles,
 * without obscuring their identity.
 */
#gameScreen .tile.chain{
  border-color:
    rgba(126,226,255,.72) !important;

  box-shadow:
    inset 0 0 8px rgba(0,225,255,.08),
    0 0 7px rgba(0,225,255,.15)
    !important;
}


/* === RONIN SLASHDOWN OFFICIAL WORLD BACKGROUND 2026-11-01 === */
html{
  background:#03050d;
}
body{
  background-image:
    linear-gradient(180deg,rgba(2,5,12,.38),rgba(2,5,12,.58)),
    url("/assets/Crimson Moon Over a Spirit-Guarded Valley.png") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  background-color:#03050d !important;
}
#app{
  background:
    radial-gradient(circle at 18% 18%,rgba(0,246,255,.06),transparent 24%),
    radial-gradient(circle at 86% 14%,rgba(255,63,158,.08),transparent 24%),
    linear-gradient(180deg,rgba(3,5,13,.10),rgba(3,5,13,.24)) !important;
}
.ambient{
  opacity:.48 !important;
}
@media(max-width:700px){
  body{
    background-attachment:scroll !important;
    background-position:center top !important;
  }
}