:root{color-scheme:dark;--ink:#f7f5ff;--muted:#b9c3e8;--violet:#845cff;--cyan:#2ce4e4;--gold:#ffc857;--danger:#ff537b;--green:#63efaa;--canvas-w:min(100vw,920px)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"Noto Sans",system-ui,sans-serif;background:#080d28;color:var(--ink)}button,select{font:inherit}.page{min-height:100vh;background:radial-gradient(circle at 50% 10%,#263078 0,#0d153b 36%,#080d28 74%)}.canvas{width:var(--canvas-w);margin:auto;position:relative;overflow:hidden;background:linear-gradient(160deg,#182156,#0d1231);box-shadow:0 0 50px #020617cc}.main-page{overflow:auto}.main-canvas{min-height:min(780px,100svh);padding:12px 18px 22px;display:flex;flex-direction:column;gap:13px}.topbar,.screen-head,.battle-head{display:grid;grid-template-columns:72px 1fr 112px;align-items:center;gap:8px;min-height:48px}.topbar h1,.screen-head h2{margin:0;text-align:center;font-size:clamp(1.05rem,4vw,1.65rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.back-logo{height:44px;display:flex;align-items:center;gap:4px;color:white;text-decoration:none;font-size:1.4rem}.back-logo img{width:32px;height:32px;object-fit:contain}.topbar select{width:112px;background:#111943;color:white;border:1px solid #7180bf;border-radius:10px;padding:8px}.poster{position:relative;flex:1;min-height:360px;border-radius:24px;overflow:hidden;border:1px solid #8d76ff66;box-shadow:0 18px 46px #0008}.poster>img{width:100%;height:100%;object-fit:cover;object-position:center 45%}.poster-shade{position:absolute;inset:0;background:linear-gradient(transparent 66%,#0a0c26ed);display:flex;align-items:end;justify-content:center;padding:20px}.poster-shade span,.intent{font-size:.72rem;font-weight:900;letter-spacing:.14em;background:#171a47dd;border:1px solid #a995ff;border-radius:999px;padding:7px 12px}.lead{margin:0 auto;max-width:720px;text-align:center;line-height:1.5;color:#dce2ff}.primary,.secondary,.spin,.burst,.upgrade{border:0;border-radius:15px;color:white;font-weight:900;cursor:pointer}.primary{min-height:52px;padding:12px 24px;background:linear-gradient(135deg,#6f4aff,#bd4fff);box-shadow:0 9px 22px #6f4aff55}.secondary{min-height:48px;padding:10px 20px;background:#27315d;border:1px solid #7c89bd}.guide{width:min(100%,920px);margin:0 auto;padding:28px 22px 54px;background:#f6f4ff;color:#15182d}.guide h2{margin:0 0 8px}.guide p{line-height:1.65}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.guide-grid div{background:white;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 14px #1d245018}.guide-grid b{color:#6751ce;font-size:.76rem}.play-page{height:100svh;overflow:hidden;display:flex;flex-direction:column}.play-page>.canvas{height:calc(100svh - 56px);max-width:920px;flex:none}.ad-reserve{height:56px;flex:none;width:var(--canvas-w);margin:auto;background:#070b20}.stage-canvas{padding:12px 16px;display:grid;grid-template-rows:52px 56px minmax(220px,1fr) auto 56px;gap:10px}.screen-head{grid-template-columns:52px 1fr 52px}.icon-btn{width:44px;height:44px;border:1px solid #7382c0;border-radius:13px;background:#151c49;color:white;font-weight:900;font-size:1.2rem}.progress-card{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-radius:14px;background:#1a2356}.progress-card strong{color:var(--gold)}.stage-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:16px calc(50% - 128px);touch-action:pan-x}.stage-rail::-webkit-scrollbar{display:none}.stage-card{scroll-snap-align:center;flex:0 0 256px;display:grid;grid-template-rows:auto 1fr auto;padding:18px;border-radius:22px;background:linear-gradient(160deg,#242e6e,#11183f);border:2px solid #546099;text-align:left;color:white;transition:.2s}.stage-card.centered{border-color:#ffe083;box-shadow:0 0 0 2px #916fff,0 0 28px #795cff}.stage-card.locked{filter:saturate(.45)}.stage-card h3{font-size:1.35rem;margin:5px 0}.stage-card p{color:#cbd3fa;line-height:1.4}.stage-card .monster-chip{align-self:end;background:#090f31;border-radius:12px;padding:9px;color:#9eefff}.forge{display:grid;grid-template-columns:1.05fr repeat(3,1fr);gap:8px}.forge>div,.upgrade{min-height:62px;border-radius:13px;background:#131b47;border:1px solid #48558f;padding:8px}.forge>div{display:flex;flex-direction:column;justify-content:center}.forge>div strong{color:var(--gold)}.upgrade{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;text-align:left}.upgrade span{grid-row:1/3;font-size:1.25rem;margin-right:6px}.upgrade small{color:#b8c4ef}.battle-canvas{display:grid;grid-template-rows:52px minmax(250px,1fr) auto;background:#080d28}.battle-head{grid-template-columns:52px 1fr 52px;padding:4px 12px;background:#0e1538}.stage-name{text-align:center;display:flex;flex-direction:column}.stage-name small{color:#9aa8dc;font-size:.7rem}.arena{position:relative;overflow:hidden;background:url('../../assets/animal-rune-reels/arena.webp') center/cover}.intent{position:absolute;right:12px;top:10px;z-index:4;display:flex;flex-direction:column;text-align:center;letter-spacing:.04em}.intent strong{color:#fff;font-size:.82rem}.enemy-wrap{position:absolute;top:7%;left:50%;width:min(36%,230px);transform:translateX(-50%);text-align:center;z-index:2}.enemy-wrap>img{width:100%;height:min(30vh,220px);object-fit:contain;filter:drop-shadow(0 13px 15px #000b)}.enemy-name{font-weight:900;text-shadow:0 2px 5px #000}.hpbar{height:21px;position:relative;background:#090d20;border:2px solid #dce5ff;border-radius:999px;overflow:hidden}.hpbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff496e,#ff8b70);transition:width .35s}.hpbar span{position:absolute;inset:0;text-align:center;font-size:.72rem;font-weight:900;line-height:17px;text-shadow:0 1px 3px #000}.player-hud{position:absolute;left:10px;bottom:8px;display:flex;align-items:end;width:min(43%,330px);z-index:3}.player-hud>img{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 6px 5px #000)}.player-hud>div{flex:1}.player-hud .hpbar i{background:linear-gradient(90deg,#24d986,#6af2c0)}.shield-line{display:flex;gap:5px;align-items:center;background:#0a0f2ed9;border-radius:8px;padding:4px 8px;font-size:.7rem}.shield-line span:first-child{color:#6ad9ff}.shield-line span:nth-child(3){margin-left:auto;color:#ffd46a}.reel-console{padding:8px 12px 12px;background:linear-gradient(#101745,#080d28);border-top:1px solid #5766a5;position:relative}.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:650px;margin:auto}.reel{height:92px;border:3px solid #6574b5;border-radius:18px;background:linear-gradient(#080d25,#1b2454,#080d25);overflow:hidden;position:relative;cursor:pointer}.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:20px;z-index:2;pointer-events:none}.reel::before{top:0;background:linear-gradient(#030615,transparent)}.reel::after{bottom:0;background:linear-gradient(transparent,#030615)}.reel.held{border-color:#ffe06a;box-shadow:0 0 17px #ffc857}.reel.spinning .symbol{animation:reelBlur .13s infinite}.symbol{height:100%;display:flex;align-items:center;justify-content:center;gap:6px}.symbol img{width:76px;height:76px;object-fit:contain}.symbol b{font-size:.72rem}.battle-actions{display:grid;grid-template-columns:2fr 1fr;gap:9px;max-width:650px;margin:8px auto 0}.spin,.burst{min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center}.spin{background:linear-gradient(135deg,#6c47ff,#c24fff);box-shadow:0 8px 20px #7b4aff55}.burst{background:linear-gradient(135deg,#d68219,#ffca52);color:#211405}.burst:disabled{filter:grayscale(1);opacity:.45}.spin small,.burst small{font-weight:600;font-size:.68rem}.combo{height:24px;text-align:center;font-weight:900;color:#ffe077;text-shadow:0 0 10px #ff9d00}.fx-layer{position:absolute;inset:0;z-index:5;pointer-events:none}.float-fx{position:absolute;font-size:1.25rem;font-weight:1000;animation:floatFx .9s forwards;text-shadow:0 2px 5px #000}.hit{animation:hitShake .35s}.healflash{animation:healGlow .65s}.modal{position:absolute;inset:0;z-index:20;background:#040716dc;display:grid;place-items:center;padding:18px}.modal[hidden]{display:none}.modal-card{width:min(100%,430px);max-height:90%;overflow:auto;text-align:center;background:linear-gradient(160deg,#222b67,#10163b);border:1px solid #8875e9;border-radius:24px;padding:24px;box-shadow:0 22px 60px #000}.modal-card h2{font-size:2rem;margin:7px}.modal-card p,.tutorial-card li{color:#ced6fb;line-height:1.5}.modal-card button{width:100%;margin-top:9px}.reward{margin:14px;background:#0b1132;border-radius:14px;padding:12px;display:flex;justify-content:space-between}.reward strong{color:#ffd568}.text-btn{border:0;background:transparent;color:#bfc9ff;padding:12px}.tutorial-card{text-align:left}.tutorial-card h2{text-align:center}.tutorial-card li{margin:8px 0}.loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(circle,#26337a,#080d28);z-index:99}.loader-orb{width:70px;height:70px;border:6px solid #343f82;border-top-color:#62e9e0;border-right-color:#ac63ff;border-radius:50%;animation:turn 1s linear infinite}.load-track{width:min(280px,70vw);height:8px;background:#222a5c;border-radius:99px;overflow:hidden}.load-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#2fe4dc,#a35eff);transition:width .2s}@keyframes turn{to{transform:rotate(360deg)}}@keyframes reelBlur{50%{transform:translateY(6px);filter:blur(3px)}}@keyframes floatFx{to{transform:translateY(-75px) scale(1.2);opacity:0}}@keyframes hitShake{20%,60%{transform:translateX(calc(-50% - 9px)) rotate(-2deg)}40%,80%{transform:translateX(calc(-50% + 9px)) rotate(2deg)}}@keyframes healGlow{50%{filter:drop-shadow(0 0 24px #62ffa4) brightness(1.5)}}@media(max-width:560px){.main-canvas{padding:8px 10px 16px}.topbar{grid-template-columns:58px 1fr 92px}.topbar select{width:92px;font-size:.78rem}.poster{min-height:330px}.guide-grid{grid-template-columns:1fr 1fr}.stage-canvas{padding:7px 9px;gap:7px}.forge{grid-template-columns:repeat(3,1fr)}.forge>div{grid-column:1/4;min-height:43px;flex-direction:row;justify-content:space-between;align-items:center}.upgrade{min-height:54px}.battle-canvas{grid-template-rows:48px minmax(215px,1fr) auto}.enemy-wrap{width:45%;top:11%}.enemy-wrap>img{height:min(25vh,180px)}.intent{right:6px;top:6px;padding:5px 8px}.reel{height:80px}.symbol img{width:62px;height:62px}.symbol b{display:none}.battle-actions{margin-top:6px}.spin,.burst{min-height:52px}}@media(max-height:520px) and (orientation:landscape){.stage-canvas{grid-template-rows:44px 0 minmax(120px,1fr) 54px 48px}.progress-card{display:none}.stage-rail{padding-top:5px;padding-bottom:5px}.stage-card{flex-basis:210px;padding:10px}.battle-canvas{grid-template-columns:1.25fr .75fr;grid-template-rows:44px 1fr}.battle-head{grid-column:1/3}.arena{grid-column:1}.reel-console{grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:center}.reels{grid-template-columns:1fr}.reel{height:57px}.battle-actions{grid-template-columns:1fr}.enemy-wrap>img{height:34vh}.player-hud{width:48%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Main follows the shared public-screen order: header, poster, summary, action. */
.main-canvas{
  width:min(100%,920px);
  height:min(720px,var(--live-height,100svh));
  min-height:0;
  padding:10px 18px 18px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:48px minmax(230px,1fr) auto 52px;
  gap:10px;
}
.main-canvas .topbar,
.main-canvas .poster,
.main-canvas .lead,
.main-canvas #runeStartBtn{grid-column:1;grid-row:auto}
.main-canvas .topbar{grid-template-columns:68px minmax(0,1fr) 112px}
.main-canvas .back-logo{
  width:64px;
  min-width:64px;
  justify-content:center;
  border:1px solid #7180bf;
  border-radius:12px;
  background:#111943;
}
.main-canvas .poster{width:min(100%,760px);min-height:0;justify-self:center}
.main-canvas .lead{padding:0 8px}
.main-canvas #runeStartBtn{width:min(100%,480px);justify-self:center}
.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

@media(max-width:560px){
  .main-canvas{padding:8px 10px 14px;grid-template-rows:48px minmax(230px,1fr) auto 52px;gap:8px}
  .main-canvas .topbar{grid-template-columns:60px minmax(0,1fr) 92px}
  .main-canvas .back-logo{width:56px;min-width:56px}
  .guide-grid{grid-template-columns:1fr}
}

@media(max-height:520px) and (orientation:landscape){
  .main-canvas{padding:6px 10px;grid-template-rows:42px minmax(120px,1fr) auto 46px;gap:6px}
  .main-canvas .back-logo{height:40px}
  .main-canvas .poster{border-radius:16px}
  .main-canvas #runeStartBtn{min-height:46px}
}

/* The live viewport variables are refreshed by game.js so an in-progress
   Stage/Battle cannot retain portrait geometry after rotation. */
.canvas,.ad-reserve{width:min(var(--live-width,100vw),920px)}
.play-page{height:var(--live-height,100svh)}
.play-page>.canvas{height:calc(var(--live-height,100svh) - 56px)}
.stage-card{flex-basis:264px;height:190px;padding:10px;grid-template-rows:18px 28px 54px 24px 42px!important}
.stage-card h3,.stage-card p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-card small{line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.stage-card h3{line-height:28px}
.stage-card p{line-height:24px}
.stage-card img{min-height:0!important}
.stage-card .monster-chip{height:42px;padding:0 9px;display:flex;align-items:center;line-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

@media(max-height:520px) and (orientation:landscape){
  .stage-canvas{padding:6px 10px;gap:6px;grid-template-columns:minmax(0,1fr) 310px;grid-template-rows:44px minmax(0,1fr) 48px}
  .stage-canvas .screen-head{grid-column:1/-1;grid-row:1}
  .stage-canvas .progress-card{display:none}
  .stage-canvas .stage-rail{grid-column:1;grid-row:2/4;padding:0 calc(50% - 132px);align-items:center}
  .stage-canvas .stage-card{flex-basis:264px;padding:10px}
  .stage-canvas .forge{grid-column:2;grid-row:2;grid-template-columns:1fr;align-content:center;gap:5px}
  .stage-canvas .forge>div{grid-column:1;min-height:40px;flex-direction:row;justify-content:space-between;align-items:center}
  .stage-canvas .upgrade{min-height:48px;grid-template-columns:auto 1fr auto;grid-template-rows:1fr;align-items:center}
  .stage-canvas .upgrade img{grid-row:1!important;width:32px!important;height:32px!important}
  .stage-canvas .upgrade small{grid-column:3;grid-row:1}
  .stage-canvas #enterBattle{grid-column:2;grid-row:3;min-height:48px}
  .battle-canvas{grid-template-columns:1.25fr .75fr;grid-template-rows:44px minmax(0,1fr)}
  .battle-canvas .battle-head{grid-column:1/3}
  .battle-canvas .arena{grid-column:1;min-height:0}
  .battle-canvas .reel-console{grid-column:2;grid-row:2;min-height:0;padding:6px 8px;display:grid;grid-template-rows:18px 82px 52px;gap:6px;align-content:center}
  .battle-canvas .combo{height:18px;line-height:18px;overflow:hidden}
  .battle-canvas .reels{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%}
  .battle-canvas .reel{height:82px;border-width:2px}
  .battle-canvas .symbol img{width:58px;height:58px}
  .battle-canvas .symbol b{display:none}
  .battle-canvas .battle-actions{grid-template-columns:2fr 1fr;gap:5px;width:100%;margin:0}
  .battle-canvas .spin,.battle-canvas .burst{min-height:52px}
  .battle-canvas .enemy-wrap>img{height:min(34vh,112px)}
  .battle-canvas .player-hud{width:48%}
  .battle-canvas .modal{padding:8px}
  .battle-canvas .modal-card{max-height:100%;padding:12px 18px}
  .battle-canvas .modal-card h2{font-size:1.55rem;margin:3px}
  .battle-canvas .modal-card p{margin:6px 0;line-height:1.3}
  .battle-canvas .reward{margin:7px;padding:8px}
  .battle-canvas .modal-card button{margin-top:4px;min-height:42px;padding:7px 16px}
}