/* ═══════════════════════════════════════════════════════════════
TAVERN ECLIPSE - Account Maker
Scene 7 of the landing page: the same tavern, deeper inside.
Design system inherited 1:1 from the Landing Page master.
═══════════════════════════════════════════════════════════════ */
:root{
--bg:#0b0603;
--wood-1:#2b1a0d;
--wood-2:#190e06;
--wood-3:#120903;
--brass:#b98f52;
--brass-dim:rgba(185,143,82,.38);
--brass-hi:#e6c37c;
--brass-dark:#8a5f1c;
--brass-light:#e8c06a;
--brass-glint:#f7dfa4;
--gold:#f0d493;
--parch:#d8c49c;
--parch-2:#c9b184;
--parch-light:#f3e7c8;
--parch-dark:#d3ba8b;
--ink:#2e1e0f;
--ink-soft:#4a341e;
--ember:#ff9a3c;
--ember-deep:#ff6a1f;
--crimson:#c8452c;
--text:#ecdcb8;
--muted:#b39c75;
--ff-display:'Cinzel Decorative',serif;
--ff-head:'Cinzel',serif;
--ff-body:'EB Garamond',Georgia,serif;
--nav-h:68px;
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
--corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M2 46V16Q2 2 16 2h30' fill='none' stroke='%23b98f52' stroke-width='2.5'/%3E%3Cpath d='M9 46V18q0-9 9-9h28' fill='none' stroke='%23b98f52' stroke-width='1' opacity='.5'/%3E%3Ccircle cx='8' cy='8' r='2.6' fill='%23d8b06a'/%3E%3C/svg%3E");
--corner-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M2 46V16Q2 2 16 2h30' fill='none' stroke='%238a5f1c' stroke-width='2.5'/%3E%3Cpath d='M9 46V18q0-9 9-9h28' fill='none' stroke='%238a5f1c' stroke-width='1' opacity='.5'/%3E%3Ccircle cx='8' cy='8' r='2.6' fill='%23a97d33'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scrollbar-gutter:stable}
body{
min-height:100vh;
background:transparent; /* html carries the base; an opaque body would hide the fixed scene (z-index < 0) */
color:var(--text);
font-family:var(--ff-body);
font-size:17.5px;
line-height:1.55;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{border:0;max-width:100%;-webkit-user-drag:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a{color:var(--brass-light);text-decoration:none;transition:color .2s ease,text-shadow .2s ease}
a:hover{color:var(--brass-glint);text-shadow:0 0 14px rgba(255,180,94,.45)}
/* ─────────────── CINEMATIC BACKDROP ─────────────── */
#ec-scene{
position:fixed;inset:0;z-index:-3;
background:var(--bg) center/cover no-repeat;
}
#ec-scene video{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
}
#ec-shade{
position:fixed;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(115% 90% at 50% 38%, rgba(6,2,0,0) 34%, rgba(6,2,0,.4) 74%, rgba(4,1,0,.78) 100%),
linear-gradient(180deg, rgba(8,4,1,.42) 0%, rgba(8,4,1,.1) 18%, rgba(8,4,1,.16) 62%, rgba(5,2,0,.66) 100%);
}
#ec-embers{position:fixed;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen}
#ec-grain{
position:fixed;inset:-40px;z-index:60;pointer-events:none;
background-image:var(--noise);
opacity:.05;
animation:grainShift .9s steps(2) infinite;
}
@keyframes grainShift{
0%{transform:translate(0,0)}
50%{transform:translate(14px,-9px)}
100%{transform:translate(-11px,6px)}
}
/* candle flicker glow, bottom corners */
.ec-candleglow{
position:fixed;bottom:-140px;width:420px;height:420px;z-index:-1;pointer-events:none;
background:radial-gradient(circle, rgba(255,150,55,.16) 0%, rgba(255,120,40,.05) 45%, transparent 70%);
animation:candleFlicker 4.4s ease-in-out infinite;
}
.ec-candleglow.left{left:-120px}
.ec-candleglow.right{right:-120px;animation-delay:-2.1s}
@keyframes candleFlicker{
0%,100%{opacity:.75;transform:scale(1)}
22%{opacity:1;transform:scale(1.06)}
47%{opacity:.6;transform:scale(.97)}
74%{opacity:.92;transform:scale(1.03)}
}
/* ─────────────── ENTRY ANIMATION ─────────────── */
#ec-veil{
position:fixed;inset:0;z-index:80;background:var(--bg);
pointer-events:none;opacity:1;
transition:opacity .9s ease .1s;
}
body.ec-in #ec-veil{opacity:0}
.ec-rise{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s cubic-bezier(.22,.9,.3,1);transition-delay:calc(var(--d,0)*1ms)}
body.ec-in .ec-rise{opacity:1;transform:translateY(0)}
/* ─────────────── TOP NAV - identical language to the landing page ─────────────── */
#ec-nav{
position:fixed;inset:0 0 auto 0;z-index:40;
display:flex;align-items:center;justify-content:space-between;gap:18px;
height:var(--nav-h);
padding-inline:clamp(14px,3vw,44px);
background:linear-gradient(180deg, rgba(26,15,8,.94), rgba(16,9,5,.86));
backdrop-filter:blur(8px);
box-shadow:0 2px 0 rgba(185,143,82,.3), 0 10px 30px rgba(0,0,0,.55);
}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand-eclipse{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(255,122,47,.55))}
.ec-body{fill:#130a06}
.ec-ring{fill:none;stroke:var(--ember-deep);stroke-width:2.4}
.ec-corona{fill:none;stroke:#ffb45e;stroke-width:.9;opacity:.55}
.brand-name{
font-family:var(--ff-head);font-weight:700;font-size:16px;
letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
color:var(--parch-light);text-shadow:0 2px 6px rgba(0,0,0,.8);
}
.brand-name em{font-style:normal;color:var(--brass-light)}
.brand:hover .brand-name{color:var(--brass-glint)}
.ec-navlinks{display:flex;align-items:stretch;height:100%}
.ec-navitem{position:relative;display:flex;align-items:center}
.ec-navitem>a,.ec-navitem>button{
position:relative;display:flex;align-items:center;gap:6px;height:100%;
padding:0 clamp(10px,1.4vw,20px);
font-family:var(--ff-head);font-size:13px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;
color:var(--parch);
text-shadow:0 2px 6px rgba(0,0,0,.85);
transition:color .2s ease;
}
.ec-navitem>a::after,.ec-navitem>button::after{
content:"";position:absolute;left:14px;right:100%;bottom:14px;height:2px;
background:linear-gradient(90deg,var(--brass),var(--brass-light));
box-shadow:0 0 10px rgba(232,192,106,.55);
transition:right .25s ease;
}
.ec-navitem:hover>a,.ec-navitem:hover>button,
.ec-navitem>a:focus-visible,.ec-navitem>button:focus-visible,
.ec-navitem.active>a,.ec-navitem.active>button{color:var(--brass-light)}
.ec-navitem:hover>a::after,.ec-navitem:hover>button::after,
.ec-navitem.active>a::after,.ec-navitem.active>button::after{right:14px}
.ec-caret{width:9px;height:9px;flex:none;fill:none;stroke:currentColor;stroke-width:2;opacity:.7;transition:transform .25s ease}
.ec-navitem:hover .ec-caret{transform:rotate(180deg)}
/* dropdown: carved-wood shelf */
.ec-drop{
position:absolute;top:calc(100% - 2px);left:50%;transform:translateX(-50%) translateY(8px);
min-width:220px;padding:10px 8px;
visibility:hidden;opacity:0;
background:
linear-gradient(160deg, rgba(48,30,15,.72), rgba(20,11,5,.55) 60%),
linear-gradient(180deg,#2e1c0e 0%,#1c1007 55%,#140a04 100%);
border:1px solid var(--brass-dim);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,220,160,.09),
0 18px 44px rgba(0,0,0,.7);
transition:opacity .22s ease, transform .25s ease, visibility .25s;
}
.ec-drop::before{
content:"";position:absolute;top:-7px;left:50%;margin-left:-7px;
width:12px;height:12px;transform:rotate(45deg);
background:#2c1b0d;border-left:1px solid var(--brass-dim);border-top:1px solid var(--brass-dim);
}
.ec-drop::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--noise);opacity:.07}
.ec-navitem:hover .ec-drop,.ec-navitem:focus-within .ec-drop{
visibility:visible;opacity:1;transform:translateX(-50%) translateY(0);
}
.ec-drop a{
position:relative;z-index:1;
display:flex;align-items:center;gap:10px;
padding:9px 14px;
font-family:var(--ff-head);font-size:12px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;
color:var(--parch);white-space:nowrap;
border-bottom:1px solid rgba(185,143,82,.12);
transition:color .18s ease, background .18s ease, padding-left .18s ease;
}
.ec-drop a:last-child{border-bottom:none}
.ec-drop a::before{
content:"✦";font-size:9px;color:var(--brass-dark);
transition:color .18s ease, text-shadow .18s ease;
}
.ec-drop a:hover,.ec-drop a.active{
color:var(--brass-glint);
background:linear-gradient(90deg, rgba(232,192,106,.1), transparent 80%);
padding-left:18px;
}
.ec-drop a:hover::before,.ec-drop a.active::before{
color:var(--ember);text-shadow:0 0 10px rgba(255,150,60,.8);
}
/* wide variant: long menus (Community) split into two columns */
.ec-drop--wide{
display:grid;grid-template-columns:1fr 1fr;column-gap:6px;
min-width:460px;
}
.ec-drop--wide a{border-bottom:1px solid rgba(185,143,82,.12)}
.ec-drop--wide a:nth-last-child(-n+2){border-bottom:none}
.ec-navactions{display:flex;align-items:center;gap:12px;flex:none}
/* social icons - brass line-icons, same family as the Contact page */
.ec-socials{display:flex;align-items:center;gap:4px}
.ec-socials a{
display:flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:6px;
color:var(--brass-dark);
transition:color .2s ease,background .2s ease;
}
.ec-socials a:hover,.ec-socials a:focus-visible{
color:var(--brass-light);background:rgba(201,151,59,.12);
}
.ec-socials svg{width:19px;height:19px}
.nav-burger{
display:none;flex-direction:column;justify-content:center;gap:5px;
width:42px;height:42px;padding:9px;
background:linear-gradient(180deg,#4a2f18,#241408);
border:1px solid var(--brass-dark);border-radius:6px;
}
.nav-burger span{height:2px;background:var(--brass-light);border-radius:2px;transition:transform .25s ease, opacity .2s ease}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ─────────────── NEWS TICKER - a brass-bound board beneath the beams ─────────────── */
/* a carved ribbon of news under the beam - gold hairlines, an angled plaque, a passing candle glint */
#ec-ticker{
position:relative;z-index:30;
margin-top:var(--nav-h);
display:flex;align-items:stretch;
background:linear-gradient(180deg, rgba(30,17,8,.72), rgba(12,7,3,.55));
backdrop-filter:blur(8px);
box-shadow:0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(232,192,106,.08);
overflow:hidden;
}
#ec-ticker::before,#ec-ticker::after{
content:"";position:absolute;left:0;right:0;height:1px;z-index:4;pointer-events:none;
background:linear-gradient(90deg, transparent, rgba(232,192,106,.5) 16%, rgba(232,192,106,.5) 84%, transparent);
}
#ec-ticker::before{top:0;opacity:.45}
#ec-ticker::after{bottom:0;opacity:.8}
.ticker-label{
position:relative;z-index:2;flex:none;
display:flex;align-items:center;gap:10px;
padding:9px clamp(14px,2vw,26px) 9px clamp(12px,1.8vw,20px);
margin-right:14px;
}
.ticker-label::before{
content:"";position:absolute;inset:0 -6px 0 -22px;z-index:-1;
background:linear-gradient(180deg, rgba(64,38,17,.92), rgba(26,14,6,.94));
border-right:1px solid rgba(232,192,106,.35);
box-shadow:inset 0 1px 0 rgba(232,192,106,.18), 12px 0 26px rgba(0,0,0,.5);
transform:skewX(-16deg);
}
.ticker-label img{width:19px;height:19px;opacity:.95;filter:drop-shadow(0 0 6px rgba(255,140,50,.5));animation:emblemSpin 26s linear infinite}
@keyframes emblemSpin{to{transform:rotate(360deg)}}
.ticker-label span{
font-family:var(--ff-head);font-size:11px;font-weight:700;
letter-spacing:.3em;text-transform:uppercase;
color:var(--gold);text-shadow:0 1px 3px #000, 0 0 12px rgba(255,150,60,.25);
}
.ticker-window{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;
-webkit-mask:linear-gradient(90deg,transparent,#000 42px,#000 calc(100% - 42px),transparent);
mask:linear-gradient(90deg,transparent,#000 42px,#000 calc(100% - 42px),transparent);
}
.ticker-window::after{
content:"";position:absolute;top:0;bottom:0;left:-30%;width:24%;z-index:3;pointer-events:none;
background:linear-gradient(105deg, transparent, rgba(255,195,115,.05) 38%, rgba(255,205,125,.1) 50%, rgba(255,195,115,.05) 62%, transparent);
animation:tkGlint 12s ease-in-out infinite;
}
@keyframes tkGlint{0%{left:-30%}60%,100%{left:110%}}
.ticker-track{
display:flex;align-items:center;gap:0;
width:max-content;
animation:tickerRoll var(--ticker-dur,60s) linear infinite;
}
#ec-ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tickerRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{
display:inline-flex;align-items:center;gap:12px;
padding:9px 30px;white-space:nowrap;
color:var(--text);font-size:15px;letter-spacing:.01em;
text-shadow:0 1px 4px rgba(0,0,0,.8);
transition:color .2s ease, text-shadow .2s ease;
}
.ticker-item:hover{color:var(--brass-glint);text-shadow:0 0 14px rgba(255,180,94,.5)}
.ticker-item .tk-date{
font-family:var(--ff-head);font-size:10px;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
padding:3px 10px 2px;border-radius:999px;
border:1px solid rgba(185,143,82,.32);
background:rgba(185,143,82,.08);
transition:color .2s ease, border-color .2s ease;
}
.ticker-item:hover .tk-date{color:var(--brass-light);border-color:rgba(232,192,106,.55)}
.ticker-item .tk-sep{color:var(--brass-dark);font-size:10px;margin-left:30px;text-shadow:0 0 8px rgba(255,150,60,.3)}
/* ─────────────── PAGE FRAME ─────────────── */
#ec-wrap{
position:relative;z-index:10;
width:min(1340px,95vw);
margin:0 auto;
padding-top:calc(var(--nav-h) + clamp(26px,5vh,58px));
padding-bottom:clamp(40px,7vh,90px);
}
body.has-ticker #ec-wrap{padding-top:clamp(26px,5vh,58px)}
/* page head - carved title with brass pin-line, straight from the landing scenes */
.ec-pagehead{margin-bottom:clamp(20px,3.4vh,36px)}
.ec-pagehead .kicker{
font-style:italic;color:var(--muted);font-size:clamp(15px,1.5vw,17.5px);
margin-bottom:8px;text-shadow:0 2px 8px #000;
}
.ec-pagehead h1{
font-family:var(--ff-head);font-weight:700;
font-size:clamp(28px,3.6vw,44px);
letter-spacing:.1em;color:var(--gold);
text-shadow:0 2px 6px rgba(0,0,0,.9), 0 0 34px rgba(255,150,60,.25);
}
.ec-pagehead h1::after{
content:"";display:block;height:10px;margin-top:10px;width:min(300px,60%);
background:
radial-gradient(circle at 6px 5px, var(--brass-hi) 2.6px, transparent 3px),
linear-gradient(90deg, var(--brass) 0%, rgba(185,143,82,0) 100%);
background-size:100% 100%, 100% 1.5px;
background-position:0 0, 0 4.5px;
background-repeat:no-repeat;
}
.eyebrow{
font-family:var(--ff-head);font-size:12px;font-weight:600;
letter-spacing:.32em;text-transform:uppercase;
color:var(--brass-light);
text-shadow:0 0 14px rgba(255,122,47,.35), 0 2px 4px rgba(0,0,0,.8);
}
/* ─────────────── PANELS (carved wood + brass) ─────────────── */
.panel{
position:relative;
background:
linear-gradient(160deg, rgba(48,30,15,.55), rgba(20,11,5,.4) 60%),
linear-gradient(180deg,#2e1c0e 0%,#1c1007 55%,#140a04 100%);
border:1px solid var(--brass-dim);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,220,160,.09),
inset 0 -14px 30px rgba(0,0,0,.5),
0 14px 44px rgba(0,0,0,.65);
}
.panel::after{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:var(--noise);opacity:.07;
}
.c-tl,.c-tr,.c-bl,.c-br{
position:absolute;width:26px;height:26px;pointer-events:none;
background:var(--corner) no-repeat center/contain;z-index:2;
}
.c-tl{top:5px;left:5px}
.c-tr{top:5px;right:5px;transform:rotate(90deg)}
.c-br{bottom:5px;right:5px;transform:rotate(180deg)}
.c-bl{bottom:5px;left:5px;transform:rotate(270deg)}
/* parchment sheet - the paper heart of every document */
.sheet{
position:relative;color:var(--ink);
background:
var(--noise),
radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.5), rgba(255,246,220,0) 55%),
linear-gradient(168deg,#e0cda6 0%,#cbb283 55%,#b49a6a 100%);
background-blend-mode:overlay,normal,normal;
clip-path:polygon(
10px 0, calc(100% - 10px) 3px, 100% 15px,
calc(100% - 4px) calc(100% - 15px), calc(100% - 15px) 100%,
19px calc(100% - 3px), 0 calc(100% - 17px), 4px 12px);
box-shadow:0 24px 60px rgba(0,0,0,.65);
}
.sheet a:not(.btn):not(.hs-tab):not(.dg-sort):not(.ghost-link):not(.lib-shelf-home):not(.lib-shelf-row):not(.hs-pageno){color:#7a4a14;border-bottom:1px solid rgba(138,95,28,.4)}
.sheet a:not(.btn):not(.hs-tab):not(.dg-sort):not(.ghost-link):not(.lib-shelf-home):not(.lib-shelf-row):hover{color:#a3611a;text-shadow:none;border-color:#a3611a}
/* a:hover outranks .btn-* on specificity - restore forged button ink inside the parchment */
.sheet a.btn-brass,.sheet a.btn-brass:hover{color:#2a1a08;text-shadow:0 1px 0 rgba(255,240,200,.55)}
.sheet a.btn-oak,.sheet a.btn-oak:hover{color:var(--parch);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.sheet a.btn-parch,.sheet a.btn-parch:hover{color:#201209;text-shadow:none}
/* ─────────────── BUTTONS (forged brass · carved oak · parchment) ─────────────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.55em;
font-family:var(--ff-head);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
font-size:14px;line-height:1.45;text-decoration:none;white-space:nowrap;cursor:pointer;
padding:13px 26px;
border-radius:6px;
transition:transform .18s ease, box-shadow .25s ease, filter .25s ease;
-webkit-tap-highlight-color:transparent;
}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-brass{
color:#2a1a08;
background:linear-gradient(180deg, var(--brass-glint) 0%, var(--brass-light) 18%, #c9973b 52%, var(--brass-dark) 100%);
border:1px solid #6e4c14;
box-shadow:
inset 0 1px 0 rgba(255,245,214,.8),
inset 0 -2px 3px rgba(90,55,10,.55),
0 4px 14px rgba(0,0,0,.55);
text-shadow:0 1px 0 rgba(255,240,200,.55);
}
.btn-brass:hover,.btn-brass:focus-visible{
filter:brightness(1.09);
transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,245,214,.8),
inset 0 -2px 3px rgba(90,55,10,.55),
0 6px 20px rgba(0,0,0,.6),
0 0 26px rgba(255,150,60,.45);
}
.btn-oak{
color:var(--parch);
background:linear-gradient(180deg,#56381e 0%,#3a2413 55%,#2a1a0c 100%);
border:1px solid var(--brass-dark);
box-shadow:
inset 0 1px 0 rgba(214,168,96,.35),
inset 0 -2px 4px rgba(0,0,0,.6),
0 4px 14px rgba(0,0,0,.55);
text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.btn-oak:hover,.btn-oak:focus-visible{
filter:brightness(1.18);
transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(214,168,96,.5),
inset 0 -2px 4px rgba(0,0,0,.6),
0 6px 18px rgba(0,0,0,.6),
0 0 22px rgba(201,151,59,.35);
}
.btn-parch{
color:#201209;
background:linear-gradient(180deg,var(--parch-light),var(--parch-dark));
border:1px solid #a9884f;
box-shadow:
inset 0 1px 0 rgba(255,250,230,.9),
inset 0 -2px 3px rgba(140,105,55,.45),
0 3px 10px rgba(0,0,0,.4);
}
.btn-parch:hover,.btn-parch:focus-visible{
filter:brightness(1.05);
transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,250,230,.9),
inset 0 -2px 3px rgba(140,105,55,.45),
0 6px 16px rgba(0,0,0,.5),
0 0 18px rgba(232,192,106,.35);
}
.btn-lg{font-size:15.5px;padding:16px 36px}
.btn-sm{font-size:11.5px;padding:9px 18px;letter-spacing:.2em}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
/* the scrollbox clips overflow - give a trailing button row room for its shadow */
.ec-scrollbox .btn-row:last-child{padding:4px 4px 26px}
.ghost-link{
font-family:var(--ff-head);font-size:12.5px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;
color:var(--brass-light);text-decoration:none;
border-bottom:1px solid rgba(232,192,106,.35);
padding:.2em .1em;
text-shadow:0 2px 6px rgba(0,0,0,.9);
transition:color .2s ease, border-color .2s ease, text-shadow .2s ease;
}
.ghost-link:hover,.ghost-link:focus-visible{
color:var(--brass-glint);border-color:var(--brass-light);
text-shadow:0 0 16px rgba(255,180,94,.6);
}
/* ─────────────── HOMEPAGE ─────────────── */
.ec-hero{
position:relative;text-align:center;
padding:clamp(26px,4.5vh,52px) 0 clamp(18px,3vh,34px);
}
/* text wordmark - identical treatment to the landing page hall title */
.ec-hero .hero-title{
font-family:var(--ff-head);font-weight:900;
font-size:clamp(38px,6vw,74px);line-height:1.05;
letter-spacing:.08em;text-transform:uppercase;
color:var(--parch-light);
text-shadow:
0 0 32px rgba(255,122,47,.38),
0 0 8px rgba(255,180,94,.3),
0 4px 14px rgba(0,0,0,.9);
margin-top:10px;
}
.ec-hero .hand-note{
font-style:italic;
font-size:clamp(17px,1.9vw,21px);line-height:1.45;
color:var(--parch);
margin:18px auto 24px;max-width:480px;
text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 28px rgba(0,0,0,.75);
}
.ec-hero .btn-row{justify-content:center}
/* stat chips - torn parchment scraps (from the landing hall scene) */
.stat-chips{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.stat-chip{
min-width:96px;padding:12px 16px 10px;text-align:center;
color:var(--ink);
background:
var(--noise),
radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.5), rgba(255,246,220,0) 60%),
linear-gradient(172deg,#dcc89f 0%,#cbb283 55%,#b89e6e 100%);
background-blend-mode:overlay,normal,normal;
clip-path:polygon(4% 2%,96% 0,100% 10%,99% 92%,94% 100%,5% 98%,0 90%,2% 8%);
box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 0 20px rgba(90,60,20,.26);
}
.stat-chip:nth-child(odd){transform:rotate(-1.4deg)}
.stat-chip:nth-child(even){transform:rotate(1.2deg)}
.chip-name{
display:block;font-family:var(--ff-head);font-weight:700;
font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#54371a;
}
.chip-val{
display:block;font-family:var(--ff-head);font-weight:800;
font-size:25px;line-height:1.15;color:#3a2410;margin-top:2px;
text-shadow:0 1px 0 rgba(255,240,210,.55);
}
.chip-val.on{color:#3f6d2a}
.chip-val.off{color:var(--crimson)}
.chip-sub{
display:block;margin-top:1px;
font-size:11px;font-style:italic;color:#6a4d28;
}
/* divider between sections - a drawn brass hairline with a breathing ember jewel */
.ec-divider{
position:relative;display:block;pointer-events:none;
width:min(720px,86%);height:34px;
margin:clamp(24px,4vh,44px) auto;
/* flanking brass studs */
background:
radial-gradient(circle 2.5px at 34% 50%, var(--brass-hi) 0 2px, transparent 2.6px),
radial-gradient(circle 2.5px at 66% 50%, var(--brass-hi) 0 2px, transparent 2.6px);
}
.ec-divider::before{
content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
background:linear-gradient(90deg,
transparent,
rgba(185,143,82,.45) 16%,
var(--brass-light) 40%,
#ffd694 50%,
var(--brass-light) 60%,
rgba(185,143,82,.45) 84%,
transparent);
box-shadow:0 0 14px rgba(255,170,80,.3), 0 1px 0 rgba(0,0,0,.55);
}
.ec-divider::after{
content:"";position:absolute;left:50%;top:50%;
width:11px;height:11px;transform:translate(-50%,-50%) rotate(45deg);
background:radial-gradient(circle at 35% 30%, #ffedbe, #e8a24a 55%, #8a4a12);
border:1px solid rgba(255,224,168,.75);
box-shadow:0 0 14px rgba(255,160,70,.75), 0 0 36px rgba(255,140,50,.35);
animation:ecDivGlow 5s ease-in-out infinite;
}
@keyframes ecDivGlow{
0%,100%{box-shadow:0 0 12px rgba(255,160,70,.6), 0 0 30px rgba(255,140,50,.25)}
50%{box-shadow:0 0 18px rgba(255,175,85,.95), 0 0 46px rgba(255,145,55,.45)}
}
/* section head, centered */
.ec-sechead{text-align:center;margin-bottom:clamp(18px,3vh,30px)}
.ec-sechead .kicker{font-style:italic;color:var(--muted);font-size:clamp(14.5px,1.4vw,17px);margin-bottom:6px;text-shadow:0 2px 8px #000}
.ec-sechead h2{
font-family:var(--ff-head);font-weight:700;
font-size:clamp(23px,2.8vw,34px);
letter-spacing:.1em;color:var(--gold);
text-shadow:0 2px 6px rgba(0,0,0,.9), 0 0 34px rgba(255,150,60,.25);
}
.ec-sechead h2::after{
content:"";display:block;height:10px;margin:10px auto 0;width:min(280px,60%);
background:
radial-gradient(circle at 50% 5px, var(--brass-hi) 2.6px, transparent 3px),
linear-gradient(90deg, rgba(185,143,82,0), var(--brass), rgba(185,143,82,0));
background-size:100% 100%, 100% 1.5px;
background-position:0 0, 0 4.5px;
background-repeat:no-repeat;
}
/* ─────────────── NEWS CARDS - nailed parchment notices ─────────────── */
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);align-items:start}
.news-grid.single{grid-template-columns:1fr}
.news-card{
position:relative;border-radius:8px;padding:7px;display:block;
background:
repeating-linear-gradient(92deg, rgba(0,0,0,.14) 0 6px, rgba(255,205,130,.05) 6px 11px),
linear-gradient(180deg,#55371d,#241408);
border:1px solid #170d06;
box-shadow:0 18px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.45);
transition:transform .25s ease, box-shadow .25s ease;
}
.news-card::before,.news-card::after,
.news-card .ni::before,.news-card .ni::after{
content:"";position:absolute;width:20px;height:20px;z-index:3;pointer-events:none;
background-image:radial-gradient(circle at var(--rivet,25% 25%), var(--brass-glint) 0 2px, var(--brass) 2.6px, transparent 3.6px);
}
.news-card::before{top:3px;left:3px;border-top:3px solid var(--brass);border-left:3px solid var(--brass);border-top-left-radius:8px;--rivet:30% 30%}
.news-card::after{bottom:3px;right:3px;border-bottom:3px solid var(--brass-dark);border-right:3px solid var(--brass-dark);border-bottom-right-radius:8px;--rivet:70% 70%}
.news-card .ni::before{top:-6px;right:-6px;border-top:3px solid var(--brass);border-right:3px solid var(--brass);border-top-right-radius:8px;--rivet:70% 30%}
.news-card .ni::after{bottom:-6px;left:-6px;border-bottom:3px solid var(--brass-dark);border-left:3px solid var(--brass-dark);border-bottom-left-radius:8px;--rivet:30% 70%}
.news-card:hover{
transform:translateY(-8px);
box-shadow:0 30px 50px rgba(0,0,0,.65), 0 0 34px rgba(255,140,50,.2);
z-index:3;
}
.news-card .ni{
position:relative;display:flex;flex-direction:column;gap:10px;
padding:16px 18px 18px;border-radius:5px;min-height:100%;
color:var(--ink);
background:
radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.55), transparent 55%),
radial-gradient(130% 110% at 50% 110%, rgba(122,84,40,.28), transparent 55%),
repeating-linear-gradient(0deg, rgba(120,85,40,.05) 0 2px, transparent 2px 5px),
linear-gradient(160deg, var(--parch-light) 0%, #ead9b0 48%, var(--parch-dark) 100%);
border:1px solid rgba(122,84,40,.5);
box-shadow:inset 0 0 26px rgba(110,74,32,.3);
}
.news-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.news-cat{
font-family:var(--ff-head);font-size:10px;font-weight:700;
letter-spacing:.24em;text-transform:uppercase;
color:var(--parch-light);
padding:4px 10px 3px;
background:linear-gradient(180deg,#56381e,#2c1a0b);
border:1px solid var(--brass-dark);border-radius:3px;
box-shadow:inset 0 1px 0 rgba(214,168,96,.35), 0 2px 5px rgba(0,0,0,.35);
text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.news-cat.cat-event{background:linear-gradient(180deg,#6d2c1c,#3a150c);border-color:#8a3a1c}
.news-cat.cat-update{background:linear-gradient(180deg,#3c4a1e,#1e260c);border-color:#5a6d2a}
.news-cat.cat-patch{background:linear-gradient(180deg,#274052,#122029);border-color:#3a5d74}
.news-cat.cat-dev{background:linear-gradient(180deg,#4a2a52,#241029);border-color:#6d3a74}
.news-date{
font-family:var(--ff-head);font-size:11px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:#7a5426;
}
.news-pin{
margin-left:auto;display:inline-flex;align-items:center;gap:5px;
font-family:var(--ff-head);font-size:10px;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--crimson);
}
.news-pin::before{content:"";width:10px;height:10px;border-radius:50%;
background:radial-gradient(circle at 32% 30%, #e86a50, #8a2415 60%, #4a0f06);
box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.news-title{
font-family:var(--ff-head);font-weight:700;font-size:clamp(17px,1.7vw,21px);
letter-spacing:.06em;color:#3a2410;line-height:1.25;
}
.news-title::after{
content:"";display:block;width:54px;height:2px;margin-top:7px;
background:linear-gradient(90deg,var(--brass-dark),transparent);
}
.news-card .news-thumb{
position:relative;border-radius:4px;overflow:hidden;
border:1px solid rgba(90,60,20,.5);
box-shadow:inset 0 0 22px rgba(0,0,0,.35);
}
.news-card .news-thumb img{display:block;width:100%;height:auto;max-height:230px;object-fit:cover}
.news-excerpt{font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.news-foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.news-more{
font-family:var(--ff-head);font-size:10.5px;font-weight:700;
letter-spacing:.24em;text-transform:uppercase;color:var(--brass-dark);
border-bottom:1px solid rgba(138,95,28,.5);padding-bottom:2px;
transition:color .2s ease,border-color .2s ease;
}
.news-card:hover .news-more{color:#a3611a;border-color:#a3611a}
.news-author{font-style:italic;font-size:13px;color:#8a6a3a}
/* featured news - the grand notice */
.news-featured .ni{padding:clamp(18px,2.6vw,30px)}
.news-featured .news-title{font-size:clamp(21px,2.4vw,28px)}
.news-featured .news-thumb img{max-height:340px}
/* pinned strip */
.pin-row{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(16px,2.6vh,26px)}
.pin-item{
position:relative;display:flex;align-items:center;gap:14px;
padding:11px 18px 11px 44px;
color:var(--ink);
background:
var(--noise),
radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.5), rgba(255,246,220,0) 60%),
linear-gradient(172deg,#dcc89f 0%,#cbb283 55%,#b89e6e 100%);
background-blend-mode:overlay,normal,normal;
clip-path:polygon(.6% 4%,99.4% 0,100% 16%,99.6% 88%,98.8% 100%,1% 97%,0 84%,.4% 12%);
box-shadow:0 10px 22px rgba(0,0,0,.5), inset 0 0 20px rgba(90,60,20,.26);
transition:transform .2s ease, box-shadow .25s ease;
}
.pin-item:nth-child(odd){transform:rotate(-.35deg)}
.pin-item:nth-child(even){transform:rotate(.3deg)}
.pin-item:hover{transform:rotate(0) translateY(-3px);box-shadow:0 16px 30px rgba(0,0,0,.6), 0 0 22px rgba(255,140,50,.18)}
.pin-item::before{
content:"";position:absolute;left:16px;top:50%;margin-top:-6px;
width:12px;height:12px;border-radius:50%;
background:radial-gradient(circle at 32% 30%, #e86a50, #8a2415 60%, #4a0f06);
box-shadow:0 2px 4px rgba(0,0,0,.55);
}
.pin-item .pin-title{font-family:var(--ff-head);font-weight:700;font-size:15.5px;letter-spacing:.05em;color:#3a2410}
.pin-item .news-date{margin-left:auto;flex:none}
/* article view - a long parchment document */
.article-sheet{padding:clamp(24px,4vw,48px) clamp(20px,4.5vw,56px)}
.article-sheet .news-meta{margin-bottom:12px}
.article-sheet h1.article-title{
font-family:var(--ff-head);font-weight:800;
font-size:clamp(24px,3vw,34px);letter-spacing:.06em;
color:#3a2410;line-height:1.2;
border-bottom:2px solid rgba(122,84,40,.4);
padding-bottom:14px;margin-bottom:6px;
}
.article-hero{margin:16px 0;border:1px solid rgba(90,60,20,.5);border-radius:4px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.article-hero img{display:block;width:100%;height:auto}
.article-body{color:var(--ink-soft);font-size:17px}
.article-body p,.article-body h3,.article-body blockquote,.article-body hr{margin:0 0 14px}
.article-body>*:last-child{margin-bottom:0}
.article-body img{border-radius:4px;border:1px solid rgba(90,60,20,.4)}
.article-foot{
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
margin-top:24px;padding-top:14px;
border-top:2px solid rgba(122,84,40,.4);
font-style:italic;color:#8a6a3a;font-size:14.5px;
}
/* archive list */
.arch-list{display:flex;flex-direction:column;gap:12px}
.arch-item{
position:relative;display:flex;align-items:center;gap:16px;
padding:14px 20px;color:var(--ink);
background:
var(--noise),
radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.5), rgba(255,246,220,0) 60%),
linear-gradient(172deg,#dcc89f 0%,#cbb283 55%,#b89e6e 100%);
background-blend-mode:overlay,normal,normal;
clip-path:polygon(.5% 3%,99.5% 0,100% 14%,99.7% 90%,99% 100%,.8% 98%,0 86%,.3% 10%);
box-shadow:0 10px 22px rgba(0,0,0,.5), inset 0 0 20px rgba(90,60,20,.26);
transition:transform .2s ease, box-shadow .25s ease;
}
.arch-item:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(0,0,0,.6), 0 0 22px rgba(255,140,50,.18)}
.arch-item .arch-title{font-family:var(--ff-head);font-weight:700;font-size:16.5px;letter-spacing:.05em;color:#3a2410;flex:1;min-width:0}
/* links and platform tags land on parchment here - ink, not brass */
.arch-item .arch-title a{
color:#3a2410;
text-decoration:underline;text-decoration-color:rgba(90,60,20,.45);text-underline-offset:3px;
}
.arch-item .arch-title a:hover,.arch-item .arch-title a:focus-visible{color:#7a3a10;text-shadow:none}
.arch-item .sd-plat.kick{color:#1e6e04;background:rgba(50,140,20,.14);border-color:rgba(40,110,10,.45)}
.arch-item .sd-plat.twitch{color:#5b2f96;background:rgba(120,70,200,.12);border-color:rgba(100,55,170,.4)}
.arch-item .news-date{flex:none;color:#5c3d16}
.arch-item .news-cat{flex:none}
/* archive ledger table - one parchment, ruled rows, whole row clicks */
.arch-sheet{padding:clamp(14px,2.4vh,24px) clamp(16px,2.6vw,30px)}
.arch-thead,.arch-row{
display:grid;grid-template-columns:88px minmax(0,1fr) auto;
align-items:center;column-gap:16px;
}
.arch-thead{
padding:6px 12px 10px;
font-family:var(--ff-head);font-weight:800;font-size:11.5px;
letter-spacing:.22em;text-transform:uppercase;color:#6b4a1e;
border-bottom:2px solid rgba(90,60,20,.45);
}
.arch-thead span:last-child{text-align:right}
.arch-month{
margin:14px 0 2px;padding:4px 12px;
font-family:var(--ff-head);font-weight:800;font-size:12px;
letter-spacing:.2em;text-transform:uppercase;color:#7a4a14;
background:rgba(90,60,20,.10);
}
.arch-row{
padding:10px 12px;color:#3a2410;
border-bottom:1px solid rgba(90,60,20,.22);
transition:background .15s ease;
}
.arch-row:last-child{border-bottom:none}
.arch-row:hover,.arch-row:focus-visible{background:rgba(255,246,220,.55)}
.arch-row .arch-date{
font-family:var(--ff-head);font-weight:700;font-size:13px;
letter-spacing:.08em;color:#5c3d16;white-space:nowrap;
}
.arch-row .arch-title{
font-family:var(--ff-head);font-weight:700;font-size:15.5px;
letter-spacing:.04em;color:#3a2410;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.arch-row:hover .arch-title{color:#7a3a10}
.arch-row .news-cat{justify-self:end}
/* empty state - the notice board waits */
.ec-empty{text-align:center;padding:clamp(24px,5vh,54px) 20px}
.ec-empty img{width:min(430px,80%);filter:drop-shadow(0 16px 36px rgba(0,0,0,.7))}
.ec-empty p{font-style:italic;color:var(--muted);margin-top:16px;text-shadow:0 2px 8px #000}
/* stat chips can act as doors deeper into the tavern */
a.stat-chip{text-decoration:none;transition:transform .2s ease, box-shadow .25s ease}
a.stat-chip:hover,a.stat-chip:focus-visible{
transform:rotate(0) translateY(-4px);
box-shadow:0 16px 30px rgba(0,0,0,.6), 0 0 22px rgba(255,140,50,.25);
}
/* returning from an article lands right back on the card that was clicked */
.news-card,.pin-item,.arch-item{scroll-margin-top:calc(var(--nav-h) + 24px)}
/* article footer back-links, latest news first */
.article-backlinks{display:flex;flex-direction:column;gap:9px;align-items:flex-end}
/* ghost-links land on parchment here - dark ink stamped bold, not faint brass */
.sheet .ghost-link,.ec-msg .ghost-link{
font-weight:800;font-size:13px;font-style:normal;
color:#4a2c0e;text-shadow:none;
border-bottom:2px solid rgba(122,74,20,.55);
padding:.2em .15em .25em;
}
.sheet .ghost-link:hover,.sheet .ghost-link:focus-visible,
.ec-msg .ghost-link:hover,.ec-msg .ghost-link:focus-visible{
color:#8a3d0a;border-color:#8a3d0a;text-shadow:none;
}
/* ─────────────── LEGACY GESIOR CONTENT - re-dressed as a tavern document ─────────────── */
.ec-legacy{
padding:clamp(18px,2.6vw,34px) clamp(16px,3vw,42px);
font-size:16px;
}
/* rhythm: old pages pad with
stacks - one breath is enough */
.ec-legacy br + br{display:none}
.ec-legacy h1,.ec-legacy h2,.ec-legacy h3{
font-family:var(--ff-head);letter-spacing:.06em;color:#3a2410;
}
.ec-legacy h1{font-size:26px}
.ec-legacy h2{font-size:22px}
.ec-legacy h3{font-size:18px}
.ec-legacy p,.ec-legacy td,.ec-legacy div{color:inherit}
.ec-legacy hr{border:none;height:2px;background:linear-gradient(90deg,transparent,rgba(138,95,28,.55),transparent);margin:10px 0}
/* tables → carved ledgers, sitting on the grid (left edge), not floating */
.ec-legacy table{
border-collapse:separate;border-spacing:0;
margin:8px 0;
max-width:100%;
}
.ec-legacy table table{margin:0}
.ec-legacy center table,.ec-legacy [align="center"]>table,.ec-legacy td[align="center"] table{margin-inline:auto}
.ec-legacy table[width="100%"]{width:100%}
.ec-legacy td,.ec-legacy th{
padding:8px 12px;
font-size:15.5px;
color:var(--ink-soft);
}
/* header cells recolored by JS to .ec-head */
.ec-legacy .ec-head{
background:linear-gradient(180deg,#4a2e17 0%,#2e1c0e 60%,#221204 100%) !important;
color:var(--gold) !important;
font-family:var(--ff-head);font-weight:700;letter-spacing:.1em;
text-shadow:0 1px 3px rgba(0,0,0,.8);
border:1px solid rgba(185,143,82,.35);
box-shadow:inset 0 1px 0 rgba(255,220,160,.12);
}
.ec-legacy .ec-head *,
.ec-legacy .ec-head a{color:var(--gold) !important;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.ec-legacy .ec-odd{
background:
repeating-linear-gradient(0deg, rgba(120,85,40,.045) 0 2px, transparent 2px 5px),
linear-gradient(172deg,#d3bf95 0%,#c4ad7f 100%) !important;
border:1px solid rgba(122,84,40,.32);
}
.ec-legacy .ec-even{
background:
repeating-linear-gradient(0deg, rgba(120,85,40,.04) 0 2px, transparent 2px 5px),
linear-gradient(172deg,#e6d5ae 0%,#d8c49c 100%) !important;
border:1px solid rgba(122,84,40,.26);
}
.ec-legacy tr:hover>.ec-odd,
.ec-legacy tr:hover>.ec-even{
box-shadow:inset 0 0 0 100vmax rgba(255,190,90,.12);
}
/* forms → paper fields with brass focus */
.ec-legacy input[type=text],
.ec-legacy input[type=password],
.ec-legacy input[type=email],
.ec-legacy input[type=number],
.ec-legacy input:not([type]),
.ec-legacy select,
.ec-legacy textarea,
.ec-form input[type=text],
.ec-form input[type=password],
.ec-form input[type=date],
.ec-form input[type=url],
.ec-form select,
.ec-form textarea{
font-family:var(--ff-body);font-size:16px;color:var(--ink);
background:
radial-gradient(120% 90% at 50% 0%, rgba(255,250,235,.8), rgba(255,250,235,0) 60%),
linear-gradient(180deg,#f6ecd2,#e9d9b2);
border:1px solid #a9884f;
border-radius:4px;
padding:9px 12px;
box-shadow:inset 0 2px 5px rgba(110,74,32,.28), 0 1px 0 rgba(255,250,230,.5);
transition:border-color .2s ease, box-shadow .25s ease;
max-width:100%;
}
.ec-legacy input:focus,.ec-legacy select:focus,.ec-legacy textarea:focus,
.ec-form input:focus,.ec-form select:focus,.ec-form textarea:focus{
outline:none;border-color:var(--brass-dark);
box-shadow:inset 0 2px 5px rgba(110,74,32,.28), 0 0 0 3px rgba(201,151,59,.28), 0 0 16px rgba(232,192,106,.3);
}
/* dropdowns wear the same parchment - no white system chrome */
.ec-legacy select,.ec-form select,.lib-select{
-webkit-appearance:none;appearance:none;
cursor:pointer;padding-right:36px;
background:
url("data:image/svg+xml;utf8,") no-repeat right 13px center,
radial-gradient(120% 90% at 50% 0%, rgba(255,250,235,.8), rgba(255,250,235,0) 60%),
linear-gradient(180deg,#f6ecd2,#e9d9b2);
}
.ec-legacy select:hover,.ec-form select:hover,.lib-select:hover{border-color:var(--brass-dark)}
/* the unrolled list itself - browsers only let us tint the options, not redraw the popup */
.ec-legacy select option,.ec-form select option,.lib-select option{
font-family:var(--ff-body);
background:#f4e7c8;color:var(--ink);
padding:6px 10px;
}
.ec-legacy select option:checked,.ec-form select option:checked,.lib-select option:checked{
background:#e0c890;color:var(--ink);
}
.ec-legacy input[type=submit]:not(.btn),
.ec-legacy input[type=button]:not(.btn),
.ec-legacy button:not(.btn):not(.lib-chip),
.ec-form input[type=submit]:not(.btn),
.ec-form button[type=submit]:not(.btn){
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--ff-head);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
font-size:12.5px;cursor:pointer;
padding:10px 22px;border-radius:6px;
color:#2a1a08;
background:linear-gradient(180deg, var(--brass-glint) 0%, var(--brass-light) 18%, #c9973b 52%, var(--brass-dark) 100%);
border:1px solid #6e4c14;
box-shadow:
inset 0 1px 0 rgba(255,245,214,.8),
inset 0 -2px 3px rgba(90,55,10,.55),
0 4px 14px rgba(0,0,0,.35);
text-shadow:0 1px 0 rgba(255,240,200,.55);
transition:transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.ec-legacy input[type=submit]:not(.btn):hover,
.ec-legacy input[type=button]:not(.btn):hover,
.ec-legacy button:not(.btn):not(.lib-chip):hover,
.ec-form input[type=submit]:not(.btn):hover,
.ec-form button[type=submit]:not(.btn):hover{
filter:brightness(1.09);transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,245,214,.8),
inset 0 -2px 3px rgba(90,55,10,.55),
0 6px 20px rgba(0,0,0,.4),
0 0 26px rgba(255,150,60,.35);
}
.ec-legacy input[type=checkbox],.ec-legacy input[type=radio]{
accent-color:var(--brass-dark);width:16px;height:16px;
}
/* old tibiacom chrome (box frames, shadows, caption borders) is retired -
the parchment sheet replaces all of it */
.ec-legacy [class^="BoxFrame"],
.ec-legacy [class*="CaptionEdge"],
.ec-legacy [class*="CaptionBorder"],
.ec-legacy [class*="CaptionVertical"],
.ec-legacy [class*="TableShadow"],
.ec-legacy .TableBottomShadow,
.ec-legacy .TopButtonContainer,
.ec-legacy img[src*="back-to-top"],
.ec-legacy img[src*="headline-bracer"],
.ec-legacy img[src*="attentionsign"]{display:none !important}
.ec-legacy .TableContentAndRightShadow,
.ec-legacy .BigButton,
.ec-legacy .BigButtonOver{background-image:none !important}
.ec-legacy .CaptionContainer .Text{
display:inline-block;
font-family:var(--ff-head);font-weight:700;font-size:16px;
letter-spacing:.12em;text-transform:uppercase;
color:var(--gold);
padding:7px 18px;margin:10px 0 6px;
background:linear-gradient(180deg,#4a2e17 0%,#2e1c0e 60%,#221204 100%);
border:1px solid rgba(185,143,82,.35);
box-shadow:inset 0 1px 0 rgba(255,220,160,.12), 0 4px 12px rgba(0,0,0,.35);
text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.ec-legacy .LabelV,.ec-legacy .LabelH td,.ec-legacy tr.LabelH>td{
font-family:var(--ff-head);font-weight:700;font-size:13px;
letter-spacing:.08em;color:#54371a;white-space:nowrap;
}
.ec-legacy .InnerTableContainer>table,.ec-legacy .TableContent{width:100%}
.ec-legacy .TableContainer{margin-bottom:6px}
.ec-legacy .TableContainer>table{width:100%}
/* button rows inside old sections breathe evenly */
.ec-legacy .InnerTableButtonRow td{padding:4px 6px 2px 0}
/* the blank.gif spacer columns die quietly */
.ec-legacy img[src*="blank.gif"]{display:none !important}
/* hint / message boxes → a sealed note pinned to the ledger */
.ec-legacy .SmallBox{
position:relative;
margin:0 0 20px;
padding:14px 20px 14px 58px;
background:
radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.6), transparent 60%),
linear-gradient(172deg,#e8d7ae 0%,#d5bf92 100%);
border:1px solid rgba(122,84,40,.45);
border-left:4px solid var(--crimson);
border-radius:3px;
box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 0 18px rgba(110,74,32,.18);
}
.ec-legacy .SmallBox::before{
content:"";position:absolute;left:14px;top:50%;
width:30px;height:30px;margin-top:-15px;
background:
radial-gradient(circle at 34% 30%, #e86a50 0 22%, #a4331d 55%, #6d1c0c 78%, #4a0f06 100%);
border-radius:50% 46% 52% 48%;
box-shadow:0 2px 5px rgba(0,0,0,.45), inset 0 2px 4px rgba(255,190,160,.4);
}
.ec-legacy .SmallBox::after{
content:"✦";position:absolute;left:22px;top:50%;
margin-top:-13px;font-size:13px;color:#f3d0b8;
text-shadow:0 1px 2px rgba(0,0,0,.5);
}
/* boxes that hold only a button (e.g. the logout row) need no seal or paper */
.ec-legacy .SmallBox:not(:has(h3)):not(:has(.LabelV)){
background:none;border:none;box-shadow:none;padding:0;margin-bottom:12px;
}
.ec-legacy .SmallBox:not(:has(h3)):not(:has(.LabelV))::before,
.ec-legacy .SmallBox:not(:has(h3)):not(:has(.LabelV))::after{display:none}
.ec-legacy .SmallBox h3{
display:inline;font-size:15px;font-weight:600;
letter-spacing:.02em;text-transform:none;
font-family:var(--ff-body);color:var(--ink-soft);
}
.ec-legacy .SmallBox .LabelV{
font-size:11px;color:var(--crimson);vertical-align:top;
}
.ec-legacy .SmallBox font[color="red"]{color:var(--ink-soft) !important}
.ec-legacy .SmallBox font[color="red"] b{color:#7a2d1a}
/* legacy quirks */
/* vertical rule between ledger columns - an inked line that fades at both ends */
.ec-legacy td.col-sep{position:relative}
/* guild-list crest column: the 100%-wide description cell would crush it to min-content */
.ec-legacy td.crest-col{min-width:110px}
.ec-legacy td.col-sep::after{
content:"";position:absolute;top:10%;bottom:10%;right:-1px;width:2px;
background:linear-gradient(180deg, transparent, rgba(110,74,32,.65) 28%, rgba(110,74,32,.65) 72%, transparent);
border-radius:1px;
}
.ec-legacy .ec-head.col-sep::after{
background:linear-gradient(180deg, transparent, rgba(232,192,106,.55) 50%, transparent);
}
/* guild logos: the global img{max-width:100%} squishes them inside the narrow
Logo cell - pin the 64px square and let the cell grow instead */
.ec-legacy img[src*="guild_image"],
.ec-legacy img[src*="guild_logo"]{
display:block;margin:auto;
width:64px;height:64px;max-width:none;object-fit:contain;
}
/* guild list: default shield and custom logos share one 64px slot so every
row lines up at the same height */
.ec-legacy .crest-col img{
display:block;margin:auto;
width:64px;height:64px;max-width:none;object-fit:contain;
}
.ec-legacy font[color="red"],.ec-legacy .SmallText font[color="red"]{color:var(--crimson) !important}
.ec-legacy font[color="green"]{color:#3f6d2a !important}
.ec-legacy font[color="white"]{color:inherit !important}
.ec-legacy .SmallText{font-size:13.5px}
/* ─────────────── CHARACTER SHEET (characters.php detail view) ─────────────── */
.char-head{
display:flex;align-items:center;gap:22px;flex-wrap:wrap;
padding:16px 20px;margin-bottom:18px;
background:
radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.5), transparent 60%),
linear-gradient(172deg,#dcc89f 0%,#c9b184 100%);
border:1px solid rgba(122,84,40,.4);border-radius:6px;
box-shadow:inset 0 0 22px rgba(110,74,32,.22), 0 6px 16px rgba(0,0,0,.18);
}
.char-portrait{
flex:none;width:92px;height:92px;
display:grid;place-items:center;
background:
radial-gradient(circle at 50% 35%, rgba(255,220,150,.14), transparent 70%),
linear-gradient(160deg,#3a2413,#1c1007);
border:1px solid var(--brass-dim);border-radius:6px;
box-shadow:inset 0 0 16px rgba(0,0,0,.7), 0 4px 10px rgba(0,0,0,.3);
}
/* outfit renders bottom-right of its 64px canvas - pull the sprite back to center */
.char-portrait img{image-rendering:pixelated;transform:translate(-22px,-22px) scale(1.4);transform-origin:center}
.outfit-frame{
width:64px;height:64px;display:block;margin:0 auto;overflow:hidden;
}
/* sprite's opaque pixels centre on (48,46) of the 64px canvas - shift to the frame's middle */
.outfit-frame img{display:block;image-rendering:pixelated;transform:translate(-16px,-14px)}
.hs-noguild{color:#8a6a3a;opacity:.6}
/* ─────────────── POWERGAMERS - the restless names, day by day ─────────────── */
.pg-place{font-family:var(--ff-head);font-weight:800;font-size:15px;color:#6a4a22}
.pg-place.pg-top1{font-size:18px;color:#9a5c10;text-shadow:0 1px 0 rgba(255,246,220,.5)}
.pg-place.pg-top2,.pg-place.pg-top3{font-size:16px;color:#7a5426}
.pg-gain{
font-family:var(--ff-head);font-weight:800;font-size:15.5px;letter-spacing:.03em;
color:#3a2410;text-shadow:0 1px 0 rgba(255,246,220,.4);white-space:nowrap;
}
.pg-gain.up{color:#3f6820}
.pg-gain.down{color:#96301a}
.pg-gain.zero{color:#8a6a3a;opacity:.6;font-weight:600}
/* ─────────────── HIGHSCORES - skill rail + ranking names ─────────────── */
/* selectors carry the `a` so they outrank .sheet a (declared earlier) */
.hs-tabs{
display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
margin:0 0 18px;padding:11px 12px;
background:
radial-gradient(140% 120% at 50% 0%, rgba(255,200,110,.08), transparent 55%),
linear-gradient(172deg,#3c2513 0%,#241405 100%);
border:1px solid var(--brass-dim);border-radius:8px;
box-shadow:inset 0 0 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(214,168,96,.22), 0 2px 5px rgba(60,35,12,.28);
}
a.hs-tab,a.hs-tab:hover{border-bottom:none}
a.hs-tab{
font-family:var(--ff-head);font-weight:700;font-size:12.5px;
letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
padding:10px 17px;border-radius:5px;
color:#f2ddab;text-shadow:0 1px 3px rgba(0,0,0,.85);
background:linear-gradient(180deg,#5d3d20 0%,#3c2513 55%,#2a1a0c 100%);
border:1px solid rgba(201,151,59,.45);
box-shadow:inset 0 1px 0 rgba(214,168,96,.35), inset 0 -2px 4px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.45);
transition:transform .16s ease, filter .2s ease, box-shadow .25s ease;
}
a.hs-tab:hover,a.hs-tab:focus-visible{
color:#ffefc4;filter:brightness(1.22);transform:translateY(-1px);
box-shadow:inset 0 1px 0 rgba(214,168,96,.5), inset 0 -2px 4px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.5), 0 0 18px rgba(201,151,59,.35);
}
a.hs-tab.active,a.hs-tab.active:hover{
color:#2a1a08;text-shadow:0 1px 0 rgba(255,240,200,.6);
background:linear-gradient(180deg, var(--brass-glint) 0%, var(--brass-light) 18%, #c9973b 52%, var(--brass-dark) 100%);
border-color:#6e4c14;
box-shadow:inset 0 1px 0 rgba(255,245,214,.85), inset 0 -2px 3px rgba(90,55,10,.55), 0 4px 12px rgba(0,0,0,.5), 0 0 20px rgba(255,170,70,.4);
}
a.hs-name{
font-family:var(--ff-head);font-weight:800;font-size:16.5px;
letter-spacing:.03em;color:#543312;border-bottom-color:transparent;
}
a.hs-name:hover{color:#a3611a;border-bottom-color:#a3611a}
.hs-sub{
display:block;margin-top:2px;
font-size:13.5px;font-style:italic;color:#6a4d28;
}
.hs-sub b{font-style:normal;font-weight:700;color:#54371a}
/* the honour board rides tight - rows squeezed to the sprite's height */
/* .ec-legacy table already zeroes border-spacing, so the header reads as ONE bar */
.hs-board td{padding:1px 6px}
/* header: one quiet oak plank, single brass rule beneath
(shared by any table that marks its header row hs-head - highscores, maniacs) */
tr.hs-head td{
padding:8px 8px 7px;
font-family:var(--ff-head);font-weight:700;font-size:11px;
letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
color:#e8c98a;text-shadow:0 1px 2px rgba(0,0,0,.8);
background:linear-gradient(180deg,#452c16 0%,#2d1b0a 100%);
border:none;border-bottom:2px solid var(--brass-dim);
}
tr.hs-head td:first-child{border-radius:6px 0 0 0}
/* houses ledger: body cells carry the legacy 12px pad, so the bar matches */
.houses-board tr.hs-head td{padding-left:12px;padding-right:12px}
tr.hs-head td:last-child{border-radius:0 6px 0 0}
.hs-board a.hs-name{font-size:15px}
.hs-board .hs-sub{display:inline;margin:0 0 0 8px;font-size:12.5px}
.hs-board .outfit-frame{width:64px;height:50px}
/* sprite canvas is 64px; the tuned full-size crop shows rows 14..63 - this window
(y 14..64) shows the very same pixels, so nothing clips that didn't before */
.hs-board .outfit-frame img{transform:translate(-16px,-14px)}
/* the scrollbox clips overflow - side and bottom padding keep button shadows whole */
.hs-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap;padding:4px 8px 20px}
.hs-pager-off{opacity:.35;pointer-events:none}
.hs-pager-nums{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
a.hs-pageno,a.hs-pageno:hover{border-bottom:none}
a.hs-pageno,.hs-pageno{
min-width:30px;padding:6px 0;text-align:center;text-decoration:none;border-radius:5px;
font-family:var(--ff-head);font-weight:700;font-size:13.5px;letter-spacing:.06em;
color:#ffedbe;text-shadow:0 1px 2px rgba(0,0,0,.95);
background:linear-gradient(180deg,#6b4726 0%,#452b15 55%,#301e0e 100%);
border:1px solid rgba(214,168,96,.6);
box-shadow:inset 0 1px 0 rgba(214,168,96,.35), inset 0 -2px 4px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
transition:transform .16s ease, filter .2s ease;
}
a.hs-pageno:hover,a.hs-pageno:focus-visible{color:#ffefc4;filter:brightness(1.22);transform:translateY(-1px)}
.hs-pageno.active{
color:#2a1a08;text-shadow:0 1px 0 rgba(255,240,200,.6);
background:linear-gradient(180deg, var(--brass-glint) 0%, var(--brass-light) 18%, #c9973b 52%, var(--brass-dark) 100%);
border-color:#6e4c14;
box-shadow:inset 0 1px 0 rgba(255,245,214,.85), inset 0 -2px 3px rgba(90,55,10,.55), 0 0 14px rgba(255,170,70,.35);
}
/* ─────────────── TOP FRAGGERS - the butcher's bill ─────────────── */
/* three wanted plaques above the ledger; dark oak so they read on parchment */
.frag-podium{
display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
gap:16px;margin:6px 0 24px;
}
.frag-card{
position:relative;flex:0 1 190px;min-width:160px;
padding:16px 14px 14px;text-align:center;border-radius:8px;
background:
radial-gradient(140% 120% at 50% 0%, rgba(255,200,110,.1), transparent 55%),
linear-gradient(172deg,#3c2513 0%,#241405 100%);
border:1px solid var(--brass-dim);
box-shadow:inset 0 0 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(214,168,96,.22), 0 2px 5px rgba(60,35,12,.28);
}
.frag-card.rank-1{
flex-basis:220px;padding-top:22px;padding-bottom:20px;
border-color:rgba(201,151,59,.6);
box-shadow:inset 0 0 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(214,168,96,.3), 0 2px 6px rgba(60,35,12,.3), 0 0 26px rgba(255,150,60,.18);
}
.frag-rank{
display:block;font-family:var(--ff-head);font-weight:700;
font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
color:#b08a45;text-shadow:0 1px 3px rgba(0,0,0,.8);margin-bottom:8px;
}
.frag-card.rank-1 .frag-rank{color:var(--brass-light);text-shadow:0 1px 3px rgba(0,0,0,.8), 0 0 16px rgba(255,180,94,.35)}
.frag-card .outfit-frame{margin-bottom:2px}
/* .sheet carried so these outrank .sheet a:not(.btn) - the card is dark, the ink link brown would vanish */
.sheet a.frag-name,.sheet a.frag-name:hover{border-bottom:none}
.sheet a.frag-name{
display:block;font-family:var(--ff-head);font-weight:800;font-size:16px;
letter-spacing:.03em;color:#f2ddab;text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.sheet a.frag-name:hover{color:#ffefc4;text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(255,180,94,.45)}
.frag-sub{
display:block;margin-top:2px;
font-size:13px;font-style:italic;color:#b39c75;
}
.frag-sub b{font-style:normal;font-weight:700;color:#d8c49c}
.frag-count{
display:block;margin-top:8px;
font-family:var(--ff-head);font-weight:800;font-size:30px;line-height:1.1;
color:var(--gold);text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 22px rgba(255,170,70,.28);
}
.frag-card.rank-1 .frag-count{font-size:38px;color:#e06a50;text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 24px rgba(220,80,50,.35)}
.frag-count-label{
display:block;font-family:var(--ff-head);font-weight:700;
font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#8a6a3a;
}
.frag-last{
display:block;margin-top:8px;padding-top:7px;
border-top:1px solid rgba(185,143,82,.22);
font-size:12.5px;font-style:italic;color:#8a6a3a;
}
/* stacked cards read top-down - put the deadliest first, not centre */
@media (max-width:600px){
.frag-card.rank-1{order:1}
.frag-card.rank-2{order:2}
.frag-card.rank-3{order:3}
}
/* ─────────────── DEATH LEDGER - the chronicle of the fallen ─────────────── */
/* inked rows on the parchment sheet; PvP entries carry a blood-red spine */
.dth-ledger{margin:16px 0 20px;border-radius:6px;overflow:hidden;border:1px solid rgba(120,80,30,.35)}
.dth-row{
display:flex;align-items:center;gap:14px;
padding:9px 14px 9px 11px;
border-left:3px solid rgba(120,80,30,.25);
background:rgba(214,178,124,.16);
}
.dth-row:nth-child(even){background:rgba(190,150,96,.26)}
.dth-row+.dth-row{border-top:1px solid rgba(120,80,30,.18)}
.dth-row.dth-pvp{border-left-color:#9c3a22}
.dth-when{
flex:none;width:74px;text-align:center;
padding-right:12px;border-right:1px solid rgba(120,80,30,.28);
}
.dth-when .t{
display:block;font-family:var(--ff-head);font-weight:800;
font-size:15.5px;line-height:1.2;color:#54371a;
}
.dth-when .d{
display:block;font-size:11px;font-style:italic;
letter-spacing:.02em;color:#8a6a3a;white-space:nowrap;
}
.dth-tale{flex:1;font-size:14.5px;line-height:1.45}
.dth-tale b{color:#54371a}
/* .dth-row carried so this ties .sheet a:not(.btn):not(.hs-tab) on specificity and wins by order */
.sheet .dth-row a.dth-victim{
font-family:var(--ff-head);font-weight:800;font-size:15px;
letter-spacing:.02em;color:#543312;border-bottom-color:transparent;
}
.sheet .dth-row a.dth-victim:hover{color:#a3611a;border-bottom-color:#a3611a}
.dth-mark{flex:none}
.dth-tag-pvp{color:#ffe3da;background:linear-gradient(180deg,#a31414,#5a0606);border:1px solid #c92f1f;text-shadow:0 1px 2px rgba(0,0,0,.55)}
@media (max-width:600px){
.dth-row{flex-wrap:wrap;row-gap:4px}
.dth-when{width:auto;display:flex;gap:8px;align-items:baseline;border-right:none;padding-right:0}
.dth-mark{margin-left:auto}
}
/* quest ledger - same inked rows, deed name left, verdict right */
.quest-ledger{margin:0 0 20px;border-radius:6px;overflow:hidden;border:1px solid rgba(120,80,30,.35)}
.quest-row{
display:flex;align-items:center;gap:14px;
padding:9px 14px;
background:rgba(214,178,124,.16);
}
.quest-row:nth-child(even){background:rgba(190,150,96,.26)}
.quest-row+.quest-row{border-top:1px solid rgba(120,80,30,.18)}
.quest-row .qn{flex:1;font-size:14.5px;color:var(--ink-soft)}
/* who is online - standard table, name links in headline oak */
a.wio-name{
font-family:var(--ff-head);font-weight:700;font-size:14.5px;
letter-spacing:.02em;color:#543312;border-bottom-color:transparent;
}
a.wio-name:hover{color:#a3611a;border-bottom-color:#a3611a}
.wio-name+img{vertical-align:middle;margin-left:4px}
/* the tavern board - carved oak panel; dark so it reads against the parchment sheet */
.wio-board{
margin:14px 0 18px;padding:16px 18px 15px;border-radius:8px;
background:
radial-gradient(140% 120% at 50% 0%, rgba(255,200,110,.09), transparent 55%),
linear-gradient(172deg,#3c2513 0%,#241405 100%);
border:1px solid var(--brass-dim);
box-shadow:inset 0 0 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(214,168,96,.22), 0 2px 5px rgba(60,35,12,.28);
}
.wio-stats{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;row-gap:12px}
.wio-stat{min-width:120px;padding:2px 26px;text-align:center}
.wio-stat+.wio-stat{border-left:1px solid rgba(185,143,82,.25)}
.wio-stat .n{
display:block;font-family:var(--ff-head);font-weight:700;
font-size:11px;letter-spacing:.26em;text-transform:uppercase;
color:#b08a45;text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.wio-stat .v{
display:block;font-family:var(--ff-head);font-weight:800;
font-size:24px;line-height:1.2;color:var(--gold);margin-top:3px;
text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 22px rgba(255,170,70,.22);
}
.wio-stat .v.on{color:#9ed470;text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 20px rgba(130,220,90,.35)}
.wio-stat .v.off{color:#e06a50;text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 20px rgba(220,80,50,.3)}
.wio-stat .sub{display:block;margin-top:2px;font-size:12px;font-style:italic;color:var(--muted)}
/* second shelf of the board - who mans the fire, by calling */
.wio-vocs{
display:flex;flex-wrap:wrap;justify-content:center;row-gap:10px;
margin-top:14px;padding-top:13px;position:relative;
}
.wio-vocs::before{
content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
background:linear-gradient(90deg, transparent, rgba(185,143,82,.45), transparent);
}
.wio-voc{min-width:96px;padding:0 22px;text-align:center}
.wio-voc+.wio-voc{border-left:1px solid rgba(185,143,82,.18)}
.wio-voc .n{
display:block;font-family:var(--ff-head);font-weight:700;
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:#a07a3d;text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.wio-voc .v{
display:block;font-family:var(--ff-head);font-weight:800;
font-size:18px;color:var(--brass-light);margin-top:2px;
text-shadow:0 1px 4px rgba(0,0,0,.8);
}
/* the guest ledger - ranked rows of everyone at the fire */
table.wio-table{width:100%;border-collapse:separate;border-spacing:0 3px;margin:4px 0 8px}
.wio-table th{
padding:9px 12px;text-align:left;
font-family:var(--ff-head);font-weight:700;font-size:12.5px;
letter-spacing:.16em;text-transform:uppercase;
color:var(--gold);text-shadow:0 1px 3px rgba(0,0,0,.8);
background:linear-gradient(180deg,#4a2e17 0%,#2e1c0e 60%,#221204 100%);
border-top:1px solid rgba(185,143,82,.35);border-bottom:1px solid rgba(185,143,82,.35);
box-shadow:inset 0 1px 0 rgba(255,220,160,.12);
}
.wio-table th:first-child{border-left:1px solid rgba(185,143,82,.35);border-radius:6px 0 0 6px}
.wio-table th:last-child{border-right:1px solid rgba(185,143,82,.35);border-radius:0 6px 6px 0}
.wio-table th.c,.wio-table td.c{text-align:center}
.wio-table td{
padding:8px 12px;font-size:15.5px;color:var(--ink-soft);
border-top:1px solid rgba(122,84,40,.28);border-bottom:1px solid rgba(122,84,40,.28);
}
.wio-table td:first-child{border-left:1px solid rgba(122,84,40,.28);border-radius:5px 0 0 5px}
.wio-table td:last-child{border-right:1px solid rgba(122,84,40,.28);border-radius:0 5px 5px 0}
/* flat tints - a gradient across a full-width row reads as a lighting sweep, not paper */
.wio-table tr.odd td{
background:
repeating-linear-gradient(0deg, rgba(120,85,40,.045) 0 2px, transparent 2px 5px),
#ccb689;
}
.wio-table tr.even td{
background:
repeating-linear-gradient(0deg, rgba(120,85,40,.04) 0 2px, transparent 2px 5px),
#e0cfa6;
}
.wio-table tr:hover td{box-shadow:inset 0 0 0 100vmax rgba(255,190,90,.12)}
.wio-table td.wio-rank{
width:48px;
font-family:var(--ff-head);font-weight:800;font-size:14.5px;color:#8a5f1c;
}
.wio-table td.wio-lvl{font-family:var(--ff-head);font-weight:700;font-size:15px;color:#3a2410}
.wio-table td.wio-voc-cell{font-style:italic;color:#54371a}
/* ask the innkeeper - inline search */
.wio-search{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0 20px}
.wio-search input[type=text]{flex:0 1 300px}
@media (max-width:640px){
.wio-stat{min-width:0;padding:2px 14px}
.wio-voc{min-width:0;padding:0 12px}
}
/* the staff board - rank plaques above each shelf of keepers
(div.tm-rank so it outweighs .ec-legacy div's color:inherit) */
div.tm-rank{
display:flex;align-items:baseline;gap:10px;margin:24px 0 10px;
font-family:var(--ff-head);font-size:13px;font-weight:700;
letter-spacing:.26em;text-transform:uppercase;color:#7a5426;
}
.tm-rank::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(138,95,28,.45),transparent)}
.tm-rank .cnt{font-size:11px;letter-spacing:.12em;color:#a3823f}
.char-id{flex:1;min-width:220px}
.char-name{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
font-family:var(--ff-head);font-weight:800;font-size:clamp(22px,2.4vw,30px);
letter-spacing:.06em;color:#3a2410;line-height:1.1;
}
.char-name img{vertical-align:middle}
.char-name .tag-banned{font-size:13px;letter-spacing:.14em;color:var(--crimson)}
.char-sub{
margin-top:6px;font-style:italic;color:#6a4d28;font-size:15.5px;
}
.char-sub b{color:#54371a;font-style:normal}
.char-status{flex:none;text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.char-cols{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;margin-bottom:18px}
@media (max-width:860px){.char-cols{grid-template-columns:1fr;justify-items:center}}
/* equipment - carved slots, classic arrangement */
.equip-grid{
display:grid;grid-template-columns:repeat(3,64px);gap:6px;
padding:12px;border-radius:6px;
background:linear-gradient(160deg, rgba(58,36,19,.16), rgba(28,16,7,.1));
border:1px solid rgba(122,84,40,.35);
box-shadow:inset 0 0 18px rgba(110,74,32,.18);
}
.eq-slot{
width:64px;height:64px;display:grid;place-items:center;
background:
radial-gradient(circle at 50% 30%, rgba(255,220,150,.1), transparent 70%),
linear-gradient(160deg,#33200f,#170c05);
border:1px solid rgba(185,143,82,.3);border-radius:4px;
box-shadow:inset 0 0 12px rgba(0,0,0,.7);
}
.eq-slot img{max-width:52px;max-height:52px;image-rendering:pixelated}
.eq-stat{
width:64px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
background:linear-gradient(172deg,#d3bf95,#bfa87a);
border:1px solid rgba(122,84,40,.4);border-radius:4px;
box-shadow:inset 0 0 12px rgba(110,74,32,.3);
}
.eq-stat .n{font-family:var(--ff-head);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#54371a}
.eq-stat .v{font-family:var(--ff-head);font-size:15px;font-weight:800;color:#3a2410}
/* vitals - a dark wooden panel with brass-railed gauges */
.char-vitals{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;
padding:16px 18px 18px;margin-bottom:22px;border-radius:6px;
background:linear-gradient(180deg,#4a2e17 0%,#2e1c0e 60%,#221204 100%);
border:1px solid rgba(185,143,82,.35);
box-shadow:inset 0 1px 0 rgba(255,220,160,.12), 0 4px 12px rgba(0,0,0,.3);
}
.vit-row{display:flex;flex-direction:column;gap:6px;min-width:0}
.vit-row.wide{grid-column:1/-1}
.vit-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.vit-head .vl{
font-family:var(--ff-head);font-size:10.5px;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.vit-head .vv{font-family:var(--ff-head);font-size:14.5px;font-weight:800;color:var(--gold);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.ec-bar{
position:relative;display:block;height:18px;border-radius:9px;
background:rgba(0,0,0,.45);
border:1px solid rgba(185,143,82,.3);
box-shadow:inset 0 2px 5px rgba(0,0,0,.6);
overflow:hidden;
}
.ec-bar>span{
display:block;height:100%;border-radius:8px;min-width:6px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.25);
}
.ec-bar.hp>span{background:linear-gradient(180deg,#e86a50,#a4331d)}
.ec-bar.mp>span{background:linear-gradient(180deg,#5d84a3,#2a4a63)}
.ec-bar.xp>span{background:linear-gradient(180deg,var(--brass-light),#a4762a)}
.ec-bar .pct{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--ff-head);font-size:10px;font-weight:800;letter-spacing:.08em;
color:#f5e5c5;text-shadow:0 1px 2px rgba(0,0,0,.85);white-space:nowrap;overflow:hidden;
}
@media (max-width:720px){.char-vitals{grid-template-columns:1fr}}
/* facts - two-column ledger of details */
.char-dl{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
margin-top:16px;margin-bottom:22px;border:1px solid rgba(122,84,40,.32);border-radius:5px;overflow:hidden;
background:rgba(122,84,40,.32);
}
.char-dl .cell{display:flex;gap:10px;align-items:baseline;padding:10px 14px;background:linear-gradient(172deg,#e2d1a8,#d5c096)}
.char-dl .cell:nth-child(4n+1),.char-dl .cell:nth-child(4n+4){background:linear-gradient(172deg,#d8c69c,#cab389)}
/* .rows variant: shading is set server-side per row (.alt), immune to conditional cells */
.char-dl.rows .cell{background:linear-gradient(172deg,#e2d1a8,#d5c096)}
.char-dl.rows .cell.alt{background:linear-gradient(172deg,#d8c69c,#cab389)}
.char-dl a.cell{text-decoration:none;transition:background .15s ease}
.char-dl.rows a.cell:hover{background:linear-gradient(172deg,#ecdfb9,#e0cda2)}
.char-dl .cell.wide{grid-column:1/-1}
.char-dl dt{
flex:none;font-family:var(--ff-head);font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:#7a5426;min-width:96px;
}
.char-dl dd{margin:0;font-size:15px;color:var(--ink-soft);min-width:0;overflow-wrap:anywhere}
@media (max-width:720px){.char-dl{grid-template-columns:1fr}}
/* skills - same ledger as the facts table, three plaques to a row */
.skill-ledger{grid-template-columns:repeat(3,minmax(0,1fr))}
.skill-ledger dt{min-width:0}
.skill-ledger dd{font-family:var(--ff-head);font-size:16px;font-weight:800;color:#3a2410}
/* exp history - narrow value column, inked like the powergamers ranking */
.exp-ledger dd{font-size:14.5px}
@media (max-width:720px){.skill-ledger{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* signature - a plaque with a copyable link */
.sig-plaque{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
padding:14px 18px;margin-bottom:18px;border-radius:6px;
background:linear-gradient(160deg, rgba(58,36,19,.14), rgba(28,16,7,.08));
border:1px solid rgba(122,84,40,.35);
box-shadow:inset 0 0 18px rgba(110,74,32,.16);
}
.sig-plaque img{border:1px solid rgba(122,84,40,.5);border-radius:4px;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.sig-plaque .sig-link{flex:1;min-width:260px;display:flex;flex-direction:column;gap:5px}
.sig-plaque .sig-link label{
font-family:var(--ff-head);font-size:10.5px;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;color:#7a5426;
}
.sig-plaque input{width:100%;font-size:13.5px}
/* section caption reused outside legacy chrome */
.char-caption,.ec-legacy .char-caption{
display:inline-block;
font-family:var(--ff-head);font-weight:700;font-size:15px;
letter-spacing:.12em;text-transform:uppercase;
color:var(--gold);
padding:7px 18px;margin:4px 0 10px;
background:linear-gradient(180deg,#4a2e17 0%,#2e1c0e 60%,#221204 100%);
border:1px solid rgba(185,143,82,.35);border-radius:4px;
box-shadow:inset 0 1px 0 rgba(255,220,160,.12), 0 4px 12px rgba(0,0,0,.3);
text-shadow:0 1px 3px rgba(0,0,0,.8);
}
/* ─────────────── GUILD HALL (guilds show + manager) ─────────────── */
.guild-crest{
flex:none;width:92px;height:92px;
display:grid;place-items:center;
background:
radial-gradient(circle at 50% 35%, rgba(255,220,150,.14), transparent 70%),
linear-gradient(160deg,#3a2413,#1c1007);
border:1px solid var(--brass-dim);border-radius:6px;
box-shadow:inset 0 0 16px rgba(0,0,0,.7), 0 4px 10px rgba(0,0,0,.3);
}
.guild-crest img{
max-width:70px;max-height:70px;width:auto;height:auto;
filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.ec-legacy .guild-crest img{margin:0}
/* beat the 64px guild_image pin inside the crest frame - fill it like the
changelogo preview does, aspect kept by contain */
.ec-legacy .guild-crest img[src*="guild_image"]{
width:70px;height:70px;max-width:none;max-height:none;object-fit:contain;
border:none;box-shadow:none;border-radius:0;
}
/* in the banner head the crest hangs free - no box behind it */
.char-head .guild-crest{background:none;border:none;box-shadow:none;border-radius:0}
.char-head .guild-crest img,
.ec-legacy .char-head .guild-crest img[src*="guild_image"]{
width:auto;height:auto;max-width:92px;max-height:92px;object-fit:contain;
}
/* the guildhall plaque - a deed nailed beside the banner */
.guild-hall{
display:flex;align-items:center;gap:14px;
padding:12px 16px;margin-bottom:16px;border-radius:5px;
background:linear-gradient(172deg,#e8d7ae 0%,#d5bf92 100%);
border:1px solid rgba(122,84,40,.45);border-left:4px solid var(--brass-dark);
box-shadow:0 6px 16px rgba(0,0,0,.22), inset 0 0 14px rgba(110,74,32,.14);
}
.guild-hall img{flex:none;width:34px;height:34px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.guild-hall span{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.guild-hall b{color:#54371a}
/* the charter - what the guild says about itself */
.guild-charter{
font-style:italic;font-size:15.5px;line-height:1.6;color:var(--ink-soft);
padding:14px 20px;margin-bottom:18px;border-radius:4px;
background:linear-gradient(160deg, rgba(58,36,19,.10), rgba(28,16,7,.05));
border:1px solid rgba(122,84,40,.3);border-left:3px solid rgba(138,95,28,.55);
}
.guild-table{width:100%;margin-bottom:6px}
.guild-nick{font-style:italic;color:#6a4d28}
.guild-kick,.ec-legacy a.guild-kick{
font-family:var(--ff-head);font-size:9.5px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;
color:#7a2d1a;border:1px solid rgba(122,45,26,.45);border-radius:3px;
padding:1px 7px;margin-left:6px;vertical-align:1px;
}
.guild-kick:hover,.ec-legacy a.guild-kick:hover{color:#f3d9c8;background:#7a2d1a;border-color:#571e10}
/* manager: the leader's toolbox */
.mgr-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:12px;margin-bottom:18px;
}
.mgr-card,.ec-legacy a.mgr-card{
display:flex;flex-direction:column;gap:6px;
padding:14px 16px;border-radius:5px;border-bottom:none;
background:linear-gradient(172deg,#e2d1a8,#d0ba8e);
border:1px solid rgba(122,84,40,.45);
box-shadow:0 5px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,246,220,.4);
transition:transform .2s ease, box-shadow .2s ease;
}
.mgr-card:hover,.ec-legacy a.mgr-card:hover{
transform:translateY(-3px);
box-shadow:0 12px 24px rgba(0,0,0,.3), 0 0 18px rgba(255,150,60,.2);
}
.mgr-card .mc-t{
font-family:var(--ff-head);font-weight:700;font-size:13px;
letter-spacing:.12em;text-transform:uppercase;color:#3a2410;
}
.mgr-card .mc-d{font-size:13.5px;font-style:italic;color:#6a4d28;line-height:1.4}
.mgr-card.danger,.ec-legacy a.mgr-card.danger{
background:linear-gradient(172deg,#dbb59a,#c28d6d);
border-color:rgba(122,45,26,.55);
}
.mgr-card.danger .mc-t{color:#7a2d1a}
.mgr-card.danger .mc-d{color:#6d3a24}
.mgr-addrank{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.mgr-addrank input[type=text]{flex:0 1 320px}
.rank-info{display:flex;flex-direction:column;gap:8px}
.rank-info .ri-item{
font-size:14.5px;line-height:1.55;color:var(--ink-soft);
padding:10px 14px;border-radius:4px;
background:linear-gradient(172deg,#e2d1a8,#d5c096);
border:1px solid rgba(122,84,40,.35);
}
.rank-info .ri-item b{color:#54371a}
/* changelogo: the crest workshop - old shield beside the empty frame */
.logo-swap{margin-bottom:18px}
.ls-panes{display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap;margin:6px 0 18px}
.ls-pane{display:flex;flex-direction:column;align-items:center;gap:9px}
.ls-label{
font-family:var(--ff-head);font-size:10.5px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:#6a4d28;
}
.guild-crest.ls-big{width:132px;height:132px;border-radius:8px}
/* beat the 64px guild_image pin - fill the big frame, aspect kept by contain */
.guild-crest.ls-big img,.ec-legacy .guild-crest.ls-big img[src*="guild_image"]{
width:116px;height:116px;max-width:none;max-height:none;object-fit:contain;
border:none;box-shadow:none;border-radius:0;
}
.ls-arrow{color:rgba(110,74,32,.55);align-self:center;padding-top:20px}
.ls-arrow svg{
width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round;
}
.ls-drop,.ec-legacy label.ls-drop{display:block;cursor:pointer;border-bottom:none}
.ls-drop .guild-crest{transition:border-color .2s ease, box-shadow .2s ease}
.ls-drop:hover .guild-crest,.ls-drop.dragover .guild-crest{
border-color:var(--gold);
box-shadow:inset 0 0 16px rgba(0,0,0,.7), 0 0 20px rgba(255,150,60,.35);
}
.ls-plus{
font-size:44px;line-height:1;color:rgba(232,192,106,.45);
text-shadow:0 2px 5px rgba(0,0,0,.6);
transition:color .2s ease;
}
.ls-drop:hover .ls-plus,.ls-drop.dragover .ls-plus{color:rgba(255,205,120,.85)}
.ls-file{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ls-name{font-style:italic;font-size:14px;color:#6a4d28}
.ls-name b{color:#54371a}
.ls-name.ls-name-err,.ls-name.ls-name-err b{color:#7a2d1a}
.ls-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ls-actions input[type=submit]:disabled{opacity:.5;cursor:not-allowed}
.ls-hint{font-size:13.5px;font-style:italic;color:#6a4d28}
.ls-hint b{color:#54371a}
/* ─────────────── ACCOUNT DASHBOARD (accountmanagement) ─────────────── */
.acct-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.acct-hail{
font-family:var(--ff-head);font-weight:700;font-size:19px;
letter-spacing:.05em;color:#3a2410;
}
.acct-note{
display:flex;align-items:center;gap:16px;flex-wrap:wrap;
padding:12px 16px;margin-bottom:16px;border-radius:5px;
background:linear-gradient(172deg,#e8d7ae 0%,#d5bf92 100%);
border:1px solid rgba(122,84,40,.45);border-left:4px solid var(--brass-dark);
box-shadow:0 6px 16px rgba(0,0,0,.22), inset 0 0 14px rgba(110,74,32,.14);
}
.acct-note>span{flex:1;min-width:240px;font-size:14.5px;color:var(--ink-soft)}
.acct-note .btn{flex:none}
.acct-dim{color:#7a5c30;opacity:.85}
/* the ownership proof code - ink on parchment notes, gold on oak cards */
.stream-code{
display:block;margin:10px 0 4px;
font-family:var(--ff-head);font-weight:700;font-size:22px;
letter-spacing:.14em;color:#3a2410;user-select:all;
}
.acct-card .stream-code{color:var(--gold);font-size:24px;margin:12px 0}
/* the login hall - pitch on the parchment, the ledger card in oak */
.acct-login{
display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:clamp(24px,4vw,60px);align-items:center;
padding:clamp(4px,1vw,16px) clamp(2px,1vw,12px);
}
.acct-pitch h2{
font-family:var(--ff-head);font-weight:700;font-size:clamp(21px,2.2vw,27px);
letter-spacing:.04em;color:#3a2410;margin-bottom:10px;
}
.acct-pitch p{font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin-bottom:14px}
.acct-pitch .acct-pitch-cta{margin:4px 0 0;font-style:italic}
.acct-perks{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.acct-perks li{
position:relative;padding:9px 14px 9px 40px;border-radius:5px;
font-size:14.5px;color:var(--ink-soft);
background:linear-gradient(172deg,#e2d1a8,#d5c096);
border:1px solid rgba(122,84,40,.32);
box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.acct-perks li::before{content:"\2726";position:absolute;left:15px;top:8px;color:#a3611a;font-size:13px}
/* the oak card - dark timber panel for forms and receipts */
.acct-card{
padding:clamp(20px,2.6vw,32px);border-radius:8px;
background:
radial-gradient(140% 100% at 50% 0%, rgba(255,220,150,.10), transparent 60%),
linear-gradient(160deg,#4a2e17 0%,#31200f 55%,#241405 100%);
border:1px solid rgba(185,143,82,.45);
box-shadow:inset 0 1px 0 rgba(255,220,160,.14), inset 0 0 34px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.38);
}
h3.acct-card-title,.ec-legacy .acct-card-title{
font-family:var(--ff-head);font-size:16px;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;
color:var(--gold);text-shadow:0 1px 3px rgba(0,0,0,.8);
margin-bottom:16px;padding-bottom:12px;
border-bottom:1px solid rgba(185,143,82,.3);
}
.acct-card,.acct-card .nc-body{color:var(--parch)}
.acct-card .nc-body{font-size:15.5px;line-height:1.65}
.acct-card .nc-body b{color:var(--gold)}
.acct-card .nc-body small{color:var(--muted)}
.acct-card .nc-body ul{margin:8px 0 0 20px}
.sheet .acct-card a:not(.btn){color:var(--brass-light);border-bottom-color:rgba(232,192,106,.4)}
.sheet .acct-card a:not(.btn):hover{color:var(--gold)}
.acct-card .ec-form label{color:var(--brass-light)}
.acct-card .ec-form .f-check{
color:var(--parch);
border-color:rgba(232,192,106,.3);background:rgba(232,192,106,.05);
}
.acct-card .ec-form .f-check:hover{border-color:rgba(232,192,106,.55);background:rgba(232,192,106,.1)}
.acct-card .ec-form .f-check input{
border-color:var(--brass);
background:linear-gradient(180deg,#3a2716,#281809);
box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.acct-card .ec-form .f-check input::before{background:#2c1b0d}
.acct-card .ec-form .f-check input:checked{
border-color:var(--brass-light);
background:linear-gradient(180deg,var(--brass-glint),var(--brass-light));
}
.acct-card .ec-note{color:var(--muted);border-color:rgba(232,192,106,.3)}
.acct-card input[disabled]{opacity:.65}
.acct-notice{max-width:660px;margin:14px auto}
/* intro column beside the oak card */
.acct-duo{
display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(22px,3.4vw,52px);align-items:start;
padding:clamp(2px,.8vw,10px) 0;
}
.acct-duo-side{font-size:15.5px;line-height:1.65;color:var(--ink-soft)}
.acct-duo-side p{margin-bottom:12px}
.acct-duo-side .char-caption{margin-bottom:14px}
/* the overview - ledger and roster shoulder to shoulder */
.acct-grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(20px,3vw,44px);align-items:start;
}
.char-dl.one{grid-template-columns:1fr;margin-top:0}
.char-dl.one .cell:nth-child(4n+1),.char-dl.one .cell:nth-child(4n+4){background:linear-gradient(172deg,#e2d1a8,#d5c096)}
.char-dl.one .cell:nth-child(even){background:linear-gradient(172deg,#d8c69c,#cab389)}
/* the roster - every hero gets a plank */
.roster{display:flex;flex-direction:column;gap:8px}
.roster-row{
display:flex;align-items:center;gap:12px;
padding:8px 12px 8px 14px;border-radius:5px;
background:linear-gradient(172deg,#e2d1a8,#d5c096);
border:1px solid rgba(122,84,40,.35);
box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.roster-row .r-idx{
flex:none;width:22px;text-align:center;
font-family:var(--ff-head);font-size:12px;font-weight:700;color:#a3823f;
}
.roster-row .r-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sheet a.r-name{
font-family:var(--ff-head);font-weight:700;font-size:15px;
letter-spacing:.03em;border-bottom:none;align-self:flex-start;
}
.roster-row .r-sub{font-style:italic;font-size:13px;color:#6a4d28}
.roster-row .r-del{font-size:12px;font-weight:700;color:#a4331d}
.roster-row .status-tag{flex:none}
/* premium seal */
.status-gold{
color:#3a2405;
background:linear-gradient(180deg,var(--brass-glint),var(--brass-light) 30%,#c9973b 70%,var(--brass-dark));
border:1px solid #6e4c14;
box-shadow:inset 0 1px 0 rgba(255,245,214,.7);
text-shadow:0 1px 0 rgba(255,240,200,.5);
}
/* the recovery key - stamped in brass, impossible to miss */
.rec-key{
display:block;text-align:center;margin:16px 0;
font-family:var(--ff-head);font-weight:800;
font-size:clamp(22px,3vw,30px);letter-spacing:.3em;text-indent:.3em;
color:var(--gold);text-shadow:0 2px 6px rgba(0,0,0,.8), 0 0 26px rgba(255,150,60,.4);
padding:16px 20px;border-radius:6px;
background:linear-gradient(160deg,#3a2413,#1c1007);
border:1px dashed rgba(232,192,106,.55);
box-shadow:inset 0 0 20px rgba(0,0,0,.6);
}
/* the blood button - for deeds best done soberly */
.btn-blood{
color:#f3d9c8;
background:linear-gradient(180deg,#8a3a26 0%,#6d2a18 55%,#571e10 100%);
border:1px solid #3a1206;
box-shadow:inset 0 1px 0 rgba(255,200,170,.25), inset 0 -2px 4px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.5);
text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.btn-blood:hover,.btn-blood:focus-visible{
filter:brightness(1.18);transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,200,170,.3), inset 0 -2px 4px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.55), 0 0 20px rgba(164,51,29,.4);
}
.sheet .acct-card button.btn-blood,.ec-form button.btn-blood{
background:linear-gradient(180deg,#8a3a26 0%,#6d2a18 55%,#571e10 100%);
border-color:#3a1206;color:#f3d9c8;
}
.ec-msg ul{margin:6px 0 0 20px}
@media (max-width:1000px){
.acct-login,.acct-duo,.acct-grid{grid-template-columns:1fr}
.acct-login{gap:26px}
}
/* ─────────────── ADMIN NEWS PANEL ─────────────── */
.ec-form{display:flex;flex-direction:column;gap:16px}
.ec-form .f-row{display:flex;gap:16px;flex-wrap:wrap}
.ec-form .f-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px}
.ec-form label{
font-family:var(--ff-head);font-size:11px;font-weight:700;
letter-spacing:.24em;text-transform:uppercase;color:#7a5426;
}
.ec-form textarea{min-height:260px;resize:vertical;line-height:1.5}
.ec-form .f-check{
display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;
font-family:var(--ff-body);font-size:15.5px;font-weight:400;
letter-spacing:.02em;text-transform:none;color:var(--ink-soft);
padding:11px 14px;border:1px solid rgba(138,95,28,.35);border-radius:8px;
background:rgba(138,95,28,.07);
transition:border-color .2s ease,background .2s ease;
}
.ec-form .f-check:hover{border-color:rgba(138,95,28,.6);background:rgba(138,95,28,.12)}
.ec-form .f-check input{
appearance:none;-webkit-appearance:none;margin:0;flex:none;
width:19px;height:19px;border:1.5px solid var(--brass-dark);border-radius:4px;
background:linear-gradient(180deg,#fdf6e3,#efe0bd);
box-shadow:inset 0 1px 2px rgba(46,30,15,.25);
display:grid;place-items:center;cursor:pointer;
transition:background .15s ease,border-color .15s ease;
}
.ec-form .f-check input::before{
content:"";width:11px;height:11px;
transform:scale(0);transition:transform .12s ease-in-out;
background:var(--brass-dark);
clip-path:polygon(14% 44%, 0 62%, 38% 100%, 100% 16%, 84% 4%, 38% 71%);
}
.ec-form .f-check input:checked{background:linear-gradient(180deg,var(--brass-glint),var(--brass-light))}
.ec-form .f-check input:checked::before{transform:scale(1)}
.ec-form .f-check input[type=radio]{border-radius:50%}
.ec-form .f-check input[type=radio]::before{clip-path:none;border-radius:50%;width:9px;height:9px}
.ec-form .f-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px}
.ec-note{
font-style:italic;font-size:14px;color:#8a6a3a;
border-left:3px solid rgba(138,95,28,.5);padding-left:10px;
}
.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.admin-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.admin-table td{vertical-align:middle}
.admin-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.admin-actions .abtn{
font-family:var(--ff-head);font-size:10px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;
padding:6px 12px;border-radius:4px;cursor:pointer;border:1px solid;
transition:filter .2s ease, transform .18s ease;
}
.admin-actions .abtn:hover{filter:brightness(1.15);transform:translateY(-1px)}
.abtn-edit{color:#2a1a08;background:linear-gradient(180deg,var(--brass-light),#c9973b);border-color:#6e4c14}
.abtn-pin{color:var(--parch);background:linear-gradient(180deg,#56381e,#2a1a0c);border-color:var(--brass-dark)}
.abtn-del{color:#f3d9c8;background:linear-gradient(180deg,#8a3a26,#571e10);border-color:#3a1206}
.status-tag{
display:inline-block;font-family:var(--ff-head);font-size:10px;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;padding:4px 10px 3px;border-radius:3px;
}
.status-live{color:#e9f3d0;background:linear-gradient(180deg,#3c5a1e,#22350c);border:1px solid #5a7d2a}
.status-draft{color:#f0e2c8;background:linear-gradient(180deg,#6a6a6a,#3a3a3a);border:1px solid #8a8a8a}
.status-sched{color:#f3e0b0;background:linear-gradient(180deg,#7a5426,#4a2f10);border:1px solid #a9773a}
/* ─────────────── DOWNLOADS - provisions for the road ─────────────── */
.dl-hero{
display:grid;grid-template-columns:minmax(200px,320px) 1fr;
gap:clamp(20px,3.5vw,52px);align-items:center;
padding:clamp(26px,4vw,52px) clamp(22px,4vw,56px);
margin-bottom:clamp(28px,5vh,52px);
}
.dl-art{position:relative;text-align:center}
.dl-art::before{
content:"";position:absolute;inset:-14% -10%;pointer-events:none;
background:radial-gradient(50% 46% at 50% 58%, rgba(255,150,60,.2), transparent 72%);
}
.dl-art img{
position:relative;width:min(100%,290px);
filter:drop-shadow(0 20px 34px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(255,140,50,.12));
}
.dl-title{
font-family:var(--ff-head);font-weight:700;
font-size:clamp(22px,2.5vw,31px);line-height:1.2;
letter-spacing:.05em;color:var(--gold);
text-shadow:0 2px 6px rgba(0,0,0,.9), 0 0 30px rgba(255,150,60,.2);
margin:8px 0 12px;
}
.dl-lead{
font-style:italic;font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.55;
color:var(--parch);max-width:56ch;
text-shadow:0 2px 8px rgba(0,0,0,.85);
}
.dl-meta{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 24px}
.dl-fact{
display:flex;flex-direction:column;gap:1px;
min-width:92px;padding:9px 14px 8px;
color:var(--parch);font-size:15px;font-weight:600;
background:linear-gradient(172deg,rgba(60,37,19,.85),rgba(30,17,7,.9));
border:1px solid var(--brass-dim);border-radius:5px;
box-shadow:inset 0 1px 0 rgba(255,220,160,.1), 0 8px 18px rgba(0,0,0,.45);
}
.dl-fact small{
font-family:var(--ff-head);font-size:10.5px;font-weight:600;
letter-spacing:.24em;text-transform:uppercase;color:var(--brass-light);
}
.dl-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dl-actnote{font-style:italic;font-size:14px;color:var(--muted);text-shadow:0 2px 6px #000}
.dl-mirrors{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-top:18px;padding-top:16px;
border-top:1px solid rgba(201,151,59,.22);
}
.dl-mirrors-label{
font-family:var(--ff-head);font-size:11.5px;font-weight:600;
letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
/* trouble on the road - signpost to the FAQ client chapter */
.dl-faq{
padding:clamp(24px,3.5vw,44px) clamp(22px,4vw,56px);
margin-top:clamp(24px,4vh,40px);
text-align:center;
}
.dl-faq .ec-sechead{margin-bottom:10px}
.dl-faq .dl-lead{max-width:72ch;margin:0 auto}
.dl-faq .dl-actions{justify-content:center}
/* marching orders - torn parchment scraps, one per step */
.dl-steps{
display:grid;grid-template-columns:repeat(4,1fr);
gap:clamp(14px,2vw,22px);
margin-bottom:clamp(28px,5vh,52px);
}
.dl-step{
position:relative;display:flex;flex-direction:column;gap:8px;
padding:22px 20px 18px;color:var(--ink);
background:
var(--noise),
linear-gradient(168deg,#e0cda6 0%,#cbb283 55%,#b49a6a 100%);
background-blend-mode:overlay,normal;
clip-path:polygon(2% 0,98% 1.5%,100% 12%,99% 97%,96% 100%,3% 98.5%,0 90%,1% 3%);
box-shadow:0 16px 38px rgba(0,0,0,.55), inset 0 0 30px rgba(90,60,20,.25);
}
.dl-step-num{
font-family:var(--ff-head);font-weight:700;font-size:30px;line-height:1;
color:var(--brass-dark);
text-shadow:0 1px 0 rgba(255,246,220,.5);
}
.dl-step-title{
font-family:var(--ff-head);font-weight:700;font-size:15.5px;
letter-spacing:.08em;text-transform:uppercase;color:#3a2410;
}
.dl-step-text{font-size:15px;line-height:1.5;color:#4d3418}
.dl-step-link{
margin-top:auto;padding-top:6px;align-self:flex-start;
font-family:var(--ff-head);font-size:12.5px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
color:#7a4a14;border-bottom:1px solid rgba(138,95,28,.4);
}
.dl-step-link:hover{color:#a3611a;border-color:#a3611a;text-shadow:none}
/* signposts - brass-hinged wooden pointers */
.dl-links{
display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(12px,1.8vw,20px);
margin-bottom:clamp(24px,4vh,40px);
}
.dl-link{
display:flex;align-items:center;gap:16px;
padding:16px 20px;text-decoration:none;
background:
radial-gradient(120% 150% at 0% 0%, rgba(255,200,110,.07), transparent 55%),
linear-gradient(168deg,#33200f 0%,#1d1006 60%,#150b04 100%);
border:1px solid var(--brass-dim);border-radius:6px;
box-shadow:inset 0 1px 0 rgba(255,220,160,.08), 0 12px 30px rgba(0,0,0,.5);
transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.dl-link:hover{
transform:translateY(-3px);
border-color:var(--brass);
box-shadow:inset 0 1px 0 rgba(255,220,160,.12), 0 18px 40px rgba(0,0,0,.6), 0 0 24px rgba(255,150,60,.12);
}
.dl-link-ico{
flex:none;display:grid;place-items:center;width:46px;height:46px;
border:1px solid var(--brass-dim);border-radius:50%;
background:radial-gradient(circle at 35% 30%, rgba(255,200,110,.14), rgba(20,11,5,.6));
box-shadow:inset 0 0 12px rgba(0,0,0,.6);
}
.dl-link-ico svg{
width:22px;height:22px;fill:none;stroke:var(--brass-light);
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.dl-link-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-link-title{
font-family:var(--ff-head);font-weight:700;font-size:15px;
letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
text-shadow:0 2px 5px rgba(0,0,0,.85);
}
.dl-link-note{font-style:italic;font-size:14px;color:var(--muted)}
.dl-link-arrow{
margin-left:auto;font-size:20px;color:var(--brass-light);
transition:transform .18s ease;
}
.dl-link:hover .dl-link-arrow{transform:translateX(4px)}
@media (max-width:1000px){
.dl-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
.dl-hero{grid-template-columns:1fr;text-align:center}
.dl-art img{width:min(60%,230px)}
.dl-lead{margin-inline:auto}
.dl-meta,.dl-actions,.dl-mirrors{justify-content:center}
.dl-links{grid-template-columns:1fr}
}
@media (max-width:560px){
.dl-steps{grid-template-columns:1fr}
.dl-fact{min-width:80px;padding:8px 11px 7px;font-size:14px}
}
/* ─────────────── TOAST / MESSAGES ─────────────── */
.ec-msg{
position:relative;margin-bottom:18px;
font-style:italic;font-size:15.5px;color:var(--ink);
background:linear-gradient(175deg,#dcc89f,#c3aa7c);
clip-path:polygon(1% 0,99% 4%,100% 88%,98% 100%,1.5% 97%,0 86%);
padding:13px 22px;box-shadow:0 12px 30px rgba(0,0,0,.55);
}
.ec-msg.err{background:linear-gradient(175deg,#d9a58c,#bd7a5c);color:#38130a}
/* ─────────────── FOOTER ─────────────── */
#ec-footer{
position:relative;z-index:10;
margin-top:auto;
padding:26px clamp(16px,4vw,48px) calc(20px + env(safe-area-inset-bottom,0px));
text-align:center;
background:linear-gradient(180deg, rgba(16,9,5,0), rgba(10,5,2,.88) 40%, rgba(6,3,1,.96));
}
#ec-footer .foot-rule{
margin:0 auto 14px;height:24px;opacity:.75;
}
#ec-footer .foot-rule::after{width:8px;height:8px;animation:none}
#ec-footer .foot-nav{
display:flex;align-items:center;justify-content:center;
gap:18px;flex-wrap:wrap;margin-bottom:12px;
}
#ec-footer .foot-links{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
#ec-footer .foot-sep{
width:1px;height:20px;
background:linear-gradient(180deg,transparent,rgba(201,151,59,.55),transparent);
}
#ec-footer .foot-socials{justify-content:center;gap:8px}
#ec-footer .foot-socials a{width:34px;height:34px}
#ec-footer .foot-socials svg{width:20px;height:20px}
#ec-footer .foot-note{font-size:13.5px;color:rgba(179,156,117,.75);font-style:italic}
#ec-footer .foot-note b{color:var(--muted);font-weight:600}
/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width:1280px){
/* keep the beam tidy: the create-account action lives in the Account shelf anyway */
.ec-navactions .btn-oak{display:none}
.ec-navitem>a,.ec-navitem>button{padding:0 clamp(8px,1vw,14px);letter-spacing:.14em}
}
@media (max-width:1080px){
.news-grid{grid-template-columns:1fr}
.brand-name{font-size:14px}
.ec-navitem>a,.ec-navitem>button{font-size:12px}
}
@media (max-width:920px){
body{font-size:16px}
.ec-navlinks{
position:fixed;top:var(--nav-h);left:0;right:0;
flex-direction:column;align-items:stretch;height:auto;
background:linear-gradient(180deg,rgba(26,15,8,.98),rgba(14,8,4,.98));
border-bottom:1px solid rgba(201,151,59,.4);
box-shadow:0 18px 30px rgba(0,0,0,.6);
max-height:0;overflow:hidden;overflow-y:auto;
transition:max-height .35s ease;
z-index:39;
}
body.nav-open .ec-navlinks{max-height:calc(100vh - var(--nav-h))}
.ec-navitem{flex-direction:column;align-items:stretch}
.ec-navitem>a,.ec-navitem>button{
height:auto;padding:.95em clamp(16px,4vw,48px);
border-top:1px solid rgba(201,151,59,.14);
justify-content:space-between;
}
.ec-navitem>a::after,.ec-navitem>button::after{display:none}
.ec-drop,
.ec-navitem:hover .ec-drop,
.ec-navitem:focus-within .ec-drop{
position:static;transform:none;visibility:visible;opacity:1;
min-width:0;border:none;box-shadow:none;padding:0 0 6px;
background:rgba(0,0,0,.3);
display:none;
}
.ec-drop::before{display:none}
.ec-navitem.open .ec-drop{display:block}
.ec-drop a{padding-left:clamp(30px,8vw,64px)}
.nav-burger{display:flex}
.ticker-label span{display:none}
.ec-hero{padding-top:14px}
}
@media (max-width:620px){
#ec-footer .foot-nav{flex-direction:column;gap:12px}
#ec-footer .foot-sep{width:64px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,151,59,.55),transparent)}
.btn{padding:12px 18px;font-size:12.5px}
.btn-lg{font-size:14px;padding:14px 24px}
.brand-name{font-size:13px;letter-spacing:.1em}
.brand-eclipse{width:24px;height:24px}
.stat-chip{min-width:74px;padding:10px 12px 8px}
.chip-val{font-size:21px}
.arch-item{flex-wrap:wrap;gap:8px}
.arch-thead{display:none}
.arch-row{grid-template-columns:auto 1fr;row-gap:4px}
.arch-row .arch-title{grid-column:1/-1;white-space:normal}
.arch-row .news-cat{justify-self:end}
.article-sheet{padding:20px 16px}
.ec-legacy{padding:18px 12px;font-size:15px;overflow-x:auto}
.ec-legacy td,.ec-legacy th{padding:6px 8px;font-size:14px}
.pin-item{flex-wrap:wrap;gap:6px}
.pin-item .news-date{margin-left:0}
}
/* wide legacy tables scroll inside the sheet, never break the page */
.ec-scrollbox{overflow-x:auto;max-width:100%}
/* ── server info: the house charter ─────────────────────────────── */
/* five rate plaques over the hearth - same dark oak as the skill chips */
.si-rates{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:4px 0 20px}
.si-rate{
text-align:center;padding:12px 8px 11px;border-radius:6px;
background:linear-gradient(180deg,#4a2e17 0%,#2e1c0e 60%,#221204 100%);
border:1px solid rgba(185,143,82,.35);
box-shadow:inset 0 1px 0 rgba(255,220,160,.12), 0 2px 4px rgba(60,35,12,.22);
}
.si-rate .n{
display:block;font-family:var(--ff-head);font-size:10px;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;
color:#b08a45;text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.si-rate .v{
display:block;font-family:var(--ff-head);font-size:23px;font-weight:800;
color:var(--gold);margin-top:3px;
text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 22px rgba(255,170,70,.22);
}
.si-rate .sub{display:block;margin-top:1px;font-size:11.5px;font-style:italic;color:var(--muted)}
/* the staged ledger sits narrower, centred like a posted notice */
table.si-stages{width:min(540px,100%);margin:4px auto 20px}
/* inside the library's main column the plaques get less room than the
viewport suggests - let them wrap by measure instead of a fixed five */
.lib-main .si-rates{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media (max-width:720px){
.si-rates{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:480px){
.si-rates{grid-template-columns:repeat(2,1fr)}
}
/* ── experience table: the ledger of levels ─────────────────────── */
/* the counting board - input on the left, the sums beside it */
.xpt-calc{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px}
.xpt-calc-in{display:flex;align-items:center;gap:14px}
.xpt-calc-in label{
font-family:var(--ff-head);font-weight:700;font-size:11px;
letter-spacing:.24em;text-transform:uppercase;text-align:right;line-height:1.6;
color:#b08a45;text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.xpt-calc-in input[type=number]{
width:96px;padding:10px 6px;border-radius:6px;text-align:center;
font-family:var(--ff-head);font-weight:800;font-size:21px;color:var(--gold);
background:rgba(0,0,0,.38);border:1px solid var(--brass-dim);
box-shadow:inset 0 2px 8px rgba(0,0,0,.6);
}
.xpt-calc-in input[type=number]:focus{outline:none;border-color:var(--brass-light);box-shadow:inset 0 2px 8px rgba(0,0,0,.6), 0 0 14px rgba(255,180,80,.25)}
.xpt-calc-out{flex:none}
.xpt-calc-out .wio-stat .v{min-width:150px}
.xpt-calc-act{flex:none}
/* four columns of a hundred pages each */
.xpt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:2px 16px;margin:4px 0 16px;align-items:start}
.xpt-colhead{
margin:10px 0 2px;text-align:center;
font-family:var(--ff-head);font-weight:700;font-size:12px;
letter-spacing:.22em;text-transform:uppercase;color:#8a5f1c;
}
.xpt-table td{padding:4px 10px;font-size:13.5px}
.xpt-table td.wio-lvl{width:52px;font-size:13.5px}
.xpt-table td.xpt-gain{font-size:12px;color:#6a4d28}
/* every fiftieth level inked in brass */
.wio-table tr.xpt-mile td{
background:
repeating-linear-gradient(0deg, rgba(120,85,40,.05) 0 2px, transparent 2px 5px),
#d9ba72;
border-color:rgba(150,100,35,.5);font-weight:700;
}
/* the page the reader asked after */
.wio-table tr.xpt-here td{
box-shadow:inset 0 0 0 100vmax rgba(255,165,55,.3);
border-color:rgba(190,120,40,.85);
}
/* ─────────────── HOMEPAGE REDESIGN v3 - the hall split in two ─────────────── */
/* the greeting is spoken from the left; the tavern board - a ledger of the
house's vitals - hangs nailed to the right-hand wall */
.home-hall{
display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,360px);
align-items:center;gap:clamp(26px,4.5vw,72px);
padding:clamp(26px,4.8vh,56px) 0 clamp(8px,1.6vh,18px);
}
.hall-greet .eyebrow{display:flex;align-items:center;gap:14px}
.hall-greet .eyebrow::after{
content:"";flex:0 1 96px;height:1px;
background:linear-gradient(90deg,var(--brass-dim),transparent);
}
.hall-greet .hero-title{
font-family:var(--ff-head);font-weight:900;
font-size:clamp(36px,4.8vw,64px);line-height:1.05;
letter-spacing:.08em;text-transform:uppercase;
color:var(--parch-light);margin-top:12px;
text-shadow:
0 0 32px rgba(255,122,47,.38),
0 0 8px rgba(255,180,94,.3),
0 4px 14px rgba(0,0,0,.9);
}
.hall-greet .hand-note{
font-style:italic;
font-size:clamp(16.5px,1.8vw,20px);line-height:1.5;
color:var(--parch);margin:14px 0 26px;max-width:480px;
text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 28px rgba(0,0,0,.75);
}
.hall-side{display:flex;flex-direction:column}
/* the tavern board - the innkeeper's ledger page, wax-tacked to the wall
beside the greeting: the same parchment and ink as every other paper here */
.hall-paper{
position:relative;color:var(--ink);
padding:clamp(20px,2.6vh,26px) clamp(18px,2vw,26px) clamp(14px,2vh,20px);
transform:rotate(.6deg);
background:
var(--noise),
radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.5), rgba(255,246,220,0) 55%),
linear-gradient(168deg,#e0cda6 0%,#cbb283 55%,#b49a6a 100%);
background-blend-mode:overlay,normal,normal;
clip-path:polygon(1.2% 1%,98.6% 0,100% 3.4%,99.5% 96.2%,98% 100%,1.8% 99%,0 95.8%,.5% 2.8%);
box-shadow:0 18px 44px rgba(0,0,0,.55), inset 0 0 34px rgba(90,60,20,.3);
}
/* the blob of red wax holding it to the wall */
.hall-paper::before{
content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%) rotate(-8deg);
width:19px;height:17px;border-radius:46% 54% 52% 48%/55% 48% 52% 45%;
background:radial-gradient(circle at 34% 28%, #e86a50, #8a2415 58%, #4a0f06);
box-shadow:0 3px 6px rgba(0,0,0,.45), inset 0 -2px 4px rgba(0,0,0,.3);
}
.paper-head{
position:relative;text-align:center;margin-bottom:10px;padding-bottom:9px;
font-family:var(--ff-head);font-weight:700;font-size:12.5px;
letter-spacing:.28em;text-transform:uppercase;
color:#5a3812;text-shadow:0 1px 0 rgba(255,246,220,.5);
}
/* double ink rule under the heading, like the ledger pages */
.paper-head::after{
content:"";position:absolute;left:10%;right:10%;bottom:0;height:5px;
background:
linear-gradient(90deg, transparent, rgba(110,74,32,.55) 12%, rgba(110,74,32,.55) 88%, transparent) 0 0/100% 1px no-repeat,
linear-gradient(90deg, transparent, rgba(110,74,32,.35) 18%, rgba(110,74,32,.35) 82%, transparent) 0 100%/100% 1px no-repeat;
}
.tb-rows{position:relative;z-index:1;display:flex;flex-direction:column}
.tb-row{
display:flex;align-items:center;gap:11px;
padding:6px 5px 5px;min-height:36px;
}
.tb-row + .tb-row{border-top:1px solid rgba(110,74,32,.16)}
/* the innkeeper's dotted ink leader between name and figure */
.tb-row .dots{
flex:1;min-width:20px;height:1px;align-self:center;margin-top:4px;
background-image:radial-gradient(circle, rgba(110,74,32,.5) 1px, transparent 1.4px);
background-size:7px 1px;background-repeat:repeat-x;
}
.tb-row .n{
font-family:var(--ff-body);font-style:italic;font-size:15.5px;
letter-spacing:.03em;color:#6a4a22;
transition:color .2s ease;
}
.tb-row .v{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--ff-head);font-weight:800;font-size:18px;line-height:1.1;
color:#3a2410;text-shadow:0 1px 0 rgba(255,246,220,.4);
}
.tb-row .v small{font-size:12px;font-weight:600;color:#7a5a30}
.tb-row .v.tb-time{font-size:14.5px}
.tb-row .v.on{color:#3f6820}
.tb-row .v.off{color:#96301a}
a.tb-row{transition:background .2s ease;border-radius:3px}
a.tb-row:hover{background:linear-gradient(90deg, transparent, rgba(110,74,32,.12) 50%, transparent)}
a.tb-row:hover .n{color:#3a2410}
/* the travelling trader's note - Rashid framed on the left,
today's stop inked on the right */
.tb-rashid{
position:relative;z-index:1;display:flex;align-items:center;gap:14px;
margin-top:10px;padding-top:11px;
border-top:1px solid rgba(110,74,32,.28);
}
.tbr-frame{
flex:0 0 auto;position:relative;overflow:hidden;margin-left:auto;
width:64px;height:64px;
background:
radial-gradient(80% 80% at 50% 35%, rgba(255,246,220,.55), rgba(255,246,220,0) 70%),
linear-gradient(160deg,#d6c092,#b89c68);
border:2px solid rgba(110,74,32,.55);
box-shadow:inset 0 0 0 1px rgba(255,246,220,.35), inset 0 2px 8px rgba(90,60,20,.3), 0 2px 5px rgba(0,0,0,.2);
border-radius:4px;
}
/* animated 45x43 gif - centred in the frame at native size */
.tbr-frame img{
position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);
max-width:none;
filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
.tbr-info{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:left}
.tbr-name{
font-family:var(--ff-head);font-weight:800;font-size:15px;
letter-spacing:.1em;text-transform:uppercase;
color:#3a2410;text-shadow:0 1px 0 rgba(255,246,220,.4);
}
.tbr-note{
font-family:var(--ff-body);font-style:italic;font-size:13px;
letter-spacing:.04em;color:#7a5a30;
}
.tbr-city{
font-family:var(--ff-head);font-weight:800;font-size:18px;line-height:1.15;
color:#96301a;text-shadow:0 1px 0 rgba(255,246,220,.4);
}
/* the client crate - forged of bright brass now, so no traveller misses it */
.hall-dl{
position:relative;display:flex;align-items:center;justify-content:center;gap:.6em;
margin-top:16px;padding:15px 18px;
font-family:var(--ff-head);font-weight:800;font-size:13.5px;
letter-spacing:.22em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
color:#2a1a08;text-shadow:0 1px 0 rgba(255,240,200,.55);
background:linear-gradient(180deg, var(--brass-glint) 0%, var(--brass-light) 18%, #c9973b 52%, var(--brass-dark) 100%);
border:1px solid #6e4c14;border-radius:6px;
box-shadow:
inset 0 1px 0 rgba(255,245,214,.8),
inset 0 -2px 3px rgba(90,55,10,.55),
0 6px 16px rgba(0,0,0,.5);
transition:transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
/* the inlaid pinstripe frame */
.hall-dl::before{
content:"";position:absolute;inset:4px;border-radius:3px;pointer-events:none;
border:1px solid rgba(90,55,10,.35);
transition:border-color .25s ease;
}
.hall-dl svg{
width:18px;height:18px;flex:none;
fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.hall-dl:hover,.hall-dl:focus-visible{
filter:brightness(1.09);transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,245,214,.8),
inset 0 -2px 3px rgba(90,55,10,.55),
0 8px 20px rgba(0,0,0,.55),
0 0 26px rgba(255,150,60,.45);
}
.hall-dl:hover::before{border-color:rgba(90,55,10,.55)}
.hall-dl:active{transform:translateY(0) scale(.99)}
/* the notice board - featured tale (with the smaller cards beneath it)
beside a rail of pinned notes; neither column stretches to the other,
so the parchment never balloons past its own ink */
.news-board{
display:grid;grid-template-columns:minmax(0,2.05fr) minmax(280px,1fr);
gap:clamp(14px,2vw,24px);
align-items:start;
}
.board-rail{display:flex;flex-direction:column;gap:12px}
.rail-head{
display:flex;align-items:center;gap:12px;
font-family:var(--ff-head);font-size:11.5px;font-weight:700;
letter-spacing:.26em;text-transform:uppercase;
color:var(--brass-light);text-shadow:0 2px 6px rgba(0,0,0,.8);
}
.rail-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--brass-dim),transparent)}
.board-more{margin:clamp(18px,3vh,30px) 0 14px}
/* pinned notes - small parchment scraps, wax-tacked */
.rail-note{
position:relative;display:block;
padding:12px 15px 11px 42px;color:var(--ink);
background:
var(--noise),
radial-gradient(120% 90% at 50% 0%, rgba(255,246,220,.5), rgba(255,246,220,0) 60%),
linear-gradient(172deg,#dcc89f 0%,#cbb283 55%,#b89e6e 100%);
background-blend-mode:overlay,normal,normal;
clip-path:polygon(1% 3%,99% 0,100% 12%,99.4% 90%,98.4% 100%,1.4% 97%,0 86%,.6% 10%);
box-shadow:0 10px 22px rgba(0,0,0,.5), inset 0 0 20px rgba(90,60,20,.26);
transition:transform .2s ease, box-shadow .25s ease;
}
.rail-note:nth-child(odd){transform:rotate(-.4deg)}
.rail-note:nth-child(even){transform:rotate(.35deg)}
.rail-note:hover{transform:rotate(0) translateY(-3px);box-shadow:0 16px 30px rgba(0,0,0,.6), 0 0 22px rgba(255,140,50,.18)}
.rail-note::before{
content:"";position:absolute;left:15px;top:17px;
width:12px;height:12px;border-radius:50%;
background:radial-gradient(circle at 32% 30%, #e86a50, #8a2415 60%, #4a0f06);
box-shadow:0 2px 4px rgba(0,0,0,.55);
}
.rail-note .rn-title{
display:block;
font-family:var(--ff-head);font-weight:700;font-size:15px;
letter-spacing:.04em;color:#3a2410;line-height:1.3;
}
.rail-note .rn-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
/* the cellar door - down to the archive */
.rail-arch{
position:relative;text-align:center;
padding:18px 18px 20px;border-radius:6px;
background:linear-gradient(180deg,#4a2e17 0%,#2e1c0e 60%,#221204 100%);
border:1px solid rgba(185,143,82,.35);
box-shadow:inset 0 1px 0 rgba(255,220,160,.12), 0 8px 20px rgba(0,0,0,.4);
}
.rail-arch p{
font-style:italic;font-size:14.5px;line-height:1.45;
color:var(--muted);margin-bottom:13px;
text-shadow:0 1px 4px rgba(0,0,0,.7);
}
/* the honour plaque - five names that never sleep, brass-nailed beside the notices */
.rail-pg{
position:relative;padding:7px 8px 10px;border-radius:6px;
background:
radial-gradient(140% 100% at 50% 0%, rgba(255,200,110,.07), transparent 55%),
linear-gradient(180deg,#41290f 0%,#2b1a0a 55%,#1e1004 100%);
border:1px solid rgba(185,143,82,.35);
box-shadow:inset 0 1px 0 rgba(255,220,160,.12), inset 0 0 26px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.4);
}
.pg-row{
display:flex;align-items:center;gap:12px;
padding:7px 9px;border-radius:4px;
text-decoration:none;
transition:background .2s ease;
}
.pg-row + .pg-row{border-top:1px solid rgba(214,168,96,.12)}
.pg-row:hover{background:linear-gradient(90deg, transparent, rgba(255,160,70,.1) 50%, transparent)}
.pg-rank{
flex:none;width:20px;text-align:center;
font-family:var(--ff-head);font-weight:800;font-size:15px;
color:#8a6a3a;text-shadow:0 1px 3px rgba(0,0,0,.7);
}
/* the top name burns brightest; second and third still catch the candlelight */
.pg-row.r1 .pg-rank{font-size:17px;color:#ffc95e;text-shadow:0 0 12px rgba(255,180,80,.55), 0 1px 3px rgba(0,0,0,.7)}
.pg-row.r2 .pg-rank,.pg-row.r3 .pg-rank{color:#d6a860}
/* the sprite hugs the bottom-right of its 64px canvas (bboxes centre near (45,42),
tall plumes reach y≈17) - the frame shows the canvas 1:1 (no resampling), the
translate puts that centre mid-frame so the outfit sits centred, not cornered */
.pg-outfit{
flex:none;width:56px;height:56px;overflow:hidden;border-radius:5px;
background:
radial-gradient(circle at 50% 38%, rgba(255,220,150,.12), transparent 72%),
linear-gradient(160deg,#3a2413,#150b04);
border:1px solid rgba(185,143,82,.3);
box-shadow:inset 0 0 10px rgba(0,0,0,.7);
}
/* max-width:none - the global img{max-width:100%} would squish the 64px canvas
into the 44px frame and throw the crop off target */
.pg-outfit img{display:block;width:64px;height:64px;max-width:none;image-rendering:pixelated;transform:translate(-18px,-15px)}
.pg-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pg-name{
font-family:var(--ff-head);font-weight:700;font-size:14px;letter-spacing:.05em;
color:var(--parch-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
text-shadow:0 1px 3px rgba(0,0,0,.8);
transition:color .2s ease;
}
.pg-row:hover .pg-name{color:#ffd9a0}
.pg-voc{
font-family:var(--ff-body);font-style:italic;font-size:13px;line-height:1.2;
color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pg-xp{
flex:none;font-family:var(--ff-head);font-weight:800;font-size:14px;letter-spacing:.03em;
color:#adc76b;text-shadow:0 0 10px rgba(150,190,80,.25), 0 1px 3px rgba(0,0,0,.8);
}
.pg-xp small{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7e9a4e}
/* noted at the plaque's foot, same ink as the charter line */
.pg-all{
display:block;margin-top:7px;text-align:center;text-decoration:none;
font-family:var(--ff-body);font-style:italic;font-size:13.5px;letter-spacing:.06em;
color:#a3773a;transition:color .2s ease;
}
.pg-all:hover{color:#d6a860}
/* ─────────────── BOARD v4 - one window, many tales ───────────────
the featured frame stays put; the side rails and the beam ticker
swap which tale shows behind the glass */
.board-stage{position:relative;padding:0 clamp(46px,4.4vw,62px)}
.stage-window{position:relative}
.stage-slide{display:none}
.stage-slide.active{display:block;animation:ecStageIn .45s cubic-bezier(.22,.9,.3,1)}
.board-stage.go-back .stage-slide.active{animation-name:ecStageInBack}
@keyframes ecStageIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes ecStageInBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
/* the handles moved below the window - wide brass pushbars, nothing
crowding the parchment's edge */
.board-stage{padding:0}
.stage-arrow{
flex:none;width:clamp(96px,11vw,150px);height:36px;border-radius:18px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:#e8c06a;
background:
linear-gradient(180deg, rgba(255,220,160,.1), rgba(255,220,160,0) 45%),
linear-gradient(180deg,#5f3f1e 0%,#41290f 50%,#241408 100%);
border:1px solid var(--brass-dim);
box-shadow:
0 0 0 2px rgba(20,10,2,.5),
inset 0 1px 2px rgba(255,220,160,.28),
inset 0 -3px 6px rgba(0,0,0,.5),
0 8px 18px rgba(0,0,0,.5);
transition:color .2s ease,border-color .2s ease,box-shadow .25s ease,transform .15s ease;
}
.stage-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.stage-arrow:hover{
color:#ffd9a0;border-color:rgba(232,192,106,.7);
box-shadow:
0 0 0 2px rgba(20,10,2,.5),
inset 0 1px 2px rgba(255,220,160,.34),
inset 0 -3px 6px rgba(0,0,0,.5),
0 8px 20px rgba(0,0,0,.55),
0 0 24px rgba(255,150,60,.3);
}
.stage-arrow:active{transform:scale(.97)}
/* the board gives the window most of the room - the rail is a side note */
.news-board.board-v4{grid-template-columns:minmax(0,2.7fr) minmax(300px,1fr)}
/* the window itself stands taller - a proper stage, not a scrap */
.board-v4 .stage-slide .ni{min-height:clamp(320px,40vh,440px)}
.stage-foot{
margin-top:14px;
display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
}
.stage-foot .stage-arch{margin-left:clamp(4px,2vw,22px)}
.stage-count{
font-family:var(--ff-head);font-size:11px;font-weight:700;
letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
text-shadow:0 2px 6px rgba(0,0,0,.8);
}
.stage-count #ecStageNow{color:var(--brass-light)}
/* rail sections hang straight on the wall - no frames, the parchment and
the planks carry their own weight */
.rail-box{display:flex;flex-direction:column;gap:12px}
.board-rail{gap:clamp(18px,2.6vh,26px)}
.pin-list{display:flex;flex-direction:column;gap:12px}
/* the scraps keep a whisper of a tilt - nailed by hand, not by machine */
.pin-list .rail-note:nth-child(odd){transform:rotate(-.35deg)}
.pin-list .rail-note:nth-child(even){transform:rotate(.3deg)}
.pin-list .rail-note:hover{transform:rotate(0) translateY(-2px)}
.rail-note.sel,.tick-row.sel{outline:2px solid rgba(232,192,106,.55);outline-offset:2px}
.car-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:2px}
.car-btn{
flex:none;width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:#e8c06a;
background:radial-gradient(circle at 35% 28%, #5f3f1e 0%, #41290f 45%, #241408 80%);
border:1px solid var(--brass-dim);
box-shadow:
0 0 0 2px rgba(20,10,2,.5),
inset 0 1px 2px rgba(255,220,160,.28),
inset 0 -3px 6px rgba(0,0,0,.5),
0 6px 14px rgba(0,0,0,.45);
transition:color .2s ease,border-color .2s ease,box-shadow .25s ease,transform .15s ease;
}
.car-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.car-btn:hover{
color:#ffd9a0;border-color:rgba(232,192,106,.7);transform:scale(1.08);
box-shadow:0 0 0 2px rgba(20,10,2,.5), inset 0 1px 2px rgba(255,220,160,.32), inset 0 -3px 6px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.5), 0 0 20px rgba(255,150,60,.3);
}
.car-btn:active{transform:scale(.95)}
.car-count{
flex:none;min-width:56px;text-align:center;
font-family:var(--ff-head);font-size:10px;font-weight:700;
letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
text-shadow:0 2px 6px rgba(0,0,0,.8);
}
/* the general tickers - dark beam scraps, scrollable */
.tick-list{
display:flex;flex-direction:column;gap:8px;
max-height:272px;overflow-y:auto;padding-right:7px;
scrollbar-width:thin;scrollbar-color:var(--brass-dim) rgba(0,0,0,.35);
}
.tick-list::-webkit-scrollbar{width:8px}
.tick-list::-webkit-scrollbar-track{background:rgba(0,0,0,.35);border-radius:4px}
.tick-list::-webkit-scrollbar-thumb{
border-radius:4px;
background:linear-gradient(180deg,var(--brass),var(--brass-dark));
border:1px solid rgba(0,0,0,.5);
}
.tick-row{
flex:none;display:flex;align-items:center;gap:9px;
min-height:42px;padding:8px 11px;border-radius:5px;
background:linear-gradient(180deg,#33200f 0%,#1e1004 100%);
border:1px solid rgba(185,143,82,.22);
box-shadow:inset 0 1px 0 rgba(255,220,160,.07), 0 4px 10px rgba(0,0,0,.3);
transition:border-color .2s ease,background .2s ease,transform .15s ease;
}
.tick-row:hover{border-color:rgba(232,192,106,.5);transform:translateX(3px)}
.tick-row .tk-title{
flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-family:var(--ff-head);font-weight:700;font-size:13.5px;letter-spacing:.04em;
color:var(--parch-light);text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.tick-row .news-date{flex:none;color:#8a6a3a}
.tick-row.sel{outline:none;border-color:rgba(232,192,106,.65);background:linear-gradient(180deg,#4a2e15 0%,#291505 100%);box-shadow:inset 0 1px 0 rgba(255,220,160,.14), 0 0 14px rgba(255,150,60,.18)}
.tick-row.sel .tk-title{color:#ffd9a0}
/* ── wall dock - trophy & crown icon-tabs on one sliding drawer;
the tabs ride the panel's left edge, so neither is ever buried ── */
.pg-dock{
position:fixed;right:0;top:50%;z-index:70;
display:flex;align-items:center;
transform:translateY(-50%) translateX(min(340px,86vw));
transition:transform .5s cubic-bezier(.22,.9,.3,1);
}
.pg-dock.open{transform:translateY(-50%) translateX(0);z-index:80}
.pg-dock-tabs{flex:none;display:flex;flex-direction:column;gap:12px}
.pg-dock-tab{
width:52px;height:52px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
border-radius:12px 0 0 12px;color:#f0c987;
background:
repeating-linear-gradient(90deg, rgba(255,205,130,.06) 0 3px, transparent 3px 7px),
linear-gradient(90deg,#4a2e13 0%,#241408 100%);
border:1px solid rgba(214,168,96,.55);border-right:none;
box-shadow:inset 0 1px 0 rgba(255,220,160,.16), -8px 0 22px rgba(0,0,0,.5);
transition:color .2s ease,border-color .2s ease,box-shadow .25s ease,filter .25s ease,background .25s ease;
}
.pg-dock-tab svg{
width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
.pg-dock-tab:hover{
color:#ffd9a0;border-color:rgba(232,192,106,.7);
box-shadow:inset 0 1px 0 rgba(255,220,160,.2), -8px 0 26px rgba(0,0,0,.6), 0 0 22px rgba(255,150,60,.35);
}
/* the chosen tab burns steady while its plaque is out */
.pg-dock-tab.active{
color:#ffd9a0;border-color:rgba(232,192,106,.8);
background:
repeating-linear-gradient(90deg, rgba(255,205,130,.08) 0 3px, transparent 3px 7px),
linear-gradient(90deg,#553618 0%,#2a1809 100%);
box-shadow:inset 0 1px 0 rgba(255,220,160,.22), -8px 0 26px rgba(0,0,0,.6), 0 0 26px rgba(255,160,70,.4);
}
/* the shut drawer breathes - ember glows so the tabs catch the eye */
.pg-dock:not(.open) .pg-dock-tab{animation:ecTabPulse 2.8s ease-in-out infinite}
.pg-dock:not(.open) .pg-dock-tab:nth-child(2){animation-delay:1.4s}
@keyframes ecTabPulse{
0%,100%{filter:drop-shadow(0 0 3px rgba(255,150,60,.1))}
50%{filter:drop-shadow(0 0 14px rgba(255,160,70,.45))}
}
@media (prefers-reduced-motion: reduce){
.pg-dock:not(.open) .pg-dock-tab{animation:none}
}
/* both plaques share one slot; the idle one keeps the slot's size honest */
.pg-dock-panels{flex:none;width:min(340px,86vw);display:grid}
.pg-dock-panel{
grid-area:1/1;visibility:hidden;
max-height:min(72vh,560px);overflow-y:auto;
padding:16px 15px 17px;border-radius:12px 0 0 12px;
background:
radial-gradient(130% 55% at 50% 0%, rgba(255,190,100,.08), transparent 62%),
linear-gradient(180deg,#301d0e 0%,#180d04 100%);
border:1px solid rgba(185,143,82,.5);border-right:none;
box-shadow:
inset 0 1px 0 rgba(255,220,160,.14),
inset 0 0 0 1px rgba(0,0,0,.4),
inset 8px 0 22px -10px rgba(0,0,0,.6),
-20px 0 46px rgba(0,0,0,.65);
scrollbar-width:thin;scrollbar-color:var(--brass-dim) rgba(0,0,0,.35);
}
.pg-dock-panel.on{visibility:visible}
.pg-dock-panel .rail-head{margin-bottom:12px}
/* inside the drawer the plaque frame would double the borders - bare it */
.pg-dock-panel .rail-pg{background:none;border:none;box-shadow:none;padding:0}
@media (max-width:1080px){
.news-board{grid-template-columns:1fr}
}
/* the hall folds - greeting above, board below */
@media (max-width:940px){
.home-hall{grid-template-columns:1fr;gap:clamp(24px,4vh,36px);text-align:center}
.hall-greet .eyebrow{justify-content:center}
.hall-greet .eyebrow::before{
content:"";flex:0 1 96px;height:1px;
background:linear-gradient(90deg,transparent,var(--brass-dim));
}
.hall-greet .hand-note{margin-inline:auto}
.hall-greet .btn-row{justify-content:center}
.hall-side{width:min(440px,100%);margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
#ec-grain,.ticker-track,.ticker-label img,.ticker-window::after,.ec-candleglow,.ec-divider::after{animation:none !important}
#ec-scene video{display:none}
.ec-rise{transition-duration:.2s;transform:none}
}
/* ─────────────── TICKER "NEW" DROP - a wax seal on the freshest word ─────────────── */
.tk-new{
flex:none;
font-family:var(--ff-head);font-size:9.5px;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;
color:#ffdfae;
padding:2px 7px 1px;border-radius:3px;
background:linear-gradient(180deg, rgba(200,69,44,.9), rgba(134,36,18,.9));
border:1px solid rgba(255,154,60,.5);
text-shadow:0 1px 2px rgba(0,0,0,.7);
animation:tkNewPulse 2.4s ease-in-out infinite;
}
@keyframes tkNewPulse{
0%,100%{box-shadow:0 0 5px rgba(255,110,40,.25)}
50%{box-shadow:0 0 14px rgba(255,130,50,.6)}
}
/* ─────────────── FRESH-NEWS TOAST - bottom-left, once per tale ─────────────── */
#ec-toast{
position:fixed;left:18px;bottom:18px;z-index:70;
display:flex;gap:13px;align-items:flex-start;
width:min(430px, calc(100vw - 36px));
padding:15px 42px 15px 15px;
background:linear-gradient(180deg, rgba(38,21,9,.95), rgba(19,10,4,.97));
border:1px solid var(--brass-dim);border-radius:10px;
box-shadow:0 18px 50px rgba(0,0,0,.65), inset 0 1px 0 rgba(232,192,106,.14);
backdrop-filter:blur(8px);
opacity:0;transform:translateY(26px);pointer-events:none;
transition:opacity .45s ease, transform .55s cubic-bezier(.22,.9,.3,1);
}
#ec-toast[hidden]{display:none}
#ec-toast.show{opacity:1;transform:none;pointer-events:auto}
#ec-toast .nt-emblem{
width:30px;height:30px;margin-top:3px;flex:none;
filter:drop-shadow(0 0 8px rgba(255,140,50,.55));
}
#ec-toast .nt-kicker{
font-style:italic;color:var(--muted);font-size:13.5px;margin-bottom:3px;
}
#ec-toast .nt-title{
font-family:var(--ff-head);font-weight:700;font-size:16px;
letter-spacing:.04em;color:var(--gold);line-height:1.3;
text-shadow:0 2px 6px rgba(0,0,0,.8);
}
#ec-toast .nt-actions{margin-top:10px}
#ec-toast .nt-close{
position:absolute;top:8px;right:8px;
width:26px;height:26px;line-height:1;
color:var(--muted);font-size:13px;border-radius:5px;
transition:color .2s ease, background .2s ease;
}
#ec-toast .nt-close:hover{color:var(--brass-glint);background:rgba(232,192,106,.08)}
/* ─────────────── LIVE-STREAM DOCK - bottom-right, only when someone's live ─────────────── */
#ec-streams{
position:fixed;right:18px;bottom:18px;z-index:70;
width:min(330px, calc(100vw - 36px));
background:linear-gradient(180deg, rgba(38,21,9,.95), rgba(19,10,4,.97));
border:1px solid var(--brass-dim);border-radius:10px;
box-shadow:0 18px 50px rgba(0,0,0,.65), inset 0 1px 0 rgba(232,192,106,.14);
backdrop-filter:blur(8px);
overflow:hidden;
opacity:0;transform:translateY(26px);pointer-events:none;
transition:opacity .45s ease, transform .55s cubic-bezier(.22,.9,.3,1);
}
#ec-streams[hidden]{display:none}
#ec-streams.show{opacity:1;transform:none;pointer-events:auto}
.sd-head{
display:flex;align-items:center;gap:9px;
padding:9px 8px 9px 12px;
background:linear-gradient(180deg, rgba(74,47,24,.55), rgba(36,20,8,.4));
border-bottom:1px solid rgba(185,143,82,.2);
}
.sd-dot{
flex:none;width:9px;height:9px;border-radius:50%;
background:#ff4b38;box-shadow:0 0 8px rgba(255,70,50,.9);
animation:sdPulse 1.6s ease-in-out infinite;
}
@keyframes sdPulse{
0%,100%{box-shadow:0 0 4px rgba(255,70,50,.6)}
50%{box-shadow:0 0 12px rgba(255,90,60,1)}
}
.sd-title{
flex:1;font-family:var(--ff-head);font-weight:700;font-size:12px;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.sd-count{color:var(--muted);font-weight:600}
.sd-min{
flex:none;width:26px;height:26px;line-height:1;
color:var(--muted);font-size:14px;border-radius:5px;
transition:color .2s ease, background .2s ease;
}
.sd-min:hover{color:var(--brass-glint);background:rgba(232,192,106,.08)}
.sd-player{background:#000}
.sd-player:not(:empty){aspect-ratio:16/9}
.sd-player iframe{display:block;width:100%;height:100%;border:0}
.sd-row{
display:flex;align-items:center;gap:10px;
padding:8px 12px;cursor:pointer;
border-top:1px solid rgba(185,143,82,.12);
transition:background .2s ease;
}
.sd-row:hover{background:rgba(232,192,106,.06)}
.sd-row.watching{background:rgba(232,192,106,.1)}
.sd-thumb{
flex:none;width:64px;height:36px;object-fit:cover;border-radius:4px;
border:1px solid rgba(185,143,82,.3);background:#000;
}
.sd-thumb.sd-ph{
display:flex;align-items:center;justify-content:center;
font-family:var(--ff-head);font-weight:900;font-size:17px;
}
.sd-thumb.sd-ph.kick{color:#53fc18;background:#0c1506}
.sd-thumb.sd-ph.twitch{color:#a970ff;background:#120a1c}
.sd-plat{
font-family:var(--ff-body);font-style:normal;font-weight:600;
font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
padding:1px 5px;border-radius:3px;vertical-align:2px;
}
.sd-plat.kick{color:#53fc18;background:rgba(83,252,24,.1);border:1px solid rgba(83,252,24,.25)}
.sd-plat.twitch{color:#a970ff;background:rgba(169,112,255,.1);border:1px solid rgba(169,112,255,.25)}
.sd-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sd-name{
font-family:var(--ff-head);font-weight:700;font-size:13px;
letter-spacing:.06em;color:var(--brass-light);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sd-row.watching .sd-name{color:var(--brass-glint)}
.sd-uptime{
font-size:12px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sd-ext{
flex:none;width:26px;height:26px;border-radius:5px;
display:flex;align-items:center;justify-content:center;
color:var(--muted);font-size:13px;
transition:color .2s ease, background .2s ease;
}
.sd-ext:hover{color:var(--brass-glint);background:rgba(232,192,106,.08);text-shadow:none}
#ec-streams-pill{
position:fixed;right:18px;bottom:18px;z-index:70;
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;border-radius:99px;
font-family:var(--ff-head);font-weight:700;font-size:12px;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
background:linear-gradient(180deg, rgba(38,21,9,.95), rgba(19,10,4,.97));
border:1px solid var(--brass-dim);
box-shadow:0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(232,192,106,.14);
transition:border-color .2s ease, color .2s ease;
}
#ec-streams-pill[hidden]{display:none}
#ec-streams-pill:hover{color:var(--brass-glint);border-color:rgba(232,192,106,.5)}
/* toast and dock share the floor corners with small screens gracefully */
@media (max-width:560px){
#ec-toast{left:12px;bottom:12px;width:calc(100vw - 24px)}
#ec-streams,#ec-streams-pill{right:12px;bottom:12px}
body.has-streams #ec-toast{bottom:76px} /* don't stack on top of the pill */
}
@media (prefers-reduced-motion:reduce){
.tk-new,.sd-dot,.st-dot{animation:none !important}
#ec-toast,#ec-streams{transition-duration:.2s;transform:none}
}
/* ─────────────── MANIACS - hours burned at the hearth ─────────────── */
.mn-time{
font-family:var(--ff-head);font-weight:800;font-size:14px;
letter-spacing:.03em;color:#54662e; /* a healthy evening's worth */
}
.mn-time.keen{color:#8a5c14} /* six hours deep - the chair has a dent */
.mn-time.mad{color:#96301a;text-shadow:0 1px 0 rgba(255,246,220,.4)} /* half the day gone - a true maniac */
.mn-time.zero{color:#8a6a3a;opacity:.6;font-weight:600}
/* ─────────────── DAY-GRID LEDGER (powergamers · maniacs) ───────────────
one row per soul, one column per day; the column headers do the sorting */
.dg-wrap{overflow-x:auto;max-width:100%}
table.dg{min-width:780px}
/* rows squeezed like the honour board: slim padding, trimmed sprite window, sub-line tucked inline */
table.dg td{padding-top:1px;padding-bottom:1px}
table.dg .outfit-frame{width:64px;height:50px}
/* 50px window = the sprite's full opaque band (rows 14..63), same crop as .hs-board */
table.dg .outfit-frame img{transform:translate(-16px,-14px)}
table.dg a.hs-name{font-size:15px}
table.dg .hs-sub{display:inline;margin:0 0 0 8px;font-size:12.5px}
table.dg .pg-gain,table.dg .mn-time{font-size:12.5px;letter-spacing:0}
table.dg td.dg-cell{text-align:center;white-space:nowrap;padding-left:6px;padding-right:6px}
table.dg td.dg-on{
background:rgba(201,151,59,.18);
box-shadow:inset 1px 0 0 rgba(138,95,28,.3), inset -1px 0 0 rgba(138,95,28,.3);
}
a.dg-sort{
display:inline-block;padding:4px 7px;border-radius:4px;
font-family:var(--ff-head);font-weight:700;font-size:11.5px;
letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
color:#f2ddab;text-shadow:0 1px 2px rgba(0,0,0,.8);
transition:background .16s ease, color .16s ease;
}
a.dg-sort:hover,a.dg-sort:focus-visible{color:#ffefc4;background:rgba(201,151,59,.3)}
a.dg-sort.active,a.dg-sort.active:hover{
color:#2a1a08;text-shadow:0 1px 0 rgba(255,240,200,.6);
background:linear-gradient(180deg, var(--brass-light) 0%, #c9973b 55%, var(--brass-dark) 100%);
box-shadow:inset 0 1px 0 rgba(255,245,214,.7), inset 0 -1px 2px rgba(90,55,10,.5);
}
.dg-dot{
display:inline-block;width:8px;height:8px;border-radius:50%;
margin-left:7px;vertical-align:2px;
background:#8a6a3a;opacity:.55;
}
.dg-dot.live{
background:#79a03c;opacity:1;
box-shadow:0 0 6px rgba(140,190,70,.8);
}
/* ─────────────── THE EXILED - the banishment ledger ─────────────── */
table.ex-table{min-width:640px}
table.ex-table td{padding-top:4px;padding-bottom:4px;font-size:14px;color:#3d2610}
table.ex-table .hs-sub{color:#54371a;font-size:13px}
table.ex-table .hs-sub b{color:#3a2408}
.ex-reason{font-style:italic;color:#4a2b0e;font-size:13.5px;font-weight:600}
.ex-eternal{
font-family:var(--ff-head);font-weight:800;font-size:12.5px;
letter-spacing:.08em;text-transform:uppercase;color:#7a1f10;
}
/* still in force: an ember dot before the date, the whole row faintly scorched */
.ex-live{
display:inline-block;width:8px;height:8px;border-radius:50%;
margin-right:7px;vertical-align:1px;
background:#a3341c;box-shadow:0 0 6px rgba(190,70,40,.7);
}
tr.ex-on td{box-shadow:inset 3px 0 0 -1px rgba(163,52,28,0)}
tr.ex-on td:first-child{box-shadow:inset 3px 0 0 rgba(163,52,28,.55)}
.ex-served{color:#5e4322;font-weight:600}
/* ─────────────── STREAMERS - the public roster on parchment ─────────────── */
.st-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.st-row{
display:flex;align-items:center;gap:14px;
padding:10px 14px;border-radius:9px;
background:linear-gradient(180deg, rgba(255,246,222,.55), rgba(236,214,170,.45));
border:1px solid rgba(138,95,28,.35);
box-shadow:inset 0 1px 0 rgba(255,250,235,.6);
transition:border-color .25s ease, box-shadow .25s ease;
}
.st-row.is-live{
border-color:rgba(200,70,40,.55);
box-shadow:inset 0 1px 0 rgba(255,250,235,.6), 0 0 14px rgba(200,70,40,.18);
}
.st-logo{
flex:none;width:46px;height:46px;
display:inline-flex;align-items:center;justify-content:center;
border-radius:9px;
box-shadow:inset 0 1px 0 rgba(255,250,235,.5);
}
.st-logo svg{width:24px;height:24px;display:block}
.st-logo.kick{color:#2f7a0c;background:rgba(83,252,24,.14);border:1px solid rgba(63,150,20,.4)}
.st-logo.twitch{color:#6a3ab8;background:rgba(169,112,255,.14);border:1px solid rgba(130,80,220,.4)}
.st-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.st-toprow{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
a.st-name,.sheet a:not(.btn):not(.hs-tab).st-name{
font-family:var(--ff-head);font-weight:800;font-size:16px;
letter-spacing:.04em;color:#5a3410;border-bottom:none;
}
a.st-name:hover,.sheet a:not(.btn):not(.hs-tab).st-name:hover{color:#a3611a}
.st-plat{
font-family:var(--ff-body);font-style:normal;font-weight:700;
font-size:10px;letter-spacing:.14em;text-transform:uppercase;
padding:2px 7px;border-radius:4px;
}
.st-plat.kick{color:#2f7a0c;background:rgba(83,252,24,.12);border:1px solid rgba(63,150,20,.4)}
.st-plat.twitch{color:#6a3ab8;background:rgba(169,112,255,.12);border:1px solid rgba(130,80,220,.4)}
.st-badge{
font-family:var(--ff-body);font-weight:700;
font-size:10px;letter-spacing:.12em;text-transform:uppercase;
padding:2px 7px;border-radius:4px;
}
.st-badge.official{color:#6a4a10;background:rgba(232,192,106,.25);border:1px solid rgba(160,116,40,.5)}
.st-badge.verified{color:#3f6820;background:rgba(110,160,60,.16);border:1px solid rgba(95,140,50,.45)}
.st-live,.st-live-demo{
display:inline-flex;align-items:center;gap:5px;
font-family:var(--ff-head);font-weight:800;font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:#a02410;
padding:2px 8px;border-radius:99px;
background:rgba(200,60,35,.12);border:1px solid rgba(190,60,35,.45);
}
.st-live[hidden]{display:none}
.st-live-meta{font-family:var(--ff-body);font-weight:600;font-size:10.5px;letter-spacing:.02em;color:#96301a;text-transform:none}
.st-dot{
flex:none;width:8px;height:8px;border-radius:50%;
background:#e03a24;box-shadow:0 0 6px rgba(220,60,40,.8);
animation:sdPulse 1.6s ease-in-out infinite;
}
.st-sub{font-size:13px;color:#6a4a22}
.st-watch{flex:none;margin-left:auto}
@media (max-width:560px){
.st-row{flex-wrap:wrap}
.st-watch{margin-left:0;width:100%;justify-content:center;display:inline-flex}
}
/* ══════════ THE LIBRARY - the tavern's book room ══════════ */
.lib-wrap{display:grid;grid-template-columns:246px minmax(0,1fr);gap:26px;align-items:start}
/* the shelf (sidebar) - dark oak against the parchment */
.lib-shelf{
border-radius:16px;overflow:hidden;
background:linear-gradient(180deg,#241304,#160b03 65%,#0e0602);
border:1.5px solid rgba(185,143,82,.65);
box-shadow:0 16px 36px rgba(0,0,0,.42), 0 0 22px rgba(185,143,82,.14), inset 0 1px 0 rgba(232,192,106,.22);
}
.lib-shelf .lib-shelf-head{
padding:12px 16px 11px;
font-family:var(--ff-head);font-weight:800;font-size:12px;
letter-spacing:.24em;text-transform:uppercase;color:var(--brass-glint);
text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 14px rgba(240,212,147,.35);
background:linear-gradient(180deg,rgba(185,143,82,.3),rgba(185,143,82,.1));
border-bottom:1px solid rgba(232,192,106,.45);
}
.lib-shelf-head2{border-top:1px solid rgba(232,192,106,.45)}
.lib-shelf-row{
display:flex;align-items:center;gap:11px;
padding:11px 16px;text-decoration:none;
font-family:var(--ff-head);font-weight:700;font-size:14.5px;
letter-spacing:.06em;color:var(--parch-light);
text-shadow:0 1px 2px rgba(0,0,0,.8);
border-bottom:1px solid rgba(185,143,82,.16);
transition:background .18s,color .18s,padding-left .18s;
}
.lib-shelf-row:last-child{border-bottom:none}
.lib-shelf-row:hover{background:rgba(185,143,82,.16);color:var(--gold);padding-left:21px}
.lib-shelf-row.sel{
background:linear-gradient(90deg,rgba(185,143,82,.32),rgba(185,143,82,.08));
color:var(--gold);box-shadow:inset 4px 0 0 var(--brass-light);
}
.lib-shelf-ico{flex:none;width:22px;display:flex;align-items:center;justify-content:center;color:var(--brass-hi)}
.lib-shelf-row:hover .lib-shelf-ico,.lib-shelf-row.sel .lib-shelf-ico{color:var(--gold)}
/* the reading-room door - a quiet brass door-plate back to the overview */
.lib-shelf .lib-shelf-home{
display:flex;align-items:center;justify-content:center;gap:9px;
margin:11px 11px 5px;padding:9px 14px;text-decoration:none;
font-family:var(--ff-head);font-weight:700;font-size:12px;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
text-shadow:0 1px 2px rgba(0,0,0,.85);
background:linear-gradient(180deg,rgba(185,143,82,.16),rgba(185,143,82,.05));
border:1px solid rgba(185,143,82,.5);border-radius:9px;
box-shadow:inset 0 1px 0 rgba(232,192,106,.18);
transition:border-color .18s,color .18s,background .18s,box-shadow .18s;
}
.lib-shelf .lib-shelf-home:hover{color:var(--brass-glint);border-color:rgba(232,192,106,.75);background:rgba(185,143,82,.22)}
.lib-shelf .lib-shelf-home.sel{
border-color:var(--brass-light);
box-shadow:inset 0 1px 0 rgba(232,192,106,.25), 0 0 12px rgba(232,192,106,.2);
}
.lib-shelf-home .lib-shelf-ico{width:auto;color:var(--brass-hi)}
.lib-shelf-home .lib-glyph{width:15px;height:15px}
/* sub-shelves - recessed rows under each category head; indent alone carries the level */
.lib-shelf-branch a{border-bottom:none}
.lib-shelf-branch{
padding:5px 0 8px;
background:rgba(0,0,0,.22);
box-shadow:inset 0 7px 10px -7px rgba(0,0,0,.6);
}
.lib-shelf-sub{
padding:9px 16px 9px 30px;
font-size:13.5px;font-weight:600;color:var(--parch);
}
.lib-shelf-sub:hover{padding-left:35px}
.lib-shelf-sub .lib-shelf-ico{width:18px}
.lib-shelf-sub .lib-glyph{width:15px;height:15px}
.lib-shelf-sub.sel{background:linear-gradient(90deg,rgba(185,143,82,.28),rgba(185,143,82,.06))}
.lib-glyph{width:18px;height:18px;display:block}
/* main column - ink on the parchment the sheet already provides */
/* overflow-anchor off: live filtering swaps the list mid-type and the
browser's scroll anchoring would drag the viewport around with it */
.lib-main{min-width:0;overflow-anchor:none}
.lib-crumb{font-size:14px;color:#6a4a22;margin-bottom:10px}
.lib-crumb a{color:#6a4a22;text-decoration:underline}
.lib-crumb b{color:var(--ink)}
.lib-hero h2{margin-bottom:4px}
.lib-hero .ec-note{margin-bottom:16px}
.lib-hero-main{text-align:center}
.lib-hero-main .ec-note{max-width:620px;margin:0 auto 18px}
.lib-small{font-size:14px;margin-top:10px}
/* the quill - search & filters */
.lib-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lib-search,.lib-select{
font-family:var(--ff-body);font-size:16px;color:var(--ink);
background:rgba(255,250,235,.55);
border:1px solid rgba(138,95,28,.5);border-radius:8px;
padding:9px 14px;outline:none;
}
.lib-search{flex:1 1 220px;min-width:0}
.lib-search:focus,.lib-select:focus{border-color:var(--brass-dark);box-shadow:0 0 0 3px rgba(185,143,82,.22)}
.lib-select{flex:none;cursor:pointer}
/* grimoire tabs - two clasps on the book's spine */
.lib-chips{display:inline-flex;gap:0;margin-bottom:16px;
border:1px solid rgba(110,76,20,.5);border-radius:8px;
background:rgba(138,95,28,.08);
box-shadow:inset 0 1px 3px rgba(60,38,10,.18),0 1px 0 rgba(255,248,225,.4);
overflow:hidden;
}
.lib-chip{
position:relative;
font-family:var(--ff-head);font-weight:700;font-size:12px;
letter-spacing:.14em;text-transform:uppercase;
color:#6a4a22;cursor:pointer;
padding:9px 20px 8px;
transition:color .18s,background .18s;
}
.lib-chip+.lib-chip{border-left:1px solid rgba(110,76,20,.4)}
.lib-chip i{font-style:normal;opacity:.6;font-size:11px}
.lib-chip::after{
content:"";position:absolute;left:22%;right:22%;bottom:4px;height:2px;
border-radius:2px;background:linear-gradient(90deg,transparent,var(--brass-light),transparent);
opacity:0;transition:opacity .18s;
}
.lib-chip:hover{color:var(--ink);background:rgba(138,95,28,.14)}
.lib-chip.sel{
color:var(--parch-light);
background:linear-gradient(180deg,#9a6d24,#7a5216 55%,#66430f);
box-shadow:inset 0 1px 0 rgba(255,220,150,.32),inset 0 -2px 4px rgba(35,20,4,.45);
text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.lib-chip.sel::after{opacity:.9}
/* bestiary ledger */
.lib-beasts{margin-bottom:20px}
.lib-beasts td,.lib-beasts th{font-size:14.5px;padding:5px 10px}
/* uniform rows: every ledger line is as tall as the biggest 64px sprite
(+ cell padding), so small folk sit centered in the same slot the giants fill */
.lib-beasts td{vertical-align:middle;height:70px}
.lib-mini-cell{width:72px;padding:2px 4px 2px 8px !important;text-align:center}
/* trimmed portraits (classes/library.php) come pre-cropped at native pixels -
every sprite renders 1:1, its natural size (32px folk small, 64px giants big);
the 64px cap is only a guard against odd oversized renders */
.lib-mini{
width:auto;height:auto;max-width:64px;max-height:64px;
display:block;margin:0 auto;image-rendering:pixelated;
}
.lib-beast-link{font-weight:700;font-size:15px}
.lib-beast-kin{font-style:italic;color:#8a6a3a}
.lib-beasts td.c b{color:var(--ink)}
.lib-table th.lib-sort{cursor:pointer;user-select:none;white-space:nowrap}
.lib-table th.lib-sort:hover{color:var(--brass)}
.lib-table th.lib-sort.on{color:var(--brass)}
.lib-arrow{font-size:10px}
.lib-empty{text-align:center;margin:18px 0}
/* creature sheet */
.lib-hero-beast{display:flex;align-items:center;gap:16px}
.lib-hero-text{min-width:0}
.lib-portrait{
flex:none;width:76px;height:76px;margin-bottom:16px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,250,235,.45);
border:1px solid rgba(138,95,28,.45);border-radius:10px;
box-shadow:inset 0 1px 3px rgba(60,38,10,.14),0 1px 0 rgba(255,248,225,.5);
}
.lib-portrait img{max-width:64px;max-height:64px;image-rendering:pixelated}
.lib-portrait-item{margin-bottom:0}
.lib-portrait-item img{max-width:44px;max-height:44px}
.lib-portrait-feat{margin-bottom:0;color:var(--brass-dark)}
.lib-portrait-feat .lib-glyph{width:40px;height:40px}
.lib-sheet{margin-bottom:18px}
.lib-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.lib-panel{
padding:14px 16px 16px;margin-bottom:14px;border-radius:9px;
background:rgba(255,250,235,.35);
border:1px solid rgba(138,95,28,.3);
}
.lib-cols .lib-panel{margin-bottom:0}
.lib-panel h3{
font-family:var(--ff-head);font-weight:800;font-size:14px;
letter-spacing:.12em;text-transform:uppercase;color:var(--brass-dark);
margin-bottom:10px;
}
.lib-flags{display:flex;flex-wrap:wrap;gap:6px}
.lib-flag{
font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:99px;
border:1px solid rgba(138,95,28,.35);color:var(--ink-soft);
}
.lib-flag i{font-weight:400;opacity:.75}
.lib-flag.on{color:#3f6d2a;background:rgba(110,160,60,.14);border-color:rgba(95,140,50,.45)}
.lib-flag.off{color:#9a5a48;background:rgba(160,80,60,.08);border-color:rgba(160,80,60,.3);opacity:.75}
.lib-flag.imm{color:#5a4a8a;background:rgba(110,90,180,.1);border-color:rgba(110,90,180,.35)}
.lib-flag.weak{color:#a03c22;background:rgba(200,70,40,.1);border-color:rgba(200,70,40,.35)}
/* spoils */
.lib-loot{display:flex;flex-direction:column;gap:6px}
.lib-loot-row{display:grid;grid-template-columns:minmax(120px,1.2fr) 2fr 52px;gap:10px;align-items:center}
.lib-loot-name{font-size:14.5px;color:var(--ink)}
.lib-loot-name i{color:#8a6a3a;font-size:12.5px}
.lib-loot-bar{height:8px;border-radius:99px;background:rgba(138,95,28,.15);overflow:hidden}
.lib-loot-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brass-dark),var(--brass))}
.lib-loot-pct{font-size:12.5px;font-weight:700;color:#6a4a22;text-align:right}
.lib-voices{display:flex;flex-wrap:wrap;gap:8px}
.lib-voice{font-style:italic;font-size:14.5px;color:#6a4a22}
/* grimoire */
.lib-table{width:100%}
.lib-words{font-style:italic;color:#7a4a8a;font-weight:600}
.lib-prem{color:var(--brass-dark);font-size:12px}
.lib-voc{
display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;margin:0 1px;border-radius:50%;
font-family:var(--ff-head);font-weight:800;font-size:11px;
border:1px solid rgba(138,95,28,.4);color:var(--ink-soft);
}
.lib-voc.all{width:auto;padding:0 8px;border-radius:99px;font-size:10px;letter-spacing:.08em}
.lib-voc.sorcerer{color:#8a3a2a;background:rgba(200,80,50,.12)}
.lib-voc.druid{color:#3f6d2a;background:rgba(110,160,60,.14)}
.lib-voc.paladin{color:#8a6a1a;background:rgba(200,170,60,.16)}
.lib-voc.knight{color:#4a5a8a;background:rgba(90,110,180,.12)}
.lib-spells td{vertical-align:middle}
.lib-spells .lib-mini{width:32px;height:32px;object-fit:none}
.lib-spells .lib-mini-cell{width:44px}
.lib-fx-cell{width:44px;padding:2px 4px !important;text-align:center}
.lib-fx{display:inline-flex;color:var(--brass-dark)}
.lib-fx .lib-glyph{width:19px;height:19px}
.lib-fx.attack{color:#8a3a2a}
.lib-fx.healing{color:#3f6d2a}
.lib-fx.support{color:#4a5a8a}
.lib-fx.conjure{color:#7a4a8a}
/* quest chronicle */
.lib-quests td{vertical-align:top}
.lib-qname{font-weight:700;color:var(--ink);white-space:nowrap}
.lib-qreward{font-size:13px}
.lib-qyes{color:#3f6d2a;font-weight:800}
.lib-qno{color:#a33c28;font-weight:800}
/* registry of folk */
.lib-folk{columns:3;column-gap:22px}
.lib-folk-group{break-inside:avoid;margin-bottom:14px}
.lib-folk-letter{
font-family:var(--ff-display);font-weight:800;font-size:20px;color:var(--brass-dark);
border-bottom:1px solid rgba(138,95,28,.35);margin-bottom:5px;
}
.lib-folk-names{display:flex;flex-direction:column;gap:2px}
.lib-folk-name{font-size:14.5px;color:var(--ink)}
/* the reading room */
.lib-omni-wrap{position:relative;max-width:560px;margin:0 auto 6px}
.lib-omni{width:100%;font-size:17px;padding:12px 18px}
.lib-omni-drop{
position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
border-radius:9px;overflow:hidden;
background:linear-gradient(180deg,#f7ecd2,#efe0bd);
border:1px solid rgba(138,95,28,.5);
box-shadow:0 14px 30px rgba(30,15,5,.4);
text-align:left;
}
.lib-omni-drop a{
display:flex;align-items:center;gap:8px;
padding:9px 14px;text-decoration:none;font-size:15px;color:var(--ink);
border-bottom:1px solid rgba(138,95,28,.18);
}
.lib-omni-drop a:last-child{border-bottom:none}
.lib-omni-drop a:hover{background:rgba(185,143,82,.18)}
.lib-omni-kind{
margin-left:auto;flex:none;
font-family:var(--ff-head);font-weight:800;font-size:10px;
letter-spacing:.1em;text-transform:uppercase;
padding:2px 8px;border-radius:99px;
border:1px solid rgba(138,95,28,.35);color:var(--ink-soft);
}
.lib-omni-kind.beast{color:#8a3a2a}
.lib-omni-kind.spell,.lib-omni-kind.rune{color:#5a4a8a}
.lib-omni-kind.folk{color:#3f6d2a}
.lib-omni-kind.quest{color:#8a6a1a}
.lib-omni-kind.feat{color:#2a6a7a}
.lib-omni-none{padding:12px 16px;font-style:italic;color:#6a4a22}
/* branch headings over the tile shelves */
.lib-main .lib-branch-head{
display:flex;align-items:center;gap:14px;
margin:26px 0 2px;
font-family:var(--ff-head);font-weight:800;font-size:13.5px;
letter-spacing:.22em;text-transform:uppercase;color:var(--brass-dark);
}
.lib-branch-head::before,.lib-branch-head::after{
content:"";height:1px;flex:1;
background:linear-gradient(90deg,transparent,rgba(138,95,28,.45),transparent);
}
.lib-branch-head::before{background:linear-gradient(90deg,rgba(138,95,28,.45),transparent);flex:0 0 26px}
.lib-branch-head::after{background:linear-gradient(90deg,transparent,rgba(138,95,28,.45) 30%,rgba(138,95,28,.45) 70%,transparent)}
/* shelf tiles */
.lib-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:14px 0 8px}
.lib-tiles-vol{grid-template-columns:repeat(auto-fit,minmax(210px,max-content))}
.lib-tiles-vol .lib-tile{min-width:240px}
.lib-tile{
display:flex;flex-direction:column;gap:4px;
padding:18px 18px 16px;text-decoration:none;text-align:left;border-radius:10px;
background:rgba(255,250,235,.4);
border:1px solid rgba(138,95,28,.35);
transition:transform .15s,box-shadow .15s,border-color .15s;
}
.lib-tile:hover{transform:translateY(-3px);border-color:var(--brass-dark);box-shadow:0 10px 22px rgba(60,35,10,.28)}
.lib-tile-ico{margin-bottom:2px;color:var(--brass-dark)}
.lib-tile-ico .lib-glyph{width:26px;height:26px}
.lib-tile-name{font-family:var(--ff-head);font-weight:800;font-size:17px;color:var(--ink)}
/* armory racks - smaller tiles fronted by an item sprite */
.lib-tiles-items{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.lib-itile{align-items:center;text-align:center;padding:14px 10px 12px}
.lib-itile .lib-tile-ico img{
width:32px;height:32px;object-fit:none;display:block;
image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(60,35,10,.35));
}
.lib-itile .lib-tile-name{font-size:15.5px}
.lib-items td,.lib-items th{font-size:14.5px;padding:5px 10px}
.lib-items td{vertical-align:middle}
/* ware sprites stay at their native 32px - stretching them murders the pixel art */
.lib-items .lib-mini{width:32px;height:32px;object-fit:none}
.lib-items .lib-mini-cell{width:44px}
.lib-tile-count{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-dark)}
.lib-tile-sub{font-size:14px;color:#6a4a22;margin-top:2px}
@media (max-width:940px){
.lib-wrap{grid-template-columns:1fr}
.lib-shelf{position:static;display:grid;grid-template-columns:1fr 1fr}
.lib-shelf-head,.lib-shelf .lib-shelf-home{grid-column:1/-1}
.lib-shelf-branch{display:contents}
.lib-shelf-sub{padding-left:16px}
.lib-folk{columns:2}
.lib-cols{grid-template-columns:1fr}
}
@media (max-width:560px){
.lib-shelf{grid-template-columns:1fr}
.lib-folk{columns:1}
.lib-loot-row{grid-template-columns:1fr 60px;grid-template-rows:auto auto}
.lib-loot-bar{grid-column:1/-1}
}