/* Clover Field: an original pixel landscape for the two-screen battle station. */
body[data-screen="arena"] .upper-screen>:not(.device-status):not(#arena-display){display:none}
body[data-screen="arena"] #arena-display{display:block}
#arena-display{display:none;margin-top:10px}
body[data-screen="arena"] .upper-screen{padding:10px}
body[data-screen="arena"] .console{max-width:800px}
body[data-screen="arena"] .device-face{padding:24px 72px 0}
body[data-screen="arena"] .top-bezel{padding:7px}
body[data-screen="arena"] .touch-bezel{margin-inline:12px;padding:7px}
body[data-screen="arena"] .screen-bridge{height:24px}
body[data-screen="arena"] .device-left{left:8px;width:58px}
body[data-screen="arena"] .device-right{right:8px;width:58px}
body[data-screen="arena"] .circle-pad{width:43px;height:43px;margin-inline:auto}
body[data-screen="arena"] .d-pad{transform:scale(.75);transform-origin:center left}
body[data-screen="arena"] .face-buttons{transform:scale(.72);transform-origin:top left;margin-bottom:-15px}
body[data-screen="arena"].arena-active #arena-view>.page-heading{display:none}
body[data-screen="arena"].arena-active .lcd{height:305px;min-height:0}
body[data-screen="arena"] .lcd>.screen-status,body[data-screen="arena"] #fusion-allowance{display:none}
body[data-screen="arena"] .lcd{padding:12px 14px 20px}
#arena-view>.page-heading{margin:4px 0 10px;align-items:center}
#arena-view>.page-heading{display:flex}
#arena-view>.page-heading h1{font:26px var(--pixel);margin:0}
#arena-view>.page-heading .eyebrow{font-size:7px;margin-bottom:4px}
#arena-view>.page-heading p{font-size:10px}
#arena-view .arena-tabs{margin:0 0 12px;padding-bottom:8px;gap:5px}
#arena-view .arena-tabs button{padding:7px 10px;font-size:10px}
#arena-view .arena-tabs>span{font-size:7px;letter-spacing:.4px}
.arena-field{position:relative;isolation:isolate;aspect-ratio:640/340;width:100%;overflow:hidden;background:#c5dd92 url('/assets/arena-meadow.svg') center/100% 100%;border:3px solid #283b3c;box-shadow:0 0 0 1px #839991;color:#303f46;container-type:inline-size}
.arena-field:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:9;background:repeating-linear-gradient(transparent 0 3px,#192c3820 3px 4px);opacity:.2}
.arena-field-label{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;background:#21483ce8;padding:7px 10px;color:#ecf5cc;font:8px var(--mono);letter-spacing:1px;z-index:5}
.arena-platform{position:absolute;border-radius:50%;background:repeating-linear-gradient(0deg,#94bc6d 0 4px,#a2c676 4px 8px);border:4px solid #6b9564;box-shadow:0 5px 0 #a59d65,0 8px 0 #5c7e58,inset 0 4px 0 #c3de85}
.arena-platform:before{content:'';position:absolute;inset:12% 8%;border-radius:50%;border:2px dashed #d1e59599}
.arena-platform--far{width:40%;height:18%;left:58%;top:43%;transform:rotate(-3deg)}
.arena-platform--near{width:53%;height:25%;left:-6%;bottom:-8%;transform:rotate(3deg)}
.arena-hud{position:absolute;width:43%;padding:10px 13px 7px;background:#faf7dd;color:#303e45;z-index:4;border:3px solid #475656;box-shadow:3px 4px 0 #42615155,inset 0 0 0 3px #d8dcb7;border-radius:5px 5px 16px 5px}
.arena-hud--opponent{top:13%;left:3%}.arena-hud--you{bottom:7%;right:3%;width:45%}
.arena-hud-name{display:flex;align-items:center;justify-content:space-between;gap:5px}
.arena-hud-name h3{font:500 clamp(16px,4cqw,29px)/1 var(--pixel);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.5px}
.arena-hud-name>span{font:8px var(--mono);color:#758066;border-left:1px solid #aab39a;padding-left:7px}
.arena-hud-types{display:flex;justify-content:space-between;font:7px var(--mono);text-transform:uppercase;margin:5px 0 6px;gap:4px;color:#677660}
.arena-hud-types>span{color:#887597;text-align:right}
.arena-hp{display:flex;gap:5px;align-items:center;background:#49514a;border-radius:3px;padding:3px 4px;margin-left:15%}
.arena-hp>b{font:700 10px var(--pixel);color:#f4d26f;line-height:1}
.arena-hp-track{height:8px;flex:1;background:#293c37;border:1px solid #283c31;box-shadow:0 1px 0 #6a7767;overflow:hidden}
.arena-hp-track i{display:block;height:100%;background:linear-gradient(#a4e6a2 0 30%,#51af73 30% 76%,#398357 76%)}
.arena-hp-track i[data-tone="low"]{background:linear-gradient(#f8e7a2 0 30%,#dec064 30% 76%,#b48b42 76%)}
.arena-hp-track i[data-tone="critical"]{background:linear-gradient(#ffa697 0 30%,#e67262 30% 76%,#b4474d 76%)}
.arena-hp-value{text-align:right;font:20px/1.2 var(--pixel);margin:2px 3px 0}.arena-hp-value>span{color:#7c8874}
.arena-hud-trim{height:3px;background:linear-gradient(90deg,#929bd7 65%,#d6dcc1 65%);margin:3px 0 0}
.arena-creature{position:absolute;z-index:3;width:36%;height:64%;display:grid;place-items:center;pointer-events:none}
.arena-creature--opponent{left:59%;top:-1%;width:32%;height:57%}
.arena-creature--you{left:3%;bottom:-6%;width:43%;height:60%}
.arena-sprite-motion{width:100%;height:100%;display:grid;place-items:end center}
.arena-creature img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;mix-blend-mode:multiply;filter:drop-shadow(0 4px 0 #28463322)}
.arena-creature--you img{transform:scaleX(-1)}
.arena-creature.is-fainted .arena-sprite-motion{opacity:.22;transform:translateY(18px)}
.arena-hit{position:absolute;width:45%;aspect-ratio:1;border:7px solid #fff3b4;background:#fff6a96b;clip-path:polygon(50% 0,60% 31%,88% 13%,72% 42%,100% 50%,69% 62%,87% 88%,57% 73%,50% 100%,40% 72%,12% 88%,28% 57%,0 50%,32% 39%,13% 12%,42% 29%);opacity:0}
.arena-hit[data-heal="true"]{clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);background:#b8f8af;border-color:#e7ffe4}
.arena-damage{position:absolute;top:25%;font:700 24px var(--pixel);color:#fff8df;text-shadow:2px 2px #692f4e,-1px -1px #692f4e;z-index:8;opacity:0;white-space:nowrap}
.arena-damage[data-heal="true"]{color:#d1ffc7;text-shadow:2px 2px #315837}
.arena-awaiting{position:absolute;right:6%;top:26%;width:30%;text-align:center;color:#527c67;display:grid;gap:4px}.arena-awaiting>span{font:70px var(--pixel);line-height:1}.arena-awaiting small{font:7px var(--mono)}
.arena-result{position:absolute;z-index:6;inset:43% 15% auto;background:#253b41ed;color:#f0f2d1;border:3px solid #f7e6a2;box-shadow:0 4px #27493d88;padding:12px;text-align:center}.arena-result strong{display:block;font:32px/1 var(--pixel);letter-spacing:2px}.arena-result span{display:block;font:8px var(--mono);margin-top:6px}
.arena-attract{position:absolute;inset:24% 8% auto;text-align:center;color:#2b4d45;text-shadow:0 2px #e8f5c699}.arena-attract>span{font:9px var(--mono);letter-spacing:3px}.arena-attract h2{font:48px/1 var(--pixel);margin:10px 0}.arena-attract h2 span{color:#6778a0;font-size:23px;margin-left:8px}.arena-attract p{font:17px/1.35 var(--pixel);margin:12px}.arena-attract>div{font:7px var(--mono);letter-spacing:1px;margin-top:18px}
.arena-console{border:2px solid #52636c;background:#1a2b37;box-shadow:0 3px 0 #101c2d;border-radius:5px;overflow:hidden}
.arena-console-strip{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;background:#253a45;color:#9bc7ba;font:7px var(--mono);letter-spacing:.6px}
.arena-command-panel{display:grid;grid-template-columns:1fr 1.05fr;gap:7px;padding:7px;background:#435961}
.arena-dialogue{position:relative;background:#f5f2de;border:3px solid #647679;box-shadow:inset 0 0 0 2px #d8d7c3;border-radius:5px;color:#39434b;padding:13px 13px 22px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.arena-dialogue-label{font:7px var(--mono);color:#828678;letter-spacing:1px}.arena-dialogue p{font:25px/1.13 var(--pixel);margin:8px 0}.arena-dialogue small{font:10px/1.4 var(--body);color:#777b71}.arena-dialogue i{position:absolute;bottom:6px;right:10px;font:13px var(--pixel);font-style:normal;color:#68827b}
.arena-command-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.arena-command{--button:#e98988;--rim:#944f57;--shine:#f7b2a4;min-height:69px;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:9px 3px;border:3px solid var(--rim);border-radius:12px;background:linear-gradient(var(--shine) 0 11%,var(--button) 11% 55%,color-mix(in srgb,var(--button),#30384d 13%) 55%);box-shadow:inset 0 0 0 2px #ffffff75,0 2px 0 #1b3348;color:#263840;transition:filter .12s,transform .12s;text-align:center}
.arena-command strong{font:500 25px/1 var(--pixel);text-shadow:1px 1px #ffffff65}.arena-command small{font:8px/1.3 var(--mono);max-width:100%}.arena-command:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}.arena-command:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 0 0 2px #ffffff75}.arena-command:focus-visible{outline:3px solid #fff8bd;outline-offset:1px;z-index:2}.arena-command:disabled{filter:grayscale(.7);opacity:.48;cursor:not-allowed}
.command-gold{--button:#dbbd73;--rim:#8d7a53;--shine:#f4d79a}.command-leaf{--button:#9fbd86;--rim:#607e61;--shine:#c9dda0}.command-blue{--button:#8fb9ca;--rim:#567887;--shine:#bad5df}
.arena-round-log{border-top:1px solid #576b7155;padding:0 12px;color:#a7c1c5}.arena-round-log summary{cursor:pointer;padding:10px 0;font:14px var(--pixel)}.arena-round-log summary>span{float:right;font:7px var(--mono);color:#7e9d9e;padding-top:4px}.arena-round-log>div{max-height:145px;overflow:auto;border-top:1px solid #71868b33;padding-bottom:8px}.arena-round-log p{font:11px/1.6 var(--body);display:flex;gap:10px;margin:8px 0}.arena-round-log p>b{font:9px var(--mono);color:#c8c79e;padding-top:3px}
.arena-console-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #71868b33;font:7px var(--mono);color:#829fa1}.arena-console-footer button{padding:4px 0;font:11px var(--pixel);background:none;color:#c9dcc4;text-decoration:underline;text-underline-offset:3px}
.arena-info-hero{display:flex;align-items:center;gap:20px;margin:18px 0}.arena-info-hero img{width:140px;height:140px;object-fit:contain;image-rendering:pixelated}.arena-info-hero h2{font:32px var(--pixel)}.arena-info-hero p{font:12px var(--mono);text-transform:uppercase}.arena-info-hero small{color:#9eacc1}.arena-info-health{display:flex;justify-content:space-between;padding:15px 0;border-block:1px solid #647286;font:12px var(--mono);color:#c1dba4}.arena-info-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.arena-info-stats>div{background:#24364b;border:1px solid #4a607b;padding:12px}.arena-info-stats span{display:block;font:10px var(--mono);color:#a0b5c9}.arena-info-stats strong{display:block;font:26px var(--pixel);margin-top:5px}
@media(max-width:700px){.arena-hud{padding:6px 8px 5px;border-width:2px;box-shadow:2px 3px 0 #42615155,inset 0 0 0 2px #d8dcb7}.arena-hud-name>span{font-size:6px;padding-left:4px}.arena-hud-types{font-size:6px;margin:3px 0}.arena-hud-types>span{display:none}.arena-hp{padding:2px 3px}.arena-hp-track{height:6px}.arena-hp-value{font-size:16px}.arena-field-label{font-size:6px;padding:5px 7px}.arena-attract h2{font-size:35px}.arena-attract p{font-size:15px;margin:8px}.arena-attract>div{margin-top:12px;font-size:6px}.arena-result strong{font-size:26px}.arena-result span{font-size:7px}.arena-platform{border-width:3px}}
@media(max-width:480px){body[data-screen="arena"] .upper-screen{padding:6px}body[data-screen="arena"] .lcd{padding:8px 7px 14px}#arena-display{margin-top:6px}#arena-view>.page-heading p,#arena-view .arena-tabs>span{display:none}#arena-view>.page-heading h1{font-size:23px}#arena-view>.page-heading .eyebrow{font-size:6px}#arena-view .arena-tabs{margin-bottom:8px;padding-bottom:5px}#arena-view .arena-tabs button{font-size:9px;padding:6px 8px}.arena-field{aspect-ratio:640/370;border-width:2px}.arena-hud{width:46%;padding:5px 6px 3px}.arena-hud--you{width:47%;right:2%;bottom:6%}.arena-hud--opponent{left:2%;top:14%}.arena-hud-name h3{font-size:clamp(14px,4.5cqw,22px)}.arena-hud-types{font-size:5px}.arena-hp>b{font-size:8px}.arena-hp-track{height:5px}.arena-hp-value{font-size:14px}.arena-hud-trim{height:2px;margin-top:2px}.arena-field-label{font-size:5px;letter-spacing:.3px}.arena-command-panel{gap:4px;padding:4px;grid-template-columns:.95fr 1.1fr}.arena-dialogue{padding:9px 8px 18px;border-width:2px}.arena-dialogue-label{font-size:5px;letter-spacing:.4px}.arena-dialogue p{font-size:20px}.arena-dialogue small{font-size:8px}.arena-command-grid{gap:4px}.arena-command{min-height:59px;border-width:2px;border-radius:9px}.arena-command strong{font-size:21px}.arena-command small{font-size:6px}.arena-console-strip{font-size:5px;padding:7px;letter-spacing:.3px}.arena-console-footer{font-size:6px;padding:8px;flex-wrap:wrap}.arena-console-footer button{font-size:10px}.arena-round-log{padding:0 9px}.arena-round-log p{font-size:10px}.arena-result{padding:7px;inset-inline:10%}.arena-result strong{font-size:22px}.arena-result span{font-size:6px}.arena-attract{inset:25% 4% auto}.arena-attract>span{font-size:7px}.arena-attract h2{font-size:28px;margin:8px 0}.arena-attract p{font-size:13px}.arena-attract>div{font-size:5px;margin-top:12px}.arena-awaiting>span{font-size:45px}.arena-awaiting small{font-size:5px}.arena-damage{font-size:18px}.arena-info-hero{gap:10px}.arena-info-hero img{width:90px;height:100px}.arena-info-hero h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){.arena-command{transition:none}.arena-creature *,.arena-hp-track i{animation:none!important;transition:none!important}}
@media(max-width:600px){body[data-screen="arena"] .device-face{padding:25px 13px 0}body[data-screen="arena"] .device-left{left:14px;width:72px}body[data-screen="arena"] .device-right{right:14px;width:72px}body[data-screen="arena"] .d-pad{transform:none}body[data-screen="arena"] .face-buttons{transform:scale(.5);transform-origin:bottom right;margin:0}body[data-screen="arena"] .top-bezel{padding:5px}body[data-screen="arena"] .touch-bezel{margin-inline:5px;padding:5px}body[data-screen="arena"] .screen-bridge{height:23px}body[data-screen="arena"].arena-active .lcd{height:280px}}
@media(max-width:480px){.arena-command strong{font-size:17px;letter-spacing:-.3px}}