.yut-play-area {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 12px;
}

.yut-layout {
  display: grid;
  grid-template-columns: 210px minmax(400px, 1fr) 320px;
  gap: 20px;
  align-items: stretch;
}

.yut-roster {
  position: relative;
  z-index: 2;
  display: grid;
  width: auto;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #46566f;
  border-radius: 18px;
  background: linear-gradient(155deg, #172438, #0c1421 70%);
  box-shadow: inset 0 1px #ffffff10, 0 18px 38px #0007;
  margin-left: -12px;
}

.yut-roster-head { display: grid; gap: 2px; padding-bottom: 9px; border-bottom: 1px solid #ffffff12; }
.yut-roster-head small { color: #72ddd7; font-size: 9px; font-weight: 1000; letter-spacing: .16em; }
.yut-roster-head b { color: #ecf3fc; font-size: 14px; }

.yut-board-shell {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  place-items: center;
}

.yut-board {
  position: relative;
  isolation: isolate;
  width: min(65vh, 100%);
  max-width: 640px;
  aspect-ratio: 1;
  border: 11px solid #522919;
  border-radius: 25px;
  background:
    radial-gradient(circle at 50% 46%, #f8dda1 0 8%, transparent 9%),
    linear-gradient(115deg, transparent 0 48%, #fff1c31c 51%, transparent 54%),
    repeating-linear-gradient(90deg, #d5a15a 0 5px, #e9bf73 5px 13px);
  box-shadow:
    inset 0 0 0 4px #99603a,
    inset 0 0 52px #6a351d70,
    0 2px 0 #bd7b48,
    0 22px 48px #0009;
}

.yut-board::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3.3%;
  border: 2px solid #70422555;
  border-radius: 16px;
  box-shadow: inset 0 0 28px #8c4f2826;
}

.yut-board svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.yut-board svg path {
  fill: none;
  stroke: #6c3d25;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .76;
  filter: drop-shadow(0 2px 1px #ffe2a955);
}

.yut-node {
  position: absolute;
  z-index: 1;
  width: 3.9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid #75452c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff2c8 0 7%, #daa05e 46%, #9b542f 100%);
  box-shadow: 0 3px 5px #3c1c10aa, inset 0 0 0 2px #fbd39770;
}

.yut-node.big {
  width: 8%;
  border-width: 3px;
  background: radial-gradient(circle at 34% 26%, #fff7d7 0 8%, #d99a55 46%, #88462b 100%);
  box-shadow: 0 4px 9px #37180dbb, inset 0 0 0 3px #f5c47688;
}

.yut-node-label {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, calc(-50% + 25px));
  color: #442318;
  font-size: 10px;
  font-weight: 1000;
  white-space: nowrap;
  text-shadow: 0 1px #ffe7b6;
  pointer-events: none;
}

#yut-pieces,
#yut-targets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#yut-pieces { z-index: 8; }
#yut-targets { z-index: 14; }

.yut-piece,
.yut-moving-piece {
  position: absolute;
  z-index: 8;
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  padding: 0;
  transform: translate(-50%, -50%);
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: white;
}

.yut-piece { pointer-events: auto; }

#yut-board button.yut-piece:hover:not(:disabled),
#yut-board button.yut-piece:focus-visible {
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.yut-piece-disc {
  display: grid;
  width: 39px;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid #fff9ea;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 25%, #ffffffc4 0 7%, transparent 9%),
    radial-gradient(circle at 38% 33%, var(--piece-color) 0 42%, color-mix(in srgb, var(--piece-color), #111 38%) 100%);
  box-shadow:
    0 6px 12px #34170faa,
    0 0 0 2px color-mix(in srgb, var(--piece-color), #000 32%),
    inset 0 -4px 7px #0004;
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.yut-piece-disc em {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 2px #0008;
}

.yut-piece > b,
.yut-moving-piece > b {
  position: absolute;
  right: 1px;
  bottom: 0;
  display: grid;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #2d1911;
  background: linear-gradient(#fff8df, #e8c57d);
  box-shadow: 0 3px 7px #0008;
  font-size: 11px;
}

.yut-piece:disabled {
  cursor: default;
  opacity: 1;
}

.yut-piece.movable {
  cursor: pointer;
}

.yut-piece.movable .yut-piece-disc {
  animation: yut-piece-ready 1.2s ease-in-out infinite alternate;
}

.yut-piece.movable:hover .yut-piece-disc,
.yut-piece.selected .yut-piece-disc {
  transform: none;
  filter: brightness(1.13);
  box-shadow: 0 7px 14px #241109bb, 0 0 0 4px #fff9d5, 0 0 24px var(--piece-color);
}

.yut-piece.moving-hidden {
  visibility: hidden;
}

.yut-moving-piece {
  z-index: 18;
  pointer-events: none;
}

.yut-moving-piece .yut-piece-disc {
  transform: scale(1.05);
  box-shadow: 0 12px 18px #2c150dc0, 0 0 0 3px #fff5c7, 0 0 25px var(--piece-color);
}

#yut-board .yut-target {
  position: absolute;
  z-index: 14;
  display: block;
  box-sizing: border-box;
  width: 68px;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
}

#yut-board .yut-target > span,
#yut-board .yut-target > span::before {
  position: absolute;
  inset: 8px;
  content: "";
  border: 3px solid #fff7b1;
  border-radius: 50%;
  background: #ffc84a33;
  box-shadow: 0 0 0 4px #ffcb4a45, 0 0 28px #ffbf36;
}

#yut-board .yut-target > span::before {
  inset: -8px;
  background: transparent;
  animation: yut-target-pulse 1.15s ease-out infinite;
}

#yut-board .yut-target > b {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  transform: translateX(-50%);
  padding: 6px 10px;
  border: 1px solid #f8d98c;
  border-radius: 999px;
  color: #33200f;
  background: linear-gradient(#fff7ce, #e9bd68);
  box-shadow: 0 7px 16px #2b160c88;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}

#yut-board .yut-target > b strong {
  color: #fff7cf;
  padding: 2px 5px;
  border-radius: 999px;
  background: #5b391b;
  font-size: 10px;
}

#yut-board .yut-target > b small {
  color: #3c2815;
  font-size: 10px;
  font-weight: 900;
}

#yut-board .yut-target:hover > span {
  background: #ffe77466;
}

#yut-board button.yut-target:hover:not(:disabled),
#yut-board button.yut-target:focus-visible {
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  box-shadow: none;
}

#yut-board .yut-target.committing {
  pointer-events: none;
  filter: brightness(1.3);
}

.yut-board-effect {
  position: absolute;
  z-index: 22;
  transform: translate(-50%, -50%);
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 19px;
  font-weight: 1000;
  white-space: nowrap;
  pointer-events: none;
  animation: yut-board-pop 1.1s ease-out forwards;
}

.yut-board-effect.capture { background: #cf3048; box-shadow: 0 0 22px #ff4b65; }
.yut-board-effect.stack { background: #3a76d8; box-shadow: 0 0 22px #4a93ff; }

.yut-controls {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #8b5838;
  border-radius: 20px;
  background:
    radial-gradient(circle at 40% -10%, #a9653523, transparent 38%),
    linear-gradient(155deg, #2b1a19, #131923 58%, #0d1420);
  box-shadow: inset 0 1px #ffffff12, 0 18px 40px #0009;
}

.yut-turn-card {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid #c8945260;
  border-radius: 14px;
  background: linear-gradient(145deg, #121a27, #0a111b);
  box-shadow: inset 0 1px #ffffff0d;
}

.yut-turn-card small,
.yut-section-head small,
.yut-reserve-head small {
  color: #d9a75f;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .17em;
}

.yut-turn-card strong { color: #fff2cf; font-size: 20px; }
.yut-turn-card span { min-height: 35px; color: #c7d0df; font-size: 12px; line-height: 1.45; }

.yut-throw-stage {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #d5a15870;
  border-radius: 17px;
  background:
    radial-gradient(ellipse at 50% 35%, #9d603f45, transparent 55%),
    linear-gradient(160deg, #231714, #101725 66%);
  text-align: center;
  box-shadow: inset 0 1px #fff1c31c;
}

.yut-throw-stage::before {
  position: absolute;
  inset: 7px;
  content: "";
  border: 1px solid #e2bb7a18;
  border-radius: 12px;
  pointer-events: none;
}

.yut-sticks {
  position: relative;
  display: flex;
  height: 116px;
  align-items: flex-end;
  justify-content: center;
  gap: 11px;
  perspective: 700px;
  transform-style: preserve-3d;
}

.yut-sticks::after {
  position: absolute;
  z-index: -1;
  bottom: 1px;
  width: 76%;
  height: 18px;
  content: "";
  border-radius: 50%;
  background: #0008;
  filter: blur(8px);
}

.yut-stick {
  position: relative;
  display: block;
  width: 32px;
  height: 94px;
  transform: rotateZ(var(--rest-r));
  transform-origin: 50% 58%;
  overflow: hidden;
  border: 2px solid #5f301c;
  border-radius: 52% 52% 45% 45% / 18% 18% 15% 15%;
  background:
    linear-gradient(90deg, #6e351d 0, #b96f3d 13%, #f3c57d 44%, #ffe1a2 54%, #b76634 82%, #5f2b19 100%);
  box-shadow:
    inset 3px 0 5px #fff5,
    inset -4px 0 7px #4c1f16aa,
    0 9px 12px #0009;
  transform-style: preserve-3d;
}

.yut-stick::before {
  position: absolute;
  inset: 4px 7px 11px 9px;
  content: "";
  border-radius: 50%;
  background: linear-gradient(90deg, #fff7d566, transparent 65%);
  pointer-events: none;
}

.yut-stick::after {
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  height: 10px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, #d18a4e 0 28%, #6b311c 72%);
  box-shadow: inset 0 2px 3px #ffe1a455;
}

.yut-stick > span {
  position: absolute;
  z-index: 2;
  inset: 9px 6px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  opacity: 0;
}

.yut-stick > span > em {
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3f1d14;
  box-shadow: inset 0 1px 1px #000, 0 1px #e3a66855;
}

.yut-stick.flat {
  border-color: #4a2518;
  background:
    linear-gradient(90deg, #4e2519 0, #7a3d26 8%, #ad683d 45%, #9b5835 74%, #492218 100%);
  box-shadow: inset 0 0 0 2px #32150faa, inset 4px 0 7px #e4a46333, 0 9px 12px #0009;
}

.yut-stick.flat > span { opacity: 1; }
.yut-stick.round > span { opacity: 0; }

.yut-stick.backdo-stick.flat > span::after {
  position: absolute;
  top: 46%;
  display: grid;
  width: 18px;
  aspect-ratio: 1;
  content: "백";
  place-items: center;
  border: 1px solid #e4b76e88;
  border-radius: 50%;
  color: #f1c985;
  background: #3d1c14bb;
  box-shadow: inset 0 0 5px #0009;
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
}

.yut-stick.throwing {
  overflow: visible;
  animation: yut-stick-toss .9s cubic-bezier(.18, .72, .2, 1) both;
  animation-delay: calc(var(--stick-index) * 32ms);
}

.yut-throw-stage > strong {
  min-height: 30px;
  color: #f7d583;
  font-size: 21px;
  text-shadow: 0 2px 7px #000;
}

.yut-throw-stage > button {
  min-height: 47px;
  border: 1px solid #ac8bff;
  background: linear-gradient(135deg, #7465ff, #5e42e8);
  box-shadow: inset 0 1px #ffffff55, 0 8px 18px #4b37c855;
  font-size: 15px;
  font-weight: 1000;
}

.yut-move-panel {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #ffffff13;
  border-radius: 15px;
  background: linear-gradient(145deg, #111a27, #0a111b);
}

.yut-section-head,
.yut-reserve-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.yut-section-head > div,
.yut-reserve-head > div { display: grid; gap: 1px; }
.yut-section-head b,
.yut-reserve-head b { color: #f6e8ce; font-size: 14px; }

.yut-section-head > span,
.yut-reserve-head > span {
  display: grid;
  min-width: 31px;
  height: 25px;
  padding: 0 8px;
  place-items: center;
  border: 1px solid #cda46250;
  border-radius: 999px;
  color: #edca88;
  background: #3b2a1d88;
  font-size: 11px;
  font-weight: 900;
}

#yut-move-options {
  display: grid;
  gap: 7px;
  max-height: 176px;
  overflow: auto;
}

.yut-move-card {
  display: grid;
  grid-template-columns: 42px 1fr 22px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 7px 10px;
  border: 1px solid #ffffff13;
  border-radius: 13px;
  background: linear-gradient(145deg, #1a2433, #111824);
  box-shadow: inset 0 1px #ffffff0a;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  cursor: default;
}

.yut-move-card.bonus .yut-roll-seal { color: #35210d; background: linear-gradient(145deg, #ffe599, #d9a83d); }
.yut-move-card.backdo .yut-roll-seal { color: #ffdfd9; background: linear-gradient(145deg, #9a4050, #5d2533); }

.yut-roll-seal {
  display: grid;
  width: 40px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #ffffff55;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #725de4, #4938a9);
  box-shadow: inset 0 1px #ffffff44, 0 4px 9px #0007;
  font-size: 13px;
  font-weight: 1000;
}

.yut-roll-copy { display: grid; gap: 1px; }
.yut-roll-copy small { color: #8794a8; font-size: 9px; }
.yut-roll-copy b { color: #f3f5f9; font-size: 14px; }
.yut-roll-order {
  display: grid;
  width: 22px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #64708666;
  border-radius: 50%;
  color: #9ba8bb;
  font-size: 10px;
  font-weight: 900;
}

.yut-queue-empty {
  display: grid;
  grid-template-columns: 34px 1fr;
  margin: 0;
  padding: 10px;
  border: 1px dashed #ffffff17;
  border-radius: 12px;
  color: #8f9db2;
  background: #0b121d;
}

.yut-queue-empty > span { grid-row: 1 / 3; align-self: center; color: #b79259; font-size: 23px; }
.yut-queue-empty b { color: #bdc7d5; font-size: 12px; }
.yut-queue-empty small { font-size: 9px; }

.yut-reserve-dock {
  display: grid;
  gap: 9px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid #ffffff12;
}

#yut-reserve {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #ffffff10;
  border-radius: 12px;
  background: linear-gradient(145deg, #0b121d, #101826);
}

.yut-reserve-piece {
  display: grid;
  width: 38px;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 3px solid #fff8e7;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 34% 24%, #fff9 0 8%, transparent 10%),
    radial-gradient(circle at 40% 35%, var(--piece-color), color-mix(in srgb, var(--piece-color), #111 38%));
  box-shadow: 0 4px 9px #0008, 0 0 0 2px color-mix(in srgb, var(--piece-color), #000 32%);
  font-weight: 1000;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}

.yut-reserve-piece:not(:disabled) { cursor: pointer; animation: yut-reserve-ready 1.2s ease-in-out infinite alternate; }
.yut-reserve-piece:not(:disabled):hover,
.yut-reserve-piece.selected { transform: none; filter: brightness(1.15); box-shadow: 0 5px 11px #0009, 0 0 0 4px #f7dda0, 0 0 19px var(--piece-color); }
.yut-reserve-piece:disabled { opacity: .45; cursor: default; }
.yut-reserve-empty { color: #7e8ba0; font-size: 10px; }

.yut-direct-guide {
  margin: 0;
  color: #8997aa;
  font-size: 10px;
  text-align: center;
}

.yut-player-status { display: grid; gap: 6px; }
.yut-player-status article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 8px; padding: 9px; border-left: 4px solid var(--piece-color); border-radius: 9px; background: #0b1320; }
.yut-player-status article.turn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--piece-color), transparent 40%); }
.yut-player-status b { overflow: hidden; color: #e7edf6; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yut-player-status span { grid-column: 1 / -1; color: #aab7c9; font-size: 10px; text-align: right; }
.yut-player-status i { display: flex; gap: 3px; }
.yut-player-status em { width: 8px; height: 8px; border: 1px solid #536070; border-radius: 50%; background: #222d3c; }
.yut-player-status em.done { border-color: var(--piece-color); background: var(--piece-color); box-shadow: 0 0 6px var(--piece-color); }

.yut-rules { margin-top: 2px; padding-top: 11px; border-top: 1px solid #ffffff12; color: #9daabe; font-size: 11px; }
.yut-rules summary { cursor: pointer; color: #d5b77f; font-weight: 800; }
.yut-rules p { margin: 7px 0 0; line-height: 1.55; }

.setting-note { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border: 1px solid #ffffff18; border-radius: 10px; background: #0f1724; }
.setting-note b { color: #e8e3ff; }
.setting-note small { color: #aeb8ca; line-height: 1.5; }

@keyframes yut-stick-toss {
  0% { transform: translate(0, 0) rotateX(0) rotateY(0) rotateZ(var(--rest-r)); filter: brightness(1); }
  35% { transform: translate(var(--toss-x), -112px) rotateX(430deg) rotateY(120deg) rotateZ(var(--toss-r)) scale(1.06); filter: brightness(1.15); }
  68% { transform: translate(calc(var(--toss-x) * .6), -30px) rotateX(790deg) rotateY(235deg) rotateZ(calc(var(--toss-r) * .45)); }
  82% { transform: translate(calc(var(--toss-x) * .2), -3px) rotateX(930deg) rotateY(295deg) rotateZ(var(--rest-r)) scale(1.02, .96); }
  91% { transform: translate(0, -17px) rotateX(1010deg) rotateY(335deg) rotateZ(var(--rest-r)); }
  100% { transform: translate(0, 0) rotateX(1080deg) rotateY(360deg) rotateZ(var(--rest-r)); filter: brightness(1); }
}

@keyframes yut-piece-ready {
  to { filter: brightness(1.18); box-shadow: 0 6px 13px #34170faa, 0 0 0 3px #fff6, 0 0 18px var(--piece-color); }
}

@keyframes yut-reserve-ready {
  to { filter: brightness(1.13); box-shadow: 0 4px 9px #0008, 0 0 0 3px #fff5, 0 0 13px var(--piece-color); }
}

@keyframes yut-target-pulse {
  0% { opacity: .95; transform: scale(.72); }
  75%, 100% { opacity: .05; transform: scale(1.28); }
}

@keyframes yut-board-pop {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.55); }
  25% { opacity: 1; transform: translate(-50%, -80%) scale(1.14); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(.92); }
}

@media (max-width: 980px) {
  .yut-layout { grid-template-columns: 1fr; }
  .yut-board-shell { order: 1; }
  .yut-controls { order: 2; }
  .yut-roster { order: 3; }
  .yut-board { width: min(78vw, 610px); }
  .yut-controls { grid-template-columns: 1fr 1fr; }
  .yut-turn-card,
  .yut-move-panel { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .yut-play-area { padding: 3px; }
  .yut-board { width: min(92vw, 520px); border-width: 7px; }
  .yut-layout { gap: 9px; }
  .yut-controls { display: grid; padding: 10px; grid-template-columns: 1fr; }
  .yut-turn-card,
  .yut-move-panel { grid-column: auto; }
  .yut-sticks { height: 92px; }
  .yut-stick { width: 27px; height: 74px; }
  .yut-node-label { display: none; }
  .yut-piece,
  .yut-moving-piece { width: 46px; }
  .yut-piece-disc { width: 33px; }
  #yut-move-options { max-height: 150px; }
}

/* Mobile gameplay: board first, compact throw/move controls second, no page scrolling. */
@media (max-width:850px) {
  body.yut-active .yut-play-area {
    display:flex;
    width:100%;
    min-height:0;
    margin:0;
    padding:2px;
    flex:1;
    overflow:auto;
    overscroll-behavior:contain;
  }
  body.yut-active .yut-layout {
    width:100%;
    min-height:0;
    grid-template-columns:minmax(0,1fr);
    gap:6px;
    align-content:start;
  }
  body.yut-active .yut-board-shell { order:1; min-height:0; }
  body.yut-active .yut-board {
    width:min(92vw,calc(var(--game-viewport-height,100dvh) - 315px),520px);
    min-width:270px;
    border-width:6px;
    border-radius:17px;
  }
  body.yut-active .yut-roster { display:none; }
  body.yut-active .yut-controls {
    order:2;
    display:grid;
    padding:6px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:6px;
    border-radius:14px;
  }
  body.yut-active .yut-turn-card { grid-column:1/-1; min-height:50px; padding:7px 9px; grid-template-columns:auto 1fr; align-items:center; gap:2px 8px; }
  body.yut-active .yut-turn-card small { grid-row:1/3; }
  body.yut-active .yut-turn-card strong { font-size:13px; }
  body.yut-active .yut-turn-card span { min-height:0; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
  body.yut-active .yut-throw-stage { grid-column:1; gap:4px; padding:6px; border-radius:12px; }
  body.yut-active .yut-sticks { height:64px; gap:6px; }
  body.yut-active .yut-stick { width:20px; height:54px; border-width:1px; }
  body.yut-active .yut-throw-stage>strong { min-height:21px; font-size:13px; }
  body.yut-active .yut-throw-stage>button { min-height:40px; padding:5px; font-size:11px; }
  body.yut-active .yut-move-panel { grid-column:2; gap:5px; padding:7px; border-radius:12px; }
  body.yut-active .yut-section-head b,
  body.yut-active .yut-reserve-head b { font-size:10px; }
  body.yut-active .yut-section-head small,
  body.yut-active .yut-reserve-head small { font-size:6px; }
  body.yut-active #yut-move-options { max-height:76px; gap:4px; }
  body.yut-active .yut-move-card { min-height:36px; padding:4px 6px; grid-template-columns:30px 1fr 16px; gap:5px; }
  body.yut-active .yut-reserve-dock { padding-top:4px; }
  body.yut-active .yut-direct-guide { display:none; }
  body.yut-active .yut-piece,
  body.yut-active .yut-moving-piece { width:40px; }
  body.yut-active .yut-piece-disc { width:29px; }
}

@media (max-width:850px) and (orientation:landscape) {
  body.yut-active .yut-play-area { overflow:hidden; }
  body.yut-active .yut-layout { height:100%; grid-template-columns:minmax(260px,1fr) minmax(300px,.95fr); align-items:center; }
  body.yut-active .yut-board-shell { grid-column:1; height:100%; }
  body.yut-active .yut-board { width:auto; height:min(100%,calc(var(--game-viewport-height,100dvh) - 105px)); min-width:0; max-width:100%; }
  body.yut-active .yut-controls { grid-column:2; max-height:100%; overflow:auto; }
}

.yut-mobile-info-toggle,.yut-mobile-info-backdrop{display:none}

/* Small screens keep the board and current decision visible; roster/rules live in a sheet. */
@media(max-width:850px){
  body.yut-active #room>.panel.grow>.section-title{padding-right:190px}
  body.yut-active .yut-play-area{position:relative;overflow:hidden}
  body.yut-active .yut-layout{
    width:100%;
    height:100%;
    min-height:0;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:5px;
    align-content:start;
    overflow:hidden;
  }
  body.yut-active .yut-board-shell{display:grid;width:100%;height:auto;min-height:0;place-items:center;overflow:hidden}
  body.yut-active .yut-board{width:min(100%,calc(100vw - 20px));height:auto;min-width:0;max-width:100%;max-height:100%;aspect-ratio:1}
  body.yut-active .yut-controls{display:grid;min-height:0;max-height:196px;padding:5px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
  body.yut-active .yut-turn-card{min-height:42px;height:42px;padding:5px 8px}
  body.yut-active .yut-turn-card span{white-space:nowrap}
  body.yut-active .yut-throw-stage{min-height:0;max-height:142px;overflow:hidden}
  body.yut-active .yut-move-panel{min-height:0;max-height:142px;overflow:auto}
  body.yut-active .yut-mobile-info-toggle{
    position:fixed;z-index:125;top:calc(9px + env(safe-area-inset-top));right:147px;display:grid;width:36px;height:34px;place-items:center;padding:0;border:1px solid #7ce0d886;border-radius:999px;color:#eafffb;background:#123a3bed;box-shadow:0 8px 24px #0009;font-size:22px;font-weight:900;line-height:1
  }
  body.yut-active .yut-mobile-info-backdrop{position:fixed;z-index:120;inset:0;display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#020711a8;backdrop-filter:blur(3px)}
  body.yut-active .yut-mobile-info-backdrop[hidden]{display:none!important}
  body.yut-active.yut-mobile-info-open .yut-roster{
    position:fixed;z-index:123;right:6px;bottom:calc(6px + env(safe-area-inset-bottom));left:6px;display:flex!important;width:auto;height:min(64vh,470px);min-height:260px;padding:14px;flex-direction:column;overflow:auto;border:1px solid #4f7b78;border-radius:18px;background:linear-gradient(160deg,#10262d,#07131e 72%);box-shadow:0 24px 70px #000e
  }
  body.yut-active.yut-mobile-info-open .yut-player-status{display:grid;gap:6px}
  body.yut-active.yut-mobile-info-open .yut-rules{display:block;margin-top:10px}
}

@media(max-width:850px) and (max-height:680px){
  body.yut-active .yut-layout{grid-template-rows:auto auto}
  body.yut-active .yut-board{width:min(100%,calc(var(--game-viewport-height,100dvh) - 265px))}
  body.yut-active .yut-controls{max-height:164px}
  body.yut-active .yut-turn-card{min-height:34px;height:34px}
  body.yut-active .yut-sticks{height:43px}
  body.yut-active .yut-stick{width:17px;height:38px}
  body.yut-active .yut-throw-stage,body.yut-active .yut-move-panel{max-height:120px}
  body.yut-active .yut-throw-stage>button{min-height:34px}
}

@media(max-width:850px) and (orientation:landscape){
  body.yut-active .yut-layout{grid-template-columns:minmax(220px,1fr) minmax(250px,.9fr);grid-template-rows:minmax(0,1fr);gap:5px;align-content:stretch}
  body.yut-active .yut-board-shell{grid-column:1;grid-row:1}
  body.yut-active .yut-board{width:auto;height:calc(var(--game-viewport-height,100dvh) - 98px);min-height:0;max-width:100%;max-height:100%}
  body.yut-active .yut-controls{grid-column:2;grid-row:1;max-height:100%;overflow:auto}
}