:root { --ink:#183e38; --cream:#fff8e7; --red:#d45336; --gold:#f2ce63; --line:#e3dac7; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
body { background:var(--cream); color:var(--ink); font:16px/1.5 'Trebuchet MS',Arial,sans-serif; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:not-allowed; opacity:.5; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
h1,h2,h3,p { margin:0; }
h1,h2 { font-family:Georgia,serif; font-weight:normal; line-height:1.08; }
a { color:inherit; }
.topbar { height:68px; padding:0 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #ded3b9; background:var(--cream); position:relative; z-index:5; }
.brand { background:none; border:0; font:bold italic 27px Georgia,serif; padding:0; white-space:nowrap; letter-spacing:-1px; }
.brand em { color:var(--red); }
#route { display:flex; gap:25px; font-size:13px; }
#route span { opacity:.45; }
#route .active { opacity:1; font-weight:bold; }
.top-actions { display:flex; gap:16px; align-items:center; }
.top-actions>span { font-size:20px; font-weight:bold; }
.top-actions .joy { font-size:15px; font-weight:normal; }
.top-actions button { background:transparent; border:1px solid #d4cbb8; border-radius:50%; width:34px; height:34px; }
#game-shell { position:relative; width:100%; height:calc(100dvh - 68px); isolation:isolate; overflow:hidden; background:#b6d4c3; }
#world { display:block; width:100%; height:100%; outline:none; touch-action:none; cursor:crosshair; }
.city-tag { position:absolute; left:30px; top:24px; pointer-events:none; text-shadow:0 2px 10px #fff4dbaa; }
.city-tag>span { background:var(--cream); padding:6px 10px; border-radius:5px; font-size:11px; letter-spacing:1.5px; font-weight:bold; }
.city-tag h1 { font-size:32px; margin-top:13px; letter-spacing:-1px; max-width:340px; }
.city-tag h1 em { color:#9c3926; }
.help-toggle { position:absolute; right:25px; top:22px; background:var(--cream); border:1px solid #b9b596; width:36px; height:36px; border-radius:50%; font:22px Georgia,serif; }
.quest { position:absolute; top:24px; right:80px; width:270px; background:#fff9eaf2; border:1px solid #e0d2b9; border-radius:13px; padding:15px 18px; box-shadow:0 5px 25px #243b2420; }
.quest>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.eyebrow { font-size:10px; letter-spacing:1.6px; font-weight:bold; }
.map-button { padding:0; background:none; border:0; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.quest h2 { font:20px Georgia,serif; margin:8px 0 6px; }
.quest p { font-size:13px; color:#63715d; line-height:1.5; }
#quest-progress { display:flex; gap:6px; margin-top:11px; }
#quest-progress span { height:4px; flex:1; background:#e5deca; border-radius:5px; }
#quest-progress .done { background:var(--red); }
#pip-bubble { position:absolute; bottom:98px; left:50%; transform:translateX(-50%); max-width:450px; width:max-content; display:flex; gap:11px; align-items:center; padding:12px 19px 12px 13px; background:#fff9eaf7; border:1px solid #ddd1b8; border-radius:14px; box-shadow:0 5px 20px #25362722; pointer-events:none; }
#pip-bubble>span { font-size:28px; }
#pip-line { font-size:14px; max-width:365px; }
.controls { position:absolute; left:25px; bottom:25px; display:flex; align-items:center; gap:13px; }
.keyboard-hint { font-size:11px; line-height:1.8; background:#fff9eac9; padding:7px 10px; border-radius:5px; }
.dpad { display:grid; grid-template-columns:repeat(3,38px); gap:4px; }
.dpad button { height:34px; border:1px solid #cabea2; background:#fff9eae6; border-radius:6px; font-size:21px; user-select:none; touch-action:none; }
.dpad button:first-child { grid-column:2; }
.dpad button:nth-child(2) { grid-column:1; }
.dpad button:active,.dpad button.held { background:var(--gold); }
#interact { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); border:1px solid #f9f0d4; border-radius:9px; padding:12px 22px; background:var(--ink); color:var(--cream); font-weight:bold; font-size:14px; display:flex; gap:12px; align-items:center; box-shadow:0 4px 0 #102b24; white-space:nowrap; }
kbd { border:1px solid #9baa8a; padding:1px 6px; border-radius:4px; font:12px Arial,sans-serif; }
.inventory { position:absolute; right:25px; bottom:29px; display:flex; gap:7px; flex-wrap:wrap; max-width:200px; justify-content:flex-end; }
.inventory span { width:38px; height:38px; background:var(--cream); border:1px solid #d8caae; border-radius:9px; display:grid; place-items:center; font-size:23px; box-shadow:0 3px 8px #26352a17; }
#toast { position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); background:var(--ink); color:var(--cream); border-radius:30px; padding:10px 24px; font-weight:bold; pointer-events:none; opacity:0; transition:opacity .2s; text-align:center; max-width:90%; }
#toast.show { opacity:1; }
#loading { position:absolute; inset:0; z-index:12; display:grid; align-content:center; justify-items:center; gap:15px; background:var(--cream); text-align:center; padding:30px; }
#loading h1 { font:42px Georgia,serif; }
#loading p { color:#607060; }
.loading-icon { font-size:70px; animation:bob 1s ease-in-out infinite; }
#loading.hidden { display:none; }
#transition { position:absolute; inset:0; z-index:10; background:var(--ink); color:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; transform:translateX(105%); transition:transform .6s ease-in-out; pointer-events:none; }
#transition.show { transform:translateX(0); }
#transition>span { font-size:90px; animation:train 1.3s ease-in-out infinite; }
#transition h2 { font-size:42px; text-align:center; }
#transition p { font-size:15px; }
#flash { position:absolute; inset:0; background:white; pointer-events:none; opacity:0; z-index:8; }
#flash.photo { animation:flash .5s ease-out; }
dialog { width:min(520px,calc(100% - 30px)); max-height:85dvh; padding:28px; border:1px solid #d9cdb4; border-radius:18px; background:var(--cream); color:var(--ink); box-shadow:0 25px 70px #152c3355; }
dialog::backdrop { background:#173b3033; backdrop-filter:blur(2px); }
.close { float:right; border:0; padding:2px 6px; background:none; font-size:28px; line-height:1; }
dialog h2 { font-size:33px; margin:12px 0; letter-spacing:-.8px; }
dialog p { font-size:15px; color:#596c5d; margin-bottom:14px; }
.dialog-icon { font-size:39px; }
.primary { display:inline-flex; justify-content:center; align-items:center; gap:10px; border:0; border-radius:8px; padding:13px 20px; background:var(--red); color:white; box-shadow:0 3px 0 #a83722; font-weight:bold; }
.secondary { border:1px solid #9eae98; border-radius:8px; padding:11px 16px; background:transparent; }
.row { display:flex; gap:9px; flex-wrap:wrap; margin-top:15px; }
.options { display:grid; gap:9px; }
.option { text-align:left; padding:13px 15px; background:white; border:1px solid #ded7c4; border-radius:9px; display:flex; align-items:center; gap:13px; }
.option:hover { border-color:var(--red); background:#fff5df; }
.option .icon { font-size:26px; }
.option strong { display:block; font-size:15px; }
.option small { display:block; color:#657362; font-size:12px; }
.note { border-left:3px solid var(--red); background:#ede8d6; border-radius:0 5px 5px 0; padding:10px 13px; font-size:13px; margin:15px 0; }
.counter { display:flex; justify-content:space-around; align-items:end; min-height:125px; background:#eaddbf; border-bottom:12px solid #906344; border-radius:10px 10px 0 0; margin:20px 0; padding:15px; }
.vendor { font-size:52px; animation:bob 2s ease-in-out infinite; }
.cone { font-size:70px; animation:serve 1.6s ease-out; }
.flavors { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:15px 0; }
.flavors button { background:white; border:1px solid #d0c9b0; border-radius:10px; padding:12px 4px; font-size:27px; }
.flavors small { display:block; font-size:12px; }
.flavors button.selected { background:#f6d977; border-color:#b49b35; }
.mcp { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }
.mcp>div { display:grid; gap:9px; }
.port { padding:13px 9px; border:1px solid #c5c9b0; background:white; border-radius:8px; font-size:13px; }
.port.selected { border:2px solid var(--red); background:#f9e9c6; }
.port.connected { background:#d9e8ce; }
.agent-log { background:#193f38; color:#fff9e6; padding:16px; border-radius:9px; margin:15px 0; font-size:13px; min-height:150px; }
.agent-log div { margin:8px 0; animation:appear .3s ease-out; }
.notebook-item { border-top:1px solid var(--line); padding-top:14px; margin-top:15px; }
.notebook-item h3 { font-size:17px; margin-bottom:7px; }
.notebook-item p { font-size:14px; }
.notebook-item a { font-size:12px; }
.postcard-art { width:100%; border-radius:10px; margin:12px 0; }
.result-stats { display:flex; justify-content:space-between; gap:15px; margin:15px 0 20px; }
.result-stats b { font-size:24px; display:block; }
.result-stats small { font-size:12px; color:#657362; }
.status { min-height:20px; font-size:13px; color:var(--red); margin-top:10px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@keyframes bob { 50% { transform:translateY(-5px); } }
@keyframes train { 50% { transform:translateX(45px); } }
@keyframes flash { 0% { opacity:.9; } 100% { opacity:0; } }
@keyframes serve { from { transform:translate(-75px,-20px) rotate(-15deg); } to { transform:translate(0,0); } }
@keyframes appear { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media(max-width:800px) {
  .topbar { height:59px; padding:0 14px; gap:10px; }
  .brand { font-size:23px; }
  #route { display:none; }
  .top-actions { gap:10px; }
  .top-actions>span { font-size:17px; }
  .top-actions .joy { display:none; }
  #game-shell { height:calc(100dvh - 59px); }
  .city-tag { top:14px; left:15px; }
  .city-tag h1 { font-size:24px; max-width:210px; }
  .city-tag>span { font-size:10px; }
  .help-toggle { right:15px; top:14px; }
  .quest { top:auto; right:12px; bottom:180px; width:210px; padding:11px 13px; }
  .quest h2 { font-size:17px; }
  .quest p { font-size:12px; }
  .quest .eyebrow { font-size:8px; }
  #pip-bubble { bottom:114px; max-width:calc(100% - 28px); padding:9px 12px; gap:8px; }
  #pip-bubble>span { font-size:24px; }
  #pip-line { font-size:12px; }
  .controls { left:15px; bottom:18px; }
  .keyboard-hint { display:none; }
  .dpad { grid-template-columns:repeat(3,42px); gap:4px; }
  .dpad button { height:39px; }
  #interact { left:auto; right:15px; bottom:25px; transform:none; max-width:calc(100% - 170px); white-space:normal; font-size:14px; padding:12px; }
  #interact kbd { display:none; }
  .inventory { right:auto; left:15px; bottom:180px; max-width:105px; gap:5px; }
  .inventory span { width:29px; height:29px; font-size:18px; }
  dialog { padding:22px; }
  dialog h2 { font-size:29px; }
}
@media(max-height:560px) and (min-width:600px) {
  .city-tag h1 { display:none; }
  .quest { top:12px; padding:10px 14px; }
  .quest p { display:none; }
  #pip-bubble { bottom:78px; padding:7px 12px; }
  .controls { bottom:12px; }
  #interact,.inventory { bottom:15px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; } }
#ai-console { position:absolute; left:50%; bottom:95px; transform:translateX(-50%); width:min(490px,calc(100% - 32px)); background:#fff9edf7; border:1px solid #d9cab0; border-radius:14px; padding:14px 18px; box-shadow:0 8px 28px #14392c30; }
.ai-heading { display:flex; gap:12px; align-items:center; font-size:11px; margin-bottom:8px; }
.ai-heading strong { font-size:15px; color:var(--red); }
.ai-heading span { color:#5e7362; flex:1; }
.ai-heading button { border:0; background:transparent; font-size:12px; text-decoration:underline; }
#ai-console #pip-line { max-width:none; font-size:14px; line-height:1.45; }
.ai-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.ai-actions button { background:var(--ink); color:var(--cream); border:0; border-radius:6px; padding:7px 12px; font-size:12px; }
.ai-actions #eat-gelato { background:#f0d36b; color:var(--ink); }
.ai-actions #stop-ai { background:#c54b32; }
#ai-trace { font-size:11px; color:#697c65; margin-top:5px; }
.instruction { background:#193f37; color:#fff8e7; padding:15px; border-radius:8px; font-size:14px; margin:15px 0; }
.instruction small { display:block; color:#d5d9b9; font-size:11px; margin-bottom:6px; }
.earned { display:inline-block; background:#e0e9c8; color:var(--ink); border-radius:20px; padding:5px 10px; margin-bottom:12px; font-size:12px; }
@media(max-width:800px) {
 #ai-console { bottom:115px; padding:11px 13px; }
 #ai-console #pip-line { font-size:13px; }
 .ai-heading button { display:none; }
 .ai-heading { margin-bottom:5px; }
 .ai-actions { margin-top:7px; }
 .ai-actions button { font-size:12px; padding:7px 9px; }
 .quest { bottom:300px; width:205px; }
 .inventory { bottom:300px; }
}
@media(max-height:650px) { #ai-console { bottom:82px; width:400px; padding:10px 13px; } #ai-trace { display:none; } .ai-actions { margin-top:5px; } }

.top-actions #postcard-link { width:auto; height:34px; padding:0 10px; border-radius:7px; font-size:12px; white-space:nowrap; background:#f2d677; }
@media(max-width:430px){.topbar{gap:6px;padding:0 9px}.top-actions{gap:6px}.top-actions #postcard-link{font-size:11px;padding:0 7px}.brand{font-size:21px}}
/* Quiet game surface: information is opened only when the player asks for it. */
.quest, .city-tag h1, .keyboard-hint, #ai-console, .controls { display:none; }
#ai-console.open { display:block; bottom:88px; }
.controls.open { display:flex; bottom:86px; }
.city-tag { top:18px; left:18px; }
.city-tag>span { background:#fff9eadd; font-size:10px; }
.help-toggle { width:32px; height:32px; right:18px; top:15px; }
.inventory { top:62px; left:18px; right:18px; bottom:auto; max-width:none; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding:3px 1px 9px; gap:7px; scrollbar-width:thin; pointer-events:auto; }
.inventory:empty { display:none; }
.inventory button { flex:0 0 40px; width:40px; height:40px; border:2px solid #fff7e8; border-radius:9px; padding:0; background:#fff8e9; box-shadow:0 2px 6px #283b3522; overflow:hidden; font-size:23px; }
.inventory button img { width:100%; height:100%; object-fit:cover; display:block; }
.compact-tools { position:absolute; bottom:22px; left:18px; display:flex; align-items:center; gap:7px; }
.compact-tools button { border:1px solid #d7cbb4; background:#fff9eaf2; border-radius:10px; min-height:42px; padding:9px 12px; font-size:13px; box-shadow:0 3px 12px #2b3e3220; }
#pip-unread { color:var(--red); margin-left:5px; }
#interact { right:18px; left:auto; bottom:23px; transform:none; max-width:240px; }
.photo-detail { width:100%; border-radius:11px; margin:12px 0; }
.photo-caption { font-size:13px; color:#69775e; text-align:center; }
.service-scene { height:200px; border-radius:12px; overflow:hidden; margin:15px 0; background-image:url('assets/service-scenes.png?v=11'); background-size:100% 200%; background-position:center top; }
.service-scene.gelateria { background-position:center bottom; }
.service-scene.served { animation:appear .5s ease-out; }
.avatar-options { display:flex; gap:16px; margin:20px 0; }
.avatar-option { flex:1; border:1px solid #d8ceb8; border-radius:13px; background:white; padding:12px; text-align:center; }
.avatar-option.selected { border:2px solid var(--red); background:#fff0d3; }
.avatar-preview { display:block; margin:auto; width:90px; height:120px; background-size:360px 240px; background-position:33.333% 100%; background-repeat:no-repeat; }
.avatar-preview.female { background-image:url('assets/traveler.png?v=11'); }
.avatar-preview.male { background-image:url('assets/traveler-male.png?v=11'); }
.name-field { display:block; margin:14px 0 20px; }
.name-field span { display:block; font-size:14px; margin-bottom:8px; }
.name-field input { width:100%; border:1px solid #acb49f; border-radius:8px; background:white; padding:12px 14px; color:var(--ink); font-size:17px; }
.welcome-copy { text-align:center; }
.welcome-copy h2 { font-size:38px; }
.welcome-copy .primary { width:100%; }
.lobster-add { display:flex; align-items:center; gap:12px; padding:13px; background:#f8e4cb; border:1px solid #e5cdaa; border-radius:10px; margin:14px 0; }
.lobster-add input { width:22px; height:22px; accent-color:var(--red); }
.lobster-add span { font-size:15px; }
.lobster-add small { display:block; font-size:12px; color:#78664d; }
.album-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:15px 0; }
.album-grid img { width:100%; aspect-ratio:1.15; border-radius:7px; object-fit:cover; }
.weather-pill { display:inline-block; padding:5px 10px; border-radius:20px; background:#d7e5ee; color:#244956; font-size:13px; margin-bottom:12px; }
@media(max-width:800px) {
 #ai-console.open { bottom:82px; top:auto; width:calc(100% - 28px); max-height:40dvh; overflow:auto; }
 .controls.open { bottom:82px; left:15px; }
 .compact-tools { bottom:20px; left:12px; gap:5px; }
 .compact-tools button { padding:9px; font-size:12px; min-height:42px; }
 #interact { bottom:21px; right:12px; max-width:120px; min-height:42px; padding:9px 11px; font-size:12px; }
 .inventory { top:58px; left:14px; right:14px; bottom:auto; max-width:none; }
 .inventory button { width:36px; height:36px; flex-basis:36px; font-size:21px; }
 .service-scene { height:180px; }
 .city-tag { top:15px; left:14px; }
 .help-toggle { top:12px; right:14px; }
}
@media(max-width:380px) { .compact-tools button { padding:9px 7px; } #interact { max-width:102px; } }

.service-scene { height:auto; aspect-ratio:4/3; background-size:100% 200%; }
@media(max-width:380px) { #interact { bottom:73px; max-width:150px; } }

.weather-portrait { float:right; width:108px; height:144px; margin:0 0 8px 16px; background-size:432px 576px; background-position:-108px -144px; background-repeat:no-repeat; }
.weather-portrait.female { background-image:url('assets/traveler-weather-female.png?v=11'); }
.weather-portrait.male { background-image:url('assets/traveler-weather-male.png?v=11'); }

.exploration-map { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; margin:8px 0; }
.map-count { color:#546f69; font-size:14px; }
#interaction.panorama-dialog { width:min(1500px,96vw); max-width:96vw; padding:24px; background:#fff8e9; }
.panorama-dialog h2 { font-size:28px; margin:8px 0 14px; }
.panorama-viewport { height:min(61dvh,600px); width:100%; overflow-x:auto; overflow-y:hidden; border-radius:10px; cursor:grab; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-color:#ad6945 #e9d7ba; }
.panorama-viewport:active { cursor:grabbing; }
.panorama-viewport img { height:100%; width:auto; max-width:none; display:block; user-select:none; pointer-events:none; }
.panorama-actions { display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.panorama-actions span { color:#4e6960; font-size:14px; }
.panorama-actions .primary { margin-left:auto; }
@media(max-width:650px){ #interaction.panorama-dialog { padding:16px; }.panorama-viewport {height:52dvh;}.panorama-actions .primary {width:100%;margin:0;} }

/* Keep attraction panoramas close to native height for crisp detail. */
#interaction.panorama-dialog { width:min(1180px,96vw); }
.panorama-viewport { height:min(52dvh,360px); }

/* Build identifier in the header — always visible, tells you at a glance which
   build is live; the value matches the ?v= asset cache-buster. */
#build { align-self:center; font:600 10px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.03em; color:#17403899; opacity:.75; white-space:nowrap; }
#build:empty { display:none; }