* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #9fdcff; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #3a2a4d; user-select: none; -webkit-user-select: none; touch-action: none;
  -webkit-touch-callout: none; overscroll-behavior: none;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#touch { position: fixed; inset: 0; z-index: 1; }

/* джойстик */
#stick { position: fixed; z-index: 2; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: rgba(255,255,255,.22); border: 3px solid rgba(255,255,255,.6); pointer-events: none; opacity: 0; transition: opacity .15s; }
#stick.on { opacity: 1; }
#knob { position: absolute; left: 30px; top: 30px; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 3px 8px rgba(0,0,0,.25); }

/* интерфейс */
#hud, #controls { position: fixed; z-index: 3; pointer-events: none; transition: opacity .25s; }
#hud { top: 0; left: 0; right: 0; padding: calc(8px + var(--sat)) calc(10px + var(--sar)) 0 calc(10px + var(--sal));
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#hud > *, #controls > * { pointer-events: auto; }
body.busy #controls, body.busy #hud .col, body:not(.playing) #hud, body:not(.playing) #controls { opacity: 0; pointer-events: none; }
body.busy #controls *, body.busy #hud .col *, body:not(.playing) #hud *, body:not(.playing) #controls * { pointer-events: none; }

.pill { background: rgba(255,255,255,.92); border-radius: 20px; padding: 6px 12px; font-weight: 800; font-size: 17px;
  box-shadow: 0 3px 10px rgba(60,40,90,.18); display: inline-block; }
#topLeft { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: min(55vw, 340px); }
#objective { display: none; background: rgba(255,255,255,.92); border-radius: 14px; padding: 7px 12px; font-size: 14px; line-height: 1.25;
  box-shadow: 0 3px 10px rgba(60,40,90,.18); border-left: 5px solid #ff8a00; }
#objective.on { display: block; animation: pop .35s; }
#objective small { display: block; font-weight: 800; color: #ff6a00; font-size: 12px; margin-bottom: 2px; }
#timer { display: none; background: #fff; border-radius: 14px; padding: 4px 12px; font-weight: 800; font-size: 16px; box-shadow: 0 3px 10px rgba(60,40,90,.18); }
#timer.on { display: block; }
#timer.hurry { background: #ff5a5a; color: #fff; animation: pulse .5s infinite alternate; }
#topRight { display: flex; gap: 8px; align-items: flex-start; }
#topRight .col { display: flex; flex-direction: column; gap: 6px; transition: opacity .25s; }
#minimap { width: 118px; height: 118px; border-radius: 50%; box-shadow: 0 3px 12px rgba(60,40,90,.3); transition: width .25s, height .25s; }
#minimap.big { width: min(64vmin, 300px); height: min(64vmin, 300px); }

.round { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); font-size: 22px;
  box-shadow: 0 3px 10px rgba(60,40,90,.22); display: grid; place-items: center; padding: 0; }
.round:active { transform: scale(.9); }

#controls { right: calc(14px + var(--sar)); bottom: calc(14px + var(--sab)); width: 200px; height: 200px; }
#btnAction { position: absolute; right: 0; bottom: 0; width: 104px; height: 104px; border-radius: 50%;
  background: linear-gradient(#ffb3d4, #ff6fae); color: #fff; box-shadow: 0 5px 0 #d9478a, 0 8px 18px rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px;
  transform: scale(.6); opacity: .35; transition: transform .18s, opacity .18s; }
#btnAction.on { transform: scale(1); opacity: 1; animation: bob 1.2s infinite ease-in-out; }
#btnAction:active { transform: scale(.92) translateY(3px); box-shadow: 0 2px 0 #d9478a; }
#actIcon { font-size: 34px; line-height: 1; }
#actLabel { font-size: 11px; font-weight: 800; line-height: 1.1; margin-top: 3px; max-width: 92px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
#btnAction:not(.on) #actLabel { visibility: hidden; }
#btnJump { position: absolute; right: 116px; bottom: 4px; }
#btnHelp { position: absolute; right: 112px; bottom: 60px; width: 52px; height: 52px; font-size: 25px; }
#btnCam { position: absolute; right: 40px; bottom: 116px; }
#btnHelp.glow { background: #ffe066; animation: glow 0.9s infinite alternate; }
#btnHelp.glow::after { content: attr(data-need); position: absolute; top: -8px; right: -8px; font-size: 18px;
  background: #fff; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
#helpPick { position: absolute; right: 60px; bottom: 120px; display: none; gap: 8px; flex-direction: column; }
#helpPick.on { display: flex; animation: pop .25s; }
#helpPick button { background: #fff; border-radius: 16px; padding: 8px 12px; text-align: left; box-shadow: 0 4px 12px rgba(60,40,90,.25);
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 6px; font-weight: 800; width: 170px; }
#helpPick b { grid-row: span 2; font-size: 28px; }
#helpPick small { font-weight: 500; font-size: 12px; color: #7a6a8a; }

