/* EASTSCAPE: YOUR SCREEN'S STYLES (the machinery first, then one block per look). (2026-10-17, v1.6, the owner: "when manually reloading (ctrl shift R),
   it shows the tavern/og layouts and loads them fully before switching over to the midnight theme") Until now this was the `const CSS` string in
   eastscape-ui.js, put into the page by that module after the first paint, so a hard reload painted the Tavern (and fetched its frames and parchment)
   before Midnight arrived. It is a real stylesheet now, linked at the END of eastscape.html's <head> as id="uiCss" (same place in the cascade the
   module's <style id="uiCss"> had: after the page's own sheet, before anything a lazy module adds), so it is in force for the very first paint.
   EDITING: change it here, then bump its ?v= on the <link id="uiCss"> line in eastscape.html (the dev server and the live edge both hold
   /v3/assets/css/* for a year). Every look block keys on html[data-ui-theme]; Midnight's night pass (eastscape-night.js) skips those selectors. */

/* ======== THE SHARED GRAMMAR, FOR EVERY BUILDER (2026-10-17, Round 16 "sys"; the rules are the block of that name at the END of this file) ========
   One grammar in BOTH looks (Midnight and Tavern); each look sets the tokens, so build with these and the window is native in either.
   TOKENS (set on html[data-ui-theme="midnight"] and ="tavern"):
     --g-cell / --g-cell-line            the quiet cell (empty, none, still to come)     --g-cell-lit / --g-cell-lit-line / --g-cell-sh  the lit cell
     --g-sel / --g-sel-glow              the look's ONE action colour (picked, pointed at; moonlight / verdigris)
     --g-count / --g-count-m             a count's ink (white; green at a million)        --g-num   a key number's ink
     --g-money  money (never gold-on-gold)   --g-warn  a risk (burns, spoils)   --g-good / --g-bad  results   --g-label  an eyebrow label
     --g-card / --g-card-line / --g-card-sh   the floating card    --g-row (40px) / --g-row-on / --g-row-hv   a dense row    --g-field / --g-field-line
     --g-tile  a big lit surface (a tile wider than a slot: no plate studs)   --g-disp-w  the title face's weight in this look (400 Midnight, 600 Tavern)
   CLASSES:
     .g-cell (+ .lit .none .sil .sel .miss, .sm = 44/32; default 72 with a 64 picture; >u the count bottom right; >i a level top left) · .g-grid (--cols, --cs)
     .g-eb an eyebrow (12px caps, a <small> count) · .g-num · .g-money · .g-warn · .g-good · .g-bad · .g-sum (the 13px line under a button)
     .g-row a dense one-line row (32px picture, <b> name, the number last; .on .off) · .k-row takes the same 40px density
     .g-presets > button[aria-pressed] (1 / 5 / 10 / All) · .g-go > div (presets + ONE .k-btn that names the job) + .g-sum under it
     .g-search > input (one search box, magnifier drawn) · .g-card (.g-card-h picture + <b> name + <small>; .g-card-r icon, text, <b> number; hr)
   THE KIT, AS IS (one family, styled per look): .k-btn (primary: ONE per window) / .sec .plain (secondary) / .gold (money) / .danger / :disabled;
     .k-tabs > button[aria-selected] (dark unpicked, light picked, <small> count); .k-head (+ .k-sub, .k-x); .k-seg (a strip); .k-chip.
   EVERY .slot and .k-slot is already the flat cell (lit when it holds something, quiet when .empty, .sel/.on in --g-sel), count bottom right.
   THE POPUPS (#pop, #dlg, .bagmenu/.bk-menu, #gearTip) share these pieces inside their look's frame. Never a wooden outline anywhere. */

/* the machinery */
.ui-off{display:none!important}
html:not(.ui-narrow) .game .ui-p,html .game .win,html .game .k-win{zoom:var(--ui-scale,1)}
@media (max-width:820px){html .game .ui-p,html .game .win,html .game .k-win{zoom:1}}
html .game [data-design]{zoom:calc(var(--ui-scale,1) * var(--fit,1))}html .game [data-design].fit-floor{max-width:calc(100% - 14px)!important;max-height:calc(100% - 14px)!important;overflow:auto!important;overscroll-behavior:contain}@media (max-width:820px){html .game [data-design]{zoom:var(--fit,1)}}   /* design-size windows: see fitWin */
.game .win{max-height:calc(100% - 28px / var(--ui-scale,1))}   /* (2026-10-12, v1.6; Kellzifer had to zoom the browser to 50% to reach a window's close) A PERCENTAGE IS NOT ZOOMED: under CSS zoom Chrome scales a length's px but not a percentage of the box, so the old cap (the whole sum over the size) made a window 125% of the game tall at Interface size 80%, off the top and bottom with its close out of reach, and 83% at 120%. Only the 28px margin is divided now. */
.ui-placed{z-index:5}
.ui-placed#chat,.ui-placed#chatBox{z-index:6}
html:not(.ui-fixed) #chatBox .chat-head{cursor:grab;touch-action:none}html:not(.ui-fixed) #chatBox .chat-head button{cursor:pointer}
.ui-wmoved .win-head,.ui-wmoved .k-head{cursor:grab}
.win-head,.k-head{touch-action:none}
@media (min-width:821px){html:not(.ui-fixed) .win .win-head,html:not(.ui-fixed) .k-win .k-head{cursor:grab}.win-head button,.k-head button,.win-head input,.win-head a{cursor:pointer}}
html.ui-lock-cursor .win-head{cursor:default}
body.ui-dragging,body.ui-dragging *{cursor:grabbing!important;user-select:none!important}
html.ui-see .game .win:not(:hover):not(:focus-within),html.ui-see .game .k-win:not(:hover):not(:focus-within),html.ui-see.ui-float .side:not(:hover):not(:focus-within){opacity:var(--ui-alpha)}
/* the side panel, floating */
@media (min-width:821px){
  html.ui-float .wrap{grid-template-columns:minmax(0,1fr)!important}
  html.ui-float .wrap .side{position:fixed;z-index:30;width:352px;height:min(82vh,780px);border:1px solid rgba(232,191,53,.55)!important;border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.6);overflow:hidden;zoom:var(--ui-scale,1)}
  html.ui-float.ui-side-off .wrap .side{display:none}
  html.ui-float .chat-tab.sidebtn{display:inline-flex}
  .ui-grip{flex:none;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;background:linear-gradient(#5a3220,#3a1e12);color:#f6e9cc;cursor:grab;touch-action:none;user-select:none}
  .ui-grip span{font:700 14px/1 var(--k-disp,serif);flex:1}.ui-grip small{font-size:11px;opacity:.7}
  .ui-grip button{width:26px;height:26px;border:0;border-radius:6px;background:rgba(0,0,0,.25);color:#fff;font-size:17px;line-height:1;cursor:pointer}
}
/* MOVE THINGS */
#uiLayer{position:absolute;inset:0;z-index:20;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 24px),rgba(0,0,0,.28)}
.ui-bar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 20px);padding:8px 10px 8px 14px;border-radius:10px;background:rgba(20,13,10,.95);box-shadow:0 0 0 2px #e8bf35,0 10px 30px rgba(0,0,0,.6);color:#f6e9cc;z-index:2}
.ui-bar b{font:700 16px/1 var(--k-disp,serif);color:#ffe27a;white-space:nowrap}.ui-bar small{font-size:12px;opacity:.85;line-height:1.3}
.ui-bar .k-btn{min-height:34px;white-space:nowrap}
.ui-bar{box-sizing:border-box;width:min(760px,calc(100% - 20px))}.ui-bar small{flex:1 1 auto;min-width:180px}   /* (v1.7) the line keeps its width beside the buttons */
#uiLayer:not(.ghosts) .ui-h.ghost:not(.off):not(.moved){display:none}   /* (v1.7) with twenty-two pieces, the ones that aren't up now crowded the top of the screen: "Show the rest" brings them (one you hid or moved always shows, so it can be found) */
.ui-h{position:absolute;border:2px dashed #ffe27a;border-radius:8px;background:rgba(255,226,122,.12);cursor:grab;touch-action:none;display:flex;align-items:flex-start;justify-content:space-between;gap:4px;padding:2px}
.ui-h:hover{background:rgba(255,226,122,.22)}
.ui-h.moved{border-color:#7ee07e}
.ui-h{z-index:1}.ui-h.ghost{z-index:0;border-style:dotted;background:rgba(255,255,255,.06)}.ui-h.ghost .ui-hl::after{content:" (not showing now)";font-weight:600;opacity:.75}
.ui-h.off{border-color:#888;background:rgba(0,0,0,.45)}.ui-h.off .ui-hl{text-decoration:line-through;opacity:.75}
.ui-hl{padding:2px 7px;border-radius:5px;background:#1e140c;color:#ffe27a;font:800 11px/1.3 Lora,sans-serif;white-space:nowrap;pointer-events:none}
.ui-hb{display:flex;gap:3px}
.ui-hb button{width:24px;height:22px;padding:0;border:0;border-radius:5px;background:#1e140c;color:#ffe27a;font-size:12px;line-height:1;cursor:pointer}
.ui-hb button:hover{background:#3a2a14}
.ui-hb button[data-ui-eye]{width:auto;padding:0 7px;font:700 11px/22px Lora,sans-serif}   /* (v1.7) Hide / Show in words */
/* (v1.7) MOVED PIECES THAT GROW OR POP OUT: they open away from the edge they hang from (ui-at-r, ui-at-b: placeAt) */
html[data-ui-theme="midnight"] .quickbar.qdock.ui-placed:not(.ui-at-b){flex-direction:column}   /* the dock rises from the bottom; hung from the top, it drops instead, so the slot under the pointer never moves */
.skcr.ui-at-r .skcr-drops{left:auto;right:79px;align-items:flex-end}   /* the crest's drops stack on its inside, never off the screen */
.skcr.ui-at-b .skcr-tip{top:auto;bottom:calc(100% + 8px)}
/* (v1.7) MOVE THINGS IN MIDNIGHT: moonlight hairlines and night glass, the type scale's labels */
html[data-ui-theme="midnight"] #uiLayer{background:repeating-linear-gradient(0deg,rgba(143,180,255,.05) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(143,180,255,.05) 0 1px,transparent 1px 24px),rgba(4,6,10,.42)}
html[data-ui-theme="midnight"] .ui-bar{border-radius:2px;background:rgba(9,13,21,.95);box-shadow:inset 0 0 0 1px rgba(143,180,255,.35),0 0 0 1px #04060a,0 10px 30px rgba(0,0,0,.6);color:#c9d3e6}
html[data-ui-theme="midnight"] .ui-bar b{font:400 15px/1 var(--k-disp);letter-spacing:.08em;color:#e9eef8}html[data-ui-theme="midnight"] .ui-bar small{font:400 13px/1.35 Lora,serif;opacity:1;color:#a6b3ce}
html[data-ui-theme="midnight"] .ui-h{border:1px dashed rgba(143,180,255,.75);border-radius:2px;background:rgba(143,180,255,.1)}
html[data-ui-theme="midnight"] .ui-h:hover{background:rgba(143,180,255,.2);border-style:solid}
html[data-ui-theme="midnight"] .ui-h.moved{border-color:#5bd38a}html[data-ui-theme="midnight"] .ui-h.ghost{border-style:dotted;background:rgba(143,180,255,.04)}
html[data-ui-theme="midnight"] .ui-h.off{border-color:rgba(166,179,206,.4);background:rgba(4,6,10,.55)}
html[data-ui-theme="midnight"] .ui-hl{border-radius:0;background:rgba(9,13,21,.92);box-shadow:inset 0 0 0 1px rgba(143,180,255,.25);color:#e9eef8;font:400 12px/1.5 var(--k-disp);letter-spacing:.1em;text-transform:uppercase}
html[data-ui-theme="midnight"] .ui-hb button{border-radius:0;background:linear-gradient(#262f41,#151b28);box-shadow:inset 0 0 0 1px rgba(143,180,255,.22);color:#c9d3e6}
html[data-ui-theme="midnight"] .ui-hb button:hover{background:linear-gradient(#2f3a50,#1b2232);color:#e9eef8}
/* Bom's "click again" over a tile (Ask before big buys) */
.bom-tile{position:relative}
.bom-sure{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:4px;border-radius:inherit;background:rgba(122,26,16,.9);color:#fff6dc;font:800 12px/1.25 Lora,sans-serif;font-style:normal;pointer-events:none}
/* the settings window's own pieces */
#setWin .ui-tabs{margin:-2px -2px 6px}
html[data-ui-theme="tavern"] #setWin .ui-tabs{flex-wrap:wrap;gap:3px 2px;padding:8px 8px 0}html[data-ui-theme="tavern"] #setWin .ui-tabs button{padding:7px 9px}html[data-ui-theme="tavern"] #setWin .ui-tabs button[aria-selected="true"]{padding:10px 10px 9px}   /* (2026-10-17, v1.7) six tabs with Audio: the Tavern's folder tabs are wider, so they come in and may wrap rather than run off the window */
.ui-segrow{cursor:default}
.ui-seg{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid #bfb193;border-radius:7px;overflow:hidden;background:#fff6dc}
.ui-seg button{border:0;border-left:1px solid #bfb193;padding:6px 10px;background:none;color:#4a3a24;font:800 12.5px/1 Lora,sans-serif;cursor:pointer}
.ui-seg button:first-child{border-left:0}
.ui-seg button[aria-pressed="true"]{background:#5a3220;color:#f6e9cc}
.ui-range{display:inline-flex;align-items:center;gap:8px}.ui-range input{width:120px}.ui-range output{min-width:40px;font:800 12.5px Lora,sans-serif;text-align:right}
.ui-pieces{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:9px 8px;background:#e6dcc4;border:1px solid #bfb193}
.ui-pieces>b{flex-basis:100%;font-size:14px}
.ui-pc{display:inline-flex;align-items:center;gap:5px;padding:3px 7px 3px 3px;border-radius:999px;background:#fff6dc;border:1px solid #cdbf9d;font-size:12.5px;font-weight:700}
.ui-pc button{border:0;border-radius:999px;padding:2px 8px;background:#4a9a3a;color:#fff;font:800 11px/1.4 Lora,sans-serif;cursor:pointer}
.ui-pc button[data-ui-back]{background:#5a3220;padding:2px 6px}
.ui-pc.off button[data-ui-eye]{background:#9a8d70}.ui-pc button:disabled{opacity:.6;cursor:default}
.ui-looks{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px}
.ui-look{display:grid;gap:4px;text-align:left;padding:8px;border:2px solid #bfb193;border-radius:9px;background:#e6dcc4;color:#2a2016;cursor:pointer;font:inherit}
.ui-look[aria-pressed="true"]{border-color:#c8963a;box-shadow:0 0 0 2px #ffd84a}
.ui-look b{font:700 15px/1.1 var(--k-disp,serif)}.ui-look small{font-size:12px;line-height:1.3;color:#6a5a40}
.ui-sw{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:4px;height:62px;padding:5px;border-radius:6px}
.ui-sw i{border-radius:4px}.ui-sw i:first-child{grid-row:span 2}
.ui-ognote{margin:0;padding:9px 10px;background:#fff6dc;border:1px solid #c8963a;border-radius:6px;font-size:13px;line-height:1.4}.ui-ognote a{color:#7a2a1a;font-weight:800}
.ui-look-tavern .ui-sw{background:#2a2016}.ui-look-tavern .ui-sw i{background:#efe2c4;box-shadow:inset 0 0 0 2px #8a6428}.ui-look-tavern .ui-sw i:first-child{background:linear-gradient(#5a3220 0 12px,#efe2c4 12px)}
.ui-look-midnight .ui-sw{background:#07090e}.ui-look-midnight .ui-sw i{background:#111725;box-shadow:inset 0 0 0 2px #2a313f,inset 0 0 0 3px #04060a}.ui-look-midnight .ui-sw i:first-child{background:linear-gradient(#0d121c 0 12px,#111725 12px);box-shadow:inset 0 0 0 2px #2a313f,inset 0 -2px 0 2px #8fb4ff}
@media (max-width:520px){.ui-looks{grid-template-columns:1fr}.ui-segrow{grid-template-columns:1fr}.ui-bar small{display:none}}

/* shared by the three drawn looks: the slim health box carries its own 8px border in the page's sheet */
html[data-ui-theme]:not([data-ui-theme="tavern"]) .side .stats.slim{border-width:1px}
html[data-ui-theme="midnight"] .win-head small{color:#9fb2d8}html[data-ui-theme="neon"] .win-head small{color:#ffb4ee}html[data-ui-theme="minimal"] .win-head small{color:#777}
/* ================================================================ MIDNIGHT (v1.6, the default look). Built from the owner's picks over five rounds of
   picker pages (tools/midnight/midnight-picks*.html, the art in tools/midnight/masters, the cut pieces in flat/ui/mn/): blackened iron frames lightly
   scuffed, titles on riveted iron nameplates, slate blended down to a whisper behind every window, dark iron buttons with a moonlit lip, tabs lit
   from below, sunken slots, Marcellus SC for headings over Lora (applyFont swaps the "Cinzel" face, so canvas text follows too), moonlight blue for
   "you can do this", gold for money and Legendaries only, ember for health. Everything the kit draws reads the --k-* tokens, so most windows follow
   from the first rule; the rest are the pieces the old CSS paints by hand. */
html[data-ui-theme="midnight"]{--bar:#0b0f17;--hud-bg:rgba(9,13,21,.82);--hud-ring:0 0 0 1px rgba(140,170,240,.22),0 10px 24px rgba(0,0,0,.55);--panel:#111725;--panel-ink:#e9eef8;--frame:#04060a;
  --k-ink:#e9eef8;--k-ink2:#b4c0d8;--k-ink3:#8391ad;--k-paper:#111725;--k-paper-hi:#1b2335;--k-card:#182033;--k-card-line:rgba(140,170,240,.22);--k-line:rgba(140,170,240,.14);
  --k-head:#0d121c;--k-head-ink:#f3f6fc;--k-head-sub:#b4c0d8;--k-gold:#f4c657;--k-gold-ink:#f4c657;--k-gold-hi:#ffe27a;--k-good:#5bd38a;--k-bad:#f2555a;--k-rare:#b07cff;
  --k-disp:"Cinzel",Georgia,serif;--mn-acc:#8fb4ff;--mn-glow:radial-gradient(60% 90% at 50% 100%,rgba(143,180,255,.42),transparent 72%);color-scheme:dark}
/* windows, dialogs, popups, info cards: iron round a night pane with the slate barely there */
html[data-ui-theme="midnight"] :is(.win,.k-win,.dlg,.pop-card,.info,.ipop){border:12px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/iron_frame.png?v=1) 18 / 18px repeat;border-radius:0;
  background:linear-gradient(rgba(17,23,37,.94),rgba(17,23,37,.94)),url(/v3/assets/img/glad/flat/ui/mn/slate_d.png?v=1) 0 0/128px 128px;background-clip:padding-box;color:var(--k-ink);box-shadow:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6))}
html[data-ui-theme="midnight"] .k-paper{background-color:transparent;background-image:none}
html[data-ui-theme="midnight"] .k-body,html[data-ui-theme="midnight"] .win-body{color:var(--k-ink)}
html[data-ui-theme="midnight"] :is(.win-head,.k-head){margin:0;padding:6px 8px 6px 10px;gap:10px;background:linear-gradient(rgba(140,170,240,.06),rgba(140,170,240,0));color:var(--k-head-ink);border:0;border-bottom:1px solid var(--k-line);border-image:none;border-radius:0;text-shadow:none}
html[data-ui-theme="midnight"] :is(.win-head,.k-head)>b{flex:0 1 auto;display:inline-flex;align-items:center;gap:7px;min-width:0;border:8px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/plate.png?v=1) 8 fill / 8px repeat;padding:0 10px;font:400 15px/16px var(--k-disp);letter-spacing:.07em;color:#f3f6fc;text-shadow:0 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-ui-theme="midnight"] :is(.win-head,.k-head)>b img{width:22px;height:22px;margin:-3px 0}
html[data-ui-theme="midnight"] :is(.win-head,.k-head) small,html[data-ui-theme="midnight"] .k-head .k-sub{color:var(--k-ink2)}
html[data-ui-theme="midnight"] :is(.win-x,.k-x,.dlg-x){flex:none;margin-left:auto;width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid #04060a;border-image:none;border-radius:2px;background:linear-gradient(#262f41,#151b28);box-shadow:inset 0 1px 0 rgba(200,215,240,.16),0 2px 3px rgba(0,0,0,.5);color:#c9d3e6;font:600 18px/1 Georgia,serif;text-shadow:none}
html[data-ui-theme="midnight"] :is(.win-x,.k-x,.dlg-x):hover{color:#fff;background:linear-gradient(#2c3649,#18202e);box-shadow:inset 0 1px 0 rgba(200,215,240,.2),inset 0 -2px 0 #f2555a}
html[data-ui-theme="midnight"] .k-foot{border-top:1px solid var(--k-line);background:rgba(4,6,10,.3)}
html[data-ui-theme="midnight"] .k-note,html[data-ui-theme="midnight"] .k-label{color:var(--k-ink2)}
/* buttons: dark iron; the main one has a moonlit lip, a spend has a gold one, a danger a red one */
html[data-ui-theme="midnight"] :is(.k-btn,.btn,.lk-btn,.lk-go,.decobtn,.emotes button,.chat-form button){border:1px solid #04060a;border-image:none;border-radius:2px;background:linear-gradient(#262f41,#151b28);color:#e9eef8;text-shadow:0 -1px 0 #000;box-shadow:inset 0 1px 0 rgba(200,215,240,.16),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5);filter:none}
html[data-ui-theme="midnight"] :is(.k-btn,.btn,.lk-btn,.lk-go,.decobtn,.emotes button,.chat-form button):hover:not(:disabled){background:linear-gradient(#2c3649,#18202e);border-image:none}
html[data-ui-theme="midnight"] .k-btn:not(.sec):not(.danger):not(.plain),html[data-ui-theme="midnight"] .lk-go,html[data-ui-theme="midnight"] .chat-form button{color:#e3edff;box-shadow:inset 0 1px 0 rgba(200,215,240,.2),inset 0 -2px 0 var(--mn-acc),0 0 12px rgba(143,180,255,.18),0 2px 4px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .k-btn.gold{color:var(--k-gold);box-shadow:inset 0 1px 0 rgba(255,230,160,.18),inset 0 -2px 0 var(--k-gold),0 2px 4px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .k-btn.danger{color:#ffc4c4;box-shadow:inset 0 1px 0 rgba(255,200,200,.14),inset 0 -2px 0 #f2555a,0 2px 4px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .k-btn.sec,html[data-ui-theme="midnight"] .k-btn.plain{color:var(--k-ink)}
html[data-ui-theme="midnight"] .k-btn:disabled{opacity:.5;filter:none}
/* tabs inside windows: capitals lit from below */
html[data-ui-theme="midnight"] .k-tabs{gap:2px;padding:0 8px;border-bottom:1px solid var(--k-line);background:none}
html[data-ui-theme="midnight"] .k-tabs button{margin:0;padding:9px 12px;border:0;border-radius:0;background:none;color:var(--k-ink3);font:400 12px/1 var(--k-disp);letter-spacing:.1em;text-transform:uppercase}
html[data-ui-theme="midnight"] .k-tabs button:hover{background:none;color:var(--k-ink)}
html[data-ui-theme="midnight"] .k-tabs button[aria-selected="true"]{color:#f3f6fc;background:var(--mn-glow);box-shadow:inset 0 -2px 0 var(--mn-acc);padding-bottom:9px}
html[data-ui-theme="midnight"] .k-seg{background:#0a0e15;box-shadow:inset 0 0 0 1px var(--k-card-line)}
html[data-ui-theme="midnight"] .k-seg button{color:var(--k-ink2)}html[data-ui-theme="midnight"] .k-seg button:hover{background:rgba(140,170,240,.08);color:var(--k-ink)}
html[data-ui-theme="midnight"] .k-seg button[aria-pressed="true"]{background:var(--k-paper-hi);color:#f3f6fc;box-shadow:inset 0 -2px 0 var(--mn-acc)}
/* rows, chips, slots */
html[data-ui-theme="midnight"] .k-row{background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
html[data-ui-theme="midnight"] .k-row:hover:not(:disabled){background:#212b42;box-shadow:inset 0 0 0 1px rgba(150,185,255,.45),0 2px 6px rgba(0,0,0,.4)}
html[data-ui-theme="midnight"] .k-row.off{background:rgba(24,32,51,.5);box-shadow:inset 0 0 0 1px rgba(140,170,240,.12)}
html[data-ui-theme="midnight"] .k-chip{background:rgba(140,170,240,.12);color:var(--k-ink2)}
html[data-ui-theme="midnight"] .k-chip.good{background:rgba(91,211,138,.14);color:#7fe0a4}html[data-ui-theme="midnight"] .k-chip.bad{background:rgba(242,85,90,.14);color:#ff8a8e}html[data-ui-theme="midnight"] .k-chip.gold{background:rgba(244,198,87,.12);color:var(--k-gold)}html[data-ui-theme="midnight"] .k-chip.rare{background:rgba(176,124,255,.16);color:#cfb2ff}
/* (2026-10-14, the owner's pick, round one's "Iron" again) each slot a scratched iron plate */
html[data-ui-theme="midnight"] :is(.slot,.k-slot,.eq,.hs-bi,.dlg-face,.qslot){border:1px solid #04060a;border-image:none;border-radius:2px;background:url(/v3/assets/img/glad/flat/ui/mn/iron_d.png?v=1) 50% 50%/128px 128px;box-shadow:inset 0 1px 0 rgba(200,215,240,.14),inset 0 -6px 10px rgba(0,0,0,.35);color:var(--k-ink)}
/* (2026-10-15, the owner's Yard 2 pass: "certain item icons in the forge, anvil, and others are too dark to discern on the dark blue of the midnight theme")
   a kit slot (every making window, recipe and shop row) holds its icon in a pool of moonlight over the iron, with a thin light rim round the picture, so
   coal, onyx and dark leathers read; and a locked or short recipe is dimmed ONCE, not three times over (tile .62 x icon .6 x grey was about a third) */
html[data-ui-theme="midnight"] .k-slot{background:radial-gradient(closest-side,rgba(176,200,245,.34),rgba(150,180,240,.12) 62%,transparent 100%),url(/v3/assets/img/glad/flat/ui/mn/iron_d.png?v=1) 50% 50%/128px 128px}
html[data-ui-theme="midnight"] .k-slot img{filter:drop-shadow(0 0 1px rgba(214,228,255,.55))}
html[data-ui-theme="midnight"] :is(.an-tile.short,.an-tile.lock,.k-row.off)>.k-slot img{filter:grayscale(.45) drop-shadow(0 0 1px rgba(214,228,255,.4));opacity:.85}
html[data-ui-theme="midnight"] :is(.an-tile.lock,.k-row.lock){opacity:.78}
html[data-ui-theme="midnight"] .qslot:hover{box-shadow:inset 0 1px 0 rgba(200,215,240,.14),inset 0 -6px 10px rgba(0,0,0,.35),0 0 0 1px rgba(150,185,255,.45)}
/* the chrome: the top bar on an iron rail, the side panel on night, the bag in iron */
html[data-ui-theme="midnight"] .top{background:url(/v3/assets/img/glad/flat/ui/mn/rail.png?v=1) 0 100%/56px 14px repeat-x,#0b0f17;border-bottom:0;padding-bottom:6px}
html[data-ui-theme="midnight"] .side{background:linear-gradient(rgba(11,15,23,.95),rgba(11,15,23,.95)),url(/v3/assets/img/glad/flat/ui/mn/slate_d.png?v=1) 0 0/128px 128px}
html[data-ui-theme="midnight"] .wrap .side{border-right:1px solid #04060a}
html[data-ui-theme="midnight"] .side .tabs{background:#0b0f17;border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] .tabs button{border:0;border-image:none;border-radius:0;background:transparent;box-shadow:none;filter:none;opacity:.62}
html[data-ui-theme="midnight"] .tabs button:hover{background:rgba(140,170,240,.06);opacity:.85}
html[data-ui-theme="midnight"] .tabs button[aria-pressed="true"]{opacity:1;background:var(--mn-glow);box-shadow:inset 0 -2px 0 var(--mn-acc)}
html[data-ui-theme="midnight"] #panel.panel{border:12px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/iron_frame.png?v=1) 18 / 18px repeat;border-radius:0;margin:4px 6px 6px;padding:2px;background:linear-gradient(rgba(17,23,37,.95),rgba(17,23,37,.95)),url(/v3/assets/img/glad/flat/ui/mn/slate_d.png?v=1) 0 0/128px 128px;background-clip:padding-box;box-shadow:none}
html[data-ui-theme="midnight"] #panel.panel::before,html[data-ui-theme="midnight"] #panel.panel::after{content:none}
html[data-ui-theme="midnight"] .stats{border:1px solid var(--k-line);border-image:none;border-radius:0;background:rgba(4,6,10,.45);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
/* health in the iron bar frame, ember inside it */
html[data-ui-theme="midnight"] .hpb-bar{height:22px;border-style:solid;border-width:4px 11px 5px;border-image:url(/v3/assets/img/glad/flat/ui/mn/barframe.png?v=1) 4 11 5 11 / 4px 11px 5px repeat;border-radius:0;background:#05070b;background-clip:padding-box;box-shadow:none;overflow:hidden}
html[data-ui-theme="midnight"] .hpb-bar i{background:linear-gradient(rgba(255,255,255,.12),transparent 50%),linear-gradient(90deg,#4a0b10,#a8222a 65%,#ff5a50);box-shadow:inset -2px 0 0 #ffd5cc,0 0 10px rgba(255,80,70,.5)}
html[data-ui-theme="midnight"] .hpb.mid .hpb-bar i{background:linear-gradient(rgba(255,255,255,.12),transparent 50%),linear-gradient(90deg,#4a2a0b,#b8641a 65%,#ffb35a)}
html[data-ui-theme="midnight"] .hpb-bar b{font:700 11.5px/13px Lora,serif}
html[data-ui-theme="midnight"] .ab-meter{border-radius:0;box-shadow:0 0 0 1px #04060a,inset 0 2px 3px rgba(0,0,0,.8)}
/* over the world: glass */
html[data-ui-theme="midnight"] .chat-box{border:1px solid var(--k-card-line);border-image:none;border-radius:0;background:rgba(9,13,21,.86)}
html[data-ui-theme="midnight"] .chat-head{border:0;border-image:none;border-bottom:1px solid var(--k-line);background:transparent;margin:0}
html[data-ui-theme="midnight"] .chat-tab{border:1px solid #04060a;border-image:none;border-radius:2px;background:linear-gradient(#1d2535,#111725);color:var(--k-ink2);text-shadow:none;box-shadow:inset 0 1px 0 rgba(200,215,240,.12)}
html[data-ui-theme="midnight"] .chat-tab[aria-expanded="true"],html[data-ui-theme="midnight"] .chat-tab[aria-pressed="true"]{color:#f3f6fc;background:var(--mn-glow),#111725;box-shadow:inset 0 -2px 0 var(--mn-acc)}
html[data-ui-theme="midnight"] #chatTab{border:1px solid var(--k-card-line);border-image:none;border-radius:0;background:rgba(9,13,21,.86)}
html[data-ui-theme="midnight"] :is(.tourbox,.buffbar){border-radius:0;background:rgba(9,13,21,.82);box-shadow:0 0 0 1px var(--k-card-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-ui-theme="midnight"] .feed p{background:rgba(9,13,21,.8);border-radius:0;box-shadow:0 0 0 1px rgba(140,170,240,.14)}
html[data-ui-theme="midnight"] .mini{border-radius:0;box-shadow:0 0 0 1px #04060a,0 0 0 4px #1b212d,0 0 0 5px #04060a,0 8px 18px rgba(0,0,0,.6)}
html[data-ui-theme="midnight"] .pmeter{background:rgba(9,13,21,.9);box-shadow:0 0 0 1px var(--k-card-line),0 8px 20px rgba(0,0,0,.45)}
html[data-ui-theme="midnight"] .lvlup{background:linear-gradient(90deg,rgba(143,180,255,.22),transparent 85%),#0d121d;border:1px solid rgba(143,180,255,.5);border-radius:0;box-shadow:0 8px 20px rgba(0,0,0,.6)}
/* the settings window's own pieces */
html[data-ui-theme="midnight"] .set,html[data-ui-theme="midnight"] .ui-pieces,html[data-ui-theme="midnight"] .ui-look{background:var(--k-card);border-color:var(--k-card-line);color:var(--k-ink)}
html[data-ui-theme="midnight"] .ui-look small{color:var(--k-ink2)}
html[data-ui-theme="midnight"] .ui-seg{background:#0a0e15;border-color:var(--k-card-line)}html[data-ui-theme="midnight"] .ui-seg button{color:var(--k-ink2);border-left-color:var(--k-card-line)}html[data-ui-theme="midnight"] .ui-seg button[aria-pressed="true"]{background:var(--k-paper-hi);color:#f3f6fc;box-shadow:inset 0 -2px 0 var(--mn-acc)}
html[data-ui-theme="midnight"] .ui-pc{background:#0a0e15;border-color:var(--k-card-line)}
html[data-ui-theme="midnight"] .ui-ognote{background:rgba(244,198,87,.08);border-color:rgba(244,198,87,.4)}html[data-ui-theme="midnight"] .ui-ognote a{color:var(--k-gold)}
html[data-ui-theme="midnight"] .ui-grip{background:url(/v3/assets/img/glad/flat/ui/mn/rail.png?v=1) 0 100%/56px 14px repeat-x,#0b0f17}

/* MIDNIGHT, batch two: the wallet as three rows on one wide iron plate (round three's pick: icon, name, the amount right-aligned; the names are CSS
   so the markup stays the one every look shares; corn only shows while the Long Night runs, as before), the VIP fold in iron, the bag's header
   buttons, and the chat's tabs lit from below */
html[data-ui-theme="midnight"] .wl-strip{flex-direction:column;gap:1px;padding:6px 12px;border-radius:0;background:url(/v3/assets/img/glad/flat/ui/mn/wallet_plate.png?v=1) center/100% 100% no-repeat,#151b27;box-shadow:0 0 0 1px #04060a,0 3px 8px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .wl-s{justify-content:flex-start;gap:8px;padding:1px 0;background:none;border-radius:0}
html[data-ui-theme="midnight"] .wl-s img{width:22px;height:22px;flex:none}
html[data-ui-theme="midnight"] .wl-s::after{order:1;flex:1;font:400 11px/1 var(--k-disp);letter-spacing:.1em;text-transform:uppercase;color:#c3cde2;text-shadow:0 1px 0 #000}
html[data-ui-theme="midnight"] .wl-s b{order:2;font:700 14px Lora,serif;color:#f3f6fc;text-shadow:0 1px 0 #000;font-variant-numeric:tabular-nums}
html[data-ui-theme="midnight"] .wl-s em{order:3}
html[data-ui-theme="midnight"] .wl-tix::after{content:"Tickets"}html[data-ui-theme="midnight"] .wl-zc::after{content:"ZCoins"}html[data-ui-theme="midnight"] .wl-frag::after{content:"Star fragments"}html[data-ui-theme="midnight"] .wl-corn::after{content:"Candy corn · event"}
html[data-ui-theme="midnight"] .wl-tix b,html[data-ui-theme="midnight"] .wl-zc b{color:var(--k-gold)}
html[data-ui-theme="midnight"] .wl-fold,html[data-ui-theme="midnight"] .wallet{border-radius:0;background:rgba(4,6,10,.5);box-shadow:0 0 0 1px var(--k-card-line);color:var(--k-ink)}
html[data-ui-theme="midnight"] .wl-fold summary>span{color:var(--k-ink2)}
html[data-ui-theme="midnight"] .wl-row{border-radius:0;background:rgba(140,170,240,.06)}html[data-ui-theme="midnight"] .wl-row small,html[data-ui-theme="midnight"] .wl-h{color:var(--k-ink2)}
html[data-ui-theme="midnight"] .wallets>.wl-next{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .wl-vipbar{border-radius:0;background:#05070b}
html[data-ui-theme="midnight"] .invsort.iph-b{border:1px solid #04060a;border-radius:2px;background:linear-gradient(#262f41,#151b28);box-shadow:inset 0 1px 0 rgba(200,215,240,.16),0 2px 3px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .invsort.iph-b:hover{background:linear-gradient(#2c3649,#18202e);border-color:#04060a}
html[data-ui-theme="midnight"] .inv-ph .iph-t small{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .inv-ph .iph-t,html[data-ui-theme="midnight"] .inv-ph .iph-t b{color:var(--k-ink)}
html[data-ui-theme="midnight"] .chat-head b{color:#f3f6fc;font:400 14px var(--k-disp);letter-spacing:.08em;text-transform:uppercase}html[data-ui-theme="midnight"] .chat-head small{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .chat-views{gap:0}
html[data-ui-theme="midnight"] .chat-views button{border:0;border-radius:0;background:none;color:var(--k-ink3);padding:4px 9px;font:400 11px var(--k-disp);letter-spacing:.1em;text-transform:uppercase}
html[data-ui-theme="midnight"] .chat-views button[aria-selected="true"]{color:#f3f6fc;background:var(--mn-glow);box-shadow:inset 0 -2px 0 var(--mn-acc);border:0}
html[data-ui-theme="midnight"] .chat-min{border:1px solid #04060a;border-radius:2px;background:linear-gradient(#262f41,#151b28);color:#c9d3e6}

/* MIDNIGHT, batch three: the ability bar is round three's "glass with studs" (a dark pane over scratched iron, an iron stud in each corner, the
   slots sunken); its health sits in the iron bar frame (ember); the NPC's choices are rows; a level-up is a
   corner toast (round four's pick) rather than a banner over the middle of the world */
html[data-ui-theme="midnight"] .actbar .abilbar{border:1px solid #04060a;border-image:none;padding:10px 12px;background:radial-gradient(circle at 6px 6px,#c9d2e4 0 1.6px,#4c5568 2.6px,#1b1f29 3.6px,transparent 4.2px),radial-gradient(circle at calc(100% - 6px) 6px,#c9d2e4 0 1.6px,#4c5568 2.6px,#1b1f29 3.6px,transparent 4.2px),radial-gradient(circle at 6px calc(100% - 6px),#c9d2e4 0 1.6px,#4c5568 2.6px,#1b1f29 3.6px,transparent 4.2px),radial-gradient(circle at calc(100% - 6px) calc(100% - 6px),#c9d2e4 0 1.6px,#4c5568 2.6px,#1b1f29 3.6px,transparent 4.2px),linear-gradient(rgba(9,13,21,.72),rgba(9,13,21,.72)),url(/v3/assets/img/glad/flat/ui/mn/iron_d.png?v=1) 0 0/128px 128px;box-shadow:inset 0 1px 0 rgba(200,215,240,.12),0 6px 14px rgba(0,0,0,.6);filter:none}
html[data-ui-theme="midnight"] .actbar .abslot{border-radius:2px;background:linear-gradient(#151c2c,#0f1520);box-shadow:inset 0 0 0 1px rgba(140,170,240,.16),inset 0 3px 6px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .actbar .abslot:hover{box-shadow:inset 0 0 0 1px rgba(150,185,255,.55),inset 0 3px 6px rgba(0,0,0,.5),0 0 8px rgba(143,180,255,.3)}
html[data-ui-theme="midnight"] .actbar .abslot .abk{color:#c9d3e6}
html[data-ui-theme="midnight"] .ab-meter{height:22px;border-style:solid;border-width:4px 11px 5px;border-image:url(/v3/assets/img/glad/flat/ui/mn/barframe.png?v=1) 4 11 5 11 / 4px 11px 5px repeat;border-radius:0;background:#05070b;background-clip:padding-box;box-shadow:none;overflow:hidden}
html[data-ui-theme="midnight"] .ab-meter .abm-ico{display:none}
html[data-ui-theme="midnight"] .ab-meter.hp i{background:linear-gradient(rgba(255,255,255,.12),transparent 50%),linear-gradient(90deg,#4a0b10,#a8222a 65%,#ff5a50);box-shadow:inset -2px 0 0 #ffd5cc}
html[data-ui-theme="midnight"] .ab-meter span{font:700 11px/13px Lora,serif}
html[data-ui-theme="midnight"] .dlg{grid-template-columns:96px 1fr}
html[data-ui-theme="midnight"] .dlg-opts button{border:0;border-bottom:1px solid var(--k-line);border-radius:0;background:none;color:var(--k-ink);padding:6px 8px;text-align:left}
html[data-ui-theme="midnight"] .dlg-opts button:hover,html[data-ui-theme="midnight"] .dlg-opts button:focus-visible{background:radial-gradient(40% 120% at 0% 50%,rgba(143,180,255,.2),transparent 70%);box-shadow:inset 2px 0 0 var(--mn-acc);border-color:var(--k-line)}
html[data-ui-theme="midnight"] .dlg-opts button span{color:var(--mn-acc)}
html[data-ui-theme="midnight"] .lvlup{left:16px;top:auto;bottom:250px;transform:none;padding:10px 16px;text-align:left}
html[data-ui-theme="midnight"] .info-b{background-color:transparent;background-image:none}
html[data-ui-theme="midnight"] .info-f{border-top:1px solid var(--k-line);background:rgba(4,6,10,.3)}

/* MIDNIGHT, pass two: THE YOU CARD at the top of the panel (renderStats builds it; every other look shows only the slim bar). The torchlit wall
   behind you (card_bg), a very subtle border, your face at 2x in a sunken window, the iron level ring, health in the iron frame. Shown on a desktop
   too, where the other looks hide the slim bar (the area's name lives on the minimap). */
html[data-ui-theme="midnight"] .side .stats.slim{display:flex;align-items:center;gap:10px;margin:10px 10px 4px;padding:8px 10px;border:1px solid rgba(140,170,240,.16);border-image:none;border-radius:0;
  background:linear-gradient(90deg,rgba(7,9,14,.15),rgba(7,9,14,.55)),url(/v3/assets/img/glad/flat/ui/mn/card_bg.png?v=1) center/cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.45)}
@media (min-width:521px){html[data-ui-theme="midnight"] .side .stats.slim{display:flex}}
html[data-ui-theme="midnight"] .stats .yc-av{display:block;width:52px;height:52px;flex:none;overflow:hidden;background:radial-gradient(circle at 50% 75%,rgba(143,180,255,.28),transparent 70%),#05070b;border:1px solid rgba(140,170,240,.2)}
html[data-ui-theme="midnight"] .stats .yc-av:empty{display:none}
html[data-ui-theme="midnight"] .stats .yc-av img{display:block;width:136px;height:136px;max-width:none;margin:-14px 0 0 -42px;image-rendering:auto}
html[data-ui-theme="midnight"] .stats .yc-mid{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
html[data-ui-theme="midnight"] .stats .yc-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
html[data-ui-theme="midnight"] .stats .yc-name{font:700 14.5px/1.2 Lora,serif;color:#f3f6fc;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* (2026-10-17, v1.6) your Combat on a glass chip beside your name (was the iron ring at the right); the face is a way into your profile */
html[data-ui-theme="midnight"] .stats .yc-cb{flex:none;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px 0 4px;font:700 12px/1 Lora,serif;color:#f3f6fc;font-variant-numeric:tabular-nums;text-shadow:0 1px 1px #000;
  background:linear-gradient(rgba(200,215,240,.14),rgba(200,215,240,.02) 55%,rgba(9,13,21,.35)),rgba(9,13,21,.62);border:1px solid rgba(143,180,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 8px rgba(143,180,255,.14);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html[data-ui-theme="midnight"] .stats .yc-cb img{width:14px;height:14px;image-rendering:auto}
html[data-ui-theme="midnight"] .stats .yc-av{cursor:pointer}html[data-ui-theme="midnight"] .stats .yc-av:hover{border-color:rgba(143,180,255,.6);box-shadow:0 0 8px rgba(143,180,255,.3)}
html[data-ui-theme="midnight"] .top .me .top-face{cursor:pointer}
html[data-ui-theme="midnight"] .stats .yc-sub{display:block;font:600 11.5px/1.2 Lora,serif;color:#b4c0d8;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-ui-theme="midnight"] .stats .hpb{gap:0}html[data-ui-theme="midnight"] .stats .hpb>img{display:none}html[data-ui-theme="midnight"] .stats .hpb-area{display:none}

/* MIDNIGHT, pass two: THE ITEM TOOLTIP (round three's pick: iron frame, the rarity in a band under the nameplate). The name sits on the plate; the
   rarity and slot line becomes a band washed in the piece's rarity colour (--rar, set by eastscape-tip.js for rolled loot; plain gear gets moonlight) */
html[data-ui-theme="midnight"] #gearTip{width:250px;padding:4px 8px 7px;border:12px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/iron_frame.png?v=1) 18 / 18px repeat;border-radius:0;
  background:linear-gradient(rgba(13,18,28,.97),rgba(13,18,28,.97)),url(/v3/assets/img/glad/flat/ui/mn/slate_d.png?v=1) 0 0/128px 128px;background-clip:padding-box;color:var(--k-ink);box-shadow:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.65));font-family:Lora,serif}
html[data-ui-theme="midnight"] #gearTip h5{--rar:#8fb4ff;flex-wrap:wrap;gap:6px;margin:0 -8px;padding:0 8px;font:400 15px/1.2 var(--k-disp);letter-spacing:.04em;color:#f3f6fc;text-shadow:0 1px 0 #000}
html[data-ui-theme="midnight"] #gearTip h5>span{flex:1}
html[data-ui-theme="midnight"] #gearTip h5 .fg{color:var(--k-gold)}
html[data-ui-theme="midnight"] #gearTip h5 small{flex-basis:100%;order:3;margin:3px -8px 2px;padding:3px 8px;font:700 10px/1.3 Lora,serif;letter-spacing:.08em;color:#e9eef8;
  background:linear-gradient(100deg,color-mix(in srgb,var(--rar) 46%,transparent),color-mix(in srgb,var(--rar) 10%,transparent) 70%,transparent);border-top:1px solid color-mix(in srgb,var(--rar) 60%,transparent);border-bottom:1px solid rgba(0,0,0,.6);text-shadow:0 1px 1px #000}
html[data-ui-theme="midnight"] #gearTip .rq{color:var(--k-ink3)}html[data-ui-theme="midnight"] #gearTip .rq.no{color:var(--k-bad)}
html[data-ui-theme="midnight"] #gearTip .fx{color:var(--k-ink2)}html[data-ui-theme="midnight"] #gearTip .up{color:var(--k-good)}html[data-ui-theme="midnight"] #gearTip .down{color:var(--k-bad)}html[data-ui-theme="midnight"] #gearTip .same,html[data-ui-theme="midnight"] #gearTip .hint{color:var(--k-ink3)}
html[data-ui-theme="midnight"] #gearTip .vs{border-top:1px solid var(--k-line);color:var(--mn-acc)}
html[data-ui-theme="midnight"] #gearTip .forged{border-radius:0;background:linear-gradient(90deg,rgba(244,198,87,.22),rgba(244,198,87,.04));color:var(--k-gold);box-shadow:inset 2px 0 0 var(--k-gold)}

/* MIDNIGHT, pass two: BUFFS DRAIN (round five's "sweep"). A timed buff's icon is greyed clockwise from the top as its clock runs down
   (--f, the share still to run, from buffsOf's frac), with a thin moonlit arc round the part that is left; worn buffs never drain */
html[data-ui-theme="midnight"] .buff{border-radius:3px;padding:5px;overflow:visible}
html[data-ui-theme="midnight"] .buff.tm::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:conic-gradient(transparent 0 calc(var(--f,1) * 360deg),rgba(4,6,10,.66) calc(var(--f,1) * 360deg) 360deg)}
html[data-ui-theme="midnight"] .buff.tm::before{content:"";position:absolute;inset:-3px;border-radius:5px;pointer-events:none;padding:2px;
  background:conic-gradient(rgba(190,212,255,.95) 0 calc(var(--f,1) * 360deg),transparent calc(var(--f,1) * 360deg) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html[data-ui-theme="midnight"] .buff .bn{z-index:1;border-radius:2px;background:#05070b;font-family:Lora,serif}

/* MIDNIGHT, pass two: THE MINIMAP IN THE IRON RING (round four). drawMini makes the canvas square and centres it on you; the ring (mapring.png,
   128x133, its hole 86 across at 21,25) sits over it, and the place's name hangs under it on an iron plate */
html[data-ui-theme="midnight"] .miniwrap{width:128px;height:133px;margin-bottom:12px}
html[data-ui-theme="midnight"] .miniwrap::after{content:"";position:absolute;inset:0;background:url(/v3/assets/img/glad/flat/ui/mn/mapring.png?v=1) 0 0/128px 133px no-repeat;image-rendering:pixelated;pointer-events:none;z-index:5;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
html[data-ui-theme="midnight"] .miniwrap .mini{position:absolute;left:19px;top:23px;width:90px;height:90px;border-radius:50%;box-shadow:none;background:#05070b;image-rendering:pixelated}
html[data-ui-theme="midnight"] .mini-name{bottom:-12px;z-index:6;border-radius:0;padding:2px 10px 3px;background:linear-gradient(#232a38,#141a26);box-shadow:0 0 0 1px #04060a,inset 0 1px 0 rgba(200,215,240,.14),0 3px 6px rgba(0,0,0,.5);color:#e9eef8;font-family:var(--k-disp)}
@media (max-width:760px){html[data-ui-theme="midnight"] .miniwrap{width:96px;height:100px;margin-bottom:10px}html[data-ui-theme="midnight"] .miniwrap::after{background-size:96px 100px}html[data-ui-theme="midnight"] .miniwrap .mini{left:14px;top:17px;width:68px;height:68px}html[data-ui-theme="midnight"] .mini-name{bottom:-10px}}

/* MIDNIGHT, pass two, round five: THE SKILLS TAB AS A LIST WITH BARS (a row a skill: icon, name over its progress, the level on the right) and
   THE SKILL CARD (#skCard, built in eastscape.html: level, xp, what's left, what the next levels unlock) */
html[data-ui-theme="midnight"] .skh{margin:12px 10px 4px;font:400 12px/1 var(--k-disp);letter-spacing:.1em;color:#c9d3e6;opacity:1;border-bottom:1px solid var(--k-line);padding-bottom:5px}
html[data-ui-theme="midnight"] .skh small{margin-left:auto;font:600 11px Lora,serif;letter-spacing:.02em;text-transform:none;color:var(--k-ink3)}
html[data-ui-theme="midnight"] .skg,html[data-ui-theme="midnight"] .skg.four{display:flex;flex-direction:column;gap:2px;padding:2px 8px 4px}
html[data-ui-theme="midnight"] .skt{display:grid;grid-template-columns:30px 1fr auto;grid-template-areas:"i n b" "i x b";align-items:center;column-gap:9px;row-gap:3px;padding:5px 9px 6px;
  background:linear-gradient(#151b28,#10151f);border:0;border-radius:0;box-shadow:inset 0 0 0 1px rgba(140,170,240,.08),inset 0 -1px 0 rgba(0,0,0,.5);color:var(--k-ink);text-align:left;transform:none}
html[data-ui-theme="midnight"] .skt>i{grid-area:i;height:30px;justify-content:center}html[data-ui-theme="midnight"] .skt>i .ico{width:28px;height:28px}
html[data-ui-theme="midnight"] .skt small{grid-area:n;font:600 13px/1.1 Lora,serif;color:var(--k-ink);letter-spacing:0}
html[data-ui-theme="midnight"] .skt b{grid-area:b;min-width:30px;text-align:right;font:400 19px/1 var(--k-disp);color:#f3f6fc;text-shadow:0 1px 0 #000}
html[data-ui-theme="midnight"] .skt .xpb{grid-area:x;height:6px;margin:0;background:#05070b;box-shadow:inset 0 0 0 1px #04060a,0 1px 0 rgba(140,170,240,.1)}
html[data-ui-theme="midnight"] .skt .xpb i{background:linear-gradient(rgba(255,255,255,.18),transparent 60%),linear-gradient(90deg,#3e5f9e,#8fb4ff)}
html[data-ui-theme="midnight"] .skt:hover,html[data-ui-theme="midnight"] .skt:focus-visible{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.2),transparent 70%),linear-gradient(#182033,#121827);box-shadow:inset 2px 0 0 var(--mn-acc),inset 0 0 0 1px rgba(140,170,240,.16)}
html[data-ui-theme="midnight"] .skt.hot{box-shadow:inset 2px 0 0 var(--k-good),inset 0 0 0 1px rgba(91,211,138,.2)}html[data-ui-theme="midnight"] .skt.hot .xpb i{background:linear-gradient(rgba(255,255,255,.18),transparent 60%),linear-gradient(90deg,#2e7a4c,#5bd38a)}
html[data-ui-theme="midnight"] .skt .wp{top:6px;right:48px}html[data-ui-theme="midnight"] .skt .wp i{background:#1b2232;box-shadow:inset 0 0 0 1px #3a4458}html[data-ui-theme="midnight"] .skt .wp i.g{background:var(--k-gold);box-shadow:none}
#skCard{display:none}
html[data-ui-theme="midnight"] #skCard{display:block;position:fixed;z-index:90;width:250px;padding:6px 10px 8px;pointer-events:none;border:12px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/iron_frame.png?v=1) 18 / 18px repeat;
  background:linear-gradient(rgba(13,18,28,.97),rgba(13,18,28,.97)),url(/v3/assets/img/glad/flat/ui/mn/slate_d.png?v=1) 0 0/128px 128px;background-clip:padding-box;color:var(--k-ink);font:500 12.5px/1.35 Lora,serif;filter:drop-shadow(0 12px 22px rgba(0,0,0,.65))}
html[data-ui-theme="midnight"] #skCard[hidden]{display:none}
html[data-ui-theme="midnight"] .skc-h{display:flex;align-items:center;gap:8px}html[data-ui-theme="midnight"] .skc-h i{font-style:normal;display:flex}html[data-ui-theme="midnight"] .skc-h .ico{width:28px;height:28px}
html[data-ui-theme="midnight"] .skc-h b{flex:1;font:400 16px/1.1 var(--k-disp);letter-spacing:.04em;color:#f3f6fc}
html[data-ui-theme="midnight"] .skc-lv{width:30px;height:30px;display:grid;place-items:center;background:url(/v3/assets/img/glad/flat/ui/mn/ring.png?v=1) center/27px 26px no-repeat;font:700 11px/1 Georgia,serif;color:#f3f6fc;text-shadow:0 1px 0 #000;image-rendering:pixelated}
html[data-ui-theme="midnight"] .skc-bar{height:8px;margin:7px 0 4px;background:#05070b;box-shadow:inset 0 0 0 1px #04060a}html[data-ui-theme="midnight"] .skc-bar i{display:block;height:100%;background:linear-gradient(rgba(255,255,255,.2),transparent 60%),linear-gradient(90deg,#3e5f9e,#8fb4ff)}
html[data-ui-theme="midnight"] .skc-x{display:flex;justify-content:space-between;gap:8px;color:var(--k-ink3);font-size:11.5px}
html[data-ui-theme="midnight"] .skc-n{margin:8px 0 3px;padding-top:6px;border-top:1px solid var(--k-line);font:400 11px/1 var(--k-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--mn-acc)}
html[data-ui-theme="midnight"] .skc-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
html[data-ui-theme="midnight"] .skc-l li{display:flex;align-items:center;gap:6px;min-width:0}html[data-ui-theme="midnight"] .skc-l li b{flex:none;min-width:22px;font:700 11px/1 Georgia,serif;color:var(--k-gold)}
html[data-ui-theme="midnight"] .skc-l li .ico{width:20px;height:20px;flex:none}html[data-ui-theme="midnight"] .skc-l li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-ui-theme="midnight"] .skc-f{margin-top:7px;font-size:11px;color:var(--k-ink3)}

/* MIDNIGHT, round five: THE GEAR TAB, "cross and totals" with your portrait kept (the owner's note). The slots stay round you in the cross, sunk into
   the iron; you stand in a moonlit alcove; the totals are one iron band of five readouts under it, and the Armour / Work clothes switch is a seg */
html[data-ui-theme="midnight"] .doll-fig{border-radius:0;background:radial-gradient(ellipse 70% 40% at 50% 92%,rgba(143,180,255,.22),transparent 70%),radial-gradient(ellipse 80% 60% at 50% 30%,rgba(143,180,255,.08),transparent 70%),linear-gradient(#0d121c,#070a10);
  box-shadow:inset 0 0 0 1px rgba(140,170,240,.16),inset 0 0 0 2px #04060a,inset 0 10px 20px rgba(0,0,0,.55)}
html[data-ui-theme="midnight"] .doll-fig::after{content:"";position:absolute;left:18%;right:18%;bottom:6px;height:2px;background:linear-gradient(90deg,transparent,rgba(143,180,255,.55),transparent)}
html[data-ui-theme="midnight"] .doll .eq:not(.empty):hover{box-shadow:inset 0 0 0 1px rgba(150,185,255,.55),0 0 8px rgba(143,180,255,.3)}
html[data-ui-theme="midnight"] .eq small{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .bstrip{gap:0;margin:6px 8px 4px;padding:0;background:linear-gradient(#1a202c,#121722);box-shadow:inset 0 0 0 1px #04060a,inset 0 1px 0 rgba(200,215,240,.12),0 3px 8px rgba(0,0,0,.45)}
html[data-ui-theme="midnight"] .bstrip span{border:0;border-radius:0;background:none;padding:6px 1px 5px;border-left:1px solid rgba(0,0,0,.55);box-shadow:inset 1px 0 0 rgba(140,170,240,.07)}
html[data-ui-theme="midnight"] .bstrip span:first-child{border-left:0;box-shadow:none}
html[data-ui-theme="midnight"] .bstrip b{font:400 15px/1.2 var(--k-disp);color:#f3f6fc;text-shadow:0 1px 0 #000}html[data-ui-theme="midnight"] .bstrip small{color:var(--k-ink3);font-family:Lora,serif}
html[data-ui-theme="midnight"] .bwield{color:var(--k-ink2)}
html[data-ui-theme="midnight"] .wsw{border-radius:0;background:#0a0e16;box-shadow:inset 0 0 0 1px #04060a,inset 0 0 0 2px rgba(140,170,240,.1);padding:2px}
html[data-ui-theme="midnight"] .wsw button{border-radius:0;color:var(--k-ink3);font:400 12px var(--k-disp);letter-spacing:.06em}
html[data-ui-theme="midnight"] .wsw button.on{background:var(--mn-glow),linear-gradient(#1b2335,#141b2a);color:#f3f6fc;box-shadow:inset 0 -2px 0 var(--mn-acc)}

/* MIDNIGHT, round five: YOUR PET, UP FRONT. The one following you stands large in a moonlit alcove with its name, level, what it does and its
   growth bar under it, the Kennel button below; the starred ones sit under that as the quick swap row. Pet portraits everywhere sit on night,
   not on a white tile, keeping their rank ring. */
html[data-ui-theme="midnight"] .pp{background:radial-gradient(circle at 50% 70%,rgba(143,180,255,.22),transparent 65%),#0b0f17}
html[data-ui-theme="midnight"] .kn-worn{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;padding:14px 10px 10px;margin:4px 0 6px;border-radius:0;
  background:radial-gradient(ellipse 60% 30% at 50% 44%,rgba(143,180,255,.16),transparent 70%),linear-gradient(#111725,#0b0f17);box-shadow:inset 0 0 0 1px #04060a,inset 0 0 0 2px rgba(140,170,240,.12)}
html[data-ui-theme="midnight"] .kn-worn>.pp{width:116px;height:116px;border-radius:50%}html[data-ui-theme="midnight"] .kn-worn>.pp img{width:88px;height:88px}
html[data-ui-theme="midnight"] .kn-worn>span{justify-items:center;width:100%}
html[data-ui-theme="midnight"] .kn-worn b{font:400 15px/1.2 var(--k-disp);letter-spacing:.04em;color:#f3f6fc}html[data-ui-theme="midnight"] .kn-worn small{color:var(--k-ink2);font-size:11.5px}
html[data-ui-theme="midnight"] .kn-wbar{width:80%;height:6px;border-radius:0;background:#05070b;box-shadow:inset 0 0 0 1px #04060a;margin-top:5px}html[data-ui-theme="midnight"] .kn-wbar i{background:linear-gradient(rgba(255,255,255,.2),transparent 60%),linear-gradient(90deg,#2e7a4c,#5bd38a)}
html[data-ui-theme="midnight"] .kn-quick{justify-content:center}html[data-ui-theme="midnight"] .kn-quick .eq.on{box-shadow:inset 0 0 0 1px var(--mn-acc),0 0 8px rgba(143,180,255,.35)}

/* MIDNIGHT, round five: THE QUEST LOG, list and detail. The list is a dark rail of rows (the open one lit from the left in moonlight, not gold:
   gold is money); the page has a header band, the steps as sunken rows with the one you are on lit, and the rewards on iron chips */
html[data-ui-theme="midnight"] .qj-log{background:rgba(4,6,10,.35);border-right:1px solid var(--k-line)}
html[data-ui-theme="midnight"] .qj-gh{font:400 11.5px/1 var(--k-disp);color:#c9d3e6}html[data-ui-theme="midnight"] .qj-gh small{border-radius:0;background:#0a0e16;box-shadow:inset 0 0 0 1px rgba(140,170,240,.14);color:var(--k-ink3)}
html[data-ui-theme="midnight"] .qj-e{border-radius:0;background:linear-gradient(#151b28,#10151f);box-shadow:inset 0 0 0 1px rgba(140,170,240,.08),inset 0 -1px 0 rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .qj-e:hover{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.14),transparent 70%),linear-gradient(#182033,#121827)}
html[data-ui-theme="midnight"] .qj-e.on{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.24),transparent 70%),linear-gradient(#1b2335,#141b2a);box-shadow:inset 3px 0 0 var(--mn-acc),inset 0 0 0 1px rgba(150,185,255,.3)}
html[data-ui-theme="midnight"] .qj-e b{font:400 13.5px/1.2 var(--k-disp);letter-spacing:.02em;color:#f3f6fc}html[data-ui-theme="midnight"] .qj-e small{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .qj-m.new{background:#0a0e16;box-shadow:inset 0 0 0 1px rgba(140,170,240,.25);color:var(--k-ink3)}html[data-ui-theme="midnight"] .qj-m.done{background:rgba(91,211,138,.16);color:var(--k-good)}
html[data-ui-theme="midnight"] .qj-m.active{background:conic-gradient(var(--k-good) var(--p),#1b2232 0)}html[data-ui-theme="midnight"] .qj-m.locked{background:#0a0e16}
html[data-ui-theme="midnight"] .qj-page{background:radial-gradient(80% 50% at 50% 0%,rgba(143,180,255,.06),transparent 70%)}
html[data-ui-theme="midnight"] .qj-dh{margin:-14px -18px 0;padding:14px 18px 12px;background:linear-gradient(rgba(140,170,240,.06),transparent);border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] .qj-dh h3{font:400 23px/1.1 var(--k-disp);letter-spacing:.03em;color:#f3f6fc;text-shadow:0 1px 0 #000}
html[data-ui-theme="midnight"] .qj-brief{color:var(--k-ink2)}
html[data-ui-theme="midnight"] .qj-steps li{border-radius:0;background:rgba(140,170,240,.04);box-shadow:inset 0 0 0 1px rgba(140,170,240,.07)}
html[data-ui-theme="midnight"] .qj-steps li i{border-radius:2px;background:#0a0e16;box-shadow:inset 0 0 0 1px rgba(140,170,240,.25),inset 0 2px 4px rgba(0,0,0,.6)}
html[data-ui-theme="midnight"] .qj-steps li.done>span{text-decoration-color:rgba(180,192,216,.35)}html[data-ui-theme="midnight"] .qj-steps li.done i{background:var(--k-good)}html[data-ui-theme="midnight"] .qj-steps li.done i::after{color:#06140b}
html[data-ui-theme="midnight"] .qj-steps li.now{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.18),transparent 70%),#141b2a;box-shadow:inset 3px 0 0 var(--mn-acc),inset 0 0 0 1px rgba(150,185,255,.25)}
html[data-ui-theme="midnight"] .qj-steps li.now i{background:#0a0e16;box-shadow:inset 0 0 0 2px var(--mn-acc),0 0 6px rgba(143,180,255,.4)}
html[data-ui-theme="midnight"] .qj-kv a{color:var(--mn-acc)}
html[data-ui-theme="midnight"] .qj-r{border-radius:0;background:linear-gradient(#1a202c,#121722);box-shadow:inset 0 0 0 1px #04060a,inset 0 1px 0 rgba(200,215,240,.1)}html[data-ui-theme="midnight"] .qj-r b{color:#f3f6fc}
html[data-ui-theme="midnight"] .qj-foot{border-top:1px solid var(--k-line)}
html[data-ui-theme="midnight"] .qj-empty{color:var(--k-ink3)}

/* MIDNIGHT, round five: THE DIARIES, maps down the side and tiers across the top (the layout eastscape-diary.js already draws): the maps a dark
   rail with the open one lit in moonlight, the tier tabs lit from below in their medal's colour, the tasks sunken rows with iron ticks, the reward
   on an iron plate */
html[data-ui-theme="midnight"] .dband{font:400 11.5px/1 var(--k-disp);letter-spacing:.1em;color:#c9d3e6;opacity:1;border-bottom:1px solid var(--k-line);padding-bottom:4px}
html[data-ui-theme="midnight"] .dm{border-radius:0;background:linear-gradient(#151b28,#10151f);box-shadow:inset 0 0 0 1px rgba(140,170,240,.08),inset 0 -1px 0 rgba(0,0,0,.5);color:var(--k-ink)}
html[data-ui-theme="midnight"] .dm:hover{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.14),transparent 70%),linear-gradient(#182033,#121827)}
html[data-ui-theme="midnight"] .dm.on{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.24),transparent 70%),linear-gradient(#1b2335,#141b2a);box-shadow:inset 3px 0 0 var(--mn-acc),inset 0 0 0 1px rgba(150,185,255,.3)}
html[data-ui-theme="midnight"] .dm b{font:400 13px/1.2 var(--k-disp);letter-spacing:.02em;color:#f3f6fc}html[data-ui-theme="midnight"] .dm small{color:var(--k-ink3);opacity:1}
html[data-ui-theme="midnight"] .dh b{font:400 17px/1.2 var(--k-disp);letter-spacing:.03em;color:#f3f6fc}html[data-ui-theme="midnight"] .dh small{color:var(--k-ink3);opacity:1}
html[data-ui-theme="midnight"] .dbar{height:8px;border-radius:0;background:#05070b;box-shadow:inset 0 0 0 1px #04060a}html[data-ui-theme="midnight"] .dbar b{background:linear-gradient(rgba(255,255,255,.2),transparent 60%),linear-gradient(90deg,#2e7a4c,#5bd38a)}
html[data-ui-theme="midnight"] .dtabs{gap:0;background:#0a0e16;box-shadow:inset 0 0 0 1px #04060a,inset 0 0 0 2px rgba(140,170,240,.08)}
html[data-ui-theme="midnight"] .dtabs button{border-radius:0;background:none;box-shadow:inset -1px 0 0 rgba(0,0,0,.5);font:400 12px/1.2 var(--k-disp);letter-spacing:.05em;color:var(--k-ink3);padding:6px 2px 5px}
html[data-ui-theme="midnight"] .dtabs button:hover{color:var(--k-ink)}
html[data-ui-theme="midnight"] .dtabs button.on{background:radial-gradient(60% 90% at 50% 100%,color-mix(in srgb,var(--m) 45%,transparent),transparent 72%),linear-gradient(#1b2335,#141b2a);box-shadow:inset 0 -2px 0 var(--m);color:#f3f6fc}
html[data-ui-theme="midnight"] .dtabs small{color:var(--k-ink3);font-family:Lora,serif}
html[data-ui-theme="midnight"] .dt{border-radius:0;background:rgba(140,170,240,.04);box-shadow:inset 0 0 0 1px rgba(140,170,240,.07);color:var(--k-ink)}
html[data-ui-theme="midnight"] .dt .ck{border-radius:2px;background:#0a0e16;box-shadow:inset 0 0 0 1px rgba(140,170,240,.25),inset 0 2px 4px rgba(0,0,0,.6)}html[data-ui-theme="midnight"] .dt.done .ck{background:var(--k-good);color:#06140b;box-shadow:none}
html[data-ui-theme="midnight"] .dr{border-radius:0;background:linear-gradient(#1a202c,#121722);box-shadow:inset 0 0 0 1px #04060a,inset 0 1px 0 rgba(200,215,240,.12);color:var(--k-ink)}
html[data-ui-theme="midnight"] .dr.fin{background:linear-gradient(rgba(91,211,138,.12),rgba(91,211,138,.04)),#121722;box-shadow:inset 0 0 0 1px rgba(91,211,138,.3)}

/* MIDNIGHT, round five: THE WORLD MAP, map and legend. The legend panel is an iron window over the map with its title on the plate; the layer
   rows are the legend (sunken ticks lit in moonlight when on), Live now rows in their event's colour; every pixel-brown button is iron */
html[data-ui-theme="midnight"] #mapWin .wm-view{background:#070a10}
html[data-ui-theme="midnight"] #mapWin .wm-side{border:12px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/iron_frame.png?v=1) 18 / 18px repeat;border-radius:0;
  background:linear-gradient(rgba(13,18,28,.96),rgba(13,18,28,.96)),url(/v3/assets/img/glad/flat/ui/mn/slate_d.png?v=1) 0 0/128px 128px;background-clip:padding-box;color:var(--k-ink);box-shadow:none;filter:drop-shadow(0 14px 30px rgba(0,0,0,.65))}
html[data-ui-theme="midnight"] #mapWin .wm-side.folded{border:0;background:none;filter:none}
html[data-ui-theme="midnight"] #mapWin .wm-head{background:linear-gradient(rgba(140,170,240,.06),transparent);border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] #mapWin .wm-logo{border-radius:0;border:1px solid #04060a;background:radial-gradient(circle at 50% 70%,rgba(143,180,255,.2),transparent 70%),#0b0f17;box-shadow:inset 0 0 0 1px rgba(140,170,240,.18)}
html[data-ui-theme="midnight"] #mapWin .wm-title b{font-weight:400;color:#f3f6fc}
html[data-ui-theme="midnight"] #mapWin :is(.wm-fold,.wm-unfold,.wm-btn,.wm-round){border:1px solid #04060a;border-image:none;border-radius:2px;background:linear-gradient(#262f41,#151b28);color:#e9eef8;text-shadow:0 -1px 0 #000;box-shadow:inset 0 1px 0 rgba(200,215,240,.16),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] #mapWin .wm-unfold,html[data-ui-theme="midnight"] #mapWin .wm-btn,html[data-ui-theme="midnight"] #mapWin .wm-round{color:#e9eef8}
html[data-ui-theme="midnight"] #mapWin :is(.wm-fold,.wm-unfold,.wm-btn,.wm-round):hover{background:linear-gradient(#2c3649,#18202e)}
html[data-ui-theme="midnight"] #mapWin .wm-x{border:1px solid #04060a;border-radius:2px;background:linear-gradient(#5a1a1e,#2e0c10);box-shadow:inset 0 1px 0 rgba(255,180,170,.2),0 3px 8px rgba(0,0,0,.6)}
html[data-ui-theme="midnight"] #mapWin .wm-search{border-radius:0;background:#0a0e16;border:1px solid rgba(140,170,240,.18)}html[data-ui-theme="midnight"] #mapWin .wm-search:focus-within{border-color:var(--mn-acc);box-shadow:0 0 0 2px rgba(143,180,255,.2)}
html[data-ui-theme="midnight"] #mapWin .wm-results{border-radius:0;background:#0d121c;border:1px solid var(--k-line)}html[data-ui-theme="midnight"] #mapWin .wm-results button:hover{background:rgba(143,180,255,.1)}
html[data-ui-theme="midnight"] #mapWin .wm-sec{font:400 11.5px/1 var(--k-disp);letter-spacing:.12em;color:#c9d3e6;border-bottom:1px solid var(--k-line);padding-bottom:5px}
html[data-ui-theme="midnight"] #mapWin .wm-feat{border-radius:0;background:rgba(140,170,240,.04);border:1px solid rgba(140,170,240,.08)}
html[data-ui-theme="midnight"] #mapWin .wm-row{border-radius:0}html[data-ui-theme="midnight"] #mapWin .wm-row:hover{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.14),transparent 70%)}
html[data-ui-theme="midnight"] #mapWin .wm-box{border-radius:2px;border:1px solid rgba(140,170,240,.28);background:#0a0e16;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
html[data-ui-theme="midnight"] #mapWin .wm-row input:checked+.wm-box{background:#0a0e16;border-color:var(--mn-acc);box-shadow:0 0 6px rgba(143,180,255,.4)}html[data-ui-theme="midnight"] #mapWin .wm-row input:checked+.wm-box::after{border-color:var(--mn-acc)}
html[data-ui-theme="midnight"] #mapWin .wm-mini{border-radius:0;background:#0a0e16;box-shadow:inset 0 0 0 1px rgba(140,170,240,.14);color:var(--k-ink3)}html[data-ui-theme="midnight"] #mapWin .wm-mini.on{background:var(--mn-glow),linear-gradient(#1b2335,#141b2a);color:#f3f6fc;box-shadow:inset 0 -2px 0 var(--mn-acc)}
html[data-ui-theme="midnight"] #mapWin .wm-chip{background:color-mix(in srgb,var(--c) 22%,#0d121c)}html[data-ui-theme="midnight"] #mapWin .wm-chip.off{background:#0a0e16;border-color:rgba(140,170,240,.14)}
html[data-ui-theme="midnight"] #mapWin .wm-live button{border-radius:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 18%,transparent),transparent 60%),#121827;border-color:rgba(140,170,240,.1)}
html[data-ui-theme="midnight"] #mapWin .wm-foot{border-top:1px solid var(--k-line);background:rgba(4,6,10,.4)}
html[data-ui-theme="midnight"] #mapWin .wm-pill{border-radius:0;background:#0a0e16;box-shadow:inset 0 0 0 1px rgba(140,170,240,.14)}
html[data-ui-theme="midnight"] #mapWin .wm-tip{border:1px solid #04060a;border-left:4px solid var(--c,#8fb4ff);border-radius:0;background:linear-gradient(#161c28,#0f141e);color:var(--k-ink);box-shadow:inset 0 1px 0 rgba(200,215,240,.12),0 8px 20px rgba(0,0,0,.6)}
html[data-ui-theme="midnight"] #mapWin .wm-tip b{font-weight:400;color:#f3f6fc}
html[data-ui-theme="midnight"] #mapWin .wm-load{color:var(--k-ink3)}

/* MIDNIGHT, round five: LIVE NOW, the event list. Each live world event is a glass card (the event's colour down its left edge, the name in the
   heading face, the time left and a sunken bar, a Go on the right). They sit to the LEFT of the ring rather than under it: the ring and its name
   plate are taller than the old map strip, and the quick slots hang under it. A tracker someone has moved keeps their place (inline style). */
html[data-ui-theme="midnight"] #evTrack{top:84px;right:150px;gap:5px}
@media (max-width:760px){html[data-ui-theme="midnight"] #evTrack{top:70px;right:116px}}
html[data-ui-theme="midnight"] .evt{--ec:#f4c657;border-radius:0;padding:6px 8px 6px 9px;background:linear-gradient(90deg,color-mix(in srgb,var(--ec) 14%,transparent),transparent 45%),rgba(9,13,21,.88);
  box-shadow:inset 3px 0 0 var(--ec),inset 0 0 0 1px rgba(140,170,240,.14),0 0 0 1px #04060a,0 6px 14px rgba(0,0,0,.55);color:var(--k-ink);backdrop-filter:blur(3px)}
html[data-ui-theme="midnight"] .evt.red{--ec:#f2555a}html[data-ui-theme="midnight"] .evt.gold{--ec:#ffd84a}
html[data-ui-theme="midnight"] .evt:hover,html[data-ui-theme="midnight"] .evt.red:hover,html[data-ui-theme="midnight"] .evt.gold:hover{box-shadow:inset 3px 0 0 var(--ec),inset 0 0 0 1px rgba(150,185,255,.45),0 0 0 1px #04060a,0 0 12px rgba(143,180,255,.25),0 6px 14px rgba(0,0,0,.55)}
html[data-ui-theme="midnight"] .evt b,html[data-ui-theme="midnight"] .evt.red b{font:400 13px/1.2 var(--k-disp);letter-spacing:.03em;color:#f3f6fc}
html[data-ui-theme="midnight"] .evt small{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .evt .evbar{height:5px;border-radius:0;background:#05070b;box-shadow:inset 0 0 0 1px #04060a}html[data-ui-theme="midnight"] .evt .evbar i,html[data-ui-theme="midnight"] .evt.red .evbar i{background:linear-gradient(rgba(255,255,255,.2),transparent 60%),var(--ec)}
html[data-ui-theme="midnight"] .evt::after{content:"Go";flex:none;align-self:center;margin-left:4px;padding:3px 8px;font:400 11px/1 var(--k-disp);letter-spacing:.08em;color:#e9eef8;background:linear-gradient(#262f41,#151b28);box-shadow:inset 0 1px 0 rgba(200,215,240,.16),0 0 0 1px #04060a}

/* MIDNIGHT, round five: THE STORE, featured on top. The Featured Item is a banner across the front page (its art large in a moonlit well, the name
   in the heading face, the price in gold, which is money), the cards under it are iron-edged night cards; worn ones lit in moonlight, owned ones
   quieter; the stage behind the try-on is the night */
html[data-ui-theme="midnight"] .st2-featured{position:relative;margin-bottom:12px;padding:30px 10px 10px;border-radius:0;
  background:radial-gradient(ellipse 50% 90% at 12% 60%,rgba(143,180,255,.2),transparent 70%),linear-gradient(100deg,#1b2335,#0f141e 70%);
  box-shadow:inset 0 0 0 1px #04060a,inset 0 0 0 2px rgba(150,185,255,.28),inset 0 1px 0 3px rgba(200,215,240,.05),0 6px 16px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .st2-featured>.k-label{position:absolute;left:10px;top:9px;margin:0;font:400 12px/1 var(--k-disp);letter-spacing:.14em;color:var(--mn-acc)}
html[data-ui-theme="midnight"] .st2-featured .st2-card{background:none;box-shadow:none;padding:4px}
html[data-ui-theme="midnight"] .st2-featured .st2-card.st2-rowc{grid-template-columns:104px minmax(0,1fr) auto}
html[data-ui-theme="midnight"] .st2-featured .st2-pic{width:96px;height:96px;background:radial-gradient(circle at 50% 60%,rgba(143,180,255,.3),transparent 70%),#070a10;box-shadow:inset 0 0 0 1px rgba(150,185,255,.3)}
html[data-ui-theme="midnight"] .st2-featured .st2-pic img{width:80px;height:80px}
html[data-ui-theme="midnight"] .st2-featured .st2-txt b{font-size:20px}
html[data-ui-theme="midnight"] .st2-card{border-radius:0;background:linear-gradient(#161c28,#10151f);box-shadow:inset 0 0 0 1px rgba(140,170,240,.12),inset 0 1px 0 rgba(200,215,240,.08),0 0 0 1px #04060a}
html[data-ui-theme="midnight"] .st2-card.worn{background:radial-gradient(60% 120% at 0% 50%,rgba(143,180,255,.16),transparent 70%),linear-gradient(#182033,#121827);box-shadow:inset 3px 0 0 var(--mn-acc),inset 0 0 0 1px rgba(150,185,255,.35),0 0 0 1px #04060a}
html[data-ui-theme="midnight"] .st2-card.owned{background:linear-gradient(#121722,#0d121b)}
html[data-ui-theme="midnight"] .st2-pic{border-radius:0;background:#0a0e16;box-shadow:inset 0 0 0 1px rgba(140,170,240,.16),inset 0 3px 6px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .st2-txt b{font-weight:400;letter-spacing:.02em;color:#f3f6fc}
html[data-ui-theme="midnight"] .st2-price{color:var(--k-gold)}
html[data-ui-theme="midnight"] .st2-facts{border-radius:0;box-shadow:inset 0 0 0 1px var(--k-line)}html[data-ui-theme="midnight"] .st2-facts>div:nth-child(odd){background:rgba(140,170,240,.05)}
html[data-ui-theme="midnight"] .st2-rib{background:linear-gradient(#2e7a4c,#1f5a36);box-shadow:0 1px 3px rgba(0,0,0,.6)}html[data-ui-theme="midnight"] .st2-rib.sale{background:linear-gradient(#a8222a,#6a0e14)}
html[data-ui-theme="midnight"] .st2-stage{border-radius:0;background:radial-gradient(ellipse 40% 60% at 50% 90%,rgba(143,180,255,.16),transparent 70%),#070a10;box-shadow:inset 0 0 0 1px #04060a,inset 0 0 0 2px rgba(140,170,240,.12)}
html[data-ui-theme="midnight"] .st2-stage small{color:var(--k-ink3)}html[data-ui-theme="midnight"] .st2-ttl{background:#0a0e16;color:#e9eef8;border-radius:0}
html[data-ui-theme="midnight"] .st2-in{border-radius:0;border:1px solid rgba(140,170,240,.2);background:#0a0e16;color:var(--k-ink)}

/* MIDNIGHT, round five: THE BOSS BAR, iron with a nameplate (every dungeon and raid draws its own: the Crypt's .bossbar, the Pyramid's .py-bar, the
   Undercity's and the mirrors' and the Fever's .uc-bar, the Rider's .h2-bar, the Count Room's quota .cnhud). The name sits on the iron plate; the bar
   is in the iron bar frame with marks at each quarter (the phases), filled with ember; enraged burns orange, thrown or down goes grey, the
   Count Room's quota stays gold (it is money) */
html[data-ui-theme="midnight"] :is(.bossbar,.py-bar,.uc-bar,.h2-bar,.cnhud,.py-coil,.uc-vote)>span,html[data-ui-theme="midnight"] :is(.bossbar,.py-bar,.uc-bar,.h2-bar,.cnhud,.py-coil,.uc-vote)>div>span{display:inline-block;max-width:100%;border:8px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/plate.png?v=1) 8 fill / 8px repeat;padding:0 12px;
  font:400 13px/16px var(--k-disp);letter-spacing:.1em;color:#f3f6fc;text-shadow:0 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-ui-theme="midnight"] :is(.bossbar,.py-bar,.uc-bar,.h2-bar,.cnhud,.py-coil,.uc-vote) .hb{position:relative;height:16px;margin-top:2px;border-style:solid;border-width:4px 11px 5px;border-image:url(/v3/assets/img/glad/flat/ui/mn/barframe.png?v=1) 4 11 5 11 / 4px 11px 5px repeat;border-radius:0;background:#05070b;background-clip:padding-box;box-shadow:none;overflow:hidden;image-rendering:pixelated}
html[data-ui-theme="midnight"] :is(.bossbar,.py-bar,.uc-bar,.h2-bar,.cnhud,.py-coil,.uc-vote) .hb::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(25% - 1px),rgba(4,6,10,.8) 0 calc(25% + 1px),transparent 0 calc(50% - 1px),rgba(4,6,10,.8) 0 calc(50% + 1px),transparent 0 calc(75% - 1px),rgba(4,6,10,.8) 0 calc(75% + 1px),transparent 0);pointer-events:none}
html[data-ui-theme="midnight"] :is(.bossbar,.py-bar,.uc-bar,.h2-bar,.cnhud,.py-coil,.uc-vote) .hb i{background:linear-gradient(rgba(255,255,255,.14),transparent 50%),linear-gradient(90deg,#4a0b10,#a8222a 65%,#ff5a50);box-shadow:inset -2px 0 0 #ffd5cc}
html[data-ui-theme="midnight"] :is(.bossbar.rage,.uc-bar .angry) .hb i{background:linear-gradient(rgba(255,255,255,.18),transparent 50%),linear-gradient(90deg,#7a2a08,#d8641a 60%,#ffb36e)}
html[data-ui-theme="midnight"] :is(.py-bar.down,.uc-bar .dead) .hb i{background:linear-gradient(#5a6070,#3a404c);box-shadow:none}
html[data-ui-theme="midnight"] .h2-bar.down .hb i{background:linear-gradient(rgba(255,255,255,.2),transparent 50%),linear-gradient(90deg,#8a6a10,#ffd84a)}
html[data-ui-theme="midnight"] .cnhud .hb i{background:linear-gradient(rgba(255,255,255,.2),transparent 50%),linear-gradient(90deg,#8a6a10,#f4c657)}html[data-ui-theme="midnight"] .cnhud.done .hb i{background:linear-gradient(rgba(255,255,255,.2),transparent 50%),linear-gradient(90deg,#1f5a36,#5bd38a)}
html[data-ui-theme="midnight"] :is(.py-coil,.uc-vote) .hb{height:12px}html[data-ui-theme="midnight"] :is(.py-coil,.uc-vote) .hb i{background:linear-gradient(rgba(255,255,255,.2),transparent 50%),linear-gradient(90deg,#3e5f9e,#8fb4ff)}
html[data-ui-theme="midnight"] .h2-bar button{border:1px solid #04060a;border-radius:2px;background:linear-gradient(#262f41,#151b28);color:#e9eef8;box-shadow:inset 0 1px 0 rgba(200,215,240,.16),0 2px 4px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] :is(.bossbar,.py-bar,.uc-bar,.h2-bar,.cnhud,.py-coil,.uc-vote) small{color:#c9d3e6}
/* MIDNIGHT, the HUD pass (2026-10-17): THE BOSS STRIP (the page's .game > … rules place it under the top bar). The iron bar frame stays, slimmer; the
   name is written on the ember in the heading face with no plate of its own; the one line under it is small moonlit Lora; a timer under a boss (the coil,
   the vote) is the same strip, thinner; the Rider's warning, which has no bar yet, is his name on a strip of night glass */
html[data-ui-theme="midnight"] .game>:is(.bossbar,.py-bar,.h2-bar,.cnhud,.py-coil,.uc-vote)>span,html[data-ui-theme="midnight"] .game>.uc-bar>div>span{border:0;border-image:none;padding:0 12px;
  font:400 12px/22px var(--k-disp);letter-spacing:.14em;color:#f3f6fc;text-shadow:0 1px 0 #000,0 0 4px #000,0 0 9px rgba(0,0,0,.85)}
html[data-ui-theme="midnight"] .game>:is(.bossbar,.py-bar,.h2-bar,.cnhud)>.hb,html[data-ui-theme="midnight"] .game>.uc-bar>div>.hb{height:22px;margin:0}
html[data-ui-theme="midnight"] .game>:is(.py-coil,.uc-vote)>.hb{height:18px;margin:0}html[data-ui-theme="midnight"] .game>:is(.py-coil,.uc-vote)>span{font-size:11px;line-height:18px}
html[data-ui-theme="midnight"] .game>:is(.bossbar,.py-bar,.h2-bar,.cnhud)>small,html[data-ui-theme="midnight"] .game>.uc-bar>div>small{margin-top:3px;font:400 12.5px/1.35 Lora,serif;color:#c9d3e6;text-shadow:0 1px 0 #000,0 0 4px #000,0 0 8px rgba(0,0,0,.8)}
html[data-ui-theme="midnight"] .game>.h2-bar.msg>span{border-radius:0;background:linear-gradient(rgba(9,13,21,.86),rgba(9,13,21,.86));box-shadow:inset 0 0 0 1px rgba(140,170,240,.18),0 0 0 1px #04060a}
html[data-ui-theme="midnight"] .game>.h2-bar>button{margin-top:5px}
/* MIDNIGHT, the HUD pass (2026-10-17): THE 2X CHIPS in the top bar (x2Chip), square iron with the boost's colour as the hairline, and their drop */
html[data-ui-theme="midnight"] .top .x2chip{height:30px;padding:0 9px 0 4px;gap:5px;border-radius:0;background:linear-gradient(#151b28,#0b0f17);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--x2c) 62%,#04060a),inset 0 0 12px color-mix(in srgb,var(--x2c) 16%,transparent),0 0 0 1px #04060a;font:700 12.5px/1 Lora,serif;color:var(--x2c)}
html[data-ui-theme="midnight"] .top .x2chip img{width:24px;height:24px;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--x2c) 50%,transparent)) drop-shadow(0 1px 1px rgba(0,0,0,.7))}
/* (the owner: "need special text effects to make them stand out a bit more") the time is cast in the boost's own metal: a fill from its highlight to its shade,
   a soft glow of its colour, and every few seconds a glint sweeps across it (the glint stops under reduced motion; tabular figures, so nothing moves) */
html[data-ui-theme="midnight"] .top .x2chip b{font:800 13px/1 Lora,serif;font-variant-numeric:tabular-nums;letter-spacing:.03em;color:transparent;-webkit-background-clip:text;background-clip:text;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%) 100% 0/300% 100% no-repeat,linear-gradient(var(--x2h),var(--x2c) 52%,var(--x2d));-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--x2c) 60%,transparent)) drop-shadow(0 1px 0 rgba(0,0,0,.9))}
@media (prefers-reduced-motion:no-preference){html[data-ui-theme="midnight"] .top .x2chip b{animation:x2glint 4.2s ease-in-out infinite}html[data-ui-theme="midnight"] .top .x2chip.x2-skilling b{animation-delay:1.4s}html[data-ui-theme="midnight"] .top .x2chip.x2-crafting b{animation-delay:2.8s}
  @keyframes x2glint{0%{background-position:100% 0,0 0}45%,100%{background-position:0% 0,0 0}}}
html[data-ui-theme="midnight"] .top .x2chip:is(:hover,[aria-expanded="true"]){background:linear-gradient(#1b2232,#0e131d);box-shadow:inset 0 0 0 1px var(--x2c),0 0 0 1px #04060a,0 0 10px color-mix(in srgb,var(--x2c) 30%,transparent)}
html[data-ui-theme="midnight"] .x2-pop{width:min(330px,calc(100vw - 12px))}
html[data-ui-theme="midnight"] .x2p{padding:12px 14px 6px}html[data-ui-theme="midnight"] .x2p b{font:400 16px/1.2 var(--k-disp);letter-spacing:.06em}
html[data-ui-theme="midnight"] .x2p span,html[data-ui-theme="midnight"] .x2-pop p{color:var(--k-ink2)}html[data-ui-theme="midnight"] .x2-pop p{padding:0 14px 8px}
html[data-ui-theme="midnight"] .x2-pop p.x2p-by{padding-bottom:12px;color:var(--k-ink3)}html[data-ui-theme="midnight"] .x2-pop p b{color:#f3f6fc}
@media (max-width:820px){html[data-ui-theme="midnight"] .top .x2chip{height:26px;padding:0 6px 0 2px}html[data-ui-theme="midnight"] .top .x2chip img{width:20px;height:20px}}
@media (max-width:560px){html[data-ui-theme="midnight"] .top .x2chip{padding:0 2px}}

/* MIDNIGHT, round five: THE PARTY, one glass card (the Crypt module's .ptbox, which every party uses): night glass over the world with an iron
   hairline and studs, the heading in the heading face, each member a row with a sunken health bar (green, blood when low), you in moonlight */
html[data-ui-theme="midnight"] .ptbox{min-width:178px;padding:8px 10px 9px;border-radius:0;background:linear-gradient(rgba(9,13,21,.84),rgba(9,13,21,.84));backdrop-filter:blur(3px);
  box-shadow:inset 0 0 0 1px rgba(140,170,240,.16),0 0 0 1px #04060a,0 6px 14px rgba(0,0,0,.55);color:var(--k-ink);font:600 12.5px/1.3 Lora,serif}
html[data-ui-theme="midnight"] .ptbox h5{margin:0 0 6px;padding-bottom:5px;border-bottom:1px solid var(--k-line);font:400 11.5px/1 var(--k-disp);letter-spacing:.12em;color:#c9d3e6}
html[data-ui-theme="midnight"] .ptbox .pm{margin:4px 0 5px}html[data-ui-theme="midnight"] .ptbox .pm small{color:var(--k-ink3);font-weight:600}
html[data-ui-theme="midnight"] .ptbox .hb{height:6px;border-radius:0;background:#05070b;box-shadow:inset 0 0 0 1px #04060a;margin-top:3px}
html[data-ui-theme="midnight"] .ptbox .hb i{background:linear-gradient(rgba(255,255,255,.2),transparent 60%),linear-gradient(90deg,#2e7a4c,#5bd38a)}html[data-ui-theme="midnight"] .ptbox .hb i.low{background:linear-gradient(rgba(255,255,255,.2),transparent 60%),linear-gradient(90deg,#6a0a0c,#f2555a)}
html[data-ui-theme="midnight"] .ptbox button{border:1px solid #04060a;border-radius:2px;background:linear-gradient(#262f41,#151b28);color:#e9eef8;box-shadow:inset 0 1px 0 rgba(200,215,240,.16)}

/* MIDNIGHT, round five: WHEN YOU DIE, the gravestone. The world greys and darkens to blood at the edges; a headstone stands in the middle (a
   round-topped slab of weathered stone, moss at its foot) with "You died" carved in it, what got you, and two carved lines: what you kept and what you
   lost. Up for four seconds instead of two and a half, long enough to read. */
html[data-ui-theme="midnight"] #diedCard{background:radial-gradient(circle,rgba(10,12,18,.35),rgba(30,4,8,.78) 75%,rgba(0,0,0,.9))}
html[data-ui-theme="midnight"] #diedCard.show{animation-duration:4.2s}
html[data-ui-theme="midnight"] #diedCard b,html[data-ui-theme="midnight"] #diedCard small,html[data-ui-theme="midnight"] #diedCard .dc-k{position:relative;z-index:1}
html[data-ui-theme="midnight"] #diedCard::before{content:"";position:absolute;left:50%;top:50%;width:min(290px,80%);height:290px;transform:translate(-50%,-44%);border-radius:150px 150px 6px 6px / 110px 110px 6px 6px;
  background:radial-gradient(ellipse 60% 25% at 50% 100%,rgba(60,90,50,.55),transparent 70%),radial-gradient(circle at 30% 25%,rgba(255,255,255,.08),transparent 40%),
  radial-gradient(circle at 22% 72%,rgba(0,0,0,.2) 0 3px,transparent 4px),radial-gradient(circle at 78% 36%,rgba(0,0,0,.16) 0 2px,transparent 3px),radial-gradient(circle at 64% 84%,rgba(0,0,0,.14) 0 5px,transparent 6px),radial-gradient(circle at 34% 30%,rgba(0,0,0,.12) 0 2px,transparent 3px),linear-gradient(118deg,transparent 70%,rgba(0,0,0,.16) 70.4% 70.8%,transparent 71.3%),linear-gradient(#5a6070,#3a3f4b 55%,#2a2e38);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -12px 18px rgba(0,0,0,.45),inset 6px 0 10px rgba(0,0,0,.25),0 18px 40px rgba(0,0,0,.7)}
html[data-ui-theme="midnight"] #diedCard b{font:400 38px/1 var(--k-disp);letter-spacing:.08em;color:#1a1d24;text-shadow:0 1px 0 rgba(255,255,255,.25),0 -1px 0 rgba(0,0,0,.6)}
html[data-ui-theme="midnight"] #diedCard small{font:600 14px Lora,serif;color:#e9eef8;text-shadow:0 1px 2px #000}
html[data-ui-theme="midnight"] #diedCard .dc-k{display:grid;gap:5px;margin-top:8px;width:min(230px,66vw);font:600 12.5px/1.35 Lora,serif;color:#d8dde8;text-align:center;text-shadow:0 1px 2px #000}
html[data-ui-theme="midnight"] #diedCard .dc-k em{display:block;font:400 10.5px/1 var(--k-disp);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:#aab3c6;margin-bottom:2px}
html[data-ui-theme="midnight"] #diedCard .dc-lost{font-style:normal;color:#ffb0a6}html[data-ui-theme="midnight"] #diedCard .dc-kept{font-style:normal}

/* MIDNIGHT, round five: LOGGING IN, one iron card over the night. The members' gate fills the screen with the night scene (night.png: the keep,
   the town's lights, the moon), darkened at the foot; the card in the middle is iron with the title on the plate. The "Connecting" veil uses the
   same card, smaller, over a dimmed world. */
html[data-ui-theme="midnight"] #gate{background:linear-gradient(rgba(5,7,11,0) 40%,rgba(5,7,11,.5)),url(/v3/assets/img/glad/flat/ui/mn/night.png?v=1) center bottom/max(100%,800px) auto no-repeat,linear-gradient(#020108,#060316);image-rendering:pixelated}
html[data-ui-theme="midnight"] .cover .card{border:12px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/iron_frame.png?v=1) 18 / 18px repeat;border-radius:0;
  background:linear-gradient(rgba(13,18,28,.95),rgba(13,18,28,.95)),url(/v3/assets/img/glad/flat/ui/mn/slate_d.png?v=1) 0 0/128px 128px;background-clip:padding-box;color:var(--k-ink);filter:drop-shadow(0 16px 30px rgba(0,0,0,.7))}
html[data-ui-theme="midnight"] #gate .card{padding:18px 22px 20px}
html[data-ui-theme="midnight"] #gate .gate-coin{display:none}   /* (2026-10-14, the owner: "use the new wordmark on the login screen too") */
html[data-ui-theme="midnight"] #gate .gate-wm{display:block;width:min(340px,100%);height:auto;margin:2px auto 4px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(143,180,255,.18))}
html[data-ui-theme="midnight"] #gate .card h2{display:inline-block;margin:6px 0 10px;border:8px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/plate.png?v=1) 8 fill / 8px repeat;padding:0 14px;font:400 19px/22px var(--k-disp);letter-spacing:.06em;color:#f3f6fc;text-shadow:0 1px 0 #000}
html[data-ui-theme="midnight"] #gate .card p{color:var(--k-ink2)}
html[data-ui-theme="midnight"] #gate .card .btn{display:inline-block;padding:9px 18px;font:400 15px var(--k-disp);letter-spacing:.06em;box-shadow:inset 0 1px 0 rgba(200,215,240,.16),inset 0 -2px 0 var(--mn-acc),0 0 14px rgba(143,180,255,.25),0 2px 4px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .cover.soft{background:rgba(5,7,11,.5)}

/* MIDNIGHT, round five: BETWEEN MAPS (mapLoading in eastscape.html, only when the new area's art is slow): the world dims to night, a card
   with the place's picture large in a moonlit well, its name on the plate, an iron bar running, and a tip */
#mapLoad{display:none}
html[data-ui-theme="midnight"] #mapLoad{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,rgba(9,13,21,.72),rgba(5,7,11,.94));animation:mlIn .25s ease-out}
html[data-ui-theme="midnight"] #mapLoad[hidden]{display:none}html[data-ui-theme="midnight"] #mapLoad.out{opacity:0;transition:opacity .25s}
@keyframes mlIn{from{opacity:0}}
html[data-ui-theme="midnight"] .ml-card{display:grid;justify-items:center;gap:10px;width:min(340px,86%);text-align:center}
html[data-ui-theme="midnight"] .ml-art{width:128px;height:128px;image-rendering:pixelated;padding:10px;border-radius:50%;background:radial-gradient(circle at 50% 60%,rgba(143,180,255,.25),transparent 70%),#070a10;box-shadow:inset 0 0 0 1px rgba(150,185,255,.3),0 0 30px rgba(143,180,255,.15)}
html[data-ui-theme="midnight"] .ml-name{border:8px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/plate.png?v=1) 8 fill / 8px repeat;padding:0 16px;font:400 20px/24px var(--k-disp);letter-spacing:.06em;color:#f3f6fc;text-shadow:0 1px 0 #000}
html[data-ui-theme="midnight"] .ml-bar{display:block;width:100%;height:16px;border-style:solid;border-width:4px 11px 5px;border-image:url(/v3/assets/img/glad/flat/ui/mn/barframe.png?v=1) 4 11 5 11 / 4px 11px 5px repeat;background:#05070b;background-clip:padding-box;overflow:hidden}
html[data-ui-theme="midnight"] .ml-bar i{display:block;width:40%;height:100%;background:linear-gradient(rgba(255,255,255,.2),transparent 60%),linear-gradient(90deg,#3e5f9e,#8fb4ff);animation:mlRun 1.1s ease-in-out infinite alternate}
@keyframes mlRun{from{transform:translateX(-10%)}to{transform:translateX(160%)}}
@media (prefers-reduced-motion:reduce){html[data-ui-theme="midnight"] .ml-bar i{animation:none;width:100%;opacity:.6}html[data-ui-theme="midnight"] #mapLoad{animation:none}}
html[data-ui-theme="midnight"] .ml-tip{font:600 13px/1.4 Lora,serif;color:var(--k-ink2)}

/* MIDNIGHT, rounds three and four: MAKE HOW MANY as notched stops (a sunk track, a notch at 1, 5, 10, 25 and All, a diamond thumb on the one
   chosen and the track lit up to it; the buttons can be dragged across) and THE CRAFTING WINDOW as list and detail (#craftWin.cr-split, built by
   openCraft/craftDetail: a compact list on the left, the picked recipe large on the right with Make) */
html[data-ui-theme="midnight"] .mk-n .k-seg{--p:1;position:relative;display:flex;gap:0;flex:1;min-width:220px;max-width:340px;padding:15px 0 0;background:none;box-shadow:none;border:0;touch-action:none;cursor:pointer}
html[data-ui-theme="midnight"] .mk-n .k-seg::before,html[data-ui-theme="midnight"] .mk-n .k-seg::after{content:"";position:absolute;left:10%;top:8px;height:4px;pointer-events:none}
html[data-ui-theme="midnight"] .mk-n .k-seg::before{right:10%;background:#05070b;box-shadow:inset 0 0 0 1px #04060a,0 1px 0 rgba(140,170,240,.12)}
html[data-ui-theme="midnight"] .mk-n .k-seg::after{width:calc(80% * var(--p));background:linear-gradient(90deg,#3e5f9e,#8fb4ff);box-shadow:0 0 6px rgba(143,180,255,.35)}
html[data-ui-theme="midnight"] .mk-n .k-seg button{position:relative;flex:1;padding:6px 0 0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--k-ink3);font:600 11.5px/1 Lora,serif}
html[data-ui-theme="midnight"] .mk-n .k-seg button:hover{background:none;color:var(--k-ink)}
html[data-ui-theme="midnight"] .mk-n .k-seg button::before{content:"";position:absolute;left:50%;top:-9px;width:2px;height:10px;margin-left:-1px;background:#3a4458;z-index:1}
html[data-ui-theme="midnight"] .mk-n .k-seg button[aria-pressed="true"]{background:none;box-shadow:none;color:#f3f6fc}
html[data-ui-theme="midnight"] .mk-n .k-seg button[aria-pressed="true"]::before{top:-13px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:linear-gradient(135deg,#e6eeff,#8fb4ff 45%,#3e5f9e);box-shadow:0 0 0 1px #04060a,0 0 10px rgba(143,180,255,.6)}
html[data-ui-theme="midnight"] #craftWin.cr-split{width:min(820px,calc(100% - 24px))}
html[data-ui-theme="midnight"] .cr-split .k-body{padding:0;overflow:hidden;display:flex;min-height:0}
html[data-ui-theme="midnight"] .crs{display:grid;grid-template-columns:minmax(220px,300px) 1fr;flex:1;min-height:0;max-height:min(62vh,560px)}
html[data-ui-theme="midnight"] .crs-l{overflow:auto;padding:8px;border-right:1px solid var(--k-line);background:rgba(4,6,10,.3)}
html[data-ui-theme="midnight"] .crs-l .cr-row{padding:5px 7px}html[data-ui-theme="midnight"] .crs-l .cr-row .k-end .k-slot{display:none}html[data-ui-theme="midnight"] .crs-l .cr-row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-ui-theme="midnight"] .crs-l .cr-row.sel{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.24),transparent 70%),linear-gradient(#1b2335,#141b2a);box-shadow:inset 3px 0 0 var(--mn-acc),inset 0 0 0 1px rgba(150,185,255,.3)}
html[data-ui-theme="midnight"] .crs-d{overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:9px;background:radial-gradient(70% 40% at 30% 0%,rgba(143,180,255,.07),transparent 70%)}
html[data-ui-theme="midnight"] .crd-best{font:600 12px Lora,serif;color:var(--mn-acc)}
html[data-ui-theme="midnight"] .crd-top{display:flex;align-items:center;gap:14px}
html[data-ui-theme="midnight"] .crd-art{flex:none;width:84px;height:84px;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,rgba(143,180,255,.28),transparent 70%),#070a10;box-shadow:inset 0 0 0 1px rgba(150,185,255,.3),inset 0 4px 10px rgba(0,0,0,.6)}
html[data-ui-theme="midnight"] .crd-art .ico,html[data-ui-theme="midnight"] .crd-art img{width:64px;height:64px;image-rendering:pixelated}
html[data-ui-theme="midnight"] .crd-top b{display:block;font:400 21px/1.15 var(--k-disp);letter-spacing:.03em;color:#f3f6fc}html[data-ui-theme="midnight"] .crd-top b small{font-size:14px;color:var(--k-ink3)}html[data-ui-theme="midnight"] .crd-top>div>small{color:var(--k-ink3);font:600 12px Lora,serif}
html[data-ui-theme="midnight"] .crd-in{display:grid;gap:4px}
html[data-ui-theme="midnight"] .crd-i{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:3px 8px 3px 3px;background:rgba(140,170,240,.04);box-shadow:inset 0 0 0 1px rgba(140,170,240,.07);font:600 12.5px Lora,serif}
html[data-ui-theme="midnight"] .crd-i em{font-style:normal;color:var(--k-ink3);font-size:11.5px}html[data-ui-theme="midnight"] .crd-i.miss em{color:var(--k-bad)}html[data-ui-theme="midnight"] .crd-i.miss{box-shadow:inset 0 0 0 1px rgba(242,85,90,.35)}
html[data-ui-theme="midnight"] .crd-risk{display:flex;align-items:center;gap:7px;font:600 12px Lora,serif;color:var(--k-ink2)}
html[data-ui-theme="midnight"] .crd-sum{padding-top:8px;border-top:1px solid var(--k-line);font:600 13px Lora,serif;color:var(--k-ink2)}html[data-ui-theme="midnight"] .crd-sum b{color:#f3f6fc}
html[data-ui-theme="midnight"] .crd-go{display:flex;align-items:center;gap:10px;margin-top:auto}
html[data-ui-theme="midnight"] .cr-make{min-width:160px;padding:9px 18px;font:400 15px var(--k-disp)!important;letter-spacing:.06em;box-shadow:inset 0 1px 0 rgba(200,215,240,.16),inset 0 -2px 0 var(--mn-acc),0 0 14px rgba(143,180,255,.2),0 2px 4px rgba(0,0,0,.5)!important}
html[data-ui-theme="midnight"] .crd-empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--k-ink3);padding:20px}html[data-ui-theme="midnight"] .crd-empty img{width:48px;height:48px;image-rendering:pixelated;opacity:.7}html[data-ui-theme="midnight"] .crd-empty b{font:400 17px var(--k-disp);color:#f3f6fc}
@media (max-width:640px){html[data-ui-theme="midnight"] .crs{grid-template-columns:1fr;max-height:none}html[data-ui-theme="midnight"] .crs-l{max-height:38vh;border-right:0;border-bottom:1px solid var(--k-line)}}

/* MIDNIGHT, round three: THE WIKI, article and contents. The contents rail is dark with the open page lit in moonlight; the article has its
   title over a hairline, sections under small heading-face rules, links in moonlight, the guide note as a moonlit band, cards as night cards.
   TABLES EVERYWHERE (.tbl: the wiki, the hiscores, the bank's lists) get mist headings, hairline rows and a moonlit hover. */
html[data-ui-theme="midnight"] .wiki nav{background:rgba(4,6,10,.35);border-right:1px solid var(--k-line)}
html[data-ui-theme="midnight"] .wiki nav button{border-radius:0;color:var(--k-ink2)}html[data-ui-theme="midnight"] .wiki nav button:hover{background:rgba(143,180,255,.08);color:var(--k-ink)}
html[data-ui-theme="midnight"] .wiki nav button[aria-current="true"],html[data-ui-theme="midnight"] .wiki nav button[aria-current="true"]:hover{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.24),transparent 70%),#141b2a;color:#f3f6fc;box-shadow:inset 3px 0 0 var(--mn-acc)}
html[data-ui-theme="midnight"] .wiki nav hr{border-top-color:var(--k-line)}
html[data-ui-theme="midnight"] .wiki article{background:radial-gradient(70% 30% at 40% 0%,rgba(143,180,255,.06),transparent 70%)}
html[data-ui-theme="midnight"] .wiki article h2{font-weight:400;font-size:25px;letter-spacing:.03em;color:#f3f6fc;padding-bottom:8px;border-bottom:1px solid var(--k-line);text-shadow:0 1px 0 #000}
html[data-ui-theme="midnight"] .wiki article h3{font-weight:400;letter-spacing:.06em;color:#c9d3e6;display:flex;align-items:center;gap:10px}
html[data-ui-theme="midnight"] .wiki article h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--k-line),transparent)}
html[data-ui-theme="midnight"] .wiki article .lede{color:var(--k-ink2)}html[data-ui-theme="midnight"] .wiki article .gcat,html[data-ui-theme="midnight"] .wiki h4,html[data-ui-theme="midnight"] .wiki article .crumbs span{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .wiki article a,html[data-ui-theme="midnight"] .wiki article [data-wiki]{color:var(--mn-acc);text-decoration-color:rgba(143,180,255,.35)}
html[data-ui-theme="midnight"] .wiki article .wguide{border-radius:0;background:linear-gradient(90deg,rgba(143,180,255,.14),transparent 80%);box-shadow:inset 3px 0 0 var(--mn-acc)}
html[data-ui-theme="midnight"] .wiki .card{border-radius:0;border-color:rgba(140,170,240,.12);background:linear-gradient(#161c28,#10151f);color:var(--k-ink)!important}html[data-ui-theme="midnight"] .wiki .card:hover{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.16),transparent 70%),#141b2a}
html[data-ui-theme="midnight"] .wiki .up{border-left-color:var(--mn-acc)}html[data-ui-theme="midnight"] .wiki .up small{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .wpager button{border-radius:0;border:1px solid #04060a;background:linear-gradient(#262f41,#151b28);color:#e9eef8}
html[data-ui-theme="midnight"] .wk-hist button{border-radius:2px;background:linear-gradient(#262f41,#151b28);color:#e9eef8;box-shadow:inset 0 1px 0 rgba(200,215,240,.16),0 0 0 1px #04060a}
html[data-ui-theme="midnight"] .tbl th{color:var(--k-ink3);border-bottom:1px solid rgba(140,170,240,.22);font-family:Lora,serif}
html[data-ui-theme="midnight"] .tbl td{border-bottom:1px solid rgba(140,170,240,.08)}
html[data-ui-theme="midnight"] .tbl tr:nth-child(even) td{background:rgba(140,170,240,.025)}
html[data-ui-theme="midnight"] .tbl tr.click:hover td{background:rgba(143,180,255,.1)}

html[data-ui-theme="midnight"] :is(.win-head,.k-head)>b{flex-shrink:0;max-width:72%}html[data-ui-theme="midnight"] .win-head>small{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* (a window's hint gives way before its title does) */
/* MIDNIGHT, round three: THE CASINO TABLES, dark felt. Every table window (eastscape-casino.js) reads its colours from variables on #gameWin.cz,
   so the night palette goes there (ivory ink, gold only for money); the stage, where the game is played, is deep green baize with a fine nap, set
   in an iron rail; the side cards stay night. The props (slot cabinet, wheel, ticket, cylinder) keep their own dark look. */
html[data-ui-theme="midnight"] #gameWin.cz{--ink:#e9eef8;--panel:#121827;--panel-2:#0d121c;--panel-3:#1b2335;--line:rgba(140,170,240,.14);--line-2:rgba(140,170,240,.26);--text:#e9eef8;--muted:#b4c0d8;--muted-2:#8391ad;
  --gold:#f4c657;--gold-dim:rgba(244,198,87,.14);--green:#5bd38a;--green-dim:rgba(91,211,138,.14);--red:#f2555a;--red-dim:rgba(242,85,90,.14)}
html[data-ui-theme="midnight"] #gameWin.cz .cz-stage{border:0;border-radius:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse 85% 75% at 50% 38%,#1f5e3d,#103a26 65%,#0a2418);
  box-shadow:inset 0 0 0 2px #04060a,inset 0 0 0 6px #262c38,inset 0 1px 0 7px rgba(200,215,240,.08),inset 0 0 0 8px #04060a,inset 0 14px 30px rgba(0,0,0,.45)}
html[data-ui-theme="midnight"] #gameWin.cz .cz-phase{color:#c9e6d4;text-shadow:0 1px 0 #000}html[data-ui-theme="midnight"] #gameWin.cz .cz-phase.open{color:#7dffb0}html[data-ui-theme="midnight"] #gameWin.cz .cz-phase.done{color:var(--gold)}
html[data-ui-theme="midnight"] #gameWin.cz .cz-card{border-radius:0;background:linear-gradient(#161c28,#10151f);box-shadow:inset 0 1px 0 rgba(200,215,240,.08),0 0 0 1px #04060a}
html[data-ui-theme="midnight"] #gameWin.cz .cz-card h2{font-weight:400;font-family:var(--k-disp);letter-spacing:.04em;color:#f3f6fc}
html[data-ui-theme="midnight"] #gameWin.cz :is(.cz-stake,.cz-chip,.cz-pick,.cz-stat,.cz-rung){border-radius:2px}
html[data-ui-theme="midnight"] #gameWin.cz .cz-stake{background:#0a0e16;border-color:rgba(140,170,240,.22)}html[data-ui-theme="midnight"] #gameWin.cz .cz-stake:focus{border-color:var(--gold)}
html[data-ui-theme="midnight"] #gameWin.cz .cz-chip{background:linear-gradient(#262f41,#151b28);border-color:#04060a;box-shadow:inset 0 1px 0 rgba(200,215,240,.14)}
html[data-ui-theme="midnight"] #gameWin.cz .cz-pick{background:rgba(5,7,11,.45);border-color:rgba(255,255,255,.14)}html[data-ui-theme="midnight"] #gameWin.cz .cz-pick.on{border-color:var(--gold);background:rgba(244,198,87,.14)}
html[data-ui-theme="midnight"] #gameWin.cz .cz-lock{border-radius:2px;border-color:#04060a;background:linear-gradient(#ffd97a,#d8a63a 60%,#a8781a);color:#1a1405;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 6px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] #gameWin.cz .cz-lock:disabled,html[data-ui-theme="midnight"] #gameWin.cz .cz-lock.alt{background:linear-gradient(#262f41,#151b28);color:var(--k-ink3);border-color:#04060a}

html[data-ui-theme="midnight"] #gameWin.cz :is(.cz-chip,.cz-lock,.cz-realtabs button){border-image:none}
html[data-ui-theme="midnight"] #gameWin.cz .cz-chip{border:1px solid #04060a;color:#e9eef8;font-family:Lora,serif}html[data-ui-theme="midnight"] #gameWin.cz .cz-chip:hover:not(:disabled){background:linear-gradient(#2c3649,#18202e)}
html[data-ui-theme="midnight"] #gameWin.cz .cz-lock{border:1px solid #04060a}
html[data-ui-theme="midnight"] #gameWin.cz .cz-realtabs{gap:0}
html[data-ui-theme="midnight"] #gameWin.cz .cz-realtabs button{border:0;border-radius:0;background:#0a0e16;color:var(--k-ink3);font:400 12.5px var(--k-disp);letter-spacing:.05em;padding:5px 12px;box-shadow:inset 0 0 0 1px rgba(140,170,240,.14)}
html[data-ui-theme="midnight"] #gameWin.cz .cz-realtabs button[aria-pressed="true"]{background:radial-gradient(60% 90% at 50% 100%,rgba(244,198,87,.3),transparent 72%),linear-gradient(#1b2335,#141b2a);color:#f3f6fc;box-shadow:inset 0 -2px 0 var(--k-gold)}
/* MIDNIGHT, round three: THE HISCORES, skills down the side. The board rail is dark with each board's icon, the open one lit in moonlight; the
   head is a band with the board's icon in a socket and your place on the right; the top three stand on a podium lit in their medal's colour;
   the rows are hairline rows with a moonlit bar (yours green) */
html[data-ui-theme="midnight"] .hstabs{border-right:1px solid var(--k-line);background:rgba(4,6,10,.3);padding:4px}
html[data-ui-theme="midnight"] .hstabs button{border-radius:0;color:var(--k-ink2);font-family:Lora,serif}html[data-ui-theme="midnight"] .hstabs button:hover{background:rgba(143,180,255,.08);color:var(--k-ink)}
html[data-ui-theme="midnight"] .hstabs button.on,html[data-ui-theme="midnight"] .hstabs button.on:hover{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.24),transparent 70%),#141b2a;color:#f3f6fc;box-shadow:inset 3px 0 0 var(--mn-acc)}
html[data-ui-theme="midnight"] .hstabs .hsg{font:400 11px/1 var(--k-disp);letter-spacing:.12em;color:#c9d3e6;border-bottom:1px solid var(--k-line);margin:6px 4px 2px;padding:6px 2px 4px}
html[data-ui-theme="midnight"] .hs-head{border-radius:0;background:radial-gradient(60% 120% at 0% 50%,rgba(143,180,255,.14),transparent 70%),linear-gradient(#1b2335,#121827);box-shadow:inset 0 0 0 1px #04060a,inset 0 1px 0 1px rgba(200,215,240,.08)}
html[data-ui-theme="midnight"] .hs-head h3{font-weight:400;letter-spacing:.04em;color:#f3f6fc}
html[data-ui-theme="midnight"] .hs-me{border-radius:0;background:#0a0e16;box-shadow:inset 0 0 0 1px rgba(150,185,255,.3)}html[data-ui-theme="midnight"] .hs-me b{color:#f3f6fc}
html[data-ui-theme="midnight"] .hs-p{border-radius:0;background:linear-gradient(#161c28,#10151f);box-shadow:inset 0 0 0 1px var(--mc,rgba(140,170,240,.14)),0 0 0 1px #04060a}
html[data-ui-theme="midnight"] .hs-p.p1{background:radial-gradient(60% 50% at 50% 0%,rgba(212,160,23,.28),transparent 75%),linear-gradient(#1b2232,#10151f);box-shadow:inset 0 0 0 1px #d4a017,0 0 14px rgba(212,160,23,.2),0 0 0 1px #04060a}
html[data-ui-theme="midnight"] .hs-p.p2{background:radial-gradient(60% 50% at 50% 0%,rgba(168,178,189,.2),transparent 75%),linear-gradient(#161c28,#10151f)}html[data-ui-theme="midnight"] .hs-p.p3{background:radial-gradient(60% 50% at 50% 0%,rgba(184,115,51,.2),transparent 75%),linear-gradient(#161c28,#10151f)}
html[data-ui-theme="midnight"] .hs-p:hover{filter:brightness(1.12)}html[data-ui-theme="midnight"] .hs-p.me{outline-color:rgba(143,180,255,.5)}
html[data-ui-theme="midnight"] .hs-p b{font-weight:400;letter-spacing:.03em;color:#f3f6fc}
html[data-ui-theme="midnight"] .hs-bar{border-radius:0;background:#05070b}html[data-ui-theme="midnight"] .hs-bar u{background:linear-gradient(90deg,#3e5f9e,#8fb4ff)}html[data-ui-theme="midnight"] .hsr.me .hs-bar u{background:linear-gradient(90deg,#2e7a4c,#5bd38a)}

/* MIDNIGHT, round two's pick "Iron rail": THE TOP BAR with iron edges top and bottom and the name on an iron plate in the middle. A desktop is
   46px tall instead of 32, so the page under it (.wrap) and the menus that hang from it move down to match; from 1100px the plate sits in the
   middle, narrower than that it stays at the left (the links and the right-hand pieces would run into it). Phones keep their fixed bar. */
@media (min-width:821px){
  /* (2026-10-14, the owner's top-bar pick "One iron band") one rail along the bottom edge, the bar above it lighter and quieter */
  html[data-ui-theme="midnight"] .top{position:relative;height:46px;padding:0 14px 6px;gap:6px;background:url(/v3/assets/img/glad/flat/ui/mn/rail.png?v=1) 0 100%/56px 14px repeat-x,linear-gradient(#131a29,#0b0f17);box-shadow:inset 0 1px 0 rgba(200,215,240,.08);border-bottom:0}
  html[data-ui-theme="midnight"] .wrap{height:calc(100vh - 46px);height:calc(100dvh - 46px)}
  html[data-ui-theme="midnight"] .memenu,html[data-ui-theme="midnight"] .xph-pop{top:48px}
  /* (2026-10-14, the owner: "EastScape logo is on darker background, and not centered in the top nav", then "i want the logo to have a plate, just
     lighter than the rest of the plates so it stands out a little") its own plate, plate_hi.png (plate.png lifted ~1.75x by sharp), and centred in
     the bar at every width it fits; fitLogo() drops it back into the row when it would touch the links either side (a long name, the XP/h pill). */
  /* (2026-10-14, the owner: "make the divots not be behind it, but be on the sides, so its divot - eastscape - divot") the plate's two rivets
     are its END CAPS now: the art (83x26) is cut 15px in from each side, which holds a whole rivet, those caps are drawn at 1.5x (22.5px wide,
     39px tall) and only the plain middle stretches under the name. An 8px cut had split each rivet and smeared half of it behind the text.
     Then ("the left and right divots are now right on the edge") plate_logo.png: the same plate with 6px of its own plain middle spliced in
     outside each rivet (95x26, cut 21px in), so each rivet sits inside the plate's end rather than on it. */
  html[data-ui-theme="midnight"] .top .logo{z-index:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;height:39px;margin:0;padding:0 6px;border-style:solid;border-color:transparent;border-width:0 31.5px;border-image:url(/v3/assets/img/glad/flat/ui/mn/plate_logo.png?v=1) 0 21 fill / 0 31.5px stretch;line-height:16px;gap:6px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
  html[data-ui-theme="midnight"] .top .logo img{width:18px;height:18px}
  html[data-ui-theme="midnight"] .top .logo-t{font:400 17px/16px var(--k-disp);letter-spacing:.06em;color:#f3f6fc;text-shadow:0 1px 0 #000,0 0 12px rgba(143,180,255,.25)}
  html[data-ui-theme="midnight"] .top.logo-flow .logo{position:relative;left:auto;top:auto;transform:none}
}

/* MIDNIGHT, round three: THE CHARACTER WINDOW, the paper doll (eastscape-char.js already lays it out: you in the middle, your skills and vitals
   either side, the strip and the rows under). You stand in a moonlit alcove; the strip is one iron band; the rows are sunken with the picked one
   lit in moonlight; caps fill in moonlight (gold is for money); where-it-comes-from cards are night cards, the "get more" ones green */
html[data-ui-theme="midnight"] .ch-id b.nm{font-weight:400;letter-spacing:.03em;color:#f3f6fc}
html[data-ui-theme="midnight"] .ch-sk{font-weight:400}
html[data-ui-theme="midnight"] .ch-fig{border:0;border-image:none;background:radial-gradient(ellipse 70% 40% at 50% 92%,rgba(143,180,255,.22),transparent 70%),radial-gradient(ellipse 80% 60% at 50% 30%,rgba(143,180,255,.08),transparent 70%),linear-gradient(#0d121c,#070a10);
  box-shadow:inset 0 0 0 1px rgba(140,170,240,.16),inset 0 0 0 2px #04060a,inset 0 10px 20px rgba(0,0,0,.55)}
html[data-ui-theme="midnight"] .ch-vit .sth.on{background:rgba(244,198,87,.14);box-shadow:inset 0 0 0 1px rgba(244,198,87,.45)}html[data-ui-theme="midnight"] .ch-vit b.on{color:var(--k-gold)}   /* (gold here: the column says "Gold is what you hold") */
html[data-ui-theme="midnight"] .ch-strip{gap:0;background:linear-gradient(#1a202c,#121722);box-shadow:inset 0 0 0 1px #04060a,inset 0 1px 0 rgba(200,215,240,.12),0 3px 8px rgba(0,0,0,.45)}
html[data-ui-theme="midnight"] .ch-strip span{border:0;border-radius:0;background:none;border-left:1px solid rgba(0,0,0,.55);box-shadow:inset 1px 0 0 rgba(140,170,240,.07)}html[data-ui-theme="midnight"] .ch-strip span:first-child{border-left:0;box-shadow:none}
html[data-ui-theme="midnight"] .ch-strip b{font:400 15px/1.2 var(--k-disp);color:#f3f6fc}html[data-ui-theme="midnight"] .ch-strip small{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .ch-row{border-radius:0;background:rgba(140,170,240,.04);box-shadow:inset 0 0 0 1px rgba(140,170,240,.07)}html[data-ui-theme="midnight"] .ch-row:hover{background:rgba(143,180,255,.09)}
html[data-ui-theme="midnight"] .ch-row[aria-pressed="true"]{background:radial-gradient(60% 140% at 0% 50%,rgba(143,180,255,.2),transparent 70%),#141b2a;box-shadow:inset 3px 0 0 var(--mn-acc),inset 0 0 0 1px rgba(150,185,255,.3)}
html[data-ui-theme="midnight"] .ch-row .cap{border-radius:0;background:#05070b}html[data-ui-theme="midnight"] .ch-row .cap::after{background:linear-gradient(90deg,#3e5f9e,#8fb4ff)}
html[data-ui-theme="midnight"] .ch-capbar{border-radius:0;background:#05070b;box-shadow:inset 0 0 0 1px #04060a}html[data-ui-theme="midnight"] .ch-capbar::after{background:linear-gradient(90deg,#3e5f9e,#8fb4ff)}
html[data-ui-theme="midnight"] .ch-src div{border-radius:0;background:linear-gradient(#161c28,#10151f);box-shadow:inset 0 0 0 1px rgba(140,170,240,.12)}
html[data-ui-theme="midnight"] .ch-src div.more{background:linear-gradient(90deg,rgba(91,211,138,.14),transparent 80%),#10151f;box-shadow:inset 3px 0 0 var(--k-good),inset 0 0 0 1px rgba(91,211,138,.25)}
html[data-ui-theme="midnight"] .ch-foot{border-top:1px solid var(--k-line)}

/* MIDNIGHT, rounds three and four: SWITCHES AND SLIDERS everywhere. A switch is a sunken iron slot with a riveted iron knob that lights the slot
   in moonlight when on; every range slider (volume, interface size, see-through, the jukebox) is a sunken groove with the diamond thumb of the
   how-many stops (Firefox also fills the groove up to it) */
html[data-ui-theme="midnight"] .sw span{border-radius:2px;background:#0a0e16;box-shadow:inset 0 0 0 1px rgba(140,170,240,.22),inset 0 2px 4px rgba(0,0,0,.6)}
html[data-ui-theme="midnight"] .sw span::after{border-radius:2px;background:radial-gradient(circle at 50% 50%,#c9d2e4 0 1.5px,transparent 2px),linear-gradient(#5a6478,#2a3040);box-shadow:0 0 0 1px #04060a,inset 0 1px 0 rgba(255,255,255,.2)}
html[data-ui-theme="midnight"] .sw input:checked+span{background:linear-gradient(90deg,rgba(143,180,255,.45),rgba(143,180,255,.18));box-shadow:inset 0 0 0 1px rgba(150,185,255,.6),0 0 8px rgba(143,180,255,.3)}
html[data-ui-theme="midnight"] .sw input:focus-visible+span{outline:2px solid var(--mn-acc)}
html[data-ui-theme="midnight"] input[type="range"]{-webkit-appearance:none;appearance:none;height:18px;background:none;cursor:pointer}
html[data-ui-theme="midnight"] input[type="range"]::-webkit-slider-runnable-track{height:5px;background:#05070b;box-shadow:inset 0 0 0 1px #04060a,0 1px 0 rgba(140,170,240,.14)}
html[data-ui-theme="midnight"] input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-5px;width:14px;height:14px;border:0;border-radius:0;transform:rotate(45deg);background:linear-gradient(135deg,#e6eeff,#8fb4ff 45%,#3e5f9e);box-shadow:0 0 0 1px #04060a,0 0 8px rgba(143,180,255,.55);cursor:pointer}
html[data-ui-theme="midnight"] input[type="range"]::-moz-range-track{height:5px;background:#05070b;box-shadow:inset 0 0 0 1px #04060a,0 1px 0 rgba(140,170,240,.14)}
html[data-ui-theme="midnight"] input[type="range"]::-moz-range-progress{height:5px;background:linear-gradient(90deg,#3e5f9e,#8fb4ff)}
html[data-ui-theme="midnight"] input[type="range"]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:0;transform:rotate(45deg);background:linear-gradient(135deg,#e6eeff,#8fb4ff 45%,#3e5f9e);box-shadow:0 0 0 1px #04060a,0 0 8px rgba(143,180,255,.55);cursor:pointer}
html[data-ui-theme="midnight"] input[type="range"]:focus-visible{outline:2px solid var(--mn-acc);outline-offset:3px}

html[data-ui-theme="midnight"] .set small{color:var(--k-ink3)}   /* (the settings' explanations were too faint to read) */
/* MIDNIGHT, round four: THE RESULTS BOARD (the run report after a Crypt, Pyramid or Count Room run, eastscape-runreport.js). The result is a
   night band with the crest in an iron ring and the title in ivory under a moonlit glow (blood on a wipe); the awards are night cards with their
   medals; your numbers one iron band; the party table hairline rows with damage bars in each style's colour and YOUR row lit in moonlight */
html[data-ui-theme="midnight"] .rr-hero{background:radial-gradient(60% 140% at 12% 0%,rgba(143,180,255,.22),transparent 70%),linear-gradient(#1b2335,#0d121c);border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] .rr-hero.wipe{background:radial-gradient(60% 140% at 12% 0%,rgba(242,85,90,.22),transparent 70%),linear-gradient(#24151b,#0d0a10)}
html[data-ui-theme="midnight"] .rr-crest{border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(143,180,255,.25),#070a10 70%);box-shadow:0 0 0 2px #04060a,0 0 0 5px #3a4252,0 0 0 6px #04060a,0 0 18px rgba(143,180,255,.25)}
html[data-ui-theme="midnight"] .rr-htxt h3{color:var(--mn-acc);font-weight:400}
html[data-ui-theme="midnight"] .rr-htxt h2{font-weight:400;letter-spacing:.04em;color:#f3f6fc;text-shadow:0 2px 0 #000,0 0 18px rgba(143,180,255,.35)}html[data-ui-theme="midnight"] .rr-hero.wipe h2{color:#ffb0a6;text-shadow:0 2px 0 #000,0 0 18px rgba(242,85,90,.4)}
html[data-ui-theme="midnight"] .rr-facts .k-chip{border-radius:0;background:#0a0e16;color:var(--k-ink2);box-shadow:inset 0 0 0 1px rgba(140,170,240,.18)}
html[data-ui-theme="midnight"] .rr-award{border-radius:0;background:linear-gradient(#1a202c,#121722);box-shadow:inset 0 0 0 1px rgba(244,198,87,.25),inset 0 1px 0 rgba(200,215,240,.08)}
html[data-ui-theme="midnight"] .rr-award b{font-weight:400;letter-spacing:.04em;color:var(--k-gold)}html[data-ui-theme="midnight"] .rr-award span span{color:#f3f6fc}
html[data-ui-theme="midnight"] .rr-me{gap:0;background:linear-gradient(#1a202c,#121722);box-shadow:inset 0 0 0 1px #04060a,inset 0 1px 0 rgba(200,215,240,.12)}
html[data-ui-theme="midnight"] .rr-me div{border-radius:0;background:none;border-left:1px solid rgba(0,0,0,.55);color:var(--k-ink)}html[data-ui-theme="midnight"] .rr-me div:first-child{border-left:0}
html[data-ui-theme="midnight"] .rr-tbl td{background:rgba(140,170,240,.04);box-shadow:inset 0 -1px 0 rgba(140,170,240,.08)}html[data-ui-theme="midnight"] .rr-tbl tr td:first-child{border-radius:0}html[data-ui-theme="midnight"] .rr-tbl tr td:last-child{border-radius:0}
html[data-ui-theme="midnight"] .rr-tbl tr.me td{background:linear-gradient(rgba(143,180,255,.14),rgba(143,180,255,.08));box-shadow:inset 0 1px 0 rgba(150,185,255,.45),inset 0 -1px 0 rgba(150,185,255,.45)}html[data-ui-theme="midnight"] .rr-tbl tr.me td:first-child{box-shadow:inset 3px 0 0 var(--mn-acc),inset 0 1px 0 rgba(150,185,255,.45),inset 0 -1px 0 rgba(150,185,255,.45)}
html[data-ui-theme="midnight"] .rr-who b{font-weight:400;color:#f3f6fc}
html[data-ui-theme="midnight"] .rr-dmg i{border-radius:0;background:#05070b}
html[data-ui-theme="midnight"] .rr-card{border-radius:0;background:linear-gradient(#161c28,#10151f);box-shadow:inset 0 0 0 1px rgba(140,170,240,.12)}

html[data-ui-theme="midnight"] .rr-me b{color:#f3f6fc;font-weight:400}html[data-ui-theme="midnight"] .rr-hero{border-bottom:1px solid var(--k-line)!important;box-shadow:none}
/* MIDNIGHT, round four: ACHIEVEMENTS as a badge grid (renderAch builds .agrid in Midnight): a tile per badge, its tier's medal lit and its colour
   along the top when earned, dimmed and greyed when not; the header's points band and the tabs in night */
html[data-ui-theme="midnight"] #achBody .agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:4px 0 12px}
html[data-ui-theme="midnight"] #achBody .atile{display:grid;justify-items:center;align-content:start;gap:3px;padding:10px 8px 8px;text-align:center;background:linear-gradient(#141a26,#0e131c);box-shadow:inset 0 0 0 1px rgba(140,170,240,.08),0 0 0 1px #04060a;opacity:.55}
html[data-ui-theme="midnight"] #achBody .atile .atm{width:40px;height:40px;filter:grayscale(1) brightness(.55)}
html[data-ui-theme="midnight"] #achBody .atile b{font:400 13px/1.2 var(--k-disp);letter-spacing:.02em;color:var(--k-ink2)}html[data-ui-theme="midnight"] #achBody .atile small{font:600 11px/1.3 Lora,serif;color:var(--k-ink3)}
html[data-ui-theme="midnight"] #achBody .atile em{font:700 10.5px Lora,serif;font-style:normal;color:var(--k-ink3);margin-top:2px}
html[data-ui-theme="midnight"] #achBody .atile.got{opacity:1;background:radial-gradient(70% 50% at 50% 0%,color-mix(in srgb,var(--tc) 30%,transparent),transparent 75%),linear-gradient(#182033,#111725);box-shadow:inset 0 2px 0 var(--tc),inset 0 0 0 1px rgba(140,170,240,.14),0 0 0 1px #04060a}
html[data-ui-theme="midnight"] #achBody .atile.got .atm{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tc) 60%,transparent))}html[data-ui-theme="midnight"] #achBody .atile.got b{color:#f3f6fc}html[data-ui-theme="midnight"] #achBody .atile.got em{color:var(--k-good)}
html[data-ui-theme="midnight"] #achBody .atier{border-bottom:1px solid var(--k-line);padding-bottom:6px;margin-top:6px}
html[data-ui-theme="midnight"] #achBody .abar{border-radius:0;background:#05070b;box-shadow:inset 0 0 0 1px #04060a}html[data-ui-theme="midnight"] #achBody .abar i{background:linear-gradient(90deg,#3e5f9e,#8fb4ff)}
html[data-ui-theme="midnight"] #achBody .apill{border-radius:0;background:#0a0e16;color:var(--k-ink2);box-shadow:inset 0 0 0 1px rgba(140,170,240,.18)}
html[data-ui-theme="midnight"] #achBody .atabs{border-bottom:1px solid var(--k-line)}html[data-ui-theme="midnight"] #achBody .atabs button{color:var(--k-ink3);font:400 12.5px var(--k-disp);letter-spacing:.06em}
html[data-ui-theme="midnight"] #achBody .atabs button[aria-pressed="true"]{color:#f3f6fc;border-bottom-color:var(--mn-acc);background:var(--mn-glow)}

/* MIDNIGHT, round four: SHOPS as a grid and a buy box (#shopBuy, built by shopBuyBox): the picked tile lit in moonlight, the box at the top of the
   right-hand column with the item large in its well, what it needs, the price each, the total in gold and Buy */
html[data-ui-theme="midnight"] #shopSell .slot.sel{box-shadow:inset 0 0 0 1px rgba(150,185,255,.7),0 0 10px rgba(143,180,255,.4)}
html[data-ui-theme="midnight"] #shopBuy{display:grid;gap:8px;margin:0 0 10px;padding:12px;background:radial-gradient(70% 50% at 20% 0%,rgba(143,180,255,.12),transparent 70%),linear-gradient(#161c28,#10151f);box-shadow:inset 0 0 0 1px rgba(140,170,240,.16),0 0 0 1px #04060a}
html[data-ui-theme="midnight"] #shopBuy .sb-empty{margin:0;color:var(--k-ink3);font:italic 600 13px Lora,serif;text-align:center;padding:8px}
html[data-ui-theme="midnight"] #shopBuy .sb-top{display:flex;align-items:center;gap:12px}
html[data-ui-theme="midnight"] #shopBuy .sb-art{flex:none;width:64px;height:64px;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,rgba(143,180,255,.25),transparent 70%),#070a10;box-shadow:inset 0 0 0 1px rgba(150,185,255,.3)}
html[data-ui-theme="midnight"] #shopBuy .sb-art .ico,html[data-ui-theme="midnight"] #shopBuy .sb-art img{width:48px;height:48px;image-rendering:pixelated}
html[data-ui-theme="midnight"] #shopBuy .sb-top b{display:block;font:400 17px/1.2 var(--k-disp);color:#f3f6fc}html[data-ui-theme="midnight"] #shopBuy .sb-top small{display:block;font:600 12px Lora,serif;color:var(--k-ink3)}html[data-ui-theme="midnight"] #shopBuy .sb-top small.no{color:var(--k-bad)}
html[data-ui-theme="midnight"] #shopBuy .sb-ex{margin:0;font:500 12.5px/1.4 Lora,serif;color:var(--k-ink2)}
html[data-ui-theme="midnight"] #shopBuy .sb-sum{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:8px;border-top:1px solid var(--k-line);font:600 13px Lora,serif;color:var(--k-ink2)}html[data-ui-theme="midnight"] #shopBuy .sb-tot{font:400 18px var(--k-disp);color:var(--k-gold)}
html[data-ui-theme="midnight"] #shopBuy .sb-buy{font:400 15px var(--k-disp)!important;letter-spacing:.06em;padding:8px 14px;box-shadow:inset 0 1px 0 rgba(200,215,240,.16),inset 0 -2px 0 var(--mn-acc),0 0 12px rgba(143,180,255,.2)!important}

html[data-ui-theme="midnight"] #shopBuy.narrow{margin:0 12px;grid-template-columns:1fr auto;align-items:center}html[data-ui-theme="midnight"] #shopBuy.narrow .sb-ex{display:none}html[data-ui-theme="midnight"] #shopBuy.narrow .sb-top,html[data-ui-theme="midnight"] #shopBuy.narrow .sb-sum{grid-column:1/-1}html[data-ui-theme="midnight"] #shopBuy.narrow .sb-art{width:48px;height:48px}html[data-ui-theme="midnight"] #shopBuy.narrow .sb-art .ico,html[data-ui-theme="midnight"] #shopBuy.narrow .sb-art img{width:36px;height:36px}
/* MIDNIGHT, round four: TRADING, theirs over yours. The two offers stack with what you GET on top (column-reverse: the markup keeps your offer
   first for the other looks), each heading carries what that side is worth at the counter; the boxes are night wells that light green when that
   side has accepted */
html[data-ui-theme="midnight"] .trade-cols{display:flex;flex-direction:column-reverse;gap:10px}
html[data-ui-theme="midnight"] .trade-cols h4{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:400 12.5px/1.2 var(--k-disp);letter-spacing:.1em;color:#c9d3e6;border-bottom:1px solid var(--k-line);padding-bottom:4px}
html[data-ui-theme="midnight"] .tr-val{display:inline;font:600 11.5px Lora,serif;letter-spacing:0;text-transform:none;color:var(--k-gold)}
html[data-ui-theme="midnight"] .trade-box{min-height:84px;border-radius:0;background:#0a0e16;box-shadow:inset 0 0 0 1px rgba(140,170,240,.16),inset 0 3px 8px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .trade-cols>div:last-child .trade-box{background:radial-gradient(70% 60% at 50% 0%,rgba(143,180,255,.1),transparent 70%),#0a0e16}
html[data-ui-theme="midnight"] .trade-box.ok{box-shadow:inset 0 0 0 1px var(--k-good),0 0 10px rgba(91,211,138,.25),inset 0 3px 8px rgba(0,0,0,.5)}

/* MIDNIGHT, round four: THE CHOICE MENU as a plain list (a popup with more than three choices: a player's, a thing's): the target named in moonlight
   on the plate, each choice an ivory row on a hairline, lit from the left when pointed at */
html[data-ui-theme="midnight"] .pop-card:has(#popBtns.many) .k-head b{color:var(--mn-acc)}
html[data-ui-theme="midnight"] #popBtns.many{display:flex;flex-direction:column;gap:0;padding:4px 0}
html[data-ui-theme="midnight"] #popBtns.many .k-btn{justify-content:flex-start;text-align:left;width:100%;border:0;border-bottom:1px solid var(--k-line);border-radius:0;background:none;box-shadow:none;padding:8px 12px;font:600 14px/1.2 Lora,serif;color:var(--k-ink);text-shadow:none}
html[data-ui-theme="midnight"] #popBtns.many .k-btn:hover,html[data-ui-theme="midnight"] #popBtns.many .k-btn:focus-visible{background:radial-gradient(40% 120% at 0% 50%,rgba(143,180,255,.2),transparent 70%);box-shadow:inset 2px 0 0 var(--mn-acc);color:#f3f6fc}
html[data-ui-theme="midnight"] #popBtns.many .k-btn:last-child{border-bottom:0}
/* MIDNIGHT, round four: THE NPC PANEL along the bottom, a little wider, the choices in two columns once there are three or more (one column on a phone) */
html[data-ui-theme="midnight"] .dlg{width:min(720px,calc(100% - 24px))}
@media (min-width:621px){html[data-ui-theme="midnight"] .dlg-opts:has(button:nth-child(3)){grid-template-columns:1fr 1fr;column-gap:14px}}
/* MIDNIGHT: the run report's LOOT along the foot: a row a player in a night well, yours lit in moonlight, your chest washed in gold (it pays) */
html[data-ui-theme="midnight"] .rr-lr{border-radius:0;background:linear-gradient(#141a26,#0e131c);box-shadow:inset 0 0 0 1px rgba(140,170,240,.1)}
html[data-ui-theme="midnight"] .rr-lr>b{font-weight:400;letter-spacing:.03em;color:#f3f6fc}
html[data-ui-theme="midnight"] .rr-lr.me{box-shadow:inset 3px 0 0 var(--mn-acc),inset 0 0 0 1px rgba(150,185,255,.3)}
html[data-ui-theme="midnight"] .rr-lr.hoard{background:linear-gradient(90deg,rgba(244,198,87,.14),transparent 70%),#10151f;box-shadow:inset 3px 0 0 var(--k-gold),inset 0 0 0 1px rgba(244,198,87,.3)}
html[data-ui-theme="midnight"] .rr-li{border-radius:2px;background:linear-gradient(#151c2c,#0f1520);box-shadow:inset 0 0 0 1px rgba(140,170,240,.16),inset 0 3px 6px rgba(0,0,0,.5)}

/* MIDNIGHT: THE SIDE PANEL'S TAB ICONS, redrawn for the look (the owner: "extremely high quality, less jagged/outlined, and more modern"): one
   PixelLab Pro sheet of seven in one light (tools/midnight-tabs.mjs cuts it into mn/tab_*.png at 64px), drawn at 30px and smoothed, not pixelated,
   because they are detailed enough that a smooth downscale reads clean; content:url() swaps the picture without touching the markup */
html[data-ui-theme="midnight"] .tabs button img{width:32px;height:32px;image-rendering:auto;filter:brightness(1.25) drop-shadow(0 0 1px rgba(190,212,255,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
html[data-ui-theme="midnight"] .tabs button[aria-pressed="true"] img,html[data-ui-theme="midnight"] .tabs button:hover img{filter:brightness(1.45) drop-shadow(0 0 1px rgba(210,225,255,.8)) drop-shadow(0 0 6px rgba(143,180,255,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
html[data-ui-theme="midnight"] .tabs button:not([aria-pressed="true"]):not(:hover) img{opacity:.9}
html[data-ui-theme="midnight"] .tabs button[data-tab="inv"] img{content:url(/v3/assets/img/glad/flat/ui/mn/tab_inv.png?v=1)}
html[data-ui-theme="midnight"] .tabs button[data-tab="equip"] img{content:url(/v3/assets/img/glad/flat/ui/mn/tab_equip.png?v=1)}
html[data-ui-theme="midnight"] .tabs button[data-tab="skills"] img{content:url(/v3/assets/img/glad/flat/ui/mn/tab_skills.png?v=1)}
html[data-ui-theme="midnight"] .tabs button[data-tab="quests"] img{content:url(/v3/assets/img/glad/flat/ui/mn/tab_quests.png?v=1)}
html[data-ui-theme="midnight"] .tabs button[data-tab="diary"] img{content:url(/v3/assets/img/glad/flat/ui/mn/tab_diary.png?v=1)}
/* (2026-10-17, v1.6) the Kennel left the tabs: its dog is a square button left of the quick slots' dock, the dock's own glass */
html[data-ui-theme="midnight"] .kenbtn{border-radius:0;background:rgba(9,13,21,.84);box-shadow:inset 0 0 0 1px rgba(140,170,240,.2)}
html[data-ui-theme="midnight"] .kenbtn:hover{background:linear-gradient(rgba(143,180,255,.14),transparent),rgba(9,13,21,.9);box-shadow:inset 0 0 0 1px rgba(143,180,255,.55),0 0 8px rgba(143,180,255,.25)}
html[data-ui-theme="midnight"] .kenbtn img{content:url(/v3/assets/img/glad/flat/ui/mn/tab_pets.png?v=1);width:30px;height:30px}
html[data-ui-theme="midnight"] .game>.kenbtn{top:auto;bottom:10px;right:58px}
html[data-ui-theme="midnight"] .tabs button[data-tab="admin"] img{content:url(/v3/assets/img/glad/flat/ui/mn/tab_admin.png?v=1)}
/* MIDNIGHT, THE AUDIT (2026-10-14, the owner: "theres still quite a few areas that dont match the design decisions ... as well as old remnants of
   the old UIs colors, backgrounds, etc. lets do a pass on that and audit the entire UI again"). Found by tools/mn-census.js, which opens every
   window and groups each control by how it renders: the kit's parts were themed, but windows that kept their own tabs, strips and chips fell
   through to the Tavern's. One look for each part from here:
   WINDOW TABS (Market, Picks, bank pages): caps, lit from below, a moonline under the picked one, like .k-tabs */
html[data-ui-theme="midnight"] :is(.ex-tabs,#exWin .ex-tabs,.pk-sec){gap:2px;margin:-4px -2px 10px;padding:0 6px;border:0;border-bottom:1px solid var(--k-line);background:none}
html[data-ui-theme="midnight"] :is(.ex-tabs,#exWin .ex-tabs) button,html[data-ui-theme="midnight"] .pk-sec .lk-btn[role="tab"]{margin:0 0 -1px;padding:9px 14px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--k-ink3);font:400 12px/1 var(--k-disp);letter-spacing:.1em;text-transform:uppercase;text-shadow:none}
html[data-ui-theme="midnight"] :is(.ex-tabs,#exWin .ex-tabs) button:hover,html[data-ui-theme="midnight"] .pk-sec .lk-btn[role="tab"]:hover{background:none;color:var(--k-ink)}
html[data-ui-theme="midnight"] :is(.ex-tabs,#exWin .ex-tabs) button[aria-pressed="true"],html[data-ui-theme="midnight"] .pk-sec .lk-btn[role="tab"][aria-pressed="true"]{color:#f3f6fc;background:var(--mn-glow);border:0;box-shadow:inset 0 -2px 0 var(--mn-acc);padding-bottom:9px}
html[data-ui-theme="midnight"] .bk-pages button{border:0;border-radius:0;background:none;box-shadow:none;color:var(--k-ink3)}
html[data-ui-theme="midnight"] .bk-pages button:hover{background:rgba(140,170,240,.06);color:var(--k-ink)}
html[data-ui-theme="midnight"] .bk-pages button[aria-pressed="true"],html[data-ui-theme="midnight"] .bk-pages button.on{color:#f3f6fc;background:var(--mn-glow);box-shadow:inset 0 -2px 0 var(--mn-acc)}
/* THE BANK'S PAGES DOWN THE SIDE (round two's pick, "bank tabs down the side"): a column at the left of the bank box, the picked page lit from
   the left; a phone keeps the row along the top. The "drag onto a tab" note goes, the column is too narrow for it (the tabs still take a drop). */
@media (min-width:821px){
  html[data-ui-theme="midnight"] .bk-main{flex-direction:row;gap:0}
  html[data-ui-theme="midnight"] .bk-side{flex:none;flex-direction:column;align-items:stretch;width:58px;border-right:1px solid var(--k-line)}
  html[data-ui-theme="midnight"] .bk-pages{flex-direction:column;flex:1;gap:2px;padding:4px 0;overflow:hidden auto}
  html[data-ui-theme="midnight"] .bk-pages button{width:auto;height:46px;margin:0;border:0}
  html[data-ui-theme="midnight"] .bk-pages button[aria-pressed="true"],html[data-ui-theme="midnight"] .bk-pages button.on{height:46px;background:radial-gradient(70% 90% at 0% 50%,rgba(143,180,255,.22),transparent 72%),#141b2a;box-shadow:inset 2px 0 0 var(--mn-acc)}
  html[data-ui-theme="midnight"] .bk-pages button.over{background:rgba(91,211,138,.14);box-shadow:inset 2px 0 0 #5bd38a}
  html[data-ui-theme="midnight"] .bk-pnote{display:none}
  html[data-ui-theme="midnight"] .bk-box{border:0;border-radius:0;background:none}
}
html[data-ui-theme="midnight"] .bk-pages button em{border-radius:2px;background:#26304a;color:var(--k-ink)}
html[data-ui-theme="midnight"] .bk-pages button i b{border-radius:2px;background:rgba(140,170,240,.1);color:var(--k-ink2)}
html[data-ui-theme="midnight"] .bk-pages button small{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .bk-move{flex-wrap:wrap;row-gap:4px}html[data-ui-theme="midnight"] .bk-move .qty button{padding:3px 6px}html[data-ui-theme="midnight"] .bk-move input{width:56px}
/* STRIPS (bank sort and amount, shop amount, quest filters): the segmented strip, as .k-seg */
html[data-ui-theme="midnight"] :is(.qty,.qfilt){border:0;border-radius:2px;background:#0a0e15;box-shadow:inset 0 0 0 1px var(--k-card-line)}
html[data-ui-theme="midnight"] :is(.qty button,.qfilt .qf){border:0;border-radius:0;background:none;color:var(--k-ink2);text-shadow:none}
html[data-ui-theme="midnight"] :is(.qty button,.qfilt .qf):hover{background:rgba(140,170,240,.08);color:var(--k-ink)}
html[data-ui-theme="midnight"] :is(.qty button[aria-pressed="true"],.qfilt .qf.on){background:var(--k-paper-hi);color:#f3f6fc;box-shadow:inset 0 -2px 0 var(--mn-acc)}
html[data-ui-theme="midnight"] .qfilt .qf small,html[data-ui-theme="midnight"] .qfilt .qf.on small{border-radius:2px;background:rgba(140,170,240,.12)}
/* FIELDS: one sunken well everywhere, a moonline when focused */
html[data-ui-theme="midnight"] :is(.win,.k-win,#panel,.dlg,.pop-card) :is(input:not([type]),input[type="text"],input[type="search"],input[type="number"],textarea,select):not(#wmFind){border:1px solid rgba(140,170,240,.2);border-radius:2px;background:#0a0e16;color:var(--k-ink);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] :is(.win,.k-win,#panel,.dlg,.pop-card) :is(input:not([type]),input[type="text"],input[type="search"],input[type="number"],textarea,select):not(#wmFind):focus{outline:0;border-color:var(--mn-acc);box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 0 1px rgba(143,180,255,.25)}
html[data-ui-theme="midnight"] :is(.win,.k-win,#panel,.dlg,.pop-card) :is(input,textarea)::placeholder{color:var(--k-ink3)}
html[data-ui-theme="midnight"] :is(input[type="checkbox"],input[type="radio"],input[type="range"],progress){accent-color:var(--mn-acc)}   /* the browser's own boxes wore the Tavern's gold */
/* ROWS (market listings, who's on, tracker): flat night rows on a hairline, lit from the left when hovered */
html[data-ui-theme="midnight"] .k-row{border-radius:0;box-shadow:inset 0 -1px 0 var(--k-line)}
html[data-ui-theme="midnight"] .k-row:hover{background:radial-gradient(40% 120% at 0% 50%,rgba(143,180,255,.14),transparent 70%),var(--k-card)}
/* SWITCHES ON SETTINGS' "On the screen": a sap chip when shown, a dark one when hidden (the bright green pills were the Tavern's) */
html[data-ui-theme="midnight"] .ui-pc{border-radius:2px}
html[data-ui-theme="midnight"] .ui-pc button[data-ui-eye]{border-radius:2px;background:rgba(91,211,138,.16);color:#8fe6b2;box-shadow:inset 0 0 0 1px rgba(91,211,138,.3)}
html[data-ui-theme="midnight"] .ui-pc.off button[data-ui-eye]{background:#0a0e15;color:var(--k-ink3);box-shadow:inset 0 0 0 1px var(--k-card-line)}
html[data-ui-theme="midnight"] .ui-pc button[data-ui-back]{border-radius:2px;background:linear-gradient(#262f41,#151b28);color:var(--k-ink2)}
/* GOLD IS MONEY: counts, rates and labels that wore it go to ink and moon */
html[data-ui-theme="midnight"] .top :is(.topl,.me){color:var(--k-ink);border-radius:2px}
html[data-ui-theme="midnight"] .top :is(.topl:hover,button.me:hover,button.me[aria-expanded="true"]){color:#f3f6fc;background:radial-gradient(60% 90% at 50% 100%,rgba(143,180,255,.18),transparent 72%);text-decoration:none}
html[data-ui-theme="midnight"] .top .me img{border-color:rgba(140,170,240,.3);background:#111725}
html[data-ui-theme="midnight"] .top .topl.glow{color:var(--k-gold)}   /* Games, for someone who has never opened it: the ZCoin tables, so gold is right */
/* THE TOP BAR, THE OWNER'S PICKS (2026-10-14, tools/midnight/topbar, the db doc picks/topbar): Store, Wiki, Hiscores | World map, who's online,
   you; Games, Watch and the gear left the bar (Watch is in your menu, Settings was already there). Links are ICONS IN IRON SOCKETS with the name
   beside them (the socket is the icon's own background, so no markup changed); no tag on the Store; who's online is its icon with the count on
   it; you are your character's face (the you card's portrait) in a moonlit ring, then your name. */
html[data-ui-theme="midnight"] .top .topl{gap:7px;height:36px;padding:0 9px 0 3px;font:600 14px/1 Lora,serif;color:var(--k-ink);background:none}
html[data-ui-theme="midnight"] .top .topl .topi{width:32px;height:32px;padding:5px;box-sizing:border-box;background:url(/v3/assets/img/glad/flat/ui/mn/socket.png?v=1) center/100% 100%;image-rendering:auto}
html[data-ui-theme="midnight"] .top .topl:hover{color:#f3f6fc;background:none}html[data-ui-theme="midnight"] .top .topl:hover .topi{filter:drop-shadow(0 0 6px rgba(143,180,255,.55))}
html[data-ui-theme="midnight"] .top .topl-store .hot{display:none}
html[data-ui-theme="midnight"] .top .online{position:relative;display:flex;align-items:center;height:36px;padding:0 8px 0 4px;background:none}
html[data-ui-theme="midnight"] .top .online .topi{width:26px;height:26px;image-rendering:auto}
html[data-ui-theme="midnight"] .top .online b{position:absolute;right:0;top:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#26304a;box-shadow:0 0 0 2px #0b0f17;font:700 10.5px/16px Lora,serif;color:#f3f6fc;text-align:center}
html[data-ui-theme="midnight"] .top .online b:empty{display:none}
html[data-ui-theme="midnight"] .top .online:hover{background:none}html[data-ui-theme="midnight"] .top .online:hover .topi{filter:drop-shadow(0 0 6px rgba(143,180,255,.55))}
html[data-ui-theme="midnight"] .top .me{gap:8px;padding:0 6px 0 3px}
html[data-ui-theme="midnight"] .top .me #topAv{display:none}
html[data-ui-theme="midnight"] .top .top-face{display:block;flex:none;width:30px;height:30px;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 75%,rgba(143,180,255,.28),transparent 70%),#111725;box-shadow:inset 0 0 0 2px #04060a,0 0 0 1px rgba(140,170,240,.35),0 0 8px rgba(143,180,255,.2)}
html[data-ui-theme="midnight"] .top .top-face:empty{display:none}
html[data-ui-theme="midnight"] .top .top-face img{display:block;width:78px;height:78px;max-width:none;margin:-8px 0 0 -24px;image-rendering:auto}
html[data-ui-theme="midnight"] .top .logo img{width:20px;height:20px}
/* (2026-10-14, the owner's callouts 7 and 9) THE CAPE'S SLOT spans the doll's width: the iron tile repeated across it and a long cape name ran out
   of it. One plate stretched to the slot, the name cut with an ellipsis (the full name is on the card). THE ITEM CARD'S TITLE is a grid, icon |
   name, the name free to wrap and the rarity band always on its own row under both: in a flex row the name could not shrink below its longest
   word, and at some UI scales it ran over the icon and onto the band ("Singularity Helm"). */
html[data-ui-theme="midnight"] .doll .eq[data-slot="cape"]{min-width:0;padding:0 10px;background-size:cover;background-position:center}
html[data-ui-theme="midnight"] .doll .eq[data-slot="cape"] small{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html[data-ui-theme="midnight"] #gearTip h5{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;row-gap:0}
html[data-ui-theme="midnight"] #gearTip h5>span{display:block;min-width:0;overflow-wrap:anywhere;line-height:1.15}
html[data-ui-theme="midnight"] #gearTip h5 .fg{margin-left:5px}
html[data-ui-theme="midnight"] #gearTip h5 small{grid-column:1/-1}
/* (2026-10-14, the owner's callout 13) THE WIKI'S UPDATES AND VERSIONS. A version issue carries its own sheet (.wk-*) whose ink comes from its own
   variables (the night pass leaves variables alone) and whose title is !important, so they are restated here; the Updates page's entries become
   night cards on a moonlit rule, dated in the heading face. */
html[data-ui-theme="midnight"] .wk{--wk-ink:#e9eef8;--wk-dim:#a6b3ce;--wk-gold:#8fb4ff}
html[data-ui-theme="midnight"] .wk-hero{border-radius:0;background:radial-gradient(60% 120% at 10% 100%,rgba(143,180,255,.18),transparent 70%),linear-gradient(135deg,#1b2232,#111725 60%,#0b0f17)!important;box-shadow:inset 0 0 0 1px rgba(140,170,240,.22),0 6px 18px rgba(0,0,0,.45)!important}
html[data-ui-theme="midnight"] .wk-hero h2{color:#f3f6fc!important;font-weight:400!important;font-family:var(--k-disp)!important;letter-spacing:.03em}
html[data-ui-theme="midnight"] .wk-hero small{color:var(--mn-acc)}html[data-ui-theme="midnight"] .wk-hero p{color:var(--k-ink2)}
html[data-ui-theme="midnight"] .wk-share{border-radius:2px;background:rgba(140,170,240,.14);color:#e3edff}html[data-ui-theme="midnight"] .wk-share:hover{background:rgba(140,170,240,.26)}
html[data-ui-theme="midnight"] .wk h3{font:400 14px var(--k-disp);letter-spacing:.12em;color:var(--mn-acc)}
html[data-ui-theme="midnight"] .wk-card{border-radius:0;background:#141b2a;box-shadow:inset 0 0 0 1px rgba(140,170,240,.16)}
html[data-ui-theme="midnight"] .wk-card:hover{background:radial-gradient(40% 140% at 0% 50%,rgba(143,180,255,.16),transparent 70%),#182033;box-shadow:inset 2px 0 0 var(--mn-acc),inset 0 0 0 1px rgba(140,170,240,.22)}
html[data-ui-theme="midnight"] .wk-card b{font-weight:400;font-family:var(--k-disp)}html[data-ui-theme="midnight"] .wk-tease{color:#ffb98a}
/* (round six, "Timeline") the updates on one moonlit rail, newest at the top, a diamond at each, the reporter as a tag */
html[data-ui-theme="midnight"] .wiki .up{position:relative;margin:0 0 0 7px;padding:0 0 16px 22px;border:0;border-left:2px solid rgba(143,180,255,.35);background:none;box-shadow:none}
html[data-ui-theme="midnight"] .wiki .up::before{content:"";position:absolute;left:-8px;top:3px;width:12px;height:12px;transform:rotate(45deg);background:#0b0f17;box-shadow:0 0 0 2px var(--mn-acc),0 0 8px rgba(143,180,255,.5)}
html[data-ui-theme="midnight"] .wiki .up ul{margin:4px 0 0;padding-left:16px}
html[data-ui-theme="midnight"] .wiki .up-cr{display:inline-block;margin-left:4px;padding:0 6px;background:rgba(140,170,240,.12);color:var(--mn-acc);font:700 10.5px/16px Lora,serif;white-space:nowrap}
html[data-ui-theme="midnight"] .wiki .up small{font:400 12px var(--k-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--mn-acc)}
html[data-ui-theme="midnight"] .wiki .up h3{font-family:var(--k-disp);font-weight:400;color:#f3f6fc}
html[data-ui-theme="midnight"] .wiki .up li{color:var(--k-ink2)}html[data-ui-theme="midnight"] .wiki .up li::marker{color:var(--mn-acc)}
/* ROUND SIX, THE OWNER'S PICKS (2026-10-14, tools/midnight/round6, the db doc picks/round6). THE COUNT is in a dark pill, top right (bottom right was the pick, then the owner moved it up off the art), ivory
   at 11.5px (it was 10px, top left); A FAVOURITE is a moonlit corner with a star cut in it, TOP LEFT (the pick drew it top right, where the
   reforge badge and the rolled-loot mark already live; top left is free now the count has moved); the Long Night's tag goes bottom left. */
html[data-ui-theme="midnight"] .slot>em:is(:not([class]),.k,.m){left:auto;top:2px;right:2px;bottom:auto;padding:0 4px;border-radius:0;background:rgba(4,6,10,.88);box-shadow:inset 0 0 0 1px rgba(140,170,240,.18);font:800 11.5px/15px Lora,serif;color:#f3f6fc;text-shadow:none}
html[data-ui-theme="midnight"] .slot:has(>.fgn,>em.rr)>em:is(:not([class]),.k,.m){top:auto;bottom:2px}   /* (2026-10-14, the owner: the count "should be in the top right in a dark pill so it doesnt cover the artwork") top right, unless a reforge or rarity mark has it */
html[data-ui-theme="midnight"] .slot>em.fav{left:0;top:0;width:16px;height:16px;font-size:0;line-height:0;color:transparent;text-shadow:none;background:linear-gradient(135deg,#8fb4ff 50%,transparent 50%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
html[data-ui-theme="midnight"] .slot>em.fav::after{content:"\2605";position:absolute;left:1px;top:0;font:8px/9px Lora,serif;color:#0b0f17}
html[data-ui-theme="midnight"] .slot>em.evtag{top:auto;bottom:1px;left:2px}
/* ROUND SEVEN, THE OWNER'S PICKS (2026-10-15, tools/midnight/round7, the db doc picks/round7).
   THE CHAT ("Message cards" + "Alternate rows"; names exactly as they are, the owner: "users have purchased chat name effects and we should keep
   those"): each message its own small card, the sender's face (chatFace) at its left, the name over the message, every other card a shade
   lighter; the house's lines (the CASINO, a big win, the Market) edged in gold. The colon goes; the name keeps every colour, effect and badge. */
html[data-ui-theme="midnight"] .chat-log p:has(>.cf){display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;align-items:start;margin:0 0 4px;padding:5px 8px 6px 6px;border-radius:0;background:rgba(17,23,37,.62);box-shadow:inset 0 0 0 1px rgba(140,170,240,.1);line-height:1.32}
html[data-ui-theme="midnight"] .chat-log p:has(>.cf):nth-child(even){background:rgba(27,36,56,.62)}
html[data-ui-theme="midnight"] .chat-log p:has(>.cf)>*{grid-column:2}   /* (2026-10-15) only a line with a sender is a card: the Log and Drops lines are bare text, and a grid put their words one per row in the face's 24px column */
html[data-ui-theme="midnight"] .chat-log p>.cf{grid-column:1;grid-row:1/3;display:block;width:24px;height:24px;margin-top:1px;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 75%,rgba(143,180,255,.28),transparent 70%),#111725;box-shadow:0 0 0 1px rgba(140,170,240,.3)}
html[data-ui-theme="midnight"] .chat-log p>.cf img{display:block;width:62px;height:62px;max-width:none;margin:-6px 0 0 -19px;image-rendering:auto}
html[data-ui-theme="midnight"] .chat-log p>.cf.cf-house{background:radial-gradient(circle,#1a2233,#0b0f17);box-shadow:0 0 0 1px rgba(244,198,87,.45)}html[data-ui-theme="midnight"] .chat-log p>.cf.cf-house img{width:18px;height:18px;margin:3px}
html[data-ui-theme="midnight"] .chat-log p>.cf.cf-ini{display:grid;place-items:center;background:hsl(var(--h) 38% 30%);font:700 12px/1 Lora,serif;color:#f3f6fc}
html[data-ui-theme="midnight"] .chat-log p>.cc{display:none}
html[data-ui-theme="midnight"] .chat-log p>b{justify-self:start;max-width:100%}
html[data-ui-theme="midnight"] .chat-log p>span:last-child{color:var(--k-ink2);overflow-wrap:anywhere}
html[data-ui-theme="midnight"] .chat-log p:has(>.cf-house){background:linear-gradient(90deg,rgba(244,198,87,.1),rgba(17,23,37,.62));box-shadow:inset 2px 0 0 var(--k-gold),inset 0 0 0 1px rgba(244,198,87,.14)}
html[data-ui-theme="midnight"] .chat-log p:has(>.cf-house)>span:last-child{color:#ffe4a0}
/* THE GAME'S OWN MESSAGES ("Glass lines"): a glass strip per line with an edge in its kind's colour (loot gold, good news green, bad red) */
html[data-ui-theme="midnight"] .feed p{padding:4px 10px 4px 9px;border-radius:0;background:rgba(9,13,21,.82);box-shadow:inset 2px 0 0 var(--fc,#c9d3e6),inset 0 0 0 1px rgba(140,170,240,.12);font:600 12.5px/1.3 Lora,serif;text-shadow:none}
html[data-ui-theme="midnight"] .feed .sys{--fc:#8391ad;color:#e9eef8}html[data-ui-theme="midnight"] .feed .good{--fc:#5bd38a;color:#8fe6b2}html[data-ui-theme="midnight"] .feed .loot{--fc:#f4c657;color:#f4c657}html[data-ui-theme="midnight"] .feed .bad{--fc:#f2555a;color:#ff9a9e}html[data-ui-theme="midnight"] .feed .admin{--fc:#8fb4ff;color:#c9dcff}
/* BUFFS ("One glass strip"). (2026-10-17, v1.7, the owner: "remove them") the speaker that sat before them is gone too: mute is M or Settings, Audio */
html[data-ui-theme="midnight"] .hudtr .buffbar:not(:empty){padding:4px 8px;border-radius:0;background:rgba(9,13,21,.84);box-shadow:inset 0 0 0 1px rgba(140,170,240,.2)}   /* (2026-10-15) the speaker went, so the buffs are the strip on their own */
html[data-ui-theme="midnight"] .buffbar>small{display:none}
/* THE QUICK SLOTS, DOCKED (2026-10-15, the owner, after round seven): in the bottom right corner (above the bug button, then in its place when it went), one slot showing; pointed at,
   the rest rise over it with a padlock on top; with the padlock shut (.qopen) all of them stay up. Keys Z X C V work either way. */
html[data-ui-theme="midnight"] .quickbar.belt.qdock{top:auto;bottom:10px;right:10px;display:flex;flex-direction:column-reverse;align-items:center;gap:3px;padding:4px;grid-template-rows:none;border-radius:0;background:rgba(9,13,21,.84);box-shadow:inset 0 0 0 1px rgba(140,170,240,.2)}
html[data-ui-theme="midnight"] .quickbar.qdock>.qslot:not(:first-child),html[data-ui-theme="midnight"] .quickbar.qdock>.qlock{display:none}
html[data-ui-theme="midnight"] .quickbar.qdock:is(:hover,:focus-within,.qopen)>.qslot{display:flex}
html[data-ui-theme="midnight"] .quickbar.qdock:is(:hover,:focus-within,.qopen)>.qlock{display:block}
html[data-ui-theme="midnight"] .quickbar .qlock{width:34px;height:22px;padding:0;border:0;border-radius:0;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238391ad' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='1'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E") center/16px no-repeat}
html[data-ui-theme="midnight"] .quickbar .qlock[aria-pressed="true"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb4ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='1'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");filter:drop-shadow(0 0 4px rgba(143,180,255,.6))}
html[data-ui-theme="midnight"] .quickbar .qlock:hover{background-color:rgba(140,170,240,.1)}
/* THE ABILITY BAR: your health is in your card, so the bar is the four slots, a little smaller (2026-10-20: the thin Fury line under them is gone with Fury) */
html[data-ui-theme="midnight"] .actbar #abHpM{display:none}
html[data-ui-theme="midnight"] .actbar{gap:4px}
html[data-ui-theme="midnight"] .actbar .abilbar{order:1;padding:6px 8px}
html[data-ui-theme="midnight"] .actbar .abslot{width:42px;height:42px}html[data-ui-theme="midnight"] .actbar .abslot img{width:30px;height:30px}
/* (2026-10-17, the owner: "the abilities bar is overflowing text when one isnt selected") the one "Learn abilities" button grows to its words; the 42px square is for real slots */
@media (min-width:521px){html[data-ui-theme="midnight"] .actbar .abslot.ablearn{width:auto;min-width:42px;padding:0 14px;white-space:nowrap;font:600 13px/1 Marcellus,Cinzel,serif;letter-spacing:.03em;color:var(--mn-acc,#8fb4ff)}html[data-ui-theme="midnight"] .actbar .abslot.ablearn:hover{color:#f3f6fc}}
html[data-ui-theme="midnight"] .actbar .ab-bars{display:none}
/* (2026-10-15, v1.6, Round Nine: "Framed by rarity" with the sorted shelves, and "The Equipment Grid") THE BAG AND EQUIPMENT IN MIDNIGHT. The heading on one
   line (the plate, the count, what the Counter would pay); the bag bar of iron sockets; a rolled piece lit from below in its rarity's colour with a
   hairline of it round the slot; a new pickup's moonlit shimmer; the search, the Slots | Shelves switch and Sort as one row; the grid's rows, its band
   and the detail pane in the iron frame the item card wears. */
html[data-ui-theme="midnight"] .inv-ph{flex-wrap:nowrap;align-items:center;gap:8px;margin:0 -2px;padding:6px 8px;border-bottom:1px solid var(--k-line);letter-spacing:0;text-transform:none}
html[data-ui-theme="midnight"] .inv-ph .iph-p{box-sizing:border-box;height:28px;gap:7px;padding:0 10px;border:9px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/plate.png?v=1) 12 fill / 9px stretch;font:400 14px/1 var(--k-disp);letter-spacing:.06em;color:#f3f6fc;white-space:nowrap}
html[data-ui-theme="midnight"] .inv-ph .iph-t{flex:1 1 auto;align-items:center;gap:8px}
html[data-ui-theme="midnight"] .inv-ph .iph-t small{font:700 12.5px Lora,serif;color:var(--k-ink2)}html[data-ui-theme="midnight"] .inv-ph .iph-t small.full{color:#ffb3b5}
html[data-ui-theme="midnight"] .inv-ph .iph-r{flex:none;display:flex;margin-left:auto}
html[data-ui-theme="midnight"] .inv-ph .bagchip{display:inline-flex;align-items:center;gap:4px;margin:0;padding:0;background:none;box-shadow:none;border-radius:0;font:700 12.5px Lora,serif;color:var(--k-gold);animation:none}
html[data-ui-theme="midnight"] .inv-ph .bagchip img{width:16px;height:16px}
html[data-ui-theme="midnight"] .inv-ph .bagchip.full{color:var(--k-gold);background:none}
html[data-ui-theme="midnight"] .ibar{border-bottom-color:var(--k-line)}
html[data-ui-theme="midnight"] .ib-s{border-radius:0;background:#0b1019;box-shadow:inset 0 0 0 1px var(--k-card-line)}
html[data-ui-theme="midnight"] .ib-s.on{background:linear-gradient(rgba(143,180,255,.12),transparent),#0b1019;box-shadow:inset 0 0 0 1px rgba(143,180,255,.55)}
html[data-ui-theme="midnight"] .ib-s.ib-tix{background:linear-gradient(rgba(244,198,87,.08),transparent),#0a0e15;box-shadow:inset 0 0 0 1px rgba(244,198,87,.35)}html[data-ui-theme="midnight"] .ib-tix small b{font:700 12.5px/1 Lora,serif;color:var(--k-gold)}   /* (2026-10-17, v1.6) the tickets, the wallet chip's gold */
html[data-ui-theme="midnight"] .ib-s.warn small{color:#ffb3b5}
html[data-ui-theme="midnight"] .ib-bar{background:#05070b}html[data-ui-theme="midnight"] .ib-bar i{background:linear-gradient(90deg,#5b7fc0,var(--mn-acc))}
html[data-ui-theme="midnight"] .ib-s.warn .ib-bar i{background:linear-gradient(90deg,#c0393e,var(--k-bad))}
html[data-ui-theme="midnight"] .inv .slot.rar{background:radial-gradient(90% 70% at 50% 100%,color-mix(in srgb,var(--rr) 34%,transparent),transparent 75%),url(/v3/assets/img/glad/flat/ui/mn/iron_d.png?v=1) 50% 50%/128px 128px;box-shadow:inset 0 0 0 2px var(--rr),inset 0 -6px 10px rgba(0,0,0,.35);outline:1px solid color-mix(in srgb,var(--rr) 60%,#000);outline-offset:0}
html[data-ui-theme="midnight"] .inv .slot.rar.rk-mythic img{animation:invMyth 3.6s ease-in-out infinite}
@keyframes invMyth{50%{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--rr) 80%,transparent))}}
html[data-ui-theme="midnight"] .inv .slot.nw{box-shadow:inset 0 0 0 1px rgba(143,180,255,.7),inset 0 0 14px rgba(143,180,255,.35)}
html[data-ui-theme="midnight"] .inv .slot.nw::before{background:linear-gradient(115deg,transparent 30%,rgba(200,220,255,.28) 48%,transparent 62%) 0 0/250% 100%}
html[data-ui-theme="midnight"] .inv .slot:not(.empty):not(.locked):hover{outline:2px solid var(--mn-acc);outline-offset:1px;z-index:3;filter:none}
@media (prefers-reduced-motion:reduce){html[data-ui-theme="midnight"] .inv .slot.rar.rk-mythic img{animation:none}}
html[data-ui-theme="midnight"] .isearch{background:#0a0e15;box-shadow:inset 0 0 0 1px var(--k-card-line)}
html[data-ui-theme="midnight"] .isearch:focus-within{box-shadow:inset 0 0 0 1px rgba(143,180,255,.55);color:var(--mn-acc)}
html[data-ui-theme="midnight"] .iseg{background:#0a0e15}
html[data-ui-theme="midnight"] .iseg button[aria-selected="true"]{color:#f3f6fc;background:rgba(143,180,255,.14)}
html[data-ui-theme="midnight"] .itools .ibtn,html[data-ui-theme="midnight"] .eqg-wb{border:1px solid #04060a;border-radius:0;background:linear-gradient(#262f41,#151b28);box-shadow:inset 0 1px 0 rgba(200,215,240,.16),0 2px 4px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] .itools .ibtn:hover{background:var(--mn-glow),linear-gradient(#262f41,#151b28)}
html[data-ui-theme="midnight"] .ish-h.new{color:#cfe0ff}
html[data-ui-theme="midnight"] .ib-pk{background:#0c111b;box-shadow:inset 0 0 0 1px var(--k-card-line)}
html[data-ui-theme="midnight"] .ib-pk:hover{box-shadow:inset 0 0 0 1px rgba(143,180,255,.45);filter:none}
html[data-ui-theme="midnight"] .ib-pt b{color:#f3f6fc}html[data-ui-theme="midnight"] .ib-pk.none{box-shadow:inset 0 0 0 1px var(--k-line)}html[data-ui-theme="midnight"] .ib-pk.none .ib-pt b{color:var(--k-ink3)}
/* the bag's count pill and wallet chips, the pick's (round three's chips, squared and in gold for the two coins) */
html[data-ui-theme="midnight"] #panel .inv .slot>em:is(:not([class]),.k,.m){top:2px;right:2px;padding:0 4px;font:700 10.5px/14px Lora,serif;background:rgba(4,6,10,.85);box-shadow:inset 0 0 0 1px rgba(140,170,240,.16)}
html[data-ui-theme="midnight"] #panel .wallets{margin-top:8px}
html[data-ui-theme="midnight"] #panel .wl-strip{gap:6px;padding:0}html[data-ui-theme="midnight"] #panel .wl-s.wl-corn{margin-top:0}
html[data-ui-theme="midnight"] #panel .isearch input#invQ[type]{height:100%;border:0;border-radius:0;background:none;box-shadow:none;padding:0}
html[data-ui-theme="midnight"] #panel .wl-s{box-sizing:border-box;height:28px;gap:5px;padding:0 9px 0 5px;border-radius:0;background:#0a0e15;box-shadow:inset 0 0 0 1px var(--k-card-line)}
html[data-ui-theme="midnight"] #panel .wl-s:is(.wl-tix,.wl-zc){box-shadow:inset 0 0 0 1px rgba(244,198,87,.35)}
html[data-ui-theme="midnight"] #panel .wl-s b{font:700 12.5px/1 Lora,serif;letter-spacing:0;color:var(--k-ink)}html[data-ui-theme="midnight"] #panel .wl-s:is(.wl-tix,.wl-zc) b{color:var(--k-gold)}
html[data-ui-theme="midnight"] :is(.ib-use,.eqg-foot,#eqDetail) kbd{background:#070a10}
/* the equipment grid */
html[data-ui-theme="midnight"] .eqg-sel{background:linear-gradient(90deg,color-mix(in srgb,var(--rr,#8fb4ff) 14%,transparent),transparent 80%)}
html[data-ui-theme="midnight"] .eqg-nm b{color:#f3f6fc}
html[data-ui-theme="midnight"] .eqg .eq.eqg-s{border-radius:0}
html[data-ui-theme="midnight"] .eqg .eq.eqg-s.rar{box-shadow:inset 0 0 0 1px var(--rr),inset 0 0 12px color-mix(in srgb,var(--rr) 28%,transparent),0 0 8px color-mix(in srgb,var(--rr) 24%,transparent)}
html[data-ui-theme="midnight"] .eqg .eq.eqg-s.rar.rk-mythic .ico{animation:invMyth 3.6s ease-in-out infinite}
html[data-ui-theme="midnight"] .eqg .eq.eqg-s.wk{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--wk) 18%,transparent),transparent 70%),url(/v3/assets/img/glad/flat/ui/mn/iron_d.png?v=1) 50% 50%/128px 128px}
html[data-ui-theme="midnight"] .eqg .eq.eqg-s:not(.empty):not(.lockd):hover{outline:2px solid var(--mn-acc);outline-offset:2px}
html[data-ui-theme="midnight"] .eqg-wb.on{background:linear-gradient(color-mix(in srgb,var(--wk) 30%,#262f41),#151b28);box-shadow:inset 0 0 0 1px var(--wk),0 0 8px color-mix(in srgb,var(--wk) 40%,transparent)}
html[data-ui-theme="midnight"] .eqg-stats{background:var(--k-card)}
html[data-ui-theme="midnight"] .eqg-ph{margin:0 -2px;padding:9px 12px 8px;border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] .eqg-ph>span{font:400 16px/20px var(--k-disp);letter-spacing:.08em;text-transform:uppercase;color:#f3f6fc}html[data-ui-theme="midnight"] .eqg-ph .iph-i{display:none}
html[data-ui-theme="midnight"] .eqg-ph small{font:600 12.5px Lora,serif;letter-spacing:0;color:var(--k-ink2)}
html[data-ui-theme="midnight"] .eqg-stats b{color:#f3f6fc}
html[data-ui-theme="midnight"] #eqDetail{width:330px;border:12px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/iron_frame.png?v=1) 18 / 18px repeat;background:linear-gradient(rgba(13,18,28,.97),rgba(13,18,28,.97)),url(/v3/assets/img/glad/flat/ui/mn/slate_d.png?v=1) 0 0/128px 128px;background-clip:padding-box;box-shadow:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.65))}
html[data-ui-theme="midnight"] #eqDetail>*{margin:0 14px}html[data-ui-theme="midnight"] #eqDetail .eqd-art{margin:0;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--rr) 26%,transparent),transparent 62%),linear-gradient(#0b1019,#121a2a)}
html[data-ui-theme="midnight"] #eqDetail .eqd-n b{color:#f3f6fc}html[data-ui-theme="midnight"] #eqDetail .eqd-tag{background:#0a0e15}
html[data-ui-theme="midnight"] #eqDetail .eqd-t b{color:#f3f6fc}html[data-ui-theme="midnight"] #eqDetail .eqd-forge{color:var(--k-gold)}
/* the bag's card (eastscape-tip.js htmlDz): Diablo's, 1:1 with the pick; --rar is the piece's rarity, moonlight for plain gear */
html[data-ui-theme="midnight"] #gearTip.dz[hidden]{display:none}   /* (2026-10-15, audit) the card's display:flex outranked [hidden]: it stayed on screen after the pointer left */
html[data-ui-theme="midnight"] #gearTip.dz{display:flex;flex-direction:column;gap:8px;width:300px;padding:0;border:0;border-image:none;background:none;filter:none;font:400 13px/1.4 Lora,serif;color:var(--k-ink)}
html[data-ui-theme="midnight"] #gearTip .dz-worn{width:190px;padding:8px 10px;background:rgba(12,16,26,.94);box-shadow:inset 0 0 0 1px var(--k-card-line),0 10px 20px rgba(0,0,0,.55);font-size:12px;color:var(--k-ink2)}
html[data-ui-theme="midnight"] #gearTip .dz-worn small{display:block;margin-bottom:5px;font:400 10.5px var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink3)}
html[data-ui-theme="midnight"] #gearTip .dz-worn>div{display:flex;align-items:center;gap:8px}html[data-ui-theme="midnight"] #gearTip .dz-worn b{color:#f3f6fc;font-weight:600}
html[data-ui-theme="midnight"] #gearTip .dz-ws{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #04060a;background:url(/v3/assets/img/glad/flat/ui/mn/iron_d.png?v=1) 50% 50%/128px 128px;box-shadow:inset 0 1px 0 rgba(200,215,240,.14)}
html[data-ui-theme="midnight"] #gearTip .dz-ws img,html[data-ui-theme="midnight"] #gearTip .dz-ws .ico{width:28px;height:28px}
html[data-ui-theme="midnight"] #gearTip .dz-card{background:rgba(12,16,26,.97);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rar) 55%,transparent),0 0 0 1px #04060a,0 14px 30px rgba(0,0,0,.65)}
html[data-ui-theme="midnight"] #gearTip .dz-h{position:relative;padding:12px 14px 10px;background:linear-gradient(color-mix(in srgb,var(--rar) 32%,transparent),color-mix(in srgb,var(--rar) 5%,transparent));border-bottom:1px solid color-mix(in srgb,var(--rar) 40%,transparent)}
html[data-ui-theme="midnight"] #gearTip .dz-h::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--rar),transparent)}
html[data-ui-theme="midnight"] #gearTip .dz-h span{display:flex;align-items:center;gap:5px;font:700 11.5px Lora,serif;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--rar) 45%,#fff)}
html[data-ui-theme="midnight"] #gearTip .dz-h b{display:block;margin-top:1px;font:400 18px/1.2 var(--k-disp);letter-spacing:.03em;color:color-mix(in srgb,var(--rar) 62%,#fff)}
html[data-ui-theme="midnight"] #gearTip .dz-h b i{font-style:normal;color:var(--k-gold)}
html[data-ui-theme="midnight"] #gearTip .dz-mk{display:inline-block;flex:none;width:11px;height:11px;background:var(--rar);vertical-align:-1px}
html[data-ui-theme="midnight"] #gearTip .dz-mk.rk-greater{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
html[data-ui-theme="midnight"] #gearTip .dz-mk.rk-legend{clip-path:polygon(0 22%,26% 52%,50% 4%,74% 52%,100% 22%,90% 92%,10% 92%)}
html[data-ui-theme="midnight"] #gearTip .dz-mk.rk-mythic{clip-path:polygon(50% 0,60% 30%,85% 15%,70% 40%,100% 50%,70% 60%,85% 85%,60% 70%,50% 100%,40% 70%,15% 85%,30% 60%,0 50%,30% 40%,15% 15%,40% 30%)}
html[data-ui-theme="midnight"] #gearTip .dz-ip{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] #gearTip .dz-sl{display:grid;place-items:center;flex:none;width:56px;height:56px;border:1px solid #04060a;background:url(/v3/assets/img/glad/flat/ui/mn/iron_d.png?v=1) 50% 50%/128px 128px;box-shadow:inset 0 1px 0 rgba(200,215,240,.14),inset 0 -6px 10px rgba(0,0,0,.35)}
html[data-ui-theme="midnight"] #gearTip .dz-sl img,html[data-ui-theme="midnight"] #gearTip .dz-sl .ico{width:40px;height:40px}
html[data-ui-theme="midnight"] #gearTip .dz-ip>div{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--k-ink2)}
html[data-ui-theme="midnight"] #gearTip .dz-ip>div b{font:400 26px/1 var(--k-disp);color:#f3f6fc}
html[data-ui-theme="midnight"] #gearTip .dz-ip small{color:var(--k-ink3)}html[data-ui-theme="midnight"] #gearTip .dz-ip small.no{color:var(--k-bad)}
html[data-ui-theme="midnight"] #gearTip .dz-st{display:flex;flex-direction:column;gap:3px;padding:8px 14px;border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] #gearTip .dz-st div{display:flex;align-items:center;gap:8px}
html[data-ui-theme="midnight"] #gearTip .dz-st img{width:18px;height:18px}
html[data-ui-theme="midnight"] #gearTip .dz-st b{margin-left:auto;font-weight:700;color:#f3f6fc;font-variant-numeric:tabular-nums}
html[data-ui-theme="midnight"] #gearTip .dz-st div>span{min-width:38px;text-align:right;font-size:11.5px;font-weight:700}
html[data-ui-theme="midnight"] #gearTip .dz-up{color:var(--k-good)}html[data-ui-theme="midnight"] #gearTip .dz-dn{color:var(--k-bad)}
html[data-ui-theme="midnight"] #gearTip .dz-ln{display:flex;flex-direction:column;gap:5px;padding:9px 14px;border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] #gearTip .dz-ln div{display:flex;gap:8px;align-items:baseline;line-height:1.35;color:color-mix(in srgb,var(--rar) 18%,#f3f0ee)}
html[data-ui-theme="midnight"] #gearTip .dz-ln small,html[data-ui-theme="midnight"] #gearTip .dz-ow{font-size:11.5px;color:var(--k-ink3)}
html[data-ui-theme="midnight"] #gearTip .dz-ow{padding:6px 14px;border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] #gearTip .dz-fg{display:flex;flex-wrap:wrap;gap:3px 8px;margin:8px 14px 0;padding:4px 8px;background:linear-gradient(90deg,rgba(244,198,87,.22),rgba(244,198,87,.04));box-shadow:inset 2px 0 0 var(--k-gold);color:var(--k-gold);font-size:12px}
html[data-ui-theme="midnight"] #gearTip .dz-fx{display:flex;flex-direction:column;gap:2px;padding:8px 14px;font-size:12.5px;border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] #gearTip .dz-fl{margin:0;padding:9px 14px;font-style:italic;font-size:12.5px;color:var(--k-ink3);border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] #gearTip .dz-f{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;color:var(--k-ink2)}
html[data-ui-theme="midnight"] #gearTip .dz-t{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-weight:700;color:var(--k-gold);font-variant-numeric:tabular-nums}
html[data-ui-theme="midnight"] #gearTip .dz-t img,html[data-ui-theme="midnight"] #gearTip .dz-t .ico{width:16px;height:16px}
html[data-ui-theme="midnight"] #gearTip .dz-k{display:flex;flex-wrap:wrap;gap:4px 10px;padding:8px 14px 10px;background:#0a0e15;font-size:11.5px;color:var(--k-ink3)}
html[data-ui-theme="midnight"] #gearTip .dz-k span{display:inline-flex;align-items:center;gap:5px}
html[data-ui-theme="midnight"] #gearTip .dz-k kbd{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;font:700 10px Lora,serif;color:var(--k-ink2);background:#070a10;box-shadow:inset 0 0 0 1px var(--k-card-line)}
html[data-ui-theme="midnight"] .inv .slot>em.fvi{left:2px;top:2px;width:13px;height:13px;background:none;filter:drop-shadow(0 1px 1px #000)}html[data-ui-theme="midnight"] .inv .slot>em.fvi::after{content:none}html[data-ui-theme="midnight"] .inv .slot>em.fvi img{width:13px;height:13px}
/* (end of Round Nine: the bag and equipment) */
/* GEAR'S NUMBERS AS TILES ("Stat tiles"): six tiles in two rows, the five numbers and your weapon (the line under the strip goes), and one
   full-width button to the Character window. The work clothes' strip takes the same tiles. */
html[data-ui-theme="midnight"] .bstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:8px 8px 4px;padding:0;background:none;box-shadow:none}
html[data-ui-theme="midnight"] .bstrip span,html[data-ui-theme="midnight"] .bstrip span:first-child{display:grid;justify-items:center;align-content:center;gap:1px;min-width:0;padding:7px 4px 6px;border:0;background:#0d121c;box-shadow:inset 0 0 0 1px rgba(140,170,240,.14)}
html[data-ui-theme="midnight"] .bstrip .bw-tile{display:grid}
html[data-ui-theme="midnight"] .bstrip span i img,html[data-ui-theme="midnight"] .bstrip span i .ico{width:22px;height:22px}
html[data-ui-theme="midnight"] .bstrip small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
html[data-ui-theme="midnight"] .bstrip .bw-tile b{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 12px/1.3 Lora,serif}
html[data-ui-theme="midnight"] .bstrip .bw-tile small{text-transform:none;letter-spacing:0;font-size:11px}
html[data-ui-theme="midnight"] .bstrip:has(.bw-tile)+.bwield{display:none}
html[data-ui-theme="midnight"] .ch-entry{display:block;margin:6px 8px 4px}html[data-ui-theme="midnight"] .ch-entry .k-btn{width:100%;justify-content:center}html[data-ui-theme="midnight"] .ch-entry .k-note{display:none}
/* THE SKILLS TAB ("Tabs" and "One list"): Skills / My stats / My profile as tabs across its top (Skills is where you are; the other two open the
   Character window and your profile, as their buttons did); each group's total (Combat's level, Skilling's and Crafting's totals) lit up on its
   own small iron tag at the right of the group's heading. */
html[data-ui-theme="midnight"] .ms-entry:not(.ch-entry){display:flex;gap:0;margin:0 0 4px;padding:0;border-bottom:1px solid var(--k-line)}
html[data-ui-theme="midnight"] .ms-entry:not(.ch-entry)>*{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:0;height:36px;margin:0;padding:0 4px;border:0;border-radius:0;background:none;box-shadow:none;font:400 12px/1 var(--k-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--k-ink3);text-decoration:none;text-shadow:none;cursor:pointer}
html[data-ui-theme="midnight"] .ms-entry:not(.ch-entry)>* img{display:none}
html[data-ui-theme="midnight"] .ms-entry:not(.ch-entry)>button:hover{color:var(--k-ink);background:rgba(140,170,240,.05)}
html[data-ui-theme="midnight"] .ms-entry .ms-cur{display:flex;cursor:default;color:#f3f6fc;background:radial-gradient(60% 90% at 50% 100%,rgba(143,180,255,.22),transparent 72%);box-shadow:inset 0 -2px 0 var(--mn-acc)}
html[data-ui-theme="midnight"] .skh{display:flex;align-items:center}
html[data-ui-theme="midnight"] .skh small{display:inline-flex;align-items:baseline;gap:4px;padding:2px 9px;background:linear-gradient(#262f41,#151b28);box-shadow:inset 0 1px 0 rgba(200,215,240,.16),inset 0 -2px 0 var(--mn-acc),0 0 10px rgba(143,180,255,.2);font:700 13px/1.2 Lora,serif;color:#f3f6fc;text-transform:none;letter-spacing:0}
/* THE QUESTS TAB ("Three tabs", "Rows", "Rows with bars"): the tab row is the kit's caps tabs; a quest to start is a row (its difficulty mark,
   the name, HERE when it is given in your area, who and where under it); one you are doing is a card with a moonlit edge; a paid job is a row
   with its bar and its pay on a gold chip, a done one edged in green. */
html[data-ui-theme="midnight"] .qtabs{margin:0 0 4px}html[data-ui-theme="midnight"] .qtabs button{flex:1 1 0;padding:10px 4px 9px}
html[data-ui-theme="midnight"] .qtabs button small{margin-left:3px;font:600 11px Lora,serif;letter-spacing:0;color:var(--k-ink3)}
html[data-ui-theme="midnight"] .qs .q{margin:0;padding:6px 8px 7px;border:0;border-bottom:1px solid var(--k-line);border-radius:0;background:none;box-shadow:none}
html[data-ui-theme="midnight"] .qs .q>b{display:flex;align-items:center;gap:8px;font:600 13.5px/1.25 Lora,serif}
html[data-ui-theme="midnight"] .qs .q>b .qico{width:18px;height:18px;image-rendering:auto}
html[data-ui-theme="midnight"] .qs .q>small{display:block;padding-left:26px;font-size:12px;color:var(--k-ink3)}
html[data-ui-theme="midnight"] .qs .q .qhere{margin-left:auto;padding:0 6px;border-radius:0;background:rgba(91,211,138,.16);color:#8fe6b2;font:700 10.5px/16px Lora,serif;letter-spacing:.06em;text-transform:uppercase}
html[data-ui-theme="midnight"] .qs .q.active,html[data-ui-theme="midnight"] .qs .q.ready{margin:3px 4px;padding:8px 10px;border:0;background:#0d121c;box-shadow:inset 2px 0 0 var(--mn-acc),inset 0 0 0 1px var(--k-line)}
html[data-ui-theme="midnight"] .qs .q.ready{box-shadow:inset 2px 0 0 var(--k-good),inset 0 0 0 1px rgba(91,211,138,.25)}
html[data-ui-theme="midnight"] .qs .q.active>b,html[data-ui-theme="midnight"] .qs .q.ready>b{font:400 14px/1.25 var(--k-disp);letter-spacing:.02em}
html[data-ui-theme="midnight"] .qs .q.active>small,html[data-ui-theme="midnight"] .qs .q.ready>small{padding-left:0;color:var(--k-ink2)}
html[data-ui-theme="midnight"] .qs .q .xpb{height:4px;margin:5px 0 2px;background:#05070b;box-shadow:inset 0 0 0 1px #04060a}html[data-ui-theme="midnight"] .qs .q .xpb i{background:linear-gradient(90deg,#3e5f9e,#8fb4ff)}
html[data-ui-theme="midnight"] .wallet.wl-paper{border-radius:0;background:none;box-shadow:none;padding:0}
html[data-ui-theme="midnight"] .wallet.wl-paper .wl-h{padding:8px 6px 6px;font:400 13px var(--k-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink)}
html[data-ui-theme="midnight"] .wl-job{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:0 8px;padding:6px 6px 7px;border-bottom:1px solid var(--k-line);border-radius:0;background:none}
html[data-ui-theme="midnight"] .wl-job>img,html[data-ui-theme="midnight"] .wl-job>.ico{width:20px;height:20px;image-rendering:auto}
html[data-ui-theme="midnight"] .wl-job>span{display:grid;grid-template-columns:1fr auto;gap:3px 6px;align-items:center;min-width:0;font:600 13px Lora,serif}
html[data-ui-theme="midnight"] .wl-job>span>i{grid-column:1/2;display:block;height:4px;background:#05070b;box-shadow:inset 0 0 0 1px #04060a}html[data-ui-theme="midnight"] .wl-job>span>i u{display:block;height:100%;background:linear-gradient(90deg,#3e5f9e,#8fb4ff)}
html[data-ui-theme="midnight"] .wl-job>span>small{grid-column:2/3;grid-row:2;font-size:11px;color:var(--k-ink3)}
html[data-ui-theme="midnight"] .wl-job>b{display:inline-flex;align-items:center;padding:1px 9px;border-radius:99px;background:#0a0e15;box-shadow:inset 0 0 0 1px rgba(140,170,240,.24);font:700 11.5px Lora,serif;color:var(--k-gold);white-space:nowrap}
html[data-ui-theme="midnight"] .wl-job.done{box-shadow:inset 2px 0 0 var(--k-good)}html[data-ui-theme="midnight"] .wl-job.done>span>i u{background:#5bd38a}html[data-ui-theme="midnight"] .wl-job.done>b{color:#8fe6b2;box-shadow:inset 0 0 0 1px rgba(91,211,138,.4)}
html[data-ui-theme="midnight"] .wl-job.paid{opacity:.6}
/* THE DIARY, THE MAP UP FRONT ("The map up front"): the header is the area's own map (hero_<diary>.webp, from the world map) under a night
   fade, its name and levels over it, and the four medal tabs laid across its foot (lifted onto the picture), the picked tier lit in its medal's
   colour; the tasks follow. Every line here is in Midnight's ink: the dark text that was hard to read on the blue is gone. */
html[data-ui-theme="midnight"] .dh.art{position:relative;min-height:128px;align-items:flex-start;margin:2px 4px 0;padding:10px 10px 62px;background:linear-gradient(180deg,rgba(10,14,22,.15),rgba(10,14,22,.55) 45%,rgba(10,14,22,.95)),var(--dh-art) center/cover;box-shadow:inset 0 0 0 1px rgba(140,170,240,.24)}
html[data-ui-theme="midnight"] .dh.art b{font:400 18px/1.15 var(--k-disp);color:#f3f6fc;text-shadow:0 1px 0 #000,0 0 8px rgba(0,0,0,.8)}
html[data-ui-theme="midnight"] .dh.art small{color:#d5ddee;text-shadow:0 1px 2px #000}
html[data-ui-theme="midnight"] .dh.art .em{filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
html[data-ui-theme="midnight"] .dh.art+.dbar{position:relative;z-index:1;margin:-3px 4px 0;height:3px}
html[data-ui-theme="midnight"] .dh.art~.dtabs{position:relative;z-index:2;margin:-58px 8px 8px;background:none;box-shadow:none;gap:4px}
html[data-ui-theme="midnight"] .dh.art~.dtabs button{display:grid;justify-items:center;gap:0;padding:4px 2px 3px;background:rgba(7,10,16,.55);box-shadow:inset 0 0 0 1px rgba(140,170,240,.16);color:#d5ddee;text-shadow:0 1px 1px #000}
html[data-ui-theme="midnight"] .dh.art~.dtabs button .dmedal{width:22px;height:22px}
html[data-ui-theme="midnight"] .dh.art~.dtabs button small{color:#d5ddee;font-size:11px}
html[data-ui-theme="midnight"] .dh.art~.dtabs button.on{background:radial-gradient(60% 90% at 50% 100%,color-mix(in srgb,var(--m) 45%,transparent),transparent 72%),rgba(20,27,42,.85);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m) 70%,transparent),0 0 10px color-mix(in srgb,var(--m) 35%,transparent);color:#f3f6fc}
html[data-ui-theme="midnight"] .dpane .dt-t,html[data-ui-theme="midnight"] .dpane .dt-r,html[data-ui-theme="midnight"] .dpane .dr{color:var(--k-ink2)}html[data-ui-theme="midnight"] .dpane .dt-t{color:var(--k-ink)}
html[data-ui-theme="midnight"] .dpane .dr b{color:var(--mn-acc)}html[data-ui-theme="midnight"] .dpane .dr-l{color:var(--k-ink2)}
/* THE GEM BAG, SIDE BY SIDE ("Side by side"): the iron window; Combat and Skilling as two columns, each its own sunken panel with its four
   settings two by two; the sockets round and moonlit, a locked one a padlock with its price; everything under them across both columns */
html[data-ui-theme="midnight"] .gb{width:min(380px,calc(100% - 24px));padding:0 0 6px;border:12px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/iron_frame.png?v=1) 18 / 18px repeat;border-radius:0;background:linear-gradient(rgba(17,23,37,.96),rgba(17,23,37,.96)),url(/v3/assets/img/glad/flat/ui/mn/slate_d.png?v=1) 0 0/128px 128px;background-clip:padding-box;box-shadow:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6));color:var(--k-ink)}
html[data-ui-theme="midnight"] .gb-head{padding:4px 6px 8px;border-bottom:1px solid var(--k-line)}html[data-ui-theme="midnight"] .gb-head img{image-rendering:auto}
html[data-ui-theme="midnight"] .gb-head b{flex:none;border:8px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/plate.png?v=1) 8 fill / 8px repeat;padding:0 8px;font:400 13px/12px var(--k-disp);letter-spacing:.1em;text-transform:uppercase;color:#f3f6fc;text-shadow:0 1px 0 #000}
html[data-ui-theme="midnight"] .gb-x{margin-left:auto;width:26px;height:26px;border:1px solid #04060a;border-radius:2px;background:linear-gradient(#262f41,#151b28);color:var(--k-ink2);font-size:16px;box-shadow:inset 0 1px 0 rgba(200,215,240,.16)}
html[data-ui-theme="midnight"] .gb-body{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 4px 0}
html[data-ui-theme="midnight"] .gb-body>*:not(.gb-row){grid-column:1/-1}
html[data-ui-theme="midnight"] .gb-row{margin:0;padding:8px 8px 14px;background:#0d121c;box-shadow:inset 0 0 0 1px var(--k-line)}
html[data-ui-theme="midnight"] .gb-rowh b{font:400 12px var(--k-disp);letter-spacing:.12em;color:var(--mn-acc)}html[data-ui-theme="midnight"] .gb-rowh small{color:var(--k-ink3);opacity:1}
html[data-ui-theme="midnight"] .gb-sets{grid-template-columns:1fr 1fr;gap:14px 10px;justify-items:center;margin-top:10px}
html[data-ui-theme="midnight"] .gb-set{width:50px;background:radial-gradient(circle at 50% 40%,#1a2233,#05070b 70%);box-shadow:inset 0 0 0 2px #04060a,inset 0 0 0 3px rgba(140,170,240,.28),0 0 10px rgba(143,180,255,.18)}
html[data-ui-theme="midnight"] .gb-set img{image-rendering:auto;filter:drop-shadow(0 0 4px rgba(143,180,255,.35))}
html[data-ui-theme="midnight"] .gb-set.empty:hover,html[data-ui-theme="midnight"] .gb-set.on{box-shadow:inset 0 0 0 2px #04060a,inset 0 0 0 3px var(--mn-acc),0 0 14px rgba(143,180,255,.45)}
html[data-ui-theme="midnight"] .gb-set.lock{background:#0a0e15;box-shadow:inset 0 0 0 2px #04060a,inset 0 0 0 3px rgba(140,170,240,.1)}
html[data-ui-theme="midnight"] .gb-set.lock.next{box-shadow:inset 0 0 0 2px #04060a,inset 0 0 0 3px rgba(244,198,87,.35)}html[data-ui-theme="midnight"] .gb-set.lock.next:hover{box-shadow:inset 0 0 0 2px #04060a,inset 0 0 0 3px var(--k-gold),0 0 12px rgba(244,198,87,.35)}
html[data-ui-theme="midnight"] .gb-padlock,html[data-ui-theme="midnight"] .gb-padlock::before{background:#8391ad;border-color:#8391ad}html[data-ui-theme="midnight"] .gb-padlock::before{background:none}
html[data-ui-theme="midnight"] .gb-set.lock em{border-radius:2px;background:#151b28;color:var(--k-gold);box-shadow:inset 0 0 0 1px rgba(244,198,87,.35)}
html[data-ui-theme="midnight"] .gb-set b{border-radius:2px;background:#0b0f17;box-shadow:inset 0 0 0 1px var(--k-line)}
html[data-ui-theme="midnight"] .gb-pick,html[data-ui-theme="midnight"] .gb-ask,html[data-ui-theme="midnight"] .gb-work{margin:8px 0 0;padding:8px 10px;border-radius:0;background:#0a0e15;box-shadow:inset 0 0 0 1px var(--k-line)}
html[data-ui-theme="midnight"] .gb-work small{font:400 11px var(--k-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--mn-acc);opacity:1}html[data-ui-theme="midnight"] .gb-work img{image-rendering:auto}
html[data-ui-theme="midnight"] .gb-gem{border-radius:2px;background:url(/v3/assets/img/glad/flat/ui/mn/iron_d.png?v=1) 50% 50%/128px 128px;box-shadow:inset 0 0 0 1px #04060a,inset 0 1px 0 rgba(200,215,240,.14)}html[data-ui-theme="midnight"] .gb-gem:hover{box-shadow:inset 0 0 0 1px var(--mn-acc),0 0 8px rgba(143,180,255,.35)}
html[data-ui-theme="midnight"] .gb-btn{border:1px solid #04060a;border-radius:2px;background:linear-gradient(#262f41,#151b28);color:#e3edff;font:700 12.5px Lora,serif;box-shadow:inset 0 1px 0 rgba(200,215,240,.16),inset 0 -2px 0 var(--mn-acc)}
html[data-ui-theme="midnight"] .gb-link{color:var(--mn-acc)}html[data-ui-theme="midnight"] .gb-note{color:#ff9a9e}
/* YOUR VIP, IN YOUR CARD ("In your card"): the tier's gem beside your name, a hairline bar under your health; the wallet's VIP fold goes */
html[data-ui-theme="midnight"] .stats .yc-top{justify-content:flex-start;gap:6px}
html[data-ui-theme="midnight"] .stats .yc-vip{flex:none;width:9px;height:9px;transform:rotate(45deg);background:var(--v);box-shadow:0 0 6px var(--v),inset 0 0 0 1px rgba(0,0,0,.35)}
html[data-ui-theme="midnight"] .stats .yc-vipbar{display:block;height:3px;margin-top:3px;background:#05070b;box-shadow:inset 0 0 0 1px #04060a}html[data-ui-theme="midnight"] .stats .yc-vipbar u{display:block;height:100%}
html[data-ui-theme="midnight"] .wallets .wl-fold{display:none}
/* THE TOOLTIP (tipShow): night glass with a moonlit edge and a pointer at what it is about */
#mnTip{position:fixed;z-index:200;max-width:260px;padding:6px 10px 7px;pointer-events:none;background:rgba(9,13,21,.92);border:1px solid rgba(143,180,255,.38);border-radius:2px;box-shadow:0 0 14px rgba(143,180,255,.16),0 8px 18px rgba(0,0,0,.55);font:600 13px/1.35 Lora,serif;color:#f3f6fc}
#mnTip[hidden]{display:none}
#mnTip span{display:block;margin-top:1px;font:italic 400 12px/1.35 Lora,serif;color:#b4c0d8}
#mnTip i{position:absolute;top:-5px;width:8px;height:8px;background:rgb(9,13,21);border-left:1px solid rgba(143,180,255,.38);border-top:1px solid rgba(143,180,255,.38);transform:rotate(45deg)}
#mnTip.up i{top:auto;bottom:-5px;transform:rotate(225deg)}
/* THE INVENTORY, the same picks: iron item slots (round one's "Iron") and the wallet as coin chips under the bag; the you card stays on top */
html[data-ui-theme="midnight"] .wl-strip{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px 4px 2px;background:none;box-shadow:none}
html[data-ui-theme="midnight"] .wl-s{flex:0 0 auto;gap:5px;padding:3px 10px 3px 4px;border-radius:99px;background:#0a0e15;box-shadow:inset 0 0 0 1px rgba(140,170,240,.24)}
html[data-ui-theme="midnight"] .wl-s::after{content:none}
html[data-ui-theme="midnight"] .wl-s img{width:20px;height:20px}html[data-ui-theme="midnight"] .wl-s b{font-size:13px}
html[data-ui-theme="midnight"] .top .online{color:var(--k-ink2)}html[data-ui-theme="midnight"] .top .online:hover{color:#f3f6fc;background:rgba(140,170,240,.08)}
html[data-ui-theme="midnight"] .xph-b b{color:#f3f6fc}
/* (2026-10-15, v1.6, round eight "Socket with the level line") the XP/h tracker set into the bar like the links: an iron socket, the skill in a small
   socket of its own, the rate short (12.4k XP/h), and a thin moonlit line along its foot for how far through the level you are (#xphLv, renderXph) */
html[data-ui-theme="midnight"] .xph-b{position:relative;height:32px;gap:7px;padding:0 10px 3px 4px;border-radius:0;background:linear-gradient(#1c2333,#10151f);box-shadow:0 0 0 1px #04060a,inset 0 1px 0 rgba(200,215,240,.16),inset 0 -1px 0 rgba(0,0,0,.5);font:700 13px/1 Lora,serif;font-variant-numeric:tabular-nums}
html[data-ui-theme="midnight"] .xph-b:hover,html[data-ui-theme="midnight"] .xph-b[aria-expanded="true"]{background:linear-gradient(#232b3e,#141a26)}
html[data-ui-theme="midnight"] .xph-b i{width:24px;height:24px;background:#0a0e15;box-shadow:inset 0 0 0 1px rgba(140,170,240,.2)}
html[data-ui-theme="midnight"] .xph-b b{order:1}
html[data-ui-theme="midnight"] .xph-b small{order:2;font:600 11px/1 Lora,serif;letter-spacing:0;text-transform:none;color:#8391ad}
html[data-ui-theme="midnight"] .xph-b .xph-lv{display:block;position:absolute;left:4px;right:4px;bottom:3px;height:3px;background:#05070b;box-shadow:inset 0 0 0 1px rgba(140,170,240,.14)}
html[data-ui-theme="midnight"] .top.top-tight #mapTop span,html[data-ui-theme="midnight"] .top.top-tight .xph-b small{display:none}
html[data-ui-theme="midnight"] .xph .xph-pop{padding:8px 12px 10px}   /* (2026-10-15, the owner: "no padding in its dropdown text") the iron frame's edge sits over the border, so the text needs its own room */
html[data-ui-theme="midnight"] .xph-b .xph-lv>span{display:block;height:100%;background:linear-gradient(90deg,#5a7cc8,#a9c4ff)}
html[data-ui-theme="midnight"] .tourbox small{color:var(--mn-acc)}html[data-ui-theme="midnight"] .tourbox .bar{border-radius:0;background:#05070b}html[data-ui-theme="midnight"] .tourbox .bar i{background:linear-gradient(90deg,#3e5f9e,#8fb4ff)}
html[data-ui-theme="midnight"] .tourbox.qtrk:hover{box-shadow:0 0 0 1px var(--mn-acc)}
html[data-ui-theme="midnight"] .chat-new{border:1px solid #04060a;border-radius:2px;background:linear-gradient(#262f41,#151b28);color:#e3edff;text-shadow:0 -1px 0 #000;box-shadow:inset 0 1px 0 rgba(200,215,240,.2),inset 0 -2px 0 var(--mn-acc),0 3px 8px rgba(0,0,0,.5)}
/* THE WIKI HOME'S "LATEST" AND "ROAD AHEAD" CARDS borrowed the Long Night's purple-and-ember card; they are plain links, so they are night cards
   lit from the left with a moon title. The Long Night's own card keeps the season's colours. */
html[data-ui-theme="midnight"] .whw.wkhome{border:1px solid var(--k-card-line);border-radius:0;background:radial-gradient(40% 140% at 0% 50%,rgba(143,180,255,.14),transparent 70%),linear-gradient(#141b2a,#0f1420);box-shadow:inset 2px 0 0 var(--mn-acc),0 3px 8px rgba(0,0,0,.4);color:var(--k-ink)}
html[data-ui-theme="midnight"] .whw.wkhome:hover{box-shadow:inset 2px 0 0 var(--mn-acc),0 0 12px rgba(143,180,255,.2)}
html[data-ui-theme="midnight"] .whw.wkhome b{color:#f3f6fc;font:400 15px/1.2 var(--k-disp);letter-spacing:.03em}html[data-ui-theme="midnight"] .whw.wkhome small{color:var(--k-ink2)}
html[data-ui-theme="midnight"] .whw:not(.wkhome){border-radius:0}
/* NPC OPTIONS: hairline rows (round four's NPC panel); the kit's inset ring and white top highlight still sat on them */
html[data-ui-theme="midnight"] .dlg-opts button{box-shadow:none}
html[data-ui-theme="midnight"] .dlg-opts button span{border-radius:2px}
/* THE NAME MENU AND THE XP/h CARD drop from the bar as iron cards holding the right-click menu's plain list (round four's pick), not the
   Tavern's gold-ringed dropdown */
html[data-ui-theme="midnight"] :is(.memenu,.xph-pop){padding:2px 0;border:12px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/mn/iron_frame.png?v=1) 18 / 18px repeat;border-radius:0;background:linear-gradient(rgba(17,23,37,.96),rgba(17,23,37,.96)),url(/v3/assets/img/glad/flat/ui/mn/slate_d.png?v=1) 0 0/128px 128px;background-clip:padding-box;box-shadow:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6));gap:0}
html[data-ui-theme="midnight"] .memenu button{border-radius:0;border-bottom:1px solid var(--k-line);padding:8px 12px;font:600 14px/1.2 Lora,serif;color:var(--k-ink)}
html[data-ui-theme="midnight"] .memenu button:last-child{border-bottom:0}
html[data-ui-theme="midnight"] .memenu button:hover,html[data-ui-theme="midnight"] .memenu button:focus-visible{background:radial-gradient(40% 120% at 0% 50%,rgba(143,180,255,.2),transparent 70%);box-shadow:inset 2px 0 0 var(--mn-acc);color:#f3f6fc}
html[data-ui-theme="midnight"] .memenu kbd,html[data-ui-theme="midnight"] .top kbd{border-radius:2px;background:linear-gradient(#262f41,#151b28);box-shadow:inset 0 1px 0 rgba(200,215,240,.16),0 1px 0 #04060a;color:var(--k-ink2)}
/* WHO ARE YOU? (the look window): you stand in the Character window's moonlit alcove, not on the Tavern's parchment slot; a picked swatch is ringed
   in moonlight, not gold (the swatches themselves are colours, and keep theirs) */
html[data-ui-theme="midnight"] .lk-prev canvas{border:0;border-image:none;border-radius:0;background:radial-gradient(ellipse 70% 40% at 50% 92%,rgba(143,180,255,.22),transparent 70%),radial-gradient(ellipse 80% 60% at 50% 30%,rgba(143,180,255,.08),transparent 70%),linear-gradient(#0d121c,#070a10);box-shadow:inset 0 0 0 1px rgba(140,170,240,.16),inset 0 0 0 2px #04060a,inset 0 10px 20px rgba(0,0,0,.55)}
html[data-ui-theme="midnight"] #vanWin .van-prev{padding:4px 6px 2px;background:radial-gradient(ellipse 70% 34% at 50% 82%,rgba(143,180,255,.2),transparent 70%),linear-gradient(#0d121c,#070a10);box-shadow:inset 0 0 0 1px rgba(140,170,240,.16),inset 0 0 0 2px #04060a,inset 0 10px 20px rgba(0,0,0,.55)}
html[data-ui-theme="midnight"] .lk-sw button{border-radius:2px;border-color:#04060a;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35)}
html[data-ui-theme="midnight"] .lk-sw button[aria-pressed=true]{outline:2px solid var(--mn-acc);outline-offset:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 8px rgba(143,180,255,.45)}
/* VANITY ROWS: the picked one lit like a picked row, not a cream card with an outset rim */
html[data-ui-theme="midnight"] .van-row{border:0;border-radius:0;background:none;box-shadow:inset 0 -1px 0 var(--k-line)}
html[data-ui-theme="midnight"] .van-row.on{background:var(--mn-glow);box-shadow:inset 2px 0 0 var(--mn-acc),inset 0 -1px 0 var(--k-line)}
html[data-ui-theme="midnight"] .van-row.trying{box-shadow:inset 0 0 0 1px var(--mn-acc)}
/* MIDNIGHT ROUND TEN (2026-10-15), THE TOP BAR: the owner's pick "Menus and a status line" (tools/midnight/round10/parts/topbar.js, k "menus"), without
   its live-events strip ("lets remove the Live Now - Rotten King etc"). The pick's sizes at 1,600px: a 24px status line in night ink over a 46px
   row on the iron rail (76 in all; the page under it follows --top-h), the plate at the left of the row, then World / Records / Help with their
   carets, the Store, and at the right the bell and you. The menus and the bell's list drop from the bar's foot as iron cards (border 10px, the
   frame drawn 16px) holding hairline rows. Gold is the tickets only; the lamp is green; what is open or new is moonlight. These come after the
   older top-bar rules on purpose (the sockets, the centred plate, the XP/h socket): same selectors, later, so they win. Phones: the same parts,
   smaller (the base rules in eastscape.html). */
@media (min-width:821px){
  html[data-ui-theme="midnight"]{--top-h:52px}
  html[data-ui-theme="midnight"] .wrap{height:calc(100vh - var(--top-h));height:calc(100dvh - var(--top-h))}
  html[data-ui-theme="midnight"] .top{height:52px;padding:0 0 6px;gap:0}
  html[data-ui-theme="midnight"] .top .tst{height:24px;gap:12px;padding:0 16px}
  html[data-ui-theme="midnight"] .top .tmain{gap:4px;padding:0 14px}
  html[data-ui-theme="midnight"] .top .logo,html[data-ui-theme="midnight"] .top.logo-flow .logo{position:relative;left:auto;top:auto;transform:none;flex:none;margin:0 12px 0 0}
}
html[data-ui-theme="midnight"] .top{background:url(/v3/assets/img/glad/flat/ui/mn/rail.png?v=1) 0 100%/56px 14px repeat-x,linear-gradient(#131a29,#0b0f17);box-shadow:inset 0 1px 0 rgba(200,215,240,.08);border-bottom:0}
html[data-ui-theme="midnight"] .top .tst{background:#070a10;box-shadow:inset 0 -1px 0 var(--k-line);font:400 12px/1 Lora,serif;color:var(--k-ink3)}
html[data-ui-theme="midnight"] .top .tst b{color:var(--k-ink);font-weight:700}
html[data-ui-theme="midnight"] .top .tst-sep{height:12px;background:var(--k-line)}
html[data-ui-theme="midnight"] .top .tmain .net{gap:6px;color:var(--k-ink2);font-size:12px}html[data-ui-theme="midnight"] .top .tmain .net i{width:8px;height:8px;margin:0}
html[data-ui-theme="midnight"] .net.ok i{background:var(--k-good);box-shadow:0 0 6px rgba(91,211,138,.7)}
html[data-ui-theme="midnight"] .top .tst .online{position:static;gap:5px;height:20px;padding:0 2px;border-radius:0;background:none;color:var(--k-ink3);font:400 12px/1 Lora,serif}
html[data-ui-theme="midnight"] .top .tst .online .topi{width:16px;height:16px}
html[data-ui-theme="midnight"] .top .tst .online b{position:static;min-width:0;height:auto;padding:0;border-radius:0;background:none;box-shadow:none;font:700 12px/1 Lora,serif;color:var(--k-ink)}
html[data-ui-theme="midnight"] .top .tst .online:hover{background:none;color:var(--k-ink2)}html[data-ui-theme="midnight"] .top .tst .online:hover .topi{filter:drop-shadow(0 0 5px rgba(143,180,255,.55))}
html[data-ui-theme="midnight"] .top .xph-b{height:20px;gap:6px;padding:0 4px;border-radius:0;background:none;box-shadow:none;font:400 12px/1 Lora,serif;color:var(--k-ink2)}
html[data-ui-theme="midnight"] .top .xph-b:hover,html[data-ui-theme="midnight"] .top .xph-b[aria-expanded="true"]{background:none;color:#f3f6fc}
html[data-ui-theme="midnight"] .top .xph-b i{width:16px;height:16px;background:none;box-shadow:none}html[data-ui-theme="midnight"] .top .xph-b i :is(.ico,img){width:16px;height:16px}
html[data-ui-theme="midnight"] .top .xph-b b{order:0;color:var(--k-ink);font-variant-numeric:normal}html[data-ui-theme="midnight"] .top .xph-b small{order:0;font:inherit;color:inherit}
html[data-ui-theme="midnight"] .top .xph-b .xph-lv{display:none}html[data-ui-theme="midnight"] .top.top-tight .xph-b small{display:inline}   /* .top-tight is the row's, not the status line's */
html[data-ui-theme="midnight"] .top .tst-tix{gap:6px;color:var(--k-gold);font:700 12.5px/1 Lora,serif}html[data-ui-theme="midnight"] .top .tst-tix img{width:16px;height:16px}
html[data-ui-theme="midnight"] .top .tmain .tm{gap:7px;height:38px;padding:0 12px 0 6px;border-radius:0;background:none;font:600 14.5px/1 Lora,serif;color:var(--k-ink)}
html[data-ui-theme="midnight"] .top .tmain .tm .topi{width:26px;height:26px;padding:0;background:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
html[data-ui-theme="midnight"] .top .tmain .tm .me-car,html[data-ui-theme="midnight"] .top .me .me-car{margin-left:2px;font-size:13px;color:var(--k-ink3);opacity:1}
html[data-ui-theme="midnight"] .top .tmain .tm:hover{color:#f3f6fc;background:radial-gradient(60% 90% at 50% 100%,rgba(143,180,255,.16),transparent 72%)}
html[data-ui-theme="midnight"] .top .tmain .tm:hover .topi{filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(143,180,255,.45))}
html[data-ui-theme="midnight"] .top .tmain .tm[aria-expanded="true"]{color:#f3f6fc;background:radial-gradient(60% 90% at 50% 100%,rgba(143,180,255,.3),transparent 72%);box-shadow:inset 0 -2px 0 var(--mn-acc)}
html[data-ui-theme="midnight"] .top .tbell{width:40px;height:40px;border-radius:0}html[data-ui-theme="midnight"] .top .tbell img{width:26px;height:26px}
html[data-ui-theme="midnight"] .top .tbell:hover,html[data-ui-theme="midnight"] .top .tbell[aria-expanded="true"]{background:none}html[data-ui-theme="midnight"] .top .tbell:is(:hover,[aria-expanded="true"]) img{filter:drop-shadow(0 0 6px rgba(143,180,255,.55))}
html[data-ui-theme="midnight"] .top .tbell b{right:-3px;top:-1px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:linear-gradient(#a9c6ff,#6f97e8);box-shadow:0 0 0 2px #0b0f17;font:700 11px/18px Lora,serif;color:#0b1222}
html[data-ui-theme="midnight"] .top .tmain .me{height:38px;margin-left:8px;padding:0 4px 0 12px;gap:8px;border-radius:0;box-shadow:-1px 0 0 var(--k-line);font:600 14px/1 Lora,serif}
/* the drops */
html[data-ui-theme="midnight"] :is(.tmenu,#meMenu,.note-pop){padding:0;border-width:10px;border-image-width:16px;min-width:0}
html[data-ui-theme="midnight"] .tmenu{width:380px}html[data-ui-theme="midnight"] :is(#recMenu,#helpMenu){width:300px}html[data-ui-theme="midnight"] #meMenu{width:auto;min-width:250px;max-width:340px}
html[data-ui-theme="midnight"] .note-pop{width:min(440px,calc(100vw - 12px))}
html[data-ui-theme="midnight"] :is(.tmenu,#meMenu) button{gap:11px;min-height:42px;padding:8px 14px;font:600 14px/1.25 Lora,serif}
html[data-ui-theme="midnight"] :is(.tmenu,#meMenu) button img{width:22px;height:22px;image-rendering:auto}html[data-ui-theme="midnight"] .memenu .mm-bug{width:16px;height:16px;margin:0 3px;image-rendering:pixelated}
html[data-ui-theme="midnight"] .memenu button small{font:400 12px/1.3 Lora,serif;color:var(--k-ink3)}
html[data-ui-theme="midnight"] .memenu kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;box-sizing:border-box;padding:0 5px;margin-left:auto;font:700 11px/1 Lora,serif;color:var(--k-ink2);background:#0a0e15;border-radius:0;box-shadow:inset 0 0 0 1px var(--k-card-line),inset 0 -2px 0 rgba(0,0,0,.6)}
html[data-ui-theme="midnight"] .mm-sect{padding:9px 14px 5px;font:400 11px var(--k-disp);letter-spacing:.16em;color:var(--k-ink3)}
html[data-ui-theme="midnight"] .mm-lamp{min-height:42px;padding:8px 14px;box-sizing:border-box}html[data-ui-theme="midnight"] .mm-lamp .net{font:600 14px/1.2 Lora,serif;color:var(--k-ink2);white-space:nowrap}
/* the bell's list: a head with the count and Mark all read, one line a note, the message log at the foot */
html[data-ui-theme="midnight"] .nt-h{padding:10px 14px;border-bottom:1px solid var(--k-line);background:rgba(8,11,18,.5)}html[data-ui-theme="midnight"] .nt-h b{font:400 16px/1 var(--k-disp);letter-spacing:.06em;color:#f3f6fc}
html[data-ui-theme="midnight"] .nt-new{padding:2px 8px;border-radius:0;background:#0a0e15;box-shadow:inset 0 0 0 1px var(--k-card-line);font:700 11.5px Lora,serif;color:var(--k-ink2)}
html[data-ui-theme="midnight"] .note-pop .lnk{color:var(--mn-acc);font:600 12.5px Lora,serif;text-decoration:none}html[data-ui-theme="midnight"] .note-pop .lnk:hover{color:#f3f6fc;text-decoration:none}
html[data-ui-theme="midnight"] .note-pop .nt-r{height:34px;min-height:0;padding:0 12px;gap:9px;border-bottom:1px solid var(--k-line);font:400 13px/1 Lora,serif;color:var(--k-ink2)}
html[data-ui-theme="midnight"] .note-pop .nt-r:last-child{border-bottom:0}
html[data-ui-theme="midnight"] .note-pop .nt-r:not(.go):hover{background:none;box-shadow:none;color:var(--k-ink2)}
html[data-ui-theme="midnight"] .note-pop .nt-r.nw,html[data-ui-theme="midnight"] .note-pop .nt-r.nw:hover{box-shadow:inset 3px 0 0 var(--mn-acc)}
html[data-ui-theme="midnight"] .nt-r b{font-weight:600;color:#f3f6fc}html[data-ui-theme="midnight"] .nt-s,html[data-ui-theme="midnight"] .nt-ago{color:var(--k-ink3)}
html[data-ui-theme="midnight"] .nt-r.nw .nt-ago{color:var(--mn-acc);font-weight:700}
html[data-ui-theme="midnight"] .nt-r:is(.c-tix,.c-gold) b{color:var(--k-gold)}html[data-ui-theme="midnight"] .nt-r.c-rare b{color:#d4bcff}
html[data-ui-theme="midnight"] .nt-empty{padding:16px 14px;color:var(--k-ink3)}
html[data-ui-theme="midnight"] .nt-f{padding:10px 14px;border-top:1px solid var(--k-line);background:rgba(8,11,18,.5)}
/* a phone: the same parts, smaller; after the rules above so it wins */
@media (max-width:820px){
  html[data-ui-theme="midnight"]{--top-h:42px}
  html[data-ui-theme="midnight"] .top .tmain .tm .topi,html[data-ui-theme="midnight"] .top .tbell img{width:22px;height:22px}
  html[data-ui-theme="midnight"] .top .tmain .tm{height:34px;padding:0 5px;gap:5px}
  html[data-ui-theme="midnight"] .top .tbell{width:34px;height:34px}
  html[data-ui-theme="midnight"] .top .tmain .me{height:34px;margin-left:2px;padding:0 2px 0 8px;gap:6px}
  html[data-ui-theme="midnight"] .top .logo img{width:18px;height:18px}html[data-ui-theme="midnight"] .top .logo{margin-right:4px}
}
@media (max-width:560px){html[data-ui-theme="midnight"] .top .me .me-car{display:none}html[data-ui-theme="midnight"] .top .tmain .tm{padding:0 4px}}
/* ================================================================ THE WIKI'S ITEM AND MONSTER PAGES (2026-10-17, v1.6, Midnight Round Thirteen: the owner's picks
   "Infobox" and "Journal"; eastscape.html wikiItemPage / wikiMobPage). Everything is .wk13 and reads the kit's tokens, so the Tavern draws it in its own
   ink; the contested pieces (the page's h2/h3, its tables, its small icons) are scoped under #wikiPage to win over the wiki's older rules. Type is
   TYPE.md's: titles 20, headings 15, labels 12 caps, body 15, small 13; icons 64 / 32 / 20. */
.wk13{container-type:inline-size;font:400 15px/1.4 Lora,Georgia,serif;color:var(--k-ink)}
.wk13 small{font-size:13px}
.wk13 .wk-ic{display:inline-flex;flex:none;align-items:center;justify-content:center;vertical-align:middle}
.wk13 .wk-ic img,.wk13 .wk-ic .glow{margin:0;max-width:none;max-height:none;image-rendering:pixelated}
.wk13 .wk-ic img.hd{image-rendering:auto}
.wk13 .wk-ic.s20,.wk13 .wk-ic.s20 img,.wk13 .wk-ic.s20 .glow{width:20px;height:20px}.wk13 .wk-ic.s20 img{image-rendering:auto}
.wk13 .wk-ic.s32,.wk13 .wk-ic.s32 img,.wk13 .wk-ic.s32 .glow{width:32px;height:32px}
.wk13 .wk-ic.s64,.wk13 .wk-ic.s64 img,.wk13 .wk-ic.s64 .glow{width:64px;height:64px}
.wk13 .wk-ic .glow{display:inline-flex}.wk13 .wk-ic .glow img{width:100%;height:100%}
.wk13 .wk-u{flex:none;vertical-align:middle;image-rendering:auto}
#wikiPage .wk13 .wico{width:20px;height:20px;margin:0;vertical-align:middle}
#wikiPage .wk13 .wk-sm .wico{margin-right:6px}
#wikiPage .wk13 .mico{width:20px;height:20px;object-fit:contain;image-rendering:auto;margin-right:8px;vertical-align:middle}
.wk13 .wk-spr{display:block;width:auto;image-rendering:pixelated}.wk13 .wk-spr.soft{image-rendering:auto}
.wk13 .tixi{width:20px;height:20px;margin:0;vertical-align:middle;image-rendering:auto}
.wk13 .wk-tix{display:inline-flex;align-items:center;gap:4px;color:var(--k-gold);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.wk13 .wk-lab{display:block;font:400 12px var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink3)}
.wk13 .wk-in{font-size:13px;color:var(--k-ink3);margin-left:4px}
.wk13 .wk-in1{display:inline-flex;align-items:center;gap:4px;margin-right:8px;white-space:nowrap}
.wk13 .wk-q{color:var(--k-ink2)}
.wk13 .wk-lv{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-weight:600}
.wk13 .wk-rt{margin-left:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wk13 .wk-ars{display:inline-flex;gap:2px;margin:0 2px 0 6px;vertical-align:middle}
#wikiPage .wk13 .wk-ars a{display:inline-flex;text-decoration:none}
.wk13 .wk-gs{font:400 20px/1 var(--k-disp);color:var(--k-ink)}
.wk13 .wk-s3{display:flex;flex-wrap:wrap;gap:4px 10px}.wk13 .wk-s3 span{font-size:13px;color:var(--k-ink3)}.wk13 .wk-s3 b{font-size:15px;color:var(--k-ink)}
.wk13 .wk-r1{color:#3f7fe0}.wk13 .wk-r2{color:#e0a820}.wk13 .wk-r3{color:#e8433f}
html[data-ui-theme="midnight"] .wk13 .wk-r1{color:#7fa8ff}
/* the title and the headings (over the wiki's own h2 and h3) */
#wikiPage .wk13 .wk-head{margin:0}
#wikiPage .wk13 .wk-head h2.wk-t1{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0;font:400 20px/1.2 var(--k-disp);letter-spacing:.04em;color:var(--k-ink);text-shadow:none}
#wikiPage .wk13 .wk-head h2.wk-t1 .wfind{margin-left:auto}
#wikiPage .wk13 h3.wk-h{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px;font:400 15px/1.3 var(--k-disp);letter-spacing:.06em;color:var(--k-ink)}
#wikiPage .wk13 h3.wk-h small{font:400 13px Lora,Georgia,serif;letter-spacing:0;color:var(--k-ink3)}
#wikiPage .wk13 h3.wk-h::after{content:"";flex:1;align-self:center;height:1px;background:var(--k-line)}
.wk13 .wk-lede{margin:6px 0 4px;color:var(--k-ink2)}.wk13 .wk-lede b{color:var(--k-ink)}
.wk13 p{margin:0 0 6px}.wk13 .wk-sm{margin:6px 0 0;font-size:13px;color:var(--k-ink2)}
.wk13 .wk-sm .wk-u{margin-right:6px}
.wk13 .wk-ul{margin:0 0 4px;padding-left:20px}.wk13 .wk-ul li{margin:2px 0}
/* the tables */
.wk13 .wk-tw{display:flow-root;min-width:0}
#wikiPage .wk13 a{font-weight:600}
#wikiPage .wk13 .wk-tb{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 2px}
#wikiPage .wk13 .wk-tb th{text-align:left;padding:5px 8px;font:400 12px var(--k-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ink3);border-bottom:1px solid var(--k-card-line);white-space:nowrap}
#wikiPage .wk13 .wk-tb td{padding:4px 8px;height:34px;border-bottom:1px solid var(--k-line);vertical-align:middle;font-variant-numeric:tabular-nums}
#wikiPage .wk13 .wk-tb tr:nth-child(even) td{background:rgba(140,170,240,.035)}
#wikiPage .wk13 .wk-tb td .wk-ic,#wikiPage .wk13 .wk-tb td .wk-u{margin-right:8px}
#wikiPage .wk13 .wk-tb td .wk-lv .wk-ic,#wikiPage .wk13 .wk-tb td .wk-lv .wk-u,#wikiPage .wk13 .wk-tb td .wk-in1 .wk-ic{margin-right:0}
#wikiPage .wk13 .wk-tb a{text-decoration:none}#wikiPage .wk13 .wk-tb a:hover{text-decoration:underline}
#wikiPage .wk13 .wk-tb td{white-space:normal}#wikiPage .wk13 .wk-tb td:first-child a{white-space:nowrap}
#wikiPage .wk13 .wk-src td:last-child,#wikiPage .wk13 .wk-tb td .wk-rt{white-space:nowrap}#wikiPage .wk13 .wk-src td:last-child .wk-rt{margin-left:8px}
#wikiPage .wk13 .wki-top .wk-src td:last-child,#wikiPage .wk13 .wki-top .wk-src td:last-child .wk-rt{white-space:normal}
#wikiPage .wk13 .wk-tb tr.chase td:first-child a{color:var(--k-gold)}
#wikiPage .wk13 .wk-tb td small{color:var(--k-ink3)}
.wk13 .wk-pips{display:inline-flex;gap:2px;vertical-align:middle}
.wk13 .wk-pips i{width:5px;height:14px;background:rgba(140,170,240,.18)}
.wk13 .wk-pips.r0 i{background:var(--k-good);opacity:.7}.wk13 .wk-pips.r1 i.on{background:var(--k-ink2)}.wk13 .wk-pips.r2 i.on{background:#c9b2f5}.wk13 .wk-pips.r3 i.on{background:var(--k-rare)}.wk13 .wk-pips.r4 i.on{background:#cf9bff;box-shadow:0 0 6px rgba(176,124,255,.8)}
/* strips and effect cards */
.wk13 .wk-strip{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:8px 12px;background:var(--k-card);box-shadow:inset 3px 0 0 var(--mn-acc,var(--k-gold)),inset 0 0 0 1px var(--k-card-line)}
.wk13 .wk-strip>div>b{display:block}.wk13 .wk-strip>div>span{display:block;font-size:13px;color:var(--k-ink2)}
.wk13 .wk-strip.nf,.wk13 .wk-strip.chase{background:rgba(244,198,87,.07);box-shadow:inset 3px 0 0 var(--k-gold),inset 0 0 0 1px rgba(244,198,87,.3)}
.wk13 .wk-strip.ev{box-shadow:inset 3px 0 0 #e8803a,inset 0 0 0 1px rgba(232,128,58,.35)}
.wk13 .wk-strip.pet{background:rgba(176,124,255,.08);box-shadow:inset 3px 0 0 var(--k-rare),inset 0 0 0 1px rgba(176,124,255,.3);padding:6px 12px 6px 6px}
.wk13 .wk-fxs{display:flex;flex-direction:column;gap:4px}
.wk13 .wk-fx{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wk13 .wk-fx>div>b{display:block;color:var(--k-good)}.wk13 .wk-fx>div>span{display:block;font-size:13px;color:var(--k-ink2)}
.wk13 .wk-rf{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px}
.wk13 .wk-rf div{padding:6px 10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wk13 .wk-rf div.seal{box-shadow:inset 0 0 0 1px rgba(244,198,87,.45)}
.wk13 .wk-rf b{font:400 20px var(--k-disp);color:var(--k-ink);margin-right:8px}.wk13 .wk-rf span{color:var(--k-good)}
.wk13 .wk-rf small{display:block;color:var(--k-ink3);line-height:1.3}
/* a slot: 80 for 64 art, 44 for 32 */
.wk13 .wk-slot{position:relative;display:inline-grid;place-items:center;flex:none;width:80px;height:80px;background:linear-gradient(var(--k-paper-hi),var(--k-paper));box-shadow:inset 0 0 0 1px var(--k-card-line),inset 0 1px 0 rgba(200,215,240,.1)}
.wk13 .wk-slot.sm{width:44px;height:44px}
.wk13 .wk-slot.sm img.ico{width:32px;height:32px;margin:0;image-rendering:pixelated}.wk13 .wk-slot.sm img.ico.hd{image-rendering:auto}
.wk13 .wk-slot.sil img{filter:brightness(0) drop-shadow(0 0 1px rgba(143,180,255,.55));opacity:.9}
/* THE ITEM PAGE: the page and its infobox */
/* the box on the right of the page's top; what does not fit beside it runs the whole width underneath (wikiItemPage decides from the rows) */
.wk13 .wki{display:grid;grid-template-columns:minmax(0,1fr) 264px;column-gap:18px;align-items:start}
.wk13 .wki-top{grid-column:1;grid-row:1;min-width:0}
.wk13 .wki-rest{grid-column:1/-1;grid-row:2;min-width:0;padding-top:4px}
.wk13 .wk-ib{grid-column:2;grid-row:1;margin:0 0 10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wk13 .wk-ib-n{padding:8px 12px;font:400 15px var(--k-disp);letter-spacing:.06em;text-align:center;color:var(--k-ink);background:linear-gradient(var(--k-paper-hi),var(--k-paper));border-bottom:1px solid var(--k-card-line)}
.wk13 .wk-ib-pic{display:grid;place-items:center;padding:14px;background:radial-gradient(60% 70% at 50% 55%,rgba(143,180,255,.16),transparent 70%)}
.wk13 .wk-ib.gold .wk-ib-pic{background:radial-gradient(60% 70% at 50% 55%,rgba(244,198,87,.16),transparent 70%)}
.wk13 .wk-ib.gold .wk-ib-n{color:var(--k-gold)}
.wk13 .wk-ib table{width:100%;border-collapse:collapse}
.wk13 .wk-ib th{width:38%;padding:6px 8px 6px 10px;text-align:left;vertical-align:top;font:400 12px/20px var(--k-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ink3);border-top:1px solid var(--k-line)}
.wk13 .wk-ib td{padding:6px 10px 6px 0;border-top:1px solid var(--k-line);font-size:15px;overflow-wrap:anywhere}
.wk13 .wk-ib td small{display:block;color:var(--k-ink3);line-height:1.35}
.wk13 .wk-ib td i{display:block;font-size:13px;line-height:1.35;color:var(--k-ink2)}
@container (max-width:560px){.wk13 .wki{grid-template-columns:1fr}.wk13 .wk-ib{grid-column:1;grid-row:1}.wk13 .wki-top{grid-row:2}.wk13 .wki-rest{grid-row:3}}
/* THE MONSTER PAGE: the banner, the tabs, the panes */
.wk13 .wkj-hero{position:relative;display:flex;align-items:flex-end;gap:20px;min-height:150px;padding:14px 20px;overflow:hidden;background:#0b0f17;box-shadow:inset 0 0 0 1px rgba(140,170,240,.18)}
.wk13 .wkj-hero::before{content:"";position:absolute;inset:0;background:var(--wkj-bg,none) 50% 45%/cover no-repeat;image-rendering:auto;opacity:.55;filter:saturate(.8) blur(2px);transform:scale(1.04)}
.wk13 .wkj-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,14,.3),rgba(7,9,14,.82) 40%,rgba(7,9,14,.92)),linear-gradient(transparent 50%,rgba(7,9,14,.85))}
.wk13 .wkj-hero>*{position:relative;z-index:1}
.wk13 .wkj-spr{display:flex;align-items:flex-end;justify-content:center;flex:none;min-width:96px;max-width:200px;margin-bottom:-6px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7))}
.wk13 .wkj-ht{flex:1;min-width:0}
.wk13 .wkj-ht .wk-lab{color:#a7b4cc}
#wikiPage .wk13 .wkj-ht h2.wk-t1{color:#f3f6fc;text-shadow:0 1px 0 #000}
.wk13 .wkj-ht p{margin:4px 0 8px;color:#c4cee0;max-width:620px}
.wk13 .wkj-chips{display:flex;flex-wrap:wrap;gap:6px}
.wk13 .wkj-chips span{padding:3px 9px;font:600 13px Lora,Georgia,serif;color:#e9eef8;background:rgba(10,14,21,.75);box-shadow:inset 0 0 0 1px rgba(140,170,240,.3)}
.wk13 .wkj-tabs{display:flex;gap:2px;margin:0 0 4px;border-bottom:1px solid var(--k-line)}
.wk13 .wkj-tab{padding:9px 14px;border:0;border-radius:0;background:none;font:400 15px var(--k-disp);letter-spacing:.06em;color:var(--k-ink3);cursor:pointer}
.wk13 .wkj-tab small{font:600 13px Lora,Georgia,serif;letter-spacing:0;color:var(--k-ink3);margin-left:4px}
.wk13 .wkj-tab:hover{color:var(--k-ink)}
.wk13 .wkj-tab.on{color:var(--k-ink);background:radial-gradient(60% 90% at 50% 100%,rgba(143,180,255,.3),transparent 72%);box-shadow:inset 0 -2px 0 var(--mn-acc,var(--k-gold))}
.wk13 .wkj-p{display:none}
.wk13 .wkj-p.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;padding:8px 2px 4px}
.wk13 .wkj-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.wk13 .wkj-wide{grid-column:1/-1;min-width:0}
.wk13 .wkj-col>p{margin:0}
.wk13 .wkj-lab{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px;padding-bottom:4px;font:400 15px var(--k-disp);letter-spacing:.06em;color:var(--k-ink);border-bottom:1px solid var(--k-line)}
.wk13 .wkj-lab span{display:flex;align-items:center;gap:6px;font:400 13px Lora,Georgia,serif;letter-spacing:0;color:var(--k-ink2)}
.wk13 .wkj-ab{display:flex;align-items:flex-start;gap:12px;padding:8px 10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wk13 .wkj-ab>div>b{display:block}.wk13 .wkj-ab>div>span{display:block;font-size:13px;color:var(--k-ink2)}
.wk13 .wkj-ab.sm{padding:6px 10px}
.wk13 .wkj-take{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.wk13 .wkj-take>span{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;padding:6px 10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wk13 .wkj-take>span .wk-u{grid-row:span 2}.wk13 .wkj-take b{font-size:15px}.wk13 .wkj-take small{color:var(--k-ink3)}
.wk13 .wkj-take .bad b{color:var(--k-bad)}.wk13 .wkj-take .good b{color:var(--k-good)}
.wk13 .wkj-els,.wk13 .wkj-bring{display:flex;flex-wrap:wrap;gap:6px}
.wk13 .wkj-els span,.wk13 .wkj-bring span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:13px;font-weight:600;background:var(--k-paper);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wk13 .wkj-els .good{color:var(--k-good)}.wk13 .wkj-els .bad{color:var(--k-bad)}
.wk13 .wkj-loot{display:flex;flex-wrap:wrap;gap:4px}
#wikiPage .wk13 .wk-ls{display:flex;flex-direction:column;align-items:center;gap:2px;width:58px;text-decoration:none;color:var(--k-ink2)}
.wk13 .wk-ls small{white-space:nowrap;color:var(--k-ink2)}
.wk13 .wk-ls.chase .wk-slot{box-shadow:inset 0 0 0 1px var(--k-gold),0 0 8px rgba(244,198,87,.45)}#wikiPage .wk13 .wk-ls.chase small{color:var(--k-gold)}
.wk13 .wk-ls.pet .wk-slot,.wk13 .wk-strip.pet .wk-slot{box-shadow:inset 0 0 0 1px var(--k-rare),0 0 8px rgba(176,124,255,.5)}#wikiPage .wk13 .wk-ls.pet small{color:#c9a6ff}
.wk13 .wk-ls:hover .wk-slot{box-shadow:inset 0 0 0 1px var(--mn-acc,var(--k-gold))}
.wk13 .wkj-time{display:flex;flex-direction:column}
.wk13 .wkj-time>div{position:relative;display:grid;grid-template-columns:92px 1fr;column-gap:12px;padding:4px 0}
.wk13 .wkj-time>div::before{content:"";position:absolute;left:96px;top:10px;width:9px;height:9px;transform:rotate(45deg);background:var(--mn-acc,var(--k-gold))}
.wk13 .wkj-time>div::after{content:"";position:absolute;left:100px;top:18px;bottom:-6px;width:1px;background:rgba(143,180,255,.3)}
.wk13 .wkj-time>div:last-child::after{display:none}
.wk13 .wkj-time .t{grid-row:span 2;padding-right:12px;font-size:13px;font-weight:700;text-align:right;color:var(--mn-acc,var(--k-gold))}
.wk13 .wkj-time b{padding-left:14px}.wk13 .wkj-time .d{padding-left:14px;font-size:13px;line-height:1.3;color:var(--k-ink2)}
.wk13 .wkj-q{margin:0 0 10px;font-style:italic;color:var(--k-ink2)}
.wk13 .wk-kv{width:100%;border-collapse:collapse}
.wk13 .wk-kv th{width:30%;padding:6px 10px 6px 0;text-align:left;vertical-align:top;font:400 12px/20px var(--k-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ink3);border-top:1px solid var(--k-line)}
.wk13 .wk-kv td{padding:6px 0;border-top:1px solid var(--k-line)}.wk13 .wk-kv td small{color:var(--k-ink3)}
/* a map, drawn from the map's own grid, with its spawn squares */
.wk13 .wk-map{position:relative;line-height:0;margin:0 0 6px;box-shadow:0 0 0 1px #04060a,0 0 0 2px rgba(140,170,240,.25)}
.wk13 .wk-map img{width:100%;height:100%;image-rendering:pixelated}
.wk13 .wk-pin{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--k-bad);box-shadow:0 0 0 2px #fff,0 0 8px 2px rgba(242,85,90,.8)}
.wk13 .wk-maplab{position:absolute;left:6px;bottom:6px;padding:2px 8px;font:600 13px/18px Lora,Georgia,serif;color:#f3f6fc;background:rgba(5,7,11,.8)}
@container (max-width:620px){.wk13 .wkj-p.on{grid-template-columns:1fr}.wk13 .wkj-spr{min-width:64px;max-width:110px}.wk13 .wkj-spr .wk-spr{max-height:96px}}
/* ================================================================ THE WIKI'S SKILL, QUEST, DIARY AND AREA PAGES (2026-10-17, Midnight Round Thirteen: the
   owner's picks "The reference page", "The quest log" and "The region guide", tools/midnight/round13/parts/wskill). The bodies are drawn by
   v3/assets/js/eastscape-wikiref.js into #wikiPage (the chrome's ~700px column). Every selector is #wikiPage .wr..., so it wins over the wiki's older
   rules and their night copies; colours are the kit's tokens, so the Tavern gets its own ink and paper. Type: 20 / 15 / 12 caps / 15 / 13; pictures
   64 / 32 / 20 (round13/TYPE.md). Moonlight = selected and "you can", gold = tickets and capes, green / red = met / unmet. Maps are canvases drawn
   from the maps' own grids (the owner's rule: no map pictures until the map passes are done). */
#wikiPage .wr{--wr-acc:var(--mn-acc,#1a5a8a);container-type:inline-size;font:400 15px/1.4 Lora,Georgia,serif;color:var(--k-ink)}
#wikiPage .wr-g{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:16px;align-items:start}
#wikiPage .wr.wr-area>.wr-g{display:flex;flex-direction:column;gap:12px}
#wikiPage .wr-about{color:var(--k-ink2);line-height:1.5}
#wikiPage .wr p{margin:0}#wikiPage .wr ul,#wikiPage .wr ol{margin:0;padding:0;list-style:none}
#wikiPage .wr small{font-size:13px;font-weight:400;color:var(--k-ink3)}
#wikiPage .wr a{text-decoration:none}#wikiPage .wr a:hover{text-decoration:underline}
#wikiPage .wr h2{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0;font:400 20px/1.2 var(--k-disp);letter-spacing:.04em;color:var(--k-ink);text-shadow:none}
#wikiPage .wr h2 .wfind{margin-left:auto}
#wikiPage .wr h3{margin:12px 0 4px;font:400 15px/1.3 var(--k-disp);letter-spacing:.06em;color:var(--k-ink)}
#wikiPage .wr-main{min-width:0;display:flex;flex-direction:column;gap:8px}
#wikiPage .wr-lab{margin-top:4px;font:400 12px/1.3 var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink3)}
#wikiPage .wr-sm{font-size:13px}#wikiPage .wr-mute{color:var(--k-ink3)}#wikiPage .wr-foot{margin-top:2px}
#wikiPage .wr-note{padding:8px 12px;color:var(--k-ink2);box-shadow:inset 3px 0 0 var(--k-card-line);background:rgba(140,170,240,.04)}
#wikiPage .wr-big{font:400 20px/1.2 var(--k-disp);color:var(--k-ink)}
#wikiPage .wr .chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;font:600 13px/1 Lora,Georgia,serif;color:var(--k-ink2);background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);white-space:nowrap}
#wikiPage .wr .chip.gold{color:var(--k-gold-ink,var(--k-gold));box-shadow:inset 0 0 0 1px var(--k-gold)}#wikiPage .wr .chip.good{color:var(--k-good);box-shadow:inset 0 0 0 1px var(--k-good)}#wikiPage .wr .chip.bad{color:var(--k-bad);box-shadow:inset 0 0 0 1px var(--k-bad)}
/* pictures: one of three squares; the item art inside is given its size outright (it wins over the bag's whole-pixel snap) */
#wikiPage .wr .wr-i{display:inline-grid;place-items:center;flex:none;line-height:0}
#wikiPage .wr .wr-i.i64{width:64px;height:64px}#wikiPage .wr .wr-i.i32{width:32px;height:32px}#wikiPage .wr .wr-i.i20{width:20px;height:20px}
#wikiPage .wr .wr-i.i64>img,#wikiPage .wr .wr-i.i64 .glow>img,#wikiPage .wr .wr-i.i64 .glow{width:64px!important;height:64px!important;max-width:none;margin:0}
#wikiPage .wr .wr-i.i32>img,#wikiPage .wr .wr-i.i32 .glow>img,#wikiPage .wr .wr-i.i32 .glow{width:32px!important;height:32px!important;max-width:none;margin:0}
#wikiPage .wr .wr-i.i20>img,#wikiPage .wr .wr-i.i20 .glow>img,#wikiPage .wr .wr-i.i20 .glow{width:20px!important;height:20px!important;max-width:none;margin:0}
#wikiPage .wr .wr-i img{object-fit:contain;image-rendering:auto;vertical-align:0}
#wikiPage .wr .wr-i.iw4{display:grid;grid-template-columns:20px 20px;gap:2px;width:42px;height:42px}#wikiPage .wr .wr-i.iw4>img,#wikiPage .wr .wr-i.iw4 .glow{width:20px!important;height:20px!important}
#wikiPage .wr .wr-i.sp>img{width:auto!important;height:32px!important}
#wikiPage .wr .wr-sp{flex:none;display:block;width:auto;image-rendering:pixelated;object-fit:contain}
#wikiPage .wr .wr-msp{display:inline-flex;align-items:flex-end;justify-content:center;flex:none;width:64px}
#wikiPage .wr .wr-msp .mico{max-width:64px;max-height:100%;margin:0;object-fit:contain;image-rendering:pixelated}
#wikiPage .wr .wr-i.i32>.wr-msp{width:32px;height:32px!important}#wikiPage .wr .wr-i.i32 .mico{max-width:32px}
#wikiPage .wr-tix{display:inline-flex;align-items:center;gap:4px;color:var(--k-gold-ink,var(--k-gold));font-weight:700;white-space:nowrap}
#wikiPage .wr-ok,#wikiPage .wr-no{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;font:700 15px/1 Lora,Georgia,serif}
#wikiPage .wr-ok{color:var(--k-good)}#wikiPage .wr-no{color:var(--k-bad)}
#wikiPage .wr-dot{display:inline-block;flex:none;width:11px;height:11px;margin:4px;transform:rotate(45deg);background:var(--wr-acc);box-shadow:0 0 8px rgba(143,180,255,.55)}
#wikiPage .wr-dot.off{background:none;box-shadow:inset 0 0 0 2px var(--k-ink3)}
#wikiPage .wr-cell{display:flex;align-items:center;gap:10px;min-width:0}
#wikiPage .wr-cell>span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
#wikiPage .wr-cell.sm{gap:6px;font-size:13px}
/* tables */
#wikiPage .wr-tbl{width:100%;border-collapse:collapse;font-size:15px}
#wikiPage .wr-tbl th{padding:5px 6px;text-align:left;font:400 12px var(--k-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ink3);border-bottom:1px solid var(--k-card-line);white-space:nowrap}
#wikiPage .wr-tbl td{padding:4px 6px;height:40px;border-bottom:1px solid var(--k-line);vertical-align:middle}
#wikiPage .wr-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#wikiPage .wr-tbl td.num .wr-mute{font-size:13px}
#wikiPage .wr-tbl .wr-lv{width:46px;font-weight:700;white-space:nowrap}
#wikiPage .wr-tbl tr.wr-other td{background:rgba(143,180,255,.05)}
#wikiPage .wr-tbl tr.wr-best td{background:rgba(91,211,138,.08)}
#wikiPage .wr-tbl tr.wr-sel td{background:rgba(143,180,255,.09)}
#wikiPage .wr-where{font-size:13px;color:var(--k-ink2)}#wikiPage .wr-places>.wr-mute{white-space:nowrap}#wikiPage .wr-tbl td.wr-where{min-width:84px}
#wikiPage .wr-tbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
#wikiPage .wr-seg{display:flex;flex:none}#wikiPage .wr-tbar>.wr-lab{margin:0}
#wikiPage .wr-seg button{height:28px;padding:0 10px;white-space:nowrap;border:0;border-radius:0;font:600 13px Lora,Georgia,serif;color:var(--k-ink3);background:none;box-shadow:inset 0 0 0 1px var(--k-card-line);cursor:pointer}
#wikiPage .wr-seg button.on{color:var(--k-ink);background:rgba(143,180,255,.16);box-shadow:inset 0 0 0 1px var(--wr-acc)}
#wikiPage .wr-tabs{display:flex;gap:2px;border-bottom:1px solid var(--k-line)}
#wikiPage .wr-tab{height:36px;padding:0 14px;border:0;border-radius:0;background:none;font:400 15px var(--k-disp);letter-spacing:.06em;color:var(--k-ink2);cursor:pointer;box-shadow:none}
#wikiPage .wr-tab:hover{color:var(--k-ink)}
#wikiPage .wr-tab.on{color:var(--k-ink);background:var(--mn-glow,none);box-shadow:inset 0 -2px 0 var(--wr-acc)}
#wikiPage .wr-tabbody{display:flex;flex-direction:column;gap:8px;min-width:0}
#wikiPage .wr-extra{max-width:100%;overflow-x:auto}#wikiPage .wr-extra h3{margin-top:10px}
/* the infobox */
#wikiPage .wr-box{display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);position:sticky;top:0}
#wikiPage .wr-dl{display:grid;grid-template-columns:1fr;margin:0}
#wikiPage .wr-dl dt{margin-top:6px;font:400 12px var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink3)}
#wikiPage .wr-dl dd{margin:0;line-height:1.35}
#wikiPage .wr-ladder{display:grid;grid-template-columns:repeat(5,36px);gap:6px 8px}
#wikiPage .wr-ladder span{display:flex;flex-direction:column;align-items:center;font-size:13px}
#wikiPage .wr-ladder small{line-height:1.2}
#wikiPage .wr-cape{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--k-line);border-bottom:1px solid var(--k-line)}
#wikiPage .wr-cape>div{display:flex;flex-direction:column;gap:2px;min-width:0}#wikiPage .wr-cape b a{color:var(--k-gold-ink,var(--k-gold))}
#wikiPage .wr-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid #04060a;border-radius:0;font:600 15px Lora,Georgia,serif;color:var(--k-ink);background:linear-gradient(#262f41,#151b28);box-shadow:inset 0 -2px 0 var(--wr-acc);cursor:pointer;text-decoration:none!important;text-align:center;line-height:1.25}
#wikiPage .wr-btn:hover{filter:brightness(1.15)}#wikiPage .wr-btn.on{box-shadow:inset 0 0 0 1px var(--wr-acc),inset 0 -2px 0 var(--wr-acc);background:linear-gradient(#2a3a5a,#18233a)}
#wikiPage .wr-btn.plain{box-shadow:none;background:linear-gradient(#1c2232,#121722)}
html[data-ui-theme="tavern"] #wikiPage .wr-btn{color:#2a2016;border-color:#8a6a3a;background:linear-gradient(#f6e6c0,#e2cc98)}
#wikiPage .wr-btns{display:flex;flex-direction:column;gap:8px;margin-top:6px}
#wikiPage .wr-boosts,#wikiPage .wr-next,#wikiPage .wr-xpl,#wikiPage .wr-needs{display:flex;flex-direction:column;gap:8px}
#wikiPage .wr-boosts li,#wikiPage .wr-next li,#wikiPage .wr-xpl li,#wikiPage .wr-needs li{display:flex;align-items:center;gap:8px;line-height:1.3}
#wikiPage .wr-boosts li{align-items:flex-start;font-size:13px}
#wikiPage .wr-next li>span{display:flex;flex-direction:column}
/* the skill page */
#wikiPage .wr-head{display:flex;align-items:center;gap:12px}
#wikiPage .wr-head p{color:var(--k-ink2);font-size:13px;line-height:1.4}
#wikiPage .wr-calc{display:flex;align-items:center;gap:14px;padding:10px 12px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);flex-wrap:wrap}
#wikiPage .wr-calc>span{display:flex;flex-direction:column}
#wikiPage .wr-arrow{font:400 20px var(--k-disp);color:var(--k-ink3)}
#wikiPage .wr-in{width:64px;height:32px;padding:0 6px;border:0;border-radius:0;background:#0a0e15;box-shadow:inset 0 0 0 1px var(--wr-acc);font:400 20px var(--k-disp);color:var(--k-ink);text-align:center}
html[data-ui-theme="tavern"] #wikiPage .wr-in{background:#fff8e6}
#wikiPage .wr-grow{flex:1}
#wikiPage .wr-check{display:flex;flex-direction:column;gap:6px}
#wikiPage .wr-check.two{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
#wikiPage .wr-check li{display:flex;align-items:flex-start;gap:8px;line-height:1.3}
#wikiPage .wr-check li>span{display:flex;flex-direction:column}
/* the quest log */
#wikiPage .wr-qtitle{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#wikiPage .wr-qtitle h2{margin-right:auto}
#wikiPage .wr-giver{display:flex;align-items:center;gap:14px;padding:8px 12px;background:rgba(10,14,21,.35);box-shadow:inset 0 0 0 1px var(--k-line)}
#wikiPage .wr-giver>div{display:flex;flex-direction:column;gap:2px}#wikiPage .wr-giver p{font-style:italic;color:var(--k-ink2)}
#wikiPage .wr-obj{display:flex;flex-direction:column;gap:6px}
#wikiPage .wr-obj li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:auto 6px;column-gap:10px;row-gap:4px;align-items:center;padding:6px 10px;background:rgba(24,32,51,.35);box-shadow:inset 0 0 0 1px var(--k-line)}
#wikiPage .wr-obj li>.wr-i{grid-row:1/3}
#wikiPage .wr-obj em{font-style:normal;font-weight:700;text-align:right;white-space:nowrap}
#wikiPage .wr-obj .bar,#wikiPage .wr-tiers .bar{display:block;grid-column:2/4;height:6px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px var(--k-line)}
#wikiPage .wr-obj .bar i,#wikiPage .wr-tiers .bar i{display:block;height:100%;background:var(--wr-acc)}
#wikiPage .wr-obj li.on{box-shadow:inset 3px 0 0 var(--wr-acc),inset 0 0 0 1px rgba(143,180,255,.35)}
#wikiPage .wr-obj li.done .bar i{background:var(--k-good)}
#wikiPage .wr-obj.dim{opacity:.6}
#wikiPage .wr-red{display:flex;flex-direction:column;gap:2px;padding:8px 12px;background:rgba(242,85,90,.08);box-shadow:inset 3px 0 0 var(--k-bad)}
#wikiPage .wr-red b{color:var(--k-bad)}
#wikiPage .wr-first{display:flex;align-items:center;gap:14px;padding:10px 12px;background:rgba(143,180,255,.06);box-shadow:inset 3px 0 0 var(--wr-acc),inset 0 0 0 1px var(--k-line)}
#wikiPage .wr-first>div{flex:1;display:flex;flex-direction:column;gap:2px;line-height:1.3}#wikiPage .wr-first p{color:var(--k-ink2)}
#wikiPage .wr-qrow{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px;align-items:start}
#wikiPage .wr-qrow p{line-height:1.5}
#wikiPage .wr-slots{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 10px;align-items:center}
#wikiPage .wr-slot{display:grid;place-items:center;width:44px;height:44px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--k-card-line)}
#wikiPage .wr-tixb{color:var(--k-gold-ink,var(--k-gold))}
#wikiPage .wr-way{margin-top:8px}
#wikiPage .wr-wayr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:4px;font-size:13px}
#wikiPage .wr-wayr span{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;box-shadow:inset 0 0 0 1px var(--k-card-line)}
#wikiPage .wr-wayr i{font-style:normal;color:var(--k-ink3)}
/* the diary */
#wikiPage .wr-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#wikiPage .wr-tiers button{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:2px;align-items:center;padding:8px;border:0;border-radius:0;background:none;color:var(--k-ink);text-align:left;box-shadow:inset 0 0 0 1px var(--k-card-line);cursor:pointer}
#wikiPage .wr-tiers button>.wr-i{grid-row:1/3}#wikiPage .wr-tiers button>span{display:flex;flex-direction:column;gap:4px;min-width:0}
#wikiPage .wr-tiers b{font:400 15px var(--k-disp)}#wikiPage .wr-tiers small{grid-column:2}
#wikiPage .wr-tiers button.on{background:rgba(143,180,255,.12);box-shadow:inset 0 0 0 1px var(--wr-acc)}
#wikiPage .wr-tiers button.full .bar i{background:var(--k-good)}
#wikiPage .wr-tasks{display:flex;flex-direction:column;gap:6px}
#wikiPage .wr-tasks li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;background:rgba(24,32,51,.35);box-shadow:inset 0 0 0 1px var(--k-line)}
#wikiPage .wr-tasks li>span{display:flex;flex-direction:column;line-height:1.3}#wikiPage .wr-tasks em{font-style:normal;font-weight:700;white-space:nowrap}
#wikiPage .wr-tasks li.done{box-shadow:inset 3px 0 0 var(--k-good),inset 0 0 0 1px var(--k-line)}
/* maps, drawn from the map itself, with pins */
#wikiPage .wr-map{position:relative;line-height:0;width:100%;background:#05070b;box-shadow:0 0 0 1px #04060a,0 0 0 2px var(--k-card-line)}
#wikiPage .wr-map canvas{display:block;width:100%;height:100%;image-rendering:auto}
#wikiPage .wr-pin{position:absolute;display:block;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;transform:rotate(45deg);box-shadow:0 0 0 1.5px #05070b}
#wikiPage .wr-pin.mob{background:var(--k-bad);width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
#wikiPage .wr-pin.mob.agg{box-shadow:0 0 0 1.5px #05070b,0 0 0 3px var(--k-bad)}
#wikiPage .wr-pin.node{background:var(--k-good)}
#wikiPage .wr-pin.npc{background:#f3f6fc}#wikiPage .wr-pin.npc.big{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;box-shadow:0 0 0 2px #05070b,0 0 10px rgba(255,255,255,.7)}
#wikiPage .wr-pin.use{background:#8fb4ff;width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
#wikiPage .wr-pin.out{background:#05070b;box-shadow:0 0 0 2px #8fb4ff;width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
#wikiPage .wr-map.hide-mob .wr-pin.mob,#wikiPage .wr-map.hide-node .wr-pin.node,#wikiPage .wr-map.hide-npc .wr-pin.npc,#wikiPage .wr-map.hide-use .wr-pin.use,#wikiPage .wr-map.hide-out .wr-pin.out{display:none}
#wikiPage .wr-room{position:absolute;display:grid;place-items:center;width:22px;height:22px;font:400 15px/1 var(--k-disp);color:#0b1120;background:#8fb4ff;box-shadow:0 0 0 1.5px #05070b}
html[data-ui-theme="midnight"] body #wikiPage .wr-room{color:#0b1120;background:#8fb4ff}
#wikiPage .wr-maplab{position:absolute;left:6px;bottom:6px;padding:2px 8px;font:600 13px/18px Lora,Georgia,serif;color:#f3f6fc;background:rgba(5,7,11,.82)}
#wikiPage .wr-legend{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:6px}
#wikiPage .wr-legend button{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 9px;border:0;border-radius:0;background:none;font:600 13px Lora,Georgia,serif;color:var(--k-ink2);box-shadow:inset 0 0 0 1px var(--k-line);cursor:pointer}
#wikiPage .wr-legend button .wr-pin{position:static;margin:0 2px}
#wikiPage .wr-legend button.off{opacity:.45}#wikiPage .wr-legend small{font-size:13px}
/* the region guide */
#wikiPage .wr-rghead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
#wikiPage .wr-rgname{display:flex;flex-direction:column;gap:6px}
#wikiPage .wr-rgname p{color:var(--k-ink2);font-size:15px;line-height:1.45}
#wikiPage .wr-rgname .wr-dl{padding-top:4px;border-top:1px solid var(--k-line)}#wikiPage .wr-rgname .wr-dl dd{font-size:13px}
#wikiPage .wr-rgcols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
#wikiPage .wr-rgcols>div{display:flex;flex-direction:column;gap:6px;min-width:0}
#wikiPage .wr-mobs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#wikiPage .wr-mobs li{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;line-height:1.25;background:rgba(24,32,51,.4);box-shadow:inset 0 0 0 1px var(--k-line);min-width:0}
#wikiPage .wr-mobs li>span{display:flex;flex-direction:column;gap:2px;min-width:0}
#wikiPage .wr-mobs li.boss{box-shadow:inset 3px 0 0 var(--k-bad),inset 0 0 0 1px var(--k-line)}
#wikiPage .wr-drops{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:13px;color:var(--k-ink2)}
#wikiPage .wr-drops span{display:inline-flex;align-items:center;gap:3px}
#wikiPage .wr-mini{display:flex;flex-direction:column;gap:6px}
#wikiPage .wr-mini li{display:flex;align-items:center;gap:10px;line-height:1.25}
#wikiPage .wr-mini li>span{display:flex;flex-direction:column;min-width:0}
#wikiPage .wr-notes{display:flex;flex-direction:column;gap:6px}
#wikiPage .wr-notes li{position:relative;padding-left:16px;line-height:1.4}
#wikiPage .wr-notes li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;transform:rotate(45deg);background:var(--k-bad)}
#wikiPage .wr-dtiers td{height:34px}
html[data-ui-theme="midnight"] body #wikiPage .wr h2,html[data-ui-theme="midnight"] body #wikiPage .wr-big{color:#f3f6fc}
html[data-ui-theme="midnight"] body #wikiPage .wr a{color:var(--mn-acc)}
html[data-ui-theme="midnight"] body #wikiPage .wr-pin.npc{background:#f3f6fc}html[data-ui-theme="midnight"] body #wikiPage .wr-pin.use{background:#8fb4ff}html[data-ui-theme="midnight"] body #wikiPage .wr-maplab{color:#f3f6fc}
html[data-ui-theme="midnight"] body #wikiPage .wr .wr-tixb,html[data-ui-theme="midnight"] body #wikiPage .wr .wr-cape b a{color:var(--k-gold)}
/* a narrow column (a small screen's wiki): the infobox goes under the page, the region guide's two columns stack */
@container (max-width:620px){#wikiPage .wr-g{grid-template-columns:minmax(0,1fr)}#wikiPage .wr-box{position:static}#wikiPage .wr-rghead,#wikiPage .wr-rgcols,#wikiPage .wr-qrow{grid-template-columns:minmax(0,1fr)}#wikiPage .wr-check.two{grid-template-columns:1fr}}
/* ============================================================ THE WIKI'S CHROME (2026-10-17, v1.6, Midnight Round Thirteen: the owner's picks "The wiki
   chrome", "The Codex", "Patch notes", "Codex and collection"; v3/assets/js/eastscape-wikichrome.js draws it, tools/midnight/round13/WIKI-CHROME.md is the
   container the page bodies sit in). Tokens throughout, so the Tavern draws it in its own ink; Midnight's glass and moonlight are the block after. */
#wikiTop:empty{display:none}
.wiki.wkc{grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.wiki.wkc>#wikiTop{grid-column:1/-1;position:relative;z-index:4;display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--k-line)}
.wiki.wkc>#wikiNav{grid-row:2;min-height:0;padding:8px 6px}
.wiki.wkc>#wikiPage{grid-row:2;min-height:0}
.wc-sf{position:relative;display:flex;align-items:center;gap:9px;flex:0 1 460px;min-width:0;height:38px;padding:0 10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wc-sf.on{box-shadow:inset 0 0 0 1px var(--mn-acc,var(--k-gold)),0 0 0 3px rgba(143,180,255,.16)}
.wc-sf input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:none;outline:0;box-shadow:none;font:400 15px/1 Lora,Georgia,serif;color:var(--k-ink)}
.wc-sf input::placeholder{color:var(--k-ink3);opacity:1}.wc-sf input::-webkit-search-cancel-button{display:none}
.wc-sf kbd,.wc-sug kbd{flex:none}
.wc-mag{position:relative;flex:none;width:12px;height:12px;margin:-3px 3px 0 0;border:2px solid var(--k-ink3);border-radius:50%}
.wc-mag::after{content:"";position:absolute;right:-6px;bottom:-5px;width:7px;height:2px;background:var(--k-ink3);transform:rotate(45deg)}
.wc-tb,.wc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border:0;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink)!important;font:600 15px/1 Lora,Georgia,serif;text-decoration:none!important;white-space:nowrap;cursor:pointer}
.wc-tb:hover,.wc-btn:hover{box-shadow:inset 0 0 0 1px var(--mn-acc,var(--k-gold))}
.wc-btn.plain{height:28px;padding:0 10px;font-size:13px;background:none}
/* the suggestions */
.wc-sug{position:absolute;left:0;top:calc(100% + 4px);width:max(100%,470px);max-height:min(480px,calc(100vh - 160px));overflow:auto;background:var(--k-paper);box-shadow:0 0 0 1px var(--k-card-line),0 18px 40px rgba(0,0,0,.55);z-index:30}
.wc-sug .wc-lab{display:block}
.wc-sg{display:flex;align-items:center;gap:10px;padding:5px 10px;cursor:pointer}
.wc-sg>span{display:flex;flex-direction:column;min-width:0}
.wc-sg b{font:600 15px/1.25 Lora,Georgia,serif;color:var(--k-ink)}
.wc-sg small{font-size:13px;line-height:1.3;color:var(--k-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-sg mark,.wcs mark{background:none;color:var(--mn-acc,#8a5c08);text-decoration:underline;text-underline-offset:3px}
.wc-sg.on,.wc-sg:hover,.wc-pill.on,.wc-pill:hover,.wc-sg-foot.on,.wc-sg-foot:hover{background:rgba(143,180,255,.16);box-shadow:inset 2px 0 0 var(--mn-acc,var(--k-gold))}
.wc-sg.more{padding:0 10px 5px 52px;font-size:13px;color:var(--k-ink3)}
.wc-sgi{display:grid;place-items:center;flex:none;width:32px;height:32px;font-style:normal}
.wiki .wc-sgi img,.wiki .wc-sgi .ico{width:32px!important;height:32px!important;max-width:32px;object-fit:contain;margin:0}
.wc-sg-pills{display:flex;flex-wrap:wrap;gap:6px;padding:3px 10px 6px}
.wc-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);font-size:13px;color:var(--k-ink2);cursor:pointer}
.wiki .wc-pill img{width:20px!important;height:20px!important}
.wc-sg-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:8px 10px;border-top:1px solid var(--k-line);font-size:15px;color:var(--k-ink2);cursor:pointer}
.wc-sg-foot small{color:var(--k-ink3);font-size:13px;white-space:nowrap}
.wc-sg-none{padding:10px;color:var(--k-ink3);font-size:14px}
/* the words every part uses */
.wc-lab{font:400 12px/1.3 var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink3)}
.wc-lab.gold{color:var(--k-gold)}.wc-lab i{font-style:normal;color:var(--k-ink2);margin-left:4px}
.wc-pad{padding:8px 10px 3px}.wc-lab.wc-gap,.wc-gap{display:block;margin-top:12px}
.wc-s{font-size:13px;color:var(--k-ink3)}
.wc-h{font:400 15px/1.25 var(--k-disp);letter-spacing:.05em;color:var(--k-ink)}
.wc-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;box-shadow:inset 0 0 0 1px var(--k-card-line);font:600 13px/1.4 Lora,Georgia,serif;color:var(--k-ink2);white-space:nowrap}
.wc-chip.good{color:var(--k-good);box-shadow:inset 0 0 0 1px currentColor}.wc-chip.gold{color:var(--k-gold);box-shadow:inset 0 0 0 1px currentColor}
.wc-chip .ico,.wc-chip img{width:20px;height:20px}
.wc-seg{display:inline-flex;box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wc-seg button{height:30px;padding:0 10px;border:0;background:none;color:var(--k-ink2);font:400 15px/1 Lora,Georgia,serif;cursor:pointer}
.wc-seg button.on{background:rgba(143,180,255,.16);color:var(--k-ink);box-shadow:inset 0 -2px 0 var(--mn-acc,var(--k-gold))}
.wc-seg.sm button{height:26px;font-size:13px}
.wc-bar{display:block;height:4px;margin-top:4px;background:rgba(140,170,240,.14);overflow:hidden}.wc-bar i{display:block;height:100%;background:var(--mn-acc,var(--k-gold))}
.wc-tick{display:inline-block;flex:none;width:12px;height:7px;margin:0 2px 3px auto;border-left:2px solid var(--k-good);border-bottom:2px solid var(--k-good);transform:rotate(-45deg)}
.wiki article .wc-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0;border:0}
/* the tree */
.wc-tree .wc-n{display:flex;align-items:center;gap:7px;min-height:30px;padding:0 6px;color:var(--k-ink2);text-decoration:none;cursor:pointer}
.wc-tree .wc-n:hover,.wc-tree .wc-k:hover,.wc-tree .wc-leaf:hover{background:rgba(143,180,255,.08);color:var(--k-ink)}
.wc-tree .wc-n.on{background:rgba(143,180,255,.14);color:var(--k-ink);box-shadow:inset 2px 0 0 var(--mn-acc,var(--k-gold))}
.wc-tree .wc-n.open b{color:var(--k-ink)}
#wikiNav.wc-tree .wc-n img,#wikiNav.wc-tree .wc-n .ico{width:20px;height:20px;flex:none;object-fit:contain;vertical-align:0}
.wc-car{flex:none;width:12px;font-size:12px;color:var(--k-ink3);text-align:center}
.wc-nm{display:flex;flex-direction:column;flex:1;min-width:0}
.wc-nm b{font:600 15px/1.2 Lora,Georgia,serif}
.wc-n small{font-size:13px;color:var(--k-ink3);white-space:nowrap}.wc-n small i{font-style:normal;opacity:.8}
.wc-n.cx{min-height:42px}.wc-n.cx .wc-nm .wc-bar{width:100%}
.wc-tree .wc-lab.wc-pad{display:block;padding:8px 6px 4px}
.wc-kids{margin:0 0 4px 22px;border-left:1px solid var(--k-card-line)}
.wc-k{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:24px;padding:0 6px 0 10px;font-size:13px;color:var(--k-ink2);text-decoration:none;cursor:pointer}
.wc-k small,.wc-n small{font-size:13px;color:var(--k-ink3)}.wc-n>b{font:600 15px/1.2 Lora,Georgia,serif}
#wikiNav.wc-tree .wc-n .mico{height:20px!important;max-width:20px}
.wc-k.on,.wc-k.open{color:var(--k-ink)}.wc-k.on{background:rgba(143,180,255,.12)}
.wc-k.ver{justify-content:flex-start}.wc-k.ver b{flex:none;width:30px;font:400 13px var(--k-disp);color:var(--mn-acc,var(--k-gold))}.wc-k.ver span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-leaves{margin:1px 0 3px 8px}
.wc-leaf{display:flex;align-items:center;gap:6px;min-height:26px;padding:0 6px;font-size:13px;color:var(--k-ink2);text-decoration:none;cursor:pointer}
.wc-leaf span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wikiNav.wc-tree .wc-leaf img,#wikiNav.wc-tree .wc-leaf .ico{width:20px;height:20px;flex:none;object-fit:contain}
.wc-leaf.on{color:var(--k-ink);background:rgba(143,180,255,.22);box-shadow:inset 2px 0 0 var(--mn-acc,var(--k-gold))}
/* the crumb over every title */
.wiki.wkc article .crumbs{gap:7px;margin:0 0 12px;padding:6px 10px;box-shadow:inset 0 0 0 1px var(--k-line);font:400 13px/1.4 Lora,Georgia,serif}
.wiki.wkc article .crumbs span{color:var(--k-ink2);font-weight:600}
/* THE CODEX: the front page */
.wiki article .wcx h2,.wiki article .wcp h2,.wiki article .wcg h2,.wiki article .wcpc h2{border:0;padding:0;margin:0;font-size:20px;line-height:1.2}
.wcx-feat{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;margin:0 0 14px}
.wcx-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:10px 8px;text-align:center;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink)!important;text-decoration:none!important;cursor:pointer}
.wcx-card:hover{box-shadow:inset 0 0 0 1px var(--mn-acc,var(--k-gold))}
.wcx-card b{font:400 15px/1.2 var(--k-disp);letter-spacing:.04em;color:var(--k-ink)}.wcx-card small{font-size:13px;line-height:1.3;color:var(--k-ink3)}
.wcx-card.big{height:220px}
.wcx-cart{flex:1;display:grid;place-items:center;width:100%;min-height:70px}
.wiki .wcx-cart .wc-im,.wiki .wcx-cart .wc-it img,.wiki .wcx-cart .wc-it .ico,.wiki .wcx-cart .wc-np img{width:64px!important;height:64px!important;max-width:64px;object-fit:contain}
.wiki .wcx-card.big .wcx-cart .wc-im{width:128px!important;height:128px!important;max-width:128px}
.wiki .wcx-card.big .wc-it img,.wiki .wcx-card.big .wc-it .ico{width:96px!important;height:96px!important;max-width:96px}
.wc-im.mob,.wc-np img{image-rendering:pixelated}
.wcx-card.dark .wcx-cart img{filter:brightness(0) opacity(.42)}.wcx-card.dark b{color:var(--k-ink3)}
.wcx-lore{min-width:0}.wcx-lore h2{margin:2px 0 6px!important}
.wcx-q{margin:0 0 6px;font-style:italic;color:var(--k-ink2)}
.wcx-lore ul{margin:4px 0 8px;padding-left:18px}.wcx-lore li{margin:1px 0}
.wiki article .wcx-more{display:inline-block;margin-top:2px}
.wcx-bh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 8px}
.wcx-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.wcx-cards .wcx-card{min-height:150px}
.wcx-tot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;margin:14px 0 12px;padding:10px 12px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wcx-tot .wc-bar{height:8px;margin:0}.wcx-tot b{font-size:15px}.wcx-tot b small{font-size:13px;color:var(--k-ink3);font-weight:400}.wcx-tot>small{grid-column:1/-1}
.wcx-ver{margin:0 0 14px;padding:12px 14px;background:linear-gradient(90deg,rgba(244,198,87,.1),transparent 70%);box-shadow:inset 0 0 0 1px rgba(244,198,87,.35)}
.wcx-ver p{margin:4px 0 10px;color:var(--k-ink2)}.wcx-ver .wcx-cards{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.wcx-ver .wcx-card{min-height:120px}
.wcx-vf{display:flex;align-items:center;gap:12px;margin-top:10px}
.wcx-alsos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.wcx-also{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink)!important;text-decoration:none!important;cursor:pointer}
.wcx-also:hover{box-shadow:inset 0 0 0 1px var(--mn-acc,var(--k-gold))}.wcx-also.hw{box-shadow:inset 0 0 0 1px rgba(255,140,60,.45)}
.wiki .wcx-also img{width:32px!important;height:32px!important;flex:none}
.wcx-also span{display:flex;flex-direction:column;min-width:0}.wcx-also b{font-size:15px}.wcx-also small{font-size:13px;color:var(--k-ink3)}
/* PATCH NOTES */
.wcp{display:grid;grid-template-columns:minmax(0,1fr) 196px;gap:16px;align-items:start}
.wcp-main{min-width:0}
.wcp-ban{display:flex;align-items:center;gap:12px;min-height:108px;padding:14px 16px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line),inset 0 -2px 0 var(--mn-acc,var(--k-gold))}
.wcp-bt{flex:1;min-width:0}.wcp-bt h2{margin:4px 0!important}.wcp-bt p{margin:0;font-size:13px;color:var(--k-ink2)}
.wcp-art{display:flex;gap:6px;flex:none}.wiki .wcp-art img{width:64px!important;height:64px!important;object-fit:contain}
.wcp-short{margin:10px 0 4px;padding:10px 14px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wcp-short ul{margin:4px 0 0;padding-left:18px}.wcp-short li{margin:2px 0}
.wiki article .wcp-sec h3{display:flex;align-items:center;gap:10px;margin:18px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--k-line);font:400 15px/1.2 var(--k-disp);letter-spacing:.05em}
.wiki article .wcp-sec h3::after{display:none}
.wiki .wcp-sec h3 img{width:32px!important;height:32px!important}
.wcp-sec h3 small{margin-left:auto;font:400 13px Lora,Georgia,serif;color:var(--k-ink3)}
.wcp-ls{list-style:none;margin:0;padding:0}
.wcp-ln{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid var(--k-line)}
.wcp-ln.cr{cursor:pointer}.wcp-ln.cr:hover,.wcp-ln.open{background:rgba(143,180,255,.05)}
.wcp-mk{align-self:start;padding:1px 0;text-align:center;font:400 12px/18px var(--k-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--k-ink2);box-shadow:inset 0 0 0 1px currentColor}
.wcp-mk.new{color:var(--mn-acc,var(--k-gold))}.wcp-mk.fix{color:var(--k-good)}
.wcp-tx{min-width:0}.wcp-post{font-size:13px;color:var(--k-ink3);white-space:nowrap}.wiki .wcp .up-cr{font-size:12px;line-height:18px}
.wcp-crd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;padding:8px 10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wcp-crd[hidden]{display:none}.wiki .wcp-crd img{width:20px!important;height:20px!important}
.wcp-who{color:var(--mn-acc,var(--k-gold))}.wcp-crd .wc-s{flex-basis:100%}
.wcp-hl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.wcp-hc{display:flex;gap:10px;padding:10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink)!important;text-decoration:none!important;cursor:pointer}
.wcp-hc:hover{box-shadow:inset 0 0 0 1px var(--mn-acc,var(--k-gold))}
.wiki .wcp-hi img{width:64px!important;height:64px!important;object-fit:contain}.wcp-hi{flex:none}
.wcp-hc>span:last-child{display:flex;flex-direction:column;min-width:0}.wcp-hc b{font:400 15px var(--k-disp)}.wcp-hc em{font-size:13px;color:var(--k-gold)}.wcp-hc small{font-size:13px;color:var(--k-ink2)}
.wcp-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:8px 0 6px}
.wcp-nums>div{padding:8px;text-align:center;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wcp-nums b{display:block;font:400 20px/1.2 var(--k-disp);color:var(--k-ink)}.wcp-nums b.gold{color:var(--k-gold)}.wcp-nums small{font-size:13px;color:var(--k-ink3)}
.wcp-xp{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.wcp-xp>div{display:grid;grid-template-columns:22px 110px minmax(0,1fr) 76px;align-items:center;gap:8px;font-size:13px}
.wiki .wcp-xp .ico img,.wiki .wcp-xp img{width:20px;height:20px}
.wcp-xp em{display:block;height:8px;background:var(--mn-acc,var(--k-gold))}.wcp-xp u{text-decoration:none;text-align:right;color:var(--k-ink2)}
.wcp-tops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.wcp-tops ol{margin:4px 0 0;padding-left:18px}.wcp-tops li span{display:inline-block;min-width:60%}.wcp-tops li b{float:right;font-weight:600}
.wcp-worth{margin:6px 0;padding-left:18px}
.wcp-links{display:flex;flex-wrap:wrap;gap:6px 14px}
.wcp-rail{position:sticky;top:0;display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:1px solid var(--k-line)}
.wcp-rail>.wc-lab{margin:2px 0 4px}
.wiki article .wcp-toc,.wiki article .wcp-ver{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;font-size:14px;font-weight:400;color:var(--k-ink2);text-decoration:none;cursor:pointer}
.wiki article .wcp-toc:hover,.wiki article .wcp-ver:hover{background:rgba(143,180,255,.08);color:var(--k-ink)}
.wcp-toc small{color:var(--k-ink3)}.wiki article .wcp-toc.on{color:var(--k-ink);box-shadow:inset 2px 0 0 var(--mn-acc,var(--k-gold))}
.wiki article .wcp-ver{justify-content:flex-start;align-items:flex-start;gap:10px}.wcp-ver b{flex:none;width:28px;font:400 15px var(--k-disp);color:var(--k-ink)}.wcp-ver span small{display:block;font-size:13px;color:var(--k-ink3)}
.wcp-copy{margin-top:10px;width:100%}
/* A GUIDE, one chapter at a time */
.wcg-hd{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--k-line)}
.wcg-pic{display:grid;place-items:center;height:120px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wiki .wcg-pic img{width:64px!important;height:64px!important}
.wcg-hd h2{margin:4px 0 6px!important}.wcg-hd h2 span{color:var(--k-ink2)}
.wcg-lede{margin:0 0 8px;font-style:italic;color:var(--k-ink2)}.wcg-lede p{margin:0}.wcg-lede b{font-style:normal}
.wcg-pips{display:flex;flex-wrap:wrap;gap:6px}
.wcg-pips button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink2);font:400 13px/1 Lora,Georgia,serif;cursor:pointer}
.wcg-pips button.on{color:var(--k-ink);background:rgba(143,180,255,.12);box-shadow:inset 0 0 0 1px var(--mn-acc,var(--k-gold))}
.wcg-pips em{font:400 12px var(--k-disp);font-style:normal;color:var(--k-ink3)}.wcg-pips .wcg-all{margin-left:auto}
.wcg-body>p{margin:0 0 10px}
.wcg-in{margin-top:12px}.wcg-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:6px}
.wcg-card{display:flex;align-items:center;gap:10px;padding:10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink)!important;text-decoration:none!important;cursor:pointer}
.wcg-card:hover{box-shadow:inset 0 0 0 1px var(--mn-acc,var(--k-gold))}
.wcg-card i{flex:none;font-style:normal}.wiki .wcg-card i img{width:32px!important;height:32px!important;max-width:32px;object-fit:contain}
.wcg-card span{display:flex;flex-direction:column;min-width:0}.wcg-card b{font-size:15px;line-height:1.2}.wcg-card small{font-size:13px;color:var(--k-ink3)}
.wcg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:10px;border-top:1px solid var(--k-line)}
.wiki .card.read{position:relative}.wiki .card .wc-tick{margin-left:auto}
/* SEARCH and the versions list */
.wcs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.wcs-row,.wcv{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink)!important;text-decoration:none!important;cursor:pointer}
.wcs-row:hover,.wcv:hover{box-shadow:inset 0 0 0 1px var(--mn-acc,var(--k-gold))}
.wcs-row i{flex:none;font-style:normal}.wiki .wcs-row i img{width:32px!important;height:32px!important;max-width:32px;object-fit:contain}
.wcs-row span,.wcv span{display:flex;flex-direction:column;min-width:0}.wcs-row small,.wcv small{font-size:13px;color:var(--k-ink3)}
.wcv-list{display:flex;flex-direction:column;gap:6px}
.wcv i{flex:none;width:44px;font:400 20px var(--k-disp);font-style:normal;text-align:center;color:var(--mn-acc,var(--k-gold))}
.wcv.live{box-shadow:inset 0 0 0 1px var(--k-gold)}
/* THE PETS COLLECTION */
.wcpc{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;align-items:start}
.wcpc-hd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}.wcpc-hd>div:first-child{flex:1 1 140px}.wcpc-hd p{margin:2px 0 0}
.wcpc-sec{margin:0 0 10px}
.wcpc-slots{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.wcpc-s{position:relative;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);cursor:pointer}
.wiki .wcpc-s img{width:32px!important;height:32px!important;object-fit:contain}
.wcpc-s.leg{box-shadow:inset 0 0 0 1px rgba(244,198,87,.6)}
.wcpc-s.own::before{content:"";position:absolute;left:3px;top:3px;width:7px;height:7px;background:var(--k-good);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.wcpc-s.sel{box-shadow:inset 0 0 0 2px var(--mn-acc,var(--k-gold))}
.wcpc-s.fade{opacity:.25}
.wcpc-b{position:absolute;right:3px;bottom:1px;font:700 11px/1 Lora,Georgia,serif;color:var(--k-gold);text-shadow:0 1px 0 #000}
.wcpc-det{position:sticky;top:0;padding:12px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line)}
.wcpc-big{display:grid;place-items:center;height:160px;background:radial-gradient(60% 60% at 50% 55%,rgba(143,180,255,.14),transparent 70%)}
.wiki .wcpc-big img{width:128px!important;height:128px!important;object-fit:contain}
.wiki article h3.wcpc-nm{margin:8px 0 6px;font:400 20px/1.2 var(--k-disp)}.wiki article h3.wcpc-nm::after{display:none}
.wcpc-tags,.wcpc-fx{display:flex;flex-wrap:wrap;gap:5px}
.wcpc-fx span{padding:2px 8px;box-shadow:inset 0 0 0 1px var(--k-card-line);font-size:13px;color:var(--k-ink2)}.wcpc-fx span.on{color:var(--k-gold);box-shadow:inset 0 0 0 1px var(--k-gold)}
.wcpc-det p{margin:4px 0}.wcpc-ex{font-size:13px;font-style:italic;color:var(--k-ink3)}
.wcpc-note{margin:8px 0;padding:8px 10px;background:rgba(143,180,255,.08);box-shadow:inset 0 0 0 1px var(--k-card-line);font-size:15px}
/* the chrome's own pages read at the body size (the article is 14px for the bodies drawn before Round Thirteen) */
.wiki article .wcx,.wiki article .wcp,.wiki article .wcg,.wiki article .wcpc,.wiki article .wcs,.wiki article .wcv-list{font-size:15px}
.wiki article .wcp-toc,.wiki article .wcp-ver{font-size:15px}.wcp-crd{font-size:15px}.wcp-tops li{font-size:15px}
.wiki article .wcp-sec h3 small{font:400 13px/1 Lora,Georgia,serif}html[data-ui-theme="midnight"] .wiki .wcp .up-cr{font:700 12px/18px Lora,Georgia,serif}
.wiki article .wcpc h2 .wico,.wiki article .wcs h2 .wico,.wiki article h2 .wico.wc32{width:32px;height:32px}
/* a narrow window: the tree is a strip of categories, the rails go under */
@media (max-width:620px){
  .wiki.wkc{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr)}
  .wiki.wkc>#wikiNav{grid-row:2;display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;padding:6px}.wiki.wkc>#wikiPage{grid-row:3}
  .wc-tree .wc-kids,.wc-tree .wc-lab,.wc-tree .wc-car,.wc-tree .wc-bar{display:none}.wc-tree .wc-n{flex:none;white-space:nowrap}
  .wc-sug{width:calc(100vw - 40px)}.wc-tb{padding:0 8px}
  .wcp,.wcpc,.wcx-feat,.wcg-hd{grid-template-columns:1fr}.wcp-rail{position:static;border-left:0;padding-left:0}.wcx-cards,.wcg-cards,.wcs-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Midnight: night glass, moonlight, iron hairlines */
html[data-ui-theme="midnight"] .wiki.wkc>#wikiTop{background:rgba(8,11,18,.5)}
html[data-ui-theme="midnight"] .wiki.wkc>#wikiNav{background:rgba(8,11,18,.4)}
html[data-ui-theme="midnight"] .wc-sf{background:#0a0e15;box-shadow:inset 0 0 0 1px var(--k-card-line),inset 0 2px 6px rgba(0,0,0,.4)}
html[data-ui-theme="midnight"] .wc-sf.on{box-shadow:inset 0 0 0 1px var(--mn-acc),0 0 0 3px rgba(143,180,255,.16)}
html[data-ui-theme="midnight"] .wc-sug{background:#111725}
html[data-ui-theme="midnight"] .wc-sg-foot{background:#0b0f17}
html[data-ui-theme="midnight"] .wc-tb,html[data-ui-theme="midnight"] .wc-btn{background:linear-gradient(#262f41,#151b28);box-shadow:inset 0 0 0 1px #04060a,inset 0 1px 0 rgba(200,215,240,.16);color:#e9eef8!important}
html[data-ui-theme="midnight"] .wc-tb:hover,html[data-ui-theme="midnight"] .wc-btn:hover{box-shadow:inset 0 0 0 1px var(--mn-acc),0 0 12px rgba(143,180,255,.22)}
html[data-ui-theme="midnight"] .wc-btn.plain{background:none;box-shadow:inset 0 0 0 1px var(--k-card-line)}
html[data-ui-theme="midnight"] .wc-pill,html[data-ui-theme="midnight"] #wikiWin .wc-sf kbd,html[data-ui-theme="midnight"] #wikiWin .wc-sug kbd,html[data-ui-theme="midnight"] #wikiWin .wcg-foot kbd{background:#0a0e15}
html[data-ui-theme="midnight"] #wikiWin .wc-sf kbd,html[data-ui-theme="midnight"] #wikiWin .wc-sug kbd,html[data-ui-theme="midnight"] #wikiWin .wcg-foot kbd{border:1px solid var(--k-card-line);border-bottom-width:2px;border-radius:0;color:var(--k-ink2);font:600 13px/1.5 Lora,Georgia,serif}
html[data-ui-theme="midnight"] .wiki.wkc article .crumbs{background:#0b0f17}
html[data-ui-theme="midnight"] .wiki.wkc article .crumbs a{color:#a9c4ff;text-decoration-color:rgba(143,180,255,.4);text-underline-offset:3px}
html[data-ui-theme="midnight"] .wiki article .wcx h2,html[data-ui-theme="midnight"] .wiki article .wcp h2,html[data-ui-theme="midnight"] .wiki article .wcg h2,html[data-ui-theme="midnight"] .wiki article .wcpc h2{font-size:20px;border:0;padding:0;letter-spacing:.04em}
html[data-ui-theme="midnight"] .wcx-card,html[data-ui-theme="midnight"] .wcg-card,html[data-ui-theme="midnight"] .wcs-row,html[data-ui-theme="midnight"] .wcv,html[data-ui-theme="midnight"] .wcp-hc,html[data-ui-theme="midnight"] .wcx-also{background:linear-gradient(#161c28,#10151f)}
html[data-ui-theme="midnight"] .wcx-card.big,html[data-ui-theme="midnight"] .wcpc-big{background:radial-gradient(60% 55% at 50% 45%,rgba(143,180,255,.12),transparent 72%),linear-gradient(#161c28,#0d121b)}
html[data-ui-theme="midnight"] .wcp-ban{background:radial-gradient(70% 120% at 85% 50%,rgba(143,180,255,.14),transparent 70%),linear-gradient(#141a26,#0c1019)}
html[data-ui-theme="midnight"] .wcpc-s{background:#0b0f17;box-shadow:inset 0 0 0 1px rgba(140,170,240,.18),inset 0 2px 5px rgba(0,0,0,.45)}
html[data-ui-theme="midnight"] .wcpc-s.leg{box-shadow:inset 0 0 0 1px rgba(244,198,87,.55),inset 0 2px 5px rgba(0,0,0,.45)}
html[data-ui-theme="midnight"] .wcpc-s.sel{box-shadow:inset 0 0 0 2px var(--mn-acc),0 0 10px rgba(143,180,255,.3)}
html[data-ui-theme="midnight"] .wc-n.cx b{color:#e9eef8}
#wikiPage .wk13 .wk-head h2.wk-t1 .wfind{font-size:13px}   /* the /find button in a Round Thirteen page's title: Small, as the type scale has it */
/* ================================================================ THE SETTINGS WINDOW (2026-10-17, v1.7, Midnight Round Fourteen: "The describer" +
   "One shape for everything", tools/midnight/round14/parts/sett.*; drawn by eastscape-settings.js). 980 x 640 (data-design: fitWin scales it whole).
   Read from the kit's tokens, so the Tavern follows; the moonlight accent falls back to the kit's gold there. Type: titles 20, headings 15, labels 12
   caps, body 15, small 13; icons 64 / 32 / 20. */
#setWin{--sx-acc:var(--mn-acc,var(--k-gold,#c8963a));outline:none}
#setWin .win-body.sx-host{flex:1;display:flex;flex-direction:column;padding:0;overflow:hidden;min-height:0}
#setWin .sx{flex:1;min-height:0;display:flex;flex-direction:column;font:400 15px/1.4 Lora,Georgia,serif;color:var(--k-ink)}
#setWin .sx small{font-size:13px}
#setWin .sx-sp{flex:1}
#setWin .sx-mute{color:var(--k-ink3)}
#setWin .sx-acc{color:var(--sx-acc)!important}
#setWin .sx-lab{font:400 12px/1.3 var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink3)}
#setWin .sx-lab i{font:400 13px var(--k-disp);font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--k-ink2);margin-left:6px}
#setWin .sx-t20{margin:0;font:400 20px/1.2 var(--k-disp);letter-spacing:.04em;color:var(--k-ink)}
#setWin .sx-p{margin:0;font-size:15px}
#setWin .sx-s{margin:0;font:400 13px/1.4 Lora,Georgia,serif}
#setWin .sx-k{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border:1px solid var(--k-card-line);border-bottom-width:2px;background:rgba(0,0,0,.28);font:600 13px/1 Lora,Georgia,serif;color:var(--k-ink2);white-space:nowrap;cursor:default}
#setWin .sx-tabs>.sx-k{cursor:var(--cur-use,pointer)}
#setWin .sx-m{background:rgba(143,180,255,.24);color:inherit;box-shadow:inset 0 -2px 0 var(--sx-acc);padding:0 1px}
/* the tab strip, Q and E either side, the filter at the right */
#setWin .sx-tabs{flex:none;display:flex;align-items:center;gap:4px;padding:6px 12px;border-bottom:1px solid var(--k-line)}
#setWin .sx-tab{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:0;background:none;font:400 15px var(--k-disp);letter-spacing:.06em;color:var(--k-ink3);cursor:var(--cur-use,pointer)}
#setWin .sx-tab[aria-selected="true"]{color:var(--k-ink);background:radial-gradient(60% 90% at 50% 100%,rgba(143,180,255,.42),transparent 72%);box-shadow:inset 0 -2px 0 var(--sx-acc)}
#setWin .sx-tab:hover{color:var(--k-ink)}
#setWin .sx-hitn{min-width:18px;height:18px;padding:0 4px;font:700 13px/18px Lora,Georgia,serif;font-style:normal;text-align:center;color:#0b0f17!important;background:var(--sx-acc)}
#setWin .sx-hitn.none{background:transparent;color:var(--k-ink3)!important;box-shadow:inset 0 0 0 1px var(--k-line)}
#setWin .sx-filter{display:flex;align-items:center;gap:8px;height:34px;min-width:200px;padding:0 8px 0 10px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px var(--k-card-line),inset 0 2px 4px rgba(0,0,0,.4)}
#setWin .sx-filter.on,#setWin .sx-filter:focus-within{box-shadow:inset 0 0 0 1px var(--sx-acc),0 0 10px rgba(143,180,255,.22)}
#setWin .sx-filter input{flex:1;min-width:0;width:140px;border:0;outline:0;background:none;padding:0;font:600 15px Lora,Georgia,serif;color:var(--k-ink)}
#setWin .sx-filter input::placeholder{color:var(--k-ink3);font-weight:400}
#setWin .sx-filter input::-webkit-search-cancel-button{display:none}
#setWin .sx-clr{border:0;background:none;padding:0 2px;font:400 20px/1 var(--k-disp);color:var(--k-ink3);cursor:var(--cur-use,pointer)}
/* the list and the panel */
#setWin .sx-body{flex:1;min-height:0;display:flex}
#setWin .sx-list{flex:1;min-width:0;display:flex;flex-direction:column;padding:6px 14px 10px;overflow:auto;overscroll-behavior:contain}
#setWin .sx-olab{margin:8px 0 2px;padding-left:8px}
#setWin .sx-note{margin:4px 0;padding:6px 10px;font-size:13px;background:rgba(242,85,90,.1);box-shadow:inset 3px 0 0 var(--k-bad)}
/* ONE LINE A SETTING: a name and its value between two arrows */
#setWin .sx-row{flex:none;display:flex;align-items:center;gap:12px;height:26px;padding:0 6px 0 10px;border-bottom:1px solid var(--k-line);cursor:var(--cur-use,pointer)}
#setWin .sx-row:hover{background:rgba(143,180,255,.06)}
#setWin .sx-row.on{background:linear-gradient(90deg,rgba(143,180,255,.3),rgba(143,180,255,.06) 80%);box-shadow:inset 3px 0 0 var(--sx-acc),inset 0 0 0 1px rgba(143,180,255,.35)}
#setWin .sx-n{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#setWin .sx-cdot{display:inline-block;width:8px;height:8px;margin:0 0 2px 8px;border-radius:50%;background:var(--sx-acc);box-shadow:0 0 8px rgba(143,180,255,.7);vertical-align:middle}
#setWin .sx-cyc{flex:none;display:inline-flex;align-items:center;gap:6px}
#setWin .sx-ar{width:22px;height:22px;padding:0;border:0;background:none;font:400 20px/1 var(--k-disp);color:var(--k-ink3);cursor:var(--cur-use,pointer)}
#setWin .sx-row.on .sx-ar,#setWin .sx-ar:hover{color:var(--sx-acc)}
#setWin .sx-v{min-width:96px;text-align:center;font:600 15px Lora,Georgia,serif;color:var(--k-ink)}
#setWin .sx-row.chg .sx-v{color:var(--sx-acc)}
#setWin .sx-row.key{cursor:default}
#setWin .sx-keys{display:inline-flex;gap:3px;align-items:center}
#setWin .sx-keys i{font-style:normal;font-size:13px;color:var(--k-ink3)}
/* (2026-10-17, v1.7) the Keys tab: a line's key in its cap; the one waiting for a new key glows, and the panel shows it big */
#setWin .sx-kv{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:96px}
#setWin .sx-row.kb .sx-k{min-width:32px;cursor:var(--cur-use,pointer)}
#setWin .sx-row.kb.chg .sx-k{color:var(--sx-acc);border-color:var(--sx-acc)}
#setWin .sx-listen{font:600 13px Lora,Georgia,serif;color:var(--sx-acc);animation:sxListen 1.1s ease-in-out infinite}
#setWin .sx-row.listen{box-shadow:inset 3px 0 0 var(--sx-acc),inset 0 0 0 1px var(--sx-acc),0 0 10px rgba(143,180,255,.25)}
@keyframes sxListen{50%{opacity:.45}}
#setWin .sx-kcard{display:flex;align-items:center;gap:14px;padding:12px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px var(--k-card-line)}
#setWin .sx-kcard.listen{box-shadow:inset 0 0 0 1px var(--sx-acc),0 0 12px rgba(143,180,255,.25)}
#setWin .sx-kcard>span{display:flex;flex-direction:column;gap:2px;min-width:0}
#setWin .sx-kcard b{font:400 15px var(--k-disp);letter-spacing:.04em}
#setWin .sx-kcard small{color:var(--k-ink2)}#setWin .sx-kcard small.bad{color:var(--k-bad)}
#setWin .sx-k.big{min-width:64px;height:64px;font:400 32px/1 var(--k-disp);color:var(--k-ink);border-bottom-width:4px}
#setWin .sx-kcard.listen .sx-k.big{color:var(--sx-acc);border-color:var(--sx-acc);animation:sxListen 1.1s ease-in-out infinite}
#setWin .sx-knote{margin:8px 0 0;padding-left:8px}
@media (prefers-reduced-motion:reduce){#setWin .sx-listen,#setWin .sx-kcard.listen .sx-k.big{animation:none}}
#setWin .sx-row .sx-btn{height:22px;min-height:0;padding:0 10px;font-size:13px;line-height:1}
/* a slider is a row of notches; the default's is ringed */
#setWin .sx-notch{display:inline-flex;gap:3px;padding:3px 0;cursor:var(--cur-use,pointer);touch-action:none}
#setWin .sx-notch i{width:10px;height:16px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px var(--k-card-line)}
#setWin .sx-notch i.on{background:linear-gradient(#a9c4ff,#4f7fd8)}
#setWin .sx-notch i.def{box-shadow:inset 0 0 0 1px #fff,0 0 6px rgba(255,255,255,.45)}
/* a choice shows a diamond for each option */
#setWin .sx-pips{display:inline-flex;align-items:center;gap:6px;padding:0 4px}
#setWin .sx-pips i{width:8px;height:8px;transform:rotate(45deg);background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px var(--k-card-line);cursor:var(--cur-use,pointer)}
#setWin .sx-pips i.on{background:var(--sx-acc);box-shadow:0 0 6px var(--sx-acc)}
#setWin .sx-pips i.def{box-shadow:inset 0 0 0 1px #fff}
#setWin .sx-pips i.on.def{box-shadow:0 0 0 1px #fff,0 0 6px var(--sx-acc)}
#setWin .sx-curs{display:inline-flex;gap:2px;align-items:center}
#setWin .sx-curs img{image-rendering:pixelated;object-fit:contain}
#setWin .sx-oscur{font-size:18px;color:var(--k-ink3)}#setWin .sx-oscur.big{font-size:40px}
/* the pieces on the screen: a grid of cells, each the same line underneath */
#setWin .sx-pcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 6px;padding:2px 0 4px}
#setWin .sx-pc{position:relative;display:flex;align-items:center;gap:6px;min-width:0;height:28px;padding:0 4px;font-size:13px;color:var(--k-ink2);background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px var(--k-line);cursor:var(--cur-use,pointer)}
#setWin .sx-pc.on{color:var(--k-ink);box-shadow:inset 0 0 0 1px var(--sx-acc),0 0 8px rgba(143,180,255,.25)}
#setWin .sx-pc.off .sx-pcn{color:var(--k-ink3);text-decoration:line-through;text-decoration-color:rgba(140,150,170,.6)}
#setWin .sx-pc.off .sx-eye img{opacity:.35}
#setWin .sx-pc.keep{color:var(--k-ink3)}
#setWin .sx-pc.chg::after{content:"";position:absolute;right:4px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--sx-acc)}
#setWin .sx-pcn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#setWin .sx-eye,#setWin .sx-back{flex:none;display:grid;place-items:center;padding:0;border:0;background:none;cursor:var(--cur-use,pointer)}
#setWin .sx-eye:disabled{cursor:default;opacity:.6}
#setWin .sx-back{width:22px;height:20px;font:700 13px Lora,Georgia,serif;color:var(--k-ink2);background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--k-card-line);margin-right:8px}
/* the looks and the cursors, under their lines */
#setWin .sx-looks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 8px}
#setWin .sx-look{display:flex;align-items:center;gap:10px;padding:6px;text-align:left;border:0;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink);font:inherit;cursor:var(--cur-use,pointer)}
#setWin .sx-look.on{box-shadow:inset 0 0 0 2px var(--sx-acc),0 0 12px rgba(143,180,255,.25)}
#setWin .sx-look .ui-sw{width:104px;height:58px;flex:none}
#setWin .sx-look>span:last-child{display:flex;flex-direction:column;min-width:0}
#setWin .sx-look b{font:400 15px var(--k-disp);letter-spacing:.05em}#setWin .sx-look small{color:var(--k-ink2);line-height:1.3}
#setWin .sx-curp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:4px 0 8px}
#setWin .sx-cur{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border:0;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink);font:600 13px Lora,Georgia,serif;cursor:var(--cur-use,pointer)}
#setWin .sx-cur.on{box-shadow:inset 0 0 0 2px var(--sx-acc)}
#setWin .sx-cur .sx-curs{min-height:28px}
#setWin .sx-ofoot{margin-top:auto;padding-top:8px;border-top:1px solid var(--k-line)}
/* the panel on the right: the words and the live picture */
#setWin .sx-side{width:372px;flex:none;display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-left:1px solid var(--k-line);background:rgba(0,0,0,.18);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#setWin .sx-vals{display:flex;align-items:center;gap:16px;font-size:15px}
#setWin .sx-mini-b{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;font-size:13px}
#setWin .sx-vals .sx-mini-b{margin-left:auto}
#setWin .sx-odef{display:flex;align-items:center;gap:10px}
#setWin .sx-odef .sx-s{flex:1;min-width:0}
#setWin .sx-hints{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;color:var(--k-ink3)}
#setWin .sx-hints span{margin-right:8px}
#setWin .sx-pv{flex:none}
/* the little scenes: the game's own sprites on a plain night floor (no map picture) */
#setWin .sx-scene{position:relative;width:340px;height:136px;overflow:hidden;background:radial-gradient(90% 80% at 50% 70%,#2a3346,#151a25 70%,#0c1018);box-shadow:inset 0 0 0 1px #04060a,0 0 0 1px var(--k-card-line)}
html[data-ui-theme="tavern"] #setWin .sx-scene{background:radial-gradient(90% 80% at 50% 70%,#6e5a3c,#3f3020 70%,#2a1f14)}
#setWin .sx-scene.plain{display:grid;place-items:center}
#setWin .sx-spr{position:absolute;width:68px;height:68px;image-rendering:pixelated}
#setWin .sx-pet{position:absolute;width:34px;height:34px}
#setWin .sx-np{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0;white-space:nowrap;line-height:1.1;font:700 calc(12px * var(--k,1)) Lora,Georgia,serif;color:#fff;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 0 3px #000}
#setWin .sx-np b{font:inherit;color:#fff;max-width:84px;overflow:hidden;text-overflow:ellipsis}#setWin .sx-np b.mob{color:#ffb23f}
#setWin .sx-np .ti{font-style:italic;color:#d4bcff}#setWin .sx-np .lv{font:inherit;font-size:calc(11px * var(--k,1))!important;color:#ffe45c}
#setWin .sx-np .tx{display:inline-flex;align-items:center;gap:2px;font:inherit;font-size:calc(11px * var(--k,1))!important;color:#ff9aa8}
#setWin .sx-np em{font-style:italic;color:#e8d0a0}
#setWin .sx-tix{width:14px;height:14px}
#setWin .sx-hpb{position:absolute;width:44px;height:5px;background:#05070b;box-shadow:0 0 0 1px #000}
#setWin .sx-hpb i{display:block;height:100%;background:linear-gradient(#7ee39f,#3cae62)}
#setWin .sx-hpb.mob i{background:linear-gradient(#ff8a8e,#c8343a)}
#setWin .sx-hpb.me{width:56px}
#setWin .sx-full{position:absolute;display:flex;align-items:center;gap:3px;width:84px;height:14px;padding:2px 3px;background:rgba(5,7,11,.85);box-shadow:0 0 0 1px #000}
#setWin .sx-full small{font:700 12px/1 Lora,Georgia,serif;color:#ffe08a}#setWin .sx-full i{height:6px;background:linear-gradient(#ff8a8e,#c8343a)}
#setWin .sx-dot{position:absolute;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px #04060a}
#setWin .sx-dot.easy{background:#5bd38a}#setWin .sx-dot.even{background:#f4d057}#setWin .sx-dot.hard{background:#f2555a}
#setWin .sx-mcur{position:absolute;width:28px;height:28px;image-rendering:pixelated}
#setWin .sx-tag{position:absolute;bottom:6px;padding:2px 8px;font:600 13px Lora,Georgia,serif;color:#e9eef8;background:rgba(7,9,14,.86);box-shadow:inset 0 0 0 1px rgba(140,170,240,.22);white-space:nowrap}
#setWin .sx-tag.r{right:6px}#setWin .sx-tag.l{left:6px}#setWin .sx-tag.t{top:6px;bottom:auto}
#setWin .sx-tabs.q .sx-tab{padding:8px 8px}#setWin .sx-tabs.q .sx-filter{min-width:170px}
#setWin .sx-splat{position:absolute;width:51px;height:54px}#setWin .sx-splat img{position:absolute;inset:0;image-rendering:pixelated}
#setWin .sx-splat b{position:absolute;inset:0;display:grid;place-items:center;font:800 15px Lora,Georgia,serif;color:#fff;text-shadow:1px 1px 0 #7a0e12,-1px -1px 0 #7a0e12,0 0 3px #000}
#setWin .sx-bub{position:absolute;transform:translateX(-50%);padding:3px 9px;white-space:nowrap;font:600 13px Lora,Georgia,serif;color:#141a26;background:#eef3fb;border:1px solid #04060a}
#setWin .sx-gpop,#setWin .sx-drop{position:absolute;display:flex;align-items:center;gap:4px;font:700 15px Lora,Georgia,serif;color:#fff;text-shadow:1px 1px 0 #000,0 0 3px #000}
#setWin .sx-gpop img,#setWin .sx-drop img{width:32px;height:32px}
#setWin .sx-crest{position:absolute;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(5,7,11,.7);box-shadow:0 0 0 2px #04060a}
#setWin .sx-crest img{width:44px;height:44px}
#setWin .sx-crest.ring{background:radial-gradient(closest-side,rgba(5,7,11,.92) 78%,transparent 80%),conic-gradient(var(--sx-acc) var(--p),rgba(255,255,255,.12) 0)}
#setWin .sx-grid{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/32px 32px}
#setWin .sx-tile{position:absolute;width:32px;height:32px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
#setWin .sx-aura{position:absolute;width:104px;height:104px;border-radius:50%;background:radial-gradient(closest-side,rgba(176,124,255,.6),rgba(143,180,255,.2) 60%,transparent)}
#setWin .sx-embers{position:absolute;inset:0;background:radial-gradient(2px 2px at 30% 40%,#ffb23f,transparent),radial-gradient(2px 2px at 62% 28%,#ff8a3a,transparent),radial-gradient(3px 3px at 74% 62%,#ffd27a,transparent),radial-gradient(2px 2px at 20% 72%,#ff9a3a,transparent),radial-gradient(3px 3px at 46% 18%,#fff2b0,transparent),radial-gradient(2px 2px at 86% 34%,#ffb23f,transparent)}
#setWin .sx-banner{position:absolute;left:0;right:0;top:46px;padding:6px;text-align:center;font:400 20px var(--k-disp);letter-spacing:.1em;color:#ffe27a;background:linear-gradient(90deg,transparent,rgba(7,9,14,.9) 20%,rgba(7,9,14,.9) 80%,transparent);text-shadow:0 0 8px rgba(244,198,87,.6)}
#setWin .sx-debug{position:absolute;right:6px;top:6px;padding:3px 6px;font:600 13px/1.3 ui-monospace,Consolas,monospace;color:#cfe0ff;background:rgba(0,0,0,.7)}
#setWin .sx-red{position:absolute;inset:0;box-shadow:inset 0 0 30px 8px rgba(220,30,40,.7)}
#setWin .sx-ask{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;background:rgba(7,9,14,.9);box-shadow:inset 0 0 0 1px rgba(140,170,240,.3);color:#e9eef8}
#setWin .sx-ask span{display:flex;gap:6px}#setWin .sx-ask .k-btn{font-style:normal;height:28px;padding:0 12px;font-size:13px}
#setWin .sx-mini{position:absolute;left:14px;top:12px;transform-origin:0 0;width:204px;background:rgba(17,23,37,.96);box-shadow:0 0 0 2px #04060a,0 0 0 4px #2a313f}
#setWin .sx-mini.see{opacity:var(--a,1);left:120px;top:20px}
#setWin .sx-minih{display:flex;align-items:center;gap:6px;padding:4px 8px;font:400 15px var(--k-disp);letter-spacing:.05em;color:#f3f6fc;border-bottom:1px solid rgba(140,170,240,.14)}
#setWin .sx-minih img{width:20px;height:20px}
#setWin .sx-minis{display:grid;grid-template-columns:repeat(4,44px);gap:4px;padding:6px}
#setWin .sx-minis span{display:grid;place-items:center;width:44px;height:44px;background:#0b0f17;box-shadow:inset 0 0 0 1px rgba(140,170,240,.18),inset 0 2px 4px rgba(0,0,0,.5)}
#setWin .sx-minis img{width:32px;height:32px}
#setWin .sx-meters{position:relative;display:flex;justify-content:space-around;align-items:flex-end;width:340px;height:150px;padding:10px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px var(--k-card-line)}
#setWin .sx-meters>div{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--k-ink2)}
#setWin .sx-meters>div.on{color:var(--k-ink)}#setWin .sx-meters>div.on small{color:var(--sx-acc)}
#setWin .sx-meters b{font-size:13px}
#setWin .sx-vu{position:relative;width:20px;height:82px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 4px,rgba(255,255,255,.04) 4px 6px);box-shadow:inset 0 0 0 1px #04060a}
#setWin .sx-vu i{position:absolute;left:3px;right:3px;bottom:3px;max-height:calc(100% - 6px);background:repeating-linear-gradient(0deg,var(--sx-acc) 0 4px,transparent 4px 6px)}
#setWin .sx-meters .sx-tag{top:6px;bottom:auto;right:6px}
#setWin .sx-icard{display:flex;align-items:center;gap:14px;width:340px;min-height:96px;padding:14px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px var(--k-card-line)}
#setWin .sx-icard img{flex:none;object-fit:contain}
#setWin .sx-icard span{display:flex;flex-direction:column;gap:2px}#setWin .sx-icard small{color:var(--k-ink2)}
#setWin .sx-lookbig{display:flex;flex-direction:column;gap:4px;width:340px;padding:10px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px var(--k-card-line)}
#setWin .sx-lookbig .ui-sw{height:100px}#setWin .sx-lookbig b{font:400 15px var(--k-disp);letter-spacing:.05em}#setWin .sx-lookbig small{color:var(--k-ink2)}
#setWin .sx-curbig{display:flex;justify-content:space-around;width:340px;padding:14px 8px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px var(--k-card-line)}
#setWin .sx-curbig span{display:flex;flex-direction:column;align-items:center;gap:4px}#setWin .sx-curbig img{image-rendering:pixelated}#setWin .sx-curbig small{color:var(--k-ink2)}
/* the Tavern: the same shape on parchment; the lit things in its gold */
html[data-ui-theme="tavern"] #setWin .sx-row.on{background:linear-gradient(90deg,rgba(90,50,32,.22),rgba(90,50,32,.04) 80%);box-shadow:inset 3px 0 0 var(--sx-acc),inset 0 0 0 1px rgba(90,50,32,.35)}
html[data-ui-theme="tavern"] #setWin .sx-tab[aria-selected="true"]{background:radial-gradient(60% 90% at 50% 100%,rgba(217,164,64,.35),transparent 72%)}
html[data-ui-theme="tavern"] #setWin .sx-notch i.on{background:linear-gradient(#e8b85a,#8a6428)}
html[data-ui-theme="tavern"] #setWin .sx-notch i.def,html[data-ui-theme="tavern"] #setWin .sx-pips i.def{box-shadow:inset 0 0 0 1px #2a1a0a,0 0 0 1px #fff6dc}
html[data-ui-theme="tavern"] #setWin .sx-side{background:rgba(60,34,10,.08)}

/* ================================================================ THE HISCORES (2026-10-17, v1.6, Midnight Round Fourteen: the owner's picks "The ranked
   ladder" and "The board talks", tools/midnight/round14/parts/hisc). Drawn by v3/assets/js/eastscape-hiscores.js into #hsWin (the module puts .hx on
   .hswrap). Every selector is #hsWin .hx..., so it wins over the old rail's rules and their night copies; colours are the kit's tokens, so the Tavern
   gets its own ink and paper, and Midnight's own touches key on html[data-ui-theme="midnight"]. Type: 20 / 15 / 12 caps / 15 / 13; crests 128 / 32
   (64px art, whole multiples). Moonlight = you and selected, violet = the Fabled tier, green / red = moved up / down, gold only on tickets. */
#hsWin{--hx-acc:var(--mn-acc,#8a5a1c);--hx-pane:rgba(0,0,0,.08)}
#hsWin .hswrap.hx{display:flex;flex-direction:column;gap:10px;overflow:hidden;font:400 15px/1.4 Lora,Georgia,serif;color:var(--k-ink)}
#hsWin .hswrap.hx>.hstabs{width:auto;flex:none;display:flex;flex-direction:column;gap:8px;border:0;background:none;padding:0;overflow:visible;min-height:0}
#hsWin .hswrap.hx>.hsbody{flex:1;min-height:0;overflow:hidden;display:block}
#hsWin .hx-t20{font:400 20px/1.2 var(--k-disp);letter-spacing:.03em;color:var(--k-ink)}
#hsWin .hx-h15{font:400 15px/1.25 var(--k-disp);letter-spacing:.05em;color:var(--k-ink)}
#hsWin .hx-lbl{font:400 12px/1.3 var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink3)}
#hsWin .hx-lbl.hx-gap{margin:14px 0 6px}
#hsWin .hx-sm{font-size:13px;line-height:1.4}
#hsWin .hx-mute{color:var(--k-ink3)}
#hsWin .hx-grow{flex:1}
#hsWin .hx-crest{flex:none;image-rendering:pixelated}#hsWin .hx-crest.c32{width:32px;height:32px}#hsWin .hx-crest.c128{width:128px;height:128px}
#hsWin .hx-crest.dim{filter:grayscale(1) brightness(.55);opacity:.7}
/* faces: the character as the world draws them, the head cut out and shrunk smoothly */
#hsWin .hx-face{flex:none;display:inline-grid;place-items:center;background:var(--hx-pane) center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--k-card-line);font:400 15px var(--k-disp);color:var(--k-ink3);vertical-align:middle}
#hsWin .hx-face.f32{width:32px;height:32px}
#hsWin .hx-fc{display:flex}#hsWin .hx-fc .hx-face+.hx-face{display:none}   /* a party row shows its first face; the race shows them all */
#hsWin .hx-race .hx-face+.hx-face{margin-left:-10px}
#hsWin .hx-chips button.more{padding:4px 10px;color:var(--k-ink3)}
#hsWin .hx-head>div{min-width:0}#hsWin .hx-head>div>.hx-sm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the tabs (groups) and chips (boards) */
#hsWin .hx-gtabs{display:flex;gap:2px;border-bottom:1px solid var(--k-line)}
#hsWin .hx-gtabs button{border:0;border-radius:0;background:none;padding:8px 14px;font:400 15px var(--k-disp);letter-spacing:.05em;color:var(--k-ink3);cursor:pointer}
#hsWin .hx-gtabs button:hover{color:var(--k-ink)}
#hsWin .hx-gtabs button.on{color:var(--k-ink);background:radial-gradient(60% 90% at 50% 100%,color-mix(in srgb,var(--hx-acc) 38%,transparent),transparent 72%);box-shadow:inset 0 -2px 0 var(--hx-acc)}
#hsWin .hx-chips{display:flex;flex-wrap:wrap;gap:6px}
#hsWin .hx-chips button{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border:0;border-radius:0;font:600 13px Lora,serif;color:var(--k-ink2);background:var(--hx-pane);box-shadow:inset 0 0 0 1px var(--k-card-line);white-space:nowrap;cursor:pointer}
#hsWin .hx-chips button i{display:grid;place-items:center;width:20px;height:20px;font-style:normal}#hsWin .hx-chips button i :is(.ico,img){width:20px;height:20px}
#hsWin .hx-chips button:hover{color:var(--k-ink)}
#hsWin .hx-chips button.on{color:var(--k-ink);box-shadow:inset 0 0 0 1px var(--hx-acc),inset 0 -2px 0 var(--hx-acc)}
#hsWin .hx-chips button.none:not(.on){opacity:.6}
/* the body: the card column and the list */
#hsWin .hx-rk2{display:grid;grid-template-columns:264px minmax(0,1fr);gap:14px;height:100%;min-height:0}
#hsWin .hx-left{display:flex;flex-direction:column;min-height:0;overflow:auto;padding-right:4px}
#hsWin .hx-left p{margin:4px 0 0}
#hsWin .hx-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 14px 14px;text-align:center;background:radial-gradient(90% 60% at 50% 30%,color-mix(in srgb,var(--hx-acc) 16%,transparent),transparent 70%),var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);flex:none}
#hsWin .hx-card .hx-lbl{align-self:stretch;text-align:left}
#hsWin .hx-card .hx-crest.c128{margin:-4px 0 -6px}
#hsWin .hx-card.t-fabled{background:radial-gradient(90% 60% at 50% 30%,rgba(176,124,255,.22),transparent 70%),var(--k-card);box-shadow:inset 0 0 0 1px rgba(176,124,255,.4)}
#hsWin .hx-card.t-fabled .hx-tn{color:var(--k-rare,#8a4fd0)}
#hsWin .hx-rcn{display:flex;align-items:baseline;gap:8px}#hsWin .hx-rcn b{font:400 20px var(--k-disp);color:var(--k-ink)}
#hsWin .hx-bar{display:block;align-self:stretch;position:relative;height:8px;margin-top:2px;background:var(--hx-pane);box-shadow:inset 0 0 0 1px var(--k-card-line)}
#hsWin .hx-bar u{position:absolute;left:0;top:0;bottom:0;background:var(--hx-acc)}
#hsWin .hx-card.t-fabled .hx-bar u{background:linear-gradient(90deg,#6d4bb8,var(--k-rare,#b07cff))}
#hsWin .hx-rival{display:flex;align-items:center;gap:10px;align-self:stretch;margin-top:6px;padding-top:8px;border-top:1px solid var(--k-line);text-align:left;line-height:1.3}
#hsWin .hx-rival b{color:var(--k-ink)}
#hsWin .hx-jump{align-self:center;margin-top:4px;cursor:pointer}
#hsWin .hx-ladder{display:flex;justify-content:space-between}
#hsWin .hx-lad{display:grid;place-items:center;width:34px;height:40px;opacity:.75}
#hsWin .hx-lad.on{opacity:1;background:color-mix(in srgb,var(--hx-acc) 16%,transparent);box-shadow:inset 0 -2px 0 var(--hx-acc)}
#hsWin .hx-lad.none{opacity:.35}
#hsWin .hx-feed{display:flex;flex-direction:column;gap:6px}
#hsWin .hx-fd{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;background:var(--k-card);box-shadow:inset 0 0 0 1px var(--k-card-line);font-size:13px;line-height:1.4;color:var(--k-ink2);cursor:pointer}
#hsWin .hx-fd:hover{box-shadow:inset 0 0 0 1px var(--hx-acc)}
#hsWin .hx-fd b{color:var(--k-ink)}
#hsWin .hx-main{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}
#hsWin .hx-head{display:flex;align-items:center;gap:12px;flex:none}
#hsWin .hx-bi{display:grid;place-items:center;width:32px;height:32px;flex:none}#hsWin .hx-bi :is(.ico,img){width:32px;height:32px}
#hsWin .hx-q{width:180px;height:34px;margin:0;flex:none}
#hsWin .hx-seg{display:inline-flex;flex:none;box-shadow:inset 0 0 0 1px var(--k-card-line);background:var(--hx-pane)}
#hsWin .hx-seg button{border:0;border-radius:0;background:none;padding:6px 12px;font:600 13px Lora,serif;color:var(--k-ink3);cursor:pointer}
#hsWin .hx-seg button.on{color:var(--k-ink);background:color-mix(in srgb,var(--hx-acc) 20%,transparent);box-shadow:inset 0 -2px 0 var(--hx-acc)}
#hsWin .hx-th,#hsWin .hx-r{display:grid;grid-template-columns:40px 32px minmax(0,1fr) 62px 76px 118px;align-items:center;gap:10px;padding:0 10px}
#hsWin .hx-th{flex:none;height:28px;font:400 12px var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--k-ink3);border-bottom:1px solid var(--k-line)}
#hsWin .hx-th .r,#hsWin .hx-v,#hsWin .hx-sub{text-align:right;justify-self:end}
#hsWin .hx-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
#hsWin .hx-band{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;margin-top:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--hx-acc) 14%,transparent),transparent 70%);border-bottom:1px solid var(--k-line)}
#hsWin .hx-band.t-fabled{background:linear-gradient(90deg,rgba(176,124,255,.2),transparent 70%)}#hsWin .hx-band.t-fabled .hx-h15{color:var(--k-rare,#8a4fd0)}
#hsWin .hx-r{height:40px;border-bottom:1px solid var(--k-line);cursor:pointer}
#hsWin .hx-r:hover{background:color-mix(in srgb,var(--hx-acc) 7%,transparent)}
#hsWin .hx-r.me{background:linear-gradient(90deg,color-mix(in srgb,var(--hx-acc) 20%,transparent),color-mix(in srgb,var(--hx-acc) 6%,transparent));box-shadow:inset 3px 0 0 var(--hx-acc)}
#hsWin .hx-r.open{background:color-mix(in srgb,var(--hx-acc) 12%,transparent);box-shadow:inset 3px 0 0 var(--hx-acc);border-bottom:0}
#hsWin .hx-rk{font:700 15px Lora,serif;color:var(--k-ink2);font-variant-numeric:tabular-nums}
#hsWin .hx-nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hsWin .hx-nm .who{font-weight:600;color:var(--k-ink);cursor:pointer}#hsWin .hx-nm .who:hover{text-decoration:underline}
#hsWin .hx-v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;color:var(--k-ink)}#hsWin .hx-v .tixi{width:20px;height:20px}
#hsWin .hx-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
#hsWin .hx-mv{font:700 13px Lora,serif;color:var(--k-ink3);white-space:nowrap}
#hsWin .hx-mv.up{color:var(--k-good,#2f7a3b)}#hsWin .hx-mv.dn{color:var(--k-bad,#a23a2a)}#hsWin .hx-mv.cl{color:var(--k-good,#2f7a3b);font-weight:600}#hsWin .hx-mv.nw{color:var(--hx-acc)}
/* a row, opened: the race against the one above */
#hsWin .hx-x{display:flex;flex-direction:column;gap:10px;margin:0 0 4px;padding:12px 14px 14px;background:var(--k-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hx-acc) 40%,transparent)}
#hsWin .hx-x b{color:var(--k-ink)}
#hsWin .hx-race{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
#hsWin .hx-race>span{display:flex;align-items:center;gap:8px}
#hsWin .hx-race-bar{position:relative;height:14px;background:var(--hx-pane);box-shadow:inset 0 0 0 1px var(--k-card-line)}
#hsWin .hx-race-bar u{position:absolute;left:0;top:0;bottom:0;background:var(--hx-acc)}
#hsWin .hx-race-bar s{position:absolute;right:0;top:-4px;bottom:-4px;width:2px;background:var(--k-ink)}
#hsWin .hx-x-btns{display:flex;gap:8px;flex-wrap:wrap}
#hsWin .hx-x-btns .hx-b{min-height:34px;font-size:15px;cursor:pointer}
#hsWin .hx-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px 18px;text-align:center;box-shadow:inset 0 0 0 1px var(--k-line)}
#hsWin .hx-empty p{margin:0;max-width:52ch;color:var(--k-ink2)}
@media (max-width:760px){#hsWin .hx-rk2{grid-template-columns:1fr;overflow:auto}#hsWin .hx-left{overflow:visible}#hsWin .hx-th,#hsWin .hx-r{grid-template-columns:40px 32px minmax(0,1fr) 56px 90px}#hsWin .hx-th>:last-child,#hsWin .hx-sub{display:none}#hsWin .hx-q{width:140px}}
/* Midnight's own: the night pane's numbers, the moonlit bars */
html[data-ui-theme="midnight"] #hsWin{--hx-pane:#0a0e15}
html[data-ui-theme="midnight"] #hsWin :is(.hx-t20,.hx-h15,.hx-rcn b,.hx-v,.hx-nm .who){color:#f3f6fc}
html[data-ui-theme="midnight"] #hsWin .hx-card.t-midnight .hx-tn,html[data-ui-theme="midnight"] #hsWin .hx-band.t-midnight .hx-h15{color:#bcd3ff}
html[data-ui-theme="midnight"] #hsWin .hx-card.t-fabled .hx-tn,html[data-ui-theme="midnight"] #hsWin .hx-band.t-fabled .hx-h15{color:#d4bcff}
html[data-ui-theme="midnight"] #hsWin :is(.hx-bar u,.hx-race-bar u){background:linear-gradient(90deg,#4f7fd8,#8fb4ff)}
html[data-ui-theme="midnight"] #hsWin .hx-race-bar s{background:#f3f6fc}
html[data-ui-theme="midnight"] #hsWin .hx-face{background-color:#0a0e15;box-shadow:inset 0 0 0 1px var(--k-card-line),0 1px 2px rgba(0,0,0,.5)}
html[data-ui-theme="midnight"] #hsWin .hx-q{background:#070a10;box-shadow:inset 0 0 0 1px var(--k-card-line),inset 0 2px 6px rgba(0,0,0,.5)}
/* a new #1: the ribbon under the top bar, for a minute (placed by the module from the bar's bottom edge) */
.hx-ribbon{position:fixed;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;padding:8px 18px;border:0;cursor:pointer;font:400 15px/1.3 Lora,Georgia,serif;white-space:nowrap;color:var(--k-ink);
  background:linear-gradient(90deg,transparent,var(--k-card) 16%,var(--k-card) 84%,transparent);box-shadow:inset 0 -2px 0 var(--mn-acc,#8a5a1c),0 6px 16px rgba(0,0,0,.4);animation:hxRib .35s ease-out}
.hx-ribbon b{color:var(--k-ink)}.hx-ribbon .hx-crest{width:32px;height:32px;image-rendering:pixelated}.hx-ribbon small{font-size:13px;color:var(--k-ink3)}
html[data-ui-theme="midnight"] .hx-ribbon{background:linear-gradient(90deg,rgba(17,23,37,.2),rgba(24,34,58,.97) 18%,rgba(24,34,58,.97) 82%,rgba(17,23,37,.2));color:#e9eef8}html[data-ui-theme="midnight"] .hx-ribbon b{color:#f3f6fc}
@keyframes hxRib{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.hx-ribbon{animation:none}}

/* ============================================================ THE CHAT'S SIZE AND ITS TEXT (2026-10-17, v1.7, Calvinthesneak: "I definitely need
   to be able to adjust size of chat box, but also text size on it"). sizeChat in eastscape-ui.js writes the window's width and height (a default
   sized to the play area, or the player's own) and --chat-fs (Settings, Features, Chat text size: 11.5 / 12.5 / 14 / 16px, Large the default);
   the log takes whatever height the window has. The grips sit on the FREE corner and edges, away from where the window hangs: top right for the
   bottom-left chat, the left side once it hangs from the right (ui-at-r), the bottom once it hangs from the top. None on a phone, in OG or locked. */
html{--chat-fs:14px}
html .chat-log{font-size:var(--chat-fs)}
html .chat-log img.emo{height:calc(var(--chat-fs) * 1.6);vertical-align:calc(var(--chat-fs) * -.4)}
html .chat-log p .act{font-size:calc(var(--chat-fs) * .88)}
html .chat-form input{font-size:calc(var(--chat-fs) + .5px)}
@media (min-width:521px){html #chatTab .ct-peek{font-size:var(--chat-fs)}}
html:not(.ui-fixed) #chatBox.chat-sized{max-width:none;max-height:none}
html:not(.ui-fixed) #chatBox.chat-sized>.chat-log{height:auto;flex:1 1 0;min-height:48px}
#chatBox .chat-rs{position:absolute;z-index:3;touch-action:none;--rs-ink:rgba(200,215,240,.62);--rs-hi:var(--mn-acc,#8fb4ff)}
html[data-ui-theme="tavern"] #chatBox .chat-rs{--rs-ink:rgba(232,191,53,.55);--rs-hi:#ffd860}
html.ui-fixed #chatBox .chat-rs,#chatBox.rs-off .chat-rs{display:none}
#chatBox .rs-c{top:-4px;right:-4px;width:16px;height:16px;cursor:nesw-resize}
#chatBox .rs-v{top:-4px;left:16px;right:16px;height:8px;cursor:ns-resize}
#chatBox .rs-h{right:-4px;top:16px;bottom:16px;width:8px;cursor:ew-resize}
#chatBox .rs-c::before{content:"";position:absolute;inset:4px;opacity:.8;transition:opacity .15s;
  background:linear-gradient(45deg,transparent 0 50%,var(--rs-ink) 50% 59%,transparent 59% 68%,var(--rs-ink) 68% 77%,transparent 77% 86%,var(--rs-ink) 86% 95%,transparent 95%)}
#chatBox:hover .rs-c::before{opacity:1}#chatBox .rs-c:hover::before{--rs-ink:var(--rs-hi)}
#chatBox .rs-v:hover,#chatBox .rs-h:hover{background:linear-gradient(var(--rs-hi),var(--rs-hi)) center/100% 2px no-repeat}
#chatBox .rs-h:hover{background-size:2px 100%}
#chatBox.ui-at-r .rs-c{right:auto;left:-4px;cursor:nwse-resize}#chatBox.ui-at-r .rs-c::before{transform:scaleX(-1)}
#chatBox.ui-at-r .rs-h{right:auto;left:-4px}
#chatBox.ui-placed:not(.ui-at-b) .rs-c{top:auto;bottom:-4px;cursor:nwse-resize}#chatBox.ui-placed:not(.ui-at-b) .rs-c::before{transform:scaleY(-1)}
#chatBox.ui-placed.ui-at-r:not(.ui-at-b) .rs-c{cursor:nesw-resize}#chatBox.ui-placed.ui-at-r:not(.ui-at-b) .rs-c::before{transform:scale(-1,-1)}
#chatBox.ui-placed:not(.ui-at-b) .rs-v{top:auto;bottom:-4px}
body.ui-dragging.ui-rs,body.ui-dragging.ui-rs *{cursor:var(--rs-cur,nesw-resize)!important}
/* the settings window's picture of it */
#setWin .sx-scene.chat{display:flex;align-items:flex-end;padding:30px 10px 8px;box-sizing:border-box}
#setWin .sx-chatpv{display:flex;flex-direction:column;gap:2px;width:100%;line-height:1.32;color:#c9d3e6;font-family:Lora,Georgia,serif}
#setWin .sx-chatpv p{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#setWin .sx-chatpv b{color:#9fd0ff;font-weight:800;margin-right:6px}#setWin .sx-chatpv b.sx-cpo{color:#7ee07e}
#setWin .sx-chatpv .sx-cps{color:#ffd23f}
#setWin .sx-chatpv .sx-cpin{margin-top:4px;padding:4px 8px;font-size:calc(1em + .5px);color:var(--k-ink3,#8f9bb5);background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px var(--k-card-line,rgba(140,170,240,.22))}

/* ================================================================ THE SHARED GRAMMAR (2026-10-17, Round 16, the "sys" part: sy_grammar / sy_slot /
   sy_ctrl "cooking", sy_type "dense", ev_talk "cook"; tools/tavern/BUILD16b.md). The note at the top of this file lists what is here. Every rule is
   scoped to the two looks (html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"])); every colour is a --g-* token the look sets, so the
   grammar is one and each look keeps its own colours and frame. Nothing here changes what a click does. */
html[data-ui-theme="midnight"]{--g-cell:#0c111b;--g-cell-lit:url(/v3/assets/img/glad/flat/ui/mn/iron_d.png?v=1) 50% 50%/128px 128px;--g-cell-line:rgba(200,215,240,.12);--g-cell-lit-line:rgba(200,215,240,.24);
  --g-cell-sh:inset 0 -6px 10px rgba(0,0,0,.35);--g-sel:var(--mn-acc,#8fb4ff);--g-sel-glow:rgba(143,180,255,.5);--g-count:#fff;--g-count-m:#7dff6a;
  --g-num:#f3f6fc;--g-money:#f4c657;--g-warn:#ffb070;--g-good:#5bd38a;--g-bad:#ff7a7e;--g-label:var(--k-ink3);--g-disp-w:400;
  --g-card:linear-gradient(#1c2539,#141b2a);--g-card-line:rgba(143,180,255,.35);--g-card-sh:0 10px 24px rgba(0,0,0,.5);
  --g-tile:linear-gradient(#1c2539,#141b2a);--g-row:40px;--g-row-on:rgba(143,180,255,.12);--g-row-hv:rgba(143,180,255,.06);--g-field:#0a0e15;--g-field-line:rgba(140,170,240,.28)}
html[data-ui-theme="tavern"]{--g-cell:var(--tv-card);--g-cell-lit:var(--tv-paper-hi);--g-cell-line:var(--tv-line);--g-cell-lit-line:var(--tv-card-line);
  --g-cell-sh:inset 0 -6px 10px rgba(0,0,0,.22);--g-sel:var(--tv-act);--g-sel-glow:rgba(79,179,160,.5);--g-count:#fff;--g-count-m:#5cf06a;
  --g-num:var(--tv-ink);--g-money:var(--tv-gold-ink);--g-warn:#8a3a08;--g-good:#1f5226;--g-bad:#7e1a14;--g-label:var(--tv-label);--g-disp-w:600;
  --g-card:var(--tv-paper-hi);--g-card-line:var(--tv-card-line);--g-card-sh:0 10px 24px rgba(40,24,8,.4);
  --g-tile:var(--tv-paper-hi);--g-row:40px;--g-row-on:rgba(47,140,125,.16);--g-row-hv:rgba(60,36,10,.08);--g-field:var(--tv-field);--g-field-line:var(--tv-fline)}

/* ---------- THE CELL (the campfire's .ck-cell): a flat cell, never a wooden outline. .lit = you can / you have it, .none dimmed, .sil a silhouette
   with its level (an <i>) still to come, .sel picked, .miss short of it; the count (a <u>) bottom right in white over a shadow ---------- */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-cell{--cs:72px;--ps:64px;position:relative;display:grid;place-items:center;flex:none;width:var(--cs);height:var(--cs);padding:0;border:0;border-radius:0;
  background:var(--g-cell);box-shadow:inset 0 0 0 1px var(--g-cell-line);color:inherit;font:inherit;box-sizing:border-box;cursor:pointer}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-cell.sm{--cs:44px;--ps:32px}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-cell>:is(img,.ico){width:var(--ps)!important;height:var(--ps)!important;max-width:none!important;margin:0!important;object-fit:contain}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-cell.lit{background:var(--g-cell-lit);box-shadow:inset 0 0 0 1px var(--g-cell-lit-line),var(--g-cell-sh)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-cell.none>:is(img,.ico,span){opacity:.5;filter:grayscale(.7)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-cell.sil>:is(img,.ico,span){filter:brightness(0) invert(.18);opacity:.75}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-cell:is(:hover,:focus-visible){outline:0;box-shadow:inset 0 0 0 1px var(--g-sel),var(--g-cell-sh)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-cell.sel{box-shadow:inset 0 0 0 2px var(--g-sel),0 0 12px var(--g-sel-glow)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-cell.miss{box-shadow:inset 0 0 0 2px var(--g-bad),var(--g-cell-sh)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) :is(.g-cell>u,.g-count){position:absolute;right:3px;bottom:1px;padding:0;background:none;font:700 13px/15px Lora,Georgia,serif;color:var(--g-count);text-decoration:none;
  text-shadow:0 1px 0 #000,0 0 3px #000,0 0 2px #000;white-space:nowrap;pointer-events:none}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-cell>i{position:absolute;left:4px;top:2px;font:700 13px/15px Lora,Georgia,serif;font-style:normal;color:var(--k-ink2);pointer-events:none}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-grid{display:grid;grid-template-columns:repeat(var(--cols,8),var(--cs,72px));gap:6px}
/* EVERY ITEM SLOT (.slot: bag, bank, shops, trades, rewards; .k-slot: the kit's rows) wears the same cell: flat and square, lit when it holds
   something, the quiet cell when empty, picked in the look's one action colour. The border keeps its width (nothing moves), only its colour. */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) :is(.slot,.k-slot){border-color:var(--g-cell-lit-line);border-image:none;border-radius:0;background:var(--g-cell-lit);box-shadow:var(--g-cell-sh)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) :is(.slot,.k-slot).empty{border-color:var(--g-cell-line);background:var(--g-cell);box-shadow:none;opacity:1}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .slot:is(.sel,.on){box-shadow:inset 0 0 0 2px var(--g-sel),0 0 10px var(--g-sel-glow)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .lk-prev canvas{border:1px solid var(--g-cell-lit-line);border-image:none;background:var(--g-cell-lit)}
/* the count, in one place: bottom right, white over a shadow (green at a million), never a pill over the art's top; the marks keep the corners
   (rarity and reforge top right, favourite top left, a price top left in its small dark tab) */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) :is(body,#panel) .slot.slot>em:is(:not([class]),.k,.m){left:auto;top:auto;right:3px;bottom:1px;padding:0;border-radius:0;background:none;box-shadow:none;
  font:700 13px/15px Lora,Georgia,serif;color:var(--g-count);text-shadow:0 1px 0 #000,0 0 3px #000,0 0 2px #000}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) :is(body,#panel) .slot.slot>em.m{color:var(--g-count-m)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) :is(body,#panel) .slot.slot>em.price{font:700 12px/14px Lora,Georgia,serif;padding:0 3px;color:#ffe04a;background:rgba(10,8,6,.82)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .k-slot.k-slot>u{right:2px;bottom:0;padding:0;border-radius:0;background:none;font:700 13px/15px Lora,Georgia,serif;color:var(--g-count);text-shadow:0 1px 0 #000,0 0 3px #000,0 0 2px #000}

/* ---------- TYPE AND NUMBERS (sy_type "dense"): an eyebrow label, a readable key number, money, a warning, a sum line ---------- */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-eb{display:block;font:var(--g-disp-w) 12px/1.2 var(--k-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--g-label)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-eb small{font:700 13px Lora,Georgia,serif;letter-spacing:0;text-transform:none;color:var(--k-ink2)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-num{font-weight:700;font-variant-numeric:tabular-nums;color:var(--g-num)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-money{font-weight:700;font-variant-numeric:tabular-nums;color:var(--g-money)!important}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-warn{font-weight:700;color:var(--g-warn)!important}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-good{color:var(--g-good)!important}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-bad{color:var(--g-bad)!important}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-sum{display:block;font:600 13px/1.3 Lora,Georgia,serif;color:var(--k-ink2)}

/* ---------- A DENSE ROW (~40px, one line): picture (32), name, its number at the right ---------- */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:var(--g-row);padding:4px 10px;
  border:0;border-radius:0;background:none;box-shadow:inset 0 -1px 0 var(--k-line);color:var(--k-ink);font:400 15px/1.2 Lora,Georgia,serif;text-align:left;cursor:pointer;box-sizing:border-box}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-row>:is(img,.ico){width:32px!important;height:32px!important;margin:0}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-row>b{font:600 15px/1.2 Lora,Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-row>:last-child:not(:first-child):not(b){font:700 15px/1 Lora,Georgia,serif;font-variant-numeric:tabular-nums;color:var(--g-num);white-space:nowrap}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-row:is(:hover,:focus-visible){outline:0;background:var(--g-row-hv)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-row.on{background:var(--g-row-on);box-shadow:inset 3px 0 0 var(--g-sel),inset 0 -1px 0 var(--k-line)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-row:is(.off,:disabled){cursor:default;opacity:.55}
/* the kit's own rows take the same density */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .k-row{min-height:var(--g-row);padding-top:4px;padding-bottom:4px}

/* ---------- HOW MANY: the presets 1 / 5 / 10 / All (buttons with aria-pressed), then ONE button that names the job with its sum under it ---------- */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-presets{display:inline-flex;align-items:center;gap:4px}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-presets>button{min-width:40px;height:32px;padding:0 10px;border:0;border-radius:0;cursor:pointer;font:700 15px/1 Lora,Georgia,serif;font-variant-numeric:tabular-nums}
html[data-ui-theme="midnight"] .g-presets>button{background:#0a0e15;box-shadow:inset 0 0 0 1px var(--k-card-line);color:var(--k-ink2)}
html[data-ui-theme="midnight"] .g-presets>button:hover{color:var(--k-ink);background:rgba(140,170,240,.08)}
html[data-ui-theme="midnight"] .g-presets>button[aria-pressed="true"]{background:var(--k-paper-hi);color:#f3f6fc;box-shadow:inset 0 0 0 1px var(--k-card-line),inset 0 -2px 0 var(--mn-acc)}
html[data-ui-theme="tavern"] .g-presets>button{border-radius:6px;background:var(--tv-field);box-shadow:inset 0 0 0 2px var(--tv-fline),inset 0 -3px 0 2px rgba(90,56,20,.18);color:var(--tv-ink2)}
html[data-ui-theme="tavern"] .g-presets>button:hover{background:#f2e6c4;color:var(--tv-ink)}
html[data-ui-theme="tavern"] .g-presets>button[aria-pressed="true"]{background:linear-gradient(var(--tv-act-hi),var(--tv-act-dk));color:#fff;text-shadow:0 1px 0 #0e2e28;box-shadow:inset 0 0 0 2px var(--tv-fline),inset 0 3px 0 2px rgba(255,255,255,.22)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-presets>button:disabled{opacity:.4;cursor:default}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-go{display:grid;justify-items:end;gap:4px}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-go>div{display:flex;align-items:center;gap:12px}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-go .k-btn{min-width:160px;min-height:40px;font-size:15px}

/* ---------- THE ONE SEARCH FIELD: a sunken box with a magnifier (.g-search > input) ---------- */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-search{position:relative;display:flex;align-items:center;min-width:0}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-search::before{content:"";position:absolute;left:9px;top:50%;width:15px;height:15px;margin-top:-8px;pointer-events:none;background:var(--k-ink2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 1a5.5 5.5 0 014.38 8.82l3.65 3.65-1.06 1.06-3.65-3.65A5.5 5.5 0 116.5 1zm0 1.5a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 1a5.5 5.5 0 014.38 8.82l3.65 3.65-1.06 1.06-3.65-3.65A5.5 5.5 0 116.5 1zm0 1.5a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E") center/contain no-repeat}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-search>input{flex:1;min-width:0;height:34px;margin:0;padding:0 10px 0 32px;border:0;border-radius:0;outline:0;background:var(--g-field);
  box-shadow:inset 0 0 0 1px var(--g-field-line);color:var(--k-ink);font:400 15px/1.2 Lora,Georgia,serif}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-search>input::placeholder{font-style:italic;color:var(--k-ink2);opacity:.85}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-search>input:focus{box-shadow:inset 0 0 0 2px var(--g-sel)}

/* ---------- THE CARD (the campfire's pinned card): every floating thing's grammar. A picture in a lit cell and a name on top (.g-card-h), short
   lines with 20px icons (.g-card-r, the number at the right), a rule, ONE button with its sum under it (.g-go). .g-card is the card itself, for a
   module's own popover; the game's own popups below wear the same pieces inside their look's frame. ---------- */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--g-card);box-shadow:inset 0 0 0 1px var(--g-card-line),var(--g-card-sh);color:var(--k-ink);font:400 15px/1.4 Lora,Georgia,serif}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-card hr{width:100%;margin:2px 0;border:0;border-top:1px solid var(--k-line)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-card-h{display:flex;align-items:center;gap:12px;min-width:0}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-card-h>span:last-child{display:flex;flex-direction:column;min-width:0}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-card-h b{font:var(--g-disp-w) 20px/1.2 var(--k-disp);letter-spacing:.03em;color:var(--k-ink)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-card-h small{font:600 13px/1.35 Lora,Georgia,serif;color:var(--k-ink2)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-card-r{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.3}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-card-r>:is(img,.ico){width:20px!important;height:20px!important;margin:0;flex:none}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .g-card-r>b{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--g-num);white-space:nowrap}

/* ---------- THE POPUPS, ONE FAMILY (ev_talk "cook"). Each keeps its look's frame; inside, the same pieces: the picture in a lit cell, the name in
   the title face, plain lines, the look's one action colour on what you point at, readable numbers. ---------- */
/* the confirm (popup() in eastscape.html: #pop .pop-card): its picture in a lit cell beside the title */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .pop-card .pop-ico{width:44px;height:44px;place-items:center;background:var(--g-cell-lit);box-shadow:inset 0 0 0 1px var(--g-cell-lit-line),var(--g-cell-sh);filter:none}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .pop-card .pop-ico :is(img,.ico){width:32px!important;height:32px!important;filter:none}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .pop-card .pop-ico .pop-emo{font-size:24px}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .pop-card .pop-ico:empty{display:none}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .pop-card #popText{font:400 15px/1.5 Lora,Georgia,serif;color:var(--k-ink)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) .pop-card #popText b{color:var(--k-ink);font-weight:700}
/* the conversation (#dlg): the face in a lit cell, the role in plain ink (gold is money), what they do as lit cells with big pictures, the key
   numbers readable, the pointed-at thing in the action colour */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg{--dl-acc:var(--g-sel)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-face{border-color:var(--g-cell-lit-line);border-radius:0;background:var(--g-tile);box-shadow:var(--g-cell-sh)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-role{font:600 12px/1.35 Lora,Georgia,serif;letter-spacing:.1em;color:var(--k-ink2)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-tile.dlg-tile{border-radius:0;background:var(--g-tile);box-shadow:inset 0 0 0 1px var(--g-cell-lit-line),var(--g-cell-sh);font:600 15px/1.25 Lora,Georgia,serif;color:var(--k-ink)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-tile.dlg-tile:is(:hover,:focus-visible){background:var(--g-tile);box-shadow:inset 0 0 0 2px var(--g-sel),0 0 12px var(--g-sel-glow)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-t-i,html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-t-i :is(img,.ico){width:48px;height:48px}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-tile small{font:600 13px/1.3 Lora,Georgia,serif;color:var(--k-ink2)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg :is(.dlg-q,.dlg-tile,.dlg-lk) kbd{font:700 12px/1 Lora,Georgia,serif;color:var(--k-ink2)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-lk{border-radius:0;font:600 15px/1.2 Lora,Georgia,serif;color:var(--k-ink)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-lk:is(:hover,:focus-visible){box-shadow:inset 0 0 0 2px var(--g-sel)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-q-t small{font:600 13px/1.3 Lora,Georgia,serif;color:var(--k-ink2)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) #dlg .dlg-mine{font:600 13px/1.3 Lora,Georgia,serif;color:var(--k-ink2)}
/* the right-click menu (.bagmenu, .bk-menu: eastscape-bag.js, eastscape-bank.js): the thing in a lit cell at the top, a row a choice (36px) with
   its 20px icon, the pointed-at row in the action colour, Drop last in the danger ink */
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) body :is(.bagmenu-h,.bk-menu-h)>.ico{width:40px!important;height:40px!important;padding:4px;box-sizing:border-box;flex:none;margin:0;background:var(--g-cell-lit);box-shadow:inset 0 0 0 1px var(--g-cell-lit-line),var(--g-cell-sh);object-fit:contain}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) body :is(.bagmenu-h,.bk-menu-h) b{font:var(--g-disp-w) 15px/1.2 var(--k-disp);letter-spacing:.03em;color:var(--k-ink)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) body :is(.bagmenu,.bk-menu)>button{min-height:36px;font-size:15px}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) body :is(.bagmenu,.bk-menu)>button:is(:hover,:focus-visible){background:var(--g-row-on);box-shadow:inset 3px 0 0 var(--g-sel);outline:none}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) body .bagmenu>button.bm-drop{color:var(--g-bad)}
html:is([data-ui-theme="midnight"],[data-ui-theme="tavern"]) body .bagmenu-u :is(small,em){color:var(--k-ink2)}

/* ---------- READABLE KEY NUMBERS (rd_audit): the campfire card's burn chance was pale orange on the Tavern's parchment ---------- */
html[data-ui-theme="tavern"] body #craftWin[data-st="cook"] :is(.ck-ember,.ck-vs em){color:var(--g-warn)!important}
html[data-ui-theme="tavern"] body #craftWin[data-st="cook"] .ck-vs>span:last-child em{color:var(--g-good)!important}
/* (end of THE SHARED GRAMMAR) */