/* Shared components. Rarity colours sit on dark backgrounds for contrast. */
.button,.copy-row button,.tabs button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:var(--space-3) var(--space-6);border:2px solid #101010;border-radius:0;background:#777;box-shadow:inset 2px 2px #b5b5b5,inset -2px -2px #484848,0 4px #101010;color:#fff;text-shadow:1px 2px #242424;text-decoration:none;font:inherit;line-height:1.25;text-align:center;cursor:pointer}
.button.primary{background:var(--grass);box-shadow:inset 2px 2px #88ae62,inset -2px -2px #234019,0 4px #101010}
.button:hover,.copy-row button:hover,.tabs button:hover,.button.is-hover{background:#85899e;color:var(--rare);box-shadow:inset 2px 2px #c7cae2,inset -2px -2px #53566b,0 4px #101010}
.button.primary:hover{background:#4c7b39;box-shadow:inset 2px 2px #a2c97a,inset -2px -2px #234019,0 4px #101010}
.button:active,.copy-row button:active,.button.is-pressed{transform:translateY(4px);box-shadow:inset 2px 2px #373737,inset -2px -2px #aaa}
.button:disabled{color:#ccc;background:#484848;box-shadow:inset 2px 2px #666,inset -2px -2px #303030;cursor:not-allowed;transform:none}
.panel{color-scheme:light;background:var(--panel);color:var(--ink);border:2px solid #111;box-shadow:var(--bevel);padding:var(--space-6);min-width:0;--muted:var(--ink-muted)}
.panel-title{border-bottom:2px solid #a0a0a0;padding-bottom:var(--space-4);margin-bottom:var(--space-6)}
.panel a:not(.button){color:#254d24}.panel a:not(.button):hover{color:#142c13}
.panel .eyebrow{color:var(--ink-muted)}.card p{color:var(--muted)}.card h3{margin:var(--space-6) 0 var(--space-3)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.item-slot,.card-icon{display:grid;place-items:center;flex-shrink:0;width:64px;height:64px;padding:var(--space-2);background:var(--tile);box-shadow:inset 0 2px #fff4d9,0 3px #867158;border:0;border-radius:14px;color:#252525;font:var(--type-title)/1 var(--font)}
.item-slot img,.card-icon img{display:block;width:48px;height:48px;image-rendering:pixelated}button.item-slot{cursor:pointer}button.item-slot:hover{background:#f8e8c8}
.tooltip-wrap{position:relative;display:inline-block}
.tooltip{position:absolute;left:0;top:calc(100% + 8px);z-index:5;width:max-content;max-width:min(256px,calc(100vw - 80px));padding:var(--space-3);border:2px solid;border-image:linear-gradient(var(--tooltip-top),var(--tooltip-bottom)) 1;background:var(--tooltip);color:#fff;box-shadow:0 0 0 2px #100010,4px 4px #0008;font:var(--type-body)/1.5 var(--font);text-align:left;overflow-wrap:anywhere;visibility:hidden;opacity:0;pointer-events:none}
.tooltip strong{display:block;color:var(--aqua);font-weight:400}
.tooltip-wrap:not([data-dismissed]):hover .tooltip,.tooltip-wrap:not([data-dismissed]):focus-within .tooltip,.tooltip-wrap[data-open] .tooltip{visibility:visible;opacity:1;pointer-events:auto}
/* Bridge keeps the tooltip open when the pointer moves onto it. */
.tooltip::before{content:"";position:absolute;bottom:100%;left:-2px;right:-2px;height:12px}
.tag,.badge,.category{display:inline-block;background:var(--deepslate);color:var(--text);padding:var(--space-1) var(--space-2);border:1px solid #535b5c;font-size:var(--type-body);line-height:1.5;overflow-wrap:anywhere}
.rarity-common{color:#fff}.rarity-uncommon{color:var(--rare)}.rarity-rare{color:var(--aqua)}.rarity-epic{color:var(--epic)}
.discovery-text{white-space:pre-wrap;overflow-wrap:anywhere}.credit{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line);overflow-wrap:anywhere}.credit strong{color:var(--text)}
.locked{background:#1c1223;box-shadow:none;border-style:dashed}.locked h3{letter-spacing:.16em}.locked .card-icon{background:#3c3047;color:#d9c6e7;box-shadow:none}
.tabs{display:flex;align-items:stretch;gap:var(--space-2);padding-top:var(--space-8);overflow-x:auto}
.tabs button{flex:1;background:#999;color:var(--ink);text-shadow:none;box-shadow:var(--bevel);margin-top:8px;white-space:nowrap}
.tabs button[aria-selected=true]{background:var(--panel);margin-top:0;padding-top:20px;border-bottom-color:var(--panel);box-shadow:inset 2px 2px #fff,inset -2px 0 #373737}
.guide-panel{margin-top:-2px;position:relative}.progress-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}.progress-row p{margin:0}
progress{appearance:none;width:240px;max-width:100%;height:16px;border:2px solid #161d12;background:#31382c;accent-color:var(--green)}
progress::-webkit-progress-bar{background:#31382c;box-shadow:inset 0 2px #1a2116}
progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,transparent 0 20px,#153d1a 20px 24px),linear-gradient(#b4f778 0 35%,#59ac32 35% 75%,#315f19 75%)}
progress::-moz-progress-bar{background:repeating-linear-gradient(90deg,transparent 0 20px,#153d1a 20px 24px),linear-gradient(#b4f778 0 35%,#59ac32 35% 75%,#315f19 75%)}
.copy-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);background:#262b29;color:#fff;padding:var(--space-3);margin:var(--space-4) 0;box-shadow:inset 2px 2px #101510,inset -2px -2px #e0e0e0}
.copy-row code{flex:1 1 160px;min-width:0;overflow-wrap:anywhere;color:#fff}.copy-row button{padding:var(--space-2) var(--space-3)}.copy-feedback{min-height:24px;color:var(--gold)}
.status-dot{display:inline-block;width:8px;height:8px;margin-right:var(--space-3);background:var(--green);box-shadow:0 0 0 4px #55ff5514}
.status-dot[data-state=unknown],.status-dot[data-state=empty]{background:var(--gray);box-shadow:none}.status-dot[data-state=stale]{background:var(--gold);box-shadow:none}
.callout{padding:var(--space-6);background:var(--dirt);border-left:4px solid var(--gold)}.callout p{max-width:72ch}
details summary{cursor:pointer;font-weight:700}details[open] summary{margin-bottom:var(--space-6)}details p{max-width:72ch}
code,kbd{font:inherit;overflow-wrap:anywhere}code{color:var(--gold)}.panel code:not(.copy-row code){color:#433416}
kbd{display:inline-block;padding:0 var(--space-1);background:var(--panel);color:var(--ink);border:2px solid #373737;box-shadow:inset 1px 1px #fff,0 2px #373737}
.empty{padding:var(--space-6);border:2px dashed var(--line);color:var(--muted);grid-column:1/-1}

/* Dark reading surfaces; grey is reserved for inventory/crafting illustrations. */
.card,details,.guide-panel{min-width:0;padding:24px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px #0002}
.card p{color:var(--muted)}.card h3{font-size:24px}.card a:not(.button),details a{color:var(--gold)}
.tabs{gap:8px;padding:24px 0 12px}.tabs button{flex:0 0 auto;margin:0;background:#302039;color:var(--muted);border:1px solid var(--line);border-radius:8px;box-shadow:none;font-size:18px;padding:12px 20px}
.tabs button[aria-selected=true]{margin:0;padding:12px 20px;background:#67407c;color:#fff;border-color:#c38bd8;box-shadow:inset 0 -3px #b77ed1}
.tabs button:hover{background:#4b2d59;color:#fff}.guide-panel{margin:0;padding:20px;background:var(--surface-deep)}.button,.copy-row button{border-radius:6px}
.tag,.badge,.category{font-size:14px;border-radius:6px;border-color:var(--line)}.copy-row{background:#100b16;border-radius:8px;box-shadow:inset 0 0 0 1px #594166}.copy-row code{font-size:16px}
.callout{border-radius:0 12px 12px 0}.crafting{display:flex;align-items:center;justify-content:center;gap:20px;width:fit-content;max-width:100%;padding:24px;background:var(--panel);border:3px solid #373737;box-shadow:var(--bevel);border-radius:4px;color:#555}
.craft-grid{display:grid;grid-template-columns:repeat(3,40px);gap:4px}.craft-grid span,.craft-result{display:block;width:40px;height:40px;background:var(--slot);box-shadow:var(--inset)}.craft-result{width:52px;height:52px}.craft-arrow{font-size:36px;font-weight:900}
@media(max-width:380px){.card,details,.guide-panel{padding:16px}.crafting{padding:12px;gap:12px}.craft-grid{grid-template-columns:repeat(3,32px)}.craft-grid span{width:32px;height:32px}}

/* State rules follow the shared reading surface so secrets remain distinct. */
.card.locked{background:var(--surface-deep);border:1px dashed #624b6d;box-shadow:none}
.card.locked h3{color:#cbb8d7}.card.locked .card-icon{border:1px dashed #766382}
.card-top{flex-wrap:wrap}.card .step-title h3{margin:4px 0 0}
.button:disabled:hover{color:#ccc;background:#484848;box-shadow:inset 2px 2px #666,inset -2px -2px #303030}
.panel .status-dot{background:#356725;box-shadow:none}.panel .status-dot[data-state=empty]{background:#5c5c5c}.panel .status-dot[data-state=stale]{background:#815600}