/* Catch Your Wave — styles. Everything is scoped under .cyw so it cannot leak into the page. */
.cyw {
  --cyw-navy: #033a66; --cyw-deep: #126782; --cyw-teal: #219ebc; --cyw-sky: #8ecae5;
  --cyw-sun: #ffb703; --cyw-orange: #fb8400; --cyw-pink: #ff007c; --cyw-blush: #ff92cd;
  --cyw-cream: #fff7e0;
  --cyw-green: #17b85a; --cyw-red: #e53939; /* gameplay colors, intentionally outside the brand palette */
  --cyw-display: "Titan One", "Poppins", system-ui, sans-serif;
  margin: 0 auto; text-align: left; font-family: Poppins, system-ui, sans-serif;
}
.cyw *, .cyw *::before, .cyw *::after { box-sizing: border-box; }
.cyw [hidden] { display: none !important; }

.cyw-stage {
  position: relative; aspect-ratio: 3 / 4; margin: 0 auto;
  width: min(100%, 560px, max(300px, calc((100vh - 130px) * 0.75)));
  border-radius: 28px; overflow: hidden; background: #0a4a78;
  border: 6px solid var(--cyw-cream);
  box-shadow: 0 0 0 4px var(--cyw-pink), 0 26px 60px rgba(0, 0, 0, .45);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.cyw-stage:focus-visible { outline: 4px solid var(--cyw-sun); outline-offset: 8px; }
.cyw-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

/* HUD */
.cyw-hud { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.cyw-pill {
  position: relative; background: rgba(255, 247, 224, .94); color: var(--cyw-navy); border-radius: 999px; padding: 6px 14px 8px;
  font-family: var(--cyw-display); font-size: 16px; line-height: 1.1; box-shadow: 0 3px 0 rgba(3, 58, 102, .35); white-space: nowrap;
}
.cyw-pill small { font: 600 11px/1 Poppins, sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-right: 6px; }
.cyw-time { margin-left: auto; overflow: hidden; }
.cyw-time::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--cyw-pink); transform-origin: left; transform: scaleX(var(--cyw-t, 1)); }
.cyw-pausebtn {
  pointer-events: auto; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--cyw-cream); border: 3px solid var(--cyw-teal); color: var(--cyw-navy); box-shadow: 0 3px 0 rgba(3, 58, 102, .35);
}
.cyw-pausebtn svg { width: 16px; height: 16px; }

.cyw-toast {
  position: absolute; z-index: 3; left: 50%; top: 14%; transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  background: var(--cyw-red); color: #fff; font-family: var(--cyw-display); font-size: 17px; white-space: nowrap;
  padding: 8px 18px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 5px 0 rgba(120, 0, 0, .35); transition: opacity .2s, transform .2s;
}
.cyw-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* On-screen steering buttons (touch / small screens) */
.cyw-pad { display: none; position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; justify-content: space-between; pointer-events: none; }
.cyw-padbtn {
  pointer-events: auto; touch-action: none; width: 68px; height: 68px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(255, 247, 224, .88); border: 3px solid var(--cyw-teal); color: var(--cyw-navy); box-shadow: 0 4px 0 rgba(3, 58, 102, .4);
}
.cyw-padbtn svg { width: 26px; height: 26px; }
.cyw-padbtn.is-down { transform: translateY(3px); box-shadow: 0 1px 0 rgba(3, 58, 102, .4); background: var(--cyw-sun); }
@media (hover: none), (pointer: coarse), (max-width: 760px) { .cyw-pad:not([hidden]) { display: flex; } }

