* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: #0b1020;
  font-family: ui-monospace, "Cascadia Mono", "Menlo", Consolas, monospace; color: #e8f4ef; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.bar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 10px;
  flex-wrap: wrap; align-items: center; }
.chip { background: rgba(10, 18, 30, 0.72); border: 1px solid rgba(120, 220, 180, 0.35);
  border-radius: 9px; padding: 6px 10px; font-size: 14px; letter-spacing: 0.5px; }
.chip b { color: #7de3b8; }
#phasechip.night { border-color: rgba(150, 110, 255, 0.5); color: #cbb2ff; }
#phasechip.dusk  { border-color: rgba(255, 170, 90, 0.5); color: #ffc98a; }
#hearts { letter-spacing: 2px; color: #ff6b81; }
#hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(10,18,30,0.72); border-radius: 9px; padding: 6px 12px; font-size: 13px;
  white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center;
  justify-content: center; background: rgba(6, 10, 20, 0.82); pointer-events: auto; }
.panel { max-width: 480px; width: calc(100% - 32px); text-align: center; padding: 26px 22px;
  background: linear-gradient(160deg, #12263a, #0c1626);
  border: 1px solid rgba(125, 227, 184, 0.4); border-radius: 16px;
  box-shadow: 0 12px 44px rgba(0,0,0,0.6); }
.panel h1 { font-size: 30px; margin-bottom: 6px; color: #8de9c4; letter-spacing: 2px; }
.panel h1.won { color: #ffd166; } .panel h1.lost { color: #ff6b81; }
.panel p { font-size: 14px; line-height: 1.55; margin: 10px 0; color: #c4d8d0; }
.panel .keys { font-size: 13px; color: #9fd8c4; text-align: left; margin: 10px auto; max-width: 360px;}
.btn { display: inline-block; margin-top: 12px; padding: 12px 26px; font: inherit; font-size: 16px;
  cursor: pointer; color: #08130d; background: linear-gradient(120deg, #7de3b8, #4fc49a);
  border: none; border-radius: 10px; letter-spacing: 1px; }
.btn:active { transform: translateY(1px); }
#touch { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: none; }
body.touch #touch { display: block; }
#stick { position: absolute; left: 18px; bottom: 18px; width: 116px; height: 116px;
  border-radius: 50%; background: rgba(20, 40, 34, 0.45); border: 2px solid rgba(125,227,184,0.4);
  pointer-events: auto; touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(125, 227, 184, 0.55); }
.tbtn { position: absolute; right: 18px; width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid rgba(255, 209, 102, 0.55); background: rgba(46, 34, 12, 0.5);
  color: #ffd166; font: inherit; font-size: 13px; pointer-events: auto; touch-action: none;
  letter-spacing: 1px; }
#btn-gather { bottom: 118px; } #btn-build { bottom: 18px; }
#turnpad { position: absolute; right: 118px; bottom: 18px; width: 130px; height: 130px;
  border-radius: 14px; border: 1px dashed rgba(160, 190, 220, 0.4); pointer-events: auto;
  touch-action: none; color: #9fd0f0; font-size: 11px; display: flex; align-items: center;
  justify-content: center; }
@media (max-width: 700px) { #hint { display: none; } .bar { top: 6px; left: 6px; } .chip { font-size: 12px; padding: 4px 7px; } }