/* ルドー固有スタイル */

.game-panel {
  margin-top: 20px;
}

.ld-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 auto 14px;
  padding: 12px 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
}

.ld-status__text {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: 0.95rem;
  font-weight: 600;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--md-sys-color-primary) 14%, var(--md-sys-color-surface));
  color: var(--md-sys-color-on-surface);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.status-pill.is-player {
  background: color-mix(in srgb, #22d3ee 22%, var(--md-sys-color-surface));
  color: #0e7490;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.28);
}

.status-pill.is-cpu {
  background: color-mix(in srgb, #e879f9 20%, var(--md-sys-color-surface));
  color: #a21caf;
}

.status-pill.is-win {
  background: color-mix(in srgb, var(--success, #16a34a) 18%, var(--md-sys-color-surface));
  color: var(--success, #15803d);
}

.status-pill.is-lose {
  background: color-mix(in srgb, #ef4444 16%, var(--md-sys-color-surface));
  color: #b91c1c;
}

.ld-result {
  margin: 0 auto 14px;
  padding: 14px 16px;
  border: 1px solid rgba(63, 196, 255, 0.35);
  border-radius: var(--md-sys-shape-corner-medium);
  background:
    radial-gradient(ellipse 80% 120% at 10% 0%, rgba(63, 196, 255, 0.12), transparent 55%),
    #0f1a34;
  text-align: center;
  animation: ld-pop 0.35s ease-out;
}

.ld-result.is-win {
  border-color: rgba(63, 196, 255, 0.55);
  box-shadow: 0 0 20px rgba(63, 196, 255, 0.22);
}

.ld-result.is-lose {
  border-color: rgba(232, 121, 249, 0.4);
}

.ld-result__title {
  margin: 0 0 4px;
  color: #e8f4ff;
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

.ld-result.is-win .ld-result__title {
  color: #7ee0ff;
  text-shadow: 0 0 14px rgba(63, 196, 255, 0.45);
}

.ld-result__detail {
  margin: 0 0 12px;
  color: rgba(220, 236, 255, 0.9);
  font-size: 0.92rem;
  line-height: 1.5;
}

.ld-result__actions {
  display: flex;
  justify-content: center;
}

@keyframes ld-pop {
  0% { transform: translateY(-6px) scale(0.98); opacity: 0.4; }
  100% { transform: none; opacity: 1; }
}

/* ゲームエリア */
.ld-stage {
  --ld-player: #22d3ee;
  --ld-player-deep: #0891b2;
  --ld-player-dark: #083344;
  --ld-cpu: #e879f9;
  --ld-cpu-deep: #c026d3;
  --ld-cpu-dark: #4a044e;
  --ld-neon: #3fc4ff;

  width: 100%;
  max-width: min(100%, 640px);
  margin: 0 auto 14px;
  padding: clamp(8px, 2.4vw, 18px);
  border: 1px solid rgba(96, 154, 214, 0.35);
  border-radius: var(--md-sys-shape-corner-large);
  background:
    radial-gradient(ellipse 70% 40% at 20% 100%, rgba(34, 211, 238, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 40% at 80% 0%, rgba(232, 121, 249, 0.12), transparent 55%),
    #0d1730;
  box-shadow: 0 14px 34px rgba(28, 52, 96, 0.24);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ld-hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(6px, 1.6vw, 12px);
  margin-bottom: 8px;
}

.ld-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid rgba(96, 154, 214, 0.3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: rgba(10, 19, 40, 0.6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ld-score__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d7e8ff;
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
}

.ld-score__mark {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.ld-score--player .ld-score__mark {
  border-radius: 50%;
  background: var(--ld-player-deep);
}

.ld-score--cpu .ld-score__mark {
  border-radius: 3px;
  background: var(--ld-cpu-deep);
}

.ld-score__value {
  color: rgba(190, 214, 245, 0.9);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ld-stage.is-player-turn .ld-score--player {
  border-color: rgba(34, 211, 238, 0.7);
  background: rgba(34, 211, 238, 0.1);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.22);
}

.ld-stage.is-cpu-turn .ld-score--cpu {
  border-color: rgba(232, 121, 249, 0.7);
  background: rgba(232, 121, 249, 0.1);
  box-shadow: 0 0 14px rgba(232, 121, 249, 0.22);
}

.ld-dice {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ld-dice__text {
  color: rgba(190, 214, 245, 0.9);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.ld-dice__text strong {
  color: #eaf5ff;
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
}

.ld-roll {
  min-height: 44px;
  white-space: nowrap;
}

/* サイコロ（CSSで目を表現） */
.ld-die {
  --dot: #1a2744;
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(44px, 10vw, 56px);
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(180, 220, 255, 0.6);
  border-radius: 22%;
  background: linear-gradient(145deg, #f4fbff 0%, #d7ecfb 55%, #c4dff4 100%);
  box-shadow:
    0 0 12px rgba(63, 196, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.ld-die.is-blank {
  border-color: rgba(140, 180, 220, 0.35);
  background: linear-gradient(145deg, rgba(200, 220, 240, 0.28), rgba(140, 170, 200, 0.2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ld-die.is-rolling {
  animation: ld-die-roll 0.45s ease-in-out;
}

@keyframes ld-die-roll {
  0% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-16deg) scale(0.9) translateY(-4px); }
  65% { transform: rotate(12deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

.ld-die::before {
  content: "";
  position: absolute;
  inset: 17%;
  background-image: radial-gradient(circle, var(--dot) 45%, transparent 48%);
  background-repeat: no-repeat;
  background-size: 30% 30%;
  opacity: 0;
}

.ld-die[data-value="1"]::before {
  opacity: 1;
  background-position: center center;
}

.ld-die[data-value="2"]::before {
  opacity: 1;
  background-position: left top, right bottom;
  background-image:
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%);
}

.ld-die[data-value="3"]::before {
  opacity: 1;
  background-position: left top, center center, right bottom;
  background-image:
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%);
}

.ld-die[data-value="4"]::before {
  opacity: 1;
  background-position: left top, right top, left bottom, right bottom;
  background-image:
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%);
}

.ld-die[data-value="5"]::before {
  opacity: 1;
  background-position: left top, right top, center center, left bottom, right bottom;
  background-image:
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%);
}

.ld-die[data-value="6"]::before {
  opacity: 1;
  background-position: left top, right top, left center, right center, left bottom, right bottom;
  background-image:
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%),
    radial-gradient(circle, var(--dot) 45%, transparent 48%);
}

.ld-message {
  min-height: 1.5em;
  margin: 0 0 8px;
  color: rgba(190, 214, 245, 0.85);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.ld-message.is-capture {
  color: #fbcfe8;
  text-shadow: 0 0 10px rgba(244, 114, 182, 0.45);
  animation: ld-fade 0.25s ease-out;
}

.ld-message.is-goal,
.ld-message.is-bonus {
  color: #a5f3fc;
  text-shadow: 0 0 10px rgba(63, 196, 255, 0.4);
  animation: ld-fade 0.25s ease-out;
}

@keyframes ld-fade {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}

/* 盤面 */
.ld-board-wrap {
  width: 100%;
  max-width: min(100%, 560px);
  margin: 0 auto;
}

.ld-board {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: repeat(15, minmax(0, 1fr));
  gap: clamp(1px, 0.3vw, 2px);
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: clamp(3px, 0.8vw, 6px);
  border: 2px solid rgba(63, 196, 255, 0.45);
  border-radius: clamp(8px, 2vw, 14px);
  background: #0a1530;
  box-shadow: 0 0 18px rgba(63, 196, 255, 0.14);
}

.ld-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-radius: 2px;
  background: #e6eef9;
}

.ld-cell.is-safe::after {
  content: "★";
  color: #7b8aa6;
  font-size: clamp(0.55rem, 2.4vw, 1rem);
  line-height: 1;
}

.ld-cell.is-start.is-player,
.ld-cell.is-lane.is-player {
  background: #9eeefb;
}

.ld-cell.is-start.is-cpu,
.ld-cell.is-lane.is-cpu {
  background: #f5c6fd;
}

.ld-cell.is-start.is-neutral,
.ld-cell.is-lane.is-neutral {
  background: #c9d3e5;
}

.ld-cell.is-start.is-player::after { color: var(--ld-player-dark); }
.ld-cell.is-start.is-cpu::after { color: var(--ld-cpu-dark); }

.ld-cell.is-target {
  outline: 2px dashed #0e7490;
  outline-offset: -3px;
  background: #d4f7fd;
}

.ld-cell.is-capture {
  animation: ld-capture 0.7s ease-out;
}

@keyframes ld-capture {
  0% { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.9); background: #fbcfe8; }
  100% { box-shadow: 0 0 0 10px rgba(244, 114, 182, 0); }
}

/* ホーム（四隅） */
.ld-yard {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-radius: clamp(6px, 1.6vw, 10px);
  transition: box-shadow 0.2s ease;
}

.ld-yard--player {
  border: 2px solid rgba(34, 211, 238, 0.65);
  background: linear-gradient(145deg, #0f5263 0%, #0b3645 100%);
}

.ld-yard--cpu {
  border: 2px solid rgba(232, 121, 249, 0.6);
  background: linear-gradient(145deg, #5a1a66 0%, #3b0f45 100%);
}

.ld-yard--neutral {
  border: 1px solid rgba(120, 150, 200, 0.3);
  background: #18244a;
}

.ld-stage.is-player-turn .ld-yard--player {
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
}

.ld-stage.is-cpu-turn .ld-yard--cpu {
  box-shadow: 0 0 16px rgba(232, 121, 249, 0.35);
}

.ld-yard__label {
  position: absolute;
  top: 3%;
  left: 0;
  right: 0;
  color: rgba(240, 248, 255, 0.92);
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-size: clamp(0.55rem, 2.1vw, 0.8rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.ld-yard__nest {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  width: 68%;
  aspect-ratio: 1 / 1;
  border-radius: 14%;
  background: rgba(236, 245, 253, 0.94);
}

.ld-yard--neutral .ld-yard__nest {
  background: rgba(60, 80, 125, 0.35);
}

.ld-yard__spot {
  width: 56%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(15, 30, 60, 0.1);
}

.ld-yard--player .ld-yard__spot { box-shadow: inset 0 0 0 2px rgba(8, 145, 178, 0.35); }
.ld-yard--cpu .ld-yard__spot { box-shadow: inset 0 0 0 2px rgba(192, 38, 211, 0.3); border-radius: 22%; }
.ld-yard--neutral .ld-yard__spot { background: rgba(120, 150, 200, 0.15); }

/* 中央ゴール */
.ld-center {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 3px;
  background: conic-gradient(
    from -45deg,
    #f0abfc 0deg 90deg,
    #b8c4dc 90deg 180deg,
    #67e8f9 180deg 270deg,
    #b8c4dc 270deg 360deg
  );
  box-shadow: 0 0 14px rgba(63, 196, 255, 0.3);
}

.ld-center__label {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(13, 23, 48, 0.85);
  color: #eaf5ff;
  font-family: Outfit, sans-serif;
  font-size: clamp(0.5rem, 1.9vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  transform: translate(-50%, -50%);
}

.ld-center__finished {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 2px;
  transform: translateX(-50%);
}

.ld-center__finished--cpu { top: 6%; }
.ld-center__finished--player { bottom: 6%; }

.ld-mini {
  display: grid;
  place-items: center;
  width: clamp(9px, 2.6vw, 16px);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #ffffff;
  font-family: Outfit, sans-serif;
  font-size: clamp(0.4rem, 1.5vw, 0.6rem);
  font-weight: 700;
  line-height: 1;
}

.ld-mini--player {
  border-radius: 50%;
  background: var(--ld-player-deep);
}

.ld-mini--cpu {
  border-radius: 3px;
  background: var(--ld-cpu-deep);
}

.ld-center.is-target {
  outline: 2px dashed #0e7490;
  outline-offset: -3px;
}

.ld-center.is-goal {
  animation: ld-goal 0.7s ease-out;
}

@keyframes ld-goal {
  0% { box-shadow: 0 0 0 0 rgba(63, 196, 255, 0.9); }
  100% { box-shadow: 0 0 0 14px rgba(63, 196, 255, 0); }
}

/* 駒 */
.ld-piece {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
}

.ld-piece[hidden] {
  display: none;
}

.ld-piece:disabled {
  opacity: 1;
}

.ld-piece__token {
  display: grid;
  place-items: center;
  width: 86%;
  aspect-ratio: 1 / 1;
  border: 2px solid;
  box-shadow: 0 2px 4px rgba(8, 16, 36, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: translate(var(--sx, 0), var(--sy, 0)) scale(var(--scale, 1));
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.ld-piece.is-home .ld-piece__token {
  width: 52%;
}

.ld-piece--player .ld-piece__token {
  border-color: var(--ld-player-dark);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a5f3fc 0%, var(--ld-player) 40%, var(--ld-player-deep) 100%);
}

.ld-piece--cpu .ld-piece__token {
  border-color: var(--ld-cpu-dark);
  border-radius: 24%;
  background: radial-gradient(circle at 35% 30%, #fbd5ff 0%, var(--ld-cpu) 40%, var(--ld-cpu-deep) 100%);
}

.ld-piece__num {
  color: #ffffff;
  font-family: Outfit, sans-serif;
  font-size: clamp(0.5rem, 2vw, 0.85rem);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.ld-piece.is-home .ld-piece__num {
  font-size: clamp(0.6rem, 2.4vw, 0.95rem);
}

.ld-piece.is-movable {
  z-index: 5;
  cursor: pointer;
}

/* 盤上の駒は1マスより広いタップ領域を確保 */
.ld-piece.is-movable::before {
  content: "";
  position: absolute;
  inset: -65%;
}

.ld-piece.is-movable.is-home::before {
  inset: -12%;
}

.ld-piece.is-movable .ld-piece__token {
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 10px 3px rgba(63, 196, 255, 0.7);
  animation: ld-pulse 1.2s ease-in-out infinite;
}

@keyframes ld-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #ffffff, 0 0 6px 2px rgba(63, 196, 255, 0.55); }
  50% { box-shadow: 0 0 0 2px #ffffff, 0 0 14px 4px rgba(63, 196, 255, 0.85); }
}

.ld-piece.is-movable:hover .ld-piece__token,
.ld-piece.is-movable:focus-visible .ld-piece__token {
  transform: translate(var(--sx, 0), var(--sy, 0)) scale(calc(var(--scale, 1) * 1.12));
}

.ld-piece:focus-visible {
  outline: none;
}

.ld-piece:focus-visible .ld-piece__token {
  outline: 3px solid #facc15;
  outline-offset: 2px;
}

.ld-piece.is-moving {
  z-index: 6;
}

.ld-piece.is-moving .ld-piece__token {
  transform: translate(var(--sx, 0), var(--sy, 0)) scale(calc(var(--scale, 1) * 1.12));
  box-shadow: 0 0 12px 3px rgba(63, 196, 255, 0.6);
}

.ld-piece.is-captured .ld-piece__token {
  animation: ld-captured 0.7s ease-out;
}

@keyframes ld-captured {
  0% { transform: scale(1.35); box-shadow: 0 0 16px 6px rgba(244, 114, 182, 0.85); }
  40% { transform: scale(0.9) rotate(-8deg); }
  100% { transform: scale(1); }
}

/* 凡例 */
.ld-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ld-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(214, 234, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
}

.ld-legend__swatch {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.ld-legend__swatch--player {
  border-radius: 50%;
  background: var(--ld-player-deep);
}

.ld-legend__swatch--cpu {
  border-radius: 3px;
  background: var(--ld-cpu-deep);
}

.ld-legend__star {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #e6eef9;
  color: #7b8aa6;
  font-size: 0.75rem;
  line-height: 1;
}

.ld-guide {
  max-width: min(100%, 640px);
  margin: 0 auto 12px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: center;
}

.how-to-list--ordered {
  list-style: decimal;
  padding-left: 1.35em;
}

.how-to-list--ordered li {
  margin: 0.35em 0;
}

@media (max-width: 560px) {
  .ld-stage {
    width: calc(100% + 24px);
    max-width: none;
    margin-right: -12px;
    margin-left: -12px;
    padding: 8px 6px;
  }

  .ld-board {
    padding: 2px;
  }

  .ld-hud {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ld-dice {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }
}

@media (hover: none) {
  .ld-piece.is-movable:hover .ld-piece__token {
    transform: translate(var(--sx, 0), var(--sy, 0)) scale(var(--scale, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ld-piece.is-movable .ld-piece__token,
  .ld-piece.is-captured .ld-piece__token,
  .ld-die.is-rolling,
  .ld-cell.is-capture,
  .ld-center.is-goal,
  .ld-message,
  .ld-result {
    animation: none;
  }
}

/* 外枠とHUD・操作は15パズル／パイプパズルの共通UIを利用する。
   15×15盤とサイコロのみゲーム固有の領域に収める。 */
html.gs-playing .game-panel { align-items: center; }
html.gs-playing .game-panel > .gs-bar,
html.gs-playing .game-panel > .gs-hud,
html.gs-playing .game-controls,
html.gs-playing .ld-stage { width: 100%; max-width: 640px; }
html.gs-playing .status-pill { min-height: 0; padding: 0; background: none; box-shadow: none; font-size: 1.15rem; line-height: 1.2; }
html.gs-playing .status-pill.is-player { color: var(--play-accent); }
html.gs-playing .status-pill.is-cpu { color: #e9b8fa; }
html.gs-playing .status-pill.is-win { color: #86efac; }
html.gs-playing .status-pill.is-lose { color: #fca5a5; }
html.gs-playing .ld-stage { flex: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
html.gs-playing .ld-message { min-height: 3em; margin: 0 0 8px; font-size: .8rem; }
html.gs-playing .ld-board-wrap { position: relative; width: min(100%, max(140px, min(100dvh - 420px, 560px))); max-width: none; }
html.gs-playing .ld-board { border-color: var(--play-border); }
html.gs-playing .ld-legend { margin: 10px 0 0; gap: 6px 12px; }
html.gs-playing .ld-legend__item { margin: 0; font-size: .7rem; line-height: 1.4; }
html.gs-playing .ld-status__text { flex: none; width: 100%; max-width: 640px; min-height: 3.2em; margin: 8px 0; color: var(--play-text); font-size: .85rem; line-height: 1.6; text-align: center; }
html.gs-playing .ld-dice { flex: none; justify-content: center; margin: 0 0 12px; }
html.gs-playing .ld-die { width: 44px; }
html.gs-playing .ld-dice .btn,
html.gs-playing .ld-result .btn { min-height: 44px; border: 1px solid var(--play-border); background: var(--play-hud-bg); color: var(--play-text); box-shadow: none; }
html.gs-playing .ld-dice .btn:hover:enabled,
html.gs-playing .ld-result .btn:hover { background: var(--play-btn-hover); }
html.gs-playing .game-controls { flex: none; margin: 0; }
html.gs-playing .ld-result { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; background: rgba(8, 15, 31, .94); border-color: var(--play-border); }
html.gs-playing .ld-result[hidden] { display: none; }
html.gs-playing .ld-result__detail { color: var(--play-text-muted); }
@media (min-width: 768px) and (min-height: 600px) {
  html.gs-playing .game-panel { padding-top: max(clamp(24px, 5vh, 56px), env(safe-area-inset-top)); }
  html.gs-playing .game-panel > .gs-bar { margin-bottom: 24px; }
  html.gs-playing .game-panel > .gs-hud { margin-bottom: 16px; }
  html.gs-playing .ld-board-wrap { width: min(100%, max(180px, min(100dvh - 460px, 560px))); }
  html.gs-playing .ld-legend { margin-top: 18px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  html.gs-playing .game-panel { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 560px); grid-template-rows: auto auto auto auto 1fr; column-gap: 16px; justify-content: center; align-items: start; }
  html.gs-playing .game-panel > .gs-bar { grid-column: 1; grid-row: 1; }
  html.gs-playing .game-panel > .gs-hud { grid-column: 1; grid-row: 2; }
  html.gs-playing .ld-stage { grid-column: 2; grid-row: 1 / 6; align-self: center; }
  html.gs-playing .ld-message { margin-bottom: 4px; }
  html.gs-playing .ld-board-wrap { width: min(100%, max(120px, 100dvh - 104px)); }
  html.gs-playing .ld-status__text { grid-column: 1; grid-row: 3; }
  html.gs-playing .ld-dice { grid-column: 1; grid-row: 4; }
  html.gs-playing .game-controls { grid-column: 1; grid-row: 5; }
}
html.gs-playing .gs-hud__label { white-space: nowrap; font-size: .68rem; }