/* EYERIS — cabinet shell. Same CRT-amber family as the site, but the game
   owns its own document (it runs inside the Cabinet iframe), so nothing here
   leaks into the cube. Asset refs from index.html stay ABSOLUTE per repo law. */

:root {
  --bg: #070503;
  --panel: #0d0a05;
  --amber: #ffb000;
  --amber-dim: #a8760c;
  --paper: #f5e9d0;
  --line: rgba(255, 176, 0, 0.18);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--paper);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.hud {
  width: min(94vw, 640px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.12em;
}

.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat .label {
  color: var(--amber-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
}
.stat strong { color: var(--paper); font-size: 16px; font-weight: 600; }

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--amber);
  letter-spacing: 0.4em;
  font-size: 15px;
  text-shadow: 0 0 12px rgba(255, 176, 0, 0.45);
}

.title button,
.pads button {
  background: none;
  border: 1px solid var(--line);
  color: var(--amber-dim);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 3px 10px;
  cursor: pointer;
}
.title button:hover { color: var(--amber); border-color: var(--amber-dim); }

canvas {
  width: min(94vw, calc(100dvh - 150px), 640px);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 50%, #0b0805 0%, var(--bg) 70%);
  border: 1px solid var(--line);
  border-radius: 4px;
  touch-action: none;
}

.toast {
  min-height: 1.2em;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--amber-dim);
  text-align: center;
  padding: 0 12px;
}

/* Touch pads — only on coarse pointers. Big targets, thumb row. */
.pads { display: none; }
@media (pointer: coarse) {
  .pads {
    display: flex;
    gap: 18px;
  }
  .pads button {
    font-size: 22px;
    line-height: 1;
    padding: 12px 26px;
    color: var(--amber);
    border-color: var(--amber-dim);
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .pads button:active { background: rgba(255, 176, 0, 0.12); }
}