/* Farever Skills. Desktop first: the game's Talents screen in the middle, on its own parchment, the picked talent on
   the right. Kult's dark shell round it; each class tab carries that class's colour. */
:root{
  color-scheme:dark;
  --ink:24 10% 5%; --card:24 8% 9%; --fill:24 8% 13%; --line:24 7% 21%;
  --fg:30 20% 96%; --muted:28 8% 64%; --dim:28 6% 44%;
  --pink:299 99% 74%; --acid:75 100% 71%; --violet:259 95% 64%; --danger:354 85% 58%;
  --paper:24 22% 82%; --paper2:22 18% 74%; --cream:30 45% 93%; --stone:20 6% 58%; --brown:20 14% 30%;
  --font-sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-serif:"Noto Serif",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:hsl(24 8% 26%) transparent}
html,body{margin:0;height:100%}
[hidden]{display:none!important}
body{background:hsl(var(--ink));color:hsl(var(--fg));font-family:var(--font-sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid hsl(var(--violet));outline-offset:2px}

.fv{--c:var(--pink);height:calc(100dvh - var(--kult-nav-height, 0px));display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,25vw,380px);grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"top top" "main panel" "fine fine";gap:10px 12px;padding:10px 12px 8px;opacity:0;transition:opacity .2s}
body.ready .fv{opacity:1}

/* ---------- top bar ---------- */
.fv-top{grid-area:top;display:flex;align-items:center;gap:14px;min-width:0}
.fv-brand{display:flex;align-items:center;gap:10px;min-width:0}
.fv-tile{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:hsl(var(--pink));color:hsl(var(--ink))}
.fv-tile svg{width:19px;height:22px}
.fv-brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.fv-brand-text b{font-size:16px;font-weight:700;white-space:nowrap}
.fv-brand-text small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--muted));white-space:nowrap}
.fv-budget{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.fv-pool{display:flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--line));white-space:nowrap}
.fv-pool b{font-family:var(--font-mono);font-size:17px;font-weight:700;color:hsl(var(--acid));font-variant-numeric:tabular-nums}
.fv-pool span{font-size:12px;color:hsl(var(--muted))}
.fv-pool.out b{color:hsl(var(--danger))}
.fv-level{display:flex;align-items:center;gap:6px;padding:3px 4px 3px 12px;border-radius:999px;background:hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--line));font-size:12px;color:hsl(var(--muted))}
.fv-level b{min-width:30px;text-align:center;font-family:var(--font-mono);font-size:16px;font-weight:700;color:hsl(var(--fg));font-variant-numeric:tabular-nums}
.fv-step{width:26px;height:26px;border-radius:50%;border:0;background:hsl(var(--fill));font-size:16px;line-height:1;display:grid;place-items:center}
.fv-step:hover:not([aria-disabled]){background:hsl(var(--line))}
.fv-step[aria-disabled]{opacity:.35;cursor:default}
.fv-actions{display:flex;gap:8px}
.fv-btn{height:36px;padding:0 14px;border-radius:10px;border:0;background:hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--line));font-weight:600;white-space:nowrap}
.fv-btn:hover:not([aria-disabled]){background:hsl(var(--fill))}
.fv-btn.primary{background:hsl(var(--pink));color:hsl(var(--ink));box-shadow:none}
.fv-btn.primary:hover:not([aria-disabled]){filter:brightness(1.07)}
.fv-btn.warn{background:hsl(var(--danger));color:hsl(var(--fg));box-shadow:none}
.fv-btn[aria-disabled]{opacity:.4;cursor:default}

