/* A control deck stays below the play area, never on top of Venice. */
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button{-webkit-user-select:none;user-select:none}
#touch-controls{position:relative;inset:auto;flex-shrink:0;width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px max(22px,env(safe-area-inset-right)) 12px max(22px,env(safe-area-inset-left));background:linear-gradient(140deg,#234f4a,#123a39);border-top:1px solid #c4ae7466;box-shadow:inset 0 1px 0 #fff2;z-index:7;pointer-events:auto;color:var(--cream);min-height:154px}
.dpad{display:grid;grid-template-columns:42px 42px 42px;grid-template-rows:38px 38px 38px;gap:3px;flex-shrink:0;position:relative}
.dpad button{width:42px;height:38px;min-height:0;border:1px solid #bac5a963;border-bottom:3px solid #071e2580;border-radius:8px;background:linear-gradient(#dce2c4,#bbcaae);color:#173d3c;font-size:25px;line-height:1;box-shadow:0 2px 8px #0002;touch-action:none;transition:background .12s,transform .12s}
.dpad button[data-key="ArrowUp"]{grid-column:2;grid-row:1}
.dpad button[data-key="ArrowLeft"]{grid-column:1;grid-row:2}
.dpad button[data-key="ArrowRight"]{grid-column:3;grid-row:2}
.dpad button[data-key="ArrowDown"]{grid-column:2;grid-row:3}
.dpad-center{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;color:#a7bea1;font-size:18px;background:#123a3766;border-radius:9px;box-shadow:inset 0 2px 7px #0002}
.dpad button.pressed{background:var(--gold);transform:translateY(2px);border-bottom-width:1px}
.dpad button:disabled{opacity:.25;cursor:default}
.touch-guidance{flex:1;max-width:240px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;line-height:1.45}
.touch-guidance .eyebrow{color:#edcb83;font-size:10px;letter-spacing:2.5px}
#touch-hint{font-size:12px;color:#d3dfc8;max-width:190px;min-height:35px;display:flex;align-items:center;justify-content:center}
#touch-phone{display:flex;align-items:center;justify-content:center;gap:18px;min-width:118px;min-height:38px;padding:7px 13px;background:#f5e4b811;color:#f4e7bf;border:1px solid #f5e4b83b;border-radius:8px;font-size:12px}
#touch-phone:disabled{opacity:.3;cursor:default}
#touch-interact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:84px;height:84px;flex-shrink:0;border-radius:50%;border:2px solid #ffe9a2;border-bottom:6px solid #ad7e31;background:linear-gradient(145deg,#ffe3a0,#edb651);color:#173d3c;box-shadow:0 4px 0 #0b2e2c,0 7px 20px #0003;touch-action:manipulation}
#touch-action-icon{font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:29px;line-height:1}
#touch-action-label{font-size:8px;letter-spacing:.7px;font-weight:800;line-height:1}
#touch-interact:disabled{background:#668c7570;border-color:#74907a;border-bottom-color:#183e37;color:#bdd0b3;opacity:.55;cursor:default;box-shadow:0 3px 0 #0b2e2c}
.touch-layout #footer{height:40px;min-height:40px;padding:0 max(18px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));box-sizing:content-box}
.touch-layout #footer .controls>span,.touch-layout #footer #phone-open{display:none}
.touch-layout #footer .controls::before{content:'TAP TO WALK · HOLD TO MOVE';font-size:9px;color:#97b5a7;letter-spacing:1.3px}
:root[data-language="it"] .touch-layout #footer .controls::before{content:'TOCCA PER CAMMINARE · TIENI PREMUTO'}
.touch-layout #footer .chapter-track{display:none}
.touch-layout #footer .footer-actions{gap:8px}
.touch-layout #footer .footer-actions button{min-width:40px;min-height:38px;font-size:18px}
.touch-layout #hud{padding-top:max(8px,env(safe-area-inset-top))}
.touch-layout #interact kbd{font-size:0;min-width:24px;min-height:22px;padding:3px}
.touch-layout #interact kbd::after{content:'A';font-size:12px}
.touch-layout #continue{min-height:44px;padding:10px 0 0;font-size:13px}
.touch-layout #continue kbd{display:none}
.touch-layout #dialogue{max-height:calc(100% - 24px);overflow:auto;overscroll-behavior:contain}
.touch-layout #choices button{min-height:44px;font-size:14px}
.touch-layout #journal{max-height:calc(100% - 30px);overflow:auto}
.touch-layout #journal-close,.touch-layout #close-phone{min-width:36px;min-height:36px}
.touch-layout .message button{min-height:44px;font-size:13px}
.touch-layout #phone{top:12px;bottom:12px}
.touch-layout #minigame{overflow:auto;padding:12px 0}
.touch-layout .mini-card{max-height:100%;overflow:auto;overscroll-behavior:contain}
.touch-layout .mini-choice-list button{min-height:48px;line-height:1.4}
.touch-layout .mini-bottom button{min-height:40px}
.touch-layout .pause-card{max-height:calc(100% - 24px);overflow:auto}
.touch-layout #toast{top:79px;max-width:calc(100% - 26px)}
.touch-layout #ending{padding-top:20px}
/* Light-novel marginalia: a restrained gold edge. (The decorative sparkles were removed; they read as cheap.) */
.title-character{outline:1px solid #ffeebbbf;outline-offset:6px;box-shadow:0 12px 70px #0a252755,0 0 35px #f6d18122}
.avatar{box-shadow:0 0 0 2px #fff6de,0 0 0 3px #c6a66a60}
#dialogue{outline:1px solid #fff4cb80;outline-offset:4px}
#dialogue-portrait{box-shadow:inset 0 0 0 2px #ffe3aa80;position:relative}
#dialogue-portrait[data-mood="awkward"]::after{content:'…';position:absolute;right:8px;top:9px;background:#fff1d3eb;border:1px solid #b79262;border-radius:8px 8px 8px 1px;padding:1px 5px;color:#8f6650;font-size:14px;letter-spacing:2px;pointer-events:none}
.social-danger #dialogue{box-shadow:0 7px 0 #ba8c75,0 0 26px #ffd4892b}
@media(max-width:900px) and (hover:none){#touch-controls{display:flex}.title-bottom>span:first-child{font-size:0}.title-bottom>span:first-child::after{content:'TAP TO WALK · ON-SCREEN CONTROLS';font-size:9px;letter-spacing:1.2px}:root[data-language="it"] .title-bottom>span:first-child::after{content:'TOCCA PER CAMMINARE · COMANDI A SCHERMO'}.title-bottom>span:first-child kbd{display:none}}
@media(max-width:600px){
 #touch-controls{gap:12px;padding:12px 17px 10px;min-height:144px}
 .dpad{grid-template-columns:40px 40px 40px;grid-template-rows:36px 36px 36px}.dpad button{width:40px;height:36px}
 #touch-interact{width:76px;height:76px}#touch-action-icon{font-size:27px}#touch-action-label{font-size:8px}
 #touch-hint{font-size:11px;line-height:1.5;max-width:132px}.touch-guidance .eyebrow{font-size:9px}
 #touch-phone{min-width:99px;min-height:36px;font-size:11px;gap:10px;padding:7px 10px}
 .touch-layout #dialogue{bottom:12px;left:10px;right:10px;border-radius:13px}.touch-layout #dialogue-text{font-size:15px}
 .touch-layout .dialogue-content{padding:14px}.touch-layout #choices{gap:7px}
 .touch-layout #dialogue-context{max-width:108px;letter-spacing:.6px;font-size:9px}
 .touch-layout #speaker{font-size:11px}
 .touch-layout .mini-card h2{font-size:25px}.touch-layout .mini-card{padding:18px 20px}
 .touch-layout .mini-card .mini-portrait{width:64px;height:64px;margin:9px auto}
 .touch-layout .mini-card .instructions{font-size:13px;margin:9px auto 14px}
 .touch-layout .rep-count strong{font-size:34px}.touch-layout .rep-dots{margin:10px 0}
 .touch-layout .timing-track{margin:17px 0;height:49px}.touch-layout .lift-button{padding:14px}
 .touch-layout #location{max-width:calc(100% - 80px)}
 .title-main{top:13%;left:8%}.title-main h1{font-size:clamp(66px,20vw,88px)}
 .title-character{width:48%;height:35%;right:-1%;bottom:12%;opacity:1}.title-sticker{right:8px;font-size:8px}
 .title-main .subtitle{font-size:22px;line-height:1.32;max-width:280px}.title-main .primary-button{margin-top:22px}
}
@media(max-width:380px){#touch-controls{gap:8px;padding-left:10px;padding-right:10px}.dpad{grid-template-columns:36px 36px 36px;grid-template-rows:34px 34px 34px}.dpad button{width:36px;height:34px}#touch-interact{width:69px;height:69px}#touch-hint{font-size:10px}#touch-phone{min-width:86px}.touch-layout #footer .controls::before{font-size:8px}.title-main h1{font-size:70px}.title-character{bottom:9%;height:33%;right:-9%}.title-main .subtitle{font-size:20px}}
@media(max-height:650px) and (max-width:600px){#touch-controls{min-height:116px;padding-top:8px;padding-bottom:8px}.dpad{grid-template-rows:30px 30px 30px}.dpad button{height:30px}.touch-layout #hud{height:62px}.touch-layout #footer{height:33px;min-height:33px}.touch-guidance{gap:5px}.touch-guidance .eyebrow{display:none}#touch-phone{min-height:32px}.touch-layout #dialogue-text{font-size:14px;line-height:1.45}.touch-layout #choices button{min-height:40px;font-size:13px}.touch-layout .mini-card .mini-portrait{display:none}.touch-layout .mini-card .instructions{font-size:12px}.touch-layout .mini-card h2{font-size:23px}.title-main{top:13%}.title-main h1{font-size:70px}.title-main .subtitle{font-size:20px;margin:20px 0}.title-character{height:35%;bottom:13%}}
@media(max-height:520px) and (min-width:601px){
 .touch-layout #hud{height:59px;padding:7px 22px}.touch-layout .avatar{width:38px;height:41px}.touch-layout .identity .eyebrow{display:none}.touch-layout .leo-name{font-size:25px}.touch-layout .stat>strong{font-size:22px}.touch-layout .clock>span:last-child{display:none}
 .touch-layout #touch-controls{min-height:82px;height:82px;padding:8px 22px;gap:22px}.dpad{grid-template-columns:40px 40px 40px;grid-template-rows:30px 30px;gap:3px}.dpad button{height:30px;width:40px}.dpad button[data-key="ArrowDown"]{grid-column:2;grid-row:2}.dpad-center{display:none}
 #touch-interact{width:65px;height:65px;gap:2px}#touch-action-icon{font-size:23px}#touch-action-label{font-size:7px}.touch-guidance{display:grid;grid-template-columns:1fr 100px;gap:0 16px;max-width:420px}.touch-guidance .eyebrow{grid-column:1;font-size:8px}#touch-hint{grid-column:1;font-size:11px;min-height:0;max-width:none}#touch-phone{grid-column:2;grid-row:1/3;min-width:100px;min-height:40px}
 .touch-layout #footer{height:29px;min-height:29px}.touch-layout #footer .footer-actions button{min-height:29px;padding:0 8px}
 .touch-layout #location{top:9px;left:12px;padding:6px 11px}.touch-layout #location h1{font-size:17px}.touch-layout #location-note{display:none}.touch-layout #location .eyebrow{font-size:8px}.touch-layout #journal-toggle{top:9px;right:12px;width:34px;height:34px}
 .touch-layout #dialogue{max-height:calc(100% - 16px);bottom:8px}.touch-layout #dialogue-portrait{width:98px}.touch-layout .dialogue-content{padding:11px 15px}.touch-layout #dialogue-text{font-size:14px;margin:6px 0 9px}.touch-layout #choices{flex-direction:row;gap:6px}.touch-layout #choices button{font-size:12px;min-height:40px;padding:8px}.touch-layout #continue{min-height:30px;padding:3px 0 0}
 .touch-layout .mini-card{padding:12px 20px;width:min(630px,90%)}.touch-layout .mini-card .mini-portrait{display:none}.touch-layout .mini-card h2{font-size:22px;margin:4px 0}.touch-layout .mini-card .instructions{font-size:12px;margin:5px auto 8px}.touch-layout .rep-count strong{font-size:26px}.touch-layout .lift-track{height:16px;margin:8px 0}.touch-layout .rep-dots{margin:7px 0}.touch-layout .lift-button{padding:9px;margin-top:6px}.touch-layout .mini-bottom{margin-top:7px}.touch-layout .timing-track{height:36px;margin:9px 0}.touch-layout .mini-choice-list{gap:5px;margin-top:8px}.touch-layout .mini-choice-list button{min-height:35px;padding:8px;font-size:12px}
 .title-main{top:13%;left:7%}.edition{margin-bottom:10px;font-size:9px}.title-main h1{font-size:72px}.title-main .subtitle{font-size:19px;margin:16px 0}.title-main .primary-button{padding:10px 16px;min-width:175px}.start-hint{margin-top:9px}.title-character{height:66%;bottom:15%;width:33%;right:8%}.title-top{top:14px}.title-bottom{bottom:13px}
}
@media(prefers-reduced-motion:reduce){.title-character::before,.title-character::after{animation:none}}

@media(max-width:520px){#dialogue-portrait{position:absolute}}

/* Phones already show CONTINUE on the round deck button; the dialogue box's own Continue button
   (plus the old "Tap to continue." hint, cleared in game.js) made it a third repeat of the same
   affordance. One clear tap target. */
.touch-layout #continue{display:none}

/* Feel audit 2. With the phone up, the d-pad and the Messaggi button are dead weight on the deck;
   only A (close) still means something. visibility, not display, so the stage never resizes. */
.touch-layout[data-mode="phone"] .dpad,.touch-layout[data-mode="phone"] #touch-phone{visibility:hidden}
/* Landscape phones leave the stage ~180–205px tall. The phone keeps its frame but drops the big
   headline and the subtitle so the threads (the point of opening it) are what shows. */
@media(orientation:landscape) and (max-height:520px){
 .touch-layout #phone{top:6px;bottom:6px;right:14px;width:min(430px,56%);border-width:5px;border-radius:22px;padding:8px 14px 10px}
 .touch-layout .phone-top{margin-bottom:0;align-items:center}
 .touch-layout .phone-head{font-size:18px;margin:0 0 2px}
 .touch-layout .phone-sub,.touch-layout .phone-bottom{display:none}
 .touch-layout #phone .message{padding:8px 0}
 /* In a conversation the place card has nothing to say and poked above the box; it steps aside. */
 .touch-layout[data-mode="dialogue"] #location{opacity:0;visibility:hidden}
 /* A smaller face card lowers the box's top edge, leaving the speakers' heads in view. */
 #game.touch-layout #dialogue-portrait{width:78px;height:78px;min-height:78px;margin:8px 0 8px 8px}
 .touch-layout .dialogue-content{padding:8px 13px}
 .touch-layout #dialogue-text{margin:4px 0 6px;line-height:1.35}
 #game.touch-layout #dialogue .log-button{min-height:32px}
}