/* Ghost Catch — immersive seasonal arcade, tuned for narrow phones. */
.catch-screen { position:fixed; z-index:9000; inset:0; display:flex; flex-direction:column; overflow:hidden; padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); color:#fff2e2; background:#120c22; isolation:isolate; }
.catch-sky { position:absolute; z-index:-2; inset:0; background:url('assets/ui/season-halloween.webp') center/cover no-repeat; }
.catch-screen::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,#110d23e8 0,#130a20a8 27%,#150a1e66 60%,#0f0718db 100%); pointer-events:none; }
.catch-header { position:relative; z-index:3; display:flex; align-items:center; gap:11px; min-height:65px; padding:9px 15px; background:#130c25bc; border-bottom:1px solid #e6b47b26; backdrop-filter:blur(9px); }
.catch-close { flex:none; display:grid; place-items:center; width:36px; height:36px; border:1px solid #f0cdac60; border-radius:12px; background:#e7bd9630; color:#fce8d6; font-size:15px; }
.catch-brand { display:flex; align-items:center; gap:9px; min-width:0; flex:1; }.catch-brand img { width:32px; height:32px; }.catch-brand small,.catch-brand strong { display:block; white-space:nowrap; }.catch-brand small { color:#e7be90; font-size:9px; font-weight:850; letter-spacing:.1em; }.catch-brand strong { overflow:hidden; font:800 17px/1.2 var(--font-head); text-overflow:ellipsis; }
.catch-head-score { flex:none; min-width:55px; text-align:right; }.catch-head-score small { display:block; color:#e4b986; font-size:9px; }.catch-head-score b { font:800 18px var(--font-head); }
.catch-hud { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:7px; width:min(480px,calc(100% - 28px)); margin:10px auto 0; }
.catch-hud>div { padding:7px 9px; border:1px solid #efc38b45; border-radius:12px; background:#21152bd9; box-shadow:inset 0 1px #fff1; }.catch-hud small { display:block; color:#beaec7; font-size:9px; }.catch-hud b { display:block; margin-top:2px; color:#ffe0ad; font:750 15px var(--font-head); white-space:nowrap; }
.catch-field { position:relative; flex:1; min-height:180px; width:min(100%,720px); margin:0 auto; overflow:hidden; touch-action:none; cursor:ew-resize; }
.catch-field::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 34%,#fac98d19,transparent 40%),linear-gradient(90deg,#0b07175e,transparent 15%,transparent 85%,#0b07175e); }
.catch-moon { position:absolute; top:10%; right:16%; width:85px; height:85px; border-radius:50%; background:#f6dda73c; box-shadow:0 0 45px 12px #ffe2a42d; filter:blur(.2px); }
.catch-floor { position:absolute; z-index:0; left:0; right:0; bottom:0; height:11%; background:linear-gradient(#49264800,#42233f84 60%,#190d24); border-top:1px solid #edb98317; pointer-events:none; }
.catch-ghost { position:absolute; z-index:2; left:50%; bottom:1%; width:clamp(120px,16vh,150px); height:auto; transform:translateX(-50%); transition:filter .18s; filter:drop-shadow(0 15px 12px #090313ba); pointer-events:none; will-change:left; }
.catch-ghost.caught { filter:drop-shadow(0 0 19px #ffdfa2) drop-shadow(0 12px 10px #090313a6); }
.catch-drop { position:absolute; z-index:3; top:-74px; width:76px; height:76px; transform:translateX(-50%); pointer-events:none; filter:drop-shadow(0 9px 9px #06030eb5); }.catch-drop[hidden] { display:none; }
.catch-drop img { display:block; width:100%; height:100%; object-fit:contain; }.catch-drop small { position:absolute; right:-6px; top:0; min-width:28px; padding:3px 5px; border:1px solid #f6c27a; border-radius:8px; background:#291729; color:#ffe1a2; font-size:10px; font-weight:900; text-align:center; }
.catch-drop.fall { animation:catchFall 3.3s linear forwards; }
@keyframes catchFall { from { top:-74px; transform:translateX(-50%) rotate(-9deg) scale(.78); opacity:.7; } 12% { opacity:1; } to { top:calc(100% - 94px); transform:translateX(-50%) rotate(8deg) scale(1.03); opacity:1; } }
.catch-pop { position:absolute; z-index:5; left:50%; bottom:24%; transform:translateX(-50%); color:#ffe3a8; font:800 18px var(--font-head); text-shadow:0 2px 12px #140817; white-space:nowrap; opacity:0; pointer-events:none; }.catch-pop.bad { color:#f3a1ab; }.catch-pop.show { animation:catchPop .65s ease-out both; }
@keyframes catchPop { 0% { opacity:0; transform:translate(-50%,10px) scale(.8); } 30% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-26px) scale(1.1); } }
.catch-foot { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:68px; padding:8px max(16px,env(safe-area-inset-right,0px)); background:#110a1bd9; border-top:1px solid #f0bd8d25; }.catch-foot span { color:#dbc7d8; font-size:11px; line-height:1.35; }.catch-controls { flex:none; display:flex; gap:7px; }.catch-controls button { width:54px; height:44px; border:1px solid #f2c49375; border-radius:12px; background:#e1b78b24; color:#ffdea9; font-size:19px; touch-action:none; }
.catch-shade { position:absolute; z-index:10; inset:0; display:flex; align-items:center; justify-content:center; overflow:auto; padding:calc(env(safe-area-inset-top,0px) + 16px) 15px calc(env(safe-area-inset-bottom,0px) + 16px); background:#100a1aca; backdrop-filter:blur(9px); }.catch-shade[hidden] { display:none; }
.catch-panel { position:relative; width:min(100%,450px); max-height:100%; overflow-y:auto; padding:25px 23px 20px; border:1px solid #f5c7976e; border-radius:27px; background:linear-gradient(155deg,#392247f0,#1c142df7 60%,#25152ff5); box-shadow:0 20px 70px #070410ab,inset 0 1px #fff3; scrollbar-width:thin; }
.catch-panel-mascot { position:absolute; top:1px; right:5px; width:108px; height:108px; object-fit:contain; filter:drop-shadow(0 5px 12px #0008); opacity:.96; }.catch-kicker { display:block; position:relative; z-index:1; max-width:calc(100% - 100px); color:#edc197; font-size:10px; font-weight:900; letter-spacing:.13em; }
.catch-panel h1 { position:relative; z-index:1; max-width:calc(100% - 90px); margin:8px 0 10px; font:800 clamp(25px,7vw,37px)/1.08 var(--font-head); letter-spacing:-.04em; }.catch-panel>p { max-width:360px; margin:0 0 18px; color:#e2d6e5; font-size:13px; line-height:1.5; }
.catch-play { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:53px; padding:0 15px; border:1px solid #fff0ca8c; border-radius:14px; background:linear-gradient(100deg,#edc18b,#c88790 55%,#b278af); color:#301a2b; box-shadow:0 12px 24px #c18b9255,inset 0 1px #fff9; font:800 15px var(--font-head); }.catch-play:disabled { opacity:.65; }.catch-play span { font-size:23px; }
.catch-panel .catch-demo { margin:8px 0 0; color:#d8b494; font-size:10px; text-align:center; }.catch-rule { display:grid; gap:4px; margin-top:17px; padding:12px; border:1px solid #f1c99137; border-radius:13px; background:#f0c48d0e; }.catch-rule b { color:#fbd5a0; font-size:11px; }.catch-rule span { color:#ccbcd3; font-size:11px; }
.catch-gate { display:grid; gap:8px; margin:11px 0 0; padding:12px; border:1px solid #e6bf8170; border-radius:14px; background:#f2bf8417; }.catch-gate[hidden] { display:none; }.catch-gate b { color:#ffe1ab; font:800 15px var(--font-head); }.catch-gate p { margin:0; color:#e1cddd; font-size:11px; line-height:1.4; }.catch-gate button { justify-self:start; min-height:36px; padding:0 12px; border:1px solid #e9bc8a70; border-radius:10px; background:#e9b9812e; color:#ffe0ac; font-weight:800; font-size:11px; }
.catch-prizes { display:grid; gap:5px; margin-top:15px; }.catch-prizes b { color:#f3c690; font-size:12px; }.catch-prizes span { color:#fff2de; font:700 14px var(--font-head); }.catch-prizes small { color:#bfaec9; font-size:10px; }
.catch-leaders { margin-top:17px; padding-top:14px; border-top:1px solid #e5b79031; }.catch-leaders>b { font-size:12px; }.catch-leader { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid #ffffff10; font-size:11px; }.catch-leader span { width:21px; color:#f0c68e; }.catch-leader b { flex:1; }.catch-leader strong { color:#ffe0ae; }.catch-leader.me { color:#ffe1b9; }.catch-empty { color:#93839e; font-size:12px; }.catch-winner { margin-top:11px; padding:10px; border-radius:10px; background:#e3b17d2c; color:#ffe2b0; font-weight:800; font-size:11px; }.catch-winner[hidden] { display:none; }
body.ghost-active { overflow:hidden; }
@media(max-width:360px) { .catch-header { padding-inline:10px; }.catch-brand strong { font-size:14px; }.catch-hud { width:calc(100% - 18px); gap:5px; }.catch-hud>div { padding:6px 7px; }.catch-hud b { font-size:12px; }.catch-panel { padding:20px 18px; }.catch-panel-mascot { width:92px; height:92px; } }
@media(max-height:620px) { .catch-header { min-height:54px; }.catch-hud { margin-top:5px; }.catch-foot { min-height:53px; }.catch-ghost { width:clamp(115px,23vh,160px); }.catch-panel { padding-top:16px; } }
@media(prefers-reduced-motion:reduce) { .catch-drop.fall { animation:none; top:calc(100% - 94px); }.catch-pop.show { animation:none; opacity:1; }.catch-ghost { transition:none; } }