/* ============================================================================
   STRONG WORLD — world.css  (v2, sprite-based)
   Carved gold-and-stone temple console. Real 9-slice stone/gold frames, navy
   hieroglyph panel fills, winged-sun banners, pixel type. Offline, d-pad ready.
   ----------------------------------------------------------------------------
   Art lives in  world/art/kit/*  (frames, buttons, banners, badges, textures)
   and world/art/icons/* (item glyphs). All chroma-keyed to real alpha.
   FONTS: Pixelify Sans + Silkscreen are already served by /app/fonts.css
   (linked from index.html / dm.html), so no @font-face block is needed here.
   ============================================================================ */

:root{
  /* palette (unchanged tokens) */
  --slate-0:#0a1320; --slate-1:#0e1a2b; --slate-2:#16273d; --slate-3:#1d3147;
  --teal:#2c6b6b; --teal-dim:#1f4f4f;
  --gold-0:#8a6d2f; --gold-1:#c9a24b; --gold-2:#e8c878; --gold-3:#f4e3b0;
  --stone:#4f4a3c; --stone-d:#2e2b22; --stone-l:#9a9078;
  --cream:#efe4c4; --cream-dim:#b9ae90;
  --brazier:#e8923a; --sel:#f0d77a; --danger:#c2452f; --good:#4f9d52; --ink:#07101c;
  /* navy panel ink (matches sprite fill) */
  --navy:#141c34; --navy-2:#1b2444;
  --head-font:'Silkscreen',monospace; --body-font:'Pixelify Sans',monospace;
  /* sprite urls */
  --tex-navy:url(art/kit/tex-navy.png);
  --tex-olive:url(art/kit/tex-olive.png);
  --r:3px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:var(--body-font); color:var(--cream); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:none;
  background:
    linear-gradient(180deg, rgba(8,12,10,.72), rgba(8,11,16,.82)),
    var(--tex-olive);
  background-size:auto, 360px;
  background-attachment:fixed;
}
img{image-rendering:pixelated}
::selection{background:var(--sel);color:var(--ink)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--gold-2);text-decoration:none}
h1,h2,h3,h4{margin:0}
:focus{outline:none}
:focus-visible,.sw-focus{outline:2px solid var(--sel);outline-offset:2px;box-shadow:0 0 0 4px rgba(240,215,122,.2)}

.sw-app,#sw-root{max-width:1100px;margin:0 auto;padding:0 14px 60px}

/* =========================================================== PANELS ====== */
/* carved stone frame (hollow 9-slice) + navy hieroglyph fill ------------- */
.sw-frame{
  position:relative;
  border:30px solid transparent;
  border-image:url(art/kit/frame-stone.png) 45 round;
  background:var(--tex-navy); background-size:300px;
  background-clip:padding-box;
  box-shadow:inset 0 0 26px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.5);
  padding:14px 16px; margin:14px 0;
}
.sw-frame.flat{border-width:22px;padding:10px 12px}
.sw-frame.tight{border-width:24px;padding:12px}
.sw-frame.gold{border-image:url(art/kit/frame-gold.png) 20 round;border-width:20px}
/* winged-header frame (module hero) */
.sw-frame.winged{border-image:url(art/kit/frame-winged-head.png) 56 round;border-width:40px 30px 30px}

/* a navy plate WITHOUT a heavy frame — for inner sub-panels (perf-friendly) */
.sw-plate{
  background:var(--tex-navy); background-size:260px;
  border:1px solid #060c16;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.18), inset 0 -10px 22px rgba(0,0,0,.45);
  border-radius:var(--r); padding:12px 14px;
}

/* =========================================================== BANNER ====== */
/* module title bar — carved stone outline + navy fill --------------------- */
.sw-banner{
  position:relative; width:100%; margin:6px 0 16px;
  border:18px solid transparent; border-image:url(art/kit/frame-stone.png) 45 round;
  background:var(--navy) url(art/kit/tex-navy.png); background-size:300px; background-clip:padding-box;
  min-height:48px; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 18px rgba(0,0,0,.5);
}
.sw-banner > b{
  font-family:var(--head-font); font-weight:400; font-size:clamp(14px,2.6vw,22px);
  letter-spacing:3px; color:var(--gold-2); text-shadow:0 1px 0 #000; text-align:center;
}
/* scalable module title bar (any length) */
.sw-titlebar{
  display:flex; align-items:center; gap:12px; margin:4px 0 14px;
  background:var(--navy) url(art/kit/tex-navy.png); background-size:240px; background-clip:padding-box;
  border:16px solid transparent; border-image:url(art/kit/button-stone.png) 14 16 round;
  min-height:54px; padding:0 6px;
}
.sw-titlebar .wing{width:34px;height:34px;flex:0 0 auto;
  background:url(art/kit/emblem-wing.png) center/contain no-repeat}
