/* Community Hub theme mock game window (docs/plans/2026-09-22-community-hub.md, "Website":
   theme mock game window). Hand-written. Consumes the --sota-* tokens the way SotATheme.uss
   does; the per-theme values arrive as .thm-<id> rules from /preview.css, the per-preset art
   geometry from mock-gen.css (generated). Markup: templates/_macros/mock.html.

   Structure:  .stage (scene) > .gw-root.thm-<id>.pre-N[.pat-P][.edge-E] > .gw > layers + content
   The theme classes sit on .gw-root because every generated rule is a descendant selector
   (".thm-x .gw", ".pre-N .gw-btn", ".pat-P .gw-pattern"). The page sliders write --win-a and
   --pi on .gw-root through CSSOM (preview.js); nothing here is inline. */

:root{
  --mf-attractive:"Attractive","Trebuchet MS","Segoe UI",Tahoma,sans-serif;
  --mf-vinque:"Vinque","Palatino Linotype","Book Antiqua",Georgia,serif;
  --mf-leelawadee:"Leelawadee UI","Leelawadee","Segoe UI",system-ui,sans-serif;
  --mf-cinzel:"Cinzel",serif;
  --mf-grenze:"Grenze Gotisch",serif;
}

/* ---------- stage and scenes ---------- */
.stage{
  /* defaults for a theme whose preview.css rule has not arrived (or was omitted) */
  --win-a:.3; --pi:.2; --pt-a:1; --pat-scale:256px; --frame-inset:4px; --edge-ink:0; --edge-scale:1;
  --fx-a:0; --fx-b:0; --amb:0ms; --mf-body:var(--mf-attractive); --mf-title:var(--mf-vinque);
  --sota-panel-backing-rgb:26 22 18; --sota-inset-backing-rgb:16 13 10; --sota-field-backing-rgb:32 26 20;
  --sota-pattern-tint-rgb:255 255 255;
  position:relative;container-type:inline-size;border-radius:var(--radius,6px);overflow:hidden;
  padding:clamp(14px,4cqi,36px);min-height:320px;display:flex;justify-content:center;align-items:flex-start;
  background-color:#2b3a24;isolation:isolate;
}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
/* Painted backdrops (static/img/scene-*.webp, generated for the hub: no people, no text). The
   colour under each image is its average, shown while it loads. */
