:root{ --ink:#1f2937; --muted:#6b7280; --card:#f7fafc; --ring:#60a5fa; --brand:#4f46e5; --bg:#ffffff; }
    *{ box-sizing:border-box }
    html,body{ height:100% }
    body{
      margin:0; background:var(--bg); color:var(--ink);
      font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
      display:flex; flex-direction:column; min-height:100svh;
    }
    header{
      flex:0 0 auto; padding:10px 14px; text-align:center; font-weight:900;
      background:linear-gradient(120deg, var(--brand), #22c55e); color:white;
      border-bottom:4px solid rgba(0,0,0,.05);
    }
    .wrap{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }

    /* Canvas alanı */
    #stage{
      position:relative; flex:1 1 auto; min-height:0;
      margin:10px auto 8px; width:min(100%, 1100px); height:100%;
      display:flex; align-items:stretch; justify-content:center; padding:0 10px;
    }
    .board-card{
      position:relative; flex:1 1 auto; min-height:260px; border-radius:18px;
      border:3px dashed rgba(99,102,241,.25); background:var(--card);
      box-shadow:0 6px 14px rgba(31,41,55,.12), 0 2px 6px rgba(31,41,55,.06);
      overflow:hidden; display:flex; align-items:stretch; justify-content:stretch;
    }
    canvas#board{ width:100%; height:100%; display:block; background:#fff; touch-action:none; cursor:crosshair; }

    /* Araç çubuğu — sadece A/a seçimi ve Temizle */
    .toolbar{
      flex:0 0 auto; padding:10px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
      background:#eef2ff; border-top:3px dashed rgba(99,102,241,.25);
    }
    .btn{
      padding:10px 12px; border:0; border-radius:12px; font-weight:900; cursor:pointer; background:white; box-shadow:0 1px 2px rgba(0,0,0,.06);
    }
    .btn.primary{ background:var(--brand); color:white }
    .btn.active{ outline:3px solid var(--ring) }
    .label{ font-weight:900; color:var(--muted); display:flex; align-items:center; gap:6px }

    @media (max-width: 480px){
      header{ font-size: 1rem }
      .toolbar{ gap:8px }

/* Sayfa geneli */
html, body {
  font-family: 'dik-temel-harfler', sans-serif;
}

    }
        @font-face{
      font-family: 'dik-temel-harfler';
      src: url('dik-temel-harfler.woff2') format('woff2'),
           url('dik-temel-harfler.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }