/* ============================================================
   Land Rush — gameplay styles and design tokens.
   Webfonts are intentionally not loaded; the stacks fall back
   to the system sans/mono so the page stays self-contained.
   ============================================================ */
:root {
    --paper:        #F6F2EA;
    --paper-sunken: #EFEAE0;
    --surface:      #FFFFFF;
    --ink:          #1B1A17;
    --ink-soft:     #45423B;
    --muted:        #78736A;
    --faint:        #A8A296;
    --line:         #DED8CC;
    --line-soft:    #ECE7DD;

    --land-1: #FFFFFF;
    --land-2: #ECEEEF;
    --land-3: #D7DBDD;
    --land-4: #C2C7CA;
    --land-5: #AEB4B8;
    --grid-line: #1B1A17;

    --player-1:  #f15854; --player-2:  #5da5da; --player-3:  #faa43a;
    --player-4:  #60bd68; --player-5:  #f17cb0; --player-6:  #b2912f;
    --player-7:  #b276b2; --player-8:  #decf3f; --player-9:  #5f5f5f;
    --player-10: #b18080;

    --brand:      #44413B;
    --brand-ink:  #2B2926;
    --brand-tint: #ECE7DD;
    --go:         #3E9B4F;
    --go-ink:     #2F7C3E;
    --danger:     #D8413A;
    --danger-ink: #B5302A;
    --warning:    #C9821B;
    --warning-ink:#A06614;
    --warning-tint:#FBEFD9;

    --radius-sm: 4px;
    --radius-md: 6px;
    --shadow-card: 0 1px 2px rgba(27,26,23,.06), 0 1px 1px rgba(27,26,23,.04);
    --focus-halo: rgba(68,65,59,.28);

    --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

body {
    padding: 15px 0;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--font-sans);
}
#main-container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- layout: mobile single column, desktop board + panel split ---- */
.gp-head { margin-bottom: 14px; }
.gp-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.gp-h1 { margin: 2px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1.1; }
.gp-saved { color: var(--go-ink); font-size: 12px; font-weight: 700; margin-left: 8px; }
.gp-eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gp-you { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.gp-you .gp-swatch { width: 12px; height: 12px; }

@media (min-width: 768px) {
    .gp-layout {
        display: grid;
        grid-template-columns: 1fr 360px;
        grid-template-areas: "head head" "board panel";
        gap: 0 24px;
        align-items: start;
    }
    .gp-head      { grid-area: head; }
    .gp-board-col { grid-area: board; min-width: 0; }
    .gp-panel-col { grid-area: panel; }
}

/* ---- board ---- */
.gp-board {
    position: relative;
    container-type: inline-size;
    width: 100%;
    background: var(--surface);
    border: 3px solid var(--grid-line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-bottom: 14px;
}
.gp-grid { display: grid; width: 100%; }
.gp-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gp-cell.right_border  { border-right:  3px solid var(--grid-line); }
.gp-cell.bottom_border { border-bottom: 3px solid var(--grid-line); }
.gp-cell.gp-cur { background-color: var(--brand-tint); cursor: pointer; }
/* the selected field breathes via its background, so the cue stays inside the
   field with no overlap onto neighbours */
.gp-cell.gp-editing::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--brand); opacity: .08;
}
@media (prefers-reduced-motion: no-preference) {
    .gp-cell.gp-editing::after { animation: gpFieldPulse 2.8s ease-in-out infinite; }
}
@keyframes gpFieldPulse { 0%, 100% { opacity: .03; } 50% { opacity: .15; } }
/* opponents' land is veiled toward paper so your own (vivid) land stands out */
.gp-cell.gp-faded::after {
    content: ''; position: absolute; inset: 0;
    background: var(--paper); opacity: .5; pointer-events: none;
}

/* overlay grid layered over the board; slots span each land's largest rectangle
   and center their chip/label (see field.py Land.label_rect) */
.gp-overlay {
    position: absolute; inset: 0;
    display: grid;
    pointer-events: none;
    z-index: 2;
}
.gp-slot { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }

.gp-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
/* the editor's tab chip (.gp-tab-chip) is the board chip at a fixed size */
.gp-chip--cur, .gp-tab-chip {
    background: var(--brand); color: #fff; border: 2px solid var(--ink);
    border-radius: var(--radius-sm);
}
.gp-chip--cur {
    width: clamp(20px, 6cqw, 30px); height: clamp(20px, 6cqw, 30px);
    font-size: clamp(11px, 3.4cqw, 16px);
    box-shadow: 0 1px 0 rgba(0,0,0,.25);
    transition: transform .12s;
}
.gp-chip--cur.is-hover { transform: scale(1.15); }
.gp-chip--cur.is-active { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--brand); }
.gp-chip--bid { width: auto; height: auto; min-width: clamp(20px, 6cqw, 30px); padding: 3px 7px; gap: 4px; }
.gp-chip--bid .gp-lotno { font-size: clamp(8px, 2.2cqw, 11px); opacity: .72; }
.gp-chip--bid .gp-amt   { font-size: clamp(11px, 3.2cqw, 16px); }
.gp-chip--next {
    background: var(--paper); color: var(--muted); border: 2px dashed var(--ink);
    width: clamp(17px, 5cqw, 25px); height: clamp(17px, 5cqw, 25px);
    border-radius: var(--radius-sm); font-size: clamp(9px, 2.8cqw, 14px); opacity: .85;
}
.gp-price {
    display: flex; flex-direction: column; align-items: center; gap: .3em;
    line-height: 1.05; text-align: center;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink); opacity: .6;
    font-size: clamp(12px, 3.6cqw, 19px);
}
.gp-price .gp-sold { font-size: .62em; opacity: .8; }

/* ---- legend ---- */
.gp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-soft); align-items: center; margin-bottom: 14px; }
.gp-legend .k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gp-key { width: 15px; height: 15px; border-radius: 3px; box-sizing: border-box; flex: none; }
.gp-key + .gp-key { margin-left: -5px; }  /* overlap paired keys */
/* miniature of an auctioned land: tinted cell with the dark chip on it */
.gp-key--cur { background: var(--brand-tint); border: 1px solid var(--line); position: relative; }
.gp-key--cur::after { content: ''; position: absolute; inset: 3px; background: var(--brand); border-radius: 2px; }
.gp-key--next { background: var(--paper); border: 2px dashed var(--ink); }
.gp-key--land { border: 1px solid rgba(0,0,0,.2); position: relative; }
/* same veil as .gp-cell.gp-faded, so the key matches opponents' land */
.gp-key--faded::after { content: ''; position: absolute; inset: 0; background: var(--paper); opacity: .5; border-radius: inherit; }
.gp-key--free { background: var(--land-3); border: 1px solid var(--line); }

/* ---- field tabs ---- */
.gp-tabs { display: flex; border: 1.5px solid var(--line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; }
.gp-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 6px; background: var(--paper-sunken);
    border: 0; border-right: 1.5px solid var(--line); cursor: pointer;
    font-family: var(--font-sans); transition: background .12s;
    -webkit-tap-highlight-color: transparent;
}
.gp-tab:last-child { border-right: 0; }
.gp-tab.on { background: var(--surface); box-shadow: inset 0 -3px 0 var(--brand); }
.gp-tab-chip { width: 22px; height: 22px; font-size: 12px; }
.gp-tab-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ink); font-weight: 700; }
.gp-tab.on .gp-tab-val { color: var(--brand-ink); }

