/* GODS OF THIRST: a painted Greek vase that moves. Black glaze bands with a meander, a terracotta frieze where the
   night plays out, cream incised lettering, gold for the gods and wine for the drink. Cinzel (carved capitals) and
   Josefin Sans (reading). Scoped to html[data-game="gt"] and .gt (gt- prefixed classes). Sizes inside the play screen
   are in em: the phone's base is 16px, the TV's grows with the screen. */
@import url('/css/fonts-game.css');

html[data-game="gt"] {
  --glaze: #17110d; --glaze-2: #251a13; --clay: #cf6a35; --clay-d: #a94c20; --clay-l: #e58a4f; --cream: #f4e6c4; --gold: #e9b44c; --gold-d: #a8792a; --wine: #8e2a52; --wine-d: #5c1a3a; --olive: #7a8f2e;
  --carve: 'Cinzel', 'Trajan Pro', Georgia, serif; --sans: 'Josefin Sans', system-ui, sans-serif;
  --ink-2: #251a13; --ink-3: #3a281c; --paper: #f4e6c4; --paper-2: #e6cf9c; --paper-ink: #17110d;
  --pink: #8e2a52; --pink-deep: #5c1a3a; --blue: #cf6a35; --blue-deep: #a94c20; --yellow: #e9b44c; --yellow-deep: #a8792a;
  --orange: #e58a4f; --mint: #7a8f2e; --good: #9bbf45; --bad: #c23b3b;
  --display: 'Cinzel', Georgia, serif;
  background: var(--glaze);
}
html[data-game="gt"] body {
  background:
    radial-gradient(110% 60% at 50% 0%, rgba(233, 180, 76, .16), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 24 12'%3E%3Cpath d='M0 10h20V2H6v5h8' fill='none' stroke='%23cf6a35' stroke-opacity='.13' stroke-width='1.4'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #2b1c13, #17110d 70%) fixed;
  background-attachment: fixed;
}
html[data-game="gt"] .studio { background: transparent; }
html[data-game="gt"] .h1, html[data-game="gt"] .h2, html[data-game="gt"] .h3, html[data-game="gt"] .display { font-family: var(--carve); font-weight: 800; letter-spacing: .03em; }
html[data-game="gt"] .btn { font-family: var(--sans); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-game="gt"] .gt-homelogo { display: grid; place-items: center; padding: 6px 0; }
html[data-game="gt"] .gt-lobbycard { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
html[data-game="gt"] .gt-lobby-art { width: 84px; --fig: #17110d; --inc: #cf6a35; }
html[data-game="gt"] .gt-lobby-art svg { width: 100%; display: block; }
html[data-game="gt"] .gt-lobby-plan { font-weight: 700; margin-top: 4px; }

/* ------------------------------------------------------------ base */
.gt { --glaze: #17110d; --glaze-2: #251a13; --clay: #cf6a35; --clay-d: #a94c20; --clay-l: #e58a4f; --cream: #f4e6c4; --gold: #e9b44c; --gold-d: #a8792a; --wine: #8e2a52; --wine-d: #5c1a3a; --olive: #7a8f2e;
  --carve: 'Cinzel', Georgia, serif; --sans: 'Josefin Sans', system-ui, sans-serif;
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 24 12'%3E%3Cpath d='M0 10h20V2H6v5h8' fill='none' stroke='%23e9b44c' stroke-width='1.7'/%3E%3C/svg%3E");
  font: 600 16px/1.3 var(--sans); color: var(--cream); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.gt button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; border: 0; background: none; padding: 0; }
.gt button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gt p, .gt h1, .gt h2 { margin: 0; }
.gt svg { display: block; width: 100%; height: auto; overflow: visible; }
.gt-center { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.gt-col { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.gt-tag { font: 700 14px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.tv .gt-tag { font-size: clamp(18px, 1.8vw, 34px); }
.gt-plate { width: min(100%, 560px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 22px 18px; border-radius: 6px; background: var(--glaze); border: 2px solid var(--gold-d); box-shadow: 0 0 0 5px var(--glaze), 0 0 0 7px var(--clay), 0 18px 40px rgba(0, 0, 0, .55); }
.gt-plate h2 { font: 800 26px/1.1 var(--carve); color: var(--gold); }
.tv .gt-plate { width: min(90%, 1000px); font-size: clamp(18px, 1.5vw, 28px); }

/* the logo: the cup, GODS OF over THIRST, a laurel under it */
.gt-logo { display: flex; flex-direction: column; align-items: center; --fig: #cf6a35; --inc: #17110d; }
.gt-logo-k { width: clamp(90px, 28vw, 140px); animation: gtSway 3.4s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5)); }
.gt-logo-w { display: flex; flex-direction: column; align-items: center; line-height: .9; }
.gt-logo-w small { font: 700 clamp(15px, 4.6vw, 22px)/1 var(--carve); letter-spacing: .55em; margin-right: -.55em; color: #f4e6c4; }
.gt-logo-w b { font: 900 clamp(58px, 19vw, 104px)/.95 var(--carve); letter-spacing: .04em; color: #e9b44c; text-shadow: 0 3px 0 #a8792a, 0 7px 0 #5c1a3a, 0 12px 24px rgba(0, 0, 0, .6); }
.gt-logo-l { width: clamp(110px, 34vw, 170px); margin-top: -4px; }
.gt-logo.tv .gt-logo-k { width: clamp(150px, 12vw, 260px); } .gt-logo.tv .gt-logo-w small { font-size: clamp(22px, 2vw, 44px); } .gt-logo.tv .gt-logo-w b { font-size: clamp(100px, 11vw, 230px); } .gt-logo.tv .gt-logo-l { width: clamp(180px, 15vw, 320px); }
.gt-logo.small .gt-logo-k { width: 56px; } .gt-logo.small .gt-logo-w small { font-size: 11px; } .gt-logo.small .gt-logo-w b { font-size: 40px; text-shadow: 0 2px 0 #a8792a, 0 5px 0 #5c1a3a; } .gt-logo.small .gt-logo-l { width: 80px; }
.gt-logo.drop { animation: gtDrop .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes gtDrop { from { transform: translateY(-60vh) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gtSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* ------------------------------------------------------------ the play frame */
.gt-play { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--glaze); }
.gt-play.tv { font-size: clamp(17px, 1.52vw, 36px); }
.gt-band { height: .75em; min-height: 10px; background: var(--glaze) var(--meander) repeat-x 0 50% / auto 80%; border-block: 2px solid var(--gold-d); animation: gtBand 14s linear infinite; }
@keyframes gtBand { to { background-position-x: 280px; } }
.gt-top { flex: none; position: relative; padding-top: env(safe-area-inset-top, 0px); background: var(--glaze); }
.gt-topin { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: .55em 1em .6em; }
.gt-kick { font: 700 .78em/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.gt-ttl { font: 800 1.05em/1 var(--carve); letter-spacing: .05em; color: var(--cream); text-align: right; }
.gt-timer { height: 5px; background: #000; }
.gt-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--wine), var(--gold), #fff3c4); transform-origin: 0 50%; will-change: transform; }
.tv .gt-timer { height: .4em; }
.gt-stage { flex: 1; min-height: 0; position: relative; color: var(--glaze);
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(255, 190, 120, .35), transparent 70%),
    repeating-linear-gradient(3deg, rgba(23, 17, 13, .05) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--clay-l), var(--clay) 55%, var(--clay-d)); transition: filter .5s; }
.gt-stage::before, .gt-stage::after { content: ''; position: absolute; left: 0; right: 0; height: 5px; background: var(--glaze); opacity: .85; pointer-events: none; }
.gt-stage::before { top: 7px; } .gt-stage::after { bottom: 7px; }
.gt-play.storm .gt-stage { background: radial-gradient(90% 70% at 50% 20%, rgba(140, 150, 200, .3), transparent 70%), linear-gradient(180deg, #2b2a3d, #3e2b33 60%, #5a3424); color: var(--cream); }
.gt-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em; padding: 1.4em 1em; text-align: center; overflow: hidden; }
.gt-play:not(.tv) .gt-ui { overflow-y: auto; }
.gt-ui.in > * { animation: gtIn .42s cubic-bezier(.2, 1.3, .4, 1) both; }
.gt-ui.in > *:nth-child(2) { animation-delay: .07s; } .gt-ui.in > *:nth-child(3) { animation-delay: .14s; } .gt-ui.in > *:nth-child(n+4) { animation-delay: .2s; }
@keyframes gtIn { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
.gt-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gt-flash { position: absolute; inset: 0; background: #fff8d8; animation: gtFlash .8s ease-out both; }
.gt-flash.gold { background: var(--gold); } .gt-flash.wine { background: var(--wine); }
@keyframes gtFlash { from { opacity: .9; } to { opacity: 0; } }
.gt-bit { position: absolute; width: .7em; height: .7em; border-radius: 50% 50% 50% 0; animation: gtBit 1s cubic-bezier(.1, .7, .3, 1) both; }
@keyframes gtBit { from { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 120px)) scale(.3) rotate(200deg); opacity: 0; } }
.gt-play.shake { animation: gtShake .45s linear; }
@keyframes gtShake { 10% { transform: translate(-8px, 4px); } 25% { transform: translate(7px, -5px); } 40% { transform: translate(-6px, -3px); } 60% { transform: translate(5px, 4px); } 80% { transform: translate(-3px, 2px); } }

/* Dionysus and the roster */
.gt-bot { flex: none; background: var(--glaze); padding-bottom: env(safe-area-inset-bottom, 0px); }
.gt-host { display: flex; align-items: center; gap: .7em; padding: .5em .9em .35em; }
.gt-mask { flex: none; width: 3.2em; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)); animation: gtBob 4.5s ease-in-out infinite; }
@keyframes gtBob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
.gt-m-eyes { animation: gtBlink 5s infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes gtBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.gt-m-mouth { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.35); }
.gt-mask.talk .gt-m-mouth { animation: gtTalk .19s ease-in-out infinite alternate; }
@keyframes gtTalk { from { transform: scaleY(.3); } to { transform: scaleY(1.25); } }
.gt-m-brows .l, .gt-m-brows .r { transition: transform .3s; transform-box: fill-box; }
.gt-mask.talk .gt-m-brows .r { transform: translateY(-5px) rotate(-6deg); }
.gt-m-wreath { animation: gtWreath 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes gtWreath { 50% { transform: rotate(1.5deg); } }
.gt-scroll { flex: 1; min-width: 0; text-align: left; }
.gt-scroll small { display: block; font: 700 .62em/1 var(--sans); letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: .3em; }
.gt-speech { font: 600 .95em/1.25 var(--sans); color: var(--cream); min-height: 2.5em; }
.tv .gt-host { padding: .7em 1.6em .4em; gap: 1.2em; }
.tv .gt-mask { width: 6.4em; margin-top: -2.6em; position: relative; z-index: 2; }
.tv .gt-speech { font-size: 1.5em; min-height: 2.5em; }
.gt-roster { padding: .2em .9em .6em; }
.gt-mine { display: flex; align-items: center; gap: .6em; font-size: .92em; }
.gt-mine b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1em/1 var(--carve); color: var(--c); text-align: left; }
.gt-mine .gt-sh { width: 1.9em; }
.gt-stat { display: inline-flex; align-items: center; gap: .3em; font-weight: 700; }
.gt-leaf { display: inline-block; width: 1em; } .gt-drop { display: inline-block; width: .7em; height: .7em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #c0457a; }
.gt-pip { display: inline-block; width: .6em; height: .85em; border-radius: 2px; background: var(--gold); border: 1px solid #000; }
.gt-stat.cards { color: var(--gold); font-size: .85em; }
.tv .gt-roster { display: flex; justify-content: center; flex-wrap: wrap; gap: .4em 1.1em; padding: .1em 1.4em .7em; }
.gt-seat { display: flex; align-items: center; gap: .45em; padding: .25em .7em .25em .3em; border-radius: 99px; border: 2px solid transparent; transition: transform .3s, border-color .3s, background .3s; }
.gt-seat .gt-sh { width: 1.8em; }
.gt-seat > span { font: 800 .85em/1 var(--carve); color: var(--c); max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-seat-s { display: flex; gap: .55em; font-size: .78em; } .gt-seat-s b { display: inline-flex; align-items: center; gap: .25em; } .gt-seat-s .sip { color: #e58fb2; } .gt-seat-s .cards { gap: 2px; }
.gt-seat.win { border-color: var(--gold); background: rgba(233, 180, 76, .16); transform: translateY(-3px); }
.gt-seat.hit { border-color: var(--wine); background: rgba(142, 42, 82, .35); }

/* shields and players */
.gt-sh { width: 2.8em; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 45%), var(--c); border: .16em solid #17110d; box-shadow: inset 0 0 0 .14em var(--c), inset 0 0 0 .22em rgba(23, 17, 13, .75), 0 .15em 0 rgba(0, 0, 0, .45); flex: none; }
.gt-sh svg { width: 56%; }
.gt-sh.big { width: 5em; }
.gt-pl { display: flex; flex-direction: column; align-items: center; gap: .3em; position: relative; transition: transform .25s, opacity .25s; }
.gt-pl > span { font: 800 .8em/1 var(--carve); letter-spacing: .03em; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #17110d; color: var(--c); padding: .3em .6em; border-radius: 3px; }
.gt-pl em { font: 700 .78em/1 var(--sans); font-style: normal; min-height: 1em; }
.gt-pl.big .gt-sh { width: 5.4em; } .gt-pl.big > span { font-size: 1.15em; }
.gt-pl.win .gt-sh { box-shadow: inset 0 0 0 .14em var(--c), inset 0 0 0 .22em rgba(23, 17, 13, .75), 0 0 0 .2em var(--gold), 0 0 1.6em var(--gold); animation: gtHop .7s cubic-bezier(.3, 1.6, .5, 1) 2; }
.gt-pl.hit .gt-sh { box-shadow: inset 0 0 0 .14em var(--c), inset 0 0 0 .22em rgba(23, 17, 13, .75), 0 0 0 .2em var(--wine); animation: gtWob .5s ease-in-out 3; }
.gt-pl.hot { transform: scale(1.22); z-index: 2; } .gt-pl.hot .gt-sh { box-shadow: 0 0 0 .2em var(--gold), 0 0 1.4em #fff3c4; }
.gt-pl.good em { color: #fff3c4; } .gt-pl.good .gt-sh { box-shadow: 0 0 0 .2em var(--gold); } .gt-pl.bad { opacity: .75; } .gt-pl.bad em { color: #ff9c9c; } .gt-pl.bad .gt-sh { animation: gtWob .4s 2; filter: grayscale(.7); }
@keyframes gtHop { 50% { transform: translateY(-.7em) rotate(-8deg); } }
@keyframes gtWob { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.gt-chip { display: inline-block; font: 800 .85em/1 var(--carve); background: #17110d; color: var(--c); padding: .3em .55em; border-radius: 3px; margin: 0 .15em; }
.gt-t-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .9em 1.3em; max-width: 92%; }
.gt-t-row.vs { align-items: center; gap: 2.5em; } .gt-t-eye { width: 6em; animation: gtPulse 1.2s ease-in-out infinite; }
.gt-t-row.parade .gt-pl { animation: gtMarch .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes gtMarch { from { transform: translateX(-60vw) rotate(-30deg); opacity: 0; } }
@keyframes gtPulse { 50% { transform: scale(1.08); } }
.gt-victim { display: flex; justify-content: center; }
.gt-note { font: 700 1em/1.2 var(--sans); letter-spacing: .04em; min-height: 1.2em; }

/* buttons */
.gt-next { display: flex; flex-direction: column; align-items: center; gap: 2px; width: min(100%, 340px); padding: 15px 18px; border-radius: 6px; background: linear-gradient(180deg, #f3c765, var(--gold) 60%, var(--gold-d)) !important; color: #17110d !important; box-shadow: 0 0 0 3px #17110d, 0 6px 0 #17110d; transition: transform .1s, opacity .2s; }
.gt-next b { font: 900 18px/1 var(--carve); letter-spacing: .05em; } .gt-next small { font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; min-height: 11px; opacity: .75; }
.gt-next:active { transform: translateY(4px); } .gt-next:disabled { opacity: .55; }
.gt-ghost { padding: 12px 16px; border-radius: 6px; border: 2px solid currentColor !important; font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.gt-ghost:disabled { opacity: .4; }
.gt-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } .gt-wait { opacity: .75; font-size: 14px; }

/* cards */
.gt-card { width: 5.2em; aspect-ratio: 5 / 7; perspective: 800px; flex: none; transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), opacity .35s; display: block; }
.gt-card.big { width: 8.5em; } .gt-card.huge { width: 13em; }
.gt-card-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3, 1.3, .5, 1); }
.gt-card.flip .gt-card-in { transform: rotateY(180deg); }
.gt-card-b, .gt-card-f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: .5em; border: .2em solid #17110d; box-shadow: 0 .3em 0 rgba(0, 0, 0, .4); }
.gt-card-b { display: grid; place-items: center; --fig: #cf6a35; --inc: #17110d; background: #17110d var(--meander) 0 0 / 1.6em auto; box-shadow: inset 0 0 0 .22em var(--gold-d), 0 .3em 0 rgba(0, 0, 0, .4); }
.gt-card-b svg { width: 62%; background: #17110d; border-radius: 50%; padding: .3em; }
.gt-card-f { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; padding: .5em .4em; background: var(--cream); color: #17110d; text-align: center; }
.gt-card-f small { font: 700 .5em/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.gt-card-f b { font: 900 1.05em/1 var(--carve); } .gt-card-f span { font: 600 .55em/1.2 var(--sans); }
.gt-card.big .gt-card-f b { font-size: 1.5em; } .gt-card.big .gt-card-f span { font-size: .72em; } .gt-card.big .gt-card-f small { font-size: .6em; }
.gt-card.huge .gt-card-f b { font-size: 2.3em; } .gt-card.huge .gt-card-f span { font-size: 1em; } .gt-card.huge .gt-card-f small { font-size: .8em; }
.gt-card-f.sips { background: var(--cream); } .gt-card-f.big { background: var(--wine); color: var(--cream); } .gt-card-f.mercy, .gt-card-f.bless { background: linear-gradient(160deg, #fff3c4, var(--gold)); }
.gt-card-f.dare { background: #2f6f76; color: var(--cream); } .gt-card-f.secret { background: #17110d; color: var(--gold); }
.gt-card.pick { transform: translateY(-.8em) scale(1.12); z-index: 2; } .gt-card.dim { opacity: .45; transform: scale(.9); }
button.gt-card:active { transform: scale(.94); } button.gt-card:disabled:not(.pick) { opacity: .5; }
.gt-fan { display: flex; justify-content: center; gap: 1em; }
.gt-fan > :nth-child(1) { rotate: -7deg; } .gt-fan > :nth-child(3) { rotate: 7deg; } .gt-fan > :nth-child(2) { translate: 0 -.5em; }

/* ------------------------------------------------------------ TV scenes */
.gt-shout { display: flex; flex-direction: column; align-items: center; gap: .25em; }
.gt-shout b { font: 900 3.4em/1 var(--carve); letter-spacing: .03em; text-shadow: 0 .05em 0 rgba(255, 220, 170, .5); }
.gt-shout span { font: 700 1.15em/1.2 var(--sans); max-width: 30em; }
.gt-shout.small b { font-size: 2em; } .gt-shout.gold b { color: #fff3c4; text-shadow: 0 0 .5em var(--gold); animation: gtPulse .4s ease-in-out infinite; }
.gt-shout.table b { font-size: 5.2em; } .gt-shout.table span { font-size: 1.6em; }
.gt-shout.slam { animation: gtSlam .45s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes gtSlam { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
.gt-medal { width: 9em; padding: 1.4em; border-radius: 50%; background: var(--glaze); color: var(--clay); box-shadow: 0 0 0 .3em var(--clay), 0 0 0 .55em var(--glaze); animation: gtPulse 2.4s ease-in-out infinite; }
.gt-medal svg circle[fill="#17110d"], .gt-medal svg [stroke="#17110d"] { filter: invert(.62) sepia(1) saturate(4) hue-rotate(-20deg); }
.gt-ui[data-fx="gong"] .gt-shout b { color: #fff3c4; text-shadow: 0 0 .4em var(--gold), 0 .05em 0 #17110d; }
.gt-ui[data-fx="trap"] .gt-shout b { color: var(--wine-d); }
.gt-ui[data-fx="music"] .gt-pl { animation: gtDance .34s ease-in-out infinite alternate; } .gt-ui[data-fx="music"] .gt-pl:nth-child(even) { animation-delay: .17s; }
@keyframes gtDance { from { transform: translateY(0) rotate(-9deg); } to { transform: translateY(-.6em) rotate(9deg); } }
.gt-ui[data-fx="gong"] .gt-pl { filter: grayscale(1) contrast(1.1); }
.gt-votes { font: 700 1.1em/1 var(--sans); min-height: 1.1em; }

.gt-sky { position: absolute; inset: 0 0 auto 0; height: 55%; pointer-events: none; }
.gt-cloud { position: absolute; top: 4%; width: 34%; height: 30%; border-radius: 50%; background: #17131f; box-shadow: 6em 1em 0 -1em #17131f, -5em 1.4em 0 -1.2em #17131f; animation: gtCloud 6s ease-in-out infinite alternate; }
.gt-cloud.a { left: 6%; } .gt-cloud.b { left: 36%; top: -4%; animation-delay: -2s; } .gt-cloud.c { right: 4%; animation-delay: -4s; }
@keyframes gtCloud { to { transform: translateX(2.5em); } }
.gt-strike { position: absolute; left: 50%; top: 8%; width: 9em; transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; opacity: 0; }
.gt-strike.go { animation: gtStrike .9s ease-out both; }
@keyframes gtStrike { 0% { transform: translateX(-50%) scaleY(0); opacity: 1; } 12% { transform: translateX(-50%) scaleY(1); opacity: 1; } 30% { opacity: .3; } 40% { opacity: 1; } 100% { transform: translateX(-50%) scaleY(1); opacity: .25; } }
[data-ev="bolt"] .gt-shout, [data-ev="bolt"] .gt-t-row { position: relative; z-index: 2; } [data-ev="bolt"] .gt-ui { justify-content: flex-end; padding-bottom: 2.4em; }

.gt-cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2em 1.8em; }
.gt-flipcol { display: flex; flex-direction: column; align-items: center; gap: .5em; transition: transform .3s; }
.gt-flipcol.done { transform: translateY(-.5em); } .gt-flipcol.done .gt-sh { box-shadow: 0 0 0 .2em var(--gold), 0 0 1.2em var(--gold); }
.gt-cups { display: flex; gap: .35em; justify-content: center; }
.gt-cups i { width: 2.1em; opacity: .28; transform: rotate(180deg); transition: transform .45s cubic-bezier(.2, 1.7, .4, 1), opacity .2s; color: #17110d; }
.gt-cups i.on { opacity: 1; transform: rotate(0); }

.gt-tug { position: relative; width: 100%; height: 9em; display: grid; place-items: center; }
.gt-pit { position: absolute; left: 50%; bottom: 0; width: 9em; height: 2.4em; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #c0457a, var(--wine-d)); box-shadow: 0 0 0 .25em #17110d; }
.gt-tug-g { display: flex; align-items: center; gap: 0; transform: translateX(calc(var(--pos, 0) * -22vw)); transition: transform .28s cubic-bezier(.3, 1.3, .5, 1); }
.gt-team { display: flex; gap: .6em; } .gt-team.a .gt-pl { transform: rotate(-12deg); } .gt-team.b .gt-pl { transform: rotate(12deg); }
.gt-rope { width: 18vw; height: .55em; background: repeating-linear-gradient(115deg, #17110d 0 .35em, #f4e6c4 .35em .7em); border-radius: 99px; position: relative; }
.gt-rope::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.2em; height: 1.2em; transform: translate(-50%, -50%) rotate(45deg); background: var(--wine); border: .15em solid #17110d; }

.gt-lanes { width: 92%; display: flex; flex-direction: column; gap: .35em; }
.gt-lane { display: grid; grid-template-columns: 7em 1fr auto; align-items: center; gap: .6em; }
.gt-lane > span { font: 800 .85em/1 var(--carve); background: #17110d; color: var(--c); padding: .35em .5em; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-track { position: relative; height: 2.5em; border-bottom: .16em dashed rgba(23, 17, 13, .6); }
.gt-car { position: absolute; bottom: 0; left: calc(var(--at, 0) * (100% - 5.2em)); width: 5.2em; transition: left .16s linear; }
.gt-car .gt-sh { position: absolute; left: .1em; top: -.5em; width: 1.5em; }
.gt-lane.oops .gt-car { animation: gtOops .4s ease-in-out; } @keyframes gtOops { 30% { transform: rotate(-22deg) translateY(-.4em); } 70% { transform: rotate(10deg); } }
.gt-lane.done .gt-car { animation: gtHop .6s 2; }
.gt-post { width: .5em; height: 2.8em; background: repeating-linear-gradient(0deg, #17110d 0 .5em, var(--gold) .5em 1em); }

.gt-pring { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6em 2em; padding-top: 5em; max-width: 90%; }
.gt-box { position: absolute; width: 5em; transform: translate(-50%, -105%); transition: left .28s cubic-bezier(.3, 1.4, .5, 1), top .28s; z-index: 3; }
.gt-box svg { animation: gtRattle .16s linear infinite; } @keyframes gtRattle { 25% { transform: rotate(calc(var(--shake, .3) * -9deg)) translateY(calc(var(--shake, .3) * -4px)); } 75% { transform: rotate(calc(var(--shake, .3) * 9deg)); } }
.gt-box-lid { transition: transform .3s cubic-bezier(.2, 1.8, .4, 1); transform-box: fill-box; transform-origin: 0 100%; }
.gt-box.open .gt-box-lid { transform: rotate(-70deg) translateY(-30px); } .gt-box.open svg { animation: none; transform: scale(1.5); }

.gt-target { position: relative; width: 15em; aspect-ratio: 1; border-radius: 50%; background: #17110d; box-shadow: 0 0 0 .3em var(--cream), 0 0 0 .5em #17110d; }
.gt-target > i { position: absolute; border-radius: 50%; inset: 18%; background: var(--clay-l); } .gt-target > i:nth-child(2) { inset: 34%; background: #17110d; } .gt-target > i:nth-child(3) { inset: 44%; background: var(--gold); }
.gt-splats { position: absolute; inset: 0; }
.gt-splat { position: absolute; width: 1.7em; height: 1.5em; transform: translate(-50%, -50%); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; background: var(--wine); border: .14em solid var(--c); animation: gtSplat .3s cubic-bezier(.2, 2, .4, 1) both; }
.gt-splat.bull { box-shadow: 0 0 1em #fff3c4; } @keyframes gtSplat { from { transform: translate(-50%, -50%) scale(3); opacity: 0; } }
[data-ev="kottabos"] .tv .gt-target, .tv[data-ev="kottabos"] .gt-target { width: 13em; }

.gt-open { display: flex; flex-direction: column; align-items: center; gap: 1.1em; }
.gt-open-k { width: 7em; --fig: #17110d; --inc: #cf6a35; animation: gtSway 3s ease-in-out infinite; transform-origin: 50% 100%; }
.gt-open h1 { display: flex; flex-direction: column; font: 900 5em/.9 var(--carve); letter-spacing: .04em; } .gt-open h1 small { font-size: .26em; letter-spacing: .6em; margin-right: -.6em; }
.gt-laws { display: flex; gap: 1em; flex-wrap: wrap; justify-content: center; }
.gt-laws > div { display: flex; flex-direction: column; gap: .3em; padding: .7em 1.1em; background: #17110d; color: var(--cream); border-radius: 4px; border-bottom: .25em solid var(--gold); animation: gtIn .5s both; }
.gt-laws > div:nth-child(2) { border-color: #c0457a; animation-delay: .25s; } .gt-laws > div:nth-child(3) { border-color: #5fb0b7; animation-delay: .5s; }
.gt-laws b { font: 800 1.05em/1 var(--carve); color: var(--gold); } .gt-laws span { font-size: .9em; }

.gt-plaque { display: flex; flex-direction: column; align-items: center; gap: .55em; padding: 1.5em 2.6em 1.3em; background: #17110d; color: var(--cream); border-radius: 6px; box-shadow: 0 0 0 .22em var(--gold-d), 0 0 0 .5em #17110d, 0 1em 2em rgba(0, 0, 0, .4); max-width: 80%; animation: gtSlam .5s cubic-bezier(.2, 1.4, .4, 1) both !important; }
.gt-plaque small { font: 700 .8em/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.gt-plaque-i { width: 4.6em; color: var(--clay-l); } .gt-plaque b { font: 900 3.2em/1 var(--carve); color: var(--gold); letter-spacing: .03em; }
.gt-plaque p { font-size: 1.3em; max-width: 26em; } .gt-plaque em { font: 700 .85em/1 var(--sans); font-style: normal; letter-spacing: .2em; text-transform: uppercase; padding: .5em .9em; border-radius: 99px; background: var(--clay); color: #17110d; margin-top: .3em; }
.gt-plaque.table em { background: var(--wine); color: var(--cream); } .gt-plaque.card em { background: var(--gold); }

.gt-verdict { display: flex; gap: 3.5em; align-items: flex-end; justify-content: center; }
.gt-v { display: flex; flex-direction: column; align-items: center; gap: .5em; position: relative; }
.gt-v > b { font: 900 2.2em/1 var(--carve); letter-spacing: .06em; } .gt-v small { font: 700 1em/1.2 var(--sans); max-width: 16em; }
.gt-v.win > b { color: #fff3c4; text-shadow: 0 .06em 0 #17110d, 0 0 .5em var(--gold); } .gt-v.lose > b { color: var(--wine-d); }
.gt-v-l { width: 8em; margin-bottom: -1.6em; --lf: #17110d; animation: gtDrop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.gt-give { display: flex; align-items: center; gap: 1em; min-height: 1px; } .gt-give > b { font: 900 2em/1 var(--carve); color: var(--wine-d); }
.gt-arrow { width: 3em; height: .4em; background: #17110d; position: relative; } .gt-arrow::after { content: ''; position: absolute; right: -.6em; top: 50%; border: .7em solid transparent; border-left-color: #17110d; transform: translateY(-50%); }
[data-phase="bless"] .tv .gt-ui, .tv[data-phase="bless"] .gt-ui, .tv[data-phase="fate"] .gt-ui { flex-flow: row wrap; align-content: center; gap: 1em 2.5em; }
.tv[data-phase="bless"] .gt-note, .tv[data-phase="fate"] .gt-note, .tv[data-phase="fate"] .gt-plays { flex-basis: 100%; }

.gt-prop { display: flex; justify-content: center; align-items: center; gap: 1.2em; } .gt-prop.done, .gt-prop.fated { display: none; }
.gt-prop.bolt { flex-wrap: wrap; max-width: 60%; gap: .9em 1.2em; }
.gt-res { display: flex; flex-direction: column; align-items: center; gap: .5em; } .gt-res:empty { display: none; }
.gt-res-n { display: none; }
.gt-res.blocked .gt-card { filter: grayscale(1); opacity: .55; rotate: -6deg; } .gt-res.blocked::after { content: 'BLOCKED'; position: absolute; font: 900 2.6em/1 var(--carve); color: #fff3c4; background: #17110d; padding: .2em .5em; rotate: -8deg; }
.gt-res { position: relative; justify-content: center; }
.gt-plays { display: flex; justify-content: center; gap: 1.5em; } .gt-plays:empty { display: none; }
.gt-played { display: flex; align-items: center; gap: .7em; animation: gtSlam .4s both; } .gt-played span { font: 800 1.1em/1.2 var(--carve); background: #17110d; color: var(--gold); padding: .4em .7em; border-radius: 4px; }
.gt-played .gt-card { width: 5em; }
.gt-cupw { position: relative; width: 6.5em; height: 8.5em; display: flex; align-items: flex-end; justify-content: center; }
.gt-under { position: absolute; bottom: .3em; font: 900 1.05em/1 var(--carve); background: var(--cream); color: #17110d; padding: .35em .45em; border-radius: 3px; border: .12em solid #17110d; white-space: nowrap; }
.gt-cupc { position: relative; width: 100%; transform: rotate(180deg); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); z-index: 1; }
.gt-cupw.up .gt-cupc { transform: rotate(180deg) translateY(4.6em); } .gt-cupw.dim { opacity: .6; } .gt-cupw.pick .gt-under { background: var(--gold); transform: scale(1.25); }
.gt-wheelw { position: relative; width: 17em; aspect-ratio: 1; }
.gt-wheel { position: absolute; inset: 0; border-radius: 50%; border: .35em solid #17110d; box-shadow: 0 0 0 .2em var(--gold), 0 .6em 0 rgba(0, 0, 0, .35); transition: transform 4.6s cubic-bezier(.12, .75, .16, 1); }
.gt-wheel span { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-5.6em); }
.gt-wheel span::before { content: none; }
.gt-wheel span { font: 900 .8em/1 var(--carve); color: #17110d; white-space: nowrap; display: flex; justify-content: center; align-items: center; }
.gt-wheel span.shot, .gt-wheel span.finish, .gt-wheel span.dare { color: var(--cream); }
.gt-hub { position: absolute; left: 50%; top: 50%; width: 2.4em; height: 2.4em; transform: translate(-50%, -50%); border-radius: 50%; background: var(--gold); border: .3em solid #17110d; }
.gt-pointer { position: absolute; left: 50%; top: -1.1em; transform: translateX(-50%); border: 1em solid transparent; border-top: 2em solid #17110d; filter: drop-shadow(0 .15em 0 var(--gold)); z-index: 2; }
.gt-die { width: 7em; aspect-ratio: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; padding: 1em; background: var(--cream); border: .3em solid #17110d; border-radius: 1em; box-shadow: 0 .5em 0 rgba(0, 0, 0, .4); }
.gt-die i { border-radius: 50%; background: transparent; } .gt-die i.on { background: #17110d; }
.gt-die.roll { animation: gtRoll .3s linear infinite; } @keyframes gtRoll { 25% { transform: rotate(14deg) translateY(-1em); } 75% { transform: rotate(-14deg) translateY(.4em); } }
.gt-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .35em .9em; text-align: left; }
.gt-legend div { display: flex; align-items: center; gap: .5em; font: 800 1em/1 var(--carve); padding: .25em .5em; border-radius: 4px; transition: background .3s, transform .3s; }
.gt-legend i { font-style: normal; width: 1.5em; height: 1.5em; display: grid; place-items: center; background: #17110d; color: var(--cream); border-radius: 4px; font-size: .85em; }
.gt-legend div.pick { background: var(--gold); transform: scale(1.15); }
.gt-prop.coin { perspective: 900px; }
.gt-coin { position: relative; width: 10em; aspect-ratio: 1; transform-style: preserve-3d; transition: transform 2.5s cubic-bezier(.2, .7, .2, 1); }
.gt-coin > div { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; border: .35em solid #17110d; box-shadow: inset 0 0 0 .3em rgba(23, 17, 13, .25); }
.gt-coin .f { background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold)); --lf: #17110d; } .gt-coin .b { background: radial-gradient(circle at 35% 30%, #c0457a, var(--wine)); color: var(--cream); transform: rotateX(180deg); --fig: #f4e6c4; --inc: #8e2a52; }
.gt-coin svg { width: 45%; } .gt-coin b { font: 900 1.25em/1 var(--carve); }

.gt-doom { display: flex; flex-direction: column; align-items: center; gap: .3em; padding: .7em 1.6em; background: #17110d; color: var(--cream); border-radius: 6px; box-shadow: 0 0 0 .2em var(--gold-d), 0 0 0 .45em #17110d; animation: gtSlam .5s cubic-bezier(.2, 1.5, .4, 1) both !important; }
.gt-doom b { font: 900 4.6em/1 var(--carve); letter-spacing: .03em; } .gt-doom span { font: 700 1.2em/1.2 var(--sans); max-width: 24em; }
.gt-doom.big { background: var(--wine); } .gt-doom.big b { color: #fff3c4; animation: gtPulse .6s ease-in-out infinite; }
.gt-doom.mercy { background: linear-gradient(160deg, #fff3c4, var(--gold)); color: #17110d; } .gt-doom.sips b { color: #f0a3c2; } .gt-doom.dare { background: #2f6f76; }
.gt-sips { display: flex; gap: .5em; } .gt-sips i { width: 3em; --fig: #17110d; --inc: #8e2a52; animation: gtTip .9s cubic-bezier(.3, 1.5, .5, 1) both; transform-origin: 50% 100%; }
@keyframes gtTip { from { transform: translateY(1.5em) scale(0); } 60% { transform: rotate(-24deg); } to { transform: none; } }
.gt-darecard { display: flex; flex-direction: column; gap: .4em; align-items: center; padding: 1em 1.8em; background: #2f6f76; color: var(--cream); border-radius: 6px; box-shadow: 0 0 0 .2em #17110d, 0 .5em 0 rgba(0, 0, 0, .35); max-width: 80%; rotate: -1.5deg; }
.gt-darecard small { font: 700 .8em/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); } .gt-darecard b { font: 900 2.3em/1.1 var(--carve); }

.gt-stand { display: flex; flex-direction: column; gap: .35em; width: min(92%, 44em); }
.gt-srow { display: grid; grid-template-columns: 1.6em auto 1fr auto 11em; align-items: center; gap: .7em; padding: .3em .8em; background: #17110d; color: var(--cream); border-radius: 4px; border-left: .4em solid var(--c); animation: gtRowIn .45s cubic-bezier(.2, 1.3, .4, 1) both; text-align: left; }
@keyframes gtRowIn { from { transform: translateX(-30%); opacity: 0; } }
.gt-srow > i { font: 900 1.1em/1 var(--carve); font-style: normal; color: var(--gold); } .gt-srow .gt-sh { width: 1.9em; } .gt-srow > span { font: 800 1.1em/1 var(--carve); color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-srow > b { font: 900 1.4em/1 var(--carve); color: var(--gold); } .gt-srow em { font: 600 .8em/1.1 var(--sans); font-style: normal; text-align: right; opacity: .85; }
.gt-srow.top { box-shadow: 0 0 0 .15em var(--gold); } .gt-srow.last { background: var(--wine-d); } .gt-srow.last em { opacity: 1; color: #f0a3c2; }
.gt-awards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1.2em; max-width: 96%; }
.gt-award { display: flex; flex-direction: column; align-items: center; gap: .4em; padding: .8em 1.1em; background: #17110d; color: var(--cream); border-radius: 6px; animation: gtSlam .5s cubic-bezier(.2, 1.4, .4, 1) both !important; max-width: 16em; }
.gt-award small { font: 800 1em/1 var(--carve); color: var(--gold); letter-spacing: .06em; } .gt-award > span { font-size: .8em; }
.gt-award.top { padding: 1.2em 2em; box-shadow: 0 0 0 .2em var(--gold), 0 0 2em rgba(233, 180, 76, .7); } .gt-award.top small { font-size: 1.4em; } .gt-award .gt-v-l { width: 6em; margin-bottom: -.6em; --lf: #e9b44c; }

/* ------------------------------------------------------------ phone screens */
.gt-say { display: flex; flex-direction: column; align-items: center; gap: .45em; padding: 0 .4em; }
.gt-say b { font: 900 2.1em/1.05 var(--carve); letter-spacing: .02em; } .gt-say span { font: 600 1.05em/1.3 var(--sans); max-width: 21em; }
.gt-say.small b { font-size: 1.45em; } .gt-say.gold b { color: #fff3c4; text-shadow: 0 2px 0 #17110d, 0 0 18px var(--gold); } .gt-say.doom b { font-size: 2.7em; color: var(--wine-d); text-shadow: 0 2px 0 rgba(255, 220, 170, .5); }
.gt-watch { font: 700 .8em/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.gt-down { width: 8em; padding: 1.5em; border-radius: 50%; background: #17110d; color: var(--clay-l); box-shadow: 0 0 0 4px var(--clay), 0 0 0 8px #17110d; animation: gtPulse 2.2s ease-in-out infinite; }
.gt-down.small { width: 5.4em; padding: 1em; } .gt-down svg [fill="#17110d"], .gt-down svg [stroke="#17110d"] { filter: invert(.62) sepia(1) saturate(4) hue-rotate(-20deg); }
.gt-hello { width: 7em; --fig: #17110d; --inc: #cf6a35; animation: gtSway 3s ease-in-out infinite; transform-origin: 50% 100%; } .gt-wreath { width: 9em; --lf: #17110d; animation: gtDrop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.gt-pad { flex: 1; align-self: stretch; min-height: 9em; max-height: 24em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; border-radius: 14px; background: #17110d !important; color: var(--cream) !important; box-shadow: inset 0 0 0 3px var(--gold-d), inset 0 0 0 8px #17110d, inset 0 0 0 10px var(--clay), 0 8px 0 rgba(23, 17, 13, .45); transition: background .15s; touch-action: none; }
.gt-pad b { font: 900 2.6em/1 var(--carve); letter-spacing: .04em; } .gt-pad span { font: 600 1em/1.2 var(--sans); opacity: .85; padding: 0 1em; }
.gt-pad.hit { animation: gtPress .16s ease-out; } @keyframes gtPress { 40% { transform: scale(.955) translateY(5px); } }
.gt-pad.go, .gt-pad.gold { background: linear-gradient(180deg, #fff3c4, var(--gold)) !important; color: #17110d !important; } .gt-pad.go b { font-size: 4em; animation: gtPulse .3s ease-in-out infinite; }
.gt-pad.good { background: #3d5a1e !important; } .gt-pad.bad { background: var(--wine-d) !important; } .gt-pad.box { background: var(--wine) !important; animation: gtRattleP .2s linear infinite; } @keyframes gtRattleP { 25% { transform: rotate(-1.2deg); } 75% { transform: rotate(1.2deg); } }
.gt-pad:disabled { opacity: .8; }
.gt-halves { flex: 1; align-self: stretch; display: flex; gap: 12px; min-height: 10em; } .gt-pad.half { opacity: .6; } .gt-pad.half.want { opacity: 1; background: linear-gradient(180deg, #fff3c4, var(--gold)) !important; color: #17110d !important; }
.gt-prog { align-self: stretch; height: 16px; border-radius: 99px; background: rgba(23, 17, 13, .35); border: 2px solid #17110d; overflow: hidden; } .gt-prog i { display: block; height: 100%; background: #17110d; transition: width .12s linear; } .gt-prog.miss { animation: gtShake .3s; }
.gt-meter { position: relative; align-self: stretch; height: 46px; border-radius: 99px; background: #17110d; box-shadow: inset 0 0 0 3px var(--gold-d); overflow: hidden; }
.gt-zone { position: absolute; top: 0; bottom: 0; width: 22%; background: linear-gradient(180deg, #fff3c4, var(--gold)); transition: left .25s; } .gt-dot { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--clay-l); border: 3px solid var(--cream); }
.gt-meter.miss { animation: gtShake .3s; }
.gt-play:not(.tv) .gt-cups i { width: 3em; }
.gt-teamline { font: 700 1em/1.6 var(--sans); } .gt-prope { position: relative; align-self: stretch; height: 14px; border-radius: 99px; background: repeating-linear-gradient(115deg, #17110d 0 6px, #f4e6c4 6px 12px); }
.gt-prope i { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; rotate: 45deg; background: var(--wine); border: 3px solid #17110d; transition: left .25s; } .gt-prope.win i { background: var(--gold); } .gt-prope.lose i { background: #c23b3b; }
.gt-ktarget { position: relative; width: min(62vw, 15em); aspect-ratio: 1; border-radius: 50%; background: #17110d; box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px #17110d; flex: none; }
.gt-ktarget > i:nth-child(1) { position: absolute; inset: 20%; border-radius: 50%; background: var(--clay-l); } .gt-ktarget > i:nth-child(2) { position: absolute; inset: 37.5%; border-radius: 50%; background: var(--gold); border: 3px solid #17110d; }
.gt-kring { position: absolute; left: 50%; top: 50%; width: 25%; height: 25%; border-radius: 50%; border: 5px solid var(--cream); box-shadow: 0 0 0 2px #17110d, inset 0 0 0 2px #17110d; }
.gt-ktarget::after { content: attr(data-v); position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); font: 900 1.3em/1 var(--carve); white-space: nowrap; opacity: 0; } .gt-ktarget.pop::after { animation: gtPopT .9s ease-out both; } @keyframes gtPopT { 0% { opacity: 1; transform: translate(-50%, -40%) scale(.6); } 30% { transform: translate(-50%, -100%) scale(1.15); opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160%); } }
[data-ev="kottabos"]:not(.tv) .gt-pad, [data-ev="flip"]:not(.tv) .gt-pad { max-height: 11em; }
.gt-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; align-self: stretch; }
.gt-pickb { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #17110d !important; box-shadow: inset 0 0 0 2px var(--c); transition: transform .1s; text-align: left; }
.gt-pickb span { font: 800 1em/1 var(--carve); color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gt-pickb .gt-sh { width: 2.2em; }
.gt-pickb:active { transform: scale(.95); } .gt-pickb:disabled { opacity: .4; } .gt-pickb.on { opacity: 1 !important; box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px var(--gold); }
.gt-opts { display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.gt-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px; border-radius: 8px; background: var(--cream) !important; color: #17110d !important; box-shadow: 0 0 0 3px #17110d, 0 5px 0 #17110d; transition: transform .1s; }
.gt-opt b { font: 900 1.5em/1 var(--carve); } .gt-opt span { font-size: .85em; } .gt-opt.big { background: var(--wine) !important; color: var(--cream) !important; } .gt-opt.mercy { background: var(--gold) !important; } .gt-opt.dare { background: #2f6f76 !important; color: var(--cream) !important; }
.gt-opt:active { transform: translateY(4px); } .gt-opt:disabled { opacity: .4; } .gt-opt.on { opacity: 1 !important; outline: 3px solid var(--gold); }
.gt-cupb { width: 5.4em; color: #17110d !important; rotate: 180deg; transition: transform .3s cubic-bezier(.2, 1.5, .4, 1), opacity .2s; } .gt-cupb:disabled:not(.pick) { opacity: .4; } .gt-cupb.pick { transform: translateY(1em) scale(1.1); }
.gt-play:not(.tv) .gt-fan { gap: .6em; } .gt-play:not(.tv) .gt-fan .gt-card { width: min(27vw, 6.4em); } .gt-play:not(.tv) .gt-fan > * { rotate: none; translate: none; }
.gt-react { display: flex; flex-direction: column; gap: 10px; align-self: stretch; align-items: center; }
.gt-secret { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: 8px; background: #17110d !important; color: var(--gold) !important; box-shadow: inset 0 0 0 2px var(--gold), 0 5px 0 rgba(23, 17, 13, .5); animation: gtPulse 1s ease-in-out infinite; }
.gt-secret small { font: 700 .7em/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); } .gt-secret b { font: 900 1.6em/1 var(--carve); } .gt-secret span { font-size: .85em; color: var(--cream); }
.gt-thumbs { display: flex; gap: 12px; align-self: stretch; flex: 1; max-height: 14em; min-height: 8em; }
.gt-thumb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; box-shadow: 0 0 0 3px #17110d, 0 6px 0 #17110d; transition: transform .1s; }
.gt-thumb b { font: 900 1.25em/1 var(--carve); } .gt-thumb span { font-size: .85em; } .gt-thumb.up { background: linear-gradient(180deg, #fff3c4, var(--gold)) !important; color: #17110d !important; } .gt-thumb.down { background: var(--wine) !important; color: var(--cream) !important; } .gt-thumb:active { transform: translateY(5px); }
.gt-play.storm:not(.tv) .gt-ghost, .gt-play:not(.tv) .gt-ghost { color: #17110d; }

/* ------------------------------------------------------------ the end */
.gt-final .gt-plate { gap: 12px; }
.gt-champ { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; padding-top: 6px; }
.gt-champ-l { width: 150px; margin-bottom: -46px; animation: gtDrop .8s cubic-bezier(.2, 1.4, .4, 1) both; } .gt-champ .gt-sh { font-size: 16px; }
.gt-champ b { font: 900 30px/1 var(--carve); color: var(--c); } .gt-champ small { font: 700 12px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.gt-table { align-self: stretch; display: flex; flex-direction: column; gap: 5px; }
.gt-row { display: grid; grid-template-columns: 1.4em auto 1fr auto auto 3.6em; align-items: center; gap: 8px; padding: 6px 10px; background: var(--glaze-2); border-left: 4px solid var(--c); border-radius: 3px; animation: gtRowIn .4s both; text-align: left; }
.gt-row > i { font: 900 1em/1 var(--carve); font-style: normal; color: var(--gold); } .gt-row .gt-sh { width: 1.7em; } .gt-row span { font: 800 1em/1 var(--carve); color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-row b { display: inline-flex; align-items: center; gap: 4px; font-size: .9em; } .gt-row b.sip { color: #e58fb2; } .gt-row b.big { font-size: .7em; color: #f0a3c2; justify-content: flex-end; } .gt-row.me { box-shadow: inset 0 0 0 2px var(--gold-d); }
.gt-awardline { display: flex; flex-direction: column; gap: 4px; font-size: 13px; opacity: .9; } .gt-awardline b { color: var(--gold); }
.tv .gt-champ-l { width: 12em; margin-bottom: -3.4em; } .tv .gt-champ b { font-size: 2.6em; } .tv .gt-champ .gt-sh { font-size: 1.4em; } .tv .gt-awardline { font-size: .8em; }

@media (prefers-reduced-motion: reduce) { .gt-band, .gt-mask, .gt-logo-k, .gt-pl, .gt-box svg { animation: none !important; } }

/* review pass 1: the engine's host bubble is replaced by the mask on the TV; the lobby card reads at both sizes */
html[data-game="gt"] .hostcam { display: none !important; }
html[data-game="gt"] .gt-lobbycard .h3 { font-size: 1.05rem; line-height: 1.15; margin: 2px 0 4px; }
html[data-game="gt"] .gt-lobbycard.tv { padding: 18px 22px; }
html[data-game="gt"] .gt-lobbycard.tv .h3 { font-size: 1.5rem; }
html[data-game="gt"] .gt-lobbycard.tv .small { font-size: 1.02rem; line-height: 1.35; }
html[data-game="gt"] .gt-lobbycard.tv .gt-lobby-art { width: 110px; }
.gt-shout.table b { max-width: 15em; text-align: center; }
.gt-t-row.vs { margin-top: 1em; }
.gt-card b, .gt-card .gt-card-n { overflow-wrap: anywhere; }
.gt-card.big .gt-card-f b { font-size: 1.22em; } .gt-card.huge .gt-card-f b { font-size: 1.85em; }

.gt-darecard { padding: .8em 1.5em; } .gt-darecard b { font-size: 1.9em; text-align: center; }
.gt-play.tv .gt-fan .gt-card.big { width: 6.4em; } .gt-play.tv .gt-fan { margin-top: .3em; }
.gt-play.tv .gt-card.huge { width: 11.4em; }
.gt-play.tv .gt-open { gap: .6em; } .gt-play.tv .gt-open-k { width: 4.2em; } .gt-play.tv .gt-open h1 { font-size: 3.6em; }
.gt-play.tv .gt-open .gt-t-row { margin-top: 0; }
/* the engine has its own .sips rule (a small mono counter): the card face of the same name keeps the card look */
.gt-card-f.sips { display: flex; font: inherit; color: #17110d; gap: .35em; }
.gt-play.tv .gt-prop .gt-card.big { width: 6.4em; }
.gt-play.tv .gt-wheelw { width: 14.5em; }
.gt-play.tv[data-ev="kottabos"] .gt-target { width: 10.5em; } .gt-play.tv[data-ev="kottabos"] .gt-ui { gap: .45em; }

/* ---------------------------------------------------------------- the art pass: faces, Olympus, moving props */
.gt-sh { overflow: hidden; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 55%, #fff6dc), var(--c) 72%, color-mix(in srgb, var(--c) 70%, #17110d)); }
.gt-sh svg { width: 100%; height: 100%; display: block; transform: translateY(4%) scale(1.06); }
.gt-f-eyes { animation: gtBlink 4.6s infinite; animation-delay: calc(var(--i, 0) * -.83s); transform-box: fill-box; transform-origin: 50% 50%; }
.gt-f-m.grin, .gt-f-m.oh { display: none; }
.gt-pl.win .gt-f-m.smile, .gt-pl.good .gt-f-m.smile, .gt-pl.hit .gt-f-m.smile, .gt-pl.bad .gt-f-m.smile, .gt-pl.hot .gt-f-m.smile, .gt-victim .gt-f-m.smile { display: none; }
.gt-pl.win .gt-f-m.grin, .gt-pl.good .gt-f-m.grin { display: block; }
.gt-pl.hit .gt-f-m.oh, .gt-pl.bad .gt-f-m.oh, .gt-pl.hot .gt-f-m.oh, .gt-victim .gt-f-m.oh { display: block; }
.gt-pl.hit .gt-f-brows, .gt-pl.hot .gt-f-brows, .gt-victim .gt-f-brows { transform: translateY(-1.2px); }
.gt-victim .gt-sh svg { animation: gtGulp 1.6s ease-in-out infinite; }
@keyframes gtGulp { 50% { transform: translateY(6%) scale(1.06) rotate(-3deg); } }
.gt-pl.win .gt-sh svg { animation: gtCheer .5s ease-in-out infinite alternate; }
@keyframes gtCheer { to { transform: translateY(0) scale(1.1) rotate(4deg); } }

.gt-scenery { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gt-scenery svg { width: 100%; height: 100%; display: block; }
.gt-rays { transform-origin: 800px 330px; animation: gtSpin 120s linear infinite; }
@keyframes gtSpin { to { transform: rotate(360deg); } }
.gt-cloud { opacity: .5; animation: gtDrift 46s ease-in-out infinite alternate; }
.gt-cloud.b { animation-duration: 60s; animation-direction: alternate-reverse; opacity: .4; }
.gt-cloud.c { animation-duration: 75s; opacity: .3; }
@keyframes gtDrift { from { translate: -90px 0; } to { translate: 110px 0; } }
.gt-play:not(.tv) .gt-scenery { opacity: .7; }
.gt-play.storm .gt-scenery { filter: brightness(.3) saturate(.5); }
.gt-play.storm .gt-rays { opacity: 0; }
.gt-col { position: absolute; top: 0; bottom: 0; width: 3.4em; display: flex; flex-direction: column; pointer-events: none; filter: drop-shadow(.3em 0 .5em rgba(60, 20, 0, .35)); }
.gt-col.l { left: 1.1em; }
.gt-col.r { right: 1.1em; }
.gt-col > div svg { display: block; width: 100%; }
.gt-col > i { flex: 1; margin: 0 14%; background: repeating-linear-gradient(90deg, #17110d 0 12%, #3a2416 12% 16%, #17110d 16% 21%); border-inline: .12em solid #17110d; }
.gt-col-swag { position: absolute; top: 1.2em; width: 11em; animation: gtSwag 5s ease-in-out infinite; transform-origin: 0 0; }
.gt-col.l .gt-col-swag { left: 70%; }
.gt-col.r .gt-col-swag { right: 70%; transform-origin: 100% 0; scale: -1 1; }
@keyframes gtSwag { 50% { rotate: 2.5deg; } }
.gt-stage::before, .gt-stage::after { z-index: 1; }
.tv .gt-lanes { width: 80%; }

/* medallions: a red-figure tondo, clay figure on black */
.gt-medal, .gt-down { --fig: var(--clay-l); --inc: #17110d; color: var(--clay-l); background: radial-gradient(circle at 40% 30%, #3a2416, #17110d 70%); box-shadow: 0 0 0 .22em var(--gold), 0 0 0 .5em #17110d, 0 0 0 .62em var(--gold-d), 0 .9em 1.6em rgba(0, 0, 0, .4); }
.gt-medal svg *, .gt-down svg * { filter: none !important; }
.gt-medal { width: 10em; padding: 1.5em; }
.gt-plaque-i { width: 5.4em; }
.gt-plaque-i svg, .gt-medal svg, .gt-down svg { display: block; width: 100%; }

/* props that move */
.gt-wh { transform-box: fill-box; transform-origin: 50% 50%; animation: gtSpin .45s linear infinite; }
.gt-leg-a, .gt-leg-b { transform-box: fill-box; transform-origin: 50% 0; animation: gtGallop .26s ease-in-out infinite alternate; }
.gt-leg-b { animation-direction: alternate-reverse; }
@keyframes gtGallop { from { transform: rotate(-9deg); } to { transform: rotate(9deg) translateY(-1px); } }
.gt-car svg { animation: gtRide .26s ease-in-out infinite alternate; }
@keyframes gtRide { to { transform: translateY(-.08em) rotate(-1.2deg); } }
.gt-car::after { content: ''; position: absolute; left: -.9em; bottom: .05em; width: 1.1em; height: .7em; border-radius: 50%; background: radial-gradient(circle, rgba(255, 243, 196, .75), transparent 70%); animation: gtDust .5s ease-out infinite; }
@keyframes gtDust { from { transform: scale(.4); opacity: .9; } to { transform: translate(-1em, -.4em) scale(1.6); opacity: 0; } }
.gt-lane.done .gt-wh, .gt-lane.done .gt-leg-a, .gt-lane.done .gt-leg-b, .gt-lane.done .gt-car svg { animation-play-state: paused; }
.gt-lane.done .gt-car::after { display: none; }
.gt-track { border-bottom: .2em solid rgba(23, 17, 13, .75); background: linear-gradient(0deg, rgba(23, 17, 13, .12), transparent 45%); }
.gt-box-wisps path { stroke-dasharray: 8 40; animation: gtWisp 1.4s linear infinite; opacity: .9; }
.gt-box-wisps path:nth-child(2) { animation-delay: -.5s; }
.gt-box-wisps path:nth-child(3) { animation-delay: -.9s; }
@keyframes gtWisp { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 48; } }
.gt-box-glow { animation: gtGlow .5s ease-in-out infinite alternate; }
@keyframes gtGlow { from { opacity: .35; } to { opacity: 1; } }
.gt-box { filter: drop-shadow(0 0 .7em rgba(185, 139, 224, .7)); }

/* cards: a painted face with its own picture */
.gt-card-f::before { content: ''; position: absolute; inset: .28em; border: .07em solid currentColor; border-radius: .32em; opacity: .4; pointer-events: none; }
.gt-card-f.sips { background: radial-gradient(120% 80% at 50% 0%, #fff8e2, var(--cream) 60%, #e6cf9c); }
.gt-card-f.big { background: radial-gradient(120% 80% at 50% 0%, #b53a6c, var(--wine) 55%, var(--wine-d)); }
.gt-card-f.dare { background: radial-gradient(120% 80% at 50% 0%, #3f8f97, #2f6f76 55%, #1f4c52); --cut: #2f6f76; }
.gt-card-ic { display: block; width: 46%; margin-bottom: .1em; --lf: #17110d; }
.gt-card-ic svg { display: block; width: 100%; max-height: 3.2em; }
.gt-card-f.sips .gt-card-ic { width: 70%; }
.gt-card.huge .gt-card-ic svg { max-height: 5em; }
.gt-card.big .gt-card-ic svg { max-height: 2.6em; }
.gt-card:not(.big):not(.huge) .gt-card-ic { width: 40%; }
.gt-card:not(.big):not(.huge) .gt-card-ic svg { max-height: 1.6em; }

/* Dionysus is the star of the lower third */
.tv .gt-mask { width: 7.6em; margin-top: -3.6em; }
@media (prefers-reduced-motion: reduce) { .gt-rays, .gt-cloud, .gt-col-swag, .gt-wh, .gt-leg-a, .gt-leg-b, .gt-car svg, .gt-sh svg { animation: none !important; } }

.gt-col > i { display: block; align-self: center; width: 62%; margin: 0; min-width: 1.6em; }
.gt-col.r .gt-col-swag { right: 70%; transform-origin: 50% 0; }
.gt-doom { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 1.2em; max-width: 40em; }
.gt-doom span { flex-basis: 100%; text-align: center; }
.gt-doom-ic { display: block; width: 5em; --lf: currentColor; filter: drop-shadow(0 .15em 0 rgba(0, 0, 0, .35)); animation: gtTilt 1.2s ease-in-out infinite alternate; }
.gt-doom-ic svg { display: block; width: 100%; max-height: 5em; }
.gt-doom.sips .gt-doom-ic { width: 7em; }
@keyframes gtTilt { from { rotate: -7deg; } to { rotate: 7deg; } }
.gt-plaque-i { --fig: var(--clay-l); --inc: #17110d; }
.gt-plaque-i.wide { width: 11em; }
.gt-plaque-i.wide svg { animation: gtRide .26s ease-in-out infinite alternate; }
.tv .gt-car { width: 6.6em; }
.gt-m-beard { transform-box: fill-box; transform-origin: 50% 0; }
.gt-mask.talk .gt-m-beard { animation: gtJaw .19s ease-in-out infinite alternate; }
@keyframes gtJaw { to { transform: translateY(3px) scaleY(1.03); } }
.gt-award .gt-v-l { margin-bottom: .1em; }
.gt-doom.sips { font: inherit; color: var(--cream); }
.gt-doom.sips span { font: 700 1.2em/1.2 var(--sans); }

.gt-doom b { font-size: 3.8em; }
.gt-doom-ic { width: 4em; }
.gt-play:not(.tv) .gt-cups i { width: 3.6em; }