/* VsimPPTX-like dark UI (fixed/clean) */
:root{
  --bg:#0b1627;
  --panel:#0e1e32;
  --panel2:#102742;
  --text:#eaf2ff;
  --muted:#a9b7d0;
  --line:rgba(255,255,255,.10);
  --accent:#32b561;
  --accent2:#2b5c9e;
  --danger:#ff3b57;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:26px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}
html, body { height:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);

  /* Суцільний фон + "шпалери" */
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 700px at 35% -10%, rgba(50,181,97,.18), transparent 60%),
    radial-gradient(900px 500px at 85% 5%, rgba(43,92,158,.18), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;

  /* важливо: скрол не в body, а в контейнерах */
  overflow: hidden;
}

/* Легке затемнення донизу — прибирає "різкий низ" */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.18) 100%);
}

.app{
  height:100vh;
  display:flex;
  overflow:hidden;
}

/* Sidebar */
.sidebar{
  width:360px;
  max-width:360px;
  background: linear-gradient(180deg, var(--panel), #0c1a2e 70%);
  border-right:1px solid var(--line);
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;

  /* скролиться тільки сайдбар */
  overflow:auto;
}

.brand{ padding:10px 10px 6px; }
.brand-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}
.brand-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  padding:6px;
}
.brand-title{ font-weight:800; letter-spacing:.2px; }
.brand-subtitle{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

.sidebar-toggle{
  display:none;
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
}

.panel{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

.panel-title{ font-weight:800; margin-bottom:12px; }

.field{margin:10px 0}
.field.compact{margin:0}

.label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:6px;
}

/* Base control style (inputs + selects share this class) */
.control{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(11,22,39,.55);
  color:var(--text);
  outline:none;
  font-size:14px;
  font-weight:600;
}

.control:focus{
  border-color: rgba(50,181,97,.7);
  box-shadow: 0 0 0 3px rgba(50,181,97,.18);
}

/* ✅ FIX: make select look like other controls (no native white style) */
select.control{
  padding-right:44px; /* room for arrow */
  line-height: 1.2;
  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  /* prevent weird clipping */
  background-clip: padding-box;

  /* subtle highlight + arrow */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgba(234,242,255,0.80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position: 0 0, right 14px center;
  background-size:auto, 18px 18px;
}

select.control option{
  background-color:#0e1e32;
  color:#eaf2ff;
}

/* Hint */
.hint{
  font-size:12px;
  color:rgba(233,242,255,.70);
  margin-top:6px;
  line-height:1.25;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}

.pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size:12px;
}
.pill.subtle{ opacity:.75; }

.actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.btn{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ background: rgba(255,255,255,.10); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.btn.primary{
  background: linear-gradient(180deg, rgba(50,181,97,.95), rgba(38,150,80,.95));
  border-color: rgba(50,181,97,.65);
  color:#072011;
}
.btn.primary:hover{ filter:brightness(1.03); }

.btn.ghost{ background: transparent; }

.tip{
  margin-top:12px;
  border-radius: var(--radius);
  padding:12px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}
.tip-title{ font-weight:800; margin-bottom:6px; }
.tip-text{ font-size:13px; color:rgba(233,242,255,.80); line-height:1.35; }

.footer{
  margin-top:auto;
  font-size:12px;
  color:rgba(233,242,255,.65);
  padding:10px 4px;
}

/* Stage */
.stage{
  flex:1;
  position:relative;

  /* скролиться тільки stage */
  height:100vh;
  overflow:auto;

  padding:18px 18px 120px;
}

.stage-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.h1{ font-size:22px; font-weight:900; letter-spacing:.2px; }
.h2{ font-size:13px; color:rgba(233,242,255,.72); margin-top:4px; }

.stage-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.stat{
  min-width:120px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding:10px 12px;
}
.stat-label{ font-size:12px; color:rgba(233,242,255,.70); }
.stat-val{ font-size:16px; font-weight:900; margin-top:4px; }

/* Screen */
.screen{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  min-height: calc(100vh - 230px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.screen-inner{
  width:min(1200px, 94%);
  text-align:center;
  padding:26px 16px;
}

.screen-hint{
  color:rgba(233,242,255,.72);
  font-size:14px;
  margin-bottom:18px;
}

/* ✅ FIX: remove duplicate padding, make card clean & big */
.card{
  font-size: clamp(72px, 9.5vw, 170px);
  font-weight: 1000;
  letter-spacing: .5px;

  padding: 22px 30px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,22,39,.45);

  display:inline-block;
  min-width: 360px;
}

/* Progress */
.progress{
  margin:18px auto 0;
  width:min(720px, 86%);
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.progress-bar{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(50,181,97,.95), rgba(43,92,158,.95));
  width:0%;
}

/* Bottom controls */
.controls{
  display:flex;
  gap:10px;
  margin-top:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* STOP */
.stop{
  position:fixed;
  right:18px;
  bottom:18px;
  width:260px;
  height:120px;
  border-radius: 26px;
  border:1px solid rgba(255,59,87,.45);
  background:
    radial-gradient(120px 90px at 20% 10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,59,87,.95), rgba(206,33,55,.95));
  color:#fff;
  font-weight:1000;
  font-size:34px;
  cursor:pointer;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  z-index:50;
}
.stop:disabled{ opacity:.45; cursor:not-allowed; }
.stop-sub{
  font-size:12px;
  font-weight:800;
  opacity:.9;
  margin-top:-2px;
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:100;
}
.modal-card{
  width:min(800px, 96%);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(16,39,66,.98), rgba(12,26,46,.98));
  box-shadow: var(--shadow);
  padding: 14px;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 2px 4px 10px;
}
.modal-title{ font-weight:1000; font-size:18px; }
.x{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-size:22px;
  line-height:1;
}

.result-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  padding: 6px 2px 10px;
}
.result-item{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 10px 12px;
}
.result-item .k{ font-size:12px; color:rgba(233,242,255,.70); }
.result-item .v{ font-size:16px; font-weight:1000; margin-top:4px; }

.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding: 6px 2px 4px;
  flex-wrap:wrap;
}
.modal-note{
  margin-top:8px;
  font-size:12px;
  color:rgba(233,242,255,.72);
  padding: 4px 2px 2px;
  line-height:1.35;
}

