:root{--font-display:"Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--c-forest-900:#1d3a25;--c-forest-800:#2f5d3a;--c-forest-600:#4f8a5b;--c-forest-300:#8fbf7f;--c-wood-800:#4d3520;--c-wood-700:#6b4a2b;--c-wood-500:#8b5e3c;--c-wood-300:#b98a5c;--c-gold-500:#b8860b;--c-gold-400:#d4a017;--c-gold-300:#f2c14e;--c-parchment-300:#e5d5b3;--c-parchment-200:#f4e9d0;--c-parchment-100:#fbf5e6;--c-stone-700:#5f5f5a;--c-stone-600:#7a7a72;--c-stone-400:#b3b3aa;--c-ink:#2b2118;--c-danger:#b4443c;--c-danger-100:#f6dcd9;--c-success:#3f8f4f;--c-info:#3b6fb6;--rarity-common:#8f9a8f;--rarity-uncommon:#4f8a5b;--rarity-rare:#3b6fb6;--rarity-epic:#8a4fb6;--rarity-legendary:#d4a017;--rarity-mythic:#d1476f;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--radius:4px;--shadow-pixel:0 0 0 2px var(--c-ink), 4px 4px 0 2px #00000047}*{box-sizing:border-box}.pixel-frame{background:var(--c-parchment-100);border:2px solid var(--c-ink);border-radius:var(--radius);box-shadow:inset 0 0 0 2px var(--c-parchment-300), inset 0 0 0 4px var(--c-wood-300), 4px 4px 0 0 #00000047;padding:var(--space-4);color:var(--c-ink)}.pixel-frame--tight{padding:var(--space-2) var(--space-3)}.pixel-frame--dark{background:var(--c-wood-800);color:var(--c-parchment-100);box-shadow:inset 0 0 0 2px var(--c-wood-500), inset 0 0 0 4px var(--c-wood-700), 4px 4px 0 0 #00000059}.pixel-frame--glass{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#fbf5e6eb}.card{gap:var(--space-2);flex-direction:column;display:flex}.card__title{font-family:var(--font-display);margin:0;font-size:18px;line-height:1.1}.card__subtitle{color:var(--c-stone-600);margin:0;font-size:12px}.card.is-clickable{cursor:pointer;transition:transform 80ms}.card.is-clickable:hover{transform:translate(-1px,-1px)}.btn{font-family:var(--font-display);letter-spacing:.3px;border:2px solid var(--c-ink);border-radius:var(--radius);background:var(--c-parchment-200);color:var(--c-ink);cursor:pointer;box-shadow:0 3px 0 0 var(--c-wood-500);-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;gap:6px;padding:7px 14px;font-size:14px;line-height:1.1;transition:transform 60ms,box-shadow 60ms,background .1s;display:inline-flex}.btn:hover:not(:disabled){background:var(--c-parchment-100)}.btn:active:not(:disabled){box-shadow:0 0 0 0 var(--c-wood-500);transform:translateY(3px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn--primary{background:var(--c-forest-600);color:#fff;box-shadow:0 3px 0 0 var(--c-forest-900)}.btn--primary:hover:not(:disabled){background:var(--c-forest-300);color:var(--c-ink)}.btn--gold{background:var(--c-gold-400);color:var(--c-ink);box-shadow:0 3px 0 0 var(--c-gold-500)}.btn--gold:hover:not(:disabled){background:var(--c-gold-300)}.btn--danger{background:var(--c-danger);color:#fff;box-shadow:0 3px #6d2a25}.btn--ghost{box-shadow:none;color:inherit;background:0 0;border-color:#0000}.btn--ghost:hover:not(:disabled){background:#00000014}.btn--sm{padding:4px 10px;font-size:12px}.btn--lg{padding:10px 20px;font-size:17px}.btn--block{justify-content:center;width:100%}.badge{font-family:var(--font-display);border:2px solid var(--c-ink);background:var(--c-parchment-200);color:var(--c-ink);white-space:nowrap;border-radius:3px;align-items:center;gap:4px;padding:2px 7px;font-size:11px;line-height:1.2;display:inline-flex}.badge--rarity{color:#fff;text-shadow:1px 1px #00000073}.badge--COMMON{background:var(--rarity-common)}.badge--UNCOMMON{background:var(--rarity-uncommon)}.badge--RARE{background:var(--rarity-rare)}.badge--EPIC{background:var(--rarity-epic)}.badge--LEGENDARY{background:var(--rarity-legendary)}.badge--MYTHIC{background:var(--rarity-mythic);animation:2s linear infinite shimmer}.badge--success{background:var(--c-success);color:#fff}.badge--danger{background:var(--c-danger);color:#fff}.badge--info{background:var(--c-info);color:#fff}.badge--muted{background:var(--c-stone-400)}@keyframes shimmer{0%,to{filter:brightness()}50%{filter:brightness(1.25)}}.progress{background:var(--c-parchment-300);border:2px solid var(--c-ink);border-radius:3px;height:14px;position:relative;overflow:hidden}.progress__fill{background:var(--c-forest-600);height:100%;transition:width .3s}.progress--gold .progress__fill{background:var(--c-gold-400)}.progress--danger .progress__fill{background:var(--c-danger)}.progress__label{text-align:center;color:var(--c-ink);font-size:10px;font-weight:700;line-height:10px;position:absolute;inset:0}.resource{background:var(--c-parchment-100);border:2px solid var(--c-ink);font-family:var(--font-display);color:var(--c-ink);border-radius:3px;align-items:center;gap:6px;min-width:0;padding:2px 8px 2px 4px;font-size:13px;display:inline-flex}.resource__icon{flex:none;width:18px;height:18px}.resource__value{font-variant-numeric:tabular-nums}.resource__label{color:var(--c-stone-600);font-size:10px;font-family:var(--font-body)}.modal-backdrop{z-index:50;background:#1d3a25b3;place-items:center;padding:16px;animation:.12s fade-in;display:grid;position:fixed;inset:0}.modal{width:min(560px,100%);max-height:calc(100vh - 32px);animation:.14s pop-in;overflow:auto}.modal--wide{width:min(900px,100%)}.modal__header{margin-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.modal__title{font-family:var(--font-display);margin:0;font-size:20px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.toasts{z-index:60;flex-direction:column;gap:8px;width:min(360px,100vw - 32px);display:flex;position:fixed;top:64px;right:16px}.toast{border-left:6px solid var(--c-info);cursor:pointer;animation:.16s slide-in}.toast--success{border-left-color:var(--c-success)}.toast--error{border-left-color:var(--c-danger)}.toast__title{font-family:var(--font-display);margin:0;font-size:14px}.toast__body{color:var(--c-stone-700);margin:2px 0 0;font-size:12px}@keyframes slide-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:none}}.slider{width:100%;accent-color:var(--c-gold-400)}.slider-row{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:12px;display:grid}.tabs{border-bottom:2px solid var(--c-ink);flex-wrap:wrap;gap:4px;padding-bottom:4px;display:flex}.tabs .btn.is-active{background:var(--c-gold-400)}.spinner{border:3px solid var(--c-parchment-300);border-top-color:var(--c-forest-600);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.empty{text-align:center;color:var(--c-stone-600);padding:var(--space-5);font-size:14px}.tooltip{display:inline-flex;position:relative}.tooltip__bubble{background:var(--c-ink);color:var(--c-parchment-100);white-space:nowrap;z-index:20;pointer-events:none;border-radius:3px;padding:6px 8px;font-size:11px;display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.tooltip:hover .tooltip__bubble,.tooltip:focus-within .tooltip__bubble{display:block}.icon{vertical-align:-.15em;width:1em;height:1em;image-rendering:pixelated;display:inline-block}.particles{pointer-events:none;position:absolute;inset:0;overflow:hidden}.particle{background:var(--c-gold-300);width:6px;height:6px;animation:.9s ease-out forwards particle;position:absolute}@keyframes particle{to{transform:translate(var(--dx), var(--dy)) scale(.2);opacity:0}}html,body,#root{height:100%}body{background:var(--c-forest-900);color:var(--c-ink);font-family:var(--font-body);margin:0;overflow:hidden}.app-shell{grid-template-rows:auto 1fr;min-width:0;height:100vh;display:grid}.app-main{min-height:0;position:relative;overflow:hidden}.app-scroll{height:100%;padding:var(--space-4);box-sizing:border-box;overflow:auto}.hud{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background:linear-gradient(180deg, var(--c-wood-700), var(--c-wood-800));border-bottom:4px solid var(--c-ink);box-shadow:inset 0 -2px 0 var(--c-wood-500);z-index:5;flex-wrap:wrap;display:flex}.hud__brand{font-family:var(--font-display);color:var(--c-gold-300);text-shadow:2px 2px 0 var(--c-ink);letter-spacing:.5px;white-space:nowrap;font-size:20px}.hud__resources{gap:var(--space-2);flex-wrap:wrap;flex:1;min-width:0;display:flex}.hud__nav{flex-wrap:wrap;gap:4px;display:flex}.hud__nav .btn.is-active{background:var(--c-gold-400);color:var(--c-ink)}.world{background:var(--c-forest-800);position:absolute;inset:0;overflow:hidden}.world canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.world__labels{pointer-events:none;position:absolute;inset:0;overflow:hidden}.world__label{font-family:var(--font-display);color:#fff;text-shadow:1px 1px 0 var(--c-ink), -1px 1px 0 var(--c-ink), 1px -1px 0 var(--c-ink), -1px -1px 0 var(--c-ink);white-space:nowrap;padding:0 4px;font-size:12px;position:absolute;transform:translate(-50%,-100%)}.world__label--npc{color:var(--c-gold-300);font-size:11px;transform:translate(-50%,-50%)}.world__overlay{z-index:3;position:absolute}.world__overlay--left{left:var(--space-3);top:var(--space-3);bottom:var(--space-3);width:340px;max-width:calc(100% - 2 * var(--space-3));gap:var(--space-3);pointer-events:none;flex-direction:column;display:flex}.world__overlay--left>*{pointer-events:auto}.world__overlay--right{right:var(--space-3);top:var(--space-3);width:360px;max-width:calc(100% - 2 * var(--space-3));max-height:calc(100% - 2 * var(--space-3));overflow:auto}.world__overlay--bottom{left:50%;bottom:var(--space-3);gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex;transform:translate(-50%)}.chat{flex-direction:column;max-height:320px;margin-top:auto;display:flex}.chat__log{padding:var(--space-2);color:#fff;background:#2b21188c;border-radius:4px;flex:1;min-height:120px;font-size:13px;line-height:1.35;overflow:auto}.chat__line{word-break:break-word}.chat__line b{color:var(--c-gold-300)}.chat__line--system{color:var(--c-parchment-200);font-style:italic}.chat__form{gap:4px;margin-top:4px;display:flex}.chat__form input{flex:1;min-width:0}.page{gap:var(--space-4);flex-direction:column;max-width:1200px;margin:0 auto;display:flex}.page__title{font-family:var(--font-display);color:var(--c-parchment-100);text-shadow:2px 2px 0 var(--c-ink);margin:0;font-size:28px}.grid{gap:var(--space-3);display:grid}.grid--cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.stack{gap:var(--space-2);flex-direction:column;display:flex}.row{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.row--between{justify-content:space-between}.muted{color:var(--c-stone-600);font-size:13px}.kv{grid-template-columns:auto 1fr;gap:2px 12px;font-size:13px;display:grid}.kv dt{color:var(--c-stone-600)}.kv dd{text-align:right;margin:0;font-weight:600}.cat-portrait{width:64px;height:64px;image-rendering:pixelated;background:var(--c-parchment-200);border:2px solid var(--c-ink);border-radius:4px}.cat-portrait--lg{width:128px;height:128px}.stat-bars{gap:4px;display:grid}.stat-bar{grid-template-columns:90px 1fr 32px;align-items:center;gap:8px;font-size:12px;display:grid}.tutorial{z-index:6;width:min(560px,100% - 32px);position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.auth-screen{background:radial-gradient(circle at 20% 20%, #d4a01726, transparent 40%), radial-gradient(circle at 80% 70%, #8fbf7f2e, transparent 45%), var(--c-forest-900);height:100%;padding:var(--space-4);place-items:center;display:grid}.auth-card{width:min(520px,100%)}.demo-banner{background:var(--c-gold-400);color:var(--c-ink);border-radius:3px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-block}.form-field{flex-direction:column;gap:4px;font-size:13px;display:flex}input,select,textarea{font-family:var(--font-body);border:2px solid var(--c-ink);background:var(--c-parchment-100);color:var(--c-ink);border-radius:4px;padding:8px 10px;font-size:14px}input:focus,select:focus{outline:3px solid var(--c-gold-400);outline-offset:1px}.table{border-collapse:collapse;width:100%;font-size:13px}.table th,.table td{text-align:left;border-bottom:1px solid var(--c-parchment-300);padding:6px 8px}.table th{color:var(--c-stone-600);font-weight:600}.table-wrap{overflow-x:auto}.breakdown{grid-template-columns:1fr auto;gap:2px 12px;font-size:12px;display:grid}.breakdown__total{border-top:1px solid var(--c-parchment-300);padding-top:4px;font-weight:700}.quality-stars{color:var(--c-gold-400);letter-spacing:1px;white-space:nowrap;font-size:13px}.quality-stars--dim{color:var(--c-stone-600)}.pack-reveal{place-items:center;min-height:220px;display:grid;position:relative}.pack-reveal__box{border:4px solid var(--c-ink);background:linear-gradient(#8a4fb6,#3b2a5a);border-radius:6px;width:120px;height:150px;animation:.9s ease-in-out pack-shake;box-shadow:inset 0 0 0 4px #d4a017}@keyframes pack-shake{0%,to{transform:rotate(0)}20%{transform:rotate(-6deg)translate(-4px)}40%{transform:rotate(6deg)translate(4px)}60%{transform:rotate(-4deg)}80%{transform:rotate(4deg)scale(1.06)}}.pack-card{border:3px solid var(--c-ink);background:var(--c-parchment-100);text-align:center;border-radius:6px;min-width:200px;padding:12px}.pack-card--3{box-shadow:0 0 0 3px #3b6fb6}.pack-card--4{box-shadow:0 0 0 3px #8a4fb6}.pack-card--5{box-shadow:0 0 0 3px var(--c-gold-400), 0 0 18px #f2c14ebf}.pity-meter{flex-wrap:wrap;gap:3px;display:flex}.pity-meter__pip{border:2px solid var(--c-ink);background:var(--c-parchment-200);border-radius:2px;width:14px;height:10px}.pity-meter__pip--filled{background:var(--c-gold-400)}.lucky-banner{border-color:var(--c-gold-400);background:linear-gradient(90deg,#d4a01747,#f2c14e14)}.world__label--lucky{color:var(--c-gold-300);text-shadow:0 0 6px #f2c14ef2, 1px 1px 0 var(--c-ink), -1px -1px 0 var(--c-ink)}@media (max-width:900px){.world__overlay--left{width:280px}.world__overlay--right{width:300px}.hud__brand{font-size:16px}}