/* Owner-approved platform presentation, November 6, 2026. */
.cl-platform-ui {
  --cl-gold: #ffd744;
  --cl-navy: #000c22;
  --cl-text-muted: #c4d8f5;
  --cl-hairline: #16558e;
  --cl-surface-1-solid: #001029;
  --cl-surface-2: #001c42;
  --cl-surface-3: #01265d;
  --cl-gold-gradient: linear-gradient(#fff5a1, #f2c745 46%, #fbaa03);
  background: radial-gradient(ellipse at 50% 0, #014ab933, transparent 75%), #000c22;
}
.cl-platform-ui .cl-page {
  max-width: 1040px;
  padding: 16px;
}
.cl-platform-ui .cl-header {
  padding: 9px 14px;
  gap: 9px;
  background: #001029f7;
  border-color: #134777;
}
.cl-platform-ui .cl-brand { gap: 8px; margin-right: auto; }
.cl-platform-ui .cl-brand-mark {
  width: 25px;
  height: 32px;
  border-radius: 0;
  background: url('/docs/assets/brand/cowry-league-logo-primary-gold-navy.png') 50% 33.1% / 86px auto;
  mask-image: radial-gradient(ellipse 51% 55%, #000 80%, transparent 100%);
  box-shadow: none;
}
.cl-platform-ui .cl-brand-text strong {
  font-size: 18px;
  letter-spacing: -.04em;
  color: #ffdc60;
  background: linear-gradient(#fff2a2 9%, #ffd744 48%, #f2a509 93%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cl-platform-ui .cl-brand-text small { display: none; }
.cl-platform-icon { display: inline-flex; width: 23px; height: 23px; flex: none; }
.cl-platform-icon svg { width: 100%; height: 100%; }
.cl-platform-ui .cl-btn { border-radius: 11px; min-height: 44px; }
.cl-platform-ui .cl-btn-primary {
  border: 1px solid #ffe979;
  background: var(--cl-gold-gradient);
  color: #201200;
  box-shadow: inset 0 1px 2px #fff, 0 0 11px #ffb42348;
}
.cl-platform-ui .cl-btn-secondary {
  background: linear-gradient(#06346b, #001641);
  border-color: #4388c6;
}
.cl-platform-ui .cl-btn:disabled { opacity: .5; box-shadow: none; cursor: default; }
.cl-platform-ui .cl-card {
  position: relative;
  background: linear-gradient(145deg, #01265d, #001c42 36%, #001029 88%);
  border-color: #1a5791;
  border-radius: 15px;
  padding: 16px;
  box-shadow: inset 0 1px 8px #218fff30, 0 4px 12px #0004;
}
.cl-platform-ui h1 { font-size: clamp(25px, 6vw, 34px); letter-spacing: -.04em; }
.cl-platform-ui h2 { font-size: 19px; }
.cl-platform-ui h3 { font-size: 16px; }
.cl-platform-ui .cl-section { margin-bottom: 16px; }
.cl-platform-ui .cl-heading { margin-bottom: 10px; }
.cl-platform-ui .cl-platform-home { display: grid; gap: 14px; }
.cl-platform-ui .cl-actions { gap: 9px; }
.cl-platform-ui .cl-platform-home > .cl-actions > * { flex: 1; }
.cl-platform-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 132px;
  display: flex;
  align-items: center;
  border: 1px solid #2378cf;
  border-radius: 17px;
  padding: 17px;
  background: radial-gradient(ellipse at 83% 73%, #014ab9, #01265d 44%, #001029 78%);
  box-shadow: inset 0 0 20px #148eff29;
}
.cl-platform-hero-copy { width: 67%; position: relative; z-index: 1; }
.cl-platform-hero-copy p { margin: 8px 0 0; color: #c4d8f5; font-size: 13px; }
.cl-platform-art { display: block; object-fit: contain; pointer-events: none; }
.cl-platform-hero > .cl-platform-art {
  position: absolute;
  width: 40%;
  height: 100%;
  right: 0;
  bottom: 0;
  filter: drop-shadow(0 0 6px #ffc53166);
}
.cl-platform-ui .cl-game-catalogue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.cl-platform-ui .cl-platform-game-card,
.cl-platform-ui .cl-platform-performance-card { padding: 0; overflow: hidden; }
.cl-game-art {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(78px, 22vw, 120px);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.cl-game-art > img { position: absolute; width: 92%; height: 92%; object-fit: contain; }
.cl-game-art-rush { background-image: url('../assets/platform-ui/rush-cover.jpg'); background-position: center 30%; }
.cl-game-art-catch { background-image: url('../assets/cowry-catch/reference-lagoon.webp'); background-position: center 24%; }
.cl-game-art-fly { background-image: url('../assets/cowry-fly/phaser-background.webp'); }
.cl-game-art-pop { background-image: url('../assets/cowry-pop/cover-background.webp'); background-position: center 38%; }
.cl-fly-wordmark { display: block; position: relative; width: 78%; height: 100%; overflow: hidden; }
.cl-fly-wordmark img { position: absolute; width: 200%; height: auto; top: 0; left: 0; }
.cl-game-art-pop > img { width: 70%; }
.cl-game-card-body { padding: 10px; display: grid; gap: 6px; }
.cl-game-card-body .cl-heading { margin: 0; }
.cl-game-card-body h2 { font-size: 16px; }
.cl-game-status { font-size: 11px; color: #c4d8f5; }
.cl-game-card-body .cl-btn { width: 100%; padding: 7px 6px; font-size: 12px; }
.cl-tournament-card > .cl-game-art { width: 90px; height: 49px; border-radius: 8px; margin-bottom: 10px; }
.cl-platform-performance-card > .cl-heading,
.cl-platform-performance-card > p { margin: 10px; }
.cl-platform-performance-card > p { font-size: 12px; }
.cl-platform-quick-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.cl-platform-quick-links .cl-btn { display: flex; flex-direction: column; gap: 7px; padding: 11px 4px; font-size: 11px; }
.cl-platform-quick-links .cl-platform-icon { color: #ffdc60; }
.cl-platform-ui .cl-platform-featured { padding-right: 36%; border-color: #d3a646; }
.cl-platform-featured > .cl-platform-art { width: 39%; height: 100%; position: absolute; right: 0; bottom: 0; }
.cl-platform-featured h3 { color: #ffdd66; }
.cl-platform-progress { display: grid; gap: 9px; }
.cl-platform-progress .cl-empty { padding: 12px; }
.cl-platform-level { color: #ffdc60; font-size: 20px; }
.cl-platform-progress progress { width: 100%; height: 10px; appearance: none; border: none; border-radius: 10px; overflow: hidden; }
.cl-platform-progress progress::-webkit-progress-bar { background: #143766; }
.cl-platform-progress progress::-webkit-progress-value { background: var(--cl-gold-gradient); border-radius: 10px; }
.cl-platform-progress progress::-moz-progress-bar { background: var(--cl-gold-gradient); border-radius: 10px; }
.cl-platform-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.cl-platform-badge { display: grid; justify-items: center; gap: 5px; max-width: 75px; font-size: 11px; text-align: center; }
.cl-platform-badge .cl-platform-icon { width: 43px; height: 47px; padding: 10px; color: #fff2b4; background: linear-gradient(145deg, #ffdf68, #9a5605); clip-path: polygon(50% 0, 95% 24%, 95% 76%, 50% 100%, 5% 76%, 5% 24%); }
.cl-platform-badge[data-tier='mythic'] .cl-platform-icon { background: linear-gradient(145deg,#ea86ff,#6420cc); }
.cl-platform-badge[data-tier='platinum'] .cl-platform-icon { background: linear-gradient(145deg,#8af7ff,#0563b9); }
.cl-platform-profile-banner { position: relative; isolation: isolate; overflow: hidden; border-radius: 17px; }
.cl-platform-profile-banner > .cl-platform-art { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.cl-platform-profile-banner .cl-platform-hero { background: linear-gradient(transparent, #001029e8); padding-top: 50px; }
.cl-platform-profile-banner .cl-platform-hero-copy { width: 100%; }
.cl-platform-profile-banner .cl-platform-hero > img { display: none; }
.cl-wallet-coins { width: 82px; height: 64px; float: right; }
.cl-panel-art { width: 54px; height: 50px; float: right; }
.cl-platform-ui .cl-auth { max-width: 510px; padding-top: 30px; }
.cl-platform-ui .cl-auth .cl-card { text-align: center; }
.cl-platform-ui .cl-auth-entry {
  display: grid;
  gap: 16px;
  max-width: 510px;
  padding: 32px 16px;
}
.cl-auth-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 21px;
  padding: 29px 20px 21px;
  border: 1px solid #2a79ca;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 13%, #014ab9 0%, #01265d 33%, #001029 72%);
  box-shadow: inset 0 1px 16px #218fff48, 0 8px 28px #0006;
  text-align: center;
}
.cl-auth-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 156px;
  background: url("../assets/platform-ui/skyline.svg") center bottom / cover;
  opacity: .46;
  mask-image: linear-gradient(#000, transparent);
}
.cl-auth-emblem {
  display: grid;
  place-items: center;
  width: 75px;
  height: 75px;
  border: 1px solid #ffd96c;
  border-radius: 50%;
  background: #001029;
  box-shadow: 0 0 22px #ffba2b55, inset 0 0 14px #ffd74430;
}
.cl-auth-emblem .cl-brand-mark { transform: scale(1.7); }
.cl-auth-copy { display: grid; gap: 7px; }
.cl-auth-copy > * { margin: 0; }
.cl-auth-copy h1 { font-size: clamp(24px, 7vw, 31px); font-weight: 760; line-height: 1.15; letter-spacing: -.045em; }
.cl-auth-copy > p:last-child, .cl-auth-method > small, .cl-auth-switch { color: #c4d8f5; }
.cl-auth-copy > p:last-child, .cl-auth-switch, .cl-auth-back { font-size: 13px; }
.cl-auth-eyebrow { color: #ffd95a; font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.cl-auth-method, .cl-auth-provider-picker[open], .cl-auth-entry .cl-provider-stack { display: grid; gap: 9px; width: 100%; }
.cl-auth-provider-picker > summary.cl-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 45px;
  border-radius: 9px;
  font-size: 14px;
  list-style: none;
}
.cl-auth-provider-picker > summary::-webkit-details-marker { display: none; }
.cl-auth-feedback:empty { display: none; }
.cl-auth-switch { width: 100%; margin: 0; border-top: 1px solid #234979; padding-top: 14px; }
.cl-auth-switch a { color: #ffdc64; font-weight: 700; padding: 4px 5px; }
.cl-auth-back { justify-self: center; color: #b6dcff; padding: 8px; }
.cl-platform-ui .cl-nav-mobile[hidden] { display: none; }
.cl-platform-ui .cl-nav-mobile { grid-template-columns: repeat(5, minmax(0, 1fr)); background: #001029f7; border-color: #14538f; }
.cl-platform-ui .cl-nav-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 60px; font-size: 10px; color: #c4d8f5; }
.cl-platform-ui .cl-nav-tab[aria-current='page'] { color: #ffdc60; background: radial-gradient(ellipse at bottom, #8b5d1655, transparent 80%); }
.cl-platform-menu { position: relative; }
.cl-platform-menu summary { cursor: pointer; display: flex; list-style: none; padding: 10px; }
.cl-platform-menu summary::-webkit-details-marker { display: none; }
.cl-platform-menu-panel { position: absolute; left: 0; top: 100%; width: 205px; display: grid; gap: 3px; padding: 8px; background: #001c42; border: 1px solid #28649a; border-radius: 12px; box-shadow: 0 10px 30px #0007; }
.cl-platform-menu-panel button { text-align: left; }
.cl-platform-ui .cl-icon-btn { flex: none; width: 36px; height: 36px; min-height: 36px; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .cl-platform-hero > img, .cl-platform-featured > img { animation: cl-platform-glow 5s ease-in-out infinite; }
  .cl-platform-badge .cl-platform-icon { animation: cl-platform-badge-float 4.8s ease-in-out infinite; }
}
@keyframes cl-platform-glow { 0%,100% { filter: drop-shadow(0 0 4px #ffe25f44); } 50% { filter: drop-shadow(0 0 10px #ffc53c99); } }
@keyframes cl-platform-badge-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (min-width: 992px) {
  .cl-platform-ui .cl-page { padding: 24px; }
  .cl-platform-ui .cl-game-catalogue { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-platform-ui .cl-nav-desktop { display: flex; }
  .cl-platform-hero { min-height: 165px; }
  .cl-platform-hero-copy { max-width: 62%; }
  .cl-platform-hero > .cl-platform-art { width: 29%; }
}
@media (max-width: 360px) {
  .cl-platform-ui .cl-page { padding: 11px; }
  .cl-platform-ui .cl-brand-text strong { font-size: 16px; }
  .cl-platform-ui .cl-header { gap: 4px; padding-inline: 8px; }
  .cl-platform-hero { padding: 13px; }
  .cl-game-card-body h2 { font-size: 14px; }
}

/* Profile composition follows the approved platform board, independent of game palettes. */
.cl-platform-ui { color: #f3f8ff; font-family: system-ui, sans-serif; }
.cl-platform-ui button,.cl-platform-ui input { font-family: inherit; }
.cl-platform-ui .cl-brand-text strong { font-family: inherit; font-weight: 850; }
.cl-platform-ui .cl-btn { border-radius: 22px; font-weight: 750; }
.cl-platform-ui .cl-profile-overview { display:grid; gap:14px; }
.cl-profile-identity { position:relative; isolation:isolate; overflow:hidden; min-height:177px; border:1px solid #3389d9; border-radius:17px; background:#001029; box-shadow:inset 0 1px 12px #1b83ff48; }
.cl-profile-identity > img { position:absolute; width:100%; height:128px; top:0; object-fit:cover; z-index:-1; }
.cl-profile-identity-content { display:flex; align-items:center; gap:13px; padding:38px 16px 18px; background:linear-gradient(transparent,#001029e8); }
.cl-profile-avatar { display:grid; place-items:center; width:72px; height:72px; flex:none; border-radius:50%; border:2px solid #e2c255; color:#ffda66; background:radial-gradient(circle at 40% 25%,#1359a5,#001641); box-shadow:0 0 15px #ffcb3b6b; }
.cl-profile-avatar .cl-platform-icon { width:38px; height:38px; }
.cl-profile-identity-copy { flex:1; min-width:0; display:grid; gap:4px; }
.cl-profile-identity-copy h1 { font-size:25px; overflow-wrap:anywhere; margin:0; }
.cl-profile-identity-copy .cl-heading { margin:0; }
.cl-profile-identity-copy small { font-size:11px; color:#c4d8f5; }
.cl-profile-identity-copy progress { width:100%; height:9px; accent-color:#12aaff; }
.cl-profile-tabs { display:flex; gap:4px; border:1px solid #214b79; border-radius:25px; background:#001641; }
.cl-profile-tabs .cl-btn { padding:8px 5px; flex:1; min-width:0; font-size:11px; min-height:42px; background:transparent; border-color:transparent; }
.cl-profile-tabs [aria-current] { background:linear-gradient(#168bff,#0346ad); border-color:#52aaff; }
.cl-profile-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; text-align:center; }
.cl-profile-stats > div { min-width:0; display:grid; justify-items:center; gap:6px; padding:3px; border-right:1px solid #25476d; }
.cl-profile-stats > div:last-child { border:0; }
.cl-profile-stats .cl-platform-icon { color:#ffd744; filter:drop-shadow(0 0 6px #ffb42370); }
.cl-profile-stats strong { font-size:15px; overflow-wrap:anywhere; }
.cl-profile-stats small { font-size:10px; color:#c4d8f5; }
.cl-platform-ui .cl-profile-performance { gap:8px; }
.cl-profile-performance h3 { font-size:13px; margin:6px 8px; }
.cl-profile-performance strong,.cl-profile-performance small { display:block; margin:5px 8px; font-size:11px; }
.cl-profile-overview > section { scroll-margin-top:80px; }
.cl-platform-account-settings { margin-top:16px; border:1px solid #235282; padding:12px; border-radius:15px; }
.cl-platform-account-settings > summary { cursor:pointer; color:#ffdc60; font-weight:700; padding:4px; }
.cl-platform-account-settings[open] > summary { margin-bottom:15px; }
@media(min-width:600px) { .cl-platform-ui .cl-profile-performance { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.cl-platform-ui .cl-profile-performance { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cl-profile-performance .cl-game-art { height:60px; }
.cl-profile-performance h3 { font-size:11px; margin:6px; }
.cl-profile-performance strong,.cl-profile-performance small { margin:5px 6px; font-size:10px; }
.cl-profile-performance .cl-platform-performance-card { min-width:0; }
@media(max-width:360px) { .cl-profile-performance h3 { font-size:10px; } .cl-profile-performance small { font-size:9px; } }
/* Exact approved platform gradients; no game-specific accent colors. */
.cl-platform-ui { background:radial-gradient(ellipse at 50% 12%,#014ab9 0%,#001029 58%,#000c22 100%) fixed; }
.cl-platform-ui .cl-header { background:linear-gradient(#001029,#001c42); }
.cl-profile-tabs [aria-current] { background:linear-gradient(#138eff,#014ab9); border-color:#64c6ff; }
.cl-profile-identity-copy progress { appearance:none; border:0; border-radius:9px; overflow:hidden; background:#12386a; }
.cl-profile-identity-copy progress::-webkit-progress-bar { background:#12386a; }
.cl-profile-identity-copy progress::-webkit-progress-value { background:linear-gradient(90deg,#0067ed,#1ad5ff); border-radius:9px; }
.cl-profile-identity-copy progress::-moz-progress-bar { background:linear-gradient(90deg,#0067ed,#1ad5ff); border-radius:9px; }
.cl-platform-ui { background-color:#000c22; }
.cl-platform-account-settings { background:#001029; }
.cl-profile-performance .cl-fly-wordmark { height:72%; }

.cl-player-identity { position:relative; max-width:180px; font-size:13px; }
.cl-player-identity summary { cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:8px; border:1px solid var(--cl-hairline); border-radius:12px; }
.cl-player-identity-panel { position:absolute; right:0; z-index:40; width:min(280px,80vw); padding:14px; border:1px solid var(--cl-hairline); border-radius:12px; background:var(--cl-surface-1-solid); color:var(--cl-text-muted); box-shadow:0 12px 30px #0008; }
.cl-player-identity-panel button { min-height:44px; padding:8px; color:inherit; background:var(--cl-surface-2); border:1px solid var(--cl-hairline); border-radius:8px; cursor:pointer; }
.cl-avatar-picker { display:flex; gap:8px; }
.cl-avatar-picker [aria-pressed=true] { border-color:var(--cl-gold); }
@media(max-width:480px) { .cl-player-identity { max-width:120px; } }
/* Coaching follows page content; optional installation must never obscure Play. */
.cl-install-banner { position:static; margin:16px auto calc(76px + env(safe-area-inset-bottom)); max-width:1040px; }
.cl-arcade-active .cl-install-banner,.cc-route-active .cl-install-banner { display:none; }