/* Switch */
.switch{
  position:relative;
  display:inline-block;
  width:54px;
  height:30px;
}
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  transition:.2s;
}
.slider:before{
  content:"";
  position:absolute;
  height:22px;
  width:22px;
  left:4px;
  top:3px;
  background: rgba(255,255,255,.85);
  border-radius:999px;
  transition:.2s;
}
.switch input:checked + .slider{
  background: rgba(50,181,97,.35);
  border-color: rgba(50,181,97,.55);
}
.switch input:checked + .slider:before{
  transform: translateX(24px);
  background: rgba(232,255,241,.95);
}

/* critical: hide elements that have the hidden attribute */
[hidden] { display: none !important; }

.countdown-num{
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Responsive */
@media (max-width: 980px){
  .sidebar{ width:320px; max-width:320px; }
  .stop{ width:220px; height:110px; font-size:30px; }
  .card{ font-size: clamp(64px, 10vw, 150px); min-width: 320px; }
}



/* =========================
   MOBILE FIX / ACCORDION UI
   ========================= */
@media (max-width: 820px){

  html,
  body{
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
  }

  body{
    overflow-y:auto;
  }

  .app{
    height:auto;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow:visible;
  }

  /* Sidebar стає верхнім блоком */
  .sidebar{
    width:100%;
    max-width:none;
    height:auto;
    overflow:visible;
    border-right:none;
    border-bottom:1px solid var(--line);
    padding:14px 14px 10px;
    gap:10px;
  }

  .brand{
    padding:6px 6px 2px;
  }

  .brand-logo{
    width:40px;
    height:40px;
  }

  .brand-title{
    font-size:18px;
  }

  .brand-subtitle{
    font-size:12px;
  }

  .sidebar-toggle{
    display:block;
    min-height:52px;
    font-size:18px;
    border-radius:18px;
  }

  /* Коли акордеон закритий — показуємо тільки бренд + кнопку */
  .panel{
    display:none;
  }

  .footer{
    display:none;
  }

  .sidebar.open .panel{
    display:block;
    max-height:70vh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding-right:8px;
  }

  .sidebar.open .footer{
    display:block;
    margin-top:10px;
    padding:6px 4px 2px;
    font-size:13px;
    line-height:1.35;
  }

  /* Stage */
  .stage{
    height:auto;
    min-height:0;
    overflow:visible;
    padding:14px 14px 24px;
    display:flex;
    flex-direction:column;
  }

  .stage-top{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-bottom:12px;
  }

  .h1{
    font-size:20px;
    line-height:1.1;
  }

  .h2{
    font-size:13px;
    line-height:1.3;
  }

  /* Верхні статистики стискаємо */
  .stage-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    justify-content:stretch;
  }

  .stat{
    min-width:0;
    width:100%;
    padding:10px 12px;
    border-radius:16px;
  }

  .stat-label{
    font-size:12px;
  }

  .stat-val{
    font-size:15px;
    margin-top:3px;
  }

  .stat.stat-inline{
    grid-column:auto;
  }

.stat.stat-inline .stat-val{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.stat.stat-inline .switch.small{
  transform: scale(.9);
  transform-origin: left center;
}

.stat.stat-inline .btn.small{
  min-width: 54px;
  height: 46px;
  padding: 0 10px;
  border-radius: 14px;
}

  .stat.stat-inline .stat-val{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  /* Налаштування компактніші */
  .panel{
    padding:12px;
  }

  .panel-title{
    margin-bottom:10px;
    font-size:16px;
  }

  .field{
    margin:8px 0;
  }

  .label{
    font-size:12px;
    margin-bottom:5px;
  }

  .control{
    min-height:50px;
    padding:10px 12px;
    font-size:16px;
    border-radius:14px;
  }

  .grid2{
    grid-template-columns:1fr;
    gap:8px;
  }

  .row-between{
    gap:8px;
    flex-wrap:wrap;
  }

  .pill{
    font-size:12px;
    padding:6px 10px;
  }

  .hint{
    font-size:12px;
  }

  .actions{
    flex-direction:column;
    gap:8px;
  }

  .actions .btn{
    width:100%;
  }

  .tip{
    margin-top:10px;
    padding:10px;
  }

  .tip-text{
    font-size:12px;
  }

  /* Екран гри */
  .screen{
    min-height:48vh;
    border-radius:22px;
  }

  .screen-inner{
    width:min(100%, 100%);
    padding:18px 10px;
  }

  .screen-hint{
    font-size:14px;
    margin-bottom:14px;
  }

  .card{
    min-width:0;
    width:100%;
    max-width:100%;
    font-size:clamp(44px, 12vw, 88px);
    padding:18px 14px;
    border-radius:20px;
  }

  /* STOP вже не плаваючий */
  .stop{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    height:96px;
    margin-top:12px;
    margin-bottom:10px;
    border-radius:22px;
    font-size:28px;
    order:2;
  }

  .stop-sub{
    font-size:12px;
  }

  /* Кнопки керування нижче STOP */
  .controls{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:0;
    justify-content:stretch;
    order:3;
  }

  .controls .btn{
    width:100%;
  }

  /* Модалки на телефоні */
  .modal{
    padding:10px;
  }

  .modal-card{
    width:min(100%, calc(100vw - 20px));
    max-width:calc(100vw - 20px);
    border-radius:20px;
    padding:12px;
  }

  .result-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .modal-actions{
    flex-direction:column;
    gap:8px;
  }

  .modal-actions .btn{
    width:100%;
  }

  /* Таблиця результатів */
  #boardModal{
    align-items: center;
    justify-content: center;
  }

  #boardModal .modal-card{
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    border-radius:20px;
    padding:12px;
  }

  #boardModal .table-wrap{
    overflow-x:auto;
    overflow-y:auto;
    max-height:60vh;
    -webkit-overflow-scrolling: touch;
  }

  #boardModal table.board{
    width:100%;
    min-width:1100px;
    border-collapse: collapse;
  }
}

