@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Josefin+Sans:wght@300;400;600;700&display=swap');

/* TETRIS — Backgammon uyumlu modern tasarım */

:root {
  --bw: min(700px, calc(100vw - 2rem));
  --grid-size: calc(var(--bw) * 0.045);
  --canvas-w: calc(var(--grid-size) * 10);
  --canvas-h: calc(var(--grid-size) * 20);
  
  --bg:          #090d13;
  --txt:         #f0e0c0;
  --accent:      #d4a030;
  --dim:         #907050;
  --soft:        rgba(212,160,48,.14);
  --shell:       linear-gradient(145deg,#5c3a16,#1a1006);
  --board-bg:    linear-gradient(160deg,#241405,#100a02);
  --board-brd:   #6d4820;
  --panel-bg:    linear-gradient(160deg,rgba(17,25,37,.98),rgba(8,13,21,.98));
  --panel-brd:   rgba(212,160,48,.22);
  --muted:       rgba(255,255,255,.05);
  --shadow:      0 20px 50px rgba(0,0,0,.46);
}

[data-theme="light"] {
  --bg:          #f4ede2;
  --txt:         #2a1a0a;
  --accent:      #b08020;
  --dim:         #6a5a40;
  --shell:       linear-gradient(145deg,#d7c19a,#9d7347);
  --board-bg:    linear-gradient(160deg,#ccb58e,#9f7652);
  --board-brd:   #8a6a40;
  --panel-bg:    linear-gradient(160deg,rgba(232,224,208,.98),rgba(208,200,184,.98));
  --panel-brd:   rgba(160,120,40,.24);
  --muted:       rgba(0,0,0,.04);
  --shadow:      0 18px 40px rgba(79,53,26,.18);
}

body { background: #F1F5F9; }
.tetris-page {
  min-height: 100vh;
  background: #ffffff;
}
[data-theme="dark"] .tetris-page {
  background: linear-gradient(180deg, rgba(12, 16, 22, 0.88), rgba(8, 11, 15, 0.7));
}

#tetris-app {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(1rem,3vw,1.5rem) clamp(.6rem,3vw,1.1rem) 3rem;
  font-family: 'Josefin Sans',sans-serif;
  color: var(--txt);
  background: #ffffff;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
}
[data-theme="dark"] #tetris-app {
  background: transparent;
}
    
    [data-theme="dark"] body {
    background: #0D1425; /* veya istediğiniz koyu ton */
}
#tetris-app::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at top,rgba(212,160,48,.12),transparent 30%);
}

#tetris-app h1 {
  text-align:center;
  font-family:'Amiri',serif;
  font-size: clamp(1.9rem,5vw,3.2rem);
  font-weight:700; color:var(--accent);
  filter:drop-shadow(0 4px 16px rgba(212,160,48,.26));
  margin-bottom:.15rem; letter-spacing:.04em;
}
#tetris-app .sub {
  text-align:center; font-size:clamp(.72rem,2vw,.8rem);
  color:var(--dim); font-style:italic;
  margin-bottom:clamp(.8rem,2vw,1.2rem);
  letter-spacing:.18em; text-transform:uppercase;
}

.tv-main {
  display:flex;
  flex-direction:column;
  gap:.9rem;
  position:relative;
  z-index:1;
  background: #ffffff;
  border-radius: clamp(24px, 3vw, 34px);
  padding: clamp(.85rem, 2.2vw, 1.3rem);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  overflow: hidden;
}
[data-theme="dark"] .tv-main {
  background: linear-gradient(155deg, rgba(29, 18, 8, 0.94), rgba(13, 8, 3, 0.98));
  box-shadow: 0 20px 48px rgba(0,0,0,.32);
  border-color: rgba(212,160,48,.16);
}
.tv-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, .08), transparent 22%),
    radial-gradient(circle at bottom right, rgba(148, 163, 184, .08), transparent 24%);
  pointer-events: none;
}

.tv-panels-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

.tv-panel {
  background:var(--panel-bg); border:1px solid var(--panel-brd);
  border-radius:16px; padding: clamp(.65rem,2vw,.95rem);
  box-shadow:var(--shadow); backdrop-filter:blur(6px);
  flex: 1 1 220px; min-width:0; max-width:320px;
  box-sizing:border-box; overflow:hidden;
}
.tv-pt {
  font-size:clamp(.58rem,1.5vw,.64rem); letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:.6rem;
  border-bottom:1px solid var(--panel-brd); padding-bottom:.4rem; font-weight:700;
}

