/* Connect More - play page: neon arcade four in a row vs practice bots.
   Buttons ARE the craftpix 567216 blank-button art via border-image 9-slice
   (shared with the chessingo / checkerslingo siblings); the board + discs are
   pure CSS so they scale crisp at any size. Palette tokens mirror style.css:
   --sky board blue, --magenta crimson disc (player), --corn gold disc (bot). */

:root {
    --sky: #4da6ff;
    --sky-deep: #1a3a66;
    --lime: #4dffb0;
    --lime-deep: #0e8c56;
    --magenta: #ff4757;
    --magenta-deep: #a3112c;
    --corn: #ffd23f;
    --tangerine: #ff9f1c;
    --berry: #b34fff;
    --text: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.82);
    --card-line: rgba(255, 255, 255, 0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Outfit', 'Segoe UI', sans-serif;
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background-color: #0c0e13;
    background:
        radial-gradient(circle at 100% 15%, rgba(77, 166, 255, 0.20) 0%, transparent 45%),
        radial-gradient(circle at 0% 55%, rgba(255, 71, 87, 0.12) 0%, transparent 42%),
        radial-gradient(circle at 50% 100%, rgba(255, 210, 63, 0.10) 0%, transparent 50%),
        linear-gradient(180deg, #101725 0%, #0c0e17 55%, #08080c 100%);
    background-attachment: fixed;
}

header.play-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.9rem clamp(0.8rem, 3vw, 1.4rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
header.play-head h1.logo {
    font-weight: 400;
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    letter-spacing: 0;
    line-height: 1;
    margin-right: auto;
}
header.play-head h1.logo .wm-a {
    font-family: 'Bungee', 'Arial Black', sans-serif;
    color: var(--sky);
    text-shadow: 0 0 16px rgba(77, 166, 255, 0.5);
}
header.play-head h1.logo .wm-b {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    color: var(--corn);
    text-shadow: 0 0 16px rgba(255, 210, 63, 0.4), 2px 2px 0 var(--magenta);
}
/* Nav links use the real craftpix blue button art (border-image 9-slice). */
header.play-head a {
    position: relative;
    text-decoration: none;
    color: #06202f;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.05rem 0.35rem 0.15rem;
    border-style: solid;
    border-width: 13px 18px 17px 16px;
    border-image-source: url('/img/ui/btnbg-blue.png');
    border-image-slice: 40 48 52 44 fill;
    border-image-repeat: stretch;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
    transition: transform 0.07s ease, filter 0.12s ease;
}
header.play-head a:hover { filter: brightness(1.07) saturate(1.06) drop-shadow(0 4px 7px rgba(0, 0, 0, 0.4)); }
header.play-head a:active { transform: translateY(2px); filter: brightness(0.97) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }

.arena {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem clamp(0.6rem, 3vw, 1.4rem) 2rem;
    max-width: 1180px;
    margin: 0 auto;
}

/* The 1v1 head-to-head bar - YOU vs OPPONENT, avatars facing in, turn/goal
   medallion between them (Golf Clash "PlayerA VS PlayerB" HUD). Full arena
   width, sits above the centered board in every orientation. */
.vs-hud {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(0.4rem, 2vw, 1.2rem);
    width: 100%;
    max-width: 720px;
    padding: 0.5rem clamp(0.5rem, 2vw, 1rem);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 55%),
        rgba(14, 20, 34, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.vs-side {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.6vw, 0.8rem);
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border-radius: 12px;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}
.vs-side.foe { flex-direction: row-reverse; text-align: right; }
/* Active player lights up (whose turn it is). */
.vs-side.active {
    background: linear-gradient(180deg, rgba(255, 210, 63, 0.16) 0%, rgba(255, 210, 63, 0) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.55), 0 0 16px rgba(255, 210, 63, 0.28);
}
.vs-face {
    flex: none;
    width: clamp(40px, 10vw, 56px);
    height: clamp(40px, 10vw, 56px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 50% 60%, #2f7fd6 0%, #1a5aa8 45%, #0f1a2b 100%);
    border: 2px solid rgba(255, 210, 63, 0.5);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 12px currentColor;
}
.vs-side.you .vs-face {
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 50% 60%, #ff7183 0%, #ff4757 42%, #a3112c 100%);
    color: var(--magenta);
    border-color: rgba(255, 71, 87, 0.6);
}
.vs-meta { min-width: 0; }
.vs-name {
    font-weight: 800;
    font-size: clamp(0.9rem, 2.6vw, 1.1rem);
    color: var(--corn);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vs-side.you .vs-name { color: var(--magenta); }
.vs-sub {
    font-size: clamp(0.66rem, 2vw, 0.8rem);
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}
.vs-sub.bot-tier { display: flex; align-items: center; gap: 0.3rem; }
.vs-side.foe .vs-sub.bot-tier { flex-direction: row-reverse; }
.vs-sub.bot-tier::before {
    content: '';
    flex: none;
    width: 1rem;
    height: 1rem;
    background: url('/img/ui/star.png') center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.6));
}
.vs-center { text-align: center; flex: none; }
.vs-medallion {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    font-size: clamp(1rem, 3.4vw, 1.4rem);
    line-height: 1;
    color: var(--corn);
    text-shadow: 0 0 14px rgba(255, 210, 63, 0.55), 2px 2px 0 var(--magenta-deep);
}
.vs-goal {
    font-size: clamp(0.6rem, 1.8vw, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lime);
    margin-top: 0.2rem;
    text-shadow: 0 0 8px rgba(77, 255, 176, 0.4);
    min-height: 0.9em;
}
/* Online per-turn countdown: bigger + gold on your own turn, red-pulsing when
   the clock is running out (auto-forfeit imminent). */
.vs-goal.mine { color: var(--corn); text-shadow: 0 0 10px rgba(255, 210, 63, 0.5); }
.vs-goal.urgent {
    color: var(--magenta);
    font-weight: 800;
    text-shadow: 0 0 12px rgba(255, 71, 87, 0.7);
    animation: clockpulse 0.7s ease-in-out infinite;
}
@keyframes clockpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* The stage: centered board with the control panel alongside (landscape) or
   stacked below (portrait). Board stays in the middle either way. */
.stage {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1.2rem;
    width: 100%;
}
@media (max-width: 780px) { .stage { flex-direction: column; align-items: center; } }

.board-wrap {
    position: relative;
    flex: 1 1 460px;
    padding: 0 8%; /* gutters for the two monkeys */
    max-width: min(100%, calc((100dvh - 160px) * 1.45), 900px); /* board is 84% of this after the monkey gutters */
    margin: 0 auto;
}
@media (max-width: 780px) {
    /* Column flex: flex-basis would set HEIGHT here, so size by width instead. */
    .board-wrap { flex: none; width: 100%; }
}

/* The board: a procedurally generated bamboo lattice (web/js/bamboo.js) sized
   to the live ruleset, so classic 7x6 and every Rogue Run size share one look.
   The grid itself has no gap or padding so the SVG frame's cell lines land
   exactly on the cell boundaries; the margin above leaves room for the cut
   pole tops, which overflow upward. position+z-index make #board its own
   stacking context so the frame layers never fight the overlay. */
#board {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0;
    aspect-ratio: 7 / 6;
    width: 100%;
    margin-top: 6%;
    padding: 0;
    border-radius: 12px;
    background: transparent;
    user-select: none;
}
.bamboo-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.bamboo-back { z-index: 0; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }
.bamboo-front { z-index: 2; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.35)); }
.cell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    cursor: pointer;
}
/* The empty slot - a soft shaded well between the canes. */
.hole {
    width: 76%;
    height: 76%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 42%, rgba(8, 18, 6, 0.22) 0%, rgba(8, 18, 6, 0.42) 100%);
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.45);
}
.cell.col-hover .hole {
    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(255, 210, 63, 0.75);
}