/* тосты */
#toasts { position: fixed; z-index: 6; top: calc(70px + var(--sat)); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: 90vw; }
.toast { background: rgba(58,42,77,.9); color: #fff; padding: 8px 16px; border-radius: 18px; font-weight: 700; font-size: 15px;
  text-align: center; animation: pop .3s; transition: opacity .5s, transform .5s; max-width: 100%; }
.toast.out { opacity: 0; transform: translateY(-10px); }

/* диалог */
#dialog { position: fixed; z-index: 7; left: 50%; bottom: calc(12px + var(--sab)); transform: translate(-50%, 140%);
  width: min(94vw, 640px); background: #fffaf4; border-radius: 22px; padding: 14px 16px 14px 14px;
  box-shadow: 0 8px 30px rgba(40,20,60,.35); border: 3px solid #fff; display: flex; gap: 12px; align-items: flex-start;
  transition: transform .25s ease-out; }
#dialog.on { transform: translate(-50%, 0); }
#dPortrait { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 34px;
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
#dBody { flex: 1; min-width: 0; }
#dName { font-weight: 900; font-size: 15px; margin-bottom: 3px; }
#dText { font-size: 17px; line-height: 1.38; min-height: 46px; white-space: pre-line; }
#dChoices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#dChoices:empty { display: none; }
#dNext { position: absolute; right: 14px; bottom: 6px; color: #ff6fae; font-size: 14px; opacity: 0; }
#dNext.on { opacity: 1; animation: bob .8s infinite; }

