/* -----------------------------------------------------------
 * Unicorns' Poop – REPAIRED RESPONSIVE STYLESHEET (v10)
 * -----------------------------------------------------------
 * - Disabled vertical scrolling completely
 * - Made app header translucent to match ad banner
 * - Fixed overflow issues
 * --------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

/* ---------- TOKENS & RESPONSIVE PROPERTIES --------------------------- */
:root {
  /* Color Palette */
  --pink:           #ff87b3;
  --pink-dark:      #e66a9a;
  --pink-light:     #ffd9ea;
  --sky:            #89d7ff;
  --sky-dark:       #6fb5ef;
  --lav:            #c8a4ff;
  --lav-dark:       #a47df0;
  
  --bg-color:       #c9f2ff;
  --grid-bg:        #fff;
  --grid-border:    var(--pink-light);
  --grid-closed-a:  #b3f3d4;
  --grid-closed-b:  #a1e9c8;
  --grid-open:      #fdeef7;
  
  --num-1:          #007aad;
  --num-2:          #008a3b;
  --num-3:          #ce5b00;
  --num-4:          #b3005b;
  --num-5:          #6605bf;
  --num-6:          #00619d;
  --num-7:          #444;
  --num-8:          #1a1a1a;
  
  --text-dark:      #6a408d;
  --outline:        #734f9a;
  --focus-ring:     #ffc400;

  /* Sizing & Shadows */
  --radius-xl:      24px;
  --radius-md:      16px;
  --radius-sm:      12px;
  --shadow-main:    0 4px 6px rgba(106, 64, 141, 0.15);
  --shadow-modal:   0 8px 20px rgba(0, 0, 0, 0.25);
  --shadow-inset:   inset 0 -4px 0 rgba(0,0,0,0.15);

  /* --cols/--rows are set by script.js */
  --cols: 9; 
  --rows: 9;
}

/* ---------- RESET & BASE STYLES -------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
  height: 100%; 
  overflow: hidden; /* FIXED: Disable all scrolling */
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }

/* Focus visible styling for accessibility */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.pill:focus-visible { border-radius: var(--radius-md); }
.tile:focus-visible { outline-offset: -2px; } /* Inset focus for flush tiles */

