/* September review: shared neutral choices, viewport-safe feedback, practice. */
html body :is(.minimal-close,.arena-close-minimal){display:grid;place-items:center;width:48px;height:48px;padding:8px;border:0!important;border-image:none!important;background:transparent!important;box-shadow:none!important;outline:none!important;filter:none;cursor:pointer;flex:none}
html body :is(.minimal-close,.arena-close-minimal)::before,html body :is(.minimal-close,.arena-close-minimal)::after{content:none!important}
html body :is(.minimal-close,.arena-close-minimal)>img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated;pointer-events:none}
:root{--pixel-close-top:max(4px,env(safe-area-inset-top));--pixel-close-left:max(4px,env(safe-area-inset-left))}
/* One viewport anchor for every upper-left cross, including modal dialogs. */
html body :is(.minimal-close,.arena-close-minimal),html body #review-dialog #review-close{position:fixed;top:var(--pixel-close-top);left:var(--pixel-close-left);right:auto;bottom:auto;margin:0;transform:none;z-index:60}
html body .arena-page{grid-template-rows:minmax(0,1fr);padding:0;height:100dvh;min-height:0}
html body .arena-page>.page-head{display:none}
html body .arena-lobby{height:100%;max-height:100%;box-sizing:border-box;padding-block:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-bottom));overflow:auto}
.arena-training{width:min(620px,100%);max-height:100%;overflow:auto;display:grid;gap:14px;padding:22px;color:#584365}
.arena-training h2,.arena-training p{margin:0;text-align:center}
.arena-training h2{font-size:32px}.arena-training p{font-size:18px}
.arena-training fieldset{margin:0;padding:10px;border:2px solid #b8a6c9;border-radius:4px}
.arena-training legend{padding:0 8px}.arena-training-options,.arena-training-actions{display:flex;gap:10px;justify-content:center}
.arena-training-options button,.arena-training-actions button{flex:1;min-width:0}
html body .arena-training .arena-training-options .arena-button{display:grid;place-items:center;padding:6px 0;font:700 clamp(18px,5vw,24px)/1 PixelUI,monospace;white-space:nowrap}
.arena-training>fieldset:first-of-type{grid-column:1/-1}
.arena-training-options strong{font:inherit}
@media(max-width:500px){.arena-training{padding-inline:12px}.arena-training-options{gap:6px}.arena-training fieldset{padding-inline:6px}}
.arena-training-check{display:flex;align-items:center;gap:10px;min-height:38px;position:relative;cursor:pointer}
.arena-training-check input{appearance:auto;width:22px;height:22px;accent-color:#74b69e;flex:none}
.arena-training-time{display:flex;align-items:center;justify-content:space-between;gap:12px}
.arena-training-time select{font:inherit;color:inherit;background:#eee4f2;border:2px solid #b8a6c9;border-radius:4px;padding:6px}
.arena-training [aria-pressed=true]{border-image-source:url('/assets/interface-v2/pastel-ui/mint-normal.png')!important;color:#28694f}
.arena-training [aria-pressed=true]::after{content:none!important}
html body .arena-fighter .arena-previous-plate{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none}
html body .arena-fighter .arena-nameplate{will-change:translate}
html body .arena-fighter .arena-plates{position:relative;width:100%;display:flex;justify-content:center}
html body .arena-fighter .arena-previous-plate.hearts-only{left:50%;transform:translateX(-50%)}
html body .arena-result:has([data-arena-home]){display:flex;align-items:center;justify-content:center;gap:20px;min-width:0;box-sizing:border-box}
html body .arena-result:has([data-arena-home]) .arena-end-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,660px);max-width:100%;min-width:0;gap:8px;margin-inline:auto;box-sizing:border-box;align-self:center}
html body .arena-result:has([data-arena-home]) .arena-end-actions .arena-button{width:100%;max-width:none;min-width:0;margin:0;padding:5px 3px;white-space:normal;overflow-wrap:normal;font-size:clamp(17px,2.5vw,23px);line-height:1.15;box-sizing:border-box;text-align:center}
@media(orientation:portrait) and (max-width:599px){
 html body .arena-result:has([data-arena-home]){gap:12px}
 html body .arena-result:has([data-arena-home]) .arena-end-actions{grid-template-columns:minmax(0,1fr);width:min(100%,250px);gap:6px}
 html body .arena-result:has([data-arena-home]) .arena-end-actions .arena-button{min-height:42px;font-size:21px}
}
html body .arena-challenge .pixel-keyboard-page{height:auto!important;min-height:0!important;align-self:stretch;grid-row:1/6}
html body .arena-challenge .pixel-keyboard-keys{min-height:0}
@media(orientation:portrait){
 /* Anchor the battle to the page itself: no former header row, flex margin or
    safe-area reservation may push the terrain down. Only the overlaid cross
    keeps its safe-area inset. The answer panel keeps its own fixed height. */
 html body .arena-page:has(>.arena-battle){display:block}
 html body .arena-page>.arena-battle{position:absolute;inset:0;margin:0;height:100%;max-height:100%;padding-top:0}
 html body .arena-battle>.arena-stage{border-top:0;border-top-left-radius:0;border-top-right-radius:0}
}
@media(orientation:landscape) and (max-height:600px){
 .arena-training{grid-template-columns:1fr 1fr;gap:8px 16px;padding:12px 20px}
 .arena-training h2,.arena-training>p,.arena-training-actions{grid-column:1/-1}
 html body .arena-training h2{font-size:28px;line-height:1.1}
 html body .arena-training .arena-button{min-height:36px;padding:4px 8px;font-size:20px;line-height:1.1;white-space:nowrap}
 .arena-training-time{font-size:18px}.arena-training-time select{font-size:16px;padding:4px}
 .arena-training fieldset{padding:4px 10px}.arena-training-check{min-height:28px;font-size:18px}
 html body .arena-lobby{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
}
/* Portrait uses the full phone width. Landscape retains the central dialogue
   and its original width, with the keyboard extended to the screen bottom. */
@media(orientation:portrait) and (max-width:699px){
 /* Match the daily challenge keyboard; the remaining 115 px holds the
    instruction, timer and answer. This reservation is stable across turns. */
 html body .arena-battle:is([data-mode=HARD],[data-mode=IMPOSSIBLE]){--arena-keys:292px;--arena-controls:calc(var(--arena-keys) + 115px);padding:0;gap:4px}
 html body .arena-battle:is([data-mode=HARD],[data-mode=IMPOSSIBLE])>.arena-challenge{padding:6px 0 0;border-image:none;border:0;border-radius:0;background:#faf4ff;overflow:visible}
 html body .arena-battle:is([data-mode=HARD],[data-mode=IMPOSSIBLE]) .arena-interaction{width:100%;max-width:none;padding:0;gap:4px}
 html body .arena-battle:is([data-mode=HARD],[data-mode=IMPOSSIBLE]) .arena-interaction>:not([data-keyboard-slot]){margin-inline:10px}
 html body .arena-battle .arena-interaction>[data-keyboard-slot]{width:100%;max-width:none;margin-top:auto}
 html body .arena-challenge .pixel-keyboard{--key-size:36px;width:100%;max-width:none;padding:5px max(4px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));height:100%;border-radius:4px 4px 0 0}
 html body .arena-challenge .pixel-keyboard-row button{height:100%;min-height:0;font-size:22px}
 html body .arena-challenge .pixel-keyboard-page{font-size:22px}
 html body .arena-challenge .pixel-keyboard-actions button{height:auto;min-height:var(--key-size)}
}
@media(orientation:portrait) and (max-width:699px) and (max-height:740px){
 html body .arena-battle:is([data-mode=HARD],[data-mode=IMPOSSIBLE]){--arena-keys:266px}
 html body .arena-challenge .pixel-keyboard{--key-size:29px}
}
@media(orientation:landscape) and (max-height:600px){
 html[data-device-type=phone] body .arena-fighter.you>.arena-plates{order:2}
 html[data-device-type=phone] body .arena-battle:is([data-mode=HARD],[data-mode=IMPOSSIBLE])>.arena-challenge{bottom:0;height:calc(100% - 50px);padding:6px 0 0;border-bottom:0;border-radius:8px 8px 0 0}
 html[data-device-type=phone] body .arena-battle:is([data-mode=HARD],[data-mode=IMPOSSIBLE]) .arena-interaction{width:100%;max-width:none;gap:2px}
 html[data-device-type=phone] body .arena-battle:is([data-mode=HARD],[data-mode=IMPOSSIBLE]) .arena-interaction>:not([data-keyboard-slot]){margin-inline:8px}
 html[data-device-type=phone] body .arena-challenge .pixel-keyboard{display:flex;flex-direction:column;width:100%;max-width:none;height:100%;padding:2px 4px max(4px,env(safe-area-inset-bottom))}
 html[data-device-type=phone] body .arena-challenge .pixel-keyboard-keys{flex:1;display:flex;flex-direction:column;min-height:0}
 html[data-device-type=phone] body .arena-challenge .pixel-keyboard:is([data-mode=hiragana],[data-mode=katakana]) .pixel-keyboard-keys{display:grid;grid-template-rows:repeat(5,minmax(0,1fr));grid-template-columns:minmax(0,1fr) 52px;gap:2px}
 html[data-device-type=phone] body .arena-challenge .pixel-keyboard .pixel-keyboard-page{grid-column:2;grid-row:1/6;margin:0}
 html[data-device-type=phone] body .arena-challenge .pixel-keyboard-row{flex:1;min-height:0;margin-top:1px}
 html[data-device-type=phone] body .arena-challenge .pixel-keyboard-row button{height:100%;min-height:0;font-size:18px}
 html[data-device-type=phone] body .arena-challenge .pixel-keyboard-actions,html[data-device-type=phone] body .arena-challenge .pixel-keyboard-bar{flex:none;min-height:20px;margin-top:2px}
 html[data-device-type=phone] body .arena-challenge .pixel-keyboard-actions button,html[data-device-type=phone] body .arena-challenge .pixel-keyboard-bar button{height:22px;min-height:22px}
}
/* Unselected options retain the native edge without a coloured fill. */
/* The response fields have side margins; the full-width result must not inherit
   those margins or its centred contents overflow by 8–10 px on phones. */
html body .arena-battle .arena-challenge .arena-interaction>.arena-result.arena-feedback{margin-inline:0;width:100%;min-width:0}
html body #creator-view :is(.workshop-choices:where(:not(.hair-choices):not(.pupil-choices)),.workshop-parts,.color-channels,.personality-choices,.workshop-environments) button:not([aria-pressed=true]){background:transparent!important;border-image:url('/assets/interface-v2/creation-ui/choice-normal.png') 4 stretch!important;border-image-width:var(--native-frame-corner,8px)!important;--frame:url('/assets/interface-v2/creation-ui/choice-normal.png');color:#65536d;filter:none!important}
html body #creator-view :is(.workshop-choices,.workshop-parts,.color-channels,.personality-choices,.workshop-environments) button[aria-pressed=true],html body #panel button[aria-pressed=true]{border-image:url('/assets/interface-v2/pastel-ui/mint-normal.png') var(--native-frame-slice,4) fill / var(--native-frame-corner,8px) / 0 repeat!important;border-image-width:var(--native-frame-corner,8px)!important;background:none!important;color:#296d51!important;filter:none!important;box-shadow:none!important;image-rendering:pixelated;image-rendering:crisp-edges;}
/* Paint the hair/pupil frame separately from the platform button. In Safari
   these canvas buttons lost their border-image/fill. Keep native touch/haptic
   inputs intact; only the host button opts out of the platform appearance. */
html body #creator-view .workshop-choices:is(.hair-choices,.pupil-choices) button{
 --frame:url('/assets/interface-v2/creation-ui/choice-normal.png');
 -webkit-appearance:none;appearance:none;position:relative;isolation:isolate;
 border:4px solid transparent!important;border-image:none!important;
 background:none!important;box-shadow:none!important;filter:none!important;transition:none;
}
html body #creator-view .workshop-choices:is(.hair-choices,.pupil-choices) button::before{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 border:8px solid transparent;border-image:var(--frame) var(--native-frame-slice,4) fill / var(--native-frame-corner,8px) / 0 repeat;
 border-radius:0;
 image-rendering:pixelated;image-rendering:crisp-edges;}
html body #creator-view .workshop-choices:is(.hair-choices,.pupil-choices) button[aria-pressed=true]{--frame:url('/assets/interface-v2/pastel-ui/mint-normal.png')}
@media(hover:hover){
 html body #creator-view .workshop-choices:is(.hair-choices,.pupil-choices) button:hover:not([aria-pressed=true]){--frame:url('/assets/interface-v2/creation-ui/choice-hover.png')}
 html body #creator-view .workshop-choices:is(.hair-choices,.pupil-choices) button[aria-pressed=true]:hover{--frame:url('/assets/interface-v2/pastel-ui/mint-hover.png')}
}
html body #creator-view .workshop-choices:is(.hair-choices,.pupil-choices) button:active:not([aria-pressed=true]){--frame:url('/assets/interface-v2/creation-ui/choice-pressed.png')}
html body #creator-view .workshop-choices:is(.hair-choices,.pupil-choices) button[aria-pressed=true]:active{--frame:url('/assets/interface-v2/pastel-ui/mint-pressed.png')}
html body #panel button[aria-pressed=false]{border-image-source:url('/assets/interface-v2/creation-ui/choice-normal.png')!important;filter:none!important;box-shadow:none!important}
html body #panel [aria-pressed]::after{content:none!important}
html body #panel .owned-clothes button{display:grid;place-items:center;position:relative;padding:8px}
html body #panel .owned-clothes canvas{position:static;inset:auto;margin:0;transform:none;object-fit:contain;max-width:100%;max-height:100%;align-self:center;justify-self:center}
/* These cards use a grid now; the former landscape flex layout's height:0
   must not collapse a fully loaded preview inside that grid. */
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 html body #panel .owned-clothes canvas{height:auto}
}
/* Keep transient notices inside the visible viewport, including short phones. */
html body :is(#arena-toast,#discovery-notice,.toast,#toast,.local-status:not([hidden])){box-sizing:border-box;max-width:min(640px,calc(100vw - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right))));max-height:calc(100dvh - 24px);overflow:auto;overflow-wrap:anywhere}
html body :is(#arena-toast,.toast,#toast){position:fixed;left:50%;right:auto;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));top:auto;z-index:2100}
html body #discovery-notice{top:max(12px,env(safe-area-inset-top));bottom:auto;left:50%}
html body #dictionary-view .dex-credits{position:static;inset:auto;transform:none;margin:14px auto 20px;padding:0 12px;max-width:760px;line-height:1.4;text-align:center;font-size:16px;white-space:normal}
html body #dictionary-view .dex-credits a{display:inline;color:#65517b;white-space:normal}

/* Presses use the saved pressed frame, never the lighter hover frame.
   Selection stays on that frame through release; no second outline/check. */
.arena-button,.arena-team-card{--arena-pressed:url('/assets/interface-v2/pastel-ui/paper-pressed.png')}
.arena-button.mint,.arena-team-card:nth-child(3n+2){--arena-pressed:url('/assets/interface-v2/pastel-ui/mint-pressed.png')}
.arena-button.lavender,.arena-team-card:nth-child(3n+3){--arena-pressed:url('/assets/interface-v2/pastel-ui/lavender-pressed.png')}
.arena-button.peach{--arena-pressed:url('/assets/interface-v2/pastel-ui/peach-pressed.png')}
.arena-button.blue{--arena-pressed:url('/assets/interface-v2/pastel-ui/blue-pressed.png')}
.arena-button.cream{--arena-pressed:url('/assets/interface-v2/pastel-ui/gold-pressed.png')}
.arena-button.red,.arena-team-card:nth-child(3n+1){--arena-pressed:url('/assets/interface-v2/pastel-ui/pink-pressed.png')}
.arena-button.red{--arena-frame:url('/assets/interface-v2/pastel-ui/pink-normal.png');--arena-hover:url('/assets/interface-v2/pastel-ui/pink-hover.png')}
html body :is(.arena-button,.arena-team-card):is(:active,[aria-pressed=true],.selected):not(:disabled):not(.unavailable){border-image-source:var(--arena-pressed)!important;filter:none;box-shadow:none;translate:0 2px;transform:none}
html body :is(.arena-button,.arena-team-card):is([aria-pressed=true],.selected)::after{content:none!important}
html body .arena-button[aria-pressed=false]{transform:none;filter:none;box-shadow:none}

/* Daily challenge: the introduction owns the title; the active game uses its space. */
html body #review-dialog[data-state=intro]{display:none;grid-template-columns:1fr;grid-template-rows:1fr auto auto 1fr;gap:24px;padding:24px;align-content:center}
html body #review-dialog[data-state=intro][open]{display:grid}
html body #review-dialog[data-state=intro]>.dialog-top{display:flex;grid-column:1;grid-row:2;translate:none;justify-content:center;text-align:center}
html body #review-dialog[data-state=intro]>:not(.dialog-top):not(#review-intro):not(.main-navigation):not(.home-page-banner){display:none!important}
html body #review-intro{grid-column:1;grid-row:3;max-width:560px;justify-self:center;text-align:center;font:23px/1.3 PixelUI,sans-serif}
html body #review-intro[hidden]{display:none}
html body #review-intro p{margin:0 0 24px}
html body #review-intro .daily-intro-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
html body #review-intro button{font:23px/1.2 PixelUI,sans-serif;color:#684781;border:4px solid transparent;border-image:url('/assets/interface-v2/pastel-ui/lavender-normal.png') var(--native-frame-slice,4) fill / var(--native-frame-corner,8px) / 0 repeat;border-image-width:var(--native-frame-corner,8px);background:none;box-shadow:none;padding:12px 18px;image-rendering:pixelated;image-rendering:crisp-edges;}
html body #review-intro #review-begin{color:#2d775b;border-image-source:url('/assets/interface-v2/pastel-ui/mint-normal.png')}
html body #review-dialog:is([data-state=review],[data-state=loading],[data-state=reward])>.dialog-top{display:none}
html body #review-dialog:is([data-state=review],[data-state=loading]){grid-template-rows:0 54px minmax(72px,1fr) 36px 58px 42px 62px var(--daily-keys);padding-top:max(12px,env(safe-area-inset-top,0px))}
html body #review-dialog #review-progress{translate:none}
html body #review-dialog:is([data-state=review],[data-state=loading]) #review-prompt{translate:none}
@media(orientation:portrait) and (max-height:740px){html body #review-dialog:is([data-state=review],[data-state=loading]){grid-template-rows:0 42px minmax(48px,1fr) 28px 44px 32px 48px var(--daily-keys)}}
@media(orientation:landscape) and (max-height:600px){
 html body #review-dialog:is([data-state=review],[data-state=loading]){grid-template-rows:28px 44px 42px minmax(0,1fr) 30px 28px 38px;padding-top:8px}
 html body #review-dialog:is([data-state=review],[data-state=loading]) #review-progress{grid-row:1/3;align-self:center}
 html body #review-dialog[data-state=intro]{gap:14px;padding:16px}
 html body #review-intro p{margin-bottom:14px}
}