html,body{
  width:100%;height:100%;margin:0;overflow:hidden;
  font-family:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  background:#0d1b24;color:#20323a
}
#renderCanvas{width:100%;height:100%;display:block;touch-action:none;outline:none}

.screen{
  position:fixed;inset:0;display:grid;place-items:center;z-index:20;
  background:radial-gradient(120% 120% at 50% 0%,#a9d9e6cc 0%,#c9e8d6aa 55%,#f3ecd2bb 100%);
  backdrop-filter:blur(4px)
}
.hidden{display:none!important}

.panel{
  width:min(560px,calc(100vw - 44px));padding:34px 38px 30px;border-radius:24px;
  background:linear-gradient(#fffdf6f2,#fbf4e6f2);
  box-shadow:0 30px 80px #123a3540, 0 2px 0 #ffffff inset;
  border:1px solid #f0e4c6;text-align:center
}
.eyebrow{
  font-family:system-ui,Segoe UI,sans-serif;
  font-size:11px;font-weight:800;letter-spacing:3px;color:#a98b3e
}
h1{
  font-size:clamp(46px,8vw,82px);margin:6px 0 8px;letter-spacing:-1px;
  color:#1f4a3f;font-weight:600;
  text-shadow:0 1px 0 #ffffff
}
.main-panel p,.panel>p{
  font-size:17px;line-height:1.5;color:#4a5b52;margin:2px auto 20px;max-width:40ch
}
button{
  font-family:system-ui,Segoe UI,sans-serif;
  border:0;border-radius:999px;padding:14px 28px;margin:7px;font-size:16px;font-weight:700;
  color:#fff;cursor:pointer;transition:transform .08s ease;
  background:linear-gradient(#3f8f6e,#2f7458);box-shadow:0 8px 0 #245a44,0 12px 22px #1c4a3833
}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(5px);box-shadow:0 3px 0 #245a44}
button.secondary{background:linear-gradient(#c9a24a,#b3872f);box-shadow:0 8px 0 #8a681f,0 12px 22px #7a5f1a33}

.bar{height:12px;background:#e7ecdf;border-radius:999px;overflow:hidden;margin-top:20px;border:1px solid #dfe6d3}
#barFill{height:100%;width:0;background:linear-gradient(90deg,#4fa07a,#8fce9c);transition:width .3s ease}
#loadError{color:#9c2d37;font-size:13px;margin-top:12px;white-space:pre-wrap;font-family:ui-monospace,monospace}

#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.hint{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  font-family:system-ui,Segoe UI,sans-serif;
  background:#0e2a2380;color:#eafff6;padding:9px 16px;border-radius:999px;font-size:12.5px;
  white-space:nowrap;backdrop-filter:blur(6px);border:1px solid #ffffff22
}
.credits-panel{text-align:left;max-height:74vh;overflow:auto}
.credits-panel h2{text-align:center;font-size:36px;margin:0 0 10px;color:#1f4a3f;font-weight:600}
.credits-panel p{font-size:15px;line-height:1.55;color:#42514a;margin:8px 0}
.credits-panel button{display:block;margin:18px auto 0}