/* 축소하지 못했습니다. 축소되지 않은 콘텐츠를 반환합니다.
(2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-ink'
(53,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-forest'
(67,28): run-time error CSS1039: Token not allowed after unary operator: '-tt-wood'
(94,29): run-time error CSS1039: Token not allowed after unary operator: '-tt-blue'
(99,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-primary'
(111,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(121,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(141,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-forest-deep'
(151,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-forest'
(169,29): run-time error CSS1039: Token not allowed after unary operator: '-tt-blue'
(198,28): run-time error CSS1039: Token not allowed after unary operator: '-tt-wood'
(200,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-parchment'
(217,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-forest'
(238,28): run-time error CSS1039: Token not allowed after unary operator: '-tt-parchment-line'
(261,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(281,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-forest'
(301,28): run-time error CSS1039: Token not allowed after unary operator: '-tt-parchment-line'
(313,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(328,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(368,46): run-time error CSS1039: Token not allowed after unary operator: '-tt-forest'
(368,66): run-time error CSS1039: Token not allowed after unary operator: '-tt-forest-deep'
(369,35): run-time error CSS1039: Token not allowed after unary operator: '-tt-gold'
(387,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-gold'
(402,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(404,39): run-time error CSS1039: Token not allowed after unary operator: '-tt-board-size'
(428,28): run-time error CSS1039: Token not allowed after unary operator: '-tt-wood'
(430,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-parchment'
(445,28): run-time error CSS1039: Token not allowed after unary operator: '-tt-parchment-line'
(451,24): run-time error CSS1039: Token not allowed after unary operator: '-tt-gold'
(453,32): run-time error CSS1039: Token not allowed after unary operator: '-tt-gold'
(477,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-forest'
(486,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(542,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(551,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(571,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(579,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(592,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-ink'
(604,33): run-time error CSS1039: Token not allowed after unary operator: '-tt-parchment-line'
(612,28): run-time error CSS1039: Token not allowed after unary operator: '-tt-wood'
(614,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-parchment'
(636,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-orange'
(707,40): run-time error CSS1039: Token not allowed after unary operator: '-tt-cells'
(746,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-ink'
(856,32): run-time error CSS1039: Token not allowed after unary operator: '-tt-gold'
(903,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-orange'
(914,38): run-time error CSS1039: Token not allowed after unary operator: '-tt-green'
(926,38): run-time error CSS1039: Token not allowed after unary operator: '-tt-orange'
(946,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(1001,61): run-time error CSS1039: Token not allowed after unary operator: '-tt-gold'
(1047,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-primary'
(1160,28): run-time error CSS1039: Token not allowed after unary operator: '-tt-parchment-line'
(1193,28): run-time error CSS1039: Token not allowed after unary operator: '-tt-wood'
(1195,22): run-time error CSS1039: Token not allowed after unary operator: '-tt-parchment'
(1207,24): run-time error CSS1039: Token not allowed after unary operator: '-tt-blue'
(1226,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-orange'
(1248,24): run-time error CSS1039: Token not allowed after unary operator: '-tt-blue'
(1300,17): run-time error CSS1039: Token not allowed after unary operator: '-tt-muted'
(1310,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1311,37): run-time error CSS1039: Token not allowed after unary operator: '-tt-board-size'
(1339,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
:root {
    --tt-ink: #2b2a1c;
    --tt-muted: #66624a;
    --tt-forest: #1f5136;
    --tt-forest-deep: #143823;
    --tt-parchment: #fff8e4;
    --tt-parchment-line: #dcc896;
    --tt-gold: #e3b644;
    --tt-wood: #7d4f27;
    --tt-tile-a: #f6ecc9;
    --tt-tile-b: #dfeab9;
    --tt-green: #178a3c;
    --tt-orange: #d4560c;
    --tt-blue: #1a6cc4;
    --tt-primary: #2c7a46;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

.tt-sprites {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #bfe6cf 0, #a7d79a 45%, #8cc377 100%) fixed;
    color: var(--tt-ink);
    font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    font-size: 15px;
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

h1, h2, p {
    margin: 0;
}

h2 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--tt-forest);
}

.tt-char {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: -.4em;
    overflow: visible;
}

.tt-btn {
    min-height: 42px;
    padding: 8px 16px;
    border: 2px solid var(--tt-wood);
    border-bottom-width: 4px;
    border-radius: 10px;
    background: #fff6dc;
    color: #4a2e15;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.tt-btn:hover:not(:disabled) {
    background: #ffedbd;
}

.tt-btn:active:not(:disabled) {
    border-bottom-width: 2px;
    transform: translateY(2px);
}

.tt-btn:disabled {
    border-color: #bdb394;
    background: #efe9d3;
    color: #8f8872;
    cursor: not-allowed;
}

button:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid var(--tt-blue);
    outline-offset: 2px;
}

.tt-primary {
    background: var(--tt-primary);
    border-color: #17502c;
    color: #fff;
}

.tt-primary:hover:not(:disabled) {
    background: #246a3b;
}

.tt-quiet {
    border-color: transparent;
    background: transparent;
    color: var(--tt-muted);
}

.tt-small {
    min-height: 34px;
    padding: 3px 11px;
    font-size: 13px;
}

.tt-hint {
    color: var(--tt-muted);
    font-size: 13px;
}

.tt-connection {
    padding: 8px 16px;
    background: #fbe0bd;
    color: #7a3d05;
    font-weight: 700;
    text-align: center;
}

.tt-toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    max-width: 90vw;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--tt-forest-deep);
    color: #fff;
    z-index: 30;
}

/* 게임 목록으로 */
.tt-home-link {
    display: block;
    max-width: 470px;
    margin: 18px auto -14px;
    color: var(--tt-forest);
    font-weight: 800;
    text-decoration: none;
}

