/*
 * Local styling for klondike-kostenlos.de. The game board keeps the engine's own
 * stylesheets; everything here is the shell around it: nav, footer, content
 * sections, games grid and blog.
 */

:root {
    --de-ink: #10261a;
    --de-ink-soft: #4a5b51;
    --de-accent: #076d2b;
    --de-accent-dark: #05541f;
    --de-surface: #ffffff;
    --de-surface-alt: #f4f7f4;
    --de-border: #dfe6e0;
    --de-max: 1180px;
}

body {
    color: var(--de-ink);
    background: var(--de-surface);
}

/* Scrollbar thumb matches the "New Game" button's colour. Only the
   "-webkit-" pseudo-elements are set (not the standard "scrollbar-color"
   too) because mixing both on the same page is what caused the thumb to
   flash and then disappear in Chromium. */
::-webkit-scrollbar-thumb {
    background-color: #be3737;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #be3737;
}

/* Keep the footer at the bottom of the window on short pages, such as a blog with two posts. */
html { height: 100%; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main { flex: 1 0 auto; }
body > header,
body > footer { flex-shrink: 0; }

/* ------------------------------------------------------------------ header */

.solitairen-navbar {
    padding: 0;
    background: var(--de-surface);
    font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
}

.site-nav-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: var(--de-max);
    margin: 0 auto;
    padding: 0.2rem 1rem;
}

.navbar-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.site-wordmark {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    color: var(--de-accent);
}

.site-flag {
    font-size: 1rem;
}

.site-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto;
}

.site-nav-list .nav-link {
    display: inline-block;
    padding: 0.2rem 0.45rem;
    color: var(--de-ink);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.875rem;
}

.site-nav-list .nav-link:hover,
.site-nav-list .nav-link:focus {
    background: var(--de-surface-alt);
    color: var(--de-accent-dark);
}

.site-nav-list .nav-link-active {
    color: var(--de-accent);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--de-accent);
}

.site-nav-toggle {
    display: none;
    margin-left: auto;
    border: 1px solid var(--de-border);
    background: var(--de-surface);
    border-radius: 4px;
    padding: 0.15rem 0.6rem;
    font-size: 0.875rem;
}

@media (max-width: 640px) {
    .site-nav-toggle { display: inline-block; }
    .site-nav-list {
        display: none;
        width: 100%;
        margin-left: 0;
        flex-direction: column;
    }
    .site-nav-list.is-open { display: flex; }
}

@media (max-height: 480px) and (orientation: landscape) {
    .site-nav-toggle { display: inline-block; }
    .site-nav-list {
        display: none;
        width: 100%;
        margin-left: 0;
        flex-direction: column;
    }
    .site-nav-list.is-open { display: flex; }
}

/* ------------------------------------------------------------------- pages */

.page-container {
    max-width: var(--de-max);
    padding: 2rem 1rem 3rem;
}

.page-container h1 {
    margin-bottom: 0.75rem;
}

.lead {
    color: var(--de-ink-soft);
    font-size: 1.05rem;
}

/* ------------------------------------------------------- game article */

/*
 * The description under each game, whether built in or written in the brain.
 * A tinted band holds one white article card with a comfortable reading width,
 * large type and generous spacing, so it stays easy on older eyes.
 */
.game-article {
    padding: 2.5rem 1rem 1rem;
    background: var(--de-surface-alt);
    border-top: 1px solid var(--de-border);
}

.game-article-card {
    max-width: 880px;
    margin: 0 auto;
    padding: 2.5rem 3rem 2.75rem;
    background: var(--de-surface);
    border: 1px solid var(--de-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 38, 26, 0.06);
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--de-ink);
}

/* Built-in content brings its own wrappers and grid; let the card do the layout. */
.game-article-card .game-content-view,
.game-article-card .container,
.game-article-card .row,
.game-article-card [class*="col-"] {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    flex: none;
}

.game-article-card section { margin: 0; }

.game-article-card > :first-child,
.game-article-card section:first-child > :first-child { margin-top: 0; }

/* No divider above the article's opening heading. */
.game-article-card > h2:first-child,
.game-article-card section:first-child > h2:first-child {
    padding-top: 0;
    border-top: 0;
}

.game-article:has(.game-article-card:empty) { display: none; }

.game-article-card h1 {
    margin: 0 0 1rem;
    font-size: 2.1rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--de-ink);
}

.game-article-card h2 {
    margin: 2.6rem 0 0.9rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--de-border);
    font-size: 1.65rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--de-ink);
}

.game-article-card h2::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 0.9rem;
    border-radius: 2px;
    background: var(--de-accent);
}

.game-article-card h3 {
    margin: 1.8rem 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--de-accent-dark);
}

.game-article-card p { margin: 0 0 1.1rem; }

.game-article-card a {
    color: var(--de-accent);
    font-weight: 600;
    text-underline-offset: 3px;
}

.game-article-card a:hover { color: var(--de-accent-dark); }

.game-article-card strong { color: var(--de-ink); }

/* Lists get green check marks instead of small bullets. */
.game-article-card ul {
    list-style: none;
    margin: 0 0 1.3rem;
    padding: 0;
}

.game-article-card ul li {
    position: relative;
    margin: 0 0 0.6rem;
    padding-left: 2rem;
}

.game-article-card ul li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.1em;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--de-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.game-article-card ol {
    margin: 0 0 1.3rem;
    padding-left: 1.6rem;
}

.game-article-card ol li {
    margin: 0 0 0.6rem;
    padding-left: 0.3rem;
}

.game-article-card ol li::marker {
    color: var(--de-accent);
    font-weight: 700;
}

.game-article-card blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--de-accent);
    border-radius: 0 10px 10px 0;
    background: #eef6f0;
    font-size: 1.05rem;
}

.game-article-card blockquote p:last-child { margin-bottom: 0; }

.game-article-card figure,
.game-article-card img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.75rem 0;
    border-radius: 12px;
}

.game-article-card figure img { width: 100%; margin: 0; }

.game-article-card figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--de-ink-soft);
    text-align: center;
}

.game-article-card table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: 1rem;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--de-border);
}

.game-article-card th,
.game-article-card td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--de-border);
    text-align: left;
    vertical-align: top;
}

.game-article-card th {
    background: var(--de-accent);
    color: #fff;
    font-weight: 600;
}

.game-article-card tbody tr:nth-child(even) { background: var(--de-surface-alt); }
.game-article-card tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 640px) {
    .game-article { padding: 1.25rem 0.5rem 0.5rem; }
    .game-article-card { padding: 1.5rem 1.2rem 1.75rem; border-radius: 12px; font-size: 1.05rem; }
    .game-article-card h1 { font-size: 1.7rem; }
    .game-article-card h2 { font-size: 1.4rem; }
    .game-article-card table { display: block; overflow-x: auto; }
}
/* ------------------------------------------------------------- games index */

.game-search {
    margin: 1.25rem 0 1.75rem;
    max-width: 420px;
}

.game-search label {
    display: block;
    font-size: 0.85rem;
    color: var(--de-ink-soft);
    margin-bottom: 0.25rem;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.game-card a {
    display: block;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--de-border);
    border-radius: 8px;
    background: var(--de-surface);
    text-decoration: none;
    color: inherit;
}

.game-card a:hover {
    border-color: var(--de-accent);
    box-shadow: 0 2px 10px rgba(7, 109, 43, 0.08);
}

.game-card h3 {
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
    color: var(--de-accent-dark);
}

.game-card p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--de-ink-soft);
}

/* -------------------------------------------------------------------- blog */

.blog-status {
    color: var(--de-ink-soft);
    padding: 1rem 0;
}

.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.25rem;
}

.post-card {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--de-border);
}

.post-card h2 {
    font-size: 1.2rem;
    margin: 0 0 0.3rem;
}

.post-card a {
    color: var(--de-accent-dark);
    text-decoration: none;
}

.post-card a:hover { text-decoration: underline; }

.post-card time,
.post-meta {
    display: block;
    font-size: 0.82rem;
    color: var(--de-ink-soft);
}

.blog-pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.blog-pager button {
    border: 1px solid var(--de-border);
    background: var(--de-surface);
    border-radius: 4px;
    padding: 0.35rem 0.9rem;
}

.blog-pager button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.post-body {
    max-width: 760px;
    line-height: 1.7;
}

.post-body img { max-width: 100%; height: auto; }

.post-back { margin-top: 2.5rem; }

/* Teaser cards under a game. */
.latest-posts {
    margin: 2.5rem 0 1rem;
}

.latest-posts-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.latest-posts-head h2 {
    font-size: 1.35rem;
    margin: 0;
}

.latest-posts-head a {
    color: var(--de-accent);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
}

.latest-posts-head a:hover { text-decoration: underline; }

