/* Coinflip: T (tan and orange) versus CT (navy and blue). */
:root{--t-main:#c9852e;--t-deep:#3a2614;--t-light:#f2b25c;--ct-main:#2f6fc4;--ct-deep:#0f2140;--ct-light:#8fc2ff}
.cs2-flip-tile{background:radial-gradient(circle at 25% 20%,#c9852e55,transparent 45%),radial-gradient(circle at 80% 80%,#2f6fc455,transparent 45%),linear-gradient(140deg,#2a2419,#141c26)}

/* Coin faces and small badges */
.coin-face{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden}
.coin-face svg{width:68%;height:68%}
.coin-face b{position:absolute;bottom:9%;font:800 clamp(7px,14%,22px)/1 system-ui,sans-serif;letter-spacing:.08em}
.coin-t{background:radial-gradient(circle at 35% 30%,var(--t-light),var(--t-main) 55%,var(--t-deep));box-shadow:inset 0 0 0 3px #f7c77d,inset 0 0 0 6px #8a5520}
.coin-t b{color:#2b1d10}
.coin-ct{background:radial-gradient(circle at 35% 30%,#5c97e0,var(--ct-main) 50%,var(--ct-deep));box-shadow:inset 0 0 0 3px #b8d8ff,inset 0 0 0 6px #1b3d73}
.coin-ct b{color:#e6f1ff}
.coin-badge{display:inline-block;flex-shrink:0;width:42px;height:42px;border-radius:50%;box-shadow:0 3px 10px #0008}
.coin-badge .coin-face b{display:none}

/* Side picker */
.coinflip-create{margin-bottom:28px}.coinflip-create h3{font-size:26px;margin:0}
.coinflip-sides{display:flex;gap:10px;flex-wrap:wrap}
.coin-choice{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;font-size:14px}
.coin-choice .coin-badge{width:36px;height:36px}
.coin-choice[data-flip-side=t][aria-pressed=true]{background:var(--t-main);border-color:var(--t-light);color:#22170b;box-shadow:0 0 18px #c9852e55}
.coin-choice[data-flip-side=ct][aria-pressed=true]{background:var(--ct-main);border-color:var(--ct-light);color:#f2f7ff;box-shadow:0 0 18px #2f6fc455}

/* Skin pickers */
.flip-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:400px;overflow:auto;padding:3px}
.flip-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 10px;border:1px solid #ffffff14;border-bottom:3px solid var(--rarity);border-radius:9px;background:var(--surface-sunken);color:var(--text);font:inherit;cursor:pointer;min-width:0;transition:border-color .15s,transform .15s}
.flip-item:hover{transform:translateY(-2px);border-color:#dec78966}
.flip-item[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 16px #dec78933}
.flip-item[aria-pressed=true]::after{content:'✓';position:absolute;top:5px;right:7px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:var(--on-gold);font-size:11px;font-weight:800;display:grid;place-items:center}
.flip-item .skin-photo{height:56px}.flip-item span{font-size:12px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flip-item small{font-size:10px;color:var(--text-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flip-item b{font-size:12px;color:var(--gold-bright)}
.flip-create-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px}.flip-create-foot .primary{width:auto;padding:14px 28px}

/* Lobby list */
.flip-list-title{font-size:28px;margin:0 0 14px}
.flip-list{display:grid;gap:12px}
.flip-card{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border:1px solid #ffffff14;border-radius:14px;background:var(--surface)}
.flip-card.flip-done{opacity:.8}
.flip-side{display:flex;align-items:center;gap:12px;min-width:0}.flip-side strong{display:block;font-size:14px}.flip-side small{display:block;color:var(--text-muted);font-size:11px;margin-top:2px}
.flip-vs{font:700 13px Georgia,serif;color:var(--gold-deep);letter-spacing:.1em}
.flip-thumbs{display:flex;gap:2px;margin-top:6px;flex-wrap:wrap}.flip-thumbs img{width:40px;height:26px;object-fit:contain;filter:drop-shadow(0 2px 2px #0008)}
.flip-actions{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.flip-actions .primary,.flip-actions .control-button{width:auto;padding:10px 14px;font-size:12px;white-space:nowrap}
.flip-winner{font-size:11px;color:var(--gold-bright)}
@media(max-width:760px){.flip-card{grid-template-columns:1fr;gap:10px}.flip-vs{justify-self:start}.flip-actions{align-items:stretch}}

/* Flip dialog and the 3D coin */
.flip-dialog{width:min(640px,94vw)}.flip-join-dialog{width:min(720px,94vw)}
.flip-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:6px 0 10px}
.flip-player{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;min-width:0}.flip-player strong{font-size:14px}.flip-player small{color:var(--gold-bright);font-size:12px}.flip-player .flip-thumbs{justify-content:center}
.coin-wrap{width:140px;height:140px;perspective:700px}
.coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(0)}
.coin-side{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;box-shadow:0 10px 26px #000a}
.coin-side-ct{transform:rotateY(180deg)}
.coin-spinning{animation:coin-spin .5s linear infinite}
.coin-land-t{animation:coin-land-t 1s cubic-bezier(.2,.7,.25,1) both}
.coin-land-ct{animation:coin-land-ct 1s cubic-bezier(.2,.7,.25,1) both}
@keyframes coin-spin{from{transform:rotateY(0) translateY(0)}50%{transform:rotateY(180deg) translateY(-14px)}to{transform:rotateY(360deg) translateY(0)}}
@keyframes coin-land-t{from{transform:rotateY(0)}to{transform:rotateY(1080deg)}}
@keyframes coin-land-ct{from{transform:rotateY(0)}to{transform:rotateY(1260deg)}}
.flip-result{text-align:center;font:20px Georgia,serif;color:var(--gold-bright);min-height:1.5em;margin:6px 0 16px}
@media(max-width:520px){.flip-stage{grid-template-columns:1fr 1fr}.coin-wrap{grid-column:1/-1;grid-row:1;justify-self:center;width:110px;height:110px}}
@media(prefers-reduced-motion:reduce){.coin-spinning{animation:none}.coin-land-t{animation:none;transform:rotateY(0)}.coin-land-ct{animation:none;transform:rotateY(180deg)}.flip-item{transition:none}}