/* Cowry Catch isolated portrait arcade layer. No Cowry Guard selectors. */
.cc-route-active { overflow:hidden; overscroll-behavior:none; background:#073a62; }
.cc-route-active .cl-header,.cc-route-active .cl-nav-mobile { display:none; }
.cc-route-active .cl-outlet { padding:0; min-height:100dvh; }
.cc-stage { position:relative; width:min(100vw,580px); height:100dvh; min-height:300px; margin:0 auto; overflow:hidden; isolation:isolate; color:#fff8df; font-family:'Trebuchet MS',Arial,sans-serif; background:#24b7ed; }
.cc-stage { background-image:url('../assets/cowry-catch/reference-lagoon.webp'); background-size:cover; background-position:center; }
.cc-canvas { display:block; width:100%; height:100%; touch-action:none; outline:none; }
.cc-canvas:focus-visible { outline:3px solid #ffe275; outline-offset:-3px; }
/* Reference composition uses the board width, not viewport height, for its HUD. */
.cc-stage { container-type:inline-size; }
.cc-hud { position:absolute; z-index:2; inset:0 0 auto; height:38cqw; pointer-events:none; padding-top:env(safe-area-inset-top); }
.cc-wordmark { position:absolute; top:calc(.2cqw + env(safe-area-inset-top)); left:28%; width:44%; height:15.1cqw; object-fit:contain; }
.cc-score-panel,.cc-hearts,.cc-pause,.cc-timer { background-repeat:no-repeat; background-size:100% 100%; }
.cc-score-panel { position:absolute; left:1.7%; top:calc(4.4cqw + env(safe-area-inset-top)); width:25.5%; height:10.1cqw; background-image:url('../assets/cowry-catch/ui-score.webp'); text-align:center; padding:1cqw 1.3cqw .5cqw 8.5cqw; box-sizing:border-box; }
.cc-score-panel small { display:block; font-size:2.8cqw; line-height:1.05; font-weight:1000; color:#fff; text-shadow:0 1px 1px #061a35; }
.cc-score-panel strong { display:block; color:#ffd841; font-size:5cqw; font-weight:1000; line-height:1.06; letter-spacing:-.12cqw; -webkit-text-stroke:.12cqw #8b4308; paint-order:stroke fill; text-shadow:0 .4cqw #78400a,0 .7cqw #05274b; }
.cc-hearts { position:absolute; top:calc(5cqw + env(safe-area-inset-top)); right:9.1%; display:flex; align-items:center; justify-content:center; gap:.2cqw; width:18.5%; height:8.8cqw; padding:.8cqw 1.2cqw; box-sizing:border-box; background-image:url('../assets/cowry-catch/ui-hearts.webp'); }
.cc-heart { width:5cqw; height:5.2cqw; object-fit:contain; transition:opacity .18s,filter .18s; }
.cc-heart-lost { opacity:.22; filter:grayscale(1); }
.cc-pause { position:absolute; top:calc(5.4cqw + env(safe-area-inset-top)); right:1.1%; width:7.7%; height:8.1cqw; border:0; padding:0; border-radius:2cqw; background-color:transparent; background-image:url('../assets/cowry-catch/ui-pause.webp'); cursor:pointer; pointer-events:auto; touch-action:manipulation; }
.cc-pause::after { content:''; position:absolute; inset:-8px; }
.cc-mode { position:absolute; top:calc(10.9cqw + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:max-content; max-width:61%; padding:.3cqw 2.1cqw .5cqw; border-radius:5cqw; border:.3cqw solid #45bce7; background:linear-gradient(#073967,#032747); box-shadow:0 .35cqw #064c79; font-size:2.6cqw; line-height:1.2; font-weight:1000; white-space:nowrap; }
.cc-mode::before { content:'◴'; color:#ffd54f; margin-right:.8cqw; font-size:3.4cqw; vertical-align:-.2cqw; }
.cc-timer { position:absolute; top:calc(15.6cqw + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:30.3%; height:7.2cqw; box-sizing:border-box; background-image:url('../assets/cowry-catch/ui-timer.webp'); padding:.5cqw 1.2cqw .4cqw 7.5cqw; font-size:4.8cqw; font-weight:1000; letter-spacing:.1cqw; line-height:1.18; color:#fff; text-align:center; text-shadow:0 .3cqw #03182c; }
.cc-combo { position:absolute; top:calc(24cqw + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:39%; height:12cqw; display:flex; align-items:center; justify-content:center; gap:1cqw; box-sizing:border-box; padding:0 3cqw 1cqw; white-space:nowrap; background:url('../assets/cowry-catch/ui-combo.webp') center/100% 100% no-repeat; visibility:hidden; }
.cc-combo-active { visibility:visible; animation:cc-combo-arrive .2s ease-out; }
.cc-combo-multiplier { color:#ffd333; font-size:8.3cqw; line-height:1; font-weight:1000; letter-spacing:-.65cqw; transform:rotate(-5deg); -webkit-text-stroke:.6cqw #974000; paint-order:stroke fill; text-shadow:0 .4cqw #fef391,0 .8cqw #5d2807; }
.cc-combo-label { color:#fff8d8; font-size:4.7cqw; font-weight:1000; -webkit-text-stroke:.65cqw #60310f; paint-order:stroke fill; text-shadow:0 .4cqw #4d2609; }
@keyframes cc-combo-arrive { from { opacity:0; transform:translateX(-50%) scale(.85); } to { opacity:1; transform:translateX(-50%) scale(1); } }
.cc-overlay { position:absolute; z-index:4; inset:0; display:flex; align-items:center; justify-content:center; padding:14px; background:linear-gradient(#0c3a626b,#043b5660); backdrop-filter:blur(2px); overflow-y:auto; }
.cc-overlay[hidden],.cc-stage [hidden] { display:none!important; }
.cc-panel { width:min(100%,370px); max-height:calc(100dvh - 30px); overflow-y:auto; border-radius:28px; padding:23px 22px; background:linear-gradient(150deg,#0d608c,#073455 72%); border:2px solid #b4e9fa; box-shadow:inset 0 0 0 4px #105278,0 12px 35px #002e636b; text-align:center; }
.cc-eyebrow { color:#f9d775; font-size:10px; font-weight:900; letter-spacing:1.2px; }
.cc-panel h1,.cc-panel h2 { font-size:29px; line-height:1.05; margin:12px 0; color:#ffdd62; letter-spacing:-1px; text-shadow:0 2px #76400a; }
.cc-panel p { color:#e6f4fa; font-size:14px; line-height:1.45; margin:11px 0; }
.cc-panel label { display:block; text-align:left; font-size:11px; color:#d0e9fa; margin-top:13px; font-weight:800; }
.cc-panel select,.cc-panel input { display:block; width:100%; box-sizing:border-box; min-height:42px; margin-top:5px; border:1px solid #82c5db; border-radius:12px; padding:8px 12px; color:#fff; background:#062b48; font:700 15px 'Trebuchet MS',sans-serif; }
.cc-panel select { appearance:auto; }
.cc-action { width:100%; min-height:48px; border:2px solid #fff1ad; border-radius:16px; background:linear-gradient(#ffe485,#ffc52f); color:#613910; box-shadow:inset 0 1px #fff9cd,0 4px #b67812; font:1000 17px 'Trebuchet MS',sans-serif; margin:8px 0 6px; cursor:pointer; touch-action:manipulation; }
.cc-action:hover { filter:brightness(1.05); }
.cc-action:active { transform:translateY(2px); box-shadow:0 1px #b67812; }
.cc-action:focus-visible,.cc-stage button:focus-visible { outline:3px solid white; outline-offset:2px; }
.cc-action-secondary { background:#073651; color:#cfedff; border:1px solid #6fa9c9; box-shadow:none; font-size:14px; min-height:40px; }
.cc-presets { display:flex; gap:7px; }
.cc-presets .cc-action { min-height:32px; font-size:12px; margin-top:8px; border-width:1px; border-radius:9px; box-shadow:none; }
.cc-values { display:flex; justify-content:center; gap:24px; margin:13px 0 4px; }
.cc-values span { display:flex; align-items:center; gap:3px; color:#ffdf60; font-size:15px; }
.cc-values img { width:23px; height:32px; object-fit:contain; }
.cc-panel .cc-small { font-size:11px; color:#bde5ef; }
.cc-message { color:#ffe08c!important; font-size:12px!important; min-height:0; }
.cc-message:empty { display:none; }
.cc-sound,.cc-home { position:absolute; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:3; border:1px solid #a6dfeb; border-radius:15px; min-height:38px; padding:5px 12px; background:#063b5de0; color:#fff3cc; font:800 12px 'Trebuchet MS',sans-serif; cursor:pointer; }
.cc-sound { left:10px; }.cc-home { right:10px; }
.cc-practice-tag { position:absolute; bottom:calc(16px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); white-space:nowrap; color:#074568; font-size:8px; font-weight:1000; }
.cc-hint { position:absolute; bottom:calc(68px + env(safe-area-inset-bottom)); left:0; right:0; text-align:center; pointer-events:none; font-size:11px; font-weight:900; color:#15445c; text-shadow:0 1px #d2f7f5; }
.cc-connection { position:absolute; top:45%; left:10%; width:80%; background:#073758ed; border:1px solid #b6edff; border-radius:20px; padding:14px; z-index:6; text-align:center; color:#fff; }
.cc-final-score { display:block; color:#ffdb51; font-size:61px; font-weight:1000; text-shadow:0 3px #7d4517; }
.cc-result-grid { display:grid; grid-template-columns:1fr auto; gap:8px; text-align:left; padding:15px; background:#042f49; border-radius:14px; font-size:14px; }
.cc-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; background:#07517e; color:#fff; }
@media (max-width:350px) { .cc-panel { padding:16px; } .cc-panel h1 { font-size:25px; } .cc-panel p { font-size:12px; } .cc-practice-tag { display:none; } }
@media (max-height:600px) { .cc-panel { padding:14px 20px; } .cc-values { display:none; } .cc-panel h1 { font-size:24px; } .cc-panel .cc-small { font-size:10px; } .cc-panel label { margin-top:5px; } }
@media (prefers-reduced-motion:reduce) { .cc-heart { transition:none; } .cc-combo-active { animation:none; } .cc-action:active { transform:none; } }

@media (orientation:landscape) { .cc-stage { width:min(100vw,calc(100dvh * .7)); } }

/* Pause/menu tools stay available without adding controls to the reference playfield. */
.cc-hint,.cc-practice-tag { display:none; }
.cc-stage > .cc-sound,.cc-stage > .cc-home { display:none; }
.cc-practice-tools { display:flex; justify-content:center; gap:10px; margin-top:12px; }
.cc-practice-tools .cc-sound,.cc-practice-tools .cc-home { position:static; font-size:11px; min-height:36px; }

/* Owner cover review: the existing lagoon, floating wordmark and one Play CTA. */
.cc-cover-active > .cc-hud,.cc-cover-active > .cc-canvas { visibility:hidden; }
.cc-cover-active > .cc-overlay { padding:0; background:none; backdrop-filter:none; overflow:hidden; }
.cc-cover { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.cc-cover-content { width:100%; display:flex; flex-direction:column; align-items:center; gap:36px; transform:translateY(-7vh); }
.cc-cover-logo { display:block; width:96%; height:auto; object-fit:contain; filter:drop-shadow(0 7px 7px #06528055); animation:cc-cover-float 4s ease-in-out infinite; user-select:none; pointer-events:none; }
.cc-cover-play { position:relative; display:flex; justify-content:center; align-items:center; gap:18px; width:78%; min-height:80px; padding:12px 22px; border:3px solid #fff5b4; border-radius:100px; background:linear-gradient(#fff993 0%,#ffdf36 18%,#ffc400 51%,#ffb000 82%,#ffce22); color:#633006; box-shadow:inset 0 3px 2px #fffce5,inset 0 -5px 1px #e69b04,0 5px 0 #9b560b,0 8px 14px #5c400d55,0 0 22px #fff27588; font:900 clamp(29px,10cqw,48px)/1 'Arial Black',Arial,sans-serif; letter-spacing:1px; text-shadow:0 1px #fff59a; cursor:pointer; touch-action:manipulation; animation:cc-cover-glow 3s ease-in-out infinite; }
.cc-cover-play::before { content:''; position:absolute; top:5px; left:10%; right:10%; height:17%; border-radius:50%; background:linear-gradient(#ffffffa8,#ffffff00); pointer-events:none; }
.cc-cover-play-icon { width:0; height:0; border-top:17px solid transparent; border-bottom:17px solid transparent; border-left:26px solid #633006; filter:drop-shadow(0 1px #fff59a); }
.cc-cover-play:active { transform:translateY(3px); }
@keyframes cc-cover-float { 0%,100% { transform:translateY(0) rotate(-.6deg); } 50% { transform:translateY(-10px) rotate(.6deg); } }
@keyframes cc-cover-glow { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.08); } }
@media (max-height:500px) { .cc-cover-content { gap:20px; transform:translateY(-2vh); } .cc-cover-play { min-height:58px; font-size:29px; } }
@media (prefers-reduced-motion:reduce) { .cc-cover-logo,.cc-cover-play { animation:none; } }

.cc-startup{position:absolute;inset:0;z-index:4}