.latest-posts .post-list,
.post-list.post-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.post-teaser a {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--de-border);
    border-radius: 10px;
    background: var(--de-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.post-teaser a:hover,
.post-teaser a:focus-visible {
    border-color: var(--de-accent);
    box-shadow: 0 6px 18px rgba(7, 109, 43, 0.1);
    transform: translateY(-2px);
}

.post-teaser img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--de-surface-alt);
}

.post-teaser-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.4rem;
    padding: 1rem 1.1rem 1.1rem;
}

.post-teaser time {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--de-ink-soft);
}

.post-teaser h3 {
    font-size: 1.08rem;
    line-height: 1.35;
    margin: 0;
    color: var(--de-ink);
}

.post-teaser p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--de-ink-soft);
}

.post-teaser-more {
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--de-accent);
}

/* ------------------------------------------------------------------ footer */

.site-footer {
    margin-top: 3rem;
    padding: 3rem 1rem 1.5rem;
    background: var(--de-ink);
    color: #c9d6cd;
    font-size: 0.92rem;
}

.footer-inner {
    max-width: var(--de-max);
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
}

.footer-wordmark {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.footer-brand p {
    max-width: 34ch;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.site-footer h4 {
    margin: 0 0 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.footer-links {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a {
    color: #c9d6cd;
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible { color: #fff; text-decoration: underline; }

.footer-network .footer-links:empty::after {
    content: "More sites soon";
    color: #8fa396;
}

.footer-legal {
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #8fa396;
    font-size: 0.82rem;
}

@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Placeholders stay invisible until the brain server fills them. */
[data-brain-placement]:empty { display: none; }

/* --------------------------------------------------------------- game shell */

/* The game name in the top bar, right before the New Game button, and the
   Wins / Time / Moves / Zoom stats row match the header's typeface for a
   consistent brand feel. */
.game-shell .game-name-text,
.game-shell .top-display {
    font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
}

/* The settings dropdown's panel (Background Colour / Card Set / Card Back)
   matches the play area's own default background instead of the engine's
   plain off-white. */
.game-shell .dropdown-content {
    background-color: #0b4505;
}

/* Coloris sets ".clr-field" text to transparent (it only uses "color" to
   tint the swatch button via currentColor), which makes the hex value
   inside the input unreadable; give the input its own visible colour. */
.game-shell #colorVal {
    color: #fff;
}

/* The Card Set popup, the Card Back popup, and the "you won" popup all
   match the play area's own default background instead of the engine's
   plain green. */
.game-shell #faceCardsModal,
.game-shell #backCardsModal {
    background-color: #0b4505;
}

.game-shell #win-dialog-solitairen {
    background-color: #0b4505;
}

/* The same treatment as the "New Game" button, shared by every top-bar
   action: Restart, the Turn 1 / Turn 3 draw toggle, and the More menu.
   A flat solid colour, a thin glassy top edge for a bit of shine, and a
   soft colour-matched glow instead of a plain grey drop shadow. Rises and
   brightens on hover, dips back in on press. */
.game-shell .start-new-game,
.game-shell .start-new-game2,
.game-shell .start-new,
.game-shell .restart,
.game-shell #draw1,
.game-shell #draw2,
.game-shell #draw3,
.game-shell #draw4,
.game-shell .dropbtn-sol {
    position: relative;
    /* The engine's own CSS forces "display: block" on these buttons via an
       ID selector (#topBarLeftContainer > *), which outranks any class
       selector on specificity alone — !important is the only way to win. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    background: #be3737;
    border: none;
    border-radius: 0;
    padding: 0 1.4em;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(65, 20, 20, 0.4),
        0 8px 18px rgba(190, 55, 55, 0.45),
        0 0 0 rgba(220, 90, 90, 0);
    transform: translateY(0) scale(1);
    transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.game-shell .start-new-game:hover,
.game-shell .start-new-game2:hover,
.game-shell .start-new:hover,
.game-shell .restart:hover,
.game-shell #draw1:hover,
.game-shell #draw2:hover,
.game-shell #draw3:hover,
.game-shell #draw4:hover,
.game-shell .dropbtn-sol:hover {
    background: #dc5555;
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 3px 6px rgba(65, 20, 20, 0.35),
        0 12px 26px rgba(190, 55, 55, 0.55),
        0 0 18px rgba(220, 90, 90, 0.5);
}

.game-shell .start-new-game:active,
.game-shell .start-new-game2:active,
.game-shell .start-new:active,
.game-shell .restart:active,
.game-shell #draw1:active,
.game-shell #draw2:active,
.game-shell #draw3:active,
.game-shell #draw4:active,
.game-shell .dropbtn-sol:active {
    transform: translateY(0) scale(0.97);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.25),
        0 1px 2px rgba(65, 20, 20, 0.35),
        0 4px 10px rgba(190, 55, 55, 0.4);
}

/* Whichever draw / suit-count mode is selected (Turn 1 / Turn 3, or
   1 / 2 / 4 Suits) stays visibly pressed in, so the toggle buttons don't
   all read as identical. */
.game-shell #draw1.active-btn,
.game-shell #draw2.active-btn,
.game-shell #draw3.active-btn,
.game-shell #draw4.active-btn {
    background: #8f2929;
    transform: translateY(0) scale(0.97);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.35),
        0 1px 2px rgba(65, 20, 20, 0.3);
}

/* Hide the "More" menu button and the variant list it opens; not worth
   exposing on this site. */
.game-shell .dropbtn-sol {
    display: none !important;
}

.game-shell #undo-but,
.game-shell #hint-but,
.game-shell #faceCards,
.game-shell #backCards {
    background-color: #307a38;
    border-radius: 0;
}

.game-shell #undo-but:hover,
.game-shell #hint-but:hover,
.game-shell #faceCards:hover,
.game-shell #backCards:hover {
    background-color: #55925c;
}

