@font-face {
  font-family: FalloutClassic;
  src: url('./fonts/FalloutClassicDialog.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: PTMono;
  src: url('./fonts/PTM55FT.ttf') format('truetype');
  font-display: swap;
}
:root {
  color-scheme: dark;
  --background: #050a06;
  --panel: #0b120d;
  --border: #3c6e45;
  --text: #bdf5b5;
  --dim: #74a874;
  --accent: #5cff5c;
  --warning: #ff6e5e;
  background: var(--background);
  color: var(--text);
  font: 16px/1.45 FalloutClassic, PTMono, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { overflow: hidden; }
body.playing { background: #000; }
[hidden] { display: none !important; }
#launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
#panel {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 20px;
}
h1 { margin: 0; flex-shrink: 0; font: inherit; font-size: 22px; color: var(--accent); }
#tagline { margin: 2px 0 0; color: var(--dim); font-size: 14px; flex-shrink: 0; }
#content { min-height: 0; overflow: auto; }
#message { margin: 10px 0 0; white-space: pre-line; }
#dev-note, #install-hint { margin: 12px 0 0; color: var(--dim); font-size: 14px; }
#links {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
}
#links a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
}
#links svg { width: 20px; height: 20px; fill: currentColor; }
button {
  flex-shrink: 0;
  min-height: 48px;
  margin-top: 20px;
  padding: 8px 14px;
  border: 1px solid #4c8f57;
  border-radius: 8px;
  background: #14281a;
  color: #cfffd0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:active { background: #2e6a3a; border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:disabled { opacity: .55; cursor: default; }
#play { background: #3f9a4c; color: #041006; }
progress { flex-shrink: 0; width: 100%; height: 12px; margin-top: 16px; accent-color: #3f9a4c; }
.error #message { color: var(--warning); }
#safe-area {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#canvas {
  display: none;
  position: fixed;
  left: var(--canvas-left, 0px);
  top: var(--canvas-top, 0px);
  width: var(--canvas-width, 100vw) !important;
  height: var(--canvas-height, 100dvh) !important;
  background: #000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}
body.playing #launcher { display: none; }
body.playing #canvas { display: block; }
#text-input {
  position: fixed;
  z-index: 1;
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  background: #060a07;
  color: var(--accent);
  font-family: FalloutClassic, PTMono, monospace;
  caret-color: var(--accent);
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}
#text-input:focus { border-color: var(--accent); }
#diagnostics {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 3;
  padding: 6px 8px;
  white-space: pre-line;
  pointer-events: none;
  background: #050a06df;
  color: var(--text);
  font: 11px/1.4 PTMono, monospace;
}
#rotate {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: var(--background);
}
#storage-warning { position:fixed; z-index:20; top:max(12px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:max-content; max-width:90%; padding:12px; border:1px solid #d4ab58; border-radius:8px; color:#ffe2a8; background:#171207ed; pointer-events:none; }
#save-exchange { position:fixed; inset:0; z-index:30; background:var(--background); }
.exchanging #rotate, .exchanging #diagnostics, .exchanging #storage-warning { display:none; }

.startup #panel { width: min(400px, 100%); text-align: center; }
.startup h1 { font-size: 30px; }
.startup #play { margin-top: 20px; }
#startup-tools { display:flex; justify-content:center; flex-wrap:wrap; gap:4px 10px; margin-top:12px; font-size:12px; flex-shrink:0; }
#notice, #build-tag, #repair { color:var(--dim); }
#repair { margin-top:12px; padding:8px; flex-shrink:0; }
@media (max-height: 300px) {
  .startup #panel { padding: 12px; }
  .startup h1 { font-size: 24px; }
  .startup #play, .startup #retry { margin-top: 12px; }
  #startup-tools { margin-top: 8px; }
}