/* Integrated board game styles (copied) */
:root { --bg:#16120e; --panel:#1b222c; --panel-accent:#243140; --board-bg:#56513d; --grid-line:#2d3a4a; --p0:#4ec9b0; --p1:#ff7b72; --capital:#f0d94c; --wall:#89a6ff; --tower:#c778ff; --text:#d0d6dc; --danger:#ff4d61; --focus:#8bd2ff; --radius:10px; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(135deg,#0e1116,#18202a 55%, #0e1116); color:var(--text); min-height:100vh; display:flex; flex-direction:column; font-family:'Space Grotesk',system-ui,sans-serif; }
.app-header { padding:0.75rem 1.25rem; display:flex; justify-content:space-between; align-items:center; background:#0c1218cc; backdrop-filter:blur(6px); border-bottom:1px solid #1f2a35; }
.title { font-family:'Rajdhani'; font-weight:700; font-size:1.5rem; letter-spacing:1px; }
.title .subtitle { font-weight:400; font-size:0.9rem; opacity:0.7; margin-left:0.5rem; }
.turn-indicator { font-family:'Rajdhani'; font-weight:600; }
.turn-indicator .clock{ margin-left:10px; padding:.1rem .35rem; border:1px solid #2b3b46; border-radius:6px; background:#121a22; font-weight:700; letter-spacing:1px; opacity:.9; }
.turn-indicator .clock.active{ outline:2px solid var(--focus); outline-offset:2px; }
.settings-btn{ margin-left:10px; background:#1e2a33; color:var(--text); border:1px solid #2a3a46; padding:.2rem .5rem; border-radius:6px; cursor:pointer; }
.settings-btn:hover{ background:#263645; }
.layout { flex:1; display:grid; grid-template-columns:220px 1fr 220px 300px; gap:1rem; padding:1rem; }
.panel { background:var(--panel); border:1px solid #253445; padding:0.75rem 0.9rem; border-radius:var(--radius); display:flex; flex-direction:column; gap:0.75rem; position:relative; }
.panel h2 { margin:0; font-family:'Rajdhani'; font-size:1.2rem; letter-spacing:1px; }
.board-wrapper { position:relative; background:var(--board-bg); padding:0.75rem; border:1px solid #223040; border-radius:var(--radius); box-shadow:0 8px 24px -8px #000a; }
.coord-grid { display:flex; align-items:stretch; }
.y-axis { display:flex; flex-direction:column; justify-content:space-between; margin-right:6px; padding:4px 2px; font-family:'Rajdhani'; font-size:0.65rem; letter-spacing:1px; color:#8aa1b5; }
.y-axis .y-label { flex:1; display:flex; align-items:center; justify-content:center; opacity:.8; }
.board-area { position:relative; flex:1; display:flex; flex-direction:column; }
.board-area .bg-map{ position:absolute; inset:0; width:100%; height:100%; z-index:0; border-radius:8px; overflow:hidden; opacity:.28; }
.board-area .bg-map + #board{ position:relative; z-index:1; }
.x-axis { display:grid; grid-template-columns:repeat(10,1fr); gap:2px; margin-top:6px; font-family:'Rajdhani'; font-size:0.65rem; letter-spacing:1px; color:#8aa1b5; }
.x-axis .x-label { text-align:center; padding:2px 0; opacity:.8; }
.coord-grid .board { flex:1; }
.compass { position:absolute; top:6px; right:6px; width:84px; height:84px; pointer-events:none; opacity:.85; z-index:5; }
.compass .ring { position:relative; width:100%; height:100%; border:2px solid #2f3c48; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Rajdhani'; font-weight:600; letter-spacing:2px; font-size:.7rem; background:radial-gradient(circle at 35% 30%, #1f2a33 0%, #12181f 65%); box-shadow:0 0 10px -4px #000 inset, 0 0 4px -1px #000; }
.compass.large { position:relative; width:160px; height:160px; margin:0.5rem auto 0.25rem; opacity:1; pointer-events:none; }
.compass.large .ring { font-size:.95rem; border-width:3px; }
.rules-link { display:inline-block; text-decoration:none; font-family:'Rajdhani'; font-size:.8rem; letter-spacing:1px; padding:.4rem .7rem; border:1px solid #2d4152; color:var(--text); background:#1c2730; border-radius:6px; transition:background .25s,border-color .25s; text-align:center; }
.rules-link:hover { background:#243544; border-color:#365064; }
.compass .dir { position:absolute; text-shadow:0 2px 4px #000a; }
.compass .north { top:4px; left:50%; transform:translateX(-50%); color:var(--p1); }
.compass .south { bottom:4px; left:50%; transform:translateX(-50%); color:var(--p0); }
.compass .east { right:6px; top:50%; transform:translateY(-50%); }
.compass .west { left:6px; top:50%; transform:translateY(-50%); }
/* Center jewel removed for cleaner needle look */
/* Compass needle (two triangles opposite) */
.compass .needle { position:absolute; left:50%; top:50%; width:0; height:0; transform:translate(-50%,-50%) rotate(0deg); pointer-events:none; }
.compass .needle .tip { position:absolute; left:50%; top:50%; transform:translate(-50%, -100%); width:0; height:0; border:14px solid transparent; border-top:none; }
.compass .needle .tip.red { border-bottom:54px solid #ff3b30; filter:drop-shadow(0 0 4px #ff3b30); z-index:2; }
.compass .needle .tip.white { transform:translate(-50%, 0%) rotate(180deg); border-bottom:54px solid #f5f9ff; filter:drop-shadow(0 0 4px #ffffffaa); opacity:.8; }
.board-wrapper.game-over::after { content:'Game Over'; position:absolute; inset:0; background:#000c; display:flex; align-items:center; justify-content:center; font-family:'Rajdhani'; font-size:3rem; letter-spacing:4px; color:#fff2; text-shadow:0 0 12px #000; pointer-events:none; }
.board { width:100%; aspect-ratio:1/1; display:grid; gap:2px; }
.cell { position:relative; background:rgba(167,157,131,0.28); border:1px solid rgba(45,58,74,0.35); border-radius:6px; cursor:pointer; overflow:hidden; transition:background .25s, transform .25s; }
.cell.edge { box-shadow:0 0 0 1px #000 inset; }
.cell.edge-top.p0 { border-top:2px solid var(--p0); }
.cell.edge-right.p0 { border-right:2px solid var(--p0); }
.cell.edge-bottom.p0 { border-bottom:2px solid var(--p0); }
.cell.edge-left.p0 { border-left:2px solid var(--p0); }
.cell.edge-top.p1 { border-top:2px solid var(--p1); }
.cell.edge-right.p1 { border-right:2px solid var(--p1); }
.cell.edge-bottom.p1 { border-bottom:2px solid var(--p1); }
.cell.edge-left.p1 { border-left:2px solid var(--p1); }
.cell:hover { background:rgba(35,49,63,0.45); }
.cell.selected { outline:2px solid var(--focus); outline-offset:-2px; }
.cell .token { position:absolute; inset:4px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:600; letter-spacing:1px; text-shadow:0 1px 2px #000; box-shadow:0 2px 6px -1px #0009; }
.cell .token.p0 { background:radial-gradient(circle at 30% 25%,#6be7d2,#359b88); }
.cell .token.p1 { background:radial-gradient(circle at 30% 25%,#ff9b8f,#d14b3e); }
.cell .token.capital { border:3px solid var(--capital); font-size:0.55rem; text-transform:uppercase; letter-spacing:2px; }
.forts { position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end; padding:2px; gap:2px; }
.forts .wall { width:10px; height:10px; border-radius:2px; background:linear-gradient(135deg,#6b84ff,#405ad8); box-shadow:0 0 4px -1px #6b84ffcc; }
.forts .tower { width:14px; height:14px; border-radius:3px; background:linear-gradient(135deg,#d296ff,#7d37c4); box-shadow:0 0 6px -1px #c778ffcc; }
.actions { background:var(--panel-accent); border:1px solid #2a3d52; padding:0.75rem; border-radius:var(--radius); display:flex; flex-direction:column; gap:0.75rem; }
.actions h3 { margin:0; font-family:'Rajdhani'; letter-spacing:1px; }
.action-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.5rem; }
.action-buttons button { background:#243646; color:var(--text); border:1px solid #2f465a; padding:0.55rem 0.4rem; font-family:'Rajdhani'; font-weight:600; letter-spacing:1px; font-size:0.85rem; border-radius:6px; cursor:pointer; position:relative; overflow:hidden; transition:background .25s,border-color .25s; }
.action-buttons button:hover { background:#2d4559; }
.action-buttons button:disabled, .action-buttons button.is-disabled { opacity:0.28; cursor:not-allowed; filter:saturate(.2) brightness(.7); pointer-events:none; }
.action-buttons button.end-turn { grid-column:span 2; background:#3a2946; border-color:#4d3860; }
.action-buttons button.end-turn:hover { background:#523560; }
.context-hint { min-height:2.2rem; font-size:0.75rem; opacity:0.85; line-height:1.2rem; padding:0.35rem 0.4rem; background:#1e2a35; border:1px solid #2c3e52; border-radius:6px; }
.stat-group { display:flex; flex-direction:column; gap:0.25rem; }
.stat-group label { font-size:0.65rem; letter-spacing:1px; text-transform:uppercase; opacity:0.7; }
.bar { width:100%; height:10px; background:#10151a; border:1px solid #253341; border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--p0),#2e8774); transition:width .4s ease; }
.bar-fill.p1 { background:linear-gradient(90deg,#ff8565,#b8483d); }
.bar-fill.territory { filter:brightness(1.3); }
.modal { position:fixed; inset:0; background:#000a; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); z-index:1000; }
.modal.hidden { display:none; }
.modal-content { background:var(--panel); padding:2rem 2.2rem; border-radius:18px; border:1px solid #2f4458; width:min(440px,90%); text-align:center; box-shadow:0 12px 40px -12px #000c; animation:pop .6s cubic-bezier(.25,.8,.25,1); }
.modal-content.settings{ text-align:left; width:min(560px,92%); }
.modal-content.settings fieldset{ border:1px solid #2a3947; border-radius:10px; padding:.75rem 1rem; margin-bottom:1rem; }
.modal-content.settings legend{ padding:0 .4rem; font-family:'Rajdhani'; letter-spacing:1px; }
.modal-content.settings label{ font-size:.9rem; }
.settings-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:.5rem; }
.modal-content.settings button{ background:#244b52; color:var(--text); border:1px solid #316570; font-family:'Rajdhani'; padding:0.5rem .9rem; font-weight:600; letter-spacing:1px; border-radius:8px; cursor:pointer; }
.modal-content.settings button:hover{ background:#2d626c; }
@keyframes pop { 0% { transform:scale(.7); opacity:0;} 100% { transform:scale(1); opacity:1; } }
.modal-content h2 { margin-top:0; font-family:'Rajdhani'; font-size:2rem; letter-spacing:2px; }
.modal-content button { background:#244b52; color:var(--text); border:1px solid #316570; font-family:'Rajdhani'; padding:0.75rem 1.5rem; font-weight:600; letter-spacing:1px; border-radius:8px; cursor:pointer; }
.modal-content button:hover { background:#2d626c; }
@media (max-width:1400px) { .layout { grid-template-columns:180px 1fr 180px 260px; } }
@media (max-width:1100px) { .layout { grid-template-columns:1fr 260px; grid-template-rows:auto auto auto; } .panel.left, .panel.right { grid-column:1 / span 2; display:grid; grid-template-columns:repeat(2,1fr); } .actions { grid-column:1 / span 2; } }
@media (max-width:780px) { .layout { grid-template-columns:1fr; } .panel.left, .panel.right, .actions { grid-column:1; } }

/* Legend styles */
.legend-panel { background:#1c2730; border:1px solid #2a3a46; border-radius:8px; padding:0.5rem 0.6rem; }
.legend-panel h3 { margin:.2rem 0 .4rem; font-size:1rem; font-family:'Rajdhani'; }
.legend-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:.25rem; font-size:.8rem; }
.legend-list .swatch { display:inline-block; width:16px; height:16px; border-radius:4px; margin-right:6px; vertical-align:middle; border:1px solid #2a3a46; }
.legend-list .swatch.unit.p0 { background:radial-gradient(circle at 30% 25%,#6be7d2,#359b88); }
.legend-list .swatch.unit.p1 { background:radial-gradient(circle at 30% 25%,#ff9b8f,#d14b3e); }
.legend-list .swatch.capital { background:#0f1420; border:2px solid var(--capital); box-sizing:border-box; }
.legend-list .swatch.wall { background:linear-gradient(135deg,#6b84ff,#405ad8); }
.legend-list .swatch.tower { background:linear-gradient(135deg,#d296ff,#7d37c4); }
.legend-list .swatch.edge.p0 { background:transparent; border:2px solid var(--p0); }
.legend-list .swatch.edge.p1 { background:transparent; border:2px solid var(--p1); }
.legend-list .swatch.terrain { position:relative; overflow:hidden; }
.legend-list .swatch.terrain.river { background:linear-gradient(90deg, #1d9dff, #208bfc); }
.legend-list .swatch.terrain.mountain { background:radial-gradient( #30f14a, #015704); }

/* Terrain overlay inside each cell */
.cell .terrain { position:absolute; inset:0; opacity: 0.28; pointer-events:none; }
.cell .terrain.river { background:linear-gradient(180deg,  #1d9dff, #208bfc); mix-blend-mode:screen; }
.cell .terrain.mountain { background:radial-gradient( #30f14a, #015704); }
/* Optional badge to show mountain level when >1 */
.cell .terrain.mountain[data-level]:after{ content: attr(data-level); position:absolute; right:4px; top:2px; background:#0009; color:#fff; font-size:10px; padding:1px 4px; border-radius:10px; }