/* Unified site visuals based on index.php theme */
:root {
    --bg-color: #0f0a08;
    --wood-grain: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), repeating-linear-gradient(45deg, #2e1a12 0px, #1a0f0a 10px, #2e1a12 20px);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-bg: rgba(255, 179, 0, 0.05);
    --rim-grad: linear-gradient(135deg, #5d4037, #21130d);
    --accent-glow: 0 0 25px rgba(255, 160, 0, 0.6);
    --primary-text: #ffe0b2;
    --liquid-color: #ffb300;
    --bubble-color: rgba(255, 255, 255, 0.4);
    --screw-color: linear-gradient(45deg, #8d6e63, #3e2723);
    --font-main: 'Rye', serif;
    --font-number: 'Share Tech Mono', monospace;
    --btn-grad: linear-gradient(180deg, #ffb300 0%, #e65100 100%);
    --btn-text: #fff;
    --btn-border: #3e2723;
    --gauge-size: clamp(200px, 50vw, 300px);
    --gap-size: clamp(24px, 3vh, 32px);
    --bladder-fill: 0%;
    --wood: #3e2723;
    --gold: var(--liquid-color);
    --text: var(--primary-text);
    --panel-bg: rgba(30,20,10,0.95);
    --chart-grid: #333;
    --chart-text: #aaa;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #eaddcf;
        --wood-grain: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), repeating-linear-gradient(45deg, #d7ccc8 0px, #efebe9 10px, #d7ccc8 20px);
        --glass-border: rgba(0,0,0,0.1);
        --glass-bg: rgba(255,193,7,0.15);
        --accent-glow: 0 0 15px rgba(255,160,0,0.4);
        --primary-text: #3e2723;
        --liquid-color: #ff8f00;
        --bubble-color: rgba(255,255,255,0.8);
        --screw-color: linear-gradient(45deg, #bcaaa4, #8d6e63);
        --btn-grad: linear-gradient(180deg, #ffca28 0%, #ff6f00 100%);
        --btn-text: #3e2723;
        --btn-border: #8d6e63;
    }
}

html, body { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
}

body {
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    padding-top: 6px;
    padding-bottom: 6px;
    overflow-x: hidden; 
    overflow-y: auto;
    font-family: var(--font-main); 
    background-color: var(--bg-color); 
    background-image: var(--wood-grain);
    background-size: cover; 
    color: var(--primary-text); 
    transition: background 0.5s ease; 
    user-select: none;
    -webkit-tap-highlight-color: transparent; 
    overscroll-behavior-y: none; 
    box-sizing: border-box;
}

/* Page-specific override: top-align games page so back-link appears at top */
body.games-page {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 36px !important;
    padding-bottom: 40px !important;
}

/* Place the 'Back to The Tap' link at the top-right on the games page and apply unified button look */
body.games-page .back-link {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    transform: none !important;
    z-index: 11000 !important;
    background: rgba(0,0,0,0.55) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: var(--primary-text) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.5) !important;
}

/* Match home page orange highlight on hover */
body.games-page .back-link:hover {
    background: linear-gradient(180deg, var(--liquid-color), #e65100) !important;
    color: #000 !important;
    transform: translateY(-2px) !important;
    border-color: var(--btn-border) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.5), 0 0 12px rgba(255,160,0,0.08) !important;
}


.app-container { width: 100%; max-width: 420px; max-height: 100vh; display:flex; flex-direction: column; align-items:center; position:relative; z-index:2; gap:6px; padding:0; margin: 0 auto; overflow-y: auto; }

.nav-header { width:100%; display:flex; justify-content:space-between; margin-bottom:4px; padding:0 12px; box-sizing:border-box; }
.nav-link { color:#888; text-decoration:none; font-size:1.1rem; font-weight:bold; transition:color 0.2s; }
.nav-link:hover { color:var(--liquid-color); text-shadow:0 0 10px var(--liquid-color); }

/* GAUGE */
.gauge-rim { position: relative; width: clamp(160px, 40vw, 260px); height: clamp(160px, 40vw, 260px); border-radius: 50%; background: var(--rim-grad); box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.2); display:flex; justify-content:center; align-items:center; border:1px solid var(--btn-border); flex-shrink:0; margin:4px 0; }
.gauge-inner { width:90%; height:90%; border-radius:50%; background:var(--glass-bg); border:2px solid var(--glass-border); backdrop-filter: blur(8px); box-shadow: inset 0 0 50px var(--liquid-color); display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; overflow:hidden; }
.gauge-inner::after { content:''; position:absolute; top:10%; left:10%; width:80%; height:40%; background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); border-radius:50%; pointer-events:none; z-index:5; }

.liquid-wave { position:absolute; left:-50%; width:200%; height:200%; background:var(--liquid-color); opacity:0.5; border-radius:40%; animation:wave 6s linear infinite; z-index:0; pointer-events:none; transition: top 1s cubic-bezier(0.4,0,0.2,1); top:110%; }
@keyframes wave { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#count-display { font-family: var(--font-number); font-size: clamp(2.2rem, 8vw, 4rem); color: var(--liquid-color); text-shadow: var(--accent-glow); z-index:6; position:relative; line-height:1; }
.label { text-transform: uppercase; letter-spacing:4px; font-size: clamp(0.6rem, 1.5vh, 0.8rem); opacity:0.8; z-index:6; margin-top:10px; font-weight:bold; }

.bubble { position:absolute; border-radius:50%; background:var(--bubble-color); pointer-events:none; z-index:4; bottom:-20px; }

/* Particles */
.particle { position: fixed; pointer-events: none; z-index: 9999; font-size: 1.6rem; will-change: transform, opacity; user-select: none; }

/* CONTROLS */
.control-bar { display:flex; width:100%; justify-content:space-between; gap:8px; align-items:stretch; margin-bottom:6px; padding:0 12px; box-sizing:border-box; }
.side-btn { width:60px; padding:0; font-size:1.4rem; display:flex; justify-content:center; align-items:center; border-radius:10px; background:rgba(0,0,0,0.3); border:1.5px solid var(--btn-border); color:var(--liquid-color); cursor:pointer; transition:all 0.2s; backdrop-filter: blur(5px); overflow:hidden; position:relative; }
.side-btn:hover { background: rgba(255,255,255,0.05); }
.side-btn:active { transform: translateY(2px); }
#bathroom-btn { background: linear-gradient(0deg, rgba(255, 235, 59, 0.5) var(--bladder-fill), rgba(0,0,0,0.3) var(--bladder-fill)); transition: background 0.5s ease; }
#bathroom-btn.urgent { background: rgba(255,0,0,0.5) !important; border-color:#ff4444; animation: shake 0.5s infinite; box-shadow: 0 0 15px #ff0000; }
@keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }

#add-btn { flex-grow: 1; padding: 16px 0; font-family: inherit; font-size: clamp(1.5rem, 4vh, 2.2rem); font-weight: 800; color: var(--btn-text); text-shadow: 0 1px 2px rgba(0,0,0,0.2); text-transform: uppercase; border: 1.5px solid var(--btn-border); border-radius: 12px; cursor: pointer; background: var(--btn-grad); box-shadow: 0 8px 18px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.3); transition: all 0.1s ease; position: relative; overflow: hidden; }
#add-btn:active { transform: translateY(4px); box-shadow: 0 2px 10px rgba(0,0,0,0.2); }

#event-link-container { text-align:center; height:16px; margin:2px 0; }
#event-link { color: var(--liquid-color); text-decoration:none; font-size:0.9rem; text-transform:uppercase; letter-spacing:1px; border-bottom:1px dashed var(--liquid-color); text-shadow:0 0 10px rgba(0,0,0,0.5); display:none; }

/* Bottom nav */
.bottom-nav { display:flex; width:100%; justify-content:space-between; gap:8px; margin-top:6px; padding:0 12px; box-sizing:border-box; }
.utility-btn { flex:1; padding:8px; background: rgba(0,0,0,0.5); border:1px solid var(--liquid-color); border-radius:8px; color:var(--liquid-color); text-decoration:none; display:flex; align-items:center; justify-content:center; gap:5px; font-family:var(--font-main); font-size:0.85rem; transition:all 0.2s; }
.utility-btn:hover { background: rgba(255,179,0,0.1); transform: translateY(-2px); }

/* Unified navigation button styles (back/forward/utility) */
.nav-button, .back-link, .nav-link, .utility-btn, .nav-btn, .prev, .next {
    display: inline-flex; align-items: center; gap:8px; padding:8px 12px; border-radius:8px;
    background: rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.08); color: var(--primary-text); text-decoration:none;
    font-family: var(--font-number); font-weight:700; transition: all 0.15s ease; box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}
.nav-button:hover, .back-link:hover, .nav-link:hover, .utility-btn:hover, .nav-btn:hover, .prev:hover, .next:hover {
    transform: translateY(-2px); color: #000; background: linear-gradient(180deg, var(--liquid-color), #e65100);
    border-color: var(--btn-border); box-shadow: 0 8px 18px rgba(0,0,0,0.5), 0 0 12px rgba(255,160,0,0.08);
}
.back-link { padding:6px 10px; border-radius:6px; }
.nav-link { color: var(--primary-text); padding:6px 10px; border-radius:6px; }
.prev, .next { cursor: pointer; }

/* small-screen adjustments */
@media (max-width:420px) {
    .nav-button, .back-link, .nav-link, .utility-btn { padding:6px 8px; font-size:0.85rem; }
}

/* Screws */
.screw { position:absolute; width:5%; height:5%; background:var(--screw-color); border-radius:50%; box-shadow:1px 1px 3px rgba(0,0,0,0.4); }
.screw::before { content: ''; position:absolute; width:100%; height:2px; background:#222; top:45%; transform: rotate(45deg); }
.tl { top:7%; left:7%; } .tr { top:7%; right:7%; transform: rotate(90deg); } .bl { bottom:7%; left:7%; transform: rotate(45deg); } .br { bottom:7%; right:7%; transform: rotate(15deg); }

/* Modals */
.modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.95); backdrop-filter: blur(10px); z-index:9999; display:flex; justify-content:center; align-items:center; }
.modal-content { background: var(--bg-color); background-image: var(--wood-grain); border: 1.5px solid var(--liquid-color); padding:20px; border-radius:12px; max-width:90%; width:clamp(280px, 85vw, 380px); text-align:center; box-shadow:0 0 20px var(--accent-glow); max-height: 80vh; overflow-y: auto; }
.modal-content h2 { color: var(--liquid-color); margin-top:0; font-family: var(--font-main); letter-spacing:2px; }
.modal-content p { font-size:0.9rem; line-height:1.5; margin-bottom:20px; }
.modal-select, .modal-input { width:100%; padding:12px; margin-bottom:20px; border-radius:5px; border:1px solid #555; background:#222; color:#fff; font-size:1rem; }
.modal-btn { background: var(--btn-grad); color: var(--btn-text); border:none; padding:15px 30px; border-radius:5px; font-weight:bold; cursor:pointer; width:100%; font-size:1.1rem; margin-bottom:10px; }
.close-btn { background: transparent; border:1px solid #555; color:#aaa; }
.hidden { display:none !important; }

/* Games page overrides (restores original visual layout) */
.dashboard-container { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; }
.back-link { align-self: flex-start; margin-bottom: 20px; color: var(--primary-text); opacity: 0.8; text-decoration: none; font-size: 1rem; font-weight: bold; transition: all 0.2s; }
.back-link:hover { opacity: 1; color: var(--liquid-color); transform: translateX(-5px); }
.menu-container { display: flex; flex-direction: column; gap: 15px; width: 100%; }
h1 { color: var(--liquid-color); margin: 0 0 18px 0; text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-main); font-size: clamp(1.8rem, 5vw, 2.4rem); text-align: center; cursor: default; }
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }
.cat-btn { background: rgba(20, 10, 5, 0.8); border: 1.5px solid var(--liquid-color); border-radius: 12px; padding: 18px 8px; text-align: center; cursor: pointer; box-shadow: 0 6px 12px rgba(0,0,0,0.3); display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; box-sizing: border-box; transition: transform 0.1s; }
.cat-btn:active { transform: translateY(2px); }
.cat-icon { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.cat-title { font-family: var(--font-main); font-size: 1rem; color: var(--liquid-color); line-height: 1.2; }
.cat-desc { font-size: 0.8rem; opacity: 0.7; margin-top: 5px; display: none; }
.cat-btn.full-width { flex-direction: row; padding: 14px 16px; justify-content: flex-start; gap: 14px; text-align: left; }
.cat-btn.full-width .cat-title { font-size: clamp(1.1rem, 4vw, 1.4rem); }
.cat-btn.full-width .cat-desc { display: block; margin-top: 0; }

/* Modal visibility behavior for pages that toggle .active */
.modal-overlay { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-content { background: var(--card-bg); border: 2px solid var(--card-border); padding: 20px; border-radius: 20px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 0 40px var(--accent-glow); transform: scale(0.95); transition: transform 0.25s; max-height: 85vh; display: flex; flex-direction: column; }
.modal-overlay.active .modal-content { transform: scale(1); }

.game-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-right: 5px; flex-grow: 1; min-height: 0; }
.game-choice { background: rgba(0,0,0,0.3); border: 1px solid var(--card-border); padding: 15px; border-radius: 10px; color: var(--primary-text); text-decoration: none; font-weight: bold; display: flex; align-items: center; gap: 15px; transition: all 0.2s; cursor: pointer; text-align: left; flex-shrink: 0; }
.game-choice:hover { background: var(--liquid-color); color: #000; }

.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow-y: auto; padding-right: 5px; min-height: 0; }
.app-card { background: rgba(0,0,0,0.3); border: 1px solid var(--card-border); border-radius: 10px; color: var(--primary-text); font-weight: bold; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15px 5px; gap: 10px; position: relative; text-decoration: none; transition: background 0.2s; }
.app-card:hover { background: rgba(255, 179, 0, 0.1); border-color: var(--liquid-color); }
.app-card span { font-size: 2rem; }
.app-name { font-size: 0.9rem; text-align: center; }

.score-btn { position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; background: rgba(0,0,0,0.5); border: 1px solid #555; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; cursor: pointer; color: #888; transition: all 0.2s; z-index: 10; }
.score-btn:hover { background: var(--liquid-color); color: #000; border-color: #fff; transform: scale(1.1); }

/* Small utility overrides for rules display */
.rule-title { color: var(--liquid-color); font-family: var(--font-main); font-size: 1.8rem; margin-bottom: 10px; text-align: center; }
.rule-body { font-size: 1rem; line-height: 1.5; color: #ddd; overflow-y: auto; white-space: pre-line; padding-right: 5px; }
.rule-citation { margin-top: 15px; font-size: 0.8rem; color: #888; text-align: center; border-top: 1px dashed #444; padding-top: 10px; cursor: pointer; font-style: italic; }

/* Ensure rules lists can expand into multiple columns on wide screens.
   Games may provide their own .rules-grid-wrapper but default to a grid layout
   that will display many items without requiring vertical scrolling on desktop. */
.rules-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
    width: 100%;
}
@media (min-width: 600px) { .rules-grid-wrapper { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .rules-grid-wrapper { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1200px) { .rules-grid-wrapper { grid-template-columns: repeat(7, 1fr); } }

.rule-item { min-height: 56px; box-sizing: border-box; }

/* Global game layout helpers */
.game-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 12px; box-sizing: border-box; }
.history-container { max-height: 45vh; overflow-y: auto; }

/* sensible defaults for interactive containers when responsive.js isn't yet applied */
.card-container { width: 220px; height: 280px; max-width: 420px; margin: 0 auto; }
.coin-stage { width: 220px; height: 220px; max-width: 460px; margin: 0 auto; }

/* ensure main game area doesn't hide overflow on desktop */
.game-area { box-sizing: border-box; }

/* Ratings page specifics */
.top-nav { position: relative; width: 100%; max-width: 700px; height:60px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.top-nav .back-link { position:absolute; left:0; top:50%; transform: translateY(-50%); color:#888; text-decoration:none; font-family:var(--font-number); border:1px solid #555; padding:8px 15px; border-radius:5px; background:rgba(0,0,0,0.5); font-size:0.9rem; z-index:10; }
h1.page-title { font-family: var(--font-main); color: var(--liquid-color); font-size: 2rem; margin:0; text-shadow:2px 2px 0 #000; text-align:center; width:100%; padding:0 60px; box-sizing:border-box; }
.container { width:100%; max-width:700px; display:flex; flex-direction:column; gap:20px; padding:0 20px; box-sizing:border-box; }
.card { background: var(--panel-bg); border:2px solid var(--wood); border-radius:10px; padding:20px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.label { font-size:0.8rem; color:#aaa; display:block; margin-bottom:5px; text-transform:uppercase; letter-spacing:1px; }
input[type="text"], textarea { width:100%; background:#222; border:1px solid #555; color:#fff; padding:10px; font-size:1rem; border-radius:5px; box-sizing:border-box; font-family: var(--font-number); }
.loc-bar { display:flex; gap:10px; }
.loc-btn { background:#333; border:1px solid #555; color:#fff; padding:10px; border-radius:5px; cursor:pointer; flex-shrink:0; }
.loc-btn:hover { background: var(--gold); color:#000; }
.stars { display:flex; gap:10px; justify-content:center; margin:10px 0; }
.star { font-size:2.5rem; cursor:pointer; filter:grayscale(1); transition: transform 0.1s; }
.star.active { filter:grayscale(0); transform: scale(1.1); }
.submit-btn { width:100%; background: linear-gradient(180deg, var(--gold), #e65100); border:2px solid #fff; color:#fff; padding:12px; font-family: var(--font-main); font-size:1.2rem; border-radius:30px; cursor:pointer; margin-top:10px; }

/* Ticker */
.ticker-wrap { position: fixed; bottom: 0; left: 0; width:100%; overflow:hidden; background:#000; border-top:2px solid var(--gold); height:40px; display:flex; align-items:center; z-index:100; }
.ticker { display:flex; white-space:nowrap; animation: ticker 20s linear infinite; }
.ticker-item { padding: 0 30px; color:#ddd; font-family: var(--font-number); font-size:0.9rem; }
@keyframes ticker { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }

/* Stats page specifics */
.dashboard-container { width:95%; max-width:800px; display:flex; flex-direction:column; padding:10px; box-sizing:border-box; margin:auto; }
h1.stats-title { color: var(--gold); margin:0 0 15px 0; text-transform:uppercase; letter-spacing:2px; font-family: var(--font-main); text-shadow:2px 2px 0 #000; text-align:center; font-size:1.8rem; }
.stat-box { background: var(--panel-bg); border:2px solid var(--wood); border-radius:10px; padding:15px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); margin-bottom:20px; }
.projected-date { font-size: clamp(1rem, 2vh, 1.5rem); font-weight:bold; color:var(--gold); margin:5px 0; font-family: var(--font-number); line-height:1; text-shadow: 0 0 10px rgba(255,179,0,0.3); }
.sub-text { font-size:0.8rem; opacity:0.9; color:#ccc; }
.label-text { font-size:0.9rem; font-weight:bold; margin-top:10px; display:block; color:#888; text-transform:uppercase; letter-spacing:1px; }
.top-nav { display:flex; justify-content:space-between; align-items:center; width:100%; margin-bottom:15px; gap:10px; }
.nav-btn { flex:1; text-align:center; background: rgba(46,26,18,0.9); border:2px solid var(--wood); border-radius:10px; padding:10px 5px; text-decoration:none; color:var(--text); font-family:var(--font-main); font-size:0.8rem; transition:all 0.2s; box-shadow:0 5px 10px rgba(0,0,0,0.3); white-space:nowrap; }
.nav-btn:hover { background: var(--wood); border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.chart-stage { background: rgba(0,0,0,0.3); padding:10px; border-radius:10px 10px 0 0; border:2px solid var(--wood); border-bottom:none; box-shadow: inset 0 0 20px rgba(0,0,0,0.8); height:30vh; min-height:200px; position:relative; }
.controls { display:flex; border:2px solid var(--wood); border-top:1px solid #444; border-radius:0 0 10px 10px; overflow:hidden; background:#222; }
.ctrl-btn { flex:1; padding:10px; border:none; background:transparent; color:#888; font-family:var(--font-main); font-size:0.8rem; cursor:pointer; border-right:1px solid #444; text-transform:uppercase; }
.ctrl-btn:last-child { border-right:none; }
.ctrl-btn:hover { background: rgba(255,255,255,0.05); color:#fff; }
.ctrl-btn.active { background: var(--gold); color:#000; font-weight:bold; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.refresh-btn { margin-top:20px; padding:10px 20px; background: var(--wood); border:2px solid var(--gold); color:var(--gold); border-radius:8px; cursor:pointer; font-family:var(--font-main); text-transform:uppercase; letter-spacing:1px; transition:all 0.2s; font-size:0.9rem; text-decoration:none; display:inline-block; align-self:center; box-shadow:0 5px 15px rgba(0,0,0,0.5); }
.refresh-btn:hover { background: var(--gold); color:#000; box-shadow:0 0 15px var(--gold); }

/* Utility */
.hidden { display:none !important; }
/* STANDARDIZED BUTTON SYSTEM */
.btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-group.inline { justify-content: flex-start; }
.btn-group.stretch { gap: 10px; }
.btn-group.stretch .btn { flex: 1; }

/* Chart/Tab Buttons (used in stats/ledger, games) */
.chart-btn, .tab-btn, .ctrl-btn-new {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--btn-border);
    color: var(--primary-text);
    padding: 8px 12px;
    border-radius: 6px;
    font-family: var(--font-number);
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.chart-btn:hover, .tab-btn:hover, .ctrl-btn-new:hover {
    border-color: var(--liquid-color);
    background: rgba(255,179,0,0.05);
}

.chart-btn.active, .tab-btn.active, .ctrl-btn-new.active {
    background: linear-gradient(180deg, var(--liquid-color), #e65100);
    border-color: var(--btn-border);
    color: #000;
    box-shadow: 0 8px 18px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.3);
}

/* Primary Action Button (used in games) */
.btn, .action-btn {
    background: var(--btn-grad);
    border: 1.5px solid var(--btn-border);
    color: var(--btn-text);
    padding: 12px 20px;
    border-radius: 8px;
    font-family: var(--font-number);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.1s ease;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 8px 18px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn:active, .action-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.btn:disabled, .action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Secondary Button (used for close, cancel) */
.btn-secondary {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--btn-border);
    color: var(--primary-text);
    padding: 10px 16px;
    border-radius: 6px;
    font-family: var(--font-number);
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.btn-secondary:hover {
    background: rgba(255,179,0,0.1);
    border-color: var(--liquid-color);
}

.btn-secondary:active {
    transform: translateY(1px);
}

/* Utility Button (small, icon-based) */
.btn-icon {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--btn-border);
    color: var(--liquid-color);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    font-family: var(--font-number);
    font-weight: bold;
}

.btn-icon:hover {
    background: rgba(255,179,0,0.1);
    border-color: var(--liquid-color);
}

/* ========================================
   MOBILE RESPONSIVENESS ENHANCEMENTS
   ======================================== */

/* Tablet and Small Devices (max-width: 768px) */
@media (max-width: 768px) {
    /* Safe area support for notched phones */
    body {
        padding-top: max(6px, env(safe-area-inset-top));
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        padding-left: max(6px, env(safe-area-inset-left));
        padding-right: max(6px, env(safe-area-inset-right));
    }
    
    /* Main container adjustments */
    .app-container {
        max-width: 100%;
        width: 100%;
        padding: 0 4px;
        gap: 6px;
        box-sizing: border-box;
    }
    
    /* Navigation header */
    .nav-header {
        padding: 0 4px;
        gap: 6px;
        flex-wrap: nowrap;
        justify-content: center;
        margin-bottom: 8px;
    }
    
    .nav-link {
        font-size: 0.95rem;
        padding: 6px 8px;
        white-space: nowrap;
        flex: 1;
        text-align: center;
        max-width: 48%;
    }
    
    /* Gauge sizing for smaller screens */
    .gauge-rim {
        width: min(340px, 80vw);
        height: min(340px, 80vw);
        margin: 12px 0;
    }
    
    #count-display {
        font-size: clamp(2.8rem, 9vw, 4.4rem);
    }
    
    .label {
        font-size: clamp(0.7rem, 1.6vh, 0.95rem);
        letter-spacing: 3px;
    }
    
    /* Control bar adjustments */
    .control-bar {
        gap: 8px;
        padding: 0 8px;
        margin-bottom: 8px;
    }
    
    .side-btn {
        width: 56px;
        height: 56px;
        min-width: 48px;
        min-height: 48px;
        font-size: 1.4rem;
        flex-shrink: 0;
    }
    
    #add-btn {
        font-size: clamp(1.3rem, 4vh, 2rem);
        padding: 16px 0;
        min-height: 56px;
        flex: 1;
    }
    
    /* Bottom navigation */
    .bottom-nav {
        gap: 8px;
        padding: 0 8px;
        margin-top: 8px;
    }
    
    .utility-btn {
        padding: 12px 8px;
        font-size: 1rem;
        min-height: 48px;
        gap: 6px;
        flex: 1;
    }
    
    .utility-btn span {
        font-size: 1.25rem;
    }
    
    /* Event link improvements for mobile */
    #event-link-container {
        height: 24px;
        margin: 6px 0;
    }
    
    #event-link {
        font-size: 0.9rem;
        padding: 2px 4px;
    }
    
    /* Modal improvements for mobile */
    .modal-content {
        width: 90vw;
        max-width: 95vw;
        padding: 16px;
        border-radius: 10px;
        max-height: 85vh;
        margin: 0 auto;
    }
    
    .modal-content h2 {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }
    
    .modal-content p {
        font-size: 1rem;
    }
    
    .modal-select, .modal-input {
        padding: 10px;
        font-size: 1.1rem;
        margin-bottom: 12px;
    }
    
    .modal-btn {
        padding: 12px 20px;
        font-size: 1.05rem;
        margin-bottom: 8px;
    }
    
    /* Games page adjustments */
    .dashboard-container {
        padding: 8px;
        max-width: 95vw;
    }
    
    .back-link {
        padding: 8px 12px;
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    
    h1 {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem);
        margin-bottom: 12px;
    }
    
    .menu-container {
        gap: 10px;
    }
    
    .split-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .cat-btn {
        padding: 14px 6px;
        font-size: 1rem;
    }
    
    .cat-icon {
        font-size: clamp(1.8rem, 5.5vw, 2.4rem);
    }
    
    .cat-btn.full-width {
        padding: 12px 12px;
        gap: 10px;
    }
    
    /* Game container responsive */
    .game-container {
        padding: 0 8px;
    }
    
    /* Canvas games adjustments */
    .history-container {
        max-height: 40vh;
    }
    
    /* Stats page adjustments */
    .stat-box {
        padding: 12px;
        margin-bottom: 12px;
    }
    
    .chart-stage {
        height: 25vh;
        min-height: 180px;
    }
    
    .nav-btn {
        padding: 8px 4px;
        font-size: 0.75rem;
    }
    
    /* Ensure touch targets are at least 44px × 44px */
    .btn, .action-btn, .modal-btn, .chart-btn, .tab-btn, .utility-btn, .side-btn, .cat-btn, .nav-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Button text adjustments */
    .btn, .action-btn {
        padding: 10px 16px;
        font-size: 1.05rem;
    }
    
    /* Better touch spacing */
    .btn-group {
        gap: 6px;
    }
    
    .btn-group.stretch .btn {
        min-height: 44px;
    }
    
    /* Ticker visibility on mobile */
    .ticker-wrap {
        height: 36px;
        font-size: 0.8rem;
    }
    
    .ticker-item {
        padding: 0 15px;
    }
    
    /* Rating page */
    .container {
        padding: 0 12px;
    }
    
    h1.page-title {
        padding: 0 40px;
        font-size: 1.4rem;
    }
    
    .card {
        padding: 14px;
    }
    
    .stars {
        margin: 8px 0;
    }
    
    .star {
        font-size: 2rem;
    }
    
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden;
    }
    
    /* Touch action optimization */
    button, a, input, select, textarea {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        user-select: none;
    }
}

/* Small Phones (max-width: 480px) */
@media (max-width: 480px) {
    /* Extra aggressive spacing reduction */
    .app-container {
        max-width: 100%;
        width: 100%;
        padding: 0 4px;
        gap: 4px;
    }
    
    .nav-header {
        flex-direction: row;
        gap: 4px;
        justify-content: space-between;
        padding: 0 4px;
        margin-bottom: 6px;
    }
    
    .nav-link {
        font-size: 0.9rem;
        padding: 6px 8px;
        flex: 1;
        max-width: 49%;
    }
    
    /* Smaller gauge on very small screens */
    .gauge-rim {
        width: min(300px, 75vw);
        height: min(300px, 75vw);
        margin: 10px 0;
    }
    
    #count-display {
        font-size: clamp(2.4rem, 8vw, 3.6rem);
    }
    
    .label {
        font-size: clamp(0.65rem, 1.4vh, 0.85rem);
    }
    
    /* Compact control bar */
    .control-bar {
        gap: 6px;
        padding: 0 8px;
        margin-bottom: 6px;
    }
    
    .side-btn {
        width: 52px;
        height: 52px;
        font-size: 1.1rem;
        padding: 0;
    }
    
    #add-btn {
        font-size: clamp(1.1rem, 3.5vh, 1.6rem);
        padding: 14px 0;
        min-height: 52px;
        letter-spacing: 0;
    }
    
    /* Bottom nav stacking */
    .bottom-nav {
        flex-direction: row;
        gap: 6px;
        padding: 0 8px;
        margin-top: 6px;
    }
    
    .utility-btn {
        padding: 10px 6px;
        font-size: 0.9rem;
        min-height: 48px;
        flex: 1;
    }
    
    .utility-btn span {
        font-size: 1.15rem;
    }
    
    /* Modal adjustments for small screens */
    .modal-content {
        width: 95vw;
        padding: 12px;
        border-radius: 8px;
    }
    
    .modal-content h2 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    
    .modal-select, .modal-input {
        padding: 8px;
        font-size: 1.05rem;
    }
    
    /* Games page on small screens */
    .split-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .cat-btn {
        padding: 12px 8px;
    }
    
    .cat-icon {
        font-size: clamp(1.2rem, 4vw, 1.6rem);
    }
    
    h1 {
        font-size: clamp(1.2rem, 4vw, 1.6rem);
        margin-bottom: 10px;
    }
    
    .menu-container {
        gap: 8px;
    }
    
    /* Reduce button padding */
    .btn, .action-btn, .modal-btn {
        padding: 10px 12px;
        font-size: 1rem;
    }
    
    /* Game container */
    .game-container {
        padding: 0 6px;
    }
    
    /* Stats page */
    .stat-box {
        padding: 10px;
    }
    
    h1.stats-title {
        font-size: 1.3rem;
    }
    
    .projected-date {
        font-size: clamp(0.85rem, 2vh, 1.2rem);
    }
    
    .chart-stage {
        height: 20vh;
        min-height: 160px;
    }
    
    /* Ratings page */
    h1.page-title {
        padding: 0 30px;
        font-size: 1.2rem;
    }
    
    .container {
        padding: 0 8px;
    }
    
    .card {
        padding: 10px;
    }
}

/* Extra Small Devices (max-width: 360px) */
@media (max-width: 360px) {
    .app-container {
        padding: 0 2px;
    }
    
    .nav-header {
        padding: 0 2px;
    }
    
    .nav-link {
        font-size: 0.85rem;
        padding: 5px 6px;
    }
    
    .gauge-rim {
        width: min(280px, 72vw);
        height: min(280px, 72vw);
        margin: 8px 0;
    }
    
    #count-display {
        font-size: clamp(2.2rem, 7vw, 3.2rem);
    }
    
    .control-bar {
        padding: 0 4px;
        gap: 4px;
    }
    
    .side-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
    
    #add-btn {
        min-height: 48px;
        font-size: clamp(1rem, 3vh, 1.4rem);
    }
    
    .bottom-nav {
        padding: 0 4px;
        gap: 4px;
    }
    
    .utility-btn {
        font-size: 0.85rem;
        padding: 10px 4px;
        min-height: 44px;
    }
    
    .utility-btn span {
        font-size: 1.1rem;
    }
    
    .modal-content {
        padding: 10px;
    }
    
    .split-row {
        gap: 6px;
    }
    
    h1 {
        font-size: 1.1rem;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .app-container {
        max-height: 95vh;
        gap: 2px;
    }
    
    .gauge-rim {
        width: clamp(80px, 20vw, 140px);
        height: clamp(80px, 20vw, 140px);
    }
    
    #count-display {
        font-size: clamp(1.2rem, 3vh, 1.8rem);
    }
    
    .control-bar {
        gap: 4px;
    }
    
    .side-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    #add-btn {
        font-size: clamp(0.9rem, 2.5vh, 1.2rem);
        padding: 8px 0;
    }
    
    .bottom-nav {
        gap: 4px;
        flex-direction: row;
    }
    
    .utility-btn {
        font-size: 0.7rem;
        padding: 6px 4px;
        height: 40px;
    }
    
    .game-container {
        padding: 0 6px;
    }
    
    .history-container {
        max-height: 20vh;
    }
    
    .chart-stage {
        height: 15vh;
        min-height: 120px;
    }
}

/* Pointer/Touch Input Optimization */
@media (pointer: coarse) {
    /* Touch devices get larger tap targets and adjusted spacing */
    button, a, .nav-button, .back-link, .utility-btn {
        padding: 10px 12px;
    }
    
    .side-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    
    #add-btn {
        padding: 16px 0;
    }
    
    /* Remove hover effects on touch, keep active states */
    .nav-button:hover, .back-link:hover, .utility-btn:hover {
        transform: none;
        background: rgba(0,0,0,0.45);
    }
    
    /* But enhance active state for feedback */
    .nav-button:active, .back-link:active, .utility-btn:active, button:active {
        transform: translateY(2px);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High DPI devices */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Slightly bolder fonts for clarity on high-DPI screens */
    h1, h2, .cat-title, .label {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}