/* Coconut art (--coco-whole / --coco-half / --coco-shade) lives in cosmetics.css,
   which the play page and the shop both load. */
.vs-side .vs-face.coco-whole { background: var(--coco-whole); box-shadow: var(--coco-shade); color: transparent; }
.vs-side .vs-face.coco-half { background: var(--coco-half); box-shadow: var(--coco-shade); color: transparent; }

/* The two sides are coconuts: WHOLE (the side that throws first, internal
   seat 'r' / class crimson) vs HALF (seat 'y' / class gold). Pure CSS so they
   scale to any board size; Locker skins still override via cosmetics.css. */
.disc {
    width: 104%;
    height: 104%;
    border-radius: 50%;
    will-change: transform;
}
.disc.crimson { background: var(--coco-whole); box-shadow: var(--coco-shade); }
.disc.gold { background: var(--coco-half); box-shadow: var(--coco-shade); }
/* Reduced-motion fallback for the throw: a short settle instead of the arc. */
.disc.dropped { animation: drop 0.26s cubic-bezier(0.4, 1.4, 0.6, 1); }
@keyframes drop {
    0% { transform: translateY(-40%); opacity: 0.4; }
    100% { transform: translateY(0); opacity: 1; }
}
/* The winning line pulses. */
.disc.win { animation: winpulse 0.9s ease-in-out infinite; }
@keyframes winpulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 0 16px rgba(255, 255, 255, 0.7); }
    50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 26px rgba(255, 255, 255, 0.95); }
}

/* The two sprite monkeys perched either side of the board (web/js/monkeys.js
   drives the frames). Left = WHOLE coconuts, as drawn (faces right). Right =
   HALF coconuts, mirrored to face the board and tinted golden-tan so the two
   sides read apart at a glance. */
.monkey {
    position: absolute;
    top: 1%;
    z-index: 3;
    width: 12%;
    aspect-ratio: 200 / 188;
    pointer-events: none;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.35));
}
.monkey.left { left: -2%; }
.monkey.right { right: -2%; }
.monkey-sprite {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url('/img/monkey/idle.webp');
    background-size: 1800% 100%;
}
.monkey.right .monkey-sprite {
    transform: scaleX(-1);
    filter: sepia(0.35) saturate(1.5) brightness(1.3) hue-rotate(-8deg);
}
/* Palms the monkeys perch in (built by web/js/monkeys.js). The trunk runs down
   the gutter from the crown to the board's foot; the crown of fronds and
   coconuts sits behind the monkey. Both sit under the board (z 0-1). */
.palm-trunk, .palm-crown { position: absolute; pointer-events: none; }
.palm-trunk {
    z-index: 0;
    top: 9%;
    width: 6%;
    height: 91%; /* explicit: an SVG with height:auto ignores bottom */
    filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.3));
}
.palm-trunk.left { left: 1.5%; }
.palm-trunk.right { right: 1.5%; transform: scaleX(-1); }
.palm-crown {
    z-index: 1;
    top: -6%;
    width: 24%;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.3));
}
.palm-crown.left { left: -8%; }
.palm-crown.right { right: -8%; transform: scaleX(-1); }

/* "Climb" into the tree at match start: rise from below the perch. */
.monkey.climbing { animation: monkey-climb 0.7s cubic-bezier(0.25, 1.4, 0.5, 1); }
@keyframes monkey-climb {
    0% { transform: translateY(160%); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translateY(0); }
}
@media (max-width: 780px) {
    .board-wrap { padding: 0 9%; }
    .monkey { width: 13%; top: 0; }
    .monkey.left { left: -1%; }
    .monkey.right { right: -1%; }
}

/* Game-over overlay */
#overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.8rem;
    background: rgba(10, 12, 20, 0.82);
    border-radius: 18px;
    z-index: 5;
    text-align: center;
    padding: 1rem;
}
#overlay.show { display: flex; }
#overlay h2 { font-family: 'Titan One', 'Arial Black', sans-serif; color: var(--corn); font-size: 1.9rem; letter-spacing: 0.02em; }
#overlay p { color: var(--text-dim); max-width: 320px; }

