/* ============================================================
   HEX-SIEDLER — Main Stylesheet
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    width: 100%; height: 100%; overflow: hidden;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background: #0a1628; touch-action: none;
    user-select: none; -webkit-user-select: none;
}

/* ===== SETUP SCREEN ===== */
#setupScreen {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at 50% 40%, #1a3a5c 0%, #0a1628 70%);
    position: relative; overflow: hidden;
}
.setup-logo {
    position: relative; margin-bottom: 8px;
}
.setup-logo .logo-hex {
    font-size: 5em; color: #f0c040;
    filter: drop-shadow(0 0 30px rgba(240,192,64,0.5));
    animation: logoSpin 12s linear infinite;
}
@keyframes logoSpin {
    0% { filter: drop-shadow(0 0 20px rgba(240,192,64,0.4)) hue-rotate(0deg); }
    50% { filter: drop-shadow(0 0 40px rgba(240,192,64,0.7)) hue-rotate(15deg); }
    100% { filter: drop-shadow(0 0 20px rgba(240,192,64,0.4)) hue-rotate(0deg); }
}
#setupScreen h1 {
    font-size: 3.2em; color: #f0c040; letter-spacing: 0.04em;
    text-shadow: 0 0 30px rgba(240,192,64,0.4), 0 2px 8px rgba(0,0,0,0.7);
    margin-bottom: 4px;
    animation: titlePulse 3s ease-in-out infinite;
}
#setupScreen .subtitle {
    font-size: 1.1em; color: #7aa0c0; margin-bottom: 32px; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 300;
    animation: fadeSlideUp 0.8s ease-out 0.3s both;
}
.setup-btn-group {
    display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.setup-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 280px; padding: 16px 24px; margin: 0;
    font-size: 1.2em; font-weight: 600; color: #c8dce8;
    border: 2px solid rgba(240,192,64,0.2);
    border-radius: 14px; cursor: pointer;
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(135deg, rgba(26,58,92,0.8), rgba(10,22,40,0.9));
    backdrop-filter: blur(6px);
    animation: fadeSlideUp 0.6s ease-out both;
    position: relative; z-index: 1;
}
.setup-btn .btn-icon { font-size: 1.1em; }
.setup-btn:nth-child(1) { animation-delay: 0.3s; }
.setup-btn:nth-child(2) { animation-delay: 0.45s; }
.setup-btn:nth-child(3) { animation-delay: 0.6s; }
.setup-btn:hover, .setup-btn:active {
    background: linear-gradient(135deg, #f0c040, #d4a020);
    color: #0a1628; border-color: #f0c040;
    transform: scale(1.04) translateY(-2px);
    box-shadow: 0 8px 32px rgba(240,192,64,0.35), 0 0 0 1px rgba(240,192,64,0.5);
}
.setup-footer {
    margin-top: 36px; font-size: 1.6em; letter-spacing: 12px;
    opacity: 0.3;
    animation: fadeSlideUp 1s ease-out 0.9s both;
}

/* Setup floating hex particles (background) */
#setupParticles {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
#setupScreen > *:not(#setupParticles) { position: relative; z-index: 1; }

/* ===== GAME SCREEN ===== */
#gameScreen { display: none; width: 100%; height: 100%; position: relative; }
#boardCanvas { display: block; width: 100%; height: 100%; }

/* ===== UI PANELS ===== */
.ui-panel {
    position: absolute; background: rgba(10, 22, 40, 0.88); color: #e0e8f0;
    border-radius: 14px; padding: 10px 14px; backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ===== PLAYER INVENTORIES (around the table) ===== */
#playerInventories { position: absolute; inset: 0; pointer-events: none; z-index: 9; }

.player-inv {
    position: absolute; pointer-events: auto;
    background: linear-gradient(160deg, rgba(12, 24, 42, 0.95), rgba(6, 14, 28, 0.97));
    backdrop-filter: blur(14px);
    border-radius: 14px; padding: 7px 10px;
    border: 2px solid rgba(255,255,255,0.08);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    overflow: visible;
    font-size: 1em;
}
.player-inv.active {
    border-color: var(--pcolor);
    box-shadow: 0 0 20px color-mix(in srgb, var(--pcolor) 40%, transparent),
                0 4px 20px rgba(0,0,0,0.4);
    /* Horizontal: [trade] [main] [end] */
    flex-direction: row; align-items: stretch;
    gap: 8px; padding: 0;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none;
}

/* Main content block inside active panel */
.inv-main {
    position: relative;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    background: linear-gradient(160deg, rgba(12, 24, 42, 0.95), rgba(6, 14, 28, 0.97));
    backdrop-filter: blur(14px);
    border-radius: 14px; padding: 8px 12px;
    border: 2px solid var(--pcolor);
    box-shadow: 0 0 20px color-mix(in srgb, var(--pcolor) 40%, transparent),
                0 4px 20px rgba(0,0,0,0.4);
    overflow: visible;
}

/* Side pods (trade / end turn) — stretch full height */
.inv-side {
    flex-shrink: 0;
    display: flex; align-items: stretch;
}
.side-btn {
    width: 48px; border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.12);
    background: linear-gradient(160deg, rgba(12, 24, 42, 0.95), rgba(6, 14, 28, 0.97));
    backdrop-filter: blur(14px);
    color: #fff; font-size: 1.4em; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease; padding: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.side-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.side-btn:active { transform: scale(0.9); }
.side-btn.side-trade {
    border-color: rgba(41,128,185,0.5);
}
.side-btn.side-trade:hover {
    background: linear-gradient(135deg, rgba(41,128,185,0.4), rgba(41,128,185,0.2));
}
.side-btn.side-end {
    border-color: rgba(243,156,18,0.5);
    background: linear-gradient(135deg, #f39c12, #d68910);
}
.side-btn.side-end:hover {
    box-shadow: 0 0 20px rgba(243,156,18,0.4);
}

/* Row helpers */
.inv-row {
    display: flex; align-items: center; gap: 8px;
}
.inv-row--top {
    justify-content: center;
}

/* Identity block (name + VP grouped) */
.inv-identity {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}

/* Positioning: bottom=P0, top=P1, left=P2, right=P3 */
.player-inv[data-pos="bottom"] {
    bottom: 8px; left: 50%; transform: translateX(-50%);
}
.player-inv[data-pos="top"] {
    top: 8px; left: 50%; transform: translateX(-50%) rotate(180deg);
}
.player-inv[data-pos="right"] {
    right: 10px; top: 50%; transform: translateY(-50%) rotate(-90deg);
    transform-origin: center center;
}
.player-inv[data-pos="left"] {
    left: 10px; top: 50%; transform: translateY(-50%) rotate(90deg);
    transform-origin: center center;
}

/* Player label elements */
.inv-name {
    font-weight: 700; font-size: 0.9em; color: var(--pcolor);
    text-shadow: 0 0 10px color-mix(in srgb, var(--pcolor) 60%, transparent);
    white-space: nowrap; flex-shrink: 0;
    letter-spacing: 0.04em;
}
.inv-vp {
    font-size: 0.8em; color: #f0c040; font-weight: bold;
    background: rgba(240,192,64,0.1); border-radius: 6px; padding: 2px 7px;
    flex-shrink: 0; white-space: nowrap;
    border: 1px solid rgba(240,192,64,0.2);
    display: flex; align-items: center; gap: 2px;
}
.vp-icon {
    font-size: 0.9em; color: #f0c040;
}
.inv-icons { font-size: 0.7em; color: #b0c0d0; white-space: nowrap; flex-shrink: 0; }

/* ===== DICE FLOATER — shown above EVERY player ===== */
.dice-floater {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 10px;
    background: linear-gradient(160deg, rgba(12, 24, 42, 0.95), rgba(6, 14, 28, 0.97));
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    white-space: nowrap; pointer-events: none;
    z-index: 10;
    opacity: 0.6;
    transition: opacity 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.player-inv.active .dice-floater {
    opacity: 1;
    border-color: color-mix(in srgb, var(--pcolor) 35%, transparent);
}
/* Counter-rotate dice floater so it's always readable */
/* Top panel (rotated 180deg): floater below in local = above on screen towards center */
.player-inv[data-pos="top"] .dice-floater {
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
}
/* Left panel (rotated 90deg): local-below = screen-right = towards center */
.player-inv[data-pos="left"] .dice-floater {
    bottom: auto;
    top: -70%;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
}
/* Right panel (rotated -90deg): local-above = screen-right = away, so use local-below = screen-left = towards center */
.player-inv[data-pos="right"] .dice-floater {
    /* bottom default is already "above locally" which maps to screen-left (towards center for right panel with -90deg) */
    /* Actually: right panel uses rotate(-90deg), local-above = screen-LEFT = towards center. Keep bottom. */
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    bottom:110%;
}
.df-die {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px;
    background: linear-gradient(145deg, #f5f0e0, #e0d8c0);
    color: #2a1a0a; font-weight: 800; font-size: 0.85em;
    border: 1.5px solid #c0b090;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.2);
}
.df-plus, .df-eq {
    color: rgba(255,255,255,0.35); font-size: 0.7em; font-weight: 400;
}
.df-sum {
    font-weight: 800; font-size: 0.95em; color: #e0e8f0;
    min-width: 18px; text-align: center;
}
.df-seven {
    color: #e74c3c;
    text-shadow: 0 0 6px rgba(231,76,60,0.5);
}

/* No separate .inv-status anymore — dice floater replaces it */

/* ===== ROLL PROMPT OVERLAY (centered big dice button) ===== */
#rollPrompt {
    display: none; position: fixed; inset: 0; z-index: 25;
    align-items: center; justify-content: center;
    pointer-events: none;
}
#rollPrompt.show {
    display: flex;
    pointer-events: auto;
    animation: rollPromptFadeIn 0.25s ease-out;
}
.roll-backdrop {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
    pointer-events: auto;
}
.roll-prompt-inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: auto;
}
.roll-label {
    font-size: 1em; font-weight: 700; letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    opacity: 0.85;
}
.roll-big-btn {
    width: 100px; height: 100px;
    border-radius: 24px; border: 3px solid rgba(240,192,64,0.5);
    background: linear-gradient(145deg, rgba(231,76,60,0.9), rgba(192,57,43,0.95));
    color: #fff; font-size: 3.2em;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 40px rgba(231,76,60,0.4), 0 8px 30px rgba(0,0,0,0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: rollBtnPulse 2s ease-in-out infinite;
}
.roll-big-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 60px rgba(231,76,60,0.6), 0 12px 40px rgba(0,0,0,0.5);
}
.roll-big-btn:active {
    transform: scale(0.92);
}
.roll-hint {
    font-size: 0.7em; color: rgba(255,255,255,0.45);
    letter-spacing: 0.06em; text-transform: uppercase;
}
@keyframes rollBtnPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(231,76,60,0.35), 0 8px 30px rgba(0,0,0,0.5); }
    50% { box-shadow: 0 0 50px rgba(231,76,60,0.55), 0 8px 30px rgba(0,0,0,0.5), 0 0 80px rgba(240,192,64,0.15); }
}
@keyframes rollPromptFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 600px) {
    .roll-big-btn { width: 80px; height: 80px; font-size: 2.6em; border-radius: 20px; }
    .roll-label { font-size: 0.85em; }
}
@media (max-width: 400px) {
    .roll-big-btn { width: 64px; height: 64px; font-size: 2em; border-radius: 16px; }
}

