:root{--bg:#f3f7fc;--panel:#ffffff;--panel2:#eef3fa;--ink:#1c2233;--muted:#5f6b80;--line:#dbe3ee;--acc:#2ecc71;--acc2:#f2c13c;--red:#e74c3c;--blue:#3d8ee6;--radius:18px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:linear-gradient(180deg,#f9fbff 0%,var(--bg) 100%);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;font-size:18px}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;border-radius:14px;padding:14px 20px;background:var(--panel2);color:var(--ink)}
button:active{transform:scale(.97)}
button.big{font-size:28px;padding:22px 30px;border-radius:22px;background:var(--acc);color:#062b12;font-weight:800;box-shadow:0 6px 0 #1b8d4a}
button.warn{background:var(--red);color:#fff}
button.gold{background:var(--acc2);color:#3a2a00;font-weight:700}
button.ghost{background:transparent;border:2px solid var(--line);color:var(--muted)}
button:disabled{opacity:.4;cursor:default}
#app{max-width:820px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:14px 14px 30px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px 12px}
header.top .em{font-weight:800;font-size:22px;background:var(--panel);padding:8px 14px;border-radius:14px;box-shadow:0 2px 8px rgba(30,50,90,.08)}
header.top .nav{display:flex;gap:6px}
header.top .nav button{padding:8px 12px;font-size:16px;background:var(--panel);box-shadow:0 2px 8px rgba(30,50,90,.08)}
.screen{display:none;flex:1;flex-direction:column;gap:14px}
.screen.on{display:flex}
.card{background:var(--panel);border-radius:var(--radius);padding:18px;box-shadow:0 4px 18px rgba(30,50,90,.08)}
.card h2{margin:0 0 10px;font-size:22px}
.bubble{position:relative;background:#fff8e6;color:#1b2333;border:2px solid #ffe2a3;border-radius:18px;padding:12px 16px;font-size:20px;line-height:1.35;margin-top:36px}
.bubble .who{position:absolute;left:2px;top:-48px;font-size:46px;line-height:1}
.muted{color:var(--muted);font-size:15px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1}
.center{text-align:center}
/* прогресс блоков */
.blocks{display:flex;gap:6px;justify-content:space-between}
.blocks span{flex:1;height:10px;border-radius:6px;background:var(--line)}
.blocks span.done{background:var(--acc)}
.blocks span.cur{background:var(--acc2)}
.timer{font-size:56px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.ring{width:150px;height:150px;border-radius:50%;margin:8px auto;display:grid;place-items:center;font-size:64px;background:conic-gradient(var(--acc) var(--p,0%),var(--line) 0)}
.ring i{width:118px;height:118px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-style:normal}
/* игры */
.stage{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--panel2);border-radius:var(--radius);padding:18px;position:relative;border:1px solid var(--line)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px;width:100%}
.choices button{font-size:42px;font-weight:800;padding:18px 10px;background:#fff;color:#1b2333;border-radius:18px;box-shadow:0 5px 0 #c9d3e2}
.choices button.ok{background:#bff5d0}
.choices button.bad{background:#ffc9c2}
.letter{font-size:150px;font-weight:900;line-height:1;background:#fff;color:#1b2333;padding:8px 40px;border-radius:24px;display:inline-block;box-shadow:0 5px 0 #c9d3e2}
.letter.flip{transform:scaleX(-1)}
.emoji{font-size:110px;line-height:1}
.gostop{width:100%;height:220px;border-radius:24px;display:grid;place-items:center;font-size:56px;font-weight:900;color:#fff;user-select:none}
.gostop.go{background:var(--acc)} .gostop.stop{background:var(--red)} .gostop.wait{background:var(--line);color:var(--muted);font-size:28px}
.window{font-size:84px;font-weight:900;background:#fff;color:#1b2333;padding:10px 40px;border-radius:22px;letter-spacing:4px;min-width:220px;text-align:center;box-shadow:0 5px 0 #c9d3e2}
.arrow{font-size:40px;color:#c9930c}
.text{background:#fff;color:#1b2333;border-radius:18px;padding:18px 22px;font-size:30px;line-height:1.55;width:100%;border:1px solid var(--line)}
.text.small{font-size:22px}
.errbtns{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%}
.errbtns button{font-size:14px;padding:10px 4px;line-height:1.2;background:#fff;border:1px solid var(--line)}
.errbtns button b{display:block;font-size:22px}
.schulte{display:grid;gap:8px;width:100%;max-width:420px}
.schulte button{aspect-ratio:1;font-size:34px;font-weight:800;background:#fff;color:#1b2333;padding:0;box-shadow:0 3px 0 #c9d3e2}
.schulte button.done{background:#bff5d0;color:#6a8a74}
.mood{display:flex;gap:14px;justify-content:center}
.mood button{font-size:52px;background:transparent;padding:6px}
.mood button.sel{background:var(--panel2)}
/* мир */
.world{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;background:#dfe7f2;padding:6px;border-radius:14px}
.world div{aspect-ratio:1;border-radius:3px;background:#f6f9fd;position:relative}
.world div.b{box-shadow:inset -4px -4px 0 rgba(0,0,0,.22), inset 4px 4px 0 rgba(255,255,255,.35)}
.world div.b.new{outline:3px solid #1c2233;animation:pop .6s}
.world div .tag{position:absolute;inset:0;display:grid;place-items:center;font-size:18px}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:12px;background:var(--panel2);border-radius:14px;padding:12px 14px}
.item .ic{font-size:30px}
.item.done{opacity:.6}
.pill{padding:4px 10px;border-radius:999px;background:var(--line);font-size:14px;color:var(--ink)}
.pill.g{background:#1b8d4a;color:#fff}.pill.y{background:#e0a800;color:#2a2000}.pill.r{background:#c0392b;color:#fff}
/* родитель */
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600}
canvas.chart{width:100%;height:190px;background:var(--panel2);border-radius:12px}
input,select,textarea{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid #c9d3e2;background:#fff;color:var(--ink);width:100%}
label{display:block;font-size:14px;color:var(--muted);margin:8px 0 4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.kpi div{background:var(--panel2);border-radius:12px;padding:10px 12px}
.kpi b{display:block;font-size:26px}
.kpi small{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#1c2233;color:#fff;padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.25s}
.toast.on{opacity:1}
.parentbar{position:absolute;right:10px;top:10px;display:flex;gap:6px}
.parentbar button{padding:6px 10px;font-size:14px;background:#fff;border:1px solid var(--line)}
.tag-level{font-size:13px;color:var(--muted)}
@media (max-width:520px){.letter{font-size:110px;padding:6px 26px}.window{font-size:64px}.text{font-size:26px}.choices button{font-size:34px}}