/* ==========================================================
   TEZKOR HISOBLASH — ERTAKONA O'RMON LABORATORIYASI
   ========================================================== */
:root{
  --tz-ink:#303a31;
  --tz-muted:#697469;
  --tz-paper:#fff9e9;
  --tz-paper-deep:#ead7ae;
  --tz-green:#356b49;
  --tz-green-deep:#1d4833;
  --tz-moss:#7da75b;
  --tz-gold:#e3b24c;
  --tz-red:#c4543e;
  --tz-blue:#4d7890;
  --tz-shadow:0 25px 64px rgba(34,69,48,.21);
  --tz-soft-shadow:0 12px 27px rgba(34,69,48,.15);
  --tz-display:"Baloo 2",system-ui,sans-serif;
  --tz-body:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.tezkor-fairytale{margin:0;min-height:100vh;overflow-x:hidden;color:var(--tz-ink);background:#dce6c9;font-family:var(--tz-body);-webkit-tap-highlight-color:transparent}
body.tezkor-fairytale button,body.tezkor-fairytale input{font-family:inherit}

.tz-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#edf3e5 0%,#e8edcf 41%,#cadb9f 100%)}
.tz-glow{position:absolute;left:62%;top:-9%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,253,230,.97),rgba(255,237,169,.44) 36%,transparent 70%)}
.tz-ray{position:absolute;left:66%;top:-5%;width:110px;height:75%;transform-origin:top center;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,252,225,.48),rgba(255,252,225,0));filter:blur(3px);mix-blend-mode:screen;animation:tzRay 8s ease-in-out infinite}
.tz-ray.r2{left:74%;width:150px;transform:rotate(13deg);animation-delay:-3s}.tz-ray.r3{left:56%;width:75px;transform:rotate(-14deg);animation-delay:-5s}
@keyframes tzRay{50%{opacity:.44;filter:blur(6px)}}
.tz-hills{position:absolute;left:-7%;right:-7%;border-radius:50% 50% 0 0}
.tz-hills.far{height:34%;bottom:35%;background:#9eaea9;opacity:.68;clip-path:polygon(0 100%,0 67%,10% 49%,22% 70%,33% 39%,45% 68%,56% 31%,68% 66%,80% 43%,91% 69%,100% 52%,100% 100%)}
.tz-hills.mid{height:32%;bottom:24%;background:#86a56c;opacity:.86;clip-path:polygon(0 100%,0 62%,13% 42%,25% 66%,39% 35%,51% 71%,62% 45%,75% 68%,87% 37%,100% 61%,100% 100%)}
.tz-field{position:absolute;left:-8%;right:-8%;bottom:0;height:39%;border-radius:50% 50% 0 0/25% 25% 0 0;background:linear-gradient(180deg,#bcd37d,#668e48 83%)}
.tz-field::after{content:"";position:absolute;inset:0;background:radial-gradient(260px 80px at 20% 28%,rgba(255,239,143,.30),transparent 75%),radial-gradient(300px 95px at 74% 21%,rgba(255,239,143,.26),transparent 75%),radial-gradient(220px 82px at 50% 68%,rgba(37,77,41,.25),transparent 78%)}
.tz-tree{position:absolute;bottom:2%;width:180px;height:430px}
.tz-tree.left{left:-36px}.tz-tree.right{right:-42px;transform:scaleX(-1)}
.tz-tree .trunk{position:absolute;left:50%;bottom:0;width:42px;height:310px;border-radius:50% 45% 18% 28%;background:linear-gradient(90deg,#5a422f,#957352 50%,#59412e);transform:translateX(-50%) rotate(4deg)}
.tz-tree .trunk::before{content:"";position:absolute;left:-55px;top:78px;width:124px;height:22px;border-radius:20px;background:#624936;transform:rotate(-35deg)}
.tz-tree .leaf{position:absolute;border-radius:52% 48% 50% 50%;background:#315e3b;box-shadow:inset -24px -26px 0 rgba(18,55,34,.28),inset 18px 16px 0 rgba(151,187,95,.22)}
.tz-tree .leaf.a{width:190px;height:155px;left:-3px;top:18px}.tz-tree .leaf.b{width:126px;height:110px;left:-36px;top:122px;background:#3b7143}.tz-tree .leaf.c{width:112px;height:96px;right:-35px;top:112px;background:#477d48}
.tz-fireflies{position:absolute;inset:0;opacity:.65;background-image:radial-gradient(circle,#fff0a5 0 2px,transparent 2.7px);background-size:95px 72px;animation:fireflies 7s ease-in-out infinite}
@keyframes fireflies{50%{opacity:.32;transform:translateY(-7px)}}

.tz-main{position:relative;z-index:2;padding:116px 0 74px;min-height:100vh}
.tz-container{width:min(1120px,calc(100% - 34px));margin:0 auto}
.tz-hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:center;padding:38px 0 28px}
.tz-kicker{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,249,230,.80);border:1px solid rgba(255,255,255,.9);box-shadow:var(--tz-soft-shadow);font-size:12px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--tz-green-deep)}
.tz-hero h1{margin:15px 0 12px;font-family:var(--tz-display);font-size:clamp(47px,7vw,82px);line-height:.94;color:#fff8dc;text-shadow:0 5px 0 rgba(39,77,50,.35),0 13px 26px rgba(32,63,44,.2)}
.tz-hero h1 span{display:block;color:#f1c95d}
.tz-hero p{max-width:680px;margin:0;color:#3d4d40;font-size:clamp(16px,1.7vw,19px);font-weight:800;line-height:1.7}
.tz-hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:21px}
.tz-small-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;border-radius:16px;text-decoration:none;background:rgba(255,249,230,.72);color:var(--tz-green-deep);font-family:var(--tz-display);font-weight:800;border:1px solid rgba(255,255,255,.82);box-shadow:var(--tz-soft-shadow)}
.tz-clock-stage{position:relative;width:320px;height:320px;margin:auto;display:grid;place-items:center}
.tz-clock-stage::before{content:"";position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 45% 35%,#fffbe9,#eddbaf 68%,#c69a4d);border:8px solid rgba(255,255,255,.82);box-shadow:0 24px 60px rgba(39,73,49,.25),inset 0 0 0 4px rgba(161,105,36,.22)}
.tz-clock-stage::after{content:"";position:absolute;left:50%;bottom:1px;width:190px;height:28px;border-radius:50%;background:rgba(38,66,39,.16);transform:translateX(-50%);filter:blur(4px)}
.tz-clock-face{position:relative;z-index:1;width:222px;height:222px;border-radius:50%;border:6px solid #3e704c;background:radial-gradient(circle,#fffdfa,#f6edce);box-shadow:inset 0 0 0 5px #d6b65c}
.tz-clock-face i{position:absolute;left:50%;top:50%;width:8px;height:72px;margin-left:-4px;margin-top:-69px;border-radius:8px;background:#3a5b45;transform-origin:50% 68px;transform:rotate(32deg)}
.tz-clock-face i:last-child{height:55px;margin-top:-52px;background:#bf4d3d;transform-origin:50% 51px;transform:rotate(124deg)}
.tz-clock-face b{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:#e1ac42;border:3px solid #fff;transform:translate(-50%,-50%)}
.tz-clock-face span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--tz-display);font-weight:800;color:#546256;font-size:17px}
.tz-clock-face span:nth-of-type(1){transform:translateY(-83px)}.tz-clock-face span:nth-of-type(2){transform:translateX(84px)}.tz-clock-face span:nth-of-type(3){transform:translateY(83px)}.tz-clock-face span:nth-of-type(4){transform:translateX(-84px)}
.tz-clock-bird{position:absolute;z-index:2;right:15px;top:35px;font-size:62px;filter:drop-shadow(0 9px 7px rgba(44,63,41,.18));animation:birdBob 3.6s ease-in-out infinite}
@keyframes birdBob{50%{transform:translateY(-8px) rotate(3deg)}}

.tz-workbench{position:relative;padding:31px;border-radius:38px;background:linear-gradient(180deg,rgba(255,249,232,.92),rgba(241,226,191,.90));border:4px solid rgba(255,255,255,.84);box-shadow:var(--tz-shadow);overflow:hidden}
body.tz-focus .tz-hero{display:none}
body.tz-focus .tz-main{padding-top:136px}
body.tz-focus .tz-workbench{margin-top:0}
.tz-workbench::before{content:"";position:absolute;inset:11px;border:1px solid rgba(177,120,40,.25);border-radius:27px;pointer-events:none}
.tz-workbench::after{content:"✦";position:absolute;right:24px;top:16px;color:#c99635;font-size:25px;opacity:.55}
.wrap{position:relative;z-index:1;max-width:940px;margin:0 auto}
.bar{display:flex;align-items:center;gap:13px;margin-bottom:17px}
.bar a{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;text-decoration:none;color:var(--tz-green-deep);background:#fff9e9;border:2px solid #fff;box-shadow:0 6px 0 rgba(116,85,39,.17);font-size:20px;font-weight:900}
.bar h2{margin:0;font-family:var(--tz-display);font-size:27px;color:var(--tz-green-deep)}
.bar h2 b{color:#b64c39}
.panel{position:relative;padding:25px 26px 27px;border-radius:29px;background:rgba(255,255,255,.58);border:2px solid rgba(255,255,255,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.84)}
.panel h2{margin:0 0 5px;font-family:var(--tz-display);font-size:25px;color:var(--tz-green-deep)}
.panel .hint{margin-bottom:19px;color:var(--tz-muted);font-size:13px;font-weight:800}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.group{position:relative;margin:0;padding:17px;border-radius:22px;background:rgba(255,250,236,.74);border:1px solid rgba(171,139,78,.18)}
.group.wide{grid-column:1/-1}
.group>label{display:block;margin-bottom:10px;font-size:14px;font-weight:900;color:#465449}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{position:relative;min-height:44px;padding:10px 14px;border:2px solid #dfd4bc;border-radius:15px;background:#fffdf5;color:#566259;font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 4px 0 rgba(116,85,39,.09);transition:.14s ease}
.opt:hover{transform:translateY(-2px);border-color:#a9bb8b}
.opt[aria-pressed="true"]{color:#fff;border-color:#3f7651;background:linear-gradient(155deg,#5b9362,#326946);box-shadow:0 5px 0 rgba(36,81,53,.24)}
.opt.op[aria-pressed="true"]{border-color:#bd4d3a;background:linear-gradient(155deg,#dc674c,#af4033);box-shadow:0 5px 0 rgba(115,45,35,.25)}
.custom-timer{display:flex;align-items:center;gap:9px;margin-top:11px;color:#5c675f;font-weight:900}
.custom-timer input{width:105px;min-height:44px;padding:9px 12px;border:2px solid #ddd1b9;border-radius:14px;background:#fffdf6;color:#354138;font-weight:900;font-size:15px;outline:none}
.custom-timer input:focus{border-color:#6d9d63;box-shadow:0 0 0 4px rgba(109,157,99,.13)}
.start{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;margin-top:20px;padding:14px;border:0;border-radius:20px;color:#fff;background:linear-gradient(155deg,#d65d43,#a83c30);box-shadow:0 8px 0 rgba(110,42,33,.27),0 14px 23px rgba(110,42,33,.18);font-family:var(--tz-display);font-size:21px;font-weight:800;cursor:pointer;transition:.14s ease}
.start:hover{transform:translateY(-3px)}.start:active{transform:translateY(3px);box-shadow:0 4px 0 rgba(110,42,33,.27)}

#drill{display:none}
#drill.on{display:block;animation:tzFade .34s ease}
@keyframes tzFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hud{display:flex;align-items:center;gap:12px;margin-bottom:17px}
.chip{padding:9px 14px;border-radius:999px;background:#fff9e9;border:2px solid #fff;box-shadow:var(--tz-soft-shadow);font-size:14px;font-weight:900;color:#485649}
.timer{flex:1;height:16px;padding:3px;border-radius:999px;background:rgba(255,255,255,.60);box-shadow:inset 0 2px 5px rgba(38,74,48,.15)}
.timer>i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#599764,#e2c153,#cf5d43);box-shadow:0 0 12px rgba(226,193,83,.42);transition:width 1s linear}
.tnum{min-width:64px;text-align:center;padding:6px 11px;border-radius:15px;background:#3d704d;color:#fff;box-shadow:0 5px 0 rgba(30,74,50,.25);font-family:var(--tz-display);font-size:21px;font-weight:800}
.drill-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:18px;align-items:stretch}
.qbox{position:relative;min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;border-radius:30px;background:linear-gradient(180deg,#fffaf0,#edddb9);border:5px solid rgba(255,255,255,.88);box-shadow:var(--tz-shadow);text-align:center;overflow:hidden}
.qbox::before{content:"";position:absolute;inset:9px;border:1px solid rgba(177,119,40,.27);border-radius:20px;pointer-events:none}
.qbox::after{content:"✦";position:absolute;right:20px;top:16px;color:#c69333;font-size:24px;opacity:.48}
.qbox .prob{position:relative;z-index:1;font-family:var(--tz-display);font-size:clamp(45px,7vw,76px);font-weight:800;line-height:1;color:#334338;text-shadow:0 3px 0 rgba(255,255,255,.7)}
.qbox .inp{position:relative;z-index:1;min-width:150px;min-height:65px;margin-top:18px;padding:0 15px;border-bottom:4px dashed rgba(80,115,82,.35);color:#4b7c61;font-family:var(--tz-display);font-size:clamp(32px,5vw,48px);font-weight:800}
.qbox.ok{animation:tzPop .35s ease}.qbox.no{animation:tzShake .35s ease}
@keyframes tzPop{40%{transform:scale(1.035)}}@keyframes tzShake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:17px;border-radius:28px;background:rgba(47,94,61,.88);border:4px solid rgba(255,255,255,.22);box-shadow:var(--tz-shadow)}
.key{min-height:68px;border:2px solid rgba(255,255,255,.72);border-radius:20px;background:linear-gradient(180deg,#fff9e7,#e8d5ad);color:#3d4b40;box-shadow:0 7px 0 rgba(20,53,34,.22);font-family:var(--tz-display);font-size:27px;font-weight:800;cursor:pointer;transition:.1s ease}
.key:hover{transform:translateY(-2px)}.key:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(20,53,34,.22)}
.key.act{background:linear-gradient(180deg,#7a9cb2,#4c7189);color:#fff}.key.go{background:linear-gradient(180deg,#79ad68,#3b774f);color:#fff}

#result{display:none;text-align:center}
#result.on{display:block;animation:tzFade .34s ease}
.result-card{position:relative;padding:36px 28px;border-radius:32px;background:linear-gradient(180deg,#fff9e9,#efdcb6);border:5px solid rgba(255,255,255,.88);box-shadow:var(--tz-shadow);overflow:hidden}
.result-card::before{content:"";position:absolute;inset:9px;border:1px solid rgba(177,119,40,.27);border-radius:21px;pointer-events:none}
.result-card .result-icon{font-size:55px;filter:drop-shadow(0 8px 6px rgba(80,58,24,.18))}
.big{font-family:var(--tz-display);font-size:68px;line-height:1;color:#3d7a51;text-shadow:0 3px 0 rgba(255,255,255,.75)}
.result-card h2{margin:7px 0;font-family:var(--tz-display);font-size:34px;color:#33463a}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:23px 0}
.row div{padding:14px 8px;border-radius:19px;background:rgba(255,255,255,.56);color:#718074;font-size:13px;font-weight:900}
.row b{display:block;margin-top:2px;color:#34443a;font-family:var(--tz-display);font-size:28px}
.actions{display:flex;gap:12px;justify-content:center}
.btn{flex:1;min-height:52px;border:0;border-radius:18px;color:#fff;background:linear-gradient(155deg,#d55c43,#a73b30);box-shadow:0 7px 0 rgba(108,42,33,.25);font-family:var(--tz-display);font-size:17px;font-weight:800;cursor:pointer}
.btn.ghost{color:#3a4e3e;background:#fff9e8;box-shadow:0 7px 0 rgba(124,91,42,.15)}

@media(max-width:900px){.tz-hero{grid-template-columns:1fr;text-align:center}.tz-hero p{margin:auto}.tz-hero-links{justify-content:center}.tz-clock-stage{width:280px;height:280px}.tz-clock-face{width:195px;height:195px}.tz-clock-face span:nth-of-type(1){transform:translateY(-72px)}.tz-clock-face span:nth-of-type(2){transform:translateX(73px)}.tz-clock-face span:nth-of-type(3){transform:translateY(72px)}.tz-clock-face span:nth-of-type(4){transform:translateX(-73px)}.drill-grid{grid-template-columns:1fr}.qbox{min-height:270px}.pad{max-width:520px;margin:auto;width:100%}}
@media(max-width:640px){.tz-main{padding-top:90px}.tz-container{width:min(100% - 20px,1120px)}.tz-hero{padding-top:27px}.tz-hero h1{font-size:clamp(42px,13vw,62px)}.tz-clock-stage{width:245px;height:245px}.tz-clock-face{width:168px;height:168px}.tz-clock-face span:nth-of-type(1){transform:translateY(-61px)}.tz-clock-face span:nth-of-type(2){transform:translateX(62px)}.tz-clock-face span:nth-of-type(3){transform:translateY(61px)}.tz-clock-face span:nth-of-type(4){transform:translateX(-62px)}.tz-workbench{padding:20px 12px;border-radius:29px}.panel{padding:20px 14px;border-radius:24px}.setup-grid{grid-template-columns:1fr}.group.wide{grid-column:auto}.hud{flex-wrap:wrap}.timer{order:3;flex-basis:100%}.qbox{padding:26px 14px}.pad{padding:12px;gap:9px}.key{min-height:61px}.row{grid-template-columns:1fr}.actions{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.tezkor-fairytale *{animation-duration:.001s!important;animation-iteration-count:1!important}}