/*
  game-room-theme.css — стилі саме для сторінки game_room.html.

  Токени --ml-bg-deep/--ml-glass-bg/--ml-accent-mint/--ml-accent-purple/
  --ml-text-primary НЕ вводять нових кольорів — мапляться на існуючі
  токени mindlounge.css (--ink/--panel/--brass/--purple/--parchment),
  щоб сторінка гри лишалась візуально консистентною з рештою порталу.

  --board-light/--board-dark/--board-highlight — СПРАВЖНІ нові токени:
  аналогів кольору клітинок дошки в проєкті ще не було.
*/

:root{
  --ml-bg-deep: var(--ink);
  --ml-glass-bg: rgba(30, 40, 71, 0.45);
  --ml-accent-mint: var(--brass);
  --ml-accent-purple: var(--purple);
  --ml-text-primary: var(--parchment);

  --board-light: #2C3647;
  --board-dark: #1A2230;
  --board-highlight: rgba(45, 212, 191, 0.3);
}

/* ---------------------------------------------------------
   OVERRIDE ДОШКИ chessboard.js (класи стабільні між версіями 1.0.0)
   --------------------------------------------------------- */

.white-1e1d7{ background-color: var(--board-light) !important; }
.black-3c85d{ background-color: var(--board-dark) !important; }

/* Підсвітка ходу — та сама конвенція (.highlight-square), що вже
   використовувалась у games/chess.html, лише новий колір. */
.highlight-square{
  box-shadow: inset 0 0 0 1000px var(--board-highlight) !important;
}

/* ---------------------------------------------------------
   VERTICAL FLOW: Опонент -> Дошка -> Гравець -> Quick Chat
   --------------------------------------------------------- */

.game-room{
  max-width: 480px;   /* на десктопі дошка не розтягується абсурдно широко */
  margin: 0 auto;
}

.gr-player-panel{
  background: var(--ml-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: .6rem .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.gr-player-identity{
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.gr-player-identity .avatar{
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple-dim);
  color: var(--ml-text-primary);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:600; font-size:.8rem;
  flex-shrink:0;
}
.gr-player-identity .name{
  color: var(--ml-text-primary);
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------
   SMART ТАЙМЕР: мінтове світіння активному, м'яка пульсація <10с
   --------------------------------------------------------- */

.gr-timer{
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--muted);
  padding: .2rem .6rem;
  border-radius: .5rem;
  transition: color .2s ease, text-shadow .2s ease;
}
.gr-timer.active{
  color: var(--ml-accent-mint);
  text-shadow: 0 0 8px rgba(51, 242, 176, .5);
}
.gr-timer.critical{
  animation: gr-timer-pulse 1s ease-in-out infinite;
}

@keyframes gr-timer-pulse{
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce){
  .gr-timer.critical{ animation: none; }
}

/* ---------------------------------------------------------
   ДОШКА: 100% ширини контейнера, співвідношення 1:1
   --------------------------------------------------------- */

.gr-board-wrap{
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: .75rem 0;
}
#game-room-board{
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------
   QUICK CHAT: лише фіксовані кнопки, жодного текстового input
   --------------------------------------------------------- */

.gr-quick-chat{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.gr-quick-chat-btn{
  background: var(--ml-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: .5rem .3rem;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
  transition: border-color .15s ease, color .15s ease;
}
.gr-quick-chat-btn:hover{
  border-color: var(--ml-accent-mint);
  color: var(--ml-text-primary);
}
.gr-quick-chat-btn .emoji{
  display: block;
  font-size: 1.2rem;
  margin-bottom: .15rem;
}

/* Спливаюча бульбашка Quick Chat над дошкою */
.gr-chat-bubble{
  position: absolute;
  background: var(--ml-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ml-accent-purple);
  color: var(--ml-text-primary);
  border-radius: .6rem;
  padding: .3rem .6rem;
  font-size: .85rem;
  pointer-events: none;
  animation: gr-bubble-fade 3s ease forwards;
  z-index: 5;
}
@keyframes gr-bubble-fade{
  0%   { opacity: 0; transform: translateY(4px); }
  10%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------
   POST-MATCH ОВЕРЛЕЙ
   --------------------------------------------------------- */

.game-room{
  position: relative; /* точка відліку для абсолютного оверлею */
}

.gr-postmatch-overlay{
  position: absolute;
  inset: 0;
  z-index: 1050;
  background: rgba(22, 28, 40, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  animation: gr-postmatch-fadein .4s ease forwards;
}
.gr-postmatch-overlay.d-none{ display: none; }

@keyframes gr-postmatch-fadein{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.gr-postmatch-card{
  background: var(--ml-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.25rem;
  width: 100%;
  max-width: 340px;
  position: relative;
  transition: max-width .25s ease, padding .25s ease;
}

.gr-postmatch-collapse{
  position: absolute;
  top: .6rem; right: .6rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  transition: border-color .15s ease, color .15s ease;
}
.gr-postmatch-collapse:hover{ border-color: var(--ml-accent-mint); color: var(--ml-text-primary); }

/* Результат: перемога = мінт; поразка/нічия = фіолетовий (НЕ червоний) */
.gr-result-badge.win{ color: var(--ml-accent-mint); }
.gr-result-badge.loss{ color: var(--ml-accent-purple); }
.gr-result-badge.draw{ color: var(--ml-accent-purple); }

/* Згорнутий стан (кнопка з іконкою ока): оверлей більше не дим лює
   дошку — можна проаналізувати фінальну позицію — і картка стає
   маленькою плашкою знизу. */
.gr-postmatch-overlay.collapsed{
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: flex-end;
  padding-bottom: .75rem;
  pointer-events: none; /* дошка під нею лишається клікабельною */
  animation: none;
  opacity: 1;
}
.gr-postmatch-overlay.collapsed .gr-postmatch-card{
  pointer-events: auto;
  max-width: none;
  width: auto;
  padding: .5rem .9rem;
}
.gr-postmatch-overlay.collapsed .gr-postmatch-full{ display: none; }
.gr-postmatch-overlay.collapsed .gr-postmatch-collapse{
  position: static;
  width: auto; height: auto;
  border: none;
  padding: 0;
}
.gr-postmatch-collapsed-only{ display: none; align-items: center; gap: .5rem; }
.gr-postmatch-overlay.collapsed .gr-postmatch-collapsed-only{ display: flex; }

/* ---------------------------------------------------------
   ОНБОРДИНГ-ПІДКАЗКА (Lazy Onboarding, лише перша гра/гостьова сесія)
   --------------------------------------------------------- */

.gr-onboarding-tip{
  position: absolute;
  inset: 0;
  z-index: 1040; /* нижче Post-match оверлею (1050), щоб не конфліктували */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: var(--ml-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: .75rem;
  color: var(--ml-text-primary);
  font-size: .95rem;

  /* Плавно зникає через 4с — без кнопок "ОК"/хрестика, зникнення єдина дія. */
  animation: gr-onboarding-fade 4s ease-in forwards;
}

@keyframes gr-onboarding-fade{
  0%   { opacity: 1; pointer-events: auto; }
  80%  { opacity: 1; pointer-events: auto; }
  100% { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce){
  .gr-onboarding-tip{
    /* Без плавного фейду (reduced motion) — підказка тримається повні 4с,
       тоді зникає одним дискретним кроком, а не безперервною анімацією. */
    animation: gr-onboarding-fade-reduced 4s step-end forwards;
  }
}

@keyframes gr-onboarding-fade-reduced{
  0%   { opacity: 1; pointer-events: auto; }
  99%  { opacity: 1; pointer-events: auto; }
  100% { opacity: 0; pointer-events: none; }
}