/* ==========================================================================
   Gamify — arcade cabinet skin
   ==========================================================================

   Deliberately dependency-free: no webfont download, no icon set of its own.
   The retro read comes from hard edges, offset shadows, tabular monospace
   numerals and uppercase tracking, which survives dark mode and any theme
   colour the workspace picks.

   Dark mode in NIZU is a body class (body.color-1E202D) plus a theme
   stylesheet, NOT an html.dark class — every dark rule below is scoped to that
   body class.
   ========================================================================== */

:root {
    --gm-ink: #1e202d;
    --gm-paper: #ffffff;
    --gm-line: #d7dbe6;
    --gm-muted: #6b7280;
    --gm-accent: #6366f1;
    --gm-gold: #f59e0b;
    --gm-silver: #9ca3af;
    --gm-bronze: #b45309;
    --gm-green: #22c55e;
    --gm-shadow: rgba(30, 32, 45, .18);
}

body.color-1E202D {
    --gm-ink: #e8eaf2;
    --gm-paper: #262939;
    --gm-line: #3a3f55;
    --gm-muted: #9aa1b5;
    --gm-shadow: rgba(0, 0, 0, .45);
}

/* -- Typographic primitives ------------------------------------------------ */

.gm-mono {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.gm-label {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 10px;
    font-weight: 700;
    color: var(--gm-muted);
}

/* -- Panels ---------------------------------------------------------------- */

.gm-panel {
    background: var(--gm-paper);
    border: 2px solid var(--gm-line);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--gm-shadow);
    padding: 18px;
    margin-bottom: 20px;
    position: relative;
}

.gm-panel-title {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px;
    font-weight: 700;
    color: var(--gm-ink);
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--gm-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Optional CRT overlay. Very low contrast on purpose — it should read as
   texture, not as a broken screen, and it must never hurt legibility. */
.gm-scanlines::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, .035) 0px,
        rgba(0, 0, 0, .035) 1px,
        transparent 1px,
        transparent 3px
    );
}

body.color-1E202D .gm-scanlines::after {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, .035) 0px,
        rgba(255, 255, 255, .035) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* -- Hero / player card ---------------------------------------------------- */

.gm-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
}

.gm-hero-avatar {
    width: 76px;
    height: 76px;
    border: 3px solid var(--gm-ink);
    box-shadow: 3px 3px 0 var(--gm-shadow);
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--gm-line);
}

.gm-hero-main {
    flex: 1 1 260px;
    min-width: 0;
}

.gm-hero-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--gm-ink);
    margin: 0 0 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-level-chip {
    display: inline-block;
    padding: 3px 10px;
    color: #fff;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    border: 2px solid rgba(0, 0, 0, .25);
    white-space: nowrap;
}

/* -- Segmented XP bar ------------------------------------------------------ */

.gm-xp-wrap {
    margin-top: 12px;
}

.gm-xp-bar {
    height: 20px;
    border: 2px solid var(--gm-ink);
    background: var(--gm-line);
    position: relative;
    overflow: hidden;
}

.gm-xp-fill {
    height: 100%;
    background: var(--gm-accent);
    transition: width .8s cubic-bezier(.22, 1, .36, 1);
    position: relative;
}

/* The notches are what make it read as an arcade meter rather than a
   progress bar. Drawn over the fill so they segment both states. */
.gm-xp-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to right,
        transparent 0px,
        transparent 9px,
        rgba(0, 0, 0, .22) 9px,
        rgba(0, 0, 0, .22) 11px
    );
}

.gm-xp-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

/* -- Stat tiles ------------------------------------------------------------ */

.gm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.gm-stat {
    border: 2px solid var(--gm-line);
    padding: 12px;
    text-align: center;
    background: var(--gm-paper);
}

.gm-stat-value {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gm-ink);
}

.gm-stat-value.gm-negative {
    color: var(--gm-muted);
}

/* -- High-score table ------------------------------------------------------ */

.gm-board {
    width: 100%;
    border-collapse: collapse;
}

.gm-board th {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px;
    color: var(--gm-muted);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid var(--gm-line);
    font-weight: 700;
}

.gm-board td {
    padding: 10px;
    border-bottom: 1px solid var(--gm-line);
    vertical-align: middle;
    color: var(--gm-ink);
}

