/* ══════════════════════════════════════════════
   OYUN SALONU — oyun.css
   Ana site style.css'in üzerine eklenir.
══════════════════════════════════════════════ */

/* ── SCOREBOARD FAB ─────────────────────────── */
.scoreboard-fab {
  position: fixed; top: .8rem; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem;
  background: var(--card-bg); border: 1px solid var(--bordeaux);
  border-radius: 2rem; padding: .4rem 1rem;
  backdrop-filter: blur(10px); z-index: 900;
  font-size: .85rem; color: var(--cream);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.score-chip { display: flex; align-items: center; gap: .3rem; font-weight: 700; }
.score-chip span { color: var(--rose); font-family: monospace; font-size: .95rem; }
.score-sep { color: var(--bordeaux); }

/* ── AŞİL FAB ──────────────────────────────── */
.asil-fab-wrap {
  position: fixed; bottom: 1.2rem; left: 1.2rem; z-index: 900;
}
.asil-fab-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--card-bg); border: 1px solid var(--bordeaux);
  font-size: 1.4rem; cursor: pointer;
  backdrop-filter: blur(8px); transition: all .2s;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.asil-fab-btn:hover { transform: scale(1.15); background: var(--glass); }

/* ── MENU ──────────────────────────────────── */
.menu-content {
  display: flex; flex-direction: column;
  align-items: center; gap: 1.2rem;
  width: 100%; max-width: 600px; padding: 3.5rem 1rem 2rem;
}
.menu-header { text-align: center; }
.menu-title {
  font-family: var(--font-display); font-size: clamp(1.8rem,6vw,2.8rem);
  color: var(--cream); margin: .3rem 0;
}
.menu-sub { color: var(--text2); font-size: .9rem; }

.game-cards {
  display: flex; flex-direction: column; gap: 1rem; width: 100%;
}
.game-card {
  background: var(--card-bg); border: 1px solid rgba(196,64,90,.25);
  border-radius: 1.2rem; padding: 1.3rem 1.2rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
  transition: transform .2s, box-shadow .2s;
}
.game-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(196,64,90,.2); }
.game-card-bonus { border-color: rgba(212,168,67,.3); }
.game-card-bonus:hover { box-shadow: 0 8px 32px rgba(212,168,67,.2); }
.game-card-icon { font-size: 2rem; margin-bottom: .4rem; }
.game-card-title {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--cream);
  margin-bottom: .3rem;
}
.game-card-desc { color: var(--text2); font-size: .85rem; line-height: 1.5; margin-bottom: .7rem; }
.game-card-meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.tag {
  font-size: .7rem; padding: .2rem .6rem; border-radius: 1rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--text2);
}
.difficulty-easy { border-color: #22c55e; color: #4ade80; }
.difficulty-medium { border-color: var(--gold); color: var(--gold); }
.difficulty-hard { border-color: var(--rose); color: var(--pink); }
.game-play-btn { width: 100%; justify-content: center; }

/* ── GAME SCREEN INNER ──────────────────────── */
.game-screen-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  width: 100%; max-width: 520px;
  padding: 3.5rem 1rem 2rem;
}
.game-top-bar {
  display: flex; align-items: center; gap: .8rem;
  width: 100%;
}
.btn-back {
  background: none; border: 1px solid var(--bordeaux);
  color: var(--text2); border-radius: 1.5rem;
  padding: .4rem .9rem; font-size: .8rem;
  cursor: pointer; font-family: var(--font-body);
  transition: all .2s; white-space: nowrap;
}
.btn-back:hover { background: var(--glass); color: var(--cream); }
.game-label {
  font-family: var(--font-display); font-size: 1rem;
  color: var(--pink); flex: 1;
}
.moves-counter { font-size: .82rem; color: var(--text2); white-space: nowrap; }