/* Side panel */
.panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex: 1 1 260px;
    min-width: 240px;
    max-width: 380px;
}
@media (max-width: 780px) { .panel { max-width: none; } }
.card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 55%),
        rgba(18, 24, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    padding: 0.95rem 1.05rem 1.05rem;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -6px 14px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.card h3 {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sky);
    margin-bottom: 0.6rem;
    text-shadow: 0 0 10px rgba(77, 166, 255, 0.5);
}
/* Glossy candy select. */
select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(180deg, #1f3350 0%, #14202f 100%);
    color: var(--text);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Buttons ARE the craftpix blank button art, drawn as a border-image 9-slice
   so the glossy body, rounded corners and baked shadow scale to any label. */
button.btn {
    position: relative;
    display: block;
    width: 100%;
    min-height: 20px;
    padding: 0.2rem 0.7rem 0.35rem;
    border-style: solid;
    border-width: 18px 24px 26px 22px;
    border-image-source: url('/img/ui/btnbg-grey.png');
    border-image-slice: 40 48 52 44 fill;
    border-image-repeat: stretch;
    background: transparent;
    color: #2a1a08;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.98rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.4));
    transition: transform 0.07s ease, filter 0.12s ease;
}
button.btn:hover { filter: brightness(1.07) saturate(1.06) drop-shadow(0 5px 9px rgba(0, 0, 0, 0.45)); }
button.btn:active { transform: translateY(3px); filter: brightness(0.97) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
button.btn + button.btn, button.btn + select, select + button.btn { margin-top: 0.6rem; }

/* Colour variants = swap in the matching kit button PNG. */
button.btn.primary { border-image-source: url('/img/ui/btnbg-gold.png'); color: #2a1600; }
button.btn.danger  { border-image-source: url('/img/ui/btnbg-red.png');  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

/* Per-action kit button colour. */
#play-online        { border-image-source: url('/img/ui/btnbg-blue.png'); color: #06202f; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
#new-game, #rematch { border-image-source: url('/img/ui/btnbg-gold.png'); color: #2a1600; }
#start-run          { border-image-source: url('/img/ui/btnbg-green.png'); color: #06280f; }
#resign             { border-image-source: url('/img/ui/btnbg-red.png');  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

/* Rogue Run HUD (owned relics + active ruleset). */
#run-hud #run-depth { font-weight: 800; color: var(--corn); font-size: 1.02rem; }
#run-hud #run-rules {
    font-size: 0.85rem;
    color: var(--lime);
    margin: 0.15rem 0 0.55rem;
    text-shadow: 0 0 8px rgba(77, 255, 176, 0.4);
}
.relic-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.relic-chip {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--card-line);
    cursor: help;
}
.relic-chip.common { border-color: rgba(255, 255, 255, 0.4); }
.relic-chip.rare   { border-color: var(--sky);  color: var(--sky);  box-shadow: 0 0 8px rgba(77, 166, 255, 0.4); }
.relic-chip.epic   { border-color: var(--berry); color: var(--berry); box-shadow: 0 0 10px rgba(179, 79, 255, 0.5); }
.relic-empty { font-size: 0.8rem; color: var(--text-dim); font-style: italic; }

/* Relic draft overlay - sits over the board like #overlay, shown between
   boss wins in a run. Three tappable relic cards. */
#draft {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    background: rgba(8, 10, 18, 0.9);
    border-radius: 18px;
    z-index: 6;
    padding: 1rem;
}
#draft.show { display: flex; }
#draft #draft-title {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    color: var(--corn);
    font-size: clamp(1.1rem, 3.4vw, 1.5rem);
    text-align: center;
}
#draft-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    width: 100%;
}
.relic-card {
    flex: 1 1 150px;
    max-width: 200px;
    text-align: left;
    padding: 0.7rem 0.8rem 0.8rem;
    border-radius: 14px;
    border: 2px solid var(--card-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 55%),
        rgba(18, 24, 38, 0.85);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}
.relic-card:hover { transform: translateY(-3px); border-color: var(--corn); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
.relic-card.rare  { border-color: var(--sky); }
.relic-card.epic  { border-color: var(--berry); box-shadow: 0 0 14px rgba(179, 79, 255, 0.35); }
.relic-card-name { font-weight: 800; font-size: 1.02rem; color: var(--corn); margin-bottom: 0.15rem; }
.relic-card-from { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 0.4rem; }
.relic-card-blurb { font-size: 0.82rem; color: var(--text-dim); line-height: 1.3; }

#status { font-size: 0.95rem; min-height: 1.4em; }
#status .thinking { color: var(--sky); }
#status .danger { color: var(--magenta); }

/* Lingo feed (trash talk) */
#events {
    max-height: 230px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
}
#events .ev {
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-dim);
}
#events .ev.spicy { border-left: 3px solid var(--magenta); color: var(--text); }
#events .ev-who { color: var(--corn); font-weight: 700; }

/* Live match chat (FEAT-0011) - shown only during an online match. Rival lines
   left, your lines right; one-tap emote buttons above the input. */
#chat-log {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    margin-bottom: 0.55rem;
    min-height: 2rem;
}
.chat-msg {
    align-self: flex-start;
    max-width: 85%;
    padding: 0.3rem 0.55rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.32);
    color: var(--text-dim);
    word-break: break-word;
}
.chat-msg.mine {
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(255, 210, 63, 0.22) 0%, rgba(255, 210, 63, 0.08) 100%);
    color: var(--text);
    border: 1px solid rgba(255, 210, 63, 0.4);
}
.chat-msg.emote { font-weight: 700; color: var(--text); }
.chat-who { color: var(--sky); font-weight: 700; }
.chat-msg.mine .chat-who { color: var(--corn); }

#chat-emotes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.55rem; }
.emote-btn {
    font-family: inherit;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    color: var(--text);
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid var(--card-line);
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: border-color 0.1s ease, background 0.1s ease, transform 0.06s ease;
}
.emote-btn:hover { border-color: var(--corn); background: rgba(255, 210, 63, 0.12); }
.emote-btn:active { transform: translateY(1px); }

#chat-form { display: flex; gap: 0.4rem; align-items: stretch; }
#chat-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(180deg, #1f3350 0%, #14202f 100%);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
}
#chat-input::placeholder { color: rgba(255, 255, 255, 0.5); }
#chat-send {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
    border-width: 14px 18px 18px 16px;
    border-image-source: url('/img/ui/btnbg-blue.png');
    color: #06202f;
    font-size: 0.82rem;
    padding: 0.1rem 0.5rem 0.2rem;
}

/* Rivals card (FEAT-2026-0929-0103, the social moat): the grudge list of real
   opponents this device has met, each with a running W-L record. Green when
   you're up on a rival, crimson when they've got your number, muted when even. */
.rivals-list { display: flex; flex-direction: column; gap: 0.35rem; }
.rival-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(180deg, #1c2d47 0%, #132030 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.rival-name {
    font-size: 0.85rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rival-rec {
    flex: 0 0 auto;
    font-family: 'Bungee', system-ui, sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    padding: 0.05rem 0.5rem 0.1rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
}
.rival-rec.up { color: var(--lime); }
.rival-rec.down { color: var(--magenta); }
.rival-rec.even { color: rgba(255, 255, 255, 0.65); }

/* Layered jungle backdrop (web/js/jungle.js, craftpix art). Fixed behind the
   whole page; each layer is slightly oversized so the pointer parallax never
   shows an edge. Bottom-anchored so ground + foreground sit at the screen floor. */
.jungle {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #b9d98a; /* sky tone, shown until the layers load */
}
.jungle .jl {
    position: absolute;
    inset: -30px -40px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    will-change: transform;
    transition: transform 0.25s ease-out;
}

/* Bananas + Mojo wallet in the Match card (GDD v2 s9 / 6.4). */
.wallet {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 210, 63, 0.35);
    font-size: 0.95rem;
}
.wallet-item b { color: var(--corn); }

