html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #222;
}
#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}

#p1Stats {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    color: white;
    font-family: sans-serif;
    background: rgba(0,0,255,0.2);
    padding: 15px 20px;
    border-radius: 8px;
    border: 2px solid #4287f5;
    min-width: 200px;
    max-height: 40vh; 
    overflow-y: auto; 
}

#aiStats {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    color: white;
    font-family: sans-serif;
    background: rgba(255,0,0,0.2);
    padding: 15px 20px;
    border-radius: 8px;
    border: 2px solid #f54242;
    min-width: 200px;
    max-height: 40vh; 
    overflow-y: auto; 
}

.bankAmount { font-size: 24px; font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid #555; padding-bottom: 5px; }
.debtAmount { font-size: 18px; color: #ff6b6b; margin-bottom: 10px; border-bottom: 1px solid #555; padding-bottom: 10px; }
.portfolioList { font-size: 16px; line-height: 1.6; }

#uiContainer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    width: 80%;
}

button {
    padding: 15px 30px; font-size: 20px; font-weight: bold; cursor: pointer;
    background-color: #4CAF50; color: white; border: none; border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: background-color 0.2s; margin: 0 10px;
}
button:hover { background-color: #45a049; }
button:disabled { background-color: #888; cursor: not-allowed; }

#buyBtn { background-color: #2196F3; }
#creditBtn { background-color: #9C27B0; }
#passBtn { background-color: #f44336; }

#actionMenu { display: none; margin-top: 10px; }

#upgradeMenu { 
    display: none; margin-top: 10px; background: rgba(0,0,0,0.8); 
    padding: 15px; border-radius: 8px; color: white; border: 2px solid #4CAF50;
}
#upgradeSlider { width: 80%; margin: 10px 0; }
.propSelect { font-size: 18px; padding: 5px; margin-bottom: 10px; }

#status {
    color: white; font-family: sans-serif; margin-bottom: 10px; font-size: 22px; font-weight: bold;
    text-shadow: 2px 2px 4px black; background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 5px; display: inline-block;
}

/* Lobby Specific */
#lobby {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border: 2px solid #4CAF50;
    font-family: sans-serif;
}
#lobby input {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: none;
    width: 200px;
    font-size: 16px;
}
#playerList {
    margin-top: 20px;
    text-align: left;
}