/* ---------- tabs and the parchment stage ---------- */
.fv-main{grid-area:main;min-width:0;min-height:0;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--line))}
.fv-tabs{flex:none;display:flex;align-items:stretch;gap:2px;padding:6px 6px 0;border-bottom:1px solid hsl(var(--line))}
.fv-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0;padding:7px 4px 8px;border:0;border-radius:10px 10px 0 0;background:transparent;color:hsl(var(--muted));position:relative}
.fv-tab b{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.fv-tab span{font-family:var(--font-mono);font-size:19px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;color:hsl(var(--fg))}
.fv-tab small{font-size:10.5px;color:hsl(var(--dim));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fv-tab:hover{background:hsl(var(--fill) / .6)}
.fv-tab[aria-selected="true"]{background:hsl(var(--fill));color:hsl(var(--c))}
.fv-tab[aria-selected="true"]::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:2px;background:hsl(var(--c))}
.fv-scroll{flex:1;min-height:0;display:grid;place-items:center;overflow:auto;container-type:size;position:relative;
  background:radial-gradient(70% 60% at 50% 30%, hsl(var(--paper)), hsl(var(--paper2)) 90%)}
.fv-stage{--u:min(calc(100cqw / var(--sw)), calc(100cqh / var(--sh)));position:relative;width:calc(var(--sw) * var(--u));height:calc(var(--sh) * var(--u));flex:none}
.fv-cells{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fv-cells .wire{fill:none;stroke:hsl(var(--brown) / .55);stroke-width:2.5}
.fv-cells .wire.on{stroke:hsl(var(--c));stroke-width:4}
.fv-cells .band{stroke:hsl(30 30% 96% / .45);stroke-width:2}
.fv-cells .cell{fill:hsl(var(--stone));stroke:hsl(20 6% 50%);stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 3px 2px hsl(20 20% 20% / .25))}
.fv-cells .cell.open{fill:hsl(var(--cream));stroke:hsl(22 16% 72%)}
.fv-cells .cell.got{fill:hsl(var(--cream));stroke:hsl(var(--c));stroke-width:4}
.fv-cells .inner{fill:none;stroke:hsl(30 40% 98% / .7);stroke-width:2;stroke-linejoin:round}
.fv-cells .cell:not(.open):not(.got) + .inner{stroke:hsl(20 6% 66% / .6)}
.fv-nodes{position:absolute;inset:0}
.fv-gate{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:calc(6 * var(--u));font-family:var(--font-serif);font-weight:700;font-size:max(calc(30 * var(--u)), 11px);color:hsl(var(--brown));pointer-events:none}
.fv-gate i{width:calc(20 * var(--u));height:calc(20 * var(--u));background:currentColor;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.fv-avail{position:absolute;left:calc(26 * var(--u));top:calc(26 * var(--u));display:flex;align-items:center;gap:calc(8 * var(--u));padding:calc(8 * var(--u)) calc(16 * var(--u));border-radius:calc(8 * var(--u));
  background:hsl(20 8% 36% / .92);color:hsl(30 30% 94%);font-weight:600;font-size:max(calc(20 * var(--u)), 10px);pointer-events:none}
.fv-avail b{color:hsl(var(--acid));font-family:var(--font-mono)}

/* a talent: the game's round icon, grey until it holds a point */
.fv-talent{position:absolute;width:calc(var(--d) * var(--u));height:calc(var(--d) * var(--u));transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;
  background:var(--icon) center/cover no-repeat;box-shadow:0 0 0 calc(3 * var(--u)) hsl(20 10% 22% / .85),0 calc(3 * var(--u)) calc(6 * var(--u)) hsl(20 20% 10% / .4);
  filter:grayscale(1) brightness(1.08) contrast(.92);transition:transform .1s,filter .15s,box-shadow .15s}
.fv-talent:hover{transform:translate(-50%,-50%) scale(1.07);filter:grayscale(.15)}
.fv-talent.got{filter:none;box-shadow:0 0 0 calc(3 * var(--u)) hsl(var(--c)),0 0 calc(16 * var(--u)) hsl(var(--c) / .55)}
.fv-talent.shut{filter:grayscale(1) brightness(.82) contrast(.9);opacity:.92}
.fv-talent.shut:hover{filter:grayscale(1) brightness(.95)}
.fv-talent.sel{box-shadow:0 0 0 calc(3 * var(--u)) hsl(var(--c)),0 0 0 calc(8 * var(--u)) hsl(30 40% 98%),0 0 calc(14 * var(--u)) hsl(20 20% 10% / .5)}
.fv-talent.root{box-shadow:0 0 0 calc(4 * var(--u)) hsl(20 10% 22% / .85)}
.fv-count{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-sans);font-weight:700;font-size:max(calc(23 * var(--u)), 9px);color:hsl(0 0% 100%);pointer-events:none;
  text-shadow:0 0 calc(3 * var(--u)) hsl(20 30% 8%),0 1px 2px hsl(20 30% 8%),0 0 1px hsl(20 30% 8%)}

/* ---------- details panel ---------- */
.fv-panel{grid-area:panel;min-height:0;overflow:auto;border-radius:16px;background:hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--line));display:flex;flex-direction:column}
.fv-tree{flex:none;padding:16px 18px 14px;background:linear-gradient(135deg, hsl(var(--c) / .55), hsl(var(--c) / .18));border-bottom:1px solid hsl(var(--line))}
.fv-tree small{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--fg) / .8)}
.fv-tree h2{font-family:var(--font-serif);font-size:24px;line-height:1.15;font-weight:700;margin:2px 0 6px}
.fv-tree p{font-size:13px;color:hsl(var(--fg) / .88)}
.fv-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.fv-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--c))}
.fv-head{display:flex;align-items:center;gap:14px}
.fv-big{flex:none;width:64px;height:64px;border-radius:50%;background:var(--icon) center/cover no-repeat;box-shadow:0 0 0 3px hsl(var(--c))}
.fv-big.off{filter:grayscale(1);box-shadow:0 0 0 3px hsl(var(--line))}
.fv-head h2{font-size:20px;line-height:1.15;font-weight:700}
.fv-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fv-tag{padding:1px 8px;border-radius:999px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:hsl(var(--fill));color:hsl(var(--muted))}
.fv-text{font-size:15px;line-height:1.5}
.fv-note{font-size:13px;color:hsl(var(--muted))}
.fv-ranks{display:flex;flex-direction:column;gap:6px}
.fv-ranks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border-radius:10px;background:hsl(var(--fill));font-size:13.5px;line-height:1.4;color:hsl(var(--muted))}
.fv-ranks li b{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding-top:2px;color:hsl(var(--dim))}
.fv-ranks li.got{color:hsl(var(--fg));box-shadow:0 0 0 1.5px hsl(var(--c) / .9)}
.fv-ranks li.got b{color:hsl(var(--c))}
.fv-ranks li.unknown{font-style:italic}
.fv-need{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:hsl(var(--muted))}
.fv-need::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:hsl(var(--dim))}
.fv-need.ok::before{background:hsl(var(--acid))}
.fv-need.bad{color:hsl(var(--fg))}
.fv-need.bad::before{background:hsl(var(--danger))}
.fv-spend{display:flex;align-items:center;gap:10px}
.fv-spend .fv-btn{flex:1;height:42px}
.fv-num{min-width:56px;text-align:center;font-family:var(--font-mono);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.fv-intro li{position:relative;padding-left:16px;margin-top:8px;color:hsl(var(--fg) / .88)}
.fv-intro li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:hsl(var(--pink))}
.fv-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fv-paths div{padding:8px 4px;border-radius:10px;background:hsl(var(--fill));text-align:center}
.fv-paths b{display:block;font-family:var(--font-mono);font-size:18px;font-weight:700;color:hsl(var(--c));font-variant-numeric:tabular-nums}
.fv-paths span{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted))}
.fv-src{margin-top:auto;font-size:12px;color:hsl(var(--muted))}
.fv-src a{color:hsl(var(--fg) / .85)}