@media (max-width: 480px){
  .sidebar{
    padding:12px 12px 8px;
  }

  .stage{
    padding:12px 12px 20px;
  }

  .brand-title{
    font-size:17px;
  }

  .brand-subtitle{
    font-size:11px;
  }

  .sidebar-toggle{
    min-height:48px;
    font-size:17px;
  }

  .stat{
    padding:9px 10px;
  }

  .stat-label{
    font-size:11px;
  }

  .stat-val{
    font-size:14px;
  }

  .screen{
    min-height:42vh;
  }

  .card{
    font-size:clamp(38px, 12vw, 70px);
    padding:16px 12px;
  }

  .stop{
    height:88px;
    font-size:24px;
  }

  #boardModal .modal-card{
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
  }

  #boardModal table.board{
    min-width:760px;
  }
}

/* ===== DESKTOP RESULTS TABLE ===== */
#boardModal .modal-card{
  width: min(1280px, 96vw);
  max-width: 1280px;
}

#boardModal .table-wrap{
  overflow-x:auto;
  overflow-y:auto;
  max-height:70vh;
}

#boardModal table.board{
  width:100%;
  min-width:1100px;
  border-collapse: collapse;
}

#boardModal table.board thead{
  position: sticky;
  top: 0;
  z-index: 20;
  background: #0e1e32;
}

