:root{--gold:#d8c27a;--gold-bright:#f4e2a0;--gold-dim:#8a7440;--gold-dark:#4a3c1c;--parchment:#e8dcc0;--stone:#141110;--blood:#7a1010;--life:#d01818;--mana:#2848d0;--white:#f2ece0;--blue:#7878ff;--yellow:#ffff78;--green:#40ff40;--orange:#ffa830;--gray:#8f8a80;--red:#ff5a4a;--purple:#d09cff;--display:"Cinzel","Times New Roman",Georgia,serif;--body:"EB Garamond",Garamond,"Times New Roman",Georgia,serif;--stone-url:none;--bevel:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold-dim),inset 0 0 0 3px #000,inset 0 0 0 4px var(--gold-dark),inset 0 0 40px #000000b3}html,body{color:var(--parchment);font:15px/1.3 var(--body);overflow:hidden;user-select:none;background:#000;height:100%;margin:0}#game{position:absolute;display:block;cursor:crosshair;inset:0}#root{position:absolute;pointer-events:none;inset:0}#root *{pointer-events:auto}#feed,#topname,#fade{pointer-events:none}[hidden]{display:none!important}#fade{position:absolute;opacity:0;z-index:90;background:#000;transition:opacity .7s;inset:0}#fade.on{opacity:1;transition:none}.frame{position:relative;background:var(--stone-url),linear-gradient(180deg,#221d1a,#100d0c);box-shadow:var(--bevel),0 0 30px #000,0 0 2px var(--gold-dark);box-sizing:border-box;color:var(--parchment);padding:8px}.frame:after{content:"";position:absolute;pointer-events:none;background:radial-gradient(circle at 4px 4px,var(--gold-bright)0,var(--gold-dim)2px,#2a2010 3px,transparent 4px)0 0/12px 12px no-repeat,radial-gradient(circle at 8px 4px,var(--gold-bright)0,var(--gold-dim)2px,#2a2010 3px,transparent 4px)100% 0/12px 12px no-repeat,radial-gradient(circle at 4px 8px,var(--gold-bright)0,var(--gold-dim)2px,#2a2010 3px,transparent 4px)0 100%/12px 12px no-repeat,radial-gradient(circle at 8px 8px,var(--gold-bright)0,var(--gold-dim)2px,#2a2010 3px,transparent 4px)100% 100%/12px 12px no-repeat;inset:2px}.title{text-align:center;font:600 17px/1 var(--display);letter-spacing:3px;text-transform:uppercase;color:var(--gold);text-shadow:0 0 8px #000000e6,0 1px #000;position:relative;background:linear-gradient(90deg,#0000,#500c08d9 20%,#6e120af2 50%,#500c08d9 80%,#0000);margin:4px 4px 10px;padding:6px 0 5px}.title:before,.title:after{content:"";position:absolute;background:linear-gradient(90deg,transparent,var(--gold-dim),var(--gold),var(--gold-dim),transparent);height:1px;left:8%;right:8%}.title:before{top:0}.title:after{bottom:0}h3,.sub{font:600 12px/1.2 var(--display);letter-spacing:2px;text-transform:uppercase;color:var(--gold-dim);text-align:center;margin:10px 0 4px}.panel{position:absolute;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--gold-dark)transparent;width:372px;top:40px;bottom:132px}.panel.left{left:14px}.panel.right{right:14px}.panel table{border-collapse:collapse;width:100%}.panel td{padding:2px 6px;font-size:14px}.panel td:last-child{text-align:right;color:var(--white)}.panel tr.alt td{background:#ffdc9608}.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.stat-btn{margin-left:6px;padding:0 5px;font-size:12px;line-height:14px}button,.btn{font:600 13px/1 var(--display);letter-spacing:1px;color:var(--gold);cursor:pointer;box-sizing:border-box;box-shadow:inset 0 0 0 1px var(--gold-dark),inset 0 1px 0 #ffe6aa1f,0 2px 4px #000000b3;text-shadow:0 1px #000;background:linear-gradient(#3a332d,#221d1a 55%,#16120f);border:1px solid #000;padding:7px 14px;transition:box-shadow .12s,color .12s}button:hover,.btn:hover{color:var(--gold-bright);box-shadow:inset 0 0 0 1px var(--gold-dim),inset 0 1px 0 #ffe6aa2e,0 0 12px #d8c27a73}button:active,.btn:active,button.active{box-shadow:inset 0 0 0 1px var(--gold-dim),inset 0 2px 6px #000;color:var(--white);background:linear-gradient(#14100e,#221d1a)}button:disabled{opacity:.35;cursor:default;box-shadow:inset 0 0 0 1px var(--gold-dark)}button.small{padding:4px 8px;font-size:11px}.tabs{display:flex;gap:2px;margin:0 4px 8px}.tabs button{flex:1;padding:6px 4px;font-size:11px}.tabs button.active{color:var(--gold-bright);border-bottom-color:var(--gold)}input[type=text],input[type=password],input[type=number]{color:var(--parchment);font:15px var(--body);box-shadow:inset 0 0 0 1px var(--gold-dark),inset 0 2px 8px #000;box-sizing:border-box;outline:none;background:#0b0908;border:1px solid #000;padding:7px 10px}input:focus{box-shadow:inset 0 0 0 1px var(--gold-dim),inset 0 2px 8px #000,0 0 10px #d8c27a59}input::placeholder{color:#5a5048;font-style:italic}.row{display:flex;flex-wrap:wrap;align-items: center;gap:6px}.err{color:var(--red);text-shadow:0 0 6px #000;min-height:1.3em;font-style:italic}.gold{color:var(--gold);text-align:center;letter-spacing:.5px;margin-top:6px}.hint{color:var(--gray);text-align:center;margin-top:6px;font-size:12px;font-style:italic}.screen{position:absolute;display:flex;animation:.8s fadein;flex-direction:column;justify-content:center;align-items: center;gap:12px;inset:0}@keyframes fadein{0%{opacity:0}to{opacity:1}}.logo{font:700 64px/1 var(--display);letter-spacing:10px;color:#f0d890;text-shadow:0 0 6px #ff3a10,0 0 22px #b01008,0 0 50px #600000,0 2px #000;animation:3.5s ease-in-out infinite alternate smoulder;margin:0 0 8px}.logo small{display:block;letter-spacing:8px;color:var(--gold);text-shadow:0 0 10px #000,0 0 20px #800;margin-top:8px;font-size:18px}@keyframes smoulder{0%{text-shadow:0 0 6px #ff3a10,0 0 22px #b01008,0 0 50px #600000,0 2px #000}to{text-shadow:0 0 10px #ff5020,0 0 34px #d01808,0 0 70px #700000,0 2px #000}}.menu{display:flex;flex-direction:column;gap:10px;width:380px;padding:18px 22px 16px}.menu input{width:100%}.menu .row>button{flex:1}.charlist{display:flex;overflow:auto;scrollbar-width:thin;flex-direction:column;gap:4px;max-height:260px}.charlist .row{cursor:pointer;background:#00000059;border:1px solid #0000;justify-content:space-between;padding:6px 8px;box-shadow:inset 0 0 0 1px #000}.charlist .row:hover{border-color:var(--gold-dark)}.charlist .row.sel{border-color:var(--gold-dim);background:#5a140a59;box-shadow:inset 0 0 12px #000c,0 0 8px #d8c27a33}.charlist .name{font:600 14px var(--display);color:var(--gold-bright);letter-spacing:1px}.charlist .meta{color:var(--gray);margin-left:8px;font-size:13px}.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.card{display:flex;cursor:pointer;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold-dark);font:600 9px var(--display);letter-spacing:.5px;color:var(--gray);text-transform:uppercase;background:#0006;flex-direction:column;align-items: center;gap:3px;width:64px;padding:6px 2px 4px}.card:hover{color:var(--gold);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold-dim)}.card.sel{color:var(--gold-bright);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold),0 0 12px #d8c27a59;background:#64140a73}.stone-tabs{display:flex;gap:0}.stone-tabs button{border-radius:0;flex:1;padding:7px 4px}.toggle{display:inline-flex;cursor:pointer;font:600 12px var(--display);letter-spacing:1px;color:var(--gray);align-items: center;gap:8px}.toggle i{box-shadow:inset 0 0 0 1px #000,0 0 0 1px var(--gold-dark);background:radial-gradient(circle at 35% 35%,#4a3a30,#100c0a);border-radius:50%;width:14px;height:14px}.toggle.on{color:var(--red)}.toggle.on i{box-shadow:inset 0 0 0 1px #000,0 0 0 1px var(--gold-dim),0 0 10px red;background:radial-gradient(circle at 35% 35%,#ff8070,#900)}.grid{position:relative;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold-dark),inset 0 0 18px #000;box-sizing:content-box;background:#070605}.cell{position:absolute;box-sizing:border-box;border:1px solid #000000e6;width:32px;height:32px;box-shadow:inset 0 0 0 1px #d8c27a12}.item{position:absolute;box-sizing:border-box;overflow:hidden;cursor:pointer;display:flex;z-index:1;background:radial-gradient(at 50% 40%,#3c3228b3,#0a0806e6);border:1px solid;justify-content:center;align-items: center;box-shadow:inset 0 0 8px #000}.item canvas{display:block;pointer-events:none}.item:hover{filter:brightness(1.35);box-shadow:inset 0 0 8px #000,0 0 8px}.item.bad{background:radial-gradient(#780a0a99,#280000e6)}.item.sock{outline:2px solid var(--white)}.item .qty{position:absolute;font:600 10px var(--body);color:var(--white);text-shadow:0 0 3px #000,0 0 3px #000;bottom:1px;right:2px}.slot{position:absolute;box-sizing:border-box;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold-dark),inset 0 0 14px #000;display:flex;background:radial-gradient(at 50% 30%,#1a1512,#080605);justify-content:center;align-items: center}.slot>canvas{opacity:.55;pointer-events:none}.doll{position:relative;background:radial-gradient(at 50% 45%,#785a321a,#0000 65%);margin:0 auto}.belt{position:relative}.beltbox{position:absolute;box-sizing:border-box;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold-dark),inset 0 3px 10px #000;background:radial-gradient(at 50% 30%,#1a1512,#060504)}.vitems{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.vitem{position:relative;display:flex;color:var(--gold);flex-direction:column;align-items: center;gap:2px;font-size:11px}.vitem .item{position:relative}.tooltip{position:fixed;border:1px solid var(--gold-dark);text-align:center;white-space:nowrap;z-index:50;pointer-events:none;background:#080605f0;padding:7px 12px;font-size:13.5px;line-height:1.35;box-shadow:0 0 0 1px #000,0 6px 20px #000}.tooltip div:first-child{font-size:14.5px}.tree{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:62px;gap:6px;margin:0 4px}.tree svg{position:absolute;pointer-events:none;width:100%;height:100%;inset:0}.sk{position:relative;display:flex;cursor:pointer;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold-dark);z-index:1;background:linear-gradient(#1c1714,#0d0a08);align-items: center;gap:6px;padding:4px;font-size:11.5px;line-height:1.15}.sk canvas{box-shadow:inset 0 0 0 1px #000,0 0 0 1px var(--gold-dark);background:radial-gradient(circle,#241c16,#0a0806);flex:none}.sk.learned{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold-dim)}.sk.learned canvas{box-shadow:0 0 0 1px var(--gold-dim),0 0 8px #d8c27a59}.sk.locked{opacity:.45}.sk .sklvl{color:var(--gold);font-size:11px}.sk .plus{position:absolute;padding:1px 6px;font-size:12px;bottom:3px;right:3px}.picker{position:absolute;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:640px;padding:8px;bottom:130px;left:50%;transform:translate(-50%)}.picker button{display:flex;align-items: center;gap:6px;padding:4px 8px 4px 4px}.picker canvas{box-shadow:0 0 0 1px var(--gold-dark)}.overlay{position:absolute;display:flex;animation:1.2s fadein;background:radial-gradient(#5000008c,#000c);flex-direction:column;justify-content:center;align-items: center;gap:18px;inset:0}.overlay .banner{font:700 44px var(--display);letter-spacing:6px;color:#e02020;text-shadow:0 0 20px #800,0 0 40px #400,0 2px #000;background:linear-gradient(90deg,#0000,#000c 20% 80%,#0000);padding:14px 60px}.overlay button{padding:10px 24px;font-size:15px}#hud{position:absolute;display:flex;box-sizing:border-box;background:var(--stone-url),linear-gradient(180deg,#26201c,#140f0d 40%,#0a0807);box-shadow:inset 0 3px 0 #000,inset 0 4px 0 var(--gold-dim),inset 0 5px 0 #000,inset 0 6px 0 var(--gold-dark),inset 0 -2px 0 #000,0 -10px 30px #000c;justify-content:center;align-items: flex-end;gap:10px;height:122px;padding:0 8px 6px;bottom:0;left:0;right:0}#hud:before{content:"";position:absolute;pointer-events:none;background:linear-gradient(#ffe6b40f,#0000);height:30px;top:7px;left:0;right:0}.orb{position:relative;flex:none;width:104px;height:104px;margin-bottom:4px}.orb canvas{display:block}.orb span{position:absolute;display:flex;font:600 12px var(--display);color:var(--white);text-shadow:0 0 4px #000,0 0 4px #000,0 1px #000;opacity:0;justify-content:center;align-items: center;transition:opacity .15s;inset:0}.orb:hover span{opacity:1}.skillbtn{position:relative;cursor:pointer;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold-dim),inset 0 0 0 3px #000,inset 0 0 0 4px var(--gold-dark),0 0 0 1px #000,0 2px 6px #000;background:radial-gradient(circle at 50% 35%,#2a2018,#0a0806);flex:none;width:60px;height:60px;margin-bottom:18px}.skillbtn:hover{box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px var(--gold),inset 0 0 0 3px #000,inset 0 0 0 4px var(--gold-dim),0 0 12px #d8c27a80}.skillbtn canvas{display:block}.skillbtn small{position:absolute;font:600 9px var(--display);letter-spacing:.5px;color:var(--gold);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px #000;margin-top:3px;top:100%;left:0;right:0}.mid{display:flex;flex-direction:column;align-items: center;gap:4px;margin-bottom:8px}.mid .info{display:flex;font:600 11px var(--display);letter-spacing:1px;color:var(--gold);text-shadow:0 1px #000;gap:14px}.mid .info b{color:var(--white);font-weight:600}.mid .row{gap:8px}.runbtn{display:flex;justify-content:center;align-items: center;width:34px;height:34px;padding:0}.runbtn canvas{display:block}.bar{position:relative;box-shadow:inset 0 0 0 1px #000,0 0 0 1px var(--gold-dark),inset 0 2px 4px #000;background:#050403;width:230px;height:9px}.bar div{height:100%;transition:width .15s;box-shadow:inset 0 2px #ffffff40,inset 0 -2px #00000080}.bar.stam div{background:linear-gradient(#ffe070,#b08020)}.bar.exp div{background:linear-gradient(#f0e0a0,#9a8040)}.bar.exp{width:340px;height:6px}.helpbtn{position:absolute;border-radius:50%;width:30px;height:30px;padding:0;font-size:16px;top:10px;right:12px}#feed{position:absolute;text-shadow:0 0 4px #000,1px 1px 2px #000;width:480px;font-size:14px;bottom:150px;left:14px}#feed div{animation:.3s feedin}#feed div.old{opacity:.45}@keyframes feedin{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:none}}#chat{position:absolute;display:none;width:480px;bottom:126px;left:14px}#chat input{width:100%}#topname{position:absolute;text-align:center;font:600 17px var(--display);letter-spacing:3px;color:var(--gold);text-shadow:0 0 10px #000,0 2px #000;top:10px;left:0;right:0}#topname .lvl:before,#topname .lvl:after{content:"✧";color:var(--gold-dim);margin:0 14px;font-size:13px}#topname small{display:block;letter-spacing:3px;color:var(--gold-dim);font-size:10px}.help{position:absolute;width:520px;padding:12px 18px 16px;top:50%;left:50%;transform:translate(-50%,-50%)}.help table{border-collapse:collapse;width:100%;font-size:14px}.help td{padding:2px 6px}.help td:first-child{text-align:right;color:var(--gold);font:600 12px var(--display);letter-spacing:1px;width:40%}.help kbd{display:inline-block;font:600 11px var(--display);color:var(--gold-bright);box-shadow:inset 0 0 0 1px var(--gold-dark),0 1px 0 #000;background:linear-gradient(#3a332d,#16120f);min-width:14px;margin:0 2px;padding:1px 6px}