* { box-sizing:border-box; margin:0; padding:0; }

:root {
  --fg:      rgba(220,215,200,0.90);
  --fg-dim:  rgba(220,215,200,0.40);
  --fg-hint: rgba(220,215,200,0.18);
  --accent:  rgba(190,165,110,0.90);
  --sel-bg:  rgba(190,165,110,0.12);
  --border:  rgba(255,255,255,0.08);
  --font:    'Courier New', 'Lucida Console', monospace;
  --sz: min(480px, 100vmin);
  --fg-seen:    rgba(220,215,200,0.55);
  --audio-seen: rgba(120,185,165,0.45);
}

html, body {
  width:100%; height:100%;
  background:#040404;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

#screen {
  width:var(--sz); height:var(--sz);
  border-radius:50%;
  background:#070707;
  border:1px solid #161616;
  overflow:hidden;
  position:relative;
}

.card {
  display:none;
  position:absolute; inset:0;
  flex-direction:column;
  padding: calc(var(--sz)*0.13) calc(var(--sz)*0.16);
}
.card.active { display:flex; }

/* ── TITLE ─────────────────────────────── */
#card-title {
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:16px;
}
.title-main {
  font-family:var(--font);
  font-size:14px;
  color:var(--fg);
  letter-spacing:0.07em;
  line-height:2.3;
  white-space:pre;
}
#title-img {
  width:calc(var(--sz)*0.4);
  max-height:calc(var(--sz)*0.2);
  object-fit:contain;
}
#title-sub {
  font-family:var(--font);
  font-size:10px;
  color:rgba(220,215,200,0.55);
  letter-spacing:0.12em;
  animation: blink 1.5s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.1} }

/* ── NARRATIVE ─────────────────────────── */
#card-narrative { justify-content:center; }

#narrative-log {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
#narrative-log .nl {
  font-family:var(--font);
  font-size:12px;
  line-height:1.82;
  color:var(--fg);
  opacity:0;
  transition:opacity 0.55s ease;
  min-height:0.3em;
}
#narrative-log .nl.show { opacity:1; }

#narrative-skip {
  flex-shrink:0;
  margin-top:10px;
  font-family:var(--font);
  font-size:9px;
  color:var(--fg-hint);
  text-align:center;
  letter-spacing:0.08em;
  cursor:pointer;
}

/* ── GAME ───────────────────────────────── */
#card-game { gap:0; padding-top:calc(var(--sz)*0.26); }

#game-header {
  flex-shrink:0;
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:5px;
}
#loc-name {
  font-family:var(--font);
  font-size:20px;
  letter-spacing:0.15em;
  color:var(--accent);
}
#loc-keys {
  flex-shrink:0;
  font-family:var(--font);
  font-size:8px;
  color:var(--fg-hint);
  letter-spacing:0.05em;
  text-align:center;
  margin-top:6px;
}

#game-text {
  flex:1;
  min-height:0;
  overflow:hidden;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--fg);
}
#game-text .tl {
  opacity:0;
  animation:fadein 0.4s ease forwards;
}
#game-text .tl.gap { min-height:0.5em; }
@keyframes fadein { from{opacity:0} to{opacity:1} }

/* clickable words live inline in the body text */
#game-text .w {
  color:var(--fg);
  cursor:pointer;
  transition:color 0.12s;
}
#game-text .w.sel {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
#game-text .w.seen:not(.sel) { color:var(--fg-seen); }
#game-text .w.w-control:not(.sel) { color:rgba(220,215,200,0.45); }
/* audio words: teal + dotted underline */
#game-text .w.audio {
  color:rgba(120,185,165,0.80);
  text-decoration:underline dotted;
  text-underline-offset:3px;
}
#game-text .w.audio.seen:not(.sel) { color:var(--audio-seen); }
#game-text .w.audio.sel {
  color:var(--accent);
  text-decoration:underline dotted;
  text-underline-offset:3px;
}
#game-back {
  font-family:var(--font);
  font-size:16px;
  color:var(--fg-hint);
  letter-spacing:0.05em;
}
#game-back:empty { display:none; }
#game-back .w {
  cursor:pointer;
  color:rgba(220,215,200,0.45);
}
#game-back .w.sel {
  color:var(--accent);
}

/* leaflet legend: visual samples only, not clickable */
#game-text .sample { cursor:default; }
/* leaflet body: title line stays default size, rest shrinks 2 sizes (16px -> 12px) */
#game-text .tl.leaflet-sm { font-size:12px; }

#game-hint {
  flex-shrink:0;
  margin-top:10px;
  font-family:var(--font);
  font-size:10px;
  color:var(--fg-hint);
  text-align:center;
  letter-spacing:0.12em;
  animation:blink 1.5s step-end infinite;
}
#game-hint:empty { display:none; }

/* ── ABOUT BUTTON + MODAL (homepage only, additive) ────── */
#about-btn {
  position:fixed;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  width:50px; height:50px;
  border-radius:50%;
  background:#070707;
  border:1px solid rgba(220,215,200,0.35);
  color:var(--fg-dim);
  font-family:var(--font);
  font-size:8px;
  letter-spacing:0.08em;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:50;
  padding:0;
}
#about-btn:hover { color:var(--accent); border-color:var(--accent); }

#about-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  align-items:center;
  justify-content:center;
  z-index:100;
  opacity:0;
  transition:opacity 0.25s ease;
}
#about-overlay.show { display:flex; opacity:1; }

#about-modal {
  position:relative;
  width:500px;
  max-width:calc(100% - 48px);
  max-height:80vh;
  overflow-y:auto;
  background:#070707;
  border:1px solid rgba(220,215,200,0.25);
  border-radius:6px;
  padding:32px 28px;
  font-family:var(--font);
  color:var(--fg);
}
#about-modal h2 {
  font-size:14px;
  font-weight:normal;
  letter-spacing:0.07em;
  color:var(--accent);
  margin-bottom:16px;
}
#about-modal p {
  font-size:12px;
  line-height:1.7;
  margin-bottom:14px;
}
#about-credit { color:var(--fg-dim); font-size:10px; margin-bottom:0; }

#about-close {
  position:absolute;
  top:8px; right:10px;
  width:24px; height:24px;
  background:none;
  border:none;
  color:var(--fg-hint);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
#about-close:hover { color:var(--accent); }

@media (max-width:480px) {
  #about-btn   { width:38px; height:38px; font-size:7px; left:14px; }
  #about-modal { padding:24px 18px; }
}

/* ── PI ROUND TOUCHSCREEN OVERRIDE (480×480 physical) ──── */
@media (max-width:600px) and (max-height:600px) {
  .title-main          { font-size:16px; }
  #title-sub            { font-size:12px; }
  #narrative-log .nl    { font-size:14px; }
  #narrative-skip       { font-size:10px; }
  #loc-name             { font-size:23px; }
  #loc-keys             { font-size:9px; }
  #game-text            { font-size:18px; }
  #game-back            { font-size:18px; }
  #game-text .tl.leaflet-sm { font-size:14px; }
  #game-hint             { font-size:12px; }
}