:root{
  --wood1:#3b2414;--wood2:#2a180c;--gold:#e8b84a;--gold2:#a8771f;
  --parch:#efdcb0;--parch2:#d6bb83;--ink:#3a2410;--blood:#a8281c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#120a05;font-family:'IM Fell English',Georgia,serif;color:var(--parch);user-select:none;-webkit-user-select:none}
#scene-container{position:fixed;inset:0}
#scene-container canvas{display:block;touch-action:none}
.hidden{display:none!important}
.wood{
  background:
    repeating-linear-gradient(92deg,rgba(0,0,0,.18) 0 2px,transparent 2px 9px),
    linear-gradient(180deg,var(--wood1),var(--wood2));
  border:3px solid var(--gold2);
  box-shadow:inset 0 0 0 2px #1a0d05,inset 0 0 18px rgba(0,0,0,.7),0 6px 20px rgba(0,0,0,.6);
}
.parch{
  background:radial-gradient(ellipse at 30% 20%,#f8ebc8,transparent 60%),
    radial-gradient(ellipse at 80% 90%,#c9a86a,transparent 55%),
    linear-gradient(135deg,var(--parch),var(--parch2));
  color:var(--ink);border:2px solid #7a5426;box-shadow:inset 0 0 25px rgba(90,50,10,.45);
}
.metal{
  font-family:'Cinzel',serif;font-weight:900;color:#2b1a08;cursor:pointer;
  background:linear-gradient(180deg,#f6dd8a,#c9962e 55%,#8c6115);
  border:2px solid #4a2f0c;border-radius:4px;padding:6px 12px;
  box-shadow:inset 0 1px 0 #fff3c2,inset 0 -2px 0 rgba(0,0,0,.3),0 2px 0 #1c0f04;
  transition:transform .06s,box-shadow .15s,filter .15s;
}
.metal:hover{filter:brightness(1.12);box-shadow:inset 0 1px 0 #fff3c2,0 0 12px rgba(255,200,80,.7),0 2px 0 #1c0f04}
.metal:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.metal:disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed}

#topbar{position:fixed;top:0;left:50%;transform:translateX(-50%);display:flex;gap:18px;align-items:center;padding:6px 16px;border-top:none;border-radius:0 0 12px 12px;z-index:10;white-space:nowrap}
.res{display:flex;align-items:baseline;gap:5px;font-family:'Cinzel',serif}
.res b{font-size:18px;color:#fff1c8;font-weight:900}
.res small{font-size:10px;color:var(--gold);text-transform:uppercase;letter-spacing:1px}
.ico{color:var(--gold)}.ico.g{color:#ffd23f}.ico.w{color:#b0773b}.ico.f{color:#e0795a}
.tbtns{display:flex;gap:6px}.tbtns .metal{padding:3px 9px}

#toasts{position:fixed;top:64px;left:12px;z-index:12;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{font-family:'Cinzel',serif;font-weight:500;background:rgba(30,15,5,.85);border-left:4px solid var(--gold);padding:6px 12px;color:#ffe9b0;animation:tin .25s ease-out,tout .5s ease-in 2.6s forwards;text-shadow:0 1px 0 #000}
.toast.bad{border-color:var(--blood);color:#ffb3a3}
@keyframes tin{from{transform:translateX(-30px);opacity:0}}
@keyframes tout{to{opacity:0;transform:translateY(-8px)}}
#banner{position:fixed;top:22%;left:50%;transform:translateX(-50%);z-index:12;font-family:'Cinzel',serif;font-weight:900;font-size:clamp(18px,3.4vw,38px);color:#ffdc8a;text-shadow:0 0 20px #a8281c,0 3px 0 #000;text-align:center;pointer-events:none;opacity:0;transition:opacity .4s}
#banner.on{opacity:1;animation:shake .5s}
@keyframes shake{25%{transform:translateX(-52%)}75%{transform:translateX(-48%)}}

#fx{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.ft{position:absolute;font-family:'Cinzel',serif;font-weight:900;font-size:16px;color:#ffd84a;text-shadow:0 2px 0 #000,0 0 6px #000;transform:translate(-50%,-50%);white-space:nowrap}
.ft.w{color:#e3a868}.ft.r{color:#ff6a50}
.bubble{position:absolute;transform:translate(-50%,-100%);background:#fff7e0;color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:4px 10px;font-style:italic;font-size:14px;white-space:nowrap}
.bubble:after{content:'';position:absolute;left:50%;bottom:-8px;border:6px solid transparent;border-top-color:var(--ink);transform:translateX(-50%)}
#selbox{position:fixed;border:1px solid #7dff7d;background:rgba(80,255,80,.12);display:none;z-index:6;pointer-events:none}

#panel{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(820px,100%);z-index:10;border-bottom:none;border-radius:14px 14px 0 0;padding:8px}
.pin{display:flex;gap:8px;align-items:stretch}
#panelToggle{display:none}
#minimap{width:150px;height:150px;border:2px solid var(--gold2);background:#0a1d2c;cursor:crosshair;flex:none;image-rendering:pixelated}
#selinfo{flex:1;padding:8px 10px;min-height:150px;border-radius:4px;overflow:hidden;font-size:14px}
#selinfo h4{font-family:'Cinzel',serif;font-weight:900;margin:0 0 4px;font-size:18px}
#selinfo .por{float:left;width:64px;height:64px;margin-right:10px;border:2px solid var(--ink);border-radius:4px;display:grid;place-items:center;font-family:'Cinzel';font-weight:900;font-size:30px;color:#fff;text-shadow:0 2px 0 #000}
.hpbar{height:8px;background:#40160e;border:1px solid var(--ink);margin:4px 0;clear:none}
.hpbar i{display:block;height:100%;background:linear-gradient(#7de05a,#2f8a1d)}
.mini{display:grid;grid-template-columns:repeat(auto-fill,34px);gap:3px}
.mini div{width:34px;height:34px;border:1px solid var(--ink);display:grid;place-items:center;font-family:Cinzel;font-weight:900;color:#fff;font-size:15px;text-shadow:0 1px 0 #000;position:relative}
.mini div i{position:absolute;bottom:1px;left:2px;right:2px;height:3px;background:#3d3}
.empty{opacity:.7;font-style:italic}
#cmds{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:4px;flex:none}
.cmd{position:relative;padding:0;font-size:20px;width:48px;height:48px}
.cmd .k{position:absolute;top:1px;left:3px;font-size:9px}
.cmd .c{position:absolute;bottom:0;right:2px;font-size:8px;font-family:Georgia}
.slot{background:rgba(0,0,0,.35);border:1px solid #5a3a18;border-radius:4px}
#tooltip{position:fixed;z-index:20;max-width:220px;padding:8px 10px;pointer-events:none;display:none;font-size:13px;background:#1e1007;border:2px solid var(--gold2);color:#f5e2b8}
#tooltip b{font-family:Cinzel;color:var(--gold)}
#tooltip i{color:#c9b088}

.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:radial-gradient(ellipse at center,transparent 30%,rgba(10,4,0,.7))}
.sign{position:relative;padding:28px 46px 22px;text-align:center;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 3px,transparent 3px 34px),repeating-linear-gradient(91deg,rgba(255,255,255,.04) 0 1px,transparent 1px 7px),linear-gradient(180deg,#6b4022,#3d2210);
  border:5px solid #24130a;border-radius:8px;box-shadow:0 0 0 3px var(--gold2),0 20px 60px #000;animation:drop .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes drop{from{transform:translateY(-120vh) rotate(-8deg)}}
.nail{position:absolute;top:10px;width:12px;height:12px;border-radius:50%;background:radial-gradient(#ddd,#555)}.nail.l{left:12px}.nail.r{right:12px}
.sign h1{font-family:Cinzel;font-weight:900;font-size:clamp(34px,7vw,72px);margin:0;letter-spacing:4px;color:#ffd77a;text-shadow:0 4px 0 #5a2a05,0 0 30px rgba(255,160,40,.5)}
.sign h1 span{color:#ff7a3a}
.sign h2{font-family:Cinzel;font-weight:500;margin:0 0 6px;letter-spacing:8px;color:var(--parch);font-size:clamp(14px,2.4vw,22px)}
#tagline{font-style:italic;color:#e8c98c;margin:4px 0 18px;min-height:1.2em}
.menu{display:flex;flex-direction:column;gap:10px;align-items:center}
.menu .metal{width:220px;font-size:16px}
.metal.big{font-size:24px!important;padding:10px}
#auth-status{margin-top:12px;font-size:13px;color:#d9be88}
#auth-status a{color:var(--gold)}
.remix{position:fixed;right:12px;bottom:10px;color:var(--gold);font-family:Cinzel;font-size:13px;text-decoration:none;background:rgba(0,0,0,.5);padding:4px 10px;border:1px solid var(--gold2)}

.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(0,0,0,.55)}
.box{width:min(520px,92vw);max-height:86vh;overflow:auto;padding:20px 24px;border-radius:6px;text-align:center}
.box h3{font-family:Cinzel;font-weight:900;font-size:30px;margin:0 0 10px;color:#5a1a0a}
.box ul{text-align:left;padding-left:18px;line-height:1.5}
.box .row{display:flex;gap:10px;justify-content:center;margin-top:12px}
#end-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:10px 0;font-family:Cinzel}
#end-stats div{background:rgba(90,50,10,.15);padding:6px;border:1px solid #9a7440}
#end-stats b{display:block;font-size:22px}
#chronicle{font-style:italic;margin:10px 0;padding:10px;border-top:1px dashed #7a5426;border-bottom:1px dashed #7a5426;line-height:1.45;text-align:left}
#lb-list table{width:100%;border-collapse:collapse;font-size:15px}
#lb-list td,#lb-list th{padding:4px;border-bottom:1px solid #b89a60;text-align:left}
#lb-list th{font-family:Cinzel}

@media (max-width:700px){
  #topbar{gap:9px;padding:4px 8px;width:100%;border-radius:0;justify-content:space-between}
  .res b{font-size:13px}.res small{display:none}
  #panel{padding:4px 6px 6px;transition:transform .3s}
  #panel.collapsed{transform:translate(-50%,calc(100% - 34px))}
  #panelToggle{display:block;margin:0 auto 4px;padding:3px 14px;font-size:12px}
  #minimap{width:96px;height:96px}
  #selinfo{min-height:96px;font-size:12px;padding:4px 6px}
  #selinfo .por{width:40px;height:40px;font-size:20px}
  #selinfo h4{font-size:14px}
  #cmds{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);gap:3px}
  .cmd{width:38px;height:38px;font-size:16px}
  #toasts{top:40px}
}