/* 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{}
.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,.6)}
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:17px/1.6 var(--sans);color:#a99bdc}
.linfo li{margin:0 0 8px}
.landing.welcome{width:min(720px,calc(100% - 32px))}
@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}

.lgo{margin:16px 0 0;text-align:center}
.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%}
}

/* Goals (Oct 23 night): title-only rows, click to expand; major goals bold and listed first; done/dropped soft gray */
.goalcard{max-width:640px}
.goalcard .body{padding-top:8px;padding-bottom:8px}
.goalrow{display:flex;gap:12px;align-items:flex-start;padding:7px 0}
.goalrow input[type=checkbox]{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--blue)}
.gdet{flex:1;min-width:0}
.gdet summary{list-style:none;cursor:pointer;font-size:16px;line-height:1.5;color:var(--ink)}
.gdet summary::-webkit-details-marker{display:none}
.gtitle::after{content:" \25B8";font-size:11px;color:var(--soft)}
.gdet[open] .gtitle::after{content:" \25BE"}
.goalrow.major .gtitle{font-weight:700}
.goalrow.off .gdet summary{color:#8a82ad}
.gedit{margin-left:10px;font-size:13px}
.gmore{margin:4px 0 6px;padding-left:2px;font-size:15px;color:#cfc6ec}
.gmore p{margin:4px 0 0}
details.goaldone{margin-top:18px;max-width:640px}
details.goaldone>summary{cursor:pointer;padding:6px 0;color:var(--soft);font:500 14px var(--sans)}
details.goaldone[open]>summary{margin-bottom:8px}
.setupform input.t{margin:0 0 14px}

/* Campaign name wherever it is shown: bluish and capitalized, like the column header */
.cn{color:var(--blue-bright);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
h1.cn{font-weight:600;letter-spacing:.05em}

/* Profile menu (Oct 24): game names look exactly like the left-column menu items, indented under My games, no side line, no Open label; no frame around the picture */
.pgames{margin:0 0 6px 44px;padding:0;border-left:0;display:flex;flex-direction:column;align-items:stretch}
.pgame{display:block;width:100%;padding:4px 8px;margin:1px 0;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}
.pgame:hover{background:none;color:#fff}
.pmenu .av{border:0;background:none}

/* Profile menu text matches the left-column menu items exactly (font, size, color, spacing); the menu casts a shadow like the roller.
   #pmenu is an outer wrapper (carries the shadow, because the cut-corner clip would hide a normal one); .pm-in is the framed menu inside. */
.pmwrap{position:fixed;z-index:30;top:51px;right:12px;width:min(290px,calc(100vw - 24px));filter:drop-shadow(8px 10px 10px rgba(0,0,0,.85)) drop-shadow(0 8px 16px rgba(0,0,0,.7))}
.pmwrap .pmenu{position:static;width:100%;box-sizing:border-box}
.prow2,.pgame,.pwho .pn{font:500 14px/1.3 var(--sans);letter-spacing:.02em;text-transform:capitalize;color:#c9bff0}
.prow2{gap:8px;margin:1px 0;padding:7px 8px;border-radius:6px}
.prow2:hover,.pgame:hover{background:none;color:#fff}
.pic{width:auto}
.pic svg{width:20px;height:20px}
.prow2:hover .pic{color:#fff}
.pedit-l{font:500 14px/1.3 var(--sans);letter-spacing:.02em;color:#c9bff0}
.pgames{margin:0 0 6px 36px}
.pgame{margin:1px 0;padding:7px 8px}
@media (min-width:861px){
  .prow2{padding:4px 8px;margin:0}
  .pgame{padding:4px 8px;margin:0}
}

/* Menus (Oct 24): lighter text (400), rows about 34px tall, and the current item sits in a soft blue-violet highlight again (text stays white, weight 500 as a second cue besides color). Applies to the left menu and the profile menu. */
.nav,.prow2,.pgame{font-weight:400;padding:8px;margin:0;border-radius:6px}
.pwho .pn,.pedit-l{font-weight:400}
.nav:hover,.prow2:hover,.pgame:hover{background:rgba(59,82,240,.14);color:#fff}
.nav.on{background:rgba(59,82,240,.3);color:#fff;font-weight:500;text-decoration:none}
.nav.on .ic{color:#fff}
@media (min-width:861px){
  .nav,.prow2,.pgame{padding:8px;margin:0}
}

/* Ad column (Oct 24): black, 170 px wide, desktop only. Images are 160 px wide, centered, 5 px above each and none below. The profile menu (z-index 30, with its shadow) opens on top of it. */
.ads{display:none}
@media (min-width:1001px){
  .layout{grid-template-columns:var(--colw) minmax(0,1fr) 180px}
  .ads{display:block;background:#000;min-width:0;padding-right:10px}
  .ads-in{position:sticky;top:0;max-height:calc(100vh - var(--bar));overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;align-items:center}
  .ads-in::-webkit-scrollbar{display:none}
  .ads-in a{flex:none}
  .ads-in a{display:block;line-height:0;margin:5px 0 0}
  .ads-in img{display:block;width:160px;height:auto}
}

/* Wide screens (Oct 24): single-column pages sit in a centered reading column; card pages (Overview, PCs, NPCs, Maps) keep filling from the left. */
@media (min-width:1300px){
  .main[data-page="goals"],.main[data-page="places"],.main[data-page="logs"],.main[data-page="secrets"],.main[data-page="admin"]{max-width:980px;margin-left:auto;margin-right:auto}
}

/* Top bar: boxed Ideas / feedback button (Oct 24) */
.bar-link.boxed{border:1px solid var(--blue-line);background:none;color:var(--blue-bright);margin:0 6px 0 0;padding:4px 9px;min-height:32px}
.bar-link.boxed:hover{background:rgba(59,82,240,.25);color:var(--ink)}
/* Goals (Oct 24): one list; the marker box opens a small Completed / Dropped choice; closed goals sit gray under the open ones */
.goalbar{margin:0 0 12px}
.goalrow{position:relative}
.gmark{flex:none;width:22px;height:22px;margin-top:1px;padding:0;border:1px solid var(--pop);border-radius:4px;background:rgba(59,82,240,.12);color:var(--ink);font:700 14px/1 var(--sans);cursor:pointer;display:grid;place-items:center}
.gmark:hover{background:rgba(59,82,240,.35)}
.gmark.done{color:#7be0a0;border-color:#4b8a69}
.gmark.dropped{color:#ff8b8b;border-color:#8a4b4b}
.goalrow.off .gtitle{color:#8a82ad}
.gpop{position:absolute;z-index:6;top:34px;left:0;display:flex;flex-direction:column;min-width:150px;padding:4px;background:var(--panel);border:1px solid var(--pop);box-shadow:6px 8px 16px rgba(0,0,0,.7)}
.gpop button{background:none;border:0;padding:9px 12px;text-align:left;color:var(--ink);font:500 14px var(--sans);cursor:pointer}
.gpop button:hover{background:rgba(59,82,240,.3)}

/* Goals, round 2 (Oct 24): bigger softer text, centered column, Notes link opens an inline editor */
.goalwrap{max-width:700px;margin:0 auto}
.goalwrap .goalcard{max-width:none}
.goalhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 12px}
.goalhead h1{margin:0;font:700 26px/1.2 var(--sans)}
.gmark{width:26px;height:26px;font-size:16px}
.goalrow{gap:14px;padding:9px 0}
.gmain{flex:1;min-width:0}
.gline{font-size:19px;line-height:1.45}
.gtitle{color:#d9d2f3}
.gtitle::after{content:none}
.goalrow.major .gtitle{color:#ece7ff;font-weight:700}
.goalrow.off .gtitle{color:#8a82ad}
.gnotes{margin-left:12px;font-size:15px;color:var(--blue-bright)}
.gpanel{margin:8px 0 6px;padding:10px 12px 12px;border:1px solid var(--blue-line);background:rgba(59,82,240,.07)}
.gpanel .t{width:100%;box-sizing:border-box;margin:0 0 10px}
.gpanel textarea.t{resize:vertical}
.gchk{display:flex;align-items:center;gap:8px;margin:2px 0 6px;font-size:15px;color:#cfc6ec}
.gauto{margin:6px 0 0;font-size:13px}
.gpop{top:38px}

/* Goals round 3 (Oct 24): clickable ! marks a major goal; no bold; dot on Notes when notes changed since you last looked */
.goalrow.major .gtitle{font-weight:400;color:#d9d2f3}
.gbang{flex:none;width:26px;height:26px;margin-top:1px;padding:0;border:1px solid #6b5a2a;border-radius:50%;background:transparent;color:#7d6f45;font:700 16px/1 var(--sans);cursor:pointer;display:grid;place-items:center}
.gbang:hover{border-color:#f2b33d;color:#f2b33d;background:rgba(242,179,61,.12)}
.gbang.on{border-color:#f2b33d;color:#f2b33d;background:rgba(242,179,61,.12)}
.gbang.gap{border:0;background:none;cursor:default;box-shadow:none}
.ndot{display:inline-block;width:9px;height:9px;margin-left:6px;border-radius:50%;background:#ff6fd8;box-shadow:0 0 6px rgba(255,111,216,.8);vertical-align:middle}

/* Goals round 4: placeholders instead of labels, Save button, status line */
.gpanel .t::placeholder{color:#7f77a8;opacity:1}
.gstatus{margin:0 0 10px;font-size:15px;font-weight:600}
.gstatus.done{color:#7be0a0}
.gstatus.dropped{color:#ff8b8b}
.gsave{margin-top:8px}

.gmen{margin:2px 0 8px;font-size:14px;color:#a99bdc}
.gmen:empty{display:none}
.gpanel .atpick{margin:-6px 0 10px}
.gtitle a.wl{color:inherit}

/* goal status popup floats above everything (the card's cut corners would clip it) */
.gpop{position:fixed;z-index:40;top:auto}

.nchk{margin-left:5px;vertical-align:-2px;color:var(--blue-bright)}

.nnew{margin-left:4px;font-size:15px;color:var(--blue-bright)}

.ntab[data-action]{cursor:pointer}
.ntab.on[data-action]:hover{filter:brightness(1.2)}

/* Overview (Oct 24): Quick info and Players are one card with two columns; Can edit lives in Game details */
.qicols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px 28px;align-items:start}
.qihead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px;padding-top:3px}
.qihead .psub0{margin:0}
.qicols .mlist{margin:0}

/* Overview grid (Oct 24): banner and Quick info are the same height; the banner picture grows to match */
.ovgrid{align-items:stretch}
.ovbanner{grid-area:1/1;display:flex;flex-direction:column}
.ovqi{grid-area:1/2}
.ovgoals{grid-area:2/1;min-width:0}
.ovbanner .gimgwrap{position:relative;flex:1 0 auto;aspect-ratio:4/1;overflow:hidden;border-bottom:1px solid var(--nt-edge)}
.ovbanner .gimg{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0}
@media (max-width:1000px){
  .ovbanner{grid-area:1/1}
  .ovgoals{grid-area:2/1}
  .ovqi{grid-area:3/1}
}

/* Quick info: two columns that take only the room they need; the card is wide enough for both from about 1100 px up */
.qicols{display:flex;flex-wrap:wrap;gap:16px 36px;align-items:flex-start}
.qicols>div{flex:0 1 auto}
.qicols>div:first-child{min-width:185px}
.qihead{justify-content:flex-start;gap:14px}
@media (min-width:1260px){
  .ovgrid{grid-template-columns:minmax(0,1fr) minmax(385px,440px)}
}
@media (min-width:1001px) and (max-width:1259px){
  .ovgrid{grid-template-columns:minmax(0,1fr)}
  .ovbanner{grid-area:1/1}
  .ovgoals{grid-area:2/1}
  .ovqi{grid-area:3/1}
}

/* Quick info rows (Oct 24) and the Last session card beside Major goals */
.ovlast{grid-area:2/2;min-width:0;display:flex}
.ovgoals{display:flex}
.ovgoals .goalcard,.ovlast .lastcard{flex:1;max-width:none}
.lastcard{display:flex;flex-direction:column}
.lastcard .body{flex:1;display:flex;flex-direction:column;min-height:0}
.lasthead{margin:0 0 6px;font-size:16px;color:#e6e0ff}
.lasttext{flex:1 1 0;min-height:7em;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.lasttext p{margin:0;font-size:15px;line-height:1.5;color:#cfc6ec}
.lastfoot{padding-top:8px}
@media (max-width:1259px){
  .ovlast{grid-area:4/1}
}

/* Overview rows (Oct 24): top row = banner + Quick info; bottom row = Goals (about a third narrower than the banner) + a wider Last session */
.ovstack{display:grid;gap:18px}
.ovbottom{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.ovtop{grid-template-columns:minmax(0,1fr)}
.ovtop .ovbanner,.ovtop .ovqi,.ovbottom .ovgoals,.ovbottom .ovlast{grid-area:auto}
@media (min-width:1260px){
  .ovtop{grid-template-columns:minmax(0,1fr) minmax(385px,440px)}
  .ovtop .ovbanner{grid-area:1/1}
  .ovtop .ovqi{grid-area:1/2}
  .ovbottom{grid-template-columns:minmax(0,7fr) minmax(0,8fr)}
}
.lasttext{min-height:3em}

.invite .dfoot{flex-wrap:wrap;gap:8px}
.nnew{font-weight:700}

.nav.addpage,.nav.addpage .ic{color:var(--blue-bright)}
.nav.addpage:hover{color:#fff}

/* Titles (Oct 24): every page title is white with the violet // in front, like the welcome title */
.pagehead h1,.goalhead h1{color:var(--ink)}
.pagehead h1::before,.goalhead h1::before{content:"// ";color:var(--violet)}
h1.cn{text-transform:none;letter-spacing:.01em;font-weight:700}
/* Start or join: two cards side by side */
.landing.setuptwo{width:min(1000px,calc(100% - 32px))}
.setuppair{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;align-items:start;text-align:left}
.setuptwo .card .body{padding:18px 20px 20px}
.setuptwo .setupform .lbtns,.setuptwo [data-join] .lbtns{justify-content:flex-start}
.joinnote{margin:0 0 14px;font-size:15px}
.setuptwo .ltitle{margin-bottom:22px}
@media (max-width:860px){.setuppair{grid-template-columns:minmax(0,1fr)}}
.setuptwo [data-join] .lbtns{margin-top:14px}

.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.filebtn{display:inline-block;margin-top:6px;padding:8px 16px;border:1px solid var(--blue-line);border-radius:999px;background:rgba(59,82,240,.18);color:var(--ink);font-size:14px;cursor:pointer}
.filebtn:hover,.vh:focus-visible+.filebtn{background:rgba(59,82,240,.4)}
.setupform .cropwrap:empty{display:none}.setupform .filebtn{margin-top:2px}

/* Oct 25: top note centered under the logo; delete button; setup picture row */
.topnote{text-align:center}
.toolbar{position:relative;min-height:28px}
.topnote.abs{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;flex:none}
.ovdel{display:flex;justify-content:flex-end;margin-top:26px}
.delbtn{padding:4px 12px;border:1px solid rgba(255,107,107,.45);border-radius:999px;background:none;color:#c9777a;font:500 12px var(--sans);cursor:pointer}
.delbtn:hover{color:#ff8a8a;border-color:#ff6b6b}
.delbtn.armed{background:#e5252d;border-color:#ff5a5a;color:#fff;font-weight:600;padding:6px 14px}
.setupform label[for="g-img"]{margin-top:0}
.setupform .picrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:17px}
.setupform .picgrp{display:flex;flex-direction:column;align-items:center}
.setupform .picgrp label.f{margin:0 0 4px}
.setupform .picgrp .filebtn{margin:0}
.setupform .picrow .lbtns{margin:0}

.quota{font:400 12px var(--mono);letter-spacing:.06em;color:var(--ink-faint);text-transform:none;margin-left:8px}
.lbtn:disabled{opacity:.4;cursor:not-allowed}
.setupfull{margin:0 0 12px;font-size:14px;color:var(--ink-faint)}

.pgames .pnone{padding-left:14px}
.setuptwo .setuppair{margin-top:6px}

.prow2[data-action="login"]{color:#fff}

.gsave{display:flex;justify-content:space-between;align-items:center}
.gdel{background:none;border:1px solid rgba(255,107,107,.5);border-radius:999px;color:#ff7b7b;font:500 13px var(--sans);padding:4px 12px;cursor:pointer}
.gdel:hover{background:rgba(229,37,45,.25);color:#ff9a9a;border-color:#ff6b6b}
.gpop .gdel{display:block;width:100%;margin-top:4px;border:0;border-top:1px solid rgba(255,107,107,.3);border-radius:0;padding:9px 12px;text-align:left;font-size:14px;color:#ff6b6b}

.mjr{display:flex;align-items:center;gap:10px;margin:2px 0 12px;cursor:pointer;color:var(--ink)}
.mjr .gbang{margin:0}
.mjr input:checked+.gbang,.mjr:hover .gbang{border-color:#f2b33d;color:#f2b33d;background:rgba(242,179,61,.12)}
.mjr input:focus-visible+.gbang{outline:2px solid var(--blue-bright);outline-offset:2px}

.mjr{margin:16px 0 18px}
#dlg form>.t+.t,#dlg form>textarea.t{margin-top:14px}
.gpanel .mjr{margin:12px 0 14px}

.gread-t{cursor:pointer}
.gchev{background:none;border:0;padding:0 6px;color:var(--soft);font-size:15px;cursor:pointer;line-height:1}
.gchev:hover{color:#fff}
.gread{margin:6px 0 4px;padding:2px 0 2px 14px;border-left:2px solid rgba(125,146,255,.35);color:var(--ink-dim);font-size:16px;line-height:1.5;white-space:pre-wrap}

.gnotes{text-decoration:none}
.gread{border-left:0;padding-left:0;margin-left:2px}
.gread{padding-left:14px;margin-left:0}
/* Goals: links are blue with no underline */
.goalrow .wl,.goalrow .gtitle a.wl,.gread .wl{color:var(--blue-bright);text-decoration:none}
.goalrow .wl:hover,.gread .wl:hover{color:#fff}
.goalrow.off .gtitle a.wl{color:#8a82ad}
/* Oct 25: no underlines on links anywhere (color alone marks a link) */
a,.wl,.wl-hid,a.invite,.cedit,label.invite.filelink{text-decoration:none}
a:hover,.cedit:hover,a.invite:hover{text-decoration:none}

.gmain{min-width:0}
.gread{overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.gbul{margin:0 0 0 0;padding-left:20px;list-style:disc}
.gbul li{margin:0 0 3px;padding-left:2px}
.gbul li::marker{color:var(--ink-faint)}
.gread .muted{white-space:normal}
/* Goals page: fixed column width so opening a note never resizes the card */
.goalwrap{width:700px;max-width:100%}
/* the open goal stands out */
.goalrow.is-read .gtitle{color:#fff;font-weight:600}
main[data-page="goals"] .content{grid-template-columns:minmax(0,1fr)}
.goalwrap{width:100%;max-width:700px}

/* Oct 25: sizes line up with the goals text (19px); quick info one step bigger */
.landing .lbtn{font-size:17px;padding:11px 24px}
.landing .lbtn span{font-size:inherit}
.lasthead{font-size:19px;line-height:1.45}
.lasthead .muted{font-size:15px}
.lasttext p{font-size:19px;line-height:1.45}
.ovqi dl.qi dd{font-size:17px}
.ovqi dl.qi dt{font-size:13px;padding-top:4px}
.ovqi .psub0{font-size:12px}
.ovqi .mname{font-size:17px}
.ovqi .mrole{font-size:12px}
.ovqi a.invite{font-size:15px}
.ovqi .cedit{font-size:15px}

/* Oct 25: every button shares the welcome-page size (delete buttons excepted) */
.btn:not(.danger),.lbtn,.filebtn{font-size:17px;line-height:1.2}
.btn.small,.btn.ghost.small{padding:9px 20px;font-size:17px}
.btn:not(.danger):not(.small){padding:10px 22px}
.lasttext p{font-size:16px}

/* Oct 25: Where we left off, Links in Quick info, Logs page */
.leftoff p{margin:0;line-height:1.55}
.leftat{margin:8px 0 0;font-size:12.5px}
.lastcard .lastfoot{margin-top:auto;padding-top:12px}
.qlinks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px;padding-top:12px;border-top:1px solid var(--blue-line)}
.qlh{color:var(--ink-faint);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.qlk{display:inline-flex;align-items:center;gap:4px}
.qlk a{color:var(--blue-bright);text-decoration:none}
.qlk a:hover{color:#fff}
.qlx{border:0;background:none;color:var(--ink-faint);font:500 14px var(--sans);padding:0 4px;cursor:pointer}
.qlx:hover,.qlx.arm{color:#fff}
.qladd{width:26px;height:26px;border:1px solid var(--blue-line);background:rgba(59,82,240,.18);color:#fff;font:600 17px/1 var(--sans);cursor:pointer;padding:0}
.qladd:hover{border-color:var(--blue-bright)}
.logrow{padding:2px 0;border-bottom:1px solid rgba(120,140,255,.18)}
.logrow:last-child{border-bottom:0}
.logt{display:block;width:100%;text-align:left;border:0;background:none;color:#d9d2f3;font:500 16px var(--sans);padding:10px 0;cursor:pointer}
.logt:hover{color:#fff}
.logrow.open .logt{color:#fff;font-weight:700}
.logbody{padding:0 0 12px}
.logbody p{margin:0 0 6px;line-height:1.55}
.gmonly{display:block;margin:12px 0 4px}

input.t.lognum{width:9em;max-width:100%}

.leftoff p,.logbody p{font-size:19px;line-height:1.45}
.logt{font-size:19px}
dialog:has(.logform){width:min(700px,94vw)}
.lognotes{min-height:320px}

/* dates: same look as the menu items on the left */
.ldate{font:500 14px/1.3 var(--sans);letter-spacing:.02em;color:var(--soft)}

.ltip{margin:34px auto 0;max-width:640px;text-align:center;text-wrap:balance;color:#a99bdc;font:17px/1.6 var(--sans)}
.ltip b{color:var(--ink)}

.lkrow{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.lkrow .t{margin:0 !important}
.lkrow .t:first-child{flex:0 0 38%}
.lkrow .t:nth-child(2){flex:1;min-width:0}
.lkx{border:0;background:none;color:var(--ink-faint);font:500 20px var(--sans);cursor:pointer;padding:0 6px}
.lkx:hover{color:#fff}

.picnote{margin:6px 0 0;font-size:13px;line-height:1.4;max-width:260px;text-align:center}
.edpic{align-items:flex-start;margin-top:4px}
.edpic .picnote{text-align:left;max-width:none}
form[data-gamedetails]>input.t{margin:0 0 12px}
form[data-gamedetails] .cropwrap{margin:0 0 12px}

#dshadow{position:fixed;inset:auto;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.7),12px 16px 44px 8px rgba(0,0,0,.98)}
#dlg form[data-gamedetails]>input.t,#dlg form[data-gamedetails]>input.t+input.t{margin:0 0 12px}
#dlg form[data-gamedetails] .cropwrap{margin:0 0 4px}

.mrem{border:0;background:none;color:var(--blue-bright);font:500 14px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-left:14px;padding:0}
.mrem:hover,.mrem.arm{color:#fff}
.mlist li{display:flex;align-items:center}
.mlist .medit{margin-left:auto}
.setupmore{margin-top:16px;padding-top:14px;border-top:1px solid var(--blue-line)}
.setupmore select.t{margin:4px 0 0}
.pgticks{display:flex;flex-wrap:wrap;gap:6px 22px;margin:6px 0 4px}
.setupmore .psub0{margin:16px 0 0}
.setupmore .gmonly{margin-top:12px}

button.mlink{border:0;background:none;color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer}
button.mlink:hover{color:var(--blue-bright);text-decoration:underline;text-underline-offset:3px}
.medit input[disabled]{opacity:.6}

.ptable{display:flex;flex-direction:column;gap:2px}
.prow{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,64px);align-items:center;padding:6px 0}
.prow>span:not(.mname){text-align:center}
.phead{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--blue-line);padding-bottom:8px;margin-bottom:4px}
.prow input[type=checkbox]{vertical-align:middle}
.ptable+.psub0{margin-top:18px}

/* Permissions page: bigger, centered */
.permwrap{font-size:18px}
.permwrap .prow{grid-template-columns:minmax(0,1fr) repeat(4,104px);padding:9px 0}
.permwrap .mname{font-size:19px}
.permwrap .phead{font-size:14px}
.permwrap .mnote{font-size:16px;margin-top:16px}
.permwrap .prow input[type=checkbox]{width:24px;height:24px;margin:0;accent-color:#6f86ff;cursor:pointer}

/* Quick info: Players label matches System / Created labels; small pictures by names */
.ovqi .psub0{color:var(--ink-faint);font:500 13px var(--mono);letter-spacing:.06em}
.ovqi .mname{display:flex;align-items:center;gap:9px}
.ovqi .mname .av.sm{width:28px;height:28px;font-size:16px}

.qihead .btn.sm{padding:4px 14px;font-size:14px}

/* Oct 26: Quick info players: no dot; players who are not here are softer gray; bigger pictures with no border */
.ovqi .mname .av.sm{width:36px;height:36px;font-size:20px;border:0}
.ovqi li.away .mname{opacity:.5}
.ovqi li.away .mname a{color:var(--soft)}

/* NPC pictures (sketches) in place of emoji faces */
.fimg{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px}
.npc .face:has(.fimg){font-size:0;overflow:hidden}
.tbl .face .fimg,.wl .fimg,.results li .fimg{width:1.3em;height:1.3em;vertical-align:-.3em;border-radius:50%;display:inline-block}
.tbl .face:has(.fimg){display:inline-block;width:28px;height:28px;vertical-align:middle;margin-right:8px;overflow:hidden;border-radius:50%}
.tbl .face .fimg{width:100%;height:100%;border-radius:0}
.portrait{display:block;max-width:100%;max-height:300px;margin:0 auto 10px;background:#fff;border-radius:3px;border:1px solid var(--blue-line)}

/* NPC card view: cards 15% bigger (247px wide, was about 215px); picture fills the card with 3px padding on the left, right and top */
.npcgrid{grid-template-columns:repeat(auto-fill,247px);justify-content:start}
.npcgrid .npc{padding:3px 3px 14px}
.npcgrid .npc .face{width:100%;height:auto;aspect-ratio:1/1;margin:0 0 10px;border:0;border-radius:2px;font-size:104px}
.npcgrid .npc .grow{padding:0 9px}
.npcgrid .npc h3{font-size:18px}
.npcgrid .npc .sub{font-size:16px}
.npcgrid .npc > div:last-child{padding:0 9px}
.npcgrid .npc .grow{flex-direction:column;gap:4px;border-bottom:0;padding:4px 9px 0}
.npcgrid .npc .tags{margin:4px 0}

/* NPC page: categories on the left (tick boxes), tags in a row above the cards */
.cats{padding:12px 14px}
.catgrp{margin-bottom:14px}
.cath{display:flex;justify-content:space-between;align-items:baseline;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--blue-line);padding-bottom:5px;margin-bottom:4px}
.catedit{background:none;border:0;color:var(--blue-bright);font:500 12px var(--sans);text-transform:none;letter-spacing:0;text-decoration:underline;cursor:pointer;padding:0 2px}
.catv{display:flex;align-items:center;gap:9px;padding:6px 4px;font:500 15px var(--sans);color:var(--ink);cursor:pointer;border-radius:4px}
.catv:hover{background:rgba(59,82,240,.18)}
.catv input{width:18px;height:18px;margin:0;accent-color:var(--blue-bright);flex:none}
.catnone{margin:4px 4px;font-size:14px}
.catnew{margin-top:4px}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip{background:var(--nt-tab,#2a2552);border:1px solid var(--nt-line,#4a42a0);border-radius:999px;padding:6px 14px;font:500 14px var(--sans);color:#dcd5f7;cursor:pointer}
.chip:hover{border-color:var(--blue-bright);color:#fff}
.chip[aria-pressed="true"]{background:var(--nt-on,#3b52f0);color:#fff;border-color:var(--blue-bright);font-weight:600}
.chip.sm{padding:3px 10px;font-size:13px}
.tagpick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.attseg{margin-top:4px}
.newplace{margin-top:6px}

/* NPC page: calmer. View buttons sit beside New NPC; no count line; no line between the categories and the cards */
.pagehead .actions{align-items:center}
.folders.cats{border-right:0}
/* NPC page: no outer frame; categories and cards sit straight on the page */
.browser{background:none;border:0;clip-path:none}
.browser::before,.browser::after{display:none}
.folders.cats{background:none}

/* round + beside each page title (replaces the New ... buttons) */
.addplus{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:0;background:var(--blue);color:#fff;cursor:pointer;flex:none;padding:0;box-shadow:0 0 0 1px var(--blue-bright) inset}
.addplus:hover{background:var(--blue-bright)}
.plushead{justify-content:flex-start}
/* NPC page: tags on one row across the top, categories and cards start level underneath */
.tagrow{flex-wrap:wrap;margin:6px 0 18px;position:relative}
.tagrow:not(.open){flex-wrap:wrap;max-height:none}
.tagrow [hidden]{display:none}
.chip.more{background:transparent;border-style:dashed;border-color:var(--blue-bright);color:var(--blue-bright);font-weight:600}
.chip.more:hover{background:rgba(59,82,240,.22);color:#fff}
.browser{gap:28px;align-items:start}
.browser .results{padding:0}
.folders.cats{padding:0}
.folders.cats .catgrp:first-child .cath{padding-top:0}

/* tags sit over the cards only; the top of the categories lines up with the top of the tags */
.tagrow{margin:0 0 18px}
.folders.cats .cath{line-height:1;padding-top:0}
/* no divider line under the category headings */
.cath{border-bottom:0;padding-bottom:2px;margin-bottom:6px}
/* the + beside a page title: a quiet round button like the tags and View / edit, with a blue plus */
.addplus{background:var(--nt-tab);border:1px solid var(--nt-line);color:var(--blue-bright);box-shadow:none;width:36px;height:36px}
.addplus svg{width:24px;height:24px;stroke-width:2.8}
.addplus:hover{background:var(--nt-on);color:#8fa2ff}

/* NPC page layout: tags over the cards; categories start level with the top of the first picture */
.browser{display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:28px;row-gap:0;align-items:start}
.browser>.tagbar{grid-column:2;grid-row:1}
.browser>.folders{grid-column:1;grid-row:2}
.browser>.results{grid-column:2;grid-row:2}
.folders.cats{padding-top:3px}
@media (max-width:1000px){
  .browser{grid-template-columns:1fr}
  .browser>.tagbar,.browser>.folders,.browser>.results{grid-column:1}
  .browser>.tagbar{grid-row:1}.browser>.folders{grid-row:2;margin-bottom:14px}.browser>.results{grid-row:3}
}
.catmore{margin:4px 0 0 4px}
/* picture frame: the same blue line and two cut corners as the other fields */
.npcgrid .npc .face{position:relative;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));background:var(--field)}
.npcgrid .npc .face::before,.npcgrid .npc .face::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))}
.npcgrid .npc .face::before{top:0;right:0}
.npcgrid .npc .face::after{bottom:0;left:0}
.npcgrid .npc .face .fimg{border-radius:0}
/* Edit sits in the bottom right corner of the card, the size of a tag button */
.npcgrid .npc{display:flex;flex-direction:column}
.npcgrid .npc>.npcfoot{margin-top:auto;display:flex;justify-content:flex-end;padding:8px 10px 0}
/* hidden from players: the whole card is dimmed (still readable) */
.npc.hidden{opacity:.62}
.npcgrid .npc>div.npcfoot{padding:8px 6px 0}
.npcgrid .npc{padding-bottom:6px}
/* card border = same as .card (blue line, two cut corners); picture frame removed */
.npcgrid .npc .face{border:0;clip-path:none;background:none}
.npcgrid .npc .face::before,.npcgrid .npc .face::after{content:none}
.npcgrid .npc,.npcgrid .npc.hidden{position:relative;background:var(--field);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))}
.npcgrid .npc::before,.npcgrid .npc::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))}
.npcgrid .npc::before{top:0;right:0}
.npcgrid .npc::after{bottom:0;left:0}
/* 7px between image and card border; small "Hidden" tag on image; hidden cards a bit darker */
.npcgrid .npc{padding:7px 7px 6px}
.npcgrid .npc .face .hidtag{position:absolute;top:6px;left:6px;z-index:2;margin:0;background:rgba(10,6,16,.82);padding:1px 7px}
.npc.hidden{opacity:.52}
.folders.cats{padding-top:10px}
/* brighter blue border on every card (as the overview Goals card had) */
.card,.pinned,.npcgrid .npc,.npcgrid .npc.hidden{border-color:var(--blue-bright)}
/* card top edge level with "Attitude" */
.folders.cats{padding-top:3px}
/* drag to reorder NPC cards */
[data-reorder]>[data-id]{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.npcgrid .npc img{-webkit-user-drag:none;pointer-events:none}
[data-reorder]>.dragging,.npcgrid .npc.dragging{opacity:.3}
.dragghost{position:fixed;z-index:60;pointer-events:none;margin:0;opacity:.92;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));transform:scale(1.03)}
body.dragmode,body.dragmode *{cursor:grabbing!important}
/* the card button is back to the normal button size */
/* Edit tags dialog */
.catnew+.catnew{margin-left:8px}
.trows{display:grid;gap:8px;margin:12px 0 4px}
.trow{display:flex;align-items:center;gap:10px}
.trow .t{flex:1;min-width:0}
.trow .tcount{white-space:nowrap;font-size:14px}
.trow.gone .t{text-decoration:line-through;opacity:.5}
.trow.gone .tcount{opacity:.5}
.trow .tcount{min-width:64px;text-align:right}
/* Edit tags sits at the right end of the tag row */
.tagbar{display:flex;align-items:flex-start;gap:12px}
.tagbar .tagrow{flex:1;min-width:0}
.tagbar .tagedit{flex:none;margin-top:6px;border-style:dashed}
.tagbar .tagedit{margin-top:3px}
/* Welcome page: bigger title, buttons and tip */
.landing.welcome .ltitle{font-size:36px}
.landing.welcome .lbtn{font-size:21px;padding:12px 28px}
.landing.welcome .ltip{font-size:21px}
@media (max-width:600px){.landing.welcome .ltitle{font-size:30px}.landing.welcome .lbtn{font-size:20px;padding:12px 24px}.landing.welcome .ltip{font-size:19px}}
.landing.welcome .ltip .cedit{font-size:17px}

/* ---- NPC cards: picture runs to the border ---- */
.npcgrid .npc{padding:0 0 6px}
.npcgrid .npc .face{margin:0 0 10px;border-radius:0}
.npcgrid .npc .face .fimg{border-radius:0}
.pill.att-friendly{border-color:rgba(90,200,130,.7);color:#7fe0a3}
.pill.att-hostile{border-color:rgba(240,90,100,.75);color:#ff8d96}
.pill.stat{border-color:rgba(200,190,210,.6);color:#d6cde6}
.pill.real{border-color:rgba(255,154,60,.7);color:var(--ember)}
.npc.dead .fimg,.npc.dead .face{filter:grayscale(1) brightness(.8)}

/* ---- the big NPC page ---- */
dialog.npcwide{width:min(1000px,96vw)}
.npcform [hidden]{display:none!important}
.npcpage{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:22px;align-items:start}
.npcmain{display:grid;gap:10px;min-width:0}
#dlg .npcform .npcmain>.t,#dlg .npcform .npcmain>.t+.t{margin:0}
.npcname{font:700 26px/1.2 var(--sans)!important;padding:10px 12px!important}
.npcrow2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:center}
.npcatt .attseg{margin:0;flex-wrap:nowrap}
.npcchecks{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.npcchecks .chk{margin:0}
.npcchecks .npcreal{width:auto;flex:1;min-width:230px}
.npcform .tagpick{margin:0}
.npcpicwrap{display:grid;gap:8px}
.npcpicbox{overflow:hidden;background:var(--field)}
.npcpic{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.npcemoji{display:grid;place-items:center;aspect-ratio:1/1;font-size:110px}
.npcpicwrap .faces{margin:0;max-height:110px;overflow:auto}
.npcnotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.npcnotes:has(textarea:only-child){grid-template-columns:1fr}
.npcnotes .t{min-height:150px;resize:vertical;margin:0}
.npcform.ro .t{opacity:.9}
@media (max-width:760px){
  .npcpage{grid-template-columns:minmax(0,1fr)}
  .npcpicwrap{order:-1;width:112px;justify-self:end}
  .npcemoji{font-size:64px}
  .npcrow2,.npcnotes{grid-template-columns:minmax(0,1fr)}
  .npcchecks .npcreal{min-width:0;width:100%;flex-basis:100%}
  .npcatt .attseg{flex-wrap:wrap}
}

/* ---- no emoji: a plain silhouette, and picture upload ---- */
.noface{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:rgba(125,146,255,.45)}
.nofaceicon{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.npcgrid .npc .face .noface{position:absolute;inset:0}
.wl .noface,.results li .noface,.tbl .noface{display:inline-flex;width:1.3em;height:1.3em;vertical-align:-.3em}
.wl .nofaceicon,.results li .nofaceicon{width:100%;height:100%}
.npcpicbox.picempty{display:grid;place-items:center;aspect-ratio:1/1;border-style:dashed;color:rgba(125,146,255,.6)}
.npcpicbox.picempty .nofaceicon{width:46%;height:auto;aspect-ratio:1/1;margin:0 auto 6px;display:block}
.picdrop{display:grid;place-items:center;align-content:center;width:100%;height:100%;cursor:pointer;text-align:center;font:500 15px/1.3 var(--sans);color:var(--blue-bright);padding:10px;position:relative}
.picdrop:hover,.picdrop:focus-within{color:#fff}
.picbtns{display:flex;gap:8px;flex-wrap:wrap}
.picbtns .btn{position:relative;cursor:pointer}
.picgen{max-width:230px;margin-bottom:12px}
#dlg .picdrop,#dlg .picdrop span{color:var(--blue-bright);font:500 15px/1.3 var(--sans);text-transform:none;letter-spacing:0}#dlg .picdrop:hover,#dlg .picdrop:focus-within{color:#fff}.picdrop .nofaceicon{width:46%;height:auto;aspect-ratio:1/1;stroke:currentColor}

/* ---- NPC page v2: a roomy list, instructions in gray to the right ---- */
dialog.npcwide{width:min(1080px,96vw)}
.npcpage{grid-template-columns:minmax(0,1fr) 300px;gap:30px}
.npcmain{gap:18px}
.frow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:center}
.frow .fcell{min-width:0}
.frow .fcell .t{margin:0;width:100%}
.fhint{color:var(--ink-faint);font-size:13.5px;line-height:1.4;opacity:.85}
.frow .attseg{margin:0}
.statlist{display:grid;gap:8px}
.statlist .chk{margin:0}
.statlist .statother{margin:0;max-width:260px}
.npcchecks{display:grid;gap:12px;justify-items:start}
.npcchecks .npcreal{width:100%;max-width:420px;flex:none}
.npcnotes{grid-template-columns:minmax(0,1fr)!important;gap:18px;margin-top:26px}
.npcnotes .t{min-height:170px}
.npcpic{aspect-ratio:auto;height:auto;max-height:520px;object-fit:contain}
.npcform .mentions{margin-top:20px}
.npcform .dfoot{margin-top:24px}
@media (max-width:760px){
  .frow{grid-template-columns:minmax(0,1fr);gap:4px}
  .npcpage{grid-template-columns:minmax(0,1fr);gap:20px}
  .npcpicwrap{order:-1;width:160px;justify-self:end}
}

/* ---- NPC page v3: instructions inside the fields, three columns ---- */
dialog.npcwide{width:min(1240px,96vw)}
.npcpage{display:grid;grid-template-columns:minmax(0,1fr) 220px 280px;gap:30px;align-items:start}
.npcmain{display:grid;gap:14px;min-width:0}
.npcopts{display:grid;gap:22px;align-content:start}
.optgrp{display:grid;gap:7px}
.optgrp>b{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-bright)}
.optgrp>b i{font-style:normal;color:var(--ember);margin-left:4px;letter-spacing:.04em}
.optgrp .chk,.npcopts>.chk{margin:0}
.statoth{display:flex;align-items:center;gap:8px}
.statoth .statother{margin:0;flex:1;min-width:0;padding:5px 10px}
.statoth .statother::placeholder{color:var(--ink-faint);opacity:.8}
.npcmain .mine{margin:0}
.gmgray{opacity:.5}
.ifield{position:relative}
.ifield .t{margin:0;width:100%;padding-right:calc(var(--hw,8ch) + 30px)}
.ihint{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ink-faint);font-size:13px;opacity:.85;pointer-events:none;white-space:nowrap}
.tagbox{border:1px solid var(--blue-line);background:var(--field);padding:6px 8px 10px;display:grid;gap:8px}
.tagbox .t{background:transparent;border:0;box-shadow:none;padding-left:4px}
.tagbox:focus-within{border-color:var(--blue-bright)}
.tagbox .tagpick{margin:0;padding-top:8px;border-top:1px solid var(--blue-line)}
.npcnotes{margin-top:24px}
@media (max-width:1060px){
  .npcpage{grid-template-columns:minmax(0,1fr) 260px;gap:24px}
  .npcopts{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
@media (max-width:760px){
  .npcpage{grid-template-columns:minmax(0,1fr)}
  .npcpicwrap{order:-1;width:160px;justify-self:end}
  .npcopts{grid-row:auto;grid-column:auto}
  .ifield .t{padding-right:calc(var(--hwm,8ch) + 30px)}
  .ihint .hx{display:none}
}
.statoth .statother{min-height:36px;padding:6px 10px;font-size:15px;border:1px solid var(--blue-line);background:var(--field);color:var(--ink)}
.npcnotes .t{min-height:120px}
.npcnotes{margin-top:18px;gap:14px}

/* notes sit under the tags, hints inside */
.tafield .t{min-height:96px;padding-bottom:30px;padding-right:12px;resize:vertical}
.tafield .ihint{top:auto;bottom:9px;transform:none}
.npcmain .npcnotes{display:none}
.npcopts>.chk{margin:0}

/* v4: tick lists go under the picture */
dialog.npcwide{width:min(1180px,96vw)}
@media (min-width:1061px){
  .npcpage{grid-template-columns:minmax(0,1fr) 400px;column-gap:30px;row-gap:18px}
  .npcmain{grid-column:1;grid-row:1/3}
  .npcpicwrap{grid-column:2;grid-row:1;align-self:start}
  .npcopts{grid-column:2;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px;align-content:start}
  .npcopts>.chk{grid-column:1/-1}
  .npcpicbox{display:flex;justify-content:center;background:#fff}
  .npcpic{width:auto;max-width:100%;max-height:300px}
}
.optgrp{align-content:start;align-self:start}

/* v5 */
.npcflags{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.npcflags .chk{margin:0}
.npcflags .mine{margin-left:auto}
@media (min-width:1061px){
  .npcpicbox{width:80%;margin:0 auto 0 0}
  .npcpic{max-height:240px}
  .npcpage{row-gap:14px}
  .npcopts{gap:14px 18px}
  .optgrp{gap:5px}
}
@media (min-width:1061px){ .npcpage{grid-template-rows:auto 1fr} }
@media (min-width:1061px){ .npcopts .optgrp[aria-label^="Real"]{grid-column:2;grid-row:1/3} .npcopts .optgrp[aria-label="Attitude"]{grid-column:1;grid-row:1} .npcopts .optgrp[aria-label="Status"]{grid-column:1;grid-row:2} .npcopts{align-content:start;grid-template-rows:auto auto} }
@media (min-width:1061px){ .npcopts{row-gap:26px} }

/* v6: snug dialog, tag suggestions */
@media (min-width:1061px){
  dialog.npcwide{width:min(1040px,96vw)}
  .npcpage{grid-template-columns:minmax(0,1fr) 320px}
  .npcpicbox{width:100%}
}
.npcflags .mine{margin-left:0}
.npcflags .chk:last-child:not(:first-child){margin-left:auto}
.tagsug{position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:2px;background:var(--panel-deep);border:1px solid var(--blue-bright);display:grid;max-height:220px;overflow:auto}
.tagsug button{text-align:left;background:none;border:0;color:var(--ink);padding:9px 12px;font:15px var(--sans);cursor:pointer;min-height:38px}
.tagsug button:hover,.tagsug button:focus{background:var(--nt-on);outline:0}

/* whole card opens on click; dragging still moves it */
[data-reorder]>[data-id]{cursor:pointer}
[data-reorder]>[data-id]:hover{border-color:var(--blue-bright)}
[data-reorder]>[data-id]:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}

/* picture box takes the shape of the picture */
@media (min-width:1061px){
  .npcpicbox:not(.picempty){display:block;width:fit-content;max-width:100%;background:transparent;margin:0}
  .npcpicbox:not(.picempty) .npcpic{display:block;width:auto;height:auto;max-width:100%;max-height:300px}
  .npcpicbox.picempty{width:100%}
}

/* the page follows the picture's width */
@media (min-width:1061px){
  dialog.npcwide{width:fit-content;max-width:96vw}
  .npcpage{grid-template-columns:640px minmax(290px,auto)}
  .npcpicwrap,.npcopts{min-width:290px}
}