* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root{
	--sky1:#7cc4f0; --sky2:#bfe6fb; --ink:#27302c; --cream:#fff4d6;
	--green:#4ec27a; --green-d:#2f9e57; --blue:#5fa5e6; --orange:#ff9a3c;
	--coral:#ec6b6b; --purple:#9a7be0; --gold:#ffce46;
}
html,body{ height:100%; }
body{
	font-family:'Fredoka',system-ui,Arial,sans-serif;
	color:var(--ink);
	background:linear-gradient(180deg,var(--sky1),var(--sky2));
	min-height:100%;
	overflow-x:hidden;
}
.hidden{ display:none !important; }

/* шапка */
.topbar{
	display:flex; align-items:center; justify-content:space-between;
	padding:12px 18px; background:rgba(255,255,255,.55); backdrop-filter:blur(6px);
	position:sticky; top:0; z-index:20;
}
.logo{ font-weight:700; font-size:26px; color:var(--green-d); letter-spacing:1px; }
.logo span{ color:var(--orange); }
.auth-area{ display:flex; align-items:center; gap:10px; font-size:16px; }
.auth-area .hi{ font-weight:600; }
.cups-badge{ background:var(--gold); color:#7a5500; padding:4px 12px; border-radius:20px; font-weight:600; }

button{ font-family:inherit; cursor:pointer; border:none; }
.btn{ padding:9px 16px; border-radius:14px; font-weight:600; font-size:16px; color:#fff; }
.btn-green{ background:var(--green); box-shadow:0 4px 0 var(--green-d); }
.btn-ghost{ background:rgba(255,255,255,.7); color:var(--ink); }
.btn:active{ transform:translateY(2px); }

/* главная */
.view{ padding:22px 16px 60px; max-width:1000px; margin:0 auto; }
.home-title{ font-size:34px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.12); }
.home-sub{ color:#eaffff; margin:2px 0 20px; font-size:18px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; }
.gamecard{
	background:#fff; border-radius:22px; padding:16px; text-align:center;
	box-shadow:0 8px 18px rgba(0,0,0,.12); transition:transform .12s; border:4px solid #fff;
}
.gamecard:not(.soon):hover{ transform:translateY(-4px); border-color:var(--gold); }
.gamecard-art{
	height:120px; border-radius:16px; display:flex; align-items:center; justify-content:center;
	gap:8px; font-size:48px; font-weight:700; color:#fff; margin-bottom:10px;
}
.art-schitai{ background:linear-gradient(135deg,#6fc1e8,#4e8fd6); }
.art-num{ background:rgba(255,255,255,.25); padding:4px 14px; border-radius:12px; }
.art-soon{ background:#cfd6da; font-size:46px; }
.gamecard-name{ font-size:20px; font-weight:600; }
.gamecard-sub{ font-size:14px; color:#7a857f; }
.gamecard.soon{ opacity:.65; cursor:default; }

.back-home{ background:rgba(255,255,255,.8); color:var(--ink); padding:8px 16px; border-radius:14px; font-weight:600; font-size:16px; margin-bottom:12px; }

/* модалка входа */
.modal{ position:fixed; inset:0; background:rgba(20,30,40,.5); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal-box{ background:#fff; border-radius:24px; padding:26px 22px; width:100%; max-width:360px; position:relative; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.modal-box h2{ font-size:26px; margin-bottom:16px; text-align:center; }
.modal-box input{ width:100%; padding:13px 14px; margin-bottom:12px; border:2px solid #dfe6ea; border-radius:14px; font-family:inherit; font-size:17px; }
.modal-box input:focus{ outline:none; border-color:var(--blue); }
.modal-close{ position:absolute; top:10px; right:14px; background:none; font-size:28px; color:#9aa; line-height:1; }
.btn-primary{ width:100%; padding:14px; border-radius:16px; background:var(--green); color:#fff; font-size:18px; font-weight:600; box-shadow:0 4px 0 var(--green-d); }
.btn-primary:active{ transform:translateY(2px); }
.auth-error{ color:var(--coral); font-size:14px; min-height:18px; margin-bottom:6px; text-align:center; }
.auth-switch{ text-align:center; margin-top:14px; font-size:15px; color:#7a857f; }
.auth-switch a{ color:var(--blue); font-weight:600; text-decoration:none; margin-left:6px; }

/* ===== ИГРА «Учимся считать» ===== */
#gameRoot{ position:relative; }
.lobby{ text-align:center; }
.lobby-bar{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:8px; font-size:20px; font-weight:600; }
.lobby-cups{ background:var(--gold); color:#7a5500; padding:6px 16px; border-radius:20px; }
.lobby-title{ font-size:28px; color:var(--green-d); margin-bottom:16px; }
.locs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; max-width:820px; margin:0 auto; }
.loc{ position:relative; background:#fff; border-radius:22px; padding:16px; box-shadow:0 8px 18px rgba(0,0,0,.12); }
.loc-art{ height:130px; border-radius:16px; display:flex; align-items:flex-end; justify-content:center; position:relative; overflow:hidden; }
.loc-name{ font-size:20px; font-weight:600; margin:10px 0 6px; }
.loc-done{ color:var(--green-d); font-size:14px; font-weight:600; min-height:18px; }
.loc-play{ width:100%; padding:12px; border-radius:14px; background:var(--green); color:#fff; font-size:18px; font-weight:600; box-shadow:0 4px 0 var(--green-d); }
.loc-play:active{ transform:translateY(2px); }
.loc-lock{ position:absolute; inset:0; background:rgba(40,46,42,.72); border-radius:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; gap:8px; }
.loc-lock .pad{ font-size:46px; }
.loc-lock .need{ font-size:15px; }
.loc-tag{ position:absolute; top:8px; right:10px; background:rgba(255,255,255,.88); color:#27302c; font-size:13px; padding:2px 9px; border-radius:10px; font-weight:600; z-index:2; }

/* сцена мини-игры */
.scene{ position:relative; width:100%; max-width:820px; margin:0 auto; height:min(74vh,560px); border-radius:22px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.scene-top{ position:absolute; top:0; left:0; right:0; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; z-index:6; }
.scene-back{ background:rgba(255,255,255,.85); padding:7px 14px; border-radius:12px; font-weight:600; font-size:15px; }
.scene-prog{ background:rgba(255,255,255,.85); padding:7px 14px; border-radius:12px; font-weight:600; font-size:15px; }
.scene-q{ position:absolute; top:54px; left:0; right:0; text-align:center; font-size:clamp(30px,7vw,56px); font-weight:700; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.18); z-index:5; }
.scene-info{ position:absolute; top:140px; left:0; right:0; text-align:center; font-size:clamp(16px,3.5vw,22px); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.18); z-index:5; padding:0 10px; }
.scene-controls{ position:absolute; bottom:14px; left:0; right:0; display:flex; gap:10px; justify-content:center; padding:0 12px; z-index:6; }
.cbtn{ flex:1; max-width:200px; padding:14px 8px; border-radius:16px; color:#fff; font-size:clamp(15px,3.5vw,20px); font-weight:600; box-shadow:0 4px 0 rgba(0,0,0,.2); }
.cbtn:active{ transform:translatey(2px); }
.cbtn-blue{ background:var(--blue); } .cbtn-orange{ background:var(--orange); } .cbtn-coral{ background:var(--coral); } .cbtn-green{ background:var(--green); }

/* пруд */
.pond{ background:linear-gradient(180deg,#9bd3e0,#3e8d92); }
.numline{ position:absolute; bottom:118px; left:0; right:0; display:flex; gap:6px; padding:0 12px; overflow-x:hidden; overflow-y:hidden; }
.pad{ flex:0 0 auto; width:42px; height:42px; background:var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:19px; border:2px solid var(--green-d); }
.hopper{ position:absolute; bottom:180px; width:42px; height:42px; background:#78c85a; border-radius:50%; display:flex; align-items:center; justify-content:center; gap:4px; transition:left .12s ease, bottom .12s ease; transform:translateX(-50%); }
.hopper .eye{ width:11px; height:11px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.hopper .eye::after{ content:''; width:5px; height:5px; background:var(--ink); border-radius:50%; }

/* озеро */
.lake{ background:linear-gradient(180deg,#8fc6e6,#3f7fb0); }
.fish{ position:absolute; width:74px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:20px; transition:left 2.6s ease-in-out, top 2.6s ease-in-out; transform:translate(-50%,-50%); }
.fish .tail{ position:absolute; left:-10px; width:22px; height:22px; background:inherit; transform:rotate(45deg); border-radius:4px; }
.fish .feye{ position:absolute; right:8px; top:12px; width:14px; height:14px; background:#fff; border-radius:50%; }
.fish .feye::after{ content:''; position:absolute; left:3px; top:3px; width:7px; height:7px; background:var(--ink); border-radius:50%; }
.fish .fnum{ position:relative; z-index:2; }

/* кафе */
.cafe{ background:linear-gradient(180deg,#a7d39a,#6f9e63); }
.cafe-wood{ position:absolute; bottom:0; left:0; right:0; height:34%; background:#a8784e; }
.bowl{ position:absolute; bottom:90px; left:50%; transform:translateX(-50%); width:42%; max-width:260px; height:90px; background:#cda573; border-radius:0 0 120px 120px / 0 0 70px 70px; border:4px solid #9a704a; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:6px; padding:8px; }
.berry{ width:18px; height:18px; background:var(--purple); border-radius:50%; }

/* гонка */
.race{ background:linear-gradient(180deg,#bfe6a0,#7cb968); }
.race-track{ position:absolute; left:0; right:0; height:46px; background:rgba(120,90,50,.32); z-index:1; }
.race-track1{ top:42%; }
.race-track2{ top:58%; }
.race-finish{ position:absolute; right:5%; top:40%; font-size:42px; z-index:3; }
.runner{ position:absolute; font-size:42px; transition:left .35s ease; transform:translateX(-50%); z-index:5; }

/* победа */
.win{ text-align:center; padding:30px 16px; }
.win .cup{ font-size:90px; }
.win h2{ font-size:30px; color:var(--green-d); margin:10px 0; }
.win p{ font-size:18px; color:#5a6b60; margin-bottom:18px; }

@media (max-width:520px){
	.home-title{ font-size:28px; }
	.scene{ height:74vh; }
}