/* Wordle view: cells, runes, keyboard, history and their responsive styles.
   The shared scene supplies the available panel space and size variables. */
.word-toolbar { display: flex; align-items: center; justify-content: center; margin: 0 0 15px; }
.word-toolbar h2 { font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.roll-button { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 44px; height: 44px; color: var(--gold); background: #56482c38; border: 1px solid #9d845853; padding: 3px; border-radius: 7px; font-size: 11px; line-height: 1.1; }
.roll-button > .icon { width: 20px; height: 20px; }
.roll-button:not(:disabled):hover { background: #6c593e70; border-color: #d5b36e; }
.roll-price { font-variant-numeric: tabular-nums; }
.word-workspace { position: relative; container-type: inline-size; --roll-gutter: 52px; --track-tile: min(var(--tile), calc((100cqw - 2 * var(--roll-gutter) - (var(--track-columns) - 1) * var(--tile-gap)) / var(--track-columns))); width: 100%; margin-inline: auto; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.word-workspace > :not(.word-history) { flex-shrink: 0; }
/* One cell size for the entire track, including mixed-length words. Reserve
   the roll gutter before sizing so seven-letter rows fit without shrinking
   separately from the active row. */
.word-row { display: grid; grid-template-columns: repeat(var(--letters), var(--track-tile)); justify-content: center; align-items: center; gap: var(--tile-gap, 7px); width: max-content; margin-inline: auto; flex-shrink: 0; }
.runes { margin-bottom: 12px; }
.rune { min-width: 0; text-align: center; display: flex; flex-direction: column; justify-content: center; height: 49px; color: #beab7d; border-bottom: 1px solid #6e664442; background: linear-gradient(0deg, #b4954c09, transparent); }
.rune.heal { color: #add48e; border-bottom-color: #a4c78233; background: linear-gradient(0deg, #a4c78209, transparent); }
/* An unsolved square shows its power, sized to the slot; a found one shows its letter. */
.rune-effect { flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: clamp(10px, 3.4vw, 14px); font-weight: 600; }
.rune-effect .icon { width: clamp(13px, 4.6vw, 18px); height: clamp(13px, 4.6vw, 18px); }
.rune-letter { font-family: Georgia, serif; font-size: 18px; line-height: 20px; height: 22px; color: var(--muted); }
.rune.spent { color: #87a271; border-color: #708f5338; background: #7ba55e05; }
/* Once found, a square's power has flown to its target: the letter takes the whole slot. */
.rune.spent .rune-letter { flex: 1; height: auto; display: flex; align-items: center; justify-content: center; color: #c2d59c; font-family: 'Segoe UI', sans-serif; font-size: clamp(17px, 5vw, 22px); font-weight: 600; line-height: 1; }
.rune { position: relative; }
/* Wide layouts show whole rows of history, as many as the screen height allows
   (--history-rows, set below); phones float it over the scene (portrait rules). */
.word-history { --history-rows: 2; height: calc(var(--history-rows) * var(--track-tile) + (var(--history-rows) - 1) * var(--tile-gap) + 8px); flex: none; display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; padding: 4px 0; margin-bottom: var(--tile-gap); mask-image: linear-gradient(to bottom, transparent, #000 8px, #000); }

.guess-grid, .trail-past { display: flex; flex-direction: column; gap: var(--tile-gap); }
.guess-grid { justify-content: flex-end; min-height: 100%; flex: 0 0 auto; }
.trail-past:empty { display: none; }
.trail-solved .tile.green { background: #34423c; border-color: #657b65; color: #d2dfcc; }
.trail-upcoming { display: flex; flex-direction: column; gap: var(--tile-gap); padding-top: var(--tile-gap); }
.trail-preview { position: relative; }
.trail-preview .tile { background: #29334030; border-color: #6b7585; }
.trail-preview + .trail-preview .tile { border-color: #505b6b; }
.preview-label { position: absolute; inset-inline-end: calc(100% + 9px); top: 50%; transform: translateY(-50%); font-size: 8px; line-height: 12px; letter-spacing: .5px; color: var(--muted); white-space: nowrap; }
.tile { width: 100%; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; position: relative; border: 1px solid #48505e; border-radius: 5px; background: #2e354170; color: #efebe4; font-size: clamp(20px, 2.2vw, 28px); font-weight: 650; line-height: 1; font-family: 'Segoe UI', sans-serif; user-select: none; }
.active-row { position: relative; }
.active-row .tile { background: #dedbd3; color: #292e37; border: 1px solid #e9e6df; box-shadow: 0 3px 0 #0b0e1450; }
.active-row .tile.cursor { background: #f1eee6; box-shadow: 0 0 0 2px #e3be7c24, 0 3px 0 #0b0e1450; border-color: #f2e7d0; }
.active-row .tile.cursor:after { content: ''; position: absolute; width: 14px; height: 2px; background: #6e727c; top: 68%; border-radius: 1px; }
/* A charged ×2/×3 lights the typing squares until a new attack or heal spends it. */
.active-row.boost-2 .tile { border-color: #e8c16a; box-shadow: 0 0 0 2px #e8c16a, 0 0 14px #e8c16a80, 0 3px 0 #0b0e1450; }
.active-row.boost-3 .tile { border-color: #f38ad2; box-shadow: 0 0 0 2px #ee78cc, 0 0 16px #ee78cc99, 0 3px 0 #0b0e1450; animation: boost-pulse 1s ease-in-out infinite alternate; }
/* A poisoned square: a pulsing purple border until it turns green. */
.active-row .tile.poisoned { border-color: #c39af0; box-shadow: 0 0 0 2px #9d6fd0, 0 0 10px #a874e080, 0 3px 0 #0b0e1450; animation: poison-pulse 1.4s ease-in-out infinite; }
@keyframes poison-pulse { 50% { border-color: #e0c4ff; box-shadow: 0 0 0 3px #b886ec, 0 0 18px #b682ecd0, 0 3px 0 #0b0e1450; } }
@keyframes boost-pulse { to { box-shadow: 0 0 0 2px #ee78cc, 0 0 28px #ee78ccd9, 0 3px 0 #0b0e1450; } }
.boost-chip { position: absolute; left: calc(100% + 7 * var(--game-unit, 1px)); top: 50%; translate: 0 -50%; padding: calc(4 * var(--game-unit, 1px)) calc(6 * var(--game-unit, 1px)); border-radius: 6px; background: #e8c16a; color: #2a2016; font: 800 calc(14 * var(--game-unit, 1px))/1 'Segoe UI', sans-serif; box-shadow: 0 0 12px #e8c16a80; }
.boost-3 .boost-chip { background: #ee78cc; color: #2c0f24; box-shadow: 0 0 14px #ee78cc99; }
.inactive-row .tile { background: #2e354170; border-color: #48505e; }
.inactive-row .tile.cursor:after { display: none; }
.tile.green { background: #6d9057; border-color: #85a46b; color: #102016; }
.tile.yellow { background: #a58c4f; border-color: #b89e61; color: #102016; }
.tile.gray { background: #3e4653; border-color: #596271; color: #d9dde4; }
.tile i { position: absolute; right: 4px; bottom: 3px; font-size: 8px; font-style: normal; opacity: .85; }
.word-input { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; padding: 0; color: transparent; caret-color: transparent; opacity: 0; cursor: text; font-size: 16px; }
.native-entry { margin: 14px auto 0; width: min(100%, 340px); padding-inline: 8px; }
.native-entry label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--muted); }
.native-entry-controls { display: flex; gap: 5px; align-items: stretch; }
.word-input.native-word-input { position: static; min-width: 0; flex: 1; width: 100%; height: 42px; padding: 7px 9px; opacity: 1; color: var(--text); caret-color: var(--text); border: 1px solid #778297; border-radius: 5px; background: #202936; font-size: 19px; }
.native-word-input:focus-visible { outline: 2px solid #e3be7c; outline-offset: 2px; }
.native-clear, .native-submit { min-width: 36px; border: 1px solid #626d7e; border-radius: 5px; background: #424c5c; color: var(--text); }
.native-clear { font-size: 22px; }
.native-submit { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; font-size: 12px; }
.native-submit .icon { width: 15px; height: 15px; }
.native-entry-hint { display: block; margin-top: 5px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.native-word-preview { display: block; margin-top: 5px; font-size: 17px; color: var(--text); }
.native-word-preview[hidden] { display: none; }
.guess-native { flex-shrink: 0; }
.guess-native-caption { display: block; text-align: center; font-size: 12px; line-height: 18px; color: var(--muted); }
.pronunciation-caption { margin: -5px 0 9px; text-align: center; font-size: 11px; line-height: 1.5; color: var(--muted); }
.han-clue { position: relative; min-width: 0; display: grid; gap: 2px; }
.pronunciation-row-labels { position: absolute; right: calc(100% + 6px); top: 36px; display: grid; gap: 2px; white-space: nowrap; color: var(--muted); font-size: 10px; }
.pronunciation-row-labels span { height: 17px; line-height: 17px; }
.han-clue .tile { aspect-ratio: auto; height: 34px; font-size: 22px; }
.sound-clue { position: relative; display: flex; align-items: center; justify-content: center; min-height: 17px; border: 1px solid #596271; border-radius: 3px; background: #3e4653; color: #d9dde4; font: 11px/1.2 'Segoe UI', sans-serif; }
.sound-clue.green { background: #6d9057; border-color: #85a46b; color: #102016; }
.sound-clue.yellow { background: #a58c4f; border-color: #b89e61; color: #102016; }
.sound-clue i { position: absolute; right: 2px; font-size: 7px; font-style: normal; }
.pronunciation-help { margin: 16px 0; font-size: 12px; line-height: 1.7; }
.pronunciation-help summary { cursor: pointer; color: var(--accent); }
:lang(zh) :is(.tile, .rune-letter, .native-word-input, .trail-solved) { font-family: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif; letter-spacing: normal; }
:lang(zh) .word-history { min-height: 140px; }
:lang(zh) .inked-row .tile { height: 92px; aspect-ratio: auto; }
:lang(zh) .native-entry { max-width: 360px; }
:lang(zh) .keyboard:empty { display: none; }
.key-spacer { flex: 1; min-width: 0; max-width: 46px; }
.extra-key-clues { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; }
.extra-key-clues .key { flex: 0 0 32px; height: 32px; }
:lang(ja) :is(.tile, .key, .rune-letter, .native-word-input, .trail-solved) { font-family: 'Yu Gothic UI', Meiryo, 'Noto Sans JP', sans-serif; letter-spacing: normal; }
:lang(ja) .key { font-size: 16px; height: 40px; }
:lang(ja) .key.enter-key { font-size: 11px; }
:lang(ja) .keyboard { gap: 4px; }
:lang(ja) .keyboard-row { gap: 3px; }
:lang(ja) .keyboard .modifier-key { background: #565064; border-color: #7a6f90; }
:lang(ja) .trail-solved { font-size: 14px; }
:lang(ja) .native-entry { margin-top: 10px; }
:lang(ja) .extra-key-clues .key { height: 32px; }
:lang(hi) .tile, :lang(hi) .key, :lang(hi) .rune-letter, :lang(hi) .native-word-input { font-family: 'Nirmala UI', 'Noto Sans Devanagari', sans-serif; }
:lang(hi) .tile { line-height: 1.6; font-weight: 500; }
:lang(hi) .trail-solved { letter-spacing: 0; }
:lang(hi) .rune-letter { height: 29px; line-height: 29px; }
:lang(hi) .rune { height: 55px; }
:lang(hi) .keyboard-row { gap: 3px; }
:lang(hi) .key { font-size: 15px; }
:lang(hi) .enter-key { font-size: 11px; }
.active-row:focus-within { outline: 1px solid #e3be7c; outline-offset: 4px; border-radius: 4px; }
.board-caption { font-size: 10px; color: var(--quiet); margin: 11px -4px 0; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 15px; text-align: center; }
.board-caption .icon { width: 13px; height: 13px; }
.keyboard { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 500px; margin-inline: auto; flex-shrink: 0; }
.keyboard-row { display: flex; justify-content: center; width: 100%; gap: 4px; }
.key { flex: 1; min-width: 0; max-width: 46px; height: clamp(40px, 6dvh, 48px); border: 1px solid #626d7e; background: #424c5c; border-radius: 5px; border-bottom: 3px solid #28313e; font-size: 13px; font-weight: 600; color: #f0f1f4; padding: 0; }
.key:not(:disabled):hover { background: #546278; border-top-color: #93a3bc; }
.key:disabled { opacity: .6; }
.key.green { background: #6d9057; border-color: #83a16a; border-bottom-color: #4c683d; color: #102016; }
.key.yellow { background: #a58c4f; border-color: #b79c5b; border-bottom-color: #796838; color: #102016; }
.key.green:not(:disabled):hover { background: #87aa70; color: #102016; }
.key.yellow:not(:disabled):hover { background: #c0a159; color: #102016; }
.key.gray { background: #252c36; color: #aeb7c5; border-color: #434d5e; border-bottom-color: #1b222c; }
.key.enter-key { flex: 1.8; max-width: 78px; font-size: 9px; letter-spacing: .3px; background: #d6ba86; color: #30291f; border-color: #e8ce9d; border-bottom-color: #9c7d49; }
.key.enter-key .icon { height: 12px; width: 12px; }
.key.enter-key:not(:disabled):hover { background: #e8ce9d; }
.key.back-key { flex: 1.4; max-width: 60px; }
.key.back-key .icon { width: 17px; height: 17px; }
.solve-hint { text-align: center; color: var(--quiet); font-size: 10px; margin-top: 13px; }
.solve-hint .icon { width: 12px; height: 12px; margin-inline: 3px; }
.revealing .tile { animation: reveal .36s ease backwards; animation-delay: calc(var(--i) * 65ms); }
.active-row .tile.reeling { overflow: hidden; background: #eddfbf; border-color: #e3be7c; }
.reel-glyph { display: inline-block; animation: reel-tick .09s linear infinite; animation-delay: calc(var(--i) * -17ms); }
@keyframes reel-tick { from { transform: translateY(-.7em); } to { transform: translateY(.7em); } }
/* A reel that stops drops into place with a small bounce: a hit flashes green, a miss settles blank. */
.active-row .tile.reel-stopped .reel-glyph { animation: reel-land .34s cubic-bezier(.2, 1.5, .4, 1) both; }
.active-row .tile.reel-hit { background: #6d9057; border-color: #a7d38a; color: #102016; box-shadow: 0 0 0 2px #a7d38a, 0 0 18px #9fd07a99, 0 3px 0 #0b0e1450; animation: reel-flash .45s ease-out; }
.active-row .tile.reel-miss { background: #e2ddd2; border-color: #cfc8b9; }
.active-row .tile.reel-miss .reel-glyph { color: #9a958a; }
@keyframes reel-land { 0% { transform: translateY(-.8em); opacity: .4; } 65% { transform: translateY(.12em); opacity: 1; } 100% { transform: none; } }
@keyframes reel-flash { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
.word-solved .tile.green, .word-solved .rune { animation: solve-glow .8s ease; }
.poison-cast .tile.poisoned { animation: poison-flash .65s ease, poison-pulse 1.4s ease-in-out .65s infinite; }
@keyframes reveal { 0% { transform: rotateX(85deg); opacity: .3; } 100% { transform: rotateX(0); opacity: 1; } }
@keyframes solve-glow { 40% { box-shadow: 0 0 22px #bddb8577; filter: brightness(1.25); } }
.language-note { font-size: 12px; line-height: 1.7; color: var(--text); margin: 0 0 20px; padding-inline-start: 12px; border-inline-start: 2px solid var(--accent); }
.help-example { display: flex; gap: 6px; align-items: center; border-block: 1px solid #424c5b; padding: 17px 0; }
.help-example .tile { width: 38px; height: 40px; flex: 0 0 auto; font-size: 19px; }
.help-example p { font-size: 10px; color: var(--muted); margin-inline-start: 8px; line-height: 1.8; }
.help-example strong { color: var(--text); font-weight: 500; }
/* Follow the combat composition's shared layout unit, including controls and
   labels. A larger character beside a fixed-size keyboard is not a scaled game. */
@media (min-width: 1600px) and (min-height: 800px) {
.word-toolbar { margin-bottom: calc(15 * var(--game-unit)); }
.word-toolbar h2 { font-size: calc(11 * var(--game-unit)); }
.word-workspace { --roll-gutter: calc(52 * var(--game-unit)); }
.roll-button { width: calc(44 * var(--game-unit)); height: calc(44 * var(--game-unit)); right: calc(100% + 8 * var(--game-unit)); font-size: calc(11 * var(--game-unit)); }
.roll-button > .icon { width: calc(20 * var(--game-unit)); height: calc(20 * var(--game-unit)); }
.runes { margin-bottom: calc(12 * var(--game-unit)); }
.rune { height: calc(49 * var(--game-unit)); }
.rune-effect { font-size: calc(14 * var(--game-unit)); }
.rune-effect .icon { width: calc(18 * var(--game-unit)); height: calc(18 * var(--game-unit)); }
.rune-letter { font-size: calc(18 * var(--game-unit)); height: calc(22 * var(--game-unit)); line-height: calc(20 * var(--game-unit)); }
.rune.spent .rune-letter { font-size: calc(22 * var(--game-unit)); }
.tile { font-size: calc(28 * var(--game-unit)); }
.tile i { font-size: calc(8 * var(--game-unit)); }
.preview-label { font-size: calc(8 * var(--game-unit)); line-height: calc(12 * var(--game-unit)); }
.keyboard { max-width: calc(500 * var(--game-unit)); gap: calc(6 * var(--game-unit)); }
.keyboard-row { gap: calc(4 * var(--game-unit)); }
.key, .key-spacer { max-width: calc(46 * var(--game-unit)); }
.key { height: calc(48 * var(--game-unit)); font-size: calc(13 * var(--game-unit)); }
.key.enter-key { max-width: calc(78 * var(--game-unit)); font-size: calc(9 * var(--game-unit)); }
.key.back-key { max-width: calc(60 * var(--game-unit)); }
.key.enter-key .icon { width: calc(12 * var(--game-unit)); height: calc(12 * var(--game-unit)); }
.key.back-key .icon { width: calc(17 * var(--game-unit)); height: calc(17 * var(--game-unit)); }
.board-caption, .solve-hint { font-size: calc(10 * var(--game-unit)); }
.solve-hint { margin-top: calc(13 * var(--game-unit)); }
}
@media (max-width: 900px) and (orientation: portrait), (max-width: 699px) {
.word-toolbar { margin-bottom: 8px; min-height: 40px; }
.word-toolbar h2 { font-size: 11px; }
.runes { margin-bottom: clamp(3px, .7dvh, 6px); }
.rune { height: clamp(28px, 4.4dvh, 38px); }
.rune-letter { height: 50%; line-height: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.tile { font-size: clamp(18px, 5vw, 25px); }
.board-caption { margin-top: 7px; font-size: 10px; }
.board-caption .icon { width: 12px; height: 12px; }
/* A calm, native-feeling keyboard: it uses the page margins, keys sit 6px apart
   with large letters, and a soft shadow replaces the outlines. */
.keyboard { width: calc(100% + 12px); max-width: 520px; margin-inline: -6px; gap: clamp(6px, 1.1dvh, 9px); }
.keyboard-row { gap: 6px; }
.key { height: clamp(40px, 6.2dvh, 54px); max-width: 48px; font-size: 17px; border: 0; border-radius: 7px; background: #3c4554; box-shadow: 0 2px 0 #1b212b; }
.key.gray { background: #262d38; color: #8e98a8; box-shadow: none; }
.key.green { box-shadow: 0 2px 0 #4c683d; }
.key.yellow { box-shadow: 0 2px 0 #796838; }
.key.enter-key { flex: 1.55; max-width: 76px; padding-inline: 2px; font-size: min(12px, 2.6vw); letter-spacing: 0; box-shadow: 0 2px 0 #9c7d49; }
.key.enter-key .icon { display: none; }
.key.back-key { flex: 1.55; max-width: 76px; }
.solve-hint { display: none; }
/* On phones the history holds only the guesses made so far (up to two rows), and
   nothing at all before the first guess, so the duel gets that space instead. */
/* The history rises from the word up through the room instead of pushing the duel
   up. The newest rows sit clear below the fighters' feet; older ones climb behind
   the fighters (drawn in front, see style.css) and fade out towards the top. */
.word-workspace { position: static; }
/* Reserve the row height even when a longer word needs narrower cells. Word
   length and a boss-rule line must not resize the fighters above the board. */
.active-row { min-height: var(--tile); }
.word-history { --history-tile: calc(var(--track-tile) * .82); --clear-rows: 1; position: absolute; z-index: 0; left: 50%; translate: -50% 0; bottom: calc(100% + 4px); width: max-content; max-width: 100%; margin: 0; padding: 0; height: auto; min-height: 0; max-height: calc(7 * (var(--history-tile) + var(--tile-gap))); pointer-events: none; mask-image: linear-gradient(to top, #000 calc(var(--clear-rows) * (var(--history-tile) + var(--tile-gap))), transparent 100%); mask-size: 100% calc(7 * (var(--history-tile) + var(--tile-gap))); mask-position: bottom; mask-repeat: no-repeat; }
.word-history:not(:has(.word-row)) { display: none; }
/* Past guesses sit a little smaller than the word being typed; the next two words
   follow it as slim rows of small empty squares. */
.word-history .word-row { grid-template-columns: repeat(var(--letters), var(--history-tile)); }
.word-history .tile { font-size: clamp(15px, 4.2vw, 21px); }
.trail-upcoming { --preview-tile: calc(var(--track-tile) * .42); gap: 4px; padding-block: 8px 6px; min-height: calc(var(--tile) * .84 + 18px); }
.trail-upcoming .word-row { grid-template-columns: repeat(var(--letters), var(--preview-tile)); gap: 4px; }
.trail-preview .tile { border-radius: 4px; }
.help-example p { font-size: 9px; margin-inline-start: 4px; }
.help-example .tile { width: 31px; height: 34px; font-size: 17px; }
}
@media (max-width: 559px) {
.word-workspace { --roll-gutter: 42px; }
.roll-button { width: 36px; right: calc(100% + 6px); }
.roll-button > .icon { width: 18px; height: 18px; }
}
@media (max-width: 370px) {
.word-workspace { --roll-gutter: 38px; }
.roll-button { width: 32px; }
.tile i { right: 2px; bottom: 2px; font-size: 6px; }
.keyboard-row { gap: 3px; }
.key { font-size: 11px; }
}
@media (max-width: 559px) and (max-height: 800px) {
 .trail-preview + .trail-preview { display: none; }
 .trail-upcoming { min-height: calc(var(--tile) * .42 + 14px); }
}
/* Short portrait screens drop the word's title row but keep a boss's rule. */
@media (max-width: 900px) and (max-height: 800px) {
.word-toolbar > h2, .board-caption { display: none; }
.word-toolbar { min-height: 16px; }
.word-toolbar:not(:has(.boss-rule)) { display: flex; }
}
@media (min-height: 800px) { .word-history { --history-rows: 3; } }
@media (min-height: 960px) { .word-history { --history-rows: 4; } }
@media (min-width: 700px) and (orientation: landscape) and (max-height: 640px), (min-width: 700px) and (max-width: 900px) and (orientation: landscape) {
.trail-preview + .trail-preview { display: none; }
.word-history { --history-rows: 2; }
.word-toolbar { margin-bottom: 4px; }
.word-toolbar h2 { font-size: 9px; }
.runes { margin-bottom: 4px; }
.rune { height: 30px; }
.rune-letter { height: 15px; line-height: 15px; font-size: 13px; }
.board-caption { margin-top: 4px; font-size: 9px; }
.tile { font-size: clamp(16px, 3vw, 21px); }
.tile i { right: 2px; bottom: 2px; font-size: 6px; }
.keyboard { gap: 3px; }
.key { height: clamp(28px, 8.6dvh, 38px); font-size: 11px; }
.solve-hint { display: none; }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 420px) { .word-history { --history-rows: 1; } }
.rune.triggered { background: #baa55a22; outline: 1px solid #d3c483; box-shadow: 0 0 14px #e8c56a38; color: #f4d995; }
.rune.heal.triggered { background: #9dc97824; outline-color: #bde892; box-shadow: 0 0 14px #a6df7338; color: #cbeca6; }
.word-toolbar:has(.boss-rule) { display: flex; flex-direction: column; gap: calc(7 * var(--game-unit, 1px)); }
.tile.inked { background: radial-gradient(ellipse at 35% 30%, #444059, #242333 70%); border-color: #68617f; color: #b4a8cd; }
.tile.inked .icon { width: calc(22 * var(--game-unit, 1px)); height: calc(22 * var(--game-unit, 1px)); opacity: .7; }
.rune.fused { outline: 1px solid #e6a168; background: #b9652c29; color: #f6bf8f; }
.fuse-mark { position: absolute; right: 1px; bottom: 2px; color: #ffc38b; }
.fuse-mark .icon { width: calc(14 * var(--game-unit, 1px)); height: calc(14 * var(--game-unit, 1px)); }
.active-row .tile.fused { border-color: #d9793d; box-shadow: inset 0 -4px 0 #d9793d, 0 0 0 1px #d9793d70; }
@media (max-width: 650px), (max-height: 540px) {
.word-toolbar:has(.boss-rule) { gap: 4px; }
.tile.inked .icon { width: 18px; height: 18px; }
}
/* The cells follow RTL DOM order. The familiar Arabic keyboard keeps its
   physical key order via dir=ltr; its individual labels are Arabic letters. */
:lang(ar) :is(.word-toolbar h2, .trail-solved, .preview-label, .key.enter-key) { letter-spacing: normal; }
:lang(ar) .trail-solved { font-size: 16px; line-height: 20px; }
:lang(ar) .rune-letter { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }
:lang(ar) .key:not(.enter-key):not(.back-key) { font-size: 18px; font-weight: 500; }
:lang(ar) .key.enter-key { font-size: 12px; }
:lang(ar) .language-note { font-size: 14px; }
:lang(ar) .help-example p { font-size: 12px; }
:lang(ko) :is(.tile, .key, .rune-letter, .native-word-input, .trail-solved, .guess-native-caption, .native-word-preview) { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; letter-spacing: normal; }
:lang(ko) :is(.word-toolbar h2, .preview-label) { letter-spacing: normal; }
:lang(ko) .word-history { min-height: 52px; }
:lang(ko) .key { font-size: 17px; }
:lang(ko) .key.enter-key { font-size: 11px; }
:lang(ko) .native-entry { margin-top: 10px; }
@media (min-width: 901px) and (min-height: 641px) {
  :lang(ko) .word-toolbar { margin-bottom: 10px; }
  :lang(ko) .key { height: 40px; }
  :lang(ko) .keyboard { gap: 4px; }
}
@media (max-width: 559px) {
  /* A single native-letter grid avoids squeezing thirteen Hindi keys into a
     phone row. The full-word field remains available above it for an OS IME. */
  :lang(hi) .keyboard { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px 3px; }
  :lang(hi) .keyboard-row { display: contents; }
  :lang(hi) .key { width: 100%; max-width: none; min-width: 0; }
  :lang(hi) .enter-key { grid-column: span 5; order: 1; }
  :lang(hi) .back-key { grid-column: span 4; order: 1; }
}
.rune.mult2, .rune.mult3 { color: #e2bd73; border-color: #b9954f88; background: #66512a2b; }
.rune.mult3 { color: #e4c4f3; border-color: #bc8ad0; background: #83539c24; }
.rune.mult2 .rune-effect, .rune.mult3 .rune-effect { font-size: calc(14 * var(--game-unit, 1px)); font-weight: 750; }
.rune[data-action="target-cell"] { padding: 0; border-inline: 0; border-top: 0; }
.rune.targetable { cursor: pointer; min-height: 44px; outline: 2px solid #e9c786; outline-offset: 3px; font-family: inherit; }
.rune.targetable:hover, .rune.targetable:focus-visible { background: #6c583c; outline-color: #fff0c9; }
.boost-ready { display: inline-flex; align-items: center; gap: calc(4 * var(--game-unit, 1px)); color: #f2d095; border: 1px solid #9a7c48; border-radius: 5px; padding: calc(3 * var(--game-unit, 1px)) calc(6 * var(--game-unit, 1px)); font-size: calc(13 * var(--game-unit, 1px)); white-space: nowrap; }
.boost-ready .icon { width: calc(13 * var(--game-unit, 1px)); height: calc(13 * var(--game-unit, 1px)); }
.cancel-target { min-height: calc(44 * var(--game-unit, 1px)); padding: calc(4 * var(--game-unit, 1px)) calc(8 * var(--game-unit, 1px)); font-size: calc(12 * var(--game-unit, 1px)); border: 1px solid #9a7c48; border-radius: 5px; color: #f2d095; background: #272d37; }