#view-wordchain { max-width: 860px; margin-inline: auto; }
.wc-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.wc-heading > .btn { flex-shrink: 0; }
.wc-heading .page-sub { line-height: 1.7; }
.wc-intro, .wc-lobby, .wc-waiting, .wc-result { padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(150deg, var(--card), var(--bg2)); }
.wc-intro h2 { font-size: 25px; margin-block: 8px 24px; line-height: 1.5; }
.wc-kicker { color: var(--accent2); font-weight: 700; font-size: 13px; }
.wc-example { display: grid; gap: 10px; }
.wc-example-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wc-example-row > b { min-width: 75px; color: var(--muted); font-size: 13px; }
.wc-chip { display: inline-flex; gap: 8px; align-items: center; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--text); font-size: 15px; font-weight: 700; list-style: none; }
.wc-chip.is-new { color: var(--accent2); border-color: #29d3c275; background: #29d3c210; }
.wc-rules { margin: 22px 0 0; padding-left: 24px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.wc-rules li + li { margin-top: 7px; }
.wc-lobby { margin-top: 20px; border-color: #7c5cff70; }
.wc-lobby h2 { font-size: 24px; margin-bottom: 16px; }
.wc-lobby-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.wc-join { display: flex; gap: 8px; }
.wc-join input { width: 118px; min-width: 0; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; }
.wc-muted { color: var(--muted); font-size: 14px; line-height: 1.8; }
.wc-waiting { display: grid; justify-items: center; gap: 18px; text-align: center; }
.wc-room-code { color: var(--accent2); font-size: 46px; letter-spacing: 8px; }
.wc-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wc-player { display: grid; gap: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; min-width: 0; }
.wc-player.is-you { border-color: #7c5cff90; }
.wc-player.is-active { border-color: var(--accent2); box-shadow: 0 0 0 2px #29d3c210; }
.wc-player-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-player-detail { font-size: 11px; color: var(--muted); }
.wc-connection { color: var(--gold); font-size: 13px; line-height: 1.6; margin-block: 12px; }
.wc-connection:empty { display: none; }
.wc-turn-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-block: 18px 12px; }
.wc-instruction { font-size: 25px; line-height: 1.4; }
.wc-turn-help { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.6; }
.wc-clock { min-width: 64px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); text-align: center; font-size: 38px; font-weight: 900; font-variant-numeric: tabular-nums; }
.wc-clock.low { color: var(--red); border-color: var(--red); }
.wc-progress { display: flex; align-items: center; gap: 7px; overflow-x: auto; white-space: nowrap; min-height: 51px; padding: 6px 0; }
.wc-progress > * { flex-shrink: 0; }
.wc-slot { display: inline-grid; place-items: center; min-width: 43px; height: 39px; border: 1px dashed var(--accent); border-radius: 10px; color: var(--accent2); font-size: 20px; }
.wc-earlier { font-size: 12px; color: var(--muted); }
.wc-position { color: var(--muted); font-size: 12px; min-height: 20px; margin-block: 3px 10px; }
.wc-word-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#view-wordchain .wc-word { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 62px; padding: 12px; border: 1px solid #5f5794; border-radius: 13px; background: linear-gradient(135deg, var(--card2), #282044); color: var(--text); font-size: 17px; font-weight: 700; touch-action: manipulation; }
.wc-word-label { overflow-wrap: anywhere; }
#view-wordchain .wc-word:not(:disabled):hover { border-color: var(--accent2); background: #293752; }
#view-wordchain .wc-word:not(:disabled):active { transform: translateY(1px); background: #394b68; }
#view-wordchain .wc-word:disabled { opacity: .55; cursor: default; }
#view-wordchain .wc-word.is-pending { border-color: var(--accent2); opacity: 1; }
.wc-word kbd { color: var(--muted); font-size: 10px; font-family: inherit; font-weight: 400; }
.wc-keyboard-hint { color: var(--muted); font-size: 11px; text-align: center; margin-top: 10px; }
.wc-leave { margin-top: 18px; }
.wc-chain { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; }
.wc-revealed { margin-block: 28px; }
.wc-result { text-align: center; margin-top: 22px; }
.wc-result h2 { font-size: 30px; line-height: 1.5; }
.wc-result-length { color: var(--accent2); font-size: 24px; font-weight: 900; margin-block: 15px; }
.wc-result .wc-lobby-actions { justify-content: center; }
.wc-mistake { background: #f8717110; border: 1px solid #f8717140; border-radius: 12px; padding: 14px; line-height: 1.8; margin-top: 16px; color: #fac0c0; }
.wc-review-title { margin-block: 24px 14px; font-size: 20px; }
.wc-final-chain { max-height: 330px; overflow-y: auto; padding-bottom: 5px; }
.wc-final-chain small { color: var(--muted); font-size: 10px; }
#view-wordchain :is(button, input):focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; }
@media (max-width: 600px) {
  .wc-heading { gap: 10px; }
  .wc-heading .page-title { font-size: 25px; }
  .wc-heading .page-sub { font-size: 13px; margin-bottom: 18px; }
  .wc-heading > .btn { font-size: 11px; padding: 9px; }
  .wc-intro, .wc-lobby, .wc-result { padding: 20px 16px; }
  .wc-intro h2 { font-size: 22px; margin-bottom: 18px; }
  .wc-example-row { gap: 5px; }
  .wc-example-row > b { min-width: 55px; font-size: 11px; }
  .wc-chip { padding: 8px 10px; font-size: 13px; }
  .wc-lobby h2 { font-size: 21px; }
  .wc-lobby-actions > .btn { flex: 1 1 145px; }
  .wc-join { width: 100%; }
  .wc-join input, .wc-join > .btn { flex: 1 1 120px; }
  .wc-playing .wc-heading .page-sub { margin-bottom: 10px; font-size: 11px; }
  .wc-playing .wc-heading .page-title { font-size: 22px; }
  .wc-players { gap: 8px; }
  .wc-player { padding: 9px 10px; gap: 4px; }
  .wc-player-name { font-size: 12px; }
  .wc-player-detail { font-size: 10px; }
  .wc-turn-top { gap: 10px; margin-block: 12px 6px; }
  .wc-instruction { font-size: 20px; }
  .wc-turn-help { font-size: 11px; margin-top: 3px; }
  .wc-clock { min-width: 52px; font-size: 30px; padding: 5px 9px; }
  .wc-progress { min-height: 44px; padding: 4px 0; }
  .wc-slot { height: 35px; }
  .wc-position { font-size: 11px; margin-bottom: 7px; }
  .wc-word-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  #view-wordchain .wc-word { min-height: 52px; padding: 9px 7px; font-size: 14px; border-radius: 10px; }
  .wc-word kbd { display: none; }
  .wc-keyboard-hint { display: none; }
  .wc-leave { margin-top: 12px; font-size: 12px; }
  .wc-connection { margin-block: 8px; font-size: 11px; }
  .wc-revealed { margin-block: 18px; }
  .wc-result h2 { font-size: 25px; }
}