@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap');
		:root { --ink:#20304a; --muted:#61708b; --paper:#fffdf8; --sky:#dff5ff; --blue:#3978ee; --yellow:#ffc857; --pink:#ff6584; --green:#31b889; --orange:#ff8e4d; --line:#e5eaf3; --shadow:0 18px 45px rgba(37,59,103,.13); }
		* { box-sizing:border-box; }
		body { margin:0; min-height:100vh; color:var(--ink); font-family:'Nunito', sans-serif; background:radial-gradient(circle at 12% 8%, #fff5c7 0 9%, transparent 24%), radial-gradient(circle at 91% 12%, #ffdce9 0 8%, transparent 25%), linear-gradient(135deg,#e8f8ff 0%,#f8f2ff 48%,#fff8e8 100%); }
		button, input { font:inherit; }
		button { border:0; cursor:pointer; color:inherit; }
		.app { max-width:1280px; margin:auto; padding:24px clamp(16px,4vw,52px) 40px; }
		.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
		.brand { display:flex; gap:12px; align-items:center; }
		.brand-mark { display:grid; place-items:center; width:54px; height:54px; border-radius:18px; font-size:29px; background:var(--yellow); box-shadow:0 8px 0 #eab342; transform:rotate(-5deg); }
		.brand h1 { margin:0; font:800 clamp(25px,4vw,38px)/.9 'Baloo 2', sans-serif; letter-spacing:0; }
		.brand p { margin:5px 0 0; color:var(--muted); font-weight:800; font-size:13px; }
		.top-actions { display:flex; gap:10px; align-items:center; }
		.icon-button, .pill { min-height:44px; padding:0 15px; border-radius:15px; background:#fff; box-shadow:0 5px 14px rgba(42,66,110,.1); font-weight:900; }
		.icon-button { width:45px; padding:0; font-size:20px; }
		.screen { display:none; animation:appear .45s ease both; }
		.screen.active { display:block; }
		.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center; min-height:65vh; }
		.hero-copy { padding:24px 0; }
		.eyebrow { display:inline-flex; align-items:center; gap:8px; color:#bd6b12; background:#fff2be; border-radius:99px; padding:8px 14px; font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:1px; }
		.hero h2 { max-width:650px; margin:18px 0 10px; font:800 clamp(50px,8vw,95px)/.82 'Baloo 2', sans-serif; letter-spacing:0; color:var(--ink); }
		.hero h2 span { color:var(--pink); }
		.hero-copy > p { max-width:530px; margin:18px 0 28px; color:var(--muted); font-size:18px; line-height:1.5; font-weight:700; }
		.main-actions { display:flex; flex-wrap:wrap; gap:13px; }
		.mode-select { display:flex; align-items:center; gap:8px; margin-top:18px; color:var(--muted); font-size:13px; font-weight:900; flex-wrap:wrap; }
		.mode-button { padding:9px 13px; border:2px solid transparent; border-radius:12px; background:#fff; box-shadow:0 4px 10px rgba(42,66,110,.08); font-size:12px; font-weight:900; }
		.mode-button.selected { border-color:var(--pink); color:#bc4663; background:#fff0f5; }
		.level-select { display:flex; align-items:center; gap:8px; margin-top:18px; color:var(--muted); font-size:13px; font-weight:900; }
		.level-button { padding:9px 13px; border:2px solid transparent; border-radius:12px; background:#fff; box-shadow:0 4px 10px rgba(42,66,110,.08); font-size:12px; font-weight:900; }
		.level-button.selected { border-color:var(--blue); color:var(--blue); background:#eef4ff; }
		.primary, .secondary { min-height:55px; border-radius:18px; padding:0 25px; font-weight:900; font-size:17px; transition:transform .18s, box-shadow .18s; }
		.primary { color:white; background:var(--blue); box-shadow:0 7px 0 #285bc0; }
		.secondary { background:#fff; box-shadow:0 6px 0 #d8dfed; }
		.primary:hover, .secondary:hover, .icon-button:hover, .pill:hover { transform:translateY(-3px); }
		.playground { position:relative; min-height:390px; display:grid; place-items:center; border-radius:38px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
		.playground:before, .playground:after { content:''; position:absolute; border-radius:50%; opacity:.65; }
		.playground:before { width:160px; height:160px; background:#dbf6e9; left:-45px; bottom:-55px; }
		.playground:after { width:115px; height:115px; background:#ffe3ed; right:-25px; top:-28px; }
		.mini-drawing { position:relative; width:75%; aspect-ratio:1; border-radius:50%; background:#f3fbff; border:9px solid #e2f5ff; display:grid; place-items:center; z-index:1; }
		.mini-drawing svg { width:78%; height:78%; stroke:#3978ee; fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
		.star { position:absolute; font-size:34px; animation:float 3s ease-in-out infinite; }
		.star.one { top:48px; left:40px; } .star.two { right:42px; bottom:58px; animation-delay:1s; }
		.feature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:23px; }
		.feature { background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.8); border-radius:20px; padding:17px; }
		.feature strong { display:block; margin-bottom:4px; } .feature span { color:var(--muted); font-size:13px; font-weight:700; }
		.game-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr); gap:22px; align-items:start; }
		.game-head { grid-column:1/-1; display:flex; justify-content:space-between; align-items:end; gap:20px; }
		.game-head h2 { margin:0; font:800 34px/1 'Baloo 2'; } .round-label { color:var(--muted); font-size:14px; font-weight:900; }
		.stats { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
		.stat { min-width:105px; padding:10px 14px; border-radius:16px; background:#fff; box-shadow:0 5px 15px rgba(42,66,110,.08); text-align:center; }
		.stat small { display:block; color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; } .stat b { font-size:20px; }
		.panel { background:rgba(255,255,255,.93); border:1px solid rgba(255,255,255,.9); border-radius:27px; box-shadow:var(--shadow); }
		.drawing-panel { padding:20px; }
		.canvas-wrap { position:relative; display:grid; place-items:center; aspect-ratio:1.45; min-height:360px; overflow:hidden; border-radius:21px; background:linear-gradient(145deg,#f2fbff,#fff9eb); border:3px dashed #cfe8f4; }
		.canvas-wrap:after { content:'Resuelve para dibujar'; position:absolute; bottom:13px; color:#a0b2c4; font-size:12px; font-weight:900; letter-spacing:.4px; }
		#drawing { width:90%; height:90%; overflow:visible; } #drawing .segment { opacity:0; stroke-dasharray:100; stroke-dashoffset:100; transition:opacity .2s; vector-effect:non-scaling-stroke; }
		#drawing .segment.revealed { opacity:1; animation:draw 1s ease forwards; filter:drop-shadow(0 2px 1px rgba(44,83,150,.14)); }
		.progress-line { display:flex; align-items:center; gap:12px; margin-top:16px; font-weight:900; font-size:13px; } .progress-track { flex:1; height:12px; overflow:hidden; border-radius:99px; background:#e8edf5; } .progress-fill { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--green),#8bd843); transition:width .5s ease; }
		.question-panel { padding:22px; } .question-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; } .level-badge { padding:7px 11px; border-radius:9px; color:#fff; background:var(--orange); font-size:12px; font-weight:900; text-transform:uppercase; } .question-type { color:var(--muted); font-size:12px; font-weight:900; }
		.question { min-height:86px; display:grid; place-items:center; padding:10px; border-radius:18px; background:#f5f7ff; text-align:center; font:800 clamp(22px,3vw,29px)/1.18 'Baloo 2'; }
		.question-panel.column-math .question { display:grid; min-height:86px; color:var(--blue); font-size:32px; text-transform:uppercase; }
		.question-panel.column-math .question-type { visibility:hidden; }
		.question-help { min-height:20px; margin:9px 0 0; color:#287be8; text-align:center; font-size:13px; font-weight:900; }
		.math-work { display:none; width:min(220px,100%); margin:14px auto 3px; padding:12px 18px 14px; border-radius:16px; background:#f8fbff; border:2px solid #e0eaf8; font-family:'Nunito', sans-serif; }
		.math-work.visible { display:block; }
		.procedure-board { display:grid; grid-template-columns:repeat(var(--procedure-digits), 31px); gap:4px; width:max-content; min-width:190px; margin:auto; padding:10px 15px 12px; border-radius:14px; background:#f8fbff; border:2px solid #e0eaf8; text-align:right; font-weight:900; }
		.procedure-carries { display:grid; grid-template-columns:subgrid; grid-column:1 / -1; min-height:20px; color:#287be8; font-size:15px; text-align:center; }
		.procedure-number { grid-column:1 / -1; padding-right:8px; font-size:25px; letter-spacing:14px; }
		.procedure-number.operator { border-bottom:3px solid var(--ink); }
		.procedure-result { grid-column:1 / -1; min-height:31px; padding-right:8px; color:#287be8; font-size:25px; letter-spacing:14px; }
		.procedure-note { grid-column:1 / -1; margin:7px 0 0; color:var(--muted); text-align:center; font-size:11px; font-weight:900; }
		/* Los tableros que no son una cuenta en columna necesitan sitio a lo ancho:
		   una barra de porcentaje o una fila de grupos no cabe en 220px. */
		.math-work.visual { width:min(340px,100%); }
		.column-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
		.visual-title { margin:0; color:var(--ink); text-align:center; font-size:13px; font-weight:900; }
		.visual-foot { margin:9px 0 0; color:var(--muted); text-align:center; font-size:12px; font-weight:800; }
		.visual-board { display:flex; flex-direction:column; }
		/* Fracciones y porcentajes: la tira se parte en tantos trozos como diga la
		   pregunta y se colorea uno, que es exactamente lo que hay que calcular. */
		.parts-strip { display:flex; gap:4px; margin-top:10px; }
		/* La parte de color lleva dentro el número que hay que averiguar: primero
		   un interrogante y, al acertar, el resultado. */
		.parts-strip span { display:flex; align-items:center; justify-content:center; flex:1; height:34px; border:2px solid #cfe0f7; border-radius:8px; background:#f6faff; color:#fff; font-size:15px; font-weight:900; }
		.parts-strip span.on { border-color:var(--green); background:linear-gradient(180deg,#5fd3a8,var(--green)); }
		.parts-strip span.on.azul { border-color:var(--blue); background:linear-gradient(180deg,#6fa2f5,var(--blue)); }
		.group-row { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:10px; }
		.bag { display:flex; align-items:center; justify-content:center; min-width:40px; height:38px; padding:0 7px; border:2px dashed #cfe0f7; border-radius:10px; background:#f6faff; color:var(--muted); font-size:14px; font-weight:900; }
		.bag.full { border-style:solid; border-color:#cfe0f7; color:var(--ink); }
		.expression { margin:12px 0 0; text-align:center; font-size:23px; font-weight:900; letter-spacing:1px; }
		.expression b { padding:2px 7px; border-radius:8px; background:#fff2cc; color:#8a5a00; }
		.math-grid { display:grid; grid-template-columns:repeat(var(--digits), 31px); grid-template-rows:22px 39px 39px 3px; justify-content:center; align-items:center; position:relative; }
		.math-digit, .math-carry { width:31px; text-align:center; font-weight:900; }
		.math-digit { font-size:25px; line-height:1; }
		.math-carry { visibility:hidden; color:#287be8; font-size:15px; align-self:end; }
		.math-digit.borrowed-digit { color:inherit; }
		.math-operator { position:absolute; left:0; top:58px; width:24px; font-size:23px; font-weight:900; }
		.math-rule { grid-column:1 / -1; width:100%; height:3px; background:var(--ink); }
		.math-answer { display:none; }
		.answer-slot { display:grid; place-items:center; width:31px; height:40px; border-bottom:3px solid #b9c9df; color:#20304a; font-size:24px; font-weight:900; }
		.answer-slot.filled { color:#287be8; }
		.math-help { display:none; }
		.choice-options { display:none; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
		.choice-options.visible { display:grid; }
		.choice { min-height:54px; padding:8px 10px; border:2px solid #dfe6f1; border-radius:14px; background:#fff; color:var(--ink); font-size:15px; font-weight:900; transition:transform .15s, border-color .15s, background .15s; }
		.choice:hover { transform:translateY(-2px); border-color:var(--blue); background:#eef4ff; }
		.question-panel.culture .keypad, .question-panel.culture .answer-display { display:none; }
		.question-panel.culture .math-work { display:none; }
		.question-panel.math .math-work.visible + .choice-options { display:none; }
		.answer-display { display:flex; align-items:center; justify-content:center; min-height:53px; margin:16px 0 12px; border:3px solid #e4e9f4; border-radius:15px; background:#fff; font-size:28px; font-weight:900; letter-spacing:2px; } .answer-display.empty { color:#bdc6d7; font-size:14px; letter-spacing:0; }
		.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .key { min-height:48px; border-radius:13px; background:#f0f4fb; font-size:19px; font-weight:900; transition:transform .12s, background .12s; } .key:hover { background:#e0eaff; transform:scale(1.03); } .key.delete { color:#e45d78; } .key.submit { color:#fff; background:var(--green); }
		.feedback { min-height:26px; margin:11px 0 0; text-align:center; font-weight:900; } .feedback.ok { color:var(--green); animation:bounce .5s; } .feedback.bad { color:#e46b4f; }
		.game-tools { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; } .tool { min-height:48px; border-radius:14px; background:#fff5cf; color:#a3650b; font-weight:900; } .tool.guess { background:#ffe3ed; color:#bc4663; grid-column:1/-1; }
		.modal-backdrop { position:fixed; inset:0; z-index:4; display:none; place-items:center; padding:20px; background:rgba(28,42,69,.42); backdrop-filter:blur(6px); } .modal-backdrop.open { display:grid; } .modal { width:min(450px,100%); padding:28px; border-radius:28px; background:#fff; box-shadow:0 25px 70px rgba(27,45,81,.25); animation:pop .28s ease; } .modal h3 { margin:0 0 7px; font:800 31px/1 'Baloo 2'; } .modal p { color:var(--muted); font-weight:700; } .modal input { width:100%; min-height:52px; padding:0 15px; border:2px solid #dfe6f1; border-radius:14px; outline:0; } .modal input:focus { border-color:var(--blue); } .modal-actions { display:flex; gap:10px; margin-top:17px; } .modal-actions button { flex:1; }
		.lives-modal { text-align:center; } .lives-icon { margin-bottom:5px; font-size:58px; } .lost-score { display:block; margin:4px 0 18px; color:var(--blue); font:800 30px/1 'Baloo 2'; }
		.result { max-width:680px; margin:8vh auto 0; padding:35px; text-align:center; } .result .trophy { font-size:66px; animation:float 2.5s ease-in-out infinite; } .result h2 { margin:5px 0; font:800 clamp(42px,7vw,70px)/.9 'Baloo 2'; color:var(--pink); } .result h3 { margin:8px 0 25px; font-size:22px; } .result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:25px; } .result-grid div { padding:14px 8px; border-radius:15px; background:#f4f7ff; } .result-grid small { display:block; color:var(--muted); font-size:11px; font-weight:900; } .result-grid b { font-size:23px; }
		.confetti { position:fixed; inset:0; z-index:5; pointer-events:none; overflow:hidden; } .confetti i { position:absolute; top:-20px; width:10px; height:18px; animation:fall 2.7s linear forwards; }
		.toast { position:fixed; left:50%; bottom:22px; z-index:6; transform:translate(-50%,20px); opacity:0; padding:13px 18px; border-radius:14px; color:#fff; background:var(--ink); font-weight:900; transition:.25s; pointer-events:none; } .toast.show { opacity:1; transform:translate(-50%,0); }
		@keyframes appear { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} } @keyframes draw { to{stroke-dashoffset:0} } @keyframes pop { from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)} } @keyframes bounce { 50%{transform:scale(1.1)} } @keyframes float { 50%{transform:translateY(-10px) rotate(5deg)} } @keyframes fall { to{transform:translateY(110vh) rotate(600deg)} }
		@media (max-width:850px) { .hero, .game-layout { grid-template-columns:1fr; } .hero { min-height:auto; } .hero-copy { text-align:center; } .hero-copy > p { margin-left:auto; margin-right:auto; } .main-actions { justify-content:center; } .game-head { align-items:start; flex-direction:column; } .stats { justify-content:flex-start; } .canvas-wrap { min-height:280px; } }
		@media (max-width:520px) { .app { padding-top:15px; } .brand p { display:none; } .brand h1 { font-size:27px; } .hero h2 { font-size:58px; } .feature-row { grid-template-columns:1fr; } .feature { padding:13px; } .topbar { margin-bottom:12px; } .stat { min-width:85px; padding:8px; } .stat b { font-size:17px; } .drawing-panel, .question-panel { padding:14px; } .result { padding:23px 16px; margin-top:5vh; } .choice-options { grid-template-columns:1fr; } }
		@media (max-width:700px) {
			body { overflow-x:hidden; }
			.app { width:100%; padding:12px 10px 28px; }
			.topbar { align-items:center; gap:8px; margin-bottom:14px; }
			.brand { min-width:0; gap:9px; }
			.brand-mark { width:44px; height:44px; border-radius:14px; font-size:23px; box-shadow:0 6px 0 #eab342; }
			.brand h1 { overflow:hidden; font-size:24px; white-space:nowrap; text-overflow:ellipsis; }
			.top-actions { flex-shrink:0; gap:6px; }
			.pill { min-height:40px; padding:0 10px; border-radius:12px; font-size:12px; }
			.icon-button { width:40px; min-height:40px; border-radius:12px; }
			.game-head { gap:12px; }
			.game-head h2 { font-size:28px; }
			.round-label { font-size:12px; }
			.stats { display:grid; grid-template-columns:repeat(3,1fr); width:100%; gap:6px; }
			.stat { min-width:0; padding:8px 4px; border-radius:13px; }
			.stat small { font-size:9px; }
			.stat b { font-size:17px; }
			.panel { border-radius:21px; }
			.drawing-panel { padding:10px; }
			.canvas-wrap { min-height:230px; aspect-ratio:1.2; border-radius:17px; }
			#drawing { width:96%; height:96%; }
			#drawing .segment { stroke-width:10; }
			.progress-line { gap:8px; margin-top:10px; font-size:12px; }
			.progress-track { height:10px; }
			.question-panel { padding:14px 12px 16px; }
			.question-panel .question-top { display:none; }
			.question-panel.column-math .question { display:none; }
			.question-top { margin-bottom:8px; }
			.level-badge { padding:6px 9px; font-size:11px; }
			.question-panel.column-math .question { min-height:58px; font-size:27px; border-radius:15px; }
			.question-help { font-size:12px; }
			.math-work { width:205px; margin-top:10px; padding:10px 14px 11px; }
			.math-grid { grid-template-columns:repeat(var(--digits), 28px); }
			.math-digit, .math-carry { width:28px; }
			.math-digit { font-size:23px; }
			.math-operator { top:54px; font-size:21px; }
			.math-help { font-size:10px; line-height:1.15; }
			.answer-display { min-height:55px; margin:12px 0 10px; font-size:25px; }
			.keypad { gap:7px; }
			.key { min-height:53px; border-radius:12px; font-size:19px; }
			.feedback { min-height:36px; margin:9px 0 0; font-size:14px; }
			.game-tools { gap:8px; margin-top:10px; }
			.tool { min-height:49px; padding:0 6px; font-size:13px; }
			.modal { padding:22px 18px; border-radius:22px; }
			.modal h3 { font-size:27px; }
		}
		@media (max-width:390px) {
			.brand h1 { font-size:21px; }
			.pill { font-size:0; width:40px; padding:0; }
			.pill::first-letter { font-size:18px; }
			.hero h2 { font-size:51px; }
			.main-actions .primary, .main-actions .secondary { width:100%; }
			.mode-button, .level-button { flex:1; padding:9px 5px; font-size:10px; }
			.mode-select, .level-select { gap:5px; }
			.mode-select > span, .level-select > span { width:100%; text-align:left; }
		}