/* The pot / Mojo line under the result overlay. */
#overlay-stake { min-height: 1.3em; font-weight: 700; letter-spacing: 0.02em; }
#overlay-stake.gain { color: #7dffb0; }
#overlay-stake.loss { color: #ff8a95; }
#overlay-stake.pending, #overlay-stake.refund, #overlay-stake.even { color: rgba(255, 255, 255, 0.8); }

/* Island select modal. */
#island-select {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 14, 8, 0.72);
    backdrop-filter: blur(4px);
}
#island-select.show { display: flex; }
.isl-panel {
    width: min(1100px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 1.2rem;
    border-radius: 22px;
    background: linear-gradient(180deg, #1d3a24 0%, #12241a 100%);
    border: 2px solid rgba(255, 210, 63, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.isl-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.isl-head h2 { font-family: 'Titan One', 'Arial Black', sans-serif; color: var(--corn); font-size: 1.6rem; }
.isl-close {
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.3);
    color: #fff; font-size: 1.1rem; cursor: pointer;
}
.isl-sub { color: rgba(255, 255, 255, 0.8); margin: 0.3rem 0 1rem; }
#island-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 0.9rem;
}
.isl-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255, 210, 63, 0.4);
    background: #0f1d14;
    color: #fff;
    font: inherit;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.isl-card:hover:not(.locked) { transform: translateY(-3px); border-color: var(--corn); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.isl-card.locked { cursor: not-allowed; filter: grayscale(0.7) brightness(0.75); }
.isl-art {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center bottom;
    background-color: #2d5a2f;
}
.isl-info { padding: 0.7rem 0.85rem 0.85rem; display: flex; flex-direction: column; gap: 0.25rem; }
.isl-name { font-family: 'Titan One', 'Arial Black', sans-serif; font-size: 1.2rem; color: var(--corn); }
.isl-spec { font-weight: 700; }
.isl-rule { font-size: 0.88rem; color: rgba(255, 255, 255, 0.82); }
.isl-soon {
    display: inline-block; padding: 0 0.45rem; border-radius: 999px;
    background: rgba(255, 210, 63, 0.18); color: var(--corn); font-size: 0.72rem; font-weight: 700;
}
.isl-stake { display: flex; align-items: center; gap: 0.35rem; font-weight: 700; }
.isl-banana { width: 1.2em; height: 1.2em; object-fit: contain; display: inline-block; }
.isl-gate { margin-top: 0.2rem; font-weight: 700; color: #ffb36b; }
@media (max-width: 600px) { .isl-art { aspect-ratio: 21 / 9; } }

/* Pre-match rival card (GDD v2 s6.2 step 2): 2s face-off over the board. */
.rival-card {
    position: absolute;
    left: 50%;
    top: 34%;
    z-index: 8;
    width: min(92%, 620px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(29, 58, 36, 0.96), rgba(14, 28, 18, 0.96));
    border: 2px solid var(--corn);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -30px) scale(0.92);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.2s;
    cursor: pointer;
}
.rival-card.in { transform: translate(-50%, 0) scale(1); opacity: 1; }
.rival-card.out { opacity: 0; transform: translate(-50%, -10px) scale(0.96); pointer-events: none; }
.rc-side { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; min-width: 0; }
.rc-coco { width: 54px; height: 54px; border-radius: 50%; }
.rc-coco.coco-whole { background: var(--coco-whole); box-shadow: var(--coco-shade); }
.rc-coco.coco-half { background: var(--coco-half); box-shadow: var(--coco-shade); }
.rc-name { font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-meta { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); }
.rc-mid { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; }
.rc-vs { font-family: 'Titan One', 'Arial Black', sans-serif; font-size: 1.8rem; color: var(--corn); text-shadow: 2px 2px 0 var(--magenta); }
.rc-island { font-weight: 700; }
.rc-pot { font-size: 0.85rem; color: #7dffb0; font-weight: 700; }
.rc-h2h { font-size: 0.9rem; }
.rc-tag { font-size: 0.78rem; font-weight: 800; padding: 0.1rem 0.5rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.25rem; }
.rc-tag.nemesis { background: rgba(255, 71, 87, 0.25); color: #ffb3ba; }
.rc-tag.owned { background: rgba(77, 255, 176, 0.18); color: #7dffb0; }
.rc-tag.owned.them { background: rgba(255, 71, 87, 0.2); color: #ffb3ba; }
.rc-icon { width: 1.1em; height: 1.1em; object-fit: contain; }

/* Shared modal shell (Rival Book, challenge prompt). */
.modal {
    position: fixed; inset: 0; z-index: 50;
    display: none; align-items: center; justify-content: center;
    padding: 16px; background: rgba(6, 14, 8, 0.72); backdrop-filter: blur(4px);
}
.modal.show { display: flex; }
.modal-panel {
    width: min(720px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
    padding: 1.2rem; border-radius: 22px;
    background: linear-gradient(180deg, #1d3a24 0%, #12241a 100%);
    border: 2px solid rgba(255, 210, 63, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
#rival-book-list { display: flex; flex-direction: column; gap: 0.5rem; }
.rb-row {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0.75rem; border-radius: 14px;
    background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.12);
}
.rb-row.nemesis { border-color: rgba(255, 71, 87, 0.7); box-shadow: 0 0 0 1px rgba(255, 71, 87, 0.35) inset; }
.rb-name { font-weight: 800; display: flex; align-items: center; gap: 0.2rem; }
.rb-crown { width: 1.2em; height: 1.2em; object-fit: contain; }
.rb-sub { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }
.rb-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
.rb-tag { font-size: 0.7rem; font-weight: 800; padding: 0.05rem 0.45rem; border-radius: 999px; }
.rb-tag.nemesis, .rb-tag.them { background: rgba(255, 71, 87, 0.22); color: #ffb3ba; }
.rb-tag.owned { background: rgba(77, 255, 176, 0.18); color: #7dffb0; }
.rb-rec { font-family: 'Bungee', system-ui, sans-serif; font-size: 0.95rem; }
.rb-rec.up { color: var(--lime); }
.rb-rec.down { color: var(--magenta); }
.rb-rec.even { color: rgba(255, 255, 255, 0.7); }
.rb-challenge { width: auto; margin: 0; padding: 0.2rem 0.8rem 0.3rem; font-size: 0.8rem; }
.rb-empty { color: rgba(255, 255, 255, 0.75); }
@media (max-width: 520px) {
    .rb-row { grid-template-columns: 1fr auto; }
    .rb-challenge { grid-column: 1 / -1; }
}
.challenge-panel { width: min(420px, 100%); text-align: center; }
.challenge-panel h2 { font-family: 'Titan One', 'Arial Black', sans-serif; color: var(--corn); font-size: 1.8rem; }
.challenge-panel p { margin: 0.6rem 0 1rem; font-size: 1.05rem; }
.challenge-actions { display: flex; gap: 0.6rem; justify-content: center; }
.challenge-actions .btn { width: auto; padding: 0.25rem 1.4rem 0.4rem; }
#open-rival-book { margin-top: 0.6rem; }

/* Expedition / Practice boss in the right-hand palm (GDD v2 s7). Bosses are
   stills, so motion comes from CSS. Facing comes from bots.js `flip`, not the
   rival monkey's mirror + golden tint. */
.monkey.right.boss { width: 17%; top: -5%; right: -4%; }
.monkey.right.boss .monkey-sprite { transform: none; filter: none; transform-origin: 50% 100%; }
.monkey.right.boss.boss-flip .monkey-sprite { transform: scaleX(-1); }
.monkey.boss.boss-idle .monkey-sprite { animation: boss-bob 2.4s ease-in-out infinite; }
.monkey.boss.boss-throw .monkey-sprite { animation: boss-throw 0.6s ease-out; }
.monkey.boss.boss-win .monkey-sprite { animation: boss-win 0.55s ease-in-out infinite alternate; }
.monkey.boss.boss-ko .monkey-sprite { animation: boss-ko 0.5s ease-out forwards; }
.monkey.boss.boss-flip.boss-idle .monkey-sprite { animation-name: boss-bob-flip; }
.monkey.boss.boss-flip.boss-throw .monkey-sprite { animation-name: boss-throw-flip; }
.monkey.boss.boss-flip.boss-win .monkey-sprite { animation-name: boss-win-flip; }
.monkey.boss.boss-flip.boss-ko .monkey-sprite { animation-name: boss-ko-flip; }
@keyframes boss-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes boss-bob-flip { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-4%); } }
@keyframes boss-throw { 0% { transform: rotate(0); } 35% { transform: rotate(10deg) scale(1.05); } 70% { transform: rotate(-12deg); } 100% { transform: rotate(0); } }
@keyframes boss-throw-flip { 0% { transform: scaleX(-1) rotate(0); } 35% { transform: scaleX(-1) rotate(-10deg) scale(1.05); } 70% { transform: scaleX(-1) rotate(12deg); } 100% { transform: scaleX(-1) rotate(0); } }
@keyframes boss-win { from { transform: translateY(0) scale(1); } to { transform: translateY(-12%) scale(1.04); } }
@keyframes boss-win-flip { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-12%) scale(1.04); } }
@keyframes boss-ko { 0% { transform: rotate(0); } 40% { transform: rotate(-14deg) translateY(4%); } 100% { transform: rotate(-6deg) translateY(8%); } }
@keyframes boss-ko-flip { 0% { transform: scaleX(-1) rotate(0); } 40% { transform: scaleX(-1) rotate(-14deg) translateY(4%); } 100% { transform: scaleX(-1) rotate(-6deg) translateY(8%); } }
@media (max-width: 780px) { .monkey.right.boss { width: 18%; top: -6%; right: -3%; } }

/* Boss intro card (GDD v2 s7): portrait, name, signature, stage, charms. */
.boss-card .bc-portrait { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.boss-card .bc-stage { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; color: #7dffb0; text-transform: uppercase; }
.boss-card .bc-name { font-family: 'Titan One', 'Arial Black', sans-serif; font-size: 1.5rem; color: var(--corn); text-shadow: 2px 2px 0 var(--magenta); }
.boss-card .bc-line { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
.boss-card .bc-charms { display: flex; gap: 0.3rem; justify-content: center; flex-wrap: wrap; margin-top: 0.2rem; }
.boss-card .bc-charms img { width: 30px; height: 30px; object-fit: contain; }
.rival-card.boss-card { grid-template-columns: auto 1fr; text-align: left; }
.boss-card .bc-info { display: flex; flex-direction: column; gap: 0.15rem; }

/* Charm icons in the draft and the run HUD. */
.relic-card-icon { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 0.3rem; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); }
.relic-chip img { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 0.25rem; }

/* Island backdrop over the craftpix layers (GDD v2 6.1 / 7). */
.jungle .jl-island { opacity: 0; transition: opacity 0.6s ease, transform 0.25s ease-out; inset: -20px -30px; }
.jungle .jl-island.show { opacity: 1; }

/* Coconut crate slots (GDD v2 s9). */
.crates { margin-bottom: 0.6rem; }
.crate-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.crate-slot {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
    aspect-ratio: 1; padding: 0.2rem; border-radius: 12px; cursor: pointer;
    background: rgba(0, 0, 0, 0.28); border: 1.5px solid rgba(255, 255, 255, 0.14);
    color: #fff; font: inherit;
}
.crate-slot.empty { cursor: default; border-style: dashed; opacity: 0.55; }
.crate-slot:disabled { cursor: default; }
.crate-slot .crate-img { width: 70%; height: 55%; object-fit: contain; font-size: 1.4rem; text-align: center; }
.crate-slot .crate-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.crate-slot.empty .crate-label { font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.crate-slot.ripening { border-color: rgba(255, 210, 63, 0.6); }
.crate-slot.ripe { border-color: #7dffb0; box-shadow: 0 0 12px rgba(125, 255, 176, 0.5); animation: crate-ripe 0.9s ease-in-out infinite alternate; }
.crate-slot.ripe .crate-label { color: #7dffb0; }
.crate-slot.r-golden { background: rgba(255, 210, 63, 0.12); }
.crate-slot.r-legendary { background: rgba(77, 255, 176, 0.12); }
@keyframes crate-ripe { to { transform: translateY(-2px) scale(1.04); } }
.crate-burst {
    position: absolute; left: 50%; top: 30%; z-index: 9;
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 1rem 1.6rem 1.2rem; border-radius: 22px;
    background: radial-gradient(circle at 50% 40%, rgba(255, 210, 63, 0.35), rgba(14, 28, 18, 0.95) 70%);
    border: 2px solid var(--corn); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, 10px) scale(0.85); opacity: 0;
    transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.2s; cursor: pointer;
}
.crate-burst.in { transform: translate(-50%, 0) scale(1); opacity: 1; }
.crate-burst.out { opacity: 0; }
.crate-burst img { width: 160px; height: 160px; object-fit: contain; }
.crate-burst .cb-title { font-family: 'Titan One', 'Arial Black', sans-serif; color: var(--corn); font-size: 1.3rem; }
.crate-burst .cb-amount { font-weight: 800; font-size: 1.2rem; color: #7dffb0; }
.wallet-icon { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -0.3em; }
.rb-tag-icon { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: -0.35em; }

/* Trash talk speech bubbles from the palms (GDD v2 section 4). */
.say-bubble {
    position: absolute; top: 15%; z-index: 7; max-width: min(46%, 300px);
    padding: 0.55rem 0.8rem; border-radius: 16px;
    background: #fffdf3; color: #2b1a08; font-weight: 700; font-size: 0.92rem; line-height: 1.3;
    border: 2.5px solid #3b2408; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    opacity: 0; transform: translateY(8px) scale(0.9); cursor: pointer;
    transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.say-bubble.in { opacity: 1; transform: none; }
.say-bubble.out { opacity: 0; transform: translateY(-6px); }
.say-bubble.right { right: 13%; border-top-right-radius: 4px; }
.say-bubble.left { left: 13%; border-top-left-radius: 4px; }
.say-bubble.spicy { background: #fff1f2; border-color: #a3112c; color: #7a0c1f; }
.say-bubble::after {
    content: ''; position: absolute; top: -10px; width: 16px; height: 16px;
    background: inherit; border: inherit; border-width: 2.5px 0 0 2.5px; transform: rotate(45deg);
}
.say-bubble.right::after { right: 14px; transform: rotate(80deg); }
.say-bubble.left::after { left: 14px; transform: rotate(10deg); }
@media (max-width: 780px) { .say-bubble { top: 10%; font-size: 0.8rem; max-width: 60%; } }

/* First-game how-to-play (GDD v2 s10d). */
.howto {
    position: absolute; left: 50%; top: 50%; z-index: 12;
    width: min(92%, 420px); transform: translate(-50%, -50%);
    padding: 1.1rem 1.3rem 1.2rem; border-radius: 22px; text-align: center;
    background: linear-gradient(180deg, rgba(29, 58, 36, 0.97), rgba(14, 28, 18, 0.97));
    border: 2px solid var(--corn); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.ht-step { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; color: #7dffb0; }
.ht-title { font-family: 'Titan One', 'Arial Black', sans-serif; color: var(--corn); font-size: 1.5rem; margin: 0.4rem 0 0.3rem; }
.ht-text { color: rgba(255, 255, 255, 0.88); line-height: 1.45; margin-bottom: 1rem; }
.ht-row, .ht-cocos { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0.2rem; }
.ht-cocos { flex-direction: column; gap: 0.1rem; }
.ht-arrow { color: var(--corn); font-size: 1.6rem; line-height: 1; }
.ht-coco { width: 44px; height: 44px; border-radius: 50%; display: inline-block; }
.ht-coco.coco-whole { background: var(--coco-whole); box-shadow: var(--coco-shade); }
.ht-row img { width: 56px; height: 56px; object-fit: contain; }
.ht-actions { display: flex; gap: 0.6rem; justify-content: center; }
.ht-actions .btn { width: auto; margin: 0; padding: 0.25rem 1.3rem 0.4rem; }

/* Mobile play pass (GDD v2 s10d): one-handed on a phone. */
.say-bubble { pointer-events: none; } /* a bubble must never swallow a throw */
main.arena { overflow-x: clip; }       /* palm crowns may overhang, the page never scrolls sideways */
@media (max-width: 780px) {
    header.play-head { gap: 0.3rem; padding: 0.5rem 0.6rem; flex-wrap: nowrap; }
    header.play-head h1.logo { font-size: 1.05rem; flex: none; }
    header.play-head a { flex: none; }
    header.play-head a {
        border: 0; border-image: none; padding: 0.35rem 0.55rem; border-radius: 999px;
        background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 0.6rem; white-space: nowrap; letter-spacing: 0;
        min-height: 32px; display: inline-flex; align-items: center;
    }
    .palm-crown.left { left: -3%; }
    .palm-crown.right { right: -3%; }
    .board-wrap { padding: 0 7%; }
    .vs-side .vs-sub { display: none; }            /* names over taglines on a phone */
    .vs-name { font-size: 0.8rem; }
    .vs-goal { font-size: 0.62rem; white-space: normal; line-height: 1.1; text-align: center; }
    .vs-hud { grid-template-columns: minmax(0, 1fr) minmax(0, 6.5rem) minmax(0, 1fr); gap: 0.3rem; padding: 0.4rem; }
    .vs-center { min-width: 0; }
    .vs-medallion { font-size: 0.95rem; }
    .vs-side { padding: 0.25rem 0.3rem; gap: 0.35rem; }
    .vs-face { width: 34px; height: 34px; }
}

/* Player's own Game chat setting (GDD v2 s10d): off hides every chat surface. */
html[data-nochat] #chat-card, html[data-nochat] [data-flag="chat"], html[data-nochat] .say-bubble { display: none !important; }
.chat-pref { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0.2rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; color: rgba(255, 255, 255, 0.85); }
.chat-pref input { width: 18px; height: 18px; accent-color: #7dffb0; }

/* Monkey sticker emotes (GDD v2 s6.2). */
#chat-emotes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3rem; }
.emote-btn.sticker-btn { padding: 0.15rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.emote-btn.sticker-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.emote-btn.sticker-btn.sent { opacity: 0.45; }
.say-bubble.sticker { padding: 0.2rem; background: transparent; border: 0; box-shadow: none; }
.say-bubble.sticker::after { display: none; }
.say-bubble.sticker img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); display: block; }
@media (max-width: 780px) { .say-bubble.sticker img { width: 72px; height: 72px; } }

/* Island rules (GDD v2 s6.1): rule badge over the board + Monsoon splash. */
.rule-badge {
    position: absolute; left: 50%; bottom: -1.9rem; transform: translateX(-50%); z-index: 6;
    padding: 0.25rem 0.8rem; border-radius: 999px; white-space: nowrap;
    background: rgba(10, 30, 18, 0.85); border: 1.5px solid rgba(125, 255, 176, 0.6);
    color: #c8ffe0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em;
}
.monsoon-flash {
    position: absolute; left: 50%; top: 8%; transform: translateX(-50%); z-index: 9;
    padding: 0.5rem 1.1rem; border-radius: 14px; pointer-events: none;
    background: rgba(20, 70, 110, 0.92); border: 2px solid #8fd8ff; color: #fff;
    font-family: 'Titan One', 'Arial Black', sans-serif; font-size: 1rem; white-space: nowrap;
    animation: monsoon-in 1.8s ease-out forwards;
}
@keyframes monsoon-in { 0% { opacity: 0; transform: translate(-50%, -12px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@media (max-width: 780px) { .rule-badge { font-size: 0.68rem; bottom: -1.7rem; } .monsoon-flash { font-size: 0.8rem; } }

/* Durian Bomb (GDD v2 s7). */
.disc.durian {
    background:
        radial-gradient(circle at 40% 34%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 26%),
        repeating-conic-gradient(from 0deg at 50% 50%, #3f7d16 0deg 10deg, #8fd43b 10deg 20deg),
        radial-gradient(circle, #a6d84a, #3b6f12);
    box-shadow: 0 0 0 2px #2c5410, 0 0 14px rgba(160, 230, 60, 0.7);
    filter: none !important;
}
.power-btn {
    position: absolute; right: 9%; bottom: -2.1rem; z-index: 6;
    padding: 0.3rem 0.9rem; border-radius: 999px; cursor: pointer;
    background: linear-gradient(180deg, #8fd43b, #3f7d16); color: #102a04;
    border: 2px solid #2c5410; font-weight: 900; font-size: 0.82rem; letter-spacing: 0.04em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.power-btn.armed { box-shadow: 0 0 0 3px #a6d84a, 0 0 18px rgba(166, 216, 74, 0.8); animation: crate-ripe 0.6s ease-in-out infinite alternate; }
.power-btn:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 780px) { .power-btn { right: 4%; bottom: -1.9rem; font-size: 0.7rem; } }
.monsoon-flash.boom { background: rgba(110, 50, 10, 0.92); border-color: #ffb347; }

/* A member's face (GDD v2 s3b): their avatar in the VS bar and on the rival card. */
.vs-side .vs-face.has-avatar { background-size: cover; background-position: center; background-color: #1d3a24; }
.vs-side.foe .vs-face.has-avatar.coco-whole { border-color: #a8743f; }
.vs-side.foe .vs-face.has-avatar.coco-half { border-color: #efe4c6; }
.rc-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--corn); background: #1d3a24; }

/* ---- Your face (GDD 3c item 4): the game center's builder in a modal ---- */
.face-panel { --pp-brand: #1f6b34; max-width: 460px; }
#face-builder { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin: 0.6rem 0; }
#face-builder .tz-face { width: min(180px, 46vw); aspect-ratio: 1; background: var(--pp-tile); }
#face-builder .tz-face svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
#face-builder .tz-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; width: 100%; }
#face-builder .tz-strip { display: grid; grid-template-columns: repeat(auto-fill, 44px); grid-auto-rows: 44px; gap: 12px; justify-content: center;
  width: 100%; max-height: 150px; overflow-y: auto; padding: 4px; }
#face-builder > :not(.tz-face):not(.tz-tabs):not(.tz-strip) { display: flex; flex-wrap: wrap; justify-content: center; }
.face-actions { display: flex; gap: 0.6rem; justify-content: center; }
.face-msg { min-height: 1.2em; text-align: center; margin: 0.4rem 0 0; }
/* The v0.1.0 SDK colours its stock face; grey it until the next tag. */
.vs-face.face-placeholder { filter: saturate(0); }
.vs-face.has-avatar { image-rendering: pixelated; }
.join-tz { display: block; text-align: center; margin-top: 0.5rem; font-size: 0.9rem; color: var(--corn); }

/* ── ONE TABLE ON EVERY GAME SCREEN (GDD 6.5, chessingo s1.2) ──
   The board in the middle, a seat either side: YOU left by your monkey's palm,
   the opponent right by theirs. Each seat is a big face, a name and a line;
   everything else sits under the seats, never between a player and the board.
   On a phone it stacks the way you sit at it: opponent, board, you, the rest. */
.arena.arena-table {
    display: grid;
    grid-template-columns: minmax(210px, 270px) minmax(0, 1fr) minmax(210px, 270px);
    align-items: start;
    gap: clamp(0.8rem, 1.6vw, 1.4rem);
    max-width: 1560px;
}
.arena-table .rail { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.arena-table .table-centre { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 0; }
.arena-table .board-wrap { flex: none; width: 100%; }
.arena-table .vs-center {
    padding: 0.35rem 1.4rem 0.45rem;
    border-radius: 999px;
    background: rgba(14, 20, 34, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.seat.vs-side, .seat.vs-side.foe {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0.8rem 0.9rem 1rem;
    border-radius: 18px;
}
.seat .rail-cap {
    align-self: stretch;
    text-align: left;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.seat.foe .rail-cap { text-align: right; }
.seat .vs-face {
    width: clamp(110px, 12vw, 168px);
    height: clamp(110px, 12vw, 168px);
    border-width: 4px;
    font-size: clamp(2.6rem, 5vw, 4rem);
}
.seat .vs-meta { width: 100%; }
.seat .vs-name { font-size: clamp(1.1rem, 1.6vw, 1.45rem); }
.seat .vs-sub { white-space: normal; }
.seat.foe .vs-sub.bot-tier { flex-direction: row; justify-content: center; }
.seat .vs-sub.bot-tier { justify-content: center; }

@media (max-width: 900px) {
    .arena.arena-table { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
    .arena-table .rail { display: contents; }
    .arena-table .rail > * { order: 5; }
    .arena-table .seat.foe { order: 1; }
    .arena-table .table-centre { order: 2; }
    .arena-table .seat.you { order: 3; }
    .seat.vs-side, .seat.vs-side.foe {
        flex-direction: row;
        text-align: left;
        padding: 0.45rem 0.7rem;
        gap: 0.7rem;
    }
    .seat .rail-cap { display: none; }
    .seat .vs-face { width: 52px; height: 52px; border-width: 2px; font-size: 1.6rem; }
    .seat .vs-sub.bot-tier, .seat.foe .vs-sub.bot-tier { justify-content: flex-start; }
    .seat .vs-sub { white-space: nowrap; }
}

/* ── THE COCONUT WORLD (GDD 6.6): where you find a rival, over the board ── */
.coconut-world {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 45%, rgba(10, 34, 20, 0.55) 0%, rgba(6, 18, 11, 0.9) 70%);
}
.coconut-world[hidden] { display: none; }
.coconut-stage { width: min(72%, 440px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.coconut-canvas {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(255, 210, 63, 0.18));
}
.coconut-cap {
    margin: 0;
    font-family: 'Titan One', 'Arial Black', sans-serif;
    font-size: clamp(1rem, 2.4vw, 1.4rem);
    color: var(--corn);
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 210, 63, 0.4);
}
.coconut-cap small { display: block; font-family: 'Outfit', sans-serif; font-size: 0.8rem; color: var(--text-dim); text-shadow: none; }

/* ── SEAT ART CARDS (GDD 6.5): the island's painted card is the art, the
   player stands large in front of it, a name banner below. Hi-res art at
   full size, never a thumbnail on a panel. ── */
:root { --seat-card: url('https://prodmedia.tyga.host/public/tyga.cloud/landing/connectmore.online/game/island_banana-beach_card.jpg'); }
.seat.vs-side, .seat.vs-side.foe {
    padding: 0;
    gap: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 3px solid rgba(255, 210, 63, 0.45);
    background: linear-gradient(180deg, #17361f 0%, #0d2215 100%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.seat.vs-side.active {
    border-color: var(--corn);
    box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.35), 0 0 32px rgba(255, 210, 63, 0.45), 0 14px 30px rgba(0, 0, 0, 0.45);
}
.seat .rail-cap {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 10px;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(8, 20, 12, 0.72);
    font-size: 0.68rem;
}
.seat.foe .rail-cap { left: auto; right: 10px; }
.seat-art {
    position: relative;
    width: 100%;
    aspect-ratio: 10 / 11;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--seat-card) center / cover no-repeat;
}
.seat-art::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 34%;
    background: linear-gradient(180deg, rgba(23, 54, 31, 0) 0%, #17361f 100%);
    pointer-events: none;
}
.seat .seat-art .vs-face {
    position: relative;
    z-index: 1;
    margin-bottom: 9%;
    width: 62%;
    height: auto;
    aspect-ratio: 1;
    font-size: clamp(2.6rem, 5vw, 4rem);
}
/* A painted boss portrait: big, bottom-anchored, no frame. */
.seat .seat-art .vs-face.portrait {
    width: 96%;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    image-rendering: auto;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
    z-index: 2;
}
/* A game-center face: framed like a painted portrait. */
.seat .seat-art .vs-face.has-avatar:not(.portrait) {
    width: 66%;
    border-radius: 18px;
    border: 5px solid #f3e6c4;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.seat .vs-meta { position: relative; z-index: 2; padding: 0.2rem 0.8rem 0.9rem; }
.seat .vs-name {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    font-weight: 400;
    font-size: clamp(1.15rem, 1.7vw, 1.55rem);
    letter-spacing: 0.01em;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.seat-troop {
    position: absolute;
    z-index: 3;
    left: 8px;
    bottom: 8px;
    width: 58px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('https://prodmedia.tyga.host/public/tyga.cloud/landing/connectmore.online/game/icon_troop_shield.png') center / contain no-repeat;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
.seat-troop[hidden], .seat-pass[hidden] { display: none; }
.seat-troop span {
    max-width: 70%;
    margin-top: -4px;
    font: 800 0.62rem/1 'Outfit', sans-serif;
    color: #5a3417;
    text-align: center;
    overflow-wrap: anywhere;
}
.seat.foe .seat-troop { left: auto; right: 8px; }
.seat-pass {
    position: absolute;
    z-index: 3;
    right: 8px;
    bottom: 8px;
    width: 60px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

@media (max-width: 900px) {
    .seat .seat-art {
        flex: none;
        width: 72px;
        aspect-ratio: 1;
        border-radius: 14px;
        overflow: hidden;
        margin: 0.4rem 0 0.4rem 0.4rem;
    }
    .seat-art::after { display: none; }
    .seat .seat-art .vs-face, .seat .seat-art .vs-face.has-avatar:not(.portrait) { width: 80%; margin-bottom: 10%; border-width: 2px; border-radius: 10px; font-size: 1.6rem; }
    .seat .seat-art .vs-face.portrait { width: 100%; margin-bottom: 0; }
    .seat-troop { width: 26px; height: 28px; left: 2px; bottom: 2px; }
    .seat-troop span { display: none; }
    .seat-pass { width: 26px; right: 2px; bottom: 2px; }
    .seat .vs-meta { padding: 0.3rem 0.6rem 0.3rem 0; }
    .seat.vs-side, .seat.vs-side.foe { gap: 0.8rem; }
}

/* The VS card at kickoff (GDD 6.5): the island painting across the card, both
   faces big either side of VS. */
.rival-card {
    width: min(94%, 720px);
    top: 22%;
    padding: 1.3rem 1.2rem 1.1rem;
    border: 3px solid var(--corn);
    background:
        linear-gradient(180deg, rgba(10, 26, 16, 0.25) 0%, rgba(10, 26, 16, 0.55) 45%, rgba(10, 26, 16, 0.94) 100%),
        var(--seat-card) center / cover no-repeat;
    box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.25), 0 24px 50px rgba(0, 0, 0, 0.6);
}
.rival-card .rc-avatar {
    width: clamp(96px, 13vw, 150px);
    height: clamp(96px, 13vw, 150px);
    border-radius: 18px;
    border: 5px solid #f3e6c4;
    image-rendering: pixelated;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}
.rival-card .rc-coco { width: clamp(84px, 11vw, 128px); height: clamp(84px, 11vw, 128px); }
.rival-card .rc-name { font-family: 'Titan One', 'Arial Black', sans-serif; font-weight: 400; font-size: clamp(1rem, 2vw, 1.35rem); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.rival-card .rc-vs { font-size: clamp(2.2rem, 5vw, 3.4rem); }
@media (max-width: 520px) {
    .rival-card { top: 14%; padding: 0.9rem 0.6rem; }
    .rival-card .rc-avatar { width: 76px; height: 76px; border-width: 3px; border-radius: 12px; }
    .rival-card .rc-coco { width: 70px; height: 70px; }
}