:root { --gold:#ffd23f; --blue:#0a1a7a; --blue2:#1e90ff; }
* { box-sizing: border-box; }
body {
    margin: 0; min-height: 100vh; color: #fff;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    background: #1a9a2e url(../img/background.png) center top / cover fixed no-repeat;
    -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }

.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; }
.abbott { height: 26px; }
.logo { display:block; width: min(80vw, 340px); margin: 0 auto; }
.logo-sm { height: 44px; }

.container { width: min(94vw, 480px); margin: 0 auto; padding-bottom: 24px; }
.card {
    background: rgba(0,20,90,.85); border: 2px solid var(--blue2);
    border-radius: 18px; padding: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
label { display:block; font-weight:bold; margin-bottom:14px; }
input[type=text], input[type=password] {
    width:100%; padding:12px; border-radius:10px; border:none; font-size:16px; margin-top:6px;
}
.selfie-pick {
    text-align:center; padding:14px; border:2px dashed var(--blue2);
    border-radius:12px; cursor:pointer;
}
.preview {
    display:none; width:160px; height:160px; object-fit:cover; border-radius:50%;
    margin:12px auto; border:4px solid var(--gold);
}
.msg { color: var(--gold); text-align:center; min-height:20px; }
.opt { font-weight: normal; display:block; margin: 10px 0; }

.btn {
    display:block; width:100%; padding:14px; margin-top:12px; border:none; border-radius:999px;
    background: linear-gradient(#ffe066, #ffb703); color: var(--blue);
    font-size:18px; font-weight:bold; cursor:pointer; text-decoration:none; text-align:center;
}
.btn.alt { background: linear-gradient(#4cc9f0, #1e90ff); color:#fff; }
.btn:disabled { opacity:.6; }

/* HUD */
.hud {
    display:grid; grid-template-columns: repeat(5, 1fr); gap:6px;
    width: min(94vw, 480px); margin: 0 auto 10px;
}
.hud div {
    background: rgba(0,20,90,.85); border:1px solid var(--blue2); border-radius:12px;
    text-align:center; padding:6px 2px;
}
.hud span { display:block; font-size:11px; opacity:.85; }
.hud b { font-size:16px; }

/* Banner */
.banner {
    position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
    background: var(--gold); color: var(--blue); font-weight:bold;
    padding: 10px 18px; border-radius: 999px; z-index: 30;
    box-shadow: 0 4px 12px rgba(0,0,0,.35); max-width: 90vw; text-align:center;
}

/* Metrics */
.metrics { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom: 8px; }
.metric {
    background: rgba(255,255,255,.1); border-radius:12px; padding:12px; text-align:center;
}
.metric span { display:block; font-size:13px; opacity:.85; }
.metric b { display:block; font-size:24px; color: var(--gold); }

/* Leaderboard */
.lb { padding: 0; margin: 0; }
.lb li {
    list-style:none; display:flex; align-items:center; gap:10px;
    background: rgba(255,255,255,.1); padding:8px; border-radius:12px; margin-bottom:8px;
}
.lb li.me {
    background: rgba(255, 210, 63, .25);
    outline: 3px solid var(--gold);
}
.lb img {
    width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--gold);
}
.lb .who { flex: 1; min-width: 0; }
.lb .pts { text-align: right; }
.lb .pts b { color: var(--gold); display: block; }
.lb .rank { font-weight:bold; color: var(--gold); width: 36px; }
.up { color: #4cff7a; font-weight: bold; }
.down { color: #ff7b7b; font-weight: bold; }
.badge {
    display: inline-block; font-size: 11px; background: var(--gold); color: var(--blue);
    border-radius: 999px; padding: 2px 8px; margin-left: 4px; font-weight: bold;
}
.pts small, .who small { display: inline-block; }

@media (min-width: 768px) {
    .container, .hud { width: min(80vw, 560px); }
    .hud b { font-size: 20px; }
}

/* Screenshot guard */
.no-capture { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.no-capture img { pointer-events: none; -webkit-user-drag: none; }
@media print { body { display: none !important; } }

.guard {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(0, 0, 0, .95);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.guard-box {
    background: var(--blue); border: 2px solid var(--gold); border-radius: 18px;
    padding: 24px; text-align: center; max-width: 360px; width: 100%;
}
.guard-box h3 { margin: 0 0 10px; color: var(--gold); }

/* Hint and rank */
.hint { font-size: 13px; opacity: .85; text-align: center; margin: 6px 0 12px; }
.rank-banner {
    text-align: center; background: rgba(255, 210, 63, .15); border: 1px dashed var(--gold);
    border-radius: 12px; padding: 10px; margin: 12px 0; font-size: 16px;
}
.rank-banner b { color: var(--gold); font-size: 22px; }

/* Info button & Rules modal */
.info-btn {
    position: fixed; right: 14px; bottom: 14px; z-index: 60;
    width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff;
    background: var(--gold); color: var(--blue);
    font: bold 24px Georgia, serif; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.modal {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(0, 0, 0, .7);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
    background: var(--blue); border: 2px solid var(--gold); border-radius: 18px;
    padding: 20px; width: 100%; max-width: 420px; max-height: 88vh;
    display: flex; flex-direction: column;
}
.modal-box h2 { margin: 0 0 10px; text-align: center; color: var(--gold); }
.rules-body {
    overflow-y: auto; flex: 1; font-size: 15px; line-height: 1.45; padding-right: 4px;
}
.rules-body h4 { margin: 14px 0 4px; color: var(--gold); font-size: 16px; }
.rules-body p, .rules-body ul { margin: 0 0 6px; }
.rules-body ul { padding-left: 18px; }
.rules-body li { margin: 3px 0; }
.modal-box .btn { margin-top: 14px; }

/* =========================================================
   WHACK-A-MOLE ARCADE CABINET UI
   ========================================================= */
.game-page { overflow: hidden; }

.wam-stage {
    position: relative;
    width: min(94vw, 440px);
    margin: 4px auto 0;
    user-select: none;
    touch-action: manipulation;
}

.wam-cabinet {
    position: relative;
    width: 100%;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.45));
}

/* Top Pink/Orange Marquee */
.wam-marquee {
    position: relative;
    width: 82%;
    margin: 0 auto;
    background: linear-gradient(180deg, #ff7eb3 0%, #f04e98 100%);
    border: 6px solid #f7a644;
    border-bottom: none;
    border-radius: 26px 26px 0 0;
    padding: 14px 14px 12px;
    box-shadow: inset 0 4px 0 rgba(255,255,255,.35);
}

.wam-screen {
    position: relative;
    background: radial-gradient(circle at 50% 45%, #ffdf73 0%, #f59c38 100%);
    border-radius: 16px;
    padding: 10px 8px 12px;
    text-align: center;
    overflow: hidden;
    box-shadow: inset 0 3px 8px rgba(155, 65, 0, .35);
}

.wam-sparkle {
    position: absolute;
    color: #fffbe6;
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}
.wam-sparkle.s1 { top: 8px; left: 14px; font-size: 22px; }
.wam-sparkle.s2 { top: 14px; right: 16px; font-size: 16px; }
.wam-sparkle.s3 { bottom: 12px; left: 42%; font-size: 14px; }

.wam-title-w, .wam-title-a, .wam-title-m {
    font-family: "Arial Black", "Impact", "Trebuchet MS", sans-serif;
    font-weight: 900;
    color: #ff2e88;
    text-shadow:
        0 3px 0 #b80d57,
        -1px -1px 0 #ff85b8;
    letter-spacing: 2px;
    line-height: .95;
}
.wam-title-w { font-size: clamp(32px, 8.5vw, 42px); transform: rotate(-3deg); }
.wam-title-m { font-size: clamp(30px, 8vw, 40px); transform: rotate(-2deg); margin-top: 2px; }

.wam-title-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 2px 0;
}
.wam-title-a { font-size: clamp(26px, 7vw, 34px); }

.wam-hole-deco {
    width: 48px;
    height: 14px;
    border-radius: 50%;
    background: #140f38;
    border-bottom: 3px solid #9d174d;
    display: inline-block;
}

.wam-mallet-deco {
    width: 44px;
    height: 24px;
    background: #8c5a3c;
    border-radius: 6px;
    position: relative;
    transform: rotate(-24deg);
    box-shadow: inset -6px 0 0 #693f26;
}
.wam-mallet-deco::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 26px;
    background: #b07a57;
    left: 18px;
    top: 20px;
    border-radius: 3px;
}

/* Digital LED Score Box */
.wam-led-wrap {
    margin: 10px auto 0;
    width: 132px;
    background: #230614;
    border: 3px solid #751845;
    border-radius: 8px;
    padding: 4px 8px;
    text-align: center;
    box-shadow: inset 0 2px 6px #000;
}
.wam-led {
    font-family: "Courier New", monospace;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 4px;
    color: #ff2a55;
    text-shadow: 0 0 10px rgba(255, 42, 85, .85);
    line-height: 1;
}

/* Interactive Mallet */
.wam-mallet {
    position: absolute;
    right: -12px;
    bottom: -14px;
    width: 68px;
    height: 84px;
    z-index: 20;
    pointer-events: none;
    transform-origin: bottom right;
    transform: rotate(-18deg);
    transition: left .06s ease-out, top .06s ease-out;
}
.wam-mallet .mallet-head {
    width: 54px;
    height: 62px;
    border-radius: 24px 24px 16px 16px;
    background: radial-gradient(circle at 35% 30%, #37417a 0%, #161b47 75%, #0c0f2b 100%);
    border: 3px solid #4d5ba3;
    box-shadow: 0 6px 12px rgba(0,0,0,.45);
    position: relative;
}
.wam-mallet .mallet-head::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 16px;
    border-radius: 50%;
    background: #0a0d26;
}
.wam-mallet .mallet-handle {
    width: 14px;
    height: 32px;
    background: linear-gradient(90deg, #1b2254, #3a478f);
    margin: -4px auto 0;
    border-radius: 0 0 8px 8px;
}
.wam-mallet.whacking {
    animation: mallet-swing .24s cubic-bezier(.2,.9,.3,1);
}
@keyframes mallet-swing {
    0%   { transform: translate(-45%, -55%) rotate(-45deg) scale(1.08); }
    45%  { transform: translate(-55%, -25%) rotate(15deg) scale(.95); }
    100% { transform: translate(-45%, -40%) rotate(-12deg) scale(1); }
}

/* Green Slanted Play Deck */
.wam-deck {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #54d678 0%, #38b85c 100%);
    border-top: 5px solid #80ed99;
    border-bottom: 10px solid #238c42;
    border-radius: 18px 18px 10px 10px;
    padding: 28px 14px 22px;
    box-shadow: 0 8px 0 #1b6e33;
}

.wam-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.wam-row-top { margin-bottom: 24px; }
.wam-row-bot { width: 72%; margin: 0 auto; }

/* Individual Hole & Pop-up Mole */
.wam-hole {
    position: relative;
    width: 92px;
    height: 76px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0 0 46px 46px;
    -webkit-tap-highlight-color: transparent;
}

.wam-pit {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 30px;
    border-radius: 50%;
    background: #0d1238;
    box-shadow: inset 0 5px 8px #000, 0 2px 0 #7ce897;
}

.wam-lip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 14px;
    background: linear-gradient(180deg, transparent 0%, #3ec263 55%);
    pointer-events: none;
    z-index: 4;
}

/* Capsule Mole */
.wam-mole {
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 72px;
    height: 68px;
    border-radius: 36px 36px 24px 24px;
    background: radial-gradient(circle at 35% 28%, #1f2b8f 0%, #0d1354 75%, #070a33 100%);
    border: 2px solid #2b44c2;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, 105%);
    transition: transform .13s cubic-bezier(.22, 1.25, .36, 1);
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,.45);
}

.wam-hole.is-up .wam-mole {
    transform: translate(-50%, 0%);
}

/* Glowing Blue Icon inside Mole */
.wam-mole img {
    width: 56%;
    height: 56%;
    object-fit: contain;
    filter: invert(58%) sepia(92%) saturate(2400%) hue-rotate(192deg) brightness(104%) contrast(102%)
            drop-shadow(0 0 6px rgba(56, 189, 248, .85));
}

/* Glowing Red Bomb inside Mole */
.wam-hole.is-bomb .wam-mole {
    border-color: #ef4444;
    background: radial-gradient(circle at 35% 28%, #2b1347 0%, #140826 80%);
}
.wam-hole.is-bomb .wam-mole img {
    width: 62%;
    height: 62%;
    filter: invert(27%) sepia(95%) saturate(5800%) hue-rotate(344deg) brightness(102%) contrast(106%)
            drop-shadow(0 0 7px rgba(255, 59, 92, .95));
}

/* Whacked / Exploded Feedback States */
.wam-hole.is-hit .wam-mole {
    transform: translate(-50%, 28%) scale(1.12, .82);
    border-color: #4cff7a;
    box-shadow: 0 0 18px #4cff7a;
}
.wam-hole.is-boom .wam-mole {
    transform: translate(-50%, 15%) scale(1.15);
    border-color: #ff3b3b;
    box-shadow: 0 0 22px #ff3b3b;
}

/* Cabinet Front Apron & Coin Door */
.wam-front {
    width: 90%;
    height: 68px;
    margin: 0 auto;
    background: linear-gradient(180deg, #e83e8c 0%, #c92670 100%);
    border-radius: 0 0 16px 16px;
    padding-top: 10px;
}
.wam-coinbox {
    width: 48%;
    height: 44px;
    margin: 0 auto;
    background: #14194a;
    border: 4px solid #35419c;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;
}
.wam-coinbox span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #64748b;
}

/* Floating +10 / -3 / -5 Popups */
.gain, .penalty-pop {
    position: absolute;
    z-index: 25;
    pointer-events: none;
    transform: translateX(-50%);
    font: 900 24px "Trebuchet MS", sans-serif;
    text-shadow: 0 2px 6px rgba(0,0,0,.75);
    animation: pop-float .75s ease-out forwards;
}
.gain { color: #4cff7a; }
.penalty-pop { color: #ff4d4d; }

@keyframes pop-float {
    0%   { transform: translate(-50%, 0) scale(.85); opacity: 1; }
    100% { transform: translate(-50%, -55px) scale(1.1); opacity: 0; }
}

@media (max-height: 680px) {
    .wam-marquee { padding: 8px 10px 8px; }
    .wam-screen { padding: 6px; }
    .wam-led { font-size: 24px; }
    .wam-deck { padding: 16px 10px 14px; }
    .wam-row-top { margin-bottom: 12px; }
    .wam-hole { width: 82px; height: 66px; }
    .wam-front { height: 42px; }
}