.tt-home-mini {
    padding: 0 8px;
    color: #fff4c9;
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
}

.tt-home-link:hover, .tt-home-mini:hover {
    text-decoration: underline;
}

.tt-home-link:focus-visible, .tt-home-mini:focus-visible {
    outline: 3px solid var(--tt-blue);
    outline-offset: 2px;
}

/* 로고 */
.tt-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.5px;
    color: #fff4c9;
}

.tt-logo svg {
    width: 28px;
    height: 28px;
    color: #f07f2b;
}

/* 입장·대기실 */
.tt-entry, .tt-lobby {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 470px;
    margin: 28px auto;
    padding: 24px;
    border: 3px solid var(--tt-wood);
    border-radius: 18px;
    background: var(--tt-parchment);
    box-shadow: 0 8px 0 rgba(60, 40, 15, .25);
}

.tt-hero {
    display: flex;
    justify-content: center;
    gap: 2px;
}

.tt-hero .tt-char {
    width: 96px;
    height: 96px;
    max-width: 23%;
}

.tt-entry h1, .tt-lobby h1 {
    color: var(--tt-forest);
    font-size: 27px;
    font-weight: 900;
    text-align: center;
    letter-spacing: -.5px;
}

.tt-entry > p {
    text-align: center;
}

.tt-entry label, .tt-options label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 700;
}

.tt-entry input:not([type=checkbox]), .tt-options input:not([type=checkbox]) {
    min-height: 42px;
    padding: 8px 10px;
    border: 2px solid var(--tt-parchment-line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
}

#tt-code {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 800;
}

.tt-entry-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.tt-entry-row label {
    flex: 1;
}

.tt-entry-or {
    color: var(--tt-muted);
    text-align: center;
}

.tt-entry-message {
    padding: 8px 12px;
    border-radius: 10px;
    background: #fbe0bd;
    color: #7a3d05;
}

