/* Space Grotesk yerel kopya */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./assets/space-grotesk-400.ttf') format('truetype');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('./assets/space-grotesk-600.ttf') format('truetype');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('./assets/space-grotesk-700.ttf') format('truetype');
}

:root{
  --color-primary:#2563eb;
  --color-primary-strong:#1d4ed8;
  --color-text:#0f172a;
  --color-text-weak:#334155;
  --color-surface:#0b1020;
  --color-surface-2:#10172a;
  --color-border:#1f2a44;
  --color-banner:rgba(255,255,255,.06);
  --radius:20px;
  --shadow:0 24px 60px rgba(0,0,0,.35);
  --grid-gap:8px;
  --board-size:32px;
  color-scheme:dark;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;
  height:100%;
  font-family:var(--engine-font, 'Space Grotesk'), system-ui, sans-serif;
  background:radial-gradient(120% 120% at 10% 20%, rgba(37,99,235,.25), transparent 50%),
             radial-gradient(120% 120% at 80% 0%, rgba(225,29,72,.18), transparent 52%),
             var(--color-surface);
  color:var(--color-text);
}
body{
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.engine-root{
  flex:1;
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.engine-shell{
  width:min(1080px, 98vw);
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:14px;
  gap:14px;
}

.pane{
  background:linear-gradient(150deg, rgba(255,255,255,.02), rgba(255,255,255,.05));
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:saturate(1.2) blur(6px);
}

.engine-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
}
.engine-brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.brand-logo{
  width:54px;
  height:54px;
  border-radius:14px;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.brand-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.brand-title{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.brand-title small{color:var(--color-text-weak);font-weight:600;letter-spacing:.05em;}
.brand-title strong{font-size:1.1rem;}
.engine-actions{
  display:flex;
  gap:8px;
}
.chip{
  padding:10px 12px;
  border-radius:999px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  color:var(--color-text);
  font-weight:700;
  letter-spacing:.01em;
}
.chip.accent{
  background:linear-gradient(120deg, rgba(37,99,235,.14), rgba(37,99,235,.04));
  border-color:rgba(37,99,235,.5);
}

.engine-main{
  flex:1;
  display:grid;
  grid-template-columns:1.2fr 0.9fr;
  gap:14px;
  min-height:0;
}
@media (max-width:900px){
  .engine-main{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);}
}

.stage{
  display:flex;
  flex-direction:column;
  padding:12px;
  gap:12px;
}
.board-wrap{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.board-frame{
  position:relative;
  padding:12px;
  border-radius:calc(var(--radius) + 8px);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px dashed rgba(255,255,255,.08);
  min-height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.board-slot{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hud{
  display:grid;
  gap:10px;
}
.hud-top{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.stat{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  font-weight:700;
}
.stat label{color:var(--color-text-weak);font-size:.85rem;}

.control-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.01em;
  background:var(--color-surface-2);
  color:var(--color-text);
  border:1px solid var(--color-border);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.15);}
.btn.primary{
  background:linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  color:#fff;
  border-color:rgba(255,255,255,.2);
}
.btn.ghost{
  background:transparent;
  color:var(--color-text);
}

.word-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:4px 2px;
  max-height:180px;
  overflow:auto;
  scrollbar-width:thin;
}
.pill{
  padding:8px 10px;
  border-radius:10px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  font-weight:700;
}
.pill.done{
  background:rgba(16,185,129,.12);
  border-color:rgba(16,185,129,.4);
  color:#10b981;
}

.banner{
  padding:12px;
  margin:0 14px 14px;
  border-radius:var(--radius);
  background:var(--color-banner);
  border:1px dashed var(--color-border);
  text-align:center;
  font-weight:700;
}

.panel{
  display:flex;
  flex-direction:column;
  padding:12px;
  gap:12px;
}

.divider{
  border:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

.kbd{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(44px,1fr));
  gap:8px;
}
.kbd .key{
  padding:10px 0;
  text-align:center;
  border-radius:10px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  font-weight:800;
}

.muted{color:var(--color-text-weak);}

.floating{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
}