:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#f6f8ff;background:#101d36;color-scheme:dark;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 0,#244666 0,#101d36 65%);padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid white;outline-offset:4px}button:disabled{cursor:default;opacity:.42}button:not(:disabled):active{transform:translateY(3px)}.game{width:min(100%,640px);margin:auto}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}h1{margin:0;font-size:1.8rem;line-height:1;letter-spacing:-.05em}h1 span{display:block;font-size:.75rem;letter-spacing:.18em;font-weight:700;color:#9bb9d0;margin-top:8px}.small{background:#ffffff0d;border:1px solid #ffffff26;color:#e1edf7;padding:10px 15px;border-radius:12px;min-height:44px;font-size:.875rem}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.stats div{padding:10px 13px;background:#ffffff08;border:1px solid #ffffff18;border-radius:14px;display:flex;flex-direction:column;gap:3px}.stats span{font-size:.875rem;color:#abc1d6}.stats strong{font-size:1.55rem;font-variant-numeric:tabular-nums}.stats div:first-child strong{color:#ffd572}.stats div:last-child strong{color:#ffa795}.arena{position:relative;height:clamp(340px,52svh,480px);border-radius:22px;overflow:hidden;border:1px solid #7193ac66;background:#102d42;isolation:isolate;box-shadow:0 18px 60px #0003}canvas{display:block;width:100%;height:100%}.progress{position:absolute;top:0;left:0;width:100%;height:4px;background:#ffffff14;z-index:2}.progress div{height:100%;background:#7cdeef;width:0}.stage-label{position:absolute;top:20px;left:20px;font-size:.75rem;letter-spacing:.18em;color:#b8d9eaaa;pointer-events:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:#102039e8;z-index:3}.overlay[hidden]{display:none}.card{text-align:center;width:min(100%,390px)}.eyebrow{letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;font-weight:700;color:#ffd572}.portrait{width:110px;height:119px;margin:10px auto 4px;background:url('assets/rayan.png') left top / 880px 1309.58px no-repeat;filter:drop-shadow(0 10px 18px #65caf142)}h2{font-size:1.8rem;line-height:1.14;margin:6px 0 12px;letter-spacing:-.04em}.card p{font-size:1rem;line-height:1.5;margin:0 0 17px;color:#bcd0e3}.card .asset-note{font-size:.875rem;color:#ffd572}.primary{background:#ffd572;color:#192e40;font-weight:800;padding:15px 22px;min-height:54px;width:100%;border-radius:14px;box-shadow:0 5px 0 #c3983f}.feedback{position:absolute;bottom:18px;left:12px;right:12px;text-align:center;color:#ffd86c;font-weight:700;pointer-events:none;text-shadow:0 2px 6px #081728}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.action{position:relative;overflow:hidden;min-height:88px;border-radius:18px;color:#10283e;display:grid;grid-template-columns:36px auto;align-content:center;justify-content:center;column-gap:10px;row-gap:1px;user-select:none;touch-action:none;box-shadow:0 5px 0 #071223}.jump{background:#81deed}.strike{background:#ffd572}.symbol{grid-row:1/3;align-self:center;font-size:2rem}.action strong{font-size:1.125rem;text-align:left}.key{font-size:.875rem;opacity:.7;text-align:left}.action i{position:absolute;bottom:0;left:0;height:5px;background:#10283e66}.hint{font-size:.875rem;color:#91aec5;line-height:1.5;text-align:center;margin:16px 0 0}.draft{display:none}[hidden]{display:none!important}@media(max-width:420px){body{padding-top:max(12px,env(safe-area-inset-top))}.top{margin-bottom:12px}.arena{height:clamp(340px,50svh,430px)}.stats div{padding:8px 11px}.action{min-height:80px}.hint{font-size:.8rem}}@media(max-height:700px) and (orientation:portrait){.arena{height:330px}.portrait{width:86px;height:93px;background-size:688px 1023.16px;margin:6px auto 0}.card p{font-size:.875rem;margin-bottom:12px}h2{font-size:1.5rem}.hint{margin-top:12px}}@media(max-height:650px) and (orientation:landscape){body{padding:10px}.game{max-width:1000px;display:grid;grid-template-columns:1fr 185px;gap:10px}.top{grid-column:1/-1;margin:0}.stats{grid-column:2;grid-row:2;grid-template-columns:1fr;margin:0;gap:6px}.stats div{flex-direction:row;justify-content:space-between;align-items:center}.stats strong{font-size:1.1rem}.arena{grid-column:1;grid-row:2/5;height:75svh;min-height:250px}.controls{grid-column:2;grid-row:3;grid-template-columns:1fr;margin:0;gap:8px}.action{min-height:60px}.hint{grid-column:2;margin:0;font-size:.75rem}.portrait{display:none}.card p{font-size:.875rem}.stage-label{top:14px}}@media(prefers-reduced-motion:reduce){button{transition:none}}

.character-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px auto;max-width:280px}.character-choice{position:relative;min-height:122px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:2px solid #6787a044;border-radius:16px;background:#ffffff05;color:#cedceb;padding:6px 10px}.character-choice[aria-pressed=true]{border-color:#ffd572;background:#ffd57212;color:#ffdd8a}.character-choice strong{font-size:1rem}.avatar{display:block;width:72px;height:83px;background-repeat:no-repeat}.selected-mark{display:none;position:absolute;right:7px;top:5px;font-size:.875rem;color:#ffd572}.character-choice[aria-pressed=true] .selected-mark{display:block}h1 b{font:inherit}.card h2{font-size:1.65rem}@media(max-height:700px) and (orientation:portrait){.character-choice{min-height:114px}.avatar{width:68px;height:78px}.character-picker{margin:8px auto 6px}.card h2{font-size:1.4rem;margin:4px 0 8px}}@media(max-height:650px) and (orientation:landscape){.character-picker{margin:7px auto;max-width:250px}.character-choice{min-height:48px;flex-direction:row;padding:5px}.avatar{display:none}.card h2{font-size:1.35rem;margin:4px 0 8px}.card p{margin-bottom:10px}}

.coach-bubble{position:absolute;right:12px;top:12px;z-index:2;max-width:min(176px,58%);padding:8px 10px;border:1px solid #e9bf6980;border-radius:12px 12px 3px 12px;background:#172d43f2;color:#fff3cc;font-size:13px;line-height:1.3;pointer-events:none;box-shadow:0 4px 18px #0002}.coach-bubble strong{display:block;font-size:11px;color:#ffd572;margin-bottom:3px}.coach-bubble span{display:block}@media(max-width:420px){.coach-bubble{top:10px;right:8px;font-size:12px;padding:7px 9px;max-width:160px}}

.arena:has(#coachBubble:not([hidden])) .stage-label{visibility:hidden}