/* Native Tibia client look: original panel/header/button graphics and the client bitmap font (see AduraBonk NATIVE-UI.md). */
@font-face{font-family:TibiaClient;src:url('assets/ui/tibia-client.ttf?v=2') format('truetype');font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#1a1a1a;color:#c8c8c8;overflow:hidden}
body,button,input,select,b,small,span,p,h2,li,label{font:16px/16px TibiaClient,Verdana,sans-serif;letter-spacing:0;-webkit-font-smoothing:none;text-shadow:1px 1px #000}
h2{font-size:32px;line-height:32px;margin:6px 0 12px;color:#ddd;font-weight:normal}
canvas#game{display:block;position:fixed;inset:0;width:100vw;height:100vh;cursor:crosshair}
body{background:#1a1a1a url('assets/ui/panel.png')}
[hidden]{display:none!important}

.window{position:fixed;background:#424242 url('assets/ui/panel.png') repeat;border:1px solid #171717;border-top-color:#aaa;border-left-color:#8b8b8b;box-shadow:inset 1px 1px #666,inset -1px -1px #272727,1px 2px 2px #0008;padding:24px 8px 8px}
.window>.title{position:absolute;top:0;left:0;right:0;height:18px;padding:1px 6px;color:#ccc;background:url('assets/ui/header-left.png') left top no-repeat,url('assets/ui/header-right.png') right top no-repeat,url('assets/ui/header-middle.png') 0 0 repeat-x}
.window.center{left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:94vh;overflow:auto}
.modal-wrap{position:fixed;inset:0;background:#0008;display:grid;place-items:center;padding:12px}
.modal-wrap>.window{position:relative;width:min(640px,96vw);max-height:94vh;overflow:auto}
.modal-wrap>.window.compact{width:min(440px,94vw);text-align:center}

button{background:#484848 url('assets/ui/button.png') center/100% 100%;border:1px solid #202020;border-top-color:#939393;border-left-color:#858585;color:#ddd;box-shadow:inset -1px -1px #262626;padding:5px 10px;min-height:24px;cursor:pointer}
button:hover{background-color:#626262;filter:brightness(1.15)}
button:active{border-color:#151515 #aaa #aaa #151515}
button:disabled{opacity:.5;cursor:default;filter:none}
button:focus-visible{outline:1px solid #c7bc8b;outline-offset:2px}
button.primary{width:100%;min-height:28px;background-color:#425c36;margin-top:8px}
button.selected{background-color:#5b5b5b;outline:1px solid #d0bc87;outline-offset:-3px}
input,select{background:#2b2b2b;border:1px solid #161616;border-top-color:#111;border-bottom-color:#777;border-right-color:#777;color:#ddd;padding:3px 5px}
input:focus{outline:1px solid #8b8b8b}

.row{display:flex;align-items:center;gap:8px;margin:6px 0}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.grow{flex:1;min-width:0}
.caption{margin:12px 0 4px;color:#aaa}
.muted{color:#999;line-height:19px}.error{color:#f66;min-height:16px;margin:6px 0 0}
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.choices.small{grid-template-columns:repeat(4,auto);justify-content:start;margin-bottom:4px}
.choices button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px}
.choices img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.list{list-style:none;margin:4px 0;padding:0;border:1px solid #202020;background:#333;box-shadow:inset 1px 1px #222}
.list li{display:flex;align-items:center;gap:6px;padding:3px 6px;border-bottom:1px solid #2a2a2a;min-height:30px}
.list li img{width:26px;height:26px;image-rendering:pixelated;object-fit:contain}
.list li .tag{color:#d0bc87}.list li .dead{color:#888;text-decoration:line-through}.list li .me{color:#9fd78d}
.list li .right{margin-left:auto;color:#aaa}

#hud #character{top:8px;left:8px;width:240px}
#portrait{width:48px;height:48px;image-rendering:pixelated;background:#333;border:1px solid #202020;object-fit:contain}
.bar{position:relative;height:14px;background:#222;border:1px solid #111;margin:4px 0}.bar i{display:block;height:100%;background:#00c000}.bar span{position:absolute;inset:0;text-align:center;font-size:16px;line-height:13px}
.money img,.coin{width:22px;height:16px;object-fit:contain;image-rendering:pixelated;vertical-align:middle}
#score{top:8px;right:8px;width:290px}
#status{position:fixed;top:10px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
#status b{display:block;font-size:32px;line-height:32px;color:#ddd}#status small{display:block;color:#ccc;margin-top:4px}
#notice{position:fixed;top:28%;left:50%;transform:translateX(-50%);color:#fff;font-size:32px;line-height:32px;pointer-events:none;text-align:center;transition:opacity .4s}
#spellbar{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:6px;background:#424242 url('assets/ui/panel.png');border:1px solid #171717;border-top-color:#aaa;box-shadow:inset 1px 1px #666,1px 2px 2px #0008}
.slot{position:relative;width:40px;height:40px;background:url('assets/ui/containerslot.png') center/100% 100%;display:grid;place-items:center}
.slot img{width:32px;height:32px;image-rendering:pixelated}
.slot .cd{position:absolute;left:4px;right:4px;bottom:4px;background:#000b;pointer-events:none}
.slot .key{position:absolute;left:2px;top:1px;color:#fff;font-size:16px}
.slot .lvl{position:absolute;right:2px;bottom:1px;color:#ffd75e}
.slot .cdtext{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.slot.locked img{filter:grayscale(1);opacity:.25}
#hint{position:fixed;bottom:8px;width:100%;text-align:center;color:#bbb;pointer-events:none}

#shop-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.shop-section{grid-column:1/-1;color:#d0bc87;margin-top:6px}
#join-form .muted{margin:0}
.offer{display:flex;gap:8px;padding:6px;background:#373737;border:1px solid #151515;box-shadow:inset 1px 1px #666,inset -1px -1px #2a2a2a;text-align:left}
.offer img{width:32px;height:32px;image-rendering:pixelated}
.offer .words{color:#ffd75e}.offer p{margin:4px 0;color:#bbb;line-height:18px}.offer button{width:100%}
.offer .lvl{color:#9fd78d}

#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.nameplate{position:absolute;transform:translate(-50%,-100%);text-align:center;white-space:nowrap}
.nameplate b{display:block;font-size:16px;line-height:16px}
.nameplate .hpbar{width:28px;height:4px;margin:2px auto 0;background:#000;border:1px solid #000;box-sizing:content-box}
.nameplate .hpbar i{display:block;height:100%}
.float{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:16px;line-height:16px}
.float.words{color:#ffff00}.float.dmg{color:#f33}.float.info{color:#fff}
@media (max-width:700px){#score{top:auto;bottom:90px}#hint{display:none}.choices{grid-template-columns:repeat(2,1fr)}#shop-list{grid-template-columns:1fr}}

/* Engine screens */
.window.narrow{width:min(420px,94vw)}
#login .row{justify-content:space-between}#login input{width:240px}
.center-text{text-align:center}.row.center{justify-content:center}.row.top{align-items:flex-start}
.preview-box{flex:none;width:136px}
#outfit-canvas{display:block;width:128px;height:128px;image-rendering:pixelated;background:#333 url('assets/stonefloor-tiles.png');border:1px solid #202020}
.addon-row label{flex:1}.addon-row.muted label{opacity:.5}
#parts button{flex:1}
#palette{display:grid;grid-template-columns:repeat(19,1fr);gap:1px;margin:4px 0;background:#202020;border:1px solid #111}
.swatch{min-height:0;height:16px;padding:0;border:1px solid #111;box-shadow:none}
.swatch:hover{filter:none;outline:1px solid #fff;outline-offset:-1px}
.swatch.selected{outline:2px solid #fff;outline-offset:-2px}
#outfit .row .primary{margin-top:0}
#room-list li button{min-height:22px;padding:2px 10px}
#room-lobby #leave-room{margin-top:8px}
#mode-options{margin:0}
#notice{z-index:5}
.modal-wrap{z-index:10}

/* Shop: a wide rectangle with compact cards so most of it fits without scrolling. */
.modal-wrap>#shop.window{width:min(1240px,97vw);max-height:92vh;padding:24px 8px 6px}
#shop-list{grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:4px;margin-top:4px}
#shop .shop-section{margin-top:2px}
#shop .row{margin:2px 0}
#shop .offer{gap:6px;padding:4px 5px;align-items:flex-start}
#shop .offer img{width:24px;height:24px;object-fit:contain}
#shop .offer p{margin:1px 0 3px;line-height:16px;color:#aaa}
#shop .offer .words{display:inline;margin-left:4px}
#shop .offer button{min-height:20px;padding:1px 8px}
#shop button.primary{min-height:24px;margin-top:4px}
#shop #shop-error{min-height:0;margin:2px 0 0}

/* Optional profiler, below Character and outside the central status/spell HUD. */
#profiler{left:8px;top:154px;width:min(338px,calc(100vw - 16px));max-height:calc(100vh - 238px);overflow:auto;z-index:20}
#profiler>.title span{float:right;color:#aaa}
#profiler-graph{display:block;width:100%;height:76px;border:1px solid #202020}
#profiler pre{font:12px/16px Menlo,Consolas,monospace;letter-spacing:0;white-space:pre-wrap;margin:6px 0}
#profiler small{font-size:12px;line-height:14px}
#profiler .row{gap:5px;margin:5px 0 0}#profiler button{padding:2px 7px}
#profiler-copytext{width:100%;height:100px;font:11px/14px monospace;background:#222;color:#ddd}
@media(max-height:550px){#profiler{top:140px;max-height:calc(100vh - 220px)}}


/* Home (Bestiary Arena /game and /profile layout, own art): charcoal page with a faint pixel grid, a thin top
   bar, one big framed game window with the sidebar beside it, and a profile page of framed panels. */
#home{position:fixed;inset:0;overflow:auto;background:#1c1c1c;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:20px 20px}
#page{max-width:1100px;margin:0 auto;padding:0 16px;min-height:100%;display:flex;flex-direction:column;border-left:1px solid #ffffff0a;border-right:1px solid #ffffff0a}
#home a{color:#d6d6d6;text-decoration:none;font:16px/16px TibiaClient,Verdana,sans-serif;text-shadow:1px 1px #000}#home a:hover{color:#fff}
#topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 10px}
#topbar .links{display:flex;align-items:center;gap:14px}#topbar .logo{width:26px;height:26px;image-rendering:pixelated}
#topbar .group{display:flex;align-items:stretch;border:1px solid #0b0b0b;box-shadow:0 0 0 1px #3a3a3a}
#topbar .group button,#topbar .counter{display:flex;align-items:center;gap:6px;min-height:26px;padding:3px 10px;border:0;border-right:1px solid #111;box-shadow:inset 1px 1px #ffffff1a;background:#2f2f2f url('assets/ui/panel.png')}
#topbar .group img{width:16px;height:16px;object-fit:contain;image-rendering:pixelated}
#topbar .counter{background:#242424;box-shadow:inset 1px 1px #0008;border-right:0}#topbar .counter b{color:#f0d470}
.online{color:#8a8a8a}.online b{color:#6fc35a}

/* Framed boxes: a thick stone frame with inner bevel, used by the game window and every profile panel. */
.frame{position:relative;background:#3a3a3a url('assets/ui/panel.png');border:1px solid #0d0d0d;box-shadow:inset 1px 1px #8a8a8a,inset -1px -1px #1d1d1d,0 0 0 1px #2a2a2a}
.ftitle{display:flex;align-items:center;gap:6px;padding:3px 6px;color:#cfcfcf;background:linear-gradient(#4a4a4a,#363636);border-bottom:1px solid #111}
.ftitle img{width:22px;height:22px;margin:-4px 0;object-fit:contain;image-rendering:pixelated}
.panel{background:#2e2e2e url('assets/ui/panel.png');border:1px solid #0f0f0f;box-shadow:inset 1px 1px #6c6c6c,inset -1px -1px #1a1a1a}
.ptitle{padding:3px 6px;color:#ddd;border-bottom:1px solid #111;background:#00000030}

#play-page{display:grid;grid-template-columns:minmax(0,1fr) 216px;gap:10px;align-items:stretch}
/* The game window: the selected mode's scene, your warlock in the middle, big outlined captions like the arena maps. */
#screen{padding:10px;min-height:560px;overflow:hidden}
#scene{position:absolute;inset:10px;border:1px solid #000;box-shadow:inset 0 0 80px #000b;image-rendering:pixelated;background:#222 center/cover}
/* Real in-game shots (tools/e2e/scenes.mjs) and the Orc Fortress render. */
#scene.warlock{background-image:url('assets/scenes/warlock.png')}#scene.hookwars{background-image:url('assets/scenes/hookwars.png')}
#scene.maplab{background-image:url('assets/maps/orc-fortress-preview.png')}
#stage{position:absolute;left:50%;top:54%;transform:translate(-50%,-62%);width:256px;height:256px;cursor:pointer;z-index:2}
#hero-canvas{width:256px;height:256px;image-rendering:pixelated}
#hero-name{position:absolute;top:-6px;left:0;right:0;text-align:center;color:#00c000}
#stage:hover #hero-canvas{filter:drop-shadow(0 0 6px #ffffff50)}
.big-text{font-size:48px;line-height:48px;color:#f4f4f4;text-shadow:3px 0 #000,-3px 0 #000,0 3px #000,0 -3px #000,3px 3px #000,-3px -3px #000,3px -3px #000,-3px 3px #000}
#scene-count{position:absolute;top:20px;right:24px;text-align:right;z-index:2}
#scene-count b{display:block}#scene-count span{display:block;margin-top:6px}
#scene-count b,#scene-name b{font-size:48px;line-height:48px;color:#f4f4f4;text-shadow:3px 0 #000,-3px 0 #000,0 3px #000,0 -3px #000,3px 3px #000,-3px -3px #000,3px -3px #000,-3px 3px #000}
#scene-count span,#scene-name span{font-size:32px;line-height:32px;color:#f4f4f4;text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000,2px 2px #000}
#scene-name{position:absolute;right:24px;bottom:22px;text-align:right;z-index:2}
#rooms-panel{position:absolute;top:20px;left:20px;width:220px;z-index:3}
#room-list{list-style:none;margin:0;padding:4px}#room-list li{display:flex;align-items:center;gap:6px;padding:3px;border-bottom:1px solid #00000040}
#room-list li img{width:26px;height:26px;image-rendering:pixelated;border:1px solid #111;background:#222}
#room-list li .grow small{display:block;color:#8fe07a;margin-top:2px}
#room-list li button{min-height:20px;padding:1px 8px}
#no-rooms{margin:6px 8px;color:#999}

/* Sidebar: player card, tabs, slot grid, a big green Start button. */
#side{display:flex;flex-direction:column;gap:6px}
#player-card{display:flex;gap:8px;padding:6px;align-items:center}
#player-card img,.pinfo img{width:48px;height:48px;image-rendering:pixelated;object-fit:contain;background:#00000040;border:1px solid #111}
.lvl{display:flex;justify-content:space-between;margin:4px 0 3px;color:#aaa}
.bar-xp{height:5px;background:#0a0a0a;border:1px solid #000}.bar-xp i{display:block;height:100%;width:0;background:linear-gradient(#ffe066,#d4a017)}
.tabs{display:flex;gap:0;margin-top:4px}
.tab{min-height:22px;padding:2px 12px;border-bottom:0;background-color:#2c2c2c}.tab.active{background-color:#4c4c4c;color:#fff}
.grid-panel{padding:6px;flex:1;min-height:180px}
#slot-search{width:100%;margin-bottom:6px}
.slots{display:grid;grid-template-columns:repeat(4,40px);gap:4px}
.slots.big{grid-template-columns:repeat(auto-fill,96px);padding:6px}
.slot{position:relative;width:40px;height:40px;min-height:0;padding:0;display:grid;place-items:center;background:#1f1f1f url('assets/ui/containerslot.png') center/100% 100%;border:1px solid #0d0d0d}
.slot img{max-width:32px;max-height:32px;image-rendering:pixelated}
.slot .n{position:absolute;left:2px;bottom:1px;color:#fff;font-size:16px;line-height:14px}
.slot.selected{box-shadow:0 0 0 2px #6fc35a;filter:none}
.slot.green{background-color:#1f3a1a}.slot.blue{background-color:#1d2a44}.slot.purple{background-color:#352045}.slot.gold{background-color:#45391a}
.slots.big .slot{width:96px;height:64px}.slots.big .slot canvas,.slots.big .slot img{max-width:64px;max-height:64px}
.slots.big .slot.worn{box-shadow:0 0 0 2px #6fc35a}
#mode-description{margin:8px 0 0;color:#aaa;line-height:18px}
#new-name{width:100%}
button.start{width:100%;min-height:48px;font-size:32px;line-height:32px;color:#eaffe4;background:#3e8a35 url('assets/ui/button.png') center/100% 100%;background-blend-mode:multiply;border:1px solid #173012;border-top-color:#9ad98a;border-left-color:#86c876;text-shadow:2px 2px #000}
button.start:hover{background-color:#4ea343}

/* Profile page */
#profile-page{display:flex;flex-direction:column;gap:10px}
.crumbs{display:flex;align-items:center;gap:10px;padding:4px 0}.crumbs img{width:22px;height:22px;image-rendering:pixelated}
.cols{display:grid;grid-template-columns:380px minmax(0,1fr);gap:56px;align-items:start}
.col-left,.col-right{display:flex;flex-direction:column;gap:14px}
.pinfo{display:flex;gap:8px;padding:8px;align-items:center}
.pmeta{display:grid;grid-template-columns:1fr 1fr;padding:2px 8px 8px}.pmeta small{display:block;color:#aaa;margin-bottom:3px}.pmeta b{color:#f0d470}
#stats-table{width:calc(100% - 12px);margin:6px;border-collapse:collapse;background:#262626;border:1px solid #111}
#stats-table th{text-align:left;padding:4px 6px;background:#353535;color:#eee;border-bottom:1px solid #111;font-weight:normal}
#stats-table td{padding:3px 6px;border-bottom:1px solid #1b1b1b}#stats-table td:last-child{text-align:center;border-left:1px solid #1b1b1b;width:90px}
#stats-table td img{width:14px;height:14px;vertical-align:-2px;margin-right:4px;image-rendering:pixelated}
#hero-stats{padding:8px}#hero-stats .stat{margin:5px 0}#hero-stats .stat .row{margin:0 0 2px}#hero-stats .stat .right{margin-left:auto;color:#aaa}
.bar-green{height:4px;background:#0b0b0b;border:1px solid #000}.bar-green i{display:block;height:100%;background:linear-gradient(#7bd06a,#3f8f34)}
#account-stats{display:block;padding:0 8px 8px}
#foot{display:flex;justify-content:center;gap:60px;margin-top:auto;padding:28px 0 18px;border-top:1px solid #ffffff0a}
.window>.title .close{float:right;min-height:0;height:14px;width:14px;padding:0;margin-top:1px;line-height:10px;font-size:12px}
@media (max-width:860px){#play-page{grid-template-columns:1fr}#screen{min-height:420px}.cols{grid-template-columns:1fr;gap:14px}#scene-count b,#scene-name b{font-size:32px;line-height:32px}#scene-count span,#scene-name span{font-size:16px;line-height:16px}#rooms-panel{width:180px}#stage{transform:translate(-50%,-62%) scale(.75)}#topbar .links a[data-page]{display:none}}

/* Arena-site skin for the home screens, built from the Tibia client's own frame graphics (assets/ui/rcc, shared by
   xandjiji with credit). Frames and buttons are 9-slices: frame 4 px, raised frame 3 px, title bar and buttons 2 px. */
#home .frame{background:url('assets/ui/rcc/surface.png');border:4px solid;border-image:url('assets/ui/rcc/frame.png') 4 / 4px stretch;box-shadow:none}
#home .ftitle,#home .ptitle{border:2px solid;border-image:url('assets/ui/rcc/titlebar.png') 2 fill / 2px stretch;background:none;padding:2px 6px;color:#e6e6e6}
#home .panel{background:url('assets/ui/rcc/surface-dark.png');border:3px solid;border-image:url('assets/ui/rcc/frame-raised.png') 3 / 3px stretch;box-shadow:none}
#home button,#outfit-wrap button,#account-wrap button{border:2px solid;border-image:url('assets/ui/rcc/button-grey.png') 2 fill / 2px stretch;background:none;box-shadow:none;filter:none;color:#e8e8e8}
#home button:hover,#outfit-wrap button:hover,#account-wrap button:hover{filter:brightness(1.15)}
#home button:active,#outfit-wrap button:active,#account-wrap button:active,#home .tab.active{border-image-source:url('assets/ui/rcc/button-dark.png')}
#home button.start,#outfit-wrap button.primary:not(:disabled):first-child{border-image-source:url('assets/ui/rcc/button-green.png');color:#f2fff0}
#home .tab{border-image-source:url('assets/ui/rcc/button-small.png');min-height:22px}
#home .tab.active{color:#fff}
#topbar .group{border:3px solid;border-image:url('assets/ui/rcc/frame-raised.png') 3 / 3px stretch;box-shadow:none;background:url('assets/ui/rcc/surface-dark.png')}
#topbar .group button{border-image-source:url('assets/ui/rcc/button-small.png')}
#topbar .counter{border:2px solid;border-image:url('assets/ui/rcc/button-dark.png') 2 fill / 2px stretch;background:none;box-shadow:none}
#home .slot{border:2px solid;border-image:url('assets/ui/rcc/button-dark.png') 2 fill / 2px stretch;background:none}
#home .slot.gold{border:3px solid;border-image:url('assets/ui/rcc/slot-gold.png') 3 / 3px stretch;background:#3a2f12}
#home .slot.blue,#home .slot.purple{border:3px solid;border-image:url('assets/ui/rcc/slot-silver.png') 3 / 3px stretch;background:#1b2436}
#home .slot.green{border:3px solid;border-image:url('assets/ui/rcc/slot-silver.png') 3 / 3px stretch;background:#1d311a}
#home .slot.selected{box-shadow:0 0 0 2px #5adb4f}
#home input{border:2px solid;border-image:url('assets/ui/rcc/button-dark.png') 2 fill / 2px stretch;background:none}
#home .bar-xp{height:5px;border:1px solid #000;background:#111}#home .bar-xp i{background:url('assets/ui/rcc/bar-xp.png') 0 0/100% 100%}
#home .bar-green i{background:url('assets/ui/rcc/bar-green.png') 0 0/100% 100%}
#stats-table{background:url('assets/ui/rcc/surface-dark.png');border:2px solid;border-image:url('assets/ui/rcc/button-dark.png') 2 / 2px stretch}
#stats-table th{background:url('assets/ui/rcc/surface.png')}
#screen{padding:6px}#scene{inset:6px}
#outfit-wrap .window,#account-wrap .window{background:url('assets/ui/rcc/surface.png');border:4px solid;border-image:url('assets/ui/rcc/frame.png') 4 / 4px stretch;box-shadow:0 8px 30px #000a}
#outfit-wrap .window>.title,#account-wrap .window>.title{top:0;left:0;right:0;border:2px solid;border-image:url('assets/ui/rcc/titlebar.png') 2 fill / 2px stretch;background:none;height:20px}

/* The client textures tile (like the surfaces) instead of stretching across wide buttons and fields. */
#home button,#outfit-wrap button,#account-wrap button,#home .ftitle,#home .ptitle,#topbar .counter,#home .slot{border-image-repeat:repeat}
#home input{border-image:url('assets/ui/rcc/button-dark.png') 2 fill / 2px repeat;background:none}
#stats-table{border-image-repeat:repeat}

/* Set Outfit: palette swatches keep their own colors; checkboxes are the client's. */
#outfit-wrap button.swatch{border:1px solid #111;border-image:none;padding:0;min-height:0;height:16px}
#outfit-wrap button.swatch.selected{outline:2px solid #fff;outline-offset:-2px}
#outfit-wrap #palette{background:#111;border:2px solid;border-image:url('assets/ui/rcc/button-dark.png') 2 / 2px repeat}
#outfit-wrap input[type=checkbox],#home input[type=checkbox]{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin:0 6px 0 0;border:0;border-image:none;background:url('assets/ui/rcc/checkbox.png');vertical-align:-1px;cursor:pointer}
#outfit-wrap input[type=checkbox]:checked{background-image:url('assets/ui/rcc/checkbox-checked.png')}
#outfit-wrap input[type=checkbox]:disabled{opacity:.4;cursor:default}
#outfit-canvas{border:2px solid;border-image:url('assets/ui/rcc/button-dark.png') 2 / 2px repeat}
#outfit-wrap button.selected{outline:1px solid #d0bc87;outline-offset:-4px}
#topbar .brand{display:flex;align-items:center;gap:8px}#topbar .brand span{font-size:16px;color:#e8e8e8}
#topbar .group button.selected{border-image-source:url('assets/ui/rcc/button-dark.png');color:#fff}
.pfoot{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:0 8px 8px}.pfoot button{min-height:24px;padding:2px 12px;white-space:nowrap;flex:none}
#outfit-wrap .window>.title{border-image-repeat:repeat}
#profile-page{padding-top:4px}

/* Outfit shop (#store): a detail frame with a walking preview and buy/wear buttons, and a grid of every outfit as a
   slot framed by price tier (gold 300, silver 150, plain free), with its price or Owned and two addon pips. */
.store-cols{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}
#store-detail{display:flex;flex-direction:column;gap:8px;padding-bottom:10px;position:sticky;top:8px}
#store-detail>*:not(.ftitle){margin-left:10px;margin-right:10px}
#store-stage{height:210px;display:grid;place-items:end center;background:url('assets/stonefloor-tiles.png') 0 0/64px 64px;border:2px solid;border-image:url('assets/ui/rcc/button-dark.png') 2 / 2px repeat;box-shadow:inset 0 0 40px #000c;margin-top:4px}
#store-canvas{width:192px;height:192px;image-rendering:pixelated}
.store-info{display:flex;justify-content:space-between;align-items:baseline}.store-info b{font-size:16px;color:#fff}.store-info small{color:#f0d470}
.store-addon{display:flex;align-items:center;justify-content:space-between;gap:8px}.store-addon.muted{opacity:.45}
.store-addon label{display:flex;align-items:center}.store-addon button{min-height:24px;padding:2px 10px}
#store-detail button.start{font-size:16px;min-height:36px}
#store-wear{min-height:30px}
.store-bar{display:flex;align-items:center;gap:10px;padding:8px 10px 0}.store-bar .tabs{margin:0}.store-bar input{flex:1}
#store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;padding:10px;max-height:calc(100vh - 170px);overflow:auto}
#home .slot.store-item{width:auto;height:96px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 4px;position:relative}
#home .slot.store-item>img{max-width:64px;max-height:64px;margin-bottom:auto;margin-top:6px;image-rendering:pixelated}
#home .slot.store-item .tag{display:flex;align-items:center;gap:3px;font-size:16px;line-height:14px;color:#f0d470;text-shadow:1px 1px #000}
#home .slot.store-item .tag img{width:14px;height:10px;object-fit:contain}
#home .slot.store-item .tag.got{color:#7be36a}
#home .slot.store-item .pips{position:absolute;top:4px;right:4px;display:flex;gap:2px}
#home .slot.store-item .pips i{width:6px;height:6px;background:#111;border:1px solid #555}#home .slot.store-item .pips i.on{background:#7be36a;border-color:#2c6b23}
#home .slot.store-item:not(.owned)>img{filter:saturate(.75) brightness(.9)}
@media (max-width:860px){.store-cols{grid-template-columns:1fr}#store-detail{position:static}}
#home .slot.store-item{background:url('assets/ui/rcc/surface-dark.png')}
#home .slot.store-item.owned{background:url('assets/ui/rcc/surface.png')}
#home .slot.store-item>img{width:64px;height:64px;max-width:none;max-height:none;object-fit:contain;object-position:center bottom}
#home .slot.store-item.selected{box-shadow:0 0 0 2px #5adb4f,inset 0 0 12px #5adb4f40}
#store-detail button.start,#store-wear{width:auto;align-self:stretch}
/* Tier frames in the shop */
#home .slot.store-item.silver{border:3px solid;border-image:url('assets/ui/rcc/slot-silver.png') 3 / 3px stretch}
#home .slot.store-item.blue{border:3px solid;border-image:url('assets/ui/rcc/slot-silver.png') 3 / 3px stretch;box-shadow:inset 0 0 0 1px #3d6fd1,inset 0 0 14px #2c55a855}
#home .slot.store-item.purple{border:3px solid;border-image:url('assets/ui/rcc/slot-silver.png') 3 / 3px stretch;box-shadow:inset 0 0 0 1px #9b55d6,inset 0 0 14px #7a3db055}
#home .slot.store-item.gold{border:3px solid;border-image:url('assets/ui/rcc/slot-gold.png') 3 / 3px stretch}
#home .slot.store-item.legendary{box-shadow:inset 0 0 18px #f0c04080,0 0 8px #f0c04060;animation:legend 2.4s ease-in-out infinite}
@keyframes legend{50%{box-shadow:inset 0 0 26px #ffd96aa0,0 0 14px #ffd96a90}}
#home .slot.store-item.selected{box-shadow:0 0 0 2px #5adb4f,inset 0 0 12px #5adb4f40;animation:none}
#store-tier{margin-top:-4px}#store-tier.silver{color:#cfd6df}#store-tier.blue{color:#7fa8ff}#store-tier.purple{color:#c590ff}#store-tier.gold{color:#f0d470}#store-tier.legendary{color:#ffd96a;text-shadow:0 0 6px #ffb00080,1px 1px #000}
#home input[type=checkbox]:checked{background-image:url('assets/ui/rcc/checkbox-checked.png')}#home input[type=checkbox]:disabled{opacity:.4;cursor:default}

/* In-game shop (client/shopui.js): an icon grid and one detail panel, in the client's own frames. */
.modal-wrap>#shop.window{width:min(760px,96vw);max-height:none;padding:24px 10px 10px;background:url('assets/ui/rcc/surface.png');border:4px solid;border-image:url('assets/ui/rcc/frame.png') 4 / 4px stretch;box-shadow:0 8px 30px #000a}
#shop .window>.title,#shop>.title{border:2px solid;border-image:url('assets/ui/rcc/titlebar.png') 2 fill / 2px repeat;background:none;height:20px}
#shop #shop-list{display:block;margin-top:6px}
.sx{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:10px;align-items:start}
.sx-title{margin:6px 0 4px;color:#bdbdbd}.sx-title:first-child{margin-top:0}
.sx-row{display:grid;grid-template-columns:repeat(auto-fill,52px);gap:6px}
#shop .sx-slot{position:relative;width:52px;height:52px;min-height:0;padding:0;display:grid;place-items:center;border:2px solid;border-image:url('assets/ui/rcc/button-dark.png') 2 fill / 2px repeat;background:none;box-shadow:none;filter:none}
#shop .sx-slot img{width:32px;height:32px;image-rendering:pixelated}
#shop .sx-slot:hover{filter:brightness(1.2)}
#shop .sx-slot.selected{box-shadow:0 0 0 2px #5adb4f}
#shop .sx-slot.poor img{opacity:.45}
.sx-key{position:absolute;left:3px;top:2px;color:#fff;font-size:16px;line-height:14px}
.sx-cost{position:absolute;right:3px;bottom:2px;color:#f0d470;font-size:16px;line-height:14px;text-shadow:1px 1px #000}
.sx-slot.poor .sx-cost{color:#d06060}
.sx-pips{position:absolute;left:3px;right:3px;top:2px;display:flex;justify-content:flex-end;gap:1px}
.sx-pips i{width:3px;height:3px;background:#000;box-shadow:0 0 0 1px #444}.sx-pips i.on{background:#7be36a}
.sx-detail{display:flex;flex-direction:column;gap:8px;padding:10px;box-sizing:border-box;height:200px;overflow:hidden;background:url('assets/ui/rcc/surface-dark.png');border:3px solid;border-image:url('assets/ui/rcc/frame-raised.png') 3 / 3px stretch}
.sx-head{display:flex;align-items:center;gap:8px}.sx-head img{width:32px;height:32px;image-rendering:pixelated}.sx-head b{color:#fff;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-detail p{margin:0;color:#c8c8c8;line-height:19px;height:57px;overflow:hidden}.sx-detail small{color:#9a9a9a;height:16px;line-height:16px}
#shop .sx-buy{margin-top:auto;min-height:32px;border:2px solid;border-image:url('assets/ui/rcc/button-green.png') 2 fill / 2px repeat;background:none;box-shadow:none;color:#f2fff0}
#shop .sx-buy:disabled{border-image-source:url('assets/ui/rcc/button-grey.png');color:#999}
#shop button.primary,#shop #ready{border:2px solid;border-image:url('assets/ui/rcc/button-grey.png') 2 fill / 2px repeat;background:none;box-shadow:none;margin-top:10px;min-height:28px}
@media (max-width:640px){.sx{grid-template-columns:1fr}}
#shop .sx-detail.peek .sx-buy{opacity:.55}