body {
    font-family: Arial;
    background: #111;
    color: #eee;
    margin: 0;
    padding-left: 25px;
    padding-right: 25px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    font-size: 22px;
    margin-top: 30px;
    margin-bottom: 30px;
    transform: scale(1.5, 1);
    text-decoration: none;
    color: #eee;
}

/* Section titles sit flush at the top of their block; vertical rhythm is
   owned entirely by the 30px margin-top on each top-level section below. */
.sectionTitle {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
}

@keyframes inputGradientShift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.input-group {
    display: flex;
    flex-direction: column;
}

/* gap (not per-child margin-right) so there is no trailing margin skewing the
   row's centering. Hidden children (the daily-mode Upload button) cost nothing. */
.input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

input {
    padding: 8px 12px;
    width: 250px;
    height: 31.5px;
    border: none;
    outline: none;
    border-radius: 0;
    color: #0000ff;
    background-image: radial-gradient(#6b6bff, #c9c9ff, #6b6bff, #c9c9ff);
    background-size: 450% 450%;
    background-position: 0% 0%;
    animation: inputGradientShift 5s infinite linear;
    box-shadow: none;
    box-sizing: border-box;
    flex-shrink: 0;
    font-family: Arial;
    font-size: 13.3333px;
    -webkit-appearance: none;
    appearance: none;
}

input::placeholder {
    color: #0000ff;
}

@keyframes guessShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

input.shake {
    animation: guessShake 0.35s ease, inputGradientShift 5s infinite linear;
}

button {
    padding: 8px 12px;
    border-radius: 0;
    background: #dbe4ea;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    /* iOS Safari tints button text with the system accent (blue) unless the
       colour is explicit and the native appearance is turned off. */
    color: #000000;
    -webkit-appearance: none;
    appearance: none;
    /* Form controls don't inherit the page's font-family/size from body — each
       browser substitutes its own UI-control default (e.g. Safari renders
       buttons/inputs in a different typeface/size than Chrome). Pin both
       explicitly so input and button render identically across browsers. */
    font-family: Arial;
    font-size: 13.3333px;
}

/* These buttons' labels change during play (guess counter, Show/Hide All,
   Upload/Remove Dataset, Copy Results/Copied!, New Game). Each has a fixed
   width so it never resizes as the label changes or the window narrows, and the
   label is centred with plain text-align.

   Deliberately NOT using display:flex here to centre the label: Safari/WebKit
   does not support flex (or grid) layout on <button> elements, so a flexed
   button falls back to native sizing and shrinks to its text — the exact bug
   this replaces. A plain fixed `width` + `text-align: center` is honoured
   identically across browsers.

   Because centred text that is wider than its box gets pinned to the left edge
   (not overflowed symmetrically), each width is sized to the button's WIDEST
   label + 11px per side, so every label fits inside the box and stays centred.
   For most buttons the widest label is the default; only guessBtn ("Guess
   (10/10)") and uploadBtn ("Remove Dataset") are a few px wider than their
   default label, so those two boxes are correspondingly a touch wider. */
#guessBtn, #toggleListBtn, #uploadBtn, #shareBtn, #newGameBtn {
    height: 31.5px;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 8px 11px;
    text-align: center;
    white-space: nowrap;
}
#guessBtn      { width: 107px; }
#toggleListBtn { width: 74px; }
#uploadBtn     { width: 122px; }
#shareBtn      { width: 102px; }
#newGameBtn    { width: 89px; }

/* The game board (guess/clue/component panels). Owns its 30px gap below the
   input row, matching the logo's margins. */
.flex {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.panel {
    width: 380px;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

td {
    padding: 6.1px;
}

td.dist-cell {
    width: 160px;
    min-width: 150px;
    white-space: nowrap;
}

td.name-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#suggestions {
    background: #222;
    margin-top: 10px;
    width: 250px;
}

/* When empty it must not occupy space (its 10px margin would otherwise
   silently pad the gap below the input row). */
#suggestions:empty {
    display: none;
}

.suggestion {
    padding: 5px;
    cursor: pointer;
}
.suggestion:hover {
    background: #333;
}

#gameOver {
    margin-top: 30px;
    padding: 15px;
    background: #222;
    border: 1px solid #555;
    display: none;
    width: fit-content;
    min-width: 250px;
    box-sizing: border-box;
}

#gameOver h3 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
}

#gameOver .go-line {
    margin: 5px 0;
    font-size: 13px;
    word-break: break-all;
}


#allList {
    align-self: center;
    text-align: center;
    /* 30px above "All Populations" from whatever precedes it — the game-over
       box when shown, otherwise the board itself (display:none contributes
       nothing, and body's flex column never collapses margins). */
    margin: 30px 0px;
}

#listContainer {
    text-align: center;
}