/* Sumurai — the brand look from the logo boards: a two-colour wordmark
   (orange SUM, blue URAI) in Dela Gothic One with a hard navy drop, "sticker"
   controls with a navy outline and a navy step underneath, a red 算 seal and
   + / × shuriken. Grounds are light flat sky tints from the brand palette;
   body text stays Nunito, teacher marks Caveat. The notebook stays a clean
   squared page. */
:root {
  --sky-top: #BFE1FF;
  --sky-mid: #DCEFFF;
  --sky-low: #EDF7FF;
  --sky-pale: #F5FAFF;
  --blue: #4C8DF5;
  --blue-edge: #2F6BD1;
  --blue-soft: #E1EEFF;
  --peach: #FFB493;
  --peach-soft: #FFEDE4;
  --orange: #FF9900;
  --orange-edge: #D97B00;
  --orange-soft: #FFF1DC;
  --sun: #FFCC00;
  --sun-edge: #E0A800;
  --sun-soft: #FFF7D1;
  --green: #34C759;
  --green-edge: #1F9E45;
  --green-soft: #E3F7E7;
  --pink: #FF5C8A;
  --pink-edge: #E0386A;
  --pink-soft: #FFE6EE;
  --purple: #AF52DE;
  --purple-edge: #8A35B8;
  --purple-soft: #F4E8FB;
  --navy: #252A43;
  --navy-2: #5A5F6F;
  --navy-3: #7E8594;
  --navy-line: #D3DDF0;
  --white: #FFFFFF;
  --grid: #D3E5F8;
  --margin: #FF9FB5;
  --pen: #2F6BD1;       /* the child's blue ballpoint */
  --teacher: #FF3B30;   /* the teacher's red pen */
  --miss: #AF52DE;      /* a wrong digit */
  --fur: #AEB4D4;       /* the raccoon, also its stretchy arms */
  --band: #FF9900;
  --hanko: #E5383B;     /* the 算 seal */
  --mount: #C9D3F2;     /* the mountain behind the scene */
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Nunito', cursive;
  --display: 'Dela Gothic One', 'Nunito', system-ui, sans-serif;
  --ink: 0 5px 0 var(--navy);   /* the sticker step under controls */
  --r-xl: 32px;
  --r-lg: 26px;
  --r-md: 20px;
  --r-sm: 16px;
  --outline: 2px 0 0 var(--navy), -2px 0 0 var(--navy), 0 2px 0 var(--navy), 0 -2px 0 var(--navy), 2px 2px 0 var(--navy), -2px 2px 0 var(--navy), 2px -2px 0 var(--navy), -2px -2px 0 var(--navy);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--sky-pale);
  color: var(--navy);
  font: 700 16px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
svg { display: block; }

#app {
  position: relative;
  max-width: 440px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 34%, var(--sky-low) 68%, var(--sky-pale) 100%);
}
@media (min-width: 600px) and (min-height: 700px) {
  body { padding-block: 20px; background: radial-gradient(circle at 20% 20%, #E1F2FE, #F0FAFF 60%); }
  #app { height: calc(100% - 40px); max-height: 920px; border-radius: 40px; box-shadow: 0 0 0 8px #FFFFFF, 0 30px 60px -12px rgba(37, 42, 67, .3); }
}
/* inside Telegram or MAX the webview is the whole screen: no phone frame */
html.miniapp body { padding-block: 0; background: var(--sky-pale); }
html.miniapp #app { height: 100%; max-height: none; max-width: none; border-radius: 0; box-shadow: none; }
#app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
#fx-back { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#arms { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; overflow: visible; }
#arms .arm-o { fill: none; stroke: var(--navy); stroke-width: 12; stroke-linecap: round; }
#arms .arm-f { fill: none; stroke: var(--fur); stroke-width: 6.5; stroke-linecap: round; }
#arms .paw circle { fill: var(--fur); stroke: var(--navy); stroke-width: 3; }
#arms .tile rect { fill: #FFFFFF; stroke: var(--navy); stroke-width: 3; }
#arms .tile text { font: 900 22px var(--font); fill: var(--navy); text-anchor: middle; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* sky: drifting clouds by day, stars at night */
.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cloud { position: absolute; display: block; width: 92px; height: 30px; border-radius: 30px; background: rgba(255, 255, 255, .92); animation: drift 38s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 44px; height: 44px; left: 14px; top: -22px; }
.cloud::after { width: 34px; height: 34px; left: 46px; top: -14px; }
.cl1 { top: 9%; left: -20%; }
.cl2 { top: 22%; left: -40%; transform: scale(.7); animation-duration: 52s; animation-delay: -20s; }
.cl3 { top: 4%; left: -30%; transform: scale(.55); animation-duration: 64s; animation-delay: -40s; opacity: .8; }
.cl4 { top: 44%; left: -30%; transform: scale(.8); animation-duration: 46s; animation-delay: -8s; opacity: .7; }
@keyframes drift { from { translate: 0 0; } to { translate: 620px 0; } }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 12px 22px;
  font: 900 20px/1.1 var(--font); color: var(--white);
  background: var(--orange); border-radius: 22px;
  border: 3px solid var(--navy);
  box-shadow: var(--ink);
  text-shadow: 0 2px 0 rgba(37, 42, 67, .28);
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--navy); }
.btn small { font: 800 13px/1.2 var(--font); opacity: .92; text-shadow: none; }
.btn-xl { width: 100%; min-height: 72px; font: 400 28px/1.05 var(--display); letter-spacing: .02em; text-shadow: 0 3px 0 var(--navy); }
.btn-xl small { font: 800 13px/1.2 var(--font); letter-spacing: 0; }
.btn-white { background: var(--white); color: var(--navy); text-shadow: none; }
/* A quiet button for what a parent rarely wants (the cancel of the auto-renewal, its «Да»): grey */
.btn-grey { background: #EEF1F6; color: var(--navy-3); border-color: var(--navy-line); text-shadow: none; box-shadow: 0 4px 0 var(--navy-line); }
.btn-grey:active { box-shadow: 0 1px 0 var(--navy-line); }
.btn-blue { background: var(--blue); }
.btn-purple { background: var(--purple); }
.btn-sm { min-height: 42px; padding: 6px 16px; font-size: 16px; border-radius: 16px; border-width: 2.5px; box-shadow: 0 3px 0 var(--navy); }
.btn-sm:active { box-shadow: 0 1px 0 var(--navy); }
.icon-btn {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--navy); border: 2.5px solid var(--navy); box-shadow: 0 3px 0 var(--navy);
}
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- title */
/* The whole title fits a phone without scrolling: the scene takes the height the logo and the
   menu leave it, and short screens drop the bubble and tighten the rest. */
