/* September comfort review: shared controls, no additional selection frames. */
html body :is(button,a,[role=button],summary,input,textarea,select):is(:focus,:focus-visible,:active){outline:none!important;outline-offset:0!important;-webkit-tap-highlight-color:transparent}
html body :is(button,a,[role=button])[aria-pressed=true]{box-shadow:none!important}
html body :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea):focus{border-color:#478e71!important;box-shadow:none!important}
html body :is(.pixel-button,.small-action,.workshop-navigation button,.workshop-choices button,.workshop-parts button,.color-channels button,.personality-choices button,.workshop-environments button):is(:focus,:active){border-color:transparent!important;box-shadow:none!important}

/* Flag choices use the very same blue native frame as the main language button. */
html body #language-options .language-option{border:0!important;border-image:none!important;background:url('/assets/interface-v2/review-retours/flag-normal.png') center/100% 100% no-repeat!important;width:56px;height:56px;padding:10px}
html body #language-options .language-option:hover{background-image:url('/assets/interface-v2/review-retours/flag-hover.png')!important}
html body #language-options .language-option:active{background-image:url('/assets/interface-v2/review-retours/flag-pressed.png')!important}
html body #language-options .language-option span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
html body #language-options .language-option img{width:32px;height:32px;object-fit:cover}
html body #settings-dialog .dialog-heading{grid-template-columns:var(--review-control,44px) minmax(0,1fr) var(--review-control,44px)}
html body #v2-console-heading{white-space:nowrap;font-size:clamp(21px,5.7vw,32px);grid-column:2;min-width:0}
/* An empty room bubble must never leak into the creator, even before JS positions it. */
html body #bubble:empty,
html body:has(#creator-view:not([hidden])) .room-speech-layer{display:none!important}

/* The home world is scaled; compensate so speech matches the room's viewport bubble. */
html body #home-screen #home-pixelpote-bubble{width:max-content;min-width:0;max-width:calc(min(340px,100vw - 32px) / var(--v2-world-scale,1));font:700 calc(24px / var(--v2-world-scale,1))/1.2 PixelUI,sans-serif;padding:calc(12px / var(--v2-world-scale,1)) calc(18px / var(--v2-world-scale,1));border-width:calc(4px / var(--v2-world-scale,1))}

/* Identical logical sprite scale across the home, learning and room docks. */
html body :is(#vocabulary-dialog,#discovery-detail) .screen-tabs{--v2-dock:84px;height:108px;gap:8px;overflow-x:auto;overflow-y:hidden;justify-content:safe center;padding-inline:8px;scrollbar-width:none}
html body :is(#vocabulary-dialog,#discovery-detail) .screen-tabs button{flex-shrink:0}
html body #home-view .collection-nav{--v2-dock:84px;gap:8px}
html body #vocabulary-dialog .study-shell{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
html body #discovery-detail .dex-device{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}

/* Use the readable Kana tab styling throughout exercise setup. */
html body #vocabulary-dialog :is(.setup-choices,.setup-directions,.fc-directions,.fc-scope,.fc-setup-options,.library-tabs) button{--frame:url('/assets/interface-v2/pastel-ui/lavender-normal.png');border:0;border-image:var(--frame) 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:#684781;font:500 22px/1.2 PixelUI,sans-serif;box-shadow:none!important;text-shadow:none;-webkit-text-stroke:0;image-rendering:pixelated;image-rendering:crisp-edges;}
html body #vocabulary-dialog :is(.setup-choices,.setup-directions,.fc-directions,.fc-scope,.fc-setup-options,.library-tabs) button[aria-pressed=true]{--frame:url('/assets/interface-v2/pastel-ui/mint-normal.png');color:#2c755b}
html body #vocabulary-dialog :is(.setup-choices,.setup-directions,.fc-directions,.fc-scope,.fc-setup-options,.library-tabs) button:hover{--frame:url('/assets/interface-v2/pastel-ui/lavender-hover.png')}
html body #vocabulary-dialog :is(.setup-choices,.setup-directions,.fc-directions,.fc-scope,.fc-setup-options,.library-tabs) button[aria-pressed=true]:hover{--frame:url('/assets/interface-v2/pastel-ui/mint-hover.png')}
html body #vocabulary-dialog :is(#active-exercise-title,#fc-setup-title){color:#fff0ff!important;-webkit-text-stroke:3px #665078;paint-order:stroke fill;font-family:PixelUI,sans-serif;line-height:1.2;text-align:center}
html body #vocabulary-dialog :is(.setup-choices,.setup-directions) button{display:flex;flex-direction:column;justify-content:center;align-items:center;color:#684781!important;font-weight:500!important}
html body #vocabulary-dialog :is(.setup-choices,.setup-directions) button[aria-pressed=true]{color:#2c755b!important}
html body #vocabulary-dialog :is(.setup-choices,.setup-directions) button small{margin:2px 0 0;color:inherit}
/* A full-width header remains in normal flow while a flashcard is open. */
html body #vocabulary-dialog[data-flashcard-active=true] .study-header{position:relative;inset:auto;width:100%;margin:0;flex-shrink:0}
html body #vocabulary-dialog[data-flashcard-active=true] .study-header h2{position:static;width:auto;height:auto;clip-path:none;overflow:visible;white-space:normal;margin:0}
html body #vocabulary-dialog[data-flashcard-active=true] .flashcard-topline{padding-right:0}
html body #fc-editor-save{text-align:center}
html body #vocabulary-dialog #flashcards-view:has(#fc-editor:not([hidden])){overflow:hidden;padding:8px 0 0}
html body #fc-editor{margin:0 auto}
html body #fc-editor .fc-editor-scroll{padding-inline:12px}
html body #fc-editor .fc-keyboard-slot{align-items:end}

/* Clipped hair now reaches the button boundary, with a shared head scale. */
html body .v2-creation-header{padding-inline:calc(var(--review-side,16px) + var(--v2-top,40px) + 12px);box-sizing:border-box}
html body .v2-creation-header h2{text-align:center}
html body #creator-view>.v2-creation-header{display:grid;grid-template-columns:minmax(0,1fr);place-items:center}
html body #creator-view>.v2-creation-header>div{width:100%;max-width:440px;margin-inline:auto;text-align:center}
html body #creator-view>.v2-creation-header h2{width:100%;text-align:center}
/* Name and count share a row. The keyboard sits above the usual navigation,
   so portrait keeps the same preview/camera space as the other full-body steps. */
html body .workshop-controls[data-step=name]{height:auto;padding:12px 12px 0;align-self:stretch}
html body .workshop-controls[data-step=name] #creator-options{flex:none;overflow:visible;padding:0 2px 6px}
html body .workshop-controls[data-step=name] #creation-step-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
html body .creation-name-row{display:block}
html body #creation-name-count{margin:0;text-align:right;font-size:17px;font-weight:400;line-height:1;flex:none}
html body .creation-name-row #creation-name{min-width:0;width:100%;height:52px;padding:8px 10px;font-size:24px;margin:0}
html body .workshop-controls[data-step=name] .workshop-navigation{flex:none;height:80px;padding:8px 0 max(12px,env(safe-area-inset-bottom,0px));margin:auto 0 0}
html body .workshop-controls[data-step=name]:has(#creator-name-keyboard .pixel-keyboard:not([hidden])) .workshop-navigation{margin-top:0}
html body .workshop-controls[data-step=name] .workshop-navigation button{height:100%;min-height:0;font-size:26px}
html body #creator-name-keyboard{flex:1;min-height:0;max-height:276px;width:calc(100% + 24px);margin:auto -12px 0}
html body #creator-name-keyboard .pixel-keyboard{height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding-bottom:6px}
html body #creator-name-keyboard .pixel-keyboard-keys{flex:1;min-height:0;display:flex;flex-direction:column}
html body #creator-name-keyboard .pixel-keyboard-row{flex:1;min-height:0}
html body #creator-name-keyboard .pixel-keyboard-row button{min-height:0}
html body #creator-name-keyboard :is(.pixel-keyboard-actions,.pixel-keyboard-bar){flex:none}
html body #creator-name-keyboard[hidden],html[data-input-mode=mouse] body #creator-name-keyboard{display:none}
html[data-input-mode=mouse] body #creator-name-keyboard[data-romaji-name=true]:not([hidden]){display:block;flex:1;min-height:230px}
html body #creator-name-keyboard .pixel-keyboard[data-labels=romaji][data-japanese=false] .pixel-keyboard-keys{display:grid;grid-template-columns:minmax(0,1fr) 48px;grid-template-rows:repeat(5,minmax(0,1fr))}
html body #creator-name-keyboard .pixel-keyboard[data-japanese=true] .pixel-keyboard-keys{display:grid}
html body #creator-name-keyboard .pixel-keyboard[data-labels=romaji] .pixel-keyboard-actions{height:40px;min-height:34px}
html body #creator-name-keyboard .pixel-keyboard[data-labels=romaji] button[data-key=layout]{font:500 14px/1.1 system-ui,sans-serif}
@media(orientation:landscape) and (max-height:600px){
 html body .workshop-controls[data-step=name]{padding-top:6px}
 html body .workshop-controls[data-step=name] #creation-step-title{padding-bottom:4px}
 html body .creation-name-row #creation-name{height:40px}
 html body .workshop-controls[data-step=name] .workshop-navigation{height:52px;padding-block:4px 8px}
 html body .workshop-controls[data-step=name] .workshop-navigation button{font-size:22px}
}
@media(orientation:portrait) and (max-height:740px){
 html body #creator-view[data-step=name] .workshop-layout{grid-template-rows:minmax(0,1fr) minmax(368px,1.28fr)}
 html body .workshop-controls[data-step=name]{padding-top:6px}
 html body .workshop-controls[data-step=name] #creation-step-title{font-size:21px;padding-bottom:0}
 html body .workshop-controls[data-step=name] #creator-options{padding-bottom:2px}
 html body .creation-name-row #creation-name{height:36px;font-size:23px;padding:4px 8px}
 html body .workshop-controls[data-step=name] .workshop-navigation{height:48px;padding-block:4px max(8px,env(safe-area-inset-bottom,0px))}
 html body .workshop-controls[data-step=name] .workshop-navigation button{font-size:22px}
 html body #creator-name-keyboard .pixel-keyboard{--key-size:28px;font-size:16px;line-height:1;padding-top:3px;padding-bottom:3px}
 html body #creator-name-keyboard .pixel-keyboard-row button{padding-block:1px}
 html body #creator-name-keyboard .pixel-keyboard-actions button{min-height:28px;padding-block:1px;font-size:16px;line-height:1}
 html body #creator-name-keyboard .pixel-keyboard-actions button[data-key=backspace]{font-size:20px}
 html body #creator-name-keyboard .pixel-keyboard-bar{min-height:24px;margin-top:3px}
 html body #creator-name-keyboard .pixel-keyboard-bar button{min-height:24px;font-size:14px;padding-block:1px}
}
html body #creator-view .hair-choices button{position:relative;padding:0;overflow:hidden;isolation:isolate;min-height:120px}
html body #creator-view .hair-choices canvas{position:absolute;left:50%;top:0;transform:translateX(-50%);width:176px;height:176px;max-width:none;max-height:none;object-fit:contain;pointer-events:none}
html body #creator-view :is(.workshop-choices,.workshop-parts,.color-channels,.personality-choices,.workshop-environments) button{border-color:transparent!important;box-shadow:none!important;--frame:url('/assets/interface-v2/pastel-ui/lavender-normal.png');border-image-source:var(--frame)!important;transition:none}
html body #creator-view :is(.workshop-choices,.workshop-parts,.color-channels,.personality-choices,.workshop-environments) button[aria-pressed=true]{--frame:url('/assets/interface-v2/pastel-ui/mint-normal.png');color:#2c755b;background:none}
html body #creator-view :is(.workshop-choices,.workshop-parts,.color-channels,.personality-choices,.workshop-environments) button:hover:not([aria-pressed=true]){--frame:url('/assets/interface-v2/pastel-ui/lavender-hover.png')}
html body #creator-view :is(.workshop-choices,.workshop-parts,.color-channels,.personality-choices,.workshop-environments) button[aria-pressed=true]:hover{--frame:url('/assets/interface-v2/pastel-ui/mint-hover.png')}
html body #creator-view :is(.workshop-choices,.workshop-parts,.color-channels,.personality-choices,.workshop-environments) button::after{content:none!important}
html body #creator-view .workshop-choices button[aria-pressed=true] span{background:none;color:#2c755b}

/* Consistent daily action frames without changing their allocated hit areas. */
html body :is(#review-answer-submit,#review-next,.daily-dex-link,#creator-next,#creator-back){border:4px solid transparent!important;box-sizing:border-box;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:#2d775b!important;box-shadow:none!important;font-family:PixelUI,sans-serif;text-shadow:none;-webkit-text-stroke:0;text-align:center;image-rendering:pixelated;image-rendering:crisp-edges;}
html body #creator-back{border-image-source:url('/assets/interface-v2/pastel-ui/lavender-normal.png')!important;color:#684781!important}
html body :is(#review-answer-submit,#review-next,.daily-dex-link,#creator-next,#creator-back):hover{filter:brightness(1.04)}
html body #review-dialog{--daily-keys:292px;grid-template-rows:44px 50px minmax(72px,1fr) 36px 58px 42px 62px var(--daily-keys);gap:5px;padding-bottom:0}
html body #review-dialog #review-progress .daily-star{font-size:38px}
html body #review-dialog #review-prompt{align-self:center;translate:0 5px}
html body #review-dialog #review-answer-form{align-self:end}
html body #review-dialog .review-companion{align-self:end;max-width:none;width:100%;padding:0 2px 5px;box-sizing:border-box}
html body #review-dialog #review-message{max-width:100%;width:auto;padding:9px 17px;line-height:1.2;max-height:60px;box-sizing:border-box}
html body #review-dialog .daily-keyboard-slot{height:var(--daily-keys);align-self:end;display:flex;align-items:end}
html body #review-dialog[data-answered=true] #review-feedback{grid-row:4/6;align-self:center;min-height:54px;font-size:30px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}
html body #review-dialog[data-answered=true] #review-instruction{visibility:hidden}
html body #review-dialog[data-state=reward] #review-context{grid-row:3;align-self:start;margin:12px 0 0;padding:0 8px;animation:daily-encounter-jolt .5s ease-out}
html body #review-dialog[data-state=reward] .daily-reveal{grid-row:3/9;padding-top:68px;max-height:100%;box-sizing:border-box}
html body #review-dialog[data-state=reward][data-revealed=true] #review-context{visibility:hidden}
html body #review-dialog .daily-dex-link{grid-column:1;grid-row:7;align-self:center;justify-self:center;padding:12px 20px;text-decoration:none;font-size:22px;z-index:3}
html body #review-dialog .daily-dex-link[hidden]{display:none}
html body #review-dialog[data-state=complete]{grid-template-rows:44px 50px minmax(48px,1fr) 30px 60px minmax(24px,1fr) 62px 62px;padding-bottom:16px}
html body #review-dialog[data-state=complete] #review-feedback{grid-row:4;align-self:end;margin:0}
html body #review-dialog[data-state=complete] #review-prompt{grid-row:5;align-self:center;margin:0}
@keyframes daily-encounter-jolt{0%,100%{transform:translate(0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px)}80%{transform:translate(1px)}}

/* Battle rules stay unchanged. The heading is centred independently of Home. */
html body #arena-app .page-head{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;padding-inline:16px}
html body #arena-app .page-head h1{grid-column:2;text-align:center;justify-self:center;margin:0;max-width:100%}
html body .arena-modes [data-arena-mode]{font-family:PixelUI,sans-serif;white-space:nowrap}

@media(orientation:portrait) and (max-width:699px){
 html body :is(.v2-home-dock,#home-view .collection-nav,#vocabulary-dialog .screen-tabs,#discovery-detail .screen-tabs)[data-portrait-fit]{--v2-dock:var(--portrait-dock-size);gap:var(--portrait-dock-gap);padding-inline:0;justify-content:center;box-sizing:border-box;overflow:visible}
 html body #review-dialog #review-feedback{width:calc(100% + 24px);max-width:none;border-radius:0}
 html body #review-dialog .daily-keyboard-slot{width:calc(100% + 24px);margin-inline:-12px}
 html body #vocabulary-dialog #flashcards-view:has(#fc-editor:not([hidden])){padding:8px 0 0}
 html body #fc-editor{max-width:none;gap:6px}
 html body #fc-editor .fc-editor-actions{padding-inline:8px}
 html body #fc-editor .fc-keyboard-slot{width:100%;margin:0}
}
@media(min-width:700px) and (min-height:601px){
 html body :is(#vocabulary-dialog,#discovery-detail) .screen-tabs{--v2-dock:112px;height:140px;gap:24px}
 html body #home-view .collection-nav{--v2-dock:112px;gap:24px}
 html body #vocabulary-dialog .study-shell,html body #discovery-detail .dex-device{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}
@media(orientation:portrait) and (max-height:740px){
 html body #review-dialog{--daily-keys:266px;grid-template-rows:32px 38px minmax(48px,1fr) 28px 44px 32px 48px var(--daily-keys);gap:3px}
 html body #review-dialog #review-progress .daily-star{font-size:32px}
 html body #review-dialog #review-message{font-size:16px;max-height:48px;padding:5px 12px}
}
@media(orientation:landscape) and (max-height:600px){
 html body #fc-editor .fc-keyboard-slot{align-items:end}
 html body :is(#vocabulary-dialog,#discovery-detail) .screen-tabs{--v2-dock:56px;height:68px;gap:12px}
 html body #home-view .collection-nav{--v2-dock:56px;gap:12px}
 html body #vocabulary-dialog .study-shell,html body #discovery-detail .dex-device{padding-bottom:68px}
 html body #review-dialog{grid-template-rows:28px 40px 42px minmax(0,1fr) 30px 28px 38px;gap:3px 12px}
 html body #review-dialog .daily-keyboard-slot{height:100%}
 html body #review-dialog #review-message{font-size:16px;max-height:40px;padding:5px 12px}
 html body #review-dialog[data-answered=true] #review-feedback{grid-column:1;grid-row:5;min-height:30px;font-size:23px}
 html body #review-dialog[data-state=reward] #review-context{grid-column:1;grid-row:3/6;align-self:center;margin:0}
 html body #review-dialog[data-state=reward] .daily-reveal{grid-column:2;grid-row:1/8;padding-top:0}
 html body #review-dialog .daily-dex-link{grid-column:2;grid-row:4/6;align-self:center;font-size:20px}
 html body #review-dialog[data-state=complete]{grid-template-rows:28px 40px minmax(20px,1fr) 28px 46px minmax(0,1fr) 38px;padding-bottom:8px}
 html body #review-dialog[data-state=complete] #review-feedback{grid-column:1;grid-row:4}
 html body #review-dialog[data-state=complete] #review-prompt{grid-column:1;grid-row:5}
 html body #review-dialog[data-state=complete] #review-next{grid-column:2;grid-row:7}
}
/* Phone landscape: reserve the upper-left close area without moving the
   answer/keyboard column or the lower feedback and action tracks. */
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 html body #review-dialog{--daily-landscape-drop:clamp(32px,10dvh,44px)}
 html body #review-dialog .dialog-top{translate:0 var(--daily-landscape-drop)}
 html body #review-dialog #review-progress{translate:0 calc(var(--daily-landscape-drop) + 14px)}
 html body #review-dialog:is([data-state=loading],[data-state=review]) #review-prompt{translate:0 calc(var(--daily-landscape-drop) - 13px)}
 html body #review-dialog .daily-dev-cards{top:10px;left:calc(var(--pixel-close-left,4px) + 56px)}
}
@media(orientation:landscape) and (max-height:380px) and (max-width:1100px){
 html body #review-dialog:is([data-state=loading],[data-state=review]) #review-prompt{font-size:112px}
}
@media(prefers-reduced-motion:reduce){html body #review-dialog[data-state=reward] #review-context{animation:none}}
html body .language-option input:focus-visible + span{outline:none!important;box-shadow:none!important}

/* 23 September: common labels, restrained frames and fixed control sizes. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html body :is(#quiz-heading,#settings-heading,.arena-header h1){font:700 clamp(30px,5.3vw,44px)/1.1 PixelUI,monospace!important;letter-spacing:.3px;color:#fff!important;-webkit-text-stroke:2px #403346!important;paint-order:stroke fill;text-shadow:none!important}
html body #creator-view .workshop-controls{border-image-source:url('/assets/interface-v2/pastel-ui/paper-normal.png')}
html body #creator-view :is(.workshop-choices,.workshop-parts,.color-channels,.personality-choices,.workshop-environments) button:not([aria-pressed=true]){--frame:url('/assets/interface-v2/creation-ui/choice-normal.png');border-image-slice:var(--native-frame-slice,4) fill;border-image-width:var(--native-frame-corner,8px);background:none;image-rendering:pixelated;image-rendering:crisp-edges;}
html body #creator-view :is(.workshop-choices,.workshop-parts,.color-channels,.personality-choices,.workshop-environments) button:hover:not([aria-pressed=true]){--frame:url('/assets/interface-v2/creation-ui/choice-hover.png')}
html body #creator-view .hair-choices button{border:4px solid transparent!important;border-image-width:var(--native-frame-corner,8px)!important}
html body .color-code .color-hex{font:20px/1.2 PixelUI,monospace;min-height:32px;padding:4px 12px;color:#554d62;border:2px solid #b4a6ba;background:#eeebeb}
/* One stationary color card; only the shared keyboard enters from below. */
html body #pixel-hex-editor.pixel-hex-editor{position:fixed;inset:0;margin:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;box-sizing:border-box;padding:0!important;border:0;border-image:none;border-radius:0;background:transparent;color:#4a3b59;font:20px/1.3 PixelUI,monospace;overflow:hidden;transform:none;translate:none}
html body #pixel-hex-editor[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
html body #pixel-hex-editor:not([open]){display:none}
#pixel-hex-editor::backdrop{background:#30253c80}
#pixel-hex-editor .hex-layout{display:grid;place-items:center;min-height:0;overflow:auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))}
#pixel-hex-editor .hex-panel{box-sizing:border-box;width:min(520px,100%);padding:18px 14px;border:8px solid transparent;border-image:url('/assets/interface-v2/pastel-ui/paper-normal.png') var(--native-frame-slice,4) fill / var(--native-frame-corner,8px) / 0 repeat;color:#4a3b59;image-rendering:pixelated;image-rendering:crisp-edges;}
#pixel-hex-editor header{display:flex;justify-content:space-between;align-items:center;gap:12px}
#pixel-hex-editor h2{font-size:26px;margin:0}
#pixel-hex-editor .hex-panel button{-webkit-appearance:none;appearance:none;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);padding:8px;min-height:44px;color:#694d82;font:20px/1.2 PixelUI;background:none;image-rendering:pixelated;image-rendering:crisp-edges;}
#pixel-hex-editor .hex-panel button[hidden]{display:none}
#pixel-hex-editor .hex-options{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#pixel-hex-editor .hex-value{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0;font:700 28px/1.3 system-ui,sans-serif}
#pixel-hex-editor .hex-value i{flex:none;width:30px;height:30px;border:2px solid #aa97b5}
#pixel-hex-editor .hex-value input{width:7ch;min-width:0;padding:5px 4px;font:inherit;letter-spacing:1px;text-transform:uppercase;color:#4a3b59;border:2px solid #aa97b5;background:#fff9ff;border-radius:0}
#pixel-hex-editor .hex-value input[readonly]{border-color:transparent;background:transparent;cursor:default}
#pixel-hex-editor [data-hex-apply]{border-image-source:url('/assets/interface-v2/pastel-ui/mint-normal.png')!important;color:#306951!important}
#pixel-hex-editor [role=status]{margin:10px 0 0;font-size:18px;text-align:center}
#pixel-hex-editor [role=status]:empty{display:none}
#pixel-hex-editor .hex-keyboard-slot{height:0;min-height:0;width:min(760px,100%);justify-self:center;overflow:hidden}
#pixel-hex-editor.has-pixel-keyboard .hex-keyboard-slot{height:min(280px,42dvh);animation:hex-keyboard-enter 180ms ease-out}
@keyframes hex-keyboard-enter{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(orientation:landscape) and (max-height:600px){#pixel-hex-editor.has-pixel-keyboard .hex-keyboard-slot{height:150px}#pixel-hex-editor .hex-layout{padding:6px 12px}#pixel-hex-editor .hex-panel{padding:6px 12px}#pixel-hex-editor .hex-value{margin:4px 0}#pixel-hex-editor .hex-panel button{min-height:38px;padding:5px 8px}#pixel-hex-editor header{gap:8px}#pixel-hex-editor h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){#pixel-hex-editor .hex-keyboard-slot{animation:none!important}}
@media(orientation:portrait) and (max-width:599px){
 html body #creator-view[data-step=colors] .workshop-layout{grid-template-rows:34% 66%}
 html body #creator-view[data-step=colors] #creator-options{display:flex;flex-direction:column;overflow:hidden;min-height:0;gap:4px}
 html body #creator-view[data-step=colors] .pixel-color-picker{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px}
 html body #creator-view[data-step=colors] .color-sv{height:auto;min-height:45px;flex:1}
 html body #creator-view[data-step=colors] :is(.hue-label,.color-code){flex:none;margin:0}
 html body #creator-view[data-step=colors] :is(.color-parts,.color-channels){margin-bottom:0;flex:none}
 html body #creator-view[data-step=colors] .random-colors{flex:none;margin:0;min-height:32px}
}
html body #auth-dialog{overflow:hidden;backface-visibility:hidden;isolation:isolate}
html body #auth-dialog[aria-busy=true]::after{content:'Chargement…';position:absolute;inset:70px 12px auto;text-align:center;font:22px PixelUI;color:#78648e}
html body #auth-frame{display:block;max-width:100%;border:0}
html body #workspace #guest-trial-status{display:block;z-index:22;height:auto!important;min-height:16px;max-width:100%;font:12px/1.25 PixelUI,sans-serif;overflow:visible;white-space:normal}
html body #workspace #guest-trial-status[hidden]{display:none}
html body #mobile-toolbar #choose-rom{min-height:40px!important;height:40px!important;grid-column:auto!important;width:auto!important;padding:4px!important;flex:initial!important}
html body #mobile-toolbar #choose-rom .v2-command-art{width:28px;height:28px}
html body #vocabulary-dialog :is(#question-instruction,#fc-question-instruction){color:#463354!important;font:700 23px/1.25 PixelUI,sans-serif!important;-webkit-text-stroke:0!important;text-shadow:none!important}
html body #vocabulary-dialog .target-word{color:#245e98!important;background:#deedff;border-radius:3px;text-shadow:none;-webkit-text-stroke:0}
html body .dex-entry-status,html body .dex-creature-card .dex-entry-status{font:700 14px/1.2 PixelUI,sans-serif;letter-spacing:0}
.dex-new-badge{position:absolute;bottom:4px;right:5px;padding:2px 4px;font:13px/1 PixelUI,sans-serif;color:#38654d;background:#d6efdb;border:1px solid #86ac92;pointer-events:none}
html body #discovery-notice{font:700 clamp(20px,3vw,36px)/1.2 PixelUI,sans-serif;max-width:min(600px,calc(100vw - 24px));padding:12px 20px;text-align:center;z-index:50;transform:translateX(-50%)}
html body #discovery-notice.is-arriving{animation:discovery-arrive 6.4s both;transform-origin:center}
@keyframes discovery-arrive{0%{opacity:0;transform:translateX(-50%) scale(.5)}5%{opacity:1;transform:translateX(calc(-50% - 2px)) scale(1.06)}7%{transform:translateX(calc(-50% + 2px)) scale(1.02)}10%,85%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1)}}
html body #review-next{margin-bottom:12px!important;transform:translateY(-4px)}
html body #review-correction{white-space:pre-line}
html body .arena-stage>.arena-xp-gain .home-status{border:2px solid #a792b6;border-image:none!important;border-radius:4px;background:#efe6f6;padding:6px 8px}
html body .arena-rest-team{min-height:110px;align-items:start;flex:none;padding-bottom:4px}
html body .arena-rest-team .arena-roster-item{min-width:0;overflow:visible;display:flex;flex-direction:column;gap:3px}
html body .arena-rest-team .study-text{font:13px/1.2 system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere;min-height:2.4em;text-align:center}
html body .arena-rest-team small{font:17px/1.2 PixelUI;flex:none;white-space:nowrap}
@media(orientation:portrait) and (max-width:599px){html body .arena-battle[data-result-ready=true]>.arena-challenge{min-height:260px;height:260px;padding:8px 10px}html body .arena-result{overflow:auto}html body .arena-rest-team :is(canvas,img){height:58px!important;width:58px!important;flex:none;object-fit:contain}html body .arena-result>h2{font-size:28px}html body .arena-end-actions .arena-button{min-height:36px}}
@media(prefers-reduced-motion:reduce){html body #discovery-notice.is-arriving{animation:none}}

html body #workspace #guest-trial-status .quota-plan,html body #workspace #guest-trial-status .quota-balance{white-space:nowrap}
@media(orientation:landscape) and (max-height:600px){html body #workspace #guest-trial-status{font-size:0;line-height:0}html body #workspace #guest-trial-status span{display:block;font:11px/1.15 PixelUI,sans-serif}}

html body #workspace #guest-trial-status{margin:0;text-align:center}
@media(orientation:portrait) and (max-width:599px){html body #workspace #guest-trial-status{font-size:0;line-height:0}html body #workspace #guest-trial-status span{display:block;font:11px/1.2 PixelUI,sans-serif}}

/* Section titles: white lettering with the same reinforced violet outline. */
html body :is(#vocabulary-dialog,#settings-dialog,#v2-console-picker,#creator-view,#review-dialog,#arena-app,.v2-account-header) :is(#study-section-title,#quiz-heading,#settings-heading,#v2-console-heading,#active-exercise-title,#fc-setup-title,#review-heading,#account-heading,#payment-heading,.v2-creation-header h2,.page-head h1){color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:4px #785197!important;paint-order:stroke fill;text-shadow:none!important}