/* Cairnfall game overlay */
:root {
  --ink: #f5ead6;
  --amber: #e8a552;
  --deep: #141a2e;
  --panel: rgba(16, 20, 36, 0.62);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a1124; }
body.touch-on { touch-action: none; }
canvas#game { position: fixed; inset: 0; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; color: var(--ink); }
.crosshair {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 22px; color: rgba(245, 234, 214, 0.85); text-shadow: 0 0 6px rgba(0,0,0,.6);
  line-height: 1; user-select: none;
}
.info {
  position: absolute; top: 10px; left: 12px; font-size: 13px; letter-spacing: .04em;
  background: var(--panel); padding: 6px 10px; border-radius: 8px;
}
.newworld {
  position: absolute; top: 10px; right: 12px; pointer-events: auto; cursor: pointer;
  background: var(--panel); color: var(--ink); border: 1px solid rgba(232,165,82,.5);
  border-radius: 8px; padding: 6px 10px; font-size: 13px;
}
.newworld:hover { background: rgba(232,165,82,.28); }
#hotbar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; pointer-events: auto;
}
.slot {
  position: relative; width: 46px; height: 46px; border-radius: 9px;
  background: var(--panel); border: 2px solid rgba(245,234,214,.22);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.slot canvas { width: 36px; height: 36px; image-rendering: pixelated; border-radius: 5px; }
.slot[aria-selected="true"] { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(232,165,82,.35), 0 0 14px rgba(232,165,82,.4); }
.slot-key { position: absolute; top: 2px; left: 5px; font-size: 10px; opacity: .75; }
#start {
  position: fixed; inset: 0; display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center; text-align: center; pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(20,26,46,.55) 0%, rgba(10,17,36,.92) 80%);
  cursor: pointer; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; color: var(--ink);
}
#start h1 { font-size: clamp(38px, 9vw, 76px); margin: 0; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); text-shadow: 0 2px 24px rgba(232,165,82,.45); }
#start p { margin: 0; max-width: 40ch; opacity: .9; }
#start .start-note { font-size: 13px; opacity: .65; }
#touch-controls { position: absolute; inset: 0; display: none; pointer-events: none; }
body.touch-on #touch-controls { display: block; }
.stick {
  position: absolute; left: 20px; bottom: 78px; width: 110px; height: 110px; border-radius: 50%;
  background: rgba(16,20,36,.45); border: 2px solid rgba(245,234,214,.25); pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
}
.knob { width: 46px; height: 46px; border-radius: 50%; background: rgba(232,165,82,.55); }
.tbtn {
  position: absolute; width: 66px; height: 66px; border-radius: 50%; pointer-events: auto;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
  background: rgba(16,20,36,.5); border: 2px solid rgba(245,234,214,.3); user-select: none;
}
.tbtn.jump { right: 24px; bottom: 130px; }
.tbtn.brk  { right: 104px; bottom: 64px; }
.tbtn.plc  { right: 24px; bottom: 48px; }
@media (max-width: 640px) {
  .slot { width: 38px; height: 38px; }
  .slot canvas { width: 30px; height: 30px; }
  #hotbar { bottom: 8px; gap: 4px; }
}