@font-face{font-family:PixelUI;src:url('/fonts/fusion-pixel/fusion-pixel-12px-proportional-ja.otf.woff2') format('woff2');font-display:swap}
.arena-page{font-family:PixelUI,monospace}html body .arena-page [hidden]{display:none!important}
.arena-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.arena-pote-comment{transition:opacity .2s}.arena-pote-comment.quiet{opacity:0}
.arena-page>.page-head{height:78px;min-height:78px;background:#f5c4b8}
.arena-page>.page-head h1{font:700 34px/1 PixelUI;color:white;-webkit-text-stroke:5px #29202f;paint-order:stroke fill;text-shadow:none}
.arena-lobby{display:flex;flex-direction:column;align-items:center;overflow:hidden;justify-content:center;padding:12px 16px}
.arena-page .arena-back{position:fixed;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));width:56px;height:56px;background: url('/assets/interface-v2/ui/nav-accueil-normal.png') center/56px no-repeat;border:0;z-index:20}
.arena-page .arena-back img{display:none}
@media(orientation:landscape) and (max-height:600px){.arena-page .arena-back{top:max(10px,env(safe-area-inset-top))}}
@media(min-width:1200px) and (min-height:700px){.arena-page .arena-back{top:max(24px,env(safe-area-inset-top));left:28px;width:80px;height:80px;background-size:80px}}
.arena-welcome{position:relative;max-height:100%;width:min(580px,100%);gap:12px;padding:20px;background:#f8f0ff;border-radius:8px}
.arena-ready-count{display:grid;grid-template-columns:1fr 64px;align-items:center;text-align:center;gap:6px}
.arena-ready-count h2{font:700 32px/1.1 PixelUI;color:#fff;-webkit-text-stroke:4px #2d2434;paint-order:stroke fill}
.arena-ready-count p{grid-column:1/-1;font-size:22px}
.arena-ready-count .arena-lobby-icon{grid-column:2;grid-row:1;width:56px;height:56px}
.arena-modes{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px}
.arena-button.red{border-image-source:url('/assets/interface-v2/pastel-ui/pink-normal.png');color:#8f203a}
.arena-welcome .arena-modes .arena-button{min-width:0;padding:5px;font-size:18px;opacity:1}
.arena-local-reset{margin:0}.arena-help{font-size:18px;max-height:120px;overflow:auto}
.arena-welcome .arena-button{min-height:50px;font-size:23px}
.arena-collection{position:absolute;inset:20px 16px;z-index:10;width:auto;background:#f8f0ff;border:4px solid #a18bac;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;padding:16px;box-shadow:0 6px 0 #6b53696b}
.arena-collection>header{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:12px}.arena-collection h3{margin:0}
.arena-roster{overflow:auto;overscroll-behavior:contain;min-height:0;gap:16px 8px}.arena-roster-item .ready{color:#276349}.arena-roster-item .resting{color:#992f48}
.arena-battle{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:40% minmax(0,1fr);gap:10px;width:100%;max-width:none;overflow:hidden;padding:8px 12px 12px}
.arena-battle>.arena-stage{position:relative;inset:auto;min-height:0;height:100%;width:100%;border-radius:6px}
.arena-battle>.arena-challenge{position:relative;inset:auto;width:100%;height:100%;min-height:0;max-height:none;padding:10px 12px;background:#faf4ff;border-radius:8px;overflow:hidden;display:flex;justify-content:center;align-items:stretch}
.arena-interaction{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:10px}
.arena-interaction>[data-keyboard-slot]{min-height:0}.arena-interaction>[data-keyboard-slot]:empty{display:none}
.arena-team-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.arena-team-card{min-height:136px;padding:4px}
.arena-team-card .arena-native-creature{width:100%;max-width:112px;height:auto;aspect-ratio:1}
.arena-timing{min-height:28px;flex:none}.arena-timebar{height:14px;border:2px solid #9c82ac;border-radius:5px;box-sizing:border-box}.arena-timebar span{transition:none}
.arena-timer{min-width:50px;font-variant-numeric:tabular-nums}
.arena-answers{flex:1;min-height:110px;max-height:220px;gap:10px}.arena-answers .arena-button{font-size:22px;min-height:52px}
.arena-question-head h2{white-space:normal!important;font-size:22px!important}
.arena-story{display:flex;align-items:center;justify-content:center;height:100%;font:700 28px/1.3 PixelUI;text-align:center}
.arena-ground-pad{position:absolute;left:0;bottom:0;width:100%;height:14%;border:3px solid #b3a3bf;border-radius:50%;background:#e2cda9;opacity:.65}
[data-arena-map=future] .arena-ground-pad{background:#b3d8e5;border-color:#87b8ce}
.arena-stage .arena-fighter{width:44%;max-width:44%;gap:4px}.arena-fighter.you{left:4%;bottom:3%;top:auto}.arena-fighter.opponent{right:4%;top:4%;bottom:auto}
.arena-battle .arena-fighter .arena-actor{width:min(32vw,150px);height:min(32vw,150px);max-width:none;max-height:none}
.arena-nameplate{padding:4px 8px;min-height:0;background:#fff9f4;border-radius:5px}.arena-nameplate strong{font-size:17px}.arena-hearts>img{width:18px;height:18px}
.arena-charge-symbol{position:absolute;width:36px;height:36px;object-fit:contain;left:50%;top:0;z-index:4}
.arena-sequential-spell{position:absolute;width:44px;height:44px;object-fit:contain;transform:translate(-50%,-50%);z-index:3;pointer-events:none;image-rendering:pixelated}
.arena-pote-comment{position:absolute;z-index:20;left:50%;top:72px;transform:translateX(-50%);width:min(320px,85%);background:#fffaf4;color:#1f1925;border:4px solid #a08aae;border-radius:8px;padding:10px 14px;font:700 22px/1.2 PixelUI;text-align:center;pointer-events:none}
.arena-challenge .pixel-keyboard{--key-size:32px;font-size:18px;padding:4px}.arena-challenge .pixel-keyboard-bar{margin:0}.arena-challenge .pixel-keyboard-row{gap:3px;margin-top:3px}
.arena-challenge .pixel-keyboard button{font-size:18px}
.arena-interaction:has(.pixel-keyboard:not([hidden])){gap:4px;justify-content:center}
.arena-interaction:has(.pixel-keyboard:not([hidden])) .arena-wait{display:none}
html body .arena-challenge .pixel-keyboard button{height:var(--key-size);min-height:var(--key-size);box-sizing:border-box;line-height:1;padding:0;font-size:18px}
html body .arena-challenge .pixel-keyboard-bar button{height:24px;min-height:24px;font-size:15px;padding:0 6px}
.arena-interaction:has(.pixel-keyboard:not([hidden])) .arena-answer-form input{height:36px;min-height:36px;padding:4px 8px}
.arena-interaction:has(.pixel-keyboard:not([hidden])) [data-arena-submit]{min-height:36px;padding:4px 10px}
@media(orientation:portrait) and (min-width:700px){.arena-battle{grid-template-rows:58% minmax(0,1fr);padding:8px 16px 16px}.arena-battle .arena-fighter .arena-actor{width:260px;height:260px}.arena-nameplate strong{font-size:25px}.arena-hearts>img{width:25px;height:25px}.arena-fighter.you{bottom:5%;left:8%}.arena-fighter.opponent{top:6%;right:8%}.arena-interaction{width:min(760px,100%);margin:auto}.arena-challenge .pixel-keyboard{--key-size:40px}}
@media(orientation:landscape){.arena-page:has(.arena-battle)>.page-head{position:absolute;inset:0 0 auto;z-index:5;background:none;pointer-events:none}.arena-page:has(.arena-battle)>.page-head>*{pointer-events:auto}.arena-battle{position:absolute;inset:0;display:block;padding:0;height:100%;width:100%}.arena-battle>.arena-stage{position:absolute;inset:0;border:0;width:100%;height:100%}.arena-battle>.arena-challenge{position:absolute;left:50%;right:auto;top:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(640px,58vw);height:40%;max-height:420px;z-index:5}.arena-battle .arena-fighter.you{left:17%;bottom:45%;transform:translateX(-50%)}.arena-battle .arena-fighter.opponent{right:17%;top:16%;transform:translateX(50%)}.arena-battle .arena-fighter .arena-actor{width:clamp(160px,27vh,300px);height:clamp(160px,27vh,300px)}.arena-nameplate strong{font-size:24px}.arena-pote-comment{top:76px}.arena-interaction{gap:8px}}
@media(orientation:landscape) and (max-height:600px){.arena-lobby{padding:8px 64px}.arena-welcome{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;padding:8px 16px}.arena-ready-count{grid-row:1/3}.arena-ready-count h2{font-size:28px}.arena-welcome .arena-button{min-height:40px;font-size:20px}.arena-help{max-height:50px}.arena-battle>.arena-challenge{width:52vw;height:calc(100% - 70px);bottom:8px;padding:6px}.arena-battle .arena-fighter.you{left:12%;bottom:12%;max-width:23%}.arena-battle .arena-fighter.opponent{right:12%;top:24%;max-width:23%}.arena-battle .arena-fighter .arena-actor{width:140px;height:140px}.arena-nameplate strong{font-size:15px}.arena-hearts>img{width:16px;height:16px}.arena-team-card{min-height:90px}.arena-interaction{gap:5px}.arena-question-head h2{font-size:18px!important}.arena-challenge .pixel-keyboard{--key-size:24px}.arena-story{font-size:23px}.arena-challenge .pixel-keyboard button{font-size:17px}.arena-pote-comment{top:4px;width:42%;font-size:18px}.arena-timebar{height:12px}.arena-timing{min-height:20px}}
@media(max-height:720px) and (orientation:portrait){.arena-page>.page-head{height:64px;min-height:64px}.arena-battle{grid-template-rows:35% minmax(0,1fr)}.arena-battle .arena-fighter .arena-actor{width:100px;height:100px}.arena-nameplate strong{font-size:14px}.arena-nameplate{padding:2px 5px}.arena-hearts>img{width:14px;height:14px}.arena-question-head h2{font-size:18px!important}.arena-challenge .pixel-keyboard{--key-size:25px}.arena-interaction{gap:6px}.arena-answers{min-height:100px}.arena-welcome{gap:6px;padding:10px}.arena-welcome .arena-button{min-height:40px}.arena-ready-count h2{font-size:27px}}
/* Combat chooses a real difficulty; practice presets only edit its options. */
.arena-mode-selection{text-align:center;align-self:center;width:min(780px,100%);box-sizing:border-box}
.arena-combat-modes{display:flex;justify-content:center;gap:12px;margin:24px 0 32px}
.arena-combat-modes .arena-button{position:relative;display:grid;place-items:center;flex:1;min-width:0;min-height:100px;padding:12px 0;overflow:visible}
.arena-combat-modes strong{font-size:clamp(20px,5.5vw,30px);font-weight:700;line-height:1;white-space:nowrap}
.arena-combat-modes .arena-mode-bonus{position:absolute;right:-4px;bottom:-19px;display:grid;place-items:center;padding:3px 6px;border:4px solid transparent;border-image:var(--arena-frame) var(--native-frame-slice,4) fill / var(--native-frame-corner,8px) / 0 repeat;border-image-width:var(--native-frame-corner,8px);color:inherit;font:700 clamp(14px,3.8vw,18px)/1.1 PixelUI,monospace;white-space:nowrap;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges;}
.arena-mode-selection .mint,.arena-training-options .mint{color:#28694f}
.arena-mode-selection .lavender,.arena-training-options .lavender{color:#684781}
.arena-mode-selection .red,.arena-training-options .red{color:#8f203a}
.arena-training fieldset{min-width:0}.arena-training-check{display:flex;align-items:center;gap:10px}
@media(max-width:500px){.arena-combat-modes{gap:7px}}
/* Response formats stay immediately under the timing control in every layout. */
html body .arena-training>.arena-training-time,html body .arena-training>.arena-training-time+fieldset{grid-column:1/-1}
html body .arena-training>.arena-training-time+fieldset{display:flex;flex-wrap:wrap;gap:10px 24px}

/* Names and timers keep full contrast. */
.arena-collection .arena-roster-item :is(img,canvas){transition:opacity .2s ease}
.arena-collection .arena-roster-item[data-resting="true"] :is(img,canvas){opacity:.58}