:root {
  --ink: #fff;
  --glass: rgba(16, 18, 44, .58);
  --line: rgba(255, 255, 255, .16);
  --accent: #ffb04a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #05060f; color: var(--ink);
  font-family: "SF Pro Rounded", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#ui { position: fixed; inset: 0; pointer-events: none; }
#ui button, #ui input, #ui a, #joy, #log, #intro { pointer-events: auto; }
body.clean #ui { display: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* верхняя полоса */
#top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  transition: opacity .5s;
}
#daybox { flex: none; }
#daynum {
  white-space: nowrap; font-size: clamp(30px, 6vw, 56px); font-weight: 900; letter-spacing: .02em; line-height: 1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
}
#daytitle { margin-top: 6px; font-size: clamp(13px, 2.2vw, 17px); font-weight: 600; opacity: .82; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
#btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#btns button, #log-close, #timeline {
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#btns button, #log-close { padding: 9px 14px; font-size: 14px; font-weight: 600; }
#btns button:active, #log-close:active { background: rgba(255, 255, 255, .2); }
/* переход в Telegram-канал автора */
#btns a.follow {
  padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none;
  color: #1b1203; background: var(--accent); border: 1px solid var(--accent);
}
#btns a.follow:active { transform: scale(.97); }
#btns a.follow.nudge { animation: nudge 1.2s ease-in-out 4; }
@keyframes nudge { 50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(255, 176, 74, .25); } }

/* подсказка рядом с объектом */
#tip {
  position: absolute; left: 50%; top: calc(132px + env(safe-area-inset-top)); transform: translateX(-50%);
  width: max-content; max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 18px; text-align: center;
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#tip b { display: block; font-size: 16px; color: var(--accent); }
#tip span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; opacity: .9; }

#passport {
  display: inline-block; white-space: nowrap; margin-top: 9px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--accent);
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* лента событий: слева внизу, чтобы не закрывать героя */
#feed {
  position: absolute; left: calc(16px + env(safe-area-inset-left)); bottom: calc(96px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: min(72vw, 360px);
}
#feed .line {
  padding: 7px 13px; border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 1.3;
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: feed-in .25s ease-out; transition: opacity .6s;
}
#feed .line.find { color: var(--accent); background: rgba(40, 26, 6, .82); border-color: rgba(255, 176, 74, .7); }
#feed .line.out { opacity: 0; }
@keyframes feed-in { from { opacity: 0; transform: translateY(8px); } }
.touch #feed { bottom: calc(176px + env(safe-area-inset-bottom)); }
body[data-mode="intro"] #feed { display: none; }

/* низ: машина времени и подсказка по управлению */
#bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 16px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#timeline { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; max-width: 100%; }
#timeline button {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12);
  font-size: 20px; line-height: 1; font-weight: 700;
}
#timeline input { width: min(46vw, 260px); accent-color: var(--accent); }
#tl-label { font-size: 13px; font-weight: 600; white-space: nowrap; min-width: 92px; }
#hint { font-size: 12px; opacity: .55; text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.touch #hint { display: none; }
.touch #bottom { padding-bottom: calc(168px + env(safe-area-inset-bottom)); }

/* сенсорное управление */
#joy, #jump { display: none; position: absolute; }
.touch #joy, .touch #jump { display: block; }
#joy {
  left: calc(22px + env(safe-area-inset-left)); bottom: calc(26px + env(safe-area-inset-bottom));
  width: 128px; height: 128px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line); touch-action: none;
}
#knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(255, 255, 255, .3);
}
#jump {
  right: calc(26px + env(safe-area-inset-right)); bottom: calc(40px + env(safe-area-inset-bottom));
  width: 96px; height: 96px; border-radius: 50%; font-size: 14px; font-weight: 700;
  background: rgba(255, 176, 74, .22); border: 1px solid rgba(255, 176, 74, .55); touch-action: none;
}
#jump:active { background: rgba(255, 176, 74, .45); }

/* летопись */
#log {
  position: absolute; right: 12px; top: calc(74px + env(safe-area-inset-top)); bottom: 12px;
  width: min(380px, calc(100vw - 24px)); padding: 16px; overflow: auto; touch-action: pan-y;
  background: rgba(12, 13, 32, .86); border: 1px solid var(--line); border-radius: 22px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
#log-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 17px; }
#log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#log-list li { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); cursor: pointer; }
#log-list li.future { opacity: .4; }
#log-list .n { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
#log-list .t { margin-top: 2px; font-size: 17px; font-weight: 700; }
#log-list .s, #log-list .q, #log-list .c { margin-top: 4px; font-size: 13px; line-height: 1.4; opacity: .82; }
#log-list .q { font-style: italic; }

/* заставка */
#intro {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 20px calc(7vh + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(4, 4, 12, .9), rgba(4, 4, 12, 0) 58%);
  transition: opacity .7s;
}
#intro.off { opacity: 0; pointer-events: none; }
#intro-card { text-align: center; max-width: 560px; }
.kicker { font-size: 14px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
#intro h1 { margin: 8px 0 10px; font-size: clamp(40px, 10vw, 88px); font-weight: 900; letter-spacing: -.02em; line-height: .98; }
#intro p { margin: 0 auto 22px; font-size: clamp(15px, 2.4vw, 18px); line-height: 1.45; opacity: .86; }
#play {
  padding: 15px 34px; border: 0; border-radius: 999px; background: var(--accent); color: #1b1203;
  font-size: 18px; font-weight: 800; box-shadow: 0 8px 30px rgba(255, 176, 74, .35);
}
#play:active { transform: scale(.97); }
#intro-follow {
  display: block; width: max-content; margin: 16px auto 0; font-size: 14px; font-weight: 600;
  color: var(--ink); opacity: .82; text-decoration: underline; text-underline-offset: 3px;
}

/* режимы */
body[data-mode="intro"] #top, body[data-mode="intro"] #bottom { opacity: 0; pointer-events: none; }
body[data-mode="intro"] #top button, body[data-mode="intro"] #top a, body[data-mode="intro"] #bottom * { pointer-events: none; }
body[data-mode="intro"] #joy, body[data-mode="intro"] #jump,
body[data-mode="orbit"] #joy, body[data-mode="orbit"] #jump { display: none; }
body[data-mode="orbit"] #hint { visibility: hidden; }

/* узкий экран */
@media (max-width: 520px) {
  #btns { gap: 6px; }
  #btns button { padding: 8px 11px; font-size: 13px; }
  #btns a.follow { padding: 8px 11px; font-size: 13px; }
}