#hcDominoes{position:fixed;inset:0;z-index:100050;background:#102b38;color:#fff;font:15px system-ui,-apple-system,sans-serif;overflow:auto;overscroll-behavior:contain}
#hcDominoes *{box-sizing:border-box}
#hcDominoes button{font:inherit;cursor:pointer}
#hcDominoes button:disabled{opacity:.4;cursor:not-allowed}
#hcDominoes .dm-head{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;background:#0b1f2a}
#hcDominoes .dm-head button{color:#fff;background:#224050;border:1px solid #ffffff55;border-radius:12px;padding:8px 12px}
#hcDominoes .dm-head strong{font-size:19px;letter-spacing:.05em;text-shadow:1px 2px #071f2a}
#hcDominoes .dm-head em{font-style:normal;color:#ffd254}
#hcDominoes .dm-stage{min-height:44dvh;display:flex;flex-direction:column;align-items:center;padding:15px 12px;background:radial-gradient(circle at center,#805031,#362013 75%)}
#hcDominoes .dm-host{display:flex;align-items:center;gap:9px;font-weight:800}
#hcDominoes .dm-host small{display:block;color:#f2cd8a;font-weight:500}
#hcDominoes .dm-face{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:3px solid #e7b968;background:#184264;font-size:29px}
#hcDominoes .dm-band{background:linear-gradient(110deg,#c8203a 50%,#003f87 50%);padding:3px 6px;border-radius:6px}
#hcDominoes .dm-table{position:relative;flex:1;width:min(100%,650px);min-height:250px;margin:18px auto;border:9px solid #74401f;border-radius:43% / 20%;background:radial-gradient(ellipse,#368a72,#104e46 75%);box-shadow:0 12px 0 #371c0f,inset 0 0 30px #091e1a;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:22px}
#hcDominoes .dm-brand{position:absolute;top:15%;font-size:38px;font-weight:900;opacity:.17}
#hcDominoes .dm-bubble{position:absolute;right:3%;top:3%;z-index:2;max-width:65%;background:white;color:#142c35;border-radius:18px;padding:9px 12px;box-shadow:0 4px 12px #0006}
#hcDominoes .dm-board{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px;max-height:185px;overflow:auto;z-index:1}
#hcDominoes .dm-ends{margin-top:13px;background:#071d25b9;border-radius:15px;padding:5px 11px;font-size:12px;z-index:1}
#hcDominoes .dm-tile{display:inline-flex;border:2px solid #cdbb9b;background:#f3e8cd;color:#16252b;border-radius:6px;box-shadow:2px 3px #0a292c;overflow:hidden;flex-shrink:0}
#hcDominoes .dm-tile span{width:25px;height:42px;display:grid;place-items:center;font-size:23px;line-height:1}
#hcDominoes .dm-tile span+span{border-left:2px solid #655947}
#hcDominoes .dm-bottom{text-align:center;padding:11px 8px calc(14px + env(safe-area-inset-bottom));background:#09212e}
#hcDominoes .dm-status{min-height:33px;margin-top:6px;color:#f4dda7;font-weight:650}
#hcDominoes .dm-hand{display:flex;gap:4px;justify-content:center;overflow-x:auto;padding:9px 2px}
#hcDominoes .dm-hand button{background:none;border:0;padding:0}
#hcDominoes .dm-hand button.selected .dm-tile{border-color:#25f27c;box-shadow:0 0 0 3px #22f18399}
#hcDominoes .dm-hand .dm-tile span{width:29px;height:48px;font-size:25px}
#hcDominoes .dm-actions,#hcDominoes .dm-quick{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:9px}
#hcDominoes .dm-actions button,#hcDominoes .dm-quick button{background:#254757;border:1px solid #ffffff66;color:#fff;padding:8px;border-radius:12px}
#hcDominoes .dm-quick button{font-size:12px}
#hcDominoes .dm-chat{display:flex;gap:7px;max-width:500px;margin:11px auto 0}
#hcDominoes .dm-chat input{flex:1;min-width:0;background:#132f3c;color:#fff;border:1px solid #61717b;border-radius:12px;padding:10px}
#hcDominoes .dm-chat button{background:#175ed7;color:#fff;border:0;border-radius:12px;padding:8px 15px}
#hcDominoes .dm-overlay{position:fixed;inset:0;background:#071521dd;display:grid;place-items:center;padding:20px;z-index:3}
#hcDominoes .dm-overlay>div{width:min(100%,400px);background:#154052;border:2px solid #f5c950;border-radius:19px;padding:25px;text-align:center}
#hcDominoes .dm-overlay h2{color:#ffd254}
#hcDominoes .dm-overlay button{background:#f2c34c;border:0;border-radius:12px;padding:12px 20px;font-weight:800}
@media(max-width:390px){#hcDominoes .dm-hand{gap:2px}#hcDominoes .dm-hand .dm-tile span{width:22px;height:42px;font-size:20px}}

/* Domino Legends scene: live tiles and controls sit above the artwork. */
#hcDominoes {
  background:#301c13;
}
#hcDominoes .dm-head {
  position:relative;
  z-index:2;
  background:linear-gradient(180deg,#101d27,#142f3b);
  box-shadow:0 3px 12px #0007;
}
#hcDominoes .dm-stage {
  position:relative;
  display:block;
  height:clamp(420px,57dvh,670px);
  min-height:0;
  padding:0;
  overflow:hidden;
  background-color:#643e27;
  background-image:url('/app/dominoes/dominoes-scene.png');
  background-repeat:no-repeat;
  background-size:100% auto;
  background-position:center top;
}
#hcDominoes .dm-host {
  position:absolute;
  z-index:2;
  left:50%;
  bottom:44%;
  transform:translateX(-50%);
  width:max-content;
  max-width:94%;
  padding:6px 11px;
  border:1px solid #f5d79e88;
  border-radius:30px;
  background:#071b22d9;
  box-shadow:0 3px 12px #0009;
  font-size:11px;
  white-space:nowrap;
}
#hcDominoes .dm-host .dm-face {
  display:none;
}
#hcDominoes .dm-host small {
  display:inline;
  margin-left:5px;
}
#hcDominoes .dm-table {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  width:100%;
  height:43%;
  min-height:0;
  margin:0;
  padding:22px 14px 13px;
  border:0;
  border-top:8px solid #965628;
  border-radius:20px 20px 0 0;
  background:
    repeating-linear-gradient(177deg,
      transparent 0 26px,#27130a20 27px 28px,transparent 29px 66px),
    repeating-linear-gradient(91deg,
      #99572e 0 4px,#aa6336 8px 22px,
      #854323 29px 34px,#b87842 40px 57px);
  box-shadow:inset 0 12px 18px #2b130a8c,0 -8px 18px #0006;
}
#hcDominoes .dm-brand {
  top:18%;
  font-size:31px;
  color:#351506;
  opacity:.25;
}
#hcDominoes .dm-board {
  max-height:68%;
  padding:5px;
  border-radius:9px;
  background:#2d170b55;
  color:#fff6dc;
  font-weight:700;
  text-shadow:0 1px 3px #000;
}
#hcDominoes .dm-bubble {
  top:-85%;
  right:5%;
  border:2px solid #e8cead;
}
#hcDominoes .dm-ends {
  background:#241208d9;
  border:1px solid #e8bd7b88;
}
#hcDominoes .dm-bottom {
  position:relative;
  z-index:2;
  background:
    linear-gradient(180deg,#2c1b16,#0e2029 25%,#0b1b25);
  border-top:5px solid #9a5b2c;
}
#hcDominoes .dm-hand {
  max-width:650px;
  margin:auto;
  padding:12px 7px;
  border-bottom:7px solid #ad6833;
  border-radius:12px;
  background:linear-gradient(#74401d,#a46432);
}
#hcDominoes .dm-hand button.selected .dm-tile {
  transform:translateY(-6px);
}
#hcDominoes .dm-actions button:not(:disabled) {
  background:#0f694b;
  border-color:#dbbd79;
  font-weight:750;
}
@media (max-height:720px) {
  #hcDominoes .dm-stage {
    height:clamp(340px,51dvh,480px);
  }
  #hcDominoes .dm-host {
    bottom:45%;
  }
}