.gm-board tr:last-child td {
    border-bottom: none;
}

.gm-board-rank {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    font-weight: 700;
    width: 56px;
    color: var(--gm-muted);
}

/* Qualified with the td so these beat `.gm-board td { color: ... }`, which is
   specificity 0,1,1 and would otherwise win against a bare class selector and
   silently flatten every medal back to body colour. */
.gm-board td.gm-rank-1 { color: var(--gm-gold); }
.gm-board td.gm-rank-2 { color: var(--gm-silver); }
.gm-board td.gm-rank-3 { color: var(--gm-bronze); }

/* Same treatment outside the table (the arcade podium and the widget render
   the rank in a span, not a cell). */
.gm-rank-1 { color: var(--gm-gold); }
.gm-rank-2 { color: var(--gm-silver); }
.gm-rank-3 { color: var(--gm-bronze); }

/* Bronze is close to the body colour in dark mode — lift it so third place is
   still legible against the dark panel. */
body.color-1E202D .gm-board td.gm-rank-3,
body.color-1E202D .gm-rank-3 { color: #d97706; }

.gm-board-avatar {
    width: 32px;
    height: 32px;
    border: 2px solid var(--gm-line);
    object-fit: cover;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--gm-line);
}

.gm-board-score {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 15px;
    text-align: right;
    white-space: nowrap;
}

.gm-board tr.gm-is-me {
    background: rgba(99, 102, 241, .08);
}

body.color-1E202D .gm-board tr.gm-is-me {
    background: rgba(99, 102, 241, .18);
}

/* The 1UP marker on your own row — the one piece of genuine arcade grammar
   worth keeping. Respects reduced-motion. */
.gm-1up {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--gm-accent);
    border: 1px solid var(--gm-accent);
    padding: 1px 4px;
    margin-left: 8px;
    animation: gm-blink 1.4s steps(2, start) infinite;
    white-space: nowrap;
}

@keyframes gm-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
    .gm-1up { animation: none; }
    .gm-xp-fill { transition: none; }
}

/* -- Trophy cabinet -------------------------------------------------------- */

.gm-trophies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.gm-trophy {
    border: 2px solid var(--gm-line);
    padding: 16px 12px;
    text-align: center;
    background: var(--gm-paper);
    position: relative;
}

.gm-trophy-icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 10px;
    display: block;
}

.gm-trophy-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gm-ink);
    margin-bottom: 4px;
}

.gm-trophy-desc {
    font-size: 11px;
    color: var(--gm-muted);
    line-height: 1.35;
}

.gm-trophy.gm-locked {
    opacity: .55;
}

.gm-trophy.gm-locked .gm-trophy-icon {
    filter: grayscale(1);
}

/* Locked trophies show how close you are. A silhouette with no number is a
   dead end; "7 / 10" is a reason to do one more thing today. */
.gm-trophy-progress {
    height: 6px;
    background: var(--gm-line);
    margin-top: 10px;
    border: 1px solid var(--gm-line);
}

.gm-trophy-progress-fill {
    height: 100%;
    background: var(--gm-accent);
}

.gm-trophy-progress-label {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-size: 10px;
    color: var(--gm-muted);
    margin-top: 4px;
}

/* -- XP feed --------------------------------------------------------------- */

.gm-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-feed li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--gm-line);
}

.gm-feed li:last-child {
    border-bottom: none;
}

