/* FF Adventure 改 — "Ivory Tables" (FFA's own ivory/cyan bevelled tables) with an icon rail and pixel art. */
:root{color-scheme:light;
  --iv:#fffff0;--cy:#cbfffe;--bev1:#ccccff;--bev2:#666699;--ink:#1d1d3a;--mute:#4d4d6e;--link:#2236a8;--pg:#eef0f8;--indigo:#1b1f6b;
  --rare:#a5520a;--magic:#2236a8;--up:#127a36;--dn:#b3261e;--badge:#c2321b;
  --pixel:'DotGothic16','MS Gothic','Osaka-Mono',monospace;
  --text:'BIZ UDPGothic','Yu Gothic UI','Meiryo','Hiragino Sans',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--pg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 0h1v1H0zM4 4h1v1H4z' fill='%23d7dbec'/%3E%3C/svg%3E");color:var(--ink);font:14px/1.6 var(--text)}
canvas{image-rendering:pixelated;display:block}
[hidden]{display:none!important}
.app{display:grid;grid-template-columns:96px minmax(0,1fr);min-height:100vh;max-width:1280px;margin:0 auto}

/* rail */
.rail{background:var(--indigo);padding:12px 8px;display:flex;flex-direction:column;gap:6px;border-right:3px double #8f93d6;position:sticky;top:0;height:100vh}
.rail .mark{font:18px/1.05 var(--pixel);color:var(--iv-fg,var(--iv));text-align:center;padding:6px 0 12px;border-bottom:1px dashed #4b50a8;margin-bottom:4px;letter-spacing:1px}
.rail .mark small{display:block;font:11px var(--text);color:#c6c9ff;letter-spacing:0;margin-top:4px}
/* WORDMARK-1: the "Still online" pixel wordmark (asset/logo-wordmark). 81px wide: borrows 4px of the rail padding each side. */
.rail .mark .wm{display:grid;justify-items:center;gap:5px;margin:0 -4px}.rail .mark .mk-txt{display:none}
.wm img{display:block;image-rendering:pixelated}.wm-w{display:flex;align-items:flex-start;gap:2px}
.wm-st{display:flex;align-items:center;gap:4px;font:10px/1 var(--pixel);color:#c6c9ff;letter-spacing:0}
.wm-cur{animation:wm-blink 1.1s steps(1) infinite}@keyframes wm-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wm-cur{animation:none}}
.rail a{position:relative;display:block;text-align:center;text-decoration:none;color:#e4e6ff;padding:8px 2px 7px;border:1px solid transparent}
.rail a canvas{margin:0 auto 4px}
.rail a b{display:block;font:15px/1.1 var(--pixel);font-weight:400}
.rail a small{display:block;font-size:10.5px;color:#c6c9ff}
.rail a:hover{background:#262b85}
.rail a.on{background:var(--cy);color:var(--ink);border-color:var(--bev2) var(--bev1) var(--bev1) var(--bev2)}
.rail a.on small{color:var(--mute)}
.rail a:focus-visible,.btn:focus-visible,.sel:focus-visible,.it:focus-visible,summary:focus-visible{outline:3px solid #946000;outline-offset:2px}
.badge{position:absolute;top:4px;right:12px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--badge);color:#fff;font:700 11px/18px var(--text);text-align:center}

.main{padding:14px;min-width:0}
.top{display:flex;align-items:end;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;border-bottom:3px double var(--bev2);padding:0 2px 10px;margin-bottom:12px}
.top h1{margin:0;font:26px/1 var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo));text-shadow:2px 2px 0 var(--ksh-c9cdf2,#c9cdf2)}
.top h1 small{font:12px var(--text);color:var(--mute);text-shadow:none;margin-left:6px}
.top .st{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--mute);flex-wrap:wrap}
.top .saved b{color:var(--up)}
#activity{font:13px var(--pixel);color:var(--indigo-fg,var(--indigo))}
.screen{display:none}.screen.on{display:block}
.notice{padding:8px 12px;background:var(--kbg-fff6dd,#fff6dd);color:var(--kfg-583f13,#583f13);border:1px solid #c9a24a;font-size:13px;margin:0 0 12px}
.notice:empty{display:none}
.notice.error{background:var(--kbg-fbe4de,#fbe4de);color:var(--kfg-732c20,#732c20);border-color:#b3261e}

/* building blocks */
.box{border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);background:var(--iv);margin-bottom:12px}
.box>h3{margin:0;background:var(--cy);font:700 13px var(--text);padding:5px 10px;border-bottom:1px solid var(--bev2);display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;white-space:nowrap}
.box>h3 span{font-weight:400;color:var(--mute);white-space:normal;margin-left:auto;text-align:right}
.pad{padding:10px 12px}.pad-x{padding:0 10px 10px}
.lead{margin:0 0 10px}
table{width:100%;border-collapse:separate;border-spacing:1px;background:var(--bev2-bg,var(--bev2));font-size:13px}
th{background:var(--cy);font-weight:700;padding:5px 8px;text-align:left;font-size:12px}
td{background:var(--iv);padding:5px 8px;vertical-align:top}
td.k{width:38%;color:var(--mute);font-size:12px}
.bar{position:relative;height:8px;background:var(--kbg-d4d6e8,#d4d6e8);border:1px solid var(--bev2);overflow:hidden;margin-top:3px}
.bar>b{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);transition:transform .45s ease}
.bar.hp>b{background:linear-gradient(#6ee08a,#2b9e4b)}.bar.xp>b{background:linear-gradient(#8fb4ff,#3a5fd0)}.bar.en>b{background:linear-gradient(#e8473a,#a11d16)}.bar.ms>b{background:linear-gradient(#ffe08a,#d39b12)}
.btn{display:inline-block;font:700 12px var(--text);background:linear-gradient(var(--kbg-fff,#fff),var(--kbg-dfe3f5,#dfe3f5));border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:7px 12px;color:var(--ink);cursor:pointer;min-height:34px;text-decoration:none;line-height:18px}
.btn:active,.btn.on{border-color:var(--bev2) var(--bev1) var(--bev1) var(--bev2);background:var(--cy)}
.btn.pri{background:linear-gradient(var(--kbg-e2fffe,#e2fffe),var(--kbg-9fe9e7,#9fe9e7))}
.btn.warn{color:var(--dn)}
.btn.small{padding:3px 10px;min-height:28px}
.btn:disabled{cursor:default;opacity:.55}
.btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.r-rare{color:var(--rare);font-weight:700}.r-magic{color:var(--magic);font-weight:700}.r-normal{color:var(--ink)}
.up{color:var(--up);font-weight:700}.dn{color:var(--dn);font-weight:700}
.mute{color:var(--mute);font-size:12px}
.tag{display:inline-block;font:700 10.5px var(--text);padding:0 5px;border:1px solid currentColor;margin-left:4px;vertical-align:1px;white-space:nowrap}
.tag.new{color:var(--kfg-b3261e,#b3261e)}.tag.kept{color:var(--up)}.tag.eq{color:var(--magic)}.tag.q{color:var(--rare)}
.tile{background:var(--kbg-dfe8ff,#dfe8ff);border:1px solid;border-color:var(--bev2) var(--bev1) var(--bev1) var(--bev2);padding:5px;display:inline-block}
.tile.dark{background:#232440}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tiles.two{grid-template-columns:1fr 1fr}
.stat{background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:7px 8px;min-width:0}
.stat b{display:block;font:22px/1.1 var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo));overflow-wrap:anywhere}
.stat span{font-size:11.5px;color:var(--mute)}
.sel{font:13px var(--text);min-height:34px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);padding:4px 8px;max-width:100%}
.inline{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--mute);margin-left:4px}
p{margin:8px 0}

/* adventure */
.adv{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"side away" "side battle" "side trace" "side slot2" "side find";gap:0 12px;align-items:start}
.adv .side{grid-area:side}.adv .away{grid-area:away}.adv .battle{grid-area:battle}.adv .find{grid-area:find}
.hero{display:flex;gap:10px;align-items:center;padding:10px}
.hero .nm{font:22px/1.1 var(--pixel)}
.hero .jb{font-size:12px;color:var(--mute)}
.eq td:first-child{width:46px;text-align:center;padding:3px;vertical-align:middle}
.eq td:first-child canvas{margin:auto}
.battle{background:#000;color:#eaeaea;border:2px solid;border-color:#777 #222 #222 #777;margin-bottom:12px}
.scene{position:relative;width:100%;aspect-ratio:2/1;min-height:150px;max-height:320px;overflow:hidden;border-bottom:2px solid #333;
  background:linear-gradient(#16194a 0 18%,#232a78 18% 34%,#3d4fae 34% 48%,#6f86d6 48% 58%,#2f6d39 58% 66%,#285d31 66% 100%)}
.scene .moon{position:absolute;right:16%;top:14px;width:18px;height:18px;background:var(--iv);box-shadow:0 0 0 3px #fffff044}
.scene .tuft{position:absolute;width:4px;height:4px;background:#4f9d4a;box-shadow:4px -4px 0 #4f9d4a,8px 0 0 #4f9d4a}
.scene .who{position:absolute;bottom:14px;animation:bob 1.2s steps(2) infinite}
.scene .who.hero{left:20%}.scene .who.foe{right:20%;animation-delay:-.6s}
.scene .who.down{opacity:.25;animation:none}
.scene .area{position:absolute;left:8px;top:6px;font:12px var(--pixel);color:var(--iv-fg,var(--iv));background:#00000088;padding:1px 8px;border:1px solid var(--bev2)}
.scene .auto{position:absolute;right:8px;top:6px;font:12px var(--pixel);color:#7dffb0}
.scene .auto i{font-style:normal;animation:blink 1.2s steps(1) infinite}
.scene .auto.off{color:#ffd24d}.scene .auto.off i{animation:none}
.dmg{position:absolute;left:68%;top:34%;font:22px var(--pixel);color:#ff8a5c;text-shadow:2px 2px 0 #000;animation:rise 1s forwards;pointer-events:none}
.dmg.crit{color:#ffff00;font-size:28px}.dmg.healpop{left:24%;color:#8dffb0}.dmg.hurt{left:24%;color:#fff}.dmg.dot{font-size:16px;top:44%;color:#ffb08f}.dmg.poison{color:#b6ef7a}
.hit{animation:shake .25s!important}
@keyframes bob{50%{transform:translateY(-3px)}}
@keyframes rise{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes blink{50%{opacity:0}}
@keyframes pop{from{transform:translateY(4px)}}
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:start;padding:8px 12px;border-bottom:1px solid #333;background:#0b0b18;font-size:12px}
.vs b{font:15px var(--pixel);color:#fff;font-weight:400}
.vs .bar{border-color:#555;background:#222}
/* D-113: the ally under your HP (combat v0.4) */
.allyline{margin-top:3px;font-size:11px;color:#ffd6ec}.vs .bar.thin{height:5px;margin-top:1px}.bar.al>b{background:linear-gradient(#ffb0d0,#c23a7a)}.bar.su>b{background:linear-gradient(#c9a0ff,#6a3a9a)}.bar.st>b{background:linear-gradient(var(--kbg-c0c7d6,#c0c7d6),#5c6475)}
.allyline.su{color:#e4d0ff}.allyline.st{color:#dfe3ec}.scene .who.ally{left:33%;animation-delay:-.3s}
/* PLAYTEST-1: a pack of 2–3 foes stands together; the one that swings lunges; a small bar per foe under the summed bar */
.scene .who.foe.extra.f2{right:calc(20% + 64px);bottom:30px;animation-delay:-.2s}
.scene .who.foe.extra.f3{right:calc(20% - 56px);bottom:26px;animation-delay:-.9s}
.scene .who.foe.extra[hidden]{display:none}
.scene .who.atk{animation:lunge .22s steps(3)!important}
@keyframes lunge{50%{transform:translateX(-14px)}}
.foe-each{display:flex;gap:5px;margin-top:4px}.foe-each[hidden]{display:none}
.foe-each .fe{flex:1;height:7px;background:#1a0c0e;border:1px solid #6b2a26;overflow:hidden}
.foe-each .fe>b{display:block;height:100%;background:#e8473a;transform-origin:left;transition:transform .2s linear}
.foe-each .fe.out{opacity:.35}
@media (prefers-reduced-motion:reduce){.scene .who.atk{animation:none!important}}
.vs .mid{font:20px var(--pixel);color:#ffff00;align-self:center}
.vs .r{text-align:right}
.hpnum{display:block;font-size:11.5px;color:#c9c9d6;font-variant-numeric:tabular-nums}
/* League-style bars: the fill drops at once, a pale "recent damage" chunk drains after a beat. */
.hpbar{height:10px}
.hpbar>b{transition:transform .08s linear}
.hpbar>i.trail{position:absolute;inset:0;transform-origin:left;background:var(--kbg-fff1b8,#fff1b8);transition:transform .45s ease-out .35s}
.hpbar.heal>i.trail{transition:none}
.hpbar.jolt{animation:jolt .28s}
.hpbar.jolt>b{filter:brightness(2.2)}
@keyframes jolt{20%{transform:translateX(-3px)}45%{transform:translateX(3px)}70%{transform:translateX(-2px)}}
/* WALLS-A (D-299, cue A 針 the hand): a bound foe's HP bar shows the line its HP cannot fall below; a red notch marks where the line
   stands at the 120 s limit when the fight cannot be won. Glow breathes slowly, off under reduced motion (VFX rules §9). */
.hpbar.tb{overflow:visible}
.hpbar.tb.late{margin-bottom:14px}
.hpbar .hand{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#c9a0ff;box-shadow:0 0 0 1px #2a1660,0 0 7px 2px #8a5cf6;z-index:2;transition:left .25s linear;pointer-events:none}
.hpbar .hand.pinned{animation:handglow 2.4s ease-in-out infinite}
@keyframes handglow{50%{box-shadow:0 0 0 1px #2a1660,0 0 11px 4px #8a5cf6}}
.hpbar .notch{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:#ff8a7a;z-index:1}
.hpbar .notch em{position:absolute;top:12px;left:0;transform:translateX(-50%);font:10px var(--pixel);font-style:normal;color:#ff8a7a;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hpbar .hand.pinned{animation:none}.hpbar .hand{transition:none}}
/* WALLS-A: the ceiling's small bar (tower floor card, Bosses & walls loadout) */
.tbmini{max-width:320px}
.tbmini .mbar{position:relative;height:12px;border:1px solid var(--bev2);background:var(--kbg-e6e6f4,#e6e6f4);margin:6px 0 2px}
.tbmini .mbar i{position:absolute;top:0;bottom:0;display:block}
.tbmini .mbar i.reach{right:0;background:linear-gradient(#b48cf0,#4b2a8a)}
.tbmini .mbar i.miss{left:0;background:var(--kbg-f3c2bc,#f3c2bc);border-left:2px solid #b3261e}
.tbmini .mlab{display:flex;justify-content:space-between;gap:6px;font:10.5px var(--pixel);color:var(--mute)}
.kread .lrole{font:11px var(--pixel);color:var(--mute)}
.effects{margin-top:4px;min-height:16px}
.effects span{display:inline-block;font-size:11px;padding:0 5px;margin-left:4px;border:1px solid}
.effects .burn{color:#ff8a6b}.effects .poison{color:#b6ef7a}.effects .chill{color:#8fe3ff}
.log{height:236px;overflow:hidden;padding:8px 12px;display:flex;flex-direction:column;justify-content:flex-end;font-size:13.5px;-webkit-mask-image:linear-gradient(transparent,#000 16%);mask-image:linear-gradient(transparent,#000 16%)}
.log p{margin:0 0 5px;animation:pop .3s}
.log .fl{display:block;color:#ff6a4d}
.c-act{color:#ffffff}.c-heal{color:#8dffb0}.c-fire{color:#ff8a6b}.c-poison{color:#b6ef7a}.c-ice{color:#8fe3ff}.c-phys{color:#eaeaea}.c-foe{color:#eaffaa}.c-crit{color:#ffff00;font-weight:700}.c-win{color:#7fd8ff}.c-drop{color:#ffd24d;font-weight:700}.c-mute{color:#9a9ab0}.c-dex{color:#7fe0d2}.c-loss{color:#ff9a8a}
.ticker{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:#9a9ab0;padding:6px 12px;border-top:1px solid #333;flex-wrap:wrap}
.find-row{display:flex;gap:12px;align-items:flex-start}
.find-row .nm{font:17px var(--pixel)}

/* gear */
.gear{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.slot{background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:8px 6px;text-align:center;font-size:12px;min-width:0;overflow-wrap:anywhere}
.slot canvas{margin:0 auto 4px}
.slot small{display:block;color:var(--mute);font-size:11px}
.filters{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:6px}
.inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:6px}
.it{display:flex;gap:8px;align-items:center;background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:6px;cursor:pointer;font:12px/1.3 var(--text);text-align:left;color:var(--ink);min-width:0}
.it.sel{background:var(--cy);border-color:var(--bev2) var(--bev1) var(--bev1) var(--bev2)}
.it .tile{flex:none;padding:3px}
.it>span:last-child{min-width:0;overflow-wrap:anywhere}
.it small{display:block;color:var(--mute);font-size:11px}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--mute)}
.pager>span:last-child{white-space:nowrap}
#item-detail table{margin-top:8px}
/* GEARSHEET-1 (gear-equip-phone-v1, option A): up to 900 px the item card is a bottom sheet; its buttons stay pinned at the bottom. */
#item-detail>.d-acts{margin:8px 0 2px}.sheet-x,.sheet-shade{display:none}
@media (max-width:900px){
  .gear #item-box{display:none}
  .gear.sheet-on #item-box{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:86vh;max-height:86dvh;margin:0;border-top:3px double var(--bev2);box-shadow:0 -6px 18px #05061155;animation:sheet-up .2s ease-out}
  .gear.sheet-on .sheet-shade{display:block;position:fixed;inset:0;z-index:40;background:#05061166}
  .gear.sheet-on #item-box>h3{align-items:center}
  .gear.sheet-on .sheet-x{display:inline-block;min-width:44px;min-height:36px;font-size:18px;line-height:1}
  .gear.sheet-on #item-detail{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding-bottom:0}
  .gear.sheet-on #item-detail>*{order:3}
  .gear.sheet-on #item-detail>.d-head{order:0}.gear.sheet-on #item-detail>.d-cmp{order:1}.gear.sheet-on #item-detail>.d-eff{order:2}
  .gear.sheet-on #item-detail>.d-acts{order:99;position:sticky;bottom:0;margin:auto -12px 0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--iv);border-top:1px solid var(--bev2)}
  .gear.sheet-on .d-acts .btn{min-height:44px}.gear.sheet-on .d-acts .btn[data-action="equip"]{flex:1 1 100%}
  .gear.sheet-on .gbulk{display:none}
}
html.sheet-lock,html.sheet-lock body{overflow:hidden}
@keyframes sheet-up{from{transform:translateY(30%);opacity:.5}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.gear.sheet-on #item-box{animation:none}}
.tag.time,.tchip.time{border-color:#4b2a8a;color:var(--kfg-4b2a8a,#4b2a8a);background:var(--kbg-f4efff,#f4efff)}.tag.wall{border-color:#5a2d0c;color:var(--kfg-5a2d0c,#5a2d0c)}
#wall-panel .slots{margin-bottom:6px}.wallres{margin:4px 0;font-size:12.5px}.wallrules{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12.5px}
.crun{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.crun span{font:12px var(--pixel);border:1px solid var(--bev2);padding:2px 8px;background:var(--kbg-fff,#fff)}.crun span.done{background:#4b2a8a;color:#fff;border-color:#4b2a8a}.crun span.now{outline:2px solid #f2c14e}
.cdrops{font-size:12.5px;margin:4px 0}
.seg.gm{display:inline-flex}.seg.gm button{font:12px var(--text);background:var(--kbg-fff,#fff);border:1px solid var(--bev2);margin-right:-1px;padding:2px 8px;cursor:pointer;color:var(--ink)}.seg.gm button.on{background:#1b1f6b;color:#fff}
.ledger{display:flex;flex-direction:column;margin-top:6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff)}
.lrow{display:grid;grid-template-columns:24px minmax(0,1.1fr) minmax(0,1.4fr) 128px;gap:4px 8px;align-items:start;padding:5px 8px;border:0;border-bottom:1px dotted var(--kbd-c7c7dd,#c7c7dd);background:var(--kbg-fff,#fff);font:12.5px/1.35 var(--text);color:var(--ink);text-align:left}
.lrow.it{cursor:pointer}.lrow.it:hover{background:var(--kbg-f6f6ff,#f6f6ff)}.lrow.it.sel{background:var(--cy)}.lrow.picked{box-shadow:inset 3px 0 0 #b3261e}
.lrow input{margin:3px 0 0;accent-color:#b3261e}.lhead{font:12px var(--pixel);background:var(--kbg-eef0fa,#eef0fa);border-bottom:1px solid var(--bev2);cursor:default;padding:3px 8px}
.lname{display:flex;gap:6px;align-items:flex-start;min-width:0}.lname>span:last-child{min-width:0;overflow-wrap:anywhere}.lname .tile{flex:none;padding:2px}.lname small{display:block;color:var(--mute);font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:3px;min-width:0}.chip{font-size:11.5px;border:1px solid var(--kbd-b9b9d6,#b9b9d6);background:var(--kbg-fff,#fff);padding:0 5px;max-width:100%;overflow-wrap:anywhere}
.chip.hi{border-color:#c79a1e;background:var(--kbg-fff8df,#fff8df)}.chip.lo{color:var(--mute);background:var(--kbg-f4f4f8,#f4f4f8)}.chip i{font-style:normal;font-size:10px;color:var(--kfg-8a5a00,#8a5a00);margin-left:3px}
.dl{font:12px var(--pixel);overflow-wrap:anywhere}.dl.up{color:var(--kfg-1d6b3a,#1d6b3a)}.dl.down{color:var(--kfg-b3261e,#b3261e)}.dl.mix{color:var(--kfg-8a5a00,#8a5a00)}.dl.eq{color:var(--mute)}
.gbulk{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;margin-top:6px;padding:6px 8px;background:#1b1f6b;color:#fff;font-size:12.5px}
.gbulk b{font:15px var(--pixel);font-weight:400}.gbulk .bbtns{display:flex;flex-wrap:wrap;gap:6px}.gbulk .btn{color:var(--ink)}
@media (max-width:720px){.gbulk{bottom:80px}.lrow{grid-template-columns:24px minmax(0,1fr) 92px}.lrow .lmods{grid-column:2/4;grid-row:2}.lhead .lmods{display:none}}

/* jobs */
.jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#start-jobs{grid-template-columns:repeat(3,minmax(0,1fr))}
.job{background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0;text-align:left;font:inherit;color:inherit}
button.job{cursor:pointer}
.job.cur{background:var(--kbg-f0fffe,#f0fffe);outline:2px solid #2d8f8c;outline-offset:-2px}
.job .tile{align-self:flex-start}
.job .jt{display:flex;justify-content:space-between;align-items:flex-start}
.job .tier{font:11px var(--pixel);color:var(--mute);border:1px solid var(--bev2);padding:0 5px}
.job.locked{background:var(--kbg-f1f1ea,#f1f1ea)}.job.locked .tile{filter:grayscale(1);opacity:.6}
.job .need{color:var(--kfg-6b4a00,#6b4a00);font-size:12px;font-weight:700}
.job .nm{font:17px var(--pixel)}
.job .stars{color:var(--kfg-8a5a00,#8a5a00);letter-spacing:1px;font-size:13px}
.job p{margin:0;font-size:12px;color:var(--mute)}
.job .btn{margin-top:auto}
/* Jobs tab: one row per job, grouped by tier */
.jobrows{display:flex;flex-direction:column;gap:12px}
.tierhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;border-bottom:2px solid var(--bev2);padding:0 2px 4px;margin-bottom:6px}
.tierhead b{font:16px var(--pixel);font-weight:400}
.tierhead span{font-size:12px;color:var(--mute)}
.tiergroup{display:flex;flex-direction:column;gap:6px}
.jcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.jcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;color:var(--ink);background:var(--kbg-fff,#fff);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:8px 4px 6px;cursor:pointer;min-width:0}
.jcard:hover{background:var(--kbg-f6f7ff,#f6f7ff)}.jcard.locked{background:var(--kbg-f1f1ea,#f1f1ea)}.jcard.cur{outline:2px solid #2d8f8c;outline-offset:-2px}.jcard.sel{outline:2px solid #946000;outline-offset:-2px}
.jcard:focus-visible{outline:3px solid #946000;outline-offset:2px}
.jcard .jtag{position:absolute;top:3px;left:5px;font-size:10px;font-weight:700;color:var(--kfg-2d8f8c,#2d8f8c)}
.jring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#d9a400 calc(var(--m,0)*1deg),var(--kbg-dedff0,#dedff0) 0)}
.jface{width:52px;height:52px;border-radius:50%;background:var(--kbg-f4f4ff,#f4f4ff);display:grid;place-items:center}
.jcard.locked .jface canvas{filter:grayscale(1) brightness(.45)}
.jcard.pre{outline:2px dashed #6b4a00;outline-offset:-2px}.jcard.pre.met{outline:2px solid #1d6b3a}/* D-313: a locked job's prerequisites */
.jpre{position:absolute;top:3px;right:5px;font-size:10px;font-weight:700;color:var(--kfg-6b4a00,#6b4a00)}.jcard.pre.met .jpre{color:var(--kfg-1d6b3a,#1d6b3a)}
.jq{font:22px var(--pixel);color:#9a9ab8;font-weight:400}
.jcard .nm{font:13px/1.2 var(--pixel);text-align:center;overflow-wrap:anywhere}.jcard .stars{font-size:11.5px}
.jsheet{margin-top:8px;display:grid;grid-template-columns:auto minmax(0,1fr) 170px 150px;gap:10px;align-items:center;background:var(--iv);border:2px solid var(--bev2);padding:10px}
.jsheet .nm{font:17px var(--pixel);display:inline}.jsheet .stars{display:inline;color:var(--kfg-8a5a00,#8a5a00);font-size:13px}.jsheet p{margin:2px 0;font-size:12.5px}.jsheet .need{font-weight:700}
@media (max-width:760px){.jcards{grid-template-columns:repeat(3,minmax(0,1fr))}.jsheet{grid-template-columns:auto minmax(0,1fr)}.jsheet .prog,.jsheet .btn{grid-column:1/-1}.jsheet .btn{justify-self:end}}
.jobrow{display:grid;grid-template-columns:auto 150px minmax(0,1fr) 170px 150px;gap:10px;align-items:center;background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:8px 10px;min-width:0}
.jobrow.cur{background:var(--kbg-f0fffe,#f0fffe);outline:2px solid #2d8f8c;outline-offset:-2px}
.jobrow.locked{background:var(--kbg-f1f1ea,#f1f1ea)}.jobrow.locked .tile{filter:grayscale(1);opacity:.6}
.jobrow .nm{font:16px var(--pixel)}
.jobrow .stars{color:var(--kfg-8a5a00,#8a5a00);letter-spacing:1px;font-size:13px}
.jobrow .what p{margin:0;font-size:12.5px;color:var(--kfg-3d3d36,#3d3d36)}
.jobrow .need{margin-top:3px!important;font-size:12px!important;font-weight:700}
.jobrow .need .met{color:var(--kfg-1d6b3a,#1d6b3a)}.jobrow .need .unmet{color:var(--kfg-6b4a00,#6b4a00)}
.jsheet .need .met{color:var(--kfg-1d6b3a,#1d6b3a)}.jsheet .need .unmet{color:var(--kfg-6b4a00,#6b4a00)}.jsheet .prog small{display:block;font-size:11px;color:var(--mute);margin-top:3px}.jsheet .mute{color:var(--mute)}
.jobrow .prog small{display:block;font-size:11px;color:var(--mute);margin-top:3px}
.jobrow .btn{width:100%}
.sigs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sig{background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:10px;font-size:12.5px;min-width:0}
.sig b{font:16px var(--pixel);font-weight:400;display:block}
.sig.ready{outline:2px solid var(--badge);outline-offset:-2px}
.sig.locked{background:var(--kbg-f1f1ea,#f1f1ea)}

/* stat sheet (MOD-1) */
.sheethead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.sheethead .nm{font:20px var(--pixel)}.sheethead .tabs{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.sheethead .btn.on{background:linear-gradient(var(--kbg-e2fffe,#e2fffe),var(--kbg-9fe9e7,#9fe9e7))}
.summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:10px 12px}
.sum{border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);background:var(--kbg-fff,#fff);padding:6px 8px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.sum b{display:block;font:19px var(--pixel);font-weight:400;font-variant-numeric:tabular-nums}.sum span{font-size:11.5px;color:var(--mute)}.sum.sel{outline:2px solid #2d8f8c;background:var(--kbg-f0fffe,#f0fffe)}
.sstat{border-top:1px solid var(--kbd-d4d6e8,#d4d6e8)}
.sstat>button{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:8px 12px;font:inherit;color:inherit;cursor:pointer;text-align:left}
.sstat>button b{font:16px var(--pixel);font-weight:400;flex:1}.sstat>button .v{font:18px var(--pixel);font-variant-numeric:tabular-nums}.sstat>button .chev{color:var(--mute);font-size:12px;width:14px}
.sstat.open>button{background:var(--kbg-f0fffe,#f0fffe)}.sstat .lines{display:none;padding:2px 12px 10px 36px}.sstat.open .lines{display:block}
.sline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:3px 0;border-bottom:1px dotted var(--kbd-d4d6e8,#d4d6e8);font-size:13px}
.sline .src{display:flex;gap:6px;align-items:center;min-width:0;flex-wrap:wrap}.sline .src canvas{flex:none}.sline .amt{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sline.base .amt{font-weight:700}.sline.sub{color:var(--mute)}.sline.total{border-bottom:0;border-top:2px solid var(--bev2);font-weight:700}
.cap,.sum .cap{display:inline-flex;align-items:center;font:400 11px/1 var(--pixel);letter-spacing:.04em;color:var(--kfg-7a3d00,#7a3d00);background:var(--kbg-fff1d6,#fff1d6);border:1px solid #c98a2c;padding:2px 4px;white-space:nowrap;vertical-align:middle}.sum .cap{font-size:11px}.sstat>button .cap{margin-left:6px}.comparison .cap{margin:0 2px}
.sline.over{color:var(--kfg-8a8aa6,#8a8aa6);background:repeating-linear-gradient(135deg,transparent 0 6px,var(--kbg-f3ecdc,#f3ecdc) 6px 8px)}.sline.over .amt{text-decoration:line-through;text-decoration-thickness:1px}.sline.over .op{color:var(--kfg-7a3d00,#7a3d00)}
.capnote{margin:8px 0 0;padding:6px 8px;border:1px solid #c98a2c;background:var(--kbg-fff1d6,#fff1d6);color:var(--kfg-7a3d00,#7a3d00);font-size:12.5px}
.op{display:inline-block;font:700 10px var(--text);padding:0 4px;border:1px solid currentColor;margin-right:4px;min-width:30px;text-align:center}
.op.flat{color:var(--kfg-2236a8,#2236a8)}.op.inc{color:var(--kfg-127a36,#127a36)}.op.more{color:var(--kfg-a5520a,#a5520a)}.op.eff{color:var(--kfg-8a5a00,#8a5a00)}
.formula{font-size:12px;color:var(--mute);padding:4px 0 0}
.ssource{border-top:1px solid var(--kbd-d4d6e8,#d4d6e8);padding:8px 12px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 10px;align-items:start}
.ssource .icon{grid-row:1/3}.ssource .nm2{font-weight:700}.chips{display:flex;flex-wrap:wrap;gap:4px}.chip{font-size:12px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:0 6px}
.ssource.future{opacity:.55}.ssource.future .nm2::after{content:" · coming later";font-weight:400;color:var(--mute);font-size:12px}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--mute);padding:8px 12px;border-top:1px solid var(--kbd-d4d6e8,#d4d6e8)}

/* Monster Cards (CARD-1) */
.mc-toggle{display:flex;gap:4px;margin-bottom:10px}
.mc-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px}.mc-seg{display:flex;gap:4px;flex-wrap:wrap}
.mc-count{margin-left:auto;font-size:13px;color:var(--mute)}.mc-count b{color:var(--ink);font:18px var(--pixel);font-weight:400}
.mc-ladder{border-top:1px solid var(--kbd-d4d6e8,#d4d6e8);padding:10px 12px}.mc-ladder:first-child{border-top:0}
.mc-lh{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-bottom:6px;font-size:12.5px;color:var(--mute)}.mc-lh b{font:16px var(--pixel);font-weight:400;color:var(--ink)}
.mc-setbar{flex:1;min-width:120px;max-width:240px;height:8px;background:var(--kbg-d6d9ee,#d6d9ee);border:1px solid var(--bev2)}.mc-setbar i{display:block;height:100%;background:#c58b12}
.mc-setdone{font:700 11px var(--text);color:#fff;background:var(--up-bg,var(--up));padding:0 6px}
.mc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mc{position:relative;border:2px solid;border-color:#e9d48a #8a6a10 #8a6a10 #e9d48a;background:linear-gradient(var(--kbg-fffbe8,#fffbe8),var(--kbg-f3e7c0,#f3e7c0));padding:6px;cursor:pointer;text-align:left;font:inherit;color:inherit;min-width:0}
.mc .art{background:#2a2438;border:1px solid #000;display:flex;align-items:center;justify-content:center;height:62px;margin-bottom:4px}
.mc .nm{font-weight:700;font-size:12.5px;line-height:1.25}.mc .st{color:var(--kfg-7a3d00,#7a3d00);font-size:12px;letter-spacing:1px}.mc .fx{font-size:11.5px;color:var(--mute);line-height:1.35}
.mc .cnt{position:absolute;top:4px;right:6px;font:700 11px var(--text);color:#fff;background:#1d1d3a;padding:0 5px}
.mc.boss{border-color:#ffd23f #7a3d00 #7a3d00 #ffd23f;background:linear-gradient(var(--kbg-fff3c4,#fff3c4),var(--kbg-ffe2a0,#ffe2a0));box-shadow:inset 0 0 0 1px #ffd23f}/* FIX-UI: #ffd27a stayed gold under Night's light text (1.2:1); #ffe2a0 is skinned */
.mc.unk{border-color:var(--kbd-ccccff,#ccccff) #666699 #666699 var(--kbd-ccccff,#ccccff);background:var(--kbg-eceef6,#eceef6);cursor:default}.mc.unk .art{background:var(--kbg-c9cce2,#c9cce2)}.mc.unk .nm{color:var(--mute)}
.mc.sel{outline:3px solid #2d8f8c;outline-offset:1px}
.mc-dlg{max-width:460px}.mc-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;font-size:13px}
.mc-big{background:#2a2438;border:2px solid;border-color:#e9d48a #8a6a10 #8a6a10 #e9d48a;padding:10px;align-self:start}.mc-stars{color:var(--kfg-7a3d00,#7a3d00);font-size:16px;letter-spacing:2px}
.mc-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px}.mc-kv span:nth-child(odd){color:var(--mute)}
.mc-sockets{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.mc-sock{display:flex;gap:10px;align-items:center;border:1px dashed var(--bev2);background:var(--kbg-fff,#fff);padding:6px 8px;min-height:56px}.mc-sock.full{border-style:solid;background:var(--kbg-fffbe8,#fffbe8)}
.mc-sock .no{font:12px var(--pixel);color:var(--mute);width:22px}.mc-sock .grow{flex:1;min-width:0;font-size:13px}
.mc-spare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}.mc-spare .mc{padding:4px}.mc-spare .mc .art{height:44px}
.pipline{color:var(--kfg-8a5a00,#8a5a00);letter-spacing:1px;margin-left:4px}
.moments .stamp.card{background:#7a3d00}.banner.card{border-color:#ffd23f #7a3d00 #7a3d00 #ffd23f}.banner.card b{color:#ffd23f}

/* Forge v0.2 (FORGE-2) */
.mat .use{margin-left:auto;min-height:28px;padding:3px 10px}
.it.pick{outline:2px solid #c58b12;outline-offset:-2px;background:var(--kbg-fff8e2,#fff8e2)}.tag.pk{background:#8a5a00;color:#fff}
.sealtag{font:700 10px var(--text);color:#fff;background:#3b6fd4;padding:0 4px;margin-left:6px;vertical-align:1px}
table.affix tr.sealed td{background:var(--kbg-eef6ff,#eef6ff)}
.cmp{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0}.cmp th,.cmp td{border-bottom:1px solid var(--kbd-d4d6e8,#d4d6e8);padding:4px 6px;text-align:left}.cmp th{font-size:11.5px;color:var(--mute);font-weight:400}
.cmp .up{color:var(--up);font-weight:700}.cmp .dn{color:var(--dn);font-weight:700}.cmp .lock{color:var(--kfg-3b6fd4,#3b6fd4)}
/* D-263 Polish one: the All affixes / One affix switch, the odds marker with the range's steps, untouched rows in a one-affix offer */
.cmp tr.same td{color:var(--mute)}
.seg.pseg{display:inline-flex;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);width:max-content;max-width:100%;margin:2px 0}
.seg.pseg button{font:12px var(--text);border:0;border-right:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);padding:5px 12px;min-height:34px;cursor:pointer;display:grid;line-height:1.25;text-align:left}
.seg.pseg button:last-child{border-right:0}.seg.pseg button small{font-size:11px;color:var(--mute)}
.seg.pseg button[aria-pressed=true]{background:#1b1f6b;color:#fff}.seg.pseg button[aria-pressed=true] small{color:#c6c9ff}
.seg.pseg button:disabled{cursor:not-allowed;color:var(--kfg-4d4d6e,#4d4d6e);background:var(--kbg-f1f1f6,#f1f1f6)}.seg.pseg button:disabled small{color:var(--kfg-4d4d6e,#4d4d6e)}
.seg.pseg button[aria-pressed=true]:disabled{background:#4a4f8f;color:#fff}.seg.pseg button[aria-pressed=true]:disabled small{color:#e4e6ff}
.odds{border:1px solid var(--kbd-d4d6e8,#d4d6e8);background:var(--kbg-fbfbff,#fbfbff);padding:6px 8px;display:grid;gap:4px;margin:4px 0}
.odds .hd{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12.5px}
.odds .hd b{font:14px var(--pixel);font-weight:400;color:var(--up);margin-left:4px}.odds .hd b.top{color:var(--mute);margin-left:0}
.odds .steps{display:flex;gap:2px}.odds .steps i{flex:1;height:12px;background:var(--kbg-e3e4ee,#e3e4ee);border:1px solid var(--kbd-c5c7da,#c5c7da);min-width:0}
.odds .steps i.win{background:var(--kbg-bfe8cc,#bfe8cc);border-color:#127a36}.odds .steps i.cur{background:var(--ink);border-color:var(--ink-bd,var(--ink))}
.odds .ends{display:flex;justify-content:space-between;font-size:11px;color:var(--mute)}
.fres{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px 8px;font-size:13px;margin:6px 0}.fres b{display:block}
.warnline{color:var(--dn);font-size:12px;margin:4px 0 0}
.rtrade{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px 12px;font-size:13px}
.rtrade .nm{display:flex;gap:6px;align-items:center;white-space:nowrap}.rtrade .price{font-variant-numeric:tabular-nums;color:var(--gold,var(--kfg-8a5a00,#8a5a00));font-weight:700;text-align:right}
.rtrade .buy{grid-column:1/-1;display:flex;gap:6px;margin-bottom:6px}.rtrade .lk{color:var(--mute);font-size:12px}
.glassbody{display:flex;gap:12px;align-items:flex-start}.glassbody p{margin:0 0 6px;font-size:13px}

/* goblin errands (SCAV-1) */
.btn.go{background:linear-gradient(var(--kbg-fff6c8,#fff6c8),#f2d36b);border-color:#e9d48a #8a6a10 #8a6a10 #e9d48a}
.er-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.er-head .nm{font:20px var(--pixel)}
.er-rank{flex:1;min-width:220px;max-width:360px}.er-rk{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.er-rankbar{height:8px;background:var(--kbg-d6d9ee,#d6d9ee);border:1px solid var(--bev2);margin-top:3px}.er-rankbar b{display:block;height:100%;background:#c58b12;transform-origin:left}
.er-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px}
.er-slot{border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);background:var(--kbg-fff,#fff);padding:8px 10px;min-width:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.er-slot .h{display:flex;justify-content:space-between;gap:6px;font-size:12px;color:var(--mute)}
.er-slot .where{font:16px var(--pixel);margin:2px 0}.er-slot .left{font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink)}
.er-slot.empty{background:var(--kbg-f6f7ff,#f6f7ff);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}
.er-slot.lock{background:var(--kbg-eceef6,#eceef6);color:var(--mute);display:flex;flex-direction:column;justify-content:center;cursor:default}
.er-slot.sel{outline:2px solid #2d8f8c;outline-offset:-2px}
.er-walk{height:30px;border-bottom:1px dashed var(--bev1);margin:6px 0 4px;position:relative;overflow:hidden}.er-walk canvas{position:absolute;bottom:1px}
.er-bar{height:8px;background:var(--kbg-d6d9ee,#d6d9ee);border:1px solid var(--bev2);margin-top:3px}.er-bar b{display:block;height:100%;background:#3fa34d;transform-origin:left}
.er-form{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 12px;padding:10px 12px;align-items:start}.er-form .k{font-weight:700;font-size:13px;padding-top:6px}
.er-areas{display:flex;flex-direction:column;gap:6px}.er-region{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.er-region .rn{font-size:12px;color:var(--mute);width:100%}
.er-area{font:12px var(--text);background:var(--kbg-fff,#fff);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:4px 8px;cursor:pointer;color:var(--ink);min-height:30px}
.er-area.on{background:linear-gradient(var(--kbg-e2fffe,#e2fffe),var(--kbg-9fe9e7,#9fe9e7));font-weight:700}.er-area:disabled{opacity:.45;cursor:default}
.er-grade{font:700 10px var(--text);border:1px solid currentColor;padding:0 3px;margin-left:4px;color:var(--kfg-5b4b9a,#5b4b9a)}
.er-seg{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.er-expect{border-top:1px solid var(--kbd-d4d6e8,#d4d6e8);padding:10px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.er-lines{flex:1;min-width:220px;font-size:13px}.er-lines b{font-variant-numeric:tabular-nums}
.er-toggle{display:inline-flex;align-items:center;gap:8px;font:13px var(--text);color:var(--ink);background:none;border:0;padding:4px 0;cursor:pointer;min-height:34px;text-align:left}
.er-toggle i{flex:none;width:34px;height:18px;border:1px solid var(--bev2);background:var(--kbg-d6d9ee,#d6d9ee);position:relative;display:inline-block}
.er-toggle i::after{content:"";position:absolute;top:1px;left:1px;width:14px;height:14px;background:var(--kbg-fff,#fff);border:1px solid var(--bev2);transition:left .15s}
.er-toggle[aria-checked=true] i{background:#7fd08a}.er-toggle[aria-checked=true] i::after{left:17px}
.er-log{font-size:13px}.er-log div{border-top:1px solid var(--kbd-d4d6e8,#d4d6e8);padding:6px 12px;display:flex;gap:4px 8px;flex-wrap:wrap}.er-log time{color:var(--mute);font-variant-numeric:tabular-nums;min-width:64px}
.er-log .lucky{color:var(--rare);font-weight:700}.er-log .empty{color:var(--mute)}
.er-lockbox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:14px}.er-grey{filter:grayscale(1);opacity:.7}
.er-checks{list-style:none;margin:6px 0 0;padding:0}.er-checks li{font-size:13px;padding:2px 0}.er-checks li>span:first-child{display:inline-block;width:18px}
.er-checks .ok{color:var(--up);font-weight:700}.er-checks .no{color:var(--mute)}
.er-veil{align-items:flex-start;padding-top:12vh}
.er-sack{width:min(440px,100%);background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.er-sack h3{margin:0;background:var(--cy);font:700 14px var(--text);padding:6px 12px;border-bottom:1px solid var(--bev2)}.er-sack.lucky h3{background:#ffe79a}
.er-sack .hero{display:flex;gap:12px;align-items:center;padding:12px}.er-sack .hero .t{font:18px var(--pixel)}
.er-banner{margin:0 12px;padding:6px 10px;background:#7a3d00;color:#fff3c4;font:700 14px var(--text);text-align:center;letter-spacing:.5px}
.er-items{padding:6px 12px 12px;display:flex;flex-direction:column;gap:2px}
.er-items div{display:flex;justify-content:space-between;gap:8px;font-size:13px;border-bottom:1px dotted var(--kbd-d4d6e8,#d4d6e8);padding:3px 0;opacity:0;transform:translateY(4px);animation:er-pop .3s forwards}
.er-items div span:first-child{display:flex;gap:6px;align-items:center}
@keyframes er-pop{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.er-items div{animation:none;opacity:1;transform:none}}
.er-sack .foot{padding:0 12px 12px;display:flex;gap:8px;justify-content:flex-end}
.er-chip{display:flex;gap:10px;align-items:center;padding:6px 12px;border-top:1px solid var(--kbd-d4d6e8,#d4d6e8);font-size:13px;color:inherit;text-decoration:none}.er-chip .er-bar{flex:1;max-width:160px;margin:0}
.moments .stamp.errand{background:#2f7d32}.moments .stamp.lucky{background:#a5520a}

/* characters and unlocks (CHAR-1 + UNLOCK-1) */
.who-btn[hidden]{display:none}
.who-btn{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--text);color:var(--ink);background:linear-gradient(var(--kbg-fff,#fff),var(--kbg-dfe3f5,#dfe3f5));border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:3px 10px 3px 4px;cursor:pointer}
.who-btn canvas{background:var(--kbg-dfe8ff,#dfe8ff);border:1px solid var(--bev2)}
.rail a.locked{color:#8a8fc4}.rail a.locked canvas{filter:grayscale(1) brightness(.6)}.rail a.locked small{color:#8a8fc4}
.rail a .lock{position:absolute;top:3px;right:8px;font:700 9.5px var(--text);color:var(--kfg-1b1f6b,#1b1f6b);background:var(--kbg-c6c9ff,#c6c9ff);padding:0 4px}
.badge.newtab{font-size:9.5px}
.lockrow[hidden],.lockedscreen[hidden]{display:none}
.lockcard{display:flex;gap:12px;align-items:center;padding:14px;background:var(--kbg-f6f6fb,#f6f6fb);border:1px dashed var(--bev2)}.lockcard .big{font:30px var(--pixel);color:var(--bev2-fg,var(--bev2))}
.lockrow{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--mute);padding:8px 10px;background:var(--kbg-f6f6fb,#f6f6fb);border:1px dashed var(--bev2);margin:8px 0}
#forge-tabs button.locked{color:#8a8fc4}#forge-tabs button.locked small{font:700 10px var(--text);margin-left:4px;color:var(--kfg-1b1f6b,#1b1f6b);background:var(--kbg-c6c9ff,#c6c9ff);padding:0 3px}
.unlocks td:first-child{width:60px;font:15px var(--pixel);text-align:center}.unlocks tr.done td{color:var(--mute)}.unlocks tr.next td{background:var(--kbg-e9f8ff,#e9f8ff)}
.goal.unlock{border-color:#4fb3d9}.goal.unlock .bar>b{background:linear-gradient(var(--kbg-c9f0ff,#c9f0ff),#4fb3d9)}
.banner.unlock{border-color:#4fb3d9 #1b1f6b #1b1f6b #4fb3d9}.banner.unlock b{color:#c9f0ff}
.moments .stamp.unlock{background:#2e8fd0}
.cslots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cslot{background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:12px;display:flex;flex-direction:column;gap:3px;min-width:0;position:relative}
.cslot.cur{background:var(--kbg-f0fffe,#f0fffe);outline:2px solid #2d8f8c;outline-offset:-2px}.cslot .nm{font:20px var(--pixel)}.cslot .tile{align-self:flex-start}
.cslot .state{position:absolute;top:8px;right:8px;font:700 10px var(--text);padding:0 5px;color:#fff;background:var(--up-bg,var(--up))}.cslot .state.away{background:#666699}.cslot .state.bad{background:var(--dn-bg,var(--dn))}
.cslot.empty{align-items:center;justify-content:center;min-height:200px;border-style:dashed;color:var(--mute);background:var(--kbg-f6f6fb,#f6f6fb)}
.cslot.empty .plus{font:34px var(--pixel);color:var(--bev2-fg,var(--bev2))}
.form label{display:block;font-size:12px;color:var(--mute);margin:8px 0 4px}.form input{font:16px var(--text);padding:7px 9px;border:1px solid var(--bev2);width:100%;max-width:320px}
.jobpicks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.jobpick{background:var(--iv);border:1px solid var(--bev2);padding:6px;text-align:center;font:12px var(--text);cursor:pointer;color:var(--ink)}.jobpick.sel{background:var(--cy);outline:2px solid #2d8f8c}.jobpick canvas{margin:0 auto 2px}
.err{color:var(--dn);font-size:12px;min-height:18px;margin:6px 0 0}
.modal{position:fixed;inset:0;background:#05061199;display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}.modal[hidden]{display:none}
.modal .box{max-width:420px;width:100%;box-shadow:0 20px 60px #0008}

/* reward feel (FEEL-1) */
.battle{position:relative}
.scene.stop .who{animation-play-state:paused}
.scene.shake{animation:shake .2s}
@keyframes shake{20%{transform:translate(-3px,1px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,2px)}80%{transform:translate(2px,-1px)}}
.dmg.crit{font-size:34px;animation:critpop 1.1s forwards}
@keyframes critpop{0%{opacity:0;transform:scale(2.2)}12%{opacity:1;transform:scale(1)}20%{transform:scale(1.15)}100%{opacity:0;transform:translateY(-40px) scale(1)}}
.px{position:absolute;width:5px;height:5px;z-index:4;animation:burst .7s ease-out forwards;pointer-events:none}
@keyframes burst{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.loot{position:absolute;right:calc(20% + 10px);bottom:40px;z-index:5;animation:lootup 1.6s forwards;pointer-events:none}
.loot canvas{filter:drop-shadow(0 0 6px var(--glow))}
@keyframes lootup{0%{transform:translateY(0) scale(.4);opacity:0}25%{transform:translateY(-46px) scale(1.1);opacity:1}40%{transform:translateY(-40px) scale(1)}85%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
.pillar{position:absolute;right:calc(20% + 2px);bottom:0;width:44px;height:100%;z-index:3;pointer-events:none;background:linear-gradient(to top,#ffd23fcc,#ffd23f44 60%,transparent);filter:blur(2px);animation:pillar 2.2s forwards}
@keyframes pillar{0%{transform:scaleY(0);transform-origin:bottom}20%{transform:scaleY(1)}80%{opacity:1}100%{opacity:0}}
.banner,.lvlup{position:absolute;left:0;right:0;margin:0 auto;width:max-content;max-width:94%;top:75px;transform:translateY(-50%);z-index:8;text-align:center;pointer-events:none;animation:bannerin 2.6s forwards}
.banner{background:#0b0b18e0;border:2px solid;border-color:#c98a12 #5b3714 #5b3714 #c98a12;padding:6px 16px}
.banner b{display:block;font:28px var(--pixel);font-weight:400;letter-spacing:2px;color:#ffd23f;text-shadow:2px 2px 0 #000,-1px -1px 0 #5b3714;white-space:nowrap}
.banner.rare b{color:#ff9a3c}.banner.glim b{color:#c9f0ff}
.banner small{display:block;font:13px var(--text);color:#fff;text-shadow:1px 1px 0 #000;margin:2px auto 0;max-width:300px}
.lvlup{background:#0b0b18e6;border:2px solid;border-color:#8f93d6 #1b1f6b #1b1f6b #8f93d6;padding:8px 18px;animation-duration:3s}
.lvlup b{display:block;font:36px var(--pixel);font-weight:400;letter-spacing:3px;color:#fff;text-shadow:0 0 12px #8fe3ff,3px 3px 0 #1b1f6b;white-space:nowrap}
.lvlup .deltas{display:flex;flex-wrap:wrap;gap:2px 10px;justify-content:center;margin-top:4px;font:13px var(--text);color:#b8ffcf;text-shadow:1px 1px 0 #000}.lvlup .deltas span{white-space:nowrap}
@keyframes bannerin{0%{opacity:0;transform:translateY(-50%) scale(1.6)}10%{opacity:1;transform:translateY(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.flash{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle,var(--kbg-fff6c2aa,#fff6c2aa),#ffd23f33 60%,transparent);animation:flash .7s forwards}
@keyframes flash{from{opacity:1}to{opacity:0}}
.ribbon{display:inline-block;font:700 10px var(--text);color:#fff;background:#c2321b;padding:0 5px;margin-left:6px;transform:rotate(-3deg)}
.scene .who.foe.glim{animation:bob 1.2s steps(2) infinite,glim 1.2s linear infinite}
@keyframes glim{0%{filter:hue-rotate(0) brightness(1.4) drop-shadow(0 0 6px #fff)}50%{filter:hue-rotate(180deg) brightness(1.8) drop-shadow(0 0 10px #8fe3ff)}100%{filter:hue-rotate(360deg) brightness(1.4) drop-shadow(0 0 6px #fff)}}
.scene .flee{position:absolute;right:12px;bottom:10px;z-index:3;width:120px;font:11px var(--text);color:#fff;text-align:right}
.scene .flee .bar{background:#222;border-color:#555}.scene .flee .bar>b{background:linear-gradient(#ffffff,#8fe3ff);transition:transform 1s linear}
.log .c-glim{color:#c9f0ff;font-weight:700}.log .c-rare{color:#ff9a3c;font-weight:700}.log .c-level{color:#ffd27a;font-weight:700}
.tick{animation:tickglow .6s}
@keyframes tickglow{0%{color:#c98a12;text-shadow:0 0 8px #ffd23f}100%{text-shadow:none}}
.goals{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;background:#0b0b18;border-top:1px solid #333}
.goal{flex:1 1 150px;min-width:0;background:#15172a;border:1px solid #33365a;padding:4px 8px;font-size:11.5px;color:#c9c9d6}
.goal b{color:#fff;font:13px var(--pixel);font-weight:400}.goal .bar{background:#222;border-color:#444;height:5px;margin-top:3px}.goal .bar>b{background:linear-gradient(#ffd27a,#c98a12)}
.goal.near{border-color:#c98a12}.goal.near .bar>b{background:linear-gradient(var(--kbg-fff6c2,#fff6c2),#ffd23f)}
.chestbox{position:relative;overflow:hidden}
.chest-stage{position:relative;display:flex;gap:14px;align-items:center;padding:12px}
.chest-stage canvas{position:relative;z-index:1;flex:none}
.chest-stage .rays{position:absolute;left:4px;top:-6px;width:110px;height:110px;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 10deg,#ffd23f55 10deg 20deg,transparent 20deg 40deg,#ffd23f55 40deg 50deg,transparent 50deg 70deg,#ffd23f55 70deg 80deg,transparent 80deg 100deg,#ffd23f55 100deg 110deg,transparent 110deg);border-radius:50%;opacity:0;transition:opacity .4s}
.chestbox.open .rays{opacity:1;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chest-stage .tiles{flex:1}
.chestbox .stat{opacity:.25;transition:opacity .3s}.chestbox .stat.in{opacity:1}
.moments{list-style:none;margin:0;padding:0 12px 6px}.moments li{display:flex;gap:8px;align-items:center;padding:4px 0;border-bottom:1px dashed var(--kbd-d4d6e8,#d4d6e8);font-size:13px;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.moments li.in{opacity:1;transform:none}.moments .stamp{flex:none;font:700 10px var(--text);color:#fff;background:#c2321b;padding:0 5px}.moments .stamp.lv{background:var(--magic-bg,var(--magic))}.moments .stamp.boss{background:#8e1f16}.moments .stamp.glim{background:#2e8fd0}.moments .stamp.bad{background:#6b4a00}.moments .stamp.info{background:#666699}
.best{margin:6px 12px 4px;border:2px solid #c98a12;background:var(--kbg-fff8e6,#fff8e6);padding:8px 10px;display:flex;gap:10px;align-items:center;opacity:0;transform:scale(.9);transition:opacity .4s,transform .4s}
.best.in{opacity:1;transform:none;box-shadow:0 0 0 4px #ffd23f55,0 0 24px #ffd23f}

/* economy (ECON-1): gold, durability, field rest */
.gold{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-variant-numeric:tabular-nums}.gold canvas{flex:none}
.top .st .gold{color:var(--ink)}
.scene .camp{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#05060ccc;text-align:center;padding:0 12px;z-index:3}
.scene .camp.on{display:flex}.camp b{font:22px var(--pixel);font-weight:400;color:#ffd27a}.camp .t{font:30px var(--pixel);color:#fff;font-variant-numeric:tabular-nums}.camp .s{font-size:12px;color:#c9c9d6;max-width:440px}
.camp .fire{width:10px;height:10px;background:#ff7a1a;box-shadow:0 0 14px 6px #ff7a1a66;animation:flick .6s steps(2) infinite}
@keyframes flick{50%{transform:scale(.7);background:#ffd23f}}
.log .c-gold{color:#ffd27a}.log .c-inn{color:#8fe3ff}.log .c-bad{color:#ff9a8a}
.repair td:first-child{width:46px;text-align:center}.repair td:first-child canvas{margin:auto}

/* map (world v0.2 area ladder) */
.moves{margin:8px 0 0;padding-left:20px;font-size:13px}.moves:empty{display:none}.moves li{margin:2px 0}
.map[hidden]{display:none}
.map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"world ladder" "push ladder" "area ladder";grid-template-rows:auto auto 1fr;gap:0 12px;align-items:start}
.g-world{grid-area:world}.g-push{grid-area:push}.g-area{grid-area:area}.g-ladder{grid-area:ladder}
.world{position:relative;height:300px;overflow:hidden;border-bottom:2px solid #333;background:linear-gradient(var(--kbg-cfe7ff,#cfe7ff) 0 28%,#a8d39a 28% 52%,#7fae6c 52% 70%,#6f8f9a 70% 100%)}
.world .path{position:absolute;border-top:4px dotted #6b4a00;transform-origin:left}
.world .path.closed{border-top-color:var(--kbd-eef0ff,#eef0ff)}
.node{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;background:none;border:0;font:12px var(--pixel);color:var(--ink);padding:0}
.node .pin{position:relative;width:36px;height:36px;display:grid;place-items:center;background:var(--iv);border:2px solid var(--ink-bd,var(--ink));box-shadow:2px 2px 0 #0003}
.node.sel .pin{background:var(--cy);outline:3px solid #f2c14e}
.node.locked .pin{background:var(--kbg-c9c9c0,#c9c9c0)}
.node .lbl{background:var(--kbg-fffff0e6,#fffff0e6);padding:0 5px;border:1px solid var(--bev2);white-space:nowrap}
.node .cnt{font:10.5px var(--text);color:var(--mute);background:var(--kbg-fffff0cc,#fffff0cc);padding:0 4px}
.node .here{position:absolute;top:-9px;right:-14px;font:700 10px var(--text);color:#fff;background:var(--up-bg,var(--up));padding:0 4px}
.world .era{position:absolute;left:8px;top:6px;font:12px var(--pixel);background:#00000088;color:var(--iv-fg,var(--iv));padding:1px 8px;border:1px solid var(--bev2)}
.world .fog{position:absolute;right:4%;top:8%;font:12px var(--pixel);color:var(--kfg-4d4d6e,#4d4d6e);background:var(--kbg-ffffffaa,#ffffffaa);padding:2px 8px;border:1px dashed #666699}
.push{display:flex;gap:10px;align-items:flex-start}.push p{margin:0;font-size:12.5px}.push .mute{margin-top:4px}
.switch{flex:none;display:inline-flex;align-items:center;gap:6px;font:13px var(--pixel);cursor:pointer;background:#2b2d3c;color:#9a9ab0;border:2px solid;border-color:#55576e #15161f #15161f #55576e;padding:4px 10px;min-height:34px}
.switch i{width:12px;height:12px;background:#55576e;border:1px solid #000}
.switch[aria-pressed=true]{background:#123d22;color:#b8ffcf}.switch[aria-pressed=true] i{background:#5dff8f;box-shadow:0 0 8px #5dff8f}
.switch:disabled{opacity:.55;cursor:default}
.ladder{list-style:none;margin:0;padding:6px 10px 10px}
.rung{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:7px 10px;margin-top:10px;background:var(--kbg-fff,#fff);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);cursor:pointer;width:100%;text-align:left;font:inherit;color:inherit}
.ladder li:first-child .rung{margin-top:0}
.ladder li:not(:first-child) .rung::before{content:"";position:absolute;left:24px;top:-12px;height:10px;border-left:3px dotted #6b4a00}
.rung .no{font:18px/1 var(--pixel);color:var(--indigo-fg,var(--indigo));text-align:center}
.rung .nm b{font:15px var(--pixel);font-weight:400;margin-right:6px}.rung .nm .en{font-size:12.5px}.rung .nm .lv{font-size:11.5px;color:var(--mute);margin-left:6px;white-space:nowrap}
.rung .foes{grid-column:2;display:flex;gap:6px;align-items:end;min-height:26px}
.rung .foes .amk{margin-left:auto;align-self:center;font-size:11.5px;font-weight:700;color:var(--indigo-fg,var(--indigo));white-space:nowrap}
.rung .st{grid-column:3;grid-row:1/3;text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end;min-width:96px}
.rung .st .bar{width:96px}
.rung.done{background:var(--kbg-f4f4ea,#f4f4ea)}.rung.done .no{color:var(--mute)}
.rung.here{background:var(--kbg-f0fffe,#f0fffe);outline:2px solid #2d8f8c;outline-offset:-2px}
.rung.locked{background:var(--kbg-e6e6de,#e6e6de);color:var(--kfg-6d6d80,#6d6d80)}.rung.locked .no{color:#9a9ab0}
.rung.sel{box-shadow:0 0 0 3px #f2c14e}
.rung.bossrung{border-color:var(--kbd-e7a99f,#e7a99f) #8e1f16 #8e1f16 var(--kbd-e7a99f,#e7a99f)}
.rung .crown{position:absolute;right:-6px;top:-9px;font:700 10px var(--text);color:#fff;background:var(--dn-bg,var(--dn));padding:0 5px}
.mini{font-size:11px;color:var(--mute);white-space:nowrap}
.tag.here{color:var(--up)}.tag.lock{color:var(--kfg-6b4a00,#6b4a00)}.tag.boss{color:var(--dn);margin-left:4px}.tag.open{color:var(--magic)}.tag.done{color:var(--mute)}.tag.q{margin-left:4px}
#area-desc{margin:6px 0 2px}
.facts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;margin-top:4px}.facts b{font-weight:700}
#area-prog{margin-top:8px}#area-prog .bar{margin-top:3px}
.roster td:first-child{width:46px;text-align:center}.roster td:first-child canvas{margin:auto}
.roster .nat{display:inline-block;font-size:11px;padding:0 6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);margin-left:4px}
.forms{display:flex;flex-wrap:wrap;gap:2px;margin-top:3px;font-size:11px;color:var(--mute)}
.forms span{padding:0 5px;border:1px solid var(--kbd-c9cbe0,#c9cbe0);background:var(--kbg-f6f6fb,#f6f6fb)}
.forms span.cur{background:var(--cy);border-color:var(--bev2);color:var(--ink);font-weight:700}.forms span.unk{border-style:dashed}
.bossrow{display:flex;gap:10px;align-items:center}
.bar.boss>b{background:linear-gradient(#ff9a8a,#c63b2a)}
.scene.marsh{background:linear-gradient(#1d2433 0 22%,#2f3a4a 22% 50%,#3d4a4f 50% 62%,#24343a 62% 100%)}
.scene.marsh .moon{background:#ffd23f;box-shadow:0 0 14px 6px #ffb3405a;border-radius:0}.scene.marsh .tuft{background:#5a7a6a;box-shadow:4px -4px 0 #5a7a6a,8px 0 0 #5a7a6a}
.scene.tunnels{background:linear-gradient(#20160e 0 20%,#3a2a1a 20% 52%,#2b1f14 52% 100%)}
.scene.tunnels .moon{display:none}.scene.tunnels .tuft{background:#5b4a32;box-shadow:4px -4px 0 #5b4a32,8px 0 0 #5b4a32}
.scene .count{position:absolute;right:calc(20% - 18px);bottom:12px;font:14px var(--pixel);color:#fff;background:#000a;padding:0 5px;border:1px solid #777}
.vs .nature{font-size:11px;color:#9a9ab0;margin-top:3px}

/* forge */
.mats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mat{background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:6px;display:flex;gap:6px;align-items:center;min-width:0}
.mat b{display:block;font:18px/1 var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo))}
.mat span{font-size:11px;color:var(--mute);line-height:1.2}
.forge{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:12px;align-items:start}
.picker{display:grid;gap:4px;max-height:520px;overflow:auto}
.anvil{position:relative;background:#000;border:2px solid;border-color:#777 #222 #222 #777;color:#eaeaea;margin-bottom:12px}
.ascene{position:relative;height:120px;background:linear-gradient(#2a1a10 0 55%,#3b2616 55% 100%);overflow:hidden;border-bottom:2px solid #333}
.ascene .glow{position:absolute;left:50%;bottom:6px;width:180px;height:60px;margin-left:-90px;background:radial-gradient(#ff7a1a66,transparent 70%)}
.ascene .smith{position:absolute;left:22%;bottom:10px}.ascene .anv{position:absolute;left:50%;bottom:10px;margin-left:-24px}
.ascene .itemspr{position:absolute;left:50%;bottom:44px;margin-left:-16px;animation:bob 1.4s steps(2) infinite}
.ascene .lbl{position:absolute;left:8px;top:6px;font:12px var(--pixel);color:var(--iv-fg,var(--iv));background:#00000088;padding:1px 8px;border:1px solid var(--bev2)}
.spark{position:absolute;width:4px;height:4px;background:#ffd23f;box-shadow:0 0 4px #ff7a1a;animation:spark .7s forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.swing{animation:swing .35s}
@keyframes swing{40%{transform:rotate(-14deg) translateY(-4px)}}
.card{padding:10px 12px}.card .nm{font:19px var(--pixel)}
.rank{display:inline-flex;margin:4px 0 2px;font:12px var(--pixel);border:1px solid var(--bev2)}
.rank span{padding:1px 7px;border-right:1px solid var(--bev2);color:#fff}.rank span:last-child{border-right:0}
.rank .g{background:#6b7280}.rank .rare{background:var(--rare-bg,var(--rare))}.rank .magic{background:var(--magic-bg,var(--magic))}.rank .normal{background:#4d4d6e}.rank .h{background:#1d1d3a}
.fp{margin-top:8px}.fp .row{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#c9c9d6}.fp .row.note{margin-top:4px;color:#9a9ab0}
.bar.fpb{background:#222;border-color:#555}.bar.fpb>b{background:linear-gradient(#ffd58a,#d3871a)}
.pips{display:flex;gap:3px;margin-top:4px}.pips i{width:16px;height:8px;background:#333;border:1px solid #555}.pips i.on{background:linear-gradient(#ffe08a,#d39b12)}
.affix td:first-child{width:30px;text-align:center}.affix tr.affpick td{background:var(--kbg-fff3c9,#fff3c9)}.affix input{accent-color:#2d8f8c}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.cost{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;margin-top:6px}
.cost .c{display:inline-flex;gap:4px;align-items:center;padding:2px 6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff)}
.cost .c.short{border-color:var(--dn);color:var(--dn)}
.ess{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.ess button{display:flex;flex-direction:column;align-items:center;gap:2px;font:11px var(--text);padding:6px 2px}
.ess button b{font:12px var(--text);font-weight:700}
.opts{display:grid;gap:6px;margin-top:8px}
.opt{text-align:left;background:var(--kbg-fff,#fff);border:1px solid var(--bev2);padding:8px;cursor:pointer;font:13px var(--text);color:var(--ink)}
.opt:hover{background:var(--kbg-f0fffe,#f0fffe)}.opt small{display:block;color:var(--mute);font-size:11px}
.rules label{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px dotted var(--bev2);font-size:13px}
.result{margin-top:8px;padding:8px;border:1px solid #c9a24a;background:var(--kbg-fff6dd,#fff6dd);font-size:13px}.result:empty{display:none}

/* chronicle + save */
.chron{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:72px 26px minmax(0,1fr);gap:8px;align-items:center;padding:6px 10px;border-bottom:1px dotted var(--bev2);font-size:13px}
.tl time{font:12px var(--pixel);color:var(--mute)}
.tl li.big{background:var(--kbg-fffbd9,#fffbd9)}
.save{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.disk{display:flex;gap:12px;align-items:center}
.disk .big{font:22px var(--pixel);color:var(--up)}
.file-label{position:relative;overflow:hidden}
.file-label input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dev summary{cursor:pointer;padding:6px 10px;background:var(--kbg-f1f1ea,#f1f1ea);font-size:12px;color:var(--mute)}
.foot{text-align:center;font-size:11px;color:var(--mute);padding:6px 0 0}
body.busy .main button,body.busy .main select,body.busy .main input{pointer-events:none}

@media (min-width:721px){.app{background:linear-gradient(90deg,var(--indigo) 93px,#8f93d6 93px 96px,transparent 96px)}}
@media (max-width:1000px){.forge{grid-template-columns:minmax(0,1fr) 300px}.forge .pickcol{grid-column:1/-1;order:3}.mats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){
  .summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cslots{grid-template-columns:repeat(2,minmax(0,1fr))}.jobpicks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .map{grid-template-columns:minmax(0,1fr);grid-template-areas:"world" "push" "ladder" "area";grid-template-rows:auto}
  .adv{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"away" "battle" "trace" "slot2" "find" "side"}
  .gear,.chron,.save{grid-template-columns:minmax(0,1fr)}
  .jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jobrow{grid-template-columns:auto minmax(0,1fr) 130px;grid-template-areas:"tile who btn" "what what what" "prog prog prog"}
  .jobrow>.tile{grid-area:tile}.jobrow>.who-col{grid-area:who}.jobrow>.what{grid-area:what}.jobrow>.prog{grid-area:prog}.jobrow>.btn{grid-area:btn}
}
@media (max-width:720px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto}
  .rail{order:2;align-self:end;position:sticky;top:auto;bottom:0;height:auto;z-index:5;flex-direction:row;padding:4px 4px calc(6px + env(safe-area-inset-bottom));gap:2px;border-right:0;border-top:3px double #8f93d6}
  .rail .mark{display:none}
  .rail a{flex:1;padding:6px 0 4px}
  .rail a b{font-size:13px}
  .rail a small{font-size:9.5px}
  .badge{right:6px;top:2px}
  .main{padding:12px 10px}
  .top h1{font-size:22px}
  .tiles{grid-template-columns:1fr 1fr}
  .sigs{grid-template-columns:minmax(0,1fr)}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .log{height:200px}
  .forge{grid-template-columns:minmax(0,1fr)}.forge .pickcol{order:-1;grid-column:auto}
  .picker{display:flex;overflow-x:auto;max-height:none;padding-bottom:6px}.picker .it{flex:0 0 210px}
  .mat{flex-direction:column;text-align:center;gap:2px;padding:5px 2px}.mat canvas{margin:auto}
  .ess{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rail a b{font-size:11px}.rail a small{font-size:8.5px}.rail .mark{display:none}.rail{gap:1px}.badge{right:0;top:0}
  .world{height:230px}
  .summary{grid-template-columns:repeat(2,minmax(0,1fr))}.sstat .lines{padding-left:12px}.sheethead .tabs{margin-left:0}
  .rail a small{font-size:8px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden}.rail a{min-width:0}
  .mc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.mc-body{grid-template-columns:minmax(0,1fr)}.mc-count{margin-left:0}
  .er-slots{grid-template-columns:minmax(0,1fr)}.er-form{grid-template-columns:minmax(0,1fr);gap:4px 0}.er-form .k{padding-top:8px}
  .rail a .lock,.badge.newtab{right:0;top:0}.cslot.empty{min-height:110px}
  .chest-stage{flex-direction:column;align-items:stretch}.chest-stage canvas{margin:0 auto}.chest-stage .rays{left:50%;margin-left:-55px}.lvlup b{font-size:28px}.banner b{font-size:22px}
  .rung{grid-template-columns:24px minmax(0,1fr);padding:7px 8px}
  .rung .st{grid-column:2;grid-row:auto;flex-direction:row;align-items:center;justify-content:space-between;min-width:0}
  .rung .st .bar{width:90px}
  .rung .nm .lv{display:inline-block}
  .ladder li:not(:first-child) .rung::before{left:18px}
}
@media (prefers-reduced-motion:reduce){.scene.shake,.scene .who.foe.glim,.px,.loot,.pillar,.banner,.lvlup,.flash,.chestbox.open .rays,.dmg.crit{animation-duration:.01ms!important;animation-iteration-count:1!important}.moments li,.best,.chestbox .stat{transition:none}
  .scene .who,.scene .auto i{animation:none}.dmg{animation-duration:.01s}.bar>b{transition:none}}

/* ---------- GLOW-1 (visible power): region backdrops, weapon glow, records, boss and region moments ---------- */
.scene .sky{position:absolute;inset:0;pointer-events:none}
.scene .sky i{position:absolute;display:block}
.scene .area,.scene .auto,.scene .clock{z-index:6}
/* the strip's flag is one line: the Rebirth automation list's generic .auto grid (REBIRTH-2) split "● AUTO" into two rows, and the day/night clock
   below it covered the second (2026-10-17); fixed line boxes keep flag and clock stacked in every font */
.scene .auto{background:#000000b3;padding:0 6px;display:block;white-space:nowrap;line-height:16px}
.scene .clock{position:absolute;right:8px;top:26px;font:11px var(--pixel);line-height:15px;white-space:nowrap;color:#e6e6f0;background:#000000b3;padding:0 6px}
#scene-hero{margin-left:-20px}
/* D-259 battle scene: one canvas for the hero doll, the foes and every effect (battlescene.ts); the Still switch */
.scene canvas.stage{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.scene .still{position:absolute;left:8px;bottom:6px;z-index:6;font:11px var(--pixel);color:#e6e6f0;background:#000000b3;border:1px solid #6a6a80;padding:2px 8px;cursor:pointer}
.scene .still[aria-pressed="true"]{color:#ffd24d;border-color:#ffd24d}.scene .still[hidden]{display:none}
.flame{position:absolute;left:0;right:0;margin:0 auto;width:max-content;max-width:94%;top:10px;z-index:8;pointer-events:none;text-align:center;animation:flameout 2.2s forwards}
.flame .num{position:relative;font:40px/1 var(--pixel);color:#fff6c2;text-shadow:0 0 6px #ff9a1a,2px 2px 0 #000;animation:quake .12s steps(2) 8}
.flame .fire{position:absolute;left:-26px;right:-26px;bottom:-10px;height:86px;z-index:-1;filter:blur(1px);transform-origin:bottom;animation:flick .18s steps(2) infinite;
  background:radial-gradient(ellipse 30% 70% at 25% 100%,#ffd23f 0 30%,#ff7a1a 50%,transparent 72%),radial-gradient(ellipse 28% 85% at 55% 100%,#fff3a0 0 25%,#ff9a1a 50%,transparent 74%),radial-gradient(ellipse 30% 65% at 82% 100%,#ffd23f 0 30%,#e8411a 55%,transparent 75%)}
.flame .tag{display:block;margin-top:6px;font:12px var(--pixel);color:var(--kfg-1b1608,#1b1608);background:#ffd23f;padding:1px 8px;border:1px solid #8a5a00;white-space:nowrap}
@keyframes flick{50%{transform:scaleY(1.18) scaleX(.96)}}
@keyframes quake{50%{transform:translate(1px,-1px)}}
@keyframes flameout{0%{opacity:0;transform:scale(1.8)}10%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
.splash{position:absolute;left:0;right:0;top:0;height:100%;z-index:9;display:flex;align-items:center;pointer-events:none;overflow:hidden}
.splash .band{width:100%;padding:10px 16px;background:linear-gradient(90deg,transparent,#000d 12%,#000d 88%,transparent);border-top:2px solid #ffd23f;border-bottom:2px solid #ffd23f;animation:bandin 2.4s forwards}
.splash .k{font:11px var(--pixel);color:#ffd23f;letter-spacing:3px}.splash .t{display:block;font:26px/1.15 var(--pixel);color:#fff}.splash .s{display:block;font:12px var(--text);color:#c9c9d6}
@keyframes bandin{0%{transform:translateX(-100%)}14%{transform:translateX(0)}82%{transform:translateX(0);opacity:1}100%{transform:translateX(100%);opacity:0}}
.scene.slow .who{animation-duration:3.6s}
.clear{position:absolute;left:0;right:0;top:12px;margin:auto;width:max-content;max-width:94%;z-index:9;text-align:center;pointer-events:none;animation:clearin 3.4s forwards;background:#000000c4;border:2px solid #ffd23f;padding:6px 16px 4px}
.clear .k{display:inline-block;font:13px var(--pixel);color:var(--kfg-1b1608,#1b1608);background:#ffd23f;padding:1px 10px;border:1px solid #8a5a00}
.clear .t{display:block;font:24px/1.2 var(--pixel);color:#fff;margin-top:4px}
.clear .s{display:block;font:12px var(--text);color:#e6e6f0}
.clear canvas{margin:6px auto 0}
@keyframes clearin{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.08)}18%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
.c-rec{color:#ffd23f}
table.records td.v{font:15px var(--pixel);white-space:nowrap}
table.records .new{display:inline-block;font:11px var(--pixel);color:var(--kfg-1b1608,#1b1608);background:#ffd23f;border:1px solid #8a5a00;padding:0 5px;margin-left:6px}
@media (prefers-reduced-motion:reduce){.flame,.flame .num,.flame .fire,.splash .band,.clear{animation:holdfade 2.4s forwards!important}.flame .fire,.flame .num{animation:none!important}.scene.slow .who{animation:none}}
@keyframes holdfade{0%,85%{opacity:1}100%{opacity:0}}

/* ---------- TOWER-1: the Test Tower (Map → 塔 Tower) ---------- */
.tw{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px;padding:10px}
.twr{background:linear-gradient(#1b1f3a,#2a3150);border:2px solid;border-color:#777 #222 #222 #777;padding:10px 10px 6px}
.twr .top,.twr .tmore{font:11px var(--pixel);color:#c9d6ff;text-align:center;margin:0 0 6px}.twr .tmore.tbest{color:#ffd23f}
.twinfo .bar{margin-top:4px}.twinfo .bar>b{background:#2d8f8c}
.tfl{display:grid;grid-template-columns:44px minmax(0,1fr) 4px;align-items:center;gap:6px;height:24px;margin-bottom:3px;font:12px var(--pixel);color:#c9d6ff}
.tfl .slab{height:100%;background:#3a4266;border:1px solid #59618c;position:relative;line-height:22px;padding:0 20px 0 6px;font-size:11px;color:#e6ebff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tfl.lock .slab{background:#262b44;border-color:#363c5c;color:#a3abd6}
.tfl.done .slab{background:#2f4a5a;border-color:#4f7d8f}
.tfl.cur .slab{background:var(--kbg-cbfffe,#cbfffe);border-color:var(--kbd-fff,#fff);color:var(--kfg-1d1d3a,#1d1d3a)}
.tfl.guard .slab::after{content:"♛";position:absolute;right:6px;color:#ffd23f}
.tfl.mile .slab{box-shadow:inset 0 0 0 2px #ffd23f}
.tfl .rb{width:4px;height:100%}
/* D-231 (P-120 look B): the Legend / Unique band beside the floors */
.tfls{position:relative}.tfls.hasband{padding-right:30px}
.tfl.band-uq .slab{box-shadow:inset 4px 0 0 #3ddc97;background:#2d5f59}.tfl.band-lg .slab{box-shadow:inset 4px 0 0 #f2c230}
.tfl.mile.band-uq .slab{box-shadow:inset 0 0 0 2px #ffd23f,inset 6px 0 0 #3ddc97}.tfl.mile.band-lg .slab{box-shadow:inset 0 0 0 2px #ffd23f,inset 6px 0 0 #f2c230}
.tfl.cur.band-uq .slab,.tfl.cur.band-lg .slab{background:var(--kbg-cbfffe,#cbfffe)}
.tbrk{position:absolute;right:0;top:0;width:26px;border:2px solid #3ddc97;border-left:none;background:linear-gradient(#3ddc9733,#3ddc9766);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tbrk.lg{border-color:#f2c230;background:linear-gradient(#f2c23033,#f2c23066)}
.tbrk span{writing-mode:vertical-rl;font:12px var(--pixel);color:#eafff5;letter-spacing:2px;white-space:nowrap;text-shadow:0 0 3px #0d3d2e}
.tbrk.lg span{color:#fff6d6;text-shadow:0 0 3px #3d2d08}
.twr .tmore.tbandnote{color:#bfeedd;margin:6px 0 0}
.twords{margin-top:4px;font-size:12.5px;color:var(--mute)}.twords.uq{color:var(--kfg-0a7556,#0a7556);font-weight:700}.twords.lg{color:var(--kfg-8a5a00,#8a5a00);font-weight:700}
.tpity .track{height:10px;background:var(--kbg-e3e6f5,#e3e6f5);border:1px solid #9aa0c8;margin:2px 0}.tpity .track>b{display:block;height:100%;background:linear-gradient(90deg,#0e8f63,#3ddc97)}
.twinfo table td{vertical-align:top}.twinfo td.k{color:var(--mute);width:130px}
.tchip{display:inline-block;font:12px var(--pixel);padding:0 6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff)}
.tchip.rule{background:#1d1d3a;color:#cbfffe;border-color:#1d1d3a}
.tfc{display:flex;flex-wrap:wrap;gap:4px}.tfc span{font:11px var(--pixel);padding:0 6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff)}
.tfc .ok{background:var(--kbg-e3f7e8,#e3f7e8);border-color:#1d6b3a;color:var(--kfg-1d6b3a,#1d6b3a)}.tfc .big{border-color:#8a5a00;background:var(--kbg-fff4cf,#fff4cf);color:var(--kfg-6b4a00,#6b4a00)}
.thold{margin:8px 0;padding:6px 10px;background:var(--kbg-fff4cf,#fff4cf);border:1px solid #8a5a00;color:var(--kfg-6b4a00,#6b4a00);font-size:12.5px}
.scene .plaque{position:absolute;left:50%;top:32px;transform:translateX(-50%);font:18px var(--pixel);color:#cbfffe;border:2px solid #59618c;background:#1b1f3a;padding:0 10px;z-index:2;text-shadow:0 0 8px #3d8bff}
.splash.tower .band{border-color:#8fe3ff}.splash.tower .k{color:#8fe3ff}
@media (max-width:720px){.tw{grid-template-columns:minmax(0,1fr)}.twinfo td.k{width:92px}}
.twinfo b.big{font:20px var(--pixel);font-weight:400}

/* ---------- LIVES-1: Jobs modes, life panel, Echo board (D Rings), heirlooms, rebirth window (lives-preview-v2) ---------- */
:root{--heir:#6a2fb8}
.r-heir{color:var(--heir);font-weight:700}
.modes{display:flex;gap:4px;padding:8px 10px 0}.modes button{font:13px var(--pixel);background:var(--kbg-eef0f8,#eef0f8);color:var(--ink);border:1px solid var(--bev2);padding:3px 12px;cursor:pointer}.modes button.on{background:var(--indigo);color:var(--iv-fg,var(--iv))}
.life{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.life div{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px 8px;min-width:0}.life b{display:block;font:20px var(--pixel);font-weight:400}.life span{font-size:12px;color:var(--mute)}
.life .r{border-color:#2d8f8c;background:var(--kbg-f0fffe,#f0fffe)}
.jobrow.rbrow{grid-template-columns:auto 150px minmax(0,1fr) 170px 170px}
.bw{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:10px;padding:10px}
.board{position:relative;background:radial-gradient(circle at 50% 50%,#2a2f5a,#121530 70%);border:2px solid;border-color:#777 #222 #222 #777;aspect-ratio:1/1;overflow:hidden;max-width:640px;width:100%;justify-self:center}
.board svg{position:absolute;inset:0;width:100%;height:100%}
.board .n{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #59618c;background:#262b44;cursor:pointer;padding:0;display:grid;place-items:center;font:10px var(--pixel);color:#a3abd6}
.board .n.small{width:22px;height:22px}.board .n.notable{width:27px;height:27px;border-width:3px}.board .n.keystone{width:28px;height:28px;border-width:3px;border-radius:6px;transform:translate(-50%,-50%) rotate(45deg)}.board .n.keystone span{transform:rotate(-45deg)}
.board .n.core{width:34px;height:34px;background:var(--kbg-cbfffe,#cbfffe);border-color:var(--kbd-fff,#fff);color:var(--kfg-1d1d3a,#1d1d3a);font-size:12px}
.board .n.can{border-color:var(--kbd-cbfffe,#cbfffe);box-shadow:0 0 0 2px #cbfffe55}.board .n.own{background:var(--qc);border-color:var(--kbd-fff,#fff);color:var(--kfg-0b0f22,#0b0f22);box-shadow:0 0 10px var(--qc)}
.board .n.learned{width:20px;height:20px;border-style:dashed}.board .n.learned.lit{border-style:solid;border-color:#ffd23f}.board .n.chosen{outline:2px solid #ffd23f;outline-offset:3px}
.board .ql{position:absolute;font:12px var(--pixel);pointer-events:none;text-shadow:0 0 6px #000}
.side{display:flex;flex-direction:column;gap:8px;min-width:0}
.reso{border:2px solid #2d8f8c;background:var(--kbg-f0fffe,#f0fffe);padding:8px}.reso b{font:24px var(--pixel);font-weight:400;display:block}.reso small{font-size:12px;color:var(--mute);display:block}
.reso .bar{position:relative;height:8px;border:1px solid var(--bev2);background:var(--kbg-e6e6f4,#e6e6f4);margin:6px 0 2px}.reso .bar>i{position:absolute;inset:0;transform-origin:left;background:#2d8f8c}
.echo{font:20px var(--pixel)}.echo small{font:12px var(--text);color:var(--mute)}
.det{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px 8px;font-size:12.5px;min-height:80px}.det b{font:14px var(--pixel);font-weight:400;display:block}.det .btn{margin-top:6px}
.board .n.small.ranked{border-color:#ffd23f;border-width:3px}.board .n.small.ranked span{font-size:9px;color:var(--kfg-0b0f22,#0b0f22)}
.det .rk{font-size:12px;color:var(--mute);margin-top:4px}
.mast{display:grid;gap:4px;font-size:12px}.mast>b{font:13px var(--pixel);font-weight:400}.mrow{display:flex;justify-content:space-between;align-items:center;gap:8px;border-left:4px solid var(--qc);padding:2px 0 2px 6px;background:var(--kbg-fff,#fff)}
.mrow>div{display:grid;min-width:0}.mrow .mn{font:12.5px var(--pixel)}.mrow.lock{opacity:.6}.mrow .btn{flex:none}
.tot{font-size:12px}.tot div{display:flex;justify-content:space-between;border-bottom:1px dotted var(--kbd-c7c7dd,#c7c7dd)}.tot>b{font:13px var(--pixel);font-weight:400}
.heirs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px}
.hc{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);padding:8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.hc.own{border-color:var(--heir);box-shadow:inset 0 0 0 1px #c9a0ff}.hc.ready{border-color:var(--badge);outline:2px solid var(--badge);outline-offset:-4px}
.hc.lock{background:var(--kbg-f1f1ea,#f1f1ea)}.hc.lock canvas{filter:grayscale(1);opacity:.5}
.hc .t{display:flex;gap:8px;align-items:center}.hc .art{background:#1b1f3a;border:1px solid #363c5c;padding:3px}
.hc .nm{font:14px var(--pixel);color:var(--heir);line-height:1.2}.hc.lock .nm{color:var(--mute)}.hc .jp{font-size:11px;color:var(--mute)}
.hc .fx{font-size:12px}.hc .tag{font:11px var(--pixel);align-self:flex-start;padding:0 6px;border:1px solid var(--heir);color:var(--heir)}
.hc.lock .tag{border-color:var(--bev2);color:var(--mute)}
.hc .tag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.rb .btns{justify-content:flex-end;padding:10px}.hc .btn{align-self:flex-start}
.heirnote{margin:0;font-size:12px}
.modal .box.rb{max-width:600px;max-height:calc(100vh - 32px);overflow:auto}
.who2{display:flex;gap:12px;align-items:center;padding:10px;border-bottom:1px dashed var(--bev2)}.who2 b{font:20px var(--pixel);font-weight:400}
.keep{padding:10px}.keep h4,.cols2 h4{margin:0 0 6px;font:13px var(--pixel);font-weight:400}.keep h4 .mute{font:12px var(--text)}
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pick label{display:flex;gap:8px;align-items:center;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:5px 8px;font-size:12.5px;cursor:pointer;min-width:0}
.pick label.on{border:2px solid #2d8f8c;background:var(--kbg-f0fffe,#f0fffe)}.pick input{accent-color:#2d8f8c}
.gift{margin-top:6px;font-size:12.5px;border:1px solid var(--heir);background:var(--kbg-faf5ff,#faf5ff);padding:5px 8px}.gift b{color:var(--heir)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 10px 10px}.cols2 ul{margin:0;padding-left:16px;font-size:12.5px}
.ech{width:100%;border-collapse:collapse;font-size:13px}.ech td{border-bottom:1px dotted var(--kbd-c7c7dd,#c7c7dd);padding:3px 10px}.ech td:last-child{text-align:right;font:14px var(--pixel)}.ech tr.t td{border-top:2px solid var(--bev2);font-weight:700}
.reso2{margin:8px 10px;padding:6px 10px;border:2px solid #2d8f8c;background:var(--kbg-f0fffe,#f0fffe);font-size:13px}.reso2 b{font:16px var(--pixel);font-weight:400}
.rbwarn{margin:0 10px;padding:6px 10px;border:1px solid #c98a00;background:var(--kbg-fff7e0,#fff7e0);font-size:12.5px}
.rbsec{padding:10px;border-bottom:1px dashed var(--bev2)}.rbsec h4{margin:0 0 6px;font:13px var(--pixel);font-weight:400;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}.rbsec h4 .mute{font:12px var(--text)}
.tim{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px;align-items:center}
.tim .chart{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);position:relative;height:110px;display:flex;align-items:center;justify-content:center}.tim .chart svg{position:absolute;inset:0;width:100%;height:100%}
.verdict{border:2px solid;padding:6px 8px;font-size:12.5px}.verdict b{font:15px var(--pixel);font-weight:400;display:block}
.verdict.go{border-color:#1d6b3a;background:var(--kbg-eefaf0,#eefaf0)}.verdict.wait{border-color:#8a5a00;background:var(--kbg-fff8e6,#fff8e6)}
.proj{font-size:12.5px;margin-top:6px}
.rbsec .first{margin-top:8px;border:2px dashed #8a5a00;background:var(--kbg-fff8e6,#fff8e6);padding:5px 8px;font-size:12.5px}.rbsec .first.ready{border-style:solid;border-color:#1d6b3a;background:var(--kbg-eefaf0,#eefaf0)}
.pacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pact{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px 8px;cursor:pointer;font-size:12.5px;min-width:0}
.pact.on{border:2px solid #7a1914;background:var(--kbg-fff6f4,#fff6f4)}.pact b{font:13px var(--pixel);font-weight:400;display:block}.pact .bn{color:var(--kfg-7a1914,#7a1914);font:12px var(--pixel)}
.pnote{margin-top:6px;font-size:12.5px;color:var(--mute)}
/* TRIALS-1 試練 (frontier-play preview v1 §C): the shrine board and the bar for the Trial in force */
.trials{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px}
.tr{background:var(--kbg-fff,#fff);border:1px solid var(--bev2);padding:8px 10px;display:grid;gap:5px;align-content:start;text-align:left;font:inherit;color:inherit;min-width:0}
button.tr{cursor:pointer}button.tr:disabled{cursor:default}button.tr:focus-visible{outline:3px solid #946000;outline-offset:2px}
.tr.on{border:2px solid #8a5a00;background:var(--kbg-fff8e6,#fff8e6)}.tr.done{border-color:#1d6b3a;background:var(--kbg-eefaf0,#eefaf0)}
.tr .t{display:flex;justify-content:space-between;align-items:baseline;gap:6px}.tr .t b{font:15px var(--pixel);font-weight:400}
.tr .c{display:inline-flex;gap:3px}.tr .c i{width:11px;height:11px;border:1px solid #8a5a00;display:inline-block}.tr .c i.on{background:#8a5a00}
.tr p{margin:0;font-size:12.5px;line-height:1.45}.tr .lbl{font-size:11px;color:var(--mute);letter-spacing:.04em}.tr .why{color:var(--kfg-7a1914,#7a1914)}
.tr.locked{background:var(--kbg-e9ebf6,#e9ebf6);border-style:dashed;color:var(--kfg-6e6e8c,#6e6e8c)}.tr.locked .t b{color:var(--kfg-6e6e8c,#6e6e8c)}.tr .tier{font-size:12px}
.pactbar.trialbar{border-color:#8a5a00;background:var(--kbg-fff8e6,#fff8e6)}.pactbar.trialbar b{color:var(--kfg-5b3c00,#5b3c00)}
.auto{display:grid;gap:3px}.auto .ar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:3px 10px;align-items:center;font-size:12.5px}
.auto .lv{font:12px var(--pixel);border:1px solid var(--bev2);padding:0 6px;text-align:center;white-space:nowrap}.auto .lv.got{background:#1f6f6c;color:#fff;border-color:#1f6f6c}
.auto .st{font:11px var(--pixel);white-space:nowrap}.auto .st.got{color:var(--kfg-1d6b3a,#1d6b3a)}.auto .st.lock{color:var(--mute)}
.pactbar{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 10px;padding:6px 10px;border:2px solid #7a1914;background:var(--kbg-fff6f4,#fff6f4);font-size:12.5px}.pactbar b{font:13px var(--pixel);font-weight:400;color:var(--kfg-7a1914,#7a1914)}
.pactbar .pc{display:inline-flex;gap:6px;align-items:center}
.side .plan{display:flex;flex-direction:column;gap:4px;font-size:12.5px;border-top:1px dashed var(--bev2);padding-top:8px}.side .plan .btns{display:flex;flex-wrap:wrap;gap:6px}
.banner.rebirth b{color:#cbfffe}.banner.wake b{color:#ffd23f}
@media (max-width:900px){.jobrow.rbrow{grid-template-columns:auto minmax(0,1fr) 150px}.bw{grid-template-columns:minmax(0,1fr)}.heirs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.life{grid-template-columns:repeat(2,minmax(0,1fr))}.pick,.cols2,.tim,.pacts{grid-template-columns:1fr}
  .board .n.small{width:17px;height:17px}.board .n.notable{width:22px;height:22px}.board .n.keystone{width:22px;height:22px}.board .n.core{width:26px;height:26px}.board .n.learned{width:16px;height:16px}}

/* ---------- ACH-1: Chronicle modes and the 実績 page (achievements-preview-v2, layout E) ---------- */
:root{--secret:#5a2a82;--teal:#1f6f6c}
.chron-modes{padding:0 0 10px}
.bar.ach>b{background:#2d8f8c}.bar.ach.done>b{background:#8a5a00}
.ac-tot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px 10px 0}.ac-tot div{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:5px 8px;min-width:0}.ac-tot b{display:block;font:20px var(--pixel);font-weight:400}.ac-tot span{font-size:12px;color:var(--mute)}
.ac-tot .k{border-color:#8a5a00;background:var(--kbg-fff8e6,#fff8e6)}
.ac-sect{font:12px var(--pixel);color:var(--mute);padding:10px 10px 0}
.ac-chip{font:11px var(--pixel);padding:0 6px;border:1px solid var(--bev2);color:var(--mute);display:inline-block}.ac-chip.p{border-color:var(--teal);color:var(--teal)}.ac-chip.u{border-color:#8a5a00;color:var(--kfg-8a5a00,#8a5a00)}.ac-chip.c{border-color:var(--rare);color:var(--rare)}.ac-chip.s{border-color:var(--secret);color:var(--secret)}
.ac-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px 10px 0}.ac-next p{margin:0;font-size:12.5px}
.ac-ng{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;align-items:center;border:2px solid #2d8f8c;background:var(--kbg-f0fffe,#f0fffe);padding:6px 8px;min-width:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.ac-ng .ic{grid-row:1/4}.ac-ng b{font:13px var(--pixel);font-weight:400;line-height:1.3}.ac-ng small{font-size:12px;color:var(--mute)}
.ac-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:8px 10px 10px}
.ac-card{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);min-width:0}.ac-card.full{border-color:#8a5a00;background:var(--kbg-fffaf0,#fffaf0)}.ac-card.secret{border-color:var(--secret);background:var(--kbg-faf6ff,#faf6ff)}
.ac-card summary{list-style:none;cursor:pointer;padding:6px 8px 7px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;align-items:center}
.ac-card summary::-webkit-details-marker{display:none}
.ac-card .ttl{font:14px var(--pixel)}.ac-card .cnt{font-size:12px;color:var(--mute)}.ac-card summary .bar{grid-column:1/-1}
.ac-card .ac-seal,.ac-card .earn{grid-column:1/-1;font-size:11.5px;color:var(--mute)}.ac-card .ac-seal b{font-weight:700;color:var(--rare)}.ac-card.full .ac-seal b{color:var(--kfg-8a5a00,#8a5a00)}.ac-card .earn b{color:var(--teal);font-weight:700}.ac-card.secret .earn b{color:var(--secret)}
.ac-sg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:4px 8px 8px}
.ac-st{aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;position:relative;cursor:pointer;padding:0;border:0;background:radial-gradient(circle,var(--kbg-f7f7fc,#f7f7fc) 0 62%,transparent 63%),conic-gradient(#2d8f8c var(--p),var(--kbg-d9d9ea,#d9d9ea) 0)}
.ac-st canvas{filter:grayscale(1);opacity:.4}
.ac-st.got{background:var(--kbg-fff1ee,#fff1ee);border:2px solid #b3261e;transform:rotate(-8deg)}.ac-st.got canvas{filter:none;opacity:1}
.ac-st.sealst{border-radius:7px;background:var(--kbg-f7f2e2,#f7f2e2);border:2px dashed #8a5a00}.ac-st.sealst.got{background:var(--kbg-ffefb8,#ffefb8);border-style:solid;transform:rotate(-6deg)}
.ac-st.hid{background:var(--kbg-efe8f8,#efe8f8);border:2px dashed #9b80bf}.ac-st.hid em{font:13px var(--pixel);font-style:normal;color:var(--secret)}.ac-st.hid.got{background:var(--kbg-f1e6ff,#f1e6ff);border:2px solid var(--secret);transform:rotate(-8deg)}
.ac-st .pc{position:absolute;bottom:-3px;right:-4px;font:10px var(--pixel);background:var(--kbg-fff,#fff);border:1px solid var(--bev2);padding:0 2px;color:var(--teal)}
.ac-st.sel{outline:2px solid #ffd23f;outline-offset:2px}
.ac-det{margin:0 8px 8px;border-top:1px dashed var(--bev2);padding-top:6px;font-size:12.5px;min-height:56px}.ac-det b{font:13px var(--pixel);font-weight:400;display:block}
.ac-dots{display:none}
.banner.ach b{color:#ffd23f}.banner.sec{border-color:#b48cff #3b1f5c #3b1f5c #b48cff}.banner.sec b{color:#e2ccff}
@media (max-width:900px){.ac-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.ac-tot{grid-template-columns:repeat(2,minmax(0,1fr))}.ac-next,.ac-cards{grid-template-columns:1fr}.ac-cards{gap:6px}
  .ac-card:not([open]) .ac-dots{display:flex;gap:3px;grid-column:1/-1;flex-wrap:wrap}.ac-dots i{width:9px;height:9px;border-radius:50%;background:var(--kbg-d9d9ea,#d9d9ea);border:1px solid #9a9ac0}.ac-dots i.g{background:#b3261e;border-color:#7a1914}
  .ac-dots i.s{border-radius:2px;background:var(--kbg-f7f2e2,#f7f2e2);border-color:#8a5a00}.ac-dots i.s.g{background:#8a5a00}.ac-dots i.h{background:var(--kbg-efe8f8,#efe8f8);border-color:#9b80bf}.ac-dots i.h.g{background:var(--secret-bg,var(--secret))}}


/* ACH-2 (collection preview v3): the 収集 Collection tab: permanent-bonuses strip and series stamps with tiers I–V. */
.perm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px}
.pb{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px 8px;min-width:0;cursor:pointer;text-align:left;font:inherit;color:inherit}.pb b{display:block;font:19px var(--pixel);font-weight:400;line-height:1.2}.pb span{font-size:12px;color:var(--mute);display:block}
.pb.pb-res{border-color:#2d8f8c;background:var(--kbg-f0fffe,#f0fffe)}.pb.pb-ach{border-color:#8a5a00;background:var(--kbg-fff8e6,#fff8e6)}.pb.pb-card{border-color:#b3261e;background:var(--kbg-fff4f2,#fff4f2)}.pb.pb-board{border-color:#5a4fb0;background:var(--kbg-f6f4ff,#f6f4ff)}
.pb.on{outline:2px solid var(--indigo,#1b1f6b);outline-offset:1px}
.ptot{padding:0 10px 10px;font-size:13px}.ptot b{font:15px var(--pixel);font-weight:400}
.ac-sg.ac-sg{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 7px;padding:6px 8px 8px}
.ac-ss{position:relative;cursor:pointer;padding:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;font:inherit;color:inherit}
.ac-ss .disc{width:100%;max-width:72px;aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,var(--kbg-f7f7fc,#f7f7fc) 0 62%,transparent 63%),conic-gradient(#2d8f8c var(--p,0%),var(--kbg-d9d9ea,#d9d9ea) 0)}
.ac-ss .disc canvas{filter:grayscale(1);opacity:.4}
.ac-ss.t1 .disc canvas,.ac-ss.t2 .disc canvas,.ac-ss.t3 .disc canvas,.ac-ss.t4 .disc canvas,.ac-ss.t5 .disc canvas{filter:none;opacity:1}
.ac-ss .tier{position:absolute;top:-4px;right:-4px;font:11px var(--pixel);min-width:20px;padding:0 3px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--mute);text-align:center}
.ac-ss.t1 .tier,.ac-ss.t2 .tier{border-color:#7a7f8c;color:var(--kfg-4d4d6e,#4d4d6e)}.ac-ss.t3 .tier,.ac-ss.t4 .tier{border-color:#b3261e;color:var(--kfg-b3261e,#b3261e)}.ac-ss.t5 .tier{border-color:#8a5a00;background:var(--kbg-ffefb8,#ffefb8);color:var(--kfg-5b3c00,#5b3c00)}
.ac-ss.t5 .disc{background:var(--kbg-fff1d6,#fff1d6);border:2px solid #8a5a00;transform:rotate(-8deg)}
.ac-ss .pips{display:flex;gap:2px}.ac-ss .pips i{width:7px;height:7px;border:1px solid #9a9ac0;background:var(--kbg-ececf6,#ececf6)}.ac-ss .pips i.on{background:#b3261e;border-color:#7a1914}.ac-ss.t5 .pips i.on{background:#8a5a00;border-color:#5b3c00}
.ac-ss.hid .disc{background:var(--kbg-efe8f8,#efe8f8);border:2px dashed #9b80bf}.ac-ss.hid em{font:13px var(--pixel);font-style:normal;color:var(--secret)}.ac-ss.hid.got .disc{background:var(--kbg-f1e6ff,#f1e6ff);border:2px solid var(--secret);transform:rotate(-8deg)}.ac-ss.hid.got .disc canvas{filter:none;opacity:1}
.ac-ss.sel .disc{outline:2px solid #ffd23f;outline-offset:2px}
/* PLAYTEST-4 (D-170): achievements earned since the page was last open */
.ac-ss.new .disc{box-shadow:0 0 0 3px var(--badge)}.ac-ss.new::after{content:'NEW';position:absolute;top:-6px;left:-4px;font:700 9px/14px var(--text);padding:0 3px;background:var(--badge);color:#fff}
html[lang="zh-Hant"] .ac-ss.new::after,html[lang="ja"] .ac-ss.new::after{content:'新'}
.ac-newtag{margin-left:6px;font:700 9px/14px var(--text);padding:0 4px;background:var(--badge);color:#fff;vertical-align:2px}
.pb{position:relative}.pb .badge{top:-8px;right:-6px;color:#fff;font-size:11px}
.ac-tt{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}.ac-tt td{padding:2px 4px;border-bottom:1px dotted var(--kbd-c7c7dd,#c7c7dd)}.ac-tt tr.ok td{color:var(--kfg-1d6b3a,#1d6b3a)}.ac-tt tr.now td{background:var(--kbg-f0fffe,#f0fffe);font-weight:700}
.ac-dots i.p{background:var(--kbg-e8a59e,#e8a59e);border-color:#b3261e}.ac-dots i.v{background:#8a5a00;border-color:#5b3c00}.ac-dots i.h.v{background:var(--secret-bg,var(--secret))}
#chron-life{grid-template-columns:minmax(0,1fr) 300px}#chron-life>.box:last-child{grid-column:1/-1}
@media (max-width:900px){.perm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){#chron-life{grid-template-columns:minmax(0,1fr)}.pb b{font-size:17px}.chron-modes{flex-wrap:wrap}.chron-modes button{padding:3px 8px;white-space:nowrap}}

/* HEAT-1 (instability v0.1, heat-preview-v2): 不安定度 Instability ★ on the map, the tower, the Watchtower and the Album. */
.hpips{font:12px var(--pixel);letter-spacing:1px;white-space:nowrap;color:#9a9ab5;margin-left:6px}.hpips i{font-style:normal}.hpips i.g{color:var(--kfg-a87400,#a87400)}.hpips i.p{color:var(--kfg-1f6f6c,#1f6f6c)}
#area-heat{margin-top:8px}#area-heat:empty{display:none}.hhead{font:13px var(--pixel);color:var(--mute);border-top:1px dashed var(--bev2);padding-top:6px}
.hseg{display:flex;margin:6px 0 8px;flex-wrap:nowrap}.hseg button{flex:1;min-width:0;font:15px var(--pixel);padding:5px 0;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);cursor:pointer;margin-left:-1px}
.hseg button.on{background:var(--indigo);color:#ffe9a8}.hseg button:disabled:not(.on){color:var(--kfg-8a8aa6,#8a8aa6);background:var(--kbg-f3f3f8,#f3f3f8);cursor:default}.hseg button small{display:block;font:11px var(--text);opacity:.9}
.hkv{width:100%;border-collapse:collapse;font-size:13px}.hkv td{padding:3px 6px;border-bottom:1px dotted var(--kbd-c7c7dd,#c7c7dd);vertical-align:top}.hkv td:first-child{color:var(--mute);width:34%}
.tchip.trait{border-color:#7a3db8;color:var(--kfg-5a2a82,#5a2a82);background:var(--kbg-f6f0ff,#f6f0ff)}.tchip.weak{border-color:#c99a1c;color:var(--kfg-6b4a00,#6b4a00);background:var(--kbg-fff3d6,#fff3d6)}
.hready{display:inline-block;font:13px var(--pixel);padding:0 8px;border:2px solid}.hready.ready{border-color:#1d6b3a;color:var(--kfg-1d6b3a,#1d6b3a);background:var(--kbg-effaf2,#effaf2)}.hready.risky{border-color:#9a4a00;color:var(--kfg-9a4a00,#9a4a00);background:var(--kbg-fff6ea,#fff6ea)}.hready.notyet{border-color:#a3253f;color:var(--kfg-a3253f,#a3253f);background:var(--kbg-fff0f3,#fff0f3)}
.hrd{margin-top:8px}
/* D-244: the Auto ★ switch under the area dial, and its next-step line */
/* STARS-1 (stars v0.1, frontier-play-preview-v1 §A): the dial past ★3 (夢魘 Nightmare), this life's elite, the region's nemeses, imprints */
.hseg.night{flex-wrap:wrap}.hseg.night button{flex:1 0 calc(25% - 1px);margin-top:-1px}.hseg button.nm:not(.on){background:var(--kbg-f4ecff,#f4ecff);color:var(--kfg-4a1f7a,#4a1f7a)}.hseg button.nm.on{background:#3a1460;color:#f3d6ff}
.hnight{font-size:12.5px;margin:2px 0 6px}.hpips i.nm{color:var(--kfg-5a2a82,#5a2a82);margin-left:3px}.hpips i.nem{color:var(--kfg-a3253f,#a3253f);margin-left:3px}.hrow small.hnm{color:var(--kfg-5a2a82,#5a2a82);font:11px var(--pixel)}
.helite,.hnem{border:1px solid #7a3db8;background:var(--kbg-fbf7ff,#fbf7ff);padding:6px 8px;margin:8px 0}.hnem{border-color:#a3253f;background:var(--kbg-fff6f7,#fff6f7)}
.helite .hhead,.hnem .hhead{border-top:0;padding-top:0}.hename,.hnname b{font:15px var(--pixel);color:var(--ink);margin:4px 0;font-weight:400}.hnname{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hechips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 6px}.tchip.elite{white-space:normal;line-height:1.35;padding:1px 6px;display:block;max-width:100%;box-sizing:border-box;height:auto}.tchip.elite b{font-weight:400}
.tchip.elite.off{border-color:#b8452a;color:var(--kfg-7a2a14,#7a2a14);background:var(--kbg-fff1ec,#fff1ec)}.tchip.elite.def{border-color:#2a6fb8;color:var(--kfg-1a4a7a,#1a4a7a);background:var(--kbg-eef5ff,#eef5ff)}
.tchip.elite.ctl{border-color:#7a3db8;color:var(--kfg-4a1f7a,#4a1f7a);background:var(--kbg-f6f0ff,#f6f0ff)}.tchip.elite.scar{border-style:dashed;border-color:#6b4a00;color:var(--kfg-6b4a00,#6b4a00);background:var(--kbg-fff3d6,#fff3d6)}
.hnrank{font:12px var(--pixel);letter-spacing:1px;color:#c9a7ad}.hnrank i{font-style:normal}.hnrank i.on{color:var(--kfg-a3253f,#a3253f)}
.hnline{margin:4px 0;font-size:13.5px}.hnhist{margin:4px 0 6px;padding-left:18px;font-size:12.5px;color:var(--mute)}.hnem .btn{margin-top:4px}
.hseg.insrc{flex-wrap:wrap}.hseg.insrc button{flex:1 0 calc(33% - 1px);margin-top:-1px;padding:4px 2px}
.hauto{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 2px}.hauto .mute{font-size:12.5px}.hauto-why{font-size:12.5px;margin:2px 0 8px}.hpaid{color:var(--kfg-8a5a00,#8a5a00)}
.hpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:6px 0 2px}.hset{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:4px 6px;font-size:12.5px}.hset.win{border:2px solid #1d6b3a;background:var(--kbg-effaf2,#effaf2)}.hset b{display:block;font:13px var(--pixel);font-weight:400}
.htbr{display:grid;grid-template-columns:28px repeat(5,minmax(0,1fr));gap:3px;align-items:center;margin:2px 0}.htbr .mute{grid-column:2/-1;font-size:12px}
.htbr .cell,.hrow .cell{font:12px var(--pixel);text-align:center;border:1px solid var(--kbd-c7c7dd,#c7c7dd);padding:1px 0;background:var(--kbg-fafaff,#fafaff);white-space:nowrap}
:is(.htbr,.hrow) .cell.g{background:var(--kbg-ffefb8,#ffefb8);border-color:#8a5a00;color:var(--kfg-5b3c00,#5b3c00)}:is(.htbr,.hrow) .cell.p{background:var(--kbg-e2f7f6,#e2f7f6);border-color:#2d8f8c;color:var(--kfg-1f6f6c,#1f6f6c)}:is(.htbr,.hrow) .cell.l{color:#9a9ab5}
.htot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0}.htot div{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:4px 8px;min-width:0}.htot b{display:block;font:18px var(--pixel);font-weight:400}.htot span{font-size:12px;color:var(--mute)}
.hreg{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);margin:0 0 8px}.hreg h4{margin:0;padding:3px 8px;font:13px var(--pixel);font-weight:400;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;background:var(--kbg-f3f3fb,#f3f3fb);border-bottom:1px solid var(--kbd-d7d7ea,#d7d7ea)}.hreg h4 span{font:12px var(--text);color:var(--mute)}
.hreg.off{background:var(--kbg-fafaff,#fafaff);border-style:dashed}.hreg.off p{margin:0;padding:6px 8px}
.hrow{display:grid;grid-template-columns:minmax(96px,1fr) repeat(3,minmax(40px,64px)) 76px;gap:4px;align-items:center;padding:3px 8px;border-bottom:1px dotted var(--kbd-d7d7ea,#d7d7ea);font-size:12.5px}.hrow.sel{background:var(--kbg-fff8d6,#fff8d6)}
.hneed{border:1px solid var(--kbd-e3b98a,#e3b98a);background:var(--kbg-fff8ee,#fff8ee);padding:8px 10px;margin:0 0 8px}.hneed b{font:14px var(--pixel);font-weight:400;margin-right:8px}.hneed p{margin:6px 0}
.hhunt{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mc.gild{border-color:#f3dc84 #9a7410 #9a7410 #f3dc84;background:linear-gradient(135deg,var(--kbg-fff8dc,#fff8dc),var(--kbg-ffe9a8,#ffe9a8) 60%,var(--kbg-fff3c4,#fff3c4));box-shadow:inset 0 0 0 1px var(--ksh-fff6d0,#fff6d0)}.mc.gild b{color:var(--kfg-8a5a00,#8a5a00)}
@media (max-width:720px){.hrow{grid-template-columns:minmax(0,1fr) repeat(3,58px)}.hrow .cell{font-size:11px}.hrow .nx{grid-column:1/-1}.hpick{grid-template-columns:minmax(0,1fr)}.htot b{font-size:16px}}

/* TOWN-1 (town v0.1, D-071): the town screen, art in art/town (Jeff's pixel art); labels and badges are page elements. */
.totown{margin-left:10px;vertical-align:middle}
.town{position:relative;overflow:hidden;line-height:0;background:#1b1f4a;contain:paint;transform:translateZ(0)}
.town img.base{width:100%;height:auto;display:block;image-rendering:pixelated}
.tsp,.tfx{position:absolute;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none}
/* anvil sparks fly over the bright furnace: a 1-px dark outline keeps them visible */
.tfx.ol{filter:drop-shadow(1px 0 0 #2a1206) drop-shadow(-1px 0 0 #2a1206) drop-shadow(0 1px 0 #2a1206) drop-shadow(0 -1px 0 #2a1206)}
.thit{position:absolute;cursor:pointer;touch-action:manipulation;border:2px solid transparent;border-radius:6px;background:transparent;padding:0}
.thit:hover,.thit:focus-visible{border-color:#f2c14ecc;outline:none}.thit.sel{border-color:#f2c14e;box-shadow:0 0 0 2px #0006}
.tlab{position:absolute;transform:translate(-50%,0);white-space:nowrap;line-height:1.2;text-align:center;pointer-events:none;z-index:3}
.tlab span{display:inline-block;font:12px var(--pixel);color:#fff;background:#141737dd;border:1px solid var(--kbd-ffffff55,#ffffff55);padding:1px 6px;border-radius:3px}
.tlab small{display:block;font:10.5px var(--text);color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000}
.tbd{display:inline-block;margin-left:3px;font:10.5px var(--pixel);font-style:normal;padding:0 5px;border-radius:3px;border:1px solid}
.tbd.new{background:#b3261e;color:#fff;border-color:#ffb3a8}.tbd.go{background:var(--kbg-eefaf0,#eefaf0);color:var(--kfg-1d6b3a,#1d6b3a);border-color:#1d6b3a}.tbd.lk{background:var(--kbg-f1f1ea,#f1f1ea);color:var(--kfg-3d3d55,#3d3d55);border-color:#9a9ac0}
/* FRONTIER-1 (frontier v0.1, P-154): the Frontier map reuses the town pieces; the plate is cropped by position on a phone, and every
   FX row loops its four frames by CSS steps (no script timer; reduced motion holds frame 0). */
.frmap{margin:0}/* full width, as the World map's .wm-vp: frontierview.ts frames it 3:2 at its 1.3x zoom */
.frmap img.base{position:absolute;max-width:none;height:auto}
.frfx{animation:frfx 1.6s steps(4) infinite}.frfx.still{animation:none}
@keyframes frfx{from{background-position:0 var(--fy)}to{background-position:calc(var(--fw) * -4) var(--fy)}}
@media (prefers-reduced-motion:reduce){.frfx{animation:none}}
.tlab.up{transform:translate(-50%,-100%)}
.tlab.hot span{border-color:#f2c14e;box-shadow:0 0 0 1px #f2c14e}
.frmap.narrow .tlab span{font-size:11px}.frmap.narrow .tlab small{white-space:normal;max-width:80px;margin:0 auto;font-size:10px}
.frmap.narrow .tlab.wide small{white-space:nowrap;max-width:none}
.fr-note{margin:0;padding:4px 10px}.fr-note:empty{display:none}
.tlegend{display:flex;flex-wrap:wrap;gap:6px 12px;padding:6px 10px;font-size:12px;color:var(--mute);border-top:1px solid var(--kbd-d6d6ea,#d6d6ea)}
.tlegend b{font:11px var(--pixel);font-weight:400;padding:0 5px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink)}
.tph{display:flex;gap:10px;align-items:center;margin-bottom:6px}.tic{width:72px;height:72px;flex:none;background-repeat:no-repeat;image-rendering:pixelated}
.tposts{display:grid;gap:6px}.tpost{border:1px solid #b9a77a;background:var(--kbg-fffbe9,#fffbe9);padding:6px 8px;font-size:12.5px;min-width:0}.tpost.done{border:2px solid #1d6b3a;background:var(--kbg-effbef,#effbef)}
.tpost .twho{font:11px var(--pixel);color:var(--kfg-8a5a00,#8a5a00)}.tpost .tgoal{font-weight:700}
.tbar{height:8px;background:var(--kbg-e6e1cc,#e6e1cc);border:1px solid #b9a77a;margin:4px 0}.tbar i{display:block;height:100%;background:#2d8f8c}
.trow{display:flex;gap:6px;align-items:center;justify-content:space-between;flex-wrap:wrap}.tbtns{display:flex;gap:4px}
.trew{font-size:12px;color:var(--kfg-5a4a1e,#5a4a1e);margin-top:2px}.trew b{font:11px var(--pixel);font-weight:400;color:var(--kfg-8a5a00,#8a5a00);margin-right:2px}
/* PLAYTEST-5 (D-171): what a claim paid, rising from the Claim button */
.claim-pop{position:fixed;z-index:60;transform:translate(-50%,-100%);background:var(--kbg-fffbe9,#fffbe9);border:2px solid #8a5a00;box-shadow:0 3px 0 #1d1d3a40;padding:6px 10px 7px;font:12.5px/1.45 var(--text);color:var(--kfg-1d1d3a,#1d1d3a);pointer-events:none;min-width:150px;max-width:min(260px,calc(100vw - 32px));animation:claimpop 3.4s forwards}
.claim-pop b{display:block;font:13px var(--pixel);font-weight:400;color:var(--kfg-8a5a00,#8a5a00);margin-bottom:2px}
.claim-pop i{display:block;font-style:normal;font-weight:700;color:var(--kfg-1d6b3a,#1d6b3a);opacity:0;animation:claimline .3s forwards;animation-delay:calc(var(--n)*140ms + 180ms)}
@keyframes claimpop{0%{opacity:0;transform:translate(-50%,-70%) scale(.6)}10%{opacity:1;transform:translate(-50%,-100%) scale(1.06)}16%{transform:translate(-50%,-100%) scale(1)}82%{opacity:1;transform:translate(-50%,-108%)}100%{opacity:0;transform:translate(-50%,-122%)}}
@keyframes claimline{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.claim-pop{animation:flash 3.4s steps(1,end) forwards}.claim-pop i{animation:none;opacity:1}}
.ttitles{display:flex;flex-wrap:wrap;gap:6px}.tletters{display:grid;gap:4px;margin:6px 0}
.tfrag{margin:0;font-style:italic;background:var(--kbg-f4effb,#f4effb);border:1px solid var(--kbd-d9cdee,#d9cdee);padding:6px 8px;color:var(--kfg-4b3a6a,#4b3a6a);font-size:12.5px}
.c-up{color:#7dff9e}
@media (max-width:720px){.tlab span{font-size:10.5px;padding:0 4px}.tlab small{font-size:9.5px}}
/* FORGE-HELP (forge-help-preview-v1, direction A): the tools grouped by goal, each with one plain sentence and its costs. */
.fgoals{margin-bottom:10px}.fgoal{border-top:1px dashed var(--bev2);padding:8px 0 2px}.fgoal:first-child{border-top:0;padding-top:0}
.fgoal h4{margin:0 0 6px;font:14px var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo))}.fgoal h4 span{font:12px var(--text);color:var(--mute);margin-left:6px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 8px}
.ftool{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--kbg-fff,#fff);border:1px solid var(--bev2);padding:6px 9px;margin-bottom:6px;cursor:pointer}
.ftool b{font:15px var(--pixel);font-weight:400}.ftool .why{font-size:13px;line-height:1.45}
.ftool:hover:not(:disabled){background:var(--kbg-f6fbff,#f6fbff)}.ftool.on{border:2px solid #1f6f6c;background:var(--kbg-f0fffe,#f0fffe);padding:5px 8px}
.ftool:disabled{cursor:default;border-style:dashed}
#forge-tabs .ftool.locked{background:var(--kbg-f1f1f6,#f1f1f6);color:var(--kfg-4d4d6e,#4d4d6e)}#forge-tabs .ftool.locked small{font:700 11px var(--text);margin-left:6px;color:#fff;background:var(--indigo);padding:0 4px;vertical-align:2px}
.fchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.fchips i{font:11.5px var(--text);font-style:normal;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:0 6px;white-space:nowrap}
.fchips i.fp{border-color:#b97a12;color:var(--kfg-7a4a00,#7a4a00);background:var(--kbg-fff6df,#fff6df)}.fchips i.nofp{border-color:#1f6f6c;color:var(--kfg-1f6f6c,#1f6f6c);background:var(--kbg-effffd,#effffd)}
.fpnote{margin:8px 0 0;font-size:12.5px;background:var(--kbg-fff6df,#fff6df);border:1px solid #e0c37d;padding:6px 8px}
/* WORLD-2 (D-090/D-091): the plate World map (approved world2-preview-v3) */
@media (min-width:901px){.map{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"world world" "push area" "ladder area";grid-template-rows:auto auto 1fr}}
.wm-map{position:relative;background:#05267a}
.wm-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;background:var(--indigo);color:#e4e6ff}
.wm-title{text-align:center;min-width:0}.wm-title b{display:block;font:15px var(--pixel);font-weight:400}.wm-title small{display:block;font-size:11.5px;color:#c6c9ff}
.wm-arrow{font:14px var(--pixel);background:#262b85;color:#fff;border:1px solid #8f93d6;padding:3px 10px;cursor:pointer}.wm-arrow:disabled{opacity:.45;cursor:default}
.wm-right{display:flex;gap:8px;align-items:center}.wm-dots{display:flex;gap:6px}.wm-dots i{width:9px;height:9px;border:1px solid var(--kbd-c6c9ff,#c6c9ff)}.wm-dots i.on{background:#ffd23f;border-color:#ffd23f}
.wm-vp{position:relative;overflow:hidden;aspect-ratio:3/2;background:#05267a}
.wm-track{position:absolute;inset:0;display:flex;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.wm-plate{position:relative;flex:0 0 100%;height:100%;overflow:hidden;container-type:size}
.wm-inner{position:absolute;inset:0;transform:scale(1.3);transform-origin:50% 47%}
.wm-art{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 78%,transparent 100%)}
.wm-svg,.wm-labels,.wm-fx{position:absolute;inset:0;width:100%;height:100%}.wm-fx,.wm-labels{pointer-events:none}
.wm-route{fill:none;stroke:#f3e2b0;stroke-width:5;stroke-dasharray:2 12;stroke-linecap:round;opacity:.9}.wm-route.done{stroke:#ffd23f;stroke-dasharray:none;stroke-width:4;opacity:.75}
.wm-cross{fill:none;stroke:#cfe6ff;stroke-width:5;stroke-dasharray:14 12;opacity:.8}.wm-fog{fill:#0b0f22;opacity:.42}
.wm-pin{cursor:pointer}.wm-pin:focus{outline:none}.wm-pin .wm-dot{stroke:#1d1d3a;stroke-width:5}.wm-pin.sel .wm-dot{stroke:#fff;stroke-width:8}.wm-pin:focus-visible .wm-dot{stroke:#ffd23f;stroke-width:8}.wm-pin.locked{cursor:default}
.wm-num{font:700 24px var(--text);text-anchor:middle;dominant-baseline:central;pointer-events:none;fill:#1d1d3a}
.wm-here{fill:none;stroke:#7cf3ff;stroke-width:5;animation:wmring 1.6s steps(4) infinite}
@keyframes wmring{0%{r:26px;opacity:1}100%{r:52px;opacity:0}}
.wm-plq,.wm-lock,.wm-mark{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;line-height:1.15;padding:.3em .7em;font:clamp(8px,1.55cqw,17px) var(--pixel);color:#fffff0}
.wm-pips{position:absolute;transform:translate(-50%,0);font:clamp(7px,1.3cqw,14px) var(--pixel);letter-spacing:.05em;background:rgba(13,16,48,.82);color:#8a8fc4;padding:0 .3em;line-height:1.25;white-space:nowrap;pointer-events:none}
.wm-pips.up{transform:translate(-50%,-100%)}.wm-pips i{font-style:normal}.wm-pips i.g{color:#ffd23f}.wm-pips i.p{color:#7cf3ff}
.wm-plq small,.wm-lock small{display:block;font:.72em var(--text);color:#d8dbff;margin-top:.15em}
.wm-plq{background:#1b1f6b;border:2px solid #ffd23f;cursor:pointer;pointer-events:auto}.wm-plq.sel{outline:2px solid var(--kbd-fff,#fff)}.wm-plq.locked{background:#2b2838;border-color:#8a8fc4}
.wm-lock{background:#2b2838;border:2px solid #8a8fc4;font-family:var(--text)}.wm-gate{white-space:normal;width:max-content;max-width:30%}/* the label layer is scaled ×1.3: 30% ≈ 39% of the map */
.wm-mark{border:2px solid #ffd23f;font-size:clamp(7px,1.3cqw,15px)}.wm-mark.town{background:#5a1f1f}.wm-mark.school{background:#3d2a66;cursor:pointer;pointer-events:auto}
@container (max-width:420px){.wm-plq small,.wm-lock small{display:none}}
.wm-foam img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.wm-spr{position:absolute;width:8.3334%;height:12.5%;background-size:400% 400%;background-repeat:no-repeat;image-rendering:pixelated}
.wm-spr.big{width:16.6667%;height:25%;background-size:400% 100%}.wm-spr.flip{transform:scaleX(-1)}.wm-spr.light{mix-blend-mode:screen}
@media (prefers-reduced-motion:reduce){.wm-track{transition:none}.wm-here{animation:none}}
.wm-list{padding:2px 0}.wm-grp{border-bottom:1px dashed var(--bev2)}.wm-grp:last-child{border-bottom:0}
.wm-grp>summary{cursor:pointer;padding:7px 10px;font-size:13px}.wm-grp>summary b{font:15px var(--pixel);font-weight:400;margin-right:4px}
.wm-lockline{padding:7px 10px;font-size:13px;color:var(--mute)}.wm-lockline b{font:14px var(--pixel);font-weight:400}
.wm-read{margin-top:8px;border:2px solid;padding:8px 10px;font-size:13px}.wm-read b{font:15px var(--pixel);font-weight:400;display:block}
.wm-read.good{border-color:#6aa57a;background:var(--kbg-f2fbf4,#f2fbf4)}.wm-read.meh{border-color:#d0a050;background:var(--kbg-fff8ea,#fff8ea)}.wm-read.bad{border-color:#d08a98;background:var(--kbg-fff3f5,#fff3f5)}
.hw-weak{margin-top:2px}.hw-dot{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--c);color:#fff;font:700 10px/1 var(--text);margin-right:3px;vertical-align:middle}
.hw-dot.miss{background:var(--kbg-fff,#fff);color:var(--c);border:2px dashed var(--c)}
/* Era II v0.1 §6: 魔法学校 Hogwash (approved hogwash-preview-v1) */
.hw-h3t{font:inherit;min-width:0;white-space:normal;overflow-wrap:anywhere}
.hw-hdr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-bottom:1px dashed var(--bev2)}
.hw-hdr b{font:17px var(--pixel);font-weight:400;display:block}.hw-pts{text-align:right}.hw-pts b{font:20px var(--pixel)}.hw-pts span{display:block}
.hw-crest{width:54px;height:54px;border:3px solid #7a1914;background:linear-gradient(135deg,#b3261e 50%,#d9a521 50%);display:grid;place-items:center;font:20px var(--pixel);color:#fff;text-shadow:1px 1px 0 #000}
.hw-crest[data-house=slytherout]{border-color:#1f4a2a;background:linear-gradient(135deg,#2b7a3e 50%,var(--kbg-c0c7d6,#c0c7d6) 50%)}.hw-crest[data-house=ravenclawed]{border-color:#1b2a6b;background:linear-gradient(135deg,#2e4fb0 50%,#b08a5a 50%)}
.hw-crest[data-house=hufflepuffin]{border-color:#6e5a14;background:linear-gradient(135deg,#d9b521 50%,#2b2838 50%)}.hw-crest:not([data-house]){border-color:var(--bev2);background:var(--kbg-e6e7f0,#e6e7f0);color:var(--mute);text-shadow:none}
.hw-houses{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.hw-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px;padding:10px}
.hw-sub{font:13px var(--pixel);margin:0 0 6px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}.hw-sub span{font:12px var(--text);color:var(--mute)}.hw-pad{padding:0 10px}div.hw-pad{margin-bottom:6px}
.hw-tt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hw-slot{border:2px dashed var(--bev2);min-height:58px;padding:4px 6px;background:var(--kbg-fff,#fff);text-align:left;font:inherit;color:inherit;cursor:pointer;position:relative;min-width:0;overflow-wrap:anywhere}
.hw-slot .d{font:11px var(--pixel);color:var(--mute);display:block}.hw-slot b{font:12px var(--pixel);font-weight:400;display:block}.hw-slot.full{border-style:solid}.hw-slot.now{box-shadow:inset 0 -4px 0 #5a2a82}
.hw-slot.target{outline:2px solid #ffd23f;outline-offset:1px}
.hw-combo{position:absolute;right:-5px;top:-8px;font:10px var(--pixel);background:var(--kbg-ffefb8,#ffefb8);border:1px solid #8a5a00;color:var(--kfg-5b3c00,#5b3c00);padding:0 3px}
.hw-pal{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.hw-pal button{font:12px var(--pixel);border:2px solid var(--bev2);padding:2px 8px;cursor:pointer;background:var(--kbg-fff,#fff);color:var(--ink)}.hw-pal button.sel{outline:2px solid #ffd23f;outline-offset:1px;background:var(--kbg-fffbe6,#fffbe6)}
.hw-pal.small button{font-size:11px;padding:1px 6px}.hw-pal button:disabled{cursor:default;opacity:.6}.hw-note{font-size:12px;color:var(--mute);margin-top:6px}
.hw-sch{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 8px;align-items:center;margin-bottom:6px;font-size:12.5px}
.hw-sw{width:12px;height:12px;border:1px solid #333}.hw-sch b{font:12px var(--pixel);font-weight:400}.hw-rk{font:12px var(--pixel)}
.hw-bar{height:8px;border:1px solid var(--bev2);background:var(--kbg-e6e6f4,#e6e6f4);position:relative;overflow:hidden}.hw-bar i{position:absolute;inset:0;transform-origin:left;background:#2d8f8c}.hw-bar.m i{background:#5a2a82}
.hw-exam{border:2px solid #8a5a00;background:var(--kbg-fff8e6,#fff8e6);padding:6px 8px;font-size:12.5px;margin-top:8px}.hw-exam b{font:13px var(--pixel);font-weight:400;display:block}
.hw-spells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:0 10px 10px}
.hw-spl{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);padding:4px 6px;min-width:0;font:11.5px/1.3 var(--text);overflow-wrap:anywhere;text-align:left;color:var(--ink);position:relative}
.hw-spl b{font:12px var(--pixel);font-weight:400;display:block}.hw-spl .st{color:var(--kfg-8a5a00,#8a5a00);font-size:11px;display:block}.hw-spl.lock{background:var(--kbg-f1f1ea,#f1f1ea);color:var(--mute);border-style:dashed}
button.hw-spl{cursor:pointer}button.hw-spl:disabled{cursor:default}.hw-spl.on{background:var(--kbg-faf6ff,#faf6ff);box-shadow:inset 0 0 0 2px #5a2a82}.hw-inbook{display:block;font:10px var(--pixel);color:var(--kfg-5a2a82,#5a2a82)}
.hw-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 10px 10px}
.hw-mini{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px 8px;font-size:12.5px;min-width:0}.hw-mini>b{font:13px var(--pixel);font-weight:400;display:block}.hw-mini>span{display:block}
.hw-auto{display:flex;gap:8px;align-items:center;margin-top:6px}
.hw-s2{grid-area:slot2;display:block;width:100%;text-align:left;font:inherit;color:var(--ink);border:2px solid #5a2a82;background:var(--kbg-faf6ff,#faf6ff);padding:8px;margin:0 0 12px;cursor:pointer}.hw-s2[hidden]{display:none}
.hw-s2 .t{display:flex;justify-content:space-between;gap:6px;align-items:center}.hw-s2 b{font:13px var(--pixel);font-weight:400}
.hw-s2 .row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;font-size:12px;margin:6px 0;align-items:center}.hw-s2 .ev{margin-top:6px;font-size:12px;border-top:1px dashed var(--bev2);padding-top:4px}
.hw-s2 .sw{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}.hw-s2 .sw span{font:11px var(--pixel);border:1px solid var(--bev2);padding:0 6px;background:var(--kbg-fff,#fff)}.hw-s2 .sw span.on{background:#5a2a82;color:#fff;border-color:#5a2a82}.hw-s2 .sw span.lock{color:var(--mute);border-style:dashed}
.c-spell{color:#d9b8ff}
@media (max-width:900px){.hw-cols,.hw-row3{grid-template-columns:minmax(0,1fr)}.hw-hdr{grid-template-columns:auto minmax(0,1fr)}.hw-pts{grid-column:1/-1;text-align:left}.hw-tt{grid-template-columns:repeat(2,minmax(0,1fr))}.hw-spells{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 魔法学校 Hogwash v8 (D-093, D-095, D-096; approved hogwash-preview-v8, spell-trace-preview-v1) */
.hw-ico{--s:32px;display:inline-block;flex:none;width:var(--s);height:var(--s);background:url(art/academy/icons.png) no-repeat;background-size:calc(var(--s)*6) calc(var(--s)*2);background-position:calc(var(--x)*var(--s)*-1) 0;image-rendering:pixelated;vertical-align:middle}
.hw-ico.cls{background-position:calc(var(--x)*var(--s)*-1) calc(var(--s)*-1)}.hw-ico.s24{--s:24px;image-rendering:auto}.hw-ico.miss{opacity:.45;outline:2px dashed #8a8fc4;outline-offset:-1px;border-radius:50%}
.hw-num{color:var(--mute);font-size:11px}#academy-view:not(.hw-nums-on) .hw-num{display:none}
#academy-view{position:relative}
.hw-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 10px}.hw-top h2{margin:0;font:20px var(--pixel);font-weight:400}.hw-top h2 small{font:13px var(--text);color:var(--mute)}
.hw-toast{position:sticky;top:6px;z-index:8;margin:0 auto 8px;max-width:640px;background:#1d1d3a;color:#fff;font-size:13px;padding:6px 12px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.hw-prog{display:flex;gap:6px 14px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--kbg-fff,#fff);border:1px solid var(--bev2);margin-bottom:12px;font-size:13px}
.hw-pt{font:14px var(--pixel)}.hw-pdots{display:flex;gap:4px}.hw-pdots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--bev2);background:var(--kbg-fff,#fff)}
.hw-pdots i.done{background:#6aa57a;border-color:#3b7a4c}.hw-pdots i.next{background:#ffd23f;border-color:#8a5a00}
.hw-pf{display:flex;gap:6px;align-items:center;margin-left:auto}.hw-pf b{font:13px var(--pixel);font-weight:400;color:var(--kfg-5a2a82,#5a2a82)}
.hw-prog details{flex-basis:100%}.hw-prog summary,.hw-extra summary{cursor:pointer;font:12px var(--pixel);color:var(--mute)}
.hw-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:6px}
.hw-node{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px;font-size:12px;min-width:0}.hw-node b{display:block;font:12.5px var(--pixel);font-weight:400;overflow-wrap:anywhere}
.hw-jp{font-size:11px;color:var(--mute)}.hw-st{display:block;font:11px var(--pixel)}.hw-w{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap}
.hw-node.done{background:var(--kbg-f1f1ea,#f1f1ea);border-style:dashed;color:var(--mute)}.hw-node.ok .hw-st{color:var(--kfg-1d6b3a,#1d6b3a)}.hw-node.next{border:3px solid #5a2a82;background:var(--kbg-faf6ff,#faf6ff)}.hw-node.next .hw-st{color:var(--kfg-5a2a82,#5a2a82)}.hw-node.later .hw-st{color:var(--mute)}
.hw-book{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.hw-bs{border:2px solid var(--c,var(--bev2));background:var(--kbg-fff,#fff);min-height:62px;padding:5px 6px;font:12px var(--text);position:relative;min-width:0;overflow-wrap:anywhere;text-align:left;color:var(--ink);cursor:pointer}
.hw-bs b{display:block;font:12.5px var(--pixel);font-weight:400}.hw-bs .mute{font-size:11px;display:block}.hw-bh{display:flex;gap:6px;align-items:center}
.hw-bs.empty{border-style:dashed;background:var(--kbg-f7f7ff,#f7f7ff);color:var(--mute)}.hw-bs.sel{outline:3px solid #ffd23f;outline-offset:1px}
.hw-bs.lock{border-style:dashed;border-color:var(--kbd-b9b9cf,#b9b9cf);background:var(--kbg-efefe8,#efefe8);color:var(--mute);cursor:default}.hw-bs.lock b{color:var(--mute)}
.hw-k{position:absolute;right:4px;top:2px;font:10px var(--pixel);color:var(--mute)}
.hw-pw{display:flex;gap:2px;margin-top:3px}.hw-pw i{width:10px;height:6px;border:1px solid var(--c);background:var(--kbg-fff,#fff)}.hw-pw i.on{background:var(--c)}
.hw-lb{display:block;height:5px;background:var(--kbg-dcdcea,#dcdcea);margin-top:4px}.hw-lb i{display:block;height:100%;background:#8a8fc4}
.hw-sub2{margin-top:12px;font:13px var(--pixel)}.hw-sub2 .mute{font:12px var(--text)}
.hw-lads{display:grid;gap:6px;margin-top:8px}
.hw-lad{display:grid;grid-template-columns:170px repeat(4,minmax(0,1fr));gap:4px;align-items:stretch;border:0;background:none;padding:0;text-align:left;font:inherit;color:inherit}
button.hw-lad{cursor:pointer}.hw-lad.sel .hw-lh{outline:3px solid #ffd23f;outline-offset:1px}
.hw-lh{display:flex;gap:6px;align-items:center;border:2px solid var(--c);background:var(--kbg-fff,#fff);padding:4px 6px;min-width:0}.hw-lh b{font:12.5px var(--pixel);font-weight:400;display:block}.hw-pl{font:10.5px var(--pixel);color:var(--c)}
.hw-stp{border:2px solid var(--c);background:var(--kbg-fff,#fff);padding:4px 6px;font-size:11px;min-width:0;overflow-wrap:anywhere;position:relative}.hw-stp b{display:block;font:11.5px var(--pixel);font-weight:400}
.hw-yr2{font:10px var(--pixel);color:var(--mute)}.hw-stp.cur{background:color-mix(in srgb,var(--c) 16%,var(--kbg-fff,#fff));box-shadow:inset 0 0 0 1px var(--c)}.hw-stp.cur::after{content:'▲ casting';position:absolute;right:4px;top:2px;font:9.5px var(--pixel);color:var(--c)}
.hw-stp.old{opacity:.6}.hw-stp.lock{border-style:dashed;border-color:var(--kbd-c9c9d6,#c9c9d6);background:var(--kbg-f4f4ee,#f4f4ee);color:var(--kfg-8a8aa0,#8a8aa0)}.hw-stp.lock b{color:var(--kfg-8a8aa0,#8a8aa0)}
.hw-capst{display:block;margin-top:2px;font-size:10.5px;color:var(--kfg-7a3d00,#7a3d00)}.hw-capst::before{content:'★ capstone: ';font:10px var(--pixel)}
.hw-selbar{border:2px solid #ffd23f;background:var(--kbg-fffdf0,#fffdf0);padding:6px 8px;margin:0 0 8px;font-size:12.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.hw-selbar b{font:13px var(--pixel);font-weight:400}
.hw-mm{position:relative;width:240px;height:193px;background:url(art/world/era2-live.webp) no-repeat;background-size:899px 599px;background-position:-134.6px -193px;image-rendering:pixelated;border:2px solid #1d1d3a;flex:none}
.hw-mm i{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#9a9aa8;border:2px solid #1d1d3a;opacity:.85}
.hw-mm i.weak{background:#3fd36a;border-color:var(--kbd-fff,#fff);opacity:1;box-shadow:0 0 0 3px rgba(63,211,106,.45)}.hw-mm i.front{outline:2px dashed #ffd23f;outline-offset:3px}
.hw-mm span{position:absolute;font:10px var(--pixel);color:#fff;background:rgba(10,30,15,.82);padding:0 4px;white-space:nowrap;transform:translate(10px,-6px)}
.hw-cap2{position:absolute;left:4px;bottom:3px;font:10px var(--pixel);color:#fff;background:rgba(0,0,0,.6);padding:0 4px}
.hw-pop{position:fixed;z-index:100;max-width:300px;background:var(--kbg-fffdf0,#fffdf0);border:2px solid #5a2a82;padding:6px;box-shadow:0 10px 26px rgba(0,0,0,.35);pointer-events:none;font:12px var(--text);color:var(--ink)}.hw-pop[hidden]{display:none}.hw-pop b{font:13px var(--pixel);font-weight:400}
.hw-prac{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;background:var(--kbg-eefaf1,#eefaf1);border:1px solid #6aa57a;margin-bottom:12px;font-size:12.5px}.hw-prac b{font:14px var(--pixel);font-weight:400;color:var(--kfg-1d6b3a,#1d6b3a)}
.hw-jar{display:flex;gap:2px}.hw-jar i{width:10px;height:14px;border:1px solid #1d6b3a;background:var(--kbg-fff,#fff)}.hw-jar i.on{background:#1d6b3a}.hw-jar i.part{background:linear-gradient(to top,#1d6b3a var(--f),var(--kbg-fff,#fff) var(--f))}
.hw-row2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px}
.hw-cal{display:grid;grid-template-columns:40px repeat(4,minmax(0,1fr));gap:4px;font-size:12px}
.hw-hd{font:12px var(--pixel);text-align:center;color:var(--mute)}.hw-rl{font:11px var(--pixel);color:var(--mute);display:grid;place-items:center}
.hw-blk{min-height:78px;border-radius:4px;background:var(--c);color:#fff;padding:6px 6px 20px;position:relative;font:12px var(--text);text-align:left;border:0;cursor:pointer;min-width:0;overflow-wrap:anywhere}.hw-blk b{display:block;font:13px var(--pixel);font-weight:400}
.hw-blk .hw-ico.cls{position:absolute;right:3px;bottom:3px}.hw-blk.free{background:repeating-linear-gradient(45deg,var(--kbg-f2f2fa,#f2f2fa) 0 6px,var(--kbg-e8e8f4,#e8e8f4) 6px 12px);color:var(--mute);border:1px dashed var(--kbd-b9b9cf,#b9b9cf)}
.hw-blk.lock{background:var(--kbg-e4e4ee,#e4e4ee);color:var(--mute);border:1px dashed var(--kbd-b9b9cf,#b9b9cf);cursor:default}
.hw-blk.now{box-shadow:0 0 0 3px #ffd23f}.hw-blk.now::after{content:'NOW';position:absolute;right:4px;top:3px;font:10px var(--pixel);background:var(--kbg-fff,#fff);color:var(--kfg-5a2a82,#5a2a82);padding:0 4px}
.hw-blk.target{outline:2px dashed #1d1d3a;outline-offset:2px}.hw-blk.hint{outline:3px solid #ffd23f;outline-offset:2px}
.hw-cb,.hw-hb,.hw-mj{position:absolute;left:4px;bottom:4px;font:10px var(--pixel);padding:0 3px}.hw-cb{background:var(--kbg-ffefb8,#ffefb8);color:var(--kfg-5b3c00,#5b3c00);border:1px solid #8a5a00}.hw-hb{background:#ffd23f;color:var(--kfg-3a2a00,#3a2a00)}.hw-mj{background:var(--kbg-fff,#fff);color:var(--kfg-5a2a82,#5a2a82)}
#academy-view .hw-pal button{border-color:var(--c,var(--bev2));color:var(--c,var(--ink))}#academy-view .hw-pal button.sel{background:var(--c);color:#fff;outline:none}
.hw-ctab{width:100%;border-collapse:collapse;margin-top:8px;font-size:12.5px;background:var(--kbg-fff,#fff);border:1px solid var(--bev2)}.hw-ctab caption{text-align:left;font:13px var(--pixel);padding:0 0 4px}.hw-ctab caption .mute{font:12px var(--text)}
.hw-ctab th{font:11.5px var(--pixel);font-weight:400;color:var(--mute);text-align:left;padding:4px 8px;background:var(--kbg-f2f2fa,#f2f2fa);border-bottom:1px solid var(--bev2)}.hw-ctab td{padding:5px 8px;border-bottom:1px dotted var(--kbd-d0d0e4,#d0d0e4);vertical-align:middle}
.hw-ctab tr.mine td{background:var(--kbg-fffbe6,#fffbe6)}.hw-who{display:flex;gap:6px;align-items:center;white-space:nowrap}.hw-who.unk{color:#9a9ab0;letter-spacing:2px;font:13px var(--pixel)}
.hw-q{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--kbg-c9c9d6,#c9c9d6);color:#fff;font:700 12px var(--text);letter-spacing:0}
.hw-bonus{font:13px var(--pixel);color:var(--kfg-5b3c00,#5b3c00);white-space:nowrap}.hw-cst{font-size:11.5px;white-space:nowrap}.hw-cst.ok{color:var(--kfg-1d6b3a,#1d6b3a)}.hw-tip{font-size:12px;color:var(--mute);margin-top:6px}
.hw-major{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px;padding:6px 8px;background:var(--kbg-fff8e6,#fff8e6);border:1px solid #d0a050;font-size:12.5px}.hw-major b{font:13px var(--pixel);font-weight:400}
.hw-sl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:3px 8px;align-items:center;font-size:12.5px;padding:5px 0;border-bottom:1px dotted var(--kbd-d0d0e4,#d0d0e4)}.hw-sl:last-child{border:0}
.hw-sl>.hw-ico{grid-row:1/span 3;align-self:start}.hw-sl .hw-pips,.hw-sl small{grid-column:2/4}.hw-sl small{color:var(--mute);font-size:11.5px}
.hw-yr{font:11px var(--pixel);padding:0 6px;border:1px solid var(--c);color:var(--c);background:var(--kbg-fff,#fff);white-space:nowrap}.hw-focus{font:10.5px var(--pixel);background:#5a2a82;color:#fff;padding:0 5px;margin-left:4px;white-space:nowrap}
.hw-pips{display:flex;gap:3px;flex-wrap:wrap}.hw-pips i{width:14px;height:8px;border:1px solid var(--c);background:var(--kbg-fff,#fff)}.hw-pips i.on{background:var(--c)}.hw-pips i.ready{background:#ffd23f;border-color:#8a5a00}
.hw-extra{margin-bottom:12px}.hw-extra .hw-row3{padding:8px 0 0}
.hw-letter-ov{position:absolute;inset:0;background:rgba(14,10,30,.62);display:flex;align-items:flex-start;justify-content:center;padding:28px 12px;z-index:9;min-height:100%}
.hw-letter{background:var(--kbg-f6ecd2,#f6ecd2);border:2px solid #8a6a2e;box-shadow:0 0 0 4px var(--ksh-f6ecd2,#f6ecd2),0 0 0 6px #8a6a2e,0 18px 40px rgba(0,0,0,.4);max-width:560px;width:100%;padding:18px 20px;color:var(--kfg-3a2a10,#3a2a10);position:relative;font-size:13px}
.hw-letter h4{margin:0 0 4px;font:20px var(--pixel);font-weight:400}.hw-seal{position:absolute;right:16px;top:-14px;width:44px;height:44px;border-radius:50%;background:#9c1f1f;color:#ffd9a0;display:grid;place-items:center;font:20px var(--pixel);box-shadow:0 2px 0 #5a1010}
.hw-letter ol{margin:8px 0;padding-left:20px}.hw-letter li{margin:4px 0}.hw-lh2{font:14px var(--pixel);font-weight:400}
.hw-letter .hw-houses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0}.hw-h{border:2px solid #8a6a2e;background:var(--kbg-fffaf0,#fffaf0);padding:5px 8px;font-size:12.5px;cursor:pointer;text-align:left;color:var(--kfg-3a2a10,#3a2a10)}.hw-h b{display:block;font:13px var(--pixel);font-weight:400}.hw-h.sel{outline:3px solid #9c1f1f}
.hw-lbtn{display:flex;justify-content:flex-end;margin-top:6px}
.hw-s2 .row .hw-ico{vertical-align:-6px}
/* D-095 spell panel in Forest fights */
.trace-btn{position:absolute;left:8px;top:34px;z-index:3;font:13px var(--pixel);background:#5a2a82;color:#fff;border:2px solid #c9a0ff;padding:4px 10px;cursor:pointer;box-shadow:0 0 0 2px #1d1d3a}.trace-btn[hidden]{display:none}.trace-btn[aria-pressed=true]{background:#ffd23f;color:var(--kfg-1d1d3a,#1d1d3a)}
.trace-panel{grid-area:trace;background:var(--iv);border:2px solid #5a2a82;margin:0 0 12px;padding:8px 10px}.trace-panel[hidden]{display:none}
.tp-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.tp-head b{font:15px var(--pixel);font-weight:400}.tp-head .btn{margin-left:auto}.tp-head .mute{font-size:12px}
.tp-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;margin-top:8px}
.tp-cards{display:grid;gap:6px;align-content:start}.tp-card{display:flex;gap:8px;align-items:center;border:2px solid var(--c);background:var(--kbg-fff,#fff);padding:4px 6px;font-size:12px}.tp-card svg{background:var(--kbg-f4f2ff,#f4f2ff);border-radius:4px;flex:none}
.tp-card b{display:block;font:12.5px var(--pixel);font-weight:400}.tp-card .mute{display:block;font-size:11px}.tp-ch{display:flex;gap:3px;align-items:center;font-size:11px;color:var(--mute)}.tp-ch i{width:10px;height:10px;border-radius:50%;border:1px solid var(--c);background:var(--kbg-fff,#fff)}.tp-ch i.on{background:var(--c)}
.tp-padwrap{position:relative}.tp-pad{display:block;width:100%;aspect-ratio:4/3;background:radial-gradient(circle at 50% 50%,var(--kbg-fffef6,#fffef6),var(--kbg-f1ecd8,#f1ecd8));border:3px solid #5a2a82;border-radius:6px;touch-action:none;cursor:crosshair}
.tp-hint{position:absolute;left:8px;top:6px;font:11px var(--pixel);color:var(--kfg-8a7a5a,#8a7a5a);pointer-events:none}.tp-res{min-height:34px;margin-top:6px;font-size:12.5px}.tp-ok{color:var(--kfg-1d6b3a,#1d6b3a);font:13px var(--pixel)}.tp-no{color:var(--kfg-a3253f,#a3253f);font:13px var(--pixel)}
.tp-legend{display:flex;gap:4px 12px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;color:var(--mute)}.tp-legend span{display:flex;gap:4px;align-items:center}.tp-legend svg{background:var(--kbg-f4f2ff,#f4f2ff);border-radius:3px}
.c-traced{color:#7cf3ff}
@media (max-width:900px){
  .hw-track{grid-template-columns:repeat(3,minmax(0,1fr))}.hw-book{grid-template-columns:repeat(2,minmax(0,1fr))}.hw-row2,.tp-body{grid-template-columns:minmax(0,1fr)}
  .hw-lad{grid-template-columns:repeat(2,minmax(0,1fr))}.hw-lh{grid-column:1/-1}.hw-cal{grid-template-columns:30px repeat(4,minmax(0,1fr))}
  .hw-blk{min-height:80px;padding:4px 4px 28px;font-size:11px}.hw-blk b{font-size:11.5px}.hw-blk .hw-ico.cls{--s:24px;image-rendering:auto}.hw-ctab th,.hw-ctab td{padding:4px 5px}.hw-pf{margin-left:0}
}
/* HOLO-1 phase 5: holocard screens, converted from the approved design/holo-screens-preview-v5.html (scoped under .ho) */
.ho{--ok:#1d6b3a;--warn:#8a5a00;--bad:#b3261e;--force:#2e5fb0;--gold:#ffd23f;position:relative;container-type:inline-size;color:var(--ink);font:14px/1.6 var(--text)}
.ho .btn{min-height:0;line-height:1.5;display:inline-block}
.ho p{margin:0 0 6px}
.ho .box{background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);margin-bottom:12px;min-width:0}
.ho .box h3{margin:0;padding:4px 10px;background:var(--cy);border-bottom:1px solid var(--bev2);font:15px var(--pixel);font-weight:400;display:flex;justify-content:space-between;align-items:center;gap:4px 8px;flex-wrap:wrap}
.ho .box h3 span{font:12.5px var(--text);color:var(--mute)}
.ho .pad{padding:8px 10px}
.ho .mute{color:var(--mute)}
.ho .ho-sm{font-size:12px}
.ho .ho-top{display:flex;align-items:baseline;gap:6px 10px;margin:0 0 10px;flex-wrap:wrap}
.ho .ho-top h2{margin:0;font:22px var(--pixel);font-weight:400}
.ho .ho-top small{font:13px var(--text);color:var(--mute)}
.ho .btn{font:13px var(--pixel);background:var(--kbg-eef0f8,#eef0f8);color:var(--ink);border:1px solid var(--bev2);padding:3px 10px;cursor:pointer}
.ho .btn.pri{background:var(--force);color:#fff;border-color:var(--force)}
.ho .btn.warn{border-color:var(--bad);color:var(--bad)}
.ho .btn:disabled{opacity:.45;cursor:not-allowed}
.ho .btn.small{font-size:11.5px;padding:1px 7px}
.ho .ho-toast{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#1d1d3a;color:#fff;font:13px var(--text);padding:6px 12px;z-index:30;max-width:92%;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.ho .ho-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 10px}
.ho .ho-tabs button{font:13px var(--pixel);border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);padding:3px 10px;cursor:pointer}
.ho .ho-tabs button[aria-pressed=true]{background:var(--indigo);color:#fff;border-color:var(--indigo-fg,var(--indigo))}
.ho .hk{width:76px;border:2px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);border-radius:4px;display:flex;flex-direction:column;align-items:center;padding:3px 3px 4px;position:relative;font-family:var(--text);cursor:pointer;min-width:0}
.ho .hk .hk-cost{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;color:#fff;font:11px/16px var(--pixel);text-align:center}
.ho .hk .hk-st{position:absolute;right:3px;top:1px;font:10px var(--pixel);color:var(--kfg-b07a00,#b07a00);letter-spacing:-1px}
.ho .hk img{image-rendering:pixelated;display:block;width:48px;height:48px;margin-top:4px}
.ho .hk b{font:10.5px/1.15 var(--pixel);font-weight:400;text-align:center;min-height:24px;display:flex;align-items:center;overflow-wrap:anywhere}
.ho .hk .hk-tags{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.ho .hk .hk-ind{position:absolute;right:2px;top:15px;font:10px/14px var(--pixel);background:var(--ok);color:#fff;width:14px;text-align:center;border-radius:50%}
.ho .hk .hk-lv{position:absolute;right:3px;top:2px;font:9px/1 var(--pixel);color:var(--kfg-4d4d6e,#4d4d6e);letter-spacing:-1px}
.ho .hk .hk-st2{position:absolute;right:3px;top:12px;font:10px var(--pixel);color:var(--kfg-b07a00,#b07a00);letter-spacing:-1px}
.ho .hk>*{position:relative;z-index:1}
.ho .hk>.hk-cost,.ho .hk>.hk-lv,.ho .hk>.hk-st,.ho .hk>.hk-st2,.ho .hk>.hk-ind{position:absolute;z-index:2}
.ho .hk.f3::before,.ho .hk.f4::before,.ho .hk.f5::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 48%,transparent 60%);background-size:260% 100%;animation:ho-sheen 3.2s linear infinite}
.ho .hk.f3{box-shadow:inset 0 3px 0 var(--cc),inset 0 0 0 2px var(--ksh-f4f7fc,#f4f7fc),inset 0 0 0 3px #8f99ad}
.ho .hk.f3 .hk-lv{color:var(--kfg-5d6780,#5d6780)}
.ho .hk.f4{box-shadow:inset 0 3px 0 var(--cc),inset 0 0 0 2px var(--ksh-fff1b8,#fff1b8),inset 0 0 0 3.5px #b8860b}
.ho .hk.f4::before{background:linear-gradient(115deg,transparent 35%,rgba(255,250,220,.95) 48%,transparent 60%);background-size:260% 100%}
.ho .hk.f4 .hk-lv{color:var(--kfg-8a5a00,#8a5a00)}
.ho .hk.f5{background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 60%,#120a2a),#0b0820 85%)!important}
.ho .hk.f5 b{color:#fff;text-shadow:0 1px 0 #000}
.ho .hk.f5 .hk-lv{color:#fff!important}
.ho .hk>.hk-fx,.ho .hk>.hk-rim,.ho .hk>.hk-edge,.ho .hk>.hk-tw{position:absolute;pointer-events:none}
.ho .hk>.hk-fx{inset:0;z-index:0;border-radius:inherit}
.ho .hk.f3>.hk-fx{background:repeating-linear-gradient(115deg,transparent 0 7px,rgba(150,165,195,.32) 8px,rgba(255,255,255,.85) 9px,transparent 11px)}
.ho .hk.f4>.hk-fx{background:radial-gradient(circle,rgba(230,180,40,.9) 0 .9px,transparent 1.5px) 0 0/6px 7px,radial-gradient(circle,rgba(255,255,255,.9) 0 .7px,transparent 1.3px) 3px 3px/9px 8px,radial-gradient(ellipse at center,transparent 50%,rgba(211,154,18,.45))}
.ho .hk.f5>.hk-fx{background:repeating-linear-gradient(125deg,#ff6ec7 0 5%,#ffd23f 10%,#5fe08a 15%,#4fc3ff 20%,#b48cff 25%,#ff6ec7 30%);background-size:300% 300%;mix-blend-mode:screen;opacity:.5;animation:ho-drift5 7s linear infinite}
@keyframes ho-drift5{to{background-position:300% 300%}}
.ho .hk>.hk-rim{inset:0;z-index:3;border-radius:2px;padding:3px;background:conic-gradient(from var(--ho-spin),#ff6ec7,#ffd23f,#5fe08a,#4fc3ff,#b48cff,#ff6ec7);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ho-spin 4s linear infinite}
.ho .hk>.hk-tw{width:7px;height:7px;z-index:3;background:radial-gradient(circle,var(--kbg-fff,#fff) 0 18%,transparent 22%),linear-gradient(var(--kbg-fff,#fff),var(--kbg-fff,#fff)) center/14% 100% no-repeat,linear-gradient(var(--kbg-fff,#fff),var(--kbg-fff,#fff)) center/100% 14% no-repeat;opacity:0;animation:ho-tw 2.4s ease-in-out infinite}
@keyframes ho-tw{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
@property --ho-spin{syntax:'<angle>';inherits:true;initial-value:0deg}
@keyframes ho-spin{to{--ho-spin:360deg}}
.ho .hk.legend{background:linear-gradient(var(--kbg-efe6ff,#efe6ff),var(--kbg-e3e7f4,#e3e7f4))}
.ho .hk.legend>.hk-cost{left:50%!important;top:-10px!important;transform:translateX(-50%);width:22px;height:22px;line-height:22px;border-radius:0;font-size:12px;clip-path:polygon(50% 0,100% 28%,100% 72%,50% 100%,0 72%,0 28%);background:linear-gradient(#8a4fd0,#2a1050)!important;z-index:4}
.ho .hk.legend b{width:calc(100% + 10px);margin:0 -5px;min-height:20px;padding:1px 4px;color:#fff;justify-content:center;background:linear-gradient(90deg,transparent,var(--cc) 12%,var(--cc) 88%,transparent);clip-path:polygon(0 50%,6% 0,94% 0,100% 50%,94% 100%,6% 100%);text-shadow:0 1px 0 rgba(0,0,0,.5)}
.ho .hk.legend .hk-lv{color:var(--kfg-4a2a80,#4a2a80)}
.ho .hk>.hk-edge{inset:0;z-index:3;border-radius:2px;padding:2px;background:conic-gradient(from var(--ho-spin),transparent 0 70%,var(--kbg-fff,#fff) 80%,var(--cc) 88%,transparent 95%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ho-spin 3.5s linear infinite}
.ho .ho-insp{position:absolute;inset:0;z-index:20;background:rgba(10,12,30,.45);backdrop-filter:blur(6px) brightness(.8);-webkit-backdrop-filter:blur(6px) brightness(.8)}
.ho .ho-insp .ho-in{position:sticky;top:12px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;padding:20px 12px}
.ho .ho-insp .ho-bigwrap{width:200px;height:310px;display:grid;place-items:center;touch-action:none;cursor:grab}
.ho .ho-insp .ho-tilt{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;transform-style:preserve-3d;transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(2.4);transition:transform .08s linear}
.ho .ho-insp .ho-tilt.ho-flip{transform:perspective(700px) rotateY(180deg) scale(2.4)}
.ho .ho-insp .ho-tilt .hk{backface-visibility:hidden;cursor:grab}
.ho .ho-insp .ho-tilt .ho-glare{position:absolute;inset:0;border-radius:4px;z-index:5;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.6),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light;transform:translateZ(1px)}
.ho .ho-insp .ho-cardback{position:absolute;inset:0;border-radius:4px;background:linear-gradient(135deg,#1b1f6b,#2e5fb0);color:#fff;transform:rotateY(180deg);backface-visibility:hidden;padding:5px;font-size:6.5px;line-height:1.4;overflow:hidden}
.ho .ho-insp .ho-cardback b{display:block;font:8px var(--pixel);margin-bottom:2px}
.ho .ho-insp .ho-pnl{background:var(--iv);border:1px solid var(--bev2);max-width:330px;width:100%;padding:10px 12px;font-size:13px}
.ho .ho-insp .ho-pnl h4{margin:0;font:18px var(--pixel);font-weight:400}
.ho .ho-insp .ho-pnl .ho-k{font:12px var(--pixel);color:var(--mute)}
.ho .ho-insp .ho-pnl .ho-ab{margin:6px 0;padding:6px 8px;background:var(--kbg-fff,#fff);border:1px solid var(--bev2)}
.ho .ho-insp .ho-pnl .ho-ab b{font:13px var(--pixel);font-weight:400}
.ho .ho-insp .ho-pnl .ho-row2{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
.ho .ho-insp .ho-pnl .ho-lk button[aria-pressed=true]{background:var(--indigo);color:#fff}
@container (max-width:560px){.ho .ho-insp .ho-bigwrap{width:170px;height:260px}
.ho .ho-insp .ho-tilt{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(2)}
.ho .ho-insp .ho-tilt.ho-flip{transform:perspective(700px) rotateY(180deg) scale(2)}}
.ho .hk.f5 .hk-lv{color:var(--kfg-7a4fb0,#7a4fb0)}
@keyframes ho-sheen{0%{background-position:130% 0}100%{background-position:-130% 0}}
@keyframes ho-prism{0%{background-position:0 0,0 0}100%{background-position:0 0,300% 0}}
@media (prefers-reduced-motion:reduce){.ho .hk.f3::before,.ho .hk.f4::before,.ho .hk.f5::before,.ho .hk.f5,.ho .hk>.hk-fx,.ho .hk>.hk-rim,.ho .hk>.hk-edge,.ho .hk>.hk-tw{animation:none!important}}
.ho .ho-drop.ho-hot{outline:3px dashed var(--ok);outline-offset:-3px;background:var(--kbg-f2fff5,#f2fff5)}
.ho .ho-tray{display:none}
.ho .ho-tray.ho-hot{background:#1d6b3a}
.ho-ghost{position:fixed;z-index:200;pointer-events:none;transform:translate(-50%,-60%) rotate(-4deg);opacity:.92;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.ho .hk.ho-lifted{opacity:.35}
.ho-tip{position:fixed;z-index:150;max-width:260px;background:#1d1d3a;color:#fff;font:12px/1.45 system-ui,sans-serif;padding:6px 8px;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.3);pointer-events:none;display:none}
.ho .ho-toast button{margin-left:8px;font:12px var(--pixel);background:#ffd23f;border:0;padding:1px 8px;cursor:pointer;color:var(--kfg-1b1608,#1b1608)}
.ho .ho-tiers{display:flex;gap:10px;flex-wrap:wrap;padding:8px 10px;align-items:flex-start}
.ho .ho-tiers>div{display:flex;flex-direction:column;align-items:center;gap:3px;font:11px var(--pixel);color:var(--mute);text-align:center;width:80px}
.ho .ho-tiers>div>span{min-height:2.6em;line-height:1.3}
.ho .hk.unk{background:var(--kbg-e9e9f2,#e9e9f2);border-style:dashed}
.ho .hk.unk b{color:var(--mute)}
.ho .hk.sel{outline:3px solid var(--gold);outline-offset:1px}
.ho .hk{--cc:#7d8699;border-color:var(--cc)!important;box-shadow:inset 0 3px 0 var(--cc)}
.ho .hk.c1{--cc:#7d8699}
.ho .hk.c2{--cc:#2e8a4a}
.ho .hk.c3{--cc:#2e6fd0}
.ho .hk.c4{--cc:#8a4fd0}
.ho .hk.f5{box-shadow:inset 0 3px 0 var(--cc),0 0 8px 2px rgba(180,140,255,.6)}
.ho .hk.legend img{width:56px;height:56px;margin-top:2px}
.ho .hk .hk-orn{position:absolute;inset:-2px;pointer-events:none;z-index:3;background:
  linear-gradient(#e0b23a,#e0b23a) left top/12px 3px no-repeat,linear-gradient(#e0b23a,#e0b23a) left top/3px 12px no-repeat,
  linear-gradient(#e0b23a,#e0b23a) right top/12px 3px no-repeat,linear-gradient(#e0b23a,#e0b23a) right top/3px 12px no-repeat,
  linear-gradient(#e0b23a,#e0b23a) left bottom/12px 3px no-repeat,linear-gradient(#e0b23a,#e0b23a) left bottom/3px 12px no-repeat,
  linear-gradient(#e0b23a,#e0b23a) right bottom/12px 3px no-repeat,linear-gradient(#e0b23a,#e0b23a) right bottom/3px 12px no-repeat}
.ho .hk.unk{--cc:#9a9ab0}
.ho .ho-legendrow{display:flex;gap:10px;flex-wrap:wrap;padding:0 10px 8px;align-items:flex-start}
.ho .ho-legendrow>div{display:flex;flex-direction:column;align-items:center;gap:3px;font:11px var(--pixel);color:var(--mute);text-align:center;width:80px}
.ho .ho-legendrow>div>span{min-height:2.6em;line-height:1.3}
.ho .ho-keyline{padding:6px 10px 0;font-size:12.5px}
.ho .ho-keyline b{font:12.5px var(--pixel);font-weight:400}
.ho .hk.mo::after{content:attr(data-mo);position:absolute;top:-7px;left:50%;transform:translateX(-50%);font:9px var(--pixel);background:#a3253f;color:#fff;padding:0 3px;white-space:nowrap}
.ho .ho-rb{display:inline-block;font:9.5px/13px var(--pixel);color:#fff;padding:0 3px;border-radius:2px}
.ho .ho-fb{display:inline-block;font:9.5px/12px var(--pixel);padding:0 3px;border:1px solid var(--c);border-radius:2px;background:var(--kbg-fff,#fff);color:var(--c)}
.ho .ho-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;padding:8px 10px;justify-items:center}
.ho .ho-row{display:flex;gap:6px;flex-wrap:wrap}
.ho .ho-yodel{margin:0 0 12px;border:2px solid #2e8fd0;background:linear-gradient(var(--kbg-e9f6ff,#e9f6ff),var(--kbg-d6efff,#d6efff));padding:8px 10px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
.ho .ho-yodel .ho-yo{width:36px;height:36px;border-radius:50%;background:radial-gradient(#8fe3ff,#2e8fd0);display:grid;place-items:center;font:18px var(--pixel);color:#06324f;box-shadow:0 0 10px #8fe3ff}
/* P-159 (Spa modes v0.1): the practice raid's coaching beside the raid (above it on phones); the part each card is about gets a gold edge */
@media (max-width:520px){.ho .ho-yodel{grid-template-columns:auto minmax(0,1fr)}.ho .ho-yodel>.btn{grid-column:1/-1}}
.ho .ho-cwrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:10px;align-items:start}.ho .ho-cmain{min-width:0}
.ho .ho-coach{position:sticky;top:8px;border:2px solid #2e8fd0;background:linear-gradient(var(--kbg-e9f6ff,#e9f6ff),var(--kbg-d6efff,#d6efff));padding:10px;display:grid;gap:6px;font-size:13px}
.ho .ho-coach h4{margin:0;font:14px var(--pixel);font-weight:400;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}.ho .ho-coach h4 small{font-size:11.5px;opacity:.8}
.ho .ho-coach p{margin:0;line-height:1.5}.ho .ho-cbar{height:4px;background:var(--kbg-b9d9ef,#b9d9ef)}.ho .ho-cbar i{display:block;height:100%;background:#2e8fd0}
.ho .ho-crow{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;align-items:center}.ho .ho-crow span{display:flex;gap:6px}
@media (max-width:760px){.ho .ho-cwrap{grid-template-columns:minmax(0,1fr)}.ho .ho-coach{order:-1;position:static}}
.ho .ho-cwrap[data-coach=top] .ho-rbar,.ho .ho-cwrap[data-coach=aug] .ho-board3,.ho .ho-cwrap[data-coach=map] .ho-map,.ho .ho-cwrap[data-coach=grid] .ho-vs>div:first-child .ho-gr,
.ho .ho-cwrap[data-coach=bench] .ho-bench,.ho .ho-cwrap[data-coach=shop] .ho-shop,.ho .ho-cwrap[data-coach=traits] .ho-traits,.ho .ho-cwrap[data-coach=ready] .ho-ctl{outline:2px solid #ffd23f;outline-offset:2px}
.ho .ho-board3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px 10px}
.ho .ho-cand{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:start;min-width:0}
.ho .ho-cand .ho-ab{grid-column:1/-1;font-size:12px}
.ho .ho-cand .ho-ab b{font:12px var(--pixel);font-weight:400}
.ho .ho-cand .ho-act{grid-column:1/-1;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
@container (max-width:700px){.ho .ho-board3{grid-template-columns:minmax(0,1fr)}
.ho .ho-two{grid-template-columns:minmax(0,1fr)!important}}
.ho .ho-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.ho .ho-decks{display:flex;gap:4px;flex-wrap:wrap;padding:8px 10px 0}
.ho .ho-decks button{font:12px var(--pixel);border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:2px 8px;cursor:pointer;color:var(--ink)}
.ho .ho-decks button[aria-pressed=true]{background:var(--force);color:#fff;border-color:var(--force)}
.ho .ho-meter{padding:6px 10px;font-size:12.5px;display:flex;gap:4px 10px;flex-wrap:wrap;border-bottom:1px dashed var(--bev2)}
.ho .ho-meter b{font:13px var(--pixel);font-weight:400}
.ho .ho-cnt{font:12px var(--pixel);padding:0 6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff)}
.ho .ho-cnt.ok{border-color:var(--ok);color:var(--ok)}
.ho .ho-cnt.bad{border-color:var(--bad);color:var(--bad)}
.ho .ho-trade{margin:6px 10px;padding:6px 8px;background:var(--kbg-f4f1ff,#f4f1ff);border:1px solid #b9a8e8;font-size:12.5px}
.ho .ho-filt{display:flex;gap:4px;flex-wrap:wrap;padding:8px 10px 0}
.ho .ho-filt button{font:11.5px var(--pixel);border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:1px 8px;cursor:pointer;color:var(--ink)}
.ho .ho-filt button[aria-pressed=true]{background:var(--indigo);color:#fff}
.ho .ho-detail{margin:0 10px 10px;border:2px solid var(--gold);background:var(--kbg-fffdf0,#fffdf0);padding:8px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:12.5px}
.ho .ho-detail b.ho-n{font:15px var(--pixel);font-weight:400}
.ho .ho-detail .ho-acts{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.ho .ho-stars{font:12px var(--pixel);color:var(--kfg-b07a00,#b07a00)}
.ho .ho-prog{height:5px;background:var(--kbg-e6e6f4,#e6e6f4);border:1px solid var(--bev2);width:120px;display:inline-block;vertical-align:middle}
.ho .ho-prog i{display:block;height:100%;background:#b07a00}
.ho .ho-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;padding:8px 10px;align-items:center}
.ho .ho-pal{display:flex;gap:4px;flex-wrap:wrap}
.ho .ho-pal button{font:11.5px var(--pixel);border:2px solid var(--c);background:var(--kbg-fff,#fff);color:var(--ink);padding:1px 7px;cursor:pointer}
.ho .ho-pal button[aria-pressed=true]{background:var(--c);color:#fff}
.ho .ho-rbar{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;background:#1d1d3a;color:#fff;padding:6px 10px;font:13px var(--pixel);margin-bottom:8px}
.ho .ho-rbar .ho-g{color:#ffd23f}
.ho .ho-rbar .ho-h{color:#ff8a7a}
.ho .ho-rbar .ho-s{color:#ffb070}
.ho .ho-xp{display:inline-block;width:54px;height:7px;border:1px solid #8a8fc4;background:#2d2d55;vertical-align:middle}
.ho .ho-xp i{display:block;height:100%;background:#4fe3c8}
.ho .ho-rbar .ho-sp{margin-left:auto;display:flex;gap:6px}
.ho .ho-pause{margin:0 0 8px;padding:6px 10px;background:var(--kbg-eef6ff,#eef6ff);border:1px solid #2e8fd0;font-size:12.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ho .ho-map{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:6px 10px;font:11.5px var(--pixel)}
.ho .ho-map span{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:1px 6px}
.ho .ho-map span.ho-done{opacity:.5}
.ho .ho-map span.ho-now{background:var(--gold);border-color:#8a5a00}
.ho .ho-map span.ho-boss{border-color:var(--bad);color:var(--bad)}
.ho .ho-vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:8px 10px}
@container (max-width:700px){.ho .ho-vs{grid-template-columns:minmax(0,1fr)}}
.ho .ho-gr{display:grid;grid-template-columns:repeat(3,76px);gap:6px;justify-content:start}
.ho .ho-cell{width:76px;min-height:110px;border:2px dashed var(--bev2);border-radius:4px;background:var(--kbg-fff,#fff);display:flex;align-items:center;justify-content:center;font:10.5px var(--pixel);color:var(--mute);cursor:pointer;text-align:center}
.ho .ho-cell.ho-tgt{outline:2px solid var(--gold);outline-offset:1px}
.ho .ho-cell.ho-lock{background:var(--kbg-e7e7f0,#e7e7f0);cursor:not-allowed}
.ho .ho-gl{font:11.5px var(--pixel);color:var(--mute);margin:0 0 4px}
.ho .ho-foe .hk{background:var(--kbg-fff4f2,#fff4f2);cursor:default}
.ho .ho-bench{display:grid;grid-template-columns:repeat(6,76px);gap:6px;padding:4px 10px 8px;overflow-x:auto}
@container (max-width:560px){.ho .ho-bench{grid-template-columns:repeat(3,76px)}
.ho .ho-gr{grid-template-columns:repeat(3,76px)}}
.ho .ho-shop{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:4px 10px;justify-items:center}
@container (max-width:560px){.ho .ho-shop{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ho .ho-shop .hk{width:100%;max-width:90px}
.ho .ho-shop .ho-price{font:11px var(--pixel);margin-top:2px}
.ho .ho-shop .ho-price .ho-fb{margin-top:2px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
/* QOL-10: a held card must not raise iOS's image callout or text loupe, which cancels the touch mid-drag */
.ho .hk,.ho .hk img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ho .ho-ctl{display:flex;gap:6px;flex-wrap:wrap;padding:6px 10px;align-items:center}
.ho .ho-odds{font-size:12px;color:var(--mute);padding:0 10px 8px}
.ho .ho-traits{display:flex;flex-wrap:wrap;gap:4px;padding:6px 10px}
.ho .ho-tr{font-size:11.5px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:0 6px;color:var(--mute)}
.ho .ho-tr.ho-on{border-color:var(--ok);background:var(--kbg-eefaf0,#eefaf0);color:var(--ink)}
.ho .ho-tr b{font:11.5px var(--pixel);font-weight:400}
.ho .ho-auto{margin:0 10px 10px;padding:6px 8px;background:var(--kbg-eef6ff,#eef6ff);border:1px solid #2e8fd0;font-size:12.5px}
.ho .ho-modal{position:absolute;inset:0;background:rgba(10,12,30,.55);display:flex;align-items:flex-start;justify-content:center;padding-top:60px;z-index:9}
.ho .ho-modal>div{background:var(--iv);border:2px solid var(--bad);max-width:420px;width:92%;padding:12px}
.ho .ho-modal h4{margin:0 0 6px;font:16px var(--pixel);font-weight:400;color:var(--bad)}
.ho .ho-modal ul{margin:4px 0 8px;padding-left:18px;font-size:13px}
.ho .ho-chip{font:11.5px var(--pixel);border:1px solid #b08a2a;background:var(--kbg-fff8dc,#fff8dc);padding:0 6px}
.ho .ho-dex{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px}
@container (max-width:700px){.ho .ho-dex{grid-template-columns:minmax(0,1fr)}}
.ho .ho-ent h4{margin:0;font:16px var(--pixel);font-weight:400}
.ho .ho-ent .ho-ab{margin:6px 0;padding:6px 8px;background:var(--kbg-fff,#fff);border:1px solid var(--bev2);font-size:12.5px}
.ho .ho-ent .ho-ab b{font:12.5px var(--pixel);font-weight:400}
.ho .ho-ent table{border-collapse:collapse;width:100%;font-size:12px;margin-top:6px}
.ho .ho-ent td,.ho .ho-ent th{border-bottom:1px dashed var(--bev2);padding:2px 4px;text-align:left}
.ho .ho-ent th{font:11px var(--pixel);font-weight:400;color:var(--mute)}
/* the toast stays in view on a long Temple page */
.ho .ho-toast{position:fixed;top:64px;z-index:60}
.ho .ho-modal{position:fixed;z-index:55}
/* while a collection card is dragged, the deck tray stays in view on every screen size (the deck box may be scrolled away) */
.ho.ho-dragging .ho-tray{display:flex;gap:8px;align-items:center;position:sticky;bottom:0;z-index:5;background:#1d1d3a;color:#fff;font:13px var(--pixel);padding:8px 10px;border:2px dashed #8fe3a8;margin-top:8px}
.ho.ho-dragging .ho-tray.ho-hot{background:#1d6b3a}
/* the confirm dialog can open over another dialog (D-107: the rebirth window asks about a raid in progress) */
#confirm-modal{z-index:60}
/* on phones the tab bar sits at the bottom: the deck tray floats above it (as the Gear bulk bar does) */
@media (max-width:720px){.ho .ho-tray,.ho.ho-dragging .ho-tray{bottom:80px}}
/* HOLO-1 phase 6: the 2.5D scene (16:9 canvas, crisp pixels) */
.ho-scene{display:block;width:100%;aspect-ratio:16/9;background:#0b0d14;image-rendering:pixelated;border:1px solid #2c3039}
.ho .box .ho-scene{border:0;border-top:1px solid var(--bev2);max-width:720px;margin:0 auto}
.patrol-box .ho-scene{margin:8px 0 2px}
.patrol-box .pt-cap{display:flex;justify-content:space-between;gap:8px;font:11.5px var(--pixel);color:var(--mute);margin-bottom:6px}
/* HOLO-1: 5-cost mythics (D-105): gold border and gem; at ◆4–◆5 no starfield or glitter (◆4 a warm gold glow, ◆5 a softer holo) */
.ho .hk.c5{--cc:#b8860b}
.ho .hk.legend.c5>.hk-cost{background:linear-gradient(#ffd23f,#7a5200)!important;color:#1b1608}
.ho .hk.legend.c5{background:linear-gradient(var(--kbg-fff6d6,#fff6d6),var(--kbg-f0e2b0,#f0e2b0))}
.ho .hk.c5.f4>.hk-fx{background:radial-gradient(ellipse at center,transparent 45%,rgba(211,154,18,.5))}
.ho .hk.c5.f5>.hk-fx{opacity:.3}
.ho .hk.c5.f5{background:linear-gradient(160deg,#5a3a08,#1a0f02 85%)!important}
/* the Temple row in slot 2 and the patrol box take their own places in the Adventure grid */
.adv{grid-template-rows:auto auto auto auto auto auto 1fr;grid-template-areas:"side away" "side battle" "side trace" "side slot2" "side slot2t" "side slot2p" "side find"}
#slot2p{grid-area:slot2p}/* D-306: the Pocket-Mon row had no place of its own and sat on top of Hogwash's */
#slot2t{grid-area:slot2t;border-color:#2e8fd0;background:var(--kbg-eef7ff,#eef7ff)}
.adv .patrol-box{grid-area:battle}
@media (max-width:900px){.adv{grid-template-rows:none;grid-template-areas:"away" "battle" "trace" "slot2" "slot2t" "slot2p" "find" "side"}}
.patrol-box{padding:8px 10px;border:2px solid #2e8fd0;background:linear-gradient(var(--kbg-f4faff,#f4faff),var(--kbg-e6f3ff,#e6f3ff))}
.patrol-box[hidden]{display:none}
.patrol-box .pt-head{display:flex;flex-wrap:wrap;gap:2px 10px;justify-content:space-between;align-items:baseline}
.patrol-box .pt-head b{font:15px var(--pixel);font-weight:400}
.patrol-box .pt-head span{font-size:12.5px;color:var(--mute)}
.patrol-box .pt-boards{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;margin:8px 0}
.patrol-box .pt-boards small{display:block;font:11.5px var(--pixel);color:var(--mute);margin-bottom:2px}
.patrol-box .pt-vs{font:14px var(--pixel);color:var(--kfg-b3261e,#b3261e)}
.patrol-box .pt-row{display:grid;grid-template-columns:repeat(3,40px);gap:3px}
.patrol-box .pt-u{width:40px;height:40px;border:2px solid #7d8699;background:var(--kbg-fff,#fff);border-radius:3px;position:relative;display:grid;place-items:center}
.patrol-box .pt-u img{width:32px;height:32px;image-rendering:pixelated}
.patrol-box .pt-u.c2{border-color:#2e8a4a}.patrol-box .pt-u.c3{border-color:#2e6fd0}.patrol-box .pt-u.c4{border-color:#8a4fd0}.patrol-box .pt-u.c5{border-color:#b8860b}
.patrol-box .pt-u.hero{border-color:#1b1f6b;background:var(--kbg-eef0ff,#eef0ff)}
.patrol-box .pt-u.empty{border-style:dashed;background:transparent}
.patrol-box .pt-u i{position:absolute;right:1px;top:-2px;font:9px var(--pixel);color:var(--kfg-b07a00,#b07a00);font-style:normal}
.patrol-box .pt-bar{height:7px;border:1px solid var(--bev2);background:var(--kbg-dfe8f5,#dfe8f5)}
.patrol-box .pt-bar i{display:block;height:100%;background:#2e8fd0;transform-origin:left;transition:transform .25s linear}
.patrol-box .pt-foot{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--mute);margin-top:3px;flex-wrap:wrap}
.patrol-box .pt-ev{margin-top:6px;font-size:12px;border-top:1px dashed var(--bev2);padding-top:4px}
.patrol-box .pt-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
@media (max-width:420px){.patrol-box .pt-boards{grid-template-columns:minmax(0,1fr)}.patrol-box .pt-vs{text-align:center}}
@media (prefers-reduced-motion:reduce){.patrol-box .pt-bar i{transition:none}}

/* HOLO-1 full-art holocards (approved design/holo-portraits-preview-v2.html, D-109): the 48 px portrait at exactly 2x fills a
   100x100 card; the name rides a ribbon over the shoulders; the class is a corner tag. Cost border, legend gem and ◆ foil kept. */
.ho .hk.fa{width:100px;height:100px;padding:0;justify-content:flex-start;overflow:visible}
.ho .hk.fa>.fa-art{position:absolute;left:0;top:0;width:96px;height:96px;margin:0;image-rendering:pixelated;z-index:1}
.ho .hk.fa>.fa-name{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;min-height:30px;padding:0 3px 3px;
  background:linear-gradient(transparent,rgba(16,16,40,.82) 55%);border-radius:0 0 2px 2px}
.ho .hk.fa>.fa-name b{font:10.5px/1.1 var(--pixel);color:#fff;text-shadow:0 1px 0 #000;text-align:center;min-height:0;overflow-wrap:anywhere;display:block}
.ho .hk.fa>.fa-cls{position:absolute;z-index:3;right:2px;top:12px;font:8.5px/11px var(--pixel);color:#fff;padding:0 2px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.ho .hk.fa>.hk-cost{z-index:3;box-shadow:0 0 0 1px #fff}
.ho .hk.fa>.hk-lv{z-index:3;right:3px;top:2px;color:#fff;text-shadow:0 1px 0 #000,0 0 2px #000}
.ho .hk.fa>.hk-st2{z-index:3;left:3px;top:20px;right:auto;color:#ffd23f;text-shadow:0 1px 0 #000}
.ho .hk.fa>.hk-ind{z-index:3;left:3px;right:auto;top:auto;bottom:32px}
.ho .hk.fa.legend>.fa-name{background:linear-gradient(transparent,color-mix(in srgb,var(--cc) 85%,#000) 60%)}
.ho .hk.fa.legend>.fa-name b{font-size:11px}
.ho .hk.fa.legend>.fa-cls{top:16px}
.ho .hk.fa.f5>.fa-name{background:linear-gradient(transparent,rgba(10,6,30,.88) 55%)}
.ho .hk.fa.unk>.fa-art{filter:brightness(0) invert(.23)}
.ho .hk.fa.unk>.fa-name b{color:#c9c9dd}
/* D-228 (approved holo-export-preview-v1): the crystal bank line, origin sets, the 賞金首 card back, the contract, first Alert ★ clears */
.ho .ho-bank{margin:-6px 0 10px;font-size:12.5px;color:var(--mute)}
.ho .ho-set{display:grid;grid-template-columns:150px minmax(0,1fr) 220px;gap:8px 10px;align-items:center;padding:8px 10px;border-top:1px dashed var(--kbd-c3c7e4,#c3c7e4)}
.ho .ho-sets h3+.ho-set{border-top:none}
.ho .ho-set-nm b{font:15px var(--pixel);font-weight:400;display:block}
.ho .ho-set-nm small{display:block;color:var(--mute);font-size:12px;line-height:1.3}
.ho .ho-set-nm span{font:12px var(--pixel);color:var(--mute)}
.ho .ho-mini{display:flex;flex-wrap:wrap;gap:4px}
.ho .ho-mc{position:relative;width:44px;height:54px;padding:0;border:2px solid #7d8699;background:var(--kbg-f3f4fb,#f3f4fb);display:flex;flex-direction:column;align-items:center;cursor:pointer;font:inherit;color:inherit}
.ho .ho-mc img{width:40px;height:40px;image-rendering:pixelated}
.ho .ho-mc span{font:10px/12px var(--pixel);color:var(--kfg-555,#555)}
.ho .ho-mc.c1{border-color:#6a7080}.ho .ho-mc.c2{border-color:#1d6b3a}.ho .ho-mc.c3{border-color:#2e5fb0}.ho .ho-mc.c4{border-color:#7a4fb0}.ho .ho-mc.c5{border-color:#a87a00}
.ho .ho-mc.d3{background:linear-gradient(var(--kbg-ffffff,#ffffff),var(--kbg-e4e8f0,#e4e8f0));box-shadow:inset 0 0 0 2px var(--ksh-c9cfdc,#c9cfdc)}
.ho .ho-mc.d3 span{color:var(--kfg-2b3a5c,#2b3a5c);font-weight:700}
.ho .ho-mc.none{opacity:.5}
.ho .ho-mc.none img{filter:brightness(0) opacity(.5)}
.ho .ho-mc:focus-visible{outline:3px solid #ff7a1a;outline-offset:1px}
.ho .ho-bonus{border:2px solid var(--kbd-b9bde0,#b9bde0);background:var(--kbg-f6f6fb,#f6f6fb);padding:6px 8px;font-size:13px;line-height:1.4}
.ho .ho-bonus .st{font:12px var(--pixel)}
.ho .ho-bonus.lit{border-color:var(--ok);background:var(--kbg-eafbf0,#eafbf0)}
.ho .ho-bonus.lit .st{color:var(--ok)}
@container (max-width:700px){.ho .ho-set{grid-template-columns:minmax(0,1fr)}}
.ho .hk.fa.unk.wanted{background:repeating-linear-gradient(0deg,var(--kbg-efe0b4,#efe0b4) 0 3px,var(--kbg-e6d39f,#e6d39f) 3px 6px);border-style:solid}
.ho .hk.fa.unk.wanted::before{content:'賞金首';position:absolute;z-index:3;left:0;right:0;top:20px;text-align:center;font:15px/1 var(--pixel);color:var(--kfg-6b3a14,#6b3a14);letter-spacing:1px}
.ho .hk.fa.unk.wanted>.fa-art{filter:sepia(1) brightness(.35);opacity:.55}
.ho .hk.fa.unk.wanted>.fa-name{background:linear-gradient(transparent,rgba(80,40,10,.85) 55%)}
.ho .ho-contract{border:3px solid #6a2fb8;background:linear-gradient(var(--kbg-fbf6ff,#fbf6ff),var(--kbg-f1e6ff,#f1e6ff));padding:10px 12px;margin:0 0 12px}
.ho .ho-contract h3{margin:0 0 4px;font:16px var(--pixel);font-weight:400;color:var(--kfg-4a1f8a,#4a1f8a);display:flex;justify-content:space-between;gap:4px 8px;flex-wrap:wrap}
.ho .ho-contract h3 span{font:12px var(--text);color:var(--mute)}
.ho .ho-contract dl{display:grid;grid-template-columns:80px minmax(0,1fr);gap:2px 10px;margin:6px 0}
.ho .ho-contract dt{color:var(--mute);font-size:12px}
.ho .ho-contract dd{margin:0;min-width:0}
.ho .ho-twist{display:inline-block;background:var(--kbg-fff,#fff);border:1px solid #6a2fb8;padding:0 6px;font:13px var(--pixel)}
.ho .ho-prize{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.ho .ho-prize span{border:1px solid #c9a34a;background:var(--kbg-fff,#fff);padding:3px 8px;font-size:13px}
.ho .ho-contract .ho-row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.ho .ho-contract .btn{min-height:36px}
.ho .ho-badge{display:inline-block;min-width:18px;height:18px;border-radius:9px;background:#d4372c;color:#fff;font:700 11px/18px var(--text);text-align:center;padding:0 5px;margin-left:4px;vertical-align:1px}
.ho .ho-firsts{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px}
.ho .ho-firsts th,.ho .ho-firsts td{border:1px solid var(--kbd-c3c7e4,#c3c7e4);padding:4px 6px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.ho .ho-firsts th{background:var(--kbg-eef0fb,#eef0fb);font-weight:400;color:var(--mute);font-size:12px}
.ho .ho-firsts td.done{background:var(--kbg-eafbf0,#eafbf0)}
.ho .hk.fa.mo::after{top:auto;bottom:-7px;z-index:4}
/* the screens make room for 100 px cards */
.ho .ho-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.ho .ho-gr{grid-template-columns:repeat(3,100px)}
.ho .ho-cell{width:100px;min-height:100px}
.ho .ho-bench{grid-template-columns:repeat(6,100px)}
@container (max-width:560px){.ho .ho-bench{grid-template-columns:repeat(3,100px)}.ho .ho-gr{grid-template-columns:repeat(3,100px)}}
.ho .ho-shop .hk.fa{width:100px;max-width:none}
.ho .ho-shop .ho-cell{width:100px!important;min-height:100px}
.ho .ho-legendrow>div,.ho .ho-tiers>div{width:104px}
/* the close-up shows the card at exactly 2x, so the portrait is 4x: crisp */
.ho .ho-insp .ho-bigwrap{width:220px;height:230px}
.ho .ho-insp .ho-tilt{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(2)}
.ho .ho-insp .ho-tilt.ho-flip{transform:perspective(700px) rotateY(180deg) scale(2)}
@container (max-width:560px){.ho .ho-insp .ho-bigwrap{width:210px;height:220px}.ho .ho-insp .ho-tilt{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(2)}.ho .ho-insp .ho-tilt.ho-flip{transform:perspective(700px) rotateY(180deg) scale(2)}}

/* SPELL-0 S6 (D-121–D-123): the spell hotbar in the battle box and the 術 Spells screen (design/spell-ui-preview-v2.html) */
.hotbar{background:#101024;border-bottom:1px solid #333}
.sp-hb{display:flex;gap:6px;align-items:flex-end;padding:7px 10px;flex-wrap:wrap}
.sp-hb.light{background:#101024;border:1px solid var(--bev2)}
.sp-slot{position:relative;width:44px;height:44px;border:2px solid #5a5f88;background:#05050e;display:grid;place-items:center;cursor:pointer;padding:0;color:#ddd;font:10px var(--pixel)}
.sp-slot:focus-visible,.sp-gs:focus-visible{outline:2px solid var(--kbd-9ef0ff,#9ef0ff);outline-offset:1px}
.sp-slot .sp-ic{width:32px;height:32px}
.sp-ic{image-rendering:pixelated;display:block}
.sp-slot.job{border-color:#d9a521}
.sp-slot.evo{width:94px;border-color:#d9a521;background:linear-gradient(90deg,#3a1505,#071a2a)}
.sp-slot.link{width:20px;border-style:dotted;border-color:#d9a521;background:#1a1405;color:#ffe27a;cursor:default}
.sp-slot .sp-cd{position:absolute;inset:0;background:conic-gradient(#000b var(--p),transparent 0);pointer-events:none}
.sp-slot .sp-k{position:absolute;left:2px;top:-1px;color:#ddd;text-shadow:0 0 2px #000;font-weight:400}
.sp-slot .sp-t{position:absolute;right:2px;bottom:0;color:#fff;text-shadow:0 0 3px #000;font-weight:400}
.sp-slot .sp-en{position:absolute;left:3px;right:30px;bottom:0;color:#ffe27a;text-align:center;white-space:nowrap;overflow:hidden;text-shadow:0 0 3px #000;font-weight:400}
.sp-slot .sp-auto{position:absolute;right:2px;bottom:0;color:#9ef0ff;font-weight:400}
.sp-slot.empty{border-style:dashed;color:#8890c0}
.sp-slot.lock{width:28px;border-style:dashed;border-color:#444;color:var(--kfg-777,#777);cursor:default;line-height:1.15;text-align:center}
.sp-slot.target{border-color:var(--kbd-9ef0ff,#9ef0ff)}
.sp-sep{flex:1}
.sp-book{display:flex;gap:4px;align-items:center;opacity:.55;color:#bbb;font:10px var(--pixel)}.sp-book.on{opacity:1}
.sp-sc{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:normal 10px var(--pixel);color:#fff;border:1px solid var(--kbd-fff6,#fff6);background:#4d4d6e}
.sp-sc.charms{background:#2e7bd6}.sp-sc.hexes{background:#b3261e}.sp-sc.transfig{background:#7a4fb0}.sp-sc.potions{background:#2b8a3e}.sp-sc.defence{background:#c06a10}.sp-sc.herb{background:#5f7f1f}
.sp-hbfoot{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:4px 10px;background:#0b0b18;font-size:11.5px;color:#9aa;flex-wrap:wrap}
.sp-hbfoot b{color:#ffe27a;font-weight:400}
.c-jspell{color:#ffc58a}.c-evo{color:#ffe27a}
.spellpop{color:#ffc58a}
.sp-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.sp-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:12px;align-items:start}
@media (max-width:860px){.sp-grid2{grid-template-columns:minmax(0,1fr)}}
.sp-evrow{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;margin:8px 0}
.sp-evi{display:inline-flex;gap:5px;align-items:center}
.sp-lbl{font:12px var(--pixel);color:var(--mute);margin:6px 0 4px}
.sp-sum{display:grid;gap:6px;border:2px solid var(--indigo-fg,var(--indigo));background:var(--kbg-f4f5ff,#f4f5ff);padding:6px 8px;margin:8px 0}
.sp-sh{font:13px var(--pixel);color:var(--indigo-fg,var(--indigo));margin:6px 0 2px}.sp-sh span{font:11.5px var(--sans,inherit);color:var(--mute);margin-left:4px}
.sp-keys{display:flex;flex-wrap:wrap;gap:6px}
.sp-kc{display:grid;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:2px 8px;min-width:0}.sp-kc i{font-style:normal;font-size:11px;color:var(--mute)}.sp-kc b{font:14px var(--pixel);font-weight:400;font-variant-numeric:tabular-nums}
.sp-kc.kc-tap{cursor:pointer}.sp-kc.kc-tap:hover,.sp-kc.kc-tap:focus-visible{border-color:var(--named,#c98a12)}.sp-kc .kflip{opacity:.7}/* D-313 */
.sp-dl{font:12px var(--pixel)}.sp-dl.up{color:var(--kfg-127a36,#127a36)}.sp-dl.dn{color:var(--kfg-b3261e,#b3261e)}
.sp-bars{display:grid;gap:3px}.sp-br{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr) auto;gap:6px;align-items:center;font-size:12px}
.sp-br>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-bt{height:9px;background:var(--kbg-dfe2ef,#dfe2ef);position:relative}.sp-bt i{position:absolute;left:0;top:0;bottom:0;background:var(--indigo)}.sp-bv{font:12px var(--pixel)}
.sp-fx{font-size:12.5px;line-height:1.8}
.sp-small{font-size:12px}.sp-tip{color:var(--kfg-7a4a00,#7a4a00)}
.sp-slot.ult,.sp-gs.ult{border-color:#e0405a;box-shadow:0 0 4px #e0405a88}.sp-slot .sp-u{position:absolute;right:2px;top:-1px;color:#ffb3c0;font:10px var(--pixel);text-shadow:0 0 2px #000}
.tag.ult{color:var(--kfg-b0263f,#b0263f)}
.sp-rid{font-style:italic;color:var(--kfg-4b2a8a,#4b2a8a)}.sp-ready{font-size:12px;color:var(--kfg-127a36,#127a36);font-weight:700}
.sp-find{display:inline-block;font:12.5px var(--pixel);color:var(--kfg-4b2a8a,#4b2a8a);background:var(--kbg-f3ecff,#f3ecff);border:1px solid #8a63c9;padding:3px 8px;margin:2px 0}.sp-find.no{color:var(--mute);background:var(--kbg-f1f1f7,#f1f1f7);border-color:var(--bev1)}/* D-346 */
.sp-gs.sp-unk,.sp-big.sp-unk{background:var(--el);color:#fff;text-shadow:0 0 3px #000;font:15px var(--pixel);cursor:pointer;place-items:center;display:grid}
.sp-big.sp-unk{font-size:30px;cursor:default}
.sp-hint{font-size:12.5px;color:var(--link);min-height:1.4em;margin:6px 0}
.sp-grid{display:flex;gap:6px;flex-wrap:wrap}
.sp-gs{position:relative;width:46px;height:46px;border:2px solid #5a5f88;background:#05050e;display:grid;place-items:center;cursor:pointer;padding:0}
.sp-gs .sp-ic{width:32px;height:32px}.sp-gs .sp-k{position:absolute;left:2px;top:-1px;font:10px var(--pixel);color:#ddd;text-shadow:0 0 2px #000;font-weight:400}
.sp-gs.in::after{content:"";position:absolute;right:2px;bottom:2px;width:7px;height:7px;background:var(--kbg-9ef0ff,#9ef0ff);border:1px solid #000}
.sp-gs.dim .sp-ic{filter:grayscale(1) brightness(.45)}.sp-gs.q{color:var(--kfg-7a7fa8,#7a7fa8);font:13px var(--pixel);cursor:default}.sp-gs.sel{outline:2px solid var(--kbd-9ef0ff,#9ef0ff);outline-offset:1px}.sp-gs.evo{border-color:#d9a521}
.sp-info{display:grid;grid-template-columns:68px minmax(0,1fr);gap:10px;align-items:start}.sp-info h4{margin:0;font:400 16px var(--pixel)}
.sp-big{width:68px;height:68px;border:2px solid var(--bev2);background:#05050e;display:grid;place-items:center}.sp-big .sp-ic{width:64px;height:64px}
/* SPELL-FAMILY (D-328, approved design/spell-family-preview-v1.html): the ring line, other families' spells greyed, the reason box */
.sp-fam{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:8px 0 2px;font-size:12.5px}
.sp-fam .rg{display:inline-flex;align-items:center;gap:2px}
.sp-fam .rf{width:22px;height:22px;display:grid;place-items:center;font:13px var(--pixel);border:1px solid var(--bev1);color:var(--mute);background:var(--pg)}
.sp-fam .rf.on{border-color:var(--bev2);color:var(--ink);background:var(--cy)}
.sp-fam .rf.me{border:2px solid var(--indigo-fg,var(--indigo));font-weight:700}
.sp-fam .rl{color:var(--mute);font-size:10px}
.sp-gs.fam{border-style:dashed;border-color:#8a8cab;background:#2a2a3a}
.sp-gs.fam .sp-ic{filter:grayscale(1) brightness(.5)}
.sp-gs.fam .sp-k{color:#fff;background:#5a5c7a;padding:0 2px;left:1px;top:1px;line-height:12px}
.tag.fam{color:var(--mute)}
.sp-bar{border:1px solid var(--bev1);border-left:4px solid var(--bev2);background:var(--pg);padding:6px 8px;margin:8px 0;display:grid;gap:2px;font-size:12.5px}
.sp-bar b{font:13px var(--pixel);font-weight:400;color:var(--ink)}.sp-bar span{color:var(--mute)}
.sp-acts .btn[disabled]{opacity:.5;cursor:not-allowed}
.sp-meta{display:flex;gap:4px;flex-wrap:wrap}
ul.sp-bl{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:12.5px}ul.sp-bl li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:6px;overflow-wrap:anywhere}ul.sp-bl .src{font:11px var(--pixel);color:var(--mute);padding-top:2px}
.sp-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
@media (max-width:420px){.sp-slot{width:40px;height:40px}.sp-slot .sp-ic{width:32px;height:32px}.sp-slot.evo{width:80px}.sp-slot.link{width:16px}.sp-slot.lock{width:26px}}
/* SPELL-ART (D-126, D-127): the effects layer over the battle strip (display only) */
.scene canvas.spfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;image-rendering:pixelated}

/* HORDE-1 H6 (approved horde-preview-v1 v5): area card mode and readouts, the 門 horde gate and perk board, the Jobs tab's home marks */
.hz-area{margin-top:10px}
.hz-lbl{font:12px var(--pixel);color:var(--mute);margin:8px 0 4px}
.hz-seg,.hz-row{display:flex;gap:6px;flex-wrap:wrap}
.hz-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px}
.hz-read{border:2px solid;padding:8px 10px;font-size:13px;min-width:0}
.hz-read b{font:15px var(--pixel);font-weight:400;display:block}
.hz-read.good{border-color:#6aa57a;background:var(--kbg-f2fbf4,#f2fbf4)}
.hz-read.meh{border-color:#d0a050;background:var(--kbg-fff8ea,#fff8ea)}
.hz-read.bad{border-color:#d08a98;background:var(--kbg-fff3f5,#fff3f5)}
.hz-read.pick{box-shadow:inset 0 0 0 2px var(--gold)}
.hz-big{font:22px var(--pixel);color:var(--indigo-fg,var(--indigo));font-variant-numeric:tabular-nums;margin-right:2px}
.hz-push{margin-top:10px;padding:8px 10px;background:var(--kbg-eef6ff,#eef6ff);border:1px dashed var(--bev2);font-size:13px}
.hz-note{margin:8px 0 0}
.hz-gatehead{margin:6px 0}
.hz-best{font:15px var(--pixel);color:var(--indigo-fg,var(--indigo))}
.hz-result{margin:8px 0;padding:8px 10px;border:2px solid #d0a050;background:var(--kbg-fff8ea,#fff8ea);font-size:13px}
.hz-result.now{border-color:#6aa57a;background:var(--kbg-f2fbf4,#f2fbf4)}
.hz-result b{font:15px var(--pixel);font-weight:400}
.hz-next{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0;padding:6px 8px;background:var(--kbg-eef6ff,#eef6ff);border:1px solid var(--kbd-9cc4e6,#9cc4e6);font-size:13px}
.hz-next b{font:14px var(--pixel);font-weight:400}
.hz-result .hz-next{margin:6px 0 0}
.hz-track{flex:1 1 140px;min-width:120px;height:10px;background:var(--kbg-dfe4f4,#dfe4f4);border:1px solid #6a74b8;position:relative}
.hz-track i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#4a6cff,#8fd0ff)}
.hz-perksum{margin:10px 0 4px;padding:6px 10px;background:var(--kbg-eef6ff,#eef6ff);border:1px dashed var(--bev2);font-size:12.5px}
.hz-perks{display:grid;gap:10px}
.hz-ptrack{display:grid;grid-template-columns:132px minmax(0,1fr);gap:8px;align-items:center}
.hz-ptrack .nm b{font:15px var(--pixel);font-weight:400;display:block}
.hz-ptrack .nm span{font-size:11px;color:var(--mute)}
.hz-nodes{display:flex;gap:4px;flex-wrap:wrap}
.hz-node{min-width:54px;padding:3px 6px;border:1px solid var(--bev2);background:var(--kbg-e9ebf7,#e9ebf7);font-size:11px;line-height:1.3;color:var(--mute)}
.hz-node.on{background:var(--kbg-fff4c2,#fff4c2);border-color:#d0a050;color:var(--ink)}
.hz-node .w{display:block;font:11px var(--pixel);color:var(--indigo-fg,var(--indigo))}
.hz-node.key{border-width:2px;border-color:#a5520a}
.hz-node.key.on{background:var(--kbg-ffe2c4,#ffe2c4)}
.hz-pick{display:flex;gap:4px;margin-top:3px}
.hz-pick button{font:700 10.5px var(--text);padding:2px 6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);cursor:pointer;min-height:24px}
.hz-pick button.on{background:var(--cy)}
.hz-pick button:disabled{cursor:not-allowed;opacity:.6}
.hz-mark{font:12px var(--pixel);white-space:nowrap}
.hz-mark.mH{color:var(--kfg-a5520a,#a5520a)}.hz-mark.mD{color:var(--kfg-2236a8,#2236a8)}.hz-mark.mB{color:var(--kfg-127a36,#127a36)}
.jcard .hz-mark{display:block;font-size:11px;line-height:1.2;margin-top:2px}
.hz-home{margin:4px 0 0;font-size:12px;color:var(--mute)}
.hz-legend{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:12px;margin:0 0 8px}
@media (max-width:620px){.hz-ptrack{grid-template-columns:1fr}}
/* HORDE-1 H5: Horde set marks and the character sheet's two numbers */
.hz-fam{font:13px var(--pixel);color:var(--kfg-a5520a,#a5520a)}
.hz-sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.hz-sheet .mute{grid-column:1/-1;margin:0}
.hz-num{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px 10px}
.hz-num b{display:block;font:22px var(--pixel);color:var(--indigo-fg,var(--indigo));font-weight:400}
.hz-num span{font-size:12px;color:var(--mute)}
/* HORDE-1 H6: the arena (src/hordeview.ts) */
/* HORDE-1 arena (hordeview.ts, D-128 layout A): replaces the VS row in a horde fight; hotbar and battle log stay outside it. */
.harena{position:relative;background:#000;color:#eaeaea;border-bottom:2px solid #333}
.harena[hidden]{display:none}
.harena .ha-head{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding:5px 8px 3px;font:12px var(--pixel);color:#c8cbf0;min-width:0}
.harena .ha-place{font:15px var(--pixel);font-weight:400;color:#ffe27a;min-width:0;overflow-wrap:anywhere}
.harena .ha-sp{flex:1}
.harena .ha-hpnum{color:#e8e8ff}
.harena .ha-hp{height:7px;background:#2a2d4e;border:1px solid #555a8a;margin:0 8px 6px}
.harena .ha-hp>b{display:block;height:100%;width:100%;background:linear-gradient(#6ee08a,#2b9e4b);transform-origin:left;transition:transform .4s steps(8)}
.harena .ha-stage{position:relative;max-width:520px;margin:0 auto}
.harena .ha-cv{display:block;width:100%;height:auto;aspect-ratio:1/1;image-rendering:pixelated}
.harena .ha-slain{position:absolute;left:8px;top:6px;font:26px/1 var(--pixel);color:#ffe27a;text-shadow:0 1px 0 #000,0 0 6px #000;pointer-events:none;font-variant-numeric:tabular-nums}
.harena .ha-slain small{display:block;font-size:12px;color:#c8cbf0;margin-top:2px}
.harena .ha-more{position:absolute;right:8px;bottom:16px;font:12px var(--pixel);color:#fff;background:#000a;padding:0 6px;pointer-events:none}
.harena .ha-more[hidden]{display:none}
.harena .ha-stream{position:absolute;left:8px;right:8px;bottom:6px;height:5px;background:#0008;border:1px solid #4b50a8;pointer-events:none}
.harena .ha-stream>b{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#ffe27a,#ff7a1a)}
@media (prefers-reduced-motion:reduce){.harena .ha-hp>b{transition:none}}
/* GOBLIN-1: the den's town scene over the Den Ledger (goblin hub v0.1, preview v8) */
.gh>h3{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.gh-t{font:15px var(--pixel);color:var(--ink);margin:0}
.gh-scene{position:relative;width:100%;overflow:hidden;background:#0c1a12;isolation:isolate;border-bottom:1px solid var(--bev2)}
.gh-plate{display:block;width:100%;height:auto;image-rendering:pixelated;min-height:120px}
.gh-bld{position:absolute;background-repeat:no-repeat;image-rendering:pixelated;border:0;padding:0;cursor:pointer;background-color:transparent}
.gh-bld.lock{opacity:.42}
.gh-bld:focus-visible,.gh-plq:focus-visible,.gh-led tr:focus-visible{outline:3px solid #946000;outline-offset:2px}
.gh-plq{position:absolute;transform:translateX(-50%);display:flex;align-items:center;gap:5px;font:11px var(--pixel);background:var(--iv);border:1px solid var(--bev2);padding:0 5px;white-space:nowrap;color:var(--ink);cursor:pointer;z-index:9000}
.gh-plq.sel{background:var(--cy);border-color:var(--ink-bd,var(--ink))}
.gh-plq .lv{background:var(--indigo);color:#fff;font:11px var(--pixel);padding:0 5px;line-height:1.5;font-weight:400}
.gh-plq.lock .lv{background:#5a5a6e}
.gh-fx,.gh-folk{position:absolute;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none}
.gh-folk{animation:gh-frames .6s steps(4) infinite}
.gh-walk{position:absolute;pointer-events:none;width:0;height:0}
@keyframes gh-frames{to{background-position-x:var(--endx)}}
@media (prefers-reduced-motion:reduce){.gh-folk{animation:none}}
.gh-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;padding:10px}
.gh-led{min-width:0;overflow-x:auto}
.gh-led table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.gh-led th{text-align:left;font-weight:700;border-bottom:1px solid var(--bev2);padding:3px 6px;white-space:nowrap}
.gh-led td{padding:3px 6px;border-bottom:1px dotted var(--bev1)}
.gh-led td.n{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.gh-led td.up{color:var(--up)}
.gh-led tr{cursor:pointer}.gh-led tr.sel td{background:var(--cy)}.gh-led tr.lock td{color:var(--mute)}
.gh-led .bar{height:10px;background:var(--kbg-dfe1f0,#dfe1f0);border:1px solid var(--bev2);position:relative;min-width:60px;overflow:hidden}
.gh-led .bar b{position:absolute;inset:0;background:var(--link-bg,var(--link));transform-origin:left;transform:scaleX(0)}
.gh-next{color:var(--up);font-size:11.5px;white-space:nowrap}
.gh-sel{margin:6px 0}
.gh-inv{display:grid;gap:6px;align-content:start;min-width:0}
.gh-h{font:15px var(--pixel)}
.gh-keep{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}.gh-keep input{width:9em;font:inherit;font-variant-numeric:tabular-nums;padding:2px 6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink)}
.gh-keepv{color:var(--kfg-7a5a00,#7a5a00)}
.gh-inv p{margin:0;font-size:12.5px}
.gh-fl{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--bev1);padding:3px 0;font-size:13px}
.gh-fl b{font-variant-numeric:tabular-nums;text-align:right}
.gh-fl b.up{color:var(--up)}
@media (max-width:720px){.gh-row{grid-template-columns:minmax(0,1fr)}.gh-led table{min-width:0;font-size:12.5px}.gh-led .bar{min-width:32px}.gh-led th,.gh-led td{padding:3px 4px;white-space:normal}.gh-next{display:block;white-space:normal}.gh-plq{flex-direction:column;gap:0;font-size:10px;padding:0 3px;line-height:1.25}.gh-plq .lv{font-size:10px;line-height:1.3}}
/* DUNGEON-1: the 迷宮 Dungeon mode and the floor strip (preview v3, D-142) */
.dg-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}/* D-344: six pages, three a row */
.dg-new{font:12px var(--pixel);color:var(--kfg-7a5a00,#7a5a00);background:var(--kbg-fff6d6,#fff6d6);border:1px solid #c98a12;padding:0 6px;justify-self:start}
.dg-new.none{color:var(--mute);background:transparent;border-color:var(--bev1)}
.ho-mark{display:inline-block;font:12.5px var(--pixel);color:var(--kfg-5a2d91,#5a2d91);background:var(--kbg-f3ecff,#f3ecff);border:1px solid #8a63c9;padding:3px 8px;margin-top:6px}
.dg-pg{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);padding:8px;display:grid;gap:4px;align-content:start;min-width:0}
.dg-pg.lock{background:var(--kbg-f1f1ea,#f1f1ea);color:var(--mute)}.dg-pg.in{border-color:var(--ink-bd,var(--ink));background:var(--cy)}.dg-pg.sel{outline:2px dashed var(--bev2);outline-offset:2px}
.dg-pg .nm{font:14px var(--pixel);line-height:1.2}.dg-pg .jp,.dg-pg .mute{font-size:12px;color:var(--mute)}.dg-pg .ct{font-size:13px;font-variant-numeric:tabular-nums}
.dg-pg .bar{height:8px;border:1px solid var(--bev2);background:var(--kbg-e6e6f4,#e6e6f4);position:relative;overflow:hidden}.dg-pg .bar>i{position:absolute;inset:0;background:#2d8f8c;transform-origin:left}
.dg-pg .btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dg-tag{font:11px var(--pixel);border:1px solid var(--bev2);padding:0 5px}.dg-tag.run{border-color:#a5520a;color:var(--kfg-a5520a,#a5520a)}.dg-tag.done{border-color:#c98a12;color:var(--kfg-7a5a00,#7a5a00)}
.dg-opt{display:block;font-size:13px;margin:8px 0}
.dg-fail{border:2px solid #b3261e;background:var(--kbg-fff0ee,#fff0ee);padding:6px 8px;font-size:13px;margin:6px 0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dg-h{font:14px var(--pixel);margin:10px 0 4px}
.dg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.dg-cd{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:4px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center;font-size:11.5px}
.dg-cd .sp{background:#1b1f3a;border:1px solid #363c5c;padding:2px}.dg-cd .n{font:11.5px var(--pixel);line-height:1.15;overflow-wrap:anywhere}.dg-cd .s{color:#c98a12}.dg-cd .c{color:var(--mute);font-variant-numeric:tabular-nums}.dg-cd.five{border-color:#c98a12;background:var(--kbg-fffbe8,#fffbe8)}
.dg-strip{background:#14182e;color:#e4e6ff;border-bottom:2px solid var(--bev2)}
.dg-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline;padding:5px 8px}.dg-head b{font:14px var(--pixel);color:#ffd23f;font-weight:400}.dg-head span{font-size:12px;color:#c6c9ff}
.dg-floors{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px;padding:0 8px 6px}
.dg-fl{border:1px solid #59618c;background:#262b44;color:#a3abd6;padding:2px;text-align:center;font:10.5px var(--pixel);min-width:0}.dg-fl i{display:block;font-style:normal;font-size:13px;line-height:1.1}
.dg-fl.won{background:#1f4a32;border-color:#4fbf7a;color:#c9f5d8}.dg-fl.now{background:#3b3360;border:2px solid #ffd23f;color:#fff}.dg-fl.boss{background:#3a2a14;border-color:#d9a03a;color:#ffe2a8}.dg-fl.boss.now{border-color:#ffd23f}.dg-fl.wait{border-style:dashed}
@media (max-width:720px){.dg-pages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.dg-pages{grid-template-columns:minmax(0,1fr)}}
/* GLYPH-1 (glyphs v0.1, preview design/glyph-preview-v1.html): crests (code-drawn until the kamon art), the card's socket, the list, the book, the hotbar */
.gl-art{--sz:32px;width:var(--sz);height:var(--sz);display:inline-block;flex:0 0 auto;vertical-align:middle;background:url(art/spells/glyph-crests.png) no-repeat;background-size:calc(var(--sz)*8) calc(var(--sz)*8);background-position:calc(var(--sz)*var(--cx)*-1) calc(var(--sz)*var(--cy)*-1);image-rendering:pixelated}
.gl-art.s{--sz:16px}.gl-art.b{--sz:48px}.gl-art.dim{opacity:.45}.gl-art.sil{filter:brightness(0);opacity:.3}
.gl-pips{display:inline-flex;gap:2px;vertical-align:middle}.gl-pips i{width:6px;height:6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff)}.gl-pips i.on{background:#d9a521;border-color:#8a6410}
.gl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;background:var(--kbg-fff,#fff);border:1px solid var(--bev1);padding:6px 8px;margin:2px 0}
.gl-row.sock{cursor:pointer}.gl-row.sock:hover{background:var(--cy)}.gl-row.sock:focus-visible,.gl-opt:focus-visible,.gl-cb:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.gl-row.rest{background:var(--kbg-f4f4f8,#f4f4f8);color:var(--mute)}.gl-row .gl-tag{font-size:11.5px;color:var(--mute)}
.gl-ln{grid-column:2/4;font-size:12.5px;min-width:0}.gl-ln i{font-style:normal;color:var(--mute)}
.gl-pick{display:grid;gap:4px;margin-top:4px}
.gl-opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;background:var(--kbg-fff,#fff);border:1px solid var(--bev1);padding:6px 8px;cursor:pointer}
.gl-opt .gl-ln{grid-column:2}.gl-opt:hover{background:var(--cy)}.gl-opt.cur{border-color:var(--indigo-fg,var(--indigo));box-shadow:inset 0 0 0 1px var(--indigo-fg,var(--indigo))}
/* D-239: the set's cast order in the summary, and a glyph's effect in every set its spell sits in */
.sp-ord{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px}.sp-ord .sp-st{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:1px 6px;white-space:nowrap}.sp-ord .sp-st b{font:12px var(--pixel);font-weight:400}
.gl-opt .gl-sets{grid-column:2;display:flex;flex-wrap:wrap;gap:2px 10px;font:12px var(--pixel)}.gl-opt .gl-sets.eq{color:var(--mute)}
.gl-opt.off{cursor:default;background:var(--kbg-f4f4f8,#f4f4f8);color:var(--mute)}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.gl-cb{display:grid;justify-items:center;gap:2px;background:var(--kbg-fff,#fff);border:1px solid var(--bev1);padding:6px 2px;cursor:pointer;font:inherit;color:inherit;min-width:0}
.gl-cb span:not(.gl-art){font-size:10.5px;line-height:1.2;text-align:center;overflow-wrap:anywhere}.gl-cb:hover{background:var(--cy)}.gl-cb.sel{border-color:var(--indigo-fg,var(--indigo));box-shadow:inset 0 0 0 1px var(--indigo-fg,var(--indigo))}
.gl-big{width:68px;height:68px;display:grid;place-items:center}
.sp-slot .gl-pip{position:absolute;right:-6px;top:-6px;pointer-events:none}
.sp-slot.wait .sp-t{color:#cfe89a}
/* the waiting pulse (glyph-fx row 3) at 3 screen px per art px, around the slot */
.gl-pulse{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;pointer-events:none;background:url(art/spells/glyph-fx.png) no-repeat;background-size:432px 432px;background-position:calc(var(--f)*-72px) -144px;image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){.gl-pulse{background-position:-144px -144px}}
.gl-offer{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:4px;row-gap:2px;align-items:center;min-width:140px;flex:1 1 140px;align-self:center;font:10px var(--pixel);color:#e6d3a0}
/* the Offering wisp (glyph-fx row 1) at 1.5 screen px per art px */
.gl-wisp{grid-row:1/3;width:36px;height:36px;background:url(art/spells/glyph-fx.png) no-repeat;background-size:216px 216px;background-position:calc(var(--f)*-36px) 0;image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){.gl-wisp{background-position:0 0}}
.gl-ob{height:7px;border:1px solid #9a6f0e;background:#1a1405;position:relative}.gl-ob i{position:absolute;inset:0 auto 0 0;background:#d9a521}

/* PACE-2 display A, sealed plates (ahead-preview-v1, D-157): a locked ladder row stays in place, dark, with ??? and its condition. */
.seal{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:7px 10px;color:#c6c9ff;background:#14163f radial-gradient(#2a2e6e 1px,transparent 1px) 0 0/4px 4px;border:2px solid;border-color:#3a3f8f #0b0c26 #0b0c26 #3a3f8f;font-size:12px;line-height:1.3}
.seal b{font:15px var(--pixel);font-weight:400;letter-spacing:2px;color:#e4e6ff}.seal small{font-size:11.5px;color:#a9aee6}
.ahead{display:flex;gap:6px 8px;flex-wrap:wrap;align-items:center;margin-top:6px;font-size:12px}
.ahead .lbl{font:13px var(--pixel)}.ahead .mute{font-size:11.5px}
/* AHEAD-INK: the strip sits on the black battle box in every skin, so its text takes the box's own inks (sealed-plate lavender, ticker grey),
   not page tokens (--indigo and .mute read 1.5–3:1 there in Ivory, Win98, Forum and MSN). `.battle` keeps these in skin-tokens' KEEP list. */
.battle .ahead .lbl{color:#c6c9ff}.battle .ahead .mute{color:#9a9ab0}
.ahead .chip{display:inline-flex;gap:6px;align-items:center;background:#14163f;color:#e4e6ff;font:12px var(--pixel);padding:1px 8px;border:1px solid #3a3f8f}
.ahead .chip i{font:11px var(--text);font-style:normal;color:#a9aee6}
.btn.sealed-btn,.ftool.sealed-tool,.fchip.sealed-tool{font-size:0!important;background:#14163f!important;border-color:#3a3f8f #0b0c26 #0b0c26 #3a3f8f!important;color:#a9aee6!important;cursor:not-allowed}
.btn.sealed-btn::after,.ftool.sealed-tool::after,.fchip.sealed-tool::after{content:"??? · " attr(data-cond);font:12px var(--pixel);letter-spacing:.5px;white-space:nowrap}
.ftool.sealed-tool>*{display:none}
.board .n.sealed{background:#14163f;border-color:#3a3f8f;color:#a9aee6}.board .n.sealed span{color:#a9aee6}
.rb-stamp{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.rb-stamp .stamp{display:inline-block;font:14px var(--pixel);padding:2px 8px;border:2px solid currentColor;background:var(--kbg-fff,#fff);color:var(--indigo-fg,var(--indigo))}
/* D-331: one neutral style whether or not the ladder moves; the conditions as chips (met green, open brown, as the job unlock list) */
.rb-ladder{display:grid;gap:4px}.rb-ladder .mute{color:var(--mute);font-size:12px}
.ladder-conds{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:12px}.ladder-conds .h{color:var(--mute)}
.ladder-conds .cond{border:1px solid currentColor;background:var(--kbg-fff,#fff);padding:0 6px;white-space:nowrap}
.ladder-conds .cond.met{color:var(--kfg-1d6b3a,#1d6b3a)}.ladder-conds .cond.unmet{color:var(--kfg-6b4a00,#6b4a00)}.ladder-conds .cond i{font-style:normal;color:var(--mute)}
.jsheet .jlife{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;border-top:1px dashed var(--bev2);padding-top:8px;font-size:12.5px}
.jsheet .jlife>div{min-width:0;display:grid;gap:3px}.jsheet .jlife .keep{color:var(--mute);font-size:11.5px}
.jsheet .jlife .rung{display:inline-block;width:auto;margin-top:0;cursor:default;flex:none;font:12px var(--pixel);color:var(--indigo-fg,var(--indigo));border:1px solid currentColor;padding:0 5px;background:var(--kbg-fff,#fff)}
.jsheet .btn small{display:block;font-weight:400;font-size:10.5px;color:var(--mute)}.jsheet .btn:disabled small{color:inherit}
.gh-invest{display:grid;gap:6px;margin:6px 0}
.hotbar-seal{margin:6px 0}
.dg-pg.sealed{background:transparent;border:0;padding:0}

/* LOADOUT-1 direction B, the role matrix (loadouts-preview-v1, D-157). */
#kits-panel .mxwrap{overflow-x:auto}
table.kmx{border-collapse:collapse;width:100%;font-size:12.5px;min-width:420px}
table.kmx th,table.kmx td{border:1px solid var(--bev1);padding:4px 6px;text-align:center;vertical-align:middle}
table.kmx th{font:400 12px var(--pixel);background:var(--cy)}
table.kmx td.krole{text-align:left}table.kmx td.krole small{display:block;font-size:11px;color:var(--mute)}
table.kmx .kr{font:13px var(--pixel);font-weight:400}.kr.farm{color:var(--kfg-127a36,#127a36)}.kr.boss{color:var(--kfg-a3244a,#a3244a)}.kr.horde{color:var(--kfg-c4431c,#c4431c)}.kr.titan{color:var(--kfg-946000,#946000)}
table.kmx tr.kdps td{background:var(--kbg-f4f5ff,#f4f5ff)}table.kmx .kdv b{font:14px var(--pixel);font-weight:400;font-variant-numeric:tabular-nums}.kr.dps{color:var(--indigo-fg,var(--indigo))}
.ksum{margin:2px 0}
/* DELETE-FIX: the name typed in the delete dialog */
#confirm-top .del-name{width:100%;font:15px var(--text);padding:6px 8px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink)}
/* D-267: 道具 Items to use (Hourglasses) at the top of Equipment's 持ち物 box */
.use-strip{border:1px solid #c9a14a;background:var(--kbg-fff8e6,#fff8e6);padding:6px 8px;display:grid;gap:6px;margin:0 0 8px}
.use-strip .hd{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12px}.use-strip .hd b{font:13px var(--pixel);font-weight:400}
.use-strip .glasses{display:flex;flex-wrap:wrap;gap:6px}
.use-strip .gl{display:flex;align-items:center;gap:8px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:4px 8px}
.use-strip .gl .n b{font:13px var(--pixel);font-weight:400}
/* D-265: How ≈ DPS is worked out, closed under the loadout summary's bars */
.sp-fx{border:1px solid var(--bev2);background:var(--kbg-fff,#fff)}
.sp-fx>summary{cursor:pointer;padding:3px 8px;font-size:12px;color:var(--indigo-fg,var(--indigo))}
.sp-fx .in{padding:2px 8px 8px;display:grid;gap:6px}
.sp-fx .eq{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;font-size:12px}
.sp-fx .eq .k{font:12px var(--pixel);opacity:.7}.sp-fx .eq .v{font:12px var(--pixel);text-align:right;white-space:nowrap}
.sp-fx .eq .ln{grid-column:1/-1;border-top:1px solid var(--bev2)}
/* D-265: the shared Forge dialog (You pay / You get, the Hone level picker) and the Temper essence picker */
.modal .box.fdlg{max-width:540px;max-height:calc(100vh - 32px);overflow:auto}
#confirm-top{margin:0 0 8px}
.hstep{display:grid;gap:6px}.hrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hval{min-width:3em;text-align:center;border:1px solid var(--bev2);padding:3px 6px;font:16px var(--pixel)}
.fget{display:grid;gap:5px;margin:10px 0 4px}
.fglab{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--mute)}
.fkind{font-size:11px;letter-spacing:.02em;text-transform:none;border:1px solid currentColor;padding:0 6px}
.fkind.exact{color:var(--up)}.fkind.range{color:var(--kfg-7a4a00,#7a4a00)}.fkind.pick{color:var(--indigo-fg,var(--indigo))}
.ftw{overflow-x:auto;max-width:100%}
.fgt{border-collapse:collapse;width:100%;font-size:12.5px}
.fgt th,.fgt td{border-bottom:1px solid var(--bev1);padding:3px 6px;text-align:left}
.fgt th{font-weight:600;color:var(--mute);font-size:11.5px}
.fgt td.n,.fgt th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fgt tr.off td{color:var(--mute)}
.fgt .up,.fworn .up,.fpw.up{color:var(--up)}.fgt .dn,.fworn .dn,.fpw.dn{color:var(--dn)}
.fgl{font-size:12.5px}.fgl.fgh{font-weight:600;margin-top:4px}
.fworn{font-size:12.5px;padding:4px 6px;border:1px solid var(--bev1);background:var(--kbg-f4f5ff,#f4f5ff)}
.fpw{font-size:11.5px;margin-left:8px;font-weight:600}
.ess.etiles{grid-template-columns:repeat(auto-fill,minmax(7.5em,1fr))}
.ess .etile{align-items:flex-start;text-align:left;padding:6px 7px;border:1px solid var(--bev1);background:var(--kbg-fff,#fff);color:var(--ink);cursor:pointer}
.ess .etile .held{color:var(--mute);font-size:11px}.ess .etile .ls{font-size:11.5px;line-height:1.3}
.ess .etile.on{border-color:var(--indigo-fg,var(--indigo));box-shadow:inset 0 0 0 1px var(--indigo-fg,var(--indigo))}
.ess .etile.nofit .ls{color:var(--dn)}
table.kmx input[type=radio]{width:18px;height:18px;accent-color:var(--indigo)}
table.kmx .kname{font:13px var(--pixel);width:100%;min-width:70px;border:1px solid transparent;background:transparent;text-align:center;padding:1px 2px}
table.kmx .kname:hover{border-color:var(--bev1)}table.kmx .kname:focus{border-color:var(--bev2);background:var(--kbg-fff,#fff)}
table.kmx .kseal{background:#14163f;color:#a9aee6;font:12px var(--pixel)}table.kmx th.kseal .btn{font-size:11.5px}
.ktabs{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0 4px}
.kbody{display:grid;gap:6px}.kgear{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.kgear .gi{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:4px 6px;font-size:11.5px;min-width:0}.kgear .gi b{display:block;font:12px var(--pixel);font-weight:400;color:var(--mute)}
.kgear .gi .nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kgear .gi.rare .nm{color:var(--rare)}.kgear .gi.magic .nm{color:var(--magic)}
.ksp{font-size:12px}.seal.kslot{margin-top:6px}
@media (max-width:720px){.kgear{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* LOADOUT-1 follow-up: names are the player's, so the field looks editable; readouts under the chosen loadout. */
table.kmx .kname-w{display:flex;align-items:center;gap:3px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:1px 4px;cursor:text}
table.kmx .kname-w:focus-within{outline:2px solid #946000;outline-offset:1px}
table.kmx .kpen{font-size:11px;color:var(--mute)}
table.kmx .kname-w .kname{border:0;background:transparent;text-align:left;min-width:60px}
.kread{font-size:12.5px;background:var(--kbg-fff,#fff);border-left:3px solid var(--bev2);padding:3px 8px}
/* FORGE-5 (D-165, direction D): rows with their own Hone/Repair/Salvage, ticked rows in the sticky bar, Forge Potential on every row */
.fhead .pad{gap:6px}
.fsum{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:12.5px;color:var(--mute)}
.fsum b{font:15px var(--pixel);font-weight:400;color:var(--ink);margin-right:4px}
.fallmats summary{cursor:pointer;font-size:12.5px;color:var(--link)}
.fallmats .mats{margin-top:6px}
.fbarwrap{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:var(--indigo);color:#eef0ff;padding:8px 10px;display:grid;gap:6px;margin:0 0 12px;box-shadow:0 2px 0 var(--bev2)}
.fbar{display:grid;gap:6px}
.fb-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.fb-row>b{font:15px var(--pixel);font-weight:400;color:#fff;margin-right:4px}
.fb-note{font-size:12px;color:#ffe08a}
.fb-hint{font-size:13px}
.fbarwrap .result{margin:0;padding:4px 8px;background:var(--kbg-e8f7ee,#e8f7ee);color:var(--kfg-0b5a2a,#0b5a2a);border-color:#127a36;font-size:12.5px}
.fbarwrap .btn:disabled{background:#2c318a;color:#d0d3f7;border:1px dashed #8c93ff}
.fb-offer{display:grid;gap:6px}.fb-offer>b{font:15px var(--pixel);font-weight:400;color:#fff}
.fb-offer>p{margin:0;font-size:12.5px;color:#e3e5ff}.fb-offer .mute{color:#c9ccf5}.fb-offer .opts{margin-top:0}
.fb-offer table{background:var(--kbg-fff,#fff);color:var(--ink)}.fb-offer .btns{margin-top:0}
.flist{display:grid;gap:4px;padding:6px 8px 8px;container-type:inline-size}
.fgh{font:13px var(--pixel);color:var(--mute);padding:6px 2px 0}
.frow{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:6px;align-items:center;background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:5px 6px;min-width:0}
.frow.sel{background:var(--cy)}.frow.open{outline:2px solid var(--indigo-fg,var(--indigo));outline-offset:-2px}
.frow input{margin:0;width:18px;height:18px;accent-color:var(--indigo)}
.frow .tile{padding:3px}
.frow .tx{min-width:0;display:grid;line-height:1.3}
.frow .nm{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow small{font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow small .tag{margin:0 4px 0 0}
.tag.home{color:var(--rare)}
.fpl{display:flex;align-items:center;gap:5px;min-width:0;font-size:11px;line-height:1.3;color:var(--mute)}
.fpk{font:700 9.5px var(--text);letter-spacing:.04em}
.fpb{display:block;flex:1 1 auto;max-width:96px;height:7px;background:var(--kbg-e4e6f0,#e4e6f0);border:1px solid var(--bev2)}
.fpb i{display:block;height:100%;background:#2f8a4f}
.fpb.big{max-width:none;height:10px}
.fpl b{font:12px var(--pixel);font-weight:400;color:var(--ink);white-space:nowrap}
.fpl.fin b{color:var(--dn)}
.daff{display:none;font-size:11.5px;color:var(--mute);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbtns{display:flex;gap:3px}
.ib{width:42px;min-height:42px;display:grid;place-items:center;align-content:center;font:10px/1.15 var(--text);background:linear-gradient(var(--kbg-fff,#fff),var(--kbg-dfe3f5,#dfe3f5));border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);cursor:pointer;color:var(--ink);padding:2px 0}
.ib b{font:15px/1.1 var(--pixel);font-weight:400}
.ib small{font-size:10px;color:var(--mute);white-space:nowrap}
.ib.warn b{color:var(--dn)}
.ib.on{background:var(--indigo);color:#fff}.ib.on small{color:#d9dcff}
.ib:hover:not(:disabled){background:var(--cy)}.ib.on:hover:not(:disabled){background:#2c318a}
.ib:disabled{background:var(--kbg-eceef5,#eceef5);color:var(--kfg-6e6e8c,#6e6e8c);border:1px dashed #8a8aa6;cursor:not-allowed}.ib:disabled b{color:var(--kfg-6e6e8c,#6e6e8c)}
.ib:focus-visible,.fchip:focus-visible{outline:3px solid var(--rare);outline-offset:1px}
.dexp{background:var(--kbg-fff,#fff);border:2px solid var(--indigo-fg,var(--indigo));border-top:0;margin:-4px 0 4px;padding:8px;display:grid;gap:8px;min-width:0}
.dexp.struck{animation:fstruck .6s ease-out}
@keyframes fstruck{from{background:var(--kbg-fff3cf,#fff3cf)}to{background:var(--kbg-fff,#fff)}}
@media (prefers-reduced-motion:reduce){.dexp.struck{animation:none}}
.fph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;padding:6px 8px;background:var(--iv);border:1px solid var(--bev1)}
.fph .fpnote{grid-column:1/-1;margin:0;padding:0;background:none;border:0;font-size:11.5px;color:var(--mute)}
.fpc{display:grid;gap:3px;min-width:0}
.fpr{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--mute)}
.fpr b{font:13px var(--pixel);font-weight:400;color:var(--ink)}
.fph .pips{display:flex;gap:3px}.fph .pips i{width:12px;height:12px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff)}.fph .pips i.on{background:var(--rare-bg,var(--rare))}
.ftabs{display:flex;flex-wrap:wrap;gap:4px}
.fchip{font:12px var(--text);padding:4px 9px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);cursor:pointer;min-height:34px;color:var(--ink)}
.fchip b{font:14px var(--pixel);font-weight:400}
.fchip.on{background:var(--indigo);color:#fff}
.fchip.locked{border-style:dashed;color:var(--mute)}
.fchip:disabled{border-style:dashed;color:var(--kfg-6e6e8c,#6e6e8c);background:var(--kbg-f1f1f6,#f1f1f6);cursor:not-allowed}
.fchip small{font-size:10.5px}
.fpanel{display:grid;gap:6px;min-width:0}.fpanel>p{margin:0}.fpanel>.btns{margin-top:0}
.fafh{font:13px var(--pixel);color:var(--mute)}
.fmore{justify-self:start;margin-top:4px}
.fsvc>summary{padding:8px 10px;cursor:pointer;font-size:12.5px;background:var(--cy);border-bottom:1px solid var(--bev2)}
.fsvc>summary b{font:13px var(--pixel);font-weight:400}
.fsvcin{display:grid;gap:10px;padding:10px}
.heirhint{margin:0;padding-top:0}
#tower-try{margin-left:6px}
@container (min-width:760px){.frow{grid-template-columns:auto auto minmax(0,1fr) minmax(0,1.3fr) auto}.daff{display:block}.ib{width:56px}}
@container (max-width:430px){.frow .tile{display:none}.frow{grid-template-columns:auto minmax(0,1fr) auto}.ib{width:38px}}
/* I18N-1 (D-166, D-168): Traditional Chinese needs TC fonts and lang=zh-Hant together, or CJK renders with Japanese glyph
   forms. Headlines: Fusion Pixel 12px Proportional TC (OFL-1.1, fonts/OFL.txt; unmodified, so it keeps its reserved name),
   fetched only when Chinese is on because nothing else names it. Body: system TC fonts. */
@font-face{font-family:'Fusion Pixel 12px Proportional TC';src:url(fonts/fusion-pixel-12px-proportional-tc.woff2) format('woff2');font-display:swap}
html[lang="zh-Hant"]{--text:'Microsoft JhengHei','PingFang TC','Noto Sans TC',system-ui,sans-serif;--pixel:'Fusion Pixel 12px Proportional TC','Microsoft JhengHei','PingFang TC',sans-serif}
/* A pixel font has no bold face: faked bold smears its strokes. JhengHei/PingFang have real bold, so body emphasis stays. */
html[lang="zh-Hant"] body{font-synthesis-weight:none}
.lang-pick select{font:inherit;min-width:12em}
/* The slot-2 panel says it opens Hogwash (Jeff 2026-10-10: the timetable is changeable in any life). */
.hw-s2 .hw-tr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.hw-s2 .hw-go{font:12px var(--pixel);color:var(--kfg-5a2a82,#5a2a82);border:1px solid #5a2a82;background:var(--kbg-fff,#fff);padding:0 6px;white-space:nowrap}.hw-s2:hover .hw-go{background:#5a2a82;color:#fff}

/* HOME-1 (D-174 layout A, D-175 profile; home-preview-v2): portraits at whole multiples of the 48-px art, the hero card, item
   frames by rarity, the three-line log, Your bests, the phone's pinned top bar, the portrait window and the 冒険者 profile. */
.pf{display:inline-grid;place-items:center;flex:none;padding:0;background:var(--kbg-ece0c4,#ece0c4);border:2px solid var(--ink-bd,var(--ink));box-shadow:inset 0 0 0 2px var(--ksh-c9b48a,#c9b48a);overflow:hidden;vertical-align:middle}
.pf.s48{width:52px;height:52px}.pf.s96{width:100px;height:100px}.pf.s144{width:148px;height:148px}
.pf img,.pf canvas{display:block;image-rendering:pixelated}
.pf.job{background:linear-gradient(var(--kbg-f3ead4,#f3ead4),var(--kbg-e4d5b2,#e4d5b2))}/* D-178: parchment, so blue clothing stands out */
.pfb{cursor:pointer}.pfb:hover,.pfb:focus-visible{outline:3px solid #f2c94c;outline-offset:1px}
.pface{display:inline-grid;justify-items:center;align-items:start;width:30px;height:30px;flex:none;overflow:hidden;background:var(--kbg-ece0c4,#ece0c4) no-repeat -9px -4px/48px 48px;border:1px solid var(--ink-bd,var(--ink));image-rendering:pixelated}
.pface canvas{margin-top:3px}
.who-btn .pface{width:26px;height:26px;background-position:-11px -5px}
.hero .who{min-width:0}
.hero .nm{font:20px/1.1 var(--pixel);overflow-wrap:anywhere}
.ttl{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:12px var(--pixel);color:var(--kfg-6b4100,#6b4100);background:var(--kbg-fff1b8,#fff1b8);border:1px solid #c9a24a;padding:0 6px;margin:3px 0 2px;cursor:pointer;text-align:left}
.ttl:hover{background:#ffe48a}.ttl.none{color:var(--mute);background:var(--kbg-f3f4fb,#f3f4fb);border-color:var(--kbd-d4d6e8,#d4d6e8)}
.side .chips3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px 10px 0}
.side .stat6{display:grid;gap:3px;padding:8px 10px 0}
.stat6>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.stat6 .c{display:flex;justify-content:space-between;align-items:baseline;gap:6px;min-width:0;padding:1px 7px;background:var(--kbg-f3f4fb,#f3f4fb);border:1px solid var(--kbd-d4d6e8,#d4d6e8);font-size:11px;color:var(--mute);line-height:1.6}
.stat6 .c b{font:12.5px var(--pixel);color:var(--ink);font-weight:400;white-space:nowrap}
/* DEX-1 (D-333): the DEX and Dodge row, tinted so a returning player finds it */
.stat6 .c.dx{background:var(--kbg-e3f4f2,#e3f4f2);border-color:var(--kbd-9fd3cd,#9fd3cd)}
.chips3>div{background:var(--kbg-f3f4fb,#f3f4fb);border:1px solid var(--kbd-d4d6e8,#d4d6e8);padding:2px 6px;font-size:11px;color:var(--mute);min-width:0}
.chips3 b{display:block;font:12px/1.3 var(--pixel);color:var(--ink);font-weight:400;overflow-wrap:anywhere}
.side .links{display:flex;flex-direction:column;gap:6px;padding-top:8px}.side .links .btn{display:block;width:100%;text-align:left}
.ic{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;background:var(--kbg-f3f4fb,#f3f4fb);border:2px solid var(--kbd-b8bcd8,#b8bcd8);vertical-align:middle}
.ic.magic{border-color:var(--magic);background:var(--kbg-eef1ff,#eef1ff)}.ic.rare{border-color:var(--rare);background:var(--kbg-fff4e6,#fff4e6)}
.ic.heir{border-color:var(--heir);background:radial-gradient(var(--kbg-f6eeff,#f6eeff),var(--kbg-dcc6ff,#dcc6ff));box-shadow:0 0 0 2px var(--ksh-efe2ff,#efe2ff)}/* UNIQ-1 (D-211): violet, so gold means Legend */
.ic.card{border-color:#7a4a00;background:var(--kbg-fff8d8,#fff8d8)}
.ic .hn{position:absolute;right:-4px;bottom:-5px;font:10px/12px var(--pixel);background:var(--indigo);color:#fff;padding:0 3px}
.ic.big{width:84px;height:84px}
.eq td:first-child{width:56px}
.battle .log{height:5.6em}
.battle.logfull .log{height:236px}
.logmore{display:block;width:100%;border:0;border-top:1px solid #2b2e44;background:#151827;color:#a9b8ff;font:11.5px var(--pixel);padding:3px 12px;text-align:left;cursor:pointer}
.logmore:hover{color:#fff}
.adv .hubcol{grid-area:hub}
.adv{grid-template-rows:auto auto auto auto auto auto 1fr auto;grid-template-areas:"side away" "side battle" "side trace" "side slot2" "side slot2t" "side slot2p" "side find" "hub ."}
@media (min-width:1240px){.adv{grid-template-columns:260px minmax(0,1fr) 210px;grid-template-rows:auto auto auto auto auto auto 1fr;grid-template-areas:"side away hub" "side battle hub" "side trace hub" "side slot2 hub" "side slot2t hub" "side slot2p hub" "side find hub"}}
@media (max-width:900px){.adv{grid-template-rows:none;grid-template-areas:"away" "battle" "trace" "side" "slot2" "slot2t" "slot2p" "find" "hub"}.battle.logfull .log{height:200px}}
.bests{display:grid;grid-template-columns:1fr 1fr}
.bests>div{padding:6px 10px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0);font-size:11.5px;color:var(--mute);min-width:0}
.bests>div:nth-child(odd){border-right:1px solid var(--kbd-e1e3f0,#e1e3f0)}.bests>div:nth-child(-n+2){border-top:0}
.bests b{display:block;font:16px var(--pixel);color:var(--ink);font-weight:400}
.vp{display:block;padding:6px 10px 8px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0);font-size:12.5px;color:var(--link)}
.ptop{display:none}
@media (max-width:720px){body:has(.ptop:not([hidden])) #top-gold{display:none!important}}/* the pinned bar carries the gold on the phone home */
@media (max-width:720px){
  .ptop:not([hidden]){display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:4;margin:-12px -10px 10px;padding:6px 10px;background:var(--pg);border-bottom:3px double var(--bev2)}
  .ptop .grow{flex:1;min-width:0}.ptop .nm{font:15px/1.1 var(--pixel)}.ptop .bar{margin:3px 0;height:6px}
  .ptop .sub{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ptop .gold{display:inline-flex;align-items:center;gap:3px;font:13px var(--pixel)}
}
.lvl{font:12px var(--pixel);background:var(--indigo);color:var(--iv-fg,var(--iv));padding:0 5px}
/* portrait window and showcase picker */
.modal .box.pmod{width:min(720px,calc(100vw - 24px));max-width:720px;max-height:calc(100vh - 32px);overflow:auto}
/* SHARE-1 (D-254): the share card dialog; the card (1080 × 1350) shows shrunk, and a long press on a phone saves it too. */
.pmod.pshare{width:min(460px,calc(100vw - 24px))}
.pshare .shstage{display:grid;place-items:center;min-height:120px;padding:12px 12px 0;font:13px var(--pixel);color:var(--mute)}
.pshare .shimg{display:block;width:min(100%,380px);height:auto;border:1px solid var(--bev2);box-shadow:3px 3px 0 var(--bev1)}
.pshare .shmsg:empty{display:none}
.pmod .ptabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--bev2)}
.pmod .ptabs button{font:13px var(--pixel);border:1px solid var(--bev2);border-bottom:0;background:var(--kbg-e9ebf6,#e9ebf6);padding:4px 12px;cursor:pointer;color:var(--ink);margin-bottom:-1px}
.pmod .ptabs button.on{background:var(--iv)}
.pmod .pgrid{display:flex;flex-wrap:wrap;gap:8px;padding:10px}
.pmod .pgrid button{padding:0;border:0;background:none;cursor:pointer}
.pmod .pgh{flex-basis:100%;font:12px var(--pixel);color:var(--mute);margin:4px 0 -2px;border-top:1px dashed var(--kbd-d4d6e8,#d4d6e8);padding-top:4px}
.pmod .pgrid button.sel .pf{outline:3px solid #f2c94c;outline-offset:1px}
.pmod .pgrid button.lock{cursor:default}.pmod .pgrid button.lock .pf img,.pmod .pgrid button.lock .pf canvas{filter:brightness(0);opacity:.35}/* D-178: earned busts dark until earned */
.pmod .pfoot{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;padding:10px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0)}
.pmod .pfoot>div{flex:1;min-width:200px}
.pmod .sw{display:flex;gap:4px;align-items:center;font-size:12px;margin:4px 0}
.pmod .sw span{width:64px;color:var(--mute)}
.pmod .sw button{width:22px;height:22px;border:1px solid var(--ink-bd,var(--ink));padding:0;cursor:pointer}
.pmod .sw button.on{outline:2px solid #f2c94c;outline-offset:1px}
.pmod .drop{display:block;margin:10px;padding:10px;border:2px dashed var(--bev2);background:var(--kbg-fff,#fff);text-align:center;font-size:13px;cursor:pointer}
.pmod .drop input{display:block;margin:6px auto}
.pmod .upctl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:0 10px 8px;font-size:12.5px}
.pmod .upctl label{display:inline-flex;align-items:center;gap:6px}
.pmod .sizes{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:0 10px 10px}
/* GM-GIF (D-255): the GM's animated portrait as it is (smooth when shrunk; a small pixel GIF blown up gets pixelated inline) */
.pf img.gmgif,.pface img.gmgif{object-fit:cover;image-rendering:auto}
.pface.gifface img.gmgif{display:block;width:100%;height:100%}
.pmod .gifbox{margin:10px 10px 0;padding:8px 10px;border:2px solid var(--bev2);background:var(--kbg-fff,#fff);font-size:13px}
.pmod .gifbox .gifrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.pmod .gifbox .drop{margin:0;flex:1 1 160px}
.pmod .btns{padding:0 10px 10px}
.sclist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;padding:10px;max-height:52vh;overflow:auto}
.sclist button{position:relative;display:flex;gap:8px;align-items:center;text-align:left;border:1px solid var(--kbd-d4d6e8,#d4d6e8);background:var(--kbg-fff,#fff);padding:4px 8px 4px 4px;font-size:12px;cursor:pointer;color:var(--ink)}
.sclist button.sel{border-color:#c9a24a;background:var(--kbg-fff8d8,#fff8d8)}
.sclist .n{position:absolute;right:4px;top:2px;font:12px var(--pixel);color:var(--kfg-6b4100,#6b4100)}
/* 冒険者 profile */
.pback{display:inline-block;margin:0 0 8px;font:13px var(--pixel);color:var(--link)}
.pban{position:relative;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;padding:14px;background:linear-gradient(100deg,#1b1f6b,#3a3a9a 55%,#5b4f9e);color:var(--iv-fg,var(--iv));border:2px solid #11131f}
.pban .nm{font:26px/1 var(--pixel);overflow-wrap:anywhere}.pban .jb{font-size:12.5px;color:#d8dbff}
.pban .acts{margin-left:auto;align-self:flex-start}
.note{font-size:12.5px;color:var(--mute);margin:8px 0}
.pgrid2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;align-items:start}
.pgrid2 .box{margin-bottom:10px}
.show{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}
.shc{border:1px solid var(--kbd-d4d6e8,#d4d6e8);background:var(--kbg-fff,#fff);padding:8px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;font-size:11.5px;min-width:0}
.shc.empty{justify-content:center;border-style:dashed;min-height:120px}
.shc .k{font:700 10px var(--text);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.shc .nm{font:13px/1.25 var(--pixel);overflow-wrap:anywhere}.shc .fx{color:var(--mute)}
.recs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}/* RECORDS-1: twelve records, 6 × 2 (D-261 had ten, 5 × 2) */
.recs>div{padding:7px 10px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0);border-left:1px solid var(--kbd-e1e3f0,#e1e3f0);font-size:11.5px;color:var(--mute);min-width:0}
.recs>div:nth-child(6n+1){border-left:0}.recs>div:nth-child(-n+6){border-top:0}
.recs b{display:block;font:17px var(--pixel);color:var(--ink);font-weight:400}
.jobsg{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;padding:10px}
.jobsg>div{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--mute);border:1px solid var(--kbd-e1e3f0,#e1e3f0);background:var(--kbg-fff,#fff);padding:4px 2px}
.jobsg>div.cur{border:2px solid var(--indigo-fg,var(--indigo));background:var(--kbg-eef1ff,#eef1ff)}
.jobsg .st{font:11px var(--pixel);color:var(--kfg-8a5a00,#8a5a00);letter-spacing:-1px}
.seals{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px}
.seals span{font:11.5px var(--pixel);border:1px solid #c9a24a;background:var(--kbg-fff8d8,#fff8d8);color:var(--kfg-583f13,#583f13);padding:1px 6px}
.seals span.off{border-color:var(--kbd-d4d6e8,#d4d6e8);background:var(--kbg-f3f4fb,#f3f4fb);color:var(--kfg-6e7392,#6e7392)}
.eqr{display:flex;gap:8px;align-items:center;padding:5px 10px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0);font-size:12.5px}
.feed{list-style:none;margin:0;padding:4px 10px 8px;font-size:12px}.feed li{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.feed li{padding:2px 0;border-top:1px dashed var(--kbd-e1e3f0,#e1e3f0)}.feed li:first-child{border-top:0}
@media (max-width:900px){.pgrid2{grid-template-columns:minmax(0,1fr)}.recs{grid-template-columns:1fr 1fr}.recs>div:nth-child(6n+1){border-left:1px solid var(--kbd-e1e3f0,#e1e3f0)}.recs>div:nth-child(odd){border-left:0}.recs>div:nth-child(-n+6){border-top:1px solid var(--kbd-e1e3f0,#e1e3f0)}.recs>div:nth-child(-n+2){border-top:0}}
@media (max-width:520px){.show{grid-template-columns:minmax(0,1fr)}.shc{flex-direction:row;text-align:left}}
/* PROFILE-GEAR (D-268): displayed gear shows its rolls (yours and another player's); gold marks the top of an affix's range */
.eqr.gear{align-items:flex-start;padding:7px 10px}
.gtap{cursor:pointer}.gchev{align-self:flex-start;color:var(--mute);font-size:11px;line-height:18px;transition:transform .15s}.gtap.open .gchev{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){.gchev{transition:none}}.gtap:hover{background:var(--kbg-f3f4fb,#f3f4fb)}.gtap:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.gi{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;text-align:left}
.git{display:flex;flex-wrap:wrap;gap:3px 8px;align-items:center}.git .nm{font:13px/1.25 var(--pixel);overflow-wrap:anywhere}
.gperf{font:700 10.5px var(--text);letter-spacing:.06em;border:1px solid #c9a24a;background:var(--kbg-fff8d8,#fff8d8);color:var(--kfg-583f13,#583f13);padding:0 5px;white-space:nowrap}
.gis{display:flex;flex-wrap:wrap;gap:1px 8px;font-size:11px;color:var(--mute)}.gtop{color:var(--kfg-8a5a00,#8a5a00)}
.gbars{display:flex;gap:3px;height:6px;margin-top:1px}
.gbars i{flex:1;max-width:34px;background:var(--kbg-e1e3f0,#e1e3f0);position:relative;overflow:hidden}
.gbars i::after,.gl .mtr::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--q);background:#6e7392}
.gbars i.top::after,.gl.top .mtr::after{background:#c9a24a}.gbars i.fix::after{background:var(--kbg-d4d6e8,#d4d6e8)}
.glines{display:none;flex-direction:column;gap:3px;margin-top:3px;font-size:11.5px}
.gtap.open .glines{display:flex}.gtap.open .gbars{display:none}
.gl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;align-items:center;color:var(--ink)}.gl.base{color:var(--mute)}
.gl .rg{font-size:10.5px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}.gl.top .rg{color:var(--kfg-8a5a00,#8a5a00);font-weight:700}
.gl .mtr{grid-column:1/-1;height:3px;background:var(--kbg-e1e3f0,#e1e3f0);position:relative}
.gseal{font-size:9.5px;border:1px solid var(--mute);color:var(--mute);padding:0 3px;margin-left:5px}
.gsock{display:flex;flex-wrap:wrap;gap:2px 10px}.gsock .off,.gset.off,.gfx,.gflav{color:var(--mute)}.gset{color:var(--unique)}.gflav{font-style:italic}
/* Showcase: wide tiles show the numbers; on a phone a tile is a row that opens like Worn. Your empty slots are one line. */
@media (min-width:521px){.shc.gear .glines{display:flex}.shc.gear .gbars{display:none}.shc.gear .gi{align-self:stretch}.shc.gear .git,.shc.gear .gis{justify-content:center}.shc.gear{cursor:default}.shc.gear .gchev{display:none}.shc.gear:hover{background:var(--kbg-fff,#fff)}}
.shc.empty{gap:8px}.shc.empty.sp2{grid-column:span 2}.shc.empty.sp3{grid-column:span 3}
@media (max-width:520px){.shc.empty.sp2,.shc.empty.sp3{grid-column:auto}.shc.empty{min-height:0;flex-direction:row;justify-content:space-between;flex-wrap:wrap}}
/* one column (phone): Worn follows Showcase */
@media (max-width:900px){.pgrid2{display:flex;flex-direction:column}.pgrid2>div{display:contents}.pgrid2 .box{order:2}.pgrid2 .box.p-sc{order:0}.pgrid2 .box.p-gear{order:1}}

/* D-179 Game Master flair (gm-badge-preview-v3): the golden GM plate with a glint every 4 s, the bold Starfall name, the animated
   portrait (a canvas the GM ticker paints). D-180 profile banner: art, pattern and a fade behind the name; the banner window. */
.gmp{position:relative;display:inline-block;vertical-align:middle;width:27px;height:15px;margin-right:5px;background:url(art/portraits/gm-plate.png) 0 0/100% 100%;image-rendering:pixelated;flex:none}
.gmp.x2{width:54px;height:30px}
.gmp::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 40%,var(--kbg-ffffffd0,#ffffffd0) 47%,var(--kbg-fff,#fff) 50%,var(--kbg-ffffffd0,#ffffffd0) 53%,transparent 60% 100%) 0 0/300% 100% no-repeat;-webkit-mask:url(art/portraits/gm-plate.png) 0 0/100% 100%;mask:url(art/portraits/gm-plate.png) 0 0/100% 100%;animation:gmglint 4s ease-in-out infinite;mix-blend-mode:screen}
@keyframes gmglint{0%,55%{background-position:120% 0}85%,100%{background-position:-120% 0}}
.fx-gm{position:relative;font-weight:700!important;letter-spacing:.03em;-webkit-text-stroke:.4px currentColor;paint-order:stroke fill;color:var(--kfg-5a2fc0,#5a2fc0);text-shadow:0 0 5px #c9a8ff;animation:gmpulse 3s ease-in-out infinite}
.pban .fx-gm,.ptop .fx-gm{color:#f2ecff;text-shadow:0 0 6px #b48cff,0 0 1px #7b4fe0}
.ptop .fx-gm{color:var(--kfg-5a2fc0,#5a2fc0);text-shadow:0 0 5px #c9a8ff}
/* NAMES-1 (D-292, names v0.1 §3.1): Starfall v2, the two ✦ sit on the name's first and last letters at about half the size */
.fx-gm .gf,.fx-gm .gz{position:relative}
.fx-gm .gf::after,.fx-gm .gz::after{content:"✦";position:absolute;font-style:normal;font-weight:400;font-size:.3em;line-height:1;color:#fff;text-shadow:0 0 3px #c9a8ff;-webkit-text-stroke:0;animation:gmtw 2.4s ease-in-out infinite;pointer-events:none}
.fx-gm .gf::after{left:-.2em;top:-.05em}.fx-gm .gz::after{right:-.2em;bottom:.1em;animation-delay:1.2s}
.who-btn .fx-gm .gf::after,.who-btn .fx-gm .gz::after,.hero .fx-gm .gf::after,.hero .fx-gm .gz::after,.ptop .fx-gm .gf::after,.ptop .fx-gm .gz::after{color:var(--kfg-9b6cf0,#9b6cf0);text-shadow:none}
@keyframes gmtw{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
@keyframes gmpulse{50%{text-shadow:0 0 9px #b48cff}}
@media (prefers-reduced-motion:reduce){.gmp::after,.fx-gm,.fx-gm .gf::after,.fx-gm .gz::after{animation:none!important}.gmp::after{opacity:0}.fx-gm .gf::after,.fx-gm .gz::after{display:none}}
/* NAMES-1 (D-292, names v0.1 §3.1, preview v2): earned name effects. The name's colour carries the effect; one or two tiny particles
   start on a letter's edge and travel a third of its height at most. Reduced motion: no particles, the colour and a thin outline. */
.nfx{position:relative;display:inline-block;max-width:100%}
.nfx .t{position:relative;z-index:1;display:inline-block;line-height:1.15;font-weight:700}
.nfx .l{position:relative;display:inline-block}
.nfx .p{position:absolute;z-index:2;width:.15em;height:.15em;min-width:2px;min-height:2px;pointer-events:none;opacity:0;left:var(--ax,50%);animation-duration:var(--per,2.6s);animation-delay:var(--dl,0s);animation-iteration-count:infinite;animation-timing-function:steps(5,end);animation-fill-mode:both}
.e-ember .t{color:var(--kfg-a8340a,#a8340a)}.e-ember .p{background:#ffd04a;box-shadow:0 0 0 1px #d4480f;top:.14em;animation-name:nfEmber}
.e-summit .t{color:var(--kfg-2b4f7a,#2b4f7a)}.e-summit .p{background:var(--kbg-9fd8ff,#9fd8ff);box-shadow:0 0 0 1px #3d6fa8;top:.12em;width:.36em;height:.12em;left:0;animation-name:nfWalk;animation-timing-function:steps(10,end)}
.e-gilded .t{color:var(--kfg-7a5600,#7a5600)}.e-gilded .p{background:#fff0a0;left:90%;top:.1em;width:.12em;height:.12em;box-shadow:.12em 0 #a87400,-.12em 0 #a87400,0 .12em #a87400,0 -.12em #a87400;animation-name:nfTw}
.e-bloom .t{color:var(--kfg-a02a63,#a02a63)}.e-bloom .p{background:var(--kbg-ffd6e8,#ffd6e8);box-shadow:0 0 0 1px #c8508a;left:92%;top:.5em;width:.22em;height:.11em;animation-name:nfPetal}
.e-archive .t{color:var(--kfg-3a2a2a,#3a2a2a)}.e-archive .p{background:#e0603a;box-shadow:0 0 0 1px #5a1a1a;top:.98em;width:.17em;height:.17em;animation-name:nfStamp}
.e-static .t{color:var(--kfg-0b6b6b,#0b6b6b)}.e-static .p{background:var(--kbg-c4f8f2,#c4f8f2);box-shadow:0 0 0 1px #0a8a86;top:.06em;left:0;width:2px;height:1em;animation-name:nfScan;animation-timing-function:steps(9,end)}
.e-lantern .t{color:var(--kfg-8a4a00,#8a4a00)}.e-lantern .p{background:var(--kbg-fff0b0,#fff0b0);box-shadow:0 0 0 1px #c07a10,0 0 .4em .12em #c07a10;top:0;width:.18em;height:.18em;animation-name:nfBob;animation-timing-function:ease-in-out}
.pban .e-ember .t{color:#ff9a5c}.pban .e-summit .t{color:#a9c8ee}.pban .e-gilded .t{color:#ffd35a}.pban .e-bloom .t{color:#ff9ccb}.pban .e-archive .t{color:#e6e0c8}.pban .e-static .t{color:#6ff0e6}.pban .e-lantern .t{color:#ffc266}
@keyframes nfEmber{0%{opacity:0;transform:translateY(0)}12%{opacity:1}55%{opacity:1}100%{opacity:0;transform:translateY(-.27em)}}
@keyframes nfWalk{0%{opacity:0;left:0}6%{opacity:1}34%{opacity:1;left:calc(100% - .36em)}42%,100%{opacity:0;left:calc(100% - .36em)}}
@keyframes nfTw{0%{opacity:0;transform:scale(0)}15%{opacity:1;transform:scale(1)}40%{opacity:1;transform:scale(1)}55%{opacity:0;transform:scale(.4)}100%{opacity:0}}
@keyframes nfPetal{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}65%{opacity:1;transform:translate(.08em,.3em) rotate(60deg)}85%{opacity:1;transform:translate(.08em,.3em) rotate(0)}100%{opacity:0;transform:translate(.08em,.3em)}}
@keyframes nfStamp{0%{opacity:0;transform:scale(0)}12%{opacity:1;transform:scale(1.7)}25%{opacity:1;transform:scale(1)}65%{opacity:1}100%{opacity:0}}
@keyframes nfScan{0%,86%{opacity:0;left:0}88%{opacity:1;left:0}100%{opacity:0;left:calc(100% - 2px)}}
@keyframes nfBob{0%{opacity:0;transform:translateY(.06em)}20%{opacity:1}50%{opacity:1;transform:translateY(-.1em)}80%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.nfx .p{display:none}.e-ember .t{text-shadow:0 0 1px var(--ksh-ffc79a,#ffc79a)}.e-summit .t{text-shadow:0 0 1px var(--ksh-bcd8f5,#bcd8f5)}.e-gilded .t{text-shadow:0 0 1px #ffe08a}.e-bloom .t{text-shadow:0 0 1px var(--ksh-ffc4de,#ffc4de)}.e-archive .t{text-shadow:0 0 1px var(--ksh-e8d4a8,#e8d4a8)}.e-static .t{text-shadow:0 0 1px var(--ksh-b4f0e8,#b4f0e8)}.e-lantern .t{text-shadow:0 0 1px #ffd88a}}
/* NAMES-1 §2: "formerly X" for 14 days after a paid rename: a small ↺ that shows the old name on hover, focus or tap */
.was{position:relative;display:inline-grid;place-items:center;margin-left:4px;border:1px solid #666699;background:var(--kbg-fff,#fff);color:var(--kfg-1d1d3a,#1d1d3a);font:12px/1 system-ui,sans-serif;width:20px;height:20px;padding:0;cursor:pointer;vertical-align:middle;font-weight:400}
.was .tip{display:none;position:absolute;left:0;top:calc(100% + 3px);z-index:6;background:#1d1d3a;color:#fffff0;font-size:12px;line-height:1.3;padding:4px 8px;white-space:nowrap;border:1px solid #666699}
.was:hover .tip,.was:focus-visible .tip,.was[aria-expanded="true"] .tip{display:block}
.gmc{display:block;image-rendering:pixelated}.gmc.small{image-rendering:auto}
.pf.s192{width:196px;height:196px}
.pface.gmface{display:block;background:none}
.pface.gmface .gmc{margin:-4px 0 0 -9px}
.who-btn .pface.gmface .gmc{margin:-5px 0 0 -11px}
.gmrow{display:flex;align-items:center;gap:4px;font-size:12.5px;color:#e6e8ff;margin-top:4px}
.pban{position:relative;overflow:hidden}
.pban>.bnr-art,.pban>.bnr-pat,.pban>.bnr-scrim{position:absolute;inset:0;pointer-events:none}
.pban>.bnr-art{background-size:cover;background-position:center}
.pban>.bnr-art.bnr-px{image-rendering:pixelated}
.pban>.bnr-scrim{background:linear-gradient(90deg,#0b0d1acc 0,#0b0d1a66 40%,transparent 75%)}
.pban>:not(.bnr-art):not(.bnr-pat):not(.bnr-scrim){position:relative}
.pban.bprev{display:flex;align-items:center;gap:10px;min-height:76px;padding:10px;border:2px solid #11131f;color:#fff}
.pban.bprev .nm{font:20px var(--pixel)}
.pmod .bsw{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px}
.pmod .bsw button{height:34px;border:2px solid var(--ink-bd,var(--ink));padding:0;cursor:pointer}
.pmod .bsw button.on{outline:3px solid #f2c94c;outline-offset:1px}
.pmod .bpats{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 10px}
.pmod .bpats .btn.on{background:var(--indigo);color:var(--iv-fg,var(--iv))}
.pmod .bscn{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.pmod .bscn button{position:relative;height:56px;border:2px solid var(--ink-bd,var(--ink));background-size:cover;background-position:center;cursor:pointer;padding:0;image-rendering:pixelated}
.pmod .bscn button.on{outline:3px solid #f2c94c;outline-offset:1px}
.pmod .bscn button.lock{cursor:default}
.pmod .bscn button.lock::after{content:attr(data-why);position:absolute;inset:0;background:#0b0d1ad9;color:#e6e8ff;font:11px/1.3 var(--text);display:grid;place-items:center;padding:4px;text-align:center}
.pmod .bdy{display:flex;align-items:center;gap:8px;padding:0 10px 10px;font-size:12.5px}
.gmp+.fx-gm{margin-left:.3em}
/* NAMES-1 (D-292): the ✎ next to your name, the rename dialog and the Wardrobe's name-effect list */
.nmrow{display:flex;align-items:center;gap:6px;min-width:0}
.ren{flex:none;width:26px;height:26px;padding:0;border:2px solid var(--bev2);background:var(--iv);color:var(--ink);font:14px/1 system-ui,sans-serif;cursor:pointer}
.rename-dlg .box{max-width:420px}.rename-dlg input{width:100%}.ren-price{font-size:13px;margin:0 0 4px}.ren-bal{font-size:12px;margin:0 0 8px}
.wfx{display:grid;gap:6px;margin-top:6px}
.wfi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;width:100%;min-height:44px;text-align:left;background:var(--iv);color:var(--ink);border:2px solid var(--bev2);padding:8px 10px;font:inherit;cursor:pointer}
.wfi .n{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:15px;min-width:0}.wfi .n small{font-size:12px;color:var(--mute)}
.wfi .how{grid-column:1;font-size:12px;color:var(--mute)}
.wfi .st{grid-row:1/3;grid-column:2;font-size:12px;border:1px solid var(--bev2);padding:2px 8px;white-space:nowrap}
.wfi[aria-checked="true"]{border-color:#2f7d4a}.wfi[aria-checked="true"] .st{background:#2f7d4a;color:#fff;border-color:#1f5f36}
.wfi[aria-disabled="true"]{cursor:not-allowed}.wfi[aria-disabled="true"] .n{color:var(--mute)}.wfi:disabled{opacity:1;cursor:default}
/* ONLINE-1 (D-183, online-preview-v1): sign-in, the sync chip, dialogs and the GM console. */
body.hosted .hosted-off{display:none!important}
.sync{display:inline-flex;align-items:center;gap:5px;font:700 11.5px var(--text);padding:1px 8px;border:1px solid;white-space:nowrap;min-height:22px}
.sync i{font-style:normal}
.sync.ok{color:var(--kfg-0f5f2a,#0f5f2a);background:var(--kbg-e6f7eb,#e6f7eb);border-color:#7cc795}
.sync.ing{color:var(--kfg-1b3a8a,#1b3a8a);background:var(--kbg-e8eeff,#e8eeff);border-color:var(--kbd-9db0ea,#9db0ea)}
.sync.off{color:var(--kfg-5a4a12,#5a4a12);background:var(--kbg-fff6dd,#fff6dd);border-color:#c9a24a}
.sync.taken{color:var(--kfg-4d4d6e,#4d4d6e);background:var(--kbg-eceef6,#eceef6);border-color:#9aa0c0}
.sync.conf,.sync.err{color:var(--kfg-8a1c14,#8a1c14);background:var(--kbg-fdecea,#fdecea);border-color:var(--kbd-e3a59f,#e3a59f)}
.ogate{position:fixed;inset:0;z-index:60;background:var(--pg);overflow-y:auto;display:flex;justify-content:center;align-items:flex-start;padding:max(6vh,24px) 16px 40px}
.ocard{width:min(360px,100%);background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:18px 16px;box-shadow:6px 6px 0 var(--ksh-c9cdf2,#c9cdf2)}
.ologo{text-align:center;margin:4px 0 14px}
.ologo b{display:block;font:34px/1 var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo));text-shadow:2px 2px 0 var(--ksh-c9cdf2,#c9cdf2);letter-spacing:2px}
.ologo small{font:12px var(--pixel);color:var(--mute)}
.oseg{display:flex;margin:0 0 12px}
.oseg button{flex:1;font:13px var(--pixel);min-height:38px;background:var(--kbg-fff,#fff);border:1px solid var(--bev2);color:var(--ink);cursor:pointer}
.oseg button+button{border-left:0}
.oseg button.on{background:var(--indigo);color:var(--iv-fg,var(--iv))}
.ofield{display:block;margin:0 0 10px;font-size:12px;color:var(--mute)}
.ofield input{display:block;width:100%;margin-top:3px;font:16px var(--text);min-height:40px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);padding:6px 8px}
.btn.wide{width:100%}
.oerr{padding:6px 10px;background:var(--kbg-fdecea,#fdecea);color:var(--kfg-8a1c14,#8a1c14);border:1px solid var(--kbd-e3a59f,#e3a59f);font-size:12.5px;margin:0 0 10px}
.olink{color:var(--link);background:none;border:0;padding:0;cursor:pointer;font:inherit;text-decoration:underline}
.ocard .notice{margin:0 0 10px}
.online-dlg{z-index:70}
.online-dlg .pad p{margin:0 0 8px}
.ocmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.ocmp>button{text-align:left;background:var(--kbg-fff,#fff);border:2px solid var(--bev2);padding:8px;cursor:pointer;font:12.5px var(--text);color:var(--ink)}
.ocmp>button.on{border-color:var(--indigo-fg,var(--indigo));background:var(--kbg-e8fbfb,#e8fbfb);box-shadow:0 0 0 2px var(--ksh-9db0ea,#9db0ea)}
.ocmp>button b{display:block;font:14px var(--pixel);font-weight:400;margin-bottom:2px}
.ocmp table{width:100%;border-collapse:collapse;font-size:12px}.ocmp td+td{text-align:right;font-variant-numeric:tabular-nums}
.bigcode{display:block;text-align:center;font:24px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.12em;background:var(--kbg-fff,#fff);border:1px dashed var(--bev2);padding:10px;margin:8px 0;color:var(--indigo-fg,var(--indigo));user-select:all}
#account-box .kv{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:8px}
#account-box .kv th,#account-box .kv td{border:1px solid var(--kbd-d4d6e8,#d4d6e8);padding:5px 8px;text-align:left;vertical-align:top}
#account-box .kv th{background:var(--kbg-f3f4fb,#f3f4fb);width:32%}
.opw{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.opw input{font:14px var(--text);min-height:34px;border:1px solid var(--bev2);padding:4px 8px;flex:1;min-width:150px}.opw p{flex-basis:100%;margin:0}
.btn.warn{color:var(--dn)}
.rail a .railgm{display:block;margin:4px auto 6px}
.flag{display:inline-block;font:700 10.5px var(--text);padding:0 5px;border:1px solid #b07a12;color:var(--kfg-7a5200,#7a5200);background:var(--kbg-fff4d6,#fff4d6);white-space:nowrap;margin-right:3px}
.flag.lock{border-color:#b3261e;color:var(--kfg-8a1c14,#8a1c14);background:var(--kbg-fdecea,#fdecea)}
.flag.gm{border-color:#6b4fc0;color:var(--kfg-4a2fa0,#4a2fa0);background:var(--kbg-f1ebff,#f1ebff)}
.gmc-root .gtabs{display:flex;margin:0 0 10px;border-bottom:1px solid var(--bev2);flex-wrap:wrap}
.gmc-root .gtabs button{font:14px var(--pixel);background:var(--kbg-fff,#fff);border:1px solid var(--bev2);border-bottom:0;margin-right:-1px;padding:5px 14px;cursor:pointer;color:var(--ink);min-height:36px}
.gmc-root .gtabs button.on{background:var(--cy);position:relative;top:1px}
.gmc-root .box{margin-bottom:10px}
.gwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:10px;align-items:start}
.gplist{overflow-x:auto}
.ptab{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;background:var(--iv)}
.ptab th{background:var(--cy);font-weight:700;padding:5px 8px;text-align:left;font-size:11.5px;border-bottom:1px solid var(--bev2);white-space:nowrap}
.ptab td{padding:6px 8px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0);vertical-align:middle}
.ptab tr.row{cursor:pointer}.ptab tr.row:hover td{background:var(--kbg-f4f5fd,#f4f5fd)}.ptab tr.row.cur td{background:var(--kbg-e8fbfb,#e8fbfb)}
.ptab .pnm b{font:14px var(--pixel);font-weight:400}.ptab .num{text-align:right;font-variant-numeric:tabular-nums}
.ptab .mono,.gmc-root .mono{font:12.5px ui-monospace,Consolas,monospace}
.gdetail .gline{margin:0;color:var(--mute);font-size:12.5px}
.gdetail .btns{padding-top:0}
.revs{list-style:none;margin:0;padding:0;font-size:12.5px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0)}
.revs li{display:flex;align-items:center;gap:8px;padding:5px 10px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0)}
.revs li .t{flex:1;min-width:0}.revs li .t div{color:var(--mute);font-size:11.5px}
.revs li.head{background:var(--kbg-e6f7eb,#e6f7eb)}
.revs li.grp{background:var(--kbg-f3f4fb,#f3f4fb);font:700 11px var(--text);color:var(--mute);padding:3px 10px;letter-spacing:.04em;text-transform:uppercase}
.gdetail .cant{font-size:12px;color:var(--mute);padding:8px 10px;margin:0;border-top:1px dashed var(--bev2)}
.gmc-root .srv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--bev2-bg,var(--bev2))}
.gmc-root .srv>div{background:var(--iv);padding:8px 10px}
.gmc-root .srv b{display:block;font:17px/1.15 var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo))}
.gmc-root .srv span{font-size:11.5px;color:var(--mute)}
.logl{list-style:none;margin:0;padding:0;font-size:12.5px}
.logl li{padding:5px 10px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0);display:flex;gap:10px}.logl li:first-child{border-top:0}
.logl time{flex:none;width:110px;color:var(--mute);font-variant-numeric:tabular-nums}
.gmc-root .sel{min-height:34px}
@media (max-width:900px){.gwrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .rail a .railgm{width:40px;height:22px;margin:3px auto 4px}
  .gmc-root .srv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptab th:nth-child(2),.ptab td:nth-child(2),.ptab th:nth-child(4),.ptab td:nth-child(4){display:none}
  .logl time{width:86px}
  .top .st .sync{order:-1}
}

/* RANK-1 (D-175, home-preview-v2 layout A): サーバー and ランキング in the home page's right column, another player's profile */
.hubcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.friends{list-style:none;margin:0;padding:0;max-height:495px;overflow-y:auto;overscroll-behavior:contain}
.friends li{border-top:1px solid var(--kbd-e1e3f0,#e1e3f0)}.friends li:first-child{border-top:0}
.friends .fr{display:flex;gap:7px;align-items:center;width:100%;padding:6px 8px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit;font-size:12px}
.friends .fr:hover{background:var(--kbg-f3f4fb,#f3f4fb)}
.friends .who{flex:1;min-width:0}.friends .who b{font:13px var(--pixel);font-weight:400}
.friends .who div{color:var(--mute);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt2{font:10.5px var(--pixel);color:var(--kfg-7a4a00,#7a4a00);margin-left:3px}
.pdot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--kbg-b9bccf,#b9bccf);flex:none}
.pdot.on{background:#20b04a;box-shadow:0 0 0 2px var(--ksh-c9f2d4,#c9f2d4)}.pdot.away{background:#e0a020}
/* FIX-UI: padded tabs that wrap inside the box instead of squeezing (a 208 px desktop column clipped every label) */
.ltabs{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px;border-bottom:1px solid var(--bev2)}
.ltabs button{flex:1 1 auto;font:12px var(--pixel);line-height:1.3;border:1px solid var(--bev2);background:var(--kbg-e9ebf6,#e9ebf6);padding:5px 10px;cursor:pointer;color:var(--ink);white-space:nowrap;min-width:0}
.ltabs button.on{background:var(--iv);box-shadow:inset 0 -3px 0 var(--indigo-fg,var(--indigo))}
.rscroll{max-height:307px;overflow-y:auto;overscroll-behavior:contain}/* D-289: 10 rows, then the box scrolls */
.rladder{width:100%;border-collapse:collapse;font-size:12px}
.rladder td{padding:3px 6px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0)}.rladder tr:first-child td{border-top:0}
.rladder tr[tabindex]{cursor:pointer}.rladder tr[tabindex]:hover{background:var(--kbg-f3f4fb,#f3f4fb)}
.rladder td.n{font:13px var(--pixel);width:22px;color:var(--mute)}
.rladder td.v{text-align:right;font:13px var(--pixel);white-space:nowrap}
.rladder tr.me{background:var(--kbg-fff1b8,#fff1b8)}.rladder tr.me:hover{background:#ffe98a}
.rladder tr.sep td{font-size:11px;color:var(--mute);background:var(--kbg-f3f4fb,#f3f4fb)}
/* RECORDS-1 (D-312, preview frontier-play-preview-v1 §B): the value bold, the other ★ bests / best region / rarest feat small under it */
.rladder td.v b{font-weight:400}.rladder tr.rsubrow td{border-top:0;padding:0 6px 4px;text-align:right}.rladder tr.rsubrow{cursor:pointer}
.rladder .rsub{font-size:10.5px;line-height:1.3;color:var(--mute)}
/* the 首殺 board: one row per first (and per fewest-lives record), holder and Hong Kong date on the right; ten rows, then it scrolls */
.firsts{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.firsts .fst{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;padding:5px 8px;border:0;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0);background:none;font:11.5px/1.35 var(--sans,inherit);color:var(--ink);text-align:left;width:100%}
.firsts .fst .who{margin-left:auto}/* the holder wraps under the label in the desktop's narrow column */
.firsts .fst:first-child{border-top:0}.firsts button.fst{cursor:pointer}.firsts button.fst:hover{background:var(--kbg-f3f4fb,#f3f4fb)}
.firsts .fst .who{font:12px var(--pixel);white-space:nowrap;color:var(--kfg-7a4a00,#7a4a00)}.firsts .fst.open .who{color:var(--mute)}
.firsts .fst.me{background:var(--kbg-fff1b8,#fff1b8)}
/* the profile's 紀錄 Feats box: the tower per ★, the ★ record per region, each first fall with its counted life */
.pfeat{padding:6px 10px 8px}.pf-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:4px 0;border-bottom:1px solid var(--kbd-e1e3f0,#e1e3f0)}
.pf-row b{font:12px var(--pixel);font-weight:400;color:var(--mute);min-width:64px}.pf-row>span{font:15px var(--pixel)}.pf-row small{font-size:11px;color:var(--mute)}
.pf-list{list-style:none;margin:6px 0 0;padding:0;font-size:12px;display:grid;gap:3px}.pf-list li.first{color:var(--kfg-7a4a00,#7a4a00);font-weight:600}
.nmc{display:flex;gap:6px;align-items:center;min-width:0;overflow-wrap:anywhere}
.fface.pface{width:24px;height:24px;background-position:-12px -5px}
.fface.pface.gmface .gmc{margin:-6px 0 0 -12px}
.pfhead{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin:0 0 8px}.pfhead .pback{margin:0}
.pban .pst{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:#d8dbff;margin-top:3px}
.pban .ttl.none{display:none}
.pban .acts{position:relative;display:flex;gap:6px;flex-wrap:wrap}
.pmenu{position:absolute;right:0;top:100%;margin-top:4px;z-index:5;display:flex;flex-direction:column;min-width:220px;background:var(--iv);border:2px solid #11131f;box-shadow:0 4px 12px #0006}
.pmenu[hidden]{display:none}
.pmenu button{border:0;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0);background:none;padding:8px 10px;text-align:left;cursor:pointer;color:var(--ink);font-size:12.5px}
.pmenu button:first-child{border-top:0}.pmenu button:hover{background:var(--kbg-f3f4fb,#f3f4fb)}
.recs .rrk{display:block;font-size:11px;color:var(--kfg-3b4aa8,#3b4aa8)}
.recs .rvs{display:block;font-size:11px}
.cmpbar{display:flex;gap:6px;align-items:center;padding:6px 10px;background:var(--kbg-fff8d8,#fff8d8);border-bottom:1px solid var(--kbd-e1e3f0,#e1e3f0);font-size:12px}
.note.err{color:var(--dn)}

/* TITAN-1: the 巨神 Titans mode (lair-tab preview v7, D-196–D-201) */
.mc-toggle{flex-wrap:wrap}
#map-tab-frontier{position:relative}
#map-tab-frontier .badge{position:absolute;top:-7px;right:-6px;background:var(--badge);color:#fff;font:11px/16px var(--pixel);min-width:16px;height:16px;border-radius:8px;text-align:center}
.tl-pips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;margin-bottom:8px}
.tl-pips i{font:13px/22px var(--pixel);font-style:normal;width:30px;height:24px;text-align:center;border:2px solid var(--bev2)}
.tl-pips i.down{background:#946000;color:#fff;border-color:#5c3c00}
.tl-pips i.open{background:var(--cy);outline:2px solid #a3244a;outline-offset:1px}
.tl-pips i.sealed{background:#14163f;color:var(--kfg-6f74b8,#6f74b8);border-color:#3a3f8f}
.tl-pips span{margin-left:6px;color:var(--mute)}
.tl-list{display:grid;gap:6px}
.tl-plate{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);min-width:0}
.tl-head{all:unset;box-sizing:border-box;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:6px 8px;cursor:pointer}
.tl-head:focus-visible{outline:3px solid #946000;outline-offset:-3px}
.tl-head .face{width:56px;height:56px;border:2px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);background:var(--kbg-f4f4ff,#f4f4ff);display:grid;place-items:center;overflow:hidden}
.tl-head .face img{width:48px;height:48px;image-rendering:pixelated}
.tl-head .nm{min-width:0}
.tl-head .nm b{display:block;font:400 15px/1.25 var(--pixel);overflow-wrap:anywhere}
.tl-head .nm small{display:block;font-size:11.5px;color:var(--mute)}
.tl-head .chip{font:12px var(--pixel);padding:1px 8px;border:2px solid currentColor;white-space:nowrap}
.tl-plate.open{border-color:#a3244a;box-shadow:3px 3px 0 var(--ksh-e2b6c4,#e2b6c4)}
.tl-plate.open .chip{color:var(--kfg-a3244a,#a3244a);background:var(--kbg-fff0f4,#fff0f4)}
.tl-plate.down{background:var(--kbg-fbf6e8,#fbf6e8)}
.tl-plate.down .chip{color:var(--kfg-946000,#946000);background:var(--kbg-fff8e0,#fff8e0)}
.tl-plate.sealed{background:#14163f radial-gradient(#2a2e6e 1px,transparent 1px) 0 0/4px 4px;border-color:#3a3f8f;color:#c6c9ff}
.tl-plate.sealed .face{background:#0b0c26;border-color:#3a3f8f #0b0c26 #0b0c26 #3a3f8f}
.tl-plate.sealed .face img{filter:brightness(0) invert(18%) sepia(40%) saturate(500%) hue-rotate(200deg);opacity:.85}
.tl-plate.sealed .nm b{color:#e4e6ff;letter-spacing:2px}
.tl-plate.sealed .nm small,.tl-plate.sealed .chip{color:#9ea3e0}
.tl-head[aria-expanded="true"]{border-bottom:1px dashed var(--bev2)}
.tl-lair{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;padding:8px}
.tl-scene{position:relative;aspect-ratio:3/2;border:2px solid var(--ink-bd,var(--ink));overflow:hidden;background:#000}
.tl-scene .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.tl-scene .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0) 80%)}
.tl-scene .fig{position:absolute;bottom:6%;right:9%;height:66%;width:auto;image-rendering:pixelated}
.tl-scene.stick .fig{height:46%;bottom:20%;right:14%}
.tl-scene.leg .fig{height:125%;bottom:4%;right:4%}
.tl-scene .tb{position:absolute;left:6px;top:6px;background:rgba(20,22,63,.86);color:#fff;font:12px var(--pixel);padding:1px 8px}
.tl-plate.sealed .tl-scene .bg{filter:brightness(.18) saturate(.3)}
.tl-plate.sealed .tl-scene .fig{filter:brightness(0);opacity:.75}
.tl-plate.down .tl-scene .bg,.tl-plate.down .tl-scene .fig{filter:grayscale(1) contrast(.9)}
.tl-scene .stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);font:28px var(--pixel);color:#fff;background:#946000;padding:2px 14px;border:3px solid var(--kbd-fff,#fff);box-shadow:0 0 0 3px #946000}
.tl-scene .seal{position:absolute;inset:auto 0 0 0;text-align:center;font:14px var(--pixel);color:#e4e6ff;background:rgba(11,12,38,.8);padding:4px}
.tl-side{display:grid;gap:8px;align-content:start;min-width:0}
.tl-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;font-size:12.5px;margin:0}
.tl-facts dt{color:var(--mute)}
.tl-facts dd{margin:0}
.tl-plate.sealed .tl-facts dt{color:#9ea3e0}
.tl-plate.sealed .tl-facts dd{color:#e4e6ff}
.tl-rew{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.tl-card{width:118px;border:3px solid #946000;background:linear-gradient(var(--kbg-fff8e0,#fff8e0),var(--kbg-f5e2a8,#f5e2a8));padding:4px;display:grid;gap:2px;justify-items:center;text-align:center}
.tl-card .cimg{width:96px;height:96px;background:var(--kbg-fffef6,#fffef6);border:1px solid #c99a2e}
.tl-card .cimg img{width:96px;height:96px;image-rendering:pixelated}
.tl-card b{font:400 12px/1.2 var(--pixel);overflow-wrap:anywhere}
.tl-card small{font-size:10.5px;line-height:1.3;color:var(--kfg-5c3c00,#5c3c00)}
.tl-card.locked{border-style:dashed;border-color:#9ea3e0;background:#1e2156;color:#c6c9ff}
.tl-card.locked .cimg{background:#0b0c26;border-color:#3a3f8f}
.tl-card.locked .cimg img{filter:brightness(0);opacity:.6}
.tl-card.locked small{color:#9ea3e0}
.tl-unl{display:grid;gap:3px;font-size:12.5px;min-width:0;flex:1 1 140px;align-content:start}
.tl-unl div{padding:2px 6px;border:1px solid var(--bev1);background:var(--kbg-fff,#fff)}
.tl-unl .later{color:var(--mute)}
.tl-unl i{font-size:10.5px}
.tl-plate.sealed .tl-unl div{background:transparent;border-color:#3a3f8f;color:#e4e6ff}
.tl-plate.down .tl-unl div{background:var(--kbg-fff8e0,#fff8e0);border-color:var(--kbd-e6cf8c,#e6cf8c)}
.tl-debrief{border:1px solid var(--kbd-e3a7a2,#e3a7a2);background:var(--kbg-fff5f4,#fff5f4);padding:4px 8px;font-size:12.5px}
.tl-debrief b{font:400 12.5px var(--pixel);color:var(--dn)}
.tl-won{border:1px solid var(--kbd-e6cf8c,#e6cf8c);background:var(--kbg-fff8e0,#fff8e0);padding:4px 8px;font-size:12.5px}
.tl-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tl-go{font:400 16px var(--pixel);background:#a3244a;color:#fff;border:2px solid;border-color:#e98aa6 #5e0f27 #5e0f27 #e98aa6;padding:9px 18px;min-height:46px;cursor:pointer}
.tl-go:hover{background:#c22d58}
.tl-sw{display:inline-flex;gap:8px;align-items:center;font-size:12.5px;cursor:pointer;background:none;border:0;padding:2px;color:var(--ink);text-align:left}
.tl-sw i{width:34px;height:18px;border:2px solid var(--bev2);background:var(--kbg-fff,#fff);position:relative;flex:none}
.tl-sw i::after{content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;background:var(--bev2-bg,var(--bev2))}
.tl-sw[aria-checked="true"] i{background:var(--cy)}
.tl-sw[aria-checked="true"] i::after{left:17px;background:var(--indigo)}
.tl-sw:disabled{opacity:.6;cursor:default}
.tl-kbd{font-size:11.5px;color:var(--mute)}
.tl-fight{display:grid;gap:8px}
.tl-fh{display:flex;justify-content:space-between;align-items:center;gap:8px;font:400 14px var(--pixel)}
.tl-mom{letter-spacing:4px;color:var(--mute)}
.tl-stage{position:relative;background:#000;border:2px solid var(--ink-bd,var(--ink))}
.tl-stage>canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;image-rendering:pixelated}
.tl-moment{position:absolute;left:0;right:0;top:0;min-height:max(100%,320px);z-index:3;background:#0b0c26}
.tl-over{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(380px,90%);background:var(--iv);border:3px double var(--bev2);padding:10px 12px;display:grid;gap:6px;font-size:13px;z-index:4}
.tl-over .k{font:400 24px var(--pixel);color:var(--kfg-c4161c,#c4161c)}
.tl-over .k.won{color:var(--kfg-946000,#946000)}
.tl-over .row{display:flex;gap:6px;flex-wrap:wrap}
.tl-gets{display:flex;gap:4px;flex-wrap:wrap}
.tl-gets span{border:1px solid var(--kbd-e6cf8c,#e6cf8c);background:var(--kbg-fff8e0,#fff8e0);padding:1px 6px;font-size:12px}
/* TITAN-REWARDS (D-227; preview design/titan-finale-preview-v1.html): the titan V finale over the stage, once, on the kill */
.tl-stage.fin{min-height:440px}
.tl-fin{position:absolute;inset:0;z-index:5;background:rgba(20,12,36,.74);color:#fff;overflow:hidden}
.tl-fin .fl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;opacity:0;transition:opacity .45s}
.tl-fin .fl.on{opacity:1}
.tl-fin .big{font:400 clamp(64px,16vw,140px)/1 var(--pixel);color:#ffd23f;text-shadow:0 0 18px #ff9a3c,0 4px 0 #6a3a00;letter-spacing:6px;transform:scale(1.25);transition:transform .5s}
.tl-fin .fl.on .big{transform:scale(1)}
.tl-fin .sub{font:clamp(14px,2.6vw,20px) var(--pixel);margin-top:8px;color:#ffe9b0}
.tl-fin .roll{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:min(100%,640px)}
.tl-fin .roll .t{opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s;background:#0b0f24;border:1px solid #6a74b8;padding:6px 4px}
.tl-fin .roll .t.on{opacity:1;transform:none}
.tl-fin .roll img{display:block;width:100%;max-width:96px;margin:0 auto;aspect-ratio:1;background:var(--kbg-f2efe6,#f2efe6);border:2px solid #c99a2e}
.tl-fin .roll b{display:block;font:12px var(--pixel);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-fin .roll small{display:block;font-size:11px;color:#cfd6ff}
.tl-fin .server{font:clamp(16px,3vw,24px) var(--pixel);color:#bfe8ff;text-shadow:0 0 8px #3a7cff}
.tl-fin .server small{display:block;font:13px/1.5 var(--text);color:#cfd6ff;margin-top:6px}
.tl-fin .skip{position:absolute;right:10px;bottom:10px;z-index:1;min-height:40px}
@media (max-width:560px){.tl-fin .roll{grid-template-columns:repeat(3,minmax(0,1fr))}.tl-fin .skip{top:8px;bottom:auto}}
@media (prefers-reduced-motion:reduce){.tl-fin .fl,.tl-fin .roll .t,.tl-fin .big{transition:none}}
.tl-ctl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
@media (max-width:760px){
  .tl-lair{grid-template-columns:minmax(0,1fr)}
  .tl-head{grid-template-columns:48px minmax(0,1fr)}
  .tl-head .face{width:48px;height:48px}
  .tl-head .face img{width:40px;height:40px}
  .tl-head .chip{grid-column:1/-1;justify-self:start}
  .tl-go{flex:1;text-align:center}
}
/* UNIQ-1 look D · 粒 Pixel (D-211, uniques-preview-v1): Legend gold, Unique jade; names carry ✦ / ◆ so colour is never the only signal */
:root{--legend:#8a5a00;--unique:#0a7556;--named:#a8432a}
.r-legend{color:var(--legend);font-weight:700}.r-unique{color:var(--unique);font-weight:700}
.r-legend::before{content:"✦ "}.r-unique::before{content:"◆ "}
.rank .legend{background:#b8860b}.rank .unique{background:#0e8f63}
.ic.legend,.ic.unique{border:2px solid var(--ink-bd,var(--ink));padding:0}/* the bare .legend rule (chart legends) adds padding:8px 12px, which pushed the art off-centre */
.ic.legend{background:var(--kbg-fff6d6,#fff6d6);box-shadow:inset 0 0 0 2px #f2c230,inset 0 0 0 4px var(--ksh-fff,#fff),0 0 0 2px #b8860b}
.ic.unique{background:var(--kbg-e6fbf1,#e6fbf1);box-shadow:inset 0 0 0 2px #3ddc97,inset 0 0 0 4px var(--ksh-fff,#fff),0 0 0 2px #0e8f63}
.ic.legend::before,.ic.legend::after,.ic.unique::before,.ic.unique::after{content:"";position:absolute;width:10px;height:10px;pointer-events:none;z-index:1;
  background:linear-gradient(currentColor,currentColor) 4px 0/2px 10px no-repeat,linear-gradient(currentColor,currentColor) 0 4px/10px 2px no-repeat;animation:uq-twinkle 1.6s steps(1) infinite}
.ic.legend::before,.ic.legend::after{color:#ffd23f}.ic.unique::before,.ic.unique::after{color:#3ddc97}
.ic.legend::before,.ic.unique::before{top:-6px;left:-6px}.ic.legend::after,.ic.unique::after{bottom:-6px;right:-6px;animation-delay:.8s}
@keyframes uq-twinkle{0%{opacity:1;transform:scale(1)}25%{opacity:1;transform:scale(.6)}50%{opacity:0}75%{opacity:.6;transform:scale(.6)}}
.banner.legend b{color:#f2c230}.banner.unique b{color:#3ddc97}
.pillar.uniq{background:linear-gradient(to top,#3ddc97cc,#3ddc9744 60%,transparent)}
.lflash{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 80% 75%,var(--kbg-fff6c8,#fff6c8),#f2c23088 35%,transparent 65%);animation:uq-flash 1.1s ease-out forwards}
@keyframes uq-flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.uset-h{font-weight:700;color:var(--unique)}.uset-on{color:var(--unique)}.uset-off{color:var(--mute)}.flav{font-style:italic}
.slot.relic .btn{margin-left:6px}.slot.relic.rpick{cursor:pointer}.slot.relic.rpick:focus-visible{outline:3px solid var(--indigo-fg,var(--indigo));outline-offset:-3px}
.tile.uq-legend,.tile.uq-unique{position:relative;border:2px solid var(--ink-bd,var(--ink))}
.tile.uq-legend{background:var(--kbg-fff6d6,#fff6d6);box-shadow:inset 0 0 0 2px #f2c230,0 0 0 2px #b8860b}.tile.uq-unique{background:var(--kbg-e6fbf1,#e6fbf1);box-shadow:inset 0 0 0 2px #3ddc97,0 0 0 2px #0e8f63}
.tile.uq-legend::before,.tile.uq-unique::before{content:"";position:absolute;top:-6px;left:-6px;width:10px;height:10px;pointer-events:none;z-index:1;
  background:linear-gradient(currentColor,currentColor) 4px 0/2px 10px no-repeat,linear-gradient(currentColor,currentColor) 0 4px/10px 2px no-repeat;animation:uq-twinkle 1.6s steps(1) infinite}
.tile.uq-legend::before{color:#ffd23f}.tile.uq-unique::before{color:#3ddc97}
@media (prefers-reduced-motion:reduce){.tile.uq-legend::before,.tile.uq-unique::before{animation:none}}
@media (prefers-reduced-motion:reduce){.ic.legend::before,.ic.legend::after,.ic.unique::before,.ic.unique::after,.lflash,.pillar.uniq{animation:none}.lflash{display:none}}
/* UNIQ-1 (D-220): a unique's own 32 x 32 art, scaled by whole multiples (the heel card's nail marks at half size) */
.uart{display:block;flex:none;background-repeat:no-repeat;image-rendering:pixelated}/* placed like the canvas sprites it stands in for */
.slot .uart{margin:0 auto 4px}.loot .uart{filter:drop-shadow(0 0 6px var(--glow))}.eq td:first-child .uart{margin:auto}
.uart.nail{display:inline-block;vertical-align:middle;margin-right:4px}

/* D-229 (playtest bug 9, B4): phone tap targets of about 32 px or more (the raid's Ready, Reroll, Buy XP, Pause and Retreat, the
   gate keystones, mode toggles and small buttons, segmented switches such as Gear's "If worn", the titan's Let it fight); desktop unchanged */
@media (max-width:760px),(pointer:coarse){
  .btn{min-height:34px}
  .btn.small{min-height:32px}
  .seg button{min-height:32px}
  [data-key]{min-height:34px}
  .tl-sw{min-height:34px}
  /* the leftovers found in the check: the title chip, Full log, the map arrows; map plaques and the school marker keep their size
     (they sit on the map) and get an invisible 6-px hit margin instead */
  .ttl{min-height:32px;line-height:28px}
  .logmore{min-height:32px}
  .wm-arrow{min-height:32px}
  .wm-plq::after,.wm-mark.school::after{content:"";position:absolute;inset:-6px -3px}
}

/* D-242 (P-127, home-news-banner-preview-v2): the home お知らせ News banner. Desktop: a full-width art band above the columns, its
   label and controls in the left edge. Phone (≤ 720 px): one line above the fight that opens into the card. */
.news{margin:0 0 10px}
.news[hidden]{display:none}
.news .nw-line{display:none}
.news .nw-box{display:flex;height:120px;background:var(--kbg-fffff0,#fffff0);border:1px solid #8f93c9;box-shadow:inset 1px 1px 0 var(--ksh-fff,#fff);overflow:hidden}
.nw-kick{width:112px;flex:none;display:flex;flex-direction:column;justify-content:space-between;padding:8px;background:var(--kbg-cbfffe,#cbfffe);border-right:1px solid #8f93c9}
.nw-label b{font:16px/1.2 var(--pixel);font-weight:400;color:var(--kfg-1d1d3a,#1d1d3a)}
.nw-label small{display:block;color:var(--kfg-4d4d6e,#4d4d6e);font-size:13px}
.nw-unread{display:inline-block;width:8px;height:8px;border-radius:50%;background:#c2321b;margin-left:5px;vertical-align:2px}
.nw-nav{display:flex;flex-direction:column;gap:6px}
.nw-dots{display:flex;gap:2px}
.nw-dots button{width:16px;height:20px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.nw-dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--kbg-b8bbdc,#b8bbdc)}
.nw-dots button[aria-current=true] i{width:14px;border-radius:4px;background:#1b1f6b}
.nw-ctl{display:flex;gap:4px}
.nw-arr{width:30px;height:26px;padding:0;border:1px solid #666699;background:var(--kbg-fff,#fff);color:var(--kfg-1d1d3a,#1d1d3a);font:15px/1 var(--text);cursor:pointer}
.nw-body{flex:1;min-width:0}
.nw-s{display:flex;height:118px;min-width:0}
.nw-s[hidden]{display:none}
.nw-art{width:min(40%,472px);flex:none;background-position:center;background-size:cover;background-repeat:no-repeat;image-rendering:auto}
.nw-txt{flex:1;min-width:0;padding:10px 14px;display:flex;flex-direction:column;justify-content:center;gap:3px;overflow:hidden;color:var(--kfg-1d1d3a,#1d1d3a)}
.nw-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nw-when{color:var(--kfg-4d4d6e,#4d4d6e);font-size:13px}
.nw-t{font-weight:700;font-size:16px;line-height:1.3}
.nw-p{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-ul{margin:2px 0 0;padding-left:18px;font-size:14px;line-height:1.35}
.nw-chip{display:inline-flex;align-items:center;font:12px/1.2 var(--pixel);padding:2px 6px;border-radius:2px;white-space:nowrap}
.nw-chip.gm{background:#3d1257;color:#ffe08a}
.nw-chip.uq{background:#5a3300;color:#ffe9a8}
.nw-chip.ev{background:#1b1f6b;color:#ffffff}
.nw-chip.new{background:#0d5e2a;color:#ffffff}
.nw-chip.sv{background:#16407a;color:#ffffff}
.nw-link{background:none;border:0;padding:0;color:var(--kfg-2236a8,#2236a8);text-decoration:underline;font:14px var(--text);cursor:pointer;align-self:flex-start;min-height:24px}
/* D-271 (P-138): All patch notes in the 新着 header row, and the patch notes list inside the game's dialog */
.nw-hd .nw-all{margin-left:auto;min-height:0;font-size:13px}
.pn-list{max-height:min(60vh,520px);overflow:auto;margin:0 -12px;padding:0 12px}
.pn-e{border-top:1px dashed var(--kbd-d4d6e8,#d4d6e8);padding:8px 0 4px}.pn-e:first-child{border-top:0;padding-top:0}
.pn-e h4{margin:0 0 4px;font:15px var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo));display:flex;gap:8px;align-items:center}
.pn-e ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5}
/* fixes-1017: a kind chip before each patch-note line (New, UI, Balance, Fix) and their tally on the date row */
.pn-e h4{flex-wrap:wrap;row-gap:4px}.pn-sum{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
.pn-e ul.pn-ul,.nw-ul.pn-ul{list-style:none;padding-left:0;display:grid;gap:5px}
.pn-li{display:grid;grid-template-columns:4.8em minmax(0,1fr);gap:8px;align-items:start}
.pn{font:700 11px/1 var(--text);text-align:center;padding:4px 4px 3px;border:1px solid;white-space:nowrap;margin-top:1px}
.pn-sum .pn{padding:3px 5px 2px;font-weight:400}
.pn-new{color:var(--kfg-127a36,#127a36);border-color:#127a36;background:var(--kbg-e9f7ee,#e9f7ee)}
.pn-ui{color:var(--kfg-2236a8,#2236a8);border-color:#2236a8;background:var(--kbg-eef0ff,#eef0ff)}
.pn-balance{color:var(--kfg-8a5a00,#8a5a00);border-color:#8a5a00;background:var(--kbg-fff4dc,#fff4dc)}
.pn-fix{color:var(--kfg-b3261e,#b3261e);border-color:#b3261e;background:var(--kbg-fdecea,#fdecea)}
/* D-338: a patch-note line is a heading with short bullet points under it (the slide shows the heading only) */
.pn-h{font-weight:700}
.pn-e ul.pn-pts{list-style:disc;display:block;padding-left:16px;margin:2px 0 0;font-size:13px;line-height:1.45;font-weight:400}
.pn-pts li{display:list-item;margin:1px 0}
/* GM: the portrait and the plate, no key art unless the post brings a picture (D-242) */
.nw-face{width:150px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--kbg-f4f1df,#f4f1df);border-right:1px solid var(--kbd-d6d8ef,#d6d8ef)}
.nw-gm .nw-art+.nw-face{width:auto;padding:0 10px}
.nw-new .nw-art{width:min(30%,347px)}
.nw-new .nw-ul{font-size:13px;line-height:1.3}
.nw-where{font:12px/1.3 var(--pixel);color:var(--kfg-5a3300,#5a3300);background:var(--kbg-fff1c9,#fff1c9);border:1px solid #d9b25a;padding:1px 4px;white-space:nowrap}
/* stand-ins until the key art exists (news.ts HAS) */
.nw-art.stand-sv{background:linear-gradient(#0f1a4a,#33438f)}
.nw-art.stand-ev{background:linear-gradient(#2a3354,#5c6475)}
@media (max-width:720px){
  .news .nw-line{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:6px 8px;background:var(--kbg-fffff0,#fffff0);border:1px solid #8f93c9;text-align:left;font:14px/1.3 var(--text);color:var(--kfg-1d1d3a,#1d1d3a);cursor:pointer}
  .nw-lt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nw-car{font-size:12px;color:var(--kfg-4d4d6e,#4d4d6e)}
  .news .nw-box{display:none;flex-direction:column;height:auto;border-top:0}
  .news.open .nw-box{display:flex}
  .nw-kick{order:2;width:auto;flex-direction:row;padding:4px 8px;background:var(--kbg-fffff0,#fffff0);border-right:0;border-top:1px solid var(--kbd-d6d8ef,#d6d8ef)}
  .nw-label{display:none}
  .nw-nav{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .nw-dots button{width:22px;height:32px}
  .nw-arr{width:36px;height:32px}
  .nw-body{height:268px;overflow:hidden}
  .nw-s{flex-direction:column;height:100%}
  .nw-new .nw-art{width:auto}
  .nw-art{width:auto;aspect-ratio:4/1;margin:8px 8px 0}
  .nw-txt{padding:6px 8px 8px;justify-content:flex-start}
  .nw-face{width:auto;flex-direction:row;justify-content:flex-start;padding:8px 8px 0;background:none;border:0}
  .nw-gm .nw-art+.nw-face{padding:8px 8px 0}
}
/* D-242: the GM console's お知らせ tab */
.gnews-form{display:grid;gap:8px;max-width:620px}
.gnews-form textarea{font:14px/1.4 var(--text);resize:vertical}
.gnews-img{display:block;width:100%;max-width:480px;aspect-ratio:4/1;object-fit:cover;border:1px solid #8f93c9}
.gnews-cur{display:grid;gap:6px;max-width:620px}
.gnews-cur p{margin:0}
.gnews-cur button{justify-self:start}
.gnews-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* UNLOCK-INTRO (D-247): the intro dialog (look A of design/unlock-intro-preview-v1.html) and the 手引 Guide in 収集 (the D shelf) */
.modal .box.intro{max-width:460px;border:2px solid;border-color:#ffd23f #5b3714 #5b3714 #ffd23f;max-height:calc(100vh - 32px);overflow:auto}
.box.intro h3{background:#1b1f6b;color:#fffff0;border-bottom:0;font:17px var(--pixel);padding:6px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.box.intro h3 small{font:12px var(--text);color:#c6c9ff}
.inew{display:inline-block;font:700 10px/1.5 var(--text);background:#c2321b;color:#fff;padding:0 6px;margin-right:6px;vertical-align:2px}
.box.intro h3 span{color:inherit;font:inherit;margin:0;text-align:left}.box.intro h3 .inew{color:#fff;font:700 10px/1.5 var(--text)}
.ibody{padding:12px}
.ipic{background:var(--kbg-f6f7fd,#f6f7fd);border:1px solid var(--kbd-d4d6e8,#d4d6e8);padding:12px;display:grid;gap:8px;justify-items:center;min-height:120px;align-content:center}
.iprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13px}
.ipill{border:1px solid var(--bev2);background:var(--iv);color:var(--ink);padding:2px 8px;font:13px var(--pixel)}.ipill.on{background:var(--cy)}
.icrest{display:inline-grid;place-items:center;width:30px;height:30px;transform:rotate(45deg);border:2px solid #1b1f6b;background:var(--kbg-fff8e2,#fff8e2);margin:6px;flex:none}
.icrest b{transform:rotate(-45deg);font:16px var(--pixel);font-weight:400;color:var(--kfg-1b1f6b,#1b1f6b)}
.icrest.fire{border-color:#b3261e;background:var(--kbg-ffe7dc,#ffe7dc)}.icrest.fire b{color:var(--kfg-b3261e,#b3261e)}
.icrest.empty{border-style:dashed;background:var(--kbg-f3f4fb,#f3f4fb)}.icrest.empty b{color:var(--kfg-6a6a8a,#6a6a8a)}
.iarr{font:18px var(--pixel);color:var(--mute)}
.inote{font-size:12.5px;max-width:180px;text-align:center;line-height:1.35;color:var(--ink)}
.isp{flex:none}
.ittl{font:16px var(--pixel);color:var(--kfg-1b1f6b,#1b1f6b);margin:10px 0 4px}
.itxt{font-size:14px;line-height:1.55;min-height:66px;margin:0}
.idots{display:flex;gap:6px;justify-content:center;margin:8px 0 2px}.idots i{width:8px;height:8px;border:1px solid var(--bev2);background:var(--iv)}.idots i.on{background:#1b1f6b}
.ifoot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 12px 10px;flex-wrap:wrap}.ibtns{display:flex;gap:6px;flex-wrap:wrap}
.isaved{font-size:11.5px;color:var(--mute);padding:0 12px 12px}
@media (max-width:720px){.modal.intro-modal{align-items:flex-end;padding:0}.modal .box.intro{max-width:none;margin:0;border-left:0;border-right:0;border-bottom:0;max-height:88vh;padding-bottom:env(safe-area-inset-bottom)}}
.moments .learn{margin-left:auto;font:700 12px var(--text);color:var(--link);text-decoration:underline;background:none;border:0;padding:2px 4px;cursor:pointer;min-height:24px}
.chron-modes button.fresh::after{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#c2321b;margin-left:6px;vertical-align:1px}
.guide{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px;align-items:start}
.guide .toc{list-style:none;margin:0;padding:6px 0}
.guide .toc li button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:6px;background:none;border:0;border-left:3px solid transparent;padding:6px 10px;font:14px var(--pixel);color:var(--ink);text-align:left;cursor:pointer;min-height:34px}
.guide .toc li.on button{background:var(--cy);border-left-color:#1b1f6b}
.guide .toc li.sealed{display:flex;gap:8px;align-items:center;padding:5px 10px 5px 13px;color:var(--mute);font-size:12px}
.guide .toc li.sealed b{font:13px var(--pixel);font-weight:400;letter-spacing:2px}
.gpage h2{margin:0;font:22px var(--pixel);font-weight:400;color:var(--kfg-1b1f6b,#1b1f6b)}
.gpage .gwhen{font-size:12px;color:var(--mute);margin:0 0 10px}
.gpage h4{margin:12px 0 4px;font:14px var(--pixel);font-weight:400;color:var(--kfg-1b1f6b,#1b1f6b)}
.gpage p{font-size:14px}
@media (max-width:720px){.guide{grid-template-columns:minmax(0,1fr)}.guide .toc{display:flex;overflow-x:auto;gap:4px;padding:6px;scrollbar-width:none}.guide .toc li{flex:none}
  .guide .toc li button{border:1px solid var(--bev2);background:var(--iv);white-space:nowrap;padding:3px 9px}.guide .toc li.on button{border-left-color:var(--bev2)}
  .guide .toc li.sealed{border:1px dashed var(--bev2);padding:3px 9px;white-space:nowrap}}
/* D-245 (preview v3, look B): the 秘宝 slide as a gacha pick-up banner. Desktop: the 40F+ set as the main pick-up (60% of the band) and
   the 60F+ / 80F+ sets as two stacked subs; phone: the main card on top, the subs below. Text sits on plates or a dark outline. */
.nw-uq.gx{flex-direction:row}
.gx-main{position:relative;flex:0 0 60%;min-width:0;overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;image-rendering:auto;border-right:2px solid var(--kbd-fffff0,#fffff0)}
.gx-subs{flex:1;min-width:0;display:flex;flex-direction:column}
.gx-sub{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 8px;overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;image-rendering:auto}/* FANS-HD: banner art is a 3× grid (NEWS_ART_PROMPTS §1); smooth shrinking keeps its pixels even */
.gx-sub+.gx-sub{border-top:2px solid var(--kbd-fffff0,#fffff0)}
.gx-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 40%,var(--kbg-ffffff61,#ffffff61) 47%,var(--kbg-fffadc8c,#fffadc8c) 50%,var(--kbg-ffffff61,#ffffff61) 53%,transparent 60% 100%) 0 0/300% 100% no-repeat;animation:gxsweep 4.5s ease-in-out infinite}
@keyframes gxsweep{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}
.gx-spark{position:absolute;width:10px;height:10px;pointer-events:none;background:var(--kbg-ffffff,#ffffff);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:gxtw 2.4s ease-in-out infinite}
@keyframes gxtw{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.gx-burst{position:absolute;left:4px;top:-4px;width:74px;height:74px;display:grid;place-items:center;background-color:#ffc21a;background-image:radial-gradient(circle at 40% 35%,#fff36b,#ffb000 55%,#e2531b);clip-path:polygon(50% 0,58% 14%,73% 5%,74% 22%,91% 18%,85% 34%,100% 41%,88% 52%,99% 66%,82% 69%,85% 86%,69% 81%,61% 97%,50% 86%,39% 97%,31% 81%,15% 86%,18% 69%,1% 66%,12% 52%,0 41%,15% 34%,9% 18%,26% 22%,27% 5%,42% 14%)}
.gx-burst b{font:900 13px/1 var(--text);color:var(--kfg-6e0000,#6e0000);text-align:center;transform:rotate(-12deg)}
.gx-burst small{display:block;font:900 10px/1.1 var(--text);color:var(--kfg-4a0d00,#4a0d00)}
.gx-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.gx-main .gx-copy{position:absolute;left:84px;top:8px;right:120px}
.gx-title{font:900 26px/1.05 var(--text);color:#ffe27a;paint-order:stroke fill;-webkit-text-stroke:6px #170b2a;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-title.s{font-size:16px;color:#ffffff;-webkit-text-stroke:4px #170b2a}
.gx-row{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}.gx-row>*{flex:none}.gx-row .gx-lock{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* the floor row and the 期間限定 strip never wrap: the lock and the truth line shorten with … (full text in the tooltip), so the two pinned blocks can't meet */.gx-foot>*{flex:none;white-space:nowrap}.gx-foot .gx-truth{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gx-rar{font:700 12px/1 var(--text);color:#ffe27a;paint-order:stroke fill;-webkit-text-stroke:3px #170b2a;letter-spacing:1px}
.gx-lock{font:600 12px/1.3 var(--text);color:#ffffff;background:#170b2ae0;padding:2px 6px;border-radius:2px}
.gx-hero{position:absolute;right:22px;top:11px;display:grid;place-items:center}
.gx-hero::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,var(--kbg-fff4bef2,#fff4bef2) 0 30%,#ffd65a8c 48%,transparent 70%)}
.gx-hero .uart{position:relative;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 2px #00000099)}
.gx-hero .x2{display:none}
.gx-foot{position:absolute;left:8px;bottom:6px;right:8px;display:flex;gap:4px;align-items:center;flex-wrap:nowrap;min-width:0}
.gx-lim{font:700 12px/1 var(--text);padding:3px 7px;border-radius:2px;background:#c3002f;color:#ffffff}
.gx-left{font:700 12px/1 var(--text);padding:3px 7px;border-radius:2px;background:#170b2a;color:#ffe27a}
.gx-truth{font:600 12px/1.3 var(--text);padding:3px 7px;border-radius:2px;background:#170b2ad9;color:#ffffff}
.gx-truth.ph{display:none}
.gx-pcs{display:flex;gap:2px;padding:2px;background:var(--kbg-fffff0db,#fffff0db);border-radius:2px}
.gx-pcs .uart.off{opacity:.4;filter:grayscale(1)}
.gx .nw-where{font:12px/1.3 var(--text);font-weight:700}
.stand-serious{background:linear-gradient(135deg,var(--kbg-ffe7a3,#ffe7a3),#e2875a 60%,#b0402c)}
.stand-fans{background:linear-gradient(135deg,var(--kbg-d9f4f7,#d9f4f7),var(--kbg-7cc3e0,#7cc3e0) 55%,#2e6fa8)}
/* D-302 IQ-2: Frieren has no banner art yet (news.ts setArt), so the band draws this stand-in: silver-white to her violet night, the Zoltraak ramp */
.stand-frieren{background:linear-gradient(135deg,var(--kbg-e4d0ff,#e4d0ff),#8a5cf6 55%,#2a1f5c)}
@media (prefers-reduced-motion:reduce){.gx-shine,.gx-spark{animation:none}.gx-shine{opacity:0}}
@media (max-width:720px){
  .nw-uq.gx{flex-direction:column}
  .gx-main{flex:0 0 150px;border-right:0;border-bottom:2px solid var(--kbd-fffff0,#fffff0)}
  .gx-burst{transform:scale(.8);transform-origin:0 0}
  .gx-main .gx-copy{left:72px;top:10px;right:100px}
  .gx-title{font-size:20px;-webkit-text-stroke:5px #170b2a}
  .gx-hero{right:20px;top:24px}.gx-hero .x3{display:none}.gx-hero .x2{display:inline-block}
  .gx-foot .gx-truth{display:none}
  .gx-truth.ph{display:block;flex:none;margin:2px 8px 4px;align-self:flex-start}
  .gx-main{flex-basis:140px}
  .gx-subs{flex:1}
  .gx-sub .gx-title.s{font-size:15px}
}
/* D-262 (P-135, banner-peek-preview-v1) Fit: the band takes its tallest slide's height instead of cutting text with …. The slides stack in
   one grid cell and a hidden one keeps its room (invisible), so the band holds one height and doesn't jump as it turns. */
.news{position:relative}
.news .nw-box{height:auto;min-height:120px}
.nw-body{display:grid}
.nw-body>.nw-s{grid-area:1/1;height:auto;min-height:118px}
.nw-body>.nw-s[hidden]{display:flex!important;visibility:hidden}
.nw-txt{overflow:visible}
.gx-main{display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding:8px 120px 6px 84px;min-height:118px}
.gx-main .gx-copy,.gx-foot{position:static}
.gx-foot{flex-wrap:wrap;margin-left:-76px}
.gx-row{flex-wrap:wrap}
.gx-title{white-space:normal;overflow:visible;text-wrap:balance}
.gx-row .gx-lock,.gx-foot>*,.gx-foot .gx-truth{white-space:normal;overflow:visible;flex:0 1 auto}
.gx-sub{flex-wrap:wrap;padding:5px 8px;align-content:center}
.gx-sub .gx-copy{flex:1 1 auto}
/* D-262 Peek: every piece on the 秘宝 slide is a button that opens its card */
.gx-hero{border:0;padding:0;background:none;cursor:pointer}
.gx-rar button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:2px 1px;cursor:pointer;min-width:14px}
.gx-pcs button{display:block;border:0;padding:0;background:none;cursor:pointer}
button.gx-lock{border:0;cursor:pointer}
.nw-uq [data-peek]:hover{filter:brightness(1.12)}
.nw-uq [data-peek]:focus-visible{outline:2px solid #ffd23f;outline-offset:2px}
.pk{background:var(--kbg-fffff0,#fffff0);color:var(--kfg-1d1d3a,#1d1d3a);border:2px solid;border-color:var(--kbd-ccccff,#ccccff) #666699 #666699 var(--kbd-ccccff,#ccccff);box-shadow:0 8px 24px #1b1f6b40;font:13px/1.45 var(--text);display:grid;gap:8px;padding:12px}
.pk:focus{outline:none}
.pk-pop{position:absolute;z-index:30;width:min(380px,100%)}
.pk-pop::before{content:"";position:absolute;top:-9px;left:calc(var(--ax,40px) - 7px);width:14px;height:14px;background:inherit;border-left:2px solid var(--kbd-ccccff,#ccccff);border-top:2px solid var(--kbd-ccccff,#ccccff);transform:rotate(45deg)}
.pk-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start}
.pk-art{width:72px;height:72px;display:grid;place-items:center;background:var(--kbg-e6fbf1,#e6fbf1);box-shadow:inset 0 0 0 2px #3ddc97,0 0 0 2px #0e8f63;margin:2px}
.pk-nm{min-width:0;display:grid;justify-items:start;gap:1px}
.pk-name{font:900 17px/1.2 var(--text);color:var(--kfg-0b6b4a,#0b6b4a)}
.pk-en,.pk-meta{font-size:12px;color:var(--kfg-4d4d6e,#4d4d6e)}
.pk-held{font:700 12px/1.3 var(--text);padding:2px 6px;margin-top:3px;border:1px solid var(--kbd-b8bbdc,#b8bbdc);background:var(--kbg-fff,#fff)}
.pk-held.on{border-color:#0e8f63;color:var(--kfg-0b6b4a,#0b6b4a);background:var(--kbg-e6fbf1,#e6fbf1)}
.pk-x{border:1px solid #666699;background:var(--kbg-fff,#fff);color:var(--kfg-1d1d3a,#1d1d3a);width:32px;height:32px;cursor:pointer;font:16px/1 var(--text)}
.pk-src{font:700 12.5px/1.4 var(--text);padding:5px 8px;background:var(--kbg-fff1c9,#fff1c9);border:1px solid #d9b25a;color:var(--kfg-5a3300,#5a3300)}
.pk-src.lock{background:var(--kbg-f1f0f7,#f1f0f7);border-color:var(--kbd-b8bbdc,#b8bbdc);color:var(--kfg-1d1d3a,#1d1d3a);font-weight:400}
.pk-src.relic{background:var(--kbg-f3ecff,#f3ecff);border-color:#9a7ad1;color:var(--kfg-3d1257,#3d1257)}
.pk table{border-collapse:collapse;width:100%}
.pk th{font:700 11.5px/1.3 var(--text);text-align:left;color:var(--kfg-4d4d6e,#4d4d6e);padding:2px 0 3px;border-bottom:1px solid var(--kbd-d6d8ef,#d6d8ef)}
.pk td{padding:3px 0;border-bottom:1px dotted var(--kbd-d6d8ef,#d6d8ef);font-variant-numeric:tabular-nums}
.pk .flav{font-style:italic;color:var(--kfg-4d4d6e,#4d4d6e)}
.pk .uset-h{font-weight:700}
.pk .uset-off{color:var(--kfg-4d4d6e,#4d4d6e)}
.pk-strip{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pk-strip button{padding:2px;border:2px solid transparent;background:var(--kbg-fff,#fff);cursor:pointer;display:grid;place-items:center;min-width:40px;min-height:40px}
.pk-strip button[aria-current=true]{border-color:#1b1f6b}
.pk-strip .uart.off{opacity:.45;filter:grayscale(1)}
.pk-strip small{font-size:11.5px;color:var(--kfg-4d4d6e,#4d4d6e);margin-left:auto}
/* the phone: a bottom sheet with the Gear sheet's shade and order */
.pk-shade{position:fixed;inset:0;z-index:40;background:#05061166}
.pk-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:82vh;max-height:82dvh;overflow:auto;border-width:3px 0 0;border-top-style:double;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.pk-grab{width:44px;height:4px;background:var(--kbg-b8bbdc,#b8bbdc);border-radius:2px;justify-self:center;margin-top:-4px}
@media (max-width:720px){
  .nw-body{height:auto}
  .nw-body>.nw-s{min-height:268px}
  .gx-main{flex:none;min-height:140px;padding:10px 100px 6px 72px}
  /* QOL-10 (banner-phone-preview-v1): the patch notes set the band's height on a phone (603px measured), which stretched the 60F+ and
     80F+ banners to 217px; the notes show 6 lines (全部更新記錄 → has the rest) and the two banners keep their 4:1 art shape */
  .nw-new .pn-ul{max-height:calc(6 * 1.45em);overflow:hidden;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
  .gx-subs{flex:none}.gx-sub{flex:none;aspect-ratio:4/1}
  .gx-foot{margin-left:-64px}
  .gx-rar button{padding:4px 2px;min-width:20px}
}
@media (prefers-reduced-motion:reduce){.nw-uq [data-peek]:hover{filter:none}}
/* GM-1 (D-249, gm-powers-preview-v2): the event ribbon and the server quest on Adventure, the 🎁 gift tag, event frames, the support view
   banner, and the GM console's Events / Quests / Grants / Gifts tabs. */
.evrib{display:flex;align-items:center;gap:8px;padding:6px 10px;margin:0 0 8px;background:var(--kbg-d6f1ee,#d6f1ee);border:1px solid #3f9a92;color:var(--kfg-0a3f3f,#0a3f3f);font-size:12.5px}
.evrib b{font:14px var(--pixel);font-weight:400}.evrib .small{font-size:11.5px}
.evrib .tm{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.evrib.soon{background:var(--kbg-eef8f7,#eef8f7);border-style:dashed;color:var(--kfg-1f4f4f,#1f4f4f)}
.gquest{margin:8px 0 0;background:var(--iv);color:var(--ink)}.gquest h3{color:var(--ink)}.gquest .mute{color:var(--mute)}.gquest .qn{font:14px var(--pixel)}
.gquest .small,.gmc-root .small{font-size:12px}
.qbar{height:14px;background:var(--kbg-e3e5f2,#e3e5f2);border:1px solid var(--kbd-b8bcd8,#b8bcd8);position:relative;overflow:hidden;margin:6px 0 4px}
.qbar>b{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#3c6be0,#6c8ff0)}
.gtag{display:inline-block;font:700 10.5px var(--text);padding:0 5px;border:1px solid #b9a3ec;color:var(--kfg-4a2fa0,#4a2fa0);background:var(--kbg-f1ebff,#f1ebff);white-space:nowrap;margin-left:6px;vertical-align:2px}
.tag.gift{color:var(--kfg-4a2fa0,#4a2fa0)}
.icard{border:2px solid var(--ink-bd,var(--ink));background:var(--kbg-fff,#fff);color:var(--ink);padding:8px 10px;font-size:12.5px;margin:6px 0}
.icard .nm{font:15px var(--pixel)}.icard .nm.rare{color:var(--kfg-a5520a,#a5520a)}.icard .nm.magic{color:var(--kfg-2236a8,#2236a8)}.icard .nm.legend{color:var(--kfg-8a5a00,#8a5a00)}.icard .nm.unique{color:var(--kfg-127a36,#127a36)}
.icard ul{margin:4px 0 0;padding-left:16px}
[data-frame]{box-shadow:0 0 0 3px var(--fb),0 0 0 5px var(--fa)}
.pgrid.frames{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.pgrid.frames button>span{margin:6px}
.supribbon{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:#2d1d63;color:#f2ecff;font-size:13px;margin:0 0 10px}
.supribbon b{font:15px var(--pixel);font-weight:400}
.supribbon .ro{margin-left:auto;font:700 11px var(--text);border:1px solid #b9a3ec;padding:1px 7px}
.supribbon .btn{color:var(--ink)}
.gmc-root .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
.gmc-root .field{display:grid;gap:3px;font-size:12.5px;color:var(--mute);margin:0 0 8px}
.gmc-root .field .sel,.gmc-root .field input,.gmc-root .field select{width:100%;min-height:34px;box-sizing:border-box}
.gmc-root .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.gmc-root .err{color:var(--kfg-b3261e,#b3261e);margin:6px 0}
.gmc-root .okmsg{color:var(--kfg-127a36,#127a36);font-weight:700;margin:8px 0 0}
.gmc-root .cat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:10px}
.gmc-root .cat button{text-align:left;background:var(--kbg-fff,#fff);border:2px solid var(--bev2);padding:8px;cursor:pointer;color:var(--ink);font:12.5px var(--text);min-height:44px}
.gmc-root .cat button b{display:block;font:14px var(--pixel);font-weight:400;color:var(--kfg-0d6b6b,#0d6b6b)}
.gmc-root .cat button.on{border-color:#0d6b6b;background:var(--kbg-e4f6f4,#e4f6f4);box-shadow:0 0 0 2px var(--ksh-9fd8d2,#9fd8d2)}
.gmc-root .budget{display:flex;gap:2px;margin:4px 0 2px}
.gmc-root .budget i{flex:1;height:12px;background:var(--kbg-e3e5f2,#e3e5f2);border:1px solid var(--kbd-b8bcd8,#b8bcd8)}
.gmc-root .budget i.u{background:#0d6b6b;border-color:#0a4f4f}.gmc-root .budget i.p{background:var(--kbg-8fd3cc,#8fd3cc);border-color:#3f9a92}
.gmc-root .sched{list-style:none;margin:0;padding:0;font-size:12.5px}
.gmc-root .sched li{display:flex;gap:8px;align-items:center;padding:6px 10px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0);flex-wrap:wrap}
.gmc-root .sched li:first-child{border-top:0}
.gmc-root .sched li .t{flex:1;min-width:180px}.gmc-root .sched li .t b{font:14px var(--pixel);font-weight:400}.gmc-root .sched li .t div{color:var(--mute);font-size:11.5px}
.gmc-root .sched li.run{background:var(--kbg-e4f6f4,#e4f6f4)}.gmc-root .sched li.past{opacity:.75}
.gmc-root .st{font:700 10.5px var(--text);padding:0 5px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);vertical-align:2px}
.gmc-root .st.running{border-color:#0d6b6b;color:var(--kfg-0d6b6b,#0d6b6b)}.gmc-root .st.won{border-color:#127a36;color:var(--kfg-127a36,#127a36)}
.gmc-root .lockd{font-size:12px;color:var(--mute);padding:2px 8px;background:var(--kbg-eef0f8,#eef0f8);border:1px solid var(--bev2)}
.gmc-root .qn{font:16px var(--pixel)}
.gmc-root table.share{width:100%;border-collapse:collapse;font-size:12.5px}
.gmc-root table.share td{padding:4px 10px;border-top:1px solid var(--kbd-e1e3f0,#e1e3f0)}.gmc-root table.share td.n{text-align:right;font-variant-numeric:tabular-nums}
.gmc-root .sb{height:8px;background:#6c8ff0}
.gmc-root .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:10px}
.gmc-root .tile{display:grid;text-align:left;background:var(--kbg-fff,#fff);border:2px solid var(--bev2);padding:0;cursor:pointer;color:var(--ink);font:12px var(--text)}
.gmc-root .tile .art{height:40px;background:var(--kbg-e3e5f2,#e3e5f2)}.gmc-root .tile .lb{padding:5px 7px}.gmc-root .tile .lb b{display:block;font:13px var(--pixel);font-weight:400}
.gmc-root .tile.on{border-color:var(--indigo-fg,var(--indigo));box-shadow:0 0 0 2px var(--ksh-9db0ea,#9db0ea)}
.gmc-root .tile.no{opacity:.5;cursor:not-allowed}
.gmc-root .seg2{display:flex;margin:0 0 10px}
.gmc-root .seg2 button{flex:1;font:13px var(--pixel);min-height:36px;background:var(--kbg-fff,#fff);border:1px solid var(--bev2);color:var(--ink);cursor:pointer}
.gmc-root .seg2 button+button{border-left:0}.gmc-root .seg2 button.on{background:var(--indigo);color:var(--iv-fg,var(--iv))}
.gmc-root .keep{display:flex;gap:8px;align-items:flex-start;margin:8px 0 4px;font-size:12.5px}.gmc-root .keep input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--indigo)}
@media (max-width:900px){.gmc-root .split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.gmc-root .row2,.gmc-root .cat{grid-template-columns:minmax(0,1fr)}}
/* D-259 wardrobe + figure pick */
.figure{display:grid;gap:10px;margin:6px 0}.figpick{margin:10px 0}
.fbodies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fbody{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;min-height:44px;font:700 13px var(--text);color:var(--ink);background:var(--iv);border:2px solid var(--bev2);cursor:pointer}
.fbody canvas{width:96px;max-width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated}
.fbody.sel{border-color:var(--indigo-fg,var(--indigo));background:var(--cy);box-shadow:inset 0 0 0 2px var(--indigo-fg,var(--indigo))}
.fbody:disabled{opacity:.6;cursor:default}
.fsw{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin:6px 0}
.flab{font:700 13px var(--text);color:var(--ink);min-width:7em;margin:0}
/* FIX-UI: scoped to the swatch row (.fsw); unscoped, these rules shrank every Forge tab (.fchip) to a 34 px square */
.fsw .fchips,.fpieces{display:flex;gap:6px;flex-wrap:wrap}
.fsw .fchip{width:34px;height:34px;padding:0;border:2px solid var(--bev2);cursor:pointer}
.fsw .fchip.sel{outline:3px solid var(--indigo-fg,var(--indigo));outline-offset:1px}
.fsw .fchip.own{background:repeating-linear-gradient(45deg,var(--kbg-fff,#fff) 0 4px,var(--kbg-d4d6e6,#d4d6e6) 4px 8px)}
.fsw .fchip:disabled{opacity:.55;cursor:default}
.wtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}/* NAMES-1: four tabs wrap on a phone */
.wtabs button{font:700 13px var(--text);min-height:36px;padding:0 14px;color:var(--ink);background:var(--iv);border:2px solid var(--bev2);cursor:pointer}
.wtabs button.on{background:var(--indigo);color:var(--iv-fg,var(--iv));border-color:var(--indigo-fg,var(--indigo))}
/* WARDROBE-UI (wardrobe preview: B closet grid + D album tab + C's Random look): the Appearance and Collection tabs */
.closet{display:grid;gap:10px}
.cl-hero{display:flex;gap:12px;align-items:center;padding:10px;background:var(--kbg-eef0f8,#eef0f8);border:2px solid var(--bev2)}
.cl-ped{flex:none;padding:2px 4px 0;background:radial-gradient(60% 16% at 50% 90%,#1d1d3a40 0,#1d1d3a00 100%)}
.cl-ped canvas{width:144px;height:144px;image-rendering:pixelated}
.cl-who{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.cl-who b{font:18px var(--pixel);font-weight:400;color:var(--ink);overflow-wrap:anywhere}
.cl-who small{font-size:12.5px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.cl-who .cl-count{color:var(--mute)}
.cl-who .cl-random{margin-top:6px;min-height:40px;padding:0 16px}
.cl-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.cl-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:2px 4px;font:700 13px/1.15 var(--text);color:var(--ink);background:var(--iv);border:2px solid var(--bev2);cursor:pointer}
.cl-tabs button small{font-weight:400;font-size:11px;color:var(--mute)}
.cl-tabs button.on{background:var(--indigo);color:var(--iv-fg,var(--iv));border-color:var(--indigo-fg,var(--indigo))}
.cl-tabs button.on small{color:inherit}
.cl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.cl-grid.cols{display:block}
.cl-grid.cols .fsw{margin:0;padding:6px 0;border-bottom:1px dashed var(--bev2)}
.cl-grid.cols .fbodies{margin:4px 0 8px}
.cl-sw{margin-top:6px}
.ctile,.acard{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 4px 8px;font:inherit;color:var(--ink);background:var(--iv);border:2px solid var(--bev2);cursor:pointer;text-align:center}
.ctile canvas,.acard canvas{width:96px;max-width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated}
.ctile .nm{font-size:12px;line-height:1.2;font-weight:700;overflow-wrap:anywhere}
.ctile:hover:not(:disabled),.acard:hover:not(:disabled){border-color:var(--indigo-fg,var(--indigo))}
.ctile.on,.acard.on{background:var(--cy);border-color:var(--indigo-fg,var(--indigo));box-shadow:inset 0 0 0 2px var(--indigo-fg,var(--indigo))}
.ctile:disabled,.acard:disabled{cursor:default}
.ctile .worn,.acard .worn{position:absolute;top:4px;left:4px;padding:3px 5px;font:normal 700 10px/1 var(--text);background:var(--indigo);color:var(--iv-fg,var(--iv))}
.ctile.dark,.acard.dark{background:#1e1f33;border:2px dashed #5a5c80;color:#e2e3f2}
.ctile.dark canvas,.acard.dark canvas{filter:brightness(0) invert(.16) drop-shadow(0 0 1px #9a9cd8)}
.ctile .q,.acard .q{font:14px var(--pixel);font-weight:400;color:#e2e3f2;letter-spacing:2px}
.ctile .src{font-size:10.5px;line-height:1.25;color:#c8cae4}
.fnote{flex-basis:100%;font-size:11.5px;color:var(--mute)}
.fsw .fchip.mine{position:relative}
.fsw .fchip.mine::after{content:"";position:absolute;right:-6px;top:-6px;width:10px;height:10px;border-radius:50%;background:#f2c230;border:2px solid #1d1d3a}
@media (min-width:760px){.closet{grid-template-columns:220px minmax(0,1fr);align-items:start}.cl-hero{flex-direction:column;text-align:center}.cl-who{align-items:center}
  .cl-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}}
.album{display:grid;gap:10px}
.al-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.al-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:46px;padding:4px;font:700 12.5px/1.15 var(--text);color:var(--ink);background:var(--iv);border:2px solid var(--bev2);cursor:pointer;text-align:center}
.al-tab small{font-weight:400;font-size:11px;color:var(--mute)}
.al-tab.done small{color:var(--up);font-weight:700}
.al-tab.on{background:var(--indigo);color:var(--iv-fg,var(--iv));border-color:var(--indigo-fg,var(--indigo))}
.al-tab.on small{color:inherit}
.al-page{position:relative;min-height:240px;padding:12px;background:var(--kbg-eef0f8,#eef0f8);border:2px solid var(--bev2);overflow:hidden}
.al-page.done{padding-bottom:96px}
.al-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.al-title{min-width:0}
.al-title .jp{display:block;font:13px var(--pixel);color:var(--mute)}
.al-title h4{margin:0;font:18px/1.2 var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo))}
.al-count{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.al-count .cosmk,.acard .cosmk{margin-left:0}
.cosmk-sum{font:700 12px var(--text);color:var(--ink)}
.al-me{flex:none;display:flex;flex-direction:column;align-items:center;font-size:10.5px;color:var(--mute)}
.al-me canvas{width:72px;height:72px;image-rendering:pixelated}
.al-how{margin:8px 0 0;font-size:12px;color:var(--mute)}
.al-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.acard{gap:4px;padding:8px 6px 10px}
.acard .pic{display:block}
.acard .txt{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.acard .aslot{font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.acard .nm{font-size:13px;line-height:1.2;overflow-wrap:anywhere}
.acard .hint{font-size:11px;line-height:1.25;color:var(--mute)}
.acard .by{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px;padding-top:4px;border-top:1px dashed var(--bev2);font-size:11px;color:var(--mute)}
.acard.dark .aslot,.acard.dark .hint,.acard.dark .by,.acard.dark .cosmk{color:#c8cae4}
.al-stamp{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:center;padding:6px 12px;transform:rotate(-10deg);border:4px double #c2321b;color:var(--kfg-c2321b,#c2321b);background:var(--kbg-fffff0e6,#fffff0e6);pointer-events:none}
.al-stamp b{font:17px/1.1 var(--pixel);font-weight:400;letter-spacing:.08em}
.al-stamp small{font-size:11px;font-weight:700}
.al-flip{display:flex;justify-content:center;align-items:center;gap:12px;font-size:12.5px;color:var(--mute)}
.al-flip .btn{min-width:44px;min-height:40px}
@media (min-width:760px){.al-tabs{grid-template-columns:repeat(9,minmax(0,1fr))}.al-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.modal .box.figbox{max-width:460px;max-height:calc(100vh - 32px);overflow:auto;border:2px solid;border-color:#ffd23f #5b3714 #5b3714 #ffd23f}
.box.figbox h3{background:#1b1f6b;color:#fffff0;border-bottom:0;font:17px var(--pixel);padding:6px 12px}
.box.figbox h3 span{color:inherit;font:inherit;margin:0;text-align:left}
/* POWER-1 (D-261, power-preview-v1): the 戰鬥值 scouter readout (home Status, profile banner, ranking, equipment "If worn") */
.scout{display:inline-flex;align-items:baseline;gap:8px;max-width:100%;padding:3px 9px 2px;background:linear-gradient(160deg,#9df5b5,#4fd47a);color:#062b14;border:2px solid #1f6e3c;box-shadow:inset 0 0 0 1px #d9ffe4;font-family:var(--pixel);line-height:1;white-space:nowrap}
.scout .k{font-size:11px;letter-spacing:1px}.scout .v{font-size:22px;font-variant-numeric:tabular-nums}
.scout.sm{margin-top:6px}.scout.sm .v{font-size:16px}.scout.xs{padding:1px 5px;border-width:1px;gap:5px}.scout.xs .k{display:none}.scout.xs .v{font-size:13px}
@keyframes scoutTick{0%{filter:brightness(1.45)}100%{filter:none}}.scout.live{animation:scoutTick 1.2s ease-out 1}
@media (prefers-reduced-motion:reduce){.scout.live{animation:none}}
/* POWER-STRIP (direction A): no second frame; 10px clear of the stat table below (it sat on the table's line) */
.pwr{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;margin:0 10px 10px;padding:6px 8px;background:linear-gradient(90deg,rgba(79,212,122,.18),rgba(79,212,122,0))}.pwr:empty{display:none}
.pwr .side{display:grid;justify-items:end;line-height:1.35;text-align:right}
.pwr .row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}.pwr .pwup{font:12px var(--pixel);font-weight:400;color:var(--kfg-1d6b3a,#1d6b3a)}.pwr small{font-size:11px;color:var(--mute)}
.dl.pdl b{display:block;font:14px var(--pixel);font-weight:400}.dl.pdl small{display:block;font:10.5px var(--text);color:var(--mute)}
.rladder td.v .pnow{display:block;font-size:10.5px;color:var(--mute)}
/* D-259 phase 2: the 衣装 marker (found x/y and a pity bar, no rates) and the Wardrobe's dark pieces */
.cosmk{display:inline-flex;align-items:center;gap:5px;margin-left:6px;font:700 11px var(--text);color:var(--ink);white-space:nowrap;vertical-align:middle}
.cosmk .cosbar{display:inline-block;width:34px;height:4px;background:var(--bev2-bg,var(--bev2));overflow:hidden}
.cosmk .cosbar b{display:block;height:100%;background:#8a50d0;transform-origin:left}
.cosmk.done .n{color:var(--mute)}
.btn.small.cosdark{display:inline-flex;flex-direction:column;align-items:center;gap:1px;background:#2a2a3a;color:#d4d4e2;border-color:#44445a;opacity:1;cursor:default}
.btn.small.cosdark small{font:400 10px var(--text);color:#b4b4c8}
.banner.look{border-color:#d9a7ff #4e2484 #4e2484 #d9a7ff}
.banner.look .lookfig{display:block;margin:0 auto 4px;image-rendering:pixelated}/* the hero wearing the new piece, 2x */
.cosmk .ms{font:400 10px var(--text);color:var(--mute)}/* the gate helm milestone note */
/* GRUDGE-1 (D-266, grudge v0.1 §6; grudge-preview-v1 rev 5): the hosted duel screens. Dark arena pieces (.gstage, .gvs, .gflex,
   .gsticker, .gstamp, .gko) keep their colours in every skin (tools/skin-tokens.mjs KEEP). */
.gmodal{z-index:60}
.gmodal .box.gsheet{max-width:600px}.gmodal .box.greplay{max-width:780px}.gmodal .box.gdset{max-width:500px}.gmodal .box.gshare{max-width:460px}
.gmodal .box{max-height:calc(100vh - 32px);overflow:auto;padding:0}
.ghead{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-bottom:1px solid #666699;background:var(--kbg-cbfffe,#cbfffe)}
.ghead h3{margin:0;font:18px/1.2 var(--pixel);font-weight:400;color:var(--kfg-1b1f6b,#1b1f6b)}.ghead .gdx{margin-left:auto}
.gbody{display:grid;gap:12px;padding:12px}
.gvs{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;padding:14px 12px;background:#11122e center 38%/cover no-repeat;image-rendering:pixelated;border-bottom:3px solid #e8c45a}
.gvs::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#11122e8c,#11122e33 50%,#11122e8c)}
.gvs>*{position:relative}
.gside{display:flex;gap:10px;align-items:center;min-width:0}.gside.gsr{flex-direction:row-reverse;text-align:right}
.gbust{flex:none;border:2px solid #e8c45a;background:#1b1d48;line-height:0}
.gid{display:grid;gap:3px;min-width:0;color:#e9e9ff}.gside.gsr .gid{justify-items:end}
.gid b{font:22px/1 var(--pixel);font-weight:400;text-shadow:2px 2px 0 #000}.gid small{font-size:12px;text-shadow:1px 1px 0 #000}
.gmid{display:grid;justify-items:center;font:20px/1 var(--pixel);color:#e8c45a;text-shadow:2px 2px 0 #000}.gmid img{width:48px;height:48px}
.gcmp{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;background:var(--kbg-fffff0,#fffff0)}
.gcmp td{background:none}
.gcmp thead th{font:15px var(--pixel);font-weight:400;color:var(--kfg-1b1f6b,#1b1f6b);padding:0 8px 4px;border-bottom:2px solid #666699}
.gcmp thead th:first-child{text-align:left}.gcmp thead th:last-child{text-align:right}
.gcmp td,.gcmp tbody th{padding:6px 8px;border-bottom:1px solid var(--kbd-ccccff,#ccccff);vertical-align:middle}
.gcmp td{width:42%;font:16px var(--pixel)}.gcmp td:first-child{text-align:left}.gcmp td:last-child{text-align:right}
.gcmp tbody th{font:12px var(--text);color:var(--kfg-4d4d6e,#4d4d6e);text-align:center;white-space:nowrap;font-weight:400;background:none}
.gpx{image-rendering:pixelated}
.gmix{display:grid;gap:2px}.gcmp td:last-child .gmix{justify-items:end}
.gdbar{display:inline-flex;width:100%;max-width:140px;height:8px;border:1px solid #666699;background:var(--kbg-eef0f8,#eef0f8)}.gdbar i{display:block;height:100%}
.gdbar i.gk-fire,.gel.gk-fire{background:#d9480f}.gdbar i.gk-ice,.gel.gk-ice{background:#1f7fb8}.gdbar i.gk-lightning,.gel.gk-lightning{background:#9a6b00}
.gdbar i.gk-poison,.gel.gk-poison{background:#4f7f1f}.gdbar i.gk-holy,.gel.gk-holy{background:#8a6d00}.gdbar i.gk-physical,.gel.gk-phys{background:#5b5b78}
.gmix small{font:11px var(--text);color:var(--kfg-4d4d6e,#4d4d6e)}
.gel{display:inline-block;font:12px/1.5 var(--pixel);color:#fff;padding:0 6px}
.gaff{position:relative;display:inline-flex;align-items:center;gap:4px;cursor:help}.gaff .gdi{font-size:12px;color:var(--kfg-4d4d6e,#4d4d6e)}
.gaff:focus-visible{outline:3px solid #946000;outline-offset:2px}
.gtip{position:absolute;bottom:calc(100% + 8px);left:0;z-index:5;width:220px;display:none;gap:6px;justify-items:center;padding:8px 10px;background:var(--kbg-fffff0,#fffff0);color:var(--kfg-1d1d3a,#1d1d3a);border:1px solid #666699;box-shadow:3px 3px 0 #1d1d3a40;font:12px/1.45 var(--text);text-align:left}
.gcmp td:last-child .gtip{left:auto;right:0}
.gaff:hover .gtip,.gaff:focus .gtip,.gaff[data-open] .gtip{display:grid}
.gtw svg{width:120px;height:120px}
.grules{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.godds{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;border:1px solid #1f6e3c;background:var(--kbg-f2fff5,#f2fff5);padding:8px 10px}
.godds b{font:22px var(--pixel);font-weight:400;font-variant-numeric:tabular-nums}
.gmeter{flex:1 1 160px;height:10px;background:var(--kbg-d6e9dc,#d6e9dc);border:1px solid #1f6e3c;position:relative}.gmeter i{position:absolute;inset:0 auto 0 0;background:#4fd47a}
.grec{font-variant-numeric:tabular-nums;margin:0}
.gcta{width:100%;justify-content:center;min-height:44px;display:inline-flex;align-items:center;gap:6px}.gcta img,.gcall img{width:24px;height:24px}
.gcall{display:inline-flex;align-items:center;gap:6px}
/* the replay stage: the arena canvas with every word and number over it */
.gstage{position:relative;aspect-ratio:2/1;width:100%;overflow:hidden;background:#11122e;color:#e9e9ff}
.gstage canvas{position:absolute;inset:0;width:100%;height:100%}
.gstage .gdbars{position:absolute;top:6px;left:10px;right:10px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:start;z-index:3}
.gstage .gdb{display:grid;gap:3px;min-width:0}
.gstage .gnm{font:15px/1.1 var(--pixel);display:flex;justify-content:space-between;gap:6px;white-space:nowrap;overflow:hidden;text-shadow:1px 1px 0 #000}
.gstage .gdb.gsr .gnm{flex-direction:row-reverse}.gstage .gnm>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.gstage .gnm small{flex:none}/* a long name (the old champ) gives way; the HP % stays whole */.gstage .gnm small,.gstage .gform{font:11px var(--text);color:#e9e9ff;text-shadow:1px 1px 0 #000}.gstage .gdb.gsr .gform{text-align:right}
.gstage .ghp{height:12px;background:#2b2d5c;border:1px solid #000;position:relative}
.gstage .ghp i{position:absolute;inset:0;transform-origin:left;transition:transform .25s}.gstage .gdb.gsr .ghp i{transform-origin:right}
.gstage .ghp .glag{background:#f5e6a3}.gstage .gdb.gsl .ghp .gfill{background:#e8590c}.gstage .gdb.gsr .ghp .gfill{background:#5fb7dc}
.gstage .gclk{display:grid;justify-items:center;gap:2px}
.gstage .gclock{font:20px/1 var(--pixel);font-weight:400;font-variant-numeric:tabular-nums;background:#000;color:#e9e9ff;padding:3px 7px;border:1px solid #e8c45a}
.gstage .gchip{font:11px var(--text);background:#e8c45a;color:#2a2000;padding:0 6px;white-space:nowrap}
.gstage .gdmg{position:absolute;font:16px var(--pixel);z-index:4;pointer-events:none;animation:gup 1s ease-out forwards;text-shadow:1px 1px 0 #000,-1px -1px 0 #000;white-space:nowrap;color:#fff}
.gstage .gdmg.gcrit{font-size:22px;color:#ffd75e}.gstage .gdmg.gdot{color:#ff9d5c}.gstage .gdmg.gheal{color:#7dffa0}.gstage .gwx{font-size:11px;color:#ffb27a;margin-left:3px}
@keyframes gup{from{transform:translateY(0);opacity:1}to{transform:translateY(-40px);opacity:0}}
.gstage .gshout{position:absolute;top:22%;z-index:5;font:clamp(16px,3.4vw,28px)/1.1 var(--pixel);background:#fffff0;color:#1d1d3a;border:3px solid #1d1d3a;padding:6px 10px;max-width:46%;box-shadow:4px 4px 0 #b3261e;animation:gpop .25s ease-out}
.gstage .gshout.gsl{left:4%}.gstage .gshout.gsr{right:4%}.gstage .gshout small{display:block;font:11px var(--text);color:#4d4d6e}
@keyframes gpop{from{transform:scale(.6)}to{transform:scale(1)}}
.gstage .gko{position:absolute;inset:0;display:grid;place-items:center;z-index:6;font:clamp(28px,7vw,58px) var(--pixel);color:#e8c45a;text-shadow:3px 3px 0 #000;pointer-events:none}
.gstage .glog{position:absolute;left:10px;right:10px;bottom:6px;z-index:3;font:12px/1.35 var(--text);color:#a9abd6;display:grid;gap:1px;text-shadow:1px 1px 0 #000}
.gstage .glog div:last-child{color:#e9e9ff}
@media (prefers-reduced-motion:reduce){.gstage .gdmg,.gstage .gshout{animation:none}.gstage .ghp i{transition:none}}
.gctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid #666699;background:var(--kbg-eef0f8,#eef0f8)}.gctl .gnote{margin-left:auto;font-size:12px}
.gresult{display:grid;gap:10px;padding:12px;border-top:3px double #666699}
.gdrow{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.gbig{font:30px/1 var(--pixel);color:var(--kfg-1b1f6b,#1b1f6b)}.gbig.gwin{color:var(--kfg-127a36,#127a36)}.gbig.gloss{color:var(--kfg-b3261e,#b3261e)}
.gstamp{display:inline-block;font:15px var(--pixel);color:#b3360b;border-style:solid;border-width:0 15px;border-image-source:var(--g-stamp,url(art/grudge/stamp.png));border-image-slice:0 24 fill;border-image-width:0 15px;border-image-repeat:stretch;image-rendering:pixelated;padding:6px 6px 4px;transform:rotate(-4deg)}
.gsticker{display:inline-block;font:13px var(--text);color:#fff;border-style:solid;border-width:0 24px 0 12px;border-image-source:var(--g-sticker,url(art/grudge/tagsticker.png));border-image-slice:0 32 0 16 fill;border-image-width:0 24px 0 12px;border-image-repeat:stretch;image-rendering:pixelated;padding:6px 4px 5px;text-shadow:1px 1px 0 #5a0f0b}
.gtags h4{margin:0 0 2px}.gtagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.gtagb{font:13px var(--text);background:var(--kbg-fff,#fff);border:1px dashed #666699;color:var(--kfg-1d1d3a,#1d1d3a);padding:4px 10px;cursor:pointer;min-height:32px}
.gshstage{padding:12px;text-align:center}.gshimg{max-width:100%;height:auto;border:1px solid #000}.gshare .gdrow{padding:0 12px 12px}
/* home box, profile strip, settings */
.gdbox .gdbh{display:flex;align-items:center;gap:8px;margin-bottom:6px}.gdbox .gdbt{font:16px var(--pixel)}.gdbox .gdbh .btn{margin-left:auto}
.gdnew{font:11px var(--text);background:#b3261e;color:#fff;padding:0 6px}
.gdbox{padding:8px 12px 4px}.gdbox .gdbh{flex-wrap:wrap}.gdrec{font:14px var(--pixel)}
/* fixes-1017: two lines per duel (who; rules · end · when), Watch on the right across both */
.gdlist{list-style:none;margin:0;padding:0;display:grid}
.gdli{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1px 10px;align-items:center;padding:7px 0;border-top:1px solid var(--kbd-ccccff,#ccccff)}
.gdli:first-child{border-top:0}.gdli .gwl{grid-row:1/3;align-self:start;margin-top:2px}.gdli .btn{grid-column:3;grid-row:1/3}
.gdli.gfresh{background:var(--kbg-fff6e0,#fff6e0)}.gdli .gwho{min-width:0;overflow-wrap:anywhere;font-weight:700;line-height:1.35}
.gdli .gmeta{grid-column:2;min-width:0;font-size:12px;line-height:1.4;color:var(--kfg-4d4d6e,var(--mute))}
.gdli .gup{display:inline-block;white-space:nowrap;margin-left:6px;padding:0 5px;font:11px var(--pixel);color:#fff;background:#b3360b}
.gwl{font:14px var(--pixel);width:2em;text-align:center;color:#fff}.gwl.wlw{background:#127a36}.gwl.wll{background:#b3261e}.gwl.wld{background:#666699}
.gstrip{display:grid;gap:8px;margin:8px 0}.gsay{margin:0;font:16px var(--pixel)}
.gflex{color:#e9e9ff;background:#11122e url(art/grudge/card.png) center 38%/cover no-repeat;image-rendering:pixelated;border:3px solid #e8c45a;padding:10px;display:grid;gap:6px}
.gflex .gfvs{display:flex;align-items:center;gap:6px;font:13px var(--text);color:#e8c45a}.gflex .gfvs img{width:24px;height:24px}
.gflex .gfname{margin-left:auto;font:11px var(--text);background:#ff8a4c;color:#1d0d00;padding:0 6px}
.gflex .gfstats{display:flex;flex-wrap:wrap;gap:6px}.gflex .gfs{border:1px solid #a9abd6;padding:2px 8px;display:grid;line-height:1.25;background:#11122e99}
.gflex .gfs b{font:18px var(--pixel);font-weight:400;color:#e8c45a}.gflex .gfs small{font-size:11px}.gflex .gtruth{margin:0;font-size:12px;color:#ffb3ab}
.gfield{display:grid;gap:6px;padding-bottom:10px;border-bottom:1px dotted var(--kbd-ccccff,#ccccff)}.gfield h4{margin:0}.gfield input,.gfield select{font:14px var(--text);min-height:36px;padding:4px 8px;max-width:100%}
.gchips{display:flex;flex-wrap:wrap;gap:6px}.gchips button{font:13px var(--text);min-height:32px;padding:4px 10px}.gchips button[aria-pressed="true"]{background:#1b1f6b;color:#fff;border-color:#1b1f6b}
@media (max-width:560px){.gside,.gside.gsr{flex-direction:column;text-align:center}.gside .gid,.gside.gsr .gid{justify-items:center}.gcmp td{font-size:14px}.gcmp td,.gcmp tbody th{padding:6px 4px}.gtip{width:190px}.gstage .glog div:nth-last-child(n+3){display:none}}
.gddef{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;border-top:1px dotted var(--kbd-ccccff,#ccccff)}
/* GARDEN-1 (D-276): 瑰宝の園: the alert bar on every screen, the World → 園 panel, the climb strip and the home slide */
.gd-alert{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 8px;padding:6px 10px;background:#1e5233;color:#effff2;border:2px solid #0d2a19}
.gd-alert .t{flex:1 1 200px;min-width:0;display:grid}.gd-alert .t b{font:15px/1.2 var(--pixel);font-weight:400;color:#fff}.gd-alert .t span{font-size:12.5px;color:#cfeedd}
.gd-alert .left{font:14px var(--pixel);color:#ffd23f;font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-alert .x{background:none;border:0;color:#cfeedd;font-size:16px;cursor:pointer;padding:0 4px}
.gd-alert.pre{background:#2f3566;border-color:#1b1f3a}.gd-alert.pre .left{color:#cfd4ff}
/* QOL-10 (garden-enter-preview-v1): the quick Enter row: [garden ▾ on Sunday] [level ▾] [Enter] */
.gd-go{display:flex;gap:6px;align-items:stretch;flex-wrap:nowrap;min-width:0}
.gd-go select{font:13px var(--text);min-width:0;padding:4px}.gd-go .g{flex:0 0 auto;width:74px}.gd-go .l{flex:1 1 auto;max-width:240px}.gd-go .btn{flex:none}
.gd-alert .gd-go{flex:1 1 260px}.gd-alert .gd-go select{background:#0f2a1b;color:#effff2;border:2px solid #0d2a19}
.gd-sig{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 4px;background:#14182e;color:#ffd23f;border:1px solid #363c5c;font:16px var(--pixel)}
.btn.go{background:linear-gradient(var(--kbg-f3fff4,#f3fff4),var(--kbg-bff0cb,#bff0cb));border-color:#7fc795 #2f7d4a #2f7d4a #7fc795;font-weight:700;color:var(--kfg-0f3d20,#0f3d20)}
.gd-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:0 0 8px}
.gd-day{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:3px 2px;text-align:center;display:grid;gap:1px;justify-items:center;min-width:0}
.gd-day .d{font:11.5px var(--pixel);color:var(--mute)}.gd-day .g{font:17px/1.1 var(--pixel)}.gd-day .s{font-size:10px;line-height:1.2;color:var(--mute)}
.gd-day.off{background:var(--kbg-f1f1ea,#f1f1ea);color:var(--mute)}.gd-day.today{border:2px solid #2f7d4a;background:var(--kbg-e7f6ea,#e7f6ea)}
.gd-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px}
.gd-slot{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:5px;display:grid;gap:1px;text-align:center}.gd-slot b{font:15px var(--pixel);font-weight:400;font-variant-numeric:tabular-nums}.gd-slot span{font-size:11.5px;color:var(--mute)}
.gd-slot.open{border:2px solid #2f7d4a;background:var(--kbg-e7f6ea,#e7f6ea)}.gd-slot.open span{color:var(--kfg-1f5f36,#1f5f36);font-weight:700}.gd-slot.past{opacity:.6}.gd-slot.used{opacity:.75}.gd-slot.used span{color:var(--mute)}
.gd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
.gd-card{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);padding:8px;display:grid;gap:7px;align-content:start;min-width:0}.gd-card.open{border-color:#2f7d4a}
.gd-card .gd-hd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}.gd-card .nm{font:15px/1.2 var(--pixel)}.gd-card .en{font-size:11.5px;color:var(--mute)}
.gd-card .pill{display:inline-block;font:11px var(--pixel);padding:0 6px;border:1px solid var(--bev2);color:var(--mute)}.gd-card .pill.open{color:var(--kfg-1f5f36,#1f5f36);border-color:#2f7d4a;background:var(--kbg-e7f6ea,#e7f6ea)}
.gd-card .gd-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px}.gd-card select{font:12.5px var(--text);max-width:100%}
.gd-card .gd-best{font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.gd-lad{display:grid;gap:2px}.gd-lad .ln{display:grid;grid-template-columns:4.4em minmax(0,1fr) auto;gap:6px;align-items:center;font-size:11.5px}
.gd-lad .ln b{font:11px var(--pixel);font-weight:400;font-variant-numeric:tabular-nums}.gd-lad .ln.reach{font-weight:700}.gd-lad .ln.off{opacity:.5}
.gd-lad .bar{height:8px;background:var(--kbg-e6e6f4,#e6e6f4);border:1px solid var(--bev1);position:relative}.gd-lad .bar i{position:absolute;inset:0;transform-origin:left;background:#8a93b8}
.gd-lad .b1 .bar i{background:#2d8f8c}.gd-lad .b2 .bar i{background:#c98a12}.gd-lad .b3 .bar i{background:#c0392b}
.gd-fl.b1{border-color:#2d8f8c}.gd-fl.b2{border-color:#c98a12}.gd-fl.b3{border-color:#c0392b}.gd-fl.chest{box-shadow:inset -3px 3px 0 -1px #ffd23f}
.gd-slide{display:grid;gap:6px;min-width:0}.gd-slide .hd{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}.gd-slide .hd b{font:16px var(--pixel);font-weight:400}
.gd-slide .hd span,.gd-slide .sub{font-size:12px;color:var(--mute)}.gd-slide .gd-week{margin:0}.gd-slide .gd-row{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:760px){.gd-cards{grid-template-columns:minmax(0,1fr)}.gd-alert .x{display:none}.gd-week .gd-day .s{font-size:9px}}
/* GARDEN-1 §19 (preview design/garden-results-preview-v2.html, approved 2026-10-18): the climb results and the named reveal v2 */
.modal .box.grbox{width:min(760px,calc(100vw - 24px));max-width:760px;max-height:calc(100vh - 32px);overflow:auto;padding:0;position:relative}
.gr-hd{position:relative;aspect-ratio:4/1;max-width:100%;background:#1d1d3a center/cover no-repeat;image-rendering:pixelated}
.gr-ttl{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;background:linear-gradient(transparent,#1d1d3aee);color:#fff}
.gr-ttl b{font:17px var(--pixel);font-weight:400}
.gr-skip{position:absolute;right:10px;top:10px;z-index:4;background:#1d1d3acc;color:#fff;border:1px solid var(--kbd-ffffff55,#ffffff55);padding:3px 10px;font:12px var(--text);cursor:pointer}
.gr-stats{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0}
.gr-chip{background:var(--kbg-e7e9f6,#e7e9f6);padding:2px 8px;font-size:12px;border:1px solid var(--bev2)}.gr-chip.gr-best{border-color:#2f7d4a;color:var(--kfg-1f5f36,#1f5f36);font-weight:700}
.gr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;padding:10px 12px}
.gr-tile{position:relative;border:2px solid var(--bev2);background:var(--kbg-fff,#fff);padding:8px;display:grid;gap:5px;min-width:0}
.gr-tile.named{border-color:#c2502e;box-shadow:inset 0 0 0 2px #e8907a}
.gr-fl{font-size:11px;color:var(--mute)}
.gr-face{display:grid;gap:5px;transition:transform .35s,opacity .35s}
.gr-tile.down .gr-face{opacity:0;transform:rotateY(80deg)}
.gr-back{position:absolute;inset:22px 8px 8px;display:grid;place-items:center;transition:opacity .25s}.gr-back svg{width:48px;height:48px}
.gr-tile:not(.down) .gr-back{opacity:0;pointer-events:none}
.gr-tile.glow-magic.down .gr-back{filter:drop-shadow(0 0 8px #8fb4ff)}.gr-tile.glow-rare.down .gr-back{filter:drop-shadow(0 0 10px #ffd23f)}
.gr-tile.glow-legend.down .gr-back,.gr-tile.glow-unique.down .gr-back,.gr-tile.glow-named.down .gr-back{filter:drop-shadow(0 0 14px #ffb59a)}
.gr-row{display:flex;gap:8px;align-items:center;min-width:0}.gr-nm{min-width:0;display:grid}.gr-nm b{font-size:13px;line-height:1.25;overflow-wrap:anywhere}.gr-nm small{font-size:11px;color:var(--mute)}
.gr-roll{height:6px;background:var(--kbg-e7e9f6,#e7e9f6);border:1px solid var(--bev2)}.gr-roll i{display:block;height:100%;background:#c98a12}
.gr-delta{font-size:12px}.gr-delta.up{color:var(--kfg-1f6b35,#1f6b35)}.gr-delta.dn{color:var(--kfg-a3201a,#a3201a)}
.gr-tg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--bev2)}
.gr-tg button{border:0;background:var(--kbg-fff,#fff);color:var(--ink);font:12px var(--text);padding:5px 2px;cursor:pointer}.gr-tg button+button{border-left:1px solid var(--bev2)}
.gr-tg button[aria-pressed="true"].k{background:#2f7d4a;color:#fff}.gr-tg button[aria-pressed="true"].s{background:#a3201a;color:#fff}.gr-tg button:disabled{opacity:.45;cursor:not-allowed}
.gr-smart{font-size:10.5px;color:var(--mute)}
.gr-ribbon{position:absolute;top:-2px;right:-2px;background:#c2502e;color:#fff;font:11px var(--pixel);padding:1px 6px}
.gr-card{border:2px solid #c2502e;box-shadow:inset 0 0 0 2px #e8907a;margin:0 12px 10px;padding:10px;display:grid;gap:8px}
.gr-pass{color:var(--named);font-weight:700;margin-right:4px}
.gr-ft{border-top:1px solid var(--bev2);padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.gr-sum{font-size:13px}.gr-acts{display:flex;gap:6px;flex-wrap:wrap}.gr-tmr{font-size:11.5px;color:var(--mute);width:100%}
.gr-tile.landed{animation:gr-landed .7s ease-out}
@keyframes gr-landed{40%{box-shadow:0 0 0 10px #ffb59a66,inset 0 0 0 2px #e8907a}100%{box-shadow:0 0 0 18px #ffb59a00,inset 0 0 0 2px #e8907a}}
.tag.gnew{background:#2f7d4a;color:#fff}.gd-last{margin:0 0 8px}
.grbox.shake{animation:gr-mshake .4s}@keyframes gr-mshake{20%{translate:-6px 3px}40%{translate:5px -4px}60%{translate:-3px 2px}80%{translate:2px -1px}}
.gr-rv{position:absolute;inset:0;z-index:6;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gr-dim{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#3a1418e6,#06040bf5 72%);opacity:0;transition:opacity .35s}.gr-rv.on .gr-dim{opacity:1}
.gr-rays{position:absolute;left:50%;top:45%;width:1400px;height:1400px;margin:-700px 0 0 -700px;background:repeating-conic-gradient(from 0deg,#ffb59a40 0deg 5deg,transparent 5deg 15deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,#000 12%,transparent 45%);mask-image:radial-gradient(circle,#000 0,#000 12%,transparent 45%);opacity:0;transition:opacity .5s,transform .5s;animation:gr-spin 9s linear infinite}
.gr-rays.on{opacity:1}.gr-rays.big{transform:scale(1.4);opacity:1}@keyframes gr-spin{to{rotate:360deg}}
.gr-chest{position:absolute;left:50%;top:45%;width:104px;height:104px;margin:-52px;transition:transform .2s,opacity .15s}.gr-chest svg{width:100%;height:100%}
.gr-chest.c1{animation:gr-sh1 .12s infinite;filter:drop-shadow(0 0 10px #ffb59a)}
.gr-chest.c2{animation:gr-sh2 .09s infinite;filter:drop-shadow(0 0 18px #ffb59a) drop-shadow(0 0 30px #c2502e)}
.gr-chest.c3{animation:gr-sh3 .06s infinite;filter:drop-shadow(0 0 26px #fff1ea) drop-shadow(0 0 50px #ff6a3d);transform:scale(1.12)}
@keyframes gr-sh1{25%{translate:-2px 0}75%{translate:2px 0}}
@keyframes gr-sh2{25%{translate:-4px 1px;rotate:-3deg}75%{translate:4px -1px;rotate:3deg}}
@keyframes gr-sh3{25%{translate:-7px 2px;rotate:-6deg}75%{translate:7px -2px;rotate:6deg}}
.gr-flash{position:absolute;inset:0;background:var(--kbg-fff,#fff);opacity:0;pointer-events:none}.gr-flash.go{animation:gr-flash .5s ease-out}@keyframes gr-flash{0%{opacity:1}100%{opacity:0}}
.gr-rv canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gr-ring{position:absolute;left:50%;top:45%;width:44px;height:44px;margin:-22px;border:4px solid #ffb59a;border-radius:50%;pointer-events:none;animation:gr-ring .75s ease-out forwards}
.gr-ring.gold{border-color:#ffd23f}@keyframes gr-ring{to{transform:scale(10);opacity:0;border-width:1px}}
.gr-cardx{position:absolute;left:50%;top:45%;display:grid;justify-items:center;gap:8px;text-align:center;color:#fff;transform:translate(-50%,-50%) scale(.1);opacity:0;width:300px}
.gr-cardx.pop{animation:gr-pop .6s cubic-bezier(.2,1.7,.4,1) forwards}
@keyframes gr-pop{0%{transform:translate(-50%,-50%) scale(.1);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.gr-cardx.fly{transition:transform .5s cubic-bezier(.5,0,.7,.4),opacity .5s;animation:none;opacity:1}
.gr-frame{position:relative;width:144px;height:144px;display:grid;place-items:center;background:var(--kbg-fff1ea,#fff1ea);
  box-shadow:inset 0 0 0 4px #e8907a,inset 0 0 0 8px var(--ksh-fff,#fff),0 0 0 4px #c2502e,0 0 36px #ffb59a,0 0 90px #c2502eaa;animation:gr-breathe 1.4s ease-in-out infinite}
@keyframes gr-breathe{50%{box-shadow:inset 0 0 0 4px #e8907a,inset 0 0 0 8px var(--ksh-fff,#fff),0 0 0 4px #c2502e,0 0 52px var(--ksh-fff1ea,#fff1ea),0 0 120px #ff6a3dcc}}
.gr-frame .ic.rv-ic{transform:scale(1.5);border:0;box-shadow:none;background:none}.gr-frame .ic.rv-ic::before,.gr-frame .ic.rv-ic::after{display:none}
.gr-stamp{position:absolute;right:-30px;top:-26px;font:46px/1 var(--pixel);color:#fff;background:#c2502e;width:64px;height:64px;display:grid;place-items:center;
  border:3px solid var(--kbd-fff1ea,#fff1ea);box-shadow:0 0 22px #ffb59a;opacity:0;transform:scale(3.2) rotate(-40deg)}
.gr-stamp.slam{animation:gr-slam .32s cubic-bezier(.3,1.5,.5,1) forwards}@keyframes gr-slam{to{transform:scale(1) rotate(-12deg);opacity:1}}
.gr-ttlx{font:13px var(--pixel);letter-spacing:.35em;color:#ffb59a;opacity:0;transition:opacity .3s}
.gr-namex{font:24px/1.2 var(--pixel);color:#fff;text-shadow:0 0 10px #c2502e,0 0 22px #c2502e;clip-path:inset(0 100% 0 0)}
.gr-namex.go{animation:gr-wipe .45s steps(12) forwards}@keyframes gr-wipe{to{clip-path:inset(0 0 0 0)}}
.gr-passx{font-size:13px;color:#ffe4da;opacity:0;transition:opacity .4s}.gr-passx b{color:#ffb59a}
.gr-rv .on1{opacity:1}
.gr-luck{position:relative;margin-bottom:4px;background:linear-gradient(var(--kbg-fff3b0,#fff3b0),#ffd23f 45%,#c98a12);color:var(--kfg-3a2300,#3a2300);font:20px var(--pixel);padding:4px 16px;
  border:2px solid var(--kbd-fff6c8,#fff6c8);box-shadow:0 0 24px #ffd23f;opacity:0;transform:translateY(-140px) scale(1.6);white-space:nowrap}
.gr-luck.drop{animation:gr-drop .65s cubic-bezier(.3,1.7,.5,1) forwards}@keyframes gr-drop{to{transform:none;opacity:1}}
.gr-tap{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#ffffffaa;font-size:12px;opacity:0;transition:opacity .3s}
.gr-tap.on1{animation:gr-blink 1.2s infinite}@keyframes gr-blink{50%{opacity:.35}}
@media (max-width:520px){.gr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gr-cardx{width:260px}.gr-frame{width:120px;height:120px}.gr-frame .ic.rv-ic{transform:scale(1.2)}.gr-namex{font-size:20px}}
@media (prefers-reduced-motion:reduce){.gr-face,.gr-back{transition:none}.gr-rays,.gr-chest,.gr-frame,.gr-tap.on1,.grbox.shake{animation:none!important}}
/* GARDEN-1 pass 2 (garden v0.1 §17; design/garden-named-preview-v1.html): named Legends wear a rose-gold frame (ring #c2502e, inner #e8907a,
   tile #fff1ea, twinkle #ffb59a; Uniques stay green), the 名 list and card on each garden card and the tower, the gate headers, and the
   timetable slide printed over its art (gate in the art's left 40%, a calm navy band, navy #1d1d3a past the art). */
.r-named{color:var(--named)}.r-legend.r-named::before{content:"名 "}
.ic.named{background:var(--kbg-fff1ea,#fff1ea);box-shadow:inset 0 0 0 2px #e8907a,inset 0 0 0 4px var(--ksh-fff,#fff),0 0 0 2px #c2502e}.ic.named::before,.ic.named::after{color:#ffb59a}
.tile.uq-named{background:var(--kbg-fff1ea,#fff1ea);box-shadow:inset 0 0 0 2px #e8907a,0 0 0 2px #c2502e}.tile.uq-named::before{color:#ffb59a}
.banner.named b{color:#ffb59a}
.lflash.named{background:radial-gradient(circle at 80% 75%,var(--kbg-fff1ea,#fff1ea),#e8907a88 35%,transparent 65%)}
.nl{display:grid;gap:6px;border-top:1px dashed var(--bev2);padding-top:7px;min-width:0}
.nl-hd{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline;font-size:12px}.nl-hd b{font:13px var(--pixel);font-weight:400;color:var(--named)}.nl-hd span{color:var(--mute);font-size:11.5px}
.nl-ls{display:flex;flex-wrap:wrap;gap:6px}
.nl-chip{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%;padding:4px 8px 4px 5px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.nl-chip .ic{flex:none}.nl-chip .t{display:grid;min-width:0;font-size:12px;line-height:1.25}.nl-chip .n{font-weight:700}.nl-chip small{font-size:11px;color:var(--mute)}.nl-chip.got small{color:var(--kfg-1f5f36,#1f5f36);font-weight:700}
.nl-chip[aria-expanded="true"]{border-color:#c2502e;box-shadow:inset 0 0 0 1px #c2502e}.nl-chip:focus-visible{outline:2px solid var(--named);outline-offset:2px}
.nl-odds{font-size:11px;line-height:1.35;color:var(--mute)}
.nl-peek{display:grid;gap:7px;padding:8px;background:var(--kbg-fff,#fff);border:2px solid #c2502e;box-shadow:inset 0 0 0 2px #e8907a}
.nl-ph{display:flex;gap:10px;align-items:center;min-width:0}.nl-ph>div{min-width:0}.nl-ph b{display:block;font-size:13px}.nl-ph small{display:block;font-size:11px;color:var(--mute)}
.nl-tb{border-collapse:collapse;font-size:12px;line-height:1.35}.nl-tb td{padding:2px 8px 2px 0;vertical-align:top}.nl-tb td:first-child{color:var(--mute);white-space:nowrap}
.nl-tb .flav{font-style:italic;color:var(--mute)}/* D-280: a named Legend's flavour line */
.nl-pass{display:inline-block;margin-right:6px;font-weight:700;color:var(--named)}
.twr .nl{margin-top:8px;border-top-color:#4a5180}.twr .nl-hd b{color:#ffb59a}.twr .nl-hd span,.twr .nl-odds{color:#c9d6ff}/* the tower column is dark in every skin */
.gd-card .gd-art{margin:-8px -8px 0;aspect-ratio:4/1;max-width:calc(100% + 16px);background:#1d1d3a center/cover no-repeat;image-rendering:pixelated;border-bottom:2px solid var(--bev2)}
.nw-gd.art{container-type:inline-size;background:#1d1d3a var(--gd-art) left top/auto 118px no-repeat;image-rendering:auto}
.nw-gd.art .nw-txt{padding-left:198px;color:#fffff0}.nw-gd.art .gd-slide .hd b{color:#fff}.nw-gd.art .gd-slide .hd span,.nw-gd.art .gd-slide .sub{color:#cfd4ff}.nw-gd.art .gd-week{color:var(--kfg-1d1d3a,#1d1d3a)}
@media (max-width:720px){.nw-gd.art{background-size:100% auto}.nw-gd.art .nw-txt{padding:8px}.nw-gd.art .gd-slide .hd{margin-left:40%;min-height:calc(25cqw - 16px);align-content:center}}
/* GARDEN-PICKUP (garden v0.1 §22, layout A): the "Can drop" badge and the garden's named Legends lead, the true odds under them;
   on desktop Enter sits beside the headline, on a phone under the times. */
.gd-slide.pu{grid-template-columns:minmax(0,1fr) auto;gap:5px}.gd-slide.pu>*{grid-column:1/-1}
.gd-slide.pu>.hd{grid-column:1;justify-content:flex-start;align-items:center}.gd-slide.pu>.gd-row{grid-column:2;grid-row:1;align-self:center}
.nw-gd .gd-pu{display:inline-flex;align-items:center;font:12px/1 var(--pixel);letter-spacing:.06em;color:#fff;background:#c2321b;border:1px solid #ffd36b;box-shadow:2px 2px 0 #00000066;padding:3px 7px 3px 6px;white-space:nowrap}
.nw-gd .gd-pu::before{content:'';width:5px;height:5px;background:#ffd36b;margin-right:5px;transform:rotate(45deg)}
.nw-gd .gd-nm{font:15px/1.25 var(--pixel);color:#ffd36b;min-width:0}.nw-gd .gd-nm i{font-style:normal;color:#fff;margin-right:4px}
.nw-gd .gd-odds{font-size:11.5px;line-height:1.35;color:#cfd4ff}
@media (max-width:720px){.gd-slide.pu>.hd{grid-column:1/-1;gap:4px 8px}.gd-slide.pu>.gd-row{grid-column:1/-1;grid-row:auto}.nw-gd .gd-nm{font-size:12.5px}}
/* BUGREPORT-1 (D-277, P-139; bug-report-form-preview-v2): the 🐞 button, the three-part form and the GM's Reports tab. */
.bugbtn{font:700 12px var(--text);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);background:linear-gradient(var(--kbg-fff,#fff),var(--kbg-dfe3f5,#dfe3f5));color:var(--ink);min-height:28px;padding:2px 9px;cursor:pointer}
.box.bug{max-width:480px;max-height:calc(100vh - 32px);overflow:auto}
.bug-l{display:block;font-weight:700;font-size:13px;margin-bottom:4px}
.bug-f{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.bug-h{margin:0 0 2px}
.bug-t{width:100%;min-height:0;font:14px/1.5 var(--text);border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);padding:6px 8px;resize:vertical}
.bug-n{text-align:right;margin-top:2px}
.bug-meta{margin-top:8px;font-size:12.5px;border:1px solid var(--kbd-d4d6e8,#d4d6e8);background:var(--kbg-f7f8ff,#f7f8ff);padding:6px 8px}
.bug-meta summary{font-weight:700;cursor:pointer}
.bug-meta ul{margin:6px 0 4px;padding-left:18px;color:var(--mute)}
.bug-btns{padding-top:0;justify-content:flex-end}.bug-msg:empty{display:none}
.gmrep td{font-size:12.5px;vertical-align:top}.gmrep td.t{max-width:380px}.gmrep .buglog{white-space:pre-wrap;font-size:11px;max-height:160px;overflow:auto;margin:4px 0 0}
.gscroll{overflow-x:auto}
/* the Players table's phone rule hides .ptab columns 2 and 4; here they are Player and Report, so keep them and drop Screen · build
   (the Where line still names the screen) */
@media (max-width:720px){.ptab.gmrep th:nth-child(2),.ptab.gmrep td:nth-child(2),.ptab.gmrep th:nth-child(4),.ptab.gmrep td:nth-child(4){display:table-cell}
  .ptab.gmrep th:nth-child(3),.ptab.gmrep td:nth-child(3){display:none}}
/* REGION6-1 (D-295): the ポケっとモン Pocket-Mon Centre (region6-partner-preview-v2's Partner, Safari and Pocket-Dex tabs) */
.pk .pk-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;align-items:baseline;margin:0 0 8px}.pk .pk-head b{font:15px var(--pixel);font-weight:400}
.pk .pk-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 10px}
.pk .pk-tab{font:13px var(--pixel);border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);padding:3px 10px;cursor:pointer;min-height:32px}
.pk .pk-tab.on{background:var(--indigo);color:#fff;border-color:var(--indigo-fg,var(--indigo))}
.pk .pad{padding:8px 10px}.pk p{margin:4px 0}
.pk .pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:0 12px;align-items:start}.pk .pk-grid>*{min-width:0}
.pk .pk-mon{display:inline-block;background-repeat:no-repeat;image-rendering:pixelated;flex:none;vertical-align:middle}
.pk .pk-mon.dark{filter:grayscale(1) brightness(.55)}.pk .pk-mon.sil{filter:brightness(0);opacity:.45}.pk .pk-mon.empty{width:48px;height:48px;border:1px dashed var(--bev2)}
.pk .pk-card{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.pk .pk-frame{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:4px;line-height:0}
.pk .pk-info{min-width:0;flex:1 1 200px}.pk .pk-name{font:16px var(--pixel)}
.pk .pk-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;margin:6px 0 0;font-size:13px}.pk .pk-kv dt{color:var(--mute)}.pk .pk-kv dd{margin:0}
.pk .pk-type{display:inline-flex;align-items:center;gap:3px;font:11px var(--pixel);border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);padding:0 5px 0 2px;margin:1px 2px 1px 0;white-space:nowrap}
.pk .pk-type img{image-rendering:pixelated}
.pk .pk-bar{display:block;height:6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);margin:3px 0;overflow:hidden}.pk .pk-bar i{display:block;height:100%;background:var(--indigo);transform-origin:left}
.pk .pk-bar.bond i{background:#d0507a}
.pk .pk-eggs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:8px 0}
.pk .pk-egg-pick{display:flex;flex-direction:column;align-items:center;gap:4px;font:inherit;color:var(--ink);background:var(--kbg-fff,#fff);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:10px 6px;cursor:pointer}
.pk .pk-egg-pick b{font:13px var(--pixel);font-weight:400}.pk .pk-egg-pick:hover{background:var(--cy)}
.pk .pk-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.pk select{font:13px var(--text);min-height:34px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);padding:4px 8px;max-width:100%}
.pk .pk-tscroll{overflow-x:auto}.pk .pk-tree{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:8px;padding:8px 10px;min-width:620px}
.pk .pk-col h4{margin:0 0 4px;font:12px var(--pixel);font-weight:400;color:var(--mute)}
.pk .pk-node{display:flex;gap:6px;align-items:flex-start;width:100%;text-align:left;font:12px/1.35 var(--text);color:var(--ink);background:var(--kbg-fff,#fff);border:1px solid var(--bev2);padding:5px;margin:0 0 6px;cursor:pointer}
.pk .pk-node.dim{cursor:default;opacity:.85}.pk .pk-node.now{border:2px solid var(--indigo-fg,var(--indigo))}.pk .pk-node.aim{box-shadow:0 0 0 2px #d0507a}
.pk .pk-ninfo{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pk .pk-cond{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 6px;font-size:11px;color:var(--mute)}.pk .pk-cond .pk-bar{grid-column:1/-1;height:4px;margin:0 0 2px}.pk .pk-cond.met{color:var(--ink)}
.pk .pk-tag{font:12px var(--pixel);border:1px solid var(--bev2);padding:0 4px;color:var(--mute);white-space:nowrap}.pk .pk-tag.ok{background:var(--indigo);color:#fff;border-color:var(--indigo-fg,var(--indigo))}
.pk .pk-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.pk .pk-slot{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px;min-width:0}.pk .pk-slot select{width:100%}
.pk .pk-slot.lock{border-style:dashed;justify-content:center;text-align:center;font-size:12px}
.pk .pk-table{border-collapse:collapse;font-size:12px;width:100%}.pk .pk-table th,.pk .pk-table td{border-bottom:1px dotted var(--bev2);padding:3px 6px;text-align:left}
.pk .pk-dex{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin:8px 0}
.pk .pk-tile{display:flex;flex-direction:column;align-items:center;gap:1px;font:11px/1.25 var(--text);color:var(--ink);background:var(--kbg-fff,#fff);border:1px solid var(--bev2);padding:4px 2px;cursor:pointer;min-width:0;text-align:center}
.pk .pk-tile b{font-weight:700;overflow-wrap:anywhere}.pk .pk-tile.sel{border:2px solid var(--indigo-fg,var(--indigo))}
.pk .pk-pips{display:flex;gap:2px}.pk .pk-pips i{width:6px;height:6px;border:1px solid var(--bev2);background:var(--kbg-fff,#fff)}.pk .pk-pips i.on{background:var(--indigo);border-color:var(--indigo-fg,var(--indigo))}
.pk .pk-shiny{color:var(--kfg-b8860b,#b8860b);font-weight:700}.pk .pk-ok{color:var(--kfg-1d6b3a,#1d6b3a);font-weight:700}
.pk .pk-log{list-style:none;margin:4px 0;padding:0;font-size:12px}.pk .pk-log li{display:flex;align-items:center;gap:4px;padding:1px 0}
.pk .pk-ladder{list-style:none;margin:0;padding:0}.pk .pk-ladder li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:4px 0;border-bottom:1px dotted var(--bev2);font-size:12px}
.pk .btn.small{min-height:44px;padding:3px 12px}.pk .btn.on{background:var(--indigo);color:#fff}
/* REGION6-1 build B: the Gyms and Railgun tabs, the Jogress panel, type pages and the post-game box */
.pk .pk-gyms{list-style:none;margin:0;padding:0}
.pk .pk-gym{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dotted var(--bev2);min-height:44px}
.pk .pk-gym.sealed{opacity:.75}.pk .pk-gym.next{background:var(--cy)}
.pk .pk-gbadge{image-rendering:pixelated;flex:none}
.pk .pk-gi{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;font-size:13px}.pk .pk-gi b{font-weight:700}
.pk .pk-tag.now{background:#a8325c;color:#fff;border-color:#a8325c}
.pk .pk-skills{list-style:none;margin:0;padding:0}
.pk .pk-skills li{display:flex;gap:8px;align-items:center;padding:4px 0;border-bottom:1px dotted var(--bev2);min-height:44px}
.pk .pk-skills li>div{display:flex;flex-direction:column;min-width:0;font-size:12.5px}.pk .pk-skills li.dim{color:var(--mute)}
.pk .pk-h4{margin:10px 0 2px;font:13px var(--pixel);font-weight:400}
.pk .pk-corners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:6px 0}
.pk .pk-corner{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px 4px;font-size:12px;min-width:0}
.pk .pk-pin{display:flex;flex-direction:column;gap:2px;font-size:12px;flex:1 1 150px;min-width:0}.pk .pk-pin select{min-height:44px;width:100%}
.pk .pk-lost{color:var(--kfg-9a4a00,#9a4a00);font-weight:700}
.pk .pk-case{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;align-items:center}
.pk .pk-cbadge{display:flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:4px 10px;font:12px var(--text);color:var(--ink);background:var(--kbg-fff,#fff);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);cursor:pointer}
.pk .pk-cbadge.sel{border:2px solid var(--indigo-fg,var(--indigo));background:var(--cy)}
.pk .pk-msg{min-height:1.4em;margin:2px 0 6px;color:var(--kfg-9a4a00,#9a4a00);font-weight:700;font-size:13px}
.pk .pk-phases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pk .pk-phase{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px;min-width:0}.pk .pk-phase.lit{border:2px solid #1d6b3a;background:var(--kbg-effaf2,#effaf2)}
.pk .pk-phase h4{margin:0 0 4px;font:12px var(--pixel);font-weight:400}
.pk .pk-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pk .pk-sock{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.pk .pk-socket{display:grid;place-items:center;width:100%;min-width:44px;min-height:76px;padding:2px;background:var(--kbg-f1f0f7,#f1f0f7);border:2px dashed var(--bev2);cursor:pointer}
.pk .pk-socket img{image-rendering:pixelated}.pk .pk-socket:not(.seated) img{opacity:.55}
.pk .pk-socket.seated{border-style:solid;cursor:default}.pk .pk-socket.lit{border-color:#1d6b3a;box-shadow:0 0 0 2px #7fd6a0}
.pk .pk-socket.bounce{animation:pk-shake .5s}
@keyframes pk-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.pk .pk-socket.bounce{animation:none;outline:3px solid #d0507a}}
.pk .pk-sinfo{display:flex;flex-direction:column;gap:2px;width:100%;font-size:11.5px;min-width:0}.pk .pk-sinfo .pk-bar.full i{background:#1d6b3a}
.pk .pk-feed{display:flex;flex-wrap:wrap;gap:1px;align-items:center}
.pk .pk-miss{margin:4px 0 0 18px;padding:0}
.pk .pk-jog{min-height:44px}.pk .pk-row .btn{min-height:44px}
/* the Jogress mate select names the Mega, so it can be long: grid cells may shrink and the select wraps under its button at phone width */
#pocket-view.pk{grid-template-columns:minmax(0,1fr)}.pk .pk-grid>*{min-width:0}.pk select{max-width:100%}.pk .pk-row>select{flex:1 1 180px;min-width:0}/* D-306: direct children only; the corner pins sit in a column label, where a 180 px basis became their height */
.pk .pk-page.done td{font-weight:700}.pk .pk-page .pk-bar{min-width:60px;margin:0}
.pk .pk-legends li{gap:8px;min-height:40px}.pk .pk-legends li>span:first-of-type{flex:1;min-width:0}
@media (max-width:480px){.pk .pk-phases{grid-template-columns:1fr}.pk .pk-tab{min-height:44px}}
/* D-306 POCKET-POLISH: where-from hints and time markers, the egg passives, the detail beside the tiles (a bottom sheet on narrow
   screens), the next gym first on phones, a stacked tree on phones, a steady socket height, the seat flash, the Jogress confirm and reveal */
.pk .pk-hint{grid-column:1/-1;font-size:11px;color:var(--mute);font-style:italic}.pk .pk-sinfo .pk-hint{display:block}
.pk .pk-eta{font-size:11px;font-weight:700;color:var(--ink)}
.pk .pk-eggp{font-size:11.5px;color:var(--mute);text-align:center}
.pk .pk-side{align-self:stretch;min-width:0}
.pk .pk-detail{position:sticky;top:8px;z-index:3}
.pk .pk-xrow{display:flex;justify-content:flex-end;padding:4px 8px 0}
.pk .pk-socket{min-height:104px}.pk .pk-socket img{display:block}/* the seated badge (96 px) and the empty outline (80 px) take the same box */
.pk .pk-socket.seatfx{animation:pk-seat .8s ease-out}
@keyframes pk-seat{0%{transform:scale(1.12);box-shadow:0 0 0 6px #ffd76a}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,215,106,0)}}
.pk .pk-frame.pk-reveal{animation:pk-reveal 1.4s ease-out}
@keyframes pk-reveal{0%{filter:brightness(3) saturate(0);transform:scale(.85)}40%{filter:brightness(1.6);transform:scale(1.08)}100%{filter:none;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pk .pk-socket.seatfx,.pk .pk-frame.pk-reveal{animation:none;outline:3px solid #1d6b3a}}
.pk .pk-confirm{border:2px solid var(--indigo-fg,var(--indigo));background:var(--cy);padding:6px 8px;margin:6px 0}.pk .pk-confirm p{margin:2px 0}
@media (max-width:900px){.pk .pk-nextgym{order:-1}
  .pk .pk-detail{position:fixed;left:96px;right:0;top:auto;bottom:0;max-height:50vh;overflow:auto;z-index:6;margin:0;box-shadow:0 -4px 16px rgba(0,0,0,.3)}}
@media (max-width:720px){.pk .pk-detail{left:0;bottom:calc(78px + env(safe-area-inset-bottom,0px))}}/* the phone tab bar: 77 px plus the safe area */
@media (max-width:560px){.pk .pk-tree{grid-template-columns:minmax(0,1fr);min-width:0}}
/* UI ICONS V2 (2026-10-19): the art spans take the rules the old sprite canvases had */
.rail a .uart{margin:-4px auto 0}/* the 32 px icon keeps the rail as tall as the 24 px sprite and its 4 px gap (bars above it are placed by that height) */
.rail a.locked .uart{filter:grayscale(1) brightness(.6)}
.er-walk .uart{position:absolute;bottom:1px}
.chest-stage .uart{position:relative;z-index:1;flex:none}
.chest-anchor{position:relative;flex:none;display:inline-block;line-height:0}/* D-313: the rays ride on the chest, whatever its size */
.chest-stage .chest-anchor .rays{left:50%;top:50%;margin:-55px 0 0 -55px}
@media (max-width:720px){.chest-stage .chest-anchor{margin:0 auto}}
.gold .uart{flex:none;display:inline-block;vertical-align:middle}
.ac-ss .disc .uart{filter:grayscale(1);opacity:.4}
.ac-ss.t1 .disc .uart,.ac-ss.t2 .disc .uart,.ac-ss.t3 .disc .uart,.ac-ss.t4 .disc .uart,.ac-ss.t5 .disc .uart,.ac-ss.hid.got .disc .uart{filter:none;opacity:1}
/* BAG-1 (D-298): storage count states, the ＋10 button, Equipped/Spares dividers, badges in list rows */
#inventory-count.near{color:var(--kfg-8a5a00,#8a5a00)}#inventory-count.full{color:var(--kfg-b3261e,#b3261e)}
.bagbuy{margin-left:8px;min-height:28px;padding:3px 8px;font-size:11.5px;vertical-align:2px}
.lgrp{font:12px var(--pixel);color:var(--mute);padding:4px 8px 2px;background:var(--kbg-eef0fa,#eef0fa);border-bottom:1px solid var(--kbd-c7c7dd,#c7c7dd)}
.lrow .gperf,.lrow .gtop{margin-left:4px}.frow .gperf,.frow .gtop{margin-right:4px}
/* D-305 RAID-HUD (raid HUD v0.1, docs/contracts/RAID_HUD_V01.md): the Command deck raid screen — a buff row whose chips
   explain themselves on tap, the act map as a graph (full map on tap), the result card after the replay, and the dock
   (deck line, next unlock, shop, controls) sticky at the bottom; on phones the raid's cards shrink so a round fits a screen */
.ho .ho-rbar{margin:0 0 6px}
.ho .ho-rbar .ho-bump{animation:ho-bump 1.1s ease-out}
.ho .ho-rbar .ho-bump small{color:inherit!important}
@keyframes ho-bump{0%{background:#ffd23f;color:var(--kfg-1b1608,#1b1608)}100%{background:transparent}}
/* D-321 HOLO-MOBILE-1 (approved holo-mobile-ux-directions-v1, layout A): a tap picks a holocard and this panel shows it whole with
   one action button; in a raid it sits at the top of the shop dock under the gold / level / lives strip, in the Temple it sticks to the
   bottom of the screen. On a phone the deck rides above the collection as a strip of portraits. */
.ho .ho-dhud{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;background:#1d1d3a;color:#fff;padding:5px 10px;font:14px var(--pixel)}
.ho .ho-dhud .ho-g{color:#ffd23f}
.ho .ho-dhud small,.ho .ho-rbar small{font-size:11px;color:#cfd}
.ho .ho-dhud .ho-lv{display:inline-flex;align-items:center;gap:5px}
.ho .ho-dhud .ho-h{color:#ff8a7a;letter-spacing:1px}
.ho .ho-dhud .ho-bump{animation:ho-bump 1.1s ease-out}
.ho .ho-dhud .ho-bump small{color:inherit!important}
@media (prefers-reduced-motion:reduce){.ho .ho-dhud .ho-bump{animation:none}}
.ho .ho-pick{margin:6px 8px 0;padding:8px;background:var(--kbg-fffbe6,#fffbe6);border:2px solid var(--gold);color:var(--ink)}
.ho>.ho-pick{position:sticky;bottom:var(--ho-railh,0px);z-index:6;margin:8px 0 0;box-shadow:0 -6px 18px rgba(0,0,0,.28)}
.ho .ho-pk{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:start}
.ho .ho-pk-art{width:72px;height:72px;image-rendering:pixelated;border:2px solid var(--cc,#6a7080);background:#2a2d48;display:block}
.ho .ho-pk-art.unk{filter:brightness(0) invert(.23)}
.ho .ho-pk-main{min-width:0}
.ho .ho-pk-name{display:block;font:17px/1.25 var(--pixel);font-weight:400}
.ho .ho-pk-star{color:var(--kfg-8a5a00,#8a5a00)}
.ho .ho-pk-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:3px 0 4px}
.ho .ho-pk-chips .ho-fb,.ho .ho-pk-chips .ho-rb{font-size:12px;line-height:17px;padding:0 5px}
.ho .ho-pk-cost{font:12px/17px var(--pixel);padding:0 5px;color:#fff;background:var(--c);border-radius:2px}
.ho .ho-pk-ab{font-size:13.5px;line-height:1.45}
.ho .ho-pk-ab b{font:13.5px var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo))}
.ho .ho-pk-st{font-size:12.5px;color:var(--mute);margin-top:2px}
.ho .ho-pk-tr{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.45;margin-top:4px;color:var(--mute)}
.ho .ho-pk-tr b{font:12px var(--pixel);font-weight:400;color:var(--ink)}
.ho .ho-pk-tr i{font-style:normal}
.ho .ho-pk-tr i.on{color:var(--ok);font-weight:700}
.ho .ho-pk-mod{margin:6px 0 0}
.ho .ho-pk-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.ho .ho-pk-acts .btn{min-height:40px}
.ho .ho-pk-go{flex:1 1 auto;font-size:15px}
.ho .ho-pk-note{order:9;flex:1 1 100%;color:var(--mute)}
.ho .ho-pk-x{margin-left:auto;min-width:44px}
.ho .ho-pkhint,.ho .ho-dstrip{display:none}
@media (max-width:720px){
  .ho .ho-pkhint{display:block;position:sticky;bottom:var(--ho-railh,64px);z-index:5;margin:8px 0 0;padding:8px 10px;background:#1d1d3a;color:#fff;font:12.5px var(--pixel);text-align:center}
  .ho .ho-dstrip{display:block;position:sticky;top:0;z-index:6;margin:0 0 8px;padding:6px 8px;background:#1d1d3a;color:#fff;border-bottom:2px solid var(--gold)}
  .ho .ho-ds-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:14px var(--pixel)}
  .ho .ho-dstrip .ho-cnt{font:12px var(--pixel);color:#cfd;background:none;border:0;padding:0}
  .ho .ho-dstrip .ho-cnt.bad{color:#ff8a7a}
  .ho .ho-ds-row{display:flex;gap:3px;overflow-x:auto;padding:5px 0 3px}
  .ho .ho-ds-c{flex:none;width:40px;height:40px;padding:0;border:2px solid var(--cc,#6a7080);background:#2a2d48;cursor:pointer}
  .ho .ho-ds-c img{width:100%;height:100%;image-rendering:pixelated;display:block}
  .ho .ho-ds-c.sel{outline:2px solid #ffd23f;outline-offset:1px}
  .ho .ho-ds-c.c2{--cc:#1d6b3a}.ho .ho-ds-c.c3{--cc:#2e5fb0}.ho .ho-ds-c.c4{--cc:#7a4fb0}.ho .ho-ds-c.c5{--cc:#a87a00}
  .ho .ho-ds-ori{display:flex;flex-wrap:wrap;gap:3px 8px;font:12px var(--pixel)}
  .ho .ho-ds-ori .ho-fb{font-size:11px}
}
/* on a phone the raid panel stays compact, so the grid above the dock stays in view while a picked card moves */
@media (max-width:720px){.ho .ho-dock .ho-pick{padding:6px}.ho .ho-dock .ho-pk{grid-template-columns:56px minmax(0,1fr);gap:8px}.ho .ho-dock .ho-pk-art{width:56px;height:56px}.ho .ho-dock .ho-pk-name{font-size:15px}.ho .ho-dock .ho-pk-ab{font-size:12.5px;line-height:1.35}.ho .ho-dock .ho-pk-st{font-size:11.5px}.ho .ho-dock .ho-pk-tr{font-size:11px;line-height:1.35}.ho .ho-dock .ho-pk-acts{margin-top:6px}}
.ho .ho-buffs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:5px 8px;margin:0 0 6px;background:var(--kbg-fff,#fff);border:1px solid var(--bev1)}
.ho .ho-buffs .ho-traits{display:inline-flex;flex-wrap:wrap;gap:4px;padding:0}
.ho .ho-bchip{font:11.5px/1.45 var(--pixel);border:1px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);padding:1px 7px;cursor:pointer;border-radius:0}
.ho .ho-bchip.on{outline:2px solid var(--gold);outline-offset:1px}
.ho .ho-bchip.ho-baug{border-color:#b08a2a;background:var(--kbg-fff8dc,#fff8dc)}
.ho .ho-bchip.ho-bmod{border-color:#2e6fd0;background:var(--kbg-eef4ff,#eef4ff)}
.ho .ho-bchip.ho-bbag{border-style:dashed}
.ho .ho-bchip.ho-tr{color:var(--mute)}
.ho .ho-bchip.ho-tr.ho-on{border-color:var(--ok);background:var(--kbg-eefaf0,#eefaf0);color:var(--ink)}
.ho .ho-hudpop{position:relative;margin:0 0 6px;padding:8px 44px 8px 10px;background:var(--iv);border:2px solid var(--indigo-fg,var(--indigo));font-size:13px;line-height:1.5}
.ho .ho-hudpop b{font:13px var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo))}
.ho .ho-hudpop>.btn{position:absolute;right:6px;top:6px}
.ho .ho-map{flex-wrap:nowrap;gap:8px;margin:0 0 8px;background:var(--kbg-fff,#fff);border:1px solid var(--bev1);cursor:pointer}
.ho .ho-map>b{font:12px var(--pixel);font-weight:400;flex:none}
.ho .ho-map .ho-mfull{border:0;background:none;padding:0;font:15px var(--pixel);color:var(--mute);flex:none}
.ho .ho-msvg{display:block;flex:1;min-width:0;width:100%;max-width:520px;height:auto}
.ho .ho-msvg.big{max-width:300px;margin:4px auto}
.ho .ho-msvg line{stroke:#9da0c8;stroke-width:1.5;stroke-dasharray:3 3}
.ho .ho-msvg line.lit{stroke:#d39b16;stroke-width:3;stroke-dasharray:none}
.ho .ho-msvg circle{fill:#fff;stroke:#666699;stroke-width:2}
.ho .ho-msvg .done circle{fill:#d7dbec;stroke:#9da0c8}
.ho .ho-msvg .now circle{fill:#ffd23f;stroke:#8a5a00}
.ho .ho-msvg .pick{cursor:pointer}
.ho .ho-msvg .pick circle{fill:#fff7df;stroke:#d39b16;animation:ho-mpulse .9s ease-in-out infinite alternate}
.ho .ho-msvg text{font:10px var(--pixel);text-anchor:middle;fill:#1d1d3a;pointer-events:none}
.ho .ho-msvg.big text{font-size:13px}
.ho .ho-msvg .done text{fill:#7a7da0}
@keyframes ho-mpulse{to{stroke-width:4.5}}
.ho .ho-mapmodal>div{border-color:var(--indigo-fg,var(--indigo));max-width:340px}
.ho .ho-mapmodal h4{display:flex;justify-content:space-between;align-items:center;color:var(--indigo-fg,var(--indigo))}
.ho .ho-fightbox .ho-fctl{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px}
.ho .ho-result{display:grid;gap:2px;margin:0 0 8px;padding:7px 10px;background:var(--iv);border:2px solid var(--ok);font-size:13px}
.ho .ho-result.loss{border-color:var(--bad)}
.ho .ho-result>b{font:14px var(--pixel);font-weight:400;color:var(--ok)}
.ho .ho-result.loss>b{color:var(--bad)}
.ho .ho-benchl{padding:0 10px;margin:0 0 2px}
.ho .ho-bench .ho-cell{min-height:100px}
.ho .ho-dock{position:relative;z-index:4;margin:6px 0 10px;background:var(--kbg-fff,#fff);border:1px solid var(--bev2);border-top:3px solid var(--indigo-fg,var(--indigo));box-shadow:0 -4px 12px rgba(27,31,107,.14)}
.ho .ho-dock .ho-hudpop{margin:6px 8px 0}
.ho .ho-deckl{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px 10px 0}
.ho .ho-deckl .ho-gl{margin:0}
.ho .ho-dchip{font:11px/1.5 var(--pixel);border:1px solid var(--ok);background:var(--kbg-eefaf0,#eefaf0);padding:0 6px;color:var(--ink)}
.ho .ho-bchip.ho-dout{border-color:var(--bev2);background:var(--kbg-e9e9f2,#e9e9f2);color:var(--mute);font-size:11px;padding:0 6px}
.ho .ho-bchip.ho-dlock{border-color:var(--bev2);color:var(--mute);font-size:11px;padding:0 6px}
.ho .ho-next{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin:6px 10px 0;padding:3px 8px;font-size:12.5px;background:var(--kbg-eefaf0,#eefaf0);border:1px solid var(--ok)}
.ho .ho-next img{width:24px;height:24px;image-rendering:pixelated;border:1px solid var(--bev2);background:#2a2d55}
.ho .ho-dock .ho-shopl{padding:0 10px;margin:6px 0 0}
.ho .ho-poor .hk{opacity:.5}
.ho .ho-poor .ho-price{color:var(--bad)}
.ho .ho-ctl .ho-ready{margin-left:auto}
.ho .ho-dock.ho-veil .ho-shop,.ho .ho-dock.ho-veil .ho-deckl,.ho .ho-dock.ho-veil .ho-next,.ho .ho-dock.ho-veil .ho-shopl{opacity:.35;pointer-events:none}
@media (max-width:720px){.ho .ho-dock{position:sticky;bottom:var(--ho-railh,64px)}}
@media (prefers-reduced-motion:reduce){.ho .ho-msvg .pick circle{animation:none;stroke-width:3.5}.ho .ho-rbar .ho-bump{animation:none}}
@container (max-width:560px){
  .ho .ho-hud .ho-vs{grid-template-columns:auto auto;justify-content:space-between;gap:8px;padding:6px 8px}
  .ho .ho-hud .ho-gr{grid-template-columns:repeat(3,58px);gap:4px}
  .ho .ho-hud .ho-gr .hk.fa{zoom:.58}
  .ho .ho-hud .ho-gr .ho-cell{width:58px;min-height:58px}
  .ho .ho-hud .ho-foe .ho-gr{grid-template-columns:repeat(3,46px)}
  .ho .ho-hud .ho-foe .hk.fa{zoom:.46}
  .ho .ho-hud .ho-foe .ho-cell{width:46px;min-height:46px}
  .ho .ho-hud .ho-bench{grid-template-columns:repeat(6,52px);gap:4px;padding:2px 8px 6px}
  .ho .ho-hud .ho-bench .hk.fa{zoom:.52}
  .ho .ho-hud .ho-bench .ho-cell{width:52px;min-height:52px}
  .ho .ho-hud .ho-shop{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px 8px}
  .ho .ho-hud .ho-shop .hk.fa{zoom:.6}
  .ho .ho-hud .ho-shop .ho-cell{width:60px!important;min-height:60px}
  .ho .ho-hud .hk.fa>.fa-name b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .ho .ho-hud .ho-foe .hk.fa>.fa-name b{font-size:19px}
  .ho .ho-hud .ho-ctl{padding:6px 8px;gap:4px}
  .ho .ho-hud .ho-ctl .btn{padding-left:8px;padding-right:8px}
  .ho .ho-hud .ho-gl{font-size:11px}
}
@container (max-width:560px){.ho .ho-hud .ho-wl{display:none}.ho .ho-hud .ho-ctl{flex-wrap:nowrap}.ho .ho-hud .ho-ctl .ho-ready{white-space:nowrap}.ho .ho-hud .ho-next{font-size:11.5px;padding:2px 6px;margin-top:4px}.ho .ho-hud .ho-next img{width:20px;height:20px}.ho .ho-hud .ho-deckl{padding-top:4px}}
/* D-335 IMPRINT-SHELF: the 刻印 shelf under All materials; coloured seals by elite group stand in until the icons-v2 imprint set lands */
.imps-box{margin-top:10px;display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--bev2);padding-top:8px}
.imps-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}.imps-h b{color:var(--rare);font-size:13.5px}.imps-h span{font-size:11.5px;color:var(--mute)}
.mat.imp{font:inherit;color:inherit;text-align:left;cursor:pointer}.mat.imp:hover,.mat.imp:focus-visible{border-color:var(--rare)}
.mat.imp small{display:block;font-size:10.5px;line-height:1.25;color:var(--rare);margin-top:1px}
.seal{flex:0 0 auto;width:32px;height:32px;border-radius:4px;display:inline-grid;place-items:center;font:700 11px/1 var(--text);letter-spacing:-.5px;color:#fff6e6;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),inset 0 -5px 0 rgba(0,0,0,.18),0 1px 0 #1d1d3a}
.seal.off{background:#b5452f}.seal.def{background:#3b6ea8}.seal.ctl{background:#7650ae}.seal.dim{filter:grayscale(1) brightness(.6)}
.imps-fold{display:flex;justify-content:space-between;align-items:center;font:inherit;font-size:12px;color:var(--mute);background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);padding:6px 8px;cursor:pointer}
.imps-fold i{font-style:normal;color:var(--link)}
.imps-not{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.imp-u{display:flex;flex-direction:column;align-items:center;gap:3px;font:inherit;font-size:10.5px;color:var(--mute);background:none;border:0;padding:2px;cursor:pointer;min-width:0}
.imp-u span{max-width:100%;overflow-wrap:anywhere;text-align:center}
.imp-top{display:flex;gap:10px;align-items:center}.imp-top .seal{width:44px;height:44px;font-size:14px}.imp-top p{margin:0}
.imp-tg{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.imp-tg>div{display:flex;flex-direction:column;background:var(--iv);border:1px solid var(--bev1);padding:5px 8px}
.imp-tg b{color:var(--rare)}.imp-tg small{color:var(--mute);font-size:11px}
.imp-src{margin:2px 0 0;padding-left:1.1em;font-size:12.5px;display:flex;flex-direction:column;gap:2px}
@media (max-width:1000px){.imps-not{grid-template-columns:repeat(6,minmax(0,1fr))}.mat.imp{text-align:center}.mat.imp .seal{margin:auto}}
@media (max-width:420px){.imps-not{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ALBUM-PRIZE (D-330): 守 Keeper cards and the 卡冊 card meter */
.amtr{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px 9px;margin:0 0 8px}
.amtr .hd{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.amtr .hd b{font:14px var(--pixel);font-weight:400;color:var(--indigo-fg,var(--indigo))}.amtr .hd span{font-variant-numeric:tabular-nums;font-size:13px}
.amtr .mute{font-size:12px}.amtr .sure{border-top:1px dashed var(--kbd-c7c7dd,#c7c7dd);margin-top:4px;padding-top:4px;font-size:12px}.amtr .sure b{color:var(--indigo-fg,var(--indigo))}
.kp{display:grid;grid-template-columns:84px 1fr;gap:2px 12px;align-items:center;border:2px solid;border-color:#ffd23f #7a3d00 #7a3d00 #ffd23f;background:linear-gradient(var(--kbg-fff3c4,#fff3c4),var(--kbg-ffe2a0,#ffe2a0));padding:8px;max-width:520px;box-sizing:border-box}
.kp .kp-crest{grid-row:span 4}
.kp .nm{font:15px var(--pixel);color:var(--ink)}.kp .st{color:var(--kfg-7a3d00,#7a3d00);letter-spacing:1px}.kp .fx{font-weight:700;color:var(--kfg-127a36,#127a36)}.kp .how{font-size:12px;color:var(--mute)}
.kp.locked{border-style:dashed;background:var(--kbg-fffbe8,#fffbe8)}.kp.locked .fx{color:var(--ink)}
.kp-crest{position:relative;display:flex;align-items:center;justify-content:center;background:#2a2438;border:2px solid #8a6100;height:84px;box-sizing:border-box}
.kp-crest.off{background:var(--kbg-c9cce2,#c9cce2);border-style:dashed}
.kp-seal{position:absolute;right:-5px;bottom:-5px;background:#8a6100;color:#fff;font:13px var(--pixel);line-height:1.2;padding:0 4px;border:1px solid var(--kbd-fff3c4,#fff3c4)}
.kp-dots{white-space:nowrap}.kp-dots i{display:inline-block;width:8px;height:8px;border:1px solid #8a6100;background:var(--kbg-fff,#fff);margin-right:2px;vertical-align:-1px}.kp-dots i.y{background:#8a6100}
.hprize{margin:0 8px 4px;padding:4px 6px;font-size:12px;background:var(--kbg-fff3c4,#fff3c4);border:1px solid #c9a227}
.modal .box.kp-dlg{max-width:380px;border:2px solid;border-color:#ffd23f #5b3714 #5b3714 #ffd23f;max-height:calc(100vh - 32px);overflow:auto}
.kp-reveal{display:grid;justify-items:center;text-align:center;gap:8px}.kp-reveal .kp-crest{width:120px;height:110px}.kp-reveal p{margin:0}
.kp-kicker{font:12px var(--pixel);letter-spacing:.12em;color:var(--kfg-7a3d00,#7a3d00)}
.kp-nm{font:17px var(--pixel);font-weight:400;color:var(--ink)}.kp-fx{font-weight:700;color:var(--kfg-127a36,#127a36)}
.kp-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
@media (prefers-reduced-motion:no-preference){.kp-reveal .kp-crest{animation:kpglow 2.4s ease-in-out infinite}@keyframes kpglow{50%{box-shadow:0 0 14px #ffd23f}}}
/* REST-1 (D-334): the 休 Rest box on the stat sheet and the home Rest row (approved preview v2) */
.rz{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}.rz>.rzbar,.rz>.rz-key,.rz>.mute{grid-column:1/-1}.rz>.mute{margin:0}
.rz-num{border:1px solid var(--bev2);background:var(--kbg-fff,#fff);padding:6px 10px}
.rz-num b{display:block;font:22px var(--pixel);color:var(--indigo-fg,var(--indigo));font-weight:400;font-variant-numeric:tabular-nums}.rz-num span{font-size:12px;color:var(--mute)}
.rzbar{display:flex;height:12px;border:1px solid var(--bev2);background:var(--kbg-d4d6e8,#d4d6e8);overflow:hidden}.rzbar.mini{height:8px;margin-top:3px}.rzbar i{display:block;height:100%}
.rzbar .f,.rz-key .f{background:#5a63c8}.rzbar .w,.rz-key .w{background:#2d9f8c}.rzbar .d,.rz-key .d{background:#c0693a}
.rz-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;font-variant-numeric:tabular-nums}.rz-key span{display:inline-flex;align-items:center;gap:5px}.rz-key i{width:10px;height:10px;display:inline-block;border:1px solid var(--bev2)}
.restlink{color:inherit;text-decoration:none}.restlink:hover,.restlink:focus-visible{text-decoration:underline}
/* GEAR-CODEX (D-329; preview design/gear-codex-preview-v2.html, approved): the 裝備 Gear page in 収集. Found entries in their rarity frame, unfound
   ones a silhouette in a dashed frame; titan pieces carry a 泰坦 chip, relics a 遺物 mark. Tiles are 64 px art in a 72 px frame. */
.gc{container-type:inline-size}
.gc-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 10px}
.gc-sum button{display:grid;gap:1px;text-align:left;padding:6px 8px;border:2px solid var(--bev2);background:var(--kbg-fff,#fff);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.gc-sum button b{font:16px var(--pixel)}.gc-sum button small{font-size:11px;color:var(--mute);line-height:1.3}.gc-sum button span{font-size:12px;font-weight:700}
.gc-sum button:focus-visible,.gc-t:focus-visible{outline:2px solid var(--indigo-fg,var(--indigo));outline-offset:2px}
.gc-own{padding:0 10px 8px;font-size:12px;color:var(--mute)}
.gc-hd{display:flex;justify-content:space-between;align-items:baseline;gap:0 8px;flex-wrap:wrap;padding:6px 10px 4px;font:14px var(--pixel);border-top:1px solid var(--bev1);margin-top:4px;scroll-margin-top:8px}
.gc-hd span{font:12px var(--text);color:var(--mute)}
.gc-odds{margin:0 10px 8px;padding:6px 8px;border:1px dashed var(--bev2);background:var(--kbg-fff,#fff);font-size:12px;line-height:1.5}
.gc-week{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.gc-week i{font-style:normal;font-size:11px;padding:0 6px;border:1px solid var(--unique);color:var(--unique);background:var(--kbg-effaf5,#effaf5);white-space:nowrap}
.gc-sets{display:grid;grid-template-columns:1fr;gap:8px;padding:0 10px 10px}
@container (min-width:700px){.gc-sets{grid-template-columns:repeat(2,minmax(0,1fr))}.gc-sets.one{grid-template-columns:1fr}.gc-sum{grid-template-columns:repeat(3,minmax(0,220px))}}
.gc-set{border:2px solid var(--bev2);background:var(--kbg-fff,#fff);min-width:0}
.gc-set.done{border-color:var(--unique);background:var(--kbg-f3fbf7,#f3fbf7)}
.gc-sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:4px 8px;border-bottom:1px solid var(--bev1)}
.gc-sh b{font:14px var(--pixel)}.gc-sh .cnt{font-size:12px;color:var(--mute)}
.gc-sh .tchip{font-size:11px;padding:0 5px;border:1px solid #7a2e14;color:var(--kfg-7a2e14,#7a2e14);background:var(--kbg-fff1ea,#fff1ea);white-space:nowrap;line-height:18px}
.gc-sh .chip{margin-left:auto;font-size:11px;padding:0 6px;border:1px solid var(--bev2);color:var(--mute);white-space:nowrap;line-height:18px}
.gc-sh .chip.wk{border-color:var(--unique);color:var(--unique);background:var(--kbg-effaf5,#effaf5);font-weight:700}
.gc-sh .chip.lk{border-color:var(--legend);color:var(--legend);background:var(--kbg-fff8ea,#fff8ea)}
.gc-sh .chip.ok{border-color:var(--up);color:var(--up)}
.gc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px}
.gc-grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@container (min-width:700px){.gc-grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}.gc-grid.wide{grid-template-columns:repeat(7,minmax(0,1fr))}.gc-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}}
.gc-t{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px 4px;border:1px solid transparent;background:none;color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.gc-t:hover{border-color:var(--bev1)}.gc-t[aria-expanded="true"]{border-color:var(--indigo-fg,var(--indigo));background:var(--kbg-f4f5ff,#f4f5ff)}
.gc-t.still{padding:0;cursor:default;border:0}
.gc-f{position:relative;width:72px;height:72px;display:grid;place-items:center;border:2px solid var(--unique);background:var(--kbg-effaf5,#effaf5)}
.gc-t.named .gc-f{border-color:#c2502e;background:var(--kbg-fff3ee,#fff3ee)}
.gc-t.heir .gc-f{border-color:var(--heir);background:var(--kbg-f6f0ff,#f6f0ff)}
.gc-t.miss .gc-f{border-style:dashed;border-color:#9a9ab8;background:var(--kbg-f2f2f8,#f2f2f8)}
.gc-f .uart{margin:0}
.gc-t.miss .uart{filter:brightness(0);opacity:.22}
.gc-f .q{font:28px var(--pixel);color:#9a9ab8}
.gc-tit,.gc-rel{position:absolute;top:-1px;font-size:10px;line-height:14px;padding:0 3px;color:#fff;white-space:nowrap}
.gc-tit{left:-1px;background:#7a2e14}.gc-rel{right:-1px;background:var(--legend)}
.gc-n{font-size:11px;line-height:1.25;text-align:center;max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-t.miss .gc-n{color:var(--mute)}
.gc-peek{margin:0 6px 6px;display:grid;gap:6px;padding:8px;background:var(--kbg-fff,#fff);border:2px solid var(--unique)}
.gc-peek.named{border-color:#c2502e}.gc-peek.heir{border-color:var(--heir)}.gc-peek.miss{border-color:#9a9ab8;border-style:dashed}
.gc-ph{display:flex;gap:10px;align-items:center}.gc-ph>div{min-width:0}
.gc-ph b{display:block;font-size:15px}.gc-ph small{display:block;font-size:11px;color:var(--mute);line-height:1.4}.gc-ph small.ok-l{color:var(--up);font-weight:700}
.gc-where{padding:6px 8px;background:var(--kbg-fff8ea,#fff8ea);border:1px solid var(--kbd-e3c98a,#e3c98a);font-size:12.5px;line-height:1.5}
.gc-where.wk{background:var(--kbg-effaf5,#effaf5);border-color:var(--kbd-9fd3bd,#9fd3bd)}.gc-where.rd{background:var(--kbg-f6f0ff,#f6f0ff);border-color:var(--kbd-c9b3ea,#c9b3ea)}
.gc-tb{width:100%;border-collapse:collapse;background:none;font-size:12px;color:var(--ink)}
.gc-tb td{padding:3px 4px;border-top:1px solid var(--bev1);vertical-align:top;background:none}
.gc-tb td:first-child{width:5.5em;color:var(--mute);white-space:nowrap}
.gc-tb .flav{font-style:italic;color:var(--mute)}
/* THRONE-1 (D-341, grudge v0.2 §5, §5b; throne-preview-v1): the 擂台 card on home, the wanted board, the rule picker and the records.
   The dark seat band (.tseat) and the 通緝 tag (.twant) keep their colours in every skin (tools/skin-tokens.mjs KEEP). */
.thbox{padding:8px 12px 6px;display:grid;gap:8px}
.tseat{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:14px 12px 12px;margin:0 -12px;color:#e9e9ff;background:#11122e url(art/grudge/card.png) center 40%/cover no-repeat;image-rendering:pixelated;border-bottom:3px solid #e8c45a}
.tseat::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#11122ed1,#11122e59)}
.tseat>*{position:relative}
.tseat .tbust{position:relative;width:84px;height:84px;border:2px solid #e8c45a;background:#1b1d48;display:grid;place-items:center;line-height:0;image-rendering:auto}
.tseat .tbust img{image-rendering:pixelated}
.tseat .tbust>.pf{width:80px;height:80px;border:0;box-shadow:none}.tseat .tbust>.pf img,.tseat .tbust>.pf canvas{width:80px;height:80px}/* a player champion's 96 px portrait fits the 80 px seat like the old champ */
.tseat .tcrown{position:absolute;top:-16px;left:50%;transform:translateX(-50%)}
.tseat .tid{display:grid;gap:4px;min-width:0;image-rendering:auto}
.tseat .tk{font:12px var(--text);color:#e8c45a;letter-spacing:.06em}
.tseat .tid b{font:24px/1 var(--pixel);font-weight:400;text-shadow:2px 2px 0 #000;overflow-wrap:anywhere}
.tseat .tid small{font-size:12px;text-shadow:1px 1px 0 #000}
.tseat .tchips{display:flex;flex-wrap:wrap;gap:6px}
.tseat .tchip{display:inline-flex;align-items:center;gap:6px;font:12px/1.2 var(--text);padding:3px 8px 3px 4px;background:#11122eb3;border:1px solid #a9abd6;color:#e9e9ff;max-width:100%}
.tseat .tchip.trule{border-color:#e8c45a;color:#ffe7a1}.tseat .tchip.trust{border-color:#f0a070;color:#ffc9a6}
.tart{display:inline-block;flex:none;background-repeat:no-repeat;image-rendering:pixelated;vertical-align:middle}
.tmark{margin-left:4px}
.tact{display:grid;gap:8px}.tact .tgo img{width:24px;height:24px}.tact .cta{width:100%;justify-content:center;min-height:44px}
.tmine,.tlock{margin:0}.tlock{border:1px dashed #666699;background:var(--kbg-eef0f8,#eef0f8);padding:8px 10px;font-size:13px}
.twant{display:inline-block;white-space:nowrap;font:13px var(--pixel);color:#fff;background:#b3261e;padding:1px 8px;transform:rotate(-3deg);box-shadow:2px 2px 0 #5a0f0b;margin-left:4px}
.tnews{list-style:none;margin:0;padding:0;display:grid}
.tln{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--kbd-ccccff,#ccccff)}
.tln:first-child{border-top:0}
.tlt{display:grid;min-width:0;line-height:1.35}.tlt small{font-size:12px;color:var(--kfg-4d4d6e,#4d4d6e);overflow-wrap:anywhere}.tlt b{font:15px var(--pixel);font-weight:400;color:var(--kfg-1b1f6b,#1b1f6b)}
.twanted{display:grid}.twh{font:15px var(--pixel);color:var(--kfg-1b1f6b,#1b1f6b);padding:4px 0}
.twrow{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--kbd-ccccff,#ccccff)}
.gmodal .box.trules,.gmodal .box.trec{max-width:520px}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.trb{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;text-align:left;font:12px/1.35 var(--text);background:var(--kbg-fff,#fff);color:var(--kfg-1d1d3a,#1d1d3a);border:1px solid #666699;padding:8px;cursor:pointer;min-height:64px}
.trb[aria-pressed="true"]{border:2px solid #1b1f6b;background:var(--kbg-eef0ff,#eef0ff)}
.trtab{width:100%;border-collapse:collapse}.trtab td{padding:6px 8px;border-bottom:1px solid var(--kbd-ccccff,#ccccff)}.trtab td.n{text-align:right;font:15px var(--pixel);white-space:nowrap}
@media (max-width:340px){.tgrid{grid-template-columns:minmax(0,1fr)}}
/* D-315 (damage v0.1, direction A): the stat sheet's bucket ladder ([+] adds inside a bucket, [×] multiplies) */
.bk{border:1px solid var(--bev2);background:var(--iv);padding:6px 8px;margin:6px 0;display:grid;gap:2px}
.bk.add{border-color:var(--up)}.bk.mul{border-color:var(--dn)}.bk.cond{border-style:dashed;background:transparent}
.bk-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:700}.bk.add .bk-n{color:var(--up)}.bk.mul .bk-n{color:var(--dn)}
.bk-r{font:15px var(--pixel);color:var(--indigo-fg,var(--indigo));text-align:right;font-variant-numeric:tabular-nums}.bk-f{font-size:12px;color:var(--mute);text-align:right}
/* MARKET-1 (market v0.1, D-294; preview design/market-preview-v2.html): the 市集 Market screen, its dialogs and the home box. Hosted only.
   Every class is mk-prefixed (.lrow, .chips and .tabs already mean other things here). */
.mk-root{container-type:inline-size;container-name:mk;background:var(--iv);border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1)}
.mk-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--bev2)}
.mk-stats{display:flex;flex-wrap:wrap;gap:4px}
.mk-chip{background:var(--kbg-fff,#fff);border:1px solid var(--kbd-b9b9d6,#b9b9d6);padding:1px 8px;font-size:12px}
.mk-root>.notice{margin:8px 10px 0}
.mk-tabs{display:flex;flex-wrap:wrap;border-bottom:3px double var(--bev2)}
.mk-tab{position:relative;flex:1 1 auto;min-width:0;background:var(--iv);color:var(--ink);border:0;border-right:1px solid var(--bev1);padding:8px 6px;font:inherit;cursor:pointer;text-align:center;min-height:44px}
.mk-tab b{display:block;font:15px/1.2 var(--pixel);font-weight:400}.mk-tab small{display:block;font-size:11px;color:var(--mute)}.mk-tab small:empty{display:none}
.mk-tab[aria-selected="true"]{background:var(--indigo);color:var(--iv-fg,var(--iv))}.mk-tab[aria-selected="true"] small{color:#d4d8ff}
.mk-badge{display:inline-block;background:var(--badge);color:#fff;font:700 11px/18px var(--text);min-width:18px;padding:0 5px;border-radius:9px;margin-left:4px}.mk-badge-n{background:var(--bev2-bg,var(--bev2))}
.mk-tab:focus-visible,.mk-rh:focus-visible,.mk-ct:focus-visible,.mk-seg button:focus-visible,.mk-chips button:focus-visible{outline:3px solid #946000;outline-offset:1px}
.mk-panel{padding:10px}
.mk-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-bottom:10px}
.mk-filters label,.mk-lab{display:grid;gap:2px;font-size:12px;color:var(--mute)}.mk-lab>span{font-weight:700}
.mk-filters h4{margin:0;font:15px var(--pixel);font-weight:400}.mk-grow{flex:1 1 220px;margin:0}.mk-right{margin-left:auto}
.mk-root select,.mk-root input[type=number],.mk-root input[type=search],.mk-dlg select,.mk-dlg input[type=number]{background:var(--kbg-fff,#fff);color:var(--ink);border:1px solid var(--bev2);font:inherit;font-size:13px;padding:5px 6px;min-height:34px;max-width:100%}
.mk-seg{display:inline-flex;border:1px solid var(--bev2);flex-wrap:wrap}.mk-seg button{background:var(--kbg-fff,#fff);color:var(--ink);border:0;padding:6px 11px;font:inherit;font-size:13px;cursor:pointer;min-height:34px}
.mk-seg button+button{border-left:1px solid var(--bev2)}.mk-seg button[aria-pressed="true"]{background:var(--indigo);color:var(--iv-fg,var(--iv))}.mk-seg button:disabled{opacity:.5;cursor:default}
.mk-lhead,.mk-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,.9fr) minmax(0,1.4fr) minmax(0,.9fr) minmax(120px,auto);gap:10px;align-items:start}
.mk-lhead{font-size:12px;color:var(--mute);padding:4px 8px;border-bottom:2px solid var(--bev1)}
.mk-row{padding:9px 8px;border-bottom:1px solid var(--bev1)}.mk-row.mine{background:var(--kbg-fff8df,#fff8df)}
.mk-cell{min-width:0;font-size:13px}.mk-acts{display:flex;flex-wrap:wrap;gap:6px}
.mk-empty{padding:16px;color:var(--mute);text-align:center;border:1px dashed var(--bev1);font-size:13px}
.mk-it{display:flex;gap:8px;align-items:flex-start;min-width:0;margin-bottom:6px}.mk-it:last-child{margin-bottom:0}
.mk-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--bev1);background:var(--kbg-f3f4fb,#f3f4fb);overflow:hidden}
.mk-ic>*{max-width:36px;max-height:36px}.mk-ic.magic{border-color:var(--magic)}.mk-ic.rare{border-color:var(--rare)}.mk-ic.legend{border-color:var(--legend);box-shadow:inset 0 0 0 2px var(--legend)}
.mk-ic.big{width:64px;height:64px}.mk-ic.big>*{max-width:60px;max-height:60px}
.mk-nm{min-width:0}.mk-nm b{display:block;font-size:13px;line-height:1.3;overflow-wrap:anywhere}.mk-nm small{display:block;font-size:11.5px;color:var(--mute)}.mk-nm small.up{color:var(--up);font-weight:700}
.mk-aff{margin:2px 0 0;padding-left:16px;font-size:12px}.mk-aff li{margin:0}
.mk-tag{display:inline-block;font:700 10.5px var(--text);padding:0 6px;border:1px solid currentColor;margin:2px 4px 0 0;white-space:nowrap}
.mk-tag.bound,.tag.bound{color:var(--rare)}.mk-tag.mine{color:var(--up)}
.mk-gold{font-weight:700}
.mk-time{font-size:12px}.mk-time i{display:block;height:5px;background:var(--kbg-d4d6e8,#d4d6e8);border:1px solid var(--bev2);margin-top:3px}.mk-time i b{display:block;height:100%;background:#c98a12}
.mk-sub{margin:16px 0 8px;font:15px var(--pixel);font-weight:400}
.mk-cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.mk-card{border:1px solid;border-color:var(--bev1) var(--bev2) var(--bev2) var(--bev1);background:var(--kbg-fff,#fff);padding:10px;display:grid;gap:8px;align-content:start}
.mk-card h4{margin:0;font-size:13px}
.mk-swap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:start}.mk-swap .mk-ar{font-size:20px;align-self:center;text-align:center}
.mk-note{font-size:12.5px;border:1px solid var(--bev1);padding:4px 8px;background:var(--kbg-f3f4fb,#f3f4fb)}
.mk-err{color:var(--dn);font-size:12.5px}.mk-err:empty{display:none}
/* the card book */
.mk-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:4px}
.mk-need{border:1px solid var(--bev1);background:var(--kbg-fff,#fff);padding:5px 8px;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"nt nt btn" "ns nl btn";column-gap:8px;row-gap:1px;align-items:center}
.mk-nt{grid-area:nt;display:flex;gap:8px;align-items:center;min-width:0}.mk-nt canvas{flex:none;width:32px;height:32px}.mk-nt .mk-nm{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mk-ns{grid-area:ns;font-size:12px;font-weight:700}.mk-nl{grid-area:nl;font-size:11.5px;color:var(--mute);justify-self:end;white-space:nowrap}.mk-need .btn{grid-area:btn}
.mk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 8px}
.mk-chips button{background:var(--kbg-fff,#fff);color:var(--ink);border:1px solid var(--bev2);padding:5px 10px;font:inherit;font-size:13px;cursor:pointer;border-radius:16px;min-height:34px}
.mk-chips button[aria-pressed="true"]{background:var(--indigo);color:var(--iv-fg,var(--iv))}
.mk-search{display:grid;gap:2px;margin-bottom:10px}.mk-search input{width:100%}
.mk-reg{border:1px solid var(--bev1);margin-bottom:8px}
.mk-rh{width:100%;display:flex;gap:8px;align-items:center;background:var(--cy);color:var(--ink);border:0;padding:10px;font:inherit;cursor:pointer;text-align:left;min-height:44px}
.mk-rt{font:15px var(--pixel);flex:1}.mk-rc{font-size:13px;color:var(--mute)}
.mk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;padding:8px}
.mk-ct{border:2px solid var(--bev1);background:var(--kbg-fff,#fff);color:var(--ink);padding:6px;display:grid;gap:3px;text-align:left;font:inherit;cursor:pointer;min-width:0;align-content:start}
.mk-ct.miss{border-style:dashed;background:var(--kbg-f4f4f8,#f4f4f8)}
.mk-ctop{display:flex;justify-content:space-between;align-items:flex-start;gap:4px;background:var(--kbg-f3f4fb,#f3f4fb);padding:4px}.mk-ctop canvas{width:44px;height:44px}
.mk-cb{display:grid;gap:3px;justify-items:end;min-width:0}
.mk-sock{color:var(--up);font-size:15px;line-height:1;font-weight:700;border:1px solid var(--up);padding:0 3px}
.mk-lst{background:var(--indigo);color:var(--iv-fg,var(--iv));font-size:10.5px;padding:0 5px;white-space:nowrap}
.mk-cn{font-size:12.5px;line-height:1.25;overflow-wrap:anywhere}
.mk-pips{font-size:12px;letter-spacing:1px;line-height:1}.mk-pips .on{color:var(--rare)}.mk-pips .off{color:var(--mute)}
.mk-bar2{display:block;height:5px;background:var(--kbg-d4d6e8,#d4d6e8);border:1px solid var(--bev2)}.mk-bar2 i{display:block;height:100%;background:#c98a12}
.mk-bl{font-size:11px;color:var(--mute)}
/* dialogs (the game's .modal) */
.modal .box.mk-dlg{max-width:560px;width:100%;max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.mk-dlg>h3{align-items:center}.mk-dlg .mk-x{margin-left:auto;min-height:28px}
.mk-bd{display:grid;gap:10px;overflow:auto;min-height:0}.mk-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;border-top:1px solid var(--bev1)}
.mk-col{display:grid;gap:8px}.mk-col[hidden]{display:none}
.mk-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mk-cols h4{margin:0 0 4px;font-size:14px}
.mk-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}.mk-dl dt{color:var(--mute)}.mk-dl dd{margin:0;text-align:right}
.mk-opts{display:grid;gap:6px;max-height:240px;overflow:auto;padding:2px}
.mk-opt{display:flex;gap:8px;align-items:flex-start;border:2px solid var(--bev1);padding:6px;background:var(--kbg-fff,#fff);cursor:pointer}
.mk-opt>input[type=checkbox],.mk-opt>input[type=radio]{margin-top:10px;width:18px;height:18px;flex:none}.mk-opt .mk-it{flex:1;margin:0}
.mk-opt:has(input:checked){border-color:var(--up);background:var(--kbg-eefbe9,#eefbe9)}
.mk-qn{width:70px;align-self:center;flex:none}
.mk-lk{display:flex;gap:8px;align-items:flex-start;border:2px dashed var(--bev1);padding:6px;background:var(--kbg-f4f4f8,#f4f4f8);color:var(--mute);flex-wrap:wrap}
.mk-lk .mk-it{margin:0;flex:1 1 150px}.mk-lk .mk-nm b,.mk-lk .mk-nm small{color:var(--mute)}
.mk-why{flex:1 1 100%;font-size:12px;color:var(--ink);background:var(--kbg-fff,#fff);border:1px solid var(--bev1);padding:4px 8px}
.mk-check{display:flex;gap:8px;align-items:center;font-size:13px}.mk-check input{width:18px;height:18px}
.mk-step{display:flex;gap:4px;align-items:center}.mk-step input{width:96px;text-align:center}.mk-step .btn{min-width:38px}
.mk-efx{margin:0;padding:0;list-style:none;display:grid;gap:3px}.mk-efx li{border:1px solid var(--bev1);padding:3px 8px;font-size:13px}.mk-efx li.cur{border-color:var(--up);background:var(--kbg-eefbe9,#eefbe9)}
.mk-lr2{display:flex;justify-content:space-between;gap:8px;align-items:center;border:1px solid var(--bev1);padding:6px 8px;margin-top:4px;font-size:13px}
.mk-toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--indigo);color:var(--iv-fg,var(--iv));border:1px solid var(--kbd-ffffff66,#ffffff66);padding:8px 14px;z-index:80;max-width:min(92vw,520px);font-size:13px}
/* the home box */
.mk-home ul{margin:0 0 8px;padding-left:18px;font-size:13px}.mk-home li{margin:2px 0}.mk-home .mk-wait{font-weight:700}
@container mk (max-width:640px){
  .mk-lhead{display:none}
  .mk-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .mk-cell[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--mute)}
  .mk-acts .btn{flex:1 1 40%;min-height:40px}
  .mk-tab{flex:1 1 30%}
  .mk-swap{grid-template-columns:minmax(0,1fr)}.mk-swap .mk-ar{transform:rotate(90deg)}
  .mk-right{margin-left:0;width:100%}
}
@media (max-width:640px){.mk-cols{grid-template-columns:minmax(0,1fr)}.modal .box.mk-dlg{max-height:calc(100vh - 16px)}}