/* ================= Alpha Clic ================= */

:root {
  --bg: #F3F5F7;
  --surface: #FFFFFF;
  --ink: #1E2A32;
  --muted: #6B7A86;
  --line: #E1E6EB;
  --accent: #2F6FDE;
  --accent-soft: #E6EEFC;
  --ok: #2E9E73;
  --star: #F2C14E;
  --shadow: 0 1px 3px rgba(20, 30, 40, .06), 0 8px 24px rgba(20, 30, 40, .07);
  font-family: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  -webkit-user-select: none; user-select: none; /* avoids accidental text selection when double-clicking */
}
#app { height: 100%; display: flex; flex-direction: column; }
button { font: inherit; color: inherit; cursor: pointer; }
.spacer { flex: 1; }

.round-btn {
  width: 60px; height: 60px; flex: none; border-radius: 50%; border: none;
  background: var(--surface); box-shadow: var(--shadow);
  display: grid; place-items: center; transition: background .15s, transform .15s;
}
.round-btn:hover { background: var(--accent-soft); color: var(--accent); }
.round-btn:active { transform: scale(.94); }
.round-btn svg { width: 28px; height: 28px; }

/* ---------------- Home ---------------- */
.home { flex: 1; overflow: auto; padding: 32px 48px 48px; }
.home-head { display: flex; align-items: center; gap: 14px; margin: 0 auto 32px; max-width: 1200px; }
.logo { display: flex; align-items: center; gap: 14px; font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.logo-mark { width: 48px; height: 48px; }
.grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px;
}
.tile {
  position: relative; aspect-ratio: 1 / 1; border: 2px solid transparent; border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transition: transform .15s, border-color .15s;
}
.tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.tile .num { position: absolute; top: 12px; left: 18px; font-size: 34px; font-weight: 700; color: var(--accent); }
.tile .ico { position: relative; height: 96px; display: grid; place-items: center; }
.tile .ico svg { height: 96px; width: auto; }
.tile .emoji { font-size: 68px; line-height: 1; }
.tile .label { font-size: 15px; color: var(--muted); }
.tile .lock { position: absolute; top: 16px; right: 16px; width: 24px; color: var(--muted); }
.tile.locked { background: #ECEFF2; box-shadow: none; cursor: default; opacity: .55; }
.tile.locked:hover { transform: none; border-color: transparent; }
.tile.locked .num { color: var(--muted); }
.x2 {
  position: absolute; right: -16px; top: -6px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 20px; display: grid; place-items: center;
}

/* Mouse + trackpad drawings */
.mouse .btn-left, .mouse .btn-right { fill: #fff; transition: fill .1s; }
.mouse .wheel { fill: #fff; }
.mouse .lit { fill: var(--accent); }
.pad .tap { fill: var(--accent); opacity: 0; }

/* ---------------- Lesson bar ---------------- */
.bar {
  height: 84px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.bar .round-btn { box-shadow: none; background: var(--bg); }
.bar .round-btn:hover { background: var(--accent-soft); }
.lesson-badge { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.lesson-badge .n {
  width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 26px; font-weight: 700; display: grid; place-items: center;
}
.lesson-badge .mini { position: relative; height: 44px; display: grid; place-items: center; }
.lesson-badge .mini svg { height: 44px; width: auto; }
.lesson-badge .x2 { width: 22px; height: 22px; font-size: 13px; right: -12px; top: -4px; }
.dots { display: flex; gap: 12px; }
.dot { width: 16px; height: 16px; border-radius: 50%; background: var(--line); transition: .3s; }
.dot.done { background: var(--ok); }
.dot.now { background: var(--accent); transform: scale(1.3); }

.stage { flex: 1; position: relative; overflow: hidden; background: var(--bg); }

/* ---------------- Demo cursor ---------------- */
.ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: 0; }
.ghost.on { opacity: 1; }
.ghost .g-cursor { position: absolute; left: -6px; top: -3px; width: 48px; height: 48px; transition: transform .1s; transform-origin: 6px 3px; }
.ghost.press .g-cursor { animation: press .25s; }
.ghost .halo { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; background: rgba(47, 111, 222, .2); }
.ghost .ring { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 4px solid var(--accent); opacity: 0; }
.ghost.press .ring { animation: ring .45s ease-out; }
.ghost .gcount {
  position: absolute; left: 30px; top: -46px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 22px; font-weight: 700; display: grid; place-items: center; opacity: 0;
}
.ghost .gcount.two { background: var(--ok); }
.ghost .gcount.show { animation: bubble .7s ease-out; }
@keyframes press { 50% { transform: scale(.82); } }
@keyframes ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

.mouse-card {
  position: fixed; left: 24px; bottom: 72px; z-index: 49; pointer-events: none;
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .96); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s;
}
.mouse-card.right { left: auto; right: 24px; }
.mouse-card.on { opacity: 1; transform: none; }
.mouse-card .mouse { height: 84px; }
.mouse-card .pad { width: 96px; }
.mouse-card.press .mouse .btn-left { fill: var(--accent); }
.mouse-card.press .pad .tap { opacity: 1; }

/* Click-count bubble for the student */
.cbubble {
  position: fixed; z-index: 60; pointer-events: none; margin: -58px 0 0 14px;
  width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff;
  font: 700 22px "Segoe UI", system-ui, sans-serif; display: grid; place-items: center;
  animation: bubble .9s ease-out forwards;
}
.cbubble.two { background: var(--ok); }
@keyframes bubble { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* Hint pulse around the target */
.pulse { animation: pulse 1.2s ease-out 2; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 111, 222, .6); } 100% { box-shadow: 0 0 0 26px rgba(47, 111, 222, 0); } }

/* ---------------- Celebration & end ---------------- */
.bravo { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(255, 255, 255, .35); pointer-events: none; animation: fadein .2s; }
.bravo .check {
  width: 170px; height: 170px; border-radius: 50%; background: var(--ok); color: #fff;
  display: grid; place-items: center; box-shadow: 0 0 0 18px rgba(46, 158, 115, .18);
  animation: popin .5s cubic-bezier(.2, 1.6, .4, 1);
}
.bravo .check svg, .big-check svg { width: 96px; height: 96px; }
.end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.big-check {
  width: 170px; height: 170px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 18px rgba(46, 158, 115, .15); animation: popin .5s cubic-bezier(.2, 1.6, .4, 1);
}
.stars { display: flex; gap: 12px; color: var(--star); }
.stars span { width: 48px; height: 48px; animation: popin .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.end-actions { display: flex; gap: 24px; margin-top: 8px; }
.big-btn {
  width: 100px; height: 100px; border-radius: 28px; border: none; background: var(--surface); box-shadow: var(--shadow);
  display: grid; place-items: center; transition: transform .15s;
}
.big-btn:hover { transform: translateY(-3px); }
.big-btn svg { width: 46px; height: 46px; }
.big-btn.primary { background: var(--accent); color: #fff; }
@keyframes popin { from { transform: scale(0); } }
@keyframes fadein { from { opacity: 0; } }

/* ---------------- Games ---------------- */
.game { position: absolute; inset: 0; background: linear-gradient(180deg, #EAF2F8, #F6F3EE); }

.balloon { position: absolute; width: 120px; margin: -90px 0 0 -60px; }
.balloon .b-inner { animation: bob 3.6s ease-in-out infinite; animation-delay: var(--d); }
.balloon svg { display: block; width: 120px; }
.balloon.popped { pointer-events: none; animation: none; box-shadow: none; }
.balloon.popped .b-inner { animation: popout .25s ease-out forwards; }
@keyframes bob { 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes popout { to { transform: scale(1.35); opacity: 0; } }
.particle { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; animation: fly .6s ease-out forwards; }
@keyframes fly { from { transform: rotate(var(--a)) translateX(0); } to { transform: rotate(var(--a)) translateX(90px) scale(.3); opacity: 0; } }

.gift-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 80px; }
.gift { position: relative; width: 210px; height: 210px; border-radius: 18px; }
.gift .gift-art { width: 100%; height: 100%; display: block; }
.gift .lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .5s ease-out, opacity .5s; }
.gift.open .lid { transform: translate(-24px, -50px) rotate(-28deg); opacity: 0; }
.gift .prize { position: absolute; left: 50%; top: 42%; font-size: 84px; line-height: 1; transform: translate(-50%, 0) scale(0); transition: transform .55s cubic-bezier(.2, 1.6, .4, 1) .15s; }
.gift.open .prize { transform: translate(-50%, -85%) scale(1); }
.gift.squish .gift-art { animation: squish .3s; }
.gift.wiggle .gift-art { animation: wiggle .6s; }
@keyframes squish { 50% { transform: scale(1.06, .94); } }
@keyframes wiggle { 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }

/* ================= Pretend Windows 11 ================= */
.w11 {
  position: absolute; inset: 0; overflow: hidden; color: #1B1B1B; font-size: 14px;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(ellipse 60% 70% at 55% 75%, #DDEBFF 0%, rgba(221, 235, 255, 0) 60%),
    radial-gradient(ellipse 50% 60% at 40% 55%, #7DB2F5 0%, rgba(125, 178, 245, 0) 65%),
    linear-gradient(160deg, #B9D6F7 0%, #5E95E0 55%, #2F64C4 100%);
}
.w11-desk { position: absolute; inset: 0 0 48px 0; }
.w11-icons { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; }
.w11-icon {
  position: relative;
  width: 104px; padding: 8px 4px 6px; border-radius: 4px; border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; font-size: 13px; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.w11-icon svg { width: 60px; height: 60px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .15)); }
.w11-icon:hover, .w11-icon.g-hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .22); }
.w11-icon.sel { background: rgba(255, 255, 255, .32); border-color: rgba(255, 255, 255, .5); }

.w11-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px; z-index: 5;
  background: rgba(240, 243, 249, .88); backdrop-filter: blur(30px); border-top: 1px solid rgba(0, 0, 0, .08);
  display: flex; align-items: center; justify-content: center;
}
.w11-tb-apps { display: flex; gap: 4px; }
.w11-tb-btn { position: relative; width: 44px; height: 40px; border: none; border-radius: 5px; background: transparent; display: grid; place-items: center; }
.w11-tb-btn:hover, .w11-tb-btn.g-hover { background: rgba(255, 255, 255, .75); }
.w11-tb-btn svg { width: 24px; height: 24px; }
.w11-tb-btn.active { background: rgba(255, 255, 255, .75); }
.w11-tb-btn.active::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: #0F6CBD; }
.w11-tray { position: absolute; right: 6px; top: 0; bottom: 0; display: flex; align-items: center; gap: 2px; font-size: 12px; }
.w11-tray-i { display: flex; gap: 6px; padding: 8px 6px; border-radius: 5px; }
.w11-tray-i svg { width: 16px; height: 16px; }
.w11-clock { text-align: right; line-height: 1.35; padding: 0 8px; }

.w11-win {
  position: absolute; display: flex; flex-direction: column; overflow: hidden; background: #fff;
  border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 18px 50px rgba(0, 0, 0, .28);
  animation: winopen .22s ease-out;
}
.w11-win.closing { animation: winclose .2s ease-in forwards; }
@keyframes winopen { from { opacity: 0; transform: scale(.95); } }
@keyframes winclose { to { opacity: 0; transform: scale(.95); } }
.w11-title { height: 40px; flex: none; display: flex; align-items: center; background: #F3F3F3; }
.w11-title .t { flex: 1; display: flex; align-items: center; gap: 10px; padding-left: 14px; font-size: 12.5px; min-width: 0; white-space: nowrap; }
.w11-title .t svg { width: 18px; height: 18px; flex: none; }
.w11-ctl { width: 46px; height: 40px; border: none; background: transparent; display: grid; place-items: center; color: #222; }
.w11-ctl svg { width: 10px; height: 10px; }
.w11-ctl:hover { background: rgba(0, 0, 0, .06); }
.w11-ctl.close:hover { background: #C42B1C; color: #fff; }

.w11-center { position: absolute; inset: 0; display: grid; place-items: center; }
.w11-dialog { position: relative; width: 440px; }
.dlg-body { display: flex; gap: 16px; align-items: flex-start; padding: 24px 24px 28px; }
.dlg-body svg { width: 32px; height: 32px; flex: none; }
.dlg-body p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 20px 24px; background: #F3F3F3; border-top: 1px solid #E5E5E5; }
.w11-btn { min-width: 120px; height: 34px; padding: 0 16px; border-radius: 4px; border: 1px solid #D1D1D1; background: #fff; font-size: 14px; }
.w11-btn:hover { background: #F6F6F6; }
.w11-btn.accent { background: #0F6CBD; border-color: #0F6CBD; color: #fff; }
.w11-btn.accent:hover { background: #1A75C4; }

.w11-start {
  position: absolute; left: 50%; bottom: 12px; width: 640px; max-height: calc(100% - 24px); z-index: 6;
  display: flex; flex-direction: column; gap: 18px; padding: 24px 32px 0;
  background: rgba(243, 246, 251, .96); backdrop-filter: blur(30px); border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; transform: translate(-50%, 40px); transition: opacity .2s, transform .25s ease-out;
}
.w11-start.open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.w11-start-search { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-radius: 18px; background: #fff; border: 1px solid #E0E0E0; border-bottom: 2px solid #0F6CBD; color: #777; font-size: 13px; }
.w11-start-search svg { width: 16px; height: 16px; }
.w11-start-h { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 0 16px; }
.w11-start-h .pill { font-size: 12px; padding: 4px 10px; background: #fff; border-radius: 4px; border: 1px solid #E5E5E5; }
.w11-start-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 4px; }
.w11-start-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; border-radius: 4px; font-size: 12px; text-align: center; }
.w11-start-app:hover { background: rgba(255, 255, 255, .8); }
.w11-start-app .e { font-size: 30px; line-height: 1; }
.w11-start-app .n { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w11-start-foot { display: flex; justify-content: space-between; align-items: center; margin: 8px -32px 0; padding: 14px 48px; background: rgba(0, 0, 0, .035); border-top: 1px solid rgba(0, 0, 0, .06); font-size: 13px; }
.w11-start-foot .user { display: flex; align-items: center; gap: 10px; }
.w11-start-foot .avatar { width: 32px; height: 32px; border-radius: 50%; background: #DDE4EE; display: grid; place-items: center; }
.w11-start-foot .pw svg { width: 18px; height: 18px; }

/* File Explorer */
.w11-explorer { left: 14%; top: 5%; width: 68%; height: 80%; min-width: 560px; }
.ex { flex: 1; display: flex; flex-direction: column; min-height: 0; font-size: 13px; }
.ex-cmd { display: flex; align-items: center; gap: 22px; height: 46px; padding: 0 16px; border-bottom: 1px solid #EBEBEB; color: #333; }
.ex-new { padding: 5px 12px; border-radius: 4px; background: #F5F5F5; }
.ex-cmd .sep { width: 1px; height: 22px; background: #E0E0E0; }
.ex-addr { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-bottom: 1px solid #EBEBEB; }
.ex-arrows { white-space: pre; color: #555; }
.ex-path { flex: 1; height: 30px; display: flex; align-items: center; padding: 0 10px; border-radius: 4px; background: #F5F5F5; white-space: pre; }
.ex-search { width: 220px; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 4px; background: #F5F5F5; color: #777; }
.ex-search svg { width: 14px; height: 14px; }
.ex-main { flex: 1; display: flex; min-height: 0; }
.ex-nav { width: 190px; flex: none; padding: 10px 8px; border-right: 1px solid #EBEBEB; overflow: hidden; }
.ex-nav-i { padding: 6px 10px; border-radius: 4px; white-space: nowrap; }
.ex-nav-i:hover { background: #F0F0F0; }
.ex-nav hr { border: none; border-top: 1px solid #EBEBEB; margin: 8px 4px; }
.ex-grid { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 16px; overflow: hidden; }
.ex-item { width: 140px; padding: 8px; border-radius: 4px; border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ex-item:hover { background: #E5F3FF; }
.ex-item.sel { background: #CCE8FF; border-color: #99D1FF; }
.ex-item .thumb { width: 120px; height: 90px; border-radius: 4px; display: grid; place-items: center; font-size: 52px; }
.ex-status { height: 28px; flex: none; display: flex; align-items: center; padding: 0 16px; font-size: 12px; color: #555; border-top: 1px solid #EBEBEB; }

/* Photos viewer */
.w11-viewer { left: 20%; top: 4%; width: 62%; height: 84%; z-index: 3; }
.w11-viewer .w11-title { background: #202020; color: #fff; }
.w11-viewer .w11-ctl { color: #fff; }
.w11-viewer .w11-ctl:hover { background: rgba(255, 255, 255, .1); }
.viewer { flex: 1; display: grid; place-items: center; background: #1C1C1C; }
.viewer-img { width: 70%; aspect-ratio: 4 / 3; max-height: 90%; border-radius: 4px; display: grid; place-items: center; font-size: 180px; }

/* ---------------- Lesson 1: pointing ---------------- */
/* Demo: the mouse moves while the cursor travels; the halo breathes while it rests */
.mouse-card.moving .mouse { animation: nudge .45s ease-in-out infinite alternate; }
.mouse-card.moving .pad .tap { opacity: 1; animation: padNudge .45s ease-in-out infinite alternate; }
@keyframes nudge { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes padNudge { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
.ghost.dwell .halo { animation: breathe 1s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.4); } }

.light {
  position: absolute; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%;
  background: #DCE3EA; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .05);
  transition: background .35s, box-shadow .35s, transform .35s;
}
.light.lit {
  background: radial-gradient(circle at 40% 35%, #FFF4CC, #F6C14E 70%);
  box-shadow: 0 0 0 10px rgba(246, 193, 78, .18), 0 0 44px 12px rgba(246, 193, 78, .45);
  transform: scale(1.08);
}

.star-target { position: absolute; width: 140px; height: 140px; margin: -70px 0 0 -70px; animation: popin .4s cubic-bezier(.2, 1.6, .4, 1); }
.star-target svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.star-target .track { fill: #fff; stroke: #E1E6EB; stroke-width: 8; }
.star-target .fill { fill: none; stroke: var(--ok); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset .2s; }
.star-target.filling .fill { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dwell, 700ms) linear; }
.star-target .s { position: absolute; inset: 30px; color: var(--star); }
.star-target .s svg { transform: none; }
.star-target.got { animation: gotIt .45s ease-out forwards; }
@keyframes gotIt { to { transform: scale(1.4); opacity: 0; } }

.w11-icon.seen::after {
  content: "✓"; position: absolute; top: 2px; right: 14px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 13px; text-shadow: none; display: grid; place-items: center;
  animation: popin .3s cubic-bezier(.2, 1.6, .4, 1);
}

/* Windows tooltip */
.w11-tip {
  position: absolute; z-index: 30; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  padding: 6px 10px; border-radius: 4px; font-size: 12px; color: #1B1B1B;
  background: #F9F9F9; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  opacity: 0; transition: opacity .12s;
}
.w11-tip.below { transform: translateX(-50%); }
.w11-tip.on { opacity: 1; }

/* ---------------- Lesson 4: right-click ---------------- */
.pad .tap2 { fill: var(--accent); opacity: 0; }
.mouse-card.rmode.press .mouse .btn-left { fill: #fff; }
.mouse-card.rmode.press .mouse .btn-right { fill: var(--accent); }
.mouse-card.rmode.press .pad .tap { opacity: 0; }
.mouse-card.rmode.press .pad .tap2 { opacity: 1; }
.ghost .gmouse { position: absolute; left: 34px; top: -58px; width: 34px; height: 50px; padding: 4px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); opacity: 0; }
.ghost .gmouse svg { width: 100%; height: 100%; display: block; }
.ghost .gmouse.show { animation: bubble .9s ease-out; }

.flower { position: absolute; width: 110px; height: 176px; margin: -88px 0 0 -55px; }
.flower svg { width: 100%; height: 100%; display: block; transform-origin: 50% 100%; }
.flower .budhead { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .35s, opacity .35s; }
.flower.open .budhead { transform: scale(.2); opacity: 0; }
.flower .bloom { position: absolute; left: 50%; top: 4px; font-size: 76px; line-height: 1; transform: translateX(-50%) scale(0); transition: transform .5s cubic-bezier(.2, 1.6, .4, 1) .1s; }
.flower.open .bloom { transform: translateX(-50%) scale(1); }
.flower.wiggle svg { animation: wiggle .6s; }

.w11-spot { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none; }

/* Windows 11 right-click menu */
.w11-menu {
  position: absolute; z-index: 7; min-width: 250px; padding: 4px; font-size: 13px; color: #1B1B1B;
  background: rgba(249, 249, 249, .97); backdrop-filter: blur(30px);
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  animation: menuIn .15s ease-out;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }
.w11-menu-icons { display: flex; justify-content: space-around; padding: 2px 4px 6px; margin-bottom: 4px; border-bottom: 1px solid #E5E5E5; }
.w11-menu-icons span { width: 38px; height: 32px; border-radius: 4px; display: grid; place-items: center; }
.w11-menu-icons span:hover { background: rgba(0, 0, 0, .05); }
.w11-menu-icons svg { width: 16px; height: 16px; }
.w11-menu-i { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px; border-radius: 4px; white-space: nowrap; }
.w11-menu-i:hover, .w11-menu-i.g-hover { background: rgba(0, 0, 0, .05); }
.w11-menu-i .mi { width: 16px; height: 16px; display: grid; place-items: center; flex: none; }
.w11-menu-i .mi svg { width: 16px; height: 16px; }
.w11-menu-i .k { margin-left: auto; padding-left: 28px; font-size: 12px; color: #777; }
.w11-menu-i .arrow { margin-left: auto; padding-left: 28px; color: #555; }
.w11-menu hr { border: none; border-top: 1px solid #E5E5E5; margin: 4px 0; }

/* Windows screens show the normal arrow, never a hand */
.w11, .w11 button { cursor: default; }

/* Square dots = Windows simulations */
.dot.sim { border-radius: 4px; }

/* ---------------- How-to window ---------------- */
.stage { container-type: size; }
.howto {
  position: absolute; inset: 0; z-index: 45; display: grid; place-items: center;
  background: rgba(30, 42, 50, .32); backdrop-filter: blur(3px); animation: fadein .25s;
}
.howto.closing { animation: fadeout .25s forwards; }
@keyframes fadeout { to { opacity: 0; } }
.howto-card {
  position: relative; width: min(660px, 92cqw, calc((100cqh - 210px) * 1.7778)); min-width: 300px;
  display: flex; flex-direction: column; gap: 16px; padding: 22px;
  background: var(--surface); border-radius: 28px; box-shadow: 0 20px 60px rgba(20, 30, 40, .25);
  animation: cardIn .35s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.howto-num {
  position: absolute; top: -18px; left: -18px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 28px; font-weight: 700; display: grid; place-items: center; box-shadow: var(--shadow);
}
.howto-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.howto-screen.sim { border: 6px solid #2A3138; border-radius: 14px; }
.howto-virt { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; pointer-events: none; }
.howto-cursor { position: absolute; left: 0; top: 0; z-index: 50; pointer-events: none; }
.howto-cursor svg { position: absolute; left: -4.5px; top: -2.25px; width: 36px; height: 36px; transform-origin: 4px 2px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.howto-cursor .ring { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; }
.howto-cursor.press .ring { animation: ring .45s ease-out; }
.howto-cursor.press svg { animation: press .25s; }
.howto-foot { display: flex; align-items: center; gap: 20px; }
.howto-mouse { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-radius: 18px; background: var(--bg); }
.howto-mouse .mouse { height: 76px; }
.howto-mouse .pad { width: 90px; }
.howto-mouse.moving .mouse { animation: nudge .45s ease-in-out infinite alternate; }
.howto-mouse.moving .pad .tap { opacity: 1; animation: padNudge .45s ease-in-out infinite alternate; }
.howto-mouse.press .mouse .btn-left { fill: var(--accent); }
.howto-mouse.press .pad .tap { opacity: 1; }
.howto-mouse.rmode.press .mouse .btn-left { fill: #fff; }
.howto-mouse.rmode.press .mouse .btn-right { fill: var(--accent); }
.howto-mouse.rmode.press .pad .tap { opacity: 0; }
.howto-mouse.rmode.press .pad .tap2 { opacity: 1; }
.howto-go {
  position: relative; margin-left: auto; width: 104px; height: 104px; flex: none; border: none; border-radius: 50%;
  background: var(--ok); color: #fff; display: grid; place-items: center; cursor: inherit;
  animation: goPulse 2s ease-out infinite; transition: transform .15s;
}
.howto-go:hover { transform: scale(1.05); }
.howto-go .play { width: 46px; height: 46px; margin-left: 6px; }
.howto-go .dwell { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); transform: rotate(-90deg); pointer-events: none; }
.howto-go .dwell circle { fill: none; stroke: var(--ok); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 351.9; stroke-dashoffset: 351.9; transition: stroke-dashoffset .2s; }
.howto-go.filling .dwell circle { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dwell, 1000ms) linear; }
@keyframes goPulse { 0% { box-shadow: 0 0 0 0 rgba(46, 158, 115, .45); } 70%, 100% { box-shadow: 0 0 0 22px rgba(46, 158, 115, 0); } }

/* ---------------- Lesson 1, game 3: fog ---------------- */
.fog-game .landscape { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fog { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .8s; }
.fog.gone { opacity: 0; }
.fogband { position: absolute; left: 0; right: 0; height: 33.4%; background: #DDE3E9; clip-path: inset(0 0 0 0); transition: clip-path 1.1s linear; }
.fogband.gone-l { clip-path: inset(0 0 0 100%); }
.fogband.gone-r { clip-path: inset(0 100% 0 0); }

/* ---------------- Window buttons (lesson 1, simulation 3) ---------------- */
.w11-win.w11-centered { left: 20%; top: 12%; width: 60%; height: 70%; min-width: 0; }
.w11-ctl { position: relative; }
.w11-ctl.g-hover { background: rgba(0, 0, 0, .06); }
.w11-ctl.close.g-hover { background: #C42B1C; color: #fff; }
.w11-ctl.seen::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ok); }

/* ---------------- Lesson intro page ---------------- */
.intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: min(30px, 4cqh); }
.intro-num {
  width: min(96px, 14cqh); height: min(96px, 14cqh); border-radius: 50%; background: var(--accent); color: #fff;
  font-size: min(52px, 7.5cqh); font-weight: 700; display: grid; place-items: center; animation: popin .5s cubic-bezier(.2, 1.6, .4, 1);
}
.intro-row { display: flex; align-items: center; gap: 56px; }
.intro-art { display: flex; align-items: center; gap: 44px; padding: 24px 36px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.intro-mouse { position: relative; display: block; }
.intro-art .mouse { height: min(210px, 32cqh); display: block; }
.intro-art .pad { width: min(220px, 34cqh); display: block; }
.intro-art .or { width: 2px; align-self: stretch; background: var(--line); }
.intro-row .howto-go { margin-left: 0; }

/* The gesture, in a loop */
.mouse.anim-click .btn-left { animation: flash1 1.6s infinite; }
.pad.anim-click .tap { animation: tap1 1.6s infinite; }
.mouse.anim-right .btn-right { animation: flash1 1.6s infinite; }
.pad.anim-right .tap2 { animation: tap1 1.6s infinite; }
.mouse.anim-dblclick .btn-left { animation: flash2 1.8s infinite; }
.pad.anim-dblclick .tap { animation: tap2 1.8s infinite; }
.mouse.anim-move { animation: mouseSlide 2.4s ease-in-out infinite; }
.pad.anim-move .tap { opacity: 1; animation: padSlide 2.4s ease-in-out infinite; }
@keyframes flash1 { 0%, 4% { fill: #fff; } 8%, 24% { fill: var(--accent); } 30%, 100% { fill: #fff; } }
@keyframes tap1 { 0%, 4% { opacity: 0; } 8%, 24% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes flash2 { 0%, 3% { fill: #fff; } 6%, 12% { fill: var(--accent); } 15%, 18% { fill: #fff; } 21%, 27% { fill: var(--accent); } 31%, 100% { fill: #fff; } }
@keyframes tap2 { 0%, 3% { opacity: 0; } 6%, 12% { opacity: 1; } 15%, 18% { opacity: 0; } 21%, 27% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes mouseSlide { 0%, 100% { transform: translateX(-30px); } 50% { transform: translateX(30px); } }
@keyframes padSlide { 0%, 100% { transform: translateX(-48px); } 50% { transform: translateX(48px); } }

/* Double-click: "1" then "2", in time with the button */
.intro-count {
  position: absolute; top: -14px; right: -30px; width: 44px; height: 44px; border-radius: 50%;
  color: #fff; font-size: 24px; font-weight: 700; display: grid; place-items: center; opacity: 0;
}
.intro-count.c1 { background: var(--accent); animation: count1 1.8s infinite; }
.intro-count.c2 { background: var(--ok); animation: count2 1.8s infinite; }
@keyframes count1 { 0%, 4% { opacity: 0; transform: scale(.5); } 7%, 18% { opacity: 1; transform: none; } 21%, 100% { opacity: 0; } }
@keyframes count2 { 0%, 19% { opacity: 0; transform: scale(.5); } 22%, 45% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; } }

/* Pointing: the arrow moves on a little screen with the mouse */
.intro-screen { position: relative; width: min(380px, 70cqw); height: min(110px, 15cqh); border: 4px solid var(--ink); border-radius: 14px; background: #fff; overflow: hidden; }
.intro-screen .ic { position: absolute; left: 50%; top: 50%; margin-top: -22px; animation: screenSlide 2.4s ease-in-out infinite; }
.intro-screen svg { width: 44px; height: 44px; display: block; }
@keyframes screenSlide { 0%, 100% { transform: translateX(-150px); } 50% { transform: translateX(110px); } }

/* "1" / "2" next to the demo arrow in the how-to window */
.howto-cursor .hcount {
  position: absolute; left: 22px; top: -34px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; display: grid; place-items: center; opacity: 0;
}
.howto-cursor .hcount.two { background: var(--ok); }
.howto-cursor .hcount.show { animation: bubble .7s ease-out; }

/* ================= Lessons 2–4, new games ================= */
.squish .art { animation: squish .3s; }
.wiggle .art { animation: wiggle .6s; }
.item-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 70px; }

/* Lesson 2: bubbles getting smaller */
.bubble {
  position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 8%, rgba(255, 255, 255, 0) 9%),
              radial-gradient(circle at 50% 50%, rgba(156, 203, 234, .15) 55%, rgba(120, 180, 225, .55) 100%);
  border: 2px solid rgba(110, 170, 220, .55); box-shadow: inset -6px -8px 18px rgba(196, 160, 230, .35);
  animation: bubbleIn .35s cubic-bezier(.2, 1.6, .4, 1);
}
.bubble.hidden { display: none; }
.bubble.popped { animation: popout .25s ease-out forwards; pointer-events: none; }
@keyframes bubbleIn { from { transform: translate(-50%, -50%) scale(0); } }

/* Lesson 2: the house at night */
.game.night { background: linear-gradient(180deg, #2E3D63, #55638A 70%, #6C7B9C); }
.house { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 420px; }
.house-roof { width: 470px; height: 120px; margin-left: -25px; background: #B5614F; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.house-body { position: relative; height: 330px; background: #E9D9BE; border-radius: 0 0 8px 8px; }
.house-wins { display: grid; grid-template-columns: repeat(3, 90px); grid-template-rows: repeat(2, 80px); gap: 26px 36px; justify-content: center; padding-top: 26px; }
.hwin { border-radius: 6px; background: #3A4766; border: 6px solid #F4ECDD; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15); transition: background .3s, box-shadow .3s; }
.hwin.lit { background: #FFE08A; box-shadow: 0 0 30px 6px rgba(255, 214, 110, .6), inset 0 0 12px rgba(255, 180, 60, .5); }
.house-door { position: absolute; left: 50%; bottom: 0; width: 64px; height: 90px; margin-left: -32px; background: #8A5A44; border-radius: 8px 8px 0 0; }

/* Lesson 3: eggs */
.egg { position: relative; width: 150px; height: 175px; }
.egg .art { width: 100%; height: 100%; display: block; }
.egg .egg-top { transform-box: fill-box; transform-origin: 15% 100%; transition: transform .5s ease-out, opacity .5s; }
.egg.open .egg-top { transform: translate(-18px, -46px) rotate(-32deg); opacity: 0; }
.egg .chick { position: absolute; left: 50%; top: 36%; font-size: 70px; line-height: 1; transform: translate(-50%, 0) scale(0); transition: transform .5s cubic-bezier(.2, 1.6, .4, 1) .15s; }
.egg.open .chick { transform: translate(-50%, -28%) scale(1); }

/* Lesson 3: candles */
.game.dusk { background: linear-gradient(180deg, #3D3A5C, #6E5F7E 70%, #8E7A8C); }
.candle { position: relative; width: 80px; height: 200px; }
.candle .art { width: 100%; height: 100%; display: block; }
.candle .flame {
  position: absolute; left: 28px; width: 24px; height: 36px; transform-origin: 50% 100%; transform: scale(0);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, #FFF8D6 0 25%, #FFCB4D 50%, #F08A3A 90%);
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.candle.open .flame { transform: scale(1); animation: flicker 1.4s ease-in-out infinite .35s; box-shadow: 0 0 40px 18px rgba(255, 200, 90, .35); }
@keyframes flicker { 50% { transform: scale(.92, 1.08) rotate(2deg); } }

/* Lesson 4: cards */
.card { width: 130px; height: 175px; perspective: 800px; }
.card-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.card.open .card-in { transform: rotateY(180deg); }
.card.wiggle .card-in { animation: wiggle .6s; }
.card-back, .card-front { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; box-shadow: var(--shadow); }
.card-back { background: repeating-linear-gradient(45deg, #5B8FD6 0 12px, #6F9FE0 12px 24px); border: 6px solid #fff; }
.card-front { background: #fff; transform: rotateY(180deg); display: grid; place-items: center; font-size: 72px; }

/* Lesson 4: left or right? */
.lr {
  position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%;
  display: grid; place-items: center; border: 5px solid; animation: popin .35s cubic-bezier(.2, 1.6, .4, 1);
}
.lr .mouse { height: 76px; }
.lr.left { background: #E6EEFC; border-color: var(--accent); }
.lr.right { background: #FDEBDD; border-color: #E8894A; }
.lr.right .mouse .lit { fill: #E8894A; }
.lr.wiggle .mouse { animation: wiggle .6s; }
.lr.popped { animation: popout .25s ease-out forwards; pointer-events: none; }

/* Notepad */
.w11-notepad { left: 24%; top: 7%; width: 52%; height: 78%; z-index: 3; }
.np { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.np-menu { display: flex; gap: 20px; height: 34px; align-items: center; padding: 0 16px; font-size: 13px; border-bottom: 1px solid #EBEBEB; }
.np-text { flex: 1; padding: 18px 22px; font: 15px/1.6 Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; color: #222; overflow: hidden; }
.np-status { height: 28px; display: flex; gap: 28px; align-items: center; justify-content: flex-end; padding: 0 16px; font-size: 12px; color: #555; border-top: 1px solid #EBEBEB; background: #FAFAFA; }