/* ==========================================================================
   Fallen Paradise — Tibia : NOTICE BOARD SKIN
   --------------------------------------------------------------------------
   Loaded AFTER site.css and overrides it visually only: every layout rule,
   density override and page-specific class in site.css still applies, so
   reverting the look is one <link> away (see site_head() in common.php).

   The idea: the page is a tavern wall of dark planking; the content column is
   a framed notice board; every panel is a sheet of parchment tacked to it.

   Textures come from tools/theme/gen_board_assets.py (seamless, tileable):
     board/wood-wall.jpg  the wall            board/paper.jpg      panels
     board/wood-rail.jpg  frames + sidebar    board/paper-dark.jpg table heads
     board/pin.png        brass tack          board/tape.png       tape strip
   ========================================================================== */

:root{
  /* ---- ink & paper ------------------------------------------------------ */
  /* ⭐ Kept close to BLACK on purpose (owner, 2026-07-29: "make brown text more
     black — all across the website everywhere"). --ink-2 is what site.css paints
     most body copy with (.lead, .intro-steps, anything on var(--muted)), so a
     brown here browns the whole site. Keep the sheet-scope copy of this ramp in
     the CONTRAST PASS section identical to these four values. */
  --ink:#241505;            /* body text on parchment      */
  --ink-2:#2b1c09;          /* secondary / captions — a hair off --ink, NOT brown */
  --ink-3:#43331f;          /* faint                       */
  --ink-head:#301803;       /* headings, quill-dark        */
  --rust:#6f2f0d;           /* links, accents              */
  --rust-2:#8a4014;
  --wax:#7e1e18;            /* seals, drafts, danger       */
  --leaf:#1b5423;           /* "done" green, readable on paper */
  --amber:#7a4a08;

  /* ---- wood ------------------------------------------------------------- */
  --wood-dark:#20160e;
  --wood:#3a2718;
  --wood-lit:#6b4a2c;
  --wood-line:rgba(24,15,7,.75);

  /* ---- remapped site.css tokens (everything inherits these) ------------- */
  --bg:#18100a;
  --bg2:#1d140c;
  --panel:transparent;          /* the paper image is drawn per-panel */
  --panel-solid:#e3cea3;
  --line:rgba(96,66,36,.55);
  --line-soft:rgba(96,66,36,.30);
  --violet:#8a5a2b;            /* accent hue is now aged brass/rust  */
  --violet-2:#7a4a1c;
  --violet-glow:rgba(120,74,28,.35);
  --gold:#5c3407;
  --gold-2:#42200a;
  --gold-3:#33180a;
  --text:var(--ink);
  --muted:var(--ink-2);
  --muted-2:var(--ink-3);
  --err:#8e2b22;
  --ok:var(--leaf);

  --serif:"Cinzel","Trajan Pro","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --prose:Georgia,"Palatino Linotype","Book Antiqua","Times New Roman",serif;

  --paper:url("board/paper.jpg");
  --paper-dark:url("board/paper-dark.jpg");
  --wood-wall:url("board/wood-wall.jpg");
  --wood-rail:url("board/wood-rail.jpg");
}

/* -------------------------------------------------------------- the wall */
body{ font-family:var(--prose); color:var(--ink); background:var(--wood-dark); }

body::before{                                   /* planking, full height */
  top:0 !important;
  background:var(--wood-wall) top center repeat !important;
  background-size:512px 512px !important;
  opacity:1 !important;
}
body::after{                                    /* torchlight + edge falloff */
  background:
    radial-gradient(1100px 620px at 50% -6%, rgba(255,196,110,.16), transparent 68%),
    radial-gradient(900px 900px at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(10,6,3,.42), rgba(10,6,3,.20) 30%, rgba(10,6,3,.55)) !important;
}

a{ color:var(--rust); }
a:hover{ color:var(--rust-2); text-decoration:underline; text-underline-offset:2px; }
h1,h2,h3{ font-family:var(--serif); color:var(--ink-head); }

/* ----------------------------------------------------------- the top banner
   First thing inside every content box: the hero art in its own frame, with the
   logo laid over its left side. The menu and the board both start flush at the
   top of the page — there is no separate band above them. */
.hero-band{
  position:relative; display:block; margin:0 0 14px; padding:8px;
  background:var(--wood-rail) center/300px 300px repeat, #3a2718;
  border:1px solid rgba(16,9,3,.9); border-radius:4px;
  box-shadow:0 12px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,222,170,.14);
}
.hero-band-art{
  display:block; width:100%; height:clamp(140px,15.5vw,224px);
  object-fit:cover; object-position:50% 30%;
  filter:sepia(.22) saturate(.95) contrast(1.04) brightness(.97);
  box-shadow:0 0 0 1px rgba(16,9,3,.85);
}
.hero-band-brand{
  position:absolute; left:5.5%; top:50%; transform:translateY(-50%);
  width:min(330px,34%); text-align:center; pointer-events:none;
}
.hero-band-brand img{
  width:100%; height:auto;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.95)) drop-shadow(0 0 22px rgba(0,0,0,.7));
}
@media (max-width:860px){
  .hero-band{ padding:6px }
  .hero-band-art{ height:120px; object-position:62% 30% }
  .hero-band-brand{ left:4%; width:44% }
}

/* --------------------------------------------------------- the board frame
   .main becomes the board: wooden rails around a dark backing panel that the
   parchment sheets are tacked to. */
/* Menu and board both start flush at the top of the page. */
.layout{ padding-top:12px !important; }
.side{ top:12px !important; max-height:calc(100vh - 24px) !important; }
/* The frame: solid timber, drawn as the element's own background + padding.
   (A sliced border-image lands on random light patches of the texture and reads
   as pale trim, not as a rail.) */