#screen-title { overflow-y: auto; }
.title-wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); height: 100%; }
.logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.logo-chip { padding: 4px 14px; border-radius: 999px; background: var(--white); color: var(--navy-2); font: 900 12px/20px var(--font); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 0 2px var(--navy-line); }
@media (max-width: 359px) { .logo-chip { padding: 4px 10px; font-size: 11px; letter-spacing: 0; } }
.logo { margin: 10px 0 0; display: flex; align-items: baseline; justify-content: center; font: 400 clamp(38px, 12vw, 54px)/1 var(--display); letter-spacing: .01em; text-shadow: 0 6px 0 var(--navy); }
.logo .l1 { color: var(--orange); }
.logo .l2 { color: var(--blue); }
.motto { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; font: 800 17px/1.2 var(--font); color: #495071; }
.motto .kana { font: 400 13px/1 var(--display); letter-spacing: .3em; color: var(--orange); }
.seal { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--hanko); color: var(--white); box-shadow: inset 0 0 0 2px var(--hanko), inset 0 0 0 3.5px var(--white); font: 400 17px/1 var(--display); transform: rotate(-6deg); }
.seal-corner { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 12px; font-size: 24px; transform: rotate(8deg); box-shadow: inset 0 0 0 3px var(--hanko), inset 0 0 0 5px var(--white); }
.bubble { position: relative; margin: 6px 0 0; max-width: 300px; padding: 10px 16px; border-radius: 22px; background: var(--white); color: var(--navy); font: 800 15px/1.35 var(--font); text-align: center; box-shadow: 0 4px 0 rgba(37, 42, 67, .1); }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 20px; height: 20px; margin-left: -10px; background: var(--white); transform: rotate(45deg); border-radius: 4px; }
.scene.title-scene { height: auto; flex: 1 1 180px; min-height: 104px; max-height: 210px; width: calc(100% + 36px); margin: -4px -18px 0; }
.scene.title-scene .critter { opacity: 1; transform: none; }
.title-card { width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 16px; border-radius: var(--r-xl); background: var(--white); box-shadow: 0 0 0 3px var(--navy), 0 8px 0 3px var(--navy); margin-top: -6px; position: relative; z-index: 3; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* One column when fewer than two of its buttons show. */
.row2:not(:has(> :not([hidden]) ~ :not([hidden]))) { grid-template-columns: 1fr; }
/* The site's language: a button with the phone's own list laid over it, invisible but tappable. */
.title-lang { position: relative; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.title-lang svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.title-lang select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
@media (max-height: 700px) {
  .title-wrap { gap: 8px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .logo { margin-top: 6px; font-size: clamp(36px, 11vw, 48px); }
  .motto { margin-top: 6px; }
  .bubble { margin-top: 2px; padding: 8px 14px; font-size: 14px; }
  .title-card { gap: 12px; padding: 14px 14px 14px; }
  .title-card .btn-xl { min-height: 64px; }
}
@media (max-height: 620px) {
  .bubble, .logo-chip { display: none; }
  .logo { margin-top: 0; }
}

/* The tiles at the top of «Мои результаты»: the games played, the record, the prizes; each opens
   its screen. */

/* ---------------------------------------------------------------- scene */
.scene { position: relative; flex: 0 0 auto; height: clamp(86px, 14vh, 124px); overflow: hidden; }
.scene .rays {
  position: absolute; left: 50%; top: 100%; width: 900px; height: 900px; margin: -450px 0 0 -450px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .55) 0 9deg, rgba(255, 255, 255, 0) 9deg 18deg);
  opacity: 0; transition: opacity .8s; animation: spin 24s linear infinite;
}
.scene .spot { position: absolute; top: -20px; width: 120px; height: 180%; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity .6s; }
.scene .spot-l { left: 6%; transform-origin: 50% 0; animation: sway 3.2s ease-in-out infinite; }
.scene .spot-r { right: 6%; transform-origin: 50% 0; animation: sway 3.2s ease-in-out infinite reverse; }
.scene .bunting { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 30px; opacity: 0; transform: translateY(-26px); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
.scene::before, .scene::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: min(78%, 320px); height: 74%; translate: -50% 0; pointer-events: none; transition: background .6s; }
.scene::before { background: var(--mount); clip-path: polygon(0 100%, 38% 6%, 62% 6%, 100% 100%); }
.scene::after { background: #FFFFFF; clip-path: polygon(32.6% 18%, 38% 6%, 62% 6%, 67.4% 18%, 62% 27%, 56% 20%, 50% 29%, 44% 20%, 38% 27%); }
.scene-preview::before, .scene-preview::after { width: 62%; }
.scene .ground { position: absolute; left: -12%; right: -12%; bottom: -26px; height: 44px; border-radius: 50%; background: #7ED98F; box-shadow: inset 0 6px 0 #A5E8B0; transition: background .6s, box-shadow .6s; }
.mascot { position: absolute; left: 50%; bottom: 2px; width: 104px; height: 100px; margin-left: -52px; transform-origin: 50% 100%; z-index: 3; }
.scene .mascot { height: 92%; width: auto; aspect-ratio: 124 / 120; margin-left: 0; translate: -50% 0; }
.mascot .raccoon { width: 100%; height: 100%; overflow: visible; animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.critter { position: absolute; bottom: 2px; height: 62%; aspect-ratio: 68 / 92; z-index: 2; opacity: 0; transform: translateY(70%) scale(.6); transition: transform .55s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; }
.critter .critter-svg { width: 100%; height: 100%; overflow: visible; animation: bob 1.8s ease-in-out infinite; }
.critter.c1 { left: 22%; } .critter.c2 { right: 22%; } .critter.c3 { left: 4%; height: 54%; } .critter.c4 { right: 4%; height: 56%; }
.critter.c2 .critter-svg { animation-delay: -.6s; } .critter.c3 .critter-svg { animation-delay: -1.1s; } .critter.c4 .critter-svg { animation-delay: -.3s; }
.scene.s2 .bunting { opacity: 1; transform: none; }
.scene.s3 .c1, .scene.s3 .c2 { opacity: 1; transform: none; }
.scene.s4 .c3 { opacity: 1; transform: none; }
.scene.s5 .c4 { opacity: 1; transform: none; }
.scene.s4 .rays { opacity: .7; }
.scene.s4 .ground { background: #9BD86F; box-shadow: inset 0 6px 0 #C2EA94; }
.scene.s5 .rays { opacity: 1; animation-duration: 12s; }
.scene.s5 .spot { opacity: .8; }
.scene.fever .rays { background: repeating-conic-gradient(from 0deg, rgba(76, 141, 245, .5) 0 9deg, rgba(175, 82, 222, 0) 9deg 18deg); animation-duration: 7s; opacity: 1; }
.scene.fever .ground { background: #3A4166; box-shadow: inset 0 6px 0 #4C5480; }
.scene.fever::before { background: #4C5480; }
.scene.fever::after { background: #C9D3F2; }

/* character moves */
.mascot.hop, .critter.hop { animation: hop .45s cubic-bezier(.3, .7, .4, 1); }
.mascot.spin .raccoon { animation: spin1 .6s ease-in-out; }
.mascot.oops { animation: oops .6s ease-out; }
.mascot.cheer .rc-arm, .critter.cheer .cr-arm { transform: rotate(var(--up, 150deg)); }
.mascot.party .rc-arm { animation: wave .5s ease-in-out infinite alternate; }
.mascot.party .rc-arm.r { animation-delay: -.25s; }
.rc-arm, .cr-arm { transform-box: fill-box; transform-origin: 50% 8%; transition: transform .18s, opacity .08s; }
.rc-arm.r, .cr-arm.r { --up: -150deg; }
.mascot.reach-l .rc-arm.l, .mascot.reach-r .rc-arm.r { opacity: 0; }
.rc-tail { transform-box: fill-box; transform-origin: 0% 85%; animation: wag 1.3s ease-in-out infinite; }
.rc-band-tails { transform-box: fill-box; transform-origin: 0% 30%; animation: flutter .9s ease-in-out infinite; }
.raccoon .e-happy, .raccoon .e-x, .raccoon .m-grin, .raccoon .m-o { display: none; }
[data-face="happy"] .raccoon .e-open, [data-face="happy"] .raccoon .m-smile { display: none; }
[data-face="happy"] .raccoon .e-happy, [data-face="happy"] .raccoon .m-grin { display: inline; }
[data-face="oops"] .raccoon .e-open, [data-face="oops"] .raccoon .m-smile { display: none; }
[data-face="oops"] .raccoon .e-x, [data-face="oops"] .raccoon .m-o { display: inline; }
@keyframes bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2px) scale(1.01, .99); } }
@keyframes hop { 0% { transform: none; } 15% { transform: scale(1.08, .9); } 50% { transform: translateY(-30%) scale(.95, 1.06); } 85% { transform: scale(1.06, .94); } 100% { transform: none; } }
@keyframes spin1 { to { transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes oops { 0% { transform: none; } 20% { transform: translateX(-6px) rotate(-12deg) scale(1.05, .92); } 50% { transform: translateX(6px) rotate(8deg); } 80% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes wag { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes flutter { 0%, 100% { transform: rotate(-4deg) scaleX(1); } 50% { transform: rotate(6deg) scaleX(.92); } }
@keyframes sway { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes wave { from { transform: rotate(var(--up, 150deg)); } to { transform: rotate(calc(var(--up, 150deg) * .75)); } }

/* ---------------------------------------------------------------- play HUD */
.hud { display: flex; align-items: center; gap: 8px; padding: 10px 10px 0; position: relative; z-index: 2; }
/* The pips give way on a narrow screen (Telegram Desktop is about 400px wide), so the sound
   button at the end of the row stays on screen. */
.pips { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 2px; padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .55); }
.pip { width: 22px; height: 22px; flex: 0 1 22px; min-width: 0; }
.pip svg { width: 100%; height: 100%; overflow: visible; }
.pip path { fill: #FFFFFF; fill-rule: evenodd; stroke: #AFC2E0; stroke-width: 1.8; stroke-linejoin: round; transition: fill .3s, stroke .3s; }
.pip.now path { stroke: var(--navy); stroke-width: 2.2; fill: var(--blue-soft); }
.pip.now svg { animation: pulse 1s ease-in-out infinite; }
.pip.done path { fill: var(--orange); stroke: var(--navy); }
.pip.miss path { fill: var(--peach); stroke: var(--navy); }
.pip.done svg, .pip.miss svg { animation: pop .4s ease-out; }
.clock { padding: 6px 10px; border-radius: 999px; background: var(--white); font: 900 14px/1 var(--font); color: var(--navy); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2.5px var(--navy), 0 3px 0 2.5px var(--navy); }
.ex-timer { flex: 1; position: relative; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85); overflow: hidden; display: grid; place-items: center; }
.ex-timer i { position: absolute; left: 3px; top: 3px; bottom: 3px; right: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--purple)); transform-origin: 0 50%; }
.ex-timer b { position: relative; font: 900 16px/1 var(--font); color: var(--white); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.ex-timer.low i { background: linear-gradient(90deg, var(--teacher), var(--pink)); }
.mute-btn .snd-off { display: none; }
.mute-btn[aria-pressed="true"] .snd-on { display: none; }
.mute-btn[aria-pressed="true"] .snd-off { display: inline; }

.hud2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 0; position: relative; z-index: 2; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 3px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 2.5px var(--navy), 0 3px 0 2.5px var(--navy); font: 900 17px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 30px; }
.pi svg { width: 18px; height: 18px; }
.pi-green { background: var(--green); } .pi-orange { background: var(--orange); } .pi-sun { background: var(--sun); } .pi-blue { background: var(--blue); } .pi-pink { background: var(--pink); } .pi-purple { background: var(--purple); }
.tally .ng { margin-left: 2px; padding: 2px 7px; border-radius: 999px; background: var(--purple-soft); color: var(--purple); font-size: 13px; }
.tally .ng::before { content: '✗ '; }
.combo { opacity: 0; transform: scale(.7); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.combo.on { opacity: 1; transform: none; }
.combo em { font: 900 12px/1 var(--font); font-style: normal; color: var(--orange-edge); }
.combo.max { background: var(--sun); }
.combo.max em { color: var(--navy); }
.combo-track { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--orange-soft); overflow: hidden; }
.combo-track i { display: block; height: 100%; width: 100%; background: var(--orange); transform-origin: 0 50%; }
.combo-track i.low { background: var(--teacher); }
.energy.pop b, .combo.pop b { display: inline-block; animation: pop .3s ease-out; }

/* ---------------------------------------------------------------- notebook card */
.card {
  position: relative; flex: 1 1 auto; min-height: 0;
  margin: 6px 12px 0; display: flex; flex-direction: column;
  background: var(--white); border-radius: 28px;
  box-shadow: 0 0 0 3px var(--navy), 0 7px 0 3px var(--navy);
  z-index: 4;
}
.rings { position: absolute; top: -11px; left: 26px; right: 26px; display: flex; justify-content: space-between; z-index: 5; pointer-events: none; }
.rings i { display: block; width: 9px; height: 24px; border-radius: 6px; background: linear-gradient(90deg, #8D97B5, #E3E8F4 45%, #A2ABC6); box-shadow: 0 0 0 2px var(--navy); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 18px 14px 6px; }
.chip { display: inline-block; margin: 0; padding: 4px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-edge); font: 400 13px/22px var(--display); letter-spacing: .02em; }
.chip.op-add { background: var(--green-soft); color: var(--green-edge); }
.chip.op-sub { background: var(--pink-soft); color: var(--pink-edge); }
.chip.op-mul { background: var(--orange-soft); color: var(--orange-edge); }
.chip.op-div { background: var(--purple-soft); color: var(--purple-edge); }
.qno { padding: 4px 12px; border-radius: 999px; background: var(--sky-pale); font: 900 14px/22px var(--font); color: var(--navy-2); font-variant-numeric: tabular-nums; }
.sheet {
  --cell: 36px;
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; margin: 0 3px;
  background-color: var(--white);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
}
.sheet .margin-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--margin); }
.blk { position: absolute; }
.it, .cell { position: absolute; width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center; font: 800 calc(var(--cell) * .66)/1 var(--font); color: var(--navy); font-variant-numeric: tabular-nums; }
.it.op { font-weight: 800; }
.it.note { font-size: calc(var(--cell) * .5); font-weight: 700; color: var(--navy-2); }
/* A picture before a word in preschool reading (js/letters.js): two cells wide. */
.it.pic { font: 400 calc(var(--cell) * 1.5)/1 var(--font); }
/* A thing to count in «Окошки» (js/windows.js, preschool): one cell each, in rows of five. */
.it.obj { font: 400 calc(var(--cell) * .9)/1 var(--font); }
.it.carry { align-items: flex-end; padding-bottom: 1px; font: 900 calc(var(--cell) * .42)/1 var(--font); color: var(--pen); }
.it.dot::before { content: ''; position: absolute; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--pen); }
/* English written methods (js/problems.js notation): carries under the answer, a digit crossed out
   when it gives a ten away, a small 1 by the digit that takes it, a remainder before the next digit. */
.it.carry-under { align-items: flex-start; padding-top: 2px; font: 900 calc(var(--cell) * .42)/1 var(--font); color: var(--pen); }
.it.strike::after { content: ''; position: absolute; left: 22%; right: 22%; top: calc(50% - 1px); height: 2.5px; border-radius: 2px; background: var(--pen); transform: rotate(-58deg); }
.it.lend { align-items: flex-start; justify-content: flex-start; padding: 1px 0 0 1px; font: 900 calc(var(--cell) * .34)/1 var(--font); color: var(--pen); }
.it.line { height: 0; width: auto; border-top: 2.5px solid var(--navy); border-radius: 2px; }
.it.vline { width: 0; border-left: 2.5px solid var(--navy); }
.it.auto { color: var(--pen); }
.it.line.auto, .it.vline.auto { color: inherit; }
.it.in { animation: fadeIn .3s ease-out both; }
.cell { font: 900 calc(var(--cell) * .74)/1 var(--font); color: var(--pen); border-radius: 10px; }
.cell.pending { box-shadow: inset 0 0 0 2px #C9D9EE; }
.cell.active { background: var(--sun-soft); box-shadow: inset 0 0 0 3px var(--sun); animation: breathe 1.2s ease-in-out infinite; }
.cell.done { animation: land .26s ease-out both; }
.cell.wrong { color: var(--miss); background: var(--purple-soft); box-shadow: none; outline: 2.5px dashed var(--miss); outline-offset: -3px; animation: shake .32s; }
.cell.incoming { color: transparent !important; animation: none !important; }
.cell.ghost::after { content: attr(data-ghost); position: absolute; color: rgba(47, 107, 209, .3); }
.step-label { margin: 0; min-height: 46px; padding: 6px 14px 12px; display: flex; align-items: center; justify-content: center; text-align: center; font: 800 15px/19px var(--font); color: var(--navy-2); text-wrap: balance; }
.step-label.hint { color: var(--purple-edge); }
.step-label.oops { color: var(--purple-edge); }
.step-label.yay { color: var(--green-edge); font-weight: 900; font-size: 17px; }

.mark { position: absolute; pointer-events: none; color: var(--teacher); z-index: 3; }
.mark svg { overflow: visible; }
.mark path { fill: none; stroke: var(--teacher); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw .4s ease-out forwards; }
.mark .word { position: absolute; white-space: nowrap; font: 700 calc(var(--cell) * .95)/1 var(--hand); transform: rotate(-8deg); animation: stamp .35s .15s cubic-bezier(.3, 1.6, .5, 1) both; }
.mark .five { position: absolute; font: 700 calc(var(--cell) * 2.5)/1 var(--hand); transform: rotate(-6deg); animation: stamp .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.mark.rainbow .five { background: linear-gradient(120deg, #FF3B30, #FF9900, #FFCC00, #34C759, #4C8DF5, #AF52DE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reach { position: absolute; right: 14px; bottom: 50px; padding: 4px 12px; border-radius: 999px; background: var(--pink); color: var(--white); font: 900 13px/18px var(--font); opacity: 0; transform: scale(.6); pointer-events: none; box-shadow: 0 0 0 2.5px var(--navy), 0 3px 0 2.5px var(--navy); }
.reach.on { animation: reach .8s ease-in-out infinite; }

.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 4; }
.pad button {
  height: clamp(44px, 7.2vh, 58px); border-radius: 18px;
  background: var(--white); border: 2.5px solid var(--navy); box-shadow: 0 4px 0 var(--navy);
  font: 900 28px/1 var(--font); color: var(--navy);
  display: grid; place-items: center;
  transition: transform .07s, box-shadow .07s, background .15s;
  touch-action: manipulation;
}
.pad button.press { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); background: var(--orange-soft); }
.pad button.grab { animation: grab .24s ease-out; }
.pad .zero { grid-column: span 2; }
.pad .del { background: var(--peach-soft); }
.pad .del svg { width: 28px; height: 28px; fill: none; stroke: var(--orange-edge); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-tag { position: absolute; left: 50%; bottom: calc(4px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 6; padding: 3px 12px; border-radius: 999px; background: var(--navy); color: var(--white); font: 800 11px/16px var(--font); white-space: nowrap; pointer-events: none; }

/* stage backgrounds: day → golden hour → candy → night (extra) */
#app[data-stage="4"] { background: linear-gradient(180deg, #FFBE85 0%, #FFDDB0 40%, #FFF3E2 100%); }
#app[data-stage="5"] { background: linear-gradient(180deg, #B7A3FF 0%, #FFAFD0 48%, #FFE9DD 100%); }
#app[data-stage="6"] { background: linear-gradient(180deg, #141833 0%, #252A43 55%, #393E5B 100%); }
#app[data-stage="6"] .sky { background-image: radial-gradient(circle at 20% 30%, #FFF 0 1.2px, transparent 2px), radial-gradient(circle at 70% 12%, #FFF 0 1px, transparent 2px), radial-gradient(circle at 85% 60%, #FFE58A 0 1.4px, transparent 2.2px), radial-gradient(circle at 40% 80%, #FFF 0 1px, transparent 2px); background-size: 110px 110px, 160px 160px, 140px 140px, 180px 180px; }
#app[data-stage="6"] .cloud { opacity: 0; }
#app[data-stage="6"] .pad button { border-color: #0E1124; box-shadow: 0 4px 0 #0E1124; }
#app[data-stage="6"] .pad button.press { box-shadow: 0 1px 0 #0E1124; }
#app[data-stage="6"] .card { box-shadow: 0 0 0 3px #0E1124, 0 7px 0 3px #0E1124; }
#app[data-stage="6"] .pips { background: rgba(255, 255, 255, .15); }

/* marquee bulbs around the notebook at the top stages */
.card::after {
  content: ''; position: absolute; inset: -5px; border-radius: 33px; pointer-events: none; opacity: 0; transition: opacity .5s;
  padding: 5px;
  background: repeating-linear-gradient(90deg, var(--sun) 0 9px, var(--pink) 9px 18px, var(--blue) 18px 27px, transparent 27px 34px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bulbs .5s linear infinite;
}
#app[data-stage="5"] .card::after, #app[data-stage="6"] .card::after { opacity: 1; }

/* ---------------------------------------------------------------- overlays */
.cutins { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.cutin {
  position: absolute; left: 5%; right: 5%; top: 40%;
  height: 62px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--orange); color: var(--white);
  box-shadow: 0 0 0 4px var(--navy), 0 9px 0 var(--navy);
  font: 400 30px/1 var(--display); letter-spacing: .02em; text-shadow: 0 4px 0 var(--navy);
  transform: rotate(-4deg) translateX(-130%);
  animation: cut .9s cubic-bezier(.2, .8, .2, 1) forwards;
}
.cutin.big { height: 80px; font-size: 36px; }
.cutin.blue { background: var(--blue); }
.cutin.back { top: calc(40% + 10px); background: var(--pink); transform: rotate(3deg) translateX(130%); animation-name: cutback; height: 62px; }
.slam { position: absolute; left: 50%; top: 34%; translate: -50% -50%; white-space: nowrap; font: 400 56px/1 var(--display); color: var(--orange); text-shadow: 3px 0 0 var(--navy), -3px 0 0 var(--navy), 0 3px 0 var(--navy), 0 -3px 0 var(--navy), 3px 3px 0 var(--navy), -3px 3px 0 var(--navy), 3px -3px 0 var(--navy), -3px -3px 0 var(--navy), 0 7px 0 var(--navy); }
.slam.small { font-size: 34px; text-shadow: var(--outline), 0 4px 0 var(--navy); }
.parader { position: absolute; left: 0; bottom: 4px; height: 50%; aspect-ratio: 68 / 92; z-index: 2; }
.parader .critter-svg { width: 100%; height: 100%; overflow: visible; animation: hop .38s ease-in-out infinite; }

.finale { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; animation: fadeIn .3s both; background: #FFC21A; }
.finale::before { content: ''; position: absolute; left: 50%; top: 45%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; background: repeating-conic-gradient(from 0deg, #FFD54D 0 10deg, #FFB800 10deg 20deg); animation: spin 18s linear infinite; }
.finale > * { position: relative; }
.finale .giant { width: min(66%, 260px); aspect-ratio: 124 / 120; animation: rise .7s cubic-bezier(.3, 1.4, .5, 1) both; }
.finale .giant .raccoon { width: 100%; height: 100%; overflow: visible; }
.finale .big-score { margin: 0; font: 400 60px/1 var(--display); color: var(--white); text-shadow: 3px 0 0 var(--navy), -3px 0 0 var(--navy), 0 3px 0 var(--navy), 0 -3px 0 var(--navy), 3px 3px 0 var(--navy), -3px 3px 0 var(--navy), 3px -3px 0 var(--navy), -3px -3px 0 var(--navy), 0 8px 0 var(--navy); animation: stamp .5s .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.finale .big-score small { font-size: 30px; }
.finale .grade-big { display: flex; align-items: center; gap: 10px; padding: 6px 22px 10px; border-radius: 28px; background: var(--white); color: var(--teacher); box-shadow: 0 0 0 4px var(--navy), 0 8px 0 var(--navy); transform: rotate(-4deg); animation: stamp .5s .8s cubic-bezier(.3, 1.6, .5, 1) both; }
.finale .grade-big b { font: 700 86px/.9 var(--hand); }
.finale .grade-big span { font: 700 44px/1 var(--hand); }
.finale .rocket { position: absolute; bottom: -140px; left: 50%; width: 70px; height: 140px; margin-left: -35px; animation: launch 1.6s .3s cubic-bezier(.5, 0, .7, .4) forwards; }
.finale .parader { height: 13%; bottom: 3%; }

.modal { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(37, 42, 67, .5); }
.modal-card { width: min(100%, 340px); background: var(--white); border-radius: var(--r-xl); padding: 24px 20px 22px; text-align: center; box-shadow: 0 0 0 3px var(--navy), 0 9px 0 3px var(--navy); }
.modal-card h2 { margin: 0 0 8px; font: 400 23px/1.2 var(--display); }
.modal-card p { margin: 0 0 20px; color: var(--navy-2); font-size: 16px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-actions .btn { font-size: 17px; padding: 12px 10px; }

/* ---------------------------------------------------------------- results */
.result-scroll { flex: 1; overflow-y: auto; padding: 30px 14px 20px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }
.hero-card {
  position: relative; padding: 38px 16px 18px; border-radius: var(--r-xl); background: var(--white);
  box-shadow: 0 0 0 3px var(--navy), 0 8px 0 3px var(--navy);
  background-image: radial-gradient(circle at 12% 30%, var(--pink-soft) 0 7px, transparent 8px), radial-gradient(circle at 88% 70%, var(--sun-soft) 0 9px, transparent 10px), radial-gradient(circle at 80% 18%, var(--blue-soft) 0 6px, transparent 7px), radial-gradient(circle at 20% 85%, var(--green-soft) 0 8px, transparent 9px);
}
.ribbon { position: absolute; left: 50%; top: -22px; transform: translateX(-50%) rotate(-3deg); margin: 0; white-space: nowrap; }
.ribbon span { display: block; padding: 9px 22px 10px; border-radius: 16px; border: 3px solid var(--navy); background: var(--orange); color: var(--white); font: 400 20px/1.15 var(--display); letter-spacing: .02em; text-shadow: 0 3px 0 var(--navy); box-shadow: var(--ink); }
.ribbon-purple span { background: var(--blue); }
.hero-row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.hero-m { position: relative; left: auto; bottom: auto; margin: 0; width: 128px; height: 124px; flex: 0 0 auto; }
.score-star { position: relative; width: 156px; height: 156px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; }
.score-star::before { content: ''; position: absolute; inset: 0; background: var(--sun); clip-path: polygon(50% 0%, 61% 13%, 77% 7%, 80% 23%, 96% 27%, 89% 42%, 100% 55%, 87% 64%, 90% 81%, 73% 82%, 65% 97%, 50% 89%, 35% 97%, 27% 82%, 10% 81%, 13% 64%, 0% 55%, 11% 42%, 4% 27%, 20% 23%, 23% 7%, 39% 13%); animation: spin 30s linear infinite; }
.score-star::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 3px var(--navy); }
.score-star b { position: relative; z-index: 1; font: 400 42px/1 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.score-star span { position: relative; z-index: 1; font: 900 14px/1 var(--font); color: var(--orange-edge); }
.stamp { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 2px; color: var(--teacher); transform: rotate(-3deg); animation: stamp .5s .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.stamp b { font: 700 72px/.8 var(--hand); }
.stamp span { font: 700 40px/1 var(--hand); white-space: nowrap; }
.stamp svg { width: 46px; height: 40px; }
.stamp svg path { fill: none; stroke: var(--teacher); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.sum-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font: 900 15px/1 var(--font); color: var(--navy-2); }
.sum-line span { padding: 6px 12px; border-radius: 999px; background: var(--sky-pale); color: var(--navy); }
.sum-line span.x { background: var(--purple-soft); color: var(--purple-edge); }
.pts-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 10px; }
.pts-chips span { padding: 3px 9px; border-radius: 999px; background: var(--sun-soft); color: var(--orange-edge); font: 900 13px/18px var(--font); font-variant-numeric: tabular-nums; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 22px; min-width: 0; box-shadow: 0 5px 0 rgba(37, 42, 67, .07); }
.tile .ti { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 40px; color: var(--white); }
.tile .ti svg { width: 22px; height: 22px; }
.tile div { min-width: 0; }
.tile dt { font: 800 12px/1.2 var(--font); color: var(--navy-2); }
.tile dd { margin: 0; font: 900 22px/1.15 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile dd small { font: 800 12px/1 var(--font); color: var(--navy-3); }
.t-blue { background: var(--blue-soft); } .t-blue .ti { background: var(--blue); }
.t-green { background: var(--green-soft); } .t-green .ti { background: var(--green); }
.t-orange { background: var(--orange-soft); } .t-orange .ti { background: var(--orange); }
.t-purple { background: var(--purple-soft); } .t-purple .ti { background: var(--purple); }
.t-pink { background: var(--pink-soft); } .t-pink .ti { background: var(--pink); }

.unlock { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-lg); }
.unlock .ui { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; flex: 0 0 52px; }
.unlock .ui svg { width: 30px; height: 30px; }
.unlock b { display: block; font: 900 19px/1.2 var(--font); }
.unlock p { margin: 2px 0 0; font: 700 14px/1.35 var(--font); }
.unlock.open { background: var(--orange); color: var(--white); box-shadow: 0 0 0 3px var(--navy), 0 7px 0 3px var(--navy); }
.unlock.open b { font: 400 18px/1.2 var(--display); text-shadow: 0 2px 0 var(--navy); }
.unlock.open .ui { background: rgba(255, 255, 255, .25); }
.unlock.closed { background: var(--white); box-shadow: 0 0 0 2.5px var(--navy-line); }
.unlock.closed .ui { background: var(--sky-pale); }
.progress { margin-top: 8px; height: 14px; border-radius: 999px; background: var(--sky-low); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), #6EDB8A); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1); }

.box { padding: 16px; border-radius: var(--r-xl); background: var(--white); box-shadow: 0 0 0 2.5px var(--navy-line); display: flex; flex-direction: column; gap: 12px; }
.box-h { margin: 0; display: flex; align-items: center; gap: 8px; font: 400 18px/1.2 var(--display); }
.box-h svg { width: 26px; height: 26px; }
.box-note { margin: 0; font: 700 14px/1.35 var(--font); color: var(--navy-3); }
.kid-ava, .lang .kid-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--white); overflow: hidden; display: grid; place-items: center; }
.kid-ava > * { width: 46px; height: 46px; margin-top: 8px; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.hero-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border: 0; border-radius: 18px; background: var(--sky-pale); color: var(--navy); font: 800 14px/1.2 var(--font); cursor: pointer; }
.hero-pick .kid-ava { width: 64px; height: 64px; }
.hero-pick .kid-ava > * { width: 74px; height: 74px; margin-top: 12px; }
.hero-pick:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.board-list li { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 16px; background: var(--sky-pale); font: 800 15px/1.2 var(--font); }
.board-list li.me { background: var(--blue-soft); box-shadow: inset 0 0 0 3px var(--blue); }
.board-list .pl { flex: none; width: 28px; text-align: center; font: 400 18px/1 var(--display); color: var(--navy-3); }
.board-list .nk { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .pt { flex: none; font-variant-numeric: tabular-nums; }
.level-offer .row2 { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; }
.level-offer .btn { padding-inline: 8px; }
.level-offer.done { background: var(--blue-soft); box-shadow: inset 0 0 0 3px var(--blue); }
.box-note { margin: -6px 0 0; font: 700 13px/1.35 var(--font); color: var(--navy-3); }
/* Another device of the family: the code shown, and the field to type one */
.link-code { margin: 0; text-align: center; font: 400 40px/1.1 var(--display); letter-spacing: .12em; color: var(--navy); }
.link-code small { display: block; margin-top: 4px; font: 700 13px/1.35 var(--font); letter-spacing: 0; color: var(--navy-3); }
.link-join { display: flex; gap: 10px; }
.link-input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0 8px; border-radius: 22px; border: 3px solid var(--navy);
  background: var(--white); color: var(--navy); font: 900 22px/1 var(--font); letter-spacing: .04em; text-align: center;
}
.link-input:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
/* The paywall (js/paywall.js): the price, the email for the receipt, the two ticks */
.pay-price { margin: 0; font: 400 26px/1.15 var(--display); color: var(--navy); }
/* The ways to pay as tiles (the owner, 2026-10-19): the way's logo, its name, a line under it */
.pay-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-way {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  min-height: 150px; padding: 16px 10px 14px; border: 3px solid var(--navy); border-radius: 22px;
  background: var(--white); color: var(--navy); font: inherit; text-align: center; cursor: pointer;
  box-shadow: var(--ink); transition: transform .08s, box-shadow .08s;
}
.pay-way:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--navy); }
.pay-way-logo { display: grid; place-items: center; height: 56px; }
.pay-way-logo svg { display: block; height: 100%; width: auto; }
.pay-way b { font: 900 18px/1.2 var(--font); }
.pay-way small { font: 700 12px/1.3 var(--font); color: var(--navy-3); }
/* A tick is a div (a link may sit in its words; a button may not hold one) */
.lang.tick { cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.lang.tick:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.lang.tick a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.pay-input {
  width: 100%; min-height: 56px; padding: 0 16px; border-radius: 22px; border: 3px solid var(--navy);
  background: var(--white); color: var(--navy); font: 800 18px/1 var(--font);
}
.pay-input:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
.lang.tick span { font: 700 14px/1.35 var(--font); }
.lang.tick .dot { border-radius: 8px; }
#pay-go:disabled, #kid-done:disabled { filter: grayscale(1); opacity: .55; cursor: not-allowed; }
/* Waiting for the payment, and paid: one card in the middle of the sky */
.pay-state { justify-content: center; align-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.pay-card {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: 28px 20px 22px; border-radius: var(--r-xl); background: var(--white); box-shadow: 0 0 0 3px var(--navy), 0 6px 0 3px var(--navy);
}
.pay-card h2 { margin: 0; font: 400 28px/1.1 var(--display); color: var(--navy); text-wrap: balance; }
.pay-card .btn { width: 100%; }
.pay-card .btn-xl { font-size: 20px; padding-inline: 14px; }
.pay-state-text { margin: 0; font: 700 16px/1.45 var(--font); color: var(--navy-2); text-wrap: pretty; }
.pay-hero { position: relative; width: 132px; height: 132px; border-radius: 50%; background: var(--sky-low); display: grid; place-items: center; }
.pay-hero svg { width: 112px; height: 112px; }
.pay-hero .pay-badge {
  position: absolute; right: -2px; bottom: 4px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); border: 3px solid var(--navy); box-shadow: 0 3px 0 var(--navy);
}
.pay-hero .pay-badge svg { width: 24px; height: 24px; fill: none; stroke: var(--white); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.pay-hero.failed .pay-badge { background: var(--pink); }
.pay-dots { display: flex; gap: 8px; height: 14px; align-items: center; }
.pay-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); animation: pay-dot 1.2s ease-in-out infinite; }
.pay-dots i:nth-child(2) { animation-delay: .15s; } .pay-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pay-dot { 0%, 80%, 100% { transform: scale(.55); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pay-dots i { animation: none; opacity: .7; } }
.pay-hint { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--sun-soft); box-shadow: inset 0 0 0 2px var(--sun-edge); font: 700 14px/1.4 var(--font); color: var(--navy); text-align: left; }
/* SBP: a sheet from the bottom with the bank's QR (the SBP logo in its middle), copy the link, open it in the bank app */
.pay-sheet { position: absolute; inset: 0; z-index: 65; display: flex; align-items: flex-end; background: rgba(37, 42, 67, .5); animation: pay-fade .2s ease-out; }
.pay-sheet[hidden] { display: none; }
.pay-sheet-card {
  width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: var(--white);
  box-shadow: 0 -3px 0 var(--navy); animation: pay-rise .25s ease-out; touch-action: none;
}
.pay-sheet-card h2 { margin: 6px 0 0; font: 400 28px/1.1 var(--display); color: var(--navy); }
.pay-sheet-card .btn { width: 100%; }
.pay-sheet-grip { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--navy-line); }
.pay-qr { display: grid; place-items: center; padding: 18px; border-radius: var(--r-xl); background: var(--sky-pale); }
.pay-qr img { display: block; width: min(240px, 62vw, 34vh); height: auto; aspect-ratio: 1; padding: 12px; border-radius: 20px; background: var(--white); }
@keyframes pay-fade { from { background: rgba(37, 42, 67, 0); } }
@keyframes pay-rise { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .pay-sheet, .pay-sheet-card { animation: none; } }
.pay-link { border: 0; background: none; padding: 6px 10px; font: 800 15px/1.2 var(--font); color: var(--navy-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.prize-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.prize { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 22px; background: var(--sky-pale); text-align: center; min-width: 0; }
.prize .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 0 0 2.5px var(--navy), 0 3px 0 2.5px var(--navy); }
.prize .ico svg { width: 34px; height: 34px; }
.prize b { font: 900 15px/1.2 var(--font); }
.prize small { font: 700 12px/1.3 var(--font); color: var(--navy-3); }
.prize.new { background: var(--sun-soft); animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.prize.new::after { content: attr(data-new); position: absolute; top: -8px; right: -4px; padding: 2px 10px; border-radius: 999px; background: var(--pink); color: var(--white); font: 900 12px/18px var(--font); transform: rotate(8deg); box-shadow: 0 3px 0 var(--pink-edge); }
.prize.locked { opacity: .6; }
.prize.locked .ico { background: transparent; box-shadow: none; border: 2.5px dashed #AFC2E0; }
.prize.locked .ico svg { opacity: .45; filter: grayscale(1); }
.prize.on { background: var(--blue-soft); box-shadow: inset 0 0 0 3px var(--blue); }
.prize.on::after { content: attr(data-on); position: absolute; top: -8px; right: -4px; padding: 2px 10px; border-radius: 999px; background: var(--blue); color: var(--white); font: 900 12px/18px var(--font); box-shadow: 0 3px 0 var(--blue-edge); }
/* «Призы»: three cards to a row on a phone (the owner, 2026-10-19: a bit more compact). */
.prizes-scroll .prize-row { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.prizes-scroll .prize { gap: 4px; padding: 10px 4px 9px; border-radius: 18px; }
.prizes-scroll .prize .ico { width: 42px; height: 42px; }
.prizes-scroll .prize .ico svg { width: 26px; height: 26px; }
.prizes-scroll .prize b { font-size: 13px; }
.prizes-scroll .prize small { font-size: 11px; line-height: 1.25; }
.prizes-scroll .prize.on::after { top: -7px; right: -3px; padding: 1px 8px; font-size: 11px; line-height: 16px; }
button.prize:active { transform: scale(.97); }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; }
.medal { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font: 800 12px/1.2 var(--font); animation: stamp .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.medal i { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--white); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .14), 0 0 0 4px var(--white), 0 0 0 6px var(--navy-line); }
.medal i svg { width: 28px; height: 28px; }
.review { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.review li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--sky-pale); min-width: 0; }
.review li.fix { background: var(--orange-soft); }
.review .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--white); font: 900 14px/1 var(--font); color: var(--navy-2); }
.review .ex { display: block; font: 900 18px/1.25 var(--font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.review .ex em { font-style: normal; color: var(--pen); }
.review small { display: block; font: 700 12px/1.3 var(--font); color: var(--navy-3); }
.review li.fix small { color: var(--orange-edge); }
.review .badge { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font: 900 16px/1 var(--font); }
.review .badge.ok { background: var(--green); box-shadow: 0 3px 0 var(--green-edge); }
.review .badge.fix { background: var(--orange); box-shadow: 0 3px 0 var(--orange-edge); }
.review .badge svg { width: 18px; height: 18px; }
.review .pts { padding: 4px 10px; border-radius: 999px; background: var(--sun); color: var(--navy); font: 900 14px/1 var(--font); box-shadow: 0 3px 0 var(--sun-edge); }
.actions { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 30px 30px 0 0; background: var(--white); box-shadow: 0 -6px 20px rgba(37, 42, 67, .1); }
.actions .row2 .btn { font-size: 17px; min-height: 52px; }

/* ---------------------------------------------------------------- prizes page */
.page-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; position: relative; z-index: 2; }
.page-head h2 { margin: 0; font: 400 22px/1.2 var(--display); color: var(--navy); }
[dir="rtl"] .page-head .icon-btn svg { transform: scaleX(-1); }   /* «back» points the way the page reads */
.scene-preview { height: 132px; margin: 0 12px; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--sky-top), var(--sky-low)); box-shadow: 0 0 0 3px var(--navy), 0 6px 0 3px var(--navy); z-index: 2; }
/* The «Ракета» finale played on a tap in «Призы» (prizeDemo in js/app.js). */
.scene-preview .rocket { position: absolute; bottom: 6px; left: 24%; z-index: 3; width: 34px; height: 68px; margin-left: -17px; animation: launch-pv 1.2s .25s cubic-bezier(.5, 0, .7, .4) forwards; }
.scene-preview .rocket svg { display: block; width: 100%; height: 100%; }
/* The list scrolls from below the stage's shadow, so cards never slide under the stage. */
.prizes-scroll { flex: 1; overflow-y: auto; margin-top: 12px; padding: 6px 14px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }

/* ---------------------------------------------------------------- settings */
.settings-scroll { flex: 1; overflow-y: auto; padding: 8px 14px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }
.set-row { display: flex; align-items: center; gap: 12px; }
.set-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: var(--white); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.set-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.set-label { flex: 1; min-width: 0; font: 900 17px/1.2 var(--font); }
/* A sticker switch: green and knob at the end when on. */
.switch { position: relative; flex: none; width: 64px; height: 36px; padding: 0; border: 2.5px solid var(--navy); border-radius: 999px; background: var(--navy-line); box-shadow: 0 3px 0 var(--navy); cursor: pointer; transition: background .2s; }
.switch i { position: absolute; top: 3px; inset-inline-start: 3px; width: 25px; height: 25px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2px var(--navy); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"] i { transform: translateX(28px); }
[dir="rtl"] .switch[aria-checked="true"] i { transform: translateX(-28px); }
.switch:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy); }
.lang-list { display: flex; flex-direction: column; gap: 8px; }
/* One short list of rows (the owner, 2026-10-19): a row opens a sheet or a page, the sound switches in place */
.set-cap { margin: 4px 6px -6px; font: 900 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-3); }
.set-list { display: flex; flex-direction: column; padding: 4px 0; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 0 0 2.5px var(--navy-line); }
.set-list .set-row { width: 100%; min-height: 62px; padding: 8px 16px; border: 0; background: none; color: var(--navy); font: inherit; text-align: start; }
.set-list button.set-row { cursor: pointer; }
.set-list .set-row + .set-row { box-shadow: 0 -1.5px 0 var(--sky-mid); }
.set-list button.set-row:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; border-radius: var(--r-md); }
.set-label small { display: block; margin-top: 2px; font: 700 12px/1.3 var(--font); color: var(--navy-3); }
.set-val { flex: none; font: 800 14px/1.2 var(--font); color: var(--navy-3); }
.set-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--navy-3); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .set-chev { transform: scaleX(-1); }
.set-ico.t-orange { background: var(--orange); } .set-ico.t-purple { background: var(--purple); }
.set-ico.t-green { background: var(--green-edge); } .set-ico.t-pink { background: var(--pink); }
.kid-stack { flex: none; display: flex; }
.kid-stack .kid-ava { width: 30px; height: 30px; margin-inline-start: -8px; box-shadow: 0 0 0 2px var(--white); }
.kid-stack .kid-ava:first-child { margin-inline-start: 0; }
.kid-stack .kid-ava > * { width: 36px; height: 36px; margin-top: 7px; }

/* Who plays, on the title: the child's hero, nickname and grade; a tap opens «Кто играет?» */
.kid-chip { align-self: flex-start; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 5px 14px 5px 5px; border: 2.5px solid var(--navy); border-radius: 999px; background: var(--white); color: var(--navy); box-shadow: 0 3px 0 var(--navy); font: inherit; text-align: start; cursor: pointer; }
.kid-chip[hidden] { display: none; }
.kid-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy); }
.kid-chip:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.kid-chip .kid-ava { width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--navy-line); }
.kid-chip .kid-ava > * { width: 44px; height: 44px; margin-top: 8px; }
.kid-chip span { min-width: 0; }
.kid-chip b { display: block; font: 900 16px/1.15 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-chip small { display: block; font: 700 12px/1.2 var(--font); color: var(--navy-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-chip svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.title-wrap.has-kid { padding-top: 12px; }
@media (max-height: 760px) { .title-wrap.has-kid .logo-chip { display: none; } }

/* «Кто играет?»: a row per child — the child, then the pencil to their page */
.kids-list { display: flex; flex-direction: column; gap: 8px; }
.kid-row { display: flex; align-items: center; gap: 8px; }
.kid-row .lang { flex: 1; min-width: 0; }
.kid-row .icon-btn svg { width: 20px; height: 20px; }
.pay-sheet-card .lang-list, .pay-sheet-card .kids-list { max-height: 50vh; overflow-y: auto; padding: 3px; margin: -3px; touch-action: pan-y; }
.pay-sheet-card .box-note { margin: 0; text-align: center; }

/* A child's page: the hero and the grade */
.kid-head { flex-direction: row; align-items: center; gap: 16px; }
.kid-head .kid-ava { width: 76px; height: 76px; box-shadow: 0 0 0 3px var(--navy); }
.kid-head .kid-ava > * { width: 90px; height: 90px; margin-top: 18px; }
.kid-head b { display: block; font: 400 24px/1.15 var(--display); }
.kid-head small { display: block; margin-top: 4px; font: 700 14px/1.3 var(--font); color: var(--navy-3); }
/* Ten heroes in two rows, so the grade and «Готово» stay on the phone's screen */
#screen-kid .hero-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
#screen-kid .hero-pick { padding: 6px 2px; font-size: 11px; min-width: 0; }
#screen-kid .hero-pick span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-kid .hero-pick .kid-ava { width: 48px; height: 48px; }
#screen-kid .hero-pick .kid-ava > * { width: 56px; height: 56px; margin-top: 10px; }
.hero-pick[aria-checked="true"] { background: var(--blue-soft); box-shadow: inset 0 0 0 3px var(--blue); }
.grade-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grade-pill { min-height: 52px; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: var(--sky-pale); color: var(--navy); font: 900 15px/1.15 var(--font); cursor: pointer; }
.grade-pill[aria-checked="true"] { background: var(--blue); color: var(--white); box-shadow: 0 0 0 2.5px var(--navy), 0 3px 0 2.5px var(--navy); }
.grade-pill:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
#kid-done { width: 100%; }
.lang { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 14px; border: 0; border-radius: 18px; background: var(--sky-pale); color: var(--navy); font: inherit; text-align: start; cursor: pointer; }
.lang span { flex: 1; min-width: 0; }
.lang b { display: block; font: 900 16px/1.25 var(--font); }
.lang small { display: block; font: 700 12px/1.3 var(--font); color: var(--navy-3); }
.lang .dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2.5px var(--navy-line); color: var(--white); }
.lang .dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.lang[aria-checked="true"] { background: var(--blue-soft); box-shadow: inset 0 0 0 3px var(--blue); }
.lang[aria-checked="true"] .dot { background: var(--blue); box-shadow: none; }
.lang[aria-checked="true"] .dot svg { visibility: visible; }
.switch:focus-visible, .lang:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch i { transition: none; } }
/* «Мои результаты» (js/results.js): the times table by Leitner box, the mistakes with a tip. */
.fgrid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; max-width: 420px; }
.fgrid i { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font: 900 11px/1 var(--font); font-style: normal; color: var(--navy-3); }
.fc { background: var(--sky-pale); box-shadow: inset 0 0 0 1.5px var(--navy-line); }
.fc.b1 { background: var(--pink-soft); box-shadow: inset 0 0 0 2px var(--pink); }
.fc.b2, .fc.b3 { background: var(--sun-soft); box-shadow: inset 0 0 0 2px var(--sun-edge); }
.fc.b4, .fc.b5 { background: var(--green-soft); box-shadow: inset 0 0 0 2px var(--green-edge); }
.fc.b5 { background: var(--green); }
.fkey { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font: 700 13px/1.3 var(--font); color: var(--navy-3); }
.fkey span { display: inline-flex; align-items: center; gap: 6px; }
.fkey .fc { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mlist li { padding: 10px 12px; border-radius: 16px; background: var(--sky-pale); font: 700 14px/1.35 var(--font); }
.mlist small { color: var(--navy-3); font-weight: 800; white-space: nowrap; }
.mlist p { margin: 4px 0 0; color: var(--navy-3); }
.cat-h { margin: 2px 0 -4px; font: 900 13px/16px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--navy-3); }

/* ---------------------------------------------------------------- game picker */
/* Square sticker tiles, two to a row: the hero in its game's setting over a label in the game's colour. */
.games-scroll { flex: 1; overflow-y: auto; padding: 16px 14px 28px; position: relative; z-index: 2; }
.games-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.games-h { grid-column: 1 / -1; margin: 10px 2px -6px; font: 400 20px/1.2 var(--display); color: var(--navy); }
.game-tile { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; padding: 0; border: 3px solid var(--navy); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--ink); color: var(--white); font: inherit; text-align: center; transition: transform .08s, box-shadow .08s; }
.game-tile:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--navy); }
.tile-art { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px) 0 0; }
.tile-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile-hero { position: absolute; left: 50%; bottom: -2px; width: 62%; height: 84%; transform: translateX(-50%); }
.tile-hero .raccoon { width: 100%; height: 100%; overflow: visible; animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.t-katana .tile-hero .raccoon { animation-delay: -.8s; }
.t-shuriken .tile-hero .raccoon { animation-delay: -1.6s; }
.tile-label { display: flex; flex-direction: column; gap: 1px; padding: 6px 4px 7px; border-top: 3px solid var(--navy); border-radius: 0 0 calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px); background: var(--orange); }
.tile-label b { font: 900 clamp(12px, 3.75vw, 15px)/1.15 var(--font); text-shadow: 0 2px 0 rgba(37, 42, 67, .28); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-label small { font: 800 12px/1.2 var(--font); opacity: .92; }
.t-katana .tile-label { background: var(--blue); }
.t-shuriken .tile-label { background: var(--pink); }
.tile-pen, .tile-mark { font-family: 'Caveat', cursive; font-weight: 700; }
.tile-pen { font-size: 22px; fill: var(--pen); }
.tile-mark { font-size: 30px; fill: var(--teacher); }
.tile-digit, .tile-frac, .tile-num { font-family: var(--font); font-weight: 900; fill: var(--navy); }
.tile-digit { font-size: 17px; fill: var(--pen); }
.tile-frac { font-size: 14px; }
.tile-num { font-size: 11px; }
.new-tag { position: absolute; top: -12px; right: -6px; padding: 2px 10px; border-radius: 999px; background: var(--pink); color: var(--white); font: 900 12px/18px var(--font); font-style: normal; letter-spacing: 0; text-shadow: none; transform: rotate(8deg); box-shadow: 0 3px 0 var(--pink-edge); }

/* ---------------------------------------------------------------- demo tour */
/* The game's tile from the picker pops up over the play screen, then flies off. */
.tour-intro { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; }
.tour-intro:empty { display: none; }
.tour-intro::before { content: ''; position: absolute; inset: 0; background: rgba(191, 225, 255, .78); animation: tourFade 2.4s ease both; }
.tour-tile { width: 176px; animation: tourIn 2.4s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes tourIn {
  0% { transform: scale(.4) rotate(-10deg); opacity: 0; }
  16% { transform: scale(1.5) rotate(2deg); opacity: 1; }
  24%, 84% { transform: scale(1.42) rotate(0); opacity: 1; }
  100% { transform: scale(1.1) translateY(-60px); opacity: 0; }
}
@keyframes tourFade { 0%, 84% { opacity: 1; } 100% { opacity: 0; } }
/* Two lines about the game under the keys while the tour plays it. */
.tour-cap { position: relative; z-index: 9; flex: 0 0 auto; padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--navy); color: var(--white); text-align: center; }
.tour-cap b { display: block; font: 900 11px/16px var(--font); color: var(--sun); letter-spacing: .03em; }
.tour-cap p { margin: 2px 0 0; font: 800 14px/1.3 var(--font); text-wrap: balance; }

/* ---------------------------------------------------------------- «Катана дробей» */
/* the fox: a tail more for each stage of the ladder, all nine when celebrating */
.kitsune .kt { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: 0% 50%; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.kitsune .kt.k1,
.scene.s2 .kitsune .kt.k2, .scene.s3 .kitsune .kt.k3,
.scene.s4 .kitsune .kt.k4, .scene.s4 .kitsune .kt.k5,
.scene.s5 .kitsune .kt.k6, .scene.s5 .kitsune .kt.k7,
.scene.fever .kitsune .kt.k8, .scene.fever .kitsune .kt.k9,
.mascot.party .kitsune .kt, .tile-hero .kitsune .kt.k2, .tile-hero .kitsune .kt.k3 { opacity: 1; transform: none; }
.kitsune .kt-fan { transform-box: fill-box; transform-origin: 0% 60%; animation: wag 1.6s ease-in-out infinite; }
.kitsune .kt-band { transform-box: fill-box; transform-origin: 100% 40%; animation: flutter .9s ease-in-out infinite; }
.critter.cheer .rc-arm { transform: rotate(var(--up, 150deg)); }
#app[data-game="katana"] { --fur: #FF8A2B; }

/* the board: mochi and dango on the squared page, cut by swipes */
#app[data-game="katana"] .pad { display: none; }
#app[data-game="katana"] #screen-play .card { margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.sheet.katana { touch-action: none; cursor: crosshair; }
.kb { position: absolute; left: 0; }
.k-task { position: absolute; left: calc(var(--cell) * .5); top: 0; font: 800 calc(var(--cell) * .58)/var(--cell) var(--font); color: var(--pen); text-wrap: balance; }
.fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .1em; font-size: .8em; line-height: 1.02; font-variant-numeric: tabular-nums; }
.fr i { font-style: normal; padding: 0 .14em; }
.fr i:first-child { border-bottom: .1em solid currentColor; }
.k-bar { position: absolute; }
.k-piece { position: absolute; top: 0; bottom: 0; border: 3px solid var(--navy); border-radius: 7px; box-shadow: 0 4px 0 rgba(37, 42, 67, .16); overflow: hidden; transition: left .3s cubic-bezier(.3, 1.4, .5, 1), width .3s cubic-bezier(.3, 1.4, .5, 1), transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s, background .3s; }
.k-piece.l { border-top-left-radius: var(--rr); border-bottom-left-radius: var(--rr); }
.k-piece.r { border-top-right-radius: var(--rr); border-bottom-right-radius: var(--rr); }
.k-piece::before { content: ''; position: absolute; left: 12%; top: 13%; width: 26%; max-width: 46px; height: 16%; border-radius: 999px; background: rgba(255, 255, 255, .75); }
.k-bar.snap .k-piece { transition: none; }
.k-piece.share { transform: translateY(-14%); box-shadow: 0 0 0 4px var(--sun), 0 10px 0 rgba(37, 42, 67, .14); }
.k-piece.hop { animation: khop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.k-bar.dango .k-piece { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.k-bar.dango .k-piece::before { left: -6px; right: -6px; top: 50%; width: auto; max-width: none; height: 5px; margin-top: -2.5px; border-radius: 3px; background: #D9B27C; box-shadow: 0 0 0 2px var(--navy); }
.k-ball { position: absolute; top: 50%; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--navy); box-shadow: inset -3px -4px 0 rgba(37, 42, 67, .08); }
.k-ball::after { content: ''; position: absolute; left: 18%; top: 15%; width: 30%; height: 24%; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.k-bar.wobble { animation: kwobble .45s ease-out; }
.k-bar.aimed .k-piece { box-shadow: 0 0 0 4px var(--sun), 0 4px 0 rgba(37, 42, 67, .16); }
.k-tag { position: absolute; box-sizing: border-box; display: grid; place-items: center; border-radius: 18px; background: var(--white); border: 3px solid var(--navy); box-shadow: 0 4px 0 var(--navy); font: 900 calc(var(--cell) * .74)/1 var(--font); color: var(--navy); transition: background .3s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.k-tag .fr { font-size: 1em; }
.k-tag.win { background: var(--sun); transform: rotate(-6deg) scale(1.08); }
.k-lab { position: absolute; width: 0; display: flex; justify-content: center; pointer-events: none; }
.k-lab > span { flex: none; white-space: nowrap; font: 800 calc(var(--cell) * .62)/1 var(--font); color: var(--pen); animation: stamp .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.k-lab.mine > span { font-size: calc(var(--cell) * .74); }
.k-lab.rest > span { color: var(--navy-3); }
.k-guide { position: absolute; top: -14%; bottom: -14%; width: 0; margin-left: -1.5px; border-left: 3px dashed var(--pen); opacity: .6; pointer-events: none; animation: fadeIn .3s both; }
.k-aim { position: absolute; width: 0; margin-left: -1.5px; border-left: 3px dashed var(--navy); opacity: .55; pointer-events: none; }
.k-miss { position: absolute; top: -12%; bottom: -12%; width: 0; margin-left: -1.5px; border-left: 3px dashed var(--miss); pointer-events: none; animation: kmiss .9s ease-out forwards; }
.k-glint { position: absolute; top: -16%; bottom: -16%; z-index: 2; width: 6px; margin-left: -3px; border-radius: 3px; background: #FFFFFF; box-shadow: 0 0 0 2px var(--pen), 0 0 14px 4px rgba(255, 255, 255, .95); pointer-events: none; animation: kglint .45s ease-out forwards; }
.k-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.k-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-trail .t-o { stroke: rgba(76, 141, 245, .38); stroke-width: 14; }
.k-trail .t-i { stroke: #FFFFFF; stroke-width: 5; }
.k-trail .miss .t-o { stroke: rgba(175, 82, 222, .42); }
.k-trail .fade { opacity: 0; transition: opacity .35s; }
@keyframes khop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -18%; } }
@keyframes kmiss { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kglint { 0% { opacity: 0; transform: scaleY(.2); } 25% { opacity: 1; transform: scaleY(1.05); } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes kwobble { 0%, 100% { transform: none; } 25% { transform: scale(1.04, .9); } 55% { transform: scale(.98, 1.05); } 80% { transform: scale(1.01, .98); } }

/* ---------------------------------------------------------------- «Сюрикен на луче» */
#app[data-game="shuriken"] .pad { display: none; }
#app[data-game="shuriken"] #screen-play .card { margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.sheet.shuriken { touch-action: none; cursor: crosshair; }
.k-task small { display: block; margin-top: calc(var(--cell) * -.12); font: 800 calc(var(--cell) * .44)/var(--cell) var(--font); color: var(--navy-2); }
.k-task .s-num { font-size: 1.3em; font-weight: 900; color: var(--pen); }

/* the cat beckons with its raised paw, waves faster when cheering, swings it to throw */
.neko .nk-paw { transform-box: fill-box; transform-origin: 50% 95%; animation: nkwave 1.4s ease-in-out infinite; }
.mascot.cheer .neko .nk-paw, .mascot.party .neko .nk-paw { animation-duration: .35s; }
.mascot.aiming .neko .nk-paw { animation: none; transform: rotate(-24deg) translateY(-6%); transition: transform .15s; }
.mascot.throw .neko .nk-paw { animation: nkthrow .38s ease-out; }

/* the line, the aim, the stuck shuriken and the number's sticker */
.s-axis { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.s-axis path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-axis .ax { stroke: var(--navy); stroke-width: 3; }
.s-axis .tk { stroke: var(--navy); stroke-width: 2.5; }
.s-axis .hk { stroke: var(--pen); stroke-width: 2.5; animation: fadeIn .3s both; }
.k-lab.s-end > span { color: var(--navy); }
.k-lab.s-hint > span { font-size: calc(var(--cell) * .44); color: var(--pen); }
.s-aim { position: absolute; width: 0; margin-left: -1.5px; border-left: 3px dashed var(--navy); opacity: .5; pointer-events: none; }
.s-ring { position: absolute; width: calc(var(--cell) * .9); height: calc(var(--cell) * .9); margin: calc(var(--cell) * -.45) 0 0 calc(var(--cell) * -.45); border-radius: 50%; border: 3px dashed var(--orange-edge); pointer-events: none; animation: spin 3s linear infinite; }
.s-star { position: absolute; z-index: 2; width: calc(var(--cell) * 1.15); height: calc(var(--cell) * 1.15); margin: calc(var(--cell) * -.575) 0 0 calc(var(--cell) * -.575); transform: rotate(var(--rot, 0deg)); pointer-events: none; }
.s-star svg { width: 100%; height: 100%; overflow: visible; }
.s-star.in { animation: sland .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.s-star.miss { opacity: .38; filter: grayscale(.7); }
.s-star.hit svg { filter: drop-shadow(0 0 0 var(--sun)) drop-shadow(0 0 4px var(--sun)); }
.s-flag { position: absolute; z-index: 3; width: 0; display: flex; justify-content: center; pointer-events: none; }
.s-flag > span { flex: none; position: relative; transform: translateY(-100%); padding: 2px 10px; border-radius: 12px; background: var(--white); border: 2.5px solid var(--navy); box-shadow: 0 3px 0 var(--navy); font: 900 calc(var(--cell) * .62)/1.15 var(--font); color: var(--pen); white-space: nowrap; }
.s-flag > span::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; margin-left: -6px; background: var(--white); border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy); transform: rotate(45deg); }
.s-flag.in > span { animation: stamp .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.flying-star { position: absolute; left: -14px; top: -14px; z-index: 35; width: 28px; height: 28px; pointer-events: none; }
.flying-star svg { width: 100%; height: 100%; }
@keyframes nkwave { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes nkthrow { 0% { transform: rotate(-24deg); } 40% { transform: rotate(40deg); } 100% { transform: none; } }
@keyframes sland { 0% { transform: rotate(var(--rot, 0deg)) scale(1.8); } 100% { transform: rotate(var(--rot, 0deg)) scale(1); } }

/* ---------------------------------------------------------------- «Пропущенная буква» */
#app[data-game="letters"] .pad { grid-template-columns: repeat(var(--n, 2), 1fr); }
#app[data-game="letters"] .pad button { height: clamp(64px, 10.5vh, 92px); font-size: 46px; }
#app[data-game="letters"] .pad button.long { font-size: clamp(22px, 7vw, 36px); }   /* чьк, ма-шина */
.t-letters .tile-label { background: var(--green-edge); }
.t-letters .tile-hero .raccoon { animation-delay: -2.2s; }
.tanuki .tk-leaf { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; animation: tkleaf 2.6s ease-in-out infinite; }
.mascot.leafless .tanuki .tk-leaf { opacity: 0; transform: scale(.2); animation: none; }
.flying-leaf { position: absolute; left: -14px; top: -15px; z-index: 35; width: 28px; height: 30px; pointer-events: none; }
.flying-leaf svg { width: 100%; height: 100%; overflow: visible; }
.review .ex .rv-check { display: inline; margin-left: 6px; font: 800 13px/1 var(--font); color: var(--navy-3); }
@keyframes tkleaf { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* ---------------------------------------------------------------- the math games */
#app.on-board .pad { display: none; }
#app.on-board #screen-play .card { margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.sheet.b-clock, .sheet.b-area { touch-action: none; }
.kbtn { position: absolute; display: grid; place-items: center; padding: 0; border: 2.5px solid var(--navy); border-radius: 16px; background: var(--white); box-shadow: 0 4px 0 var(--navy); font: 900 calc(var(--cell) * .62)/1 var(--font); color: var(--navy); transition: transform .08s, box-shadow .08s, background .2s, opacity .2s; }
.kbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.kbtn:disabled { opacity: .55; }
.c-ok { background: var(--orange); color: var(--white); text-shadow: 0 2px 0 rgba(37, 42, 67, .28); font-size: calc(var(--cell) * .55); }
.d-reset { font-size: calc(var(--cell) * .5); }
.c-wobble { animation: shake .4s; }
.o-pop, .c-pop, .sh-pop { animation: pop .5s ease-out; }
.o-sign.o-hint, .w-pad.w-hint, .d-card.d-hint, .sh-coin.sh-hint { box-shadow: 0 0 0 4px var(--sun), 0 4px 0 var(--navy); animation: pulse 1s ease-in-out infinite; }

/* «Окошки»: one frame over the window's cells; the chipmunk's cheeks puff as it spits */
.it.win { height: var(--cell); border-radius: 10px; background: var(--orange-soft); box-shadow: inset 0 0 0 3px var(--orange); }
.chipmunk .nk-cheeks { transform-box: fill-box; transform-origin: 50% 50%; }
.mascot.spit .chipmunk .nk-cheeks { animation: cheeks .35s ease-out; }
.flying-acorn { position: absolute; left: -13px; top: -15px; z-index: 35; width: 26px; height: 30px; pointer-events: none; }

/* «Порядок действий»: wooden boards with the signs, the action numbers over them */
.o-row { position: absolute; left: 0; display: flex; align-items: center; justify-content: center; font: 900 calc(var(--cell) * var(--fit, 1))/1 var(--font); color: var(--navy); white-space: nowrap; }
.o-tok { padding: 0 .05em; }
.o-tok.num { color: var(--pen); }
.o-tok.par { color: var(--navy-2); font-weight: 700; }
.o-tok.res { margin-left: .2em; color: var(--green-edge); }
.o-sign { position: relative; width: 1.3em; height: 1.3em; margin: 0 .12em; display: grid; place-items: center; padding: 0; border: 2.5px solid var(--navy); border-radius: .25em; background: #E8C27A; box-shadow: 0 .12em 0 var(--navy); font: inherit; color: var(--navy); transition: transform .1s, background .2s; }
.o-sign b { font-size: .8em; line-height: 1; }
.o-no { position: absolute; top: -.9em; left: 50%; transform: translateX(-50%) rotate(-6deg); font: 700 .7em/1 var(--hand); font-style: normal; color: var(--teacher); }
.o-sign.o-done { background: #F7E7C0; box-shadow: none; transform: translateY(.1em); }
.o-sign.o-done::after { content: ''; position: absolute; left: 46%; top: -6%; bottom: -6%; width: 0; border-left: 2px solid var(--navy); transform: rotate(14deg); }
.o-sign.o-crack { animation: crack .5s ease-out; }
.o-sign.o-wobble { animation: shake .4s; }
.mascot.strike .panda .rc-arm.r { transform: rotate(-125deg); transition: transform .06s; }
.mascot.strike .panda .rc-arm.l { transform: rotate(40deg); transition: transform .06s; }

/* «Какое действие?»: lily pads with the signs; the frog leaves the scene while it leaps */
.k-task.w-story { font-size: calc(var(--cell) * .54); }
/* Comparing numbers (js/whichop.js, backlogs B62, B63): the two numbers big, a ? between them. */
.w-cmp { display: block; margin-top: calc(var(--cell) * .6); text-align: center; font-size: calc(var(--cell) * 1.4); font-weight: 900; letter-spacing: .04em; }
.w-cmp i { font-style: normal; color: var(--navy-3); }
.w-pad { border: 3px solid var(--navy); border-radius: 50%; background: #5BBF6A; color: var(--white); font-size: var(--cell); text-shadow: 0 2px 0 rgba(37, 42, 67, .35); }
.w-pad b { margin-top: -.08em; }
.w-pad.w-sunk { opacity: .4; transform: translateY(4px); box-shadow: none; }
.w-pad.w-frog { background: #7ED957; }
.w-sit { position: absolute; left: 50%; top: -42%; width: 72%; transform: translateX(-50%); pointer-events: none; }
.w-sit svg { width: 100%; height: auto; overflow: visible; }
.w-pad.w-land { animation: pop .5s ease-out; }
.w-pad.w-splash { animation: splash .6s ease-out; }
.mascot.away .raccoon { opacity: 0; transition: opacity .08s; }
.flying-frog { position: absolute; left: -22px; top: -19px; z-index: 35; width: 44px; height: 38px; pointer-events: none; }

/* «Часы сёгуна»: the clock face and the owl's head that follows the hand */
.c-face { position: absolute; left: 0; top: 0; overflow: visible; }
.c-face .rim { fill: #FFFFFF; stroke: var(--navy); stroke-width: 3.5; }
.c-face path { stroke: var(--navy-3); stroke-width: 1.4; stroke-linecap: round; }
.c-face path.big { stroke: var(--navy); stroke-width: 2.6; }
.c-face .nums text { font-family: var(--font); font-weight: 900; fill: var(--navy); text-anchor: middle; }
.c-face .hand { stroke-linecap: round; }
.c-face .hour { stroke: var(--navy); stroke-width: 7; }
.c-face .min { stroke: var(--pen); stroke-width: 4.5; }
.c-face .pin { fill: var(--orange); stroke: var(--navy); stroke-width: 2; }
.c-face.grab-min .min, .c-face.grab-hour .hour { filter: drop-shadow(0 0 4px var(--sun)); }
.c-face.c-hint .min { stroke: var(--orange); }
.c-opt { font-size: calc(var(--cell) * .62); }
.c-opt.c-no { opacity: .4; text-decoration: line-through; }
.c-opt.c-yes { background: var(--green-soft); box-shadow: 0 0 0 3px var(--green), 0 4px 0 var(--navy); }
.owl .rc-head { transform-box: fill-box; transform-origin: 50% 85%; transform: rotate(var(--look, 0deg)); transition: transform .15s; }

/* «Лавка енота»: the shelf, the tray, coins and notes; the raccoon's arm carries a coin */
.sh-shelf { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; background: #FFF7E6; box-shadow: inset 0 0 0 2.5px #E8C27A; }
.sh-good { width: 58%; }
.sh-good svg { width: 100%; height: auto; display: block; }
.sh-tag { padding: 1px 10px; border-radius: 999px; background: var(--white); border: 2.5px solid var(--navy); font: 900 calc(var(--cell) * .48)/1.2 var(--font); color: var(--navy); transform: rotate(-4deg); white-space: nowrap; }
.sh-note { font: 800 calc(var(--cell) * .34)/1 var(--font); color: var(--navy-2); }
.sh-tray { position: absolute; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 6px; border-radius: 16px; background: #E8C27A; box-shadow: inset 0 0 0 3px #B08A40; overflow: hidden; }
.sh-sum { position: absolute; text-align: center; font: 800 calc(var(--cell) * .42)/1.4 var(--font); color: var(--navy-2); }
.sh-sum b { color: var(--navy); font-weight: 900; }
.sh-coin { border-radius: 50%; background: #DCE3F2; font-size: calc(var(--cell) * .52); }
.sh-coin.gold { background: #FFCC00; }
.sh-coin.note { border-radius: 8px; background: #9BD7A8; }
.sh-coin.small { position: relative; width: calc(var(--cell) * .95); height: calc(var(--cell) * .95); border-width: 2px; box-shadow: 0 2px 0 var(--navy); font-size: calc(var(--cell) * .38); }
.sh-coin.small.note { width: calc(var(--cell) * 1.3); height: calc(var(--cell) * .85); }
/* A coin with a longer face (10p, 20p, 50p in English) gets a smaller figure. */
.sh-coin.long { font-size: calc(var(--cell) * .4); letter-spacing: -.03em; }
.sh-coin.small.long { font-size: calc(var(--cell) * .3); }
.sh-coin.incoming { visibility: hidden; }
.sh-coin.used { visibility: hidden; }
/* «Хватит ли денег?» (js/shop.js, backlog B62): the purse's coins lie on the tray, not to be tapped. */
.sh-purse .sh-coin { display: grid; place-items: center; }
.sh-coin.sh-land { animation: pop .3s ease-out; }
#arms .tile.coin circle { fill: #FFCC00; stroke: var(--navy); stroke-width: 3; }
#arms .tile.coin text { font-size: 15px; }

/* «Площадь на клетках»: the rectangle, its live label, the tatami and the hint's ghost */
.a-field { position: absolute; }
.a-rect { position: absolute; display: none; background: rgba(76, 141, 245, .14); box-shadow: inset 0 0 0 3px var(--pen); }
.a-rect.laid { background: repeating-linear-gradient(90deg, #EAD9A6 0 calc(var(--cell) * 2 - 2px), #B9A06A calc(var(--cell) * 2 - 2px) calc(var(--cell) * 2)), #EAD9A6; animation: tatami .5s ease-out; }
.a-label { position: absolute; display: none; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 10px; background: rgba(255, 255, 255, .92); font: 900 calc(var(--cell) * .5)/1.2 var(--font); color: var(--pen); white-space: nowrap; text-align: center; pointer-events: none; }
.a-label small { display: block; font-size: .75em; color: var(--navy-2); }
/* A figure of rectangles (js/area.js, backlog B63) and the graphic dictation's line (backlog B62). */
.a-fig { position: absolute; background: rgba(255, 153, 0, .22); box-shadow: 0 0 0 1.5px rgba(217, 123, 0, .55); }
.a-path { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.a-seg { stroke: var(--pen); stroke-width: 4; stroke-linecap: round; }
.a-seg.a-live { stroke: rgba(47, 107, 209, .55); stroke-dasharray: 6 6; }
.a-seg.a-next { stroke: var(--orange); stroke-width: 3; stroke-dasharray: 4 6; }
.a-start { fill: var(--navy); }
.a-end { fill: var(--white); stroke: var(--pen); stroke-width: 3; }
.a-ghost { position: absolute; box-shadow: inset 0 0 0 3px var(--orange); background: repeating-linear-gradient(45deg, rgba(255, 153, 0, .12) 0 6px, transparent 6px 12px); animation: fadeIn .3s both; }
.mascot.build .beaver .rc-arm.r { animation: hammer .3s ease-in-out infinite; }

/* «Дракон 24»: the cards, the signs and the fusing fire */
.d-cards { position: absolute; display: flex; justify-content: center; align-items: center; gap: 8px; }
.d-card { position: relative; width: calc(var(--cell) * 1.7); height: calc(var(--cell) * 2.3); padding: 0; border: 3px solid var(--navy); border-radius: 12px; background: var(--white); box-shadow: 0 5px 0 var(--navy); font: 900 var(--cell)/1 var(--font); color: var(--navy); transition: transform .12s; }
.d-card.sel { transform: translateY(-8px); background: var(--sun-soft); box-shadow: 0 0 0 4px var(--sun), 0 5px 0 var(--navy); }
.d-card.fresh { background: #FFF0E0; animation: forge .45s ease-out; }
.d-cards.picking .d-card:not(.sel) { box-shadow: 0 0 0 3px var(--blue-soft), 0 5px 0 var(--navy); }
.d-log { position: absolute; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font: 800 calc(var(--cell) * .4)/1.4 var(--font); color: var(--navy-2); }
.d-log span { padding: 0 8px; border-radius: 999px; background: var(--sky-pale); }
.d-op { border-radius: 50%; background: var(--orange-soft); font-size: calc(var(--cell) * .8); }
.d-op.sel { background: var(--orange); color: var(--white); }
.mascot.roar .dragon .rc-head { transform-box: fill-box; transform-origin: 50% 90%; animation: roar .38s ease-out; }
.flying-fire { position: absolute; left: -17px; top: -17px; z-index: 35; width: 34px; height: 34px; pointer-events: none; }
.flying-acorn svg, .flying-frog svg, .flying-fire svg { width: 100%; height: 100%; overflow: visible; }

/* the picker's tile labels, a colour per game */
.t-windows .tile-label { background: var(--orange-edge); }
.t-order .tile-label { background: #2B2E3F; }
.t-whichop .tile-label { background: #1F8F86; }
.t-clock .tile-label { background: var(--purple-edge); }
.t-shop .tile-label { background: #2E4A7A; }
.t-area .tile-label { background: #8A5A2B; }
.t-dragon .tile-label { background: var(--pink-edge); }

/* «Проверь тетрадь енота»: the raccoon's digits are buttons, a found one gets the teacher's
   hand-drawn red ring */
.t-check .tile-label { background: var(--teacher); }
.ck-d { padding: 0; border: 0; border-radius: 10px; background: none; font: 900 calc(var(--cell) * .74)/1 var(--font); color: var(--pen); overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ck-d b { position: relative; z-index: 1; font: inherit; }
.ck-d:focus-visible { outline: 3px solid var(--sun); outline-offset: -2px; }
.ck-d.ck-found { cursor: default; }
.ck-d.ck-hint { background: var(--sun-soft); animation: breathe 1.2s ease-in-out infinite; }
.ck-d.ck-wobble, .ck-ok.ck-wobble { animation: shake .4s; }
.ck-ring { position: absolute; left: -24%; top: -24%; width: 148%; height: 148%; overflow: visible; pointer-events: none; }
.ck-ring path { fill: none; stroke: var(--teacher); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 150; stroke-dashoffset: 150; animation: draw .35s ease-out forwards; }
.ck-ring.still path { stroke-dashoffset: 0; animation: none; }
.ck-ok { display: flex; align-items: center; justify-content: center; gap: .3em; }
.ck-ok svg { width: 1.3em; height: 1.3em; flex: none; }
.ck-ok.ck-pressed { background: var(--green); }
.ck-ok.ck-hint { box-shadow: 0 0 0 4px var(--sun), 0 4px 0 var(--navy); animation: pulse 1s ease-in-out infinite; }
.review .ex s { color: var(--teacher); text-decoration-thickness: 2px; }
.t-windows .tile-hero .raccoon, .t-clock .tile-hero .raccoon, .t-area .tile-hero .raccoon { animation-delay: -1.2s; }
.t-order .tile-hero .raccoon, .t-shop .tile-hero .raccoon, .t-dragon .tile-hero .raccoon { animation-delay: -.4s; }
@keyframes cheeks { 0% { transform: scale(1.2, 1.12); } 60% { transform: scale(.9); } 100% { transform: none; } }
@keyframes crack { 0% { transform: scale(1.25) rotate(-6deg); } 40% { transform: scale(.9) rotate(4deg); } 100% { transform: translateY(.1em); } }
@keyframes splash { 0% { transform: none; } 30% { transform: translateY(8px) scale(1.1, .85); } 100% { transform: translateY(4px); } }
@keyframes tatami { from { opacity: .4; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hammer { 0%, 100% { transform: none; } 50% { transform: rotate(-40deg); } }
@keyframes forge { 0% { transform: scale(.4) rotate(-10deg); filter: brightness(1.6); } 70% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes roar { 0%, 100% { transform: none; } 40% { transform: rotate(-8deg) scale(1.06); } }

/* ---------------------------------------------------------------- keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes grab { 0% { transform: translateY(3px) scale(.92); color: var(--blue); } 60% { transform: translateY(-2px) scale(1.04); } 100% { transform: none; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes land { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.18) rotate(var(--tilt, 0deg)); opacity: 1; } 100% { transform: scale(1) rotate(var(--tilt, 0deg)); } }
@keyframes breathe { 0%, 100% { box-shadow: inset 0 0 0 3px var(--sun); } 50% { box-shadow: inset 0 0 0 3px #FFE27A; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes stamp { 0% { transform: scale(2.2) rotate(-14deg); opacity: 0; } 100% { opacity: 1; } }
@keyframes reach { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .85; transform: scale(1.1); } }
@keyframes cut { 0% { transform: rotate(-4deg) translateX(-130%); } 20% { transform: rotate(-4deg) translateX(0); } 76% { transform: rotate(-4deg) translateX(0); } 100% { transform: rotate(-4deg) translateX(130%); } }
@keyframes cutback { 0% { transform: rotate(3deg) translateX(130%); } 20% { transform: rotate(3deg) translateX(0); } 76% { transform: rotate(3deg) translateX(0); } 100% { transform: rotate(3deg) translateX(-130%); } }
@keyframes bulbs { 0% { background-position: 0 0; } 100% { background-position: 34px 0; } }
@keyframes rise { 0% { transform: translateY(60%) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes launch { 0% { transform: translateY(0); } 100% { transform: translateY(-1200px); } }
@keyframes launch-pv { to { transform: translateY(-220px); } }

@media (prefers-reduced-motion: reduce) {
  .scene .rays, .scene .spot, .rc-tail, .rc-band-tails, .mascot .raccoon, .critter .critter-svg, .card::after, .cloud, .score-star::before, .finale::before, .mascot.party .rc-arm, .kitsune .kt-fan, .kitsune .kt-band, .neko .nk-paw, .tanuki .tk-leaf, .s-ring, .mascot.build .beaver .rc-arm.r, .o-sign.o-hint, .w-pad.w-hint, .d-card.d-hint, .sh-coin.sh-hint, .ck-d.ck-hint, .ck-ok.ck-hint, .ck-ring path, .tile-hero .raccoon, .tour-tile, .tour-intro::before { animation: none !important; }
  .ck-ring path { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------- «Мои результаты» as one flow (the owner, 2026-10-19) */
.res-hero { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-xl); background: var(--white); box-shadow: 0 0 0 3px var(--navy), 0 6px 0 3px var(--navy); }
.res-top { display: flex; align-items: center; gap: 12px; }
.res-top > .kid-ava { width: 64px; height: 64px; box-shadow: 0 0 0 2.5px var(--navy-line); }
.res-top > .kid-ava > * { width: 76px; height: 76px; margin-top: 14px; }
.res-who { flex: 1; min-width: 0; }
.res-who b { display: block; font: 900 17px/1.15 var(--font); }
.res-who small { display: block; font: 700 12px/1.25 var(--font); color: var(--navy-3); }
.res-big { margin: 4px 0 2px; font: 400 38px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-big small { display: inline; margin-inline-start: 6px; font: 800 15px/1 var(--font); color: var(--navy-3); }
.res-place { flex: none; width: 68px; height: 68px; border: 0; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--orange); color: var(--white); box-shadow: 0 0 0 2.5px var(--navy), 0 3px 0 2.5px var(--navy); cursor: pointer; }
.res-place b { font: 400 26px/1 var(--display); text-shadow: 0 2px 0 var(--navy); }
.res-place small { font: 900 10px/1.1 var(--font); text-transform: uppercase; letter-spacing: .04em; }
.res-place:active { transform: translateY(2px); box-shadow: 0 0 0 2.5px var(--navy), 0 1px 0 2.5px var(--navy); }
.res-streak { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.res-day { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 800 11px/1 var(--font); color: var(--navy-3); }
.res-day i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-pale); box-shadow: inset 0 0 0 2px var(--navy-line); }
.res-day i svg { width: 18px; height: 18px; fill: none; stroke: var(--white); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.res-day.on i { background: var(--orange); box-shadow: 0 0 0 2px var(--navy); }
.res-day.today { color: var(--navy); }
.res-day.today i { box-shadow: 0 0 0 2.5px var(--orange); }
.res-day.on.today i { box-shadow: 0 0 0 2.5px var(--navy), 0 0 0 5px var(--orange-soft); }
.res-goal { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-radius: var(--r-lg); background: var(--orange-soft); box-shadow: inset 0 0 0 2.5px #FFD8A3; color: var(--navy); font: 800 14px/1.3 var(--font); text-align: start; cursor: pointer; }
.res-goal > span:nth-child(2) { flex: 1; min-width: 0; }
.res-goal b { font-weight: 900; }
.res-goal .gi { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--orange); color: var(--white); }
.res-goal .gi svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.res-goal .btn { flex: none; }
.res-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.res-h .box-note, .res-h > span { margin: 0; }
.res-h > span { font: 900 14px/1.2 var(--font); }
.res-quests { display: flex; flex-direction: column; gap: 6px; }
.res-quests > .res-h { padding: 0 6px; }
.res-quest { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 2.5px var(--navy-line); }
.res-quest.done { background: var(--green-soft); box-shadow: inset 0 0 0 2.5px #9BDDAE; }
.res-quest .qi { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-edge); }
.res-quest.done .qi { background: var(--green); color: var(--white); }
.res-quest .qi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.res-quest .ql { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.res-quest .ql b { font: 900 14px/1.25 var(--font); }
.res-quest .ql small { font: 800 12px/1.2 var(--font); color: var(--green-edge); }
.res-quest .qn { flex: none; font: 400 16px/1 var(--display); font-variant-numeric: tabular-nums; }
.res-bar { display: block; height: 10px; border-radius: 999px; background: var(--sky-pale); box-shadow: inset 0 0 0 2px var(--navy-line); overflow: hidden; }
.res-bar i { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.res-bar.gr i { background: var(--green); }
.res-center { text-align: center; }
.res-sub { padding: 0 6px; margin-bottom: -6px; }
/* «История» */
.res-month .icon-btn:disabled { opacity: .35; cursor: default; }
.res-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.res-wd { font: 900 11px/1 var(--font); color: var(--navy-3); text-align: center; padding-bottom: 2px; }
.res-c { aspect-ratio: 1; border: 0; border-radius: 12px; display: grid; place-items: center; background: var(--sky-pale); color: var(--navy-2); font: 800 13px/1 var(--font); cursor: pointer; }
.res-c.x { background: none; cursor: default; }
.res-c:disabled { opacity: .45; cursor: default; }
.res-c.l1 { background: #FFE2B8; } .res-c.l2 { background: #FFC067; } .res-c.l3 { background: var(--orange); color: var(--white); }
.res-c.sel { box-shadow: 0 0 0 2.5px var(--navy); }
.res-c:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.res-dayh { padding: 0 6px; margin-bottom: -6px; }
.res-round { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 14px; }
.res-round + .res-round { box-shadow: 0 -1.5px 0 var(--sky-mid); }
.res-round .set-label { font-size: 15px; }
.gdot { flex: none; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: var(--white); font: 400 15px/1 var(--display); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.res-pts { flex: none; text-align: end; font: 400 17px/1 var(--display); font-variant-numeric: tabular-nums; }
.res-pts small { display: block; margin-top: 3px; font: 800 11px/1 var(--font); color: var(--navy-3); }
.res-tag { display: inline-block; margin-inline-start: 6px; padding: 2px 7px; border-radius: 999px; background: var(--orange-soft); color: #9A5200; font: 900 10px/1.3 var(--font); text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
/* the league */
.res-podium { padding-bottom: 0; overflow: hidden; }
.res-pods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.res-pod { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.res-pod .kid-ava { width: 52px; height: 52px; box-shadow: 0 0 0 2.5px var(--navy-line); }
.res-pod .kid-ava > * { width: 62px; height: 62px; margin-top: 12px; }
.res-pod.p1 .kid-ava { box-shadow: 0 0 0 3px var(--sun); }
.res-pod.me .kid-ava { box-shadow: 0 0 0 3px var(--blue); }
.res-pod b { max-width: 100%; font: 900 13px/1.15 var(--font); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-pod small { font: 800 12px/1 var(--font); color: var(--navy-3); font-variant-numeric: tabular-nums; }
.res-pod .ped { width: 100%; margin-top: 2px; border-radius: 14px 14px 0 0; display: grid; place-items: start center; padding-top: 8px; color: var(--white); font: 400 22px/1 var(--display); text-shadow: 0 2px 0 var(--navy); box-shadow: inset 0 0 0 2.5px var(--navy); }
.res-pod.p1 .ped { height: 86px; background: var(--sun); }
.res-pod.p2 .ped { height: 62px; background: var(--fur); }
.res-pod.p3 .ped { height: 46px; background: var(--orange-edge); }
/* «Призы и рекорды» */
.res-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.res-kpi { padding: 10px 6px; border-radius: 18px; background: var(--sky-pale); text-align: center; }
.res-kpi b { display: block; font: 400 22px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.res-kpi small { display: block; margin-top: 3px; font: 800 11px/1.2 var(--font); color: var(--navy-3); }
.res-prizes { width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.res-label { display: block; margin: 0 0 -4px; font: 900 12px/16px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--navy-3); }
.res-worn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.res-wear { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 18px; background: var(--blue-soft); box-shadow: inset 0 0 0 2.5px var(--blue); text-align: center; min-width: 0; }
.res-wear .ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 2.5px var(--navy), 0 3px 0 2.5px var(--navy); }
.res-wear .ico svg { width: 28px; height: 28px; }
.res-wear b { margin-top: 4px; font: 900 14px/1.15 var(--font); }
.res-wear small { font: 700 11px/1.2 var(--font); color: var(--navy-3); }
/* «Для родителей» */
.res-sum { margin: 0; font: 800 15px/1.4 var(--font); }
.res-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 104px; }
.res-barday { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font: 800 11px/1 var(--font); color: var(--navy-3); }
.res-barday em { font: 900 11px/1 var(--font); font-style: normal; color: var(--navy-2); }
.res-barday i { width: 100%; border-radius: 8px 8px 3px 3px; background: var(--navy-line); }
.res-barday i.on { background: var(--orange); }
.res-h3 { margin: 6px 0 0; font: 900 15px/1.2 var(--font); }


/* The parent's skill map (backlog B61, js/parentmap.js): the states' squares, the map in short, «Как дела у …»,
   the mosaic and a topic's skills, a skill's card */
.sq { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
.sq.done { background: var(--green-edge); }
.sq.given { background: #9BE0AE; }
.sq.learn { background: var(--sun); box-shadow: inset 0 0 0 1.5px #A87E00; }
.sq.ahead { background: var(--white); box-shadow: inset 0 0 0 1.5px #B5BFD3; }
.pm-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #EEF1F6; box-shadow: inset 0 0 0 2px var(--navy-line); }
.pm-bar i { display: block; height: 100%; }
.pm-bar .done { background: var(--green-edge); } .pm-bar .given { background: #9BE0AE; } .pm-bar .learn { background: var(--sun); }
.pm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font: 700 13px/1.3 var(--font); color: var(--navy-2); }
.pm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pm-go, .pm-all { flex: none; flex-direction: row; align-self: stretch; gap: 8px; background: var(--orange); }
.pm-go .set-chev, .pm-all .set-chev { stroke: currentColor; }
.pm-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--blue-edge); font: 800 15px/1.2 var(--font); cursor: pointer; }
.pm-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pm-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-head small { font: 800 13px/1.2 var(--font); color: var(--navy-2); }
.pm-head small:empty { display: none; }
.pm-flat { margin: 0; }
.pm-big { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pm-big b { font: 400 32px/1 var(--display); font-variant-numeric: tabular-nums; }
.pm-big span { font: 800 15px/1.25 var(--font); color: var(--navy-2); }
.pm-q { flex: none; border-radius: 28px; background: var(--white); box-shadow: 0 0 0 2.5px var(--navy-line); overflow: hidden; }
.pm-q summary { min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; list-style: none; cursor: pointer; font: 400 17px/1.25 var(--display); }
.pm-q summary::-webkit-details-marker { display: none; }
.pm-q summary .pm-chev { margin-inline-start: auto; }
.pm-chev { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.pm-q[open] summary .pm-chev { transform: rotate(180deg); }
.pm-qb { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; font: 700 15px/1.45 var(--font); }
.pm-qb p { margin: 0; }
.pm-muted { margin: 0; color: var(--navy-2); font: 700 13px/1.4 var(--font); }
.pm-item, .pm-pre { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 16px; background: var(--sky-pale); color: var(--navy); text-align: start; font: 800 14px/1.35 var(--font); cursor: pointer; }
.pm-item:active, .pm-pre:active, .pm-srow:active { background: var(--blue-soft); }
.pm-item > span, .pm-pre > span:last-child { flex: 1; min-width: 0; }
.pm-tag { flex: none; padding: 4px 8px; border-radius: 999px; white-space: nowrap; font: 800 12px/1.2 var(--font); }
.pm-tag.bad { background: var(--pink-soft); color: #A3214A; }
.pm-tag.mid, .pm-tag.learn { background: var(--sun-soft); color: #7A5A00; }
.pm-tag.ok, .pm-tag.done { background: var(--green-soft); color: #17783A; }
.pm-tag.next { background: var(--blue-soft); color: var(--blue-edge); }
.pm-tag.given, .pm-tag.ahead { background: #EEF1F6; color: var(--navy-2); }
.pm-tip { padding: 10px 12px; border-radius: 16px; background: var(--orange-soft); font: 700 14px/1.4 var(--font); }
.pm-tip b { font-weight: 900; }
.pm-all { width: 100%; }
.pm-mosaic { padding: 14px 10px; }
.pm-grid { display: grid; grid-template-columns: 84px repeat(5, minmax(0, 1fr)); gap: 4px; }
.pm-mh { padding: 6px 0; border-radius: 10px; text-align: center; font: 900 12px/1.2 var(--font); color: var(--navy-2); }
.pm-mh.kid { background: var(--blue); color: var(--white); }
.pm-ml { min-height: 44px; padding: 0 2px 0 0; border: 0; background: none; display: flex; align-items: center; text-align: start; font: 800 12px/1.25 var(--font); color: var(--navy); cursor: pointer; }
.pm-ml.on { color: var(--blue-edge); text-decoration: underline; text-underline-offset: 3px; }
.pm-cell { min-height: 44px; padding: 5px 4px; border: 0; border-radius: 10px; background: var(--sky-pale); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 3px; cursor: pointer; }
.pm-cell.kid { background: var(--blue-soft); }
.pm-cell.sel { background: var(--white); box-shadow: inset 0 0 0 3px var(--navy); }
.pm-cell.empty { background: transparent; cursor: default; }
.pm-grp { display: flex; flex-direction: column; gap: 6px; padding: 10px; margin: 0 -10px; border-radius: 22px; }
.pm-grp.sel { background: var(--blue-soft); }
.pm-gh { display: flex; align-items: center; gap: 8px; margin: 0 2px 2px; }
.pm-gn { font: 900 13px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.pm-kid { padding: 3px 8px; border-radius: 999px; background: var(--blue); color: var(--white); font: 900 11px/1.2 var(--font); }
.pm-gc { margin-inline-start: auto; font: 800 13px/1.2 var(--font); color: var(--navy-2); white-space: nowrap; }
.pm-srow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 14px; background: var(--sky-pale); color: var(--navy); text-align: start; font: 800 14px/1.3 var(--font); cursor: pointer; }
.pm-grp.sel .pm-srow { background: var(--white); }
.pm-srow.later { background: var(--white); box-shadow: inset 0 0 0 2px #EEF1F6; color: var(--navy-2); }
.pm-srow .sq { width: 14px; height: 14px; border-radius: 4px; }
.pm-srow > span { flex: 1; min-width: 0; }
.pay-sheet-card.pm-sheet { max-height: calc(100% - 48px); }
#skill-body { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.pm-card-h { display: flex; align-items: flex-start; gap: 12px; }
.pm-card-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-card-h h2 { margin: 0; font: 400 21px/1.2 var(--display); }
.pm-kicker { font: 900 12px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--navy-2); }
.pm-card-b { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; touch-action: pan-y; padding: 3px; margin: -3px; }
.pm-card-b .res-h3 { margin-top: 6px; }
.pm-state { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: var(--sky-pale); box-shadow: inset 0 0 0 2.5px var(--navy-line); }
.pm-state p { margin: 0; font: 700 14px/1.4 var(--font); }
.pm-state b { font: 900 16px/1.2 var(--font); }
.pm-state.learn { background: var(--sun-soft); box-shadow: inset 0 0 0 2.5px var(--sun-edge); }
.pm-state.done { background: var(--green-soft); box-shadow: inset 0 0 0 2.5px #9BDDAE; }
.pm-badge { padding: 4px 10px; border-radius: 999px; border: 2px solid var(--navy); font: 900 13px/1.2 var(--font); background: var(--white); }
.pm-badge.learn { background: var(--sun); } .pm-badge.done { background: var(--green-edge); color: var(--white); } .pm-badge.given { background: #9BE0AE; }
.pm-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-dots i { width: 22px; height: 22px; border-radius: 50%; display: block; }
.pm-dots .ok { background: var(--green); box-shadow: inset 0 0 0 2px var(--green-edge); }
.pm-dots .miss { background: var(--white); box-shadow: inset 0 0 0 2.5px var(--pink); }
.pm-dots .none { background: transparent; box-shadow: inset 0 0 0 2px var(--navy-line); }
.pm-mark { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--white); box-shadow: inset 0 0 0 2px #B5BFD3; color: var(--white); }
.pm-mark.done { background: var(--green-edge); box-shadow: none; } .pm-mark.given { background: #6CCB89; box-shadow: none; } .pm-mark.learn { background: var(--sun); box-shadow: none; }
.pm-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* The week's digest (js/digest.js): four story cards over the whole screen */
.dg-wrap { flex: 1; display: flex; }
.dg { position: relative; flex: 1; overflow: hidden; color: var(--navy); background: var(--blue-edge); }
.dg-0 { background: var(--blue-edge); color: var(--white); }
.dg-1 { background: var(--sun); } .dg-2 { background: var(--peach); } .dg-3 { background: var(--green); }
.dg-slide { position: absolute; inset: 0; padding: calc(84px + env(safe-area-inset-top, 0px)) 22px calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.dg-kick { font: 900 13px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.dg-big { margin: 0; font: 400 44px/1.05 var(--display); }
.dg-mid { margin: 0; font: 400 26px/1.15 var(--display); }
.dg-txt { margin: 0; font: 800 17px/1.45 var(--font); }
.dg-small { font-size: 14px; }
.dg-card { padding: 14px 16px; border-radius: 22px; background: var(--white); color: var(--navy); border: 3px solid var(--navy); box-shadow: 0 4px 0 var(--navy); font: 800 15px/1.4 var(--font); }
.dg-card b { font-weight: 900; }
.dg-end { margin-top: auto; }
.dg-num { font: 400 30px/1 var(--display); }
.dg-ex { text-align: center; font: 400 28px/1.2 var(--display); }
.dg-ex s { color: var(--hanko); }
.dg-rows { display: flex; flex-direction: column; gap: 8px; }
.dg-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 18px; background: var(--white); font: 800 14px/1.3 var(--font); }
.dg-bar { display: block; height: 10px; border-radius: 999px; background: #EEF1F6; overflow: hidden; }
.dg-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.dg-open { position: relative; z-index: 2; margin-top: auto; width: 100%; }
.dg-tap { position: absolute; top: 72px; bottom: 0; width: 50%; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 1; }
.dg-tap:disabled { cursor: default; }
.dg-prev { left: 0; }
.dg-next { right: 0; }
.dg-3 .dg-next { bottom: 120px; }
.dg-top { position: absolute; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 10px; z-index: 3; }
.dg-segs { display: flex; gap: 4px; }
.dg-segs i { flex: 1; height: 5px; border-radius: 3px; background: rgba(37, 42, 67, .25); }
.dg-segs i.on { background: var(--navy); }
.dg-0 .dg-segs i { background: rgba(255, 255, 255, .35); } .dg-0 .dg-segs i.on { background: var(--white); }
.dg-head { display: flex; align-items: center; gap: 10px; }
.dg-logo { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--orange); border: 2.5px solid var(--navy); display: grid; place-items: center; font: 400 15px/1 var(--display); color: var(--white); }
.dg-title { flex: 1; min-width: 0; font: 900 14px/1.2 var(--font); }
.dg-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.dg-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }