:root {
    --color-text-dark: #564026;
    --color-text-gold: #CAAD7D;
    --color-title: #CE9A5C;
    --color-wood-dark: #3e2b19;
    --color-wood-light: #6d4c2e;
    --color-felt-bg: #1a472a; /* Deep Green Felt fallback */
    --color-felt-texture: #0f301b;
    --color-panel-bg: #f3e5d0;
    --color-panel-border: #d4b895;
    --font-main: 'Inter', sans-serif;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-main);
    background-color: var(--color-felt-bg);
    background-image: url('assets/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 75px; /* Account for sticky ad (320×50 + padding) on mobile */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

@media (min-width: 768px) {
    body {
        padding-bottom: 120px; /* Account for sticky ad (728×90 + padding) on tablet/desktop */
    }
}

/* Header */
.site-header {
    background-image: url('assets/bg-nav.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Removing explicit border-bottom color or making it transparent if bg image includes it, 
       but user didn't specify removing border, just setting bg image. 
       However, the reference image shows a clean bar. 
       The user asked for height 55px. */
    height: 55px;
    border-bottom: 4px solid #2a1d0f; /* Keeping existing border unless asked to remove, but usually bg replaces it if it's texture. 
                                         Lets keep it but maybe user wants it exact. 
                                         User said "set this image as bg-image". */
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    padding: 0; /* Removing padding to respect fixed height */
    display: flex; /* alignment */
    align-items: center;
    position: relative;
    z-index: 100;
}

.header-inner {
    max-width: 998px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%; /* Fill header height */
}

.brand {
    font-weight: 900;
    font-size: 1rem;
    color: #CE9A5C; /* Explicitly setting color as requested */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

@media (min-width: 768px) {
    .brand { font-size: 1.5rem; }
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.site-nav a {
    color: #C6A392; /* Updated color */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    display: none; 
}

@media (min-width: 600px) {
    .site-nav a { 
        display: block;
        font-size: 0.9rem;
    }
}

.search-box {
    position: relative;
}

.search-box input {
    background-color: #1E1C24; /* Updated bg */
    border: 1px solid #40363A; /* Updated border */
    /* border-radius: 4px; */
    padding: 6px 30px 6px 10px;
    color: #fff;
    font-family: inherit;
    color: #fff;
    font-family: inherit;
    width: 100%;
    max-width: 120px;
    font-size: 0.85rem;
}

@media (min-width: 600px) {
    .search-box input { 
        width: 150px;
        max-width: 150px;
        font-size: 0.9rem;
    }
}

.search-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    opacity: 0.7;
    color: #fff; /* Ensure icon is visible on dark background */
}

/* Ads */
.ad-container {
    display: flex;
    justify-content: center;
    margin: var(--spacing-md) 0;
}

.ad-container.ad-top {
    order: 0;
}

@media (min-width: 1024px) {
    .ad-container { order: 5; }
    .ad-container.ad-top { order: unset; }
}

.ad-placeholder {
    background: #e8dbc3;
    border: 1px solid #c0a070;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: relative;
}

.ad-dims {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-top: 4px;
}

.ad-top .ad-placeholder { 
    width: 320px;
    height: 50px;
    background-image: url('assets/bg-ad-top.png');
    background-size: cover;
    background-position: center;
    border: 2px solid #6d4c2e; 
    border-radius: 8px;
    color: #3e2b19; 
}
@media (min-width: 768px) {
    .ad-top .ad-placeholder { width: 728px; height: 90px; }
}

.ad-tall .ad-placeholder { 
    width: 300px; 
    height: 100px; 
    background-image: url('assets/bg-right-ad-top.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #6d4c2e; /* refined border to match theme */
    color: #3e2b19;
}
.ad-medium .ad-placeholder { 
    width: 300px;
    height: 250px; 
    background-image: url('assets/bg-right-ad-bottom.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #6d4c2e; 
    color: #3e2b19;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .ad-medium .ad-placeholder { 
        width: 300px;
        max-width: 300px;
    }
}

.ad-container.ad-medium {
    padding: 0 8px;
    margin: var(--spacing-md) 0;
}

@media (min-width: 768px) {
    .ad-container.ad-medium { 
        padding: 0;
    }
}

.desktop-only { display: none; }
@media (min-width: 1024px) {
    .desktop-only { display: flex; }
}

.mobile-only { display: flex; }
@media (min-width: 1024px) {
    .mobile-only { display: none; }
}

/* Main Grid Layout */
.main-grid {
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 8px;
    width: 100%;
    gap: 12px;
    flex: 1;
}

@media (min-width: 600px) {
    .main-grid { padding: 0 var(--spacing-md); gap: 16px; }
}

@media (min-width: 1024px) {
    .main-grid {
        display: grid;
        grid-template-columns: 280px 1fr 340px;
        align-items: start;
        padding: 0 var(--spacing-md);
        gap: var(--spacing-lg);
    }
}

/* Panels Common */
h2 {
    color: var(--color-text-dark);
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-panel-border);
    padding-bottom: 4px;
}

@media (min-width: 768px) {
    h2 { font-size: 1rem; }
}

.names-panel, .winner-panel {
    /* background: var(--color-panel-bg);  <-- Removing shared bg/border to customize names-panel */
    /* border: 1px solid var(--color-panel-border); */
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    /* padding: var(--spacing-md); */
}

@media (min-width: 768px) {
    .names-panel, .winner-panel {
        border-radius: 12px;
    }
}

@media (min-width: 1024px) {
    .names-panel, .winner-panel {
        border-radius: 8px;
    }
}

/* Specific background for winner panel since we removed shared one, or we can restore it for winner-panel only in its section */
/* Actually, let's just override in .names-panel and keep shared for defaults? 
   Better to decouple if they look very different. 
   I will leave the shared rule but override in specific blocks. 
   Wait, if I leave it, names-panel will have both. 
   Let's just apply the bg image to names-panel and ensure it overrides color. 
*/

.names-panel {
    background-image: url('assets/bg-list.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    padding: 15px;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    order: 4; 
    color: #4a3b2a;
    min-height: 400px;
}

@media (min-width: 600px) {
    .names-panel { padding: 20px; }
}

@media (min-width: 1024px) { 
    .names-panel { 
        order: unset; 
        height: 600px;
        padding: 30px;
    } 
}

.winner-panel {
    background: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    padding: var(--spacing-md);
}

.names-list-container {
    flex: 1;
    overflow-y: auto;
    border: none;
    background: transparent;
    margin-bottom: var(--spacing-md);
    order: 1;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--spacing-md);
    order: 2;
}

.list-controls {
    order: 3;
}

#nameInput {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
    #nameInput { 
        padding: 10px;
        font-size: 1rem;
    }
}

.btn-primary {
    background: url('assets/bg-blue.png') no-repeat center center;
    background-size: 100% 100%;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    width: 100%;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .btn-primary { 
        padding: 12px;
        font-size: 1rem;
    }
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.names-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.names-list li {
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .names-list li { 
        padding: 8px 10px;
        font-size: 0.9rem;
    }
}

.names-list li:last-child {
    border-bottom: none;
}

.delete-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-weight: bold;
    padding: 0 5px;
}

.delete-btn:hover { color: #cc0000; }

.list-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .list-controls { font-size: 0.85rem; }
}

.toggle-control {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Center: Wheel */
.wheel-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 2;
}
@media (min-width: 1024px) { .wheel-section { order: unset; } }

.wheel-wrapper {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: transparent;
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: var(--spacing-lg);
    aspect-ratio: 1 / 1;
    padding: 0 10px;
}

.roulette-wheel {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    background: url(assets/roulette_1.jpg);
    background-size: 100% 100%;
    position: relative;
    touch-action: none;
    overflow: visible;
    margin: 0 auto;
    box-shadow: 2px 10px 30px rgba(0, 0, 0, 0.4);
}

.roulette-wheel .layer-2,
.roulette-wheel .layer-3,
.roulette-wheel .layer-4,
.roulette-wheel .layer-5,
.roulette-wheel .ball-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}

