/* ChocoJuegos: an open play symbol, electric blue and clear game-first surfaces. */
@font-face{font-family:Choco Display;src:url('/assets/brand/choco-display.woff') format('woff');font-weight:700 900;font-style:normal;font-display:swap}
:root{--brand-ink:#15234b;--night:#10182c;--canvas:#f4f7ff;--paper:#ffffff;--blue:#4264f5;--blue-dark:#2548cc;--aqua:#a8e8ec;--lime-bright:#d9f96f;--bg:#10182c;--surface:#1c2334;--line:#343f5e;--ink:#f4f7ff;--muted:#92a6db;--purple:#96b6ff;--lime:#d9f96f;--radius:24px;--display:"Choco Display","Segoe UI",Arial,sans-serif;font-family:Inter,"Segoe UI",Arial,sans-serif}
body{background:var(--canvas);color:var(--brand-ink);color-scheme:light}
::selection{background:var(--aqua);color:var(--brand-ink)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--blue-dark);outline-offset:4px}
button:disabled{opacity:.6}
.site-header{height:96px;max-width:1480px;padding:0 5%;gap:32px;border-color:#15234b24}
.brand,.site-header .brand,footer .brand{gap:10px;font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:-1.15px;line-height:1.2;white-space:nowrap;flex-shrink:0}
.brand img{width:44px;height:44px;flex:none;transition:transform .2s ease}
.brand:hover img{transform:rotate(-7deg)}
.brand-word>span{color:var(--blue-dark)}
.main-nav{gap:25px;font-size:.9375rem;flex-shrink:0}
.main-nav a,.main-nav button{color:#485883;min-height:44px}
.main-nav .nav-active,.main-nav button:hover{color:var(--brand-ink)}
.nav-active:after{background:var(--blue);height:4px}
.main-nav button span{color:var(--blue-dark)}
.header-note{font-family:var(--display);font-size:1rem;color:#4b5b87;white-space:nowrap}
.site-header .icon-button{border-color:#15234b45;color:var(--brand-ink);margin-left:0;background:var(--paper)}
.site-header .icon-button:hover{background:#d0d9f0}
.site-header #profile-nav{background:var(--paper);color:var(--brand-ink);border-color:#15234b40;font-size:.875rem;box-shadow:0 2px 0 #15234b12;min-height:44px}
.site-header #profile-nav .social-avatar{background:var(--lime-bright);color:var(--brand-ink)}
main{max-width:1480px;padding:0 5%}
.eyebrow{font-size:.75rem;letter-spacing:.12em;font-weight:750;line-height:1.5}
.play-primary{background:var(--lime-bright);color:var(--brand-ink);font-size:1rem;font-weight:750;min-height:50px;border-radius:13px;box-shadow:0 3px 0 #43527a30;transition:background .18s,transform .18s,box-shadow .18s}
.play-primary:hover{background:#b3c1e6;box-shadow:0 5px 0 #43527a2b;transform:translateY(-2px)}
.shuffle-button{font-size:.9375rem;color:var(--brand-ink);border:1px solid #15234b45;min-height:54px;border-radius:13px;padding:14px 17px;background:transparent;justify-content:center;gap:8px}
.shuffle-button svg{color:var(--blue-dark)}
.shuffle-button:hover{background:#d7def2;border-color:#4b5b87}
.favorite-shelf{padding:25px 0 0;gap:10px}.favorite-shelf>span{color:#415077;font-size:.9375rem}.favorite-shelf button{background:var(--paper);border-color:#8896bd;color:var(--brand-ink);min-height:44px}
.catalog{padding:54px 0 0;scroll-margin-top:20px}
.catalog-heading{align-items:flex-end;gap:24px}
.catalog-heading .eyebrow{color:#4b5c89}
.catalog-heading h2{font-family:var(--display);font-size:clamp(1.9rem,3.1vw,2.6rem);letter-spacing:-.045em;line-height:1.15}
.lavender{color:var(--blue-dark)}
.search-box{background:var(--paper);border-color:#8d9bc0;border-radius:12px;min-height:49px;width:300px;color:var(--brand-ink)}
.search-box input{color:var(--brand-ink);font-size:.9375rem;height:48px}
.search-box input::placeholder{color:#4f6090}
.search-box svg{color:#4c5c89}
.search-box>span{border-color:#9aa6c7;color:#516393}
.search-box:focus-within{border-color:var(--blue-dark);outline:2px solid #4264f530}
.catalog-tools{padding:25px 0 24px}
.filter{color:#425077;border-color:#8ea2da;font-size:.9375rem;padding:11px 17px;background:transparent;min-height:44px}
.filter.active{background:var(--brand-ink);color:var(--canvas);border-color:var(--brand-ink)}
.filter:not(.active):hover{background:#d4dcf1;color:var(--brand-ink);border-color:#5b6ea4}
.filter>span{background:#f4f7ff28}
.catalog-count{color:#4f608f;font-size:.8125rem;white-space:nowrap}
.games-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.game-card{background:var(--paper);color:var(--brand-ink);border:1px solid #9badde;border-radius:18px;padding:8px 8px 16px;box-shadow:0 3px 0 #a4b4e166;transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden}
.game-card:hover{transform:translateY(-4px);box-shadow:0 8px 0 #a4b4e166;border-color:#56689b}
.card-art{border-radius:11px;aspect-ratio:1.5;border:0}
.card-title{font-size:1.0625rem;letter-spacing:-.025em;padding:14px 7px 0;line-height:1.4}
.card-title>span{color:#576a9f}.game-card:hover .card-title>span{color:var(--blue-dark)}
.card-description{font-size:.875rem;color:#45547d;padding:0 7px;line-height:1.55;margin-top:5px}
.card-category{font-size:.75rem;color:#4e5f8e;padding:0 7px;margin-top:13px;letter-spacing:.02em}
.card-time,.card-player{font-size:.75rem;background:#10182cb3;color:var(--canvas);border-color:#f4f7ff29}
.card-player.is-duo{background:var(--aqua);color:var(--brand-ink);border-color:transparent}
.card-play{background:var(--lime-bright);color:var(--brand-ink);opacity:1;transform:none;width:34px;height:34px;font-size:.75rem}
.last-call{background:var(--brand-ink);border:0;color:var(--canvas);border-radius:22px;gap:22px;margin:48px 0 42px;padding:22px 32px;position:relative}
.last-call>img{width:124px;height:124px;object-fit:cover;border-radius:50%;flex:none;background:var(--canvas)}
.last-call .eyebrow{color:var(--aqua);margin-bottom:9px;font-size:.75rem}
.last-call h2{font-family:var(--display);font-size:2.4rem;line-height:1.2;letter-spacing:-.05em}
.last-call p:not(.eyebrow){font-size:1rem;color:#aebce4;line-height:1.5;margin-top:9px}
.last-call button{background:var(--lime-bright);border:0;border-radius:13px;color:var(--brand-ink);font-weight:700;min-height:52px;font-size:.9375rem;padding:14px 20px;flex-shrink:0}
.last-call button:hover{background:#b3c1e6;color:var(--brand-ink)}
.site-footer{max-width:1480px;border-top:1px solid #15234b24;padding:25px 5% 34px;gap:24px;align-items:center}
.site-footer .brand{font-size:23px}.site-footer .brand img{width:35px;height:35px}
.site-footer p{color:#4b5c89;font-size:.875rem;line-height:1.5}
.site-footer>span{color:#4b5c89;font-size:.75rem;line-height:1.7;letter-spacing:.1em}
.empty-state{background:#d3dbf0;border:1px dashed #6e7faf;color:var(--brand-ink)}
.empty-state p{color:#44537b}.choco-empty{display:block;object-fit:cover;border-radius:50%;margin:0 auto 20px}
.invitation-status{background:var(--brand-ink);color:var(--canvas);border-color:#506190}
/* All game shells keep a dark, quiet frame and the same brand controls. */
#game-dialog,.player-records,.social-dialog{color-scheme:dark;--purple:#96b6ff;--lime:var(--lime-bright);color:var(--ink);background:var(--night);border-color:#495986}
#game-dialog::backdrop,.player-records::backdrop,.social-dialog::backdrop{background:#11151fdb}
.game-shell,.game-launcher{background:var(--night)}
.game-header{background:#191f2e;border-color:#41507766}
.game-heading h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.25}
.game-mark{width:34px;height:34px;object-fit:contain;flex:none}
.game-heading p{color:#919ec2}
.game-bottom{border-color:#333f5e;background:#191f2e}
.game-overlay{background:radial-gradient(ellipse at 50% 0,#354060e8,#121621fa 78%)}
.game-overlay h3,.social-header h2,.history-header h2{font-family:var(--display);font-weight:700;letter-spacing:-.04em}
.game-hud{background:#191f2e;color:#96a9dc}
.game-hud span:first-child{color:var(--lime-bright)}
.game-overlay .play-primary{box-shadow:0 4px 0 #0a0c1280}
.game-overlay .overlay-icon{color:var(--lime-bright)}
.launch-toolbar{background:#171d2b;border-color:#333f5e80}
.launch-select-header h3{font-family:var(--display);letter-spacing:-.035em}
.launch-select-header h3>span{color:var(--lime-bright)}
.launch-card{background:#1d2334;border-color:#404e75;border-radius:16px;color:var(--canvas)}
.launch-card:hover{background:#262e44}
.launch-card[aria-pressed=true]{background:linear-gradient(135deg,color-mix(in srgb,var(--mode-color) 14%,#1c2233),#181e2d)}
.launch-briefing,.history-briefing{background:#171c2a;border-color:#404e75}
.brief-banner:after{background:linear-gradient(90deg,#131722ed,#131722ad 65%,#13172233),linear-gradient(0deg,#171c2a,transparent 85%)}
.brief-tabs{background:#191f2e;border-color:#404e75}
.brief-tabs button[aria-selected=true]{color:var(--lime-bright)}
.brief-tabs button[aria-selected=true]:after{background:var(--lime-bright)}
.launch-footer{background:#1a202f;border-color:#404e75}
.brief-page h4{font-family:var(--display);letter-spacing:-.03em;line-height:1.25}
.brief-watch{background:#232b40;border-color:#495986}
.social-dialog .social-header,.player-records .history-header{border-bottom:1px solid #41507766;padding-bottom:18px}
.profile-pass{background:linear-gradient(115deg,#2e3853,#1a1f2e);border-color:#4b5b87;border-radius:18px}
.social-tabs [aria-current=page]{color:var(--lime-bright);border-bottom-color:var(--lime-bright)}
.social-avatar{background:#303a56;color:#b6c3e7}
.social-avatar[data-avatar=bolt],.social-avatar[data-avatar=star]{background:#262f46;color:var(--lime-bright)}
.social-avatar[data-avatar=orbit],.social-avatar[data-avatar=diamond]{background:#264a3b;color:var(--aqua)}
.social-avatar[data-avatar=heart],.social-avatar[data-avatar=flower]{background:#364263;color:#bbc7e8}
.challenge-target{background:linear-gradient(115deg,#28314a,#191e2d);border-color:#506191}
.challenge-active-banner{background:#28314a;color:#cbd4ee}
.history-summary strong,.history-value,.result-points{color:var(--lime-bright)!important}
.history-tabs button[aria-pressed=true]{background:var(--lime-bright);color:var(--brand-ink);border-color:var(--lime-bright)}
#game-dialog :focus-visible,.social-dialog :focus-visible,.player-records :focus-visible{outline-color:var(--lime-bright)}
@media(max-width:1200px){.site-header{gap:24px}.header-note{display:none}.site-header #profile-nav{margin-left:auto}.site-header .brand{font-size:25px}.games-grid{gap:18px}.catalog-count{display:none}}
@media(max-width:950px){.site-header{height:84px;gap:20px}.site-header .main-nav{gap:20px}.site-header #header-search{display:none}.shuffle-button{padding:12px 14px}.games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.last-call h2{font-size:2rem}.last-call{padding:24px;gap:18px}.last-call>img{width:94px;height:94px}.site-footer{flex-wrap:wrap}.site-footer p{margin-left:auto}.site-footer>span{display:none}}
@media(max-width:700px){.site-header{height:auto;min-height:82px;padding:16px 5%;gap:15px;flex-wrap:wrap}.site-header .brand{font-size:24px;letter-spacing:-1px}.brand img{width:37px;height:37px}.site-header #profile-nav{order:2;margin-left:auto;padding:4px;max-width:44px}.site-header #profile-nav>span:last-child{display:none}.site-header .main-nav{order:3;flex:1 0 100%;height:36px;justify-content:space-between;gap:20px}.site-header .main-nav a,.site-header .main-nav button{min-height:36px;font-size:.9375rem}.site-header .main-nav #multiplayer-nav{display:flex}.nav-active:after{bottom:-4px;height:3px}.site-header .header-note{display:none}.shuffle-button svg{width:16px}.catalog{padding-top:35px}.catalog-heading{align-items:stretch;flex-direction:column;gap:19px}.catalog-heading h2{font-size:2.1rem}.catalog-heading .eyebrow{font-size:.75rem;margin-bottom:10px}.search-box{width:100%}.catalog-tools{padding:19px 0 20px}.filters{flex-wrap:wrap;overflow:visible;gap:7px;width:100%;padding-bottom:0}.filter{font-size:.875rem;padding:10px 14px;min-height:44px}.games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px}.game-card{padding:6px 6px 13px;border-radius:14px}.card-art{border-radius:9px;aspect-ratio:1.22}.card-title{font-size:1rem;padding:11px 4px 0;gap:3px;line-height:1.4}.card-title>span{display:none}.card-description{font-size:.875rem;padding:0 4px;line-height:1.5}.card-category{font-size:.75rem;padding:0 4px;margin-top:9px}.card-time,.card-player{font-size:.75rem;padding:3px 5px;top:7px}.card-time{left:7px}.card-player{top:auto;bottom:8px;left:7px;right:auto}.card-play{width:28px;height:28px;bottom:8px;right:8px;font-size:.75rem}.last-call{padding:26px 22px;margin:34px 0 26px;gap:14px;display:grid;grid-template-columns:64px 1fr;border-radius:18px}.last-call>img{width:64px;height:64px}.last-call h2{font-size:1.8rem}.last-call .eyebrow{font-size:.75rem;letter-spacing:.08em;margin-bottom:7px}.last-call p:not(.eyebrow){font-size:.875rem;margin-top:8px}.last-call button{grid-column:1/-1;margin:7px 0 0;justify-content:center;min-height:50px}.site-footer{padding:22px 5% 30px;gap:10px;flex-direction:column;align-items:flex-start}.site-footer .brand{font-size:24px}.site-footer p{margin:4px 0 0;font-size:.8125rem}.game-heading h2{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:1.0625rem;letter-spacing:-.025em}.game-mark{display:none}.favorite-shelf{padding-top:22px}.favorite-shelf>span{width:100%}}
@media(max-width:380px){.catalog-heading h2{font-size:1.9rem}.card-player{top:auto;bottom:8px;left:7px;right:auto}.card-description{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.brand img,.game-card,.play-primary,.shuffle-button{transition:none}.brand:hover img,.game-card:hover,.play-primary:hover{transform:none}}

.choco-dialog-mark{display:block;width:72px;height:72px;object-fit:contain;margin-bottom:10px}

/* The name is a playful brand; the games supply the imagery. */
.site-header .brand,.site-footer .brand{font-family:var(--display);font-weight:700;letter-spacing:-.055em;font-size:29px;gap:12px}
.brand-word>span{color:var(--blue)}
.header-note{font-family:inherit;font-size:.875rem;color:#697698}
.choco-welcome{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:38px 0 29px}
.choco-welcome>div{min-width:0}
.choco-welcome .eyebrow{color:#62708f;letter-spacing:.1em;margin:0 0 12px;font-size:.75rem}
.choco-welcome h1{font-family:var(--display);font-weight:700;font-size:clamp(2.8rem,5.2vw,4.8rem);line-height:1.05;letter-spacing:-.065em;margin:0}
.choco-welcome h1 em{font-style:normal;color:var(--blue-dark)}
.choco-welcome .shuffle-button{background:var(--blue-dark);color:white;border-color:var(--blue-dark);flex-shrink:0;border-radius:100px;min-height:50px;font-size:.9375rem;padding:13px 20px;box-shadow:none}
.choco-welcome .shuffle-button svg{color:#d9f96f}
.choco-welcome .shuffle-button:hover{background:#1939b4}
.choco-featured{display:grid;grid-template-columns:1.65fr 1fr 1fr;gap:16px}
.feature-play{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;min-width:0;min-height:315px;padding:24px;border-radius:22px;overflow:hidden;text-align:left;background:#102249;color:white;border:1px solid #172b5333;box-shadow:0 5px 0 #15234b0b}
.feature-play>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .35s ease}
.feature-play:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#091127f5 0%,#091127c9 28%,#09112720 68%)}
.feature-play:hover>img{transform:scale(1.045)}
.feature-tag{display:inline-flex;border-radius:7px;background:#f4f7ffed;color:#15234b;line-height:1.4;font-size:.75rem;letter-spacing:.045em;padding:6px 9px;font-weight:750}
.feature-rally .feature-tag{background:var(--lime-bright)}
.feature-chispa .feature-tag{background:var(--aqua)}
.feature-info{display:flex;flex-direction:column;gap:9px;margin-top:55px;align-self:stretch}
.feature-info>.eyebrow{font-size:.75rem;color:#c1cfeb;letter-spacing:.08em;margin:0}
.feature-info>strong{font-family:var(--display);font-size:1.9rem;letter-spacing:-.045em;line-height:1.13}
.feature-rally .feature-info>strong{font-size:2.8rem}
.feature-info>span:not(.feature-cta):not(.feature-link):not(.eyebrow){font-size:.9375rem;line-height:1.5;color:#e1e9f9}
.feature-cta{display:flex;justify-content:space-between;align-items:center;gap:30px;align-self:flex-start;padding:12px 17px;border-radius:10px;color:#15234b;background:var(--lime-bright);font-size:.9375rem;font-weight:750;min-height:47px;margin-top:6px}
.feature-cta>b{font-size:.875rem}
.feature-link{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #ffffff50;padding-top:14px;margin-top:8px;font-size:.9375rem;color:white;min-height:42px;font-weight:650}
.feature-link>b{font-size:1.25rem;font-weight:400}
.catalog-heading h2{font-family:var(--display);letter-spacing:-.045em}
.game-card{box-shadow:0 3px 0 #b6c2e333}
.game-card:hover{box-shadow:0 7px 0 #b6c2e344}
.play-primary{box-shadow:none;border-radius:12px}
.play-primary:hover{box-shadow:none;background:#e5ff95}
.last-call{background:#2548cc;border-radius:22px}
.last-call>img{width:80px;height:80px;object-fit:contain;border-radius:0;background:transparent}
.last-call .eyebrow{color:#bdeaf2}
.last-call h2{font-family:var(--display);font-weight:700;letter-spacing:-.045em}
.last-call p:not(.eyebrow){color:#d9e2ff}
.last-call button{background:var(--lime-bright);color:var(--brand-ink);border-radius:100px}
.last-call button:hover{background:#e5ff95}
.choco-empty{object-fit:contain;border-radius:0;background:transparent}
@media(max-width:1050px){.choco-featured{grid-template-columns:1.3fr 1fr 1fr;gap:12px}.feature-play{padding:20px;min-height:305px}.feature-rally .feature-info>strong{font-size:2.3rem}.feature-info>strong{font-size:1.6rem}.feature-info>span:not(.feature-cta):not(.feature-link):not(.eyebrow){font-size:.875rem}.feature-info>.eyebrow{display:none}}
@media(max-width:700px){.site-header .brand,.site-footer .brand{font-size:26px}.choco-welcome{align-items:flex-start;flex-wrap:wrap;gap:18px;padding:26px 0 23px}.choco-welcome>div{flex:1 0 100%}.choco-welcome h1{font-size:clamp(2.45rem,9.8vw,4rem)}.choco-welcome .eyebrow{font-size:.75rem;letter-spacing:.06em;margin-bottom:10px}.choco-welcome .shuffle-button{min-height:46px;padding:10px 17px;font-size:.875rem}.choco-featured{grid-template-columns:1fr 1fr;gap:12px}.feature-rally{grid-column:1/-1;min-height:225px}.feature-play{padding:18px;border-radius:17px;min-height:218px}.feature-rally>img{object-position:center 43%}.feature-info{gap:7px;margin-top:32px}.feature-rally .feature-info{margin-top:30px}.feature-info>strong{font-size:1.35rem}.feature-rally .feature-info>strong{font-size:2rem}.feature-tag{font-size:.75rem;padding:5px 7px}.feature-info>span:not(.feature-cta):not(.feature-link):not(.eyebrow){font-size:.875rem}.feature-link{font-size:.875rem;padding-top:11px;margin-top:4px}.feature-cta{min-height:44px;padding:10px 14px;gap:24px;font-size:.9375rem}.catalog{padding-top:32px}.catalog-heading h2{font-size:2rem}.last-call{grid-template-columns:56px 1fr;padding:24px 20px}.last-call>img{width:52px;height:52px}.last-call h2{font-size:1.8rem}}
@media(max-width:380px){.feature-play{padding:14px}.feature-tag{font-size:.75rem;letter-spacing:0}.feature-info>strong{font-size:1.2rem}.feature-info>span:not(.feature-cta):not(.feature-link):not(.eyebrow){font-size:.875rem}.feature-link{font-size:.875rem;gap:5px}}
@media(prefers-reduced-motion:reduce){.feature-play>img{transition:none}.feature-play:hover>img{transform:none}}