/* Движок «малыш» — общий вид. Цвета «Плюш»: лён #f3ead9, молоко #fbf6ec, мёд #d9a441, мох #5e7350, терракота #b5522f, ночь #1b2440, обводка #3a2a20.
   На игровом слое: без зума, выделения, меню долгого нажатия; анимации — только на мелких элементах (transform, opacity). */
html, body { margin: 0; padding: 0; height: 100%; position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; background: #f3ead9; }
body { font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #3a2a20; -webkit-text-size-adjust: 100%; }
.tn { position: fixed; inset: 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; }
.tn img { -webkit-user-drag: none; user-select: none; pointer-events: none; display: block; }
.tn-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.tn-scene { position: absolute; inset: 0; overflow: hidden; }
.tn-abs { position: absolute; left: 0; top: 0; }
.tn-hit { pointer-events: auto !important; cursor: pointer; touch-action: none; }
.tn-hit.tn-drag { z-index: 50; cursor: grabbing; }

/* искорка касания мимо */
.tn-spark { position: absolute; width: 44px; height: 44px; pointer-events: none; z-index: 60; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, .95) 0 12%, rgba(255, 216, 138, .5) 30%, rgba(255, 216, 138, 0) 70%);
  animation: tn-spark .5s ease-out forwards; }
@keyframes tn-spark { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* подсветка цели: мягкое тёплое сияние, 0,8 вспышки в секунду (WCAG 2.3.1 — не чаще 3) */
.tn-glow { animation: tn-glow 1.25s ease-in-out infinite; }
@keyframes tn-glow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 220, 130, .7)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 214, 110, 1)); transform: scale(1.08); } }

/* старт */
.tn-start { position: absolute; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, #fbf6ec 0, #f3ead9 55%, #e9dcc4 100%); transition: opacity .45s; }
.tn-start.off { opacity: 0; pointer-events: none; }
.tn-start__btn { width: min(62vmin, 300px); height: min(62vmin, 300px); min-width: 180px; min-height: 180px; border: 0; padding: 0; background: none;
  cursor: pointer; border-radius: 50%; transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.tn-start__btn.down { transform: scale(.94); }
.tn-start__btn:focus-visible { outline: 4px solid #b5522f; outline-offset: 6px; }
.tn-start__pic { width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) { .tn-start__pic { animation: tn-breath 2.6s ease-in-out infinite; } }
@keyframes tn-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* значок замка: неяркий, 44 px, вне игровых целей */
.tn-lockbtn { position: absolute; z-index: 90; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(251, 246, 236, .55);
  top: calc(env(safe-area-inset-top) + 8px); right: calc(env(safe-area-inset-right) + 8px); cursor: pointer; touch-action: none; }
.tn-lockbtn svg { width: 44px; height: 44px; display: block; }
.tn-lockbtn rect, .tn-lockbtn path { stroke: #3a2a20; stroke-width: 2.2; stroke-linejoin: round; opacity: .55; }
.tn-lockbtn rect { fill: rgba(58, 42, 32, .12); }
.tn-lockbtn__ring { fill: none; stroke: #b5522f; stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 22px 22px; }
.tn-lockbtn.hold .tn-lockbtn__ring { stroke-dashoffset: 0; transition: stroke-dashoffset 3s linear; }

/* отдых: экран медленно темнеет, Шуршик спит */
.tn-rest { position: absolute; inset: 0; z-index: 70; opacity: 0; transition: opacity 4s ease; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(43, 55, 96, .82) 0, rgba(14, 20, 38, .93) 75%); }
.tn-rest.on { opacity: 1; }
.tn-rest__wrap { position: relative; width: min(78vmin, 420px); }
.tn-rest__pic { width: 100%; height: auto; }
.tn-rest__z { position: absolute; left: 64%; top: 18%; font: italic 700 34px Georgia, serif; color: #ead39a; pointer-events: none; }
.tn-rest__z span { position: absolute; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .tn-rest.on .tn-rest__z span { animation: tn-z 4.5s ease-in-out infinite; }
  .tn-rest__z span:nth-child(2) { animation-delay: 1.5s !important; font-size: 26px; }
  .tn-rest__z span:nth-child(3) { animation-delay: 3s !important; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .tn-rest__z span { opacity: .7; } .tn-rest__z span:nth-child(2) { left: 26px; top: -26px; } .tn-rest__z span:nth-child(3) { left: 46px; top: -48px; } }
@keyframes tn-z { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(40px, -70px); } }

/* подписи фраз — только ?debug=1 */
.tn-cap { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 10px); transform: translateX(-50%); z-index: 95; max-width: 90%;
  background: rgba(27, 36, 64, .82); color: #fbf6ec; padding: 6px 14px; border-radius: 14px; font-size: 15px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.tn-cap.on { opacity: 1; }

/* окна для взрослого: обычный текст, можно выделять и прокручивать */
.tn-adult { position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(27, 36, 64, .55);
  -webkit-user-select: text; user-select: text; touch-action: auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.tn-dlg__box, .tn-panel__box { position: relative; background: #fbf6ec; border-radius: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); color: #3a2a20; }
.tn-dlg__box { width: min(340px, calc(100vw - 32px)); padding: 18px 18px 14px; text-align: center; max-height: calc(100% - 16px); overflow: auto; }
.tn-h { font: 600 22px/1.25 Georgia, "Times New Roman", serif; margin: 2px 0 8px; }
.tn-p { margin: 0 0 6px; }
.tn-num { font: 700 24px/1.25 Georgia, serif; color: #b5522f; margin: 4px 0 10px; }
.tn-x { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 30px; line-height: 1; color: #3a2a20; cursor: pointer; border-radius: 50%; }
.tn-code { display: flex; gap: 10px; justify-content: center; margin: 0 0 12px; }
.tn-code span { width: 40px; height: 48px; border-radius: 10px; border: 2px solid #c9b79a; display: flex; align-items: center; justify-content: center; font: 700 24px system-ui, sans-serif; }
.tn-code span.on { border-color: #5e7350; }
.tn-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tn-keys.off { opacity: .4; pointer-events: none; }
.tn-key { height: 52px; border: 0; border-radius: 14px; background: #efe4cf; font: 600 22px system-ui, sans-serif; color: #3a2a20; cursor: pointer; touch-action: manipulation; }
.tn-key:active { background: #e3d3b4; }
.tn-key--empty { visibility: hidden; }
.tn-msg { min-height: 22px; margin: 8px 0 0; font-size: 14px; color: #8a4a2a; }
@media (max-height: 480px) {
  .tn-dlg__box { width: min(560px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: center; padding: 12px 16px; }
  .tn-dlg__box > .tn-keys { grid-column: 2; grid-row: 1 / span 5; }
  .tn-key { height: 44px; }
}

.tn-panel__box { width: min(560px, calc(100vw - 24px)); max-height: calc(100% - 20px); overflow: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px 18px; touch-action: pan-y; }
.tn-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.tn-stat { margin: 4px 0 12px; }
.tn-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.tn-row__l { font-weight: 600; }
.tn-seg { display: flex; gap: 6px; }
.tn-seg__b { min-width: 52px; height: 44px; padding: 0 10px; border: 2px solid #d8c8aa; border-radius: 12px; background: #fff; font: 600 16px system-ui, sans-serif; color: #3a2a20; cursor: pointer; }
.tn-seg__b.on { border-color: #5e7350; background: #e9eedd; }
.tn-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.tn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 2px solid #d8c8aa; border-radius: 14px;
  background: #fff; font: 600 16px system-ui, sans-serif; color: #3a2a20; text-decoration: none; cursor: pointer; }
.tn-btn--main { background: #b5522f; border-color: #b5522f; color: #fff; }
.tn-btn--link { width: 100%; margin: 6px 0 0; border-color: #5e7350; }
.tn-btn--exit { width: 100%; margin: 14px 0 0; background: none; border-style: dashed; color: #6b5444; }
.tn-btn:focus-visible, .tn-seg__b:focus-visible, .tn-key:focus-visible, .tn-x:focus-visible { outline: 3px solid #3f7f86; outline-offset: 2px; }
.tn-note { font-size: 14px; color: #6b5444; margin: 4px 0 8px; }
.tn-note--warn { color: #8a3a1e; background: #fbe9dc; border-radius: 10px; padding: 8px 10px; }
.tn-guide { margin: 8px 0; border-top: 1px solid #e3d6bd; border-bottom: 1px solid #e3d6bd; padding: 6px 0; }
.tn-guide summary { min-height: 40px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.tn-guide__body { font-size: 15px; }
.tn-guide__body p { margin: 6px 0; }
.tn-from { margin-top: 10px; padding-top: 4px; }

/* полянка выбора игр (MB2): большие картинки, фон — мир */
.tn-meadow { position: absolute; inset: 0; z-index: 55; overflow: hidden; background: #e7efd6; }
.tn-meadow[hidden] { display: none; }
.tn-card { position: absolute; z-index: 56; display: flex; align-items: center; justify-content: center; border-radius: 26px; }
.tn-card img { width: 100%; height: 100%; object-fit: contain; }

/* «домик» — на полянку; неяркий, 52 px, левый верхний угол в безопасном поле; под отдыхом (z 70) и замком */
.tn-homebtn { position: absolute; z-index: 66; width: 52px; height: 52px; padding: 0; border: 2px solid rgba(58, 42, 32, .22); border-radius: 50%;
  background: rgba(251, 246, 236, .78); top: calc(env(safe-area-inset-top) + 8px); left: calc(env(safe-area-inset-left) + 8px); cursor: pointer; touch-action: none; }
.tn-homebtn[hidden] { display: none; }
.tn-homebtn svg { width: 48px; height: 48px; display: block; }
.tn-homebtn path { fill: #d9a441; stroke: #3a2a20; stroke-width: 2.4; stroke-linejoin: round; opacity: .8; }