/* Raised ivory dominoes with drawn black pips. */
#hcDominoes .dm-tile {
  position:relative;
  border:1px solid #fff8e9;
  border-radius:8px;
  background:linear-gradient(145deg,#fffef4 0%,#f6eddb 50%,#d7c7a8 100%);
  box-shadow:
    inset 2px 2px 2px #ffffff,
    inset -2px -3px 3px #a39174,
    0 5px 0 #746554,
    2px 8px 6px #0008;
}
#hcDominoes .dm-tile::after {
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  top:2px;
  height:23%;
  border-radius:6px 6px 30% 30%;
  background:linear-gradient(#ffffff78,#ffffff00);
  pointer-events:none;
}
#hcDominoes .dm-tile span {
  background:transparent;
}
#hcDominoes .dm-tile span+span {
  border-left:2px solid #81715e;
  box-shadow:inset 1px 0 #ffffffa8;
}
#hcDominoes .dm-tile svg {
  display:block;
  width:100%;
  height:100%;
  filter:drop-shadow(0 1px 0 #ffffff);
}
#hcDominoes .dm-hand button:not(:disabled):active .dm-tile {
  transform:translateY(-5px);
}

/* Keep the opponent badge clear of the character's speech bubble. */
#hcDominoes .dm-host {
  top:12px;
  right:10px;
  bottom:auto;
  left:auto;
  transform:none;
  width:auto;
  max-width:48%;
  padding:6px 9px;
  border-radius:13px;
  white-space:normal;
  text-align:right;
  line-height:1.25;
  font-size:10px;
}
#hcDominoes .dm-host small {
  display:block;
  margin:3px 0 0;
}
@media (max-width:390px) {
  #hcDominoes .dm-host {
    max-width:51%;
    font-size:9px;
  }
}

/* Keep the played dominoes connected in one line. */
#hcDominoes .dm-table {
  overflow:hidden;
}
#hcDominoes .dm-board {
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:center;
  width:100%;
  max-width:100%;
  max-height:none;
  min-height:80px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:10px 8px 15px;
  gap:0;
  scrollbar-width:thin;
  scrollbar-color:#e2ae70 #482717;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  border:2px solid #5d311b;
  background:#3b1e1099;
}
#hcDominoes .dm-board .dm-tile {
  flex:none;
  margin:0;
  border-radius:4px;
}
#hcDominoes .dm-board .dm-tile + .dm-tile {
  margin-left:-1px;
}
#hcDominoes .dm-board .dm-tile span {
  width:22px;
  height:38px;
}