.roulette-wheel .layer-2,
.roulette-wheel .layer-4,
.roulette-wheel .ball-container {
    will-change: transform;
}

.roulette-wheel .layer-2 {
    background-image: url(assets/roulette_2.png);
}

.roulette-wheel .layer-3 {
    background-image: url(assets/roulette_3.png);
}

.roulette-wheel .layer-4 {
    background-image: url(assets/roulette_4.png);
}

.roulette-wheel .layer-5 {
    background-image: url(assets/roulette_5.png);
}

.roulette-wheel svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.roulette-wheel circle {
    cursor: pointer;
    fill: transparent;
}

.roulette-wheel .ball {
    position: absolute;
    width: 3.68%;
    height: 3.68%;
    border-radius: 50%;
    background: #fff radial-gradient(circle at 35% 35%, #fff, #444);
    box-shadow: 1px 1px 4px #000;
    transform: translateY(-30.5%);
    top: 50%;
    left: 50%;
    margin: -1.84%;
    will-change: transform;
}

/* Make wheel responsive within wheel-wrapper */
.wheel-wrapper {
    display: grid;
    place-items: center;
    background: transparent;
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: var(--spacing-lg);
    aspect-ratio: 1 / 1;
}

@media (min-width: 400px) {
    .wheel-wrapper { 
        max-width: 350px;
        padding: 0;
    }
}