.gm-feed-text {
    font-size: 13px;
    color: var(--gm-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-feed-time {
    font-size: 11px;
    color: var(--gm-muted);
    display: block;
}

.gm-feed-xp {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.gm-feed-xp.gm-plus { color: var(--gm-green); }
/* Penalties are muted grey, never red. The charge is real; the shaming is not. */
.gm-feed-xp.gm-minus { color: var(--gm-muted); }
.gm-feed-xp.gm-void { color: var(--gm-muted); text-decoration: line-through; }

/* -- Celebration toast ----------------------------------------------------- */

#gm-toast-host {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 340px;
}

.gm-toast {
    background: var(--gm-paper);
    border: 3px solid var(--gm-ink);
    box-shadow: 5px 5px 0 var(--gm-shadow);
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    pointer-events: auto;
    animation: gm-toast-in .45s cubic-bezier(.22, 1, .36, 1);
}

@keyframes gm-toast-in {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .gm-toast { animation: none; }
}

.gm-toast-icon {
    font-size: 22px;
    line-height: 1.1;
    flex: 0 0 auto;
}

.gm-toast-title {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    font-weight: 700;
    color: var(--gm-ink);
    margin-bottom: 3px;
}

.gm-toast-msg {
    font-size: 13px;
    color: var(--gm-muted);
    line-height: 1.35;
}

.gm-toast-close {
    margin-left: auto;
    cursor: pointer;
    color: var(--gm-muted);
    font-size: 16px;
    line-height: 1;
    background: none;
    border: none;
    padding: 0 2px;
}

/* -- Empty states ---------------------------------------------------------- */

.gm-empty {
    text-align: center;
    padding: 34px 18px;
    color: var(--gm-muted);
    font-size: 13px;
}

.gm-empty-icon {
    font-size: 34px;
    display: block;
    margin-bottom: 12px;
    opacity: .45;
}

/* -- Dashboard widget ------------------------------------------------------ */

.gm-widget-xp {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--gm-ink);
}

.gm-widget-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--gm-line);
    font-size: 13px;
}

.gm-widget-row:last-child { border-bottom: none; }

/* -- Responsive ------------------------------------------------------------ */

@media (max-width: 640px) {
    .gm-hero { gap: 14px; }
    .gm-hero-avatar { width: 56px; height: 56px; }
    .gm-panel { padding: 14px; box-shadow: 3px 3px 0 var(--gm-shadow); }
    .gm-board-rank { width: 40px; font-size: 14px; }
    .gm-board th, .gm-board td { padding: 8px 6px; }
    #gm-toast-host { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* Wide content must scroll inside its own container, never the page body. */
.gm-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   NIZU Office — the 2D world
   ========================================================================== */

.gm-office-panel {
    padding-bottom: 12px;
}

.gm-office-tools {
    display: flex;
    gap: 8px;
}

.gm-office-stage {
    position: relative;
    width: 100%;
    /* Tall enough to read a floor plan, capped so it never pushes the page
       chrome off screen on a laptop. */
    height: calc(100vh - 260px);
    min-height: 420px;
    background: #eceef5;
    border: 2px solid var(--gm-line);
    overflow: hidden;
}

body.color-1E202D .gm-office-stage {
    background: #1b1d27;
}

#gm-office-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    /* NO image-rendering override here. The office tileset is a high-resolution
       illustration drawn DOWN to a 64px tile, so it wants normal smoothing;
       forcing `pixelated` on a fractional downscale produces shimmering edges.
       The renderer sets ctx.imageSmoothingEnabled from the tileset manifest, so
       a future low-res tileset can turn it off without touching this file. */
}

.gm-office-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(236, 238, 245, .92);
    color: var(--gm-muted);
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
}

body.color-1E202D .gm-office-overlay {
    background: rgba(27, 29, 39, .92);
}

/* Hover card — pinned, so it never chases the cursor off the stage. */
.gm-office-card {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 270px;
    background: var(--gm-paper);
    border: 2px solid var(--gm-ink);
    box-shadow: 4px 4px 0 var(--gm-shadow);
    padding: 12px;
    pointer-events: none;
}

.gm-office-card-head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.gm-office-card-avatar {
    width: 38px;
    height: 38px;
    border: 2px solid var(--gm-line);
    object-fit: cover;
    background: var(--gm-line);
}

.gm-office-card-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--gm-ink);
    line-height: 1.2;
}

.gm-office-card-job {
    font-size: 11px;
    color: var(--gm-muted);
}

.gm-office-card-stats {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px dashed var(--gm-line);
    border-bottom: 1px dashed var(--gm-line);
    margin-bottom: 8px;
}

.gm-office-card-stats b {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
    color: var(--gm-ink);
    display: block;
    font-size: 14px;
}

.gm-office-card-activity {
    font-size: 12px;
    color: var(--gm-ink);
    line-height: 1.4;
}

.gm-office-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 12px;
}

@media (max-width: 640px) {
    .gm-office-stage { height: 62vh; }
    .gm-office-card { left: 8px; right: 8px; width: auto; bottom: 8px; }
}