#hcDominoes .dm-board .dm-newest {
  position:relative;
  z-index:1;
  border-color:#ffdb75;
  box-shadow:0 0 0 3px #ffe07a,0 5px 0 #746554,0 0 16px #ffca55;
  animation:dmPlaceOne .45s ease-out;
}
@keyframes dmPlaceOne {
  from { transform:translateY(-16px) scale(1.12); opacity:.45; }
  to   { transform:translateY(0) scale(1); opacity:1; }
}

/* Opponent badge on the left, above the speech bubble. */
#hcDominoes .dm-host {
  top:12px;
  left:10px;
  right:auto;
  bottom:auto;
  transform:none;
  text-align:left;
  max-width:52%;
}
#hcDominoes .dm-host small {
  display:block;
  margin:3px 0 0;
}

/* Upright dominoes in the player's rack. Board tiles remain horizontal. */
#hcDominoes .dm-hand .dm-tile {
  display:flex;
  flex-direction:column;
  width:clamp(37px,10vw,48px);
  height:clamp(72px,19vw,92px);
}
#hcDominoes .dm-hand .dm-tile span {
  width:100%;
  height:50%;
}
#hcDominoes .dm-hand .dm-tile span+span {
  border-left:0;
  border-top:2px solid #81715e;
  box-shadow:inset 0 1px #ffffffa8;
}
#hcDominoes .dm-hand .dm-tile svg {
  width:100%;
  height:100%;
}
#hcDominoes .dm-hand {
  justify-content:flex-start;
  padding-left:10px;
  padding-right:10px;
}

/* Four matching arms around the opening double. */
#hcDominoes .dm-table {
  height:55%;
  padding:8px 8px 18px;
}
#hcDominoes .dm-cross {
  position:relative;
  z-index:1;
  width:100%;
  height:80%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  overflow:hidden;
}
#hcDominoes .dm-cross-row {
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
  align-items:center;
  gap:3px;
}
#hcDominoes .dm-arm {
  display:flex;
  align-items:center;
  min-width:0;
  min-height:40px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#c89a65 #3b1e10;
}
#hcDominoes .dm-arm-left {
  justify-content:flex-end;
  direction:rtl;
  flex-direction:row-reverse;
}
#hcDominoes .dm-arm-right {
  justify-content:flex-start;
}
#hcDominoes .dm-arm-top,
#hcDominoes .dm-arm-bottom {
  flex-direction:column;
  max-height:52px;
  min-height:0;
  min-width:54px;
}
#hcDominoes .dm-cross-center {
  display:grid;
  place-items:center;
  min-width:0;
  color:#fff2d2;
  text-align:center;
  font-size:9px;
  font-weight:bold;
}
#hcDominoes .dm-start { width:50px; }
#hcDominoes .dm-arm .dm-tile {
  flex:none;
  margin:0;
  border-radius:4px;
}
#hcDominoes .dm-arm .dm-tile span {
  width:20px;
  height:34px;
}
#hcDominoes .dm-arm-top .dm-tile,
#hcDominoes .dm-arm-bottom .dm-tile,
#hcDominoes .dm-cross-center .dm-tile {
  flex-direction:column;
  width:32px;
  height:44px;
}
#hcDominoes .dm-arm-top .dm-tile span,
#hcDominoes .dm-arm-bottom .dm-tile span,
#hcDominoes .dm-cross-center .dm-tile span {
  width:100%;
  height:50%;
}
#hcDominoes .dm-arm-top .dm-tile span+span,
#hcDominoes .dm-arm-bottom .dm-tile span+span,
#hcDominoes .dm-cross-center .dm-tile span+span {
  border-left:0;
  border-top:2px solid #81715e;
}
#hcDominoes .dm-ends {
  font-size:10px;
  margin-top:2px;
  white-space:nowrap;
}
#hcDominoes .dm-actions {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:560px;
  margin:9px auto 0;
}
#hcDominoes .dm-actions button {
  padding:8px 2px;
  font-size:12px;
}

/* Larger, connected tiles on the four-arm table. */
#hcDominoes .dm-table {
  height:calc(55% + 54px);
}
#hcDominoes .dm-cross {
  gap:0;
}
#hcDominoes .dm-cross-row {
  grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);
  gap:0;
}
#hcDominoes .dm-arm {
  gap:0;
  min-height:58px;
}
#hcDominoes .dm-arm-left {
  direction:ltr;
  flex-direction:row;
  justify-content:flex-end;
}
#hcDominoes .dm-arm-right {
  justify-content:flex-start;
}
#hcDominoes .dm-arm-top,
#hcDominoes .dm-arm-bottom {
  width:60px;
  max-height:115px;
  min-height:0;
}
#hcDominoes .dm-arm-top {
  justify-content:flex-end;
}
#hcDominoes .dm-arm-bottom {
  justify-content:flex-start;
}
#hcDominoes .dm-arm .dm-tile {
  margin:0;
}
#hcDominoes .dm-arm-left .dm-tile,
#hcDominoes .dm-arm-right .dm-tile {
  width:90px;
  height:58px;
}
#hcDominoes .dm-arm-left .dm-tile span,
#hcDominoes .dm-arm-right .dm-tile span {
  width:50%;
  height:100%;
}
#hcDominoes .dm-arm-top .dm-tile,
#hcDominoes .dm-arm-bottom .dm-tile,
#hcDominoes .dm-cross-center .dm-tile {
  width:60px;
  height:90px;
}
#hcDominoes .dm-arm-top .dm-tile span,
#hcDominoes .dm-arm-bottom .dm-tile span,
#hcDominoes .dm-cross-center .dm-tile span {
  width:100%;
  height:50%;
}
#hcDominoes .dm-cross-center {
  width:60px;
}

/* ============================================================
   Layout fix v10 — clean 40/60 split, no overlap, tiles fit.
   Appended last so it overrides the stacked earlier rules.
   ============================================================ */

/* The stage becomes just the character band (top ~40%), fixed height,
   no absolutely-positioned table inside it anymore. */
#hcDominoes .dm-stage{
  position:relative;
  height:min(40vh,320px);
  min-height:0;
  padding:0;
  overflow:hidden;
  background-image:url('/app/dominoes/dominoes-scene.png');
  background-repeat:no-repeat;
  background-size:cover;              /* fill the band, character centered */
  background-position:center 22%;     /* bias toward the face/bandana */
}

/* Opponent badge stays pinned top-left over the scene. */
#hcDominoes .dm-host{
  position:absolute; top:10px; left:10px; right:auto; bottom:auto;
  transform:none; max-width:60%; z-index:3;
}

/* The table is no longer absolute/overlapping — it flows BELOW the stage
   as a normal block filling the remaining space. */
#hcDominoes .dm-table{
  position:static !important;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:10px 8px 14px !important;
  border:0;
  border-top:8px solid #965628;
  border-radius:18px 18px 0 0;
  overflow:hidden;
}

/* The cross fills the table width and scales its tiles down to fit. */
#hcDominoes .dm-cross{
  width:100%;
  height:auto;
  overflow:hidden;
  gap:0;
}
#hcDominoes .dm-cross-row{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:0;
}

/* Arms: allow shrink, hide overflow (the whole layout is meant to fit). */
#hcDominoes .dm-arm{ min-height:0; overflow:hidden; gap:0; }
#hcDominoes .dm-arm-left{ justify-content:flex-end; }
#hcDominoes .dm-arm-right{ justify-content:flex-start; }
#hcDominoes .dm-arm-top,
#hcDominoes .dm-arm-bottom{ width:auto; max-height:none; }

/* Tiles scale with viewport width so a long chain fits on screen.
   Horizontal (left/right) arm tiles: */
#hcDominoes .dm-arm-left .dm-tile,
#hcDominoes .dm-arm-right .dm-tile{
  width:clamp(30px,8vw,64px);
  height:clamp(20px,5.3vw,42px);
}
/* Vertical (top/bottom/center) tiles: */
#hcDominoes .dm-arm-top .dm-tile,
#hcDominoes .dm-arm-bottom .dm-tile,
#hcDominoes .dm-cross-center .dm-tile{
  width:clamp(22px,5.3vw,42px);
  height:clamp(32px,8vw,64px);
}
#hcDominoes .dm-cross-center{ width:auto; }
#hcDominoes .dm-start{ width:auto; }

/* Short screens: give the board a bit more, character a bit less. */
@media (max-height:720px){
  #hcDominoes .dm-stage{ height:min(34vh,240px); }
}


/* ============================================================
   Layout v11 — three clean stacked zones, no overlap:
   character (top) . board (middle, own wood bg) . hand (bottom)
   ============================================================ */
#hcDominoes{ display:flex; flex-direction:column; }
#hcDominoes .dm-head{ flex:0 0 auto; }
#hcDominoes .dm-bottom{ flex:0 0 auto; }

#hcDominoes .dm-stage{
  flex:0 0 35%; position:relative; height:auto; min-height:0; padding:0; overflow:hidden;
  background-image:url('/app/dominoes/dominoes-scene.png');
  background-repeat:no-repeat; background-size:cover; background-position:center 30%;
}
#hcDominoes .dm-host{ position:absolute; top:10px; left:10px; right:auto; bottom:auto; transform:none; max-width:60%; z-index:3; }

#hcDominoes .dm-table{
  flex:1 1 auto; position:static !important; width:100%; height:auto !important; min-height:0 !important;
  margin:0 !important; padding:8px !important; border:0; border-top:6px solid #965628; border-radius:0;
  overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  background:repeating-linear-gradient(90deg,#8a4f2a 0 6px,#9c5c31 6px 26px,#7a4322 26px 32px,#a86a3b 32px 54px);
  box-shadow:inset 0 8px 14px #2b130a99;
}
#hcDominoes .dm-cross{ width:100%; height:100%; overflow:hidden; gap:0; display:flex; flex-direction:column; justify-content:center; align-items:center; }
#hcDominoes .dm-cross-row{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:0; width:100%; }
#hcDominoes .dm-arm{ min-height:0; overflow:hidden; gap:0; }
#hcDominoes .dm-arm-left{ justify-content:flex-end; }
#hcDominoes .dm-arm-right{ justify-content:flex-start; }
#hcDominoes .dm-arm-top,#hcDominoes .dm-arm-bottom{ width:auto; max-height:none; }
#hcDominoes .dm-arm-left .dm-tile,#hcDominoes .dm-arm-right .dm-tile{ width:clamp(28px,7vw,58px); height:clamp(18px,4.6vw,38px); }
#hcDominoes .dm-arm-top .dm-tile,#hcDominoes .dm-arm-bottom .dm-tile,#hcDominoes .dm-cross-center .dm-tile{ width:clamp(20px,4.6vw,38px); height:clamp(30px,7vw,58px); }
#hcDominoes .dm-cross-center,#hcDominoes .dm-start{ width:auto; }
#hcDominoes .dm-ends{ margin-top:6px; }


/* ============================================================
   Layout v12 — rebalance: give the board real space, bigger tiles.
   ============================================================ */
/* Character band smaller so the board gets room. */
#hcDominoes .dm-stage{ flex:0 0 28% !important; background-position:center 35%; }

/* Board zone gets the growth + a minimum height so the cross has room. */
#hcDominoes .dm-table{
  flex:1 1 auto !important;
  min-height:34vh !important;
  padding:10px 6px !important;
  overflow:auto !important;           /* scroll if a big cross needs it */
}

/* Cross can use the taller space; center it. */
#hcDominoes .dm-cross{
  height:100%;
  justify-content:center;
}

/* Bigger board tiles now that there's room. */
#hcDominoes .dm-arm-left .dm-tile,#hcDominoes .dm-arm-right .dm-tile{
  width:clamp(40px,11vw,74px) !important; height:clamp(24px,6vw,42px) !important;
}
#hcDominoes .dm-arm-top .dm-tile,#hcDominoes .dm-arm-bottom .dm-tile,
#hcDominoes .dm-cross-center .dm-tile{
  width:clamp(24px,6vw,42px) !important; height:clamp(40px,11vw,74px) !important;
}

/* The opening double laid HORIZONTAL (crossways), like real dominoes. */
#hcDominoes .dm-cross-center .dm-tile{
  flex-direction:row !important;
  width:clamp(52px,14vw,96px) !important;
  height:clamp(28px,7vw,50px) !important;
}
#hcDominoes .dm-cross-center .dm-tile span{
  width:50% !important; height:100% !important;
}
#hcDominoes .dm-cross-center .dm-tile span+span{
  border-left:2px solid #81715e !important; border-top:0 !important;
}

/* Show more of the opponent; leave the board's size alone. */
#hcDominoes .dm-stage {
  background-size:88% auto !important;
  background-position:center top !important;
  background-color:#442d1c;
}
#hcDominoes .dm-table { overflow:auto !important; }
#hcDominoes .dm-cross {
  position:relative !important;
  display:block !important;
  flex:none !important;
  overflow:visible !important;
  margin:auto;
}
#hcDominoes .dm-cross-row,
#hcDominoes .dm-cross-center,
#hcDominoes .dm-cross .dm-arm {
  display:contents !important;
}
#hcDominoes .dm-cross .dm-tile {
  position:absolute !important;
  display:flex !important;
  flex-direction:var(--dm-tile-flow,column) !important;
  width:var(--dm-tile-w,34px) !important;
  height:var(--dm-tile-h,56px) !important;
  box-sizing:border-box !important;
  margin:0 !important;
  transform:none;
}
#hcDominoes .dm-cross .dm-tile > span {
  width:50% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
}
#hcDominoes .dm-cross .dm-tile > span+span {
  border-left:2px solid #81715e !important;
  border-top:0 !important;
}
#hcDominoes .dm-cross .dm-tile.dm-board-vertical > span {
  width:100% !important;
  height:50% !important;
}
#hcDominoes .dm-cross .dm-tile.dm-board-vertical > span+span {
  border-left:0 !important;
  border-top:2px solid #81715e !important;
}
#hcDominoes .dm-cross .dm-start {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:120px;
}

/* Keep crowded rounds within the phone's width. */
#hcDominoes .dm-table {
  justify-content:flex-start !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
#hcDominoes .dm-cross {
  margin:0 auto !important;
}

/* Pointer placement: markers belong to the live chain, not the artwork. */
#hcDominoes .dm-hand button[data-tile]:not(:disabled) {touch-action:none;}
#hcDominoes .dm-drop-target {
  position:absolute; z-index:8; width:44px; height:44px;
  display:none; place-items:center; transform:translate(-50%,-50%);
  border-radius:50%; border:2px dashed #fff8d3;
  background:#0d664fbb; color:#fff; font:800 16px system-ui,sans-serif;
  pointer-events:none; box-shadow:0 0 0 4px #092c3088;
}
#hcDominoes.dm-dragging .dm-drop-target.dm-valid {display:grid;}
#hcDominoes.dm-dragging .dm-drop-target.dm-hover {
  background:#e7ba53; color:#163430; border-style:solid;
  box-shadow:0 0 0 9px #f2ca7399;
}
#hcDominoes .dm-drag-ghost {
  position:fixed !important; z-index:100030 !important;
  transform:translate(-50%,-65%) rotate(-5deg) !important;
  pointer-events:none; box-shadow:0 16px 35px #000a;
  width:48px; height:82px;
}

