/* Domino (static/js/games/domino.js): a real table seen from above — green felt in a walnut frame, dark wood, slate
   with brass, or café marble (.dot-*) — the line of tiles in the middle, turning at its edges, the others round it, the
   boneyard face down in a corner, your tiles standing under it. Shares the round table's dock, buttons, timer and
   result card with Last Card (lastcard.css). */

/* ---------- the tables ---------- */
.dot-felt { --t1: #2c7a55; --t2: #185638; --t3: #0d3624; --rim: #5a3a1c; --rim2: #2e1c0c; --glow: rgba(60,170,110,.25); }
.dot-wood { --t1: #6b4426; --t2: #4a2d18; --t3: #2a180b; --rim: #2a1a0c; --rim2: #120a04; --glow: rgba(200,140,70,.2); }
.dot-slate { --t1: #4a5258; --t2: #2e3438; --t3: #181c1f; --rim: #b08a3a; --rim2: #5a4214; --glow: rgba(220,180,90,.22); }
.dot-cafe { --t1: #f4f1ea; --t2: #e3ddd0; --t3: #c9c0ad; --rim: #7a5a36; --rim2: #3e2a14; --glow: rgba(255,240,210,.2); }

/* ---------- the page: the table on one screen, nothing scrolls ---------- */
html:has(body.game-domino[data-page="table"]) { overflow: hidden; }
body.game-domino[data-page="table"] .site-foot { display: none; }
body.game-domino[data-page="table"] .chat-fab { display: none !important; }
body.game-domino[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 .do-wrap { height: 100%; }
.do-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; height: 100%; --tw: 46px; }
@media (min-width: 761px) and (min-height: 521px) { .do-wrap { grid-template-rows: minmax(0, 1fr) auto; } }

/* ---------- the table ---------- */
.do-felt { position: relative; min-height: 0; border-radius: 30px; isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, var(--t1), var(--t2) 65%, var(--t3));
  box-shadow: inset 0 0 0 10px var(--rim), inset 0 0 0 12px var(--rim2), inset 0 0 0 13px rgba(255,255,255,.12), inset 0 0 60px rgba(0,0,0,.55),
              0 0 40px -10px var(--glow), 0 24px 46px -20px rgba(0,0,0,.9); }
.do-felt::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); }
.dot-wood .do-felt::before { opacity: .8; background: repeating-linear-gradient(92deg, rgba(0,0,0,.12) 0 3px, transparent 3px 11px, rgba(255,255,255,.04) 11px 13px, transparent 13px 26px); }
.dot-slate .do-felt::before { opacity: .55; }
.dot-cafe .do-felt::before { opacity: .7; background: radial-gradient(ellipse 30% 8% at 30% 30%, rgba(150,140,120,.25), transparent 70%), radial-gradient(ellipse 40% 6% at 70% 65%, rgba(150,140,120,.22), transparent 70%); }
.do-felt > .do-banner { position: absolute; left: 50%; top: 22%; z-index: 25; transform: translateX(-50%); width: max-content; max-width: min(90%, 520px); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.do-felt > .do-banner.blank { display: none; }
.do-felt > .paused21 { z-index: 26; }

/* ---------- the line ---------- */
.do-board { position: absolute; left: 13%; right: 13%; top: 17%; bottom: 13%; z-index: 4; }
.do-t { position: absolute; display: block; filter: drop-shadow(1px 3px 3px rgba(0,0,0,.55)); }
.do-t .dosvg, .do-ht2 .dosvg, .do-yt .dosvg, .do-mini .dosvg, .do-ghost .dosvg, .do-ht .dosvg, .do-lk-t .dosvg { display: block; width: 100%; height: 100%; }
/* a laid tile: its place waits hidden while it flies there, then it joins the line with a soft settle */
.do-t.incoming { visibility: hidden; }
.do-t.land { animation: doLand .35s cubic-bezier(.3,1.2,.5,1); }
@keyframes doLand { from { transform: scale(1.05); filter: drop-shadow(3px 9px 8px rgba(0,0,0,.5)) brightness(1.06); } }
.do-end { position: absolute; z-index: 6; padding: 0; border: 0; cursor: pointer; border-radius: calc(var(--u, 30px) * .22); background: rgba(255,216,102,.14);
  box-shadow: inset 0 0 0 2px rgba(255,216,102,.9), 0 0 18px rgba(255,216,102,.7); animation: doEnd .9s ease-in-out infinite alternate; }
.do-end i { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,180,.9), rgba(255,216,102,0) 70%); }
@keyframes doEnd { to { background: rgba(255,216,102,.28); box-shadow: inset 0 0 0 2px #ffd866, 0 0 26px rgba(255,216,102,.95); } }
.do-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 13px; font-weight: 800; color: rgba(255,255,255,.55); white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; border: 1px dashed rgba(255,255,255,.3); }
.dot-cafe .do-empty { color: rgba(60,40,20,.6); border-color: rgba(60,40,20,.35); }

/* ---------- the others ---------- */
.do-opps { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.do-opp { position: absolute; transform: translate(-50%, 0); display: grid; justify-items: center; gap: 3px; }
.do-opp.l, .do-opp.r { transform: translate(-50%, -50%); }
.dot-cafe .lc-on { color: #2a1d10; text-shadow: none; } .dot-cafe .lc-on small { color: rgba(40,28,14,.7); }
.do-backs { position: relative; display: flex; gap: 2px; padding-right: 10px; }
.do-backs i { width: 10px; height: 20px; border-radius: 2.5px; background: linear-gradient(135deg, #fffaf0, #d8c8a2); border: 1px solid #9c8a62; box-shadow: 0 1px 2px rgba(0,0,0,.45); }
.do-backs em { position: absolute; right: -10px; top: -9px; min-width: 19px; height: 19px; 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: #1a1300; background: #ffd866; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.do-opp.turn .lc-tring { inset: -2px; background: conic-gradient(#ff7a1f, #ffb02e calc(var(--k, 1) * 180deg), #ffe066 calc(var(--k, 1) * 360deg), rgba(255,255,255,.1) 0);
  filter: drop-shadow(0 0 5px rgba(255,160,40,.95)) drop-shadow(0 0 14px rgba(255,200,60,.65)); }
.do-opp.turn .lc-av { transform: scale(1.08); }
.do-opp.turn .lc-av::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(transparent 0 78%, rgba(255,255,255,.95) 84%, transparent 88%, transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 65%, #000 72%, transparent 74%); mask: radial-gradient(circle, transparent 63%, #000 65%, #000 72%, transparent 74%);
  filter: drop-shadow(0 0 4px #fff); animation: lcSpark 1.3s linear infinite; }

/* ---------- the boneyard ---------- */
.do-yard { position: absolute; left: 4%; bottom: 7%; z-index: 6; width: 92px; height: 70px; padding: 0; border: 0; background: none; cursor: default; }
.do-yard.hidden { display: none; }
.do-yt { position: absolute; left: calc(6px + (var(--i) % 3) * 24px); top: calc(4px + (var(--i) / 3) * 0px + (var(--i) % 2) * 3px); width: 22px; height: 44px;
  transform: rotate(calc((var(--i) * 37deg) - 40deg)); filter: drop-shadow(1px 2px 2px rgba(0,0,0,.5)); }
.do-yard em { position: absolute; right: -4px; bottom: -6px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; display: grid; place-items: center;
  font-style: normal; font-size: 11.5px; font-weight: 900; color: #fff; background: rgba(8,6,24,.85); border: 1px solid rgba(255,255,255,.25); }
.do-yard.can { cursor: pointer; }
.do-yard.can .do-yt { animation: doYard 1.2s ease-in-out infinite alternate; }
@keyframes doYard { to { filter: drop-shadow(0 0 8px rgba(255,216,102,.95)) drop-shadow(1px 2px 2px rgba(0,0,0,.5)); } }

/* ---------- you: the dock and your tiles ---------- */
.do-me { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.do-hand { display: flex; justify-content: safe center; align-items: flex-end; gap: 7px; min-width: 0; padding: 22px 8px calc(10px + env(safe-area-inset-bottom)); overflow: hidden; }
.do-ht2 { position: relative; flex: 0 1 var(--tw); min-width: 18px; aspect-ratio: 1 / 2; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 9px;
  filter: drop-shadow(1px 4px 4px rgba(0,0,0,.55)); transition: transform .18s, filter .2s, opacity .2s; }
.do-ht2.no { opacity: .55; filter: saturate(.6) drop-shadow(1px 4px 4px rgba(0,0,0,.55)); cursor: default; }
.do-ht2.ok { transform: translateY(-10px); filter: drop-shadow(0 0 9px rgba(255,216,102,.8)) drop-shadow(1px 5px 5px rgba(0,0,0,.55)); }
.do-ht2.ok:hover, .do-ht2.ok:focus-visible { transform: translateY(-20px) scale(1.05); }
.do-ht2.sel { transform: translateY(-22px) scale(1.06); filter: drop-shadow(0 0 0 2px #ffd866) drop-shadow(0 0 14px rgba(255,216,102,.95)) drop-shadow(1px 6px 6px rgba(0,0,0,.55)); }
.do-ht2.came { animation: doCame .45s cubic-bezier(.3,1.3,.5,1); }
@keyframes doCame { from { transform: translateY(-50px) scale(.7); opacity: 0; } }
.do-hand.dealt .do-ht2 { animation: doCame .45s cubic-bezier(.3,1.3,.5,1) backwards; animation-delay: calc(var(--i) * 70ms + .05s); }
@media (prefers-reduced-motion: reduce) { .do-hand.dealt .do-ht2 { animation: none !important; } }
.do-ht2.nope { animation: lcNope .35s; }
.do-ghost { position: fixed; z-index: 95; pointer-events: none; aspect-ratio: 2 / 1; filter: drop-shadow(2px 8px 8px rgba(0,0,0,.5)); }
.do-mini { display: inline-block; width: 13px; height: 26px; }
.do-rc { display: flex; flex-wrap: nowrap; gap: 3px; overflow: hidden; }

/* ---------- home: the line being laid; my look ---------- */
.hero-do .do-art { position: relative; display: flex; justify-content: center; padding: 10px 0 18px; }
.do-homeart { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; }
.do-ht { display: block; width: 92px; height: 46px; margin-left: 2px; filter: drop-shadow(2px 6px 6px rgba(0,0,0,.5)); animation: doHome .5s cubic-bezier(.3,1.3,.5,1) backwards;
  animation-delay: calc(var(--i) * .12s + .2s); }
.do-ht.v { width: 46px; height: 92px; }
@keyframes doHome { from { transform: translateY(-40px) rotate(-12deg); opacity: 0; } }
.do-target { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); }
.do-target button { font-size: 12.5px; font-weight: 900; }
.do-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(--t1), var(--t2) 70%, var(--t3)); box-shadow: inset 0 0 0 4px var(--rim); }
.do-lk-t { position: absolute; top: 50%; filter: drop-shadow(1px 3px 3px rgba(0,0,0,.5)); }
.do-lk-t.a { left: 22%; width: 16%; max-width: 26px; aspect-ratio: 1 / 2; transform: translate(-50%, -50%) rotate(-8deg); }
.do-lk-t.b { left: 62%; width: 40%; max-width: 64px; aspect-ratio: 2 / 1; transform: translate(-50%, -50%) rotate(6deg); }
.logo-dom { width: 36px; height: 36px; flex: none; } .logo-dom svg { width: 36px; height: 36px; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
@media (prefers-reduced-motion: reduce) { .do-end, .do-yard.can .do-yt, .do-ht, .do-opp.turn .lc-av::after { animation: none !important; } }

/* ---------- smaller screens ---------- */
@media (max-width: 760px) {
  .do-wrap { --tw: 36px; }
  .do-felt { border-radius: 24px; }
  .do-board { left: 15%; right: 15%; top: 19%; bottom: 17%; }
  .do-opp .lc-av { width: 38px; height: 38px; } .do-opp .lc-on b { font-size: 11px; max-width: 80px; } .do-backs i { width: 7px; height: 14px; }
  /* (the players on the sides stand inside the edge, with a safe margin: nothing of theirs is cut) */
  .do-opp.l { left: 10px !important; transform: translate(0, -50%); justify-items: start; text-align: left; }
  .do-opp.r { left: auto !important; right: 10px; transform: translate(0, -50%); justify-items: end; text-align: right; }
  .do-opp.l .lc-on b, .do-opp.r .lc-on b { max-width: 64px; }
  .do-yard { left: 3%; bottom: 3%; transform: scale(.75); transform-origin: left bottom; }
  .do-hand { gap: 5px; padding-top: 20px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  body.game-domino[data-page="table"] .top { display: none; }
  body.game-domino[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)); }
  .do-wrap { --tw: 26px; gap: 4px; }
  .do-felt { border-radius: 22px; }
  .do-board { left: 14%; right: 14%; top: 14%; bottom: 12%; }
  .do-opp .lc-av { width: 30px; height: 30px; padding: 2px; } .do-opp .lc-on small { display: none; } .do-backs i { width: 6px; height: 12px; }
  .do-opp.l { left: 10px !important; transform: translate(0, -50%); justify-items: start; }
  .do-opp.r { left: auto !important; right: 10px; transform: translate(0, -50%); justify-items: end; }
  .do-yard { transform: scale(.6); transform-origin: left bottom; left: 2%; bottom: 3%; }
  .do-hand { padding: 12px 8px calc(6px + env(safe-area-inset-bottom)); }
  .do-felt > .do-banner { top: 14%; font-size: 12px; }
}

/* (2026-10) home: the line of tiles a little smaller, with room at the sides */
.hero-do .do-art { padding: 10px 14px 18px; }
.do-homeart { height: 96px; max-width: 100%; }
.do-ht { width: 70px; height: 35px; }
.do-ht.v { width: 35px; height: 70px; }
@media (max-width: 520px) { .do-ht { width: 54px; height: 27px; } .do-ht.v { width: 27px; height: 54px; } .do-homeart { height: 76px; } }
/* (2026-10, b) laying by hand: on your turn every tile can be picked up (no hint which ones fit); dragged or tapped,
   both ends of the line show an empty place for it (a dashed box), the one under the tile lights up */
.do-ht2 { touch-action: none; }
.do-ht2.mine { cursor: grab; }
.do-ht2.mine:hover, .do-ht2.mine:focus-visible { transform: translateY(-12px); }
/* (a tile under the pointer rises; the space it leaves below still counts as the tile, so it never flickers at its edge) */
.do-ht2.mine:hover::before, .do-ht2.ok:hover::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 26px; }
.do-ht2.lifted { opacity: .25; transform: translateY(-6px); }
.do-hold { transform: rotate(-4deg) scale(1.06); filter: drop-shadow(4px 16px 14px rgba(0,0,0,.6)); }
.do-end { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); outline: 2px dashed rgba(255,255,255,.0); animation: doEndIdle 1.4s ease-in-out infinite alternate; }
.do-end i { opacity: .35; }
@keyframes doEndIdle { to { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 0 12px rgba(255,255,255,.25); } }
.do-end.hot { animation: none; background: rgba(255,216,102,.3); box-shadow: inset 0 0 0 2.5px #ffd866, 0 0 26px rgba(255,216,102,.95); transform: scale(1.08); transition: transform .12s; }
.do-end.hot i { opacity: 1; }
.do-end.first { left: 50%; top: 50%; width: calc(var(--u, 34px) * 2); height: var(--u, 34px); min-width: 70px; min-height: 35px; transform: translate(-50%, -50%); }
.do-end.first.hot { transform: translate(-50%, -50%) scale(1.08); }