/* Square corners for Autoplay, Sound, and the Settings / Fullscreen icons
   (the engine gives both of those the same ".bottomButton-fullscreen"
   class). */
.game-shell #autoplay-but,
.game-shell #sound-but,
.game-shell .bottomButton-fullscreen {
    border-radius: 0;
}

/* The engine removes ".volume-off" / ".autoplay-off" from the button while
   sound / autoplay is turned on, so that absence is what "active" means
   here. */
.game-shell #autoplay-but:not(.autoplay-off),
.game-shell #sound-but:not(.volume-off) {
    background-color: #307a38;
}

.game-shell #autoplay-but:not(.autoplay-off):hover,
.game-shell #sound-but:not(.volume-off):hover {
    background-color: #55925c;
}

/* While off, the engine's own CSS swaps to a much brighter blue on hover
   (#autoplay-but.autoplay-off:hover); use a gentler lighten instead. */
.game-shell #autoplay-but.autoplay-off,
.game-shell #sound-but.volume-off {
    background-color: rgba(32, 161, 204, 0.2);
}

.game-shell #autoplay-but.autoplay-off:hover,
.game-shell #sound-but.volume-off:hover {
    background-color: #55925c;
}

/* ----------------------------------------------------------------- buttons */

.btn-primary-local,
.btn-secondary-local {
    display: inline-block;
    margin: 0.35rem;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
}

.btn-primary-local {
    background: var(--de-accent);
    color: #fff;
}

.btn-secondary-local {
    border: 1px solid var(--de-border);
    color: var(--de-ink);
}
/* ==========================================================================
   Font Awesome
   The vendored "fonts/font-awesome/css/font-awesome.css" came across from the
   app as a zero-byte file, so every ".icon-*" in the game markup (the sound
   toggle, the zoom chevrons) rendered as nothing. The font itself is intact,
   so the face and the handful of glyphs this site actually uses are declared
   here instead of restoring the whole upstream sheet.
   ========================================================================== */

@font-face {
    font-family: "FontAwesomeLocal";
    /* The .woff beside it is a 3KB subset holding only the handful of glyphs
       the old site drew, so the full .ttf is the one named here. */
    src: url("/fonts/font-awesome/font/fontawesome-webfont.ttf?v=2") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    font-family: "FontAwesomeLocal";
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-volume-up::before { content: "\f028"; }
.icon-volume-off::before { content: "\f026"; }
.icon-chevron-sign-up::before { content: "\f139"; }
.icon-chevron-sign-down::before { content: "\f13a"; }
.icon-refresh::before { content: "\f021"; }
.icon-plus-sign::before { content: "\f055"; }
.icon-rotate-left::before { content: "\f0e2"; }
.icon-magic::before { content: "\f0d0"; }
.icon-forward::before { content: "\f04e"; }

/* ==========================================================================
   The game board on phones and tablets

   Three vendored rules fought each other here, and all three cost space the
   cards could have used: games.css pinned the board to 75vh (and halved it
   with "zoom: 50%" in landscape), it pushed #playArea 20px to the right, and
   site.css put "margin-top: 120px; zoom: 112%" on .mobile-padding-top, which
   scaled the play area past the edge of the screen.

   Instead the board is sized from the real viewport: the full dynamic
   viewport height minus the site header, with the top bar and the bottom
   action bar carved out of it. The engine reads #playArea's own width and
   height in adjustLayout() and derives the card size from them, so handing it
   the whole remaining box is what makes the cards as large as they can be.
   ========================================================================== */

@media (max-width: 980px) {
    .game-shell {
        /* One button per tenth of the screen, never bigger than a comfortable
           40px and never smaller than a still-tappable 26px. This is what
           keeps the top bar on one line from a 320px phone upwards. */
        --sol-btn: clamp(26px, calc((100vw - 10px) / 10 - 3px), 40px);
        --sol-bar: calc(var(--sol-btn) + 10px);
        --sol-actions: 56px;
        /* The bar floats clear of the bottom edge, out of the way of the
           phone's own home indicator or gesture bar. */
        --sol-actions-lift: 18px;
        --sol-stats: 30px;
        --sol-gap: 6px;
        --sol-head: 56px;
    }

    .game-shell #parent-game,
    .game-shell #wrapper {
        display: block;
        width: 100%;
        overflow: visible;
    }

    /* "dvh" follows the mobile browser's collapsing address bar; the vh line
       above it is the fallback for browsers that do not know dvh. */
    .game-shell .game-container {
        display: block;
        width: 100%;
        height: calc(100vh - var(--sol-head));
        height: calc(100dvh - var(--sol-head));
        min-height: 380px;
        zoom: 1;
    }

    .game-shell #game-ui {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    /* The engine's own sheet gives #playArea "left: -10px; margin-top: 30px",
       games.css adds "margin-left: 20px", and site.css adds the 120px margin
       and the 112% zoom. All of it is replaced by a plain inset box. */
    .game-shell #playArea,
    .game-shell #playArea.mobile-padding-top,
    .game-shell #playArea.small-padding-top {
        position: absolute;
        /* The engine lays the board out a couple of pixels above and to the
           left of the box it was given, so the box is inset by a few pixels;
           without it the stock pile is shaved by the screen edge and its top
           edge disappears behind the button bar. */
        top: calc(var(--sol-bar) + 12px);
        right: 4px;
        bottom: calc(var(--sol-actions) + var(--sol-actions-lift) + var(--sol-stats) + var(--sol-gap) * 2);
        left: 12px;
        margin: 0 !important;
        zoom: 1 !important;
    }

    /* --------------------------------------------------------- the top bar */

    .game-shell #topBar {
        position: relative;
        height: var(--sol-bar);
        z-index: 198;
    }

    .game-shell #topBarLeftContainer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--sol-bar);
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 3px;
        margin: 0 !important;
        padding: 5px !important;
        box-sizing: border-box;
    }

    /* "#topBarLeftContainer > *" in the engine's sheet sets a float, block
       display, a left margin and a 28px height on every child; none of that
       belongs in a flex row. */
    .game-shell #topBarLeftContainer > * {
        float: none !important;
        margin: 0 !important;
        flex: 0 0 auto;
    }

    /* The game name is the subject of the page heading anyway; the bar needs
       the room more than it needs the word. */
    .game-shell .game-name-text {
        display: none !important;
    }

    /* Every action in the bar becomes the same square icon tile. "font-size:
       0" hides the label text sitting directly in the div; the glyph comes
       back through ::before at its own size. */
    .game-shell #topBarLeftContainer > .start-new-game,
    .game-shell #topBarLeftContainer > .start-new-game2,
    .game-shell #topBarLeftContainer > .start-new,
    .game-shell #topBarLeftContainer > .restart,
    .game-shell #topBarLeftContainer > #draw1,
    .game-shell #topBarLeftContainer > #draw2,
    .game-shell #topBarLeftContainer > #draw3,
    .game-shell #topBarLeftContainer > #draw4,
    .game-shell #topBarLeftContainer > #undo-but,
    .game-shell #topBarLeftContainer > #hint-but,
    .game-shell #topBarLeftContainer > #autoplay-but,
    .game-shell #topBarLeftContainer > #sound-but,
    .game-shell #topBarLeftContainer > .dropdown > span,
    .game-shell #topBarLeftContainer > #screenSize {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--sol-btn);
        height: var(--sol-btn) !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0;
        border-radius: 6px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .game-shell #topBarLeftContainer > .dropdown {
        width: var(--sol-btn);
        height: var(--sol-btn);
    }

    .game-shell #topBarLeftContainer > .dropdown > span {
        width: 100%;
    }

    .game-shell #topBarLeftContainer .bottomButton-fullscreen {
        width: 62% !important;
        height: 62% !important;
        border-radius: 0;
        background-color: transparent;
    }

    .game-shell #topBarLeftContainer > .start-new-game::before,
    .game-shell #topBarLeftContainer > .start-new-game2::before,
    .game-shell #topBarLeftContainer > .start-new::before,
    .game-shell #topBarLeftContainer > .restart::before,
    .game-shell #topBarLeftContainer > #undo-but::before,
    .game-shell #topBarLeftContainer > #hint-but::before,
    .game-shell #topBarLeftContainer > #autoplay-but::before {
        font-family: "FontAwesomeLocal";
        font-size: calc(var(--sol-btn) * 0.46);
        font-weight: normal;
        line-height: 1;
        text-shadow: none;
    }

    .game-shell #topBarLeftContainer > .start-new-game::before,
    .game-shell #topBarLeftContainer > .start-new-game2::before,
    .game-shell #topBarLeftContainer > .start-new::before      { content: "\f055"; }
    .game-shell #topBarLeftContainer > .restart::before         { content: "\f021"; }
    .game-shell #topBarLeftContainer > #undo-but::before        { content: "\f0e2"; }
    .game-shell #topBarLeftContainer > #hint-but::before        { content: "\f0d0"; }
    .game-shell #topBarLeftContainer > #autoplay-but::before    { content: "\f04e"; }

    .game-shell #topBarLeftContainer > #sound-but > i {
        font-size: calc(var(--sol-btn) * 0.44);
    }

    /* Turn 1 and Turn 3 stay a pair of numbers: no icon says which of two
       draw modes is which, and the digit is the whole meaning of the toggle. */
    .game-shell #topBarLeftContainer > #draw1::before,
    .game-shell #topBarLeftContainer > #draw2::before,
    .game-shell #topBarLeftContainer > #draw3::before,
    .game-shell #topBarLeftContainer > #draw4::before {
        font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
        font-size: calc(var(--sol-btn) * 0.46);
        font-weight: 700;
        line-height: 1;
    }

    .game-shell #topBarLeftContainer > #draw1::before { content: "1"; }
    .game-shell #topBarLeftContainer > #draw2::before { content: "2"; }
    .game-shell #topBarLeftContainer > #draw3::before { content: "3"; }
    .game-shell #topBarLeftContainer > #draw4::before { content: "4"; }

    /* The engine anchors the settings panel 150px to the left of its button,
       which hangs it off the side of a phone screen. */
    .game-shell #topBarLeftContainer .dropdown-content {
        left: auto;
        right: 0;
        width: min(300px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }


    /* ---------------------------------------------- wins, time and moves */

    /* The engine's own stats line is pinned to "bottom: 1%" of the board,
       right underneath the action bar. It is only hidden for user agents the
       page recognises as a phone, so on a tablet the two overlap; the numbers
       are shown in the row below instead. */
    .game-shell #stats-game-sol,
    .game-shell #sol-stat-source {
        display: none !important;
    }

    .game-shell .sol-stats {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: calc(var(--sol-actions-lift) + var(--sol-actions) + var(--sol-gap));
        height: var(--sol-stats);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        z-index: 199;
        pointer-events: none;
    }

    .game-shell .sol-stat {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
        height: 100%;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.28);
        color: #fff;
        font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
        font-size: clamp(10px, 2.6vw, 13px);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.01em;
        line-height: 1;
        text-shadow: none;
        white-space: nowrap;
    }

    /* A glyph rather than the word, because the three chips have to fit
       across a 320px screen and the icon needs no translating. */
    .game-shell .sol-stat::before {
        font-family: "FontAwesomeLocal";
        font-size: 1.05em;
        font-weight: normal;
        line-height: 1;
        opacity: 0.85;
    }

    .game-shell .sol-stat-wins::before  { content: "\f091"; }   /* trophy   */
    .game-shell .sol-stat-time::before  { content: "\f017"; }   /* clock    */
    .game-shell .sol-stat-moves::before { content: "\f0ec"; }   /* exchange */

    .game-shell .sol-stat-wins {
        background: rgba(190, 55, 55, 0.4);
    }

    /* ---------------------------------------- the bottom bar (built in JS) */

    .game-shell .sol-actions {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: var(--sol-actions-lift);
        height: var(--sol-actions);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding: 4px;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.28);
        border-radius: 12px;
        z-index: 199;
    }

    .game-shell .sol-actions button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 6px;
        background-image: none;
        background-color: #307a38;
        color: #fff;
        font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
        font-size: clamp(8px, 2.2vw, 10px);
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        text-shadow: none;
        cursor: pointer;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    /* The label is whatever the button it proxies says, so it can be "Neues
       Spiel" as easily as "New"; it gets the whole tile width and an ellipsis
       rather than pushing the icon out of shape. */
    .game-shell .sol-actions .sol-act-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .game-shell .sol-actions button::before {
        font-family: "FontAwesomeLocal";
        font-size: 19px;
        line-height: 1;
    }

    .game-shell .sol-actions button:active {
        background-color: #55925c;
        transform: scale(0.96);
    }

    .game-shell .sol-actions .sol-act-new { background-color: #be3737; }
    .game-shell .sol-actions .sol-act-new:active { background-color: #dc5555; }

    .game-shell .sol-actions .sol-act-new::before     { content: "\f055"; }
    .game-shell .sol-actions .sol-act-hint::before    { content: "\f0d0"; }
    .game-shell .sol-actions .sol-act-undo::before    { content: "\f0e2"; }
    .game-shell .sol-actions .sol-act-restart::before { content: "\f021"; }
}

/* Short landscape phones: the board is only a few hundred pixels tall, so both
   bars are trimmed to leave the cards as much of it as possible. */
@media (max-width: 980px) and (max-height: 480px) {
    .game-shell {
        --sol-btn: clamp(24px, calc((100vw - 10px) / 14 - 3px), 34px);
        --sol-actions: 42px;
        /* Sideways there is no height to spare, so the bar lifts just enough
           to read as floating and the numbers get a shallower row. */
        --sol-actions-lift: 4px;
        --sol-stats: 20px;
        --sol-gap: 3px;
    }

    /* There is no height to spare, so the board takes whatever is left rather
       than insisting on the 380px it gets in portrait. */
    .game-shell .game-container {
        min-height: 0;
    }

    .game-shell .sol-actions button {
        flex-direction: row;
        gap: 5px;
        font-size: clamp(9px, 1.5vw, 11px);
    }

    .game-shell .sol-stat {
        gap: 4px;
        padding: 0 8px;
        font-size: clamp(9px, 1.4vw, 11px);
    }

    .game-shell .sol-actions button::before {
        font-size: 16px;
    }
}

/* The vendored landscape rule halves the whole board with "zoom: 50%" and then
   stretches it to 180vh, which is where the cut-off cards and the page-long
   scroll in landscape came from. */
@media screen and (max-width: 980px) and (orientation: landscape) {
    .game-shell .game-container,
    .game-shell .game-container #screen,
    .game-shell .game-container .frame {
        zoom: 1;
        height: calc(100vh - var(--sol-head));
        height: calc(100dvh - var(--sol-head));
    }
}

/* The action bar is a phone affordance; on desktop the top bar has the room. */
@media (min-width: 981px) {
    .game-shell .sol-actions { display: none; }
}

/* ==========================================================================
   The settings panel, the card pickers and the fullscreen button on phones

   All three came over from the app sized for a mouse on a desktop. The
   settings panel is a fixed 310x200 box that only opens on :hover, which a
   finger cannot hold; the colour field inside it is a Bootstrap col-4 too
   narrow to show a hex value; the Card Set and Card Back pickers are
   "left: 10px; width: 100%", so they hang ten pixels off the right of the
   screen and clip their last column; and the fullscreen button tracks its own
   state in a "val" attribute that never hears about the swipe or the Esc key
   that left fullscreen, so every other tap does nothing.
   ========================================================================== */

@media (max-width: 980px) {

    /* ------------------------------------------------------ settings panel */

    /* The engine opens the panel with ".dropdown:hover". A tap on a phone
       gives at best a sticky emulated hover that the next tap anywhere
       cancels, so the panel is switched to a class the script toggles. */
    .game-shell .dropdown .dropdown-content {
        display: none;
    }

    .game-shell .dropdown.is-open .dropdown-content {
        display: block;
    }

    /* The panel hangs off the settings button, which on a 320px screen sits
       far enough right that a 300px panel runs past the left edge. Dropping
       the button's positioning context lets the panel measure itself from the
       bar instead, which spans the window. */
    .game-shell #topBarLeftContainer > .dropdown {
        position: static;
    }

    .game-shell #topBarLeftContainer .dropdown-content {
        top: 100%;
        left: auto;
        right: 6px;
        width: min(320px, calc(100vw - 12px));
        max-width: calc(100vw - 12px);
        height: auto;
        padding: 14px;
        border-radius: 14px;
        box-sizing: border-box;
        text-align: left;
    }

    /* Bootstrap's grid inside the panel is a row of columns with negative
       gutters and percentage widths; at this size it is a two-item line. */
    .game-shell .dropdown-content .row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
    }

    .game-shell .dropdown-content .row > [class^="col-"] {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        margin: 0 !important;
        padding: 0 !important;
    }

    .game-shell .dropdown-content .row > .col-4 {
        flex: 0 0 132px;
    }

    .game-shell .dropdown-content .row > .col-7 > div {
        margin: 0 !important;
        font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
    }

    /* Wide enough for "#0B4505" next to the 30px swatch Coloris pins to the
       right-hand end of the field. */
    .game-shell .dropdown-content #colorVal {
        width: 100%;
        height: 40px;
        padding: 0 42px 0 12px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.25);
        color: #fff;
        font-size: 0.95rem;
        box-sizing: border-box;
    }


    .game-shell .dropdown-content .clr-field {
        display: block;
        width: 100%;
    }

    .game-shell .dropdown-content .clr-field button {
        width: 30px;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 4px;
        right: 6px;
        /* The chip is filled with the colour it represents, which against a
           board of the same colour is an invisible square. */
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    }

    .game-shell .dropdown-content #faceCards,
    .game-shell .dropdown-content #backCards {
        display: block;
        height: auto;
        margin: 10px 0 0 !important;
        padding: 11px 12px !important;
        border-radius: 8px;
        font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: center;
    }

    /* ----------------------------------------- the Card Set / Card Back pickers */

    /* #game-ui carries the engine's "perspective", which makes it the
       containing block for its fixed-position descendants, so these insets
       are measured from the board rather than from the window. */
    .game-shell .modal {
        top: 6px;
        right: 6px;
        bottom: auto;
        left: 6px;
        width: auto;
        height: auto;
        max-height: calc(100% - 12px);
        padding: 46px 12px 14px;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        border-radius: 14px;
    }

    .game-shell .modal .row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
        gap: 10px;
        margin: 0 !important;
    }

    .game-shell .modal .row > div {
        width: auto;
        max-width: none;
        flex: none;
        margin: 0 !important;
        padding: 0 !important;
    }

    .game-shell .modal .row > div > img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 4px;
    }

    /* A 28px glyph in the corner is a small target for a thumb. */
    .game-shell .modal .close {
        top: 4px;
        right: 6px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        line-height: 1;
    }

    /* ------------------------------------------- settings and fullscreen icons */

    /* Both buttons are 28px bitmaps; at this size the drawn glyphs stay sharp
       and the fullscreen one can show which way it will go. */
    .game-shell #topBarLeftContainer .bottomButton-fullscreen {
        display: none !important;
    }

    .game-shell #topBarLeftContainer > .dropdown > span::before,
    .game-shell #topBarLeftContainer > #screenSize::before {
        font-family: "FontAwesomeLocal";
        font-size: calc(var(--sol-btn) * 0.46);
        font-weight: normal;
        line-height: 1;
        color: #fff;
        text-shadow: none;
    }

    .game-shell #topBarLeftContainer > .dropdown > span::before {
        content: "\f013";
    }

    .game-shell #topBarLeftContainer > #screenSize::before {
        content: "\f065";
    }

    .game-shell #topBarLeftContainer > #screenSize.is-fullscreen::before {
        content: "\f066";
    }

    .game-shell #topBarLeftContainer > .dropdown > span,
    .game-shell #topBarLeftContainer > #screenSize {
        background-color: #307a38;
        cursor: pointer;
    }

    .game-shell #topBarLeftContainer > .dropdown.is-open > span {
        background-color: #55925c;
    }

    /* A browser that cannot go fullscreen (Safari on iPhone offers it for
       video only) gets no button rather than a dead one. */
    .game-shell #topBarLeftContainer > #screenSize.is-unavailable {
        display: none !important;
    }
}

/* Coloris opens its picker on the document body, outside the game shell, so
   these are not scoped to it. The "pill" theme solitairen.js chooses is a
   fixed 390px with a 180px gradient panel down its left side -- wider than
   the phone it opens on. Both measurements become a share of the screen
   instead, which keeps the theme and its instance options intact. */
@media (max-width: 980px) {
    /* Coloris writes the picker's position into a style attribute, working
       from the 390px the theme asked for, so simply narrowing it leaves the
       picker parked off the side of the screen. Pinning both edges is what it
       takes to outrank that inline left. */
    .clr-picker {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
    }

    .clr-picker.clr-pill {
        padding-left: min(180px, 46vw);
    }

    .clr-pill .clr-gradient {
        width: min(180px, 46vw);
    }
}