:root{--ink:#183a40;--muted:#627d83;--line:#d9e8e8;--accent:#127b87;--panel:#fff}*{box-sizing:border-box}body{margin:0;background:#edf7f6;color:var(--ink);font-family:system-ui,"Yu Gothic",sans-serif}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.65}button:focus-visible,input:focus-visible{outline:3px solid #ed9b32;outline-offset:4px}.app-header{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px}.brand{border:0;background:none;color:var(--ink);font-weight:900;font-size:20px;text-align:left}nav{display:flex;gap:8px}main{max-width:1060px;margin:auto;padding:10px 20px 40px}.screen{display:none}.screen.active{display:block}.primary-btn,.ghost-btn{border:1px solid #c4dedf;border-radius:14px;padding:12px 18px;font-weight:700;min-height:44px}.primary-btn{background:#127b87;color:white}.ghost-btn{background:white;color:#185560}.hero{display:flex;align-items:center;justify-content:space-between;padding:28px 40px;border-radius:28px;background:linear-gradient(120deg,#dcf2ec,#c8e9ef);margin-bottom:24px;overflow:hidden}.hero h1{font-size:clamp(26px,4vw,42px);line-height:1.5;margin:12px 0}.hero img{width:26%;max-height:240px;object-fit:contain}.home-eyebrow{font-size:11px;letter-spacing:.12em;font-weight:800}.coin-pill{display:inline-block;background:#fff9df;padding:9px 16px;border-radius:30px}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.game-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;padding:24px;border:1px solid #d2e7e5;border-radius:22px;background:white;color:var(--ink);box-shadow:0 5px 0 #dcece9}.game-card:hover{border-color:#127b87;transform:translateY(-2px)}.game-card strong{font-size:18px}.game-card>span:not(.emoji){font-size:13px;line-height:1.7;color:var(--muted)}.emoji{font-size:32px}.game-card small{color:#946215;margin-top:auto}.game-card b{color:#127b87}.note,footer{text-align:center;font-size:12px;color:var(--muted);padding:16px}.settings{max-width:640px;margin:auto;background:white;padding:28px;border-radius:24px;display:grid;gap:18px}.settings p{line-height:1.8;margin:0}.settings h1,.settings h2{margin:0}.settings input[type=range]{width:100%}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;background:#183a40;color:white;padding:12px 20px;border-radius:20px;max-width:90%;display:none}#toast.visible{display:block}
        .outfit-buddy {
            position: relative;
            z-index: 1;
            width: 178px;
            height: 270px;
            filter: drop-shadow(0 16px 22px rgba(31, 41, 55, .18));
        }
        .outfit-buddy-layer {
            position: absolute;
            inset: 0;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            pointer-events: none;
        }
        .outfit-buddy-background { opacity: .9; }
        .outfit-buddy-body { z-index: 1; }
        .outfit-buddy-hand { z-index: 2; }
        .outfit-buddy-accessory { z-index: 3; }
        .outfit-buddy-hat { z-index: 4; }
        .bell-game-shell {
            display: grid;
            gap: 14px;
        }
        .bell-hero {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: center;
            padding: 16px;
            border: 3px solid rgba(255,255,255,.9);
            border-radius: 28px;
            background: linear-gradient(135deg, #eff6ff, #fff7ed 72%, #fff);
            box-shadow: 0 12px 0 rgba(37,99,235,.10), var(--shadow-soft);
        }
        .bell-hero h3 { margin: 4px 0 6px; font-size: clamp(24px, 5vw, 34px); }
        .bell-hero p { margin: 0; color: var(--muted); line-height: 1.6; }
        .bell-difficulty-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }
        .bell-difficulty-btn {
            min-height: 48px;
            border: 2px solid rgba(37,99,235,.14);
            border-radius: 16px;
            background: #fff;
            color: var(--ink);
            font-weight: 1000;
            box-shadow: 0 6px 0 rgba(37,99,235,.08);
        }
        .bell-difficulty-btn.active {
            border-color: rgba(37,99,235,.72);
            background: var(--blue);
            color: #fff;
            transform: translateY(2px);
            box-shadow: 0 3px 0 #1d4ed8;
        }
        .bell-arena {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: end;
            gap: 10px;
            min-height: 320px;
            padding: 18px;
            border-radius: 30px;
            border: 3px solid rgba(255,255,255,.9);
            background:
                radial-gradient(circle at 50% 28%, rgba(250,204,21,.26), transparent 34%),
                linear-gradient(180deg, rgba(15,23,42,.04), rgba(255,255,255,.10) 46%, rgba(15,23,42,.10)),
                url("assets/game/bg-bell.png"),
                linear-gradient(180deg, #eef2ff, #ecfeff 58%, #fef3c7);
            background-position: center;
            background-size: cover;
            box-shadow: inset 0 0 0 2px rgba(37,99,235,.06), 0 14px 0 rgba(15,23,42,.08);
            overflow: hidden;
        }
        .bell-fighter {
            display: grid;
            justify-items: center;
            gap: 8px;
            min-width: 0;
        }
        .bell-fighter-name {
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(255,255,255,.86);
            color: var(--ink);
            font-size: 12px;
            font-weight: 1000;
            box-shadow: 0 4px 0 rgba(15,23,42,.08);
        }
        .bell-buddy {
            width: min(31vw, 180px);
            height: min(31vw, 180px);
        }
        .bell-enemy-img {
            width: min(31vw, 180px);
            height: min(31vw, 180px);
            object-fit: contain;
            filter: drop-shadow(0 16px 18px rgba(15, 23, 42, .18));
            animation: buddyFloat 3.2s ease-in-out infinite;
        }
        .bell-center {
            position: relative;
            display: grid;
            justify-items: center;
            align-self: center;
            gap: 12px;
            min-width: 126px;
        }
        .bell-status {
            min-width: 120px;
            padding: 10px 12px;
            border: 3px solid #fff;
            border-radius: 18px;
            background: #111827;
            color: #fff;
            text-align: center;
            font-size: 20px;
            font-weight: 1000;
            box-shadow: 0 8px 0 rgba(15,23,42,.22);
        }
        .bell-status.go { background: #dc2626; animation: bellPulse .42s ease-in-out infinite alternate; }
        .bell-status.win { background: #059669; }
        .bell-status.lose { background: #4b5563; }
        .bell-signal {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            width: 108px;
            padding: 7px;
            border: 3px solid rgba(255,255,255,.9);
            border-radius: 999px;
            background: rgba(15,23,42,.72);
            box-shadow: 0 7px 0 rgba(15,23,42,.18);
        }
        .bell-signal span {
            display: block;
            aspect-ratio: 1;
            border-radius: 50%;
            background: #475569;
            box-shadow: inset 0 2px 5px rgba(255,255,255,.24);
        }
        .bell-arena[data-bell-phase="waiting"] .bell-signal span {
            animation: bellSignalWait 1.05s ease-in-out infinite;
        }
        .bell-arena[data-bell-phase="waiting"] .bell-signal span:nth-child(2) { animation-delay: .18s; }
        .bell-arena[data-bell-phase="waiting"] .bell-signal span:nth-child(3) { animation-delay: .36s; }
        .bell-arena[data-bell-phase="go"] .bell-signal span {
            background: #ef4444;
            box-shadow: 0 0 18px rgba(239,68,68,.8), inset 0 2px 5px rgba(255,255,255,.5);
        }
        .bell-arena[data-bell-result="player-win"] .bell-signal span { background: #22c55e; }
        .bell-arena[data-bell-result="enemy-win"] .bell-signal span,
        .bell-arena[data-bell-result="player-foul"] .bell-signal span { background: #64748b; }
        .bell-tap-button {
            position: relative;
            display: grid;
            place-items: center;
            width: 116px;
            height: 116px;
            border: 6px solid #92400e;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%, #fff7ad, #facc15 48%, #d97706 100%);
            color: #78350f;
            font-size: 24px;
            font-weight: 1000;
            box-shadow: 0 12px 0 #92400e, 0 18px 30px rgba(120,53,15,.22);
            touch-action: manipulation;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;
            transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
        }
        .bell-tap-button:active,
        .bell-tap-button.is-touching { transform: translateY(8px) scale(.97); box-shadow: 0 4px 0 #92400e, 0 10px 18px rgba(120,53,15,.18); }
        .bell-tap-button:disabled {
            opacity: .56;
            filter: grayscale(.25);
            cursor: not-allowed;
            transform: translateY(6px) scale(.98);
            box-shadow: 0 5px 0 #92400e, 0 10px 18px rgba(120,53,15,.12);
        }
        .bell-arena[data-bell-result="player-win"] .bell-buddy {
            animation: bellBuddyPress .58s cubic-bezier(.2, 1.35, .42, 1) both;
            filter: drop-shadow(0 14px 14px rgba(22,163,74,.28));
        }
        .bell-arena[data-bell-result="enemy-win"] .bell-buddy,
        .bell-arena[data-bell-result="player-foul"] .bell-buddy {
            animation: bellBuddyRejected .68s cubic-bezier(.2, 1.2, .42, 1) both;
            filter: drop-shadow(-10px 14px 12px rgba(220,38,38,.22));
        }
        .bell-arena[data-bell-result="enemy-win"] .bell-center::after,
        .bell-arena[data-bell-result="player-win"] .bell-center::after {
            content: "";
            position: absolute;
            width: 146px;
            height: 146px;
            border-radius: 50%;
            background:
                radial-gradient(circle, rgba(250,204,21,.42), transparent 34%),
                conic-gradient(from 18deg, transparent 0 10deg, rgba(245,158,11,.72) 10deg 18deg, transparent 18deg 36deg);
            animation: bellBurst .55s ease-out both;
            pointer-events: none;
            z-index: 0;
        }
        .bell-center > * { position: relative; z-index: 1; }
        .bell-enemy-img.is-outcome {
            animation: bellEnemyPop .5s cubic-bezier(.2, 1.3, .42, 1) both;
        }
        .bell-enemy-img.is-pressing {
            transform: translateX(-12px) translateY(6px) scale(1.12);
            filter: drop-shadow(0 18px 16px rgba(217,119,6,.28));
        }
        .bell-enemy-img.is-rejected {
            animation: bellEnemyRejected .7s cubic-bezier(.2, 1.2, .42, 1) both;
            filter: drop-shadow(12px 14px 12px rgba(59,130,246,.22));
        }
        .bell-tap-button.is-player-pressed,
        .bell-tap-button.is-enemy-pressed {
            transform: translateY(10px) scale(.96);
            box-shadow: 0 3px 0 #92400e, 0 12px 24px rgba(245,158,11,.30);
        }
        .bell-tap-button.is-rejected {
            animation: bellButtonShock .48s ease-out both;
        }
        .bell-tap-button.is-armed {
            filter: saturate(1.16) brightness(1.03);
        }
        .bell-tap-button.is-armed::after {
            content: "READY";
            position: absolute;
            inset: auto auto -10px 50%;
            padding: 3px 8px;
            border-radius: 999px;
            background: #1d4ed8;
            color: #fff;
            font-size: 10px;
            font-weight: 1000;
            transform: translateX(-50%);
            box-shadow: 0 4px 0 rgba(30,64,175,.32);
        }
        .bell-result-card {
            padding: 14px;
            border-radius: 22px;
            background: rgba(255,255,255,.88);
            box-shadow: var(--shadow-soft);
            text-align: center;
        }
        .bell-result-card strong { display: block; margin-bottom: 4px; font-size: 18px; }
        .bell-result-card p { margin: 0; color: var(--muted); line-height: 1.6; }
        .bell-reaction-meter {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 12px;
            padding: 12px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(239,246,255,.96), rgba(255,247,237,.96));
            overflow: hidden;
        }
        .bell-reaction-meter[hidden] { display: none; }
        .bell-reaction-meter div {
            position: relative;
            z-index: 1;
            padding: 8px;
            border-radius: 14px;
            background: rgba(255,255,255,.82);
            text-align: center;
            box-shadow: 0 5px 0 rgba(37,99,235,.08);
        }
        .bell-reaction-meter span {
            display: block;
            color: var(--muted);
            font-size: 11px;
            font-weight: 900;
        }
        .bell-reaction-meter b {
            display: block;
            margin-top: 2px;
            color: var(--ink);
            font-size: 20px;
            line-height: 1;
        }
        .bell-reaction-meter i {
            position: absolute;
            top: 0;
            bottom: 0;
            left: var(--bell-needle-x, 50%);
            width: 4px;
            border-radius: 999px;
            background: #ef4444;
            box-shadow: 0 0 18px rgba(239,68,68,.5);
            transform: translateX(-50%);
            transition: left .28s cubic-bezier(.2,1.35,.3,1);
        }
        .bell-actions {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        @keyframes bellPulse {
            from { transform: scale(1); }
            to { transform: scale(1.08) rotate(-1deg); }
        }
        @keyframes bellSignalWait {
            0%, 100% { background: #475569; }
            50% { background: #facc15; box-shadow: 0 0 14px rgba(250,204,21,.65), inset 0 2px 5px rgba(255,255,255,.42); }
        }
        @keyframes bellBurst {
            0% { opacity: 0; transform: scale(.4) rotate(0deg); }
            35% { opacity: 1; }
            100% { opacity: 0; transform: scale(1.24) rotate(18deg); }
        }
        @keyframes bellBuddyPress {
            0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
            48% { transform: translateX(28px) translateY(12px) rotate(5deg) scale(1.09); }
            100% { transform: translateX(18px) translateY(8px) rotate(2deg) scale(1.04); }
        }
        @keyframes bellBuddyRejected {
            0% { transform: translateX(0) rotate(0deg) scale(1); }
            36% { transform: translateX(-28px) translateY(-8px) rotate(-11deg) scale(.96); }
            66% { transform: translateX(-16px) translateY(4px) rotate(7deg) scale(.98); }
            100% { transform: translateX(-20px) translateY(0) rotate(-4deg) scale(.98); }
        }
        @keyframes bellEnemyPop {
            0% { opacity: .55; transform: translateY(12px) scale(.9); }
            100% { opacity: 1; }
        }
        @keyframes bellEnemyRejected {
            0% { transform: translateX(0) rotate(0deg) scale(1); }
            35% { transform: translateX(30px) translateY(-10px) rotate(12deg) scale(.98); }
            70% { transform: translateX(16px) translateY(4px) rotate(-6deg) scale(.96); }
            100% { transform: translateX(20px) rotate(4deg) scale(.96); }
        }
        @keyframes bellButtonShock {
            0%, 100% { transform: translateX(0); }
            18% { transform: translateX(-7px); }
            36% { transform: translateX(7px); }
            54% { transform: translateX(-4px); }
            72% { transform: translateX(4px); }
        }
        .bazooka-game-shell {
            display: grid;
            gap: 14px;
        }
        .bazooka-hero {
            padding: 16px;
            border: 3px solid rgba(255,255,255,.9);
            border-radius: 28px;
            background: linear-gradient(135deg, #ecfeff, #fef3c7 70%, #fff);
            box-shadow: 0 12px 0 rgba(120, 53, 15, .10), var(--shadow-soft);
        }
        .bazooka-hero h3 { margin: 4px 0 6px; font-size: clamp(24px, 5vw, 34px); }
        .bazooka-hero p { margin: 0; color: var(--muted); line-height: 1.6; }
        .bazooka-arena {
            position: relative;
            --bazooka-sky-stage-opacity: 1;
            --bazooka-cloud-stage-opacity: 0;
            --bazooka-space-stage-opacity: 0;
            --bazooka-stage-y: 0px;
            --bazooka-stage-brightness: 1;
            --bazooka-stage-saturation: 1;
            --bazooka-light-opacity: .18;
            --bazooka-space-opacity: 0;
            --bazooka-sun-opacity: 0;
            --bazooka-stars-opacity: 0;
            min-height: 380px;
            border: 3px solid rgba(255,255,255,.9);
            border-radius: 30px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02) 58%, rgba(120,53,15,.14)),
                linear-gradient(180deg, #bfdbfe 0 60%, #fef3c7 61% 100%);
            background-position: center bottom;
            background-size: cover;
            box-shadow: inset 0 0 0 2px rgba(37,99,235,.06), 0 14px 0 rgba(15,23,42,.08);
            overflow: hidden;
        }
        .bazooka-bg-layer,
        .bazooka-light-wash {
            position: absolute;
            inset: -8% -12%;
            z-index: 0;
            pointer-events: none;
        }
        .bazooka-bg-layer {
            background-position: 0 50%;
            background-repeat: repeat-x;
            background-size: auto 100%;
            filter: brightness(var(--bazooka-stage-brightness)) saturate(var(--bazooka-stage-saturation));
            transform: translateY(var(--bazooka-stage-y));
            transition: opacity .2s linear, filter .2s linear, transform .2s linear;
            will-change: background-position, opacity, transform;
        }
        .bazooka-bg-sky {
            opacity: var(--bazooka-sky-stage-opacity);
            background-image: url("assets/game/bg-bazooka-seabed-v3.jpg");
            animation: bazookaBgDrift 22s linear infinite;
        }
        .bazooka-bg-clouds {
            opacity: var(--bazooka-cloud-stage-opacity);
            background-image: url("assets/game/bg-bazooka-clouds-v3.jpg");
            animation: bazookaBgDrift 13s linear infinite reverse;
        }
        .bazooka-bg-space {
            opacity: var(--bazooka-space-stage-opacity);
            background-image: url("assets/game/bg-bazooka-space-v3.jpg");
            animation: bazookaBgDrift 18s linear infinite;
        }
        .bazooka-light-wash {
            z-index: 1;
            opacity: var(--bazooka-light-opacity);
            background:
                radial-gradient(circle at 50% 34%, rgba(255,255,255,.52), transparent 22%),
                linear-gradient(180deg, rgba(255,255,255,.18), rgba(59,130,246,.10) 45%, rgba(15,23,42,.14));
            mix-blend-mode: screen;
            transition: opacity .2s linear;
        }
        .bazooka-arena::before,
        .bazooka-arena::after {
            position: absolute;
            inset: 0;
            pointer-events: none;
            content: "";
            transition: opacity .16s linear;
        }
        .bazooka-arena::before {
            z-index: 1;
            opacity: var(--bazooka-stars-opacity);
            background:
                radial-gradient(circle at 82% 18%, rgba(255,255,255,.96) 0 2px, transparent 3px),
                radial-gradient(circle at 22% 24%, rgba(255,255,255,.82) 0 1px, transparent 2px),
                radial-gradient(circle at 56% 36%, rgba(255,255,255,.72) 0 1px, transparent 2px),
                radial-gradient(circle at 38% 68%, rgba(255,255,255,.9) 0 2px, transparent 3px),
                radial-gradient(circle at 76% 72%, rgba(255,255,255,.64) 0 1px, transparent 2px),
                linear-gradient(180deg, #07111f, #111827 54%, #020617);
        }
        .bazooka-arena::after {
            z-index: 1;
            opacity: var(--bazooka-sun-opacity);
            background:
                radial-gradient(circle at 50% 38%, rgba(255,255,255,.98) 0 34px, rgba(254,240,138,.97) 35px 72px, rgba(249,115,22,.78) 73px 120px, transparent 130px),
                radial-gradient(circle at 50% 38%, rgba(250,204,21,.38), transparent 45%),
                linear-gradient(180deg, rgba(15,23,42,.20), rgba(2,6,23,.92));
        }
        .bazooka-arena.is-launching {
            animation: bazookaArenaShake .08s linear infinite alternate;
        }
        .bazooka-flight-label {
            position: absolute;
            left: 50%;
            top: 18px;
            z-index: 3;
            padding: 8px 14px;
            border: 3px solid rgba(255,255,255,.86);
            border-radius: 999px;
            background: rgba(15,23,42,.68);
            color: #fff;
            font-size: 13px;
            font-weight: 1000;
            letter-spacing: .04em;
            opacity: 0;
            transform: translateX(-50%) translateY(-6px);
            transition: opacity .18s ease, transform .18s ease;
            backdrop-filter: blur(10px);
        }
        .bazooka-flight-label.is-visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        .bazooka-meter-board {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 4;
            width: min(42vw, 190px);
            padding: 12px;
            border: 3px solid #fff;
            border-radius: 18px;
            background: rgba(255,255,255,.86);
            box-shadow: 0 8px 0 rgba(37,99,235,.10);
        }
        .bazooka-meter-board span {
            display: block;
            color: var(--muted);
            font-size: 11px;
            font-weight: 900;
        }
        .bazooka-meter-board strong {
            display: block;
            margin-top: 3px;
            color: var(--ink);
            font-size: 28px;
            line-height: 1;
        }
        .bazooka-power {
            height: 12px;
            margin-top: 10px;
            border-radius: 999px;
            background: rgba(148, 163, 184, .25);
            overflow: hidden;
        }
        .bazooka-power-fill {
            height: 100%;
            width: 0%;
            border-radius: inherit;
            background: linear-gradient(90deg, #22c55e, #facc15, #ef4444);
            transition: width .08s linear;
        }
        .bazooka-distance-line {
            position: absolute;
            left: 18px;
            top: 16px;
            bottom: 88px;
            width: 42px;
            border-left: 3px dashed rgba(37, 99, 235, .38);
            z-index: 4;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 1000;
            opacity: 1;
            transition: opacity .18s ease;
        }
        .bazooka-distance-line.is-hidden {
            opacity: 0;
        }
        .bazooka-distance-line span {
            position: absolute;
            left: 8px;
            padding: 2px 6px;
            border-radius: 999px;
            background: rgba(255,255,255,.82);
        }
        .bazooka-distance-line span:nth-child(1) { top: 0; }
        .bazooka-distance-line span:nth-child(2) { top: 34%; }
        .bazooka-distance-line span:nth-child(3) { top: 68%; }
        .bazooka-sand {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 112px;
            z-index: 3;
            background:
                radial-gradient(circle at 20% 35%, rgba(146,64,14,.16) 0 5px, transparent 6px),
                radial-gradient(circle at 62% 45%, rgba(146,64,14,.13) 0 6px, transparent 7px),
                linear-gradient(180deg, #fde68a, #f59e0b);
            border-top: 4px solid rgba(146,64,14,.22);
        }
        .bazooka-chinanago {
            position: absolute;
            left: 50%;
            bottom: 42px;
            z-index: 5;
            width: min(34vw, 150px);
            height: min(34vw, 150px);
            object-fit: contain;
            transform: translateX(-50%) translateX(var(--bazooka-shake-x, 0px)) translateY(calc(var(--bazooka-lift, 0px) + var(--bazooka-flight-nudge-y, 0px))) rotate(var(--bazooka-tilt, 0deg)) scaleX(var(--bazooka-charge-stretch-x, 1)) scaleY(var(--bazooka-charge-stretch-y, 1));
            transform-origin: 50% 92%;
            filter: drop-shadow(0 18px 16px rgba(120, 53, 15, .22));
            transition: transform .16s cubic-bezier(.2,.9,.2,1);
        }
        .bazooka-chinanago.is-charging {
            animation: bazookaWiggle .1s linear infinite alternate;
            filter: drop-shadow(0 18px 16px rgba(120, 53, 15, .22)) drop-shadow(0 0 18px rgba(251, 191, 36, .32));
        }
        .bazooka-chinanago.is-launched {
            transition: transform .65s cubic-bezier(.1, .9, .2, 1.1);
            width: min(34vw, 150px);
            height: min(42vw, 190px);
        }
        .bazooka-chinanago.is-launching {
            transition: transform .045s linear;
            width: min(38vw, 170px);
            height: min(46vw, 210px);
            filter: drop-shadow(0 26px 22px rgba(37, 99, 235, .24));
        }
        .bazooka-burst {
            position: absolute;
            left: 50%;
            bottom: 86px;
            z-index: 4;
            width: 130px;
            height: 42px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,.9), rgba(59,130,246,.22) 55%, transparent 70%);
            opacity: 0;
            transform: translateX(-50%) scale(.5);
        }
        .bazooka-burst.is-visible {
            opacity: 1;
            animation: bazookaBurst .6s ease-out forwards;
        }
        .bazooka-speed-lines {
            position: absolute;
            inset: 0;
            z-index: 2;
            opacity: 0;
            pointer-events: none;
        }
        .bazooka-speed-lines span {
            position: absolute;
            left: 50%;
            width: 7px;
            height: 96px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(59,130,246,.15));
            transform: translateX(-50%) rotate(var(--line-rotate, 0deg));
            animation: bazookaSpeedLine .42s linear infinite;
        }
        .bazooka-speed-lines span:nth-child(1) { top: 8%; margin-left: -120px; --line-rotate: -18deg; animation-delay: 0s; }
        .bazooka-speed-lines span:nth-child(2) { top: 18%; margin-left: 90px; --line-rotate: 14deg; animation-delay: .06s; }
        .bazooka-speed-lines span:nth-child(3) { top: 34%; margin-left: -34px; --line-rotate: 3deg; animation-delay: .12s; }
        .bazooka-speed-lines span:nth-child(4) { top: 46%; margin-left: 136px; --line-rotate: 20deg; animation-delay: .18s; }
        .bazooka-speed-lines span:nth-child(5) { top: 55%; margin-left: -150px; --line-rotate: -22deg; animation-delay: .24s; }
        .bazooka-speed-lines.is-visible { opacity: 1; }
        .bazooka-result-badge {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 4;
            display: grid;
            place-items: center;
            min-width: min(76vw, 330px);
            padding: 18px 20px;
            border: 4px solid #fff;
            border-radius: 28px;
            background: linear-gradient(135deg, #111827, #1d4ed8 52%, #0f766e);
            color: #fff;
            text-align: center;
            box-shadow: 0 18px 0 rgba(15,23,42,.20), 0 28px 60px rgba(15,23,42,.32);
            opacity: 0;
            transform: translate(-50%, -50%) scale(.72) rotate(-2deg);
            pointer-events: none;
        }
        .bazooka-result-badge.is-visible {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) rotate(-1deg);
            animation: bazookaResultPop .72s cubic-bezier(.12, 1.4, .2, 1) both;
        }
        .bazooka-result-badge span {
            font-size: 12px;
            font-weight: 1000;
            letter-spacing: .12em;
            opacity: .88;
        }
        .bazooka-result-badge strong {
            display: block;
            margin-top: 4px;
            font-size: clamp(42px, 12vw, 72px);
            line-height: .95;
        }
        .bazooka-result-badge small {
            display: block;
            margin-top: 6px;
            font-size: 13px;
            font-weight: 900;
            opacity: .9;
        }
        .bazooka-control-panel {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 12px;
            padding: 14px;
            border-radius: 24px;
            background: rgba(255,255,255,.88);
            box-shadow: var(--shadow-soft);
        }
        .bazooka-control-panel strong { display: block; font-size: 18px; }
        .bazooka-control-panel p { margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
        .bazooka-tap-button {
            position: relative;
            display: grid;
            place-items: center;
            width: 132px;
            height: 132px;
            border: 6px solid #0f766e;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%, #ecfeff, #2dd4bf 52%, #0f766e 100%);
            color: #042f2e;
            font-size: 24px;
            font-weight: 1000;
            box-shadow: 0 12px 0 #115e59, 0 18px 30px rgba(15,118,110,.24);
            touch-action: manipulation;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;
            transition: transform .06s ease, box-shadow .06s ease, filter .12s ease;
        }
        .bazooka-tap-button:active,
        .bazooka-tap-button.is-touching {
            transform: translateY(8px) scale(.98);
            box-shadow: 0 4px 0 #115e59, 0 10px 18px rgba(15,118,110,.18);
        }
        .bazooka-tap-button:disabled {
            opacity: .62;
            filter: grayscale(.2);
            cursor: not-allowed;
        }
        .bazooka-tap-button.is-charging {
            animation: bazookaTapBreath .28s ease-in-out infinite alternate;
        }
        .bazooka-actions {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        #screen-pk .bazooka-actions {
            display: none;
        }
        @keyframes bazookaWiggle {
            from {
                transform: translateX(-50%) translateX(calc(var(--bazooka-charge-shake, 3px) * -1)) translateY(calc(var(--bazooka-lift, 0px) + var(--bazooka-flight-nudge-y, 0px))) rotate(calc(var(--bazooka-tilt, 0deg) - 2.5deg)) scaleX(var(--bazooka-charge-stretch-x, 1)) scaleY(var(--bazooka-charge-stretch-y, 1));
            }
            to {
                transform: translateX(-50%) translateX(var(--bazooka-charge-shake, 3px)) translateY(calc(var(--bazooka-lift, 0px) + var(--bazooka-flight-nudge-y, 0px))) rotate(calc(var(--bazooka-tilt, 0deg) + 2.5deg)) scaleX(var(--bazooka-charge-stretch-x, 1)) scaleY(var(--bazooka-charge-stretch-y, 1));
            }
        }
        @keyframes bazookaBurst {
            from { opacity: .9; transform: translateX(-50%) scale(.4); }
            to { opacity: 0; transform: translateX(-50%) scale(1.8); }
        }
        @keyframes bazookaArenaShake {
            from { transform: translateX(-1px) rotate(-.15deg); }
            to { transform: translateX(1px) rotate(.15deg); }
        }
        @keyframes bazookaBgDrift {
            from { background-position-x: 0; }
            to { background-position-x: -1200px; }
        }
        @keyframes bazookaSpeedLine {
            from { opacity: 0; translate: 0 -80px; }
            20% { opacity: .9; }
            to { opacity: 0; translate: 0 260px; }
        }
        @keyframes bazookaResultPop {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-6deg); }
            68% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
            100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
        }
        .whack-game-shell {
            display: grid;
            gap: 14px;
            width: min(100%, 760px);
            margin: 0 auto;
        }
        .whack-hero {
            padding: 16px;
            border: 3px solid rgba(255,255,255,.9);
            border-radius: 28px;
            background: linear-gradient(135deg, #fef3c7, #dbeafe 72%, #fff);
            box-shadow: 0 12px 0 rgba(120, 53, 15, .10), var(--shadow-soft);
        }
        .whack-hero h3 { margin: 4px 0 6px; font-size: clamp(24px, 5vw, 34px); }
        .whack-hero p { margin: 0; color: var(--muted); line-height: 1.6; }
        .whack-score-row {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }
        .whack-score-card {
            padding: 10px;
            border: 2px solid rgba(255,255,255,.9);
            border-radius: 16px;
            background: rgba(255,255,255,.86);
            box-shadow: 0 6px 0 rgba(37,99,235,.08);
            text-align: center;
        }
        .whack-score-card span {
            display: block;
            color: var(--muted);
            font-size: 11px;
            font-weight: 900;
        }
        .whack-score-card strong {
            display: block;
            margin-top: 2px;
            color: var(--ink);
            font-size: 22px;
            line-height: 1.1;
        }
        .whack-score-card.is-hot {
            border-color: rgba(250,204,21,.9);
            background: linear-gradient(135deg, #fff7ed, #fef3c7);
            animation: whackScoreHot .36s ease-in-out infinite alternate;
        }
        .whack-board {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-template-rows: repeat(3, minmax(0, 1fr));
            gap: clamp(10px, 2.2vw, 18px);
            width: min(100%, 680px);
            max-width: 680px;
            padding: clamp(14px, 3vw, 24px);
            aspect-ratio: 4 / 5;
            margin: 0 auto;
            border: 3px solid rgba(255,255,255,.9);
            border-radius: 30px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(120,53,15,.08)),
                url("assets/game/bg-whack.png"),
                linear-gradient(180deg, #bae6fd 0 32%, #fde68a 33% 100%);
            background-position: center;
            background-size: cover;
            box-shadow: inset 0 0 0 2px rgba(37,99,235,.06), 0 14px 0 rgba(15,23,42,.08);
        }
        .whack-hole {
            position: relative;
            min-height: 0;
            border: 0;
            border-radius: 24px;
            background: transparent;
            overflow: hidden;
            touch-action: manipulation;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;
            transition: transform .08s ease, filter .12s ease;
        }
        .whack-hole:active,
        .whack-hole.is-tapped {
            transform: scale(.95);
            filter: brightness(1.05);
        }
        .whack-hole::after {
            position: absolute;
            right: 11%;
            bottom: 4%;
            left: 11%;
            height: 23%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(40,20,8,.20) 0 34%, rgba(120,53,15,.12) 58%, transparent 72%);
            box-shadow: none;
            content: "";
        }
        .whack-target {
            position: absolute;
            left: 50%;
            bottom: 10%;
            z-index: 1;
            width: min(30vw, 150px);
            height: min(30vw, 150px);
            object-fit: contain;
            transform: translate(-50%, 120%) scale(.78);
            filter: drop-shadow(0 10px 10px rgba(120,53,15,.22));
            opacity: 0;
            transition: transform .12s ease-out, opacity .12s ease-out;
            pointer-events: none;
        }
        .whack-hole.is-active .whack-target {
            transform: translate(-50%, 0) scale(1);
            opacity: 1;
        }
        .whack-hole.is-bad .whack-target {
            filter: drop-shadow(0 10px 10px rgba(15,23,42,.28)) saturate(.9);
        }
        .whack-hole.is-hit {
            animation: whackPop .18s ease-out;
        }
        .whack-hole .whack-target.whack-hit-eel {
            z-index: 2;
            opacity: 1;
            transition: none;
            transform-origin: 50% 100%;
            animation: whackEelBonk .28s ease-in both;
        }
        @keyframes whackEelBonk {
            0% { transform: translate(-50%, 0) scale(1); opacity: 1; }
            24% { transform: translate(-50%, 2%) scale(1.18, .62); opacity: 1; }
            45% { transform: translate(-50%, 7%) scale(.92, .86); opacity: 1; }
            82% { transform: translate(-50%, 90%) scale(.8, .25); opacity: .8; }
            100% { transform: translate(-50%, 125%) scale(.7, .12); opacity: 0; }
        }
        .whack-control-panel {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 12px;
            padding: 14px;
            border-radius: 24px;
            background: rgba(255,255,255,.88);
            box-shadow: var(--shadow-soft);
        }
        .whack-control-panel strong { display: block; font-size: 18px; }
        .whack-control-panel p { margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
        .whack-actions {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        @keyframes whackPop {
            from { transform: scale(.96); }
            50% { transform: scale(1.04); }
            to { transform: scale(1); }
        }
        .stadium-game-shell {
            display: grid;
            gap: 14px;
        }
        .stadium-hero {
            padding: 16px;
            border: 3px solid rgba(255,255,255,.9);
            border-radius: 28px;
            background: linear-gradient(135deg, #ecfeff, #fef3c7 72%, #fff);
            box-shadow: 0 12px 0 rgba(120, 53, 15, .10), var(--shadow-soft);
        }
        .stadium-hero h3 { margin: 4px 0 6px; font-size: clamp(24px, 5vw, 34px); }
        .stadium-hero p { margin: 0; color: var(--muted); line-height: 1.6; }
        .stadium-arena {
            position: relative;
            min-height: 360px;
            border: 3px solid rgba(255,255,255,.9);
            border-radius: 30px;
            background:
                radial-gradient(circle at 84% 16%, rgba(255,255,255,.95) 0 20px, transparent 22px),
                linear-gradient(180deg, #93c5fd 0 56%, #86efac 57% 100%);
            background-position: center;
            background-size: cover;
            box-shadow: inset 0 0 0 2px rgba(37,99,235,.06), 0 14px 0 rgba(15,23,42,.08);
            overflow: hidden;
        }
        #screen-homerun .stadium-arena {
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.05) 50%, rgba(15,23,42,.12)),
                url("assets/game/bg-homerun-bat.png"),
                linear-gradient(180deg, #93c5fd 0 56%, #86efac 57% 100%);
            background-position: center bottom;
            background-size: cover;
        }
        .homerun-arena-v2 {
            min-height: 430px;
            isolation: isolate;
            --homerun-ball-x: 50%;
            --homerun-ball-y: 57%;
            --homerun-ball-scale: 1;
            --homerun-ball-opacity: 1;
            --homerun-trail-opacity: 0;
            --homerun-trail-width: 0px;
            --homerun-trail-rotate: -12deg;
            --homerun-camera-pos: center center;
            --homerun-camera-x: 50%;
            --homerun-camera-y: 50%;
            --homerun-camera-size: cover;
            --homerun-pan-x: 0px;
            --homerun-pan-y: 0px;
            --homerun-speed-x: 0px;
            --homerun-speed-y: 0px;
            --homerun-speed-opacity: 0;
            --homerun-speed-angle: -12deg;
            --homerun-field-angle: 72deg;
        }
        #screen-homerun .homerun-arena-v2.is-flight {
            background:
                linear-gradient(180deg, rgba(15,23,42,.10), rgba(15,23,42,.04)),
                #1f7a39;
        }
        #screen-homerun .homerun-arena-v2.is-flight::before {
            position: absolute;
            inset: -24%;
            z-index: 0;
            background:
                repeating-linear-gradient(var(--homerun-speed-angle), transparent 0 22px, rgba(255,255,255,.24) 23px 27px, transparent 28px 44px),
                repeating-linear-gradient(var(--homerun-field-angle), rgba(34,197,94,.10) 0 18px, transparent 18px 48px);
            content: "";
            opacity: var(--homerun-speed-opacity);
            pointer-events: none;
            transform: translate(var(--homerun-speed-x), var(--homerun-speed-y));
            transition: opacity .08s linear, transform .04s linear;
            mix-blend-mode: screen;
        }
        .homerun-arena-v2 .stadium-pitcher,
        .homerun-arena-v2 .stadium-batter,
        .homerun-arena-v2 .homerun-zone,
        .homerun-arena-v2 .stadium-ground {
            display: none;
        }
        .homerun-view {
            position: absolute;
            inset: 0;
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            transition: opacity .22s ease;
        }
        .homerun-arena-v2.is-batting .homerun-batting-view,
        .homerun-arena-v2.is-pitching .homerun-batting-view,
        .homerun-arena-v2.is-swing .homerun-batting-view,
        .homerun-arena-v2.is-flight .homerun-flight-view,
        .homerun-arena-v2.is-result .homerun-flight-view {
            opacity: 1;
        }
        .homerun-scoreboard {
            position: absolute;
            left: 16px;
            top: 14px;
            z-index: 8;
            display: grid;
            gap: 4px;
            min-width: 154px;
            padding: 12px 14px;
            border: 3px solid #7c2d12;
            border-radius: 6px 14px 10px 7px;
            background: linear-gradient(135deg, #fde68a, #facc15);
            color: #431407;
            font-weight: 1000;
            box-shadow: 6px 7px 0 rgba(67,20,7,.18);
            transform: rotate(-1.4deg);
        }
        .homerun-scoreboard span {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            border-bottom: 2px dashed rgba(67,20,7,.42);
            font-size: 14px;
        }
        .homerun-scoreboard span:last-child { border-bottom: 0; }
        .homerun-scoreboard b { font-size: 22px; line-height: 1; }
        .homerun-pitcher {
            position: absolute;
            left: 50%;
            top: 30%;
            z-index: 2;
            width: min(17vw, 92px);
            height: min(17vw, 92px);
            object-fit: contain;
            transform: translate(-50%, -50%) scale(.62);
            filter: drop-shadow(0 9px 8px rgba(15,23,42,.20));
            opacity: .94;
        }
        .homerun-arena-v2.is-pitching .homerun-pitcher {
            animation: homerunPitcherThrow .62s ease-in-out;
        }
        .homerun-batter {
            position: absolute;
            left: 23%;
            bottom: -16px;
            z-index: 4;
            width: min(37vw, 210px);
            height: min(37vw, 210px);
            object-fit: contain;
            transform-origin: 54% 82%;
            filter: drop-shadow(0 18px 16px rgba(15,23,42,.22));
        }
        .homerun-arena-v2.is-swing .homerun-batter {
            animation: homerunBatterSwing .34s cubic-bezier(.15,1.3,.25,1);
        }
        .homerun-swing-zone {
            position: absolute;
            left: 50%;
            top: 57%;
            z-index: 3;
            width: min(30vw, 172px);
            height: 26px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(239,68,68,.14), rgba(34,197,94,.48) 36% 64%, rgba(239,68,68,.14));
            transform: translate(-50%, -50%);
            box-shadow: inset 0 0 0 3px rgba(255,255,255,.60), 0 8px 18px rgba(15,23,42,.08);
            opacity: .88;
        }
        .homerun-swing-zone::after {
            position: absolute;
            left: 50%;
            top: -8px;
            width: 28px;
            height: 42px;
            border-radius: 999px;
            background: rgba(250,204,21,.78);
            transform: translateX(-50%);
            content: "";
        }
        .homerun-ball-v2 {
            position: absolute;
            left: var(--homerun-ball-x);
            top: var(--homerun-ball-y);
            z-index: 14;
            display: grid;
            place-items: center;
            width: 50px;
            height: 50px;
            opacity: var(--homerun-ball-opacity);
            border: 4px solid #1f2937;
            border-radius: 50%;
            background:
                radial-gradient(circle at 32% 28%, #fff 0 18%, transparent 19%),
                radial-gradient(circle at 50% 50%, transparent 0 40%, rgba(220,38,38,.98) 41% 46%, transparent 47%),
                radial-gradient(circle at 50% 50%, #fff 0 58%, #f1f5f9 76%, #cbd5e1 100%);
            transform: translate(-50%, -50%) scale(var(--homerun-ball-scale)) rotate(var(--homerun-ball-rotate, 0deg));
            transition: opacity .08s ease;
            box-shadow:
                0 12px 18px rgba(15,23,42,.42),
                0 0 0 4px rgba(255,255,255,.90),
                0 0 26px rgba(250,204,21,.56);
            pointer-events: none;
        }
        .homerun-ball-trail {
            position: absolute;
            left: var(--homerun-ball-x);
            top: var(--homerun-ball-y);
            z-index: 13;
            width: var(--homerun-trail-width);
            height: 12px;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, rgba(250,204,21,.46), rgba(255,255,255,.98));
            box-shadow: 0 0 18px rgba(250,204,21,.28);
            opacity: var(--homerun-trail-opacity);
            transform: translate(-100%, -50%) rotate(var(--homerun-trail-rotate));
            transform-origin: right center;
            pointer-events: none;
        }
        .homerun-flight-view {
            background: transparent;
        }
        #screen-homerun .homerun-arena-v2.is-flight .homerun-flight-view,
        #screen-homerun .homerun-arena-v2.is-result .homerun-flight-view {
            background:
                radial-gradient(circle at 50% 42%, rgba(255,255,255,.10), transparent 42%),
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(15,23,42,.08)),
                url("assets/game/bg-homerun-overhead.png"),
                linear-gradient(180deg, #7dd3fc, #22c55e 48%, #facc15);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-color: #237a3e;
        }
        .homerun-shadow {
            position: absolute;
            left: var(--homerun-shadow-x, 50%);
            top: var(--homerun-shadow-y, 72%);
            z-index: 2;
            width: var(--homerun-shadow-size, 18px);
            height: calc(var(--homerun-shadow-size, 18px) * .42);
            border-radius: 50%;
            background: rgba(15,23,42,.24);
            filter: blur(2px);
            opacity: var(--homerun-shadow-opacity, 0);
            transform: translate(-50%, -50%);
        }
        .homerun-landing-mark {
            position: absolute;
            left: var(--homerun-landing-x, 50%);
            top: var(--homerun-landing-y, 72%);
            z-index: 3;
            width: 56px;
            height: 56px;
            border: 4px solid rgba(255,255,255,.84);
            border-radius: 50%;
            opacity: 0;
            transform: translate(-50%, -50%) scale(.55);
            pointer-events: none;
        }
        .homerun-landing-mark.is-visible {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            transition: opacity .16s ease, transform .26s cubic-bezier(.2,1.5,.2,1);
            animation: homerunLandingPulse .64s ease-out infinite alternate;
        }
        .homerun-result-word {
            position: absolute;
            left: 50%;
            top: 48%;
            z-index: 12;
            min-width: min(76vw, 360px);
            color: #fff;
            font-size: clamp(42px, 12vw, 82px);
            font-weight: 1000;
            line-height: .95;
            text-align: center;
            text-shadow:
                0 5px 0 #ea580c,
                0 -3px 0 #ea580c,
                4px 0 0 #ea580c,
                -4px 0 0 #ea580c,
                0 12px 22px rgba(67,20,7,.26);
            opacity: 0;
            transform: translate(-50%, -50%) scale(.72) rotate(-2deg);
            pointer-events: none;
        }
        .homerun-result-word.is-visible {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) rotate(-2deg);
            transition: opacity .16s ease, transform .22s cubic-bezier(.18,1.55,.26,1);
        }
        .homerun-result-word.foul { text-shadow: 0 5px 0 #475569, 0 -3px 0 #475569, 4px 0 0 #475569, -4px 0 0 #475569, 0 12px 22px rgba(15,23,42,.28); }
        .homerun-result-word.hr { text-shadow: 0 5px 0 #dc2626, 0 -3px 0 #dc2626, 4px 0 0 #dc2626, -4px 0 0 #dc2626, 0 0 24px rgba(250,204,21,.62); }
        .homerun-result-word.miss { font-size: clamp(34px, 10vw, 64px); text-shadow: 0 5px 0 #64748b, 0 -3px 0 #64748b, 4px 0 0 #64748b, -4px 0 0 #64748b; }
        @keyframes homerunPitcherThrow {
            0% { transform: translate(-50%, -50%) scale(.62) rotate(0); }
            45% { transform: translate(-50%, -50%) scale(.68) rotate(-12deg); }
            100% { transform: translate(-50%, -50%) scale(.62) rotate(8deg); }
        }
        @keyframes homerunBatterSwing {
            0% { transform: rotate(0) scale(1); }
            45% { transform: rotate(-7deg) scale(1.06); }
            100% { transform: rotate(2deg) scale(1); }
        }
        @keyframes homerunLandingPulse {
            from { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
            to { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
        }
        #screen-pk .stadium-arena {
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.06) 45%, rgba(15,23,42,.14)),
                url("assets/game/bg-pk.png"),
                linear-gradient(180deg, #93c5fd 0 56%, #86efac 57% 100%);
            background-position: center;
            background-size: cover;
        }
        .stadium-ground {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 116px;
            background:
                radial-gradient(ellipse at 52% 0%, #fef3c7 0 34%, transparent 35%),
                linear-gradient(180deg, #22c55e, #15803d);
        }
        .stadium-character {
            position: absolute;
            z-index: 2;
            width: min(28vw, 136px);
            height: min(28vw, 136px);
            object-fit: contain;
            filter: drop-shadow(0 16px 16px rgba(15,23,42,.18));
        }
        .stadium-pitcher { left: 8%; bottom: 78px; }
        .stadium-batter { right: 8%; bottom: 70px; }
        .stadium-ball {
            position: absolute;
            z-index: 3;
            left: var(--ball-x, 22%);
            top: var(--ball-y, 48%);
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border: 3px solid #fff;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%, #fff, #f8fafc 52%, #cbd5e1);
            box-shadow: 0 8px 16px rgba(15,23,42,.24);
            transition: left .04s linear, top .04s linear, transform .04s linear;
        }
        .stadium-ball.is-hit {
            transition: left 1.2s cubic-bezier(.05,.9,.15,1), top 1.2s cubic-bezier(.05,.9,.15,1), transform 1.2s ease;
            transform: scale(.55) rotate(720deg);
        }
        .homerun-zone {
            position: absolute;
            left: 50%;
            bottom: 128px;
            z-index: 1;
            width: min(56vw, 300px);
            height: 22px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(239,68,68,.18), rgba(34,197,94,.36) 32% 68%, rgba(239,68,68,.18));
            transform: translateX(-50%);
            box-shadow: inset 0 0 0 3px rgba(255,255,255,.56);
        }
        .homerun-zone::after {
            position: absolute;
            left: 50%;
            top: -8px;
            width: 28px;
            height: 38px;
            border-radius: 999px;
            background: rgba(250,204,21,.72);
            transform: translateX(-50%);
            content: "";
        }
        .stadium-result-badge {
            position: absolute;
            left: 50%;
            top: 18px;
            z-index: 5;
            min-width: min(76vw, 320px);
            padding: 14px 18px;
            border: 4px solid #fff;
            border-radius: 24px;
            background: linear-gradient(135deg, #111827, #1d4ed8 54%, #0f766e);
            color: #fff;
            text-align: center;
            opacity: 0;
            transform: translateX(-50%) translateY(-10px) scale(.86);
            box-shadow: 0 14px 0 rgba(15,23,42,.18), 0 26px 54px rgba(15,23,42,.30);
            pointer-events: none;
        }
        .stadium-result-badge.is-visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
            transition: opacity .22s ease, transform .22s ease;
        }
        .stadium-result-badge strong {
            display: block;
            font-size: clamp(28px, 9vw, 52px);
            line-height: 1;
        }
        .stadium-panel {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 12px;
            align-items: center;
            padding: 14px;
            border-radius: 24px;
            background: rgba(255,255,255,.88);
            box-shadow: var(--shadow-soft);
        }
        .stadium-panel strong { display: block; font-size: 18px; }
        .stadium-panel p { margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
        .stadium-main-button {
            min-width: 116px;
            min-height: 74px;
            border-radius: 22px;
            font-size: 20px;
            font-weight: 1000;
            touch-action: manipulation;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .stadium-main-button:disabled,
        .pk-choice-btn:disabled {
            opacity: .55;
            cursor: default;
            transform: none;
            filter: grayscale(.18);
        }
        .pk-goal {
            position: absolute;
            left: 50%;
            top: 48px;
            z-index: 1;
            display: none;
            grid-template-columns: repeat(3, 1fr);
            width: min(82vw, 520px);
            height: 172px;
            border: 7px solid #fff;
            border-bottom-width: 10px;
            border-radius: 18px 18px 8px 8px;
            background:
                linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255,255,255,.22) 1px, transparent 1px),
                rgba(15,23,42,.16);
            background-size: 34px 34px;
            transform: translateX(-50%);
            box-shadow: 0 12px 24px rgba(15,23,42,.16);
        }
        .pk-lane {
            display: block;
            border-left: 2px solid rgba(255,255,255,.28);
            color: transparent;
            font-size: 0;
            pointer-events: none;
        }
        .pk-lane:first-child { border-left: 0; }
        .pk-lane.is-target {
            background: transparent;
            animation: none;
        }
        .pk-loading {
            position: absolute;
            inset: 0;
            z-index: 20;
            display: grid;
            place-items: center;
            align-content: center;
            gap: 8px;
            border-radius: 26px;
            background: rgba(15,23,42,.72);
            color: #fff;
            text-align: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .18s ease;
            backdrop-filter: blur(8px);
        }
        .pk-loading strong {
            font-size: clamp(26px, 8vw, 46px);
            letter-spacing: .12em;
        }
        .pk-loading span { font-weight: 900; color: rgba(255,255,255,.82); }
        .pk-loading.is-visible { opacity: 1; }
        .pk-cinematic-label {
            position: absolute;
            left: 18px;
            top: 18px;
            z-index: 6;
            padding: 7px 12px;
            border: 2px solid rgba(255,255,255,.72);
            border-radius: 999px;
            background: rgba(15,23,42,.58);
            color: #fff;
            font-size: 11px;
            font-weight: 1000;
            letter-spacing: .12em;
            opacity: .86;
            backdrop-filter: blur(10px);
        }
        .pk-impact-badge {
            position: absolute;
            left: 50%;
            top: 45%;
            z-index: 12;
            padding: 12px 18px;
            border: 4px solid #fff;
            border-radius: 999px;
            background: linear-gradient(135deg, #111827, #2563eb);
            color: #fff;
            font-size: clamp(22px, 7vw, 42px);
            font-weight: 1000;
            text-shadow: 0 2px 0 rgba(0,0,0,.18);
            opacity: 0;
            transform: translate(-50%, -50%) scale(.72) rotate(-3deg);
            pointer-events: none;
            box-shadow: 0 16px 0 rgba(15,23,42,.16), 0 26px 44px rgba(15,23,42,.26);
        }
        .pk-impact-badge.is-visible {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) rotate(-3deg);
            transition: opacity .12s ease, transform .18s cubic-bezier(.2,1.5,.3,1);
        }
        .pk-keeper {
            left: 50%;
            bottom: 56px;
            z-index: 5;
            width: 132px;
            height: 156px;
            object-position: center bottom;
            opacity: 0;
            pointer-events: none;
            transform: translateX(-50%) scaleY(1);
            transform-origin: 50% 100%;
            transition: opacity .12s ease, left .16s ease, right .16s ease, bottom .16s ease, width .18s ease, height .18s ease, transform .18s cubic-bezier(.2,1.2,.25,1);
        }
        .pk-keeper.is-stretch-left,
        .pk-keeper.is-stretch-right {
            width: min(58vw, 420px);
            height: min(36vw, 260px);
            bottom: 92px;
            animation: pkKeeperNyu .26s cubic-bezier(.1,1.45,.25,1);
        }
        .pk-keeper.is-stretch-left {
            left: 8%;
            right: auto;
            transform: translateX(0);
            transform-origin: 84% 86%;
        }
        .pk-keeper.is-stretch-right {
            right: 8%;
            left: auto;
            transform: translateX(0);
            transform-origin: 16% 86%;
        }
        .pk-keeper.is-stretch-center {
            left: 50%;
            right: auto;
            width: min(42vw, 300px);
            height: min(74vw, 430px);
            bottom: 36px;
            transform: translateX(-50%);
            animation: pkKeeperNyu .26s cubic-bezier(.1,1.45,.25,1);
        }
        .pk-keeper.is-save {
            filter: drop-shadow(0 16px 16px rgba(15,23,42,.18)) drop-shadow(0 0 18px rgba(34,197,94,.55));
        }
        .pk-keeper.is-miss {
            filter: drop-shadow(0 16px 16px rgba(15,23,42,.18)) saturate(.75);
        }
        .pk-kicker {
            right: 5%;
            bottom: 58px;
            z-index: 3;
            width: min(28vw, 136px);
            height: min(28vw, 136px);
            opacity: 0;
            pointer-events: none;
            transform-origin: 70% 88%;
            transition: opacity .12s ease, transform .18s ease, width .18s ease, height .18s ease, right .18s ease;
        }
        .pk-keeper.is-visible,
        .pk-kicker.is-visible {
            opacity: 1;
        }
        .pk-kicker.is-ready {
            animation: pkKickerReady .64s ease-in-out infinite alternate;
        }
        .pk-kicker.is-kicking,
        .pk-kicker.is-after-kick {
            left: 66%;
            right: auto;
            bottom: 48px;
            width: min(40vw, 230px);
            height: min(38vw, 220px);
            animation: pkKickFollow .42s cubic-bezier(.15,1.35,.25,1);
        }
        .pk-kick-dust {
            position: absolute;
            right: 21%;
            bottom: 94px;
            z-index: 2;
            width: 80px;
            height: 32px;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(255,255,255,.78), rgba(250,204,21,.36) 42%, transparent 70%);
            opacity: 0;
            transform: scale(.5);
            pointer-events: none;
        }
        .pk-kick-dust.is-visible {
            animation: pkDust .42s ease-out;
        }
        .pk-ball {
            position: absolute;
            z-index: 4;
            left: var(--pk-ball-x, 74%);
            top: var(--pk-ball-y, 68%);
            width: 28px;
            height: 28px;
            border: 3px solid #fff;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%, #fff, #e5e7eb 58%, #94a3b8);
            box-shadow: 0 8px 16px rgba(15,23,42,.25), 0 0 0 rgba(255,255,255,0);
            opacity: var(--pk-ball-opacity, 1);
            transform: translate(-50%, -50%) scale(var(--pk-ball-scale, 1)) rotate(var(--pk-ball-rotate, 0deg));
            transition: opacity .14s ease;
        }
        .pk-ball.is-flight {
            box-shadow: 0 8px 16px rgba(15,23,42,.25), 0 0 24px rgba(255,255,255,.65);
        }
        .pk-ball.is-saved {
            animation: pkBallSaved .34s ease-out forwards;
        }
        .pk-ball.is-goal {
            animation: pkBallGoal .34s ease-out forwards;
        }
        .pk-ball-trail {
            position: absolute;
            left: var(--pk-trail-x, 74%);
            top: var(--pk-trail-y, 68%);
            z-index: 3;
            width: var(--pk-trail-width, 0px);
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.86));
            opacity: var(--pk-trail-opacity, 0);
            transform: translate(-100%, -50%) rotate(var(--pk-trail-rotate, -18deg));
            transform-origin: right center;
            pointer-events: none;
            filter: blur(.2px);
        }
        #pkArena.is-shot {
            animation: pkArenaTension .18s ease-in-out 2;
        }
        #pkArena.is-save .pk-goal {
            box-shadow: 0 12px 24px rgba(15,23,42,.16), 0 0 32px rgba(34,197,94,.36);
        }
        #pkArena.is-goal .pk-goal {
            animation: pkGoalShake .32s ease-in-out;
            box-shadow: 0 12px 24px rgba(15,23,42,.16), 0 0 34px rgba(239,68,68,.38);
        }
        .pk-buttons {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-top: 10px;
        }
        body[data-screen="pk"][data-pk-phase="idle"] #screen-pk .pk-buttons,
        body[data-screen="pk"][data-pk-phase="loading"] #screen-pk .pk-buttons,
        body[data-screen="pk"][data-pk-phase="done"] #screen-pk .pk-buttons {
            display: none;
        }
        body[data-screen="pk"][data-pk-phase="waiting"] #screen-pk .pk-buttons,
        body[data-screen="pk"][data-pk-phase="result-shot"] #screen-pk .pk-buttons {
            opacity: .48;
            pointer-events: none;
        }
        .pk-choice-btn {
            min-height: 54px;
            border-radius: 16px;
            font-size: 15px;
            font-weight: 1000;
            touch-action: manipulation;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;
            transition: transform .08s ease, box-shadow .08s ease, background .12s ease, color .12s ease;
        }
        .pk-choice-btn:active,
        .pk-choice-btn.is-touching {
            transform: translateY(4px) scale(.98);
        }
        .pk-choice-btn:disabled {
            opacity: .54;
            cursor: not-allowed;
        }
        .pk-rounds {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .pk-round-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #e5e7eb;
            box-shadow: inset 0 0 0 2px rgba(255,255,255,.8);
        }
        .pk-round-dot.save { background: #22c55e; }
        .pk-round-dot.goal { background: #ef4444; }
        @keyframes pkLaneFlash {
            from { opacity: .55; }
            to { opacity: 1; }
        }
        @keyframes pkKickerReady {
            from { transform: translateX(0) rotate(-1deg); }
            to { transform: translateX(-10px) rotate(2deg); }
        }
        @keyframes pkKickFollow {
            0% { transform: translateX(8px) rotate(-4deg) scale(.94); }
            48% { transform: translateX(-8px) rotate(5deg) scale(1.04); }
            100% { transform: translateX(0) rotate(0) scale(1); }
        }
        @keyframes pkKeeperNyu {
            0% { transform: translateX(-50%) scaleY(.52); opacity: .72; }
            70% { transform: translateX(-50%) scaleY(1.08); opacity: 1; }
            100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
        }
        @keyframes pkDust {
            0% { opacity: 0; transform: scale(.35) translateX(0); }
            30% { opacity: .9; }
            100% { opacity: 0; transform: scale(1.65) translateX(-24px); }
        }
        @keyframes pkArenaTension {
            from { transform: translateX(0); }
            50% { transform: translateX(-2px); }
            to { transform: translateX(2px); }
        }
        @keyframes pkGoalShake {
            0%, 100% { transform: translateX(-50%); }
            25% { transform: translateX(calc(-50% - 5px)); }
            75% { transform: translateX(calc(-50% + 5px)); }
        }
        @keyframes pkBallSaved {
            to { opacity: .25; transform: translate(-50%, -50%) scale(.62) rotate(160deg); }
        }
        @keyframes pkBallGoal {
            to { opacity: .15; transform: translate(-50%, -50%) scale(.44) rotate(220deg); }
        }
        .billiards-game-shell {
            display: grid;
            gap: 14px;
        }
        .billiards-hero {
            padding: 16px;
            border: 3px solid rgba(255,255,255,.9);
            border-radius: 28px;
            background: linear-gradient(135deg, #ecfdf5, #eff6ff 72%, #fff);
            box-shadow: 0 12px 0 rgba(15,118,110,.10), var(--shadow-soft);
        }
        .billiards-hero h3 { margin: 4px 0 6px; font-size: clamp(24px, 5vw, 34px); }
        .billiards-hero p { margin: 0; color: var(--muted); line-height: 1.6; }
        .billiards-table {
            position: relative;
            min-height: 520px;
            border: 16px solid #7c2d12;
            border-radius: 34px;
            background:
                radial-gradient(circle at 50% 38%, rgba(255,255,255,.16), transparent 34%),
                linear-gradient(135deg, rgba(255,255,255,.08), transparent 35%),
                #10b981;
            box-shadow:
                inset 0 0 0 8px rgba(20,83,45,.38),
                inset 0 0 70px rgba(6,78,59,.36),
                0 16px 0 rgba(120,53,15,.22),
                var(--shadow-soft);
            overflow: hidden;
            touch-action: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .billiards-table::before {
            position: absolute;
            inset: 12px;
            border: 2px dashed rgba(255,255,255,.20);
            border-radius: 20px;
            content: "";
            pointer-events: none;
        }
        .billiards-hud {
            position: absolute;
            top: 12px;
            left: 50%;
            z-index: 8;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
            transform: translateX(-50%);
            pointer-events: none;
        }
        .billiards-hud span {
            padding: 6px 10px;
            border: 2px solid rgba(255,255,255,.74);
            border-radius: 999px;
            background: rgba(15,23,42,.48);
            color: #fff;
            font-size: 12px;
            font-weight: 1000;
            backdrop-filter: blur(8px);
        }
        .billiards-pocket {
            position: absolute;
            z-index: 3;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: radial-gradient(circle, #020617 0 52%, #111827 53% 72%, rgba(255,255,255,.18) 73% 100%);
            box-shadow: inset 0 8px 14px rgba(0,0,0,.72), 0 0 0 5px rgba(120,53,15,.24);
        }
        .billiards-pocket.p1 { left: -15px; top: -15px; }
        .billiards-pocket.p2 { left: 50%; top: -20px; transform: translateX(-50%); }
        .billiards-pocket.p3 { right: -15px; top: -15px; }
        .billiards-pocket.p4 { left: -15px; bottom: -15px; }
        .billiards-pocket.p5 { left: 50%; bottom: -20px; transform: translateX(-50%); }
        .billiards-pocket.p6 { right: -15px; bottom: -15px; }
        .billiards-balls {
            position: absolute;
            inset: 0;
            z-index: 5;
        }
        .billiards-ball {
            position: absolute;
            display: grid;
            place-items: center;
            width: var(--ball-size, 30px);
            height: var(--ball-size, 30px);
            border: 0;
            border-radius: 50%;
            background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0 18%, var(--ball-color, #f59e0b) 19% 100%);
            color: rgba(15,23,42,.72);
            font-size: 11px;
            font-weight: 1000;
            box-shadow: inset -5px -7px 9px rgba(0,0,0,.20), 0 6px 8px rgba(15,23,42,.24);
            transform: translate(-50%, -50%);
            transition: opacity .18s ease, transform .05s linear;
            pointer-events: none;
        }
        .billiards-ball.cue {
            --ball-color: #f8fafc;
            color: #1d4ed8;
            box-shadow: inset -5px -7px 9px rgba(15,23,42,.14), 0 6px 8px rgba(15,23,42,.24), 0 0 0 3px rgba(59,130,246,.18);
        }
        .billiards-ball.is-pocketed {
            opacity: 0;
            transform: translate(-50%, -50%) scale(.34);
        }
        .billiards-aim-line {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 4;
            width: var(--aim-length, 0px);
            height: 6px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(250,204,21,.72), transparent);
            box-shadow: 0 0 16px rgba(250,204,21,.45);
            opacity: 0;
            transform-origin: left center;
            transform: translate(var(--aim-x, 0px), var(--aim-y, 0px)) rotate(var(--aim-angle, 0deg));
            pointer-events: none;
        }
        .billiards-aim-line.is-visible { opacity: 1; }
        .billiards-strike-burst,
        .billiards-strike-flash,
        .billiards-strike-text {
            position: absolute;
            left: var(--strike-x, 50%);
            top: var(--strike-y, 50%);
            pointer-events: none;
            opacity: 0;
        }
        .billiards-strike-burst {
            z-index: 8;
            width: 112px;
            height: 112px;
            border: 5px solid rgba(255,255,255,.92);
            border-radius: 50%;
            box-shadow:
                0 0 0 12px rgba(250,204,21,.32),
                0 0 34px rgba(250,204,21,.70),
                inset 0 0 22px rgba(255,255,255,.70);
            transform: translate(-50%, -50%) scale(.28);
        }
        .billiards-strike-flash {
            z-index: 7;
            width: min(46vw, 260px);
            height: 28px;
            border-radius: 999px;
            background:
                repeating-linear-gradient(90deg, rgba(255,255,255,.96) 0 14px, rgba(250,204,21,.72) 14px 28px, transparent 28px 42px),
                linear-gradient(90deg, rgba(255,255,255,.96), rgba(250,204,21,.70), transparent);
            filter: drop-shadow(0 0 18px rgba(250,204,21,.80));
            transform: translate(-12%, -50%) rotate(var(--strike-angle, 0deg)) scaleX(.2);
            transform-origin: left center;
        }
        .billiards-strike-text {
            z-index: 10;
            padding: 6px 12px;
            border: 3px solid #fff;
            border-radius: 999px;
            background: linear-gradient(135deg, #f97316, #facc15);
            color: #fff;
            font-size: 18px;
            font-weight: 1000;
            text-shadow: 0 2px 0 rgba(124,45,18,.42);
            box-shadow: 0 8px 0 rgba(124,45,18,.20), 0 16px 26px rgba(15,23,42,.18);
            transform: translate(-50%, -110%) rotate(-8deg) scale(.5);
        }
        .billiards-table.is-striking .billiards-strike-burst {
            animation: billiardsBurst .42s cubic-bezier(.08,1.2,.2,1) both;
        }
        .billiards-table.is-striking .billiards-strike-flash {
            animation: billiardsFlash .34s cubic-bezier(.08,1,.2,1) both;
        }
        .billiards-table.is-striking .billiards-strike-text {
            animation: billiardsTextPop .48s cubic-bezier(.1,1.55,.22,1) both;
        }
        .billiards-cue-chinanago {
            position: absolute;
            left: var(--cue-x, 50%);
            top: var(--cue-y, 86%);
            z-index: 6;
            width: 92px;
            height: 92px;
            object-fit: contain;
            object-position: center bottom;
            filter: drop-shadow(0 10px 10px rgba(15,23,42,.24));
            transform: translate(-50%, -50%) rotate(var(--cue-angle, 0deg)) scaleY(var(--cue-stretch, 1));
            transform-origin: 50% 86%;
            opacity: var(--cue-opacity, .96);
            transition: transform .10s cubic-bezier(.2,1.25,.3,1), left .07s linear, top .07s linear, opacity .16s ease;
            pointer-events: none;
        }
        .billiards-cue-chinanago.is-strike {
            animation: billiardsCueStrike .34s cubic-bezier(.12,1.7,.22,1);
        }
        .billiards-result-badge {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 12;
            min-width: min(76vw, 320px);
            padding: 18px 20px;
            border: 4px solid #fff;
            border-radius: 28px;
            background: linear-gradient(135deg, #064e3b, #1d4ed8);
            color: #fff;
            text-align: center;
            opacity: 0;
            transform: translate(-50%, -50%) scale(.72) rotate(-2deg);
            pointer-events: none;
            box-shadow: 0 18px 0 rgba(15,23,42,.20), 0 28px 60px rgba(15,23,42,.32);
        }
        .billiards-result-badge.is-visible {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) rotate(-1deg);
            animation: bazookaResultPop .72s cubic-bezier(.12, 1.4, .2, 1) both;
        }
        .billiards-result-badge span { font-size: 12px; font-weight: 1000; letter-spacing: .12em; opacity: .88; }
        .billiards-result-badge strong { display: block; margin-top: 4px; font-size: clamp(38px, 11vw, 68px); line-height: .95; }
        .billiards-result-badge small { display: block; margin-top: 6px; font-size: 13px; font-weight: 900; opacity: .9; }
        .billiards-panel {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 12px;
            padding: 14px;
            border-radius: 24px;
            background: rgba(255,255,255,.88);
            box-shadow: var(--shadow-soft);
        }
        .billiards-panel strong { display: block; font-size: 18px; }
        .billiards-panel p { margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
        @keyframes billiardsCueStrike {
            0% { transform: translate(-50%, -50%) rotate(var(--cue-angle, 0deg)) scaleY(var(--cue-retract, .44)) scaleX(1.16); filter: drop-shadow(0 10px 10px rgba(15,23,42,.24)) saturate(1.1); }
            36% { transform: translate(-50%, -50%) rotate(var(--cue-angle, 0deg)) scaleY(.34) scaleX(1.22) translateY(10px); }
            64% { transform: translate(-50%, -50%) rotate(var(--cue-angle, 0deg)) scaleY(var(--cue-strike-stretch, 2.22)) scaleX(.82) translateY(-25px); filter: drop-shadow(0 0 24px rgba(250,204,21,.95)) saturate(1.45); }
            100% { transform: translate(-50%, -50%) rotate(var(--cue-angle, 0deg)) scaleY(.96); opacity: .28; }
        }
        @keyframes billiardsBurst {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
            20% { opacity: 1; }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(2.25); }
        }
        @keyframes billiardsFlash {
            0% { opacity: 0; transform: translate(-12%, -50%) rotate(var(--strike-angle, 0deg)) scaleX(.12); }
            18% { opacity: 1; }
            100% { opacity: 0; transform: translate(-12%, -50%) rotate(var(--strike-angle, 0deg)) scaleX(1.35); }
        }
        @keyframes billiardsTextPop {
            0% { opacity: 0; transform: translate(-50%, -110%) rotate(-10deg) scale(.35); }
            28% { opacity: 1; transform: translate(-50%, -145%) rotate(4deg) scale(1.15); }
            100% { opacity: 0; transform: translate(-50%, -190%) rotate(-5deg) scale(.9); }
        }
        .bell-hero,
        .bazooka-hero,
        .whack-hero,
        .stadium-hero {
            position: relative;
            overflow: hidden;
        }
        .bell-hero::after,
        .bazooka-hero::after,
        .whack-hero::after,
        .stadium-hero::after {
            content: "";
            position: absolute;
            inset: -45% auto auto -30%;
            width: 46%;
            height: 190%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.50), transparent);
            transform: rotate(18deg);
            animation: gameHeroShine 4.8s ease-in-out infinite;
            pointer-events: none;
        }
        .bell-arena::before,
        .whack-board::before,
        .stadium-arena::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            background:
                linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255,255,255,.08) 1px, transparent 1px);
            background-size: 28px 28px;
            opacity: .18;
            pointer-events: none;
            mix-blend-mode: screen;
        }
        .bell-fighter,
        .bell-center,
        .whack-hole,
        .stadium-character,
        .pk-goal,
        .homerun-scoreboard {
            position: relative;
            z-index: 1;
        }
        .bell-arena[data-bell-phase="waiting"] .bell-tap-button {
            animation: bellReadyBreath .92s ease-in-out infinite alternate;
        }
        .bell-arena[data-bell-phase="waiting"] .bell-center::before {
            content: "";
            position: absolute;
            inset: 36px 8px auto;
            height: 112px;
            border: 4px solid rgba(37,99,235,.18);
            border-radius: 50%;
            animation: bellRadar 1.25s ease-out infinite;
            pointer-events: none;
        }
        .bell-arena[data-bell-phase="go"] {
            animation: bellGoFlash .18s steps(2,end) infinite;
        }
        .bell-arena[data-bell-phase="go"] .bell-tap-button {
            animation: bellGoButton .24s ease-in-out infinite alternate;
        }
        .bell-arena[data-bell-phase="go"] .bell-status {
            box-shadow: 0 8px 0 rgba(127,29,29,.28), 0 0 34px rgba(239,68,68,.42);
        }
        .bell-result-card {
            border: 2px solid rgba(255,255,255,.82);
            transition: transform .18s ease, box-shadow .18s ease;
        }
        .bell-arena[data-bell-result="player-win"] + .bell-result-card,
        .bell-arena[data-bell-result="enemy-win"] + .bell-result-card,
        .bell-arena[data-bell-result="player-foul"] + .bell-result-card {
            transform: translateY(-2px) rotate(-.35deg);
            box-shadow: 0 10px 0 rgba(15,23,42,.10), var(--shadow-soft);
        }
        .bazooka-power-fill {
            position: relative;
            overflow: hidden;
        }
        .bazooka-power-fill::after {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(115deg, rgba(255,255,255,.0) 0 10px, rgba(255,255,255,.36) 10px 18px);
            animation: gameStripeMove .52s linear infinite;
        }
        .bazooka-arena[data-bazooka-phase="charging"] .bazooka-sand {
            animation: bazookaSandRumble .16s linear infinite alternate;
        }
        .bazooka-arena[data-bazooka-phase="charging"] .bazooka-meter-board {
            animation: bazookaMeterPulse .38s ease-in-out infinite alternate;
        }
        .bazooka-arena[data-bazooka-phase="launched"] .bazooka-result-badge {
            box-shadow: 0 16px 0 rgba(15,23,42,.18), 0 0 52px rgba(250,204,21,.42);
        }
        .bazooka-charge-spark {
            position: absolute;
            left: var(--spark-x, 50%);
            bottom: 95px;
            z-index: 3;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: radial-gradient(circle, #fff 0 24%, #facc15 25% 58%, transparent 62%);
            animation: bazookaSpark .52s ease-out forwards;
            pointer-events: none;
        }
        .whack-board {
            position: relative;
        }
        .whack-board[data-whack-phase="playing"] {
            animation: whackBoardAlive 1.4s ease-in-out infinite alternate;
        }
        .whack-board[data-whack-combo="hot"] {
            box-shadow: inset 0 0 0 2px rgba(37,99,235,.06), 0 14px 0 rgba(15,23,42,.08), 0 0 34px rgba(250,204,21,.28);
        }
        .whack-board[data-whack-combo="hot"] .whack-score-card {
            animation: whackPop .18s ease-out;
        }
        .whack-hole.is-active::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 12%;
            z-index: 0;
            width: 74%;
            height: 34%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,.72), rgba(250,204,21,.22) 50%, transparent 72%);
            transform: translateX(-50%);
            animation: whackHoleGlow .34s ease-out;
        }
        .whack-hole.is-bad::before {
            background: radial-gradient(circle, rgba(255,255,255,.62), rgba(15,23,42,.22) 52%, transparent 74%);
        }
        .whack-hit-pop {
            position: absolute;
            left: 50%;
            top: 20%;
            z-index: 4;
            padding: 4px 8px;
            border: 3px solid #fff;
            border-radius: 999px;
            background: #22c55e;
            color: #fff;
            font-size: 14px;
            font-weight: 1000;
            transform: translate(-50%, 0);
            animation: whackScoreFloat .55s ease-out forwards;
            pointer-events: none;
            box-shadow: 0 8px 0 rgba(15,23,42,.12);
        }
        .whack-hit-pop.bad {
            background: #ef4444;
        }
        .homerun-arena-v2.is-pitching .homerun-swing-zone {
            animation: homerunZonePulse .62s ease-in-out infinite alternate;
        }
        .homerun-arena-v2.is-swing::after,
        #screen-pk .stadium-arena.is-shot::after {
            opacity: .35;
            animation: gameImpactLines .18s linear 2;
        }
        .homerun-arena-v2.is-result.is-hr {
            animation: homerunHrGlow 1.2s ease-in-out infinite alternate;
        }
        .homerun-arena-v2.is-result.is-hr .homerun-result-word {
            animation: homerunWordBounce .72s cubic-bezier(.2,1.5,.3,1) both;
        }
        .homerun-arena-v2.is-result.is-foul .homerun-result-word,
        .homerun-arena-v2.is-miss .homerun-result-word {
            animation: gameWobble .42s ease-out both;
        }
        #screen-pk .stadium-arena.is-shot .pk-cinematic-label {
            animation: pkLabelBlink .32s steps(2,end) infinite;
        }
        #screen-pk .stadium-arena.is-save .pk-impact-badge {
            background: linear-gradient(135deg, #064e3b, #22c55e);
        }
        #screen-pk .stadium-arena.is-goal .pk-impact-badge {
            background: linear-gradient(135deg, #7f1d1d, #ef4444);
        }
        .pk-choice-btn.active {
            background: #1d4ed8;
            color: #fff;
            box-shadow: 0 7px 0 #1e40af, 0 16px 26px rgba(37,99,235,.22);
            transform: translateY(-2px);
        }
        #screen-pk .stadium-arena.is-shot + .stadium-panel .pk-choice-btn:not(:disabled) {
            background: linear-gradient(135deg, #fff, #eff6ff);
            border-color: rgba(37,99,235,.48);
            box-shadow: 0 6px 0 rgba(37,99,235,.14), 0 0 22px rgba(37,99,235,.14);
        }
        .pk-round-dot.save,
        .pk-round-dot.goal {
            animation: roundDotPop .28s cubic-bezier(.2,1.4,.3,1);
        }
        @keyframes gameHeroShine {
            0%, 54% { transform: translateX(0) rotate(18deg); opacity: 0; }
            62% { opacity: .8; }
            82%, 100% { transform: translateX(330%) rotate(18deg); opacity: 0; }
        }
        @keyframes gameStripeMove {
            from { transform: translateX(-22px); }
            to { transform: translateX(22px); }
        }
        @keyframes bellReadyBreath {
            from { transform: translateY(0) scale(1); }
            to { transform: translateY(-3px) scale(1.035); }
        }
        @keyframes bellRadar {
            from { opacity: .6; transform: scale(.55); }
            to { opacity: 0; transform: scale(1.22); }
        }
        @keyframes bellGoFlash {
            from { filter: saturate(1); }
            to { filter: saturate(1.25) brightness(1.06); }
        }
        @keyframes bellGoButton {
            from { transform: translateY(0) scale(1.02); }
            to { transform: translateY(-5px) scale(1.10); }
        }
        @keyframes bazookaSandRumble {
            from { transform: translateX(-1px); }
            to { transform: translateX(1px); }
        }
        @keyframes bazookaMeterPulse {
            from { transform: translateY(0); }
            to { transform: translateY(-2px); }
        }
        @keyframes bazookaTapBreath {
            from { filter: saturate(1) brightness(1); }
            to { filter: saturate(1.18) brightness(1.05); }
        }
        @keyframes bazookaSpark {
            0% { opacity: 0; transform: translate(-50%, 0) scale(.4); }
            25% { opacity: 1; }
            100% { opacity: 0; transform: translate(calc(-50% + var(--spark-drift, 0px)), -96px) scale(1.3); }
        }
        @keyframes whackBoardAlive {
            from { filter: saturate(1); }
            to { filter: saturate(1.08); }
        }
        @keyframes whackHoleGlow {
            from { opacity: 0; transform: translateX(-50%) scale(.55); }
            to { opacity: 1; transform: translateX(-50%) scale(1); }
        }
        @keyframes whackScoreFloat {
            0% { opacity: 0; transform: translate(-50%, 10px) scale(.72) rotate(-8deg); }
            24% { opacity: 1; }
            100% { opacity: 0; transform: translate(-50%, -36px) scale(1.08) rotate(3deg); }
        }
        @keyframes whackScoreHot {
            from { transform: translateY(0); }
            to { transform: translateY(-2px); }
        }
        @keyframes homerunZonePulse {
            from { opacity: .62; transform: translate(-50%, -50%) scaleX(.94); }
            to { opacity: 1; transform: translate(-50%, -50%) scaleX(1.05); }
        }
        @keyframes gameImpactLines {
            from { transform: translate(-8px, -4px); }
            to { transform: translate(8px, 4px); }
        }
        @keyframes homerunHrGlow {
            from { box-shadow: inset 0 0 0 2px rgba(37,99,235,.06), 0 14px 0 rgba(15,23,42,.08), 0 0 0 rgba(250,204,21,0); }
            to { box-shadow: inset 0 0 0 2px rgba(37,99,235,.06), 0 14px 0 rgba(15,23,42,.08), 0 0 58px rgba(250,204,21,.45); }
        }
        @keyframes homerunWordBounce {
            0% { transform: translate(-50%, -50%) scale(.62) rotate(-7deg); opacity: 0; }
            62% { transform: translate(-50%, -50%) scale(1.12) rotate(2deg); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1; }
        }
        @keyframes gameWobble {
            0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
            30% { transform: translate(-52%, -50%) rotate(-6deg); }
            62% { transform: translate(-48%, -50%) rotate(4deg); }
        }
        @keyframes pkLabelBlink {
            from { opacity: .48; }
            to { opacity: 1; }
        }
        @keyframes roundDotPop {
            from { transform: scale(.55); }
            70% { transform: scale(1.18); }
            to { transform: scale(1); }
        }

@media(max-width:700px){            .bell-hero {
                padding: 13px;
                border-radius: 20px;
            }
            .bell-game-shell,
            .bazooka-game-shell,
            .whack-game-shell,
            .stadium-game-shell,
            .billiards-game-shell {
                gap: 10px;
            }
            .bell-hero h3 { font-size: 25px; }
            .bell-hero p,
            .bazooka-hero p,
            .whack-hero p,
            .stadium-hero p,
            .billiards-hero p {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 11px;
                line-height: 1.35;
            }
            .bell-difficulty-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 7px;
            }
            .bell-difficulty-btn { min-height: 42px; font-size: 12px; }
            .bell-arena {
                grid-template-columns: 1fr 112px 1fr;
                min-height: 254px;
                gap: 4px;
                padding: 12px 8px;
                border-radius: 22px;
            }
            .bell-buddy,
            .bell-enemy-img {
                width: 112px;
                height: 112px;
            }
            .bell-center { min-width: 96px; gap: 8px; }
            .bell-status {
                min-width: 88px;
                padding: 8px 9px;
                font-size: 16px;
            }
            .bell-signal {
                width: 96px;
                padding: 6px;
                gap: 5px;
            }
            .bell-tap-button {
                width: 108px;
                height: 108px;
                font-size: 20px;
                box-shadow: 0 9px 0 #92400e, 0 14px 22px rgba(120,53,15,.18);
            }
            .bell-fighter-name { font-size: 10px; padding: 5px 7px; }
            .bazooka-hero {
                padding: 13px;
                border-radius: 20px;
            }
            .bazooka-hero h3 { font-size: 25px; }
            .bazooka-hero p { font-size: 12px; }
            .bazooka-arena {
                min-height: 310px;
                border-radius: 22px;
            }
            .bazooka-meter-board {
                top: 10px;
                right: 10px;
                width: 142px;
                padding: 9px;
            }
            .bazooka-meter-board strong { font-size: 22px; }
            .bazooka-distance-line {
                left: 10px;
                top: 12px;
                bottom: 76px;
                font-size: 10px;
            }
            .bazooka-sand { height: 86px; }
            .bazooka-chinanago {
                bottom: 30px;
                width: 118px;
                height: 118px;
            }
            .bazooka-control-panel {
                grid-template-columns: 1fr 104px;
                gap: 8px;
                padding: 11px;
                border-radius: 18px;
                position: sticky;
                bottom: calc(10px + env(safe-area-inset-bottom));
                z-index: 25;
                border: 2px solid rgba(255,255,255,.92);
                box-shadow: 0 12px 0 rgba(15,118,110,.12), 0 22px 34px rgba(15,23,42,.18);
            }
            .bazooka-control-panel strong { font-size: 15px; }
            .bazooka-control-panel p {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 12px;
            }
            .bazooka-tap-button {
                width: 104px;
                height: 104px;
                font-size: 20px;
                box-shadow: 0 9px 0 #115e59, 0 14px 22px rgba(15,118,110,.18);
            }
            .bazooka-result-badge {
                min-width: min(84vw, 280px);
                padding: 14px 16px;
                border-radius: 22px;
            }
            .bazooka-result-badge strong {
                font-size: clamp(38px, 15vw, 58px);
            }
            .whack-hero {
                padding: 13px;
                border-radius: 20px;
            }
            .whack-hero h3 { font-size: 25px; }
            .whack-hero p { font-size: 12px; }
            .whack-score-row {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 7px;
            }
            .whack-score-card {
                padding: 8px;
                border-radius: 13px;
            }
            .whack-score-card strong { font-size: 19px; }
            .whack-board {
                gap: 9px;
                width: calc(100vw - 18px);
                max-width: none;
                padding: 11px;
                border-radius: 22px;
                aspect-ratio: 4 / 5;
                margin-left: calc(50% - 50vw + 9px);
                margin-right: calc(50% - 50vw + 9px);
            }
            .whack-hole {
                min-height: 0;
                border-radius: 20px;
            }
            .whack-target {
                width: min(30vw, 118px);
                height: min(30vw, 118px);
            }
            .whack-control-panel {
                grid-template-columns: 1fr;
                gap: 8px;
                padding: 11px;
                border-radius: 18px;
                position: sticky;
                bottom: calc(10px + env(safe-area-inset-bottom));
                z-index: 25;
                border: 2px solid rgba(255,255,255,.92);
                box-shadow: 0 12px 0 rgba(37,99,235,.10), 0 22px 34px rgba(15,23,42,.18);
            }
            .whack-control-panel strong { font-size: 15px; }
            .whack-control-panel p {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 12px;
            }
            .whack-actions {
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
            }
            .whack-actions .primary-btn { min-height: 50px; }
            .whack-actions .ghost-btn { min-height: 44px; padding: 0 12px; }
            .billiards-hero {
                padding: 13px;
                border-radius: 20px;
            }
            .billiards-hero h3 { font-size: 25px; }
            .billiards-table {
                min-height: 430px;
                border-width: 10px;
                border-radius: 24px;
            }
            .billiards-pocket {
                width: 38px;
                height: 38px;
            }
            .billiards-hud {
                top: 8px;
                gap: 5px;
                width: calc(100% - 28px);
            }
            .billiards-hud span {
                padding: 5px 8px;
                font-size: 11px;
            }
            .billiards-cue-chinanago {
                width: 78px;
                height: 78px;
            }
            .billiards-panel {
                grid-template-columns: 1fr;
                padding: 11px;
                border-radius: 18px;
                position: sticky;
                bottom: calc(10px + env(safe-area-inset-bottom));
                z-index: 25;
                border: 2px solid rgba(255,255,255,.92);
                box-shadow: 0 12px 0 rgba(15,118,110,.10), 0 22px 34px rgba(15,23,42,.18);
            }
            .billiards-panel strong { font-size: 15px; }
            .billiards-panel p {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 12px;
            }
            .stadium-hero {
                padding: 13px;
                border-radius: 20px;
            }
            .stadium-hero h3 { font-size: 25px; }
            .stadium-hero p { font-size: 12px; }
            .stadium-arena {
                min-height: 340px;
                border-radius: 22px;
            }
            .stadium-character {
                width: 92px;
                height: 92px;
            }
            .stadium-pitcher { left: 3%; bottom: 64px; }
            .stadium-batter { right: 3%; bottom: 58px; }
            .homerun-zone {
                bottom: 108px;
                width: 70vw;
            }
            .homerun-arena-v2 {
                min-height: 330px;
            }
            .homerun-scoreboard {
                left: 9px;
                top: 9px;
                min-width: 118px;
                padding: 8px 9px;
                border-width: 2px;
            }
            .homerun-scoreboard span { font-size: 11px; }
            .homerun-scoreboard b { font-size: 17px; }
            .homerun-pitcher {
                top: 31%;
                width: 58px;
                height: 58px;
            }
            .homerun-batter {
                left: 16%;
                bottom: -10px;
                width: 148px;
                height: 148px;
            }
            .homerun-swing-zone {
                top: 58%;
                width: 126px;
            }
            .homerun-ball-v2 {
                width: 42px;
                height: 42px;
            }
            .stadium-panel {
                grid-template-columns: 1fr;
                padding: 11px;
                border-radius: 18px;
                position: sticky;
                bottom: calc(10px + env(safe-area-inset-bottom));
                z-index: 25;
                border: 2px solid rgba(255,255,255,.92);
                box-shadow: 0 12px 0 rgba(37,99,235,.10), 0 22px 34px rgba(15,23,42,.18);
            }
            .stadium-panel strong { font-size: 15px; }
            .stadium-panel p {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 12px;
            }
            .stadium-main-button {
                width: 100%;
                min-height: 58px;
                font-size: 18px;
            }
            .pk-goal {
                top: 38px;
                width: 88vw;
                height: 142px;
                border-width: 5px;
            }
            .pk-keeper {
                bottom: 16px;
                width: 104px;
                height: 132px;
            }
            .pk-keeper.is-stretch-left,
            .pk-keeper.is-stretch-right {
                width: min(70vw, 300px);
                height: min(38vw, 160px);
                bottom: 34px;
            }
            .pk-keeper.is-stretch-left {
                left: 4%;
                right: auto;
                transform: translateX(0);
            }
            .pk-keeper.is-stretch-right {
                right: 4%;
                left: auto;
                transform: translateX(0);
            }
            .pk-keeper.is-stretch-center {
                left: 50%;
                right: auto;
                width: min(44vw, 190px);
                height: min(66vw, 260px);
                bottom: 8px;
                transform: translateX(-50%);
            }
            .pk-kicker {
                right: 0;
                bottom: 18px;
            }
            .pk-kicker.is-kicking,
            .pk-kicker.is-after-kick {
                left: 64%;
                right: auto;
                bottom: 14px;
                width: 160px;
                height: 148px;
            }
            .pk-choice-btn {
                min-height: 58px;
                border-radius: 18px;
                font-size: 15px;
            }
.app-header{padding:12px}.brand{font-size:15px}nav .ghost-btn{padding:8px 10px}main{padding:8px 12px 24px}.hero{padding:20px}.hero img{width:28%}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.game-card{padding:16px}.game-card strong{font-size:15px}.bell-arena{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)}.bell-buddy,.bell-enemy-img{max-width:100%}.bell-tap-button{width:92px;height:92px}.pk-goal{max-width:94%}}
/* Extracted canvas games use their own compact layout. */
.hold-game-overlay[hidden],.sorter-game-overlay[hidden],.batting-game-overlay[hidden]{display:none!important}
.whack-difficulty { display: none; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
body[data-game-version="v3"] #screen-whack .whack-difficulty { display: grid; }
.whack-difficulty button { min-height: 42px; border: 1px solid var(--line, #d8dde4); border-radius: 6px; background: #fff; color: #243243; font-weight: 800; }
.whack-difficulty button.active { border-color: #2563eb; background: #eaf1ff; color: #174db7; box-shadow: inset 0 0 0 2px rgba(37,99,235,.12); }
button:disabled{cursor:default;opacity:.58}


.site-links{line-height:1.8}.site-links a{color:#185560;text-underline-offset:.2em}.site-links a:focus-visible{outline:3px solid #ed9b32;outline-offset:4px}