/* Catrace layout adaptations to the MIT-licensed WikiGuessr game. */
* { box-sizing: border-box; }
body { margin: 0; font: 15px system-ui, sans-serif; color: #202820; background: #e8e4d8; }
header { position: fixed; inset: 0 0 auto; height: 64px; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0 24px; background: #fdfcf6; color: #263a2d; border-bottom: 1px solid #d7dbcb; }
h1 { flex: none; font-size: 24px; letter-spacing: -1px; }
header a { color: #526650; font-size: 12px; }
.game-info { display: flex; gap: 24px; background: none; padding: 0; margin: 0; box-shadow: none; font-weight: 650; }
#map { position: fixed; inset: 64px 0 0; width: 100%; height: calc(100dvh - 64px); z-index: 0; border: none; border-radius: 0; background: #dfe7e5; }
#map .leaflet-tile-pane { filter: grayscale(.22) sepia(.10) saturate(.42) hue-rotate(12deg) brightness(1.04); }
#mapStatus { display: none; position: absolute; z-index: 700; top: 14px; left: 50%; transform: translateX(-50%); padding: 8px 12px; border-radius: 8px; background: #fffdf7e8; color: #6f4c20; font-size: 12px; box-shadow: 0 3px 12px #263a2d30; white-space: nowrap; }
#mapStatus.visible { display: block; }
.leaflet-control-zoom { margin: 0 0 18px 18px !important; border: 0 !important; box-shadow: 0 4px 14px #263a2d30 !important; }
.leaflet-control-zoom a { width: 34px !important; height: 34px !important; line-height: 34px !important; color: #263a2d !important; background: #fffdf7 !important; }
.leaflet-control-attribution { background: #fffdf7d9 !important; }
.cat-card { position: fixed; top: 88px; right: 24px; width: clamp(240px, 25vw, 350px); z-index: 800; border-radius: 16px; overflow: hidden; background: #fffdf7; box-shadow: 0 8px 35px #263a2d30; }
.cat-heading { padding: 16px 16px 12px; }
.cat-heading p { font-size: 12px; color: #65725f; margin: 5px 0 0; }
.image-container { margin: 0; padding: 0; height: 300px; min-height: 0; background: #e3e4da; border-radius: 0; }
.gallery-container { display: block; height: 100%; padding: 0; }
.gallery-thumbnail, .gallery-thumbnail.active { width: 100%; height: 100%; border: 0; box-shadow: none; transform: none; border-radius: 0; }
.gallery-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.photo-error { height: 100%; display: grid; align-content: center; justify-items: center; padding: 16px; text-align: center; }
.photo-error button { padding: 10px 18px; border: 1px solid #526650; border-radius: 8px; background: #fffdf7; cursor: pointer; }
.guess-controls { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 800; margin: 0; padding: 12px 18px; border-radius: 16px; background: #fffdf7; box-shadow: 0 8px 35px #263a2d30; text-align: center; width: min(400px, calc(100% - 32px)); }
.guess-controls p { font-size: 12px; color: #65725f; margin: 0 0 8px; }
.hint-text { min-height: 16px; color: #2b623d !important; font-weight: 650; }
.control-row { display: flex; gap: 8px; }
.control-row button { flex: 1; }
.hint-btn { padding: 12px 10px; border: 1px solid #b7c5b5; border-radius: 10px; background: #f4f7ed; color: #2b623d; font-weight: 700; cursor: pointer; }
.hint-btn:disabled { opacity: .55; cursor: default; }
.guess-controls { display: block; border: none; }
button { font: inherit; }
.guess-btn, .next-round-btn { width: 100%; background: #2b623d; color: white; border: 0; border-radius: 10px; font-weight: 700; padding: 12px 20px; cursor: pointer; }
.guess-btn:hover, .next-round-btn:hover { background: #204e2f; }
.guess-btn:disabled { background: #d3d9ce; color: #62705f; cursor: default; }
.pin { display: block; width: 34px; height: 34px; filter: drop-shadow(0 2px 2px #263a2d66); }
.pin svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.guess-pin, .guess-pin svg { color: #db473a; fill: #db473a !important; }
.answer-pin, .answer-pin svg { color: #24934a; fill: #24934a !important; }
.origin-blob-marker { pointer-events: none !important; }
.origin-blob { display: block; width: 120px; height: 90px; color: #e74c3c; opacity: .24; filter: blur(7px) drop-shadow(0 2px 5px #a72f2838); animation: origin-reveal .55s ease-out both; }
.origin-blob svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.guess-marker .pin { animation: paw-pop .28s ease-out, paw-pulse 2.4s .35s ease-in-out infinite; }
.actual-marker .pin { animation: paw-pop .35s ease-out, paw-bounce .7s .25s ease-out; }
.leaflet-overlay-pane path { stroke-dashoffset: 0; animation: line-draw .7s ease-out; }
@keyframes paw-pop { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
@keyframes paw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes paw-bounce { 0% { transform: translateY(-8px); } 55% { transform: translateY(2px); } 100% { transform: translateY(0); } }
@keyframes line-draw { from { stroke-dasharray: 2 1000; } to { stroke-dasharray: 1000 1000; } }
@keyframes origin-reveal { from { opacity: 0; transform: scale(.55) rotate(-8deg); } to { opacity: .24; transform: scale(1) rotate(0); } }
.result-modal { background: none; pointer-events: none; align-items: flex-end; padding: 0 16px 24px; }
.result-content { pointer-events: auto; width: min(480px, 100%); max-height: 50dvh; overflow-y: auto; padding: 20px; border-radius: 16px; background: #fffdf7; box-shadow: 0 8px 40px #263a2d40; }
.result-content h2 { margin: 0 0 8px; font-size: 21px; }
.result-content { top: auto; bottom: 24px; right: auto; left: 50%; transform: translateX(-50%); animation: none; }
.next-round-btn { margin: 10px 0 0; }
.result-distance { font-size: 17px; margin: 0 0 8px; }
.result-score { font-size: 26px; color: #2b623d; margin: 8px 0; }
#resultMessage { font-size: 13px; color: #526650; line-height: 1.45; }
.legend { display: flex; justify-content: center; gap: 20px; font-size: 12px; }
.round-result .guess-controls { display: none; }
.round-result .cat-card { width: 180px; }.round-result .cat-heading { display: none; }.round-result .image-container { height: 160px; }
.game-over-screen { max-width: 620px; margin: 100px auto 24px; background: #fffdf7; border: none; border-radius: 18px; padding: 30px; text-align: center; font-size: 18px; color: #263a2d; }
.round-summary { padding: 0; list-style: none; font-size: 13px; }.round-summary li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid #e1e4d8; text-align: left; }
#endScoresBtn { display: none; }
@media (max-width: 600px) {
 header { padding: 0 12px; } h1 { font-size: 20px; }.game-info { font-size: 12px; gap: 12px; }
 .cat-card { top: 76px; right: 12px; width: 175px; }.cat-heading { padding: 10px; font-size: 12px; }.cat-heading p { display: none; }.image-container { height: 180px; }
 .round-result .cat-card { width: 115px; }.round-result .image-container { height: 100px; }
 .result-content { padding: 16px; }.game-over-screen { margin: 90px 12px 20px; padding: 22px; }
}

/* Final visual pass: calm, playful, and readable over the map. */
:root { --ink: #203126; --muted: #68766b; --paper: #fffdf7; --green: #267044; --line: #dfe6d9; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #dfe7e5; }
header { height: 70px; padding: 0 clamp(14px, 3vw, 36px); background: #fffdf7f2; border-bottom: 1px solid #d6dfd3; box-shadow: 0 3px 18px #20312616; backdrop-filter: blur(12px); }
h1 { margin: 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 850; letter-spacing: -1.4px; }
h1 small { color: #267044; font-size: .42em; letter-spacing: .4px; text-transform: uppercase; vertical-align: middle; }
h1::first-letter { filter: saturate(1.2); }
header a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 700; transition: background .2s, transform .2s; }
.language-toggle { padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: #f5f8f0; color: var(--ink); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.share-icon { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #f5f8f0; color: var(--ink); font: 700 18px/1 system-ui; cursor: pointer; }
.share-icon:hover { background: #e8f1df; }
header a:hover { background: #edf4e9; transform: translateY(-1px); }
.game-info { gap: 9px; font-size: 13px; }
.game-info span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: #f5f8f0; }
#map { inset: 70px 0 0; height: calc(100dvh - 70px); }
.cat-card { top: 94px; right: clamp(14px, 3vw, 36px); width: clamp(250px, 27vw, 360px); border: 1px solid #e2e8dc; box-shadow: 0 16px 45px #2031262b; }
.cat-heading { padding: 18px 18px 14px; }
.cat-heading strong { display: block; font-size: 16px; letter-spacing: -.2px; }
.cat-heading p { margin-top: 6px; color: var(--muted); }
.image-container { height: clamp(220px, 31vh, 320px); background: #edf1e8; }
.gallery-thumbnail img { padding: 8px; }
.guess-controls { bottom: 24px; width: min(430px, calc(100% - 28px)); padding: 14px; border: 1px solid #e2e8dc; box-shadow: 0 16px 45px #2031262b; }
.guess-controls p:first-child { margin-bottom: 7px; color: var(--muted); }
.control-row { gap: 9px; }
.guess-btn, .next-round-btn { background: var(--green); box-shadow: 0 4px 0 #1d5936; transition: transform .15s, background .15s, box-shadow .15s; }
.guess-btn:hover:not(:disabled), .next-round-btn:hover { background: #1d5b38; transform: translateY(-1px); box-shadow: 0 5px 0 #16452b; }
.guess-btn:active:not(:disabled), .next-round-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #16452b; }
.hint-btn { background: #f3f7ec; border-color: #cbd9c5; transition: background .2s, transform .2s; }
.hint-btn:hover:not(:disabled) { background: #e8f1df; transform: translateY(-1px); }
.result-content { border: 1px solid #e2e8dc; box-shadow: 0 18px 50px #20312635; }
.share-btn { width: 100%; padding: 11px 20px; border: 1px solid #cbd9c5; border-radius: 10px; background: #f3f7ec; color: #267044; font: inherit; font-weight: 750; cursor: pointer; }
.share-btn:hover { background: #e8f1df; }
.game-footer-link { margin-top: 22px; font-size: 13px; }
.game-footer-link a { color: #7b8d78; text-decoration: none; }
.game-footer-link a:hover { color: #267044; text-decoration: underline; }
.card-draft { margin: 14px 0 4px; padding: 12px 0 0; border-top: 1px dashed #cbd9c5; }
.card-draft > strong { display: block; margin-bottom: 8px; font-size: 13px; }
.card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.run-card { min-height: 104px; padding: 8px 5px; border: 1px solid #d6dfd3; border-radius: 10px; background: linear-gradient(145deg, #fffdf7, #f0f6e9); color: var(--ink); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.run-card:hover, .run-card.selected { transform: translateY(-3px); border-color: #74a66e; box-shadow: 0 5px 12px #20312622; }
.run-card .card-icon { display: block; font-size: 24px; margin-bottom: 3px; }
.run-card b, .run-card small { display: block; }
.run-card b { font-size: 11px; }
.run-card small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.2; }
.card-status { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.reroll-card { margin-top: 8px; border: 0; background: transparent; color: #7b6a31; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.reroll-card:hover { text-decoration: underline; }
.shrine-btn { display: block; width: 100%; margin-top: 8px; padding: 7px; border: 1px dashed #c3a85b; border-radius: 8px; background: #fff9df; color: #80651e; font: inherit; font-size: 11px; cursor: pointer; }
.shrine-btn:hover { background: #fff3ba; }
.route-draft { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #cbd9c5; }
.route-draft > strong { display: block; font-size: 12px; margin-bottom: 7px; }
.route-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.route-card { min-height: 54px; padding: 6px; border: 1px solid #d6dfd3; border-radius: 8px; background: #f9fbf3; color: var(--ink); cursor: pointer; }
.route-card:hover, .route-card.selected { border-color: #b38842; background: #fff5d8; }
.route-card b, .route-card small { display: block; }
.route-card b { font-size: 10px; }.route-card small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.15; }
.route-status { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.daily-date { color: #68766b; font-size: 12px; }
.run-loadout { color: #7b6a31; font-size: 12px; line-height: 1.5; }
.result-content h2 { letter-spacing: -.5px; }
.legend span { padding: 5px 8px; border-radius: 999px; background: #f4f7ef; }
.leaflet-control-zoom a { transition: background .15s; }
.leaflet-control-zoom a:hover { background: #eaf2e5 !important; }
@media (max-width: 600px) {
 header { height: 58px; }
 #map { inset: 58px 0 0; height: calc(100dvh - 58px); }
 header a { padding: 6px 8px; font-size: 11px; }
 .game-info { gap: 5px; font-size: 11px; }
 .game-info span { padding: 6px 7px; }
 .cat-card { top: 72px; right: 10px; width: 185px; }
 .guess-controls { bottom: 12px; }
}