/* -- Office floor-plan editor ---------------------------------------------- */

.gm-ed-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 14px;
    align-items: start;
}

.gm-ed-palette {
    border: 2px solid var(--gm-line);
    background: var(--gm-paper);
    padding: 12px;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
}

.gm-ed-group {
    margin-bottom: 16px;
}

.gm-ed-group > .gm-label {
    margin-bottom: 6px;
    display: block;
}

.gm-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* A swatch is a window onto the real sheet, so it can never drift from the
   tile it paints. The inner span carries the background crop. */
.gm-swatch {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid var(--gm-line);
    background: var(--gm-paper);
    cursor: pointer;
    overflow: hidden;
    display: block;
    line-height: 0;
}

.gm-swatch > span {
    display: block;
    width: 46px;
    height: 46px;
    background-repeat: no-repeat;
}

.gm-swatch-tool > span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--gm-ink);
    line-height: 1;
}

.gm-swatch:hover {
    border-color: var(--gm-accent);
}

.gm-swatch.active {
    border-color: var(--gm-accent);
    box-shadow: 0 0 0 2px var(--gm-accent) inset;
}

.gm-ed-stage {
    height: calc(100vh - 260px);
    min-height: 420px;
}

.gm-ed-size {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gm-ed-size input {
    width: 78px;
}

@media (max-width: 900px) {
    .gm-ed-layout { grid-template-columns: 1fr; }
    .gm-ed-palette { max-height: 220px; }
    .gm-ed-stage { height: 60vh; }
}

.gm-ed-mode {
    display: flex;
    gap: 14px;
    margin-bottom: 4px;
}

.gm-ed-mode label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--gm-ink);
    cursor: pointer;
    margin: 0;
}

/* -- Arcade Duels ---------------------------------------------------------- */

.gm-duel-stage {
    position: relative;
    width: 100%;
    height: min(52vh, 460px);
    min-height: 280px;
    border: 2px solid var(--gm-line);
    overflow: hidden;
}

#gm-duel-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.gm-duel-banner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background: rgba(20, 22, 32, .72);
}

.gm-duel-controls {
    padding-top: 14px;
}

.gm-duel-turn {
    margin-bottom: 8px;
}

.gm-duel-inputs {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 10px 14px;
    align-items: center;
}

.gm-duel-inputs input[type="range"] {
    width: 100%;
}

@media (max-width: 760px) {
    .gm-duel-inputs { grid-template-columns: auto 1fr; }
    .gm-duel-inputs .btn { grid-column: 1 / -1; }
}

/* -- Live duels ---------------------------------------------------------- */

/* The "Live now" pulse. Slow and low-contrast on purpose: this sits on a work
   tool, and a hard blink in peripheral vision is genuinely unpleasant to work
   next to. Honours reduced-motion. */
.gm-live-dot { color: #ef4444; animation: gm-live-pulse 2.4s ease-in-out infinite; }
@keyframes gm-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .gm-live-dot { animation: none; }
}

.gm-vs { opacity: .6; margin: 0 2px; }

/* -- Avatar editor -------------------------------------------------------- */

/* Pixel art must never be smoothed. Canvases are scaled up 4x in the preview
   and 1x in the tiles, and browsers interpolate by default. */
#gm-avatar-preview,
.gm-option-tile canvas { image-rendering: pixelated; }

.gm-avatar-stage {
    display: flex; align-items: center; justify-content: center;
    background: rgba(127, 127, 127, .10);
    border-radius: 8px; padding: 8px; margin-bottom: 10px;
}
#gm-avatar-preview { width: 100%; max-width: 256px; height: auto; }