/* ── SUB VIEWS ─────────────────────────────── */
.sub-view { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.sub-view-title {
  font-family: var(--font-display); font-size: 1.3rem;
  color: var(--cream); text-align: center; line-height: 1.4;
}
.sub-view-eyebrow {
  font-size: .65rem; letter-spacing: .2em; color: var(--rose);
  text-transform: uppercase; text-align: center;
}
.sub-view-hint { color: var(--text2); font-size: .85rem; text-align: center; line-height: 1.6; }

/* ── PLAYER SELECT BTNS ─────────────────────── */
.player-select-btns { display: flex; flex-direction: column; gap: .7rem; width: 100%; }
.btn-player-sel {
  background: var(--card-bg); border: 1px solid rgba(196,64,90,.3);
  border-radius: 1rem; padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: .8rem;
  cursor: pointer; font-family: var(--font-body);
  color: var(--cream); font-size: .95rem;
  transition: all .2s; width: 100%; text-align: left;
}
.btn-player-sel:hover {
  background: var(--glass); border-color: var(--rose);
  transform: translateX(4px);
}
.psel-emoji { font-size: 1.6rem; }

/* ── TTT ────────────────────────────────────── */
.ttt-status-bar {
  width: 100%; text-align: center; display: flex;
  flex-direction: column; gap: .3rem;
}
.ttt-turn-indicator {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--cream);
}
.ttt-asil-comment {
  font-size: .8rem; color: var(--pink); font-style: italic;
  min-height: 1.2rem; transition: opacity .3s;
}
.ttt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .5rem; width: 100%; max-width: 320px;
}
.ttt-cell {
  aspect-ratio: 1; border-radius: 1rem;
  background: var(--card-bg); border: 2px solid rgba(196,64,90,.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 2.5rem; transition: all .2s;
  min-height: 90px; position: relative; overflow: hidden;
}
.ttt-cell:hover:not(.taken) { background: var(--glass); border-color: var(--bordeaux); transform: scale(1.03); }
.ttt-cell.taken { cursor: default; }
.ttt-cell.win-cell { border-color: var(--gold); box-shadow: 0 0 16px rgba(212,168,67,.5); }
.ttt-avatar {
  width: 70%; height: 70%; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--rose);
  animation: stickerPop .3s cubic-bezier(.34,1.56,.64,1);
}
.ttt-emoji-avatar {
  font-size: 2.2rem;
  animation: stickerPop .3s cubic-bezier(.34,1.56,.64,1);
}

/* ── WHEEL ──────────────────────────────────── */
.wheel-visual {
  position: relative; width: 240px; height: 240px;
  display: flex; align-items: center; justify-content: center;
}
.wheel-disc {
  width: 220px; height: 220px; border-radius: 50%;
  background: conic-gradient(
    #6b1a2a 0deg 45deg,
    #c4405a 45deg 90deg,
    #7c3d8c 90deg 135deg,
    #e8809a 135deg 180deg,
    #d4a843 180deg 225deg,
    #6b1a2a 225deg 270deg,
    #c4405a 270deg 315deg,
    #7c3d8c 315deg 360deg
  );
  border: 4px solid var(--gold);
  box-shadow: 0 0 20px rgba(212,168,67,.3);
  position: relative; transition: transform 0s;
}
.wheel-disc.spinning {
  animation: wheelSpin 2.5s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes wheelSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(1440deg); }
}
.wheel-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; z-index: 2;
}
.wheel-segment { display: none; }
.wheel-pointer {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem; color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(212,168,67,.6));
  z-index: 3;
}
.task-card {
  background: var(--card-bg); border: 1px solid rgba(212,168,67,.3);
  border-radius: 1.2rem; padding: 1.5rem; width: 100%;
  text-align: center; animation: modalIn .4s ease;
}
.task-icon { font-size: 2rem; margin-bottom: .5rem; }
.task-text {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--cream); line-height: 1.5;
}
.asil-comment-box {
  background: var(--glass); border: 1px solid var(--bordeaux);
  border-radius: .8rem; padding: .7rem 1rem;
  font-size: .85rem; color: var(--pink); font-style: italic;
  text-align: center; width: 100%;
}
.wheel-task-btns { display: flex; gap: .7rem; width: 100%; }
.wheel-task-btns .btn-primary, .wheel-task-btns .btn-secondary { flex: 1; justify-content: center; }

/* ── COMPLIMENT TIMER ───────────────────────── */
.big-timer {
  font-size: 6rem; font-family: var(--font-display); font-weight: 900;
  color: var(--rose); text-align: center; line-height: 1;
  text-shadow: 0 0 30px rgba(196,64,90,.5);
  min-width: 140px; min-height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.big-timer.pulse { animation: timerPulse .5s ease-in-out; }
@keyframes timerPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); color: #ff6b6b; }
}
.big-timer.urgent { color: #ff4444; animation: timerPulse .3s ease-in-out infinite; }
.timer-hint { color: var(--text2); font-size: .85rem; font-style: italic; }
.compliment-verdict-btns { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
.compliment-verdict-btns .btn-final { border: none; border-radius: 1rem; padding: .9rem 1.2rem; font-size: .9rem; font-weight: 600; cursor: pointer; font-family: var(--font-body); }

/* ── MEMORY MATCH ───────────────────────────── */
.memory-turn {
  color: var(--text2); font-size: .85rem; text-align: center;
}
.memory-turn strong { color: var(--pink); }
.memory-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .5rem; width: 100%; max-width: 360px;
}
.mem-card {
  aspect-ratio: 1; border-radius: .8rem; cursor: pointer;
  perspective: 600px; position: relative;
}
.mem-card-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
  transition: transform .4s ease; border-radius: .8rem;
}
.mem-card.flipped .mem-card-inner { transform: rotateY(180deg); }
.mem-card.matched .mem-card-inner { transform: rotateY(180deg); }
.mem-card-front, .mem-card-back {
  position: absolute; inset: 0; border-radius: .8rem;
  backface-visibility: hidden; display: flex;
  align-items: center; justify-content: center;
}
.mem-card-front {
  background: var(--card-bg); border: 2px solid rgba(196,64,90,.2);
  font-size: 1.8rem;
}
.mem-card-back {
  background: linear-gradient(135deg, var(--bordeaux), var(--rose));
  font-size: 2rem; transform: rotateY(180deg);
  border: 2px solid var(--rose);
}
.mem-card.matched .mem-card-front {
  background: rgba(34,197,94,.15); border-color: #22c55e;
}
.mem-card-front span { filter: grayscale(.3); }
.mem-card-back img {
  width: 80%; height: 80%; object-fit: cover; border-radius: 50%;
}
.memory-hint {
  color: var(--gold); font-size: .8rem; font-style: italic; text-align: center;
  min-height: 1.2rem;
}

