/* Guffhead: the back room of The Guff's Head. Pub carpet, a mahogany table, a beer mat for the pile, gold leaf on
   a green sign. Cards are proper cards. */
:root {
  --night: #140C08;
  --carpet: #5B1A16;
  --carpet2: #3E120F;
  --wood: #4A2A17;
  --wood2: #6B3D22;
  --wood3: #2E1A0E;
  --green: #1C3A2C;
  --green2: #24503B;
  --gold: #D8B25A;
  --gold-hi: #F2DB9C;
  --gold-lo: #8C6A22;
  --cream: #F6ECD7;
  --soft: #E3D3B4;
  --card: #FFFDF6;
  --ink: #1D1A16;
  --red: #C0262D;
  --good: #8FD9A0;
  --bad: #FF8A78;
  --display: "Playfair Display", Georgia, serif;
  --body: "Nunito", -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; min-height: 100dvh; color: var(--cream); font: 500 16px/1.45 var(--body);
  /* the carpet: swirls of gold on oxblood, under a pool of warm light */
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 190, 90, .18), transparent 70%),
    radial-gradient(circle at 25% 25%, rgba(216, 178, 90, .12) 0 8px, transparent 9px) 0 0 / 48px 48px,
    radial-gradient(circle at 75% 75%, rgba(216, 178, 90, .10) 0 5px, transparent 6px) 0 0 / 48px 48px,
    radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(40, 70, 50, .25) 15px 17px, transparent 18px) 0 0 / 48px 48px,
    radial-gradient(ellipse at 50% 50%, var(--carpet), var(--carpet2) 80%);
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--gold-hi); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; line-height: 1.15; }
h2 { font-size: 1.2rem; margin: 26px 0 10px; color: var(--gold-hi); font-style: italic; }
h3 { font-size: 1.05rem; margin-bottom: 8px; }
.soft { color: var(--soft); }
.small { font-size: .88rem; }
.err { color: var(--bad); }
.loading { text-align: center; color: var(--soft); font-style: italic; font-family: var(--display); margin-top: 60px; }

/* ---------- the pub sign ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: calc(8px + env(safe-area-inset-top)) 14px 6px; max-width: 760px; margin: 0 auto; }
.brand { text-decoration: none; display: flex; align-items: center; gap: 8px; }
.sign {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 7px 8px;
  background: linear-gradient(180deg, var(--green2), var(--green)); border: 3px solid var(--gold); border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--green), inset 0 0 0 3px var(--gold-lo), 0 6px 14px rgba(0, 0, 0, .5);
  transform-origin: 50% -14px; animation: swing 6s ease-in-out infinite;
}
.sign::before, .sign::after { content: ""; position: absolute; top: -12px; width: 2px; height: 12px; background: #2a2016; }
.sign::before { left: 18%; } .sign::after { right: 18%; }
.sign img { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); border: 2px solid var(--gold); }
.sign b { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 1.28rem; color: var(--gold-hi); letter-spacing: .01em; text-shadow: 0 1px 0 var(--gold-lo), 0 2px 3px rgba(0, 0, 0, .6); white-space: nowrap; }
.sign small { display: block; font: 700 .58rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: -1px; }
@keyframes swing { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) { .sign { animation: none; } }
.topnav { display: flex; gap: 12px; font-weight: 800; font-size: .88rem; margin-left: auto; }
.topnav a { text-decoration: none; }

.app { max-width: 760px; margin: 0 auto; padding: 4px 14px 40px; position: relative; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--cream); color: var(--ink); padding: 10px 16px; border-radius: 12px; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); z-index: 50; max-width: 92vw; text-align: center; }

/* ---------- panels, buttons, chips ---------- */
.card-panel { background: linear-gradient(180deg, rgba(74, 42, 23, .92), rgba(46, 26, 14, .94)); border: 1px solid rgba(216, 178, 90, .35); border-radius: 14px; padding: 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.btn { font: 800 1rem var(--body); border: 0; border-radius: 12px; padding: 11px 18px; cursor: pointer; color: var(--ink); background: var(--soft); transition: transform .12s, filter .12s; }
.btn:active { transform: translateY(2px) scale(.98); }
.btn[disabled] { opacity: .45; cursor: default; transform: none; }
.btn.gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 3px 0 var(--gold-lo), 0 6px 14px rgba(0, 0, 0, .35); }
.btn.gold:not([disabled]):hover { filter: brightness(1.06); }
.btn.big { font-size: 1.12rem; padding: 13px 24px; min-width: 60%; }
.btn.ghost { background: transparent; color: var(--cream); border: 2px solid rgba(246, 236, 215, .5); }
.btn.ghost.armed { border-color: var(--bad); color: var(--bad); }
.btn.small { font-size: .88rem; padding: 7px 12px; }
.linkish { background: none; border: 0; color: var(--gold-hi); text-decoration: underline; font: inherit; cursor: pointer; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip { font: 700 .9rem var(--body); border-radius: 999px; padding: 6px 12px; border: 2px solid rgba(216, 178, 90, .45); background: rgba(20, 12, 8, .45); color: var(--cream); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--gold); color: var(--ink); border-color: var(--gold-hi); }
.chip.person { padding: 4px 12px 4px 4px; }
.chip .avatar { border-radius: 50%; background: var(--cream); }
.patter { font-family: var(--display); font-style: italic; font-size: 1.05rem; margin: 6px 0; }
.patter.loud { color: var(--gold-hi); font-weight: 800; font-size: 1.15rem; }
.foot { text-align: center; margin-top: 28px; color: var(--soft); font-size: .9rem; }
details > summary { cursor: pointer; font-weight: 800; color: var(--gold-hi); }
details { margin: 12px 0; }