.gm-avatar-facings,
.gm-avatar-actions,
.gm-avatar-save,
.gm-avatar-row {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 10px;
}
.gm-avatar-facings .gm-face-btn { text-transform: capitalize; }
.gm-avatar-facings .gm-face-btn.active,
.gm-swatch.active { outline: 2px solid #6366f1; outline-offset: 1px; }
.gm-avatar-walk { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.gm-swatch-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.gm-swatch {
    width: 22px; height: 22px; padding: 0;
    border: 1px solid rgba(0, 0, 0, .25); border-radius: 4px; cursor: pointer;
}

/* A dense grid, because 108 hairstyles in a single column is unusable. */
.gm-option-grid {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    max-height: 460px; overflow-y: auto;
}
.gm-option-tile {
    display: flex; flex-direction: column; align-items: center;
    padding: 4px; background: transparent; cursor: pointer;
    border: 2px solid transparent; border-radius: 6px;
}
.gm-option-tile:hover { background: rgba(127, 127, 127, .12); }
.gm-option-tile.active { border-color: #6366f1; background: rgba(99, 102, 241, .10); }
.gm-option-tile canvas { width: 64px; height: 64px; }
.gm-option-name {
    font-size: 10px; line-height: 1.2; text-align: center;
    max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gm-option-none {
    justify-content: center; min-height: 78px; font-size: 22px; opacity: .55;
}

/* -- Task wagers: the consent dialog -------------------------------------- */

/* Two cards side by side, because the whole point is that a player compares
   what they are putting up against what they might have to take on. */
.gm-stake-card {
    border: 2px solid var(--gm-line);
    padding: 10px 12px;
    min-height: 76px;
    background: var(--gm-panel, transparent);
}
.gm-stake-card.gm-stake-risk { border-color: var(--gm-gold); }
.gm-stake-title { font-weight: 600; line-height: 1.3; }
.gm-stake-empty { color: var(--gm-silver); }

.gm-consent-terms { margin: 0; padding-left: 18px; }
.gm-consent-terms li { margin-bottom: 8px; line-height: 1.5; }

/* The wagered task named on an incoming challenge — truncated, because a task
   title can be a paragraph and this sits inside a one-line row. */
.gm-stake-tag {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* What kind of thing is being wagered — a task or a support ticket. */
.gm-stake-kind {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gm-silver);
    margin-bottom: 2px;
}

/* -- Blackjack ------------------------------------------------------------ */

/* The table image sits behind the seats so the game reads as happening at the
   piece of furniture that stands in the games room, not on an abstract page. */
.gm-bj-felt {
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    min-height: 460px;
    padding: 12px 0 0;
    image-rendering: pixelated;
}
.gm-bj-seat { text-align: center; }

/* The dealer's cards belong ON the felt, in front of him — dealt over his face
   they read as a UI layer floating above the art rather than a hand on a table. */
.gm-bj-dealer { min-height: 150px; padding-top: 130px; }
.gm-bj-players {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 40px;
    flex-wrap: wrap;
    gap: 12px;
}
.gm-bj-players .gm-bj-seat { flex: 0 1 220px; padding: 8px; }

/* Whoever has to decide is outlined, because on a card table nothing moves to
   tell you it is your turn. */
.gm-bj-active { outline: 3px solid var(--gm-gold); outline-offset: 4px; }

.gm-bj-cards { min-height: 62px; margin: 4px 0; }
.gm-bj-card {
    display: inline-block;
    width: 40px; height: 56px;
    margin: 0 2px;
    background: #fff;
    border: 2px solid var(--gm-ink, #14161f);
    color: #14161f;
    font-weight: 700;
    line-height: 1;
    padding-top: 6px;
    vertical-align: top;
}
.gm-bj-card.gm-bj-red { color: #d1344a; }
.gm-bj-card .gm-bj-rank { display: block; font-size: 15px; }
.gm-bj-card .gm-bj-suit { display: block; font-size: 19px; margin-top: 2px; }
/* The hole card: not styled to look hidden, actually absent from the payload. */
.gm-bj-card.gm-bj-back { background: repeating-linear-gradient(45deg,#3b3f75,#3b3f75 5px,#2a2d55 5px,#2a2d55 10px); }

.gm-bj-total { font-size: 20px; font-weight: 700; }
.gm-bj-state { min-height: 18px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.gm-bj-controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.gm-bj-status { color: var(--gm-silver); }
.gm-bj-help { max-width: 640px; margin-top: 10px; }
.gm-bj-scoreboard { margin-top: 10px; display: flex; gap: 18px; }
.gm-bj-score { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.gm-bj-clock { margin-left: 10px; font-variant-numeric: tabular-nums; }
.gm-bj-clock.gm-bj-urgent { color: #ef4444; }