* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#06080a; font-family:'Karla',sans-serif; user-select:none; color:#d6d3cb; }
.cinzel { font-family:'Cinzel',serif; }
canvas { 
  display:block; 
  image-rendering: pixelated; 
  image-rendering: crisp-edges; 
}
.pz-panel {
  background:linear-gradient(145deg, rgba(18,24,30,.95), rgba(9,13,17,.97));
  border:1px solid rgba(88,110,132,.38);
  box-shadow:0 12px 34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(8px); border-radius:6px;
}
.pz-btn {
  background:linear-gradient(180deg, rgba(38,50,63,.92), rgba(21,29,37,.96));
  border:1px solid rgba(90,116,142,.42); transition:all .15s ease; color:#cfd6dd; cursor:pointer;
}
.pz-btn:hover { background:linear-gradient(180deg, rgba(54,72,92,.96), rgba(31,43,56,.98)); border-color:#d97706; box-shadow:0 0 10px rgba(217,119,6,.35); transform:translateY(-1px); }
.pz-btn.active { background:linear-gradient(180deg, rgba(180,83,9,.65), rgba(120,53,15,.85)); border-color:#f59e0b; box-shadow:inset 0 0 8px rgba(245,158,11,.5), 0 0 10px rgba(245,158,11,.3); color:#ffe4b5; }
.bar { background:#05070a; height:7px; border-radius:2px; overflow:hidden; border:1px solid #1c2530; }
.bar > div { height:100%; transition:width .3s; }
.stat-label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
#tooltip { position:absolute; pointer-events:none; display:none; z-index:60; max-width:240px; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:#080c10; }
::-webkit-scrollbar-thumb { background:#2a3848; border-radius:3px; }
#startScreen {
  position:fixed; inset:0; z-index:100;
  background:radial-gradient(ellipse at 50% 30%, rgba(30,45,35,.35), rgba(4,6,8,.96) 70%), #06080a;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;
}
#startScreen h1 { font-family:'Cinzel',serif; font-size:clamp(34px,6vw,64px); font-weight:800; color:#e8dcc0; letter-spacing:.04em; text-shadow:0 4px 24px rgba(0,0,0,.9), 0 0 40px rgba(180,83,9,.35); line-height:1.1; }
#startScreen h1 span { color:#d97706; }
#startScreen .tag { color:#9aa7b2; font-size:clamp(13px,1.6vw,17px); margin-top:14px; max-width:640px; line-height:1.6; }
#startBtn {
  margin-top:34px; padding:16px 52px; font-family:'Cinzel',serif; font-size:20px; font-weight:800; letter-spacing:.12em;
  background:linear-gradient(180deg, #b45309, #78350f); color:#fff7e6; border:1px solid #f59e0b; border-radius:4px; cursor:pointer;
  box-shadow:0 0 30px rgba(245,158,11,.4), inset 0 1px 0 rgba(255,255,255,.2); transition:all .2s;
}
#startBtn:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 0 50px rgba(245,158,11,.6); }
.hidden { display:none !important; }
.tool-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 6px; border-radius:4px; min-width:58px; font-size:9.5px; font-weight:700; letter-spacing:.03em; }
.tool-btn i { font-size:15px; }
.wind-arrow { display:inline-block; transition:transform .5s; }
#hitFlash { position:fixed; inset:0; pointer-events:none; z-index:50; background:radial-gradient(ellipse at center, rgba(220,38,38,0) 50%, rgba(220,38,38,.35) 100%); opacity:0; transition:opacity .15s; }