/* Agonia (static/js/games/agonia.js): an octagonal table of dark glass inside a neon tube that warms from its own cold
   colour to red as the hands get short (--heat, 0..1); a four-colour deck on smoked glass; with one card left the edge
   of the screen pulses red with a heartbeat. Four tables (.agt-*) and three card backs (drawn in the js). Its own look:
   nothing here is shared with the other card games. */

/* ---------- the tables: the glass, and the colour of the cold neon ---------- */
.agt-plum { --g1: #2b1238; --g2: #170a22; --g3: #0a0510; --neon: #c86bff; }
.agt-crimson { --g1: #3b0d1b; --g2: #200711; --g3: #0e0308; --neon: #ff6b9a; }
.agt-midnight { --g1: #121a46; --g2: #0a0f2b; --g3: #040616; --neon: #5aa8ff; }
.agt-aurora { --g1: #08333a; --g2: #051d22; --g3: #020c0f; --neon: #3cf0c8; }
.ag-wrap { --heat: 0; --tube: color-mix(in oklab, var(--neon) calc(100% - var(--heat) * 100%), #ff2d55); }

/* ---------- a card ---------- */
.agc { position: relative; display: block; width: var(--cw, 80px); aspect-ratio: 2 / 3; flex: none; border-radius: calc(var(--cw, 80px) * .09); }
.agc .agsvg, .ag-hc .agsvg { display: block; width: 100%; height: 100%; }
/* (the cards' shadows are box-shadows round their rounded corners, not drop-shadow filters: a filter was worked out
   again on every frame anything near it moved — measured, the table a third lighter without them) */
.ag-ghost { position: fixed; z-index: 95; pointer-events: none; will-change: transform; }
.ag-ghost .agc { width: 100%; box-shadow: 0 0 10px rgba(255,255,255,.12), 0 10px 14px rgba(0,0,0,.6); }

/* ---------- the page: the table on one screen ---------- */
html:has(body.game-agonia[data-page="table"]) { overflow: hidden; }
body.game-agonia[data-page="table"] .site-foot { display: none; }
body.game-agonia[data-page="table"] .chat-fab { display: none !important; }
body.game-agonia[data-page="table"] #table.page { max-width: none; height: calc(100dvh - var(--top)); box-sizing: border-box; overflow: hidden; padding: 10px 14px; }
body.game-fs .ag-wrap { height: 100%; }
.ag-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; height: 100%;
  --cw: clamp(56px, 6.2vw, 94px); color: #f3eefe; }
/* agony: the edge of the screen breathes red */
.ag-wrap::after { content: ''; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0; transition: opacity .6s;
  box-shadow: inset 0 0 0 2px rgba(255,45,85,.5), inset 0 0 90px 10px rgba(255,30,70,.45); }
.ag-wrap.agony::after { opacity: 1; animation: agBeatV 1.8s ease-in-out infinite; }
@keyframes agBeatV { 0%, 40%, 100% { opacity: .25; } 8% { opacity: .7; } 20% { opacity: .4; } 28% { opacity: .6; } }

/* ---------- the bar ---------- */
.ag-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 5px 6px 5px 14px; border-radius: 14px;
  background: rgba(12,8,18,.82); border: 1px solid color-mix(in srgb, var(--tube) 45%, transparent); box-shadow: 0 0 18px -8px var(--tube); }
.ag-info { min-width: 0; font: 800 12.5px 'Inter', system-ui, sans-serif; color: rgba(243,238,254,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.ag-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #f3eefe; font: 800 12.5px 'Inter', system-ui, sans-serif; background: rgba(255,255,255,.05); border: 1px solid color-mix(in srgb, var(--tube) 55%, transparent);
  box-shadow: 0 0 10px -4px var(--tube); }
.ag-tool:hover { box-shadow: 0 0 16px -2px var(--tube); color: #fff; }
.ag-tool svg.i { width: 17px; height: 17px; }
.ag-tool.wide { width: auto; padding: 0 13px; border-radius: 999px; white-space: nowrap; }
.ag-tool.hidden { display: none; }
.ag-tool > b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; display: grid; place-items: center;
  font-size: 10.5px; color: #fff; background: #ff2d55; }
.ag-tool > b.hidden { display: none; }
.ag-tool.ag-leave:hover { border-color: #ff2d55; color: #ffb0c0; }
.ag-mute .tv-snd-off { display: none; }
body.tv-muted .ag-mute .tv-snd-off { display: inline; } body.tv-muted .ag-mute .tv-snd-on { display: none; }

/* ---------- the octagon of dark glass in its neon tube ---------- */
.ag-table { --cut: 70px; position: relative; min-height: 0; isolation: isolate;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background: radial-gradient(ellipse 55% 50% at 50% 48%, color-mix(in srgb, var(--g1) 80%, var(--tube) 20%), var(--g2) 65%, var(--g3)),
    repeating-linear-gradient(60deg, rgba(255,255,255,.018) 0 1px, transparent 1px 22px), repeating-linear-gradient(-60deg, rgba(255,255,255,.018) 0 1px, transparent 1px 22px); }
.ag-table::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 45% 22% at 50% 4%, rgba(255,255,255,.1), transparent 70%), radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,.45)); }
/* (the tube round the table: on its own layer — it changes every frame, the table under it is not drawn again; its glow
   is soft lines under it, not filters, which were worked out again every frame) */
.ag-tube { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; will-change: transform; }
.ag-tube path { fill: none; }
.ag-tube .tr-bg { stroke: var(--tube); stroke-width: 3; opacity: .45; transition: stroke .8s; }
.ag-tube .tr-bg1 { stroke: var(--tube); stroke-width: 9; stroke-opacity: .13; transition: stroke .8s; }
.ag-tube .tr-bg2 { stroke: var(--tube); stroke-width: 24; stroke-opacity: .05; transition: stroke .8s; }
.ag-tube .tr-fg { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100 100; }
.ag-tube .tr-g1, .ag-tube .tr-g2 { stroke: var(--tube); stroke-linecap: round; stroke-dasharray: 100 100; transition: opacity .3s; }
.ag-tube .tr-g1 { stroke-width: 10; stroke-opacity: .5; }
.ag-tube .tr-g2 { stroke-width: 26; stroke-opacity: .16; }
.ag-tube.idle .tr-g1, .ag-tube.idle .tr-g2 { opacity: 0; }
.ag-tube.mine .tr-fg { stroke: #fffbe6; }
.ag-tube.low .tr-fg { stroke: #ff6b81; animation: agLow .45s ease-in-out infinite alternate; }
.ag-tube.idle .tr-fg, .ag-tube.idle .tr-head { opacity: 0; }
.ag-tube .tr-head { fill: #fff; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--tube)); }
@keyframes agLow { to { stroke-width: 5.5; } }

/* ---------- the others ---------- */
.ag-opps { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ag-opp { position: absolute; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 4px; }
.ag-opp.at-t { left: 50%; top: 16px; transform: translateX(-50%); }
.ag-opp.at-tl { left: 26%; top: 16px; transform: translateX(-50%); } .ag-opp.at-tr { left: 74%; top: 16px; transform: translateX(-50%); }
.ag-opp.at-l { left: 18px; top: 46%; transform: translateY(-50%); } .ag-opp.at-r { right: 18px; top: 46%; transform: translateY(-50%); }
.ag-av { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 3px; box-sizing: border-box; border-radius: 50%; grid-row: 1 / 3; }
.ag-av.sm { width: 30px; height: 30px; padding: 2px; }
.ag-tring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.1); }
.ag-opp.turn .ag-tring, .ag-dock.my-turn .ag-tring { background: conic-gradient(#fff calc(var(--k, 1) * 360deg), rgba(255,255,255,.08) 0);
  box-shadow: 0 0 4px var(--tube), 0 0 12px var(--tube); }
.ag-avi { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 900; font-size: 16px;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.45), transparent 45%), var(--bg); box-shadow: 0 0 0 2px #0c0812; }
.ag-avi svg.i { width: 20px; height: 20px; } .ag-avi .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-on { display: grid; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.ag-on b { font-size: 12.5px; font-weight: 900; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-on small { font-size: 10.5px; font-weight: 700; opacity: .65; }
.ag-fan { position: relative; display: block; width: 84px; height: 36px; }
.ag-fan i { position: absolute; left: 50%; bottom: 0; width: 26px; aspect-ratio: 2 / 3; margin-left: -13px; transform-origin: 50% 130%; transform: rotate(calc(var(--k) * 8deg));
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 8px -2px var(--tube), 0 2px 3px rgba(0,0,0,.5); }
.ag-fan i .agsvg { display: block; width: 100%; height: 100%; }
.ag-fan em { position: absolute; right: -12px; bottom: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 900; color: #0c0812; background: #fff; box-shadow: 0 0 10px var(--tube); }
.ag-tag { display: none; grid-column: 1 / -1; justify-self: center; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; padding: 2px 9px; border-radius: 999px; color: #fff;
  background: #ff2d55; box-shadow: 0 0 14px #ff2d55; }
.ag-opp.agony .ag-tag { display: block; animation: agTag 1.15s ease-in-out infinite; }
.ag-opp.agony .ag-avi { box-shadow: 0 0 0 2px #ff2d55, 0 0 18px #ff2d55; }
@keyframes agTag { 0%, 40%, 100% { transform: scale(1); } 8% { transform: scale(1.18); } 26% { transform: scale(1.1); } }
.ag-pop { position: absolute; left: 50%; top: 0; z-index: 9; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; font-weight: 900; font-size: 14px;
  padding: 4px 11px; border-radius: 999px; color: #fff; background: rgba(12,8,18,.9); border: 1px solid var(--tube); box-shadow: 0 0 14px var(--tube); animation: agPop 1.6s ease-out forwards; }
.ag-pop.seven { background: #ff2d55; border-color: #ffc0cc; font-size: 18px; }
.ag-pop.skip { font-size: 22px; } .ag-pop.again { font-size: 22px; }
.ag-pop.agony { background: #ff2d55; border-color: #ffc0cc; letter-spacing: 1.5px; }
@keyframes agPop { 0% { transform: translate(-50%, -20%) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -70%) scale(1.15); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -140%) scale(1); opacity: 0; } }
/* (the players at the top of the table: the sign comes out under them and sinks, never off the screen) */
.ag-opp.at-t .ag-pop, .ag-opp.at-tl .ag-pop, .ag-opp.at-tr .ag-pop { top: 100%; animation-name: agPopDown; }
@keyframes agPopDown { 0% { transform: translate(-50%, -60%) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -10%) scale(1.15); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, 50%) scale(1); opacity: 0; } }

/* ---------- the middle: the deck, the pile, the suit asked glowing beside them ---------- */
.ag-center { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 4; display: flex; align-items: center; gap: calc(var(--cw) * .55); }
.ag-deck { position: relative; width: var(--cw); aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; cursor: default; }
.ag-deck .agc.d { position: absolute; inset: 0; width: 100%; transform: translate(calc(var(--i) * -2px), calc(var(--i) * -2px)); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.ag-deck.can { cursor: pointer; }
.ag-deck.can .agc.d:last-of-type { animation: agCan 1.3s ease-in-out infinite; }
@keyframes agCan { 50% { transform: translate(-6px, -10px); } }
/* (its glow: drawn once, only its opacity breathes) */
.ag-deck.can .agc.d:last-of-type::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 14px var(--tube);
  opacity: 0; animation: agBreath 1.3s ease-in-out infinite; }
@keyframes agBreath { 50% { opacity: 1; } }
.ag-deck em { position: absolute; z-index: 5; left: 50%; bottom: -11px; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px;
  background: rgba(10,6,16,.9); border: 1px solid color-mix(in srgb, var(--tube) 60%, transparent); }
.ag-deck.shuf .agc.d:nth-child(odd) { animation: agShA .34s ease-in-out 3; } .ag-deck.shuf .agc.d:nth-child(even) { animation: agShB .34s ease-in-out 3; }
@keyframes agShA { 50% { transform: translate(-20px, -6px) rotate(-12deg); } } @keyframes agShB { 50% { transform: translate(18px, -4px) rotate(10deg); } }
/* a card taken off the deck: only the top card slides off and up (the shuffle is for an empty deck only) */
.ag-deck.give .agc.d:last-of-type { animation: agGive .34s cubic-bezier(.3,1.3,.5,1); }
@keyframes agGive { 45% { transform: translate(6px, -14px) rotate(5deg); box-shadow: 0 0 14px var(--tube), 0 4px 8px rgba(0,0,0,.6); } }
.ag-pile { position: relative; width: var(--cw); aspect-ratio: 2 / 3; }
.ag-pile .agc { position: absolute; inset: 0; width: 100%; transform: translate(var(--x), var(--y)) rotate(var(--r)); box-shadow: 0 3px 6px rgba(0,0,0,.55); }
.ag-pile .agc:last-child { box-shadow: 0 0 12px rgba(255,255,255,.12), 0 4px 8px rgba(0,0,0,.6); }
.ag-pile .agc.land { animation: agLand .32s cubic-bezier(.3,1.5,.5,1); }
/* (it lands already turned the way it lies: only a small settle and a flash of light, no turning on the pile) */
@keyframes agLand { from { transform: translate(var(--x), calc(var(--y) - 6px)) rotate(var(--r)) scale(1.05); filter: brightness(1.4); box-shadow: 0 0 16px #fff; } }
/* a card under the pointer rises; the space it leaves below still counts as the card, so it never flickers */
.ag-hc.ok:hover::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 44px; }
.ag-suit { position: relative; display: grid; justify-items: center; gap: 4px; width: calc(var(--cw) * .7); }
.ag-suit svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 16px currentColor); }
.ag-suit small { font-size: 10.5px; font-weight: 900; letter-spacing: .5px; opacity: .8; white-space: nowrap; }
.ag-suit.s-s { color: #b9a6ff; } .ag-suit.s-h { color: #ff3d6e; } .ag-suit.s-d { color: #ffb020; } .ag-suit.s-c { color: #2fe0b0; }
.ag-suit.asked svg { animation: agAsked 1.6s ease-in-out infinite; }
/* (it grows and shrinks with its glow as drawn: changing the glow itself was a filter worked out again every frame) */
@keyframes agAsked { 50% { transform: scale(1.12); } }
.ag-pend { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); z-index: 6; font: 900 18px 'Inter', system-ui, sans-serif; padding: 2px 12px; border-radius: 999px;
  color: #fff; background: #ff2d55; box-shadow: 0 0 18px #ff2d55; animation: agTag 1s ease-in-out infinite; }
.ag-pend.hidden { display: none; }

/* ---------- the word in the middle ---------- */
.ag-banner { position: absolute; left: 50%; top: 24%; z-index: 25; transform: translateX(-50%); max-width: min(90%, 520px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; padding: 8px 18px; border-radius: 999px; font: 900 14px 'Inter', system-ui, sans-serif; color: #fff; background: rgba(10,6,16,.9);
  border: 1px solid var(--tube); box-shadow: 0 0 22px -4px var(--tube); animation: agBan .3s cubic-bezier(.3,1.4,.5,1); }
.ag-banner.blank { display: none; }
.ag-banner.good { color: #0c0812; background: #fff; box-shadow: 0 0 26px var(--tube); }
.ag-banner.hot { background: #ff2d55; border-color: #ffc0cc; box-shadow: 0 0 26px #ff2d55; }
.ag-banner.col.s-s { border-color: #b9a6ff; box-shadow: 0 0 22px -2px #b9a6ff; } .ag-banner.col.s-h { border-color: #ff3d6e; box-shadow: 0 0 22px -2px #ff3d6e; }
.ag-banner.col.s-d { border-color: #ffb020; box-shadow: 0 0 22px -2px #ffb020; } .ag-banner.col.s-c { border-color: #2fe0b0; box-shadow: 0 0 22px -2px #2fe0b0; }
@keyframes agBan { from { opacity: 0; transform: translate(-50%, -6px) scale(.95); } }
.ag-table > .paused21 { z-index: 26; }

/* ---------- you ---------- */
.ag-me { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.ag-dock { position: relative; display: flex !important; align-items: center; gap: 12px; margin: 0; padding: 7px 12px; border-radius: 16px; min-width: 0;
  background: rgba(12,8,18,.86); border: 1px solid rgba(255,255,255,.1); }
.ag-dock > .turnlbl { flex: 1; min-width: 0; justify-content: flex-start !important; }
.ag-dock > .ag-acts { flex: none; }
.ag-dock.my-turn { border-color: var(--tube); box-shadow: 0 0 22px -6px var(--tube); }
.ag-dock.agony { border-color: #ff2d55; box-shadow: 0 0 26px -4px #ff2d55; }
.ag-who { flex: none; }
.ag-dock .turnlbl { display: flex; justify-content: center; gap: 10px; margin: 0; max-width: 100%; }
.ag-dock .turnlbl b { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-dock .turnlbl span { font-size: 12px; font-weight: 800; opacity: .7; white-space: nowrap; }
.ag-dock .tbar { display: none; }
.ag-acts { display: flex; justify-content: center; gap: 8px; min-height: 40px; }
.ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px 0 14px; border-radius: 999px; cursor: pointer;
  font: 900 13px 'Inter', system-ui, sans-serif; color: #fff; border: 1px solid rgba(255,255,255,.3); transition: transform .15s, box-shadow .2s; }
.ag-btn:active { transform: scale(.96); }
.ag-btn.hidden { display: none; }
.ag-btn .ag-ico { width: 18px; height: 18px; }
/* "take": a bright pill of light in the table's neon — it says "press me" on every table */
.ag-btn.take { color: #140c1e; background: linear-gradient(180deg, #ffffff, #ece4ff); border: 0; padding: 0 20px 0 15px;
  box-shadow: 0 0 0 2px var(--tube), 0 0 18px -2px var(--tube), 0 6px 16px -6px rgba(0,0,0,.8); animation: agTake 1.4s ease-in-out infinite; }
.ag-btn.take .ag-ico { color: var(--tube); filter: drop-shadow(0 0 3px var(--tube)); }
.ag-btn.take:hover { transform: translateY(-2px); }
.ag-btn.take:active { transform: scale(.95); }
@keyframes agTake { 50% { box-shadow: 0 0 0 2px var(--tube), 0 0 30px 2px var(--tube), 0 6px 16px -6px rgba(0,0,0,.8); } }
.ag-btn.pass { background: rgba(255,255,255,.08); }
/* "One card!": a hot pulsing pill with its seconds — press it in time */
.ag-btn.call { color: #fff; border: 0; padding: 0 20px 0 15px; background: linear-gradient(135deg, #ff5f85, #ff2d55 55%, #c3123b);
  box-shadow: 0 0 0 2px #ffc0cc, 0 0 22px -2px #ff2d55; text-shadow: 0 1px 2px rgba(0,0,0,.35); animation: agCallBtn .7s ease-in-out infinite alternate; }
.ag-btn.call .ag-ico { color: #fff; }
@keyframes agCallBtn { to { transform: scale(1.06); box-shadow: 0 0 0 2px #ffc0cc, 0 0 34px 4px #ff2d55; } }
.ag-pop.call { background: #18c07a; border-color: #a6f5cf; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .ag-btn.call { animation: none; } }
.ag-hand { display: flex; justify-content: center; align-items: flex-end; min-width: 0; overflow: hidden; --ov: .2;
  padding: 28px 8px calc(10px + env(safe-area-inset-bottom) + min(36px, var(--n, 7) * var(--n, 7) * .14px)); min-height: calc(var(--cw) * 1.5 + 28px); }
.ag-hc { position: relative; flex: none; width: var(--cw); aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; cursor: pointer; margin-left: calc(var(--cw) * var(--ov) * -1);
  border-radius: calc(var(--cw) * .09); box-shadow: 0 4px 7px rgba(0,0,0,.6); transform: translateY(calc(var(--d) * var(--d) * .7px)) rotate(calc(var(--d) * 1.8deg));
  transform-origin: 50% 120%; transition: transform .18s, box-shadow .2s, opacity .2s; }
.ag-hc:first-child { margin-left: 0; }
.ag-hc.no { opacity: .45; filter: saturate(.5) brightness(.8); box-shadow: 0 4px 6px rgba(0,0,0,.5); cursor: default; }
.ag-hc.ok { transform: translateY(calc(var(--d) * var(--d) * .7px - 14px)) rotate(calc(var(--d) * 1.8deg)); box-shadow: 0 0 10px var(--tube), 0 6px 8px rgba(0,0,0,.6); }
.ag-hc.ok:hover, .ag-hc.ok:focus-visible { z-index: 5; transform: translateY(-30px) rotate(0) scale(1.07); }
/* (the card just drawn: a white glow breathing over it — drawn once, only its opacity changes) */
.ag-hc.new::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 18px #fff; opacity: 0; animation: agBreath 1s ease-in-out infinite; }
.ag-hc.came { animation: agCame .45s cubic-bezier(.3,1.3,.5,1); }
@keyframes agCame { from { transform: translateY(-70px) rotate(-12deg) scale(.7); opacity: 0; } }
.ag-hc.gone { opacity: 0; transform: translateY(-20px) scale(.9); transition: opacity .1s, transform .1s; }
.ag-hand.dealt .ag-hc { animation: agDeal .48s cubic-bezier(.3,1.2,.5,1) backwards; animation-delay: calc(var(--i) * 65ms + .3s); }
@keyframes agDeal { from { transform: translateY(-170px) rotateY(90deg) scale(.6); opacity: 0; } }
.ag-hc.nope { animation: agNope .35s; }
@keyframes agNope { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }

/* ---------- choosing the suit after an Ace ---------- */
.ag-pick { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(4,2,8,.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.ag-pick.hidden { display: none; }
.ag-pick-in { width: min(360px, 100%); padding: 18px; border-radius: 22px; display: grid; justify-items: center; gap: 12px; color: #f3eefe;
  background: linear-gradient(165deg, rgba(36,22,52,.98), rgba(12,8,18,.98)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 40px -12px #c86bff, 0 30px 70px -20px rgba(0,0,0,.9);
  animation: agIn .25s ease-out; }
@keyframes agIn { from { transform: scale(.92); opacity: 0; } }
.ag-pick-in .agc.mini { --cw: 52px; }
.ag-pick-in h3 { margin: 0; font-size: 16px; font-weight: 900; }
.ag-suits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ag-sb { display: grid; justify-items: center; gap: 6px; padding: 12px 8px 10px; border-radius: 16px; cursor: pointer; color: #f3eefe; font: 800 13px 'Inter', system-ui, sans-serif;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); transition: transform .15s, box-shadow .15s, border-color .15s; }
.ag-sb svg { width: 40px; height: 40px; filter: drop-shadow(0 0 8px currentColor); }
.ag-sb.s-s { color: #b9a6ff; } .ag-sb.s-h { color: #ff3d6e; } .ag-sb.s-d { color: #ffb020; } .ag-sb.s-c { color: #2fe0b0; }
.ag-sb span { color: #f3eefe; }
.ag-sb:hover { transform: translateY(-2px); border-color: currentColor; box-shadow: 0 0 20px -6px currentColor; }
.ag-pick-x { padding: 6px 14px; border-radius: 999px; cursor: pointer; background: none; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); font: 700 12.5px 'Inter', system-ui, sans-serif; }

/* ---------- the end of a hand ---------- */
.ag-res { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 12px; pointer-events: none; }
.ag-res.hidden { display: none; }
.ag-res-in { pointer-events: auto; width: min(560px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; padding: 16px; border-radius: 22px; color: #f3eefe;
  background: linear-gradient(165deg, rgba(36,22,52,.98), rgba(12,8,18,.98)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 46px -14px #ff3d6e, 0 30px 70px -20px rgba(0,0,0,.95);
  animation: agIn .3s ease-out; }
.ag-res-in h3 { margin: 0 0 10px; text-align: center; font-size: 17px; font-weight: 900; }
.ag-res-rows { display: grid; gap: 6px; }
.ag-rr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: rgba(255,255,255,.04); }
.ag-rr.win { box-shadow: inset 0 0 0 1px #fff, 0 0 16px -6px #fff; background: rgba(255,255,255,.08); }
.ag-rr .ag-av { grid-row: auto; }
.ag-rn { display: grid; gap: 3px; min-width: 0; }
.ag-rn b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-rc { display: flex; gap: 2px; overflow: hidden; }
.ag-rc .agc.mini { --cw: 20px; }
.ag-rp { font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; color: #ffb020; }
.ag-rt { display: grid; justify-items: end; font-weight: 900; line-height: 1; } .ag-rt small { font-size: 9.5px; opacity: .6; font-weight: 700; }
.ag-res-n { margin: 10px 0 0; text-align: center; font-size: 12px; opacity: .6; }
/* your side won the hand: a white glow and a light sweeping over the card */
.ag-res-in.won { position: relative; border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 60px -10px #fff, 0 30px 70px -20px rgba(0,0,0,.95); }
.ag-res-in.won::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.16) 48%, transparent 66%) no-repeat; background-size: 250% 100%; animation: agSweep 1.4s .2s ease-out both; }
@keyframes agSweep { from { background-position: 120% 0; } to { background-position: -40% 0; } }
/* lost: the pulse on top beats twice and goes flat, the card drops in with a small shudder, red light */
.ag-res-in.lost { position: relative; border-color: rgba(255,45,85,.55); box-shadow: 0 0 0 1px rgba(255,45,85,.25), 0 0 60px -12px #ff2d55, 0 30px 70px -20px rgba(0,0,0,.95);
  animation: agLost .7s cubic-bezier(.3,1.2,.5,1) both; }
@keyframes agLost { 0% { transform: translateY(-24px) scale(.94); opacity: 0; } 55% { transform: translateY(0) scale(1); opacity: 1; } 65% { translate: -5px 0; } 75% { translate: 5px 0; } 85% { translate: -2px 0; } 100% { translate: 0 0; } }
.ag-ekg { display: block; width: 100%; height: 36px; margin: -4px 0 4px; overflow: visible; }
.ag-ekg path { fill: none; stroke: #ff2d55; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #ff2d55) drop-shadow(0 0 10px #ff2d55); }
.ag-ekg .beat { stroke-dasharray: 100 100; animation: agEkgDraw 1.3s .25s linear both, agEkgFade .5s 1.7s ease-out forwards; }
.ag-ekg .flat { opacity: 0; animation: agEkgFlat .4s 1.6s ease-out forwards; }
@keyframes agEkgDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes agEkgFade { to { opacity: 0; } }
@keyframes agEkgFlat { to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .ag-res-in.won::after, .ag-res-in.lost, .ag-ekg .beat, .ag-ekg .flat { animation: none !important; } .ag-ekg .flat { opacity: .9; } .ag-ekg .beat { opacity: 0; } }

/* ---------- home and my look ---------- */
.hero-ag .ag-art { display: flex; justify-content: center; padding: 4px 0 10px; }
.hero-ag .ag-art img { display: block; width: 100%; max-width: 320px; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
.ag-target { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); }
.ag-target button { font-size: 12.5px; font-weight: 900; }
.ag-lk { position: relative; display: block; width: 100%; height: 100%; min-height: 60px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--g1), var(--g2) 70%, var(--g3)); box-shadow: inset 0 0 0 2px var(--neon), inset 0 0 14px -4px var(--neon); }
.ag-lk-c { position: absolute; top: 50%; width: 28%; max-width: 46px; aspect-ratio: 2 / 3; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.ag-lk-c .agsvg { width: 100%; height: 100%; display: block; }
.ag-lk-c.b { left: 30%; transform: translate(-50%, -50%) rotate(-9deg); } .ag-lk-c.f { left: 64%; transform: translate(-50%, -50%) rotate(7deg); }
.logo-ag { width: 36px; height: 36px; flex: none; } .logo-ag img, .logo-ag svg { width: 36px; height: 36px; display: block; filter: drop-shadow(0 0 6px rgba(255,61,110,.5)); }

@media (prefers-reduced-motion: reduce) {
  .ag-wrap.agony::after, .ag-opp.agony .ag-tag, .ag-deck.can .agc.d, .ag-suit.asked svg, .ag-pend, .ag-btn.take, .ag-hc.new { animation: none !important; }
}
/* ---------- a computer: the tools on the table, no bar ---------- */
@media (min-width: 761px) and (min-height: 521px) {
  .ag-wrap { grid-template-rows: minmax(0, 1fr) auto; }
  .ag-top { position: absolute; top: 18px; right: calc(var(--cut, 130px) + 14px); z-index: 30; padding: 0; background: none; border: 0; box-shadow: none; }
  .ag-top .ag-info { display: none; }
}
/* ---------- a phone ---------- */
@media (max-width: 760px) {
  .ag-wrap { --cw: clamp(46px, 13vw, 64px); }
  .ag-av { width: 36px; height: 36px; padding: 2px; } .ag-on b { font-size: 11px; max-width: 76px; } .ag-on small { display: none; }
  .ag-fan { width: 56px; height: 26px; } .ag-fan i { width: 15px; margin-left: -7.5px; }
  .ag-opp.at-l { left: 10px; } .ag-opp.at-r { right: 10px; } .ag-opp.at-t, .ag-opp.at-tl, .ag-opp.at-tr { top: 12px; }
  .ag-opp.at-l, .ag-opp.at-r { grid-template-columns: auto; justify-items: center; } .ag-opp.at-l .ag-av, .ag-opp.at-r .ag-av { grid-row: auto; }
  .ag-who { display: none; }
  .ag-btn { min-height: 36px; padding: 0 12px 0 10px; font-size: 12px; }
  .ag-tool { width: 32px; height: 32px; }
  .ag-center { top: 55%; gap: calc(var(--cw) * .35); }
}
@media (max-width: 760px) and (orientation: portrait) {
  .ag-table { align-self: center; height: min(100%, 132vw); }
}
@media (orientation: landscape) and (max-height: 520px) {
  body.game-agonia[data-page="table"] .top { display: none; }
  body.game-agonia[data-page="table"] #table.page { height: 100dvh; margin: 0; padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .ag-wrap { --cw: clamp(38px, 10vh, 54px); gap: 4px; }
  .ag-top { padding: 3px 6px 3px 10px; } .ag-info { font-size: 11px; }
  .ag-av { width: 28px; height: 28px; padding: 2px; } .ag-on small { display: none; }
  .ag-fan { width: 46px; height: 20px; } .ag-fan i { width: 12px; margin-left: -6px; }
  .ag-dock { padding: 4px 8px; gap: 3px; } .ag-acts { min-height: 30px; } .ag-btn { min-height: 30px; font-size: 11.5px; }
  .ag-hand { padding-top: 14px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); min-height: calc(var(--cw) * 1.5 + 14px); }
  .ag-tool { width: 30px; height: 30px; }
}

/* four players in teams: your partner and the others marked on the seats; a tap on a seat's button makes it your partner */
.seat-wrap.xa-mate .seat-row { box-shadow: inset 3px 0 0 #7fe25a; }
.seat-wrap.xa-foe .seat-row { box-shadow: inset 3px 0 0 #ff7a8a; }
.xa-team { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font: 900 10px/1.4 'Inter', system-ui, sans-serif; letter-spacing: .4px;
  text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.xa-team.mate { background: rgba(127,226,90,.2); color: #b5f58f; border-color: rgba(127,226,90,.55); }
.xa-team.foe { background: rgba(255,122,138,.12); color: #ffb3bd; border-color: rgba(255,122,138,.3); }
.xa-team.foe:hover { background: rgba(127,226,90,.14); color: #d8ffc4; border-color: rgba(127,226,90,.45); }
.ag-opp.mate .ag-avi { box-shadow: 0 0 0 2px #7fe25a, 0 0 14px -2px #7fe25a; }
.ag-opp.mate .ag-on small { color: #b5f58f; opacity: 1; }

/* (2026-10-11) the dock: your move and its buttons in the middle (your picture at the left edge) */
.ag-dock { flex-direction: column; justify-content: center; align-items: center !important; gap: 7px !important; padding: 8px 72px !important; text-align: center; }
.ag-dock > .turnlbl { flex: none !important; justify-content: center !important; max-width: 100%; }
.ag-dock > .ag-acts { justify-content: center; }
.ag-dock > .ag-who { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.ag-btn.take { min-width: 200px; min-height: 44px; font-size: 14px; letter-spacing: .3px; }
@media (max-width: 760px) { .ag-dock { padding: 7px 10px !important; } .ag-btn.take { min-width: 0; } }
@media (orientation: landscape) and (max-height: 520px) { .ag-dock { flex-direction: row; padding: 4px 10px !important; } .ag-btn.take { min-height: 30px; } }

/* (2026-10-11) beside your picture: your cards and your points (a computer; a phone keeps the line in the dock) */
.ag-dock > .ag-who { display: flex; align-items: center; gap: 12px; }
.ag-meinfo { display: flex; align-items: center; gap: 12px; text-align: left; }
.ag-mefan { position: relative; display: block; width: 44px; height: 32px; }
.ag-mefan i { position: absolute; left: 50%; bottom: 0; width: 20px; aspect-ratio: 2 / 3; margin-left: -10px; border-radius: 3px; transform-origin: 50% 130%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 8px -2px var(--tube); }
.ag-mefan i:nth-child(1) { transform: rotate(-14deg); } .ag-mefan i:nth-child(3) { transform: rotate(14deg); }
.ag-mefan i .agsvg { display: block; width: 100%; height: 100%; }
.ag-mefan em { position: absolute; right: -8px; bottom: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 900; color: #0c0812; background: #fff; box-shadow: 0 0 10px var(--tube); }
.ag-mepts { display: grid; line-height: 1.05; }
.ag-mepts b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ag-mepts b small { font-size: 12px; font-weight: 800; opacity: .55; margin-left: 2px; }
.ag-mepts > small { font-size: 10.5px; font-weight: 700; opacity: .65; white-space: nowrap; }
.ag-dock { padding-left: 190px !important; padding-right: 190px !important; }
@media (min-width: 761px) and (min-height: 521px) { .ag-dock .ag-sub { display: none; } }
@media (max-width: 760px), (orientation: landscape) and (max-height: 520px) { .ag-dock { padding-left: 10px !important; padding-right: 10px !important; } .ag-dock > .ag-who { display: none; } }