*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#1a2e1a;--card:#243524;--card2:#1e2e1e;--green:#4a8c3f;--lime:#8ed473;--gold:#f0c040;--white:#f0efe8;--red:#e05555;--bronze:#cd7f32;--silver:#c0c0c0;--goldm:#ffd700}
body{background:var(--bg);color:var(--white);font-family:'Outfit',sans-serif;min-height:100vh;overflow:hidden;user-select:none;-webkit-user-select:none}
#app{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center}
#header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:800px;padding:8px 20px;z-index:10}
.header-left{display:flex;align-items:center;gap:12px}
#header h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.3rem;color:var(--lime);text-shadow:0 2px 8px rgba(0,0,0,0.4)}
#header h1 span{color:var(--gold)}
.back-btn{background:var(--card);border:1px solid rgba(142,212,115,0.2);color:var(--white);font-family:'Fredoka',sans-serif;font-size:0.8rem;padding:5px 12px;border-radius:8px;cursor:pointer;transition:all 0.2s;display:none}
.back-btn:hover{background:var(--green)}
.mute-btn{background:none;border:1px solid rgba(142,212,115,0.2);color:var(--white);font-size:1.1rem;width:32px;height:32px;border-radius:8px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.mute-btn:hover{background:var(--card);border-color:rgba(142,212,115,0.4)}
.header-stats{display:flex;gap:12px}
.stat-box{background:var(--card);border:1px solid rgba(142,212,115,0.2);border-radius:8px;padding:3px 10px;display:flex;flex-direction:column;align-items:center;line-height:1.3}
.stat-label{font-size:0.6rem;opacity:0.6;text-transform:uppercase;letter-spacing:1px}
.stat-value{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--gold);font-size:1rem}
#canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%;position:relative}
#game-area{flex:1;display:flex;align-items:center;justify-content:center;width:100%;max-width:1100px;gap:16px;padding:0 8px}
canvas{border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,0.5);cursor:crosshair;touch-action:none;width:100%;max-width:600px;height:auto}
#power-bar-wrap{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:200px;background:var(--card);border-radius:14px;border:2px solid rgba(142,212,115,0.15);overflow:hidden;display:flex;flex-direction:column-reverse;opacity:0;transition:opacity 0.2s}
#power-bar-wrap.visible{opacity:1}
#power-fill{width:100%;background:linear-gradient(to top,var(--lime),var(--gold),var(--red));border-radius:0 0 12px 12px;transition:height 0.05s}
.power-label{position:absolute;top:-22px;width:100%;text-align:center;font-size:0.6rem;text-transform:uppercase;letter-spacing:1px;opacity:0.6}
#bottom-hud{display:flex;align-items:center;justify-content:center;gap:20px;padding:8px 20px;width:100%;max-width:800px}
.hud-item{font-family:'Fredoka',sans-serif;font-size:0.85rem;font-weight:500}
.hud-item strong{color:var(--lime)}
#msg{font-family:'Fredoka',sans-serif;font-size:0.95rem;font-weight:600;color:var(--gold);min-height:1.4em;text-align:center}

/* Overlays */
.overlay{position:fixed;inset:0;background:rgba(10,20,10,0.88);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn 0.3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.overlay-card{background:var(--card);border:2px solid rgba(142,212,115,0.2);border-radius:20px;padding:32px 36px;text-align:center;max-width:480px;width:92%;animation:popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275);max-height:90vh;overflow-y:auto}
@keyframes popIn{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}
.overlay-card h2{font-family:'Fredoka',sans-serif;font-size:1.9rem;color:var(--lime);margin-bottom:6px}
.overlay-card h2 span{color:var(--gold)}
.overlay-card p{margin:6px 0;opacity:0.8;line-height:1.5;font-size:0.9rem}

/* Menu */
.menu-grid{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.menu-card{background:var(--card2);border:2px solid rgba(142,212,115,0.12);border-radius:14px;padding:16px 20px;cursor:pointer;transition:all 0.25s;text-align:left;display:flex;align-items:center;gap:16px}
.menu-card:hover{border-color:rgba(142,212,115,0.4);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.3)}
.menu-icon{font-size:2rem;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:12px;flex-shrink:0}
.menu-text h3{font-family:'Fredoka',sans-serif;font-size:1.05rem;font-weight:600;margin-bottom:2px}
.menu-text p{font-size:0.75rem;opacity:0.55;margin:0}
.daily-card{border-color:rgba(240,192,64,0.3)}.daily-card:hover{border-color:rgba(240,192,64,0.6)}.daily-card .menu-icon{background:rgba(240,192,64,0.12)}.daily-card h3{color:var(--gold)}
.bronze-card .menu-icon{background:rgba(205,127,50,0.15)}.bronze-card h3{color:var(--bronze)}
.silver-card .menu-icon{background:rgba(192,192,192,0.12)}.silver-card h3{color:var(--silver)}
.gold-card .menu-icon{background:rgba(255,215,0,0.12)}.gold-card h3{color:var(--goldm)}
.daily-date{font-family:'Fredoka',sans-serif;font-size:0.7rem;color:var(--gold);opacity:0.7;margin-top:8px;letter-spacing:1px}
.how-to{font-size:0.75rem;opacity:0.45;margin-top:16px;line-height:1.5}

/* Buttons */
.btn{display:inline-block;margin-top:18px;padding:11px 30px;background:var(--green);color:var(--white);border:none;border-radius:12px;font-family:'Fredoka',sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 0 #357a2a,0 6px 20px rgba(0,0,0,0.3)}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(2px)}
.btn-sm{padding:8px 20px;font-size:0.85rem;margin-top:12px}

/* Scorecard */
.scorecard{margin:14px 0;width:100%}.scorecard table{width:100%;border-collapse:collapse;font-size:0.8rem}
.scorecard th,.scorecard td{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,0.08)}
.scorecard th{font-size:0.6rem;text-transform:uppercase;letter-spacing:1px;opacity:0.5;font-weight:400}
.scorecard td{font-family:'Fredoka',sans-serif}
.score-good{color:var(--lime)}.score-bad{color:var(--red)}.score-par{color:var(--gold)}

/* Ad Slots */
.ad-unit{display:block}
.ad-label{font-size:0.55rem;text-transform:uppercase;letter-spacing:1px;opacity:0.3;text-align:center;margin-bottom:4px}

/* Sidebar ad — desktop only, fills dead space beside canvas */
.ad-sidebar{display:none;flex-direction:column;align-items:center;width:160px;min-height:300px;flex-shrink:0}
.ad-sidebar .ad-unit{width:160px;min-height:300px}

/* Menu ad — small banner below menu options */
.ad-menu{margin-top:16px;max-width:400px;min-height:50px;margin-left:auto;margin-right:auto;opacity:0.9}

/* Between-holes ad — shown during natural pause */
.ad-between-holes{margin:12px 0 4px;max-width:380px;min-height:50px;margin-left:auto;margin-right:auto;opacity:0.9}

/* Scorecard ad — after results */
.ad-scorecard{margin-top:14px;max-width:400px;min-height:50px;margin-left:auto;margin-right:auto;opacity:0.9}

/* Show sidebar only on wide screens (>960px) where there's space */
@media(min-width:961px){
  .ad-sidebar{display:flex}
}

/* Hide between-holes ad every other hole to keep it from being annoying */
.ad-between-holes.ad-hidden{display:none}

@media(max-width:600px){
  #header h1{font-size:1rem}.header-stats{gap:6px}.stat-box{padding:2px 6px}.stat-value{font-size:0.9rem}
  #bottom-hud{gap:10px}#power-bar-wrap{right:8px;height:150px}
  .overlay-card{padding:24px 20px}.menu-card{padding:12px 14px;gap:12px}
}