.tt-roomcode {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tt-roomcode strong {
    flex: 1;
    color: var(--tt-forest);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 4px;
}

.tt-seats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tt-seats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    border: 2px solid var(--tt-parchment-line);
    border-radius: 12px;
    background: #fffdf3;
    text-align: center;
    overflow-wrap: anywhere;
}

.tt-seats li > span:last-child {
    font-weight: 700;
}

.tt-seats em {
    color: var(--tt-muted);
    font-weight: 400;
}

.tt-seat-action {
    margin-top: 6px;
}

.tt-seat-icon .tt-char {
    width: 64px;
    height: 64px;
    vertical-align: middle;
}

.tt-seat-animal {
    color: var(--tt-muted);
    font-size: 13px;
}

.tt-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.tt-rule-grid label {
    font-size: 12px;
}

.tt-rule-grid input {
    width: 100%;
}

.tt-options summary {
    cursor: pointer;
    font-weight: 700;
    margin-bottom: 8px;
}

.tt-options .tt-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-weight: 400;
}

/* 게임 화면 */
.tt-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 9px 16px;
    background: linear-gradient(180deg, var(--tt-forest) 0, var(--tt-forest-deep) 100%);
    border-bottom: 4px solid var(--tt-gold);
    color: #fff;
}

.tt-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tt-step {
    padding: 2px 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .13);
    font-size: 13px;
}

.tt-step-on {
    background: var(--tt-gold);
    color: #3c2a05;
    font-weight: 800;
}

.tt-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-left: auto;
    font-size: 13px;
}

.tt-layout {
    --tt-board-size: min(calc(100vh - 150px), calc(100vw - 640px), 720px);
    display: grid;
    grid-template-columns: 250px var(--tt-board-size) 340px;
    grid-template-rows: minmax(0, 1fr);
    height: calc(100vh - 56px);
    justify-content: center;
    gap: 12px;
    padding: 12px;
}

.tt-col-left, .tt-col-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

