:root{
    /* Your hero image size (confirmed): 1024 x 1536 */
    --stage-w: 1024;
    --stage-h: 1536;
  }
  
  *{ box-sizing:border-box; }
  body{
    margin:0;
    background:#000;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  }
  
  /* Screens */
  .screen{ display:none; width:100vw; height:100vh; }
  .screen.active{ display:flex; justify-content:center; align-items:center; }
  
  /* HOME stage (the image box stays consistent on any device) */
  #stage{
    position:relative;
    width:min(100vw, calc(100vh * (var(--stage-w) / var(--stage-h))));
    aspect-ratio: var(--stage-w) / var(--stage-h);
    overflow:hidden;
  }
  
  #homeImg{
    width:100%;
    height:100%;
    display:block;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
  }
  
  /* Overlay UI */
  .ui{
    position:absolute;
  
    /* ✅ Position relative to the IMAGE (stage) */
    left:50%;
    top: 58.5%;               /* <-- main knob: move up/down */
    transform:translateX(-50%);
  
    /* Match the old UI width feel */
    width: min(78%, 520px);
  
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  
    padding:12px 12px 10px;
    border-radius:18px;
  
    background: rgba(15, 15, 15, 0.32);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  
  /* Deck toggles: plain text, no checkboxes */
  .toggleRow{
    display:flex;
    gap:10px;
    justify-content:center;
    align-items:center;
  
    padding:8px 10px;
    border-radius:999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.12);
  }
  
  .toggle{
    border:0;
    background: transparent;
    color: rgba(255,255,255,0.90);
    font-size: 1.02rem;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    position:relative;
    letter-spacing:0.2px;
  }
  
  /* Active look = subtle warm highlight */
  .toggle.active{
    color:#fff;
    background: rgba(255,255,255,0.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  }
  /*
  .toggle.active::after{
    content:"";
    width:6px;
    height:6px;
    border-radius:999px;
    background:#ffb36b;
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    opacity:0.95;
  }
    */
  
  /* BEGIN button styled like your orange button */
  .begin{
    width:min(70%, 320px);
    padding:12px 18px;
    border:0;
    border-radius:14px;
    font-weight:900;
    letter-spacing:0.06em;
    font-size:1.05rem;
    color:#fff;
    cursor:pointer;
  
    background: linear-gradient(180deg, #ff8a2a, #e55a14);
    box-shadow:
      0 10px 28px rgba(0,0,0,0.35),
      inset 0 2px 0 rgba(255,255,255,0.22),
      inset 0 -3px 0 rgba(0,0,0,0.18);
  }
  .begin:active{ transform: translateY(1px); }
  
  .miniNote{
    font-size:0.9rem;
    color: rgba(255,255,255,0.75);
    text-align:center;
  }
  
  /* TURN + CARD screens */
  #turn, #card{
    background:#111;
    color:#fff;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:22px;
    padding:24px;
    text-align:center;
  }
  
  #playerText{ margin:0; font-size:2rem; }
  #cardText{
    margin:0;
    max-width:820px;
    font-size:1.35rem;
    line-height:1.4;
  }
  
  /* buttons on turn/card */
  .action{
    padding:14px 22px;
    font-size:1rem;
    border-radius:12px;
    border:0;
    background:#3b82f6;
    color:#fff;
    cursor:pointer;
  }