/* PLAYORA 끝말잇기 - 원고지와 빨간 도장 */
:root {
  --paper: #f7f2e7; --paper-2: #efe7d7; --paper-3: #e2d8c5; --card: #fffdf8;
  --grid: #e3b7a3; --grid-2: #f0d6ca;
  --ink: #23262e; --ink-2: #555a66; --ink-3: #868a95;
  --red: #c9442b; --red-2: #f5dcd3; --blue: #33589e; --blue-2: #dde6f5; --green: #2f7f58;
  --page: #ebe4d8; --page-ink: #23262e; --page-2: #575b66; --page-line: #d6ccbb;
  --f-body: "IBM Plex Sans KR", "Pretendard", system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --f-disp: "Hahmlet", "IBM Plex Sans KR", serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r1: 6px; --r2: 10px; --r3: 16px;
  --bar: 44px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@supports (color: oklch(0 0 0)) {
  :root {
    --paper: oklch(0.966 0.016 85); --paper-2: oklch(0.932 0.022 85); --paper-3: oklch(0.88 0.026 85); --card: oklch(0.993 0.006 85);
    --grid: oklch(0.8 0.07 40); --grid-2: oklch(0.89 0.04 40);
    --ink: oklch(0.26 0.015 265); --ink-2: oklch(0.46 0.02 265); --ink-3: oklch(0.62 0.018 265);
    --red: oklch(0.56 0.17 35); --red-2: oklch(0.92 0.04 35); --blue: oklch(0.47 0.11 260); --blue-2: oklch(0.92 0.03 260); --green: oklch(0.53 0.1 155);
    --page: oklch(0.925 0.016 80); --page-ink: oklch(0.26 0.015 265); --page-2: oklch(0.47 0.02 265); --page-line: oklch(0.85 0.022 80);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--page); color: var(--page-ink); font: 400 16px/1.7 var(--f-body); word-break: keep-all; overflow-wrap: anywhere; }
button { font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
button:disabled { cursor: default; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- 페이지 머리 */
.mast { display: flex; align-items: baseline; gap: var(--s4); padding: var(--s3) clamp(var(--s4), 3vw, var(--s6)); border-bottom: 1px solid var(--page-line); }
.mast-brand { text-decoration: none; font-size: 14px; color: var(--page-2); white-space: nowrap; }
.mast-brand b { font-weight: 700; letter-spacing: 0.08em; color: var(--page-ink); margin-right: 6px; }
.mast-more { margin-left: auto; font-size: 14px; color: var(--page-2); white-space: nowrap; }
.head { max-width: 1240px; margin: 0 auto; padding: var(--s4) clamp(var(--s3), 3vw, var(--s6)) var(--s3); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.head h1 { margin: 0; font: 800 clamp(28px, 3.6vw, 38px)/1.1 var(--f-disp); letter-spacing: -0.02em; }
.head p { margin: 0; color: var(--page-2); font-size: 15px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, var(--s5)); }

/* ---------------------------------------------------------------- 게임 무대 */
.wc { position: relative; width: 100%; height: clamp(560px, calc(100svh - 128px), 820px); background: var(--paper); color: var(--ink); overflow: hidden; border-radius: var(--r2);
  border: 1px solid var(--page-line); -webkit-tap-highlight-color: transparent; font-family: var(--f-body); container-type: size; }
@media (max-width: 640px) { .wc { border-radius: 0; border-left: 0; border-right: 0; height: calc(100svh - 52px); min-height: 560px; } .head { padding-top: var(--s3); } .head p { display: none; } }
html.embed, html.embed body { height: 100%; overflow: hidden; background: var(--paper); }
html.embed .mast, html.embed .head, html.embed .about, html.embed .foot { display: none !important; }
html.embed .wrap { padding: 0; max-width: none; }
html.embed .wc { position: fixed; inset: 0; width: auto; height: auto; min-height: 0; border-radius: 0; border: 0; }
/* 휴대폰 자판이 올라왔을 때: 보이는 영역에 꼭 맞춤 */
.wc.kb { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100%); min-height: 0; z-index: 60; border-radius: 0; border: 0; }
html.kb body { overflow: hidden; }

.bar { position: absolute; top: 0; left: 0; right: 0; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s2) 0 var(--s4); z-index: 8; }
.bar-l { margin: 0; font: 600 13px/1 var(--f-body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar-r { display: flex; align-items: center; gap: var(--s1); flex: none; margin-left: auto; }
.tb { height: 30px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--paper-3); background: var(--card); color: var(--ink); font: 600 13px/1 var(--f-body); }
.tb:hover { border-color: var(--ink-3); }
.tb[aria-pressed="true"] { color: var(--ink-3); }
.tb.sure, .tool.sure { border-color: var(--red); color: var(--red); }
.wc.narrow .tb { padding: 0 10px; }

.scr { position: absolute; top: var(--bar); left: 0; right: 0; bottom: 0; z-index: 5; }
.scr button:focus-visible, .modal button:focus-visible, .tb:focus-visible, .chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------------------------------------------------------------- 첫 화면 */
.scr-home { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); grid-template-rows: 1fr auto; column-gap: clamp(24px, 5vw, 72px); align-items: center;
  padding: var(--s4) clamp(20px, 5cqw, 64px) 0; }
.home-brand { align-self: center; min-width: 0; }
.kicker { margin: 0 0 var(--s3); font: 600 13px/1.3 var(--f-body); letter-spacing: 0.04em; color: var(--red); }
.logo { margin: 0; display: flex; }
.logo span { position: relative; width: clamp(58px, 11cqw, 104px); height: clamp(58px, 11cqw, 104px); display: grid; place-items: center; border: 1.5px solid var(--grid); margin-left: -1.5px; background: var(--card);
  font: 800 clamp(36px, 7cqw, 68px)/1 var(--f-disp); color: var(--ink); }
.logo span:first-child { margin-left: 0; }
.logo .logo-end { color: var(--red); }
.logo .logo-end::before { content: ""; position: absolute; inset: 11%; border: 3px solid var(--red); border-radius: 50%; transform: rotate(-6deg); }
.home-tag { margin: var(--s4) 0 0; max-width: 25em; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.dict-st { display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0 0; font-size: 13px; color: var(--ink-3); }
.dict-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; animation: blink 1s steps(2) infinite; }
.dict-st.ready i { background: var(--green); animation: none; }
.dict-st.error i { background: var(--red); animation: none; }
.home-modes { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.mt { position: relative; display: grid; text-align: left; gap: 2px; padding: var(--s4) var(--s5); border-radius: var(--r2); border: 1px solid var(--paper-3); background: var(--card); color: var(--ink);
  transition: transform .3s var(--ease), border-color .2s, box-shadow .3s var(--ease); white-space: normal; }
.mt:hover { transform: translateX(-4px); border-color: var(--ink-3); box-shadow: 4px 4px 0 var(--paper-3); }
.mt b { font: 800 clamp(24px, 3.4cqw, 32px)/1.2 var(--f-disp); white-space: nowrap; }
.mt-k { font: 600 12px/1.3 var(--f-body); color: var(--ink-3); letter-spacing: 0.04em; }
.mt-d { font-size: 14px; color: var(--ink-2); }
.mt em { position: absolute; top: var(--s3); right: var(--s4); font: 600 12px/1 var(--f-body); font-style: normal; color: var(--ink-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.mt-solo { border-left: 4px solid var(--blue); }
.mt-multi { border-left: 4px solid var(--red); }
.home-sub { display: flex; flex-wrap: wrap; gap: var(--s1); }
.home-sub button, .back, .ghost { background: none; border: 1px solid transparent; border-radius: 999px; padding: 6px var(--s3); color: var(--ink-2); font-size: 14px; }
.home-sub button:hover, .back:hover, .ghost:hover { color: var(--ink); border-color: var(--paper-3); }
.ticker { grid-column: 1 / -1; align-self: end; overflow: hidden; border-top: 1px solid var(--paper-3); margin: var(--s4) calc(-1 * clamp(20px, 5cqw, 64px)) 0; padding: 10px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-in { display: flex; width: max-content; align-items: center; animation: tick 70s linear infinite; font-size: 14px; color: var(--ink-3); }
.tk-w { white-space: nowrap; }
.tk-w b { color: var(--red); font-weight: 600; }
.tk-a { position: relative; width: 36px; text-align: center; font-size: 12px; color: var(--red); white-space: nowrap; }
.tk-a::before { content: "→"; color: var(--ink-3); font-size: 13px; }
.tk-a:not(:empty)::before { display: block; line-height: 1; }
.tk-a:not(:empty) { line-height: 1.1; }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes blink { 50% { opacity: 0.2; } }
.wc.narrow .scr-home { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; align-content: start; row-gap: var(--s5); padding-top: var(--s5); }
.wc.narrow .home-modes { align-self: start; }
.wc.tiny .scr-home { row-gap: var(--s3); padding-top: var(--s2); }
.wc.tiny .home-tag { display: none; }
.wc.tiny .mt { padding: var(--s3) var(--s4); }
.wc.short:not(.narrow) .home-tag { font-size: 14px; }

/* ---------------------------------------------------------------- 목록 화면 (혼자, 멀티) */
.scr-list { display: flex; flex-direction: column; padding: var(--s2) clamp(16px, 5cqw, 64px) var(--s4); gap: var(--s3); overflow-y: auto; }
.list-head { display: flex; align-items: center; gap: var(--s3); }
.list-title { margin: 0; font: 800 24px/1.2 var(--f-disp); }
.back { margin-left: calc(-1 * var(--s3)); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--paper-3); background: var(--card); font-size: 13px; color: var(--ink-2); }
.chip b { color: var(--ink); font-weight: 600; }
.chip:hover { border-color: var(--ink-3); }
.list-body { display: grid; gap: var(--s2); }
.row { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s4); align-items: baseline; text-align: left; padding: var(--s3) var(--s4); border-radius: var(--r2); border: 1px solid var(--paper-3); background: var(--card);
  transition: transform .25s var(--ease), border-color .2s; white-space: normal; }
.row:hover { transform: translateX(4px); border-color: var(--ink-3); }
.row b { grid-row: 1 / 3; font: 800 22px/1.2 var(--f-disp); white-space: nowrap; min-width: 3.4em; }
.row span { font-size: 14px; color: var(--ink-2); }
.row em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.row.last { border-color: var(--ink-3); }
.lv-easy b { color: var(--green); } .lv-normal b { color: var(--blue); } .lv-hard b { color: #8a4fa0; } .lv-master b { color: var(--red); }
.list-multi .row b { min-width: 3em; }
.note { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.me-card { display: flex; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--paper-2); }
.me-main { flex: 1; min-width: 0; }
.me-name { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--ink-2); }
.me-name input { flex: 1; min-width: 0; max-width: 220px; height: 32px; padding: 0 var(--s2); border: 1px solid var(--paper-3); border-radius: var(--r1); background: var(--card); font: 600 15px var(--f-body); color: var(--ink); }
.me-rank { margin: 6px 0 4px; font-size: 14px; }
.me-next { color: var(--ink-3); font-size: 12px; }
.me-bar { height: 4px; border-radius: 2px; background: var(--paper-3); overflow: hidden; }
.me-bar i { display: block; height: 100%; background: var(--red); }
.me-rec { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }
.badge { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--rk, var(--ink-3)); box-shadow: 0 0 0 2px var(--card); flex: none; vertical-align: -1px; }
.badge.big { width: 40px; height: 40px; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55); }

/* ---------------------------------------------------------------- 상대 찾기 */
.scr-find { display: flex; flex-direction: column; padding: var(--s4) clamp(16px, 5cqw, 64px); gap: var(--s4); overflow-y: auto; }
.find-top { display: flex; align-items: center; gap: var(--s3); }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--paper-3); border-top-color: var(--red); animation: spin .8s linear infinite; flex: none; }
.spin.done { animation: none; border-color: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }
.find-msg { margin: 0; font: 800 22px/1.2 var(--f-disp); }
.find-time { margin-left: auto; font: 500 14px/1 var(--f-body); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lobby { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s2); }
.pc { position: relative; display: grid; grid-template-columns: auto auto 1fr; column-gap: 8px; align-items: center; padding: var(--s3); border-radius: var(--r2); background: var(--card); border: 1px solid var(--paper-3); border-left: 4px solid var(--pc);
  animation: pcIn .45s var(--ease) both; }
