/* The look that every story page shares. A page adds only its own rules (its background, its props). */
:root { --ink:#2b2d42; --card:#ffffff; --accent:#ff7b54; --accent2:#4cc9f0; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; overflow:hidden; font-family:'Fredoka','Segoe UI',system-ui,sans-serif; color:var(--ink); -webkit-text-size-adjust:100%; }
body { background: radial-gradient(ellipse at 50% 15%, #ffffff 0%, #e2f4ff 40%, #c6ecd0 100%); }
#app { position:absolute; inset:0; touch-action:none; }
#app canvas { display:block; }
/* the labels draw over the dark round the magnifier: a name or a button at the edge of the circle stays readable */
#labels { position:absolute; inset:0; pointer-events:none; z-index:6; }
.lbl { background:#fff; border:3px solid var(--accent); border-radius:999px; padding:4px 11px; font-size:clamp(13px, 2.1vw, 22px); font-weight:700; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.lbl span { display:inline-block; }
.lbl.blue { border-color:var(--accent2); }
.lbl.yellow { border-color:#f9c74f; }
.lbl.green { border-color:#8ac926; }
.lbl.brown { border-color:#8d5524; }
.lbl.pink { border-color:#f78fb3; }
.lbl.red { border-color:#d00000; }
.lbl.purple { border-color:#9d4edd; }
.lbl.big { font-size:clamp(18px,2.9vw,30px); }
.lbl.hand { border:0; background:none; box-shadow:none; font-size:clamp(38px,6vw,56px); padding:0; }
.lbl.hand span { animation:tapbob 0.8s ease-in-out infinite; }
@keyframes tapbob { 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-8px,-14px);} }
/* the magnifier circle sits on the stage band, not on the whole screen */
#lens { position:absolute; left:var(--sx,0px); top:var(--sy,0px); width:var(--sw,100%); height:var(--sh,100%); pointer-events:none; z-index:5; display:flex; align-items:center; justify-content:center; }
#lens[hidden] { display:none; }
#lens::before { content:''; width:var(--lens,60vmin); height:var(--lens,60vmin); border-radius:50%; border:calc(var(--lens,60vmin)*0.055) solid #2b2d42; box-shadow:0 0 0 200vmax rgba(20,60,120,.55), inset 0 0 50px rgba(255,255,255,.4); }
#lensHandle { position:absolute; width:calc(var(--lens,60vmin)*0.21); height:calc(var(--lens,60vmin)*0.072); background:#2b2d42; border-radius:99px; left:calc(50% + var(--lens,60vmin)*0.385); top:calc(50% + var(--lens,60vmin)*0.41); transform:rotate(45deg); }
/* The screen is a column: a top bar, the caption, the free stage band, the buttons, the dots.
   The 3D picture is framed inside the stage band (see fitView), so the UI never covers the faces. */
#ui { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; padding:10px 10px 6px; gap:8px; pointer-events:none; }
#bar { flex:0 0 auto; width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; flex-wrap:wrap; }
#caption { flex:0 0 auto; width:min(94vw, 820px); background:var(--card); border-radius:22px; padding:10px 16px; font-size:clamp(16px, 4.1vw, 30px); font-weight:500; line-height:1.28; text-align:center; box-shadow:0 8px 30px rgba(20,60,120,.18); border:4px solid #fff; }
#stage { flex:1 1 auto; width:100%; min-height:70px; position:relative; }
#actions { flex:0 0 auto; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:100%; }
button.big { pointer-events:auto; white-space:nowrap; font-family:inherit; font-size:clamp(17px, 3.3vw, 32px); font-weight:700; padding:clamp(9px,1.5vw,16px) clamp(18px,3.2vw,34px); border:0; border-radius:999px; background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(255,123,84,.45); cursor:pointer; transition:transform .15s; animation:bob 1.6s ease-in-out infinite; }
button.big:hover { transform:scale(1.06); }
button.big:disabled { opacity:.45; animation:none; cursor:default; }
button.big.blue { background:var(--accent2); box-shadow:0 10px 24px rgba(76,201,240,.45); }
@keyframes bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
#topbar { display:flex; gap:8px; align-items:center; }
#topbar button { pointer-events:auto; font-size:clamp(17px,2.1vw,24px); width:clamp(40px,5.1vw,52px); height:clamp(40px,5.1vw,52px); border-radius:50%; border:0; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15); cursor:pointer; }
#topbar button.on { background:#ffe066; }
#langs { display:flex; gap:5px; margin-right:4px; }
#langs button { width:auto; height:clamp(40px,5.1vw,52px); padding:0 clamp(9px,1.2vw,14px); border-radius:26px; font-family:inherit; font-weight:700; font-size:clamp(14px,1.6vw,18px); color:var(--ink); }
#langs button.on { background:var(--accent); color:#fff; }
/* A story button lives in the picture, next to the thing it does. The wrapper carries the
   position from the 3D layer; the button inside keeps its own bob animation. */
.btn3d { pointer-events:none; }
.btn3d button.big { font-size:clamp(15px, 2.7vw, 26px); padding:clamp(8px,1.2vw,13px) clamp(16px,2.4vw,26px); }
/* an .edge button starts at its anchor instead of being centred on it, so it never reaches back over the child */
.btn3d.edge button.big { position:relative; left:50%; }
/* nothing happens for a while: a hand points at the button before the story presses it */
.btn3d .hand { position:absolute; left:calc(100% - 8px); top:50%; font-size:clamp(30px,4.6vw,46px); line-height:1; pointer-events:none; animation:tapbob 0.8s ease-in-out infinite; }
#actions { display:none; }
#dots { flex:0 0 auto; display:flex; gap:6px; }
#dots i { width:8px; height:8px; border-radius:50%; background:rgba(43,45,66,.2); display:block; }
#dots i.done { background:var(--accent); }
#dots i.now { background:var(--accent); transform:scale(1.4); }
#hint { position:absolute; left:12px; bottom:10px; font-size:13px; opacity:.55; display:none; }
/* A beacon marks a thing to press (the soap pump, the tap): two rings pulse round it, a hand points
   at it and a short word says what to do. A three-year-old does not guess that a pump is a button. */
.beacon { position:relative; width:0; height:0; pointer-events:none; }
.beacon .ring { position:absolute; left:-40px; top:-40px; width:80px; height:80px; border-radius:50%; border:6px solid #ffd60a; box-shadow:0 0 14px rgba(255,214,10,.9); animation:ringpulse 1.3s ease-out infinite; }
.beacon .r2 { animation-delay:.65s; }
@keyframes ringpulse { 0% { transform:scale(.35); opacity:1; } 100% { transform:scale(1.35); opacity:0; } }
.beacon .tip { position:absolute; left:0; bottom:26px; transform:translateX(-50%); font-size:clamp(34px,5vw,50px); line-height:1; animation:tipdown .7s ease-in-out infinite alternate; }
@keyframes tipdown { from { margin-bottom:14px; } to { margin-bottom:0; } }
.beacon .say { position:absolute; left:0; bottom:calc(32px + clamp(34px,5vw,50px)); transform:translateX(-50%); white-space:nowrap; background:#fff; border:3px solid #ffd60a; border-radius:999px; padding:3px 12px; font-weight:700; font-size:clamp(15px,2.3vw,24px); box-shadow:0 4px 12px rgba(0,0,0,.15); }
/* .below: the hand and the word hang under the thing (the tap is at the top of the picture) */
.beacon.below .tip { bottom:auto; top:26px; animation-name:tipup; }
@keyframes tipup { from { margin-top:14px; } to { margin-top:0; } }
.beacon.below .say { bottom:auto; top:calc(32px + clamp(34px,5vw,50px)); }
/* small screens: the story buttons become icons in the top bar, next to the sound buttons */
#nav { display:flex; flex-direction:row; gap:8px; align-items:flex-start; }
#nav .item { pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 8px; border-radius:16px; border:3px solid #fff; background:#fff; color:var(--ink); text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.15); transition:transform .15s; }
#nav .item.now { border-color:var(--accent); background:#fff4ef; }
#nav .emoji { font-size:clamp(22px,3vw,30px); line-height:1; }
#nav b { display:none; }
/* the story icons plus the sound buttons must stay on one line on a phone: the icons scroll sideways
   (the current one is scrolled into view), the sound and language buttons never move */
@media (max-width:560px) {
  #bar { gap:4px; flex-wrap:nowrap; }
  #nav { flex:0 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; padding:2px 2px 6px; margin:-2px 0 -6px; }
  #nav::-webkit-scrollbar { display:none; }
  #nav .item { flex:0 0 auto; }
  #topbar { flex:0 0 auto; }
  #nav { gap:5px; }
  #nav .item { padding:4px 4px; border-width:2px; }
  #nav .emoji { font-size:20px; }
  #topbar { gap:5px; }
  #topbar button { width:36px; height:36px; font-size:16px; }
  #langs { gap:4px; margin-right:2px; }
  #langs button { height:36px; padding:0 6px; font-size:13px; }
}
/* the smallest phones: smaller icons, so more of them show */
@media (max-width:400px) {
  #bar { gap:2px; }
  #nav { gap:3px; }
  #nav .item { padding:3px 2px; }
  #nav .emoji { font-size:17px; }
  #topbar { gap:3px; }
  #topbar button { width:32px; height:32px; font-size:15px; }
  #langs { gap:3px; margin-right:0; }
  #langs button { height:32px; padding:0 4px; font-size:12px; }
}
/* big screens: the story buttons go back to the left edge, with their names */
@media (min-width:1000px) and (min-height:620px) {
  #ui { padding:16px 16px 8px; gap:12px; }
  #bar { justify-content:flex-end; }
  #caption { padding:16px 24px; border-radius:28px; }
  #actions { gap:16px; }
  #hint { display:block; font-size:15px; left:16px; bottom:16px; }
  /* seven cards must fit the height: they shrink on a short screen */
  #nav { position:absolute; left:16px; top:50%; transform:translateY(-50%); flex-direction:column; gap:clamp(6px,1.2vh,14px); }
  #nav .item { width:108px; padding:clamp(5px,0.9vh,10px) 6px clamp(4px,0.7vh,8px); border-radius:22px; border-width:4px; box-shadow:0 6px 16px rgba(0,0,0,.15); }
  #nav .item:hover { transform:scale(1.07); }
  #nav .emoji { font-size:clamp(24px,4.4vh,44px); }
  #nav b { display:block; font-size:clamp(11px,1.6vh,15px); text-align:center; line-height:1.15; }
}
/* a phone held sideways is very short: make the caption and the buttons flat */
@media (max-height:540px) {
  #ui { padding:6px 8px 4px; gap:6px; }
  #caption { width:min(86vw,760px); font-size:clamp(14px,2.3vw,20px); padding:7px 14px; border-radius:16px; border-width:3px; }
  button.big { font-size:clamp(15px,2.3vw,22px); padding:8px 18px; }
  #topbar button, #langs button { width:38px; height:38px; font-size:16px; }
  #langs button { width:auto; padding:0 9px; font-size:14px; }
  #nav .emoji { font-size:22px; }
}
/* the phone holds the voice back until the first tap: one big play sign asks for it */
#playGate { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.35); cursor:pointer; }
#playGate[hidden] { display:none; }
#playGate div { width:clamp(120px, 34vmin, 240px); aspect-ratio:1; border-radius:50%; background:#ff7a59; border:6px solid #fff; box-shadow:0 12px 40px rgba(20,60,120,.3); display:flex; align-items:center; justify-content:center; animation:gatePulse 1.2s ease-in-out infinite; }
#playGate svg { width:46%; margin-left:9%; }
@keyframes gatePulse { 50% { transform:scale(1.08); } }