.main{
  position:relative; padding:13px;
  background:var(--wood-rail) center/300px 300px repeat, #3a2718;
  border:1px solid rgba(16,9,3,.9); border-radius:5px;
  box-shadow:
    0 26px 60px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,222,170,.14),
    inset 0 -10px 22px rgba(0,0,0,.45);
}
.main::before{                       /* corner screws, one per rail end */
  content:""; position:absolute; inset:5px; pointer-events:none; border-radius:3px;
  background:
    radial-gradient(circle at 4px 4px, #e2c184 0 2px, #5c3f16 2.6px, transparent 3.4px) no-repeat left top,
    radial-gradient(circle at calc(100% - 4px) 4px, #e2c184 0 2px, #5c3f16 2.6px, transparent 3.4px) no-repeat right top,
    radial-gradient(circle at 4px calc(100% - 4px), #e2c184 0 2px, #5c3f16 2.6px, transparent 3.4px) no-repeat left bottom,
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #e2c184 0 2px, #5c3f16 2.6px, transparent 3.4px) no-repeat right bottom;
}
/* The backing the sheets are pinned to: the wall, sunk into the frame. */
.board-in{
  position:relative; padding:16px 18px 18px; border-radius:2px;
  background:
    linear-gradient(180deg, rgba(28,18,9,.92), rgba(20,13,6,.95)),
    var(--wood-wall) center/512px 512px repeat;
  box-shadow:
    inset 0 0 0 1px rgba(14,8,3,.9),
    inset 0 16px 30px rgba(0,0,0,.60),
    inset 0 -8px 20px rgba(0,0,0,.45);
}
.main-foot{
  border-top:1px solid rgba(120,86,48,.35); color:#a68a63;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.main-foot a{ color:#c69a5e }

/* ------------------------------------------------------------- parchment
   Every sheet: paper texture, aged edge, soft cast shadow. */
.panel,.card,.table-wrap,.fp-content,.notice,.modal .card{
  background:var(--paper) center top/512px 512px repeat, #e3cea3 !important;
  color:var(--ink);
  border:1px solid rgba(120,90,52,.55) !important;
  border-radius:3px !important;
  backdrop-filter:none !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.45),
    inset 0 0 44px rgba(150,110,60,.20),
    inset 0 0 0 1px rgba(255,248,224,.30) !important;
}
.panel,.card,.table-wrap,.notice{ position:relative }
/* A sheet laid ON a sheet gets the dirtier paper, so nesting reads as depth
   instead of one flat expanse of beige. */
.panel .panel,.panel .table-wrap,.notice .table-wrap{
  background:var(--paper-dark) center top/512px 512px repeat, #cdb587 !important;
}
/* aged, slightly darkened edge on every sheet */
.panel::after,.card::after,.notice::after,.table-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:3px;
  box-shadow:inset 0 0 26px rgba(92,62,28,.30), inset 0 0 4px rgba(92,62,28,.25);
}
.card::before{ box-shadow:none !important }

/* ------------------------------------------------------------------ type */
.h-title{
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:var(--ink-head) !important;
  color:var(--ink-head) !important; text-shadow:0 1px 0 rgba(255,250,232,.55);
}
.rule{
  height:2px !important;
  background:
    linear-gradient(90deg, rgba(90,60,26,.65), rgba(90,60,26,.18) 70%, transparent) !important;
}
.eyebrow{ color:var(--rust); letter-spacing:3px }
.lead{ color:var(--ink-2) }
.card h1,.modal h1{
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:var(--ink-head) !important;
  color:var(--ink-head) !important;
}
code,.intro-steps code{
  /* solid fill + literal ink: inline code appears on both surfaces */
  background:#efe1c2 !important; border:1px solid rgba(80,54,26,.42);
  color:#4a2408 !important; font-family:"Consolas",monospace; font-size:.92em;
}

/* --------------------------------------------------------------- buttons
   Stamped leather with a hot-iron edge. */
.btn,.card button{
  color:#fce9c0 !important;
  background:linear-gradient(180deg,#6b4620,#4a2d12 55%,#3a2210) !important;
  border:1px solid #24150a !important; border-radius:4px !important;
  font-family:var(--serif); font-weight:600; letter-spacing:.10em;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  box-shadow:
    0 4px 12px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,214,150,.28),
    inset 0 -6px 12px rgba(0,0,0,.35) !important;
}
.btn:hover,.card button:hover{
  color:#fff3d6 !important; filter:none; transform:translateY(-1px);
  background:linear-gradient(180deg,#7c5326,#563518 55%,#42280f) !important;
}
.btn.ghost{
  color:#5d3208 !important; background:rgba(120,86,40,.10) !important;
  border:1px solid rgba(96,66,36,.55) !important; text-shadow:none;
  box-shadow:inset 0 0 0 1px rgba(255,250,230,.35) !important;
}
.btn.ghost:hover{ background:rgba(120,86,40,.20) !important; color:#3f1f04 !important }
.btn.danger,.btn.wax{
  background:linear-gradient(180deg,#8e2c22,#6a1c15) !important; border-color:#3d0f0a !important;
}

/* --- every FILTER control is the same 3px box as the selects ---------------
   `input,select,textarea` below stamps 3px on the character selector (.fp-select)
   and the search fields; site.css still draws the checkbox/button filters as
   999px pills, which read as a different control on the same row. Pin them all
   to the selects' radius: the checkbox filter chips (.qfilters label), the
   single-select button groups (.vbtn — bestiary class/status, spells, items,
   museum, highscores, vocations) and the clickable chips (character switcher,
   quest toggle). Drop this file and the pills come back with the violet look. */
:is(.qfilters label,.vbtn,.chip,.pager button){ border-radius:3px !important }

/* ---------------------------------------------------------------- inputs */
input,select,textarea{
  /* literal ink, not var(--ink): these paint their own pale field, so on the
     dark board the light token would make them light-on-light. */
  background:#f2e5c6 !important; color:#241505 !important;
  border:1px solid rgba(96,66,36,.55) !important; border-radius:3px !important;
  font-family:var(--prose);
  box-shadow:inset 0 2px 5px rgba(120,88,48,.22) !important;
}
input:focus,select:focus,textarea:focus{ border-color:var(--rust) !important; outline:none }
label{ color:var(--ink-2); letter-spacing:.06em }
.tbl-tools label{ color:var(--ink-3) }
.tbl-tools select{ min-width:150px }

/* ---------------------------------------------------------------- tables */
table.data{ color:var(--ink) }
table.data th{ color:#33200c !important; letter-spacing:.06em;
  background:var(--paper-dark) center/512px 512px repeat; }
table.data thead th{ border-bottom:1px solid rgba(96,66,36,.55) !important;
  box-shadow:inset 0 -1px 0 rgba(255,248,224,.35) }
table.data th,table.data td{ border-bottom:1px solid rgba(96,66,36,.22) !important }
table.data tbody tr:nth-child(even){ background:rgba(122,88,44,.055) }
table.data tbody tr:hover{ background:rgba(160,110,40,.13) }
table.data td.name{ color:#381c04 }
.table-wrap{ overflow-x:auto }

/* --- character dashboard: plain rows, not a sheet inside a sheet ------------
   Every `.dash-grid` table already lives in a `.panel`, so the generic
   `.panel .table-wrap` parchment above lays a second, DARKER sheet inside the
   first — a box in a box, next to a Skills list that is plain rows on the panel
   itself. site.css already declares these wrappers flat
   (`.dash-grid .table-wrap,.otf-wrap,.sp-panel .table-wrap{border:0;…}`); the
   skin has to say it again only because the parchment rules carry !important.
   ⛔ ONLY THE SHEET GOES. `overflow` is untouched, so every scrolling list
   (questlog, bestiary, spells, level progress) still scrolls — and the per-row
   `border-bottom` stays, which is what makes the rows read like the Skills
   list. Same reason the table HEAD loses its paper-dark band: on a flat wrapper
   it would float as a stray strip across the panel's own parchment. */
.dash-grid .table-wrap{
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
}
.dash-grid .table-wrap::after{ content:none !important }
.dash-grid table.data th{ background:none !important }
/* the zebra was the last thing still reading as "a table": row tracking comes
   from the border-bottom here, exactly as it does in the Skills list. Hover
   stays — that one is feedback, not decoration. */
.dash-grid table.data tbody tr:nth-child(even){ background:none }

/* progress row colours — dark enough to read on paper */
table.data tr.r-done td,table.data tr.r-done td.name,table.data tr.r-done .spwords{ color:var(--leaf) }
table.data tr.r-prog td,table.data tr.r-prog td.name,table.data tr.r-prog .spwords{ color:var(--ink-2) }
table.data tr.r-none td,table.data tr.r-none td.name,table.data tr.r-none .spwords{ color:var(--ink-3) }
.hcount{ color:var(--leaf) }

/* badges */
.chip{ background:rgba(122,74,20,.14); color:#3d1e05; border:1px solid rgba(96,66,36,.45) }
.pill{ border-color:rgba(96,66,36,.45); color:var(--ink-2) }
.pill.pvp{ color:var(--wax); border-color:rgba(142,43,34,.45); background:rgba(142,43,34,.10) }
.pill.pve{ color:#3d1e05; border-color:rgba(154,106,34,.45); background:rgba(154,106,34,.10) }
.yn.no{ color:var(--leaf); background:rgba(47,107,52,.12); border-color:rgba(47,107,52,.40) }
.yn.yes{ color:var(--wax); background:rgba(142,43,34,.12); border-color:rgba(142,43,34,.40) }
.spwords{ color:#5a2a0c; font-style:italic }
.sp-free{ color:var(--ink-3) }
.sp-quest{ color:var(--amber) }
.fact b{ color:#3d1e05 } .fact span{ color:var(--ink-3) }
.feat h3{ color:var(--ink-head) }
.feat h3 .dot{ background:var(--rust); box-shadow:0 0 8px rgba(138,63,20,.5) }
.step::before{ color:#fce9c0; background:linear-gradient(180deg,#6b4620,#3f2410);
  box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,214,150,.25) }
.step h3{ color:var(--ink-head) }
.msg.err{ background:rgba(142,43,34,.10); border-color:rgba(142,43,34,.45); color:var(--wax) }
.msg.ok{ background:rgba(47,107,52,.10); border-color:rgba(47,107,52,.45); color:var(--leaf) }
.spnote{ background:rgba(122,88,44,.10); border-left-color:var(--rust); color:var(--ink-2) }
.spnote b{ color:#3d1e05 }
.info-raw,.info-rates{ color:var(--ink-2) }
.info-raw b,.info-rates b{ color:var(--ink-head) }
.prem-num.is-ok{ color:var(--leaf) } .prem-num.is-low{ color:var(--amber) }
.prem-num.is-unknown{ color:var(--ink-3) }
.prem-cap,.pkg-name,.pkg-unit,.pkg-blurb{ color:var(--ink-2) }
.pkg-days{ color:#3d1e05 }
.vbtn{ color:var(--ink); background:rgba(122,88,44,.10); border:1px solid rgba(96,66,36,.45) }
.vbtn:hover{ border-color:var(--rust); color:var(--ink-head) }
.vbtn.on{ background:linear-gradient(180deg,#6b4620,#3f2410); color:#fce9c0; border-color:#24150a }
.intro-spoiler{ background:var(--paper) center/512px 512px repeat, #e3cea3;
  border-color:rgba(120,90,52,.55) }
.intro-spoiler summary{ color:var(--ink-head) }
.intro-spoiler summary::before{ color:var(--rust) }
.intro-steps{ color:var(--ink-2) } .intro-steps b{ color:var(--ink) }
.mech-fig.noimg::before{ background:rgba(122,88,44,.10); border-color:rgba(96,66,36,.45);
  color:var(--ink-3) }
.intro-img img,.mech-fig img,.yt-embed{ border-color:rgba(60,40,20,.75); border-radius:3px }
.fish-hero{ background:var(--paper) center/512px 512px repeat, #e3cea3;
  border-color:rgba(120,90,52,.55) }
.fish-cap{ color:var(--ink-3) } .fish-arrow{ color:#3d1e05 }

/* --------------------------------------------------------------- sidebar
   A dark plank WALL with individual boards screwed onto it: each menu section is
   one board, and each link inside it is a thinner slat nailed to that board.
   Three wood surfaces stacked, so each has to be a different VALUE or the whole
   sidebar turns to mush: wall = darkest, section board = mid, link slat = lightest.
   All three use the same two textures; only the overlaid gradient changes. */
.side{
  background:
    linear-gradient(180deg, rgba(14,9,3,.84), rgba(9,5,2,.90)),
    var(--wood-wall) center/512px 512px repeat !important;
  border:1px solid rgba(10,6,2,.95) !important; border-radius:4px !important;
  backdrop-filter:none !important;
  box-shadow:0 20px 46px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,222,170,.10),
    inset 0 -8px 18px rgba(0,0,0,.5) !important;
  padding:10px 8px !important;
}
.side-brand{ border-bottom:1px solid rgba(150,110,64,.30) }
.side-brand span{ color:#c8a273 }

/* ---- a section = one board bolted to the wall ---- */
.menu-sec{
  position:relative; margin:9px 0 !important; padding:8px 8px 9px; border-radius:3px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.46)),
    var(--wood-rail) center/300px 300px repeat, var(--wood);
  border:1px solid rgba(12,7,2,.9);
  box-shadow:0 5px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,222,170,.17),
    inset 0 -7px 14px rgba(0,0,0,.34);
}
/* two brass screws, one per top corner — the same detail the board frame uses */
.menu-sec::before{
  content:""; position:absolute; top:4px; left:4px; right:4px; height:6px;
  pointer-events:none;
  background:
    radial-gradient(circle at 3px 3px, #e2c184 0 1.6px, #5c3f16 2.1px, transparent 2.8px) no-repeat left top,
    radial-gradient(circle at calc(100% - 3px) 3px, #e2c184 0 1.6px, #5c3f16 2.1px, transparent 2.8px) no-repeat right top;
}
/* the section title is burnt into its board */
.menu-sec h4{
  color:#f0d3a4; opacity:1; font-family:var(--serif); font-size:10.5px;
  letter-spacing:.18em; text-shadow:0 1px 2px rgba(0,0,0,.9);
  border-bottom:1px solid rgba(8,4,1,.5); box-shadow:0 1px 0 rgba(255,222,170,.10);
  padding:0 2px 4px; margin:1px 0 7px;
}

/* ---- a link = a slat nailed to the board ---- */
.menu-link{
  display:block; margin:4px 0; padding:6px 9px !important;
  color:#f4e2c2 !important; font-family:var(--prose); font-weight:600; font-size:14px;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  background:
    linear-gradient(180deg, rgba(255,214,150,.20), rgba(255,214,150,.05) 42%, rgba(0,0,0,.14)),
    var(--wood-rail) center/210px 210px repeat, var(--wood-lit) !important;
  border:1px solid rgba(8,4,1,.9) !important; border-radius:3px !important;
  box-shadow:
    0 3px 7px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,232,190,.30),
    inset 0 -2px 5px rgba(0,0,0,.34) !important;
  transition:transform .12s ease, filter .12s ease;
}
.menu-link:hover{
  filter:brightness(1.18); transform:translateY(-1px);
  color:#fff4dc !important; text-decoration:none;
  border-color:rgba(190,140,70,.6) !important;
  box-shadow:0 4px 9px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,232,190,.24) !important;
}
/* the current page's slat is pressed INTO the board, not raised off it */
.menu-link.is-active{
  color:#ffe6b4 !important; transform:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(255,196,120,.10)),
    var(--wood-rail) center/210px 210px repeat, var(--wood-lit) !important;
  border-color:rgba(120,80,34,.8) !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6), inset 3px 0 0 var(--rust-2) !important;
}
/* the danger red has to clear 4.5:1 against the slat's own lighter timber
   (--wood-lit): the old #f2a99c measured 4.14 once the slats got their own fill. */
.menu-link.menu-danger{ color:#ffc0b2 !important }
.menu-link.menu-danger:hover{ color:#ffd6cc !important;
  border-color:rgba(180,60,40,.65) !important }
.menu-toggle{ padding-top:2px }
.menu-toggle .caret{ color:#f0d3a4 }
.side-status{ border-top-color:rgba(150,110,64,.30); color:#c8a273 }
.side-burger{ background:var(--wood); color:#f0dcbb; border-color:var(--wood-line) }

/* --- sidebar: the inline log-in form + the plain (header-less) link group --- */
.menu-plain{ margin-top:2px }
/* (.menu-cta styled the "I'm New, Help Me!" sidebar link, removed 2026-08-02 in
   favour of the one-time slide-down hint in common.php render_newbie_hint().) */
.side-login{ margin:0 0 6px; padding:0 2px; display:flex; flex-direction:column; gap:6px }
.side-login input{
  width:100%; padding:7px 9px !important; font-size:13px !important;
  font-family:var(--sans) !important; border-radius:3px !important;
}
.side-login input::placeholder{ color:#8a7454; opacity:1 }
.side-login .btn{ width:100%; margin:0; padding:7px 10px !important; font-size:12.5px }

/* ------------------------------------------------------------------ hero
   Kept, but framed and warmed so it sits on a wooden wall. */
.hero{
  padding:10px; border:1px solid rgba(16,9,3,.9); border-radius:4px;
  background:var(--wood-rail) center/300px 300px repeat, #3a2718;
  box-shadow:0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,222,170,.14);
}
.hero img{ filter:sepia(.55) saturate(.8) contrast(1.05) brightness(.95);
  box-shadow:0 0 0 1px rgba(16,9,3,.8) }
.hero-grad{ background:linear-gradient(180deg,transparent 38%,rgba(28,16,6,.55) 74%,rgba(24,14,6,.92)) }
.hero-tag{ color:#e6c08a }

/* ------------------------------------------------------- modal / dropdown */
.modal-overlay{ background:rgba(14,8,3,.82) }
.modal .modal-close{
  background:rgba(120,86,40,.14); border-color:rgba(96,66,36,.45); color:var(--ink-2) }
.modal .modal-close:hover{ background:rgba(120,86,40,.26); color:var(--ink) }
.dl-item{ background:rgba(122,88,44,.10); border-color:rgba(96,66,36,.35) }
.dl-item:hover{ background:rgba(160,110,40,.18); border-color:rgba(96,66,36,.6) }
.dl-item b{ color:#3d1e05 } .dl-item b::after{ color:var(--rust) }
.dl-item span{ color:var(--ink-2) }
.dl-item.disabled b{ color:var(--ink-3) }
.dropdown-menu{ background:var(--panel-solid); border-color:rgba(96,66,36,.55) }
.dropdown-menu a{ color:var(--ink) } .dropdown-menu a:hover{ background:rgba(160,110,40,.14) }
.fp-toast{ background:#2a1a0c; border-color:#8a5a2b; color:#f7dfae }

/* ==========================================================================
   NOTICE BOARD — the news feed itself
   ========================================================================== */

.board-head{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  margin:2px 2px 16px;
}
.board-head h1,.board-head h2{
  font-size:24px; color:#f0d3a0 !important; -webkit-text-fill-color:#f0d3a0 !important;
  letter-spacing:.06em; text-shadow:0 2px 3px rgba(0,0,0,.85);
}
.board-head .board-sub{
  color:#bd9a6c; font-size:13px; font-family:var(--prose); margin-left:auto;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.board-head .board-sub a{ color:#e0b47e }

/* one pinned sheet */
.notice{ padding:20px 24px 18px !important; margin:0 0 22px; }
.notice:nth-child(odd){ transform:rotate(-.28deg) }
.notice:nth-child(even){ transform:rotate(.24deg) }
.notice::before{                                  /* the tack */
  content:""; position:absolute; top:-9px; left:50%; margin-left:-14px;
  width:28px; height:28px; z-index:3;
  background:url("board/pin.png") center/28px 28px no-repeat;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
.notice.is-taped::before{                         /* variant: taped, not tacked */
  content:""; top:-12px; left:50%; margin-left:-64px; width:128px; height:38px;
  background:url("board/tape.png") center/128px 38px no-repeat;
  transform:rotate(-1.6deg); opacity:.95;
}
.notice-head{ margin:0 0 10px }
.notice-title{ font-size:22px; line-height:1.25; margin:0 0 4px }
.notice-title a{ color:var(--ink-head) }
.notice-title a:hover{ color:var(--rust); text-decoration:none }
.notice-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--sans); font-size:12px; color:var(--ink-3);
  padding-bottom:9px; border-bottom:1px solid rgba(96,66,36,.28);
}
.notice-meta .n-date{ letter-spacing:.04em }
.notice-meta .n-by{ font-style:italic }
.notice-tag{
  font-family:var(--serif); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:2px 9px; border-radius:2px;
  color:#40200a; background:rgba(154,106,34,.16); border:1px solid rgba(96,66,36,.45);
}
.notice-body{ font-size:15.5px; line-height:1.72; color:var(--ink) }
.notice-body p{ margin:.7em 0 }
.notice-body h2,.notice-body h3,.notice-body h4{
  font-family:var(--serif); color:var(--ink-head); margin:1.1em 0 .35em; font-size:18px }
.notice-body a{ color:var(--rust); text-decoration:underline; text-underline-offset:2px }
.notice-body ul,.notice-body ol{ margin:.6em 0; padding-left:1.5em }
.notice-body li{ margin:.22em 0 }
.notice-body blockquote{
  margin:.9em 0; padding:.5em 0 .5em 14px; border-left:3px solid rgba(138,63,20,.5);
  color:var(--ink-2); font-style:italic }
.notice-body hr{ border:0; height:1px; background:rgba(96,66,36,.35); margin:1.2em 0 }
.notice-body code,.notice-body pre{
  background:rgba(120,86,40,.14); border:1px solid rgba(120,86,40,.28); border-radius:3px }
.notice-body pre{ padding:10px 12px; overflow:auto; font-size:13px }
.notice-body table{ border-collapse:collapse; margin:.8em 0; font-size:14px }
.notice-body th,.notice-body td{ border:1px solid rgba(96,66,36,.32); padding:5px 9px }
.notice-body th{ background:rgba(120,86,40,.12) }
/* images inside a post: a photograph laid on the sheet */
.notice-body img{
  max-width:100%; height:auto; margin:.8em 0; border:1px solid rgba(60,40,20,.55);
  border-radius:2px; padding:5px; background:#f6ecd3;
  box-shadow:0 6px 14px rgba(0,0,0,.28) }
.notice-body img.left{ float:left; margin:.4em 16px .6em 0; max-width:44% }
.notice-body img.right{ float:right; margin:.4em 0 .6em 16px; max-width:44% }
.notice-lead-img{
  display:block; width:100%; margin:0 0 14px; border:1px solid rgba(60,40,20,.55);
  border-radius:2px; padding:5px; background:#f6ecd3; box-shadow:0 6px 14px rgba(0,0,0,.28) }
.notice-foot{
  margin-top:14px; padding-top:10px; border-top:1px solid rgba(96,66,36,.28);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  font-family:var(--sans); font-size:13px }
.notice-more{ font-family:var(--serif); font-weight:600; letter-spacing:.06em }
.notice-more::after{ content:" \00BB" }

/* ---- corner stamps -------------------------------------------------------
   Every notice is stamped with its CONTENT TYPE (Update / Event / Info / …),
   and staff additionally get DRAFT or SCHEDULED above it. They stack down the
   top-right corner, so `.has-stamps` reserves the room — the title must never
   run underneath one, and now that published notices carry a stamp too that is
   a player-visible collision, not just a staff one.
   ⛔ Colours are pinned LITERALS, not tokens: a stamp has no fill of its own, so
   it is always read against parchment, and the ink must stay dark there. */
.notice.is-draft{ box-shadow:0 10px 22px rgba(0,0,0,.45),
  inset 0 0 44px rgba(150,110,60,.20), inset 0 0 0 2px rgba(126,30,24,.45) !important }
.stamps{
  position:absolute; top:10px; right:12px; z-index:4; pointer-events:none;
  /* the gap has to clear the opposed tilts below, or a stacked pair's corners
     intersect and read as a layout bug rather than two presses */
  display:flex; flex-direction:column; align-items:flex-end; gap:11px;
}
.stamp{
  font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#6b3d12;
  border:2px solid rgba(107,61,18,.65); border-radius:4px; padding:3px 10px;
  transform:rotate(-7deg); opacity:.95;
  text-shadow:0 1px 0 rgba(255,245,220,.4);
}
/* alternate the tilt so a stack reads as two separate presses of the stamp */
.stamps .stamp:nth-child(even){ transform:rotate(5deg) }
/* state stamps (staff-only) */
.stamp-draft{ color:#71160f; border-color:rgba(113,22,15,.7) }
.stamp-sched{ color:#6d4212; border-color:rgba(109,66,18,.65) }
/* the three content types; any other tag keeps the neutral brown above */
.stamp-update{ color:#6b3d12; border-color:rgba(107,61,18,.65) }
.stamp-event { color:#1f5a26; border-color:rgba(31,90,38,.62) }
.stamp-info  { color:#1f5a7a; border-color:rgba(31,90,122,.62) }
.notice.has-stamps .notice-head{ padding-right:104px }
@media (max-width:520px){
  .stamp{ font-size:12.5px; letter-spacing:.12em; padding:2px 8px }
  .notice.has-stamps .notice-head{ padding-right:84px }
}

/* empty board */
.board-empty{
  padding:34px 20px; text-align:center; color:#bd9a6c; font-style:italic;
  border:1px dashed rgba(150,110,64,.35); border-radius:3px }

/* pager */
.board-pager{ display:flex; gap:10px; justify-content:center; align-items:center;
  margin:6px 0 2px; font-family:var(--sans); font-size:13.5px; color:#bd9a6c }
.board-pager a,.board-pager span{ padding:6px 12px; border-radius:3px;
  border:1px solid rgba(150,110,64,.35); color:#e8c795 }
.board-pager a:hover{ background:rgba(255,196,120,.12); text-decoration:none }
.board-pager .is-cur{ background:rgba(255,196,120,.16); color:#fff1d6 }
.board-pager .is-off{ opacity:.35 }

/* ---------------------------------------------------- news admin (editor) */
.news-editor textarea{ width:100%; font-family:"Consolas","Courier New",monospace;
  font-size:13px; line-height:1.55; min-height:340px; resize:vertical }
.news-editor .fld-row{ display:flex; gap:12px; flex-wrap:wrap }
.news-editor .fld-row > div{ flex:1; min-width:180px }
.news-rows td.st{ font-family:var(--sans); font-size:12px; font-weight:700 }
.news-rows td.st.pub{ color:var(--leaf) } .news-rows td.st.draft{ color:var(--wax) }
.news-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.news-actions form{ margin:0 } .news-actions .btn{ margin-top:0 }
.news-hint{ color:var(--ink-2); font-size:13px; line-height:1.6 }

/* ==========================================================================
   CONTRAST PASS — the page has TWO surfaces, so every piece of text has to
   declare which one it is painted on:

     the board backing (dark timber)  ->  light, warm text
     a parchment sheet (.panel &co)   ->  dark ink

   ⭐ This is done by RE-SCOPING THE SHARED TOKENS, not by listing classes.
   Almost every rule in site.css and in the pages' own <style> blocks paints with
   var(--muted) / var(--muted-2) / var(--text) / var(--gold*) / var(--violet*), so
   flipping those tokens per surface fixes the whole site at once — including
   pages and classes nobody has enumerated, and any added later. Custom
   properties inherit, so depth does not matter.

   Only two kinds of rule remain below: elements that hard-code a literal colour
   (they need one rule per surface), and the badges, which get SOLID fills
   because a translucent one takes the colour of whatever is behind it — the bug
   that made the quest-log pills unreadable on the board.

   Verify with:  python3 tools/theme/contrast_audit.py --cookie PHPSESSID=<id>
   ========================================================================== */

/* --- on the board: the tokens go light --------------------------------------
   Including the ink/accent tokens: a rule that says `color:var(--ink-2)` is
   asking for "secondary text", not for brown — so the token decides, and any
   rule anywhere resolves correctly on whichever surface it lands on.
   ⛔ The one exception is an element that paints its OWN light background
   (inputs, badges, paper tags): those must pin a literal dark ink, or they end
   up light-on-light here. They are marked in the badge block below. */
.board-in{
  --ink:#f2dfbf; --ink-2:#d3b691; --ink-3:#b8996f; --ink-head:#f2d7a2;
  --rust:#e3a86f; --rust-2:#f2c391;
  --leaf:#8ada9c; --wax:#ff9f97; --amber:#f0b860;
  --text:#f2dfbf; --muted:#d3b691; --muted-2:#b8996f;
  --gold:#d0a45f; --gold-2:#edc994; --gold-3:#f7e3af;
  --violet:#d5a76b; --violet-2:#e5ba85;
  --line:rgba(190,140,70,.40); --line-soft:rgba(190,140,70,.24);
  --panel-solid:#2a1b0d;
  --ok:#84dc99; --err:#ff9f97;
  color:var(--text);
}
.board-in .h-title{
  color:var(--ink-head) !important; -webkit-text-fill-color:var(--ink-head) !important;
  text-shadow:0 2px 3px rgba(0,0,0,.85);
}
.board-in .rule{
  background:linear-gradient(90deg, rgba(206,156,92,.65), rgba(206,156,92,.16) 70%, transparent) !important;
}
.board-in .info-raw b,.board-in .info-rates b{ color:#fbeacd !important }
.board-in code{ background-color:#efe1c2 !important; color:#4a2408 !important }
.main-foot{ color:#c9a97e }

/* --- inside a parchment sheet: the tokens go to ink ------------------------- */
:is(.panel,.card,.notice,.table-wrap,.intro-spoiler,.fish-hero,.modal,
    .spnote,.skill-list li,.info-list li,.fact,.step){
  --ink:#241505; --ink-2:#2b1c09; --ink-3:#43331f; --ink-head:#301803;
  --rust:#6f2f0d; --rust-2:#8a4014;   /* links: 4.5:1 even on the darker table paper */
  --leaf:#164a1d; --wax:#71160f; --amber:#6f4207;
  --text:var(--ink); --muted:var(--ink-2); --muted-2:var(--ink-3);
  --gold:#5c3407; --gold-2:#42200a; --gold-3:#33180a;
  --violet:#8a5a2b; --violet-2:#7a4a1c;
  --line:rgba(96,66,36,.55); --line-soft:rgba(96,66,36,.30);
  --panel-solid:#e3cea3;
  --ok:#1f5a26; --err:#8e2b22;
  color:var(--ink);
}
:is(.panel,.card,.notice,.intro-spoiler,.fish-hero,.modal,.spnote,.fact,.step) :is(.h-title,h1,h2,h3,h4){
  color:var(--ink-head) !important; -webkit-text-fill-color:var(--ink-head) !important;
  text-shadow:0 1px 0 rgba(255,250,232,.5);
}
:is(.panel,.card,.notice,.intro-spoiler,.fish-hero) .rule{
  background:linear-gradient(90deg, rgba(90,60,26,.65), rgba(90,60,26,.18) 70%, transparent) !important;
}
:is(.panel,.card,.notice,.intro-spoiler,.fish-hero) :is(.info-raw,.info-rates) b{
  color:var(--ink-head) !important;
}
/* names and headings in tables: the ink-side gold is still too pale on the
   darker table paper, so pin them darker again */
table.data td.name,.cr-name,.mm-catsec h3,.fg-ident .ci-name{ color:#381c04 }

/* --- card-shaped list items ARE sheets: give them paper ------------------- */
.skill-list li,.info-list li,.spnote,.fact,.step{
  background:var(--paper) center top/512px 512px repeat, #e3cea3 !important;
  border:1px solid rgba(120,90,52,.55) !important; border-radius:3px !important;
  box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 0 30px rgba(150,110,60,.18) !important;
}
.info-list li{ border-radius:0 !important; box-shadow:none !important; border-width:0 0 1px 0 !important }
.spnote{ border-left:3px solid var(--rust) !important; border-radius:0 3px 3px 0 !important }
.skill-list b,.info-list b{ color:var(--ink-head) }
.skill-list .who{
  color:#40200a; background:rgba(154,106,34,.16); border:1px solid rgba(96,66,36,.45);
}

/* --- badges & small controls: SOLID fills, bright on either surface --------
   ⛔ Never a translucent background here. A `rgba(...,.16)` pill reads as pale
   green on parchment and as mud on the dark board; these are opaque paper tags
   that pop on both, with their meaning carried by a saturated dark ink. */
.btn.ghost,.vbtn,.chip,.qs,.obadge,.pill,.yn,.notice-tag,.loot-chip,.qfilters label,
.pager button,.pager .pinfo,.fp-select,.bcls,.voc-badge,.hid-tag,
.tbl-tools select,.cr-search,.board-pager a,.board-pager span{
  background-color:#eddfbd !important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.34),rgba(90,60,26,.07)) !important;
  color:#3f2405 !important; border:1px solid rgba(80,54,26,.62) !important;
  text-shadow:none !important; box-shadow:none !important;
}
.btn.ghost:hover,.vbtn:hover,.chip:hover,.board-pager a:hover,.qfilters label:hover,
.pager button:hover{
  background-color:#f8eed4 !important; color:#2b1704 !important;
}
.vbtn.on,.chip.on,.board-pager .is-cur{
  background-color:#4a2d12 !important;
  background-image:linear-gradient(180deg,#6b4620,#3f2410) !important;
  color:#fce9c0 !important; border-color:#24150a !important;
  text-shadow:0 1px 2px rgba(0,0,0,.7) !important;
}
.chip.on small{ color:#f0dcb6 !important }
.chip small{ color:#43331f !important }
/* the four meanings, each a bright tinted tag */
.qs.done,.obadge.free,.pill.always,.voc-badge.live,.bcls.c-harmless,.bck.done{
  background-color:#cde7c4 !important; color:#15501d !important;
  border-color:rgba(31,90,38,.5) !important;
}
/* ⛔ .fg-pickup is NOT one of those paper tags — it is a line of text sitting straight on the
   Fighters Guild parchment, so it gets ink, never a green fill (owner's call 2026-08-03). */
.fg-pickup{
  background:none !important; border:0 !important;
  color:var(--leaf);   /* ⛔ no !important on color/text-shadow — an !important declaration
     outranks a keyframe and would freeze the pulse below. board.css loads after site.css, so
     plain specificity already beats its #6fff9f. */
  animation-name:fg-pulse-ink !important;
}
/* The pulse runs dark-green ink -> light green (owner's call 2026-08-03) and NEVER by fading:
   opacity dropped the ink to 2.1:1 on parchment. ⛔ The light half carries a dark halo — light
   green alone is ~2:1 on paper, and the halo is the only thing holding the letters readable at
   the top of the swing. Change the light colour and the halo goes with it. */
@keyframes fg-pulse-ink{
  0%,100%{ color:#164a1d; text-shadow:none }
  50%{ color:#5fd38a; text-shadow:0 0 2px rgba(11,38,14,.95), 0 1px 3px rgba(11,38,14,.8) }
}
.qs.prog,.obadge.prem,.pill.rare,.bcls.c-medium{
  background-color:#f7e3ae !important; color:#6a3d05 !important;
  border-color:rgba(154,106,34,.55) !important;
}
.qs.none,.obadge.quest,.pill.uncommon,.voc-badge.soon,.bcls.c-trivial{
  background-color:#e6ddc7 !important; color:#4b3d2c !important;
  border-color:rgba(96,66,36,.5) !important;
}
.qs.bad,.pill.very-rare,.bcls.c-challenging,.bcls.c-nemesis{
  background-color:#f4d4cf !important; color:#6e150e !important;
  border-color:rgba(126,30,24,.5) !important;
}
.bcls.c-hard{ background-color:#f8dcc0 !important; color:#7c3a06 !important;
  border-color:rgba(154,74,16,.5) !important }
.loot-chip.r-always{ border-color:rgba(31,90,38,.6) !important }
.loot-chip.r-rare{ border-color:rgba(154,106,34,.65) !important }
.loot-chip.r-very-rare{ border-color:rgba(126,30,24,.6) !important }
/* the primary button is stamped leather; the solid colour keeps it opaque */
.btn,.card button{ background-color:#4a2d12 !important }
.btn.danger,.btn.wax{ background-color:#7a2419 !important }

/* --- page-level <style> blocks load AFTER this file, so these need force --- */
/* account.php */
.ord-b,.vis-b{ color:#3f2405 !important }
.ord-b:hover,.vis-b:hover{ color:#2f1a04 !important; background:rgba(160,110,40,.28) !important }
.del-tag{ color:var(--wax) !important }
.del-btn:hover{ color:#5c110c !important; background:rgba(126,30,24,.16) !important }
/* items.php — element colours, darkened for paper */
.it-elem.it-fire,.it-atke.it-fire{ color:#8f330c !important }
.it-elem.it-energy,.it-atke.it-energy{ color:#5a3c9a !important }
.it-elem.it-earth,.it-atke.it-earth{ color:#1f5424 !important }
.it-elem.it-death,.it-atke.it-death{ color:#4a3f52 !important }
.it-elem.it-ice,.it-atke.it-ice{ color:#1f5a7a !important }
.it-elem.it-holy,.it-atke.it-holy{ color:#8a6a10 !important }
/* quests.php / outfits.php / afterrookgaard.php — the wiki links are a hard
   #6fb1ff in the pages' own CSS; route them through the accent token instead. */
.wlink{ color:var(--rust) !important }
.wlink:hover{ color:var(--rust-2) !important }
/* mymuseum.php — each category is now a sheet (.mm-catsec.panel), so the item
   chips sit ON parchment. Only a DONATED item is a tag: it gets the dirtier
   paper + the aged border, so the owned ones read as tacked onto the sheet and
   the missing ones recede into it. A missing item paints nothing at all —
   border stays in the box model (transparent) so nothing shifts.
   ⛔ Never the page's rgba(95,211,138,.08)/.45 tints here: a translucent fill
   just takes the colour of the paper behind it. */
.mm-catsec .mm-item{
  background:none !important; border-color:transparent !important;
}
.mm-catsec .mm-item.own{
  background:var(--paper-dark) center top/512px 512px repeat, #cdb587 !important;
  border-color:rgba(96,66,36,.5) !important;
}
.mm-catsec .mm-item.own span{ color:#123f17 !important }
.mm-catsec .mm-item.miss{ opacity:.82 }
/* creatures.php / vocations.php / quests.php / namechange.php */
.bst-stat.done{ color:var(--leaf) !important }
.bst-bar.done span{ background:linear-gradient(90deg,#2f6b34,#4f9a56) !important }
.bst-kills{ color:var(--ink-2) !important }
.wlink:hover{ color:var(--ink-head) !important }
.nc-lock h3,.nc-warn{ color:var(--wax) !important }
/* common.php premium block */
.prem-num.is-ok{ color:var(--leaf) !important }
.prem-num.is-low{ color:var(--amber) !important }
.prem-num.is-unknown{ color:var(--ink-3) !important }
/* spelltip.php — a dark leather note, deliberately NOT parchment: it floats
   over the page and must not read as one more sheet. */
#spellTip{ background:rgba(30,19,9,.98) !important; border-color:rgba(190,140,70,.5) !important;
  border-radius:4px !important; color:#f4e3c4 !important }
#spellTip .st-words{ color:#e0b47e !important }
#spellTip .st-facts i{ color:#cdb289 !important; border-color:rgba(190,140,70,.35) !important }
.sp-has-tip{ border-bottom-color:rgba(122,74,20,.55) }

@media (max-width:860px){
  .main{ border-width:8px; padding:12px 12px 16px }
  .notice{ padding:16px 16px 14px !important }
  .notice:nth-child(odd),.notice:nth-child(even){ transform:none }
  .notice-body img.left,.notice-body img.right{ float:none; max-width:100%; margin:.8em 0 }
}