:root{
  --yellow:#F5C451; --yellow-d:#D9A62E;
  --navy:#1F2250; --navy-soft:#6B6F9E;
  --bg:#EEF0FB; --card:#fff; --line:#DADDF3;
  --red:#E8384F; --red-d:#B92A3D;
  --blue:#3B6EF5; --blue-d:#2A52C4;
  --gold:#D18A00; --gold-d:#9C6700;
  --green:#14A36F; --green-d:#0C7A53;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  font-family:'Fredoka','Nunito',system-ui,sans-serif;
  color:var(--navy);background:var(--bg);
  background-image:radial-gradient(#C9CDE8 1.2px,transparent 1.2px);
  background-size:22px 22px;min-height:100vh;
}
.ar{font-family:'Amiri','Noto Naskh Arabic',serif;direction:rtl}
.wrap{max-width:560px;margin:0 auto;padding:12px 14px 96px}

/* header */
.top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.logo{width:54px;height:54px;border-radius:16px;background:var(--yellow);
  box-shadow:0 5px 0 var(--yellow-d);display:flex;align-items:center;justify-content:center;
  font-family:'Amiri',serif;font-size:34px;font-weight:700;flex:none}
.brand{flex:1;min-width:0}
.brand b{display:block;font-size:20px;line-height:1.1}
.brand span{font-size:13px;color:var(--navy-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* 3D buttons */
.btn{
  appearance:none;border:0;cursor:pointer;font:inherit;font-weight:600;color:var(--navy);
  background:#fff;border-radius:16px;padding:12px 18px;
  box-shadow:0 5px 0 var(--line),0 0 0 2px var(--line) inset;
  transition:transform .08s,box-shadow .08s;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line),0 0 0 2px var(--line) inset}
.btn.primary{background:var(--yellow);box-shadow:0 6px 0 var(--yellow-d)}
.btn.primary:active{transform:translateY(5px);box-shadow:0 1px 0 var(--yellow-d)}
.btn.block{display:block;width:100%;font-size:18px;padding:15px}
.btn.small{padding:8px 12px;font-size:14px;border-radius:12px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* cards */
.card{background:var(--card);border-radius:26px;padding:20px;margin-bottom:16px;
  box-shadow:0 6px 0 #D5D8F1,0 0 0 2px var(--line) inset}
h1{font-size:30px;margin:6px 0 10px}
h2{font-size:23px;margin:4px 0 10px}
p{line-height:1.5;margin:6px 0}
.muted{color:var(--navy-soft)}
.row{display:flex;gap:10px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* hero stars */
.stars{display:flex;gap:6px;margin-bottom:6px}
.star{width:34px;height:34px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.18))}

/* section tiles */
.tile{display:block;text-decoration:none;color:var(--navy);text-align:center;
  border-radius:22px;padding:18px 8px;font-weight:700;font-size:17px;
  background:#fff;box-shadow:0 6px 0 var(--line),0 0 0 2px var(--line) inset;transition:.08s}
.tile:active{transform:translateY(5px);box-shadow:0 1px 0 var(--line)}
.tile .ico{font-size:34px;display:block;margin-bottom:4px}
.tile.y{background:var(--yellow);box-shadow:0 6px 0 var(--yellow-d)}
.tile.g{background:var(--green);color:#fff;box-shadow:0 6px 0 var(--green-d)}
.tile.b{background:var(--blue);color:#fff;box-shadow:0 6px 0 var(--blue-d)}
.tile.r{background:var(--red);color:#fff;box-shadow:0 6px 0 var(--red-d)}

/* bottom nav */
nav.bottom{position:fixed;left:0;right:0;bottom:0;background:#fff;
  border-top:2px solid var(--line);display:flex;justify-content:center;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:9}
nav.bottom .in{display:flex;gap:6px;width:100%;max-width:560px}
nav.bottom a{flex:1;text-align:center;text-decoration:none;color:var(--navy-soft);
  font-size:12px;font-weight:600;padding:6px 2px;border-radius:14px}
nav.bottom a i{font-style:normal;display:block;font-size:22px}
nav.bottom a.on{background:var(--yellow);color:var(--navy);box-shadow:0 4px 0 var(--yellow-d)}

/* book list */
.book{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.cover{width:64px;height:82px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:30px;flex:none;box-shadow:0 5px 0 rgba(0,0,0,.2)}
.tag{display:inline-block;background:#E9ECFB;border-radius:10px;padding:2px 9px;font-size:12px;font-weight:600;margin:2px 4px 0 0}

/* forms */
label{display:block;font-weight:700;margin:12px 0 6px}
input{width:100%;font:inherit;font-size:18px;padding:14px;border-radius:16px;
  border:2px solid var(--line);background:#F3F4FD;color:var(--navy)}
input:focus{outline:none;border-color:var(--navy);background:#fff}

/* quiz */
.bar{height:14px;background:#fff;border-radius:99px;border:2px solid var(--line);overflow:hidden;margin:8px 0 14px}
.bar i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .3s}
.qhead{display:flex;justify-content:space-between;font-weight:700;color:var(--navy-soft)}
.qhead b{color:var(--navy)}
.qtext{text-align:center;font-weight:700;font-size:20px;margin:16px 0 4px}
.qword{text-align:center;font-size:64px;line-height:1.6;margin:0 0 10px}
.ans{display:flex;align-items:center;gap:14px;width:100%;color:#fff;border:0;border-radius:18px;
  padding:20px 16px;margin-bottom:14px;font:inherit;font-size:20px;font-weight:700;text-align:left;cursor:pointer;
  transition:transform .08s,box-shadow .08s,opacity .2s}
.ans svg{width:26px;height:26px;fill:#fff;flex:none}
.ans.a0{background:var(--red);box-shadow:0 7px 0 var(--red-d)}
.ans.a1{background:var(--blue);box-shadow:0 7px 0 var(--blue-d)}
.ans.a2{background:var(--gold);box-shadow:0 7px 0 var(--gold-d)}
.ans.a3{background:var(--green);box-shadow:0 7px 0 var(--green-d)}
.ans:active{transform:translateY(6px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.ans.dim{opacity:.35}
.ans.right{outline:5px solid #fff;box-shadow:0 7px 0 var(--green-d),0 0 0 8px var(--green)}
.big{font-size:54px;text-align:center}
.score{font-size:46px;font-weight:700;text-align:center;margin:0}
.podium{background:var(--yellow);border-radius:22px;padding:18px;text-align:center;box-shadow:0 6px 0 var(--yellow-d);font-weight:700;font-size:20px}
.notice{background:#FFF6DA;border-radius:16px;padding:12px 14px;font-size:14px;margin-top:10px}
.hide{display:none!important}

/* ---- Kahoot qo'shimchalari ---- */
.pinbox{letter-spacing:12px;text-align:center;font-size:30px;font-weight:700}
.timer{height:16px;background:#fff;border-radius:99px;border:2px solid var(--line);overflow:hidden;margin:8px 0 6px}
.timer i{display:block;height:100%;background:var(--yellow);border-radius:99px;transition:width .25s linear}
.center{text-align:center}
.banner{border-radius:20px;padding:16px;text-align:center;font-weight:700;font-size:22px;color:#fff;margin-bottom:14px}
.banner.ok{background:var(--green);box-shadow:0 6px 0 var(--green-d)}
.banner.no{background:var(--red);box-shadow:0 6px 0 var(--red-d)}
.banner.wait{background:var(--blue);box-shadow:0 6px 0 var(--blue-d)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.chip{background:#fff;border-radius:14px;padding:7px 12px;font-weight:600;box-shadow:0 3px 0 var(--line),0 0 0 2px var(--line) inset}
.boardrow{display:flex;justify-content:space-between;align-items:center;background:#F3F4FD;border-radius:14px;padding:10px 14px;margin-bottom:8px;font-weight:600}
.boardrow.me{background:var(--yellow);box-shadow:0 3px 0 var(--yellow-d)}
.podium3{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:16px 0}
.podium3 .pl{flex:1;max-width:150px;text-align:center;font-weight:700}
.podium3 .st{border-radius:16px 16px 0 0;background:var(--yellow);box-shadow:0 5px 0 var(--yellow-d);display:flex;align-items:flex-start;justify-content:center;padding-top:8px;font-size:30px;margin-top:6px}
.podium3 .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ustoz katta ekrani */
.big-wrap{max-width:980px}
.bigpin{font-size:clamp(54px,14vw,120px);font-weight:700;letter-spacing:10px;text-align:center;margin:6px 0}
.hostword{font-size:clamp(70px,16vw,150px);line-height:1.5;text-align:center;margin:0}
.opts4{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opts4 .ans{margin:0;font-size:clamp(18px,3vw,30px);cursor:default}
.opts4 .ans.dim{opacity:.3}
@media (max-width:560px){.opts4{grid-template-columns:1fr}}