/* ============================================================
   PIXEL FORGE — design tokens
   Tema: retro LCD el konsolu. Sert pikselli gölgeler, yuvarlatma yok,
   ekran üzerinde ince tarama (scanline) katmanı.
   ============================================================ */

:root{
  /* page */
  --page-bg: #121210;
  --panel-bg: #1c1c16;
  --panel-bg-raised: #24241c;
  --ink: #ece7d6;
  --ink-dim: #a8a493;
  --line: #3a3a30;

  /* device shell (khaki/olive plastic) */
  --shell: #9a9478;
  --shell-dark: #6f6a53;
  --shell-darker: #4a4636;
  --shell-shadow: #2c2a20;

  /* LCD greens */
  --lcd-0: #0a1a0a;   /* screen background / off */
  --lcd-1: #0f380f;   /* darkest ink */
  --lcd-2: #306230;
  --lcd-3: #8bac0f;
  --lcd-4: #9bbc0f;   /* brightest / accent */

  --accent: var(--lcd-4);
  --accent-ink: #0f1a0a;

  --danger: #c1443a;

  --font-display: "Press Start 2P", monospace;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius: 0px;
  --shadow-step: 4px;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
}

body{
  background-image:
    radial-gradient(circle at 20% 10%, rgba(139,172,15,0.05), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(139,172,15,0.04), transparent 40%);
}

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

a{ color: var(--lcd-4); }

/* ---------------- header ---------------- */

.site-header{
  padding: 48px 0 28px;
  border-bottom: 2px solid var(--line);
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  display:inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line);
}

.logo{
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.4;
  margin: 18px 0 10px;
  letter-spacing: 0.02em;
}
.logo span{ color: var(--accent); }

.tagline{
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 14px;
  margin: 0;
}

/* ---------------- layout ---------------- */

.layout{
  display:grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(300px, 0.9fr);
  gap: 40px;
  padding: 44px 24px 60px;
  align-items: start;
}

@media (max-width: 860px){
  .layout{ grid-template-columns: 1fr; padding-top: 32px; }
}

/* ---------------- device (left) ---------------- */

.device{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
}

.device__shell{
  width:100%;
  max-width: 520px;
  background: var(--shell);
  border: 3px solid var(--shell-darker);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-step) var(--shadow-step) 0 0 var(--shell-shadow);
  position: relative;
}

.device__vents{
  position:absolute;
  top: 10px;
  right: 16px;
  width: 60px;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--shell-darker) 0px, var(--shell-darker) 3px,
    transparent 3px, transparent 8px
  );
}

.device__screen-bezel{
  background: var(--shell-darker);
  padding: 16px;
  border: 2px solid var(--shell-shadow);
}

.device__screen{
  position:relative;
  background: var(--lcd-0);
  aspect-ratio: 1 / 1;
  width:100%;
  overflow:hidden;
  border: 2px solid #000;
}

.device__screen::after{
  /* scanlines */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.18) 0px,
    rgba(0,0,0,0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

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

.dropzone{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--lcd-0);
  color: var(--lcd-3);
  cursor:pointer;
  transition: background 0.15s ease;
}
.dropzone.is-dragover{ background: #16330f; }
.dropzone.is-hidden{ display:none; }

.dropzone__content{
  text-align:center;
  padding: 20px;
}
.dropzone__content svg{ margin-bottom: 10px; }
.dropzone__content p{
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 14px;
  letter-spacing: 0.04em;
}

.scan-flicker{
  position:absolute;
  inset:0;
  background: var(--lcd-4);
  opacity:0;
  pointer-events:none;
}
.scan-flicker.is-playing{
  animation: flicker 0.4s steps(2, end);
}
@keyframes flicker{
  0%{ opacity:0.55; }
  50%{ opacity:0; }
  75%{ opacity:0.25; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .scan-flicker.is-playing{ animation: none; }
}

/* controls row: d-pad + buttons, purely decorative + functional buttons */

.device__controls-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: 18px;
  padding: 0 4px;
}

.dpad{
  position:relative;
  width: 54px;
  height: 54px;
  opacity: 0.9;
}
.dpad__v, .dpad__h{
  position:absolute;
  background: var(--shell-darker);
  box-shadow: 2px 2px 0 0 var(--shell-shadow);
}
.dpad__v{ left:20px; top:0; width:14px; height:54px; }
.dpad__h{ left:0; top:20px; width:54px; height:14px; }

.device__buttons{
  display:flex;
  gap: 14px;
}

.btn{
  font-family: var(--font-mono);
  font-weight:600;
  border: 2px solid var(--shell-shadow);
  border-radius: var(--radius);
  cursor:pointer;
  background: var(--panel-bg-raised);
  color: var(--ink);
  transition: transform 0.05s ease;
}
.btn:active{ transform: translate(2px, 2px); box-shadow:none !important; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--round{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 18px;
  background: var(--shell-dark);
  color: var(--panel-bg);
  box-shadow: 3px 3px 0 0 var(--shell-shadow);
}
.btn--accent{
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--pixel{
  font-size: 11px;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 3px 3px 0 0 var(--lcd-1);
  letter-spacing: 0.04em;
}
.btn--pixel:hover{ filter: brightness(1.05); }

.btn--full{
  width:100%;
  margin-top: 6px;
  padding: 16px;
  font-size: 12px;
}

.device__caption{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  margin: 0;
  text-align:center;
}

/* ---------------- control panel (right) ---------------- */

.panel{
  background: var(--panel-bg);
  border: 2px solid var(--line);
  padding: 26px 26px 30px;
  display:flex;
  flex-direction:column;
  gap: 26px;
}

.panel__group{
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.panel__group:last-of-type{ border-bottom:none; padding-bottom:0; }

.panel__title{
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--accent);
  margin: 0 0 16px;
  letter-spacing: 0.03em;
}

.control{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 14px;
}
.control:last-child{ margin-bottom:0; }

.control label{
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--ink);
}

.control select{
  flex: 1 1 auto;
  background: var(--panel-bg-raised);
  color: var(--ink);
  border: 2px solid var(--line);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 13px;
}

.control input[type="range"]{
  flex: 1 1 auto;
  accent-color: var(--accent);
  height: 4px;
}

.control__value{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  min-width: 46px;
  text-align:right;
}

.control--checkbox{
  justify-content:space-between;
}
.control--checkbox input[type="checkbox"]{
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

/* select needs its own row when paired with label above on narrow screens */
#levelsControl{ margin-top: 14px; }

.panel__note{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  margin:0;
  line-height:1.6;
}

/* ---------------- footer ---------------- */

.site-footer{
  border-top: 2px solid var(--line);
  padding: 20px 0 40px;
}
.site-footer p{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  margin:0;
}

/* full-page faint scanline overlay for atmosphere (very subtle) */
.scanline-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index: 50;
  opacity: 0.03;
  background: repeating-linear-gradient(
    0deg, #fff 0px, #fff 1px, transparent 1px, transparent 4px
  );
}