:root {
    --bg: #2b1810;
    --card-bg: #3a2418;
    --border: #5c3a24;
    --text: #f0e4d8;
    --muted: #b89880;
    --accent: #d68a3a;
    --error: #d64545;
    --success: #3aa35a;
    --good-diamond: #7ec8e3;
    --good-gold: #e0b93a;
    --good-silver: #b8b8c0;
    --good-cloth: #c85a9a;
    --good-spice: #d6572e;
    --good-leather: #8a5a35;
    --good-camel: #c9a06a;
    --bonus-token: #f2c14e;
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, sans-serif;
    margin: 0;
    padding: 0;
}

.wrap {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1rem;
}

h1 { text-align: center; }

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.header-row h1 { margin: 0; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.85rem; color: var(--muted); }

input, select {
    width: 100%;
    padding: 0.6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 1rem;
}

button, .btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    margin-top: 0.75rem;
}
button:hover, .btn:hover { opacity: 0.9; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.error { background: rgba(214,69,69,.15); border: 1px solid var(--error); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem; }
.success { background: rgba(58,163,90,.15); border: 1px solid var(--success); border-radius: 8px; padding: 0.75rem; }

.game-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}
.game-list-item:last-child { border-bottom: none; }

.back { color: var(--muted); text-decoration: none; font-size: 0.85rem; }

.scoreboard {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.banner { text-align: center; }
.banner h3 { margin-top: 0; }

.muted { color: var(--muted); font-size: 0.8rem; }

.card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Each good gets its own accent color so both players can tell goods
   apart at a glance without reading every label -- helpful since
   Diamond/Gold/Silver all default to similar neutral tones otherwise.
   Selector is deliberately specific (div.card.good-X) so it wins over
   the generic .card panel rule above for actual playing-card elements. */
div.card.good-diamond, div.card.good-gold, div.card.good-silver,
div.card.good-cloth, div.card.good-spice, div.card.good-leather, div.card.good-camel {
    width: 72px;
    height: 96px;
    padding: 0.4rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    text-align: center;
    font-size: 0.7rem;
    cursor: pointer;
    user-select: none;
    border-width: 3px;
    transition: transform 0.1s, box-shadow 0.1s;
}
div.card.good-diamond { border-color: var(--good-diamond); }
div.card.good-gold { border-color: var(--good-gold); }
div.card.good-silver { border-color: var(--good-silver); }
div.card.good-cloth { border-color: var(--good-cloth); }
div.card.good-spice { border-color: var(--good-spice); }
div.card.good-leather { border-color: var(--good-leather); }
div.card.good-camel { border-color: var(--good-camel); }
.card-emoji { font-size: 1.6rem; }
.card-label { font-weight: 600; }

.market-card:hover, .hand-card:hover { transform: translateY(-3px); }
.market-card.selected, .hand-card.selected {
    box-shadow: 0 0 0 3px var(--accent);
    transform: translateY(-3px);
}

.opp-info { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; color: var(--muted); font-size: 0.9rem; }
.opp-sep { color: var(--border); }

.herd-row { margin-top: 0.75rem; font-size: 0.9rem; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.herd-row button { margin: 0; padding: 0.1rem 0.5rem; font-size: 0.9rem; }
#herd-offer { display: inline-block; min-width: 1.2rem; text-align: center; color: var(--text); }

/* A herd shown as a compact fanned row of small camel cards -- see
   mini_camel_row_html() in inc/render.php. Overlapping via negative
   margin (fanned-hand look) rather than a plain gapped row, so 11 camels
   don't sprawl across the whole width. */
/* flex-wrap (not the plain single-row flex this used to be) -- a big
   herd/token pile could run past its card's right edge and overflow the
   page on mobile otherwise (reported). row-gap keeps wrapped rows from
   touching; each item is flex-shrink:0 (fixed size, never squished) so
   wrapping is what handles overflow, not distortion. */
.mini-card-row { display: flex; flex-wrap: wrap; row-gap: 4px; }
.mini-card {
    width: 22px;
    height: 30px;
    margin-left: -10px;
    border: 2px solid var(--good-camel);
    border-radius: 4px;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.mini-card:first-child { margin-left: 0; }

/* Same fanned-row look as .mini-card, for a seat's won-tokens pile (see
   token_pile_html() in inc/render.php) -- shows the token's numeric value
   rather than an emoji (unlike camels, tokens don't all look the same;
   the value IS the point of showing them), with a border colored by
   which good it came from. */
.mini-token {
    width: 28px;
    height: 28px;
    margin-left: -10px;
    border: 3px solid var(--border);
    border-radius: 50%;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    /* Black outline outside the good-colored border, so the circle's
       edge reads clearly against the dark page background instead of the
       color blending into it -- box-shadow (not another border layer) so
       it can't collide with the good-X classes' own border-color rules. */
    box-shadow: 0 0 0 1.5px #000;
}
.mini-token:first-child { margin-left: 0; }
.mini-token.good-diamond { border-color: var(--good-diamond); }
.mini-token.good-gold { border-color: var(--good-gold); }
.mini-token.good-silver { border-color: var(--good-silver); }
.mini-token.good-cloth { border-color: var(--good-cloth); }
.mini-token.good-spice { border-color: var(--good-spice); }
.mini-token.good-leather { border-color: var(--good-leather); }
.mini-token.good-camel { border-color: var(--good-camel); }
.mini-token.good-bonus { border-color: var(--bonus-token); color: var(--bonus-token); }
/* Face-down back -- see token_back_html() in inc/render.php. Keeps its
   good's border color (still shown, just not the value) via the SAME
   .good-X class also being on the element -- deliberately does NOT set
   border-color/color here, since doing so would win the cascade tie
   against the earlier .good-X rules (same specificity, later wins) and
   erase that color. Only the background darkens, as a "face down" cue. */
.mini-token.token-back { background: var(--bg); }

.action-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.token-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border);
}
.token-row:last-child { border-bottom: none; }
.good-label { color: var(--text); }
.token-values { color: var(--muted); font-variant-numeric: tabular-nums; }

.log-list { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--muted); max-height: 220px; overflow-y: auto; }
.log-list li { padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.log-list li:last-child { border-bottom: none; }

/* Cloned card flown from its source (a market card, or several for a
   camel sweep) to its destination (hand/herd) before the real server
   re-render lands -- see jpFlyCards() in game.php. position:fixed so the
   captured getBoundingClientRect() (viewport-relative) can be used
   directly as left/top with no scroll-offset math. */
/* transition is deliberately NOT set here -- div.card.good-X's own
   transition rule is more specific and would silently win, discarding
   this one. game.php's/watch.php's jpFlyCards() set it inline instead,
   which always beats any class selector regardless of specificity. */
.flying-card {
    position: fixed;
    margin: 0 !important;
    pointer-events: none;
    z-index: 1000;
}

/* A sold card's clone spins in place and shrinks away -- same
   inline-transition-not-CSS-class reasoning as .flying-card above (see
   jpSpinAwayCards() in game.php/watch.php). */
.spinning-card {
    position: fixed;
    margin: 0 !important;
    pointer-events: none;
    z-index: 1000;
}

/* "+N" badge that hops up and fades where a sale just happened, Mario-coin
   style -- see jpShowCoinPop() in game.php/watch.php. A declarative
   @keyframes animation (not a transition class dance) so the whole
   hop-then-fade arc is one self-contained rule; JS just appends the
   element and listens for 'animationend'. No competing rule exists
   elsewhere for .coin-pop, so no specificity fight like .flying-card had. */
@keyframes coin-pop {
    0%   { opacity: 0; transform: translateY(0) scale(0.7); }
    15%  { opacity: 1; transform: translateY(-10px) scale(1.15); }
    60%  { opacity: 1; transform: translateY(-50px) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.9); }
}
.coin-pop {
    position: fixed;
    z-index: 1001;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    opacity: 0;
    animation: coin-pop 0.9s ease-out forwards;
}