.fv-fine{grid-area:fine;font-size:11.5px;color:hsl(var(--dim));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-toast{position:fixed;left:50%;bottom:118px;transform:translateX(-50%);z-index:5;max-width:min(92vw,560px);padding:10px 16px;border-radius:12px;background:hsl(var(--fg));color:hsl(var(--ink));font-weight:600;box-shadow:0 12px 30px hsl(0 0% 0% / .5)}

/* ---------- class picker in the top bar ---------- */
.fv-classes{display:flex;gap:4px;padding:3px;border-radius:12px;background:hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--line))}
.fv-cls{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 8px;border:0;border-radius:9px;background:transparent;color:hsl(var(--muted));font-weight:600;font-size:13px;white-space:nowrap}
.fv-cls i{width:20px;height:20px;border-radius:50%;background:var(--icon) center/cover no-repeat;filter:grayscale(.9);box-shadow:0 0 0 1.5px hsl(var(--c) / .7)}
.fv-cls:hover{background:hsl(var(--fill))}
.fv-cls[aria-selected="true"]{background:hsl(var(--c) / .2);color:hsl(var(--fg));box-shadow:inset 0 0 0 1.5px hsl(var(--c))}
.fv-cls[aria-selected="true"] i{filter:none}
.fv-level input{width:40px;height:28px;border:0;border-radius:8px;background:hsl(var(--fill));text-align:center;font-family:var(--font-mono);font-size:15px;font-weight:700;color:hsl(var(--fg));-moz-appearance:textfield}
.fv-level input::-webkit-outer-spin-button,.fv-level input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- skills and weapons views: the game's beige panels ---------- */
.fv-view{flex:1;min-height:0;overflow:auto;padding:16px 18px 18px;background:radial-gradient(70% 60% at 50% 20%, hsl(var(--paper)), hsl(var(--paper2)) 92%);color:hsl(20 18% 16%)}
.fv-sec{display:flex;align-items:baseline;gap:10px;margin:4px 0 10px}
.fv-sec h3{font-family:var(--font-serif);font-size:18px;font-weight:700;color:hsl(20 20% 18%)}
.fv-sec small{font-size:12.5px;color:hsl(20 10% 34%)}
.fv-sec + .fv-sec,.fv-grid + .fv-sec,.fv-wslots + .fv-sec,.fv-mech + .fv-sec,.fv-pass + .fv-sec{margin-top:20px}
.fv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.fv-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:hsl(var(--cream) / .78);box-shadow:0 0 0 1.5px hsl(22 16% 72%),0 2px 4px hsl(20 20% 20% / .12);cursor:pointer;text-align:left;border:0;color:inherit}
.fv-card:hover{box-shadow:0 0 0 2px hsl(var(--c) / .8),0 2px 6px hsl(20 20% 20% / .18)}
.fv-card.sel{box-shadow:0 0 0 2.5px hsl(var(--c)),0 4px 10px hsl(20 20% 20% / .2)}
.fv-card.on{background:hsl(var(--cream));box-shadow:0 0 0 2px hsl(var(--c)),0 2px 6px hsl(var(--c) / .25)}
.fv-card.shut{opacity:.62;background:hsl(22 12% 80% / .7)}
.fv-card.shut .fv-sq{filter:grayscale(1)}
.fv-chead{display:flex;align-items:center;gap:10px}
.fv-sq{flex:none;width:48px;height:48px;border-radius:7px;background:var(--icon) center/cover no-repeat;box-shadow:0 0 0 2px hsl(20 14% 30% / .55)}
.fv-sq.round{border-radius:50%}
.fv-chead div{flex:1;min-width:0}
.fv-chead b{display:block;font-size:15px;line-height:1.2}
.fv-chead small{font-size:11.5px;color:hsl(20 10% 34%)}
.fv-key{flex:none;min-width:30px;height:26px;padding:0 7px;border-radius:7px;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:12px;background:hsl(20 14% 24%);color:hsl(30 30% 94%)}
.fv-key.off{background:transparent;color:hsl(20 10% 38%);box-shadow:inset 0 0 0 1.5px hsl(20 12% 60%)}
.fv-ctext{font-size:13px;line-height:1.4;color:hsl(20 16% 22%)}
.fv-runes{display:flex;gap:6px}
.fv-rune{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 6px;border:0;border-radius:8px;background:hsl(22 18% 86%);color:hsl(20 16% 26%);font-size:11.5px;font-weight:600;line-height:1.15;text-align:left}
.fv-rune i{flex:none;width:24px;height:24px;background:var(--icon) center/contain no-repeat;filter:grayscale(.7) opacity(.75)}
.fv-rune span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fv-rune:hover{background:hsl(22 22% 80%)}
.fv-rune[aria-pressed="true"]{background:hsl(var(--c) / .22);box-shadow:inset 0 0 0 1.5px hsl(var(--c));color:hsl(20 20% 14%)}
.fv-rune[aria-pressed="true"] i{filter:none}
.fv-mech{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fv-bead{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 6px;border:0;border-radius:999px;background:hsl(var(--cream) / .8);box-shadow:0 0 0 1.5px hsl(22 16% 72%);color:inherit;font-weight:600;font-size:13px}
.fv-bead i{width:32px;height:32px;border-radius:50%;background:var(--icon) center/cover no-repeat}
.fv-bead[aria-pressed="true"]{background:hsl(var(--cream));box-shadow:0 0 0 2px hsl(var(--c))}
.fv-bead.shut{opacity:.55}
.fv-bead.shut i{filter:grayscale(1)}
.fv-mech small{font-size:12px;color:hsl(20 10% 34%)}
.fv-pass{display:flex;flex-wrap:wrap;gap:8px}
.fv-pass .fv-bead{cursor:pointer}
.fv-wslots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fv-wslot{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;border:0;background:hsl(22 16% 76% / .6);box-shadow:inset 0 0 0 1.5px hsl(22 14% 66%);text-align:left;color:inherit;cursor:pointer;min-height:118px}
.fv-wslot:hover{box-shadow:inset 0 0 0 2px hsl(var(--c) / .8)}
.fv-wslot.sel{box-shadow:inset 0 0 0 2.5px hsl(var(--c))}
.fv-wslot.shut{opacity:.6;cursor:default}
.fv-wslot h4{margin:0;font-family:var(--font-serif);font-size:14px;font-weight:700;color:hsl(20 20% 22%);display:flex;justify-content:space-between;gap:6px}
.fv-wslot h4 small{font-family:var(--font-sans);font-weight:600;font-size:11px;color:hsl(20 10% 38%)}
.fv-wrow{display:flex;align-items:center;gap:10px}
.fv-port{--icon:none;flex:none;width:52px;height:52px;border-radius:8px;background:hsl(42 50% 70%) var(--icon) center/86% no-repeat;box-shadow:0 0 0 2px hsl(20 14% 30% / .5)}
.fv-port.empty{background:hsl(22 14% 70%);box-shadow:inset 0 0 0 2px hsl(22 12% 62%)}
.fv-wrow b{font-size:14px;line-height:1.2}
.fv-wrow small{display:block;font-size:11.5px;color:hsl(20 10% 34%)}
.fv-icons{display:flex;gap:5px;flex-wrap:wrap}
.fv-icons i{width:30px;height:30px;border-radius:5px;background:var(--icon) center/cover no-repeat;box-shadow:0 0 0 1.5px hsl(20 14% 30% / .45)}
.fv-icons i.round{border-radius:50%}
.fv-icons i.dim{filter:grayscale(1) opacity(.5)}
.fv-picks{display:flex;gap:6px}
.fv-pick{flex:1;display:flex;align-items:center;gap:6px;padding:4px 6px;border:0;border-radius:8px;background:hsl(22 18% 86%);font-size:11.5px;font-weight:600;color:hsl(20 16% 26%);text-align:left;cursor:pointer}
.fv-pick i{flex:none;width:26px;height:26px;border-radius:5px;background:var(--icon) center/cover no-repeat}
.fv-pick.empty i{background:hsl(22 12% 74%)}
.fv-pick.shut{opacity:.55;cursor:default}
.fv-pick.sel{box-shadow:inset 0 0 0 2px hsl(var(--c))}
.fv-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.fv-chip{height:28px;padding:0 11px;border:0;border-radius:999px;background:hsl(22 18% 86%);font-size:12px;font-weight:600;color:hsl(20 16% 26%)}
.fv-chip[aria-pressed="true"]{background:hsl(20 14% 24%);color:hsl(30 30% 94%)}
.fv-wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.fv-wcard{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:12px;background:hsl(var(--cream) / .78);box-shadow:0 0 0 1.5px hsl(22 16% 72%);text-align:left;color:inherit;cursor:pointer}
.fv-wcard:hover{box-shadow:0 0 0 2px hsl(var(--c) / .8)}
.fv-wcard.sel{box-shadow:0 0 0 2.5px hsl(var(--c))}
.fv-wcard.shut{opacity:.6}
.fv-wcard.shut .fv-port{filter:grayscale(.8)}
.fv-wcard b{font-size:13.5px;line-height:1.2}
.fv-wcard small{display:block;font-size:11px;color:hsl(20 10% 34%)}
.fv-wcard .fv-key{margin-left:auto;font-size:10.5px;height:22px}

/* ---------- the hotbar, as the game draws it ---------- */
.fv-hud{flex:none;display:flex;justify-content:center;align-items:flex-end;gap:12px;padding:10px 12px 12px;background:linear-gradient(180deg, hsl(var(--card)), hsl(24 10% 7%));border-top:1px solid hsl(var(--line));overflow-x:auto}
.fv-quad{display:grid;grid-template-columns:repeat(2,40px);gap:5px}
.fv-barp{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:12px;background:hsl(28 26% 84%);box-shadow:inset 0 0 0 2px hsl(26 18% 70%),0 3px 10px hsl(0 0% 0% / .4);position:relative}
.fv-barp::before,.fv-barp::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:hsl(26 14% 58%)}
.fv-barp::before{left:5px} .fv-barp::after{right:5px}
.fv-slot{--icon:none;position:relative;width:50px;height:50px;padding:0;border:0;border-radius:7px;background:hsl(26 16% 66%) var(--icon) center/cover no-repeat;box-shadow:0 0 0 2px hsl(26 14% 46% / .6);cursor:pointer;transition:transform .1s}
.fv-quad .fv-slot{width:40px;height:40px}
.fv-slot:hover{transform:translateY(-2px);box-shadow:0 0 0 2px hsl(var(--c))}
.fv-slot.empty{background-image:none}
.fv-slot.shut{background:hsl(26 12% 58%);cursor:default;opacity:.7}
.fv-slot.shut:hover{transform:none;box-shadow:0 0 0 2px hsl(26 14% 46% / .6)}
.fv-slot.sig{width:62px;height:62px;margin:0 6px;box-shadow:0 0 0 3px hsl(28 26% 84%),0 0 0 6px hsl(6 46% 46%)}
.fv-slot.sel{box-shadow:0 0 0 3px hsl(var(--acid))}
.fv-slot kbd{position:absolute;left:3px;bottom:3px;min-width:15px;padding:0 3px;border-radius:4px;background:hsl(20 14% 20% / .9);font-family:var(--font-sans);font-size:10.5px;font-weight:700;line-height:15px;color:hsl(30 30% 96%);text-align:center}
.fv-slot.sig kbd{font-size:12px;line-height:17px}
.fv-slot .lock{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;font-weight:700;color:hsl(20 18% 22%)}
.fv-slot .rn{position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;background:hsl(28 26% 92%) var(--rune) center/cover no-repeat;box-shadow:0 0 0 1.5px hsl(26 14% 40%)}
.fv-slot .txt{position:absolute;inset:0 0 auto;padding-top:6px;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:hsl(20 18% 24%);text-transform:uppercase;letter-spacing:.04em}