/* Panels (start / pause / end) */
.cyw-panel { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 14px; background: linear-gradient(180deg, rgba(3, 58, 102, .3), rgba(3, 58, 102, .8)); }
.cyw-card {
  width: 100%; max-width: 420px; padding: 20px 18px 22px; text-align: center; color: var(--cyw-navy);
  background-color: var(--cyw-cream); background-image: radial-gradient(rgba(3, 58, 102, .08) 1px, transparent 1.5px); background-size: 7px 7px;
  border: 3px solid var(--cyw-teal); border-radius: 22px; box-shadow: 0 8px 0 var(--cyw-blush), 0 20px 40px rgba(0, 0, 0, .4);
  max-height: 100%; overflow: auto;
}
.cyw-title {
  margin: 0 0 8px; font-family: var(--cyw-display); font-weight: 400; font-size: clamp(28px, 8.5vw, 44px); line-height: 1; text-transform: uppercase; letter-spacing: .02em;
  color: var(--cyw-pink); text-shadow: 0 3px 0 var(--cyw-sun), 0 6px 0 rgba(3, 58, 102, .25);
}
.cyw-tag { margin: 0 0 14px; font-size: 15px; line-height: 1.4; font-weight: 500; }
.cyw-legend { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; text-align: left; }
.cyw-legend li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: #fff; border: 2px solid rgba(33, 158, 188, .35); font-size: 14px; font-weight: 600; line-height: 1.25; }
.cyw-legend svg { flex: none; width: 38px; height: 38px; }
.cyw-legend em { display: block; font-style: normal; font-weight: 500; font-size: 12.5px; opacity: .8; }
.cyw-controls { margin: 0 0 14px; font-size: 13px; opacity: .85; }
.cyw kbd { font: 600 12px Poppins, sans-serif; padding: 1px 6px; border-radius: 5px; background: #fff; border: 1.5px solid var(--cyw-teal); }

.cyw-btn {
  display: inline-block; margin: 4px 4px 0; padding: 12px 26px 13px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font-family: var(--cyw-display); font-size: 18px; line-height: 1.1; color: #3a1e00;
  background: linear-gradient(120deg, var(--cyw-sun), var(--cyw-orange)); box-shadow: 0 5px 0 #b55a00, 0 10px 18px rgba(0, 0, 0, .25); transition: transform .12s;
}
.cyw-btn:hover { transform: translateY(-2px); }
.cyw-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b55a00; }
.cyw-btn.alt { color: var(--cyw-navy); background: #fff; border: 3px solid var(--cyw-teal); padding: 9px 22px 10px; box-shadow: 0 5px 0 rgba(33, 158, 188, .6); }
.cyw-btn:focus-visible, .cyw-padbtn:focus-visible, .cyw-pausebtn:focus-visible { outline: 4px solid var(--cyw-pink); outline-offset: 3px; }

.cyw-score { margin: 4px 0 2px; font-family: var(--cyw-display); font-size: 62px; line-height: 1; color: var(--cyw-orange); text-shadow: 0 3px 0 var(--cyw-navy); }
.cyw-score small { display: block; font: 600 12px Poppins, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--cyw-navy); text-shadow: none; margin-top: 4px; }
.cyw-got { margin: 6px 0 12px; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cyw-got svg { width: 26px; height: 26px; }
.cyw-msg { margin: 0 0 14px; padding-top: 12px; border-top: 3px dotted var(--cyw-sky); }
.cyw-msg strong { display: block; font-family: var(--cyw-display); font-weight: 400; font-size: 19px; color: var(--cyw-deep); margin-bottom: 4px; }
.cyw-msg span { font-size: 14px; line-height: 1.4; }

.cyw-help { margin: 16px auto 0; max-width: 560px; text-align: center; font-size: .9rem; opacity: .85; }

@media (max-width: 420px) {
  .cyw-card { padding: 14px 12px 16px; border-radius: 18px; }
  .cyw-legend { gap: 6px; margin-bottom: 8px; }
  .cyw-legend li { padding: 6px 10px; font-size: 13px; }
  .cyw-legend svg { width: 32px; height: 32px; }
  .cyw-tag { font-size: 13.5px; margin-bottom: 10px; }
  .cyw-controls { display: none; }
  .cyw-score { font-size: 50px; }
  .cyw-btn { font-size: 16px; padding: 10px 20px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cyw-btn, .cyw-toast, .cyw-padbtn { transition: none; }
}

/* ===== Modern theme (data-theme="modern"): glass panels and the site's sun / orange / pink / teal gradients ===== */
.cyw--modern .cyw-stage {
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 26px; background: #033a66;
  box-shadow: 0 30px 80px rgba(2, 18, 46, .6), 0 0 0 1px rgba(2, 18, 46, .35);
}
.cyw--modern .cyw-stage:focus-visible { outline: 3px solid var(--cyw-sun); outline-offset: 6px; }
.cyw--modern .cyw-panel { background: linear-gradient(180deg, rgba(3, 40, 80, .18), rgba(3, 26, 58, .82)); }
.cyw--modern .cyw-card {
  color: #fff; background: rgba(255, 255, 255, .1); background-image: none; border: 1px solid rgba(255, 255, 255, .3); border-radius: 24px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.cyw--modern .cyw-title {
  color: transparent; text-shadow: none; background: linear-gradient(95deg, #ffd07a 0%, #ffb067 55%, #ff9fb8 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .3));
}
.cyw--modern .cyw-tag { color: rgba(255, 255, 255, .92); }
.cyw--modern .cyw-legend li { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.cyw--modern .cyw-legend em { opacity: .8; }
.cyw--modern .cyw-controls { color: rgba(255, 255, 255, .85); }
.cyw--modern kbd { color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .38); }
.cyw--modern .cyw-btn {
  color: #3a1e00; background-image: linear-gradient(120deg, #ffc24d 0%, #ffa24f 62%, #ff95ad 100%);
  box-shadow: 0 8px 22px rgba(255, 162, 79, .28); transition: transform .15s, box-shadow .15s, filter .15s;
}
.cyw--modern .cyw-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 28px rgba(255, 162, 79, .36); }
.cyw--modern .cyw-btn:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(255, 162, 79, .3); }
.cyw--modern .cyw-btn.alt { color: #fff; background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .55); padding: 10px 24px 11px; box-shadow: none; animation: none; }
.cyw--modern .cyw-btn.alt:hover { background: rgba(255, 255, 255, .22); animation: none; }
.cyw--modern .cyw-btn:focus-visible, .cyw--modern .cyw-padbtn:focus-visible, .cyw--modern .cyw-pausebtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.cyw--modern .cyw-pill, .cyw--modern .cyw-pausebtn, .cyw--modern .cyw-padbtn {
  color: #fff; background: rgba(3, 30, 62, .55); border: 1px solid rgba(255, 255, 255, .28); box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cyw--modern .cyw-pill small { opacity: .75; }
.cyw--modern .cyw-time::after { background: linear-gradient(90deg, #ffc24d, #ff9fb8); }
.cyw--modern .cyw-padbtn { width: 64px; height: 64px; }
.cyw--modern .cyw-padbtn.is-down { background: linear-gradient(135deg, #ffc24d, #ffa24f); color: #3a1e00; transform: scale(.94); box-shadow: none; }
.cyw--modern .cyw-toast { background: linear-gradient(135deg, #ff5a5a, #d62d2d); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 10px 24px rgba(214, 45, 45, .45); }

.cyw--modern .cyw-score {
  color: transparent; text-shadow: none; background: linear-gradient(135deg, #a9d7ea, #ffd07a 55%, #ffb3d1); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .28));
}
.cyw--modern .cyw-score small { color: rgba(255, 255, 255, .85); -webkit-text-fill-color: rgba(255, 255, 255, .85); }
.cyw--modern .cyw-got { color: #fff; }
.cyw--modern .cyw-msg { border-top: 1px solid rgba(255, 255, 255, .28); }
.cyw--modern .cyw-msg strong { color: #8ecae5; }
.cyw--modern .cyw-msg span { color: rgba(255, 255, 255, .88); }

.cyw-logo { display: block; width: min(150px, 46%); height: auto; margin: 0 auto 10px; }
.cyw-logo[hidden] { display: none; }

/* ===== Glass theme (data-theme="glass"): real photography under frosted glass, matching the V3 site ===== */
.cyw--glass .cyw-stage { border: 1px solid rgba(255, 255, 255, .38); border-radius: 30px; box-shadow: 0 34px 90px rgba(2, 18, 46, .65), inset 0 1px 0 rgba(255, 255, 255, .35); }
.cyw--glass .cyw-panel { background: linear-gradient(180deg, rgba(3, 40, 80, .12), rgba(3, 26, 58, .78)); }
.cyw--glass .cyw-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .13));
  border: 1px solid rgba(255, 255, 255, .38); border-radius: 28px; backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.cyw--glass .cyw-title { font-size: clamp(30px, 9vw, 48px); letter-spacing: .02em; }
.cyw--glass .cyw-legend li { background: rgba(255, 255, 255, .1); }
.cyw--glass .cyw-pill, .cyw--glass .cyw-pausebtn, .cyw--glass .cyw-padbtn { background: rgba(3, 30, 62, .5); border-color: rgba(255, 255, 255, .34); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); }