@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#051510;color:#f4ffe9;font-family:Manrope,Arial,sans-serif}button{font:inherit;cursor:pointer;color:inherit}#game,#world{width:100%;height:100%;position:absolute;inset:0}#world{display:block}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,13,11,.75),transparent 53%),linear-gradient(0deg,rgba(0,10,9,.8),transparent 22%,transparent 80%,rgba(0,10,9,.45))}header{position:absolute;top:30px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center}.brand{font-size:43px;line-height:1;font-weight:800;letter-spacing:-3px;color:#d8ff9a}.brand span{display:block;letter-spacing:2px;font-size:10px;margin-top:10px;color:#aec3b7}.topright{display:flex;gap:12px;align-items:center}.live{font-size:11px;letter-spacing:2px;color:#b8c9bb;margin-right:14px}.topright button{background:#102b2480;border:1px solid #9cbe8a30;border-radius:50%;width:40px;height:40px;font-size:19px}.hud{position:absolute;top:145px;left:42px;width:228px}.energy-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:#bed1c0}.energy-label b{color:#d6ff98;letter-spacing:0}.energy-track{height:5px;background:#8db09f25;margin-top:12px;border-radius:10px;overflow:hidden}#energy{width:100%;height:100%;background:#cbff78;box-shadow:0 0 16px #baff57;transition:width .15s}.stats{display:flex;gap:30px;margin-top:24px;align-items:center}.stats strong{font-weight:500;font-size:31px;display:block;font-variant-numeric:tabular-nums}.stats span{font-size:10px;letter-spacing:2px;color:#90a99d}.stats i{height:34px;width:1px;background:#91b39830}.coordinates{position:absolute;right:42px;bottom:110px;text-align:right;font-size:10px;letter-spacing:2px;color:#a4b9ae;line-height:2}.coordinates span{letter-spacing:0;font-size:13px;color:#e6f2dc}.panel{position:absolute;left:8%;top:36%;max-width:530px}.eyebrow{font-size:10px;color:#c6f393;letter-spacing:2.5px}h1{font-weight:500;font-size:clamp(46px,6vw,84px);line-height:1.04;letter-spacing:-4px;margin:20px 0}h1 span{color:#c7ff71}p{font-size:15px;line-height:1.8;color:#b9cbbf}.primary{margin-top:20px;background:#d0ff83;border:0;border-radius:40px;padding:17px 24px;color:#16301c;font-weight:800;min-width:245px;text-align:left;box-shadow:0 0 35px #beff6612}.primary span{float:right;margin-left:25px}.primary:hover{background:#e4ffb2;transform:translateY(-2px)}.hint{font-size:11px;color:#8da598;margin-top:18px}.hidden{display:none!important}footer{position:absolute;bottom:28px;left:40px;right:40px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px;color:#b0c3b5}footer>div{display:flex;align-items:center;gap:6px}kbd{display:inline-grid;place-items:center;font:11px Manrope,sans-serif;width:25px;height:26px;background:#b9dab80a;border:1px solid #acc9ac30;border-radius:5px;color:#d9e8d3}kbd.space{width:75px;margin-left:16px}footer span{margin-left:5px}.legend{gap:20px}.legend span{display:flex;align-items:center;gap:6px}.orb{width:8px;height:8px;background:#d4ff72;border-radius:50%;box-shadow:0 0 10px #d4ff72}#toast{position:absolute;top:23%;left:50%;transform:translateX(-50%);font-size:14px;color:#d8ff94;text-shadow:0 0 20px #b9ff7f;transition:opacity .3s}#effects{margin-top:20px;font-size:12px;color:#bdffe9;line-height:2}.secondary{display:block;background:transparent;border:1px solid #bfff7760;border-radius:25px;padding:12px 25px;margin-top:15px}.playing .vignette{background:linear-gradient(0deg,#041511b0,transparent 20%,transparent 80%,#04151170)}#touch{display:none}#error{position:absolute;inset:35% 20%;background:#11291f;padding:40px;border-radius:20px}button:focus-visible{outline:2px solid white;outline-offset:5px}@media(max-width:700px){header{top:20px;left:22px;right:22px}.brand{font-size:35px}.live{display:none}.hud{top:115px;left:22px;width:175px}.panel{top:36%;left:7%;right:7%}h1{font-size:57px}.eyebrow{font-size:9px}footer{left:22px;right:22px;bottom:20px}footer>div:first-child{display:none}.legend{font-size:11px}.coordinates{right:22px;bottom:60px}.hint{max-width:260px;line-height:1.7}.playing #touch{display:flex;position:absolute;bottom:65px;left:22px;right:22px;justify-content:space-between;align-items:end}.pad{display:grid;grid-template-columns:repeat(3,44px);gap:5px}.pad button:first-child{grid-column:2}.pad button:nth-child(2){grid-column:1}#touch button{touch-action:none;background:#143a2caa;border:1px solid #d1ff8b55;border-radius:12px;height:44px}.jump{width:85px;font-size:11px}.playing .coordinates{display:none}}