.scene-meadow{background:#7e8a4e url("/static/img/scene-meadow.webp") center 60%/cover no-repeat}
.scene-town{background:#8a7650 url("/static/img/scene-town.webp") center 55%/cover no-repeat}
.scene-crypt{background:#3a3040 url("/static/img/scene-crypt.webp") center/cover no-repeat}
.scene-meadow::before,.scene-town::before,.scene-crypt::before{background:linear-gradient(180deg,#0000 40%,#0003 100%)}
.scene-night{background:
  radial-gradient(40% 30% at 80% 12%,#c8d4ff22 0,transparent 70%),
  linear-gradient(180deg,#0e1424 0,#18223a 45%,#1d2a22 70%,#111a14 100%)}
.scene-night::before{background:
  radial-gradient(1px 1px at 12% 14%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 32% 8%,#fff7 50%,transparent 51%),
  radial-gradient(1px 1px at 58% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 74% 6%,#fff6 50%,transparent 51%),
  radial-gradient(1px 1px at 90% 22%,#fff7 50%,transparent 51%)}

.gw-root{width:100%;display:flex;justify-content:center;color:var(--sota-text,#bfbfbf);font-family:var(--mf-body)}

/* ---------- the window ---------- */
.gw{position:relative;isolation:isolate;width:min(100%,540px);font-size:14px;line-height:1.35;
  color:var(--sota-text,#bfbfbf);font-family:var(--mf-body);
  background-color:rgb(var(--sota-panel-backing-rgb) / max(.1,var(--win-a)));
  border:1px solid var(--sota-chrome-tint,#8a7a5a);
  padding:calc(var(--frame-inset) + 8px) calc(var(--frame-inset) + 10px);text-align:left;overflow:hidden}
.gw.gw-under{min-height:330px}
.gw-layer,.gw-pattern,.gw-bgimg,.gw-fx,.gw-edge{position:absolute;inset:0;pointer-events:none}
.gw-pattern{z-index:0;background-color:rgb(var(--sota-pattern-tint-rgb));
  opacity:calc(var(--pt-a) * min(1,var(--pi) * var(--win-a)))}
.no-pat .gw-pattern{display:none}
.gw-bgimg{z-index:0;display:none;background-color:rgb(var(--sota-pattern-tint-rgb));background-blend-mode:multiply;
  background-repeat:repeat;background-size:var(--pat-scale) auto;background-position:0 0;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:var(--pat-scale) auto;mask-size:var(--pat-scale) auto;
  -webkit-mask-position:0 0;mask-position:0 0;
  opacity:calc(var(--pt-a) * min(1,var(--pi) * var(--win-a)))}
.has-img .gw-bgimg{display:block}
.has-img .gw-pattern{display:none}
.gw-fx{z-index:0;background:radial-gradient(120% 70% at 50% 0%,var(--sota-fx-color,#fff) 0,transparent 70%);
  opacity:var(--fx-a);animation:gw-amb var(--amb) ease-in-out infinite alternate}
.still .gw-fx{animation:none;opacity:var(--fx-a)}
@keyframes gw-amb{from{opacity:var(--fx-a)}to{opacity:var(--fx-b)}}
.gw-edge{z-index:3;display:none;inset:-2px}
.pre-1 .gw-edge,.pre-2 .gw-edge,.pre-3 .gw-edge,.pre-4 .gw-edge,.pre-5 .gw-edge,.pre-6 .gw-edge,
.edge-1 .gw-edge,.edge-2 .gw-edge,.edge-3 .gw-edge{display:block;border-width:0}
.edge-0 .gw-edge{display:none}
.gw>*:not(.gw-pattern):not(.gw-bgimg):not(.gw-fx):not(.gw-edge):not(.gw-dim):not(.gw-grip){position:relative;z-index:1}

/* titlebar */
.gw-titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;
  padding:2px 4px 6px calc(10px + var(--edge-ink) * 1px);margin:0 0 6px}
.gw-title{color:var(--sota-title-color);font-family:var(--mf-title);font-size:18px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-cluster{display:inline-flex;gap:3px;flex:0 0 auto}
.gw-cluster .ic{width:20px;height:20px;border-radius:3px;background:var(--sota-titlebar-plate);color:var(--sota-widget-tint);
  display:inline-flex;align-items:center;justify-content:center}
.gw-cluster svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* tabs */
.gw-tabs{display:flex;gap:4px;margin:0 var(--frame-inset) 8px;padding-bottom:4px;border-bottom:1px solid var(--sota-rule);flex-wrap:wrap}
.gw-tab{padding:3px 12px;color:var(--sota-button-label);font-size:13px;border:1px solid var(--sota-chrome-tint);border-radius:2px}
.gw-tab.sel{background:var(--sota-selection-backing);color:var(--sota-text-bright)}

/* section header + text */
.gw-h{color:var(--sota-title-color);font-family:var(--mf-title);font-size:15px;border-bottom:1px solid var(--sota-section-rule);
  padding-bottom:2px;margin:8px 0 6px}
.gw p{margin:3px 0}
.t-text{color:var(--sota-text)}
.t-bright{color:var(--sota-text-bright)}
.t-dim{color:var(--sota-text-dim)}
.t-link{color:var(--sota-link);text-decoration:underline;text-underline-offset:2px}
.t-hover{color:var(--sota-text-hover)}
.t-good{color:var(--sota-state-good)}
.t-warn{color:var(--sota-state-warn)}
.t-bad{color:var(--sota-state-bad)}
.gw-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
@container (max-width:430px){.gw-cols{grid-template-columns:minmax(0,1fr)}}

/* insets, fields, controls */
.gw-inset{background-color:rgb(var(--sota-inset-backing-rgb) / max(.1,var(--win-a)));border:1px solid var(--sota-chrome-tint);padding:6px 8px;margin:6px 0}
.gw-field{background-color:rgb(var(--sota-field-backing-rgb) / max(.1,var(--win-a)));border:1px solid var(--sota-chrome-tint);
  padding:4px 8px;margin:6px 0;min-height:26px;display:flex;align-items:center;gap:1px}
.gw-field.focus{box-shadow:0 0 0 2px var(--sota-focus-tint),0 0 8px var(--sota-focus-tint)}
.gw-field .ph{color:var(--sota-text-dim);font-style:italic}
.gw-caret{display:inline-block;width:1px;height:1.1em;background:var(--sota-cursor-color);margin-left:1px}
.gw-check{display:flex;align-items:center;gap:6px;margin:5px 0}
.gw-check svg{width:14px;height:14px;color:var(--sota-widget-tint);fill:none;stroke:currentColor;stroke-width:1.6}
.gw-progress{position:relative;height:14px;border:1px solid var(--sota-chrome-tint);background-color:rgb(var(--sota-field-backing-rgb) / max(.1,var(--win-a)));margin:6px 0;overflow:hidden}
.gw-progress>i{position:absolute;left:0;top:0;bottom:0;background:var(--sota-progress-tint)}
.gw-btns{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.gw-btn{display:inline-flex;align-items:center;justify-content:center;min-width:76px;min-height:26px;padding:3px 12px;
  color:var(--sota-button-label);border:1px solid var(--sota-chrome-tint);font-size:13px;white-space:nowrap}
.gw-btn.hover{color:var(--sota-button-label-hover);background-color:var(--sota-hover-backing)}
.gw-btn.pressed{color:var(--sota-button-label-active);border-color:var(--sota-chrome-tint-active)}
.gw-btn.disabled{color:var(--sota-text-dim);border-color:var(--sota-chrome-tint-disabled)}
.gw-btn.used{color:var(--sota-button-label-used)}
.gw-btn.focusring{outline:2px solid var(--sota-focus-ring);outline-offset:2px}
.gw-pill{display:inline-block;padding:1px 8px;border-radius:9px;font-size:12px;color:var(--sota-text-bright);margin:2px 3px 2px 0}
.pill-good{background:var(--sota-state-good-tint)}
.pill-good.hover{background:var(--sota-state-good-tint-hover)}
.pill-warn{background:var(--sota-state-warn-tint)}
.pill-off{background:var(--sota-state-off-tint)}
.pill-off.hover{background:var(--sota-state-off-tint-hover)}
.gw-active{background:var(--sota-active-backing);padding:3px 8px;margin:6px 0}
.gw-outline{border:1px solid var(--sota-outline);padding:4px 8px;margin:6px 0}
.gw-grip{position:absolute;right:3px;bottom:3px;width:14px;height:14px;background:
  linear-gradient(135deg,transparent 0 45%,var(--sota-grip-color) 45% 52%,transparent 52% 64%,var(--sota-grip-color) 64% 71%,transparent 71% 83%,var(--sota-grip-color) 83% 90%,transparent 90%),
  var(--sota-grip-plate);z-index:2}
.gw-slider{position:relative;height:16px;margin:6px 0}
.gw-slider::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--sota-widget-tint)}
.gw-slider>i{position:absolute;top:2px;width:10px;height:12px;border-radius:2px;background:var(--sota-widget-tint);left:60%}

/* list */
.gw-list{width:100%;border-collapse:collapse;font-size:13px}
.gw-list th{text-align:left;font-weight:400;color:var(--sota-text-dim);padding:3px 6px;border-bottom:1px solid var(--sota-rule)}
.gw-list th.sorted{color:var(--sota-text-bright);font-weight:700}
.gw-list td{padding:4px 6px;color:var(--sota-text)}
.gw-list td.state{color:var(--sota-text-dim);font-size:11px;text-align:right;white-space:nowrap}
.gw-list tr.new td{background:var(--sota-list-new-backing)}
.gw-list tr.hover td{background:var(--sota-list-hover-backing);color:var(--sota-text-hover)}
.gw-list tr.sel td{background:var(--sota-selection-row-backing);color:var(--sota-text-bright)}
.gw-list tr.selhover td{background:var(--sota-selection-row-backing-hover);color:var(--sota-text-bright)}
.gw-listwrap{display:grid;grid-template-columns:minmax(0,1fr) 10px;gap:4px}
.gw-scroll{position:relative;border:1px solid var(--sota-chrome-tint);background-color:rgb(var(--sota-field-backing-rgb) / max(.1,var(--win-a)))}
.gw-scroll>i{position:absolute;left:1px;right:1px;top:14%;height:34%;background:var(--sota-chrome-tint)}
.gw-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 0}
.gw-card{background-color:rgb(var(--sota-inset-backing-rgb) / max(.1,var(--win-a)));border:1px solid var(--sota-chrome-tint);padding:6px;font-size:12px;min-height:44px}
.gw-card.hover{background:var(--sota-hover-backing)}
.gw-card.sel{background:var(--sota-selection-backing);color:var(--sota-text-bright)}

/* popup view */
.gw-dim{position:absolute;inset:0;background:var(--sota-dim-backing);z-index:4}
.gw-over{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:repeat(2,minmax(0,230px));gap:14px 18px;
  align-items:start;justify-content:center;align-content:start;padding:clamp(56px,12cqi,84px) clamp(14px,4cqi,36px) 14px}
.gw-over>*{box-shadow:0 6px 18px #0008}
.gw-over .gw-toast{justify-self:start;grid-column:1}
.gw-over .gw-book{grid-column:2;grid-row:2 / span 2}
@container (max-width:430px){.gw-over{grid-template-columns:minmax(0,230px)}.gw-over .gw-book,.gw-over .gw-toast{display:none}}
.gw-popup{background:var(--sota-popup-backing);border:1px solid var(--sota-popup-border);min-width:170px;padding:4px;font-size:13px;color:var(--sota-text);font-family:var(--mf-body)}
.gw-popup .pt{color:var(--sota-title-color);font-weight:700;padding:3px 8px}
.gw-popup .it{padding:3px 8px}
.gw-popup .it.hover{background:var(--sota-hover-backing)}
.gw-popup .it.pressed{background:var(--sota-selection-backing)}
.gw-popup .it.disabled{color:var(--sota-text-dim)}
.gw-popup hr{border:0;border-top:1px solid var(--sota-rule);margin:3px 4px}
.gw-tip{background:var(--sota-popup-backing);border:1px solid var(--sota-popup-border);padding:6px 10px;max-width:220px;font-size:12px}
.gw-tip .nm{color:var(--sota-text-bright);font-weight:700;font-size:13px}
.gw-tip .ty{color:var(--sota-text-dim)}
.gw-toast{background:var(--sota-dim-backing);border:1px solid #c9a55a;padding:6px 12px;font-size:12px;color:var(--sota-text)}
.gw-book{background:var(--sota-page-backing);color:var(--sota-page-ink);padding:10px 14px;max-width:220px;font-size:12px;font-family:var(--mf-title)}
.gw-book .rubric{color:#7a201a;font-size:20px;float:left;line-height:.9;margin:2px 4px 0 0}

/* nameplates view */
.np-field{position:relative;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px;padding:6px 0;font-family:var(--mf-body)}
@container (max-width:560px){.np-field{grid-template-columns:repeat(2,minmax(0,1fr))}}
.np{text-align:center;font-size:14px;line-height:1.25;
  text-shadow:1px 0 0 var(--sota-nameplate-halo),-1px 0 0 var(--sota-nameplate-halo),0 1px 0 var(--sota-nameplate-halo),0 -1px 0 var(--sota-nameplate-halo),
    1px 1px 0 var(--sota-nameplate-halo),-1px -1px 0 var(--sota-nameplate-halo),1px -1px 0 var(--sota-nameplate-halo),-1px 1px 0 var(--sota-nameplate-halo)}
.np .ttl{display:block;font-size:11px}
.np .star{font-size:12px;margin-right:2px}
.np-bars{display:flex;flex-direction:column;gap:2px;width:96px;margin:5px auto 0}
.np-bar{position:relative;height:5px;background:#0008;overflow:hidden}
.np-bar>i,.np-bar>b{position:absolute;top:0;bottom:0;left:0;display:block}
.np-bar.h>i{background:var(--sota-nameplate-health)}
.np-bar.h>b{background:var(--sota-nameplate-health-delta)}
.np-bar.f>i{background:var(--sota-nameplate-focus)}
.np-bar.f>b{background:var(--sota-nameplate-focus-gain)}
.np-bar.fl>b{background:var(--sota-nameplate-focus-loss)}
.np-bar.v>i{background:var(--sota-nameplate-vigor)}
.np-bar.v>b{background:var(--sota-nameplate-vigor-delta)}
.np-bar>b.w-8{left:62%}
.np-bar>b.w-12{left:48%}
.np-bar>b.w-10{left:70%}
.n-player{color:var(--sota-nameplate-player)}.n-party{color:var(--sota-nameplate-party)}.n-guild{color:var(--sota-nameplate-guild)}
.n-admin{color:var(--sota-nameplate-admin)}.n-pvp{color:var(--sota-nameplate-pvp)}.n-friendly{color:var(--sota-nameplate-friendly)}
.n-neutral{color:var(--sota-nameplate-neutral)}.n-h1{color:var(--sota-nameplate-hostile-1)}.n-h2{color:var(--sota-nameplate-hostile-2)}
.n-h3{color:var(--sota-nameplate-hostile-3)}.n-h4{color:var(--sota-nameplate-hostile-4)}.n-corpse{color:var(--sota-nameplate-corpse)}
.n-royal{color:var(--sota-nameplate-title-royal)}.n-hosp{color:var(--sota-nameplate-title-hospitaller)}.n-outl{color:var(--sota-nameplate-title-outlander)}
.n-pstar{color:var(--sota-nameplate-party-leader)}.n-gstar{color:var(--sota-nameplate-guild-leader)}
.np-water{grid-column:1/-1;height:46px;margin-top:6px;border-radius:50%/40%;background:radial-gradient(60% 60% at 50% 50%,#2c4a6a 0,#1a2c40 70%,transparent 72%);
  position:relative}
.np-bobber{position:absolute;left:50%;top:40%;width:9px;height:9px;border-radius:50%;background:var(--sota-fishing-bobber);box-shadow:0 0 0 2px #0005}

/* ---------- mini (grid card thumbnails: colours only, no art) ---------- */
.stage.mini-stage{min-height:0;padding:10px;border-radius:5px 5px 0 0}
.gw.gw--mini{font-size:11px;width:100%;padding:5px 6px}
.gw--mini .gw-titlebar{min-height:0;padding:0 0 3px 2px;margin:0 0 3px;border-bottom:1px solid var(--sota-rule)}
.gw--mini .gw-title{font-size:13px}
.gw--mini .mrow{padding:2px 4px;color:var(--sota-text)}
.gw--mini .mrow.hover{background:var(--sota-list-hover-backing);color:var(--sota-text-hover)}
.gw--mini .mrow.sel{background:var(--sota-selection-row-backing);color:var(--sota-text-bright)}
.gw--mini .gw-btn{min-width:0;min-height:0;padding:1px 8px;font-size:11px;margin-top:4px}

/* ---------- responsive zoom (container queries on the stage) ---------- */
@container (max-width:560px){.gw:not(.gw--mini){zoom:.86}}
@container (max-width:430px){.gw:not(.gw--mini){zoom:.74}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){.gw-fx{animation:none}}