:root{--ink:#eafaff;--muted:#b1cfe3;--line:#3478a0;--cyan:#51ecff;--gold:#ffd76b;--bg:#06152e;--panel:#0b2a4d}*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid #fff;outline-offset:3px}#app{width:100%;min-height:100vh;overflow:hidden;background:radial-gradient(ellipse at 80% 0%,#125780 0%,transparent 34%),#06152e}.top{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px max(15px,calc((100vw - 1080px)/2));background:#061a35e8;border-bottom:1px solid #397d9b}.brand{display:flex;align-items:center;gap:9px;min-width:0}.brand b{font-size:clamp(19px,4.2vw,28px);letter-spacing:-1.3px;white-space:nowrap}.brand b span{color:#54e9ff}.brand small{display:block;font-size:8px;letter-spacing:1.4px;color:#b6eaff;font-weight:900}.leaf{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#22c2ec,#1553a8);box-shadow:0 0 0 2px #5ae5ff,0 0 20px #16b8fa80;font-size:27px}.wallet{display:flex;align-items:center;gap:5px;white-space:nowrap}.wallet>span,#sound{border:1px solid #2f87a9;background:#0d3154;padding:7px;border-radius:11px;font-size:12px}#sound{min-width:33px}main{max-width:1100px;margin:auto;padding-bottom:115px}.view{display:none;padding:20px clamp(14px,3.5vw,34px)}.view.active{display:block}.hero{position:relative;min-height:460px;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 50% 15%,#147fa3,#123c70 47%,#051d3d 100%);border:1px solid #3998c2;box-shadow:0 20px 65px #0007}.aurora{position:absolute;inset:-15% -25% 35%;background:linear-gradient(125deg,transparent 12%,#43ffc750 28%,transparent 40%,#41adff7a 50%,transparent 61%,#b654ff55 70%,transparent 81%);filter:blur(24px);animation:sky 12s ease-in-out infinite alternate;pointer-events:none}.mountains{position:absolute;inset:32% 0 0;background:linear-gradient(160deg,transparent 20%,#e4f9ff99 21%,transparent 24%),linear-gradient(145deg,transparent 36%,#c8f0ff55 37%,transparent 41%),linear-gradient(150deg,transparent 24%,#1c6086 24% 40%,transparent 40%),linear-gradient(210deg,transparent 26%,#14557e 26% 58%,transparent 58%),linear-gradient(160deg,transparent 32%,#103c63 32% 60%,transparent 60%),linear-gradient(0deg,#0a2d49 5%,transparent 80%);opacity:.95;pointer-events:none}.hero-copy{position:relative;z-index:2;text-align:center;padding:35px 16px 0;max-width:740px;margin:auto}.eyebrow{color:var(--gold);font-size:12px;font-weight:900;letter-spacing:2.5px}.hero h1{font-size:clamp(29px,7.5vw,64px);line-height:1.06;letter-spacing:-1.7px;margin:16px 0}.hero h1 em{font-style:normal;color:#66efff}.hero p{max-width:550px;margin:0 auto 22px;font-size:clamp(14px,2.6vw,19px);text-shadow:0 2px 5px #001}.cta{border:2px solid #ffdd9e;border-radius:18px;background:linear-gradient(#ff5b5b,#c51335);box-shadow:0 7px 0 #710d26,0 0 22px #ff36458a;color:#fff;padding:14px 22px;font-size:17px;font-weight:1000;letter-spacing:.3px;transition:transform .15s}.cta:active{transform:translateY(5px);box-shadow:0 2px 0 #710d26}.cta span{margin-left:12px}.hero-friends{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;margin:4px auto 0;height:185px;max-width:650px;overflow:hidden}.hero-friends img{width:27%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px #001);animation:bob 3s ease-in-out infinite}.hero-friends img:nth-child(2){width:35%;height:115%;animation-delay:.4s}.hero-friends img:nth-child(3){animation-delay:.9s}.hero-friends img:nth-child(4){animation-delay:1.2s}.section-head{display:flex;align-items:end;justify-content:space-between;gap:8px;margin:29px 0 14px}h2{font-size:clamp(24px,5vw,34px);line-height:1.1;margin:6px 0 0;letter-spacing:-.7px}.link{border:0;background:none;color:var(--cyan);font-weight:800;font-size:13px}.hero-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.hero-card,.pick{border:2px solid #2c7b9c;border-radius:18px;background:linear-gradient(160deg,#195276,#092746);text-align:center;padding:9px 5px;min-width:0;transition:transform .18s,border-color .18s}.hero-card img,.pick img{width:100%;height:105px;object-fit:contain;filter:drop-shadow(0 6px 6px #0006)}.hero-card b,.pick b{display:block;font-size:14px}.hero-card small,.pick small{display:block;color:#b2d7e9;font-size:11px}.hero-card:hover,.pick:hover{transform:translateY(-3px)}.pick.selected,.hero-card.selected{border-color:#ffe276;box-shadow:0 0 0 2px #ffe27640,0 0 22px #ffd95d44;background:linear-gradient(155deg,#21688a,#0b3152)}.world-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.world-card{border:1px solid #418cad;border-radius:18px;background:#0a2948;overflow:hidden}.world-scene{height:140px;position:relative;overflow:hidden;background:linear-gradient(170deg,#319bc5,#6fc8dd 40%,#1a567b 41%,#0c3455 100%)}.world-scene:before{content:' ';position:absolute;inset:10% 0 0;background:linear-gradient(155deg,transparent 30%,#e8f8ff 31% 34%,transparent 35%),linear-gradient(145deg,transparent 24%,#145277 25% 58%,transparent 59%);clip-path:polygon(0 100%,24% 15%,45% 100%,70% 2%,100% 100%)}.world-scene:after{content:'🌲 🌲 🌲 🌲 🌲';position:absolute;bottom:0;left:0;right:0;font-size:28px;letter-spacing:9px;white-space:nowrap;overflow:hidden}.world-card:nth-child(2) .world-scene{background:linear-gradient(#164e9b,#84dcff 60%,#a6e9ff)}.world-card:nth-child(3) .world-scene{background:linear-gradient(125deg,#06356d,#14a1a5 35%,#533c9b 65%,#0d325c)}.world-card .world-info{padding:14px}.world-card b{font-size:17px}.world-card p{color:var(--muted);font-size:13px;margin:5px 0}.feature{display:flex;gap:16px;padding:22px;border:1px solid #276c93;border-radius:18px;margin-top:24px;background:#0b2b4b}.feature-icon{font-size:34px}.feature p{margin:5px 0 0;color:var(--muted)}.intro{color:var(--muted);max-width:600px}.setup{display:grid;grid-template-columns:1fr;gap:15px}.setting{border:1px solid #296d90;border-radius:18px;padding:15px;background:#092443}.setting h3{margin:0 0 12px;color:#f6dd93;font-size:15px}.pick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.world-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.world-picks button{background:#133d63;border:2px solid #357d9c;border-radius:12px;padding:12px 6px;font-size:13px}.world-picks button.selected{border-color:var(--gold);background:#275b74}.full{width:100%}.arena{position:relative;overflow:hidden;height:clamp(280px,57vw,460px);border:2px solid #54bff0;border-radius:24px;background:linear-gradient(#156f9c,#71d1e6 56%,#195b7c 57%,#0d3c5d);isolation:isolate}.arena.ice{background:linear-gradient(#174a9e,#8bceff 58%,#86d6f5 59%,#225e97)}.arena.aurora-world{background:linear-gradient(#081a4c,#154e7d 55%,#16506d 56%,#09253d)}.arena .mountains{inset:12% 0 0}.arena-top{position:relative;z-index:2;display:flex;justify-content:space-between;padding:12px;font-size:11px;letter-spacing:1px;font-weight:900;color:#fff}.fighters{position:absolute;inset:43px 10px 25px;display:flex;align-items:flex-end;justify-content:space-between;gap:4px}.fighter{position:relative;z-index:3;width:44%;height:100%;display:flex;flex-direction:column}.stat{display:flex;justify-content:space-between;gap:4px;font-size:12px;text-shadow:0 2px 4px #001}.hp{height:11px;background:#06162d;border:1px solid #e2faff;border-radius:15px;overflow:hidden;margin:4px 0}.hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#13ce86,#b7fc69);transition:width .4s}.enemy .hp i{background:linear-gradient(90deg,#ff416b,#ffc469)}.sprite-wrap{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0;transform-origin:bottom center;animation:bob 2s ease-in-out infinite}.sprite-wrap img{width:100%;height:100%;max-height:300px;object-fit:contain;filter:drop-shadow(0 9px 8px #0019)}.enemy .sprite-wrap img{transform:scaleX(-1)}.clash{align-self:center;z-index:3;color:#ffe177;font-weight:1000;font-size:clamp(26px,6vw,55px);text-shadow:0 4px 2px #9c2514,0 0 22px #ff9e00}.ground{position:absolute;inset:auto 0 0;height:20%;background:linear-gradient(#1e6d78,#073c4d);clip-path:polygon(0 45%,12% 22%,28% 49%,40% 13%,58% 38%,72% 15%,100% 40%,100% 100%,0 100%)}.float-text{position:absolute;top:36%;left:30%;z-index:9;font-size:36px;font-weight:1000;color:#ffe88e;text-shadow:0 3px 3px #531;pointer-events:none;opacity:0}.float-text.show{animation:float .8s ease-out}.sprite-wrap.attack{animation:attack .55s ease-in-out}.sprite-wrap.hit{animation:hit .45s ease-in-out}.sprite-wrap.guard{animation:guard .65s ease-in-out}.sprite-wrap.dodge{animation:dodge .6s ease-in-out}.battle-panel{padding:15px;border:1px solid #2d82a5;border-radius:18px;background:#0b294b;margin-top:12px}.dialogue{min-height:54px;text-align:center;font-size:16px;font-weight:800;color:#ffe4a0;padding:8px}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.actions button{border:1px solid #60aeda;border-radius:14px;background:linear-gradient(#1d6ba1,#0c396e);min-height:74px;font-size:23px}.actions button:nth-child(2){background:linear-gradient(#bc407d,#69245f)}.actions button:nth-child(3){background:linear-gradient(#2f947a,#0d605a)}.actions button:nth-child(4){background:linear-gradient(#7b5bd0,#392775)}.actions b{display:block;font-size:14px}.actions small{display:block;color:#e5f7ff;font-size:11px}.actions button:disabled{opacity:.45}.battle-note{text-align:center;font-size:11px;color:var(--muted);margin:15px 0 0}.secondary{border:1px solid #5da5cb;border-radius:14px;padding:14px;margin-top:13px;background:#143b5b;font-weight:800}.roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.roster .hero-card{padding:20px}.roster img{height:150px}.bottom{position:fixed;z-index:20;bottom:0;left:0;right:0;display:flex;justify-content:center;background:#061a34f2;border-top:1px solid #2888ad;padding:8px 8px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px #0018}.bottom button{width:min(25%,150px);border:0;background:transparent;color:#b3d7e9;font-weight:900;font-size:10px;padding:3px}.bottom button span{display:block;font-size:23px}.bottom button.selected{color:#ffe175}.world-list .world-card{min-width:0}@keyframes sky{to{transform:translateX(15%) skewX(10deg)}}@keyframes bob{50%{transform:translateY(-10px)}}@keyframes attack{40%{transform:translateX(35px) scale(1.1)}70%{transform:translateX(-4px)}}@keyframes hit{25%,75%{transform:translateX(-12px) rotate(-8deg);filter:brightness(2)}}@keyframes guard{50%{transform:scale(.9);filter:drop-shadow(0 0 30px #64faff)}}@keyframes dodge{35%{transform:translateX(-35px) rotate(-9deg);opacity:.5}70%{transform:translateX(10px)}}@keyframes float{0%{opacity:1;transform:translateY(15px) scale(.8)}75%{opacity:1}100%{opacity:0;transform:translateY(-55px) scale(1.2)}}@media(max-width:650px){.top{padding:11px 12px}.wallet>span:nth-child(2){display:none}.hero{min-height:430px}.hero-friends{height:145px}.hero-list{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-card img{height:90px}.world-list{grid-template-columns:1fr}.world-card{display:flex;align-items:stretch}.world-scene{width:42%;height:auto;min-height:116px;flex-shrink:0}.world-info{flex:1}.pick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pick img{height:80px}.world-picks{grid-template-columns:1fr}.world-picks button{min-height:48px}.roster{grid-template-columns:repeat(2,minmax(0,1fr))}.roster img{height:115px}}@media(max-width:380px){.brand b{font-size:18px}.brand small{font-size:7px}.wallet>span{font-size:10px;padding:6px}.hero h1{font-size:29px}.hero p{font-size:13px}.hero-friends{height:128px}.pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Aurora Edition: genuine independent vector world artwork */
.hero{background:linear-gradient(#06183155,#051c3b99),url("scenes/pine.svg") center/cover no-repeat!important}
.hero .mountains,.arena .mountains{display:none}.hero-copy{background:radial-gradient(ellipse,#04192caa,transparent 80%)}
.world-card:nth-child(1) .world-scene{background:url("scenes/pine.svg") center/cover!important}.world-card:nth-child(2) .world-scene{background:url("scenes/ice.svg") center/cover!important}.world-card:nth-child(3) .world-scene{background:url("scenes/aurora-world.svg") center/cover!important}
.arena.pine{background:linear-gradient(#06183133,#051c3b88),url("scenes/pine.svg") center/cover!important}.arena.ice{background:linear-gradient(#06183133,#051c3b88),url("scenes/ice.svg") center/cover!important}.arena.aurora-world{background:linear-gradient(#06183133,#051c3b88),url("scenes/aurora-world.svg") center/cover!important}
.fighter img,.hero-friends img{filter:drop-shadow(0 9px 8px #00182b) drop-shadow(0 0 12px #8df7ff88)}
@media(max-width:650px){.hero-list{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-card img{height:110px}.arena{min-width:0!important;max-width:100%!important}.actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.actions button{min-width:0}.bottom{max-width:100vw}}

/* Iteration 1: combat motion, distinct opponents, responsive counters */
@keyframes gn-idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes gn-glow{0%,100%{filter:drop-shadow(0 0 4px #fff3)}50%{filter:drop-shadow(0 0 20px #80ffff)}}
.fighter .sprite-wrap img{animation:gn-idle 2.3s ease-in-out infinite,gn-glow 3s ease-in-out infinite}
.fighter:nth-child(2) .sprite-wrap img{animation-delay:-1.1s}
.streak{color:#ffd68a}
@media(max-width:520px){.wallet{gap:4px!important}.wallet span{font-size:11px!important;padding:5px!important}.top{padding:9px!important}.brand small{font-size:8px!important}}
@media(prefers-reduced-motion:reduce){.fighter .sprite-wrap img{animation:none!important}}

/* WAVE B — Real tactical animal battles: focus, combos, telegraphed rivals, world rules. */
.arena{isolation:isolate}
.world-effect{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid #c9f3ff7c;border-radius:999px;background:#041d39ad;font-size:10px;white-space:nowrap}
.arena-top{gap:5px;flex-wrap:wrap}
.battle-readout{display:flex;align-items:center;gap:14px;padding:7px 8px 12px}
.focus-meter{flex:1;min-width:0}.focus-meter>span{display:flex;justify-content:space-between;color:#a9f4ff;font-weight:900;font-size:11px;letter-spacing:.6px}
.focus-track{height:9px;border:1px solid #68b8c6;border-radius:20px;background:#052b48;overflow:hidden;margin-top:6px}.focus-track i{display:block;height:100%;width:35%;background:linear-gradient(90deg,#40c4f3,#f6db7e);transition:width .35s}
.combo-meter{padding:7px 10px;border:1px solid #e9b85a;border-radius:12px;color:#ffe3a3;font-size:12px;font-weight:900;white-space:nowrap}
.telegraph{background:#123e5f;border-left:4px solid #ffd975;border-radius:6px;padding:8px 12px;font-weight:800;font-size:13px;color:#fff1bf}
.battle-log{list-style:none;padding:0;margin:9px 0 0;display:grid;gap:4px;max-height:96px;overflow-y:auto;overscroll-behavior:contain}
.battle-log li{font-size:11px;color:#b4d8e7;padding:3px 7px;border-left:2px solid #438da6;background:#08243e}
.fx-layer{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.spark{position:absolute;display:block;width:10px;height:10px;border-radius:50%;background:#ffeb8d;box-shadow:0 0 18px 5px #ffbb49a9;animation:gn-particle .8s ease-out var(--delay) both}
.spark.special{background:#84eaff;box-shadow:0 0 22px 7px #51d7ffbb}
.spark.guard,.spark.dodge{background:#93f9d3;box-shadow:0 0 14px 5px #61ffa3a8}
@keyframes gn-particle{0%{opacity:1;transform:translate(0,0) scale(.4)}30%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.4)}}
.sprite-wrap.special{animation:gn-power .68s ease-out!important}
@keyframes gn-power{0%{transform:scale(1)}35%{transform:scale(1.18) translateX(28px);filter:drop-shadow(0 0 34px #b4efff)}70%{transform:scale(.95)}100%{transform:scale(1)}}
.actions button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:650px){.world-effect{font-size:9px}.arena-top{padding:8px}.battle-panel{padding:11px}.dialogue{font-size:14px;min-height:45px}.actions button{min-height:73px}.battle-readout{gap:7px}.combo-meter{font-size:10px;padding:7px}.fighter .stat{font-size:10px}}
@media(prefers-reduced-motion:reduce){.spark{animation-duration:.01ms!important}.sprite-wrap.special{animation:none!important}}

/* Wave C — independently animated weather, readable forecasts and tactical world abilities */
.arena{overflow:hidden}.weather{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}.weather-particle{position:absolute;left:var(--x);width:var(--size);height:var(--size);opacity:0;animation-duration:var(--speed);animation-delay:var(--delay);animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform,opacity}
.weather.pine .weather-particle{top:72%;border-radius:50%;background:#f9eb7a;box-shadow:0 0 9px 3px #ffffa1;animation-name:gn-firefly}
.weather.ice .weather-particle{top:-8%;border-radius:50%;background:#fff;box-shadow:0 0 5px 1px #c4edff;animation-name:gn-snow}
.weather.aurora-world .weather-particle{top:8%;height:32%;width:clamp(7px,1.5vw,20px);border-radius:50%;background:linear-gradient(transparent,#81ffc070,transparent);filter:blur(6px);animation-name:gn-aurora-stream}
.weather-hud{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis;z-index:6;padding:5px 10px;border-radius:100px;background:#061c35d8;color:#f3fbff;font-size:10px;font-weight:900;letter-spacing:.2px;border:1px solid #a6ecff8a}
.world-forecast{padding:9px 12px;border-radius:10px;border:1px solid #5ab9cd;background:#063653;color:#d6f7ff;font-weight:800;font-size:12px;margin-bottom:8px}
.actions .world-action{grid-column:1/-1;min-height:62px;background:linear-gradient(135deg,#27788d,#165d53 55%,#1b406f);border-color:#a4e6ae;display:flex;align-items:center;justify-content:center;gap:9px;font-size:23px}
.actions .world-action b,.actions .world-action small{display:inline;font-size:14px}.actions .world-action small{font-size:11px;color:#e6ffe7}
@keyframes gn-firefly{0%{opacity:0;transform:translate(-20px,0)}20%,65%{opacity:.85}100%{opacity:0;transform:translate(35px,-115px)}}
@keyframes gn-snow{0%{opacity:0;transform:translate(0,-20px)}10%,90%{opacity:.95}100%{opacity:0;transform:translate(55px,380px)}}
@keyframes gn-aurora-stream{0%{opacity:0;transform:translateX(-30px) skewX(-12deg) scaleY(.8)}35%{opacity:.8}100%{opacity:0;transform:translateX(70px) skewX(12deg) scaleY(1.4)}}
@media(max-width:650px){.weather-hud{font-size:9px;bottom:4px}.world-forecast{font-size:11px}.actions .world-action{min-height:60px}.actions .world-action small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.weather-particle{animation:none!important;opacity:.5!important}}
/* Wave D v18 — NEW real-time, mobile-touch playable Northern Clash arena */
.mode-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-pick button{min-height:75px}.mode-pick small{display:block;font-size:11px;line-height:1.3;margin-top:4px;letter-spacing:0}.mode-pick .secondary{margin:0;border:2px solid #69d8e6;background:linear-gradient(#195783,#08294c)}
.action-fight{max-width:980px;margin:0 auto 28px;border:1px solid #4ac6e7;border-radius:19px;background:#071f3c;overflow:hidden;box-shadow:0 12px 45px #0008}
.action-topline{display:flex;justify-content:space-between;gap:8px;padding:12px 14px 5px;color:#ffe397;font-size:12px;letter-spacing:.9px;font-weight:900}
.action-health{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:6px 14px 12px}.action-health>div{min-width:0}.action-health b{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-health>div:last-child{text-align:right}.action-hp{height:14px;border:2px solid #b3edff;border-radius:12px;background:#2c3852;overflow:hidden;margin-top:5px}.action-hp i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#15ae81,#7affac);transition:width .15s}.action-hp.rival i{background:linear-gradient(90deg,#e95768,#ffbb66)}
.action-canvas-wrap{position:relative;background:#164c78;overflow:hidden;touch-action:none}.action-canvas-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:fill}
.action-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;background:linear-gradient(#031a36cc,#061f3cdb);color:white}.action-overlay strong{font-size:clamp(22px,5vw,38px);text-shadow:0 4px 8px #001b32}.action-overlay p{max-width:420px;font-size:clamp(12px,2.5vw,17px)}.action-overlay .cta{font-size:clamp(14px,3vw,20px);padding:10px 22px}
.action-status{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px;background:#103c5f;color:#d7f7ff;font-weight:750;font-size:13px}.action-status span:first-child{min-width:0}.action-status span:last-child{white-space:nowrap;color:#ffdd8d}
.action-controls{display:flex;justify-content:space-between;gap:10px;padding:12px;touch-action:manipulation}.action-direction,.action-moves{display:flex;align-items:center;gap:7px}.action-controls button{touch-action:none;user-select:none;-webkit-user-select:none;border:2px solid #78dafa;border-radius:15px;background:linear-gradient(#2772a5,#10436c);box-shadow:0 4px 0 #052b4e;color:white;min-width:62px;min-height:67px;font-size:24px;font-weight:950}.action-controls button small{display:block;font-size:9px;letter-spacing:.6px}.action-controls button.pressed{transform:translateY(3px);background:#2ba6c3;box-shadow:0 1px 0 #052b4e}.action-controls .action-special{background:linear-gradient(#ac539a,#622e80);border-color:#eab5ff}.action-toolbar{display:flex;justify-content:center;gap:9px;padding:0 12px 8px}.action-toolbar button{margin:0;min-width:0;font-size:12px;padding:9px 11px}.action-fight .battle-note{padding:0 12px 12px}
@media(max-width:650px){.mode-pick{grid-template-columns:1fr}.mode-pick button{min-height:64px}.action-topline{font-size:10px}.action-health{gap:8px}.action-health b{font-size:11px}.action-status{font-size:11px}.action-controls{gap:5px;padding:9px 6px}.action-direction,.action-moves{gap:4px}.action-controls button{min-width:0;width:clamp(40px,13.2vw,60px);min-height:58px;border-radius:11px;font-size:19px;padding:2px}.action-controls button small{font-size:8px}.action-toolbar button{font-size:11px;padding:9px 7px}.action-fight{border-radius:12px}}
@media(max-width:350px){.action-controls button{width:12.8vw;min-height:54px}.action-status{font-size:10px}}
@media(prefers-reduced-motion:reduce){.action-hp i{transition:none}}

/* GreatNorths Studio Rebuild v19 — functional UI, not a flattened mockup */
:root{--bg:#06152e;--panel:#09284c;--gold:#ffe18b;--cyan:#6eeaff}
html{overflow-x:clip;scroll-padding-bottom:112px}
body{background:#051226;overflow-x:clip}
#app{background:radial-gradient(circle at 15% 0,#104d79 0,transparent 33%),linear-gradient(180deg,#06172f,#041125);min-height:100dvh}
.top{position:sticky;top:0;z-index:30;background:#061a35f4;backdrop-filter:blur(16px);box-shadow:0 8px 24px #0017}
.top .brand b{font-weight:1000;letter-spacing:-1.2px}
.leaf{border-radius:50%;background:radial-gradient(circle at 28% 20%,#59ecff,#0a78c4 62%,#12386f);box-shadow:inset 0 0 0 2px #a7f7ff,0 0 16px #4ce6ff88}
.view{padding-top:14px}
.hero{background:linear-gradient(180deg,#061b3955 0%,#001e3966 45%,#02162ee8 100%),url("scenes/aurora-world.svg") center/cover no-repeat!important;min-height:525px;border:2px solid #69d7f0;border-radius:24px;box-shadow:0 0 0 5px #23689c30,0 22px 65px #0009}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 12%,#64ffff24,transparent 65%)}
.hero-sparkles{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#fff 1px,transparent 2px),radial-gradient(circle,#b8f9ff 1px,transparent 2px);background-size:89px 73px,137px 117px;animation:gn-drift 18s linear infinite;opacity:.55}
@keyframes gn-drift{to{background-position:120px 80px,-80px 100px}}
.hero-copy{padding:36px 16px 0;max-width:640px}
.hero h1{font-weight:1000;font-size:clamp(39px,7vw,74px);line-height:.99;letter-spacing:-2px;text-shadow:0 5px 22px #001b37}
.hero h1 em{color:#a5f7ff;text-shadow:0 0 28px #27d7f566}
.hero p{font-size:clamp(15px,2vw,20px);max-width:460px;font-weight:700;line-height:1.4}
.hero-friends{height:245px;margin-top:20px;align-items:end;max-width:660px;overflow:visible}
.hero-friends img{position:relative;object-fit:contain;filter:drop-shadow(0 10px 8px #0016) drop-shadow(0 0 16px #6ff8ff6b)}
.hero-friends img:nth-child(2){z-index:2;transform:scale(1.05)}
.cta{border-radius:18px;min-height:60px;padding:13px 26px;box-shadow:0 5px 0 #790b27,0 0 22px #ff365e99;font-size:clamp(16px,2.7vw,21px);touch-action:manipulation}
.home-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 26px}
.home-action{border:1px solid #46c7e5;border-radius:16px;padding:16px 10px;background:linear-gradient(145deg,#154e77,#072644);display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column;min-height:110px;box-shadow:inset 0 1px #9bf3ff55,0 8px 19px #0017;transition:transform .18s}
.home-action:active{transform:scale(.96)}
.home-action span{font-size:30px}.home-action b{font-size:14px}.home-action small{color:#b6e6f6;font-size:11px}
.section-head{margin:26px 0 13px}.section-head h2{font-size:clamp(23px,4vw,31px)}
.hero-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
.hero-card,.pick{position:relative;border:1px solid #43a3c7;background:linear-gradient(180deg,#1a6185 0%,#0c3458 54%,#061d3b 100%);border-radius:17px;box-shadow:inset 0 1px #b4f5ff5c,0 8px 17px #0016;overflow:hidden}
.hero-card:before,.pick:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 34%,#9af5ff30,transparent 65%);pointer-events:none}
.hero-card img,.pick img{position:relative;filter:drop-shadow(0 8px 5px #0018);transition:transform .25s}
.hero-card:active img,.pick:active img{transform:scale(1.08)}
.hero-card b,.pick b{font-weight:900;color:white}
.hero-card.selected,.pick.selected{border:2px solid #ffda69;box-shadow:0 0 0 3px #ffde7844,0 0 23px #ffd95d44}
.world-card{box-shadow:0 10px 22px #0017;border-color:#438fb3}
.world-card .world-scene:before,.world-card .world-scene:after{content:none!important}
.world-card .world-info{background:linear-gradient(160deg,#10395e,#061f3c)}
.world-card .world-info b{color:#fff;font-weight:900}
.bottom{background:#04172bf7;backdrop-filter:blur(18px);border-top:1px solid #4fb9e0;box-shadow:0 -7px 22px #0018}
.bottom button{min-height:59px;touch-action:manipulation}
.bottom button.selected{background:#1b486a;border-radius:12px}
main{padding-bottom:calc(130px + env(safe-area-inset-bottom))}
.arena{box-shadow:0 0 0 2px #3fd4f044,0 18px 45px #0018}
@media(max-width:650px){
 .top{padding:9px 11px}.brand b{font-size:19px}.brand small{font-size:7px;letter-spacing:.9px}
 .wallet{gap:4px}.wallet>span{font-size:11px;padding:6px}.wallet .streak{display:none}
 .view{padding:13px 12px 16px}
 .hero{min-height:490px;border-radius:19px}
 .hero-copy{padding:29px 12px 0}
 .hero h1{font-size:clamp(35px,9vw,52px);margin:13px 0}
 .hero p{font-size:15px;max-width:330px;margin-bottom:18px}
 .hero-friends{height:176px;margin-top:17px;overflow:hidden}
 .hero-friends img{width:25%;height:100%}
 .hero-friends img:nth-child(2){width:34%;height:115%}
 .cta{min-height:57px;padding:11px 16px;font-size:17px}
 .home-actions{gap:8px;margin:17px 0 20px}
 .home-action{min-height:91px;padding:9px 4px;border-radius:13px}
 .home-action span{font-size:23px}.home-action b{font-size:11px}.home-action small{font-size:10px}
 .hero-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
 .hero-card{padding:10px 3px;min-height:150px}
 .hero-card img{height:95px}.hero-card b{font-size:13px}
 .world-list{grid-template-columns:1fr}
 .world-card .world-scene{width:43%;min-height:122px}
 .bottom{padding:6px 6px calc(7px + env(safe-area-inset-bottom))}
 .bottom button{min-height:58px}.bottom button span{font-size:23px}
 .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
 .roster .hero-card{padding:12px 6px}.roster img{height:110px}
}
@media(max-width:370px){
 .hero{min-height:458px}.hero-friends{height:143px}
 .hero h1{font-size:34px}
 .hero-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .wallet>span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){.hero-sparkles,.hero-friends img{animation:none!important}}