/* Borrowed Blades - one look: square plates, the game's own hues, outlined words, nothing in the middle of the view. */
:root {
  --bg: #120e0c; --plate: #241b16; --plate2: #2e231c; --rim: #0d0907; --line: #4a3a2e;
  --ink: #f3ead8; --dim: #c2b49a; --gold: #e2b44a; --hp: #d8443a; --xp: #9b5cff; /* 0.7.9 XP is violet (his "CHANGE XP OVERALL TO PURPLE") */
  --guild: #2f5f9e; --guild-d: #1a3966; --u: 14px; --door: 64px; --act: 60px; --atk: 74px; --xph: 24px; --blade: 340px; --map: 172px; /* --xph 20 -> 24 (0.7): the bar carries its level plate */
  --out: 0 2px 0 #0e080a, 2px 0 0 #0e080a, -2px 0 0 #0e080a, 0 -2px 0 #0e080a, 1.5px 1.5px 0 #0e080a, -1.5px 1.5px 0 #0e080a, 1.5px -1.5px 0 #0e080a, -1.5px -1.5px 0 #0e080a;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  /* THE LAYER LADDER (0.7.2, his "ENSURE ALL TEXTS AND BUTTONS ARE POSITIONED CORRECTLY"; Floater X 4.4556): every layer's z-index by its JOB, lowest
     first, read from here and typed nowhere else. A toast, an ask or a moment can be raised by a press inside ANY window, so the card
     layer stands above every window (the toasts at 20 drew under the window at 40, so no toast was ever seen with a window open). */
  --z-over: 5; --z-hurt: 8; --z-stick: 9; --z-hud: 10; --z-hudfx: 11; --z-prompt: 12; --z-roomtitle: 15; --z-dstrip: 19; --z-fade: 30;
  --z-window: 40; --z-talk: 55; --z-title: 60; --z-creator: 62;
  --z-notes: 70; --z-pcard: 71; --z-ask: 72; --z-moment: 73; --z-lvlcard: 74; --z-wedcard: 75; --z-loader: 78; --z-conn: 80; --z-rotate: 90;
}
body.touch, body.short { --u: 10px; --door: 52px; --act: 54px; --atk: 82px; --xph: 18px; --blade: 250px; --map: 108px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; font-family: Nunito, 'Cairo', system-ui, sans-serif; font-weight: 700;
  -webkit-user-select: none; user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; border: 0; padding: 0; cursor: pointer; background: none; }
.ic svg, .ic { display: block; }
.ic svg { width: 100%; height: 100%; }
h1, h2, h3, .lc-big, #roomtitle b, .door .w, .press { font-family: 'Lilita One', 'Lalezar', system-ui, sans-serif; font-weight: 400; letter-spacing: .3px; }

/* ---------------- the HUD: one frame around the play, nothing standing in the middle of the view */
#world, #over { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hudfx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: var(--z-hudfx); } /* 0.7.4: the XP motes fly over the HUD into the bar */
#over { z-index: var(--z-over); touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-hud); }

/* THE XP BAR: across the foot of the glass, one unit in from every edge; the level at each end, the figures on it */
/* THE XP BAR (0.7, his "CONNECT IT WITH THE XP BAR AND IMPROVE THE VISUALS"): ONE rim holds the level plate and the track; the fill is lit
   from above with a bright pouring edge; the ghost leads a gain; the ticks mark tenths; the figures centred, the percent at the far end */
/* 2026-10-06 (his "THE WAY WE ARE DISPLAYING THE LEVEL IS BAD, IT LOOKS AI MADE" / "THE LEVEL SPECIFICALLY AND ITS BOX"): the two-tone
   level box is gone. The level stands BARE at the bar's left end, as the gold does above it (the stats stand bare): a small "Lv" in the
   XP hue and the figure in the title face, outlined, nothing behind. The rim holds the track alone; the fill is one hue lit softly from
   above (no hard bands, no glow) and its pouring edge a plain 2 px line. */
#xp { position: absolute; left: calc(var(--u) + var(--sl)); right: calc(var(--u) + var(--sr)); bottom: calc(var(--u) + var(--sb)); height: var(--xph); display: flex;
  align-items: center; gap: calc(var(--u) * .7); }
#xp .xlv { flex: none; display: flex; align-items: baseline; gap: 4px; padding-left: 2px; }
#xp .xlw { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: calc(var(--xph) * .66); line-height: 1; color: #cfaeff; text-shadow: var(--out); }
#xp .xl { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: calc(var(--xph) + 6px); line-height: .8; color: #fff; text-shadow: var(--out); }
#xp .xtrack { position: relative; flex: 1; align-self: stretch; background: #1d1330; box-shadow: 0 0 0 2px #0e080a, 0 4px 0 rgba(0,0,0,.28), 0 0 14px rgba(155,92,255,.28); overflow: hidden; }
#xp .xghost { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(196,150,255,.34); }
#xp .xfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#d2b0ff, #b07cff 30%, var(--xp) 62%, #6a2fd0); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(40,8,90,.35); }
#xp .xfill::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: #f6eeff; box-shadow: 0 0 6px 1px #d9b8ff; }
#xp .xticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(8,14,18,.42) calc(10% - 1px) 10%); }
#xp .xt, #xp .xpc { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; white-space: pre; font-family: 'Lilita One', 'Lalezar'; font-weight: 400;
  font-size: calc(var(--xph) - 7px); line-height: 1; color: #fff; text-shadow: 0 1.5px 0 #0e080a, 1.5px 0 0 #0e080a, -1.5px 0 0 #0e080a, 0 -1.5px 0 #0e080a; }
#xp .xt { left: 0; right: 0; justify-content: center; }
#xp .xpc { right: 10px; color: #ecdeff; }
/* 0.7.4 THE GAIN (his "ensure ... XP GAIN VISUALS ... ARE ALL TOP TIER"): at rest the bar stays calm (XB3); a gain is a moment: "+N XP" with
   XP's laurel in front of the figures (it pops on each landing and fades), a light runs once along the fill, and a level-up pops the level
   and sweeps the bar with a flash. The motes themselves fly on #hudfx (main.js xpFrame). */
#xp .xfill { overflow: hidden; }
#xp .xsheen { position: absolute; top: 0; bottom: 0; left: -40px; width: 36px; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.62) 50%, rgba(255,255,255,0)); opacity: 0; }
#xp .xfill.sheen .xsheen { animation: xsheen .65s ease-out; }
@keyframes xsheen { 0% { left: -40px; opacity: 1; } 100% { left: 100%; opacity: .2; } }
#xp .xflash { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, rgba(255,250,225,0), rgba(255,250,225,.9) 50%, rgba(255,250,225,0)); opacity: 0; pointer-events: none; }
#xp.lvup .xflash { animation: xflash .75s ease-out; }
@keyframes xflash { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 0; transform: translateX(250%); } }
#xp .xl { display: inline-block; transform-origin: 50% 80%; }
#xp.lvup .xl { animation: xlvpop .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes xlvpop { 0% { transform: scale(1.75); color: #fff3c4; } 100% { transform: scale(1); } }
#xp .xt .xg { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; color: #dcc0ff; }
#xp .xt .xg .ic { width: 1.2em; height: 1.2em; flex: none; }
#xp .xt .xg.pop { animation: xgpop .3s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes xgpop { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* what you have, bottom-left above the XP bar: gold bare, then the blade that is your health */
#vitals { position: absolute; left: calc(var(--u) + var(--sl)); bottom: calc(var(--u) * 2 + var(--xph) + var(--sb)); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#vitals .gold { display: flex; align-items: center; gap: 8px; }
#vitals .gold .ic { width: 28px; height: 28px; }
#vitals .gold .v { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 22px; color: #ffe08a; text-shadow: var(--out); }
#buffs:empty { display: none; }
.buff { display: flex; align-items: center; gap: 6px; font-family: 'Lilita One', 'Lalezar'; font-size: 15px; color: #ffd27a; text-shadow: var(--out); }
.buff .ic { width: 22px; height: 22px; }
/* THE BLADE (0.7.4, his "ensure ... HP BAR ... ARE ALL TOP TIER"): a forged sword drawn by main.js (BLADE_HILT + bladeArt at its real width,
   bladeFrame every frame): the steel banded and lit from above, the life a crimson glow in the fuller, the cream trail, a ruby in the guard
   that beats under 30%. A heavy blow shakes it; #lowhp darkens the glass edge with each beat. */
#blade { position: relative; display: flex; align-items: center; width: var(--blade); height: 34px; }
#blade .hilt { flex: none; width: 74px; height: 34px; margin-right: -24px; position: relative; z-index: 1; overflow: visible; } /* 0.8: the steel runs out from under the guard's middle (x 50 of 74), never 12 px past it */
#blade .steel { position: relative; flex: 1; height: 26px; }
#blade .steel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#blade .v { position: absolute; left: 26px; top: 0; bottom: 0; display: flex; align-items: center; font-family: 'Lilita One', 'Lalezar'; font-weight: 400; text-shadow: var(--out); white-space: pre; pointer-events: none; }
#blade .v .hv { font-size: 17px; color: #fff; }
#blade .v .hm { font-size: 13px; color: #f4ddd4; }
#blade.shake { animation: bshake .16s linear; }
@keyframes bshake { 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 0); } }
body.touch #blade, body.short #blade { height: 30px; }
body.touch #blade .hilt, body.short #blade .hilt { width: 65px; height: 30px; margin-right: -21px; }
body.touch #blade .steel, body.short #blade .steel { height: 22px; }
body.touch #blade .v .hv, body.short #blade .v .hv { font-size: 15px; } body.touch #blade .v .hm, body.short #blade .v .hm { font-size: 12px; }

/* THE DOORS (2026-10-06, his "THE RANKINGS TAB ICON LOOKS TERRIBLE.." / "MAYBE ITS TIME FOR THE NEXT LEVEL LEFT SIDE HUD BUTTONS" / "THAT
   FIT OUR GAME GENRE."): a column down the left edge, each door a forged slot of Oathmarket - an iron frame with brass corner caps around a
   dark slate well that pools the door's own light - holding its subject RENDERED by the house's ART FORGE (forgeart.js doorSlotSvg /
   doorIconSvg, drawn in C:\Floater X\_ART_FORGE\adapters\bb_doors.mjs): a chest of coin and gem, the hero's helm, a satchel, two crossed
   war banners, two companions, a laurelled trophy, a forged cog. The word stands bare on the well's foot (no key letter: keys live in Help).
   THE FLOATER HUD H1: the box is the face plus its lip and nothing is drawn outside it (the old 3 px rim and 5 px lip were box-shadows
   OUTSIDE the box: 14 px written, 3 px seen between doors). Hover: the well brightens and the picture lifts; press: the face sinks half its
   lip. One edge per surface (T43): the frame is the edge. Sizes: H4's 64 on PC; 50 on the short glass, where 52 + its lip would push
   Settings into a third column (4 x 55 + 3 x 10 = 250 of the 248 px the column may use at 844 x 390). */
#doors { position: absolute; left: calc(var(--u) + var(--sl)); top: calc(var(--u) + var(--st)); display: flex; flex-direction: column; gap: var(--u); pointer-events: auto; }
.door { --lip: 4px; --ic: 40px; --icx: 12px; --icy: 5px; --wfs: 11.5px; --wb: 8px; /* 0.7.2: 11.5 holds "Inventory" 7 px off both edges */ position: relative; display: block; width: var(--door);
  height: calc(var(--door) + var(--lip)); background: #0b0806; }
body.touch .door, body.short .door { --lip: 3px; --ic: 30px; --icx: 11px; --icy: 4px; --wfs: 9px; --wb: 6px; } /* 0.7.2: 52 wide, the 9 px word: "Inventory" 6 px clear of both edges */
.door .dface { position: absolute; left: 0; top: 0; width: 100%; height: var(--door); transition: transform .07s ease-out, filter .12s ease-out; }
.door .dslot, .door .dslot svg, .door .dic svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.door .dic { position: absolute; left: var(--icx); top: var(--icy); width: var(--ic); height: var(--ic); transition: transform .12s ease-out; }
.door .w { position: absolute; left: 0; right: 0; bottom: var(--wb); text-align: center; font-size: var(--wfs); line-height: 1; letter-spacing: 0; color: #f6ead2;
  white-space: nowrap; text-shadow: 0 1.2px 0 #0e080a, 1.2px 0 0 #0e080a, -1.2px 0 0 #0e080a, 0 -1.2px 0 #0e080a, 1px 1px 0 #0e080a, -1px 1px 0 #0e080a, 1px -1px 0 #0e080a, -1px -1px 0 #0e080a; }
@media (hover: hover) { .door:hover .dface { filter: brightness(1.12); } .door:hover .dic { transform: translateY(-2px) scale(1.06); } }
.door:active .dface { transform: translateY(calc(var(--lip) / 2)); filter: brightness(.94); }
.door:focus-visible { outline: 2px solid #ffe08a; outline-offset: 2px; }
.dot { position: absolute; right: -6px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: #ff6a3d; box-shadow: 0 0 0 3px #0e080a; }

/* the map, top-right: north up, the room around you */
#mapbox { position: absolute; right: calc(var(--u) + var(--sr)); top: calc(var(--u) + var(--st)); width: var(--map); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#mm { width: var(--map); height: var(--map); display: block; background: #1b1612; box-shadow: 0 0 0 3px #0e080a; }
#mm-name { font-family: 'Lilita One', 'Lalezar'; font-size: 17px; color: #fff3cf; text-shadow: var(--out); }
body.touch #mm-name { font-size: 13px; position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; line-height: 1; pointer-events: none; } /* 0.7.2: on the phone the place name stands INSIDE the map's foot, so the map ends 10 px above the act cluster */

/* the contract: the hero you hired, under the map */

/* the quickbar, bottom-centre above the XP bar: two skills, the blade, two skills */
#acts { position: absolute; left: max(50%, calc(var(--u) * 2 + var(--blade) + (var(--act) * 7 + var(--atk) + 48px + 96px) / 2)); /* 0.7: six skills, the press, Recall (an act wide) and the Skills book (48), eight 12 px gaps */ bottom: calc(var(--u) * 2 + var(--xph) + var(--sb)); transform: translateX(-50%); display: flex; gap: 12px; align-items: flex-end; pointer-events: auto; }
/* THE ABILITY BAR (0.7.4, his "IMPROVE THE HUD AND STYLE OF THE ABILITIES" / "THEY NEED TO BE UP TO THIS NEW HIGH LEVEL OF QUALITY SYSTEM"):
   each act is the doors' family - the forge's forged slot behind (.aslot: an iron band, brass caps, a dark well pooling the ability's light;
   the press's slot gold), the ability RENDERED over it (.ic), a keycap, the name on the well's foot. The cooldown is a clock sweep over the
   well with its seconds (main.js actsFrame); .cast lights the picture when used, .ready flashes the slot when it is back; a locked act stands
   in shadow with its lock and its level. The slot's band is its one edge; nothing is drawn outside the box (the flat rainbow tiles are gone). */
.act { position: relative; width: var(--act); height: var(--act); background: #0b0d10; overflow: hidden; touch-action: none; transition: transform .06s ease-out, filter .1s ease-out; }
.act .aslot, .act .aslot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.act:hover { filter: brightness(1.12); }
.act:active { transform: translateY(2px); filter: brightness(.9); }
.act .ic { position: absolute; left: 17%; top: 8%; width: 66%; height: 62%; z-index: 1; pointer-events: none; } /* the picture ends above the name's own line */
.act .ic svg { display: block; width: 100%; height: 100%; }
/* the ability's key as a keycap (0.3, his "PUT THE BUTTON LETTER ON THE ABILITY"; a skill slot keeps its key, it is the act's own control) */
.act .key { position: absolute; left: 4px; top: 4px; z-index: 3; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 11.5px; line-height: 1; color: #f6ecd8; text-shadow: 0 1px 0 #0d0907; background: linear-gradient(#5a616b, #2a2f36 55%, #171a1f); box-shadow: 0 0 0 1.5px #0d0907; }
.act.atk .key { font-size: 10.5px; }
.act .nm { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 3; text-align: center; font-family: 'Lilita One', 'Lalezar'; font-size: 10.5px; line-height: 1; color: #f6ecd8; text-shadow: var(--out); white-space: nowrap; pointer-events: none; } /* 6 px off the slot's foot, never on it */
.act .cd { position: absolute; inset: 4px; z-index: 2; display: none; align-items: center; justify-content: center; pointer-events: none; background: conic-gradient(transparent var(--e, 360deg), rgba(255,238,190,.9) var(--e, 360deg), rgba(6,5,8,.74) calc(var(--e, 360deg) + 8deg)); } /* 0.9.1 the clock's hand is lit, as the XP bar's pouring edge */
.act.cooling .cd { display: flex; }
.act.cooling .ic { filter: saturate(.55) brightness(.8); }
.act .cd b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 21px; line-height: 1; margin-top: -6px; color: #fff; text-shadow: var(--out); }
.act.cast .ic { animation: actCast .32s ease-out; }
@keyframes actCast { 0% { transform: scale(1.16); filter: brightness(1.9); } 100% { transform: none; filter: none; } }
.act.ready::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 50% 42%, rgba(255,246,210,.9), rgba(255,236,170,.28) 45%, rgba(255,236,170,0) 72%); animation: actReady .5s ease-out forwards; }
@keyframes actReady { 0% { opacity: 1; } 100% { opacity: 0; } }
/* 0.9.1 the slot answers the hand: a press punches it in and out, a press while it cools shakes it and blinks its seconds */
.act.punch { animation: actPunch .22s ease-out; }
@keyframes actPunch { 0% { transform: scale(.9); } 55% { transform: scale(1.06); } 100% { transform: none; } }
.act.deny { animation: actDeny .28s ease-out; }
.act.deny .cd b { color: #ffb4a0; }
@keyframes actDeny { 0%, 100% { transform: none; } 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { .act.cast .ic, .act.ready::after, .act.punch, .act.deny { animation: none; } }
.act .lock { display: none; position: absolute; inset: 4px; z-index: 2; font-size: 11px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(6,5,8,.5); pointer-events: none; }
.act .lock .lk { width: 34%; height: 34%; } .act .lock .lk svg { display: block; width: 100%; height: 100%; }
.act .lock .lv { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: inherit; line-height: 1; color: #e8dcc0; text-shadow: var(--out); white-space: nowrap; }
.act.locked .lock { display: flex; } .act.locked .ic { filter: grayscale(.9) brightness(.55); } /* dim, still read: what the level brings */ .act.locked .aslot { filter: grayscale(.85) brightness(.62); } .act.locked .nm { display: none; }
.act.atk { width: var(--atk); height: var(--atk); }
.act.atk .ic { left: 15%; top: 5%; width: 70%; height: 66%; }
.act.atk .nm { font-size: 12px; }
/* THE ABILITY'S CARD (PC hover, main.js actTip): one card above the act, inside the glass, square, one edge */
#acttip { position: absolute; z-index: 5; width: max-content; max-width: 280px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; background: rgba(12,10,9,.95); box-shadow: 0 0 0 2px #0d0907; pointer-events: none; }
#acttip b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 16px; line-height: 1.1; color: #ffe08a; text-shadow: var(--out); }
#acttip small { font-size: 12px; color: var(--dim); } #acttip span { font-size: 13px; line-height: 1.35; color: #f3ead8; }
/* touch: the blade under the right thumb, the four skills on an arc around it */
body.touch #acts { left: auto; transform: none; right: calc(var(--u) + var(--sr)); display: block; width: 228px; height: 224px; }
body.touch .act { position: absolute; }
body.touch .act.atk { right: 0; bottom: 0; }
/* the skills stand round the blade: Cleave beside it, Dash on the diagonal, War Cry above it, Second Wind outermost (gaps 6 px or more) */
body.touch .act[data-sk="0"] { right: 94px; bottom: 0; } body.touch .act[data-sk="1"] { right: 88px; bottom: 88px; }
body.touch .act[data-sk="2"] { right: 0; bottom: 94px; }
/* 0.7: the outer arc, 156 px from the blade's centre at 0, 28, 62 and 90 degrees: Second Wind, the fifth, the sixth, Recall; the Skills book above it (gaps 6 px or more) */
body.touch .act[data-sk="3"] { right: 170px; bottom: 14px; } body.touch .act[data-sk="4"] { right: 152px; bottom: 87px; } body.touch .act[data-sk="5"] { right: 87px; bottom: 152px; }
body.touch .act.sbook { right: 181px; bottom: 168px; width: 44px; height: 44px; }
body.touch .act .key { display: none; }

#fade { position: fixed; inset: 0; background: #0b0807; opacity: 0; pointer-events: none; z-index: var(--z-fade); transition: opacity .22s; }
#fade.on { opacity: 1; }

#notes { position: fixed; top: calc(14px + var(--st)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: var(--z-notes); pointer-events: none; width: min(720px, 70vw); }
.note { font-family: 'Lilita One', 'Lalezar'; font-size: 19px; text-align: center; text-shadow: var(--out); animation: noteIn .18s ease-out; transition: opacity .5s; }
.note.good { color: #a6e8b0; } .note.no { color: #ffb4a8; } .note.world { color: #b9fff0; }
.note.out { opacity: 0; }
@keyframes noteIn { from { opacity: 0; transform: translateY(-6px); } }
body.touch .note { font-size: 15px; }
#roomtitle { position: fixed; top: 13%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; opacity: 0; pointer-events: none; z-index: var(--z-roomtitle); }
#roomtitle b { font-size: 48px; color: #fff3cf; text-shadow: 0 3px 0 #0e080a, 3px 0 0 #0e080a, -3px 0 0 #0e080a, 0 -3px 0 #0e080a, 2px 2px 0 #0e080a, -2px 2px 0 #0e080a, 2px -2px 0 #0e080a, -2px -2px 0 #0e080a; }
#roomtitle span { font-family: 'Lilita One', 'Lalezar'; font-size: 18px; color: #e8dcc0; text-shadow: var(--out); }
#roomtitle.show { animation: roomT 2.6s ease-out forwards; }
@keyframes roomT { 0% { opacity: 0; transform: scale(.94); } 15% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }
body.touch #roomtitle { top: 10%; } body.touch #roomtitle b { font-size: 32px; } body.touch #roomtitle span { font-size: 14px; }

/* THE LEVEL-UP MOMENT (0.7.8, his "improve the game's LEVEL UP POP UP", 2026-10-07): ONE plate in the game's own walnut, ONE edge in the
   town's bronze with brass corner caps on it (the windows' frame), under the top of the glass and over nothing he presses. The crest pops in
   its lit well with the rays turning slowly behind it; the level and its place on the ladder; the pay counting up, each with its picture
   and in its own hue; what it opened with its own picture; the next rung. Square on every layer. PC: a click passes through it to the fight;
   phone: a tap rolls it up early. Reduced motion: nothing turns and nothing pops. */
#lvlcard { position: fixed; top: calc(8px + var(--st)); left: 50%; width: 284px; z-index: var(--z-lvlcard); pointer-events: none; font-size: 13px;
  transform: translateX(-50%); opacity: 0; visibility: hidden; }
#lvlcard.show { visibility: visible; animation: lvIn .2s cubic-bezier(.2, .9, .3, 1.15) forwards; }
#lvlcard.out { animation: lvOut .24s ease-in forwards; }
@keyframes lvIn { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.94); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes lvOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-18px); } }
.lv-plate { position: relative; display: flex; flex-direction: column; align-items: center; gap: .42em; padding: .7em 1em 1em; text-align: center;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,206,120,.16), rgba(255,206,120,0) 62%),
    repeating-linear-gradient(90deg, rgba(255,235,200,.025) 0 2px, transparent 2px 9px), linear-gradient(#36231a, #22160f 60%, #1a110b);
  box-shadow: inset 0 0 0 3px #7a5530, 0 16px 40px rgba(0,0,0,.6); }
/* 2026-10-11 (his "NEAR THE LV UP WHEN IT POPS THERE ARE THOSE THINGS ON THE EDGES THAT I TOLD U IN ANOTHER CHAT TO REMOVE" / "NEAR THE
   NEW LV UP NUMBER THERE IS A ROBLOXY GLOW" / "DONT PUT IT"): the eight gold bars on the plate's corners (.lv-plate::after) are gone, on this
   plate and on the fish card that wears it; the round glow and the turning rays behind the crest (.lv-well::before, .lv-rays) are gone.
   The crest stands on the walnut itself with its own drop shadow. Do not put either back. */
.lv-well { position: relative; width: 6em; height: 6em; margin-top: .1em; display: grid; place-items: center; }
.lv-crest { position: relative; width: 5.3em; height: 5.9em; display: block; }
.lv-crest svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 0 rgba(0,0,0,.45)); }
.lv-num { position: absolute; left: 50%; top: 52.5%; transform: translate(-50%, -50%); font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 2.35em; line-height: 1;
  color: #fff6dc; text-shadow: var(--out); font-variant-numeric: tabular-nums; }
#lvlcard.show .lv-crest { animation: lvPop .5s .06s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes lvPop { from { transform: scale(.35) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.lv-kick { font-family: 'Lilita One', 'Lalezar'; font-size: .95em; letter-spacing: .14em; text-transform: uppercase; color: #f3c45a; text-shadow: var(--out); margin-top: -.1em; }
.lv-big { font-family: 'Lilita One', 'Lalezar'; font-size: 2em; line-height: .95; color: #fff1d0; text-shadow: var(--out); }
.lv-ladder { display: flex; align-items: center; gap: .55em; width: 100%; }
.lv-pips { flex: 1; display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; height: .62em; }
.lv-pips i { display: block; background: #120b07; box-shadow: inset 0 0 0 1px #3a2a1e; }
.lv-pips i.on { background: linear-gradient(#ffe39a, #c98a2a); box-shadow: none; }
.lv-pips i.now { background: #fff3c8; box-shadow: 0 0 6px 1px rgba(255,214,120,.9); }
#lvlcard.show .lv-pips i.now { animation: lvPip .9s .5s ease-out 2 both; }
@keyframes lvPip { 0% { transform: scaleY(1); } 40% { transform: scaleY(1.9); } 100% { transform: scaleY(1); } }
.lv-of { flex: none; font-family: Nunito, 'Cairo', sans-serif; font-weight: 800; font-size: .78em; color: #e2d2b2; }
.lv-rank { display: flex; align-items: center; gap: .55em; width: 100%; padding: .6em .7em; background: #16243a; box-shadow: inset 0 0 0 2px #2f5f9e; }
.lv-rb { width: 1.9em; height: 1.9em; flex: none; } .lv-rb svg { width: 100%; height: 100%; display: block; }
.lv-ot { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; line-height: 1.1; }
.lv-ot small { font-family: Nunito, 'Cairo', sans-serif; font-weight: 800; font-size: .74em; color: #cfe0f5; }
.lv-ot b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 1.25em; color: #8fcbff; text-shadow: var(--out); }
.lv-gains { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .35em; width: 100%; }
.lv-g { display: flex; flex-direction: column; align-items: center; gap: .05em; padding: .42em .2em .4em; background: #120b07; box-shadow: inset 0 0 0 2px var(--gh, #4a3a2e); }
.lv-g .ic { width: 1.7em; height: 1.7em; } .lv-g .ic svg { width: 100%; height: 100%; display: block; }
.lv-g b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 1.3em; line-height: 1; color: var(--gi, #fff); text-shadow: var(--out); font-variant-numeric: tabular-nums; }
.lv-g small { font-family: Nunito, 'Cairo', sans-serif; font-weight: 800; font-size: .7em; color: #d8c8a8; }
.lv-g.hp { --gh: #8a2a24; --gi: #ff9c8f; } .lv-g.atk { --gh: #7a6a46; --gi: #fff0c8; } .lv-g.def { --gh: #3e5a7a; --gi: #cfe3f8; } .lv-g.gold { --gh: #8a6418; --gi: #ffe08a; }
.lv-open { display: flex; align-items: center; gap: .6em; width: 100%; padding: .35em .6em .35em .35em; background: #10200f; box-shadow: inset 0 0 0 2px #3f8a46; }
.lv-act { position: relative; width: 2.9em; height: 2.9em; flex: none; display: block; }
.lv-act .aslot, .lv-act .aslot svg, .lv-act .ic, .lv-act .ic svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lv-act .ic { inset: 12%; width: 76%; height: 76%; }
.lv-open .lv-ot small { color: #b8f0bf; } .lv-open .lv-ot b { color: #a6e8b0; }
.lv-key { margin-left: auto; flex: none; min-width: 1.7em; padding: .12em .35em; font-family: 'Lilita One', 'Lalezar'; font-size: .95em; color: #2a1d14; background: linear-gradient(#fff3d6, #d8c39a); box-shadow: 0 2px 0 #6b5638; }
.lv-pts { display: flex; align-items: center; gap: .45em; font-family: Nunito, 'Cairo', sans-serif; font-weight: 800; font-size: .82em; color: #ffe8a8; }
.lv-pts .ic { width: 1.5em; height: 1.5em; flex: none; } .lv-pts .ic svg { width: 100%; height: 100%; display: block; }
.lv-next { width: 100%; padding-top: .45em; font-family: Nunito, 'Cairo', sans-serif; font-weight: 800; font-size: .8em; color: #d8c8a8; }
body.touch #lvlcard, body.short #lvlcard { width: 254px; font-size: 11.5px; }
/* 0.9.1 THE COMPACT LEVEL CARD (his "REDUCE THE SIZE OF THE LV UP POP UP BY 75% OR SO" / "SINCE ITS TOO BIG"): a strip, a quarter of the area */
#lvlcard { width: 300px; }
.lv-plate.lvc { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 12px 8px 8px; text-align: left; }
.lvc .lv-well { width: 54px; height: 54px; margin: 0; }
.lvc .lv-crest { width: 46px; height: 51px; } .lvc .lv-num { font-size: 20px; }
.lvc-main { display: flex; flex-direction: column; min-width: 0; }
.lvc .lv-kick { font-size: 11px; letter-spacing: .12em; margin: 0; } .lvc .lv-big { font-size: 24px; line-height: 1; }
.lvc-gains { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; }
.lvc-g { display: inline-flex; align-items: center; gap: 3px; } .lvc-g .ic { width: 15px; height: 15px; } .lvc-g .ic svg { width: 100%; height: 100%; display: block; }
.lvc-g b { font: 400 14px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--gi, #fff); text-shadow: var(--out); font-variant-numeric: tabular-nums; }
.lvc-g.hp { --gi: #ff9c8f; } .lvc-g.atk { --gi: #fff0c8; } .lvc-g.def { --gi: #cfe3f8; } .lvc-g.gold { --gi: #ffe08a; }
.lvc .lv-act { width: 40px; height: 40px; }
.lvc-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 10px; font: 800 11px/1.3 Nunito, 'Cairo', system-ui, sans-serif; color: #d8c8a8; }
.lvc-foot b { font-weight: 900; } .lvc-rank b { color: #8fcbff; } .lvc-new b { color: #a6e8b0; } .lvc-pts { color: #ffe8a8; }
body.touch #lvlcard, body.short #lvlcard { width: 262px; font-size: 11.5px; }
body.touch .lvc .lv-well, body.short .lvc .lv-well { width: 48px; height: 48px; } body.touch .lvc .lv-crest, body.short .lvc .lv-crest { width: 41px; height: 46px; }
body.touch .lv-well, body.short .lv-well { width: 4.6em; height: 4.6em; } body.touch .lv-crest, body.short .lv-crest { width: 4.2em; height: 4.7em; }
body.touch #lvlcard { pointer-events: auto; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #lvlcard.show .lv-crest, #lvlcard.show .lv-pips i.now { animation: none; } #lvlcard.show { animation-duration: .01s; } }

#prompt { position: fixed; left: 0; top: 0; z-index: var(--z-prompt); display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; min-height: 44px;
  background: rgba(26,19,15,.92); box-shadow: 0 0 0 2px #0d0907; }
#prompt .ic { width: 30px; height: 30px; }
#prompt b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 17px; }
#prompt .k { font-size: 13px; color: var(--gold); }
#stick { position: fixed; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.35); background: rgba(0,0,0,.18); pointer-events: none; z-index: var(--z-stick); }
#stick i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; border-radius: 50%; background: rgba(243,234,216,.55); box-shadow: 0 0 0 3px rgba(14,8,10,.5); transform: translate(-50%,-50%); }
#hurt { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-hurt); box-shadow: inset 0 0 140px rgba(210,30,20,.6); opacity: 0; }
#lowhp { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-hurt); box-shadow: inset 0 0 170px 18px rgba(140,8,14,.78); opacity: 0; } /* 0.7.4: under 30% health, on each beat (main.js bladeFrame) */
#hurt.on { animation: hurt .38s ease-out; }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }
#conn { position: fixed; bottom: 40%; left: 50%; transform: translateX(-50%); z-index: var(--z-conn); font-family: 'Lilita One', 'Lalezar'; font-size: 22px; text-shadow: var(--out); }
#rotate { display: none; position: fixed; inset: 0; z-index: var(--z-rotate); background: var(--bg); align-items: center; justify-content: center; text-align: center; padding: 24px; font-family: 'Lilita One', 'Lalezar'; font-size: 24px; }
body.portrait #rotate { display: flex; }

/* ---------------- presses */
.press { --h: #5a4636; --hd: #2a1f17; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; font-size: 17px;
  background: var(--h); box-shadow: 0 0 0 2px var(--hd), 0 4px 0 2px var(--hd); text-shadow: 0 1.5px 0 var(--hd), 1.5px 0 0 var(--hd), -1.5px 0 0 var(--hd), 0 -1.5px 0 var(--hd); white-space: nowrap; }
.press::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 44%; background: rgba(255,255,255,.12); pointer-events: none; }
.press:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 2px var(--hd), 0 1px 0 2px var(--hd); }
.press.primary { --h: #2f6fbb; --hd: #163764; }
.press:disabled { opacity: .6; cursor: default; }
.press.small { min-height: 36px; padding: 0 12px; font-size: 15px; }
body.touch .press.small { min-height: 44px; }
.press.big { min-height: 54px; font-size: 22px; padding: 0 28px; }
.press .pm { width: 1.7em; height: 1.7em; display: inline-block; flex: none; }
.press .pm svg { width: 100%; height: 100%; }

/* ---------------- THE SIGN-IN (2026-10-06, his "AND LOGIN SCREEN" / "MAKE IT CENTERED" / "AND MORE QUALITY" / "AND BETTER BACKGROUND IMAGE"):
   the boot door's key art and logo in the same place, and ONE compact card centred under the logo: the tabs on its head (the open one
   joined to the body, the other recessed, never a stripe), the fields, the one primary press. The picture breathes (a slow drift, the dust
   of the plaza rising through the low sun); the hero he plays, or is making, stands on his stand beside the card. Square, one edge, the
   brass corner caps of the border ladder. The shared pieces (.bb-art, .bb-scrim, .bb-stage, .bb-logo, .bb-tag, .bb-bar) are index.html's
   first-paint rules, so the door and the sign-in are drawn by one set of rules and stand in one place. */
#title { position: fixed; inset: 0; z-index: var(--z-title); pointer-events: none; overflow: hidden; --card-w: 400px; transition: opacity .45s ease-out; }
#title[data-tab="register"] { --card-w: 620px; }
#title.leaving { opacity: 0; } #title.leaving * { pointer-events: none !important; }
#title .t-art { transform-origin: 50% 40%; animation: tDrift 50s ease-in-out infinite alternate; }
@keyframes tDrift { from { transform: scale(1); } to { transform: scale(1.055) translate3d(-.8%, .5%, 0); } }
#t-motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* who / register: the hero on his stand right of the card; the art steps back behind him (darker, a touch soft) so he is the subject */
#title .t-hold { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; --sx: 82%; --sy: 60%;
  background: radial-gradient(ellipse 250px 400px at var(--sx) var(--sy), rgba(12, 8, 10, .84), rgba(12, 8, 10, .52) 58%, rgba(12, 8, 10, 0) 100%);
  /* 0.7.5: no backdrop blur - a live blur over the drifting art was re-done every frame; the darkening alone steps the art back */
  -webkit-mask-image: radial-gradient(ellipse 270px 430px at var(--sx) var(--sy), #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 270px 430px at var(--sx) var(--sy), #000 52%, transparent 100%); }
#title.stand .t-hold { opacity: 1; }
#t-hero { position: absolute; display: none; pointer-events: auto; touch-action: none; cursor: grab; }
#t-hero.on { display: block; } #t-hero canvas { display: block; width: 100%; height: 100%; }
.t-stage { pointer-events: none; }
.t-card { pointer-events: auto; position: relative; width: var(--card-w); max-width: calc(100vw - 32px); /* 16 px in: the corner caps stand 10 px off the glass */ margin-top: clamp(16px, 3.4vh, 30px); padding: 0 24px 22px;
  background: linear-gradient(180deg, rgba(38, 28, 22, .97), rgba(21, 15, 12, .97)); box-shadow: 0 0 0 2px #0b0706, 0 20px 50px rgba(0, 0, 0, .55); }
/* 0.10.1: the four brass angles on the card's corners are GONE (his 2026-10-10 "u see the LINES ON THE LOGIN SCREEN? THE FOUR LINES ON THE
   EDGES"): the card keeps its one dark edge and nothing drawn on it (T44: no bright line on an edge) */
.t-tabs { display: flex; margin: 6px -18px 20px; } /* the card's head, 6 px in from its one edge (the UI audit's EDGE floor) */
.t-tab { flex: 1; min-height: 52px; font-family: 'Lilita One', 'Lalezar'; font-size: 19px; letter-spacing: .3px; color: #9d8b70; background: rgba(8, 5, 4, .62);
  box-shadow: inset 0 -10px 14px -10px rgba(0, 0, 0, .7); transition: color .15s, background .15s; }
.t-tab:hover:not(.on) { color: #d9c59f; }
.t-tab.on { color: #ffe08a; background: transparent; box-shadow: none; text-shadow: 0 2px 0 #0e080a, 1.5px 0 0 #0e080a, -1.5px 0 0 #0e080a, 0 -1.5px 0 #0e080a; cursor: default; }
.t-tab:focus-visible { outline: 2px solid #ffe08a; outline-offset: -4px; }
#f-login, #f-register { display: flex; flex-direction: column; }
.t-field { margin-bottom: 14px; }
#title label { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font: 800 12px Nunito, 'Cairo', sans-serif; color: #cdb995; text-transform: uppercase; letter-spacing: 1.2px; }
#title label small { font: 700 12px Nunito, 'Cairo', sans-serif; color: #8f7d62; text-transform: none; letter-spacing: 0; }
#title input { display: block; width: 100%; height: 46px; padding: 0 14px; font: 800 18px Nunito, 'Cairo', sans-serif; color: #f6ecd8; background: #0f0b09; border: 0; border-radius: 0; outline: none;
  box-shadow: 0 0 0 2px #0a0605, inset 0 2px 6px rgba(0, 0, 0, .6); -webkit-user-select: text; user-select: text; }
#title input::placeholder { color: #6f604c; }
#title input:focus { background: #15100d; box-shadow: 0 0 0 2px #e2b44a, inset 0 2px 6px rgba(0, 0, 0, .6); }
/* Create Hero: the name and password on the left, the looks on the right (Gender first), then the creator's door beside the one press on one
   line (2026-10-07: with the Gender row the look column outgrew the left, and the door under it stood the card 8 px off a 650 px glass) */
#f-register { display: grid; grid-template-columns: minmax(0, 250fr) minmax(0, 296fr) var(--cls-w); column-gap: 26px; align-items: start; grid-template-areas: "a b cls" "cline cline cline" "err err err" "app go go"; }
/* THE CLASS COLUMN (0.11.1, his 2026-10-10 "THEY CAN CHOOSE THEIR CHARACTER CLASSES" / "THIS TAB WILL ADAPT AND UPDATE TO THE NEW CLASSES"):
   SIDEWAYS FIRST - the classes stand as a third column beside the name and the looks, so the card grows wider and not taller (a row under
   them stood the card 112 px off a 650 px laptop glass). One press a class, as many as the rules' class table holds: three to a column
   (--cc columns, set by main.js from the count; the card widens by --cls-w), each its first weapon's picture on a dark well beside its
   name and role, the chosen one lit in the primary press. Under the three columns ONE band of words: the class's job and what he starts
   with, in the card's quiet ink (on a glass under 700 px tall the job stands down: the role is on the press). */
#title { --cls-w: calc(var(--cc, 1) * 176px + (var(--cc, 1) - 1) * 8px); }
#title[data-tab="register"] { --card-w: calc(620px + 26px + var(--cls-w)); }
.t-clsf { grid-area: cls; }
.t-cpick { display: grid; grid-template-columns: repeat(var(--cc, 1), minmax(0, 1fr)); gap: 8px; }
.t-cp { min-height: 48px; justify-content: flex-start; gap: 8px; padding: 0 8px 3px 5px; text-align: start; }
.t-cpw { width: 38px; height: 38px; flex: none; background: radial-gradient(#4f3f33, #1c1410); box-shadow: 0 0 0 2px var(--hd); }
.t-cpw svg { display: block; width: 100%; height: 100%; }
.t-cpn { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.t-cpn b { font-size: 17px; font-weight: inherit; }
.t-cpn i { font: 800 12px Nunito, 'Cairo', sans-serif; font-style: normal; letter-spacing: .3px; opacity: .82; text-shadow: none; }
.t-cline { grid-area: cline; margin: 0 0 8px; font: 700 13px/1.35 Nunito, 'Cairo', sans-serif; color: #cdb995; text-align: center; }
.t-cline .t-cjob { display: block; color: #efe3c8; }
.t-cline .t-ckit { display: block; }
@media (max-height: 700px) { .t-cline .t-cjob { display: none; } }
.t-ca { grid-area: a; } .t-cb { grid-area: b; } #r-app { grid-area: app; align-self: stretch; min-height: 56px; font-size: 18px; white-space: normal; line-height: 1.1; } #r-err { grid-area: err; } #r-go { grid-area: go; }
.t-looks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.t-looks .t-lrow { display: flex; align-items: center; gap: 10px; }
.t-looks .t-lrow label { width: 46px; margin: 0; flex: none; }
.sws { display: flex; gap: 6px; }
.sw { width: 36px; height: 36px; box-shadow: 0 0 0 2px #0b0706; }
.sw.on { box-shadow: 0 0 0 2px #0b0706, 0 0 0 5px #ffe08a; }
.t-app { width: 100%; }
/* THE GENDER (2026-10-07, his "THERE IS NO REAL GENDER CHOOSING AT THE CHARACTER SELECTION"): the first row of the look column, labelled
   like the fields beside it so it stands on the name field's line; Male and Female side by side, each press wearing its gender's face drawn
   by the game (on a dark well, so it reads on both hues); the chosen one lit in the primary press, the other the plain press */
.t-gpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t-gp { min-height: 56px; justify-content: flex-start; gap: 10px; padding: 0 12px 4px 6px; font-size: 20px; }
/* the face well: the creator's face picture of that gender's hero (creator.js faceShot, framed on the body's own height) */
.t-gpw { position: relative; width: 44px; height: 44px; flex: none; overflow: hidden; background: radial-gradient(#4f3f33, #1c1410); box-shadow: 0 0 0 2px var(--hd); }
.t-gpt { display: block; width: 100%; height: 100%; }
.t-gpt:not([src]) { display: none; }
#title .t-err { min-height: 20px; margin: 0 0 10px; color: #ffb4a8; font-size: 15px; text-align: center; }
#title .t-err:empty { min-height: 0; margin: 0 0 6px; }
/* 0.14.9 REMEMBER LOGIN: a square check mark and its words, the whole row the press (44 tall); the tick is the control's own mark */
#title .t-keep { display: flex; justify-content: flex-start; align-items: center; gap: 10px; min-height: 44px; margin: -6px 0 6px; cursor: pointer; font: 800 15px Nunito, 'Cairo', sans-serif; text-transform: none; letter-spacing: 0; color: #f3e6c8; user-select: none; }
#title .t-keep input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; margin: 0; background: #0f0a07; box-shadow: inset 0 0 0 2px #6b5540; cursor: pointer; }
#title .t-keep input:checked, #title .t-keep input:checked:focus { background: #e2b44a; box-shadow: inset 0 0 0 2px #0e080a; }
#title .t-keep input:checked::after { content: ''; width: 12px; height: 6px; border-left: 3px solid #1d1519; border-bottom: 3px solid #1d1519; transform: translateY(-2px) rotate(-45deg); }
#title .t-keep input:focus-visible { outline: 2px solid #fff1d0; outline-offset: 2px; }
/* 0.14.9 THE REASON HE WAS PUT OUT, or why nobody can sign in (a channel closed by hand): one plate over the card's forms */
#title .t-out { margin: 0 0 12px; padding: 10px 14px; background: rgba(60,18,14,.9); box-shadow: 0 0 0 2px #0e080a, inset 0 0 0 1px #7a3328; color: #ffe1da; font-size: 15px; font-weight: 800; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
#title .press.big { width: 100%; min-height: 56px; font-size: 23px; }
#t-who { display: grid; grid-template-columns: 76px 1fr; gap: 16px 18px; align-items: center; padding-top: 24px; }
#t-who .tw-pt { width: 76px; height: 76px; background: radial-gradient(#3e5c86, #1c2c45); box-shadow: 0 0 0 2px #0b0706, 0 0 0 4px #c99a3e; }
.tw-main { display: flex; flex-direction: column; min-width: 0; }
.tw-hi { font: 800 12px Nunito, 'Cairo', sans-serif; color: #cdb995; text-transform: uppercase; letter-spacing: 1.2px; }
.tw-name { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 32px; line-height: 1.08; color: #fff4cf; text-shadow: var(--out); overflow-wrap: anywhere; }
.tw-lv { color: #dccaa6; font-size: 16px; }
#t-who .tw-go { grid-column: span 2; }
/* 0.15.2 THE GENDER AT THE DOOR: one row across the Welcome back card, its caption then two presses sharing the row (44 px tall, the touch floor) */
#t-who .tw-sex { grid-column: span 2; display: flex; align-items: center; gap: 10px; }
#t-who .tw-sex[hidden] { display: none; }
.tw-cap { font: 800 12px Nunito, 'Cairo', sans-serif; color: #cdb995; text-transform: uppercase; letter-spacing: 1.2px; flex: none; }
.tw-gp { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 18px; }
.t-link { display: block; margin: 12px auto -4px; min-height: 44px; padding: 0 10px; color: #ffe08a; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 1.5px 0 #0e080a; }
.t-music { pointer-events: auto; position: absolute; right: calc(16px + var(--sr)); bottom: calc(14px + var(--sb)); display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  font-family: 'Lilita One', 'Lalezar'; font-size: 15px; color: #f3e4c6; text-shadow: var(--out); }
.t-music .ic { width: 30px; height: 30px; }
/* the landscape phone and every short glass: the side-by-side logo, the labels said by the fields themselves, one row less of air */
@media (max-height: 520px) {
  #title { --card-w: 400px; } #title[data-tab="register"] { --card-w: 620px; }
  .t-card { margin-top: 8px; padding: 0 16px 12px; }
  .t-tabs { margin: 6px -10px 10px; } .t-tab { min-height: 44px; font-size: 17px; }
  #title .t-field label { display: none; } /* each field names itself (its placeholder; aria-label for a reader) */
  #title input { height: 44px; font-size: 16px; }
  .t-field { margin-bottom: 8px; }
  #f-register { column-gap: 16px; grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "cls cls" "cline cline" "err err" "app go"; }
  .t-cpick { grid-template-columns: repeat(min(var(--n, 3), 4), minmax(0, 1fr)); } .t-cp { min-height: 44px; padding: 0 8px 3px 4px; } .t-cpw { width: 36px; height: 36px; } .t-cpn b { font-size: 16px; } .t-cpn i { font-size: 11px; }
  .t-cline { display: none; } /* a short glass has no row for the words: each press shows its class's first weapon, name and role, and the Starter Bag's card says what he was given the moment he stands in the world */
  #r-app { margin-bottom: 0; min-height: 48px; font-size: 16px; }
  .t-looks { gap: 8px; margin-bottom: 8px; } .sw { width: 44px; height: 44px; } .t-looks .t-lrow label { width: 38px; font-size: 11px; }
  .t-gpick { gap: 8px; } .t-gp { min-height: 44px; gap: 8px; padding: 0 10px 3px 4px; font-size: 17px; } .t-gpw { width: 36px; height: 36px; }
  #title .press.big { min-height: 48px; font-size: 20px; }
  #title .t-err { margin-bottom: 6px; font-size: 13px; min-height: 17px; }
  /* 0.14.9 the short glass: Remember Login stands BESIDE the Log In press (sideways first: its own row put the press under the screen),
     and the reason plate is thinner */
  #f-login { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  #f-login > .t-field, #f-login > .t-err { grid-column: 1 / -1; }
  #f-login > .t-err { grid-row: 3; }
  #f-login > .t-keep { grid-column: 1; grid-row: 4; margin: 0; font-size: 14px; }
  #f-login > #l-go { grid-column: 2; grid-row: 4; }
  #title .t-out { margin-bottom: 6px; padding: 6px 10px; font-size: 13px; }
  #t-who { grid-template-columns: 56px 1fr; gap: 10px 14px; padding-top: 14px; } #t-who .tw-pt { width: 56px; height: 56px; }
  .tw-name { font-size: 26px; } .t-link { margin: 6px auto -2px; }
  .t-music { padding: 0 7px; } .t-music .w { display: none; } /* the press is its picture on a short glass: the card needs the foot */
}
/* the landscape phone, Create Hero (2026-10-07): SIDEWAYS FIRST - the look column opens into two beside the name and password (the Gender
   presses stacked, the swatches beside them), so the card grows wider and not one row taller with the Gender row in it. The Gender column
   is never narrower than its words; the fields take what is left (their placeholders are chosen by the width they get, main.js) */
@media (max-height: 520px) and (min-width: 600px) {
  #title[data-tab="register"] { --card-w: 820px; }
  #f-register { grid-template-columns: minmax(0, 1fr) 275px auto; grid-template-areas: "a g b" "a app b" "err err err" "cls cls go"; } /* the middle column is a NUMBER now (it was max-content: with the creator's door in it, it took the name column's whole width) */
  .t-cb { display: contents; } .t-gfield { grid-area: g; } .t-looks { grid-area: b; }
  /* 0.11.1 THE CLASSES ON THE PHONE, WITH NOT ONE PIXEL MORE HEIGHT (the card's foot stands on the language and music presses): the Gender
     presses stand side by side, the creator's door moves under them, and the classes take the foot's row beside Create Hero - he reads
     the row left to right: his class, then the press that makes him */
  .t-gpick { grid-template-columns: 1fr 1fr; }
  #r-app { min-height: 44px; align-self: start; }
  .t-clsf { margin-bottom: 0; } .t-cp { min-height: 48px; }
}
/* a narrow window (a phone held upright on a desktop browser): one column, the look under the name and password, nothing off the glass;
   each field names itself (as on a short glass), so the long card ends clear of the Music press in the corner */
@media (max-width: 600px) and (min-height: 521px) {
  #title[data-tab="register"] { --card-w: 620px; }
  #f-register { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 8px; grid-template-areas: "a a" "b b" "cls cls" "err err" "app go"; } /* 0.11.1: the creator's door stands beside Create Hero (one row, not two), which pays for the class row: the foot stays clear of the language and music presses */
  /* 0.11.1 the classes on an upright phone: ONE row (the card had 94 px to spare, three stacked presses and the words asked 270), each
     press its weapon's picture over its name and role; the words stand down as on every short glass */
  .t-cpick { grid-template-columns: repeat(min(var(--n, 3), 4), minmax(0, 1fr)); gap: 6px; }
  .t-cp { flex-direction: column; justify-content: center; gap: 2px; min-height: 68px; padding: 5px 2px 6px; text-align: center; }
  .t-cpw { width: 30px; height: 30px; } .t-cpn { align-items: center; } .t-cpn b { font-size: 15px; } .t-cpn i { font-size: 12px; letter-spacing: 0; }
  .t-cline { display: none; }
  #title .t-field label { display: none; }
}
@media (prefers-reduced-motion: reduce) { #title .t-art { animation: none; } #t-motes { display: none; } }

/* ---------------- panels */
#modal { position: fixed; inset: 0; z-index: var(--z-window); }
#modal .dim { position: absolute; inset: 0; background: rgba(10,6,4,.62); }
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(900px, calc(100vw - 24px)); height: min(640px, calc(100vh - 24px));
  background: radial-gradient(130% 80% at 50% 0%, #34261c, #1b130f 75%); box-shadow: 0 0 0 3px #0d0907; }

.panel .x { position: absolute; right: 12px; top: 12px; width: 46px; height: 46px; z-index: 2; }
.panel .x svg { width: 100%; height: 100%; }
.body { position: relative; height: 100%; display: flex; flex-direction: column; padding: 18px 22px 16px; }
.p-head { padding-right: 56px; }
.p-head h2 { margin: 0; font-size: 32px; color: #ffe08a; text-shadow: var(--out); }
.p-head p { margin: 4px 0 10px; color: var(--dim); font-size: 15px; }
/* the purse in a panel's head (0.4.1): the currency's picture, its figure in the title face, its name; never a sentence */
.p-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.p-purse { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: none; }
.p-purse .ic { width: 30px; height: 30px; } .p-purse .ic svg { width: 100%; height: 100%; }
.p-purse b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 26px; color: #ffe08a; text-shadow: var(--out); line-height: 1; }
.p-purse span { font-family: 'Lilita One', 'Lalezar'; font-size: 16px; color: #f1e3c4; text-shadow: var(--out); }
body.touch .p-purse .ic, body.short .p-purse .ic { width: 22px; height: 22px; }
body.touch .p-purse b, body.short .p-purse b { font-size: 19px; } body.touch .p-purse span, body.short .p-purse span { font-size: 13px; }
.p-scroll { flex: 1; overflow-y: auto; padding-right: 6px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.p-scroll::-webkit-scrollbar { width: 8px; } .p-scroll::-webkit-scrollbar-thumb { background: #4a3a2e; }
.p-scroll h3 { margin: 14px 0 6px; font-size: 19px; color: #f0d9a8; }
.p-scroll h3 small { font-family: Nunito; font-size: 14px; color: var(--dim); margin-left: 6px; }
.row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 7px 10px; background: rgba(255,255,255,.035); box-shadow: inset 0 -1px 0 rgba(0,0,0,.4); }
/* 0.10.1 (his 2026-10-10 "ENSURING THE TABS ARE CLEAR CLEAN AND READABLE FOR THE EYE"): a locked row is QUIET, never faint. It stood at 60% whole,
   so the line that says how to open it (the Traveller's sealed worlds, a skill's level) was the hardest thing on the window to read. Its
   picture dims; its words stay at full strength in the quiet inks. */
.row.off { background: rgba(255,255,255,.018); } .row.off > .ic, .row.off > .tv-emb, .row.off > .pt { filter: grayscale(.85) brightness(.6); }
.row.off .r-main b { color: #cbbd9f; } .row.off .r-main span, .row.off .r-side { color: #b3a58b; }
.row .ic.sq { width: 40px; height: 40px; flex: none; }
.r-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row .models { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 58%; } /* Proto 5: every proto a press of its own (his "ALL PROTOS ARE ALWAYS SAVED") */
.r-main b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 17px; }
.r-main span { font-size: 13.5px; color: var(--dim); }
.r-side { font-size: 13.5px; color: var(--dim); text-align: right; }
.r-acts { display: flex; gap: 8px; flex: none; }
.gains { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: 'Lilita One', 'Lalezar'; font-size: 16px; color: #ffe08a; }
.gains span { display: flex; align-items: center; gap: 4px; } .gains span:last-child { color: #8fd8f7; }
.gains .ic{ width: 18px; height: 18px; display: inline-block; }
.itile { width: 48px; height: 48px; flex: none; display: block; padding: 4px; background: #17110d; box-shadow: 0 0 0 3px var(--ti, #6b5a48); }
.itile svg { width: 100%; height: 100%; }
/* THE RARITY FRAMES (2026-10-04, his "ENSURE IT FITS THE STANDARD OF WHAT EACH RARITY COLOR SHOULD BE", then "the thing on the edge.. it
   looks ai slop"): ONE EDGE per tile - the rim in the rung's ink, nothing drawn inside it (T43) and nothing sweeping across it. The rungs
   climb by the rim's colour and the lit well behind the item; Epic's rim wears gold at its four corners, ON the rim itself. Square. */
.itile, .slot { --ti: #8a857c; --tw: rgba(0,0,0,0); position: relative; background: radial-gradient(circle at 50% 42%, var(--tw), rgba(0,0,0,0) 72%), #17110d; box-shadow: 0 0 0 3px var(--ti); }
.itile.t1, .slot.t1 { --ti: #46e070; --tw: rgba(70,224,112,.2); }
.itile.t2, .slot.t2 { --ti: #4aa3ff; --tw: rgba(74,163,255,.28); }
.itile.t3, .slot.t3 { --ti: #bd7bff; --tw: rgba(189,123,255,.36); }
.itile.t3::before, .slot.t3::before { content: ''; position: absolute; inset: -3px; pointer-events: none;
  background: linear-gradient(#e2b44a, #e2b44a) left top / 11px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) left top / 3px 11px no-repeat,
    linear-gradient(#e2b44a, #e2b44a) right top / 11px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) right top / 3px 11px no-repeat,
    linear-gradient(#e2b44a, #e2b44a) left bottom / 11px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) left bottom / 3px 11px no-repeat,
    linear-gradient(#e2b44a, #e2b44a) right bottom / 11px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) right bottom / 3px 11px no-repeat; }
.empty { padding: 18px 12px; color: var(--dim); font-size: 15px; background: rgba(255,255,255,.03); }
.foot { color: var(--dim); font-size: 14px; margin: 12px 2px 4px; }
.strip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(47,95,158,.3); font-size: 15px; }
.strip b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; color: #bfe6ff; }
.strip .press { margin-left: auto; }
.hero-top { display: flex; gap: 18px; align-items: stretch; }
.hero-id { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; background: rgba(0,0,0,.18); min-width: 220px; }
.pt.big { width: 132px; height: 132px; background: radial-gradient(#3e5c86, #1c2c45); box-shadow: 0 0 0 3px #0d0907; }
.hid-name { font-family: 'Lilita One', 'Lalezar'; font-size: 24px; color: #fff4cf; text-shadow: var(--out); }
.lvl { display: flex; align-items: center; gap: 6px; font-family: 'Lilita One', 'Lalezar'; font-size: 17px; }
.lvl .ic, .xpline .ic { width: 22px; height: 22px; }
.xpbar { width: 190px; height: 10px; background: #1a2a33; box-shadow: 0 0 0 2px #0d0907; }
.xpbar i { display: block; height: 100%; background: linear-gradient(#c8a2ff 0 40%, var(--xp) 40%); }
.xpline { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #a8dcf2; }
.hero-stats, .totals { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.totals { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
.bigstat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 6px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.bigstat .ic { width: 34px; height: 34px; }
.bigstat b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 28px; text-shadow: var(--out); }
.bigstat span:last-child { font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: .8px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.center { display: flex; justify-content: center; margin-top: 8px; }

/* the phone held sideways: the same panels, cut shorter */
body.touch .body, body.short .body { padding: 10px 14px 10px; }
body.touch .p-head h2, body.short .p-head h2 { font-size: 24px; }
body.touch .p-head p, body.short .p-head p { font-size: 13px; margin-bottom: 6px; }
body.touch .panel .x, body.short .panel .x { width: 44px; height: 44px; right: 8px; top: 8px; }
body.touch .hero-id, body.short .hero-id { min-width: 170px; padding: 6px; }
body.touch .bigstat b, body.short .bigstat b { font-size: 22px; }
body.touch .bigstat .ic, body.short .bigstat .ic { width: 26px; height: 26px; }
body.touch .row, body.short .row { min-height: 50px; padding: 5px 8px; }
body.touch .itile, body.short .itile { width: 40px; height: 40px; }
.list2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }

/* the phone: SIX WHOLE ITEMS AT ONCE, by going sideways (one-row cards in two columns), never by shrinking under the floors */
body.touch .p-head p { font-size: 12.5px; line-height: 1.25; }
body.touch .p-scroll h3 { margin: 8px 0 4px; font-size: 16px; }

body.touch .row { min-height: 52px; }
body.touch .r-main b { font-size: 15px; } body.touch .r-main span { font-size: 12px; }
body.touch .cards, body.touch .list2 { gap: 6px; }
@media (max-width: 640px) { .cards, .list2 { grid-template-columns: 1fr; } .totals { grid-template-columns: repeat(2, 1fr); } .hero-top { flex-direction: column; } }

/* the password form in Settings and in "Keep your hero" */
.pw { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.pw label { font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.pw-row { display: flex; gap: 10px; }
.pw input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; font: 800 17px Nunito, 'Cairo', sans-serif; color: var(--ink); background: #140e0b; border: 0; box-shadow: 0 0 0 2px #0d0907; outline: none; -webkit-user-select: text; user-select: text; border-radius: 0; }
.pw input:focus { box-shadow: 0 0 0 2px #e2b44a; }
#pw-err { min-height: 18px; margin: 0; color: #ffb4a8; font-size: 14px; }
#modal[data-kind="secure"] .panel { width: min(560px, calc(100vw - 24px)); height: auto; max-height: calc(100vh - 24px); }
#modal[data-kind="rename"] .panel { width: min(640px, calc(100vw - 24px)); height: auto; max-height: calc(100vh - 24px); } /* 0.14.7: the Name Change Scroll's window is as tall as what it holds */

/* 0.3: the class under the hero's name, and the question a weapon of another kind asks */
.hid-cls { font-family: 'Lilita One', 'Lalezar'; font-size: 17px; color: #9fd6ff; text-shadow: var(--out); margin-top: -2px; }
.ask-cls { display: flex; align-items: center; gap: 16px; padding: 12px 4px 4px; }
.ask-cls .ic.big { width: 72px; height: 72px; flex: none; }
.ask-cls p { margin: 0; font-size: 16px; line-height: 1.4; color: #efe3c8; }
.ask-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.ask-cls .ic.big svg { width: 100%; height: 100%; }

/* THE INVENTORY (2026-10-04) */
.inv-eq { display: flex; gap: 18px; }
.inv-eq .eq { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: 'Lilita One', 'Lalezar'; font-size: 14px; color: #e8dcc0; }
.inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.inv-stats > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; background: rgba(0,0,0,.25); }
.inv-stats .ic { width: 22px; height: 22px; } .inv-stats b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 20px; color: #fff4cf; } .inv-stats span:last-child { font-size: 12px; color: var(--dim); }
.inv-grid { display: grid; grid-template-columns: repeat(6, 56px); gap: 9px; justify-content: start; padding: 4px; }
.slot { width: 56px; height: 56px; padding: 5px; border: 0; cursor: pointer; display: block; }
.slot svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.slot.empty { --ti: #3a2f28; cursor: default; background: #120d0a; box-shadow: 0 0 0 3px #2c231d; }
.slot.big { width: 72px; height: 72px; cursor: default; }
.slot:not(.empty):hover { filter: brightness(1.18); }
.slot.sel { outline: 3px solid #fff4cf; outline-offset: 3px; }
.inv-foot { display: flex; align-items: center; gap: 14px; margin: 12px 4px 8px; font-size: 15px; color: #e8dcc0; }
.inv-gold { display: flex; align-items: center; gap: 6px; } .inv-gold .ic { width: 22px; height: 22px; } .inv-gold b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 18px; color: #ffe08a; }
.inv-cnt { color: var(--dim); } .inv-foot .press { margin-left: auto; }
.inv-card { padding: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.ic-head { display: flex; gap: 14px; align-items: center; }
.ic-name { display: flex; flex-direction: column; gap: 2px; } .ic-name b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 21px; } .ic-name span { font-size: 14px; font-weight: 800; }
.ic-lines { margin: 10px 0 4px; padding: 0 0 0 18px; color: #efe3c8; font-size: 15px; line-height: 1.5; }
.cmp { margin: 4px 0; font-size: 14px; color: #d8ccb2; } .cmp.up { color: #6fe08a; } .cmp.down { color: #ff8a7a; } .cmp.cls { color: #9fd6ff; }
.ic-acts { display: flex; gap: 10px; margin-top: 10px; align-items: center; }
.worn { font-family: 'Lilita One', 'Lalezar'; font-size: 15px; color: #9fd6ff; }
.inv-pointer { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; color: var(--dim); font-size: 14px; }
body.touch .inv-grid, body.short .inv-grid { grid-template-columns: repeat(6, 46px); gap: 7px; }
body.touch .slot, body.short .slot { width: 46px; height: 46px; padding: 4px; }

/* THE STORE DOOR (0.3.4, THE STORE STANDS OUT SB1-SB8): first in the column, a hand apart, in its own gold, its drawn picture beside its
   word, a door's height and only as wide as the picture and the word, a slow light crossing it every 3.2 s. On PC the door column stands
   centred on the left edge (his "CENTER THEM TO THE LEFT"); on a phone it keeps the top, clear of the thumbstick's lower left.
   2026-10-06: its slot is the doors' anatomy in GOLD, twice a door's width (128 / 100: the same footprint as before); the picture a chest of
   coin and the Gems' cyan stone at 0.72 of the face (SB3), the word in the room beside it. No other door wears gold (the old Rankings did). */
#doors { align-items: flex-start; }
.d-store { --ic: 46px; --icx: 9px; --icy: 9px; --wfs: 20px; width: calc(var(--door) * 2); background: #3a2204; margin-bottom: var(--u); }
body.touch .d-store, body.short .d-store { --ic: 36px; --icx: 7px; --icy: 7px; --wfs: 16px; width: 96px; } /* 96, not 100: the second door column then ends at 166 px, inside the left 20% of an 844 glass (4.455) */
.d-store .dface { overflow: hidden; }
.d-store .w { left: calc(var(--ic) + var(--icx) + 2px); right: calc(var(--icx) - 2px); bottom: auto; top: calc((var(--door) - var(--wfs)) / 2); color: #fff3cf; }
.d-store .dface::after { content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.3), rgba(255,255,255,0)); animation: storeLight 3.2s ease-in-out infinite; }
@keyframes storeLight { 0% { left: -50%; } 34% { left: 110%; } 100% { left: 110%; } }
/* 0.7.3 THE BLADE POINTS' OWN SPOT (his "AND ITS OWN SPOT AND HUD"): a row of their own in the bare column, above the gold - the drawn mark and
   the outlined figure in the currency's violet, nothing behind (the stats stand bare); a press opens the Store at the packs */
#vitals .bpts { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 0; cursor: pointer; }
#vitals .bpts .ic { width: 30px; height: 30px; }
#vitals .bpts .bv { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 22px; color: #e3d2ff; text-shadow: var(--out); }
#vitals .bpts:hover .bv { color: #fff; }
body.touch #vitals .bpts, body.short #vitals .bpts { min-height: 44px; margin: -7px 0; padding-right: 10px; } /* 0.7.4: a 44 px press on the phone (it was 30) that keeps its 30 px place in the column */
.buff.pot.low { color: #ff9a7a; } /* the potion's last minutes (the norm's WARNING) */
.buff.pot.fresh { animation: potLit 1.4s ease-out; } @keyframes potLit { 0% { transform: scale(1.18); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .buff.pot.fresh { animation: none; } }
body:not(.touch):not(.short) #doors { top: 50%; transform: translateY(-50%); }

/* THE STORE, REBUILT (0.7.3, his "IMPROVE ITS IN-GAME STORE DRASTICALLY" / "VISUALLY" / "to professionally fit the game THEME" / "AND
   PROFESSIONAL STYLE"): OATHMARKET'S MERCHANT HALL over the game's own market at dusk (art/store_market.webp under a scrim, quiet where the
   words stand). A walnut head carries the Blade Points (the mark 1.15x the figure, the figure in the currency's violet, its word above); a
   rail of the sections on the left; every product a DISPLAY CASE of dark walnut, ONE edge in the world's ink with brass corner caps ON it
   (ornament at the corners, never a stripe or a line inside the edge), the forge's picture lit in its own light, the name, one sentence,
   and the price IS the press: money green for a pack, Blade Points violet for everything else. Square on every layer. */
#modal[data-kind="store"] .panel { width: min(1240px, calc(100vw - 24px)); height: min(760px, calc(100dvh - 24px));
  background: #120c09 url('/art/store_market.webp') center 40% / cover no-repeat; }
#modal[data-kind="store"] .panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; filter: none;
  background: linear-gradient(90deg, rgba(14,9,7,.6) 0%, rgba(14,9,7,.84) 12%, rgba(14,9,7,.9) 50%, rgba(14,9,7,.84) 88%, rgba(14,9,7,.6) 100%), /* 0.7.8: the section heads quiet on the market */
    linear-gradient(to bottom, rgba(14,9,7,.1), rgba(14,9,7,.45)); }
#modal[data-kind="store"] .body { display: flex; flex-direction: column; min-height: 0; padding: 0 18px 12px; }
.sto-head { position: relative; flex: none; display: flex; align-items: center; gap: 14px; margin: 0 -18px; padding: 10px 84px 10px 18px; min-height: 82px;
  background: repeating-linear-gradient(90deg, rgba(255,235,200,.03) 0 2px, transparent 2px 9px), linear-gradient(#3e2818, #27180f 70%, #1e130c); box-shadow: 0 3px 0 #0d0907; }
.sto-head .emb { position: relative; width: 60px; height: 60px; flex: none; }
.sto-head .emb svg, .sto-bal .ic svg, .rl .ic svg, .case .pic svg, .offer .pic svg, .mine .pic svg, .press .pm svg, .fig .ic svg, .chip .ic svg, .bpts .ic svg { display: block; width: 100%; height: 100%; }
.sto-ttl { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sto-head h2 { margin: 0; font-size: 34px; line-height: 1; color: #fff1d0; text-shadow: var(--out); }
.sto-sub { font-family: Nunito; font-weight: 800; font-size: 13px; color: #d8c8a8; text-shadow: 0 1px 0 #000; }
.sto-bal { position: relative; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.sto-bal .w { font-family: Nunito; font-weight: 800; font-size: 12.5px; color: #d9c6ff; text-shadow: 0 1px 0 #000; }
.sto-bal .row { display: flex; align-items: center; gap: 6px; }
.sto-bal .ic { width: 34px; height: 34px; } /* 1.15 x the 30 px figure (SD3), an even whole pixel */
.sto-bal b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 30px; line-height: 1; color: #efe4ff; text-shadow: var(--out); }
.sto-head .get { position: relative; min-height: 48px; }
.sto-main { flex: 1; min-height: 0; display: flex; gap: 14px; padding-top: 12px; }
.sto-rail { flex: none; width: 178px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.rl { position: relative; display: flex; align-items: center; gap: 10px; flex: none; height: 50px; padding: 0 10px; text-align: left; color: #e8dcc4;
  font-family: 'Lilita One', 'Lalezar'; font-size: 16px; text-shadow: var(--out); background: linear-gradient(#352519, #22170f); box-shadow: 0 0 0 2px #0d0907; }
.rl .ic { width: 34px; height: 34px; flex: none; }
.rl .w { flex: 1; min-width: 0; line-height: 1.1; }
.rl .n { font-style: normal; font-size: 14px; color: #fff; padding: 1px 7px; background: #6a44c4; box-shadow: 0 0 0 2px #26104f; text-shadow: none; }
.rl:hover { color: #fff3d6; background: linear-gradient(#45301f, #2b1d13); }
.rl.on { color: #fff3d6; background: linear-gradient(#7a5530, #533819); box-shadow: 0 0 0 2px #0d0907; }
.sto-scroll { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 0 6px 10px 4px; }
.sto-scroll section { padding-bottom: 6px; }
.sto-scroll section h3 { margin: 4px 0 8px; font-size: 22px; line-height: 1.15; color: #ffe08a; text-shadow: var(--out); }
.sto-scroll section h3 small { font-family: Nunito; font-weight: 800; font-size: 13.5px; color: #e6dcc6; margin-left: 8px; text-shadow: 0 1px 0 #000; }
.sto-legal { margin: 10px 0 2px; color: #b8aa90; font-size: 12.5px; text-shadow: 0 1px 0 #000; }
/* THE DISPLAY CASE: walnut, one edge, the picture lit in its own light (--lt). 0.11.4: NO CORNER CAPS (his 2026-10-11 "REMOVE THESE EDGES
   THING ON THE CARD ITS AI SLOP"): the four brass corner brackets that stood on every Store card are gone, never to return */
.case, .offer, .mine { --lt: rgba(255,214,140,.35); position: relative;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,220,160,.07), transparent 60%), repeating-linear-gradient(90deg, rgba(255,235,200,.025) 0 2px, transparent 2px 8px), linear-gradient(#33241a, #21170f 60%, #1a120c);
  box-shadow: 0 0 0 3px #0d0907, 0 8px 14px rgba(0,0,0,.35); }
.case .pic, .offer .pic, .mine .pic { position: relative; flex: none; }
.case .pic::before, .offer .pic::before, .mine .pic::before { content: ''; position: absolute; inset: -16%; background: radial-gradient(closest-side, var(--lt), transparent); pointer-events: none; }
.case .pic svg, .offer .pic svg, .mine .pic svg { position: relative; filter: drop-shadow(0 5px 0 rgba(0,0,0,.35)); }
.h-rename { --lt: rgba(111,208,168,.5); } .h-xp { --lt: rgba(70,168,216,.62); } .h-gold { --lt: rgba(240,185,62,.55); } .h-elix { --lt: rgba(127,208,192,.55); } .h-look { --lt: rgba(255,138,200,.5); }
.h-bag { --lt: rgba(216,116,58,.5); } .h-stash { --lt: rgba(201,162,74,.5); } .case.pack, .k-guild { --lt: rgba(167,123,255,.62); }
.k-starter { --lt: rgba(240,185,62,.5); } .k-adventurer { --lt: rgba(216,116,58,.5); } .k-champion { --lt: rgba(255,207,74,.58); } .k-guild { --lt: rgba(74,142,224,.55); }
.sto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 14px; padding: 3px; }
.sto-grid.packs { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* the five rungs on one line on the PC cut */
/* 0.11.2 THE SKINS: six cards on one line on the PC cut, each a tall picture of HIS hero in the skin (his "6 different skins" / "WHEN WORN") */
.sto-grid.skins { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 12px; }
.case.skin { --lt: rgba(183,156,255,.42); padding: 10px 10px 12px; }
.case.skin .pic { width: 100%; height: 214px; }
.case.skin .pic::before { inset: 4% 0; } /* the light behind him stays inside the card (at -16% of a full-width picture it pushed the Store 3 px sideways) */
.case.skin .pic img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 0 rgba(0,0,0,.35)); }
.case.skin .nm { font-size: 17px; min-height: 2.2em; display: flex; align-items: center; } .case.skin .ln { font-size: 13px; min-height: 5.2em; }
.case.skin.wearing { --lt: rgba(120,220,120,.42); }
.badge.own { --bh: #6a44c4; --bhd: #26104f; } .badge.on { --bh: #3c9a4a; --bhd: #18421e; }
.case.skin .sx { font-family: 'Lilita One', 'Lalezar'; font-size: 15px; line-height: 1.15; color: #9fd6ff; text-shadow: var(--out); } /* 0.11.4: what a worn skin gives, under its name */
.sk-side .sk-xp { color: #9fd6ff; font-weight: 800; }
#sto-skins h3 { display: flex; align-items: baseline; gap: 8px; } #sto-skins h3 small { flex: 1; min-width: 0; margin-left: 0; } #sto-skins h3 small .sh { display: none; }
.sto-scroll section h3 .cap { flex: none; font-style: normal; font-family: Nunito; font-weight: 800; font-size: 13.5px; color: #d9c2ff; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.sk-slot .sk-pt { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 0.10.3 YOUR ITEMS, THE STORE'S OWN INVENTORY: 64 slots whole, no scroll (the slot's side is set by main.js fitInv from the room it has);
   a slot is a square well in its own deepest shade (one edge, no highlighter), a held one lit by its kind's light, the picked one a lifted plate */
.sto-inv { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 6px 4px 4px; }
.sto-inv h3 { flex: none; display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; font-size: 22px; line-height: 1.15; color: #ffe08a; text-shadow: var(--out); }
.sto-inv h3 small { font-family: Nunito; font-weight: 800; font-size: 13.5px; color: #e6dcc6; text-shadow: 0 1px 0 #000; }
.sto-inv h3 .cap { margin-inline-start: auto; font-family: Nunito; font-style: normal; font-weight: 800; font-size: 13.5px; color: #d9c6ff; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.sinv-body { flex: 1; min-height: 0; display: flex; align-items: flex-start; gap: 16px; }
.sinv-grid { flex: none; display: grid; grid-template-columns: repeat(8, 64px); grid-auto-rows: 64px; gap: 6px; padding: 2px; }
.sslot { position: relative; display: block; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; background: linear-gradient(#22170f, #17100a); box-shadow: inset 0 0 0 2px #0d0907; }
.sslot.has { --lt: rgba(255,214,140,.35); background: linear-gradient(#3a2819, #241710); cursor: pointer; }
.sslot.has:hover { background: linear-gradient(#49331f, #2d1e13); }
.sslot.sel, .sslot.sel:hover { background: linear-gradient(#7a5530, #533819); }
.sslot .pic { position: absolute; inset: 12%; display: block; }
.sslot .pic::before { content: ''; position: absolute; inset: -10%; background: radial-gradient(closest-side, var(--lt), transparent); pointer-events: none; }
.sslot .pic svg { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.sslot .n { position: absolute; inset-inline-end: 4px; bottom: 3px; font-family: 'Lilita One', 'Lalezar'; font-style: normal; font-size: 16px; line-height: 1; color: #fff; text-shadow: var(--out); }
.sslot .run { position: absolute; inset-inline-start: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #7be08a; box-shadow: 0 0 0 2px #0d0907; } /* a real circle: this potion is running */
.sinv-side { --lt: rgba(255,214,140,.35); position: relative; flex: 1; min-width: 0; max-width: 330px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,220,160,.07), transparent 60%), linear-gradient(#33241a, #21170f 60%, #1a120c); box-shadow: 0 0 0 3px #0d0907, 0 8px 14px rgba(0,0,0,.35); }
.sinv-side > .pic { position: relative; align-self: center; width: 112px; height: 112px; }
.sinv-side > .pic::before { content: ''; position: absolute; inset: -16%; background: radial-gradient(closest-side, var(--lt), transparent); pointer-events: none; }
.sinv-side > .pic svg { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 5px 0 rgba(0,0,0,.35)); }
.sinv-side .txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sinv-side .nm { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 22px; line-height: 1.1; color: #fff3d6; text-shadow: var(--out); }
.sinv-side .hold { font-family: 'Lilita One', 'Lalezar'; font-size: 17px; line-height: 1; color: #ffe08a; text-shadow: var(--out); }
.sinv-side .ln { font-size: 14px; line-height: 1.35; color: #e6dcc6; }
.sinv-side .st { font-size: 13px; font-weight: 800; color: #bfe8c4; text-shadow: 0 1px 0 #000; }
.sinv-side .press { min-height: 48px; }
.sto-head .mine-door { display: none; } /* the PC cut reaches Your Items by the rail's first press; the phone cut, which has no rail, by this one */
body.touch .sto-head .mine-door, body.short .sto-head .mine-door { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; font-size: 15px; white-space: nowrap; }
.mine-door .pm { width: 24px; height: 24px; flex: none; } .mine-door .pm svg { display: block; width: 100%; height: 100%; }
.mine-door .n { font-style: normal; font-size: 13px; color: #fff; padding: 1px 6px; background: #6a44c4; box-shadow: 0 0 0 2px #26104f; text-shadow: none; }
body.touch .sto-inv, body.short .sto-inv { padding: 0 2px 2px; }
body.touch .sto-inv h3, body.short .sto-inv h3 { margin: 2px 0 4px; font-size: 17px; } body.touch .sto-inv h3 small, body.short .sto-inv h3 small { font-size: 11.5px; }
body.touch .sto-inv h3 .cap, body.short .sto-inv h3 .cap { font-size: 11.5px; }
body.touch .sinv-body, body.short .sinv-body { flex-direction: column; align-items: stretch; gap: 8px; }
body.touch .sinv-grid, body.short .sinv-grid { align-self: center; }
body.touch .sslot .n, body.short .sslot .n { font-size: 13px; inset-inline-end: 3px; bottom: 2px; }
body.touch .sinv-side, body.short .sinv-side { flex: none; max-width: none; flex-direction: row; align-items: center; gap: 10px; padding: 6px 10px; }
body.touch .sinv-side > .pic, body.short .sinv-side > .pic { width: 44px; height: 44px; align-self: center; flex: none; }
body.touch .sinv-side .txt, body.short .sinv-side .txt { flex: 1; gap: 1px; } body.touch .sinv-side .nm, body.short .sinv-side .nm { font-size: 16px; }
body.touch .sinv-side .hold, body.short .sinv-side .hold { font-size: 13px; } body.touch .sinv-side .ln, body.short .sinv-side .ln { font-size: 11.5px; line-height: 1.2; }
body.touch .sinv-side .st, body.short .sinv-side .st { display: none; } /* the phone strip keeps the name, the count, the sentence and the press; the state stays on the slot's dot */
body.touch .sinv-side .press, body.short .sinv-side .press { flex: none; min-height: 44px; min-width: 92px; padding: 0 12px; font-size: 15px; }
/* 0.10.3 THE STORE'S PURSE: what he has and the press that gets more, ONE plate in the currency's own deep violet (one edge); the mark
   leads, "Your Blade Points" names the figure, the figure is the biggest thing in the band after the title */
.sto-ttl { flex: 1 1 0; }
.sto-sub { line-height: 1.2; }
.sto-purse { position: relative; flex: none; display: flex; align-items: stretch; background: linear-gradient(#2a1a4a, #180f2c); box-shadow: 0 0 0 3px #0d0907; }
.sto-purse .sto-bal { margin: 0; flex-direction: row; align-items: center; gap: 10px; padding: 6px 16px 6px 12px; }
.sto-bal .col { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.sto-purse .get { min-height: 0; align-self: stretch; padding: 0 16px; }
body.touch .sto-purse .sto-bal, body.short .sto-purse .sto-bal { gap: 6px; padding: 3px 10px 3px 8px; }
body.touch .sto-purse .get, body.short .sto-purse .get { min-height: 44px; padding: 0 10px; }
/* 0.10.3 THE INVENTORY, EASY ON THE EYE (his "FIX AND IMPROVE THE PLAYER'S ' I ' INVENTORY TAB DRASTICALLY TO FEEL A LOT NICER AND SMOOTHER AND
   EASY ON THE EYE"): the bag sits in one quiet tray; a tile's rim is its rarity in a deeper tone (the full ink is kept for the one he
   picked), its well lit by the same rarity; an empty slot is a soft well, never a ringed box; the picked tile LIFTS (no cream outline);
   every state eases in 0.12 s. Scoped to the Inventory, so the trade window and the shops keep their own tiles. */
.inv .inv-grid { gap: 8px; padding: 8px; background: rgba(0,0,0,.26); }
.inv .inv-grid .slot:not(.empty), .inv .inv-eq .slot:not(.empty) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ti) 58%, #0d0907); background-color: #1b140f; }
.inv .inv-grid .slot.empty { background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px rgba(0,0,0,.28); }
.inv .inv-grid .slot:not(.empty):hover, .inv .inv-eq .slot:not(.empty):hover { filter: brightness(1.16); transform: translateY(-1px); }
.inv .inv-grid .slot.sel, .inv .inv-eq .slot.sel { outline: none; box-shadow: 0 0 0 2px var(--ti), 0 7px 12px rgba(0,0,0,.6); background-color: #2b2018; transform: translateY(-2px); filter: brightness(1.12); }
.inv .inv-foot { margin: 2px 2px 0; }
/* 0.10.3 PICK, HOLD AND DROP: the tile he carries is a copy moved by transform alone; the slot it left dims, the slot under it lifts,
   and the window steps back while the tile is over the world */
.inv-grid .slot[data-key], .inv-eq .slot[data-eq] { touch-action: none; }
.inv-grid .slot, .inv-eq .slot { transition: transform .12s ease-out, filter .12s ease-out, opacity .12s ease-out, background-color .12s ease-out; }
.slot.lifted { opacity: .28; }
.inv-grid .slot.over, .inv-eq .eq.over .slot { filter: brightness(1.45); transform: scale(1.07); }
.inv-grid .slot.empty.over { background: #33261d; filter: none; }
.slot.carry { position: fixed; left: 0; top: 0; z-index: 99999; margin: 0; pointer-events: none; transition: none; will-change: transform; filter: drop-shadow(0 10px 10px rgba(0,0,0,.55)); }
#modal .panel { transition: filter .14s ease-out; }
body.carry-out #modal .panel { filter: brightness(.72); }
/* THE DROP CARD: asks before anything leaves the bag */
.inv-ask { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(10,6,4,.66); }
.ask-box { width: min(380px, calc(100% - 24px)); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 18px 16px; text-align: center;
  background: linear-gradient(#33241a, #21170f 60%, #1a120c); box-shadow: 0 0 0 3px #0d0907, 0 14px 30px rgba(0,0,0,.6); }
.ask-box .nm { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 22px; line-height: 1.15; text-shadow: var(--out); }
.ask-box p { margin: 0; font-size: 16px; line-height: 1.3; color: #efe3c8; } .ask-box p.how { font-size: 14px; color: #d8ccb2; } .ask-box p.no { font-size: 14px; font-weight: 800; color: #ff8a7a; }
.ask-box .amt { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; color: #e8dcc0; }
.ask-box .amt input { width: 140px; height: 44px; text-align: center; font: 400 20px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; background: #120d0a; border: 0; box-shadow: inset 0 0 0 2px #0d0907; }
.ask-box .amt input.bad { color: #ff8a7a; }
.ask-box .ask-acts { margin-top: 8px; } .ask-box .ask-acts .press { min-width: 132px; min-height: 48px; }
body.touch .ask-box, body.short .ask-box { gap: 5px; padding: 10px 14px; } body.touch .ask-box .slot.big, body.short .ask-box .slot.big { width: 52px; height: 52px; }
body.touch .ask-box .ask-acts, body.short .ask-box .ask-acts { margin-top: 4px; } body.touch .ask-box .ask-acts .press, body.short .ask-box .ask-acts .press { min-height: 44px; }
.case { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 12px; text-align: center; }
.case .pic { width: 104px; height: 104px; }
.case .txt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.case .nm, .offer .nm { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 19px; line-height: 1.1; color: #fff3d6; text-shadow: var(--out); }
.case .ln { font-size: 13.5px; color: #e6dcc6; line-height: 1.3; min-height: 2.6em; }
.case .acts { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: auto; }
.case .acts .press { min-width: 0; padding: 0 8px; }
.case .acts:has(> .press.two) { grid-template-columns: 1fr; } /* 0.7.8: one press a row, each wide enough to say "5 for the price of 4" whole */
body.touch .case .acts .press.two, body.short .case .acts .press.two { padding: 6px 7px; } /* 0.7.8: "5 for the price of 4" whole inside its press on the PC cut (it stood 4 px over its edge) */
.badge { position: absolute; z-index: 1; left: 8px; top: 8px; padding: 2px 9px; font-family: 'Lilita One', 'Lalezar'; font-size: 15px; color: #fff; text-shadow: 0 1px 0 var(--bhd);
  --bh: #6a44c4; --bhd: #26104f; background: var(--bh); box-shadow: 0 0 0 2px var(--bhd); }
.badge.h-xp { --bh: #2a78b8; --bhd: #0c2e58; } .badge.h-gold { --bh: #c47a10; --bhd: #4a2606; } .badge.h-elix { --bh: #2e8a7a; --bhd: #0e3a32; }
.badge.best { --bh: #d8742a; --bhd: #5a2406; }
.badge i { font-style: normal; font-family: Nunito; font-weight: 800; font-size: 12px; } /* how long it lasts, beside the 2X */
.held { position: absolute; z-index: 1; right: 8px; top: 8px; padding: 2px 8px; font-family: Nunito; font-weight: 800; font-size: 12px; color: #efe4ff; background: rgba(26,12,52,.82); box-shadow: 0 0 0 2px #0d0907; }
/* the packs: the FIGURE is the headline, the picture grows with the rung */
.case.pack .fig { display: inline-flex; align-items: center; gap: 6px; font-family: 'Lilita One', 'Lalezar'; font-size: 28px; line-height: 1.1; color: #efe4ff; text-shadow: var(--out); }
.case.pack .fig .ic { width: 32px; height: 32px; }
.case.pack.r1 .pic { width: 86px; height: 86px; margin: 9px 0; } .case.pack.r2 .pic { width: 94px; height: 94px; margin: 5px 0; } .case.pack.r3 .pic { width: 100px; height: 100px; margin: 2px 0; }
.case.pack.r4 .pic { width: 104px; height: 104px; } .case.pack.r5 .pic { width: 104px; height: 104px; transform: scale(1.08); }
/* the prices: Blade Points violet, money green; a short one keeps its hue, dimmed, and says why when pressed */
.press.gem { --h: #6a44c4; --hd: #26104f; } .press.usd { --h: #3c9a4a; --hd: #18421e; font-size: 20px; }
.press.short { filter: saturate(.55) brightness(.8); }
.press .pr { display: inline-flex; align-items: center; gap: 5px; }
.press .pm { display: inline-block; width: 22px; height: 22px; flex: none; }
.press.two { flex-direction: column; gap: 0; line-height: 1.05; padding: 4px 6px; min-height: 50px; }
.press .len { font-family: Nunito; font-weight: 800; font-size: 12px; color: #f1e8ff; }
.press .len .sh { display: none; } body.touch .press .len .lg, body.short .press .len .lg { display: none; } body.touch .press .len .sh, body.short .press .len .sh { display: inline; }
.sto-head .get .pm { width: 24px; height: 24px; }
/* the bundles: a wide poster, the picture, the name and its tag, what it holds as chips with their pictures, the worth, the price */
.sto-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px 14px; padding: 3px; }
.offer { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "pic top act" "pic body act"; align-items: center; gap: 6px 14px; padding: 12px 14px; }
.offer .pic { grid-area: pic; width: 96px; height: 96px; }
.o-top { grid-area: top; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .offer .nm { font-size: 22px; }
.o-body { grid-area: body; position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.o-act { grid-area: act; position: relative; display: flex; flex-direction: column; gap: 6px; } .o-act .press { min-width: 128px; min-height: 48px; }
.offer .tag { padding: 2px 8px; background: rgba(0,0,0,.4); font-size: 12.5px; font-weight: 800; color: #ffe08a; } .offer .tag.on { background: #3c9a4a; color: #fff; }
.offer .worth { font-size: 13px; font-weight: 800; color: #ffd27a; }
.offer .ln { position: relative; font-size: 14.5px; font-weight: 800; color: #fff4dc; line-height: 1.3; }
.offer.wide { grid-column: 1 / -1; grid-template-columns: 96px max-content minmax(0, 1fr) auto; grid-template-areas: "pic top body act"; }
.offer.own { opacity: .72; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 4px; background: rgba(0,0,0,.35); font-size: 13.5px; font-weight: 800; color: #fff4dc; }
.chip .ic { width: 24px; height: 24px; display: inline-block; flex: none; }
/* YOUR ITEMS: what he holds, its count on its picture, one press to use it */
.sto-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 12px; padding: 3px; }
.mine { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; }
.mine .pic { width: 60px; height: 60px; }
.mine .cnt { margin-right: .15em; padding: 0; line-height: 1; color: #ffe08a; font-size: 1.15em; font-style: normal; font-family: 'Lilita One', 'Lalezar'; font-size: 17px; color: #fff; text-shadow: var(--out); }
.mine .txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mine .txt b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 16px; line-height: 1.1; color: #fff3d6; text-shadow: var(--out); }
.mine .txt span { font-size: 12.5px; color: #d8c8a8; }
.mine .press { min-width: 92px; }
/* the titles: the plate as it will stand over him */
.sto-grid.titles { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.case.ttl { --lt: rgba(255,106,90,.4); }
.case.ttl .plate { position: relative; height: 84px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Lilita One', 'Lalezar'; line-height: 1.15;
  background: radial-gradient(closest-side, var(--lt), transparent); }
.case.ttl .plate b { font-weight: 400; font-size: 18px; color: #fff4cf; text-shadow: var(--out); } .case.ttl .plate i { font-style: normal; font-size: 16px; color: #ffcf6a; text-shadow: var(--out); }
.case.ttl .plate span { font-size: 13px; color: #e8dcc0; text-shadow: var(--out); }
.case.ttl.worn { --lt: rgba(120,220,120,.42); }
.press.says { font-size: 14px; white-space: normal; line-height: 1.1; }
@media (prefers-reduced-motion: reduce) { .d-store .dface::after { animation: none; } }
/* THE PHONE CUT (both cuts in one delivery; SIX AT ONCE): the window fills the glass, the head is one short band, the rail stands down
   (it repeats the section heads, and the one scroll still reaches every section), the cases are rows three to a line */
body.touch #modal[data-kind="store"] .panel, body.short #modal[data-kind="store"] .panel { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
body.touch #modal[data-kind="store"] .body, body.short #modal[data-kind="store"] .body { padding: 0 10px 6px; }
body.touch .sto-head, body.short .sto-head { min-height: 54px; margin: 0 -10px; padding: 6px 60px 6px 10px; gap: 10px; }
body.touch .sto-head .emb, body.short .sto-head .emb { width: 38px; height: 38px; }
body.touch .sto-head h2, body.short .sto-head h2 { font-size: 24px; } body.touch .sto-sub, body.short .sto-sub { font-size: 11px; }
body.touch .sto-bal .ic, body.short .sto-bal .ic { width: 26px; height: 26px; } body.touch .sto-bal b, body.short .sto-bal b { font-size: 22px; }
body.touch .sto-bal .w, body.short .sto-bal .w { font-size: 11px; }
body.touch .sto-head .get, body.short .sto-head .get { min-height: 44px; padding: 0 10px; font-size: 15px; }
body.touch .sto-rail, body.short .sto-rail { display: none; }
body.touch .sto-main, body.short .sto-main { padding-top: 6px; }
body.touch .sto-scroll section h3, body.short .sto-scroll section h3 { margin: 4px 0 6px; font-size: 17px; }
body.touch .sto-scroll section h3 small, body.short .sto-scroll section h3 small { font-size: 11.5px; }
body.touch .sto-grid, body.short .sto-grid, body.touch .sto-grid.packs, body.short .sto-grid.packs, body.touch .sto-grid.titles, body.short .sto-grid.titles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 10px; }
/* a phone case is ONE row: the picture, the words, the presses beside them (SIX AT ONCE: a case is 62 px tall, eight stand on the 390 glass) */
body.touch .case, body.short .case { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "pic txt acts"; align-items: center; gap: 0 8px; padding: 6px 8px; text-align: left; }
body.touch .case .pic, body.short .case .pic, body.touch .case.pack .pic, body.short .case.pack .pic { grid-area: pic; width: 46px; height: 46px; margin: 0; transform: none; }
body.touch .sto-grid.skins, body.short .sto-grid.skins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 10px; } /* the phone cut: three rows of two, the body 58 x 78 beside its words */
body.touch .case.skin, body.short .case.skin { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 4px 8px; }
body.touch .case.skin .pic, body.short .case.skin .pic { width: 48px; height: 66px; }
body.touch .case.skin .nm, body.short .case.skin .nm { font-size: 15px; min-height: 0; } body.touch .case.skin .ln, body.short .case.skin .ln { min-height: 0; font-size: 11px; line-height: 1.2; }
body.touch .case.skin .badge, body.short .case.skin .badge { left: 4px; top: 3px; font-size: 11px; padding: 0 7px; }
body.touch .case.skin .sx, body.short .case.skin .sx { font-size: 12px; }
body.touch #sto-skins h3 small .lg, body.short #sto-skins h3 small .lg { display: none; } body.touch #sto-skins h3 small .sh, body.short #sto-skins h3 small .sh { display: inline; }
body.touch .sto-scroll section h3 .cap, body.short .sto-scroll section h3 .cap { font-size: 11.5px; }
body.touch .case .txt, body.short .case .txt { grid-area: txt; align-items: flex-start; }
body.touch .case .nm, body.short .case .nm { font-size: 15px; } body.touch .case .ln, body.short .case .ln { font-size: 11px; min-height: 0; line-height: 1.2; }
body.touch .case.pack .fig, body.short .case.pack .fig { font-size: 19px; } body.touch .case.pack .fig .ic, body.short .case.pack .fig .ic { width: 22px; height: 22px; }
body.touch .case .acts, body.short .case .acts { grid-area: acts; display: flex; gap: 6px; width: auto; margin: 0; }
body.touch .case .acts .press, body.short .case .acts .press { min-height: 44px; min-width: 78px; padding: 0 9px; font-size: 15px; }
body.touch .press.two, body.short .press.two { min-height: 44px; padding: 3px 6px; } body.touch .press .len, body.short .press .len { font-size: 10.5px; }
body.touch .badge, body.short .badge { left: 2px; top: 2px; font-size: 10.5px; padding: 1px 6px; box-shadow: 0 0 0 1.5px var(--bhd); }
body.touch .held, body.short .held { display: none; }
body.touch .sto-offers, body.short .sto-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
body.touch .offer, body.short .offer { grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "pic top act" "body body body"; gap: 4px 8px; padding: 8px; }
body.touch .offer.wide, body.short .offer.wide { grid-template-columns: 50px max-content minmax(0, 1fr) auto; grid-template-areas: "pic top body act"; }
body.touch .offer .pic, body.short .offer .pic { width: 50px; height: 50px; }
body.touch .offer .nm, body.short .offer .nm { font-size: 16px; } body.touch .offer .tag, body.short .offer .tag { font-size: 10.5px; padding: 0 6px; }
body.touch .offer .worth, body.short .offer .worth { display: none; } /* stands down on the phone for SIX AT ONCE; the worth stays on the PC cut */
body.touch .offer .ln, body.short .offer .ln { font-size: 11.5px; line-height: 1.2; }
body.touch .o-act .press, body.short .o-act .press { min-width: 76px; min-height: 44px; font-size: 15px; padding: 0 8px; }
body.touch .chip, body.short .chip { font-size: 11px; padding: 1px 6px 1px 2px; background: none; } body.touch .chip .ic, body.short .chip .ic { width: 16px; height: 16px; }
body.touch .sto-mine, body.short .sto-mine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.touch .mine, body.short .mine { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px; padding: 6px; }
body.touch .mine .pic, body.short .mine .pic { width: 40px; height: 40px; } body.touch .mine .press, body.short .mine .press { min-width: 64px; font-size: 14px; padding: 0 8px; }
body.touch .mine .txt span, body.short .mine .txt span { display: none; }
body.touch .case.ttl, body.short .case.ttl { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "plate acts"; }
body.touch .case.ttl .plate, body.short .case.ttl .plate { height: 62px; padding: 0 8px; box-sizing: border-box; } body.touch .case.ttl .plate b, body.short .case.ttl .plate b { font-size: 15px; } body.touch .case.ttl .plate i, body.short .case.ttl .plate i { font-size: 13px; } body.touch .case.ttl .plate span, body.short .case.ttl .plate span { display: none; }

/* ---------------- 0.4, THE WORLDS AND THE PARTY */
/* THE LOADER, REBUILT (2026-10-06, his "LOADING SCREEN DRASTICALLY" / "AND MORE QUALITY"; Floater X PART 14 CG3, CG4, CG17): every change of
   place stands behind the destination drawn by the game itself, edge to edge, graded like the key art and drifting once; in the middle,
   like a film's title card, the place's emblem, its NAME in its own colour, what it holds, the Syndicate 2 bar in the game's gold (one
   rule set with the boot door: .bb-bar) and the trip's one line, held 5.5 s (L14); at the foot a tip, or on the first visit the place's
   own words. No panel: a scrim in the art, darker where the words stand and at the corners. Square everywhere. */
#loader { position: fixed; inset: 0; z-index: var(--z-loader); background: #0b0807; opacity: 0; transition: opacity .2s ease-out; overflow: hidden; --ld-hue: #ffe08a; }
#loader.on { opacity: 1; }
#loader.out { opacity: 0; transition: opacity .45s ease-in; pointer-events: none; }
#ld-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity .35s; }
#ld-art.shown { opacity: 1; animation: ldDrift 7s ease-out forwards; }
@keyframes ldDrift { from { transform: scale(1.02); } to { transform: scale(1.085); } }
@media (prefers-reduced-motion: reduce) { #ld-art.shown { animation: none; } }
.ld-scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 44% 34% at 50% 48%, rgba(12,8,10,.68), rgba(12,8,10,0) 100%),
    radial-gradient(ellipse 120% 95% at 50% 46%, rgba(12,8,10,0) 56%, rgba(12,8,10,.62) 100%),
    linear-gradient(to bottom, rgba(12,8,10,.32), rgba(12,8,10,0) 16%, rgba(12,8,10,0) 72%, rgba(12,8,10,.72)); }
.ld-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -56%); width: min(92vw, 760px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ld-emb { width: 76px; height: 76px; flex: none; filter: drop-shadow(0 3px 0 #0e080a) drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.ld-name { margin: 0; font-size: clamp(46px, 6.2vw, 80px); line-height: 1; letter-spacing: .5px; text-align: center; color: var(--ld-hue);
  text-shadow: 0 4px 0 #0e080a, 4px 0 0 #0e080a, -4px 0 0 #0e080a, 0 -4px 0 #0e080a, 3px 3px 0 #0e080a, -3px 3px 0 #0e080a, 3px -3px 0 #0e080a, -3px -3px 0 #0e080a, 0 10px 26px rgba(0,0,0,.55); }
#loader[data-world="wood"] { --ld-hue: #c8ec8a; } #loader[data-world="frost"] { --ld-hue: #d4f0ff; } #loader[data-world="ember"] { --ld-hue: #ffb46a; }
#loader[data-world="gloom"] { --ld-hue: #cfe6a2; } #loader[data-world="storm"] { --ld-hue: #dfe8f6; } #loader[data-world="hollow"] { --ld-hue: #dccaff; }
.ld-sub { font-family: 'Lilita One', 'Lalezar'; font-size: 20px; color: #f4e6c8; text-shadow: var(--out); text-align: center; margin-bottom: 10px; }
.ld-load { width: min(520px, 100%); } /* 2026-10-10: the door's clean bar (index.html .bb-bar): the trip's line over its near end, the figure over its far end */
.ld-tip { position: absolute; left: 50%; bottom: calc(max(16px, 4vh) + var(--sb)); transform: translateX(-50%); width: min(660px, 88vw); }
.ld-tip.first { color: #fff1cf; font-style: italic; font-size: 17px; } /* CG17: the first visit's own words */
@media (max-height: 520px) {
  .ld-mid { gap: 6px; transform: translate(-50%, -60%); } .ld-emb { width: 48px; height: 48px; } .ld-name { font-size: 42px; }
  .ld-sub { font-size: 15px; margin-bottom: 4px; } .ld-tip.first { font-size: 14px; }
}

/* THE GATE POP-UP (THE POP-UP IS A MOMENT): a banner at the top that never blocks, the gate itself in a well lit in the next world's
   colour, its name, what it is to the hero, how far the gate stands, about 7 s. One edge, square. */
#gatepop { --hue: #ffd27a; position: fixed; top: calc(14px + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-moment); pointer-events: none;
  width: min(640px, calc(100vw - 32px)); display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; padding: 12px 20px 12px 12px;
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--hue) 26%, #17110e) 0%, #17110e 58%); box-shadow: 0 0 0 2px #0d0907; }
#gatepop[data-world="frost"] { --hue: #9fdcff; } #gatepop[data-world="ember"] { --hue: #ff9a4a; } #gatepop[data-world="wood"] { --hue: #8fd46a; }
#gatepop.show { animation: gpIn .42s cubic-bezier(.25, 1.3, .45, 1) both; } #gatepop.out { animation: gpOut .38s ease-in forwards; }
@keyframes gpIn { from { opacity: 0; transform: translate(-50%, -24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes gpOut { to { opacity: 0; transform: translate(-50%, -18px); } }
.gp-art { width: 104px; height: 104px; padding: 12px; background: radial-gradient(circle, color-mix(in srgb, var(--hue) 70%, transparent) 0%, transparent 70%); }
.gp-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gp-words b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 24px; color: color-mix(in srgb, var(--hue) 55%, #ffffff); text-shadow: var(--out); line-height: 1.1; }
.gp-words span { font-size: 15px; color: #e8dcc0; }
.gp-words .gp-live { color: #ffe08a; font-family: 'Lilita One', 'Lalezar'; font-size: 16px; } .gp-words .gp-hint { color: var(--dim); font-size: 14px; }
body.touch #gatepop, body.short #gatepop { grid-template-columns: 70px 1fr; gap: 10px; padding: 8px 12px 8px 8px; }
body.touch .gp-art, body.short .gp-art { width: 70px; height: 70px; padding: 8px; }
body.touch .gp-words b, body.short .gp-words b { font-size: 18px; } body.touch .gp-words span, body.short .gp-words span { font-size: 13px; }

/* the side column under the map: the party's frames, then the hired hero's chip */
#side { position: absolute; right: calc(var(--u) + var(--sr)); top: calc(var(--u) * 2 + var(--map) + 30px + var(--st)); width: 232px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#side > * { pointer-events: auto; }

body.touch #side { top: calc(var(--u) + var(--st)); right: calc(var(--u) * 2 + var(--map) + var(--sr)); width: 214px; }

/* THE PARTY FRAMES (the genre's list of the party): a face, the name in the party's green, the level and class or the place they are in, the
   health; the leader wears the crown; a member elsewhere stands dimmed. A press opens the Party panel. */
#pframes { display: flex; flex-direction: column; gap: 6px; }
.pf-head { display: flex; align-items: center; gap: 6px; font-family: 'Lilita One', 'Lalezar'; font-size: 16px; color: #8ff0c0; text-shadow: var(--out); pointer-events: none; }
.pf-head .ic { width: 24px; height: 24px; } .pf-head small { font-family: Nunito; font-size: 13px; color: var(--dim); }
.pf { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; padding: 5px 8px 5px 5px; background: rgba(16,30,25,.88); box-shadow: 0 0 0 2px #0d0907; text-align: left; }
.pf .pt { width: 40px; height: 40px; background: radial-gradient(#3e7a5e, #16302a); box-shadow: 0 0 0 2px #0d0907; }
.pf-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pf-t b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 15px; color: #8ff0c0; white-space: nowrap; overflow: hidden; }
.pf-t > span { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
/* 0.7.4: a party member's health is rendered like every bar of the game (a recessed track, the fill lit from above, a bright pouring edge) */
.pf-hp { display: block; height: 7px; margin-top: 3px; background: linear-gradient(#120b0c, #35241f); box-shadow: 0 0 0 2px #0d0907; overflow: hidden; }
.pf-hp i { position: relative; display: block; height: 100%; background: linear-gradient(#a6f2c4, #4fd08a 40%, #1f7a4a); transition: width .25s; }
.pf-hp i::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: rgba(240,255,246,.9); }
.pf-hp.wide { width: min(260px, 100%); }
.pf.away { opacity: .6; } .pf.down .pt { filter: grayscale(1) brightness(.7); }
.pf-crown { position: absolute; left: -4px; top: -10px; width: 22px; height: 22px; }
.pf.more { display: block; padding: 6px 10px; font-size: 13px; color: var(--dim); }
body.touch .pf { grid-template-columns: 30px 1fr; gap: 6px; padding: 3px 6px 3px 3px; }
body.touch .pf .pt { width: 30px; height: 30px; } body.touch .pf-t b { font-size: 13px; } body.touch .pf-t > span { font-size: 11px; }
body.touch .pf-head { font-size: 13px; } body.touch .pf-head .ic { width: 18px; height: 18px; }
/* a short glass: the door column wraps into a second column before it reaches the gold and health block over the XP bar (84 px tall) */
body.touch #doors, body.short #doors { flex-wrap: wrap; align-content: flex-start; max-height: calc(100dvh - var(--u) * 4 - var(--xph) - 84px - var(--st) - var(--sb)); }

/* THE INVITATION: a card under the notices that never blocks the fight; the inviter's face, who they are, Join or No, its own clock */
#pask { position: fixed; top: calc(108px + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-ask); display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  width: min(580px, calc(100vw - 24px)); padding: 10px 12px; background: rgba(16,30,25,.95); box-shadow: 0 0 0 2px #0d0907; animation: gpIn .3s ease-out both; }
#pask .pt { width: 52px; height: 52px; background: radial-gradient(#3e7a5e, #16302a); box-shadow: 0 0 0 2px #0d0907; }
.pa-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pa-t b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 18px; color: #8ff0c0; text-shadow: var(--out); }
.pa-t > span { font-size: 13.5px; color: var(--dim); }
.pa-clock { display: block; height: 4px; background: #2b2023; margin-top: 3px; } .pa-clock i { display: block; height: 100%; width: 100%; background: #8ff0c0; }
.pa-acts { display: flex; gap: 8px; }
body.touch #pask { grid-template-columns: 40px 1fr; } body.touch #pask .pt { width: 40px; height: 40px; } body.touch .pa-acts { grid-column: 1 / -1; justify-content: flex-end; }

/* THE PLAYER CARD: another hero, pressed in the world */
#pcard { position: fixed; z-index: var(--z-pcard); display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(20,24,34,.95); box-shadow: 0 0 0 2px #0d0907; max-width: calc(100vw - 16px); }
#pcard .pt { width: 48px; height: 48px; background: radial-gradient(#3e5c86, #1c2c45); box-shadow: 0 0 0 2px #0d0907; }
.pc-t { display: flex; flex-direction: column; min-width: 0; } .pc-t b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 17px; color: #fff4cf; } .pc-t span { font-size: 13px; color: var(--dim); }

/* the Party panel and Corvin's list */
.list1 { display: flex; flex-direction: column; gap: 6px; }
.pm-row .pt, .list1 .row > .pt { width: 44px; height: 44px; flex: none; background: radial-gradient(#3e5c86, #1c2c45); box-shadow: 0 0 0 2px #0d0907; }
.pm-crown { display: inline-block; width: 20px; height: 20px; margin-left: 6px; vertical-align: -3px; }
.tv-row { --hue: #ffd27a; min-height: 74px; }
.tv-row[data-world="wood"] { --hue: #8fd46a; } .tv-row[data-world="frost"] { --hue: #9fdcff; } .tv-row[data-world="ember"] { --hue: #ff9a4a; }
.tv-emb { width: 58px; height: 58px; flex: none; padding: 7px; background: radial-gradient(circle, color-mix(in srgb, var(--hue) 55%, transparent) 0%, rgba(0,0,0,.25) 72%); box-shadow: 0 0 0 2px #0d0907; }
.tv-row .r-main b { color: color-mix(in srgb, var(--hue) 50%, #ffffff); font-size: 19px; }
.tv-row .r-main .tv-lv { color: #ffe08a; font-family: 'Lilita One', 'Lalezar'; font-size: 14px; }
.tv-lock { display: inline-flex; align-items: center; gap: 6px; font-family: 'Lilita One', 'Lalezar'; font-size: 15px; color: var(--dim); }
.tv-lock .ic { width: 26px; height: 26px; }
#prompt.info { cursor: default; } #prompt.info .k { color: #ffb4a8; }

/* ---------------------------------------------------------------- 0.4.1 */
/* THE SHOPS: the shop's own window over the market (the Store's rendered art); the merchant window inside it is 0.7.1's, at the end of this file */
#modal[data-kind="shop"] .panel { width: min(1180px, calc(100vw - 24px)); height: min(760px, calc(100dvh - 24px)); background: #140d0a url('/art/store_market.webp') center 40% / cover no-repeat; }
#modal[data-kind="shop"] .panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; filter: none; background: linear-gradient(90deg, rgba(16,10,8,.35) 0%, rgba(16,10,8,.72) 14%, rgba(16,10,8,.78) 50%, rgba(16,10,8,.72) 86%, rgba(16,10,8,.35) 100%); }
#modal[data-kind="shop"] .body { position: relative; }
.cyou { position: relative; margin-left: auto; padding: 3px 8px; background: var(--ci); color: #1a1210; font-family: 'Lilita One', 'Lalezar'; font-size: 13px; white-space: nowrap; }
.press.two { flex-direction: column; gap: 0; line-height: 1.05; }
.press .pr { display: inline-flex; align-items: center; gap: 4px; }
/* the class's mark on every tile: its weapon in its colour, bottom right */
.cmk { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; padding: 2px; box-sizing: border-box; background: var(--cb); box-shadow: 0 0 0 2px #0d0907; z-index: 1; }
.cmk svg { width: 100%; height: 100%; display: block; }
.pips { display: flex; gap: 4px; margin-top: 2px; } .pips i { width: 16px; height: 8px; background: #1a120d; box-shadow: 0 0 0 2px #0d0907; } .pips i.on { background: #ffb24a; }
body.touch .press.two .len, body.short .press.two .len { font-size: 10.5px; }
/* the panel head's purse */
/* (style in the 0.4.1 purse block above) */

/* THE RECALL: the act bar's button and the channel bar over the act bar */
/* .act.rc: the Recall's light is the forge slot's own (FA.SKILL_HUE.recall); the flat blue tile is gone (0.7.4) */
body.touch .act.rc { right: 17px; bottom: 157px; width: 48px; height: 48px; } body.touch .act.rc .ic { left: 23%; width: 54%; height: 54%; }
body.touch .act .lock, body.short .act .lock { font-size: 10px; inset: 2px; } body.short:not(.touch) .act .lock { font-size: 9px; } /* 0.7.6: a short window's 48 px slot holds "Level 20" 6 px in (it stood 4 px from the lock's edges at 10 px) */ body.touch #xp .xl { font-size: calc(var(--xph) + 3px); } /* 0.7.2: "Level 12" inside the phone slot, the level figure 8 px off the glass foot */ /* 0.7: the arc's top end held 140 px from the blade's centre, under the minimap's place name */
/* 0.7 THE SKILLS BOOK on the act bar: the skill tree's door, a red badge with the skill points waiting */
.act.sbook { width: 48px; height: 48px; } /* 0.7.4: its light is the forge slot's (FA.SKILL_HUE.book) */
.act.sbook .nm { font-size: 9.5px; bottom: 6px; } .act.sbook .ic { left: 22%; top: 7%; width: 56%; height: 54%; } .act.sbook .key { left: 3px; top: 3px; min-width: 15px; height: 15px; font-size: 10px; } /* the name off the foot, the picture above it */
.act .pts { position: absolute; right: 2px; top: 2px; z-index: 3; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; background: #d8443a; color: #fff; font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 12px; line-height: 18px; text-align: center; text-shadow: var(--out); }
.act .pts[hidden] { display: none; }
#channel { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--u) * 3 + var(--xph) + var(--sb) + var(--atk) + 16px); display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: rgba(12,20,34,.92); box-shadow: 0 0 0 2px #0d0907; pointer-events: none; }
#channel .ic { width: 36px; height: 36px; } #channel .ic svg { width: 100%; height: 100%; }
.ch-t { display: flex; flex-direction: column; gap: 5px; }
.ch-t b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 16px; color: #cfeaff; text-shadow: var(--out); }
.ch-bar { display: block; width: 240px; height: 10px; background: #13233a; box-shadow: 0 0 0 2px #0d0907; }
.ch-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#cfeaff 0 45%, #5fb0ff 45%); }
/* 0.9.1 THE CHANNEL BAR, the XP bar's grammar: a recessed track cut into its seconds (a tick a second of the four), the fill lit from above
   with a white-hot pouring edge that glows, and the waystone mark breathing while the channel runs (it stops when the channel does) */
.ch-bar { position: relative; height: 12px; background: #0b1524; box-shadow: 0 0 0 2px #0d0907, inset 0 2px 3px rgba(0,0,0,.6); }
.ch-bar i { position: relative; }
.ch-bar i::after { content: ''; position: absolute; right: -2px; top: -3px; bottom: -3px; width: 4px; background: #fff; box-shadow: 0 0 8px 3px rgba(150,210,255,.85); }
.ch-bar::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(6,10,18,.75) calc(25% - 1px) 25%); }
#channel[data-m="recall"] .ic { animation: chBreathe 1s ease-in-out infinite; }
@keyframes chBreathe { 0%, 100% { filter: drop-shadow(0 0 2px rgba(120,190,255,.5)); } 50% { filter: drop-shadow(0 0 9px rgba(150,210,255,.95)); } }
@media (prefers-reduced-motion: reduce) { #channel[data-m="recall"] .ic { animation: none; } }
.ch-s { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 18px; color: #fff; min-width: 52px; text-align: right; text-shadow: var(--out); }
body.touch #channel { bottom: calc(var(--u) * 2 + var(--xph) + var(--sb) + 226px); right: calc(var(--u) + var(--sr)); left: auto; transform: none; } body.touch .ch-bar { width: 150px; }

/* THE AREA CHAT: bottom right above the XP bar; the log fades when nobody is typing */
#chat { position: absolute; right: calc(var(--u) + var(--sr)); bottom: calc(var(--u) * 2 + var(--xph) + var(--sb));
  /* 0.7.2: never wider than the room the act bar leaves it (one unit clear of the bar's right end, read from #acts' own expression; 0.7.9: 204 = the Skills book and the Stats press, 48 each, and nine 12 px gaps) */
  width: min(400px, 28vw, calc(100vw - var(--u) * 3 - var(--sr) - max(50vw + (var(--act) * 7 + var(--atk) + 204px) / 2, var(--u) * 2 + var(--blade) + var(--act) * 7 + var(--atk) + 204px))); display: flex; flex-direction: column; align-items: stretch; gap: 6px; pointer-events: none; }
#chat-log { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; pointer-events: none; scrollbar-width: none; }
#chat.typing #chat-log { pointer-events: auto; max-height: 260px; }
#chat-log .cl { margin: 0; padding: 2px 8px; font-size: 14px; font-weight: 700; line-height: 1.3; color: #f4ead6; text-shadow: 0 1px 0 #000; background: rgba(14,10,8,.5); overflow-wrap: anywhere;
  animation: chatFade .8s ease forwards; }
@keyframes chatFade { to { opacity: 0; } }
#chat.typing #chat-log .cl { animation: none; opacity: 1; }
#chat-log .cw { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; color: #ffe08a; cursor: pointer; pointer-events: auto; } #chat-log .cw.me { color: #9fe2ff; }
#chat-log .k-from, #chat-log .k-to { color: #f0e0ff; } #chat-log .k-from .cw, #chat-log .k-to .cw { color: #d2a2ff; }
/* 0.7 THE DUEL: the request card (the party invitation's grammar), the 3-2-1, the strip with its clock and the ring warning, the result,
   and the room's line in the chat (its "Duel:" is a label, never a name to whisper) */
#dask { position: fixed; top: calc(196px + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-ask); display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  width: min(600px, calc(100vw - 24px)); padding: 10px 12px; background: rgba(40,24,14,.95); box-shadow: 0 0 0 2px #0d0907; animation: gpIn .3s ease-out both; }
#dask[hidden], #dcount[hidden], #dstrip[hidden], #dres[hidden] { display: none; }
#dask .pt { width: 52px; height: 52px; background: radial-gradient(#8a5a2e, #2e1c10); box-shadow: 0 0 0 2px #0d0907; }
#dask .pa-t b { color: #ffb26b; } #dask .pa-clock i { background: #ffb26b; }
body.touch #dask { grid-template-columns: 40px 1fr; top: calc(150px + var(--st)); } body.touch #dask .pt { width: 40px; height: 40px; } body.touch #dask .pa-acts { grid-column: 1 / -1; justify-content: flex-end; }
#dcount { position: fixed; top: 24%; left: 50%; transform: translateX(-50%); z-index: var(--z-moment); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#dcount b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 96px; line-height: 1; color: #ffb26b; text-shadow: var(--out); }
#dcount b.go { font-size: 72px; color: #fff4cf; }
#dcount span { font-family: 'Lilita One', 'Lalezar'; font-size: 18px; color: #fff4cf; text-shadow: var(--out); }
#dcount.beat b { animation: dBeat .5s ease-out both; }
@keyframes dBeat { from { transform: scale(1.6); } to { transform: scale(1); } } /* the figure is never hidden by its own beat (a page that does not animate still shows it) */
@media (prefers-reduced-motion: reduce) { #dcount.beat b { animation: none; } }
#dstrip { position: fixed; top: calc(108px + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-dstrip); pointer-events: none; display: flex; align-items: center; gap: 12px;
  padding: 6px 14px; background: rgba(40,24,14,.9); box-shadow: 0 0 0 2px #0d0907; white-space: nowrap; }
#dstrip b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 17px; color: #ffb26b; text-shadow: var(--out); display: inline-flex; align-items: center; gap: 6px; }
#dstrip > span { font-size: 14px; color: #f0e2c4; font-variant-numeric: tabular-nums; }
#dstrip .pm { width: 18px; height: 18px; display: inline-flex; } #dstrip .pm svg { width: 100%; height: 100%; }
#dstrip.warn { background: rgba(70,16,12,.94); } #dstrip.warn b { color: #ff7a5a; }
#dres { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); z-index: var(--z-moment); display: flex; flex-direction: column; align-items: center; gap: 6px; box-sizing: border-box;
  width: min(460px, calc(100vw - 24px)); padding: 16px 28px 14px; text-align: center; background: rgba(24,18,16,.96); box-shadow: 0 0 0 2px #0d0907; animation: gpIn .3s ease-out both; cursor: pointer; }
#dres b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 40px; line-height: 1.05; text-shadow: var(--out); }
#dres.r-win b { color: #ffd76a; } #dres.r-lose b { color: #ff8a7a; } #dres.r-draw b { color: #e8dcc0; }
#dres span { font-size: 15px; color: #fff4cf; } #dres small { font-size: 13px; color: var(--dim); }
body.touch #dcount b { font-size: 72px; } body.touch #dres { top: 18%; } body.touch #dres b { font-size: 32px; }
#chat-log .k-duel { color: #ffe2c2; } #chat-log .k-duel .cw { color: #ffb26b; pointer-events: none; cursor: default; }
#chat-row { display: none; gap: 6px; pointer-events: auto; }
#chat.typing #chat-row { display: flex; } #chat.typing #chat-open { display: none; }
#chat-in { flex: 1; min-width: 0; height: 40px; padding: 0 10px; background: rgba(14,10,8,.9); border: 0; outline: 0; box-shadow: 0 0 0 2px #0d0907; color: #fff4dc; font: 700 15px Nunito, 'Cairo', system-ui, sans-serif; }
#chat-in:focus { box-shadow: 0 0 0 2px #ffe08a; }
#chat-to { display: flex; align-items: center; height: 40px; padding: 0 8px; background: #5a3a8a; color: #fff; font-family: 'Lilita One', 'Lalezar'; font-size: 14px; cursor: pointer; white-space: nowrap; }
#chat-to[hidden] { display: none; }
#chat-open { align-self: flex-end; pointer-events: auto; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; background: rgba(14,10,8,.62); border: 0; color: #e8dcc0;
  font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; box-shadow: 0 0 0 2px rgba(13,9,7,.8); cursor: pointer; }
#chat-open .ic { width: 20px; height: 20px; display: inline-block; } #chat-open .ic svg { width: 100%; height: 100%; }
body.touch #chat { bottom: calc(var(--u) * 2 + var(--xph) + var(--sb)); right: auto; left: calc(var(--u) * 2 + var(--sl) + var(--blade)); align-items: flex-start; /* 0.7.2: off the minimap: the foot of the glass between the health blade and the act cluster */
  width: min(250px, calc(100vw - var(--blade) - 228px - var(--u) * 5 - var(--sl) - var(--sr))); } body.touch #chat-open { align-self: flex-start; } body.touch #chat-log { max-height: 66px; } body.touch #chat-log .cl { font-size: 12px; }
@media (max-width: 1360px) { body:not(.touch) #chat { bottom: calc(var(--u) * 3 + var(--xph) + var(--sb) + var(--atk) + 10px); width: min(360px, 34vw); } } /* a narrow window: the chat stands above the act bar, never beside it */
/* SETTINGS IN THE CORNER (0.7.4, his "WE CAN POSITION SETTINGS ON THE VER BOTTOM RIGHT NO?"; main.js placeCornerDoor): the very bottom-right,
   on the act bar's line, one unit in from the edge. Where the chat stands on that same line (a window over 1360 px) it steps left of the
   door, one unit apart, and its width still keeps one unit clear of the act bar's right end (the same expression, less the door and a unit);
   under 1360 px the chat already stands above the act bar, clear of the corner. */
#corner { position: absolute; right: calc(var(--u) + var(--sr)); bottom: calc(var(--u) * 2 + var(--xph) + var(--sb)); display: flex; pointer-events: auto; }
#corner:empty { display: none; }
@media (min-width: 1361px) {
  body.setcorner:not(.touch) #chat { right: calc(var(--u) * 2 + var(--door) + var(--sr));
    width: min(400px, 28vw, calc(100vw - var(--u) * 4 - var(--door) - var(--sr) - max(50vw + (var(--act) * 7 + var(--atk) + 204px) / 2, var(--u) * 2 + var(--blade) + var(--act) * 7 + var(--atk) + 204px))); }
}
body.touch #chat-open { height: 44px; } body.touch #chat.typing { left: calc(var(--u) + var(--sl)); width: min(520px, calc(100vw - 24px)); }

/* the door's count (unread messages and waiting requests), the inline counts */
.door .bdg { position: absolute; right: 3px; top: 3px; z-index: 2; min-width: 20px; height: 20px; /* 0.7.2: on the frame's top-right cap, off the drawn icon */ padding: 0 5px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  background: #d8443a; color: #fff; font-family: 'Lilita One', 'Lalezar'; font-size: 12.5px; box-shadow: 0 0 0 2px #0d0907; }
.door .bdg[hidden] { display: none; }
i.bdg { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; background: #d8443a; color: #fff; font-style: normal; font-family: 'Lilita One', 'Lalezar'; font-size: 12.5px; }

/* the player card: three presses on their own line */
#pcard { grid-template-columns: 48px 1fr; width: 352px; gap: 8px 10px; padding: 10px; }
/* the presses stand in a two-column grid of equal cells, each press filling its cell, its picture and word on one left line (2026-10-08,
   his "IT LOOKS MESSY"): a ragged wrap of seven widths is gone; the card is one fixed width so it never jumps as presses change */
.pc-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.pc-acts .press { width: 100%; min-width: 0; min-height: 36px; justify-content: flex-start; white-space: nowrap; overflow: hidden; }
.pc-acts .pc-wide { grid-column: 1 / -1; order: -1; justify-content: center; } /* the party's press, in every state, across the card */
body.touch .pc-acts .press { min-height: 44px; }
#fask { position: fixed; top: calc(196px + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-ask); display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  width: min(580px, calc(100vw - 24px)); padding: 10px 12px; background: rgba(16,24,40,.95); box-shadow: 0 0 0 2px #0d0907; animation: gpIn .3s ease-out both; }
#fask[hidden] { display: none; }
#fask .pt { width: 52px; height: 52px; background: radial-gradient(#3e5c86, #1c2c45); box-shadow: 0 0 0 2px #0d0907; }
#fask .pa-t b { color: #9fd6ff; }
body.touch #fask { grid-template-columns: 40px 1fr; top: calc(150px + var(--st)); } body.touch #fask .pt { width: 40px; height: 40px; }

/* FRIENDS: the tabs, the list, the messages */
.ftabs { display: flex; gap: 6px; margin-bottom: 10px; }
.ftab { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border: 0; cursor: pointer; background: #2a1f17; color: #d9ccb2; font-family: 'Lilita One', 'Lalezar'; font-size: 16px; box-shadow: 0 0 0 2px #0d0907; }
.ftab.on { background: #3f8f7a; color: #fff; } .ftab small { font-family: Nunito; font-weight: 800; font-size: 13px; opacity: .8; }
.fadd { display: flex; gap: 8px; margin-bottom: 10px; }
.fadd input, .dm-row input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; background: #120d0a; border: 0; outline: 0; box-shadow: 0 0 0 2px #3a2c20; color: #fff4dc; font: 700 15px Nunito, 'Cairo', system-ui, sans-serif; }
.fadd input:focus, .dm-row input:focus { box-shadow: 0 0 0 2px #ffe08a; }
.flist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.fr { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; background: rgba(255,255,255,.035); }
.frw { position: relative; width: 48px; height: 48px; } .frw .pt { width: 48px; height: 48px; display: block; background: radial-gradient(#3e5c86, #1c2c45); box-shadow: 0 0 0 2px #0d0907; }
.fr .dot, .rk .dot { position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; background: #5fd06a; box-shadow: 0 0 0 2px #0d0907; }
.fr:not(.on) .dot { display: none; }
.fr-t { display: flex; flex-direction: column; min-width: 0; } .fr-t b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 17px; color: #fff4cf; }
.fr-t span { font-size: 13px; color: var(--dim); } .fr.on .fr-w { color: #7fe08a; }
.fr-a { display: flex; gap: 6px; }
.dmx { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 10px; height: calc(100% - 56px); min-height: 300px; }
.dm-threads { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.th { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border: 0; cursor: pointer; text-align: left; background: rgba(255,255,255,.04); color: inherit; }
.th.on { background: #2f4a6a; box-shadow: 0 0 0 2px #9fd6ff; }
.th .pt { width: 40px; height: 40px; background: radial-gradient(#3e5c86, #1c2c45); }
.th-t { display: flex; flex-direction: column; min-width: 0; } .th-t b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 15px; color: #fff4cf; }
.th-t span { font-size: 12.5px; color: var(--dim); white-space: normal; overflow-wrap: anywhere; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.dm-pane { display: flex; flex-direction: column; gap: 8px; min-height: 0; background: rgba(0,0,0,.25); padding: 8px; }
.dm-head b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 18px; color: #fff4cf; margin-right: 8px; } .dm-head span { font-size: 13px; color: var(--dim); }
.dm-list { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.dmm { align-self: flex-start; max-width: 78%; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; background: #2a2f3c; }
.dmm.me { align-self: flex-end; background: #4a3a1c; } .dmm span { font-size: 14.5px; font-weight: 700; color: #f4ead6; overflow-wrap: anywhere; } .dmm small { font-size: 11px; color: var(--dim); }
.dm-row { display: flex; gap: 8px; } .dm-empty { padding: 14px; color: var(--dim); font-size: 14px; }
body.touch .flist { grid-template-columns: 1fr; } body.touch .dmx { grid-template-columns: 180px minmax(0, 1fr); }

/* THE RANKINGS: rank, the portrait in its well, name and class, the level; the podium lit; your row lit and pinned */
.rk-list { display: flex; flex-direction: column; gap: 5px; }
.rk { display: grid; grid-template-columns: 44px 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; background: rgba(255,255,255,.04); box-shadow: 0 0 0 2px #0d0907; }
.rk-n { font-family: 'Lilita One', 'Lalezar'; font-size: 22px; color: #d9ccb2; text-align: center; }
.rk-w { position: relative; width: 52px; height: 52px; } .rk-w .pt { width: 52px; height: 52px; display: block; background: radial-gradient(#3e5c86, #1c2c45); box-shadow: 0 0 0 2px #0d0907; }
.rk-t { display: flex; flex-direction: column; min-width: 0; } .rk-t b { position: relative; font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 18px; color: #fff4cf; }
.rk-t b .dot { position: relative; display: inline-block; right: auto; bottom: auto; margin-left: 8px; vertical-align: middle; }
.rk-t span { font-size: 13px; color: var(--dim); }
.rk-lv { display: flex; flex-direction: column; align-items: flex-end; } .rk-lv small { font-size: 11px; font-weight: 800; line-height: 1.1; color: var(--dim); } .rk-lv b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 26px; color: #ffe08a; text-shadow: var(--out); line-height: 1; }
.rk.m1 { background: linear-gradient(90deg, rgba(255,205,80,.32), rgba(255,205,80,.05)); box-shadow: 0 0 0 2px #e2b44a; } .rk.m1 .rk-n { color: #ffd65a; }
.rk.m2 { background: linear-gradient(90deg, rgba(200,214,226,.26), rgba(200,214,226,.04)); box-shadow: 0 0 0 2px #b9c2cc; } .rk.m2 .rk-n { color: #dfe7ee; }
.rk.m3 { background: linear-gradient(90deg, rgba(214,140,80,.26), rgba(214,140,80,.04)); box-shadow: 0 0 0 2px #c8814a; } .rk.m3 .rk-n { color: #f0a46a; }
.rk.m1 .rk-w .pt { box-shadow: 0 0 0 2px #e2b44a, 0 0 14px rgba(255,210,90,.6); }
.rk.me { box-shadow: 0 0 0 2px #9fd6ff; background: rgba(95,176,255,.16); }
.rk-pin { position: sticky; bottom: 0; margin-top: 8px; padding-top: 6px; background: rgba(20,14,11,.96); } .rk-pl { display: block; font-family: 'Lilita One', 'Lalezar'; font-size: 13px; color: #9fd6ff; margin: 0 0 4px 4px; }
body.touch .rk { grid-template-columns: 34px 40px minmax(0, 1fr) auto; gap: 8px; padding: 4px 8px 4px 4px; } body.touch .rk-w, body.touch .rk-w .pt { width: 40px; height: 40px; }
body.touch .rk-lv b { font-size: 20px; } body.touch .rk-t b { font-size: 15px; }
/* 0.7.2: "Level" and its figure on ONE line (caption : figure), the progress under both, so the stack stands off the row's top edge */
.rk-lv:has(> small) { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: baseline; column-gap: 5px; row-gap: 3px; }
.rk-lv:has(> small) > :not(small):not(b) { grid-column: 1 / -1; }

/* ================================================================== 0.5 THE ARMORY
   Legendary is the top rung of the rarity standard (orange #ff9a2e): its rim, a warmer lit well, gold at all four corners and a gold
   line along the foot - still ONE edge (T43): everything Legendary adds stands ON the rim, nothing inside it, nothing sweeping. */
.itile.t4, .slot.t4 { --ti: #ff9a2e; --tw: rgba(255,154,46,.46); }
.itile.t4::before, .slot.t4::before { content: ''; position: absolute; inset: -3px; pointer-events: none;
  background: linear-gradient(#ffd27a, #ffd27a) left top / 13px 3px no-repeat, linear-gradient(#ffd27a, #ffd27a) left top / 3px 13px no-repeat,
    linear-gradient(#ffd27a, #ffd27a) right top / 13px 3px no-repeat, linear-gradient(#ffd27a, #ffd27a) right top / 3px 13px no-repeat,
    linear-gradient(#ffd27a, #ffd27a) left bottom / 13px 3px no-repeat, linear-gradient(#ffd27a, #ffd27a) left bottom / 3px 13px no-repeat,
    linear-gradient(#ffd27a, #ffd27a) right bottom / 13px 3px no-repeat, linear-gradient(#ffd27a, #ffd27a) right bottom / 3px 13px no-repeat; }
.slot .plus { position: absolute; right: 2px; bottom: 1px; font: 400 12px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: 0 0 2px #000, 0 1px 0 #000; font-style: normal; pointer-events: none; }
/* 0.7: Settings and Help as two tabs; a key drawn as a square keycap beside what it does */
.set-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.help-keys .row { grid-template-columns: 112px minmax(0, 1fr); display: grid; align-items: center; gap: 12px; }
.help-keys .hk { justify-self: start; min-width: 44px; padding: 5px 9px; text-align: center; background: #2a201a; color: #fff4cf; font: 400 14px/1 'Lilita One', 'Lalezar', system-ui, sans-serif;
  box-shadow: 0 0 0 2px #0d0907, inset 0 -3px 0 rgba(0,0,0,.4); white-space: nowrap; }
/* 0.7: a stack of ore or trophies in the bag: its picture, its count in the corner */
.slot .cnt { position: absolute; right: 3px; bottom: 2px; z-index: 2; font: 400 13px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: 0 0 2px #000, 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; font-style: normal; pointer-events: none; }.slot.ghost { display: grid; place-items: center; } .slot.ghost .slot-ghost { width: 70%; height: 70%; opacity: .22; filter: grayscale(1); } .slot.ghost svg { width: 100%; height: 100%; }
/* five worn slots in two rows: weapon, armour, helm / boots, amulet */
.inv-bonus { display: grid; gap: 2px; width: 100%; }
.inv-bonus .bt { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px; background: rgba(0,0,0,.22); font-size: 13px; color: var(--dim); }
.inv-bonus .bt b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 15px; color: #ffe08a; }
.ic-lines li.bon { color: #9fe0ff; list-style: '+ '; }
/* the smith's work: one row per piece he works on, Upgrade and Reforge side by side */

/* ================================================================== 0.5 EVERY PANEL ON ITS OWN GROUND, ONE FRAME FOR ALL
   His order (2026-10-04): "MAKE EVERY TAB HAS A QUALITY BACKGROUND OR A BETTER STYLE AND QUALITY SUCH AS THE ARMOER AND OTHERS AND MAKE
   THEM SENARGIZE ACROSS". Every panel stands on a scene of the game's own world, rendered by the game's engine (public/art/panel_*.webp,
   1600 x 900): the Weaponsmith's forge, the Armorer's bench, the Tavern across the plaza, Corvin's waystone, the rack of borrowed blades,
   the plaza at dusk, the Thornwood road. The subject stands at the edges; the middle, where the words stand, is quiet under one scrim.
   Every head is the Store's head in the panel's own hue: a band with a light on its upper half and a dark lip under it, the title in
   white over a dark outline - so the Store, the shops, the Inventory, the Tavern and the rest read as one family. */
/* 0.7.8 THE WINDOW (his "ENSURE ALL OF THE TABS AND PANELS IN GAME MEET MMO HIGH STANDARD" / "CLARITY" / "AND DESIGN", 2026-10-07): the
   scene stays the window's world, but QUIET where the words stand (TB13 / TB14 of _THE_TOP_TIER_ART_RULE.txt): it is drawn a touch out of
   focus (3 px) under a scrim that leaves it at the window's two sides and stills its middle, so no beam of the rack, no roof
   of the plaza, runs through a row of words. ONE edge in the town's bronze with brass corner caps ON it (the Store's display case, never a
   line inside the edge), and a shadow that lifts the window off the world. */
#modal .panel { background: #140d0a; overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,.62); }
#modal .panel::before { content: ''; position: absolute; inset: -12px; pointer-events: none; filter: blur(3px);
  background: linear-gradient(90deg, rgba(16,10,8,.55) 0%, rgba(16,10,8,.93) 5%, rgba(16,10,8,.955) 50%, rgba(16,10,8,.93) 95%, rgba(16,10,8,.55) 100%),
    #140d0a var(--pbg, none) center 45% / cover no-repeat; } /* MEASURED (_THEMED_BACKGROUND_CHECK.py --words, the list area with its words hidden):
    std L 0.044-0.063 under the old scrim (TB13 FAIL), 0.016-0.022 under this one, read 14.9:1 (CLEAN); DIAL: the .955 middle */
#modal .panel::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 3px #7a5530;
  background: linear-gradient(#e2b44a, #e2b44a) left top / 22px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) left top / 3px 22px no-repeat,
    linear-gradient(#e2b44a, #e2b44a) right top / 22px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) right top / 3px 22px no-repeat,
    linear-gradient(#e2b44a, #e2b44a) left bottom / 22px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) left bottom / 3px 22px no-repeat,
    linear-gradient(#e2b44a, #e2b44a) right bottom / 22px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) right bottom / 3px 22px no-repeat; }
#modal[data-kind="shop"][data-sub="weapons"] { --pbg: url('/art/panel_forge.webp'); --pb: #9a4626; --pbd: #3a1608; }
#modal[data-kind="shop"][data-sub="armor"] { --pbg: url('/art/panel_armorer.webp'); --pb: #4e6278; --pbd: #172230; }
#modal[data-kind="shop"] .panel { background: #140d0a var(--pbg, url('/art/store_market.webp')) center 40% / cover no-repeat; }
/* THE SKINS PRESS AND THE SKINS BAG (0.11.1, his "ADD A LITTLE SLOT FOR SKIN SUITS" / "IT CAN BE HERE" / "UP TO 12 SLOTS"): the little press
   stands at the right end of the hero's name band, over his Weapon slot (the spot he circled), the size of nothing it stands beside: a
   slot's own dark well with the Skins mark, its count on its corner. The name keeps its centre (the band pads both sides alike).
   The bag: twelve square wells, six by two, in the Inventory's own slot material; the worn skin's rim is the game's gain green and it
   says Worn; the picked one's is brass. A card as wide as its slots and as tall as what it holds. */
.inv-who { position: relative; padding: 0 42px; }
.inv-skins { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 2px; border: 0; cursor: pointer; background: #17110d; box-shadow: 0 0 0 2px #6b5a48; transition: filter .12s ease-out; }
.inv-skins:hover { filter: brightness(1.3); }
.inv-skins svg { display: block; width: 100%; height: 100%; }
.inv-skins .n { position: absolute; right: 1px; bottom: 1px; min-width: 16px; height: 16px; padding: 0 3px; font: 800 11px/16px Nunito, 'Cairo', sans-serif; font-style: normal; color: #1a1208; background: #e2b44a; text-align: center; }
#modal.iw .inv-who { padding: 0 48px 0 0; align-items: flex-start; text-align: start; } #modal.iw .inv-skins { width: 44px; height: 44px; }
#modal[data-kind="skins"] .panel { width: min(560px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - 24px); }
#modal[data-kind="skins"] .body { height: auto; }
.sk-bag { display: flex; flex-direction: column; gap: 12px; padding: 8px 4px 0; }
.sk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sk-slot { position: relative; display: block; aspect-ratio: 1; padding: 4px; border: 0; background: #17110d; box-shadow: 0 0 0 3px #3a2e24; }
button.sk-slot { cursor: pointer; box-shadow: 0 0 0 3px #6b5a48; } button.sk-slot:hover { filter: brightness(1.25); }
.sk-slot svg { display: block; width: 100%; height: 100%; }
.sk-slot.sel { box-shadow: 0 0 0 3px #e2b44a; } .sk-slot.worn { box-shadow: 0 0 0 3px #7fe08a; }
.sk-on { position: absolute; left: 6px; right: 6px; bottom: 6px; font: 800 11px/15px Nunito, 'Cairo', sans-serif; font-style: normal; color: #0d1a0f; background: #7fe08a; text-align: center; }
.sk-side { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: rgba(255,255,255,.035); }
.sk-side b { font: 400 18px/22px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; }
.sk-side span { font-size: 14px; line-height: 1.4; color: #e8dcc0; }
.sk-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .sk-acts .press { min-height: 44px; } .sk-acts .press.warn { color: #ffb4a8; }
#modal[data-kind="skins"] { --pbg: url('/art/panel_rack.webp'); --pb: #7a5a2e; --pbd: #2e1e0a; }
@media (max-height: 520px) { /* a short glass: the slots beside the words, so twelve stand whole with the press under them */
  .sk-bag { flex-direction: row; align-items: flex-start; gap: 10px; padding-top: 4px; } .sk-grid { flex: 0 0 56%; gap: 6px; } .sk-side { flex: 1; padding: 8px 10px; }
  #modal[data-kind="skins"] .panel { width: min(760px, calc(100vw - 24px)); } #modal[data-kind="skins"] .ask-acts { margin-top: 8px; }
}
/* THE STARTER BAG'S CARD (0.11.1): what the bag holds, a row a thing with its own picture, on the armoury's ground; a card as wide as its
   words and as tall as what it holds (the secure window's shape), on a phone too */
#modal[data-kind="sbag"] .panel { width: min(600px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - 24px); }
#modal[data-kind="sbag"] .body { height: auto; }
.sb-list .itile { width: 56px; height: 56px; }
.sb-list { display: grid; gap: 8px; padding: 10px 4px 0; }
.sb-list .row { align-items: center; }
.sb-list .r-main span { white-space: normal; }
.sb-list .sb-pic { padding: 0; background: radial-gradient(#3a2f3d, #17110d); }
.sb-list .sb-sts { display: flex; flex-wrap: wrap; gap: 4px 10px; } .sb-list .sb-st { font-style: normal; font-weight: 800; color: #7fe08a; } /* what the armour adds, in the game's own gain ink */
#modal[data-kind="inv"], #modal[data-kind="hero"], #modal[data-kind="classask"], #modal[data-kind="sbag"] { --pbg: url('/art/panel_rack.webp'); --pb: #7a5a2e; --pbd: #2e1e0a; }

#modal[data-kind="travel"] { --pbg: url('/art/panel_traveller.webp'); --pb: #2a7676; --pbd: #0c2a2a; }
#modal[data-kind="party"] { --pbg: url('/art/panel_road.webp'); --pb: #3a7a3a; --pbd: #12300f; }
#modal[data-kind="friends"], #modal[data-kind="top"] { --pbg: url('/art/panel_plaza.webp'); --pb: #5a3f8a; --pbd: #20123a; }
#modal[data-kind="settings"], #modal[data-kind="secure"], #modal[data-kind="rename"] { --pbg: url('/art/panel_plaza.webp'); --pb: #4a4a58; --pbd: #18181f; }
/* the head band (the Store keeps its own gold one) */
/* THE HEAD (0.7.8): every window's head is the Store's walnut, its grain and its dark lip; the window's own hue is spent ONCE, as the light
   in its emblem's well (a poured band of a different colour on every window read as a template, never as one game) */
#modal .body > .p-head { position: relative; display: flex; align-items: center; gap: 14px; margin: -18px -22px 12px; padding: 12px 84px 11px 18px;
  background: repeating-linear-gradient(90deg, rgba(255,235,200,.03) 0 2px, transparent 2px 9px), linear-gradient(#3e2818, #27180f 70%, #1e130c); box-shadow: 0 3px 0 #0d0907; }
#modal .body > .p-head .p-ht { flex: 1; min-width: 0; }
#modal .body > .p-head h2 { position: relative; color: #fff1d0; text-shadow: var(--out); line-height: 1.05; }
#modal .body > .p-head p { position: relative; margin: 4px 0 0; color: #dccbaa; text-shadow: 0 1px 0 #000; }
#modal .body > .p-head .p-purse { position: relative; }
.p-emb { position: relative; flex: none; width: 58px; height: 58px; padding: 7px; box-sizing: border-box;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--pb, #8a6a3e) 85%, #fff 15%) 0%, color-mix(in srgb, var(--pb, #8a6a3e) 45%, #120b07) 58%, #120b07 100%);
  box-shadow: 0 0 0 2px #0d0907; }
.p-emb svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)); }
body.touch #modal .body > .p-head, body.short #modal .body > .p-head { margin: -10px -14px 6px; padding: 7px 64px 7px 10px; gap: 10px; }
body.touch .p-emb, body.short .p-emb { width: 44px; height: 44px; padding: 5px; }

/* 0.5 THE BOUNTIES: the Tavern's board (the panel stands on the Tavern's ground in the Tavern's red), three cards, one press each */
#modal[data-kind="bounty"] { --pbg: url('/art/panel_tavern.webp'); --pb: #a8462e; --pbd: #4a1a0e; }
.btys { display: grid; gap: 10px; }
.bty { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; background: rgba(24,16,12,.84); box-shadow: 0 0 0 3px #3a2618; }
.bty.done { box-shadow: 0 0 0 3px #e2b44a; } .bty.claimed { opacity: .62; }
.bty-ic { width: 56px; height: 56px; display: grid; place-items: center; background: #17110d; box-shadow: 0 0 0 3px #4a3424; } .bty-ic svg { width: 80%; height: 80%; }
.bty-main { display: grid; gap: 6px; min-width: 0; } .bty-main > b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 19px; color: #fff4cf; }
.bty-bar { position: relative; height: 18px; background: #120c0a; box-shadow: 0 0 0 2px #3a2618; }
.bty-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #c9a43a; } .bty.done .bty-bar i { background: #e2b44a; }
.bty-bar span { position: relative; display: block; text-align: center; font: 400 13px/18px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
.bty-pay { display: flex; flex-wrap: wrap; gap: 6px; } .bty-pay .chip.rare { color: #9ecbff; }
body.touch .bty, body.short .bty { grid-template-columns: 44px minmax(0, 1fr); } body.touch .bty-act, body.short .bty-act { grid-column: 1 / -1; }
body.touch .bty-ic, body.short .bty-ic { width: 40px; height: 40px; }
/* 0.5: nine doors on a desk screen under ~860 px tall would run into the gold and the health blade (the column is centred there); they
   stand from the top and wrap into a second column above the vitals instead, the way the phone layout already does */
@media (max-height: 860px) {
  body:not(.touch):not(.short) #doors { top: calc(var(--u) + var(--st)); transform: none; flex-wrap: wrap; align-content: flex-start;
    max-height: calc(100dvh - var(--u) * 4 - var(--xph) - var(--vith, 198px) - var(--st) - var(--sb)); } /* 0.12.4: --vith is the vitals column as it really stands (main.js vitalsTall measures it); the typed 84 px was the 0.5 column, before mana, potions and Blade Points, and the Ranks door stood under the Blade Points figure on a glass under ~754 px */
}
/* 0.5 the phone's Inventory: the hero, his five slots and his numbers in one compact band, so the bag stands in view under it */
body.touch .inv-stats, body.short .inv-stats { width: auto; grid-template-columns: repeat(3, 58px); }
body.touch .inv-stats > div, body.short .inv-stats > div { padding: 3px 2px; } body.touch .inv-stats b, body.short .inv-stats b { font-size: 16px; }
body.touch .inv-bonus, body.short .inv-bonus { display: flex; flex-wrap: wrap; gap: 4px; width: auto; } body.touch .inv-bonus .bt, body.short .inv-bonus .bt { padding: 2px 6px; font-size: 11px; gap: 4px; }
body.touch .inv-grid, body.short .inv-grid { grid-template-columns: repeat(auto-fill, 46px); } /* 0.5: the phone shows as much of the bag as its width holds */

/* ===================================================================== 0.5.1 (2026-10-05)
   THE PRESS, REFINISHED (his "ALSO IMPROVE THE BUTTONS IN THE GAME" / "THEY LOOK DULL, CHEAP, BAD, NOT ALIGNED"): the lip hung 4 px
   BELOW the box, so every press stood taller than the field beside it ("Send friend request" against the name field). Now the box IS
   the button: the rim outside (the same 2 px ring every field wears) and the lip and the glint INSIDE, so a press and a field of one
   height share both edges. The face is lit from above (a lighter top, its own hue in the middle, a deeper foot), the label is centred
   over the lip, a hover lifts the light, a press sinks 2 px, and a press that is not ready keeps its hue, dimmed. */
.press { color: #fff; padding: 0 18px 4px; cursor: pointer; transition: filter .08s;
  background: linear-gradient(180deg, color-mix(in srgb, var(--h) 68%, #fff) 0%, var(--h) 46%, color-mix(in srgb, var(--h) 80%, #000) 100%);
  box-shadow: 0 0 0 2px var(--hd), inset 0 -4px 0 var(--hd), inset 0 2px 0 rgba(255,255,255,.3); }
.press::before { display: none; }
.press:hover:not(:disabled) { filter: brightness(1.12); }
.press:active:not(:disabled) { transform: translateY(2px); padding-bottom: 1px; box-shadow: 0 0 0 2px var(--hd), inset 0 -1px 0 var(--hd), inset 0 3px 5px rgba(0,0,0,.28); }
.press:focus-visible { outline: 2px solid #ffe08a; outline-offset: 3px; }
.press.small { padding: 0 12px 3px; }
.press.big { padding: 0 28px 4px; }
.press.two { padding: 7px 8px 8px; } /* 0.7.2: the small line on top stands 7 px under the press's top, never on it */
.press.says { font-size: 15px; line-height: 1.1; white-space: normal; text-align: center; padding: 6px 12px 8px; } /* a state said on a press (no price): it wraps, held off both sides */
.press:disabled { opacity: 1; filter: saturate(.35) brightness(.72); cursor: default; }
.press.usd:disabled { filter: none; opacity: .88; } /* the money press while payments are closed keeps its green (it says its price; the head says payments open soon) */
/* the fields the presses stand beside: one height (44), one ring */
.fadd input, .dm-row input, .pw input { height: 44px; box-shadow: 0 0 0 2px #0d0907, inset 0 2px 4px rgba(0,0,0,.45); background: #120d0a; }
.fadd input:focus, .dm-row input:focus, .pw input:focus { box-shadow: 0 0 0 2px #ffe08a, inset 0 2px 4px rgba(0,0,0,.45); }
.fadd, .dm-row, .pw-row { align-items: stretch; }
.pw > input { flex: 0 0 auto; } /* 0.12.4: the Current password field is a child of the form's COLUMN, where flex: 1 squeezed its height to its text (23 px on every glass, under the 44 px touch floor); the New password field sits in the row and was right */
/* the tabs: raised plates of one height; the open one filled in its own green, never a stripe on an edge */
.ftabs { gap: 8px; }
.ftab { min-height: 44px; padding: 0 18px 3px; color: #f0e2c4; background: linear-gradient(180deg, #45352a, #2c2119 55%, #221912);
  box-shadow: 0 0 0 2px #0d0907, inset 0 -3px 0 #120c08, inset 0 2px 0 rgba(255,255,255,.1); text-shadow: 0 1.5px 0 #0d0907, 1.5px 0 0 #0d0907, -1.5px 0 0 #0d0907, 0 -1.5px 0 #0d0907; }
.ftab:hover { filter: brightness(1.15); }
.ftab.on { color: #fff; background: linear-gradient(180deg, #6cc4ac, #3f8f7a 50%, #2f7462);
  box-shadow: 0 0 0 2px #143a30, inset 0 -3px 0 #143a30, inset 0 2px 0 rgba(255,255,255,.32); text-shadow: 0 1.5px 0 #143a30, 1.5px 0 0 #143a30, -1.5px 0 0 #143a30, 0 -1.5px 0 #143a30; }
.ftab small { opacity: 1; color: #fff4cf; }

/* THE INVENTORY, RE-LAID (research/INVENTORY_CLARITY_2026_10_05.md): three columns sized to the bag, nothing to scroll on any glass that
   holds them; the presses pinned at the foot of the item column. The window is as tall as its content; only a glass too short for it
   scrolls, and then only the body. */
.inv h4 { margin: 0; font: 400 16px 'Lilita One', 'Lalezar', system-ui, sans-serif; letter-spacing: .3px; color: #f0d9a8; text-shadow: var(--out); }
.inv-bag { grid-area: bag; display: flex; flex-direction: column; gap: 10px; }
.inv-foot { display: flex; align-items: center; gap: 12px; margin: 0; min-height: 36px; }
.inv-cnt { font: 800 15px Nunito, 'Cairo', system-ui, sans-serif; color: #e8dcc0; } .inv-cnt.full { color: #ff8a7a; }
/* 0.11.1 THE PAGE NUMBERS (his "APPEARS AS A PAGE NUMBER" / "UP TO 4 PAGES"): one square a page in the bag's own slot material - the page
   shown a lit brass face, a page he owns a dark well (its number cream when it holds something, quiet when it is empty), a page he does
   not own yet dimmed, a press to the Store. A carried tile lights the number it is over. */
/* WHERE THEY STAND (his "Why did u make the tab look fat?" / "here it looks neat and vertically beautiful"): NO row of their own. On the tall
   window the numbers stand at the right of the bag's head row, where Sort stood (Sort stands in the purse row beside Your Items), so the
   window keeps the height, the width and the slot side it had before the pages. The column (.inv-pgrow) is the side-by-side cut's alone. */
.inv-pgrow { display: none; }
.inv-pgs { display: flex; gap: 4px; }
.inv-foot .inv-pgs { margin-left: auto; }
.inv-foot .inv-cnt, .inv-foot .inv-better { white-space: nowrap; flex: none; }
#modal:not(.iw) .inv-foot:has(.inv-cnt.full):has(.inv-better) h4 { display: none; } /* a full bag WITH better pieces in it: the count's own words (", full") lead the row and the word Bag stands down, so nothing wraps (measured: 356 px of words in a 321 px row) */
.inv-purse .press + .press { margin-left: 0; } /* Sort, then Your Items: the first takes the row's spare room, the second stands beside it */
.inv-pg { width: 26px; height: 26px; padding: 0 0 2px; font: 400 16px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #8f7d62; background: #17110d; box-shadow: 0 0 0 2px #4a3b2e; cursor: pointer; transition: filter .12s ease-out, background-color .12s ease-out; }
.inv-pg.has { color: #f0dfb8; }
.inv-pg:hover, .inv-pg.over { filter: brightness(1.35); }
.inv-pg.on { color: #2a1a08; background: #e2b44a; box-shadow: 0 0 0 2px #7a5a1e; cursor: default; filter: none; }
.inv-pg.buy { color: #8a6fd0; background: #100c09; box-shadow: 0 0 0 2px #2e241b; } /* a page still to buy wears the Blade Points' own violet: it is told apart from an empty page he owns at a glance */
.inv-pg.buy:hover { color: #d9c2ff; }
.inv-pg { font-size: 15px; }
.inv-better { display: inline-flex; align-items: center; gap: 5px; font: 800 14px Nunito, 'Cairo', system-ui, sans-serif; color: #7fe08a; }
.inv-better .upm { position: static; width: 16px; height: 16px; display: inline-block; } .inv-better .upm svg { width: 100%; height: 100%; display: block; }
.inv-foot .press { margin-left: auto; }
.inv-sum { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.inv-sum .inv-stats > div { background: rgba(0,0,0,.3); }
.inv-sum .inv-bonus { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.inv-sum .inv-bonus .bt { background: rgba(0,0,0,.3); }
.inv .inv-card, .trd .inv-card { grid-area: card; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: rgba(0,0,0,.34); box-shadow: none; min-height: 0; }
.inv .ic-body, .trd .ic-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.inv .cmp, .trd .cmp { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.35; }
.ic-stats { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; }
.ic-stats .st { display: grid; grid-template-columns: 22px 1fr auto 48px; align-items: center; gap: 8px; padding: 5px 10px; background: rgba(255,255,255,.06); font: 800 15px Nunito, 'Cairo', system-ui, sans-serif; color: #efe3c8; }
.ic-stats .ic { width: 20px; height: 20px; } .ic-stats .ic svg { width: 100%; height: 100%; display: block; }
.ic-stats b { font: 400 20px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-align: right; }
.ic-stats em { font: 400 17px 'Lilita One', 'Lalezar', system-ui, sans-serif; font-style: normal; text-align: right; }
.ic-stats em.up { color: #6fe08a; } .ic-stats em.down { color: #ff8a7a; }
.inv .ic-lines, .trd .ic-lines { margin: 2px 0 0; padding: 0 0 0 18px; color: #ffe08a; font-size: 14px; line-height: 1.45; }
.inv .ic-acts, .trd .ic-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.inv .ic-acts .press, .trd .ic-acts .press { flex: 1 1 auto; }
.inv .ic-acts .worn, .trd .ic-acts .worn { flex: 1 1 100%; }
/* the tile marks: at most two - the up arrow (better than what you wear, top right), the class badge (another class, bottom right);
   the upgrade +n moves to the top left so no two marks share a corner; an item he cannot use yet is dimmed */
.slot .upm { position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; z-index: 2; pointer-events: none; }
.slot .upm svg { width: 100%; height: 100%; display: block; }
.slot .plus { right: auto; bottom: auto; left: 3px; top: 2px; z-index: 2; }
.slot.no > svg:first-child { opacity: .42; filter: grayscale(.7); }
body.touch .inv .slot, body.short .inv .slot { width: 44px; height: 44px; padding: 4px; }
body.touch .inv-foot, body.short .inv-foot { min-height: 0; gap: 8px; } body.touch .inv-foot h4, body.short .inv-foot h4 { display: none; }
body.touch .inv .inv-card, body.short .inv .inv-card, body.touch .trd .inv-card, body.short .trd .inv-card { padding: 8px 10px; gap: 6px; }
body.touch .inv .ic-head .slot.big, body.short .inv .ic-head .slot.big, body.touch .trd .ic-head .slot.big, body.short .trd .ic-head .slot.big { width: 52px; height: 52px; }
body.touch .inv .ic-name b, body.short .inv .ic-name b, body.touch .trd .ic-name b, body.short .trd .ic-name b { font-size: 17px; } body.touch .inv .ic-name span, body.short .inv .ic-name span, body.touch .trd .ic-name span, body.short .trd .ic-name span { font-size: 12px; }
body.touch .inv .cmp, body.short .inv .cmp, body.touch .trd .cmp, body.short .trd .cmp { font-size: 12.5px; }
body.touch .ic-stats .st, body.short .ic-stats .st { padding: 3px 8px; font-size: 13px; grid-template-columns: 18px 1fr auto 40px; }
body.touch .ic-stats b, body.short .ic-stats b { font-size: 16px; } body.touch .ic-stats em, body.short .ic-stats em { font-size: 14px; }

/* the piece he wears in that slot, under the chosen one: the thing every change is measured against (research law 3) */
.ic-worn { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px 10px; background: rgba(255,255,255,.05); }
.ic-worn .slot { width: 44px; height: 44px; padding: 4px; cursor: default; flex: none; }
.ic-worn div { display: flex; flex-direction: column; min-width: 0; } .ic-worn span { font: 800 12.5px Nunito, 'Cairo', system-ui, sans-serif; color: var(--dim); }
.ic-worn b { font: 400 16px 'Lilita One', 'Lalezar', system-ui, sans-serif; } .ic-worn em { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; font-style: normal; color: #e8dcc0; }
body.touch .ic-worn, body.short .ic-worn { padding: 4px 8px; } body.touch .ic-worn .slot, body.short .ic-worn .slot { width: 36px; height: 36px; padding: 3px; }

/* ================================================================== 0.6 THE PROFILE, THE MARRIAGE, THE GUILDS, THE FORGE, THE MARKET
   His orders 2026-10-05 (the whole list is in shared/rules.js and HANDOFF LIVE 0.6.0). Every new window stands on a scene of the game's
   own world (public/art/panel_*.webp, rendered by the game) in its own hue; every face is drawn from the real model; one edge per surface;
   square. The phone cut is written beside the PC cut, never after it. */
#modal[data-kind="prof"], #modal[data-kind="top"] { --pbg: url('/art/panel_plaza.webp'); --pb: #5a3f8a; --pbd: #20123a; }
#modal[data-kind="elder"] { --pbg: url('/art/panel_wedding.webp'); --pb: #a8466e; --pbd: #4a1a30; }
#modal[data-kind="guild"] { --pbg: url('/art/panel_guild.webp'); --pb: #2f5f9e; --pbd: #12284a; }
#modal[data-kind="forge"] { --pbg: url('/art/panel_smith.webp'); --pb: #9a4626; --pbd: #3a1608; }
#modal[data-kind="market"], #modal[data-kind="stall"] { --pbg: url('/art/panel_market.webp'); --pb: #8a6a1e; --pbd: #3a2a08; }
#modal[data-kind="prof"] .panel, #modal[data-kind="top"] .panel, #modal[data-kind="elder"] .panel, #modal[data-kind="guild"] .panel,
#modal[data-kind="forge"] .panel, #modal[data-kind="market"] .panel, #modal[data-kind="stall"] .panel { width: min(1120px, calc(100vw - 24px)); height: min(700px, calc(100dvh - 24px)); }
body.touch #modal .panel, body.short #modal .panel { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
/* 0.7.8: a window of a short list is as tall as what it holds (no empty room under three bounties or an empty party), up to the glass, and
   its list scrolls inside it; the phone keeps every window on the whole glass (the rule above wins there) */
#modal[data-kind="party"] .panel, #modal[data-kind="travel"] .panel, #modal[data-kind="bounty"] .panel, #modal[data-kind="friends"] .panel, #modal[data-kind="elder"] .panel {
  height: auto; min-height: min(360px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
#modal[data-kind="party"] .body, #modal[data-kind="travel"] .body, #modal[data-kind="bounty"] .body, #modal[data-kind="friends"] .body, #modal[data-kind="elder"] .body { height: auto; flex: 1 1 auto; min-height: 0; }

/* ---- THE PROFILE: the hero whole on his stand (left), what he is (right) */
.prf { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; min-height: 100%; }
.prf-stage { position: relative; display: flex; flex-direction: column; background: radial-gradient(120% 70% at 50% 34%, color-mix(in srgb, var(--cb) 70%, #2a2440) 0%, #120c14 78%); box-shadow: 0 0 0 3px #0d0907; }
.prf-view { position: relative; flex: 1; min-height: 240px; } /* the canvas fills it and never sizes it (a canvas sized by its own buffer grows itself) */
.prf-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.prf-cv:active { cursor: grabbing; }
.prf-name { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px 12px; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.prf-name b { font: 400 26px/1.05 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: var(--out); text-align: center; overflow-wrap: anywhere; }
.prf-title { font: 400 15px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffcf6a; text-shadow: var(--out); }
.prf-cls { display: inline-flex; align-items: center; gap: 6px; font: 400 16px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--ci); text-shadow: var(--out); }
.prf-cls .ic { width: 22px; height: 22px; }
.prf-on { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); }
.prf-on .dot { position: static; width: 10px; height: 10px; background: #6a5e54; box-shadow: 0 0 0 2px #0d0907; } .prf-on.on { color: #7fe08a; } .prf-on.on .dot { background: #5fd06a; }
.prf-hint { position: absolute; left: 10px; top: 8px; font-size: 12px; color: rgba(255,244,220,.6); pointer-events: none; }
.prf-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.prf-big { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 8px; }
.prf-big > div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 6px; background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.prf-k { font: 800 12px Nunito, 'Cairo', system-ui, sans-serif; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.prf-k small { text-transform: none; letter-spacing: 0; margin-left: 4px; }
.prf-big b { font: 400 30px/1.1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: var(--out); }
.prf-lv { background: linear-gradient(rgba(255,224,138,.22), rgba(0,0,0,.32)) !important; } .prf-lv b { font-size: 40px; color: #ffe08a; }
.prf-big span:last-child { font-size: 12.5px; color: var(--dim); }
.prf-xp { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #a8dcf2; } .prf-xp .xpbar { flex: 1; width: auto; }
.prf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.prf-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.prf-card.wed { background: linear-gradient(90deg, rgba(255,143,180,.22), rgba(0,0,0,.32)); box-shadow: 0 0 0 2px #c86a8a; }
.prf-card.single { opacity: .85; }
.prf-ic { width: 44px; height: 44px; } .prf-ic svg { width: 100%; height: 100%; display: block; }
.prf-ct { display: flex; flex-direction: column; min-width: 0; } .prf-ct b { font: 400 18px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; }
.prf-ct > span:last-child { font-size: 12.5px; color: var(--dim); }
.prf-link { font: inherit; color: #ffb8cf; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.prf-face .pt { width: 52px; height: 52px; display: block; background: radial-gradient(#7a3e5c, #2a1420); box-shadow: 0 0 0 2px #0d0907; }
.prf-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.prf-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.prf-nums > div { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; background: rgba(0,0,0,.28); }
.prf-nums .ic { width: 22px; height: 22px; } .prf-nums b { font: 400 20px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; } .prf-nums span:last-child { font-size: 11.5px; color: var(--dim); }
.prf-worlds { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; background: rgba(0,0,0,.28); }
.prf-wl { display: flex; gap: 6px; min-height: 30px; }
.prf-w { width: 30px; height: 30px; padding: 3px; background: radial-gradient(circle, color-mix(in srgb, var(--hue) 55%, transparent), transparent 72%); }
.prf-w .ic { width: 100%; height: 100%; }
.prf-since { font-size: 12px; color: var(--dim); }
.prf-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.prf-it { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; background: rgba(0,0,0,.3); }
.prf-it.max { background: linear-gradient(90deg, rgba(255,214,110,.22), rgba(0,0,0,.3)); box-shadow: 0 0 0 2px #e2b44a; }
.prf-it .slot { cursor: default; }
.prf-itt { display: flex; flex-direction: column; min-width: 0; } .prf-itt b { font: 400 16px 'Lilita One', 'Lalezar', system-ui, sans-serif; }
.prf-itt span { font-size: 12px; color: var(--dim); } .prf-itt em { font: 800 12px Nunito, 'Cairo', system-ui, sans-serif; font-style: normal; color: #e8dcc0; }
.prf-it.empty { opacity: .6; }
.prf-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
body.touch .prf, body.short .prf { grid-template-columns: 200px minmax(0, 1fr); gap: 8px; }
.prf-stage.stay { position: sticky; top: 0; align-self: start; } /* the hero stands still while the page beside him scrolls */
/* 0.7.9 THE PROFILE'S FRIEND PRESS (under his name, in the state the server says) AND BACK (in the window's head, beside the title) */
.p-back { margin-left: auto; flex: none; }
.prf-fr { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-items: center; margin-top: 6px; }
.prf-frs { display: inline-flex; align-items: center; gap: 5px; font: 400 15px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #9fe6a8; text-shadow: var(--out); }
.prf-frs .ic { width: 18px; height: 18px; }
/* 0.7.9 THE FRIEND LIST'S SECTIONS: the requests waiting for him at the top, counted against the cap of 50; his friends under them */
.fsec + .fsec { margin-top: 12px; }
.fsec-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 6px; }
.fsec-h b { font: 400 18px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: var(--out); }
.fsec-n { font: 400 15px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--dim); } .fsec-n.full { color: #ff9a7e; }
.fsec-w { font-size: 13px; color: var(--dim); }
.fr.in { background: rgba(95,208,106,.09); box-shadow: inset 0 0 0 2px rgba(95,208,106,.4); }
body.touch .prf-view, body.short .prf-view { min-height: 160px; }
body.touch .prf-name b, body.short .prf-name b { font-size: 19px; } body.touch .prf-big b, body.short .prf-big b { font-size: 22px; } body.touch .prf-lv b, body.short .prf-lv b { font-size: 28px; }
body.touch .prf-row2, body.short .prf-row2 { grid-template-columns: 1fr; } body.touch .prf-items, body.short .prf-items { grid-template-columns: 1fr 1fr; }
body.touch .prf-it, body.short .prf-it { grid-template-columns: 44px minmax(0, 1fr); padding: 6px 8px; } body.touch .prf-it .slot, body.short .prf-it .slot { width: 44px; height: 44px; padding: 4px; }

/* ---- +9: MAX on the tile, a gold light breathing round it; the forge row of a maxed piece */
.slot .plus.max { left: 50%; top: auto; bottom: -9px; transform: translateX(-50%); padding: 1px 5px; background: linear-gradient(#ffe9a0, #e2b44a); color: #3a2408; text-shadow: none; font-size: 11px; box-shadow: 0 0 0 2px #0d0907; }
.slot.maxed { animation: maxGlow 2.4s ease-in-out infinite; }
@keyframes maxGlow { 0%, 100% { box-shadow: 0 0 0 3px var(--ti), 0 0 8px 2px rgba(255,214,110,.35); } 50% { box-shadow: 0 0 0 3px var(--ti), 0 0 18px 6px rgba(255,226,140,.7); } }
@media (prefers-reduced-motion: reduce) { .slot.maxed { animation: none; box-shadow: 0 0 0 3px var(--ti), 0 0 12px 4px rgba(255,226,140,.55); } }
.maxtag { justify-self: center; padding: 6px 16px; font: 400 22px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #3a2408; background: linear-gradient(#ffe9a0, #e2b44a); box-shadow: 0 0 0 2px #0d0907; }

/* ---- THE NEW FOLK'S WINDOWS: the speaker's drawn face (left), the work (right) */
.npcw { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; min-height: 100%; }
.npc-face { align-self: start; position: sticky; top: 0; width: 160px; height: 160px; padding: 5px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--pb) 60%, #f6e2c0) 0%, #1a120e 74%); box-shadow: 0 0 0 3px #0d0907; }
.npc-face img { width: 150px; height: 150px; display: block; }
.npcw-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
body.touch .npcw, body.short .npcw { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
body.touch .npc-face, body.short .npc-face { width: 84px; height: 84px; padding: 3px; } body.touch .npc-face img, body.short .npc-face img { width: 78px; height: 78px; }
.wsteps { display: flex; flex-direction: column; gap: 6px; }
.wstep { display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(0,0,0,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.wstep.on { box-shadow: 0 0 0 2px #ffb24a; } .wstep.done { background: linear-gradient(90deg, rgba(95,208,106,.18), rgba(0,0,0,.34)); }
.ws-n { width: 30px; height: 30px; display: grid; place-items: center; font: 400 18px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; background: var(--pb); box-shadow: 0 0 0 2px #0d0907; }
.wstep.done .ws-n { background: #3c9a4a; }
.ws-ic { width: 44px; height: 44px; } .ws-ic svg { width: 100%; height: 100%; }
.ws-t { display: flex; flex-direction: column; min-width: 0; } .ws-t b { font: 400 18px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; } .ws-t b small { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: #ffe08a; margin-left: 6px; }
.ws-t span { font-size: 13px; color: #e8dcc0; }
.ws-st { font: 400 16px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffb24a; padding: 0 6px; } .ws-st.ok { color: #7fe08a; }
.wed-list { margin: -2px 0 0 44px; } .wed-fr .frw, .gm-row .frw, .pm-row .frw, .ms-own .frw { width: 44px; height: 44px; } .wed-fr .frw .pt, .gm-row .frw .pt, .pm-row .frw .pt { width: 44px; height: 44px; }
.wed-ask { box-shadow: 0 0 0 2px #ff8fb4; background: rgba(255,143,180,.14); }
.wed-us { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 16px 10px; background: radial-gradient(70% 90% at 50% 50%, rgba(255,143,180,.3), rgba(0,0,0,.3)); box-shadow: 0 0 0 2px #c86a8a; }
.wu-h { display: flex; flex-direction: column; align-items: center; gap: 6px; } .wu-h .pt { width: 96px; height: 96px; background: radial-gradient(#7a3e5c, #2a1420); box-shadow: 0 0 0 3px #0d0907; }
.wu-h b { font: 400 20px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: var(--out); }
.wu-rings { width: 70px; height: 70px; animation: ringBeat 2.6s ease-in-out infinite; } @keyframes ringBeat { 50% { transform: scale(1.08); } }
.wed-line { text-align: center; color: #ffe4ee; margin: 6px 0; } .wed-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
body.touch .wstep, body.short .wstep { grid-template-columns: 28px 34px minmax(0, 1fr); } body.touch .wstep > .press, body.short .wstep > .press, body.touch .ws-st, body.short .ws-st { grid-column: 1 / -1; justify-self: end; }
body.touch .ws-ic, body.short .ws-ic { width: 34px; height: 34px; } body.touch .wed-list, body.short .wed-list { margin-left: 0; }

/* the cards that ask him (a proposal, a guild's invitation): under the notices, never blocking the fight */
#wask, #gask { position: fixed; top: calc(196px + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-ask); display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  width: min(600px, calc(100vw - 24px)); padding: 10px 12px; background: rgba(40,16,28,.95); box-shadow: 0 0 0 2px #0d0907; animation: gpIn .3s ease-out both; }
#gask { background: rgba(14,24,44,.95); top: calc(108px + var(--st)); }
#wask[hidden], #gask[hidden] { display: none; }
#wask .pt { width: 52px; height: 52px; background: radial-gradient(#7a3e5c, #2a1420); box-shadow: 0 0 0 2px #0d0907; }
#wask .pa-t b { color: #ffb8cf; } #gask .pa-t b { color: #9fd6ff; }
#gask .gban { width: 52px; height: 52px; }
body.touch #wask, body.touch #gask { grid-template-columns: 40px 1fr; } body.touch #wask .pa-acts, body.touch #gask .pa-acts { grid-column: 1 / -1; justify-content: flex-end; }
/* THE MOMENT: the gate's banner, for a ring found, a guild founded or joined */
#moment { --hue: #ffd27a; position: fixed; top: calc(14px + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-moment); pointer-events: none;
  width: min(640px, calc(100vw - 32px)); display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; padding: 12px 20px 12px 12px;
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--hue) 26%, #17110e) 0%, #17110e 58%); box-shadow: 0 0 0 2px #0d0907; }
#moment.show { animation: gpIn .42s cubic-bezier(.25, 1.3, .45, 1) both; } #moment.out { animation: gpOut .38s ease-in forwards; }
#moment .gp-art .gban, #moment .gp-art svg { width: 80px; height: 80px; display: block; }
body.touch #moment, body.short #moment { grid-template-columns: 70px 1fr; gap: 10px; padding: 8px 12px 8px 8px; }
body.touch #moment .gp-art, body.short #moment .gp-art { width: 70px; height: 70px; padding: 6px; }
/* THE WEDDING: the two faces with the rings between them, in a lit well, "Married!", the names and the day; it rolls up by itself */
#wedcard { position: fixed; left: 50%; top: 18%; z-index: var(--z-wedcard); transform: translate(-50%, 0); display: none; flex-direction: column; align-items: center; gap: 8px; padding: 22px 34px 18px;
  background: radial-gradient(80% 90% at 50% 40%, rgba(255,160,196,.55), rgba(42,14,28,.94) 70%); box-shadow: 0 0 0 3px #0d0907, 0 0 0 6px #e2b44a; }
#wedcard.show { display: flex; animation: gpIn .5s cubic-bezier(.25, 1.3, .45, 1) both; } #wedcard.out { animation: wcOut .5s ease-in forwards; }
@keyframes wcOut { to { opacity: 0; transform: translate(-50%, -20px); } }
.wc-faces { display: flex; align-items: center; gap: 14px; } .wc-faces .pt { width: 120px; height: 120px; background: radial-gradient(#7a3e5c, #2a1420); box-shadow: 0 0 0 3px #0d0907; }
.wc-rings { width: 84px; height: 84px; }
.wc-big { font: 400 46px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff; text-shadow: 0 3px 0 #6a1e3c, 3px 0 0 #6a1e3c, -3px 0 0 #6a1e3c, 0 -3px 0 #6a1e3c, 0 6px 0 #3a0e20; }
.wc-line { font: 400 20px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff0f5; text-shadow: var(--out); } .wc-sub { font-size: 14px; color: #ffd6e4; }
body.touch #wedcard, body.short #wedcard { top: 8%; padding: 12px 18px; } body.touch .wc-faces .pt, body.short .wc-faces .pt { width: 72px; height: 72px; } body.touch .wc-big, body.short .wc-big { font-size: 32px; }

/* ---- THE GUILDS: a banner in its own colour, the podium, the rows, the founding */
.gban { display: inline-block; width: 44px; height: 44px; flex: none; } .gban svg { width: 100%; height: 100%; display: block; }
.gban.big { width: 72px; height: 72px; } .gban.huge { width: 110px; height: 110px; }
.gpods { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin: 4px 0 12px; }
.gpod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; background: rgba(0,0,0,.36); }
.gpod b { font: 400 19px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-align: center; } .gpod span { font: 400 15px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffe08a; } .gpod small { font-size: 12px; color: var(--dim); }
.gpod.p1 { padding-top: 22px; background: radial-gradient(80% 70% at 50% 30%, rgba(255,214,90,.34), rgba(0,0,0,.36)); box-shadow: 0 0 0 2px #e2b44a; }
.gpod.p2 { background: radial-gradient(80% 70% at 50% 30%, rgba(210,222,232,.24), rgba(0,0,0,.36)); box-shadow: 0 0 0 2px #b9c2cc; }
.gpod.p3 { background: radial-gradient(80% 70% at 50% 30%, rgba(214,140,80,.26), rgba(0,0,0,.36)); box-shadow: 0 0 0 2px #c8814a; }
.gp-medal { position: absolute; top: 6px; left: 8px; width: 28px; height: 28px; display: grid; place-items: center; font: 400 17px 'Lilita One', 'Lalezar'; color: #3a2408; background: #e2b44a; box-shadow: 0 0 0 2px #0d0907; }
.gpod.p2 .gp-medal { background: #dfe7ee; } .gpod.p3 .gp-medal { background: #f0a46a; }
.gk { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 6px 12px 6px 6px; background: rgba(255,255,255,.04); box-shadow: 0 0 0 2px #0d0907; }
.gk.me { box-shadow: 0 0 0 2px #9fd6ff; background: rgba(95,176,255,.16); }
.gk-t { display: flex; flex-direction: column; min-width: 0; } .gk-t b { font: 400 18px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; } .gk-t span { font-size: 12.5px; color: var(--dim); }
.gk-m { display: flex; flex-direction: column; align-items: flex-end; } .gk-m b { font: 400 20px 'Lilita One', 'Lalezar'; color: #fff4cf; } .gk-m small { font-size: 11.5px; color: var(--dim); }
.gk .rk-lv em { font: 800 11.5px Nunito; font-style: normal; color: var(--dim); }
.gm-head { display: flex; align-items: center; gap: 16px; padding: 10px 12px; background: rgba(0,0,0,.34); }
.gm-t { display: flex; flex-direction: column; gap: 2px; } .gm-t b { font: 400 28px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: var(--out); } .gm-t span { font-size: 13.5px; color: #e8dcc0; }
.gfound { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; padding: 10px; background: rgba(0,0,0,.3); }
.gf-prev { display: grid; place-items: center; height: 150px; background: radial-gradient(circle, rgba(255,224,138,.22), transparent 70%); }
.gf-form { display: flex; flex-direction: column; gap: 6px; } .gf-form label { font: 400 15px 'Lilita One', 'Lalezar'; color: #f0d9a8; }
.gf-form input { height: 44px; padding: 0 12px; background: #120d0a; border: 0; outline: 0; box-shadow: 0 0 0 2px #3a2c20; color: #fff4dc; font: 700 16px Nunito, 'Cairo', system-ui, sans-serif; }
.gf-form input:focus { box-shadow: 0 0 0 2px #ffe08a; }
.gf-sw { display: flex; flex-wrap: wrap; gap: 8px; } .gsw { width: 44px; height: 44px; background: var(--c); box-shadow: 0 0 0 2px #0d0907; cursor: pointer; }
.gsw.on { box-shadow: 0 0 0 2px #0d0907, 0 0 0 5px #ffe08a; }
.gf-form .press.big { align-self: flex-start; margin-top: 4px; }
body.touch .gk, body.short .gk { grid-template-columns: 30px 36px minmax(0, 1fr) auto; gap: 8px; } body.touch .gk .gk-m, body.short .gk .gk-m { display: none; }
body.touch .gpods, body.short .gpods { gap: 6px; } body.touch .gban.big, body.short .gban.big { width: 52px; height: 52px; }
body.touch .gfound, body.short .gfound { grid-template-columns: 90px minmax(0, 1fr); } body.touch .gf-prev, body.short .gf-prev { height: 90px; } body.touch .gban.huge, body.short .gban.huge { width: 80px; height: 80px; }

/* ---- DORAN'S FORGE: the ores he holds, then every piece he wears */
.ores { display: flex; flex-wrap: wrap; gap: 8px; }
.ore { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: rgba(0,0,0,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ore .ic { width: 36px; height: 36px; } .ore b { font: 400 22px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; } .ore span:last-child { font-size: 13px; color: var(--dim); }
.ore.none { opacity: .55; }

/* ---- a material's tile (0.7: the 0.6 Pouch strip under the bag is gone; each stack is a tile in the bag) */
.itile.mat, .slot.mat { padding: 6px; --ti: #8a7a5a; } .slot.mat .ic, .itile.mat .ic { width: 100%; height: 100%; }
/* 0.11 THE WEDDING RING (its picture is rendered from the Blender model, tools/ring): the tile's well is rose, the Legendary frame the slot
   already wears is its one edge, and on its card a slow light turns behind the ring (a real circle of light: round by nature) */
.slot.mat.ringslot { --ti: #ff9a2e; padding: 3px; background: radial-gradient(circle at 50% 44%, #6a2f45 0%, #2c1721 62%, #190e13 100%); }
.slot.ringslot svg { position: relative; z-index: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.slot.big.ringslot::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; filter: blur(7px); animation: ringTurn 9s linear infinite;
  background: conic-gradient(from 0deg, rgba(255,210,122,0) 0deg, rgba(255,210,122,.6) 40deg, rgba(255,154,192,0) 95deg, rgba(255,154,192,.5) 200deg, rgba(255,210,122,0) 260deg, rgba(255,210,122,0) 360deg); }
@keyframes ringTurn { to { transform: rotate(360deg); } }
/* its card: the ring is the card's hero (96 px on the desk cut), a rose and gold light lies across the head behind it (a fade, no edge), its name a size up */
body:not(.touch):not(.short) .inv-card.ringcard .ic-head .slot.big { width: 96px; height: 96px; }
.inv-card.ringcard .ic-head { background: radial-gradient(ellipse at 14% 50%, rgba(255,154,192,.24) 0%, rgba(255,210,122,.10) 42%, rgba(255,210,122,0) 78%); }
.inv-card.ringcard .ic-name b { font-size: 22px; text-shadow: var(--out), 0 0 14px rgba(255,154,46,.45); }
body.touch .inv-card.ringcard .ic-name b, body.short .inv-card.ringcard .ic-name b { font-size: 18px; }
.ringcard .rc-short { display: none; } body.touch .ringcard .rc-short, body.short .ringcard .rc-short { display: inline; } body.touch .ringcard .rc-desk, body.short .ringcard .rc-desk { display: none; }
.ws-ic.ic svg image { image-rendering: auto; }
@media (prefers-reduced-motion: reduce) { .slot.big.ringslot::after { animation: none; } }
/* 0.11 THE MISSION ACCEPTED: a wax seal stamps down beside bare outlined words on a soft fade (no plate, no edge), at the top of the glass, and leaves */
#qacc { --hue: #ffd27a; position: fixed; top: calc(15% + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-moment); pointer-events: none; display: flex; align-items: center; gap: 14px;
  padding: 16px 56px; max-width: min(94vw, 760px); opacity: 0; background: radial-gradient(ellipse at center, rgba(12,8,6,.64) 0%, rgba(12,8,6,.36) 45%, rgba(12,8,6,0) 72%); }
#qacc.show { opacity: 1; transition: opacity .12s ease-out; } #qacc.out { opacity: 0; transition: opacity .3s ease-in; }
.qa-seal { width: 76px; height: 76px; flex: none; transform: rotate(-6deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
#qacc.show .qa-seal { animation: qaStamp .2s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes qaStamp { 0% { transform: scale(1.9) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
.qa-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qa-words b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 30px; line-height: 1.05; white-space: nowrap; color: color-mix(in srgb, var(--hue) 62%, #ffffff); text-shadow: var(--out), 0 0 18px color-mix(in srgb, var(--hue) 55%, transparent); }
#qacc.show .qa-words b { animation: qaWords .2s ease-out .08s both; }
@keyframes qaWords { from { opacity: 0; letter-spacing: .1em; } to { opacity: 1; letter-spacing: 0; } }
.qa-n { font-family: 'Lilita One', 'Lalezar'; font-size: 19px; line-height: 1.15; color: #f3ead8; text-shadow: var(--out); }
.qa-g { font-size: 14px; color: #e8dcc0; text-shadow: var(--out); }
/* -- CUT: QACC (the short glass, 844 x 390): it stands under the quest tracker (which ends at 63 px) and over the hero's name (130 px), so
   its goal line stands down there (the fact is on the tracker and in the keeper's own line): 66 px from the top, 58 px tall */
body.touch #qacc, body.short #qacc { top: calc(66px + var(--st)); gap: 10px; padding: 4px 34px; } body.touch .qa-seal, body.short .qa-seal { width: 50px; height: 50px; }
body.touch .qa-words b, body.short .qa-words b { font-size: 22px; } body.touch .qa-n, body.short .qa-n { font-size: 15px; } body.touch .qa-g, body.short .qa-g { display: none; }
@media (prefers-reduced-motion: reduce) { #qacc.show .qa-seal, #qacc.show .qa-words b { animation: none; } }

/* ---- ODILE'S DESK: the trade's three steps, the plots of the street, the stash */
.plots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.plot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 7px 6px; background: #241a12; box-shadow: 0 0 0 2px #3a2c20; color: #f0dfb8; cursor: pointer; }
.plot b { font: 400 18px 'Lilita One', 'Lalezar'; } .plot span { font-size: 11.5px; color: var(--dim); max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.plot.on { box-shadow: 0 0 0 2px #0d0907, 0 0 0 5px #ffe08a; background: #3a2c14; } .plot.taken { cursor: default; opacity: .7; background: #1a130e; }
.mk-open { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: rgba(0,0,0,.3); }
.mk-open label { font: 400 15px 'Lilita One', 'Lalezar'; color: #f0d9a8; } .mk-open label small { font: 800 12px Nunito; color: var(--dim); margin-left: 6px; }
.mk-open input, .ms-set input, .r-acts input { height: 44px; padding: 0 10px; background: #120d0a; border: 0; outline: 0; box-shadow: 0 0 0 2px #3a2c20; color: #fff4dc; font: 700 15px Nunito, 'Cairo', system-ui, sans-serif; }
.mk-open input:focus, .ms-set input:focus, .r-acts input:focus { box-shadow: 0 0 0 2px #ffe08a; }
.r-acts input { width: 96px; height: 36px; } .ms-set input { width: 110px; height: 36px; }
.mk-open .press.big { align-self: flex-start; }
.mk-now { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: rgba(0,0,0,.32); box-shadow: 0 0 0 2px #c9a43a; }
.mk-head { display: flex; align-items: center; gap: 12px; } .mk-head .ic { width: 44px; height: 44px; } .mk-head div { display: flex; flex-direction: column; }
.mk-head b { font: 400 24px 'Lilita One', 'Lalezar'; color: #fff4cf; } .mk-head span { font-size: 13px; color: #e8dcc0; }
.mk-nums { display: flex; gap: 10px; } .mk-nums > div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px; background: rgba(0,0,0,.3); }
.mk-nums b { font: 400 26px 'Lilita One', 'Lalezar'; color: #fff4cf; } .mk-nums span { font-size: 12px; color: var(--dim); } b.g, span.g { color: #ffe08a; }
.mk-log { margin: 0; padding: 0 0 0 18px; font-size: 13px; color: #e8dcc0; display: flex; flex-direction: column; gap: 2px; }
.stash { display: grid; grid-template-columns: auto auto; gap: 24px; justify-content: start; }
.stash .slot { width: 52px; height: 52px; } .stash .inv-grid { grid-template-columns: repeat(var(--cols), 52px); gap: 8px; }
body.touch .stash, body.short .stash { gap: 10px; } body.touch .stash .slot, body.short .stash .slot { width: 40px; height: 40px; padding: 3px; }
body.touch .stash .inv-grid, body.short .stash .inv-grid { grid-template-columns: repeat(var(--cols), 40px); gap: 5px; }

/* ---- A STALL: twelve slots, each its picture, its name, what it is, and its price as the press */
.ms-own { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ms-own .pt { width: 52px; height: 52px; display: block; background: radial-gradient(#6a5a2a, #2a2010); box-shadow: 0 0 0 2px #0d0907; }
.ms-own div { display: flex; flex-direction: column; } .ms-own b { font: 400 18px 'Lilita One', 'Lalezar'; color: #fff4cf; } .ms-own span { font-size: 13px; color: var(--dim); }
.ms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ms { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; background: rgba(0,0,0,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ms.empty { opacity: .55; } .ms .slot { cursor: default; }
.ms-t { display: flex; flex-direction: column; min-width: 0; } .ms-t b { font: 400 16px 'Lilita One', 'Lalezar'; } .ms-t span { font-size: 12px; color: var(--dim); } .ms-t em { display: inline-flex; align-items: center; gap: 4px; font: 400 15px 'Lilita One', 'Lalezar'; font-style: normal; color: #ffe08a; }
.ms-t em .pm { width: 18px; height: 18px; display: inline-block; } .ms-t em .pm svg { width: 100%; height: 100%; }
.ms-set { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* the phone cut (SIX AT ONCE): two wares to a line, each its picture, its name and line, its price press beside them */
body.touch .ms-grid, body.short .ms-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; } body.touch .ms, body.short .ms { grid-template-columns: 44px minmax(0, 1fr); } body.touch .ms .slot, body.short .ms .slot { width: 44px; height: 44px; padding: 4px; }
body.touch .ms, body.short .ms { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px; padding: 3px 6px; } body.touch .ms-t span, body.short .ms-t span { font-size: 11px; line-height: 1.25; } body.touch .ms-t b, body.short .ms-t b { font-size: 14px; }
body.touch .ms > .press, body.short .ms > .press { justify-self: end; min-height: 44px; padding: 2px 8px; font-size: 13px; } body.touch .ms-set, body.short .ms-set { grid-column: 1 / -1; justify-self: end; }

/* ---- THE RANKINGS, TOP TIER: the class tabs, the counts, the podium of three (the champion raised and crowned), rows that are presses */
.rk-tabs .ftab .ic { width: 22px; height: 22px; }
.rk-sum { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .rk-sum > div { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; background: rgba(0,0,0,.34); }
.rk-sum b { font: 400 22px 'Lilita One', 'Lalezar'; color: #fff4cf; } .rk-sum b.on { color: #7fe08a; } .rk-sum span { font-size: 13px; color: var(--dim); } .rk-sum p { margin: 0 0 0 auto; font-size: 13px; color: var(--dim); }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; margin: 6px 0 14px; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 0; cursor: pointer; color: inherit; text-align: center; }
.pod-w .pt { width: 112px; height: 112px; display: block; background: radial-gradient(#3e5c86, #1c2c45); box-shadow: 0 0 0 3px #0d0907; }
.pod.p1 .pod-w .pt { width: 128px; height: 128px; box-shadow: 0 0 0 3px #e2b44a, 0 0 26px rgba(255,210,90,.75); background: radial-gradient(#8a6a2a, #2a1c08); }
.pod.p2 .pod-w .pt { box-shadow: 0 0 0 3px #b9c2cc, 0 0 18px rgba(220,230,240,.5); } .pod.p3 .pod-w .pt { box-shadow: 0 0 0 3px #c8814a, 0 0 18px rgba(230,150,90,.5); }
.pod-crown { position: absolute; top: -10px; width: 46px; height: 46px; z-index: 2; animation: crownBob 2.4s ease-in-out infinite; } @keyframes crownBob { 50% { transform: translateY(-4px); } }
/* 0.7.9 (his "remove the number 1 text thing ... the crown is already enough indicator"): the podium wears its crown, gold / silver / bronze, and no number */
.pod.p2 .pod-crown, .pod.p3 .pod-crown { width: 38px; height: 38px; top: -6px; animation-delay: -.8s; } .pod.p3 .pod-crown { animation-delay: -1.6s; }
.pod .pod-w { margin-bottom: 4px; }
.pod b { position: relative; font: 400 20px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: var(--out); max-width: 100%; overflow-wrap: anywhere; }
.pod b .dot { position: relative; display: inline-block; right: auto; top: auto; margin-left: 6px; width: 11px; height: 11px; border-radius: 50%; background: #5fd06a; box-shadow: 0 0 0 2px #0d0907; vertical-align: middle; }
.pod-cls { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--dim); } .pod-cls .ic { width: 18px; height: 18px; }
.pod-lv { font: 400 15px 'Lilita One', 'Lalezar'; color: #e8dcc0; } .pod-lv b { font-size: 24px; color: #ffe08a; }
.pod-step { align-self: stretch; height: 34px; margin-top: 6px; background: linear-gradient(rgba(255,255,255,.18) 0 40%, rgba(255,255,255,.05) 40%), #6a5a46; box-shadow: 0 0 0 2px #0d0907; }
.pod.p1 .pod-step { height: 58px; background: linear-gradient(rgba(255,255,255,.22) 0 40%, rgba(255,255,255,.05) 40%), #b8862e; }
.pod.p2 .pod-step { height: 44px; background: linear-gradient(rgba(255,255,255,.22) 0 40%, rgba(255,255,255,.05) 40%), #8a96a2; }
.pod.p3 .pod-step { height: 30px; background: linear-gradient(rgba(255,255,255,.22) 0 40%, rgba(255,255,255,.05) 40%), #9a6038; }
.pod.me .pod-w .pt { outline: 3px solid #9fd6ff; outline-offset: 3px; }
.pod:hover .pod-w .pt, .rk:hover { filter: brightness(1.12); }
button.rk { width: 100%; color: inherit; text-align: left; cursor: pointer; grid-template-columns: 44px 52px minmax(0, 1fr) auto auto auto; }
.rk-tags { display: flex; flex-wrap: wrap; gap: 6px; } .rk-title { font: 400 13px 'Lilita One', 'Lalezar'; color: #ffcf6a; }
.rk-guild { padding: 0 6px; font: 400 12.5px/20px 'Lilita One', 'Lalezar'; color: var(--gi, #fff); background: var(--gc); box-shadow: 0 0 0 2px #0d0907; } .rk-t .rk-guild { color: var(--gi, #fff); } /* (0.13.1: inside a row the chip took the tags' dim ink through '.rk-t span': pale words on a gold banner) */
.rk-wed { display: inline-block; width: 20px; height: 20px; margin-left: 6px; vertical-align: -3px; }
.rk-cls { display: inline-flex; align-items: center; gap: 6px; font: 400 14px 'Lilita One', 'Lalezar'; color: var(--ci); min-width: 118px; } .rk-cls .ic { width: 22px; height: 22px; }
.rk-k { display: flex; flex-direction: column; align-items: flex-end; min-width: 62px; } .rk-k b { font: 400 18px 'Lilita One', 'Lalezar'; color: #e8dcc0; } .rk-k small { font-size: 11px; color: var(--dim); }
.rk-bar { display: block; width: 64px; height: 6px; margin-top: 2px; background: #1a2a33; box-shadow: 0 0 0 1px #0d0907; } .rk-bar i { display: block; height: 100%; background: var(--xp); }
body.touch .podium, body.short .podium { gap: 6px; margin: 0 0 8px; } body.touch .pod-w .pt, body.short .pod-w .pt { width: 64px; height: 64px; }
body.touch .pod.p1 .pod-w .pt, body.short .pod.p1 .pod-w .pt { width: 74px; height: 74px; } body.touch .pod b, body.short .pod b { font-size: 15px; }
body.touch .pod-step, body.short .pod-step { display: none; } body.touch .pod-crown, body.short .pod-crown { width: 30px; height: 30px; }
body.touch button.rk, body.short button.rk { grid-template-columns: 30px 40px minmax(0, 1fr) auto; } body.touch .rk-cls, body.short .rk-cls, body.touch .rk-k, body.short .rk-k { display: none; }
body.touch .rk-sum p, body.short .rk-sum p { display: none; }
/* the profile fits a 1440 x 810 window with no scroll: the right column tightened (measured 648 -> under the 593 the window gives) */
.prf-main { gap: 7px; } .prf-main h3 { margin: 2px 0 0; }
.prf-big > div { padding: 5px 6px; } .prf-big b { font-size: 26px; } .prf-lv b { font-size: 34px; }
.prf-card { padding: 6px 10px; } .prf-nums > div { padding: 4px 2px; } .prf-worlds { padding: 4px 10px; }
.prf-it { grid-template-columns: 48px minmax(0, 1fr); padding: 4px 8px; } .prf-it .slot { width: 48px; height: 48px; padding: 4px; }
.prf-itt b, .prf-itt span, .prf-itt em { line-height: 1.12; } /* 0.7.2: the name and its line stand centred in the row, off its top edge */
.prf-acts { padding-top: 2px; }
/* the podium keeps its places whoever stands on it: the champion in the middle, second on the left, third on the right */
.pod.p1, .gpod.p1 { grid-column: 2; grid-row: 1; } .pod.p2, .gpod.p2 { grid-column: 1; grid-row: 1; } .pod.p3, .gpod.p3 { grid-column: 3; grid-row: 1; }
/* SIX AT ONCE under the podium (1440 x 810): the podium compact, the rows a touch tighter */
.podium { margin: 0 0 8px; gap: 10px; } .pod { padding-top: 8px; gap: 2px; }
.pod-w .pt { width: 80px; height: 80px; } .pod.p1 .pod-w .pt { width: 96px; height: 96px; }
.pod-crown { width: 38px; height: 38px; top: -12px; }
.pod b { font-size: 18px; } .pod-lv b { font-size: 20px; }
.pod-step { height: 16px; margin-top: 4px; } .pod.p1 .pod-step { height: 30px; } .pod.p2 .pod-step { height: 22px; } .pod.p3 .pod-step { height: 12px; }
button.rk { gap: 10px; padding: 3px 12px 3px 4px; } button.rk .rk-w, button.rk .rk-w .pt { width: 44px; height: 44px; } button.rk .rk-n { font-size: 20px; }
.rk-list { gap: 4px; } .rk-sum { margin-bottom: 6px; }
.rk-body { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; align-items: start; }
.rk-podcol { position: sticky; top: 0; padding: 10px 6px 0; background: radial-gradient(90% 70% at 50% 40%, rgba(255,214,110,.16), rgba(0,0,0,.3)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.rk-podcol .podium { gap: 6px; } .rk-podcol .pod b { font-size: 16px; } .rk-podcol .pod-w .pt { width: 72px; height: 72px; } .rk-podcol .pod.p1 .pod-w .pt { width: 90px; height: 90px; }
.rk-rows { min-width: 0; }
/* the phone cut: the podium (and the counts under it) a narrow column, the rows two to a line beside it, so eight whole rows stand at once */
body.touch .rk-body, body.short .rk-body { grid-template-columns: 236px minmax(0, 1fr); gap: 8px; }
body.touch .rk-podcol, body.short .rk-podcol { position: sticky; top: 0; padding: 4px 2px 6px; }
body.touch .rk-podcol .podium, body.short .rk-podcol .podium { gap: 2px; margin: 0 0 6px; }
body.touch .rk-podcol .pod, body.short .rk-podcol .pod { padding: 6px 0 0; gap: 1px; min-width: 0; }
body.touch .rk-podcol .pod-w .pt, body.short .rk-podcol .pod-w .pt { width: 52px; height: 52px; } body.touch .rk-podcol .pod.p1 .pod-w .pt, body.short .rk-podcol .pod.p1 .pod-w .pt { width: 62px; height: 62px; }
body.touch .rk-podcol .pod b, body.short .rk-podcol .pod b { font-size: 13px; } body.touch .rk-podcol .pod-lv, body.short .rk-podcol .pod-lv { font-size: 12px; } body.touch .rk-podcol .pod-lv b, body.short .rk-podcol .pod-lv b { font-size: 16px; }
body.touch .rk-podcol .pod-cls, body.short .rk-podcol .pod-cls { font-size: 0; gap: 0; } /* 0.7.2: on the phone's narrow podium the class stands as its mark alone (the word ran out of its column) */
body.touch .rk-podcol, body.short .rk-podcol { padding: 8px 6px 6px; } body.touch .rk-podcol .pod b, body.short .rk-podcol .pod b { font-size: 14px; overflow-wrap: anywhere; }
body.touch .rk-podcol .pod-crown, body.short .rk-podcol .pod-crown { width: 24px; height: 24px; top: -6px; } body.touch .rk-podcol .rk-guild, body.short .rk-podcol .rk-guild { font-size: 10px; max-width: 100%; }
body.touch .rk-podcol .rk-sum, body.short .rk-podcol .rk-sum { flex-wrap: wrap; gap: 4px; margin: 0; } body.touch .rk-podcol .rk-sum > div, body.short .rk-podcol .rk-sum > div { padding: 2px 6px; }
/* 0.13.1 THE PODIUM'S CROWN AND FRAME (his 2026-10-11 "the crown shouldnt go down enough to cover the player face" / "also the highlighter border
   looks cheap" / "give it a better metalic glow or style" / "AND ANTI-AI DESIGN AND ANTI SLOP").
   THE CROWN stands ON the frame, never on the face: each place keeps room above its portrait for its whole crown (--cr), and the crown's
   foot meets the frame's top bar (2 px onto the metal, 0 onto the picture). Measured before: a 38 px crown hung 18 px down a 72 px portrait.
   THE FRAME is a made thing, where it was a 3 px line of flat colour with a wide halo: a moulding of its place's metal cut at the corners
   like a picture frame and lit from above (the top bar bright, the foot dark), one ink line outside it, a square stud on each corner, and
   the metal's light pooled under it instead of a glow all round. Gold, silver, bronze by place. A hero's own place is his NAME in the
   'you' ink, never a second line round the frame. -- DIALS: --fr (the moulding's width), --cr (the crown), the three metals' four tones */
.podium .pod { --cr: 38px; --fr: 5px; padding-top: calc(var(--cr) * 0.875 - 2px); } /* the crown's drawn foot is at 7/8 of its box: it rests 2 px onto the moulding */
.podium .pod.p2, .podium .pod.p3 { --cr: 32px; }
.podium .pod .pod-crown { width: var(--cr); height: var(--cr); top: 0; }
.podium .pod .pod-w { position: relative; display: block; border: var(--fr) solid; border-color: var(--m-hi) var(--m-lo) var(--m-dk) var(--m-md); box-shadow: 0 0 0 2px #0d0907, 0 10px 16px -8px var(--m-glow); }
.podium .pod .pod-w .pt { box-shadow: none; outline: none; }
.podium .pod .pod-w::after { content: ''; position: absolute; inset: calc(-1 * var(--fr) - 1px); pointer-events: none; --c: calc(var(--fr) + 4px);
  background: linear-gradient(var(--m-cap), var(--m-cap)) left 1px top 1px / var(--c) var(--c) no-repeat, linear-gradient(var(--m-cap), var(--m-cap)) right 1px top 1px / var(--c) var(--c) no-repeat,
    linear-gradient(var(--m-md), var(--m-md)) left 1px bottom 1px / var(--c) var(--c) no-repeat, linear-gradient(var(--m-md), var(--m-md)) right 1px bottom 1px / var(--c) var(--c) no-repeat,
    linear-gradient(#0d0907, #0d0907) left top / calc(var(--c) + 2px) calc(var(--c) + 2px) no-repeat, linear-gradient(#0d0907, #0d0907) right top / calc(var(--c) + 2px) calc(var(--c) + 2px) no-repeat,
    linear-gradient(#0d0907, #0d0907) left bottom / calc(var(--c) + 2px) calc(var(--c) + 2px) no-repeat, linear-gradient(#0d0907, #0d0907) right bottom / calc(var(--c) + 2px) calc(var(--c) + 2px) no-repeat; }
.podium .pod.p1 .pod-w { --m-hi: #ffe9a6; --m-md: #e2b44a; --m-lo: #b8862e; --m-dk: #7a5312; --m-cap: #fff3c4; --m-glow: rgba(255,196,70,.6); }
.podium .pod.p2 .pod-w { --m-hi: #f4f8fb; --m-md: #b9c2cc; --m-lo: #8a96a2; --m-dk: #4f5964; --m-cap: #ffffff; --m-glow: rgba(200,216,232,.42); }
.podium .pod.p3 .pod-w { --m-hi: #f2bd92; --m-md: #c8814a; --m-lo: #9a6038; --m-dk: #5e3418; --m-cap: #ffd3ad; --m-glow: rgba(226,140,80,.42); }
.podium .pod.me b { color: #9fd6ff; }
body.touch .rk-podcol .podium .pod, body.short .rk-podcol .podium .pod { --cr: 24px; --fr: 4px; padding: calc(var(--cr) * 0.875 - 2px) 0 0; }
body.touch .rk-podcol .podium .pod.p2, body.touch .rk-podcol .podium .pod.p3, body.short .rk-podcol .podium .pod.p2, body.short .rk-podcol .podium .pod.p3 { --cr: 22px; }
body.touch .rk-podcol .podium .pod .pod-crown, body.short .rk-podcol .podium .pod .pod-crown { width: var(--cr); height: var(--cr); top: 0; }
body.touch .rk-podcol .rk-sum b, body.short .rk-podcol .rk-sum b { font-size: 16px; } body.touch .rk-podcol .rk-sum span, body.short .rk-podcol .rk-sum span { font-size: 11px; }
body.touch .rk-list, body.short .rk-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
body.touch button.rk, body.short button.rk { grid-template-columns: 24px 36px minmax(0, 1fr) auto; gap: 6px; min-height: 44px; padding: 2px 6px 2px 2px; }
body.touch button.rk .rk-w, body.touch button.rk .rk-w .pt, body.short button.rk .rk-w, body.short button.rk .rk-w .pt { width: 36px; height: 36px; } body.touch button.rk .rk-n, body.short button.rk .rk-n { font-size: 15px; }
body.touch .rk-pin .rk-pl, body.short .rk-pin .rk-pl { display: none; } body.touch .rk-pin, body.short .rk-pin { margin-top: 4px; padding-top: 4px; }
/* 0.6 the forge's phone cut: the ores on one line beside their name, the pieces' heading said by the rows themselves (SIX AT ONCE: all five pieces stand) */
body.touch .forge-ores, body.short .forge-ores { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; } body.touch .forge-ores h3, body.short .forge-ores h3 { margin: 0; white-space: nowrap; }
body.touch .forge-ores .ores, body.short .forge-ores .ores { margin: 0; flex-wrap: nowrap; overflow-x: auto; } body.touch .forge-ores .ore, body.short .forge-ores .ore { padding: 2px 8px; }
body.touch .forge-wear, body.short .forge-wear { display: none; }
/* the seller's own stall on the phone: the price controls stand beside the picture under the name (his own piece needs no line of stats), six whole wares at once */
body.touch .ms:has(.ms-set), body.short .ms:has(.ms-set) { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; row-gap: 2px; }
body.touch .ms:has(.ms-set) > .slot, body.short .ms:has(.ms-set) > .slot { grid-row: 1 / 3; align-self: center; }
body.touch .ms:has(.ms-set) .ms-t span, body.short .ms:has(.ms-set) .ms-t span, body.touch .ms:has(.ms-set) .ms-t em, body.short .ms:has(.ms-set) .ms-t em { display: none; }
body.touch .ms:has(.ms-set) .ms-set, body.short .ms:has(.ms-set) .ms-set { grid-column: 2; justify-self: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 4px; }
body.touch .ms-set input, body.short .ms-set input { width: 84px; height: 44px; } body.touch .ms-set .press, body.short .ms-set .press { min-height: 44px; padding: 2px 8px; font-size: 13px; white-space: nowrap; }

/* 0.7.2 THE CLASS RANKS (his "IN BLUE COLOR OR SO" / "NICELY"): the rank in the guild sash's blue, lifted to read; square on every layer */
.hid-rank { font-family: 'Lilita One', 'Lalezar'; font-size: 22px; color: #7cc4ff; text-shadow: var(--out); line-height: 1; margin-top: 2px; }
.hid-rank + .hid-cls { font-size: 14px; color: #e8dcc0; margin-top: 0; }
.rk-ink { font-style: normal; font-family: 'Lilita One', 'Lalezar'; color: #7cc4ff; }
.rk-say { margin: 2px 0 8px; font-size: 13px; font-weight: 800; color: #dbe6f5; }
.rk-ladder { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.rk-rung { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; min-height: 52px;
  background: linear-gradient(180deg, rgba(20,34,56,.75), rgba(10,16,28,.85)); border: 1px solid #22344e; text-align: center; }
.rk-rung b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 15px; line-height: 1.05; color: #6f86a6; text-shadow: var(--out); }
.rk-rung span { font-size: 11px; font-weight: 800; color: #8d99aa; }
.rk-rung.won b { color: #7cc4ff; } .rk-rung.won span { color: #b8cde6; }
.rk-rung.now { background: linear-gradient(180deg, #2a5a92, #173a66); border-color: #7cc4ff; box-shadow: 0 0 0 1px #0a1424, 0 4px 14px rgba(60,140,230,.35); }
.rk-rung.now b { color: #ffffff; font-size: 17px; } .rk-rung.now span { color: #cfe6ff; }
body.touch .rk-ladder, body.short .rk-ladder { gap: 4px; } body.touch .rk-rung, body.short .rk-rung { min-height: 44px; padding: 5px 2px; }
body.touch .rk-rung b, body.short .rk-rung b { font-size: 12px; } body.touch .rk-rung span, body.short .rk-rung span { font-size: 10px; }
.lc-rank { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
.lc-rank small { font-size: .72em; font-weight: 800; color: #cfe6ff; letter-spacing: .02em; }
.lc-rank b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 1.35em; line-height: 1.05; color: #7cc4ff; text-shadow: var(--out); }

/* ================================================================== 0.7.1 THE MERCHANT WINDOW (Brann, Ilsa, a stall) AND THE FORGE (Doran)
   His "improve all of the NPCS PANELS LIKE THE ARMORER TAB LOOKS TERRIBLE RE-CONSTRUCT THE IN-GAME PANEL TO DISPLAY THINGS
   PROFESSIONALLY": two panes that fit the glass - the wares (or the pieces at the anvil) scroll on the left, the chosen piece stands in
   full on the right with its one primary press at its foot. Square on every layer, one edge per surface, no stripe on an edge, the price
   as the press in the gold's own hue. On a phone the merchant's full card opens as a sheet over the wares; the forge keeps both panes. */
.strip > .ic { width: 28px; height: 28px; flex: none; } /* an icon with no size in a strip drew at 300 x 300 px (the market desk wears strips too) */
#modal[data-kind="shop"] .p-scroll, #modal[data-kind="forge"] .p-scroll { display: flex; flex-direction: column; overflow: hidden; padding-right: 0; }
.mw, .fw { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; }
.fw { grid-template-columns: minmax(0, 1fr) 390px; }
.mw-main, .fw-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.mw-bar { display: flex; align-items: center; gap: 12px; flex: none; }
.mw-face { width: 52px; height: 52px; flex: none; overflow: hidden; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--pb, #6a4a2a) 60%, #f6e2c0) 0%, #1a120e 74%); box-shadow: 0 0 0 2px #0d0907; }
.mw-face .pt { width: 52px; height: 52px; display: block; }
.mw-bar .ftabs { margin: 0; }
.mw-note { margin: 0 0 0 auto; max-width: 290px; text-align: right; font-size: 13px; font-weight: 700; color: #ece0c6; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.mw-note b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; color: #ffd8a8; }
.mw-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 6px 4px 2px; display: flex; flex-direction: column; gap: 8px; touch-action: pan-y; }
.mw-list::-webkit-scrollbar, .wd-body::-webkit-scrollbar, .fw-list::-webkit-scrollbar { width: 8px; }
.mw-list::-webkit-scrollbar-thumb, .wd-body::-webkit-scrollbar-thumb, .fw-list::-webkit-scrollbar-thumb { background: #4a3a2e; }
.mw-list .foot { margin: 0 2px; }
.mw-row { display: flex; flex-direction: column; gap: 5px; }
.mw-band { --cb: #4a3c2c; --ci: #f0dfb8; display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 2px 10px 2px 2px; background: color-mix(in srgb, var(--cb) 62%, #120c09); box-shadow: 0 0 0 2px #0d0907; }
.mw-band.mine { box-shadow: 0 0 0 2px var(--ci); }
.mw-em { width: 28px; height: 28px; flex: none; padding: 3px; box-sizing: border-box; background: rgba(0,0,0,.34); }
.mw-em svg { width: 100%; height: 100%; display: block; }
.mw-bt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mw-bt b { font: 400 18px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4dc; text-shadow: var(--out); white-space: nowrap; }
.mw-bt span { font: 400 14px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--ci); text-shadow: var(--out); white-space: nowrap; }
.mw-band .cyou { margin-left: 0; padding: 2px 8px; font-size: 12.5px; }
.mw-why { margin-left: auto; font-size: 13px; font-weight: 700; color: #efe3c8; text-align: right; }
.wares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ware { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "p t" "g g"; gap: 7px 10px; align-items: start;
  padding: 7px; background: rgba(14,9,7,.86); box-shadow: 0 0 0 2px #2e231b; cursor: pointer; }
.ware:hover { background: rgba(34,24,18,.92); }
.ware.sel { background: rgba(46,34,24,.95); box-shadow: 0 0 0 2px #fff4cf; }
.ware:focus-visible { outline: 2px solid #ffe08a; outline-offset: 2px; }
.ware.mat, .ware:not([data-wsel]) { cursor: default; }
.ware.no .wpic .slot { filter: saturate(.45) brightness(.78); }
.wpic { grid-area: p; }
.wpic .slot { width: 64px; height: 64px; padding: 6px; cursor: inherit; }
.wpic .slot:not(.empty):hover { filter: none; }
.wtx { grid-area: t; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wtx b { font: 400 16px/1.1 'Lilita One', 'Lalezar', system-ui, sans-serif; text-shadow: 0 1px 0 #000, 0 0 2px #000; overflow-wrap: anywhere; }
.wtx em { font-style: normal; font-size: 12.5px; line-height: 1.25; font-weight: 800; color: #d8ccb2; }
.wst { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 1px 0; }
.wv { display: inline-flex; align-items: center; gap: 4px; }
.wv .ic { width: 17px; height: 17px; display: inline-block; flex: none; }
.wv b { font: 400 16px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4dc; text-shadow: 0 1px 0 #000; }
.wv em { font: 400 13px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; font-style: normal; }
.wv em.up, .wnote.up { color: #6fe08a; } .wv em.down, .wnote.down { color: #ff8a7a; }
.wnote { font-size: 12.5px; line-height: 1.25; font-weight: 800; color: #d8ccb2; } .wnote.cls { color: #9fd6ff; }
.wbon { font-size: 12px; font-weight: 800; color: #9fe0ff; }
.wgo { grid-area: g; display: flex; }
.wgo .press { flex: 1 1 auto; min-height: 40px; font-size: 18px; }
.press.wbuy { --h: #c9952c; --hd: #4a3008; }
.press.wbuy .pm { width: 1.35em; height: 1.35em; }
.press.wbuy .len { color: #fff4dc; font-size: 12px; }
/* the chosen piece in full */
.mw-det, .fw-det { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: rgba(14,9,7,.9); box-shadow: 0 0 0 2px #2e231b; }
.wd { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.wd-back { display: none; }
.wd-head { display: flex; gap: 12px; align-items: center; flex: none; }
.wd-head .slot.big { width: 84px; height: 84px; padding: 7px; flex: none; cursor: default; }
.wd-head .ic-name { min-width: 0; }
.wd-head .ic-name b { font-size: 22px; line-height: 1.05; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
.wd-head .ic-name .wd-who { font-size: 13px; font-weight: 700; color: #e9dcc0; }
.wd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.wd-body .cmp { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.3; }
.wd-body .ic-lines { margin: 0; }
.wd-body .ic-worn { margin-top: 2px; }
/* the chosen piece is the poster: its picture big in a well lit in its rung's colour, its name and rung under it */
.wd-head.poster { flex-direction: column; gap: 8px; padding: 14px 8px 10px; text-align: center; background: radial-gradient(circle at 50% 38%, var(--tw, rgba(255,255,255,.07)), rgba(0,0,0,0) 62%), rgba(255,255,255,.035); }
.wd-head.poster.t1 { --tw: rgba(70,224,112,.2); } .wd-head.poster.t2 { --tw: rgba(74,163,255,.26); } .wd-head.poster.t3 { --tw: rgba(189,123,255,.32); } .wd-head.poster.t4 { --tw: rgba(255,154,46,.36); }
.wd-head.poster .slot.big { width: 116px; height: 116px; padding: 10px; }
.wd-head.poster .ic-name { align-items: center; }
/* THE BORDER LADDER (the top tier art rule, 2026-10-06): every rung wears corner caps on its rim and the metal climbs - iron, bronze,
   silver here; Epic and Legendary keep the gold caps the rarity frames already give them. ON the rim, nothing inside it (T43). */
:is(.wpic, .wd-head, .fsl) .slot:is(.t0, .t1, .t2)::before { content: ''; position: absolute; inset: -3px; pointer-events: none; --cap: #8f8a80;
  background: linear-gradient(var(--cap), var(--cap)) left top / 10px 3px no-repeat, linear-gradient(var(--cap), var(--cap)) left top / 3px 10px no-repeat,
    linear-gradient(var(--cap), var(--cap)) right top / 10px 3px no-repeat, linear-gradient(var(--cap), var(--cap)) right top / 3px 10px no-repeat,
    linear-gradient(var(--cap), var(--cap)) left bottom / 10px 3px no-repeat, linear-gradient(var(--cap), var(--cap)) left bottom / 3px 10px no-repeat,
    linear-gradient(var(--cap), var(--cap)) right bottom / 10px 3px no-repeat, linear-gradient(var(--cap), var(--cap)) right bottom / 3px 10px no-repeat; }
:is(.wpic, .wd-head, .fsl) .slot.t1::before { --cap: #c48a4c; } :is(.wpic, .wd-head, .fsl) .slot.t2::before { --cap: #e4ebf2; }
.wd-foot { display: flex; flex-direction: column; gap: 8px; flex: none; }
.wd-cost { display: flex; align-items: center; gap: 6px; }
.wd-cap { margin-right: 4px; font: 400 14px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--dim); text-transform: uppercase; letter-spacing: .8px; }
.wd-cost .ic { width: 26px; height: 26px; }
.wd-cost b { font: 400 26px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffe08a; text-shadow: var(--out); }
.wd-cost b.down { color: #ff8a7a; }
.wd-cost span:last-child { font: 400 15px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #f1e3c4; }
.wd-go { width: 100%; font-size: 20px; }
.wd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; } /* 0.15 his "button looks like its escaping": two presses of one size INSIDE the card (as flex items each kept its words' own width, 2 x 170 px in a 330 px card) */
.wd-two .press { width: auto; min-width: 0; padding-inline: 8px; white-space: nowrap; font-size: 18px; gap: 5px; }
/* the forge: the pieces he wears on the left, the anvil's table on the right */
.fw-top { display: flex; align-items: center; gap: 14px; flex: none; }
.fw-top .npc-face { position: static; width: 84px; height: 84px; padding: 3px; flex: none; }
.fw-top .npc-face img { width: 78px; height: 78px; }
.fw-top .forge-ores { min-width: 0; } .fw-top .forge-ores h3 { margin: 0 0 6px; }
.fw-main > h3 { margin: 2px 0 0; }
.fw-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px 6px 2px 2px; }
.fsl { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 12px 6px 6px; background: rgba(14,9,7,.86); box-shadow: 0 0 0 2px #2e231b; cursor: pointer; }
.fsl:hover { background: rgba(34,24,18,.92); } .fsl.sel { background: rgba(46,34,24,.95); box-shadow: 0 0 0 2px #fff4cf; }
.fsl:focus-visible { outline: 2px solid #ffe08a; outline-offset: 2px; }
.fsl .slot { width: 56px; height: 56px; padding: 5px; cursor: inherit; }
.fsl-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fsl-s { font: 400 12.5px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.fsl-t b { font: 400 18px/1.1 'Lilita One', 'Lalezar', system-ui, sans-serif; text-shadow: 0 1px 0 #000; }
.fsl-st { font: 400 15px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #c9bca4; text-align: right; }
.fsl-st.up { color: #6fe08a; } .fsl-st.down { color: #ff8a7a; }
.fsl-st.max { padding: 3px 10px; color: #3a2408; background: linear-gradient(#ffe9a0, #e2b44a); box-shadow: 0 0 0 2px #0d0907; }
.fsl.none .slot { opacity: .7; }
.fnx { display: grid; gap: 4px; }
.fnx-r { display: grid; grid-template-columns: minmax(0, 1fr) 56px 68px 44px; gap: 8px; align-items: center; padding: 5px 10px; background: rgba(255,255,255,.06); }
.fnx-h { padding: 0 10px; background: none; font: 400 13px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.fnx-h span { text-align: right; }
.fnx-w { display: flex; align-items: center; gap: 8px; font: 800 15px Nunito, 'Cairo', system-ui, sans-serif; color: #efe3c8; } .fnx-w .ic { width: 20px; height: 20px; flex: none; }
.fnx-r b { font: 400 20px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-align: right; } .fnx-r b.nx { color: #9ff0b0; }
.fnx-r em { font: 400 17px 'Lilita One', 'Lalezar', system-ui, sans-serif; font-style: normal; color: #6fe08a; text-align: right; }
.fcost { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fp { display: inline-flex; align-items: center; gap: 6px; } .fp .ic { width: 26px; height: 26px; flex: none; }
.fp b { font: 400 22px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffe08a; text-shadow: var(--out); } .fp.down b { color: #ff8a7a; }
.fp span { font: 400 14px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #f1e3c4; }
.frf { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; background: rgba(255,255,255,.05); flex: none; }
.frf-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frf-t b { font: 400 17px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #f0d9a8; } .frf-t > span { font-size: 13px; font-weight: 700; color: var(--dim); }
.frf .ic-lines { margin: 2px 0 0; font-size: 13px; line-height: 1.35; }
.frf .press { flex: none; min-height: 44px; font-size: 16px; }
.fw-det .wd-foot .maxtag { align-self: center; }
.fw-det .wd-head .pips { margin-top: 3px; }
/* the stall a buyer looks at: the merchant's tiles */
#modal[data-kind="stall"] .wares { margin-top: 4px; }
/* phone and short glass */
body.touch .mw, body.short .mw { grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; }
body.touch .mw-det, body.short .mw-det { display: none; }
body.touch .mw.sheet .mw-det, body.short .mw.sheet .mw-det { display: flex; position: absolute; right: 0; top: 0; bottom: 0; width: min(430px, 64%); z-index: 4; background: rgba(16,11,8,.98); box-shadow: 0 0 0 2px #0d0907, -16px 0 28px rgba(0,0,0,.6); }
body.touch .wd-back, body.short .wd-back { display: inline-flex; align-self: flex-start; flex: none; min-height: 44px; }
body.touch .wd, body.short .wd { padding: 8px 10px; gap: 6px; }
body.touch .wd-head .slot.big, body.short .wd-head .slot.big { width: 56px; height: 56px; padding: 5px; }
body.touch .wd-head .ic-name b, body.short .wd-head .ic-name b { font-size: 17px; }
body.touch .wd-head .ic-name span, body.short .wd-head .ic-name span { font-size: 12px; }
body.touch .wd-body .cmp, body.short .wd-body .cmp { font-size: 12.5px; }
body.touch .wd-cost .ic, body.short .wd-cost .ic { width: 20px; height: 20px; } body.touch .wd-cost b, body.short .wd-cost b { font-size: 20px; }
body.touch .wd-go, body.short .wd-go { min-height: 44px; font-size: 16px; padding: 0 12px 3px; }
body.touch .wd-two .press, body.short .wd-two .press { min-height: 44px; font-size: 16px; }
body.touch .mw-bar, body.short .mw-bar { gap: 8px; }
body.touch .mw-face, body.short .mw-face, body.touch .mw-face .pt, body.short .mw-face .pt { width: 44px; height: 44px; }
body.touch .mw-note, body.short .mw-note { display: none; }
body.touch .mw-list, body.short .mw-list { gap: 6px; padding-right: 4px; }
body.touch .mw-row, body.short .mw-row { flex-direction: row; align-items: stretch; gap: 6px; }
body.touch .mw-band, body.short .mw-band { flex: 0 0 84px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 0; padding: 6px; } /* 0.7.2: 6 px inside, every side */
body.touch .mw-bt, body.short .mw-bt { flex-direction: column; align-items: flex-start; gap: 2px; }
body.touch .mw-bt b, body.short .mw-bt b { font-size: 14px; } body.touch .mw-bt span, body.short .mw-bt span { font-size: 11.5px; }
body.touch .mw-em, body.short .mw-em { width: 22px; height: 22px; padding: 2px; }
body.touch .mw-band .cyou, body.short .mw-band .cyou { font-size: 10.5px; padding: 1px 6px; }
body.touch .mw-why, body.short .mw-why { display: none; }
body.touch .mw-row > .wares, body.short .mw-row > .wares, body.touch .mw-row > .empty, body.short .mw-row > .empty { flex: 1 1 auto; min-width: 0; }
body.touch .wares, body.short .wares { gap: 6px; }
body.touch .ware, body.short .ware { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "p t g"; align-items: center; gap: 6px; padding: 7px 6px; } /* 0.7.2: the name, its note and the price press 6 px inside the card */
body.touch .wpic .slot, body.short .wpic .slot { width: 44px; height: 44px; padding: 4px; }
body.touch .wtx, body.short .wtx { gap: 1px; }
body.touch .wtx b, body.short .wtx b { font-size: 13.5px; } body.touch .wtx > em, body.short .wtx > em { display: none; }
body.touch .wv b, body.short .wv b { font-size: 13.5px; } body.touch .wv .ic, body.short .wv .ic { width: 14px; height: 14px; } body.touch .wv em, body.short .wv em { font-size: 11.5px; }
body.touch .wst, body.short .wst { gap: 1px 8px; margin: 0; }
body.touch .wnote, body.short .wnote { font-size: 10.5px; } body.touch .wbon, body.short .wbon { display: none; }
body.touch .wgo .press, body.short .wgo .press { min-height: 44px; min-width: 60px; padding: 0 7px 3px; font-size: 14px; }
body.touch .wgo .press.two .len, body.short .wgo .press.two .len { font-size: 10px; }
body.touch .ware.mat .wtx > em, body.short .ware.mat .wtx > em { display: block; font-size: 10.5px; }
body.touch .fw, body.short .fw { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px; }
body.touch .fw-top, body.short .fw-top, body.touch .fw-main > h3, body.short .fw-main > h3, body.touch .fw-main > .foot, body.short .fw-main > .foot { display: none; }
body.touch .fw-list, body.short .fw-list { gap: 5px; }
body.touch .fsl, body.short .fsl { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 3px 8px 3px 3px; }
body.touch .fsl .slot, body.short .fsl .slot { width: 44px; height: 44px; padding: 4px; }
body.touch .fsl-s, body.short .fsl-s { display: none; } body.touch .fsl-t b, body.short .fsl-t b { font-size: 14px; }
body.touch .fsl-st, body.short .fsl-st { font-size: 12px; max-width: 110px; } body.touch .fsl .pips i, body.short .fsl .pips i { width: 10px; height: 6px; }
body.touch .fnx-r, body.short .fnx-r { grid-template-columns: minmax(0, 1fr) 40px 52px 36px; padding: 3px 8px; }
body.touch .fnx-w, body.short .fnx-w { font-size: 13px; } body.touch .fnx-w .ic, body.short .fnx-w .ic { width: 16px; height: 16px; }
body.touch .fnx-r b, body.short .fnx-r b { font-size: 16px; } body.touch .fnx-r em, body.short .fnx-r em { font-size: 14px; }
body.touch .fp .ic, body.short .fp .ic { width: 20px; height: 20px; } body.touch .fp b, body.short .fp b { font-size: 17px; } body.touch .fp span, body.short .fp span { font-size: 12px; }
body.touch .fnote, body.short .fnote { display: none; }
body.touch .frf, body.short .frf { padding: 4px 8px; } body.touch .frf .ic-lines, body.short .frf .ic-lines { display: none; }
body.touch .frf .press, body.short .frf .press { font-size: 13px; padding: 0 8px 3px; }
body.touch .wd-head.poster, body.short .wd-head.poster { flex-direction: row; gap: 10px; padding: 8px 6px; text-align: left; }
body.touch .wd-head.poster .slot.big, body.short .wd-head.poster .slot.big { width: 56px; height: 56px; padding: 5px; }
body.touch .wd-head.poster .ic-name, body.short .wd-head.poster .ic-name { align-items: flex-start; }
.press.wbuy.no { filter: saturate(.35) brightness(.72); } .press.wbuy.no:hover { filter: saturate(.35) brightness(.82); } /* not disabled: pressed, it says why */
body.touch .mw .wgo .press.two .len, body.short .mw .wgo .press.two .len { display: none; } /* the phone tile: the price alone; the reason is spoken when pressed and stands on the full card */
body.touch .mw .wnote:not(.cls), body.short .mw .wnote:not(.cls) { display: none; } /* the up mark on the picture says better; the full card says the rest */
body.touch .mw .wgo .press, body.short .mw .wgo .press { min-width: 56px; font-size: 13.5px; padding: 0 6px 3px; }
body.touch .fgoal, body.short .fgoal, body.touch .frf.common, body.short .frf.common { display: none; } /* the phone keeps the decision: the next step, its cost, its press */

/* 0.7.2 THE ACT BAR FITS ANY DESKTOP WINDOW: a mouse window narrower than the bar (844 x 390 ran it 30 px off the right edge) sizes its
   seven slots to the room right of the health blade, one unit clear of the edge, never under the 44 px floor and never over its own size */
body:not(.touch) { --act: clamp(44px, calc((100vw - var(--u) * 3 - var(--blade) - var(--atk) - 144px) / 7), 60px); }
body.short:not(.touch) { --act: clamp(44px, calc((100vw - var(--u) * 3 - var(--blade) - var(--atk) - 144px) / 7), 54px); }
@media (max-width: 1100px) { body:not(.touch) .act .ic { left: 23%; top: 5%; width: 54%; height: 54%; } body:not(.touch) .act .lock { font-size: 10px; } } /* 0.7.2: a narrower slot keeps its picture above its name and "Level 12" off its sides */
body.short #xp .xl { font-size: calc(var(--xph) + 3px); } body.short #chat-open { height: 44px; } /* 0.7.2: a short desktop window keeps the phone's level figure off the glass foot and its 44 px chat press */
/* 0.7.2 the sweep at 966 x 914 (a size between the two cuts): a tab whose caption wraps grows with it, a class band's line and a ranking
   figure keep 6 px of their frame on every side */
.ftab { flex-wrap: wrap; row-gap: 0; padding-top: 6px; padding-bottom: 7px; } .ftab small { line-height: 1.1; }
.mw-band { padding-top: 7px; padding-bottom: 7px; } .mw-band .mw-why { line-height: 1.2; }
.rk-sum > div { padding-top: 7px; padding-bottom: 7px; }
body.touch .act.sk .nm { white-space: normal; left: 6px; right: 6px; bottom: 6px; font-size: 9.5px; line-height: 1; letter-spacing: -0.2px; } body.touch .act.sk .ic { left: 28%; top: 4%; width: 44%; height: 44%; } /* 0.7.2: a two-word skill name takes two lines under a smaller picture in the 54 px phone slot, 6 px off its sides ("Second Wind" spilled 5 px on one line) */
body.touch .sc .nm, body.short .sc .nm, body.touch .sc .fig, body.short .sc .fig, body.touch .sc .ln, body.short .sc .ln { grid-column: 2; } /* 0.7.2: a gem card's third line was auto-placed into the 48 px picture column ("doubled:" spilled); every line of a card stands in its text column */
.prf-nums > div { padding-bottom: 8px; } /* 0.7.2: "Attack" / "Defence" 6 px off the foot of their cell, the room the sweep asks */
/* 0.7.2 THE SKILL NAME, EVERY SLOT: a two-word name takes two lines, 6 px off the slot's sides and foot, under a picture sized to leave it
   room ("Second Wind" ran 1 px off a 60 px PC slot's sides on one line) */
body .act.sk .nm { white-space: normal; left: 6px; right: 6px; bottom: 6px; line-height: 1; }
body .act.sk .ic { left: 28%; top: 4%; width: 44%; height: 44%; }
@media (max-width: 1100px) { body:not(.touch) .act.sk .nm { font-size: 9.5px; letter-spacing: -0.2px; } body:not(.touch) .act.sk .ic { left: 30%; width: 40%; height: 40%; } }
body.short .press.small, body.short .pa-acts .press { min-height: 44px; } /* 0.7.2: a short window holds the same 44 px presses as the phone (they were 36) */
body.short .rk { padding-top: 7px; padding-bottom: 7px; } /* 0.7.2: a ranking row's level 6 px off its top on a short window */

body.touch .mine .cnt, body.short .mine .cnt { right: -2px; bottom: -4px; font-size: 14px; }
/* ================================================================== 0.7.6 THE TRADE (his order 2026-10-07: "MAKE IT SIMILAR TO HOW IT
   WORKS IN THE GENRE"). One window: his bag | what he offers | what the other offers | the card of the piece he looks at, on the market's
   ground in the trade's own teal; an accepted half lights teal, a change says so in amber. One tile size a cut (--ts): the PC cut, the
   narrow PC cut and the phone cut, each beside its sibling. */
#modal[data-kind="trade"] { --pbg: url('/art/panel_market.webp'); --pb: #2e7a68; --pbd: #0e2e28; }
#modal[data-kind="trade"] .panel { width: min(1120px, calc(100vw - 24px)); height: min(700px, calc(100dvh - 24px)); }
#modal[data-kind="trade"] .p-scroll { flex: 1 1 auto; min-height: 0; padding-right: 0; display: flex; flex-direction: column; }
.trd { --ts: 56px; --tg: 8px; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "bag me them card" "bag acts acts card" "bag . . card"; gap: 12px 14px; align-items: start; }
.trd .slot { width: var(--ts); height: var(--ts); position: relative; }
.trd h4 { margin: 0; font: 400 16px 'Lilita One', 'Lalezar', system-ui, sans-serif; letter-spacing: .3px; color: #f0d9a8; text-shadow: var(--out); }
.trd-bag { grid-area: bag; align-self: stretch; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 10px; background: rgba(0,0,0,.3); }
.trd-bag .inv-foot { min-height: 0; margin: 0; }
.trd-bag .inv-grid { --cols: 5; display: grid; grid-template-columns: repeat(var(--cols), var(--ts)); grid-auto-rows: var(--ts); gap: var(--tg); padding: 6px 6px 6px 3px; overflow-y: auto; min-height: 0; align-content: start; justify-content: start; }
.trd-keep { margin: auto 0 0; max-width: calc(var(--ts) * 5 + var(--tg) * 4); font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: var(--dim); }
.trd-half { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: rgba(0,0,0,.34); }
.trd-half.me { grid-area: me; } .trd-half.them { grid-area: them; }
.trd-half.ok { box-shadow: inset 0 0 0 2px #7fe0c8; background: rgba(16,58,50,.55); }
.trd-half.hot { box-shadow: inset 0 0 0 2px #ffe08a; }
.trd-head { display: flex; flex-direction: column; gap: 2px; min-height: 42px; max-width: calc(var(--ts) * 3 + var(--tg) * 2); }
.trd-head b { font: 400 18px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #f0d9a8; text-shadow: var(--out); white-space: nowrap; }
.trd-head > span { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: var(--dim); } .trd-head > span.on { color: #7fe0c8; }
.trd-who { display: flex; align-items: center; gap: 8px; min-width: 0; } .trd-who b { flex: 1 1 auto; min-width: 0; overflow: hidden; } .trd-who .pt { width: 28px; height: 28px; flex: none; box-shadow: 0 0 0 2px #0d0907; }
.trd-grid { display: grid; grid-template-columns: repeat(3, var(--ts)); grid-auto-rows: var(--ts); gap: var(--tg); }
.trd-gold { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; background: rgba(0,0,0,.32); color: inherit; font: inherit; text-align: left; }
button.trd-gold { cursor: pointer; } .trd-gold.sel { box-shadow: inset 0 0 0 2px #ffe08a; }
.trd-gold .ic { width: 22px; height: 22px; flex: none; } .trd-gold .ic svg { width: 100%; height: 100%; display: block; }
.trd-gold .add { font: 800 14px Nunito, 'Cairo', system-ui, sans-serif; color: #ffe08a; } .trd-gold b { font: 400 20px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffe08a; } .trd-gold span { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: var(--dim); }
.trd-acts { grid-area: acts; display: flex; flex-direction: column; gap: 8px; }
.trd-line { font: 800 14px Nunito, 'Cairo', system-ui, sans-serif; color: #e8dcc0; } .trd-line.warn { color: #ffd27a; }
.trd-press { display: flex; gap: 10px; } .trd-press .press { flex: 1 1 0; }
.trd .inv-card { align-self: stretch; overflow-y: auto; }
.trd-amt { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.trd-amt p { margin: 0; font: 800 14px Nunito, 'Cairo', system-ui, sans-serif; color: #e8dcc0; } .trd-amt p b { color: #ffe08a; }
.trd-amt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .trd-amt-row .press.primary { flex: 1 1 auto; }
#tr-amt { width: 120px; height: 44px; padding: 0 10px; border: 0; background: #0d0907; color: #ffe08a; font: 400 18px 'Lilita One', 'Lalezar', system-ui, sans-serif; box-shadow: inset 0 0 0 2px #4a3a2e; }
#tr-amt.bad { color: #ff8a7a; box-shadow: inset 0 0 0 2px #a8362c; }
.trd .slot[data-on="1"] > svg:first-child { opacity: .42; }
.trd .slot[data-on="1"]::after { content: 'Offered'; position: absolute; left: 0; right: 0; bottom: 0; font: 800 10px/14px Nunito, 'Cairo', system-ui, sans-serif; color: #7fe0c8; background: rgba(0,0,0,.72); text-align: center; pointer-events: none; }
.trd .slot .tin { position: absolute; left: 2px; top: 2px; padding: 0 3px; font: 800 11px/14px Nunito, 'Cairo', system-ui, sans-serif; font-style: normal; color: #0d0907; background: #7fe0c8; pointer-events: none; z-index: 2; }
@media (max-width: 1180px) { .trd { --ts: 50px; gap: 10px; } .trd-bag .inv-grid { --cols: 4; } .trd-keep { max-width: calc(var(--ts) * 4 + var(--tg) * 3); } }
body.touch .trd, body.short .trd { --ts: 44px; --tg: 6px; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "bag me them card" "bag me them acts"; gap: 6px 8px; }
body.touch .trd-bag, body.short .trd-bag { padding: 6px; gap: 4px; } body.touch .trd-bag .inv-grid, body.short .trd-bag .inv-grid { --cols: 4; padding: 4px 4px 4px 2px; }
body.touch .trd-bag .inv-foot, body.short .trd-bag .inv-foot { display: none; }
body.touch .trd-keep, body.short .trd-keep { max-width: calc(var(--ts) * 4 + var(--tg) * 3); font-size: 11px; }
body.touch .trd-half, body.short .trd-half { padding: 6px 8px; gap: 4px; align-self: stretch; }
body.touch .trd-head, body.short .trd-head { min-height: 34px; gap: 0; } body.touch .trd-head b, body.short .trd-head b { font-size: 14px; } body.touch .trd-head > span, body.short .trd-head > span { font-size: 11px; }
body.touch .trd-who, body.short .trd-who { gap: 6px; } body.touch .trd-who .pt, body.short .trd-who .pt { width: 22px; height: 22px; }
body.touch .trd-gold, body.short .trd-gold { padding: 0 8px; } body.touch .trd-gold b, body.short .trd-gold b { font-size: 17px; }
body.touch .trd-acts, body.short .trd-acts { gap: 4px; } body.touch .trd-line, body.short .trd-line { font-size: 12px; }
body.touch .trd-press, body.short .trd-press { gap: 6px; }
body.touch #tr-amt, body.short #tr-amt { width: 90px; }
.trd-amt .nm { display: none; color: #f0d9a8; }
body.touch .trd .inv-card:has(.trd-amt) .ic-body, body.short .trd .inv-card:has(.trd-amt) .ic-body, body.touch .trd .inv-card:has(.trd-amt) .ic-head, body.short .trd .inv-card:has(.trd-amt) .ic-head { display: none; } body.touch .trd-amt .nm, body.short .trd-amt .nm { display: inline; } /* 0.7.6: on the short glass the chooser keeps its card whole above the presses */
body.touch .trd-amt, body.short .trd-amt { gap: 6px; } body.touch .trd-amt p, body.short .trd-amt p { font-size: 12.5px; } body.touch .trd-amt-row, body.short .trd-amt-row { gap: 6px; }
/* the request card and the swap's moment (the duel's grammar in the trade's teal) */
#trask { position: fixed; top: calc(196px + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-ask); display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  width: min(600px, calc(100vw - 24px)); padding: 10px 12px; background: rgba(12,36,32,.95); box-shadow: 0 0 0 2px #0d0907; animation: gpIn .3s ease-out both; }
#trask[hidden], #tres[hidden] { display: none; }
#trask .pt { width: 52px; height: 52px; background: radial-gradient(#2e7a68, #0e2e28); box-shadow: 0 0 0 2px #0d0907; }
#trask .pa-t b { color: #7fe0c8; } #trask .pa-clock i { background: #7fe0c8; }
body.touch #trask { grid-template-columns: 40px 1fr; top: calc(150px + var(--st)); } body.touch #trask .pt { width: 40px; height: 40px; } body.touch #trask .pa-acts { grid-column: 1 / -1; justify-content: flex-end; }
#tres { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); z-index: var(--z-moment); display: flex; flex-direction: column; align-items: center; gap: 8px; box-sizing: border-box;
  width: min(520px, calc(100vw - 24px)); padding: 16px 24px 14px; text-align: center; background: rgba(12,30,28,.96); box-shadow: 0 0 0 2px #0d0907; animation: gpIn .3s ease-out both; cursor: pointer; }
#tres > b { font: 400 34px/1.05 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #7fe0c8; text-shadow: var(--out); } #tres > span { font-size: 15px; color: #fff4cf; }
.tr-sum { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; } .tr-sum small { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: var(--dim); }
.tr-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .tr-row .slot { width: 44px; height: 44px; padding: 4px; position: relative; cursor: default; } .tr-row em { font-size: 13px; color: var(--dim); }
.tr-gold { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 44px; background: rgba(0,0,0,.3); } .tr-gold .ic { width: 22px; height: 22px; } .tr-gold .ic svg { width: 100%; height: 100%; display: block; }
.tr-gold b { font: 400 18px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffe08a; } .tr-gold span { font-size: 13px; color: var(--dim); }
body.touch #tres { top: 14%; } body.touch #tres > b { font-size: 28px; }
/* 0.9.1 THE TRADE CARD (his "IMPROVE THE TRADE COMPLETE POP UP"): the moment's framed plate with its gold corner caps, the exchange drawn
   between the two sides, the received side lit in green, each piece popping in after the one before */
#tres { width: min(560px, calc(100vw - 24px)); gap: 10px; padding: 14px 18px 16px; background: radial-gradient(110% 70% at 50% 0%, rgba(127,224,200,.14), rgba(127,224,200,0) 60%), linear-gradient(#1c2e2a, #101c1a 70%);
  box-shadow: inset 0 0 0 3px #3f7a68, 0 16px 40px rgba(0,0,0,.6); }
#tres::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(#e2b44a, #e2b44a) left top / 16px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) left top / 3px 16px no-repeat,
    linear-gradient(#e2b44a, #e2b44a) right top / 16px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) right top / 3px 16px no-repeat,
    linear-gradient(#e2b44a, #e2b44a) left bottom / 16px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) left bottom / 3px 16px no-repeat,
    linear-gradient(#e2b44a, #e2b44a) right bottom / 16px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) right bottom / 3px 16px no-repeat; }
.tr-head { display: flex; align-items: center; gap: 10px; }
.tr-ic { width: 38px; height: 38px; flex: none; } .tr-ic svg, .tr-swap svg { width: 100%; height: 100%; display: block; }
.tr-ht { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.tr-ht b { font: 400 28px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #7fe0c8; text-shadow: var(--out); } .tr-ht span { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: #fff4cf; }
.tr-cols { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; }
.tr-side { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 10px; min-height: 84px; }
.tr-side.got { background: rgba(70,200,120,.16); } .tr-side.gave { background: rgba(0,0,0,.25); }
.tr-side small { font: 800 12px Nunito, 'Cairo', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; } .tr-side.got small { color: #9ff0b8; } .tr-side.gave small { color: var(--dim); }
.tr-side.gave .tr-row { opacity: .82; }
.tr-swap { width: 30px; height: 30px; opacity: .9; }
#tres.in .tr-swap { animation: trSwap .6s .1s ease-out both; }
#tres.in .tr-row > * { animation: trPop .32s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes trPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes trSwap { from { transform: rotate(-180deg) scale(.6); opacity: 0; } to { transform: none; opacity: .9; } }
body.touch .tr-cols { grid-template-columns: 1fr; } body.touch .tr-swap { transform: rotate(90deg); justify-self: center; } body.touch #tres.in .tr-swap { animation: none; }
@media (prefers-reduced-motion: reduce) { #tres.in .tr-row > *, #tres.in .tr-swap { animation: none; } }
@media (prefers-reduced-motion: reduce) { #trask, #tres { animation: none; } }

/* 0.7.9 THE STATS (main.js statsHtml / the act bar's Stats press; his "THINK OF THE GENRE" / "LEVEL UP SYSTEM" / "AND ADD IT TO THE PLAYER'S HUD"):
   the Stats press stands beside the Skills book, the same 48 px book press with its red badge of points waiting; in the Hero window one card a
   stat: its forged picture in a slot, how many he has big in the stat's own ink, what it gives his class now, what a point gives each class, the + press */
#acts { left: max(50%, calc(var(--u) * 2 + var(--blade) + (var(--act) * 7 + var(--atk) + 96px + 108px) / 2)); } /* + the Stats press (48) and its 12 px gap */
.act.stbook { width: 48px; height: 48px; }
.act.stbook .nm { font-size: 9.5px; bottom: 6px; } .act.stbook .ic { left: 22%; top: 7%; width: 56%; height: 54%; } .act.stbook .key { left: 3px; top: 3px; min-width: 15px; height: 15px; font-size: 10px; }
body.touch .act.stbook { right: 231px; bottom: 168px; width: 44px; height: 44px; } /* left of the Skills book, 6 px apart */
.st-sec { margin-top: 4px; }
.st-say { margin: 0 0 8px; font-size: 13px; line-height: 1.35; color: var(--dim); }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* four stats: two by two */
.stc { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; background: rgba(255,255,255,.055); }
.st-ic { position: relative; flex: none; width: 54px; height: 54px; }
.st-ic .aslot, .st-ic .aslot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.st-ic .ic { position: absolute; left: 13%; top: 11%; width: 74%; height: 74%; } .st-ic .ic svg { display: block; width: 100%; height: 100%; }
.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.st-v { min-width: 1.1em; font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 30px; line-height: 1; color: var(--sk); text-shadow: var(--out); }
.st-n { font-family: 'Lilita One', 'Lalezar'; font-size: 17px; line-height: 1.1; color: #f6ecd8; }
.st-top small { font-size: 12px; color: var(--dim); }
.st-now { font-size: 13px; line-height: 1.3; color: #f1e3c4; }
.st-per { font-size: 12px; line-height: 1.25; color: var(--dim); }
.st-cls { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; line-height: 1.3; color: rgba(194,180,154,.75); }
.st-cls .on { color: var(--sk); }
.press.st-up { flex: none; width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 26px; line-height: 1; }
.press.st-up[data-why] { opacity: .5; }
.st-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--dim); flex-wrap: wrap; }
@media (max-width: 760px) { .st-grid { grid-template-columns: 1fr; } }
body.touch .st-grid, body.short .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } /* the phone: all four whole at once (SIX AT ONCE: all of them when fewer) */
body.touch .st-say, body.short .st-say { margin-bottom: 6px; font-size: 12px; } body.touch .st-cls, body.short .st-cls { font-size: 10.5px; gap: 0 8px; } body.touch .st-per, body.short .st-per { font-size: 11px; } body.touch .st-top, body.short .st-top { gap: 5px; } body.touch .st-n, body.short .st-n { font-size: 15px; }
body.touch .stc, body.short .stc { padding: 6px; gap: 8px; } body.touch .st-ic, body.short .st-ic { width: 44px; height: 44px; }
body.touch .st-v, body.short .st-v { font-size: 26px; } body.touch .st-now, body.short .st-now { font-size: 12px; }

/* 0.9.2 THE FISHING: Old Tobin's window, the genre's circle, the catch card (square on every layer, the rarity's ink, the house's gold caps) */
.fisher h3 { margin: 14px 0 8px; font: 400 18px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffe08a; text-shadow: var(--out); display: flex; align-items: baseline; gap: 10px; }
.fisher h3:first-child { margin-top: 2px; } .fi-n { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: #d8c8a8; text-shadow: none; }
.fi-rod { display: flex; gap: 12px; align-items: center; padding: 10px; background: rgba(0,0,0,.28); margin-bottom: 8px; }
.fi-pic { width: 76px; height: 76px; flex: none; background: radial-gradient(#3a4a40, #141a16); box-shadow: inset 0 0 0 2px #4a3a2a; } .fi-pic svg { width: 100%; height: 100%; display: block; }
.fi-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; }
.fi-tx > b { font: 400 19px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff1d0; text-shadow: var(--out); } .fi-tx > span { font: 700 14px/1.35 Nunito, 'Cairo', system-ui, sans-serif; color: #e6d8bc; }
.fi-why { font: 700 13px Nunito, 'Cairo', system-ui, sans-serif; color: #d8c8a8; font-style: normal; } .fi-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fi-bar { position: relative; width: 100%; max-width: 360px; height: 18px; background: #0d1610; box-shadow: 0 0 0 2px #0a0605; }
.fi-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#bff0ff 0 42%, #4fb8e8 42%, #2a86b8); }
.fi-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 12px Nunito, 'Cairo', system-ui, sans-serif; color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.fi-odds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fi-odds span { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; background: rgba(0,0,0,.3); box-shadow: inset 0 -3px 0 var(--fi); }
.fi-odds b { font: 400 20px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--fi); text-shadow: var(--out); } .fi-odds i { font: 800 12px Nunito, 'Cairo', system-ui, sans-serif; color: #e6d8bc; font-style: normal; margin-top: 3px; }
.fi-log { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.fi-fish { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 6px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px var(--fi); }
.fi-fp { width: 84px; height: 84px; display: block; } .fi-fp svg { width: 100%; height: 100%; display: block; }
.fi-fish b { font: 400 15px/1.1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--fi); text-shadow: var(--out); } .fi-fish i { font: 800 11px Nunito, 'Cairo', system-ui, sans-serif; color: #d8c8a8; font-style: normal; }
.fi-fish small { font: 700 12px/1.25 Nunito, 'Cairo', system-ui, sans-serif; color: #efe2c4; margin-top: 3px; }
.fi-fish.unk .fi-fp { filter: brightness(0) opacity(.42); } .fi-fish.unk { box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); } .fi-fish.unk b { color: #b8aa90; }
.fishslot { box-shadow: inset 0 0 0 2px var(--fi) !important; }
#fishgame { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -52%); z-index: var(--z-moment); width: min(340px, 92vw); padding: 12px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(#24302c, #121a18); box-shadow: inset 0 0 0 3px #3f6a5a, 0 16px 40px rgba(0,0,0,.6); animation: fgIn .18s ease-out; touch-action: none; }
#fishgame.out { opacity: 0; transition: opacity .2s; }
#fishgame::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(#e2b44a, #e2b44a) left top / 14px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) left top / 3px 14px no-repeat, linear-gradient(#e2b44a, #e2b44a) right top / 14px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) right top / 3px 14px no-repeat,
    linear-gradient(#e2b44a, #e2b44a) left bottom / 14px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) left bottom / 3px 14px no-repeat, linear-gradient(#e2b44a, #e2b44a) right bottom / 14px 3px no-repeat, linear-gradient(#e2b44a, #e2b44a) right bottom / 3px 14px no-repeat; }
.fg-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.fg-head b { font: 400 26px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffe08a; text-shadow: var(--out); } .fg-head span { font: 800 13px/1.3 Nunito, 'Cairo', system-ui, sans-serif; color: #e8f4ee; }
#fishgame canvas { width: min(280px, 80vw); height: min(280px, 80vw); cursor: crosshair; display: block; }
.fg-foot { width: 100%; display: flex; align-items: center; gap: 10px; }
.fg-hits { display: flex; gap: 5px; } .fg-hits i { width: 16px; height: 16px; background: #10201c; box-shadow: inset 0 0 0 2px #4a7a6a; }
.fg-hits i.on { background: linear-gradient(#fff6c8, #ffc84a); box-shadow: 0 0 8px rgba(255,210,100,.8); }
.fg-bar { flex: 1; height: 14px; background: #10201c; box-shadow: 0 0 0 2px #0a0605; position: relative; }
.fg-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#fff6b0 0 42%, #f2c43a 42%, #c8962a); }
.fg-word { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); font: 400 34px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; text-shadow: var(--out); pointer-events: none; opacity: 0; }
.fg-word.hit { color: #fff3b0; } .fg-word.miss { color: #ff9a86; }
@keyframes fgIn { from { opacity: 0; transform: translate(-50%, -48%) scale(.94); } to { opacity: 1; transform: translate(-50%, -52%); } }
#fishcatch { --fi: #e6e2d8; position: fixed; top: calc(70px + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-moment); width: min(400px, 92vw); display: flex; gap: 12px; align-items: center; padding: 10px 14px 12px 10px;
  background: radial-gradient(110% 80% at 18% 50%, color-mix(in srgb, var(--fi) 22%, transparent), transparent 60%), linear-gradient(#2a2420, #171210); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--fi) 70%, #3a2a1e), 0 16px 40px rgba(0,0,0,.6);
  visibility: hidden; opacity: 0; cursor: pointer; }
#fishcatch.show { visibility: visible; animation: lvIn .22s cubic-bezier(.2, .9, .3, 1.15) forwards; } #fishcatch.out { animation: lvOut .26s ease-in forwards; }
.fc-well { position: relative; width: 112px; height: 112px; flex: none; display: grid; place-items: center; }
.fc-rays { position: absolute; inset: -6px; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--fi) 40%, transparent) 0deg 8deg, transparent 8deg 22.5deg); border-radius: 50%; animation: fcSpin 9s linear infinite; mask: radial-gradient(closest-side, #000 40%, transparent); }
.fc-pic { position: relative; width: 112px; height: 112px; } .fc-pic svg { width: 100%; height: 100%; display: block; }
#fishcatch.show .fc-pic { animation: lvPop .5s .06s cubic-bezier(.3, 1.7, .5, 1) both; }
.fc-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.fc-tx small { font: 800 12px Nunito, 'Cairo', system-ui, sans-serif; color: #e6d8bc; letter-spacing: .08em; text-transform: uppercase; }
.fc-tx b { font: 400 25px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--fi); text-shadow: var(--out); } .fc-tx > i { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: var(--fi); font-style: normal; }
.fc-row { display: flex; gap: 8px; align-items: center; } .fc-cm { font: 400 19px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff1d0; text-shadow: var(--out); }
.fc-tag { font: 400 14px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #1a1208; background: linear-gradient(#fff3b0, #ffc84a); padding: 3px 7px; }
.fc-tx p { margin: 2px 0 0; font: 700 13px/1.3 Nunito, 'Cairo', system-ui, sans-serif; color: #e6d8bc; } .fc-bar { max-width: 250px; height: 16px; margin-top: 3px; }
@keyframes fcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fc-rays, #fishgame { animation: none; } }

/* ===================================================================== 0.9.3 THE LAKE, BETTER (his orders 2026-10-09) */
/* THE RARITY FRAME OF A FISH (his "improve the rarity marker or highlighter, CURRENTLY IT LOOKS CHEAP"): the flat coloured stripe under each
   odds chip and the thin flat rim round each Fish Log card are gone. ONE edge per tile, but forged: the rim is the rung's metal lit from the
   top-left (light, ink, dark), the fish stands in a lit well of its rarity's light that deepens up the ladder, Rare wears silver at its four
   corners, Epic and Legendary gold, Legendary breathes; the rarity is a FILLED chip of its colour, never coloured words. */
.fi-fish, .fi-odds span { --fw: 10%; position: relative; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--fi) var(--fw), transparent), transparent 66%), linear-gradient(#241a15, #140f0c);
  box-shadow: none; border: 3px solid transparent; border-image: linear-gradient(150deg, color-mix(in srgb, var(--fi) 45%, #fff) 0%, var(--fi) 38%, color-mix(in srgb, var(--fi) 55%, #000) 100%) 1; }
.fi-fish.r1, .fi-odds span.r1 { --fw: 24%; } .fi-fish.r2, .fi-odds span.r2 { --fw: 32%; } .fi-fish.r3, .fi-odds span.r3 { --fw: 40%; } .fi-fish.r4, .fi-odds span.r4 { --fw: 52%; }
.fi-fish.r2::before, .fi-fish.r3::before, .fi-fish.r4::before, .fi-odds span.r2::before, .fi-odds span.r3::before, .fi-odds span.r4::before { --cc: #dfe6ee; --cl: 10px; content: ''; position: absolute; inset: -3px; pointer-events: none;
  background: linear-gradient(var(--cc), var(--cc)) left top / var(--cl) 3px no-repeat, linear-gradient(var(--cc), var(--cc)) left top / 3px var(--cl) no-repeat,
    linear-gradient(var(--cc), var(--cc)) right top / var(--cl) 3px no-repeat, linear-gradient(var(--cc), var(--cc)) right top / 3px var(--cl) no-repeat,
    linear-gradient(var(--cc), var(--cc)) left bottom / var(--cl) 3px no-repeat, linear-gradient(var(--cc), var(--cc)) left bottom / 3px var(--cl) no-repeat,
    linear-gradient(var(--cc), var(--cc)) right bottom / var(--cl) 3px no-repeat, linear-gradient(var(--cc), var(--cc)) right bottom / 3px var(--cl) no-repeat; }
.fi-fish.r3::before, .fi-odds span.r3::before { --cc: #e2b44a; --cl: 12px; } .fi-fish.r4::before, .fi-odds span.r4::before { --cc: #ffd27a; --cl: 15px; }
.fi-fish.r4:not(.unk), .fi-odds span.r4 { animation: fiBreathe 3.2s ease-in-out infinite; }
@keyframes fiBreathe { 50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--fi) 70%, transparent)); } }
.fi-fish .fi-fp { filter: drop-shadow(0 3px 2px rgba(0,0,0,.55)); }
.fi-fish i, .fi-chip { display: inline-block; margin: 3px 0 1px; padding: 2px 7px 3px; font: 900 11px/1 Nunito, 'Cairo', system-ui, sans-serif; font-style: normal; letter-spacing: .04em;
  color: #120c08; background: linear-gradient(color-mix(in srgb, var(--fi) 60%, #fff), var(--fi)); text-shadow: none; }
.fi-fish.unk { border-image: linear-gradient(150deg, #5a524a, #3a332c 40%, #1e1914) 1; --fw: 0%; }
.fi-fish.unk::before { display: none; }
.fi-fish.unk i { color: #cfc3ad; background: #3a312a; }
.fi-fish.unk .fi-fp { filter: brightness(0) opacity(.5); }
.fi-odds span { padding: 10px 4px 8px; gap: 3px; }
.fi-odds span i { display: inline-block; padding: 2px 6px 3px; font: 900 11px/1 Nunito, 'Cairo', system-ui, sans-serif; font-style: normal; color: #120c08; background: linear-gradient(color-mix(in srgb, var(--fi) 60%, #fff), var(--fi)); text-shadow: none; }
.fi-odds span.off { opacity: .45; }
.fi-streak { margin: 0 0 8px; font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: #ffd27a; }

/* THE CATCH ON THE GAME'S FORGED PLATE (his "the pop up we use to highlight cool events sometimes look like its from roblox, WE NEED MORE
   QUALITY ONES"): the level card's walnut and brass (lv-plate), the fish risen in its rarity's lit well and rays, the rarity a filled chip */
#fishcatch.fcard { background: radial-gradient(90% 90% at 16% 50%, color-mix(in srgb, var(--fi) 26%, transparent), transparent 58%),
    radial-gradient(120% 60% at 50% 0%, rgba(255,206,120,.14), rgba(255,206,120,0) 62%), repeating-linear-gradient(90deg, rgba(255,235,200,.025) 0 2px, transparent 2px 9px), linear-gradient(#36231a, #22160f 60%, #1a110b);
  box-shadow: inset 0 0 0 3px #7a5530, 0 16px 40px rgba(0,0,0,.6); flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 10px 16px 12px 10px; }
/* 2026-10-11 (his "THERE IS A ROBLOXY GLOW" / "DONT PUT IT", over the level card whose plate this is): the round glow and the turning rays
   behind the fish are gone here too; the rarity is still said by the plate's own tint behind the fish, its filled chip and its sound.
   DIAL: delete the next line to give the rays back to the catch alone. */
#fishcatch.fcard .fc-rays { display: none; }
#fishcatch .fc-pic svg { filter: drop-shadow(0 4px 3px rgba(0,0,0,.6)); }
#fishcatch .fc-coin { width: 72px; height: 72px; }
#fishcatch .fc-tx b { color: #fff1d0; }
.fc-chip { display: inline-block; padding: 2px 8px 3px; font: 900 12px/1 Nunito, 'Cairo', system-ui, sans-serif; letter-spacing: .05em; color: #120c08; background: linear-gradient(color-mix(in srgb, var(--fi) 60%, #fff), var(--fi)); }
.fc-tag.gold { background: linear-gradient(#fff6c8, #ffc84a 55%, #e2a43a); box-shadow: 0 0 10px rgba(255,200,90,.6); }
.fc-streak { font: 800 12px/1.3 Nunito, 'Cairo', system-ui, sans-serif; color: #ffd27a; }

/* THE STRIKE: a forged plate with one word, the hook window running out under it, the key to press */
#fishstrike { position: fixed; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: var(--z-moment); display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 26px 12px; cursor: pointer; background: linear-gradient(#36231a, #1a110b); box-shadow: inset 0 0 0 3px #e2b44a, 0 12px 30px rgba(0,0,0,.6); animation: fsIn .14s ease-out; }
#fishstrike b { font: 400 34px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff3b0; text-shadow: var(--out); animation: fsPulse .32s ease-in-out infinite alternate; }
#fishstrike small { font: 900 12px Nunito, 'Cairo', system-ui, sans-serif; color: #e6d8bc; letter-spacing: .06em; text-transform: uppercase; }
.fs-bar { width: 150px; height: 8px; background: #10201c; box-shadow: 0 0 0 2px #0a0605; position: relative; }
.fs-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#fff6b0 0 42%, #f2c43a 42%, #c8962a); animation: fsDrain linear forwards; }
@keyframes fsDrain { to { width: 0; } } @keyframes fsPulse { to { transform: scale(1.08); } } @keyframes fsIn { from { opacity: 0; transform: translate(-50%, -40%); } }
#fishgame { box-shadow: inset 0 0 0 3px #7a5530, 0 16px 40px rgba(0,0,0,.6); background: linear-gradient(#36231a, #22160f 60%, #1a110b); }
#fishgame .fg-head b { color: color-mix(in srgb, var(--fi, #ffe08a) 60%, #fff3b0); }

/* THE EVENT RIBBON (his "the pop up we use to highlight cool events sometimes look like its from roblox"): a good thing and a world event no
   longer float as bare outlined words; they stand on a walnut ribbon whose ends fade into the world, a brass line along its top and foot
   (its one edge), lit from the middle. A refusal and plain news stay words. */
.note.good, .note.world { position: relative; padding: 7px 46px 8px; font-size: 19px;
  background: radial-gradient(60% 140% at 50% 50%, rgba(255,214,140,.16), transparent 70%), linear-gradient(90deg, rgba(24,15,10,0), rgba(38,25,17,.94) 16%, rgba(30,19,13,.94) 84%, rgba(24,15,10,0)); }
.note.good::before, .note.world::before, .note.good::after, .note.world::after { content: ''; position: absolute; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, rgba(226,180,74,0), #e2b44a 22%, #ffe9a0 50%, #e2b44a 78%, rgba(226,180,74,0)); }
.note.good::before, .note.world::before { top: 0; } .note.good::after, .note.world::after { bottom: 0; }
.note.world::before, .note.world::after { background: linear-gradient(90deg, rgba(110,230,210,0), #6ee6d2 22%, #d8fff6 50%, #6ee6d2 78%, rgba(110,230,210,0)); }

/* DROP (his "REPLACE IT WITH A 'Drop'"): a quiet press; the first press asks, the second drops */
.press.drop { --h: #5a3a30; --hd: #2a1712; }
.press.drop.arm { --h: #a8402e; --hd: #561c12; animation: fsPulse .4s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { #fishcatch.fcard .fc-rays, .fi-fish.r4, .fi-odds span.r4, #fishstrike b, .press.drop.arm { animation: none; } }
#fishcatch.fcard { width: min(440px, 94vw); }
#fishcatch .fc-bar { height: auto; min-height: 16px; max-width: 270px; } #fishcatch .fc-bar span { position: relative; display: block; padding: 2px 6px; font-size: 11px; line-height: 1.25; text-align: center; }

/* NEVER AN EDGE HIGHLIGHTER (his HARD RULE 2026-10-09 over the Strike plate's bright gold outline: "NEVER USE AI SLOP EDGES HIGHLIGHTER" /
   "THAT DONT FIT WITH THE COLORING" / "HARD RULE LIKE I SAID." / "MAKE IT MORE PROFESSIONAL MAN."): no bright line traced round a pop-up,
   plate or ribbon. The Strike moment is the game's own words in its cream with a warm glow, standing on a soft shade that fades into the
   world (no box, no rim), the hook window a slim bar under it, the keys as the game's key caps. The event ribbons lose their two brass
   lines: a soft band that fades at both ends is all they are. */
#fishstrike { background: radial-gradient(closest-side, rgba(12,7,4,.66), rgba(12,7,4,.32) 60%, rgba(12,7,4,0)); box-shadow: none; padding: 22px 64px 24px; gap: 8px; }
#fishstrike b { font-size: 44px; color: #fff1d0; text-shadow: var(--out), 0 0 22px rgba(255,186,90,.5); }
#fishstrike .fs-bar { width: 176px; height: 7px; background: rgba(0,0,0,.55); box-shadow: none; }
#fishstrike .fs-bar i { background: linear-gradient(#fff3c8 0 45%, #f0c060 45%, #c8902a); }
.fs-keys { display: flex; align-items: center; gap: 6px; font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: #e6d8bc; text-shadow: var(--out); }
.fs-keys .hk { min-width: 30px; padding: 4px 8px 5px; text-align: center; background: linear-gradient(#3a2c22, #2a201a); color: #fff4cf; font: 400 14px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; text-shadow: none; box-shadow: 0 3px 0 #0d0907; }
.note.good::before, .note.world::before, .note.good::after, .note.world::after { content: none; display: none; }

/* 0.9.4 THE FISHING BUBBLE (his "AN ICON OF A FISHING BUBBLE ON TOP OF THE PLAYER" / "A BUBBLE OF 'E' / 'Space'"): a thought bubble over
   his own name, the game's dark walnut with a soft round shape and its tail pointing down at him, its edge only its own deepest shade (T44);
   ready, it holds the key caps that cast; fishing, it holds the float bobbing on its ring of water. */
#prompt.bubble { padding: 7px 10px; min-height: 0; gap: 6px; border-radius: 16px; background: radial-gradient(120% 90% at 50% 20%, #3e2c21, #24180f);
  box-shadow: 0 0 0 2px #120b07, 0 6px 14px rgba(0,0,0,.45); }
#prompt.bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg);
  background: #24180f; box-shadow: 2px 2px 0 0 #120b07; }
#prompt.bubble::before { content: ''; position: absolute; left: calc(50% + 12px); bottom: -19px; width: 7px; height: 7px; border-radius: 50%; background: #24180f; box-shadow: 0 0 0 2px #120b07; }
.bkeys { display: flex; align-items: center; gap: 5px; }
#prompt.bubble .hk { min-width: 28px; padding: 4px 8px 5px; text-align: center; background: linear-gradient(#4a3828, #2e2219); color: #fff4cf; font: 400 15px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; box-shadow: 0 3px 0 #0d0907; }
.bfloat { display: block; width: 40px; height: 40px; } .bfloat svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bfloat .fb { animation: bFloat 1.6s ease-in-out infinite; transform-origin: 24px 25px; }
@keyframes bFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(2.5px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .bfloat .fb { animation: none; } }

/* 0.10 THE LANGUAGES, RIGHT TO LEFT: a window, a card and every line of words turn right to left in Arabic, as Arabic games do. The HUD
   is a map of the glass (the rail on the left, the bar at the foot, the minimap at the top right), placed by position, so it keeps its
   places; only its words read right to left inside them, each line taking its direction from its own first letter (a name stays Latin). */
[dir="rtl"] #hud, [dir="rtl"] #over, [dir="rtl"] #notes, [dir="rtl"] #hudfx, [dir="rtl"] #prompt, [dir="rtl"] #stick, [dir="rtl"] #roomtitle, [dir="rtl"] #lvlcard { direction: ltr; }
[dir="rtl"] :is(#hud, #over, #notes, #prompt, #roomtitle, #lvlcard) :is(p, span, b, i, em, small, strong, label, button, div, li, h1, h2, h3, h4) { unicode-bidi: plaintext; }
/* the Store door's word is measured for "Store"; "Boutique" takes the same box one step smaller, never cut */
/* 0.11.6 POLISH: "Mężczyzna" is 99 px at the Gender press's 20 px, and two such presses do not fit the 296 px column (the grid grew under the
   Class column and cut "Kobieta"). The word keeps its letters: a smaller face and the wide word's own share of the row. */
html[lang="pl"] .t-gpick { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
html[lang="pl"] .t-gp { font-size: 16px; gap: 8px; padding-right: 8px; }
html[lang="pl"] body.touch .t-gp, html[lang="pl"] body.short .t-gp { font-size: 13px; gap: 6px; padding-right: 6px; } /* 242 px column: 116 + 8 + 98 measured */
html[lang="fr"] .d-store { --wfs: 16px; }
html[lang="fr"] body.touch .d-store, html[lang="fr"] body.short .d-store { --wfs: 13px; }
/* a slot's word under its picture: French runs longer ("Compétences"), so it sits one step smaller inside the same slot, never cut */
html[lang="fr"] .act .nm, html[lang="pl"] .act .nm { font-size: 9.5px; left: -6px; right: -6px; } /* 6 px into the gap each side: the slots stand 8+ px apart */

/* ==== 0.10.1 THE HERO WINDOW REBUILT (his 2026-10-10 "REDESIGN THE CHARACTER TAB ... A CLEARER PROFESSIONAL EASY FOR THE EYE APPROACH") ====
   two columns: who he is (always in sight) and one subject at a time behind three tabs; rows told apart by a lighter face and space,
   never a line; one figure column to scan; every press says what it does */
#modal[data-kind="hero"] .p-scroll { display: flex; overflow: hidden; padding-right: 0; }
.hw { flex: 1; min-width: 0; min-height: 0; display: flex; gap: 18px; }
.hw-id { flex: none; width: 272px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 14px 12px; background: rgba(0,0,0,.28); overflow-y: auto; }
.hw-id .pt.big { flex: 0 1 168px; width: auto; height: auto; min-height: 96px; max-height: 168px; aspect-ratio: 1; margin-bottom: 6px; } /* the body gives way first: the two doors under it are never cut (Arabic lines stand taller) */
.hw-id .hid-name { font-size: 26px; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.hw-lv { align-self: stretch; display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.hw-lv b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 18px; line-height: 1; color: #fff4cf; text-shadow: var(--out); }
.hw-lv .xpbar { width: 100%; height: 12px; }
.hw-lv .xpline { font-size: 13px; font-weight: 800; color: #cdb6ff; }
.hw-pow { align-self: stretch; display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.hw-pw { display: flex; align-items: center; gap: 10px; }
.hw-pw .ic { flex: none; width: 26px; height: 26px; } .hw-pw .ic svg { display: block; width: 100%; height: 100%; }
.hw-pw span { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: var(--dim); }
.hw-pw b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 22px; line-height: 1; color: #fff4cf; text-shadow: var(--out); }
.hw-acts { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 14px; }
.hw-acts { padding-left: 2px; padding-right: 2px; } .hw-acts .press { min-width: 0; padding: 0 8px; gap: 5px; font-size: 14px; }
.hw-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.hw-tabs { flex: none; margin-bottom: 12px; }
.hw-tabs .ftab small { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; background: #ffd75e; color: #2a1708; font-family: Nunito; font-weight: 800; font-size: 13px; line-height: 1; opacity: 1; }
.hw-view { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.hw-view::-webkit-scrollbar { width: 8px; } .hw-view::-webkit-scrollbar-thumb { background: #4a3a2e; }
.hw-view > h3:first-child, .hw-view .st-sec { margin-top: 0; }
.hw-say { margin: 0 0 10px; font-size: 14px; color: var(--dim); }
.hs-head { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.hs-pts { flex: none; display: flex; align-items: baseline; gap: 9px; }
.hs-pts b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 42px; line-height: .9; color: #ffe08a; text-shadow: var(--out); }
.hs-pts span { font-family: 'Lilita One', 'Lalezar'; font-size: 17px; color: #f1e3c4; text-shadow: var(--out); }
.hs-head p { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.4; color: var(--dim); }
.hw .st-grid { grid-template-columns: 1fr; gap: 8px; }
.hs-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 12px 9px 9px; background: rgba(255,255,255,.06); }
.hs-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-nm { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hs-nm b { font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 20px; line-height: 1.1; color: var(--sk); text-shadow: var(--out); }
.hs-nm em { font-style: normal; font-size: 12px; font-weight: 800; line-height: 1; color: #1b1208; background: var(--sk); padding: 3px 7px; }
.hs-now { font-size: 13.5px; line-height: 1.3; color: #f1e3c4; }
.hs-next { font-size: 12.5px; line-height: 1.3; color: var(--dim); }
.hs-fig { flex: none; width: 92px; display: flex; flex-direction: column; gap: 5px; }
.hs-num { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.hs-num .st-v { font-size: 32px; } .hs-num small { font-size: 12.5px; font-weight: 800; color: var(--dim); white-space: nowrap; }
.hs-bar { display: block; height: 6px; background: rgba(0,0,0,.55); } .hs-bar i { display: block; height: 100%; background: var(--sk); }
.press.st-add { flex: none; min-width: 116px; }
.press.st-add[data-why] { opacity: .5; }
.hw .st-foot { margin-top: 12px; }
.hw .rk-ladder { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.hw .hw-sk { grid-template-columns: 1fr; }
/* the landscape phone and every short glass: the same two columns, cut for 390 px of height */
body.touch .hw, body.short .hw { gap: 10px; }
body.touch .hw-id, body.short .hw-id { width: 212px; padding: 6px 8px; }
body.touch .hw-id .pt.big, body.short .hw-id .pt.big { flex-basis: 76px; max-height: 76px; min-height: 56px; margin-bottom: 2px; }
body.touch .hw-id .hid-name, body.short .hw-id .hid-name { font-size: 18px; }
body.touch .hw-id .hid-rank, body.short .hw-id .hid-rank { font-size: 15px; } body.touch .hw-id .hid-cls, body.short .hw-id .hid-cls { font-size: 12px; }
body.touch .hw-lv, body.short .hw-lv { margin-top: 4px; gap: 3px; } body.touch .hw-lv b, body.short .hw-lv b { font-size: 14px; }
body.touch .hw-lv .xpbar, body.short .hw-lv .xpbar { height: 8px; } body.touch .hw-lv .xpline, body.short .hw-lv .xpline { font-size: 11px; }
body.touch .hw-pow, body.short .hw-pow { margin-top: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 8px; } /* two by two on a short glass: the two doors under it stay whole */
body.touch .hw-pw, body.short .hw-pw { gap: 4px; min-width: 0; } body.touch .hw-pw .ic, body.short .hw-pw .ic { width: 16px; height: 16px; }
body.touch .hw-pw span, body.short .hw-pw span { font-size: 11.5px; } body.touch .hw-pw b, body.short .hw-pw b { font-size: 15px; }
body.touch .hw-acts, body.short .hw-acts { padding-top: 6px; gap: 6px; } body.touch .hw-acts .press, body.short .hw-acts .press { font-size: 11.5px; padding: 0 3px; } body.touch .hw-acts .pm, body.short .hw-acts .pm { display: none; }
body.touch .hw-tabs, body.short .hw-tabs { margin-bottom: 6px; }
body.touch .hs-head, body.short .hs-head { gap: 10px; margin-bottom: 6px; } body.touch .hs-pts b, body.short .hs-pts b { font-size: 28px; } body.touch .hs-pts span, body.short .hs-pts span { font-size: 13px; }
body.touch .hs-head p, body.short .hs-head p { font-size: 11px; line-height: 1.25; }
body.touch .hw .st-grid, body.short .hw .st-grid { grid-template-columns: 1fr; gap: 4px; } /* one row a stat on the phone too: all four whole at once */
body.touch .hs-row, body.short .hs-row { gap: 8px; padding: 3px 8px 3px 4px; }
body.touch .hw .st-ic, body.short .hw .st-ic { width: 40px; height: 40px; }
body.touch .hs-tx, body.short .hs-tx { gap: 0; }
body.touch .hs-nm b, body.short .hs-nm b { font-size: 16px; } body.touch .hs-nm em, body.short .hs-nm em { font-size: 10.5px; padding: 2px 5px; }
body.touch .hs-now, body.short .hs-now { font-size: 11.5px; } body.touch .hs-next, body.short .hs-next { font-size: 10.5px; }
body.touch .hs-fig, body.short .hs-fig { width: 66px; gap: 3px; } body.touch .hs-num .st-v, body.short .hs-num .st-v { font-size: 24px; } body.touch .hs-num small, body.short .hs-num small { font-size: 11px; }
body.touch .press.st-add, body.short .press.st-add { min-width: 92px; padding: 0 8px; font-size: 14px; }
@media (max-width: 640px) { .hw { flex-direction: column; overflow-y: auto; } .hw-id { width: auto; overflow: visible; } .hw-view { overflow: visible; } }

/* ==== 0.10.1 THE LANGUAGE ROW (his "IMPROVE ITS POSITION AND LAYOUT IN THE SETTINGS TOO"): one full row, three presses of one size ==== */
/* ==== 0.15 THE LANGUAGE WINDOW (his "IMPROVE THE LANGUAGE SELECTION" / "ESPECIALLY FROM THE SETTINGS" / "ADD IT TO THE ESC TAB"): the six
   languages are ONE window, two columns of three, a language a press: its own name, its name in the language on screen, "In use" on the
   one that is. Settings keeps one plain row whose press wears the language in use and opens this window. -- CUT: LANG row 60 / 48 px,
   own name 20 / 17 px, gap 10 / 6 px, window 560 px or the glass less 24 ==== */
#modal[data-kind="lang"] { --pbg: url('/art/panel_plaza.webp'); --pb: #4a4a58; --pbd: #18181f; }
#modal[data-kind="lang"] .panel, body.touch #modal[data-kind="lang"] .panel, body.short #modal[data-kind="lang"] .panel { width: min(560px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - 12px); }
.lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 2px 2px 4px; }
.press.lang-b { justify-content: space-between; gap: 10px; min-height: 60px; padding: 6px 16px; text-align: start; line-height: 1.1; }
.lang-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.press.lang-b b { font-weight: 400; font-size: 20px; line-height: 1.15; }
.press.lang-b small { font-family: Nunito, 'Cairo', system-ui, sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: 0; opacity: .85; }
.lang-on { flex: none; font: 800 12.5px/1 Nunito, 'Cairo', system-ui, sans-serif; font-style: normal; padding: 5px 8px; background: rgba(0,0,0,.28); color: #fff4dc; }
.lang-list.going .press.lang-b:not(.pick) { opacity: .45; } .lang-list.going .press.lang-b { pointer-events: none; }
.press.lang-open { min-width: 104px; }
body.touch .lang-list, body.short .lang-list { gap: 6px; }
body.touch .press.lang-b, body.short .press.lang-b { min-height: 48px; padding: 4px 12px; } body.touch .press.lang-b b, body.short .press.lang-b b { font-size: 17px; } body.touch .press.lang-b small, body.short .press.lang-b small { font-size: 11.5px; }
@media (max-width: 420px) { .lang-list { grid-template-columns: minmax(0, 1fr); } }
/* the change itself: the whole page fades to its own ground before it comes back in the language (i18n.js choose) */
html.lang-out { background: #0d0907; } html.lang-out body { opacity: 0; transition: opacity .22s ease-in; }
@media (prefers-reduced-motion: reduce) { html.lang-out body { transition: none; } }
/* the sign-in screen: the three languages, each in its own letters, in the corner across from Music */
.t-lang { pointer-events: auto; position: absolute; left: calc(16px + var(--sl)); bottom: calc(14px + var(--sb)); display: flex; align-items: center; gap: 4px; }
.t-lg { min-height: 44px; padding: 0 10px; font-family: 'Lilita One', 'Lalezar', system-ui, sans-serif; font-size: 16px; color: #e6d7b6; text-shadow: var(--out); background: none; border: 0; cursor: pointer; opacity: .82; }
.t-lg:hover { opacity: 1; } .t-lg.on { color: #ffe08a; opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
/* 0.15 six languages stay ONE row in the band under the card (measured on 844 x 390: the Create card spans the glass down to y 330 and
   the row stands at 332 to 376, 16 to about 400 px across, clear of Music at 784; two rows of three climbed into the card) */
body.touch .t-lang, body.short .t-lang { gap: 0; } body.touch .t-lg, body.short .t-lg { padding: 0 8px; font-size: 15px; }
[dir="rtl"] .t-lang { direction: ltr; }
/* Arabic reads the level from the right: the word, then its figure to its left */
[dir="rtl"] #xp .xlv { direction: rtl; }

/* ---- 0.11 THE MARKET DAY (his 2026-10-10 "IT LOOKS DULL AND BORING" / "EVEN THE SELL AND BUY MECHANISM"): a town trader's window and the
   Market Board. TODAY's band is one filled plate in the market's own dark gold (its edge its deepest shade, nothing inside it but the
   picture and the words); a row that is today's want or deal is LIT as a whole plate, never by a stripe. */
#modal[data-kind="trader"], #modal[data-kind="mboard"] { --pbg: url('/art/panel_market.webp'); --pb: #8a6a1e; --pbd: #3a2a08; }
#modal[data-kind="trader"] .panel, #modal[data-kind="mboard"] .panel { width: min(1120px, calc(100vw - 24px)); height: min(700px, calc(100dvh - 24px)); }
.mday { gap: 10px; }
.td { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; background: linear-gradient(180deg, #4a3a16, #33270f); box-shadow: 0 0 0 2px #14100a; }
.td-pic { width: 64px; height: 64px; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #7a6226 0%, #2a2010 74%); }
.td-pic svg, .td-pic img { width: 52px; height: 52px; display: block; }
.td-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-k { font: 800 12.5px Nunito, 'Cairo', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #ffe08a; }
.td-t b { font-family: 'Lilita One', 'Lalezar', system-ui, sans-serif; font-weight: 400; font-size: 21px; color: #fff4dc; text-shadow: var(--out); }
.td-t span:last-child { font-size: 14px; color: #f0e2c4; }
.td-turn { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; font-style: normal; color: #e6d7b6; white-space: nowrap; }
.row.item.hot { background: rgba(201, 164, 58, .2); }
.row.item.hot .r-main span { color: #f6e7c4; }
.r-acts input.over { box-shadow: 0 0 0 2px #e2573f; color: #ffb4a4; }
.mday .ask-acts { display: flex; justify-content: flex-end; }
.bd-today { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.bd-chip { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 60px; padding: 6px 10px; background: linear-gradient(180deg, #4a3a16, #33270f); box-shadow: 0 0 0 2px #14100a; }
.bd-pic { width: 48px; height: 48px; display: grid; place-items: center; }
.bd-pic svg, .bd-pic img { width: 42px; height: 42px; display: block; }
.bd-chip div { display: flex; flex-direction: column; min-width: 0; }
.bd-chip b { font-family: 'Lilita One', 'Lalezar', system-ui, sans-serif; font-weight: 400; font-size: 16px; color: #ffe08a; }
.bd-chip span { font-size: 13.5px; color: #f0e2c4; }
.bd-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.bd-find .ftabs { margin: 0; }
.bd-find input { flex: 1; min-width: 180px; height: 44px; padding: 0 12px; background: #120d0a; border: 0; outline: 0; box-shadow: 0 0 0 2px #3a2c20; color: #fff4dc; font: 700 15px Nunito, 'Cairo', system-ui, sans-serif; }
.bd-find input:focus { box-shadow: 0 0 0 2px #ffe08a; }
.bd-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bd-row .ware { flex: 1; }
.bd-from { font: 800 12.5px Nunito, 'Cairo', system-ui, sans-serif; color: #e6d7b6; }
body.touch .td, body.short .td { grid-template-columns: 48px minmax(0, 1fr); padding: 8px 10px; }
body.touch .td-pic, body.short .td-pic { width: 48px; height: 48px; } body.touch .td-pic svg, body.short .td-pic svg { width: 40px; height: 40px; }
body.touch .td-turn, body.short .td-turn { grid-column: 2; }
body.touch .td-t b, body.short .td-t b { font-size: 18px; }
@media (max-width: 640px) { .bd-today { grid-template-columns: 1fr; } }
.wbon i { font-style: normal; }
/* 0.11 the trader's rows on the phone cut: the name wraps inside its lane, the count box and its press stand the touch floor tall */
.mday .r-main b { white-space: normal; overflow-wrap: anywhere; }
body.touch .mday .row.item, body.short .mday .row.item { gap: 8px; padding: 6px 8px; }
body.touch .mday .r-main b, body.short .mday .r-main b { font-size: 15px; line-height: 1.15; }
body.touch .mday .r-acts, body.short .mday .r-acts { gap: 6px; }
body.touch .mday .r-acts input, body.short .mday .r-acts input { width: 62px; height: 44px; padding: 0 6px; }
body.touch .mday .r-acts .press.small, body.short .mday .r-acts .press.small { min-height: 44px; }
body.touch .mday .press.two, body.short .mday .press.two { min-height: 50px; padding: 9px 8px 8px; }
/* 0.11 THE WIND BOOTS (his order 2026-10-10): the Store's hue for the pair, its wear left on a tile, its HUD line, and its own sixth slot under "You wear" */
.h-wind { --lt: rgba(127,220,255,.55); } .badge.h-wind { --bh: #1f7ea6; --bhd: #0a3246; }
.slot .plus.wbt { color: #cfefff; font-size: 11px; }
/* 0.12 THE MOUNTS: the ring he rides says so on its tile; a mount on the Store's shelf is its own body, drawn by the game; its ring's card */
.slot .plus.mtt { color: #c8f7c0; font-size: 10px; }
.case.mount { --lt: rgba(214,190,140,.42); padding: 10px 10px 12px; }
.case.mount.m-lion { --lt: rgba(188,212,255,.5); } .case.mount.m-stag { --lt: rgba(143,224,238,.46); } .case.mount.m-ram { --lt: rgba(255,154,74,.46); } .case.mount.m-courser { --lt: rgba(143,191,106,.44); }
.case.mount .pic { width: 100%; height: 168px; }
.case.mount .pic::before { inset: 6% 0; }
.case.mount .pic img, .case.mount .pic svg { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 0 rgba(0,0,0,.35)); }
.case.mount .nm { font-size: 17px; min-height: 2.2em; display: flex; align-items: center; } .case.mount .ln { font-size: 13px; min-height: 3.9em; }
.case.mount .sx { font-family: 'Lilita One', 'Lalezar'; font-size: 15px; line-height: 1.15; color: #c8f7c0; text-shadow: var(--out); }
.mountcard .mc-pic { display: block; width: 100%; height: 132px; object-fit: contain; margin: 2px 0 6px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
body.touch .case.mount, body.short .case.mount { grid-template-columns: 74px minmax(0, 1fr) auto; padding: 4px 8px; }
body.touch .case.mount .pic, body.short .case.mount .pic { width: 74px; height: 58px; }
body.touch .case.mount .nm, body.short .case.mount .nm { font-size: 15px; min-height: 0; } body.touch .case.mount .ln, body.short .case.mount .ln { min-height: 0; font-size: 11px; line-height: 1.2; }
body.touch .case.mount .sx, body.short .case.mount .sx { font-size: 12px; }
body.touch .mountcard .mc-pic, body.short .mountcard .mc-pic { height: 84px; }
.buff.wb { color: #bfeeff; } .buff.wb.low { color: #ff9a7a; }
body.touch .badge.h-wind i, body.short .badge.h-wind i { display: none; } /* -- CUT: the phone's row tile: the badge says +50% alone (it covered the name's first letter); "speed" stands in the sentence beside it */
body.touch .inv-eq.five.six, body.short .inv-eq.five.six, body.touch .inv-hero .inv-eq.five.six, body.short .inv-hero .inv-eq.five.six { grid-template-columns: repeat(6, auto); gap: 4px; }

/* ================================================================== THE INVENTORY, DOCKED (2026-10-10)
   His "IMPROVE THE INVENTORY DESIGN DRASTICALLY" / "ITS TOO CENTERED" / "GAMES LIKE METIN2 ... SHOWS THE SLOTS NICELY AND THE PLAYER CHARACTER
   SLOTS AND ITS MODEL BETTER" / "NOT JUST A CENTERED TAB". One tall window on the RIGHT edge, the world in view beside it: the hero's whole
   body on a lit stand between what he wears, the bag as one tray of wells under it, his gold at its foot, the chosen piece's card flying
   out on the window's left. Every size is one expression of --s (the slot's side, set by renderInv as a whole even pixel), --icols and
   --igap, so the window's width, the tray and the doll can never disagree. A mouse glass plays on under it (no dim, the world takes the
   clicks); a touch or short glass keeps it a window over a light dim, hero and bag side by side.
   -- CUT: INV (class iw, the touch / short / low glass): slot 44 | hero beside the bag | the stand 96 wide | labels 10 px | head 22 px, its line stood down | body pad 10 | tray pad 6
   -- CUT: INV (class ic, a glass that would push the slot under 46): the worn slots' names and the head's line stand down */
#modal[data-kind="inv"] .panel { left: auto; right: max(14px, env(safe-area-inset-right)); top: var(--itop, 12px); transform: none; height: auto; max-height: calc(100dvh - 24px);
  width: calc(var(--icols) * var(--s) + (var(--icols) - 1) * var(--igap) + 44px); /* the tray's 8 px either side + the body's 14 */
  display: flex; flex-direction: column; overflow: visible; }
#modal[data-kind="inv"] .panel::before { inset: 0; filter: none; } /* the window lets its card out, so its ground is cut to its own box */
#modal[data-kind="inv"] .body { height: auto; min-height: 0; flex: 1 1 auto; padding: 14px 14px 12px; }
#modal[data-kind="inv"] .p-scroll { flex: 1 1 auto; min-height: 0; padding-right: 0; overflow-x: hidden; }
#modal[data-kind="inv"] .body > .p-head { margin: -14px -14px 10px; padding: 9px 58px 9px 12px; gap: 10px; }
#modal[data-kind="inv"] .body > .p-head h2 { font-size: 24px; line-height: 26px; }
#modal[data-kind="inv"] .body > .p-head p { margin-top: 2px; font-size: 12.5px; line-height: 16px; }
#modal[data-kind="inv"] .p-emb { width: 44px; height: 44px; padding: 5px; }
#modal[data-kind="inv"] .panel .x { right: 9px; top: 9px; width: 40px; height: 40px; }
body:not(.touch):not(.short) #modal[data-kind="inv"] { pointer-events: none; }
body:not(.touch):not(.short) #modal[data-kind="inv"] .dim { display: none; }
body:not(.touch):not(.short) #modal[data-kind="inv"] .panel { pointer-events: auto; }
body.touch #modal[data-kind="inv"] .dim, body.short #modal[data-kind="inv"] .dim { background: rgba(10,6,4,.34); }
#modal.ic[data-kind="inv"] .body > .p-head p, #modal.ic[data-kind="inv"] .inv-eq.side .eq > span:last-child { display: none; }

.inv.dock { display: flex; flex-direction: column; gap: 10px; }
.inv.dock h4 { margin: 0; }
.inv.dock .inv-hero { display: flex; flex-direction: column; gap: 8px; }
.inv-who { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; min-width: 0; }
.inv-who b { font: 400 22px/24px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: var(--out); overflow-wrap: anywhere; }
.inv-who span { font: 800 13px/16px Nunito, 'Cairo', system-ui, sans-serif; color: #e8dcc0; }
/* THE DOLL: his slots down both sides of his body; the well behind him is the window's own drawn ground, let through, lit from his feet */
.inv-doll { display: grid; grid-template-columns: var(--s) minmax(0, 1fr) var(--s); align-items: stretch; gap: 10px; padding: 8px 12px; box-shadow: 0 0 0 2px #0d0907;
  background: radial-gradient(ellipse 70% 46% at 50% 100%, rgba(255,196,110,.26), rgba(255,196,110,0) 70%), linear-gradient(rgba(14,9,7,.5), rgba(14,9,7,.78)), #140d0a var(--pbg, none) center 30% / cover no-repeat; }
.inv.dock .inv-eq.side { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.inv.dock .inv-eq.side .eq { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 800 11px/13px Nunito, 'Cairo', system-ui, sans-serif; color: #dccbaa; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.inv.dock .slot, .inv.dock .inv-eq.side .slot { width: var(--s); height: var(--s); padding: 4px; }
.inv-stand { position: relative; min-width: 0; min-height: 0; }
.inv-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.inv-cv:active { cursor: grabbing; }
.inv-stand .pt { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; }
/* his three numbers in one row, each its picture, its figure and its name; his bonuses as chips under them */
.inv.dock .inv-sum { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.inv.dock .inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: auto; }
.inv.dock .inv-stats > div { display: grid; grid-template-columns: 20px auto; grid-template-rows: auto auto; column-gap: 6px; justify-content: center; align-items: center; padding: 7px 6px; background: rgba(0,0,0,.34); }
.inv.dock .inv-stats .ic { grid-row: 1 / span 2; width: 20px; height: 20px; }
.inv.dock .inv-stats b { font-size: 18px; line-height: 18px; text-align: left; }
.inv.dock .inv-stats span:last-child { font-size: 11px; line-height: 13px; text-align: left; color: #cbbd9e; }
.inv.dock .inv-bonus { display: flex; flex-wrap: wrap; gap: 5px; width: auto; }
.inv.dock .inv-bonus .bt { flex: 1 1 auto; align-items: center; padding: 2px 8px; font-size: 12px; line-height: 18px; background: rgba(0,0,0,.34); }
.inv.dock .inv-bonus .bt b { font-size: 14px; line-height: 18px; }
/* THE BAG: one dark tray, every slot a well on it (one edge a well: an empty one in the tray's own lifted shade, a held one in its rarity) */
.inv.dock .inv-bag { display: flex; flex-direction: column; gap: 6px; }
.inv.dock .inv-foot { margin: 0; min-height: 36px; gap: 10px; }
.inv.dock .inv-grid { display: grid; grid-template-columns: repeat(var(--icols), var(--s)); gap: var(--igap); padding: 8px; justify-content: start; background: #0a0605; box-shadow: 0 0 0 2px #0d0907; }
.inv.dock .inv-grid .slot.empty { background: #17100c; box-shadow: 0 0 0 2px #2b2018; }
.inv.dock .inv-eq.side .slot.empty { background: rgba(10,6,5,.72); box-shadow: 0 0 0 2px #2b2018; }
.inv.dock .inv-grid .slot.empty.over { background: #33261d; }
.inv-purse { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; }
.inv-purse .ic { width: 22px; height: 22px; flex: none; } .inv-purse .ic svg { width: 100%; height: 100%; display: block; }
.inv-purse b { font: 400 20px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffe08a; text-shadow: var(--out); }
.inv-purse span { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: #cbbd9e; }
.inv-purse .press { margin-left: auto; }
/* THE CARD of the chosen piece: out on the window's left where the glass has room (renderInv gives it its width), else over the hero side */
.inv.inv-fly { display: block; position: absolute; right: calc(100% + 10px); top: 0; width: 330px; max-height: 100%; overflow-y: auto; z-index: 4; pointer-events: auto;
  background: #140d0a; box-shadow: 0 0 0 3px #0d0907, 0 14px 30px rgba(0,0,0,.6); }
/* no room beside the window (a phone with a notch, a wide bag): the card is a sheet over the window's body, the shop's own phone pattern */
.inv.inv-fly.over { left: 0; right: 0; bottom: 0; width: auto; max-height: none; box-shadow: none; }
.inv.inv-fly.over .inv-card { max-width: 440px; margin: 0 auto; min-height: 100%; box-sizing: border-box; }
.inv.inv-fly .inv-card { background: none; padding: 14px; }
.inv.inv-fly .ic-head { padding-right: 34px; }
.fly-x { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; padding: 7px; border: 0; cursor: pointer; background: #2a1c12; box-shadow: 0 0 0 2px #0d0907; }
.fly-x svg { width: 100%; height: 100%; display: block; } .fly-x:hover { filter: brightness(1.25); }

#modal.iw[data-kind="inv"] .panel { right: max(8px, env(safe-area-inset-right)); height: auto; max-height: calc(100dvh - 16px);
  width: calc((var(--icols) + 2) * var(--s) + (var(--icols) - 1) * var(--igap) + 162px); /* hero 2s + 120, bag + 12, the gap 10, the body 20 */ }
#modal.iw[data-kind="inv"] .body { padding: 10px 10px 8px; }
#modal.iw[data-kind="inv"] .p-scroll { scrollbar-width: none; } #modal.iw[data-kind="inv"] .p-scroll::-webkit-scrollbar { display: none; } /* a bag past the glass scrolls under the finger; a bar would cut its last column */
#modal.iw[data-kind="inv"] .body > .p-head { margin: -10px -10px 6px; padding: 5px 56px 5px 8px; }
#modal.iw[data-kind="inv"] .body > .p-head h2 { font-size: 22px; line-height: 24px; }
#modal.iw[data-kind="inv"] .body > .p-head p { display: none; } /* the side-by-side cut has no height for the head's line: a tap shows the card, and the card names its presses */
#modal.iw[data-kind="inv"] .p-emb { width: 40px; height: 40px; padding: 4px; }
#modal.iw[data-kind="inv"] .panel .x { right: 6px; top: 6px; width: 44px; height: 44px; }
#modal.iw .inv.dock { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
#modal.iw .inv.dock .inv-hero { flex: none; width: calc(2 * var(--s) + 120px); gap: 5px; }
#modal.iw .inv-doll { grid-template-columns: var(--s) 80px var(--s); align-items: stretch; gap: 6px; padding: 8px 14px; } /* 2s + 80 + 12 + 28 = the hero side's 2s + 120 */
#modal.iw .inv.dock .inv-eq.side { gap: 4px; }
#modal.iw .inv-who b { font-size: 17px; line-height: 19px; } #modal.iw .inv-who span { font-size: 11.5px; line-height: 14px; }
#modal.iw .inv.dock .inv-eq.side .eq { font-size: 10px; line-height: 12px; gap: 1px; }
#modal.iw .inv.dock .inv-stats > div { grid-template-columns: 16px auto; column-gap: 4px; padding: 2px 0; background: none; } /* his three numbers stand bare here: a 66 px cell cannot keep a word 6 px off its own edge */
#modal.iw .inv.dock .inv-stats .ic { width: 16px; height: 16px; }
#modal.iw .inv.dock .inv-stats b { font-size: 15px; line-height: 15px; } #modal.iw .inv.dock .inv-stats span:last-child { font-size: 10px; line-height: 12px; }
#modal.iw .inv.dock .inv-bonus .bt { padding: 1px 6px; font-size: 11px; line-height: 16px; }
#modal.iw .inv.dock .inv-bag { flex: none; gap: 4px; }
/* 0.11.1 THE PAGE NUMBERS ON THE SIDE-BY-SIDE CUT: a column of four beside the slots (the bag's four rows are exactly four numbers tall),
   so the window grows one slot wider and not one pixel taller (a row under the slots pushed the gold and Your Items under a 390 px glass) */
#modal.iw[data-kind="inv"] .panel { width: calc((var(--icols) + 3) * var(--s) + (var(--icols) - 1) * var(--igap) + 168px); } /* + the numbers' column (s) and its gap (6) */
#modal.iw .inv.dock .inv-bag { display: grid; grid-template-columns: auto var(--s); grid-template-areas: "foot foot" "grid pg" "purse purse"; column-gap: 6px; row-gap: 4px; }
#modal.iw .inv.dock .inv-foot { grid-area: foot; } #modal.iw .inv.dock .inv-grid { grid-area: grid; } #modal.iw .inv.dock .inv-purse { grid-area: purse; }
#modal.iw .inv.dock .inv-pgrow { grid-area: pg; display: flex; flex-direction: column; justify-content: flex-start; padding: 6px 0; }
#modal.iw .inv.dock .inv-foot .inv-pgs { display: none; } /* this cut shows the column, never both */
#modal.iw .inv.dock .inv-pgs { flex-direction: column; gap: var(--igap); }
#modal.iw .inv.dock .inv-pg { width: var(--s); height: var(--s); font-size: 19px; }
#modal.iw .inv.dock .inv-grid { padding: 6px; }
#modal.iw .inv.dock .inv-foot { min-height: 0; }
#modal.iw .inv.dock .inv-foot h4 { display: block; }
#modal.iw .inv.inv-fly { display: block; right: calc(100% + 8px); }
#modal.iw .inv.inv-fly.over { right: 0; }
#modal.iw .inv .inv-grid .slot.sel, #modal.iw .inv .inv-eq .slot.sel { transform: none; } /* the tray's 6 px has no room for the lift: the ring and the lit well say chosen */
#modal.iw .inv.dock .inv-hero { position: sticky; top: 0; } /* a bag too tall for the glass scrolls beside him, never with him */
#modal.iw .inv.inv-fly .inv-card { padding: 8px 10px; }
#modal.iw .fly-x { width: 44px; height: 44px; padding: 12px; right: 6px; top: 6px; }
#modal.iw .inv.inv-fly .ic-head { padding-right: 46px; }
/* the Mount press on the bar (0.12): a book-sized press beside Stats on the PC cut, a 44 px tile left of the Stats press on the phone cut; the bar is centred on what it holds */
.act.mtk { width: 48px; height: 48px; }
.act.mtk .nm { font-size: 9.5px; bottom: 6px; } .act.mtk .ic { left: 22%; top: 7%; width: 56%; height: 54%; } .act.mtk .ic svg { display: block; width: 100%; height: 100%; } .act.mtk .key { left: 3px; top: 3px; min-width: 15px; height: 15px; font-size: 10px; }
.act.mtk.on .aslot { filter: brightness(1.45) saturate(1.2); } .act.mtk.on .nm { color: #c8f7c0; }
.act.mtk[hidden] { display: none; }
body.has-mount #acts { left: max(50%, calc(var(--u) * 2 + var(--blade) + (var(--act) * 7 + var(--atk) + 96px + 168px) / 2)); } /* + the Mount press (48) and its 12 px gap */
body.touch.has-mount #acts { left: auto; }
body.touch .act.mtk { right: 281px; bottom: 168px; width: 44px; height: 44px; } /* left of the Stats press, 6 px apart */
#sto-mounts h3 { display: flex; align-items: baseline; gap: 8px; } #sto-mounts h3 small { flex: 1; min-width: 0; margin-left: 0; } #sto-mounts h3 small .sh { display: none; }
body.touch #sto-mounts h3 small .lg, body.short #sto-mounts h3 small .lg { display: none; } body.touch #sto-mounts h3 small .sh, body.short #sto-mounts h3 small .sh { display: inline; }

/* ------------------------------------------------------------------ 0.12 THE MANA, THE POTIONS, THE COUNTER'S BOX (his orders 2026-10-11)
   THE MANA BAR stands right over the blade and ends where the blade's steel ends: its drop under the guard's line, a dark channel in a
   rim of its own deepest shade, the pool in Mana's blue lit from above, a pale trail where a cost stood, the figure and the word. */
#pots { display: flex; gap: 8px; }
#pots:empty { display: none; }
.act.pot { width: 48px; height: 48px; pointer-events: auto; cursor: pointer; }
.act.pot .ic { left: 14%; top: 10%; width: 72%; height: 78%; }
.act.pot .key { left: 3px; top: 3px; min-width: 15px; height: 15px; font-size: 10px; }
.act.pot .cd b { font-size: 16px; margin-top: 0; }
.act.pot .pcnt { position: absolute; right: 3px; bottom: 2px; z-index: 3; font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 14px; line-height: 1; color: #fff4cf; text-shadow: var(--out); pointer-events: none; }
.act.pot.few .pcnt { color: #ffb45a; }
.act.pot.none .pcnt { color: #ff8a7a; }
.act.pot.none .ic { filter: grayscale(.85) brightness(.6); }
#mana { position: relative; display: flex; align-items: center; box-sizing: border-box; width: var(--blade); height: 26px; padding-left: 24px; margin-bottom: -2px; }
#mana[hidden] { display: none; }
#mana .mic { flex: none; width: 26px; height: 26px; margin-right: -6px; position: relative; z-index: 1; }
#mana .mic svg { display: block; width: 100%; height: 100%; }
#mana .mtrack { position: relative; flex: 1; height: 16px; background: #0a111d; box-shadow: 0 0 0 2px #05080f; overflow: hidden; }
#mana .mtrail { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #d6ebff; opacity: .9; }
#mana .mfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#b4e0ff 0, #6ab4ff 42%, #3478dc 43%, #2452b8 100%); box-shadow: 1px 0 0 #eaf6ff; }
#mana .msweep { position: absolute; top: 0; bottom: 0; left: -46px; width: 46px; opacity: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0)); pointer-events: none; }
#mana.gain .msweep { animation: manaSweep .6s ease-out; }
@keyframes manaSweep { 0% { left: -46px; opacity: 1; } 100% { left: 100%; opacity: 0; } }
#mana .v { position: absolute; left: 12px; top: 0; bottom: 0; display: flex; align-items: center; font-family: 'Lilita One', 'Lalezar'; font-weight: 400; text-shadow: var(--out); white-space: pre; pointer-events: none; }
#mana .v .mv { font-size: 13px; color: #fff; }
#mana .v .mm { font-size: 11px; color: #dcecff; }
#mana .mname { position: absolute; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; font-family: 'Lilita One', 'Lalezar'; font-size: 11px; color: #dcecff; text-shadow: var(--out); pointer-events: none; }
#mana.low .mfill { animation: manaBeat .9s ease-in-out infinite; }
@keyframes manaBeat { 50% { filter: brightness(1.55); } }
#mana.deny { animation: bshake .16s linear; }
body.touch #mana, body.short #mana { height: 22px; padding-left: 21px; }
body.touch #mana .mic, body.short #mana .mic { width: 22px; height: 22px; margin-right: -5px; }
body.touch #mana .mtrack, body.short #mana .mtrack { height: 14px; }
body.touch #mana .v .mv, body.short #mana .v .mv { font-size: 12px; } body.touch #mana .v .mm, body.short #mana .v .mm { font-size: 10px; }
@media (prefers-reduced-motion: reduce) { #mana.low .mfill, #mana.gain .msweep { animation: none; } }
/* THE SHORT GLASS (the phone, a short window): the potions stand SIDEWAYS, beside the gold and over the right end of the Mana bar, so the column grows by nothing and the doors above it keep their room; a slot there is its own box (the phone lays every other act out by hand) */
body.touch .act.pot { position: relative; }
body.touch #pots, body.short #pots { position: absolute; right: 0; bottom: 66px; }
/* a skill's Mana cost on its slot; the slot dims while he holds less */
.act .mpc { position: absolute; right: 4px; top: 4px; z-index: 3; font-family: 'Lilita One', 'Lalezar'; font-weight: 400; font-size: 11px; line-height: 1; color: #a8d6ff; text-shadow: var(--out); pointer-events: none; }
.act.locked .mpc { display: none; }
.act.nomana .ic { filter: saturate(.3) brightness(.62); }
.act.nomana .mpc { color: #ff9a8a; }
#acttip .mpl, .skc .mpl { display: block; color: #a8d6ff; }
/* THE COUNTER: one closed tray of square wells (the Skins tab's grammar); a name shows only under the pointer */
.mw-grid { align-self: flex-start; display: grid; grid-template-columns: repeat(6, 64px); gap: 8px; padding: 10px; background: #120d0a; box-shadow: inset 0 0 0 2px #2c231d; }
.slot.mslot { position: relative; width: 64px; height: 64px; padding: 5px 5px 15px; overflow: visible; }
.slot.mslot.empty { padding: 0; }
.slot.mslot.pslot { --ti: #4a3a2e; background: #17110d; box-shadow: 0 0 0 3px #3a2e24; }
.slot.big.pslot { background: #17110d; box-shadow: 0 0 0 3px #3a2e24; }
.slot.mslot .mpr { position: absolute; left: 0; right: 0; bottom: 2px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 2px; font: 400 12px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; font-style: normal; color: #ffe08a; text-shadow: 0 0 2px #000, 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; pointer-events: none; }
.slot.mslot .mpr .pm { width: 12px; height: 12px; display: block; } .slot.mslot .mpr .pm svg { display: block; width: 100%; height: 100%; }
.slot.mslot .mtip { display: none; position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%); z-index: 6; padding: 5px 9px; background: #0d0907; box-shadow: 0 0 0 2px #2c231d; font: 400 13px/1.15 'Lilita One', 'Lalezar', system-ui, sans-serif; white-space: nowrap; text-shadow: 0 1px 0 #000; pointer-events: none; }
.slot.mslot:hover .mtip, .slot.mslot:focus-visible .mtip { display: block; }
.slot.mslot:focus-visible { outline: 2px solid #ffe08a; outline-offset: 2px; }
body.touch .mw-grid, body.short .mw-grid { grid-template-columns: repeat(6, 52px); gap: 6px; padding: 8px; }
body.touch .slot.mslot, body.short .slot.mslot { width: 52px; height: 52px; padding: 4px 4px 13px; }
body.touch .slot.mslot:has(.cmk) .mpr, body.short .slot.mslot:has(.cmk) .mpr { right: 16px; } /* 0.12.4: on the 52 px slot the centred price ran under the class mark in its corner (15 x 12 px crossed): the price takes the lane left of it */
@media (max-width: 620px) { .mw-grid { grid-template-columns: repeat(4, 52px); } }

/* ---- 0.12 THE PHONE DOORS, ONE GRID (his 2026-10-11, over the phone cut: "THESE BUTTONS" / "NEED TO BE PERFECTLY ALIGNED" / "SMALLER" /
   "AND IN BETTER ROW STYLING"). MEASURED BEFORE on an 844 x 390 glass: seven doors in three ragged columns (the Store 96 wide over 52 px
   doors, a 20 px step under it so the first column's rows stood 10 px lower than the second's, Settings alone in a third column out at
   x 230, past the left 20% line at 169), a 220 x 195 block; and Stats / Skills 44 px squares 6 px above the skill row's line with the
   French "Competences" cut by its own tile. NOW: ONE GRID of three 50 px columns and 44 px faces (the touch floor read 2026-10-11: 44 pt,
   48 dp; a press is never under it), 4 px between, the Store exactly two cells wide: rows Store + Hero / Inventory, Party, Friends /
   Rankings, Settings. 158 x 149 px (it was 220 x 195), inside the left 20% line, every column and row on one edge. The 9 px word stays on
   every door (a door wears its picture and its word): the widest in the four languages is 44.5 px ("Parametres"), 2.75 px clear of both
   edges of a 50 px door. A 3-column grid that gave every word the audit's 6 px would need 57 px doors, past the 20% line.
   DIALS: the three numbers below (--dw the column, --door the face's height, the gap). */
body.touch #doors, body.short #doors { --dw: 50px; --dg: 4px; display: grid; grid-template-columns: repeat(3, var(--dw)); gap: var(--dg); max-height: none; align-items: start; }
body.touch #doors .door, body.short #doors .door { --door: 44px; --lip: 3px; --ic: 26px; --icx: 12px; --icy: 3px; --wfs: 9px; --wb: 4px; width: var(--dw); margin: 0; }
body.touch #doors .d-store, body.short #doors .d-store { grid-column: span 2; width: calc(var(--dw) * 2 + var(--dg)); --ic: 32px; --icx: 6px; --icy: 6px; --wfs: 16px; }
html[lang="fr"] body.touch #doors .d-store, html[lang="fr"] body.short #doors .d-store { --wfs: 13px; }
/* Stats and Skills: one row of two equal tiles on the top skill's centre line (y 173 on a 390 glass; Recall is set 2 px lower, onto the same
   line), the Skills book's right edge on the fifth skill's right edge, the doors' 4 px between the two. 58 wide because the word must
   stand whole in every language ("Competences" is 51 px at 9 px: 3.5 px clear); 44 tall, the floor. */
body.touch .act.sbook { right: 152px; bottom: 157px; width: 58px; height: 44px; }
body.touch .act.stbook { right: 214px; bottom: 157px; width: 58px; height: 44px; }
body.touch .act.rc { bottom: 155px; }
body.touch .act.sbook .nm, body.touch .act.stbook .nm { font-size: 9px; bottom: 5px; }
body.touch .act.sbook .ic, body.touch .act.stbook .ic { left: 28%; top: 6%; width: 44%; height: 54%; }

/* ---- 0.13 THE ADVENTURER RANK (his 2026-10-11 "CHANGE THE PLAYERS RANKS ... TO THINGS LIKE Bronze Silver Gold Platium ... Mithrial" / "WITH THE
   ICON OF THOSE RANKS METAL" / "REMODEL THE BOUNTY TAB COMPLETELY"): the drawn tag (rankart.js), the Bounty Board's rank band and its table of
   the fifteen trials (a column a metal), the profile's rank card, the Hero window's Rank tab, the Rank Up card. --mk is the metal's own ink
   (rules.js ADV_METALS), set on each piece; it never touches the page's --ink. */
.rtag { display: block; width: 100%; height: 100%; overflow: visible; }
#modal[data-kind="bounty"] .panel { width: min(1120px, calc(100vw - 24px)); }
.adv-me { display: grid; grid-template-columns: 76px minmax(170px, auto) minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 5px 10px 5px 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mk) 26%, #17110e) 0%, #17110e 62%); box-shadow: 0 0 0 3px #3a2618; }
.adv-tag { width: 76px; height: 76px; display: block; filter: drop-shadow(0 4px 5px rgba(0,0,0,.55)); }
.adv-k { font: 800 12px Nunito, 'Cairo', system-ui, sans-serif; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.adv-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.adv-who b { font: 400 36px/1.05 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--mk); text-shadow: var(--out); }
.adv-who > span:last-child { font-size: 13px; font-weight: 800; color: #e8dcc0; }
.adv-next { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 12px; background: rgba(0,0,0,.36); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.adv-next b { font: 400 21px/1.12 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: var(--out); }
.adv-earn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: #e8dcc0; } .adv-earn .rk-ink { font-size: 18px; text-shadow: var(--out); }
.adv-note { font-size: 13px; color: var(--dim); } .adv-next.shut .adv-note span:last-child { color: #ffb89a; font-weight: 800; }
.adv-me.small { grid-template-columns: 64px minmax(130px, auto) minmax(0, 1fr); gap: 2px 12px; padding: 6px 10px 6px 6px; margin-bottom: 8px; }
.adv-me.small .adv-tag { width: 64px; height: 64px; } .adv-me.small .adv-who b { font-size: 26px; } .adv-me.small .adv-next b { font-size: 17px; }
/* today's three, side by side as notices: the picture and the ask, its bar, its pay, its one press across the foot */
.adv .btys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adv .bty { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 5px 10px; padding: 8px 10px; }
.adv .bty-main { gap: 4px; } .adv .bty .bty-act .press { min-height: 38px; height: 38px; }
.adv h3 { margin: 10px 0 5px; } .adv .rk-say { margin: 0 0 6px; } .adv .foot { margin: 6px 2px 0; }
.adv .bty-ic { width: 44px; height: 44px; } .adv .bty-main > b { font-size: 17px; line-height: 1.15; }
.adv .bty .bty-act { grid-column: 1 / -1; } .adv .bty .bty-act .press { width: 100%; }
/* the fifteen trials */
.adv-ladder { display: grid; grid-auto-flow: column; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--per, 3), auto); gap: 6px 8px; margin-bottom: 4px; } /* --per: the steps a metal has (rules ADV.per), set by the builder */
.adv-col { display: contents; }
.adv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 10px; font: 400 17px/1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--mk); text-shadow: var(--out);
  background: color-mix(in srgb, var(--mk) 22%, #17110e); box-shadow: 0 0 0 2px #0d0907; }
.adv-head i { font: 800 12.5px/1 Nunito, 'Cairo', system-ui, sans-serif; font-style: normal; color: #d9ccb2; text-shadow: none; direction: ltr; white-space: nowrap; } .adv-head.all i { color: #a6e8b0; }
.hw .adv-head { flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; } /* the Adventurer window's columns are narrow: the count stands under its metal */
.adv-cell { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 3px 8px; align-items: center; padding: 5px 8px; min-height: 66px; background: rgba(24,16,12,.84); box-shadow: 0 0 0 2px #3a2618; }
.adv-ct { width: 46px; height: 46px; display: block; }
.adv-cw { display: flex; flex-direction: column; min-width: 0; line-height: 1.16; }
.adv-cw b { font: 400 16px/1.1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--mk); text-shadow: var(--out); }
.adv-boss { font-size: 13.5px; font-weight: 800; color: #fff4dc; overflow-wrap: anywhere; }
.adv-at { font-size: 12.5px; color: #d9ccb2; overflow-wrap: anywhere; } .adv-lv { font-size: 12px; font-weight: 800; color: var(--dim); }
.adv-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; }
.adv-cell em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--dim); }
.adv-cell.won { background: color-mix(in srgb, var(--mk) 17%, #17110e); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mk) 62%, #0d0907); } .adv-cell.won em { color: #a6e8b0; }
.adv-cell.now { background: linear-gradient(180deg, #2a5a92, #173a66); box-shadow: 0 0 0 2px #7cc4ff, 0 4px 14px rgba(60,140,230,.35); }
.adv-cell.now em { color: #ffffff; } .adv-cell.now .adv-at { color: #e2eeff; } .adv-cell.now .adv-lv { color: #cfe2ff; }
.adv-cell.far .adv-ct { filter: saturate(.4) brightness(.74); } .adv-cell.far .adv-cw b { opacity: .82; }
.hw .adv-cell { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; text-align: center; padding: 6px 4px; } .hw .adv-cw { align-items: center; } .hw .adv-foot { justify-content: center; } .hw .adv-ladder { gap: 6px; }
/* the Hero window's own line: the tag beside the rank */
.hid-rank { display: flex; align-items: center; justify-content: center; gap: 6px; } .hid-tag { width: 34px; height: 34px; display: block; flex: none; }
/* the profile's rank card */
.prf-adv { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 6px 12px 6px 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mk) 26%, #17110e), rgba(0,0,0,.32) 72%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.prf-tag { width: 64px; height: 64px; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.prf-advw { display: flex; flex-direction: column; min-width: 0; } .prf-advw b { font: 400 28px/1.05 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--mk); text-shadow: var(--out); }
.prf-advw > span:last-child { font-size: 12.5px; color: var(--dim); }
.prf-advn { display: flex; flex-direction: column; min-width: 0; justify-self: end; text-align: end; } .prf-advn > span:last-child { font: 400 16px/1.15 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; }
/* the Rank Up card (the promotion's own moment, at the top of the glass, where the gate's banner stands after it) */
#advcard { --mk: #ffd27a; position: fixed; top: calc(14px + var(--st)); left: 50%; transform: translateX(-50%); z-index: var(--z-moment); pointer-events: none;
  width: min(600px, calc(100vw - 32px)); display: grid; grid-template-columns: 124px 1fr; gap: 16px; align-items: center; padding: 12px 20px 12px 12px;
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--mk) 30%, #17110e) 0%, #17110e 60%); box-shadow: 0 0 0 2px #0d0907; }
#advcard.show { animation: gpIn .42s cubic-bezier(.25, 1.3, .45, 1) both; } #advcard.out { animation: gpOut .38s ease-in forwards; }
.ac-well { width: 124px; height: 124px; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--mk) 75%, transparent) 0%, transparent 70%); }
.ac-tag { width: 108px; height: 108px; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)); }
#advcard.show .ac-tag { animation: acPop .55s cubic-bezier(.2, 1.5, .4, 1) .08s both; }
@keyframes acPop { from { transform: scale(.3) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ac-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-kick { font: 800 13px Nunito, 'Cairo', system-ui, sans-serif; color: #fff4dc; text-transform: uppercase; letter-spacing: .8px; }
.ac-name { font: 400 38px/1.02 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--mk); text-shadow: var(--out); }
.ac-line { font-size: 14px; color: #e8dcc0; } .ac-next { font-size: 13.5px; color: var(--dim); } .ac-next .rk-ink { font-size: 15px; } .ac-pay .chip { font-size: 15px; } .ac-pay .chip b { font-weight: 800; }
@media (prefers-reduced-motion: reduce) { #advcard.show .ac-tag { animation: none; } }
/* the short glass and the phone: the band keeps its three parts, each smaller; the table keeps its five columns (a landscape phone is wide) */
body.touch .adv-me, body.short .adv-me { grid-template-columns: 60px minmax(110px, auto) minmax(0, 1fr); gap: 2px 10px; padding: 6px 8px 6px 6px; }
body.touch .adv-tag, body.short .adv-tag { width: 60px; height: 60px; } body.touch .adv-who b, body.short .adv-who b { font-size: 24px; }
body.touch .adv-next, body.short .adv-next { padding: 5px 8px; gap: 1px; } body.touch .adv-next b, body.short .adv-next b { font-size: 16px; }
body.touch .adv-note, body.short .adv-note { font-size: 12px; } body.touch .adv-earn, body.short .adv-earn { font-size: 12.5px; }
body.touch .adv .btys, body.short .adv .btys { gap: 6px; } body.touch .adv .bty, body.short .adv .bty { grid-template-columns: 40px minmax(0, 1fr); padding: 8px; gap: 6px 8px; }
body.touch .adv .bty-main > b, body.short .adv .bty-main > b { font-size: 14.5px; } body.touch .adv .bty-ic, body.short .adv .bty-ic { width: 40px; height: 40px; }
body.touch .adv-ladder, body.short .adv-ladder { gap: 4px 5px; }
body.touch .adv-cell, body.short .adv-cell { grid-template-columns: 36px minmax(0, 1fr); gap: 2px 6px; padding: 4px 6px; min-height: 60px; }
body.touch .adv-ct, body.short .adv-ct { width: 36px; height: 36px; } body.touch .adv-cw b, body.short .adv-cw b { font-size: 14px; }
body.touch .adv-boss, body.short .adv-boss { font-size: 12.5px; } body.touch .adv-at, body.short .adv-at { font-size: 12px; } body.touch .adv-head, body.short .adv-head { font-size: 15px; padding: 4px; }
body.touch .prf-adv, body.short .prf-adv { grid-template-columns: 48px auto minmax(0, 1fr); padding: 4px 8px 4px 4px; } body.touch .prf-tag, body.short .prf-tag { width: 48px; height: 48px; }
body.touch .prf-advw b, body.short .prf-advw b { font-size: 21px; } body.touch .prf-advn > span:last-child, body.short .prf-advn > span:last-child { font-size: 13.5px; }
body.touch #advcard, body.short #advcard { grid-template-columns: 76px 1fr; gap: 10px; padding: 8px 12px 8px 8px; }
body.touch .ac-well, body.short .ac-well { width: 76px; height: 76px; } body.touch .ac-tag, body.short .ac-tag { width: 66px; height: 66px; } body.touch .ac-name, body.short .ac-name { font-size: 26px; }
@media (max-width: 640px) { .adv .btys { grid-template-columns: minmax(0, 1fr); } .adv-ladder { grid-template-columns: repeat(5, minmax(108px, 1fr)); overflow-x: auto; } .adv-me { grid-template-columns: 60px minmax(0, 1fr); } .adv-me .adv-next { grid-column: 1 / -1; } }
/* 0.13.1 "Adventurer" on its HUD door: ten letters where "Hero" stood. The same tile and picture; the word half a step smaller and a touch tighter so it
   stands clear of both edges, never cut (Arabic keeps its own spacing: its letters join). */
.door.d-hero { --wfs: 11px; } html:not([lang="ar"]) .door.d-hero .w { letter-spacing: -.35px; }
html:not([lang="ar"]) body.touch .door.d-hero .w, html:not([lang="ar"]) body.short .door.d-hero .w { letter-spacing: -.7px; }

/* 0.14 THE BOUNTY GIVER'S WINDOW (main.js renderGiver): the Bounty Board's own ground and frame; the contract book in two panes */
#modal[data-kind="giver"] { --pbg: url('/art/panel_tavern.webp'); --pb: #a8462e; --pbd: #4a1a0e; }
#modal[data-kind="giver"] .panel { width: min(1120px, calc(100vw - 24px)); height: auto; min-height: min(360px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
#modal[data-kind="giver"] .body { height: auto; flex: 1 1 auto; min-height: 0; }
.fx-none { margin: 2px 2px 4px; font-size: 14px; font-weight: 800; color: var(--dim); }
.fx-book { display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: 12px; align-items: start; }
.fx-worlds { display: flex; flex-direction: column; gap: 4px; max-height: min(52vh, 470px); overflow-y: auto; padding: 2px 4px 2px 2px; }
.fx-w { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 46px; padding: 3px 10px 3px 4px; text-align: left; color: #fff4dc; background: rgba(24,16,12,.84); box-shadow: 0 0 0 2px #3a2618; cursor: pointer; }
.fx-w.sel { background: color-mix(in srgb, var(--mk) 22%, #1a120d); box-shadow: 0 0 0 2px var(--mk); }
.fx-w.off { opacity: .6; } .fx-w.full .fx-wc b { color: #7fe08a; }
.fx-wt { width: 36px; height: 36px; display: block; } .fx-wt svg { width: 100%; height: 100%; display: block; }
.fx-wn { display: flex; flex-direction: column; min-width: 0; } .fx-wn b { font: 400 16px/1.1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; overflow-wrap: anywhere; } .fx-wn span { font-size: 12px; font-weight: 800; color: var(--dim); }
.fx-wc { display: flex; align-items: baseline; gap: 3px; } .fx-wc b { font: 400 18px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #ffe08a; } .fx-wc i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--dim); }
.fx-lines { min-width: 0; }
.fx-head { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; padding: 8px 12px; background: rgba(0,0,0,.36); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.fx-head b { font: 400 22px/1.1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #fff4cf; text-shadow: var(--out); } .fx-head span { font-size: 13.5px; font-weight: 800; color: #e6d9bf; }
.fx-k { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 900; letter-spacing: .02em; color: #ffcf6a; }
.fx-pips { display: inline-flex; gap: 4px; } .fx-pips i { width: 9px; height: 9px; background: #2a1c12; box-shadow: 0 0 0 1px #6a4c30; } .fx-pips i.on { background: #e2b44a; } .fx-pips i.now { background: #7cc4ff; }
.fxc.mine { box-shadow: 0 0 0 3px #4f7fb8; } .fxc.mine.done { box-shadow: 0 0 0 3px #e2b44a; }
.fxc .bty-ic svg { width: 86%; height: 86%; }
.bty-pay .chip.fx-title { color: #ffcf6a; }
.fx .tv-lock { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; color: var(--dim); } .fx .tv-lock .ic { width: 20px; height: 20px; }
body.touch .fx-book, body.short .fx-book { grid-template-columns: 208px minmax(0, 1fr); gap: 8px; }
body.touch .fx-worlds, body.short .fx-worlds { max-height: 288px; } /* six whole worlds at once: 6 x 44 + 5 gaps of 4 */
body.touch .fx-w, body.short .fx-w { grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 44px; padding: 2px 6px 2px 3px; gap: 6px; } body.touch .fx-wt, body.short .fx-wt { width: 30px; height: 30px; }
body.touch .fx-wn b, body.short .fx-wn b { font-size: 14px; } body.touch .fx-head b, body.short .fx-head b { font-size: 18px; } body.touch .fx-head, body.short .fx-head { padding: 5px 8px; margin-bottom: 6px; }

/* 0.13.2 THE HAIR AND SKIN ROWS OF THE CREATE CARD, AND THE COLOUR SELECTOR (his 2026-10-11 "the hair and skin color looks too close from each
   other and cheap UI DESIGN" / "ALLOW THE PLAYER TO ALSO SELECT A MANUAL COLOR FROM A COLOR SELECTOR"). Each row stands on its own plate (told
   apart by a lighter face and the space between, never a line); a swatch is a drawn lock of hair or a drawn head on a dark well (main.js
   swHair / swSkin); the last cell of a row is the colour selector's door: a ring of every hue round the colour he chose. */
:root { --z-cpick: 64; } /* over the Appearance window (62), under the notices (70) */
.t-looks { gap: 8px; }
.t-looks .t-lrow { gap: 8px; padding: 6px 8px; background: #1c1512; }
.t-looks .t-lrow label { width: 38px; }
.sws { gap: 6px; }
.sw { position: relative; width: 32px; height: 32px; padding: 0; background: #2d221c; box-shadow: 0 0 0 2px #0b0706; cursor: pointer; transition: transform .08s; }
.sw svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.sw:hover { transform: translateY(-2px); }
.sw.on { background: #45352a; box-shadow: 0 0 0 2px #0b0706, 0 0 0 4px #ffe08a; transform: translateY(-2px); }
.sw.sw-x, .sw.sw-x.on, .cc-swatch.cc-exact { background: conic-gradient(from -90deg, #e5484d, #f2a53a, #f4e04d, #58c06a, #3fb8c9, #4a6fe0, #a45ad6, #e5484d); }
.sw.sw-x::before, .cc-swatch.cc-exact::before { content: ''; position: absolute; inset: 8px; background: var(--c, #17110e); box-shadow: 0 0 0 2px #0b0706; }
.sw:focus-visible { outline: 2px solid #ffe08a; outline-offset: 4px; }
@media (max-height: 520px) {
  .t-looks .t-lrow { padding: 0; background: none; }
  .sw { width: 44px; height: 44px; } .sw.sw-last { display: none; } /* four colours and the selector's door at the touch size */
  #title .t-looks .t-lrow label { display: none; } /* the drawn lock and the drawn head say which row is which (each row is named for a reader, main.js): the column keeps the width it had, so the class row beside Create Adventurer loses nothing */
  .sw.sw-x::before { inset: 11px; }
}
@media (max-width: 380px) { .sw.sw-last { display: none; } }
.cpk { position: fixed; left: 8px; top: 8px; z-index: var(--z-cpick); width: 288px; padding: 12px 12px 14px; background: #17110e; box-shadow: 0 0 0 2px #070403, 0 16px 36px rgba(0,0,0,.62);
  color: #f6ecd8; font: 700 13px/1.25 Nunito, 'Cairo', sans-serif; pointer-events: auto; user-select: none; -webkit-user-select: none; }
.cpk-head { margin: -2px 0 10px; font: 400 20px/1.1 'Lilita One', 'Lalezar', sans-serif; color: #ffe08a; }
.cpk-sv { position: relative; height: 148px; direction: ltr; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 2px #070403;
  background: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0)), var(--hue, #f00); }
.cpk-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.6); pointer-events: none; }
.cpk-hue { position: relative; height: 22px; margin-top: 12px; direction: ltr; touch-action: none; cursor: ew-resize; box-shadow: 0 0 0 2px #070403;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cpk-bar { position: absolute; top: -4px; bottom: -4px; width: 8px; margin-left: -4px; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.65); pointer-events: none; }
.cpk-sv:focus-visible, .cpk-hue:focus-visible { outline: 2px solid #ffe08a; outline-offset: 4px; }
.cpk-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.cpk-chip { display: flex; flex-direction: column-reverse; gap: 4px; font-size: 11px; color: #cdb995; }
.cpk-c { display: block; width: 52px; height: 32px; box-shadow: 0 0 0 2px #070403; }
.cpk-code { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; margin: 0; font-size: 11px; color: #cdb995; }
.cpk .cpk-code input { width: 100%; height: 32px; padding: 0 8px; border: 0; background: #0d0908; box-shadow: 0 0 0 2px #070403; color: #fff; font: 700 15px/1 Nunito, 'Cairo', sans-serif; letter-spacing: .5px; text-transform: uppercase; direction: ltr; user-select: text; -webkit-user-select: text; }
.cpk .cpk-code input.bad { color: #ff9c8c; }
.cpk-bad { margin: 6px 0 0; font-size: 12px; color: #ff9c8c; } .cpk-bad:empty { display: none; }
.cpk-foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 14px; }
.cpk-foot .press { min-height: 40px; padding: 0 8px 3px; font-size: 14px; }
@media (max-height: 520px), (pointer: coarse) {
  .cpk { width: 300px; padding: 10px 10px 12px; } .cpk-head { margin-bottom: 6px; font-size: 17px; }
  .cpk-sv { height: 104px; } .cpk-hue { height: 30px; margin-top: 10px; } .cpk-row { margin-top: 10px; } .cpk-foot { margin-top: 10px; } .cpk-foot .press { min-height: 44px; }
}
/* 0.13.2 THE LOOK COLUMN IS A NUMBER ON THE LANDSCAPE PHONE: it was "auto", so the longer "Create Adventurer" under it (it was "Create Hero")
   widened it by 44 px and the four class presses beside the press lost that room (their names were cut). The column is the swatch row's
   own width now (five 44 px cells and four 6 px gaps); the press takes the column and its words wrap inside it in a language that needs to. */
@media (max-height: 520px) and (min-width: 600px) {
  #f-register { grid-template-columns: minmax(0, 1fr) 275px 244px; }
  #title #r-go { padding-left: 8px; padding-right: 8px; font-size: 18px; line-height: 1.05; white-space: normal; }
  /* FOUR CLASSES IN THAT ROW (the Ninja made four of three: 124 px a press, "Swordsman" and "Magic damage" were cut on this glass): a
     smaller picture, the name one step down, and the role free to take a second line, so every word stands whole in every language */
  #title .t-cp { gap: 6px; padding: 0 5px 3px 4px; } #title .t-cpw { width: 30px; height: 30px; }
  #title .t-cpn { min-width: 0; } #title .t-cpn b { font-size: 14px; } #title .t-cpn i { font-size: 10px; line-height: 1.05; letter-spacing: 0; white-space: normal; }
}

/* ---------------------------------------------------------------- THE CHANNELS, THE GAME MENU, THE SOUNDS (his orders 2026-10-11)
   THE MARK ("A SMALL TEXT" / "OF YOUR CHANNEL" / "GREEN DOT" / "'Channel 1 'Green Dot"): outlined words with nothing behind them at the
   top left of the screen, a dot before them (a dot is a real circle: the one round thing here). The dot says the channel's state by
   colour, the list says it by word. It is a press: its box is taller than its words so a thumb finds it. On a phone the doors' grid
   keeps the corner, so the mark stands on the same top line just past it. DIALS: --chfs (the words), --chdot (the dot). */
#chchip { --chfs: 15px; --chdot: 9px; position: absolute; left: calc(var(--u) + var(--sl)); top: calc(var(--u) + var(--st)); display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 0 6px 0 2px; margin: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; color: #fff3cf; font: 400 var(--chfs)/1 'Lilita One', 'Lalezar', sans-serif; text-shadow: var(--out); -webkit-tap-highlight-color: transparent; }
#chchip:hover .chname, #chchip:focus-visible .chname { color: #fff; }
#chchip:active { transform: translateY(1px); }
.chdot { flex: none; width: var(--chdot, 10px); height: var(--chdot, 10px); border-radius: 50%; background: #4fd06a; box-shadow: 0 0 0 2px #0e080a, 0 0 6px rgba(79,208,106,.55); }
[data-s="busy"] > .chdot { background: #e2b44a; box-shadow: 0 0 0 2px #0e080a, 0 0 6px rgba(226,180,74,.5); }
[data-s="full"] > .chdot { background: #e0503f; box-shadow: 0 0 0 2px #0e080a, 0 0 6px rgba(224,80,63,.5); }
[data-s="shut"] > .chdot { background: #6b5d55; box-shadow: 0 0 0 2px #0e080a; } /* 0.14.9: closed by hand */
body.touch #chchip, body.short #chchip { --chfs: 13px; --chdot: 8px; min-height: 44px; left: calc(var(--u) + var(--sl) + 50px * 3 + 4px * 2 + 8px); top: var(--st); }

#modal[data-kind="menu"], #modal[data-kind="sounds"], #modal[data-kind="chan"] { --pbg: url('/art/panel_plaza.webp'); --pb: #4a4a58; --pbd: #18181f; }
/* THE GAME MENU: one narrow card, five presses of one size in one column, each its picture and its word */
#modal[data-kind="menu"] .panel, body.touch #modal[data-kind="menu"] .panel, body.short #modal[data-kind="menu"] .panel { width: min(340px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - 12px); }
.menu-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 6px 4px 4px; }
.menu-card h2 { margin: 0 0 4px; font-size: 28px; color: #ffe08a; text-shadow: var(--out); text-align: center; }
.menu-b { justify-content: flex-start; gap: 14px; width: 100%; min-height: 48px; padding-inline: 16px; font-size: 18px; }
.menu-b .ic { flex: none; width: 24px; height: 24px; display: inline-flex; } .menu-b .ic svg { width: 100%; height: 100%; }
body.short .menu-card { gap: 6px; } body.short .menu-b { min-height: 44px; } body.short .menu-card h2 { font-size: 22px; margin: 0; }
/* THE SOUNDS: a level is a row of twenty square steps, lit up to the share he hears; the figure beside its name says it exactly */
#modal[data-kind="sounds"] .panel { width: min(620px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - 24px); }
.snd { padding: 10px 12px 12px; margin: 0 0 8px; background: rgba(255,255,255,.035); box-shadow: inset 0 -1px 0 rgba(0,0,0,.4); }
.snd-h { display: flex; align-items: center; gap: 12px; }
.snd-v { flex: none; min-width: 64px; text-align: end; font: 400 26px/1 'Lilita One', 'Lalezar', sans-serif; color: #ffe08a; text-shadow: var(--out); }
.snd-r { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.snd-r .press { flex: none; min-width: 92px; min-height: 44px; }
.snd-bar { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; height: 44px; padding: 8px 0; cursor: pointer; touch-action: none; outline: none; }
.snd-bar:focus-visible { box-shadow: 0 0 0 2px #ffe08a; }
.snd-c { background: #241b15; box-shadow: inset 0 0 0 1px #0d0907; } .snd-c.on { background: #e2b44a; box-shadow: inset 0 0 0 1px #6a4f1a, inset 0 10px 0 rgba(255,255,255,.16); }
.list2.snd-steps { grid-template-columns: minmax(0, 1fr); margin: 0 0 8px; }
body.short .list2.snd-steps, body.touch .list2.snd-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* a short glass: Footsteps and Ambience share one line, so the two levels still stand without a scroll */
.list2.cred { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } body.short .list2.cred, body.touch .list2.cred { grid-template-columns: minmax(0, 1fr); }
.snd-foot { display: flex; justify-content: flex-end; margin-top: 4px; } .snd-foot .press { min-width: 140px; }
body.touch .snd-r .press, body.short .snd-r .press { min-width: 74px; padding: 0 8px 3px; }
body.short .snd { padding: 6px 10px 8px; margin-bottom: 6px; } body.short .snd-r { margin-top: 4px; } body.short .snd-v { font-size: 22px; }
/* THE CHANNELS: eight rows in two columns of four (1 to 4, then 5 to 8), so all eight stand at once on the desk and on the phone */
#modal[data-kind="chan"] .panel { width: min(820px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - 24px); }
.ch-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.ch-row { --chdot: 12px; gap: 12px; min-height: 60px; } .ch-row.here { background: rgba(79,208,106,.11); }
.ch-row .r-main b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ch-tag { font: 800 12px/1 Nunito, 'Cairo', sans-serif; font-style: normal; padding: 3px 7px; color: #fff; background: #2f6a3f; } .ch-tag.rec { background: #7a5a1c; }
.ch-row .press { flex: none; min-width: 78px; min-height: 44px; }
.ch-foot { margin: 10px 2px 0; color: var(--dim); font-size: 14px; }
body.short .ch-row { min-height: 48px; padding-block: 3px; } body.short .ch-foot { margin-top: 6px; font-size: 13px; }
/* on a desk glass under ~860 px the doors stand from the top (the 0.5 rule above): they start under the channel's mark, and give that band back */
@media (max-height: 860px) {
  body:not(.touch):not(.short) #doors { top: calc(var(--u) + var(--st) + 34px); max-height: calc(100dvh - var(--u) * 4 - var(--xph) - var(--vith, 198px) - var(--st) - var(--sb) - 34px); }
}
/* 0.14.7: the same on any taller desk glass where the centred column's foot would reach the vitals (main.js doorsFit sets body.doorstop;
   at 1920 x 900 the Rankings door stood on the Blade Points figure) */
/* 0.14.7 THE NAME CHANGE SCROLL's window: its picture beside one field, the answer under the field, the two presses on one line */
.ren { display: flex; gap: 16px; align-items: flex-start; margin: 4px 0 14px; } .ren-pic { flex: none; width: 96px; height: 96px; } .ren-pic svg { width: 100%; height: 100%; display: block; }
.ren-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .ren-l { font: 400 16px 'Lilita One', 'Lalezar', sans-serif; color: var(--gold); }
.ren-in { width: 100%; min-height: 46px; padding: 8px 12px; font: 800 20px Nunito, 'Cairo', sans-serif; color: #fff; background: #140d08; border: 2px solid #5a4632; border-radius: 0; outline: none; } .ren-in:focus { border-color: #c9a24a; }
.ren-say { min-height: 22px; margin: 0; font-size: 16px; color: #bfe8c8; } .ren-say.bad { color: #ffb4a8; } .ren-warn { margin: 0; font-size: 14px; color: var(--dim); }
.ren-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .ren-acts .press { min-height: 46px; }
body.touch .ren-pic, body.short .ren-pic { width: 64px; height: 64px; } body.touch .ren, body.short .ren { gap: 10px; margin-bottom: 8px; }
body.doorstop:not(.touch):not(.short) #doors { top: calc(var(--u) + var(--st) + 34px); transform: none; flex-wrap: wrap; align-content: flex-start;
  max-height: calc(100dvh - var(--u) * 4 - var(--xph) - var(--vith, 198px) - var(--st) - var(--sb) - 34px); }
.snd-h .ic.sq { width: 40px; height: 40px; flex: none; display: inline-flex; } .snd-h .ic.sq svg { width: 100%; height: 100%; }
.ch-row .r-main b span { font: inherit; color: inherit; }
/* THE DOOR'S LIST (2026-10-11, his "A SMALL CHANNEL SELECTION?" / "IT SHOULD BE AVAILABLE" / "TO THE GAME" / "ALWAYS"): the world's own mark on the
   sign-in screen, top left as in the world (a dot, "Channel n"), and its eight channels under it, all eight whole on every glass (one column on a tall glass, two of four on a short one).
   A row is one press; the one he will enter is filled, never ringed. Before the server's list arrives the dot is quiet (data-s="wait"). */
.t-chan { --chdot: 10px; pointer-events: auto; position: absolute; left: calc(16px + var(--sl)); top: calc(10px + var(--st)); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 4px; margin: 0; border: 0; background: none; cursor: pointer; color: #fff3cf; font: 400 17px/1 'Lilita One', 'Lalezar', sans-serif; text-shadow: var(--out); -webkit-tap-highlight-color: transparent; }
.t-chan:hover .chname, .t-chan:focus-visible .chname { color: #fff; } .t-chan:active { transform: translateY(1px); }
[data-s="wait"] > .chdot { background: #8c8478; box-shadow: 0 0 0 2px #0e080a; }
.t-chans { pointer-events: auto; position: fixed; /* an overlay, as the windows are: it lies over the stage while it is open */ left: calc(16px + var(--sl)); top: calc(10px + var(--st) + 46px); width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - var(--st) - var(--sb) - 72px); overflow-y: auto; padding: 12px; background: linear-gradient(180deg, rgba(38, 28, 22, .98), rgba(21, 15, 12, .98)); box-shadow: 0 0 0 2px #0b0706, 0 20px 50px rgba(0, 0, 0, .55); }
.t-chh { display: block; font: 400 22px/1 'Lilita One', 'Lalezar', sans-serif; color: #ffe08a; text-shadow: var(--out); }
.t-chp { margin: 6px 0 10px; font: 700 13px/1.3 Nunito, 'Cairo', sans-serif; color: #cdb995; }
.t-chl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } /* a tall glass: one narrow column of eight, clear of the sign-in card */
@media (max-height: 640px) { .t-chans { width: min(520px, calc(100vw - 32px)); } .t-chl { grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; } } /* a short glass: two columns of four, so all eight stand whole */
.t-chrow { --chdot: 11px; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 10px; margin: 0; border: 0; text-align: start; cursor: pointer; color: #f6ecd8; background: rgba(255,255,255,.045); font: 700 13px/1.25 Nunito, 'Cairo', sans-serif; }
.t-chrow:hover:not(:disabled) { background: rgba(255,255,255,.1); } .t-chrow.on, .t-chrow.on:hover:not(:disabled) { background: rgba(79,208,106,.18); }
.t-chrow:disabled { cursor: default; opacity: .6; }
.t-chw { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .t-chw b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 16px/1 'Lilita One', 'Lalezar', sans-serif; color: #fff3cf; } .t-chw b span { font: inherit; color: inherit; } .t-chw > span { color: #cdb995; }
.t-chwait { margin: 0; color: #cdb995; font: 700 14px Nunito, 'Cairo', sans-serif; }
@media (max-height: 520px) { .t-chan { font-size: 15px; top: calc(8px + var(--st)); } .t-chans { top: calc(var(--st) + 52px); padding: 8px 10px; max-height: calc(100dvh - var(--st) - var(--sb) - 60px); } .t-chh { font-size: 18px; } .t-chp { margin: 4px 0 6px; } .t-chrow { min-height: 44px; } }
body.touch .snd-foot, body.short .snd-foot { display: none; } /* a short glass: the window's own X closes it, and both levels stand without a scroll */

/* ---- THE RANKINGS: THE TWO BOARDS, AND EVERY ROW ITS RANK (2026-10-11, his "ALSO IMPROVE THE LEADERBOARD DRASTICALLY TO INCLUDE PLAYERS
   RANKS"). Everything here is scoped to the Rankings window (#modal[data-kind="top"]): the guild rankings share the .rk classes and keep
   their own cut. DIALS: --rkc (the PC row's columns, the heads read the same line), --rk-pod (the podium column's width). */
#modal[data-kind="top"] { --rkc: 50px 44px minmax(0, 1fr) 124px 116px 62px 66px; --rk-pod: 320px; }
/* the board switch stands in the window's head beside the title, so it costs the rows no height on either cut */
#modal[data-kind="top"] .body > .p-head .p-ht { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; }
#modal[data-kind="top"] .p-head .p-row { display: contents; }
#modal[data-kind="top"] .body > .p-head h2 { grid-column: 1; grid-row: 1; align-self: end; }
#modal[data-kind="top"] .body > .p-head p { grid-column: 1; grid-row: 2; align-self: start; }
/* the head on whole pixels in every language: the title and its line are 34 + 4 + 20 = the 58 px emblem beside them */
#modal[data-kind="top"] .body > .p-head h2 { line-height: 34px; } #modal[data-kind="top"] .body > .p-head p { line-height: 20px; }
.rk-boards { position: relative; grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.rk-boards .ftab { min-height: 44px; white-space: nowrap; }
/* the rank, as every board draws it: the metal's drawn tag beside the rank's word in the metal's ink */
.rk-adv, .pod-adv { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rk-tag { flex: none; display: block; width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); } .rk-tag svg { display: block; width: 100%; height: 100%; }
#modal[data-kind="top"] .rk-adv b, #modal[data-kind="top"] .pod-adv b { position: static; max-width: none; font: 400 16px/1.1 'Lilita One', 'Lalezar', system-ui, sans-serif; color: var(--mk); text-shadow: var(--out); white-space: nowrap; overflow-wrap: normal; }
#modal[data-kind="top"] .rk-adv.none b, #modal[data-kind="top"] .pod-adv.none b { font-size: 14px; }
/* the rows and their heads, one line of columns */
#modal[data-kind="top"] .rk-body { grid-template-columns: var(--rk-pod) minmax(0, 1fr); }
#modal[data-kind="top"] button.rk, .rk-head { display: grid; grid-template-columns: var(--rkc); column-gap: 10px; align-items: center; padding-left: 4px; padding-right: 12px; }
.rk-head { position: sticky; top: 0; z-index: 2; height: 28px; margin: 0 0 6px; box-sizing: border-box; background: #17100c; box-shadow: 0 0 0 2px #0d0907; font: 800 12px/1 Nunito, system-ui, sans-serif; color: var(--dim); }
.rk-head span { min-width: 0; white-space: nowrap; } .rk-head .on { color: #ffe08a; }
.rk-hn { text-align: center; } .rk-ha { grid-column: 2 / span 2; } .rk-hk, .rk-hl { text-align: end; }
#modal[data-kind="top"] .rk-cls { min-width: 0; } #modal[data-kind="top"] .rk-k { min-width: 0; } #modal[data-kind="top"] button.rk { text-align: start; }
/* WHOLE PIXELS: every line in a row and on the podium has a whole, even height, so a row is an even height and a face or a tag centred
   in it lands on a whole pixel (a 20.16 px name line put every row under a tall one on a part pixel) */
#modal[data-kind="top"] .rk-lv b { line-height: 1; } #modal[data-kind="top"] .rk-t b { overflow-wrap: anywhere; line-height: 20px; }
#modal[data-kind="top"] .rk-title { line-height: 16px; } #modal[data-kind="top"] .rk-tags { align-items: center; row-gap: 4px; }
#modal[data-kind="top"] .pod > b { line-height: 20px; } #modal[data-kind="top"] .pod-cls { line-height: 18px; } #modal[data-kind="top"] .pod-lv { line-height: 24px; }
/* the podium: each place its rank under its name, the tag over the word; the champion's a step bigger */
/* the crown's room over a face is a share of the crown (7/8 of it, less 2 px), which is a part pixel for a 38 or a 22 px crown: rounded here
   to the pixel so the faces and tags under it stand on whole pixels (a browser without round() keeps the share as it was; --cr is the podium frame's own dial, and where no frame sets it the
   11.43 px stand-in gives the 8 px the podium had before the frame) */
#modal[data-kind="top"] .podium .pod { padding-top: round(calc(var(--cr, 11.43px) * 0.875 - 2px), 1px); }
/* the three places stand on whole pixels (96 / 104 / 96 with 6 px between: every face and tag centred in an even room) */
#modal[data-kind="top"] .rk-podcol .podium { grid-template-columns: 96px 104px 96px; justify-content: center; }
#modal[data-kind="top"] .rk-podcol .pod { padding-left: 2px; padding-right: 2px; } /* a 20-letter name keeps its words whole in the champion's 100 px */
#modal[data-kind="top"] .pod-adv { flex-direction: column; gap: 1px; margin: 2px 0; }
#modal[data-kind="top"] .pod-adv .rk-tag { width: 36px; height: 36px; } #modal[data-kind="top"] .pod-adv b { font-size: 15px; line-height: 18px; }
#modal[data-kind="top"] .pod.p1 .pod-adv .rk-tag { width: 44px; height: 44px; } #modal[data-kind="top"] .pod.p1 .pod-adv b { font-size: 17px; line-height: 20px; }
/* his own standing leads the counts' strip: "You" (a fixed width: the tag after it stands on a whole pixel), his rank, his place on this board */
#modal[data-kind="top"] .rk-sum > .rk-you { align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 2px; }
#modal[data-kind="top"] .rk-sum .rk-yk { flex: none; width: 36px; text-align: center; white-space: nowrap; font: 400 14px 'Lilita One', 'Lalezar', system-ui, sans-serif; color: #9fd6ff; }
.rk-yp { display: inline-flex; align-items: baseline; gap: 5px; }
#modal[data-kind="top"] .rk-you .rk-tag { width: 28px; height: 28px; } #modal[data-kind="top"] .rk-sum .rk-ya b { font-size: 17px; color: var(--mk); }
.rk-none { margin: 0; padding: 10px 12px; font-size: 14px; font-weight: 800; color: #dbe6f5; }
/* ---- the phone cut: the switch stays in the head; a row is place, face, name, the rank (its tag over its word) and the level; no heads */
body.touch .rk-boards .ftab, body.short .rk-boards .ftab { padding: 0 12px 2px; font-size: 15px; }
/* the phone head on whole pixels (a 25.2 px title over a 15.6 px line started every row and face 0.8 px down) */
body.touch #modal[data-kind="top"] .body > .p-head h2, body.short #modal[data-kind="top"] .body > .p-head h2 { line-height: 26px; } body.touch #modal[data-kind="top"] .body > .p-head p, body.short #modal[data-kind="top"] .body > .p-head p { line-height: 16px; }
body.touch #modal[data-kind="top"] .rk-body, body.short #modal[data-kind="top"] .rk-body { grid-template-columns: 228px minmax(0, 1fr); }
body.touch #modal[data-kind="top"] .rk-podcol .podium, body.short #modal[data-kind="top"] .rk-podcol .podium { grid-template-columns: 68px 76px 68px; }
body.touch #modal[data-kind="top"] .rk-podcol .pod > b, body.short #modal[data-kind="top"] .rk-podcol .pod > b { font-size: 13px; line-height: 16px; }
body.touch #modal[data-kind="top"] .pod-lv, body.short #modal[data-kind="top"] .pod-lv { line-height: 18px; }
body.touch #modal[data-kind="top"] button.rk, body.short #modal[data-kind="top"] button.rk { grid-template-columns: 20px 36px minmax(0, 1fr) 58px 38px; column-gap: 5px; min-height: 44px; padding: 2px 6px 2px 2px; }
body.touch #modal[data-kind="top"] button.rk .rk-adv, body.short #modal[data-kind="top"] button.rk .rk-adv { flex-direction: column; gap: 0; }
/* the online mark on the far corner of the face, clear of the name */
body.touch #modal[data-kind="top"] .rk-w .dot, body.short #modal[data-kind="top"] .rk-w .dot { left: auto; right: auto; bottom: auto; top: -3px; inset-inline-start: -3px; margin: 0; width: 11px; height: 11px; }
body.touch #modal[data-kind="top"] .rk-title, body.short #modal[data-kind="top"] .rk-title { font-size: 12px; line-height: 14px; } body.touch #modal[data-kind="top"] button.rk .rk-guild, body.short #modal[data-kind="top"] button.rk .rk-guild { font-size: 11.5px; line-height: 18px; padding: 0 5px; }
body.touch #modal[data-kind="top"] .rk-adv .rk-tag, body.short #modal[data-kind="top"] .rk-adv .rk-tag { width: 28px; height: 28px; }
body.touch #modal[data-kind="top"] .rk-adv b, body.short #modal[data-kind="top"] .rk-adv b, body.touch #modal[data-kind="top"] .rk-adv.none b, body.short #modal[data-kind="top"] .rk-adv.none b { font-size: 11.5px; line-height: 14px; }
body.touch #modal[data-kind="top"] .rk-lv, body.short #modal[data-kind="top"] .rk-lv { display: flex; flex-direction: column; align-items: flex-end; gap: 0; min-width: 0; }
body.touch #modal[data-kind="top"] .rk-lv small, body.short #modal[data-kind="top"] .rk-lv small { font-size: 10.5px; line-height: 12px; }
body.touch #modal[data-kind="top"] .rk-bar, body.short #modal[data-kind="top"] .rk-bar { width: 38px; height: 4px; }
body.touch #modal[data-kind="top"] .rk-t b, body.short #modal[data-kind="top"] .rk-t b { font-size: 14px; line-height: 16px; }
body.touch #modal[data-kind="top"] .pod-adv, body.short #modal[data-kind="top"] .pod-adv { margin: 0; }
/* the phone podium: the class mark and the rank tag stand side by side on the foot of the face, centred (48 px in an even room, so on
   whole pixels) and clear of the frame's corners; the name starts under them */
#modal[data-kind="top"] .pod-w { position: relative; }
#modal[data-kind="top"] .pod-foot { position: absolute; left: 0; right: 0; bottom: -5px; z-index: 2; display: flex; justify-content: center; align-items: flex-end; gap: 2px; pointer-events: none; }
#modal[data-kind="top"] .pod-tagb { flex: none; width: 26px; height: 26px; }
#modal[data-kind="top"] .pod-clsb { flex: none; width: 20px; height: 20px; margin-bottom: 2px; padding: 2px; box-sizing: border-box; background: #17100c; box-shadow: 0 0 0 2px #0d0907; } #modal[data-kind="top"] .pod-clsb .ic { display: block; width: 16px; height: 16px; }
body.touch #modal[data-kind="top"] .podium .pod .pod-w, body.short #modal[data-kind="top"] .podium .pod .pod-w { margin-bottom: 6px; }
body.touch #modal[data-kind="top"] .rk-podcol, body.short #modal[data-kind="top"] .rk-podcol { padding-top: 4px; } body.touch #modal[data-kind="top"] .rk-podcol .podium, body.short #modal[data-kind="top"] .rk-podcol .podium { margin-bottom: 4px; }
body.touch #modal[data-kind="top"] .rk-podcol .pod, body.short #modal[data-kind="top"] .rk-podcol .pod { padding-left: 0; padding-right: 0; }
body.touch #modal[data-kind="top"] .pod-adv b, body.short #modal[data-kind="top"] .pod-adv b, body.touch #modal[data-kind="top"] .pod.p1 .pod-adv b, body.short #modal[data-kind="top"] .pod.p1 .pod-adv b { font-size: 11.5px; line-height: 14px; }
body.touch #modal[data-kind="top"] .rk-sum > .rk-you, body.short #modal[data-kind="top"] .rk-sum > .rk-you { gap: 5px; padding-left: 6px; padding-right: 6px; }
body.touch #modal[data-kind="top"] .rk-yp, body.short #modal[data-kind="top"] .rk-yp { gap: 4px; } body.touch #modal[data-kind="top"] .rk-sum .rk-yp b, body.short #modal[data-kind="top"] .rk-sum .rk-yp b { font-size: 15px; }
body.touch #modal[data-kind="top"] .rk-you .rk-tag, body.short #modal[data-kind="top"] .rk-you .rk-tag { width: 20px; height: 20px; }
body.touch #modal[data-kind="top"] .rk-sum .rk-ya b, body.short #modal[data-kind="top"] .rk-sum .rk-ya b { font-size: 13px; } body.touch #modal[data-kind="top"] .rk-ya, body.short #modal[data-kind="top"] .rk-ya { gap: 4px; }
body.touch #modal[data-kind="top"] .rk-sum .rk-yk, body.short #modal[data-kind="top"] .rk-sum .rk-yk { width: 30px; font-size: 12px; }