:root { --p1-color: #2196F3; --p2-color: #F44336; --bg-color: #eceff1; --board-bg: #263238; --cell-bg: #fff; --text-color: #333; --accent-blue: #2196F3; --wall-color: #b0bec5; --label-color: #b0bec5; }
body.theme-pastel { --bg-color: #e0f2f1; --board-bg: #80cbc4; --cell-bg: #ffffff; --text-color: #004d40; --wall-color: #00796b; --label-color: #004d40; }
body.theme-wood { --bg-color: #d7ccc8; --board-bg: #4e342e; --cell-bg: #ffe0b2; --text-color: #3e2723; --wall-color: #3e2723; --label-color: #ffe0b2; }

body { font-family: 'Segoe UI', sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; transition: 0.3s; }
.main-layout { display: flex; gap: 40px; align-items: flex-start; max-width: 1100px; flex-wrap: wrap; justify-content: center; }
.game-column { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; width: 360px; }
h1.game-title { margin: 0; font-family: 'Georgia', serif; font-size: 32px; letter-spacing: 2px; font-weight: bold; }

.cpu-status { display: flex; align-items: center; gap: 15px; font-weight: bold; height: 50px; }
#cpu-avatar { font-size: 32px; }
#timer-display { font-family: 'Courier New', monospace; font-size: 24px; color: #d32f2f; font-weight: bold; background: #fff; padding: 2px 10px; border-radius: 8px; border: 2px solid #90a4ae; }

.message-bubble { 
    width: 100%; max-width: 340px;
    background: rgba(255,255,255,0.9); padding: 15px; border-radius: 12px; border: 2px solid #90a4ae; 
    font-size: 15px; min-height: 70px; text-align: center; color: #333; 
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    word-break: break-all; overflow-wrap: break-word; white-space: normal; line-height: 1.4;
}

.board-container { display: grid; grid-template-columns: 35px 1fr; grid-template-rows: 35px 1fr; background: var(--board-bg); padding: 12px; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.label-x-container { grid-column: 2; display: flex; gap: 2px; }
.label-y-container { grid-row: 2; display: flex; flex-direction: column; gap: 2px; }
.label { display: flex; justify-content: center; align-items: center; color: var(--label-color); font-family: 'Arial Rounded MT Bold', sans-serif; font-weight: bold; font-size: 20px; flex-shrink: 0; }
.label-x { width: 60px; height: 35px; }
.label-y { width: 35px; height: 60px; }
#game-board { grid-column: 2; grid-row: 2; display: grid; gap: 2px; padding: 0; grid-template-columns: repeat(5, 60px); position: relative; }

.cell { width: 60px; height: 60px; background: var(--cell-bg); border-radius: 2px; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; }
.cell.banned { background: #cfd8dc; cursor: not-allowed; opacity: 0.7; }
.cell.banned::after { content: "×"; color: #90a4ae; font-size: 30px; font-weight: bold; }

.piece { 
    width: 50px; height: 50px; 
    border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    font-size: 28px; font-weight: bold; color: white; 
    z-index: 10; box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.p1 { background: var(--p1-color); }
.p2 { background: var(--p2-color); }
.last-move { outline: 3px solid #ffeb3b; outline-offset: 2px; }
.win-piece { border: 4px solid #FFD700; box-shadow: 0 0 15px #FFD700; animation: pulseWin 1s infinite; }
@keyframes pulseWin { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes piecePlaceAnim { 0% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.piece.just-placed-anim { animation: piecePlaceAnim 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

.line-segment { position: absolute; height: 6px; border-radius: 3px; transform-origin: left center; z-index: 20; opacity: 0.8; box-shadow: 0 2px 4px rgba(0,0,0,0.3); pointer-events: none; }
.line-p1 { background: var(--p1-color); border: 1px solid #fff; }
.line-p2 { background: var(--p2-color); border: 1px solid #fff; }

.action-panel { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.btn-row { display: flex; gap: 10px; }
.btn-row button { flex: 1; padding: 12px; cursor: pointer; border-radius: 8px; border: 1px solid #b0bec5; background: #fff; font-weight: bold; }

.info-column { width: 340px; display: flex; flex-direction: column; gap: 20px; }
.side-section { background: rgba(255,255,255,0.6); padding: 18px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); }
.side-section h3 { margin-top: 0; font-size: 18px; border-left: 5px solid #37474f; padding-left: 10px; margin-bottom: 12px; }
#history-log { background: #fff; padding: 10px; border: 1px solid #cfd8dc; height: 180px; overflow-y: auto; font-size: 13px; font-family: monospace; white-space: pre-wrap; line-height: 1.6; color: #333; }

.blue-primary-btn { width: 100%; padding: 15px; background: var(--accent-blue); color: white; border: none; border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(33,150,243,0.3); transition: 0.2s; }
.blue-primary-btn.pulse { animation: pulseAnim 2s infinite; }
@keyframes pulseAnim { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }

#start-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 100; display: flex; justify-content: center; align-items: center; color: #fff; backdrop-filter: blur(5px); }
.setup-card { background: #37474f; padding: 40px; border-radius: 25px; text-align: center; width: 350px; }
.setup-row { margin-bottom: 15px; text-align: left; }
.setup-row select { width: 100%; padding: 8px; margin-top: 5px; border-radius: 6px; }
.lang-toggle-setup { margin-bottom: 20px; display: flex; justify-content: center; gap: 10px; }
.lang-btn { padding: 6px 12px; border: 1px solid #fff; background: transparent; color: #fff; cursor: pointer; border-radius: 20px; font-size: 12px; }
.lang-btn.active { background: #fff; color: #37474f; }

.stats-display { font-size: 14px; font-weight: bold; color: var(--accent-blue); margin-bottom: 10px; }
footer { margin-top: 40px; font-size: 12px; text-align: center; opacity: 0.6; line-height: 1.6; }