* { box-sizing: border-box; }

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
      background: #0b0d10;
      color: #fff;
    }

    button, input {
      font: inherit;
    }

    #game-root {
      position: fixed;
      inset: 0;
      display: none;
      background: #0b0d10;
    }

    #join-screen {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at 50% 20%, #2b3039 0, #15191f 38%, #090b0e 80%);
    }

    .join-card {
      width: min(500px, 100%);
      padding: 32px;
      border-radius: 22px;
      background: rgba(19, 23, 30, .96);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 28px 90px rgba(0,0,0,.5);
    }

    .eyebrow {
      margin-bottom: 10px;
      color: #8f82ff;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .13em;
    }

    h1 {
      margin: 0;
      font-size: 36px;
    }

    .desc {
      margin: 10px 0 24px;
      color: #aeb7c6;
      line-height: 1.55;
    }

    #player-name,
    #join-button {
      width: 100%;
      height: 50px;
      border-radius: 12px;
      font-size: 16px;
    }

    #player-name {
      padding: 0 14px;
      border: 1px solid #363e4e;
      outline: none;
      background: #0e1117;
      color: white;
    }

    #player-name:focus {
      border-color: #7b6cff;
    }

    #join-button {
      margin-top: 12px;
      border: 0;
      background: #7364ff;
      color: white;
      cursor: pointer;
      font-weight: 800;
    }

    #join-button:disabled {
      opacity: .55;
      cursor: default;
    }

    #join-status {
      min-height: 22px;
      margin-top: 14px;
      color: #9fa9bb;
      font-size: 14px;
    }

    #join-status.ok { color: #70e8a7; }
    #join-status.bad { color: #ff7d88; }

    .small {
      margin-top: 18px;
      color: #687386;
      font-size: 12px;
      line-height: 1.55;
    }

    #hud {
      position: fixed;
      z-index: 30;
      top: 14px;
      left: 50%;
      display: flex;
      gap: 12px;
      align-items: center;
      transform: translateX(-50%);
      padding: 9px 15px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      background: rgba(8, 10, 13, .90);
      font-size: 14px;
      pointer-events: none;
      white-space: nowrap;
    }

    #hud .online {
      color: #6ef0a8;
      font-weight: 800;
    }

    #role-hud {
      color: #ffd46d;
      font-weight: 800;
    }

    #phase-hud {
      color: #d5d9e2;
      font-weight: 800;
    }

    #countdown-hud {
      min-width: 42px;
      color: #ffffff;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    #mode {
      color: #8f82ff;
      font-weight: 800;
    }

    #weapon-panel {
      position: fixed;
      z-index: 36;
      right: 18px;
      bottom: 18px;
      display: none;
      width: 220px;
      padding: 15px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 16px;
      background: rgba(8,10,13,.92);
      box-shadow: 0 18px 50px rgba(0,0,0,.32);
      pointer-events: none;
    }

    #weapon-name {
      color: #fff;
      font-size: 17px;
      font-weight: 900;
    }

    #weapon-status {
      margin-top: 6px;
      color: #72e6a7;
      font-size: 23px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    #weapon-info {
      margin-top: 7px;
      color: #909aab;
      font-size: 11px;
      line-height: 1.45;
    }

    #health-panel {
      position: fixed;
      z-index: 36;
      left: 18px;
      bottom: 18px;
      display: none;
      min-width: 155px;
      padding: 13px 15px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 16px;
      background: rgba(8,10,13,.92);
      box-shadow: 0 18px 50px rgba(0,0,0,.32);
      pointer-events: none;
    }

    #health-label {
      color: #99a3b2;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .12em;
    }

    #health-hearts {
      margin-top: 5px;
      color: #ff6672;
      font-size: 24px;
      letter-spacing: 3px;
      white-space: nowrap;
    }

    #damage-flash {
      position: fixed;
      inset: 0;
      z-index: 75;
      display: none;
      background: rgba(210,20,35,.20);
      pointer-events: none;
    }

    #lobby-panel {
      position: fixed;
      z-index: 35;
      top: 74px;
      left: 18px;
      width: 255px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: rgba(10,12,16,.92);
      box-shadow: 0 18px 50px rgba(0,0,0,.30);
    }

    #lobby-panel h3 {
      margin: 0 0 12px;
      font-size: 15px;
    }

    #lobby-list {
      display: grid;
      gap: 7px;
      margin-bottom: 12px;
    }

    .lobby-player {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 9px;
      border-radius: 9px;
      background: rgba(255,255,255,.05);
      color: #dce2eb;
      font-size: 13px;
    }

    .host-tag {
      padding: 3px 6px;
      border-radius: 999px;
      background: rgba(143,130,255,.18);
      color: #b9afff;
      font-size: 10px;
      font-weight: 900;
    }

    #start-game {
      width: 100%;
      min-height: 42px;
      border: 0;
      border-radius: 10px;
      background: #7364ff;
      color: #fff;
      cursor: pointer;
      font-weight: 900;
    }

    #start-game:disabled {
      opacity: .45;
      cursor: default;
    }

    #host-hint {
      margin-top: 9px;
      color: #8d97a7;
      font-size: 11px;
      line-height: 1.4;
    }

    #interaction {
      position: fixed;
      z-index: 40;
      left: 50%;
      bottom: 62px;
      display: none;
      transform: translateX(-50%);
      padding: 11px 16px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 12px;
      background: rgba(10,12,16,.95);
      box-shadow: 0 14px 40px rgba(0,0,0,.35);
      font-size: 14px;
      font-weight: 700;
      pointer-events: none;
    }

    #interaction kbd {
      display: inline-grid;
      min-width: 30px;
      height: 28px;
      place-items: center;
      margin-right: 8px;
      padding: 0 7px;
      border: 1px solid rgba(255,255,255,.28);
      border-bottom-width: 3px;
      border-radius: 7px;
      background: #272c35;
      color: #fff;
      font-family: inherit;
    }

    #help {
      position: fixed;
      z-index: 30;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      padding: 8px 13px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      background: rgba(8,10,13,.84);
      color: #cdd4df;
      font-size: 13px;
      pointer-events: none;
    }

    #role-overlay {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      place-items: center;
      padding: 24px;
      background: rgba(7,8,11,.94);
    }

    #role-card {
      width: min(540px, 100%);
      padding: 36px 30px;
      text-align: center;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 24px;
      background: #141820;
      box-shadow: 0 30px 100px rgba(0,0,0,.55);
    }

    #role-kicker {
      margin-bottom: 8px;
      color: #aeb7c6;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .16em;
    }

    #role-title {
      margin: 0;
      font-size: clamp(38px, 7vw, 68px);
      line-height: .98;
    }

    #role-description {
      margin: 16px auto 0;
      max-width: 420px;
      color: #b5becb;
      font-size: 16px;
      line-height: 1.55;
    }

    #role-countdown {
      margin-top: 22px;
      font-size: 42px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    #role-overlay.hunter #role-title {
      color: #ff5e69;
    }

    #role-overlay.hunter #role-countdown {
      color: #ff7e86;
    }

    #role-overlay.hider #role-title {
      color: #72e6a7;
    }

    #role-overlay.hider #role-countdown {
      color: #89efb5;
    }

    #toast {
      position: fixed;
      z-index: 90;
      top: 80px;
      left: 50%;
      display: none;
      transform: translateX(-50%);
      padding: 12px 18px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 12px;
      background: rgba(12,14,18,.95);
      color: #fff;
      box-shadow: 0 16px 50px rgba(0,0,0,.35);
      font-size: 14px;
      font-weight: 800;
      pointer-events: none;
    }

    canvas {
      display: block;
    }
  
    /* =====================================================
       0.6 ANA MENÜ + ÖZEL LOBİ
       ===================================================== */

    .main-menu-card {
      width: min(920px, 100%);
      padding: 34px;
    }

    .menu-label {
      display: block;
      margin: 0 0 8px;
      color: #aab4c3;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .10em;
    }

    .menu-label span {
      color: #697486;
      font-weight: 700;
      letter-spacing: normal;
    }

    #player-name,
    #create-password,
    #join-code,
    #join-password {
      width: 100%;
      height: 48px;
      padding: 0 14px;
      border: 1px solid #363e4e;
      border-radius: 11px;
      outline: none;
      background: #0e1117;
      color: #fff;
      font-size: 16px;
    }

    #player-name:focus,
    #create-password:focus,
    #join-code:focus,
    #join-password:focus {
      border-color: #7b6cff;
    }

    .menu-columns {
      display: grid;
      grid-template-columns: 1fr 52px 1fr;
      gap: 16px;
      align-items: stretch;
      margin-top: 22px;
    }

    .menu-box {
      padding: 22px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 16px;
      background: rgba(8,11,15,.52);
    }

    .menu-box-kicker {
      margin-bottom: 5px;
      color: #8f82ff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .12em;
    }

    .menu-box h2 {
      margin: 0;
      font-size: 22px;
    }

    .menu-box p {
      min-height: 44px;
      margin: 8px 0 18px;
      color: #858fa0;
      font-size: 13px;
      line-height: 1.45;
    }

    .second-label {
      margin-top: 13px;
    }

    .menu-primary,
    .menu-secondary {
      width: 100%;
      height: 46px;
      margin-top: 16px;
      border: 0;
      border-radius: 10px;
      color: #fff;
      cursor: pointer;
      font-weight: 900;
    }

    .menu-primary {
      background: #7364ff;
    }

    .menu-secondary {
      background: #303744;
      border: 1px solid #465064;
    }

    .menu-primary:disabled,
    .menu-secondary:disabled {
      opacity: .5;
      cursor: default;
    }

    .menu-or {
      display: grid;
      place-items: center;
      color: #5f6979;
      font-size: 10px;
      font-weight: 900;
    }

    .menu-or span {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 50%;
      background: #11151c;
    }

    .lobby-code-input {
      text-transform: uppercase;
      letter-spacing: .20em;
      font-weight: 900;
    }

    #join-status {
      min-height: 22px;
      margin-top: 18px;
      text-align: center;
      color: #9fa9bb;
      font-size: 13px;
    }

    #join-status.ok {
      color: #70e8a7;
    }

    #join-status.bad {
      color: #ff7d88;
    }

    /* Bekleme lobisi artık ayrı, tam ekran bir aşama. */
    #lobby-panel {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      width: auto;
      padding: 24px;
      background:
        radial-gradient(circle at 50% 15%, rgba(44,50,62,.96), rgba(11,13,17,.98) 68%);
    }

    .room-lobby-card {
      width: min(620px, calc(100vw - 48px));
      max-height: calc(100vh - 48px);
      margin: auto;
      padding: 28px;
      overflow: auto;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 22px;
      background: rgba(18,22,29,.97);
      box-shadow: 0 30px 100px rgba(0,0,0,.48);
    }

    .room-lobby-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .room-label {
      margin-bottom: 5px;
      color: #8994a5;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .13em;
    }

    .room-code-line {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    #lobby-code-display {
      color: #fff;
      font-size: clamp(30px, 7vw, 46px);
      letter-spacing: .16em;
    }

    #copy-lobby-code {
      min-height: 34px;
      padding: 0 11px;
      border: 1px solid #465064;
      border-radius: 9px;
      background: #252b35;
      color: #d7deea;
      cursor: pointer;
      font-size: 11px;
      font-weight: 900;
    }

    #lobby-security {
      margin-top: 7px;
      color: #8c97a7;
      font-size: 12px;
    }

    .room-count {
      min-width: 90px;
      text-align: right;
      color: #fff;
      font-size: 34px;
      font-weight: 900;
    }

    .room-count small {
      color: #6f7988;
      font-size: 16px;
    }

    .room-divider {
      height: 1px;
      margin: 22px 0;
      background: rgba(255,255,255,.08);
    }

    .room-lobby-card h3 {
      margin: 0 0 12px;
      color: #aeb8c7;
      font-size: 12px;
      letter-spacing: .10em;
    }

    #lobby-list {
      display: grid;
      gap: 8px;
      margin-bottom: 18px;
    }

    #start-game {
      width: 100%;
      min-height: 48px;
      border: 0;
      border-radius: 11px;
      background: #7364ff;
      color: #fff;
      cursor: pointer;
      font-weight: 900;
    }

    #start-game:disabled {
      opacity: .45;
      cursor: default;
    }

    #host-hint {
      margin-top: 10px;
      text-align: center;
      color: #8d97a7;
      font-size: 12px;
    }

    #leave-lobby {
      width: 100%;
      min-height: 40px;
      margin-top: 16px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 10px;
      background: transparent;
      color: #7f8998;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
    }

    @media (max-width: 760px) {
      .menu-columns {
        grid-template-columns: 1fr;
      }

      .menu-or {
        height: 30px;
      }

      .menu-or span {
        width: auto;
        height: auto;
        border: 0;
        background: transparent;
      }

      .menu-box p {
        min-height: 0;
      }
    }


/* ---------------------------------------------------------
   DEVELOPMENT BUILD / POSITION INDICATORS
   Her iki tarayıcının aynı client sürümünü kullandığını
   tek bakışta kontrol etmek için.
   --------------------------------------------------------- */
#build-version,
#position-hud {
  color: #97a1b3;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#build-version {
  color: #f6c84a;
}


#map-version {
  color: #8fa7a0;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#map-version.map-version-error {
  color: #ff626d;
  background: #3a1117;
  border: 1px solid #ff626d66;
  padding: 2px 5px;
  border-radius: 5px;
}