/* кнопки в окнах */
.btn { display: block; width: 100%; background: #f1ebf7; border-radius: 14px; padding: 12px 14px; font-weight: 800; font-size: 16px;
  margin: 6px 0; box-shadow: 0 3px 0 #d8cde4; transition: transform .1s; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #d8cde4; }
#dChoices .btn { width: auto; flex: 1; margin: 0; }
.btn.primary { background: linear-gradient(#ff9fc9, #ff6fae); color: #fff; box-shadow: 0 3px 0 #d9478a; }
.btn.danger { background: #ffe4e4; color: #c62828; box-shadow: 0 3px 0 #f2b8b8; }
.btn.small { font-size: 14px; padding: 8px; }
.btn.big { font-size: 20px; padding: 16px; }
.btn.right { background: #4caf50; color: #fff; box-shadow: 0 3px 0 #2e7d32; }
.btn.wrong { background: #ffcdd2; color: #b71c1c; opacity: .7; }
.btn.toggle { opacity: .55; }
.btn.toggle.on { opacity: 1; background: #e3f6ee; box-shadow: 0 3px 0 #a7dcc4; }
.mrow { display: flex; gap: 6px; }
.mrow .btn { flex: 1; padding: 10px 4px; font-size: 14px; }

/* окна */
#modal { position: fixed; z-index: 8; inset: 0; background: rgba(40,20,60,.45); display: none; align-items: center; justify-content: center;
  padding: calc(10px + var(--sat)) calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal)); }
#modal.on { display: flex; }
.mbox { position: relative; background: #fffaf4; border-radius: 24px; width: min(94vw, 420px); max-height: 100%; overflow-y: auto;
  padding: 18px 16px 14px; box-shadow: 0 12px 40px rgba(40,20,60,.4); animation: pop .25s; touch-action: pan-y; }
.mbox.wide { width: min(96vw, 620px); }
.mbox h2 { margin: 0 40px 10px 0; font-size: 21px; }
.mclose { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; background: #f1ebf7; font-size: 18px; font-weight: 900; }
.ptext { white-space: pre-line; font-size: 16px; line-height: 1.4; margin: 0 0 10px; text-align: center; }

/* головоломки */
.popts .btn { font-size: 17px; }
.sstatus { text-align: center; font-weight: 800; margin-bottom: 6px; }
.sdots { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.sdots span { width: 12px; height: 12px; border-radius: 50%; background: #e0d6ea; }
.sdots span.on { background: #ff6fae; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(70vw, 260px, 48vh); margin: 0 auto 10px; }
.spad { aspect-ratio: 1; border-radius: 30%; opacity: .55; box-shadow: inset 0 -6px 0 rgba(0,0,0,.25); transition: opacity .1s, transform .1s; }
.spad.lit { opacity: 1; transform: scale(1.06); box-shadow: 0 0 24px 4px rgba(255,255,255,.9), inset 0 -6px 0 rgba(0,0,0,.2); }
.cdisp { display: flex; justify-content: center; gap: 10px; margin-bottom: 12px; }
.ccell { width: 52px; height: 62px; border-radius: 12px; background: #3a2a4d; color: #ffe066; font-size: 34px; font-weight: 900; display: grid; place-items: center; }
.cdisp.right .ccell { background: #4caf50; color: #fff; }
.cpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(70vw, 240px); margin: 0 auto; }
.ckey { height: 52px; border-radius: 14px; background: #f1ebf7; font-size: 22px; font-weight: 800; box-shadow: 0 3px 0 #d8cde4; }
.ckey:active { transform: translateY(2px); }
.ckey.ok { background: #4caf50; color: #fff; box-shadow: 0 3px 0 #2e7d32; }
.shake { animation: shake .4s; }

/* итог задания */
.done { text-align: center; }
.done h2 { margin: 0 0 4px; }
.dbig { font-size: 64px; animation: pop .5s; }
.dtitle { margin: 0 0 10px; color: #7a6a8a; font-weight: 700; }
.dreward { font-size: 26px; font-weight: 900; color: #e68a00; margin: 4px 0; }
#confetti { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
#confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }

/* журнал */
.jrow { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: #fff; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(60,40,90,.1); }
.jrow.active { border: 2px solid #ff8a00; }
.jrow.done { opacity: .65; }
.jrow.locked { filter: grayscale(.8); opacity: .6; }
.jicon { font-size: 30px; }
.jmain { flex: 1; min-width: 0; }
.jmain b { display: block; }
.jmain small { color: #7a6a8a; }
.jst { text-align: center; font-size: 20px; }
.jst small { display: block; font-size: 11px; font-weight: 700; }
.jfoot { text-align: center; color: #7a6a8a; margin: 6px 0 0; }

/* гардероб */
.wallet { font-weight: 800; margin-bottom: 8px; }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tab { flex: 1; padding: 9px 4px; border-radius: 12px; background: #f1ebf7; font-weight: 800; font-size: 14px; }
.tab.on { background: #ff6fae; color: #fff; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.witem { background: #fff; border-radius: 16px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 2px 6px rgba(60,40,90,.12); border: 3px solid transparent; }
.witem.worn { border-color: #ff6fae; }
.witem.locked { opacity: .6; }
.witem b { font-size: 14px; }
.witem small { font-size: 12px; color: #7a6a8a; font-weight: 700; }
.wsw { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.wemoji { font-size: 34px; line-height: 40px; }

.howto { padding-left: 4px; list-style: none; margin: 0; }
.howto li { margin-bottom: 9px; line-height: 1.35; }

/* титульный экран */
#title { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.55), rgba(255,182,214,.75) 60%, rgba(160,120,255,.8));
  padding: 20px; transition: opacity .6s; text-align: center; }
#title.out { opacity: 0; pointer-events: none; }
body:not(.ready) #title { background: linear-gradient(#ffd6e8, #c9b3ff); }
.tlogo h1 { margin: 0; font-size: clamp(44px, 12vmin, 86px); color: #fff; text-shadow: 0 4px 0 #ff5fa2, 0 8px 20px rgba(120,40,120,.4); letter-spacing: 1px; }
.tlogo p { margin: 0; font-size: clamp(18px, 5vmin, 28px); font-weight: 800; color: #6a3d8f; }
.temoji { font-size: clamp(48px, 13vmin, 80px); animation: bob 1.6s infinite ease-in-out; }
#titleBtns { width: min(80vw, 300px); display: none; }
#titleBtns.on { display: block; animation: pop .4s; }
#loading { font-weight: 800; color: #6a3d8f; max-width: 420px; }
#loading.hide { display: none; }
.tfoot { position: absolute; bottom: calc(14px + var(--sab)); font-size: 13px; color: #6a3d8f; opacity: .8; }

/* компактнее в горизонтальном положении и на маленьких экранах */
@media (max-height: 460px) {
  #minimap { width: 92px; height: 92px; }
  .round { width: 40px; height: 40px; font-size: 19px; }
  #topRight .col { gap: 4px; }
  #dialog { width: min(70vw, 640px); padding: 10px 14px 10px 10px; }
  #dText { font-size: 15px; min-height: 0; }
  #dPortrait { width: 46px; height: 46px; font-size: 26px; }
  #controls { transform: scale(.88); transform-origin: right bottom; }
  .mbox { padding: 14px 14px 10px; }
  .spad { border-radius: 24%; }
}
@media (max-width: 380px) { #objective { font-size: 13px; } }

@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes pulse { to { transform: scale(1.08); } }
@keyframes glow { from { box-shadow: 0 0 0 0 rgba(255,210,60,.9); } to { box-shadow: 0 0 0 10px rgba(255,210,60,0); } }
@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -8px; } 40% { translate: 8px; } 60% { translate: -6px; } 80% { translate: 6px; } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* вертикальный экран: подсказки ниже миникарты */
@media (orientation: portrait) { #toasts { top: calc(190px + var(--sat)); } }