* { -webkit-tap-highlight-color: transparent; }
  html, body {
    background: #030308;
    overscroll-behavior: none;
    height: 100%;
    overflow: hidden;
    touch-action: pan-y; /* allow normal vertical scroll inside chat, block pinch/pan-zoom everywhere */
  }
  body {
    font-family: 'Manrope', sans-serif;
    color: #f2f1f7;
  }
  .noise-bg {
    background-image:
      radial-gradient(ellipse 120% 80% at 50% -10%, rgba(139,124,246,0.10), transparent 60%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, transparent 1px, transparent 2px);
  }
  .phone-frame {
    max-width: 430px;
    width: 100%;
    height: var(--app-height, 100dvh);
    margin: 0 auto;
    background: #06070c;
    position: relative;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 40px 100px -20px rgba(0,0,0,0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 431px) {
    .phone-frame { height: min(var(--app-height, 100dvh), 92dvh); margin-top: 4dvh; border-radius: 32px; }
  }
  .safe-top { padding-top: env(safe-area-inset-top); }
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-thumb { background: #343b52; border-radius: 4px; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; }

  /* Avatar states */
  .avatar-ring {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; position: relative; flex-shrink: 0;
    border: 2px solid #262b3d; background: #171a26;
    overflow: hidden;
    transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease;
  }
  .avatar-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  .avatar-btn:active .avatar-ring { transform: scale(0.92); }
  .avatar-you .avatar-ring { border-color: #8b7cf6; box-shadow: 0 0 0 3px rgba(139,124,246,0.18); }
  .avatar-dead .avatar-ring { filter: grayscale(1); opacity: 0.45; border-color: #343b52; }
  .avatar-jailed .avatar-ring { border-color: #f2a93b; background: #1a1710; opacity: 0.85; }
  .avatar-selectable .avatar-ring { border-color: #5b4fc7; cursor: pointer; }
  .avatar-selected .avatar-ring { border-color: #8b7cf6; box-shadow: 0 0 0 4px rgba(139,124,246,0.28); transform: scale(1.06); }
  .status-badge {
    position: absolute; bottom: -3px; right: -3px;
    width: 19px; height: 19px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; border: 2px solid #06070c;
  }

  /* Phase pulse for night */
  @keyframes pulseNight { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
  .pulse-night { animation: pulseNight 2.4s ease-in-out infinite; }

  /* Timer urgency */
  @keyframes timerFlash { 0%,100% { color:#e5484d } 50% { color:#ff8a8d } }
  .timer-urgent { animation: timerFlash 1s ease-in-out infinite; }

  /* Bottom sheet */
  .sheet-backdrop { background: rgba(3,3,8,0.72); backdrop-filter: blur(2px); }
  .sheet-panel {
    background: #10121b;
    border-top: 1px solid #262b3d;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 60px -20px rgba(0,0,0,0.7);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
  }
  .sheet-open .sheet-panel { transform: translateY(0); }
  @media (min-width: 431px) {
    .sheet-panel { border-radius: 20px; max-width: 380px; margin: 0 auto; }
  }

  /* Toast */
  .toast {
    animation: toastIn .25s ease forwards;
  }
  @keyframes toastIn { from { opacity:0; transform: translateY(-8px) scale(.98);} to {opacity:1; transform:none;} }
  .toast.leaving { animation: toastOut .2s ease forwards; }
  @keyframes toastOut { to { opacity:0; transform: translateY(-8px) scale(.98);} }

  /* Chat message in */
  .msg-in { animation: msgIn .22s ease forwards; }
  @keyframes msgIn { from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

  .role-card { background: linear-gradient(160deg, #171a26 0%, #12141d 100%); }
  .role-card::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 5px);
    border-radius: inherit;
    pointer-events: none;
  }

  /* Spotlight duel animation — real seat avatars fly out to center and
     back (FLIP technique), no card/modal, nothing blocks the chat below. */
  .duel-clone {
    position: fixed;
    z-index: 55;
    pointer-events: auto;
    cursor: pointer;
  }
  .duel-clone .avatar-ring { width: 100%; height: 100%; border-color: #8b7cf6; box-shadow: 0 8px 24px -6px rgba(0,0,0,.6), 0 0 0 3px rgba(139,124,246,.22); }
  .duel-clone-winner .avatar-ring { border-color: #f2a93b; box-shadow: 0 8px 24px -6px rgba(0,0,0,.6), 0 0 0 4px rgba(242,169,59,.35); }
  .duel-clone-picked .avatar-ring { transform: scale(1.08); transition: transform .15s ease; }
  .duel-clone-badge {
    position: absolute; bottom: -4px; right: -4px;
    min-width: 20px; height: 20px; padding: 0 4px; border-radius: 7px;
    background: #1d2130; border: 2px solid #06070c; color: #f2f1f7;
    font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
    display: flex; align-items: center; justify-content: center;
  }
  .duel-clone-crown { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 16px; }

  .duel-label {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .duel-label-visible { opacity: 1; transform: translateY(0); }

  /* Cross-page slide transition (see resources/js/page-transition.js) */
  body.page-exit-left .phone-frame { transform: translateX(-100%); opacity: 0; transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .22s ease; }
  body.page-exit-right .phone-frame { transform: translateX(100%); opacity: 0; transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .22s ease; }
  body.page-enter-from-left .phone-frame { transform: translateX(-100%); opacity: 0; transition: none; }
  body.page-enter-from-right .phone-frame { transform: translateX(100%); opacity: 0; transition: none; }
  body.page-enter-active .phone-frame { transform: translateX(0); opacity: 1; transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }

  /* Edge navigation tabs — thin, half-tucked against the frame's side edge,
     never overlap the chat input or duel animation area. */
  .edge-tab {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 64px;
    background: rgba(29,33,48,0.85);
    border: 1px solid #262b3d;
    color: #b4b6c6;
    font-size: 16px;
    backdrop-filter: blur(4px);
    transition: transform .15s ease, background .15s ease;
  }
  .edge-tab:active { transform: translateY(-50%) scale(0.94); background: rgba(139,124,246,0.18); }
  /* Spotlight equippable avatar frames (see spotlight_frames table) */
  .frame-bronze { border-color: #b08d57 !important; box-shadow: 0 0 0 2px rgba(176,141,87,0.35) !important; }
  .frame-silver { border-color: #c7ccd6 !important; box-shadow: 0 0 0 2px rgba(199,204,214,0.4) !important; }
  .frame-gold { border-color: #f2c94c !important; box-shadow: 0 0 0 3px rgba(242,201,76,0.45) !important; }
  .frame-neon { border-color: #39ffb0 !important; box-shadow: 0 0 10px 1px rgba(57,255,176,0.55), 0 0 0 2px rgba(57,255,176,0.3) !important; }
  .frame-fire { border-color: #ff6a3d !important; box-shadow: 0 0 12px 2px rgba(255,106,61,0.6), 0 0 0 2px rgba(255,159,28,0.35) !important; animation: framePulseFire 1.6s ease-in-out infinite; }
  @keyframes framePulseFire {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.25); }
  }

  .edge-tab-left { left: 0; border-radius: 0 14px 14px 0; border-left: none; }
  .edge-tab-right { right: 0; border-radius: 14px 0 0 14px; border-right: none; }

  /* Spotlight cube leaderboard (resources/js/spotlight/spotlight-cubes.js) */
  .cube {
    position: absolute;
    border-radius: 12px;
    border: 2px solid #06070c;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: left .4s ease, top .4s ease, width .4s ease, height .4s ease, background-color .4s ease;
  }
  .cube .avatar-square {
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1 / 1;
    box-shadow: 0 0 0 2px rgba(0,0,0,.25);
    flex-shrink: 0;
    transition: width .4s ease, height .4s ease;
  }
  .cube .name-tag {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 11px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    font-weight: 600;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cube .point-badge {
    position: absolute;
    bottom: 4px;
    right: 6px;
    background: rgba(0,0,0,.7);
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: clamp(10px, 3vw, 13px);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
  }

  .btn-press:active { transform: scale(0.97); }
  .btn-press { transition: transform .1s ease; }

  input[type=text]::placeholder { color: #6c6f83; }

  .dev-drawer { transform: translateX(100%); transition: transform .25s ease; }
  .dev-open .dev-drawer { transform: translateX(0); }

  .fade-item { transition: opacity .3s ease, filter .3s ease; }

/* dev panel buttons (kept separate from the main stylesheet in the prototype) */
.dev-btn {
  background: #1d2130; border: 1px solid #262b3d; color: #b4b6c6;
  font-size: 11px; font-weight: 600; padding: 8px 6px; border-radius: 10px;
  text-align: center; transition: all .12s ease;
}
.dev-btn:active { transform: scale(0.96); }
.dev-btn-active { background: rgba(139,124,246,0.15); border-color: #8b7cf6; color: #f2f1f7; }

/* =========================================================
   Mafia pixel-city scene (top of the game screen) — adapted from
   the uploaded mafia_city_demo_compact.html, every class prefixed
   mfc- to avoid colliding with the rest of this shared stylesheet.
   Driven by mafia-city.js from real game state (day/night phase,
   alive/dead players) instead of the demo's local random simulation.
   ========================================================= */
#mfCityScene {
  position: relative;
  flex: 0 0 clamp(120px, 22vh, 175px);
  min-height: 120px;
  max-height: 175px;
  overflow: hidden;
  background: #79a85e;
  transition: background .6s ease;
}
#mfCityScene.mfc-night { background: #263452; }
#mfCityScene.mfc-night::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(15,25,55,.35); pointer-events: none; z-index: 50;
}
.mfc-moon {
  position: absolute; right: 16px; top: 12px; width: 24px; height: 24px;
  border-radius: 50%; background: #eee8bd; box-shadow: 0 0 20px #eee8bd;
  opacity: 0; transition: opacity .5s ease;
}
#mfCityScene.mfc-night .mfc-moon { opacity: 1; }

.mfc-road { position: absolute; left: -10%; top: 48%; width: 120%; height: 48px; background: #777; transform: rotate(-4deg); z-index: 1; }
.mfc-road::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: repeating-linear-gradient(90deg, #ddd 0 22px, transparent 22px 44px); opacity: .55;
}

.mfc-house { position: absolute; width: 52px; height: 44px; z-index: 3; transform-origin: top left; }
.mfc-roof { position: absolute; left: 1px; top: 0; width: 50px; height: 20px; background: #884d48; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mfc-wall { position: absolute; left: 8px; top: 16px; width: 36px; height: 27px; background: #d4b57a; border: 2px solid #4b4038; }
.mfc-door { position: absolute; left: 21px; top: 26px; width: 10px; height: 17px; background: #624637; }
.mfc-win { position: absolute; left: 12px; top: 21px; width: 8px; height: 8px; background: #bfe2e5; border: 2px solid #4b4038; }
#mfCityScene.mfc-night .mfc-win { background: #f3ce62; box-shadow: 0 0 10px #f3ce62; }

.mfc-tree { position: absolute; width: 20px; height: 28px; z-index: 2; }
.mfc-tree::before { content: ""; position: absolute; left: 1px; top: 0; width: 18px; height: 18px; background: #37643d; border-radius: 50%; box-shadow: -4px 4px #4d7c45, 4px 4px #2d5835; }
.mfc-tree::after { content: ""; position: absolute; left: 8px; top: 16px; width: 5px; height: 11px; background: #604832; }

#mfCityChars { position: absolute; inset: 0; z-index: 10; }
.mfc-char { position: absolute; width: 22px; height: 34px; will-change: left, top; pointer-events: none; }
.mfc-head { position: absolute; left: 5px; top: 1px; width: 13px; height: 12px; background: #e6bc96; border: 2px solid #25262c; z-index: 3; }
.mfc-hair { position: absolute; left: 6px; top: 1px; width: 11px; height: 4px; background: #3a2925; z-index: 4; }
.mfc-body { position: absolute; left: 4px; top: 13px; width: 15px; height: 12px; background: var(--mfc-shirt, #4d82d8); border: 2px solid #25262c; }
.mfc-bag { position: absolute; left: 1px; top: 15px; width: 5px; height: 9px; background: #343943; border: 1px solid #25262c; }
.mfc-leg { position: absolute; top: 25px; width: 6px; height: 9px; background: #30333b; border: 1px solid #25262c; }
.mfc-leg.mfc-l { left: 4px; } .mfc-leg.mfc-r { left: 13px; }
.mfc-shadow { position: absolute; left: 1px; bottom: -3px; width: 19px; height: 4px; background: rgba(0,0,0,.25); border-radius: 50%; }
.mfc-char.mfc-walk .mfc-l { animation: mfcStep1 .22s infinite alternate; }
.mfc-char.mfc-walk .mfc-r { animation: mfcStep2 .22s infinite alternate; }
.mfc-char.mfc-walk { animation: mfcBob .44s infinite alternate; }
@keyframes mfcStep1 { to { transform: translateY(-2px) rotate(-8deg); } }
@keyframes mfcStep2 { to { transform: translateY(-2px) rotate(8deg); } }
@keyframes mfcBob { to { margin-top: -1px; } }
.mfc-char.mfc-enter { animation: mfcEnter .7s forwards; }
@keyframes mfcEnter { to { opacity: 0; transform: scale(.25); filter: brightness(.5); } }
.mfc-char.mfc-dead { animation: mfcDie .9s forwards; }
@keyframes mfcDie {
  0% { transform: rotate(0); opacity: 1; }
  35% { transform: rotate(-15deg) translateY(-3px); }
  100% { transform: rotate(90deg) translateY(6px); opacity: 0; filter: grayscale(1); }
}
.mfc-deadmark { position: absolute; z-index: 12; font-size: 15px; animation: mfcMark .5s forwards; }
@keyframes mfcMark { from { opacity: 0; transform: scale(.4); } to { opacity: .9; transform: scale(1); } }
#mfCityStatus {
  position: absolute; z-index: 100; left: 50%; bottom: 6px; transform: translateX(-50%);
  background: rgba(20,24,31,.85); padding: 4px 10px; border-radius: 999px; font-size: 10px; white-space: nowrap; color: #fff;
}