/* El Dominó · El Playground. Light, playful intro/lobby; the game is a Little Havana patio at dusk.
   Default: first-person CSS 3D table (.v3d). «Vista cenital» (.flat): readable top-down view. */
:root {
  --bg: #fafaf7; --ink: #18181b; --muted: #6b6b72; --paper: #fff; --line: #e7e5df;
  --coral: #ff5a3c; --yellow: #ffd23f; --sky: #4cc9f0; --mint: #3ccf8e; --violet: #8b6cf6;
  --wood-1: #c98a4b; --wood-2: #9a5f2c; --wood-3: #6b3e1a;
  --felt-1: #35b07a; --felt-2: #23885c; --felt-3: #186445;
  --cream: #fbf5e4; --cream-2: #efe5cb; --pip: #18181b;
  --t0: #ff5a3c; --t0-soft: #ffe0d8; --t0-dk: #d23e22; /* Mamey */
  --t1: #1f9fd8; --t1-soft: #d6f1fb; --t1-dk: #137bb0; /* Malecón */
  --gold: #ffd23f; --go: #22b573; --warn: #e5383b;
  --f-display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 18px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.45 var(--f-body);
  background: radial-gradient(circle at 8% -4%, #fff1c2 0, transparent 34%), radial-gradient(circle at 100% 6%, #d9f4fc 0, transparent 30%), var(--bg);
  background-attachment: fixed; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--t1); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.05; margin: 0 0 .5em; letter-spacing: -.02em; }
