@charset "UTF-8";
/* The 2.75 Lobby and Games views (design-275 §8; home-design-spec §4–§10, §14, §15). Kit colours only: the tints derive from the kit
   variables with color-mix, so a kit change carries through. Green means online and nothing else; orange playing; blue searching;
   yellow flashes the counted actions; red HOT; violet Editor's choice. */
:root{--deep:color-mix(in srgb,var(--bg) 82%,#000);--orange-text:color-mix(in srgb,var(--tone-orange) 62%,#fff);--count-green:var(--tone-green);--count-orange:var(--tone-orange);--count-blue:var(--tone-blue);--count-yellow:var(--action)}

/* --- Hero block and the live grid --- */
.lobby-hero-block{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:32px;align-items:center;min-height:360px;margin:0 0 28px;padding:40px;border:1px solid var(--line);border-radius:16px;background:var(--deep);overflow:hidden;isolation:isolate}
.live-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--line) 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 22%,transparent) 1px,transparent 1px),radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 42%),radial-gradient(circle at 82% 78%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 46%);background-size:44px 44px,44px 44px,22px 22px,22px 22px,100% 100%,100% 100%;-webkit-mask-image:radial-gradient(ellipse at center,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse at center,#000 55%,transparent 100%)}
.grid-layer{position:absolute;inset:0;opacity:0;animation:lobby-grid-fade var(--cycle,18s) ease-in-out var(--delay,0s) infinite}
.grid-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;opacity:var(--peak,.75);transition:opacity .6s ease}
.grid-dot.entering{animation:lobby-dot-in .6s ease both}.grid-dot.leaving{opacity:0}
.grid-dot.dot-green{background:radial-gradient(circle,var(--count-green) 0 3px,color-mix(in srgb,var(--count-green) 35%,transparent) 4px,transparent 7px)}
.grid-dot.dot-orange{background:radial-gradient(circle,var(--count-orange) 0 3px,color-mix(in srgb,var(--count-orange) 35%,transparent) 4px,transparent 7px)}
.grid-dot.dot-blue{background:radial-gradient(circle,var(--count-blue) 0 3px,color-mix(in srgb,var(--count-blue) 35%,transparent) 4px,transparent 7px)}
.grid-flash{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,var(--count-yellow) 0 3px,color-mix(in srgb,var(--count-yellow) 40%,transparent) 4px,transparent 8px);animation:lobby-flash 1.5s ease-out both}
.live-grid.paused .grid-layer,.live-grid.paused .grid-flash{animation-play-state:paused}
.live-grid.reduced .grid-layer{animation:none;opacity:1}.live-grid.reduced .grid-dot{animation:none;transition:none;opacity:.7}.live-grid.reduced .grid-flash{display:none}
.grid-dot.leaving,.live-grid.reduced .grid-dot.leaving{animation:none;opacity:0}
@keyframes lobby-grid-fade{0%,100%{opacity:0}35%,65%{opacity:1}}
@keyframes lobby-dot-in{from{opacity:0}to{opacity:var(--peak,.75)}}
@keyframes lobby-flash{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.lobby-hero-copy{position:relative;min-width:0}
.lobby-headline{font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-1.5px;margin:0 0 20px}
.lobby-headline:focus{outline:none}.lobby-accent{color:var(--gold)}
.lobby-band{display:none}

/* --- Fact chips --- */
.fact-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;max-width:560px}
.fact-chip{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;padding:7px 12px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 88%,transparent);font-size:11.5px;line-height:1.35;color:var(--text)}
.fact-chip span{min-width:0;overflow-wrap:anywhere}.fact-chip .fact-icon{width:14px;height:14px;color:var(--gold)}