/* ---------- BODY & BACKGROUND ---------------------------------------- */
body {
  font-family: "Fredoka One", cursive;
  background-color: var(--bg-color);
  background-image: url('assets/img/stars.png'), url('assets/img/rainbow.png');
  background-repeat: repeat, no-repeat;
  background-position: center, top center;
  background-size: auto, cover; 
  min-height: 100vh;
  max-height: 100vh; /* FIXED: Prevent body from growing beyond viewport */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem; 
  overflow: hidden; /* FIXED: Explicitly disable scrolling on body */
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .tile--highlight::after { animation: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- UTILITY & FIXES ------------------------------------------ */
.hidden { display: none !important; }

/* Fix oversize language-selector flags */
.lang-selector {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.lang-btn img {
  width: 48px;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
}


/* ---------- MENUS (Main, MP, Lobby) ----------------------------------- */
.menu-overlay {
    position: fixed; inset: 0; background: rgba(87, 53, 128, 0.4);
    backdrop-filter: blur(5px); display: flex; align-items: center;
    justify-content: center; z-index: 100; padding: 1rem;
}
.menu-content {
    background: #fff; padding: 2rem; border-radius: var(--radius-xl);
    text-align: center; box-shadow: var(--shadow-modal); border: 3px solid #fff;
    width: 100%; max-width: 450px; display: flex; flex-direction: column; gap: 1rem;
    max-height: 80vh; /* FIXED: Prevent menus from overflowing viewport */
    overflow-y: auto; /* FIXED: Allow scrolling only within menus if needed */
}
.menu-logo { width: 80%; max-width: 300px; margin: -4rem auto 0; }
.menu-content h2 { color: var(--outline); margin-bottom: 1rem; font-size: 2rem; }
.player-input-container input {
    width: 100%; padding: 12px 20px; border-radius: var(--radius-md);
    border: 2px solid var(--pink-light); font-size: 1.2rem; text-align: center;
    color: var(--text-dark); font-family: "Fredoka One", cursive;
}
.player-input-container input::placeholder { color: #f7a2c0; }
.player-input-container input:focus { outline: 2px solid var(--pink); }
.menu-btn {
    width: 100%; padding: 14px; border-radius: var(--radius-md); font-size: 1.2rem;
    cursor: pointer; color: #fff; background: var(--pink); box-shadow: var(--shadow-inset);
    transition: background .2s, transform .1s; text-transform: uppercase; font-weight: 600;
}
.menu-btn:hover { background: var(--pink-dark); }
.menu-btn:active { transform: scale(0.97); box-shadow: none; }
.menu-btn.secondary { background: #eee; color: #555; }
.menu-btn.secondary:hover { background: #ddd; }
.menu-btn:disabled { background: #cccccc; cursor: not-allowed; }

.lang-btn { width: 50px; height: 50px; border-radius: 50%; border: 3px solid transparent; transition: all 0.2s; }
.lang-btn.active { border-color: #fff; box-shadow: 0 0 10px var(--pink); }

#qr-code-display { margin: 1rem auto; display: flex; justify-content: center; align-items: center; }
#player-list { list-style: none; padding: 0; color: var(--text-dark); font-size: 1.1rem; }

/* ---------- GAME WRAPPER & CONTAINER --------------------------------- */
.game-wrapper {
    width: 100%;
    max-width: 1200px; /* Constrain wrapper width */
    max-height: calc(100vh - 2rem); /* FIXED: Prevent overflow beyond viewport */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0;
    overflow: hidden; /* FIXED: Prevent wrapper from creating scrollbars */
}

.game-container {
    width: 100%;
    container-type: inline-size;
    container-name: game-area;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-height: 0; /* FIXED: Allow flexbox to shrink properly */

    --board-size: 500px; /* Default fallback, set by JS */
    --tile-size: 50px;
}

/* ---------- HEADER & DIFFICULTY CONTROLS ----------------------------- */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* FIXED: Made header translucent to match ad banner */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 8px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-main);
}
/* Make buttons inside the header transparent */
.app-header .icon-btn, 
.app-header .timer {
    background: transparent !important;
    box-shadow: none !important;
}
.icon-btn {
    width: 54px; height: 54px;
    display: grid; place-items: center;
}
.icon-btn img { width: 60%; }
.timer {
    display: flex; align-items: center; gap: 8px; font-size: 1.5rem; color: var(--text-dark);
    padding: 8px 16px;
}
.timer img { height: 24px; }
.logo { height: 70px; }

.difficulty {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    width: 100%; max-width: 500px;
}

/* ---------- PILLS (Buttons) ------------------------------------------ */
.pill {
    border-radius: var(--radius-md); padding: 12px; font-size: 1.1rem;
    color: #fff; box-shadow: var(--shadow-inset); cursor: pointer;
    transition: filter .15s, transform .1s, box-shadow .1s, background-color .2s; text-transform: uppercase;
}
.pill:hover, .pill.active { filter: brightness(1.1); }
.pill:active { transform: scale(0.96); box-shadow: none; }
.pill.active { outline: 3px solid #fff; box-shadow: var(--shadow-inset), 0 0 10px #fff; }
.pill--pink { background: var(--pink); }
.pill--sky { background: var(--sky); }
.pill--lav { background: var(--lav); }
.pill--reset { background: var(--lav-dark); }
.pill--ready { background: var(--grid-closed-b); color: var(--text-dark) !important; }
.pill--ready:hover { background: var(--grid-closed-a); }


/* ---------- GAME BOARDS & LAYOUT ------------------------------------- */
.player-board-area, .opponent-board-area {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    flex: 1;
    min-height: 0; /* FIXED: Allow proper flexbox shrinking */
}
.board-header {
    width: 100%;
    max-width: var(--board-size);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--text-dark);
}
.board-title {
    font-size: 1.5rem;
}
.counter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    background: #fff;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-main);
}
.counter img { height: 30px; }

.game-board {
    display: grid;
    width: var(--board-size); height: var(--board-size);
    max-width: 100%;
    max-height: 100%; /* FIXED: Prevent board from overflowing */
    box-shadow: var(--shadow-main);
    grid-template-columns: repeat(var(--cols, 9), 1fr);
    grid-template-rows: repeat(var(--rows, 9), 1fr);
    contain: layout paint style;

    gap: 0;
    padding: 0;
    background: transparent;
    border: 2px solid var(--grid-border);
}

/* ---------- TILES ----------------------------------------------------- */
.tile {
    display: grid; place-items: center; font-weight: 700;
    font-size: calc(var(--tile-size) * 0.5); user-select: none; cursor: pointer;
    position: relative; /* For pseudo-elements */
    transition: background-color 0.1s, box-shadow 0.1s;
    width:  var(--tile-size);
    height: var(--tile-size);
    
    border-radius: 0;
    border: 1px solid var(--grid-border);
}

.tile--highlight::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,209,220,0.6) 50%, rgba(255,135,179,0) 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: sparkle 0.8s infinite ease-in-out;
}

@keyframes sparkle {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 1;
    }
}


.tile:active { transform: scale(0.92); }
.tile--closed { background: var(--grid-closed-a); }
.tile--closed.alt { background: var(--grid-closed-b); }
.tile--open { background: var(--grid-open); cursor: default; }
.tile--open-number { cursor: pointer; }
.tile--open:hover { filter: none; }
.tile--poop img { width: 90%; height: 90%; pointer-events: none; }
.tile--flagged img { width: 70%; height: 70%;}
.tile--n1 { color: var(--num-1); } .tile--n2 { color: var(--num-2); }
.tile--n3 { color: var(--num-3); } .tile--n4 { color: var(--num-4); }
.tile--n5 { color: var(--num-5); } .tile--n6 { color: var(--num-6); }
.tile--n7 { color: var(--num-7); } .tile--n8 { color: var(--num-8); }

.tile--invalid {
    animation: flash-red 0.5s ease-in-out;
}
.tile--invalid.alt {
    animation: flash-red-alt 0.5s ease-in-out;
}

@keyframes flash-red {
    50% { background-color: var(--pink); }
}
@keyframes flash-red-alt {
    50% { background-color: var(--pink); }
}


/* ---------- MOBILE / RESPONSIVE CONTROLS ---------------------------- */
.mobile-controls {
    display: flex; flex-direction: column; gap: 1rem; width: 100%; align-items: center;
}

.multiplayer-info-mobile, .multiplayer-info-column {
    background: #fff; border-radius: var(--radius-md); padding: 10px 14px;
    box-shadow: var(--shadow-main); color: var(--text-dark);
    text-align: center;
}

.multiplayer-info-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: auto;
    min-width: 220px;
    background: transparent;
    box-shadow: none;
}

.multiplayer-info-mobile {
     width: 95%;
    max-width: 500px;
}
.board-tabs { display: flex; gap: 0.5rem; }

/* ---------- CONTAINER QUERIES & FALLBACKS ----------------------------- */

/* Hide desktop info column and mobile tabs on small screens unless in MP */
.multiplayer-info-column { display: none; }
.mobile-controls .board-tabs { display: none; }
.mode-multiplayer .mobile-controls .board-tabs { display: flex; }
.mode-multiplayer .multiplayer-info-column { display: flex; }


/* Fallback for browsers without container queries */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .mobile-controls { display: none; }
  }
}