h2 { font-size: 1.35rem; }
.muted { color: var(--muted); font-size: .92rem; }
.ok { color: var(--go); font-weight: 600; font-size: .92rem; }
.warn { color: var(--warn); font-weight: 600; }
.c0 { color: var(--t0); } .c1 { color: var(--t1); }
.center { text-align: center; justify-content: center; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.back { display: inline-block; color: var(--ink); font-weight: 700; text-decoration: none; padding: 8px 0; }
.back:hover { text-decoration: underline; }
.charlink { font-size: .85rem; color: var(--t1); font-weight: 600; }

/* ---------- buttons & controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 10px 18px;
  border: 0; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: 0 3px 0 #000; transition: transform .08s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.btn.ghost { background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 var(--line), inset 0 0 0 2px var(--line); }
.btn.big { width: 100%; min-height: 56px; font-size: 1.15rem; margin-top: 8px; background: var(--coral); box-shadow: 0 4px 0 var(--t0-dk); }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: .88rem; }
.btn.round { width: 46px; padding: 0; border-radius: 50%; font-size: 1.3rem; }
.btn small { font-weight: 600; opacity: .85; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1 1 auto; min-height: 42px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font-weight: 700; }
.seg button.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.seg button.t0.on { background: var(--t0); border-color: var(--t0); }
.seg button.t1.on { background: var(--t1); border-color: var(--t1); }
input { font: inherit; width: 100%; min-height: 46px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
input:focus { border-color: var(--sky); outline: none; }
#code { text-transform: uppercase; letter-spacing: .3em; font-weight: 800; flex: 1 1 120px; width: auto; }
label { display: block; font-weight: 700; font-size: .9rem; flex: 1; }

/* ---------- intro / lobby */
.intro { max-width: 620px; margin: 0 auto; padding: 8px 16px 48px; }
.card { background: var(--paper); border-radius: var(--r); padding: 18px; margin: 14px 0; border: 1px solid var(--line); box-shadow: 0 10px 30px -16px rgba(24, 24, 27, .3); }
.hero { text-align: center; padding: 10px 0 4px; }
.hero h1 { font-size: clamp(42px, 13vw, 76px); color: var(--ink); margin: 8px 0 6px; }
.hero h1 span { color: var(--t0); }
.hero p { max-width: 460px; margin: 0 auto; color: var(--muted); }
.hero-tiles { display: flex; justify-content: center; gap: 8px; }
.hero-tiles .mini { width: 34px; height: 68px; transform: rotate(-12deg); }
.hero-tiles .mini:nth-child(2) { transform: translateY(-6px); }
.hero-tiles .mini:nth-child(3) { transform: rotate(12deg); }
.who { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.field { margin: 12px 0; }
.field > span { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.resume { display: grid; gap: 10px; }
.code { font: 800 64px/1 var(--f-display); letter-spacing: .14em; color: var(--ink); margin: 4px 0 10px; }
.kicker { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; color: var(--muted); }
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 10px 0; }
.mod { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; text-align: left; padding: 10px; border-radius: 12px; border: 2px dashed var(--line); background: #fff; opacity: .55; }
.mod span { grid-row: span 2; font-size: 1.3rem; }
.mod small { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.mod.on { opacity: 1; border-style: solid; border-color: var(--yellow); background: #fffae0; }
.rules summary, details summary { cursor: pointer; font: 800 1.1rem var(--f-display); list-style: none; }
details summary::after { content: ' ▾'; color: var(--muted); }
details[open] summary::after { content: ' ▴'; }
.rules ul { padding-left: 18px; margin: 10px 0; }
.rules li { margin: 6px 0; font-size: .93rem; }
.rules h3 { margin-top: 14px; }

.av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--cream-2); flex: none; display: grid; place-items: center; border: 0; padding: 0; }
.av svg { width: 100%; height: 100%; display: block; }
.av.big { width: 64px; height: 64px; }

.mini-table { position: relative; height: 290px; margin: 6px auto 10px; max-width: 360px; }
.mt-felt { position: absolute; inset: 70px 74px; border-radius: 22px; background: radial-gradient(circle, var(--felt-1), var(--felt-3)); border: 8px solid var(--wood-2); display: grid; place-items: center; color: #fff; font-size: 2rem; opacity: .9; }
.ls { position: absolute; display: grid; justify-items: center; gap: 2px; width: 120px; text-align: center; background: none; border: 0; padding: 0; z-index: 1; }
.ls .av { border: 4px solid var(--t0); }
.ls.t1 .av { border-color: var(--t1); }
.ls.free .av { border-style: dashed; background: #fff; }
.ls.free:not(:disabled):hover .av { background: #fff3d6; }
.ls b { font-size: .9rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls small { font-size: .72rem; color: var(--muted); }
.ls.off { opacity: .6; }
.ls.bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.ls.top { top: 0; left: 50%; transform: translateX(-50%); }
.ls.left { left: -12px; top: 50%; transform: translateY(-50%); }
.ls.right { right: -12px; top: 50%; transform: translateY(-50%); }


/* ================================================================ the game: a patio in Little Havana at dusk */
:root {
  --felt-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: repeating-linear-gradient(91deg, rgba(255, 214, 170, .07) 0 2px, transparent 2px 9px, rgba(40, 14, 0, .14) 9px 10px, transparent 10px 15px, rgba(255, 214, 170, .04) 15px 19px, transparent 19px 26px);
}
body.ingame { background: #2a1a20; }
.game {
  display: grid; grid-template-rows: auto minmax(340px, 1fr) auto; min-height: 100vh; min-height: 100dvh; margin: 0 auto; color: #fff3dc; overflow-x: clip;
}

/* ---------- top bar: blends into the evening sky */
.topbar { position: relative; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap; background: #24345a; color: #fff3dc; }
.topbar .back { color: #fff3dc; font: 800 1.15rem/1 var(--f-display); padding: 6px 2px; }
.topbar .back span { display: none; }
.codechip { font: 800 .8rem var(--f-display); letter-spacing: .16em; color: #fff3dc; padding: 6px 9px; border-radius: 8px; border: 1.5px dashed rgba(255, 243, 220, .45); }
.tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.viewseg { display: flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); }
.viewseg button { border: 0; background: none; color: #fff3dc; font: 700 .78rem var(--f-body); padding: 6px 9px; min-height: 36px; border-radius: 999px; transition: background .2s, color .2s; white-space: nowrap; }
.viewseg button[aria-pressed="true"] { background: #fff3dc; color: #3a2414; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.chipbtn { min-width: 40px; min-height: 40px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, .28); color: #fff3dc; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; font: 700 .8rem var(--f-body); }
.chipbtn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px rgba(255, 243, 220, .6); }
.chipbtn .lbl { display: none; }
.viewseg .ic { font-style: normal; }
@media (max-width: 420px) { .viewseg .ic { display: none; } .topbar { gap: 6px; } }
.dots { display: inline-grid; grid-template-columns: repeat(3, 6px); gap: 2px; }
.dots { padding: 4px 5px; border-radius: 5px; background: #fff3dc; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #d93a2b; }
.dots i:nth-child(2) { background: #1e9a55; } .dots i:nth-child(3) { background: #1f8fd0; }
.chipbtn:not([aria-pressed="true"]) .dots { opacity: .75; }
.strip { display: flex; gap: 6px; width: 100%; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 248, 234, .94); color: var(--ink); border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 700; }
.chip.gold { background: #fff1b8; box-shadow: 0 0 0 2px var(--gold); }
.chip .mini { width: 11px; height: 22px; transform: rotate(-90deg); margin: 0 6px; }

/* ---------- the scene */
.table { position: relative; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #24345a 0%, #4c4a86 16%, #a75a8c 32%, #ec7a74 46%, #ffae78 58%, #ffd59c 70%); }
.sun { position: absolute; left: 66%; top: 24%; width: min(38vw, 230px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, #fff6d0 0 30%, #ffd27a 45%, rgba(255, 170, 110, .5) 58%, transparent 71%); }
.wall { position: absolute; left: 0; top: 13%; width: 100%; height: 36%; display: block; }
.floor { position: absolute; left: 0; right: 0; top: 48%; bottom: 0; background: linear-gradient(rgba(60, 20, 30, .35), rgba(30, 10, 10, .55)), repeating-conic-gradient(#c97a52 0 25%, #b4643f 0 50%) 0 0 / 40px 40px; }
.palm { position: absolute; bottom: 50%; height: 56%; aspect-ratio: 1 / 2; }
.palm.l { left: -9%; }
.palm.r { right: -9%; transform: scaleX(-1); }
.palm svg { width: 100%; height: 100%; display: block; transform-origin: 52% 100%; animation: sway 7s ease-in-out infinite alternate; animation-delay: var(--now, 0s); }
.palm.r svg { animation-duration: 8.5s; }
@keyframes sway { from { rotate: -2.2deg; } to { rotate: 2.4deg; } }
.strand { position: absolute; left: -3%; right: -3%; top: 0; height: 13%; }
.strand.s2 { top: 3%; height: 20%; left: 6%; right: -10%; }
.strand svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.strand path { fill: none; stroke: #20131a; stroke-width: 1.6; }
.strand i {
  position: absolute; width: 9px; height: 12px; margin: 1px 0 0 -4.5px; border-radius: 50% 50% 46% 46%; transform-origin: 50% -2px;
  background: radial-gradient(circle at 40% 35%, #fff, var(--c) 55%); box-shadow: 0 0 8px 2px var(--c), 0 0 22px 6px rgba(255, 196, 90, .35);
  animation: twinkle 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--now, 0s) - var(--k) * .43s);
}
.strand i::before { content: ''; position: absolute; left: 2px; top: -3px; width: 5px; height: 4px; border-radius: 1px; background: #20131a; }
.strand.s2 i { animation-duration: 3.1s; }
@keyframes twinkle { 0% { opacity: .72; rotate: -6deg; } 45% { opacity: 1; } 100% { opacity: .86; rotate: 6deg; } }

/* ---------- the table: chunky wood frame, worn felt */
.plane { position: absolute; z-index: 2; }
.felt { position: absolute; }
.board { position: absolute; inset: 0; }
.mk { position: absolute; width: 0; height: 0; }
.mk.tl { left: 0; top: 0; } .mk.tr { right: 0; top: 0; } .mk.bl { left: 0; bottom: 0; } .mk.br { right: 0; bottom: 0; }
.plane, .flat .plane {
  border-radius: 30px;
  background: var(--felt-noise), var(--grain), linear-gradient(172deg, #b56f36, #8c4a1f 48%, #6b3514);
  box-shadow: inset 0 3px 0 rgba(255, 222, 176, .5), inset 0 -5px 0 rgba(0, 0, 0, .32), inset 0 0 0 2px #4a230b, inset 0 0 26px rgba(40, 14, 0, .45);
}
.plane::before { /* felt with the light pool */
  content: ''; position: absolute; inset: 18px 18px 30px; border-radius: 18px;
  background: radial-gradient(ellipse 58% 52% at 50% 44%, rgba(255, 228, 150, .34), transparent 72%), radial-gradient(ellipse 30% 22% at 28% 70%, rgba(255, 255, 255, .06), transparent), radial-gradient(ellipse 26% 20% at 74% 30%, rgba(255, 255, 255, .05), transparent),
    var(--felt-noise), radial-gradient(circle at 50% 45%, #33a06d, #22804f 58%, #155a37);
  box-shadow: inset 0 0 0 3px #3b1b08, inset 0 0 0 5px rgba(255, 210, 160, .18), inset 0 10px 20px rgba(0, 0, 0, .5), inset 0 0 50px rgba(0, 0, 0, .35);
}
.board .hint { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: rgba(255, 246, 220, .92); font: 800 1.25rem var(--f-display); text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }

/* tiles on the felt */
.bt { position: absolute; transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease; filter: drop-shadow(0 2px 0 #a8916a) drop-shadow(2px 5px 4px rgba(8, 30, 16, .5)); }
.bti { position: absolute; left: 50%; top: 50%; transition: width .35s ease, height .35s ease; }
.measuring, .measuring * { transition: none !important; } /* layoutBoard measures the real spots */
.bt.probe { visibility: hidden; pointer-events: none; }
.bt svg, .ht svg, .mini svg, .ft svg { width: 100%; height: 100%; display: block; }
.bt.wild { filter: drop-shadow(0 2px 0 #a8916a) drop-shadow(0 0 8px #f5b400); }
.puff { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.puff i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 246, 222, .7); rotate: var(--r); animation: puff .6s ease-out forwards; }
@keyframes puff { from { transform: translateX(calc(var(--u) * .45)) scale(.4); opacity: .95; } to { transform: translateX(calc(var(--u) * 1.5)) scale(1.7); opacity: 0; } }

/* the domino itself: ivory, bevel, engraved line, brass pin, recessed pips */
.tf { fill: url(#dmIv); stroke: #c4ae80; stroke-width: 2.5; }
.tb { fill: none; stroke: url(#dmBev); stroke-width: 3.5; }
.tl { stroke: #8f7b55; stroke-width: 3; stroke-linecap: round; }
.tl2 { stroke: #fffaf0; stroke-width: 1.6; stroke-linecap: round; }
.tc { fill: url(#dmBr); stroke: #6d4510; stroke-width: 1; }
.tch { fill: #fffbe6; opacity: .8; }
.pp circle { fill: var(--pip, #1d1a16); }
.ps circle { fill: url(#dmPs); }
.pipcolor .n1 { --pip: #1f8fd0; } .pipcolor .n2 { --pip: #1e9a55; } .pipcolor .n3 { --pip: #d93a2b; }
.pipcolor .n4 { --pip: #8a5527; } .pipcolor .n5 { --pip: #233f9e; } .pipcolor .n6 { --pip: #e09a00; }
.pipcolor .n7 { --pip: #8445c2; } .pipcolor .n8 { --pip: #12807a; } .pipcolor .n9 { --pip: #d4497a; }

.slot {
  position: absolute; translate: -50% -50%; min-width: 46px; min-height: 46px; border-radius: 10px; border: 3px dashed var(--gold);
  background: rgba(255, 214, 90, .3); display: grid; place-items: center; padding: 0; z-index: 3; animation: glow 1s ease-in-out infinite alternate;
}
.slot span { background: var(--gold); color: var(--ink); font: 800 .9rem var(--f-display); border-radius: 999px; padding: 1px 9px; }
@keyframes glow { from { box-shadow: 0 0 0 0 rgba(255, 210, 63, .7); } to { box-shadow: 0 0 18px 6px rgba(255, 210, 63, .65); } }

/* ---------- 3D: you sit at the table, three friends around it */
.v3d .table { perspective: 950px; perspective-origin: 50% 0%; }
.v3d .plane { --px: -6%; left: var(--px); right: var(--px); top: 36%; bottom: 2%; transform: rotateX(36deg); transform-origin: 50% 100%; transform-style: preserve-3d; }
.v3d .plane::after { /* the frame's front face: thickness */
  content: ''; position: absolute; left: 16px; right: 16px; top: calc(100% - 3px); height: 30px; transform-origin: 50% 0; transform: rotateX(-86deg);
  background: var(--grain), linear-gradient(#70391a, #3d1c08); border-radius: 0 0 14px 14px;
}
.v3d .felt { inset: 50px 28px 46px; transform-style: preserve-3d; }
.v3d .board { transform-style: preserve-3d; }
.v3d .slot { min-width: 54px; min-height: 54px; }

/* friends: a seat is 10em × 12em (1em = --cw / 10); JS sits them so the waist (9.2em) meets the far edge */
.seat { position: absolute; left: 0; top: 0; font-size: calc(var(--cw, 110px) / 10); width: 10em; height: 12em; --tc: var(--t0); }
.seat.t1 { --tc: var(--t1); }
.spot { position: absolute; left: -3em; right: -3em; top: -2.6em; height: 12.5em; border-radius: 50%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(closest-side, rgba(255, 226, 140, .9), rgba(255, 186, 96, .38) 55%, transparent); }
.seat.turn .spot { opacity: 1; animation: spot 1.3s ease-in-out infinite alternate; }
@keyframes spot { from { scale: .92; } to { scale: 1.05; } }
.char { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 77%; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); animation: bob 3.8s ease-in-out infinite; animation-delay: calc(var(--now, 0s) + var(--d, 0s)); }
@keyframes bob { 50% { translate: 0 -.16em; } }
.torso { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.head { position: absolute; left: 2em; top: 0; width: 6em; height: 6em; padding: 0; border: 0; background: none; z-index: 2; border-radius: 50%; transform-origin: 50% 88%; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.head svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fan { position: absolute; left: 5em; top: 9.25em; width: 0; height: 0; z-index: 5; transition: transform .45s, opacity .3s; }
.fan::before, .fan::after { content: ''; position: absolute; top: -.75em; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--sk); box-shadow: inset -.16em -.14em 0 rgba(0, 0, 0, .16), 0 .08em .12em rgba(0, 0, 0, .3); z-index: 20; }
.fan::before { left: -1.25em; } .fan::after { left: .1em; }
.ft {
  position: absolute; left: -.72em; bottom: 0; width: 1.44em; height: 2.88em; border-radius: .22em; rotate: var(--a); transform-origin: 50% 135%;
  background: radial-gradient(circle, #e0533a 0 .15em, #fff4d6 .16em .23em, transparent .24em), linear-gradient(160deg, #fffaf0, #e8d9b6);
  box-shadow: inset 0 0 0 .06em #c2ab7c, inset 0 0 0 .17em #fffaf0, inset 0 0 0 .22em #dac69a, .06em .1em .14em rgba(0, 0, 0, .4);
}
.ft.face { background: none; box-shadow: .06em .1em .14em rgba(0, 0, 0, .4); }
.arm { position: absolute; top: 5.9em; width: 1.3em; height: 3.7em; border-radius: .7em; background: var(--sl); z-index: 4; transform-origin: 50% .55em; transition: rotate .45s cubic-bezier(.3, 1.5, .5, 1);
  box-shadow: inset -.22em 0 0 rgba(0, 0, 0, .16), inset .12em 0 0 rgba(255, 255, 255, .14); }
.arm.l { left: 2.4em; rotate: -24deg; }
.arm.r { right: 2.4em; rotate: 24deg; }
.arm b { display: none; position: absolute; left: 50%; bottom: -.35em; width: 1.1em; height: 1.1em; margin-left: -.55em; border-radius: 50%; background: var(--sk); box-shadow: inset -.16em -.14em 0 rgba(0, 0, 0, .16); }
/* reactions: lean in on their turn, slump on «¡Paso!» or a lost hand, celebrate a win (wilder on capicúa) */
.v3d .turn .char { transform: translateY(.45em) scale(1.06); }
.v3d .slump .char, .v3d .sad .char { transform: translateY(.3em) rotate(-3deg); }
.v3d .slump .head, .v3d .sad .head { transform: translateY(.35em) rotate(-11deg); }
.v3d .slump .arm.l, .v3d .sad .arm.l { rotate: -14deg; }
.v3d .slump .arm.r, .v3d .sad .arm.r { rotate: 14deg; }
.v3d .slump .fan, .v3d .sad .fan { transform: translateY(.5em) rotate(6deg); }
.v3d .cheer .arm b { display: block; }
.v3d .cheer .arm.l { rotate: 152deg; }
.v3d .cheer .arm.r { rotate: -152deg; }
.v3d .cheer .fan { opacity: 0; transform: translateY(1.6em) scale(.6); }
.v3d .cheer .char { animation: hop .42s ease-in-out infinite alternate; }
.v3d .capi .char { animation-duration: .27s; }
.v3d .cheer .head { transform: rotate(6deg); }
@keyframes hop { to { translate: 0 -.9em; } }
.seat.off .char, .seat.off .topv { filter: grayscale(.7) brightness(.8); }
.seat.shake .char, .seat.shake .topv { animation: shake .5s; }
@keyframes shake { 20%, 60% { rotate: -7deg; } 40%, 80% { rotate: 7deg; } }

/* name plaque: a little wooden sign on the rim, team color underneath, a bulb when it's their turn */
.plaque {
  position: absolute; left: 50%; top: 8.75em; translate: -50% 0; z-index: 3; display: flex; align-items: center; gap: .35em; max-width: 12.5em; padding: .3em .8em .38em;
  border-radius: .45em; background: var(--grain), linear-gradient(#c47e40, #8d4f22); color: #fff4dd; white-space: nowrap;
  font: 800 max(11px, 1.15em)/1.1 var(--f-display); text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, .55), inset 0 -3px 0 var(--tc), 0 3px 6px rgba(0, 0, 0, .45); transition: box-shadow .3s;
}
.plaque b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.plaque::before, .plaque::after { content: ''; flex: none; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #c08a2a 60%, #6b4510); }
.plaque .bulb { display: none; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #fff3a8; box-shadow: 0 0 6px 2px #ffd23f; }
.turn .plaque { box-shadow: inset 0 1px 0 rgba(255, 230, 190, .55), inset 0 -3px 0 var(--tc), 0 0 0 2px #ffd23f, 0 0 18px 5px rgba(255, 210, 63, .6); }
.turn .plaque .bulb { display: block; }
.v3d .plaque { max-width: 10.4em; }
.v3d .plaque .cnt { display: none; }
.plaque .cnt { font: 800 .74em var(--f-body); background: rgba(0, 0, 0, .3); border-radius: .6em; padding: .05em .4em; text-shadow: none; }
.bot { font: 800 .62em var(--f-body); font-style: normal; text-transform: uppercase; background: #ffd23f; color: #3a2414; padding: .1em .35em; border-radius: .35em; text-shadow: none; flex: none; }
.bot.off { background: #ddd; }

/* comic speech bubbles */
.bubble, .fxbubble {
  background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 16px; padding: 4px 11px 5px; font: 800 15px/1.1 var(--f-display);
  white-space: nowrap; box-shadow: 3px 3px 0 var(--ink); pointer-events: none;
}
.bubble { position: absolute; left: 50%; top: -1.3em; z-index: 6; translate: -50% 0; rotate: -4deg; animation: pop 2.6s forwards; }
.bubble::before, .fxbubble::before { content: ''; position: absolute; left: 26%; top: 100%; border-style: solid; border-width: 12px 10px 0 2px; border-color: var(--ink) transparent transparent; }
.bubble::after, .fxbubble::after { content: ''; position: absolute; left: calc(26% + 3px); top: 100%; margin-top: -4px; border-style: solid; border-width: 9px 6px 0 1px; border-color: #fff transparent transparent; }
@keyframes pop { 0% { scale: .3; opacity: 0; } 10% { scale: 1.15; opacity: 1; } 18% { scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.fxbubble { position: fixed; z-index: 30; translate: -50% -140%; rotate: 3deg; font-size: 1rem; animation: pop 2.6s forwards; }

/* ---------- the score notepad and the props on the near rim */
.notepad {
  position: absolute; z-index: 4; left: 10px; bottom: 8px; width: 116px; padding: 12px 8px 5px; rotate: -4deg; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 15px, rgba(70, 130, 200, .3) 15px 16px) 0 9px, #fffdf2;
  border-radius: 2px 2px 5px 5px; box-shadow: 1px 2px 0 #ebe2c9, 2px 4px 0 #ddd2b4, 5px 10px 14px rgba(0, 0, 0, .5);
  font-family: "Caveat", "Comic Sans MS", cursive; color: #22378a;
}
.notepad::before { content: ''; position: absolute; left: 6px; right: 6px; top: -4px; height: 9px; background: radial-gradient(circle, #55555c 0 2.3px, transparent 2.8px) 0 0 / 10px 9px repeat-x; }
.np-top { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; line-height: 1; color: #c03c3c; }
.np-cols { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1px; }
.np-c { display: grid; justify-items: center; align-content: start; line-height: 1; padding: 0 2px; min-width: 0; }
.np-c + .np-c { border-left: 1.5px solid #d65a5a; }
.np-c span { font-size: 16px; font-weight: 700; }
.np-c.t0 span { color: var(--t0-dk); } .np-c.t1 span { color: var(--t1-dk); }
.np-c.mine span { text-decoration: underline 2px; text-underline-offset: 2px; }
.np-c b { font-size: 30px; font-weight: 700; }
.tally { height: 11px; width: auto; max-width: 100%; margin-top: 1px; }
.pencil {
  position: absolute; right: -30px; bottom: 2px; width: 76px; height: 8px; rotate: -34deg; border-radius: 2px;
  background: linear-gradient(90deg, #f29aa6 0 11%, #b9b9b9 11% 17%, #f6c445 17% 84%, #f3d5ab 84% 95%, #333 95%);
  clip-path: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
}
.props { position: absolute; z-index: 4; right: 6px; bottom: 6px; width: 128px; pointer-events: none; filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, .35)); }
.props svg { width: 100%; height: auto; display: block; overflow: visible; }
.steam { animation: steam 2.8s ease-in-out infinite; animation-delay: var(--now, 0s); }
.props g:last-child .steam { animation-delay: calc(var(--now, 0s) - 1.3s); }
@keyframes steam { 0% { opacity: 0; transform: translateY(5px); } 40% { opacity: .75; } 100% { opacity: 0; transform: translateY(-9px); } }
.notes text { animation: note 3.4s ease-in-out infinite; animation-delay: var(--now, 0s); }
.notes text + text { animation-delay: calc(var(--now, 0s) - 1.7s); }
@keyframes note { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -10px); } }

/* ---------- my side: the near edge of the table, tiles fanned in my hands */
.me {
  position: relative; z-index: 3; padding: 6px 12px calc(12px + env(safe-area-inset-bottom)); overflow-x: clip; color: #fff3dc;
  background: var(--grain), linear-gradient(180deg, #74401d 0, #4e2710 16px, #2f170a);
  box-shadow: inset 0 3px 0 rgba(255, 214, 170, .4), 0 -10px 22px rgba(0, 0, 0, .4);
}
.status { min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .95rem; justify-content: center; text-align: center; }
.status .go { background: var(--go); color: #fff; padding: 3px 12px; border-radius: 999px; font-family: var(--f-display); box-shadow: 0 2px 0 #136a3c; }
.myturn .status .go { animation: goglow 1s ease-in-out infinite alternate; }
@keyframes goglow { to { box-shadow: 0 2px 0 #136a3c, 0 0 16px 4px rgba(60, 220, 140, .55); } }
.status i { opacity: .8; }
.tbar { width: 100%; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.tbar i { display: block; height: 100%; background: var(--warn); transition: width .2s linear; }
.hand { display: flex; justify-content: center; align-items: flex-end; padding: 34px 0 12px; min-height: calc(var(--tw, 46px) * 2 + 32px); }
.ht {
  position: relative; flex: none; width: var(--tw); height: calc(var(--tw) * 2); margin: 0 calc(var(--ov, 0px) / -2); padding: 0; border: 0; background: none;
  border-radius: calc(var(--tw) * .16); rotate: var(--a, 0deg); translate: 0 var(--y, 0px); transform-origin: 50% 100%;
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), filter .2s, opacity .2s;
  filter: drop-shadow(0 2px 0 #bba675) drop-shadow(0 3px 0 #8d7650) drop-shadow(0 9px 8px rgba(0, 0, 0, .5));
}
.ht::after { content: ''; position: absolute; inset: -3px; border-radius: calc(var(--tw) * .2); pointer-events: none; transition: box-shadow .2s; }
.ht.legal { transform: translateY(-8px); }
.ht.legal::after { box-shadow: 0 0 0 2px rgba(140, 240, 180, .95), 0 0 14px 3px rgba(60, 207, 142, .55); }
.ht.dim { transform: translateY(5px); filter: brightness(.72) saturate(.6) drop-shadow(0 2px 0 #6e6040) drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); }
.ht.sel { transform: translateY(-22px) scale(1.08); z-index: 2; }
.ht.sel::after { box-shadow: 0 0 0 3px #ffd23f, 0 0 24px 7px rgba(255, 210, 63, .8); }
@media (hover: hover) { .ht.legal:hover { transform: translateY(-16px); } .ht.sel:hover { transform: translateY(-22px) scale(1.08); } }
.ht.wild .tf { fill: #fff3c2; stroke: var(--gold); stroke-width: 6; }
.ht em { position: absolute; top: -10px; right: -6px; font-style: normal; font-size: .85rem; }
.acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 48px; }
.btn.pass { background: var(--warn); box-shadow: 0 3px 0 #8e211c; font-size: 1.1rem; min-width: 160px; }
.btn.end { background: var(--go); box-shadow: 0 3px 0 #136a3c; }
.me .btn.ghost { background: #fff3dc; box-shadow: 0 3px 0 #b08a5c; }
.tray { margin-top: 8px; background: rgba(255, 248, 234, .96); color: var(--ink); border-radius: 14px; padding: 10px; display: grid; gap: 8px; }
.phr { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.phr button { border: 0; background: #fff; border-radius: 999px; padding: 8px 12px; font-weight: 700; min-height: 42px; box-shadow: inset 0 0 0 2px var(--line); }
.throw { display: flex; align-items: center; gap: 6px; }
.throw span { flex: 1; font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.throw button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #fff; font-size: 1.3rem; box-shadow: inset 0 0 0 2px var(--line); }
.throw .mini { width: 12px; height: 24px; }
.me .who { justify-content: center; }
.me input { max-width: 260px; }

.extras { padding: 12px 10px 30px; max-width: 1100px; margin: 0 auto; color: var(--ink); }
.extras .card { margin: 8px 0; padding: 12px 16px; }
.hist { padding-left: 0; list-style: none; margin: 8px 0 0; font-size: .88rem; }
.hist li { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.hist li span { color: var(--muted); min-width: 62px; }
.hist li b { margin-left: auto; }
.mini { display: inline-block; vertical-align: middle; width: 14px; height: 28px; }
.mini.ghost { filter: drop-shadow(0 0 4px #c9b8ff); }

/* ---------- «Vista cenital»: the same patio seen from above */
.flat .scene { display: none; }
.flat .table { background: radial-gradient(ellipse at 50% 40%, rgba(255, 200, 120, .25), transparent 70%), linear-gradient(rgba(40, 10, 20, .25), rgba(40, 10, 20, .25)), repeating-conic-gradient(#c97a52 0 25%, #b4643f 0 50%) 0 0 / 48px 48px; }
.flat .plane { inset: 100px 8px 10px; box-shadow: inset 0 3px 0 rgba(255, 222, 176, .5), inset 0 -5px 0 rgba(0, 0, 0, .32), inset 0 0 0 2px #4a230b, 0 16px 30px rgba(20, 6, 0, .55); }
.flat .plane::before { inset: 14px; }
.flat .felt { inset: 22px; }
.flat .bt.new { animation: none; }
.flat .seat { z-index: 3; width: 33%; height: 98px; font-size: 10px; display: grid; justify-items: center; align-content: start; gap: 1px; top: 2px; }
.flat .seat.left { left: 0; }
.flat .seat.top { left: 33.5%; }
.flat .seat.right { left: auto; right: 0; }
.flat .bubble { top: 34px; }
.flat .spot { left: 50%; right: auto; top: -6px; width: 84px; height: 84px; translate: -50% 0; }
.topv { width: 66px; height: 66px; padding: 0; border: 0; background: none; rotate: 180deg; position: relative; z-index: 1; }
.topv svg { width: 100%; height: 100%; display: block; }
.topv.round { rotate: none; border-radius: 50%; overflow: hidden; width: 46px; height: 46px; }
.flat .plaque, .seat.bottom .plaque { position: relative; left: auto; top: auto; translate: none; margin-top: -6px; font-size: 11px; }
.backs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 120px; margin-top: 4px; position: relative; z-index: 1; }
.backs i { width: 7px; height: 13px; border-radius: 2px; background: linear-gradient(160deg, #fffaf0, #e3d3ad); box-shadow: inset 0 0 0 1px #c2ab7c, 0 1px 2px rgba(0, 0, 0, .4); }
.backs .mini { width: 13px; height: 26px; }
.flat .turn .topv { scale: 1.08; }
.flat .slump .topv { rotate: 170deg; }
.flat .cheer .topv { animation: hop .42s ease-in-out infinite alternate; }
.seat.bottom { left: 50%; top: auto; bottom: 8px; translate: -50% 0; width: auto; height: auto; font-size: 10px; display: grid; justify-items: center; z-index: 5; }
.seat.bottom .topv { rotate: none; }
.flat .notepad, .flat .props { scale: .85; transform-origin: 0 100%; }
.flat .props { transform-origin: 100% 100%; }

/* ---------- overlays: the round summary is a receipt from the ventanita */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px 16px; background: rgba(30, 12, 20, .55); animation: fade .25s; overflow-y: auto; }
.overlay.soft { background: rgba(30, 12, 20, .38); }
@keyframes fade { from { opacity: 0; } }
.overlay.still, .overlay.still * { animation: none !important; }
.overlay .card { width: min(440px, 100%); text-align: center; animation: rise .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes rise { from { translate: 0 30px; opacity: 0; } }
.overlay .card.vote { background: var(--felt-noise), #2c3a31; color: #f4f1e4; border: 10px solid #8a5426; border-radius: 10px; box-shadow: inset 0 0 30px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .5); font-family: "Caveat", cursive; font-size: 1.25rem; }
.vote h2 { font: 700 2.3rem/1 "Caveat", cursive; letter-spacing: 0; }
.vote .muted { color: rgba(244, 241, 228, .75); font-size: 1.1rem; }
.vote .btn { font-family: var(--f-body); }
.receipt {
  --paper-c: #fffdf6; position: relative; width: min(360px, 100%); margin: 12px 0; padding: 20px 20px 18px; background: var(--paper-c); color: #2a2522;
  font: 15px/1.35 "Courier Prime", "Courier New", monospace; text-align: center; box-shadow: 0 22px 40px rgba(0, 0, 0, .45); animation: printout .55s cubic-bezier(.2, 1.1, .4, 1);
}
.receipt::before, .receipt::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; background: linear-gradient(135deg, var(--paper-c) 50%, transparent 50%) 0 0 / 12px 10px repeat-x, linear-gradient(225deg, var(--paper-c) 50%, transparent 50%) 0 0 / 12px 10px repeat-x; }
.receipt::after { top: 100%; }
.receipt::before { bottom: 100%; rotate: 180deg; }
@keyframes printout { from { clip-path: inset(0 0 100% 0); translate: 0 -20px; } to { clip-path: inset(-20px -20px -20px -20px); } }
.rc-head b { display: block; font-size: 1.02rem; letter-spacing: .08em; }
.rc-head small { display: block; font-size: .76rem; color: #756b60; }
.rc-sep { border-top: 2px dashed #bdb3a2; margin: 10px 0; }
.rc-line { display: flex; gap: 6px; margin: 2px 0; text-align: left; }
.rc-line .fill { flex: 1; display: block; border-bottom: 2px dotted #bdb3a2; margin-bottom: 5px; }
.receipt h2 { font: 800 1.55rem/1.05 var(--f-display); margin: 10px 0 6px; color: var(--ink); }
.receipt p { margin: 4px 0; }
.stamp { display: inline-block; border: 3px solid #d23e22; color: #d23e22; padding: 2px 12px; border-radius: 8px; font: 800 1.15rem var(--f-display); text-transform: uppercase; rotate: -8deg; margin: 4px 0; animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) .3s both; }
@keyframes stamp { from { scale: 2.2; opacity: 0; } }
.stamp.pollona { font-size: 1.7rem; }
.rhands { display: grid; gap: 4px; text-align: left; }
.rh { display: grid; grid-template-columns: 70px 1fr auto; gap: 6px; align-items: center; font-size: .86rem; }
.rh span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh.t0 span { color: var(--t0-dk); } .rh.t1 span { color: var(--t1-dk); }
.rh div { display: flex; flex-wrap: wrap; gap: 3px; }
.rh .mini { width: 12px; height: 24px; }
.rh em { color: #756b60; }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; font-weight: 700; text-align: left; }
.rc-total > b { font-size: 1.35rem; }
.rc-thanks { font-size: .82rem; color: #756b60; margin: 10px 0 10px !important; }
.receipt .btn { font-family: var(--f-body); }
.receipt .btn:not(.big) { width: 100%; }
.big-win h2 { font-size: 2.2rem; }
.big-win.t0 h2 { color: var(--t0); } .big-win.t1 h2 { color: var(--t1); }
.final { font: 800 2.6rem var(--f-display); margin: 0; }
.receipt .hist { text-align: left; }
.receipt .hist li { border-bottom: 1px dotted #ccc3b3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: .84rem; }
.receipt .hist li span { min-width: 0; }
.receipt .hist li b { margin: 0; white-space: nowrap; }
.hist li i { font-style: normal; }
.receipt .hist li i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.big-win .stamp { margin: 2px 0 6px; rotate: -5deg; }
.big-win .stamp.paid { border-color: #2f8a4c; color: #2f8a4c; }
.big-win .stamp.pollona { font-size: 1.25rem; }

/* ---------- fx & toasts */
#toasts { position: fixed; top: 64px; left: 50%; translate: -50% 0; z-index: 40; display: grid; gap: 6px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px; font-size: .9rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); animation: rise .3s; transition: opacity .4s, translate .4s; }
.toast.private { background: #4b2c7a; }
.toast.warn { background: var(--warn); }
.toast.out { opacity: 0; translate: 0 -10px; }
.fly { position: fixed; left: 0; top: 0; z-index: 30; font-size: 2rem; margin: -20px 0 0 -20px; pointer-events: none; filter: drop-shadow(0 10px 6px rgba(0, 0, 0, .3)); }
.fly .mini { width: 18px; height: 36px; }
.fly.splat { transition: opacity .6s, scale .6s; opacity: 0; }

/* ---------- bigger screens */
@media (min-width: 760px) {
  .game { grid-template-rows: auto minmax(470px, 1fr) auto; }
  .topbar { padding: 10px 20px; }
  .topbar .back span { display: inline; font: 700 .95rem var(--f-body); }
  .chipbtn .lbl { display: inline; }
  .viewseg button { padding: 6px 12px; font-size: .85rem; }
  .v3d .plane { --px: max(12%, calc(50% - 480px)); top: 33%; bottom: 5%; transform: rotateX(30deg); }
  .v3d .plaque { max-width: 12.5em; }
  .wall { top: 10%; height: 40%; }
  .palm { height: 64%; bottom: 46%; }
  .palm.l { left: max(-2%, calc(50% - 720px)); }
  .palm.r { right: max(-2%, calc(50% - 720px)); }
  .notepad { left: max(22px, calc(50% - 470px)); bottom: 16px; scale: 1.25; transform-origin: 0 100%; }
  .props { right: max(22px, calc(50% - 470px)); bottom: 14px; width: 170px; }
  .flat .plane { inset: 108px max(150px, calc(50% - 400px)) 18px; }
  .flat .seat { width: 140px; height: auto; }
  .flat .seat.top { left: 50%; translate: -50% 0; }
  .flat .seat.left { left: max(8px, calc(50% - 540px)); top: 50%; translate: 0 -50%; }
  .flat .seat.right { right: max(8px, calc(50% - 540px)); top: 50%; translate: 0 -50%; }
  .flat .seat.left .topv { rotate: 90deg; }
  .flat .seat.right .topv { rotate: -90deg; }
  .flat .seat .topv { width: 96px; height: 96px; }
  .flat .notepad, .flat .props { scale: 1; }
  /* my side: a thinner rail of wood, the buttons ride beside the hand instead of under it */
  .me { padding-top: 2px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .status { min-height: 28px; }
  .hand { padding: 30px 0 2px; min-height: calc(var(--tw, 46px) * 2 + 32px); }
  .acts { min-height: 44px; }
}
@media (min-width: 1180px) {
  .hand { padding-bottom: 8px; }
  :is(.me.t0, .me.t1) .acts { position: absolute; z-index: 2; right: max(20px, calc(50% - 600px)); bottom: calc(22px + env(safe-area-inset-bottom)); width: 210px; min-height: 0; flex-direction: column; align-items: stretch; }
  :is(.me.t0, .me.t1) .acts .btn.round { align-self: flex-end; }
  .extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}