/* 플레이어 칸이 길어져도 페이지가 늘지 않고 칸 안에서 스크롤한다. */
.tt-col-left .tt-players {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.tt-panel {
    padding: 12px;
    border: 3px solid var(--tt-wood);
    border-radius: 14px;
    background: var(--tt-parchment);
    box-shadow: 0 4px 0 rgba(60, 40, 15, .22);
}

.tt-log {
    flex: 1 1 0;
    min-height: 96px;
    overflow-y: auto;
}

.tt-player {
    display: flex;
    gap: 8px;
    padding: 7px;
    margin-bottom: 6px;
    border: 2px solid var(--tt-parchment-line);
    border-radius: 12px;
    background: #fffdf3;
}

.tt-player-active {
    border-color: var(--tt-gold);
    background: #fff2bf;
    box-shadow: 0 0 0 2px var(--tt-gold);
}

.tt-player-portrait .tt-char {
    width: 54px;
    height: 54px;
    vertical-align: top;
}

.tt-player-body {
    flex: 1;
    min-width: 0;
}

.tt-player-name {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.tt-order {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tt-forest);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.tt-player-name small {
    font-weight: 400;
    color: var(--tt-muted);
}

.tt-player .tt-turn-tag {
    color: #8a5a00;
    font-weight: 800;
}

.tt-player .tt-offline {
    color: #a63b0a;
    font-weight: 800;
}

.tt-player .tt-frozen-tag {
    color: #0f5f9e;
    font-weight: 800;
}

.tt-piece-frozen .tt-char {
    filter: saturate(.45) brightness(1.08) drop-shadow(0 0 6px #6fc3ff);
}

.tt-frozen-mark {
    position: absolute;
    left: 2px;
    bottom: 2px;
    z-index: 1;
    padding: 0 6px;
    border: 2px solid #0f5f9e;
    border-radius: 8px;
    background: #d9f0ff;
    color: #0b4a7d;
    font-size: clamp(10px, 1.800vw, 13px);
    font-weight: 900;
}

.tt-tail-gauge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px;
    margin: 2px 0;
}

.tt-tail-gauge svg {
    width: 21px;
    height: 21px;
}

.tt-tail-off {
    opacity: .22;
    filter: grayscale(1);
}

.tt-tail-count {
    margin-left: 4px;
    color: var(--tt-muted);
    font-size: 12px;
    font-weight: 700;
}

.tt-mini-hand {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--tt-muted);
    font-size: 12px;
}

.tt-mini-backs {
    display: flex;
}

.tt-mini-backs svg {
    width: 15px;
    height: 21px;
    margin-right: -5px;
}

.tt-mini-backs svg:last-child {
    margin-right: 0;
}

.tt-player-hand {
    margin-top: 2px;
    color: var(--tt-muted);
    font-size: 12px;
}

.tt-piles {
    display: flex;
    justify-content: space-around;
    margin-top: 8px;
    color: var(--tt-muted);
    font-size: 12px;
    text-align: center;
}

.tt-pile svg {
    display: block;
    width: 36px;
    height: 50px;
    margin: 0 auto 2px;
}

.tt-pile strong {
    color: var(--tt-ink);
}

.tt-pile-discard svg {
    opacity: .55;
    filter: grayscale(.7);
    transform: rotate(-5deg);
}

.tt-debug {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px dashed var(--tt-parchment-line);
    font-size: 13px;
}

.tt-prompt {
    min-height: 46px;
    margin-bottom: 8px;
    padding: 10px 14px;
    border: 3px solid var(--tt-wood);
    border-radius: 12px;
    background: var(--tt-parchment);
    font-weight: 800;
}

.tt-prompt-mine {
    border-color: #a8620f;
    background: #ffd65c;
    color: #2b1e05;
    box-shadow: 0 0 0 3px #fff2bf, 0 0 14px 4px rgba(255, 190, 40, .85);
}

.tt-countdown {
    margin-left: 8px;
    color: #a31d12;
    font-weight: 900;
}

.tt-turn-pill {
    display: inline-block;
    margin-right: 8px;
    padding: 0 9px;
    border-radius: 9px;
    background: var(--tt-orange);
    color: #fff;
    font-size: 13px;
    line-height: 22px;
}

/* 내 턴이 시작될 때 잠깐 뜨는 알림. 클릭은 그대로 뒤로 통과한다. */
.tt-turn-banner {
    position: fixed;
    left: 50%;
    top: 34%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 34px 14px 18px;
    border: 5px solid #a8620f;
    border-radius: 22px;
    background: #ffd65c;
    color: #3c2405;
    box-shadow: 0 10px 0 rgba(60, 35, 5, .4), 0 0 40px 12px rgba(255, 200, 60, .8);
    font-size: clamp(30px, 6vw, 52px);
    font-weight: 900;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 15;
    animation: tt-banner-pop 1.6s ease-out both;
}

.tt-turn-banner .tt-char {
    width: 1.800em;
    height: 1.800em;
    vertical-align: middle;
}

@keyframes tt-banner-pop {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(.6);
    }

    14% {
        opacity: 1;
        transform: translateX(-50%) scale(1.06);
    }

    22%, 80% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes tt-piece-pulse {
    50% {
        box-shadow: 0 0 0 6px #ffd65c, 0 0 20px 10px rgba(255, 190, 40, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt-turn-banner, .tt-piece-mine {
        animation: none;
    }
}

.tt-board {
    display: grid;
    grid-template-columns: repeat(var(--tt-cells, 7), minmax(0, 1fr));
    gap: 3px;
    padding: 7px;
    position: relative;
    border: 3px solid #173d27;
    border-radius: 16px;
    background-color: #2a6a42;
    background-image: radial-gradient(circle at 9px 9px, #3f9160 8px, rgba(63, 145, 96, 0) 9px), radial-gradient(circle at 20px 20px, #347f51 7px, rgba(52, 127, 81, 0) 8px);
    background-size: 22px 22px;
    box-shadow: 0 5px 0 rgba(30, 50, 25, .4);
}

.tt-board-mine {
    border-color: #a8620f;
    box-shadow: 0 0 0 4px #ffd65c, 0 0 18px 6px rgba(255, 190, 40, .8);
}

.tt-board-ground {
    position: absolute;
    top: 7px;
    left: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    border-radius: 8px;
}

.tt-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    outline: 1px solid rgba(50, 75, 25, .28);
    outline-offset: -1px;
    background: rgba(255, 255, 255, .1);
    color: var(--tt-ink);
    font: inherit;
    overflow: hidden;
}

.tt-tile-b {
    background: rgba(40, 80, 20, .06);
}

.tt-den {
    width: 46%;
    height: 46%;
    opacity: .75;
}

/* 중앙의 벤트 출구. 말이 올라가도 읽히도록 불투명 배경 위에 글자를 쓴다. */
.tt-vent-tag {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    padding: 0 5px;
    border: 2px solid #5b2fb0;
    border-radius: 8px;
    background: #f0e9fd;
    color: #3d1d80;
    font-size: clamp(9px, 1.700vw, 12px);
    font-weight: 900;
    white-space: nowrap;
}

.tt-base-tag {
    position: absolute;
    left: 50%;
    top: 3px;
    z-index: 1;
    padding: 0 6px;
    border: 2px solid #2b1e12;
    border-radius: 8px;
    background: #fffdf3;
    color: #2b1e12;
    font-size: clamp(9px, 1.700vw, 12px);
    font-weight: 900;
    white-space: nowrap;
    transform: translateX(-50%);
}

.tt-base-safe {
    top: auto;
    bottom: 2px;
    left: 2px;
    border-color: #178a3c;
    background: #d8f4d6;
    color: #0f5526;
    transform: none;
}

button.tt-cell .tt-den {
    position: absolute;
    opacity: .3;
}

.tt-me-tag {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    padding: 0 6px;
    border-radius: 8px;
    background: #fff;
    border: 2px solid #2b1e12;
    color: #2b1e12;
    font-size: clamp(10px, 1.800vw, 13px);
    font-weight: 900;
}

.tt-coord {
    position: absolute;
    top: 2px;
    left: 4px;
    color: rgba(45, 60, 20, .62);
    font-size: 10px;
}

.tt-wall {
    background: radial-gradient(circle at 50% 45%, rgba(40, 110, 66, .92) 0, rgba(23, 62, 38, .98) 85%);
    outline-color: rgba(15, 40, 25, .6);
}

.tt-wall svg {
    width: 98%;
    height: 98%;
    overflow: visible;
}

.tt-piece {
    display: flex;
    width: 84%;
    height: 84%;
}

.tt-piece .tt-char {
    width: 100%;
    height: 100%;
    vertical-align: top;
    filter: drop-shadow(0 2px 1px rgba(40, 25, 5, .4));
}

.tt-piece-active {
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--tt-gold), 0 0 12px 4px rgba(227, 182, 68, .9);
}

.tt-piece-mine {
    animation: tt-piece-pulse 1.1s ease-in-out infinite;
}

.tt-badge {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 0 5px 0 2px;
    border: 1.500px solid #f4d98a;
    border-radius: 10px;
    background: #2b1e12;
    color: #fff;
    font-size: clamp(11px, 2.200vw, 14px);
    font-weight: 800;
}

.tt-badge svg {
    width: 1.200em;
    height: 1.200em;
}

button.tt-cell {
    cursor: pointer;
}

.tt-mark {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: clamp(10px, 2vw, 13px);
    font-weight: 800;
    white-space: nowrap;
}

.tt-attackable .tt-mark {
    position: absolute;
    top: 2px;
    left: 2px;
    padding: 0 4px;
    border-radius: 6px;
    background: var(--tt-orange);
    color: #fff;
}

.tt-mark svg {
    width: 1.100em;
    height: 1.100em;
}

.tt-mark-move {
    background: rgba(216, 244, 214, .92);
    box-shadow: inset 0 0 0 4px var(--tt-green);
    color: #0f5526;
}

.tt-mark-vent {
    background: rgba(233, 222, 252, .95);
    box-shadow: inset 0 0 0 4px #5b2fb0;
    color: #3d1d80;
}

.tt-attackable {
    background: rgba(253, 227, 203, .92);
    box-shadow: inset 0 0 0 4px var(--tt-orange);
}

