/* Euchre: a round emerald table in the dark, four seats, your hand along the bottom. The felt, seats, cards, the bid
   box and the chips are absolutely placed by game.js (layout()); the HUD, tool bar, result card and panels are HTML. */
.eu { display: flex; flex-direction: column; color: #dfe9ff; --eu-line: #1c2b4a; --eu-glass: rgba(8,14,32,0.84); --eu-warm: #ffd166; --eu-cyan: #55d6ff; --eu-us: #55d6ff; --eu-them: #ff8f7a;
  --eu-cw: 90px; --eu-ch: 126px; }
.eu-stage { position: relative; width: 100%; height: min(86vh, 800px); min-height: 500px; overflow: hidden; outline: none;
  background: radial-gradient(120% 90% at 50% 45%, #0b1a2e 0%, #060b1a 55%, #03050d 100%);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (max-width: 600px) { .eu-stage { height: auto; aspect-ratio: 3 / 4.75; max-height: 88vh; min-height: 0; } }
@media (max-height: 560px) and (min-width: 601px) { .eu-stage { min-height: 0; } }
.eu-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 18%, #9fc4ff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #cfe0ff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 92% 62%, #ffe6a8 50%, transparent 51%), radial-gradient(1px 1px at 6% 72%, #bcd4ff 50%, transparent 51%), radial-gradient(1px 1px at 4% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 64% 94%, #9fc4ff 50%, transparent 51%), radial-gradient(1px 1px at 24% 96%, #ffd9e4 50%, transparent 51%); }

/* ---------- HUD ---------- */
.eu-hud { position: absolute; left: 0; right: 0; top: 0; height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 10px; z-index: 8; pointer-events: none; }
.eu-hud > * { pointer-events: auto; }
.eu-pick { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; min-width: 92px; max-width: 42vw; height: 44px; padding: 2px 26px 2px 10px;
  border-radius: 12px; border: 1px solid var(--eu-line); background: var(--eu-glass); color: #fff; cursor: pointer; font: inherit; line-height: 1.1; text-align: left; touch-action: manipulation; transition: border-color .15s; }
.eu-pick-k { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--eu-warm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.eu-pick-n { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.eu-pick-dd { position: absolute; right: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: #8aa3c4; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .eu-pick:hover { border-color: var(--eu-cyan); } }
.eu-pick:focus-visible, .eu-tool:focus-visible { outline: 2px solid var(--eu-cyan); outline-offset: 2px; }
.eu-sc { display: flex; flex-direction: column; line-height: 1.05; flex: none; min-width: 34px; }
.eu-k { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8aa3c4; }
.eu-us .eu-k { color: var(--eu-us); } .eu-them .eu-k { color: var(--eu-them); }
.eu-sc b { font-size: 22px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; display: inline-block; transition: transform .2s cubic-bezier(.3,1.6,.5,1), color .2s; transform-origin: left center; }
.eu-sc b small { font-size: 12px; font-weight: 700; color: #6f86aa; margin-left: 2px; letter-spacing: 0; }
.eu-sc b.pop { transform: scale(1.16); color: var(--eu-warm); }
.eu-sp { flex: 1 1 auto; }
.eu-tool { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--eu-line); background: var(--eu-glass); color: #c8d6f0; cursor: pointer; padding: 0; touch-action: manipulation; transition: border-color .15s, color .15s; }
.eu-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eu-tool .spk, .eu-tool .fill { fill: currentColor; stroke: none; }
@media (hover: hover) { .eu-tool:hover { border-color: var(--eu-cyan); color: #fff; } }
#eu-sound .off { display: none; } #eu-sound[aria-pressed="true"] { color: #5d6f8f; } #eu-sound[aria-pressed="true"] .on { display: none; } #eu-sound[aria-pressed="true"] .off { display: inline; }
.eu-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--eu-warm); box-shadow: 0 0 8px var(--eu-warm); }
.eu-dot[hidden] { display: none; }

/* ---------- the table ---------- */
.eu-felt { position: absolute; z-index: 1; border-radius: 160px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, #1b7a66 0%, #0f5a4c 42%, #083a33 78%, #062b27 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,209,102,0.22), inset 0 0 0 9px rgba(3,20,18,0.55), inset 0 0 0 10px rgba(255,209,102,0.12), inset 0 18px 60px rgba(0,0,0,0.35),
    0 0 0 5px #0a1428, 0 0 0 6px #22365c, 0 22px 50px rgba(0,0,0,0.55), 0 0 70px rgba(62,232,164,0.08); }
.eu-felt svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46%; max-width: 260px; opacity: .1; }
.eu-felt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .35; mix-blend-mode: soft-light;
  background-image: radial-gradient(rgba(255,255,255,.18) .6px, transparent .8px); background-size: 5px 5px; }

/* the seats */
.eu-seats { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.eu-seat { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 5px 11px 5px 5px; border-radius: 999px; background: rgba(5,12,26,0.72); border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35); white-space: nowrap; transition: box-shadow .25s, border-color .25s, opacity .25s, background .25s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.eu-seat.col { flex-direction: column; gap: 3px; padding: 6px 8px 7px; border-radius: 16px; text-align: center; }
.eu-seat.cur { border-color: var(--eu-warm); box-shadow: 0 0 0 1px var(--eu-warm), 0 0 24px rgba(255,209,102,0.38); background: rgba(34,26,6,0.72); }
.eu-seat.out { opacity: .45; }
.eu-av { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #04121c;
  background: linear-gradient(160deg, #8ce6ff, #3aa9d6); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
.eu-seat.them .eu-av { background: linear-gradient(160deg, #ffb3a3, #e8664f); color: #2a0a04; }
.eu-seat.cur .eu-av { animation: eu-glow 1.5s ease-in-out infinite; }
.eu-d { position: absolute; right: -6px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--eu-warm); color: #1a1200; font-size: 10.5px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,0.55); }
.eu-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.eu-seat.col .eu-info { align-items: center; }
.eu-nm { font-weight: 800; font-size: 13.5px; color: #fff; display: flex; align-items: center; gap: 5px; }
.eu-nm em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8aa3c4; }
.eu-sub { font-size: 12px; color: #c4d4ee; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 5px; min-height: 15px; }
.eu-sub b { color: var(--eu-warm); }
.eu-mk { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px; border-radius: 999px; background: #fdf8ec; color: #1b2030; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.eu-mk svg { width: 11px; height: 11px; }
.eu-mk.red { color: #c0233a; }
.eu-mk.alone { background: var(--eu-warm); color: #1a1200; }
.eu-dots { display: inline-flex; gap: 3px; align-items: center; height: 15px; }
.eu-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--eu-warm); animation: eu-dot 1s ease-in-out infinite; }
.eu-dots i:nth-child(2) { animation-delay: .15s; } .eu-dots i:nth-child(3) { animation-delay: .3s; }
.eu-me { padding: 4px 12px 4px 4px; }
.eu-me .eu-av { width: 28px; height: 28px; font-size: 12.5px; }
.eu-me .eu-sub { color: #fff; }

/* the cards */
.eu-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; outline: none; }
.eu-c { position: absolute; left: 0; top: 0; width: var(--eu-cw); height: var(--eu-ch); pointer-events: none; transform-origin: 50% 50%; border-radius: 8.5%/6%;
  transition: transform .34s cubic-bezier(.2,.8,.3,1), opacity .3s; will-change: transform; -webkit-tap-highlight-color: transparent; outline: none; }
.eu-c.inst { transition: none; }
.eu-c.gone { opacity: 0; }
.eu-ci { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .4s cubic-bezier(.3,.7,.3,1); border-radius: inherit; }
.eu-c.down .eu-ci { transform: rotateY(180deg); }
.eu-c.inst .eu-ci { transition: none; }
.eu-fa, .eu-ba { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: inherit; box-shadow: 0 0 0 .5px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.35); transition: filter .2s, box-shadow .2s; }
.eu-ba { transform: rotateY(180deg); }
.eu-svg { display: block; width: 100%; height: 100%; }
.eu-c.mine { pointer-events: auto; cursor: default; }
.eu-c.mine.can { cursor: pointer; }
.eu-c.dim .eu-fa { filter: brightness(.5) saturate(.55); }
.eu-c.sel .eu-fa { box-shadow: 0 0 0 2.5px var(--eu-warm), 0 10px 22px rgba(0,0,0,0.5); }
.eu-c.focus .eu-fa { box-shadow: 0 0 0 3px var(--eu-cyan), 0 10px 22px rgba(0,0,0,0.5); }
.eu-c.hint .eu-fa { animation: eu-pulse 1.1s ease-in-out infinite; }
.eu-c.win .eu-fa { box-shadow: 0 0 0 2.5px var(--eu-warm), 0 0 22px 5px rgba(255,209,102,0.5); }
.eu-c.trumpy .eu-fa { box-shadow: 0 0 0 1.5px rgba(255,209,102,0.85), 0 4px 14px rgba(0,0,0,0.4), 0 0 12px rgba(255,209,102,0.25); }
.eu-c.trumpy.sel .eu-fa, .eu-c.trumpy.focus .eu-fa { box-shadow: 0 0 0 3px var(--eu-cyan), 0 10px 22px rgba(0,0,0,0.5); }
.eu-c.ghost { opacity: .42; }
.eu-tag { position: absolute; left: 3px; top: -9px; padding: 1px 6px; border-radius: 999px; background: var(--eu-warm); color: #1a1200; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.4); pointer-events: none; backface-visibility: hidden; transform-style: flat; }
@media (hover: hover) { .eu-c.mine.can:hover .eu-fa { box-shadow: 0 0 0 2px rgba(85,214,255,0.8), 0 10px 22px rgba(0,0,0,0.5); } }

/* chips on the table: trump, tricks, the six-and-four */
.eu-trump, .eu-tricks, .eu-sf { position: absolute; z-index: 4; pointer-events: none; }
.eu-trump[hidden], .eu-tricks[hidden], .eu-sf[hidden], .eu-review[hidden], .eu-ask[hidden] { display: none; }
.eu-trump { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 14px; background: rgba(5,12,26,0.8); border: 1px solid rgba(255,209,102,0.35); box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 18px rgba(255,209,102,0.1); animation: eu-in .35s cubic-bezier(.2,1.3,.4,1); }
.eu-trump .eu-ts { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: #fdf8ec; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.eu-trump .eu-ts svg { width: 24px; height: 24px; }
.eu-trump b { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--eu-warm); }
.eu-trump span { display: block; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.eu-trump span i { font-style: normal; color: var(--eu-warm); }
.eu-tricks { display: flex; flex-direction: column; gap: 4px; padding: 7px 10px; border-radius: 14px; background: rgba(5,12,26,0.8); border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.eu-tricks div { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8aa3c4; }
.eu-tricks div span { min-width: 44px; white-space: nowrap; }
.eu-tricks div.us span { color: var(--eu-us); } .eu-tricks div.them span { color: var(--eu-them); }
.eu-tricks i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); transition: background .25s, box-shadow .25s, transform .25s; }
.eu-tricks .us i.on { background: var(--eu-us); box-shadow: 0 0 8px rgba(85,214,255,.6); }
.eu-tricks .them i.on { background: var(--eu-them); box-shadow: 0 0 8px rgba(255,143,122,.6); }
.eu-tricks i.pop { transform: scale(1.5); }
.eu-sf { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.eu-sf svg { width: 64px; height: 50px; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.eu-sf span { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8aa3c4; }
.eu-sf.us span { color: var(--eu-us); } .eu-sf.them span { color: var(--eu-them); }

/* the bid box */
.eu-ask { position: absolute; z-index: 7; left: 0; top: 0; padding: 12px 12px 11px; border-radius: 16px; background: rgba(6,13,30,0.97); border: 1px solid rgba(255,209,102,0.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 26px rgba(255,209,102,0.12); text-align: center; animation: eu-in .28s cubic-bezier(.2,1.2,.4,1); pointer-events: auto; }
.eu-ask h3 { margin: 0; font-size: 16px; font-weight: 900; color: #fff; line-height: 1.25; text-transform: none; letter-spacing: 0; }
.eu-ask p { margin: 3px 0 0; font-size: 12.5px; color: #a9bddc; line-height: 1.35; }
.eu-ask p b { color: #fff; }
.eu-row { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.eu-row > * { flex: 1 1 0; min-width: 0; }
.eu-ab { font: inherit; font-weight: 800; font-size: 14px; min-height: 42px; padding: 6px 10px; border-radius: 12px; border: 1px solid #263a63; background: #0c1730; color: #e6eeff; cursor: pointer; touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color .15s, background .15s, transform .08s, filter .15s; white-space: nowrap; }
.eu-ab svg { width: 18px; height: 18px; flex: none; }
.eu-ab kbd { font: 700 10px/1.4 system-ui, sans-serif; padding: 0 4px; border-radius: 4px; border: 1px solid rgba(255,255,255,.18); color: #8aa3c4; }
.eu-ab.go kbd { border-color: rgba(26,18,0,.3); color: #5a4300; }
@media (hover: none) { .eu-ab kbd { display: none; } }
@media (hover: hover) { .eu-ab:hover:not(:disabled) { border-color: var(--eu-cyan); } }
.eu-ab:active:not(:disabled) { transform: translateY(1px); }
.eu-ab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.eu-ab:disabled { opacity: .4; cursor: default; }
.eu-ab.go { background: linear-gradient(180deg, #ffe08f, #ffc94a); color: #1a1200; border-color: transparent; box-shadow: 0 6px 18px rgba(255,201,74,0.3); }
@media (hover: hover) { .eu-ab.go:hover:not(:disabled) { filter: brightness(1.06); border-color: transparent; } }
.eu-ab.suit { background: #fdf8ec; color: #1b2030; border-color: transparent; font-size: 13.5px; }
.eu-ab.suit.red { color: #c0233a; }
.eu-ab.suit svg { width: 20px; height: 20px; }
@media (hover: hover) { .eu-ab.suit:hover { box-shadow: 0 0 0 2px var(--eu-warm); } }
.eu-alone { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 13px; font-weight: 700; color: #cfe0ff; cursor: pointer; padding: 4px 6px; border-radius: 10px; border: 0; background: none; font-family: inherit; touch-action: manipulation; }
.eu-alone i { position: relative; width: 38px; height: 22px; border-radius: 12px; background: #0c1730; border: 1px solid #263a63; transition: background .15s, border-color .15s; }
.eu-alone i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #5d6f8f; transition: transform .15s, background .15s; }
.eu-alone[aria-pressed="true"] i { background: #3a2c06; border-color: var(--eu-warm); }
.eu-alone[aria-pressed="true"] i::after { transform: translateX(16px); background: var(--eu-warm); box-shadow: 0 0 8px rgba(255,209,102,.7); }
.eu-alone:focus-visible { outline: 2px solid var(--eu-cyan); outline-offset: 2px; }
.eu-alone small { color: #6f86aa; font-weight: 600; }

/* speech bubbles */
.eu-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.eu-bub { position: absolute; left: 0; top: 0; padding: 5px 11px; border-radius: 12px; background: #f4f7fb; color: #0b1328; font-weight: 800; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); white-space: nowrap; animation: eu-pop .26s cubic-bezier(.2,1.4,.4,1); transition: opacity .35s, translate .35s; }
.eu-bub.go { opacity: 0; translate: 0 -8px; }
.eu-bub.gold { background: var(--eu-warm); color: #1a1200; }
.eu-bub.hot { background: linear-gradient(90deg, #ffd166, #ff9f6b); color: #1a0800; }
.eu-bub svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }

/* the last trick, shown again */
.eu-review { position: absolute; z-index: 7; left: 0; top: 0; pointer-events: auto; border-radius: 18px; background: rgba(4,10,24,0.96); border: 1px solid rgba(85,214,255,0.35); box-shadow: 0 16px 40px rgba(0,0,0,0.55); animation: eu-in .22s ease-out; cursor: pointer; }
.eu-review .eu-rc { position: absolute; border-radius: 7%/5%; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.eu-review .eu-rc svg { display: block; width: 100%; height: 100%; }
.eu-review .eu-rc.w { box-shadow: 0 0 0 2.5px var(--eu-warm), 0 0 16px rgba(255,209,102,.5); }
.eu-review .eu-rc.lead::after { content: 'led'; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 0 5px; border-radius: 999px; background: var(--eu-cyan); color: #04121c; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.eu-review p { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: #cfe0ff; }
.eu-review p b { color: var(--eu-warm); }
.eu-review h4 { position: absolute; left: 0; right: 0; top: 8px; margin: 0; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8aa3c4; }

/* ---------- the tool bar ---------- */
.eu-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; height: 50px; z-index: 6; display: flex; gap: 6px; width: min(calc(100% - 16px), 520px); }
.eu-btn { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px; border: 1px solid var(--eu-line);
  background: rgba(8,14,32,0.88); color: #d4def5; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; cursor: pointer; touch-action: manipulation; padding: 0 2px;
  transition: border-color .15s, color .15s, opacity .15s, background .15s, transform .08s; }
.eu-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eu-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (hover: hover) { .eu-btn:hover:not(:disabled) { border-color: var(--eu-cyan); color: #fff; } }
.eu-btn:active:not(:disabled) { transform: translateY(1px); }
.eu-btn:focus-visible { outline: 2px solid var(--eu-cyan); outline-offset: 2px; }
.eu-btn:disabled { opacity: .35; cursor: default; }
.eu-btn[aria-pressed="true"] { border-color: var(--eu-cyan); color: #fff; background: rgba(20,48,80,0.9); }
.eu-hint { color: #ffe3a3; }
.eu-hint em { position: absolute; top: 4px; right: 8px; font-style: normal; font-size: 10px; font-weight: 900; color: #1a1200; background: var(--eu-warm); border-radius: 999px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; }
.eu-hint em:empty { display: none; }
.eu-short .eu-bar { height: 42px; }
.eu-short .eu-ask { padding: 9px 12px 8px; }
.eu-short .eu-ask .eu-row { margin-top: 7px; }
.eu-short .eu-alone { margin-top: 5px; }
.eu-side .eu-bar { left: auto; right: 8px; top: 60px; bottom: 8px; transform: none; height: auto; width: 58px; flex-direction: column; }
.eu-side .eu-btn span { display: none; }
.eu-side .eu-card { left: calc(50% - 33px); }
.eu-short .eu-btn span { display: none; }

/* ---------- result card (a hand, a game) ---------- */
.eu-card[hidden] { display: none; }
.eu-card { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 10; width: min(calc(100% - 16px), 470px); padding: 14px 14px 12px; border-radius: 18px;
  background: #070d1f; border: 1px solid rgba(255,209,102,0.35); box-shadow: 0 18px 50px rgba(0,0,0,.65), 0 0 40px rgba(255,209,102,.1); animation: eu-up .35s cubic-bezier(.2,.9,.25,1.1);
  max-height: calc(100% - 64px); overflow: auto; overscroll-behavior: contain; }
.eu-card.big { border-color: rgba(85,214,255,0.4); }
.eu-card-top { display: flex; align-items: center; gap: 12px; }
.eu-card-top > div:first-child { flex: 1 1 auto; min-width: 0; }
.eu-card h2 { margin: 0; font-size: 21px; font-weight: 900; color: #fff; letter-spacing: .01em; text-transform: none; line-height: 1.15; }
.eu-card h2.good { text-shadow: 0 0 22px rgba(255,209,102,.55); }
.eu-card p { margin: 3px 0 0; font-size: 13px; color: #a9bddc; line-height: 1.45; }
.eu-card p b { color: #fff; }
.eu-pts { flex: none; min-width: 58px; text-align: center; padding: 6px 8px; border-radius: 13px; background: #0a1430; border: 1px solid #1c2b4a; }
.eu-pts b { display: block; font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.05; }
.eu-pts span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8aa3c4; }
.eu-pts.us b { color: var(--eu-us); } .eu-pts.them b { color: var(--eu-them); }
.eu-score-line { display: flex; justify-content: center; align-items: baseline; gap: 14px; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.eu-score-line div { text-align: center; }
.eu-score-line b { display: block; font-size: 34px; font-weight: 900; line-height: 1; }
.eu-score-line span { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8aa3c4; }
.eu-score-line .us b { color: var(--eu-us); } .eu-score-line .them b { color: var(--eu-them); }
.eu-score-line i { font-style: normal; color: #4d5f80; font-size: 22px; font-weight: 800; }
/* in a tight fan only the left edge of a card shows: the label says just Right or Left there */
@media (max-width: 560px) { .eu-tag-x { display: none; } }
.eu-tag2 { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; margin-left: 6px;
  color: #1a1200; background: linear-gradient(90deg, #ffd166, #fff1b8, #ffd166); background-size: 200% 100%; animation: eu-shine 1.6s linear infinite; box-shadow: 0 0 18px rgba(255,209,102,0.5); }

/* ---------- panels ---------- */
.eu-overlay[hidden] { display: none; }
.eu-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 12; overflow: auto;
  background: radial-gradient(ellipse at center, rgba(3,6,16,0.55), rgba(2,4,12,0.88)); animation: eu-fade .18s ease-out; }
.eu-panel { position: relative; width: min(100%, 440px); margin: auto; padding: 20px 18px 18px; border: 1px solid var(--eu-line); border-radius: 18px; text-align: left; outline: none;
  background: rgba(7,13,30,0.97); box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(85,214,255,0.05) inset; animation: eu-in .26s cubic-bezier(.2,.9,.25,1.1); }
.eu-panel.wide { width: min(100%, 600px); }
.eu-panel h2 { margin: 0 38px 12px 0; font-size: 20px; font-weight: 900; color: #fff; letter-spacing: .01em; text-transform: none; line-height: 1.25; }
.eu-panel h3 { margin: 16px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8aa3c4; }
.eu-panel p, .eu-panel li { font-size: 13.5px; line-height: 1.55; color: #bccbe6; }
.eu-panel p { margin: 0 0 9px; }
.eu-panel ul, .eu-panel ol { margin: 0 0 9px; padding-left: 19px; }
.eu-panel li { margin-bottom: 4px; }
.eu-panel b { color: #fff; }
.eu-panel kbd { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 5px; border: 1px solid #2c3f68; background: #0b1328; color: #fff; font: 700 12px/1.6 system-ui, sans-serif; text-align: center; }
.eu-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.07); color: #d4def5; cursor: pointer; padding: 0; z-index: 2; }
.eu-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (hover: hover) { .eu-x:hover { background: rgba(255,255,255,.14); color: #fff; } }
.eu-x:focus-visible { outline: 2px solid var(--eu-cyan); outline-offset: 2px; }
.eu-fine { font-size: 12px !important; color: #6f86aa !important; margin: 8px 0 0 !important; }
.eu-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.eu-actions .eu-row { margin-top: 0; }
/* a long sheet on a phone keeps its main button in reach at the bottom of the table */
.eu-actions.eu-stick { position: sticky; bottom: -12px; z-index: 1; margin: 14px -18px -18px; padding: 12px 18px 18px; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, rgba(7,13,30,0), rgba(7,13,30,0.97) 14px); }
.eu-b { font: inherit; font-weight: 700; font-size: 14.5px; padding: 10px 14px; min-height: 46px; border-radius: 12px; cursor: pointer; touch-action: manipulation; text-decoration: none;
  border: 1px solid var(--eu-line); background: #0c1730; color: #e6eeff; transition: background .15s, border-color .15s, transform .1s, filter .15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (hover: hover) { .eu-b:hover:not(:disabled) { border-color: var(--eu-cyan); } }
.eu-b:active { transform: translateY(1px); }
.eu-b:disabled { opacity: .45; cursor: default; }
.eu-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.eu-b svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.eu-b span { white-space: nowrap; }
.eu-b-primary { background: linear-gradient(180deg, #ffe08f, #ffc94a); color: #1a1200; border-color: transparent; font-size: 16px; font-weight: 800; box-shadow: 0 6px 22px rgba(255,201,74,0.3); }
@media (hover: hover) { .eu-b-primary:hover:not(:disabled) { border-color: transparent; filter: brightness(1.06); } }
.eu-b-sm { min-height: 40px; padding: 6px 10px; font-size: 13px; }
.eu-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 13px; background: #050b1c; border: 1px solid var(--eu-line); margin: 0 0 12px; }
.eu-tab { font: inherit; font-size: 13.5px; font-weight: 700; color: #8aa3c4; background: transparent; border: 0; border-radius: 9px; min-height: 38px; cursor: pointer; }
.eu-tab[aria-selected="true"] { background: #13234a; color: #fff; box-shadow: inset 0 0 0 1px rgba(85,214,255,0.45), 0 0 16px rgba(85,214,255,0.14); }
.eu-tab:focus-visible { outline: 2px solid var(--eu-cyan); outline-offset: 1px; }
.eu-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #142140; cursor: pointer; }
.eu-set > span { display: flex; flex-direction: column; gap: 2px; } .eu-set > span b { font-size: 14px; color: #fff; } .eu-set > span small { font-size: 12px; color: #8aa3c4; line-height: 1.35; }
.eu-set input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eu-sw { position: relative; width: 46px; height: 27px; flex: none; border-radius: 14px; border: 1px solid #263a63; background: #0c1730; transition: background .15s, border-color .15s; }
.eu-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #5d6f8f; transition: transform .15s, background .15s; }
.eu-set input:checked + .eu-sw { background: #3a2c06; border-color: var(--eu-warm); }
.eu-set input:checked + .eu-sw::after { transform: translateX(19px); background: var(--eu-warm); box-shadow: 0 0 10px rgba(255,209,102,.7); }
.eu-set input:focus-visible + .eu-sw { outline: 2px solid var(--eu-cyan); outline-offset: 2px; }
.eu-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #050b1c; border: 1px solid var(--eu-line); }
.eu-seg button { flex: 1 1 0; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: #8aa3c4; font: 700 13.5px system-ui, sans-serif; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.eu-seg button small { font-size: 10.5px; font-weight: 600; color: #5d6f8f; }
.eu-seg button[aria-pressed="true"] { background: #13234a; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,209,102,.55); }
.eu-seg button[aria-pressed="true"] small { color: #c9a95a; }
.eu-seg button:focus-visible { outline: 2px solid var(--eu-cyan); outline-offset: 1px; }
.eu-field { margin: 12px 0 4px; }
.eu-field > b { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8aa3c4; margin-bottom: 6px; }
.eu-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eu-mode { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 86px; padding: 12px; border-radius: 15px; border: 1px solid var(--eu-line);
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--mc) 20%, transparent), transparent 60%), #071026; color: #e6eeff; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: border-color .15s; }
.eu-mode[aria-pressed="true"] { border-color: var(--mc); box-shadow: inset 0 0 0 1px var(--mc), 0 0 18px color-mix(in srgb, var(--mc) 25%, transparent); }
.eu-mode svg { width: 26px; height: 26px; fill: none; stroke: var(--mc); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.eu-mode b { font-size: 15px; color: #fff; } .eu-mode small { font-size: 12px; color: #8aa3c4; line-height: 1.35; }
.eu-mode em { position: absolute; top: 10px; right: 12px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--mc); }
.eu-mode:focus-visible { outline: 2px solid var(--mc); outline-offset: 2px; }
@media (hover: hover) { .eu-mode:hover { border-color: var(--mc); } }
.eu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 4px; }
.eu-stats.three { grid-template-columns: repeat(3, 1fr); }
.eu-stats div { padding: 8px 4px; border-radius: 10px; background: #050b1c; border: 1px solid #142140; text-align: center; min-width: 0; }
.eu-stats span { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #6f86aa; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu-stats b { display: block; margin-top: 2px; font-size: 17px; color: #e6eeff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eu-stats .gold b { color: var(--eu-warm); } .eu-stats .us b { color: var(--eu-us); } .eu-stats .them b { color: var(--eu-them); }
.eu-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.eu-table th, .eu-table td { padding: 6px 4px; text-align: center; border-bottom: 1px solid #142140; font-variant-numeric: tabular-nums; }
.eu-table thead th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6f86aa; font-weight: 800; }
.eu-table td { color: #d4def5; }
.eu-table td.l, .eu-table th.l { text-align: left; }
.eu-table td svg { width: 14px; height: 14px; vertical-align: -2px; }
.eu-table .red { color: #ff6b81; } .eu-table .blk { color: #e6eeff; }
.eu-table .p-us { color: var(--eu-us); font-weight: 800; } .eu-table .p-them { color: var(--eu-them); font-weight: 800; }
.eu-table td small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 700; color: #6f86aa; letter-spacing: .02em; line-height: 1.2; }
.eu-table tfoot td { font-weight: 900; color: #fff; border-bottom: 0; font-size: 14px; }
.eu-scroll { max-height: min(52vh, 420px); overflow: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.eu-howto { display: grid; grid-template-columns: 58px 1fr; gap: 10px 12px; align-items: center; margin: 4px 0 10px; }
.eu-howto svg { width: 58px; height: 58px; }
.eu-howto p { margin: 0; }
/* calendar */
.eu-cal-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
.eu-cal-head b { flex: 1 1 auto; text-align: center; color: #fff; font-size: 15px; }
.eu-step { width: 42px; height: 42px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid #263a63; background: #0c1730; color: #e6eeff; cursor: pointer; }
.eu-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.eu-step:disabled { opacity: .35; cursor: default; }
.eu-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.eu-cal-w { text-align: center; font-size: 10.5px; font-weight: 800; color: #6f86aa; padding: 2px 0; }
.eu-cal-d { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; border: 1px solid #142140; background: #050b1c; color: #d4def5; font: 700 13px system-ui, sans-serif; cursor: pointer; padding: 0; }
.eu-cal-d.off { opacity: .28; cursor: default; }
.eu-cal-d.ok { background: rgba(85,214,255,0.1); border-color: rgba(85,214,255,0.5); color: #9fe6ff; }
.eu-cal-d.won { background: rgba(255,209,102,0.12); border-color: rgba(255,209,102,0.55); color: var(--eu-warm); }
.eu-cal-d.today { box-shadow: 0 0 0 2px var(--eu-warm), 0 0 14px rgba(255,209,102,.4); }
.eu-cal-pad { aspect-ratio: 1; }
@media (hover: hover) { .eu-cal-d:not(.off):hover { border-color: var(--eu-cyan); } }
.eu-cal-d:focus-visible { outline: 2px solid var(--eu-cyan); outline-offset: 1px; }
.eu-card .eu-lb h3 { text-align: center; margin: 14px 0 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8aa3c4; line-height: 1.3; }
.eu-card .eu-lb .eu-fine { text-align: center; }
.eu-lb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.eu-lb li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; background: #050b1c; font-size: 13px; }
.eu-lb li span { color: #6f86aa; font-weight: 800; font-variant-numeric: tabular-nums; }
.eu-lb li b { color: #e6eeff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.eu-lb li em { font-style: normal; color: var(--eu-warm); font-weight: 800; font-variant-numeric: tabular-nums; }
.eu-lb li.me { background: rgba(85,214,255,0.12); box-shadow: inset 0 0 0 1px rgba(85,214,255,0.4); }

.eu-toast[hidden] { display: none; }
.eu-toast { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); width: max-content; z-index: 13; padding: 8px 14px; border-radius: 999px; background: #e6eeff; color: #07102a; font-size: 13px; font-weight: 800; animation: eu-drop .2s ease-out; pointer-events: none; max-width: calc(100% - 24px); text-align: center; line-height: 1.35; }
/* the hint line, over the bottom of the table */
.eu-coach[hidden] { display: none; }
.eu-coach { position: absolute; z-index: 9; left: 50%; transform: translateX(-50%); width: min(calc(100% - 24px), 460px); padding: 8px 34px 8px 12px; border-radius: 12px; background: rgba(6,13,30,0.95);
  border: 1px solid rgba(255,209,102,0.6); box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 18px rgba(255,209,102,.14); font-size: 13.5px; line-height: 1.4; color: #e6eeff; animation: eu-rise .22s ease-out; }
.eu-coach b { color: var(--eu-warm); font-weight: 800; margin-right: 6px; }
.eu-coach-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #8aa3c4; font-size: 19px; line-height: 1; cursor: pointer; }
@media (hover: hover) { .eu-coach-x:hover { color: #fff; background: rgba(255,255,255,.08); } }
.eu-hintline { margin: 8px 0 0 !important; padding: 6px 8px; border-radius: 9px; background: rgba(255,209,102,0.1); border: 1px solid rgba(255,209,102,0.35); color: #ffe7ad !important; font-size: 12.5px !important; text-align: left; }
.eu-hintline b { color: var(--eu-warm) !important; }
@keyframes eu-rise { from { opacity: 0; transform: translate(-50%, 6px); } }
.eu-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eu-help { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
.eu-help .hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .eu-help .hint-kb { display: none; } .eu-help .hint-touch { display: inline; } }
.stage .eu-help { padding: 10px 14px 12px; }

@keyframes eu-glow { 50% { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 0 0 4px rgba(255,209,102,0.5); } }
@keyframes eu-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes eu-pop { from { opacity: 0; transform: scale(.7); } }
@keyframes eu-in { from { opacity: 0; transform: scale(.94) translateY(6px); } }
@keyframes eu-fade { from { opacity: 0; } }
@keyframes eu-up { from { opacity: 0; transform: translate(-50%, 24px); } }
@keyframes eu-drop { from { opacity: 0; transform: translate(-50%, -6px); } }
@keyframes eu-shine { to { background-position: -200% 0; } }
@keyframes eu-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,209,102,.9), 0 6px 16px rgba(0,0,0,.4); } 50% { box-shadow: 0 0 0 4px rgba(255,209,102,.95), 0 0 26px 6px rgba(255,209,102,.55); } }

/* narrow phones */
@media (max-width: 460px) {
  .eu-hud { gap: 8px; padding-left: 8px; padding-right: 6px; }
  .eu-pick { padding-right: 22px; padding-left: 8px; min-width: 0; }
  .eu-pick-n { font-size: 14px; }
  .eu-sc b { font-size: 20px; }
  .eu-sc b small { display: none; }
  .eu-tool { width: 36px; height: 36px; border-radius: 11px; }
  .eu-btn { font-size: 10.5px; border-radius: 12px; }
  .eu-panel { padding: 18px 14px 14px; }
  .eu-actions.eu-stick { margin: 14px -14px -14px; padding: 12px 14px 14px; }
  .eu-stats b { font-size: 15px; }
  .eu-stats div { padding: 8px 2px; }
  .eu-stats span { font-size: 9px; letter-spacing: .05em; }
  .eu-nm { font-size: 12.5px; }
  .eu-sub { font-size: 11.5px; }
  .eu-ask h3 { font-size: 15px; }
  .eu-ab { font-size: 13px; padding: 6px 8px; }
  .eu-table .eu-dl { display: none; }
  .eu-table th, .eu-table td { padding: 6px 3px; }
}
/* phones: smaller seat badges, suit buttons stacked */
.eu-narrow .eu-mk:not(.txt) span { display: none; }
.eu-narrow .eu-trump span i { display: block; font-size: 10.5px; line-height: 1.15; }
.eu-alone span { white-space: nowrap; }
.eu-narrow .eu-alone small { display: none; }
.eu-narrow .eu-ab { white-space: normal; line-height: 1.15; }
.eu-narrow .eu-mk { padding: 1px 4px; }
.eu-ask.tight { padding-left: 8px; padding-right: 8px; }
.eu-ask.tight .eu-row { gap: 5px; }
.eu-narrow .eu-ab.suit, .eu-ask.tight .eu-ab.suit { flex-direction: column; gap: 1px; font-size: 10.5px; letter-spacing: -.01em; min-height: 52px; padding: 4px 2px; }
.eu-narrow .eu-trump { padding: 5px 9px 5px 5px; gap: 6px; }
.eu-narrow .eu-trump .eu-ts { width: 30px; height: 30px; border-radius: 9px; }
.eu-narrow .eu-trump .eu-ts svg { width: 20px; height: 20px; }
.eu-narrow .eu-trump span { font-size: 11.5px; }
.eu-narrow .eu-tricks { padding: 6px 8px; }
.eu-narrow .eu-tricks i { width: 6px; height: 6px; }
.eu-narrow .eu-tricks div { gap: 4px; font-size: 9.5px; }
.eu-narrow .eu-tricks div span { min-width: 30px; letter-spacing: .08em; }
.eu-narrow .eu-tricks { gap: 3px; padding: 6px 8px 6px 7px; }
.eu-narrow .eu-tricks div { gap: 3px; }
.eu-narrow .eu-tricks div.mk span { text-decoration: underline 2px #ffd166; text-underline-offset: 3px; }
@media (max-width: 370px) { #eu-sound { display: none; } .eu-sc b small { display: none; } }

/* full screen: the table takes every pixel */
.stage.is-immersive .stage-body > .eu { min-height: 0; flex: 1 1 auto; }
.stage.is-immersive .eu-stage { flex: 1 1 auto; height: auto; aspect-ratio: auto; max-height: none; min-height: 0; }
.stage.is-immersive .eu-help { display: none; }

@media (prefers-reduced-motion: reduce) {
  .eu-c, .eu-ci { transition-duration: .01s !important; }
  .eu-panel, .eu-toast, .eu-overlay, .eu-card, .eu-ask, .eu-trump, .eu-review, .eu-bub, .eu-coach { animation: none; }
  .eu-seat.cur .eu-av, .eu-c.hint .eu-fa, .eu-tag2, .eu-dots i { animation: none; }
}
.eu-calm .eu-c, .eu-calm .eu-ci { transition-duration: .12s !important; }
.eu-calm .eu-panel, .eu-calm .eu-toast, .eu-calm .eu-overlay, .eu-calm .eu-card, .eu-calm .eu-ask, .eu-calm .eu-trump, .eu-calm .eu-review, .eu-calm .eu-bub { animation: none; }
.eu-calm .eu-seat.cur .eu-av, .eu-calm .eu-c.hint .eu-fa, .eu-calm .eu-tag2 { animation: none; }