/* Pixel arena theme: original sprites, hard edges, bright game-like panels. */
:root{--ink:#333027;--green:#2a7e50;--cream:#fff3db;--gold:#ffd360;--muted:#82785b;--line:#d7bc85;--teal:#278653}
body{background:#e5edda;background-image:linear-gradient(#eff4e648 1px,transparent 1px),linear-gradient(90deg,#eff4e648 1px,transparent 1px);background-size:16px 16px;color:var(--ink)}
.masthead{background:#3d995d;color:#fff3cf;border:3px solid #2d4532;border-top:0;box-shadow:inset 0 -4px #2b7b48,0 4px 0 #c5d0ad;border-radius:0 0 9px 9px;height:89px;max-width:1204px;padding:0 24px}
.brand{color:#fff3cc;text-shadow:2px 2px #27603d}.brand>span>span{color:#ffe084}.brand small{color:#e3edcd;text-shadow:none}.brand svg{stroke:#fff2c0}.brand svg circle{fill:#ffc94f;stroke:#233d2c}.brand svg path{fill:#fff3c5}
.currencies{gap:9px}.currencies>span{background:#fff2d7;border:2px solid #285638;box-shadow:inset 0 -3px #e2c58d;color:#383124;border-radius:5px;min-width:86px}.currencies i{display:inline-flex;align-items:center;justify-content:center;width:23px}.currencies .coin{color:#e2a326;text-shadow:1px 1px #8e5a1a}.currencies .gem{color:#5fbde0;text-shadow:1px 1px #2c587e}.key img{width:24px;height:24px;image-rendering:pixelated}.square{background:#f5d58f;border:2px solid #315b39;color:#3c5032;box-shadow:inset 0 -3px #c5a55e;border-radius:5px}
.sound-toggle{display:flex;align-items:center;gap:5px;background:#fff0c6;border:2px solid #2b5839;box-shadow:inset 0 -3px #ddc38b;padding:7px 8px;font-size:8px;min-height:38px}.sound-toggle svg{width:19px;height:19px;fill:#378b52;stroke:#285333;stroke-width:1.7}.sound-toggle .sound-waves{fill:none}.sound-toggle.muted-audio svg{fill:#a19572;stroke:#7c755d}.sound-toggle.muted-audio .sound-waves{display:none}.sound-toggle span{white-space:nowrap}
main{padding-top:27px;gap:24px}.section-top{height:65px}.eyebrow{color:#577047;font-size:10px;letter-spacing:1.5px}h1{color:#304c32;font-size:30px}h2{color:#3a3b29}.live{color:#2a6f43}.live i{background:#3da05c;box-shadow:0 0 0 3px #42ac5b22}
.arena-frame{border:5px solid #2e5334;background:#398a52;border-radius:6px;box-shadow:0 5px 0 #283c2f,0 8px 0 #becba9;isolation:isolate}.arena-top,.arena-bottom{color:#fff1cf;font-family:monospace;font-size:11px;text-shadow:1px 1px #244a2c;letter-spacing:.2px}.arena-top{padding:4px 9px 9px}.arena-bottom{padding:7px 5px 2px;min-height:35px}.arena-bottom button{background:#f8d78a;color:#36492f;border:1px solid #304f31;box-shadow:inset 0 -2px #c6a55e;border-radius:3px;min-width:28px;text-shadow:none}.wave-dots i{height:6px;background:#256d43;box-shadow:0 1px #67b072}.wave-dots i.done{background:#ffda65;box-shadow:0 1px #b8822c}canvas{border-radius:0;image-rendering:pixelated;background:#fcf0d3}.battle-banner{background:#3d995c;border:3px solid #304831;box-shadow:inset 0 0 0 2px #9ecb6b,0 5px #283c2f66;color:#fff1be;text-shadow:2px 2px #2d5934;font-size:27px;animation:banner-in .28s cubic-bezier(.2,1.5,.4,1)}
.hero-avatar{border:2px solid #5c7143;background-color:#c5dea4;background-repeat:no-repeat;background-size:44px 44px;background-position:center;border-radius:5px;image-rendering:pixelated}.hero-avatar span{display:none}.hero-title b{color:#304f35}.hero-title span{color:#6c795a}.bar{height:9px;border:1px solid #5f774c;border-radius:2px;background:#b5c69a;box-shadow:inset 0 2px #83936b44}.bar i{background:#54b868;box-shadow:inset 0 2px #86db7a}.health>div:first-child{color:#5a6f4a}
button{border-radius:4px;border-color:#bca271;box-shadow:inset 0 -2px #d9c79e;transition:filter .12s,transform .1s}button:hover{background:#fff3cb;filter:brightness(1.04)}button:active{transform:translateY(2px);box-shadow:inset 0 1px #9c855f55}.skills button{background:#fff1d3;border:2px solid #657c4a;border-bottom:4px solid #536841;padding:12px 10px;box-shadow:inset 0 2px #fffbe5;border-radius:5px}.skills button>span{color:#a563b4;text-shadow:1px 1px #ece0b7}.skills button:nth-child(2)>span{color:#3ca45c}.skills button:nth-child(3)>span{color:#db9e32}.skills .active{background:#3b9054;color:#fff4ce;box-shadow:inset 0 2px #81b66a}.skills button:disabled{opacity:.7;background:#d4dac1;box-shadow:inset 0 2px #e6ebd8}.skills button small{color:#71835c}.skills .active small{color:#f4ebc6}.skills button.ready-glow{animation:skill-ready .45s ease-out}
.workshop{background:var(--cream);border:3px solid #4e6740;border-radius:7px;box-shadow:0 5px 0 #374c32,0 8px 0 #c6cfae}.tabs{padding:8px 9px 0;background:#4c9b5c;border-bottom:3px solid #426f41;gap:5px;border-radius:4px 4px 0 0}.tabs button{background:#86b478;color:#f9f2cf;border:2px solid #37613c;border-bottom:0;box-shadow:inset 0 2px #acd18b;text-shadow:1px 1px #3c6b3e;padding:10px 3px}.tabs button.active{background:#fff0c7;color:#375638;box-shadow:inset 0 3px #fffbe0;text-shadow:none}.tabs button span{font-weight:800}.panel-heading{margin-bottom:16px}.tag{background:#f2dcac;border:1px solid #dec088;box-shadow:inset 0 1px #fff3d7;color:#7b6744;border-radius:3px}.chest-stage{padding:8px 0 9px;background:radial-gradient(ellipse,#f8df98 0,transparent 65%);min-height:135px;overflow:visible}.chest-stage::before{color:#e4bb58;content:'✦';font-size:43px;top:9px;right:22%;animation:twinkle 2.4s infinite ease-in-out}.chest-stage::after{content:'✧';position:absolute;left:24%;top:60px;font-size:24px;color:#dcaf4c;animation:twinkle 2.4s .7s infinite ease-in-out}.chest-art{width:114px;height:87px;filter:drop-shadow(0 7px 0 #5c482125);margin-top:4px;transform-origin:50% 85%;animation:chest-idle 3s infinite ease-in-out}.chest-art .lid{background:#d38c43;border:3px solid #3e302b;border-radius:9px 9px 0 0;box-shadow:inset 0 5px #f6c565,inset 0 -5px #a36434;inset:5px 0 35px}.chest-art .box{background:#b66d3b;border:3px solid #3e302b;border-radius:0 0 3px 3px;box-shadow:inset 0 -6px #8a4b2c,inset 0 3px #de9750}.chest-art::before,.chest-art::after{background:#edc468;border:2px solid #4a3425;border-radius:0;top:10px;bottom:4px;box-shadow:inset 2px 0 #ffe6a0}.chest-art .lock{border:2px solid #4a3425;background:#ffe292;color:#654422;box-shadow:inset 0 -3px #d5a74a}.chest-art.opening{animation:chest-body .7s ease-out}.chest-art.opening .lid{animation:chest-lid .78s cubic-bezier(.2,.9,.3,1)}.chest-meta{color:#9b7c41;font-size:10px}.chest-progress{background:#dfcf9e;border:1px solid #b69a5a;height:6px}.chest-progress i{background:#eab54a;box-shadow:inset 0 1px #ffe18d}
.primary{background:#419c5c;border:2px solid #2d5136;border-bottom:4px solid #294c33;box-shadow:inset 0 2px #8dd17f;color:#fff5d4;text-shadow:1px 1px #2e6b3e}.primary:hover{background:#51aa66}.open-chest{margin-top:8px;padding:14px 15px}.open-chest b{font-size:21px}.open-chest span{color:#fff0b7;font-family:monospace;font-size:11px}.small-actions button{background:#e9dfbd;color:#796a48;border:1px solid #cbb985;box-shadow:inset 0 1px #fff4d8;font-size:9px}.small-actions button.active{background:#c6df9f;color:#426132;border-color:#94b276}.divider{border-color:#d9bf8e;color:#8e774e}.text-button{color:#347b47;box-shadow:none}.gear{background:linear-gradient(#fff5df,#eee0bc);border:2px solid #9c8c62;border-bottom:4px solid var(--rarity,#a4a886);box-shadow:inset 0 0 0 2px #fff9e7;border-radius:4px;padding:6px 3px 8px;min-height:93px;position:relative}.pixel-icon{display:inline-block;object-fit:contain;image-rendering:pixelated;vertical-align:middle;filter:drop-shadow(0 2px 0 #483b3320)}.gear .pixel-icon{width:44px;height:44px}.gear b{color:#605436;font-size:10px}.gear small{font-size:9px;color:#93805d}.gear:hover{background:#fff4cd;border-color:#786d48}.item-result{background:#fff7e4;border:2px solid #cebd8d;border-left:5px solid var(--rarity);box-shadow:inset 0 1px #fffcf2;padding:9px}.item-result>div{gap:6px}.item-result b{display:flex;align-items:center;font-size:11px;gap:6px}.item-result b .pixel-icon{width:30px;height:30px}.item-result small{font-size:9px}.item-result p{font-size:10px;margin:6px 0 2px}.up{color:#31894a}.row{border-color:#dec899}.row .row-icon{background:#f2dfaf;border:1px solid #d9bd7b;color:#8d7844;border-radius:4px}.row button{background:#f9e8c1;border:1px solid #baa06a;box-shadow:inset 0 2px #fff5d8,inset 0 -2px #ddc58f;color:#74603f}.row button:disabled{background:#e4dac0;color:#94886c}.stat{background:#efe3bd;border:1px solid #d5c28e;border-radius:3px;box-shadow:inset 0 2px #fff4d2}.stat b{color:#566c3f}.stat small{color:#8e7c52}.class-grid button{border:2px solid #a6ae7e;background:#f6edce;box-shadow:inset 0 2px #fffae9}.class-grid button.active{background:#4b9658;border-color:#345c39;color:#fff4c9;box-shadow:inset 0 2px #8bbf73}.age-card{background:#f3e7c5;border:1px solid #c9b783;border-radius:4px}.age-card.current{background:#d9e7b3;border:2px solid #91ad6b}.age-card.current .number{color:#5e8b43}.age-card .number{color:#bcaa78}.age-card small{color:#9a8760}.prestige{background:#ead8ac;border:1px solid #c9ae72}.muted,.prestige p{color:#8b7d5e}.field-note{color:#788762}.field-note>span{color:#ba9b44}footer{color:#83916f;border-color:#c5cfae}
dialog{background:#fff2d6;border:3px solid #4d633b;box-shadow:inset 0 0 0 3px #d4c094,0 15px 70px #152e2855;border-radius:6px}dialog::backdrop{background:#17382c99}dialog h2{color:#4a5f37}dialog p{color:#8c7a56}.modal-close{box-shadow:none}.modal-actions button{background:#efdfb4;border-color:#ba9e69}.modal-actions .primary{background:#4b985a}.volume-control{display:flex;align-items:center;gap:10px;margin:20px 0 10px;font-size:11px;color:#766441}.volume-control input{min-width:50px;flex:1;accent-color:#419455}.volume-control output{min-width:30px}.toast{border:2px solid #345436;background:#43975a;box-shadow:inset 0 1px #83bf74,0 4px 0 #273d2f55;color:#fff5d2;border-radius:4px}.loot-popup{position:absolute;left:50%;top:2px;z-index:2;display:flex;flex-direction:column;align-items:center;min-width:130px;pointer-events:none;animation:loot-rise 1.1s both;transform-origin:center;background:radial-gradient(ellipse,#fff4c7dc,transparent 70%);padding:5px 10px;text-align:center}.loot-popup .pixel-icon{width:61px;height:61px;filter:drop-shadow(0 0 6px var(--loot-color))}.loot-popup b{font:800 14px 'Barlow Condensed',sans-serif;letter-spacing:1px;color:var(--loot-color);text-shadow:1px 1px #fff8dd,-1px -1px #fff8dd}.loot-popup small{font-size:9px;color:#6c5631;background:#fff4d5dd;padding:2px 4px;border-radius:2px}.loot-popup.rarity-4,.loot-popup.rarity-5,.loot-popup.rarity-6{background:radial-gradient(ellipse,#fff3bc,transparent 70%)}.flying-coin{position:fixed;pointer-events:none;z-index:6;width:22px;height:22px;image-rendering:pixelated;animation:coin-flight .75s cubic-bezier(.35,0,.65,1) both}.bump{animation:bump .28s ease-out}.reveal{animation:reveal .4s cubic-bezier(.15,1.5,.4,1)}.equip-pop{animation:equip-pop .5s ease-out}
@keyframes chest-idle{0%,80%,100%{transform:translateY(0)}88%{transform:translateY(-3px) rotate(-2deg)}94%{transform:translateY(-2px) rotate(2deg)}}@keyframes chest-body{0%{transform:scale(1)}18%{transform:scale(1.09,.92) rotate(-3deg)}36%{transform:scale(.95,1.07) rotate(3deg)}65%{transform:scale(1.04,.98)}100%{transform:scale(1)}}@keyframes chest-lid{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(-5deg)}48%,70%{transform:translateY(-28px) rotate(-18deg)}100%{transform:translateY(0) rotate(0)}}@keyframes twinkle{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.12)}}@keyframes loot-rise{0%{opacity:0;transform:translate(-50%,15px) scale(.35)}20%{opacity:1;transform:translate(-50%,-33px) scale(1.1)}35%,65%{opacity:1;transform:translate(-50%,-37px) scale(1)}100%{opacity:0;transform:translate(-50%,-75px) scale(.9)}}@keyframes coin-flight{0%{transform:translate(0,0) scale(.7);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:0}}@keyframes bump{0%,100%{transform:scale(1)}45%{transform:scale(1.12)}}@keyframes reveal{from{opacity:.2;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}@keyframes equip-pop{0%,100%{filter:brightness(1);transform:scale(1)}35%{filter:brightness(1.4);transform:scale(1.05)}}@keyframes banner-in{from{transform:translateY(8px) scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes skill-ready{50%{box-shadow:0 0 0 5px #ffd86977}}
@media(max-width:900px){.masthead{margin:0 24px;padding:0 18px}.currencies>span{min-width:67px;padding:7px 9px}.sound-toggle span{display:none}.skills button{padding:10px 7px}}
@media(max-width:740px){.masthead{height:72px;margin:0;border-left:0;border-right:0;border-radius:0;padding:0 10px;gap:7px;box-shadow:inset 0 -3px #2b7b48,0 3px #c5d0ad}.brand{font-size:20px;gap:5px}.brand small{font-size:6px;letter-spacing:2.8px}.brand svg{width:28px}.currencies{gap:4px}.currencies>span{min-width:0;padding:5px 6px;gap:3px;font-size:10px;border-width:1px}.currencies i{width:16px;font-size:16px}.key img{width:19px;height:19px}.sound-toggle{padding:5px;min-height:31px;border-width:1px}.sound-toggle svg{width:17px;height:17px}.square{padding:4px 6px;font-size:17px;border-width:1px}main{padding:16px 12px 20px}.section-top{height:56px}h1{font-size:26px}.arena-frame{border-width:4px}.arena-top{font-size:9px}.arena-bottom{font-size:9px;min-height:31px}.wave-dots{gap:3px}.wave-dots i{width:12px;height:5px}.hero-strip{padding:15px 0 12px}.skills{gap:6px}.skills button{padding:9px 6px;border-width:1px;border-bottom-width:3px}.skills button b{font-size:16px}.skills button>span{font-size:20px}.skills button small{font-size:8px}.workshop{margin-top:9px;border-width:2px}.tabs{border-radius:3px 3px 0 0;padding:7px 7px 0;background:#4c9b5c;position:static}.tabs button{padding:11px 4px}#panel{padding:18px}.mobile-dock{background:#3f9257f7;border-top:3px solid #355638;box-shadow:inset 0 2px #7cb76a}.mobile-dock .primary{background:#f5cc6c;color:#514325;border-color:#62552c;text-shadow:0 1px #ffe8a2;box-shadow:inset 0 2px #ffe9a2;min-height:42px}.mobile-dock .primary span{color:#7f612c}.mobile-dock>button:last-child{background:#d1e6a8;border:2px solid #42603b;color:#3c633b}.field-note{font-size:10px}.chest-stage{min-height:140px}footer{font-size:8px}.loot-popup{top:10px}.chest-art{transform:scale(1);margin:5px 0 9px}}
@media(max-width:370px){.brand svg{display:none}.brand{font-size:19px}.masthead{gap:6px}.currencies>span{padding:5px}.skills button b{font-size:14px}.skills button>span{font-size:16px}}
@media(prefers-reduced-motion:reduce){.loot-popup{animation:none!important;opacity:1;transform:translate(-50%,-20px)}.flying-coin{display:none}.chest-stage::before,.chest-stage::after{animation:none}}

.skills button[data-skill]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--cooldown,0%);background:#91a16e;transition:width .2s linear}.skills button[data-skill]:not(:disabled)::after{background:#f8ce62}