:root{--forest:#3d6737;--forest-dark:#102114;--gold:#d99a00;--cream:#fff9df;--ink:#071009;--danger:#ff4d55;--success:#6cff8f}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;background:var(--ink);color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none}.arena{height:100dvh;display:grid;grid-template-rows:1fr 2px 1fr;background:var(--forest-dark)}.player{position:relative;overflow:hidden;isolation:isolate}.player--top{transform:rotate(180deg)}.hero-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:-3}.shade{position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at center,rgba(8,33,13,.05),rgba(4,10,5,.83)),linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%)}.tap{position:absolute;inset-block:0;width:50%;border:0;background:transparent;-webkit-tap-highlight-color:transparent;touch-action:none}.tap--minus{left:0}.tap--plus{right:0}.tap:active{background:rgba(217,154,0,.08)}.life{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font-size:clamp(7rem,38vw,16rem);font-weight:900;line-height:.8;letter-spacing:-.09em;color:#fff;text-shadow:0 8px 35px #000,0 0 2px #fff;pointer-events:none;font-variant-numeric:tabular-nums}.hero-name{position:absolute;left:50%;bottom:max(1.1rem,env(safe-area-inset-bottom));transform:translateX(-50%);max-width:70%;padding:.4rem .8rem;border:1px solid rgba(255,249,223,.2);border-radius:99px;background:rgba(7,16,9,.55);backdrop-filter:blur(10px);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.divider{position:relative;z-index:5;background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--cream) 50%,var(--gold) 85%,transparent)}.divider img{position:absolute;width:42px;height:42px;object-fit:contain;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px;border-radius:50%;background:var(--cream);filter:sepia(1) saturate(2)}.feedback{position:absolute;inset:0;pointer-events:none}.delta{position:absolute;top:48%;font-weight:900;font-size:clamp(2.5rem,13vw,5rem);text-shadow:0 4px 12px #000;animation:fall .72s cubic-bezier(.2,.7,.4,1) forwards}.delta.minus{left:17%;color:var(--danger)}.delta.plus{right:17%;color:var(--success)}@keyframes fall{0%{opacity:0;transform:translateY(-30px) scale(.7)}20%{opacity:1;transform:translateY(-5px) scale(1.12)}100%{opacity:0;transform:translateY(70px) scale(.9)}}.player.shake{animation:shake .36s linear}@keyframes shake{20%,60%{translate:-7px 0}40%,80%{translate:7px 0}}.menu-button{position:fixed;z-index:20;top:max(14px,env(safe-area-inset-top));right:14px;width:48px;height:48px;border:1px solid rgba(255,249,223,.25);border-radius:16px;background:rgba(11,25,14,.78);backdrop-filter:blur(14px);display:grid;place-content:center;gap:5px}.menu-button span{display:block;width:20px;height:2px;background:var(--cream);border-radius:2px}.connection{position:fixed;z-index:10;left:12px;top:12px;padding:.35rem .6rem;border-radius:99px;background:#662b2f;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;transition:.2s}.connection.online{background:rgba(22,82,42,.72);opacity:.65}.drawer{position:fixed;z-index:40;right:0;top:0;height:100%;width:min(88vw,390px);padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));background:rgba(12,28,16,.97);border-left:1px solid rgba(217,154,0,.3);box-shadow:-20px 0 60px #000;transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);overflow:auto}.drawer.open{transform:none}.drawer header{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}.drawer header img{width:54px;height:54px;object-fit:cover;border-radius:15px}.drawer header div{display:grid;flex:1}.drawer small{color:#bfcab9}.drawer header button{font-size:2rem}.drawer button{border:1px solid rgba(255,249,223,.16);border-radius:12px;background:#18351e;color:#fff;padding:.8rem;font:inherit}.drawer nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.panel{display:none}.panel.active{display:grid;gap:12px}.panel label{display:grid;gap:6px;color:#cdd8c8}.panel h2{margin:.4rem 0}.hero-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-height:230px;overflow:auto;padding:2px}.hero-choice{display:grid;gap:3px;padding:4px!important;background:#112715!important;font-size:.6rem!important;text-align:center}.hero-choice img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}.hero-choice[aria-pressed="true"]{outline:2px solid var(--gold);background:#285230!important}.panel ol{max-height:35vh;overflow:auto;margin:0;padding-left:1.8rem}.panel li{padding:.45rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:.84rem}.drawer footer{display:grid;gap:8px;margin-top:20px}.drawer code{font-size:.68rem;word-break:break-all;color:#d9c47d}.backdrop{position:fixed;z-index:30;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.2s}.backdrop.open{opacity:1;pointer-events:auto}@media (orientation:landscape) and (max-height:600px){.arena{grid-template-columns:1fr 2px 1fr;grid-template-rows:1fr}.player--top{transform:none}.divider img{width:34px;height:34px}.life{font-size:clamp(6rem,22vw,12rem)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}