/* ---------- the door and the bar ---------- */
.door { text-align: center; padding-top: 10px; }
.door .doorman svg { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5)); }
.form { max-width: 360px; margin: 12px auto; text-align: left; display: grid; gap: 10px; }
.form label { display: grid; gap: 4px; font-weight: 800; }
.form input, select { font: 600 1rem var(--body); padding: 10px 12px; border-radius: 10px; border: 2px solid rgba(216, 178, 90, .5); background: var(--cream); color: var(--ink); }
.welcome { display: flex; align-items: center; gap: 12px; }
.landlord .avatar { border-radius: 50%; background: var(--cream); border: 3px solid var(--gold); }
.tables { display: grid; gap: 8px; }
.tablerow { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); background: rgba(46, 26, 14, .85); border: 1px solid rgba(216, 178, 90, .25); border-radius: 12px; padding: 10px 12px; }
.tablerow.go { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(216, 178, 90, .25); }
.tablerow .heads { display: flex; }
.tablerow .heads .avatar { border-radius: 50%; background: var(--cream); margin-right: -8px; border: 2px solid var(--wood); }
.tablerow .who { flex: 1; display: flex; flex-direction: column; font-weight: 800; margin-left: 8px; min-width: 0; }
.tablerow .who small { font-weight: 600; color: var(--soft); }
.tablerow .who small b { color: var(--gold-hi); }
.tablerow .lastline { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tablerow .sc { font: 900 1.3rem var(--display); text-align: center; display: flex; flex-direction: column; line-height: 1; }
.tablerow .sc small { font: 700 .62rem var(--body); color: var(--soft); text-transform: uppercase; letter-spacing: .08em; }
.rules summary .soft { font-weight: 600; font-size: .85rem; }
.rulegrid { display: grid; gap: 10px; margin: 12px 0; }
.tog { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.tog input { width: 22px; height: 22px; accent-color: var(--gold); }
.pickrow { display: grid; grid-template-columns: 1fr 1.6fr; align-items: center; gap: 8px; font-weight: 700; }
.pickrow select { padding: 7px 8px; font-size: .92rem; }
.rulelist { padding-left: 18px; margin: 6px 0; }
.rulelist li { margin: 4px 0; }
.rulelist b { color: var(--gold-hi); margin-right: 4px; }
.notify p { margin: 8px 0; }

/* ---------- cards ---------- */
.card {
  --w: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--w); height: calc(var(--w) * 1.42); border-radius: calc(var(--w) * .1); background: var(--card); color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 3px 8px rgba(0, 0, 0, .35); border: 1px solid #d9cfb8; user-select: none; -webkit-user-select: none;
  transition: transform .14s ease, box-shadow .14s, opacity .14s;
}
.card.red { color: var(--red); }
.card.lg { --w: 74px; } .card.md { --w: 54px; } .card.sm { --w: 40px; } .card.xs { --w: 24px; }
.card b { position: absolute; top: 3%; left: 7%; font: 800 calc(var(--w) * .28) / .95 var(--display); display: flex; flex-direction: column; align-items: center; }
.card b i { font-style: normal; font-size: .8em; }
.card em { font-style: normal; font-size: calc(var(--w) * .5); line-height: 1; margin-top: 12%; }
.card em.face { font: 900 italic calc(var(--w) * .6) var(--display); margin-top: 18%; text-shadow: 2px 2px 0 rgba(216, 178, 90, .55); }
.card em.ace { font-size: calc(var(--w) * .72); }
.card .mark { position: absolute; right: 4%; bottom: 3%; font-size: calc(var(--w) * .26); text-decoration: none; line-height: 1; color: var(--gold-lo); }
.card.xs b { font-size: 9px; top: 1px; left: 2px; }
.card.xs em, .card.xs .mark { display: none; }
.card.xs b i { font-size: 8px; }
.card.sm em { margin-top: 18%; }
.card[role="button"] { cursor: pointer; }
.card.sel { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--gold), 0 10px 18px rgba(0, 0, 0, .45); }
.card.dim { opacity: .5; filter: saturate(.6); }
.card.back {
  background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(216, 178, 90, .25) 5px 6px), repeating-linear-gradient(-45deg, transparent 0 5px, rgba(216, 178, 90, .25) 5px 6px), var(--green);
  border: calc(var(--w) * .06) solid var(--card); outline: 1px solid var(--gold-lo);
}
.card.back img { width: 52%; border-radius: 50%; background: var(--cream); border: 2px solid var(--gold); }
.card.xs.back img { border-width: 1px; }
.card.back[role="button"]:hover { transform: translateY(-4px) rotate(-2deg); }
.card.back.flipping { animation: flip .5s ease-in-out infinite alternate; }
@keyframes flip { to { transform: rotateY(80deg); } }
.card.nogo { box-shadow: 0 0 0 3px var(--bad), 0 6px 14px rgba(0, 0, 0, .4); }

