/* ============================================================
   ESCAPE THE VIVA - Phase 5 : Hero UI Refresh
   Loads LAST. DESKTOP ONLY (min-width:650px).
   Mobile is left completely untouched — original behavior.
   Requires: assets/viva-room.png
   ============================================================ */

@media (min-width:650px){

  /* ---------- Room background image ---------- */
  #start-screen{
    background:url('../assets/viva-room.png') center/cover no-repeat #0b0501;
    position:relative;
    overflow:hidden; /* the LEFT column scrolls internally instead — see below */
  }
  #start-screen::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(7,3,0,.94) 0%, rgba(7,3,0,.78) 32%, rgba(7,3,0,.30) 58%, rgba(7,3,0,.12) 100%),
      linear-gradient(0deg, rgba(7,3,0,.55), transparent 42%);
  }

  /* ---------- Credits pinned to the bottom-center of the game box ---------- */
  .credits{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:14px !important;
    transform:translateX(-50%) !important;
    z-index:40 !important;
    width:auto !important;
    max-width:none !important;
    text-align:center;
    padding:6px 16px;
    font-size:12px;
    color:#d8c3a0;
    background:rgba(7,3,0,.6);
    border:1px solid rgba(255,160,60,.25);
    border-radius:20px;
    white-space:nowrap;
    pointer-events:auto;
  }
  .credits .credits-link{ color:#ffcf6a; }

  /* ---------- Layout ---------- */
  #start-screen .start-content{
    align-items:flex-start;
    justify-content:space-between;
    max-width:none;
    padding:clamp(16px,2.5vw,36px) clamp(36px,7vw,120px) 52px;
    gap:clamp(20px,4vw,56px);
  }
  .start-left{
    flex:0 0 auto; max-width:360px; width:100%;
    margin-top:auto; margin-bottom:auto;
    gap:clamp(6px,.8vw,9px) !important;
    align-items:flex-start !important; text-align:left;
    /* fits its own scroll instead of dragging the whole screen (and its
       background/character) along when the window is short */
    max-height:100%; overflow-y:auto; overscroll-behavior:contain;
    padding-right:8px; margin-right:-8px;
    scrollbar-width:thin; scrollbar-color:rgba(255,160,60,.4) transparent;
  }
  .start-left::-webkit-scrollbar{ width:6px; }
  .start-left::-webkit-scrollbar-track{ background:transparent; }
  .start-left::-webkit-scrollbar-thumb{ background:rgba(255,160,60,.4); border-radius:6px; }
  .start-left::-webkit-scrollbar-thumb:hover{ background:rgba(255,160,60,.65); }
  .start-left .diff-selector{ align-items:flex-start; }
  .start-left .diff-btns{ justify-content:flex-start; }
  .start-left .lifelines-info{ justify-content:flex-start; }
  .start-left .start-stats{ justify-content:space-around; }

  /* student on the floor */
  .start-right{
    margin:0; align-self:stretch; flex:1 1 auto;
    display:flex; align-items:flex-end; justify-content:center;
    padding-bottom:clamp(26px,7vh,76px);
  }
  .start-student{ position:relative; z-index:2; }
  .start-student svg{ width:clamp(180px,17vw,240px); filter:drop-shadow(0 18px 26px rgba(0,0,0,.6)); }

  /* ---------- Title ---------- */
  .start-title{ font-size:clamp(30px,4.6vw,46px); line-height:.92; text-shadow:2px 2px 0 rgba(0,0,0,.6); }
  .start-title .the{ color:#e6d2b0; }
  .start-title .viva{ text-shadow:2px 2px 0 rgba(0,0,0,.6), 0 0 24px rgba(230,48,48,.55); }
  .start-subtitle{ color:#d3ba97; max-width:290px; font-size:clamp(10px,1.6vw,12px); }
  .start-badge{
    background:linear-gradient(120deg, rgba(255,140,30,.2), rgba(230,48,48,.2));
    border-color:rgba(255,160,60,.45); color:#ffc185;
  }

  /* ---------- Stats strip ---------- */
  .start-stats{
    width:100%; justify-content:space-around; gap:0;
    padding:6px 4px; border-radius:12px;
    background:rgba(20,10,3,.55); border:1px solid rgba(255,160,60,.2);
    backdrop-filter:blur(2px);
  }
  .start-stat{ flex:1; position:relative; }
  .start-stat + .start-stat::before{
    content:''; position:absolute; left:0; top:20%; height:60%; width:1px; background:rgba(255,160,60,.22);
  }
  .start-stat-num{ color:#ffc247; }
  .start-stat-label{ color:#c2a179; }

  /* ---------- Contrast lifts ---------- */
  .lifelines-info{ color:#d3b78e; }
  .ll-badge{ background:rgba(255,160,60,.18); border-color:rgba(255,160,60,.36); color:#ffce76; }
  .diff-label{ color:#c2a179; }
  .high-score-display{ color:#ffcf6a; font-size:11px; }
  .high-score-display:empty, .personal-best-display:empty{ display:none; }
  .level-display{ width:100%; }

  /* ---------- Difficulty buttons ---------- */
  .diff-btns{ gap:8px; }
  .diff-btn{
    border-radius:10px; padding:7px 12px;
    background:rgba(20,10,3,.55); border:1.5px solid rgba(255,255,255,.14);
    color:#d6bd97; font-weight:700;
  }
  .diff-btn:hover{ border-color:rgba(255,200,120,.6); color:#fff; background:rgba(255,160,60,.14); }

  /* ---------- Buttons ---------- */
  .start-btn{ border-radius:12px; letter-spacing:1.5px; padding:clamp(10px,2vw,13px) clamp(20px,5vw,34px); }
  .launch-secondary{ gap:10px; }
  .launch-secondary .ai-viva-btn{
    flex:1; min-width:120px; padding:9px 12px; border-radius:11px;
    font-weight:800; font-size:clamp(12px,1.6vw,13px); color:#ffdca8;
    background:rgba(20,10,3,.55); border:1px solid rgba(255,160,60,.32);
    transition:background .15s ease, border-color .15s ease, transform .1s ease;
  }
  .launch-secondary .ai-viva-btn:hover{ background:rgba(255,160,60,.2); border-color:#ff8a1e; }
  .launch-secondary .ai-viva-btn:active{ transform:scale(.97); }
}