/* Extend the source's wooden middle. Portrait and both corner ornaments retain
   their native dimensions; the original PNG files are never modified. */
.desktop-client #window-character .native-character-board.character-extended{width:355px;height:462px}
.desktop-client #window-bag .native-board.inventory-extended{width:425px;height:524px}
.inventory-frame-top-left{left:0;top:0;width:114px;height:112px;z-index:1;background-position:0 0}
.inventory-frame-top-center{left:114px;top:0;height:112px;transform-origin:top left;background-position:-114px 0}
.desktop-client #window-character .character-extended .inventory-frame-top-center{width:148px;transform:scaleX(1.4324324324)}
.desktop-client #window-character .character-extended .inventory-frame-center{top:112px;width:195px;height:300px;background-position:-67px -112px;transform:scaleX(1.3282051282);transform-origin:top left}
.desktop-client #window-character .character-extended :is(.inventory-frame-right,.inventory-frame-right-extension,.inventory-frame-right-end){left:326px}
.desktop-client #window-character .character-extended :is(.inventory-frame-left-extension,.inventory-frame-right-extension){height:24px}
.desktop-client #window-character .character-extended :is(.inventory-frame-left-end,.inventory-frame-right-end){top:368px}
.desktop-client #window-character .character-extended .inventory-frame-footer{width:259px;height:24px}
.desktop-client #window-character .character-extended .inventory-frame-bottom{top:436px;width:195px;transform:scaleX(1.3282051282);transform-origin:top left}
.desktop-client #window-bag .inventory-extended .inventory-frame-top-center{width:226px;transform:scaleX(1.2477876106)}
.desktop-client #window-bag .inventory-extended .inventory-frame-center{top:112px;height:347px;background-position:-67px -112px;transform:scaleX(1.2051282051);transform-origin:top left}
.desktop-client #window-bag .inventory-extended :is(.inventory-frame-right,.inventory-frame-right-extension,.inventory-frame-right-end){left:396px}
.desktop-client #window-bag .inventory-extended :is(.inventory-frame-left-extension,.inventory-frame-right-extension){height:24px}
.desktop-client #window-bag .inventory-extended :is(.inventory-frame-left-end,.inventory-frame-right-end){top:434px}
.desktop-client #window-bag .inventory-extended .inventory-frame-footer{width:329px;height:24px}
.desktop-client #window-bag .inventory-extended .inventory-frame-bottom{top:483px;transform:scaleX(1.2051282051);transform-origin:top left}
.desktop-client #window-character .character-face{left:19px;top:9px;width:85px;height:86px;clip-path:circle(37px at 44px 45px);image-rendering:auto}
.desktop-client #window-character :is(.native-character-value,.native-value-ink,.native-character-label){font-size:12px;line-height:14px;height:14px}
.desktop-client #window-character .native-character-name{left:127px;width:195px;font-size:14px}
.desktop-client #window-character .native-character-class{left:143px;width:178px;font-size:12px}
.desktop-client #window-character .native-character-title{left:122px;width:195px;font-size:13px}
.desktop-client #window-bag .inv-stat{font-size:12px;line-height:12px;width:43px;left:99px}
.desktop-client #window-bag .inv-label{font-size:10px;line-height:12px}
.desktop-client #window-bag .native-gold{font-size:12px}
.desktop-client #window-bag .native-inventory-title{left:158px;top:15px;width:235px;text-align:center;font-size:13px;line-height:16px;background:none;color:#f1dfb9}
.desktop-client #window-bag .native-bag{left:69px;width:315px;grid-template-columns:repeat(8,39.375px);background:#17130de6}
.desktop-client #window-bag .native-bag .inventory-cell{box-sizing:border-box;width:39.375px;border:1px solid #72644a;background:linear-gradient(#59442a1a,#16120b33)}
.desktop-client #window-bag .bag-selection{left:77px;top:449px;width:306px;font-size:10px}
.desktop-client #window-character .character-extended .native-context-toolbar{top:413px;width:255px;height:22px;padding:0;gap:12px}
.desktop-client #window-bag .inventory-extended .native-context-toolbar{top:460px;width:325px;height:22px;padding:0;gap:8px}
.desktop-client #window-character .character-extended .native-context-toolbar button,.desktop-client #window-bag .inventory-extended .native-context-toolbar button{height:22px;min-height:22px;font-size:max(10px,calc(7px / var(--native-board-scale,1)));padding-top:0;padding-bottom:0;background-size:12px 12px}
.desktop-client .single-native-window .window-header [data-close]{margin:0;position:absolute;right:2px;top:3px;width:25px;height:25px;background:transparent url('/assets/ui/native-round-bezel.png') center/contain no-repeat;border:0;border-radius:50%;font-size:17px;line-height:25px;color:#f1dfb9;text-shadow:0 1px 2px #000;box-shadow:0 1px 3px #0006}
/* The minimap sits alongside the XP line rather than a row below it. */
.desktop-client .map-card,.desktop-client.touch-client .map-card{left:max(2px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + var(--native-hud-height) + 3px);padding:2px}
/* Compact movable chat, including its collapsed state, stays on the screen. */
.desktop-client #chat-box.chat-box{display:block;position:fixed;right:auto;bottom:auto;width:min(310px,calc(100vw - 12px));max-width:none;max-height:var(--floating-available-height,calc(100dvh - 40px));box-sizing:border-box;z-index:32;border:4px solid transparent;border-image:url('/assets/ui/native-detail-frame.png') 7 / 4px / 0 stretch;background:linear-gradient(#16180fea,#16180fea),url('/assets/ui/native-detail-wood.png');box-shadow:0 2px 7px #0006;border-radius:3px;overflow:hidden;pointer-events:auto}
.desktop-client #chat-box .chat-header{height:26px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding-left:9px;background:url('/assets/ui/native-detail-wood.png') center;font:12px/1 var(--font-title);color:#ecd5a3;touch-action:none;user-select:none;cursor:grab}
.desktop-client #chat-box .chat-header::before{content:'⋮';margin-right:6px;color:#bb9b64}
.desktop-client #chat-box .chat-header>span{flex:1}
.desktop-client #chat-box #chat-collapse{height:24px;min-height:24px;width:24px;padding:0;margin:0;border:0;border-radius:50%;background:transparent url('/assets/ui/native-round-bezel.png') center/contain no-repeat;color:#efdaad;font-size:18px}
.desktop-client #chat-box .chat-tabs{height:25px;flex:none}
.desktop-client #chat-box .chat-tabs button{min-height:22px;font-size:11px;padding:2px 12px;margin:0}
.desktop-client #chat-box .chat-tabs button:last-child{margin-left:0}
.desktop-client #chat-box .chat-messages{height:clamp(30px,calc(var(--floating-available-height,240px) - 118px),68px);font-size:11px}
.desktop-client #chat-box form{margin:0;padding:3px;gap:3px}
.desktop-client #chat-box input{font-size:16px;min-height:28px;height:28px;padding:2px 5px}
.desktop-client #chat-box form button{min-height:28px;font-size:11px;padding:2px 8px}
.desktop-client #chat-box.collapsed{width:150px}
.desktop-client #chat-box.collapsed :is(.chat-tabs,.chat-messages,form){display:none}
.desktop-client #chat-box .chat-header:focus-visible,.desktop-client #window-party .window-header:focus-visible{outline:1px solid #e7cd8f;outline-offset:-2px}
.desktop-client #chat-box .chat-header.dragging,.desktop-client #window-party .window-header.dragging{cursor:grabbing}
.desktop-client #window-party.combat-party .window-header{inset:0 39px auto 40px;height:31px;min-height:31px;pointer-events:auto;touch-action:none;user-select:none;cursor:grab;z-index:3}
.desktop-client #window-party.combat-party .window-header::before{content:'⋮';position:absolute;top:8px;left:23px;color:#ccb17b;text-shadow:0 1px #000;font-size:15px;pointer-events:none}
.desktop-client #window-party.combat-party .window-header [data-close]{left:-26px}
.desktop-client #window-party.combat-party .party-manage-toggle{z-index:4}

.desktop-client #window-character .native-caption-cover{left:83px;width:85px}

.desktop-client #window-bag .bag-selection{width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.desktop-client #window-bag .native-bag-page{font-size:10px;color:#d6c69f;white-space:nowrap}

/* Sheets stay above chat; the chat header stays usable during combat. */
.desktop-client:has(.client-window:not(.combat-party)) #chat-box.chat-box{z-index:20}

/* The installed app and browser share a full viewport scene. */
html:has(body.desktop-client),body.desktop-client{width:100%;height:100%;min-height:100dvh;margin:0;padding:0;overflow:hidden}
.desktop-client .game-layout{position:fixed;inset:0;width:100%;height:100dvh;margin:0;padding:0;max-width:none}
.desktop-client .play-area{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0}
.desktop-client .scene{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;margin:0;padding:0}
.desktop-client #world{display:block;width:100%;height:100%;margin:0}
.desktop-client #chat-box.chat-box,.desktop-client #chat-box.chat-box.collapsed{width:var(--chat-width,310px);max-width:calc(100vw - 16px)}
.desktop-client #chat-box .chat-header{padding-left:15px;padding-right:10px}
.desktop-client #chat-box .chat-resize{position:absolute;top:0;bottom:0;width:10px;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#c5a76d;touch-action:none;cursor:ew-resize;z-index:2}
.desktop-client #chat-box .chat-resize-left{left:0}
.desktop-client #chat-box .chat-resize-right{right:0}
.desktop-client #chat-box .chat-resize::before{content:'';position:absolute;left:4px;top:35%;bottom:35%;width:2px;background:#c5a76d99;box-shadow:2px 0 #100d0966}
.desktop-client #chat-box .chat-resize:hover,.desktop-client #chat-box .chat-resize:focus-visible{background:#c5a76d22}
/* Utility row above the combat wheel; original bindings and targets stay put. */
.desktop-client.touch-client .actionbar button.action:is([data-slot="2"],[data-slot="3"],[data-slot="4"],[data-slot="5"]){top:0}
.desktop-client.touch-client .actionbar button.action[data-slot="0"]{top:149px}
.desktop-client.touch-client .actionbar button.action[data-slot="1"]{top:171px}
.desktop-client.touch-client .actionbar button.action[data-slot="6"]{top:100px}
.desktop-client.touch-client .actionbar button.action[data-slot="7"]{top:74px}
.desktop-client.touch-client .actionbar button.action[data-slot="8"]{top:105px}
.desktop-client.touch-client .actionbar button.action[data-slot="9"]{top:182px}
/* The source PNG ends through the portrait rim. Rebuild only its missing top
   arc with native timber; reserve 14px so it remains inside the window. */
.desktop-client #window-character .character-extended .inventory-frame-top-left{width:132px;z-index:2}
.desktop-client #window-character .character-extended .inventory-frame-top-center{left:132px;width:130px;background-position:-132px 0;transform:scaleX(1.4923076923)}
.desktop-client #window-character .character-extended .inventory-frame-portrait-crown{left:7px;top:-10px;width:116px;height:20px;z-index:1;background:url('/assets/ui/native-detail-wood.png') center/114px 51px;mask-image:radial-gradient(circle at 58px 58px,transparent 49px,#000 50px,#000 57px,transparent 58px);filter:brightness(.48) sepia(.25)}
.desktop-client #window-character .character-extended .inventory-frame-portrait-crown::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 58px 58px,transparent 50px,#a4794233 51px,transparent 52px,#0d070699 56px,transparent 58px)}
.desktop-client #window-character.single-native-window .window-header [data-close]{top:calc(3px + 14px * var(--native-board-scale,1))}
/* One timber inset, with room for both native corner ornaments. */
.desktop-client #window-character .character-extended .inventory-frame-footer{background-image:linear-gradient(#140d061a,#140d061a),url('/assets/ui/native-frame/character-closed.png');background-size:100% 100%,661.13px 438px;background-position:0 0,-336.25px -365px;background-repeat:no-repeat;box-shadow:inset 0 1px #23140988}
.desktop-client #window-character .character-extended .native-context-toolbar{left:77px;width:239px;gap:14px}
.desktop-client #window-character .character-extended .native-context-toolbar button{flex:0 0 84px;min-width:0;font-size:max(11.5px,calc(8px / var(--native-board-scale,1)));background-size:14px 14px;text-align:center;padding-left:18px;padding-right:4px;color:#f1deb7;transition:color .12s}
.desktop-client #window-character .character-extended .native-context-toolbar button:is(:hover,:focus-visible){color:#fff1cc;filter:brightness(1.1)}
.desktop-client #chat-box[data-sheet-obscured="true"]{visibility:hidden;pointer-events:none}
/* Preserve both the portrait rim and the original round inventory fastener. */
.desktop-client #window-bag .inventory-extended .inventory-frame-top-left{width:164px;z-index:2}
.desktop-client #window-bag .inventory-extended .inventory-frame-top-center{left:164px;width:176px;background-position:-164px 0;transform:scaleX(1.3181818182)}
.desktop-client #window-bag .inventory-extended .inventory-frame-portrait-crown{left:7px;top:-10px;width:116px;height:20px;z-index:1;background:url('/assets/ui/native-detail-wood.png') center/114px 51px;mask-image:radial-gradient(circle at 58px 58px,transparent 49px,#000 50px,#000 57px,transparent 58px);filter:brightness(.48) sepia(.25)}
.desktop-client #window-bag .inventory-extended .inventory-frame-portrait-crown::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 58px 58px,transparent 50px,#a4794233 51px,transparent 52px,#0d070699 56px,transparent 58px)}
.desktop-client #window-bag.single-native-window .window-header [data-close]{top:calc(3px + 14px * var(--native-board-scale,1))}
.desktop-client #window-bag .inventory-extended .inventory-frame-footer{background-image:linear-gradient(#140d061a,#140d061a),url('/assets/ui/native-frame/inventory-closed.png');background-size:100% 100%,639.02px 666.67px;background-position:0 0,-251.08px -376px;background-repeat:no-repeat;box-shadow:inset 0 1px #23140988}
.desktop-client #window-bag .inventory-extended .native-context-toolbar{left:77px;width:309px;gap:4px}
.desktop-client #window-bag .native-inventory-title{left:168px;width:224px}
.desktop-client #window-world .world-map-count{margin:4px 0 7px;color:#c5b590;font-size:11px}
/* Titles use the native upper-right fastener and the first round control. */
.desktop-client #window-titles .window-header [data-close]{position:absolute;left:calc(283px * var(--native-board-scale,1) - 13px);right:auto;top:calc(31px * var(--native-board-scale,1) - 13px);margin:0;width:26px;height:26px;min-height:26px;border:0;border-radius:50%;background:transparent url('/assets/ui/native-round-bezel.png') center/contain no-repeat;color:#f1dfb9;font-size:18px;line-height:26px;padding:0}
.desktop-client #window-titles .native-legend [data-title=""]{left:89px;top:370px;width:44px;height:44px;margin:0;padding:0;min-height:0;display:grid;place-items:center;line-height:1;background:none;border:0;border-radius:50%;font-size:12px}
/* Preserve the complete lower portrait gear and keep the inset between caps. */
.desktop-client #window-character .character-extended .inventory-frame-left-end{width:96px;z-index:2;clip-path:polygon(0 0,67px 0,67px 64px,96px 64px,96px 100%,0 100%)}
.desktop-client #window-character .character-extended .inventory-frame-right-end{z-index:2}
.desktop-client #window-character .character-extended .native-context-toolbar{left:105px;width:211px;gap:10px}
/* The skills panel needs no added footer: retain its complete native outline. */
.desktop-client #window-skills .native-skills-board.skills-extended{height:437px;background:none}
.desktop-client #window-skills .skills-extended .inventory-continuous-frame{background:url('/assets/ui/native-frame/skills-closed.png') left top no-repeat}
.desktop-client #window-skills .skills-extended .inventory-continuous-frame>i{display:none}
.desktop-client #window-skills .skills-extended .inventory-frame-portrait-crown{display:block;left:10px;top:-10px;width:116px;height:20px;background:url('/assets/ui/native-detail-wood.png') center/114px 51px;mask-image:radial-gradient(circle at 58px 58px,transparent 49px,#000 50px,#000 57px,transparent 58px);filter:brightness(.48) sepia(.25)}
.desktop-client #window-skills.single-native-window .window-header [data-close]{top:calc(3px + 14px * var(--native-board-scale,1))}
.desktop-client #window-skills .native-skill-list{left:63px;top:91px;width:287px;height:298px;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#a28657 #171410;background:#191611}
.desktop-client #window-skills .native-skill-list button{flex:0 0 43px;min-height:43px;padding:2px 6px 2px 2px;gap:10px;background:url('/assets/ui/native-frame/skills-closed.png') -63px -92px no-repeat;color:#f1deb3}
.desktop-client #window-skills .native-skill-list button>span:last-child{padding-left:0}
.desktop-client #window-skills .native-skill-list button.selected{outline:1px solid #c8a668;outline-offset:-1px}
/* Titles should also avoid looking like a second chat footer. */
.desktop-client:has(#window-titles:not(.minimized)) #chat-box{visibility:hidden;pointer-events:none}
/* The character sheet ends in its original binding, without a switch footer. */
.desktop-client #window-character .native-character-board.character-extended{height:438px}
.desktop-client #window-character .character-extended :is(.inventory-frame-left-extension,.inventory-frame-right-extension,.inventory-frame-footer){display:none}
.desktop-client #window-character .character-extended .inventory-frame-left-end{left:0;top:344px;width:114px;height:94px;z-index:1;clip-path:none;background-position:0 -344px}
.desktop-client #window-character .character-extended .inventory-frame-right-end{top:344px;height:94px;background-position:-262px -344px;z-index:1}
.desktop-client #window-character .character-extended .inventory-frame-bottom{left:114px;top:412px;width:148px;height:26px;background-position:-114px -412px;transform:scaleX(1.4324324324)}
.desktop-client #window-character .native-character-name{left:122px;top:49px;width:195px;height:34px;line-height:34px;text-align:center;font-size:14px;background:url('/assets/ui/native-frame/character-closed.png') -208px -49px/540.43px 438px no-repeat}
.desktop-client #window-character .native-character-class{left:122px;width:195px;text-align:center}
.desktop-client #window-character [data-character-stats]{cursor:pointer}
.desktop-client #window-character [data-character-stats]:focus-visible{outline:1px solid #d6b879;outline-offset:1px}
/* Remove only the clipped vine tail; keep the upper crown on its own layer. */
.desktop-client #window-skills .skills-extended .inventory-continuous-frame{background:none}
.desktop-client #window-skills .skills-extended .inventory-continuous-frame::before{content:'';position:absolute;inset:0;background:url('/assets/ui/native-frame/skills-closed.png') left top no-repeat;clip-path:polygon(0 0,393px 0,393px 401px,112px 401px,112px 437px,0 437px)}

/* One horizontal ratio for the complete equipment grid. The separate blank
   strip preserves the circular fastener without repeating it beside the grid. */
.desktop-client #window-bag .inventory-extended .inventory-frame-top-center{left:181px;width:215px;transform:none;background-size:444.69px 500px;background-position:-194.744px 0}
.desktop-client #window-bag .inventory-continuous-frame::after{content:'';position:absolute;left:164px;top:0;width:17px;height:112px;background:url('/assets/ui/native-frame/inventory-closed.png') -320px 0 no-repeat;pointer-events:none}
.desktop-client #window-bag .native-bag{height:136px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#ad9560 #151511;align-content:start;grid-auto-rows:33px}
.desktop-client #window-bag .native-bag .inventory-cell{height:33px;min-height:33px;box-sizing:border-box}
.desktop-client #window-bag .paperdoll{z-index:3;pointer-events:none;image-rendering:auto}
.desktop-client .single-native-window .native-item-popover{padding:25px 29px 27px 19px;border:0;border-image:none;background:none;border-radius:0;box-shadow:0 3px 9px #0005;isolation:isolate}
.desktop-client .single-native-window .native-item-popover::before,.desktop-client .single-native-window .native-item-popover[data-pointer="left"]::before{display:block;content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:22px solid transparent;border-left-width:13px;border-right-width:13px;border-image:url('/assets/ui/native-frame/item-info-complete.png') 32 18 32 18 / 22px 13px / 0 stretch;background:url('/assets/ui/native-frame/item-info-texture.png') center/100% 46px repeat-y;background-clip:padding-box}
.desktop-client .single-native-window .native-item-popover .native-popover-header{min-height:24px;padding-bottom:5px}
.desktop-client #window-skills .native-skill-list button{gap:14px;padding-left:9px;align-items:center}
.desktop-client #window-skills .native-skill-list button>span:last-child{display:flex;flex-direction:column;min-width:0;flex:1;padding-left:2px;text-align:left}
.desktop-client #window-skills .native-skill-list .native-list-name{display:block;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:15px}
.native-skill-book-fallback{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;flex:none}
.native-skill-book-fallback img{display:block;width:29px;height:29px;object-fit:contain}