.tt-mark-move:hover, .tt-attackable:hover {
    filter: brightness(.94);
}

.tt-log ol {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.tt-log li {
    padding: 4px 0;
    border-bottom: 1px solid #ecdfba;
}

.tt-log-turn {
    color: var(--tt-muted);
    font-size: 11px;
}

/* 카드 */
.tt-hand {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 148px;
    margin-bottom: 10px;
}

.tt-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    flex: 0 0 98px;
    height: 148px;
    padding: 4px;
    border: 3px solid #4f2f13;
    border-radius: 11px;
    color: #2b1e12;
    font: inherit;
    text-align: center;
    box-shadow: 0 3px 0 rgba(40, 25, 5, .4);
    cursor: pointer;
}

.tt-card-move1 {
    background: #eaf6d4;
    border-color: #2e6d30;
}

.tt-card-move2 {
    background: #fff0c4;
    border-color: #a8620f;
}

.tt-card-jump {
    background: #f0e9fd;
    border-color: #5b2fb0;
}

.tt-card-defense {
    background: #e2f0fc;
    border-color: #1c5a9e;
}

.tt-card:disabled {
    cursor: default;
}

.tt-card:not(:disabled) {
    box-shadow: 0 3px 0 rgba(40, 25, 5, .4), 0 0 0 3px var(--tt-gold);
}

.tt-card:not(:disabled):hover {
    transform: translateY(-3px);
}

/* 손패가 많으면 카드를 작게 줄이고 문구를 뺀다. 그래도 넘치면 손패 칸 안에서 스크롤한다. */
.tt-hand {
    max-height: 46vh;
    overflow-y: auto;
    padding: 4px;
}

.tt-hand-many .tt-card {
    flex: 0 0 72px;
    height: 104px;
    padding: 3px;
    border-width: 2px;
}

.tt-hand-many .tt-card-title {
    padding: 0 0 2px;
    font-size: 12px;
}

.tt-hand-many .tt-card-art {
    height: 44px;
}

.tt-hand-many .tt-card-text {
    display: none;
}

.tt-hand-many .tt-card-cta {
    font-size: 12px;
}

/* 누를 수 있는 카드는 규칙 문구 자리에 할 일을 크게 쓴다. */
.tt-card-cta {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    border-radius: 6px;
    background: var(--tt-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.tt-card-cta-discard {
    background: #b3261e;
}

.tt-hand-discard {
    border-color: #b3261e;
    box-shadow: 0 0 0 3px #f9c9c4;
}

.tt-discard-title {
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #b3261e;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.tt-hand-discard .tt-card:not(:disabled) {
    box-shadow: 0 3px 0 rgba(40, 25, 5, .4), 0 0 0 3px #f2867d;
}

.tt-hand-discard .tt-card:not(:disabled):hover {
    box-shadow: 0 3px 0 rgba(40, 25, 5, .4), 0 0 0 4px #b3261e;
    transform: translateY(-5px);
}

.tt-card-title {
    display: block;
    padding: 1px 0 3px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -.3px;
}

.tt-card-art {
    display: block;
    width: 100%;
    height: 62px;
    border: 2px solid rgba(50, 30, 10, .65);
    border-radius: 6px;
    overflow: hidden;
    flex: 0 0 auto;
}

.tt-card-text {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 2px 1px 0;
    font-size: 11px;
    line-height: 1.25;
}

.tt-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 42px;
}

.tt-action-hint {
    color: #0f5526;
    font-weight: 800;
}

/* 채팅 */
.tt-chat {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 170px;
}

.tt-chat-list {
    flex: 1 1 0;
    min-height: 0;
    margin: 0 0 8px;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    font-size: 13px;
}

.tt-chat-list li {
    padding: 3px 4px;
    border-radius: 6px;
}

.tt-chat-mine {
    background: #fff0c2;
}

.tt-chat-form {
    display: flex;
    gap: 6px;
}

.tt-chat-form input {
    flex: 1;
    min-width: 0;
    min-height: 36px;
    padding: 4px 10px;
    border: 2px solid var(--tt-parchment-line);
    border-radius: 9px;
    background: #fff;
    font: inherit;
}

.tt-lobby-chat {
    max-width: 470px;
    margin: -12px auto 28px;
}

.tt-lobby-chat .tt-chat {
    height: 240px;
}

/* 팝업 */
.tt-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 35, 20, .6);
    z-index: 20;
}