/* Tightened enough that hand + market + opponent (the reordered top 3
   sections, see spice_camel_game_dynamic_html()) fit in one phone
   viewport without scrolling -- kkoechel plays this live on mobile with
   his girlfriend. The single biggest win is card-row going from
   wrap (a 7-card hand can wrap to 2-3 vertical rows) to a horizontal
   scroll strip (always exactly 1 row tall) -- everything else here is
   just trimming padding/margins/font-size around that. */
@media (max-width: 480px) {
    .wrap { margin: 0.4rem auto; padding: 0 0.5rem; }
    h1 { font-size: 1.05rem; margin: 0.2rem 0; }
    .card { padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; }
    .card h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
    .scoreboard { padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.8rem; gap: 0.25rem; }
    /* Squeeze-or-wrap, same approach as the herd/token piles below --
       replaces an earlier horizontal-scroll-strip version (kkoechel:
       "so they don't have to scroll to the side to see it" once a 7th
       hand card showed up). Cards are small enough that a normal 5-7
       card hand/market still fits on one row on most phones; wrap is
       the fallback for whatever doesn't, instead of requiring a
       sideways scroll to see a card at all. */
    .card-row { flex-wrap: wrap; row-gap: 0.35rem; gap: 0.3rem; }
    div.card.good-diamond, div.card.good-gold, div.card.good-silver,
    div.card.good-cloth, div.card.good-spice, div.card.good-leather, div.card.good-camel {
        width: 44px;
        height: 60px;
        padding: 0.2rem;
        flex-shrink: 0;
    }
    .card-emoji { font-size: 0.95rem; }
    .card-label { font-size: 0.55rem; }
    .opp-info { font-size: 0.8rem; gap: 0.75rem; }
    .herd-row, .token-row { margin-top: 0.35rem; font-size: 0.8rem; }
    /* Smaller + tighter overlap than desktop, so a bigger pile fits one
       row before wrap kicks in -- the "squeeze" half of squeeze-or-wrap. */
    .mini-card, .mini-token { width: 20px; height: 26px; margin-left: -12px; font-size: 0.7rem; }
    .mini-token { border-radius: 50%; height: 20px; }
    .action-bar { gap: 0.35rem; }
    .action-bar button { padding: 0.4rem 0.7rem; font-size: 0.85rem; margin-top: 0.35rem; }
    /* 2 columns instead of 1 -- roughly halves the "Tokens remaining"
       card's height (the 6 goods rows are the bulk of it), which is what
       actually gets it into view on the smallest common phone sizes
       without a scroll, on top of the space already saved above. */
    .token-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.75rem; }
    .token-row { margin-top: 0; }
}