.fv-panel .fv-runes-list{display:flex;flex-direction:column;gap:6px}
.fv-rl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border:0;border-radius:10px;background:hsl(var(--fill));text-align:left;color:hsl(var(--muted));font-size:13px;line-height:1.4}
.fv-rl i{width:30px;height:30px;background:var(--icon) center/contain no-repeat}
.fv-rl b{display:block;color:hsl(var(--fg));font-size:13.5px}
.fv-rl:hover{background:hsl(var(--line))}
.fv-rl[aria-pressed="true"]{box-shadow:0 0 0 1.5px hsl(var(--c));color:hsl(var(--fg))}
.fv-vals{display:flex;flex-direction:column;gap:3px;font-size:13px;color:hsl(var(--fg) / .9)}
.fv-vals li{padding-left:12px;position:relative}
.fv-vals li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;transform:rotate(45deg);background:hsl(var(--c))}
.fv-wbig{flex:none;width:72px;height:72px;border-radius:12px;background:hsl(42 50% 70%) var(--icon) center/88% no-repeat;box-shadow:0 0 0 3px hsl(var(--c))}
.fv-sk{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:hsl(var(--fill))}
.fv-sk header{display:flex;align-items:center;gap:10px}
.fv-sk header i{flex:none;width:36px;height:36px;border-radius:6px;background:var(--icon) center/cover no-repeat}
.fv-sk header i.round{border-radius:50%}
.fv-sk header b{display:block;font-size:14px}
.fv-sk header small{font-size:11.5px;color:hsl(var(--muted))}
.fv-sk p{font-size:13px;line-height:1.4}
.fv-sk .fv-note{font-size:12px}
.fv-acts{display:flex;flex-wrap:wrap;gap:8px}
.fv-acts .fv-btn{flex:1;height:40px}
.fv-plist{display:flex;flex-direction:column;gap:6px}
.fv-plist button{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px 6px 6px;border:0;border-radius:10px;background:hsl(var(--fill));text-align:left}
.fv-plist button:hover{background:hsl(var(--line))}
.fv-plist button i{flex:none;width:36px;height:36px;border-radius:6px;background:var(--icon) center/cover no-repeat}
.fv-plist button i.round{border-radius:50%}
.fv-plist button span{flex:1;min-width:0;font-weight:600}
.fv-plist button small{font-family:var(--font-mono);font-size:11px;color:hsl(var(--muted))}

