/* demo_game_base.css */


:root{
  /* палитра (совместима с твоими var(--...)) */
  --fg:#eef2ff;
  --panel-bd:rgba(255,255,255,.12);
  --blue:#143a76;
  --blue-2:#1a4a92;
  --lime:#e3ff88;
  --info:#3aa9ff;
  --red:#ff4d6d;

  --shadow: 0 14px 40px rgba(0,0,0,.45);
}

/* фон и сглаживание */
html, body {
  margin: 0;          /* убираем UA-margin */
  padding: 0;
}

html,body{ height:100%; }
body{
  color:var(--fg);
  background:url("/static/assets/images/background.jpg") no-repeat center/cover fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

/* на узких — разрешаем скролл */
@media (max-width:1439px){ html,body{ overflow:auto; } }

/* ===== topbar ===== */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"left title actions";
  align-items:center;
  height:64px; padding:10px 24px;
  background:linear-gradient(180deg, rgba(8,14,45,.95), rgba(8,14,45,.80));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--panel-bd);
  column-gap:16px;
}

.topbar-left{ grid-area:left; display:flex; align-items:center; gap:16px; }
.game-title{ grid-area:title; justify-self:center; }
.top-actions{ grid-area:actions; justify-self:end; display:flex; gap:10px; flex-wrap:wrap; }

/* бренд */
.brand{
  font-size:clamp(14px,1.6vw,18px);
  font-weight:900; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  background:linear-gradient(90deg,#66a6ff,#89f7fe,#66a6ff);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 10px rgba(102,166,255,.35), 0 0 20px rgba(137,247,254,.25);
  animation:brand-gradient 5s linear infinite;
}
@keyframes brand-gradient{ 0%{background-position:0%}100%{background-position:200%} }

/* тайтл */
.game-title{
  margin:0; line-height:1; text-align:center; white-space:nowrap;
  font-weight:900; letter-spacing:.03em; text-transform:uppercase;
  font-size:clamp(22px,3.2vw,34px);
  background:linear-gradient(90deg,#ffe76a,#ffbb55,#ffe76a);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 12px rgba(255,231,106,.35), 0 4px 18px rgba(255,187,85,.25);
  animation:title-gradient 6s linear infinite;
}
.topbar {
  position: relative;
}
.game-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  grid-area: unset !important;
  pointer-events: none;
  white-space: nowrap;
}
@media (min-width: 981px) {
  .game-title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    grid-area: unset !important;
  }
}

/* ===== MOBILE: title returns into grid ===== */
@media (max-width: 980px) {
  .game-title {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto 0 !important;

    grid-area: title !important;
    justify-self: center !important;
    text-align: center !important;
    pointer-events: auto !important;
  }

  .topbar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "left actions"
      "title title" !important;
    row-gap: 6px !important;
    height: auto !important;
    padding: 8px 14px !important;
  }
}
@keyframes title-gradient{ 0%{background-position:0%}100%{background-position:200%} }

/* кнопки */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; min-width:82px; padding:0 16px; border-radius:999px;
  font-weight:800; letter-spacing:.01em; font-size:14px;
  background:rgba(255,255,255,.08); color:var(--fg);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  cursor:pointer;
  transition: background-color .2s ease, transform .1s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.3); }
