/* Menu appearance chooser, shared by desktop and touch devices. */
.appearance-launch{position:absolute;left:calc(var(--safe-left) + (100% - var(--safe-left) - var(--safe-right))/2);bottom:calc(var(--safe-bottom) + 32px);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px;min-width:160px;min-height:48px;padding:10px 24px;border:1px solid #566944;border-radius:24px;background:#141c10;color:#d1edb3;font:600 14px Arial,sans-serif;touch-action:manipulation}
.appearance-launch:hover{background:#1d2a15;border-color:#c6f66b}
.appearance-launch svg{flex:none}
body.playing .appearance-launch{display:none}
#appearancePanel{position:fixed;inset:0;z-index:9500;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:calc(var(--safe-top) + 8px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 12px);background:#000a;backdrop-filter:blur(7px)}
#appearancePanel[hidden]{display:none}
.appearance-card{width:600px;max-width:100%;min-width:0;max-height:calc(var(--usable-height) - 16px);display:flex;flex-direction:column;padding:18px;border:1px solid #ffffff26;border-radius:22px;background:#141611;box-shadow:0 20px 80px #0008}
.appearance-heading{display:flex;align-items:center;justify-content:space-between;flex:none;height:44px;gap:12px}
.appearance-heading h2{margin:0;color:#f0f4e9;font:600 18px Arial,sans-serif}
#closeAppearance{width:44px;height:44px;font-size:25px;background:transparent;border-color:transparent;touch-action:manipulation}
.appearance-body{min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#536545 #141611}
#appearancePreview{display:block;width:100%;height:100px;touch-action:pan-y}
.appearance-colors{display:block;margin:0 0 14px;padding:14px 16px;border:1px solid #ffffff17;border-radius:14px;background:#0e110d}
.appearance-colors legend{margin:0;padding:0 6px;color:#d0dbc7;font:600 13px Arial,sans-serif;letter-spacing:0}
.appearance-palette{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.appearance-color{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;touch-action:manipulation}
.appearance-color::before{content:'';width:27px;height:27px;border-radius:50%;background:var(--swatch)}
.appearance-color[aria-pressed=true]{border:2px solid var(--swatch);background:#ffffff06}
.appearance-preview-label{margin-left:auto;color:#889a79;font:11px Arial,sans-serif}
.skin-browser{padding:14px 16px;border:1px solid #ffffff17;border-radius:14px;background:#0e110d}
.skin-toolbar{display:flex;align-items:center;gap:12px}
.skin-toolbar h3{margin:0;color:#d0dbc7;font:600 13px Arial,sans-serif}
.skin-filters{display:flex;flex:1;justify-content:flex-end;gap:4px;min-width:0;overflow-x:auto;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:thin}
.skin-filter{flex:none;min-height:44px;min-width:44px;border:1px solid transparent;border-radius:10px;background:transparent;padding:7px 10px;color:#98a68f;font:600 12px Arial,sans-serif;touch-action:manipulation}
.skin-filter:hover{background:#ffffff07}
.skin-filter[aria-selected=true]{color:#c6f66b;border-color:#c6f66b45;background:#c6f66b12}
.skin-collection{min-height:144px;display:grid;place-items:center;outline-offset:-2px}
.skin-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;color:#617157}
.skin-empty p{margin:0;color:#89967e;font:13px Arial,sans-serif;text-align:center}
.skin-selection-row{display:flex;align-items:center;gap:10px;margin:8px 0 10px;min-height:36px}
.skin-selection-row[hidden]{display:none}
#skinSelection{flex:1;margin:0;min-width:0;font:11px/1.5 Arial,sans-serif;color:#a1ae98}
.skin-collection{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;align-items:stretch;place-items:stretch}
.owned-skin{--skin-accent:#a4aaad;min-height:94px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #ffffff1c;border-radius:12px;background:#151913;color:#dde6d5;font:600 12px Arial,sans-serif;touch-action:manipulation}
.owned-skin[aria-pressed=true]{border-color:var(--skin-accent);background:color-mix(in srgb,var(--skin-accent) 9%,#10140e)}
.owned-skin small{font:10px Arial,sans-serif;color:#9eaa97}.skin-emblem{width:30px;height:30px;color:var(--skin-accent)}.skin-emblem svg{width:100%;height:100%}
.owned-skin:disabled{opacity:.5;cursor:wait}
.skin-collection>.skin-empty{grid-column:1/-1;margin:0;align-self:center;justify-self:center;font:12px Arial,sans-serif}
.lootbox-browser{margin-top:14px;padding:14px 16px;border:1px solid #ffffff17;border-radius:14px;background:#0e110d}
.lootbox-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lootbox-heading h3{margin:0;color:#d0dbc7;font:600 13px Arial,sans-serif}
.lootbox-count{padding:4px 8px;border-radius:8px;background:#ffffff06;color:#98a68f;font:11px Arial,sans-serif;white-space:nowrap}
.lootbox-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:104px;color:#617157}
.lootbox-empty p{margin:0;color:#89967e;font:12px Arial,sans-serif;text-align:center}
@media(orientation:landscape) and (max-height:600px){.owned-skin{min-height:66px;gap:3px}.skin-emblem{width:24px;height:24px}.skin-selection-row{margin:4px 0 7px}}
.appearance-card button:focus-visible,.skin-collection:focus-visible{outline:2px solid #c6f66b;outline-offset:2px}
@media(orientation:landscape) and (max-height:600px){
 .appearance-launch{bottom:calc(var(--safe-bottom) + 12px);min-height:44px;min-width:140px;padding:7px 20px;font-size:12px}
 .welcome{top:calc(var(--safe-top) + (var(--usable-height) - 64px)/2)}
 .appearance-card{padding:10px 14px;border-radius:18px}
 .appearance-heading h2{font-size:16px}
 #appearancePreview{height:48px}
 .appearance-colors{padding:8px 12px;margin-bottom:8px}
 .appearance-palette{gap:10px}
 .skin-browser{padding:8px 12px}
 .lootbox-browser{margin-top:8px;padding:8px 12px}
 .lootbox-empty{min-height:62px;flex-direction:row}
 .lootbox-empty svg{width:30px;height:30px}
 .skin-collection{min-height:56px}
 .skin-empty{flex-direction:row;gap:10px;padding:7px}
 .skin-empty svg{width:32px;height:28px}
}
@media(max-width:600px){.appearance-palette{gap:6px}.skin-toolbar{gap:6px}.skin-filter{padding:7px 8px}.appearance-colors,.skin-browser,.lootbox-browser{padding-left:10px;padding-right:10px}}
@media(orientation:landscape) and (max-height:360px){#appearancePreview{height:32px}}