/* Crisp screen text complements the printed 3D board labels. */
#propertyDetails {
    position: fixed; right: 20px; top: calc(40vh + 40px); z-index: 20;
    box-sizing: border-box; width: 280px; max-height: calc(60vh - 160px); overflow-y: auto;
    padding: 16px 20px; border-radius: 10px; border-top: 8px solid #ddd;
    background: #fffdf5; color: #18212b; font: 16px/1.45 Arial, sans-serif;
    box-shadow: 0 8px 28px #0008;
}
#propertyDetails[hidden], #propertyDetailFacts[hidden] { display: none; }
#propertyDetailType { text-transform: uppercase; font-size: 12px; font-weight: bold; letter-spacing: 1px; }
#propertyDetailName { font-size: 24px; line-height: 1.2; margin: 8px 24px 16px 0; overflow-wrap: anywhere; }
#propertyDetailFacts { margin: 0; }
#propertyDetailFacts div { display: flex; gap: 12px; justify-content: space-between; margin: 6px 0; }
#propertyDetailFacts dt { color: #43505d; }
#propertyDetailFacts dd { margin: 0; text-align: right; font-weight: bold; overflow-wrap: anywhere; min-width: 0; }
#propertyDetailNote { font-size: 13px; margin: 12px 0 0; }
#closePropertyDetails { position: absolute; right: 4px; top: 5px; margin: 0; padding: 2px 10px; color: #18212b; background: transparent; box-shadow: none; font-size: 26px; }
#boardTools { position: fixed; bottom: 8px; left: 12px; z-index: 15; color: white; font: 12px Arial, sans-serif; }
#boardTools button { padding: 6px 10px; margin: 0 8px 0 0; font-size: 13px; background: #263746; }
#boardTools span { display: block; margin-top: 6px; }
@media (max-width: 800px) {
    #propertyDetails { right: 10px; top: auto; bottom: 155px; width: min(280px, calc(100vw - 20px)); max-height: 32vh; }
    #boardTools span { display: none; }
}
/* SVG edition */
html, body { background: #162e28; color: #eef5e7; font-family: Arial, sans-serif; }
#boardViewport { position: absolute; inset: 0 350px 50px 0; overflow: auto; background: radial-gradient(ellipse, #365b48, #19392e); }
#renderCanvas { display: block; width: 100%; height: 100%; touch-action: pan-x pan-y; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; text-rendering: geometricPrecision; }
.board-tile { cursor: pointer; }
.board-tile:hover > rect:first-of-type, .board-tile:focus > rect:first-of-type { stroke: #df981e; stroke-width: 5; fill: #fff5cf; }
.board-tile:focus { outline: none; }
.board-title { font: 900 84px Georgia, serif; fill: #1c4734; letter-spacing: 4px; }
.board-eyebrow { font: 800 20px Arial, sans-serif; fill: #486e58; letter-spacing: 7px; }
.board-subtitle { font: italic 28px Georgia, serif; fill: #486e58; }
.tower { cursor: pointer; }
.die.rolling { animation: diceBounce .8s ease-out; }
@keyframes diceBounce { 30% { transform: translateY(-35px) rotate(15deg); } 65% { transform: translateY(-10px) rotate(-8deg); } }
#lobby { box-sizing: border-box; transform: none; left: auto; right: 12px; top: 20px; width: 326px; padding: 22px; background: #203e34; border: 1px solid #668770; box-shadow: none; z-index: 25; }
#lobby h1 { font: 30px Georgia, serif; margin: 0 0 10px; }
#lobby p { font-size: 14px; color: #d4e3d0; }
#lobby input { box-sizing: border-box; width: 100%; margin: 10px 0; }
#towerPreview { margin-top: 24px; text-align: left; font-size: 14px; border-top: 1px solid #ffffff30; padding-top: 18px; }
#towerPreview label, #towerPreview small { display: block; }
#towerPreview small { color: #c6d8c5; line-height: 1.4; }
#p1Stats, #aiStats { box-sizing: border-box; left: auto; right: 12px; width: 326px; min-width: 0; padding: 14px; max-height: 23vh; background: #203e34; }
#p1Stats { top: 12px; } #aiStats { top: calc(23vh + 24px); }
.bankAmount { font-size: 19px; }
#uiContainer { box-sizing: border-box; left: auto; right: 12px; bottom: 12px; width: 326px; transform: none; z-index: 30; background: #162e28; padding: 12px 0; }
#status { font-size: 16px; padding: 10px; }
button { padding: 10px 16px; margin: 4px; font-size: 16px; }
#propertyDetails { right: 12px; top: calc(46vh + 38px); width: 326px; max-height: calc(54vh - 245px); min-height: 130px; }
#boardTools { left: 14px; right: 350px; bottom: 10px; }
#boardTools span { display: inline; margin-left: 10px; }
#boardTools a { color: #dfebd7; font-size: 12px; margin-left: 10px; }
#boardTools button { padding: 7px 12px; }
@media (max-width: 850px) {
    html, body { overflow: auto; height: auto; min-height: 100%; }
    #boardViewport { position: relative; inset: auto; width: 100%; height: 78vh; min-height: 420px; }
    #boardTools { position: relative; inset: auto; padding: 10px; }
    #boardTools span { display: none; }
    #lobby, #p1Stats, #aiStats, #uiContainer, #propertyDetails { position: relative; inset: auto; transform: none; width: calc(100% - 24px); max-height: none; min-height: 0; margin: 12px; }
    #lobby { z-index: auto; }
    body { display: flex; flex-direction: column; }
    #boardViewport { order: -3; } #boardTools { order: -2; } #propertyDetails { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .die.rolling { animation: none; } }
#gameSidebar { position: fixed; right: 0; top: 0; bottom: 0; width: 350px; overflow-y: auto; box-sizing: border-box; padding: 12px; display: flex; flex-direction: column; gap: 12px; background: #162e28; }
#gameSidebar > #lobby, #gameSidebar > #p1Stats, #gameSidebar > #aiStats, #gameSidebar > #propertyDetails, #gameSidebar > #uiContainer { position: relative; inset: auto; transform: none; width: 100%; margin: 0; flex-shrink: 0; }
#gameSidebar > #propertyDetails { max-height: 260px; min-height: 0; }
#gameSidebar > #uiContainer { position: sticky; bottom: 0; margin-top: auto; }
#chatPanel { border: 1px solid #668770; border-radius: 10px; padding: 12px; background: #203e34; }
#chatTitle { margin: 0 0 10px; font-size: 17px; }
#chatMessages { height: 155px; overflow-y: auto; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#chatMessages:empty::before { content: 'No messages yet. Say hello!'; color: #bed0bf; }
.chat-message { margin-bottom: 8px; white-space: pre-wrap; }
.chat-message strong { color: #f8d78d; }
#chatForm { display: flex; gap: 6px; margin-top: 10px; }
#chatInput { min-width: 0; width: 100%; border: 1px solid #8aa18f; border-radius: 5px; padding: 9px; font-size: 14px; background: #fffdf5; color: #182e24; }
#chatSend { margin: 0; padding: 9px 12px; font-size: 14px; }
#chatStatus { color: #ffd49a; font-size: 12px; margin: 6px 0 0; }
@media (max-width: 850px) {
    #gameSidebar { position: relative; inset: auto; width: 100%; overflow: visible; }
    #gameSidebar > #uiContainer { position: relative; }
}

/* Avatar Picker */
.avatar-btn {
    background: #19362c;
    border: 2px solid #3c6b57;
    border-radius: 8px;
    font-size: 20px;
    padding: 6px 10px;
    cursor: pointer;
    box-shadow: none;
    margin: 0;
    transition: transform 0.15s, border-color 0.15s, background-color 0.15s;
}
.avatar-btn:hover {
    background: #255042;
    transform: scale(1.1);
}
.avatar-btn.selected {
    border-color: #ffd700;
    background: #295747;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    transform: scale(1.12);
}

/* Sidebar Tabs */
#sidebarTabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #365b4c;
    margin-bottom: 10px;
}
.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 6px 6px 0 0;
    color: #a4c7b2;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: none;
    margin: 0;
}
.tab-btn.active {
    background: #284c40;
    color: #ffd700;
    border-bottom: 2px solid #ffd700;
}
.tab-btn:hover:not(.active) {
    background: #1c3b31;
    color: #e2ede5;
}

/* Match Log Entries */
.log-entry {
    padding: 4px 6px;
    margin-bottom: 4px;
    border-radius: 4px;
    background: #1a332a;
    font-size: 12px;
    line-height: 1.4;
    border-left: 3px solid #436959;
}
.log-entry.roll { border-left-color: #ffd700; }
.log-entry.buy { border-left-color: #2196F3; }
.log-entry.rent { border-left-color: #e91e63; }
.log-entry.chance { border-left-color: #ff9800; }
.log-entry.pot { border-left-color: #4CAF50; }
.log-entry.debt { border-left-color: #9C27B0; }
.log-time {
    color: #88a896;
    font-size: 11px;
    margin-right: 6px;
}

/* Monopoly Set Badge */
.monopoly-badge {
    color: #ffd700;
    font-size: 12px;
    margin-left: 4px;
    vertical-align: middle;
}

/* 2–4 Player Dynamic Stats Cards */
#playerStatsContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.player-stat-card {
    background: #17332a;
    border: 2px solid #365b4c;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: #e2ede5;
    transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.player-stat-card.active-turn {
    border-color: #ffd700 !important;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.45);
}

.player-stat-card.is-me {
    background: #1b3d32;
}

.player-stat-card.bankrupt {
    opacity: 0.45;
    border-color: #555 !important;
    filter: grayscale(0.8);
}

.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
}

.player-card-body {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
}

.player-card-portfolio {
    border-top: 1px dashed #2d4f42;
    padding-top: 4px;
    margin-top: 4px;
    font-size: 12px;
    max-height: 80px;
    overflow-y: auto;
}