/*───────────────────────────────────────────────────────────────
  fnh.css — Ma’habre skin (Fear & Hunger, game 1)
  Palette pulled from your image: brass gold • sandstone • slate blue
  NOTE: change --bg-img to your file path if different
───────────────────────────────────────────────────────────────*/

.fnh-page {
  /* === IMAGE === */
  --bg-img: url("/images/fandom/mahabre.webp"); /* e.g., /images/fnh/mahabre.webp */
  --bg-pos: 65% 42%;   /* keeps the sunburst to the right */

  /* === COLOURS (OKLCH where relevant for nice luminance) === */
  --ink:        #0e0b0a;   /* near-black, warm */
  --coal:       #171311;
  --stone-0:    #2d2a33;   /* deepest slate shadow */
  --stone-1:    #3a3745;   /* slate */
  --sand-1:     #b99c7a;   /* sandstone mid */
  --sand-2:     #d4b896;   /* light sandstone */
  --brass-1:    #caa86c;   /* brass accent */
  --brass-2:    #9e834f;   /* darker brass */
  --rust:       #8a4e3a;   /* dried blood/copper */
  --mould:      #7e8a6a;   /* sickly olive */
  --sky-warm:   #f4d7b2;   /* sunlit haze */
  --text:       #eadfcf;   /* body text on dark */
  --text-2:     #cdb99e;   /* secondary text */
  --rule:       #6b5b49;   /* borders */

  /* === TYPO === */
  --head: "Tagesschrift", ui-serif, Georgia, serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* === UI RADIUS / SPACING === */
  --r: .85rem;
  --pad: 1rem;
  --gap: 1rem;

  /* === STAT BAR DEFAULTS === */
  --bar-bg: #201a14;
  --bar-fill: #d1b471;         /* default brass */
  --bar-glow: rgba(244, 215, 178, .15);

  color: var(--text);
  font-family: var(--serif);
  line-height: 1.55;
  min-height: 100svh;

  /* Background stack: image + vignettes + heat haze */
  background:
    radial-gradient(1400px 600px at 68% 38%, rgba(0,0,0,.28), transparent 60%),
    radial-gradient(900px 420px at 15% 20%, rgba(12,8,6,.45), transparent 58%),
    linear-gradient(180deg, rgba(20,14,10,.35), rgba(8,6,6,.65)),
    var(--bg-img) center / cover no-repeat fixed;
  background-position: var(--bg-pos);
}

/* Soft grain + extra vignette to keep text readable over the sunburst */
.fnh-page::before {
  content: "";
  position: fixed;
  inset: -8vmax;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60vmax 40vmax at 70% 42%, rgba(0,0,0,.34), transparent 52%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
  opacity: .9;
}

/* Content container sits above overlays */
.page.wrap {
  width: min(1060px, 92vw);
  margin: 2rem auto 4rem;
  position: relative;
  z-index: 1;
}

/*──────────────── NAV ────────────────*/
.hud-nav {
  display: flex; gap: 1rem; justify-content: center;
  padding: .75rem 1rem .9rem;
  font-family: var(--head);
  color: var(--sky-warm);
  position: relative;
}
.hud-nav::after {
  content: "";
  position: absolute; inset-inline: 8%; bottom: .2rem; height: 1px;
}
.hud-nav a {
  color: var(--text); text-decoration: none;
  padding: .1rem .25rem; border-bottom: 1px dotted transparent;
  transition: color .15s ease, border-color .15s ease;
}
.hud-nav a:hover { color: var(--sky-warm); border-color: var(--brass-1); }

/*──────────────── HEADERS / TEXT ────────────────*/
.hero h1, .content h2, .content h3 { font-family: var(--head); }
.hero h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--sky-warm);
  text-shadow: 0 0 16px rgba(244,215,178,.14);
  margin: 1.2rem 0 .6rem;
}
.content h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  color: var(--brass-1); margin: 0 0 .6rem;
}
.content h3 {
  font-size: clamp(1.05rem, 2.1vw, 1.2rem);
  color: var(--sand-2); margin: .6rem 0 .25rem;
}
.tagline, .lede { color: var(--text-2); font-style: italic; }
.lede { margin: 0 0 .6rem; }

/*──────────────── CARDS ────────────────*/
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22)),
    color-mix(in oklab, var(--stone-1) 60%, var(--stone-0) 40%);
  border-radius: calc(var(--r) * .75);
  padding: var(--pad);
  position: relative; overflow: clip;
  backdrop-filter: saturate(90%) blur(.2px);
  opacity: 0.8;
}
.hud-corners::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
}
.hud-corners::after {
  /* tiny “chisel” marks at corners */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background:
    radial-gradient(14px 14px at 0 0, transparent 65%, rgba(0,0,0,.4) 66% 68%, transparent 70%) top left,
    radial-gradient(14px 14px at 100% 0, transparent 65%, rgba(0,0,0,.4) 66% 68%, transparent 70%) top right,
    radial-gradient(14px 14px at 0 100%, transparent 65%, rgba(0,0,0,.4) 66% 68%, transparent 70%) bottom left,
    radial-gradient(14px 14px at 100% 100%, transparent 65%, rgba(0,0,0,.4) 66% 68%, transparent 70%) bottom right;
  background-repeat: no-repeat; background-size: 28px 28px;
}

/*──────────────── LISTS / CHIPS ────────────────*/
ul { padding-left: 1.1rem; }
ul.dash { list-style: none; padding-left: 0; }
ul.dash li { position: relative; padding-left: 1.35rem; margin: .35rem 0; }
ul.dash li::before {
  content: "—"; position: absolute; inset-inline-start: 0; color: var(--brass-1);
}

.chips {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem; padding: 0; list-style: none; margin: .6rem 0 0;
}
.chips li {
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  color: var(--text-2);
  padding: .2rem .5rem; border-radius: 999px; font-size: .85rem;
}