/* Game Over & Rematch Styles */
.game-over-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center; z-index: 200;
}
.game-over-content {
    background: #fff; padding: 30px 40px; border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal); text-align: center;
}
.game-over-content h2 { font-size: 2rem; margin-bottom: 1.5rem; }
h2.win { color: var(--sky-dark); }
h2.lose { color: var(--pink-dark); }
#modal-reset-btn { margin-top: 8px; }
.rematch-section { margin-top: 1rem; }
.rematch-question { font-size: 1.3rem; margin-bottom: 1rem; color: var(--text-dark); }
.rematch-buttons { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1rem; }
.rematch-buttons .pill { min-width: 100px; }
.rematch-status { text-align: center; color: var(--text-dark); font-size: 1.1rem; min-height: 50px; }
.rematch-status p { margin: 0.5rem 0; }


/* ======================================================================
 * Friends System CSS - Matches existing unicorn theme
 * ====================================================================== */

/* --- Friends Menu Base --- */
#friends-menu .menu-content {
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    gap: 1.5rem;
}

/* --- My Room Section (Pink Theme) --- */
.my-room-section {
    background: linear-gradient(135deg, var(--pink-light), #ffeef7);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    border: 2px solid var(--pink);
    position: relative;
}

.my-room-section::before {
    content: '🏠';
    position: absolute;
    top: -10px;
    right: 15px;
    font-size: 2rem;
    background: white;
    padding: 0 0.5rem;
    border-radius: 50%;
}

.my-room-section h3 {
    color: var(--text-dark);
    margin-bottom: 0.25rem;
    font-size: 1.3rem;
}

.my-room-section .subtitle {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    opacity: 0.8;
}

.room-id-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    background: white;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    border: 3px solid var(--pink);
    box-shadow: var(--shadow-main);
}

#my-room-id-text {
    flex: 1;
    font-family: "Fredoka One", cursive;
    font-size: 1.2rem;
    color: var(--text-dark);
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
    word-break: break-all;
    min-width: 150px;
}

.room-id-display .icon-btn {
    width: 44px;
    height: 44px;
    background: var(--pink);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Larger icon */
    transition: all 0.2s;
    box-shadow: var(--shadow-inset);
    flex-shrink: 0;
}

.room-id-display .icon-btn img {
    width: 28px;
    height: 28px;
}

.room-id-display .icon-btn:hover {
    background: var(--pink-dark);
    transform: scale(1.05);
}

.room-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.room-actions .menu-btn {
    padding: 0.75rem;
    font-size: 1rem;
    margin: 0;
}

/* --- Friends Section (Sky Blue Theme) --- */
.friends-section {
    background: linear-gradient(135deg, #e6f7ff, #d4f1ff);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    border: 2px solid var(--sky);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.friends-section::before {
    content: '👥';
    position: absolute;
    top: -10px;
    right: 15px;
    font-size: 2rem;
    background: white;
    padding: 0 0.5rem;
    border-radius: 50%;
}

.friends-section h3 {
    color: var(--text-dark);
    margin-bottom: 0;
    font-size: 1.3rem;
    text-align: center;
}

/* --- Friends List --- */
.friends-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 8px; /* For scrollbar */
}

.friend-item {
    background: white;
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 2px solid var(--sky-light);
    box-shadow: var(--shadow-main);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.friend-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(137, 215, 255, 0.3);
    border-color: var(--sky);
}

.friend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.friend-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-dark);
}

.friend-status {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.friend-status.online {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #22c55e;
}

.friend-status.offline {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #94a3b8;
}

.friend-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.friend-details small {
    font-size: 0.85rem;
    color: #64748b;
}

.room-id {
    font-family: monospace;
    background: #f8fafc;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    word-break: break-all;
}

.room-status {
    color: var(--lav-dark) !important;
    font-weight: bold;
}

.games-count {
    color: var(--text-dark) !important;
}

.friend-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.friend-actions .pill {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    min-width: 80px;
    margin: 0;
}

.join-friend-btn {
    background: var(--pink);
}

.join-friend-btn:hover {
    background: var(--pink-dark);
}

.remove-friend-btn {
    background: #e2e8f0;
    color: #64748b;
}

.remove-friend-btn:hover {
    background: #cbd5e1;
}

/* --- Empty States --- */
.no-friends {
    text-align: center;
    padding: 2rem;
    color: #64748b;
    background: white;
    border-radius: var(--radius-md);
    border: 2px dashed var(--sky-light);
}

.no-friends p {
    margin-bottom: 0.5rem;
}

.no-friends strong {
    color: var(--text-dark);
    font-family: monospace;
    background: var(--pink-light);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    word-break: break-all;
}

.loading {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-dark);
    background: white;
    border-radius: var(--radius-md);
    border: 2px solid var(--sky-light);
}

