/* ========================================================================== LUCKY CLAW — arcade claw machine Cabinet, marquee, glass, control panel, LEDs, collection shelf. Ambient lighting reacts to game state via [data-state] on . ========================================================================== */ :root { --neon-1: #ff3d81; /* magenta */ --neon-2: #22d3ee; /* cyan */ --neon-3: #ffd23f; /* gold */ --ambient: #22d3ee; --ambient-soft: rgba(34, 211, 238, 0.35); --case-w: min(92vw, 520px); --cabinet-bg: linear-gradient(180deg, #2a1440, #1b0f2e 45%, #120a20); --metal: linear-gradient(180deg, #d8d9e3, #9fa2b4 40%, #747794); --shadow: 0 18px 60px rgba(0, 0, 0, 0.55); --font-arcade: "Arial Black", "Avenir Next Heavy", "Segoe UI Black", system-ui, sans-serif; --font-body: "Segoe UI", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); color: #e8e6f5; background: radial-gradient(1200px 700px at 50% -10%, #241238 0%, transparent 60%), radial-gradient(900px 600px at 10% 110%, #0e2233 0%, transparent 55%), #0b0714; min-height: 100dvh; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } /* faint arcade floor grid + vignette */ .room { position: relative; min-height: 100dvh; padding: clamp(10px, 2.4vh, 28px) 0 60px; } .room::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(transparent 97%, rgba(255, 255, 255, 0.045) 97.5%), linear-gradient(90deg, transparent 97%, rgba(255, 255, 255, 0.03) 97.5%); background-size: 44px 44px; mask-image: radial-gradient(80% 60% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 30%, transparent 100%); } .room-glow { position: fixed; inset: -20%; background: radial-gradient(45% 40% at 50% 30%, var(--ambient-soft), transparent 70%); filter: blur(30px); opacity: 0.55; transition: background 0.8s ease, opacity 0.8s ease; pointer-events: none; animation: ambient-breathe 6s ease-in-out infinite; } @keyframes ambient-breathe { 50% { opacity: 0.38; } } .sr-only, .screen-reader-status { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ============================== LAYOUT ================================== */ .layout { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.5vw, 30px); max-width: 1180px; margin: 0 auto; padding: 0 clamp(8px, 2vw, 24px); justify-items: center; } @media (min-width: 1040px) { .layout { grid-template-columns: auto 340px; align-items: start; justify-content: center; } } /* ============================== CABINET ================================= */ .cabinet { position: relative; width: var(--case-w); border-radius: 22px 22px 14px 14px; background: var(--cabinet-bg); border: 1px solid #3d2a5c; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 34px var(--ambient-soft); padding: 12px 12px 16px; transition: box-shadow 0.7s ease; } /* neon trim around the cabinet */ .cabinet::before { content: ""; position: absolute; inset: 6px; border-radius: 16px; border: 2px solid var(--ambient); box-shadow: 0 0 12px var(--ambient), inset 0 0 12px var(--ambient-soft); opacity: 0.85; pointer-events: none; transition: border-color 0.6s ease, box-shadow 0.6s ease; animation: trim-pulse 3.2s ease-in-out infinite; } @keyframes trim-pulse { 50% { opacity: 0.55; } } /* ============================== MARQUEE ================================= */ .marquee { position: relative; border-radius: 12px; padding: clamp(10px, 1.8vw, 16px) 10px 8px; background: radial-gradient(120% 160% at 50% -30%, rgba(255, 255, 255, 0.16), transparent 55%), linear-gradient(180deg, #35104f, #1d0a30); border: 1px solid #5a2f85; box-shadow: inset 0 0 24px rgba(255, 61, 129, 0.25), 0 4px 14px rgba(0, 0, 0, 0.4); overflow: hidden; text-align: center; } .marquee-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; z-index: 2; } .marquee-sub { font-family: var(--font-arcade); font-size: clamp(9px, 1.8vw, 12px); letter-spacing: 0.55em; color: var(--neon-2); text-shadow: 0 0 8px var(--neon-2); } .marquee-title { margin: 0; font-family: var(--font-arcade); font-size: clamp(30px, 8.2vw, 52px); letter-spacing: 0.04em; line-height: 1; color: #fff; background: linear-gradient(180deg, #ffe9a8 15%, #ffb1d0 48%, #ff3d81 78%, #b8205e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 14px rgba(255, 61, 129, 0.75)) drop-shadow(0 2px 0 rgba(0,0,0,0.35)); transform: scaleY(1.06); } .marquee-scorll { position: relative; z-index: 2; margin-top: 6px; font-family: var(--font-arcade); font-size: clamp(9px, 1.9vw, 12px); letter-spacing: 0.28em; color: var(--neon-3); text-shadow: 0 0 10px rgba(255, 210, 63, 0.8); white-space: nowrap; overflow: hidden; } .marquee-scorll > span { display: inline-block; padding-left: 100%; animation: scroll-marquee 16s linear infinite; } @keyframes scroll-marquee { to { transform: translateX(-100%); } } /* chase bulbs along the marquee edge */ .bulbs { position: absolute; inset: 3px; pointer-events: none; z-index: 1; } .bulb { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #57193a; box-shadow: 0 0 2px rgba(0,0,0,0.6) inset; } .bulb.on { background: radial-gradient(circle at 35% 35%, #fff, var(--neon-3) 65%); box-shadow: 0 0 8px var(--neon-3), 0 0 16px rgba(255, 210, 63, 0.6); animation: bulb-glow 1.1s ease-in-out infinite; } @keyframes bulb-glow { 50% { filter: brightness(1.45); } } /* ============================== LED BAR ================================= */ .ledbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 2px 10px; } .led-module { display: flex; flex-direction: column; align-items: center; gap: 3px; background: linear-gradient(180deg, #0d0a17, #141021); border: 1px solid #32224d; border-radius: 8px; padding: 7px 4px 5px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8); } .led { width: 100%; height: auto; display: block; image-rendering: auto; } .led-label { font-family: var(--font-arcade); font-size: clamp(8px, 1.6vw, 10px); letter-spacing: 0.3em; color: #6fe3f2; text-shadow: 0 0 6px rgba(111, 227, 242, 0.7); } .led-module.alert .led-label { color: #ff5d7e; text-shadow: 0 0 8px rgba(255, 93, 126, 0.9); } /* ============================== GLASS CASE ============================== */ .case-wrap { position: relative; } .case { position: relative; border-radius: 10px; overflow: hidden; border: 3px solid #1a1030; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.45); background: #05030a; touch-action: none; cursor: pointer; } #game { display: block; width: 100%; height: auto; } .glass { position: absolute; inset: 0; pointer-events: none; border-radius: 7px; overflow: hidden; } .glass-streak { position: absolute; top: -30%; bottom: -30%; width: 26%; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.055) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.055) 55%, transparent 80%); transform: skewX(-16deg); } .glass-streak.s1 { left: 6%; } .glass-streak.s2 { left: 64%; width: 12%; opacity: 0.7; } .glass-glare { position: absolute; inset: 0; background: radial-gradient(60% 34% at 24% 6%, rgba(255, 255, 255, 0.14), transparent 70%); } .glass-smudge { position: absolute; inset: 0; background: radial-gradient(24% 18% at 78% 82%, rgba(255, 255, 255, 0.045), transparent 70%); } /* floating state banner inside the glass */ .state-banner { position: absolute; left: 50%; top: 16%; transform: translate(-50%, 0) scale(0.9); font-family: var(--font-arcade); font-size: clamp(16px, 4.4vw, 26px); letter-spacing: 0.14em; color: #fff; text-shadow: 0 0 12px var(--ambient), 0 0 30px var(--ambient-soft), 0 3px 0 rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 3; } .state-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); } .state-banner.pulse { animation: banner-pulse 1.1s ease-in-out infinite; } @keyframes banner-pulse { 50% { transform: translate(-50%, 0) scale(1.06); } } .chute-lip { position: absolute; right: 10px; bottom: -4px; width: 88px; height: 10px; border-radius: 0 0 8px 8px; background: var(--metal); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); opacity: 0.9; } /* ============================ CONTROL PANEL ============================= */ .panel { margin-top: 14px; border-radius: 12px; padding: clamp(10px, 2vw, 16px) clamp(10px, 2vw, 16px) 8px; background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.09), transparent 60%), linear-gradient(180deg, #3a2b57, #241a3b 60%, #1b1330); border: 1px solid #4a3770; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.4); } .panel-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(8px, 3vw, 22px); } /* ---- coin slot ---- */ .coin-slot { appearance: none; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; padding: 4px; position: relative; touch-action: manipulation; } .coin-plate { position: relative; width: clamp(44px, 9vw, 58px); height: clamp(58px, 12vw, 76px); border-radius: 8px; background: var(--metal); border: 1px solid #565970; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; transition: transform 0.1s ease; } .coin-slit { width: 46%; height: 5px; border-radius: 3px; background: #17141f; box-shadow: inset 0 2px 3px #000; } .coin-led { position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #3a0d1c; transition: background 0.3s ease, box-shadow 0.3s ease; } .coin-slot:active .coin-plate { transform: translateY(2px); } .coin-slot.glow .coin-led { background: #ff4d6d; box-shadow: 0 0 8px #ff4d6d, 0 0 16px rgba(255, 77, 109, 0.7); animation: bulb-glow 1s ease-in-out infinite; } .coin-caption { font-family: var(--font-arcade); font-size: clamp(7px, 1.5vw, 9px); letter-spacing: 0.18em; color: #ff9db4; text-align: center; line-height: 1.5; text-shadow: 0 0 6px rgba(255, 61, 129, 0.5); } .coin-fallback { display: none; } /* coin that visually drops into the slot */ .coin-anim { position: absolute; left: 50%; top: 4px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, #f5c33b 55%, #a87b12); box-shadow: 0 0 10px rgba(255, 210, 63, 0.8), inset 0 0 4px rgba(120, 80, 0, 0.5); pointer-events: none; animation: coin-drop 0.5s ease-in forwards; } @keyframes coin-drop { 0% { transform: translateY(-26px) scale(1); opacity: 1; } 70% { transform: translateY(8px) scale(1.02); opacity: 1; } 100% { transform: translateY(30px) scale(0.4); opacity: 0; } } /* ---- joystick ---- */ .joystick { display: flex; flex-direction: column; align-items: center; gap: 6px; touch-action: none; } .stick-base { position: relative; width: clamp(92px, 20vw, 120px); height: clamp(64px, 13vw, 84px); border-radius: 14px 14px 18px 18px; background: radial-gradient(90% 100% at 50% 20%, #4c3a72, #241a3b 80%); border: 1px solid #58457f; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.4); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; } .stick-dust span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); top: 26%; left: 50%; } .stick-dust span:nth-child(1) { left: 30%; top: 20%; } .stick-dust span:nth-child(2) { left: 68%; top: 30%; } .stick-dust span:nth-child(3) { left: 42%; top: 42%; } .stick-dust span:nth-child(4) { left: 58%; top: 16%; } .stick-dust span:nth-child(5) { left: 22%; top: 44%; } .stick-dust span:nth-child(6) { left: 76%; top: 48%; } .stick { position: relative; width: 0; height: 0; transform-origin: 50% 100%; transition: transform 0.12s ease-out; } .stick-shaft { position: absolute; left: -5px; bottom: 0; width: 10px; height: clamp(38px, 8vw, 52px); border-radius: 5px; background: linear-gradient(90deg, #888aa5, #d9dbe8 45%, #6d7089); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } .stick-ball { position: absolute; left: -19px; bottom: clamp(32px, 7vw, 44px); width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ff9db0, #e01f4d 60%, #8f0f30); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 -4px 8px rgba(90, 0, 25, 0.55); } .joystick.tilt-left .stick { transform: rotate(-17deg); } .joystick.tilt-right .stick { transform: rotate(17deg); } .joy-hint { font-family: var(--font-arcade); font-size: clamp(7px, 1.5vw, 9px); letter-spacing: 0.3em; color: #8f7fb8; } /* ---- drop / start button ---- */ .drop-btn { appearance: none; border: none; background: none; position: relative; width: clamp(72px, 15vw, 96px); height: clamp(72px, 15vw, 96px); border-radius: 50%; cursor: pointer; padding: 0; touch-action: manipulation; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); } .drop-btn.small { width: 92px; height: 92px; margin-top: 14px; } .drop-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#ff3d81, #ffd23f, #22d3ee, #ff3d81); padding: 4px; box-shadow: 0 0 18px rgba(255, 61, 129, 0.45); animation: ring-spin 6s linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } .drop-cap { position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ff8fa8, #e0204f 62%, #8f102f); box-shadow: inset 0 -6px 12px rgba(80, 0, 22, 0.6), inset 0 4px 8px rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.08s ease, filter 0.3s ease; } .drop-btn:active .drop-cap { transform: scale(0.94); } .drop-btn:disabled { cursor: default; } .drop-btn:disabled .drop-cap { filter: saturate(0.35) brightness(0.7); } .drop-btn:disabled .drop-ring { animation: none; opacity: 0.4; } .drop-caption { font-family: var(--font-arcade); font-size: clamp(11px, 2.4vw, 14px); letter-spacing: 0.12em; color: #fff; text-shadow: 0 2px 0 rgba(90, 0, 25, 0.8), 0 0 12px rgba(255, 255, 255, 0.4); } .drop-btn.armed .drop-cap { animation: drop-arm 0.9s ease-in-out infinite; } @keyframes drop-arm { 50% { filter: brightness(1.3); } } .panel-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .panel-brand { font-family: var(--font-arcade); font-size: clamp(7px, 1.5vw, 9px); letter-spacing: 0.3em; color: #6f5f95; text-align: center; } .mini-btn { appearance: none; display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(180deg, #372a55, #221839); border: 1px solid #58457f; color: #cfc4ec; font-family: var(--font-arcade); font-size: clamp(8px, 1.7vw, 10px); letter-spacing: 0.16em; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .mini-btn:hover, .mini-btn:focus-visible { border-color: var(--neon-2); color: #fff; box-shadow: 0 0 10px rgba(34, 211, 238, 0.35); } .mini-btn[aria-pressed="true"] { color: #ff9db4; border-color: #ff3d81; } .icon { width: 15px; height: 15px; fill: currentColor; stroke: none; } .icon .ic-waves, .icon .ic-cross { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .mini-btn[aria-pressed="true"] .ic-waves { display: none; } .mini-btn:not([aria-pressed="true"]) .ic-cross { display: none; } /* speaker grille */ .speaker { margin: 12px auto 0; width: 62%; height: 16px; border-radius: 8px; background: radial-gradient(circle, #0a0713 32%, transparent 34%) 0 0 / 10px 10px, linear-gradient(180deg, #241a3b, #170f28); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7); } /* ============================== SIDE PANELS ============================= */ .side { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px); } @media (min-width: 1040px) { .side { width: 340px; max-width: none; } } .shelf-card, .how-card { background: linear-gradient(180deg, rgba(42, 27, 66, 0.85), rgba(23, 14, 39, 0.9)); border: 1px solid #3d2a5c; border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); } .shelf-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--font-arcade); font-size: 13px; letter-spacing: 0.14em; color: var(--neon-3); text-shadow: 0 0 10px rgba(255, 210, 63, 0.5); } .shelf-title .icon { width: 17px; height: 17px; } .shelf-count { margin-left: auto; background: rgba(255, 210, 63, 0.14); border: 1px solid rgba(255, 210, 63, 0.4); color: #ffe9a8; border-radius: 20px; padding: 1px 10px; font-size: 12px; } .shelf-empty { color: #8f7fb8; font-size: 13px; } .shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; } .shelf:empty { display: none; } .shelf-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: radial-gradient(90% 80% at 50% 0%, rgba(255, 255, 255, 0.05), transparent), #150e26; border: 1px solid #32224d; border-radius: 10px; padding: 8px 4px 7px; animation: shelf-in 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); } @keyframes shelf-in { from { transform: scale(0.3) translateY(14px); opacity: 0; } } .shelf-item canvas { width: 54px; height: 54px; } .shelf-item .shelf-name { font-size: 10px; font-weight: 700; color: #d8d2ee; letter-spacing: 0.06em; } .shelf-item .shelf-rarity { font-family: var(--font-arcade); font-size: 7.5px; letter-spacing: 0.16em; } .shelf-item .shelf-x { font-size: 10px; color: #ffd23f; font-weight: 700; } .rarity-common { color: #9aa6c0; } .rarity-uncommon { color: #5ce6a5; } .rarity-rare { color: #6fb8ff; } .rarity-epic { color: #d08bff; } .reset-btn { margin-top: 12px; width: 100%; justify-content: center; color: #8f7fb8; } .tips { margin: 0; padding-left: 18px; color: #b9b0d6; font-size: 13px; line-height: 1.55; } .tips li + li { margin-top: 6px; } .tips b { color: #fff; } /* ============================== MODALS ================================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(5, 3, 10, 0.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 18px; animation: fade-in 0.25s ease; } .modal-backdrop[hidden] { display: none; } /* display:flex must not defeat [hidden] */ @keyframes fade-in { from { opacity: 0; } } .modal { position: relative; width: min(400px, 92vw); border-radius: 18px; padding: 22px 22px 24px; text-align: center; background: linear-gradient(180deg, #34215a, #1c1130); border: 1px solid #5a2f85; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 61, 129, 0.18); animation: modal-pop 0.35s cubic-bezier(0.2, 1.5, 0.4, 1); } @keyframes modal-pop { from { transform: scale(0.7); opacity: 0; } } .prize-glow { position: absolute; inset: -40%; background: radial-gradient(circle at 50% 30%, rgba(255, 210, 63, 0.3), transparent 60%); animation: ambient-breathe 2.4s ease-in-out infinite; pointer-events: none; } .prize-modal-title, .help-title { margin: 0 0 6px; font-family: var(--font-arcade); font-size: 26px; letter-spacing: 0.12em; color: #fff; text-shadow: 0 0 16px var(--neon-3), 0 3px 0 rgba(0, 0, 0, 0.4); } .prize-portrait { width: 170px; height: 170px; margin: 4px auto; display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); } .prize-name { margin: 2px 0; font-size: 19px; font-weight: 800; color: #fff; } .prize-rarity { margin: 0 0 8px; font-family: var(--font-arcade); font-size: 11px; letter-spacing: 0.3em; } .help-grid { display: flex; flex-direction: column; gap: 9px; margin: 14px 0 10px; text-align: left; } .help-item { display: flex; align-items: center; gap: 12px; color: #cfc6e8; font-size: 13.5px; } .kbd { flex: none; min-width: 58px; text-align: center; font-family: var(--font-arcade); font-size: 11px; background: linear-gradient(180deg, #2b1f47, #1a1230); border: 1px solid #58457f; border-bottom-width: 3px; border-radius: 7px; padding: 5px 8px; color: #a8f6ff; } .help-note { color: #a99ed0; font-size: 12.5px; line-height: 1.55; margin: 0 0 4px; } /* ========================= STATE-DRIVEN AMBIENCE ======================= */ body[data-state="ATTRACT"] { --ambient: #ff3d81; --ambient-soft: rgba(255, 61, 129, 0.32); } body[data-state="COIN"] { --ambient: #ffd23f; --ambient-soft: rgba(255, 210, 63, 0.4); } body[data-state="READY"] { --ambient: #5ce6a5; --ambient-soft: rgba(92, 230, 165, 0.3); } body[data-state="MOVE"] { --ambient: #22d3ee; --ambient-soft: rgba(34, 211, 238, 0.36); } body[data-state="DESCEND"], body[data-state="GRAB"] { --ambient: #a5f3fc; --ambient-soft: rgba(165, 243, 252, 0.34); } body[data-state="RISE"], body[data-state="TRAVEL"] { --ambient: #8ab6ff; --ambient-soft: rgba(138, 182, 255, 0.34); } body[data-state="RELEASE"] { --ambient: #ffd23f; --ambient-soft: rgba(255, 210, 63, 0.45); } body[data-state="WIN"] { --ambient: #ffd23f; --ambient-soft: rgba(255, 210, 63, 0.55); } body[data-state="LOSE"] { --ambient: #ff5d7e; --ambient-soft: rgba(255, 93, 126, 0.4); } body[data-state="WIN"] .cabinet { animation: cab-party 0.5s ease-in-out 6; } @keyframes cab-party { 50% { transform: translateY(-4px); } } /* ============================ SMALL PHONES ============================== */ @media (max-width: 480px) { .coin-caption { display: none; } .coin-fallback { display: inline-block; font-family: var(--font-arcade); font-size: 9px; letter-spacing: 0.14em; color: #ff9db4; } .joy-hint { display: none; } .layout { gap: 14px; } .ledbar { gap: 5px; margin: 9px 1px 8px; } .panel-meta { flex-wrap: wrap; justify-content: center; } .panel-brand { order: 3; width: 100%; } } /* ============================ MOTION SAFETY ============================= */ @media (prefers-reduced-motion: reduce) { .room-glow, .cabinet::before, .bulb.on, .marquee-scorll > span, .drop-ring, .drop-btn.armed .drop-cap, body[data-state="WIN"] .cabinet { animation: none !important; } .state-banner.pulse { animation: none !important; } .stick { transition: none; } } :focus-visible { outline: 2px solid var(--neon-2); outline-offset: 3px; border-radius: 6px; }