/* ---------- the game ---------- */
.game .status { min-height: 30px; }
.live { margin: 0 0 6px; padding: 6px 10px; border-radius: 10px; background: rgba(143, 217, 160, .14); border: 1px solid rgba(143, 217, 160, .5); font-weight: 700; font-size: .92rem; }
.live b { color: var(--good); }
.opps { display: grid; gap: 8px; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); }
.opps.n1 { --n: 1; } .opps.n2 { --n: 2; } .opps.n3 { --n: 3; }
.pod { background: rgba(46, 26, 14, .82); border: 1px solid rgba(216, 178, 90, .25); border-radius: 12px; padding: 8px; min-width: 0; transition: box-shadow .2s, border-color .2s; }
.pod.turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(216, 178, 90, .35); }
.pod.isout { opacity: .6; }
.podhead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.podhead .avatar { border-radius: 50%; background: var(--cream); flex: none; }
.podname { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-left: 5px; box-shadow: 0 0 6px var(--good); vertical-align: middle; }
.outbadge { margin-left: auto; font-size: .7rem; font-weight: 800; background: var(--good); color: var(--ink); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.podcards { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.handcount { display: inline-flex; align-items: center; gap: 4px; }
.handcount b { font: 900 1.05rem var(--display); }
.handcount b.none { opacity: .5; }
.minifan { position: relative; display: inline-block; width: 36px; height: 34px; }
.minifan > span { position: absolute; left: calc(var(--i) * 3px); top: 0; transform: rotate(calc((var(--i) - 2) * 6deg)); transform-origin: 50% 100%; }
.tablecards { display: inline-flex; gap: 3px; }
.slot { position: relative; display: inline-block; }
.slot.xs { width: 24px; height: 34px; } .slot.sm { width: 40px; height: 57px; }
.slot.empty { border: 1px dashed rgba(246, 236, 215, .25); border-radius: 4px; }
.slot > .card { position: absolute; left: 0; top: 0; }
.slot > .card.onup { top: 4px; left: 2px; }
.known { font-size: .74rem; margin-top: 5px; color: var(--soft); display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.kc { background: var(--card); color: var(--ink); border-radius: 3px; padding: 0 3px; font-weight: 800; }
.kc.red { color: var(--red); }

/* the table itself: mahogany, with a beer mat for the pile */
.table {
  position: relative; margin: 12px 0 8px; border-radius: 22px; padding: 18px 10px 40px; display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: center; justify-items: center; gap: 6px;
  background: repeating-linear-gradient(92deg, rgba(0, 0, 0, .0) 0 9px, rgba(0, 0, 0, .07) 9px 11px, rgba(255, 255, 255, .03) 11px 14px), radial-gradient(ellipse at 50% 40%, var(--wood2), var(--wood) 60%, var(--wood3));
  border: 6px solid var(--wood3); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -10px 30px rgba(0, 0, 0, .4), 0 10px 26px rgba(0, 0, 0, .5);
}
.table small { display: block; text-align: center; font-weight: 700; font-size: .78rem; color: var(--soft); margin-top: 4px; }
.pack, .burnt, .pile { display: flex; flex-direction: column; align-items: center; }
.stack { position: relative; display: inline-block; width: 42px; height: 58px; }
.stack .card { position: absolute; left: 0; top: 0; } .stack .card.under { left: 3px; top: 3px; z-index: -1; }
.stack.empty { border: 2px dashed rgba(246, 236, 215, .2); border-radius: 6px; }
.ash { font-size: 2rem; filter: drop-shadow(0 0 8px rgba(255, 140, 40, .6)); }
.ash.dim { opacity: .25; filter: grayscale(1); }
.pile { position: relative; justify-content: flex-start; padding-top: 4px; }
.mat { position: absolute; width: 104px; height: 104px; border-radius: 50%; top: 4px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, #F4E9CC 0 54%, var(--red) 55% 62%, #F4E9CC 63% 70%, var(--green) 71%); box-shadow: 0 3px 8px rgba(0, 0, 0, .4); opacity: .9; }
.mat::after { content: "GUFF'S HEAD"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 italic 11px var(--display); color: var(--green); letter-spacing: .06em; opacity: .5; }
.fan { position: relative; display: block; width: 104px; height: 104px; }
.pile > small { margin-top: 4px; }
.pc { position: absolute; left: calc(16px + var(--i) * 10px); top: calc(14px + var(--i) * 1px); transform: rotate(var(--r)); }
.pc:last-child { animation: land .3s ease-out; }
@keyframes land { from { transform: translateY(-30px) rotate(0deg) scale(1.15); opacity: .4; } }
.need { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(20, 12, 8, .75); border: 1px solid var(--gold); color: var(--gold-hi); border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: .88rem; white-space: nowrap; }
.need.easy { border-color: var(--good); color: var(--good); }
.need.tough { border-color: var(--bad); color: var(--bad); }
.dir { position: absolute; right: 12px; top: 8px; font-size: 1.5rem; color: var(--gold-hi); animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the catch-up stage */
.stage { background: rgba(20, 12, 8, .9); border: 2px solid var(--gold); border-radius: 14px; padding: 10px; margin: 8px 0; min-height: 110px; }
.stagehead { display: flex; justify-content: space-between; font: italic 800 .95rem var(--display); color: var(--gold-hi); margin-bottom: 6px; }
.stagecard { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; }
.stagewho .avatar { border-radius: 50%; background: var(--cream); }
.stagecards { display: flex; gap: 4px; align-items: center; }
.stagetext { font-weight: 700; }
.stagetext .tag, .tag { display: block; font-weight: 600; font-size: .78rem; color: var(--soft); font-style: italic; }
.stagetext .talk { display: block; margin-top: 3px; color: var(--gold-hi); font-family: var(--display); }
.stagecard.slide { animation: slide .3s ease-out; }
.stagecard.pop { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.stagecards.burning .card { animation: burn 1.2s ease-in forwards; }
@keyframes burn { 0% { filter: none; } 40% { filter: sepia(1) saturate(4) hue-rotate(-20deg) brightness(1.2); box-shadow: 0 0 22px 6px rgba(255, 120, 30, .9); } 100% { filter: sepia(1) brightness(.2); opacity: 0; transform: translateY(-24px) scale(.8) rotate(8deg); } }
.pickfan { position: relative; display: inline-block; width: 70px; height: 58px; }
.pickfan > span { position: absolute; left: calc(var(--i) * 5px); top: 0; transform: rotate(calc((var(--i) - 3) * 8deg)); animation: scoop .6s ease-in calc(var(--i) * 40ms) both; }
@keyframes scoop { from { transform: translateY(-20px) rotate(0); opacity: 0; } }
.cone { font-size: 2.6rem; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.game.staging .actions, .game.staging .hint { visibility: hidden; }

/* my side */
.mine { background: rgba(46, 26, 14, .82); border: 1px solid rgba(216, 178, 90, .25); border-radius: 14px; padding: 10px; }
.mine.turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(216, 178, 90, .3); }
.mytable { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.mytable .slot.sm { width: 46px; height: 64px; }
.hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 14px; min-height: 92px; }
.hand.tight { gap: 0; } .hand.tight .card { margin: 0 -6px; }
.hand.tighter .card { --w: 46px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 12px 0; }
.prompt { font-weight: 800; color: var(--gold-hi); text-align: center; }
.hint { background: rgba(20, 12, 8, .6); border-left: 3px solid var(--gold); padding: 8px 10px; border-radius: 8px; font-size: .92rem; }
.talkbox p { margin: 6px 0; display: flex; gap: 8px; align-items: center; }
.talkbox .avatar { border-radius: 50%; background: var(--cream); flex: none; }
.talkbox .guffbot { font-family: var(--display); font-style: italic; color: var(--gold-hi); }
.talkbox .room { font-style: italic; color: var(--soft); font-size: .9rem; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.final { text-align: center; background: linear-gradient(180deg, var(--green2), var(--green)); border: 3px solid var(--gold); border-radius: 16px; padding: 16px; margin: 14px 0; }
.final.lost { background: linear-gradient(180deg, #5a2a1c, #3a1810); }
.bigemoji { font-size: 4rem; animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.order { list-style: none; padding: 0; margin: 10px auto 14px; display: grid; width: fit-content; gap: 4px; text-align: left; }
.order li { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.order li .avatar { border-radius: 50%; background: var(--cream); }
.order li.last { color: var(--bad); }
.cast { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cast figure { margin: 0; text-align: center; position: relative; }
.cast figcaption { font-weight: 800; }
.cast .conehat { position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 2.2rem; }
.chat { max-height: 220px; overflow: auto; background: rgba(20, 12, 8, .55); border-radius: 12px; padding: 8px 10px; }
.chat p { margin: 6px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chat .avatar { border-radius: 50%; background: var(--cream); }
.chatform { display: flex; gap: 8px; margin-top: 8px; }
.chatform input { flex: 1; font: 600 1rem var(--body); padding: 9px 12px; border-radius: 10px; border: 2px solid rgba(216, 178, 90, .5); background: var(--cream); color: var(--ink); }
.evlog { padding-left: 20px; max-height: 300px; overflow: auto; font-size: .9rem; }
.evlog li.burn { color: #FFB066; font-weight: 700; }
.evlog li.over, .evlog li.out { color: var(--gold-hi); font-weight: 800; }

/* the swap */
.sixcards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 8px; padding-top: 14px; }
.swapview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.swapview > div { background: rgba(46, 26, 14, .82); border-radius: 12px; padding: 10px; }
.swapview .row { display: flex; gap: 4px; flex-wrap: wrap; }

/* the record */
.bigstats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.bigstats b { font: 900 2rem var(--display); color: var(--gold-hi); display: block; }
.bigstats small { font-weight: 700; color: var(--soft); }
.h2h { width: 100%; border-collapse: collapse; }
.h2h th, .h2h td { padding: 6px 4px; text-align: center; border-bottom: 1px solid rgba(216, 178, 90, .2); }
.h2h td:first-child { text-align: left; display: flex; align-items: center; gap: 6px; font-weight: 700; }
.h2h .avatar { border-radius: 50%; background: var(--cream); }

/* December: fairy lights along the top, as every Guff game does */
body.xmas .top::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; pointer-events: none;
  background: radial-gradient(circle, #ff4d4d 0 3px, transparent 4px) 0 4px / 36px 10px repeat-x, radial-gradient(circle, #ffd84d 0 3px, transparent 4px) 12px 4px / 36px 10px repeat-x, radial-gradient(circle, #59d97a 0 3px, transparent 4px) 24px 4px / 36px 10px repeat-x;
  animation: twinkle 1.6s steps(2) infinite; }
body.xmas .top { position: relative; }
@keyframes twinkle { 50% { opacity: .6; } }

@media (max-width: 420px) {
  .card.md { --w: 48px; }
  .card.lg { --w: 66px; }
  .opps.n3 .podcards { gap: 3px; }
  .opps.n3 .minifan { width: 28px; }
  .table { padding: 14px 6px 40px; }
}

/* ---------- the 💩: sits on the reigning Guffhead's head, game after game, until someone else loses ---------- */
.hw { position: relative; display: inline-block; line-height: 0; flex: none; }
.hw .pooh { position: absolute; left: 50%; top: calc(var(--s) * -0.42); font-size: calc(var(--s) * .62); line-height: 1; font-style: normal; transform: translateX(-50%); transform-origin: 50% 100%; animation: perch 3.2s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); pointer-events: none; }
.hw.fig .pooh { top: calc(var(--s) * -0.08); font-size: calc(var(--s) * .3); }
.hw .pooh.drop { animation: plop 1.1s cubic-bezier(.3, 0, .4, 1) both, perch 3.2s ease-in-out 1.1s infinite; }
@keyframes perch { 0%, 100% { transform: translateX(-50%) rotate(-5deg); } 50% { transform: translateX(-50%) rotate(5deg); } }
@keyframes plop {
  0% { transform: translate(-50%, -260%) rotate(-30deg); opacity: 0; }
  45% { transform: translate(-50%, 0) rotate(0deg) scale(1.1, .8); opacity: 1; }
  60% { transform: translate(-50%, -22%) scale(.92, 1.1); }
  75% { transform: translate(-50%, 0) scale(1.06, .92); }
  100% { transform: translate(-50%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .hw .pooh, .hw .pooh.drop { animation: none; } }
.podhead .hw, .tablerow .heads .hw { margin-top: 10px; }
.myhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.myhead .avatar { border-radius: 50%; background: var(--cream); }
.myhead small { flex-basis: 100%; }
.crowning { margin: 30px 0 4px; }
.crowning .avatar { border-radius: 50%; background: var(--cream); border: 3px solid var(--gold); }
.cast .hw.fig { line-height: normal; }
.leaguesnip { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--cream); margin: 14px 0 4px; }
.wearing { display: flex; align-items: center; gap: 12px; }
.wearing .hw { margin-top: 18px; }
.wearing .avatar { border-radius: 50%; background: var(--cream); }
.wearing b { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--gold-hi); }
.wearing small { color: var(--soft); font-weight: 600; }
.wearing.big { margin: 12px 0; }
.wearing.big .hw { margin-top: 30px; }
.leaguesnip .mini { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; font-size: .92rem; align-items: center; }
.leaguesnip .mini b { color: var(--gold-hi); }
.leaguesnip .mini b::after { content: " 💩"; }
.leaguesnip .mini em { margin-left: auto; color: var(--gold-hi); font-style: normal; font-weight: 800; }
.lgtable { width: 100%; border-collapse: collapse; }
.lgtable th, .lgtable td { padding: 8px 4px; border-bottom: 1px solid rgba(216, 178, 90, .2); text-align: center; }
.lgtable td:first-child { text-align: left; display: flex; align-items: center; gap: 8px; font-weight: 800; }
.lgtable td:first-child .hw { margin-top: 12px; }
.lgtable .avatar { border-radius: 50%; background: var(--cream); }
.lgtable .pp { text-align: left; letter-spacing: -2px; font-size: 1.05rem; }
.lgtable tr.me td { color: var(--gold-hi); }