/**
 * 주사위 여행 (Dice Tour) — 프론트 스타일.
 * 모든 선택자를 .dt-root 아래로 스코프해 테마와 충돌하지 않게 한다.
 */

.dt-root {
    --dt-bg: #f7f2e8;
    --dt-panel: #fffdf8;
    --dt-line: #ddd2bd;
    --dt-ink: #3a3226;
    --dt-muted: #7a6c55;
    --dt-felt: #1f6b45;
    --dt-felt2: #17553a;
    --dt-tile: #fffdf6;
    --dt-tile-line: #cbbb9d;
    --dt-gold: #f0b400;

    display: block;
    margin: 18px 0;
    padding: 16px;
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--dt-bg), #ece2cf);
    border: 1px solid var(--dt-line);
    border-radius: 12px;
    color: var(--dt-ink);
    font-family: 'Segoe UI', 'Noto Sans KR', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(80, 60, 30, .12);
}
.dt-root * { box-sizing: border-box; }
/* 테마 전역 규칙 방어(여백은 2클래스로 직접 지정) */
.dt-root .dt-inner-reset, .dt-root .dt-inner-reset * { margin: 0; }

/* ── 버튼 ───────────────────────────────────────────── */
.dt-root .dt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 15px; border-radius: 7px; cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .25); background: #f1ead9; color: var(--dt-ink);
    font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 rgba(0, 0, 0, .10);
}
.dt-root .dt-btn:hover { filter: brightness(1.04); }
.dt-root .dt-btn:active { transform: translateY(1px); box-shadow: none; }
.dt-root .dt-btn:disabled { background: #d8d2c6; color: #8b8377; cursor: not-allowed; box-shadow: none; }
.dt-root .dt-btn-primary { background: #0f766e; border-color: #0a4f47; color: #fff; }
.dt-root .dt-btn-blue    { background: #1d4ed8; border-color: #16389e; color: #fff; }
.dt-root .dt-btn-gold    { background: #b45309; border-color: #7c3a06; color: #fff; }
.dt-root .dt-btn-danger  { background: #b91c1c; border-color: #7f1414; color: #fff; }
.dt-root .dt-btn-ghost   { background: transparent; }

/* ── 로비 ───────────────────────────────────────────── */
.dt-root .dt-lobby { background: var(--dt-panel); border: 1px solid var(--dt-line); border-radius: 10px; padding: 14px 16px; }
.dt-root .dt-lobby-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.dt-root .dt-lobby-head strong { font-size: 17px; }
.dt-root .dt-lobby-head span { font-size: 13px; color: var(--dt-muted); }
.dt-root .dt-lobby-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dt-root .dt-lobby-row label { font-size: 13px; font-weight: 700; color: var(--dt-muted); min-width: 76px; }
.dt-root .dt-lobby-row select,
.dt-root .dt-lobby-row input {
    padding: 8px 10px; border: 1px solid #c8b895; border-radius: 6px; background: #fffdf8; color: inherit;
}
.dt-root .dt-lobby-row input { width: 140px; letter-spacing: .12em; text-transform: uppercase; }
.dt-root .dt-lobby-msg { margin-top: 10px; font-size: 13px; min-height: 18px; color: var(--dt-muted); }
.dt-root .dt-lobby-msg.is-ok { color: #166534; font-weight: 700; }
.dt-root .dt-lobby-msg.is-warn { color: #991b1b; font-weight: 700; }
.dt-root .dt-room-code { font-size: 20px; font-weight: 800; letter-spacing: .18em; color: #0f766e; }

/* ── 상태 줄 ────────────────────────────────────────── */
.dt-root .dt-status {
    margin: 12px 0 10px; padding: 10px 14px; border-radius: 8px; text-align: center; font-weight: 700;
    background: var(--dt-panel); border: 1px solid var(--dt-line);
}
.dt-root .dt-status.is-mine { color: #0f766e; }
.dt-root .dt-status.is-op   { color: #1d4ed8; }
.dt-root .dt-status.is-done { color: #b45309; }

/* ── 레이아웃 ───────────────────────────────────────── */
.dt-root .dt-layout { display: flex; gap: 14px; align-items: flex-start; }
.dt-root .dt-board-wrap { flex: 1 1 auto; min-width: 0; }
.dt-root .dt-side { flex: 0 0 260px; width: 260px; display: flex; flex-direction: column; gap: 10px; }

/* ── 보드(9×9 링) ───────────────────────────────────── */
.dt-root .dt-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-template-rows: repeat(9, minmax(0, 1fr));
    gap: 3px;
    aspect-ratio: 1 / 1;
    width: 100%;
    padding: 9px;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at 50% -20%, rgba(255, 255, 255, .13), transparent 62%),
        linear-gradient(180deg, var(--dt-felt), var(--dt-felt2));
    border: 9px solid #5d3f24;
    border-top-color: #6d4b2b; border-bottom-color: #4b3119;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .45), 0 6px 14px rgba(0, 0, 0, .25);
}

.dt-root .dt-tile {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; padding: 2px; overflow: hidden;
    background: var(--dt-tile);
    border: 1px solid var(--dt-tile-line);
    border-radius: 5px;
    font-size: 10px; line-height: 1.15; text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.dt-root .dt-tile::before {   /* 소유자 색 띠 */
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--dt-owner, transparent);
}
.dt-root .dt-tile-name { font-weight: 700; word-break: keep-all; }
.dt-root .dt-tile-price { font-size: 9px; color: #8a7c63; }
.dt-root .dt-tile-lv { font-size: 8px; letter-spacing: 1px; color: #b45309; min-height: 9px; }
.dt-root .dt-tile.is-mine   { outline: 2px solid #0f766e; outline-offset: -1px; }
.dt-root .dt-tile.is-target { box-shadow: 0 0 0 2px var(--dt-gold); }

/* 칸 종류 색 */
.dt-root .dt-t-start    { background: #e8f7ef; }
.dt-root .dt-t-island   { background: #fdf3dc; }
.dt-root .dt-t-travel   { background: #efe9ff; }
.dt-root .dt-t-fund_pot { background: #e6f6f4; }
.dt-root .dt-t-golden   { background: #fff8e1; }
.dt-root .dt-t-tax      { background: #fdecec; }
.dt-root .dt-t-fund     { background: #eef4ff; }

/* ── 중앙 영역 ──────────────────────────────────────── */
.dt-root .dt-center {
    grid-area: 2 / 2 / 9 / 9;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 12px; text-align: center;
    color: #e8f5ee;
}
.dt-root .dt-dice { display: flex; gap: 10px; }
.dt-root .dt-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 92%; }
.dt-root .dt-log {
    width: 100%; max-width: 420px; max-height: 108px; overflow-y: auto;
    font-size: 12px; color: #cfe9dd; text-align: left;
    background: rgba(0, 0, 0, .22); border-radius: 8px; padding: 8px 10px;
}
.dt-root .dt-log-line { padding: 1px 0; }
.dt-root .dt-log-line b { color: #fff; }

/* ── 참가자 / 내 자산 ───────────────────────────────── */
.dt-root .dt-players, .dt-root .dt-mine {
    background: var(--dt-panel); border: 1px solid var(--dt-line); border-radius: 10px; padding: 10px 12px;
}
.dt-root .dt-side-title { font-size: 12px; font-weight: 700; color: var(--dt-muted); margin-bottom: 8px; }
/* 이름이 잘리지 않도록 2줄 그리드: [점 | 이름 | 현금] / [위치] */
.dt-root .dt-player {
    display: grid; grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 2px 8px; align-items: center;
    padding: 6px 6px; border-top: 1px dashed var(--dt-line);
}
.dt-root .dt-player:first-of-type { border-top: 0; }
.dt-root .dt-player.is-turn { background: #eef7f4; border-radius: 6px; }
.dt-root .dt-player.is-me .dt-p-name { font-weight: 800; }
.dt-root .dt-player.is-out { opacity: .55; }
.dt-root .dt-player.is-out .dt-p-name { text-decoration: line-through; }
.dt-root .dt-dot { grid-column: 1; grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.dt-root .dt-p-name { grid-column: 2; grid-row: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-root .dt-p-cash { grid-column: 3; grid-row: 1; font-size: 12px; font-weight: 700; color: #0f766e; white-space: nowrap; }
.dt-root .dt-p-pos  { grid-column: 2 / 4; grid-row: 2; font-size: 11px; color: var(--dt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-root .dt-badge { font-size: 10px; padding: 0 6px; border-radius: 999px; background: #fdecec; color: #991b1b; font-weight: 700; margin-left: 4px; }
.dt-root .dt-mine-item { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 0; }
.dt-root .dt-mine-item .dt-m-name { flex: 1 1 auto; }
.dt-root .dt-mine-item button { padding: 3px 8px; font-size: 11px; }

@media (max-width: 900px) {
    .dt-root .dt-layout { flex-direction: column; }
    .dt-root .dt-side { width: 100%; flex: 1 1 auto; }
    .dt-root .dt-tile { font-size: 9px; }
    .dt-root .dt-tile-price { display: none; }
        .dt-root .dt-board { border-width: 7px; padding: 7px; }
}

/* 다크모드 */
body.dark-mode .dt-root {
    --dt-bg: #1a1d21; --dt-panel: #23272e; --dt-line: #3a4656;
    --dt-ink: #e6e6e6; --dt-muted: #9aa5b1;
    --dt-tile: #2c2c34; --dt-tile-line: #555;
    background: linear-gradient(180deg, #1a1d21, #14171a);
    border-color: #3a4656;
}
body.dark-mode .dt-root .dt-tile { color: #e6e6e6; }
body.dark-mode .dt-root .dt-tile-price { color: #9aa5b1; }
body.dark-mode .dt-root .dt-t-start    { background: #1c3327; }
body.dark-mode .dt-root .dt-t-island   { background: #33301e; }
body.dark-mode .dt-root .dt-t-travel   { background: #2a2440; }
body.dark-mode .dt-root .dt-t-fund_pot { background: #17332f; }
body.dark-mode .dt-root .dt-t-golden   { background: #33301a; }
body.dark-mode .dt-root .dt-t-tax      { background: #3a2020; }
body.dark-mode .dt-root .dt-t-fund     { background: #1e2a3d; }
body.dark-mode .dt-root .dt-btn { background: #2f353d; color: #e6e6e6; border-color: #4a5560; }
body.dark-mode .dt-root .dt-btn-primary { background: #0f766e; color: #fff; }
body.dark-mode .dt-root .dt-btn-blue { background: #1d4ed8; color: #fff; }
body.dark-mode .dt-root .dt-btn-gold { background: #b45309; color: #fff; }
body.dark-mode .dt-root .dt-btn-danger { background: #b91c1c; color: #fff; }
body.dark-mode .dt-root .dt-player.is-turn { background: #1d2c29; }
body.dark-mode @media (prefers-color-scheme: dark) {
    .dt-root .dt-log { color: #bfe0d4; }
}


/* ══ 비주얼 v2: 아이콘 · 로고 · 주사위 눈 · 입체 말 ═════════════ */
.dt-root .dt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 칸 아이콘 + 조 색 */
.dt-root .dt-tile { --dt-grp: #7a6c55; }
.dt-root .dt-c1 { --dt-grp: #0e7490; }
.dt-root .dt-c2 { --dt-grp: #15803d; }
.dt-root .dt-c3 { --dt-grp: #4f46e5; }
.dt-root .dt-c4 { --dt-grp: #a16207; }
.dt-root .dt-c5 { --dt-grp: #c2410c; }
.dt-root .dt-c6 { --dt-grp: #9333ea; }
.dt-root .dt-c7 { --dt-grp: #be123c; }
.dt-root .dt-c8 { --dt-grp: #334155; }
.dt-root .dt-t-city { box-shadow: inset 0 -3px 0 var(--dt-grp), 0 1px 2px rgba(0, 0, 0, .25); }
.dt-root .dt-tile-ic {
    width: 44%; max-width: 30px; aspect-ratio: 1 / 1; height: auto; flex: 0 0 auto;
    color: var(--dt-grp); fill: currentColor; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
}
.dt-root .dt-t-start    .dt-tile-ic { color: #15803d; }
.dt-root .dt-t-island   .dt-tile-ic { color: #b45309; }
.dt-root .dt-t-travel   .dt-tile-ic { color: #6d28d9; }
.dt-root .dt-t-fund_pot .dt-tile-ic { color: #0f766e; }
.dt-root .dt-t-golden   .dt-tile-ic { color: #ca8a04; }
.dt-root .dt-t-tax      .dt-tile-ic { color: #b91c1c; }
.dt-root .dt-t-fund     .dt-tile-ic { color: #1d4ed8; }
.dt-root .dt-t-start, .dt-root .dt-t-island, .dt-root .dt-t-fund_pot, .dt-root .dt-t-travel { font-size: 11px; }
.dt-root .dt-t-start .dt-tile-ic, .dt-root .dt-t-island .dt-tile-ic,
.dt-root .dt-t-fund_pot .dt-tile-ic, .dt-root .dt-t-travel .dt-tile-ic { width: 52%; max-width: 40px; }
.dt-root .dt-tile.is-step { box-shadow: 0 0 0 2px #fde047, 0 0 12px rgba(253, 224, 71, .8); transition: box-shadow .2s; }

/* 중앙 로고 */
.dt-root .dt-logo { width: min(80%, 340px); transform: rotate(-6deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.dt-root .dt-logo svg { display: block; width: 100%; height: auto; }
.dt-root .dt-logo-title {
    font: 900 30px 'Noto Sans KR', 'Malgun Gothic', sans-serif; fill: #fff; letter-spacing: 1px;
    paint-order: stroke; stroke: #5c0b1c; stroke-width: 3px; stroke-linejoin: round;
}
.dt-root .dt-logo-sub {
    font: 800 15px 'Segoe UI', Arial, sans-serif; fill: #fde68a; letter-spacing: 6px;
    paint-order: stroke; stroke: #3a1f00; stroke-width: 2.5px;
}

/* 주사위(눈 3×3) */
.dt-root .dt-dice { display: flex; gap: 14px; perspective: 400px; }
.dt-root .dt-die {
    width: 52px; height: 52px; padding: 7px; border-radius: 11px;
    display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center;
    background: radial-gradient(circle at 30% 25%, #fff, #f3ecdc 55%, #d8ccb0);
    border: 1px solid #b9a87f;
    box-shadow: inset -3px -4px 6px rgba(0, 0, 0, .14), inset 2px 2px 3px rgba(255, 255, 255, .9), 0 5px 8px rgba(0, 0, 0, .4);
}
.dt-root .dt-die i {
    width: 9px; height: 9px; border-radius: 50%; visibility: hidden;
    background: radial-gradient(circle at 35% 30%, #4b5563, #0b0f16);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6);
}
.dt-root .dt-die[data-v="1"] i { background: radial-gradient(circle at 35% 30%, #f87171, #991b1b); width: 12px; height: 12px; }
/* 칸 번호: 1 2 3 / 4 5 6 / 7 8 9 */
.dt-root .dt-die[data-v="1"] i:nth-child(5),
.dt-root .dt-die[data-v="2"] i:nth-child(3), .dt-root .dt-die[data-v="2"] i:nth-child(7),
.dt-root .dt-die[data-v="3"] i:nth-child(3), .dt-root .dt-die[data-v="3"] i:nth-child(5), .dt-root .dt-die[data-v="3"] i:nth-child(7),
.dt-root .dt-die[data-v="4"] i:nth-child(1), .dt-root .dt-die[data-v="4"] i:nth-child(3), .dt-root .dt-die[data-v="4"] i:nth-child(7), .dt-root .dt-die[data-v="4"] i:nth-child(9),
.dt-root .dt-die[data-v="5"] i:nth-child(1), .dt-root .dt-die[data-v="5"] i:nth-child(3), .dt-root .dt-die[data-v="5"] i:nth-child(5), .dt-root .dt-die[data-v="5"] i:nth-child(7), .dt-root .dt-die[data-v="5"] i:nth-child(9),
.dt-root .dt-die[data-v="6"] i:nth-child(1), .dt-root .dt-die[data-v="6"] i:nth-child(3), .dt-root .dt-die[data-v="6"] i:nth-child(4), .dt-root .dt-die[data-v="6"] i:nth-child(6), .dt-root .dt-die[data-v="6"] i:nth-child(7), .dt-root .dt-die[data-v="6"] i:nth-child(9) { visibility: visible; }
.dt-root .dt-die.is-rolling { animation: dt-tumble .14s linear infinite; }
.dt-root .dt-die.is-landed { animation: dt-land .32s ease-out; }
@keyframes dt-tumble {
    0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(160deg) translateY(-8px) scale(.94); } 100% { transform: rotate(360deg) translateY(0); }
}
@keyframes dt-land { 0% { transform: scale(1.18); } 60% { transform: scale(.94); } 100% { transform: scale(1); } }

/* 입체 말(폰) — 보드 위 별도 레이어에서 칸 사이를 이동 */
.dt-root .dt-pieces { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.dt-root .dt-piece {
    position: absolute; left: 0; top: 0; width: var(--dt-pw, 28px); height: calc(var(--dt-pw, 28px) * 1.15);
    margin: calc(var(--dt-pw, 28px) * -1.02) 0 0 calc(var(--dt-pw, 28px) * -.5);
    transition: transform .2s cubic-bezier(.3, .7, .3, 1);
    will-change: transform;
}
.dt-root .dt-piece.is-slide { transition-duration: .7s; transition-timing-function: cubic-bezier(.5, 0, .3, 1); }
.dt-root .dt-piece svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dt-root .dt-piece-body { transform-origin: 50% 100%; }
.dt-root .dt-piece.is-turn .dt-piece-body { animation: dt-bob 1.4s ease-in-out infinite; }
.dt-root .dt-piece.is-me svg { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9)); }
.dt-root .dt-piece-num { font: 800 11px Arial, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .45); stroke-width: 2px; }
@keyframes dt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.dt-root .dt-sound-btn[aria-pressed="false"] { opacity: .65; }

@media (max-width: 900px) {
    .dt-root .dt-die { width: 40px; height: 40px; padding: 5px; border-radius: 9px; }
    .dt-root .dt-die i { width: 7px; height: 7px; }
    .dt-root .dt-die[data-v="1"] i { width: 9px; height: 9px; }
    .dt-root .dt-tile-name { font-size: 8px; }
}
@media (max-width: 560px) {
    .dt-root .dt-center { gap: 6px; padding: 4px; }
    .dt-root .dt-logo { width: 62%; }
    .dt-root .dt-log { max-height: 56px; font-size: 10px; padding: 4px 6px; }
    .dt-root .dt-actions .dt-btn { padding: 6px 9px; font-size: 12px; }
    .dt-root .dt-tile-name { font-size: 7px; letter-spacing: -.3px; }
    .dt-root .dt-tile-lv { font-size: 6px; min-height: 6px; }
    .dt-root .dt-tile-ic { width: 52%; }
}
@media (prefers-reduced-motion: reduce) {
    .dt-root .dt-piece, .dt-root .dt-piece.is-slide { transition-duration: .01s; }
    .dt-root .dt-die.is-rolling, .dt-root .dt-piece.is-turn .dt-piece-body { animation: none; }
}

body.dark-mode .dt-root .dt-tile-ic { filter: none; }
body.dark-mode .dt-root .dt-c1 { --dt-grp: #22d3ee; }
body.dark-mode .dt-root .dt-c2 { --dt-grp: #4ade80; }
body.dark-mode .dt-root .dt-c3 { --dt-grp: #a5b4fc; }
body.dark-mode .dt-root .dt-c4 { --dt-grp: #facc15; }
body.dark-mode .dt-root .dt-c5 { --dt-grp: #fb923c; }
body.dark-mode .dt-root .dt-c6 { --dt-grp: #d8b4fe; }
body.dark-mode .dt-root .dt-c7 { --dt-grp: #fb7185; }
body.dark-mode .dt-root .dt-c8 { --dt-grp: #cbd5e1; }

/* ══ 3D 모드 (CSS 3D 변환 — 라이브러리 없음) ═══════════════════════
 * 카메라 = .dt-stage(원근) + .dt-board 회전(--dt-tilt 기울기, --dt-spin 회전).
 * 말·랜드마크는 --dt-bb(역회전)로 항상 화면을 향해 선다(빌보드).
 */
.dt-root {
    --dt-tilt: 55deg; --dt-spin: 0deg;
    --dt-bb: rotateZ(calc(var(--dt-spin) * -1)) rotateX(calc(var(--dt-tilt) * -1));
    --dt-cam-t: .65s;
}
.dt-root .dt-cam, .dt-root .dt-dice3d { display: none; }
.dt-root .dt-hud:empty { display: none; }

.dt-root.is-3d .dt-stage {
    perspective: 1500px; perspective-origin: 50% 20%;
    overflow: hidden; padding: 2% 3%; border-radius: 14px;
    background: radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .55), transparent 70%);
    cursor: grab; touch-action: none; user-select: none;
}
.dt-root.is-3d.is-drag .dt-stage { cursor: grabbing; }
.dt-root.is-3d .dt-board {
    transform-style: preserve-3d;
    transform: rotateX(var(--dt-tilt)) rotateZ(var(--dt-spin)) scale(.84);
    transition: transform var(--dt-cam-t) cubic-bezier(.3, .7, .3, 1), margin var(--dt-cam-t);
    margin: calc(var(--dt-mt, 9%) * -1) 0 calc(var(--dt-mb, 13%) * -1);
}
/* 보드 두께(옆면) */
.dt-root.is-3d .dt-board::after {
    content: ''; position: absolute; inset: -9px; border-radius: 12px; pointer-events: none;
    background: linear-gradient(135deg, #4b3119, #2a1b0c);
    transform: translateZ(-16px);
}
.dt-root.is-3d .dt-tile { overflow: visible; transform-style: preserve-3d; transform: translateZ(2px); }
.dt-root.is-3d .dt-tile-ic {
    transform-origin: 50% 100%;
    transform: var(--dt-bb);
    transition: transform var(--dt-cam-t) cubic-bezier(.3, .7, .3, 1);
    width: 58%; max-width: 40px; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .35));
}
.dt-root.is-3d .dt-t-start .dt-tile-ic, .dt-root.is-3d .dt-t-island .dt-tile-ic,
.dt-root.is-3d .dt-t-fund_pot .dt-tile-ic, .dt-root.is-3d .dt-t-travel .dt-tile-ic { width: 64%; max-width: 50px; }
.dt-root.is-3d.is-drag .dt-board,
.dt-root.is-3d.is-drag .dt-tile-ic,
.dt-root.is-3d.is-drag .dt-piece-bb { transition: none; }

/* 칸 이름·로고는 카메라 회전만큼 평면에서 되돌려 항상 똑바로 읽히게 */
.dt-root.is-3d .dt-tile-name, .dt-root.is-3d .dt-tile-price, .dt-root.is-3d .dt-tile-lv {
    display: block; transform: rotateZ(var(--dt-face, 0deg));
    transition: transform var(--dt-cam-t) cubic-bezier(.3, .7, .3, 1);
}
.dt-root.is-3d .dt-logo { transform: rotateZ(var(--dt-face, 0deg)) rotate(-6deg); transition: transform var(--dt-cam-t) cubic-bezier(.3, .7, .3, 1); }
.dt-root.is-3d.is-drag .dt-tile-name, .dt-root.is-3d.is-drag .dt-logo { transition: none; }

/* 중앙: 로고는 판에 인쇄된 것처럼 평평, 주사위는 정육면체로 선다 */
.dt-root.is-3d .dt-center { transform-style: preserve-3d; justify-content: center; }
.dt-root.is-3d .dt-logo { width: min(86%, 380px); }
.dt-root.is-3d .dt-dice { display: none; }
.dt-root.is-3d .dt-dice3d { display: flex; gap: 34px; transform-style: preserve-3d; margin-top: 6px; }

.dt-root .dt-cube-wrap { --dt-cs: 46px; --dt-ch: 23px; position: relative; width: var(--dt-cs); height: var(--dt-cs); transform-style: preserve-3d; }
.dt-root .dt-cube-shadow {
    position: absolute; inset: -6px; border-radius: 30%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
}
.dt-root .dt-cube {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: translateZ(var(--dt-ch));
    transition: transform .8s cubic-bezier(.15, .75, .25, 1);
}
.dt-root .dt-cube.is-snap { transition: none; }
.dt-root .dt-face {
    position: absolute; left: 0; top: 0; width: var(--dt-cs); height: var(--dt-cs); padding: 7px; border-radius: 8px;
    backface-visibility: hidden;
    box-shadow: inset -2px -3px 5px rgba(0, 0, 0, .16), inset 2px 2px 3px rgba(255, 255, 255, .9);
}
.dt-root .dt-face-1 { transform: translateZ(var(--dt-ch)); }
.dt-root .dt-face-6 { transform: rotateY(180deg) translateZ(var(--dt-ch)); }
.dt-root .dt-face-2 { transform: rotateX(90deg) translateZ(var(--dt-ch)); }
.dt-root .dt-face-5 { transform: rotateX(-90deg) translateZ(var(--dt-ch)); }
.dt-root .dt-face-3 { transform: rotateY(90deg) translateZ(var(--dt-ch)); }
.dt-root .dt-face-4 { transform: rotateY(-90deg) translateZ(var(--dt-ch)); }

/* 말: 판 위를 이동(평면) + 선 채로 화면을 향함(빌보드) */
.dt-root .dt-piece-bb { width: 100%; height: 100%; }
.dt-root .dt-piece-shadow { display: none; }
.dt-root.is-3d .dt-pieces { transform-style: preserve-3d; transform: translateZ(4px); }
.dt-root.is-3d .dt-piece { transform-style: preserve-3d; }
.dt-root.is-3d .dt-piece-bb {
    transform-origin: 50% 92%;
    transform: var(--dt-bb);
    transition: transform var(--dt-cam-t) cubic-bezier(.3, .7, .3, 1);
}
.dt-root.is-3d .dt-piece svg ellipse { display: none; }
.dt-root.is-3d .dt-piece-shadow {
    display: block; position: absolute; left: 6%; right: 6%; bottom: -4%; height: 26%;
    border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
}

/* 액션·로그 자리(3D 모드에서 보드 아래로 옮겨짐) */
.dt-root .dt-hud {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-top: 10px; padding: 12px; border-radius: 10px;
    background: linear-gradient(180deg, var(--dt-felt), var(--dt-felt2));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .35);
}
.dt-root .dt-hud:empty { display: none; }
.dt-root .dt-hud .dt-actions:empty { display: none; }

/* 카메라 조작 */
.dt-root.is-3d .dt-cam { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 8px; }
.dt-root .dt-cam .dt-btn { padding: 6px 11px; font-size: 13px; }
.dt-root .dt-cam [aria-pressed="true"] { background: #0f766e; border-color: #0a4f47; color: #fff; }
.dt-root .dt-cam-hint { font-size: 12px; color: var(--dt-muted); }
.dt-root .dt-view-btn[aria-pressed="true"] { background: #0f766e; border-color: #0a4f47; }

@media (max-width: 560px) {
    .dt-root.is-3d .dt-board { transform: rotateX(var(--dt-tilt)) rotateZ(var(--dt-spin)) scale(.9); }
    .dt-root .dt-cube-wrap { --dt-cs: 30px; --dt-ch: 15px; }
    .dt-root .dt-face { padding: 4px; border-radius: 6px; }
    .dt-root .dt-face i { width: 5px; height: 5px; }
    .dt-root .dt-face[data-v="1"] i { width: 7px; height: 7px; }
    .dt-root.is-3d .dt-dice3d { gap: 20px; }
    .dt-root .dt-cam-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dt-root { --dt-cam-t: .01s; }
    .dt-root .dt-cube { transition-duration: .01s; }
}
body.dark-mode .dt-root.is-3d .dt-stage { background: radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .08), transparent 70%); }
body.dark-mode .dt-root .dt-cam [aria-pressed="true"] { background: #0f766e; color: #fff; }


/* ══ 독점·랜드마크 ═════════════════════════════════════════ */
.dt-root .dt-rules { font-size: 12px; color: var(--dt-muted); margin-top: 4px; }
.dt-root .dt-tile.is-landmark { outline: 2px solid #f5b800; outline-offset: -2px; }
.dt-root .dt-tile.is-landmark .dt-tile-lv { color: #b45309; font-weight: 800; }
.dt-root .dt-tile.is-landmark::after {
    content: '★'; position: absolute; left: 3px; top: 4px; font-size: 10px; line-height: 1; color: #f5b800;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
}
.dt-root .dt-p-mono { grid-column: 2 / 4; grid-row: 3; font-size: 11px; color: var(--dt-muted); }
.dt-root .dt-p-mono b { color: var(--dt-ink); }
.dt-root .dt-p-mono .is-hot { color: #b91c1c; font-weight: 800; }
.dt-root .dt-status.is-mono {
    color: #7c2d12; background: linear-gradient(90deg, #fff7d6, #ffe7a3, #fff7d6);
    border-color: #f5b800; font-size: 17px; animation: dt-mono-glow 1.6s ease-in-out infinite;
}
@keyframes dt-mono-glow { 0%, 100% { box-shadow: 0 0 0 rgba(245, 184, 0, 0); } 50% { box-shadow: 0 0 18px rgba(245, 184, 0, .7); } }
.dt-root .dt-mono-key { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--dt-muted); margin-top: 6px; }
.dt-root .dt-mono-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }
body.dark-mode .dt-root .dt-status.is-mono { color: #fde68a; background: linear-gradient(90deg, #3a2f10, #5a4410, #3a2f10); }
@media (prefers-reduced-motion: reduce) { .dt-root .dt-status.is-mono { animation: none; } }

/* 녹색 판 위의 보조 버튼 가독성 */
.dt-root .dt-center .dt-btn-ghost, .dt-root .dt-hud .dt-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }

/* ══ 턴 제한 시간 ══════════════════════════════════════════ */
.dt-root .dt-timer { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px; font-size: 12px; font-weight: 700; color: var(--dt-muted); }
.dt-root .dt-timer[hidden] { display: none; }
.dt-root .dt-timer-bar { flex: 1 1 auto; height: 6px; border-radius: 99px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.dt-root .dt-timer-bar i { display: block; height: 100%; width: 100%; background: #1d4ed8; border-radius: 99px; transition: width .25s linear; }
.dt-root .dt-timer.is-mine .dt-timer-bar i { background: #0f766e; }
.dt-root .dt-timer.is-mine { color: #0f766e; }
.dt-root .dt-timer.is-low .dt-timer-bar i { background: #dc2626; }
.dt-root .dt-timer.is-low.is-mine { color: #b91c1c; animation: dt-timer-blink 1s steps(2, start) infinite; }
.dt-root .dt-timer > span:last-child { white-space: nowrap; min-width: 9.5em; text-align: right; }
@keyframes dt-timer-blink { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .dt-root .dt-timer.is-low.is-mine { animation: none; } }
body.dark-mode .dt-root .dt-timer-bar { background: rgba(255, 255, 255, .12); }