:root { color-scheme: dark; background: #1b201e; color: #f4f1e5; 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); }
.hint-dialog .world-dialog-actions { flex-direction: column; }
.hint-dialog button:disabled { opacity: .45; cursor: not-allowed; }
.word-description-dialog p { white-space: pre-wrap; text-align: left; overflow-wrap: anywhere; }
.dictionary-dialog { display: flex; flex-direction: column; min-height: 0; max-height: min(100%, calc(100dvh - 40px)); padding: 16px; overflow: hidden; color-scheme: light; text-align: left; }
.dictionary-body { min-height: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; }
@media (orientation: landscape) { .dictionary-dialog { width: min(760px, 100%); } }
.dictionary-dialog p { margin: 10px 0; font-size: 14px; overflow-wrap: anywhere; }
.dictionary-dialog label { display: block; font-weight: 600; }
.dictionary-search-row { display: flex; gap: 8px; margin-top: 8px; }
.dictionary-search-row input { min-width: 0; width: 100%; padding: 10px; border: 1px solid #809184; border-radius: 8px; background: #fffaf0; color: #172127; font: inherit; }
.dictionary-dialog button { min-height: 44px; padding: 8px 12px; border: 1px solid #809184; border-radius: 8px; background: #426378; color: #fff5dc; font: inherit; cursor: pointer; }
.dictionary-dialog a { color: #275979; }
.dictionary-dialog button:disabled { opacity: .45; cursor: not-allowed; }
.dictionary-dialog :focus-visible { outline: 2px solid #275979; outline-offset: 2px; }
.dictionary-dialog .world-dialog-actions { margin-top: 12px; }
.dictionary-results article { padding: 12px 0; border-top: 1px solid #cbbda1; }
.dictionary-results p { white-space: pre-wrap; }
.dictionary-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.dictionary-pages[hidden] { display: none; }
.new-game-dialog, .rules-dialog { color-scheme: dark; background: #272e29; color: #f4f1e5; border: 1px solid #526158; border-radius: 10px; }
.new-game-dialog p, .rules-dialog p { color: #bac6bb; }
.new-game-dialog label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; text-align: left; }
.new-game-dialog .new-game-choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 170px); align-items: center; gap: 12px; margin: 16px 0; text-align: left; }
.new-game-choice > label { margin: 0; }
.new-game-choice select { min-width: 0; width: 100%; }
.new-game-rules-controls { display: flex; gap: 8px; }
.new-game-rules-controls button { flex: 0 0 44px; min-height: 44px; padding: 8px; border: 1px solid #526158; border-radius: 6px; background: #343e36; color: #f4f1e5; font: inherit; font-weight: 700; cursor: pointer; }
.new-game-dialog :focus-visible, .rules-dialog :focus-visible { outline: 2px solid #d9bd7a; outline-offset: 2px; }
.new-game-dialog select { padding: 8px; min-height: 44px; font: inherit; color: #f4f1e5; background: #343e36; border: 1px solid #526158; border-radius: 6px; }
.new-game-dialog input[type="checkbox"] { width: 20px; height: 20px; accent-color: #d9bd7a; }
.new-game-dialog .world-dialog-actions { position: sticky; bottom: -24px; margin: 0 -24px -24px; padding: 16px 24px 24px; background: #272e29; }
.new-game-dialog .world-dialog-actions button, .rules-dialog .world-dialog-actions button { min-height: 44px; background: #d9bd7a; color: #20291f; border: 1px solid #d9bd7a; border-radius: 10px; }
.new-game-dialog button:disabled { opacity: .45; cursor: not-allowed; }
.rules-dialog { display: flex; flex-direction: column; width: min(760px, 100%); min-height: 0; overflow: hidden; }
.rules-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; text-align: left; line-height: 1.45; }
.rules-body h3 { margin: 0 0 8px; font-size: 18px; color: #d9bd7a; }
.rules-body ul { margin: 0 0 18px; padding-left: 22px; }
.rules-body li + li { margin-top: 8px; }
.rules-dialog .world-dialog-actions { flex-shrink: 0; margin-top: 16px; }
.statistics-dialog { display: flex; flex-direction: column; width: min(640px, 100%); min-height: 0; overflow: hidden; background: #272e29; color: #f4f1e5; border: 1px solid #526158; border-radius: 10px; }
.statistics-dialog p { color: #bac6bb; font-size: 14px; }
.statistics-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.statistics-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.statistics-body th { position: sticky; top: 0; background: #343e36; color: #d9bd7a; }
.statistics-body th, .statistics-body td { padding: 10px 6px; border-bottom: 1px solid #526158; text-align: right; }
.statistics-body th:first-child, .statistics-body td:first-child { width: 50%; text-align: left; overflow-wrap: anywhere; }
.statistics-human { color: #d9bd7a; font-weight: bold; }
.statistics-dialog .world-dialog-actions { flex-shrink: 0; margin-top: 16px; }