/* 딱콕 바둑 — 무대, 위쪽 대국자 표시, 판, 아래 단추, 설정·계가·결과 카드 */
.tt-baduk-stage {
  --board: 320px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hud" "status" "meter" "board" "bar";
  justify-items: center;
  align-content: start;
  gap: 6px;
  width: 100%;
  min-height: 420px;
  padding: 8px 6px 10px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 214, 140, .14), transparent 60%),
    linear-gradient(180deg, #2d3b3a, #1b2524 70%, #161d1c);
  color: #2b1b0e;
  font-size: 16px;
  line-height: 1.25;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tt-baduk-stage.is-play,
.tt-baduk-stage.tt-baduk-fill { overscroll-behavior: contain; }
.tt-baduk-stage.tt-baduk-fill { position: fixed; inset: 0; z-index: 9999; width: auto; height: auto; min-height: 0; border-radius: 0; align-content: center; }
.tt-baduk-stage:fullscreen { width: 100%; height: 100%; border-radius: 0; align-content: center; }
html.tt-baduk-lock, html.tt-baduk-lock body { overflow: hidden; overscroll-behavior: none; }
.tt-baduk-stage p, .tt-baduk-stage h3 { margin: 0; }

/* 단추(사이트 공통 단추 모양을 이 무대 안에서는 덮어쓴다) */
.tt-baduk-stage button,
.tt-baduk-stage button[aria-pressed="false"],
.tt-baduk-stage button:disabled {
  min-height: 44px;
  margin: 0;
  padding: 6px 10px;
  border: 2px solid rgba(255, 233, 190, .35);
  border-radius: 12px;
  background: linear-gradient(180deg, #5b3d26, #46301e);
  color: #fff4df;
  font: inherit;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: 0 3px 0 #2a1b10;
  transition: transform .08s, box-shadow .08s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.tt-baduk-stage button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #2a1b10; }
.tt-baduk-stage button:disabled { opacity: .45; cursor: default; }
.tt-baduk-stage button:focus-visible { outline: 3px solid #8fd3ff; outline-offset: 2px; }
.tt-baduk-stage button.is-main { background: linear-gradient(180deg, #f2b83b, #d9902a); color: #2b1606; border-color: #ffe3a3; box-shadow: 0 3px 0 #8b5512; }
.tt-baduk-stage button[aria-pressed="true"] { background: linear-gradient(180deg, #f6d27c, #e2ac45); color: #2b1606; border-color: #fff0c4; box-shadow: 0 3px 0 #8b5512; }

/* 세로 화면: 옆 칸은 풀어서 위(대국자·상태)와 아래(단추)로 나눈다 */
.tt-baduk-side { display: contents; }
.tt-baduk-hud { grid-area: hud; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: min(100%, var(--board)); }
.tt-baduk-status { grid-area: status; }
.tt-baduk-meter { grid-area: meter; }
.tt-baduk-wrap { grid-area: board; }
.tt-baduk-bar, .tt-baduk-confirm { grid-area: bar; }

.tt-baduk-player {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 4px 6px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 233, 190, .25);
  border-radius: 14px;
  background: rgba(255, 246, 228, .9);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tt-baduk-player.is-turn { border-color: #f2b83b; box-shadow: 0 0 0 3px rgba(242, 184, 59, .35); transform: translateY(-1px); }
.tt-baduk-face { width: 40px; height: 40px; border-radius: 50%; background: #fff3dc; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); }
.tt-baduk-player.is-thinking .tt-baduk-face { animation: tt-baduk-bob .9s ease-in-out infinite; }
.tt-baduk-who { min-width: 0; }
.tt-baduk-who b { display: block; overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.tt-baduk-who small { display: block; overflow: hidden; color: #7a5a3a; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
/* 돌통: 둥근 나무 통에 따낸 돌 수 */
.tt-baduk-bowl {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  border-radius: 50% / 45%;
  background: radial-gradient(70% 55% at 50% 35%, #8a5a2e, #5a3418 70%, #3e220e);
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, .45), 0 2px 0 rgba(0, 0, 0, .25);
}
.tt-baduk-bowl i { position: absolute; inset: 7px 9px 9px; border-radius: 50%; }
.tt-baduk-player[data-player="1"] .tt-baduk-bowl i { background: radial-gradient(circle at 35% 35%, #fff, #c9c4b6); }
.tt-baduk-player[data-player="2"] .tt-baduk-bowl i { background: radial-gradient(circle at 35% 35%, #777, #0b0b0b); }
.tt-baduk-bowl span {
  position: relative;
  min-width: 1.4em;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(255, 244, 223, .92);
  color: #2b1b0e;
  font-size: .8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transform: translateY(9px);
}
.tt-baduk-bowl.is-bump { animation: tt-baduk-bump .28s ease-out; }
.tt-baduk-say {
  position: absolute;
  top: calc(100% + 6px);
  left: 6px;
  right: 6px;
  z-index: 6;
  padding: 7px 10px;
  border-radius: 12px;
  background: #fffdf6;
  color: #2b1b0e;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  animation: tt-baduk-say .25s ease-out;
  pointer-events: none;
}
.tt-baduk-say::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 18px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: #fffdf6;
}

.tt-baduk-status {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, var(--board));
  min-height: 24px;
  color: #ffeec8;
  font-size: .9rem;
  font-weight: 800;
}
.tt-baduk-status > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-baduk-clock { flex: 0 0 64px; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.tt-baduk-clock i { display: block; width: 0; height: 100%; background: #f2b83b; transition: width .1s linear; }
.tt-baduk-meter {
  position: relative;
  width: min(100%, var(--board));
  height: 14px;
  overflow: hidden;
  border-radius: 7px;
  background: #f4efe2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}
.tt-baduk-meter i { display: block; width: 50%; height: 100%; background: linear-gradient(180deg, #3c3c3c, #0d0d0d); transition: width .5s ease; }
.tt-baduk-meter small {
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: .66rem;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
  text-shadow: 0 0 2px #000, 0 0 3px #000;
}

/* 판 */
.tt-baduk-wrap { position: relative; width: var(--board); height: var(--board); }
.tt-baduk-board {
  display: block;
  border-radius: 6px;
  box-shadow: 0 5px 0 #8a5a2b, 0 7px 0 #5e3a18, 0 16px 26px rgba(0, 0, 0, .45);
  touch-action: none;
  outline: none;
  cursor: pointer;
}
.tt-baduk-board:focus-visible { outline: 3px solid #8fd3ff; outline-offset: 3px; }
.tt-baduk-wrap.is-tap { animation: tt-baduk-tap .12s ease-out; }
.tt-baduk-wrap.is-shake { animation: tt-baduk-shake .42s ease-out; }
.tt-baduk-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.tt-baduk-pop {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 5;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(30, 20, 10, .85);
  color: #fff4df;
  font-size: 1.05rem;
  font-weight: 900;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tt-baduk-pop.is-on { animation: tt-baduk-pop 1.4s ease-out forwards; }
.tt-baduk-pop.is-big { background: #d6402a; font-size: 1.4rem; }
.tt-baduk-pop.is-bad { background: rgba(160, 30, 20, .92); font-size: .92rem; white-space: normal; width: max-content; max-width: 86%; text-align: center; }
.tt-baduk-pop.is-pass { background: rgba(40, 60, 90, .9); }
.tt-baduk-coach {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 252, 240, .96);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  font-size: .86rem;
  font-weight: 700;
}
.tt-baduk-coach p { flex: 1; }
.tt-baduk-coach button { flex: none; }

/* 아래 단추 */
.tt-baduk-bar {
  display: flex;
  gap: 6px;
  width: min(100%, var(--board));
}
.tt-baduk-bar button { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: .9rem; white-space: nowrap; }
.tt-baduk-bar .tt-baduk-menu { flex: 0 0 48px; }
.tt-baduk-bar button.is-sure { background: #c0392b; border-color: #ffb3a8; box-shadow: 0 3px 0 #6e1b12; }
.tt-baduk-confirm {
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  width: min(100%, var(--board));
}
.tt-baduk-confirm b { margin-left: 4px; }
.tt-baduk-tops {
  position: absolute;
  right: 8px;
  bottom: 64px;
  z-index: 9;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(30, 22, 14, .94);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}

/* 카드(설정·계가·결과) */
.tt-baduk-card {
  position: absolute;
  z-index: 7;
  box-sizing: border-box;
  border: 2px solid rgba(255, 233, 190, .6);
  border-radius: 18px;
  background: rgba(255, 249, 236, .97);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.tt-baduk-setup {
  inset: 8px;
  display: flex;
  max-height: calc(100% - 16px);
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 12px;
  overscroll-behavior: contain;
}
.tt-baduk-setup h3 { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; }
.tt-baduk-logo { position: relative; width: 34px; height: 24px; }
.tt-baduk-logo i { position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.tt-baduk-logo i:first-child { left: 0; background: radial-gradient(circle at 35% 35%, #777, #050505); }
.tt-baduk-logo i:last-child { left: 13px; background: radial-gradient(circle at 35% 35%, #fff, #c4bfb2); }
.tt-baduk-row { display: grid; grid-template-columns: 3.3em minmax(0, 1fr); align-items: center; gap: 6px; }
.tt-baduk-row > b { font-size: .88rem; }
.tt-baduk-seg { display: flex; flex-wrap: wrap; gap: 5px; }
.tt-baduk-seg button { flex: 1 1 0; min-width: 0; padding: 5px 4px; font-size: .9rem; white-space: nowrap; }
.tt-baduk-seg button small { display: block; margin-top: 2px; font-size: .66rem; font-weight: 700; opacity: .85; }
.tt-baduk-levels button { flex: 1 1 calc(20% - 5px); padding: 5px 1px; letter-spacing: -.03em; }
.tt-baduk-small button { flex: 1 1 calc(20% - 5px); min-height: 40px; }
.tt-baduk-stage .tt-baduk-small button { min-height: 44px; }
.tt-baduk-note { color: #6b4a2a; font-size: .84rem; }
.tt-baduk-go { display: flex; gap: 8px; }
.tt-baduk-go button { flex: 1; font-size: 1.05rem; }
.tt-baduk-scorecard {
  left: 6px;
  right: 6px;
  top: 6px;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  font-size: .88rem;
  font-weight: 700;
}
.tt-baduk-tally { font-size: 1.05rem; font-weight: 900; }
.tt-baduk-result {
  z-index: 9;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 8px;
  width: min(92%, 380px);
  max-height: calc(100% - 16px);
  overflow: auto;
  padding: 14px 16px;
  text-align: center;
  transform: translate(-50%, -50%);
  animation: tt-baduk-card .35s ease-out;
}
.tt-baduk-result h3 { font-size: 1.6rem; }
.tt-baduk-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tt-baduk-table th, .tt-baduk-table td { padding: 4px 6px; border-bottom: 1px solid rgba(90, 60, 30, .2); }
.tt-baduk-table th { color: #6b4a2a; font-size: .85rem; text-align: left; }
.tt-baduk-table .is-sum td, .tt-baduk-table .is-sum th { border-bottom: 0; color: #2b1b0e; font-size: 1.05rem; font-weight: 900; }
.tt-baduk-points { color: #b0551a; font-size: 1.1rem; font-weight: 900; }

/* 넓은 화면: 판 왼쪽, 표시와 단추 오른쪽 */
.tt-baduk-stage.is-wide {
  grid-template-columns: var(--board) minmax(0, 1fr);
  grid-template-areas: "board side";
  align-content: center;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
}
.tt-baduk-stage.is-wide .tt-baduk-side { grid-area: side; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; justify-self: start; }
.tt-baduk-stage.is-wide .tt-baduk-hud { grid-template-columns: 1fr; width: 100%; }
.tt-baduk-stage.is-wide .tt-baduk-status,
.tt-baduk-stage.is-wide .tt-baduk-meter,
.tt-baduk-stage.is-wide .tt-baduk-confirm { width: 100%; }
.tt-baduk-stage.is-wide .tt-baduk-bar { flex-wrap: wrap; width: 100%; }
.tt-baduk-stage.is-wide .tt-baduk-bar button { flex: 1 1 calc(50% - 6px); }
.tt-baduk-stage.is-wide .tt-baduk-bar .tt-baduk-menu { flex: 1 1 100%; }
.tt-baduk-stage.is-wide .tt-baduk-say { top: 50%; left: auto; right: calc(100% + 10px); width: max-content; max-width: 220px; transform: translateY(-50%); }
.tt-baduk-stage.is-wide .tt-baduk-say::before { top: 50%; left: auto; right: -6px; border: 6px solid transparent; border-right: 0; border-left-color: #fffdf6; transform: translateY(-50%); }
.tt-baduk-stage.is-wide .tt-baduk-scorecard { left: auto; right: 10px; top: 10px; width: min(340px, calc(100% - var(--board) - 40px)); }
.tt-baduk-stage.is-wide .tt-baduk-tops { bottom: auto; top: 10px; }

@media (max-width: 380px) {
  .tt-baduk-stage { padding: 6px 4px 8px; }
  .tt-baduk-player { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px; padding: 3px 4px; }
  .tt-baduk-face { width: 34px; height: 34px; }
  .tt-baduk-bowl { width: 32px; }
  .tt-baduk-bar button { font-size: .84rem; }
}

@keyframes tt-baduk-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes tt-baduk-bump { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-4deg); } 100% { transform: scale(1); } }
@keyframes tt-baduk-say { from { opacity: 0; transform: translateY(-4px) scale(.94); } to { opacity: 1; transform: none; } }
.tt-baduk-stage.is-wide .tt-baduk-say { animation: none; }
@keyframes tt-baduk-tap { 0% { transform: translateY(0); } 40% { transform: translateY(1.5px); } 100% { transform: translateY(0); } }
@keyframes tt-baduk-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-5px, 2px) rotate(-.6deg); }
  30% { transform: translate(5px, -2px) rotate(.6deg); }
  45% { transform: translate(-4px, 1px); }
  60% { transform: translate(3px, -1px); }
  80% { transform: translate(-1px, 0); }
}
@keyframes tt-baduk-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  25% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -62%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(.96); }
}
@keyframes tt-baduk-card { from { opacity: 0; transform: translate(-50%, -44%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) {
  .tt-baduk-wrap.is-shake, .tt-baduk-wrap.is-tap, .tt-baduk-player.is-thinking .tt-baduk-face { animation: none; }
}

/* 처음 화면: 설정 카드만 무대 안에 놓아 카드 높이만큼 무대가 커진다 */
.tt-baduk-stage.is-setup { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "board"; align-content: start; }
.tt-baduk-stage.is-setup > .tt-baduk-side,
.tt-baduk-stage.is-setup > .tt-baduk-wrap { display: none; }
.tt-baduk-stage.is-setup .tt-baduk-setup { position: relative; inset: auto; grid-area: board; width: min(100%, 520px); max-height: none; }
.tt-baduk-stage.is-setup.tt-baduk-fill .tt-baduk-setup,
.tt-baduk-stage.is-setup:fullscreen .tt-baduk-setup { max-height: calc(100vh - 20px); }
.tt-baduk-step { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 6px; }
.tt-baduk-step output { color: #2b1b0e; font-size: 1.05rem; font-weight: 900; text-align: center; }
.tt-baduk-stage .tt-baduk-step button { font-size: 1.3rem; }
.tt-baduk-stage.is-setup.is-wide .tt-baduk-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; width: min(100%, 760px); }
.tt-baduk-stage.is-setup.is-wide .tt-baduk-setup > h3,
.tt-baduk-stage.is-setup.is-wide .tt-baduk-setup > .tt-baduk-note,
.tt-baduk-stage.is-setup.is-wide .tt-baduk-setup > .tt-baduk-go { grid-column: 1 / -1; }
/* 세로 화면 계가: 판을 가리지 않게 아래 단추 자리에 놓는다 */
.tt-baduk-stage.is-scoring:not(.is-wide) .tt-baduk-bar { display: none; }
.tt-baduk-stage.is-scoring:not(.is-wide) .tt-baduk-scorecard { position: relative; inset: auto; grid-area: bar; width: min(100%, var(--board)); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }