/* ============================================================
   Botanical - all styling.
   ============================================================ */

:root {
    --grass: #4a8b3d;
    --grass-dark: #2f5e26;
    --grass-light: #7bb86b;
    --sky: #b9dff0;
    --soil: #6b4a2b;
    --cream: #f8f1da;
    --panel: rgba(248, 241, 218, 0.95);
    --panel-dark: rgba(50, 70, 40, 0.85);
    --accent: #d36b3f;
    --accent-2: #c84f86;
    --shade-green: #2e7d32;
    --text-dark: #2a3a22;
    --text-light: #f8f1da;
    --cell: 48px;      /* world-space size of one grid cell at zoom 1 */
    --shadow-card: 0 3px 6px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.1);
    --border-card: 1.5px solid rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Quicksand', system-ui, -apple-system, Segoe UI, sans-serif;
    color: var(--text-dark);
    background: #0f1a0a;
    overflow: hidden;
}

button { font-family: inherit; cursor: pointer; }

.hidden { display: none !important; }

.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: flex; }

/* ============================================================
   MAIN MENU
   ============================================================ */

#menu-screen {
    background:
        radial-gradient(1200px 600px at 50% 110%, rgba(255,255,255,0.05), transparent 60%),
        linear-gradient(180deg, #94c6e5 0%, #b3dca5 60%, #5a8b3a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-bg {
    position: absolute; inset: 0; overflow: hidden;
}

/* Pixel-grass band along the bottom. SVG via CSS background. */
.pixel-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 35%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect width='32' height='32' fill='%234a8b3d'/><rect x='0' y='0' width='4' height='4' fill='%237bb86b'/><rect x='8' y='4' width='4' height='4' fill='%237bb86b'/><rect x='16' y='0' width='4' height='4' fill='%23a4d68f'/><rect x='24' y='4' width='4' height='4' fill='%237bb86b'/><rect x='4' y='12' width='4' height='4' fill='%232f5e26'/><rect x='12' y='8' width='4' height='4' fill='%23a4d68f'/><rect x='20' y='12' width='4' height='4' fill='%232f5e26'/><rect x='28' y='8' width='4' height='4' fill='%237bb86b'/><rect x='0' y='20' width='4' height='4' fill='%232f5e26'/><rect x='8' y='24' width='4' height='4' fill='%237bb86b'/><rect x='16' y='20' width='4' height='4' fill='%232f5e26'/><rect x='24' y='24' width='4' height='4' fill='%237bb86b'/></svg>");
    background-size: 64px 64px;
    image-rendering: pixelated;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2) inset;
}

.floating-flowers {
    position: absolute; inset: 0;
    pointer-events: none;
}
.floating-flowers .fl {
    position: absolute;
    font-size: 28px;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0,0,0,0.25);
    animation: floatY 6s ease-in-out infinite alternate;
}
@keyframes floatY {
    from { transform: translateY(0) rotate(-3deg); }
    to   { transform: translateY(-14px) rotate(3deg); }
}

.menu-content {
    position: relative; z-index: 1;
    text-align: center;
    padding: 28px 40px;
}

.game-title {
    font-family: 'Caveat', cursive;
    font-size: clamp(80px, 16vw, 220px);
    margin: 0;
    line-height: 1;
    color: #f6e8b2;
    text-shadow:
        0 4px 0 #6b4a2b,
        0 6px 14px rgba(0,0,0,0.35),
        0 0 30px rgba(255, 230, 120, 0.4);
    letter-spacing: 2px;
    transform: rotate(-2deg);
}

.game-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(18px, 2vw, 28px);
    color: var(--text-light);
    margin-top: -8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.menu-buttons {
    margin-top: 28px;
    display: flex; flex-direction: column;
    gap: 14px;
    align-items: center;
}

