:root { color-scheme: dark; background: #172127; color: #f3ead7; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
#game { width: 100%; height: 100%; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#game canvas { display: block; touch-action: none; }
#startup-error { position: absolute; inset: 20px; height: fit-content; padding: 20px; background: #432d2b; border-radius: 8px; }
.world-controls { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; }
.world-controls[hidden] { display: none; }
.world-controls button { padding: 10px 14px; border: 1px solid #adbd83; border-radius: 4px; background: #23372e; color: #f3ead7; font: inherit; cursor: pointer; pointer-events: auto; }
.world-controls span { padding: 8px 12px; border-radius: 4px; background: #172127dd; font-size: 14px; }
.world-dialog-overlay { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: #071016aa; }
.world-dialog { width: min(480px, 100%); max-height: 100%; overflow-y: auto; padding: 24px; border: 2px solid #829089; border-radius: 20px; background: #f3ead7; color: #172127; text-align: center; box-shadow: 0 12px 40px #0008; }
.world-dialog h2 { margin: 0 0 10px; font-size: 26px; }
.world-dialog p { margin: 0 0 20px; color: #51615a; line-height: 1.5; }
.world-dialog-opponents { display: flex; gap: 10px; justify-content: center; margin: 20px 0 24px; }
.world-dialog-player { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border: 1px solid #cbbda1; border-radius: 12px; background: #e6dcc7; }
.world-dialog-player canvas, .world-dialog-avatar { width: 64px; height: 64px; image-rendering: pixelated; }
.world-dialog-avatar { display: grid; place-items: center; border-radius: 50%; background: #cad4ba; font-size: 30px; }
.world-dialog-player strong { width: 100%; overflow-wrap: anywhere; }
.world-dialog-player span { font-size: 13px; color: #51615a; }
.world-dialog-actions { display: flex; gap: 12px; }
.world-dialog-actions button { flex: 1; padding: 12px 8px; border: 1px solid #809184; border-radius: 10px; background: #ded6c4; color: #25382e; font: inherit; font-weight: 600; cursor: pointer; }
.world-dialog-actions button:first-child { background: #365e46; color: #fff5dc; }
.world-dialog-actions button:hover { filter: brightness(1.08); }
.word-description-dialog p { white-space: pre-wrap; text-align: left; overflow-wrap: anywhere; }
.new-game-dialog { color-scheme: light; }
.new-game-dialog label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; text-align: left; }
.new-game-dialog select { padding: 8px; font: inherit; }
.new-game-dialog button:disabled { opacity: .45; cursor: not-allowed; }