/* Domino Legends: art stays behind the seats; the playable surface is CSS. */
#hcDominoes .dm-stage {
  position:relative;
  isolation:isolate;
  background:#102f36 !important;
  background-image:none !important;
  overflow:hidden;
}
#hcDominoes .dm-stage::before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:48%;
  background:linear-gradient(180deg,rgba(8,28,34,.16),rgba(8,28,34,.45)),url('/app/dominoes/dominoes-courtyard.png') center 53% / cover no-repeat;
  pointer-events:none;
}
#hcDominoes .dm-host {
  display:flex;
  gap:7px;
  align-items:center;
  top:12px !important;
  left:12px !important;
  bottom:auto !important;
  right:auto !important;
  max-width:48%;
  padding:5px 9px;
  background:#0b2632eb;
  border:1px solid #eac484;
  border-radius:40px;
  box-shadow:0 5px 18px #061d2099;
  z-index:3;
}
#hcDominoes .dm-host .dm-face {
  display:grid !important;
  place-items:center;
  flex:none;
  width:31px;
  height:31px;
  margin:0;
  border:2px solid #edd08e;
  border-radius:50%;
  background:#735139;
  font-size:19px;
  overflow:hidden;
}
#hcDominoes .dm-seats {
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  display:flex;
  gap:5px;
}
#hcDominoes .dm-seat {
  display:flex;
  align-items:center;
  gap:5px;
  background:#0b2632e0;
  color:#f8e7c7;
  padding:5px 7px;
  border:1px solid #dcc18b;
  border-radius:30px;
  font:600 10px/1.1 system-ui,sans-serif;
}
#hcDominoes .dm-seat-avatar {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#365863;
  font-size:16px;
}
#hcDominoes .dm-table {
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  height:calc(55% + 54px);
  box-sizing:border-box;
  border:7px solid #a9693a;
  border-bottom:0;
  border-radius:24px 24px 0 0;
  background:radial-gradient(ellipse at 50% 42%,#24645f 0%,#154d4b 54%,#103b3b 100%) !important;
  box-shadow:inset 0 0 0 3px #d49b5d,inset 0 0 35px #071d2588,0 -10px 20px #001d2280;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
#hcDominoes .dm-table::before {
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid #ffffff24;
  border-radius:14px;
  pointer-events:none;
}
#hcDominoes .dm-cross {
  margin:0 auto !important;
}
#hcDominoes .dm-brand {
  opacity:.09;
  color:#fff;
}
#hcDominoes .dm-ends {
  position:sticky;
  bottom:0;
  z-index:2;
  width:max-content;
  max-width:95%;
  margin:2px auto 0;
  padding:5px 9px;
  border:1px solid #d2b078;
  background:#0a2a2de6;
  border-radius:20px;
  color:#f9e9c3;
}
#hcDominoes .dm-stage > .dm-bubble {
  position:absolute !important;
  z-index:4;
  top:61px !important;
  left:12px !important;
  right:auto !important;
  bottom:auto !important;
  width:max-content;
  max-width:55%;
  padding:7px 10px;
  border:1px solid #efd9a2;
  border-radius:13px;
  background:#fff9e9;
  color:#263136;
  font:600 12px/1.3 system-ui,sans-serif;
  box-shadow:0 5px 14px #001d1a60;
}
#hcDominoes .dm-stage > .dm-bubble[hidden] { display:none !important; }
@media(max-width:390px) {
  #hcDominoes .dm-seat-label { display:none; }
  #hcDominoes .dm-host {max-width:53%;}
}

/* Rounded poker table and real player portraits. */
#hcDominoes .dm-table {
  left:5px !important; right:5px !important; width:auto !important;
  border:10px solid #9e592e !important;
  border-bottom:10px solid #5f301e !important;
  border-radius:75px / 38px !important;
  box-shadow:0 9px 0 #522b1f,inset 0 0 0 4px #ce995c,
             inset 0 0 26px #061d2699,0 -9px 20px #001d2280 !important;
  overflow-x:auto !important; overflow-y:auto !important;
  scrollbar-width:thin;
}
#hcDominoes .dm-table::before { border-radius:63px / 27px; }
#hcDominoes .dm-host .dm-face { overflow:hidden; }
#hcDominoes .dm-host .dm-face img,
#hcDominoes .dm-you-avatar img {
  display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
}
#hcDominoes .dm-you-seat {
  display:flex;align-items:center;justify-content:center;gap:9px;
}
#hcDominoes .dm-you-avatar {
  display:grid;place-items:center;flex:none;width:40px;height:40px;
  overflow:hidden;border:2px solid #efcc87;border-radius:50%;
  background:#235467;color:#fff;font-size:21px;
}
#hcDominoes .dm-cross {margin:0 auto !important;}

