/* PixieLords menus: moonglass and briar. src/menuui.js builds the parts, src/menu.js the screens.
   One frame for every screen: title and place (top left), tabs (top), what you carry (top right), the body,
   a line of help for the chosen thing and the keys (bottom). Panes are dark moonglass with notched corners and
   a sprig of briar; the chosen row is lit by a moonbeam and marked by a sliding crescent. */
:root{
  --mx-line:rgba(206,214,238,.15); --mx-line2:rgba(206,214,238,.32);
  --mx-text:#eef1fa; --mx-sub:#a7afc6; --mx-faint:#6b7490;
  --mx-rose:#f2b8ff; --mx-cyan:#8fe8ff; --mx-gold:#ecca78; --mx-red:#ff7d6e; --mx-green:#9fe6a8;
  --f-disp:'Alegreya SC',Georgia,serif; --f-ui:'Alegreya Sans',system-ui,sans-serif; --f-lore:'Alegreya',Georgia,serif;
  --mx-frost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .85 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --mx-briar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23cfd6ea' stroke-linecap='round'%3E%3Cpath stroke-opacity='.55' d='M1.5 62V15.5L15.5 1.5H62'/%3E%3Cpath stroke-opacity='.4' d='M5 50c5-3 6-10 2-14 5 0 9-5 8-11 5 2 10-1 11-7-1 6 3 10 9 10'/%3E%3Cpath stroke-opacity='.4' d='M6 40l-3 .5M10 30l2.5-1.5M15 22l1 2.5M22 14l-.5-3M30 12l2 2'/%3E%3C/g%3E%3Cpath d='M40 6.5a4.5 4.5 0 1 0 4 6.6 3.6 3.6 0 0 1-4-6.6z' fill='%23f2b8ff' fill-opacity='.85'/%3E%3Ccircle cx='9' cy='53' r='1.3' fill='%23f2b8ff' fill-opacity='.6'/%3E%3C/svg%3E");
}
#menu{position:fixed;inset:0;display:none;z-index:20;color:var(--mx-text);font-family:var(--f-ui);-webkit-font-smoothing:antialiased}
#menu.on{display:block}
#menu::before{content:'';position:absolute;inset:0;pointer-events:none}
/* Backdrops: the world in view (hubs), the world veiled (lists and sheets), the map. */
#menu.world::before{background:linear-gradient(90deg,rgba(5,6,12,.94) 0,rgba(5,6,12,.8) 32%,rgba(5,6,12,.22) 60%,rgba(5,6,12,.5)),radial-gradient(ellipse at 65% 50%,transparent 45%,rgba(0,0,0,.45))}
#menu.veil::before{background:rgba(5,6,12,.74);backdrop-filter:blur(6px) saturate(.75)}
#menu.map::before{background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(5,6,12,.6))}
#menu.plain::before{background:rgba(5,6,12,.9)}

.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