/* ---------- short laptop screens: slimmer tabs and hotbar, so the tree keeps its height ---------- */
@media (max-height:820px) and (min-width:901px){
  .fv-tab{flex-direction:row;justify-content:center;align-items:baseline;gap:8px;padding:6px 4px 7px}
  .fv-tab span{font-size:16px}
  .fv-hud{padding:6px 10px 7px;gap:10px}
  .fv-slot{width:42px;height:42px}
  .fv-slot.sig{width:52px;height:52px}
  .fv-quad{grid-template-columns:repeat(2,33px);gap:4px}
  .fv-quad .fv-slot{width:33px;height:33px}
  .fv-quad .fv-slot .txt{display:none}
  .fv-barp{padding:6px 10px;gap:6px}
}

/* ---------- narrow screens: the tree on top, the panel under it ---------- */
@media (max-width:900px){
  body{overflow:auto}
  .fv{height:auto;min-height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "panel" "fine";padding-bottom:84px}
  .fv-top{flex-wrap:wrap}
  .fv-budget{margin-left:0;justify-content:flex-start}
  .fv-main{height:auto}
  .fv-scroll{height:min(70vh,560px);flex:none}
  .fv-view{flex:none;overflow:visible}
  .fv-hud{order:1;justify-content:center;padding:8px 4px;border-top:0;border-bottom:1px solid hsl(var(--line))}
  .fv-scroll,.fv-view{order:2}
  .fv-quad{display:none}
  .fv-barp{gap:3px;padding:6px 6px}
  .fv-barp::before,.fv-barp::after{display:none}
  .fv-slot{width:32px;height:32px;border-radius:5px}
  .fv-slot.sig{width:40px;height:40px;margin:0 2px}
  .fv-slot kbd{font-size:9px;line-height:12px;min-width:12px;left:2px;bottom:2px}
  .fv-slot .rn{width:14px;height:14px}
  .fv-toast{bottom:84px}
  .fv-classes{order:3;width:100%;overflow-x:auto}
  .fv-wslots{grid-template-columns:minmax(0,1fr)}
  .fv-panel{overflow:visible}
  .fv-fine{white-space:normal}
}