/* Hand-painted UI surfaces. Images contain no controls, text, or item identities. */
:root{--art-paper:url('assets/ui/art-r5/paper-surface.webp');--art-card:url('assets/ui/art-r5/card-paper.webp');--art-gold:url('assets/ui/art-r5/button-gold.webp');--art-header:url('assets/ui/art-r5/header-jade.webp');--art-panel:url('assets/battle/ui-panel.webp')}
/* The menu shares the same Q-version environment language as the playable maps. */
#home.home{background:#f6ebcf url('assets/ui/art-r5/home-manor-chibi-v2.webp') center/cover no-repeat;padding-left:max(6vw,30px);padding-right:max(6vw,30px)}
#home .home-copy{background:linear-gradient(90deg,#fff8eae8,#fff8eacb 73%,#fff8ea00);border-radius:22px;padding:18px 16px;margin-left:-16px}
#home .hero-art img{mix-blend-mode:multiply;filter:drop-shadow(0 9px 7px #715e2620)}
#home .hero-sticker,#home .hero-bubble,#home .best{background-image:var(--art-paper);background-size:230px;color:#65552f;box-shadow:0 3px 5px #6a603316}
#home h1{text-shadow:0 3px #fff9e4,2px 4px #59664c25}
#sitebar{background:linear-gradient(180deg,#fff8e7ec,#fff8e7a8);border-bottom:1px solid #bdb98d88;backdrop-filter:blur(4px)}
#home .home-bottom>span{border:1px solid #ac9569;box-shadow:0 3px 0 #9e815f30,inset 0 0 0 3px #fff6ddb3;padding-left:14px;min-height:66px}
#home .home-bottom>span:nth-of-type(1){background-image:linear-gradient(90deg,#fff5ddf5 15%,#fff7ddc9 62%,#fff9e966),url('assets/battle/map-lake.webp')}
#home .home-bottom>span:nth-of-type(2){background-image:linear-gradient(90deg,#fff5ddf5 15%,#fff7ddc9 62%,#fff9e966),url('assets/battle/map-bamboo.webp')}
#home .home-bottom>span:nth-of-type(3){background-image:linear-gradient(90deg,#fff5ddf5 15%,#fff7ddc9 62%,#fff9e966),url('assets/battle/map-manor.webp')}
#home>footer{color:#555d44;text-shadow:0 1px 2px #fffbed,0 0 5px #fff8e7;background:#fff8e7af;border-radius:9px;padding:4px 10px;width:fit-content;justify-self:center}
/* Outer panel is the project's existing illustrated frame, stretched in nine slices. */
#dialog.game-screen,#characterSelect{border:12px solid transparent;border-image:var(--art-panel) 210 fill / 25px / 0 stretch;background:transparent!important;border-radius:22px;box-shadow:0 18px 65px #172f266b;height:min(880px,96dvh);max-height:96dvh;overflow:hidden}
#dialog.game-screen .screen-header,#characterSelect .cs-header{background:none!important;border:0 solid transparent;border-image:var(--art-header) 24 230 24 60 fill / 10px 88px 10px 23px / 0 stretch;border-radius:13px;padding:12px 24px;min-height:76px;margin:3px 4px 0;gap:14px}
#dialog .screen-header .screen-back,#characterSelect .cs-close{margin-right:42px;background:#244e3cda;border:1px solid #ddcb8eaa;box-shadow:inset 0 0 0 2px #e8d79315;border-radius:8px;color:#fff5d3}
#dialog .screen-status{margin-right:44px;color:#f3e6be}
#dialog .screen-header h2,#characterSelect .cs-header h2{color:#fff5d6;text-shadow:0 2px 2px #1a3024a8;letter-spacing:1px}
#dialog .screen-path,#characterSelect .cs-eyebrow{color:#e1d5a8}
#dialog .screen-emblem,#characterSelect .cs-header-art{border:1px solid #bda461;background:#fff0c6 var(--art-paper);border-radius:11px;box-shadow:0 2px 2px #183d2c4d,inset 0 0 0 2px #fff4d8}
#dialog.game-screen .screen-body{background:transparent;padding:16px 22px;scrollbar-color:#b59758 #f1e6c7}
#dialog .screen-steps{margin:0 4px;padding:3px 18px;background:#e7e8cadb;border:0;border-bottom:1px solid #c6bd93}
#dialog .screen-steps .current{color:#44664a;border-color:#799262}
#dialog .screen-footer,#characterSelect .cs-footer{background:#f9f1d7 var(--art-paper);background-size:308px;border-top:1px solid #c7af78;box-shadow:0 -3px 12px #9784520d;padding:10px 20px}
#dialog .screen-tabs.gear-tabs{background:#e9e9cde0;border-bottom:1px solid #c5bd93;margin:0 4px;padding:7px 18px}
#characterSelect .cs-scroll{background:transparent;padding:16px 24px 12px}
.overlay{background:#223c32a8;backdrop-filter:blur(7px)}
/* Native buttons retain their labels, focus, disabled state and event handlers. */
#home .home-actions>.primary,#dialog.game-screen .primary,#characterSelect .cs-confirm{border:3px solid transparent;border-image:var(--art-gold) 84 fill / 20px / 0 stretch;background:transparent!important;border-radius:8px;box-shadow:0 3px 3px #77623b24!important;color:#644a24!important;text-shadow:0 1px #fff3c8;font-weight:800;transition:filter .15s,transform .15s}
#home .home-actions>.primary:before,#dialog.game-screen .primary:before{display:none}
#home .home-actions>.primary:hover:not(:disabled),#dialog.game-screen .primary:hover:not(:disabled),#characterSelect .cs-confirm:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
#home .home-actions>.primary:active:not(:disabled),#dialog.game-screen .primary:active:not(:disabled),#characterSelect .cs-confirm:active:not(:disabled){filter:brightness(.97);transform:translateY(1px)}
#dialog.game-screen .primary:disabled{opacity:.55;filter:saturate(.5);transform:none;cursor:not-allowed}
#home .home-actions>.secondary,#home #homeGallery,#dialog.game-screen .secondary,#dialog .presets button,#dialog .codex-tabs button,#dialog .gear-tabs button{border:2px solid transparent;border-image:var(--art-card) 96 fill / 12px / 0 stretch;border-radius:8px;background:transparent;box-shadow:0 2px 3px #85754920;color:#596043;transition:filter .15s,transform .15s}
#home .home-actions>.secondary:hover,#home #homeGallery:hover,#dialog .secondary:hover:not(:disabled),#dialog .presets button:hover,#dialog .codex-tabs button:hover,#dialog .gear-tabs button:hover{filter:brightness(1.035);transform:translateY(-1px)}
#dialog .screen-tabs button[aria-pressed=true],#dialog .codex-tabs button[aria-pressed=true]{outline:2px solid #557d53;outline-offset:-3px;color:#315238;background:#e7edd6}
/* Card paint is sliced, so corner ornaments do not stretch with descriptions. */
#dialog :is(.loadout-card,.choice,.gear-choice,.equipment-card,.gear-services>article,.help-grid>div,.codex-list>article,.boss-guide>article){border:2px solid transparent;border-image:var(--art-card) 96 fill / 18px / 0 stretch;background:transparent!important;box-shadow:0 3px 3px #8e7a4620;border-radius:10px}
#dialog .loadout-card.picked,#dialog .choice.is-selected,#dialog .gear-choice.is-selected{outline:2px solid #557c52;outline-offset:-4px;box-shadow:0 3px 5px #556d442d!important}
#dialog .loadout-card .pick-check,#dialog .choice[aria-pressed=true]:after{background:#587b4e;color:#fff4c9;box-shadow:0 1px 0 #fff2cf;border:1px solid #e1d4a2}
#dialog :is(.loadout-card,.choice,.gear-choice):hover:not(:disabled){filter:brightness(1.015)}
#dialog .choice .category{background:#e9e5cce0;color:#776644;border:1px solid #cbbd94}
#dialog :is(.character-pick,.run-settings,.gear-note,.gem-activation,.upgrade-detail,.insight-panel,.gear-empty,.camp-summary,.journey-intro,.forge-hero,.gear-result,.rank-submit){background-color:#f2ebd0;background-image:var(--art-paper);background-size:308px;border-color:#c8ba8e;border-radius:11px}
#dialog .camp-summary,#dialog .journey-intro{box-shadow:inset 0 0 0 3px #fff7e680;background-color:#edf0d8;background-blend-mode:multiply}
#dialog .forge-hero{background-color:#f5e7ba;background-blend-mode:multiply;box-shadow:inset 0 0 0 3px #fff5dd}
#dialog .gear-materials>span{background:#fff6df var(--art-paper);border:1px solid #beab79;box-shadow:0 2px 0 #b9a5751c}
#dialog .gear-empty{border-style:dashed;background-color:#ecebd3;background-blend-mode:multiply}
#dialog .result-stats>div{border:2px solid transparent;border-image:var(--art-card) 96 fill / 16px / 0 stretch;background:none;box-shadow:0 3px 0 #a18b562a}
#dialog .result-stats>div:first-child{border-image-source:var(--art-gold);border-image-slice:84 fill;border-image-width:19px}
#dialog .result-buffs>span{background:#fcf5df var(--art-paper);border-color:#c7b180}
#dialog .route-options button{display:grid;grid-template-columns:62px minmax(0,1fr);grid-template-rows:auto 1fr;gap:3px 10px;padding:9px;text-align:left;background:#fbf3dc var(--art-paper);border:1px solid #b4a174;box-shadow:inset 0 0 0 2px #fff9eac9,0 2px 0 #b9a47128;border-radius:11px}
#dialog .route-options button:before{content:'';display:block;grid-column:1;grid-row:1/3;width:62px;height:64px;margin:0;border:1px solid #ad9d72;border-radius:8px;background-size:cover;background-position:20% 20%;filter:none}
#dialog .route-options strong{grid-column:2;font-size:14px;line-height:1.5}
#dialog .route-options small{grid-column:2;font-size:12px;line-height:1.55}
#dialog .route-options button[aria-pressed=true]{outline:2px solid #597c51;outline-offset:-3px}
#dialog .route-options button[aria-pressed=true]:after{top:10px;left:48px;right:auto}
/* School portraits remain original; textured caption areas unify the selection screen. */
#characterSelect .cs-card{border-color:#bba976;background-image:var(--art-paper);box-shadow:0 3px 0 #9d835127;border-radius:10px}
#characterSelect .cs-card.is-selected{border-color:#b18a32;box-shadow:0 0 0 1px #b18a32,0 3px 5px #7c69322a}
#characterSelect .cs-card.is-locked{background:#e7e4d8;box-shadow:none}
/* Cangjian HUD only: other schools retain their existing individual palettes. */
body[data-character=cangjian] #hud :is(.player-card,.journey,.build,.stance,.skills){border:2px solid transparent;border-image:var(--art-card) 96 fill / 16px / 0 stretch;background:none;box-shadow:0 3px 5px #7665362b;border-radius:10px}
body[data-character=cangjian] #hud .mission-hud .journey{border:2px solid transparent;border-image:var(--art-card) 96 fill / 16px / 0 stretch;background:none}
body[data-character=cangjian] #hud .skill{background:#f7efd6 var(--art-paper);background-size:230px;border-color:#b49b63;box-shadow:0 2px 0 #a48b5e35}
body[data-character=cangjian] #hud .skill.ultimate{box-shadow:inset 0 0 0 2px #fff8e2,0 2px 0 #a48b5e35}
body[data-character=cangjian] #hud .player-seal{border-color:#9d8247;box-shadow:0 0 0 2px #f8e7ad,0 2px 3px #7c683329}
body[data-character=cangjian] #hud .build>p{color:#665b36;letter-spacing:1px}
body[data-character=cangjian] #hud .badge{background:#f0e7cbe0;border-color:#c5b47f}
body[data-character=cangjian] #hud #pause{border:2px solid transparent;border-image:var(--art-gold) 84 fill / 13px / 0 stretch;background:none;box-shadow:0 2px 2px #6d5d302c}
body[data-character=cangjian] #hud .gear-battle-actions button{border:2px solid transparent;border-image:var(--art-card) 96 fill / 12px / 0 stretch;background:none;box-shadow:0 2px 3px #7665362b}
@media(min-width:761px) and (max-height:780px){#home.home{padding-top:73px;gap:8px 0}#home .home-copy{padding-top:9px;padding-bottom:9px}#home .home-bottom>span{min-height:62px}#dialog .screen-header{min-height:70px;padding-block:10px}#dialog .screen-body{padding:12px 20px}}
@media(max-width:1000px){#dialog .route-options button{grid-template-columns:48px minmax(0,1fr);gap:4px 7px}#dialog .route-options button:before{width:48px;height:62px}#dialog .route-options button[aria-pressed=true]:after{left:35px}}
@media(max-width:760px){
 #home.home{padding:76px 20px 22px;background-size:auto 100dvh;background-position:center top;background-attachment:local}#home .home-copy{padding:14px 12px;margin:0;align-self:stretch;background:#fff8e9e8;border-radius:18px;box-shadow:0 4px 16px #a3915920}#home .hero-art{background:#fff9e586;border-radius:22px;margin:0}#home .home-bottom>span{min-height:51px}#home>footer{width:auto;padding:7px}
 #dialog.game-screen{width:100%;height:100dvh;max-height:100dvh;border-width:7px;border-image-width:16px;border-radius:15px}#dialog.game-screen .screen-header{padding:10px 12px;min-height:67px;margin:2px 0 0;border-image-width:8px 42px 8px 16px}#dialog .screen-header .screen-back,#dialog .screen-status{margin-right:17px;font-size:11px}#dialog .screen-identity{gap:8px}#dialog .screen-header h2{font-size:19px!important}#dialog .screen-path{font-size:10px;letter-spacing:0}#dialog .screen-emblem{width:38px;height:38px}#dialog .ui-emblem-art{width:35px;height:35px}
 #dialog .screen-steps{margin:0;padding-inline:6px}#dialog.game-screen .screen-body{padding:12px}#dialog .screen-footer{padding:9px 11px max(10px,env(safe-area-inset-bottom))}#dialog .screen-tabs.gear-tabs{margin:0;padding-inline:8px}#dialog .screen-footer .primary{border-image-width:17px;min-height:46px}#dialog .screen-footer .secondary{border-image-width:11px}#dialog .screen-footer>p{font-size:12px}
 #dialog :is(.loadout-card,.choice,.gear-choice,.equipment-card,.gear-services>article,.help-grid>div,.codex-list>article){border-image-width:15px}
 #dialog .route-options button{grid-template-columns:66px minmax(0,1fr);gap:4px 12px}#dialog .route-options button:before{width:66px;height:62px}#dialog .route-options button[aria-pressed=true]:after{left:52px}
 #characterSelect{border-width:8px;border-image-width:18px;border-radius:18px}#characterSelect .cs-header{padding:11px 12px;margin:0;border-image-width:8px 50px 8px 15px;gap:9px}#characterSelect .cs-close{margin-right:12px;padding:8px 10px;font-size:12px}#characterSelect .cs-header h2{font-size:19px}#characterSelect .cs-footer{padding:11px 12px}#characterSelect .cs-scroll{padding:12px 10px}#characterSelect .cs-header-art{width:40px;height:40px}
}
@media(max-height:500px) and (orientation:landscape){#dialog.game-screen{height:100dvh;max-height:100dvh;border-width:7px;border-image-width:17px}#dialog.game-screen .screen-header{min-height:48px;padding:5px 16px;border-image-width:7px 65px 7px 17px}#dialog .screen-emblem{height:32px;width:32px}#dialog .ui-emblem-art{width:30px;height:30px}#dialog .screen-footer{padding:6px 12px}#dialog .screen-body{padding:10px 15px}#dialog .screen-steps{padding:0 12px}}
@media(prefers-reduced-motion:reduce){#home *,#dialog *,#characterSelect *{transition:none!important;animation:none!important}}