/* "Je comprends" lessons and arcade mini-games */
.arc-svg { direction: ltr; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; touch-action: manipulation; }

/* ---- picture lesson ---- */
.lsn { width: 100%; box-sizing: border-box; background: rgba(255, 250, 240, .9); border-radius: 30px; padding: clamp(10px, 1.6cqw, 18px); box-shadow: 0 10px 30px rgba(39, 56, 95, .14); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.lsn-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.lsn-badge { background: #f6c64e; color: #5a3d0a; font: 900 1.05rem var(--f-body); padding: 6px 16px; border-radius: 999px; box-shadow: 0 4px 0 #d8a63a; }
.lsn-dots { display: flex; gap: 6px; }
.lsn-dots i { width: 14px; height: 14px; border-radius: 50%; background: #e8d9bf; }
.lsn-dots i.cur { background: #e0708f; transform: scale(1.25); }
.lsn-dots i.ok { background: #2e9d7d; }
.lsn-art { position: relative; width: 100%; aspect-ratio: 1000 / 560; border-radius: 22px; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7); }
.lsn-cap { min-height: 3.2rem; display: flex; align-items: center; justify-content: center; text-align: center; }
.lsn-cap.bump { animation: bump .45s; }
.lsn-go { animation: popIn .4s, glowPulse 1.6s .4s infinite; }
@keyframes glowPulse { 50% { box-shadow: 0 0 0 10px rgba(46, 157, 125, .25), 0 6px 0 #1f7a5f; } }
.eq { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font: 900 clamp(1.15rem, 2.8cqw, 2rem) var(--f-body); color: #27385f; background: #fff; border-radius: 22px; padding: 8px 20px; box-shadow: 0 6px 16px rgba(39, 56, 95, .12); }
.eq b { color: #e0708f; }
.eq .hl, .eq b .hl { color: #fff; background: #4f8fd8; border-radius: 8px; padding: 0 6px; }
.eq .ghost { opacity: .25; }
.mini50 { display: inline-flex; align-items: flex-end; justify-content: center; width: 1.7em; height: 2em; font-size: .55em; font-weight: 900; color: #2f5f8a; background: linear-gradient(transparent 30%, #fffaf0 30%); border: 3px solid #8fb8d8; border-top: 0; border-radius: 0 0 10px 10px; padding-bottom: 2px; }
.grp { background: #fff3e4; border: 3px solid #9a5a36; border-radius: 14px; padding: 0 6px; font-size: .8em; min-width: 1.4em; text-align: center; }
.ls-stack { position: absolute; right: 4%; bottom: 18%; display: flex; flex-direction: column-reverse; gap: 4px; align-items: center; }
.cupu { display: flex; flex-direction: column; align-items: center; animation: popIn .4s; }
.cupu i { width: 46px; height: 34px; border: 4px solid #8fb8d8; border-top: 0; border-radius: 0 0 12px 12px; background: #fffaf0; }
.cupu b { font: 900 .9rem var(--f-body); color: #2f5f8a; margin-top: -26px; }
.ls-btns { position: absolute; right: 3%; bottom: 6%; display: flex; flex-direction: column; gap: 10px; }
.ls-btns .g-btn { user-select: none; -webkit-user-select: none; touch-action: none; }
.lsn-art svg .lg, .lsn-art svg .tin { cursor: pointer; }
.dbl { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1.6fr; align-items: center; gap: 12px; padding: 20px; background: linear-gradient(#fdf1e2, #f6dfc4); }
.dbl-a, .dbl-b { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dg { display: inline-flex; flex-direction: column; align-items: center; font-size: clamp(1.6rem, 4cqw, 2.6rem); background: #fff; border-radius: 16px; padding: 4px 8px; animation: popIn .4s; }
.dg i { font-style: normal; font-size: .5em; }
.dbl-m { width: clamp(80px, 12cqw, 130px); aspect-ratio: 1; border-radius: 50%; border: 6px solid #a9803a; background: radial-gradient(#ffe38a, #f6c64e); font: 900 clamp(1.6rem, 4cqw, 2.6rem) var(--f-body); color: #5a3d0a; cursor: pointer; box-shadow: 0 8px 0 #a9803a; animation: glowPulse 1.4s infinite; }
.dbl-m.on { animation: spin .6s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- arcade frame ---- */
.arc { position: relative; width: 100%; box-sizing: border-box; background: rgba(39, 56, 95, .92); border-radius: 30px; padding: clamp(8px, 1.2cqw, 14px); box-shadow: 0 14px 34px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 10px; }
.arc.hurt { animation: hurt .35s; }
@keyframes hurt { 30% { transform: translateX(-8px); box-shadow: 0 0 0 6px #e0566f; } 70% { transform: translateX(8px); } }
.arc-hud { display: flex; align-items: center; gap: 12px; color: #fff; flex-wrap: wrap; }
.arc-title { font: 900 1.1rem var(--f-body); color: #ffd27a; }
.arc-lives span { font-size: 1.5rem; color: rgba(255, 255, 255, .25); margin-inline-end: 2px; transition: .3s; }
.arc-lives span.on { color: #ff6b8a; text-shadow: 0 0 10px rgba(255, 107, 138, .6); }
.arc-bar { flex: 1 1 160px; position: relative; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.arc-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #f6c64e, #ff9f43); border-radius: 999px; transition: width .4s cubic-bezier(.2, 1.4, .5, 1); }
[dir=rtl] .arc-bar i { inset: 0 0 0 auto; }
.arc-bar b { position: relative; display: block; text-align: center; font: 900 .95rem/26px var(--f-body); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.arc-combo { min-width: 64px; font: 900 1.2rem var(--f-body); color: #ffd27a; }
.arc-combo.hot { color: #ff9f43; animation: bump .5s infinite; }
.arc-scene { position: relative; width: 100%; aspect-ratio: 1000 / 560; border-radius: 22px; overflow: hidden; background: #fdf1e2; cursor: pointer; }
.arc-ctrl { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; min-height: 64px; }
.arc-ctrl .g-btn { font-size: clamp(1.2rem, 2.4cqw, 1.6rem); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.nt-main { min-width: 240px; }
.nt-main.stop { background: #e0566f; box-shadow: 0 6px 0 #a83a4c; animation: bump .5s infinite; }
.nt-tip { color: #fff; font-weight: 800; text-align: center; }
kbd { display: inline-block; font: 800 .75em var(--f-body); background: rgba(255, 255, 255, .25); border-radius: 6px; padding: 0 6px; margin-inline-start: 4px; }
.bubble { min-width: 90px; border-radius: 999px !important; font-size: 1.8rem !important; }
.arc-pop { position: absolute; transform: translate(-50%, -50%); font: 900 clamp(1.1rem, 3cqw, 2rem) var(--f-body); white-space: nowrap; pointer-events: none; animation: popUp 1.1s forwards; text-shadow: 0 2px 0 #fff, 0 0 12px #fff; z-index: 5; }
.arc-pop.good { color: #2e9d7d; } .arc-pop.great { color: #e2a03a; font-size: clamp(1.3rem, 3.6cqw, 2.4rem); } .arc-pop.bad { color: #e0566f; } .arc-pop.meh { color: #7a7f93; }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
.arc-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; background: linear-gradient(#ffd27a, #f6a23a); color: #5a2b15; border-radius: 26px; padding: 12px 34px; box-shadow: 0 10px 0 #b86f1e, 0 20px 40px rgba(0, 0, 0, .25); animation: bannerIn 1.9s forwards; z-index: 6; pointer-events: none; text-align: center; }
.arc-banner b { font: 900 clamp(1.6rem, 5cqw, 3rem) var(--f-body); }
.arc-banner small { font-weight: 800; font-size: 1rem; }
@keyframes bannerIn { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.1) rotate(2deg); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(.9); } }
.arc-over { position: absolute; inset: 0; background: rgba(39, 56, 95, .7); border-radius: 30px; display: flex; align-items: center; justify-content: center; z-index: 8; }
.ov-card { background: #fffdf7; border-radius: 26px; padding: 22px 30px; text-align: center; max-width: 420px; animation: popIn .4s; }
.ov-card b { font-size: 1.4rem; } .ov-card p { font-weight: 700; }

/* order card on the scene */
.nt-order { position: absolute; top: 8%; inset-inline-end: 4%; display: flex; align-items: center; gap: 10px; padding: 10px 14px !important; max-width: 46%; }
.nt-order.in { animation: slideIn .5s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes slideIn { from { transform: translateX(120%); } }
[dir=rtl] .nt-order.in { animation-name: slideInR; }
@keyframes slideInR { from { transform: translateX(-120%); } }
.nt-order small { display: block; font-weight: 800; opacity: .75; }
.nt-order .big { font: 900 clamp(1.4rem, 4cqw, 2.6rem) var(--f-body); color: #e0708f; }
.nt-order.right { top: 10%; }
.cups50 { display: flex; gap: 4px; font-size: clamp(1.3rem, 3.4cqw, 2.2rem); }
.nt-face { flex: none; width: clamp(54px, 9cqw, 96px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fdf0dc; border: 4px solid #f6c64e; }
.nt-face svg { width: 100%; height: 100%; }
.nt-q { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); text-align: center; padding: 8px 20px !important; }
.nt-q b { font: 900 clamp(1.3rem, 3.6cqw, 2.2rem) var(--f-body); color: #27385f; display: block; }
.nt-q small { font-weight: 800; color: #9a5a36; font-size: 1.05rem; }

/* svg bits */
.jt.glow path { animation: lineGlow .9s; }
@keyframes lineGlow { 40% { stroke: #f6c64e; stroke-width: 12; } }
.cupb { cursor: pointer; transition: opacity .3s; }
.cupb:hover { filter: brightness(1.08); }
.bub { cursor: pointer; }
.bub.pop { animation: bubPop .4s forwards; }
@keyframes bubPop { to { opacity: 0; } }
.fly { cursor: pointer; }
.fly.out circle:first-child { animation: flick .5s infinite alternate; }
@keyframes flick { to { opacity: .4; } }
.flame { animation: flick .4s infinite alternate; }

/* level home tiles */
.nt-tile { position: relative; border-top: 6px solid var(--c); }
.nt-ic { font-size: 3rem; display: block; margin: 6px 0; }
.nt-tile small { color: #7a7f93; font-weight: 700; }

@media (max-width: 700px) {
  .arc-title { width: 100%; text-align: center; }
  .arc-hud { justify-content: center; }
  .nt-main { min-width: 0; width: 100%; }
  .nt-order { max-width: 58%; gap: 6px; padding: 6px 8px !important; }
  .ls-btns .g-btn { font-size: 1rem; padding: 8px 12px; }
  .lsn-badge { font-size: .9rem; }
}
.steamy { animation: flick 1.2s infinite alternate; }
.ls-btns.top { top: 6%; bottom: auto; flex-direction: row; }