@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Sarabun:wght@300;400;500;700&display=swap");*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#07090d;--gold:#d4a84b;--gold-glow:rgba(212,168,75,.4);--text:#cdc4b0;--muted:#6a6050}body,html{background:var(--bg) radial-gradient(ellipse 60% 40% at 15% 0,rgba(110,60,8,.14) 0,transparent 65%) radial-gradient(ellipse 50% 40% at 85% 100%,rgba(8,25,80,.1) 0,transparent 65%);color:var(--text);font-family:Sarabun,sans-serif;overflow-x:hidden}.sim,body,html{min-height:100vh}.sim{flex-direction:column}.hdr,.sim{display:flex}.hdr{align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;background:rgba(4,3,2,.97);border-bottom:2px solid rgba(212,168,75,.5);padding:.65rem 1.25rem;position:-webkit-sticky;position:sticky;top:0;z-index:50;box-shadow:0 3px 20px rgba(0,0,0,.7)}.hdr-title{font-family:Cinzel,serif;font-size:1.55rem;color:var(--gold);text-shadow:0 0 18px var(--gold-glow);letter-spacing:1px}.hdr-sub{font-size:.72rem;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-top:1px}.hdr-ctrl{gap:.75rem;flex-wrap:wrap}.ctrl-grp,.hdr-ctrl{display:flex;align-items:center}.ctrl-grp{flex-direction:column;gap:1px}.ctrl-grp label{font-size:.92rem;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}.lv-inp{background:rgba(0,0,0,.6);border:1px solid rgba(212,168,75,.55);border-radius:6px;color:var(--gold);font-size:1.25rem;font-weight:700;text-align:center;width:76px;padding:5px 8px;outline:none;font-family:Sarabun,sans-serif;transition:box-shadow .2s}.lv-inp:focus{box-shadow:0 0 0 2px var(--gold-glow)}.pt-box{font-size:1.1rem;font-weight:700;color:#ccc;background:rgba(0,0,0,.4);border:1px solid rgba(130,110,70,.3);border-radius:6px;padding:4px 13px;min-width:60px;text-align:center}.pt-box.warn{color:#f59e0b;border-color:rgba(245,158,11,.35)}.pt-box.ok{color:#4ade80;border-color:rgba(74,222,128,.35)}.pt-box.err{color:#f87171;border-color:hsla(0,91%,71%,.35)}.pt-box.c{color:#a855f7;border-color:rgba(168,85,247,.35)}.reset-btn{background:linear-gradient(135deg,#2a180a,#4a2d10);border:1px solid rgba(212,168,75,.5);border-radius:7px;color:var(--gold);font-size:1.05rem;font-weight:600;padding:7px 20px;cursor:pointer;font-family:Sarabun,sans-serif;transition:all .2s}.reset-btn:hover{background:linear-gradient(135deg,#4a2d10,#6a4018);box-shadow:0 0 10px rgba(212,168,75,.25)}.info-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;background:rgba(0,0,0,.45);border-bottom:1px solid hsla(0,0%,100%,.04);padding:7px 1.5rem;font-size:1rem;color:#fff}.info-hint{margin-left:auto;color:#fff;font-size:.92rem}.grid{display:grid;grid-template-columns:repeat(4,1fr);flex:1 1;min-width:0;overflow-x:auto}.col{border-right:1px solid hsla(0,0%,100%,.05);background:var(--cdim,rgba(15,12,8,.6));display:flex;flex-direction:column;position:relative;min-width:270px}.col:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--gold));box-shadow:0 0 14px var(--glow,var(--gold-glow))}.col:last-child{border-right:none}.col-hd{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--cborder,rgba(212,168,75,.2));background:rgba(0,0,0,.35)}.col-title{font-family:Cinzel,serif;font-size:1.2rem;text-shadow:0 0 8px var(--glow,var(--gold-glow));letter-spacing:1px}.col-pts,.col-title{color:var(--accent,var(--gold))}.col-pts{font-size:.9rem;background:rgba(0,0,0,.4);border:1px solid var(--cborder,rgba(212,168,75,.25));border-radius:12px;padding:3px 12px}.reset-col-btn{background:rgba(0,0,0,.35);border:1px solid var(--cborder,rgba(212,168,75,.3));color:var(--accent,#ccc);border-radius:6px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;transition:all .2s;outline:none}.reset-col-btn:hover{background:rgba(212,168,75,.15);border-color:var(--accent,rgba(212,168,75,.6))}.col-class-title{text-align:center;font-size:1.15rem;font-weight:700;color:var(--accent,var(--text));padding:6px 0;background:rgba(0,0,0,.5);border-bottom:2px solid hsla(0,0%,100%,.05);letter-spacing:.5px;text-shadow:0 0 10px rgba(0,0,0,.8)}.col-body{display:flex;flex-direction:column;padding:8px;gap:4px;flex:1 1;align-items:center;position:relative}.col-bg{position:absolute;bottom:30px;left:30px;right:30px;top:0;pointer-events:none;opacity:.3;overflow:hidden}.col-row{display:flex;gap:6px;align-items:center;justify-content:flex-start;padding:4px 3px;width:274px;flex-shrink:0;border-bottom:1px solid hsla(0,0%,100%,.03)}.col-row:last-child{border-bottom:none}.sn-btn,.sn-wrap{position:relative}.sn-btn{width:64px;height:64px;border-radius:10px;background:#613c1f;border:2px solid rgba(150,120,50,.3);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s,border-color .15s,box-shadow .15s,opacity .15s;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;padding:0}.sn-btn img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;transition:all .2s}.sn-btn:not(.sn-learned) img{filter:grayscale(1) opacity(.7)}.sn-btn:not(.sn-locked):hover{border-color:rgba(212,168,75,.75);box-shadow:0 7px 18px rgba(0,0,0,.6),0 0 12px rgba(212,168,75,.3)}.sn-btn.sn-learned{border-color:rgba(74,222,128,.7)!important}.sn-btn.sn-learned:after{content:"";position:absolute;inset:0;background:rgba(74,222,128,.07)}.sn-btn.sn-locked{cursor:not-allowed}.sn-badge{position:absolute;bottom:2px;right:2px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;pointer-events:none}.sn-ok{background:rgba(5,30,10,.9);border:1px solid rgba(74,222,128,.7);color:#4ade80}.sn-lock{background:rgba(0,0,0,.5);font-size:.6rem}.sn-ready{background:rgba(180,130,40,.9);border:1px solid #d4a84b;color:#fff;font-size:1rem;line-height:1;padding-bottom:2px}.sn-text{font-size:.68rem;color:rgba(155,120,60,.5);text-align:center;padding:3px;word-break:break-all;line-height:1.2;text-transform:uppercase}.tt{position:fixed;width:280px;background:rgba(5,4,2,.98);border:1px solid rgba(212,168,75,.35);border-radius:10px;padding:12px 14px;z-index:9999;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.85),0 0 0 1px rgba(212,168,75,.07);animation:ttIn .13s ease;transform:translateX(-50%)}@keyframes ttIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.tt-name{font-family:Cinzel,serif;font-size:1.05rem;color:var(--tt-accent,var(--gold));margin-bottom:8px;text-shadow:0 0 10px var(--tt-accent,var(--gold))}.tt-reqs{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;border:1px solid hsla(0,0%,100%,.06);border-radius:7px;overflow:hidden}.tt-req-row{display:flex;align-items:center;gap:7px;padding:5px 10px;font-size:.9rem}.tt-req-row.met{background:rgba(74,222,128,.06)}.tt-req-row.unmet{background:hsla(0,91%,71%,.07)}.req-icon{font-size:.75rem;width:14px;text-align:center;flex-shrink:0}.tt-req-row.met .req-icon{color:#4ade80}.tt-req-row.unmet .req-icon{color:#f87171}.req-label{color:var(--muted);flex:1 1;white-space:nowrap;font-size:.86rem}.req-val{font-weight:700;white-space:nowrap}.tt-req-row.met .req-val{color:#4ade80}.tt-req-row.unmet .req-val{color:#fbbf24}.tt-costs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}.cost-pill{font-size:.75rem;padding:2px 9px;border-radius:20px;font-weight:600}.sp-pill{background:hsla(0,91%,71%,.12);border:1px solid hsla(0,91%,71%,.3);color:#f87171}.mp-pill{background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.3);color:#93c5fd}.type-pill{background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.1);color:#a0a0c0}.tt-desc{font-size:.9rem;color:var(--text);line-height:1.55;border-top:1px solid hsla(0,0%,100%,.05);padding-top:7px;margin-top:2px}.tt-learned{color:#4ade80;background:rgba(74,222,128,.08)}.tt-learned,.tt-ready{font-size:.86rem;border-radius:5px;padding:5px 10px;margin-top:5px}.tt-ready{color:#fbbf24;background:rgba(251,191,36,.08)}@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}.info-hint{display:none}}@media(max-width:480px){.grid{grid-template-columns:1fr}}