/* ── HEART CATCH ────────────────────────────── */
.heartcatch-inner { padding-top: 3.5rem; }
.hc-timer-display { font-size: .85rem; color: var(--gold); white-space: nowrap; }
.hc-player-row { display: flex; justify-content: center; gap: 2rem; }
.hc-player-score { color: var(--text2); font-size: .9rem; }
.hc-player-score strong { color: var(--rose); }
.hc-score-display {
  font-size: 1rem; color: var(--cream); text-align: center;
  padding: .5rem 1rem; background: var(--glass); border-radius: 1rem;
  border: 1px solid var(--bordeaux); width: 100%;
}
.hc-score-display span { color: var(--rose); font-weight: 700; }
.hc-arena {
  width: 100%; height: 55vh; min-height: 300px; max-height: 480px;
  position: relative; overflow: hidden;
  background: rgba(107,26,42,.08); border: 1px solid rgba(196,64,90,.15);
  border-radius: 1.2rem; margin: .5rem 0;
}
.hc-target {
  position: absolute; font-size: 2rem; cursor: pointer;
  user-select: none; animation: hcFall linear forwards;
  transition: transform .1s;
  filter: drop-shadow(0 2px 6px rgba(196,64,90,.4));
}
.hc-target:active { transform: scale(1.5); }
@keyframes hcFall {
  from { transform: translateY(-60px) rotate(0deg); opacity: 1; }
  to   { transform: translateY(calc(55vh + 60px)) rotate(360deg); opacity: .2; }
}
.hc-asil-comment {
  color: var(--pink); font-size: .8rem; font-style: italic; text-align: center;
  min-height: 1.2rem;
}
.hc-final-scores { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
.hc-final-score {
  background: var(--card-bg); border: 1px solid var(--bordeaux);
  border-radius: .8rem; padding: .7rem 1rem; color: var(--cream);
  font-size: 1rem; text-align: center;
}
.hc-final-score strong { color: var(--rose); font-size: 1.2rem; }

/* ── RESULTS & NAV ──────────────────────────── */
.result-emoji { font-size: 3.5rem; text-align: center; }
.result-title {
  font-family: var(--font-display); font-size: 1.4rem;
  color: var(--cream); text-align: center;
}
.result-msg { color: var(--text2); font-size: .9rem; text-align: center; line-height: 1.6; }
.game-nav-btns { display: flex; gap: .7rem; width: 100%; flex-wrap: wrap; }
.game-nav-btns .btn-primary, .game-nav-btns .btn-secondary { flex: 1; justify-content: center; min-width: 120px; }

/* ── RESPONSIVE ─────────────────────────────── */
@media(max-width:480px) {
  .ttt-grid { max-width: 280px; }
  .ttt-cell { min-height: 80px; }
  .memory-grid { grid-template-columns: repeat(4,1fr); gap: .35rem; }
  .mem-card-front, .mem-card-back { font-size: 1.4rem; }
  .big-timer { font-size: 5rem; }
  .wheel-visual { width: 200px; height: 200px; }
  .wheel-disc { width: 185px; height: 185px; }
  .scoreboard-fab { font-size: .75rem; padding: .3rem .8rem; }
}

@media(min-width:768px) {
  .game-cards { display: grid; grid-template-columns: 1fr 1fr; }
  .game-card-bonus { grid-column: 1 / -1; }
  .ttt-grid { max-width: 360px; }
  .memory-grid { max-width: 400px; }
}

@media(min-width:1400px) {
  .menu-content, .game-screen-inner { max-width: 800px; }
  .menu-title { font-size: 3.5rem; }
  .ttt-grid { max-width: 480px; }
  .ttt-cell { min-height: 140px; font-size: 3.5rem; }
  .memory-grid { max-width: 500px; }
  .big-timer { font-size: 8rem; }
  .wheel-disc { width: 300px; height: 300px; }
  .wheel-visual { width: 320px; height: 320px; }
  .game-card-title { font-size: 1.4rem; }
  .game-card-desc { font-size: 1rem; }
}