.btn:active{ transform:scale(.97); }
.btn-ghost{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#eee; }
.btn-info{ background:var(--info); border-color:var(--info); color:#fff; }
.btn-danger{ background:var(--red);  border-color:var(--red);  color:#fff; }
.btn-info:hover{ background:color-mix(in srgb, var(--info) 85%, #fff); }
.btn-danger:hover{ background:color-mix(in srgb, var(--red) 85%, #fff); }
.btn-info:active,.btn-danger:active{ box-shadow:inset 0 0 6px rgba(0,0,0,.4); }

/* таймер в топбаре */
.topbar-timer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-inline-size:132px; height:36px; padding:0 14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(7,10,30,.92), rgba(7,10,30,.86));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  font-weight:900; letter-spacing:.08em; white-space:nowrap; overflow:hidden;
}
.timer-label{
  font-size:clamp(12px,1.4vw,14px);
  background:linear-gradient(90deg,#ffe76a,#ffbb55,#ffe76a);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 12px rgba(255,231,106,.35),0 4px 18px rgba(255,187,85,.25);
  animation:title-gradient 6s linear infinite;
}
#timer-value{
  --digits-size:clamp(20px,2.6vw,28px);
  position:relative; display:inline-block;
  font:900 var(--digits-size)/1.05 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  -webkit-text-fill-color:#fff!important; color:#fff!important;
  text-shadow:0 0 8px rgba(255,255,255,.18), 0 0 18px rgba(255,255,255,.12);
  transition:opacity .18s ease, transform .18s ease, filter .18s ease, text-shadow .18s ease;
}
/* состояния (на будущее js) */
.topbar-timer[data-state="running"] #timer-value{ animation: timer-glow 2.6s ease-in-out infinite; }
.topbar-timer[data-state="running"] #timer-value::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);
  transform:translateX(-120%); animation: timer-sheen 2.8s linear infinite;
  pointer-events:none; mix-blend-mode:screen;
}
.topbar-timer[data-state="running"][data-critical="1"] #timer-value{
  text-shadow:0 0 10px rgba(255,90,90,.6), 0 0 22px rgba(255,60,60,.45);
  animation: critical-pulse .8s ease-in-out infinite;
}
.topbar-timer[data-state="paused"] #timer-value{ animation: paused-breathe 2.2s ease-in-out infinite; }
.topbar-timer[data-state="done"] #timer-value{ animation: timer-blink 1s steps(2,end) 6; }

@keyframes timer-glow{ 0%,100%{text-shadow:0 0 8px rgba(255,255,255,.18),0 0 18px rgba(255,255,255,.12)} 50%{text-shadow:0 0 12px rgba(255,255,255,.28),0 0 24px rgba(255,255,255,.18)} }
@keyframes timer-sheen{ 0%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }
@keyframes paused-breathe{ 0%,100%{transform:translateY(0) scale(1); opacity:1} 50%{transform:translateY(-1px) scale(1.02); opacity:.92} }
@keyframes timer-blink{ 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes critical-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.055)} }

/* адаптив topbar */
@media (max-width:1200px){ .game-title{ white-space:normal; line-height:1.05; letter-spacing:.02em; } }

@media (max-width:760px){
  .top-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .top-actions .btn{ width:100%; min-width:0; }
  .timer-label{ display:none; }
  .topbar-timer{ min-inline-size:96px; padding:0 10px; gap:8px; }
  #timer-value{ --digits-size:clamp(18px,5vw,24px); }
}

@supports (padding: max(0px)){
  .topbar{
    padding-left:  max(24px, env(safe-area-inset-left, 0));
    padding-right: max(24px, env(safe-area-inset-right, 0));
  }
}

/* ================================
   WELCOME MODAL — центр + анимация
   ================================ */

/* у контейнера доски должно быть position:relative; */
.board-surface { position: relative; }

/* центрируем ТОЛЬКО welcome-модалку: фиксируем размеры и двигаем в центр */
#welcome-modal .qmodal-content{
  /* вместо "inset: var(--board-inset)" — фиксируем в центре */
  position: absolute;
  left: 50%;
  top: 50%;

  /* карта модалки: ширина/высота с ограничениями */
  width: min(920px, 92vw);
  max-height: min(78vh, 92vh);

  /* центрирование + начальный scale для анимации */
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0;

  /* приятное «всплытие» */
  transition:
    opacity var(--qmodal-dur,260ms) ease,
    transform var(--qmodal-dur,260ms) cubic-bezier(.2,.8,.2,1);

  /* визуальный стиль карточки */
  background: linear-gradient(180deg, rgba(12,16,44,.96), rgba(12,16,44,.92));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* когда модалка открыта — доводим до 1 */
#welcome-modal.is-open .qmodal-content{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* лёгкий «шёлк» на заголовке */
#welcome-modal .qmodal-title{
  font-size: clamp(18px, 2.6cqi, 24px);
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffe76a, #ffb24d, #ffe76a);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(255,231,106,.35), 0 4px 18px rgba(255,187,85,.25);
  animation: welcome-sheen 6s linear infinite;
}