.sw-titlebar h2{font-family:var(--head-font);font-size:16px;letter-spacing:2px;color:var(--gold-2);
  flex:1;text-align:center;text-shadow:0 1px 0 #000}

/* =========================================================== HEADINGS ==== */
.sw-h{font-family:var(--head-font);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-2);margin:0 0 10px;display:flex;align-items:center;gap:9px;text-shadow:0 1px 0 #000}
.sw-h.lg{font-size:18px;color:var(--gold-3)}
.sw-h .sw-h-rule{flex:1;height:2px;align-self:center;background:linear-gradient(90deg,var(--gold-0),rgba(138,109,47,.15));opacity:.85}
.sw-divider{height:2px;margin:13px 0;background:linear-gradient(90deg,transparent,var(--gold-0) 18%,var(--gold-0) 82%,transparent);opacity:.85}
.muted{color:var(--cream-dim)} .gold{color:var(--gold-2)}
.pos{color:var(--good)} .neg{color:var(--danger)} .mono{font-variant-numeric:tabular-nums}

/* =========================================================== DECK ROW ==== */
.sw-row{
  position:relative; display:flex; align-items:center; gap:12px; min-height:48px;
  padding:8px 14px 8px 16px; margin:5px 0;
  background:var(--tex-navy); background-size:240px;
  border:1px solid #060c16; border-left:4px solid var(--gold-0); border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -3px 10px rgba(0,0,0,.5);
  cursor:pointer; transition:transform .08s, border-color .12s, box-shadow .12s;
}
.sw-row:hover{border-left-color:var(--gold-2);transform:translateX(1px)}
.sw-row:focus-visible{border-left-color:var(--gold-2)}
.sw-row.sel{box-shadow:0 0 0 2px var(--sel), inset 0 -3px 10px rgba(0,0,0,.5);border-left-color:var(--sel)}
.sw-row .num{font-family:var(--head-font);font-size:11px;color:var(--cream-dim);min-width:30px;text-align:right;
  background:var(--ink);padding:5px 6px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(201,162,75,.25)}
.sw-row .grow{flex:1;min-width:0}
.sw-row .title{font-family:var(--head-font);font-size:14px;letter-spacing:.5px;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-row .meta{font-size:13px;color:var(--cream-dim);margin-top:3px}
.sw-row .stat{font-family:var(--head-font);font-size:13px;color:var(--gold-2);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.sw-row .stat.good{color:var(--good)} .sw-row .stat.bad{color:var(--danger)}
.sw-row .glyph{font-size:16px;color:var(--gold-2);width:22px;text-align:center}

/* =========================================================== BUTTONS ===== */
.sw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--head-font);font-size:12px;letter-spacing:1px;text-transform:uppercase;
  color:var(--gold-3); cursor:pointer; user-select:none; min-height:44px; padding:2px 16px;
  background:var(--navy) url(art/kit/tex-navy.png); background-size:170px; background-clip:padding-box;
  border:13px solid transparent; border-image:url(art/kit/button-gold.png) 14 16 round;
  text-shadow:0 1px 0 #000; transition:transform .07s, filter .1s;
}
.sw-btn:hover{filter:brightness(1.08)}
.sw-btn:active{transform:translateY(2px)}
.sw-btn.ghost{border-image:url(art/kit/button-stone.png) 14 16 round;color:var(--cream)}
.sw-btn.ghost.active{border-image:url(art/kit/button-gold.png) 14 16 round;color:var(--gold-3)}
.sw-btn.good{border-image:url(art/kit/button-stone.png) 14 16 round;color:#7fce82}
.sw-btn.danger{border-image:url(art/kit/button-stone.png) 14 16 round;color:#ff9a86}
.sw-btn.sm{min-height:34px;font-size:11px;border-width:11px 13px;padding:0 8px}
.sw-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}

/* =========================================================== CHIPS ======= */
.sw-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--head-font);font-size:12px;
  color:var(--gold-3);background:var(--ink);padding:6px 10px;border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--gold-0),inset 0 2px 5px rgba(0,0,0,.6);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sw-chip .sym{color:var(--gold-1)} .sw-chip .code{color:var(--cream-dim);font-size:10px}
.sw-chip img{width:16px;height:16px}
/* main-currency coin sprite — scales with surrounding text */
.cur-coin{height:1.15em;width:auto;vertical-align:-0.22em;margin-right:.07em;image-rendering:pixelated;flex:0 0 auto}

/* =========================================================== TAGS ======== */
.sw-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--head-font);font-size:10px;
  letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:3px;white-space:nowrap;
  color:var(--cream);background:var(--teal-dim);box-shadow:inset 0 0 0 1px var(--teal)}
