*{box-sizing:border-box} :root{color-scheme:dark;--ink:#131512;--line:#55584b;--cream:#f6efd9;--gold:#e5c276;--muted:#999c8a}body{margin:0;background:#0c0e0c;color:var(--cream);font-family:'Courier New',monospace}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button{border:1px solid var(--line);background:transparent}button:hover{color:var(--gold);border-color:var(--gold)}#game{max-width:1600px;margin:auto}header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:12px 26px;border-bottom:3px solid #a5a48b;background:var(--ink);gap:14px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;letter-spacing:3px;font-weight:bold;font-size:22px}.brand img{width:54px;height:54px;object-fit:contain}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:2px;margin-top:7px}.mission{text-align:center}.mission small{display:block;color:var(--gold);font-size:10px;letter-spacing:3px;margin-bottom:7px}.mission strong{font-size:16px;letter-spacing:2px}.stats{display:flex;align-items:center;gap:20px;font-size:12px}.stats b{font-size:21px;color:var(--gold);margin-left:8px}.stats time{font-size:23px;border-left:1px solid var(--line);padding-left:18px}.stats button{border:0;font-size:22px}#scene{position:relative;aspect-ratio:1672/800;background:#645636 url('assets/barrio.webp') center 58%/cover;overflow:hidden}#scene.pitch{background-image:url('assets/cancha.webp')}.location{position:absolute;top:22px;left:26px;background:#141a16e8;padding:10px 14px;font-size:11px;letter-spacing:1.5px;border:1px solid #80846a;max-width:80%}.location i{display:inline-block;width:6px;height:6px;background:var(--gold);margin-right:10px}.bubble{position:absolute;top:11%;right:6%;width:34%;max-width:455px;background:var(--cream);color:#1b221b;padding:18px 22px;border:3px solid #171c17;box-shadow:5px 5px 0 #171c17;font-size:clamp(14px,1.45vw,22px);font-weight:bold;line-height:1.4;z-index:2}.bubble:after{content:'';position:absolute;bottom:-16px;left:38px;width:24px;height:24px;background:var(--cream);border-right:3px solid #171c17;border-bottom:3px solid #171c17;transform:skewY(-35deg)}.bubble strong{font-size:11px;letter-spacing:2px;color:#6d633f}.bubble p{margin:8px 0 4px}.hotspot{position:absolute;z-index:1;border:1px solid #f6efd996;border-radius:50%;width:38px;height:38px;background:#111b16a8;font-size:20px;box-shadow:0 0 0 5px #111b1638}.hotspot span{position:absolute;display:none;white-space:nowrap;bottom:45px;left:50%;transform:translateX(-50%);font-size:12px;background:var(--ink);padding:8px}.hotspot:hover span,.hotspot:focus-visible span{display:block}.controls{border-top:3px solid #a5a48b;padding:22px 26px 20px;display:grid;grid-template-columns:1.1fr 1fr;gap:24px;background:var(--ink)}.eyebrow{font-size:10px;color:var(--gold);letter-spacing:2px;margin-bottom:12px}.conversation{border-right:1px solid var(--line);padding-right:24px}#choices{display:grid;gap:5px}#choices button{text-align:left;min-height:43px;line-height:1.35;font-size:14px;padding:10px 14px;border-color:transparent}#choices button:hover{border-color:var(--cream);background:#22271f;color:var(--cream)}#choices button b{color:var(--gold);margin-right:12px}#itemhelp{float:right;font-size:9px;letter-spacing:0;color:var(--muted)}#inventory{display:flex;gap:8px}#inventory button{flex:1;min-width:0;height:77px;background:#1c211b;border-color:#646654;font-size:29px;position:relative}#inventory button small{display:block;font-size:9px;margin-top:7px;letter-spacing:.5px}#inventory button.selected{border-color:var(--gold);background:#3a3523;box-shadow:inset 0 0 0 1px var(--gold)}.verbs{display:flex;gap:8px;margin-top:10px}.verbs button{flex:1;padding:10px 3px;font-size:12px;background:#1c211b}footer{display:flex;justify-content:space-between;padding:15px 26px;font-size:9px;color:#858b7d;letter-spacing:1px}footer em{color:var(--gold);font-style:normal}dialog{width:min(620px,92vw);max-height:85vh;border:1px solid var(--gold);background:#171d16;color:var(--cream);padding:28px;line-height:1.6;box-shadow:10px 10px 0 #0008}dialog::backdrop{background:#050a08bb}dialog h2{color:var(--gold);font-size:24px;line-height:1.2}dialog p{font-size:14px}dialog button{padding:12px;margin:6px 4px 0 0}dialog .route{display:grid;grid-template-columns:1fr 1fr;gap:8px}.route button{text-align:left;font-size:13px}.badge{color:var(--gold);font-size:11px;letter-spacing:2px}.notice{color:var(--muted);font-size:11px!important} @media(min-width:1500px){#scene{max-height:660px}}@media(max-width:900px){header{padding:12px 16px;height:73px}.brand{font-size:16px;letter-spacing:1px}.brand img{width:42px;height:42px}.mission strong{font-size:12px}.stats{gap:10px}.stats time{font-size:18px}.stats span{font-size:0}.stats b{font-size:18px}.controls{padding:16px;gap:16px}.conversation{padding-right:16px}#choices button{font-size:12px}.bubble{width:40%;padding:12px 16px}footer span:last-child{display:none}}@media(max-width:600px){header{height:66px;padding:8px 12px}.brand{font-size:13px}.brand small{font-size:7px;letter-spacing:1px}.brand img{width:34px;height:34px}.mission{display:none}.stats time{font-size:17px;padding-left:9px}.stats{gap:9px}#scene{aspect-ratio:1.13;background-size:auto 100%;background-position:50% center}.location{top:12px;left:12px;font-size:8px;padding:8px;max-width:95%}.bubble{top:17%;right:4%;width:59%;padding:10px 12px;font-size:14px;line-height:1.3}.bubble strong{font-size:9px}.controls{grid-template-columns:1fr;padding:14px 12px;gap:16px}.conversation{border-right:0;padding:0}.eyebrow{margin-bottom:7px;font-size:9px}#choices button{min-height:41px;border-color:#424735;font-size:12px}#inventory button{height:63px;font-size:25px}#inventory button small{font-size:8px}.verbs button{font-size:11px}footer{padding:0 12px 15px;font-size:8px}.hotspot{width:32px;height:32px;font-size:16px}}
/* Animated 2D layers */
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:pan-y}
.location{z-index:3;pointer-events:none}.bubble{z-index:3;top:26%;right:4%;width:34%;pointer-events:none}.hotspot{z-index:4;transform:translate(-50%,-50%)}

