@font-face{font-family:'PS2P';src:url(../assets/fonts/PressStart2P.ttf)}
@font-face{font-family:'Pixelify';src:url(../assets/fonts/PixelifySans.ttf)}
*{box-sizing:border-box}
:root{--st:env(safe-area-inset-top,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px)}
html,body{margin:0;height:100%;background:#13162f;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
#wrap{position:fixed;inset:0;font-family:'Pixelify',monospace;color:#fff}
#game{position:absolute;inset:0}
#game canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.hidden{display:none!important}
button{font-family:inherit}
#hud{position:absolute;top:calc(8px + var(--st));left:calc(8px + var(--sl));background:rgba(19,22,47,.88);border:3px solid #507299;padding:7px 10px;font-family:'PS2P';font-size:10px;max-width:290px;display:flex;flex-direction:column;gap:5px}
.hud-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pill{background:#507299;padding:3px 5px}.pill.rank{background:#fde38c;color:#13162f}
#hud .sep{color:#8d8bb6}
#btn-menu{font-family:'PS2P';font-size:12px;background:#507299;color:#fff;border:2px solid #fff;padding:2px 6px;cursor:pointer;margin-left:auto}
.xp{height:5px;background:#2a2e5a}#hud-xp{height:100%;background:#fde38c;width:0}
#hud-clock{color:#cbc9df;font-size:9px}
#hud-goal{font-family:'Pixelify';font-size:14px;color:#e8e6f5;line-height:1.25}#hud-goal b{font-family:'PS2P';font-size:9px;color:#fde38c}
#minimap{position:absolute;top:calc(8px + var(--st));right:calc(8px + var(--sr));border:3px solid #507299;background:#0c0e20;image-rendering:pixelated;opacity:.92}
#alarm{position:absolute;top:calc(8px + var(--st));left:50%;transform:translateX(-50%);max-width:calc(100vw - 16px);overflow:hidden;text-overflow:ellipsis;background:#8a1f19;border:3px solid #ff503c;padding:8px 14px;font-family:'PS2P';font-size:11px;animation:blink 1s infinite;white-space:nowrap}
@keyframes blink{50%{background:#c0281e}}
#redflash{position:absolute;inset:0;background:#ff2020;pointer-events:none;animation:rf 1s infinite}
@keyframes rf{0%,100%{opacity:0}50%{opacity:.16}}
#hint{position:absolute;bottom:calc(20px + var(--sb));left:50%;transform:translateX(-50%);background:rgba(19,22,47,.92);border:2px solid #fde38c;padding:6px 12px;font-size:18px;white-space:nowrap;max-width:calc(100vw - 16px - var(--sl) - var(--sr));overflow:hidden;text-overflow:ellipsis}
#hint b{font-family:'PS2P';font-size:12px;color:#fde38c;margin-right:6px}
#toast{position:absolute;top:64px;left:50%;transform:translateX(-50%);background:#fde38c;color:#13162f;border:3px solid #13162f;padding:8px 14px;font-family:'PS2P';font-size:10px;text-align:center;line-height:1.7;max-width:min(560px,90vw);z-index:5;pointer-events:none}
#chapter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(19,22,47,.75);pointer-events:none;z-index:6;animation:fadein .4s}
@keyframes fadein{from{opacity:0}}
.ch-t{font-family:'PS2P';font-size:clamp(14px,3vw,26px);color:#fde38c;text-shadow:3px 3px 0 #000;text-align:center;padding:0 10px}.ch-s{font-size:20px;margin-top:14px;color:#cbc9df;text-align:center}
#dialog{position:absolute;left:50%;bottom:calc(16px + var(--sb));transform:translateX(-50%);width:min(780px,94vw,calc(100vw - 12px - var(--sl) - var(--sr)));min-height:130px;max-height:60vh;overflow:auto;background:#fff;color:#13162f;border:4px solid #13162f;box-shadow:0 0 0 4px #507299;padding:16px 18px 20px;font-size:21px;line-height:1.3;z-index:4}
#dlg-name{position:sticky;top:-14px;display:inline-block;margin:-6px 0 2px -4px;background:#507299;color:#fff;border:3px solid #13162f;padding:4px 10px;font-family:'PS2P';font-size:10px}
#dlg-text{white-space:pre-wrap;margin-top:4px}
#dlg-choices{margin-top:8px;display:flex;flex-direction:column;gap:4px}
#dlg-choices button,#panel button{font-family:'Pixelify';font-size:18px;text-align:left;background:#eef2f6;border:2px solid #8d8bb6;padding:5px 10px;cursor:pointer;color:#13162f}
#dlg-choices button.sel,#panel button.sel{background:#507299;color:#fff;border-color:#13162f}
#dlg-next{position:absolute;right:12px;bottom:6px;font-size:14px;animation:blink2 .8s infinite}
@keyframes blink2{50%{opacity:0}}
#panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(640px,94vw);max-height:88vh;display:flex;flex-direction:column;background:#fff;color:#13162f;border:4px solid #13162f;box-shadow:0 0 0 4px #507299;z-index:7}
.panel-head{display:flex;align-items:center;gap:8px;background:#507299;color:#fff;padding:6px 8px}
.panel-head h3{flex:1;margin:0;font-family:'PS2P';font-size:12px}
#panel .panel-head button{font-family:'PS2P';font-size:12px;background:#13162f;color:#fff;border:2px solid #fff;padding:4px 8px}
#panel-body{overflow:auto;padding:10px 16px 16px;font-size:18px}
#panel h4{font-family:'PS2P';font-size:11px;margin:14px 0 6px;color:#2b587a}
#panel ul{margin:0;padding-left:18px}#panel li{margin:2px 0}#panel li.no{color:#9a9ab0}#panel li.ok{color:#227a44}
#panel .menu{display:flex;flex-direction:column;gap:5px}
#panel .shop button{font-size:17px}#panel button[disabled]{opacity:.5;cursor:default}
#panel .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.ach{border:2px solid #cbc9df;padding:6px 8px;background:#f4f4fa;color:#8888a0;font-size:16px}.ach b{display:block;font-size:16px}.ach span{font-size:14px}.ach.ok{border-color:#58c878;background:#effaf2;color:#13162f}
#panel label{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:18px}#panel input[type=range]{flex:1}
#panel input.sel{outline:3px solid #507299}
.small{font-size:14px;opacity:.8}
#mg{position:absolute;inset:0;background:rgba(10,12,30,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:8;padding:calc(10px + var(--st)) calc(10px + var(--sr)) calc(10px + var(--sb)) calc(10px + var(--sl))}
.mg-head{display:flex;gap:12px;align-items:center;font-family:'PS2P';font-size:12px;color:#fde38c}
#mg-quit{font-family:'PS2P';font-size:9px;background:#8a1f19;color:#fff;border:2px solid #fff;padding:4px 8px;cursor:pointer}
#mg-canvas{width:min(960px,96vw,calc((100vh - 170px)*1.6));aspect-ratio:8/5;image-rendering:pixelated;border:4px solid #507299;background:#000;touch-action:none}
#mg-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#mg-btns button{font-family:'PS2P';font-size:18px;min-width:64px;height:56px;background:#507299;color:#fff;border:3px solid #fff;cursor:pointer;touch-action:none}
#mg-btns button.yes{background:#2a8a4a}#mg-btns button.no{background:#a02a20}
#title,#ending{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(ellipse at center,rgba(19,22,47,.55),rgba(19,22,47,.95));text-align:center;padding:20px;z-index:9}
.t-logo{font-family:'PS2P';font-size:clamp(28px,7vw,64px);text-shadow:4px 4px 0 #13162f}
.t-logo.small{font-size:32px}
.t-logo .dl{background:#507299;padding:6px 14px;border:4px solid #fff;margin-right:8px}
.t-sub{font-family:'PS2P';font-size:clamp(9px,1.7vw,14px);color:#fde38c;margin-top:12px}
.t-sub2{font-size:18px;color:#cbc9df}
.t-help{font-size:16px;color:#cbc9df;line-height:1.5}
.t-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
#title button,#ending button{font-family:'PS2P';font-size:13px;padding:14px 20px;background:#507299;color:#fff;border:4px solid #fff;cursor:pointer;box-shadow:4px 4px 0 #13162f}
#title button:hover,#ending button:hover{background:#5f86b3}
#touch{position:absolute;inset:0;pointer-events:none}
#stick{position:absolute;left:calc(24px + var(--sl));bottom:calc(24px + var(--sb));width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.15);border:3px solid rgba(255,255,255,.4);pointer-events:auto}
#knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.5)}
#btn-e{position:absolute;right:calc(28px + var(--sr));bottom:calc(44px + var(--sb));width:76px;height:76px;border-radius:50%;font-family:'PS2P';font-size:20px;background:rgba(80,114,153,.85);color:#fff;border:3px solid #fff;pointer-events:auto}
body.in-dialog #touch,body.in-menu #touch,body.in-mg #touch{display:none}
body.in-mg #hint{display:none}
@media (max-width:700px){
  #hud{font-size:8px;max-width:200px;padding:5px 7px}#hud-goal{font-size:12px}#hud-goal b{font-size:7px}
  #dialog{font-size:18px}#dlg-choices button{font-size:16px}#alarm{font-size:8px;top:auto;bottom:150px}#toast{top:auto;bottom:180px;font-size:8px}
  #hint{bottom:160px;font-size:15px}
}
/* ---- онлайн (durovloh.net/dlgame.php) ---- */
.pill.online{background:#227a44;cursor:pointer}.pill.online.poll{background:#7a6a22}
#hud-save{font-size:12px;color:#8fd19e}#hud-save.err{color:#ff8a7a}
#btn-chat{position:absolute;right:calc(12px + var(--sr));bottom:calc(12px + var(--sb));width:52px;height:52px;border-radius:50%;font-size:22px;background:rgba(80,114,153,.9);color:#fff;border:3px solid #fff;cursor:pointer;z-index:3;touch-action:none}
body.touch #btn-chat{right:calc(118px + var(--sr));bottom:calc(56px + var(--sb));width:56px;height:56px}
#chatbox{position:absolute;left:50%;bottom:calc(16px + var(--sb));transform:translateX(-50%);width:min(560px,94vw,calc(100vw - 12px - var(--sl) - var(--sr)));background:rgba(19,22,47,.96);border:3px solid #507299;padding:8px;z-index:10;display:flex;flex-direction:column;gap:6px}
.chat-row{display:flex;gap:6px}
#chat-in{flex:1;min-width:0;font-family:'Pixelify',sans-serif;font-size:18px;padding:6px 8px;border:2px solid #8d8bb6;background:#fff;color:#13162f;-webkit-user-select:text;user-select:text}
#chatbox button{font-family:'PS2P',sans-serif;font-size:11px;background:#507299;color:#fff;border:2px solid #fff;padding:4px 10px;cursor:pointer}
.chat-emo{display:flex;gap:6px;flex-wrap:wrap}.chat-emo button{font-size:16px!important;font-family:sans-serif!important;min-width:44px;min-height:36px}
body.in-chat #touch,body.in-chat #btn-chat,body.in-chat #hint{display:none}
#net-banner{position:absolute;left:50%;top:8px;transform:translateX(-50%);background:rgba(19,22,47,.95);border:2px solid #fde38c;padding:6px 12px;font-size:15px;z-index:11;max-width:92vw;text-align:center}
#net-banner a{color:#fde38c}
.pl-list{display:flex;flex-direction:column;gap:4px}
.pl-row{display:flex;align-items:center;gap:10px;padding:4px 6px;border:2px solid #cbc9df;background:#f4f4fa}.pl-row.me{border-color:#fde38c;background:#fffbe8}
.pl-row img,.pl-noava{width:32px;height:32px;object-fit:cover;background:#cbc9df;flex:none}
.pl-name{flex:1;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl-floor{font-family:'PS2P';font-size:9px;color:#2b587a;white-space:nowrap}
/* ---- компактный HUD на телефонах (портрет и альбом) ---- */
@media (max-width:700px),(max-height:500px){
  #hud{top:calc(4px + var(--st));left:calc(4px + var(--sl));padding:4px 6px;gap:3px;font-size:7px;max-width:calc(100vw - 124px - var(--sl) - var(--sr));border-width:2px;cursor:pointer}
  #hud .hud-row{gap:4px;flex-wrap:nowrap;white-space:nowrap}
  .pill{padding:2px 3px}
  #btn-menu{font-size:10px;padding:1px 5px}
  #hud .xp{height:3px}
  #hud-clock{font-size:7px}
  #hud-goal{display:none;font-size:12px}#hud.open #hud-goal{display:block}
  #minimap{top:calc(4px + var(--st));right:calc(4px + var(--sr));border-width:2px;width:min(30vw,112px);height:auto}
  #toast{top:auto;bottom:calc(150px + var(--sb));font-size:8px;padding:6px 10px}
}
@media (max-height:500px){
  #stick{left:calc(14px + var(--sl));bottom:calc(14px + var(--sb));width:96px;height:96px}#knob{left:25px;top:25px;width:40px;height:40px}
  #btn-e{right:calc(16px + var(--sr));bottom:calc(20px + var(--sb));width:62px;height:62px;font-size:16px}
  body.touch #btn-chat{right:calc(88px + var(--sr));bottom:calc(16px + var(--sb));width:46px;height:46px;font-size:18px}
  #hint{bottom:calc(12px + var(--sb));font-size:14px;max-width:calc(100vw - 260px - var(--sl) - var(--sr))}#toast{bottom:auto;top:calc(46px + var(--st))}
  #dialog{min-height:90px;max-height:calc(100vh - 56px - var(--st) - var(--sb));font-size:16px;padding:10px 12px 16px;bottom:calc(6px + var(--sb))}#dlg-choices{display:grid;grid-template-columns:1fr 1fr;gap:4px}#dlg-choices button{font-size:15px;padding:3px 8px}
  #alarm{top:auto;bottom:calc(8px + var(--sb));font-size:8px}
  #mg{gap:4px;padding:4px}#mg-canvas{width:min(96vw,calc((100vh - 110px)*1.6))}#mg-btns button{height:40px;min-width:48px;font-size:14px}
  #panel{max-height:94vh}
}
/* ---- mobfix: кнопка чата не висит поверх диалога/меню/мини-игры; подсказка на узких экранах переносится ---- */
body.in-dialog #btn-chat,body.in-menu #btn-chat,body.in-mg #btn-chat{display:none!important}
@media (max-width:700px){#hint{white-space:normal;text-align:center;bottom:calc(160px + var(--sb))}}
#btn-fsexit{position:absolute;right:calc(4px + var(--sr));top:calc(84px + var(--st));width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:rgba(19,22,47,.8);color:#fff;font-size:15px;line-height:1;padding:0;z-index:3;cursor:pointer;touch-action:none}
body.in-dialog #btn-fsexit,body.in-menu #btn-fsexit,body.in-mg #btn-fsexit,body.in-chat #btn-fsexit{display:none!important}

/* mpfix: connection mode + own floor badge, guest note on the title screen */
#hud .pill.net{font-size:.85em;padding:2px 4px;margin-left:auto;color:#fff;white-space:nowrap}
#hud .pill.net.ws{background:#227a44}#hud .pill.net.poll{background:#7a6a22}#hud .pill.net.off{background:#7a2b2b}
#t-who.guest{color:#ffb4a8;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.4}#t-who.guest a{color:#fde38c}
/* гости онлайн: метка в списке игроков */
.pl-guest{font-size:.8em;background:#4a5068;color:#e8e6f5;padding:1px 4px;margin-left:4px;vertical-align:1px}

/* титул: одна большая кнопка «Играть», прогресс загрузки, второстепенные кнопки мельче */
#title .t-play{font-size:clamp(16px,3.2vw,24px);padding:18px 42px;background:#3f9b57;animation:tplay 1.6s ease-in-out infinite}
#title .t-play:hover{background:#4cb367}
#title .t-play.loading{background:#507299;animation:none}
@keyframes tplay{50%{transform:scale(1.05)}}
.t-small button{font-size:10px!important;padding:9px 12px!important;background:transparent!important;border-width:2px!important;box-shadow:none!important;opacity:.8}
#btn-continue-game{display:none!important}
#t-load{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:28px}
#t-load.done{visibility:hidden}
.t-bar{width:min(320px,70vw);height:10px;border:2px solid #fff;background:#13162f}
.t-bar i{display:block;height:100%;width:3%;background:#fde38c;transition:width .2s}
#t-load-txt{font-size:14px;color:#cbc9df}
/* онбординг: 3 шага, один раз; не перекрывает джойстик и кнопку E (стоит сверху по центру) */
#onb{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 64px);transform:translateX(-50%);width:min(420px,calc(100vw - 24px));background:rgba(19,22,47,.94);border:3px solid #fde38c;color:#fff;padding:12px 14px;z-index:8;font-size:17px;line-height:1.35;box-shadow:4px 4px 0 #13162f}
#onb .onb-step{font-family:'PS2P';font-size:10px;color:#fde38c;margin-bottom:6px}
#onb .onb-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
#onb button{font-family:'PS2P';font-size:10px;padding:8px 10px;background:#507299;color:#fff;border:2px solid #fff;cursor:pointer}
#onb #onb-skip{background:transparent}
@media (max-height:500px){#onb{top:calc(env(safe-area-inset-top) + 8px);font-size:15px;padding:8px 10px}}

/* плавающий джойстик: зона — левая половина ниже HUD; в покое джойстик полупрозрачный в углу */
#stick-zone{position:absolute;left:0;top:calc(96px + var(--st));width:50%;bottom:0;pointer-events:auto;touch-action:none}
#stick{opacity:.55;transition:opacity .15s;touch-action:none}
#stick.active{opacity:1;transition:none}
#btn-e{touch-action:none;-webkit-tap-highlight-color:transparent;line-height:1.1;padding:0 4px;overflow:hidden}
#btn-e.ctx{font-size:11px;background:rgba(63,155,87,.92);animation:bep 1.2s ease-in-out infinite}
@keyframes bep{50%{box-shadow:0 0 0 6px rgba(253,227,140,.45)}}
@media (max-width:700px),(max-height:500px){#btn-e{width:72px!important;height:72px!important}#btn-e.ctx{font-size:9px}}

html,body{overscroll-behavior:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}

/* v9: зона, кликабельная миникарта, большая карта */
#minimap{cursor:pointer;touch-action:manipulation;width:min(28vw,224px);height:auto}
#zone-pop{position:absolute;left:50%;top:calc(64px + var(--st));transform:translateX(-50%);background:rgba(19,22,47,.86);border:2px solid #507299;color:#fff;font-family:'PS2P';font-size:10px;padding:7px 12px;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis;pointer-events:none;z-index:4}
#zone-pop.show{animation:zpop 2.2s ease}
@keyframes zpop{0%{opacity:0;transform:translate(-50%,-6px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
#panel .menu button{min-height:44px}
@media (max-width:600px){#minimap{width:min(34vw,150px)}#zone-pop{top:calc(54px + var(--st));font-size:8px}}

/* v9: напоминание гостю о регистрации — сверху по центру, не над джойстиком/кнопкой */
#regp{position:absolute;left:50%;top:calc(8px + var(--st));transform:translateX(-50%);width:min(440px,calc(100vw - 520px));min-width:280px;display:flex;align-items:center;gap:8px;background:#fff;color:#13162f;border:3px solid #13162f;box-shadow:0 0 0 3px #507299;padding:6px 6px 6px 10px;z-index:6;animation:regin .35s ease}
#regp.hidden{display:none}
@keyframes regin{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
#regp .regp-txt{flex:1;display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.15}
#regp .regp-txt b{font-family:'PS2P';font-size:9px;line-height:1.4;color:#2b587a}
#regp-go{flex:none;min-height:44px;display:flex;align-items:center;padding:0 12px;background:#507299;color:#fff;font-family:'PS2P';font-size:9px;text-decoration:none;border:2px solid #13162f}
#regp-x{flex:none;width:44px;height:44px;background:#eef2f6;border:2px solid #8d8bb6;font-size:18px;cursor:pointer;color:#13162f}
body.in-dialog #regp,body.in-menu #regp{display:none}
@media (max-width:900px){#regp{width:calc(100vw - 16px - var(--sl) - var(--sr));min-width:0;top:calc(108px + var(--st))}}
@media (max-height:500px) and (min-width:600px){#regp{top:calc(64px + var(--st));width:min(420px,calc(100vw - 440px));min-width:260px}#regp .regp-txt span{display:none}}

#btn-fs{font-size:14px}
@media (pointer:coarse){#btn-menu,#btn-fs{min-width:44px;min-height:44px}#hud-online,#hud-net{min-height:28px;display:inline-flex;align-items:center}}

/* i18n: RU/EN toggle in settings */
.lang-row button { min-width: 48px; min-height: 44px; margin: 0 4px; }
.lang-row button.on { background: #4a76a8; color: #fff; border-color: #4a76a8; }

/* compact phone HUD: clock + XP bar only when the HUD is expanded (tap); landscape — one line */
@media (max-width:700px),(max-height:500px){
  #hud:not(.open) #hud-clock,#hud:not(.open) .xp{display:none}
}
@media (max-height:500px) and (min-width:560px){
  #hud:not(.open){flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:4px}
  #hud:not(.open) .hud-row{display:contents}
  #hud:not(.open) #hud-memes,#hud:not(.open) .sep,#hud:not(.open) #hud-votes{display:none}
}
@media (pointer:coarse){#btn-fsexit{width:44px;height:44px;font-size:18px}}
/* tablets (touch, wider than 700px): the m. frame is now full width, so keep the HUD compact here too; goal/clock/XP on tap */
@media (pointer:coarse) and (min-width:701px) and (min-height:501px){
  #hud{padding:5px 8px;gap:4px;font-size:9px;max-width:calc(100vw - 200px - var(--sl) - var(--sr));cursor:pointer}
  #hud .hud-row{gap:5px;flex-wrap:nowrap;white-space:nowrap}
  #hud-goal{display:none}#hud.open #hud-goal{display:block}
  #hud:not(.open) #hud-clock,#hud:not(.open) .xp{display:none}
  #regp{top:calc(108px + var(--st))}
}