* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: start center; background: #111; color: #eee; font: 18px system-ui, sans-serif; }
main { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(480px, 100% - 32px); }
header { display: flex; justify-content: space-between; width: 100%; }
button { background: #222; color: #eee; border: 1px solid #444; border-radius: 8px; padding: 10px 16px; font: inherit; cursor: pointer; }
button:hover { background: #333; }
#menu { min-height: 100dvh; justify-content: flex-start; padding: 24px 0; }
#menu h1 { margin: 0; }
.about { margin: -4px 0 8px; font-size: 15px; line-height: 1.45; color: #999; text-align: center; }
.game { width: 100%; font-size: 24px; padding: 20px; }
#flag { width: 100%; max-height: 300px; object-fit: contain; border-radius: 4px; }
#guess-form { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
#guess-form button { white-space: nowrap; min-width: 0; padding: 10px 8px; }
#guess { grid-column: span 5; min-width: 0; }
#guess-form #enter { font-size: 26px; padding: 0; border-color: #4caf50; background: #1b3a1d; }
#hint, #choices-btn, #skip { grid-column: span 2; }
#guess { width: 100%; padding: 12px; font: inherit; font-size: 22px; background: #000; color: #eee; border: 1px solid #555; border-radius: 8px; text-align: center; }
#feedback { min-height: 1.5em; margin: 0; }
.ok { color: #4caf50; }
.bad { color: #f44336; }
#game:has(#map:not([hidden])) { width: min(960px, 100% - 32px); }
#map { width: 100%; aspect-ratio: 960 / 500; background: #0d1b2a; border-radius: 4px; }
#map path { fill: #3a3a3a; stroke: #111; stroke-width: 0.5px; vector-effect: non-scaling-stroke; }
#map path.target { fill: #e53935; }
#map circle { fill: none; stroke: #e53935; stroke-width: 2px; vector-effect: non-scaling-stroke; }
button:disabled { opacity: 0.4; cursor: default; }
#hint-flag { width: 400px; max-width: 100%; border-radius: 4px; }
#hint-shape { width: 400px; max-width: 100%; aspect-ratio: 400 / 250; background: #0d1b2a; border-radius: 4px; }
#hint-shape path { fill: #3a3a3a; stroke: #111; stroke-width: 0.5px; }
#hint-shape path.target { fill: #e53935; stroke: #fff; stroke-width: 0.75px; }
#hint-shape circle { fill: none; stroke: #e53935; stroke-width: 2px; }
.elo { display: block; font-size: 14px; color: #999; margin-top: 4px; }
#game { padding: 16px 0 48px; }
.header-right { display: flex; align-items: center; gap: 12px; }
header button { height: 44px; padding: 0 14px; }
#study { font-size: 20px; opacity: 0.5; }
#study.on { opacity: 1; border-color: #4caf50; background: #1b3a1d; }
#facts { margin: 0; padding: 12px 16px 12px 32px; background: #1a1a1a; border-radius: 4px; font-size: 15px; line-height: 1.4; color: #ccc; width: 100%; }
#meaning { margin: 0; padding: 12px 16px; background: #1a1a1a; border-radius: 4px; font-size: 15px; line-height: 1.4; color: #ccc; width: 100%; }
#carousel { --per: 5; --gap: 8px; position: relative; width: min(1100px, 100vw - 32px); flex: none; }
#carousel .track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
#carousel a { scroll-snap-align: start; }
#carousel img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #1a1a1a; }
#carousel a:hover img { outline: 2px solid #4caf50; outline-offset: -2px; }
#carousel .prev, #carousel .next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 28px; line-height: 1; background: #000c; }
#carousel .prev { left: -8px; }
#carousel .next { right: -8px; }
@media (max-width: 700px) { #carousel { --per: 2; } }
#meaning mark { padding: 0 4px; border-radius: 3px; box-shadow: inset 0 0 0 1px #fff4; }
#facts li + li { margin-top: 6px; }
#guess.shake { border-color: #f44336; outline: 2px solid #f44336; animation: shake 0.3s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
#skip.skip { color: #ff8095; border-color: #a3384d; background: #2a161b; }
#choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
#choices button { font-size: 16px; padding: 10px; }
#choices button.ok { border-color: #4caf50; background: #1b3a1d; color: #eee; }
#choices button.bad { border-color: #f44336; background: #3a1b1b; color: #eee; }
@media (max-width: 700px) {
  #game { gap: 10px; padding-top: 8px; }
  #guess-form { gap: 8px; }
  #guess-form button { font-size: 16px; }
  #flag, #map { max-height: max(80px, calc(100dvh - 240px)); }
}