/* --- Counts card (spec §7.1) --- */
.counts-card{position:relative;align-self:center;padding:20px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:var(--shadow)}
.count-rows{display:grid;gap:14px}
.count-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.count-copy{display:flex;flex-direction:column;min-width:0}.count-label{font-weight:650;font-size:13px}.count-caption{font-size:11.5px;color:var(--muted)}
.count-figure{display:inline-flex;align-items:center;gap:6px}
.count-number{font-size:26px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.count-green{color:var(--count-green)}.count-orange{color:var(--orange-text)}.count-blue{color:var(--count-blue)}
.count-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.count-dot-green{background:var(--count-green);box-shadow:0 0 10px color-mix(in srgb,var(--count-green) 60%,transparent)}
.count-dot-orange{background:var(--count-orange);box-shadow:0 0 10px color-mix(in srgb,var(--count-orange) 55%,transparent)}
.count-dot-blue{background:var(--count-blue);box-shadow:0 0 10px color-mix(in srgb,var(--count-blue) 55%,transparent)}
.count-dot-yellow{background:var(--count-yellow);box-shadow:0 0 10px color-mix(in srgb,var(--count-yellow) 55%,transparent)}
.count-dot.pulse{position:relative}.count-dot.pulse:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--count-green);opacity:0;animation:lobby-pulse 2.4s ease-out infinite}
@keyframes lobby-pulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
.count-shimmer{display:inline-block;width:52px;height:24px;border-radius:6px;background:linear-gradient(90deg,var(--raised),color-mix(in srgb,var(--raised) 60%,var(--line)),var(--raised));background-size:200% 100%;animation:lobby-shimmer 1.4s linear infinite}
@keyframes lobby-shimmer{to{background-position:-200% 0}}
.count-key{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.count-key:empty{display:none}.key-title{font-weight:650;color:var(--text)}.key-entry{display:inline-flex;align-items:center;gap:5px}.key-entry .count-dot{width:8px;height:8px}
.count-disclosure{margin:12px 0 0;font-size:12px;color:var(--muted)}.count-disclosure summary{cursor:pointer;color:var(--gold);font-size:12px}.count-disclosure p{margin:8px 0 0;line-height:1.6}
.count-foot{display:flex;gap:6px;align-items:flex-start;margin:12px 0 0;font-size:11px;color:var(--muted)}.count-foot .icon{width:13px;height:13px;margin-top:2px}

/* --- Signed-in welcome block (spec §6) --- */
.lobby-welcome{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.lobby-welcome-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.lobby-welcome-title{font-size:clamp(28px,4vw,40px);margin:0}
.primary-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:5px 12px 5px 6px;border:1px solid var(--line);border-radius:17px;background:var(--surface);font-size:13px;color:var(--text)}
.primary-chip strong{color:var(--gold)}.primary-chip:hover{border-color:var(--gold)}.primary-chip-chevron{width:15px;height:15px;transform:rotate(-90deg);color:var(--muted)}
.currency-coin{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--gold) 16%,var(--surface));color:var(--gold);flex-shrink:0}
.currency-coin .icon{width:16px;height:16px}.currency-coin.coin-inr{color:var(--tone-blue);background:color-mix(in srgb,var(--tone-blue) 14%,var(--surface))}
.lobby-state{display:flex;align-items:center;gap:14px;width:100%;max-width:560px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}
.lobby-continue{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}.lobby-searches{border-color:color-mix(in srgb,var(--count-blue) 55%,var(--line))}
.lobby-state-icon{width:40px;height:40px;border-radius:9px;flex-shrink:0}
.lobby-state-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.lobby-state-copy p,.lobby-searches-line{margin:0;font-size:12px;color:var(--muted)}
.lobby-state-copy .eyebrow{margin:0}.lobby-searches .eyebrow{color:var(--count-blue)}.lobby-state-arrow{color:var(--count-blue)}
.lobby-idle{margin:0;color:var(--muted);font-size:13px}

/* --- Leaderboard and wins (spec §9) --- */
.lobby-columns{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:24px;align-items:start;margin-bottom:28px}
.lobby-board,.lobby-wins{min-width:0}
.lobby-wins{position:sticky;top:96px}
.board-head h2{display:flex;align-items:center;gap:10px}.currency-label{display:inline-flex;padding:2px 8px;border:1px solid var(--line);border-radius:10px;font-size:11px;font-weight:650;color:var(--gold);letter-spacing:.4px}
.board-caption{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-size:12px;color:var(--muted)}.board-caption .currency-coin{width:20px;height:20px}.board-caption .currency-coin .icon{width:13px;height:13px}
.board-hint{margin:4px 0 0;font-size:12px;color:var(--muted)}
.board-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 10px}
.board-chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);font-size:12px;font-weight:600;color:var(--text)}
.board-chip img{width:20px;height:20px;border-radius:5px}.board-chip .icon{width:16px;height:16px}
.board-chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
.board-note{margin:0 0 12px;font-size:12px;color:var(--muted)}
.board-table table{width:100%}.board-rank{display:inline-flex;width:24px;justify-content:center;font-weight:700;color:var(--muted)}.board-rank.top{color:var(--gold)}
.board-player{display:flex;align-items:center;gap:10px;min-width:0}.board-player small{color:var(--muted)}
.avatar-initial{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--raised);font-weight:700;font-size:13px;color:var(--text);flex-shrink:0}
.board-net{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}.board-net.inr{min-width:142px}
.board-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.board-count{margin:0;font-size:12px;color:var(--muted)}
.board-pager{display:flex;align-items:center;gap:6px}.board-page,.board-step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:36px;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:12px;color:var(--text)}
.board-page.current{border-color:var(--gold);color:var(--gold)}.board-gap{color:var(--muted)}.board-step .icon{width:15px;height:15px}
.board-empty{margin:12px 0;color:var(--muted);font-size:13px}
.wins-head h2{margin:0}.win-list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.win-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"avatar who profit" "avatar game profit";gap:2px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.win-row:last-child{border-bottom:0}.win-row .avatar-initial{grid-area:avatar}.win-who{grid-area:who;display:flex;gap:6px;align-items:baseline;min-width:0}.win-who small{color:var(--muted)}
.win-name{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.win-game{grid-area:game;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.win-game img{width:18px;height:18px;border-radius:4px}
.win-profit{grid-area:profit;font-variant-numeric:tabular-nums;color:var(--text);text-align:right}.win-profit .unit{font-size:11px;color:var(--muted);font-weight:500}

/* --- How rounds are checked (guests) --- */
.lobby-checks{margin:0 0 28px}.check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.check-card{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.check-card h3{margin:10px 0 6px}.check-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}.check-card .check-icon{width:22px;height:22px;color:var(--gold)}

/* --- Games tab (spec §10) --- */
.games-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}.games-head h1:focus{outline:none}
.games-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.games-tools .search-field{min-width:220px}
.games-filter{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.games-filter-option{min-height:38px;padding:0 14px;border:0;border-right:1px solid var(--line);background:transparent;font-size:12px;font-weight:600;color:var(--muted)}
.games-filter-option:last-child{border-right:0}.games-filter-option[aria-pressed="true"]{color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold)}
#featured-game{margin-bottom:28px}
.hero-title{font-size:clamp(32px,4.5vw,52px);line-height:1.05;letter-spacing:-1.2px;margin:0 0 12px}
.hero-searching{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid color-mix(in srgb,var(--count-blue) 45%,var(--line));border-radius:14px;font-size:12px;color:var(--count-blue)}
.paused-action{border-style:dashed;color:var(--muted);cursor:default;background:transparent}.paused-action .icon{width:15px;height:15px}.hero-paused-note{margin:8px 0 0;font-size:12px;color:var(--muted)}
.resume-action{border-color:var(--gold);color:var(--gold)}
.games-section{margin:0 0 28px}.games-section-head{margin:0 0 12px}.games-section-head h2{margin:0}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.game-tile{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:transform .15s,border-color .15s}
.game-tile:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.game-tile.tile-resume{border-color:var(--gold)}.game-tile.tile-search{border-color:var(--count-blue)}
.game-tile.tile-paused{cursor:default}.game-tile.tile-paused:hover{transform:none;border-color:var(--line)}.game-tile.tile-paused .tile-icon{opacity:.55}
.tile-icon.game-list-icon-frame{flex-basis:56px;width:56px;height:56px}
.tile-body{min-width:0}.tile-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;font-size:15px}
.tile-link{color:var(--text)}.tile-link:after{content:"";position:absolute;inset:0;border-radius:inherit}a.tile-link:focus-visible{outline:none}a.tile-link:focus-visible:after{outline:2px solid var(--gold);outline-offset:2px}
.tile-desc{margin:4px 0 0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:24px;margin-top:6px}
.tile-marker{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:650}.tile-marker .icon{width:12px;height:12px}
.marker-resume{color:var(--gold);background:var(--gold-soft)}.marker-search{color:var(--count-blue);background:color-mix(in srgb,var(--count-blue) 12%,transparent)}.marker-paused{color:var(--muted);border:1px dashed var(--line)}
.tile-searching{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;color:var(--count-blue)}.tile-searching .count-dot{width:8px;height:8px}
.tile-arrow{color:var(--muted);transition:transform .15s}.game-tile:hover .tile-arrow{transform:translateX(3px);color:var(--gold)}.game-tile.tile-paused:hover .tile-arrow{transform:none;color:var(--muted)}
.game-tile .count-info,.game-tile .game-pick,.game-tile .game-request-count,.game-tile .game-cancellation-count{position:relative;z-index:1}
.games-empty{color:var(--muted)}

/* --- Layout (spec §15) --- */
@media(max-width:1180px){.check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){
 .lobby-hero-block{grid-template-columns:1fr;gap:0;padding:28px 22px}
 .lobby-band{display:block;height:96px}
 .lobby-columns{grid-template-columns:1fr}.lobby-wins{position:static}
}
@media(max-width:700px){
 .lobby-hero-block{padding:24px 16px}.lobby-band{height:120px}.lobby-headline{font-size:36px}
 .primary-chip{min-height:40px}
 .check-grid{grid-template-columns:1fr}
 .games-grid{grid-template-columns:1fr}.tile-icon.game-list-icon-frame{flex-basis:52px;width:52px;height:52px}
 .games-tools,.games-tools .search-field{width:100%}
 .board-step-label{display:none}.board-net.inr{min-width:112px}
 /* Review round 1: the phone pager fits 7 page numbers and both arrows on a 360 px screen (288 px inside the panel); wrapping is the
    safety net, never a horizontal scroll. */
 .board-foot{flex-direction:column;align-items:stretch}.board-pager{flex-wrap:wrap;justify-content:space-between;gap:2px}
 .board-page{min-width:28px;padding:0 4px}.board-step{width:36px;min-width:36px;padding:0}
 .win-profit .unit{display:block}
}
@media(max-height:500px){.lobby-wins{top:16px}}
@media(prefers-reduced-motion:reduce){.grid-layer{animation:none;opacity:1}.grid-dot{transition:none}.grid-flash{display:none}.count-dot.pulse:after{animation:none;display:none}.count-shimmer{animation:none}.game-tile,.tile-arrow{transition:none}}
@media(forced-colors:active){.board-chip[aria-pressed="true"],.games-filter-option[aria-pressed="true"]{outline:2px solid Highlight}}