*{margin:0;padding:0;box-sizing:border-box}
  :root{
    --primary:#0ea5e9;--accent:#4f46e5;--ink:#0f172a;--muted:#64748b;
    --line:#e2e8f0;--ok:#16a34a;--bad:#dc2626;
  }
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    background:radial-gradient(1200px 700px at 50% -10%,#e0f2fe 0%,#f1f5f9 55%,#e2e8f0 100%);
    color:var(--ink);overflow-x:hidden;
    display:flex;flex-direction:column;align-items:center;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom));
    min-height:100vh;
  }
  .scene{width:100%;max-width:440px;perspective:1400px;perspective-origin:50% 30%;overflow:hidden;}
  .card{width:100%;background:linear-gradient(#fff,#fcfdff);border:1px solid var(--line);
        border-radius:18px;padding:18px 16px 20px;transform-style:preserve-3d;
        box-shadow:0 1px 0 #fff inset,0 10px 22px rgba(15,23,42,.07),0 34px 60px -28px rgba(15,23,42,.28);
        transition:transform .18s ease-out}
  .card.tilt{transition:none}

  /* ---------- 3D iskele ---------- */
  .dock{height:170px;position:relative;perspective:820px;perspective-origin:50% 42%;
        transform-style:preserve-3d;margin:2px 0 6pxoverflow:hidden;}
  .floor{position:absolute;left:-40px;right:-40px;max-width:none;bottom:-6px;height:120px;
    background:
      repeating-linear-gradient(90deg,rgba(148,163,184,.16) 0 1px,transparent 1px 34px),
      repeating-linear-gradient(0deg,rgba(148,163,184,.16) 0 1px,transparent 1px 34px),
      linear-gradient(rgba(148,163,184,.05),rgba(148,163,184,.16));
    transform:rotateX(74deg);transform-origin:center bottom;border-radius:6px;}
  .rig{position:absolute;left:50%;top:8px;width:120px;height:150px;margin-left:-60px;
       transform-style:preserve-3d}
  .box{position:absolute;background:linear-gradient(160deg,#cbd5e1,#94a3b8);
       border-radius:2px;box-shadow:0 2px 0 #64748b66}
  .box.lit{background:linear-gradient(160deg,#7dd3fc,#38bdf8);box-shadow:0 2px 0 #0284c766}
  .man{position:absolute;background:linear-gradient(160deg,#475569,#1e293b);
       border-radius:2px;opacity:0;transform-style:preserve-3d;
       transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.3,1)}
  .man.on{opacity:1}
  .man.head{border-radius:50%;left:80px;top:34px;width:22px;height:22px;
            transform:translateZ(10px) rotateZ(8deg) scale(.3)}
  .man.head.on{transform:translateZ(10px) rotateZ(8deg) scale(1)}
  .man.torso{left:85px;top:60px;width:11px;height:40px;
             transform:translateZ(6px) rotateZ(8deg) scaleY(.2)}
  .man.torso.on{transform:translateZ(6px) rotateZ(8deg) scaleY(1)}
  .man.arm{height:8px;top:64px;transform-origin:left center}
  .man.arm.l{left:86px;width:26px;transform:translateZ(4px) rotateY(8deg) rotateZ(22deg) scaleX(.2)}
  .man.arm.l.on{transform:translateZ(4px) rotateY(8deg) rotateZ(22deg) scaleX(1)}
  .man.arm.r{left:91px;width:26px;transform:translateZ(4px) rotateY(-8deg) rotateZ(-22deg) scaleX(.2)}
  .man.arm.r.on{transform:translateZ(4px) rotateY(-8deg) rotateZ(-22deg) scaleX(1)}
  .man.leg{height:8px;top:100px;transform-origin:left center}
  .man.leg.l{left:87px;width:30px;transform:translateZ(4px) rotateZ(-16deg) scaleX(.2)}
  .man.leg.l.on{transform:translateZ(4px) rotateZ(-16deg) scaleX(1)}
  .man.leg.r{left:92px;width:30px;transform:translateZ(4px) rotateZ(16deg) scaleX(.2)}
  .man.leg.r.on{transform:translateZ(4px) rotateZ(16deg) scaleX(1)}
  .rope{position:absolute;left:88px;top:22px;width:3px;height:14px;border-radius:2px;
        background:linear-gradient(#cbd5e1,#94a3b8);transform:translateZ(8px)}

  .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
  .brand{display:flex;align-items:center;gap:8px;min-width:0;transform:translateZ(14px)}
  .brand .mark{width:30px;height:30px;border-radius:9px;flex:0 0 auto;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    display:flex;align-items:center;justify-content:center;font-size:15px;
    box-shadow:0 3px 8px rgba(14,165,233,.35)}
  .brand b{font-size:.95rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .score{display:flex;gap:6px;flex:0 0 auto;transform:translateZ(14px)}
  .pill{font-size:.78rem;font-weight:600;padding:5px 9px;border-radius:99px;background:#f1f5f9;
        color:var(--muted);white-space:nowrap;box-shadow:0 2px 0 rgba(15,23,42,.06)}
  .pill b{font-variant-numeric:tabular-nums}
  .pill.ok{background:#dcfce7;color:#15803d;box-shadow:0 2px 0 #86efac}
  .pill.bad{background:#fee2e2;color:#b91c1c;box-shadow:0 2px 0 #fca5a5}

  .clue{font-size:.75rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;
        margin:8px 0 5px;transform:translateZ(8px)}
  .meaning{font-size:1.12rem;font-weight:700;line-height:1.4;transform:translateZ(8px)}
  .slen{font-size:.78rem;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums;transform:translateZ(8px)}

  /* ---------- 3B harf kublari ---------- */
  .word{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 6px;justify-content:center;
        perspective:900px;transform:translateZ(4px)}
  .slot{width:34px;height:44px;position:relative;transform-style:preserve-3d}
  .cube{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
  .slot.on .cube{transform:rotateY(180deg)}
  .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
        border-radius:6px;font-size:1.3rem;font-weight:800;text-transform:uppercase;
        backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .face.q{background:linear-gradient(#f8fafc,#e2e8f0);border:1px solid var(--line);
          box-shadow:inset 0 -3px 0 #cbd5e1}
  .face.q::after{content:"?";color:#cbd5e1;font-size:1rem}
  .face.l{background:linear-gradient(#f0fdf4,#dcfce7);border:1px solid #86efac;color:#15803d;
          transform:rotateY(180deg) translateZ(1px);box-shadow:inset 0 -3px 0 #4ade80}
  .side{background:linear-gradient(90deg,#94a3b8,#cbd5e1);border-radius:3px}
  .sd-l{left:-7px;top:2px;width:7px;height:40px;transform:rotateY(-90deg) translateZ(0)}
  .sd-r{right:-7px;top:2px;width:7px;height:40px;transform:rotateY(90deg) translateZ(0)}
  .sd-b{left:2px;bottom:-7px;width:30px;height:7px;transform:rotateX(90deg) translateZ(0);
        background:linear-gradient(#cbd5e1,#94a3b8)}

  .hintbtn{display:block;margin:14px auto 0;font-size:.8rem;color:var(--muted);background:none;
    border:1px solid var(--line);border-radius:8px;padding:7px 14px;cursor:pointer;
    transform:translateZ(10px);box-shadow:0 3px 0 #e2e8f0;transition:.15s}
  .hintbtn:hover:not(:disabled){color:var(--accent);border-color:#c7d2fe;box-shadow:0 3px 0 #c7d2fe}
  .hintbtn:active:not(:disabled){transform:translateZ(10px) translateY(3px);box-shadow:0 0 0 #e2e8f0}
  .hintbtn:disabled{opacity:.4;cursor:default}

  /* ---------- 3B klavye ---------- */
  .kb{margin-top:18px;display:flex;flex-direction:column;gap:8px;align-items:center;
      perspective:900px;transform:translateZ(6px)}
  .krow{display:flex;gap:6px;width:100%;justify-content:center}
  .key{flex:1 1 0;min-width:0;max-width:40px;height:38px;border:1px solid var(--line);
    background:linear-gradient(#fff,#f8fafc);border-radius:8px;font-size:.95rem;font-weight:700;
    text-transform:uppercase;color:var(--ink);cursor:pointer;display:flex;align-items:center;
    justify-content:center;padding:0;position:relative;transform-style:preserve-3d;
    box-shadow:0 4px 0 #cbd5e1,0 6px 10px -4px rgba(15,23,42,.3);
    transition:transform .08s,box-shadow .08s,background .15s,color .15s}
  .key:hover:not(:disabled){background:#f1f5f9}
  .key.down{transform:translateY(4px) rotateX(22deg);box-shadow:0 0 0 #cbd5e1,0 2px 4px -2px rgba(15,23,42,.3)}
  .key.hit{background:linear-gradient(#dcfce7,#bbf7d0);border-color:#86efac;color:#15803d;
           box-shadow:0 4px 0 #22c55e,0 6px 10px -4px rgba(21,128,61,.4)}
  .key.miss{background:#e2e8f0;border-color:#cbd5e1;color:#94a3b8;
            box-shadow:0 2px 0 #cbd5e1;text-decoration:line-through}
  .key:disabled{cursor:default}

  .msg{margin-top:16px;text-align:center;font-size:.92rem;font-weight:600;min-height:1.3em;
       transform:translateZ(10px)}
  .msg.ok{color:var(--ok)} .msg.bad{color:var(--bad)}
  .msg.idle{color:var(--muted);font-weight:400;font-size:.85rem}
  .ans{margin-top:4px;text-align:center;font-size:.84rem;color:var(--muted);min-height:1.2em;
       transform:translateZ(10px)}
  .again{margin-top:14px;width:100%;padding:12px;border:0;border-radius:12px;color:#fff;
    font-size:.95rem;font-weight:700;cursor:pointer;transform:translateZ(12px);
    background:linear-gradient(135deg,var(--primary),var(--accent));
    box-shadow:0 5px 0 #4f46e5,0 10px 18px -6px rgba(79,70,229,.55);transition:.1s}
  .again:hover{filter:brightness(1.06)}
  .again:active{transform:translateZ(12px) translateY(4px) rotateX(20deg);box-shadow:0 1px 0 #4f46e5}

  .foot{margin-top:16px;font-size:.74rem;color:#94a3b8;text-align:center;line-height:1.6;
        transform:translateZ(6px)}

  @media (max-width:380px){
    .card{padding:14px 12px 16px;border-radius:15px}
    .dock{height:150px;transform:scale(.9);transform-origin:center top;margin-bottom:-10px}
    .slot{width:28px;height:37px}
    .face{font-size:1.1rem;border-radius:5px}
    .sd-l,.sd-r{width:6px;height:33px}
    .sd-b{width:24px;height:6px;bottom:-6px}
    .key{font-size:.82rem;max-width:32px;height:34px}
  }
  @media (prefers-reduced-motion:reduce){
    .cube,.man{transition:none}
    .card{transform:none!important}
  }