/* Ephemeral chat. Shared layout from skin tokens, plus small per-skin touches at the bottom. */
.chat-card { max-width: 560px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.chat-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.chat-sub { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.chat-card .error { margin-top: 10px; }

.join-form .field-label { display: block; margin-bottom: 6px; }
.join-row { display: flex; gap: 6px; }
.join-row input {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); font-size: 14px;
}
.join-row input:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

/* room */
.chat-room {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  height: min(72vh, 680px); min-height: 380px; overflow: hidden;
}
.room-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.room-name { font-weight: 600; font-size: 14px; }
.room-ttl { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; line-height: 20px; background: var(--bg); }
.room-status { font-size: 12px; color: var(--muted); }
.room-bar .btn { height: 28px; padding: 0 10px; font-size: 12.5px; }

.msg-host { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.messages { list-style: none; margin: 0; padding: 12px 4px 12px 0; }
.msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 6px 14px; transition: opacity .6s ease; }
.msg:hover { background: var(--subtle); }
.msg.mine { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.msg-av { width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 50%; font-size: 13px; }
.msg-head { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.msg-head time { font-size: 11.5px; color: var(--muted); }
.msg-text { font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; margin-top: 1px; }
.sys { text-align: center; font-size: 12px; color: var(--muted); padding: 6px 14px; transition: opacity .6s ease; }
.fading { opacity: 0; }

.composer-bar { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.composer-bar textarea {
  flex: 1; min-width: 0; resize: none; max-height: 160px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--subtle); color: var(--fg); font: 14px/1.5 var(--font);
}
.composer-bar textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; background: var(--bg); }
.composer-bar .btn { height: 38px; }

/* rail */
.member-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; }
.member-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.member-list .pav { width: 24px; height: 24px; min-width: 24px; padding: 0; font-size: 11px; }
.member-list li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-box { display: flex; gap: 6px; }
.invite-box input {
  flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--subtle); color: var(--fg); font: 12px var(--mono);
}
.invite-box .btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.invite-box + .hint { margin-top: 6px; }
.policy { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ---------- skin touches ---------- */
[data-skin="github"] body[data-page="chat"] { --rail-w: 256px; }

[data-skin="jira"] .chat-card, [data-skin="jira"] .chat-room { border-radius: 3px; }
[data-skin="jira"] .room-bar { background: var(--bg); }
[data-skin="jira"] .msg-av { width: 32px; height: 32px; }
[data-skin="jira"] .field .member-list, [data-skin="jira"] .field .invite-box, [data-skin="jira"] .field .policy { padding-top: 4px; }

/* Figma: the thread is a white frame on the dark canvas */
[data-skin="figma"] .page-main { padding: 56px 40px; }
[data-skin="figma"] .chat-card, [data-skin="figma"] .chat-room {
  position: relative; border: 0; border-radius: 0; color: #1e1e1e;
  --bg: #fff; --fg: #1e1e1e; --muted: #6b6b6b; --line: #e6e6e6; --subtle: #f5f5f5;
}
[data-skin="figma"] .chat-card::before, [data-skin="figma"] .chat-room::before {
  content: attr(data-frame); position: absolute; left: 0; bottom: 100%; padding-bottom: 6px; font-size: 11px; color: #b3b3b3;
}
[data-skin="figma"] .chat-card .btn:not(.primary), [data-skin="figma"] .chat-room .btn:not(.primary) { background: #fff; border-color: #e6e6e6; color: #1e1e1e; }
[data-skin="figma"] .member-list, [data-skin="figma"] .invite-box, [data-skin="figma"] .policy, [data-skin="figma"] #rail .hint { margin-left: 16px; margin-right: 16px; }
[data-skin="figma"] .invite-box input { color: #fff; }
[data-skin="figma"] .member-list { color: #e6e6e6; }

[data-skin="notion"] .chat-card, [data-skin="notion"] .chat-room { border-color: rgba(55, 53, 47, .16); border-radius: 4px; }
[data-skin="notion"] .room-bar { background: var(--bg); }
[data-skin="notion"] .msg-av { border-radius: 4px; }
[data-skin="notion"] .member-list, [data-skin="notion"] .invite-box, [data-skin="notion"] .policy { padding-top: 4px; }

@media (max-width: 800px) {
  .chat-room { height: 70vh; min-height: 340px; }
  .room-bar .room-ttl { display: none; }
  [data-skin="figma"] .page-main { padding: 36px 16px; }
}

/* ---------- games in the room ---------- */
.game-launch { position: relative; }
.game-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 290px; padding: 12px;
  display: grid; gap: 8px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.game-menu[hidden] { display: none; }
.gm-title { font-size: 12px; color: var(--muted); font-weight: 600; }
.gm-row { display: flex; align-items: center; gap: 8px; }
.gm-row b { flex: 1; font-size: 14px; }
.gm-row select { height: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--subtle); color: var(--fg); font-size: 12.5px; }
.gm-note { font-size: 12px; color: var(--muted); line-height: 1.45; }

.game-panel { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--subtle); display: grid; gap: 10px; }
.game-panel[hidden] { display: none; }
.gp-head { display: flex; align-items: center; gap: 10px; }
.gp-head b { font-size: 14px; }
.gp-status { font-size: 13px; color: var(--muted); }
.game-panel.my-turn .gp-status { color: var(--accent); font-weight: 700; }
.gp-players { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.gp-players li { height: 24px; padding: 0 10px; font-size: 12px; border-radius: 999px; }
.gp-players li.turn { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.gp-players li.out { opacity: .4; text-decoration: line-through; }
.gp-players li.winner { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #e3b341; }
.gp-timer { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.gp-timer i { display: block; height: 100%; background: var(--accent); transition: width .1s linear; }
.game-panel.hurry .gp-timer i { background: var(--bad); }
.gp-pending { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px dashed var(--line); }
.gp-pending[hidden] { display: none; }
.gp-objcount { color: var(--muted); font-size: 12.5px; }
.gp-history { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--muted); }
.gp-history:empty { display: none; }
.gp-history li b { color: var(--fg); font-weight: 600; }
.gp-history li + li::before { content: "→ "; color: var(--muted); }
.sys.game { color: var(--fg); font-weight: 500; }
.chat-room .gp-head .btn, .chat-room .gp-pending .btn { height: 28px; padding: 0 10px; font-size: 12.5px; }
[data-skin="figma"] .game-menu { --bg: #fff; --fg: #1e1e1e; --muted: #6b6b6b; --line: #e6e6e6; --subtle: #f5f5f5; }
@media (max-width: 600px) {
  .game-menu { position: fixed; left: 16px; right: 16px; top: auto; width: auto; }
}

/* ---------- 윷놀이 ---------- */
.yut-box { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; align-items: start; }
.yut-box[hidden] { display: none; }
.yut-board { width: 100%; max-width: 360px; height: auto; justify-self: center; }
.yb-lines rect, .yb-lines line { fill: none; stroke: var(--line); stroke-width: 1.2; }
.yb-stations circle { fill: var(--bg); stroke: var(--muted); stroke-width: .9; }
.yb-stations circle.big { stroke-width: 1.4; }
.yb-label { font-size: 5px; fill: var(--muted); }
.yb-piece circle { stroke: var(--bg); stroke-width: 1.2; }
.yb-piece text { font: 700 4.6px var(--font); fill: #fff; pointer-events: none; }
.yb-piece { transition: transform .35s ease; }
.yb-piece.movable { cursor: pointer; }
.yb-piece.movable circle { stroke: var(--accent); stroke-width: 1.6; animation: yut-pulse 1s ease-in-out infinite; }
.yb-piece.movable:focus { outline: none; }
.yb-piece.movable:focus circle { stroke: var(--focus); stroke-width: 2.2; }
@keyframes yut-pulse { 50% { stroke-width: 2.6; } }
.yut-side { display: grid; gap: 8px; align-content: start; }
.yut-sticks { display: flex; gap: 6px; justify-content: center; height: 64px; align-items: center; }
.yut-sticks i { display: block; width: 14px; height: 58px; border-radius: 7px; border: 1px solid var(--line); background: var(--subtle); position: relative; }
.yut-sticks i.flat { background: #f3e2c4; border-color: #c9a46a; }
.yut-sticks i.round { background: #9a6b3a; border-color: #7a5229; }
.yut-sticks i.flat::before, .yut-sticks i.flat::after { content: ""; position: absolute; left: 3px; right: 3px; height: 2px; background: #9a6b3a; border-radius: 1px; top: 18px; }
.yut-sticks i.flat::after { top: 36px; }
.yut-sticks i.flat.marked::before { content: "✕"; height: auto; background: none; color: #b42318; font-size: 10px; text-align: center; top: 22px; }
.yut-sticks i.flat.marked::after { display: none; }
.yut-sticks.tossing i { animation: toss .55s ease-out; }
.yut-sticks.tossing i:nth-child(2) { animation-delay: .04s; } .yut-sticks.tossing i:nth-child(3) { animation-delay: .08s; } .yut-sticks.tossing i:nth-child(4) { animation-delay: .12s; }
@keyframes toss { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-26px) rotate(160deg); } 100% { transform: translateY(0) rotate(360deg); } }
.yut-throwname { text-align: center; font-weight: 700; font-size: 15px; min-height: 1.4em; margin: 0; }
.yut-side .btn { justify-content: center; }
.yut-results { display: flex; flex-wrap: wrap; gap: 6px; }
.yut-results:empty { display: none; }
.yut-results button { padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: 600 13px var(--font); cursor: pointer; }
.yut-results button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.yut-results button:disabled { cursor: default; opacity: .8; }
.yut-hint { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.yut-scores { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.yut-scores .pav { display: inline-block; width: 10px; height: 10px; min-width: 0; padding: 0; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.yut-scores small { color: var(--muted); margin-left: 4px; }
@media (max-width: 700px) { .yut-box { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .yut-sticks.tossing i, .yb-piece.movable circle { animation: none; } .yb-piece { transition: none; } }
/* while a game is open the room grows to fit it; the message list keeps a scrollable height of its own */
.chat-room:has(.game-panel:not([hidden])) { height: auto; }
.chat-room:has(.game-panel:not([hidden])) .msg-host { flex: none; height: 260px; }
@media (max-width: 700px) {
  .yut-side { grid-template-columns: auto 1fr; align-items: center; }
  .yut-sticks, .yut-throwname { grid-column: 1; }
  .yut-side > .btn, .yut-results, .yut-hint, .yut-scores { grid-column: 1 / -1; }
}
.chat-room .btn:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }
.yut-side > .btn:not(.primary) { border: 1px solid var(--line); }
.gm-bans { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.gm-bans label { font-size: 12.5px; font-weight: 600; }
.gm-bans small { font-weight: 400; color: var(--muted); }
.gm-bans input[type="text"] { height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--subtle); color: var(--fg); font-size: 13px; }
.gm-bans input[type="text"]:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.gm-check { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gm-check input { margin: 0; accent-color: var(--accent); }
.gp-bans { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; font-size: 12.5px; color: var(--muted); }
.gp-bans span { padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--bad) 12%, var(--bg)); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line)); line-height: 20px; }

/* ---------- rooms: tabs, lobby, list, kinds ---------- */
.room-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 4px; scrollbar-width: thin; }
.room-tab {
  display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 220px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg); font: 500 13px var(--font); cursor: pointer;
}
.room-tab:hover { border-color: var(--accent); }
.room-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.room-tab .rt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.room-tab.lobby-tab { border-style: dashed; color: var(--muted); }
.room-tab.lobby-tab.on { border-style: solid; color: #fff; }
[data-mode="dark"][data-skin="jira"] .room-tab.on { color: #1d2125; }

.chat-lobby { display: grid; gap: 14px; max-width: 640px; }
.chat-lobby[hidden] { display: none; }
.chat-lobby .chat-card { max-width: none; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.card-head .chat-title { margin: 0; }
.chat-card .btn { justify-content: center; }
.chat-card .error { margin-top: 8px; }
.join-row input, .text-in {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); font-size: 14px;
}
.text-in { width: 100%; }
.join-row input:focus, .text-in:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
#inviteForm { margin-top: 4px; }

.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.room-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.room-list .rl-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-list .rl-meta { grid-column: 1; font-size: 12px; color: var(--muted); }
.room-list .btn { grid-column: 2; grid-row: 1 / 3; }
.room-list .rl-code, .room-list .error { grid-column: 1 / -1; }
.room-list .rl-code[hidden] { display: none; }

.kind-pick { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.kind-pick label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.kind-pick label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kind-pick input { margin: 3px 0 0; accent-color: var(--accent); }
.kind-pick b { display: block; font-size: 14px; }
.kind-pick small { color: var(--muted); font-size: 12px; }
.secret-opts { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--subtle); }
.secret-opts[hidden] { display: none; }
.secret-opts .field-label small { font-weight: 400; color: var(--muted); }
#createForm .field-label { display: block; margin: 6px 0; }
#createForm .ttl-pick { margin-top: 14px; }
#createForm .btn.primary { margin-top: 4px; }
.room-name small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
[data-skin="figma"] .chat-lobby .chat-card, [data-skin="figma"] .room-tab { --bg: #fff; --fg: #1e1e1e; --muted: #6b6b6b; --line: #e6e6e6; --subtle: #f5f5f5; }
[data-skin="figma"] .room-tab { background: #2c2c2c; color: #e6e6e6; border-color: #444; }
[data-skin="figma"] .room-tab.on { background: #0d99ff; border-color: #0d99ff; color: #fff; }
[data-skin="figma"] .chat-lobby .field-label { display: block; padding: 0; font-size: 12px; color: var(--fg); }
@media (max-width: 600px) {
  .room-tab { max-width: 160px; }
}

/* 끝말잇기 by chat: the bot's bubbles and the composer on your turn */
.msg.bot .msg-av { font-size: 16px; background: var(--subtle); box-shadow: inset 0 0 0 1px var(--line); }
.msg.bot .msg-text { font-weight: 600; }
.composer-bar textarea.my-turn { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--bg); }
.game-panel .gp-status { font-size: 13.5px; }

/* 윷놀이 piece looks */
.yb-piece .yb-ring { fill: none; stroke-width: 1.1; }
.yb-piece text.yb-emoji { font: 5.4px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; text-anchor: middle; fill: initial; }
.yb-stack circle { fill: #1f2328; stroke: #fff; stroke-width: .6; }
.yb-stack text { font: 700 3px var(--font); fill: #fff; text-anchor: middle; }
.yut-look { position: relative; }
.yut-look > .btn { width: 100%; justify-content: center; }
.yut-look-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; display: grid; gap: 8px; padding: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.yut-look-menu[hidden] { display: none; }
.yut-look-menu .btn { justify-content: center; cursor: pointer; }
.yut-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.yut-emojis button { border: 0; background: none; font-size: 18px; line-height: 1; padding: 4px 0; border-radius: 6px; cursor: pointer; }
.yut-emojis button:hover, .yut-emojis button:focus-visible { background: var(--subtle); }
.yut-face { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; vertical-align: middle; border-radius: 50%; object-fit: cover; font-size: 13px; line-height: 1; }
[data-skin="figma"] .yut-look-menu { --bg: #fff; --fg: #1e1e1e; --line: #e6e6e6; --subtle: #f5f5f5; color: #1e1e1e; }


/* ---------- 그림 전달 ---------- */
.tele-box { position: relative; display: grid; gap: 10px; min-height: 220px; }
.tele-box[hidden] { display: none; }
.gp-players li.done { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--good); }
.tl-prompt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tl-prompt span { font-size: 13px; color: var(--muted); }
.tl-prompt b {
  font-size: 26px; letter-spacing: -.01em; padding: 2px 12px; border-radius: 8px;
  background: linear-gradient(120deg, #ffe58f, #ffd6e7 55%, #c9e7ff); color: #1f2328;
}
.tl-stage { display: grid; justify-items: center; }
.tl-pad { display: grid; gap: 8px; width: min(100%, 640px); }
.tl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-colors { display: flex; gap: 4px; flex-wrap: wrap; }
.tl-colors button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg); background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform .12s; }
.tl-colors button:hover { transform: scale(1.15); }
.tl-colors button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--fg); transform: scale(1.12); }
.tl-sizes { display: flex; gap: 2px; }
.tl-sizes button, .tl-tool {
  min-width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); cursor: pointer; font-size: 15px;
}
.tl-sizes i { display: block; width: var(--s); height: var(--s); border-radius: 50%; background: var(--fg); }
.tl-sizes button[aria-checked="true"], .tl-tool[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.tl-canvas {
  width: 100%; height: auto; aspect-ratio: 4 / 3; background: #fff; border-radius: 10px; touch-action: none; cursor: crosshair;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .12);
}
.tl-canvas.small { max-width: 360px; cursor: default; }
.tl-frame { position: relative; width: min(100%, 520px); }
.tl-frame .tl-canvas { cursor: default; }
.tl-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #6e7781; font-size: 14px; pointer-events: none; }
.tl-page .tl-empty { position: static; display: block; color: var(--muted); }
.tl-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tl-guess { display: flex; gap: 8px; width: min(100%, 520px); justify-self: center; }
.tl-guess input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; font-size: 17px; border: 2px solid var(--accent); border-radius: 8px; background: var(--bg); color: var(--fg); }
.tl-guess input:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.tl-wait { display: grid; place-items: center; gap: 10px; min-height: 200px; color: var(--muted); }
.tl-wait p { margin: 0; font-size: 14px; }
.tl-dots { display: flex; gap: 8px; }
.tl-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: tl-bounce 1s ease-in-out infinite; }
.tl-dots i:nth-child(2) { animation-delay: .15s; } .tl-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tl-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-10px); opacity: 1; } }
.tl-banner {
  position: absolute; left: 50%; top: 40%; z-index: 5; padding: 14px 28px; border-radius: 16px; pointer-events: none;
  font-size: 34px; font-weight: 800; color: #fff; white-space: nowrap;
  background: linear-gradient(120deg, #ff5f6d, #ffc371); box-shadow: 0 12px 40px rgba(255, 95, 109, .45);
  animation: tl-banner 1.5s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
@keyframes tl-banner { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.08) rotate(2deg); opacity: 1; } 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(.9); opacity: 0; } }
.tl-album { display: grid; gap: 10px; }
.tl-albumhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-albumhead b { font-size: 15px; }
.tl-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 560px; overflow-y: auto; }
.tl-page {
  display: grid; justify-items: center; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg);
  animation: tl-in .45s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes tl-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.tl-page.word { background: linear-gradient(120deg, #fff7d6, #ffe4ef); border-color: transparent; }
.tl-page.guess { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.tl-page.missed { opacity: .6; }
.tl-who { font-size: 12.5px; color: var(--muted); justify-self: start; }
.tl-page.word .tl-who { color: #6e5a00; }
.tl-say { font-size: 26px; letter-spacing: -.01em; }
.tl-page.word .tl-say { color: #1f2328; }
.tl-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
[data-mode="dark"] .tl-page.word { background: linear-gradient(120deg, #4a3f12, #4a2033); }
[data-mode="dark"] .tl-page.word .tl-who, [data-mode="dark"] .tl-page.word .tl-say { color: #fff3c4; }
@media (prefers-reduced-motion: reduce) { .tl-banner, .tl-page, .tl-dots i { animation: none; } .tl-banner { display: none; } }
@media (max-width: 600px) { .tl-prompt b, .tl-say { font-size: 20px; } .tl-banner { font-size: 24px; } }

/* game menu: one line on how each game is played */
.gm-desc { display: block; margin: -2px 0 4px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.tl-rule { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- 캐치마인드 ---------- */
.cm-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cm-choice {
  padding: 22px 8px; border: 0; border-radius: 14px; cursor: pointer; font: 800 22px var(--font); color: #1f2328;
  background: linear-gradient(135deg, #ffe58f, #ffd6e7); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transition: transform .15s, box-shadow .15s;
}
.cm-choice:nth-child(2) { background: linear-gradient(135deg, #c9e7ff, #d8f5e3); }
.cm-choice:nth-child(3) { background: linear-gradient(135deg, #e9d8ff, #ffd9c2); }
.cm-choice:hover:not(:disabled) { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }
.cm-choice:disabled { opacity: .55; cursor: default; }
.cm-hintline { align-items: center; }
.cm-hint { letter-spacing: .12em; }
.cm-hint[hidden] { display: none; }
.cm-tip { margin: 0; text-align: center; }
.cm-result {
  display: grid; justify-items: center; gap: 2px; padding: 14px; border-radius: 14px; text-align: center;
  background: var(--subtle); animation: tl-in .45s cubic-bezier(.2, 1.2, .4, 1);
}
.cm-result.won { background: linear-gradient(120deg, #fff1b8, #ffd6e7, #c9e7ff); color: #1f2328; }
.cm-result span { font-size: 12px; opacity: .7; }
.cm-result b { font-size: 30px; letter-spacing: -.01em; }
.cm-result p { margin: 4px 0 0; font-size: 14px; }
.cm-final { display: grid; justify-items: center; gap: 10px; padding: 12px; }
.cm-final > b { font-size: 20px; }
.cm-final ol { list-style: none; margin: 0; padding: 0; width: min(100%, 360px); display: grid; gap: 6px; }
.cm-final li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--subtle); font-size: 15px; animation: tl-in .4s both; }
.cm-final li:nth-child(2) { animation-delay: .1s; } .cm-final li:nth-child(3) { animation-delay: .2s; } .cm-final li:nth-child(n+4) { animation-delay: .3s; }
.cm-final li.first { background: linear-gradient(120deg, #ffe58f, #ffc371); color: #1f2328; font-weight: 700; transform: scale(1.03); }
.cm-final li.me { box-shadow: inset 0 0 0 2px var(--accent); }
.cm-final em { font-style: normal; font-weight: 700; }
@media (max-width: 600px) { .cm-choices { grid-template-columns: 1fr; } }