/* Visible rounded poker table */
#hcDominoes .dm-stage::before {
  height:40% !important;
}
#hcDominoes .dm-table {
  top:38% !important;
  bottom:12px !important;
  left:12px !important;
  right:12px !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  border:11px solid #a96839 !important;
  border-radius:50% / 17% !important;
  box-shadow:
    0 7px 0 #522b1f,
    inset 0 0 0 4px #d4a36a,
    inset 0 0 28px #061d2699,
    0 -5px 16px #001d2280 !important;
}
#hcDominoes .dm-table::before {
  border-radius:50% / 14% !important;
}
/* Definitive table layout. Supersedes the older static-table experiments. */
#hcDominoes {display:flex !important;flex-direction:column !important;overflow-y:auto !important;background:#0d222b !important;}
#hcDominoes .dm-head {flex:0 0 auto !important;z-index:5;}
#hcDominoes .dm-stage {
  position:relative !important;display:block !important;flex:0 0 auto !important;
  height:clamp(420px,58dvh,620px) !important;min-height:0 !important;
  width:100%;padding:0 !important;overflow:hidden !important;
  background:#102f36 !important;background-image:none !important;
}
#hcDominoes .dm-stage::before {
  content:'';position:absolute;inset:0 0 auto;height:46% !important;
  background:linear-gradient(180deg,#081c2229,#081c2273),url('/app/dominoes/dominoes-courtyard.png') center 52% / cover no-repeat;
  pointer-events:none;
}
#hcDominoes .dm-host {position:absolute !important;top:10px !important;left:10px !important;right:auto !important;bottom:auto !important;transform:none !important;z-index:4;}
#hcDominoes .dm-seats {position:absolute;top:10px;right:10px;z-index:4;}
#hcDominoes .dm-table {
  position:absolute !important;display:block !important;flex:none !important;
  top:max(100px,18%) !important;bottom:8px !important;left:10px !important;right:10px !important;
  width:auto !important;height:auto !important;min-height:0 !important;
  margin:0 !important;padding:14px 14px 30px !important;
  border:11px solid #a96839 !important;border-radius:50% / 18% !important;
  background:radial-gradient(ellipse at 50% 42%,#286e68 0%,#16504c 56%,#0d3939 100%) !important;
  box-shadow:0 8px 0 #512a1b,inset 0 0 0 3px #d4a36a,inset 0 0 34px #061d2699,0 -7px 22px #001d2280 !important;
  overflow:auto !important;scrollbar-width:thin;
}
#hcDominoes .dm-table::before {inset:10px;border-radius:50% / 16% !important;}
#hcDominoes .dm-cross {
  position:relative !important;display:block !important;flex:none !important;
  width:100%;height:100%;min-height:170px;
  margin:0 auto !important;overflow:visible !important;
}
#hcDominoes .dm-cross-row,#hcDominoes .dm-cross-center,#hcDominoes .dm-cross .dm-arm {display:contents !important;}
#hcDominoes .dm-cross .dm-start {
  position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
  z-index:2;width:155px;max-width:70%;padding:8px;
  border-radius:9px;background:#092d32ce;color:#fff0cc;text-align:center;
}
#hcDominoes .dm-cross .dm-tile {
  position:absolute !important;display:flex !important;
  flex-direction:var(--dm-tile-flow,column) !important;
  width:var(--dm-tile-w,34px) !important;height:var(--dm-tile-h,56px) !important;
  margin:0 !important;box-sizing:border-box !important;
}
#hcDominoes .dm-ends {
  position:sticky;bottom:0;z-index:3;display:table;
  margin:-25px auto 0 !important;white-space:nowrap;
}
#hcDominoes .dm-bubble {z-index:6;}
#hcDominoes .dm-bottom {flex:0 0 auto !important;position:relative;z-index:2;}
@media(max-height:720px) {
  #hcDominoes .dm-stage {height:clamp(390px,56dvh,500px) !important;}
}

/* The opponent's concealed hand sits between the name and the felt. */
#hcDominoes .dm-master-rack {
  position:absolute;z-index:5;top:calc(max(100px,18%) - 39px);
  left:50%;transform:translateX(-50%);display:flex;align-items:end;justify-content:center;
  gap:2px;height:37px;white-space:nowrap;pointer-events:none;
}
#hcDominoes .dm-back {
  display:block;flex:none;width:24px;height:36px;border:2px solid #e9d2a0;
  border-radius:4px;background:repeating-linear-gradient(45deg,#163c48 0 3px,#2a6170 3px 6px);
  box-shadow:0 2px 2px #071c2299,inset 0 0 0 2px #234a56;
}
#hcDominoes .dm-back::after {
  content:'✦';display:grid;place-items:center;width:100%;height:100%;
  color:#e7c889;font:700 13px/1 system-ui,sans-serif;
}

/* Open ends belong with the controls, never over playable tiles. */
#hcDominoes .dm-bottom .dm-ends {
  position:static !important;display:table !important;z-index:auto !important;
  width:max-content;max-width:100%;margin:4px auto 8px !important;
  white-space:normal;text-align:center;
}
@media(max-width:600px){#hcDominoes .dm-sound-label {display:none;}}

@media(max-width:600px) {
  #hcDominoes .dm-head {gap:5px;padding-left:8px;padding-right:8px;}
  #hcDominoes .dm-head strong {font-size:clamp(13px,4.2vw,19px);white-space:nowrap;}
  #hcDominoes .dm-head button {padding:8px 9px;white-space:nowrap;}
}

/* Solo rank page: placed above play controls and the round-end dialog. */
#hcDominoes .dm-rank-page {position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background:#0c212a;color:#fff;font-family:system-ui,-apple-system,sans-serif;}
#hcDominoes .dm-rank-page header {flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 18px 12px;background:#102e39;border-bottom:2px solid #d0a663;color:#f6d998;font-size:12px;letter-spacing:.15em;font-weight:800;}
#hcDominoes .dm-rank-page header button {font-size:13px;border:1px solid #bf9b67;background:#173b49;padding:9px 12px;color:#fff;}
#hcDominoes .dm-rank-scroll {overflow-y:auto;flex:1;padding:24px max(18px,env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom));width:100%;max-width:680px;margin:auto;}
#hcDominoes .dm-rank-intro>span {font-size:11px;letter-spacing:.2em;color:#f0c670;font-weight:800;}
#hcDominoes .dm-rank-intro h2 {font-size:clamp(25px,7vw,34px);margin:8px 0;}
#hcDominoes .dm-rank-intro p,#hcDominoes .dm-rank-note {font-size:13px;color:#c0d3d7;line-height:1.5;}
#hcDominoes .dm-rank-hero {display:flex;align-items:center;gap:16px;margin-top:23px;padding:22px 18px;background:linear-gradient(135deg,#245c59,#102e3a);border:2px solid #cfa259;border-radius:20px;box-shadow:0 12px 27px #0005;}
#hcDominoes .dm-rank-emblem {width:72px;height:72px;display:grid;place-items:center;border-radius:50%;border:3px solid #e9c574;background:#0d3442;font-size:35px;flex:none;}
#hcDominoes .dm-rank-hero small {letter-spacing:.13em;font-size:10px;color:#ffde99;font-weight:800;}
#hcDominoes .dm-rank-hero h3 {font-size:22px;margin:4px 0;}
#hcDominoes .dm-rank-hero p {font-size:12px;color:#d0e5e5;margin:0;line-height:1.5;}
#hcDominoes .dm-rank-track {height:9px;background:#31505b;border-radius:10px;overflow:hidden;margin:14px 4px 25px;}
#hcDominoes .dm-rank-track span {height:100%;display:block;background:linear-gradient(90deg,#daac59,#ffe09c);border-radius:inherit;}
#hcDominoes .dm-rank-stats {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
#hcDominoes .dm-rank-stats div {padding:13px 6px;text-align:center;background:#183b47;border:1px solid #507079;border-radius:13px;}
#hcDominoes .dm-rank-stats b {display:block;font-size:19px;color:#ffe09d;}
#hcDominoes .dm-rank-stats small {display:block;color:#c9d8d9;font-size:10px;margin-top:4px;}
#hcDominoes .dm-rank-heading {margin:29px 0 13px;font-size:20px;}
#hcDominoes .dm-achievements {margin:0;padding:0;list-style:none;display:grid;gap:9px;}
#hcDominoes .dm-achievement {display:flex;align-items:center;gap:12px;padding:12px;background:#163543;border:1px solid #456672;border-radius:14px;}
#hcDominoes .dm-achievement.earned {border-color:#e7bc75;background:#214c4c;}
#hcDominoes .dm-achievement-icon {display:grid;place-items:center;flex:none;width:41px;height:41px;border-radius:50%;background:#0d2935;font-size:22px;}
#hcDominoes .dm-achievement>div {flex:1;min-width:0;}
#hcDominoes .dm-achievement strong,#hcDominoes .dm-achievement small {display:block;}
#hcDominoes .dm-achievement strong {font-size:14px;}
#hcDominoes .dm-achievement small,#hcDominoes .dm-achievement-meter {font-size:11px;color:#c3d3d5;}
#hcDominoes .dm-achievement>b {font-size:11px;color:#f0cd85;text-align:right;}
#hcDominoes .dm-rank-note {margin-top:25px;text-align:center;}
#hcDominoes .dm-head strong {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#hcDominoes .dm-head button[data-do="music"] {color:#ffde98;}
@media(max-width:390px) {#hcDominoes .dm-head button {font-size:13px;padding:7px 6px;}#hcDominoes .dm-head strong {font-size:13px;}#hcDominoes .dm-rank-stats {gap:4px;}#hcDominoes .dm-achievement {gap:7px;}}

/* HC DOMINO REAL BACKS 2026 */
#hcDominoes .dm-back{
  position:relative;
  display:inline-block;
  border-radius:7px;
  border:1px solid #f5ead2;
  background:
    linear-gradient(145deg,#fffdf6 0%,#f4ead7 45%,#dcc8a6 100%);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -2px 0 #a9916c,
    0 4px 0 #7d6140,
    0 7px 10px rgba(0,0,0,.28);
  overflow:hidden;
}

#hcDominoes .dm-back::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:5px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0) 34%),
    linear-gradient(145deg,#fffef9 0%,#f8f0de 48%,#e2cfad 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120,84,42,.18);
}

#hcDominoes .dm-back::after{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  bottom:8px;
  width:2px;
  transform:translateX(-50%);
  border-radius:2px;
  background:linear-gradient(180deg,#b69163 0%,#8f6d49 100%);
  opacity:.65;
}


/* ============================================================
   HC SHORT LAPTOP RESPONSIVE — v29
   Lower and shorten the playable table without clipping rack.
   ============================================================ */
@media
  (min-width:769px)
  and (max-width:1700px)
  and (max-height:950px){

  #hcDominoes .dm-stage{
    height:clamp(
      350px,
      46dvh,
      405px
    ) !important;
  }

  #hcDominoes .dm-table{
    top:max(132px,30%) !important;
    bottom:8px !important;
  }

  #hcDominoes .dm-master-rack{
    top:calc(max(132px,30%) - 39px) !important;
  }
}
/* END HC SHORT LAPTOP RESPONSIVE — v29 */