/* CASINOLOJI CLUB — VISUAL SYSTEM / ASAMA 1
   Foundation only: segment themes, tokens, shared components, responsive grid and motion.
   Screen-specific redesign is intentionally reserved for Asama 2. */

:root{
  --club-rank:#B87333;
  --club-rank-accent:#D89A62;
  --club-rank-soft:color-mix(in srgb,var(--club-rank) 14%,transparent);
  --club-rank-border:color-mix(in srgb,var(--club-rank) 34%,transparent);
  --club-rank-glow:color-mix(in srgb,var(--club-rank) 24%,transparent);
  --club-canvas:#05080d;
  --club-canvas-2:#081018;
  --club-panel:#0b1119;
  --club-panel-2:#0e1721;
  --club-panel-3:#101c28;
  --club-text:#f7fafc;
  --club-text-2:#c2ccd6;
  --club-muted:#8795a3;
  --club-muted-2:#64717d;
  --club-line:rgba(255,255,255,.075);
  --club-line-strong:rgba(255,255,255,.13);
  --club-success:#53d38b;
  --club-warning:#efc45a;
  --club-danger:#ff7272;
  --club-info:#68aef0;
  --club-radius-xs:10px;
  --club-radius-sm:14px;
  --club-radius-md:18px;
  --club-radius-lg:24px;
  --club-radius-xl:30px;
  --club-shadow-sm:0 10px 30px rgba(0,0,0,.18);
  --club-shadow-md:0 20px 65px rgba(0,0,0,.30);
  --club-shadow-rank:0 24px 80px var(--club-rank-glow);
  --club-transition-fast:160ms cubic-bezier(.2,.8,.2,1);
  --club-transition:260ms cubic-bezier(.2,.8,.2,1);
  --club-space-1:6px;
  --club-space-2:10px;
  --club-space-3:14px;
  --club-space-4:18px;
  --club-space-5:24px;
  --club-space-6:32px;
  --club-space-7:44px;
}

