/* Stuffer Shack Tools: same look as the Stuffer Shack site (warm dark ground, blue lines, cut corners, mono labels).
   Tokens copied from the site theme so the two stay matched. */
:root{
  --ground:#1a0a06; --panel:#1f0f0c; --panel-deep:#170d10; --field:rgba(10,6,12,.6);
  --ink:#f8f4fb; --ink-dim:#d6cde0; --ink-faint:#bdb1bf;
  --blue:#3b52f0; --blue-bright:#7d92ff; --blue-line:rgba(120,140,255,.45); --pop:rgba(125,146,255,.85);
  --violet:#a88bff; --ember:#ff9a3c; --mint:#59f0c4; --danger:#ff6b6b;
  --nt-line:#5b4fd6; --nt-tab:#1c1238; --nt-on:#2e236f; --nt-gray:#a89fb3;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);background-image:linear-gradient(rgba(125,146,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(125,146,255,.05) 1px,transparent 1px);background-size:28px 28px;color:var(--ink);font:16px/1.55 var(--sans);-webkit-text-size-adjust:100%}
a{color:var(--blue-bright)}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}

/* cut-corner panels: diagonal accent lines on the top-right and bottom-left corners, like the site */
.cut{position:relative;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.cut::before,.cut::after{content:"";position:absolute;width:15px;height:15px;pointer-events:none;z-index:3;background:linear-gradient(to bottom left,transparent calc(50% - 1.5px),var(--blue-bright) calc(50% - 1.5px),var(--blue-bright) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.cut::before{top:0;right:0}
.cut::after{bottom:0;left:0}

/* tools bar under the header (search, view as, welcome, help, log in) */
.search{flex:1;max-width:420px}
.search input{width:100%;padding:8px 12px;border-radius:3px;border:1px solid rgba(125,146,255,.4);background:rgba(10,14,40,.6);color:var(--ink);font:inherit}
.viewas{display:flex;align-items:center;border:1px solid var(--blue-line);border-radius:3px;overflow:hidden}
.viewas-label{padding:0 8px;color:var(--ink-faint);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.viewas button{border:0;background:transparent;padding:6px 12px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.viewas button[aria-pressed="true"]{background:var(--blue);color:#fff;font-weight:700}
.link-btn{background:none;border:0;color:var(--blue-bright);padding:6px 4px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.link-btn::before{content:"> ";color:var(--violet)}
.link-btn:hover{color:var(--ink)}

/* buttons: solid blue for the main action, outlined for the rest (same two styles as the site) */
.btn{background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:3px;padding:8px 16px;min-height:40px;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.btn:hover{background:#4d63ff}
.btn.ghost{background:transparent;color:var(--blue-bright);border-color:var(--pop)}
.btn.ghost:hover{background:rgba(59,82,240,.18);color:var(--ink)}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.small{padding:4px 11px;min-height:34px;font-size:11px}

/* shell */
.side{position:relative;z-index:5;flex:none}
.campaign{padding:14px 18px 6px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);border-top:1px solid var(--blue-line);margin-top:6px}
.campaign::before{content:"// ";color:var(--violet)}
.campaign b{display:block;margin-top:2px;color:var(--ink);font:700 16px var(--sans);letter-spacing:0;text-transform:none}
.grp{padding:16px 18px 4px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.nav{display:flex;align-items:center;gap:8px;width:calc(100% - 16px);margin:1px 8px;padding:9px 10px;background:transparent;border:0;border-radius:3px;text-align:left;font:500 13px var(--mono);letter-spacing:.04em;color:var(--blue-bright)}
.nav::before{content:">";color:var(--violet)}
.nav .ic{display:none}
.nav:hover{background:rgba(59,82,240,.18);color:var(--ink)}
.nav.on{background:rgba(59,82,240,.3);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--blue-bright)}
.nav .badge{margin-left:auto;font-size:12px;color:var(--ink-faint)}

/* main */
.main{min-width:0;padding:0 0 90px}
.pagehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 24px;border-bottom:1px solid var(--blue-line)}
.pagehead h1{margin:0;font:700 26px/1.2 var(--sans)}
.pagehead .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.content{padding:20px 24px;display:grid;gap:18px}
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:18px;align-items:start}
.card{background:var(--panel);border:1px solid var(--blue-line);border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));position:relative}
.card::before,.card::after{content:"";position:absolute;width:15px;height:15px;pointer-events:none;z-index:3;background:linear-gradient(to bottom left,transparent calc(50% - 1.5px),var(--blue-bright) calc(50% - 1.5px),var(--blue-bright) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.card::before{top:0;right:0}
.card::after{bottom:0;left:0}
.card>h2{margin:0;padding:11px 18px;font:500 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;background:rgba(59,82,240,.14);border-bottom:1px solid rgba(120,140,255,.25)}
.card>h2::before{content:"// ";color:var(--violet)}
.card .body{padding:14px 18px}
.muted{color:var(--ink-faint)}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:7px 0;border-bottom:1px dashed rgba(120,140,255,.25)}
ul.plain li:last-child{border:0}
.pill{display:inline-block;font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;border:1px solid rgba(189,177,191,.5);border-radius:3px;padding:0 6px;color:var(--ink-faint);margin-right:4px}
.pill.hid{border-color:rgba(255,154,60,.6);color:var(--ember)}
.pill.con{border-color:var(--blue-line);color:var(--blue-bright)}
.gmbox{background:rgba(10,6,12,.8);border:1px dashed var(--ink-faint);border-radius:3px;padding:10px 14px;margin-top:10px}
.gmbox b{display:block;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ember)}
.welcome{border-color:var(--blue-bright)}
.welcome>h2{background:var(--blue);color:#fff;font:700 18px var(--sans);letter-spacing:.02em;text-transform:none}
.welcome>h2::before{content:""}
.welcome .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.banner{background:rgba(59,82,240,.08);border:1px solid var(--blue-line);border-radius:3px;padding:9px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:#d5dbff;font-size:15px}
.banner span{flex:1;min-width:200px}
dl.qi{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
dl.qi dt{color:var(--ink-faint);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
dl.qi dd{margin:0}

/* NPC browser */
.browser{display:grid;grid-template-columns:230px minmax(0,1fr);background:var(--panel);border:1px solid var(--blue-line);position:relative;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.browser::before,.browser::after{content:"";position:absolute;width:15px;height:15px;pointer-events:none;z-index:3;background:linear-gradient(to bottom left,transparent calc(50% - 1.5px),var(--blue-bright) calc(50% - 1.5px),var(--blue-bright) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.browser::before{top:0;right:0}
.browser::after{bottom:0;left:0}
.folders{background:var(--panel-deep);border-right:1px solid var(--blue-line);padding:10px}
.folders .seg{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.seg button{background:transparent;border:1px solid var(--pop);border-radius:3px;padding:4px 9px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright)}
.seg button[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:700}
.folder{display:flex;justify-content:space-between;width:100%;background:transparent;border:0;border-radius:3px;padding:9px 10px;text-align:left;font:500 13px var(--mono);letter-spacing:.03em;color:var(--blue-bright)}
.folder:hover{background:rgba(59,82,240,.18);color:var(--ink)}
.folder.on{background:rgba(59,82,240,.3);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--blue-bright)}
.folder span:last-child{color:var(--ink-faint)}
.results{padding:14px}
.viewbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.npc{background:var(--field);border:1px solid var(--blue-line);border-left:3px solid var(--blue);border-radius:3px;padding:12px;text-align:center}
.npc .face{font-size:52px;line-height:1;background:rgba(10,6,12,.8);border-radius:3px;width:92px;height:92px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border:1px solid var(--blue-line)}
.npc h3{margin:2px 0;font:600 16px var(--sans)}
.npc .sub{color:var(--ink-dim);font-size:14px;min-height:21px}
.npc .tags{margin:6px 0;min-height:24px}
.npc.hidden{border-style:dashed;border-color:rgba(255,154,60,.6);border-left:3px solid var(--ember)}
.compact .npc{display:flex;text-align:left;gap:12px;align-items:center;padding:8px 12px;margin-bottom:8px}
.compact .npc .face{width:44px;height:44px;font-size:26px;margin:0;flex:none}
.compact .npc .grow{flex:1;min-width:0}
table.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(120,140,255,.25);vertical-align:top}
.tbl th{color:var(--ink-faint);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.tbl tr:hover td{background:rgba(59,82,240,.12)}
.tbl .face{font-size:22px;margin-right:6px}

/* missions, maps */
.pinned{border-color:var(--blue-bright)}
.goal{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.goal input{width:20px;height:20px;margin-top:3px;accent-color:var(--blue)}
.goal.done span{text-decoration:line-through;color:var(--ink-faint)}
.mapthumb{height:120px;border-radius:3px;border:1px solid var(--blue-line);background:repeating-linear-gradient(45deg,#1f0f0c,#1f0f0c 12px,#2a1511 12px,#2a1511 24px);display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}

.strip{position:fixed;left:0;right:0;bottom:0;z-index:15;background:rgba(18,7,4,.97);border-top:1px solid var(--blue-line);padding:8px 16px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font:400 12.5px var(--mono);letter-spacing:.03em;color:var(--ink-faint)}
.strip::before{content:"// ";color:var(--violet)}

/* dialog */
.scrim{position:fixed;inset:0;background:rgba(5,2,4,.78);z-index:30}
dialog{z-index:40;background:var(--panel);color:var(--ink);border:1px solid var(--pop);border-radius:0;padding:0;width:min(560px,94vw);max-height:90vh;overflow:auto;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
dialog::backdrop{background:rgba(5,2,4,.78)}
dialog form,dialog .dbody{padding:18px 20px}
dialog h2{margin:0 0 10px;font:700 20px var(--sans)}
label.f{display:block;margin:12px 0 3px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
input.t,textarea.t,select.t{width:100%;padding:9px 10px;border-radius:3px;border:1px solid rgba(125,146,255,.4);background:rgba(10,14,40,.6);color:var(--ink);font:16px var(--sans)}
textarea.t{min-height:90px}
.chk{display:flex;gap:8px;align-items:center;margin-top:12px}
.chk input{width:18px;height:18px;accent-color:var(--blue)}
.faces{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.faces button{font-size:24px;background:rgba(10,6,12,.8);border:1px solid var(--blue-line);border-radius:3px;padding:2px 6px}
.faces button[aria-pressed="true"]{border-color:var(--blue-bright);background:rgba(59,82,240,.35)}
.dfoot{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.dfoot .sp{flex:1}
.close-menu{display:none;margin:0 12px 10px}

/* tablet and phone */
@media (max-width:1000px){
  .cols{grid-template-columns:1fr}
  .browser{grid-template-columns:1fr}
  .folders{border-right:0;border-bottom:1px solid var(--blue-line)}
}
@media (max-width:860px){
  .close-menu{display:inline-block}
  .search{max-width:none;order:5;flex-basis:100%}
  .toolbar{flex-wrap:wrap}
  .viewas-label{display:none}
  .side{position:fixed;top:0;left:0;bottom:0;z-index:35;width:min(290px,84vw);background:#120704;transform:translateX(-102%);transition:transform .2s;overflow:auto}
  .side.open{transform:none}
  .pagehead,.content{padding-left:14px;padding-right:14px}
  .pagehead .actions{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

/* ===== Page frame (Oct 22, second pass) =====
   Full screen. A 45px black bar. Under it the gray column runs the full height down the left, with the four tabs on top of it.
   Tabs: 179px wide, 30px from the left, 57px from the top (bar 45 + 12). The front page must use the same spots. */
:root{--bar:45px;--tabtop:11px;--col:#050203;--colw:186px;--tabw:179px;--tabx:15px;--soft:#a99bdc;--menu:#b7c4ff}
body{padding:0}

/* black bar: logo on the left (lined up with the tabs), links on the right */
.bar{position:relative;display:flex;align-items:center;gap:14px;height:var(--bar);padding:0 16px 0 calc(var(--colw) + 20px);background:#050203}
.bar-logo{display:block;line-height:0;flex:0 1 280px;min-width:0}
.bar-logo img{display:block;height:auto;width:auto;max-height:26px;max-width:100%;mix-blend-mode:lighten}
.bar-links{margin-left:auto;flex:none;display:flex;align-items:center;gap:2px}
.bar-link{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:6px 10px;min-height:36px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-bright)}
.bar-link:hover{color:var(--ink)}
.bar-link svg{width:18px;height:18px;flex:none}

/* page: gray column (with the tabs on top of it) and the content, edge to edge */
.layout{display:grid;grid-template-columns:var(--colw) minmax(0,1fr);min-height:calc(100vh - var(--bar))}
.left{position:relative;z-index:20;display:flex;flex-direction:column;min-width:0;margin-top:calc(var(--bar) * -1);padding-top:var(--tabtop);background:var(--col)}
.right{min-width:0;padding-top:var(--tabtop)}

/* wide screens: small logo centered in the bar; the tabs sit up top, over the bar's left end */
@media (min-width:1100px){
  .bar{padding:0 16px 0 calc(var(--tabx) + var(--tabw))}
  .bar-logo{flex:0 1 240px;margin:0 auto}
  .bar-links{margin-left:0}
}

/* tabs (same look as the front page) */
.ntabs{display:flex;flex-direction:column;gap:8px;flex:none;width:var(--tabw);margin-left:var(--tabx)}
.ntab{display:flex;align-items:center;gap:8px;min-height:48px;padding:7px 14px;position:relative;border:1px solid var(--nt-line);border-radius:0;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));background:var(--nt-tab);color:var(--ink);font-size:18px;font-weight:600;line-height:1.2}
.ntab::before,.ntab::after,.menu-btn::before,.menu-btn::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;background:linear-gradient(to bottom left,transparent calc(50% - 1px),var(--blue-bright) calc(50% - 1px),var(--blue-bright) calc(50% + 1px),transparent calc(50% + 1px))}
.ntab::before,.menu-btn::before{top:0;right:0}
.ntab::after,.menu-btn::after{bottom:0;left:0}
.ntab svg{flex:none;width:22px;height:22px}
.ntab.on{background:var(--nt-on);border-color:var(--blue-bright);color:#fff}
.ntab.off{color:var(--nt-gray);cursor:default}

/* Roller tab and its panel: the tab is 179px like the others; open, it stretches (with the edition switch and an arrow inside) and the roller hangs from it.
   The roller covers whatever is under the tabs and never pushes anything. */
.ntabs{position:relative}
:root{--rollw:380px;--nt-card:#170d10;--nt-edge:#38358a}
.ntab.roller{width:100%;padding:0;gap:10px;cursor:pointer}
.ntab.roller:hover{border-color:var(--blue-bright)}
.ntab.roller.open{width:min(var(--rollw),calc(100vw - 2 * var(--tabx)));background:var(--nt-on);border-color:var(--blue-bright);color:#fff;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.ntab.roller.open::after{display:none}
.rt-main{flex:none;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 0 0 14px;margin:0;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.rt-main svg{flex:none;width:22px;height:22px}
.rp-top,.rt-chev{display:none}
.ntab.roller.open .rp-top{display:inline-flex;margin:0 0 0 14px}
.ntab.roller.open .rt-chev{display:block;flex:none;margin-left:auto;margin-right:14px;color:var(--blue-bright)}
@media (min-width:861px){.rollpanel .sst-tray{--sst-roww:100%}}
.rollpanel{position:absolute;z-index:60;top:100%;left:0;width:min(var(--rollw),calc(100vw - 2 * var(--tabx)));padding:8px 14px 6px;background:var(--nt-card);border:1px solid var(--nt-edge);border-top:0;box-shadow:12px 14px 20px 2px rgba(0,0,0,.8);margin-bottom:70px}
.rollpanel[hidden]{display:none}
.rp-ed{align-items:center;gap:4px;font:400 15px var(--sans);color:#cfc8ff}
.rp-phone{display:none;margin:0 0 8px;padding-top:4px;font-size:16px}
.rp-btn{margin:0;padding:4px 3px;background:none;border:0;border-radius:0;color:#cfc8ff;font:inherit;font-weight:400;cursor:pointer}
.rp-btn:hover{color:#fff}
.rp-btn.on{color:#fff;font-weight:800}

/* wiki menu inside the gray column: plain, readable, no arrows, no counts */
@media (min-width:861px){
  .left .side{flex:1 1 auto;width:100%;background:none;border:0;padding:14px 4px 90px calc(var(--tabx) + 7px)}
}
.campaign{margin:0;padding:10px 8px 0;border-top:0;font:500 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.campaign::before{content:none}
.campaign{font:600 14px/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-bright)}
.grp{padding:26px 8px 0;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8d93b8}
.nav{display:flex;align-items:center;gap:8px;width:100%;margin:1px 0;padding:7px 8px;white-space:nowrap;background:none;border:0;border-radius:6px;text-align:left;font:500 14px/1.3 var(--sans);letter-spacing:.02em;text-transform:capitalize;color:#c9bff0}
.nav::before{content:none}
.nav .badge{display:none}
.nav .ic{display:inline-flex;flex:none;color:#8fa2ff}
.nav .ic svg{width:20px;height:20px}
.nav:hover .ic{color:#fff}
.nav:hover{background:none;color:#fff}
.nav.on{background:none;color:#fff;font-weight:500;box-shadow:none;text-decoration:underline;text-decoration-color:#8fa2ff;text-decoration-thickness:1px;text-underline-offset:6px}

/* wiki controls (temporary home, top of the content area) */
.toolbar{display:flex;align-items:center;gap:14px;padding:0 16px 12px 20px}
.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pagehead,.content{padding-left:20px;padding-right:16px}
.menu-btn{display:none;position:relative;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 11px;border:1px solid var(--blue-bright);background:rgba(59,82,240,.4);color:#fff;border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.menu-btn:hover{background:rgba(59,82,240,.7)}

/* phone */
@media (max-width:860px){
  .rp-phone{display:flex}
  .ntab.roller.open{width:100%}
  .ntab.roller.open .rp-top,.ntab.roller.open .rt-chev{display:none}
  .rt-main{justify-content:center;padding:0 4px}
  .rt-main svg{display:none}
  .rollpanel{width:100%}
  .bar{gap:10px}
  .bar-link span:not(.av){display:none}
  .bar-link{padding:6px;min-height:34px}
  .bar-link svg{width:17px;height:17px}
  .menu-btn{display:inline-flex;min-width:40px;min-height:40px}
  .layout{grid-template-columns:minmax(0,1fr)}
  .bar{padding:0 12px 0 var(--tabx)}
  .left{background:none;z-index:auto;margin-top:0;padding:var(--tabtop) var(--tabx) 0}
  .ntabs{flex-direction:row;width:100%;margin-left:0;gap:8px}
  .ntab{flex:1 1 0;min-width:0;min-height:44px;padding:6px 4px;font-size:15px;justify-content:center}
  .ntab svg{display:none}
  .side{background:var(--col);padding:16px 8px 90px 14px}
  .toolbar{padding:0 14px 10px;flex-wrap:wrap}
  .search{max-width:none;order:5;flex-basis:100%}
  .pagehead,.content{padding-left:14px;padding-right:14px}
}

/* Wiki links: page names in notes become links */
.wl{color:var(--blue-bright);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(125,146,255,.55);cursor:pointer}
.wl:hover{color:#fff;text-decoration-color:var(--blue-bright)}
.wl-hid{text-decoration-style:dashed}
.mentions{margin:12px 0 0;font-size:14px;color:var(--soft)}
.mentions b{margin-right:6px;color:#c9bff0;font-weight:600}
.atpick{margin:2px 0 8px;border:1px solid var(--nt-edge);background:var(--nt-card);box-shadow:0 8px 16px rgba(0,0,0,.6)}
.atrow{display:flex;justify-content:space-between;gap:12px;width:100%;padding:9px 12px;border:0;background:none;color:#e8e2ff;font:500 14px var(--sans);text-align:left;cursor:pointer}
.atrow.on,.atrow:hover{background:var(--nt-on);color:#fff}
.attype{color:var(--soft);font-size:12px;letter-spacing:.06em;text-transform:uppercase}

/* Softer page text: body copy matches the menu (lavender-grey, 15px); titles stay bright */
.card .body,.card .body p,.goal,.tbl td,.results,.muted{color:#cfc6ec}
.card .body,.goal,.tbl td{font-size:15px}
.card .body .muted{color:#a99bdc}

/* Card headings: same look as the tool tabs (Inter 18px semibold, normal case) */
.card>h2{font:600 18px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.card>h2::before{content:none}

/* Landing: first thing a visitor sees. Only the bar, the column and the tabs stay. */
body.landing-on .toolbar,body.landing-on .strip{display:none}
.landing{width:min(560px,calc(100% - 32px));margin:0;padding:12vh 0 40px;text-align:center}
.ltitle{margin:0 0 26px;font:600 28px/1.25 var(--sans);color:var(--ink)}
.ltitle::before{content:"// ";color:var(--violet)}
.lbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.lbtn{padding:9px 18px;border-radius:999px;border:1px solid var(--nt-line);background:var(--nt-tab);color:#dcd5f7;font:500 14px var(--sans);cursor:pointer}
.lbtn:hover{background:var(--nt-on);color:#fff}
.lbtn.main{border-color:var(--blue-bright);color:#fff}
.lbtn span{color:var(--soft);font-weight:400}
.linfo{margin:28px auto 0;padding:0;list-style:none;font:15px/1.6 var(--sans);color:#a99bdc}
.linfo li{margin:0 0 8px}
@media (max-width:860px){.landing{padding:32px 16px}}

.cname{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-align:left}
.cname:hover{color:#fff}
.err{margin:8px 0 0;color:#ff8d9b;font-size:14px}
dialog .seg{margin:6px 0 10px}

.setup{text-align:left}
.setup .ltitle{text-align:center}
.setupform .lbtns{justify-content:center;align-items:center;gap:18px;margin-top:22px}
.imgrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.imgprev{display:flex;align-items:center;justify-content:center;width:160px;height:96px;border:1px dashed var(--nt-edge);color:var(--soft);font-size:13px;overflow:hidden;background:var(--nt-card)}
.imgprev img{width:100%;height:100%;object-fit:cover}
.gimg{display:block;width:100%;max-height:220px;object-fit:cover;margin:0 0 12px;border:1px solid var(--nt-edge)}
.setupform input[type=file]{color:var(--soft);font-size:14px}

/* top note (replaces search / View as) and page footer */
.topnote{flex:1;font:14px/1.4 var(--sans);color:var(--soft)}
.foot{padding:36px 20px 80px}
body.landing-on .foot{display:none}
@media (min-width:861px){
  .nav{padding:4px 8px;margin:0}
  .grp{padding-top:16px}
  .campaign{padding-top:6px}
}
.cname{display:inline;text-align:left}
.cname svg{display:inline-block;vertical-align:-2px;margin-left:4px}

.pagehead{border-bottom:0}
.cname{display:inline}
a.invite{margin-left:12px;color:var(--blue-bright);font-size:14px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a.invite:hover{color:#fff}
.bigcode{margin:6px 0 4px;font:700 32px var(--mono);letter-spacing:.18em;color:var(--blue-bright)}
.pagehead .actions .lbtn{white-space:nowrap}

.card>h2.withedit{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cedit{padding:2px 4px;border:0;background:none;color:var(--blue-bright);font:500 14px var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.cedit:hover{color:#fff}
.pagehead{padding-bottom:8px}
.content{padding-top:8px}

.pagehead h1{padding-left:19px}
a.invite.nomargin{margin-left:0}
.chlist{margin-top:12px;padding-top:10px;border-top:1px solid var(--nt-edge);max-height:240px;overflow:auto}
.chlist .plain li{font-size:14px}

.gimg{aspect-ratio:4/1;width:100%;max-height:none;object-fit:cover;margin:0;border:0;border-bottom:1px solid var(--nt-edge)}
.cropwrap{margin:2px 0 8px}
.cropcur{display:block;width:100%;aspect-ratio:4/1;object-fit:cover;border:1px solid var(--nt-edge)}
.cropframe{position:relative;width:100%;overflow:hidden;border:1px solid var(--blue-bright);background:#000;cursor:grab;touch-action:none}
.cropframe:active{cursor:grabbing}
.cropframe img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none}
.zoomrow{display:flex;align-items:center;gap:12px;margin-top:8px;color:var(--soft);font-size:14px}
.zoomrow input{flex:1}
.cropnote{margin:4px 0 0}

/* Pill buttons everywhere (replaces the old near-square buttons) */
.btn{background:var(--nt-tab);color:#fff;border:1px solid var(--blue-bright);border-radius:999px;padding:9px 18px;min-height:0;font:500 14px/1.2 var(--sans);letter-spacing:0;text-transform:none;cursor:pointer}
.btn:hover{background:var(--nt-on);color:#fff}
.btn.ghost{background:var(--nt-tab);color:#dcd5f7;border-color:var(--nt-line)}
.btn.ghost:hover{background:var(--nt-on);color:#fff}
.btn.danger{background:var(--nt-tab);color:var(--danger);border-color:var(--danger)}
.btn.danger:hover{background:rgba(255,80,100,.15);color:var(--danger)}
.btn.small{padding:6px 14px;min-height:0;font-size:13px}
.seg button{border-radius:999px;padding:6px 14px;font:500 13px var(--sans);letter-spacing:0;text-transform:none;color:#dcd5f7;background:var(--nt-tab);border:1px solid var(--nt-line)}
.seg button[aria-pressed="true"]{background:var(--nt-on);color:#fff;border-color:var(--blue-bright);font-weight:600}
.seg{display:inline-flex;flex-wrap:wrap;gap:6px}
/* quiet field focus (no heavy highlight) */
input.t:focus,textarea.t:focus,select.t:focus{outline:none;border-color:var(--blue-bright);background:rgba(10,14,40,.6)}
/* the two diagonal corner marks on dialogs, like the cards */
dialog{background-image:linear-gradient(to bottom left,transparent calc(50% - 1.5px),var(--blue-bright) calc(50% - 1.5px),var(--blue-bright) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(to bottom left,transparent calc(50% - 1.5px),var(--blue-bright) calc(50% - 1.5px),var(--blue-bright) calc(50% + 1.5px),transparent calc(50% + 1.5px));background-size:15px 15px,15px 15px;background-position:right top,left bottom;background-repeat:no-repeat;background-origin:border-box}

/* opening the changes list must not make the page scroll or shift sideways */
html{scrollbar-gutter:stable}
.chlist{max-height:150px}
.foot{padding:24px 20px 24px}
/* page scroll bar hidden (wheel, touch and keys still scroll); no layout shift */
html{scrollbar-gutter:auto;scrollbar-width:none}
html::-webkit-scrollbar{display:none}

/* Game details / setup: half-width card, roomier fields */
.card.narrow{max-width:560px}
.setupform label.f,[data-gamedetails] label.f{display:block;margin-top:22px}
.setupform label.f:first-child,[data-gamedetails] label.f:first-child{margin-top:0}
.setupform label[for="g-img"],[data-gamedetails] label[for="g-img"]{margin-top:34px}
.setupform .dfoot,[data-gamedetails] .dfoot{margin-top:26px}

.invite{text-align:center}
.invite .dfoot{justify-content:center}
.qrbox{width:200px;height:200px;margin:8px auto 4px;padding:8px;background:#fff}
.qrbox svg{display:block;width:100%;height:100%}
.qrcode{margin:6px 0 0;color:var(--soft);font-size:14px}
.qrcode b{font-family:var(--mono);letter-spacing:.14em;color:#dcd5f7}

.lalready{margin:34px 0 0;font:14px var(--sans);color:var(--soft)}

.acct .gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 18px}
.acct .or{position:relative;margin:16px 0 4px;text-align:center;color:var(--soft);font-size:13px}
.acct .or::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--nt-edge)}
.acct .or span{position:relative;padding:0 10px;background:var(--panel)}

/* My games */
.landing.wide{width:min(760px,calc(100% - 32px));text-align:left}
.landing.wide .ltitle{text-align:left}
.gh{margin:30px 0 12px;font:600 15px var(--sans);letter-spacing:.04em;color:#c9bff0}
.glist{display:grid;gap:14px;margin-bottom:16px}
.gcard{display:grid;grid-template-columns:200px 1fr;border:1px solid var(--nt-edge);background:var(--nt-card)}
.gthumb{min-height:110px;background:#0d0708;border-right:1px solid var(--nt-edge)}
.gthumb img{display:block;width:100%;height:100%;object-fit:cover}
.gtext{padding:14px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.gtext h3{margin:0;font:600 18px var(--sans);color:#fff}
.gtext p{margin:0;color:var(--soft);font-size:14px}
.gtext .lbtn{margin-top:auto}
.lbtns.lleft{justify-content:flex-start}
@media (max-width:600px){.gcard{grid-template-columns:1fr}.gthumb{min-height:70px;border-right:0;border-bottom:1px solid var(--nt-edge)}}

.gthumb{display:flex;align-items:center;justify-content:center}
.ginit{font:700 44px var(--sans);color:#3a3470}

/* profile page: compact lists */
.pline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--nt-edge);color:#dcd5f7;font-size:15px}
.glist2{list-style:none;margin:0 0 14px;padding:0}
.grow{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(56,53,138,.5)}
.gsm{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;overflow:hidden;background:#0d0708;border:1px solid var(--nt-edge);font:700 18px var(--sans);color:#6f68c0}
.gsm img{width:100%;height:100%;object-fit:cover}
.gname{flex:1;min-width:0;font:600 16px var(--sans);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtag{font-weight:400;font-size:14px;color:var(--soft);margin-left:8px}
.landing.wide .gh{margin-top:26px}

.pname{margin:0 0 6px}
.prow{display:flex;gap:10px;align-items:center}
.prow .t{flex:1;max-width:340px}
.pdel{margin:34px 0 0;font-size:13px}
.pdel a{color:var(--soft)}

.plinks,.plinks2{display:flex;gap:18px;align-items:center}
.plinks2{margin:4px 0 0}
.grow .invite{font-size:15px}

/* profile menu */
.av{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--nt-edge);background:var(--nt-card);color:var(--soft);font-size:22px;line-height:1;overflow:hidden;flex:none}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.sm{width:24px;height:24px;font-size:14px}
.av.big{width:48px;height:48px;font-size:27px}
.av svg{width:60%;height:60%}
.bar-link .av.sm{margin-right:0}
.pmenu{position:fixed;z-index:30;top:51px;right:12px;width:min(290px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--pop);padding:8px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.pwho{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:8px;color:var(--ink);text-align:left;font:600 16px var(--sans)}
button.pwho:hover .pn{text-decoration:underline;text-underline-offset:3px}
.pwho .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psep{height:1px;background:var(--nt-edge);margin:4px 8px 6px}
.prow2{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:9px 8px;color:var(--ink);font:500 15px var(--sans);text-align:left}
.prow2:hover{background:var(--nt-on)}
.pic{display:inline-flex;width:24px;justify-content:center;color:var(--blue-bright)}
.pic svg{width:20px;height:20px}
.pedit{display:flex;align-items:center;gap:16px;margin:4px 0 14px}
.pedit .plinks2{flex-wrap:wrap;margin:0;gap:8px 16px}
.filelink{cursor:pointer}
dialog .pdel{margin:16px 0 0}
.landing .gh.first{margin-top:0}
.pmenu{background-image:linear-gradient(to bottom left,transparent calc(50% - 1.5px),var(--blue-bright) calc(50% - 1.5px),var(--blue-bright) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(to bottom left,transparent calc(50% - 1.5px),var(--blue-bright) calc(50% - 1.5px),var(--blue-bright) calc(50% + 1.5px),transparent calc(50% + 1.5px));background-size:15px 15px,15px 15px;background-position:right top,left bottom;background-repeat:no-repeat;background-origin:border-box}
label.invite.filelink{color:var(--blue-bright);font-size:14px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.prow2{color:var(--blue-bright);font:500 14px/1.3 var(--sans);letter-spacing:.02em;border-radius:6px;text-decoration:none}
.prow2:hover{background:rgba(59,82,240,.18);color:var(--ink)}
.pic{color:#8fa2ff}

.pgames{margin:0 0 4px 44px;display:flex;flex-direction:column;align-items:flex-start}
.psub{margin:6px 0 2px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.pgame{background:none;border:0;padding:5px 0;color:var(--blue-bright);font:500 14px var(--sans);text-align:left}
.pgame:hover{color:var(--ink)}
.pnone{padding:3px 0;font-size:14px;color:var(--soft)}
.helplist{margin:0 0 10px;padding-left:18px;line-height:1.6}

.av.huge{width:120px;height:120px;font-size:66px}
.pwhorow{display:flex;align-items:center;gap:8px}
.pwhorow .pwho{flex:1;min-width:0;width:auto}
.pedit-l{margin-right:8px;font-size:14px}
.pedit{display:flex;align-items:center;gap:20px;margin:0 0 12px}
.pstack{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pform .dfoot{margin-top:12px}
.pform .pnote{margin:10px 0 0;font-size:13px}
.bar-link .av{border:0;background:none}
dialog:has(.pform){width:min(380px,94vw)}
.pform input.t::placeholder{font-size:14px}

.psub0{margin:0 0 6px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.mlist{list-style:none;margin:0 0 14px;padding:0}
.mlist li{display:flex;align-items:center;gap:10px;padding:5px 0}
.mname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mrole{margin-left:6px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.medit{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--soft);cursor:pointer}
.pdot{width:9px;height:9px;border-radius:50%;border:1px solid var(--soft);flex:none}
.pdot.on{background:#5fd68a;border-color:#5fd68a}
.mnote{margin:0;font-size:13px}

.pgames{margin:0 0 6px 20px;padding:2px 0 2px 12px;border-left:1px solid var(--nt-edge);display:flex;flex-direction:column;align-items:stretch}
.psub{margin:8px 0 2px}
.pgame{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:0;padding:4px 6px;color:var(--soft);font:400 14px var(--sans);text-align:left}
.pgame span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgame em{font:normal 500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright);opacity:0}
.pgame:hover{color:var(--ink)}
.pgame:hover em{opacity:1}

.mlink{font-size:15px}
.pview h2{margin:0 0 4px}
.pview .pedit{margin-bottom:14px}
dialog:has(.pview){width:min(380px,94vw)}

/* Phone sideways (Oct 23 night): center the welcome/setup block; roller panel keeps its own width (right under the Roller tab) instead of stretching across; stronger shadow all round on phones */
@media (max-width:860px){
  .landing{margin:0 auto}
  .rollpanel{box-shadow:0 14px 30px 8px rgba(0,0,0,.9)}
}
@media (min-width:561px) and (max-width:860px){
  .rollpanel{width:min(var(--rollw),100%);left:auto;right:0}
  .rollpanel .sst-tray{--sst-roww:100%}
}