/* 그림은 캔버스가 그린다. 여기는 종이 · 단추 · 글자.
   서부 = 현상수배서 (바랜 종이, 나무 활자, 붉은 별, 먹색 띠)
   사무라이 = 수묵 (한지, 붓글씨, 붉은 낙관) */
:root {
  /* 종이 — 캔버스가 그리는 수배서 · 게시판 그림과 같은 빛깔이라 밤에도 그대로 둔다 */
  --paper: #e2c48c; --paper-hi: #efd9a8; --paper-note: #f0dfb6;
  --paper-line: #e2c48c55; --paper-rule: #e2c48c99;
  /* 글자 */
  --ink: #3b2414; --ink-soft: #3b241499; --ink-faint: #3b241455; --hand: #1f2946;
  --red: #8e2a1c; --red-deep: #6e1f13;
  /* 밤 — 캔버스 위에 얹는 어두운 면과 그 위의 글자 */
  --night: #0b0806; --panel: #1a100ae0; --panel-deep: #140b05d9; --plaque: #24160ce0;
  --panel-fg: #f7e6c4; --panel-fg-soft: #e8cf9f; --gild: #e0b35e;
  /* 시작 화면 — 글자 뒤 그늘 · 위아래 가는 줄 */
  --halo: #0a0603cc; --halo-2: #0a060388; --hairline: #dcc29acc; --glow: #e6d2a6; --glow-hi: #fff3d6;
  /* 가림막 · 그림자 */
  --scrim: #0006; --scrim-edge: #000c; --shadow: #000a; --shadow-deep: #000c;
  --wood: "Rye", "Hahmlet", serif; --slab: "Alfa Slab One", "Hahmlet", serif; --kr: "Hahmlet", serif;
  color-scheme: light;
}

