html[data-which-line]:lang(ja) { --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
html[data-which-line]:lang(zh-Hans), html[data-which-line][lang="zh"] { --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
html[data-which-line]:lang(zh-Hant), html[data-which-line]:lang(yue) { --font-sans: "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", sans-serif; }
/* CJK needs its own punctuation and line-breaking rules, including before web fonts load. */
html[data-which-line]:is(:lang(ja), :lang(zh), :lang(yue)) .wl-wrap,
html[data-which-line]:is(:lang(ja), :lang(zh), :lang(yue)) .wl-result,
html[data-which-line]:is(:lang(ja), :lang(zh), :lang(yue)) .wl-help { line-break: strict; letter-spacing: normal; }
html[data-which-line]:is(:lang(ja), :lang(zh), :lang(yue)) :is(.wl-stop b, .wl-choice) { overflow-wrap: break-word; word-break: normal; }
#main > .t-wrap, .wl-hero .t-wrap { max-width: calc(var(--game-entry-width) + 2 * var(--game-gutter)); }
.wl-hero.t-hero--compact .t-lede { display: block; font-size: var(--game-text-size); line-height: var(--line-height-normal); }
.wl-input-note { display: inline-block; color: var(--ink-2); font-size: var(--game-label-size); }
@media (max-width: 640px) {
  html[data-which-line]:lang(zh) .game-language select { width: calc(var(--game-control-height) * 2); max-width: calc(var(--game-control-height) * 2); }
}
/* Keep country and difficulty in one row at every viewport size. */
.wl-selectors { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-2, 8px); margin-block: var(--space-2, 8px); }
.wl-selectors select { width: 100%; min-width: 0; min-height: var(--game-control-height); border: var(--game-border); border-radius: var(--game-radius); padding: var(--game-control-padding); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--game-text-size); }
.wl-milestone { color: var(--accent); font-size: var(--game-text-size); margin-block: var(--game-gap); }
#wl-upgrade { width: 100%; margin-bottom: var(--space-2, 8px); }
.wl-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--game-gap); margin-top: var(--game-gap); padding-block: var(--space-2, 8px); }
.wl-progress, .wl-clue-meta { font-family: var(--font-sans); font-size: var(--game-label-size); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-progress b { color: var(--ink); font-size: var(--game-text-size); }
.wl-streak { margin-inline-start: auto; color: var(--accent); font-size: var(--game-text-size); font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-stops { border: var(--game-border); background: var(--surface); padding: var(--game-gap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2, 8px) var(--game-gap); }
.wl-slot { display: flex; align-items: center; gap: var(--space-2, 8px); min-width: 0; min-height: calc(var(--game-control-height) - var(--space-1, 4px)); }
.wl-slot:first-child { grid-column: 1 / -1; min-height: var(--game-control-height); }
.wl-slot i { width: var(--game-section-gap); height: var(--game-section-gap); border-radius: 50%; border: var(--game-rule); color: var(--ink-3); flex: none; display: grid; place-items: center; font: normal var(--game-label-size) var(--font-mono); }
.wl-slot:not(.wl-stop) span { color: var(--ink-3); }
.wl-stop i { border-color: var(--ink-3); color: var(--ink-2); }
.wl-stop b { min-width: 0; font-size: var(--game-text-size); line-height: var(--game-title-leading); font-weight: 600; overflow-wrap: anywhere; }
.wl-stop:first-child b { font-size: var(--game-title-size-small); }
.wl-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2, 8px); margin-top: var(--game-gap); }
.wl-choice { appearance: none; min-width: 0; min-height: calc(var(--game-control-height) + var(--space-2, 8px)); border: var(--game-border); border-radius: var(--game-radius); background: var(--surface); padding: var(--game-control-padding); font: 600 var(--game-text-size) var(--font-sans); color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: var(--space-2, 8px); text-align: start; overflow-wrap: anywhere; }
.wl-choice span { min-width: 0; }
.wl-choice em { width: var(--game-gap); height: var(--game-gap); border-radius: 50%; flex: none; }
.wl-choice .key-hint { flex: none; }
.wl-choice:hover:not(:disabled) { border-color: var(--ink); }
.wl-choice.is-right { border-color: var(--ok); background: var(--accent-soft); color: var(--ok); }
.wl-choice.is-wrong { border-color: var(--miss); color: var(--miss); }
.wl-choice:disabled { cursor: default; opacity: 1; }
.wl-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--game-gap); margin-top: var(--game-gap); }
.wl-msg { min-width: 0; min-height: var(--game-control-height); display: flex; align-items: center; font-size: var(--game-text-size); line-height: var(--game-title-leading); color: var(--ink-2); overflow-wrap: anywhere; }
.wl-msg.ok { color: var(--ok); font-weight: 600; }
.wl-msg.no { color: var(--miss); font-weight: 600; }
.wl-actions .t-btn { min-width: calc(var(--game-control-height) * 3.5); min-height: var(--game-control-height); padding: var(--game-control-padding); border-radius: var(--game-radius); font-size: var(--game-text-size); }
.wl-result { padding: var(--game-panel-padding); }
.wl-review { margin-top: var(--game-section-gap); border-top: var(--game-rule); padding-top: var(--game-gap); text-align: left; font-size: var(--game-text-size); }
.wl-review summary { cursor: pointer; }
.wl-review ol { padding-left: var(--space-5, 20px); }
.wl-review li { padding-block: var(--space-2, 8px); border-bottom: var(--game-rule); }
.wl-review li span { display: block; color: var(--ink-2); }
.wl-help { margin-top: var(--game-section-gap); border-block: var(--game-rule); }
.wl-help > summary { min-height: var(--game-control-height); padding-block: var(--game-gap); font-size: var(--game-text-size); color: var(--ink-2); cursor: pointer; }
.wl-help .t-faq { padding-bottom: var(--game-gap); }
@media (hover: none) and (pointer: coarse) {
  .wl-wrap .key-hint { display: none; }
}
@media (max-width: 360px) {
  .wl-actions .key-hint { display: none; }
  .wl-actions .t-btn { min-width: calc(var(--game-control-height) * 2.5); }
}