/* CLINK! on the shared engine: a late-night pub bar top. Dark walnut, brass rails, cream sign lettering, and every
   player's own drink colour. Alfa Slab One for the signs, Nunito Sans for reading. Scoped to html[data-game="ck"] and
   .ck (ck-prefixed classes). The phone is the glass: one canvas in the middle, the round's controls over it. */
@import url('/css/fonts-game.css');

html[data-game="ck"] {
  --wood: #2a1a10; --wood-d: #170d07; --wood-l: #4a2e1b; --brass: #d9a441; --brass-d: #9a6d1f; --cream: #f6ead0; --red: #d8442f; --green: #6fbf5a;
  --slab: 'Alfa Slab One', 'Rockwell', Georgia, serif; --sans: 'Nunito Sans', system-ui, sans-serif;
  --ink-2: #21140c; --ink-3: #3a2415; --paper: #f6ead0; --paper-2: #e6d3a8; --paper-ink: #1c110a;
  --pink: #d8442f; --pink-deep: #96281a; --blue: #b9822a; --blue-deep: #7d5514; --yellow: #d9a441; --yellow-deep: #9a6d1f;
  --orange: #e2792b; --mint: #6fbf5a; --good: #6fbf5a; --bad: #d8442f;
  --display: 'Alfa Slab One', 'Rockwell', Georgia, serif;
  background: var(--wood-d);
}
html[data-game="ck"] body {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 190, 90, .16), transparent 60%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .0) 0 38px, rgba(0, 0, 0, .16) 38px 40px, rgba(255, 200, 140, .03) 40px 96px, rgba(0, 0, 0, .2) 96px 97px),
    repeating-linear-gradient(88deg, rgba(255, 190, 120, .035) 0 7px, transparent 7px 19px),
    linear-gradient(180deg, #3a2314, #1c1009 70%, #120a05) fixed;
  background-attachment: fixed;
}
html[data-game="ck"] .studio { background: transparent; }
html[data-game="ck"] .h1, html[data-game="ck"] .h2, html[data-game="ck"] .h3, html[data-game="ck"] .display { font-family: var(--slab); font-weight: 400; text-transform: none; letter-spacing: .01em; }
html[data-game="ck"] .btn { font-family: var(--sans); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
html[data-game="ck"] .ck-homelogo { display: grid; place-items: center; padding: 6px 0; }
html[data-game="ck"] .ck-lobbycard { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
html[data-game="ck"] .ck-lobby-art { width: 86px; grid-row: span 2; }
html[data-game="ck"] .ck-lobby-art svg { width: 100%; display: block; }
html[data-game="ck"] .ck-lobby-art path[stroke="#fff"] { stroke: #1c110a; }
html[data-game="ck"] .ck-lobby-plan { font-weight: 900; margin-top: 4px; }

/* the logo: two glasses that knock together over a slab sign */
.ck-logo { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ck-logo-g { width: clamp(120px, 38vw, 190px); }
.ck-logo-g svg { display: block; width: 100%; overflow: visible; }
.ck-logo span { font: 400 clamp(54px, 17vw, 92px)/.95 'Alfa Slab One', Georgia, serif; color: #f6ead0; letter-spacing: .02em; text-shadow: 0 4px 0 #9a6d1f, 0 8px 0 #170d07, 0 12px 22px rgba(0, 0, 0, .6); }
.ck-lg { transform-box: fill-box; transform-origin: 50% 100%; }
.ck-lg.l { animation: ckKnockL 2.6s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.ck-lg.r { animation: ckKnockR 2.6s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.ck-spark { animation: ckSpark 2.6s linear infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ckKnockL { 0%, 55%, 100% { transform: rotate(-4deg); } 22% { transform: translateX(11px) rotate(13deg); } 30% { transform: translateX(6px) rotate(6deg); } }
@keyframes ckKnockR { 0%, 55%, 100% { transform: rotate(4deg); } 22% { transform: translateX(-11px) rotate(-13deg); } 30% { transform: translateX(-6px) rotate(-6deg); } }
@keyframes ckSpark { 0%, 18%, 44%, 100% { opacity: 0; transform: scale(.4); } 23% { opacity: 1; transform: scale(1.25); } 34% { opacity: .5; transform: scale(1); } }
.tv .ck-logo-g { width: clamp(200px, 18vw, 340px); } .tv .ck-logo span { font-size: clamp(90px, 10vw, 190px); }
.ck-logo.small .ck-logo-g { width: 84px; } .ck-logo.small span { font-size: 40px; text-shadow: 0 3px 0 #9a6d1f, 0 6px 0 #170d07; }
.ck-logo.drop { animation: ckDrop .8s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes ckDrop { from { transform: translateY(-60vh) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

.ck { --wood: #2a1a10; --wood-d: #170d07; --brass: #d9a441; --brass-d: #9a6d1f; --cream: #f6ead0; --red: #d8442f; --green: #6fbf5a; --slab: 'Alfa Slab One', Georgia, serif; --sans: 'Nunito Sans', system-ui, sans-serif;
  font: 700 16px/1.35 var(--sans); color: var(--cream); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.ck button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ck button:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.ck h2 { margin: 0; font: 400 28px/1.1 var(--slab); }
.ck p { margin: 0; }
.ck-center { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.ck-col { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.ck-tag { font: 900 15px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.tv .ck-tag { font-size: clamp(18px, 2vw, 34px); }
.ck-card { width: min(100%, 560px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 22px 18px; border-radius: 18px; background: linear-gradient(180deg, #3a2415, #21140c); border: 2px solid var(--brass-d); box-shadow: 0 0 0 4px #170d07, 0 18px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 220, 160, .18); }
.tv .ck-card { width: min(90%, 900px); font-size: 22px; }

/* ------------------------------------------------------------ the play screen: head, stage (glass + round), tray */
.ck-play { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding-top: env(safe-area-inset-top, 0px); }
.ck-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px 12px; position: relative; background: linear-gradient(180deg, rgba(23, 13, 7, .85), rgba(23, 13, 7, .35)); }
.ck-rd { font: 400 17px/1 var(--slab); letter-spacing: .03em; color: var(--cream); }
.ck-mine { font: 900 13px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--c, var(--brass)); text-shadow: 0 1px 0 #000; }
.ck-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0, 0, 0, .5); }
.ck-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-d), var(--brass), #ffe9a8); transform-origin: 0 50%; will-change: transform; }
.ck-stage { flex: 1; min-height: 0; position: relative; }
.ck-glass { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .35s, filter .35s; }
.ck-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px 16px; text-align: center; overflow-y: auto; }
.ck-ui.in > * { animation: ckIn .38s cubic-bezier(.2, 1.3, .4, 1) both; }
.ck-ui.in > *:nth-child(2) { animation-delay: .06s; } .ck-ui.in > *:nth-child(3) { animation-delay: .12s; } .ck-ui.in > *:nth-child(n+4) { animation-delay: .18s; }
@keyframes ckIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
[data-phase="result"] .ck-glass, [data-phase="over"] .ck-glass, [data-phase="pick"] .ck-glass, [data-phase="seat"] .ck-glass, [data-round="tab"][data-phase="play"] .ck-glass, [data-round="bottle"][data-phase="play"] .ck-glass, [data-phase="play"][data-round="spiked"]:not(.covered) .ck-glass { opacity: .28; filter: blur(2px); }
[data-phase="result"] .ck-ui, [data-phase="over"] .ck-ui { justify-content: flex-start; padding-top: 18px; }
.ck-play.covered:not(.peeking) .ck-glass { filter: brightness(.18) blur(10px); }
.ck-play.bell { animation: ckBell .5s steps(2) 3; }
@keyframes ckBell { 50% { background: rgba(216, 68, 47, .45); } }

.ck-big { font: 400 clamp(26px, 8vw, 40px)/1.08 var(--slab); color: var(--cream); text-shadow: 0 3px 0 #170d07, 0 0 18px rgba(0, 0, 0, .8), 0 0 4px #000; text-wrap: balance; }
.ck-big.go { color: #ffe27a; animation: ckPulse .5s ease-in-out infinite alternate; }
@keyframes ckPulse { to { transform: scale(1.08); } }
.ck-bigh { font: 400 34px/1 var(--slab); color: var(--brass); text-shadow: 0 3px 0 #170d07; }
.ck-k { font: 900 13px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); text-shadow: 0 1px 0 #000, 0 0 10px #000; }
.ck-sub { font: 700 15px/1.35 var(--sans); color: rgba(246, 234, 208, .86); max-width: 34ch; text-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, .9); text-wrap: balance; }
.ck-sub.ck-strong { color: var(--brass); font-weight: 900; }
.ck-chip { display: inline-block; padding: 2px 10px 3px; border-radius: 999px; background: var(--c, var(--brass)); color: #170d07; font: 900 .92em/1.3 var(--sans); text-shadow: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22), 0 1px 0 rgba(0, 0, 0, .5); white-space: nowrap; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.ck-chip.big { font-size: 26px; padding: 6px 18px 8px; max-width: 12ch; }

/* buttons: brass plate, big press */
.ck-bigbtn, .ck-tapme, .ck-nextbtn, .ck-pad { border: 0; border-radius: 20px; background: linear-gradient(180deg, #f3c765, var(--brass) 55%, #b57f22); color: #21140c !important; box-shadow: 0 7px 0 #6e4c12, 0 14px 24px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .5); transition: transform .06s, box-shadow .06s; }
.ck-bigbtn:active, .ck-tapme:active, .ck-nextbtn:active:not(:disabled), .ck-pad.down { transform: translateY(6px); box-shadow: 0 1px 0 #6e4c12, 0 4px 10px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .4); }
.ck-bigbtn { font: 400 34px/1 var(--slab) !important; padding: 20px 44px 22px; }
.ck-bigbtn.red { background: linear-gradient(180deg, #ff7a5c, var(--red) 55%, #a82a18); color: #fff !important; box-shadow: 0 7px 0 #6b1a0e, 0 14px 24px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .4); }
.ck-tapme { width: min(58vw, 230px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; animation: ckBreathe 1.3s ease-in-out infinite alternate; }
.ck-tapme b { font: 400 54px/1 var(--slab); } .ck-tapme span { font: 900 14px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
@keyframes ckBreathe { to { transform: scale(1.05); } }
.ck-pad { width: min(64vw, 250px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; touch-action: none; background: radial-gradient(circle at 50% 35%, rgba(255, 233, 168, .95), rgba(217, 164, 65, .9) 60%, rgba(154, 109, 31, .92)); }
.ck-pad b { font: 400 44px/1 var(--slab); } .ck-pad span { font: 900 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; max-width: 16ch; }
.ck-pad.down { filter: brightness(1.15); box-shadow: 0 1px 0 #6e4c12, 0 0 0 10px rgba(255, 226, 122, .25), 0 0 40px rgba(255, 226, 122, .5); }
.ck-pad[disabled] { opacity: .35; pointer-events: none; }
.ck-nextbtn { font: 400 22px/1 var(--slab) !important; padding: 15px 30px 17px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; flex: none; }
.ck-nextbtn:disabled { filter: grayscale(.7) brightness(.75); }
.ck-nextbtn small { flex-basis: 100%; font: 900 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.ck-nextbtn small:empty { display: none; }
.ck-ghost { border: 2px solid rgba(246, 234, 208, .4); background: rgba(23, 13, 7, .6); border-radius: 14px; padding: 11px 16px; font: 800 14px/1.2 var(--sans) !important; }
.ck-wait-s { font: 900 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 234, 208, .65); flex: none; }

/* the tray: everyone's glass, as full as theirs */
.ck-tray { flex: none; display: flex; gap: 6px; justify-content: safe center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; background: linear-gradient(180deg, #4a2e1b, #2a1a10); border-top: 3px solid var(--brass-d); box-shadow: 0 -8px 20px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 220, 160, .2); scrollbar-width: none; }
.ck-mini { position: relative; flex: none; width: 50px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ck-mini i { position: relative; display: block; width: 26px; height: 36px; border: 2px solid rgba(255, 255, 255, .75); border-top-width: 1px; border-radius: 2px 2px 6px 6px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: rgba(255, 255, 255, .08); overflow: hidden; }
.ck-mini u { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f, 1) * 100%); background: var(--c); border-top: 3px solid rgba(255, 255, 255, .85); transition: height .9s cubic-bezier(.3, 1.4, .5, 1); }
.ck-mini span { font: 800 10.5px/1 var(--sans); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(246, 234, 208, .8); }
.ck-mini.me span { color: var(--brass); }
.ck-mini.me i { box-shadow: 0 0 0 2px var(--brass); }
.ck-mini b { position: absolute; top: -6px; right: 0; min-width: 20px; padding: 2px 4px; border-radius: 999px; background: var(--red); color: #fff; font: 900 11px/1 var(--sans); animation: ckPop .5s cubic-bezier(.2, 1.8, .4, 1) both; }
.ck-mini.hit i { animation: ckTip 1s ease-in-out; }
@keyframes ckPop { from { transform: scale(0); } to { transform: none; } }
@keyframes ckTip { 30% { transform: rotate(-24deg) translateY(-4px); } 60% { transform: rotate(-24deg) translateY(-4px); } }

/* seat */
.ck-seats { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; font: 900 14px/1.5 var(--sans); max-width: 40ch; }

/* the round's sign: a hanging pub board */
.ck-sign { position: relative; width: min(88%, 420px); padding: 20px 18px 22px; border-radius: 14px; background: linear-gradient(180deg, #1f3d2c, #132a1e); border: 3px solid var(--brass); box-shadow: 0 0 0 5px #170d07, 0 20px 40px rgba(0, 0, 0, .6), inset 0 0 30px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 8px; transform-origin: 50% -40px; animation: ckSwing 1.1s cubic-bezier(.3, 1.2, .5, 1) both !important; }
.ck-sign::before, .ck-sign::after { content: ''; position: absolute; top: -46px; width: 4px; height: 44px; background: linear-gradient(90deg, #6e4c12, var(--brass), #6e4c12); }
.ck-sign::before { left: 22%; } .ck-sign::after { right: 22%; }
.ck-sign small { font: 900 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.ck-sign b { font: 400 clamp(32px, 10vw, 46px)/1 var(--slab); color: var(--cream); text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.ck-sign p { font: 800 16px/1.3 var(--sans); color: rgba(246, 234, 208, .9); text-wrap: balance; }
@keyframes ckSwing { 0% { transform: translateY(-80vh) rotate(0); } 45% { transform: translateY(0) rotate(5deg); } 65% { transform: rotate(-3deg); } 82% { transform: rotate(1.5deg); } 100% { transform: none; } }

/* choices */
.ck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; width: min(100%, 420px); }
.ck-opt { border: 0; border-radius: 14px; padding: 15px 8px; background: var(--c, var(--brass)); color: #170d07 !important; font: 900 17px/1.1 var(--sans) !important; box-shadow: 0 5px 0 rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform .06s, opacity .2s; }
.ck-opt:active { transform: translateY(4px); }
.ck-opt.on { outline: 4px solid #fff; outline-offset: 2px; transform: scale(1.04); }
.ck-grid:has(.on) .ck-opt:not(.on) { opacity: .5; }
.ck-orders { display: flex; gap: 12px; }
.ck-order { width: 27vw; max-width: 112px; aspect-ratio: .8; border: 0; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, var(--cream) 60%, #dcc79a); color: #21140c !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 6px 0 #6e5a34, 0 12px 20px rgba(0, 0, 0, .5); transition: transform .08s, opacity .2s; }
.ck-order b { font: 400 54px/1 var(--slab); } .ck-order span { font: 900 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ck-order.on { background: linear-gradient(180deg, #ffe27a, var(--brass)); transform: translateY(-8px) rotate(-3deg); }
.ck-orders:has(.on) .ck-order:not(.on) { opacity: .45; }

/* results */
.ck-drink, .ck-safe, .ck-up { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 26px 18px; border-radius: 18px; box-shadow: 0 0 0 4px #170d07, 0 16px 32px rgba(0, 0, 0, .55); animation: ckStamp .5s cubic-bezier(.2, 1.7, .4, 1) both !important; }
.ck-drink { background: linear-gradient(180deg, #e9553d, #a82a18); transform: rotate(-2deg); }
.ck-drink b { font: 400 clamp(44px, 14vw, 64px)/1 var(--slab); color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.ck-safe { background: linear-gradient(180deg, #2f6b45, #1b4029); }
.ck-safe b { font: 400 40px/1 var(--slab); color: #d6ffc4; }
.ck-up { background: repeating-linear-gradient(-45deg, #ffd23f 0 18px, #170d07 18px 36px); padding: 8px; }
.ck-up b, .ck-up span { background: #170d07; width: 100%; padding: 4px 18px; }
.ck-up b { font: 400 clamp(34px, 11vw, 52px)/1 var(--slab); color: #ffd23f; padding-top: 14px; border-radius: 12px 12px 0 0; animation: ckPulse .45s ease-in-out infinite alternate; }
.ck-up span { margin-top: -6px; padding-bottom: 14px; border-radius: 0 0 12px 12px; font: 900 16px/1.2 var(--sans) !important; color: #fff !important; letter-spacing: .04em; }
.ck-drink span, .ck-safe span { font: 800 14px/1.25 var(--sans); color: rgba(255, 255, 255, .92); max-width: 26ch; }
@keyframes ckStamp { from { transform: scale(2.4) rotate(8deg); opacity: 0; } }
.ck-list { flex: none; width: min(100%, 440px); display: flex; flex-direction: column; gap: 6px; }
.ck-line { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; text-align: left; padding: 8px 12px; border-radius: 12px; background: rgba(23, 13, 7, .78); border: 1px solid rgba(217, 164, 65, .35); animation: ckIn .4s both; }
.ck-line b { justify-self: end; font: 400 17px/1 var(--slab); color: #ff8f78; }
.ck-line small { grid-column: 1 / -1; font: 700 12px/1.3 var(--sans); color: rgba(246, 234, 208, .7); }
.ck-line.up { border-color: #ffd23f; background: rgba(60, 44, 0, .85); } .ck-line.up b { color: #ffd23f; }
.ck-board { width: min(100%, 440px); display: flex; flex-direction: column; gap: 5px; flex: none; }
.ck-row { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; text-align: left; padding: 8px 12px; border-radius: 12px; background: rgba(23, 13, 7, .78); border: 1px solid rgba(217, 164, 65, .3); }
.ck-row.me { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.ck-row b { font: 400 16px/1 var(--slab); } .ck-row small { grid-column: 1 / -1; font: 800 11px/1.3 var(--sans); color: #ffd23f; }
.ck-awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 440px); flex: none; }
.ck-award { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; background: linear-gradient(180deg, #f3c765, #b57f22); color: #21140c; animation: ckStamp .5s cubic-bezier(.2, 1.7, .4, 1) both; }
.ck-award b { font: 400 15px/1.05 var(--slab); } .ck-award span { font: 900 14px/1.1 var(--sans); } .ck-award small { font: 700 11px/1.2 var(--sans); opacity: .8; }

/* cheers */
.ck-partners { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ck-pairs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 100%; }
.ck-pair { display: flex; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(23, 13, 7, .7); border: 2px dashed rgba(246, 234, 208, .3); font-size: 12px; }
.ck-pair.done { border: 2px solid var(--green); background: rgba(47, 107, 69, .8); }
/* waterfall */
.ck-chain { display: flex; flex-wrap: wrap; gap: 5px 2px; justify-content: center; align-items: center; font-size: 13px; }
.ck-link { display: inline-flex; align-items: center; gap: 2px; opacity: .55; transition: opacity .2s, transform .2s; }
.ck-link i { font: 900 18px/1 var(--sans); font-style: normal; color: var(--brass); }
.ck-link.held { opacity: 1; } .ck-link.rel { opacity: 1; transform: translateY(5px); } .ck-link.rel .ck-chip { background: #5b6b5e !important; color: #dfe; text-decoration: line-through; }
.ck-link.bad { opacity: 1; } .ck-link.bad .ck-chip { background: var(--red) !important; color: #fff; }
/* steady */
.ck-meter { position: relative; width: min(80%, 300px); height: 26px; border-radius: 999px; background: rgba(23, 13, 7, .8); border: 2px solid var(--brass-d); overflow: hidden; }
.ck-meter i { position: absolute; inset: 0; background: linear-gradient(90deg, #f4b223, var(--red)); transform-origin: 0 50%; transform: scaleX(0); }
.ck-meter span { position: relative; font: 900 11px/22px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.ck-dot { position: fixed; left: 0; top: 0; width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(circle, #fffaf0 0 52%, var(--brass) 54% 64%, #fffaf0 66%); box-shadow: 0 6px 14px rgba(0, 0, 0, .6); pointer-events: none; z-index: 5; }
/* bottle */
.ck-bottle { width: 92px; flex: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); opacity: .5; transition: opacity .2s, transform .25s cubic-bezier(.2, 1.6, .4, 1); transform: scale(.8); }
.ck-bottle.mine { opacity: 1; transform: scale(1.25); }
.ck-bottle svg { display: block; width: 100%; transform-origin: 50% 80%; }
.ck-passrow { display: flex; gap: 10px; width: min(100%, 420px); }
.ck-pass { flex: 1; min-width: 0; border: 0; border-radius: 16px; padding: 20px 8px; background: linear-gradient(180deg, #f3c765, var(--brass) 55%, #b57f22); color: #21140c !important; font: 900 18px/1 var(--sans) !important; box-shadow: 0 6px 0 #6e4c12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; touch-action: none; }
.ck-pass:active { transform: translateY(5px); box-shadow: 0 1px 0 #6e4c12; }

/* final */
.ck-final .ck-card h2 { font-size: 24px; text-wrap: balance; }
.ck-table { width: 100%; border-collapse: collapse; font: 800 14px/1.2 var(--sans); }
.ck-table th { font: 900 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); padding: 4px 6px; text-align: center; }
.ck-table td { padding: 6px; text-align: center; border-top: 1px solid rgba(217, 164, 65, .25); }
.ck-table td:first-child { text-align: left; } .ck-table tr.me td { background: rgba(217, 164, 65, .14); }
.ck-awardline { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font: 700 13px/1.3 var(--sans); } .ck-awardline b { color: var(--brass); }
.ck-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ------------------------------------------------------------ the TV: the table at a glance */
.ck-play.tv .ck-head { padding: 22px 40px; } .ck-play.tv .ck-rd { font-size: clamp(26px, 2.6vw, 46px); }
.ck-play.tv .ck-timer { height: 10px; }
.ck-play.tv .ck-ui { gap: 2.4vh; padding: 3vh 5vw; justify-content: center; }
.ck-play.tv .ck-big { font-size: clamp(44px, 5.4vw, 104px); max-width: 20ch; }
.ck-play.tv .ck-sub, .ck-play.tv .ck-k { font-size: clamp(18px, 1.7vw, 30px); max-width: 50ch; }
.ck-play.tv .ck-sign { width: min(70%, 1000px); padding: 4vh 3vw; } .ck-play.tv .ck-sign b { font-size: clamp(60px, 7vw, 130px); } .ck-play.tv .ck-sign p { font-size: clamp(22px, 2.2vw, 40px); } .ck-play.tv .ck-sign small { font-size: 20px; }
.ck-play.tv .ck-list, .ck-play.tv .ck-board, .ck-play.tv .ck-awards { width: min(80%, 1000px); font-size: 24px; }
.ck-play.tv .ck-line b, .ck-play.tv .ck-row b { font-size: 30px; } .ck-play.tv .ck-line small { font-size: 18px; }
.ck-play.tv .ck-pair, .ck-play.tv .ck-chain, .ck-play.tv .ck-seats { font-size: 26px; }
.ck-play.tv .ck-bottle { width: 14vh; opacity: 1; transform: none; }
.ck-play.tv .ck-tray { gap: 22px; padding: 22px 30px 26px; }
.ck-play.tv .ck-mini { width: 110px; gap: 8px; } .ck-play.tv .ck-mini i { width: 58px; height: 84px; border-width: 3px; } .ck-play.tv .ck-mini span { font-size: 18px; } .ck-play.tv .ck-mini b { font-size: 22px; padding: 4px 8px; }

@media (max-height: 620px) { .ck-pad { width: min(46vw, 180px); } .ck-tapme { width: min(44vw, 170px); } .ck-big { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .ck-lg, .ck-spark, .ck-big.go, .ck-tapme, .ck-up b { animation: none !important; } }