#damage{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 140px 35px #ff155f;opacity:0;transition:opacity .12s}.combat-stats{display:grid;gap:8px;margin-top:20px;font-size:10px;letter-spacing:1px;color:#bab3e4}.combat-stats span{display:flex;justify-content:space-between;align-items:center}.combat-stats b{font-size:17px;color:#f1cdff;letter-spacing:0}.playing .vignette{background:linear-gradient(0deg,#0c082170,transparent 17%,transparent 85%,#0c082170)}.topright button{background:#24144880;border-color:#b699f340}.coordinates b{font-weight:500;color:#ffabd9}#toast{color:#fff0b3;text-shadow:0 0 18px #e64fff}.hint{line-height:1.8}@media(max-width:700px){.combat-stats{margin-top:12px;gap:5px;font-size:9px}.combat-stats b{font-size:14px}.hud{width:185px}.stats{margin-top:14px}.panel{top:43%}h1{font-size:45px;margin:12px 0}.panel p{font-size:13px}.primary{margin-top:9px}.hint{font-size:10px;margin-top:10px}}
/* Lightbound */
body{background:#021719}.panel{left:5%;top:26%;max-width:390px}h1{font-size:clamp(45px,5vw,73px);letter-spacing:-3px}header{top:24px}.brand span{font-size:11px}.hud{display:none;top:125px;left:32px;width:230px}.playing .hud,.playing #score-dial{display:block}.power{padding:13px 15px;margin-bottom:8px;border-radius:12px;background:#051a20db;border:1px solid #b8ffd226;box-shadow:0 6px 24px #0004}.power>div:first-child{display:flex;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:.6px}.power b{font-size:11px}.energy-track{height:9px;margin-top:9px;background:#ffffff16}.energy-power{color:#ccff7b}.boost-power{color:#ffcc55}.magnet-power{color:#80dbff}.flip-power{color:#e29aff}.power .energy-track>div{height:100%;width:0;border-radius:8px;transition:width .12s;box-shadow:0 0 16px currentColor;background:currentColor}.energy-power .energy-track>div{width:100%;background:#caff77}.flip-power .energy-track>div{width:100%}.power.active{border-color:currentColor;box-shadow:0 0 24px #3fd6cc23}.energy-power.low{border-color:#ff6759;color:#ff6759}.combat-stats{background:#041c22c9;padding:12px 15px;border-radius:10px;color:#b2d8da}.combat-stats b{color:#f4ffeb}#score-dial{display:none;position:absolute;top:110px;left:50%;transform:translateX(-50%);text-align:center;width:165px;height:165px;border:2px solid #b9ff6f80;border-radius:50%;background:radial-gradient(circle,#0b2c26ed 56%,#c7ff7920 58%,transparent 67%);box-shadow:0 0 35px #b9ff6f16;padding:29px 6px}#score-dial>span{font-size:10px;letter-spacing:2px;color:#cbffc2}#points{font-size:40px;display:block;font-variant-numeric:tabular-nums;line-height:1.3}#score-dial small{color:#b4d1c8;font-size:10px}#save-state{font-size:9px;margin-top:13px;color:#7fbaad;letter-spacing:1px}#wallet-form{margin-top:24px}#wallet-form label{font-size:11px;letter-spacing:1.4px;color:#cbf69e;display:block;margin-bottom:9px}#wallet{width:100%;border:1px solid #d2ff8f55;border-radius:12px;padding:15px;background:#051d1ced;color:#eaffd7;font:14px Manrope,Arial;outline:none}#wallet:focus{border-color:#d0ff83;box-shadow:0 0 20px #c3ff7220}#wallet-form small{display:block;font-size:11px;color:#91b7a9;margin-top:9px;line-height:1.5}#wallet-form .primary{width:100%;margin-top:16px}#wallet-error{font-size:12px;color:#ffa990;margin-top:10px;min-height:16px}.rules{display:grid;gap:8px;font-size:12px;color:#b4d2c3;margin-top:16px}.prizes{font-size:11px;color:#dbef9c}.panel p{font-size:14px}#leaderboard{position:absolute;right:4%;top:25%;width:300px;background:#03191ee8;padding:22px;border:1px solid #75d9c333;border-radius:20px;max-height:66vh;overflow:auto;backdrop-filter:blur(12px)}.board-heading{display:flex;align-items:center;justify-content:space-between}.board-heading .eyebrow{font-size:8px;letter-spacing:1.4px}.board-heading h2{font-size:23px;margin:9px 0 20px}.board-heading button{border:0;background:transparent;color:#b9ecd7;font-size:24px}.board-cols{display:flex;justify-content:space-between;font-size:10px;color:#83aba0;letter-spacing:1px}#board-rows{list-style:none;padding:0;margin:10px 0}#board-rows li{display:grid;grid-template-columns:25px 1fr auto;gap:6px;padding:12px 8px;border-bottom:1px solid #ffffff0c;font-size:12px}#board-rows li:nth-child(1){color:#ffde79;background:#bb861421;border-radius:7px}#board-rows li:nth-child(2){color:#e0ebf5;background:#97adc111;border-radius:7px}#board-rows li:nth-child(3){color:#e9a675;background:#bf783d14;border-radius:7px}#board-rows .address{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:monospace}a.address{color:inherit;text-decoration:none}a.address:hover{color:#d1ff83;text-decoration:underline}#board-empty{font-size:12px;color:#94b6b0;line-height:1.7}#your-rank{border-top:1px solid #caff7933;padding-top:15px;margin-top:16px;font-size:11px;color:#c6f58d;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}#your-rank small{width:100%;color:#91b7a9;line-height:1.6}.playing #leaderboard{display:none}#pickup-flash{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #bbff7c;opacity:0;transition:opacity .25s}#collection-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}.flying-orb{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--orb-color);box-shadow:0 0 12px var(--orb-color),0 0 38px var(--orb-color);will-change:transform,opacity}#toast{top:37%;font-size:18px;font-weight:700;letter-spacing:1px;text-align:center;width:80%;pointer-events:none}.coordinates{bottom:95px}.vignette{background:linear-gradient(90deg,#011617c9,transparent 48%),linear-gradient(0deg,#00131599,transparent 30%)}.playing .vignette{background:linear-gradient(0deg,#00131580,transparent 20%)}button:disabled{opacity:.5;cursor:wait}@media(max-width:1100px){#leaderboard{width:265px;right:3%}.panel{max-width:330px;left:4%}h1{font-size:54px}}@media(max-width:700px){#game{overflow-y:auto}#intro{position:relative;top:auto;left:auto;margin:125px 22px 22px;max-width:none}#leaderboard{position:relative;top:auto;right:auto;width:auto;margin:20px 22px 85px;max-height:none}#end{top:30%;left:7%;right:7%}.panel h1{font-size:48px}.panel p{font-size:14px}.hud{width:165px;left:14px;top:94px}.power{padding:9px 10px}.power>div:first-child{font-size:10px}.power b{font-size:9px}.combat-stats{font-size:10px}#score-dial{width:126px;height:126px;top:106px;left:auto;right:18px;transform:none;padding:20px 4px}#points{font-size:31px}#save-state{font-size:8px;margin-top:14px}#score-dial>span{font-size:8px}.playing #game{overflow:hidden}footer{position:fixed}.playing #touch{position:fixed}.playing .legend{display:none}#touch .jump{width:64px}.coordinates{display:none}#toast{top:52%;font-size:14px}.topright{gap:6px}.topright button{width:33px;height:33px}.rules{font-size:12px}.prizes{font-size:12px}}
/* Final layout review: independent menu columns and compact gameplay HUD. */
#radar{display:none;position:absolute;right:28px;top:120px;width:220px;padding:14px;background:#031b22e8;border:1px solid #6edfc43d;border-radius:18px}.playing #radar{display:block}.radar-title{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1px;color:#a4cfc5}.radar-title b{font-size:23px;color:#ff6080;letter-spacing:0}#radar-map{display:block;width:100%;height:auto}.radar-legend{display:flex;justify-content:space-between;font-size:10px;color:#ff8e9c}.radar-legend span+span{color:#83e5ed}#radar small{display:block;font-size:9px;line-height:1.5;color:#87ada7;margin-top:8px}.panel{top:150px;max-height:calc(100dvh - 225px);overflow-y:auto;padding:0 12px 18px 0;scrollbar-width:thin}#intro h1{font-size:clamp(42px,4.3vw,64px);margin:14px 0;line-height:1.04}#intro p{line-height:1.6;margin:12px 0}#wallet-form{margin-top:17px}.rules{line-height:1.5}.rules span{display:block}#leaderboard{top:150px;max-height:calc(100dvh - 225px)}#end{max-height:calc(100dvh - 230px);top:160px;background:#031b20ed;border:1px solid #a0e1b83b;border-radius:20px;padding:25px;z-index:6}#end h1{font-size:48px;line-height:1.08;letter-spacing:-2px;margin:16px 0}#end #result{overflow-wrap:anywhere;line-height:1.8}#end .primary,#end .secondary{width:100%;text-align:center;margin-top:12px}#end .primary span{float:none}#score-dial{z-index:2}#points{font-size:clamp(25px,3vw,40px);white-space:nowrap}#save-state{line-height:1.5;min-height:28px;max-width:165px;overflow-wrap:anywhere;letter-spacing:.3px}.topright{flex-shrink:0}.live{white-space:nowrap}.power span{white-space:nowrap}.power b{white-space:nowrap}.coordinates{right:30px}#toast{top:62%;font-size:16px;line-height:1.6;width:min(620px,80%)}.playing #end~footer{z-index:1}#your-rank{line-height:1.5}
@media(min-width:701px) and (max-height:720px){header{top:16px}.brand{font-size:34px}.panel,#leaderboard{top:110px;max-height:calc(100dvh - 170px)}#intro h1{font-size:42px}.hud{top:94px}.power{padding:9px 12px;margin-bottom:6px}#radar{top:94px;width:180px;padding:11px}#score-dial{top:95px}footer{bottom:17px}#end{top:110px;max-height:calc(100dvh - 170px)}#end h1{font-size:38px}.combat-stats{gap:5px;margin-top:12px;padding:9px 12px}.coordinates{display:none}}
@media(min-width:701px) and (max-width:950px){#intro{max-width:310px}#leaderboard{width:270px}.live{display:none}.hud{width:185px;left:18px}#radar{right:18px;width:180px}#score-dial{width:135px;height:135px;padding-top:23px}#points{font-size:30px}#score-dial>span{font-size:8px}.power>div:first-child{font-size:10px}.power b{font-size:9px}}
@media(max-width:700px){#intro{position:relative;top:auto;max-height:none;overflow:visible;padding:0;margin-top:112px}#leaderboard{top:auto;max-height:none;margin-bottom:100px}#intro h1{font-size:46px}#end{position:fixed;top:95px;left:18px;right:18px;max-height:calc(100dvh - 180px);max-width:none;padding:22px}#end h1{font-size:36px}#end p{font-size:14px}#radar{top:272px;right:14px;width:128px;padding:8px}.radar-title{font-size:8px;letter-spacing:.5px}.radar-title b{font-size:17px}#radar small{display:none}.radar-legend{font-size:8px;gap:3px}.hud{left:12px;width:160px;top:93px}.power{padding:9px;margin-bottom:6px}.power>div:first-child{font-size:9px}.combat-stats{margin-top:10px;gap:5px;padding:9px}#score-dial{right:14px;top:100px;width:128px;height:128px}#save-state{max-width:120px;font-size:8px}#toast{top:auto;bottom:180px;width:86%;font-size:13px}.playing #game{overflow:hidden}#touch{z-index:4}.legend{flex-wrap:wrap}header{left:18px;right:14px}.brand{font-size:33px}.brand span{font-size:9px}.topright button{width:30px;height:30px}.topright{gap:4px}footer{font-size:10px}#wallet{font-size:16px}}
@media(max-width:700px) and (max-height:690px){#radar{top:247px;width:112px}.hud{width:155px}.energy-track{height:6px;margin-top:7px}.power{padding:7px 9px}.combat-stats{padding:7px 9px}.power>div:first-child{font-size:9px}#score-dial{width:112px;height:112px;padding-top:15px}#points{font-size:27px}#score-dial small{font-size:8px}#toast{bottom:150px}}
#intro h1{letter-spacing:-1.5px;word-spacing:1px}#end{background:#041c20}#game[data-mode="paused"] .hud,#game[data-mode="paused"] #score-dial,#game[data-mode="paused"] #radar,#game[data-mode="paused"] #touch,#game[data-mode="paused"] #toast,#game[data-mode="ended"] #toast,#game[data-mode="intro"] #toast{display:none!important}#game[data-mode="paused"] #leaderboard{display:none}#end .eyebrow{line-height:1.7;display:block}#intro .secondary{margin-top:12px;font-size:14px}#wallet-error:empty{min-height:0;margin:0}#intro small,.rules,.prizes{font-size:12px}#board-rows li{grid-template-columns:22px minmax(0,1fr) auto}#your-rank small{font-size:11px}#intro{scrollbar-color:#80aa80 #092526}
@media(max-width:700px){#intro{left:auto!important;right:auto!important;margin:112px 14px 22px;padding:20px;background:#03191ee8;border:1px solid #75d9c329;border-radius:18px}#intro h1{font-size:42px;letter-spacing:-1.2px}#game[data-mode="intro"] footer,#game[data-mode="ended"] footer{display:none}#leaderboard{margin-left:14px;margin-right:14px}#intro .eyebrow{font-size:9px;letter-spacing:1.5px}#intro .rules{font-size:12px}#intro p{font-size:14px}#wallet-form label{font-size:10px}#intro .secondary{padding:12px 15px;width:100%;font-size:13px}}
/* HOP / FREELLM introduction */
.brand{font-size:38px;letter-spacing:-2px}.brand span{letter-spacing:4px;font-size:10px}
#explainer{position:fixed;z-index:20;inset:92px max(24px,calc((100vw - 1040px)/2)) 24px;padding:30px 36px;overflow:auto;background:linear-gradient(125deg,rgba(3,25,27,.97),rgba(7,22,27,.9));border:1px solid #aaff663a;border-radius:24px;box-shadow:0 20px 90px #0009;backdrop-filter:blur(18px)}
#explainer[hidden],#desktop-only[hidden]{display:none!important}.guide-top,.guide-bottom{display:flex;justify-content:space-between;gap:24px;align-items:center}.guide-tag{font-size:10px;letter-spacing:2px;color:#91ada8}#explainer h1{font-size:clamp(32px,4vw,54px);line-height:1.04;margin:20px 0 12px;letter-spacing:-2px}#explainer h1 span{color:#c4ff48}.guide-story{color:#a8c5bf;font-size:14px;line-height:1.65}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.guide-grid article{padding:19px 20px;background:#a5ffbf05;border:1px solid #c4ffd51c;border-radius:14px}.guide-grid i{font-size:10px;font-style:normal;letter-spacing:2px;color:#baff59}.guide-grid h2{font-size:19px;margin:9px 0}.guide-grid p{font-size:13px;line-height:1.7;color:#adc8c1;margin:0}.guide-grid kbd{white-space:nowrap;width:auto;padding:2px 6px;margin:0 2px;font-size:11px}.cyan{color:#5ffff0}.amber{color:#ffd866}.guide-bottom p{font-size:11px;line-height:1.6;color:#89a49f}.guide-bottom .primary{width:auto;min-width:255px;margin:0}.learning #intro,.learning #leaderboard,.learning .hud,.learning #score-dial,.learning #radar,.learning footer,.learning .coordinates,.learning .topright{visibility:hidden}#touch{display:none!important}@media(pointer:coarse) and (orientation:landscape){#game.playing #touch{display:flex!important}#game[data-mode="paused"] #touch{display:none!important}}#desktop-only{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:radial-gradient(ellipse at 50% 30%,#143b25,#020e13 70%)}#desktop-only h1{font-size:clamp(30px,7vw,52px);margin:20px 0}#desktop-only p{max-width:420px;color:#b2cdc5;line-height:1.8;font-size:15px}#desktop-only small{color:#72978d;line-height:1.6}.device-icon{font-size:75px;color:#baff59;text-shadow:0 0 25px #9fff6380;margin-bottom:30px}.device-icon span{display:inline-block;font-size:35px;animation:device-drift 2.5s ease-in-out infinite}.desktop-blocked>*:not(#desktop-only){visibility:hidden!important}@keyframes device-drift{50%{transform:translate(5px,-5px)}}#intro h1{font-size:clamp(34px,3.6vw,50px);line-height:1.05}#intro p{line-height:1.6} @media(max-width:720px){#explainer{inset:85px 16px 16px;padding:24px}.guide-grid{grid-template-columns:1fr}.guide-bottom{flex-direction:column;align-items:stretch}.guide-top{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.device-icon span{animation:none}}

@media (pointer:coarse) and (orientation:landscape){header{padding:12px 22px}.brand{font-size:26px}#explainer{inset:65px 18px 12px;padding:20px 24px}#explainer h1{font-size:32px}.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-grid article{padding:14px}.guide-bottom{flex-direction:row;align-items:center}#intro{top:70px!important;left:20px!important;right:auto!important;bottom:15px;width:44%;max-height:calc(100dvh - 85px);margin:0!important;position:absolute!important;padding:18px;overflow:auto}#intro h1{font-size:30px}#leaderboard{top:70px;right:20px;width:43%;max-height:calc(100dvh - 85px);overflow:auto}footer,.coordinates{display:none}.hud{top:75px;left:15px;transform:scale(.7);transform-origin:top left}#radar{top:70px;right:15px;width:125px;padding:8px}#radar-map{width:90px;height:90px}#radar small,.radar-legend{display:none}#score-dial{top:12px;right:185px;transform:scale(.65);transform-origin:top right}#touch{position:fixed;bottom:12px;left:18px;right:18px;align-items:flex-end;justify-content:flex-end;gap:12px;z-index:9}#touch .pad{margin-right:auto}#touch button{touch-action:none}#end{top:65px;bottom:12px;max-height:calc(100dvh - 77px);overflow:auto}.learning #touch{visibility:hidden}.topright{gap:8px}#wave{display:none}}
@media(pointer:coarse) and (orientation:landscape){#touch .pad{display:grid;grid-template-columns:repeat(3,44px);gap:5px}#touch .pad button:first-child{grid-column:2}#touch .pad button:nth-child(2){grid-column:1}#touch button{height:44px;background:#143a2ce8;border:1px solid #d1ff8b77;border-radius:12px;color:#eaffd5;font-size:16px}#touch .jump{width:68px;font-size:12px}}
/* Consistent luminous controls: stable hit areas, aligned labels. */
button{font-weight:800;line-height:1.25;letter-spacing:.02em;text-align:center;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease; -webkit-tap-highlight-color:transparent}
button.primary,button.secondary{display:flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:15px 20px;font-size:16px;border-radius:18px;white-space:normal}
button.primary{position:relative;background:linear-gradient(115deg,#c4ff49,#e2ff9c);color:#123119;border:1px solid #eaffb4;box-shadow:0 0 22px #b4ff402b,inset 0 1px 0 #fff9}
button.primary>span{position:static;float:none;flex:none;margin-left:auto;line-height:1;font-size:23px}
button.secondary{background:linear-gradient(120deg,#103b35,#092724);border:1px solid #74edb778;color:#dcfff0;box-shadow:inset 0 1px 0 #b9ffec1c,0 0 12px #2affae0d}
.topright button,#refresh-board{display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;min-width:44px;min-height:44px;font-size:22px;line-height:1;background:#12332e;border:1px solid #9affe875;color:#defff4;box-shadow:0 0 14px #62ffd920}
button:focus-visible{outline:3px solid #74fff0;outline-offset:4px}button:disabled{opacity:.5;cursor:wait;transform:none}
@media(hover:hover){button:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 0 24px #9bff6270;border-color:#ddffb9;filter:brightness(1.08)}button:not(:disabled):active{transform:translateY(0) scale(.98)}}
@keyframes hop-button-glow{50%{box-shadow:0 0 26px #b4ff4048,inset 0 1px 0 #fff9}}
button.primary{animation:hop-button-glow 3.8s ease-in-out infinite}#touch button{font-weight:900!important;font-size:18px}#touch .jump{font-size:14px!important;letter-spacing:.06em}#touch button:active{background:#baff59;color:#123119;box-shadow:0 0 24px #baff5980}
@media(prefers-reduced-motion:reduce){button{animation:none!important;transition:none!important}button:hover{transform:none!important}}


.guide-grid article{
  display:grid;
  grid-template-columns:minmax(0,1fr) 68px;
  grid-template-rows:auto auto auto;
  column-gap:10px;
  row-gap:3px;
  align-items:start;
  min-height:0;
  padding:12px 12px 12px 14px;
  background:radial-gradient(ellipse at 100% 0,#8aff7912,transparent 65%),#a5ffbf05;
  overflow:hidden;
}
.guide-art{
  position:static;
  grid-column:2;
  grid-row:1 / -1;
  width:68px;
  height:52px;
  align-self:center;
  justify-self:end;
  pointer-events:none;
}
.guide-grid article > i,
.guide-grid article > h2,
.guide-grid article > p{
  grid-column:1;
  min-width:0;
  max-width:100%;
}
.guide-grid article h2{max-width:none}
.guide-grid article p{position:static}

/* Compact how-to so Play stays on the first screen */
#explainer{
  display:flex;
  flex-direction:column;
  inset:56px max(16px,calc((100vw - 1080px)/2)) 12px;
  padding:16px 20px 14px;
  min-height:0;
}
#explainer h1{font-size:clamp(22px,2.8vw,34px);margin:8px 0 6px;letter-spacing:-1.4px}
.guide-story{font-size:13px;line-height:1.4;margin:0}
.guide-grid{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  align-content:start;
  gap:8px;
  margin:10px 0 12px;
}
.guide-grid i{font-size:9px;letter-spacing:1.4px}
.guide-grid h2{font-size:15px;margin:0;line-height:1.25}
.guide-grid p{
  font-size:12px;
  line-height:1.45;
  overflow-wrap:break-word;
}
.guide-grid kbd{
  display:inline-block;
  width:auto;
  max-width:100%;
  height:auto;
  white-space:nowrap;
  vertical-align:middle;
}
.guide-bottom{
  flex-shrink:0;
  padding-top:8px;
  margin-top:auto;
  background:linear-gradient(180deg,transparent,rgba(3,25,27,.92) 18%);
}
.guide-bottom .primary{min-height:48px;min-width:220px;padding:12px 18px;font-size:15px}
@media(max-width:720px){
  #explainer{inset:78px 12px 12px;padding:14px}
  .guide-grid article{grid-template-columns:minmax(0,1fr) 56px;padding:11px}
  .guide-art{width:56px;height:42px}
  .guide-bottom{flex-direction:column;align-items:stretch}
  .guide-bottom .primary{width:100%;min-width:0}
}
@media(pointer:coarse) and (orientation:landscape){
  #explainer{inset:52px 14px 10px;padding:12px 16px}
  #explainer h1{font-size:24px}
  .guide-grid article{padding:10px}
}

/* Leaderboard AI reward drops */
.reward-drop{
  position:relative;
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(260px,1.2fr);
  gap:14px;
  align-items:center;
  overflow:hidden;
  border:1px solid #c5ff4b3d;
  border-radius:15px;
  background:
    radial-gradient(circle at 85% 15%,#b7ff3d1c,transparent 34%),
    linear-gradient(120deg,#0c2d25e8,#071b20e8);
  box-shadow:inset 0 1px #eaffc214,0 8px 28px #0004;
}
.reward-drop::after{
  content:"";
  position:absolute;
  inset:auto -10% -32px 35%;
  height:42px;
  background:#baff5940;
  filter:blur(28px);
  pointer-events:none;
}
.reward-copy{position:relative;z-index:1;min-width:0}
.reward-kicker{
  display:block;
  margin-bottom:4px;
  color:#c7ff58;
  font-size:8px;
  font-style:normal;
  font-weight:800;
  letter-spacing:1.5px;
}
.reward-copy strong{
  display:block;
  color:#f4ffe9;
  font-size:15px;
  line-height:1.2;
}
.reward-copy small{
  display:block;
  margin-top:4px;
  color:#8fb2a8;
  font-size:10px;
  line-height:1.35;
}
.loot-row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.loot-box{
  position:relative;
  display:flex;
  min-width:0;
  height:52px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--loot);
  border-radius:10px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--loot) 18%,#06191b),#061417 70%);
  box-shadow:inset 0 1px #ffffff1c,0 0 18px color-mix(in srgb,var(--loot) 16%,transparent);
}
.loot-box::before{
  content:"";
  position:absolute;
  top:-22px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--loot);
  filter:blur(20px);
  opacity:.38;
}
.loot-box i{
  position:relative;
  color:color-mix(in srgb,var(--loot) 82%,white);
  font-size:8px;
  font-style:normal;
  font-weight:800;
}
.loot-box b{
  position:relative;
  max-width:100%;
  margin-top:4px;
  overflow:hidden;
  color:#effff3;
  font-size:9px;
  letter-spacing:.5px;
  text-overflow:ellipsis;
}
.loot-green{--loot:#c6ff4f}.loot-violet{--loot:#ba8cff}.loot-blue{--loot:#59e2ff}.loot-gold{--loot:#ffd566}
.guide-rewards{flex-shrink:0;margin-top:8px;padding:9px 11px}
.intro-rewards{grid-template-columns:1fr;margin:12px 0 4px;padding:10px}
.intro-rewards .reward-copy{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:end}
.intro-rewards .reward-kicker{grid-column:1 / -1}
.intro-rewards .reward-copy small{text-align:right}
.intro-rewards .loot-row{margin-top:2px}
.intro-rewards .loot-box{height:42px}
.intro-rewards .loot-box b{font-size:8px}
.reward-note{
  grid-column:1 / -1;
  margin:0!important;
  color:#789c93!important;
  font-size:9px!important;
  line-height:1.3!important;
  text-align:right;
}
#intro:has(.intro-rewards){max-width:430px}
#intro:has(.intro-rewards) #wallet-form{margin-top:14px}
@media(max-width:720px){
  .guide-rewards{grid-template-columns:1fr;padding:9px}
  .guide-rewards .reward-copy small{display:none}
  .reward-copy strong{font-size:14px}
  .loot-box{height:44px}
  .intro-rewards .reward-copy{display:block}
  .intro-rewards .reward-copy small{text-align:left}
}
@media(pointer:coarse) and (orientation:landscape){
  .guide-rewards{grid-template-columns:minmax(140px,.7fr) minmax(240px,1.3fr);padding:7px 9px}
  .guide-rewards .reward-copy small{display:none}
  .guide-rewards .loot-box{height:38px}
}

/* HOP reward vault onboarding */
#explainer{
  inset:24px max(20px,calc((100vw - 1180px)/2)) 18px;
  padding:0;
  overflow:hidden;
  border-color:#c6ff4d42;
  border-radius:28px;
  background:#031719f2;
  box-shadow:0 24px 100px #000c,0 0 80px #a8ff3010;
}
.onboarding-shell{
  display:grid;
  grid-template-columns:minmax(320px,.82fr) minmax(520px,1.18fr);
  height:100%;
  min-height:0;
}
.hop-stage{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  padding:25px 28px 23px;
  border-right:1px solid #bdff5126;
  background:
    radial-gradient(circle at 50% 38%,#baff5930,transparent 34%),
    radial-gradient(circle at 50% 70%,#36e7ae14,transparent 42%),
    linear-gradient(155deg,#0b3025,#04191b 72%);
}
.stage-grid{
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:linear-gradient(#caff6126 1px,transparent 1px),linear-gradient(90deg,#caff6126 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,transparent,#000 35%,#000);
  transform:perspective(420px) rotateX(62deg) scale(1.65) translateY(27%);
  transform-origin:bottom;
}
.stage-orbit{
  position:absolute;
  left:50%;
  top:43%;
  aspect-ratio:1;
  border:1px solid #c8ff6242;
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:stage-spin 12s linear infinite;
}
.orbit-one{width:64%;border-style:dashed}
.orbit-two{width:88%;border-color:#61e3bd24;animation-duration:19s;animation-direction:reverse}
.hop-stage .guide-top{position:relative;z-index:3}
.hop-avatar{
  position:relative;
  z-index:2;
  display:grid;
  width:min(92%,360px);
  min-height:0;
  flex:1;
  place-items:center;
  align-self:center;
}
.hop-avatar img{
  position:relative;
  z-index:2;
  width:100%;
  max-height:39vh;
  object-fit:contain;
  filter:drop-shadow(0 0 14px #baff5960) drop-shadow(0 0 45px #baff593d);
  animation:hop-float 3.2s ease-in-out infinite;
}
.hop-head-frame{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:min(39vh,390px);
  border:0;
  background:transparent;
  filter:drop-shadow(0 0 16px #baff5945) drop-shadow(0 0 46px #baff592a);
  animation:hop-head-arrive .8s cubic-bezier(.2,.8,.2,1) both;
}
.head-frame-ring{
  position:absolute;
  z-index:1;
  width:86%;
  aspect-ratio:1;
  border:1px solid #caff592b;
  border-radius:50%;
  box-shadow:inset 0 0 35px #baff5908,0 0 25px #baff590d;
  animation:head-ring-pulse 3.4s ease-in-out infinite;
  pointer-events:none;
}
.head-frame-ring::before,.head-frame-ring::after{
  content:"";
  position:absolute;
  inset:7%;
  border:1px dashed #64e9bd24;
  border-radius:50%;
  animation:stage-spin 18s linear infinite;
}
.head-frame-ring::after{inset:18%;border-color:#caff591a;animation-direction:reverse;animation-duration:12s}
.head-interactive{
  position:absolute;
  z-index:4;
  bottom:6%;
  left:50%;
  display:flex;
  align-items:center;
  gap:6px;
  transform:translateX(-50%);
  border:1px solid #baff592b;
  border-radius:999px;
  background:#031313b8;
  padding:5px 8px;
  color:#83a99f;
  font-size:6px;
  font-weight:800;
  letter-spacing:1px;
  white-space:nowrap;
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.head-interactive i{width:4px;height:4px;border-radius:50%;background:#c8ff59;box-shadow:0 0 8px #baff59;animation:status-blink 1.5s ease-in-out infinite}
.hop-aura{
  position:absolute;
  z-index:1;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:#bdff3c2b;
  filter:blur(35px);
  animation:aura-pulse 2.8s ease-in-out infinite;
}
.hop-shadow{
  position:absolute;
  z-index:1;
  bottom:11%;
  width:45%;
  height:18px;
  border-radius:50%;
  background:#000b;
  filter:blur(9px);
  animation:shadow-pulse 3.2s ease-in-out infinite;
}
.stage-copy{position:relative;z-index:3;margin-top:auto}
.stage-status{
  display:flex;
  align-items:center;
  gap:7px;
  color:#bce1cf;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.8px;
}
.stage-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c6ff50;
  box-shadow:0 0 12px #c6ff50;
  animation:status-blink 1.8s ease-in-out infinite;
}
#explainer .stage-copy h1{
  margin:9px 0 8px;
  font-size:clamp(34px,4vw,55px);
  line-height:.94;
  letter-spacing:-2.8px;
}
.stage-copy p{max-width:330px;margin:0;color:#91b7aa;font-size:12px;line-height:1.55}
.reward-vault{
  display:flex;
  min-width:0;
  min-height:0;
  flex-direction:column;
  padding:25px 28px 20px;
  background:
    radial-gradient(circle at 100% 0,#9d63ff12,transparent 35%),
    linear-gradient(145deg,#061c20,#031416);
}
.vault-heading{display:flex;flex-shrink:0;align-items:flex-start;justify-content:space-between;gap:20px}
.vault-heading h2{margin:5px 0 0;color:#f2ffec;font-size:clamp(27px,3vw,42px);font-weight:600;line-height:.96;letter-spacing:-1.8px}
.vault-status{
  flex-shrink:0;
  border:1px solid #baff5930;
  border-radius:10px;
  background:#baff5908;
  padding:8px 10px;
  color:#88aca1;
  font-size:7px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:1.2px;
  text-align:right;
}
.chest-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:17px;
}
.chest-card{
  --chest:#c6ff50;
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--chest) 32%,transparent);
  border-radius:14px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--chest) 10%,#092023),#041416 75%);
  padding:10px 6px 9px;
  box-shadow:inset 0 1px #ffffff12,0 9px 24px #0004;
}
.chest-violet{--chest:#b38aff}.chest-blue{--chest:#55e1ff}.chest-gold{--chest:#ffd360}
.chest-visual{position:relative;width:72px;height:59px;margin-bottom:5px;perspective:120px}
.chest-body,.chest-lid{
  position:absolute;
  left:50%;
  width:62px;
  transform:translateX(-50%);
  border:2px solid color-mix(in srgb,var(--chest) 70%,white);
  background:
    linear-gradient(90deg,transparent 45%,color-mix(in srgb,var(--chest) 80%,white) 46% 54%,transparent 55%),
    linear-gradient(145deg,color-mix(in srgb,var(--chest) 62%,#17362d),color-mix(in srgb,var(--chest) 18%,#061518));
  box-shadow:inset 0 0 12px #0006,0 0 14px color-mix(in srgb,var(--chest) 30%,transparent);
}
.chest-body{bottom:2px;height:34px;border-radius:4px 4px 9px 9px}
.chest-lid{
  z-index:2;
  top:7px;
  height:24px;
  border-radius:11px 11px 3px 3px;
  transform-origin:bottom center;
  animation:chest-breathe 3.6s ease-in-out infinite;
}
.chest-card:nth-child(2) .chest-lid{animation-delay:-.7s}
.chest-card:nth-child(3) .chest-lid{animation-delay:-1.4s}
.chest-card:nth-child(4) .chest-lid{animation-delay:-2.1s}
.chest-lock{
  position:absolute;
  z-index:3;
  left:50%;
  top:26px;
  display:grid;
  width:19px;
  height:21px;
  place-items:center;
  transform:translateX(-50%);
  border:1px solid color-mix(in srgb,var(--chest) 65%,white);
  border-radius:4px;
  background:#071b19;
  color:var(--chest);
  font-size:9px;
  box-shadow:0 0 10px color-mix(in srgb,var(--chest) 45%,transparent);
}
.chest-light{
  position:absolute;
  left:50%;
  top:17px;
  width:38px;
  height:27px;
  transform:translateX(-50%);
  background:var(--chest);
  filter:blur(16px);
  opacity:.35;
  animation:chest-light 3.6s ease-in-out infinite;
}
.chest-card small{color:color-mix(in srgb,var(--chest) 72%,white);font-size:7px;font-weight:800;letter-spacing:1px}
.chest-card b{margin-top:3px;overflow:hidden;color:#eaffee;font-size:8px;letter-spacing:.4px;text-overflow:ellipsis;white-space:nowrap}
.vault-note{margin:9px 0 0;color:#789e95;font-size:9px;line-height:1.45;text-align:center}
.mission-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:14px;
}
.mission-grid article{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  border:1px solid #a7dfbf1c;
  border-radius:11px;
  background:#ffffff05;
  padding:8px 10px;
}
.mission-grid article>i,.mission-grid article>kbd{
  display:grid;
  width:auto;
  min-width:34px;
  height:28px;
  place-items:center;
  margin:0;
  border:1px solid #bfff6260;
  border-radius:7px;
  background:#baff590b;
  color:#c9ff65;
  font-size:8px;
  font-style:normal;
  font-weight:800;
}
.mission-grid article>span{display:block;min-width:0}
.mission-grid b{display:block;color:#dbffdd;font-size:9px;letter-spacing:.8px}
.mission-grid small{display:block;margin-top:2px;color:#71988f;font-size:8px}
#explainer .guide-bottom{
  margin-top:auto;
  padding-top:14px;
  background:none;
}
#explainer .guide-bottom p{margin:0;color:#668b83;font-size:8px;line-height:1.5}
#explainer .guide-bottom .primary{min-width:220px;min-height:48px;margin:0;border-radius:14px;font-size:14px}

/* Ranked handle screen */
#intro{
  top:92px;
  left:4%;
  max-width:455px!important;
  max-height:calc(100dvh - 150px);
  padding:20px;
  border:1px solid #baff5930;
  border-radius:22px;
  background:linear-gradient(145deg,#051d1fef,#031719e8);
  box-shadow:0 20px 70px #0009,inset 0 1px #ffffff0d;
  backdrop-filter:blur(18px);
}
.intro-head{display:flex;align-items:center;gap:15px}
.intro-hop{
  position:relative;
  display:grid;
  width:78px;
  height:78px;
  flex-shrink:0;
  place-items:center;
  overflow:hidden;
  border:1px solid #c8ff5540;
  border-radius:20px;
  background:radial-gradient(circle,#baff5926,#061718 70%);
  box-shadow:0 0 24px #baff5914;
}
.intro-hop img{width:88px;animation:hop-float 3.2s ease-in-out infinite;filter:drop-shadow(0 0 9px #baff5966)}
#intro .intro-head h1{margin:6px 0 0;font-size:clamp(28px,3vw,40px);line-height:.95;letter-spacing:-1.8px}
#intro .intro-lead{margin:13px 0;color:#8fb1a7;font-size:11px;line-height:1.55}
.intro-vault{
  border:1px solid #baff5928;
  border-radius:14px;
  background:linear-gradient(130deg,#0b2924cc,#06191dcc);
  padding:10px;
}
.intro-vault-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.intro-vault-title span{color:#c7ff58;font-size:8px;font-weight:800;letter-spacing:1px}
.intro-vault-title small{color:#668d83;font-size:8px}
.mini-chests{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.mini-chest{
  --chest:#c6ff50;
  position:relative;
  display:grid;
  height:39px;
  place-items:center;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--chest) 40%,transparent);
  border-radius:8px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--chest) 20%,#071719),#061416);
}
.mini-chest::before{
  content:"";
  position:absolute;
  inset:5px 7px 12px;
  border:1px solid color-mix(in srgb,var(--chest) 65%,white);
  border-radius:6px 6px 2px 2px;
  box-shadow:0 0 10px color-mix(in srgb,var(--chest) 35%,transparent);
}
.mini-chest i{position:relative;color:var(--chest);font-size:8px;font-style:normal}
.mini-chest b{position:absolute;bottom:3px;color:#dcf6e7;font-size:6px;letter-spacing:.4px}
#intro #wallet-form{margin-top:13px}
#intro #wallet-form .primary{min-height:48px;margin-top:12px;border-radius:14px}
#intro .secondary{min-height:42px;margin-top:8px;border-radius:13px;font-size:12px}
.intro-rules{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.intro-rules span{border:1px solid #ffffff10;border-radius:8px;background:#ffffff05;padding:5px 7px;color:#789d93;font-size:8px}
#leaderboard{top:92px;max-height:calc(100dvh - 150px)}

@keyframes hop-float{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes hop-head-arrive{from{opacity:0;transform:translateY(18px) scale(.93)}to{opacity:1;transform:none}}
@keyframes head-ring-pulse{0%,100%{transform:scale(.96);opacity:.45}50%{transform:scale(1.03);opacity:.9}}
@keyframes shadow-pulse{0%,100%{transform:scaleX(1);opacity:.65}50%{transform:scaleX(.72);opacity:.35}}
@keyframes aura-pulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.08);opacity:1}}
@keyframes stage-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes status-blink{50%{opacity:.35}}
@keyframes chest-breathe{0%,72%,100%{transform:translateX(-50%) rotateX(0)}82%{transform:translateX(-50%) translateY(-4px) rotateX(-15deg)}}
@keyframes chest-light{0%,72%,100%{opacity:.25;transform:translateX(-50%) scale(.8)}82%{opacity:.75;transform:translateX(-50%) translateY(-6px) scale(1.2)}}
@media(max-width:920px){
  .onboarding-shell{grid-template-columns:minmax(250px,.68fr) minmax(470px,1.32fr)}
  .hop-stage{padding:20px}
  .reward-vault{padding:20px}
  .chest-visual{transform:scale(.85);margin:-3px 0}
}
@media(max-height:720px) and (min-width:701px){
  #explainer{inset:12px max(14px,calc((100vw - 1120px)/2)) 10px}
  .hop-stage,.reward-vault{padding:16px 20px}
  .hop-avatar img{max-height:31vh}
  #explainer .stage-copy h1{font-size:36px}
  .vault-heading h2{font-size:28px}
  .chest-row{margin-top:10px}
  .chest-card{padding:5px}
  .chest-visual{height:48px;transform:scale(.75);margin:-6px 0}
  .mission-grid{margin-top:8px}
  .mission-grid article{padding:6px 8px}
  #explainer .guide-bottom{padding-top:8px}
  #intro,#leaderboard{top:74px;max-height:calc(100dvh - 100px)}
}
@media(max-width:700px){
  #explainer{inset:78px 12px 12px;overflow:auto}
  .onboarding-shell{display:block;height:auto;min-height:100%}
  .hop-stage{min-height:330px;border-right:0;border-bottom:1px solid #bdff5126}
  .hop-avatar{height:185px;flex:none}
  .hop-avatar img{max-height:185px}
  .reward-vault{min-height:470px}
  .chest-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  #explainer .guide-bottom{flex-direction:column;align-items:stretch}
  #intro{position:relative;top:auto;left:auto;max-height:none;margin:112px 14px 22px}
  #leaderboard{top:auto;max-height:none}
}
@media(pointer:coarse) and (orientation:landscape){
  #explainer{inset:8px 10px 8px}
  .onboarding-shell{grid-template-columns:minmax(230px,.65fr) minmax(460px,1.35fr)}
  .hop-stage,.reward-vault{padding:12px 16px}
  .hop-avatar img{max-height:29vh}
  #explainer .stage-copy h1{font-size:30px}
  .stage-copy p,.vault-note{display:none}
  .vault-heading h2{font-size:24px}
  .chest-row{margin-top:8px}
  .chest-card{padding:4px}
  .chest-visual{height:43px;transform:scale(.7);margin:-8px 0}
  .mission-grid{margin-top:7px}
  .mission-grid article{padding:5px 7px}
  #explainer .guide-bottom{padding-top:7px}
}
@media(prefers-reduced-motion:reduce){
  .hop-avatar img,.intro-hop img,.hop-aura,.hop-shadow,.stage-orbit,.stage-status i,.chest-lid,.chest-light{animation:none!important}
}

/* Generated AI chest artwork */
.chest-card{padding:7px 7px 10px}
.chest-image{
  position:relative;
  width:100%;
  height:102px;
  margin-bottom:7px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--chest) 30%,transparent);
  border-radius:10px;
  background:#020a0b;
}
.chest-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(125deg,transparent 20%,#ffffff18 47%,transparent 66%);
  transform:translateX(-130%);
  animation:chest-scan 5s ease-in-out infinite;
  pointer-events:none;
}
.chest-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.03);
  transition:transform .45s ease,filter .45s ease;
}
.chest-shine{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:-8px;
  width:70%;
  height:22px;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--chest);
  filter:blur(17px);
  opacity:.24;
  animation:aura-pulse 3s ease-in-out infinite;
}
.chest-card:hover .chest-image img{transform:scale(1.1);filter:brightness(1.12)}
.chest-card>span{margin-top:3px;color:#678d84;font-size:6px;letter-spacing:.5px}
.chest-card b{font-size:8px}

/* More descriptive game controls */
.mission-grid{gap:8px;margin-top:12px}
.mission-grid article{
  min-height:84px;
  gap:12px;
  padding:10px 12px;
  background:linear-gradient(135deg,#ffffff07,#baff5903);
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.mission-grid article:hover{
  transform:translateY(-2px);
  border-color:#baff5942;
  background:linear-gradient(135deg,#baff590c,#ffffff06);
}
.mission-control{
  display:flex;
  width:66px;
  min-width:66px;
  height:58px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid #baff5930;
  border-radius:10px;
  background:radial-gradient(circle,#baff5915,#061719);
  box-shadow:inset 0 1px #ffffff0d;
}
.mission-control>span{display:flex;gap:3px}
.mission-control kbd{
  width:20px;
  min-width:20px;
  height:19px;
  border-color:#c8ff5760;
  border-radius:4px;
  background:#baff590e;
  color:#d8ff8c;
  font-size:7px;
  box-shadow:0 2px 5px #0007;
}
.mission-control .wide-key{width:49px;font-size:6px;letter-spacing:.4px}
.orb-control{
  color:#caff64;
  font-size:25px;
  text-shadow:0 0 12px #baff59,0 0 28px #baff59;
  animation:aura-pulse 2.5s ease-in-out infinite;
}
.mission-grid article>span{display:block;min-width:0}
.mission-grid em{
  display:block;
  margin-bottom:3px;
  color:#baff59;
  font-size:7px;
  font-style:normal;
  font-weight:800;
  letter-spacing:1px;
}
.mission-grid b{font-size:10px}
.mission-grid small{margin-top:4px;font-size:8px;line-height:1.35}

/* Image versions of the compact reward chests */
.mini-chest{height:54px;padding:0}
.mini-chest::before{content:none}
.mini-chest img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.82;
  transition:transform .35s ease,opacity .35s ease;
}
.mini-chest:hover img{transform:scale(1.1);opacity:1}
.mini-chest b{
  z-index:2;
  right:3px;
  bottom:3px;
  left:3px;
  border-radius:4px;
  background:#020b0bd1;
  padding:3px;
  color:#efffe9;
  text-align:center;
}
@keyframes chest-scan{0%,58%{transform:translateX(-130%)}78%,100%{transform:translateX(130%)}}
@media(max-width:920px){
  .chest-image{height:88px}
  .mission-grid article{min-height:76px;padding:8px}
  .mission-control{width:54px;min-width:54px;height:50px}
}
@media(max-height:720px) and (min-width:701px){
  .chest-image{height:70px;margin-bottom:4px}
  .mission-grid article{min-height:62px}
  .mission-control{width:46px;min-width:46px;height:44px}
  .mission-grid small{display:none}
}
@media(pointer:coarse) and (orientation:landscape){
  .chest-image{height:58px}
  .mission-grid article{min-height:54px}
  .mission-control{width:42px;min-width:42px;height:39px}
  .mission-grid small{display:none}
}
@media(prefers-reduced-motion:reduce){
  .chest-image::after,.chest-shine,.orb-control{animation:none!important}
}

/* Infinite reward carousel */
.chest-row{
  position:relative;
  display:block;
  overflow:hidden;
  padding:5px 0 7px;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.chest-row::before,.chest-row::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:34px;
  pointer-events:none;
}
.chest-row::before{left:0;background:linear-gradient(90deg,#061b1f,transparent)}
.chest-row::after{right:0;background:linear-gradient(-90deg,#041618,transparent)}
.chest-track{
  display:flex;
  width:max-content;
  gap:8px;
  animation:reward-scroll 24s linear infinite;
  will-change:transform;
}
.chest-row:hover .chest-track{animation-play-state:paused}
.chest-set{display:flex;gap:8px}
.chest-set .chest-card{
  width:clamp(108px,10vw,136px);
  flex:none;
  animation:chest-float-card 4s ease-in-out infinite;
}
.chest-set .chest-card:nth-child(2){animation-delay:-1s}
.chest-set .chest-card:nth-child(3){animation-delay:-2s}
.chest-set .chest-card:nth-child(4){animation-delay:-3s}
.chest-set .chest-card:hover{
  z-index:4;
  transform:translateY(-4px) scale(1.025);
  border-color:color-mix(in srgb,var(--chest) 75%,white);
  box-shadow:inset 0 1px #ffffff24,0 12px 30px #0008,0 0 24px color-mix(in srgb,var(--chest) 24%,transparent);
  animation-play-state:paused;
}
.chest-image::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 22px color-mix(in srgb,var(--chest) 16%,transparent);
  pointer-events:none;
}
.mini-chest{animation:mini-chest-float 3.6s ease-in-out infinite}
.mini-chest:nth-child(2){animation-delay:-.9s}.mini-chest:nth-child(3){animation-delay:-1.8s}.mini-chest:nth-child(4){animation-delay:-2.7s}
@keyframes reward-scroll{to{transform:translateX(calc(-50% - 4px))}}
@keyframes chest-float-card{0%,100%{translate:0 1px}50%{translate:0 -3px}}
@keyframes mini-chest-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-height:720px) and (min-width:701px){
  .chest-row{padding:2px 0 3px}
  .chest-track{animation-duration:20s}
}
@media(prefers-reduced-motion:reduce){
  .chest-track,.chest-set .chest-card,.mini-chest{animation:none!important}
}

/* Split reward vault and ranked entry screen */
#intro{
  display:flex;
  width:min(420px,38vw);
  max-width:none!important;
  flex-direction:column;
  gap:9px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
}
.intro-entry,.intro-vault{
  position:relative;
  overflow:hidden;
  border:1px solid #baff5930;
  background:linear-gradient(145deg,#061e20f2,#031719ed);
  box-shadow:0 18px 55px #0008,inset 0 1px #ffffff0d;
  backdrop-filter:blur(18px);
}
.intro-entry{padding:16px;border-radius:18px}
.intro-head{
  display:grid;
  min-width:0;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:12px;
}
.intro-head>div:last-child{min-width:0}
.intro-hop{width:64px;height:64px;border-radius:17px}
.intro-hop img{width:73px}
#intro .intro-head h1{
  max-width:100%;
  margin:5px 0 0;
  overflow-wrap:normal;
  font-size:clamp(25px,2.35vw,32px);
  line-height:1.02;
  letter-spacing:-1.25px;
}
#intro .intro-head .eyebrow{font-size:7px;letter-spacing:1.4px}
.intro-vault{
  flex-shrink:0;
  padding:10px 11px;
  border-color:#d0ff5842;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0,#c8ff5420,transparent 48%),
    linear-gradient(145deg,#092824f5,#041719f2);
}
.intro-vault::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:linear-gradient(110deg,transparent 22%,#d9ff6911 43%,transparent 61%);
  transform:translateX(-100%);
  animation:vault-sweep 6s ease-in-out infinite;
  pointer-events:none;
}
.vault-beam{
  position:absolute;
  z-index:0;
  top:-26px;
  left:50%;
  width:230px;
  height:95px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#c8ff5830;
  filter:blur(35px);
  animation:vault-beam 3.2s ease-in-out infinite;
}
.intro-vault>*:not(.vault-beam){position:relative;z-index:1}
.intro-vault-title{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:10px;
}
.intro-vault-title>div{display:grid;min-width:0;gap:2px}
.intro-vault-title span{font-size:8px}
.intro-vault-title strong{overflow:hidden;color:#f1ffe5;font-size:14px;letter-spacing:-.3px;text-overflow:ellipsis;white-space:nowrap}
.intro-vault-title small{font-size:6px;line-height:1.5;text-align:right;white-space:nowrap}
.intro-vault .mini-chests{gap:6px;margin-top:8px}
.intro-vault .mini-chest{
  height:58px;
  border-radius:10px;
  box-shadow:0 6px 18px #0007,0 0 14px color-mix(in srgb,var(--chest) 12%,transparent);
}
.intro-vault .mini-chest::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(125deg,transparent 30%,#ffffff20 48%,transparent 65%);
  transform:translateX(-120%);
  animation:mini-scan 4.8s ease-in-out infinite;
}
.intro-vault .mini-chest:nth-child(2)::after{animation-delay:-1.2s}
.intro-vault .mini-chest:nth-child(3)::after{animation-delay:-2.4s}
.intro-vault .mini-chest:nth-child(4)::after{animation-delay:-3.6s}
.intro-vault .mini-chest i{
  position:absolute;
  z-index:3;
  top:5px;
  left:5px;
  min-width:17px;
  border:1px solid color-mix(in srgb,var(--chest) 45%,transparent);
  border-radius:5px;
  background:#020b0bcf;
  padding:2px 4px;
  color:var(--chest);
  font-size:6px;
  font-style:normal;
  font-weight:800;
  text-align:center;
}
.intro-vault .mini-chest b{z-index:3;font-size:6px;letter-spacing:.6px}
.vault-ticker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:6px;
  color:#6f978d;
  font-size:6px;
  letter-spacing:.55px;
  white-space:nowrap;
}
.vault-ticker span{color:#c7ff58;font-weight:800}.vault-ticker b{color:#b7d0c9}.vault-ticker em{font-style:normal}
.vault-ticker i{width:3px;height:3px;border-radius:50%;background:#c7ff58;box-shadow:0 0 7px #c7ff58}
.intro-hop>span{
  position:absolute;
  inset:10px;
  border:1px solid #c8ff5530;
  border-radius:50%;
  animation:intro-orbit 7s linear infinite;
}
#intro .intro-lead{margin:9px 0 11px;font-size:10px;line-height:1.45}
#intro #wallet-form{margin-top:0}
#intro #wallet-form>small{display:block;margin-top:6px;color:#688d84;font-size:8px;line-height:1.4}
.handle-field{
  display:flex;
  min-height:48px;
  align-items:center;
  margin-top:7px;
  overflow:hidden;
  border:1px solid #aaff6938;
  border-radius:13px;
  background:#020f12c9;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.handle-field:focus-within{border-color:#c7ff58a6;box-shadow:0 0 0 3px #baff5910,0 0 22px #baff5912}
.handle-field>span{padding-left:15px;color:#c7ff58;font-size:15px;font-weight:800}
#intro .handle-field input{
  width:100%;
  min-height:46px;
  margin:0;
  border:0;
  outline:0;
  background:transparent;
  padding:12px 14px 12px 5px;
  box-shadow:none;
}
#intro #wallet-form .primary{min-height:46px;margin-top:10px}
#intro .secondary{min-height:38px;margin-top:7px;font-size:11px}
.intro-rules{margin-top:8px}
.intro-rules span{padding:4px 6px}

/* Single compact enemy card beneath the guide */
.enemy-intel{
  position:relative;
  display:grid;
  min-height:62px;
  grid-template-columns:104px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-top:8px;
  overflow:hidden;
  border:1px solid #ff526c2e;
  border-radius:12px;
  background:
    radial-gradient(circle at 9% 50%,#ff315224,transparent 24%),
    linear-gradient(90deg,#260b1738,#071719cc);
}
.enemy-intel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 32%,#ff4c6410 49%,transparent 65%);
  transform:translateX(-100%);
  animation:enemy-scan 5s ease-in-out infinite;
  pointer-events:none;
}
.enemy-portrait{
  position:relative;
  align-self:stretch;
  overflow:hidden;
  border-right:1px solid #ff607526;
  background:radial-gradient(circle,#ff31521d,transparent 70%);
}
.enemy-portrait>span{
  position:absolute;
  left:50%;
  bottom:6px;
  width:58px;
  height:8px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#ff294b;
  filter:blur(9px);
  opacity:.35;
  animation:enemy-shadow 2.7s ease-in-out infinite;
}
.enemy-portrait img{
  position:absolute;
  left:50%;
  bottom:-15px;
  width:102px;
  transform:translateX(-50%);
  filter:drop-shadow(0 0 8px #ff294b45);
  animation:enemy-hover 2.7s ease-in-out infinite;
}
.enemy-copy{position:relative;z-index:1;min-width:0;padding:8px 0}
.enemy-copy>span{display:block;color:#ff667c;font-size:6px;font-weight:800;letter-spacing:1.3px}
.enemy-copy>b{display:block;margin-top:3px;color:#ffe4e8;font-size:10px}
.enemy-copy p{margin:4px 0 0!important;color:#789c94!important;font-size:7px!important;line-height:1.4!important}
.enemy-copy kbd{width:auto;height:auto;margin:0 2px;padding:1px 4px;border-color:#ff657d45;color:#ffb2bd;font-size:6px}
.enemy-alert{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:6px;
  margin-right:12px;
  border:1px solid #ff60752e;
  border-radius:7px;
  background:#ff34500b;
  padding:6px 8px;
  color:#ff8292;
  font-size:6px;
  font-weight:800;
  letter-spacing:.7px;
  white-space:nowrap;
}
.enemy-alert i{width:5px;height:5px;border-radius:50%;background:#ff3d59;box-shadow:0 0 8px #ff294b;animation:status-blink 1.3s ease-in-out infinite}
@keyframes vault-sweep{0%,55%{transform:translateX(-100%)}82%,100%{transform:translateX(100%)}}
@keyframes vault-beam{0%,100%{opacity:.35;transform:translateX(-50%) scale(.8)}50%{opacity:.8;transform:translateX(-50%) scale(1.12)}}
@keyframes mini-scan{0%,58%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
@keyframes intro-orbit{to{transform:rotate(360deg)}}
@keyframes enemy-hover{0%,100%{transform:translateX(-50%) translateY(2px) rotate(-1deg)}50%{transform:translateX(-50%) translateY(-4px) rotate(1deg)}}
@keyframes enemy-shadow{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.35}50%{transform:translateX(-50%) scaleX(.72);opacity:.18}}
@keyframes enemy-scan{0%,62%{transform:translateX(-100%)}84%,100%{transform:translateX(100%)}}
@media(max-height:760px) and (min-width:701px){
  .intro-vault .mini-chest{height:58px}
  .intro-entry{padding:14px 16px}
  .intro-hop{width:62px;height:62px}.intro-hop img{width:72px}
  #intro .intro-head h1{font-size:28px}
  #intro .intro-lead{margin:7px 0;font-size:9px}
  .intro-rules{display:none}
  .enemy-intel{min-height:50px;grid-template-columns:84px minmax(0,1fr) auto}
  .enemy-portrait img{width:82px}
}
@media(max-width:700px){
  #intro{
    width:auto;
    margin:112px 14px 22px;
    padding:0;
    border:0;
    background:none;
  }
  .intro-vault .mini-chest{height:54px}
}
@media(pointer:coarse) and (orientation:landscape){
  #intro{width:44%}
  .intro-vault{padding:8px}
  .intro-vault .mini-chest{height:44px}
  .intro-vault-title strong{font-size:12px}
  .vault-ticker,.enemy-intel{display:none}
  .intro-entry{padding:12px}
}
@media(prefers-reduced-motion:reduce){
  .intro-vault::after,.vault-beam,.intro-vault .mini-chest::after,.intro-hop>span,.enemy-intel::after,.enemy-portrait img,.enemy-portrait>span,.enemy-alert i{animation:none!important}
}

/* Ranked lobby — unified card */
#intro{
  display:block;
  width:min(460px,42vw);
  max-width:none!important;
  padding:0;
  overflow-y:auto;
  border:0;
  background:none;
  box-shadow:none;
}
#intro .intro-entry{
  position:relative;
  overflow:hidden;
  padding:22px;
  border:1px solid #bfff5a3d;
  border-radius:26px;
  background:
    radial-gradient(circle at 8% 2%,#baff591e,transparent 32%),
    radial-gradient(circle at 100% 100%,#4ffff312,transparent 34%),
    linear-gradient(145deg,#071f21f7,#031416f2);
  box-shadow:0 28px 80px #000a,inset 0 1px #ffffff12;
  backdrop-filter:blur(22px);
}
#intro .intro-entry::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  left:26px;
  right:26px;
  height:1px;
  background:linear-gradient(90deg,transparent,#c9ff67,transparent);
  box-shadow:0 0 16px #baff59;
}
#intro .intro-entry>*{position:relative;z-index:1}
.intro-hero{
  display:grid;
  min-width:0;
  grid-template-columns:82px minmax(0,1fr);
  align-items:center;
  gap:17px;
}
.intro-hero .intro-hop{
  width:82px;
  height:82px;
  border-color:#c8ff5552;
  border-radius:23px;
  background:radial-gradient(circle,#c7ff5730,#061718 72%);
  box-shadow:inset 0 0 26px #baff590d,0 0 30px #baff5917;
}
.intro-hero .intro-hop img{width:92px}
.intro-hop-3d iframe{
  position:absolute;
  z-index:1;
  inset:-9%;
  width:118%;
  height:118%;
  border:0;
  background:transparent;
}
.intro-hop-3d>span{z-index:2;pointer-events:none}
.intro-hop-3d::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 18px #020b0d;
  pointer-events:none;
}
.intro-hero>div:last-child{min-width:0}
#intro .intro-hero .eyebrow{color:#9dc9bd;font-size:7px;letter-spacing:1.7px}
#intro .intro-hero h1{
  margin:5px 0 0;
  font-size:clamp(31px,3.2vw,43px);
  line-height:.9;
  letter-spacing:-2px;
}
#intro .intro-hero h1 span{color:#c8ff59;text-shadow:0 0 22px #baff5933}
.run-flow{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  align-items:center;
  gap:8px;
  margin-top:17px;
  border-block:1px solid #ffffff0d;
  padding:10px 1px;
}
.run-flow span{display:flex;align-items:center;gap:5px;color:#72978e;font-size:6px;font-weight:800;letter-spacing:.7px;white-space:nowrap}
.run-flow span b{display:grid;width:20px;height:20px;place-items:center;border:1px solid #baff5938;border-radius:50%;background:#baff5909;color:#c8ff59;font-size:6px}
.run-flow i{height:1px;background:linear-gradient(90deg,#baff592c,#63e7d927)}
#intro .intro-lead{margin:12px 0 15px;color:#8badA4;font-size:10px;line-height:1.5}
#intro #wallet-form{margin:0}
.form-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}
#intro #wallet-form .form-label label{margin:0;color:#d4ffa0;font-size:8px;letter-spacing:1.25px}
.form-label>span{color:#567b73;font-size:6px;font-weight:800;letter-spacing:.8px}
#intro .handle-field{
  min-height:54px;
  margin:0;
  border-color:#baff5940;
  border-radius:15px;
  background:linear-gradient(90deg,#020f12eb,#09201edb);
}
#intro .handle-field>span{padding-left:17px;font-size:18px}
#intro .handle-field input{min-height:52px;font-size:15px}
.wallet-label{margin-top:10px}
#intro .evm-field{
  min-height:44px;
  border-color:#63e7d92b;
  border-radius:13px;
  background:linear-gradient(90deg,#020f12eb,#09201eb8);
}
#intro .evm-field>span{padding-left:16px;color:#63e7d9;font-size:14px}
#intro .evm-field:focus-within{border-color:#63e7d984;box-shadow:0 0 0 3px #63e7d90d,0 0 22px #63e7d914}
#intro .evm-field input{
  min-height:42px;
  color:#dfffee;
  caret-color:#c8ff59;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:.25px;
  -webkit-text-fill-color:#dfffee;
}
#intro .evm-field input::placeholder{color:#52796f;opacity:1;-webkit-text-fill-color:#52796f}
#intro .wallet-bonus{margin:6px 2px 0;color:#71978e;font-size:8px;line-height:1.4}
#intro .wallet-bonus b{margin-right:5px;color:#c8ff59;font-size:7px;letter-spacing:1px}
#intro #wallet-error{min-height:0;margin:0}
#intro #wallet-error:not(:empty){margin-top:7px}
.run-actions{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(96px,.8fr);
  gap:8px;
  margin-top:10px;
}
#intro .run-actions .primary,#intro .run-actions .secondary{
  width:100%;
  min-height:48px;
  margin:0;
  border-radius:14px;
  padding:11px 14px;
  font-size:12px;
}
#intro .run-actions .secondary{border-color:#ffffff17;background:#ffffff06;color:#99b7af}
#intro .intro-vault{
  margin-top:15px;
  padding:11px;
  border-color:#ffffff12;
  border-radius:16px;
  background:linear-gradient(120deg,#0a2823b8,#061619c9);
  box-shadow:inset 0 1px #ffffff0a;
}
#intro .intro-vault-title strong{font-size:12px}
#intro .intro-vault-title small{color:#62867d;font-size:6px}
#intro .intro-vault .mini-chests{gap:6px;margin-top:8px}
#intro .intro-vault .mini-chest{
  height:62px;
  border-color:color-mix(in srgb,var(--chest) 30%,transparent);
  border-radius:10px;
  animation:reward-tile 4s ease-in-out infinite;
}
#intro .intro-vault .mini-chest:nth-child(2){animation-delay:-1s}
#intro .intro-vault .mini-chest:nth-child(3){animation-delay:-2s}
#intro .intro-vault .mini-chest:nth-child(4){animation-delay:-3s}
#intro .intro-vault .mini-chest b{padding:4px 3px;font-size:6px}
#leaderboard{
  width:320px;
  padding:20px;
  border-color:#75d9c32d;
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0,#4ffff30c,transparent 36%),
    linear-gradient(145deg,#061c20f2,#031416ed);
  box-shadow:0 24px 70px #0008,inset 0 1px #ffffff0c;
  backdrop-filter:blur(20px);
}
#leaderboard .board-heading h2{margin:7px 0 17px;font-size:25px;letter-spacing:-1px}
#leaderboard .board-heading button{display:grid;width:34px;height:34px;place-items:center;border:1px solid #75d9c326;border-radius:50%;background:#75d9c308;font-size:17px}
#leaderboard .board-cols{border-block:1px solid #ffffff0b;padding:8px 4px}
#leaderboard #board-rows li{padding:10px 7px}
.player-identity{display:flex;min-width:0;flex-direction:column;gap:3px}
.player-identity .address{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wallet-address{
  overflow:hidden;
  color:#63e7d9;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:8px;
  letter-spacing:.45px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#leaderboard #board-rows li> b:last-child{align-self:center}
@keyframes reward-tile{0%,100%{translate:0 0}50%{translate:0 -2px}}
@media(min-width:701px) and (max-width:1050px){
  #intro{width:42vw}
  #leaderboard{right:3%;width:270px;padding:16px}
  .intro-hero{grid-template-columns:66px minmax(0,1fr);gap:12px}
  .intro-hero .intro-hop{width:66px;height:66px}.intro-hero .intro-hop img{width:75px}
  #intro .intro-hero h1{font-size:clamp(27px,3.6vw,35px)}
  .run-flow{gap:5px}.run-flow span{font-size:5px}
}
@media(max-height:700px) and (min-width:701px){
  #intro .intro-entry{padding:15px 18px}
  .intro-hero{grid-template-columns:58px minmax(0,1fr)}
  .intro-hero .intro-hop{width:58px;height:58px}.intro-hero .intro-hop img{width:67px}
  #intro .intro-hero h1{font-size:28px}
  .run-flow{margin-top:10px;padding:7px 1px}
  #intro .intro-lead{display:none}
  #intro #wallet-form{margin-top:10px}
  #intro .handle-field{min-height:46px}#intro .handle-field input{min-height:44px}
  #intro .run-actions .primary,#intro .run-actions .secondary{min-height:42px}
  #intro .intro-vault{margin-top:10px;padding:8px}
  #intro .intro-vault .mini-chest{height:43px}
}
@media(max-width:700px){
  #intro{width:auto}
  #intro .intro-entry{padding:18px;border-radius:22px}
  .intro-hero{grid-template-columns:70px minmax(0,1fr);gap:13px}
  .intro-hero .intro-hop{width:70px;height:70px}.intro-hero .intro-hop img{width:79px}
  #intro .intro-hero h1{font-size:34px}
  .run-flow{gap:4px}.run-flow span{font-size:5px;letter-spacing:.4px}.run-flow span b{width:18px;height:18px}
  #intro .intro-vault .mini-chest{height:53px}
}
@media(pointer:coarse) and (orientation:landscape){
  #intro .intro-entry{padding:12px}
  .intro-hero{grid-template-columns:48px minmax(0,1fr);gap:9px}
  .intro-hero .intro-hop{width:48px;height:48px}.intro-hero .intro-hop img{width:56px}
  #intro .intro-hero h1{font-size:24px}
  .run-flow{display:none}
  #intro .intro-lead{margin:6px 0}
  #intro .handle-field{min-height:40px}#intro .handle-field input{min-height:38px}
  #intro .run-actions .primary,#intro .run-actions .secondary{min-height:38px;padding:8px}
  #intro .intro-vault{margin-top:7px}
  #intro .intro-vault-title{display:none}
  #intro .intro-vault .mini-chests{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  #intro .intro-vault .mini-chest{animation:none!important}
}

/* Reward details dialog */
button.chest-card{
  appearance:none;
  color:inherit;
  text-align:center;
}
button.chest-card::before{
  content:"DETAILS";
  position:absolute;
  z-index:4;
  top:9px;
  right:9px;
  border:1px solid #ffffff1b;
  border-radius:5px;
  background:#020b0bc7;
  padding:3px 5px;
  color:#dfffe8;
  font-size:5px;
  font-weight:800;
  letter-spacing:.7px;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .25s ease,transform .25s ease;
}
button.chest-card:hover::before,button.chest-card:focus-visible::before{opacity:1;transform:none}
button.chest-card:focus-visible{outline:2px solid var(--chest);outline-offset:2px}
.reward-modal[hidden]{display:none!important}
.reward-modal{
  position:fixed;
  z-index:50;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  transition:opacity .18s ease;
}
.reward-modal.open{opacity:1}
.reward-modal-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:#010809d9;
  backdrop-filter:blur(11px);
}
.reward-modal-card{
  --modal-color:#c7ff59;
  position:relative;
  z-index:1;
  display:grid;
  width:min(760px,94vw);
  max-height:calc(100dvh - 48px);
  grid-template-columns:minmax(220px,.78fr) minmax(340px,1.22fr);
  overflow:auto;
  border:1px solid color-mix(in srgb,var(--modal-color) 42%,transparent);
  border-radius:25px;
  background:
    radial-gradient(circle at 20% 0,color-mix(in srgb,var(--modal-color) 19%,transparent),transparent 36%),
    linear-gradient(145deg,#071f21,#031416);
  box-shadow:0 35px 110px #000,0 0 38px color-mix(in srgb,var(--modal-color) 10%,transparent),inset 0 1px #ffffff12;
  transform:translateY(15px) scale(.97);
  transition:transform .22s ease;
}
.reward-modal.open .reward-modal-card{transform:none}
.reward-modal[data-reward="claude"] .reward-modal-card{--modal-color:#b78cff}
.reward-modal[data-reward="gemini"] .reward-modal-card{--modal-color:#58e4ff}
.reward-modal[data-reward="mystery"] .reward-modal-card{--modal-color:#ffd466}
.reward-modal-close{
  position:absolute;
  z-index:5;
  top:13px;
  right:13px;
  display:grid;
  width:35px;
  height:35px;
  place-items:center;
  border:1px solid #ffffff1c;
  border-radius:50%;
  background:#031012cf;
  color:#b7d0c9;
  font-size:21px;
}
.reward-modal-close:hover{border-color:var(--modal-color);color:#fff}
.reward-modal-art{
  position:relative;
  min-height:365px;
  overflow:hidden;
  border-right:1px solid #ffffff10;
  background:#020b0d;
}
.reward-modal-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 50%,#020b0df2 100%);
  pointer-events:none;
}
.reward-modal-art>span{
  position:absolute;
  z-index:2;
  right:12%;
  bottom:8%;
  left:12%;
  height:24px;
  border-radius:50%;
  background:var(--modal-color);
  filter:blur(30px);
  opacity:.32;
  animation:aura-pulse 3s ease-in-out infinite;
}
.reward-modal-art img{width:100%;height:100%;object-fit:cover}
.reward-modal-copy{padding:34px 32px 28px}
.reward-modal-kicker{color:var(--modal-color);font-size:8px;font-weight:800;letter-spacing:1.45px}
.reward-modal-copy h2{margin:9px 0 7px;color:#f1ffe8;font-size:34px;line-height:1;letter-spacing:-1.5px}
.reward-modal-copy>p{margin:0;color:#8dafA6;font-size:11px;line-height:1.6}
.reward-how{display:grid;gap:6px;margin-top:18px}
.reward-how article{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:10px;
  border:1px solid #ffffff0c;
  border-radius:10px;
  background:#ffffff04;
  padding:9px 10px;
}
.reward-how b{color:var(--modal-color);font-size:7px;letter-spacing:.8px}
.reward-how span{color:#8eaaa3;font-size:8px;line-height:1.45}
.reward-fineprint{
  display:grid;
  gap:5px;
  margin-top:14px;
  border:1px solid #ffd46624;
  border-radius:11px;
  background:#ffd46608;
  padding:10px 11px;
}
.reward-fineprint b{color:#ffd978;font-size:7px;letter-spacing:.8px}
.reward-fineprint span{color:#8c9f97;font-size:7px;line-height:1.5}
.reward-modal-copy>a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:15px;
  color:#c8e8df;
  font-size:9px;
  font-weight:800;
  text-decoration:none;
}
.reward-modal-copy>a:hover{color:var(--modal-color)}
@media(max-width:620px){
  .reward-modal{padding:12px}
  .reward-modal-card{grid-template-columns:1fr}
  .reward-modal-art{min-height:155px;max-height:155px;border-right:0;border-bottom:1px solid #ffffff10}
  .reward-modal-art img{object-position:center 58%}
  .reward-modal-copy{padding:20px}
  .reward-modal-copy h2{font-size:27px}
  .reward-how article{grid-template-columns:72px minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .reward-modal,.reward-modal-card,.reward-modal-art>span{animation:none!important;transition:none!important}
}

@media(max-height:720px) and (min-width:701px){
  .hop-head-frame{height:min(31vh,250px)}
}
@media(max-width:700px){
  .hop-head-frame{height:185px}
  .head-interactive{bottom:1%}
}
@media(pointer:coarse) and (orientation:landscape){
  .hop-head-frame{height:min(29vh,180px)}
  .head-interactive{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hop-head-frame,.head-frame-ring,.head-frame-ring::before,.head-frame-ring::after,.head-interactive i{animation:none!important}
}

#milestone-board{position:absolute;z-index:2;width:540px;height:285px;transform-origin:center;pointer-events:none;border:2px solid #ddff70;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 82% 25%,#e1ff61,#bbef08 42%,#4c910c 100%);box-shadow:0 0 12px #cbff57,0 0 48px #aaff4266,0 18px 60px #0008;color:#112509;will-change:transform,opacity}
#milestone-board[hidden]{display:none!important}
.milestone-copy{position:relative;z-index:1;width:62%;height:100%;padding:22px 26px;background:linear-gradient(90deg,#c7f620 55%,transparent)}
.milestone-logo{width:42px;height:42px;object-fit:contain;border-radius:10px;display:block;margin-bottom:10px}
.milestone-copy>span{font-size:9px;font-weight:900;letter-spacing:1.8px}
.milestone-copy h2{font-size:34px;line-height:1.03;letter-spacing:-1.2px;font-weight:900;margin:12px 0}
.milestone-copy p{color:#244609;font-size:14px;line-height:1.35;font-weight:800;margin:0}
.milestone-person{position:absolute;right:-25px;bottom:-2px;height:290px;width:290px;object-fit:contain;filter:drop-shadow(0 0 12px #eeff8c66)}

#game[data-danger="1"] #difficulty{color:#ffd96f}
#game[data-danger="2"] #difficulty{color:#ff879c;text-shadow:0 0 16px #ff245888}
#game[data-danger="2"] .vignette{background:radial-gradient(circle at 50% 43%,transparent 38%,#2b001736 78%,#13000ddd 100%)}