/* StudyAI game popup — классы с префиксом sai-, CSS-переменные на #sai-game-root */
#sai-game-root{
    --ink:#111; --muted:#767676; --soft:#f5f6f8; --line:#eceef2; --border:#e6e6e6;
    --acc:#1b7cf6; --acc-dark:#166ad6; --dim:#c9cdd4; --star:#ffb020; --bg:#fff;
    --ok:#22a06b; --warn:#f59e0b;
  }
  
  #sai-game-root *{box-sizing:border-box}
  .sai-ov{font-family:Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}


  /* ------------------------------------------------ оверлей и модалка --- */
  .sai-ov{position:fixed;inset:0;background:rgba(17,17,17,.35);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:99999;padding:16px}
  .sai-ov.sai-open{display:flex}
  .sai-modal{position:relative;width:880px;max-width:100%;height:560px;background:#fff;border-radius:24px;box-shadow:0 18px 44px rgba(11,18,32,.14);display:grid;grid-template-columns:1fr 330px;gap:48px;padding:48px;animation:in .24s ease-out;overflow:hidden}
  @keyframes in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .sai-modal .sai-spark{position:absolute;right:120px;bottom:90px;width:74px;height:74px;opacity:.06;pointer-events:none}
  .sai-x{position:absolute;top:22px;right:22px;width:36px;height:36px;border-radius:50%;background:var(--soft);border:0;cursor:pointer;display:grid;place-items:center}
  .sai-x svg{width:14px;height:14px;stroke:var(--ink);stroke-width:2;stroke-linecap:round}

  .sai-left h2{font-size:38px;line-height:1.16;font-weight:700;margin:0}
  .sai-left h2 span{color:var(--acc);display:block}
  .sai-left .sai-sub{color:var(--muted);font-size:15px;margin:18px 0 0;max-width:330px}
  .sai-steps{list-style:none;padding:0;margin:26px 0 0;width:300px}
  .sai-steps li{display:flex;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
  .sai-steps li b{color:var(--acc);font-weight:700;font-size:14px;width:18px}
  .sai-note{color:var(--muted);font-size:13px;margin-top:22px}
  .sai-attempt{color:var(--muted);font-size:13px;position:absolute;left:48px;bottom:40px}

  .sai-right{display:flex;flex-direction:column}
  .sai-tag{font-size:12px;font-weight:700;letter-spacing:1.5px;display:flex;align-items:center;gap:10px;height:20px}
  .sai-tag.sai-acc{color:var(--acc)} .sai-tag.sai-dim{color:var(--muted)}
  .sai-tag svg{width:12px;height:12px;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round}
  .sai-board{display:grid;grid-template-columns:repeat(3,110px);grid-template-rows:repeat(3,110px);margin-top:20px;position:relative}
  .sai-cell{background:none;border:0;padding:0;cursor:pointer;position:relative;display:grid;place-items:center;border-right:2.5px solid #d9dce3;border-bottom:2.5px solid #d9dce3}
  .sai-cell:nth-child(3n){border-right:0} .sai-cell:nth-child(n+7){border-bottom:0}
  .sai-cell:focus-visible{outline:2px solid var(--acc);outline-offset:-6px;border-radius:12px}
  .sai-cell[disabled]{cursor:default}
  .sai-cell svg{width:66px;height:66px;fill:none;stroke-width:7.7;stroke-linecap:round}
  .sai-cell.sai-X svg{stroke:var(--acc)} .sai-cell.sai-O svg{stroke:var(--ink)}
  .sai-board.sai-dim .sai-cell svg{stroke:var(--dim)}
  .sai-cell svg path,.sai-cell svg circle{stroke-dasharray:300;stroke-dashoffset:300;animation:draw .26s ease-out forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .sai-winline{position:absolute;inset:0;pointer-events:none}
  .sai-winline line{stroke:var(--acc);stroke-width:6;stroke-linecap:round;stroke-dasharray:500;stroke-dashoffset:500;animation:draw .3s ease-out forwards}
  .sai-status{margin-top:auto;border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;font-size:14px;font-weight:500}
  .sai-status .sai-t{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
  .sai-status .sai-t.sai-hot{color:var(--acc);font-weight:600}

  /* ------------------------------------------------ награда ------------- */
  .sai-btn{height:52px;border-radius:26px;border:0;font:inherit;font-size:16px;font-weight:600;cursor:pointer;padding:0 22px;transition:background .15s}
  .sai-btn.sai-pri{background:var(--acc);color:#fff} .sai-btn.sai-pri:hover{background:var(--acc-dark)}
  .sai-btn.sai-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--border)} .sai-btn.sai-ghost:hover{background:var(--soft)}
  .sai-btn.sai-block{width:330px}
  .sai-code{margin-top:22px;width:330px;height:64px;background:var(--soft);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 20px}
  .sai-code b{font-size:21px;letter-spacing:1.5px;font-weight:700}
  .sai-code button{height:36px;border-radius:18px;border:1px solid var(--border);background:#fff;font:inherit;font-size:12.5px;font-weight:600;padding:0 14px;cursor:pointer}
  .sai-exp{color:var(--muted);font-size:13px;margin-top:14px}
  .sai-stack{display:flex;flex-direction:column;gap:12px;margin-top:26px}
  .sai-errmsg{color:#e5484d;font-size:13px;margin-top:8px;min-height:18px}


  /* ------------------------------------------------ мобильный ----------- */
  @media (max-width:900px){
    .sai-ov{align-items:flex-end;padding:0}
    .sai-modal{width:100%;height:auto;max-height:94vh;overflow:auto;border-radius:24px 24px 0 0;grid-template-columns:1fr;gap:16px;padding:44px 24px 28px;animation:up .28s ease-out}
    @keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
    .sai-modal::before{content:"";position:absolute;top:12px;left:50%;width:48px;height:4px;margin-left:-24px;border-radius:2px;background:#d9dce3}
    .sai-left h2{font-size:26px} .sai-left h2 span{display:inline}
    .sai-steps,.sai-note,.sai-attempt{display:none}
    .sai-board{grid-template-columns:repeat(3,100px);grid-template-rows:repeat(3,100px);margin:14px auto 0}
    .sai-cell svg{width:60px;height:60px}
    .sai-status{margin-top:22px}
    .sai-btn.sai-block,.sai-code{width:100%}
  }
  @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important} }