/* Sea6 Interactive — ana sayfa */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: #06162b;
  overflow: hidden;
  font-family: 'Pixelify Sans', 'Courier New', monospace;
  -webkit-font-smoothing: none;
}

#sea {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* Piksel düğme: köşeleri kırık kalın kontur, üstte ışık, altta gölge */
.game {
  --o: #2b1d1a;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px 16px 22px;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--o);
  text-decoration: none;
  background: #f4e2bd;
  box-shadow:
    inset 0 4px 0 #fff8e6,
    inset 0 -6px 0 #d9b98a,
    -4px 0 0 var(--o), 4px 0 0 var(--o), 0 -4px 0 var(--o), 0 4px 0 var(--o),
    0 12px 0 rgba(2, 8, 18, .45);
  transition: transform .12s steps(2), background-color .12s steps(2);
  animation: float 4s steps(8) infinite;
}
.game-ico { width: 48px; height: 48px; flex: none; margin: -6px 0; }
.game:hover { background: #fff0cc; transform: translateY(-3px); }
.game:active { transform: translateY(3px); box-shadow: inset 0 4px 0 #fff8e6, inset 0 -6px 0 #d9b98a, -4px 0 0 var(--o), 4px 0 0 var(--o), 0 -4px 0 var(--o), 0 4px 0 var(--o), 0 4px 0 rgba(2, 8, 18, .45); }
.game:focus-visible { outline: 4px solid #8fd3ee; outline-offset: 8px; }

/* Oyuna geçerken ekran pikselli kararır */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #06162b;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s steps(5);
}
body.leaving::after { opacity: 1; }

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .game { animation: none; transition: none; }
  body::after { transition: none; }
}