.sw-tag.hot{background:#4a1d16;box-shadow:inset 0 0 0 1px var(--danger);color:#ffcdbf}
.sw-tag.gold{background:#3a2e12;box-shadow:inset 0 0 0 1px var(--gold-1);color:var(--gold-3)}
.sw-tag.good{background:#1c3a1e;box-shadow:inset 0 0 0 1px var(--good);color:#bfe8c0}
.sw-tag.warn{background:#4a3614;box-shadow:inset 0 0 0 1px var(--brazier);color:#ffd9b0}
.sw-tag.muted{background:var(--slate-3);box-shadow:inset 0 0 0 1px #2a3c52;color:var(--cream-dim)}
.sw-tag.purple{background:#2e1b46;box-shadow:inset 0 0 0 1px #7a4fd0;color:#d8c4ff}

/* =========================================================== INPUTS ====== */
.sw-input,.sw-sort,textarea.sw-input{width:100%;min-height:42px;padding:9px 12px;
  background:var(--ink);color:var(--cream);border:1px solid var(--gold-0);border-radius:3px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
textarea.sw-input{min-height:90px;resize:vertical;line-height:1.5}
.sw-input::placeholder{color:#5e6b7d}
.sw-input:focus,.sw-sort:focus{border-color:var(--gold-2);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 3px rgba(240,215,122,.2)}
.sw-sort{appearance:none;cursor:pointer;padding-right:30px;width:auto;min-width:170px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-2) 50%),linear-gradient(135deg,var(--gold-2) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;background-color:var(--ink)}
.sw-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.sw-field>label{font-family:var(--head-font);font-size:11px;letter-spacing:.5px;color:var(--gold-2);text-transform:uppercase}
.sw-field .hint{font-size:12px;color:var(--cream-dim)} .sw-field .err{font-size:12px;color:#ff9a86}
.sw-field.invalid .sw-input{border-color:var(--danger);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 2px rgba(194,69,47,.3)}
.sw-stepper{display:inline-flex;align-items:stretch;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--gold-0)}
.sw-stepper button{width:40px;background:linear-gradient(180deg,var(--slate-3),var(--slate-1));color:var(--gold-2);border:none;cursor:pointer;font-family:var(--head-font);font-size:18px}
.sw-stepper button:active{background:var(--ink)}
.sw-stepper input{width:58px;text-align:center;background:var(--ink);border:none;color:var(--cream);font-family:var(--head-font);font-variant-numeric:tabular-nums}

/* =========================================================== TABS ======== */
.sw-tabs{display:flex;gap:3px;margin:2px 0 14px;padding:5px;flex-wrap:wrap;background:var(--ink);
  border-radius:4px;box-shadow:inset 0 0 0 1px var(--gold-0),inset 0 2px 6px rgba(0,0,0,.5)}
.sw-tab{font-family:var(--head-font);font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--cream-dim);background:transparent;border:none;cursor:pointer;padding:9px 14px;border-radius:3px;
  min-height:40px;display:inline-flex;align-items:center;gap:7px;position:relative}
.sw-tab:hover{color:var(--cream)}
.sw-tab.active{color:var(--gold-3);background:var(--tex-navy);background-size:160px;
  box-shadow:inset 0 0 0 1px var(--gold-1),0 2px 0 #000}
.sw-tab.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-3px;height:2px;background:var(--gold-2)}

/* =========================================================== SEARCH ====== */
.sw-search{position:relative;flex:1;min-width:160px}
.sw-search .sw-input{padding-left:34px;padding-right:34px}
.sw-search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--gold-1);pointer-events:none}
.sw-search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;border-radius:50%;cursor:pointer;background:var(--slate-3);color:var(--cream-dim);font-size:13px}
.sw-search .clr:hover{color:var(--cream)}
.sw-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sw-count{font-family:var(--head-font);font-size:11px;letter-spacing:.5px;color:var(--cream-dim)}
.sw-count b{color:var(--gold-2)}
.sw-chiprow{display:flex;gap:7px;flex-wrap:wrap}
@media(max-width:760px){.sw-chiprow{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}.sw-chiprow .sw-btn{flex:0 0 auto}}

/* =========================================================== CARDS ======= */
.sw-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.sw-card{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:4px;overflow:hidden;
  background:var(--tex-navy);background-size:220px;border:1px solid #060c16;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.16),inset 0 -12px 22px rgba(0,0,0,.4),0 5px 12px rgba(0,0,0,.45);
  transition:transform .1s,box-shadow .12s}
.sw-card:hover,.sw-card:focus-visible{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--gold-1),0 9px 18px rgba(0,0,0,.55)}
.sw-card .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.sw-card .ctitle{font-family:var(--head-font);font-size:12px;color:var(--cream);letter-spacing:.3px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.sw-card .cmeta{font-size:12px;color:var(--cream-dim);display:flex;align-items:center;gap:6px}
.sw-card .cprice{font-family:var(--head-font);font-size:15px;color:var(--gold-2);font-variant-numeric:tabular-nums;margin-top:auto}
.sw-card .ctags{display:flex;gap:5px;flex-wrap:wrap}

/* art / thumbnail slot — stone-framed --------------------------------------*/
.sw-art{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;
  background:var(--tex-navy);background-size:140px;
  border:12px solid transparent;border-image:url(art/kit/frame-stone.png) 45 round;
  display:flex;align-items:center;justify-content:center}
.sw-art .glyph{font-size:34px;color:var(--gold-2);opacity:.92;line-height:1}
.sw-art img.icon{width:54%;height:54%;object-fit:contain}
.sw-art .slotlbl{position:absolute;bottom:2px;left:0;right:0;font-size:8px;color:var(--gold-0);text-transform:uppercase;text-align:center;font-family:var(--head-font)}
.sw-art img.fill{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.sw-art.wide{aspect-ratio:16/9}
.sw-card .sw-art{border-width:9px}

/* portrait */
.sw-portrait{width:46px;height:46px;flex:0 0 auto;overflow:hidden;
  background:var(--tex-navy);background-size:90px;
  border:7px solid transparent;border-image:url(art/kit/frame-stone.png) 45 round;
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gold-2)}
.sw-portrait img{width:100%;height:100%;object-fit:cover}
.sw-portrait.lg{width:74px;height:74px}

/* =========================================================== KPI ========= */
.sw-kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sw-kpi{background:var(--tex-navy);background-size:200px;border-radius:4px;padding:12px 14px;
  border:1px solid #060c16;box-shadow:inset 0 0 0 1px rgba(201,162,75,.18),inset 0 -10px 18px rgba(0,0,0,.4);
  display:flex;flex-direction:column;gap:3px}
.sw-kpi .klabel{font-family:var(--head-font);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--cream-dim)}
.sw-kpi .kval{font-family:var(--head-font);font-size:22px;color:var(--gold-2);font-variant-numeric:tabular-nums;line-height:1.15}
.sw-kpi .kdelta{font-size:12px}
.kpos{color:var(--good)} .kneg{color:var(--danger)}

/* =========================================================== METER ======= */
.sw-meter{height:14px;border-radius:8px;background:var(--ink);overflow:hidden;box-shadow:inset 0 0 0 1px var(--gold-0),inset 0 2px 4px rgba(0,0,0,.6)}
.sw-meter>i{display:block;height:100%;border-radius:8px;background:linear-gradient(180deg,var(--gold-3),var(--gold-1) 55%,var(--gold-0));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.sw-meter.danger>i{background:linear-gradient(180deg,#e0735c,var(--danger))}
.sw-meter.good>i{background:linear-gradient(180deg,#7fce82,var(--good))}
.sw-meter.teal>i{background:linear-gradient(180deg,#4fa3a3,var(--teal))}
.sw-meterline{display:flex;align-items:center;gap:9px;margin:5px 0}
.sw-meterline .ml{font-size:12px;color:var(--cream-dim);min-width:84px}
.sw-meterline .sw-meter{flex:1}
.sw-meterline .mv{font-family:var(--head-font);font-size:11px;color:var(--gold-2);min-width:64px;text-align:right;font-variant-numeric:tabular-nums}

/* gauge */
.sw-gauge{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;position:relative;background:var(--ink);box-shadow:inset 0 0 0 1px var(--gold-0)}
.sw-gauge>span{font-family:var(--head-font);font-size:15px;color:var(--gold-2);position:relative;z-index:1}
.sw-gauge .glabel{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--cream-dim)}

/* sparkline */
.sw-spark{display:inline-block;vertical-align:middle;height:20px;width:64px}
.sw-spark polyline{fill:none;stroke:var(--gold-2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.sw-spark.up polyline{stroke:var(--good)} .sw-spark.down polyline{stroke:var(--danger)}

/* =========================================================== BADGE ======= */
.sw-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:var(--danger);color:#fff;font-family:var(--head-font);font-size:10px;box-shadow:0 0 0 1px var(--ink);font-variant-numeric:tabular-nums}
.has-badge{position:relative} .has-badge .sw-badge{position:absolute;top:-6px;right:-6px}
.spr{display:inline-block;background-position:center;background-repeat:no-repeat;background-size:contain;vertical-align:middle}
.spr-lock{background-image:url(art/kit/badge-lock.png)} .spr-q{background-image:url(art/kit/badge-q.png)}
.spr-star{background-image:url(art/kit/badge-star.png)} .spr-star1{background-image:url(art/kit/badge-star1.png)}
.spr-star2{background-image:url(art/kit/badge-star2.png)} .spr-star3{background-image:url(art/kit/badge-star3.png)}
.spr-eye{background-image:url(art/kit/eye-horus.png)} .spr-pyr{background-image:url(art/kit/pyramid-eye.png)}
.spr-wing{background-image:url(art/kit/emblem-wing.png)} .spr-scroll{background-image:url(art/kit/emblem-scroll.png)}

/* =========================================================== CRUMBS ====== */
.sw-crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-family:var(--head-font);font-size:11px;letter-spacing:.5px;color:var(--cream-dim);margin:4px 0 12px}
.sw-crumbs a{color:var(--gold-2);cursor:pointer} .sw-crumbs a:hover{color:var(--gold-3)}
.sw-crumbs .sep{color:var(--gold-0)} .sw-crumbs .cur{color:var(--cream)}
.sw-back{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--head-font);font-size:11px;color:var(--gold-2);background:none;border:none;padding:6px 0;text-transform:uppercase}
.sw-back:hover{color:var(--gold-3)}
/* persistent breadcrumb bar under the sticky header — carved temple rail */
.sw-crumbbar{
  margin:12px 0 18px; min-height:24px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--head-font); font-size:14px; letter-spacing:.7px; color:var(--cream-dim);
  padding:12px 18px 12px 15px;
  background:var(--navy) url(art/kit/tex-navy.png); background-size:260px; background-clip:padding-box;
  border:1px solid #060c16; border-left:5px solid var(--gold-1); border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.2), inset 0 -5px 16px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.35);
}
.sw-crumbbar:empty{display:none}
.sw-crumbbar::before{content:""; width:11px; height:11px; flex:0 0 auto; border-radius:1px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-0));
  box-shadow:0 0 0 3px rgba(201,162,75,.18), inset 0 0 0 1px rgba(0,0,0,.3); transform:rotate(45deg)}
.sw-crumbbar a{color:var(--gold-2); cursor:pointer; text-shadow:0 1px 0 #000; transition:color .12s, text-shadow .12s}
.sw-crumbbar a:hover{color:var(--gold-3); text-shadow:0 0 9px rgba(240,215,122,.45)}
.sw-crumbbar .sep{color:var(--gold-0); font-size:13px; opacity:.85; margin:0 -2px}
.sw-crumbbar .cur{color:var(--gold-3); font-size:15px; letter-spacing:.9px; text-shadow:0 1px 0 #000}
@media(max-width:760px){.sw-crumbbar{font-size:12px; padding:9px 13px; gap:9px} .sw-crumbbar .cur{font-size:13px}}

/* =========================================================== PAGER ======= */
.sw-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0 4px}
.sw-pager .pinfo{font-family:var(--head-font);font-size:11px;color:var(--cream-dim);font-variant-numeric:tabular-nums}

/* =========================================================== MODAL ======= */
.sw-scrim{position:fixed;inset:0;background:rgba(3,7,12,.8);z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
.sw-modal{position:relative;width:min(470px,100%);max-height:90vh;overflow:auto;
  border:30px solid transparent;border-image:url(art/kit/frame-stone.png) 45 round;
  background:var(--tex-navy);background-size:300px;background-clip:padding-box;
  box-shadow:inset 0 0 26px rgba(0,0,0,.6),0 16px 44px rgba(0,0,0,.7);padding:6px 10px 12px}
.sw-modal .mtitle{font-family:var(--head-font);font-size:14px;letter-spacing:1px;color:var(--gold-2);text-transform:uppercase;
  margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.sw-modal .mclose{width:30px;height:30px;border:none;border-radius:3px;cursor:pointer;background:var(--slate-3);color:var(--gold-2);font-size:15px;box-shadow:inset 0 0 0 1px var(--gold-0)}
.sw-modal .mactions{display:flex;gap:9px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
@media(max-width:760px){.sw-scrim{padding:0;align-items:flex-end}.sw-modal{width:100%;max-height:92vh;border-width:24px}}

/* =========================================================== STEPS ======= */
.sw-steps{display:flex;align-items:center;gap:0;margin:4px 0 16px;flex-wrap:wrap}
.sw-steps .step{display:flex;align-items:center;gap:8px;color:var(--cream-dim);font-family:var(--head-font);font-size:11px;letter-spacing:.5px}
.sw-steps .step .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--cream-dim);box-shadow:inset 0 0 0 1px var(--gold-0)}
.sw-steps .step.done .dot,.sw-steps .step.active .dot{background:linear-gradient(180deg,var(--gold-2),var(--gold-0));color:var(--ink)}
.sw-steps .step.active{color:var(--gold-3)}
.sw-steps .bar{width:30px;height:2px;background:var(--gold-0);margin:0 8px;opacity:.6}
.sw-steps .step.done+.bar{background:var(--gold-2);opacity:1}

/* =========================================================== TABLE ======= */
.sw-table{width:100%;border-collapse:collapse;font-size:13px}
.sw-table thead th{font-family:var(--head-font);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-2);text-align:right;padding:8px 10px;border-bottom:2px solid var(--gold-0);background:var(--ink)}
.sw-table thead th:first-child{text-align:left}
.sw-table td{padding:9px 10px;text-align:right;border-bottom:1px solid #102036;font-variant-numeric:tabular-nums}
.sw-table td:first-child{text-align:left;color:var(--cream)}
.sw-table tbody tr:hover{background:rgba(29,49,71,.45)}
.sw-table .pos{color:var(--good)} .sw-table .neg{color:var(--danger)}
@media(max-width:760px){.sw-table thead{display:none}.sw-table,.sw-table tbody,.sw-table tr,.sw-table td{display:block;width:100%}
  .sw-table tr{margin-bottom:8px;border:1px solid #102036;border-radius:3px}
  .sw-table td{display:flex;justify-content:space-between;text-align:right;border-bottom:1px solid #0d1a2b}
  .sw-table td::before{content:attr(data-l);font-family:var(--head-font);font-size:10px;text-transform:uppercase;color:var(--cream-dim)}}

/* =========================================================== FEED ======== */
.sw-feed{display:flex;flex-direction:column}
.sw-feed .ev{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #102036}
.sw-feed .ev .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;margin-top:5px;background:var(--gold-1);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.sw-feed .ev.good .dot{background:var(--good);box-shadow:0 0 0 3px rgba(79,157,82,.2)}
.sw-feed .ev.bad .dot{background:var(--danger);box-shadow:0 0 0 3px rgba(194,69,47,.2)}
.sw-feed .ev .etxt{flex:1}
.sw-feed .ev .ettl{font-size:13px;color:var(--cream)}
.sw-feed .ev .etime{font-size:11px;color:var(--cream-dim);font-family:var(--head-font);margin-top:2px}

/* =========================================================== SKELETON ==== */
@keyframes sw-shimmer{0%{background-position:-180px 0}100%{background-position:240px 0}}
.sw-skel{border-radius:3px;background:linear-gradient(90deg,var(--slate-2) 0%,var(--slate-3) 40%,var(--slate-2) 80%);background-size:300px 100%;animation:sw-shimmer 1.1s linear infinite}
.sw-skel.line{height:12px;margin:6px 0} .sw-skel.title{height:16px;width:60%} .sw-skel.art{aspect-ratio:1/1;width:100%}
.sw-skel-card{background:var(--navy);border:1px solid #060c16;border-radius:4px;overflow:hidden}
.sw-skel-card .body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
@media(prefers-reduced-motion:reduce){.sw-skel{animation:none}}

/* =========================================================== GALLERY ===== */
.sw-gallery{display:flex;flex-direction:column;gap:8px}
.sw-gallery .main{aspect-ratio:4/3}
.sw-gallery .thumbs{display:flex;gap:8px}
.sw-gallery .thumbs .sw-art{width:62px;height:62px;aspect-ratio:1/1;flex:0 0 auto;border-width:6px}
.sw-gallery .thumbs .sw-art.sel{outline:2px solid var(--sel);outline-offset:-2px}

/* =========================================================== EMPTY/ERR === */
.sw-empty{text-align:center;padding:34px 18px;color:var(--cream-dim)}
.sw-empty .eglyph{width:64px;height:64px;margin:0 auto 10px;opacity:.9}
.sw-empty .etitle{font-family:var(--head-font);font-size:14px;color:var(--gold-2);letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase}
.sw-empty p{margin:0 0 14px;font-size:13px}

/* =========================================================== SPEC ======= */
.sw-spec{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px;margin:0}
.sw-spec dt{color:var(--cream-dim);font-family:var(--head-font);font-size:11px;letter-spacing:.3px;text-transform:uppercase;align-self:center}
.sw-spec dd{margin:0;color:var(--cream);text-align:right;font-variant-numeric:tabular-nums}

/* =========================================================== LAYOUT ====== */
.sw-cols{display:grid;grid-template-columns:232px 1fr;gap:18px;align-items:start}
/* two-column variants (were inline grid-template-columns that beat the media query) */
.sw-cols.wide{grid-template-columns:minmax(0,1fr) 280px}     /* main + fixed rail */
.sw-cols.wide-l{grid-template-columns:280px minmax(0,1fr)}   /* fixed rail + main */
.sw-cols.split{grid-template-columns:1fr 1fr}                /* two equal columns */
.sw-cols.detail{grid-template-columns:340px minmax(0,1fr)}   /* listing gallery + body */
@media(max-width:760px){.sw-cols,.sw-cols.wide,.sw-cols.wide-l,.sw-cols.split,.sw-cols.detail{grid-template-columns:1fr}}
.sw-stack{display:flex;flex-direction:column;gap:10px}
.sw-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sw-rowflex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sw-filters{display:flex;flex-direction:column;gap:8px}
.sw-grow{flex:1}

/* =========================================================== HEADER ====== */
.sw-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:13px;padding:8px 14px;margin:0 -14px 8px;
  background:var(--tex-navy);background-size:300px;
  border-bottom:3px solid var(--stone-d);box-shadow:0 2px 0 var(--gold-0),0 6px 16px rgba(0,0,0,.55)}
.sw-header .sw-portrait{cursor:pointer}
.sw-header .who{display:flex;flex-direction:column;gap:1px;min-width:0}
.sw-header .who .nm{font-family:var(--head-font);font-size:12px;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-header .who .pt{font-size:11px;color:var(--cream-dim)}
.sw-header .wallet{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap;align-items:center}
.sw-header .day{font-family:var(--head-font);font-size:11px;color:var(--gold-2);background:var(--ink);padding:7px 10px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--gold-0)}
.sw-bell{position:relative;width:42px;height:42px;border:none;border-radius:3px;cursor:pointer;background:var(--ink);color:var(--gold-2);font-size:17px;box-shadow:inset 0 0 0 1px var(--gold-0)}
@media(max-width:760px){.sw-header .day,.sw-header .wallet .sw-chip:not(:first-child){display:none}}

/* ============================================================ DM / GM ==== */
:root{--dm:#c08be0;--dm-ink:#241430}
.sw-header.dm-on{border-top:3px solid var(--dm);box-shadow:0 2px 0 var(--gold-0),0 6px 16px rgba(0,0,0,.55),inset 0 3px 0 rgba(192,139,224,.25)}
.dm-badge{display:inline-grid;place-items:center;font-family:var(--head-font);font-size:10px;letter-spacing:1px;color:#f0dcff;
  background:var(--dm-ink);padding:5px 8px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--dm),0 1px 0 #000;flex:0 0 auto}
.dm-as{display:inline-flex;align-items:center;flex:0 0 auto}
.dm-as-sel{appearance:none;cursor:pointer;font-family:var(--head-font);font-size:11px;color:#f0dcff;
  background:var(--dm-ink);border:none;border-radius:3px;padding:8px 24px 8px 10px;min-height:34px;max-width:190px;
  box-shadow:inset 0 0 0 1px var(--dm);
  background-image:linear-gradient(45deg,transparent 50%,var(--dm) 50%),linear-gradient(135deg,var(--dm) 50%,transparent 50%);
  background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px;background-repeat:no-repeat}
.dm-as-chip{box-shadow:inset 0 0 0 1px var(--dm),inset 0 2px 5px rgba(0,0,0,.6)!important}
.dm-as-chip .code{color:var(--dm)!important}
.sw-btn.dm-quick{border-image:none;border:1px solid var(--dm);background:var(--dm-ink);color:#f0dcff;border-radius:3px}
.sw-btn.dm-console{border-image:none;border:1px solid var(--dm);background:var(--dm-ink);color:#f0dcff;border-radius:3px;padding:0 12px;font-size:15px}
@media(max-width:900px){.dm-as-sel{max-width:120px}}
@media(max-width:680px){.dm-as{display:none}}
/* DM authored markers + console plate */
.dm-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--head-font);font-size:9px;letter-spacing:.5px;
  text-transform:uppercase;padding:3px 7px;border-radius:3px;color:#f0dcff;background:var(--dm-ink);box-shadow:inset 0 0 0 1px var(--dm)}
.dm-plate{background:var(--dm-ink) url(art/kit/tex-navy.png);background-size:240px;background-blend-mode:overlay;
  border:1px solid #060c16;box-shadow:inset 0 0 0 1px rgba(192,139,224,.3),inset 0 -10px 20px rgba(0,0,0,.45);
  border-radius:var(--r);padding:12px 14px}
.dm-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* hub tiles */
.sw-tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.sw-tile{position:relative;cursor:pointer;text-align:center;padding:18px 14px 14px;border-radius:5px;
  background:var(--tex-navy);background-size:200px;border:1px solid #060c16;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.2),inset 0 -14px 24px rgba(0,0,0,.45),0 6px 14px rgba(0,0,0,.45);
  transition:transform .1s,box-shadow .12s}
.sw-tile:hover,.sw-tile:focus-visible{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--gold-1),0 11px 22px rgba(0,0,0,.6)}
.sw-tile .tglyph{width:50px;height:50px;margin:0 auto 9px;display:grid;place-items:center;font-size:34px;color:var(--gold-2)}
.sw-tile .tglyph img{width:46px;height:46px}
.sw-tile .tname{font-family:var(--head-font);font-size:13px;color:var(--gold-3);letter-spacing:.5px}
.sw-tile .tsub{font-size:12px;color:var(--cream-dim);margin-top:3px;min-height:30px}
.sw-tile .tstat{margin-top:9px;font-family:var(--head-font);font-size:11px;color:var(--gold-2)}

/* =========================================================== TOAST ======= */
#sw-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);z-index:120;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;border:18px solid transparent;border-image:url(art/kit/button-stone.png) 14 16 round;
  background:var(--navy) url(art/kit/tex-navy.png);background-size:200px;background-clip:padding-box;padding:4px 14px;
  font-family:var(--head-font);font-size:12px;color:var(--cream);max-width:90vw;text-align:center}
#sw-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#sw-toast.bad{color:#ffcdbf} #sw-toast.good{color:#bfe8c0}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--ink)}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-1),var(--gold-0));border-radius:5px;border:2px solid var(--ink)}

/* heat banner (black market) */
.sw-heatbar{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:12px;border-radius:3px;
  background:#2a0f0a;box-shadow:inset 0 0 0 1px var(--danger);color:#ffcdbf;font-size:13px}
.sw-heatbar .sw-meter{flex:1;max-width:200px}

/* =========================================================== LOGIN/MENU == */
.sw-login,.sw-menu{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:30px 8px}
.sw-emblem{width:96px;height:96px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.sw-emblem img{width:100%;height:100%;image-rendering:pixelated}
.sw-bigtitle{font-family:var(--head-font);font-weight:400;font-size:clamp(26px,6vw,46px);letter-spacing:5px;color:var(--gold-2);text-shadow:0 3px 0 #000;margin:0;text-align:center}
.sw-bigsub{font-family:var(--head-font);font-size:11px;letter-spacing:3px;color:var(--cream-dim);text-transform:uppercase;text-align:center}
.sw-section{width:100%;max-width:560px;display:flex;flex-direction:column;gap:10px}
.sw-section>.lbl{font-family:var(--head-font);font-size:12px;letter-spacing:1.5px;color:var(--gold-2);text-transform:uppercase}
.seat{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  padding:12px 16px;background:var(--tex-navy);background-size:240px;border:1px solid #060c16;border-left:4px solid var(--gold-0);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -3px 10px rgba(0,0,0,.5);transition:transform .08s,border-color .12s}
.seat:hover{border-left-color:var(--gold-2);transform:translateX(2px)}
.seat .av{width:46px;height:46px;flex:0 0 auto;overflow:hidden;background:var(--tex-navy);background-size:90px;border:6px solid transparent;border-image:url(art/kit/frame-stone.png) 45 round;display:grid;place-items:center;color:var(--gold-2);font-size:20px}
.seat .av img{width:100%;height:100%;object-fit:cover}
.seat .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.seat .nm{font-family:var(--head-font);font-size:15px;color:var(--cream);letter-spacing:.5px}
.seat .rl{font-size:12px;color:var(--cream-dim);margin-top:2px}
.seat .go{font-family:var(--head-font);font-size:11px;color:var(--gold-2);letter-spacing:1px}
.seat.gm{border-left-color:var(--dm);background:var(--dm-ink)}
.seat.gm:hover{border-left-color:#f0dcff}
.seat.gm .av{border-image:none;border:2px solid var(--dm);background:#160b1f}
.seat.gm .nm{color:#f0dcff} .seat.gm .go{color:var(--dm)}
/* main-menu cards */
.sw-menucards{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;max-width:680px}
@media(max-width:620px){.sw-menucards{grid-template-columns:1fr}}
.menu-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;cursor:pointer;
  padding:30px 22px 24px;min-height:230px;justify-content:center;
  background:var(--navy) url(art/kit/tex-navy.png);background-size:280px;background-clip:padding-box;
  border:26px solid transparent;border-image:url(art/kit/frame-stone.png) 45 round;
  box-shadow:inset 0 0 22px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.5);transition:transform .12s,box-shadow .14s,filter .14s}
.menu-card.live{border-image:url(art/kit/frame-gold.png) 20 round;border-width:22px}
.menu-card.live:hover{transform:translateY(-4px);box-shadow:inset 0 0 22px rgba(0,0,0,.5),0 14px 30px rgba(0,0,0,.6)}
.menu-card.soon{cursor:default;filter:grayscale(.45) brightness(.82)}
.menu-card .mc-ic{width:64px;height:64px;display:grid;place-items:center;margin-bottom:2px}
.menu-card .mc-ic img{width:58px;height:58px;image-rendering:pixelated}
.menu-card .mc-name{font-family:var(--head-font);font-size:18px;letter-spacing:1.5px;color:var(--gold-3);text-shadow:0 2px 0 #000}
.menu-card .mc-sub{font-size:13px;color:var(--cream-dim);line-height:1.4;max-width:200px}
.menu-card .mc-go{margin-top:8px;font-family:var(--head-font);font-size:11px;letter-spacing:1.5px;color:var(--gold-2)}
.menu-card.soon .mc-go{color:var(--cream-dim)}
.menu-card .mc-badge{position:absolute;top:-12px;right:-12px}
.sw-pin{font-family:var(--head-font);font-size:28px;letter-spacing:14px;text-align:center;color:var(--gold-2)}
