:root{--ink:#15110f;--paper:#f3e6c8;--accent:#ffd166;--mute:#a89c86}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#d7dbe2;font-family:"Golos Text",Verdana,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));pointer-events:none}
.place{background:rgba(21,17,15,.82);color:var(--paper);border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;min-width:120px}
.place b{font-size:15px}
.place span{font-size:12px;color:var(--accent);letter-spacing:.06em}
.btns{display:flex;gap:6px;pointer-events:auto}
.btns button,.btns .btn,.map-box button{font:700 13px "Golos Text",sans-serif;padding:8px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--accent);color:var(--ink);text-decoration:none;cursor:pointer}
.btns .btn{background:var(--paper)}
.toast{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%,20px);max-width:min(92vw,520px);background:rgba(21,17,15,.9);color:var(--paper);padding:10px 14px;border-radius:10px;font-size:14px;text-align:center;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--ink);color:var(--paper);font-size:16px;line-height:1.6;padding:16px}
.loading[hidden]{display:none}
.loading code{color:var(--accent);font-size:13px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:12px}
.overlay[hidden]{display:none}
.map-box{position:relative;width:min(96vw,980px);height:min(88vh,560px);background:#1b1714;border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.map-box canvas{width:100%;height:100%;display:block}
.map-box button{position:absolute;top:8px;right:8px}
.left{display:flex;flex-direction:column;gap:6px}
.status{background:rgba(21,17,15,.82);color:var(--paper);border-radius:8px;padding:6px 10px;font-size:12px;min-width:150px;display:flex;flex-direction:column;gap:5px}
.status .row{display:flex;justify-content:space-between;gap:10px}
.status b{color:#fff}
.status .amb{font-size:11px;color:#ffd166;max-width:220px;white-space:normal;line-height:1.3}
.amb-text{margin:0 0 6px;font-size:14px}
.finale .panel{text-align:center}
.finale-tag{margin:0;font:800 12px "Golos Text",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#c0392b}
.health{position:relative;height:16px;border-radius:5px;background:#3a2f2a;overflow:hidden}
.health i{position:absolute;inset:0 auto 0 0;background:#3fb26b;transition:width .3s}
.fuel i{background:#e0a33f}
.acts{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(60px,calc(env(safe-area-inset-bottom) + 52px));display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.acts button{font:700 14px "Golos Text",sans-serif;padding:10px 14px;border:2px solid var(--ink);border-radius:10px;background:var(--accent);color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--ink)}
.acts button[hidden]{display:none}
.chase{position:fixed;left:50%;top:max(64px,calc(env(safe-area-inset-top) + 56px));transform:translateX(-50%);font:900 clamp(18px,4vw,30px) "Golos Text",sans-serif;letter-spacing:.12em;color:#fff;background:#d7261e;border:2px solid var(--ink);border-radius:8px;padding:4px 16px;pointer-events:none;animation:siren .5s steps(2,jump-none) infinite}
.chase[hidden]{display:none}
.chase{display:flex;flex-direction:column;align-items:center;max-width:min(92vw,560px);text-align:center}
#paintHint{display:flex;align-items:center;gap:6px;margin-top:4px;font:800 15px "Golos Text",sans-serif;letter-spacing:0;background:#3b6fd1;border:2px solid #fff;border-radius:8px;padding:2px 10px}
#paintHint[hidden]{display:none}
.chase.brief small{display:none}
#paintArrow{display:inline-block;font-style:normal;transition:transform .2s}
.chase small{font:600 12px "Golos Text",sans-serif;letter-spacing:0;margin-top:2px;opacity:.95}
@keyframes siren{from{background:#d7261e}to{background:#2a5bd7}}
@media (prefers-reduced-motion:reduce){.chase{animation:none}}
.pedals{position:fixed;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));display:none;justify-content:space-between;padding:0 max(12px,env(safe-area-inset-left));pointer-events:none}
.pedals div{display:flex;gap:10px;pointer-events:auto}
.pedals button{width:64px;height:64px;border:2px solid var(--ink);border-radius:12px;background:rgba(21,17,15,.72);color:#fff;font:700 22px "Golos Text",sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.pedals button:active{transform:translateY(2px)}
.pedals .brake{background:rgba(225,38,28,.88);font-size:13px}
.pedals .gas{background:rgba(47,163,107,.92);font-size:15px;height:80px}
.pedals div:last-child{align-items:flex-end}
body.driving .pedals{display:flex}
body.driving .acts{bottom:max(108px,calc(env(safe-area-inset-bottom) + 100px))}
.health.low i{background:#e04a3f;animation:pulse 1s ease-in-out infinite alternate}
.health span{position:relative;display:block;text-align:center;font-size:11px;line-height:16px;color:#fff;text-shadow:0 1px 1px #000}
@keyframes pulse{to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.health.low i{animation:none}}
.btns{flex-wrap:wrap;justify-content:flex-end;max-width:60vw}
.panel{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:14px 16px;width:min(94vw,560px);max-height:88vh;display:flex;flex-direction:column;gap:10px}
.panel.small{width:min(92vw,380px);text-align:center}
.panel header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.panel h2{margin:0;font-size:18px}
.panel p{margin:0;line-height:1.45}
.panel .mute{color:#6b5f52;font-size:13px}
.panel button,.panel .btn{font:700 14px "Golos Text",sans-serif;padding:9px 14px;border:2px solid var(--ink);border-radius:8px;background:var(--accent);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.panel .btn.ghost{background:transparent}
.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.log{margin:0;padding:0 4px 0 0;list-style:none;overflow:auto;display:flex;flex-direction:column;gap:6px;font-size:14px}
.log li{display:flex;flex-direction:column;border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:6px}
.log time{font-size:11px;color:#6b5f52}
.overlay.dark{background:rgba(10,4,4,.8)}
.panel.pack{width:min(94vw,600px);overflow:auto}
.panel h3{margin:4px 0 0;font-size:15px}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.slot{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:58px;padding:6px 4px;border:2px solid var(--ink);border-radius:8px;background:#fffaf0;font:600 11px "Golos Text",sans-serif;color:var(--ink);cursor:pointer;line-height:1.15;text-align:center}
.slot img.icon{width:36px;height:36px;display:block;flex:none}
.slot.sel{background:var(--accent)}
.slot.empty{background:rgba(0,0,0,.06);border-style:dashed;cursor:default}
.panel .actions button{font:700 13px "Golos Text",sans-serif;padding:8px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--accent);color:var(--ink);cursor:pointer}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cols .col{display:flex;flex-direction:column;gap:6px}
input.code{font:700 28px/1 "Golos Text",monospace;letter-spacing:.4em;text-align:center;padding:8px;border:2px solid var(--ink);border-radius:8px;width:100%}
.item-menu{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(21,17,15,.94);color:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:8px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:94vw}
.item-menu[hidden]{display:none}
.item-menu b{color:var(--accent);margin-right:6px}
.item-menu button{font:700 13px "Golos Text",sans-serif;padding:7px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--accent);color:var(--ink);cursor:pointer}
.item-menu button.ghost{background:transparent;color:var(--paper);border-color:var(--mute)}
.panel .slot{background:#fffaf0;padding:6px 4px;font:600 11px "Golos Text",sans-serif;display:flex}
.panel .slot img.icon{display:block;flex:none}
.panel .slot.sel{background:var(--accent)}
.panel .slot.empty{background:rgba(0,0,0,.06)}
/* сообщения сверху по центру: внизу бывают разговор и меню предмета */
.toast{top:max(10px,env(safe-area-inset-top));bottom:auto;max-width:min(46vw,420px);transform:translate(-50%,-20px)}
/* разговор (общий для города и помещений) */
.talk{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(94vw,560px);max-height:58vh;overflow:auto;background:rgba(21,17,15,.94);color:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 0 rgba(0,0,0,.35);z-index:5}
.talk[hidden],.shop[hidden],#talkNext[hidden]{display:none}
.talk header{display:flex;justify-content:space-between;align-items:center}
.talk header b{color:var(--accent);font-size:14px}
.talk header button{background:none;border:0;color:var(--mute);font-size:16px;cursor:pointer;padding:2px 6px}
.talk p{margin:0;font-size:15px;line-height:1.45}
.talk>button,.shop button{align-self:flex-end;font:700 13px "Golos Text",sans-serif;padding:7px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--accent);color:var(--ink);cursor:pointer}
.shop ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.shop li{display:flex;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.12);padding-top:6px}
.shop li span{flex:1;font-size:14px}
.shop li img.icon{width:28px;height:28px;flex:none;background:#fffaf0;border-radius:6px;padding:2px;box-sizing:content-box}
.shop button{align-self:auto}
.shop li.extra,.shop li.choices{flex-wrap:wrap;justify-content:flex-end;border-top:0}
.shop li.choices{flex-direction:column;align-items:stretch}
.shop li.choices button{text-align:left;background:#fff3d0}
.shop li.choices button small{display:block;font:600 12px "Golos Text",sans-serif;color:#8a5a1a;margin-top:2px}
.shop button.ghost{background:transparent;color:var(--paper);border-color:var(--mute)}
/* телефон */
.panel.phone{width:min(94vw,480px)}
.contacts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;overflow:auto}
.contacts li{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:8px}
.contacts li span{flex:1}
.contacts .rel{color:#c0392b;font-style:normal;letter-spacing:.1em}
.ring{position:fixed;left:50%;top:max(60px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#2a9a5a;color:#fff;border:2px solid var(--ink);border-radius:12px;padding:8px 12px;z-index:6;animation:ring .6s ease-in-out infinite alternate}
.ring[hidden]{display:none}
.ring button{font:700 13px "Golos Text",sans-serif;padding:6px 10px;border:2px solid var(--ink);border-radius:8px;background:var(--accent);color:var(--ink);cursor:pointer}
.ring button.ghost{background:transparent;color:#fff;border-color:#fff}
@keyframes ring{to{transform:translateX(-50%) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.ring{animation:none}}
/* заметки в блокноте */
.note-add{display:flex;gap:6px}
.note-add input{flex:1;font:14px "Golos Text",sans-serif;padding:7px;border:2px solid var(--ink);border-radius:8px}
/* журнал */
.panel.journal{width:min(94vw,600px);overflow:auto}
.tabs{display:flex;gap:6px}
.tabs button{font:700 13px "Golos Text",sans-serif;padding:6px 12px;border:2px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.tabs button.on{background:var(--accent)}
.tab-body{display:flex;flex-direction:column;gap:6px;overflow:auto}
.quests{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.quests li{display:flex;flex-direction:column;border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:6px}
.quests li small{color:#6b5f52}
.quests li span{font-size:14px}
.quests li .giver{font-size:12px;font-style:normal;color:#6b5f52;margin-top:2px}
.quests.done li{opacity:.6}
/* add-mobile-hud: кнопки с иконками, настроение, поворот телефона, компактный телефонный экран */
.btns button{display:inline-flex;align-items:center;gap:5px;min-height:36px}
.btns button i{font-style:normal;font-size:15px;line-height:1}
.mood i{background:#5aa0e0}
.rotate{z-index:50;text-align:center}
.rotate .panel{align-items:center}
.rotate-phone{font-size:54px;line-height:1;animation:turn 1.6s ease-in-out infinite}
@keyframes turn{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.rotate-phone{animation:none}}
/* телефон боком: высота ~320–430 px — только иконки, шкалы плотнее, педали ниже */
@media (max-height:500px), (max-width:760px){
  .btns{max-width:none;gap:4px}
  .btns button{padding:6px 8px;min-width:40px;min-height:40px;justify-content:center}
  .btns button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .btns button i{font-size:18px}
  .place{padding:4px 8px;min-width:0}
  .place b{font-size:13px}
  .place span{font-size:10px}
  .left{gap:4px}
  .status{padding:4px 8px;gap:3px;min-width:132px}
  .health{height:14px}
  .health span{line-height:14px;font-size:10px}
  .status .amb{display:none} /* амбиция — в журнале; на низком экране строка закрывает сцену */
  .pedals button{width:58px;height:58px}
  .pedals .gas{height:72px}
  .acts button{padding:8px 12px;font-size:13px}
  .chase{top:max(8px,env(safe-area-inset-top));font-size:16px}
  .chase small{display:none}
  .panel{max-height:94vh;padding:10px 12px;gap:6px}
}