/* Pixel-fantasy skin: dark wood panels with brass corners, wooden plank buttons and red title
   ribbons (PixelLab art in src/ui/). Loaded after theme.css and overrides its look only. */
:root{--pf-ink:#f6e7c4;--pf-ink2:#d9c39a;--pf-gold:#f2c75c;--pf-wood:#3a2418;--pf-dim:#b59a72}

/* panels */
.frame,.win,#dlg,#dockmore{border:6px solid transparent!important;border-radius:0!important;background:none!important;box-shadow:0 6px 18px rgba(0,0,0,.45)!important;
  border-image:url('ui/panel.png') 24 fill / 22px stretch!important;image-rendering:pixelated;color:var(--pf-ink)}
.frame::before,.frame::after,.win::before,.win::after{display:none!important}
.frame[data-title]{padding-top:16px}

/* window title: red ribbon */
.win .wh{border:0!important;background:url('ui/ribbon.png') center/100% 100% no-repeat!important;image-rendering:pixelated;margin:-6px 18px 4px;padding:6px 40px 8px!important;justify-content:center;position:relative}
.win .wh b{font:600 15px var(--thai)!important;color:#fff6dc!important;text-shadow:0 2px 0 #5a0d0d,0 0 6px rgba(0,0,0,.4)!important}
.win .wh kbd{position:absolute;left:14px;border-color:var(--pf-gold)!important;color:var(--pf-gold)!important;background:rgba(0,0,0,.35)}
.win .wx{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px!important;height:26px!important;background:#5a1414!important;border:2px solid var(--pf-gold)!important;border-radius:4px!important;color:#fff!important}
.win .wb{color:var(--pf-ink)}

/* buttons: wooden planks */
.sbtn,.stab,.tab,.go,#dacts button,.rchip{border:3px solid transparent!important;border-radius:0!important;background:none!important;border-image:url('ui/button.png') 8 fill / 8px stretch!important;
  image-rendering:pixelated;color:var(--pf-ink)!important;text-shadow:0 1px 0 #2a160c;padding:6px 12px!important;cursor:pointer}
.sbtn:hover,.stab:hover,.tab:hover,#dacts button:hover{filter:brightness(1.18)}
.stab.on,.tab.on,.rchip.on{filter:brightness(1.25) saturate(1.2);color:#fff!important;box-shadow:inset 0 -3px 0 var(--pf-gold)}
.go{filter:sepia(.5) saturate(2.4) hue-rotate(5deg) brightness(1.15);color:#2a1606!important;text-shadow:0 1px 0 #ffe9a8;font-weight:700}
.go:disabled,.sbtn:disabled{filter:grayscale(.8) brightness(.7);cursor:default}
.muted,small{color:var(--pf-dim)}

/* inventory / list cells sit on dark leather */
.gs,.mic,.mpick,.slot,.card,.srow,.plr,.jcard,.tcol,.ptbox{background:rgba(20,10,4,.45)!important;border-color:#6b4a2c!important}
.gs.sel,.mic.on,.mpick.on{border-color:var(--pf-gold)!important;box-shadow:0 0 0 1px var(--pf-gold) inset}

/* HUD bars keep their colours */
#hud .bar,.bar{background:#1a0f08!important;border:1px solid #6b4a2c!important}

/* ---------- icon dock (systems30) ---------- */
#menu.docked{display:block!important;width:auto!important;padding:10px 12px!important;max-height:none!important;overflow:visible!important}
#menu.docked>.sbtn{display:none!important}
.dock{display:flex;gap:4px;flex-wrap:wrap}
.dk{position:relative;display:grid;justify-items:center;gap:1px;width:52px;padding:4px 2px 3px;background:rgba(20,10,4,.45);border:1px solid #6b4a2c;border-radius:6px;color:var(--pf-ink);cursor:pointer}
.dk:hover,.dk:focus-visible{border-color:var(--pf-gold);background:rgba(90,50,20,.55);outline:none}
.dk img{width:32px;height:32px;image-rendering:pixelated}
.dk span{font:11px var(--thai);line-height:1.1;white-space:nowrap}
.dk kbd{position:absolute;top:1px;right:3px;font:600 9px var(--head);color:var(--pf-gold)}
#dockmore{position:fixed;z-index:8;padding:14px!important;width:min(300px,calc(100% - 16px))}
#dockmore .dmh{font:600 14px var(--thai);color:var(--pf-gold);margin:0 0 8px;text-align:center}
#dockmore .dmg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#dockmore .dk{width:auto}

/* ---------- phones ---------- */
@media (max-width:720px){
  .frame,.win,#dlg,#dockmore{border-image-width:16px!important}
  /* windows become full-screen sheets with big touch targets */
  .win{left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;max-width:none!important;transform:none!important;display:flex;flex-direction:column}
  .win[hidden]{display:none!important}
  .win .wb{flex:1;max-height:none!important;overflow:auto}
  .win .wx{width:40px!important;height:40px!important;font-size:22px!important}
  .sbtn,.stab,.tab,.go,#dacts button{min-height:40px;font-size:14px!important}
  .dk{width:46px}.dk img{width:28px;height:28px}.dk span{font-size:10px}.dk kbd{display:none}
  #menu.docked{padding:8px!important}
}
.rchip{color:var(--rc,#cde)!important}.rchip.on{color:#fff!important}
/* the message log and chat stay light so the world shows through */
#log{border-image:none!important;border:0!important;background:linear-gradient(90deg,rgba(20,10,4,.72),rgba(20,10,4,.25))!important;border-left:3px solid #8a5a2a!important;box-shadow:none!important}
body.touch #chatbox{right:100px!important}
@media (max-width:720px){#dockmore{top:auto!important;bottom:calc(150px + env(safe-area-inset-bottom,0px));left:8px!important;right:8px;width:auto}}
#dlg{z-index:9!important}
#dgwin{left:50%;top:calc(56px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(640px,calc(100% - 16px))}
#dgwin .wb{padding:10px 12px;max-height:min(72vh,600px);overflow:auto}
.dgl{display:grid;gap:8px}.dgc{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:8px;background:rgba(20,10,4,.45);border:1px solid #6b4a2c;border-radius:6px}
.dgc img{width:56px;height:56px;image-rendering:pixelated}.dgc b{color:#fff6dc}.dgc.lock{opacity:.6}
.dgc.raid{border-color:#ff6a3a;background:linear-gradient(90deg,rgba(120,20,10,.55),rgba(20,10,4,.45))}