.pc-no { font: 700 12px/1 var(--f-body); color: var(--ink-3); }
.pc-n { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-r, .pc-w { grid-column: 2 / -1; font-size: 12px; color: var(--ink-2); }
.pc-w { color: var(--ink-3); }
.pc-me { background: var(--blue-2); }
.pc-say { position: absolute; right: 8px; top: -10px; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .3s var(--ease); pointer-events: none; white-space: nowrap; }
.pc-say.on { opacity: 1; transform: none; }
@keyframes pcIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
.find-note { margin: 0; font-size: 14px; color: var(--ink-2); min-height: 1.4em; }
.find-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.emotes { display: flex; flex-wrap: wrap; gap: 6px; }
.em { height: 32px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--paper-3); background: var(--card); font-size: 14px; }
.em:hover { border-color: var(--ink-3); }

/* ---------------------------------------------------------------- 게임 */
.scr-play { display: flex; flex-direction: column; gap: var(--s2); padding: 2px var(--s3) var(--s3); }
.side { display: contents; }
.players { order: -1; display: flex; gap: 6px; min-width: 0; flex: none; align-items: stretch; }
.board { order: 0; flex: none; }
.log { order: 1; }
.wc.wide .scr-play { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 32%, 360px); column-gap: var(--s5); padding: 2px var(--s4) var(--s4); }
.wc.wide .side { display: flex; flex-direction: column; gap: var(--s2); min-height: 0; min-width: 0; }
.wc.wide .players { flex-direction: column; gap: 4px; }
.wc.wide .players .pl { flex: none; padding-top: 5px; padding-bottom: 5px; }
.wc.wide .board { min-height: 0; justify-content: center; padding-bottom: 4%; }
.pl { position: relative; flex: 1 1 120px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; align-items: center; white-space: nowrap; overflow-wrap: normal; padding: 6px 10px 6px 6px; border-radius: var(--r2); background: var(--card); border: 1px solid var(--paper-3);
  transition: border-color .2s, background .2s, opacity .3s; }