/* Segment fallback themes. Runtime DB colors still win through --club-rank / --club-rank-accent. */
body[data-club-segment="bronze"]{--segment-fallback:#B87333;--segment-fallback-accent:#E1A26B;--segment-metal:#6e4327;--segment-sheen:rgba(216,154,98,.20)}
body[data-club-segment="silver"]{--segment-fallback:#AEB7C4;--segment-fallback-accent:#EEF2F6;--segment-metal:#65707d;--segment-sheen:rgba(227,232,239,.18)}
body[data-club-segment="gold"]{--segment-fallback:#D7A928;--segment-fallback-accent:#FFE183;--segment-metal:#806316;--segment-sheen:rgba(255,215,106,.20)}
body[data-club-segment="diamond"]{--segment-fallback:#57B9E8;--segment-fallback-accent:#C8F1FF;--segment-metal:#246986;--segment-sheen:rgba(183,235,255,.20)}
body[data-club-segment="emerald"]{--segment-fallback:#20A86B;--segment-fallback-accent:#76F0B3;--segment-metal:#145f42;--segment-sheen:rgba(104,227,166,.20)}

html{background:var(--club-canvas)}
body{background:var(--club-canvas);font-size:14px;line-height:1.45;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.club-app{
  isolation:isolate;
  background:
    radial-gradient(900px 440px at 12% -9%,color-mix(in srgb,var(--club-rank) 16%,transparent),transparent 62%),
    radial-gradient(740px 420px at 96% 14%,color-mix(in srgb,var(--club-rank-accent) 8%,transparent),transparent 70%),
    linear-gradient(180deg,var(--club-canvas),var(--club-canvas-2) 48%,var(--club-canvas));
  transition:background .55s ease;
}
.club-app:before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.32),transparent 65%)}

/* Header foundation */
.club-appbar{height:66px;border-color:var(--club-line);background:color-mix(in srgb,var(--club-canvas) 86%,transparent);box-shadow:0 8px 32px rgba(0,0,0,.18)}
.club-brand-mark,.brand-orb{background:linear-gradient(145deg,var(--club-rank-accent),var(--club-rank));box-shadow:0 8px 28px var(--club-rank-glow);transition:background var(--club-transition),box-shadow var(--club-transition)}
.club-brand small{color:var(--club-rank-accent);font-size:10px;line-height:1;letter-spacing:.19em}
.club-brand strong{font-size:16px;line-height:1.05}
.club-head-actions{gap:8px}
.club-rank-pill{display:flex;align-items:center;gap:8px;height:39px;padding:0 11px;border:1px solid var(--club-rank-border);border-radius:13px;background:color-mix(in srgb,var(--club-rank) 7%,rgba(255,255,255,.02));box-shadow:inset 0 1px rgba(255,255,255,.03);transition:all var(--club-transition)}
.club-rank-pill i{width:8px;height:8px;border-radius:50%;background:var(--club-rank);box-shadow:0 0 14px var(--club-rank);font-style:normal}
.club-rank-pill span{display:block;color:var(--club-rank-accent);font-size:10px;font-weight:900;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.club-rank-pill strong{display:block;margin-top:3px;color:var(--club-text-2);font-size:10px;line-height:1}
.notification-button{border-color:var(--club-line);background:rgba(255,255,255,.025);color:var(--club-rank-accent);transition:border-color var(--club-transition-fast),background var(--club-transition-fast),transform var(--club-transition-fast)}
.notification-button:hover{border-color:var(--club-rank-border);background:var(--club-rank-soft);transform:translateY(-1px)}
.notification-button b{background:var(--club-rank);color:#07100d}
.club-balance{border-color:var(--club-line);background:rgba(255,255,255,.025)}

/* Shared surface system */
.premium-surface,.club-surface,.club-card{
  border-color:var(--club-line);
  background:linear-gradient(155deg,rgba(17,27,38,.96),rgba(8,15,23,.97));
  box-shadow:var(--club-shadow-sm);
}
.premium-surface{transition:border-color var(--club-transition),box-shadow var(--club-transition),background var(--club-transition)}
.premium-surface:hover{border-color:color-mix(in srgb,var(--club-rank) 19%,var(--club-line))}
.club-surface{position:relative;border:1px solid var(--club-line);border-radius:var(--club-radius-lg);overflow:hidden}
.club-card{position:relative;border:1px solid var(--club-line);border-radius:var(--club-radius-md);padding:var(--club-space-4);overflow:hidden}
.club-card--accent{border-color:var(--club-rank-border);background:linear-gradient(145deg,color-mix(in srgb,var(--club-rank) 9%,var(--club-panel)),var(--club-panel))}
.club-card--glass{background:rgba(10,17,26,.72);backdrop-filter:blur(16px)}
.club-card--interactive{transition:transform var(--club-transition-fast),border-color var(--club-transition-fast),box-shadow var(--club-transition-fast)}
.club-card--interactive:hover{transform:translateY(-2px);border-color:var(--club-rank-border);box-shadow:0 16px 45px var(--club-rank-soft)}

/* Segment-aware existing hero/card foundation */
.club-hero:before,.season-hero:before,.market-hero:before,.passport-hero:before{background:radial-gradient(circle,color-mix(in srgb,var(--club-rank) 24%,transparent),transparent 67%)}
.hero-eyebrow,.section-kicker,.section-head>a,.career-focus span,.achievement-chip i,.achievement-card i,.collection-card i,.season-hero>p,.journey-tier.unlocked+*{color:var(--club-rank-accent)}
.hero-eyebrow span{background:var(--club-rank);box-shadow:0 0 18px var(--club-rank)}
.club-hero h1 em{color:var(--club-rank-accent)}
.identity-card{
  border-color:var(--club-rank-border);
  background:
    radial-gradient(circle at 82% 15%,color-mix(in srgb,var(--club-rank-accent) 23%,transparent),transparent 31%),
    linear-gradient(135deg,color-mix(in srgb,var(--club-rank) 30%,#121923),#101720 52%,#081018);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 24px 74px var(--club-rank-glow);
  transition:background .55s ease,border-color .55s ease,box-shadow .55s ease;
}
.identity-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,var(--segment-sheen,rgba(255,255,255,.07)) 48%,transparent 64%);transform:translateX(-130%);animation:clubCardSheen var(--segment-motion-duration,8s) ease-in-out infinite}
.identity-top,.identity-main small,.identity-level small,.identity-bottom{font-size:10px}
.identity-main span{font-size:11px}
.identity-main strong{color:var(--club-text)}
.identity-level strong{color:var(--club-rank-accent);text-shadow:0 0 24px var(--club-rank-glow)}

/* Typography tokens / readability pass */
.hero-eyebrow,.section-kicker{font-size:10px;line-height:1.2}
.club-hero>p,.market-hero p,.section-copy,.community-hero p{font-size:13px;line-height:1.7;color:var(--club-muted)}
.section-head h2{font-size:20px}
.section-head>a{font-size:11px}
.stat-card>span,.count-pill,.market-badge,.passport-stats span,.collection-card small{font-size:10px}
.stat-card p,.market-card>p,.order-row span,.perk-card small,.purchase-sheet>p{font-size:12px}
.mission-mini strong,.mission-card strong,.achievement-chip strong,.achievement-card strong,.market-card strong,.collection-card strong,.person-row strong,.leaderboard-row strong{font-size:12px}
.mission-mini span,.mission-card p,.achievement-chip span,.achievement-card p,.person-row small,.leaderboard-row small,.social-user small,.social-post-meta{font-size:10px}
.empty-state,.club-toast{font-size:11px}

/* Badge / chip / button primitives */
.club-badge,.club-chip,.club-tag{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-weight:900;line-height:1}
.club-badge{min-height:28px;padding:0 10px;border:1px solid var(--club-rank-border);border-radius:999px;background:var(--club-rank-soft);color:var(--club-rank-accent);font-size:10px;letter-spacing:.05em}
.club-badge--lg{min-height:36px;padding:0 13px;font-size:11px}
.club-badge--rank{box-shadow:inset 0 0 20px var(--club-rank-soft),0 0 24px var(--club-rank-soft)}
.club-chip{min-height:30px;padding:0 10px;border:1px solid var(--club-line);border-radius:10px;background:rgba(255,255,255,.025);color:var(--club-text-2);font-size:10px}
.club-chip.is-active{border-color:var(--club-rank-border);background:var(--club-rank-soft);color:var(--club-rank-accent)}
.club-tag{min-height:24px;padding:0 8px;border-radius:8px;background:rgba(255,255,255,.06);color:var(--club-muted);font-size:9px;text-transform:uppercase;letter-spacing:.07em}
.club-tag--success{background:color-mix(in srgb,var(--club-success) 13%,transparent);color:#8de9b1}.club-tag--warning{background:color-mix(in srgb,var(--club-warning) 14%,transparent);color:#f4d980}.club-tag--danger{background:color-mix(in srgb,var(--club-danger) 13%,transparent);color:#ff9a9a}.club-tag--rank{background:var(--club-rank-soft);color:var(--club-rank-accent)}
.club-btn{appearance:none;border:1px solid var(--club-line);min-height:42px;padding:0 15px;border-radius:12px;background:rgba(255,255,255,.035);color:var(--club-text);font-weight:900;font-size:11px;cursor:pointer;transition:transform var(--club-transition-fast),border-color var(--club-transition-fast),background var(--club-transition-fast),box-shadow var(--club-transition-fast)}
.club-btn:hover{transform:translateY(-1px);border-color:var(--club-rank-border)}
.club-btn--primary{border-color:transparent;background:linear-gradient(100deg,var(--club-rank),var(--club-rank-accent));color:#07100d;box-shadow:0 12px 34px var(--club-rank-glow)}
.club-btn--ghost{background:transparent;color:var(--club-rank-accent)}
.club-btn--danger{border-color:color-mix(in srgb,var(--club-danger) 35%,transparent);background:color-mix(in srgb,var(--club-danger) 8%,transparent);color:#ff9a9a}
.club-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}

/* Progress primitives */
.progress,.mission-bar,.club-progress{position:relative;background:rgba(255,255,255,.055);box-shadow:inset 0 1px 4px rgba(0,0,0,.35)}
.progress{height:7px}
.progress i,.mission-bar i,.club-progress>i{background:linear-gradient(90deg,var(--club-rank),var(--club-rank-accent));box-shadow:0 0 14px var(--club-rank-glow)}
.club-progress{height:8px;border-radius:999px;overflow:hidden}
.club-progress>i{display:block;width:0;height:100%;border-radius:inherit;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.club-progress--lg{height:11px}
.career-ring{border-color:color-mix(in srgb,var(--club-rank) 28%,#121b24);box-shadow:inset 0 0 0 1px var(--club-rank-border),0 0 28px var(--club-rank-soft)}
.career-focus{border-color:color-mix(in srgb,var(--club-rank) 16%,var(--club-line));background:linear-gradient(135deg,var(--club-rank-soft),rgba(255,255,255,.015))}
.career-reward{border-color:var(--club-rank-border);background:var(--club-rank-soft)}
.career-reward strong{color:var(--club-rank-accent)}

/* Shared responsive layout primitives for Asama 2 */
.club-grid{display:grid;gap:var(--club-space-3)}
.club-grid--2{grid-template-columns:1fr}
.club-grid--3{grid-template-columns:1fr}
.club-dashboard-grid{display:grid;grid-template-columns:1fr;gap:var(--club-space-3)}
.club-stack{display:grid;gap:var(--club-space-3)}
.club-row{display:flex;align-items:center;gap:var(--club-space-3)}
.club-row--between{justify-content:space-between}
.club-scroll-row{display:flex;gap:var(--club-space-2);overflow:auto;scroll-snap-type:x proximity;scrollbar-width:none}.club-scroll-row::-webkit-scrollbar{display:none}.club-scroll-row>*{scroll-snap-align:start}

/* Navigation foundation */
.club-bottom-nav{border-color:var(--club-line);background:color-mix(in srgb,var(--club-canvas) 91%,transparent);box-shadow:0 18px 55px rgba(0,0,0,.45)}
.club-bottom-nav a{color:var(--club-muted-2);transition:color var(--club-transition-fast),background var(--club-transition-fast),transform var(--club-transition-fast)}
.club-bottom-nav a:hover{color:var(--club-text-2)}
.club-bottom-nav a.active{background:var(--club-rank-soft);color:var(--club-rank-accent);box-shadow:inset 0 0 0 1px var(--club-rank-border)}
.club-bottom-nav a strong{font-size:9px}

/* Existing component retheme */
.stat-card,.mission-mini,.mission-card,.achievement-chip,.achievement-card,.collection-card,.perk-card,.social-post,.person-row,.profile-stats div{border-color:var(--club-line);background:rgba(255,255,255,.018)}
.stat-card:first-child{background:linear-gradient(145deg,var(--club-rank-soft),rgba(255,255,255,.014))}
.achievement-chip.unlocked,.achievement-card.unlocked,.collection-card.owned,.perk-card.selected{border-color:var(--club-rank-border);background:var(--club-rank-soft)}
.mission-mini .mission-check,.social-avatar{background:var(--club-rank-soft);color:var(--club-rank-accent)}
.mission-mini em,.mission-card em,.leaderboard-row em{color:var(--club-rank-accent)}
.journey-tier.unlocked .journey-node,.passport-mark,.profile-avatar{background:linear-gradient(145deg,var(--club-rank-accent),var(--club-rank));color:#07100d}
.journey-tier.current .journey-node{box-shadow:0 0 0 5px var(--club-rank-soft),0 0 30px var(--club-rank-glow)}
.passport-card{border-color:var(--club-rank-border);background:radial-gradient(circle at 85% 20%,var(--club-rank-soft),transparent 30%),linear-gradient(140deg,color-mix(in srgb,var(--club-rank) 17%,#101923),#0a121b 62%)}
.passport-code{color:var(--club-rank-accent)}

/* Level icon primitive */
.club-level-icon{--level-size:44px;position:relative;display:grid;place-items:center;width:var(--level-size);height:var(--level-size);flex:0 0 var(--level-size);border:1px solid var(--club-rank-border);border-radius:30%;background:linear-gradient(145deg,var(--club-rank-soft),rgba(255,255,255,.035));box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 26px var(--club-rank-soft);overflow:hidden}
.club-level-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2}.club-level-icon span{position:relative;z-index:1;color:var(--club-rank-accent);font-size:11px;font-weight:1000}
.club-level-icon--sm{--level-size:32px}.club-level-icon--lg{--level-size:72px}

/* Leaderboard state colors remain semantic, while player identity follows level color. */
.leaderboard-row{min-height:48px;border-color:var(--club-line);transition:background var(--club-transition-fast),transform var(--club-transition-fast)}
.leaderboard-row:hover{background:rgba(255,255,255,.025)}
.leaderboard-row.me{outline-color:var(--club-rank-border);background:linear-gradient(90deg,var(--club-rank-soft),rgba(255,255,255,.022))}
.leaderboard-row.podium>b{color:var(--club-rank-accent)}

/* Motion language */
@keyframes clubCardSheen{0%,64%{transform:translateX(-135%)}78%,100%{transform:translateX(135%)}}
@keyframes clubSoftPulse{0%,100%{box-shadow:0 0 0 0 var(--club-rank-soft)}50%{box-shadow:0 0 0 8px transparent}}
@keyframes clubRise{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:translateY(0)}}
@keyframes clubRewardReveal{0%{opacity:0;transform:scale(.82) translateY(10px)}65%{opacity:1;transform:scale(1.04) translateY(-1px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes clubRankFlash{0%{background:color-mix(in srgb,var(--club-rank) 28%,transparent)}100%{background:transparent}}
.club-animate-rise{animation:clubRise .36s both}.club-animate-reward{animation:clubRewardReveal .48s cubic-bezier(.2,.9,.2,1.1) both}.club-animate-rank{animation:clubRankFlash 1.2s ease both}

/* Segment-specific motion hooks configured from the DB animation key. */
body[data-club-animation="bronze-rise"] .identity-card{--segment-motion-duration:7s}
body[data-club-animation="silver-rise"] .identity-card{--segment-motion-duration:6.5s}
body[data-club-animation="gold-rise"] .identity-card{--segment-motion-duration:6s}
body[data-club-animation="diamond-rise"] .identity-card{--segment-motion-duration:5.5s}
body[data-club-animation="emerald-rise"] .identity-card{--segment-motion-duration:5s}

/* Desktop foundation */
@media (min-width:820px){
  .club-page{width:min(1240px,100%);padding:24px 26px 34px}
  .club-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .club-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .club-dashboard-grid{grid-template-columns:minmax(0,1.55fr) minmax(300px,.78fr)}
  .premium-surface,.club-surface{border-radius:var(--club-radius-lg)}
  .compact-section{padding:20px}
}

@media (min-width:1100px){
  .club-dashboard-grid{grid-template-columns:minmax(0,1.7fr) minmax(320px,.78fr)}
  .club-appbar{padding-left:max(24px,calc((100vw - 1240px)/2));padding-right:max(24px,calc((100vw - 1240px)/2))}
}

/* Mobile foundation */
@media (max-width:620px){
  :root{--club-radius-lg:20px;--club-radius-xl:24px}
  .club-page{padding:12px 10px 22px}
  .club-appbar{height:60px;padding:0 10px}
  .club-rank-pill{height:36px;padding:0 8px;gap:6px}
  .club-rank-pill span{font-size:9px}.club-rank-pill strong{font-size:9px}
  .club-brand strong{font-size:14px}.club-brand small{font-size:9px}
  .club-balance{padding-right:8px}.club-balance strong{font-size:11px}
  .identity-card{min-height:200px}
  .section-head h2{font-size:19px}
  .club-bottom-nav{height:68px}
  .club-bottom-nav a strong{font-size:8px}
  .club-btn{min-height:44px}
}

@media (max-width:430px){
  .club-rank-pill span{display:none}
  .club-rank-pill{width:44px;justify-content:center;padding:0}.club-rank-pill strong{margin:0}
  .club-brand-mark{width:34px;height:34px}
  .notification-button{width:36px;height:36px}
  .club-balance .coin-icon{width:25px;height:25px}
}

/* Accessibility */
:focus-visible{outline:2px solid var(--club-rank-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}