/*──────────────── STATS ────────────────*/
.hud-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .45rem .7rem; }
.hud-key {
  font-family: var(--mono); font-size: .78rem; color: var(--sand-2);
  letter-spacing: .03em; text-transform: uppercase;
}
.statbar {
  height: .6rem; background: var(--bar-bg);
  border: 1px solid #4a3c2e; border-radius: 2px; position: relative; overflow: hidden;
}
.statbar span {
  display: block; height: 100%;
  width: calc(var(--p, .5) * 100%);
  background: linear-gradient(90deg, color-mix(in oklab, var(--bar-fill), #000 12%), var(--bar-fill));
  box-shadow: 0 0 10px var(--bar-glow), inset 0 0 2px rgba(255,255,255,.12);
  transition: width .25s ease;
}

/* Per-bar tints in the hero overview (Hunger • Mind • Infection) */
#overview .hud-row .statbar:nth-of-type(1) span { --bar-fill: #c69a6a; } /* hunger: copper-sand */
#overview .hud-row .statbar:nth-of-type(2) span { --bar-fill: #6a7099; } /* mind: slate-lapis */
#overview .hud-row .statbar:nth-of-type(3) span { --bar-fill: #7f8f69; } /* infection: mould-green */

/*──────────────── TABLES ────────────────*/
.hud-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: .85rem; color: var(--text);
}
.hud-table thead th {
  text-align: left; padding: .4rem .45rem; border-bottom: 1px solid var(--rule); color: var(--sand-2);
}
.hud-table tbody td {
  padding: .4rem .45rem; border-bottom: 1px dotted #5a4a38; color: var(--text-2);
}

/*──────────────── RAIL / PANELS ────────────────*/
.hud-rail { display: grid; gap: .6rem; margin-top: 1rem; }
.hud-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.14)),
    color-mix(in oklab, var(--stone-1) 70%, var(--stone-0));
  
  border-radius: calc(var(--r) * .6);
  padding: .55rem .65rem;
}
.hud-panel .label {
  font-family: var(--mono); font-size: .7rem; color: var(--sand-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.hud-panel .value { color: var(--text-2); }

/*──────────────── TALK LINK ────────────────*/
.talk-link {
  background: none; border: none; padding: 0; color: var(--sky-warm);
  font: inherit; text-decoration: underline dotted; text-underline-offset: .18em; cursor: pointer;
}
.talk-link:hover { color: var(--sand-2); }

/*──────────────── DECOR: ANCHORED RELICS ────────────────*/
.card-anchor { position: relative; }
.mnote {
  position: absolute; display: inline-block; transform-origin: center;
  animation: floatDrift var(--dur, 18s) ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); z-index: 2;
}
.mnote img {
  width: clamp(48px, 14vw, 120px); height: auto;
  opacity: .92; transform: rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  transition: opacity .2s ease, transform .2s ease;
}
.mnote:hover img { opacity: 1; transform: rotate(calc(var(--rot, 0deg) + .5deg)) scale(calc(var(--scale, 1) * 1.02)); }
@keyframes floatDrift { 0% { transform: translate3d(-2px,0,0) rotate(-.2deg);} 100%{ transform: translate3d(2px,-4px,0) rotate(.2deg);} }
.mnote--sigil { top: -14px; right: -12px; }
.mnote--candle { bottom: -8px; left: -10px; }
.mnote--reliquary { top: -10px; left: -8px; }

/*──────────────── IMAGERY ────────────────*/
.fnh-page img { filter: contrast(.96) saturate(.9) sepia(.14); }

/*──────────────── UTILS ────────────────*/
.mt-1 { margin-top: .6rem; }
.mt-2 { margin-top: 1rem; }
.grid.auto { display: grid; gap: .9rem; }
@media (min-width: 740px) { .grid.auto { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .grid.auto { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/*──────────────── RESPONSIVE / ACCESSIBILITY ────────────────*/
@media (max-width: 720px) {
  .hud-nav { flex-wrap: wrap; gap: .7rem .9rem; }
  .card { padding: .9rem; }
}
/* Prefer more contrast? */
@media (prefers-contrast: more) {
  .fnh-page { background-blend-mode: multiply; }
  .card { background: color-mix(in oklab, var(--stone-1) 85%, black); }
  .hud-table thead th, .hud-key { color: #e8d6ba; }
  .statbar { border-color: #6c5a44; }
  .statbar span { box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset; }
}

/*──────────────── OPTIONAL THEMES ────────────────*/
/* Add .fnh-present or .fnh-past to <body> to bias tones */
.fnh-page.fnh-present {
  --stone-1:#2f2b33; --stone-0:#1f1a21; --text:#e7dccd; --text-2:#cbb497;
}
.fnh-page.fnh-past {
  --stone-1:#3e3845; --text:#fff1df; --text-2:#e2ceb1; --bar-fill:#e2c48b;
  /* lift overall brightness slightly for the “sunlit” look */
  background:
    radial-gradient(1000px 460px at 70% 42%, rgba(255,234,199,.22), transparent 60%),
    radial-gradient(1000px 520px at 20% 10%, rgba(255,223,184,.12), transparent 55%),
    linear-gradient(180deg, rgba(40,34,28,.25), rgba(18,14,12,.55)),
    var(--bg-img) center/cover no-repeat fixed;
  background-position: var(--bg-pos);
}

/* stat bars — colour pass */
.statbar.bar-hunger span{ --bar-fill:#c69a6a; }   /* coppery hunger */
.statbar.bar-body   span{ --bar-fill:#b24a3e; }   /* red body */
.statbar.bar-mind   span{ --bar-fill:#5b71b0; }   /* blue mind */

/* party board overlay */
.party-card figure{position:relative; overflow:hidden; border-radius:.5rem; border:1px solid var(--rule); background:rgba(0,0,0,.2)}
.party-card img{display:block; width:100%; height:auto; filter:contrast(.95) saturate(.9) sepia(.1)}
.party-card .card-info{
  position:absolute; inset:0; display:grid; align-content:end; gap:.25rem;
  padding:.6rem .7rem; background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.72));
  transform:translateY(20%); opacity:0; transition:opacity .18s ease, transform .18s ease;
  border-top:1px solid rgba(255,255,255,.06);
}
.party-card:focus-within .card-info,
.party-card:hover .card-info{opacity:1; transform:translateY(0)}
.party-card h3{margin:0 0 .2rem; color:var(--sky-warm); font-family:var(--head)}

/* ───────────────── PARTY SCREEN (F&H HUD look) ───────────────── */
.fnh-party {
  background: #181718;          
  border: 3px solid #8e8e97;     /* cool silver edge */
  padding: 1rem 1.2rem 1.1rem;
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 12px 26px rgba(0,0,0,0.5);
  margin:5em;
}

/* Ornamental silver corners */
.ui-frame::before,
.ui-frame::after {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    /* top-left */ radial-gradient(12px 12px at 10px 10px, #c9c9d3 0 55%, transparent 56%),
    /* top-right */ radial-gradient(12px 12px at calc(100% - 10px) 10px, #c9c9d3 0 55%, transparent 56%),
    /* bottom-left */ radial-gradient(12px 12px at 10px calc(100% - 10px), #c9c9d3 0 55%, transparent 56%),
    /* bottom-right */ radial-gradient(12px 12px at calc(100% - 10px) calc(100% - 10px), #c9c9d3 0 55%, transparent 56%);
  opacity:.9;
}
.ui-frame::after {
  background:
    /* filigree “L” brackets */
    conic-gradient(from 90deg at 14px 14px, #b9b9c3 0deg, #858595 40deg, transparent 40deg 360deg) top left/28px 28px no-repeat,
    conic-gradient(from 0deg at calc(100% - 14px) 14px, #b9b9c3 0deg, #858595 40deg, transparent 40deg 360deg) top right/28px 28px no-repeat,
    conic-gradient(from 180deg at 14px calc(100% - 14px), #b9b9c3 0deg, #858595 40deg, transparent 40deg 360deg) bottom left/28px 28px no-repeat,
    conic-gradient(from -90deg at calc(100% - 14px) calc(100% - 14px), #b9b9c3 0deg, #858595 40deg, transparent 40deg 360deg) bottom right/28px 28px no-repeat;
  mix-blend-mode: screen;
  opacity:.55;
}

/* Grid of four; tight like the screenshot */
.party-grid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0rem;
}
@media (max-width: 900px) {
  .party-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Slot anatomy */
.slot { display:grid; grid-template-rows: auto auto 1fr; }
.slot-top { margin: .1rem .2rem .3rem; line-height: 1.1; text-align: left; }
.slot .name {
  font-family: var(--head);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: #f0ece6;
  text-shadow: 0 0 2px rgba(255,255,255,0.2);
}
.slot .phobia {
  font-family: var(--head);
  font-size: .95rem;
  color: #d0c7b8;
  letter-spacing: .02em;
}

/* Portrait with slim metallic edge */
.portrait {
  display:block;
  width: 100%;
  height: auto;
  background:#131214;
  border-radius: .35rem;
  border: 0px solid #7e7e88;
  filter: contrast(.96) saturate(.88) sepia(.08);
}

/* Stats block aligns like the reference: label, bar, value */
.stats { margin-top: .35rem; }
.stats .row {
  display:grid;
  grid-template-columns: 80px 1fr 34px;
  align-items:center;
  gap:.5rem;
  margin: .18rem 0;
}

/* Labels coloured like the UI cues (Body blue, Mind red, Hunger muted) */
.stats .label { font-family: var(--head); font-size: .95rem; color: #cdbfa9; }
.stats .label.body   { color: #5e78b0; }  /* blue cue for Body */
.stats .label.mind   { color: #a44a3f; }  /* red cue for Mind  */
.stats .label.hunger { color: #bfa37a; }  /* copper/sand for Hunger */

/* Bars — thin, with subtle ticks; value at right */
.bar {
  height: .6rem;
  background: #1a1715;
  border: 1px solid #4b4036;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.bar::before{
  /* tick marks */
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px);
  pointer-events:none;
  opacity:.2;
}
.bar span{
  display:block; height:100%; width: calc(var(--p, .5) * 100%);
  background: linear-gradient(90deg, rgba(0,0,0,.15), transparent 20%),
              var(--bar-colour, #c6a677);
  box-shadow: inset 0 0 2px rgba(255,255,255,.12), 0 0 10px rgba(240, 220, 188, .12);
  transition: width .2s ease;
}

/* Per-bar colours (approx. from UI captures) */
.bar-hunger span { --bar-colour: #c2a074; } /* muted copper/grey */
.bar-body   span { --bar-colour: #5b71b0; } /* blue */
.bar-mind   span { --bar-colour: #a4453b; } /* red  */

.val {
  font-family: var(--head);
  color: #eae2d2;
  text-align:right;
  font-size: 1rem;
}

/* ——— Party grid already styled; add hover/focus frame on each slot ——— */
.slot { outline: none; }
.slot:focus-visible .portrait {
  box-shadow: 0 0 0 2px #c9c9d3, 0 6px 14px rgba(0,0,0,.6);
  border-color:#c9c9d3;
}

/* ——— Description plaque under the four ——— */
#party-screen .desc-panel {
  margin-top: 1rem;
  background: #101013;
  border: 3px solid #7e7e87;
  padding: .75rem .9rem .85rem;
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
#party-screen .desc-panel.ui-frame::before,
#party-screen .desc-panel.ui-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
#party-screen .desc-panel.ui-frame::before{
  background:
    radial-gradient(12px 12px at 10px 10px, #c9c9d3 0 55%, transparent 56%),
    radial-gradient(12px 12px at calc(100% - 10px) 10px, #c9c9d3 0 55%, transparent 56%),
    radial-gradient(12px 12px at 10px calc(100% - 10px), #c9c9d3 0 55%, transparent 56%),
    radial-gradient(12px 12px at calc(100% - 10px) calc(100% - 10px), #c9c9d3 0 55%, transparent 56%);
  opacity:.9;
}
#party-screen .desc-panel.ui-frame::after{
  background:
    conic-gradient(from 90deg at 14px 14px, #b9b9c3 0deg, #858595 40deg, transparent 40deg 360deg) top left/28px 28px no-repeat,
    conic-gradient(from 0deg at calc(100% - 14px) 14px, #b9b9c3 0deg, #858595 40deg, transparent 40deg 360deg) top right/28px 28px no-repeat,
    conic-gradient(from 180deg at 14px calc(100% - 14px), #b9b9c3 0deg, #858595 40deg, transparent 40deg 360deg) bottom left/28px 28px no-repeat,
    conic-gradient(from -90deg at calc(100% - 14px) calc(100% - 14px), #b9b9c3 0deg, #858595 40deg, transparent 40deg 360deg) bottom right/28px 28px no-repeat;
  mix-blend-mode: screen; opacity:.55;
}

#party-screen .party-desc { display: none; }
#party-screen .party-desc h3 {
  margin: .1rem 0 .4rem;
  font-family: var(--head);
  font-size: 1.05rem;
  color: #efe7d9;
  text-align: center;
}

/* Default (nothing hovered/focused): show the first block */
#party-screen .desc-panel .party-desc:first-of-type { display: block; }

/* Show the matching prose when a character is hovered or focused */
#party-screen:has(.slot[data-char="legarde"]:is(:hover,:focus-visible)) .party-desc { display:none; }
#party-screen:has(.slot[data-char="legarde"]:is(:hover,:focus-visible)) .party-desc[data-char="legarde"] { display:block; }

#party-screen:has(.slot[data-char="enki"]:is(:hover,:focus-visible)) .party-desc { display:none; }
#party-screen:has(.slot[data-char="enki"]:is(:hover,:focus-visible)) .party-desc[data-char="enki"] { display:block; }

#party-screen:has(.slot[data-char="darce"]:is(:hover,:focus-visible)) .party-desc { display:none; }
#party-screen:has(.slot[data-char="darce"]:is(:hover,:focus-visible)) .party-desc[data-char="darce"] { display:block; }

#party-screen:has(.slot[data-char="nosramus"]:is(:hover,:focus-visible)) .party-desc { display:none; }
#party-screen:has(.slot[data-char="nosramus"]:is(:hover,:focus-visible)) .party-desc[data-char="nosramus"] { display:block; }

/* ── PARTY SLAB: tighten portrait→stats gap, and make labels bigger/closer ── */

/* kill any vertical gap below portraits */
#party-screen .slot { row-gap: 0; }
#party-screen .portrait { display:block; margin: 0; }
#party-screen .stats { margin-top: 0; }

/* rows: label | bar | value — reduce spacing so numbers hug the bars */
#party-screen .stats .row{
  grid-template-columns: auto 1fr 28px;  /* auto-width label, compact value */                    /* slightly tighter stack */
}

/* labels: bigger, tighter to bar, crisp like the UI */
#party-screen .stats .label{
  font-family: var(--head);
  font-size: 1.05rem;                     /* bump size */
  line-height: 1;                         
  letter-spacing: .01em;
  margin-right: .1rem;                    /* tuck label toward bar */
  text-shadow: 0 0 1px rgba(0,0,0,.35);   /* small game-ish bite */
}

/* keep your colour cues */
#party-screen .stats .label.hunger { color:#bfa37a; } /* copper-sand */
#party-screen .stats .label.body   { color:#5e78b0; } /* blue */
#party-screen .stats .label.mind   { color:#a44a3f; } /* red */

/* values: a touch larger + closer */
#party-screen .stats .val{
  font-family: var(--head);
  font-size: 1.05rem;
  line-height: 1;
  color:#eae2d2;
  margin-left: .1rem;
}

/* ==== F&H party slab: tighten portrait → bars, enlarge labels, pull numbers in ==== */

/* remove vertical air between portrait and stats */
#party-screen .slot { row-gap: 0; }
#party-screen .stats { margin-top: .04rem; }           /* was ~.35rem */

/* rows: narrower gaps, slightly wider labels, tighter number column */
#party-screen .stats .row{
  display: grid;
  grid-template-columns: 76px 1fr 30px;                /* label | bar | value */
  align-items: center;                                   /* was ~.18rem */
}

/* bigger, closer labels (use your headline font like the game) */
#party-screen .stats .label{
  font-family: var(--head);
  font-size: 1.06rem;                                  /* up from ~.95rem */
  letter-spacing: .01em;
  line-height: 1;
}
#party-screen .stats .label.hunger { color: #bfa37a; } /* coppery tan */
#party-screen .stats .label.body   { color: #5b71b0; } /* blue */
#party-screen .stats .label.mind   { color: #a4453b; } /* red  */

/* thicker bars, same tick style */
#party-screen .bar{
  height: .74rem;                                      /* was .6rem */
  background: #1a1715;
  border: 1px solid #4b4036;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

#party-screen .bar::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 5px, transparent 5px 10px);
  opacity:.22; pointer-events:none;
}
#party-screen .bar span{
  display:block; height:100%; width: calc(var(--p, .5) * 100%);
  background: linear-gradient(90deg, rgba(0,0,0,.15), transparent 20%), var(--bar-colour, #c2a074);
  box-shadow: inset 0 0 2px rgba(255,255,255,.12), 0 0 10px rgba(240,220,188,.1);
  transition: width .2s ease;
}

/* numbers: a touch larger and tucked right up against the bar */
#party-screen .val{
  font-family: var(--head);
  font-size: 1.06rem;
  line-height: 1;
  text-align: right;
  margin-left: .1rem;
  transform: translateY(.5px);                         /* optical alignment */
}

#party-screen .portrait:hover{
  border: 1px solid #7e7e87;
  z-index: 1;
}

/* keep per-bar colours consistent with game cues */
#party-screen .bar-hunger span { --bar-colour:#c2a074; }
#party-screen .bar-body   span { --bar-colour:#5b71b0; }
#party-screen .bar-mind   span { --bar-colour:#a4453b; }

/* --- Make panels translucent without fading the text --- */

/* 1) Never use element opacity for this */
.card { opacity: 1; }

/* 2) Translucent generic cards (keeps your subtle gradient) */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28)),
    rgba(46,41,53,.8);           /* slate with ~28% see-through */
  backdrop-filter: saturate(90%) blur(.2px);
}

/* Base note */
.mnote{
  position:absolute; left:2.2vw; top:var(--top,20vh);
  width:28px; height:56px; color:var(--gold);
  transform-origin:50% 80%;
  opacity:0; pointer-events:auto; text-decoration:none;
  filter:drop-shadow(0 0 6px rgba(224,201,122,.55)) drop-shadow(0 0 12px rgba(224,201,122,.30));
  transform:translateX(0) translateY(0) rotate(var(--rot,0deg)) scale(var(--scale,.66));
  animation:
    note-rise var(--dur,20s) linear infinite var(--delay,0s),
    note-sway 6s ease-in-out infinite calc(var(--delay,0s)/2),
    note-glow 3.4s ease-in-out infinite calc(var(--delay,0s)/3);
}
.mnote:hover{ filter:drop-shadow(0 0 12px rgba(224,201,122,.95)) drop-shadow(0 0 22px rgba(224,201,122,.65)); }
.mnote img{ width:100%; height:100%; object-fit:contain; display:block; clip-path:none; }

@keyframes note-rise{
  0%  { opacity:0;  transform:translateY(12px)  rotate(var(--rot)) scale(var(--scale)); }
  10% { opacity:.95; }
  50% { opacity:1;  transform:translateY(-60px) rotate(calc(var(--rot)+1deg)) scale(var(--scale)); }
  90% { opacity:.85; }
  100%{ opacity:0;  transform:translateY(-120px) rotate(calc(var(--rot)+2deg)) scale(var(--scale)); }
}
@keyframes note-sway{
  0%,100%{ transform:translateX(0) rotate(var(--rot)) scale(var(--scale)); }
  50%    { transform:translateX(7px) rotate(calc(var(--rot) - 2deg)) scale(var(--scale)); }
}
@keyframes note-glow{
  0%,100%{ filter:drop-shadow(0 0 6px rgba(224,201,122,.55)) drop-shadow(0 0 12px rgba(224,201,122,.30)); }
  50%    { filter:drop-shadow(0 0 9px rgba(224,201,122,.9))  drop-shadow(0 0 16px rgba(224,201,122,.55)); }
}

/* Right-anchored (bottle) */
.mnote--cube{
  position:absolute; right:-72px; left:auto; bottom:10px;
  width:32px; pointer-events:auto; z-index:2;
}
@media (max-width:900px){ .mnote--cube{ right:-56px; width:60px; height:120px; } }
@media (max-width:640px){ .mnote--cube{ right:-44px; width:52px; height:104px; } }


  /* <= 900px: force 4 columns (override any 2-col rule you had) */
  @media (max-width: 900px){
    .fnh-party .party-grid{
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: .8rem;
    }
    .fnh-party{ padding: .8rem .8rem 1rem; margin: 0em;}
    .fnh-party .slot{ row-gap: .25rem; }
    .fnh-party .slot .name{
      font-size: clamp(.95rem, 2.4vw, 1.05rem);
      line-height: 1.05;
    }
    .fnh-party .slot .phobia{
      font-size: clamp(.78rem, 2.1vw, .9rem);
    }
    .fnh-party .portrait{
      border-radius: .3rem;
      box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.5);
    }
    .fnh-party .stats .row{
      grid-template-columns: 64px 1fr 28px;
      gap: .4rem;
      margin: .12rem 0;
    }
    .fnh-party .stats .label{ font-size: .88rem; }
    .fnh-party .bar{ height: .48rem; }
    .fnh-party .val{ font-size: .92rem; }
  }

  /* <= 640px: tighter again, still 4-up */
  @media (max-width: 640px){
    .fnh-party .party-grid{ gap: .6rem; }
    .fnh-party{ padding: .6rem .6rem .8rem; }
    .fnh-party .slot .name{ font-size: .9rem; }
    .fnh-party .slot .phobia{ font-size: .78rem; }
    .fnh-party .stats .row{
      grid-template-columns: 56px 1fr 24px;
      gap: .35rem;
    }
    .fnh-party .bar{ height: .42rem; }
    .fnh-party .val{ font-size: .9rem; }
  }

  /* <= 460px: smallest phones — still 4-up, compact labels/bars */
  @media (max-width: 460px){
    .fnh-party .party-grid{ gap: .5rem; }
    .fnh-party .slot .name{ font-size: .82rem; }
    .fnh-party .slot .phobia{ font-size: .7rem; }
    .fnh-party .stats .label{ font-size: .78rem; }
    .fnh-party .stats .row{
      grid-template-columns: 50px 1fr 22px;
      gap: .3rem;
    }
    .fnh-party .bar{ height: .36rem; }
    .fnh-party .val{ font-size: .86rem; }
  }

/* ===== F&H PARTY — small-screen fixes (keep laptop view untouched) ===== */

/* <= 900px: always 4-up, shrink type/bars, stop wrapping/overlap */
@media (max-width: 900px){
  #party-screen.fnh-party{
    margin: 0; padding: .7rem .7rem .9rem;
    background: #0b0b0b; /* darker slab reads like the game on phones */
  }

  /* override any earlier 2-col rule */
  #party-screen .party-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .55rem;
  }

  /* names/phobias: keep on two lines, no collision */
  #party-screen .slot-top{ line-height: 1.15; margin: .05rem .1rem .2rem; }
  #party-screen .slot-top .name{ font-size: 1rem; white-space: nowrap; }
  #party-screen .slot-top .phobia{ font-size: .82rem; white-space: nowrap; }

  /* portraits: uniform look when column is narrow */
  #party-screen .portrait{
    aspect-ratio: 3 / 5;        /* keeps all four visually consistent */
    object-fit: cover;
    border-radius: .28rem;
  }

  /* bars/labels: prevent wrap, let bar shrink */
  #party-screen .stats{ margin-top: .12rem; }
  #party-screen .stats .row{
    display: grid;
    grid-template-columns: 58px 1fr 26px; /* label | bar | value */
    gap: .30rem;
    align-items: center;
  }
  #party-screen .stats .row > .bar{ min-width: 0; } /* critical: allow shrink */
  #party-screen .stats .label,
  #party-screen .stats .val{
    white-space: nowrap;
    letter-spacing: 0;
  }
  #party-screen .stats .label{ font-size: .88rem; line-height: 1; }
  #party-screen .stats .val{ font-size: .9rem; line-height: 1; }
  #party-screen .bar{ height: .42rem; }
}

/* <= 640px: tighter still, maintain 4-up */
@media (max-width: 640px){
  #party-screen .party-grid{ gap: .45rem; }
  #party-screen .slot-top .name{ font-size: .92rem; }
  #party-screen .slot-top .phobia{ font-size: .76rem; }
  #party-screen .stats .row{
    grid-template-columns: 50px 1fr 22px;
    gap: .26rem;
  }
  #party-screen .bar{ height: .36rem; }
  #party-screen .stats .label{ font-size: .8rem; }
  #party-screen .stats .val{ font-size: .82rem; }
}

/* <= 480px: smallest phones; still 4-up, compact but readable */
@media (max-width: 480px){
  #party-screen .party-grid{ gap: .38rem; }
  #party-screen .slot-top .name{ font-size: .86rem; }
  #party-screen .slot-top .phobia{ font-size: .7rem; }
  #party-screen .stats .row{
    grid-template-columns: 46px 1fr 20px;
    gap: .22rem;
  }
  #party-screen .bar{ height: .32rem; }
  #party-screen .stats .label{ font-size: .76rem; }
  #party-screen .stats .val{ font-size: .78rem; }
}

/* ───────────── F&H: “faves” bestiary (matches Ma’habre skin) ───────────── */

#fnh-faves .fnh-bestiary{
  list-style:none; margin: .6rem 0 0; padding:0;
  display:grid; gap:.9rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ #fnh-faves .fnh-bestiary{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ #fnh-faves .fnh-bestiary{ grid-template-columns: 1fr; } }

#fnh-faves .mob{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18)),
    color-mix(in oklab, var(--stone-1) 62%, var(--stone-0) 38%);
  border:1px solid var(--rule);
  border-radius: calc(var(--r) * .7);
  padding:.65rem;
  position:relative; overflow:hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#fnh-faves .mob:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  border-color: color-mix(in oklab, var(--rule) 70%, white 30%);
}

/* image well */
#fnh-faves .mob-fig{
  margin:0; position:relative; overflow:hidden;
  background:#141215;
  border:1px solid color-mix(in oklab, var(--rule) 80%, black 20%);
  border-radius:.5rem;
}
#fnh-faves .mob-fig::after{
  /* faint ticks like your bars */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px);
  opacity:.12;
}
#fnh-faves .mob-fig img{
  display:block; width:100%;
  height: clamp(160px, 24vh, 240px);
  object-fit: contain; object-position: center;
  filter: contrast(.96) saturate(.9) sepia(.12);
  background:#0f0e10; /* for transparent sprites */
  transition: transform .18s ease, filter .18s ease;
}
#fnh-faves .mob:hover .mob-fig img{ transform: scale(1.01); filter: contrast(1) saturate(.95) sepia(.08); }

/* nameplate over the image bottom */
#fnh-faves .nameplate{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.35rem .5rem .4rem;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55) 40%, rgba(0,0,0,.75));
  border-top: 1px solid rgba(255,255,255,.06);
}
#fnh-faves .nameplate .name{
  font-family: var(--head);
  color: var(--sky-warm);
  font-size: clamp(1rem, 2vw, 1.15rem);
  letter-spacing:.01em; line-height:1;
  text-shadow: 0 0 8px rgba(244,215,178,.12);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#fnh-faves .nameplate .tag{
  font-family: var(--mono);
  font-size: .72rem; line-height: 1;
  color: var(--text-2);
  border:1px solid var(--rule);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10));
  padding:.18rem .46rem; border-radius:999px; white-space:nowrap;
}

