:root{--sab-probe:env(safe-area-inset-bottom);--rig-w:min(100vw, 600px);           /* the app column, never the whole screen */
 --rail-y:calc(var(--rig-w) * 0.098);
 /* the UI rig is race art. Orc iron by default; each race overrides the three images
    and the flag aspect. Geometry stays identical so the layout never shifts. */
 --rig-top-img:url("grafika/UX/orc/bar-top.webp");
 --rig-side-img:url("grafika/UX/orc/bar-side.webp");
 --rig-flag-img:url("grafika/UX/orc/flag-corner.webp");
 --hero-frame-img:url("grafika/UX/orc/frame-hero.webp");
 --hero-frame-slice:82;
 --flag-ratio:1.031;
 /* SHALLOW TOP BARS (both races 1200x400, transparent headroom baked in).
    The shift pulls that headroom above the viewport so the bar's LOWER EDGE seats exactly
    on top of the side rails (--rail-y) with a hairline overlap - no gap, no seam.
    Per race, because the two arts are not equally deep (alpha-scanned, opaque span as a
    fraction of width):  orc 0.1067-0.1767   solarelf 0.1083-0.1942
    shift = opaqueBottom - railY - overlap.  Re-measure if the art is ever re-exported;
    do not tune these by eye. */
 --rig-top-ratio:0.3333;
 --rig-top-shift:0.071;--edge:calc(20px + max(0px, (100vw - 600px)/2));--rail-w:11px;--flag-w:64px;--gold:#c9a227;--dgold:#8a6d1f;--bgold:#6b531a;--parch:#e8d9b0;--dim:#9c8b64;--dim2:#8a7a55;--faint:#5c5140;--green:#7fd44a;--red:#b03a2e;--red2:#d46a5e;--amber:#f5b301;--blue:#6db3f2;--warn:#e2b007;--purp:#b48ce0}
*{box-sizing:border-box}
/* The gradient lives on body, so without this the html element behind it stays white and
   shows through the iOS home-indicator safe area below the fixed tab rail. */
html{background:#080604;background-color:#080604;
 /* no pinch-zoom, no horizontal drag, no rubber-band past the ends */
 touch-action:pan-y;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{touch-action:pan-y;overscroll-behavior-y:none;overflow-x:hidden}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% -10%,#241a0e 0%,#0d0a07 55%,#080604 100%);color:var(--parch);font-family:Georgia,'Times New Roman',serif;padding:calc(var(--rail-y) + 6px) 20px calc(126px + env(safe-area-inset-bottom))}
/* Short pages (Grounds) used to end well above the frame's lower corners while long ones
   ran past them, so the rig looked like it changed size between tabs. Filling the column
   down to the tab rail keeps every screen the same height. */
#app{max-width:560px;margin:0 auto;display:flex;flex-direction:column;
 min-height:calc(100svh - var(--rail-y) - 132px - env(safe-area-inset-bottom))}
#app > .panel:last-of-type{flex:1 0 auto}
/* iOS only settles a stale post-keyboard visual viewport after the document can move.
   The idle Grounds root is the one screen short enough to have zero scroll range, so give
   that screen a small invisible runway.  Keeping it on body (rather than stretching the
   Grounds panel) preserves the frame geometry and does not add blank space to other tabs. */
html.grounds-scroll body::after{content:"";display:block;height:72px;pointer-events:none}
.panel{background:linear-gradient(180deg,#171008,#100b06);border:2px solid var(--bgold);border-radius:12px;padding:14px;box-shadow:inset 0 0 40px rgba(0,0,0,.55);margin-bottom:12px}
.h1{font-family:'Cinzel',Georgia,serif;color:var(--gold);letter-spacing:2px;font-size:15px;margin-bottom:10px;text-transform:uppercase;text-align:center}
.sub{text-align:center;color:var(--dim2);font-style:italic;font-size:11.5px;margin-bottom:10px}
.tag{font-size:10px;color:var(--dim);letter-spacing:1px;text-align:center}
/* The zone bar sits directly under the hero frame, whose border-image corner ornaments
   overhang the last few pixels of the frame. 6px put the bar in their shadow. */
.zbar{height:12px;background:#0a0805;border:1px solid var(--bgold);border-radius:6px;overflow:hidden;margin:6px 0}
.charbox+.zbar{margin-top:16px}
.zfill{height:100%;background:linear-gradient(90deg,#7a5c12,var(--amber),#ffe27a);box-shadow:0 0 10px #f5b30188;transition:width .6s ease}
.statrow{display:flex;justify-content:space-around;font-size:12px;margin:6px 0}
.statrow b{color:var(--gold)}
.charbox{position:relative;margin:10px auto;border:2px solid var(--dgold);border-radius:10px;background:radial-gradient(circle at 50% 20%,#2a2010,#0d0a07);overflow:hidden;box-shadow:0 0 24px rgba(201,162,39,.15),inset 0 0 60px rgba(0,0,0,.6)}
/* THE FRAME FITS THE PORTRAIT; THE PORTRAIT IS NEVER TRIMMED TO THE FRAME.
   This used to be aspect-ratio:2/3 on a content-box, with the portrait stretched to
   height:100% and object-fit:cover. Two ways to lose: where a browser measures
   aspect-ratio against the BORDER box - the framed variant carries a 24px border-image -
   the reserved height came out 48px too tall, and since .framed is overflow:visible the
   picture spilled out of the bottom of its own frame and across the zone bar under it;
   and where it did fit, cover quietly cropped anything that was not exactly 2:3.
   The image now sizes itself and the frame follows. The width/height ATTRIBUTES on the
   hero img carry the 2:3 default, so the space is still reserved before it loads and the
   page does not jump - and once the real file arrives, its own shape wins. */
.charbox.big{max-width:100%;min-height:300px;box-sizing:content-box}
.doll .charbox.big{max-width:340px}          /* flanked by slots, it must leave them room */
/* The generic .hero component rule also matches img.hero and gives it an opaque
   gradient, padding and a border. That never showed while every portrait was an
   opaque baked scene - the first transparent cutout painted that gradient through
   its own alpha instead of the zone plate underneath. The portrait is an image,
   not a panel: it carries no chrome of its own. */
/* height:auto IS LOAD-BEARING, NOT TIDINESS. The img carries width="1024" height="1536"
   attributes so the space is reserved before the file arrives; with only width:100% set in
   CSS, the HEIGHT attribute stays a used value of 1536px and a 276px-wide report card drew
   the hero 1536px tall - a portrait stretched into a column. It was invisible on the Armory
   because the .big rule below already said height:auto. Every .charbox needs it. */
.charbox img.hero{width:100%;height:auto;display:block;position:relative;z-index:1;
 background:none;padding:0;border:0}
/* THE PORTRAIT IS THE WHOLE SCENE (Canon 6.3, rewritten 2026-08-26). Art is now generated
   natively against its zone plate, so the character is lit by that sun, casts a real shadow
   on that ground and picks up its bounce. The app no longer composes anything: no scaling,
   no ground line to guess at, no headroom to reserve for a mount the artwork already frames.
   The long-lived 62%/78% fiddling here was treating a compositing symptom - a cutout with no
   cast shadow standing on photoreal ground - that no CSS could actually fix. */
.charbox.big img.hero{width:100%;height:auto;display:block}
.charbox img.zoneplate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 display:block;z-index:0;border-radius:8px}
.charbox.framed img.zoneplate{border-radius:0}
.charph{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:inherit;padding:18px;text-align:center}
.charph .sil{font-size:64px;filter:grayscale(.6) brightness(.8)}
.charph .nm{font-family:'Cinzel',serif;color:var(--gold);letter-spacing:2px;font-size:13px;margin-top:8px}
.charph .st{font-size:10px;color:var(--dim)}
/* the companion is a character, not an inventory icon: it stands at the hero's flank,
   overlapping the frame slightly so it reads as being IN the scene */
/* THE ART GROUNDS ITSELF (29.8.2026). Every companion render is normalised on export: the
   creature is flush to the BOTTOM of its square canvas, centred horizontally, and its longest
   side is 76% of the canvas - see the companion canon's export contract. So bottom:0 puts the
   animal's feet on the frame's inner edge, exactly, for all seventy of them.
   This replaces a negative-offset fudge that existed only because the renders floated inside
   their canvases by anything from 12% to 32%: the offsets had to be sized for the tightest
   file, which left the loosest hovering a fifth of the frame in the air. The right offset is
   still a nudge - after centring, a wide creature keeps ~12% of empty canvas at each side, so
   -8% brings its silhouette to within a pixel or two of the frame's right edge, while a
   narrow one sits further in, which is what a narrow animal should do. */
.petbox{position:absolute;right:-8%;bottom:0;width:73%;max-width:338px;border:0;background:none;overflow:visible;
 /* frontmost layer: the companion stands IN FRONT of the hero, nearest the viewer -
    scaled against the new figure size so it reads as a beast at heel, not a rival */
 z-index:3;filter:drop-shadow(0 6px 14px rgba(0,0,0,.75))}
/* THERE IS ONE COMPANION PRESENTATION, AND IT IS THIS ONE. The weekly report drew the pet as
   an 88px inventory chip in a bordered box in the corner - a thumbnail of a creature that
   stands at the hero's flank everywhere else. Same render, same grounding, same scale rule;
   the card being narrower simply makes it smaller, which is what a proportion is for.
   An unframed box clips at its own edge, so the flank overhang is only taken where the
   border-image frame makes room for it. */
.charbox:not(.framed) .petbox{right:0}
.petbox.vip{filter:drop-shadow(0 6px 14px rgba(0,0,0,.75))}   /* no halo: a companion is not a trophy case */
.btile.wearing{border-color:var(--gold);box-shadow:0 0 12px rgba(201,162,39,.35)}
.btile.click{cursor:pointer}
.petbox img{width:100%;display:block}
.petph{font-size:26px;text-align:center;padding:6px 2px}
.qthumb{width:132px;border:2px solid var(--dgold);border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 20%,#2a2010,#0d0a07);flex-shrink:0;align-self:stretch;display:flex;align-items:center;justify-content:center;position:relative}
.qthumb img{width:100%;display:block}
/* Mob portraits share one OUTER geometry at every rarity. The source ornaments have
   different native slice depths, but every rendered miniature gets the same thin 6px rim;
   rarity may change decoration, never image area or card alignment. */
.qthumb.mob{overflow:visible;border:0;border-radius:0;background:none;position:relative}
.qthumb.mob img{border-radius:0;position:relative;z-index:1}
/* One authored frame family sits over every monster portrait. All four assets share the
   exact 2:3 rail geometry; only their material and mirrored corner ornament change. The box
   is outset by one thin rail width, while the top-left and bottom-right motifs overlap the
   painting intentionally so rarity belongs to the creature rather than to an announcement. */
.qthumb.mob::before{content:"";position:absolute;inset:-9.6px;z-index:2;pointer-events:none;
 background:center/100% 100% no-repeat}
.qthumb.t-n::before{background-image:url("grafika/UX/frame-mini-trash.webp")}
.qthumb.t-v::before{background-image:url("grafika/UX/frame-mini-vet.webp")}
.qthumb.t-e::before{background-image:url("grafika/UX/frame-mini-elite.webp")}
.qthumb.t-r::before{background-image:url("grafika/UX/frame-mini-rare.webp")}
.pettease{display:flex;align-items:center;gap:7px;margin-top:6px;padding:5px 7px;
 border:1px dashed var(--line);border-radius:5px;text-align:left}
.pettease img{width:26px;height:26px;object-fit:contain;flex:0 0 26px;
 filter:brightness(0) opacity(.55);}
.pettease span{font-size:9.5px;letter-spacing:.6px;color:var(--dim2)}
.pettease span i{color:var(--faint);font-style:italic}
.pettease.strong{border-color:var(--purp)}
.pettease.strong span{color:var(--purp)}
.enclore{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
 font-size:10.5px;line-height:1.3;color:var(--dim2);margin-top:6px;font-style:italic}
.mobhp.armored{height:9px;border:1px solid var(--dgold);
 background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(0,0,0,.5) 14px 15px)}
.ovgfx img.encart{margin-top:4px;position:relative;z-index:2;max-height:210px;object-fit:contain}
/* THE REVEAL FRAMES ARE WINDOWS. The monster is seated INSIDE the frame's opening -
   the 1024x1900 master uses an exact 736x1104 (2:3) paint box at 144 / 240.
   The transparent frame is drawn above the painting so its rails cover the bleed edge. If
   the frame asset is missing the container goes bare and the art stands alone. */
.encframe{position:relative;display:block;width:100%}
.encframe>img:first-child{display:block;position:relative;width:100%;height:auto;z-index:2}
.encframe .encwin{position:absolute;left:14.0625%;top:12.6316%;width:71.875%;height:58.1053%;
 object-fit:cover;z-index:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.encframe.omen .encwin{filter:drop-shadow(0 0 16px rgba(180,140,224,.55))}
.encframe.bare .encwin{position:static;width:100%;height:auto;max-height:210px}
.encplate{position:absolute;left:18%;top:71.5%;width:64%;height:13.5%;z-index:3;
 display:flex;align-items:center;justify-content:center;text-align:center;
 font-family:Cinzel,serif;font-size:15px;line-height:1.15;letter-spacing:1.6px;
 color:#f4e3b2;text-shadow:0 2px 6px rgba(0,0,0,.85)}
.encframe.omen .encplate{color:#e6d7ff;top:72.5%;height:13%;font-size:13.5px}
.encframe.bare .encplate{position:static;display:block;margin-top:6px;height:auto}
.ovgfx img.encart.omen{filter:drop-shadow(0 0 18px rgba(180,140,224,.5))}
@media(prefers-reduced-motion:reduce){.encart,.ovgfx img{animation:none;transition:none}}
/* AUDIT #15: hero frames. Modifier classes only - .nextup and .charbox are reused elsewhere. */
.framed{border-style:solid;border-color:transparent;border-radius:0;background:none;border-image-repeat:round;box-shadow:none}
.charbox.raidframe{filter:drop-shadow(0 0 10px rgba(224,138,42,.45))}
.charbox.framed{overflow:visible;border-width:24px;border-image-source:var(--hero-frame-img);border-image-slice:var(--hero-frame-slice)}
.charbox.framed img.hero{border-radius:0}
/* the unlock card says four things: that it is next, what it is, what it looks like, what it costs */
.nx{text-align:center}
.nxlabel{font-family:Cinzel,serif;font-size:11px;letter-spacing:3px;color:var(--dim)}
/* art on the left, name and price on the right - the price as big as the name, because it is
   the number the player is working toward */
.nxbody{display:flex;align-items:center;gap:14px;margin-top:6px;justify-content:center}
.nximg{width:104px;height:104px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.nxph{width:104px;height:104px;display:flex;align-items:center;justify-content:center;font-size:50px;opacity:.5}
.nxtext{text-align:left;min-width:0}
.nxname{font-family:Cinzel,serif;font-size:20px;letter-spacing:1px;color:var(--gold);line-height:1.1}
.nxcost{display:flex;align-items:center;gap:7px;margin-top:8px}
.nxcoin{font-size:30px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.nxgold{font-family:Cinzel,serif;font-size:28px;letter-spacing:1px;color:var(--gold);line-height:1}
.nxgold small{font-size:15px;color:var(--dim2);margin-left:2px}
.nxlock{font-size:11px;letter-spacing:2px;color:var(--dim);margin-top:8px;text-transform:uppercase}
.nextup.framed{border-width:12px;border-image-source:url("grafika/UX/frame-item.webp");border-image-slice:40;padding:8px}
/* Boss portraits use the same authored OVERLAY construction as monster portraits: the
   painting keeps its full 2:3 footprint and the frame sits above it instead of changing
   the box model with a border-image. The boss member of the family is deliberately heavier,
   thornier and blood-red, but its rails and opposing-corner emphasis speak the same language. */
.bossimg.framed{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;
 margin:18px 8px 0;padding:9.9% 4.6% 4.5% 6%}
/* THE FRAME SITS ON THE RIM OF THE PAINTING, so the painting is inset to meet it.
   The plate's bounds are set by its CORNER ORNAMENTS, which reach further out than the plain
   rail, so the rail's outer edge is nowhere near the plate edge - and it is not a constant
   either, because a gem sits at the middle of every side. The inset is therefore SOLVED, not
   sampled: grow the picture rectangle until every pixel of its border lands on an opaque part
   of the plate. That converges at 58px left, 44 right, 96 top and 43 bottom of the 1000x1500
   plate, so the painting is 898x1361 of it and its whole rim runs under the rail.
   Do not read these off a mid-edge sample. A row through a gem says the rail reaches much
   further out than it does, and a mode over "most rows" still leaves the picture showing
   wherever the rail happens to sit deeper. Percentages are all of WIDTH, which is how CSS
   resolves padding on every side, so the vertical figures are converted through 1.5 first. */
.bossimg.framed::before{content:"";position:absolute;
 inset:0;z-index:3;pointer-events:none;
 background:url("grafika/UX/frame-mini-boss.webp") center/100% 100% no-repeat;
 filter:drop-shadow(0 0 10px rgba(198,38,27,.48)) drop-shadow(0 5px 9px rgba(0,0,0,.8))}
.bossimg.framed img{position:relative;z-index:1;border-radius:0}
.bossimg.framed>div{z-index:2}
.q{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #2a2010}
.qn{flex:1;font-size:13px}
.qs{font-size:10px;color:var(--dim2);margin-left:5px}
input[type=number],input[type=text]{background:#0a0805;border:1px solid var(--bgold);color:#ffe27a;border-radius:6px;padding:7px 8px;font-family:inherit;font-size:15px}
input[type=number]{width:72px;text-align:center}
.badge{font-size:10px;letter-spacing:1px;padding:4px 6px;border-radius:5px;border:1px solid var(--faint);color:var(--dim);min-width:62px;text-align:center}
.badge.ok{border-color:#4d7a2e;color:var(--green)}
.tri{background:#14100a;border:1px solid #4a3d28;color:var(--dim2);border-radius:6px;width:38px;height:33px;font-family:inherit;font-size:15px;cursor:pointer}
.tri.yes{border-color:#4d7a2e;color:var(--green);box-shadow:0 0 8px rgba(127,212,74,.25)}
.tri.no{border-color:#7a2e2e;color:var(--red2)}
.tri.half{border-color:#8a6a24;color:var(--warn);box-shadow:0 0 8px rgba(224,169,58,.2)}  /* march/rite claimed */
/* rank shield: compact heraldic silhouette, slightly vertical, bold centred numeral.
   Material climbs I rusted iron - II steel - III bronze - IV blacksteel - V bloodgold. */
/* forged badges, numeral baked in. aspect 142:200 (0.71). */
.rankbadge{display:inline-block;vertical-align:-.28em;flex:none;
 background:center/contain no-repeat;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
.rankbadge.t1{background-image:url("grafika/UX/rank-1.webp")}
.rankbadge.t2{background-image:url("grafika/UX/rank-2.webp")}
.rankbadge.t3{background-image:url("grafika/UX/rank-3.webp")}
.rankbadge.t4{background-image:url("grafika/UX/rank-4.webp")}
.rankbadge.t5{background-image:url("grafika/UX/rank-5.webp")}
.rankname{font-family:Cinzel,serif;letter-spacing:1px}
/* ---- collection grids: what you have not met is a shape, not a blank ---- */
.bgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:4px}
.btile{background:#14100a;border:1px solid #3d3a34;border-radius:8px;padding:5px 3px;text-align:center;opacity:.55}
.btile.known{opacity:1;border-color:#5c4a22}
.btile.omen{border-color:var(--purp);box-shadow:0 0 12px rgba(180,140,224,.15)}
.bimg{width:100%;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#0d0a07;
 display:flex;align-items:center;justify-content:center}
/* CONTAIN, NEVER COVER. The creature paintings are 2:3 portraits and the tile is square:
   cover amputated a third of every painting - Krazha's bestiary tile showed her legs and
   nothing above the waist. Same defect, same fix as the encounter thumb before it. */
.bimg img{width:100%;height:100%;object-fit:contain}
.bsil{font-size:20px;color:#4a453c}
.bname{display:block;font-size:9px;line-height:1.15;margin-top:3px;color:var(--parch);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcount{display:block;font-size:8px;color:var(--dim)}
/* ---- raid ---- */
.raidhero{position:relative;border-radius:10px;overflow:hidden;border:2px solid #6b2323;background:#0d0a07}
.raidhero img{width:100%;display:block;height:auto}
.raidph{height:150px;display:flex;align-items:center;justify-content:center;font-size:52px;opacity:.4}
.raidname{padding:8px 10px;text-align:center;background:rgba(0,0,0,.5);
 font-family:Cinzel,serif;letter-spacing:1px}
.raidbar{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:9px 11px;
 border-radius:9px;border:1px solid #6b2323;background:linear-gradient(90deg,#1a0e0e,#241010);
 font-family:Cinzel,serif;font-size:12px;letter-spacing:1px;color:var(--parch)}
/* the war log is a table, so it behaves like one: fixed columns, tabular numerals */
.rar1{color:#d8d2c4}.rar2{color:#4fae44}.rar3{color:#3f7fd8}.rar4{color:#9b4fd8}.rar5{color:#e08a2a}
.crgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0 2px}
.crgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cropt{background:#14100a;border:1px solid #4a3d28;border-radius:8px;padding:10px 6px;text-align:center;
 cursor:pointer;font-family:inherit;color:var(--dim2);line-height:1.25}
.cropt b{font-family:Cinzel,serif;letter-spacing:1px;font-size:13px;display:block;color:var(--parch)}
.cropt .ci{font-size:20px;display:block;margin-bottom:2px}
.cropt.on{border-color:var(--gold);color:var(--parch);box-shadow:0 0 10px rgba(201,162,39,.25)}
.cropt.on b{color:var(--gold)}
.cropt.off{opacity:.32;cursor:not-allowed}
.crprev{width:100%;display:block;border-radius:8px}
/* A bloodline whose master is not drawn yet still occupies its frame and says so, rather than
   collapsing to nothing - the locked races exist in the creator to be looked at. */
.crprevph{width:100%;aspect-ratio:2/3;border-radius:8px;border:1px dashed var(--dgold);
 background:radial-gradient(circle at 50% 30%,#211809,#0d0a07);
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
 color:var(--dim2);font-size:12px;letter-spacing:1px;text-align:center;padding:16px}
.crprevph .crprevsil{font-size:56px;filter:grayscale(.6) brightness(.75)}
.crsteps{display:flex;gap:6px;justify-content:center;margin:6px 0 2px}
.crdot{width:26px;height:3px;border-radius:2px;background:#4a3d28}
.crdot.done{background:#8a6a24}
.crdot.on{background:var(--gold)}
.crfield{display:flex;flex-direction:column;gap:3px;text-align:center}
.crfield input{background:#14100a;border:1px solid #4a3d28;border-radius:8px;color:var(--parch);
 font-family:Cinzel,serif;text-align:center;font-size:17px;padding:9px;width:100%}
.crname{width:100%;background:#14100a;border:1px solid #4a3d28;border-radius:8px;color:var(--parch);
 font-family:Cinzel,serif;letter-spacing:2px;text-align:center;font-size:17px;padding:10px;text-transform:uppercase}
.crnamerow{display:flex;gap:8px;align-items:stretch}
.crnamerow .crname{flex:1;min-width:0}
.crdice{background:#14100a;border:1px solid #4a3d28;border-radius:8px;color:var(--parch);
 font-size:18px;line-height:1;padding:0 12px;cursor:pointer;flex:0 0 auto}
.crdice:active{border-color:var(--gold);transform:translateY(1px)}
.q.recovery{opacity:.72}
.cropt.soon{opacity:.85;border-style:dashed}
.cropt.soon .qs{color:var(--amber);letter-spacing:1px}
.soonbtn{opacity:.75;border-style:dashed;cursor:default}
html[data-race="solarelf"]{
 /* WHAT SEATS ON THE RAILS IS THE BAR'S ENDS, NOT ITS DEEPEST POINT.
    The previous value was derived from total ink depth (0.1942 vs the orc's 0.1767), which
    is the centre ornament - the part that hangs lowest and touches nothing. Measured at the
    outer 2% of each image, where the bar actually meets the side rails, the orc seats at
    0.1733 of its width and the elven bar at 0.1542. The orc's shift of 0.071 therefore puts
    its ends at 0.1023 - a hair below --rail-y (0.098), which is the intended overlap. To
    land the elven ends in the same place: 0.1542 - 0.1023 = 0.0519. */
 --rig-top-shift:0.0519;
 --rig-top-img:url("grafika/UX/solarelf/bar-top.webp");
 --rig-side-img:url("grafika/UX/solarelf/bar-side.webp");
 --rig-flag-img:url("grafika/UX/solarelf/flag-corner.webp");
 --hero-frame-img:url("grafika/UX/solarelf/frame-hero.webp");
 --hero-frame-slice:80;
 --flag-ratio:1.235}
/* ---- character tile: title / race-class / rank+badge ---- */
.ctile{text-align:center;margin:2px 0 8px}
.ctitle{font-family:Cinzel,serif;font-size:21px;letter-spacing:1.5px;color:var(--gold);line-height:1.15}
/* Sits inline beside the hero name. THE FRAME FITS THE TITLE, NOT THE OTHER WAY ROUND.
   This was an <img> stretched over a box locked to aspect-ratio 3/1, so the plaque was
   always exactly three times its height and a long name - THE UNREFLECTED - ran straight
   out of both ends of its own frame. The frame is a border-image now: the box sizes itself
   to the text, the ornate end caps are sliced out at their natural width and never
   distorted, and only the flat middle band stretches. Slice 340 is where the cap ends and
   the repeatable middle begins in the 1536x512 source (measured, not guessed); 0 top and
   bottom because the plate is stretched horizontally only. 340/512 = 0.664 of the rendered
   height, which is where the border-width comes from.
   The source url is set per rarity as --tpf on the element. If the art is missing the
   border-image simply does not paint and the title reads as plain text, which is the same
   contract the old onerror had - without needing the handler. */
.tplaque{display:inline-flex;vertical-align:middle;margin-left:8px;
 align-items:center;justify-content:center;
 min-height:2.1em;padding:.28em .5em;box-sizing:border-box;
 border-style:solid;border-color:transparent;border-width:0 1.394em;
 border-image-source:var(--tpf,none);border-image-slice:0 340 fill;
 border-image-repeat:stretch;border-image-width:0 1.394em}
.tptext{position:relative;font-family:Cinzel,serif;font-size:12px;letter-spacing:1.5px;
 color:var(--amber);white-space:nowrap;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8)}
/* No frame art: no border to leave room for, and the title reads as an aside. */
.tplaque.bare{border-width:0;min-height:0;padding:0}
.tplaque.bare .tptext::before{content:"\00b7 ";opacity:.7}
@media(max-width:520px){.tplaque{min-height:1.9em;margin-left:6px;border-width:0 1.262em;border-image-width:0 1.262em}}
/* Narrow screens: the name plus a framed title will not fit on one line, so the
   plaque wraps beneath rather than squeezing the name. */
@media(max-width:400px){.tplaque{display:flex;width:fit-content;max-width:100%;margin:5px auto 0}}
.cepithet{font-family:Cinzel,serif;font-size:13px;letter-spacing:2px;color:var(--amber);opacity:.9;white-space:nowrap}
.crace{font-size:12.5px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-top:5px}
.crank{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:7px}
.crank .rankname{font-size:15px;color:var(--parch)}
/* the campaign day IS the level - one day lived, one level gained */
.clevel{font-family:Cinzel,serif;font-size:12px;letter-spacing:2px;color:var(--dim);
 border-left:1px solid #4a3d28;padding-left:8px;margin-left:2px}
.btn{background:#14100a;border:1px solid var(--bgold);color:var(--gold);border-radius:6px;padding:8px 14px;font-family:inherit;font-size:12px;cursor:pointer;letter-spacing:1px}
.btn.big{width:100%;padding:12px;font-size:14px;font-family:'Cinzel',serif}
.btn.done{border-color:#4d7a2e;color:var(--green);opacity:.55}
.btn:disabled{opacity:.35;cursor:default}
.btn.cta{border:2px solid var(--amber);color:#ffe27a;box-shadow:0 0 16px rgba(245,179,1,.35);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 10px rgba(245,179,1,.25)}50%{box-shadow:0 0 22px rgba(245,179,1,.55)}}
.dayxp{position:relative;text-align:center;margin-top:12px;color:var(--amber);letter-spacing:1px;font-size:14px}
.chip.retune{position:absolute;right:0;top:-2px;margin:0;letter-spacing:0}
/* War Council chrome. Each asset is optional: if the file is absent the element removes
   itself and the report still reads correctly. */
.hallimg{position:relative;border:2px solid var(--dgold);border-radius:10px;overflow:hidden;background:#0d0a07}
.hallimg img{width:100%;display:block;height:auto}
.hallph{height:170px;display:flex;align-items:center;justify-content:center;font-size:54px;opacity:.35}
.hallveil{position:absolute;left:0;right:0;bottom:0;padding:7px;text-align:center;font-family:Cinzel,serif;
 font-size:11px;letter-spacing:2px;color:var(--dim);background:linear-gradient(transparent,rgba(5,3,1,.9))}
.councilhead{text-align:center;padding:4px 0 8px}
.councilhead .crest{width:74px;display:block;margin:0 auto 4px}
.cdivider{width:100%;display:block;opacity:.75;margin:2px 0 8px}
.frontgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:4px}
.plaque{background:#14100a;border:1px solid #33291a;border-radius:8px;padding:7px 8px;text-align:center}
.plaque img.ficon{width:26px;height:26px;display:block;margin:0 auto 2px;opacity:.9}
.plaque .fpct{font-family:Cinzel,serif;font-size:17px;color:var(--parch)}
.plaque .fcap{font-size:9px;color:var(--dim2)}
.overcharge{height:4px;background:#241c10;border-radius:3px;overflow:hidden;margin-top:4px;position:relative}
.overcharge i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--dgold),var(--gold))}
.overcharge b{position:absolute;top:0;bottom:0;background:#c9722a}
.goal{background:#14100a;border:1px solid #33291a;border-left-width:3px;border-radius:8px;padding:7px 9px;margin-top:6px}
.goal.done{opacity:.72}
.goal.wearing{border-color:var(--gold);box-shadow:0 0 10px rgba(201,162,39,.3)}
.goalhead{display:flex;align-items:baseline;gap:8px}
.goalname{flex:1;font-family:Cinzel,serif;letter-spacing:1px;font-size:12.5px;color:var(--parch)}
.goalpct{font-size:11px;color:var(--amber)}
/* position in its ladder, never a rarity: deeds do not have one */
.astep{font-size:9.5px;letter-spacing:1px;color:var(--dim2);border:1px solid #33291a;
 border-radius:4px;padding:1px 4px;white-space:nowrap}
.rar{font-size:8.5px;letter-spacing:1.5px;opacity:.85}
/* --- Provisions: resource gauges. The green zone is drawn INSIDE the rail so the
   target band is legible without reading three numbers off a row. --- */
.gauge{margin:7px 0}
.gaugehead{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;
 letter-spacing:1.5px;color:var(--dim2)}
.gaugehead b{font-family:Cinzel,serif;font-size:14px;letter-spacing:1px;color:var(--parch)}
.gauge.big .gaugehead b{font-size:20px}
.grail{position:relative;height:9px;background:#241c10;border-radius:5px;overflow:hidden;
 margin-top:3px;border:1px solid #33291a}
.gauge.big .grail{height:15px}
.gzone{position:absolute;top:0;bottom:0;background:rgba(79,174,68,.20);
 border-left:1px solid rgba(79,174,68,.55);border-right:1px solid rgba(79,174,68,.55)}
.gfillm{position:absolute;top:0;bottom:0;left:0;border-radius:5px 0 0 5px;
 background:linear-gradient(90deg,var(--dgold),var(--gold))}
.gfillm.ok{background:linear-gradient(90deg,#2f7a28,#4fae44)}
.gfillm.over{background:linear-gradient(90deg,#8a3b1e,#c0261f)}
.gnote{font-size:9.5px;letter-spacing:.5px;color:var(--faint);margin-top:2px}
.gtrio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:8px}
@media(max-width:430px){.gtrio{grid-template-columns:1fr;gap:6px}}
/* --- Quartermaster header --- */
.qmhead{display:flex;align-items:center;gap:11px;margin-bottom:2px}
.qmmedal{width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:flex;align-items:center;
 justify-content:center;background:radial-gradient(circle at 35% 30%,#3a2b13,#150e06);
 border:2px solid var(--bgold);box-shadow:inset 0 0 12px rgba(0,0,0,.7),0 0 8px rgba(201,162,39,.15)}
.qmmedal img{width:34px;height:34px;object-fit:contain}
.qmtitles{min-width:0}
.qmtitles .qh{font-family:Cinzel,serif;font-size:17px;letter-spacing:1.5px;color:var(--gold);line-height:1.15}
.qmtitles .qp{font-size:10.5px;letter-spacing:1.5px;color:var(--dim2)}
/* --- Verdict --- */
.rverdict{display:flex;align-items:center;gap:12px;margin:10px 0 2px;padding:9px 11px;
 border:1px solid #33291a;border-radius:9px;background:linear-gradient(180deg,#1a1309,#120d07)}
.rverdict img{width:56px;height:56px;flex:0 0 56px;object-fit:contain}
.rvempty{width:56px;height:56px;flex:0 0 56px;border-radius:50%;border:1px dashed #3a3020;opacity:.5}
.rvh{font-family:Cinzel,serif;font-size:15px;letter-spacing:2px;line-height:1.2}
.rvs{font-size:11px;color:var(--dim2);margin-top:2px}
.rverdict.ok{border-color:#3f6f35}.rverdict.ok .rvh{color:#8fc47e}
.rverdict.warn{border-color:#7a5a1e}.rverdict.warn .rvh{color:var(--amber)}
.rverdict.idle .rvh{color:var(--dim)}
/* --- Actions --- */
.pacts{margin:10px 0 2px}
.pacts .prim{width:100%;min-height:44px;font-family:Cinzel,serif;letter-spacing:2px}
.pacts .secrow{display:flex;gap:6px;margin-top:6px}
.pacts .secrow button{flex:1;min-height:44px}
.fsearch{display:flex;align-items:stretch;margin:8px 0 4px;border:1px solid var(--bgold);
 border-radius:8px;overflow:hidden;background:#100b06}
.fsearch input{flex:1;min-width:0;border:0;background:transparent;padding:0 10px;min-height:44px;
 color:var(--parch);font-family:inherit}
.fsearch input:focus{outline:2px solid var(--dgold);outline-offset:-2px}
.fsearch button{min-height:44px;min-width:46px;border:0;border-left:1px solid #2a2013;
 background:transparent;color:var(--gold);cursor:pointer;font-size:15px}
/* --- Ration cards --- */
.rcard{margin-top:10px;border:1px solid var(--bgold);border-radius:9px;overflow:hidden;
 background:linear-gradient(180deg,#1a1309,#100b06)}
/* --- Nutrition subtabs --- */
/* ===== PROVING GROUNDS ===== */
.credleg{text-align:center;font-size:10px;letter-spacing:1.5px;color:var(--dim2);margin:6px 0 10px}
.wkhead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wkbadge{font-size:9px;letter-spacing:1.5px;color:var(--gold);border:1px solid var(--bgold);
 border-radius:4px;padding:2px 7px}
.wkeq{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;margin-top:2px}
.brow2{display:flex;align-items:center;gap:9px;width:100%;padding:11px 10px;margin-top:6px;
 border:1px solid #241c10;border-radius:8px;background:#140e07;cursor:pointer;
 text-align:left;color:inherit;font-family:inherit;min-height:44px;flex-wrap:wrap}
.brow2:nth-of-type(even){background:#110c06}
.brow2:hover{border-color:#3a3020}
.brow2:focus-visible{outline:2px solid var(--dgold);outline-offset:1px}
.bdate{width:52px;flex:0 0 52px;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.bmain{flex:1;min-width:120px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bttl{font-family:Cinzel,serif;letter-spacing:1px;font-size:12.5px;color:var(--parch)}
.btag{font-size:8.5px;letter-spacing:1px;border-radius:3px;padding:2px 5px;white-space:nowrap}
.btag.p{color:#d08b82;border:1px solid #5a2a24;background:rgba(160,32,26,.13)}
.btag.s{color:#b39a63;border:1px solid #3f3320;background:rgba(201,162,39,.07)}
.bstats{margin-left:auto;text-align:right;font-size:11px;color:var(--dim2);white-space:nowrap;
 font-variant-numeric:tabular-nums}
.bchev2{flex:0 0 10px;color:var(--dim)}
@media(max-width:420px){.bstats{margin-left:63px;text-align:left;width:100%}}
.wkbar.full i{background:linear-gradient(90deg,#8a2018,var(--red2))}
.campcta{margin-top:12px;padding:12px 10px;text-align:center;border:1px solid var(--bgold);
 border-radius:9px;background:linear-gradient(180deg,#241a0c,#150e07)}
.campcta.done{border-color:#33291a;background:#130d07}
.ctah{font-family:Cinzel,serif;font-size:12px;letter-spacing:2px;color:var(--gold);margin-bottom:3px}
.campcta button[disabled]{opacity:.5}
.hero{padding:12px 10px;border:1px solid var(--bgold);border-radius:9px;text-align:center;
 background:linear-gradient(180deg,#241a0c,#140e07)}
.herorow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.heroend{display:flex;flex-direction:column;align-items:center;min-width:62px}
.heroend .hl{font-size:8.5px;letter-spacing:1.5px;color:var(--faint)}
.heroend .hv{font-family:Cinzel,serif;font-size:20px;color:var(--dim2);font-variant-numeric:tabular-nums}
.heroend.now .hv{color:var(--parch);font-size:25px}
.heroend .hu{font-size:9px;color:var(--faint)}
.heroarrow{color:var(--dgold);font-size:15px}
.herobig{font-family:Cinzel,serif;font-size:27px;letter-spacing:1px;margin-top:8px;color:var(--parch);
 font-variant-numeric:tabular-nums}
.herobig.good{color:#7ad06c;text-shadow:0 0 14px rgba(79,174,68,.28)}
.addpick{display:flex;flex-direction:column;gap:6px}
.addpick .btn{min-height:48px}
.invitebox{text-align:center}
.invcode{color:var(--gold);letter-spacing:2px;font-family:ui-monospace,Menlo,monospace}
.invitelink{margin-top:6px;padding:9px 10px;border:1px solid #33291a;border-radius:7px;
 background:#0d0906;font-size:11px;color:var(--gold);word-break:break-all;
 font-family:ui-monospace,Menlo,monospace}
.summonsok{margin-top:6px;padding:10px;border:1px solid #3f6f35;border-radius:8px;
 background:linear-gradient(180deg,#16200f,#121a0d);text-align:center;
 font-family:Cinzel,serif;font-size:11.5px;letter-spacing:1.5px;color:#8fc47e}
/* A dormant lord: visibly inert, so a sleeping assault is never read as a losing one. */
.dormant{filter:saturate(.3);opacity:.72}
.khpwrap.dormant .khpfill{background:linear-gradient(90deg,#3a3020,#5a4d33)}
.bossimg.dormant img{filter:grayscale(.65) brightness(.72)}
.wake{margin:8px 0 2px;padding:12px 10px;text-align:center;border:1px solid var(--bgold);
 border-radius:9px;background:linear-gradient(180deg,#241a0c,#140e07)}
.waket{font-family:Cinzel,serif;font-size:11px;letter-spacing:2.5px;color:var(--dim2)}
.wakeb{font-family:Cinzel,serif;font-size:24px;letter-spacing:2px;color:var(--gold);margin:3px 0 4px}
/* ===== THE GATE =====
   The login is an independent full-viewport surface. html.gate-active strips the game
   shell (body padding, #app width cap, #rig, #tabs) for the duration of the gate ONLY -
   every rule below is scoped to that class, so no other screen is touched. */
html.gate-active,html.gate-active body{height:100%;overflow:hidden}
html.gate-active body{padding:0;margin:0;background:#080604}
html.gate-active #app{max-width:none;min-height:0;margin:0;display:block}
html.gate-active #rig,html.gate-active #tabs{display:none!important}

/* ONE-SCENE GATE. The generated artwork is the only visual layer: no duplicate character
   cutout, no blurred background and no page-wide tint. Its built-in sky and foreground are
   the interface safe zones; the empty middle grid row protects both complete characters. */
.gate{position:relative;height:100dvh;min-height:0;display:grid;
 grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background-color:#080604;
 background-image:url("grafika/UX/gate/gate-bg-v4-mobile.webp");
 background-repeat:no-repeat;background-position:center center;background-size:cover}
.gateart{min-height:0;pointer-events:none}
.gatein{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;
 width:100%;max-width:430px;margin:0 auto;box-sizing:border-box}
.gatein.top{padding:calc(env(safe-area-inset-top) + 8px) 18px 2px;max-width:520px}
.gatebrand{text-align:center;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
 padding:0}
.gatein.bottom{padding:0 14px calc(env(safe-area-inset-bottom) + 8px)}
.gatelogo{display:block;width:min(88vw,370px);height:auto;filter:drop-shadow(0 3px 12px rgba(0,0,0,.9))}
.gatemotto{margin-top:2px;font-family:Cinzel,serif;font-size:10px;font-weight:600;
 letter-spacing:.20em;color:#e6dcc6;line-height:1;white-space:nowrap;
 text-shadow:0 2px 10px rgba(0,0,0,.98)}
.gatepanel{flex:0 0 auto;padding:10px 12px 9px;border-radius:15px;
 background:rgba(10,8,5,.86);border:1px solid rgba(140,112,44,.55);
 box-shadow:0 12px 34px rgba(0,0,0,.55)}
.gateh{font-family:Cinzel,serif;font-size:15px;letter-spacing:1.5px;color:var(--parch);
 text-align:center;margin:0 0 6px;font-weight:400}
.gatelbl{display:block;font-family:Cinzel,serif;font-size:9.5px;letter-spacing:1.6px;
 color:var(--dim2);margin:6px 0 3px}
.gateinput{width:100%;box-sizing:border-box;height:44px;padding:0 12px;
 background:rgba(6,5,3,.72);border:1px solid rgba(140,112,44,.55);border-radius:10px;
 color:var(--parch);font-family:Georgia,'Times New Roman',serif;font-size:16px;
 letter-spacing:0;text-transform:none;-webkit-appearance:none}
.gateinput:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.18)}
.gateinput:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.gatebtn{width:100%;height:42px;margin-top:6px;border-radius:10px;cursor:pointer;
 font-family:Cinzel,serif;font-size:13px;letter-spacing:2.2px}
.gatebtn.primary{color:#150e06;border:1px solid var(--gold);
 background:linear-gradient(180deg,#e8c76a,#b8912c);box-shadow:0 4px 16px rgba(201,162,39,.22)}
.gatebtn.primary:hover{background:linear-gradient(180deg,#f0d27c,#c49a30)}
.gatebtn.primary:active{transform:translateY(1px)}
.gatebtn.primary:disabled{opacity:.5;cursor:default;transform:none}
.gatebtn.ghost{color:var(--gold);border:1px solid rgba(140,112,44,.5);background:rgba(10,8,5,.55)}
.gatebtn.ghost:hover{border-color:var(--gold)}
.gatebtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gatehelp{margin-top:2px;text-align:center}
.gatelink{background:none;border:0;color:var(--dim2);font-family:Georgia,'Times New Roman',serif;
 font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
 padding:6px 10px;min-height:34px}
.gatelink:hover{color:var(--gold)}
.gatelink:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:6px}
.gatesent{font-size:12.5px;color:#8fc47e;margin-bottom:3px}
.gateerr{margin-top:7px;padding:7px 10px;border-radius:8px;font-size:12.5px;
 background:rgba(96,26,20,.5);border:1px solid #7a2a22;color:#f0b8b0}
.gatehint{margin-top:7px;font-size:10px;line-height:1.4;color:#766a57;text-align:center}
.summonsok{margin:0 0 6px;padding:7px;border:1px solid #3f6f35;border-radius:9px;
 background:linear-gradient(180deg,#16200f,#121a0d);text-align:center;
 font-family:Cinzel,serif;font-size:11px;letter-spacing:1.4px;color:#8fc47e}
.wsgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:8px}
.wsc{display:flex;flex-direction:column;gap:2px;padding:7px 8px;border:1px solid var(--line);
 border-radius:4px;background:rgba(255,255,255,.025)}
.wsc b{font:13px/1.2 Cinzel,serif;letter-spacing:.5px;color:var(--amber)}
@media(min-width:520px){.wsgrid{grid-template-columns:repeat(4,1fr)}}
.cfgsec{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);
 padding:10px 11px;margin-top:9px}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
 margin:2px 0 7px}
.qheadside{margin-top:auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px;
 padding:8px 2px 0}
.qheadside .qheadttl{align-self:flex-start}
.qheadttl{font:14px/1 Cinzel,serif;letter-spacing:2.6px;color:var(--gold)}
.qcfgbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
 width:60px;height:60px;flex:0 0 60px;cursor:pointer;border-radius:8px;
 background:linear-gradient(180deg,#1d1509,#120c06);border:1px solid var(--dgold);
 box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 0 12px rgba(0,0,0,.5)}
.qcfgbtn:active{background:#241a0c}
.qcfgbtn img{width:26px;height:26px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.qcfgbtn span{font:7.5px/1.25 Cinzel,serif;letter-spacing:1.1px;color:var(--gold);text-align:center}
.subbtn.soon{opacity:.45;cursor:default;pointer-events:none;position:relative}
.soonchip{font:7.5px/1 Cinzel,serif;letter-spacing:1.2px;color:var(--bg);background:var(--dim2);
 border-radius:2px;padding:2px 4px;margin-left:5px;vertical-align:1px}
.pqcard{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;cursor:pointer;
 padding:10px 11px;margin-top:6px;background:rgba(255,255,255,.03);
 border:1px solid var(--line);border-radius:6px}
.pqcard:active{background:#1b1409}
.pqcard .pqt{font:12px/1 Cinzel,serif;letter-spacing:1.8px;color:var(--parch)}
.pqcard .pqs{font-size:11.5px;color:var(--dim2)}
.wcfg{border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.02);
 margin:2px 0 8px;overflow:hidden}
.wcfghit{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
 padding:9px 10px;background:none;border:0;min-height:44px}
.wcfgmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wcfgttl{font:10.5px/1.25 Cinzel,serif;letter-spacing:1.4px;color:var(--parch)}
.wcfgsub{font-size:11.5px;color:var(--dim2)}
.wcfgact{font:9px/1 Cinzel,serif;letter-spacing:1.5px;color:var(--amber);
 border:1px solid var(--line);border-radius:3px;padding:5px 7px;white-space:nowrap}
.wcfgbody{padding:0 10px 10px}
.qrow.pending{opacity:.62}
.qrow.pending .qhit{cursor:default}
.qrow.pending .qmedal img{filter:grayscale(.75) brightness(.7)}
.qsoon{font:9px/1 Cinzel,serif;letter-spacing:1.6px;color:var(--bg);background:var(--dim2);
 border-radius:3px;padding:3px 6px;align-self:center;white-space:nowrap}
.trktick{margin-top:7px;display:flex;flex-direction:column;gap:4px}
.tickrow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
 padding:6px 7px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:4px;
 min-height:34px}
.tickbox{flex:0 0 16px;width:16px;height:16px;border:1px solid var(--dim2);border-radius:3px;
 display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--bg);line-height:1}
.tickbox.on{background:var(--amber);border-color:var(--amber)}
.ticklbl{font:10.5px/1.25 Cinzel,serif;letter-spacing:1.1px;color:var(--dim2);flex:1;min-width:0}
.tickmenu{padding:2px 0 4px}
.trkpanel{padding:12px 12px 13px}
.trkrow{display:flex;flex-direction:column;align-items:stretch;gap:5px}
.trklbl{font:11px/1 Cinzel,serif;letter-spacing:1.4px;color:var(--dim2)}
.trkdue{font-size:9px;letter-spacing:1px;color:var(--bg);background:var(--amber);
 border-radius:3px;padding:2px 4px;vertical-align:1px}
.trkseg{display:flex;gap:4px;width:100%}
.trkopt{flex:1 1 0;min-width:0;min-height:36px;padding:6px 4px;cursor:pointer;
 font:11px/1 Cinzel,serif;letter-spacing:1.2px;color:var(--dim2);
 background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:4px}
.trkopt.on{color:var(--bg);background:var(--amber);border-color:var(--amber)}
.trknote{margin-top:6px;font-size:12px;color:var(--dim)}
.trknote.dim{color:var(--faint)}
.cutproj{margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:5px;
 background:rgba(255,255,255,.03);text-align:center}
.cutbig{font:16px/1.3 Cinzel,serif;letter-spacing:1px;color:var(--amber);margin-bottom:3px}
@media (prefers-reduced-motion:no-preference){
 .trkdue{animation:trkpulse 2.4s ease-in-out infinite}
 @keyframes trkpulse{0%,100%{opacity:1}50%{opacity:.55}}}
/* Short screens: compress the fixed bands first. Scrolling is only the final fallback
   when a keyboard reduces the visual viewport below a usable height. */
@media(max-height:700px){
 .gatein.top{padding-top:calc(env(safe-area-inset-top) + 4px)}
 .gatelogo{width:min(78vw,280px)}
 .gatemotto{font-size:9px;margin-top:0}
 .gatepanel{padding-top:8px;padding-bottom:7px}
 .gateh{margin-bottom:3px}
 .gatelbl{margin-top:4px}
 .gateinput{height:40px}
 .gatebtn{height:40px;margin-top:5px}
 .gatelink{min-height:30px;padding-top:4px;padding-bottom:4px}
}
@media(max-height:560px){
 html.gate-active,html.gate-active body{overflow:auto}
 .gate{height:auto;min-height:100dvh;grid-template-rows:auto minmax(130px,24dvh) auto;overflow-y:auto}
}
/* Desktop keeps the same vertical hierarchy; only the available widths increase. */
@media(min-width:760px){
 .gate{background-image:url("grafika/UX/gate/gate-bg-v3.webp")}
 .gatein.top{max-width:560px;padding-top:calc(env(safe-area-inset-top) + 12px)}
 .gatein.bottom{max-width:440px;padding-left:0;padding-right:0;padding-bottom:18px}
 .gatelogo{width:min(460px,76vw)}
 .gatemotto{font-size:11px}
}
@media(min-width:760px) and (max-height:760px){
 .gatein.top{padding-top:8px}
 .gatelogo{width:340px}
 .gatemotto{font-size:9px}
 .gatein.bottom{padding-bottom:8px}
}
.gate.reset{display:flex;align-items:center;justify-content:center;height:100dvh;overflow-y:auto}
.gate.reset .gatein{max-width:430px;padding:calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 16px)}
@media(prefers-reduced-motion:reduce){.gatebtn.primary:active{transform:none}}

/* ===== PUBLIC INVITATION (mb- namespace, invite view only) ===== */
/* The invitation is a complete public surface. It must not inherit the in-game rig,
   the 560px app-column cap, or the gameplay page padding. */
/* The invite background is ONE piece of art, never tiled. It is 724x3475 (1:4.8), so at
   100% width it renders 4.8 screens tall - long, but the invite page is longer still, and
   repeat-y therefore wrapped the bright sky back under the dark chasm floor. That seam was
   the repeat. It is now no-repeat, and the page colour below it is the art's OWN bottom
   edge (sampled: rgb(10,8,5)), so the artwork ends by fading into the page instead of
   restarting. Changing this back to repeat-y will bring the seam back. */
html.invite-active body{padding:0!important;background:#0a0805!important}
html.invite-active #app{display:block!important;max-width:none!important;min-height:100svh!important;margin:0!important}
html.invite-active #rig,html.invite-active #tabs{display:none!important}
.mb{--ivory:#f4ead7;--gold:#d9b441;--goldlt:#f1d779;--dim:#c8bda8;--faint:#9d9079;
 /* THE house yellow + ink outline, lifted from the GET FIT. RAID HARD. motto. Every light
    yellow text on the invite uses this pair so nothing dissolves into bright artwork:
    a blur-0 shadow in four directions reads as a stroke without -webkit-text-stroke
    (which thins glyphs on iOS), then soft dark halos pull the text off the background. */
 --sun:#ffdf8a;
 --ink:0 0 1px #000, 1px 0 1px #000, -1px 0 1px #000, 0 1px 1px #000, 0 -1px 1px #000,
  1px 1px 2px #000, -1px 1px 2px #000, 1px -1px 2px #000, -1px -1px 2px #000,
  0 3px 16px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.8);
 --rail:clamp(38px,11vw,92px);           /* thicker again: 30-76 still read as thin */
 /* All rail anchors are fractions of the BAR ART's rendered width, not the viewport:
    the divider (2031x557) renders at the container's width, and the container is capped
    at 1440px from 760px up, so vw units drift on wide screens. --mbw is the bar width. */
 --mbw:min(100vw,1440px);
 /* MEASURED off the rendered divider: each end medallion has a pendant point beneath it,
    and the rail must emerge from exactly that point (per screenshot annotation 2026-08-23).
    Orc (left) pendant: centre 4.8% in from the left edge, tip 10.8% of width down.
    Elf (right) pendant: centre 6.8% in from the right edge, tip 12.0% of width down.
    (As fractions of the bar's 27.42%-of-width height, those tips are 39.4% and 43.8%.) */
 --orc-cx:calc(var(--mbw) * .048);
 --orc-tip:calc(var(--mbw) * .108);
 --elf-cx:calc(var(--mbw) * .068);
 --elf-tip:calc(var(--mbw) * .120);
 /* The shaft's flat cut hides this far up behind the opaque pendant point; raise if a
    hairline of the cut ever peeks beside the pendant on a given device. */
 --rail-tuck:calc(var(--mbw) * .006);
 position:relative;isolation:isolate;min-height:100svh;
 overflow:hidden;color:var(--ivory);font-family:Georgia,'Times New Roman',serif;
 padding-bottom:calc(154px + env(safe-area-inset-bottom));background:#0a0805}
/* THE ARTWORK SPANS THE PAGE, EDGE TO EDGE, EXACTLY ONCE - and it SCROLLS.
   History of this rule, so it is not "fixed" a third time:
   (1) background-size:100% auto scales by WIDTH: 724x3475 art rendered ~6900px tall on a
       1440px desktop (longer than the page, no visible repeat) but only ~1870px on a 390px
       phone, which the page outruns - so repeat-y wrapped the sky back under the chasm
       floor. Same CSS, opposite result, purely from viewport width.
   (2) A position:fixed cover layer killed the repeat but also killed the scroll, and the
       descent through the chasm IS the composition. Rejected by the artist.
   The art was made to span the whole page: sky at the top of the page, chasm floor at the
   bottom, one pass. So the layer is ABSOLUTE (scrolls with the page, spans the full .mb
   height) and the size is 100% 100% - top pinned to page top, bottom to page bottom, at any
   viewport and any page length. The vertical stretch this implies is invisible on a
   composition that is entirely vertical. Nothing tiles because nothing repeats. */
.mb::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:#0a0805 url("grafika/marketing/invite/background.webp") center/100% 100% no-repeat}
.mb *{box-sizing:border-box}
.mb img{max-width:100%;display:block}
.mbsr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
 overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* The bar sits ABOVE the rails in z-order. Each rail is centred under the pendant point
   of the bar's own end medallion and starts at that point - the bar's medallion IS the
   rail's cap. The rails' own decorative heads are not rendered at all (top border-width
   0), which is what "the bar covers the rail's medallion" looks like without needing the
   head to fit inside the medallion silhouette at every viewport width. */
/* The negative margin pulled the hero up UNDER the bar, so the logo overlapped and clipped
   it. The bar now keeps its own space and the hero starts cleanly below it. */
/* A fixed height with overflow:hidden cropped the ornate ends off the divider top and
   bottom. The bar now takes its height from the art's own ratio (2031x557), so the whole
   piece is always shown - finials, gem and all - at any width. */
.mbtop{position:relative;z-index:6;width:100%;pointer-events:none;margin-bottom:0;
 line-height:0}
.mbtop img{width:100%;height:auto;display:block;
 filter:drop-shadow(0 5px 12px rgba(0,0,0,.7))}
/* THREE-SLICE, NOT TILED. repeat-y tiled the whole spire - ornate cap and finial included -
   which is what produced the repeating seams down the page. border-image slices the art
   into a top cap, a bottom finial and a middle shaft: the caps render at their natural
   proportions and only the shaft stretches, so the rail runs the full height as one piece.
   The shaft is a uniform ribbed column, so vertical stretch is invisible on it. */
.mbrail{position:absolute;bottom:0;width:var(--rail);z-index:4;
 pointer-events:none;filter:drop-shadow(0 0 8px #000);
 border-style:solid;border-left-width:0;border-right-width:0;
 border-image-repeat:stretch;border-color:transparent}
/* Top slice percentages still mark where each art's decorative head ends (orc 318x1836
   ~19% head / ~14% finial; elf 261x1745 ~18% / ~13%) so the stretching middle region
   stays head-free - but the top border WIDTH is 0, so the head never draws. The rail
   therefore opens directly with shaft, emerging from behind the bar medallion's pendant.
   Bottom finials unchanged. */
.mbrail.orc{left:calc(var(--orc-cx) - var(--rail)/2);
 top:calc(var(--orc-tip) - var(--rail-tuck));
 border-image-source:url("grafika/marketing/invite/frame-side-orc.webp");
 border-image-slice:19% 0 14% 0 fill;
 border-width:0 0 calc(var(--rail) * 0.81) 0;
 border-image-width:0 0 calc(var(--rail) * 0.81) 0}
.mbrail.elf{right:calc(var(--elf-cx) - var(--rail)/2);
 top:calc(var(--elf-tip) - var(--rail-tuck));
 border-image-source:url("grafika/marketing/invite/frame-side-elf.webp");
 border-image-slice:18% 0 13% 0 fill;
 border-width:0 0 calc(var(--rail) * 0.87) 0;
 border-image-width:0 0 calc(var(--rail) * 0.87) 0}
.mb .wrap{position:relative;z-index:2;width:100%;max-width:1040px;margin:0 auto;
 /* rails now sit inboard of the edges; the elf side reaches deepest, and both paddings
    use that inset so centred content stays centred */
 padding-left:calc(var(--elf-cx) + var(--rail)/2 + 8px);
 padding-right:calc(var(--elf-cx) + var(--rail)/2 + 8px)}
/* z-index:1 puts every section above the fixed ::before backdrop (z 0). Without it a
   section with its own background would be painted underneath the artwork. */
.mb section{position:relative;z-index:1;padding:34px 0}
.mb h1,.mb h2,.mb .mbmotto,.mb .mbsummon,.mb .mbbenefit,.mb .mbstamp,.mb .mbsticker span,
.mb .mbeyebrow,.mb .mbstepno,.mb .mbstep h3,.mb .mbphase,.mb .mbtrust span,.mb .mbfinalsteps{
 font-family:Cinzel,serif;font-weight:500;text-align:center}
.mb h1,.mb h2{margin:0;color:var(--ivory);font-size:clamp(25px,7vw,42px);line-height:1.08;
 letter-spacing:.7px;text-wrap:balance;text-shadow:0 3px 14px #000}
.mb p{margin:10px auto 0;max-width:48ch;color:var(--dim);font-size:clamp(15px,3.9vw,18px);
 line-height:1.55;text-align:center;text-wrap:pretty;text-shadow:0 2px 10px #000}
.mbhero{padding:clamp(6px,2vw,18px) 0 30px}
.mblogo{width:min(92%,580px);height:auto;margin:0 auto;filter:drop-shadow(0 7px 18px #000)}
.mbword{font-family:Cinzel,serif;font-size:30px;letter-spacing:3px;color:var(--sun);text-shadow:var(--ink);text-align:center}
/* The motto sat over the brightest part of the artwork at 12-17px and dissolved into it.
   Larger, brighter, outlined - the treatment now lives in --sun/--ink on .mb and is shared
   by every light yellow text below. */
.mbmotto{margin:0 auto 14px;color:var(--sun);font-size:clamp(16px,5vw,26px);
 letter-spacing:clamp(2.5px,1vw,6px);font-weight:600;text-shadow:var(--ink)}
.mbsummon{display:table;max-width:94%;margin:0 auto 24px;padding:10px 20px;color:var(--sun);
 text-shadow:var(--ink);font-size:clamp(11px,3.4vw,15px);letter-spacing:2.2px;border:1px solid rgba(222,177,49,.78);
 border-radius:6px;background:linear-gradient(90deg,rgba(76,13,9,.88),rgba(37,24,10,.88),rgba(88,51,8,.88));
 box-shadow:inset 0 0 16px rgba(255,184,39,.1),0 5px 20px rgba(0,0,0,.65)}
.mbsummon.checking{color:var(--ivory);border-color:rgba(244,234,215,.52)}
.mbsummon.invalid{color:#ffd0ba;border-color:rgba(211,92,54,.8);
 background:linear-gradient(90deg,rgba(75,16,10,.94),rgba(35,14,10,.94),rgba(75,16,10,.94))}
.mblead{max-width:680px!important;margin-top:14px!important;color:var(--ivory)!important;font-size:clamp(16px,4.1vw,20px)!important}
.mbsub{margin-top:9px!important;color:var(--sun)!important;text-shadow:var(--ink)!important;
 font-family:Cinzel,serif;
 font-size:clamp(12px,3.5vw,17px)!important;letter-spacing:1.4px;text-transform:uppercase}
.mbtrust{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:20px auto 0;max-width:760px}
.mbtrust span{padding:8px 11px;border:1px solid rgba(217,180,65,.45);border-radius:999px;
 color:var(--ivory);background:rgba(7,6,5,.78);box-shadow:0 4px 14px rgba(0,0,0,.45);
 font-size:clamp(9px,2.7vw,11px);letter-spacing:.75px}
.mbeyebrow{margin:0 0 8px;color:var(--sun);font-size:clamp(10px,3vw,13px);letter-spacing:2.5px;text-shadow:var(--ink)}
/* Same crop as the top bar: a fixed height plus overflow:hidden cut the ornate ends off
   every section divider. Height comes from the art's own ratio instead. */
/* The body dividers ran the full page width and pierced the side rails. They now stop
   short of them: the rail is --rail wide on each side, plus a small gap so the ornate ends
   read as ending rather than being cut off by the frame. */
.mbdivider{position:relative;z-index:3;margin:6px 0;line-height:0;
 padding:0 calc(var(--elf-cx) + var(--rail)/2 + 14px)}
.mbdivider img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 10px #000)}
/* Native, manual, mobile-first swipe carousels. */
.mbcar{--slide:min(78vw,540px);position:relative;margin-top:24px}
.mbtrack{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
 -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-inline:contain;
 padding:3px max(1%,calc((100% - var(--slide))/2)) 8px;scroll-padding-inline:max(1%,calc((100% - var(--slide))/2))}
.mbtrack::-webkit-scrollbar{display:none}
.mbtrack:focus-visible{outline:2px solid var(--goldlt);outline-offset:3px;border-radius:12px}
.mbslide{flex:0 0 var(--slide);scroll-snap-align:center;margin:0;border:1px solid rgba(193,151,40,.58);
 border-radius:14px;overflow:hidden;background:rgba(6,5,4,.9);box-shadow:0 10px 28px rgba(0,0,0,.64)}
.mbslide img{width:100%;height:auto;max-height:min(74svh,780px);object-fit:contain;background:rgba(0,0,0,.35)}
.mbslide figcaption{min-height:76px;padding:13px 16px 14px;color:var(--ivory);font-size:14px;line-height:1.42;text-align:center;
 border-top:1px solid rgba(217,180,65,.25);background:linear-gradient(180deg,rgba(27,19,10,.98),rgba(9,7,5,.98))}
.mbslide figcaption strong{display:block;margin-bottom:3px;color:var(--sun);font-family:Cinzel,serif;font-size:12px;letter-spacing:1.2px}
.mbnav{position:absolute;top:calc(50% - 44px);z-index:3;width:46px;height:46px;border:1px solid rgba(255,223,138,.72);
 border-radius:50%;color:var(--sun);background:rgba(8,6,4,.88);box-shadow:0 5px 18px rgba(0,0,0,.7);cursor:pointer;
 font:24px/1 Georgia,serif;display:none;align-items:center;justify-content:center}
.mbnav.prev{left:5px}.mbnav.next{right:5px}.mbnav:disabled{opacity:.28;cursor:default}
.mbnav:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
/* The dots wear the same house yellow as the motto and the same black silhouette idea:
   a hard 2px black ring (box-shadow, so it sits OUTSIDE the border) keeps them readable
   over bright slide artwork, where the old translucent dots were merging in. */
.mbdots{display:flex;gap:0;justify-content:center;margin-top:4px}
.mbdot{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.mbdot::after{content:"";position:absolute;inset:15px;border-radius:50%;background:rgba(255,223,138,.3);
 border:1px solid rgba(255,223,138,.85);box-shadow:0 0 0 2px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.65)}
.mbdot[aria-current="true"]::after{background:var(--sun);border-color:var(--sun);
 box-shadow:0 0 0 2px rgba(0,0,0,.9),0 0 10px rgba(255,223,138,.65)}
.mbdot:focus-visible{outline:2px solid var(--sun);outline-offset:4px}
.mbsteps{display:grid;grid-template-columns:1fr;gap:10px;margin:22px auto 4px;max-width:900px;counter-reset:mbstep}
.mbstep{position:relative;padding:18px 15px 17px;border:1px solid rgba(193,151,40,.44);border-radius:12px;
 background:linear-gradient(180deg,rgba(25,17,9,.9),rgba(7,6,5,.9));box-shadow:0 8px 24px rgba(0,0,0,.48)}
.mbstepno{width:34px;height:34px;margin:0 auto 9px;display:grid;place-items:center;border:1px solid rgba(255,223,138,.65);
 border-radius:50%;color:var(--sun);background:rgba(0,0,0,.45);font-size:13px}
.mbstep h3{margin:0;color:var(--ivory);font-size:14px;letter-spacing:1.7px}
.mbstep p{margin-top:6px!important;font-size:14px!important;line-height:1.45!important}
.mbbenefit{display:table;max-width:92%;margin:4px auto 25px;padding:10px 18px;border:1px solid rgba(207,170,65,.65);
 border-radius:6px;color:var(--sun);text-shadow:var(--ink);font-size:clamp(11px,3.4vw,15px);letter-spacing:1px;
 background:rgba(12,9,6,.82);box-shadow:inset 0 0 12px rgba(219,172,47,.08),0 4px 18px #000}
.mbstickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.mbsticker{position:relative;min-width:0;text-align:center;padding:9px 7px 10px;border:1px solid rgba(193,151,40,.42);
 border-radius:14px;background:rgba(7,6,5,.72);box-shadow:0 7px 18px rgba(0,0,0,.42)}
.mbsticker img{display:block!important;width:100%!important;max-width:180px!important;height:auto!important;
 aspect-ratio:auto!important;margin:0 auto!important;border-radius:0!important;object-fit:contain!important;
 filter:drop-shadow(0 5px 8px rgba(0,0,0,.75))}
.mbsticker span{display:block;margin-top:7px;color:var(--sun);text-shadow:var(--ink);
 font-size:clamp(10px,2.8vw,13px);
 line-height:1.15;letter-spacing:.8px}
.mbsticker em{display:block;margin-top:5px;color:var(--dim);font:normal 9px/1.25 Cinzel,serif;letter-spacing:.9px}
.mbsticker.live{border-color:rgba(241,215,121,.8);background:linear-gradient(180deg,rgba(41,29,12,.86),rgba(7,6,5,.82));
 box-shadow:inset 0 0 20px rgba(217,180,65,.08),0 7px 18px rgba(0,0,0,.5)}
.mbsticker.soon img{filter:grayscale(.58) brightness(.72) drop-shadow(0 5px 8px rgba(0,0,0,.75));opacity:.78}
.mbstamp{margin:12px 0 0;color:var(--faint);font-size:11px;letter-spacing:1.3px}
.mbphase{display:table;margin:16px auto 0;padding:8px 13px;border:1px solid rgba(217,180,65,.5);border-radius:5px;
 color:var(--sun);background:rgba(7,6,5,.75);font-size:10px;letter-spacing:1.3px;text-shadow:var(--ink)}
.mbfinal{max-width:760px;margin:0 auto;padding:24px 18px;border:1px solid rgba(217,180,65,.58);border-radius:14px;
 background:radial-gradient(circle at 50% 0,rgba(113,71,19,.3),rgba(7,6,5,.91) 62%);box-shadow:0 12px 36px rgba(0,0,0,.6)}
.mbfinalsteps{margin-top:17px;color:var(--sun);font-size:clamp(9px,2.7vw,12px);line-height:1.7;letter-spacing:1px;text-shadow:var(--ink)}
.mbfoot{position:relative;z-index:2;text-align:center;font-size:11px;color:var(--faint);
 line-height:1.75;padding:4px calc(var(--elf-cx) + var(--rail)/2 + 14px) 18px;text-shadow:0 2px 8px #000}
/* The only action button on the invite: fixed and artwork-skinned. */
.mbsticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:7px 12px calc(7px + env(safe-area-inset-bottom));
 background:linear-gradient(180deg,transparent,rgba(6,4,3,.9) 42%,#080604);transform:translateY(120%);
 transition:transform .22s ease;pointer-events:none}
.mbsticky.on{transform:none;pointer-events:auto}
.mbcta{display:block;width:100%;max-width:460px;aspect-ratio:2048/624;height:auto;margin:0 auto;border:0;padding:0;
 cursor:pointer;background:url("grafika/marketing/invite/cta-split.webp") center/100% 100% no-repeat;
 filter:drop-shadow(0 5px 14px rgba(0,0,0,.72));position:relative}
.mbctatxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 font-family:Cinzel,serif;font-size:clamp(14px,4.2vw,20px);letter-spacing:3px;
 color:var(--sun);text-shadow:var(--ink)}
.mbcta:active{transform:translateY(1px)}
.mbcta:disabled{cursor:not-allowed;filter:grayscale(.7) brightness(.62) drop-shadow(0 5px 14px rgba(0,0,0,.72))}
.mbcta:focus-visible{outline:3px solid var(--goldlt);outline-offset:2px}
.mbrise{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
.mbrise.mbqueued{opacity:0;transform:translateY(10px)}
.mbrise.in{opacity:1;transform:none}
@media(max-width:380px){
 /* pendant anchors are art-relative so they need no small-screen override; the wrap
    padding calc already tracks the thinner rail */
 .mb{--rail:32px}
 .mbtop{height:105px}.mbstickers{gap:9px}.mb section{padding:25px 0}
}
@media(min-width:760px){
 .mb{max-width:1440px;margin:0 auto;box-shadow:0 0 55px #000}
 .mb .wrap{max-width:1040px}.mb section{padding:52px 0}
 .mbsteps{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
 .mbnav{display:flex}
 .mbstickers{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 14px}.mbhero{padding-bottom:34px}
 .mbsticker img{max-width:190px!important}
}
@media(prefers-reduced-motion:reduce){
 .mbrise,.mbrise.mbqueued{opacity:1;transform:none;transition:none}.mbtrack{scroll-behavior:auto}.mbcta:active{transform:none}
}
/* ===== BODY ===== */
.bsnap{margin-top:10px;padding:10px;border:1px solid var(--bgold);border-radius:10px;
 background:linear-gradient(180deg,#1a1309,#100b06)}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#241c10;border-radius:7px;overflow:hidden}
.bst{display:flex;flex-direction:column;gap:2px;padding:9px 10px;background:#110c06}
.bstl{font-size:8.5px;letter-spacing:1px;color:var(--faint)}
.bstv{font-family:Cinzel,serif;font-size:19px;color:var(--parch);font-variant-numeric:tabular-nums}
.bsts{font-size:9.5px;color:var(--dim2);font-variant-numeric:tabular-nums}
.bwarn{margin-top:8px;padding:9px 11px;border:1px solid #7a5a1e;border-left:3px solid var(--amber);
 border-radius:8px;background:linear-gradient(180deg,#1e1608,#140e07)}
.bwh{font-family:Cinzel,serif;font-size:11px;letter-spacing:2px;color:var(--amber);margin-bottom:2px}
.trendtabs{display:flex;gap:4px;margin:6px 0}
.trendbox{border:1px solid #33291a;border-radius:8px;background:#110c06;padding:8px 10px 6px;margin-top:4px}
.trendsvg{width:100%;height:64px;display:block}
.trendfoot{display:flex;justify-content:space-between;gap:8px;margin-top:4px;
 font-size:9.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.bfields{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#241c10;border-top:1px solid #241c10}
.bfield{display:flex;flex-direction:column;gap:3px;padding:8px 10px;background:#110c06}
.bfield label{font-size:8.5px;letter-spacing:1px;color:var(--faint)}
.bfield span{display:flex;align-items:center;gap:5px}
.bfield input{width:100%;min-height:40px;box-sizing:border-box;font-size:16px;text-align:center;
 font-family:Cinzel,serif}
.bfield i{font-style:normal;font-size:10px;color:var(--dim2)}
.poserow{display:flex;gap:6px;margin:8px 0}
.poserow button{flex:1;min-height:44px}
.galrow{display:flex;align-items:center;gap:8px;margin:10px 0 4px}
.galttl{font-family:Cinzel,serif;font-size:11px;letter-spacing:2px;color:var(--gold)}
.galrow .chip{margin-left:auto}
.sheetwrap{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:60;display:flex;
 align-items:flex-end;justify-content:center;padding:0}
.sheet{width:100%;max-width:560px;max-height:86vh;overflow-y:auto;
 background:linear-gradient(180deg,#1a1309,#0d0906);border:2px solid var(--bgold);
 border-radius:14px 14px 0 0;padding:14px 12px calc(18px + env(safe-area-inset-bottom))}
@media(max-width:360px){.bgrid,.bfields{grid-template-columns:1fr}}
/* ===== CAMPAIGN ARCHIVE ===== */
.campcard,.pastcard{border:1px solid var(--bgold);border-radius:10px;overflow:hidden;
 background:linear-gradient(180deg,#1a1309,#100b06);margin-top:8px}
.pastcard{border-color:#33291a;background:#130d07}
.camphit{display:flex;align-items:center;gap:9px;width:100%;padding:10px;min-height:52px;
 background:transparent;border:0;text-align:left;color:inherit;font-family:inherit;cursor:pointer}
.camphit:focus-visible{outline:2px solid var(--dgold);outline-offset:-2px}
.campcard.open .optchev,.pastcard.open .optchev{transform:rotate(180deg)}
.campbadge{flex:0 0 auto;font-size:8.5px;letter-spacing:1.5px;border:1px solid;border-radius:4px;
 padding:3px 6px;align-self:flex-start}
.campbadge.active{color:var(--gold);border-color:var(--bgold)}
.campbadge.sealed{color:var(--dim2);border-color:#3a3020}
.campmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.campname{font-family:Cinzel,serif;font-size:13px;letter-spacing:1px;color:var(--parch);line-height:1.15}
.campsub{font-size:10.5px;color:var(--dim2);font-variant-numeric:tabular-nums}
.campbody{padding:10px;border-top:1px solid #241c10}
.csec{font-family:Cinzel,serif;font-size:10px;letter-spacing:2px;color:var(--dim2);
 margin:12px 0 6px;padding-bottom:3px;border-bottom:1px solid #2a2013}
.campbody .csec:first-child{margin-top:0}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#241c10;border:1px solid #241c10;
 border-radius:7px;overflow:hidden}
.cst{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:#110c06}
.cstl{font-size:8.5px;letter-spacing:1px;color:var(--faint)}
.cstv{font-family:Cinzel,serif;font-size:15px;color:var(--parch);font-variant-numeric:tabular-nums}
.ctl{display:flex;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px solid #1d160c;font-size:12px}
.ctl:last-child{border-bottom:0}
.ctdot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#241c10;border:1px solid #3a3020}
.ctdot.on{background:var(--gold);border-color:var(--gold)}
.ctmid{flex:1;min-width:0}
.ctv{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:360px){.cgrid{grid-template-columns:1fr}}
.qstrip{width:100%;cursor:pointer;font-family:inherit}
.qstrip:focus-visible{outline:2px solid var(--dgold);outline-offset:1px}
.qstripinfo{margin-top:4px;padding:8px 10px;border:1px solid #241c10;border-radius:8px;
 background:#110c06;font-size:10.5px;color:var(--dim2);line-height:1.5}
.qstripinfo b{color:var(--gold);font-weight:400;letter-spacing:1px;font-size:9.5px}
/* ===== WAR LOG ===== */
.lgfilts{display:flex;gap:4px;margin:9px 0 4px}
.lgfilt{flex:1;min-width:0;min-height:36px;padding:0 2px;border:1px solid #33291a;border-radius:7px;background:#140e07;
 color:var(--dim2);font-family:Cinzel,serif;font-size:9.5px;letter-spacing:1px;cursor:pointer}
.lgfilt:focus-visible{outline:2px solid var(--dgold);outline-offset:1px}
.lgfilt.on{color:var(--gold);border-color:var(--bgold);background:linear-gradient(180deg,#241a0c,#171008)}
.lgrow{border:1px solid #241c10;border-radius:8px;background:#140e07;margin-top:6px;overflow:hidden;
 border-left-width:3px}
/* Whole-row status: tint, border and flag together - never colour alone. */
.lgrow.st-ok{border-color:#3f6f35;border-left-color:#4fae44;background:linear-gradient(180deg,#16200f,#121a0d)}
.lgrow.st-warn{border-color:#6e5620;border-left-color:var(--amber);background:linear-gradient(180deg,#1e1808,#161206)}
.lgrow.st-bad{border-color:#6e2a24;border-left-color:#c0261f;background:linear-gradient(180deg,#1e1210,#170e0d)}
.lgrow.st-now{border-color:#4a3d28;border-left-color:var(--gold);background:linear-gradient(180deg,#1c1509,#140e07)}
.lgrow.st-future,.lgrow.st-pre,.lgrow.st-none{opacity:.62;border-left-color:#2a2013}
.lgrow.open{filter:saturate(.7)}
.lgflag{width:18px;height:18px;flex:0 0 18px;border-radius:50%;display:flex;align-items:center;
 justify-content:center;font-size:10px;border:1px solid #3a3020;color:var(--faint)}
.st-ok .lgflag{border-color:#4fae44;color:#7ad06c}
.st-warn .lgflag{border-color:var(--amber);color:var(--amber)}
.st-bad .lgflag{border-color:#c0261f;color:#d9564a}
.st-now .lgflag{border-color:var(--gold);color:var(--gold)}
.lgrow.open{border-color:#3a3020}
.lghit{display:flex;align-items:center;gap:9px;width:100%;padding:10px;min-height:52px;
 background:transparent;border:0;text-align:left;color:inherit;font-family:inherit;cursor:pointer}
.lghit:focus-visible{outline:2px solid var(--dgold);outline-offset:-2px}
.lgrow.open .optchev{transform:rotate(180deg)}
.lgdot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#2a2013;border:1px solid #3a3020}
.lgdot.ok{background:#4fae44;border-color:#4fae44}
.lgdot.now{background:var(--amber);border-color:var(--amber)}
.lgmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lgday{font-family:Cinzel,serif;font-size:12.5px;letter-spacing:1px;color:var(--parch);
 font-variant-numeric:tabular-nums}
.lgprev{font-size:10.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-variant-numeric:tabular-nums}
.lgxp{font-family:Cinzel,serif;font-size:14px;color:var(--gold);white-space:nowrap;
 font-variant-numeric:tabular-nums}
.lgbody{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#241c10;
 border-top:1px solid #241c10}
.lgc{display:flex;justify-content:space-between;align-items:baseline;gap:6px;
 padding:8px 10px;background:#110c06}
.lgl{font-size:9.5px;letter-spacing:1px;color:var(--faint)}
.lgv{font-size:13px;color:var(--parch);font-variant-numeric:tabular-nums;text-align:right}
@media(max-width:380px){.lgbody{grid-template-columns:1fr}}
/* ===== QUEST BOARD ===== */
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:7px;margin-top:8px}
.qrow{position:relative;border:1px solid var(--bgold);border-radius:9px;overflow:hidden;
 background:linear-gradient(180deg,#1a1309,#100b06)}
.qrow.done{border-color:#3f6f35}
.qhit{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;min-height:62px;
 background:transparent;border:0;text-align:left;color:inherit;font-family:inherit;cursor:pointer}
.qhit:focus-visible{outline:2px solid var(--dgold);outline-offset:-2px}
.qmedal{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:flex;align-items:center;
 justify-content:center;background:radial-gradient(circle at 35% 30%,#33260f,#120c05);
 border:1px solid var(--bgold);overflow:hidden}
.qmedal.sm{width:34px;height:34px;flex:0 0 34px}
.qmedal img{width:34px;height:34px;object-fit:contain;display:block}
.qmedal.sm img{width:27px;height:27px}
.qmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.qttl{font-family:Cinzel,serif;letter-spacing:1px;font-size:14px;color:var(--gold);line-height:1.15}
.qstat{font-size:11.5px;color:var(--dim2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qctl{display:flex;align-items:center;gap:4px;flex:0 0 auto}
/* CASUAL verdict pills. A tap target, not a number field - the whole point of casual is that
   the day can be answered without typing. Sized to the same 40px min-height as the inputs
   beside them so the quest rows keep one rhythm. */
/* MODE COMPARISON in the creator. Both modes are always shown because the choice is permanent;
   the selected one is raised out of the page rather than the other being hidden. */
.modeinfo{margin:8px 0 0;padding:10px 12px;border-radius:10px;
 border:1px solid rgba(201,162,39,.28);background:rgba(255,255,255,.02);opacity:.55;
 transition:opacity .18s ease,border-color .18s ease,background .18s ease}
.modeinfo.on{opacity:1;border-color:var(--gold);background:rgba(201,162,39,.07)}
.mihead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.mitag{font-family:Cinzel,serif;font-size:12px;letter-spacing:1.6px;color:var(--gold)}
.misub{font-size:10px;letter-spacing:.6px;color:var(--dim2)}
.milist{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.milist li{display:flex;gap:7px;align-items:baseline;font-size:11px;line-height:1.35}
.milist li b{flex:0 0 78px;font-family:Cinzel,serif;font-weight:500;font-size:10px;
 letter-spacing:.7px;color:var(--parch)}
.milist li span{flex:1;min-width:0;color:var(--dim2)}
.milist li::before{content:"";flex:0 0 4px;height:4px;border-radius:50%;
 background:var(--dgold);transform:translateY(-2px)}
.milist.wk li::before{background:var(--dim2)}
.miwk{margin:8px 0 3px;font-family:Cinzel,serif;font-size:9px;letter-spacing:1.6px;color:var(--faint)}
.mifoot{display:grid;gap:3px;margin-top:9px;padding-top:8px;
 border-top:1px solid rgba(201,162,39,.16);font-size:10.5px;line-height:1.4;color:var(--dim2)}
.mifoot b{color:var(--dim);font-weight:600}
/* The permanence notice. Deliberately plain and red-edged: this is the one decision in the
   creator that cannot be undone, so it must not read as decoration. */
.modewarn{margin:11px 0 2px;padding:9px 12px;border-radius:8px;
 border:1px solid rgba(176,58,46,.6);background:rgba(176,58,46,.1);text-align:center}
.modewarn b{display:block;font-family:Cinzel,serif;font-size:11px;letter-spacing:1.7px;color:var(--red2)}
.modewarn span{display:block;margin-top:3px;font-size:10.5px;color:var(--dim)}
/* RAID TIER cards. The hardcore tier is only ever rendered for hardcore accounts, so its
   heavier treatment marks the better rewards rather than teasing something unreachable. */
.raidtier{margin:8px 0;padding:10px;border-radius:11px;
 border:1px solid rgba(201,162,39,.3);background:rgba(255,255,255,.02)}
.raidtier.hard{border-color:var(--gold);background:rgba(201,162,39,.08)}
.raidtier .rtitle{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.raidtier .rtitle b{font-family:Cinzel,serif;font-size:12px;letter-spacing:1.5px;color:var(--gold)}
.raidtier .rtrew{margin-bottom:8px;line-height:1.4;color:var(--dim2)}
.rtpet{display:block;width:96px;height:96px;margin:2px auto 6px;object-fit:contain;
 filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
/* ===== PET-DROP FOOTER ===== */
/* An upgrade of the old one-line drop-rate row, in the same place at the bottom of the
   encounter card: miniature left, label+name middle, rate+rarity right. ~64-72px tall.
   The pets are transparent renders with their own painted auras, so the image area is a
   frameless contain box - no circle crop, no CSS glow smearing them into coloured squares. */
/* Tester-only character slots. Deliberately plain - this is a workbench control, not part
   of the campaign's furniture, and it must never read as something a player has earned. */
.tslots{margin-top:10px;padding:8px;border:1px dashed #4a3d28;border-radius:9px;text-align:center}
.tslotrow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.tslot{flex:1 1 78px;min-width:78px;display:flex;flex-direction:column;gap:1px;padding:6px 4px;
 border:1px solid #3a2c14;border-radius:7px;background:#120d07;color:var(--dim2);
 font-family:inherit;cursor:pointer}
.tslot b{font-family:Cinzel,serif;font-size:9px;letter-spacing:1.2px;color:var(--parch)}
.tslot i{font-style:normal;font-size:10px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap}
.tslot u{text-decoration:none;font-size:7.5px;letter-spacing:.8px;color:var(--faint)}
.tslot.empty i{opacity:.5}
.tslot.on{border-color:var(--gold);background:#1b1409;cursor:default}
.tslot.on b{color:var(--gold)}
.pdrop{display:flex;align-items:center;gap:10px;margin-top:8px;padding:7px 10px;
 border:1px solid rgba(201,162,39,.42);border-radius:10px;background:rgba(10,7,4,.72);
 min-height:64px;position:relative;overflow:hidden}
.pdimg{flex:0 0 56px;width:56px;height:56px}
.pdimg img{width:56px;height:56px;object-fit:contain;display:block}
.pdph{display:flex;width:56px;height:56px;align-items:center;justify-content:center;font-size:26px;opacity:.6}
/* The rich variant: a prize worth 35% deserves the room the deleted flavor stack was using. */
/* The lord's companion is the reward the whole assault is for. With the fate panel gone it
   takes that room: a portrait rather than an icon, and a name set to match. */
.pdrop.big{min-height:0;padding:14px 14px;align-items:center;gap:14px}
.pdrop.big .pdimg,.pdrop.big .pdimg img{flex-basis:clamp(96px,26vw,168px);
 width:clamp(96px,26vw,168px);height:clamp(96px,26vw,168px)}
.pdrop.big .pdimg img{object-fit:contain}
/* Floor low enough that a ten-letter name still fits the column once the OWNED badge has
   taken its width - below this the anywhere-wrap guard fires and splits the word itself. */
.pdrop.big .pdname{font-size:clamp(13px,3.8vw,24px);letter-spacing:1px}
.pdrop.big .pdlabel{font-size:9.5px;letter-spacing:1.8px}
.pdrop.big .pdspecies{font-size:11.5px}
.pdrop.big .pdflavor{font-size:12.5px;margin-top:3px}
.pdspecies{font-size:10px;letter-spacing:.4px;color:var(--dim2)}
.pdflavor{font-size:11px;font-style:italic;color:var(--dim);line-height:1.35;overflow-wrap:anywhere}
/* The clock belongs beside the pace, not three panels down behind an expander: one line,
   always visible, no tap required. */
.gateline{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:5px;
 padding-top:5px;border-top:1px solid #2a2014}
.gateline span{font-family:Cinzel,serif;font-size:8.5px;letter-spacing:1.8px;color:var(--dim2)}
.gateline b{font-family:Cinzel,serif;font-size:13px;letter-spacing:1.2px;color:var(--amber);
 font-variant-numeric:tabular-nums}
/* ===== PACE STRIP ===== */
/* Replaces two stacked panels (clock verdict + HP flavor + portrait flavor, and the 40px
   RAID PACE number with its two sentences). One row: label, number, bar, clock delta.
   Verdict is carried by colour, not by a sentence. */
.pacestrip{display:flex;align-items:center;gap:9px;margin-top:8px;padding:7px 11px;
 border:1px solid rgba(201,162,39,.3);border-radius:9px;background:rgba(10,7,4,.6)}
.pacestrip .pslabel{font-family:Cinzel,serif;font-size:9px;letter-spacing:1.5px;color:var(--dim2)}
.pacestrip .psnum{font-family:Cinzel,serif;font-size:17px;color:var(--parch);flex:0 0 auto}
.pacestrip .psbar{flex:1;min-width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.pacestrip .psbar i{display:block;height:100%;background:var(--parch)}
.pacestrip .psclock{font-size:10px;color:var(--dim2);flex:0 0 auto;text-align:right}
.pacestrip.good .psnum{color:var(--green)}.pacestrip.good .psbar i{background:var(--green)}
.pacestrip.warn .psnum{color:var(--warn)}.pacestrip.warn .psbar i{background:var(--warn)}
.pacestrip.bad  .psnum{color:var(--red2)}.pacestrip.bad  .psbar i{background:var(--red2)}
@media(max-width:340px){.pacestrip .psclock{display:none}}
.pdmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pdlabel{font-family:Cinzel,serif;font-size:9px;letter-spacing:1.5px;color:var(--dim2)}
/* overflow-wrap:anywhere broke CINDERCLAW into "CINDERCLA / W". A companion's name is one
   word and reads as one: it shrinks to fit its column instead of being cut mid-letter, and
   only a name with no break point left at all is broken. */
.pdname{font-family:Cinzel,serif;font-size:13px;letter-spacing:.6px;color:var(--parch);
 line-height:1.2;overflow-wrap:normal;word-break:normal;hyphens:none}
.pdend{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.pdrate{font-family:Cinzel,serif;font-size:13px;color:var(--gold)}
.pdrarity{font-size:9px;letter-spacing:1px;padding:2px 6px;border-radius:5px;
 color:var(--dim);border:1px solid rgba(201,162,39,.5)}
.pdrarity.owned{color:var(--green);border-color:rgba(127,212,74,.55)}
/* Hardcore raid: a firmer mythic edge and a very quiet breathing sheen. The animation lives
   on a pseudo-element's OPACITY only - nothing moves, nothing rescales - and it is absent
   entirely for reduced-motion users and for ordinary dungeon drops. */
.pdrop.raid{border-color:rgba(180,140,224,.6)}
.pdrop.raid::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:9px;
 box-shadow:inset 0 0 18px rgba(180,140,224,.28);opacity:.45;animation:pdbreathe 3.6s ease-in-out infinite}
@keyframes pdbreathe{0%,100%{opacity:.25}50%{opacity:.6}}
@media(prefers-reduced-motion:reduce){.pdrop.raid::after{animation:none;opacity:.35}}
@media(min-width:760px){.pdrop{max-width:520px}.pdimg,.pdimg img{flex-basis:64px;width:64px;height:64px}}
.raidtier .rtrew b{color:var(--parch)}
.qverd{display:flex;gap:3px;flex:0 0 auto}
.vopt{min-height:40px;padding:0 8px;border-radius:7px;cursor:pointer;
 font-family:Cinzel,serif;font-size:10px;letter-spacing:.5px;
 color:var(--dim);background:rgba(255,255,255,.03);border:1px solid var(--bgold)}
.vopt.on{color:#120d05;background:var(--gold);border-color:var(--gold);font-weight:700}
.vopt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.qctl input{width:70px;min-height:40px;box-sizing:border-box;text-align:center;
 font-family:Cinzel,serif;font-size:16px}
.qu{font-size:10px;color:var(--dim2)}
.qseal{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto}
.qxp{font-family:Cinzel,serif;font-size:13px;white-space:nowrap;color:var(--dim)}
.qxp.on{color:#7ad06c}
.qnext{font-size:9px;letter-spacing:.5px;color:var(--faint);white-space:nowrap}
.qmark{width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:1px solid #3a3020;display:flex;
 align-items:center;justify-content:center;color:#4a4030;font-size:10px}
.qmark.on{border-color:#4fae44;color:#7ad06c}
.xpbar{position:relative;height:9px;background:#241c10;border-radius:5px;overflow:hidden;display:flex}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--dgold),var(--gold))}
.xpbar u{display:block;height:100%;background:linear-gradient(90deg,var(--green),#b6f07a);
 box-shadow:0 0 10px rgba(127,212,74,.5)}
.xpbar .xpmark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--parch);
 opacity:.75;transform:translateX(-1px)}
.xpscale{display:flex;justify-content:space-between;margin-top:3px;
 font:8.5px/1 Cinzel,serif;letter-spacing:1.2px;color:var(--faint)}
.qbar{height:3px;background:#241c10;overflow:hidden}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--dgold),var(--gold))}
.qrow.done .qbar i{background:linear-gradient(90deg,#2f7a28,#4fae44)}
.qdet{padding:8px 10px 10px;border-top:1px solid #241c10;font-size:11.5px;color:var(--dim2);
 background:#0d0906}
/* --- optional & weekly --- */
.storyart{position:relative;display:block;width:min(100%,208px);aspect-ratio:2/3;max-height:34svh;
 margin:0 auto;border-radius:10px;overflow:hidden;border:1px solid var(--bgold);background:#000}
.storyart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.storyart.bare{aspect-ratio:auto;height:0;border:none}
.storyscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,4,3,.05) 0%,
 rgba(6,4,3,.14) 42%,rgba(6,4,3,.55) 78%,rgba(6,4,3,.86) 100%)}
.storyline{display:block;margin-top:8px;font-size:13px;line-height:1.45;color:var(--parch)}
.storysting{display:block;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid #33291a;
 font-style:italic;font-size:13px;line-height:1.45;color:var(--gold)}
/* A LORD'S CONSEQUENCE, ITS CLUE, AND ONLY THEN THE NUMBERS. The hierarchy is the point:
   what changed reads as plain parchment, what it revealed is set apart in gold, and the
   execution/XP ledger is demoted to a small line at the foot of the card. */
.bossvict{margin:0 0 9px;font-size:13.5px;line-height:1.5;color:var(--parch)}
.bosshook{margin:12px 0 4px;padding-top:10px;border-top:1px solid #33291a;
 font-style:italic;font-size:13px;line-height:1.5;color:var(--gold)}
.bossledger{margin-top:14px;font-size:11.5px;letter-spacing:.6px;color:var(--dim2)}

/* THE FIGHT RECORD - the assault's own numbers, above the receipt. Two columns so the labels
   line up and the eye can read down the values; small, quiet, and never louder than the prose
   it follows. */
.fightlog{margin:10px auto 2px;max-width:330px;text-align:left;
 border-top:1px solid rgba(201,162,39,.28);border-bottom:1px solid rgba(201,162,39,.28);
 padding:7px 2px}
.flrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
 font-size:11.5px;line-height:1.7;color:var(--dim)}
.flrow span{letter-spacing:1.2px;text-transform:uppercase;font-size:9.5px;color:var(--dim2);
 white-space:nowrap}
.flrow b{color:var(--parch);font-weight:600;text-align:right}
.flfronts b{color:var(--amber)}
/* Concord. The plate is the scene, so it is given the room a scene needs; the revelation is
   the one line the player is meant to carry out of the room. */
.concordplate{display:block;width:100%;height:auto;max-height:29svh;object-fit:cover;
 /* The table and its scales sit low in the frame, so a capped plate crops the roof beams
    rather than the thing the scene is about. Uncapped, a 2:3 illustration pushed the CTA -
    which IS the receipt for this visit - below the fold on every phone. */
 object-position:50% 68%;border-radius:8px}
@media(min-width:700px){.concordplate{max-height:38svh}}
.concordrev{margin:13px 0 2px;padding:9px 10px;border:1px solid var(--dgold);border-radius:6px;
 font-family:Cinzel,serif;font-size:11.5px;letter-spacing:1.6px;line-height:1.5;color:var(--amber);
 background:rgba(60,44,12,.28)}
.concordtally{margin-top:10px;font-family:Cinzel,serif;font-size:9.5px;letter-spacing:2.4px;color:var(--faint)}
/* The epithet is half a legendary companion's name, not a subtitle. */
.petepithet{display:block;font-family:Cinzel,serif;font-size:14px;letter-spacing:2.5px;color:var(--gold)}
.petspecies{margin-bottom:10px;font-size:12px;letter-spacing:.5px;color:var(--dim2)}
.storyrace{display:block;margin-top:10px;font-style:italic;font-size:12.5px;color:var(--dim)}
.storyobj{display:block;margin-top:12px;font-size:12px;color:var(--dim2)}
.storyobj b{font-family:Cinzel,serif;font-size:9px;letter-spacing:1.6px;color:var(--faint);
 display:block;margin-bottom:2px}
.loophint{margin:0 0 8px;padding:8px 10px;border-left:2px solid var(--bgold);border-radius:0 8px 8px 0;background:linear-gradient(90deg,rgba(201,162,39,.09),transparent);color:var(--dim2);font-size:11.5px;line-height:1.35}
.bossfronts{margin:8px 0 2px;padding:8px 10px;border:1px solid #33291a;border-radius:8px;background:#120d07;font-family:Cinzel,serif;font-size:9.5px;letter-spacing:1.5px;color:var(--dim)}
.bossfronts .qs{display:block;margin-top:4px;font-family:Georgia,'Times New Roman',serif;letter-spacing:0;font-size:11px;line-height:1.35;color:var(--dim2)}
.weighinv{display:flex;align-items:center;gap:9px;width:100%;margin-top:8px;padding:10px;min-height:44px;text-align:left;cursor:pointer;font-family:inherit;border-radius:9px;border:1px dashed #4a3d28;background:linear-gradient(180deg,#17100a,#120d07);color:var(--dim2)}
.weighinv:hover{border-color:var(--bgold)}
.weighinvi{flex:0 0 auto;font-size:16px;opacity:.85}
.weighinvm{min-width:0;flex:1}
.weighinvm b{display:block;font-family:Cinzel,serif;font-size:11.5px;letter-spacing:1.4px;color:var(--gold)}
.weighinvm .qs{display:block;margin-top:2px;line-height:1.3}
.optwrap{margin-top:8px;border:1px solid #33291a;border-radius:9px;overflow:hidden;background:#130d07}
.opthit{display:flex;align-items:center;gap:8px;width:100%;padding:10px;min-height:44px;
 background:transparent;border:0;text-align:left;color:inherit;font-family:inherit;cursor:pointer}
.opthit:focus-visible{outline:2px solid var(--dgold);outline-offset:-2px}
.optttl{font-family:Cinzel,serif;font-size:11.5px;letter-spacing:1.5px;color:var(--dim2);flex:0 0 auto}
.optsum{flex:1;min-width:0;font-size:11px;color:var(--faint);text-align:right;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.optchev{color:var(--dgold);transition:transform .18s}
.optwrap.open .optchev{transform:rotate(180deg)}
.optbody{padding:2px 10px 10px;border-top:1px solid #241c10}
.optline{display:flex;align-items:center;gap:9px;padding:8px 0}
.optline.locked{opacity:.55}
.optline.locked .qmedal img{filter:grayscale(1) brightness(.72)}
.optline.recov .qttl{color:#8fa8c4}
/* --- footer --- */
.qstrip{display:flex;justify-content:space-around;gap:6px;margin-top:10px;padding:8px 4px;
 border:1px solid #33291a;border-radius:8px;background:#140e07;
 font-size:10px;letter-spacing:1px;color:var(--faint);text-align:center}
.qstrip b{font-family:Cinzel,serif;font-size:15px;color:var(--parch);letter-spacing:0}
/* --- encounter hero: day navigation and combat share one fixed-height block ---
   The old stack spent ~50px on a separate day header and left only 88-96px for the mob.
   Folding both into one grid keeps the page the same height while making the intact,
   uncropped creature 56% larger. */
.questhero{display:grid;grid-template-columns:150px minmax(0,1fr);
 grid-template-rows:44px minmax(0,1fr) auto auto;column-gap:14px;row-gap:7px;
 min-height:225px;margin:10px 0 14px;align-items:stretch}
/* PORTRAIT, LIKE THE ART. A square box squeezed the 2:3 paintings into two thirds of its
   width - the creature paid for the empty strips. 150x225 is the paintings' own ratio, so
   the monster fills the frame edge to edge and reads half again as large. */
.questhero>.qthumb{grid-column:1;grid-row:2;width:150px;height:225px;align-self:start}
.questhero>.qthumb img{width:100%;height:100%;object-fit:contain}
/* Compatibility selector retained for the monster-integrity regression guard. */
.enc .qthumb img{width:100%;height:100%;object-fit:contain}
.questhero>.daynav{grid-column:1/3;grid-row:1;margin:0;min-width:0}
/* The card MATCHES the portrait beside it and grows past it rather than hiding anything.
   It used to be height:225px with overflow:hidden, on the reasoning that the companion block
   should end on the same line the frame does. Below 430px the block compacts and it fits; at
   any width above that nothing compacts, the pet portrait is clamp(56px,14vw,132px), and the
   companion's own words were simply cut off mid-sentence - the card clipping the reward it
   exists to advertise. A minimum, not a maximum: when there is room the block still lands on
   the portrait's bottom edge, because margin-top:auto still pushes it there. */
.questcombat{grid-column:2;grid-row:2;min-width:0;display:flex;flex-direction:column;min-height:225px}
.questcombat>.encard{flex:1;min-height:0;display:flex;flex-direction:column}
/* THE QUARRY'S OWN DATA IS FIXED. A flex column shrinks its children by default, which
   silently squeezed the monster's name and health bar to zero height. Nothing here shrinks,
   nothing here is clamped and nothing here stands down: the creature you are fighting is
   the point of the card. What adapts is the companion block below it. */
.questcombat>.encard>*{flex-shrink:0}
/* The block sits at the foot by normal flow: margin-top:auto pushes it down, and because
   nothing above it may shrink except the lore, it lands on the card's bottom edge - which is
   the portrait's bottom edge - without anyone having to guess a reserve height. */
.questcombat>.encard .encrewards{margin-top:auto;flex:0 0 auto}
.questcombat>.combat{height:auto}
.encdaystats{grid-column:1/3;grid-row:3;display:flex;justify-content:space-between;gap:10px;
 padding:5px 9px;border-top:1px solid #2b2114;border-bottom:1px solid #2b2114;
 color:var(--dim);font:8.5px/1.2 Cinzel,serif;letter-spacing:1px;text-transform:uppercase}
.encdaystats b{color:var(--parch);font-weight:400}
.questhero>.qheadside{grid-column:1/3;grid-row:4;margin-top:3px;display:flex;
 flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
@media(max-width:430px){
 .qhit{min-height:58px;padding:7px 8px;gap:7px}
 .qctl input{width:64px}
 .questhero{grid-template-columns:132px minmax(0,1fr);grid-template-rows:40px minmax(0,1fr) auto auto;
  min-height:198px;column-gap:12px;row-gap:5px;margin:9px 0 13px}
 .questhero>.qthumb{width:132px;height:198px}
 .questcombat{min-height:198px}
 .qthumb.mob::before{inset:-8.5px}
 .questhero>.daynav .navbtn{width:34px;height:34px}
 body{padding-left:12px;padding-right:12px}
}
@media(max-width:350px){
 .questhero{grid-template-columns:116px minmax(0,1fr);min-height:174px;margin:8px 0 12px}
 .questhero>.qthumb{width:116px;height:174px}
 .questcombat{min-height:174px}
 .qthumb.mob::before{inset:-7.4px}
}
@media(prefers-reduced-motion:reduce){.qbar i,.optchev{transition:none}}
.ntabs{display:flex;gap:6px;margin:10px 0 2px}
.ntab{flex:1;min-height:44px;border-radius:8px;cursor:pointer;font-family:Cinzel,serif;
 letter-spacing:2px;font-size:12px;color:var(--dim2);background:#140e07;
 border:1px solid #33291a}
.ntab:hover{color:var(--parch);border-color:#4a3d28}
.ntab:focus-visible{outline:2px solid var(--dgold);outline-offset:2px}
.ntab.on{color:var(--gold);border-color:var(--bgold);background:linear-gradient(180deg,#241a0c,#171008);
 box-shadow:0 0 10px rgba(201,162,39,.18),inset 0 0 12px rgba(0,0,0,.5)}
/* --- Collapsible meal header --- */
.mhead{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;cursor:pointer;
 background:linear-gradient(180deg,#241a0c,#1a1309);border:0;border-bottom:1px solid #33291a;
 text-align:left;color:inherit;font-family:inherit}
.mhead:hover{background:linear-gradient(180deg,#2b2010,#1d1509)}
.mhead:focus-visible{outline:2px solid var(--dgold);outline-offset:-2px}
.mmed{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:flex;align-items:center;
 justify-content:center;background:radial-gradient(circle at 35% 30%,#3a2b13,#150e06);
 border:1px solid var(--bgold);font-family:Cinzel,serif;font-size:13px;color:var(--gold)}
.mmid{flex:1;min-width:0}
.mmid b{font-family:Cinzel,serif;letter-spacing:1.5px;font-size:12.5px;color:var(--gold)}
.mkcal{font-family:Cinzel,serif;font-size:15px;color:var(--parch);white-space:nowrap}
.chev{width:11px;height:11px;flex:0 0 11px;transition:transform .18s}
.mhead[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mchips{display:flex;gap:4px;flex-wrap:wrap;padding:6px 10px;border-bottom:1px solid #1d160c}
.mchip{font-size:10px;letter-spacing:.5px;color:var(--dim2);background:#140e07;
 border:1px solid #2a2013;border-radius:4px;padding:2px 6px;font-variant-numeric:tabular-nums}
.mchip b{color:var(--parch);font-weight:400}
/* --- Ingredient rows --- */
.ingwrap{background:#0d0906;padding:2px 0}
.ing{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #17110a}
.ing:last-child{border-bottom:0}
.ing:nth-child(even){background:rgba(255,255,255,.014)}
.ingmain{flex:1;min-width:0}
.ingname{font-size:12.5px;color:var(--parch);word-break:break-word}
.ingmeta{font-size:10px;color:var(--faint);margin-top:1px}
.ingnums{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ingk{font-size:12.5px;color:var(--parch)}
.ingm{font-size:9.5px;color:var(--dim2)}
.ingdel{flex:0 0 34px;min-height:34px;border:1px solid #2a2013;border-radius:6px;
 background:transparent;color:#8a6a62;cursor:pointer;font-size:12px}
.ingdel:hover{color:var(--red2);border-color:#5a2a24}
.ingdel:focus-visible{outline:2px solid var(--dgold);outline-offset:1px}
/* --- History day cards --- */
.dcard{margin-top:8px;border:1px solid #33291a;border-radius:9px;overflow:hidden;background:#130d07}
.dhead{display:flex;align-items:center;gap:9px;width:100%;padding:10px;cursor:pointer;
 background:transparent;border:0;text-align:left;color:inherit;font-family:inherit;min-height:44px}
.dhead:hover{background:rgba(255,255,255,.02)}
.dhead:focus-visible{outline:2px solid var(--dgold);outline-offset:-2px}
.dcard.ok{border-left:3px solid #3f6f35}
.dcard.off{border-left:3px solid #6e2a24}
.dcard.none{border-left:3px solid #2a2013}
.dstat{width:20px;flex:0 0 20px;text-align:center}
.dcard.ok .dstat{color:#7ad06c}.dcard.off .dstat{color:#d9564a}.dcard.none .dstat{color:#4a4030}
.dday{flex:1;min-width:0;font-size:12px;color:var(--dim2)}
.dday b{font-family:Cinzel,serif;color:var(--parch);letter-spacing:1px}
.dbody{padding:0 8px 8px;border-top:1px solid #1d160c}
.wsum{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.wcell{text-align:center;padding:7px 3px;border:1px solid #33291a;border-radius:7px;background:#140e07}
.wcell .wl{font-size:9px;letter-spacing:1px;color:var(--faint)}
.wcell .wv{font-family:Cinzel,serif;font-size:15px;color:var(--parch);font-variant-numeric:tabular-nums}
@media(max-width:400px){.wsum{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.chev{transition:none}}
.rchead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;
 background:linear-gradient(180deg,#241a0c,#1a1309);border-bottom:1px solid #33291a}
.rchead b{font-family:Cinzel,serif;letter-spacing:1.5px;font-size:13px;color:var(--gold)}
.rcbody .row{padding:6px 10px;border-bottom:1px solid #1d160c;margin:0}
.rcbody .row:nth-child(even){background:rgba(255,255,255,.018)}
.rcbody .row:last-child{border-bottom:0}
/* --- Divider / cache --- */
.rdivider{height:46px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:14px 0 2px}
.rdivider img{width:100%;max-width:520px;object-fit:cover;object-position:center;opacity:.85}
.qmverdict{position:relative;margin-top:12px;padding:14px 12px 16px;border:1px solid #33291a;
 border-radius:9px;background:linear-gradient(180deg,#160f08,#100b06);text-align:center;overflow:hidden}
.qmcache{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:min(620px,108%);
 opacity:.22;pointer-events:none;z-index:0}
.qmverdict>*:not(.qmcache){position:relative;z-index:1}
.qmvh{font-family:Cinzel,serif;letter-spacing:2px;font-size:13px;color:var(--gold)}
.qmvbig{font-family:Cinzel,serif;letter-spacing:2px;font-size:21px;color:var(--parch);margin:4px 0 6px}
@media(max-width:400px){.qmcache{opacity:.13;width:130%}}
@media(prefers-reduced-motion:reduce){.rverdict img{transition:none}}
/* --- Seven-day ration shields --- */
.shields{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:9px 0 2px}
.shd{text-align:center;padding:5px 0 4px;border-radius:4px;border:1px solid #33291a;
 background:#191308}
.shd .sd{font-size:8.5px;letter-spacing:1px;color:var(--faint)}
.shd .sm{font-size:14px;line-height:1.1}
.shd.ok{border-color:#3f6f35;background:linear-gradient(180deg,#1d2a17,#141c10)}
.shd.ok .sm{color:#7ad06c}
.shd.miss{border-color:#6e2a24;background:linear-gradient(180deg,#2a1513,#1a0f0e)}
.shd.miss .sm{color:#d9564a}
.shd.idle .sm{color:#4a4030}
.shd.now{box-shadow:0 0 0 1px var(--dgold)}
.gbar{height:4px;background:#241c10;border-radius:3px;overflow:hidden;margin:5px 0 3px}
.gfill{height:100%;background:linear-gradient(90deg,var(--dgold),var(--gold))}
.goal.ready{border-color:var(--gold);box-shadow:0 0 14px rgba(201,162,39,.25)}
/* one reusable class per rarity so six ornament assets can slot in later untouched */
.title-common   {border-left-color:#b9b3a4}.title-common   .rar{color:#b9b3a4}
.title-uncommon {border-left-color:#4fae44}.title-uncommon .rar{color:#4fae44}
.title-rare     {border-left-color:#3f7fd8}.title-rare     .rar{color:#3f7fd8}
.title-epic     {border-left-color:#9b4fd8}.title-epic     .rar{color:#9b4fd8}
.title-legendary{border-left-color:#e08a2a;box-shadow:inset 0 0 22px rgba(224,138,42,.10)}.title-legendary .rar{color:#e08a2a}
.title-mythic   {border-left-color:#c0261f;box-shadow:inset 0 0 26px rgba(192,38,31,.20)}
.title-mythic   .rar{color:#e04a3c}
.title-mythic   .goalname{color:#e8a09a}
/* Legacy is ceremonial: ivory, old gold, restrained crimson - not a hotter Legendary. */
.title-legacy   {border-left-color:#c9a227;box-shadow:inset 0 0 26px rgba(160,32,26,.16)}
.title-legacy   .rar{color:#d9c08a}
.title-legacy   .goalname{color:#efe6d2}
.row{display:flex;align-items:center;gap:6px;padding:6px 2px;border-bottom:1px solid #221a0d;font-size:12.5px}
.row.click{cursor:pointer}
.row.h{color:var(--dim2);font-size:10px;border-bottom:1px solid #3a2c14}
.scroll{max-height:360px;overflow-y:auto}
.daynav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.navbtn{background:#14100a;border:1px solid var(--bgold);color:var(--gold);border-radius:8px;width:40px;height:36px;font-size:15px;cursor:pointer}
.chip{background:none;border:1px solid #3a2c14;color:var(--dim2);border-radius:10px;font-size:10px;padding:2px 8px;margin-top:3px;cursor:pointer;font-family:inherit}
.period{text-align:center;color:var(--warn);font-size:12px;letter-spacing:1px;margin-bottom:12px;padding:6px 0;border:1px solid #3a2c14;border-radius:8px;background:#120d07}
.combat{border:1px solid #3a2c14;border-radius:8px;background:#120d07;padding:8px 10px;margin-bottom:10px;font-size:12px}
/* The encounter is a quarry, not a spreadsheet row. Tier changes heraldry and language while
   the same compact geometry keeps the quest board above the fold on small phones. */
.encard{--threat:#7d6844;position:relative;overflow:hidden;border-color:#4a3d28;
 background:radial-gradient(circle at 100% 0,rgba(125,104,68,.12),transparent 48%),linear-gradient(180deg,#171008,#100b06);
 box-shadow:inset 3px 0 0 var(--threat),inset 0 0 24px rgba(0,0,0,.38)}
.encard::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
 background:linear-gradient(90deg,transparent,var(--threat),transparent);opacity:.85}
.encard.t-v{--threat:#b56b2d}.encard.t-e{--threat:#c9a227}.encard.t-r{--threat:#a864d6;
 background:radial-gradient(circle at 100% 0,rgba(168,100,214,.16),transparent 52%),linear-gradient(180deg,#18100c,#100b09)}
/* The card sits in the hero's ~164px right column, where the eyebrow and the tier badge
   together do not fit on one line - unclipped, "COMMON" read "COMMO". The tier is the
   information and the eyebrow is decoration, so the badge keeps its width and the row is
   allowed to wrap under it rather than being cut off by the card's overflow:hidden. */
.enctop{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 7px;margin-bottom:3px}
.enckicker{font-family:Cinzel,serif;color:var(--dim);font-size:8px;letter-spacing:1.7px;white-space:nowrap}
.enctier{flex:0 0 auto;border:1px solid color-mix(in srgb,var(--threat) 70%,#33291a);border-radius:10px;
 padding:2px 6px;color:var(--threat);font-family:Cinzel,serif;font-size:8px;font-weight:bold;letter-spacing:1.1px}
.encname{font-family:Cinzel,serif;color:var(--parch);font-size:14px;font-weight:bold;letter-spacing:.45px;
 line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px #000}
.encrole{color:var(--threat);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;margin-top:2px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enchphead{display:flex;justify-content:space-between;align-items:end;gap:6px;margin-top:6px;font-size:9px;color:var(--dim2)}
.enchphead b{color:var(--parch);font-family:Cinzel,serif;font-size:10px;letter-spacing:.4px}
.mobhp{height:9px;background:#080604;border:1px solid #4a3d28;border-radius:5px;overflow:hidden;margin-top:3px;
 box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.mobfill{height:100%;background:linear-gradient(90deg,#6e211f,var(--red2),#db735c);transition:width .4s;
 box-shadow:0 0 8px rgba(184,61,47,.42)}
/* The card lives in the hero's narrow right column - both footer cells must be
   allowed to wrap or the nowrap stake text walks over its neighbour. */
.encfoot{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:6px}
.encstate{min-width:0;color:var(--dim2);font-size:8.5px;line-height:1.25;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.encstate b{color:var(--threat);letter-spacing:.8px}
/* THE COMPANION IS THE PRIZE, so it gets the room the portrait leaves behind: the strip
   drops to the foot of the card and the creature is shown at a size worth wanting, rather
   than as a thumbnail the eye skips. */
.encrewards{display:flex;align-items:stretch;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:6px;
 border-top:1px solid #3a2c14}
.encrewards>span{display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid #3a2c14;
 border-radius:6px;color:var(--dim2);font:7.5px/1.15 Cinzel,serif;letter-spacing:.45px;text-transform:uppercase}
.encrewards>span.pet{flex:1;min-width:0;align-items:center;
 border-color:color-mix(in srgb,var(--threat) 55%,#3a2c14);color:var(--threat);
 background:linear-gradient(90deg,color-mix(in srgb,var(--threat) 12%,transparent),transparent 70%)}
.encrewards img{width:17px;height:17px;object-fit:contain;filter:brightness(0) opacity(.55)}
.encrewards>span.pet img{filter:none;opacity:1;border-radius:6px;
 width:clamp(56px,14vw,132px);height:clamp(56px,14vw,132px);object-fit:contain;
 background:rgba(0,0,0,.22);
 border:1px solid color-mix(in srgb,var(--threat) 40%,#2a2014);flex:0 0 auto}
.rwtxt{display:flex;flex-direction:column;gap:1px;min-width:0}
.rwtxt em{font-style:normal;font-family:Cinzel,serif;font-size:7.5px;letter-spacing:1.6px;
 color:var(--faint);text-transform:uppercase}
.rwtxt b{font-weight:bold;letter-spacing:.8px;color:var(--parch);
 font-family:Cinzel,serif;font-size:clamp(12px,3.4vw,17px);line-height:1.1}
.rwsp{font-size:clamp(8.5px,2.2vw,11px);letter-spacing:.3px;color:var(--dim2);
 text-transform:none;font-family:Georgia,"Times New Roman",serif}
.rwtxt i{font-style:italic;font-family:Georgia,"Times New Roman",serif;
 font-size:clamp(9px,2.4vw,12px);line-height:1.3;color:var(--dim);text-transform:none;
 letter-spacing:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
 overflow:hidden}
.encrewards>span.pet .rwtxt b{color:var(--threat)}
/* THE QUARRY'S DATA IS FIXED - name, role, health, state and two lines of lore render at
   full size on every card. When a narrow column runs short of room, the COMPANION block
   is the part that compacts: smaller portrait, then the species line. These overrides sit
   AFTER the base rules above because they share their specificity - placed earlier in the
   file they would silently lose the cascade (this has bitten before). */
@media(max-width:430px){
 .encrewards{padding-top:2px}
 .encrewards>span.pet{padding:1px 5px}
 .encrewards>span.pet img{width:36px;height:36px}
 .encrewards>span.pet .rwtxt i{display:none}
 .rwtxt em{letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .rwtxt b{font-size:12px}
 .rwsp{font-size:8.5px}
}
@media(max-width:350px){
 .encrewards>span.pet img{width:34px;height:34px}
 .rwsp{display:none}
}
.rwtxt i{font-style:normal;text-transform:none;letter-spacing:.2px;font-size:7.5px;
 font-family:Georgia,"Times New Roman",serif;color:var(--faint);line-height:1.25}
.bosshp{height:10px;background:#0a0805;border:1px solid #4a3d28;border-radius:5px;overflow:hidden;margin-top:4px}
.bossfill{height:100%;background:linear-gradient(90deg,#4a2e7a,var(--purp));transition:width .6s}
.eqic{width:30px;height:30px;border:1px solid var(--bgold);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:15px;background:#0f0b06;flex-shrink:0}
.nextup{border:2px solid var(--dgold);border-radius:10px;padding:10px;background:linear-gradient(180deg,#1c140b,#120d07);box-shadow:0 0 14px rgba(201,162,39,.18);margin:10px 0}
.itemimg{width:64px;height:64px;object-fit:cover;border:1px solid var(--dgold);border-radius:8px;display:block;box-shadow:0 0 10px rgba(201,162,39,.25)}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;gap:2px;padding:6px 6px calc(10px + env(safe-area-inset-bottom));z-index:20;max-width:580px;margin:0 auto;
 background:linear-gradient(0deg,#080604 82%,transparent)}
.keyboard-open .tabs{display:none!important}
.keyboard-open .sessbar{display:none!important}
.tabs::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,22,10,.96),rgba(10,8,5,.99));border-top:1px solid var(--bgold);box-shadow:0 -6px 18px rgba(0,0,0,.6);pointer-events:none;z-index:-1}
.tab .tic{width:26px;height:26px;display:block;margin:0 auto 1px;object-fit:contain;filter:saturate(.55) brightness(.72)}
.tab.on .tic{filter:none;transform:scale(1.08)}
.tab{flex:1;padding:6px 1px;background:transparent;color:var(--dim);border:1px solid transparent;border-radius:8px;font-family:inherit;font-size:8.5px;line-height:1.15;letter-spacing:.3px;cursor:pointer;text-align:center}
.bossimg{position:relative;border:2px solid var(--dgold);border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#241206,#0a0603);box-shadow:0 0 30px rgba(176,58,46,.25),inset 0 0 60px rgba(0,0,0,.6)}
.bossimg img{width:100%;display:block;height:auto}

/* ================= PROVING GROUNDS ================= */
.pgtitle{display:flex;align-items:center;justify-content:center;gap:9px;letter-spacing:1.4px}
.pgic{width:38px;height:38px;object-fit:contain;display:block;
 filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));padding:3px;border-radius:50%;
 background:radial-gradient(circle at 50% 35%,#2a2013,#120d07);border:1px solid var(--bgold)}
/* one blackened plate, three segments - selection is fill, not just an outline */
.segwrap{display:flex;gap:0;margin:8px 0 4px;border:1px solid var(--bgold);border-radius:10px;
 overflow:hidden;background:linear-gradient(180deg,#171208,#0c0906);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.seg{flex:1;min-height:44px;padding:7px 4px;background:transparent;border:0;border-right:1px solid #2a2013;
 color:var(--dim);font-family:Cinzel,serif;font-size:10px;letter-spacing:1.2px;cursor:pointer;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.seg:last-child{border-right:0}
.seg .segc{font-size:11px;color:var(--dim2);background:#241c10;border-radius:8px;padding:0 6px;min-width:20px}
/* Active filter reads as an underline, not a filled crimson slab: the tabs are
   navigation, not the loudest thing on the screen. */
.seg{position:relative}
.seg.on{background:linear-gradient(180deg,rgba(74,26,20,.28),transparent);color:var(--parch);
 box-shadow:inset 0 0 14px rgba(176,58,46,.14)}
.seg.on::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:2px;
 background:linear-gradient(90deg,transparent,var(--red2),var(--gold),transparent)}
.seg.on .segl{color:var(--gold)}
.seg.on .segc{background:#4a1a14;color:var(--parch);border:1px solid #6e2a24}
.seg:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* utility row: a real target, left aligned, never a floating pill */
.utilrow{display:flex;align-items:center;justify-content:space-between;margin:10px 0 4px}
.ubtn{min-height:44px;min-width:64px;padding:6px 12px;background:transparent;border:1px solid var(--bgold);
 border-radius:8px;color:var(--dim);font-family:Cinzel,serif;font-size:10px;letter-spacing:1.5px;cursor:pointer}
.ubtn:active{background:#1a1409}
.sechead{display:flex;align-items:baseline;justify-content:space-between;margin:12px 0 4px}
.sectitle{font-family:Cinzel,serif;font-size:11px;letter-spacing:2px;color:var(--dim)}
.seccount{font-size:11px;color:var(--dim2)}
.freqgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.freq{min-height:56px;padding:8px 4px;border-radius:9px;cursor:pointer;text-align:center;
 background:linear-gradient(180deg,#171208,#0d0a06);border:1px solid var(--bgold);color:var(--parch);
 font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.freq b{font-family:Cinzel,serif;font-size:17px;color:var(--parch)}
.freq .fsub{font-size:9.5px;color:var(--dim);line-height:1.2}
.freq.on{border:1px solid var(--gold);background:linear-gradient(180deg,#4a1a14,#240d09);
 box-shadow:inset 0 1px 0 rgba(255,220,150,.2),0 0 14px rgba(176,58,46,.28)}
.freq.on b{color:var(--gold)}
.freq.on .fsub{color:var(--parch)}
.freq .fsel{font-size:8px;letter-spacing:1.4px;color:var(--gold);margin-top:1px}
.freq:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* battle cards */
.bcard{display:block;width:100%;text-align:left;position:relative;margin-top:6px;padding:11px 12px;
 background:linear-gradient(180deg,#15100a,#0d0a06);border:1px solid #33291a;border-left:3px solid var(--bgold);
 border-radius:9px;color:var(--parch);font-family:inherit;cursor:pointer;min-height:56px}
.bcard:active{background:#1b1409}
.bcard:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bcard .brow{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.bcard .bname{font-family:Cinzel,serif;font-size:14px;letter-spacing:1px;color:var(--parch)}
.bcard .bwhen{font-size:11.5px;color:var(--dim)}
.bcard .bsub{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}
.bcard .bmeta{margin-top:7px;font-size:11.5px;color:var(--dim2)}
.bcard .bmeta b{color:var(--parch)}
.bcard .bchev{color:var(--dgold);font-size:17px;line-height:1}
.bcard.next{border-left-color:var(--red);box-shadow:inset 0 0 22px rgba(176,58,46,.16)}
.bcard.next .bname{color:var(--gold)}
.nextflag{position:absolute;top:-7px;left:10px;font-family:Cinzel,serif;font-size:8px;letter-spacing:2px;
 color:var(--gold);background:#2a0f0b;border:1px solid var(--dgold);border-radius:5px;padding:1px 6px}
/* orc information panels */
.opanel{margin-top:12px;padding:10px 12px;border:1px solid var(--bgold);border-radius:10px;
 background:linear-gradient(180deg,#141009,#0b0806);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.opanel.inset{background:#0d0a07;border-color:#33291a}
.opanel .bigline{font-family:Cinzel,serif;font-size:19px;color:var(--gold);letter-spacing:1px;margin:2px 0 6px}
.wkbar{height:10px;border-radius:6px;background:#241c10;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.wkbar i{display:block;height:100%;background:linear-gradient(90deg,#6b1d16,var(--red));
 border-right:2px solid var(--gold);box-shadow:0 0 10px rgba(176,58,46,.5)}
.orow{display:flex;align-items:center;gap:8px}
.oic{width:22px;height:22px;object-fit:contain;opacity:.9}
.obody{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--parch);opacity:.92}
/* the active tab is claimed, not merely outlined */
.tab.on{background:linear-gradient(180deg,#2a2013,#140f08);border:1px solid var(--dgold);
 box-shadow:inset 0 1px 0 rgba(255,220,150,.22),0 0 14px rgba(176,58,46,.22);color:var(--parch)}
.tab{color:var(--dim2)}
.racewrap{position:relative;height:12px;background:#241c10;border-radius:7px;overflow:hidden;margin:4px 0}
/* Both bars read the same way: what REMAINS, anchored right, draining leftward.
   The marker on each is the other quantity, so "marker behind the edge" means ahead. */
.racefill{position:absolute;right:0;top:0;height:100%;
 background:linear-gradient(90deg,var(--dgold),var(--gold))}
.raceclock{position:absolute;top:-2px;bottom:-2px;width:3px;background:var(--red2);box-shadow:0 0 6px rgba(212,106,94,.8)}
.khpwrap{position:relative;height:18px;background:#0a0805;border:1px solid #4a3d28;border-radius:9px;overflow:hidden;margin:8px 0 2px}
/* Health is anchored RIGHT so the wound opens from the left and its edge travels the
   same way as the clock. A bar that drains right-to-left cannot be compared at a glance
   with a clock that runs left-to-right. */
.khpfill{position:absolute;right:0;top:0;height:100%;
 background:linear-gradient(90deg,#5a1f18,var(--red2),#ff9c8a);transition:width .6s}
.khpclock{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--amber);
 box-shadow:0 0 8px var(--amber);z-index:2}
.killline{position:absolute;top:-3px;bottom:-3px;left:100%;width:2px;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.front{border:1px solid #3a2c14;border-radius:8px;background:#120d07;padding:8px 10px;margin:6px 0;font-size:12px}
.fbar{position:relative;height:7px;background:#0a0805;border:1px solid #3a2c14;border-radius:4px;overflow:hidden;margin-top:5px}
.ffill{height:100%;background:linear-gradient(90deg,#7a5c12,var(--amber));transition:width .5s}
.ffill.low{background:linear-gradient(90deg,#5a1f18,var(--red2))}
.pace{border:2px solid var(--dgold);border-radius:12px;background:linear-gradient(180deg,#1c140b,#100b06);padding:12px;margin:10px 0;text-align:center;box-shadow:0 0 16px rgba(201,162,39,.18)}
.pace .num{font-family:Cinzel,serif;font-size:34px;letter-spacing:2px;color:#ffe27a;text-shadow:0 0 16px rgba(245,179,1,.5)}
.tab .ic{font-size:15px;display:block;margin-bottom:1px}
.tab.on{background:rgba(60,42,16,.5);color:#ffe27a;border:1px solid var(--dgold);box-shadow:0 0 12px rgba(201,162,39,.3)}
.subnav{display:flex;gap:4px;overflow-x:auto;margin:0 0 10px;padding-bottom:2px}
.subbtn{flex-shrink:0;padding:6px 11px;background:#14100a;color:var(--dim);border:1px solid #3a2c14;border-radius:14px;font-family:inherit;font-size:10px;letter-spacing:1px;cursor:pointer}
.subbtn.on{color:var(--parch);border-color:var(--dgold);background:linear-gradient(180deg,#2a1f0f,#1a130c)}
.macros{padding:6px 0;border-bottom:1px solid #2a2010}
.mline{display:flex;gap:4px;align-items:center;margin:3px 0}
.mline input{width:23%;font-size:12px;padding:5px 4px}
.folder{display:flex;justify-content:space-between;align-items:center;border:1px solid #3a2c14;border-radius:8px;background:#120d07;padding:8px 10px;margin:6px 0;font-size:12.5px;cursor:pointer}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pgrid img{width:100%;min-height:60px;border:1px solid var(--bgold);border-radius:6px;display:block;cursor:pointer;background:#0a0805}
.pdel{position:absolute;top:2px;right:4px;color:var(--red2);background:rgba(10,8,5,.8);border-radius:4px;padding:0 5px;font-size:12px;cursor:pointer}
.ptag{position:absolute;top:2px;left:4px;color:var(--gold);background:rgba(10,8,5,.85);border-radius:4px;padding:0 4px;font-size:9px;letter-spacing:1px}
.reel{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px}
.reel img{height:120px;width:auto;min-width:80px;border:1px solid var(--bgold);border-radius:6px;display:block;cursor:pointer;background:#0a0805}
.rep{border:2px solid var(--dgold);border-radius:12px;background:linear-gradient(180deg,#1c140b,#100b06);padding:14px;margin-bottom:12px;box-shadow:0 0 20px rgba(201,162,39,.15)}
.rep .big{font-family:'Cinzel',serif;font-size:22px;letter-spacing:2px;text-align:center;color:#ffe27a;text-shadow:0 0 14px rgba(245,179,1,.5)}
.rep .res{text-align:center;font-family:'Cinzel',serif;letter-spacing:2px;font-size:14px;margin:4px 0}
.repsec{border-top:1px solid #3a2c14;margin-top:10px;padding-top:8px}
.ladder{margin-top:10px;font-size:10.5px;text-align:center;line-height:1.9;letter-spacing:.5px}
.foot{text-align:center;color:var(--faint);font-size:10px;margin:14px 0 6px;letter-spacing:1px}
.ghost{text-align:center;color:var(--dim2);font-style:italic;font-size:12px;margin-bottom:10px}
.zlock{opacity:.45;filter:grayscale(.7)}
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,3,1,.88);z-index:50;animation:fadein .3s;padding:20px;text-align:center}
.burst{width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#ffe27a 0%,var(--amber) 30%,transparent 70%);animation:burst 2.6s ease-out;position:absolute;filter:blur(2px)}
.burst.rare{background:radial-gradient(circle,#e0c8ff 0%,var(--purp) 30%,transparent 70%)}
.ptext{font-family:'Cinzel',serif;font-size:34px;font-weight:800;color:#ffe27a;text-shadow:0 0 30px var(--amber);letter-spacing:4px;z-index:1;animation:rise 1.2s ease-out}
.ptext.rare{color:#e0c8ff;text-shadow:0 0 30px var(--purp)}
.psub{color:var(--gold);letter-spacing:3px;font-size:12px;z-index:1;margin-top:8px}
.pbody{z-index:1;margin-top:12px;font-size:13px;color:var(--parch);max-width:300px}
.floater{position:fixed;font-family:'Cinzel',serif;font-weight:800;color:#ffe27a;text-shadow:0 0 12px var(--amber);font-size:22px;z-index:40;pointer-events:none;animation:floatup 1.2s ease-out forwards}
/* Notices: the quiet celebration tier (demoted full-screen overlays, 31.8.2026). Below the
   overlay scrim (z 50) so a real ceremony is never cluttered, above the tab rail. */
#noticestack{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:45;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:min(92vw,420px)}
.noticebar{background:linear-gradient(180deg,rgba(38,27,12,.96),rgba(16,11,5,.97));border:1px solid var(--bgold);border-radius:8px;padding:7px 16px;text-align:center;max-width:100%;box-shadow:0 4px 14px rgba(0,0,0,.55);animation:noticein .3s ease;opacity:1;transition:opacity .45s}
.noticebar b{display:block;font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:1.6px;color:var(--gold)}
.noticebar span{display:block;font-size:11px;color:var(--dim2);letter-spacing:.4px;margin-top:1px}
.noticebar.out{opacity:0}
@keyframes noticein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.noticebar{animation:none}}
#rig{position:fixed;inset:0;pointer-events:none;z-index:15}
.rig-top{position:absolute;top:calc(var(--rig-w) * var(--rig-top-shift) * -1);left:50%;
 transform:translateX(-50%);width:var(--rig-w);z-index:3;
 height:calc(var(--rig-w) * var(--rig-top-ratio));max-height:200px;
 background:var(--rig-top-img) top center/100% auto no-repeat}
.rig-side{position:absolute;top:var(--rail-y);bottom:calc(76px + env(safe-area-inset-bottom) + 58px);width:var(--rail-w);background:var(--rig-side-img) top center/var(--rail-w) auto repeat-y;z-index:2}
.rig-side.left{left:calc(var(--edge) + 1px - var(--rail-w)/2)}
.rig-side.right{right:calc(var(--edge) + 1px - var(--rail-w)/2);transform:scaleX(-1)}
.rig-flag{position:absolute;bottom:calc(76px + env(safe-area-inset-bottom));width:var(--flag-w);height:calc(var(--flag-w) * var(--flag-ratio));background:var(--rig-flag-img) top center/100% auto no-repeat;z-index:3}
.rig-flag.left{left:calc(var(--edge) + 1px - var(--flag-w)/2)}
.rig-flag.right{right:calc(var(--edge) + 1px - var(--flag-w)/2);transform:scaleX(-1)}
@media (min-width:600px){:root{--rail-w:14px;--flag-w:78px}}
@keyframes burst{0%{transform:scale(.2);opacity:0}25%{opacity:1}100%{transform:scale(2.8);opacity:0}}
@keyframes rise{0%{transform:translateY(24px);opacity:0}20%{opacity:1}100%{transform:translateY(0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes floatup{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-60px);opacity:0}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.shake{animation:shake .3s}
@media (prefers-reduced-motion:reduce){.burst,.ptext,.floater,.btn.cta{animation:none}}
/* ===== JOURNEY / PROGRESSIVE DISCOVERY ===== */
.qplain{display:block;font-size:9px;letter-spacing:1.2px;color:var(--dim2);font-family:Georgia,'Times New Roman',serif;text-transform:uppercase;margin-top:1px}
.tab{position:relative}
/* A claimable rung holds the player in the Armory, so the other tabs read as unavailable
   rather than merely refusing to work when tapped. */
.tab.tablocked{opacity:.34;filter:saturate(.25)}
/* The forced shop banner. Loud enough that nobody hunts for why the tabs stopped. */
/* THE CLAIMABLE RUNG'S PROMPT - the item, its price against the purse, and a button. */
.buyart{max-width:180px;max-height:180px;object-fit:contain;display:block;margin:0 auto;
 filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.buyph{font-size:64px;text-align:center;opacity:.7;padding:10px 0}
.buyline{font-size:13px;color:var(--parch);margin-bottom:6px}
.buycost{display:flex;align-items:baseline;justify-content:center;gap:8px;
 font-family:Cinzel,serif;font-size:20px;color:var(--gold);letter-spacing:1px}
.buycost .buypurse{font-family:inherit;font-size:11.5px;color:var(--dim2);letter-spacing:.6px}
.buylock{margin:10px auto 0;padding:11px 13px;border:1px solid var(--dgold);border-radius:9px;
 background:linear-gradient(180deg,rgba(60,44,12,.55),rgba(20,14,7,.75));text-align:center}
.buylock b{display:block;font-family:Cinzel,serif;font-size:13px;letter-spacing:2.4px;color:var(--amber)}
.buylock span{display:block;margin-top:4px;font-size:12px;color:var(--dim2)}
.subbtn{position:relative}
.newdot{position:absolute;top:3px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 6px var(--amber);pointer-events:none}
.subbtn .newdot{top:-2px;right:-2px}
.resultkills{display:flex;gap:8px;justify-content:center;margin-top:8px;align-items:center}
.resultkills img{width:64px;height:64px;object-fit:cover;border:1px solid var(--dgold);border-radius:8px}
@media(prefers-reduced-motion:reduce){.newdot{box-shadow:none}}
/* ===== PREMIUM REWARD SHELL ===== */
/* Layered loot-reveal: vignette ground, controlled radial light BEHIND the reward object,
   faction bar art on top, rising card, ember particles and one metallic title sweep.
   The art carries the identity; CSS only stages it. NO full-screen gold flash. */
.ovshell{background:radial-gradient(ellipse at 50% 34%,rgba(46,32,12,.94) 0%,rgba(10,7,3,.96) 62%,rgba(4,3,1,.985) 100%)}
.ovwrap{position:relative;display:flex;flex-direction:column;align-items:center;width:min(94vw,420px);
 max-height:92svh;overflow-y:auto;overflow-x:hidden;overflow-anchor:none;padding:0 6px 14px;animation:ovrise .5s cubic-bezier(.2,.9,.3,1)}
.ovbar{position:relative;z-index:2;width:100%;pointer-events:none}
.ovbar img{display:block;width:100%;height:auto;margin-top:-10%;
 filter:drop-shadow(0 6px 14px rgba(0,0,0,.8))}
/* The -13% tucks the card under the faction bar that sits above it. An overlay with NO bar
   has nothing to tuck under, so the same pull lifted the card past the top of .ovwrap - which
   scrolls, and therefore clipped - and ate the first line of its own title. */
.ov-nobar .ovcard{margin-top:0}
/* AN OVERLAY MUST OPEN AT ITS OWN BEGINNING. .ovcard is a scroll container and its portrait
   loads AFTER first layout, so browser scroll anchoring compensated for the image appearing
   above the anchor point and silently scrolled the card down - measured at 260px on a mobile
   viewport. Short cards never overflowed, so nothing showed; the moment a card grew past
   92svh (the fifth lord's resolution is the first that does) it opened mid-sentence with its
   own heading and half its portrait already scrolled off the top. Anchoring buys nothing
   here - the content never reflows once the image has landed - and costs the first thing the
   player was meant to read. */
.ovcard{position:relative;z-index:1;width:calc(100% - 18px);margin-top:-13%;
 max-height:92svh;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;
 padding:26px 16px 16px;text-align:center;border:1px solid rgba(140,112,44,.6);border-radius:13px;
 background:linear-gradient(180deg,rgba(30,21,9,.97),rgba(14,10,5,.985));
 box-shadow:0 18px 44px rgba(0,0,0,.7),inset 0 0 46px rgba(0,0,0,.55)}
.ov-major .ovcard{border-color:var(--dgold);box-shadow:0 18px 44px rgba(0,0,0,.75),
 inset 0 0 46px rgba(0,0,0,.5),0 0 34px rgba(201,162,39,.14)}
.oveyebrow{font-family:Cinzel,serif;font-size:10px;letter-spacing:3.5px;color:var(--dim2)}
.ov-major .oveyebrow{color:var(--amber)}
.ovgfx{position:relative;margin:12px auto 4px;width:150px}
.ovgfx.wide{width:min(300px,84%)}
.ovgfx img{display:block;width:100%;height:auto;border-radius:12px;position:relative;z-index:1}
.ovgfx .medal{margin:0 auto}
/* the light lives BEHIND the reward object, never over the whole screen */
.ovgfx::before{content:"";position:absolute;left:50%;top:50%;width:210%;height:210%;z-index:0;
 transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
 background:radial-gradient(circle,rgba(245,179,1,.30) 0%,rgba(201,122,42,.12) 38%,transparent 68%)}
.ov-major .ovgfx::before{animation:ovbreath 3.4s ease-in-out infinite}
.ovtitle{position:relative;font-family:Cinzel,serif;font-size:23px;letter-spacing:2.5px;
 color:#ffe27a;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 26px rgba(245,179,1,.35);
 margin-top:8px;line-height:1.2;overflow:hidden}
/* one restrained metallic sweep across the title, then stillness */
.ov-major .ovtitle::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(115deg,transparent 44%,rgba(255,240,190,.32) 50%,transparent 56%);
 transform:translateX(-130%);animation:ovsweep .9s ease-out .35s 1 forwards}
.ovsub{font-family:Cinzel,serif;font-size:12px;letter-spacing:1.6px;color:var(--dim);margin-top:4px}
.ovbody{font-size:13px;color:var(--parch);margin-top:10px;line-height:1.5}
.ovbody .qs{display:block;margin-top:3px}
.ovacts{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.ovacts .btn{min-height:44px}
.ovhint{margin-top:9px;font-size:10px;letter-spacing:1.5px;color:var(--faint)}
/* ember particles - twelve small lights drifting up behind the card, faction-warm */
.ovembers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ovembers i{position:absolute;bottom:-8px;width:4px;height:4px;border-radius:50%;
 background:radial-gradient(circle,#ffe27a,#c9722a 70%,transparent);
 opacity:0;animation:ovember 4.6s ease-in infinite}
.ovembers i:nth-child(2n){width:3px;height:3px;animation-duration:5.8s}
.ovembers i:nth-child(3n){background:radial-gradient(circle,#ffd9a0,#8a3b1e 70%,transparent)}
.ovembers i:nth-child(1){left:8%;animation-delay:.1s}.ovembers i:nth-child(2){left:16%;animation-delay:1.4s}
.ovembers i:nth-child(3){left:26%;animation-delay:.7s}.ovembers i:nth-child(4){left:34%;animation-delay:2.2s}
.ovembers i:nth-child(5){left:43%;animation-delay:.3s}.ovembers i:nth-child(6){left:51%;animation-delay:1.9s}
.ovembers i:nth-child(7){left:59%;animation-delay:.9s}.ovembers i:nth-child(8){left:67%;animation-delay:2.7s}
.ovembers i:nth-child(9){left:75%;animation-delay:.5s}.ovembers i:nth-child(10){left:83%;animation-delay:1.6s}
.ovembers i:nth-child(11){left:90%;animation-delay:2.4s}.ovembers i:nth-child(12){left:96%;animation-delay:1.1s}
@keyframes ovember{0%{opacity:0;transform:translateY(0) scale(.7)}12%{opacity:.9}
 100%{opacity:0;transform:translateY(-72vh) scale(.25)}}
@keyframes ovrise{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@keyframes ovsweep{to{transform:translateX(130%)}}
@keyframes ovbreath{0%,100%{opacity:.75}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .ovwrap,.ov-major .ovgfx::before{animation:none}
 .ov-major .ovtitle::after{display:none}
 .ovembers{display:none}}
/* ===== ACHIEVEMENT MEDALLIONS ===== */
/* One reusable premium treatment: a forged ring around existing MightBound art. Tier is a
   presentational depth colour (position in its ladder), NOT a stored rarity - deeds keep
   no rarity field by product decision (see rewardTests). */
.medal{position:relative;width:56px;height:56px;flex:0 0 56px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 background:radial-gradient(circle at 34% 28%,#3a2b13,#120c05 74%);
 border:2px solid #6b531a;box-shadow:inset 0 0 12px rgba(0,0,0,.8),0 2px 8px rgba(0,0,0,.6)}
.medal::after{content:"";position:absolute;inset:2px;border-radius:50%;pointer-events:none;
 border:1px solid rgba(255,226,122,.16)}
.medal img{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.medal.big{width:104px;height:104px;flex:0 0 104px;border-width:3px}
.medal.locked{filter:grayscale(.85) brightness(.55)}
.medal.locked img{opacity:.5}
.medal.mt2{border-color:#4fae44;box-shadow:inset 0 0 12px rgba(0,0,0,.8),0 0 10px rgba(79,174,68,.22)}
.medal.mt3{border-color:#3f7fd8;box-shadow:inset 0 0 12px rgba(0,0,0,.8),0 0 10px rgba(63,127,216,.25)}
.medal.mt4{border-color:#9b4fd8;box-shadow:inset 0 0 12px rgba(0,0,0,.8),0 0 12px rgba(155,79,216,.27)}
.medal.mt5{border-color:#e08a2a;box-shadow:inset 0 0 12px rgba(0,0,0,.8),0 0 13px rgba(224,138,42,.32)}
.deedrow{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;margin-top:7px;
 border:1px solid #33291a;border-left:3px solid var(--bgold);border-radius:9px;
 background:linear-gradient(180deg,#15100a,#0e0a06);cursor:pointer;text-align:left;
 color:inherit;font-family:inherit;min-height:64px}
.deedrow:focus-visible{outline:2px solid var(--dgold);outline-offset:1px}
.deedrow.done{border-left-color:#4fae44}
.deedrow.open{border-color:#4a3d28;border-radius:9px 9px 0 0}
.deedmid{flex:1;min-width:0}
.deedname{font-family:Cinzel,serif;font-size:12.5px;letter-spacing:1px;color:var(--parch);line-height:1.2}
.deedrow.done .deedname{color:#cfe3bc}
.deeddesc{font-size:10.5px;color:var(--dim2);margin-top:1px}
.deedend{flex:0 0 auto;text-align:right}
.deedpct{font-family:Cinzel,serif;font-size:13px;color:var(--amber)}
.deedrow.done .deedpct{color:var(--green)}
.deedx{margin:0;border:1px solid #4a3d28;border-top:0;border-radius:0 0 9px 9px;
 background:#0d0906;padding:12px;text-align:center}
.deedx .lore{font-style:italic;color:var(--dim);font-size:11.5px;line-height:1.55;margin-top:9px;
 padding-top:9px;border-top:1px solid #241c10}
.deedtier{display:inline-block;font-family:Cinzel,serif;font-size:9px;letter-spacing:2px;
 padding:2px 8px;border:1px solid var(--bgold);border-radius:4px;color:var(--dim);margin-top:6px}
/* multi-creature discovery gallery: every name an action added to the bestiary */
.discgrid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.discone{display:flex;flex-direction:column;align-items:center;gap:4px;width:96px}
.discone img{width:88px;height:88px;object-fit:cover;border:2px solid var(--dgold);border-radius:10px}
.discone span:last-child{font-family:Cinzel,serif;font-size:9.5px;letter-spacing:.8px;color:var(--parch);
 text-align:center;line-height:1.2}
/* ===== BOSS-PET MASTERY PROMO (standard form -> ascended form) ===== */
/* ONE COMPANION, ONE CARD. The portrait, the name and the progress toward the ascended form
   live in a single panel, because they describe a single animal. The old .ascflow -
   standard, arrow, mastery form - is gone: it showed the same creature three times across
   two stacked panels and asked the player to compare a state they were in against a state
   they were not. The transformation now happens in place, on the card they already know. */
.companionpanel{text-align:center;padding:13px 13px 14px}
.companionpanel.lit{border-color:var(--dgold);box-shadow:0 0 26px rgba(201,162,39,.13),inset 0 0 40px rgba(0,0,0,.45)}
.companionpanel .pdrop{border:0;background:none;padding:0;margin:0}
.ascdiv{height:1px;margin:12px 0 11px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.asctitle{font-family:Cinzel,serif;font-size:15px;letter-spacing:3px;color:var(--amber)}
.ascsub{font-size:12px;font-style:italic;color:var(--dim2);margin-top:3px}
.ascreq{margin-top:10px;padding:9px 10px;border:1px solid var(--line);border-radius:5px;
 background:rgba(255,255,255,.025)}
.ascreqttl{font-family:Cinzel,serif;font-size:8.5px;letter-spacing:2.4px;color:var(--faint);margin-bottom:5px}
.ascrow{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0}
.ascname{font-family:Cinzel,serif;font-size:10px;letter-spacing:1.6px;color:var(--dim2)}
.ascval{font-family:Cinzel,serif;font-size:12px;letter-spacing:1px;color:var(--dim)}
.ascval.met{color:var(--green)}
/* .ppbar was sized for the old narrow pet column (92px). Inside the requirement block it
   must span the row, or a completed bar still reads as a quarter full. */
.ascreq .ppbar{width:100%;margin-top:7px;height:5px}
.ascfoot{margin-top:8px;font-size:11.5px;color:var(--dim2)}
.ascact{margin-top:11px}
.ppflow{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.ppside{display:flex;flex-direction:column;align-items:center;gap:3px;width:118px;min-width:0}
.ppside img{width:100px;height:100px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.65))}
.ppside.locked img{filter:grayscale(.8) brightness(.5) drop-shadow(0 4px 10px rgba(0,0,0,.65))}
.ppside .ppl{font-family:Cinzel,serif;font-size:9px;letter-spacing:1.5px;color:var(--dim2);text-align:center}
.ppside.ready .ppl{color:#ffe27a}
.pparrow{font-size:24px;color:var(--gold);text-shadow:0 0 10px rgba(201,162,39,.55);flex:0 0 auto}
.ppready{margin-top:7px;font-family:Cinzel,serif;font-size:10px;letter-spacing:1.5px;text-align:center}
/* The counter rides ON the ascended form: at a glance, how close am I? */
.ppwrap{position:relative;display:block;width:100px;height:100px}
.ppcount{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);white-space:nowrap;
 font-family:Cinzel,serif;font-size:9px;letter-spacing:1px;color:var(--amber);
 background:rgba(12,8,4,.9);border:1px solid var(--bgold);border-radius:4px;padding:1px 6px;
 text-shadow:0 1px 2px #000}
.ppside.ready .ppcount{color:#8fce5b;border-color:#3f6f35}
.ppbar{display:block;width:92px;height:4px;margin-top:5px;border-radius:3px;background:#241c10;
 overflow:hidden;border:1px solid #33291a}
.ppbar i{display:block;height:100%;background:linear-gradient(90deg,var(--dgold),var(--gold))}
.ppside.ready .ppbar i{background:linear-gradient(90deg,#2f7a28,#4fae44)}
/* the same counter, small, under an owned-but-not-yet-ascended companion in Trophies */
.petprog{display:block;font-size:8px;letter-spacing:.6px;color:var(--amber);margin-top:1px}
/* ===== OATHBOUND COMPANION (promoted state - prestige, and prestige is not decoration) =====
   The promoted companion used to carry a gold halo and a nameplate reading OATHBOUND across
   its own feet. Both were removed: the halo fought the painted scene the companion stands in
   (§6.3 - the character is photographed in the place, not stuck on top of it), and the plate
   labelled a creature the player can already see, on the one screen where nothing else is
   labelled. The ascension still shows - it is a different render - and the status is still
   written in Trophies ("AT YOUR SIDE - OATHBOUND") and in the box's own title. */
.petbox.oathbound{filter:drop-shadow(0 6px 14px rgba(0,0,0,.75))}
/* ===== DEMO HARNESS (developer-only, never rendered in production) ===== */
#demobar{position:fixed;top:0;left:0;z-index:100;display:flex;gap:6px;align-items:center;
 background:#000;color:#ffd400;font:600 10px ui-monospace,Menlo,monospace;letter-spacing:1px;
 padding:3px 7px;border-bottom-right-radius:7px;opacity:.92}
#demobar select{font:inherit;background:#111;color:#ffd400;border:1px solid #444;border-radius:4px;max-width:150px}
/* A shifted sandbox must never be mistaken for the real realm in a screenshot. */
#timebar{position:fixed;top:0;right:0;z-index:100;background:#2a0d0d;color:#ff9b6a;
 font:600 10px ui-monospace,Menlo,monospace;letter-spacing:1px;padding:3px 7px;
 border-bottom-left-radius:7px;opacity:.94}
.tclock{margin-top:8px;padding-top:8px;border-top:1px dashed #4a3d28}
.tclockrow{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.tclockrow button{flex:0 1 auto;min-width:44px;padding:6px 8px;border:1px solid #3a2c14;
 border-radius:7px;background:#120d07;color:var(--parch);font:inherit;font-size:11px;cursor:pointer}
.tclockrow button.warn{border-color:#6a2a1a;color:#ff9b6a}
.tclockday{font-family:Cinzel,serif;font-size:13px;letter-spacing:1.4px;color:var(--gold)}

/* ===== A RUNNING SESSION, SEEN FROM EVERYWHERE ===== */
/* Sits above the tab bar on every screen but the session's own. The pulse is the only
   animation in the app that runs unprompted, and it is earned: something IS happening. */
.sessbar{position:fixed;left:0;right:0;bottom:var(--tabs-h,72px);
 max-width:580px;margin:0 auto;
 z-index:19;display:flex;align-items:center;gap:10px;padding:8px 12px;
 background:linear-gradient(180deg,rgba(20,15,8,.97),rgba(10,8,5,.99));
 border-top:1px solid var(--bgold);box-shadow:0 -6px 18px rgba(0,0,0,.55)}
.sessdot{width:9px;height:9px;border-radius:50%;background:var(--amber);flex:0 0 auto;
 box-shadow:0 0 8px var(--amber);animation:sesspulse 1.8s ease-in-out infinite}
@keyframes sesspulse{0%,100%{opacity:1}50%{opacity:.28}}
@media(prefers-reduced-motion:reduce){.sessdot{animation:none}}
.sessmid{flex:1;min-width:0;line-height:1.25}
.sessmid b{font-family:Cinzel,serif;letter-spacing:1.4px;font-size:12px;color:var(--gold);
 display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sesstime{font-family:Cinzel,serif;font-size:17px;letter-spacing:2px;color:var(--amber);flex:0 0 auto}
.sessbar .btn{flex:0 0 auto;padding:7px 12px;min-height:0;font-size:11px}
/* The lift's own history, and the door to it. */
.exhbtn{flex:0 0 auto;background:none;border:1px solid var(--bgold);border-radius:8px;
 padding:3px 7px;font-size:13px;line-height:1;color:var(--parch);cursor:pointer}
.exhbtn:hover{border-color:var(--gold)}
.exchart{display:flex;align-items:flex-end;gap:3px;height:88px;margin-top:8px;
 padding:6px;border:1px solid var(--bgold);border-radius:8px;background:rgba(10,8,5,.5)}
.excol{flex:1;display:flex;align-items:flex-end;height:100%}
.excol i{display:block;width:100%;border-radius:2px 2px 0 0;
 background:linear-gradient(180deg,#ffe27a,var(--amber),#7a5c12)}
.excol:last-child i{background:linear-gradient(180deg,#fff,var(--gold),#7a5c12)}
/* The opening weight, typed on the plan screen - never inside a running session. */
.liftset{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;
 padding-top:8px;border-top:1px solid rgba(201,162,39,.18)}
.liftset input{width:88px;text-align:center;font-family:Cinzel,serif}

/* ===== MASTERY, SHOWN: a companion and the same companion ascended ===== */
/* The pair IS the explanation, so it gets the room a reward gets. The arrow is the whole
   sentence between them; it never wraps, so the two forms always read as one statement. */
.mevo{display:flex;align-items:center;justify-content:center;gap:clamp(4px,2vw,18px);width:100%}
/* Inside the ascension panel the pair is an illustration beside real numbers, not the whole
   statement, so it takes less room than it does on the reveal. */
.mevo.asc-in-panel{margin:8px 0 4px}
.mevo.asc-in-panel .mevostep img{max-width:132px}
.mevo.asc-in-panel .mevostep b{font-size:8.5px;letter-spacing:1.6px}
.mevostep{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;flex:1}
.mevostep img{width:100%;max-width:210px;aspect-ratio:1;object-fit:contain;display:block;
 filter:drop-shadow(0 6px 14px rgba(0,0,0,.7))}
.mevostep b{font-family:Cinzel,serif;font-size:9.5px;letter-spacing:2px;color:var(--dim2);
 text-transform:uppercase}
.mevostep.asc b{color:#ffe27a}
.mevostep.asc img{filter:drop-shadow(0 6px 16px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(201,162,39,.35))}
.mevoarrow{flex:0 0 auto;font-size:clamp(20px,6vw,34px);line-height:1;color:var(--gold);
 text-shadow:0 0 12px rgba(201,162,39,.5)}

/* ===== THE EMPTY PERSONAL SLOT ===== */
/* The same row as every quest, dressed as an offer rather than a duty: dashed edge, no
   score seal, and an action where the XP would be. */
.qrow.invite .qhit{border-style:dashed;border-color:var(--bgold);background:none;
 width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
.qrow.invite .qhit:hover{border-color:var(--gold)}
.qrow.invite .qmedal{opacity:.55}
.qrow.invite .qttl{color:var(--dim2)}
.qadd{flex:0 0 auto;font-family:Cinzel,serif;font-size:11px;letter-spacing:1.4px;
 color:var(--gold);border:1px solid var(--bgold);border-radius:8px;padding:5px 9px;
 white-space:nowrap}