/* Fazan-specific styles. The shared shell (score, status line, connect bar,
   below-game controls, a11y primitives, their breakpoints) comes from
   /lib/core.css, linked before this file. core.css defines the shared token
   defaults (--ink --paper --line --wash --wash-hover --muted --focus); this
   file may override any of them, and adds the game-only tokens below. */

:root {
    --mine: #1a1a2e;     /* my lost-round letters (Player 1 in hot-seat) */
    --theirs: #0b57d0;   /* opponent's letters (Player 2); >=4.5:1 on white */
    --unearned: #c2c5cf; /* letters nobody lost yet */
}

/* The FAZAN word replaces the numeric score; the shell still writes the
   hidden numbers, our letters render from the same counters. */
.score-nums { display: none; }

.fazan-word {
    display: flex;
    justify-content: center;
    gap: 0.05em;
    margin-bottom: 24px;
    font-size: 50px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    user-select: none;
}

.fazan-letter { color: var(--unearned); transition: color 0.3s ease; }
.fazan-letter.mine { color: var(--mine); }
.fazan-letter.theirs { color: var(--theirs); }

/* Both players own this letter: first half in my color, second in theirs. */
.fazan-letter.both {
    background: linear-gradient(90deg, var(--mine) 50%, var(--theirs) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Layout stability contract: every stage (pre-start, roulette, typing,
   result pause, match end) renders into the same fixed-size slots, so
   controls appearing or disappearing never move the game on the page.
   The vertical rhythm is one 20px step: input → meta row → status line. */
.word-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* One fixed-size slot holding either the input (+ submit arrow) or the
   roulette; before the first Start it's simply reserved space. */
.word-box {
    position: relative;
    width: min(86vw, 520px);
    height: 74px;
}

/* The big input. JS shrinks font-size as the word grows (long words must
   still fit); this is only the starting size. Right padding just clears the
   submit arrow, the left one is minimal — fitInput() subtracts both (62px)
   when sizing, so the text can use nearly the full width. */
.word-input {
    width: 100%;
    height: 100%;
    padding: 0 52px 0 10px;
    border: 0;
    border-bottom: 3px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 44px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
}

.word-input:disabled {
    opacity: 0.45;
    border-bottom-color: var(--wash-hover);
}

/* The input is focused for most of a round, so the global focus ring would
   read as a permanent frame around it. Focus shows on the underline instead. */
.word-input:focus-visible {
    outline: none;
    border-bottom-color: var(--ink);
}

/* Submits the word — an arrow inside the input's right end, chat-style. */
.say {
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--wash);
    color: var(--ink);
    cursor: pointer;
}

.say .icon {
    width: 20px;
    height: 20px;
}

.say:hover:not(:disabled) { background: var(--wash-hover); }

.say:disabled {
    cursor: default;
    opacity: 0.55;
}

/* The letter roulette fills the input's slot, so the swap between the two
   doesn't shift the layout. The "animation" is text content cycling a→z
   from JS; no CSS motion. */
.roulette {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid var(--line);
    color: var(--ink);
    font-size: 44px;
    font-weight: 700;
    user-select: none;
}

/* The row under the input: the word being continued and its challenge on
   the left, the turn clock on the right, Start/Stop as a centered overlay
   (they only show while the rest of the row is empty — pre-start and spin).
   The min-height is the pill height, so buttons swapping in and out (or
   the timer hiding) never change the row's size. */
.word-meta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(86vw, 520px);
    min-height: 42px;
}

.word-meta-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-align: left;
}

.word-meta-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* The challenge button never wraps — the word beside it ellipsizes instead. */
.redo {
    flex: none;
    white-space: nowrap;
}

/* The word being continued — what the opponent (or the other seat) said.
   One line, ellipsized if it must, so the row height never changes. */
.last-word {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.03em;
    text-align: left;
}

.timer {
    flex: none;
    margin-left: 12px;
    min-width: 2.4ch;
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    text-align: right;
}

.timer.low {
    color: #c62828; /* >=4.5:1 on white */
    font-weight: 800;
}

/* The status line under the form: same 20px step as the rows above, with
   two lines of space reserved so a message that wraps never pushes the
   game around (core.css sets larger margins per breakpoint — overridden). */
.play {
    margin: 20px 0 0;
    line-height: 1.3;
    min-height: 2.6em;
}

@media (min-width: 576px) {
    .fazan-word { font-size: 60px; }
}

@media (min-width: 768px) {
    .fazan-word { font-size: 70px; margin-bottom: 30px; }
    .last-word { font-size: 24px; }
}

@media (min-width: 992px) {
    .fazan-word { font-size: 90px; margin-bottom: 40px; }
}

@media (min-width: 1200px) {
    .fazan-word { font-size: 100px; margin-bottom: 45px; }
}