/* Skint styles: a pub poker table on a phone. */
#skint { background: radial-gradient(circle at 50% 30%, #1f3b2a 0%, #0e2217 55%, #060f0a 100%); }
#skint .event-pop { top: calc(env(safe-area-inset-top, 0px) + 60px); }
#skintRoot { overflow: hidden; }

.sk-top { flex: 0 0 auto; display: flex; justify-content: center; gap: 14px; font-size: 12px; color: var(--ink-dim); padding: 4px var(--gutter-r) 0 var(--gutter-l); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.sk-top b { color: var(--brass); }

/* Table */
.sk-table { flex: 1 1 auto; min-height: 250px; position: relative; margin: 6px 8px 0; }
.sk-felt { position: absolute; inset: 10% 6% 4%; border-radius: 50% / 42%; background: radial-gradient(ellipse at 50% 40%, #2f7a4a 0%, #1f5a35 60%, #16432a 100%); border: 7px solid #5a3a1e; box-shadow: inset 0 0 40px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.5), 0 0 0 3px #3a2410; }
.sk-felt::after { content: "SKINT"; position: absolute; left: 50%; top: 74%; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: .3em; color: rgba(255,255,255,.07); pointer-events: none; }
.sk-centre { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; width: 100%; }
.sk-pot { background: rgba(0,0,0,.45); border: 1.5px solid rgba(246,196,83,.5); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis; }
.sk-pot b { color: var(--brass); font-family: var(--display); font-size: 16px; }
.sk-board { display: flex; gap: 5px; justify-content: center; }
.sk-slot { width: 50px; height: 72px; border-radius: 8px; border: 2px dashed rgba(255,255,255,.18); display: grid; place-items: center; }
.sk-slot.in { border: 0; animation: skDeal .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.sk-slot.on { border: 0; }
.sk-slot .card { width: 50px; height: 72px; }
.sk-slot .card .big { font-size: 26px; }
@keyframes skDeal { from { transform: translateY(-30px) rotate(-8deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.sk-street { font-size: 12px; font-weight: 800; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .1em; text-align: center; max-width: 86%; }

/* Seats around the felt */
.sk-seat { position: absolute; transform: translate(-50%, -50%); width: 84px; display: grid; justify-items: center; gap: 2px; z-index: 2; transition: opacity .2s, filter .2s; }
.sk-seat.top { width: 92px; }
.sk-seat-box { display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.55); border: 1.5px solid rgba(255,255,255,.14); border-radius: 999px; padding: 3px 8px 3px 3px; max-width: 100%; transition: border-color .2s, box-shadow .2s; }
.sk-seat-box .avatar { width: 26px; height: 26px; font-size: 11px; }
.sk-seat-txt { display: grid; line-height: 1.1; min-width: 0; }
.sk-seat-txt b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 54px; }
.sk-chips { font-size: 11px; color: var(--brass); font-weight: 800; font-variant-numeric: tabular-nums; }
.sk-chips.big { font-size: 14px; display: block; }
.sk-seat.turn .sk-seat-box { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(246,196,83,.35), 0 0 16px rgba(246,196,83,.5); animation: pulse 1.4s ease-in-out infinite; }
.sk-seat.folded { opacity: .45; filter: grayscale(.7); }
.sk-seat.ghost .sk-seat-box { border-style: dashed; opacity: .75; }
.sk-seat.off { opacity: .4; }
.sk-seat.won .sk-seat-box { border-color: var(--good); box-shadow: 0 0 18px rgba(74,209,124,.6); }
.sk-seat-cards { height: 34px; display: flex; align-items: flex-end; }
.sk-mini { display: flex; gap: 2px; }
.sk-mini .card.sm { width: 24px; height: 34px; box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.sk-mini .card.sm .big { font-size: 13px; } .sk-mini .card.sm .corner { font-size: 7px; top: 2px; left: 3px; } .sk-mini .card.sm .corner small { font-size: 6px; }
.sk-mini .card.back { border-width: 2px; }
.sk-ghost-ic { font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); animation: skFloat 2.4s ease-in-out infinite; }
@keyframes skFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.sk-seat-tags { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: 14px; }
.sk-seat-tags .tag, .sk-me-tags .tag { font-size: 9px; padding: 2px 5px; letter-spacing: .04em; }
.sk-me-tags .tag { font-size: 10px; padding: 3px 7px; }
.sk-btn-d { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--card); color: var(--card-ink); font-family: var(--display); font-weight: 700; font-size: 11px; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.tag.sk-blind { background: rgba(255,255,255,.18); color: var(--ink); }
.tag.sk-tag-allin { background: var(--bad); color: #fff; animation: skPulse 1s infinite; }
.tag.sk-tag-fold { background: rgba(0,0,0,.4); color: var(--ink-dim); }
.tag.sk-tag-ghost { background: rgba(170,190,255,.22); color: #cfd8ff; }
.tag.sk-tag-debt { background: rgba(255,107,90,.25); color: #ffb3a8; }
.tag.sk-tag-bet { background: var(--brass); color: #2a1d05; }
@keyframes skPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.sk-bet { margin-top: 1px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; border: 2px solid #f3ead7; box-shadow: 0 2px 6px rgba(0,0,0,.5); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-bet::before { content: "●"; color: #f3ead7; margin-right: 3px; font-size: 9px; }

/* Me */
.sk-me { flex: 0 0 auto; padding: 8px var(--gutter-r) 2px var(--gutter-l); display: grid; gap: 6px; background: linear-gradient(180deg, rgba(6,15,10,0) 0%, rgba(6,15,10,.9) 40%); position: relative; }
.sk-me-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sk-me-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sk-me-info .avatar { width: 32px; height: 32px; font-size: 13px; }
.sk-me-info b { font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.sk-me-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.sk-me-cards { display: flex; justify-content: center; min-height: 96px; align-items: center; }
.sk-hole { display: flex; gap: 10px; }
.sk-hole .card.lg { width: 68px; height: 96px; transition: transform .2s, opacity .2s; }
.sk-hole .card.lg .big { font-size: 38px; }
.sk-hole .card.lg:first-child { transform: rotate(-5deg); } .sk-hole .card.lg:last-child { transform: rotate(5deg); }
.sk-hole.dim .card { opacity: .35; filter: grayscale(.8); }
.sk-hole .card.sk-best { box-shadow: 0 0 0 3px var(--good), 0 0 18px rgba(74,209,124,.6); }
.sk-label { text-align: center; font-size: 15px; font-weight: 800; color: var(--brass); min-height: 20px; font-family: var(--display); letter-spacing: .02em; }
.sk-label.won { color: var(--good); }
.sk-ghost-big { font-size: 56px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); animation: skFloat 2.4s ease-in-out infinite; }
.sk-haunt-view { display: grid; justify-items: center; gap: 4px; }
.sk-haunt-view small { color: #cfd8ff; font-weight: 800; font-size: 12px; }
.sk-haunt-view .sk-hole .card.lg { width: 54px; height: 76px; box-shadow: 0 0 0 2px #cfd8ff, 0 0 16px rgba(170,190,255,.5); }
.sk-haunt-view .sk-hole .card.lg .big { font-size: 30px; }

/* Flip reveal */
.flip .card { animation: skFlip .6s ease-out both; }
.flip .card:nth-child(2) { animation-delay: .12s; }
@keyframes skFlip { 0% { transform: rotateY(90deg) scale(.9); opacity: 0; } 60% { transform: rotateY(-10deg) scale(1.04); opacity: 1; } 100% { transform: rotateY(0) scale(1); } }
.sk-hole.flip .card.lg:first-child, .sk-hole.flip .card.lg:last-child { transform: none; }

/* Extras + bar */
.sk-extras { flex: 0 0 auto; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 0 var(--gutter-r) 0 var(--gutter-l); min-height: 0; }
.sk-extras:empty { display: none; }
.sk-extras .btn { font-size: 12px; padding: 6px 10px; }
.sk-shark { border-color: rgba(255,107,90,.5) !important; }
.sk-mug { border-color: rgba(246,196,83,.5) !important; }
.sk-haunt { border-color: rgba(170,190,255,.5) !important; color: #cfd8ff !important; }
.sk-bar { flex: 0 0 auto; padding: 6px var(--gutter-r) 8px var(--gutter-l); min-height: 60px; }
.sk-bar .btn { min-height: 48px; }
.sk-bar .sk-fold { flex: 0 0 auto; } .sk-bar .sk-call { flex: 1 1 auto; } .sk-bar .sk-raise { flex: 0 0 auto; }
.sk-raise-panel { width: 100%; display: grid; gap: 6px; background: rgba(0,0,0,.4); border-radius: 14px; padding: 10px 12px; }
.sk-raise-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sk-raise-amt { font-weight: 800; font-size: 14px; }
.sk-raise-amt b { font-family: var(--display); font-size: 24px; color: var(--brass); font-variant-numeric: tabular-nums; }
.sk-raise-amt em { font-style: normal; color: var(--bad); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.sk-raise-panel input[type=range] { width: 100%; accent-color: var(--brass); height: 32px; }
.sk-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sk-presets .btn { min-height: 36px; padding: 6px 4px; font-size: 12px; }
.sk-presets .btn.on { background: var(--brass); color: #2a1d05; border-color: var(--brass); }
.sk-raise-foot { display: flex; gap: 8px; }
.sk-raise-foot .btn:last-child { flex: 1; }
.sk-whisper { display: flex; gap: 6px; flex: 1 1 auto; max-width: 320px; }
.sk-whisper input { flex: 1; min-width: 0; border-radius: 999px; border: 1.5px solid rgba(170,190,255,.4); background: rgba(0,0,0,.4); color: var(--ink); padding: 8px 12px; font-size: 14px; }
.sk-whisper input:disabled { opacity: .5; }
.sk-whisper .btn { min-height: 40px; }
.sk-bar .ticker, #skTicker { padding: 0; }
#skTicker { flex: 0 0 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); }

/* Pickers */
.sk-pick { display: grid; gap: 8px; margin-top: 10px; }
.sk-pick-btn { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.16); border-radius: 14px; padding: 8px 12px; color: var(--ink); text-align: left; font: inherit; }
.sk-pick-btn:active { background: rgba(246,196,83,.2); }
.sk-pick-btn span { display: grid; flex: 1; line-height: 1.2; }
.sk-pick-btn small { color: var(--ink-dim); font-size: 12px; }
.sk-pick-btn em { font-style: normal; font-size: 22px; }

/* Blasts and chips */
.sk-blast-mug { background: rgba(179, 0, 27, .95); }
.sk-blast-shark { background: rgba(10, 40, 80, .96); }
.sk-blast-shark .tb-text { color: #9fd3ff; }
.sk-blast-bust { background: rgba(10, 10, 12, .96); }
.sk-blast-bust .tb-text { font-size: 120px; }
.fly.sk-chip { background: #c0392b; border: 2px solid #f3ead7; border-radius: 999px; font-size: 13px; padding: 4px 9px; opacity: 1; }