/* demo_stage_layout.css */

/* DEMO BASE — фон, топбар, кнопки, общий layout */

:root{
  --fg:#e9ecff;
  --panel-bd:rgba(255,255,255,.12);
  --shadow:0 18px 60px rgba(0,0,0,.45);

  --blue:#143d8a; --blue-2:#1a4aa6; --lime:#e8ff86;
  --info:#3aa6ff; --red:#ff4d6d;

  /* rails/center */
  --rail-left:clamp(240px,22vw,300px);
  --rail-right:clamp(280px,26vw,360px);
  --center-max:clamp(1080px,72vw,1320px);   /* ↑ шире дефолт */

  /* отступы сцены */
  --gap:20px; --pad-inline:24px; --pad-bottom:20px;
  --topbar-h:60px;
  --stage-top-gap:16px;
  --sticky-top:calc(var(--stage-top-gap) + 12px);
}

*{box-sizing:border-box;}
html,body{height:100%;}
html, body { margin:0; padding:0; }       /* фикс пустых краёв */
html,body{overflow:hidden;}
@media (max-width:1439px){html,body{overflow:auto;}}
/* MOBILE FIX — отключаем жёсткую высоту/скролл */
@media (max-width: 900px) {
  html,
  body {
    height: auto;        /* вместо 100% */
    min-height: 100%;    /* чтобы фон тянулся */
    overflow: auto;      /* разрешаем скролл */
  }
}

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;
  font:600 16px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/* ---------- 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:var(--topbar-h);
  padding:8px 18px;
  background:linear-gradient(180deg, rgba(8,14,45,.95), rgba(8,14,45,.82));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--panel-bd);
  column-gap:14px;
}
@supports (padding:max(0px)){
  .topbar{
    padding-left:max(18px, env(safe-area-inset-left,0));
    padding-right:max(18px, env(safe-area-inset-right,0));
  }
}
.topbar-left{grid-area:left;display:flex;align-items:center;gap:12px;min-width:0;}
.game-title{grid-area:title;justify-self:center;min-width:0;text-align:center;}
.top-actions{grid-area:actions;justify-self:end;display:flex;gap:8px;flex-wrap:wrap;min-width:0;}

.brand{
  font-weight:900; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(13px,1.4vw,17px);
  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; font-weight:900; letter-spacing:.03em; text-transform:uppercase;
  font-size:clamp(20px,3vw,32px);
  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;
}
@keyframes title-gradient{0%{background-position:0%}100%{background-position:200%}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;min-width:82px;padding:0 14px;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,opacity .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-info:hover{background:color-mix(in srgb,var(--info) 85%,#fff);}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff;}
.btn-danger:hover{background:color-mix(in srgb,var(--red) 85%,#fff);}

/* TIMER */
.topbar-timer{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-inline-size:120px;height:34px;padding:0 12px;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(18px,2.4vw,26px);
  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);
}

/* ---------- SCENE LAYOUT ---------- */
.stage{
  display:grid;
  grid-template-columns:minmax(0,var(--rail-left)) minmax(0,1fr) minmax(0,var(--rail-right));
  grid-template-areas:"left center right";
  gap:var(--gap);
  padding:calc(var(--topbar-h) + var(--stage-top-gap)) var(--pad-inline) var(--pad-bottom);
  align-items:start;
  min-height:100vh;
}
@supports (height:100svh){.stage{min-height:100svh}}
@supports (height:100dvh){.stage{min-height:100dvh}}

.stage-left{grid-area:left;display:flex;flex-direction:column;gap:16px;min-width:0;}
.stage-center{grid-area:center;min-width:0;}
.stage-right{grid-area:right;display:flex;flex-direction:column;gap:16px;min-width:0;}

.stage-center .board-frame{
  margin-inline:auto;
  max-width:min(var(--center-max),100%);
  width:100%;
}

.game-grid{
  width: 100%;
  max-width: 98%;
  box-sizing: border-box;
  margin-inline: 0;
}

.board-surface{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* одна колонка до 1439px */
@media (max-width:1439.98px){
  :root{--gap:14px;--pad-inline:16px;--pad-bottom:16px;--stage-top-gap:14px;}
  .stage{
    grid-template-columns:1fr;
    grid-template-areas:"center" "left" "right";
    gap:var(--gap);
  }
  .stage-center .board-frame{max-width:100%;}
}

/* Шире центр на больших экранах */
@media (min-width:1600px){
  :root{ --center-max: clamp(1200px, 74vw, 1400px); }
}
@media (min-width:1920px){
  :root{ --pad-bottom:16px; }
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;}
}

/* ==== Mobile layout for DEMO (iPhone и др.) ==== */
@media (max-width: 900px) {

  /* сцена */
  .stage {
    padding: calc(var(--topbar-h) + 8px) 12px 16px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* доска */
  .stage-center .board-frame {
    width: 100% !important;
    max-width: 100% !important;
  }

  .board-box,
  .board-frame,
  .board-surface {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* игроки */
  .players-panel {
    position: static !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .players-list {
    display: flex !important;
    flex-direction: column !important;  /* ← вертикально, друг под другом */
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .player-row {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}

/* ==== Move players panel down on mobile ==== */
@media (max-width: 900px) {
  .players-panel {
    margin-top: 55px !important; /* чтобы toast не перекрывал */
  }
}

/* safe-area fix */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    body {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      padding-left: max(0px, env(safe-area-inset-left));
      padding-right: max(0px, env(safe-area-inset-right));
    }
  }
}