@font-face{
  font-family:"Fredoka";
  src:url("/includes/fonts/static/fredoka-var.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
 
 :root{
    --ink:#1e2a32; --board:#dbe6e1; --tile:#ffffff; --accent:#d3232f;
    --success:#2e9e5b; --warn:#e8a13c; --chrome:#f2f6f4; --panel:#ffffff;
    --muted:#68787f; --radius:14px;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    background:var(--chrome);color:var(--ink);
    display:flex;flex-direction:column;
  }
  header{
    display:flex;align-items:center;gap:14px;
    padding:10px 16px;background:var(--ink);color:#fff;flex:0 0 auto;
  }
  header h1{
    font-family:"Fredoka",system-ui,sans-serif;font-weight:600;
    font-size:20px;margin:0;letter-spacing:.5px;
  }
  .levels{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
  .levels button{
    width:34px;height:34px;border-radius:50%;border:2px solid #ffffff55;
    background:transparent;color:#fff;font-weight:700;cursor:pointer;font-size:14px;
  }
  .levels button.active{background:#fff;color:var(--ink);border-color:#fff}
  .levels button.done{border-color:var(--success);background:var(--success);color:#fff}
  .levels button:focus-visible{outline:3px solid var(--warn);outline-offset:2px}
  main{
    flex:1 1 auto;display:grid;min-height:0;
    grid-template-columns:1fr 380px;gap:12px;padding:12px;
  }
  #editorPane{
    background:var(--panel);border-radius:var(--radius);overflow:hidden;
    box-shadow:0 1px 4px #0000000f;min-height:0;
    display:flex;flex-direction:column;
  }
  .modeBar{
    display:flex;align-items:center;gap:8px;padding:8px 10px;
    border-bottom:1px solid #e6ede9;flex:0 0 auto;
  }
  .modeBar .mode{
    border:0;border-radius:9px;padding:7px 16px;cursor:pointer;
    font-family:"Fredoka",system-ui,sans-serif;font-weight:600;font-size:14px;
    background:#e4ebe8;color:var(--muted);
  }
  .modeBar .mode.active{background:var(--ink);color:#fff}
  .modeBar .mode:focus-visible{outline:3px solid var(--warn);outline-offset:2px}
  #copyBlocksBtn{
    margin-left:auto;border:1px solid #d4ded9;background:#fff;color:var(--muted);
    border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;
    display:none;
  }
  #editorBody{flex:1 1 auto;position:relative;min-height:0}
  #blocklyDiv{position:absolute;inset:0}
  #pyWrap{position:absolute;inset:0;display:none}
  .CodeMirror{height:100%;font:14px/1.6 ui-monospace,Menlo,Consolas,monospace;padding:6px 0}
  .cm-exec{background:#f8d8a8 !important}
  .cm-err{background:#f6cdd0 !important}
  aside{display:flex;flex-direction:column;gap:12px;min-height:0}
  .card{background:var(--panel);border-radius:var(--radius);box-shadow:0 1px 4px #0000000f;padding:14px}
  .card h2{
    font-family:"Fredoka",system-ui,sans-serif;font-weight:600;font-size:15px;
    margin:0 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
  }
  #instructions{font-size:15px;line-height:1.45;margin:0}
  #mazeCard{display:flex;flex-direction:column;align-items:center;gap:10px}
  canvas{max-width:100%;border-radius:10px}
  .controls{display:flex;gap:10px;width:100%}
  .controls button{
    flex:1;border:0;border-radius:10px;padding:12px 0;
    font-family:"Fredoka",system-ui,sans-serif;font-weight:600;font-size:16px;
    cursor:pointer;transition:transform .06s ease;
  }
  .controls button:active{transform:scale(.97)}
  .controls button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  #runBtn{background:var(--accent);color:#fff}
  #runBtn:disabled{background:#c9a2a5;cursor:default}
  #resetBtn{background:#e4ebe8;color:var(--ink)}
  #status{min-height:22px;font-size:14px;font-weight:600;width:100%;text-align:center}
  #status.ok{color:var(--success)} #status.bad{color:var(--accent)}
  #panelTitle{display:flex;gap:6px;margin-bottom:8px}
  #panelTitle button{
    border:0;background:#e4ebe8;border-radius:8px;padding:5px 12px;
    font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);
  } 
  #panelTitle button.active{background:var(--ink);color:#fff}
  #panelView{
    background:#10181d;color:#c7e3d4;border-radius:10px;
    font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;
    padding:12px;margin:0;white-space:pre-wrap;overflow:auto;
    flex:1 1 auto;min-height:90px;
  }
  #panelCard{display:flex;flex-direction:column;flex:1;min-height:0}
  dialog{border:0;border-radius:18px;padding:28px 34px;text-align:center;box-shadow:0 12px 40px #00000040}
  dialog::backdrop{background:#1e2a3266}
  dialog h3{font-family:"Fredoka",system-ui,sans-serif;margin:0 0 4px;font-size:24px}
  .stars{font-size:30px;letter-spacing:4px;margin:6px 0 10px}
  dialog button{
    border:0;border-radius:10px;padding:10px 26px;background:var(--accent);color:#fff;
    font-family:"Fredoka",system-ui,sans-serif;font-weight:600;font-size:16px;cursor:pointer;
  }
  @media (max-width:860px){
    main{grid-template-columns:1fr;grid-template-rows:340px auto}
  }
  @media (prefers-reduced-motion:reduce){
    .controls button{transition:none}
  }

.lang{display:flex;gap:4px;margin-left:18px}
.lang a{color:#fff;opacity:.55;text-decoration:none;font-weight:700;
        font-size:13px;padding:4px 8px;border-radius:6px}
.lang a.active{opacity:1;background:#ffffff22}


.levels button.done.over{
  border-color:#e0a91e;
  background:#e0a91e;
  color:#1e2a32;
}

h1 a { color: #fff; text-decoration: none;}