/* 딱콕 윷놀이 */

.tt-yut-status { color: #4e4264; }
.tt-yut-setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 10px; margin: 0 0 12px; }
.tt-yut-box { min-width: 0; padding: 12px; border: 1px solid #e3d6bd; border-radius: 12px; background: #fffaf0; }
.tt-yut-box > strong { display: block; margin-bottom: 8px; }
.tt-yut-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tt-yut-row + .tt-yut-row { margin-top: 8px; }
.tt-yut-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tt-yut-row select,
.tt-yut-row input[type="text"] { min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid #b9a98a; border-radius: 10px; background: #fff; color: inherit; font: inherit; }
.tt-yut-row input[type="text"] { flex: 1 1 8rem; width: 8rem; letter-spacing: .08em; text-transform: uppercase; }
/* 닉네임 칸은 방 코드 칸과 달리 대문자로 바꾸거나 글자 사이를 벌리지 않고, 줄 하나를 다 쓴다(360px에서도 넘치지 않게). */
.tt-yut-row input.tt-yut-nick[type="text"] { flex: 1 1 12rem; width: auto; max-width: 24rem; letter-spacing: normal; text-transform: none; }
.tt-yut-row input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
.tt-yut-row button { min-height: 44px; }
.tt-yut-room { margin-top: 4px; }
.tt-yut-room strong { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.tt-game-panel p.tt-yut-note { margin: 8px 0; color: #5a4a3a; font-size: .92rem; }
.tt-yut-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 8px; }
.tt-yut-team { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 8px 10px; border: 2px solid #b9a98a; border-radius: 10px; background: #fff; overflow-wrap: anywhere; }
.tt-yut-team > span { font-size: .9rem; }
.tt-yut-team button { min-height: 40px; }
.tt-yut-team[data-team="0"] { border-color: #3f7fd6; }
.tt-yut-team[data-team="1"] { border-color: #e0603f; }
.tt-yut-team[data-team="2"] { border-color: #3f9a62; }
.tt-yut-team[data-team="3"] { border-color: #d9a520; }
.tt-yut-team[data-team="0"] strong span, .tt-yut-people li[data-team="0"] span { color: #1f4c93; }
.tt-yut-team[data-team="1"] strong span, .tt-yut-people li[data-team="1"] span { color: #96321a; }
.tt-yut-team[data-team="2"] strong span, .tt-yut-people li[data-team="2"] span { color: #1d5f38; }
.tt-yut-team[data-team="3"] strong span, .tt-yut-people li[data-team="3"] span { color: #80600a; }

/* 놀이판: 캔버스 위에 버튼을 얹는다. 좁은 화면에서는 세로로 길게. */
.tt-yut-stage {
  position: relative;
  width: min(100%, 56rem);
  max-height: max(26rem, 92vh);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: #231916;
  scroll-margin-top: .5rem;
  -webkit-user-select: none;
  user-select: none;
}
.tt-yut-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: pointer; outline-offset: -4px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tt-yut-top { position: absolute; top: 5px; right: 6px; z-index: 1; display: flex; gap: 6px; }
.tt-yut-stage .tt-yut-top button { min-height: 40px; padding: 6px 10px; border: 1px solid rgba(255, 240, 205, .5); border-radius: 10px; background: rgba(36, 22, 14, .8); color: #fff3dd; font-size: .85rem; white-space: nowrap; }
.tt-yut-stage .tt-yut-top button[aria-pressed="true"] { border-color: #f2c14e; color: #ffe9a8; }

.tt-yut-bar { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; padding: 6px 8px 8px; background: rgba(24, 14, 10, .78); }
.tt-yut-chips { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-height: 38px; }
.tt-yut-stage .tt-yut-chip { min-width: 54px; min-height: 36px; padding: 3px 12px; border: 2px solid rgba(255, 255, 255, .35); border-radius: 999px; background: #5a4634; color: #fff; font-size: 1rem; font-weight: 800; }
.tt-yut-stage .tt-yut-chip[data-team="0"] { background: #1f4c93; }
.tt-yut-stage .tt-yut-chip[data-team="1"] { background: #96321a; }
.tt-yut-stage .tt-yut-chip[data-team="2"] { background: #1d5f38; }
.tt-yut-stage .tt-yut-chip[data-team="3"] { background: #80600a; }
.tt-yut-stage .tt-yut-chip[aria-pressed="true"] { border-color: #ffe9a8; box-shadow: 0 0 0 2px #ffe9a8; transform: translateY(-2px); }
.tt-yut-stage .tt-yut-chip:disabled { opacity: .72; cursor: default; }

.tt-yut-stage .tt-yut-bar > button { min-height: 50px; padding: 8px 14px; border: 2px solid rgba(255, 240, 205, .5); border-radius: 12px; background: #4a382a; color: #fff3dd; font-size: 1rem; }
.tt-yut-stage .tt-yut-bar > button:disabled { border-color: rgba(255, 240, 205, .2); background: #3a2e26; color: #c7b79c; cursor: default; }
.tt-yut-stage .tt-yut-bar > .tt-yut-throw { flex: 1 1 11rem; max-width: 24rem; min-height: 56px; border-color: #fff0c2; background: #e8a51f; box-shadow: 0 4px 0 #8a5a0a; color: #2a1a10; font-size: 1.25rem; font-weight: 900; letter-spacing: .02em; }
.tt-yut-stage .tt-yut-bar > .tt-yut-throw:active { box-shadow: 0 1px 0 #8a5a0a; transform: translateY(3px); }
.tt-yut-stage .tt-yut-bar > .tt-yut-throw:disabled { border-color: rgba(255, 240, 205, .2); background: #3a2e26; box-shadow: none; color: #c7b79c; font-size: 1.05rem; transform: none; }
.tt-yut-stage .tt-yut-bar > .tt-yut-throw.tt-yut-ready { animation: tt-yut-pulse 1.1s ease-in-out infinite; }
.tt-yut-stage .tt-yut-bar > [data-go],
.tt-yut-stage .tt-yut-bar > [data-again] { flex: 1 1 8rem; max-width: 18rem; border-color: #fff0c2; background: #e8a51f; box-shadow: 0 4px 0 #8a5a0a; color: #2a1a10; font-size: 1.15rem; font-weight: 900; }
.tt-yut-stage .tt-yut-bar > [data-again]:disabled { border-color: rgba(255, 240, 205, .2); background: #3a2e26; box-shadow: none; color: #c7b79c; }
/* 혼자 남은 대기실에서 컴퓨터와 연습하는 단추: 폭 360px 휴대폰에서도 대전 시작 옆 한 줄에 들어가도록 기준 너비를 작게 두고 글자는 두 줄로 접힌다. */
.tt-yut-stage .tt-yut-bar > [data-practice] { flex: 1 1 5.5rem; max-width: 16rem; padding: 8px 6px; border-color: #bfe8c9; background: #2f6b47; color: #f0fff4; font-size: .95rem; font-weight: 800; line-height: 1.2; word-break: keep-all; }
.tt-yut-stage .tt-yut-bar > [data-practice]:disabled { border-color: rgba(255, 240, 205, .2); background: #3a2e26; color: #c7b79c; }
@keyframes tt-yut-pulse {
  50% { box-shadow: 0 4px 0 #8a5a0a, 0 0 0 7px rgba(255, 220, 120, .38); }
}

.tt-yut-cheers { position: absolute; bottom: 120px; left: 50%; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: min(100% - 16px, 30rem); padding: 8px; border-radius: 12px; background: rgba(24, 14, 10, .92); transform: translateX(-50%); }
.tt-yut-stage .tt-yut-cheers button { min-height: 44px; padding: 6px 12px; background: #fff3dd; color: #2a1a10; }

.tt-yut-stage:fullscreen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
.tt-yut-stage:-webkit-full-screen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; }
.tt-yut-stage.tt-yut-fill { position: fixed; inset: 0; z-index: 9999; width: auto; height: auto; max-height: none; aspect-ratio: auto; border-radius: 0; }
html.tt-yut-lock, html.tt-yut-lock body { overflow: hidden; overscroll-behavior: none; }

.tt-game-panel p.tt-yut-log { min-height: 1.5em; margin: 8px 0; color: #4e4264; font-weight: 600; overflow-wrap: anywhere; }
.tt-yut-people { width: min(100%, 56rem); margin: 8px 0; padding: 8px 12px; border: 1px solid #e3d6bd; border-radius: 12px; background: #fffaf0; box-sizing: border-box; }
.tt-yut-people summary { min-height: 32px; font-weight: 700; line-height: 32px; cursor: pointer; }
.tt-yut-people ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 4px 12px; margin: 6px 0 2px; padding: 0; list-style: none; }
.tt-yut-people li { font-size: .92rem; overflow-wrap: anywhere; }
.tt-yut-help { color: #4e4264; font-size: .9rem; }
.tt-yut-help h3 { margin: 14px 0 6px; font-size: 1rem; }
.tt-yut-help ul { margin: 0; padding-left: 1.2em; }
.tt-yut-help li { margin: 4px 0; }

@media (min-width: 900px) {
  .tt-yut-stage.tt-yut-big .tt-yut-bar > button { min-height: 60px; font-size: 1.15rem; }
  .tt-yut-stage.tt-yut-big .tt-yut-bar > .tt-yut-throw { min-height: 68px; font-size: 1.5rem; }
  .tt-yut-stage.tt-yut-big .tt-yut-chip { min-width: 68px; min-height: 44px; font-size: 1.2rem; }
  .tt-yut-stage.tt-yut-big .tt-yut-chips { min-height: 48px; }
  .tt-yut-stage.tt-yut-big .tt-yut-top button { min-height: 44px; font-size: .95rem; }
}
@media (max-width: 640px) {
  .tt-yut-stage { aspect-ratio: 5 / 8; }
  .tt-yut-stage.tt-yut-fill { aspect-ratio: auto; }
  .tt-yut-top { right: 4px; gap: 4px; }
  .tt-yut-stage .tt-yut-top button { min-height: 38px; padding: 4px 7px; font-size: .78rem; }
  .tt-yut-stage .tt-yut-bar > button { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-yut-stage .tt-yut-bar > .tt-yut-throw.tt-yut-ready { animation: none; }
  .tt-yut-stage .tt-yut-chip[aria-pressed="true"] { transform: none; }
}