/* Pack 01 v2: visual skins. Nine-slice values are source PNG pixels. */
:root{--u3-assets:/assets/mobile-ui-v3/ui}
.icon-with-art{display:inline-grid;place-items:center;vertical-align:middle;position:relative}
.icon-with-art>svg,.icon-with-art>.icon-art{grid-area:1/1;width:100%;height:100%}
.icon-with-art>svg{display:none}
.icon-with-art>.icon-art{object-fit:contain;image-rendering:pixelated}
.icon-with-art.asset-missing>svg{display:block}
.icon-with-art.asset-missing>.icon-art{display:none}

/* Border-image keeps each element's existing box size and hit area. */
:is(#sheet,.login-card,.death-card,#confirm-dialog){border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/frames/panel.png');border-image-slice:10 fill;border-image-width:5px;border-image-repeat:stretch;image-rendering:pixelated}
:is(#sheet,.login-card,.death-card,#confirm-dialog).pixel:before,
:is(#sheet,.login-card,.death-card,#confirm-dialog).pixel:after{display:none}
.portrait{border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/frames/portrait.png');border-image-slice:8 fill;border-image-width:4px;border-image-repeat:stretch;image-rendering:pixelated}
.map-hud{border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/frames/minimap.png');border-image-slice:8 fill;border-image-width:4px;border-image-repeat:stretch;image-rendering:pixelated}
.map-chip{border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/frames/location.png');border-image-slice:8 10 fill;border-image-width:4px 5px;border-image-repeat:stretch;image-rendering:pixelated}
:is(.portrait,.map-hud,.map-chip).pixel:before,:is(.portrait,.map-hud,.map-chip).pixel:after{display:none}
.meter{border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/frames/resource-bar.png');border-image-slice:6 fill;border-image-width:3px;border-image-repeat:stretch;image-rendering:pixelated}
:is(input:not([type=checkbox]):not([type=range]),select){border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/frames/input.png');border-image-slice:8 fill;border-image-width:4px;border-image-repeat:stretch;image-rendering:pixelated}

/* Tabs and actions retain their labels, ARIA states, and click targets. */
:is(.panel-tabs,.service-tabs,.subtabs,.chat-tabs) button{border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/buttons/tab-normal.png');border-image-slice:8 fill;border-image-width:4px;border-image-repeat:stretch;image-rendering:pixelated}
:is(.panel-tabs,.service-tabs,.subtabs,.chat-tabs) button:is([aria-selected=true],[aria-pressed=true]){border-image-source:url('/assets/mobile-ui-v3/ui/buttons/tab-selected.png')}
:is(#sheet,#confirm-dialog,.login-card) button:not(.item-cell):not(.shop-product):not(.trade-slot):not(.primary):not(.panel-tabs button):not(.service-tabs button):not(.subtabs button):not(.chat-tabs button){border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/buttons/button-normal.png');border-image-slice:8 fill;border-image-width:4px;border-image-repeat:stretch;image-rendering:pixelated}
:is(#sheet,#confirm-dialog,.login-card) button:not(.item-cell):not(.primary):active{border-image-source:url('/assets/mobile-ui-v3/ui/buttons/button-pressed.png')}
:is(#sheet,#confirm-dialog,.login-card) button:not(.item-cell):not(.primary):disabled{border-image-source:url('/assets/mobile-ui-v3/ui/buttons/button-disabled.png')}
:is(#sheet,#confirm-dialog,.login-card) button.primary,.login-card a.primary{border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/buttons/primary-normal.png');border-image-slice:8 fill;border-image-width:4px;border-image-repeat:stretch;image-rendering:pixelated}
:is(#sheet,#confirm-dialog,.login-card) button.primary:active{border-image-source:url('/assets/mobile-ui-v3/ui/buttons/primary-pressed.png')}
:is(#sheet,#confirm-dialog,.login-card) button.primary:disabled{border-image-source:url('/assets/mobile-ui-v3/ui/buttons/primary-disabled.png')}
.hud-tools :is(#auto-button,#light-button,#torch-button){border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/buttons/toggle-off.png');border-image-slice:8 fill;border-image-width:4px;border-image-repeat:stretch;image-rendering:pixelated}
.hud-tools :is(#auto-button,#light-button)[aria-pressed=true]{border-image-source:url('/assets/mobile-ui-v3/ui/buttons/toggle-on.png')}
:is(.auto-toggle,.supply-options) input[type=checkbox]{appearance:none;width:48px;height:28px;min-width:48px;min-height:28px;padding:0;border:0;border-radius:0;background:transparent url('/assets/mobile-ui-v3/ui/buttons/switch-off.png') center/100% 100% no-repeat;image-rendering:pixelated}
:is(.auto-toggle,.supply-options) input[type=checkbox]:checked{background-image:url('/assets/mobile-ui-v3/ui/buttons/switch-on.png')}
:is(.auto-toggle,.supply-options) input[type=checkbox]:before{display:none}

.item-cell{border:1px solid transparent;border-image-source:url('/assets/mobile-ui-v3/ui/frames/item-normal.png');border-image-slice:8 fill;border-image-width:4px;border-image-repeat:stretch;image-rendering:pixelated}
.item-cell.quality-fine{border-image-source:url('/assets/mobile-ui-v3/ui/frames/item-fine.png')}
.item-cell.quality-rare{border-image-source:url('/assets/mobile-ui-v3/ui/frames/item-rare.png')}
.item-cell:is(.selected,[aria-pressed=true]){border-image-source:url('/assets/mobile-ui-v3/ui/frames/item-selected.png')}
.skill-bar button{background-image:url('/assets/mobile-ui-v3/ui/frames/skill-circle-normal.png');background-size:100% 100%;background-position:center;background-repeat:no-repeat;image-rendering:pixelated;border-color:transparent}
.skill-bar button:is(:focus-visible,[aria-pressed=true]){background-image:url('/assets/mobile-ui-v3/ui/frames/skill-circle-selected.png')}
.skill-bar button .cooldown{border-radius:50%}

#sheet-close .icon,#confirm-close .icon{width:24px;height:24px}
#detail-back .icon{width:18px;height:18px}

/* The supplied center carries the panel tint; don't stack an opaque CSS fill. */
:is(#sheet,.login-card,.death-card,#confirm-dialog),#sheet[data-view=settings]{background:transparent}
#sheet :is(.tab-navigation,#town-chrome,.shop-column,.shop-footer){background-color:rgba(8,26,48,.27)}
#sheet .auto-toggle{background-color:rgba(16,42,66,.42)}
.map-hud,#minimap{pointer-events:auto}
#minimap{cursor:crosshair;touch-action:manipulation}

/* Pack v2 puts emphasis on the icon and count, then the selected frame. */
.item-cell{box-shadow:none}
.item-cell:before,.item-cell:after{content:none}
.item-cell .count{right:8px;bottom:7px}
.inventory-grid .item-cell .item-icon .icon{width:34px;height:34px}
#sheet .tab-navigation .panel-tabs button{font-size:14px;line-height:1.2}
#sheet #npc-tabs button,#sheet .subtabs button{font-size:14px;line-height:1.2}
#sheet .sheet-heading h2{font-size:18px}
.skill-bar button{border:0;box-shadow:none;background-color:transparent}
.skill-bar button:first-child{border:0}
.connection-line.quiet #connection,.connection-line.quiet #lamp{visibility:hidden}

/* Only the body scrolls. The cue disappears at its end. */
#sheet:is([data-view=inventory],[data-view=character],[data-view=skills],[data-view=quests],[data-view=auto]) .sheet-scroll{padding-bottom:16px}
#sheet-scroll-cue{position:absolute;left:7px;right:7px;bottom:6px;height:22px;z-index:3;pointer-events:none;background:linear-gradient(transparent,rgba(8,26,48,.94))}
#sheet.chat-sheet{height:40dvh}
#sheet.chat-sheet.chat-has-messages{height:52.5dvh}
@media(max-height:560px){#sheet.chat-sheet,#sheet.chat-sheet.chat-has-messages{height:85%}}

/* Pack02A alignment: one translucent surface, with scrolling content inside. */
#sheet:is([data-view=inventory],[data-view=character],[data-view=skills],[data-view=quests],[data-view=auto]){height:58dvh;bottom:0}
#sheet :is(.tab-navigation,#town-chrome,.shop-column,.shop-footer){background-color:transparent}
#sheet .shop-column{border-color:#607fa3;box-shadow:none}
#sheet .shop-column-heading{border-bottom-color:#304969}
#sheet #chat-log p:nth-child(even){background:transparent}
#sheet #chat-log p{border-bottom:1px solid #607fa355}
#sheet .equipment-row{background:transparent;border-bottom:1px solid #607fa366}
#sheet .equipment-row button{box-shadow:none}

/* New art is mapped only to its matching content ID. Keep missing art fallbacks. */
.portrait{padding:1px;align-items:center;justify-content:center;background:transparent}
.portrait .rabbit-portrait{width:46px;height:55px}
.rabbit-portrait .icon-art{object-fit:contain}
.character-hero>.rabbit-portrait{width:68px;height:68px;padding:2px;border:1px solid #607fa3;background:#091b32a8;flex:none}
.character-hero h3{font-size:18px;color:#edf5ff}
.character-hero .help{margin:4px 0 0}
.character-hero .experience-meter{height:8px;margin-top:5px;border:1px solid #607fa3;background:#07172a}
.character-hero .experience-meter i{display:block;height:100%;background:#52d8ff}
.settings-portrait{width:70px;height:76px;background:transparent}
.settings-portrait .rabbit-portrait{width:60px;height:60px}
.item-cell>.item-icon{margin:0 0 12px}
.inventory-grid .item-cell .item-icon .item-art{width:min(52px,14cqw);height:min(52px,14cqw)}
.shop-product .item-icon .item-art,.shop-bag-grid .item-cell .item-icon .item-art{width:36px;height:36px}
.shop-selected>.item-icon .item-art{width:72px;height:72px}
.shop-line>.item-icon .item-art{width:28px;height:28px}
.detail-hero .item-icon .item-art{width:64px;height:64px}
.skill-bar button .skill-icon{width:29px;height:29px}
.skill-level-list .skill-icon{width:34px;height:34px;flex:none;margin-right:6px}
.shop-footer .shop-money{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;flex:1;color:#b5c7dd;font-size:11px;line-height:1.2;white-space:nowrap}
.shop-footer .shop-money strong{color:#ffc85b;font-size:14px;font-variant-numeric:tabular-nums}
.shop-footer .shop-money .warning{display:inline;margin-left:5px;color:#ffc85b;font-size:10px}
#character-body .equip-result{margin:8px 0 0;color:#8fe7bd;font-size:12px;line-height:1.4}
#character-body .equip-result:empty{display:none}

/* Batch 00: one translucent HUD rail with five stable, equal touch targets. */
.hud-bottom{bottom:max(2.5%,calc(env(safe-area-inset-bottom) + 4px))}
.hud-tools{
 position:relative;
 height:62px;
 display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 align-items:center;
 justify-items:center;
 gap:6px;
 margin-bottom:25px;
 padding:6px 10px;
 border:1px solid #769ab0;
 background:rgba(6,22,40,.78);
 box-shadow:inset 0 0 0 2px rgba(15,46,68,.55);
}
.hud-tools::before,.hud-tools::after{
 content:'';position:absolute;width:13px;height:13px;pointer-events:none;
 border:2px solid #a4d9e5;
}
.hud-tools::before{left:-3px;top:-3px;border-right:0;border-bottom:0}
.hud-tools::after{right:-3px;bottom:-3px;border-left:0;border-top:0}
.hud-tools :is(#chat-button,#auto-button,#light-button,#torch-button,#menu-button){
 width:48px;min-width:48px;height:48px;min-height:48px;
 padding:4px;margin:0;
 border:1px solid rgba(100,145,172,.45);
 border-image:none;
 border-radius:0;
 background:rgba(9,31,51,.2);
 box-shadow:inset 0 0 0 1px rgba(46,86,112,.22);
 color:#d9ebf1;
}
.hud-tools :is(#auto-button,#light-button)[aria-pressed=true]{
 border:1px solid #73e4f4;
 border-image:none;
 background:rgba(15,67,91,.5);
 box-shadow:0 0 9px rgba(52,211,244,.36),inset 0 0 0 1px rgba(116,230,250,.48);
 color:#e9fbff;
}
.hud-tools :is(#chat-button,#auto-button,#light-button,#torch-button,#menu-button) .icon{width:29px;height:29px}
.hud-tools #torch-button .icon{width:34px;height:34px}
.hud-tools #torch-button:disabled{opacity:.5}
.hud-tools .hud-count{right:-3px;bottom:-3px;min-width:19px;min-height:17px;border-color:#92c1d5;background:#0a283e;color:#d9f2ff}
.hud-tools #wood-label{border-color:#9a6947;background:#3f281d;color:#ffd293}
@media(max-width:350px){.hud-tools{gap:2px;padding-inline:4px}.hud-tools button,.hud-tools :is(#auto-button,#light-button,#torch-button){width:44px;min-width:44px;height:48px}}