#boardModal table.board thead tr{
  background: #0e1e32;
}

#boardModal table.board thead th{
  position: sticky;
  top: 0;
  background: #0e1e32 !important;
  background-image: none !important;
  opacity: 1 !important;
  border-bottom: 1px solid rgba(255,255,255,.12);
  z-index: 21;
}

#boardModal table.board tbody tr{
  background: rgba(255,255,255,.03);
}

#boardModal table.board tbody tr:hover{
  background: rgba(50,181,97,0.08);
}

#boardModal table.board td,
#boardModal table.board th{
  padding:10px 12px;
  white-space: nowrap;
}

/* top-3 */
.place-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  font-weight:900;
  font-size:15px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.place-1{
  background: linear-gradient(180deg, rgba(255,215,0,.22), rgba(255,215,0,.10));
  border-color: rgba(255,215,0,.45);
}

.place-2{
  background: linear-gradient(180deg, rgba(192,192,192,.22), rgba(192,192,192,.10));
  border-color: rgba(192,192,192,.45);
}

.place-3{
  background: linear-gradient(180deg, rgba(205,127,50,.22), rgba(205,127,50,.10));
  border-color: rgba(205,127,50,.45);
}

/* ===== RESULTS TABLE SCROLL FIX ===== */
#boardModal .modal-card{
  width: min(1280px, 96vw);
  max-width: 1280px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#boardModal .table-wrap{
  flex: 1 1 auto;
  min-height: 0;
  max-height: 60vh;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#boardModal table.board{
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
}

/* ===== RESULTS TABLE SCROLL FIX ===== */
#boardModal .modal-card{
  width: min(1280px, 96vw);
  max-width: 1280px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#boardModal .table-wrap{
  flex: 1 1 auto;
  min-height: 0;
  max-height: 60vh;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#boardModal table.board{
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
}

/* ===== DESKTOP FOCUS MODE ===== */
@media (min-width: 821px){
  body.game-focus .sidebar{
    display: none;
  }

  body.game-focus .app{
    display:block;
  }

  body.game-focus .stage{
    width:100%;
    padding:18px 18px 120px;
  }

  body.game-focus .screen{
    min-height: calc(100vh - 170px);
  }
}

.text-mode-switch{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.text-mode-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background: rgba(255,255,255,.05);
  cursor:pointer;
  font-size:14px;
  font-weight:600;
}

.text-mode-option input{
  margin:0;
}