:root {
  color-scheme: dark;
  --bg: #13100c;
  --panel: #1f1914;
  --line: #3b3026;
  --gold: #f0bf55;
  --gold-d: #c99633;
  --ink: #5f3f22;
  --me: #e5553c;
  --foe: #5b7fe6;
  --text: #f5ede0;
  --muted: #bcae98;
  --ok: #9bd8a4;
  --warn: #f4b768;
}

* {
  box-sizing: border-box;
  touch-action: manipulation;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(110% 55% at 50% 0%, #2a1f15 0%, rgba(42, 31, 21, 0) 70%),
    var(--bg);
}

main {
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding:
    max(60px, env(safe-area-inset-top))
    16px
    max(20px, env(safe-area-inset-bottom));
  gap: 12px;
}

/* 점수바: STREAK | BEST | New 버튼 */
.score-bar {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.score-box {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
  min-width: 0;
}

.score-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.score-val,
.best-val {
  display: block;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 2px;
  line-height: 1.1;
}

.new-btn {
  flex: 0 0 auto;
  font: inherit;
  color: #1c1208;
  background: var(--gold);
  border: none;
  border-radius: 12px;
  padding: 0 18px;
  min-height: 56px;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}

.new-btn:active { background: var(--gold-d); }

#game {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}

/* ─── game layout ─────────────────────────────────────── */
.yt-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.yt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  min-height: 30px;
}

.yt-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.yt-ico { width: 18px; height: 18px; display: inline-flex; }
.yt-ico svg, .mini svg { width: 100%; height: 100%; display: block; }

.pm { fill: var(--me); stroke: #ffe6d8; stroke-width: 1.6; }
.pm-in { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.3; }
.pf { fill: var(--foe); stroke: #e4ebff; stroke-width: 1.6; }
.pf-in { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.2; }

.yt-wait {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.yt-tk { display: inline-flex; gap: 2px; }
.mini { width: 14px; height: 14px; display: inline-flex; transition: opacity 0.2s; }
.mini.gone { opacity: 0.18; }
.yt-cnt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.yt-cnt b { color: var(--text); }
.yt-lvl { white-space: nowrap; }
.yt-lvl b { color: var(--gold); }

.yt-row.foe .yt-wait { margin-right: auto; }

/* my waiting tray doubles as the "enter a piece" button */
.yt-tray {
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 12px 4px 10px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.yt-tray.can {
  border-color: #ffd36b;
  box-shadow: 0 0 0 1px rgba(255, 211, 107, 0.35), 0 0 14px rgba(255, 211, 107, 0.25);
  animation: tray-pulse 1.4s ease-in-out infinite;
}
.yt-tray.sel {
  background: #3a2c17;
  border-color: #ffd36b;
  animation: none;
  box-shadow: 0 0 0 2px #ffd36b;
}
@keyframes tray-pulse { 50% { box-shadow: 0 0 0 1px rgba(255, 211, 107, 0.6), 0 0 20px rgba(255, 211, 107, 0.45); } }

.yt-pool {
  flex: 1 1 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}
.yt-tray { flex: 0 1 auto; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #3a2c17;
  border: 1px solid #6c5326;
  color: #ffe3a6;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  animation: chip-in 0.25s ease-out;
}
.chip b { font-size: 14px; color: #fff; }
.chip i { font-style: normal; font-weight: 900; color: var(--gold); }
.yt-pool.many { max-height: 40px; gap: 2px 3px; }
.yt-pool.many .chip { padding: 2px 8px; font-size: 11px; }
.yt-pool.many .chip .nm { display: none; }
.yt-pool.many .chip b { font-size: 13px; }
.chip.back { background: #2e2447; border-color: #5a4a8c; color: #d8ccff; }
@keyframes chip-in { from { transform: scale(0.6); opacity: 0; } }

/* board */
.yt-boardbox {
  --rows: 196px;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}
/* rival row + square board + my row, as wide as the height allows */
.yt-stage {
  width: min(100cqw, 100cqh - var(--rows));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yt-board {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
  overflow: visible;
}

.yt-board .mat { fill: #3a2919; stroke: #5d4229; stroke-width: 1; }
.yt-board .mat-in { fill: url(#yt-paper); }
.yt-board .ln { fill: none; stroke: var(--ink); stroke-width: 1.15; stroke-linejoin: round; }
.yt-board .st { fill: #fdf6e6; stroke: var(--ink); stroke-width: 0.9; transition: fill 0.2s; }
.yt-board .st.big { fill: #f1dfb6; stroke-width: 1.2; }
.yt-board .st.big.home { fill: #f6cf73; }
.yt-board .st-in { fill: none; stroke: var(--ink); stroke-width: 0.6; pointer-events: none; }
.yt-board .chev { fill: none; stroke: #a5703c; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.yt-board .lbl { font-size: 5px; font-weight: 800; fill: #f0d9ae; letter-spacing: 0.02em; pointer-events: none; }
.yt-board .exit circle { fill: rgba(122, 84, 48, 0.08); stroke: #a5703c; stroke-width: 0.8; stroke-dasharray: 1.4 1.1; }
.yt-board .exit path { fill: none; stroke: #a5703c; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }

.yt-board .rt { fill: none; stroke: #d9921f; stroke-width: 1.7; stroke-dasharray: 2.4 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; pointer-events: none; }
.yt-board .rt.back { stroke: #7b5cd6; }
.yt-board .selring { fill: rgba(255, 255, 255, 0.35); stroke: #fff; stroke-width: 1.3; pointer-events: none; }

.tok { cursor: default; }
.tok .tk-me { fill: url(#yt-me); stroke: #fff1e6; stroke-width: 0.9; }
.tok .tk-me-in { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.7; }
.tok .tk-foe { fill: url(#yt-foe); stroke: #eef2ff; stroke-width: 0.9; }
.tok .tk-foe-in { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.6; }
.tok .under { opacity: 0.85; }
.tok .badge circle { fill: #fff; stroke: #2b1d10; stroke-width: 0.6; }
.tok .badge text { font-size: 4.4px; font-weight: 900; fill: #2b1d10; }
.tok { filter: drop-shadow(0 0.7px 0.6px rgba(40, 20, 0, 0.45)); }
.tok.me.can { cursor: pointer; animation: tok-glow 1.3s ease-in-out infinite; }
.tok.me.sel { filter: drop-shadow(0 0 1.4px #ffd36b) drop-shadow(0 0 2.6px #ffd36b); animation: none; }
.tok.foe.src { filter: drop-shadow(0 0 1.6px #9fb6ff) drop-shadow(0 0 2.8px #9fb6ff); }
.tok.caught { opacity: 0; transition: opacity 0.3s ease-in; }
.tok.moving { pointer-events: none; }
@keyframes tok-glow {
  0%, 100% { filter: drop-shadow(0 0 0.8px #ffd36b) drop-shadow(0 0.7px 0.6px rgba(40, 20, 0, 0.45)); }
  50% { filter: drop-shadow(0 0 2.6px #ffd36b) drop-shadow(0 0 1px #ffd36b); }
}

.mk { cursor: pointer; }
.mk .hz { fill: transparent; }
.mk .ring { fill: rgba(255, 205, 90, 0.42); stroke: #c98613; stroke-width: 1.1; stroke-dasharray: 2 1.2; animation: mk-spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.mk text { font-size: 6px; font-weight: 900; fill: #4a2a08; pointer-events: none; }
.mk.off text { font-size: 3.6px; }
.mk.hit .ring { fill: rgba(232, 66, 44, 0.42); stroke: #b51f0d; }
.mk.hit text { fill: #fff; }
.mk.back .ring { fill: rgba(140, 110, 230, 0.42); stroke: #6346c0; }
.mk.foe-tgt .ring { fill: rgba(91, 127, 230, 0.3); stroke: #3554b8; }
.mk:focus-visible { outline: none; }
.mk:focus-visible .ring { stroke: #fff; stroke-width: 1.6; }
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* controls: sticks | result | throw */
.yt-ctl {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 7px 8px 7px 12px;
}
.yt-sticks { display: flex; gap: 5px; flex: 0 0 auto; }
.stk {
  position: relative;
  width: 11px;
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(90deg, #4a2e16 0%, #8b5b2e 42%, #a56d39 55%, #4a2e16 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  transition: background 0.08s;
}
.stk::before, .stk::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(30, 15, 5, 0.55);
}
.stk::before { top: 12px; }
.stk::after { bottom: 12px; }
.stk.flat {
  background: linear-gradient(90deg, #e9cf98 0%, #f8e7c1 50%, #e9cf98 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 80, 30, 0.45);
}
.stk.flat::before, .stk.flat::after { background: rgba(150, 105, 50, 0.35); }
.stk i { display: none; }
.stk.mark.flat i {
  display: block;
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background:
    linear-gradient(45deg, transparent 40%, #c8321f 40%, #c8321f 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, #c8321f 40%, #c8321f 60%, transparent 60%);
}
.yt-sticks.rolling .stk { animation: stk-roll 0.14s ease-in-out infinite alternate; }
.yt-sticks.rolling .stk:nth-child(2) { animation-delay: -0.05s; }
.yt-sticks.rolling .stk:nth-child(3) { animation-delay: -0.09s; }
.yt-sticks.rolling .stk:nth-child(4) { animation-delay: -0.12s; }
@keyframes stk-roll { from { transform: translateY(-4px) rotate(-14deg); } to { transform: translateY(2px) rotate(12deg); } }

.yt-res {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.yt-res b { font-size: 19px; font-weight: 900; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-res b.me { color: #ff9c84; }
.yt-res b.foe { color: #a9bcff; }
.yt-res small { font-size: 12px; color: var(--gold); font-weight: 700; min-height: 1em; }

.yt-throw {
  flex: 0 0 auto;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  color: #1c1208;
  background: var(--gold);
  border: none;
  border-radius: 12px;
  min-width: 96px;
  min-height: 52px;
  padding: 0 16px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.yt-throw:disabled { background: #3a3128; color: #8c7f6c; cursor: default; }
.yt-throw.ready { animation: throw-pulse 1.5s ease-in-out infinite; }
.yt-throw:active:not(:disabled) { transform: scale(0.97); background: var(--gold-d); }
@keyframes throw-pulse { 50% { box-shadow: 0 0 0 4px rgba(240, 191, 85, 0.25); } }

.yt-msg {
  margin: 0;
  min-height: 2.6em;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
}
.yt-msg b { color: var(--text); }
.yt-msg.ok { color: var(--ok); animation: msg-pop 0.35s ease-out; }
@keyframes msg-pop { from { transform: scale(0.92); opacity: 0.4; } }
.yt-msg.warn { color: var(--warn); }

/* 좌상단 ← 홈, 우상단 🏆 명예의 전당 — 모든 게임 공통 chrome */
.home-link,
.hof-link {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  z-index: 10;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.home-link { left:  max(12px, env(safe-area-inset-left)); }
.hof-link  { right: max(12px, env(safe-area-inset-right)); }

@media (hover: hover) {
  .home-link:hover,
  .hof-link:hover {
    background: rgba(0, 0, 0, 0.55);
  }
}

/* 오버레이 (시작 / 게임 종료) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 20px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.overlay[hidden] { display: none; }

.overlay-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  min-width: 240px;
  max-width: 340px;
  width: 100%;
}

.overlay-card h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.overlay-score {
  margin: 0;
  font-size: 56px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gold);
}

.overlay-sub { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.overlay-howto {
  margin: 0; font-size: 14px; line-height: 1.55; color: #e8dcc6;
  text-align: left; white-space: pre-line; max-height: 52vh;
  overflow-y: auto; touch-action: pan-y;
}
.overlay-howto b { color: var(--gold); }

.overlay-card button {
  font: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 12px 20px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.overlay-card button:active { background: rgba(255, 255, 255, 0.16); }

.overlay-card .save-btn,
.overlay-card .start-btn {
  background: var(--gold);
  border-color: var(--gold);
  color: #1c1208;
}

.overlay-card .save-btn:active,
.overlay-card .start-btn:active { background: var(--gold-d); }

@media (prefers-reduced-motion: reduce) {
  .tok.me.can, .yt-tray.can, .yt-throw.ready, .mk .ring, .chip, .yt-msg.ok { animation: none; }
}

/* short screens (320×568 and similar) */
@media (max-height: 640px) {
  main { gap: 8px; }
  .yt-wrap { gap: 5px; }
  .yt-row { min-height: 26px; font-size: 12px; }
  .yt-boardbox { --rows: 166px; }
  .yt-stage { gap: 5px; }
  .yt-tray { min-height: 34px; padding: 2px 10px 2px 8px; }
  .stk { height: 34px; width: 10px; }
  .stk::before { top: 9px; } .stk::after { bottom: 9px; }
  .yt-ctl { padding: 5px 6px 5px 10px; }
  .yt-res b { font-size: 16px; }
  .yt-throw { min-height: 44px; min-width: 84px; font-size: 15px; }
  .yt-msg { font-size: 12px; min-height: 2.5em; }
  .overlay-card { padding: 14px 16px; gap: 8px; }
  .overlay-card h2 { font-size: 19px; }
  .overlay-howto { font-size: 13px; line-height: 1.45; max-height: 34vh; }
  .overlay-card button { min-height: 40px; padding: 9px 16px; }
}
@media (max-width: 350px) {
  .yt-tray .yt-who { font-size: 0; gap: 0; }
  .yt-tray .yt-cnt .w { display: none; }
  .yt-pool.two { gap: 2px 3px; }
  .yt-pool.two .chip { padding: 2px 8px; }
  .yt-pool.two .chip .nm { display: none; }
  .yt-cnt { font-size: 11px; }
  .mini { width: 12px; height: 12px; }
  .chip { padding: 3px 7px; font-size: 11px; }
}