/* 해가 완전히 진 뒤 — 종이는 종이 그대로 두고 그 둘레의 밤만 더 내린다.
   수배서 · 게시판 · 두루마리는 캔버스가 아니라 그림 파일이라 여기서 어둡게 할 수 없다.
   토큰만 바꾼다. 컴포넌트 규칙은 아래 제 자리에 그대로. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper-note: #d8c193;
    --night: #050403; --panel: #0d0805f2; --panel-deep: #090503ea; --plaque: #170d06ee;
    --panel-fg: #f0dcb4; --panel-fg-soft: #d9bf8f; --gild: #cf9f4d;
    --halo: #050302e0; --halo-2: #05030299; --hairline: #c7ab83cc; --glow: #dcc79b; --glow-hi: #fff0cd;
    --scrim: #0009; --scrim-edge: #000e; --shadow: #000d; --shadow-deep: #000f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper-note: #d8c193;
  --night: #050403; --panel: #0d0805f2; --panel-deep: #090503ea; --plaque: #170d06ee;
  --panel-fg: #f0dcb4; --panel-fg-soft: #d9bf8f; --gild: #cf9f4d;
  --halo: #050302e0; --halo-2: #05030299; --hairline: #c7ab83cc; --glow: #dcc79b; --glow-hi: #fff0cd;
  --scrim: #0009; --scrim-edge: #000e; --shadow: #000d; --shadow-deep: #000f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--night); color: var(--ink); font: 15px/1.5 "Pretendard Variable", system-ui, sans-serif; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
#scene, #stage { position: fixed; inset: 0; width: 100%; height: 100%; }
#stage { display: none; cursor: crosshair; touch-action: none; }
body[data-view="game"] #stage { display: block; }
body[data-view="select"] #scene { cursor: pointer; }

.top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; pointer-events: none; }
.top > * { pointer-events: auto; }   /* 위 막대가 아래 화면의 단추(방식 다시 고르기)를 가리지 않게 */
.brand { color: #fff8; text-decoration: none; font: 13px var(--slab); letter-spacing: .08em; }
.icon { width: 36px; height: 36px; border: 1px solid var(--paper-line); border-radius: 50%; background: var(--panel); color: var(--paper); cursor: pointer; }
#quitBtn { display: none; }
body[data-view="game"] #quitBtn, body[data-view="lobby"] #quitBtn, body[data-view="over"] #quitBtn { display: inline-block; }

.view { position: fixed; inset: 0; z-index: 3; display: none; padding: 60px 16px 24px; align-items: center; justify-content: flex-end; flex-direction: column; overflow-y: auto; }
body[data-view="title"] #title, body[data-view="home"] #home, body[data-view="over"] #over, body[data-view="soon"] #soon { display: flex; }
#title { padding-bottom: 17vh; }
/* 회전초가 지나가는 동안 떠나는 화면은 왼쪽에 남는다 */
.view.leaving { display: flex; pointer-events: none; }
#lobby.leaving { display: grid; }
#startGameBtn { opacity: 0; transition: opacity .6s, transform .15s; }
.ready #startGameBtn { opacity: 1; }

/* ───────── 종이 ───────── */
.result {
  border: 34px solid transparent;
  border-image: url(/img/paper_panel.png) 70 fill / 34px stretch;
}

/* ───────── 단추 — 나무 활자로 찍은 잉크 ───────── */
.btn {
  position: relative; padding: 10px 16px; cursor: pointer;
  font: 900 17px var(--kr); letter-spacing: .03em;
  color: var(--ink); background: #0000;
  border: 3px solid var(--ink); border-radius: 0;
  -webkit-mask: url(/img/grunge.png) 0 0 / 220px; mask: url(/img/grunge.png) 0 0 / 220px;
  transition: transform .1s, background .15s, color .15s;
}
.btn:hover { background: var(--ink); color: var(--paper-hi); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; background: #0000; color: var(--ink); }
.btn.primary { color: var(--paper-hi); background: var(--red); border-color: var(--red); font-size: 20px; }
.btn.primary:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn.big { padding: 14px 44px; font-size: 24px; }
.btn.slim { padding: 5px 10px; font-size: 13px; border-width: 2px; }
/* 게임 시작 — 붉은 덩어리 대신 제목과 같은 빛깔의 글자, 위아래 가는 줄 */
#title #startGameBtn {
  -webkit-mask: none; mask: none; border: 0; box-shadow: none;
  background: radial-gradient(ellipse at center, var(--halo) 0%, var(--halo-2) 45%, #0000 72%);
  color: var(--glow); font: 900 22px var(--kr); letter-spacing: .42em;
  padding: 16px 30px 16px calc(30px + .42em);
  text-shadow: 0 2px 10px #000;
  transition: opacity .6s, letter-spacing .25s, color .2s, text-shadow .2s;
}
#title #startGameBtn::before, #title #startGameBtn::after {
  content: ""; position: absolute; left: 8%; right: 8%; height: 1px; transform: none;
  background: linear-gradient(90deg, #0000, var(--hairline) 25%, var(--hairline) 75%, #0000);
}
#title #startGameBtn::before { top: 4px; }
#title #startGameBtn::after { bottom: 4px; }
#title #startGameBtn:hover { color: var(--glow-hi); letter-spacing: .55em; text-shadow: 0 0 18px #ffd28c99, 0 2px 10px #000; background: radial-gradient(ellipse at center, var(--halo) 0%, var(--halo-2) 45%, #0000 72%); }
.back { position: fixed; left: 76px; top: 10px; z-index: 6; border: 0; cursor: pointer; padding: 11px 20px 11px 24px; background: var(--plaque); color: var(--paper); font: 900 17px var(--kr); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.back:hover { background: var(--red); }
/* 수배서(0.75초)와 게시판(1.2초)이 자리 잡은 뒤에 왼쪽에서 스르르 */
#home .back { animation: backIn .5s 1.9s cubic-bezier(.25,.8,.3,1) both; }
@keyframes backIn { from { opacity: 0; visibility: hidden; transform: translateX(-24px); } }
.link { border: 0; background: #0000; cursor: pointer; font: 700 14px var(--kr); color: var(--ink); opacity: .8; }
.link:hover { opacity: 1; text-decoration: underline; }

/* ───────── 처음 — 마을 게시판 · 구멍 뚫린 수배서 ───────── */
#home { perspective: 1400px; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 60px max(16px, 6vw) 24px max(16px, 4vw); overflow: hidden; }
.sheet {
  --w: clamp(320px, min(520px, 38vw, calc((100vh - 76px) * .773)), 520px);
  position: relative; width: var(--w); min-height: calc(var(--w) * 1.293); flex: none;
  background: url(/img/poster_blank.png) center / 100% 100% no-repeat;
  padding: calc(var(--w) * .25) calc(var(--w) * .13) calc(var(--w) * .09);
  display: flex; flex-direction: column; justify-content: center; gap: 12px; text-align: center;
}
/* 사진 칸이 뚫린 수배서 — 칸 아래에 이름 · 방 만들기 · 코드 */
.sheet.holed {
  background-image: url(/img/poster_hole.png);
  padding-top: calc(var(--w) * .76); justify-content: flex-start; gap: 9px;
  animation: riseSheet .85s .75s cubic-bezier(.25,.85,.3,1) both;   /* 사람이 먼저 자리를 잡고 나서 아래에서 올라온다 */
  will-change: transform;
}
/* 그림자 필터는 움직이는 동안 매 프레임 다시 그려 끊긴다 — 발밑에 흐린 타원 하나로 대신한다 */
.sheet::before, .townboard::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -3%; height: 8%; background: radial-gradient(ellipse at center, var(--shadow), #0000 70%); z-index: -1; }
.doa { margin: calc(var(--w) * .02) 0 calc(var(--w) * .03); font: calc(var(--w) * .085)/1 var(--wood); color: var(--ink); letter-spacing: .03em; }   /* WANTED 다음으로 큰 글씨 */
.link small { display: block; font-size: 11.5px; font-weight: 600; opacity: .75; margin-top: 2px; }
.hole { position: absolute; left: 22.2%; top: 20.1%; width: 55.6%; height: 32.2%; pointer-events: none; }
@keyframes riseSheet { from { transform: translateY(105vh) rotate(2deg); } 82% { transform: translateY(-8px) rotate(-.3deg); } to { transform: none; } }

.townboard {
  /* 틀(가장자리)은 그대로 두고 판자만 늘어나게 — 위아래로 빈 곳을 채운다 */
  position: relative; flex: 1 1 0; min-width: 0; align-self: stretch; margin: 2vh 0;
  border-style: solid; border-width: clamp(34px, 5.5vw, 62px) clamp(52px, 9vw, 110px) clamp(34px, 5.5vw, 58px) clamp(44px, 7vw, 86px);
  border-image: url(/img/board.png) 60 125 55 90 fill / clamp(34px, 5.5vw, 62px) clamp(52px, 9vw, 110px) clamp(34px, 5.5vw, 58px) clamp(44px, 7vw, 86px) stretch;
  animation: boardIn .9s 1.2s cubic-bezier(.3,.75,.25,1) both;
  will-change: transform;
}
@keyframes boardIn { from { transform: translateX(-80vw) rotate(1.5deg); } 80% { transform: translateX(-6px) rotate(-.2deg); } to { transform: none; } }
.tb-in { position: absolute; inset: 6px; display: flex; flex-direction: column; gap: 12px; }
.tb-head { align-self: flex-start; margin: 0; padding: 6px 14px 7px; background: var(--panel-deep); font: 900 clamp(18px, 1.9vw, 26px)/1.1 var(--kr); color: var(--panel-fg); letter-spacing: .02em; }
.tb-head small { font: 700 13px var(--kr); color: var(--panel-fg-soft); margin-left: 10px; }
#roomList { list-style: none; margin: 0; padding: 6px 4px; flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; align-content: start; }
#roomList li {
  position: relative; padding: 14px 14px 10px; cursor: pointer; color: var(--ink);
  background: var(--paper-note) url(/img/paper_panel.png) center / 200% 200%; background-blend-mode: multiply;
  box-shadow: 0 5px 12px var(--shadow); transform: rotate(var(--r, -1deg)); transition: transform .15s;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
}
#roomList li:nth-child(2n) { --r: 1.2deg; }
#roomList li:nth-child(3n) { --r: -.4deg; }
#roomList li::before { content: ""; position: absolute; left: 50%; top: 4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #1d1712; }
#roomList li:hover { transform: rotate(0) scale(1.04); }
#roomList li b { font: 900 18px var(--kr); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#roomList li .n { font: 20px var(--wood); color: #7a1c10; }
#roomList li small { grid-column: 1 / -1; font-weight: 800; font-size: 13px; color: var(--ink); opacity: 1; }
#roomList li.playing { cursor: default; filter: grayscale(.6) brightness(.85); }
#roomList li.playing:hover { transform: rotate(var(--r, -1deg)); }
.rb-empty { align-self: flex-start; margin: 0; padding: 8px 12px; background: var(--panel-deep); font: 700 15px var(--kr); color: var(--panel-fg); }

.field { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px dotted var(--ink); text-align: left; }
.field span { font: 14px var(--slab); letter-spacing: .06em; }
.field input { flex: 1; min-width: 0; border: 0; background: #0000; padding: 4px 2px; outline: none; font: 26px "Nanum Pen Script", cursive; color: var(--hand); user-select: text; }
.field input::placeholder { color: var(--ink-faint); }
.or { margin: 2px 0; display: flex; align-items: center; gap: 10px; font: 15px var(--wood); letter-spacing: .2em; color: var(--red); }
.or::before, .or::after { content: ""; flex: 1; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); height: 4px; }
.joinrow { display: flex; gap: 10px; align-items: flex-end; }
.joinrow .field { flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 1; min-width: 0; }
.small { font-size: 13px; font-weight: 700; }
.bar select { border: 0; border-bottom: 1px solid currentColor; background: #0000; padding: 3px 2px; margin: 0 4px; outline: none; font-weight: 700; }
.err { margin: 0; color: var(--red); font-weight: 800; font-size: 13px; min-height: 1em; }
small { font-size: 12px; opacity: .7; font-weight: 700; }
@keyframes pin { from { opacity: 0; transform: translateY(-30px) rotate(-3deg); } }

/* ───────── 대기방 — 왼쪽 방 설정 · 오른쪽 위 수배서 · 아래 채팅 ───────── */
#lobby {
  display: none; padding: 58px 18px 18px; gap: 16px 20px; pointer-events: none; align-items: stretch; justify-content: stretch;
  grid-template-columns: minmax(250px, 300px) 1fr; grid-template-rows: 1fr minmax(170px, 30vh);
  grid-template-areas: "rules wall" "rules chat";
}
body[data-view="lobby"] #lobby { display: grid; }
#wall { grid-area: wall; }
.rules {
  grid-area: rules; pointer-events: auto; align-self: start;
  border: 30px solid transparent; border-image: url(/img/paper_panel.png) 70 fill / 30px stretch;
  filter: drop-shadow(0 16px 30px var(--shadow-deep));
  display: grid; gap: 10px; text-align: center; color: var(--ink);
}
.rules-kicker { margin: 0; font: 13px var(--slab); letter-spacing: .25em; }
.rules .code { font: 46px/1 var(--wood); letter-spacing: .1em; color: var(--red); }
.rules-list { display: grid; gap: 2px; margin: 8px 0 4px; border-top: 3px double var(--ink); padding-top: 8px; }
.rules-list label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--ink-soft); font: 900 15px var(--kr); }
.rules-list select { border: 0; background: #0000; font: 900 15px var(--kr); color: var(--red); text-align: right; outline: none; cursor: pointer; }
.rules-list select:disabled { color: var(--ink); cursor: default; appearance: none; }
.together { position: relative; display: flex; gap: 8px; align-items: stretch; padding: 8px 0; }
.together .btn { flex: 1; min-width: 0; white-space: nowrap; font-size: 15px; padding-inline: 8px; }
.help { flex: none; width: 40px; border: 3px solid var(--ink); background: #0000; font: 20px var(--wood); color: var(--ink); cursor: pointer; }
.help:hover, .help[aria-expanded="true"] { background: var(--ink); color: var(--paper-hi); }
.helpbox { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 7; padding: 12px 14px; background: var(--paper-hi); border: 3px solid var(--ink); box-shadow: 0 12px 30px var(--shadow); text-align: left; }
.hb-title { margin: 0 0 8px; font: 900 15px var(--kr); }
.hb-note { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--ink-soft); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.keys-note { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; font-weight: 800; }
.keys-note li { display: flex; align-items: center; gap: 4px; }
.keys-note li span { width: 30px; text-align: left; }
kbd { display: inline-block; white-space: nowrap; padding: 0 5px; border: 1.5px solid var(--ink); border-bottom-width: 3px; border-radius: 3px; font: 11px var(--slab); background: #fff4; }
.rules-note { margin: 0; font-size: 12.5px; font-weight: 700; opacity: .75; }
.rules-note:empty { display: none; }
.rules .go { display: grid; gap: 8px; }
.rules .btn.primary { font-size: 22px; padding: 12px; }

.chat {
  grid-area: chat; pointer-events: auto; min-height: 0;
  display: grid; grid-template-rows: auto 1fr auto; gap: 6px;
  background: var(--panel); color: var(--paper); padding: 10px 14px 12px;
  border-top: 3px double var(--paper-rule);
}
.chat-kicker { margin: 0; font: 12px var(--slab); letter-spacing: .25em; color: var(--gild); }
#chatLog { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; font-size: 14px; user-select: text; min-height: 0; }
#chatLog li b { font: 12px var(--slab); color: var(--gild); margin-right: 8px; letter-spacing: .03em; }
#chatLog li.me b { color: #ffb08a; }
#chatLog li.sys { font-style: italic; opacity: .65; }
#chatForm { display: flex; gap: 8px; }
#chatIn { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--paper-rule); background: #0000; color: var(--paper); padding: 6px 2px; outline: none; user-select: text; font-size: 15px; }
.chat .btn { color: var(--paper); border-color: var(--paper); }
.chat .btn:hover { background: var(--paper); color: var(--ink); }

/* 채팅이 화면 밖에 있을 때 온 말 — 머리글 채팅 단추의 빨간 숫자와, 그 아래 말풍선. 누르면 채팅으로 간다 */
.chat-btn { position: relative; font-size: 15px; line-height: 1; padding: 0; vertical-align: middle; }
.chat-btn[hidden], .chat-peek[hidden] { display: none; }
.chat-n {
  position: absolute; top: -5px; right: -6px;
  min-width: 18px; height: 18px; border-radius: 999px; padding: 0 4px;
  font: 11px/16px var(--slab); letter-spacing: 0;
  background: var(--red); color: var(--paper-hi); border: 1px solid var(--paper);
}
.chat-n.pop { animation: chatPop .5s cubic-bezier(.3,1.7,.5,1); }
@keyframes chatPop { from { transform: scale(.3); } }
.chat-peek {
  position: fixed; top: calc(54px + env(safe-area-inset-top)); right: 16px; z-index: 6;
  max-width: min(300px, calc(100vw - 32px));
  padding: 8px 12px; border-radius: 13px 4px 13px 13px;
  background: var(--panel); color: var(--panel-fg); border: 1px solid var(--paper-rule);
  box-shadow: 0 12px 26px -12px var(--shadow);
  font-size: 14px; line-height: 1.45; cursor: pointer; word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  animation: chatPeekIn .2s ease-out; transition: opacity .25s, transform .25s;
}
.chat-peek b { font: 12px var(--slab); color: var(--gild); margin-right: 8px; letter-spacing: .03em; }
body[data-mode="samurai"] .chat-peek b { font: 900 14px var(--kr); letter-spacing: 0; }
.chat-peek.bye { opacity: 0; transform: translateY(-6px); }
@keyframes chatPeekIn { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .chat-peek, .chat-n.pop { animation: none; transition: none; } }

.slotmenu {
  position: fixed; z-index: 6; pointer-events: auto; display: grid; gap: 8px; padding: 0 12px;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink);
  box-shadow: 0 14px 30px var(--shadow-deep);
  max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: max-height .3s cubic-bezier(.2,.8,.2,1), opacity .2s, padding .3s, visibility 0s .3s;
}
.slotmenu.open { max-height: 260px; opacity: 1; visibility: visible; padding: 10px 12px 12px; transition: max-height .35s cubic-bezier(.2,.8,.2,1), opacity .2s, padding .3s; }
.sm-title { margin: 0; font: 900 18px var(--kr); text-align: center; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.sm-body { display: grid; gap: 6px; }
.sm-body .btn { font-size: 16px; padding: 8px; }

@media (max-width: 760px) {
  #lobby { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 1fr) 160px auto; grid-template-areas: "wall" "chat" "rules"; overflow-y: auto; }
  .rules { align-self: stretch; }
}

/* ───────── 결과 — 현상금 공고 ───────── */
#over { align-items: center; justify-content: center; background: radial-gradient(ellipse at center, var(--scrim) 20%, var(--scrim-edge) 100%); animation: fade .6s ease-out both; }
@keyframes fade { from { opacity: 0; } }
.result { width: min(540px, 100%); text-align: center; animation: drop .7s .1s cubic-bezier(.2,.9,.25,1) both; will-change: transform, opacity; }
@keyframes drop { from { opacity: 0; transform: translateY(-40px) rotate(-1.5deg); } }
.kicker { margin: 0; font: 34px/1 var(--wood); color: var(--red); letter-spacing: .1em; }
.kicker::before, .kicker::after { content: "★"; font-size: 18px; vertical-align: 8px; margin: 0 12px; }
.result h2 { margin: 6px 0 14px; padding-bottom: 12px; font: 900 clamp(32px, 6vw, 50px)/1.1 var(--kr); border-bottom: 3px double var(--ink); }
.ranks { list-style: none; margin: 0 0 18px; padding: 0; }
.ranks li { display: grid; grid-template-columns: 30px 56px 1fr auto; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px dashed var(--ink-soft); text-align: left; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.45s + var(--i) * .1s); will-change: transform, opacity; }
.ranks .rk { font: 24px var(--wood); text-align: center; color: var(--ink-soft); }
.ranks li.win .rk { color: var(--red); }
.ranks img { width: 56px; height: 56px; object-fit: cover; object-position: top; border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--paper); filter: sepia(.85) contrast(1.1) brightness(.95); background: #cdb07a; }
.ranks li.win img { filter: sepia(.35) contrast(1.05); }
.ranks b { display: block; font: 900 20px var(--kr); }
.ranks small { display: block; opacity: .75; font-weight: 700; }
.ranks strong { font: 26px var(--wood); color: var(--ink); white-space: nowrap; }
.ranks li.win strong { color: var(--red); }
.ranks strong em { font: 12px var(--slab); font-style: normal; margin-left: 4px; }
.acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; animation: rise .5s .85s both; }
.wait { margin: 10px 0 0; font-weight: 700; font-size: 13px; }

#toast { position: fixed; left: 50%; bottom: 28px; z-index: 9; transform: translateX(-50%); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--ink-soft), 0 8px 24px var(--shadow); padding: 10px 18px; font-weight: 800; opacity: 0; transition: opacity .25s; pointer-events: none; }
#toast.on { opacity: 1; }

/* ───────── 사무라이 — 수묵 ───────── */
.ink { align-items: center; justify-content: center; background: #0008; }
.scroll {
  position: relative; width: min(600px, 100%); padding: 56px 110px 44px;
  background: url(/img/washi.jpg) center / 512px; color: #141214;
  box-shadow: 0 30px 70px #000c, inset 0 0 60px #6d5a3f33;
  display: grid; justify-items: center; align-content: start; gap: 14px;
  animation: unroll .7s cubic-bezier(.2,.8,.2,1) both;
}
.scroll::before, .scroll::after { content: ""; position: absolute; left: -10px; right: -10px; height: 16px; background: linear-gradient(#2b1d12, #5a4028 50%, #2b1d12); border-radius: 8px; }
.scroll::before { top: -8px; }
.scroll::after { bottom: -8px; }
.brush { margin: 0; font: clamp(52px, 10vw, 86px)/1.05 "Yuji Syuku", "Noto Serif JP", serif; letter-spacing: 0; white-space: nowrap; }
.vert { position: absolute; right: 34px; top: 50px; margin: 0; writing-mode: vertical-rl; font: 30px/1 "Nanum Brush Script", cursive; letter-spacing: -.12em; color: #2a2528; }
.brush-sub { margin: 0 0 10px; font: 26px/1.2 "Nanum Brush Script", cursive; letter-spacing: -.02em; text-align: center; }
.seal { position: absolute; left: 30px; top: 46px; width: 50px; height: 50px; display: grid; place-items: center; background: #b3261e; color: #f5e6d8; font: 13px/1 "Yuji Syuku", "Noto Serif JP", serif; writing-mode: vertical-rl; letter-spacing: -.05em; border-radius: 4px; transform: rotate(-4deg); box-shadow: inset 0 0 0 3px #b3261e, inset 0 0 0 4px #f5e6d855; }
.btn.inkbtn { border: 0; box-shadow: none; -webkit-mask: none; mask: none; color: #f5efe4; padding: 16px 52px; font: 30px/1 "Nanum Brush Script", cursive; letter-spacing: -.02em; background: url(/img/ink_stroke.png) center / 100% 100% no-repeat; }
.btn.inkbtn:hover { transform: scale(1.04); background-color: #0000; color: #fff; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ═════════════ 사무라이 일기토 — 한지 · 먹 · 쪽빛 비단 · 붉은 낙관 ═════════════ */
.s-only { display: none; }
body[data-mode="samurai"] .w-only { display: none; }
body[data-mode="samurai"] .s-only { display: revert; }
body[data-mode="samurai"] i.s-only, body[data-mode="samurai"] span.s-only { display: inline; }
.field span i { font-style: normal; }
body[data-mode="samurai"] .keys-note.s-only { display: grid; }
body[data-mode="samurai"] {
  --paper: #ece5d6; --paper-hi: #f5efe2; --paper-line: #ece5d655; --paper-rule: #ece5d655;
  --ink: #16151c; --ink-soft: #16151c80; --ink-faint: #16151c45; --hand: #16151c;
  --red: #a3221b; --red-deep: #7e1812;
  --panel: #0a0d16e8; --panel-deep: #0a0c12e0; --panel-fg: #ece5d6; --panel-fg-soft: #c9bfae; --gild: #b89b5e;
  --silk: #1c2336; --gold: #b89b5e; --brush: "Nanum Brush Script", "Hahmlet", cursive; --jp: "Yuji Syuku", "Noto Serif JP", "Hahmlet", serif;
}
/* 사무라이도 밤이 깊어진다 — 한지는 그대로, 쪽빛 판만 가라앉힌다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-mode="samurai"] {
    --panel: #05070df2; --panel-deep: #04060aee; --panel-fg: #e2dbcc; --panel-fg-soft: #b9b0a2; --gild: #a98e57;
  }
}
:root[data-theme="dark"] body[data-mode="samurai"] {
  --panel: #05070df2; --panel-deep: #04060aee; --panel-fg: #e2dbcc; --panel-fg-soft: #b9b0a2; --gild: #a98e57;
}
/* 뒤로가기 — 금테 두른 옻칠 나무패, 붓글씨, 왼쪽 끝에 붉은 인 */
body[data-mode="samurai"] .back {
  clip-path: none; border-radius: 2px; padding: 8px 20px 9px 44px;
  background: linear-gradient(180deg, #1d1712, #0c0908); color: #ece5d6;
  font: 27px/1 var(--brush); letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px #b89b5eaa, inset 0 0 0 4px #0c0908, inset 0 0 0 5px #b89b5e40, 0 6px 16px var(--shadow);
  transition: background .25s, color .25s, box-shadow .25s, transform .25s;
}
body[data-mode="samurai"] .back::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  background: var(--red); border-radius: 2px; transform: rotate(45deg) scale(.72);
  box-shadow: inset 0 0 0 2px #e8c9a355; transition: transform .25s;
}
body[data-mode="samurai"] .back:hover {
  background: linear-gradient(180deg, #2a1f17, #150f0b); color: #fff6e2;
  box-shadow: inset 0 0 0 1px #e0c07a, inset 0 0 0 4px #150f0b, inset 0 0 0 5px #e0c07a66, 0 8px 20px var(--shadow-deep), 0 0 18px #a3221b55;
}
body[data-mode="samurai"] .back:hover::before { transform: rotate(45deg) scale(.9); }

/* 처음 — 서부와 반대로: 왼쪽 결투장 편지(얼굴은 편지 위로), 오른쪽 에마 걸이 */
body[data-mode="samurai"] #home { flex-direction: row-reverse; }
body[data-mode="samurai"] .townboard { animation-name: boardInR; }
@keyframes boardInR { from { transform: translateX(80vw) rotate(-1.5deg); } 80% { transform: translateX(6px) rotate(.2deg); } to { transform: none; } }
/* 족자가 펼쳐지는 정도 — 0(말림) → 1(다 펼침). 아래 축이 이 값을 따라 내려가고, 그만큼만 보인다 */
@property --roll { syntax: '<number>'; inherits: true; initial-value: 1; }
@keyframes unrollKj {
  0% { --roll: 0; opacity: 0; clip-path: inset(-80px -80px calc(100% - 16px) -80px); }
  10% { opacity: 1; }
  100% { --roll: 1; clip-path: inset(-80px -80px -16px -80px); }
}

/* 열린 방 — 장대에 매달린 나무패(끈 두 가닥) */
body[data-mode="samurai"] .townboard {
  border: 0; border-image: none; padding: 0; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 35%, #0a0c1280, #0a0c12cc);
  box-shadow: 0 20px 40px var(--shadow);
}
body[data-mode="samurai"] .tb-in { inset: 18px 22px 18px; }
body[data-mode="samurai"] .tb-head { font-family: var(--brush); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); padding: 2px 16px 4px; border-left: 3px solid var(--red); }
body[data-mode="samurai"] .tb-head small { font-family: "Pretendard Variable", system-ui; }
body[data-mode="samurai"] #roomList { display: flex; flex-wrap: wrap; gap: 44px 26px; align-content: flex-start; padding: 12px 14px 24px; }
body[data-mode="samurai"] #roomList li.tag-li {
  width: 118px; height: var(--tagH, 320px); flex: none; padding: 0; background: none; box-shadow: none; filter: none;
  transform: none; transition: none; display: block;
}
/* 장대 한 토막 — 패 사이 틈까지 이어 붙여 한 줄로 */
body[data-mode="samurai"] #roomList li.tag-li::before {
  content: ""; position: absolute; left: -13px; right: -13px; top: 0; width: auto; height: 18px; margin: 0; border-radius: 0; z-index: 2;
  background: repeating-linear-gradient(90deg, #0000 0 29px, #00000022 29px 30px, #0000 30px 47px, #ffffff10 47px 48px), linear-gradient(#94704a, #654529 45%, #3d2817);
  box-shadow: 0 4px 5px #0008;
}
body[data-mode="samurai"] #roomList li.tag-li:first-child::before { left: -18px; border-radius: 8px 0 0 8px; }
/* 장대에 감긴 끈 고리 둘 */
body[data-mode="samurai"] #roomList li.tag-li::after {
  content: ""; position: absolute; left: 0; right: 0; top: -6px; width: auto; height: 28px; margin: 0; border: 0; border-radius: 0; z-index: 3;
  background:
    radial-gradient(closest-side, #0000 52%, #d7bc82 58% 80%, #0000 86%) 22% 0 / 18px 30px no-repeat,
    radial-gradient(closest-side, #0000 52%, #d7bc82 58% 80%, #0000 86%) 78% 0 / 18px 30px no-repeat;
  filter: drop-shadow(0 1px 1px #0009);
}
body[data-mode="samurai"] .tag {
  position: absolute; left: 0; right: 0; top: 34px; bottom: 0; z-index: 1;
  transform-origin: 50% -18px; animation: tagSwing 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.43s);
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 16px; color: #1c0f06;
  background: repeating-linear-gradient(180deg, #0000 0 15px, #4a2a1016 15px 16px), linear-gradient(90deg, #97653a, #c38d55 45%, #93602f);
  border: 1px solid #3a2210; border-radius: 3px; box-shadow: 0 12px 14px var(--shadow), inset 0 0 0 2px #ffffff14;
}
/* 고리에서 패까지 내려오는 끈 두 가닥 */
body[data-mode="samurai"] .tag::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px;
  background: linear-gradient(#d7bc82, #d7bc82) 22% 0 / 2px 100% no-repeat, linear-gradient(#d7bc82, #d7bc82) 78% 0 / 2px 100% no-repeat;
}
.tg-mon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #16151c; color: #ece5d6; font: 28px/1 var(--jp); box-shadow: inset 0 0 0 2px var(--gold); }
body[data-mode="samurai"] .tag b { writing-mode: vertical-rl; flex: 1; min-height: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 34px/1 var(--brush); letter-spacing: .04em; }
body[data-mode="samurai"] .tag small { font: 900 16px/1 var(--kr); color: #5a1410; opacity: 1; }
body[data-mode="samurai"] #roomList li.tag-li:not(.blank):not(.playing) { cursor: pointer; }
body[data-mode="samurai"] #roomList li.tag-li:not(.blank):not(.playing):hover .tag { animation-name: tagSwingHard; animation-duration: 1.1s; filter: brightness(1.15); }
body[data-mode="samurai"] #roomList li.playing .tag { filter: brightness(.75) saturate(.6); }
body[data-mode="samurai"] #roomList li.playing .tg-mon { background: var(--red); }
body[data-mode="samurai"] #roomList li.blank { cursor: default; }
body[data-mode="samurai"] #roomList li.blank .tag { background: repeating-linear-gradient(180deg, #0000 0 15px, #2a180a1c 15px 16px), linear-gradient(90deg, #5f3e22, #7c5330 45%, #5c3b1e); }
@keyframes tagSwing { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes tagSwingHard { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* 족자 공통 — 쪽빛 비단 테 · 금실 일문자 · 위아래 축 (방 만들기 · 대기방 설정) */
body[data-mode="samurai"] .sheet.holed, body[data-mode="samurai"] .rules {
  border-style: solid; border-color: #0000; border-image: none; filter: none;
  border-width: var(--bt) var(--bs) var(--bb);
  background:
    url(/img/washi.jpg) center / 420px padding-box,
    radial-gradient(circle, #b89b5e55 1.2px, #0000 1.8px) 0 0 / 11px 11px border-box,
    linear-gradient(var(--silk), var(--silk)) border-box;
}
body[data-mode="samurai"] .sheet.holed::after, body[data-mode="samurai"] .rules::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--bt) * -.36); bottom: calc(var(--bb) * -.5); pointer-events: none;
  background: linear-gradient(var(--gold), var(--gold)) top / 100% calc(var(--bt) * .16) no-repeat, linear-gradient(var(--gold), var(--gold)) bottom / 100% calc(var(--bb) * .22) no-repeat;
  opacity: .8;
}
.kj-rod { position: absolute; pointer-events: none; }
body[data-mode="samurai"] .sheet.holed::before { content: none; }
body[data-mode="samurai"] .kj-top {
  left: calc(-1 * var(--bs) - 8px); right: calc(-1 * var(--bs) - 8px); top: calc(-1 * var(--bt) - 8px); height: 16px;
  border-radius: 3px; background: linear-gradient(#6d4f33, #2b1d12 60%, #1a120b); box-shadow: 0 3px 6px #0008;
}
/* 아래 축 — 펼쳐지는 만큼(--roll) 내려간다 */
body[data-mode="samurai"] .kj-bottom {
  left: calc(-1 * var(--bs) - 26px); right: calc(-1 * var(--bs) - 26px); height: 24px; border-radius: 12px; z-index: 2;
  top: calc(-1 * var(--bt) + var(--roll) * (100% + var(--bt) + var(--bb)) - 12px);
  background:
    radial-gradient(circle at 12px 50%, #d8c08a 0 3px, #0c0806 3.5px 8px, #b89b5e 8.5px 10px, #0c0806 10.5px) left / 24px 100% no-repeat,
    radial-gradient(circle at 12px 50%, #d8c08a 0 3px, #0c0806 3.5px 8px, #b89b5e 8.5px 10px, #0c0806 10.5px) right / 24px 100% no-repeat,
    linear-gradient(#3d2a1a, #140c07);
  box-shadow: 0 8px 12px #0009;
}

/* 일기토를 청하는 글 — 가로쓰기: 위에 제목 · 부제, 아래로 名 · 방 만들기 · 房番號와 들어가기 */
body[data-mode="samurai"] .sheet.holed {
  --w: clamp(340px, 27vw, 420px);
  --fh: min(calc(var(--w) * .44), 150px);          /* 족자 위로 보이는 얼굴 칸 */
  --bt: calc(var(--w) * .12); --bs: calc(var(--w) * .05); --bb: calc(var(--w) * .085);
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  width: var(--w); height: clamp(420px, calc(100vh - 280px), 660px); min-height: 0;
  align-self: flex-end; margin-bottom: calc(1.5vh + 12px);
  padding: calc(var(--w) * .05) calc(var(--w) * .1) calc(var(--w) * .09); gap: clamp(12px, 2.2vh, 20px);
  box-shadow: 0 30px 60px var(--shadow-deep), inset 0 0 50px #7a684a33;
  /* 벚꽃이 다 지나간 뒤, 천천히 */
  animation: unrollKj 1.9s 1.05s cubic-bezier(.35,.1,.25,1) backwards;
}
body[data-mode="samurai"] .hole { left: 22%; width: 56%; top: calc(-1 * var(--bt) - var(--fh) * .9); height: var(--fh); }
body[data-mode="samurai"] .doa { margin: 0; white-space: nowrap; font: calc(var(--w) * .15)/1.1 var(--jp); letter-spacing: .14em; color: var(--ink); text-align: center; }
.doa-sub { margin: 0; font: 22px/1 var(--brush); color: #4a4450; }
body[data-mode="samurai"] .doa-sub { margin: -4px 0 auto; padding-bottom: 14px; border-bottom: 1px solid #16151c33; text-align: center; letter-spacing: .06em; }   /* 제목 묶음은 위로, 나머지는 아래로 밀린다 */
body[data-mode="samurai"] .field { border: 0; border-bottom: 1px solid #16151c55; gap: 12px; align-items: baseline; padding: 2px 2px 4px; }
body[data-mode="samurai"] .field span { font: 20px/1 var(--jp); letter-spacing: .1em; color: var(--red); white-space: nowrap; }
body[data-mode="samurai"] .field input { font: 28px var(--brush); padding: 2px 2px; }
body[data-mode="samurai"] .joinrow { gap: 10px; align-items: flex-end; }
body[data-mode="samurai"] .sheet .btn { padding: 9px 12px; letter-spacing: .12em; font-size: 16px; border-width: 2px; }
body[data-mode="samurai"] .sheet .btn.primary { font-size: 17px; padding: 11px 12px; margin-top: clamp(10px, 2.5vh, 26px); }
body[data-mode="samurai"] .sheet .err { min-height: 1em; text-align: center; }

/* 대기방 설정 — 족자가 펼쳐지며 */
body[data-mode="samurai"] .rules {
  --bt: 34px; --bs: 12px; --bb: 26px;
  position: relative; margin-top: 12px; padding: 18px 16px;
  box-shadow: inset 0 0 40px #7a684a33, 0 16px 30px var(--shadow-deep);
  animation: unrollKj 1.8s 1.05s cubic-bezier(.35,.1,.25,1) backwards;
}
body[data-mode="samurai"] .rules-kicker { font: 900 13px var(--kr); letter-spacing: .12em; color: #4a4450; }
body[data-mode="samurai"] .rules .code { font: 900 44px/1 var(--kr); letter-spacing: .14em; color: var(--red); }
body[data-mode="samurai"] .rules-list { border-top: 1px solid var(--ink); }
body[data-mode="samurai"] .help { font: 900 20px var(--kr); }
body[data-mode="samurai"] .helpbox { background: var(--paper-hi); }
.keys-note.wide li span { width: 44px; }
body[data-mode="samurai"] .chat { border-top: 2px solid #b89b5e88; }
body[data-mode="samurai"] .chat-kicker { font: 18px/1 var(--jp); letter-spacing: .3em; }
body[data-mode="samurai"] #chatLog li b { font: 900 15px var(--kr); }
/* 채팅 — 창은 낮게, 글자는 크게 */
@media (min-width: 761px) { body[data-mode="samurai"] #lobby { grid-template-rows: 1fr minmax(128px, 21vh); } }
body[data-mode="samurai"] .chat { padding: 7px 16px 9px; gap: 4px; }
body[data-mode="samurai"] .chat-kicker { font-size: 15px; }
body[data-mode="samurai"] #chatLog { font-size: 17px; gap: 2px; }
body[data-mode="samurai"] #chatIn { font-size: 17px; padding: 4px 2px; }
body[data-mode="samurai"] .slotmenu { background: var(--paper-hi); }

/* 결과 */
body[data-mode="samurai"] .result {
  border: 14px solid var(--silk); border-image: none; padding: 26px 30px 22px;
  background: #efe8d8 url(/img/washi.jpg) center / 420px;
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 50px #7a684a33, 0 30px 70px var(--shadow-deep);
}
body[data-mode="samurai"] .kicker { font: 40px/1 var(--jp); color: var(--red); letter-spacing: .2em; }
body[data-mode="samurai"] .kicker::before, body[data-mode="samurai"] .kicker::after { content: none; }
body[data-mode="samurai"] .result h2 { font: 54px/1.1 var(--brush); border-bottom: 1px solid var(--ink); }
.ranks .mon { display: none; width: 56px; height: 56px; place-items: center; border-radius: 50%; background: var(--silk); color: #ece5d6; font: 26px/1 var(--jp); box-shadow: inset 0 0 0 3px var(--gold); }
body[data-mode="samurai"] .ranks img { display: none; }
body[data-mode="samurai"] .ranks .mon { display: grid; }
body[data-mode="samurai"] .ranks li.win .mon { background: var(--red); }
body[data-mode="samurai"] .ranks .rk, body[data-mode="samurai"] .ranks strong { font-family: var(--kr); font-weight: 900; }

/* 결투 중 — 기술 세 개 */
/* 고르기가 열리면 화면이 Y자로 세 칸 — 위 강공 · 왼쪽 속공 · 오른쪽 방어. 올리면 그 칸이 밝아지며 글자가 커지고, 누르면 끝 */
@property --left { syntax: '<number>'; inherits: false; initial-value: 1; }
#moves {
  display: none; position: fixed; inset: 0; z-index: 4;
  opacity: 0; pointer-events: none;
  /* 가운데보다 조금 위에 — 스르르 커지며 나타난다 */
  transform: translateY(-5vmin) scale(.965);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  /* 화면을 다 가르지 않고 가운데 둥근 자리만 — 가장자리로 갈수록 칸 · 선이 흐려진다 */
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0, #000 24vmin, #0000 42vmin);
  mask: radial-gradient(circle at 50% 50%, #000 0, #000 24vmin, #0000 42vmin);
}
body[data-view="game"][data-mode="samurai"] #moves { display: block; }
body.live #moves { opacity: 1; pointer-events: auto; transform: translateY(-5vmin) scale(1); }
/* 고르고 나면 Y자는 스르르 걷히고 발도술 자세가 드러난다 */
body.live #moves.locked { opacity: 0; pointer-events: none; transform: translateY(-5vmin) scale(1.03); transition: opacity .5s ease .1s, transform .6s ease; }
body[data-mode="samurai"] #stage { cursor: default; }
.mv {
  position: absolute; inset: 0; border: 0; padding: 0; margin: 0; cursor: pointer; color: #efe8da;
  background: rgba(2,3,6,.55); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background .25s, opacity .25s;
}
.mv-heavy { clip-path: polygon(0 0, 100% 0, 50% 50%); }
.mv-light { clip-path: polygon(0 0, 50% 50%, 50% 100%, 0 100%); }
.mv-guard { clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 50%); }
.mv-in {
  position: absolute; display: grid; justify-items: center; gap: 4px; transform: translate(-50%, -50%) scale(1);
  transition: transform .28s cubic-bezier(.2,.9,.3,1.3), text-shadow .25s; text-shadow: 0 2px 12px #000;
}
.mv-heavy .mv-in { left: 50%; top: calc(50% - 19vmin); }
.mv-light .mv-in { left: calc(50% - 19vmin); top: calc(50% + 9vmin); }
.mv-guard .mv-in { left: calc(50% + 19vmin); top: calc(50% + 9vmin); }
.mv i { font: clamp(44px, 7vmin, 84px)/1 var(--jp); font-style: normal; }
.mv b { display: flex; align-items: baseline; gap: .5em; font: 900 clamp(20px, 2.1vw, 28px) var(--kr); letter-spacing: .24em; padding-left: .24em; }
/* 가위바위보로 바꿔 읽는 쪽지 — 이름 옆에 작게 */
.mv b em { font: 700 clamp(12px, 1.2vw, 15px) var(--kr); font-style: normal; letter-spacing: .06em; color: #d9c79a; opacity: .82; }
.mv kbd { min-width: 24px; background: #ece5d6; color: #16151c; border-color: #16151c; font: 900 12px var(--kr); }
.mv:hover, .mv:focus-visible { background: rgba(200,190,170,.13); outline: none; }
.mv:hover .mv-in, .mv:focus-visible .mv-in { transform: translate(-50%, -50%) scale(1.35); text-shadow: 0 0 22px #ffe2b0aa, 0 2px 12px #000; }
.mv-heavy:hover { background: rgba(190,60,40,.2); }
.mv-light:hover { background: rgba(80,130,200,.2); }
.mv-guard:hover { background: rgba(200,170,90,.2); }
.mv-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mv-lines line { stroke: #d9c79a; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .75; filter: drop-shadow(0 0 3px #000); }
.mv-timer {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#ece5d6 calc(var(--left) * 360deg), #ece5d622 0); box-shadow: 0 0 0 3px #07090fcc, 0 0 16px #000;
  -webkit-mask: radial-gradient(circle, #0000 16px, #000 17px); mask: radial-gradient(circle, #0000 16px, #000 17px);
}
#moves.timing .mv-timer { animation: samTimer 5s linear forwards; }
@keyframes samTimer { from { --left: 1; } to { --left: 0; } }
.mv-rule { position: absolute; left: 50%; top: calc(50% + 25vmin); transform: translateX(-50%); margin: 0; white-space: nowrap; pointer-events: none; font: 16px/1 var(--jp); letter-spacing: .25em; color: #ece5d6aa; text-shadow: 0 1px 4px #000; }
/* 고른 뒤 — 무엇을 골랐는지 드러나지 않게 세 칸이 똑같이 가라앉는다 */
#moves.locked .mv { pointer-events: none; opacity: .25; background: none; }
#moves.locked .mv .mv-in { transform: translate(-50%, -50%); text-shadow: none; }
#moves.locked .mv-timer { animation-play-state: paused; opacity: .4; }
body.seats #moves .mv { pointer-events: none; }


@media (max-width: 760px) {
  body[data-mode="samurai"] #home { flex-direction: column-reverse; }
  body[data-mode="samurai"] .hole { top: -26%; height: 24%; }
}

@media (max-width: 760px) {
  #home { flex-direction: column-reverse; align-items: center; padding: 60px 16px 24px; overflow-y: auto; justify-content: flex-start; }
  .townboard { flex: none; width: 94vw; min-height: 320px; align-self: center; }
  .sheet { --w: min(360px, 90vw); }
  .result { border-width: 24px; }
  .scroll { padding: 44px 64px 34px; }
  .bar { padding: 12px 28px; }
}