/* quip body */
#fnh-faves .quip{
  color: var(--text-2);
  font-style: italic;
  margin: .55rem .1rem .1rem;
}

/* focus-visible for keyboard users */
#fnh-faves .mob:focus-within{
  outline:2px solid var(--brass-1); outline-offset:2px;
  box-shadow: 0 0 0 3px rgba(202,168,108,.25);
}

/* small screens: make nameplate stick out a touch more */
@media (max-width: 640px){
  #fnh-faves .nameplate{ padding:.32rem .45rem .38rem; }
  #fnh-faves .nameplate .name{ font-size: 1rem; }
}

/* optional: silver filigree corners on the card itself (matches your ui-frame style) */
#fnh-faves .mob.ui-frame::before,
#fnh-faves .mob.ui-frame::after{ content:""; position:absolute; inset:0; pointer-events:none; }

/* —— Fear & Hunger styled coin sprite —— */
#coin-widget .coin-wrap{
  display:flex; align-items:center; gap:1rem;
}
#coin-widget .readout{
  font-family: var(--head); color: var(--text-2);
}
#coin-widget .readout .label{ color: var(--sand-2); margin-right:.35rem }

#coin-widget .coin{
  /* sprite constants for your sheet */
  --sheet-w: 960px;
  --sheet-h: 768px;
  --cols: 6;
  --rows: 4;
  --frame-w: calc(var(--sheet-w) / var(--cols));  /* 160px  */
  --frame-h: calc(var(--sheet-h) / var(--rows));  /* 192px  */

  width: var(--frame-w);
  height: var(--frame-h);
  background-image: url("/images/fandom/coin_flip.png"); /* <- your file */
  background-size: var(--sheet-w) var(--sheet-h);
  background-position: 0 0;
  background-repeat: no-repeat;
  border: 2px solid #8e8e97;          /* F&H metallic edge */
  border-radius: .35rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 8px 20px rgba(0,0,0,.5);
  cursor: pointer;
  outline: none;
  transition: filter .15s ease, transform .1s ease;
}
#coin-widget .coin:hover{ filter: brightness(1.06); transform: translateY(-1px) }
#coin-widget .coin:focus-visible{ box-shadow: 0 0 0 2px #c9c9d3, 0 8px 20px rgba(0,0,0,.6) }

/* coin area is transparent */
.fnh-coin-wrap{
  display:grid; place-items:center;
  padding: .6rem 0;
  background: transparent;
}

/* scale visually but keep the canvas transparent + crisp */
#fnh-coin{
  width: clamp(120px, 18vw, 192px);
  height: auto;            /* CSS height follows CSS width */
  background: transparent; /* no white tile */
  cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45))
          drop-shadow(0 0 6px rgba(244,215,178,.15));
}
#fnh-coin:focus-visible{
  outline: 2px dotted var(--brass-1);
  outline-offset: 4px;
}

/* optional: respect reduced motion (just show a single frame) */
@media (prefers-reduced-motion: reduce){
  #fnh-coin{ cursor: default; }
}