.tv-btn {
  width:100%; padding: clamp(.55rem,1.5vw,.72rem) clamp(.6rem,2vw,.8rem);
  border-radius:12px; border:1px solid var(--panel-brd);
  background:rgba(212,160,48,.07); color:var(--accent);
  font-family:'Josefin Sans',sans-serif;
  font-size: clamp(.68rem,1.8vw,.76rem);
  letter-spacing:.1em; cursor:pointer;
  transition:all .18s ease; margin-bottom:.4rem;
  text-transform:uppercase; box-shadow:0 8px 16px rgba(0,0,0,.14);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-sizing:border-box; min-width:0;
}
.tv-btn:hover { background:rgba(212,160,48,.16); border-color:var(--accent); transform:translateY(-1px); }
.tv-btn:disabled { opacity:.35; cursor:default; transform:none; }
.tv-btn.roll {
  background:linear-gradient(135deg,var(--accent),#b08020);
  color:#1a0a00; border:none; font-weight:700;
  font-size: clamp(.78rem,2vw,.88rem);
  padding: clamp(.65rem,1.8vw,.85rem);
  box-shadow:0 10px 22px rgba(212,160,48,.28);
}
.tv-btn.roll:hover:not(:disabled) { background:linear-gradient(135deg,#e0b040,#c09030); }
.tv-btn.danger { color:#c04040; border-color:rgba(192,64,64,.24); }
.tv-btn.danger:hover { background:rgba(192,64,64,.1); border-color:#c04040; }

/* Açılışta "Yeni Oyun" butonuna dikkat çekecek nabız efekti */
.tv-btn.attract {
  animation: tv-pulse 1.6s ease-in-out infinite;
}
@keyframes tv-pulse {
  0%, 100% { box-shadow: 0 10px 22px rgba(212,160,48,.28); transform: scale(1); }
  50%      { box-shadow: 0 12px 32px rgba(212,160,48,.6), 0 0 0 6px rgba(212,160,48,.15); transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .tv-btn.attract { animation: none; }
}

/* Canvas alanı */
.game-area {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.canvas-wrapper {
  position: relative;
}
#boardCanvas {
  display: block;
  width: var(--canvas-w);
  height: var(--canvas-h);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--board-brd), var(--shadow);
  background: #0a1c14;
  image-rendering: crisp-edges;
}
.next-wrapper {
  text-align: center;
}
#nextCanvas {
  width: calc(var(--grid-size) * 6);
  height: calc(var(--grid-size) * 6);
  background: #0a1c14;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--board-brd), var(--shadow);
  image-rendering: crisp-edges;
}

/* Skor panelleri */
.score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.score-chip {
  padding: .5rem;
  border-radius: 12px;
  background: var(--muted);
  border: 1px solid rgba(212,160,48,.1);
  text-align: center;
}
.score-chip span {
  display: block;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.score-chip strong {
  font-size: 1.3rem;
  color: var(--accent);
  font-family: 'Amiri', serif;
}

/* Oyun bitti overlay */
.tv-result-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.87);
  display:flex;align-items:center;justify-content:center;
  z-index:2000;backdrop-filter:blur(6px);animation:tvFade .3s ease;
}
@keyframes tvFade{from{opacity:0}to{opacity:1}}
.tv-result-box {
  background:var(--panel-bg);border:2px solid var(--accent);
  border-radius:22px;padding:clamp(1.4rem,4vw,2rem) clamp(1.6rem,5vw,2.4rem);
  text-align:center;
  box-shadow:0 0 60px rgba(212,160,48,.18),0 20px 60px rgba(0,0,0,.9);
  animation:tvPop .25s ease; max-width: min(320px,90vw);
}
@keyframes tvPop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

/* Kontrol tuşları (mobil) */
.mobile-controls {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .5rem;
}
.mobile-controls .tv-btn {
  width: auto;
  padding: .5rem 1.2rem;
  font-size: 1.2rem;
}

/* Responsive */
@media(max-width:640px) {
  .game-area {
    flex-direction: column;
    align-items: center;
  }
}