.menu-footer {
    margin-top: 22px;
    color: rgba(255,255,255,0.95);
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Buttons */
.btn {
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 18px;
    font-weight: 700;
    color: #2a3a22;
    background: linear-gradient(180deg, #fff4c5 0%, #f3d77a 60%, #c9a13d 100%);
    box-shadow:
        0 3px 0 #6b4a2b,
        0 4px 10px rgba(0,0,0,0.25);
    transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #6b4a2b, 0 1px 4px rgba(0,0,0,0.25); }
.btn:disabled { filter: grayscale(.4) brightness(.85); cursor: not-allowed; }

.btn-primary { min-width: 270px; }
.btn-secondary {
    background: linear-gradient(180deg, #d9efd1 0%, #8cbd76 60%, #4a8b3d 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    min-width: 270px;
}
.btn-link {
    background: transparent;
    color: var(--text-light);
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
    padding: 6px 8px;
}
.btn-small {
    padding: 6px 12px;
    font-size: 14px;
    background: linear-gradient(180deg, #fff4c5 0%, #f3d77a 60%, #c9a13d 100%);
}
.btn-count {
    width: 80px; height: 80px;
    font-size: 28px;
    border-radius: 50%;
}

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    padding: 20px;
}
.modal-overlay.opaque {
    background: linear-gradient(180deg, #1a2a14 0%, #0d160a 100%);
}

.modal {
    background: var(--panel);
    border-radius: 18px;
    border: 3px solid #6b4a2b;
    padding: 24px 28px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    max-height: 90vh; overflow-y: auto;
}
.modal.wide { max-width: 820px; }
.modal-floral {
    position: relative;
    background-image:
        radial-gradient(circle at 12% 4%, rgba(255, 180, 70, 0.18) 0 6%, transparent 7%),
        radial-gradient(circle at 88% 4%, rgba(255, 80, 130, 0.18) 0 6%, transparent 7%),
        radial-gradient(circle at 8% 96%, rgba(100, 160, 70, 0.2) 0 8%, transparent 9%),
        radial-gradient(circle at 92% 96%, rgba(200, 120, 200, 0.18) 0 6%, transparent 7%),
        var(--panel);
}
.modal h2 {
    font-family: 'Caveat', cursive;
    font-size: 44px; margin: 0 0 8px 0;
    color: #2f5e26;
    text-align: center;
}
.modal h3 { margin: 16px 0 6px; color: #2f5e26; font-family: 'Cormorant Garamond', serif; }
.modal p, .modal li { line-height: 1.45; }
.modal-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.btn-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', sans-serif;
}

.end-board-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(20, 35, 15, 0.92);
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: #f3e4cd;
}
.end-board-bar.hidden { display: none; }
.end-board-bar-text {
    font-size: 14px;
    white-space: nowrap;
}

#game-screen.end-board-view #topbar,
#game-screen.end-board-view .hand-panel,
#game-screen.end-board-view #draw-choices,
#game-screen.end-board-view #rotate-hint,
#game-screen.end-board-view #score-preview {
    display: none !important;
}
.howto-body { font-size: 15.5px; }

.player-count-buttons {
    display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
    margin: 18px 0 8px;
}

/* ============================================================
   GAME SCREEN LAYOUT
   ============================================================ */

#game-screen {
    background:
        radial-gradient(900px 500px at 50% 40%, #8fbf6d 0%, #5a8b3a 60%, #2f5e26 100%);
    flex-direction: column;
}

#topbar {
    min-height: 60px;
    display: flex; align-items: center;
    padding: 6px 12px;
    gap: 12px;
    background: rgba(20, 35, 15, 0.85);
    color: var(--text-light);
    border-bottom: 2px solid rgba(0,0,0,0.4);
    z-index: 10;
    flex-wrap: wrap;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-center {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
}
#scoreboard {
    display: flex; gap: 10px;
    justify-content: center; flex-wrap: wrap;
}
#grade-band {
    font-size: 12px;
    color: #f0e4b8;
    opacity: 0.9;
    text-align: center;
    line-height: 1.2;
    max-width: 90vw;
}
#grade-band .gb-target {
    margin: 0 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 1px 6px;
    display: inline-block;
    white-space: nowrap;
}
#grade-band .gb-target strong { color: #ffe188; }

/* Final score grade letter */
.grade-letter {
    display: inline-block;
    font-family: 'Caveat', cursive;
    font-size: 88px;
    line-height: 1;
    padding: 2px 22px;
    border-radius: 16px;
    border: 3px solid #6b4a2b;
    background: linear-gradient(180deg, #fff4c5, #ffd24a);
    color: #6b4a2b;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.grade-letter.grade-Aplus,
.grade-letter.grade-A,
.grade-letter.grade-Aminus {
    background: linear-gradient(180deg, #fff8c2, #ffd24a 50%, #f4a200);
    color: #5a3f0b;
}
.grade-letter.grade-Bplus,
.grade-letter.grade-B,
.grade-letter.grade-Bminus {
    background: linear-gradient(180deg, #e8efd0, #a4c376 60%, #5d8a3a);
    color: #2a4012;
}
.grade-letter.grade-Cplus,
.grade-letter.grade-C,
.grade-letter.grade-Cminus {
    background: linear-gradient(180deg, #ecd9b8, #c39966 60%, #8d6a3b);
    color: #3a2410;
}
.grade-letter.grade-D {
    background: linear-gradient(180deg, #e2cdb1, #b08660 60%, #6b4626);
    color: #2a190a;
}
.grade-letter.grade-F {
    background: linear-gradient(180deg, #d8c0a0, #936143 60%, #4d2c14);
    color: #f3e4cd;
}

/* Grade ladder table inside How to Play */
.grade-table {
    margin: 12px auto;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    overflow: hidden;
}
.grade-table th, .grade-table td {
    padding: 6px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 14px;
}
.grade-table th {
    background: rgba(0, 0, 0, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.grade-table .g-tier {
    font-weight: bold;
    min-width: 56px;
    color: #fff;
}
.grade-table .g-aplus  { background: linear-gradient(180deg, #fff8c2, #f4a200); color: #5a3f0b; }
.grade-table .g-a      { background: linear-gradient(180deg, #fff5b5, #e0c244); color: #5a3f0b; }
.grade-table .g-aminus { background: linear-gradient(180deg, #fff0a0, #d0a040); color: #5a3f0b; }
.grade-table .g-bplus  { background: linear-gradient(180deg, #d8e8b8, #6a983c); color: #1f2f10; }
.grade-table .g-b      { background: linear-gradient(180deg, #cbe0a8, #5a8a32); color: #1f2f10; }
.grade-table .g-bminus { background: linear-gradient(180deg, #b8d59a, #4a7a28); color: #1f2f10; }
.grade-table .g-cplus  { background: linear-gradient(180deg, #edd9b8, #b08660); color: #2a190a; }
.grade-table .g-c      { background: linear-gradient(180deg, #e2cdb1, #a07350); color: #2a190a; }
.grade-table .g-d      { background: linear-gradient(180deg, #c9b696, #8a6648); color: #f3e4cd; }
.grade-table .g-f      { background: linear-gradient(180deg, #a07c5e, #5a3520); color: #f3e4cd; }

#calendar {
    background: linear-gradient(180deg, #fff4c5, #f3d77a);
    color: #2a3a22;
    padding: 4px 12px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; align-items: center;
    min-width: 130px;
}
.calendar-month { font-family: 'Caveat', cursive; font-size: 26px; line-height: 1; }
.calendar-progress {
    height: 6px; background: #6b4a2b33; border-radius: 4px; width: 100%; margin-top: 4px; position: relative; overflow: hidden;
}
.calendar-progress::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #4a8b3d, #ffb14a);
    width: calc(var(--cal-pct, 0) * 1%);
    transition: width .3s ease;
}

.score-chip {
    background: rgba(248, 241, 218, 0.95);
    color: #2a3a22;
    padding: 2px 8px;
    border-radius: 16px;
    font-weight: 700;
    display: flex; gap: 4px; align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 2px solid transparent;
    white-space: nowrap;
}
.score-chip.active { border-color: #ffb14a; box-shadow: 0 0 0 2px #ffb14a, 0 2px 6px rgba(0,0,0,0.25); }
.score-chip .sc-name { font-size: 13px; }
.score-chip .sc-val { font-size: 18px; color: #2f5e26; }
.score-chip.total { background: linear-gradient(180deg, #fff4c5, #f3d77a); }

#phase-indicator {
    background: rgba(248,241,218,0.95);
    color: #2a3a22;
    padding: 4px 10px;
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 2px;
    align-items: flex-start;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    min-width: 200px;
}
.phase-name { font-family: 'Caveat', cursive; font-size: 22px; color: #2f5e26; line-height: 1; }
.phase-help { font-size: 12px; color: #555; }

#board-area {
    position: relative;
    flex: 1;
    overflow: hidden;
}

#board-viewport {
    position: absolute; inset: 0;
    overflow: hidden;
    cursor: grab;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.1));
}
#board-viewport.dragging { cursor: grabbing; }
#board-viewport.placing { cursor: crosshair; }

#board-world {
    position: absolute;
    left: 50%; top: 50%;
    transform-origin: 0 0;
    will-change: transform;
}
#board-ghost {
    position: absolute;
    pointer-events: none;
    left: 50%; top: 50%;
    transform-origin: 0 0;
}

/* Grid background dots in world space. We use a repeating gradient on #board-world */
.world-grid {
    position: absolute;
    width: 8000px; height: 8000px;
    left: -4000px; top: -4000px;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255,255,255,0.08) 1px, transparent 1.5px);
    background-size: var(--cell) var(--cell), var(--cell) var(--cell), var(--cell) var(--cell);
    background-position: 0 0;
    pointer-events: none;
}

#board-controls {
    position: absolute;
    right: 14px; bottom: 14px;
    display: flex; flex-direction: column; gap: 6px;
    z-index: 5;
}
.board-ctrl {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(248, 241, 218, 0.95);
    border: 2px solid #6b4a2b;
    font-size: 18px;
    font-weight: 700;
}

/* ============================================================
   CARDS ON THE BOARD
   ============================================================ */

/* Placed cards on the board show ONLY the image portion of the card.
   The text/white panel disappears after placement, so we leave the bounding
   container transparent and let the inner .card-image draw the visible cell. */
.placed-card {
    position: absolute;
    overflow: visible;
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
}
.placed-card.starter-grass { z-index: 1; }
.placed-card .card-image {
    box-shadow: var(--shadow-card);
    border: var(--border-card);
    border-radius: 4px;
}
.placed-card .card-cell {
    box-shadow: var(--shadow-card);
    border: var(--border-card);
    border-radius: 4px;
}

/* Grass cell visual */
.cell-grass {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect width='32' height='32' fill='%237bb86b'/><path d='M2 28 L6 18 L10 28 Z M10 28 L14 16 L18 28 Z M18 28 L22 14 L26 28 Z M26 28 L30 18 L32 28 Z' fill='%234a8b3d'/><path d='M1 28 L4 22 L7 28 Z' fill='%23a4d68f'/></svg>");
    background-size: 32px 32px;
}
.cell-path {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><rect width='48' height='48' fill='%23b2adaa'/><path d='M5 5 L20 6 L18 18 L4 16 Z' fill='%23d8d4ce' stroke='%23484746' stroke-width='1'/><path d='M22 7 L36 9 L34 22 L20 20 Z' fill='%23c2b9b3' stroke='%23484746' stroke-width='1'/><path d='M38 6 L46 8 L44 18 L36 16 Z' fill='%23a89c95' stroke='%23484746' stroke-width='1'/><path d='M3 20 L18 22 L16 36 L2 34 Z' fill='%23cfc8c2' stroke='%23484746' stroke-width='1'/><path d='M20 24 L36 26 L34 42 L18 40 Z' fill='%23b8b0aa' stroke='%23484746' stroke-width='1'/><path d='M38 22 L46 24 L44 40 L36 38 Z' fill='%23dad3cd' stroke='%23484746' stroke-width='1'/></svg>");
    background-size: 48px 48px;
}

.card-cell {
    position: absolute;
    border-right: 1px dashed rgba(0,0,0,0.08);
    border-bottom: 1px dashed rgba(0,0,0,0.08);
}
.card-cell.text {
    background: var(--cream);
    color: #1f1f1f;
}

.card-image {
    position: absolute;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden;
}
.card-image .emoji {
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transform: translateY(-4%);
    line-height: 1;
}
.card-image .shade-icon {
    position: absolute;
    top: 4px; left: 4px;
    width: 18px; height: 18px;
    background: linear-gradient(180deg, #b8e6a8, #3e8a30);
    border: 1.5px solid #1e4d18;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #1e4d18; font-weight: 900; font-size: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.card-image .shade-icon::before { content: '▲'; }

.card-image .amenity-icon {
    position: absolute;
    top: 4px; left: 4px;
    width: 22px; height: 14px;
    background: linear-gradient(180deg, #f3d77a, #c9a13d);
    border: 1.5px solid #6b4a2b;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: #2a3a22; font-weight: 900; font-size: 10px;
}
.card-image .amenity-icon::before { content: '☷'; }

.card-text-panel {
    background: var(--cream);
    color: #1f1f1f;
    padding: 6%;
    overflow: hidden;
    display: flex; flex-direction: column;
    gap: 2px;
    font-size: 11px;
    line-height: 1.15;
}
.card-text-panel .name-row {
    display: flex; align-items: center; gap: 4px;
    font-weight: 800;
    font-family: 'Cormorant Garamond', serif;
    font-size: 110%;
    line-height: 1;
}
.card-text-panel .value-pip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 12px;
    background: #fff8b3; border: 1.5px solid #2a3a22;
    font-size: 11px; font-weight: 900;
}
.card-text-panel .value-pip.colored { color: #2a3a22; }
.card-text-panel .months { font-style: italic; color: #555; }
.card-text-panel .sun { font-weight: 600; color: #2a3a22; }
.card-text-panel .rule { color: #2f5e26; }

/* Text orientations: bottom is default. For left/right we render the text
   panel container 90deg rotated text via writing-mode. */
.card-text-panel.text-left, .card-text-panel.text-right {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.card-text-panel.text-right { /* keep default direction */ }
.card-text-panel.text-left  { transform: scale(-1, -1); }

/* ============================================================
   HAND PANELS
   ============================================================ */

.hand-panel {
    position: absolute;
    pointer-events: none;
    z-index: 8;
}
.hand-panel .hand-inner {
    pointer-events: auto;
    background: rgba(20, 35, 15, 0.78);
    border: 2px solid rgba(255,255,255,0.18);
    padding: 8px 10px;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    color: var(--text-light);
    max-width: 92vw; max-height: 88vh;
    display: flex; flex-direction: column; gap: 6px;
}
.hand-panel .player-label {
    display: flex; gap: 8px; align-items: center;
    font-weight: 800; font-size: 13px;
}
.hand-panel .player-label .you-tag {
    background: #ffb14a; color: #2a3a22;
    border-radius: 8px; padding: 1px 6px; font-size: 10px;
}
.hand-panel .hand-cards {
    display: flex; gap: 6px;
    overflow-x: auto; overflow-y: auto;
    padding: 2px;
}

.hand-card {
    flex: 0 0 auto;
    width: 70px; height: 100px;
    background: var(--cream);
    border: var(--border-card);
    border-radius: 6px;
    box-shadow: var(--shadow-card);
    position: relative;
    display: flex; flex-direction: column;
    overflow: hidden;
    cursor: grab;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    user-select: none;
}
.hand-card.disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }
.hand-card.selected { transform: translateY(-6px); box-shadow: 0 6px 12px rgba(0,0,0,0.5), 0 0 0 3px #ffb14a; }
.hand-card.face-down { background: linear-gradient(135deg, #2f5e26, #4a8b3d); color: var(--text-light); align-items: center; justify-content: center; }
.hand-card.face-down::before {
    content: '🌿';
    font-size: 26px; text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Bottom and Top hands are horizontal; Left and Right are vertical */
.hand-bottom { left: 50%; bottom: 8px; transform: translateX(-50%); max-width: 92vw; }
.hand-top    { left: 50%; top: 6px; transform: translateX(-50%); max-width: 92vw; }
.hand-left   { left: 8px; top: 50%; transform: translateY(-50%); max-height: 70vh; }
.hand-right  { right: 8px; top: 50%; transform: translateY(-50%); max-height: 70vh; }

.hand-left .hand-inner, .hand-right .hand-inner { max-height: 70vh; }
.hand-left .hand-cards, .hand-right .hand-cards { flex-direction: column; max-height: 60vh; }
.hand-bottom .hand-cards, .hand-top .hand-cards { max-width: 80vw; }

.hand-card .hc-image {
    flex: 1; display: flex; align-items: center; justify-content: center;
    position: relative;
}
.hand-card .hc-image .emoji { font-size: 30px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.hand-card .hc-image .shade-mini {
    position: absolute; top: 3px; left: 3px;
    width: 14px; height: 14px;
    background: linear-gradient(180deg, #b8e6a8, #3e8a30);
    border: 1px solid #1e4d18;
    border-radius: 50%;
    color: #1e4d18; font-size: 10px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.hand-card .hc-image .shade-mini::before { content: '▲'; }
.hand-card .hc-text {
    flex: 0 0 auto;
    padding: 3px 4px;
    font-size: 9.5px;
    line-height: 1.15;
    background: var(--cream);
    border-top: 1px solid rgba(0,0,0,0.15);
    color: #1f1f1f;
}
.hand-card .hc-text .name {
    display: flex; align-items: center; gap: 3px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 800;
    font-size: 11px; line-height: 1;
}
.hand-card .hc-text .pip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 14px; height: 14px; padding: 0 3px;
    border-radius: 10px;
    background: #fff8b3; border: 1px solid #2a3a22;
    font-size: 9px; font-weight: 900;
}
.hand-card .hc-text .meta { color: #555; font-style: italic; font-size: 9px; }
.hand-card .hc-rotate {
    position: absolute; bottom: 2px; right: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid #2a3a22;
    background: rgba(255,255,255,0.9);
    color: #2a3a22;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

.hand-card .size-label {
    position: absolute; top: 2px; right: 2px;
    font-size: 9px; padding: 1px 3px; border-radius: 4px;
    background: rgba(0,0,0,0.5); color: #fff;
}

/* ============================================================
   DRAW PHASE OVERLAY
   ============================================================ */

#draw-choices {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 20;
    pointer-events: auto;
}
#draw-choices.hidden { display: none; }

.draw-choices-inner {
    background: var(--panel);
    border: 3px solid #6b4a2b;
    border-radius: 18px;
    padding: 18px 22px;
    max-width: 720px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.draw-choices-inner h3 {
    text-align: center;
    font-family: 'Caveat', cursive;
    font-size: 32px;
    color: #2f5e26;
    margin: 0 0 12px;
}
.draw-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.draw-opt {
    border: 2px solid #6b4a2b;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff4c5 0%, #f3d77a 100%);
    padding: 12px 14px;
    text-align: left;
    display: flex; align-items: center; gap: 12px;
    transition: transform .08s ease, filter .08s ease;
    color: #2a3a22;
}
.draw-opt:hover { transform: translateY(-2px); filter: brightness(1.04); }
.draw-opt:disabled { filter: grayscale(.6); cursor: not-allowed; }
.draw-opt .dco-emoji { font-size: 32px; }
.draw-opt .dco-label { font-weight: 800; font-size: 16px; flex: 1; }
.draw-opt .dco-sub { font-size: 12px; color: #555; }

.draw-draw-footer {
    margin-top: 14px;
    text-align: center;
}
.btn-draw-peek {
    min-width: 180px;
}

#draw-choices.draw-peek {
    background: transparent;
    pointer-events: none;
}
#draw-choices.draw-peek .draw-choices-inner {
    visibility: hidden;
}
#draw-choices.draw-peek .btn-draw-peek {
    visibility: visible;
    pointer-events: auto;
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 25;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

#menu-screen .menu-audio-btn {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 5;
}

/* ============================================================
   GHOST PREVIEW + HIGHLIGHTS
   ============================================================ */

.ghost-cell {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed rgba(255,255,255,0.85);
    background: rgba(255, 230, 120, 0.15);
}
.ghost-cell.invalid {
    border-color: rgba(255, 60, 60, 0.95);
    background: rgba(255, 60, 60, 0.18);
}
/* Text cells get the dirt+roots graphic above them, so hide the ghost-cell
   outline for valid placements. Only the invalid red overlay shows through. */
.ghost-cell.text-cell {
    background: transparent;
    border: none;
}
.ghost-cell.text-cell.invalid {
    background: rgba(255, 60, 60, 0.12);
    border: 2px dashed rgba(255, 60, 60, 0.95);
}

.hint-cell {
    position: absolute;
    box-sizing: border-box;
    background: rgba(255, 240, 100, 0.22);
    border: 1px solid rgba(255, 200, 60, 0.7);
    pointer-events: none;
}

.score-pip-on-card {
    position: absolute;
    top: 4px; right: 4px;
    background: #fff8b3; border: 1.5px solid #2a3a22;
    color: #2a3a22;
    font-weight: 900; font-size: 11px;
    border-radius: 12px; padding: 1px 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ============================================================
   TOAST + SCORE PREVIEW
   ============================================================ */

#toast {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 80px;
    background: rgba(20, 35, 15, 0.95);
    color: var(--text-light);
    border: 2px solid rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    z-index: 50;
    pointer-events: none;
    opacity: 0; transition: opacity .2s ease;
}
#toast.show { opacity: 1; }
#toast.error { border-color: #ff5a4a; background: rgba(80, 20, 20, 0.95); }

#score-preview {
    position: absolute;
    z-index: 30;
    background: rgba(20, 35, 15, 0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.2);
    font-size: 13px;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
#score-preview .sp-line { display: flex; gap: 6px; }
#score-preview .sp-total { font-weight: 800; color: #ffb14a; }

/* Card color rings tint the text panel slightly */
.placed-card[data-color="yellow"]  .card-text-panel .value-pip { background: #fff8b3; }
.placed-card[data-color="red"]     .card-text-panel .value-pip { background: #ffd5d0; }
.placed-card[data-color="pink"]    .card-text-panel .value-pip { background: #ffd1e1; }
.placed-card[data-color="purple"]  .card-text-panel .value-pip { background: #e2cbf2; }
.placed-card[data-color="blue"]    .card-text-panel .value-pip { background: #cee5ff; }
.placed-card[data-color="orange"]  .card-text-panel .value-pip { background: #ffd9b2; }
.placed-card[data-color="white"]   .card-text-panel .value-pip { background: #eaeaea; }
.placed-card[data-color="green"]   .card-text-panel .value-pip { background: #d3eecb; }

.hand-card[data-color="yellow"]  .pip { background: #fff8b3; }
.hand-card[data-color="red"]     .pip { background: #ffd5d0; }
.hand-card[data-color="pink"]    .pip { background: #ffd1e1; }
.hand-card[data-color="purple"]  .pip { background: #e2cbf2; }
.hand-card[data-color="blue"]    .pip { background: #cee5ff; }
.hand-card[data-color="orange"]  .pip { background: #ffd9b2; }
.hand-card[data-color="white"]   .pip { background: #eaeaea; }
.hand-card[data-color="green"]   .pip { background: #d3eecb; }

/* Card image background per color */
.placed-card .card-image.bg-yellow  { background: linear-gradient(180deg, #fff7c2, #ffd24a 60%, #e6a800); }
.placed-card .card-image.bg-red     { background: linear-gradient(180deg, #ffd5d0, #ff5a4a 60%, #b71810); }
.placed-card .card-image.bg-pink    { background: linear-gradient(180deg, #ffe0ec, #ff85b6 60%, #c84f86); }
.placed-card .card-image.bg-purple  { background: linear-gradient(180deg, #ecd6ff, #9c5cd6 60%, #5e3098); }
.placed-card .card-image.bg-blue    { background: linear-gradient(180deg, #d6ecff, #5ca0e0 60%, #1f5fa0); }
.placed-card .card-image.bg-orange  { background: linear-gradient(180deg, #ffe2c2, #ff9a3c 60%, #c45e0e); }
.placed-card .card-image.bg-white   { background: linear-gradient(180deg, #fdfdfd, #f4f4f4 60%, #cfcfcf); }
.placed-card .card-image.bg-green   { background: linear-gradient(180deg, #dff4d4, #7bb86b 60%, #3c7a32); }
.placed-card .card-image.bg-amenity { background: linear-gradient(180deg, #d8d4ce, #a89c95 60%, #6b4a2b); }
.placed-card .card-image.bg-grass   { background-color: #4a8b3d; }

/* When a card has custom artwork, the artwork PNG replaces the colored
   gradient and the fallback emoji. We keep the rounded corners and the
   subtle card border via the existing .placed-card .card-image rules. */
.placed-card .card-image.has-artwork {
    background-color: transparent !important;
}
.hand-card .hc-image.has-artwork {
    background-color: transparent !important;
}
.hand-card .hc-image.has-artwork .emoji { display: none; }

/* Artwork <img> for placed cards. Using an <img> element (rather than a CSS
   background-image) ensures the browser re-samples it at the correct display
   resolution even when the board world is a GPU compositing layer, preventing
   the blurriness that occurs with background-image on will-change:transform. */
.card-artwork-img {
    position: absolute;
    top: 0;
    left: 0;
    /* width and height are set inline to match the card-image rect exactly */
    object-fit: fill;
    display: block;
    border-radius: 3px;
    pointer-events: none;
}

/* ============================================================
   PLACED-CARD HOVER TOOLTIP
   ============================================================ */
.board-card-tooltip {
    position: fixed;
    z-index: 200;
    background: rgba(20, 35, 15, 0.95);
    color: #f3e4cd;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    max-width: 220px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    line-height: 1.35;
}
.board-card-tooltip.hidden { display: none; }
.board-card-tooltip .bct-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.board-card-tooltip .bct-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 10px;
    background: #fff8b3;
    border: 1px solid #2a3a22;
    color: #2a3a22;
    font-size: 11px;
    font-weight: 900;
    font-family: 'Quicksand', sans-serif;
}
.board-card-tooltip .bct-meta   { color: #c8b88c; font-size: 12px; margin-top: 2px; }
.board-card-tooltip .bct-sun    { font-size: 12px; margin-top: 2px; color: #b8e0a4; }
.board-card-tooltip .bct-special { font-size: 11px; margin-top: 3px; color: #ffe188; }

.hand-card .hc-image.bg-yellow  { background: linear-gradient(180deg, #fff7c2, #ffd24a 60%, #e6a800); }
.hand-card .hc-image.bg-red     { background: linear-gradient(180deg, #ffd5d0, #ff5a4a 60%, #b71810); }
.hand-card .hc-image.bg-pink    { background: linear-gradient(180deg, #ffe0ec, #ff85b6 60%, #c84f86); }
.hand-card .hc-image.bg-purple  { background: linear-gradient(180deg, #ecd6ff, #9c5cd6 60%, #5e3098); }
.hand-card .hc-image.bg-blue    { background: linear-gradient(180deg, #d6ecff, #5ca0e0 60%, #1f5fa0); }
.hand-card .hc-image.bg-orange  { background: linear-gradient(180deg, #ffe2c2, #ff9a3c 60%, #c45e0e); }
.hand-card .hc-image.bg-white   { background: linear-gradient(180deg, #fdfdfd, #f4f4f4 60%, #cfcfcf); }
.hand-card .hc-image.bg-green   { background: linear-gradient(180deg, #dff4d4, #7bb86b 60%, #3c7a32); }
.hand-card .hc-image.bg-amenity { background: linear-gradient(180deg, #d8d4ce, #a89c95 60%, #6b4a2b); }
.hand-card .hc-image.bg-grass   { background-color: #4a8b3d; }
.hand-card .hc-image.bg-path    { background: linear-gradient(135deg, #d8d4ce, #a89c95); }

/* ============================================================
   GHOST PREVIEW CARD - semi-transparent overlay showing the
   actual card (image + text) during placement.
   ============================================================ */

#board-ghost { z-index: 4; }
#board-fx {
    position: absolute;
    pointer-events: none;
    left: 50%; top: 50%;
    transform-origin: 0 0;
    z-index: 6;
}

.ghost-preview-card {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0.62;
    filter: saturate(.9);
}
.ghost-preview-card .card-image {
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    border: 1.5px dashed rgba(255,255,255,0.85);
    border-radius: 4px;
}
.ghost-preview-card.invalid .card-image {
    border-color: rgba(255, 60, 60, 0.95);
    filter: hue-rotate(-20deg) brightness(0.85);
}
/* Dirt + roots graphic used during placement preview to indicate where the
   card's text panel will be tucked (buried) under existing cards. The base
   SVG draws roots pointing DOWN; rotate per text direction so the roots
   always grow away from the plant. The graphic is only present in the
   ghost-preview-card and never appears on placed cards. */
.card-dirt-tuck {
    position: absolute;
    box-sizing: border-box;
    border-radius: 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'><defs><linearGradient id='soil' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%237a5634'/><stop offset='1' stop-color='%234a2f17'/></linearGradient></defs><rect width='48' height='48' fill='url(%23soil)'/><circle cx='6' cy='8' r='2' fill='%233d2814'/><circle cx='28' cy='5' r='1.5' fill='%233d2814'/><circle cx='42' cy='12' r='2' fill='%233d2814'/><circle cx='12' cy='22' r='1.5' fill='%233d2814'/><circle cx='38' cy='28' r='2' fill='%233d2814'/><circle cx='4' cy='38' r='1.5' fill='%233d2814'/><circle cx='24' cy='42' r='1.5' fill='%233d2814'/><circle cx='18' cy='4' r='1' fill='%238b6a3b'/><circle cx='32' cy='18' r='1' fill='%238b6a3b'/><circle cx='10' cy='32' r='1' fill='%238b6a3b'/><path d='M24 0 L24 14 M24 12 L18 22 M24 14 L30 22 M18 22 L14 34 M30 22 L34 34 M14 34 L10 48 M14 34 L18 48 M34 34 L30 48 M34 34 L38 48' stroke='%23241509' stroke-width='2.2' fill='none' stroke-linecap='round'/><circle cx='10' cy='48' r='1.6' fill='%23120a04'/><circle cx='18' cy='48' r='1.6' fill='%23120a04'/><circle cx='30' cy='48' r='1.6' fill='%23120a04'/><circle cx='38' cy='48' r='1.6' fill='%23120a04'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 2px dashed rgba(160, 120, 80, 0.95);
    box-shadow: 0 2px 4px rgba(0,0,0,0.35) inset;
    opacity: 0.95;
}
.card-dirt-tuck[data-dir="bottom"] { transform: rotate(0deg); }
.card-dirt-tuck[data-dir="top"]    { transform: rotate(180deg); }
.card-dirt-tuck[data-dir="left"]   { transform: rotate(90deg); }
.card-dirt-tuck[data-dir="right"]  { transform: rotate(-90deg); }
.ghost-preview-card.invalid .card-dirt-tuck {
    filter: hue-rotate(-30deg) saturate(1.4) brightness(0.8);
    border-color: rgba(255, 60, 60, 0.9);
}

/* ============================================================
   FLORAL PARTICLE BURST
   ============================================================ */

.floral-particle {
    position: absolute;
    pointer-events: none;
    user-select: none;
    --dx: 0px;
    --dy: 0px;
    --rot: 0deg;
    animation: petalFly 1.2s ease-out forwards;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    will-change: transform, opacity;
}
@keyframes petalFly {
    0%   { transform: translate(0, 0) rotate(0); opacity: 0.0; }
    15%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ============================================================
   AUDIO TOGGLE
   ============================================================ */

.audio-btn {
    position: absolute;
    left: 14px; bottom: 14px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid #6b4a2b;
    background: rgba(248, 241, 218, 0.95);
    font-size: 22px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.35);
    z-index: 7;
    display: flex; align-items: center; justify-content: center;
    transition: transform .08s ease;
}
.audio-btn:hover { transform: scale(1.07); }

/* Help (?) button stacked above the audio toggle */
.ingame-help-btn {
    bottom: 62px; /* 14px base + 44px audio btn + 4px gap */
    font-size: 20px;
    font-weight: 700;
    font-family: 'Cormorant Garamond', serif;
}

/* ============================================================
   HIGH SCORES
   ============================================================ */

.hs-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.hs-col h3 { margin-top: 4px; text-align: center; }
.hs-sub { text-align: center; font-style: italic; color: #555; margin: 0 0 8px; font-size: 13px; }
.hs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 50vh;
    overflow-y: auto;
}
.hs-list li {
    background: rgba(255,255,255,0.6);
    border: 1px solid #b1a86b;
    border-radius: 8px;
    padding: 6px 10px;
    margin: 6px 0;
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px;
    font-size: 14px;
}
.hs-list .hs-name { font-weight: 700; }
.hs-list .hs-meta { color: #555; font-size: 13px; white-space: nowrap; }
.hs-list .hs-meta em { color: #888; font-style: normal; margin-left: 6px; }
.hs-list .hs-empty {
    background: transparent; border: 1px dashed #aaa;
    text-align: center; color: #777; font-style: italic;
}

@media (max-width: 720px) {
    .hs-columns { grid-template-columns: 1fr; }
}

/* ============================================================
   PLAYER NAMES MODAL
   ============================================================ */

#player-names-fields .name-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}
#player-names-fields label {
    font-weight: 700;
    color: #2f5e26;
}
.name-input {
    padding: 8px 10px;
    font-size: 16px;
    border-radius: 8px;
    border: 2px solid #6b4a2b;
    background: rgba(255,255,255,0.85);
    font-family: inherit;
    min-width: 0;
}

/* Segmented control - used for type (Human/CPU) and team mode (FFA/Teams). */
.seg-control {
    display: inline-flex;
    border-radius: 8px;
    border: 2px solid #6b4a2b;
    background: rgba(255,255,255,0.6);
    overflow: hidden;
}
.seg-control .seg-btn {
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(107, 74, 43, 0.3);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: #4a3018;
    transition: background 0.15s, color 0.15s;
}
.seg-control .seg-btn:last-child { border-right: none; }
.seg-control .seg-btn:hover { background: rgba(107, 74, 43, 0.12); }
.seg-control .seg-btn.active {
    background: linear-gradient(180deg, #5a8a32, #3c6420);
    color: #fff5d7;
    font-weight: 700;
}

/* Team mode toggle row (compete only) */
#team-mode-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 4px 0 14px;
    padding: 8px;
    background: rgba(255,255,255,0.4);
    border-radius: 10px;
}
#team-mode-row .tm-label {
    font-weight: 700;
    color: #2f5e26;
    font-size: 14px;
}

#team-balance-warning {
    text-align: center;
    color: #b71810;
    background: rgba(255, 200, 195, 0.6);
    border: 1.5px solid #b71810;
    border-radius: 8px;
    padding: 6px 12px;
    margin: 8px 0;
    font-size: 13px;
    font-weight: 600;
}

/* Team-coloured score chips */
.score-chip.team-1 { border: 2px solid #4a8aff; }
.score-chip.team-2 { border: 2px solid #e57a25; }
.score-chip.total.team-1 {
    background: linear-gradient(180deg, rgba(80,140,255,0.35), rgba(40,90,200,0.45));
}
.score-chip.total.team-2 {
    background: linear-gradient(180deg, rgba(255,160,80,0.35), rgba(220,90,30,0.45));
}
.score-chip .sc-team {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.25);
    margin-right: 5px;
    letter-spacing: 0.5px;
}
.score-chip.team-1 .sc-team { background: rgba(74,138,255,0.55); color: #fff; }
.score-chip.team-2 .sc-team { background: rgba(229,122,37,0.65); color: #fff; }
.score-chip .sc-cpu {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(0,0,0,0.25);
    color: #ffe188;
    margin-right: 4px;
    letter-spacing: 0.4px;
}

/* End-modal team result columns */
.team-result {
    border-radius: 12px;
    padding: 10px 18px;
    background: rgba(0,0,0,0.18);
    text-align: center;
    min-width: 160px;
}
.team-result h3 { margin: 0 0 4px 0; }
.team-result .team-total {
    font-size: 28px;
    font-weight: 700;
    color: #ffe188;
}
.team-result.winning {
    background: linear-gradient(180deg, rgba(255,222,128,0.5), rgba(255,180,40,0.7));
    box-shadow: 0 0 18px rgba(255,200,80,0.7);
}

/* ============================================================
   BONUS BADGE + TOOLTIP
   ============================================================ */

.hand-card .hc-bonus {
    position: absolute;
    bottom: 2px; right: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff4c5, #ffd24a);
    color: #6b4a2b;
    border: 1.5px solid #6b4a2b;
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    cursor: help;
}
.hand-card.face-down .hc-bonus { display: none; }

.bonus-tooltip {
    position: fixed;
    z-index: 200;
    background: rgba(20, 35, 15, 0.95);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    max-width: 280px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    pointer-events: none;
}
.bonus-tooltip .bt-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.3;
    margin: 2px 0;
}
.bonus-bang {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff4c5, #ffd24a);
    color: #6b4a2b;
    border: 1px solid #6b4a2b;
    font-weight: 900; font-size: 11px;
    flex: 0 0 16px;
}

/* Score preview bonus and divider */
#score-preview .sp-line.invalid { color: #ff9999; }
#score-preview .sp-line.bonus { color: #ffe188; align-items: center; }
#score-preview .sp-divider { height: 1px; background: rgba(255,255,255,0.18); margin: 4px 0; }

/* ============================================================
   ROTATION HINT (path placement)
   ============================================================ */

#rotate-hint {
    position: absolute;
    bottom: 64px; left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 35, 15, 0.92);
    color: var(--text-light);
    border: 2px solid rgba(255,255,255,0.2);
    padding: 8px 14px;
    border-radius: 22px;
    font-size: 14px;
    z-index: 12;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    pointer-events: none;
}
#rotate-hint kbd {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: inherit;
    font-size: 12px;
}
#rotate-hint .rh-icon { font-size: 18px; }

/* Path rotation indicator on the hand card */
.hand-card .hc-image .path-rot-ind {
    position: absolute;
    bottom: 3px; left: 3px;
    font-size: 14px;
    font-weight: 900;
    color: #2a3a22;
    background: rgba(255,255,255,0.7);
    padding: 0 4px;
    border-radius: 4px;
    line-height: 1;
}

/* Score chip clickable cue */
.score-chip { cursor: pointer; }
.score-chip:hover { transform: translateY(-1px); transition: transform .08s; }

/* Player name in the hand panel - clickable */
.hand-panel .player-label .pl-name { cursor: pointer; }
.hand-panel .player-label .pl-name:hover { text-decoration: underline; }