/* MUD 전용 스타일 (mud.php 에서만 불러옴) — 색은 사이트 공통 토큰 사용, 지도·캐릭터는 그림 그대로 */
/* 왼쪽: 게임 화면, 오른쪽: 기록 창·설정 (좁은 화면에서는 화면이 위, 기록이 아래) */
.mud-app { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); grid-template-areas: "stage panel"; gap: 20px; align-items: start; }
.mud-stage { grid-area: stage; }
.mud-panel { grid-area: panel; }
.mud-app *, .mud-app *::before, .mud-app *::after { box-sizing: border-box; }
.mud-app button, .mud-app select { font-family: inherit; }

.mud-stage { min-width: 0; }
#mud-canvas {
    display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
    image-rendering: pixelated;
    border-radius: 10px; background: #16120e;
    box-shadow: 0 8px 24px -12px var(--shadow-color), 0 0 0 1px var(--line);
}
#mud-canvas:focus { outline: none; }
#mud-canvas:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

/* 방향 버튼: 터치 화면에서만 보임 */
.mud-pad {
    display: none; margin: 14px auto 0; width: 210px;
    grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 56px); gap: 6px;
    touch-action: none; user-select: none; -webkit-user-select: none;
}
@media (hover: none) and (pointer: coarse) { .mud-pad { display: grid; } }
.mud-pad button {
    border: 1px solid var(--line-input); border-radius: 10px; background: var(--surface);
    color: var(--text-2); font-size: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mud-pad button:active { background: var(--hover-bg-2); }
.mud-pad .up { grid-column: 2; grid-row: 1; }
.mud-pad .left { grid-column: 1; grid-row: 2; }
.mud-pad .look { grid-column: 2; grid-row: 2; font-size: 13px; }
.mud-pad .right { grid-column: 3; grid-row: 2; }
.mud-pad .down { grid-column: 2; grid-row: 3; }

.mud-panel {
    min-width: 0; display: grid; gap: 12px 20px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "where" "log" "meta" "help";
    align-items: start;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px;
}
.mud-where { grid-area: where; }
.mud-log { grid-area: log; }
.mud-meta { grid-area: meta; }
.mud-help { grid-area: help; }
.mud-zone { font-size: 19px; font-weight: bold; color: var(--text); }
.mud-pos { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mud-items { display: flex; gap: 8px; align-items: baseline; margin-top: 6px; font-size: 14px; color: var(--text-2); }
.mud-items .mud-lbl { margin: 0; }

/* 텍스트 기록: MUD 느낌의 터미널 창 (라이트/다크 공통으로 어두운 화면) */
.mud-log {
    list-style: none; margin: 0; padding: 10px 12px; height: 420px; overflow: auto;
    background: #12171c; color: #c9d4cc; border-radius: 8px;
    font-family: "D2Coding", "Consolas", "Menlo", monospace; font-size: 13px; line-height: 1.6;
}
.mud-log li { padding: 1px 0; }
.mud-log li::before { content: "> "; color: #5d6b63; }
.mud-log .intro { color: #f0d27a; }
.mud-log .zone { color: #8fd18a; }
.mud-log .look { color: #e6ece8; }
.mud-log .bump { color: #e59a8f; }
.mud-log .door { color: #9cc8f0; }
.mud-log .treasure { color: #ffd36a; font-weight: bold; }
.mud-log .talk { color: #f2b8d8; }

.mud-meta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.mud-meta strong { display: block; font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.mud-lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.mud-app select {
    font-size: 14px; padding: 6px 8px; border: 1px solid var(--line-input); border-radius: 6px;
    background: var(--input-bg); color: var(--input-text);
}
.mud-btn {
    font-size: 14px; padding: 7px 12px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--line-input); background: var(--surface); color: var(--text-2);
}
.mud-btn:hover { background: var(--hover-bg); border-color: var(--primary); }
.mud-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.mud-btn-danger { color: var(--danger-text); }
.mud-btn-danger:hover { border-color: var(--danger); }
.mud-btn-danger.armed { background: var(--danger); border-color: var(--danger); color: #fff; }
.mud-app button:focus-visible, .mud-app select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.mud-help { font-size: 13px; color: var(--muted); line-height: 1.8; }
.mud-help kbd {
    display: inline-block; min-width: 1.6em; padding: 0 4px; margin: 0 1px; text-align: center;
    border: 1px solid var(--line-input); border-bottom-width: 2px; border-radius: 4px;
    background: var(--th-bg); color: var(--text-3); font-family: inherit; font-size: 12px; line-height: 1.5;
}

@media (max-width: 900px) {
    .mud-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "panel"; }
    .mud-stage { max-width: 640px; width: 100%; margin: 0 auto; }
    .mud-log { height: 200px; }
}