@keyframes welcome-sheen{
  0% { background-position: 0% center; }
  100%{ background-position: 200% center; }
}

/* текст «пожирнее» и читабельнее */
#welcome-modal .qtext{
  padding: 16px 18px;
}
#welcome-modal .qtext-inner{
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .015em;
}
#welcome-modal ul{ padding-left: 1.15em; margin: .5em 0 0; }
#welcome-modal li{ margin-bottom: 8px; }

/* футер: кнопки справа, на мобильных — стекаются */
#welcome-modal .qmodal-footer{
  justify-content: flex-end;
  gap: 10px;
}
#welcome-modal .qmodal-footer .btn{
  font-weight: 800;
  letter-spacing: .02em;
}

/* чекбокс «Больше не показывать» — внизу слева */
#welcome-modal .dontshow-row{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 14px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}
#welcome-dontshow{
  inline-size: 16px; block-size: 16px;
  accent-color: #ffe76a;
}

/* затемнение — чуть насыщеннее для «глубины» */
#welcome-modal .qmodal-backdrop{
  background: linear-gradient(180deg, rgba(7,10,30,.62), rgba(7,10,30,.80));
  backdrop-filter: blur(2px);
}

/* адаптив */
@media (max-width: 900px){
  #welcome-modal .qmodal-content{
    width: min(640px, 94vw);
  }
  #welcome-modal .qtext-inner{
    font-size: clamp(14px, 3.2cqi, 18px);
    text-align: left;
  }
}

/* только для welcome-модалки — не двигаем/не скейлим сам контейнер */
#welcome-modal {
  opacity: 0;               /* по умолчанию скрыт */
  transform: none !important;
  pointer-events: none;
}
#welcome-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* анимацию делаем на .qmodal-content (центр уже есть у тебя) */
#welcome-modal .qmodal-content {
  will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0;
}
#welcome-modal.is-open .qmodal-content {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ===========================
   EXIT MODAL (центр + danger)
   =========================== */

/* контейнер */
#exit-modal{
  position: fixed;
  inset: 0;
  z-index: 2000;

  /* центрирование и появление */
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}
#exit-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* затемнение */
#exit-modal .modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

/* карточка */
#exit-modal .modal-content{
  position: relative;
  width: min(460px, 92vw);
  background: #191c2a;
  color: #e9ecff;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);

  /* анимация всплытия */
  transform: translateY(-6px) scale(.96);
  opacity: 0;
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    opacity   260ms ease;
}
#exit-modal.is-open .modal-content{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* danger-подсветка */
#exit-modal .modal-danger{
  border-color: rgba(255,77,109,.45);
  box-shadow: 0 24px 80px rgba(255,77,109,.25);
}

/* шапка/тело/футер */
#exit-modal .modal-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#exit-modal .modal-header h2{
  margin:0; font-weight:800; font-size:20px; color:#fff;
}
#exit-modal .modal-close{
  background:transparent; border:0; color:#fff; font-size:22px;
  line-height:1; cursor:pointer; opacity:.6; transition:opacity .2s;
}
#exit-modal .modal-close:hover{ opacity:1; }

#exit-modal .modal-body{ padding:16px; font-size:15px; }
#exit-modal .modal-footer{
  padding:14px 16px; display:flex; justify-content:flex-end; gap:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.game-cell.used-cell { color: transparent; pointer-events: none; }