/* Etkileşim Adası · ortak arayüz dili
   Playdate kartları + Mac pencereleri + Obra Dinn serif'i.
   Vurgu rengi yalnızca "durum değişti" anlamına gelir. */

:root { --accent: #ff6648; }
body.night { --bg: #0e0f10; --fg: #e9e6dc; --mute: rgba(233, 230, 220, .55); --shade: #000; }
body.day   { --bg: #f2efe6; --fg: #17181a; --mute: rgba(23, 24, 26, .55);  --shade: #17181a; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Pixelify Sans', 'VT323', monospace;
  transition: background .4s, color .4s;
}

/* Shader çıktısı tüm ekranı kaplar */
#fx {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  image-rendering: pixelated;
}

.serif { font-family: 'IM Fell English', Georgia, serif; }

/* Playdate kartı */
.card {
  position: fixed;
  z-index: 10;
  background: var(--bg);
  border: 2px solid var(--fg);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--shade);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 5px;
  border: 2px solid var(--fg);
  border-radius: 99px;
  background: var(--bg);
  color: var(--fg);
  font: 700 12px 'Silkscreen', monospace;
  cursor: pointer;
  text-decoration: none;
}
.btn b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  font-size: 12px;
}
.btn.go { background: var(--fg); color: var(--bg); }
.btn.go b { background: var(--accent); color: #0e0f10; }
.btn:hover { translate: 0 -1px; }
.btn:focus-visible, .pills button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Hap biçimli sekme / düğme grubu */
.pills {
  position: fixed;
  z-index: 10;
  display: flex;
  padding: 4px;
  border: 2px solid var(--fg);
  border-radius: 99px;
  background: var(--bg);
  box-shadow: 4px 4px 0 var(--shade);
}
.pills button {
  padding: 7px 14px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--fg);
  font: 700 13px 'Silkscreen', monospace;
  cursor: pointer;
}
.pills button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

.caption {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 20px;
  translate: -50% 0;
  margin: 0;
  padding: 5px 22px 8px;
  background: var(--bg);
  border-top: 2px solid var(--fg);
  border-bottom: 2px solid var(--fg);
  font-size: clamp(18px, 2.2vw, 28px);
  font-style: italic;
  white-space: nowrap;
  pointer-events: none;
}

/* Mac penceresi: öğretim katmanı her modda kâğıt beyazı */
.win {
  position: fixed;
  z-index: 20;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
  font-family: 'VT323', monospace;
}
.win[hidden] { display: none; }
.win .title {
  position: relative;
  height: 28px;
  border-bottom: 2px solid #000;
  background: repeating-linear-gradient(#fff 0 3px, #000 3px 5px);
  background-clip: content-box;
  padding: 4px;
  cursor: default;
}
.win .title span {
  position: absolute;
  left: 50%;
  top: 2px;
  translate: -50% 0;
  padding: 0 10px;
  background: #fff;
  font: 700 13px/22px 'Silkscreen', monospace;
  white-space: nowrap;
}
.win .close {
  position: absolute;
  left: 8px;
  top: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid #000;
  background: #fff;
  cursor: pointer;
}
.win .close:hover { background: #000; }

[hidden] { display: none !important; }

@media (max-width: 760px) {
  .caption { display: none; }
}