#hud .inventory-tabs button { width:20%; }
#hud .inventory-grid.firemaking-open { width:min(364px,calc(100vw - 24px));height:min(710px,calc(100dvh - 180px));max-height:calc(100dvh - 180px); }
#hud .firemaking-open #skills-panel { display:flex;flex-direction:column;padding:0;overflow:hidden; }
#hud #skills-overview[hidden],#hud .firemaking-open #skills-panel[hidden] { display:none; }
#hud #firemaking-panel { --ink:#ebe0ca;--muted:#bdb29a;--rubric:#f4d59b;--fire-ink:#ebe0ca;--fire-muted:#bdb29a;display:flex;flex:1;flex-direction:column;min-height:0;padding:10px;gap:8px;color:var(--fire-ink);font:12px Georgia,serif;background:radial-gradient(ellipse at 50% 0,#a16d3530,transparent 66%),linear-gradient(135deg,#484539,#333a33);box-shadow:inset 0 0 0 1px #a78a5888,inset 0 0 0 3px #252b2555; }
#hud #firemaking-panel[hidden],#hud #firemaking-panel [hidden],#hud .firemaking-status[hidden] { display:none; }
#hud #firemaking-panel button { border:1px solid #a4895e77;border-radius:3px;padding:7px 8px;background:#252c255c;color:var(--fire-ink);font:11px Georgia,serif;cursor:pointer;transition:background-color .16s,border-color .16s,box-shadow .16s; }
#hud #firemaking-panel button:hover:not(:disabled),#hud #firemaking-panel button[aria-pressed=true] { border-color:#d7ac69;background:#b781402d; }
#hud #firemaking-panel button:disabled { cursor:default;opacity:.55; }
#hud #firemaking-panel :is(button,select,summary):focus-visible { outline:2px solid #ffcc7e;outline-offset:2px; }
.firemaking-heading { display:flex;align-items:center;gap:8px;flex:none; }
#hud #firemaking-panel .firemaking-back { align-self:flex-start;padding:3px 0;border:0;background:none;color:var(--fire-muted);font-size:10px; }
.firemaking-heading>.icon { width:38px;height:38px; }
.firemaking-heading>div { flex:1; }
#hud .firemaking-heading h3 { margin:0;color:#f4d59b;font:19px Georgia,serif; }
.firemaking-heading span { display:block;font-size:10px;color:var(--fire-muted);margin-top:3px; }
#hud #firemaking-panel .firemaking-heading button { padding:5px; }
.firemaking-heading button .icon { width:22px;height:22px; }
.firemaking-xp { font-size:10px;line-height:1.5;color:var(--fire-muted); }
.firemaking-xp progress { margin-bottom:4px; }
.firemaking-pages { display:flex;gap:4px;flex:none; }
#hud #firemaking-panel .firemaking-pages button { flex:1;min-width:0;min-height:31px;padding:5px 2px; }
#hud #firemaking-panel .firemaking-pages button[aria-pressed=true] { color:#ffdc9e;background:linear-gradient(#b47b4055,#b47b4022);box-shadow:inset 0 -2px #d1a165; }
.firemaking-content { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ad8a5755 transparent;scrollbar-gutter:stable; }
#hud #firemaking-panel h4 { margin:3px 0;color:#f0d2a0;font:16px Georgia,serif; }
#hud #firemaking-panel p { font-size:11px;line-height:1.45; }
.firemaking-hero { display:flex;align-items:center;gap:7px;padding:5px 2px 7px; }
.firemaking-hero>.icon { width:64px;height:64px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 2px #191e1a80); }
.firemaking-hero small { font-size:9px;letter-spacing:.04em;color:#d2b68a; }
#hud #firemaking-panel .firemaking-hero p { margin:4px 0 0;font-size:10px;color:var(--fire-muted); }
.firemaking-metrics { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:7px 0;margin:3px 0 10px;background:#20281f55;border:1px solid #a7874d55; }
.firemaking-metrics>span { min-width:0;text-align:center; }
.firemaking-metrics>span+span { border-left:1px solid #a4895e44; }
.firemaking-metrics strong { display:block;font-size:15px;font-weight:normal;color:#f0c486; }
.firemaking-metrics small { display:block;margin-top:3px;color:var(--fire-muted);font-size:9px; }
#hud #firemaking-panel label { display:block;margin:8px 0;font-size:10px;color:var(--fire-muted); }
#hud #firemaking-panel select { width:100%;height:31px;min-width:0;margin-top:4px;padding:4px;border:1px solid #a4895e77;border-radius:2px;background:#30382e;color:var(--fire-ink);font:11px Georgia,serif;color-scheme:dark; }
.firemaking-supplies { display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:5px;margin:7px 0 10px; }
.firemaking-supply { display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:7px 3px;border:1px solid #a4895e44;border-radius:3px;background:linear-gradient(#242c2233,#1c251d55);text-align:center;font-size:10px; }
.firemaking-supply>.icon { width:29px;height:29px;object-fit:contain; }
.firemaking-supply-name { display:flex;align-items:center;justify-content:center;flex:1;line-height:1.25; }
#hud #firemaking-panel .firemaking-supply strong { margin-top:2px;color:#ebd5ad;font-size:10px;font-weight:normal; }
.firemaking-supply small { display:block;color:#bdc897;font-size:9px;margin-top:0; }
.firemaking-supply.missing { border-color:#c8875a66; }
.firemaking-supply.missing small { color:#efb18a; }
#hud #firemaking-panel .firemaking-begin { display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:35px;background:linear-gradient(#a47a43,#74573a);border-color:#c09b64;color:#fff0d1;font-size:12px;box-shadow:inset 0 1px #eac78d40; }
#hud #firemaking-panel .firemaking-begin:hover:not(:disabled) { background:linear-gradient(#b68b4b,#8b673d); }
#hud #firemaking-panel .firemaking-begin:disabled { opacity:1;background:#b39b6320;color:#aaa18c;border-color:#a4895e44; }
.firemaking-begin .icon { width:21px;height:21px; }
#hud #firemaking-panel .firemaking-requirements { color:#ebbc91;font-size:10px;margin:6px 0; }
#hud #firemaking-panel .firemaking-note { color:var(--fire-muted);font-size:10px;margin:9px 0; }
#hud #firemaking-panel .firemaking-future { color:#d8c099;font-size:10px;border-left:2px solid #aa855c;padding:5px 8px;background:#b3966314; }
.firemaking-section-heading { display:flex;align-items:center;justify-content:space-between;gap:6px;margin:12px 1px 5px;font-size:10px;color:#e7d2ac; }
.firemaking-section-heading>span { letter-spacing:.035em; }
#hud #firemaking-panel .firemaking-section-heading>small { font-size:9px;color:var(--fire-muted); }
#hud #firemaking-panel .firemaking-section-heading>.supplied { color:#c2d09e; }
.firemaking-collection-heading { margin-top:4px; }
.firemaking-ritual-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:5px;margin:5px 0 10px;border:1px solid #a7874d66;border-radius:4px;background:linear-gradient(#20281f88,#30352955);box-shadow:inset 0 1px 5px #0f170f55; }
#hud #firemaking-panel .firemaking-ritual-grid button { position:relative;display:grid;place-items:center;min-width:0;height:60px;padding:1px 2px 11px;border-color:#a4895e24;background:#c8ae7710; }
.firemaking-ritual-grid .icon { width:45px;height:45px;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #1119); }
.firemaking-ritual-grid .locked .icon { opacity:.52;filter:grayscale(.55) drop-shadow(0 1px 1px #111c); }
#hud #firemaking-panel .firemaking-ritual-grid button[aria-pressed=true] { border-color:#e0b675;background:radial-gradient(ellipse at 50% 35%,#d9a2524d,#a27b3620);box-shadow:inset 0 0 0 1px #e2b87833,0 1px 4px #1115; }
.firemaking-ritual-grid button[aria-pressed=true]::before { content:"";position:absolute;top:4px;left:4px;width:4px;height:4px;background:#ffe0a4;transform:rotate(45deg);box-shadow:0 0 5px #e6a85470; }
.firemaking-ritual-grid small { position:absolute;right:0;bottom:2px;left:0;text-align:center;font-size:8px;letter-spacing:.025em;color:#d8c59f;text-shadow:0 1px 2px #111; }
.firemaking-ritual-grid button[aria-pressed=true] small { color:#ffe0a4; }
.firemaking-ritual-hero { align-items:center;gap:9px;padding:9px 7px 10px;margin:0;border:1px solid #c49b5c40;border-radius:4px;background:radial-gradient(ellipse at 15% 55%,#c8954930,transparent 60%),linear-gradient(110deg,#1f271e55,#cfad7110);box-shadow:inset 0 1px #e0ba7820; }
.firemaking-ritual-hero>div:last-child { min-width:0; }
.firemaking-ritual-portrait { display:grid;place-items:center;flex:none;width:81px;height:87px; }
.firemaking-ritual-portrait>.icon { width:88px;height:88px;max-width:none;filter:drop-shadow(0 4px 4px #171d1aaa); }
#hud #firemaking-panel .firemaking-ritual-hero h4 { font-size:17px;line-height:1.12;margin:4px 0 6px; }
#hud #firemaking-panel .firemaking-ritual-hero p { font-size:10px;line-height:1.5;margin:0; }
.firemaking-ritual-hero+.firemaking-metrics { margin-top:6px;margin-bottom:0;border-radius:3px; }
.firemaking-rite-flow { display:flex;justify-content:space-between;gap:5px;list-style:none;padding:8px 1px 5px;margin:0;color:#cabc9f;font-size:9px; }
.firemaking-rite-flow li { display:flex;align-items:center;gap:4px;white-space:nowrap; }
.firemaking-rite-flow li+li::before { content:"›";margin-right:5px;color:#b79863;font-size:13px; }
.firemaking-rite-flow li>span { display:grid;place-items:center;width:15px;height:15px;border:1px solid #b89a5e55;border-radius:50%;color:#e1bf86;font-size:8px; }
#hud #firemaking-panel .firemaking-rite-flow small { color:var(--fire-muted);font-size:8px; }
.firemaking-current { padding:10px;margin:4px 0 12px;border:1px solid #bb925a80;background:linear-gradient(135deg,#b8853e20,#282d251c); }
.firemaking-current>small { font-size:9px;letter-spacing:.05em;color:#d6b582; }
.firemaking-current>strong { display:block;margin:8px 0;font-size:12px;font-weight:normal; }
.firemaking-current>span { display:block;text-align:right;font-size:10px;margin:6px 0 10px;color:var(--fire-muted); }
#hud #firemaking-panel .firemaking-current p { font-size:10px;color:var(--fire-muted);margin-bottom:0; }
.firemaking-steps { display:flex;gap:4px;padding:0;list-style:none;margin:10px 0;font-size:10px;color:#9f9782; }
.firemaking-steps li { flex:1;text-align:center;padding:5px;border-bottom:2px solid #a7874d44; }
.firemaking-steps .current { color:#f7cd8d;border-color:#d99549;background:#b47b4015; }
#hud #firemaking-panel .firemaking-stop { width:100%;margin-top:8px; }
.firemaking-footer { display:flex;align-items:center;gap:7px;border-top:1px solid #a4895e55;padding-top:7px;flex:none;color:var(--fire-muted);font-size:9px;line-height:1.35; }
.firemaking-footer>.icon { width:23px;height:23px;flex:none; }
#hud #firemaking-panel .firemaking-message { padding:7px 8px;margin:0;border-left:2px solid #d3a163;background:#242b2144;font-size:11px; }
.firemaking-status { position:absolute;bottom:145px;left:50%;transform:translateX(-50%);width:min(310px,calc(100vw - 28px));padding:12px;background:linear-gradient(135deg,#efe0b9,#d8c398);border:1px solid #897047;box-shadow:0 3px 16px #18201755,inset 0 0 0 3px #faf0d526;color:#5b432b;font:11px Georgia,serif;pointer-events:auto; }
.firemaking-status>div { display:flex;align-items:center;gap:7px; }
.firemaking-status>div>.icon { width:28px;height:28px; }
.firemaking-status strong { flex:1;font:15px Georgia,serif; }
.firemaking-status button { color:#6a4d2c;border:1px solid #9b7c514d;padding:5px;background:#9b7c5114;cursor:pointer;font:10px Georgia,serif; }
.firemaking-status>small { display:block;margin:7px 0; }
.firemaking-status>span { display:block;text-align:right;margin-top:6px;font-size:10px; }
.firemaking-xp progress,.firemaking-current progress,.firemaking-status progress { display:block;width:100%;height:6px;border:none;background:#ac885b38;accent-color:#dfa15a;border-radius:3px;overflow:hidden; }
.firemaking-xp progress::-webkit-progress-bar,.firemaking-current progress::-webkit-progress-bar,.firemaking-status progress::-webkit-progress-bar { background:#9e896038; }
.firemaking-xp progress::-webkit-progress-value,.firemaking-current progress::-webkit-progress-value,.firemaking-status progress::-webkit-progress-value { background:linear-gradient(90deg,#a75d35,#efbc6c);border-radius:3px; }
.firemaking-xp progress::-moz-progress-bar,.firemaking-current progress::-moz-progress-bar,.firemaking-status progress::-moz-progress-bar { background:linear-gradient(90deg,#a75d35,#efbc6c); }
#hud .guide-firemaking-open { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:12px 0;padding:9px;border:1px solid #b38c55;background:#9e754a20;color:#735332;font:14px Georgia,serif;cursor:pointer; }
.guide-firemaking-open .icon { width:29px;height:29px; }
@media(max-width:600px) { #hud:has(#inventory.firemaking-open:not([hidden])) .map-cluster { visibility:hidden;pointer-events:none; }.firemaking-status { bottom:135px; } }
@media(max-height:700px) { #hud .inventory-grid.firemaking-open { height:calc(100dvh - 150px);max-height:calc(100dvh - 150px); } }
@media(prefers-reduced-motion:reduce) { #hud #firemaking-panel * { scroll-behavior:auto;transition:none; } }

/* Match the dark skill books while overriding the parchment register text rules. */
#hud #firemaking-panel .firemaking-metrics strong { color:#f0c486; }
#hud #firemaking-panel .firemaking-supply small { color:#bdc897; }
#hud #firemaking-panel .firemaking-supply.missing small { color:#efb18a; }
#hud #firemaking-panel .firemaking-current>small,#hud #firemaking-panel .firemaking-hero small { color:#d2b68a; }