/* Kids Area replica — layout, sizes and colours measured from school.novakidschool.com (Nov 2026).
   Base canvas 616×320, scaled with CSS zoom exactly like the original (--zoom = viewport / base). */
@font-face { font-family: "Lilita One"; src: url("https://cdn.novakidschool.com/student-area/fonts/LilitaOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "St Transmission Bold"; src: local("StTransmission-Bold"), url("https://cdn.novakidschool.com/landing/static/fonts/st-transmission/StTransmission-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: Mikado; src: url("https://cdn.novakidschool.com/student-area/fonts/Mikado-Web-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Mikado; src: url("https://cdn.novakidschool.com/student-area/fonts/Mikado-Web-Bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }

html.ka, html.ka body { margin: 0; height: 100%; overflow: hidden; }
.ka-root {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: "Open Sans", sans-serif; color: #001E26;
  background-color: #73B2FF;
}
.ka-root.bg-dash { background: #73B2FF; }
.ka-root.bg-inner { background: #E3D1FF; }
.ka-root.bg-hw { background: #B4A1FF url("https://cdn.novakidschool.com/student-area/images/skill-exerciser/background.svg") center / cover no-repeat; }
.ka-cloud { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; pointer-events: none; }
.ka-cloud svg { width: 100%; height: 100%; display: block; }
.ka-stage { width: 616px; height: 320px; zoom: var(--zoom, 1); position: relative; flex: none; overflow: hidden; }
:where(.ka-stage) button { font: inherit; color: inherit; cursor: pointer; appearance: none; background: none; border: 0; padding: 0; position: relative; flex-shrink: 0; }
:where(.ka-stage) button:hover { filter: brightness(92%) contrast(110%); }
:where(.ka-stage) button:disabled { filter: contrast(55%) brightness(85%); pointer-events: none; }
:where(.ka-stage) img { display: block; }

/* text styles */
.t-primary { color: #fff; letter-spacing: .07em; font-family: "St Transmission Bold", "Lilita One", sans-serif; font-weight: 700; position: relative; z-index: 1; display: inline-flex; padding: .182em; line-height: 1.2; }
.t-primary::before { content: attr(data-text); position: absolute; inset: 0; padding: inherit; z-index: -1; -webkit-text-stroke: .25em #001E26; }
.t-lilita { font-family: "Lilita One", sans-serif; font-weight: 400; }
.t-mikado { font-family: Mikado, "Open Sans", sans-serif; font-weight: 800; letter-spacing: .5px; }

/* header */
.ka-header { height: 70px; padding: 0 12px; display: flex; align-items: center; position: relative; z-index: 5; box-sizing: border-box; }
.ka-lesson { display: flex; align-items: center; }
.ka-teacher { z-index: 1; box-sizing: border-box; width: 50px; height: 50px; padding: 2.5px; border-radius: 50%; background: #AB89FF; border: 1.5px solid #2C2A33; box-shadow: 0 2px 1px rgba(0,0,0,.25); }
.ka-teacher > div { height: 100%; border-radius: 50%; overflow: hidden; background: #2C2A33; border: 1px solid #2C2A33; box-sizing: border-box; }
.ka-teacher img { width: 110px; margin: 1px 0 0 -30px; }
.ka-teacher img.photo { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.ka-info { box-sizing: border-box; background: #fff; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; min-width: 160px; height: 44px; margin-left: -36px; padding: 0 11px 0 41px; text-align: left; }
.ka-info span { font-size: 16px; line-height: 1.2; }
.ka-icon-btn { margin-left: auto; }
.ka-icon-btn + .ka-icon-btn { margin-left: 10px; }
.ka-dq img { width: 48px; }
.ka-shop img { width: 44px; }
.ka-coins { display: flex; align-items: center; justify-content: center; min-width: 50px; margin-left: auto; position: relative; user-select: none; }
.ka-icon-btn + .ka-coins { margin-left: 10px; }
.ka-coins .star { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 1.18px 0 #000); width: 60px; }
.ka-coins .num { font-family: "Lilita One", sans-serif; font-size: 14px; position: relative; top: 2px; z-index: 1; }
.ka-coins .num::before { -webkit-text-stroke: .21em #001E26; }
.ka-profile { display: flex; flex-direction: row-reverse; align-items: center; margin-left: 10px; }
.ka-avatar { width: 48px; height: 48px; border-radius: 50%; background: #016B88; position: relative; box-shadow: 0 3px 1px rgba(0,0,0,.25); }
.ka-avatar::before { content: ""; position: absolute; inset: 0; border: 1.24px solid #001E26; border-radius: 50%; }
.ka-avatar .ch { position: absolute; top: 12.4%; left: 12.4%; width: 75.2%; height: 75.2%; border-radius: 50%; overflow: hidden; background: #001E26; }
.ka-avatar .ch img { position: absolute; max-width: none; width: 150%; height: auto; left: -40%; top: -14%; margin: 0; transform: none; }
.ka-nick { background: #fff; border-radius: 11px; height: 33px; display: flex; align-items: center; margin: 0 -40px 0 10px; padding: 1px 48px 0 11px; box-sizing: border-box; font-size: 15px; }

/* dashboard tiles */
.ka-tiles { box-sizing: border-box; height: 250px; gap: 10px; padding: 0 12px 9px; display: grid; }
.ka-tiles.g6 { grid-template-columns: 1.1fr .9fr .9fr 1.1fr; grid-template-areas: "tile1 tile3 tile4 tile5" "tile2 tile3 tile4 tile6"; }
.ka-tile { border-radius: 12px; transition: transform .25s; }
.ka-tile:hover { transform: scale(1.04); filter: none !important; }
.ka-tile .wr { border-radius: inherit; background: center / cover no-repeat; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 3px 0 #68A7F4; }
.ka-tile .iw { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; }
.ka-tile .iw img { width: 100%; }
.ka-tile .label { position: absolute; bottom: 7px; height: 23px; display: flex; align-items: center; justify-content: center; z-index: 1; box-sizing: border-box; color: #fff; }
.ka-tile .label span { font-family: "Lilita One", sans-serif; font-size: 16px; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.25); position: relative; top: .5px; white-space: nowrap; }
.ka-tile.l-right .label { right: 0; border-top-left-radius: 10px; padding: 0 12px; }
.ka-tile.l-left .label { left: 0; border-top-right-radius: 10px; padding: 0 12px; }
.ka-tile.l-full .label { left: 0; width: 100%; bottom: 27px; }
.ka-badge { position: absolute; z-index: 2; top: -8px; right: -28px; width: 80px; height: 40px; transform: rotate(45deg); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 3px; box-sizing: border-box; background: linear-gradient(#F66504, #EE7408); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ka-badge span { font-family: "St Transmission Bold", "Lilita One", sans-serif; font-weight: 700; color: #fff; font-size: 12px; letter-spacing: .07em; text-shadow: 0 2px 3px rgba(0,0,0,.25); }
.ka-tick { position: absolute; z-index: 2; top: 5px; left: 0; }
.ka-tick img { width: 27px; height: 27px; margin: 4px 0 0 7px; object-fit: contain; }
.album-tile .wr { background: linear-gradient(160deg, #2EC4B6 0%, #12A0A0 100%); }
.album-tile .wr::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 45%); }
.album-tile .iw { width: 112px; margin-top: -12px; z-index: 1; }
.album-tile .iw img { border-radius: 14px; mix-blend-mode: multiply; }
.album-tile .iw .card-bg { background: #fff; border-radius: 16px; padding: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.album-tile .label { background: #0E8C8C; }

/* inner page header (Games style) */
.ka-back { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,24,181,.3); border: 1.2px solid #000; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: .48px 1.06px 0 #000; }
.ka-back img { width: 40px; }
.ka-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 46px; z-index: 1; }
.ka-title svg.rb { display: block; filter: drop-shadow(0 5px 1px rgba(0,0,0,.25)); }
.ka-title span { position: absolute; top: 50%; left: 0; width: 100%; box-sizing: border-box; transform: translateY(-50%); text-align: center; justify-content: center; padding: 0 36px; margin-top: -2px; font-size: 18px; text-shadow: -1px 2px 3px rgba(0,0,0,.2); white-space: nowrap; }

/* board popup (beige frame) */
.ka-pop-wrap { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,15,40,.45); }
.ka-board { box-sizing: border-box; background: linear-gradient(#E6CBAB, #B49361); border: 2px solid #001E26; border-radius: 15px; padding: 3px; position: relative; box-shadow: 0 2px 1px rgba(0,0,0,.25); }
.ka-board .in { box-sizing: border-box; background: #FFF9D2; border: 6px solid #2FA7FF; border-radius: 13px; padding: 12px 18px 26px; text-align: center; box-shadow: 0 4px 4px rgba(0,0,0,.25); }
.ka-board .in .msg { font-family: "Open Sans", sans-serif; font-weight: 800; font-size: 13px; line-height: 1.25; }
.ka-board .in .sub { font-size: 10px; font-weight: 700; color: #3E5A63; margin-top: 4px; }
.ka-board .in img.pic { margin: 0 auto 6px; border-radius: 50%; border: 2px solid #001E26; object-fit: cover; }
.ka-btn { box-sizing: border-box; background: #B4F2D5; border-radius: 30px; min-width: 86px; padding: 4px; box-shadow: 0 2px 1px rgba(0,0,0,.25); }
.ka-btn .bi { border-radius: 30px; display: flex; align-items: center; justify-content: center; padding: 6px 22px; background: linear-gradient(#00D36E, #0C9855); position: relative; overflow: hidden; }
.ka-btn .bi::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: rgba(255,255,255,.12); }
.ka-btn .bi span { font-family: "St Transmission Bold", "Lilita One", sans-serif; font-weight: 700; color: #FFF1F1; font-size: 14px; letter-spacing: .07em; text-transform: uppercase; text-shadow: -1px 2px 3px rgba(0,0,0,.2); white-space: nowrap; position: relative; top: 1px; }
.ka-btn.gold { background: #FFE8A3; }
.ka-btn.gold .bi { background: linear-gradient(#FFC93C, #F09D00); }
.ka-btn.grey { background: #E6ECF0; }
.ka-btn.grey .bi { background: linear-gradient(#9AA9B2, #6F808A); }
.ka-board > .ka-btn { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); }
.ka-stage .ka-close { position: absolute; top: 0; left: 0; transform: translate(-45%, -40%); width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(#F95B5B, #DD0035); border: 2px solid #B49361; color: #590000; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 1px rgba(0,0,0,.25); }

/* album page */
.alb { position: absolute; left: 12px; right: 12px; top: 64px; bottom: 8px; }
.alb-meta { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 6px; font-size: 10px; font-weight: 800; color: #4B2E9E; }
.alb-meta .from { background: #fff; border-radius: 11px; padding: 3px 10px; box-shadow: 0 2px 0 rgba(0,0,0,.12); color: #001E26; }
.dots { display: inline-flex; gap: 3px; align-items: center; background: #fff; border-radius: 11px; padding: 3px 9px; box-shadow: 0 2px 0 rgba(0,0,0,.12); color: #001E26; }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.3px solid #001E26; background: #fff; display: inline-block; }
.dots i.on { background: #F5B700; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.acard { position: relative; box-sizing: border-box; height: 156px; border-radius: 14px; background: #fff; border: 2px solid #001E26; box-shadow: 0 3px 0 #001E26; padding: 6px 6px 5px; text-align: center; display: flex; flex-direction: column; }
.acard .pic { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.acard .pic img { max-height: 92px; max-width: 92px; mix-blend-mode: multiply; }
.acard .word { font-family: "Lilita One", sans-serif; font-size: 15px; line-height: 1; margin-top: 2px; }
.acard .phrase { font-size: 8.5px; font-weight: 800; color: #3E5A63; min-height: 22px; display: flex; align-items: center; justify-content: center; line-height: 1.15; }
.acard .state { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-family: "Lilita One", sans-serif; font-size: 8.5px; letter-spacing: .03em; padding: 1px 8px; border-radius: 10px; background: #001E26; color: #fff; white-space: nowrap; border: 1.3px solid #001E26; }
.acard .spk { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: #7BC8FF; border: 1.5px solid #001E26; font-size: 9px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1.5px 0 #001E26; }
.acard .gstar { position: absolute; top: 3px; right: 4px; width: 22px; filter: drop-shadow(0 1px 0 #000); }
.acard.s0 { background: rgba(255,255,255,.45); border: 2px dashed #6B54C4; box-shadow: none; }
.acard.s0 .pic img { filter: grayscale(1) contrast(.3) brightness(1.25); opacity: .5; }
.acard.s0 .word, .acard.s0 .phrase { color: #8E7BD6; }
.acard.s0 .state { background: #8E7BD6; border-color: #6B54C4; }
.acard.s1 .pic img { filter: grayscale(1) contrast(1.1); }
.acard.s1 .state { background: #6C7A80; }
.acard.s2 .state { background: #18A410; }
.acard.s3 { background: linear-gradient(#FFF3C4, #fff 55%); border-color: #8A6100; box-shadow: 0 3px 0 #8A6100, 0 0 0 3px #FFD84D; }
.acard.s3 .state { background: #F5B700; color: #001E26; border-color: #8A6100; }
.alb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 3px 9px; font-size: 8px; font-weight: 800; color: #4B2E9E; max-width: 290px; }
.legend span { display: inline-flex; align-items: center; gap: 3px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; border: 1.2px solid #001E26; display: inline-block; }
.when { display: flex; align-items: center; gap: 6px; background: #FFF9D2; border: 2px solid #F5B700; border-radius: 12px; padding: 4px 10px; font-size: 9.5px; font-weight: 800; }
.when img { width: 20px; }

/* activity (homework / skill-exerciser style) */
.hw-top { position: absolute; top: 8px; left: 9px; right: 9px; height: 30px; display: flex; align-items: center; }
.hw-back { width: 27px; height: 27px; border-radius: 50%; background: #A590F9; border: 1px solid #000; box-shadow: .5px 1px 0 #000, .5px 2.4px .5px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.hw-back img { width: 15px; }
.hw-bar { position: absolute; left: 88px; width: 432px; top: 13px; height: 17px; box-sizing: border-box; border: 1.4px solid #000; border-radius: 3px; background: linear-gradient(#022424, #096869); overflow: hidden; }
.hw-bar .fill { height: 100%; border-radius: 1.5px; background: linear-gradient(#DDFF0C -43%, #B3ED84 41%, #00E317 89%); transition: width .2s; }
.hw-star { position: absolute; left: 512px; top: 4px; width: 32px; }
.hw-kind { position: absolute; left: 88px; top: 33px; font-size: 8.5px; font-weight: 800; color: #3B2496; background: rgba(255,255,255,.55); border-radius: 8px; padding: 1px 7px; }
.hw-body { position: absolute; left: 16px; right: 16px; top: 52px; bottom: 50px; }
.hw-prompt { font-family: "Lilita One", sans-serif; font-size: 17px; text-align: center; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 1.5px 0 #3B2496, 0 0 6px rgba(59,36,150,.5); margin-bottom: 8px; }
.hw-speaker { display: flex; justify-content: center; margin-bottom: 10px; }
.hw-speaker button { width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 1.5px solid #000; box-shadow: .4px 2.2px 0 #000; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.hw-choices { display: flex; justify-content: center; gap: 14px; }
.hw-choice { width: 92px; height: 92px; border-radius: 7.5px; background: #fff; border: 1.5px solid #000; box-shadow: .43px 2.2px 0 #000, 0 4px 3px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; }
.hw-choice img { width: 80px; mix-blend-mode: multiply; }
.hw-choice.wrong { opacity: .45; border-color: #DD0035; box-shadow: .43px 2.2px 0 #DD0035; }
.hw-choice.right { background: #CCFF7A; box-shadow: .43px 2.2px 0 #000, 0 0 0 3px #00E317; }
.hw-choice.right img { mix-blend-mode: multiply; }
.hw-choice.hint { box-shadow: .43px 2.2px 0 #000, 0 0 0 3px #FFD84D; }
.hw-build { display: grid; grid-template-columns: 196px 1fr; gap: 14px; height: 100%; }
.hw-panel { border: 2.4px solid #000; border-radius: 7.5px; overflow: hidden; display: flex; flex-direction: column; background: #EEF7FF; }
.hw-panel .top { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.hw-panel .top img { height: 150px; mix-blend-mode: multiply; }
.hw-panel .bot { background: rgba(255,255,255,.55); padding: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; font-family: "Lilita One", sans-serif; font-size: 12px; }
.hw-panel .bot img { width: 22px; mix-blend-mode: multiply; }
.hw-sentence { min-height: 44px; border-radius: 7.5px; border: 1.5px dashed rgba(255,255,255,.9); background: rgba(255,255,255,.35); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; box-sizing: border-box; }
.hw-sentence .ph { color: #fff; font-weight: 800; font-size: 10px; padding-left: 4px; }
.hw-tiles { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; min-height: 36px; }
.wt { background: #fff; border: 1.5px solid #000; border-radius: 7px; box-shadow: .43px 2.2px 0 #000; padding: 4px 10px 3px; font-family: "Lilita One", sans-serif; font-size: 15px; }
.wt.used { visibility: hidden; }
.wt.in { background: #F0EAFF; }
.wt.hint { background: #FFE27A; }
.wt.bad { background: #FFD0D8; border-color: #DD0035; box-shadow: .43px 2.2px 0 #DD0035; }
.hw-fb { position: absolute; left: 16px; right: 290px; bottom: 10px; min-height: 30px; border-radius: 9px; padding: 5px 10px; box-sizing: border-box; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.hw-fb.ok { background: #E3FFD0; border: 1.5px solid #18A410; color: #0F6B0A; }
.hw-fb.no { background: #FFF1E8; border: 1.5px solid #E8590C; color: #A33C06; }
.ka-stage .hw-hint { position: absolute; right: 152px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; background: #FFE27A; border: 1px solid #000; box-shadow: .5px 1.5px 0 #000; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.hw-hint:disabled { opacity: .45; }
.ka-stage .hw-answer { position: absolute; right: 12px; bottom: 8px; width: 123px; height: 39px; border-radius: 3.4px; border: 1.4px solid #000; background: linear-gradient(#5AD65F, #1FA526); box-shadow: .5px 2px 0 #000; display: flex; align-items: center; justify-content: center; }
.hw-answer span { font-family: "Lilita One", sans-serif; font-size: 19px; color: #fff; letter-spacing: .02em; -webkit-text-stroke: .6px #0B5E10; text-shadow: 0 1.5px 0 #0B5E10; }
.hw-answer:disabled { background: #96E099; filter: none; }
.hw-answer:disabled span { color: #EEE; -webkit-text-stroke: 0; text-shadow: none; }
.hw-answer.next { background: linear-gradient(#FFC93C, #F09D00); }
.hw-answer.next span { -webkit-text-stroke: .6px #7A4D00; text-shadow: 0 1.5px 0 #7A4D00; }

/* summary / reward board content */
.ups { display: flex; justify-content: center; gap: 8px; margin: 8px 0 4px; }
.ups .acard { width: 74px; height: 98px; padding: 4px; }
.ups .acard .pic img { max-height: 52px; max-width: 52px; }
.ups .acard .word { font-size: 11px; }
.ups .acard .phrase { font-size: 6.5px; min-height: 14px; }
.plus { font-family: "Lilita One", sans-serif; font-size: 18px; color: #18A410; display: inline-flex; align-items: center; gap: 4px; }
.plus img { width: 22px; }
.reward-row { display: flex; gap: 12px; align-items: center; text-align: left; }
.reward-row img.rw { width: 120px; mix-blend-mode: multiply; }

/* toast */
.ka-toast { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); background: #001E26; color: #fff; padding: 8px 16px; border-radius: 30px; font: 800 13px "Open Sans", sans-serif; z-index: 100; max-width: calc(100% - 32px); text-align: center; }

/* ===== v3: album collection ===== */
.ka-stage .ka-help { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.5px solid #001E26; box-shadow: 0 2px 0 #001E26; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.alb3 { position: absolute; left: 10px; right: 10px; top: 64px; bottom: 6px; display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.gtabs { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 2px 2px 6px; }
.ka-stage .gtab { flex: none; height: 29px; border-radius: 9px; background: #fff; border: 1.5px solid #001E26; box-shadow: 0 2px 0 #001E26; display: grid; grid-template-columns: 18px 1fr; grid-template-rows: 1fr 4px; column-gap: 4px; align-items: center; padding: 2px 6px 3px 5px; text-align: left; box-sizing: border-box; }
.gtab .ic { grid-row: 1 / 3; font-size: 14px; line-height: 1; }
.gtab .nm { font-family: "Lilita One", sans-serif; font-size: 11px; line-height: 1; white-space: nowrap; }
.gtab .bar { height: 4px; border-radius: 3px; background: #E2DCF5; overflow: hidden; display: block; }
.gtab .bar i { display: block; height: 100%; background: linear-gradient(90deg, #18A410, #F5B700); }
.gtab .hot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #FF6A00; border: 1.5px solid #fff; }
.ka-stage .gtab.on { background: #FFE27A; }
.ka-stage .gtab.locked { background: rgba(255,255,255,.5); border-style: dashed; box-shadow: none; color: #6B54C4; grid-template-rows: 1fr; }
.gtab.locked .lk { position: absolute; right: 5px; font-size: 9px; }
.cards { overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 11px 7px; padding: 8px 8px 12px 4px; align-content: start; }

/* word card: level is shown by the look, not by text */
.wc { position: relative; height: 104px; border-radius: 10px; background: #fff; border: 2px solid #9AA4A9; box-shadow: 0 2px 0 #5E6B73; display: flex; flex-direction: column; align-items: center; padding: 3px 3px 4px; box-sizing: border-box; }
.ka-stage .wc .face { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.wc .pic { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; width: 100%; }
.wc .pic img { max-width: 58px; max-height: 54px; mix-blend-mode: multiply; }
.wc .pic .emo { font-size: 36px; line-height: 1; }
.wc .w { font-family: "Lilita One", sans-serif; font-size: 11px; line-height: 1; margin: 1px 0 3px; white-space: nowrap; }
.wc .pips { display: flex; gap: 1.5px; }
.wc .pips i { width: 8px; height: 8px; background: #D3D8DB; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 81% 100%, 50% 79%, 19% 100%, 29% 61%, 0 38%, 37% 35%); }
.wc .pips i.on { background: #F5B700; }
.wc.l0 { background: rgba(255,255,255,.45); border: 2px dashed #8E7BD6; box-shadow: none; }
.wc.l0 .pic img { filter: grayscale(1) brightness(1.6) contrast(.2); opacity: .45; }
.wc.l0 .pic .emo { filter: brightness(0); opacity: .16; }
.wc.l0 .w { color: #8E7BD6; }
.wc.l1 .pic img, .wc.l1 .pic .emo { filter: grayscale(1) contrast(1.1); }
.wc.l2 { border-color: #2FA7FF; box-shadow: 0 2px 0 #1A6FB0; }
.wc.l3 { background: linear-gradient(160deg, #FFFFFF 0%, #E4EAF0 45%, #BFCAD4 100%); border: 3px solid #8494A2; box-shadow: 0 2px 0 #4F5C66, inset 0 0 0 2px #fff; }
.wc.l4 { background: linear-gradient(#FFF6CF, #FFD95E); border: 2.5px solid #C08A00; box-shadow: 0 2px 0 #8A6100, inset 0 0 0 2px #FFF3B8; }
.wc.l5 { background: linear-gradient(140deg, #FFD3F4, #D1E9FF 35%, #D5FFD1 65%, #FFF1A8); border: 2.5px solid #6D3DE4; box-shadow: 0 2px 0 #3B2496, inset 0 0 0 2px #fff; }
.wc.l5 .pips i.on { background: #CF05C1; }
.wc .crown { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 0 #3B2496); }
.wc.l3 .pic img, .wc.l4 .pic img, .wc.l5 .pic img { mix-blend-mode: multiply; }
.wc.rec { outline: 3px solid #FF8A00; outline-offset: 1px; }
.ka-stage .wc .go { position: absolute; top: -8px; right: -8px; width: 25px; height: 25px; border-radius: 50%; border: 1.5px solid #001E26; box-shadow: 0 1.5px 0 #001E26; display: flex; align-items: center; justify-content: center; font-size: 13px; z-index: 2; overflow: hidden; }
.wc .go-bubbles { background: #FFD25A; }
.wc .go-pino { background: #FF9A5C; }
.wc .go-quiz { background: #5FD3F0; }
.wc .go-wait { background: #E3E8EC; font-size: 10px; }
.wc .go-wait b { position: absolute; right: 1px; bottom: -1px; font: 9px "Lilita One", sans-serif; color: #001E26; }
.wc .go-teacher { background: #AB89FF; padding: 0; }
.wc .go-teacher img { width: 100%; height: 100%; object-fit: cover; }
.wc.rec .go { box-shadow: 0 1.5px 0 #001E26, 0 0 0 2.5px #FF8A00; }
.wc.static { height: 84px; width: 62px; flex: none; }
.wc.static .pic img { max-width: 44px; max-height: 40px; }
.wc.static .pic .emo { font-size: 28px; }
.wc.static .w { font-size: 9.5px; }
.wc.static .pips i { width: 6.5px; height: 6.5px; }

/* popups / summary */
.mini-row { display: flex; gap: 6px; justify-content: center; margin: 12px 0 2px; flex-wrap: wrap; }
.mini-row.big .wc.static { height: 104px; width: 76px; }
.mini-row.big .wc.static .pic img { max-width: 58px; max-height: 54px; }
.mini-row.big .wc.static .pic .emo { font-size: 36px; }
.ka-stage .pop-spk { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1.5px solid #001E26; box-shadow: 0 1.5px 0 #001E26; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.sum-wrap { position: absolute; inset: 70px 0 0 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 6px; }
.sum-wrap .ka-board { min-width: 260px; }
.sum-wrap .in { padding: 12px 18px 28px; }
.emo-big { font-size: 48px; }

/* games menu (replica of Kids Area Games) */
.gm-grid { position: absolute; left: 14px; right: 14px; top: 72px; bottom: 14px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 12px 18px; }
.ka-stage .gm { border-radius: 9px; background: var(--b); box-shadow: 0 3px 0 rgba(0,0,0,.12); overflow: visible; display: flex; flex-direction: column; }
.gm .hd { background: var(--c); color: #fff; font-family: "St Transmission Bold", "Lilita One", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .08em; padding: 6px 0 5px; border-radius: 9px 9px 0 0; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.gm .art { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.gm .abc { display: flex; gap: 2px; }
.gm .abc i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: #E6FBFF; border: 1.5px solid #7FD6F0; display: flex; align-items: center; justify-content: center; font: 13px "Lilita One", sans-serif; color: #E5367A; }
.gm .abc i:nth-child(2) { color: #3C5BE0; margin-top: -10px; }
.gm .abc i:nth-child(3) { color: #18A0C9; }
.gm .alb-badge { position: absolute; top: -8px; right: -8px; display: flex; align-items: center; gap: 2px; background: #fff; border: 1.5px solid #001E26; border-radius: 12px; padding: 1px 6px 1px 2px; font: 12px "Lilita One", sans-serif; box-shadow: 0 1.5px 0 #001E26; }
.gm .alb-badge img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }

/* games */
.g-chip { position: absolute; left: 88px; top: 33px; font: 9px "Lilita One", sans-serif; letter-spacing: .03em; color: #fff; border-radius: 8px; padding: 2px 8px; }
.g-chip.g-bubbles { background: #E9B33D; }
.g-chip.g-pino { background: #E8590C; }
.g-chip.g-quiz { background: #2BB5D6; }
.bb-wrap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.ka-stage .big-spk { width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 1.5px solid #000; box-shadow: .4px 2.2px 0 #000; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.bubbles { display: flex; gap: 22px; }
.ka-stage .bubble { width: 94px; height: 94px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 12%, rgba(230,250,255,.95) 30%, rgba(170,225,255,.9) 100%); border: 2.5px solid #6BC7F2; box-shadow: 0 3px 0 rgba(30,90,140,.35); display: flex; align-items: center; justify-content: center; }
.bubble img { width: 60px; mix-blend-mode: multiply; border-radius: 50%; }
.bubble .emo { font-size: 44px; }
.ka-stage .bubble.wrong { opacity: .3; }
.ka-stage .bubble.right { border-color: #00C814; box-shadow: 0 0 0 4px #9CF29F, 0 3px 0 rgba(30,90,140,.35); background: radial-gradient(circle at 32% 28%, #fff 0 12%, #E8FFE0 40%, #B9F5A8 100%); }
.ka-stage .bubble.hint { box-shadow: 0 0 0 4px #FFD84D, 0 3px 0 rgba(30,90,140,.35); }
.sp-wrap { height: 100%; display: grid; grid-template-columns: 150px 170px 120px; gap: 26px; align-items: center; justify-content: center; }
.sp-wrap .host { width: 150px; justify-self: center; }
.quiz-host { height: 120px; border-radius: 16px; background: #A4E6F4; border: 2px solid #001E26; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 40px; line-height: 1; box-shadow: 0 3px 0 #001E26; }
.sp-card { height: 170px; border-radius: 14px; background: #fff; border: 2.5px solid #000; box-shadow: .5px 3px 0 #000; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.sp-card img { width: 120px; mix-blend-mode: multiply; }
.sp-card .emo { font-size: 84px; }
.sp-card .sp-w { font: 20px "Lilita One", sans-serif; margin-top: 4px; }
.sp-card.right { background: #E3FFD0; box-shadow: .5px 3px 0 #000, 0 0 0 4px #00E317; }
.sp-card.right img { mix-blend-mode: multiply; }
.sp-card.fail { background: #FFF1E8; }
.sp-mic { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ka-stage .mic { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(#FF8A5C, #E8590C); border: 2px solid #000; box-shadow: 0 3px 0 #000; font-size: 36px; display: flex; align-items: center; justify-content: center; }
.ka-stage .mic.on { background: linear-gradient(#5AD65F, #1FA526); box-shadow: 0 3px 0 #000, 0 0 0 6px rgba(90,214,95,.45); }
.demo-say { display: flex; align-items: center; gap: 5px; border: 1.5px dashed #fff; border-radius: 10px; padding: 3px 6px; background: rgba(0,30,38,.55); }
.demo-say span { color: #fff; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.ka-stage .demo-say button { width: 26px; height: 26px; border-radius: 7px; background: #fff; border: 1px solid #000; font-weight: 900; font-size: 13px; }
.g-fb { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; border-radius: 20px; padding: 5px 16px; font: 16px "Lilita One", sans-serif; display: flex; align-items: center; gap: 5px; border: 2px solid; }
.g-fb.ok { background: #E3FFD0; border-color: #18A410; color: #0F6B0A; }
.g-fb.no { background: #FFF1E8; border-color: #E8590C; color: #A33C06; }
.g-fb img { width: 18px; }
.g-fb .lvup { background: #F5B700; color: #fff; border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.ka-stage .hw-hint { right: 16px; }

/* ===== v4 ===== */
.ka-stage .gtab { height: 27px; }
.gtab .nm { font-size: 10px; }
.gtab .dz { position: absolute; top: -5px; right: -4px; font-size: 10px; }
.ka-stage .wc .go { background: var(--gc, #FFD25A); font-size: 12px; }
.ka-stage .wc .go img { width: 115%; height: 115%; object-fit: cover; object-position: top; }
.ka-stage .wc .go-review { background: #2BB5D6; }
.wc .spk { position: absolute; left: 3px; bottom: 15px; font-size: 8px; opacity: .75; background: #fff; border-radius: 50%; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; border: 1px solid #C9D3DC; }
.wc.dusty { filter: saturate(.25) brightness(.93); }
.wc.dusty::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; background: radial-gradient(circle at 20% 30%, rgba(140,120,90,.25) 0 6%, transparent 7%), radial-gradient(circle at 70% 60%, rgba(140,120,90,.22) 0 5%, transparent 6%), radial-gradient(circle at 40% 80%, rgba(140,120,90,.2) 0 4%, transparent 5%), linear-gradient(rgba(190,175,150,.25), rgba(190,175,150,.25)); }
.wc.dusty .go { filter: none; }
.sum-res { font-size: 34px; line-height: 1; }

/* Memo Mix */
.memo { height: 100%; display: grid; grid-template-columns: repeat(4, 92px); grid-template-rows: repeat(2, 92px); gap: 12px 16px; justify-content: center; align-content: center; }
.ka-stage .mc { width: 92px; height: 92px; overflow: hidden; box-sizing: border-box; border-radius: 12px; border: 2px solid #000; box-shadow: .5px 3px 0 #000; background: linear-gradient(135deg, #B57BE8, #7B49D6); display: flex; align-items: center; justify-content: center; }
.mc .back { color: #FFE27A; font-size: 34px; font-family: "Lilita One", sans-serif; text-shadow: 0 2px 0 #4B2496; }
.ka-stage .mc.up { background: #fff; }
.mc .emo { font-size: 52px; }
.mc .snd { font-size: 40px; }
.ka-stage .mc.ok { background: #E3FFD0; border-color: #18A410; box-shadow: .5px 3px 0 #0F6B0A, 0 0 0 3px #9CF29F; }

/* Box Battle */
.bx-wrap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2px 0 4px; }
.bx-score { display: flex; align-items: center; gap: 10px; font: 13px "Lilita One", sans-serif; color: #fff; background: rgba(0,30,38,.45); border-radius: 14px; padding: 4px 12px; position: relative; }
.bx-score b { background: #fff; color: #001E26; border-radius: 8px; padding: 0 6px; margin-left: 3px; }
.bx-score .vs { background: #E5364A; border-radius: 6px; padding: 0 6px; }
.bot-bar { width: 70px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.35); overflow: hidden; display: inline-block; }
.bot-bar i { display: block; height: 100%; background: #FF7A59; }
.ka-stage .bx-card { width: 74px; height: 74px; border-radius: 12px; background: #fff; border: 2px solid #000; box-shadow: .5px 3px 0 #000; font-size: 34px; display: flex; align-items: center; justify-content: center; cursor: grab; }
.bx-card.result { font-size: 46px; }
.bx-boxes { display: flex; gap: 22px; }
.ka-stage .bx { width: 128px; height: 92px; border-radius: 6px 6px 12px 12px; background: linear-gradient(#F2C98E, #D9A15C); border: 2px solid #6B4A1F; box-shadow: 0 3px 0 #6B4A1F, inset 0 10px 0 rgba(255,255,255,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.bx .emo { font-size: 44px; }
.bx .cnt { font-size: 10px; color: #18A410; letter-spacing: 2px; height: 12px; }
.ka-stage .bx.bad { border-color: #DD0035; box-shadow: 0 3px 0 #DD0035, 0 0 0 3px #FFB3C0; }

/* Bubbles (word bubbles describe the picture) */
.bub-wrap { height: 100%; display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; padding: 0 20px; }
.sp-card.small { height: 150px; }
.bubbles2 { position: relative; height: 200px; }
.ka-stage .bub { position: absolute; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 12%, rgba(230,250,255,.95) 32%, rgba(165,222,255,.92) 100%); border: 2.5px solid #6BC7F2; box-shadow: 0 3px 0 rgba(30,90,140,.35); font: 15px "Lilita One", sans-serif; color: #1C3E8A; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; box-sizing: border-box; line-height: 1.05; }
.bub.b0 { left: 0; top: 0; } .bub.b1 { left: 112px; top: 12px; } .bub.b2 { left: 226px; top: -4px; } .bub.b3 { left: 56px; top: 104px; } .bub.b4 { left: 172px; top: 108px; }
.ka-stage .bub.bad { background: radial-gradient(circle at 32% 28%, #fff 0 12%, #FFD7DD 40%, #FF8FA2 100%); border-color: #DD0035; color: #8A0020; }
.ka-stage .bub.ok { background: radial-gradient(circle at 32% 28%, #fff 0 12%, #E3FFD0 40%, #8FE07E 100%); border-color: #18A410; color: #0F6B0A; }

/* Racing (catch the letters) */
.rc-wrap { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 0 30px; }
.rc-top { display: flex; align-items: center; gap: 14px; }
.rc-top .sp-card.small { width: 86px; height: 86px; }
.rc-top .sp-card.small .emo { font-size: 52px; }
.rc-slots { display: flex; gap: 5px; flex-wrap: wrap; }
.rc-slots .sl { width: 30px; height: 38px; border-radius: 7px; background: rgba(255,255,255,.55); border: 2px dashed #fff; font: 24px "Lilita One", sans-serif; display: flex; align-items: center; justify-content: center; }
.rc-slots .sl.f { background: #fff; border: 2px solid #000; }
.rc-slots .gap { width: 12px; }
.rc-track { position: relative; height: 26px; border-radius: 13px; background: repeating-linear-gradient(90deg, #4A4F5C 0 18px, #3A3E49 18px 36px); border: 2px solid #000; }
.rc-track .ship { position: absolute; top: -6px; font-size: 26px; transform: rotate(45deg); }
.rc-track .flag { position: absolute; right: 6px; top: -1px; font-size: 20px; }
.rc-lanes { display: flex; gap: 18px; justify-content: center; }
.ka-stage .lane { width: 72px; height: 60px; border-radius: 12px; background: #fff; border: 2px solid #000; box-shadow: .5px 3px 0 #000; font: 32px "Lilita One", sans-serif; }
.ka-stage .lane.bad { background: #FFD7DD; border-color: #DD0035; }
.ka-stage .lane.hint { box-shadow: .5px 3px 0 #000, 0 0 0 4px #FFD84D; }
.mini-t { font: 9px "Lilita One", sans-serif; color: #fff; letter-spacing: -.02em; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.mini-t b { font-size: 12px; text-shadow: none; }

/* ===== v5: replicas of the Kids Area games (art from school.novakidschool.com/games, 616×320 base like the originals) ===== */
.ka-root.bg-g-quiz, .ka-root.bg-g-memo, .ka-root.bg-g-boxes { background: #6FC9F2 url("https://school.novakidschool.com/games/quiz/assets/background.3350a184.svg") center / cover no-repeat; }
.ka-root.bg-g-bubbles { background: #8ED9F7 url("https://school.novakidschool.com/games/bubbles/assets/img/bubbles_background.svg") center / cover no-repeat; }
.ka-root.bg-g-racing { background: #F6C55C; }
.ka-root.bg-g-snake { background: #22213F url("https://school.novakidschool.com/games/snake/assets/background.ece45b59.svg") center / cover no-repeat; }
.gscene { position: absolute; inset: 0; pointer-events: none; }
.gscene.race { background: url("https://school.novakidschool.com/games/racing/assets/sky.4926bbde.png") center / 100% 100%; overflow: hidden; }
.gscene.race .clouds { position: absolute; left: 0; right: 0; top: 30px; height: 62px; background: url("https://school.novakidschool.com/games/racing/assets/clouds_cropped_0.5.f9bbe10e.png") 0 0 / auto 100% repeat-x; }
.gscene.race .trees { position: absolute; left: 0; right: 0; top: 70px; height: 190px; background: url("https://school.novakidschool.com/games/racing/assets/trees_1024.d612d7c9.png") 0 0 / 360px auto repeat-x; }
.gscene.race .tower { position: absolute; right: -30px; top: -10px; height: 250px; }
.ka-stage .gi { position: absolute; display: flex; align-items: center; justify-content: center; z-index: 3; }
.ka-stage .gi img { width: 100%; height: 100%; object-fit: contain; }
.ka-stage .gi.help { left: 14px; top: 27px; width: 30px; height: 30px; }
.ka-stage .gi.flag { right: 22px; top: 22px; width: 34px; height: 36px; }
.ka-stage .gi.qexit { right: 40px; top: 30px; width: 30px; height: 30px; }
.ka-stage .gi.lis { width: 24px; height: 25px; }
.gclock { position: absolute; left: 60px; top: 26px; width: 32px; height: 32px; border-radius: 50%; background: #0D3B4E; border: 2.5px solid #fff; box-shadow: 0 2px 2px rgba(0,0,0,.25); color: #fff; font: 10px "Lilita One", sans-serif; display: flex; align-items: center; justify-content: center; z-index: 3; }
/* player widgets */
.pw { position: absolute; top: 96px; width: 100px; z-index: 2; }
.pw.me { left: 0; } .pw.enemy { right: 0; }
.pw .av { position: absolute; top: 0; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; border: 2px solid #0B4F63; box-shadow: 0 0 0 2px #2FB7D8; }
.pw.me .av { left: 12px; } .pw.enemy .av { right: 12px; }
.pw .av .bgc { position: absolute; inset: 0; width: 100%; height: 100%; }
.pw .av .ch { position: absolute; left: -12%; top: 4%; width: 125%; }
.pw.enemy .av .ch { left: 0; top: 2%; width: 100%; }
.pw .lbl { position: absolute; top: 76px; width: 98px; height: 26px; }
.pw.me .lbl { left: 0; } .pw.enemy .lbl { right: 0; }
.pw .lbl img { width: 100%; height: 100%; }
.pw .lbl span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 11px "Open Sans", sans-serif; color: #0D3B4E; }
.pw.enemy .lbl span { color: #fff; }
.pw .tr { position: absolute; top: 108px; display: flex; align-items: center; gap: 4px; font: 15px "Lilita One", sans-serif; color: #fff; text-shadow: 0 1px 0 #0D3B4E; }
.pw.me .tr { left: 22px; } .pw.enemy .tr { right: 22px; }
.pw .tr img { width: 20px; }
.pw.turn::before { content: ""; position: absolute; top: 102px; width: 96px; height: 130px; background: #F9C94C; z-index: -1; }
.pw.me.turn::before { left: 0; } .pw.enemy.turn::before { right: 0; }
.pw .turnclock { position: absolute; top: 150px; width: 36px; height: 36px; border-radius: 50%; background: #0D3B4E; border: 2.5px solid #fff; color: #fff; font: 11px "Lilita One", sans-serif; display: flex; align-items: center; justify-content: center; }
.pw.me .turnclock { left: 32px; } .pw.enemy .turnclock { right: 32px; }
.ka-stage .boxes-hide { display: none; }
/* quiz */
.qz-rib { position: absolute; left: 232px; top: 24px; width: 152px; height: 42px; display: flex; align-items: center; justify-content: center; }
.qz-rib img { position: absolute; inset: 0; width: 100%; height: 100%; }
.qz-line { position: absolute; left: 106px; top: 77px; width: 404px; height: 4px; background: #0D3B4E; border-radius: 2px; }
.qz-q { position: absolute; left: 106px; top: 96px; width: 404px; height: 100px; display: flex; align-items: center; justify-content: center; }
.qz-q .t, .qz-o .t, .mm-c .t, .bx-card .t, .bb-mis .t, .bb-en .t, .rc-p .t { position: absolute; inset: 0; width: 100%; height: 100%; }
.qz-q .emo { position: relative; font-size: 62px; }
.ka-stage .qz-o { position: absolute; top: 207px; width: 126px; height: 99px; display: flex; align-items: center; justify-content: center; }
.qz-o span { position: relative; font: 800 15px "Open Sans", sans-serif; color: #0D3B4E; padding: 0 6px; text-align: center; }
.ka-stage .qz-o:disabled { filter: none; }
/* memo */
.mm-rib { position: absolute; left: 194px; top: 18px; width: 228px; height: 41px; display: flex; align-items: center; justify-content: center; }
.mm-rib img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ka-stage .mm-c { position: absolute; width: 64px; height: 50px; display: flex; align-items: center; justify-content: center; }
.mm-c .emo { position: relative; font-size: 30px; }
.mm-c .w { position: relative; font: 800 10.5px "Open Sans", sans-serif; color: #0D3B4E; }
.ka-stage .mm-c.ok { filter: drop-shadow(0 0 3px #3BD16F); }
.mm-hint { position: absolute; left: 0; right: 0; top: 66px; display: flex; justify-content: center; }
/* box battle */
.bx-lab { position: absolute; top: 74px; width: 109px; display: flex; justify-content: center; white-space: nowrap; }
.ka-stage .bx-chest { position: absolute; top: 108px; width: 109px; height: 67px; }
.bx-chest img { width: 100%; height: 100%; }
.ka-stage .bx-chest.ok { filter: drop-shadow(0 0 5px #2EE86A) drop-shadow(0 0 2px #2EE86A); }
.ka-stage .bx-chest.bad { filter: drop-shadow(0 0 5px #FF3B5B) drop-shadow(0 0 2px #FF3B5B); }
.ka-stage .gi.chest-lis { top: 146px; }
.bx-deck { position: absolute; left: 0; top: 207px; width: 340px; height: 100px; }
.bx-card { position: absolute; top: 0; width: 118px; height: 91px; display: flex; align-items: center; justify-content: center; touch-action: none; }
.bx-card .emo { position: relative; font-size: 50px; }
.bx-card.top { cursor: grab; z-index: 2; }
.bx-card.dragging { z-index: 20; cursor: grabbing; }
.ka-stage .gi.card-lis { right: 6px; top: 33px; }
.bx-slot { position: absolute; width: 45px; height: 43px; }
.bx-slot img { width: 100%; height: 100%; }
.bx-slot .emo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.g-result, .sum-ban { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 214px; height: 54px; display: flex; align-items: center; justify-content: center; z-index: 10; }
.g-result img, .sum-ban img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sum-ban { position: relative; left: auto; top: auto; transform: none; margin: 0 auto 4px; }
/* bubbles */
.ka-stage .bb-hint { position: absolute; left: 112px; top: 30px; width: 51px; height: 26px; display: flex; align-items: center; justify-content: center; z-index: 3; }
.bb-hint img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bb-hint span { position: relative; font: 700 10px "St Transmission Bold", "Lilita One", sans-serif; color: #fff; letter-spacing: .05em; }
.bb-mis { position: absolute; left: 232px; top: 4px; width: 152px; height: 93px; display: flex; align-items: center; justify-content: center; }
.bb-mis .emo { position: relative; font-size: 54px; }
.ka-stage .gi.mis-lis { right: 6px; bottom: 6px; }
.bb-en { position: absolute; left: 445px; top: 4px; width: 160px; height: 95px; }
.bb-en .mini { position: absolute; left: 30px; top: 34px; width: 100px; display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.bb-en .mini img { width: 18px; height: 18px; }
.bb-en .en-name { position: absolute; right: 2px; top: 2px; display: flex; align-items: center; gap: 3px; background: #0E6C8E; border-radius: 10px; padding: 1px 2px 1px 6px; font: 9px "Lilita One", sans-serif; color: #fff; }
.bb-en .en-name img { width: 12px; } .bb-en .en-name .ea { width: 18px; height: 18px; border-radius: 50%; background: #0B4F63; object-fit: cover; }
.ka-stage .bub-b { position: absolute; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.bub-b img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bub-b span { position: relative; font: 700 15px "Open Sans", sans-serif; color: #0D3B4E; }
.bb-bar { position: absolute; left: 76px; top: 278px; width: 464px; height: 37px; display: flex; align-items: center; justify-content: center; }
.bb-bar img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bb-bar span { position: relative; font: 800 20px "Open Sans", sans-serif; color: #fff; letter-spacing: .04em; }
.ka-root.bg-g-bubbles .pw { top: 100px; }
.ka-root.bg-g-bubbles .gi.flag { top: 116px; right: 14px; }
/* racing */
.ship { position: absolute; width: 96px; height: 38px; background: url("https://school.novakidschool.com/games/racing/assets/spaceship.4f132245.png") 0 0 / 200% 600% no-repeat; transition: left .45s ease, top .45s ease; z-index: 2; }
.ka-stage .star { position: absolute; width: 44px; height: 38px; display: flex; align-items: center; justify-content: center; }
.star i { position: absolute; inset: 0; background: url("https://school.novakidschool.com/games/racing/assets/star_yellow.c2b45e9f.png") 0 0 / 500% 300% no-repeat; }
.star span { position: relative; top: 2px; font: 700 13px "Open Sans", sans-serif; color: #6D3DE4; }
.ka-stage .star.bad { opacity: .45; filter: grayscale(.8); }
.ka-stage .star.got { filter: drop-shadow(0 0 6px #fff) brightness(1.15); }
.rc-p { position: absolute; top: 253px; width: 247px; height: 60px; display: flex; align-items: center; }
.rc-p.left { left: 24px; } .rc-p.right { left: 293px; justify-content: center; }
.ka-stage .gi.rc-lis { position: relative; margin-left: 12px; width: 30px; height: 31px; }
.rc-p .pic { position: relative; margin-left: 8px; width: 52px; height: 52px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #F49AC1; }
.rc-p .pic .emo { font-size: 32px; }
.rc-p .w { position: relative; margin-left: 16px; font: 700 18px "Open Sans", sans-serif; color: #fff; letter-spacing: .04em; }
.rc-p .w.ans { margin: 0; font-size: 22px; }
.rc-p .sym { position: absolute; right: -6px; top: -8px; width: 20px; height: 20px; }
.ka-stage .gi.rc-flag { top: auto; bottom: 30px; right: 14px; width: 30px; height: 32px; }
/* snake */
.gscene.snake { background: transparent; }
.gclock.sn { left: 14px; top: 14px; width: 36px; height: 36px; background: #2E7FD6; }
.sn-av { position: absolute; left: 10px; top: 92px; width: 44px; text-align: center; }
.sn-av .bgc { position: absolute; left: 0; top: 0; width: 44px; height: 44px; }
.sn-av .ch { position: relative; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 30% 50%; border: 2px solid #2FB7D8; box-sizing: border-box; }
.sn-av b { position: absolute; left: 40px; top: -2px; display: flex; align-items: center; gap: 2px; font: 11px "Lilita One", sans-serif; color: #fff; }
.sn-av b img { width: 14px; }
.sn-av span { display: block; font: 9px "Lilita One", sans-serif; color: #fff; margin-top: 2px; }
.sn-word { position: absolute; left: 187px; top: 8px; width: 240px; height: 40px; border-radius: 4px; background: rgba(255,255,255,.72); display: flex; align-items: center; gap: 8px; padding: 0 8px; box-sizing: border-box; }
.sn-word .emo { font-size: 28px; }
.sn-word .w { flex: 1; font: 700 18px "Open Sans", sans-serif; color: #1E1D3A; text-align: center; }
.ka-stage .gi.sn-lis { position: relative; }
.sn-board { position: absolute; left: 58px; top: 56px; width: 506px; height: 230px; border: 2px solid #fff; border-radius: 3px; }
.sn-field { position: absolute; inset: 0; }
.sn-field i, .sn-field b { position: absolute; width: 23px; height: 23px; }
.sn-field .sh { background: url("https://school.novakidschool.com/games/snake/assets/snake.87cfe96d.png") 0 0 / 300% 100% no-repeat; z-index: 2; transform-origin: 50% 50%; scale: 1.5; }
.sn-field .sb { background: url("https://school.novakidschool.com/games/snake/assets/snake_body.6969d3ab.png") center / 100% 100%; }
.sn-field .st { background: url("https://school.novakidschool.com/games/snake/assets/snake_tail1.df374619.png") center / 100% 100%; }
.sn-field .egg { background: url("https://school.novakidschool.com/games/snake/assets/eggs.8c647ee5.png") 0 0 / 300% 100% no-repeat; display: flex; align-items: center; justify-content: center; font: 700 12px "Open Sans", sans-serif; color: #1E1D3A; }
.sn-field .egg.e1 { background-position: 50% 0; } .sn-field .egg.e2 { background-position: 100% 0; }
.sn-pad { position: absolute; left: 6px; bottom: 8px; width: 46px; display: grid; grid-template-columns: repeat(3, 15px); grid-template-rows: repeat(3, 15px); gap: 1px; }
.ka-stage .sn-pad button { background: rgba(255,255,255,.18); border-radius: 3px; color: #fff; font-size: 8px; }
.sn-pad [data-dir="U"] { grid-column: 2; grid-row: 1; } .sn-pad [data-dir="L"] { grid-column: 1; grid-row: 2; } .sn-pad [data-dir="D"] { grid-column: 2; grid-row: 3; } .sn-pad [data-dir="R"] { grid-column: 3; grid-row: 2; }
.ka-stage .gi.sn-flag { top: 10px; right: 10px; width: 30px; height: 32px; }
/* games menu: real icons */
.gm .art img { height: 44px; }
.gm .art .emo { font-size: 34px; }
.qz-ic b { font-size: 30px; } .qz-ic b:first-child { color: #22C55E; } .qz-ic b:last-child { color: #EF4444; }
.ka-stage .gm { background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,.18) 34px 52px, transparent 52px 80px), var(--b); }
.ka-root.bg-g-boxes .pw .tr { top: -14px; }
.ka-root.bg-g-boxes .pw.me .tr { left: 80px; } .ka-root.bg-g-boxes .pw.enemy .tr { right: 80px; }
.pw .av .ch { left: -22%; top: 8%; width: 140%; }
.pw.enemy .av .ch { left: 0; top: 2%; width: 100%; }
.gscene.snake { background: rgba(24, 22, 52, .74); }
.sn-board { left: 52px; top: 62px; width: 520px; height: 208px; }
.sn-field i, .sn-field b { width: 26px; height: 26px; }
.sn-field .egg { font-size: 13px; }
.gscene.race .tower { height: 210px; }

/* ===== v6 ===== */
/* racing: parallax background + stars flying towards the ship (transform-only, GPU) */
.gscene.race .clouds { width: 200%; animation: rc-scroll 60s linear infinite; }
.gscene.race .trees { width: 200%; animation: rc-scroll 16s linear infinite; }
@keyframes rc-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.ship { left: 12px; transition: top .18s ease-out; animation: ship-bob 1.2s ease-in-out infinite; }
@keyframes ship-bob { 50% { margin-top: 2px; } }
.race-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.race-layer .star { position: absolute; left: 0; top: 0; width: 44px; height: 38px; display: flex; align-items: center; justify-content: center; will-change: transform; }
.race-layer .star.bad { opacity: .5; filter: grayscale(.9); }
.race-layer .star.bad i { background-image: url("https://school.novakidschool.com/games/racing/assets/star_blue.dda716e6.png"); background-size: 500% 300%; }
.rc-arrows { position: absolute; left: 112px; top: 200px; display: flex; gap: 6px; z-index: 3; }
.ka-stage .rc-arrows button { width: 30px; height: 30px; border-radius: 50%; background: rgba(13,59,78,.6); border: 2px solid #fff; color: #fff; font-size: 12px; }
.rc-p .w.ans { display: flex; gap: 10px; }
.rc-p .w.ans b { min-width: 12px; text-align: center; }
.rc-p .w.ans b.bad { color: #FF6B81; } .rc-p .w.ans b.ok { color: #6CF08F; }
/* box battle: topic labels */
.bx-lab .t-primary { text-transform: lowercase; }
/* summary: fits the 320px stage */
.sum-wrap { inset: 58px 0 0 0; padding-top: 0; }
.sum-wrap .in { padding: 8px 16px 24px; }
.sum-ban { width: 170px; height: 38px; margin-bottom: 2px; }
.mini-row.big { margin: 4px 0 0; }
.mini-row.big .wc.static { height: 92px; width: 70px; }
.mini-row.big .wc.static .pic .emo { font-size: 30px; }
.sum-wrap .plus { margin-top: 2px; }
.bx-slot img { display: none; }
.bx-slot { background: #FBE8C4; border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(150,110,60,.15); }
/* album tile: Gemini illustration as the tile background, like Streams / Games */
.album-tile .wr { background-color: #5FCFC4; background-size: cover; background-position: center 30%; }
.album-tile .wr::after { display: none; }
.album-tile .label { background: #0E9C94; }