/* Card stack area */
.inv-cards {
    display: flex; gap: 2px; align-items: flex-end;
}

/* Individual resource card */
.res-card {
    position: relative; width: 36px; height: 50px;
    border-radius: 6px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}
.res-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 1;
}
.res-card .card-bg {
    position: absolute; inset: 0; opacity: 0.85;
}
.res-card[data-res="wood"] .card-bg { background: linear-gradient(145deg, #4a7a3a, #2d5a1e); }
.res-card[data-res="brick"] .card-bg { background: linear-gradient(145deg, #c8704a, #8a4a2a); }
.res-card[data-res="wheat"] .card-bg { background: linear-gradient(145deg, #d4b030, #a08020); }
.res-card[data-res="ore"] .card-bg { background: linear-gradient(145deg, #8a9aaa, #5a6a7a); }
.res-card[data-res="sheep"] .card-bg { background: linear-gradient(145deg, #6ac850, #3a8a28); }

.res-card .card-emoji {
    font-size: 1.15em; position: relative; z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.res-card .card-count {
    position: relative; z-index: 1;
    font-size: 0.78em; font-weight: bold; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.4); border-radius: 4px;
    padding: 0 4px; min-width: 16px; text-align: center;
}
.res-card .card-count.zero { opacity: 0.3; }
.res-card.card-deal { animation: cardDeal 0.3s cubic-bezier(.34,1.56,.64,1) both; }

/* Dev card badge (compact count) */
.dev-badge {
    font-size: 0.8em; padding: 2px 6px; border-radius: 6px;
    background: rgba(142,68,173,0.25); border: 1px solid rgba(142,68,173,0.4);
    color: #d4a0f0; white-space: nowrap; flex-shrink: 0;
}

/* Card back (hidden resources) */
.card-back {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 7px;
    background: linear-gradient(145deg, #2a3a5a, #1a2840);
    border: 1.5px solid rgba(255,255,255,0.15);
    min-height: 50px;
}
.card-back-icon {
    font-size: 1.4em;
    filter: drop-shadow(0 0 4px rgba(100,140,255,0.4));
}
.card-back-count {
    font-size: 1em; font-weight: bold; color: #8aa0c0;
    min-width: 18px; text-align: center;
}

/* ===== ACTION BAR — now inside player inventories ===== */

/* ===== 3D DICE OVERLAY ===== */
#diceOverlay {
    position: fixed; inset: 0; z-index: 200;
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 20px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    pointer-events: none;
}
#diceOverlay.show {
    display: flex;
    animation: modalFadeIn 0.2s ease-out;
}

#diceScene {
    display: flex; gap: 60px; perspective: 600px;
}

/* 3D Dice cube */
.dice3d {
    width: 90px; height: 90px; position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(.2,.8,.3,1.2);
}
.dice3d.rolling {
    animation: diceRoll3d 0.8s ease-in-out;
}

.dice-face {
    position: absolute; width: 90px; height: 90px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #f5f0e0, #e8dcc0);
    border: 3px solid #c8b890;
    border-radius: 14px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.08);
}
.dice-face span {
    font-size: 64px; color: #2a1a0a;
    filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.15));
}

/* Cube face transforms */
.face-1 { transform: rotateY(0deg) translateZ(45px); }
.face-2 { transform: rotateY(180deg) translateZ(45px); }
.face-3 { transform: rotateY(-90deg) translateZ(45px); }
.face-4 { transform: rotateY(90deg) translateZ(45px); }
.face-5 { transform: rotateX(-90deg) translateZ(45px); }
.face-6 { transform: rotateX(90deg) translateZ(45px); }

#diceResult {
    font-size: 2.2em; font-weight: bold; color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}
#diceResult.show { opacity: 1; }

/* ===== ACTION BUTTONS ===== */
.btn {
    min-height: 50px; min-width: 50px; font-size: 1em; font-weight: bold;
    border: 2px solid rgba(255,255,255,0.2); border-radius: 12px; cursor: pointer;
    padding: 8px 16px; color: #fff; white-space: nowrap;
    transition: all 0.15s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
}
.btn::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
    opacity: 0; transition: opacity 0.3s ease;
}
.btn:active::after { opacity: 1; }
.btn:active { transform: scale(0.93); }
.btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.btn:not(:disabled):hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.btn-roll { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.btn-roll:not(:disabled):hover { box-shadow: 0 0 20px rgba(231,76,60,0.5); }
.btn-build { background: linear-gradient(135deg, #27ae60, #1e8449); }
.btn-trade { background: linear-gradient(135deg, #2980b9, #1a6fa0); }
.btn-dev { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.btn-end { background: linear-gradient(135deg, #f39c12, #d68910); }
.btn-cancel { background: linear-gradient(135deg, #7f8c8d, #5d6d7e); }
.btn-confirm { background: linear-gradient(135deg, #27ae60, #1e8449); }

/* ===== SCORE PANEL (embedded in inventory now — keep for reference) ===== */

/* ===== BUILD MENU ===== */
#buildMenu {
    bottom: 80px; left: 50%; transform: translateX(-50%);
    display: none; gap: 8px; z-index: 15; padding: 12px 18px;
    flex-wrap: wrap; justify-content: center;
}
#buildMenu.show { display: flex; }
.build-option {
    display: flex; flex-direction: column; align-items: center; padding: 10px 16px;
    background: rgba(39,174,96,0.2); border: 2px solid rgba(39,174,96,0.4);
    border-radius: 12px; cursor: pointer; min-width: 100px; color: #fff; font-size: 0.9em;
    transition: all 0.15s ease;
}
.build-option:disabled { opacity: 0.3; cursor: default; }
.build-option .cost { font-size: 0.75em; color: #a0c0a0; margin-top: 4px; }

/* ===== MODALS ===== */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0); z-index: 100; align-items: center; justify-content: center;
    transition: background 0.3s ease;
}
.modal-overlay.show {
    display: flex;
    background: rgba(0,0,0,0.6);
    animation: modalFadeIn 0.3s ease-out;
}
.modal-box {
    background: linear-gradient(135deg, #1a2a3e, #0d1926); color: #e0e8f0;
    border-radius: 20px; padding: 24px 30px; max-width: 550px; width: 90%;
    border: 2px solid rgba(240,192,64,0.3); max-height: 90vh; overflow-y: auto;
    transform: scale(0.9) rotate(var(--modal-rot, 0deg)); opacity: 0;
    animation: modalBoxIn 0.35s cubic-bezier(.34,1.56,.64,1) 0.05s forwards;
}
.modal-box h2 { color: #f0c040; margin-bottom: 16px; font-size: 1.5em; }
.modal-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.modal-res {
    display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08);
    border-radius: 10px; padding: 6px 12px; transition: background 0.15s ease;
}
.modal-res:hover { background: rgba(255,255,255,0.15); }
.modal-res .emoji { font-size: 1.4em; }
.modal-res .count { font-size: 1.2em; font-weight: bold; min-width: 24px; text-align: center; }
.modal-btn-row { display: flex; gap: 10px; margin-top: 18px; justify-content: center; flex-wrap: wrap; }
.inc-btn {
    width: 40px; height: 40px; font-size: 1.3em; font-weight: bold;
    border: 2px solid rgba(255,255,255,0.3); border-radius: 8px;
    background: rgba(255,255,255,0.1); color: #fff; cursor: pointer;
    transition: all 0.1s ease;
}
.inc-btn:active { background: rgba(255,255,255,0.3); transform: scale(0.9); }

/* Trade Modal specifics */
.trade-section { margin: 12px 0; }
.trade-section h3 { color: #a0c4e8; margin-bottom: 8px; }
.trade-rate { font-size: 0.85em; color: #8899aa; }

.trade-player-btn {
    padding: 12px 20px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1); color: #fff; cursor: pointer;
    font-size: 1em; min-width: 80px; transition: all 0.15s ease;
}
.trade-player-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.03); }
.trade-player-btn:active { background: rgba(255,255,255,0.3); }

/* ===== TRADE POPUP — per-player accept/decline above inventory ===== */
.trade-popup {
    position: fixed;
    z-index: 22;
    background: linear-gradient(160deg, rgba(12, 24, 42, 0.97), rgba(6, 14, 28, 0.98));
    backdrop-filter: blur(14px);
    border: 2px solid rgba(240, 192, 64, 0.4);
    border-radius: 14px;
    padding: 10px 14px;
    min-width: 180px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(240, 192, 64, 0.15);
    animation: tradePopupIn 0.25s ease-out;
    pointer-events: auto;
    color: #e0e8f0;
    font-size: 0.85em;
}

.trade-popup[data-trade-player="top"] {
    transform:rotate(180deg);
}

.trade-popup[data-trade-player="right"] {
    transform:rotate(-90deg);
}

.trade-popup[data-trade-player="left"] {
    transform:rotate(90deg);
}
/* right panel: default bottom is fine (local-above maps to screen-left = towards center) */

.to-offer {
    margin-bottom: 8px;
    line-height: 1.5;
}
.to-actions {
    display: flex; gap: 8px; justify-content: center; margin-top: 6px;
}
.to-btn {
    padding: 6px 14px; border-radius: 10px; border: 2px solid transparent;
    font-size: 0.9em; font-weight: 600; cursor: pointer;
    transition: all 0.12s ease; color: #fff;
}
.to-btn.to-accept {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    border-color: rgba(39, 174, 96, 0.4);
}
.to-btn.to-accept:hover { transform: scale(1.06); box-shadow: 0 0 12px rgba(39, 174, 96, 0.4); }
.to-btn.to-decline {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: rgba(231, 76, 60, 0.4);
}
.to-btn.to-decline:hover { transform: scale(1.06); box-shadow: 0 0 12px rgba(231, 76, 60, 0.4); }
.to-btn:active { transform: scale(0.92); }
.to-status {
    font-weight: 700; font-size: 0.95em; padding: 4px 0;
}
.to-accepted { color: #2ecc71; }
.to-declined { color: #e74c3c; }
.to-cannot { color: #7f8c8d; font-size: 0.8em; font-weight: 400; }

/* Center waiting status */
.tcs-inner {
    background: linear-gradient(160deg, rgba(12, 24, 42, 0.95), rgba(6, 14, 28, 0.97));
    backdrop-filter: blur(14px);
    border: 2px solid rgba(240, 192, 64, 0.3);
    border-radius: 14px;
    padding: 12px 20px;
    color: #e0e8f0; font-size: 0.95em;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

@keyframes tradePopupIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dev card hand — see bottom of file for full styles */

/* Win Screen */
.win-box { text-align: center; }
.win-box h2 { font-size: 2.5em; margin-bottom: 20px; animation: winPulse 1s ease-in-out infinite; }
.win-box .winner-name { font-size: 1.8em; margin-bottom: 20px; }

/* ===== Particle overlay for in-game effects ===== */
#particleCanvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 800px) {
    .btn { font-size: 0.8em; padding: 5px 8px; min-height: 38px; min-width: 38px; }
    .modal-box { padding: 16px 20px; border-radius: 14px; }
    .modal-box h2 { font-size: 1.2em; }
    .setup-btn { width: 240px; padding: 14px 20px; font-size: 1.1em; }
    .settings-box { min-width: unset; width: 90vw; padding: 16px 20px; }
    #setupScreen h1 { font-size: 2.6em; }
    .setup-logo .logo-hex { font-size: 4em; }
    .dice3d { width: 60px; height: 60px; }
    .dice-face { width: 60px; height: 60px; }
    .dice-face span { font-size: 42px; }
    .face-1 { transform: rotateY(0deg) translateZ(30px); }
    .face-2 { transform: rotateY(180deg) translateZ(30px); }
    .face-3 { transform: rotateY(-90deg) translateZ(30px); }
    .face-4 { transform: rotateY(90deg) translateZ(30px); }
    .face-5 { transform: rotateX(-90deg) translateZ(30px); }
    .face-6 { transform: rotateX(90deg) translateZ(30px); }
    #diceScene { gap: 30px; }
}
@media (max-width: 600px) {
    .player-inv { padding: 3px 5px; gap: 3px; border-radius: 8px; }
    .player-inv.active { gap: 4px; }
    .inv-main { padding: 4px 6px; border-radius: 8px; }
    .side-btn { width: 34px; height: 34px; font-size: 1em; border-radius: 8px; }
    .inv-row { gap: 3px; }
    .inv-name { font-size: 0.6em; }
    .inv-vp { font-size: 0.55em; padding: 1px 3px; }
    .res-card { width: 24px; height: 36px; }
    .res-card .card-emoji { font-size: 0.8em; }
    .res-card .card-count { font-size: 0.55em; padding: 0 2px; }
    .card-back { min-height: 36px; padding: 2px 5px; }
    .card-back-icon { font-size: 1em; }
    .card-back-count { font-size: 0.8em; }
    .act-btn { width: 28px; height: 28px; border-radius: 6px; }
    .act-btn .ab-icon { font-size: 0.9em; }
    .tool-btn { width: 26px; height: 26px; border-radius: 6px; }
    .tool-btn .tb-emoji { font-size: 0.8em; }
    .tool-btn .tb-img { width: 16px; height: 16px; }
    .dev-badge { font-size: 0.65em; padding: 1px 3px; }
    .inv-actions { gap: 2px; }
    .dice-floater { padding: 2px 8px; }
    .df-die { width: 20px; height: 20px; font-size: 0.7em; }
    .df-sum { font-size: 0.75em; }
    .df-plus, .df-eq { font-size: 0.55em; }
}
@media (max-height: 500px) {
    .player-inv[data-pos="left"],
    .player-inv[data-pos="right"] {
        max-width: 280px;
    }
    .res-card { width: 26px; height: 36px; }
    .act-btn { width: 30px; height: 30px; }
    .act-btn .ab-icon { font-size: 0.9em; }
}

/* Portrait phone: move side panels to bottom area, no rotation */
@media (max-width: 480px) {
    .player-inv[data-pos="left"] {
        left: 4px; top: auto; bottom: 80px;
        transform: none;
    }
    .player-inv[data-pos="right"] {
        right: 4px; top: auto; bottom: 80px;
        transform: none;
    }
    .player-inv[data-pos="top"] {
        transform: translateX(-50%);  /* no rotation on small screens */
    }
    .player-inv[data-pos="bottom"] {
        bottom: 4px;
    }
    .player-inv { font-size: 0.82em; }
    .player-inv.active { gap: 3px; }
    .inv-main { padding: 3px 5px; border-radius: 8px; }
    .side-btn { width: 30px; height: 30px; font-size: 0.9em; border-radius: 8px; }
    .act-btn { width: 26px; height: 26px; border-width: 1px; }
    .act-btn .ab-icon { font-size: 0.85em; }
    .tool-btn { width: 22px; height: 22px; border-radius: 5px; }
    .tool-btn .tb-emoji { font-size: 0.7em; }
    .tool-btn .tb-img { width: 14px; height: 14px; }
    .res-card { width: 22px; height: 34px; border-width: 1px; }
    .res-card .card-emoji { font-size: 0.75em; }
    .res-card .card-count { font-size: 0.5em; }
    .card-back { min-height: 34px; padding: 2px 4px; }
    .inv-recipe { display: none; } /* overlay replaces it on phones too */
    .dev-badge { font-size: 0.6em; }
    .dice-floater { padding: 2px 6px; }
    .df-die { width: 18px; height: 18px; font-size: 0.65em; border-radius: 4px; }
    .df-sum { font-size: 0.7em; }
    .df-plus, .df-eq { font-size: 0.5em; }
    .setup-btn { width: 220px; padding: 13px 20px; font-size: 1em; }
    .setup-btn-group { gap: 8px; }
    #setupScreen h1 { font-size: 2.2em; }
    .setup-logo .logo-hex { font-size: 3.5em; }
    .setup-footer { font-size: 1.2em; letter-spacing: 8px; }
    #diceScene { gap: 20px; }
    .dice3d { width: 50px; height: 50px; }
    .dice-face { width: 50px; height: 50px; }
    .dice-face span { font-size: 34px; }
    .face-1 { transform: rotateY(0deg) translateZ(25px); }
    .face-2 { transform: rotateY(180deg) translateZ(25px); }
    .face-3 { transform: rotateY(-90deg) translateZ(25px); }
    .face-4 { transform: rotateY(90deg) translateZ(25px); }
    .face-5 { transform: rotateX(-90deg) translateZ(25px); }
    .face-6 { transform: rotateX(90deg) translateZ(25px); }
    .modal-box { width: 95%; padding: 14px 16px; border-radius: 12px; }
    .settings-box { padding: 14px 16px; }
    .stg-btn { padding: 8px; font-size: 0.85em; }
}

/* ===== SETTINGS SCREEN ===== */
#settingsScreen {
    display: none; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #0a1628 0%, #1a3a5c 50%, #0a1628 100%);
}
.settings-box {
    background: rgba(10, 22, 40, 0.92); border-radius: 20px;
    padding: 30px 40px; min-width: 380px; max-width: 95vw;
    border: 2px solid rgba(240,192,64,0.25);
    backdrop-filter: blur(10px);
}
.settings-box h2 {
    color: #f0c040; font-size: 1.6em; margin-bottom: 20px; text-align: center;
}
.setting-label {
    display: block; color: #a0c4e8; font-size: 0.95em;
    font-weight: bold; margin: 16px 0 8px;
}
.setting-row {
    display: flex; gap: 8px; align-items: center;
}
.setting-hint {
    font-size: 0.78em; color: #6a8aa0; margin-top: 4px;
    min-height: 1.5em; transition: color 0.2s;
}
.stg-btn {
    flex: 1; padding: 10px 12px; font-size: 0.95em; font-weight: bold;
    border: 2px solid rgba(255,255,255,0.15); border-radius: 10px;
    background: rgba(255,255,255,0.06); color: #8aa0b8; cursor: pointer;
    transition: all 0.15s ease;
}
.stg-btn.active {
    background: linear-gradient(135deg, #f0c040, #e6a800);
    color: #1a1a2e; border-color: #f0c040;
}
.stg-btn:hover:not(.active) {
    background: rgba(255,255,255,0.12); color: #c0d0e0;
}
.slider-val {
    font-size: 1.5em; font-weight: bold; color: #f0c040;
    min-width: 36px; text-align: center;
}
#vpSlider {
    flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
    background: rgba(255,255,255,0.15); border-radius: 3px; outline: none;
}
#vpSlider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px;
    border-radius: 50%; background: #f0c040; cursor: pointer;
    box-shadow: 0 0 8px rgba(240,192,64,0.5);
}

/* ===== INLINE ACTION BUTTONS (inside active player panel) ===== */
.inv-actions {
    display: flex; gap: 4px; align-items: center; justify-content: center;
    padding: 2px 0;
}
.act-btn {
    width: 41px; height: 41px; border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06); color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s ease; padding: 0; flex-shrink: 0;
}
.act-btn .ab-icon {
    font-size: 1.3em;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.act-btn:not(:disabled):hover {
    background: rgba(255,255,255,0.18); transform: scale(1.12);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.act-btn:active { transform: scale(0.9); }
.act-btn:disabled { opacity: 0.2; cursor: default; transform: none; }
.act-btn.act-end {
    background: linear-gradient(135deg, #f39c12, #d68910);
    border-color: rgba(243,156,18,0.3);
}
.act-btn.act-dev {
    border-color: rgba(142,68,173,0.3);
}
.act-btn.act-cancel {
    background: linear-gradient(135deg, #7f8c8d, #5d6d7e);
}

/* ===== TOOLBAR (peek + dev view + recipe buttons) ===== */
.inv-toolbar {
    display: flex; gap: 4px; flex-shrink: 0;
}
.tool-btn {
    width: 34px; height: 34px; border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s ease; padding: 0;
}
.tool-btn .tb-emoji {
    font-size: 1.05em;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.tool-btn .tb-img {
    width: 20px; height: 20px; object-fit: contain;
}
.tool-btn:hover {
    background: rgba(255,255,255,0.18); transform: scale(1.1);
}
.tool-btn:active { transform: scale(0.9); }
.tool-btn:disabled { opacity: 0.2; cursor: default; transform: none; }

/* Expanded cards row (when peeking in active panel) */
.inv-cards--expanded {
    display: flex; gap: 3px; align-items: flex-end;
    justify-content: center;
    padding: 2px 0;
}

/* ===== RECIPE OVERLAY (floating screen center) ===== */
#recipeOverlay {
    display: none; position: fixed; inset: 0; z-index: 50;
    align-items: center; justify-content: center;
    pointer-events: none;
}
#recipeOverlay.show {
    display: flex;
}
.recipe-wrapper {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recipe-card {
    pointer-events: auto;
    background: rgba(10, 20, 36, 0.96);
    border: 2px solid rgba(240,192,64,0.35);
    border-radius: 16px;
    padding: 18px 24px;
    min-width: 220px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    animation: modalBoxIn 0.25s cubic-bezier(.34,1.56,.64,1) both;
}
.recipe-header {
    display: flex; align-items: center; justify-content: space-between;
    color: #f0c040; font-weight: bold; font-size: 1.1em;
    margin-bottom: 14px; gap: 12px;
}
.recipe-close {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08); color: #fff;
    font-size: 0.9em; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s;
}
.recipe-close:hover { background: rgba(255,255,255,0.2); }
.recipe-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.recipe-row:last-child { border-bottom: none; }
.recipe-icon { font-size: 1.4em; flex-shrink: 0; }
.recipe-name { color: #f0c040; font-weight: bold; min-width: 80px; font-size: 0.95em; }
.recipe-cost { color: #c8d8e8; font-size: 0.9em; white-space: nowrap; margin-left: auto; }

/* Remove old inline recipe styles */

/* ===== DEV CARD OVERLAY (private, near player panel) ===== */
#devCardOverlay {
    display: none; position: fixed; inset: 0; z-index: 110;
    pointer-events: none;
}
#devCardOverlay.show { display: flex; }
#devCardOverlay[data-pos="bottom"] { align-items: flex-end; justify-content: center; }
#devCardOverlay[data-pos="top"]    { align-items: flex-start; justify-content: center; }
#devCardOverlay[data-pos="left"]   { align-items: center; justify-content: flex-start; }
#devCardOverlay[data-pos="right"]  { align-items: center; justify-content: flex-end; }

.dev-panel-wrapper {
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
}
.dev-panel {
    pointer-events: auto;
    background: rgba(10, 15, 28, 0.97);
    border: 2px solid rgba(142,68,173,0.5);
    border-radius: 14px;
    padding: 12px 16px;
    min-width: 180px; max-width: 280px;
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 32px rgba(0,0,0,0.7);
    animation: modalBoxIn 0.22s cubic-bezier(.34,1.56,.64,1) both;
    margin: 6px;
}
.dev-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    color: #d4a0f0; font-weight: bold; font-size: 0.95em;
    margin-bottom: 10px; gap: 8px;
}
.dev-panel-close {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08); color: #fff;
    font-size: 0.85em; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.12s;
}
.dev-panel-close:hover { background: rgba(255,255,255,0.2); }

/* ===== DEV CARD BUTTONS (inside private panel) ===== */
.dev-card {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 7px 10px; margin: 3px 0;
    background: rgba(142,68,173,0.18);
    border: 1.5px solid rgba(142,68,173,0.35); border-radius: 10px;
    cursor: pointer; color: #fff; font-size: 0.82em;
    transition: all 0.15s ease; text-align: left;
}
.dev-card:not(:disabled):hover { background: rgba(142,68,173,0.38); }
.dev-card:disabled { opacity: 0.35; cursor: default; }
.dev-card .dev-emoji { font-size: 1.4em; flex-shrink: 0; }
.dev-card .dev-info { display: flex; flex-direction: column; }
.dev-card .dev-name { font-weight: bold; color: #d4a0f0; }
.dev-card .dev-count { font-size: 0.85em; color: #8a9aaa; }

/* ===== RECIPE CARD — dev info section ===== */
.recipe-divider {
    border: none; border-top: 1px solid rgba(255,255,255,0.1);
    margin: 10px 0;
}
.recipe-section-title {
    font-size: 0.78em; color: rgba(240,192,64,0.7); font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.recipe-dev-row {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.78em;
}
.recipe-dev-row:last-child { border-bottom: none; }
.recipe-dev-row .recipe-icon { font-size: 1.2em; flex-shrink: 0; padding-top: 1px; }
.recipe-dev-row .recipe-name { color: #d4a0f0; font-weight: bold; white-space: nowrap; }
.recipe-dev-row .recipe-cost { color: #8a9aaa; margin-top: 1px; line-height: 1.3; }