:root {
  --yd-bg: #080610;
  --yd-panel: #120a22;
  --yd-panel-2: #21103d;
  --yd-violet: #9b42ff;
  --yd-violet-hot: #c04cff;
  --yd-gold: #f8c858;
  --yd-ivory: #fff4dc;
  --yd-danger: #ff5d77;
  --yd-success: #63ef9c;
  --yd-text: #f7f1ff;
}

* { box-sizing: border-box; }

.yd-game-shell {
  min-height: 100%;
  color: var(--yd-text);
  background:
    radial-gradient(circle at 50% 15%, rgba(132, 55, 220, .22), transparent 34%),
    linear-gradient(160deg, #080610, #10081d 52%, #07050c);
  padding: clamp(10px, 2vw, 24px);
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.yd-header { display: grid; gap: 10px; justify-items: center; }
.yd-header > img { width: min(480px, 74vw); max-height: 92px; object-fit: contain; }

.yd-score-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(920px, 100%);
}

.yd-player-score {
  min-width: 150px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid rgba(190, 95, 255, .45);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(40, 18, 70, .95), rgba(13, 8, 24, .94));
  box-shadow: inset 0 0 16px rgba(159, 58, 255, .1);
}
.yd-player-score.is-active { border-color: var(--yd-gold); box-shadow: 0 0 18px rgba(248, 200, 88, .26), inset 0 0 16px rgba(159, 58, 255, .16); }
.yd-player-score strong { font-size: .85rem; }
.yd-player-score span { grid-row: span 2; font-size: 1.7rem; color: var(--yd-gold); font-weight: 800; }
.yd-player-score small { opacity: .72; }

.yd-status {
  min-width: 240px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--yd-gold);
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(248, 200, 88, .55);
  background: rgba(20, 9, 34, .85);
}

.yd-board {
  position: relative;
  max-width: 100%;
  margin: 12px auto;
  overflow: hidden;
  border-radius: 28px;
  isolation: isolate;
}
.yd-table-asset, .yd-table-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.yd-table-asset { object-fit: contain; pointer-events: none; }
.yd-table-fallback {
  inset: 3%;
  border-radius: 34% / 20%;
  background:
    radial-gradient(ellipse at center, rgba(55, 16, 82, .58), rgba(10, 6, 18, .96) 70%),
    linear-gradient(160deg, #291049, #0d0718);
  border: clamp(4px, .8vw, 10px) solid #5a218e;
  box-shadow:
    0 0 0 3px rgba(248, 200, 88, .8),
    0 0 32px rgba(142, 52, 234, .48),
    inset 0 0 80px rgba(0, 0, 0, .7);
}
.yd-table-fallback::after {
  content: "Y";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(248, 200, 88, .06);
  font: 900 clamp(6rem, 18vw, 13rem)/1 system-ui;
}
.yd-chain-layer { position: absolute; inset: 8% 10%; }
.yd-placed-tile { position: absolute; width: 54px; height: 104px; transform-origin: center; }

.yd-domino {
  position: relative;
  width: 54px;
  height: 104px;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
  cursor: default;
  transition: filter .16s ease, translate .16s ease, scale .16s ease;
  transform-origin: center;
}
.yd-domino:enabled { cursor: pointer; }
.yd-domino.is-compact { width: 42px; height: 80px; }
.yd-domino-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.yd-domino-pips { position: absolute; inset: 7% 12%; display: grid; grid-template-rows: 1fr 1fr; gap: 7%; }
.yd-domino-half { position: relative; }
.yd-pip {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffdf2, #eadab8 56%, #8b713f 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,255,255,.8);
  translate: -50% -50%;
}
.yd-pip-tl { left: 23%; top: 22%; } .yd-pip-tr { left: 77%; top: 22%; }
.yd-pip-ml { left: 23%; top: 50%; } .yd-pip-mr { left: 77%; top: 50%; }
.yd-pip-bl { left: 23%; top: 78%; } .yd-pip-br { left: 77%; top: 78%; }
.yd-pip-c { left: 50%; top: 50%; }
.yd-domino.is-playable { filter: drop-shadow(0 0 7px #9b42ff) drop-shadow(0 0 14px rgba(155,66,255,.75)); }
.yd-domino.is-playable:hover { translate: 0 -7px; }
.yd-domino.is-selected { filter: drop-shadow(0 0 7px #f8c858) drop-shadow(0 0 17px rgba(248,200,88,.9)); translate: 0 -9px; }
.yd-domino.is-disabled { filter: grayscale(.45) brightness(.62); opacity: .8; }

.yd-open-end {
  position: absolute;
  top: 50%;
  width: 38px;
  aspect-ratio: 1;
  translate: 0 -50%;
  border: 1px solid var(--yd-gold);
  border-radius: 50%;
  color: var(--yd-ivory);
  background: rgba(25, 8, 44, .9);
  box-shadow: 0 0 16px rgba(155, 66, 255, .8);
  z-index: 90;
}
.yd-open-left { left: 4%; } .yd-open-right { right: 4%; }
.yd-open-end:disabled { opacity: .72; cursor: default; }
.yd-open-end.is-choice {
  opacity: 1;
  cursor: pointer;
  color: #160921;
  background: var(--yd-gold);
  box-shadow: 0 0 0 4px rgba(248,200,88,.16), 0 0 24px rgba(248,200,88,.8);
  animation: yd-end-choice-pulse .9s ease-in-out infinite alternate;
}
@keyframes yd-end-choice-pulse { from { scale: 1; } to { scale: 1.12; } }

.yd-boneyard {
  position: absolute;
  right: 5%;
  bottom: 9%;
  display: grid;
  justify-items: center;
  z-index: 80;
  color: var(--yd-gold);
  font-weight: 900;
}
.yd-boneyard img { width: 72px; max-height: 78px; object-fit: contain; }

.yd-hand {
  width: min(100%, 840px);
  min-height: 124px;
  margin: -10px auto 6px;
  padding: 14px 18px 10px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(1px, .35vw, 5px);
  overflow-x: auto;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(38, 15, 65, .84), rgba(8, 5, 14, .94));
  border: 1px solid rgba(248, 200, 88, .52);
  box-shadow: inset 0 0 25px rgba(155, 66, 255, .18), 0 10px 28px rgba(0,0,0,.4);
}

.yd-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.yd-actions button {
  border: 1px solid rgba(248, 200, 88, .62);
  border-radius: 11px;
  color: var(--yd-ivory);
  font-weight: 900;
  letter-spacing: .04em;
  padding: 10px 18px;
  background: linear-gradient(180deg, #2e1450, #120922);
  box-shadow: inset 0 0 13px rgba(155,66,255,.22);
}
.yd-actions button:disabled { opacity: .35; }
.yd-actions button:not(:disabled):hover { border-color: var(--yd-gold); filter: brightness(1.18); }

@media (max-width: 760px) {
  .yd-game-shell { padding: 6px; }
  .yd-header > img { width: min(330px, 88vw); }
  .yd-player-score { min-width: 132px; padding: 6px 10px; }
  .yd-board { width: 100% !important; height: min(44dvh, 380px) !important; margin-top: 7px; }
  .yd-chain-layer { inset: 9% 8%; }
  .yd-hand { min-height: 104px; justify-content: flex-start; padding-inline: 10px; }
  .yd-hand .yd-domino { width: 45px; height: 87px; }
  .yd-actions button { flex: 1 1 110px; padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .yd-domino { transition: none; }
}

/* v0.6.1 — compact portrait controls rescue.
   On short phones the board consumed the first viewport and left the hand and
   action buttons below the fold, which looked like a frozen game. */
@media (max-width:760px) and (max-height:700px){
  .yd-game-shell{
    min-height:100dvh;
    padding:4px 6px calc(8px + env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
  }
  .yd-header{gap:4px}
  .yd-header>img{width:min(260px,72vw);max-height:52px}
  .yd-score-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .yd-player-score{min-width:0;padding:4px 8px;border-radius:9px}
  .yd-player-score strong{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .yd-player-score span{font-size:1.25rem}
  .yd-player-score small{font-size:.65rem}
  .yd-status{min-width:0;width:min(240px,82vw);padding:5px 10px;font-size:.78rem}
  .yd-board{height:min(34dvh,220px)!important;margin:4px auto!important;border-radius:19px}
  .yd-chain-layer{inset:7% 7%}
  .yd-placed-tile{width:44px;height:84px}
  .yd-boneyard{bottom:5%}
  .yd-boneyard img{width:54px;max-height:56px}
  .yd-hand{
    min-height:88px;
    max-height:96px;
    margin:0 auto 4px;
    padding:7px 8px 5px;
    border-radius:16px;
    scroll-padding-inline:8px;
  }
  .yd-hand .yd-domino{width:40px;height:77px}
  .yd-actions{
    position:sticky;
    z-index:110;
    bottom:0;
    padding:5px 0 max(3px,env(safe-area-inset-bottom));
    background:linear-gradient(180deg,transparent,#080610 15px);
  }
  .yd-actions button{min-height:40px;padding:8px 10px}
}
@media (max-width:390px) and (max-height:610px){
  .yd-header>img{max-height:45px}
  .yd-board{height:min(31dvh,180px)!important}
  .yd-hand{min-height:82px;max-height:88px}
  .yd-hand .yd-domino{width:37px;height:72px}
}

/* v0.6.1 compact-screen follow-up: keep the action row inside the first
   portrait viewport after the initial control-rescue pass. */
@media (max-width:760px) and (max-height:700px){
  .yd-board{height:min(29dvh,185px)!important}
  .yd-hand{min-height:78px;max-height:82px}
  .yd-hand .yd-domino{width:36px;height:69px}
}
@media (max-width:390px) and (max-height:610px){
  .yd-board{height:min(27dvh,150px)!important}
  .yd-hand{min-height:74px;max-height:78px}
  .yd-hand .yd-domino{width:34px;height:65px}
}

@media (max-width:760px) and (max-height:700px){
  .yd-board{min-height:0!important}
}


/* v0.6.3 — connected chain rescue.
   Layout coordinates now represent tile centers; neighboring pieces meet at
   their real rotated edges, including doubles and serpentine turns. */
.yd-chain-layer{overflow:visible}
.yd-placed-tile{will-change:transform}
@media(max-width:760px){
  .yd-open-left{left:2%}
  .yd-open-right{right:2%}
}

/* v0.6.3 — four-seat portrait fit. Keep the complete table, rack and action
   row reachable in the first phone viewport without changing two-seat scale. */
@media(max-width:760px){
  .yd-board{min-height:0!important}
  html[data-players="4"] .yd-header>img{max-height:70px}
  html[data-players="4"] .yd-board{height:min(31dvh,280px)!important}
  html[data-players="4"] .yd-hand{min-height:96px}
}
@media(max-width:760px) and (max-height:700px){
  html[data-players="4"] .yd-header>img{max-height:44px}
  html[data-players="4"] .yd-board{height:min(24dvh,150px)!important}
}