.tt-dialog {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: auto;
    padding: 20px;
    border: 4px solid var(--tt-wood);
    border-radius: 18px;
    background: var(--tt-parchment);
    box-shadow: 0 8px 0 rgba(30, 20, 5, .5);
}

.tt-dialog h2 {
    font-size: 21px;
    font-weight: 900;
    margin-bottom: 10px;
    text-align: center;
}

.tt-dialog-defense {
    border-color: var(--tt-blue);
}

.tt-versus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.tt-versus .tt-char {
    width: 88px;
    height: 88px;
}

.tt-versus-claw {
    width: 44px;
    height: 44px;
    color: var(--tt-orange);
}

.tt-defense-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.tt-defense-actions .tt-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.tt-defense-actions small {
    font-weight: 400;
}

.tt-defense:not(:disabled) {
    border-color: var(--tt-blue);
    background: #e2f0fc;
    color: #0f3a6e;
}

.tt-defense:hover:not(:disabled) {
    background: #cfe5fa;
}

.tt-winner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6px;
}

.tt-winner-crown {
    width: 70px;
    height: 46px;
    margin-bottom: -10px;
    position: relative;
    z-index: 1;
}

.tt-winner .tt-char {
    width: 130px;
    height: 130px;
}

.tt-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.tt-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 16px;
    margin: 0 0 10px;
}

.tt-stats div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ecdfba;
    padding: 3px 0;
}

.tt-stats dt {
    color: var(--tt-muted);
}

.tt-stats dd {
    margin: 0;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .tt-layout {
        --tt-board-size: min(calc(100vh - 150px), calc(100vw - 390px), 720px);
        grid-template-columns: var(--tt-board-size) 340px;
        grid-template-rows: auto auto;
        height: auto;
    }

    .tt-col-left {
        order: 3;
        grid-column: 1 / -1;
    }

    .tt-col-right .tt-chat {
        flex: none;
        height: 280px;
    }

    .tt-log {
        flex: none;
        max-height: 280px;
    }

    .tt-col-left .tt-players {
        flex: none;
        overflow-y: visible;
    }
}

@media (max-width: 760px) {
    .tt-layout {
        --tt-board-size: 100%;
        grid-template-columns: minmax(0, 1fr);
        padding: 8px;
    }

    .tt-header-meta {
        margin-left: 0;
    }

    .tt-coord {
        display: none;
    }

    .tt-hand {
        flex-wrap: wrap;
        gap: 6px;
        min-height: 124px;
    }

    .tt-card {
        flex: 0 0 82px;
        height: 124px;
        padding: 3px;
    }

    .tt-card-title {
        font-size: 13px;
    }

    .tt-card-art {
        height: 50px;
    }

    .tt-card-cta {
        font-size: 14px;
    }

    .tt-card-text {
        font-size: 10px;
    }
}