.loading::before {
    content: '🔄';
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ======================================================================
 * NEW MODAL & TOAST STYLES
 * ====================================================================== */

/* --- Toast Notifications --- */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 300px;
    max-width: 90vw;
}

.toast {
    background-color: #fff;
    color: var(--text-dark);
    padding: 15px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
    border-left: 5px solid var(--pink);
    font-family: "Fredoka One", cursive;
    font-size: 1rem;
    animation: slideIn 0.3s ease-out, fadeOut 0.5s ease-in 3.5s forwards;
    opacity: 0;
}

.toast.toast-error { border-left-color: #e53e3e; }
.toast.toast-success { border-left-color: #38a169; }
.toast.toast-info { border-left-color: var(--sky); }

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; transform: scale(0.9); }
}


/* --- Generic Modal --- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(87, 53, 128, 0.4);
    backdrop-filter: blur(5px); display: flex; align-items: center;
    justify-content: center; z-index: 999; padding: 1rem;
    /* Uses the same base class as menu overlays */
}

.modal-overlay .modal-content {
    background: #fff; padding: 2rem; border-radius: var(--radius-xl);
    text-align: center; box-shadow: var(--shadow-modal); border: 3px solid #fff;
    width: 100%; max-width: 450px; display: flex; flex-direction: column; gap: 1rem;
    position: relative; /* For close button positioning */
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2.5rem;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.modal-close-btn:hover { color: var(--text-dark); }

#modal-body {
    padding-top: 1rem; /* Space below close button */
}

/* --- QR Code Modal Specific --- */
#qr-code-modal-content h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}
#qr-code-modal-container {
    padding: 1rem;
    background: white;
    border-radius: var(--radius-md);
    display: inline-block;
    border: 2px solid var(--pink-light);
}
#qr-code-modal-container img {
    display: block !important; /* Override QRCode.js inline styles */
    background: white !important;
    padding: 8px !important;
    border-radius: 16px !important;
}

/* --- Confirmation Modal Specific --- */
#confirmation-modal-content p {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}
.confirmation-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.confirmation-buttons .menu-btn {
    width: auto;
    min-width: 120px;
}

/* --- Add Friend Modal --- */
.add-friend-modal-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.add-friend-modal-content h3 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}
.add-friend-modal-content input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--sky-light);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: "Fredoka One", cursive;
    color: var(--text-dark);
}
.add-friend-modal-content button {
    width: 100%;
    background: var(--sky);
}


/* --- Mobile Responsive --- */
@media (max-width: 600px) {
    .friend-item {
        flex-direction: column;
    }

    .friend-header {
        align-items: flex-start;
    }
    
    .friend-actions {
        width: 100%;
        justify-content: stretch;
    }
    
    .friend-actions .pill {
        flex: 1;
        min-width: auto;
    }
}

@media (max-width: 400px) {
  .room-id-display {
    flex-direction: column;
  }
  .room-actions {
    flex-direction: column;
  }
}

/* ======================================================================
 * AD STYLES - UPDATED
 * ====================================================================== */

#ad-banner-container {
    width: 100%;
    height: 60px;
    padding: 5px 0;
    display: none; /* Controlled by JS */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-align: center;
    position: sticky;
    top: -1px; /* Engages sticky immediately */
    left: 0;
    right: 0;
    z-index: 50; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FIXED: Updated interstitial ad with close button */
#ad-interstitial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: white;
    font-family: "Fredoka One", cursive;
}

#ad-interstitial-overlay .ad-content {
    text-align: center;
    padding: 2rem;
    position: relative;
}

#ad-interstitial-overlay .close-ad-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    color: #fff;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

#ad-interstitial-overlay .close-ad-btn:hover {
    background: rgba(0,0,0,0.8);
}

#ad-interstitial-overlay button:not(.close-ad-btn) {
    font-size: 1.2rem;
    padding: 12px 25px;
    margin-top: 2rem;
    border-radius: var(--radius-md);
    background: var(--pink);
    color: white;
    cursor: pointer;
}