/* ---------------- the frame */
.mx{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);padding:2.4vh 3vw 0}
.mx-top{display:flex;align-items:center;gap:18px;min-height:62px;min-width:0;position:relative;z-index:2}
.mx-title{display:flex;align-items:center;gap:14px;min-width:0;flex:0 1 auto} .mx-title > div{min-width:0}
.mx-sigil{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--mx-rose);background:radial-gradient(circle,rgba(242,184,255,.16),rgba(10,12,22,.8) 70%);box-shadow:inset 0 0 0 1px var(--mx-line2),0 0 0 4px rgba(8,10,18,.7),0 0 0 5px var(--mx-line)}
.mx-sigil .ico{width:24px;height:24px}
.mx-title h1{margin:0;font:700 clamp(24px,2.2vw,32px)/1 var(--f-disp);letter-spacing:.04em;color:var(--mx-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.mx-title small{display:block;margin-top:5px;font:italic 400 clamp(14px,1.15vw,17px) var(--f-lore);color:var(--mx-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.mx-spine{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;overflow:hidden}
.mx-spine > kbd{margin:0 6px}
.mx-tab{position:relative;flex:none;display:flex;align-items:center;gap:8px;height:40px;padding:0 7px;border:0;background:none;color:var(--mx-faint);cursor:pointer;border-radius:20px;transition:color .12s,background .12s}
.mx-tab .ico{width:21px;height:21px}
.mx-tab span{display:none;font:700 16px var(--f-disp);letter-spacing:.03em;white-space:nowrap}
.mx-tab:hover{color:var(--mx-text)}
.mx-tab.on{color:#fff;background:linear-gradient(180deg,rgba(242,184,255,.2),rgba(242,184,255,.05));box-shadow:inset 0 0 0 1px rgba(242,184,255,.5),0 0 20px rgba(242,184,255,.16);padding:0 16px 0 12px}
.mx-tab.on .ico{color:var(--mx-rose)}
.mx-tab.on span{display:inline}
.mx-tab .bd,.mx-sub .bd{position:absolute;right:0;top:1px;min-width:15px;height:15px;padding:0 3px;box-sizing:border-box;border-radius:8px;background:var(--mx-rose);color:#1d1026;font:700 10px/15px var(--f-ui);text-align:center;font-style:normal}
.mx-chips{display:flex;gap:8px;margin-left:auto;flex:none}
.mx-chip{display:flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:16px;background:rgba(8,10,18,.72);box-shadow:inset 0 0 0 1px var(--mx-line);font:500 14px var(--f-ui);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.mx-chip .ico{width:16px;height:16px}
.mx-chip b{font-weight:500;color:var(--mx-text)}
.mx-chip.glim{color:var(--mx-gold)} .mx-chip.petal{color:#ffb8e0} .mx-chip.cup{color:var(--mx-cyan)} .mx-chip.lvl{color:var(--mx-rose)} .mx-chip.steel{color:#c8d8f0}
.mx-body{position:relative;min-height:0;display:flex;gap:16px;padding:1.4vh 0 1.2vh}
.mx-foot{position:relative;display:flex;align-items:center;gap:24px;min-height:56px;padding:4px 0 2vh;z-index:2}
.mx-foot::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--mx-line2) 15%,var(--mx-line2) 85%,transparent)}
.mx-help{flex:1;min-width:0;font:italic 400 clamp(15px,1.2vw,18px)/1.35 var(--f-lore);color:#d9deef;text-shadow:0 1px 3px #000;transition:opacity .12s}
.nkeys{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:70%}
.nk{display:flex;align-items:center;gap:7px;background:none;border:0;color:var(--mx-sub);font:500 15px var(--f-ui);cursor:pointer;white-space:nowrap;padding:0}
.nk:hover span{color:var(--mx-text)} .nk[disabled]{opacity:.35;cursor:default}
kbd.k{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border-radius:6px;background:linear-gradient(180deg,#262b40,#12141f);box-shadow:inset 0 0 0 1px rgba(206,214,238,.34),inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 #05060b;font:700 12px var(--f-ui);color:#eef1fa;white-space:nowrap}
kbd.k.xb,kbd.k.ps{border-radius:12px;min-width:26px}
kbd.k.xb.confirm{color:#6fd06f} kbd.k.xb.back{color:#ec6166} kbd.k.xb.mAlt{color:#eccb52} kbd.k.xb.mAlt2{color:#5aa4f0}
kbd.k.ps.confirm{color:#7faaf6} kbd.k.ps.back{color:#ec6a70} kbd.k.ps.mAlt{color:#5fd4b6} kbd.k.ps.mAlt2{color:#ec8ac8}
.mx-moonmark{position:absolute;right:-10vw;top:46%;width:min(84vh,52vw);transform:translateY(-50%);opacity:.1;pointer-events:none;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
.mxmoon{display:block;width:100%;height:auto}
.mxmoon .dark{fill:rgba(40,46,70,.5)} .mxmoon .lit{fill:#e9eeff} .mxmoon .rim{fill:none;stroke:rgba(233,238,255,.7);stroke-width:.4}

/* ---------------- moonglass */
.mx-panel{position:relative;display:flex;flex-direction:column;min-height:0;padding:8px 0;background:var(--mx-frost),linear-gradient(180deg,rgba(19,22,40,.9),rgba(8,10,19,.92));box-shadow:inset 0 0 0 1px var(--mx-line),inset 0 1px 0 rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.4);clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px)}
.mx-panel .orn{position:absolute;width:60px;height:60px;pointer-events:none;background:var(--mx-briar) no-repeat;background-size:contain;z-index:1}
.mx-panel .orn.tl{left:0;top:0} .mx-panel .orn.br{right:0;bottom:0;transform:rotate(180deg)}
.mx-ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 4px;padding:6px 22px 10px 40px;border-bottom:1px solid var(--mx-line);font:700 17px var(--f-disp);letter-spacing:.03em;color:var(--mx-sub)}
.mx-ph em{font:italic 400 15px var(--f-lore);color:var(--mx-faint)}

/* ---------------- lists */
.mx-list{position:relative;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1 1 auto;padding:2px 0;scroll-padding-block:44px;scrollbar-width:thin;scrollbar-color:rgba(206,214,238,.22) transparent}
.mx-list.more,.mx-scroll.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 48px),transparent);mask-image:linear-gradient(#000 calc(100% - 48px),transparent)}
.mx-list.less,.mx-scroll.less{-webkit-mask-image:linear-gradient(transparent,#000 36px);mask-image:linear-gradient(transparent,#000 36px)}
.mx-list.less.more,.mx-scroll.less.more{-webkit-mask-image:linear-gradient(transparent,#000 36px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(transparent,#000 36px,#000 calc(100% - 48px),transparent)}
.mx-cursor{position:absolute;left:11px;top:0;width:18px;height:18px;color:var(--mx-rose);filter:drop-shadow(0 0 6px rgba(242,184,255,.85));transition:transform .14s cubic-bezier(.2,.8,.2,1),opacity .12s;opacity:0;pointer-events:none;z-index:2}
.mx-cursor .ico{width:18px;height:18px;fill:currentColor;stroke:none}
.mx-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;margin:0;padding:9px 18px 9px 40px;border:0;background:none;color:var(--mx-text);text-align:left;cursor:pointer;font:400 17px var(--f-ui)}
.mx-row::after{content:'';position:absolute;left:34px;right:14px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--mx-line) 10%,var(--mx-line) 90%,transparent)}
.mx-row .ri{width:24px;display:grid;place-items:center;color:var(--mx-sub)}
.mx-row .ri .ico{width:21px;height:21px}
.mx-row .rm{min-width:0}
.mx-row .rm b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-row .rm small{display:block;margin-top:1px;font:italic 400 14px/1.3 var(--f-lore);color:var(--mx-sub)}
.mx-row .rr{font:500 15px var(--f-ui);color:var(--mx-sub);font-variant-numeric:lining-nums tabular-nums;text-align:right;white-space:nowrap}
.mx-row .tag{margin-left:8px;padding:1px 6px;border-radius:3px;background:rgba(242,184,255,.14);color:var(--mx-rose);font:700 10px/1.5 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;font-style:normal;vertical-align:2px}
.mx-row .tag.gold{background:rgba(236,202,120,.14);color:var(--mx-gold)} .mx-row .tag.dim{background:rgba(206,214,238,.1);color:var(--mx-sub)}
.mx-row.focus{background:linear-gradient(100deg,transparent 0,rgba(242,184,255,.16) 4%,rgba(170,186,255,.07) 55%,transparent 100%)}
.mx-row.focus::before{content:'';position:absolute;left:30px;right:12%;top:0;height:1px;background:linear-gradient(90deg,rgba(242,184,255,.55),transparent)}
.mx-row.focus::after{background:linear-gradient(90deg,rgba(242,184,255,.55),transparent 88%)}
.mx-row.focus .ri{color:var(--mx-rose)} .mx-row.focus .rm b{color:#fff}
.mx-row:hover:not(.focus):not([disabled]){background:rgba(206,214,238,.04)}
.mx-row[disabled]{opacity:.38;cursor:default}
.mx-row.sold,.mx-row.dimmed{opacity:.5} .mx-row.dimmed.focus,.mx-row.sold.focus{opacity:.8}
.mx-row .rr.short{color:var(--mx-red)} .mx-row .rr .petal{color:#ffb8e0}
.mx-list.hubl .mx-row{padding:6px 18px 6px 46px;gap:14px}
.mx-list.hubl .mx-row .rm b{font:500 clamp(20px,1.85vw,26px)/1.2 var(--f-disp);letter-spacing:.015em}
.mx-list.hubl .mx-row .ri .ico{width:23px;height:23px}
.mx-list.hubl .mx-row .rr{font:italic 400 15px var(--f-lore)}
.mx-list.hubl .mx-cursor{left:14px}
.mx-list.dense .mx-row{padding-top:3px;padding-bottom:3px} .mx-list.dense .mx-row .rm b{font-size:clamp(19px,1.7vw,23px)}
.mx-row .rr .ico{display:inline-block;width:15px;height:15px;vertical-align:-2px}
.mx-div{position:relative;padding:14px 22px 4px 40px;font:700 14px var(--f-disp);letter-spacing:.05em;color:var(--mx-faint)}
.mx-empty{padding:18px 40px;font:italic 16px/1.5 var(--f-lore);color:var(--mx-sub)}

/* ---------------- pages within a screen */
.mx-sub{display:flex;align-items:center;gap:6px;padding:2px 12px 8px 18px;border-bottom:1px solid var(--mx-line);margin-bottom:4px}
.mx-sub .st{flex:1;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.mx-sub .st button{position:relative;flex:none;display:flex;align-items:center;gap:6px;padding:7px 11px;border:0;border-bottom:2px solid transparent;background:none;color:var(--mx-faint);font:500 15px var(--f-ui);cursor:pointer;white-space:nowrap}
.mx-sub .st button .ico{width:18px;height:18px}
.mx-sub .st button:hover{color:var(--mx-text)}
.mx-sub .st button.on{color:var(--mx-text);border-bottom-color:var(--mx-rose)}
.mx-sub .st button.on .ico{color:var(--mx-rose)}
.mx-sub .st button .bd{top:-1px;right:-2px}

/* ---------------- a chosen thing in full */
.mx-detail{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 26px 16px 40px;scrollbar-width:thin;scrollbar-color:rgba(206,214,238,.22) transparent}
.mx-kick{display:flex;justify-content:space-between;gap:10px;font:500 14px var(--f-ui);color:var(--mx-sub)}
.mx-detail h3{margin:4px 0 2px;font:700 clamp(22px,2vw,28px)/1.15 var(--f-disp);letter-spacing:.01em}
.mx-detail .sub{font:italic 400 16px/1.35 var(--f-lore);color:var(--mx-sub);margin-bottom:10px}
.mx-cmp{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;margin:6px 0 2px;border-top:1px solid var(--mx-line);border-bottom:1px solid var(--mx-line);font:500 16px var(--f-ui);color:var(--mx-sub)}
.mx-cmp .now{font:700 30px var(--f-ui);color:var(--mx-text);font-variant-numeric:lining-nums tabular-nums}
.mx-cmp .was{font:500 18px var(--f-ui);color:#8fb6ff} .mx-cmp .up{color:#7fe3ff;font-weight:700} .mx-cmp .down{color:var(--mx-red);font-weight:700} .mx-cmp .same{color:var(--mx-faint)}
.mx-sec{display:flex;align-items:center;gap:12px;margin:16px 0 6px;font:700 14px var(--f-disp);letter-spacing:.05em;color:var(--mx-sub)}
.mx-sec::before,.mx-sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--mx-line2))}
.mx-sec::after{background:linear-gradient(270deg,transparent,var(--mx-line2))}
.mx-fx{display:flex;justify-content:space-between;gap:12px;padding:5px 2px;font:400 16px/1.35 var(--f-ui);color:var(--mx-green);border-bottom:1px solid rgba(206,214,238,.06)}
.mx-fx.set{color:var(--mx-cyan)} .mx-fx.off{color:var(--mx-faint)} .mx-fx.warn{color:var(--mx-red)} .mx-fx.plain{color:var(--mx-text)}
/* Moonsworn (gear.js SWORN): a Moonlit or Divine piece's own effect, in moon-gold. Scaling grades as small seals. */
.mx-fx.relic{color:#ffb070;background:linear-gradient(90deg,rgba(255,154,60,.14),transparent);box-shadow:inset 2px 0 #ff9a3c} .mx-fx.relic b{font-weight:600;letter-spacing:.04em}
.mx-fx.sworn{color:var(--mx-gold);background:linear-gradient(90deg,rgba(236,202,120,.12),transparent);box-shadow:inset 2px 0 var(--mx-gold)} .mx-fx.sworn b{font-weight:600;letter-spacing:.04em}
.mx-fx .gr{display:inline-block;min-width:1.4em;text-align:center;margin-left:4px;border-radius:3px;font:700 12px/1.5 var(--f-ui);background:rgba(206,214,238,.12);color:var(--mx-text)}
.mx-fx .gr.gS{background:rgba(236,202,120,.3);color:var(--mx-gold)} .mx-fx .gr.gA{background:rgba(143,232,255,.22);color:var(--mx-cyan)} .mx-fx .gr.gB{background:rgba(160,220,140,.2);color:#b8e8a0} .mx-fx .gr.gE,.mx-fx .gr.gD{color:var(--mx-faint)}
.mx-fx .ico,.mx-stats .ico{display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-right:3px}
.mx-fx .v{color:var(--mx-text);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.mx-note{margin-top:12px;font:italic 400 16px/1.45 var(--f-lore);color:var(--mx-sub)}
.mx-lore{font:italic 400 17px/1.6 var(--f-lore);color:#dfe3f2;white-space:pre-line}
.mx-stats{padding:0 22px 4px 40px}
.mx-stats .s{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid rgba(206,214,238,.07);font:400 16px var(--f-ui)}
.mx-stats .s:last-child{border-bottom:0}
.mx-stats .s span{color:var(--mx-sub)} .mx-stats .s b{font-weight:500;text-align:right;font-variant-numeric:lining-nums tabular-nums}
.mx-stats .s.gold b{color:var(--mx-gold)} .mx-stats .s.petal b{color:#ffb8e0} .mx-stats .s.cyan b{color:var(--mx-cyan)} .mx-stats .s.rose b{color:var(--mx-rose)}
.mx-detail .mx-stats{padding:0}
.mx-meter{display:block;height:4px;border-radius:2px;background:rgba(206,214,238,.12);overflow:hidden}
.mx-meter u{display:block;height:100%;background:linear-gradient(90deg,#a98aff,var(--mx-rose));text-decoration:none}
.mx-meter.gold u{background:linear-gradient(90deg,#b8924a,var(--mx-gold))}
.swatch{display:inline-block;width:16px;height:16px;border-radius:3px;vertical-align:-3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 1px rgba(0,0,0,.6)}
.mx-row .ri .swatch{width:18px;height:18px}
.dyebig{height:58px;margin:10px 0 4px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 24px rgba(0,0,0,.35)}

/* ---------------- options (settings, the Wardrobe) */
.mx-opt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,46%);align-items:center;gap:12px;width:100%;padding:11px 22px 11px 40px;border:0;background:none;color:var(--mx-text);text-align:left;cursor:pointer;font:400 18px var(--f-ui)}
.mx-opt::after{content:'';position:absolute;left:34px;right:14px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--mx-line) 10%,var(--mx-line) 90%,transparent)}
.mx-opt .ov{display:grid;grid-template-columns:26px minmax(0,1fr) 26px;grid-template-rows:auto auto;align-items:center;text-align:center}
.mx-opt .ov b{grid-column:2;display:flex;align-items:center;justify-content:center;gap:8px;font:500 17px var(--f-ui);white-space:nowrap;overflow:hidden}
.mx-opt .arr{grid-row:1/3;display:grid;place-items:center;color:var(--mx-faint);cursor:pointer} .mx-opt .arr:last-of-type{grid-column:3}
.mx-opt .arr .ico{width:18px;height:18px} .mx-opt .arr .ico.l{transform:scaleX(-1)}
.mx-opt .pips{grid-column:2;display:flex;justify-content:center;gap:5px;margin-top:6px} .mx-opt .pips i{width:5px;height:5px;border-radius:50%;background:rgba(206,214,238,.25)} .mx-opt .pips i.on{background:var(--mx-rose);box-shadow:0 0 6px var(--mx-rose)}
.mx-opt .meter{grid-column:2;display:block;height:3px;margin:8px 14px 0;background:rgba(206,214,238,.14)} .mx-opt .meter u{display:block;height:100%;background:var(--mx-rose);text-decoration:none}
.mx-opt.focus{background:linear-gradient(100deg,transparent 0,rgba(242,184,255,.16) 4%,rgba(170,186,255,.07) 60%,transparent 100%)}
.mx-opt.focus::after{background:linear-gradient(90deg,rgba(242,184,255,.55),transparent 88%)}
.mx-opt.focus .arr{color:var(--mx-rose)}

/* ---------------- layouts */
/* Hub: a list at the left, the world in view, a card at the bottom right. */
.hub .mx-left{width:min(560px,44vw);display:flex;flex-direction:column;justify-content:center;min-height:0}
.hub .mx-left > .mx-panel{max-height:100%}
.hub .mx-left > .mx-list{flex:0 1 auto}
.hub .mx-card{position:absolute;right:0;bottom:1.2vh;width:min(420px,32vw)}
.hub .mx-card.tall{top:1.4vh;bottom:auto;max-height:calc(100% - 2.6vh)}
/* Browse: a list and the chosen thing in full. */
.browse .mx-body > .lst{width:min(500px,40vw);flex:none}
.browse .mx-body > .det{flex:1 1 auto;max-width:860px}
/* Sheet: one wide pane. */
.sheet .mx-body{justify-content:center}
.sheet .mx-body > .sht{width:min(980px,94vw)}
/* Side: one pane at the left, the knight in view. */
.side .mx-body > .mx-panel{width:min(560px,46vw)}
/* Dialog and ceremony: centred. */
.dialog .mx-body,.result .mx-body{align-items:center;justify-content:center}
.dialog .mx-body > .mx-panel{width:min(560px,92vw)}
.mx-ceremony{width:min(760px,92vw);text-align:center;padding:26px 40px 24px}
.mx-ceremony .kick{font:700 15px var(--f-disp);letter-spacing:.08em;color:var(--mx-rose)}
.mx-ceremony h2{margin:8px 0 12px;font:800 clamp(30px,3.8vw,52px)/1.08 var(--f-disp);letter-spacing:.03em}
.mx-ceremony .mx-lore{max-width:620px;margin:0 auto}
.mx-figs{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 34px;margin:18px 0 8px}
.mx-figs small{display:block;font:500 13px var(--f-ui);color:var(--mx-sub)}
.mx-figs b{font:700 24px var(--f-ui);font-variant-numeric:lining-nums tabular-nums}
.mx-ceremony .mx-list{margin:12px auto 0;max-width:460px;text-align:left}

/* Entrances: only when a screen first opens or a tab turns (the menu carries .enter then). */
#menu.enter .mx-top,#menu.enter .mx-foot{animation:mxFade .2s ease-out both}
#menu.enter .mx-panel{animation:mxRise .24s cubic-bezier(.2,.8,.2,1) both}
#menu.enter .mx-panel + .mx-panel{animation-delay:.04s}
#menu.enter .mx-row,#menu.enter .mx-opt{animation:mxRow .26s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n,0) * 14ms)}
#menu.enter .mx-moonmark{animation:mxMoon .8s ease-out both}
.mx-detail.fresh{animation:mxFade .14s ease-out}
@keyframes mxFade{from{opacity:0}to{opacity:1}}
@keyframes mxRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mxRow{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes mxMoon{from{opacity:0;transform:translateY(-50%) scale(.96)}to{opacity:.1;transform:translateY(-50%)}}

/* ---------------- title */
.titlescreen .mx-top{visibility:hidden}
.mx-logo{position:absolute;left:0;top:4vh}
.mx-logo h1{margin:0;font:800 clamp(52px,6.6vw,96px)/.95 var(--f-disp);letter-spacing:.06em;color:#f3f5ff;text-shadow:0 0 40px rgba(170,186,255,.25),0 4px 20px rgba(0,0,0,.6)}
.mx-logo h1 i{font-style:normal;color:var(--mx-rose)}
.mx-logo p{margin:10px 0 0 4px;font:italic 400 clamp(17px,1.5vw,22px) var(--f-lore);color:#c9cfe4}
.mx-logo .tonight{display:flex;align-items:center;gap:10px;margin:14px 0 0 4px;font:italic 400 16px var(--f-lore);color:var(--mx-sub)}
.mx-logo .tonight .mxmoon{width:22px;height:22px}
.titlescreen .mx-left{justify-content:flex-end;padding-bottom:1vh}
.mx-loading{margin:0 0 14px 40px;width:min(360px,70%)}
.mx-loading small{display:block;margin-top:6px;font:italic 14px var(--f-lore);color:var(--mx-sub)}

/* ---------------- screen-specific pieces, in the same hand */
.grave-card .mx-ph{color:#ff9a9a} .grave-card{box-shadow:inset 0 0 0 1px rgba(255,120,120,.28),0 0 60px rgba(255,40,40,.1)}
.grave-card h3{color:#ffe4dc;text-shadow:0 0 16px rgba(255,60,60,.4)}
.kin-card .mx-ph{color:#9fdcff} .kin-card{box-shadow:inset 0 0 0 1px rgba(130,210,255,.28),0 0 60px rgba(60,160,255,.1)}
.kin-card h3{color:#e8f6ff;text-shadow:0 0 16px rgba(80,170,255,.4)}
.lvl-top{display:flex;justify-content:space-around;padding:4px 30px 12px;border-bottom:1px solid var(--mx-line);margin-bottom:4px}
.lvl-top small{display:block;font:500 13px var(--f-ui);color:var(--mx-sub);text-align:center}
.lvl-top b{display:block;font:700 26px var(--f-ui);text-align:center;font-variant-numeric:lining-nums tabular-nums} .lvl-top .short{color:var(--mx-red)} .lvl-top i{font-style:normal;color:var(--mx-rose)}
.lrow .rm b{font:500 20px var(--f-disp)} .lrow .rr{display:flex;gap:26px;align-items:center} .lrow .rr .val{font:700 18px var(--f-ui);color:var(--mx-text)} .lrow .rr .gain{color:var(--mx-green);min-width:170px;text-align:right}
.kbgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding:4px 30px 10px 40px}
.kbgrid h4{grid-column:1/-1;margin:14px 0 4px;font:700 15px var(--f-disp);letter-spacing:.04em;color:var(--mx-rose)}
.kbrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 2px;border-bottom:1px solid rgba(206,214,238,.07);font:400 16px var(--f-ui)}
.kbrow kbd.k{margin-left:4px} .kbrow i{font-style:normal;color:var(--mx-faint);font-size:12px;margin:0 3px}
.mx-table{width:calc(100% - 70px);margin:4px 30px 10px 40px;border-collapse:collapse;font:400 15px var(--f-ui)}
.mx-table th{text-align:left;font:700 14px var(--f-disp);color:var(--mx-sub);padding:6px 8px;border-bottom:1px solid var(--mx-line2)}
.mx-table td{padding:7px 8px;border-bottom:1px solid rgba(206,214,238,.07);vertical-align:top} .mx-table td:first-child{color:var(--mx-rose);white-space:nowrap}
.mx-tips{padding:2px 34px 12px 40px;columns:2;column-gap:40px}
.mx-tips p{margin:0 0 12px;break-inside:avoid;font:400 15px/1.5 var(--f-ui);color:#cfd4e6} .mx-tips b{font:700 16px var(--f-disp);color:var(--mx-rose)}
svg.pad{display:block;width:calc(100% - 60px);margin:4px 30px 0;height:auto} svg.pad text{font-family:var(--f-ui);fill:#e6eaf6} svg.pad .lbl{font-size:17px;font-weight:500} svg.pad .note{font-size:13px;fill:#9aa3bd} svg.pad .fb{font:700 12px var(--f-ui)} svg.pad .fs{font:700 10px var(--f-ui);fill:#e6eaf6}
/* How to Play (menu.js guide): prose, the beat of a chain drawn out, and the knight's own chains. */
.mx-guide{padding:4px 40px 10px 44px;max-width:1000px}
.mx-guide p{margin:0 0 13px;font:400 15.5px/1.6 var(--f-ui);color:#cfd4e6}
.mx-guide b{color:#eef1fa;font-weight:700} .mx-guide i{color:var(--mx-rose);font-style:italic}
.mx-guide h4{margin:18px 0 8px;font:700 17px var(--f-disp);letter-spacing:.06em;color:#ffb89a}
.mx-guide kbd.k{margin:0 2px;vertical-align:1px}
.gbeat{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:4px 0 16px;padding:10px 14px;border-radius:12px;background:rgba(143,232,255,.06);box-shadow:inset 0 0 0 1px rgba(143,232,255,.2)}
.gbeat span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:16px;background:rgba(9,11,20,.8);font:700 12px var(--f-disp);letter-spacing:.08em;color:#dfe5f4}
.gbeat span.now{color:#8fe8ff;box-shadow:0 0 0 1.5px rgba(143,232,255,.7),0 0 12px rgba(143,232,255,.35)}
.gbeat span.fin{color:#ffe8a8;box-shadow:0 0 0 1.5px rgba(255,210,122,.7)}
.gbeat i{font:italic 12px var(--f-lore);color:var(--mx-sub)} .gbeat i:empty::before{content:'→';font-style:normal;color:rgba(206,214,238,.5)}
.gbeat.bad{background:rgba(255,120,90,.06);box-shadow:inset 0 0 0 1px rgba(255,120,90,.3)} .gbeat.bad span{color:#ff9a7a;text-decoration:line-through;text-decoration-color:rgba(255,120,90,.6)} .gbeat.bad i{color:#ff9a7a}
.mx-version{position:absolute;right:30px;bottom:64px;font:500 12px var(--f-ui);letter-spacing:.08em;color:rgba(206,214,238,.45);pointer-events:none}
.mx-logo h1 .demo{display:inline-block;margin-left:14px;padding:2px 10px;border-radius:10px;vertical-align:middle;font:700 16px var(--f-disp);letter-spacing:.14em;color:#ffd27a;box-shadow:inset 0 0 0 1px rgba(255,210,122,.6)}
.mx-guide.credits p.lic{font-size:12.5px;line-height:1.45;color:#9aa3bd}
.sht > .mx-list.gmore{flex:0 0 auto;margin:2px 0 4px;border-top:1px solid var(--mx-line)}
.mx-table.gchain{margin:6px 0 14px;width:100%} .mx-table.gchain td:first-child{white-space:nowrap;color:var(--mx-sub);width:1%;padding-right:18px}
.mx-scroll{overflow-y:auto;min-height:0;flex:1 1 auto;scrollbar-width:thin;scrollbar-color:rgba(206,214,238,.22) transparent}
.forms3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0 24px 0 30px}
.forms3 .form{padding:6px 14px 10px;border-right:1px solid var(--mx-line)} .forms3 .form:last-child{border-right:0}
.forms3 .fh{display:flex;align-items:center;gap:8px;margin-bottom:6px} .forms3 .fh .ico{width:18px;height:18px} .forms3 .fh b{font:700 18px var(--f-disp)} .forms3 .fh small{color:var(--mx-sub);font:italic 14px var(--f-lore)}
.forms3 .high .fh .ico{color:#ffb070} .forms3 .mid .fh .ico{color:var(--mx-cyan)} .forms3 .low .fh .ico{color:var(--mx-green)}
.forms3 p,.kit p{margin:5px 0;font:400 15px/1.45 var(--f-ui);color:#d4d9ea} .forms3 p em,.kit p em{display:block;font:700 13px var(--f-disp);font-style:normal;letter-spacing:.03em;color:var(--mx-sub)}
.kit{padding:6px 34px 12px 44px;border-top:1px solid var(--mx-line);margin-top:8px}
.tree{display:flex;flex-direction:column;gap:8px;padding:4px 24px 12px 30px}
.srow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.btn.skill{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:92px;padding:10px 12px;border:0;background:rgba(206,214,238,.04);box-shadow:inset 0 0 0 1px var(--mx-line);color:var(--mx-text);text-align:left;cursor:pointer;font:400 14px/1.4 var(--f-ui)}
.btn.skill b{font:700 16px var(--f-disp)} .btn.skill small{color:#c9cfe2;font-size:13px} .btn.skill .stag{margin-top:auto;font:700 11px var(--f-ui);letter-spacing:.06em;color:var(--mx-faint)}
.btn.skill.has{box-shadow:inset 0 0 0 1px rgba(236,202,120,.55)} .btn.skill.has .stag{color:var(--mx-gold)}
.btn.skill.can{box-shadow:inset 0 0 0 1px rgba(242,184,255,.5)} .btn.skill.can .stag{color:var(--mx-rose)}
.btn.skill.no{opacity:.55}
.btn.skill.focus{background:rgba(242,184,255,.12);box-shadow:inset 0 0 0 1px var(--mx-rose),0 0 18px rgba(242,184,255,.15)}
.mastery{display:flex;align-items:center;gap:14px;padding:4px 30px 10px 40px;font:500 14px var(--f-ui);color:var(--mx-sub)} .mastery .mx-meter{flex:1}
.parch{margin:6px 30px 12px 40px;padding:26px 32px;background:linear-gradient(170deg,#ddd0b0,#c4b08a);color:#2b1f12;box-shadow:inset 0 0 50px rgba(90,60,20,.35),0 12px 30px rgba(0,0,0,.5);font:italic 400 18px/1.7 var(--f-lore);white-space:pre-line;overflow-y:auto;min-height:0}
.lettertext{white-space:pre-line;font:italic 400 16px/1.6 var(--f-lore);color:#dfe3f2;padding:10px 0}

/* ---------------- the Fae Crossroads, over the map */
.owlabels{position:absolute;inset:0;pointer-events:none;z-index:1}
.owl{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:7px;padding:4px 11px 4px 8px;border:0;border-radius:14px;background:rgba(8,10,18,.78);box-shadow:inset 0 0 0 1px var(--mx-line2);color:var(--mx-text);font:500 14px var(--f-ui);white-space:nowrap;cursor:pointer}
.owl .n{font:700 13px var(--f-disp);color:var(--mx-faint)}
.owl:hover{background:rgba(20,22,38,.9)}
.owl.sel{box-shadow:inset 0 0 0 1px var(--mx-rose),0 0 16px rgba(242,184,255,.35);background:rgba(28,20,40,.9)} .owl.sel .n{color:var(--mx-rose)}
.owl.sealed{color:var(--mx-faint);font-style:italic}
.owl.cleared .n{color:var(--mx-gold)}
.owl .omen{margin-left:2px}
.owpanel{position:absolute;left:0;bottom:1.2vh;width:min(470px,92vw);max-height:calc(100% - 2.4vh)}
.owpanel .mx-detail{padding-top:10px}
.owpanel .mx-list{flex:none;margin-top:6px}
.owomen{margin:2px 0 8px;font:italic 400 16px var(--f-lore)}
.owtags{display:flex;flex-wrap:wrap;gap:6px 12px;margin:8px 0 2px;font:500 14px var(--f-ui);color:var(--mx-sub)}
.owtags .t{padding:1px 8px;border-radius:3px;background:rgba(206,214,238,.08)} .owtags .t.cleared{color:var(--mx-gold);background:rgba(236,202,120,.12)} .owtags .t.new,.owtags .t.inprogress{color:var(--mx-cyan);background:rgba(143,232,255,.1)}
.owfade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .7s;z-index:5}
.owfade.on{opacity:1}
#menu.leaving .owpanel,#menu.leaving .owlabels{opacity:0;pointer-events:none}

@media (max-width:820px){
  .mx{padding:2vh 16px 0}
  .mx-spine .mx-tab:not(.on){padding:0 5px} .mx-chips{display:none}
  .hub .mx-left{width:100%} .hub .mx-card{display:none}
  .browse .mx-body{flex-direction:column} .browse .mx-body > .lst{width:auto;height:44%} .browse .mx-body > .det{max-width:none}
  .side .mx-body > .mx-panel{width:100%}
  .forms3{grid-template-columns:1fr} .kbgrid{grid-template-columns:1fr} .mx-tips{columns:1}
  .nkeys{max-width:100%} .mx-help{display:none}
}

/* Rebinding a key: the row waits, lit, for the next key. */
.mx-row.capturing{background:linear-gradient(90deg,rgba(242,184,255,.16),rgba(242,184,255,.04) 70%,transparent)}
.mx-wait{font:italic 15px var(--f-lore);color:var(--mx-rose);animation:mxwait .9s ease-in-out infinite alternate}
@keyframes mxwait{from{opacity:.45}to{opacity:1}}

/* an interlude (story.js): the voices between the acts */
.mx-interlude .il-lines{text-align:left;max-height:56vh;overflow:auto;margin:4px 0 12px;padding:0 6px}
.mx-interlude .il-lines p{margin:0 0 10px;font:italic 400 16px/1.5 var(--f-lore);color:#dfe3f2}
.mx-interlude h2{margin:4px 0 10px}
.mx-interlude .il-lines b{display:block;font:700 12px var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--mx-rose);font-style:normal;margin-bottom:2px}

/* Interface size (Settings → Display, --ui): every menu but the Crossroads map (whose labels follow the 3D map) is
   drawn larger or smaller as a whole. */
#menu:not(.map) .mx{zoom:var(--ui,1)}