/* Engine styles: layout and components shared by every game. No game-specific colours here.
   A game's theme.css must define these tokens (see games/dva-ogonka/theme.css for a full set):
     page:    --bg --text --muted --page-image --stage-bg --panel-dark --hud-bg --hud-tracking
     palette: --amber --amber-hi --teal --teal-hi --paper --paper-2 --paper-edge --cream --ink --ink-soft --ink-teal --danger --line
     details: --eve --eve-on --ghost-hover --choice-bg --choice-fg --choice-sub --choice-hover --choice-ring
              --team-on-bg --team-on-ring --team-icon --stage-shadow
     fonts:   --display --serif --mono */
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--serif);padding-inline:16px;padding-block:14px 40px;
  background-image:var(--page-image);}
.app{max-width:520px;margin-inline:auto;display:flex;flex-direction:column;gap:14px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tb-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.who,.ttsbtn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:transparent}
.who b{color:var(--amber);font-weight:600}
.who.kid b{color:var(--teal)}
.ttsbtn{cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ttsbtn[aria-pressed="true"]{color:var(--teal);border-color:#2E6B63}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.progress{display:flex;gap:4px}
.progress i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.progress i.on{background:var(--teal)}
.progress i.eve{background:var(--eve)}
.progress i.eve.on{background:var(--eve-on)}
.stage{position:relative;width:100%;max-width:100%;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--stage-bg);box-shadow:var(--stage-shadow);touch-action:none}
.stage svg{display:block;width:100%;height:100%}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
.hud{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.hud span{font-family:var(--mono);font-size:11px;letter-spacing:var(--hud-tracking);background:var(--hud-bg);color:var(--text);border-radius:999px;padding:4px 9px}
.hud span b{color:var(--amber)}
.panel{background:var(--paper);color:var(--ink);border-radius:14px;padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 0 0 1px var(--paper-edge)}
.panel h2{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.3;text-wrap:balance;margin:0}
.panel p{margin:0;font-size:17px;line-height:1.55}
.panel.kid p{font-size:19px;line-height:1.5}
.panel .small{font-size:14px;color:var(--ink-soft);line-height:1.45}
.row{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.beat{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.beat b{font-family:var(--display);font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--ink)}
.say{appearance:none;border:1px solid var(--paper-edge);background:var(--cream);color:var(--ink);border-radius:999px;width:40px;height:40px;display:inline-grid;place-items:center;cursor:pointer;flex:none}
.say svg{width:20px;height:20px}
.dark{background:var(--panel-dark);color:var(--text);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 0 0 1px var(--line)}
.dark h3{font-family:var(--display);font-weight:500;font-size:15px;margin:0;color:var(--amber)}
.dark ul,.dark ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.dark li{font-size:15.5px;line-height:1.45}
.dark li b{color:var(--teal-hi);font-weight:600}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:4px 9px;align-self:flex-start}
.tag.ai{color:var(--ink-teal);background:#CFEDE4}
.tag.pre{color:var(--ink-soft);background:var(--paper-2)}
.tag.voice{color:#7A4A12;background:#F6DDB4}
.btn{appearance:none;border:0;border-radius:12px;padding:13px 18px;font-family:var(--display);font-weight:500;font-size:14.5px;cursor:pointer;background:var(--amber);color:#2A1A08;min-height:52px;transition:background .15s,transform .1s;text-align:center}
.btn:hover{background:var(--amber-hi)}
.btn:active{transform:translateY(1px)}
.btn.teal{background:var(--teal);color:#0B2A24}
.btn.teal:hover{background:var(--teal-hi)}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--ghost-hover)}
.btn.big{font-size:17px;min-height:60px}
.btn[disabled]{opacity:.45;cursor:default}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.actions .btn{flex:1 1 170px}
button:focus-visible,input:focus-visible,select:focus-visible,label.card:focus-within,[tabindex]:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:400px){.grid2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select{font-family:var(--serif);font-size:16px;color:var(--ink);background:var(--cream);border:1px solid var(--paper-edge);border-radius:10px;padding:10px 12px;width:100%}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid var(--cream);box-shadow:0 0 0 1px var(--paper-edge);cursor:pointer;padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)}
.pill{font-family:var(--mono);font-size:12px;border-radius:999px;padding:7px 12px;border:1px solid var(--paper-edge);background:var(--cream);color:var(--ink);cursor:pointer}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.looks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:400px){.looks{grid-template-columns:1fr}}
.look{display:flex;flex-direction:column;gap:8px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:440px){.cards{grid-template-columns:1fr}}
label.card{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--cream);border:1px solid var(--paper-edge);border-radius:12px;padding:12px;cursor:pointer}
label.card input{position:absolute;opacity:0;pointer-events:none}
label.card b{font-family:var(--display);font-weight:500;font-size:14px}
label.card span{font-size:13.5px;color:var(--ink-soft);line-height:1.35}
label.card:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
label.card:has(input:checked) span{color:#D9C9A6}
.script{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.55;background:var(--cream);border-left:3px solid var(--amber);padding:10px 12px;border-radius:0 8px 8px 0}
.file{display:flex;flex-direction:column;gap:6px}
.file input{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
audio{width:100%;height:40px}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--paper-edge)}
.dots i.on{background:var(--ink-teal);box-shadow:none}
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:420px){.options{grid-template-columns:1fr}}
.opt{appearance:none;border:0;border-radius:14px;background:var(--ink);color:var(--paper);padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;min-height:112px;font-family:var(--display);font-size:13.5px;line-height:1.25;text-align:center}
@media (max-width:420px){.opt{flex-direction:row;min-height:64px;justify-content:flex-start;text-align:left}}
.opt svg{width:52px;height:52px;flex:none}
.opt:hover{background:#4A3726}
.opt.right{background:#1C6B5D}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:380px){.choices{grid-template-columns:1fr}}
.choice{appearance:none;text-align:left;border:0;border-radius:14px;padding:14px;cursor:pointer;background:var(--choice-bg);color:var(--choice-fg);display:flex;flex-direction:column;gap:6px;min-height:92px;box-shadow:var(--choice-ring)}
.choice b{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.25}
.choice span{font-size:14px;color:var(--choice-sub);line-height:1.35}
.choice:hover{background:var(--choice-hover)}
.story p+p{margin-top:10px}
.cursor::after{content:"▍";color:var(--ink-teal);animation:blink 1s infinite;margin-left:2px}
.next{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:12.5px;background:var(--cream);border:1px dashed var(--paper-edge);border-radius:999px;padding:6px 11px;color:var(--ink)}
.feedback{font-family:var(--mono);font-size:13px;color:var(--ink-soft);min-height:1.4em;line-height:1.45}
.good{color:var(--ink-teal);font-weight:600}
.team{display:flex;gap:6px;flex-wrap:wrap}
.team i{width:34px;height:34px;border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--paper-edge);display:grid;place-items:center}
.team i.on{background:var(--team-on-bg);box-shadow:inset 0 0 0 2px var(--team-on-ring)}
.team i svg{width:var(--team-icon);height:var(--team-icon)}
.polaroid{background:#FBF7EE;padding:10px 10px 14px;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.45);transform:rotate(-1.2deg);display:flex;flex-direction:column;gap:10px}
.polaroid .ph{aspect-ratio:3/2;border-radius:3px;overflow:hidden;max-width:100%}
.polaroid .ph svg{display:block;width:100%;height:100%}
.polaroid .cap{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);text-align:center}
.polaroid .date{font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-align:center;letter-spacing:.06em}
.album{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.album .polaroid{transform:none;padding:6px 6px 10px}
.album .polaroid .cap{font-size:14px}
.note{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--muted)}
.note b{color:var(--text);font-weight:600}
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;background:var(--amber);clip-path:polygon(50% 0,61% 38%,100% 38%,68% 60%,79% 100%,50% 76%,21% 100%,32% 60%,0 38%,39% 38%);animation:fly .9s ease-out forwards}
@keyframes fly{from{transform:translate(0,0) scale(.6);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.3);opacity:0}}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.dragme{cursor:grab}
.dragme:active{cursor:grabbing}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* step "tap": big round buttons laid over the picture, for children who cannot read */
.tapstage{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.tapt{position:absolute;transform:translate(-50%,-50%);min-width:84px;min-height:84px;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.tapt svg{width:100%;height:100%;display:block;overflow:visible}
.tapt.bubble{aspect-ratio:auto;border-radius:999px;padding:0 28px;background:var(--amber);color:var(--ink);font-family:var(--display);font-weight:700;font-size:clamp(20px,3vw,30px);box-shadow:0 6px 0 rgba(0,0,0,.28)}
.tapt.bubble:active{transform:translate(-50%,-46%);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.tapt.done{pointer-events:none;animation:hop .7s ease-in forwards}
@keyframes hop{0%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-95%) scale(1.15)}100%{transform:translate(-50%,-60%) scale(.3);opacity:0}}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick{appearance:none;border:0;border-radius:16px;background:var(--choice-bg);color:var(--choice-fg);min-height:120px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-family:var(--display);font-weight:500;font-size:clamp(16px,2.2vw,22px);-webkit-tap-highlight-color:transparent}
.pick svg{width:100%;max-width:150px;height:auto}
.pick:active{transform:translateY(2px)}
/* the father's page (?role=dad) */
.script-page #ttsBtn{display:none!important}
.scriptview{display:flex;flex-direction:column;gap:12px}
.say-line{margin:0;font-size:20px;line-height:1.5;font-style:italic}


/* steps "realworld" and "journal" */
.mats{margin:4px 0 8px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.mats li{font-size:16px;line-height:1.4}
.mats li span{color:var(--ink-soft)}
.caution{border-left:3px solid var(--danger);padding-left:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
button.chip{appearance:none;cursor:pointer;border-style:solid;font-size:14px}
button.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}