@media (min-width: 600px) {
    .wheel-wrapper { max-width: 380px; }
}

@media (min-width: 768px) {
    .wheel-wrapper { max-width: 420px; }
}

@media (min-width: 1024px) {
    .wheel-wrapper { max-width: 480px; }
}

#wheelCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.pointer-indicator {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid gold;
    z-index: 10;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
    display: none;
}

.wheel-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 280px;
    order: 2;
}

@media (min-width: 768px) {
    .wheel-controls { max-width: 300px; }
}

.roulette {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.wheel {
    position: relative;
    width: 100%;
    max-width: 600px; 
    aspect-ratio: 1/1;
    margin: 0 auto; /* Center alignment */
}

.wheel img {
  transition: transform 10s cubic-bezier(0.3, 1, 0.7, 1), 10s filter cubic-bezier(0.1, 1, 0.8, 1);
  will-change: transform;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.arrow {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top: 30px solid #e74c3c; /* Tomato-ish color */
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

.btn-spin {
    background: url('assets/btn.png') no-repeat center center;
    background-size: 100% 100%; 
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    border: none;
    padding: 12px 30px;
    cursor: pointer;
    text-shadow: 0 2px 2px rgba(0,0,0,0.8);
    transition: transform 0.1s, filter 0.2s;
    width: 100%;
    height: 60px;
    display: flex; 
    align-items: center; 
    justify-content: center;
}

@media (min-width: 768px) {
    .btn-spin { 
        font-size: 1.5rem;
        padding: 15px 40px;
        height: 80px;
    }
}

.btn-spin:active {
    transform: scale(0.95);
}

.btn-spin:disabled {
    filter: grayscale(0.8);
    cursor: not-allowed;
    opacity: 0.8;
}

.secondary-controls {
    display: flex;
    gap: var(--spacing-sm);
}

.btn-secondary {
    background: #444;
    color: #fff;
    border: 1px solid #666;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.btn-secondary:hover { background: #555; }

.status-label {
    background: #000;
    color: #0f0;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 1.2rem;
    letter-spacing: 2px;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Right Column */
.right-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    order: 3; /* Winner panel logic */
}
@media (min-width: 1024px) { .right-panel { order: unset; } }

.winner-panel {
    background-image: url('assets/bg-blue.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--color-text-gold);
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .winner-panel { 
        min-height: 100px;
        max-width: 300px;
    }
}

.winner-label {
    color: #bcccdc;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

@media (min-width: 768px) {
    .winner-label { 
        font-size: 0.9rem;
        margin-bottom: 8px;
    }
}

.winner-name {
    color: var(--color-text-gold);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    word-break: break-word;
}

@media (min-width: 768px) {
    .winner-name { font-size: 1.8rem; }
}

/* Bottom Sticky Ad */
.ad-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 5px;
    z-index: 999;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 65px; /* 320×50 + 15px padding on mobile */
    visibility: visible;
    opacity: 1;
}

.ad-sticky.hidden {
    display: none;
}

.ad-sticky .ad-container {
    margin: 0;
}

.ad-sticky-content {
    width: 320px;
    height: 50px;
    background-image: url('assets/bg-ad-top.png');
    background-size: cover;
    background-position: center;
    background-color: #e8dbc3;
    border: 2px solid #6d4c2e;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3e2b19;
    font-weight: bold;
    font-size: 0.9rem;
}

.ad-close {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #333;
    color: #fff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 1000;
}

.ad-close:hover {
    background: #555;
}

@media (min-width: 768px) {
    .ad-sticky {
        padding: 10px;
        height: 110px; /* 728×90 + 20px padding on desktop */
    }
    .ad-sticky-content {
        width: 728px;
        height: 90px;
    }
}

@media (min-width: 1024px) {
    .ad-sticky {
        display: none !important;
    }
    body {
        padding-bottom: 20px;
    }
}