/* ---- bid editor ---- */
.gp-editor {
    background: var(--surface); border: 1.5px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 16px; margin-bottom: 14px;
}
.gp-ed-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.gp-ed-title { line-height: 1.15; white-space: nowrap; }
.gp-ed-field { font-size: 15px; font-weight: 800; color: var(--ink); }
.gp-ed-sub { font-size: 11.5px; color: var(--muted); }
.gp-shape { display: flex; align-items: center; justify-content: center; flex: none; }
.gp-num {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700;
    border: 1.5px solid var(--ink); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); text-align: center; outline: none;
    padding: 0 6px; width: 92px; height: 44px; font-size: 22px; margin-left: auto;
}
.gp-num:focus { box-shadow: 0 0 0 3px var(--focus-halo); }
.gp-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 10px;
    border-radius: 99px; background: var(--paper-sunken); border: 1px solid var(--line);
    outline: none; margin: 0;
}
.gp-range:focus { box-shadow: 0 0 0 3px var(--focus-halo); }
.gp-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
    border-radius: var(--radius-sm); background: var(--surface); border: 2px solid var(--ink);
    cursor: pointer; box-shadow: var(--shadow-card);
}
.gp-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--surface); border: 2px solid var(--ink); cursor: pointer; box-shadow: var(--shadow-card); }
.gp-range.warn::-webkit-slider-thumb { border-color: var(--warning-ink); background: var(--warning-tint); }
.gp-range.warn::-moz-range-thumb { border-color: var(--warning-ink); background: var(--warning-tint); }
.gp-committed { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.gp-committed b { font-family: var(--font-mono); color: var(--ink); }
.gp-committed.over b.c { color: var(--warning-ink); }
.gp-over { color: var(--warning-ink); font-weight: 700; }
.gp-action { margin-top: 16px; }
.gp-btn {
    display: block; width: 100%; padding: 12px 16px; border-radius: var(--radius-md);
    font-family: var(--font-sans); font-weight: 700; font-size: 15px; cursor: pointer;
    border: 1.5px solid var(--ink); -webkit-tap-highlight-color: transparent;
}
.gp-btn--primary { background: var(--brand); color: #fff; border-color: var(--ink); }
.gp-btn--primary:hover { background: var(--brand-ink); }
.gp-btn--secondary { background: var(--surface); color: var(--ink); }
.gp-btn--secondary:hover { background: var(--paper-sunken); }

/* ---- cards (standings + info) ---- */
.gp-card {
    background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-card); margin-bottom: 14px; overflow: hidden;
}
.gp-card__head { padding: 12px 14px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
summary.gp-card__head { cursor: pointer; }
details:not([open]) > .gp-card__head { border-bottom: none; }
.gp-card__body { padding: 6px 14px 12px; }
.gp-card__body p { margin: 8px 0; font-size: 13.5px; }
.gp-card__foot { padding: 10px 14px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line-soft); }

.gp-ov { width: 100%; border-collapse: collapse; }
.gp-ov th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px; }
.gp-ov th.num, .gp-ov td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-ov td { padding: 8px 6px; font-size: 13.5px; border-top: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-soft); }
.gp-ov tr.you td { background: var(--brand-tint); }
.gp-ov td.rank { color: var(--faint); font-family: var(--font-mono); width: 16px; font-size: 12px; }
.gp-ov td.player { width: 100%; max-width: 0; }
.gp-player { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
.gp-player.you { font-weight: 700; color: var(--ink); }
.gp-swatch { width: 13px; height: 13px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.2); }
.gp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gp-mark { font-size: 11px; color: var(--faint); flex: none; }
.gp-pwr { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }
.gp-pwr i { height: 8px; background: var(--ink); border-radius: 2px; display: block; opacity: .8; }
.gp-fields { font-size: 10.5px; color: var(--faint); margin-top: 2px; }

/* ---- notifications form rows (unchanged behaviour) ---- */
.notify-row { display: flex; align-items: center; gap: 0.5em; margin-bottom: 8px; }
.notify-row label { margin: 0; white-space: nowrap; font-weight: normal; }
.notify-row input[type=email] { flex: 1; min-width: 0; }

/* player + free-land fills (also used by the board) */
.free-land-1 { background-color: var(--land-1); }
.free-land-2 { background-color: var(--land-2); }
.free-land-3 { background-color: var(--land-3); }
.free-land-4 { background-color: var(--land-4); }
.free-land-5 { background-color: var(--land-5); }

.background-p1  { background-color: var(--player-1); }
.background-p2  { background-color: var(--player-2); }
.background-p3  { background-color: var(--player-3); }
.background-p4  { background-color: var(--player-4); }
.background-p5  { background-color: var(--player-5); }
.background-p6  { background-color: var(--player-6); }
.background-p7  { background-color: var(--player-7); }
.background-p8  { background-color: var(--player-8); }
.background-p9  { background-color: var(--player-9); }
.background-p10 { background-color: var(--player-10); }

/* Hide spinner in number entry field, see https://stackoverflow.com/a/4298216/114926 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }