/* «Мастерская изобретателей»: walnut wood, amber and blueprint blue. */
:root{
  color-scheme: dark;
  --walnut:#1A1410; --wood:#2A2019; --line:#433427;
  --amber:#F2B35B; --amber-hi:#F7C77F; --teal:#6FD6C0; --teal-hi:#8FE3D1;
  --blue:#2F6FA8; --blue-deep:#1F4E79;
  --paper:#F1E6CF; --paper-2:#E6D6B4; --paper-edge:#CDB88F; --cream:#FBF5E8;
  --ink:#33251A; --ink-soft:#6B5641; --ink-teal:#1C6B5D;
  --text:#F3ECE2; --muted:#B8A794; --danger:#D0492B;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  /* neutral tokens read by engine/engine.css */
  --bg:var(--walnut); --stage-bg:var(--wood); --panel-dark:#241B14;
  --hud-bg:rgba(20,14,10,.75); --hud-tracking:normal;
  --page-image:radial-gradient(900px 420px at 50% -160px,#3A2A1C 0%,transparent 70%);
  --eve:#3B3F6A; --eve-on:#9AA6F0; --ghost-hover:#2A2019;
  --choice-bg:var(--blue-deep); --choice-fg:var(--cream); --choice-sub:#CFE0EF; --choice-hover:#2A5F92;
  --team-on-bg:#E3ECF3; --team-on-ring:#4B84B8; --team-icon:30px;
  --stage-shadow:0 12px 34px rgba(0,0,0,.45); --choice-ring:inset 0 0 0 1px #4B84B8;
}
.brand{display:flex;flex-direction:column;gap:2px}
.brand b{font-family:var(--display);font-weight:700;font-size:16px}
.brand span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes arc{0%{transform:translate(0,0)}50%{transform:translate(90px,-110px)}100%{transform:translate(180px,-10px)}}
@keyframes flyaway{to{transform:translate(120px,-120px) scale(.4);opacity:0}}
@keyframes hand{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,16px)}}
.lamp{transform-box:fill-box;transform-origin:50% 0;animation:sway 5s ease-in-out infinite}
.gearspin{transform-box:fill-box;transform-origin:center;animation:spin 6s linear infinite}
.fling{transform-box:fill-box;animation:arc 1s ease-in-out forwards}
.handhint{animation:hand 1.6s ease-in-out infinite}

/* --- the season: a tablet held sideways, picture on the left, words and buttons on the right --- */
html{min-height:100%}
body{min-height:100vh}
.panel.kid p{font-size:clamp(18px,2.2vw,26px);line-height:1.3}
.btn.big{min-height:64px}
@media (min-width:860px) and (orientation:landscape){
  .app{max-width:1180px}
  #view:not(.scriptview){display:grid!important;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"stage panel" "stage actions";align-items:start;gap:16px}
  #view:not(.scriptview)>.stage{grid-area:stage}
  #view:not(.scriptview)>.panel{grid-area:panel}
  #view:not(.scriptview)>.actions{grid-area:actions}
}
.coopbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.coopbar .pill{min-height:56px;padding:0 16px;font-size:15px}
.pick[aria-pressed="true"]{outline:4px solid var(--amber)}
.pick.hint{box-shadow:0 0 0 5px var(--teal)}
.hero{display:flex;gap:12px;align-items:center}
.hero-face{width:84px;flex:none}.hero-face svg{width:100%;height:auto}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;background:var(--cream);border:1px solid var(--paper-edge);text-decoration:none;color:var(--ink);min-height:84px}
.tile b{font-family:var(--display);font-size:18px}.tile span{font-size:14px;line-height:1.25}.tile i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.tile.done{background:#DDEFD9;border-color:#8FBF86}.tile.next{outline:3px solid var(--amber)}.tile.locked{opacity:.5}
a.chip{text-decoration:none;color:var(--ink)}a.chip.on{background:var(--ink);color:var(--paper)}
.slot-new{animation:slotpop .9s ease-out}
@keyframes slotpop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1)}}
.spin{animation:wheelspin .8s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes wheelspin{to{transform:rotate(360deg)}}
.bump{animation:wheelbump .35s ease-in-out infinite}
@keyframes wheelbump{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* the smallest level: bigger buttons for a smaller hand */
[data-level="malysh"] .btn.big{min-height:84px;font-size:clamp(20px,2.6vw,28px)}
[data-level="malysh"] .coopbar .pill{min-height:84px;padding:0 24px;font-size:17px}
/* the "listen again" button shows only where the browser has a Russian voice (so not in headless Linux tests); it is a
   target for the child's finger like any other, so it is sized for the level: 56px, and 84px for the smallest */
#view .say{width:56px;height:56px}
#view .say svg{width:26px;height:26px}
[data-level="malysh"] #view .say{width:84px;height:84px}
[data-level="malysh"] #view .say svg{width:36px;height:36px}
input.bigrange{width:100%;min-height:56px;accent-color:var(--amber);cursor:pointer}
@keyframes gearturn{to{transform:rotate(360deg)}}
.online{margin-top:6px}
.online .field{margin-top:8px}.online input{font-size:13px}
.online a.btn{display:inline-block;text-decoration:none;margin-top:6px;text-align:center}