@media(max-width:600px){.bubble{top:12%;right:4%;width:55%;font-size:12px;padding:9px 10px}}
/* Conversations belong below the scenery, never on top of it. */
#dialogue{padding:15px 26px 12px;background:#111810;border-top:2px solid #a5a48b;border-bottom:1px solid #444e3c}
#dialogue .eyebrow{margin-bottom:8px}#dialogue-lines{max-height:124px;overflow-y:auto;scrollbar-color:#716d50 #182014;line-height:1.55;font-size:14px}#dialogue-lines p{margin:0 0 6px;color:#abb19e}#dialogue-lines p:last-child{color:#f6efd9}#dialogue-lines strong{color:#e5c276;font-size:12px;letter-spacing:.5px}
.controls{border-top:0;padding-top:16px}#inventory{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));max-height:174px;overflow-y:auto;align-content:start}#inventory button{height:72px;min-width:72px}.empty-bag{grid-column:1/-1;font-size:12px;line-height:1.7;color:#969e8b;min-height:65px;margin:0;padding:10px;border:1px dashed #46503c}.verbs{flex-wrap:wrap}.verbs button{min-width:90px}#choices button{border-color:#3a4534}#requests{display:grid;grid-template-columns:1fr 1fr;gap:12px}.request{border:1px solid #455039;padding:12px}.request h3{margin:0 0 8px;color:var(--gold)}.request p{font-size:12px;margin:5px 0}.hotspot span{display:block;font-size:10px;padding:4px 6px;bottom:33px;max-width:160px;white-space:normal;min-width:80px;text-align:center;opacity:0;transition:opacity .12s}.hotspot:hover span,.hotspot:focus-visible span{opacity:1}
@media(min-width:901px){#scene{aspect-ratio:1672/680;max-height:560px}}@media(max-width:600px){#scene{aspect-ratio:1.3}#dialogue{padding:12px}#dialogue-lines{max-height:145px;font-size:12px}#dialogue-lines strong{font-size:11px}#inventory{grid-template-columns:repeat(4,1fr);max-height:156px}#inventory button{min-width:0}#itemhelp{float:none;display:block;margin-top:5px}#requests{grid-template-columns:1fr}.verbs button{min-width:42%;}.hotspot{width:34px;height:34px}}
@media(min-width:901px){#scene{aspect-ratio:1672/850;max-height:none}}
dialog a{color:var(--gold)}

/* Keep the speaking character recognizable without covering the scene. */
#character-portrait{float:left;width:80px;height:96px;margin:0 16px 4px 0;background:#20291e;border:1px solid #596044;image-rendering:pixelated}#character-portrait[hidden]{display:none}#dialogue::after{content:"";display:block;clear:both}#dialogue-lines{min-height:96px}
@media(max-width:600px){#character-portrait{width:64px;height:77px;margin-right:10px}#dialogue-lines{min-height:80px}}

/* Objects remain independent of the backdrop and are the actual click targets. */
.scene-prop{position:absolute;transform:translate(-50%,-100%);padding:0;border:0;background:none;z-index:3;min-width:44px;min-height:44px;overflow:visible;cursor:pointer}
.scene-prop canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 2px #10150c99);transition:filter .15s}
.scene-prop .prop-name{position:absolute;left:50%;top:100%;transform:translateX(-50%);width:max-content;max-width:155px;padding:3px 5px;background:#172014e8;border:1px solid #827850;color:#f6efd9;font-size:10px;line-height:1.2;pointer-events:none}
.scene-prop:hover canvas,.scene-prop:focus-visible canvas{filter:drop-shadow(0 0 4px #f6ce65)}
.scene-prop.collectible canvas{animation:prop-hover 2.4s ease-in-out infinite}
@keyframes prop-hover{50%{transform:translateY(-4px)}}
#inventory button canvas{display:block;width:54px;height:36px;image-rendering:pixelated;margin:auto}#inventory button{height:82px}
@media(prefers-reduced-motion:reduce){.scene-prop.collectible canvas{animation:none}}
@media(max-width:600px){.scene-prop .prop-name{font-size:9px;max-width:105px}#inventory button canvas{width:45px;height:30px}}

/* Verb toolbar: actions select a mode; notebook and map remain separate tools. */
#bag-icon{display:inline-flex;vertical-align:middle;margin-right:8px;color:var(--gold)}#bag-icon svg{width:19px;height:19px}
.verbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.verbs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:74px;padding:10px 4px;font-size:11px;letter-spacing:.5px;background:#1d251a}
.verbs button svg{width:28px;height:28px}.verbs button.active{border-color:#eccd7a;background:#3a3820;color:#ffe3a0;box-shadow:inset 0 -3px #eccd7a}
#action-status{font-size:11px;line-height:1.5;min-height:33px;margin:9px 0;color:#c6c8b2}
.game-tools{display:flex;gap:10px;border-top:1px solid #3a4534;padding-top:10px}.game-tools button{display:flex;align-items:center;justify-content:center;gap:9px;flex:1;min-height:43px;font-size:11px;color:#bdc3ae}.game-tools svg{width:21px;height:21px}
#scene[data-action],#scene[data-action] canvas,#scene[data-action] .hotspot,#scene[data-action] .scene-prop{cursor:var(--action-cursor)}
#scene[data-action] .scene-prop canvas{cursor:inherit}
@media(max-width:600px){.verbs{gap:6px}.verbs button{min-width:0;min-height:67px;font-size:10px}.verbs button svg{width:25px;height:25px}.game-tools button{font-size:10px}#action-status{font-size:10px}}

/* Objective and help live with the controls, clear of the scene. */
.objective-tools{display:flex;align-items:center;gap:12px;margin:8px 0 12px;padding:10px 0;border-top:1px solid #3a4534}.objective-tools #objective{flex:1;font-size:10px;line-height:1.6;color:var(--muted);letter-spacing:.5px}.objective-tools #hint{flex-shrink:0;padding:8px 12px;font-size:11px}

/* Colored adventure tools, with tactile edges and the same palette as the scenes. */
.verbs button{background:linear-gradient(#303c30,#20281f);border:2px solid #6f7356;box-shadow:inset 2px 2px #a6a07833,inset -2px -2px #080e0a99;min-height:84px}
.verbs button svg{width:36px;height:36px;filter:drop-shadow(2px 2px #080e0a)}
.verbs button.active{border-color:#efcc79;background:linear-gradient(#565236,#353521);box-shadow:inset 2px 2px #f6db9933,inset -2px -2px #10170b,0 0 0 1px #dec17c}
.game-tools button{border:2px solid #62694f;background:linear-gradient(#293328,#1b221a);box-shadow:inset 2px 2px #b4a66a22,inset -2px -2px #0b120b}.game-tools svg{width:29px;height:29px;filter:drop-shadow(2px 2px #0b120b)}
.route button{line-height:1.6;padding:13px}.route button:disabled{color:#9b9d8e;border-style:dashed;background:#10180f;cursor:not-allowed;opacity:.85}.route button:not(:disabled){border-color:#a49b65}
@media(max-width:600px){.verbs button svg{width:31px;height:31px}.verbs button{min-height:78px}.game-tools svg{width:26px;height:26px}.route button{font-size:11px}dialog .route{grid-template-columns:1fr}}

.small-prop .prop-name{opacity:0;pointer-events:none}.small-prop:hover .prop-name,.small-prop:focus-visible .prop-name{opacity:1}.small-prop:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

#squad-widget{position:fixed;right:16px;bottom:16px;z-index:8;max-width:calc(100vw - 24px)}#squad-toggle{display:block;margin-left:auto;background:#243d2e;padding:11px 15px;border:2px solid #b4aa71;box-shadow:3px 3px #0009;font-size:12px}#squad-total{color:#edcb7a;margin-left:8px}#squad-panel{width:310px;max-width:calc(100vw - 24px);padding:12px;background:#18271c;border:2px solid #b4aa71;margin-top:8px;box-shadow:4px 4px #0009}#squad-panel[hidden]{display:none}.squad-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#e1c477}.squad-heading button{font-size:20px;border:0}#squad-slots{position:relative;height:238px;border:2px solid #d3dec199;margin-top:8px;background:repeating-linear-gradient(#315b3d 0 34px,#2b5037 34px 68px)}#squad-slots:before{content:'';position:absolute;top:50%;width:100%;border-top:1px solid #d3dec188}#squad-slots:after{content:'';position:absolute;top:38%;left:39%;height:24%;width:22%;border:1px solid #d3dec188;border-radius:50%;pointer-events:none}.squad-player{position:absolute;width:76px;text-align:center;z-index:1;color:#b2b8a5;font-size:10px}.squad-player span{display:block;margin:0 auto 3px;width:26px;height:27px;background:#445146;border:1px dashed #bdc4ae;padding-top:5px}.squad-player.joined span{background:#95bfd0;border:2px solid #eee0b1;color:#193128}.squad-player.joined{color:#fff0c4}.squad-player[data-player="1"]{left:calc(50% - 38px);top:12px}.squad-player[data-player="0"]{left:4px;top:83px}.squad-player[data-player="2"]{left:calc(50% - 38px);top:83px}.squad-player[data-player="5"]{right:4px;top:83px}.squad-player[data-player="4"]{left:4px;top:165px}.squad-player[data-player="6"]{left:calc(50% - 38px);top:165px}.squad-player[data-player="3"]{right:4px;top:165px}#squad-summary,#squad-notice{font-size:11px;line-height:1.5}#squad-notice:empty{display:none}#squad-notice{max-width:310px;padding:8px 12px;background:#233e2e;border:1px solid #b4aa71;margin:8px 0 0}footer{padding-bottom:72px}