.pl .av { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); color: #fff; font: 700 14px/1 var(--f-body); }
.pl .pn { font: 600 14px/1.25 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl .ps { font-size: 12px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl .ps b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pl.cur { border-color: var(--pc); box-shadow: inset 0 -3px 0 var(--pc); background: var(--paper); }
.pl.cur .av { animation: pulse 1.2s ease-in-out infinite; }
.pl.out { opacity: 0.5; }
.pl.out .pn { text-decoration: line-through; }
.pl .po { position: absolute; right: 6px; top: 6px; font-size: 12px; line-height: 1; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--red); color: var(--red); transform: rotate(-6deg); background: var(--card); }
.pl.win { border-color: var(--red); }
.bub { position: absolute; left: 34px; top: calc(100% + 2px); z-index: 7; padding: 4px 10px; border-radius: 10px; border-top-left-radius: 2px; background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.35; white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .3s var(--ease); pointer-events: none; }
.bub.on { opacity: 1; transform: none; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.wc.narrow .players.n4 { display: grid; grid-template-columns: 1fr 1fr; }
.wc.narrow .players.n5, .wc.narrow .players.n6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wc.narrow .players.n5 .pl, .wc.narrow .players.n6 .pl { padding: 4px 6px 4px 4px; column-gap: 6px; }
.wc.narrow .players.n5 .av, .wc.narrow .players.n6 .av { width: 24px; height: 24px; font-size: 12px; }
.wc.narrow .players.n5 .pn, .wc.narrow .players.n6 .pn { font-size: 13px; }
.wc.wide .pl { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 10px; }
.wc.wide .pl .av { grid-row: auto; }
.wc.wide .pl .ps { grid-column: 3; grid-row: 1; }
.wc.wide .pl .po { top: 50%; right: 10px; transform: translateY(-50%) rotate(-6deg); }
.wc.wide .pl.out .ps { visibility: hidden; }
.wc.wide .players .bub { left: auto; right: calc(100% + 8px); top: 50%; transform: translate(4px, -50%); border-radius: 10px; border-top-right-radius: 2px; }
.wc.wide .players .bub.on { transform: translate(0, -50%); }
.wc.wide .players.n5 .pl, .wc.wide .players.n6 .pl { padding-top: 3px; padding-bottom: 3px; }
.wc.wide .players.n5 .av, .wc.wide .players.n6 .av { width: 26px; height: 26px; font-size: 12px; }

.board { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--s2) 0 0; }
.trail { display: flex; gap: 6px; overflow: hidden; white-space: nowrap; height: 20px; font-size: 13px; color: var(--ink-3); mask-image: linear-gradient(90deg, transparent, #000 30%); justify-content: flex-end; }
.tw::after { content: "→"; margin-left: 6px; color: var(--paper-3); }
.cword { margin-top: 2px; min-height: calc(var(--cs, 54px) + 44px); }
.cur-by { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); height: 18px; }
.cur-by i { width: 8px; height: 8px; border-radius: 50%; }
.cells { display: flex; margin-top: 4px; }
.cell { position: relative; width: var(--cs, 54px); height: var(--cs, 54px); display: grid; place-items: center; border: 1.5px solid var(--grid); margin-left: -1.5px; background: var(--card);
  font: 700 calc(var(--cs, 54px) * 0.54)/1 var(--f-body); color: var(--ink); }
.cell:first-child { margin-left: 0; }
.cell.end { color: var(--red); }
.cell.end::before { content: ""; position: absolute; inset: 9%; border: 2.5px solid var(--red); border-radius: 50%; transform: rotate(-8deg); }
.cells.anim .cell { animation: cellIn .46s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.cells.anim .cell.end::before { animation: ring .5s var(--ease) both; animation-delay: calc(var(--i) * 50ms + 160ms); }
@keyframes cellIn { from { opacity: 0; transform: translateY(-14px) scale(0.86); } }
@keyframes ring { from { opacity: 0; transform: rotate(-30deg) scale(1.6); } }
.cur-def { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }
.tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 12px; line-height: 1.4; border: 1px solid var(--blue); color: var(--blue); vertical-align: 1px; }
.tag-k { border-color: var(--red); color: var(--card); background: var(--red); }

.need { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); font-size: 13px; color: var(--ink-2); min-height: 30px; }
.need-k { margin-right: 2px; }
.need b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 6px; border: 1.5px solid var(--red); color: var(--red); background: var(--card); font: 700 17px/1 var(--f-body); }
.need-or { color: var(--ink-3); }
.need-r { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.timer { position: relative; height: 6px; margin-top: var(--s2); border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.timer i { position: absolute; inset: 0; background: var(--ink-2); transform-origin: left center; border-radius: 3px; }
.timer.mine i { background: var(--blue); }
.timer.warn i { background: #c98a1e; }
.timer.urgent i { background: var(--red); animation: urg .5s ease-in-out infinite alternate; }
.timer.idle i { background: var(--paper-3); }
@keyframes urg { to { opacity: 0.55; } }

.typing { display: flex; align-items: center; gap: var(--s2); min-height: 40px; margin-top: var(--s2); }
.ty-who { flex: none; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.3 var(--f-body); background: var(--paper-2); color: var(--ink-2); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.ty-who:empty { display: none; }
.ty-text { font: 700 21px/1.2 var(--f-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.caret { display: none; width: 2px; height: 22px; background: var(--ink); animation: blink .9s steps(2) infinite; flex: none; margin-left: -4px; }
.ty-sec { margin-left: auto; font: 600 14px/1 var(--f-body); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.typing.ai .caret { display: block; }
.typing.ai .ty-who { background: var(--ink); color: var(--paper); }
.typing.thinking .ty-text { color: var(--ink-3); font-weight: 500; font-size: 16px; }
.typing.thinking .ty-text::after { content: "…"; display: inline-block; width: 1.2em; animation: dots 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
.typing.thinking .caret { display: none; }
.typing.wrong .ty-text { color: var(--red); text-decoration: line-through; }
.typing.mine .ty-who { background: var(--blue); color: #fff; }
.typing.note .ty-text { font: 500 14px/1.3 var(--f-body); color: var(--ink-3); }
@keyframes dots { from { width: 0; } to { width: 1.2em; } }

.answer { display: flex; gap: var(--s2); margin-top: 6px; }
.answer input { flex: 1; min-width: 0; height: 52px; padding: 0 var(--s4); border-radius: var(--r2); border: 2px solid var(--paper-3); background: var(--card); color: var(--ink);
  font: 700 22px/1 var(--f-body); outline: none; transition: border-color .15s, box-shadow .2s; }
.answer input::placeholder { color: var(--ink-3); font-weight: 400; font-size: 15px; }
.answer input:focus { border-color: var(--ink-3); }
.wc.myturn .answer input { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-2); }
.send { flex: none; height: 52px; padding: 0 var(--s5); border-radius: var(--r2); border: 0; background: var(--ink); color: var(--paper); font: 700 16px/1 var(--f-body); }
.wc.myturn .send { background: var(--blue); }
.send:active { transform: translateY(1px); }
.msg { margin: 6px 0 0; min-height: 22px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.msg.err, .msg.warn { color: var(--red); font-weight: 600; }
.msg.info { color: var(--blue); }
.msg.pop { animation: pop .3s var(--ease); }
.msg.hint .hint-k { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--ink); color: var(--paper); font-size: 12px; vertical-align: 2px; }
.msg.hint .cho { font: 700 22px/1 var(--f-body); letter-spacing: 0.06em; color: var(--blue); margin: 0 6px; }
.msg.hint .hint-l { font-size: 13px; color: var(--ink-3); }
@keyframes pop { from { transform: translateX(-6px); } }
.tools { display: flex; gap: var(--s2); margin-top: 4px; }
.tool { height: 34px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--paper-3); background: var(--card); font-size: 13px; color: var(--ink-2); }
.tool b { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 2px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 12px; }
.tool:disabled { opacity: 0.45; }
.tool:disabled b { background: var(--ink-3); }
.tool-give { margin-left: auto; }
.shake { animation: shake .38s ease-out; }
@keyframes shake { 20% { transform: translateX(calc(-1 * var(--sh, 6px))); } 40% { transform: translateX(var(--sh, 6px)); } 60% { transform: translateX(calc(-0.5 * var(--sh, 6px))); } 80% { transform: translateX(calc(0.4 * var(--sh, 6px))); } }

.log { display: flex; flex-direction: column; min-height: 0; flex: 1; border-radius: var(--r2); background: var(--paper-2); overflow: hidden; }
.log-h { margin: 0; padding: var(--s2) var(--s3); font: 600 13px/1.4 var(--f-body); color: var(--ink-2); border-bottom: 1px solid var(--paper-3); display: flex; justify-content: space-between; }
.log ol { list-style: none; margin: 0; padding: 0 var(--s3) var(--s2); overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.lw { position: relative; padding: 8px 0 8px 12px; border-bottom: 1px dashed var(--paper-3); animation: lwIn .4s var(--ease); }
.lw::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 2px; background: var(--pc); }
.lw-t { margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--ink-3); }
.lw-t b { font-size: 16px; color: var(--ink); }
.lw-t .tag { margin-left: 0; }
.lw-who { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.lw-p { color: var(--blue); font-weight: 600; font-variant-numeric: tabular-nums; }
.lw-d { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.lw-d.dim { color: var(--ink-3); }
.lw.start b { color: var(--ink-2); }
.sep { padding: 6px 0; font-size: 12px; color: var(--ink-3); text-align: center; }
.sep.out { color: var(--red); }
@keyframes lwIn { from { opacity: 0; transform: translateY(-6px); } }

/* 효과 */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: visible; }
.pts { position: absolute; right: 0; top: 34px; text-align: right; font: 800 26px/1 var(--f-disp); color: var(--ink-2); animation: rise 1.25s var(--ease) both; white-space: nowrap; }
.pts.me { color: var(--blue); }
.pts small { display: block; font: 600 12px/1.4 var(--f-body); color: var(--ink-3); }
.pts.bonus { top: auto; bottom: 40%; left: 20%; font-size: 20px; color: var(--red); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } 18% { opacity: 1; transform: none; } 75% { opacity: 1; } to { opacity: 0; transform: translateY(-26px); } }
.stamp { position: absolute; left: 50%; top: 32%; display: grid; justify-items: center; padding: 8px 20px; border: 4px solid var(--red); border-radius: 10px; color: var(--red); background: color-mix(in srgb, var(--card) 82%, transparent);
  transform: translate(-50%, -50%) rotate(-8deg); animation: stamp 1.45s var(--ease) both; white-space: nowrap; }
.stamp b { font: 800 clamp(30px, 8cqw, 54px)/1.1 var(--f-disp); letter-spacing: 0.02em; }
.stamp small { font: 600 13px/1.4 var(--f-body); }
.stamp.round { border-color: var(--ink); color: var(--ink); }
.stamp.win { border-color: var(--blue); color: var(--blue); }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.9); } 14% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(0.96); } 22% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }

/* 세로로 좁은 화면, 자판이 올라온 화면 */
.wc.short .cur-def { display: none; }
.wc.short .typing { min-height: 34px; margin-top: 6px; }
.wc.short .answer input, .wc.short .send { height: 46px; }
.wc.short .answer input { font-size: 20px; }
.wc.short .need { margin-top: 6px; }
.wc.tiny .trail { display: none; }
.wc.tiny .need { min-height: 26px; }
.wc.tiny .need b { min-width: 26px; height: 26px; font-size: 15px; }
.wc.tiny .tool { height: 30px; }
.wc.tiny .msg { min-height: 20px; font-size: 13px; }
.wc.tiny .pl .av { width: 24px; height: 24px; font-size: 12px; }
.wc.tiny .pl { padding: 3px 8px 3px 4px; }
.wc.kb { --bar: 36px; }
.wc.kb .bar-l { display: none; }
.wc.kb .scr-play { display: flex; }
.wc.kb .log, .wc.kb .trail, .wc.kb .cur-def, .wc.kb .cur-by, .wc.kb .need-r { display: none; }
.wc.kb .scr-play { gap: 4px; padding-top: 0; }
.wc.kb .players { display: flex !important; gap: 4px; }
.wc.kb .pl { flex: 1 1 0; display: flex; justify-content: center; padding: 3px; }
.wc.kb .pl .pn, .wc.kb .pl .ps, .wc.kb .pl .po { display: none; }
.wc.kb .pl .av { width: 24px; height: 24px; font-size: 12px; }
.wc.kb .players .bub { left: 50%; transform: translate(-50%, -4px); }
.wc.kb .players .bub.on { transform: translate(-50%, 0); }
.wc.kb .board { padding-top: 2px; }
.wc.kb .cword { min-height: 0; }
.wc.kb .need { margin-top: 4px; min-height: 26px; }
.wc.kb .need b { min-width: 26px; height: 26px; font-size: 15px; }
.wc.kb .typing { min-height: 30px; margin-top: 4px; }
.wc.kb .answer input, .wc.kb .send { height: 44px; }
.wc.kb .msg { min-height: 18px; margin-top: 4px; font-size: 13px; }
.wc.kb .tool { height: 30px; }

/* ---------------------------------------------------------------- 시작 세기, 겹치는 화면 */
.count { position: absolute; top: var(--bar); left: 0; right: 0; bottom: 0; z-index: 9; display: grid; place-items: center; background: color-mix(in srgb, var(--paper) 72%, transparent); pointer-events: none; }
.count span { font: 800 clamp(64px, 18cqw, 128px)/1 var(--f-disp); color: var(--ink); animation: cnt .6s var(--ease) both; }
@keyframes cnt { from { opacity: 0; transform: scale(1.6); } }
.scr-over { z-index: 9; display: grid; place-items: center; padding: var(--s4); background: color-mix(in srgb, var(--paper) 78%, transparent); }
.box { display: grid; gap: var(--s2); width: min(320px, 100%); padding: var(--s5); border-radius: var(--r3); background: var(--card); border: 1px solid var(--paper-3); box-shadow: 6px 6px 0 var(--paper-3); }
.box-t { margin: 0; font: 800 26px/1.2 var(--f-disp); }
.box-s { margin: 0 0 var(--s2); font-size: 14px; color: var(--ink-2); }
.box button, .res-btns button { height: 44px; border-radius: var(--r2); border: 1px solid var(--paper-3); background: var(--card); font-weight: 600; font-size: 15px; }
.box button:hover, .res-btns button:hover { border-color: var(--ink-3); }
.box .big, .res-btns .big { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.big small { font-weight: 400; opacity: 0.6; margin-left: 4px; font-size: 12px; }

/* ---------------------------------------------------------------- 결과 */
.scr-result { overflow-y: auto; padding: var(--s3) clamp(16px, 5cqw, 64px) var(--s5); }
.res { display: grid; gap: var(--s4); max-width: 1100px; }
.res-head, .res-body { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.wc.wide .scr-result { overflow: hidden; padding-bottom: var(--s4); }
.wc.wide .res { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(24px, 4cqw, 56px); height: 100%; }
.wc.wide .res-body { overflow-y: auto; min-height: 0; padding-right: 4px; }
.wc.wide .res-words ol { max-height: none; }
.res-k { margin: 0; font-size: 13px; color: var(--ink-3); }
.res-t { margin: 0; font: 800 clamp(34px, 7cqw, 52px)/1.1 var(--f-disp); }
.res-t.win { color: var(--blue); }
.res-t.lose { color: var(--ink); }
.res-why { margin: -4px 0 0; color: var(--ink-2); font-size: 15px; }
.res-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.res-nums p { margin: 0; padding: var(--s3); border-radius: var(--r2); background: var(--card); border: 1px solid var(--paper-3); min-width: 0; }
.res-nums b { display: block; font: 700 22px/1.25 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-nums span { font-size: 12px; color: var(--ink-3); }
.res-nums.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wc.wide .res-nums { grid-template-columns: 1fr 1fr; }
.wc.narrow .res-nums { grid-template-columns: 1fr 1fr; }
.wc.narrow .res-nums.n3, .wc.wide .res-nums.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.res-rate { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.res-rate .up { color: var(--green); font-weight: 700; } .res-rate .down { color: var(--red); font-weight: 700; }
.tier { margin: 0; font-weight: 700; } .tier.up { color: var(--green); } .tier.down { color: var(--red); }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rank li { display: grid; grid-template-columns: 3em auto minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 8px var(--s3); border-radius: var(--r1); background: var(--card); font-size: 14px; }
.rank li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank li.me { background: var(--blue-2); }
.rk-pl { font-weight: 700; }
.rk-sub { grid-column: 3; font-size: 12px; color: var(--ink-3); }
.rk-sc { grid-column: 4; grid-row: 1 / 3; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.res-chat p { margin: 0; font-size: 14px; } .res-chat b { color: var(--ink-2); margin-right: 6px; }
.res-words { border-radius: var(--r2); background: var(--paper-2); padding: var(--s2) var(--s3); }
.res-words summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.res-words ol { margin: var(--s2) 0 0; padding: 0 0 0 1.6em; display: grid; gap: 4px; max-height: 280px; overflow-y: auto; }
.res-words li { font-size: 13px; color: var(--ink-2); padding-left: 4px; }
.res-words li::marker { color: var(--ink-3); }
.res-words li b { color: var(--ink); font-size: 15px; margin-right: 8px; border-bottom: 2px solid var(--pc); }
.res-words li.mine b { color: var(--blue); }
.res-btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.res-btns button { padding: 0 var(--s5); }

/* ---------------------------------------------------------------- 모달 */
.modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--s3); background: color-mix(in srgb, var(--ink) 30%, transparent); }
.mbox { width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: var(--r3); background: var(--card); box-shadow: 0 20px 60px rgba(20, 20, 30, 0.25); overflow: hidden; }
.mhead { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--paper-3); }
.mtitle { margin: 0; font: 800 20px/1.2 var(--f-disp); }
.x { height: 32px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--paper-3); background: var(--card); font-size: 13px; }
.mbody { padding: var(--s2) var(--s4) var(--s4); overflow-y: auto; font-size: 14px; }
.mbody h4 { margin: var(--s4) 0 var(--s2); font: 700 15px/1.3 var(--f-body); }
.mbody h4 small { font-weight: 400; color: var(--ink-3); margin-left: 6px; font-size: 12px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 6px 0; }
.set-row > span { white-space: nowrap; }
.set-row input[type=range] { width: min(240px, 55%); accent-color: var(--blue); }
.set-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--blue); }
.set-help { margin: 0 0 var(--s2); font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.seg { display: inline-flex; border: 1px solid var(--paper-3); border-radius: 999px; padding: 2px; background: var(--paper); flex-wrap: wrap; justify-content: flex-end; }
.seg button { height: 30px; padding: 0 var(--s3); border: 0; border-radius: 999px; background: none; font-size: 13px; color: var(--ink-2); }
.seg button.on { background: var(--ink); color: var(--paper); }
.help { margin: var(--s2) 0; padding-left: 1.3em; display: grid; gap: 6px; line-height: 1.6; }
.help-note { color: var(--ink-3); font-size: 13px; }
.rec { width: 100%; border-collapse: collapse; font-size: 13px; }
.rec th, .rec td { padding: 6px 4px; text-align: left; border-bottom: 1px solid var(--paper-3); }
.rec th { font-weight: 600; }
.rec td { color: var(--ink-2); }
.rec-p { margin: 0; line-height: 1.7; }
.rec-p .badge { margin-right: 6px; }
.rec-reset { margin-top: var(--s4); }
.rec-reset button { height: 32px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--paper-3); background: none; font-size: 12px; color: var(--ink-3); }
.rec-reset button.sure { border-color: var(--red); color: var(--red); }
.toast { position: absolute; left: 50%; bottom: var(--s5); z-index: 30; transform: translate(-50%, 12px); padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; opacity: 0; transition: opacity .2s, transform .3s var(--ease); pointer-events: none; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- 소개 글 */
.about { max-width: 1240px; margin: 0 auto; padding: var(--s7) clamp(var(--s4), 4vw, var(--s7)) var(--s6); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.8fr); gap: var(--s6) clamp(var(--s5), 5vw, var(--s8)); }
.about-main { min-width: 0; }
.about h2 { margin: var(--s6) 0 var(--s2); font: 800 26px/1.3 var(--f-disp); letter-spacing: -0.01em; }
.about h2:first-child { margin-top: 0; }
.about p, .about li { font-size: 16px; color: var(--page-ink); }
.about p { margin: 0 0 var(--s3); }
.about ul, .about ol { margin: 0 0 var(--s3); padding-left: 1.3em; }
.about li { margin-bottom: 6px; }
.about strong { font-weight: 600; }
.about dl { margin: 0; }
.about dt { margin-top: var(--s4); font-weight: 600; }
.about dd { margin: 4px 0 0; color: var(--page-2); }
.about-side { min-width: 0; font-size: 14px; color: var(--page-2); }
.about-side h3 { margin: 0 0 var(--s2); font: 800 20px/1.3 var(--f-disp); color: var(--page-ink); }
.keytab { width: 100%; border-collapse: collapse; margin-bottom: var(--s5); font-size: 14px; }
.keytab th { text-align: left; font-weight: 500; padding: 6px 0; color: var(--page-2); }
.keytab td { padding: 6px 0; font-weight: 600; color: var(--page-ink); text-align: right; }
.keytab tr + tr th, .keytab tr + tr td { border-top: 1px solid var(--page-line); }
.ex-chain { margin: 0 0 var(--s5); padding: var(--s3); border-radius: var(--r2); background: var(--paper); border: 1px solid var(--page-line); font-size: 14px; line-height: 1.9; color: var(--page-ink); }
.ex-chain b { color: var(--red); }
.credits { font-size: 13px; color: var(--page-2); line-height: 1.6; }
.credits a { color: var(--page-2); }
.more { margin-top: var(--s5); font-size: 14px; color: var(--page-2); line-height: 1.9; }
.more a { white-space: nowrap; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; padding-top: var(--s6); } }
.foot { border-top: 1px solid var(--page-line); padding: var(--s5) clamp(var(--s4), 4vw, var(--s7)) var(--s6); font-size: 13px; color: var(--page-2); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); max-width: 1240px; margin: 0 auto; }
.foot a { color: var(--page-2); white-space: nowrap; }
.foot p { flex-basis: 100%; margin: var(--s2) 0 0; }
.nojs { padding: var(--s5); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ticker-in { animation: none; }
}