/* styles.css */
:root{
  --bg: #0b0c10;
  --panel: #111319;
  --ink: #e6eef8;
  --ink-dim: #a9b4c3;
  --accent: #4dd0e1;
  --accent-2: #ff8a65;
  --line: rgba(255,255,255,.25);
  --faint: rgba(255,255,255,.14);
  --chip: #1a1f2b;
  --chip-border: #2a3142;
  --success: #00c853;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif}
h1{font-size:1.2rem;margin:0}
.site-header{padding:12px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.subtitle{margin:.25rem 0 0;color:var(--ink-dim);font-size:.9rem}
.layout{display:grid;grid-template-columns: 320px 1fr;gap:16px;max-width:1200px;margin:0 auto;padding:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.words-panel{display:flex;flex-direction:column;gap:12px;min-height:300px}
.tabs{display:flex;background:#0d1018;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tab{flex:1;padding:10px 12px;background:transparent;border:0;color:var(--ink);cursor:pointer}
.tab.active{background:var(--accent);color:#001018;font-weight:700}
.tabpanel{display:none}
.tabpanel.active{display:block}
.word-list{display:flex;flex-wrap:wrap;gap:8px;padding:8px}
.word-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:8px;padding:8px}
.chip{background:var(--chip);border:1px solid var(--chip-border);border-radius:999px;padding:8px 12px;color:var(--ink);cursor:grab;user-select:none;transition:transform .08s ease}
.chip:active{transform:scale(.96);cursor:grabbing}
.chip.is-dragging{opacity:.6;outline:2px dashed var(--accent)}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.actions .btn{padding:10px 14px;border:1px solid var(--line);background:#0f1320;color:var(--ink);border-radius:10px;cursor:pointer}
.actions .btn.primary{background:var(--accent-2);color:#1a0600;font-weight:700}
.actions .btn.outline{background:transparent}
.actions .btn:hover{filter:brightness(1.08)}
.mobile-only{display:none}

.axis-wrap{width:100%;}
.axis-square{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:radial-gradient(120% 120% at 50% 0%, rgba(77,208,225,.06), transparent 60%)}
.axis-svg{position:absolute;inset:0;width:100%;height:100%}
.axis-line{stroke:var(--line);stroke-width:1.5}
.axis-line.faint{stroke:var(--faint)}
.axis-guide{stroke:var(--faint);stroke-dasharray:2 3;stroke-width:1}
.half-dash{stroke-dasharray:3 3}

/* Zones */
.zones-layer{position:absolute;inset:0}
.zones-layer.hidden{display:none}

.dropzone{position:absolute;display:flex;align-items:center;justify-content:center;min-width:56px;min-height:32px;padding:6px 8px;border:1px dashed var(--line);border-radius:10px;transition:background .15s, border-color .15s;pointer-events:auto}
.dropzone::after{content:attr(data-label);position:absolute;bottom:-1.3rem;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--ink-dim)}
.dropzone.empty{background:rgba(255,255,255,.02)}
.dropzone.over{border-color:var(--accent);background:rgba(77,208,225,.08)}

.vertex{width:90px;height:38px}
.top-left{top:6px;left:6px}
.top-right{top:6px;right:6px}
.bottom-right{bottom:6px;right:6px}
.bottom-left{bottom:6px;left:6px}

.mid-left{top:50%;left:6px;transform:translateY(-50%);width:110px}
.mid-right{top:50%;right:6px;transform:translateY(-50%);width:110px}

.edge{width:110px}
.edge-top{top:6px;left:50%;transform:translateX(-50%)}
.edge-bottom{bottom:6px;left:50%;transform:translateX(-50%)}
.edge-left{left:6px;top:50%;transform:translateY(-50%);width:90px}
.edge-right{right:6px;top:50%;transform:translateY(-50%);width:90px}

.diag{width:120px}
.d-tl-mr{top:22%;right:6px}
.d-bl-mr{bottom:22%;right:6px}
.d-tr-ml{top:22%;left:6px}
.d-br-ml{bottom:22%;left:6px}

/* reverse direction placeholders (from mids to vertices) */
.diag-back{width:120px;opacity:.95}
.d-mr-tl{top:12%;right:22%}  /* approximate positions along the reverse diagonal */
.d-mr-bl{bottom:12%;right:22%}
.d-ml-tr{top:12%;left:22%}
.d-ml-br{bottom:12%;left:22%}

/* dashed mid-to-center placeholders */
.dmid{width:120px}
.d-left-center{top:50%;left:30%;transform:translate(-50%,-50%)}
.d-right-center{top:50%;left:70%;transform:translate(-50%,-50%)}

.center-hole{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:64px;height:64px;border-radius:12px;border:2px dotted var(--faint);opacity:.8}
.center-hole::after{content:"Center";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-dim);font-size:.7rem}

/* When a chip is placed inside a zone */
.dropzone .chip{cursor:grab;background:#0b1221;border-color:#1f2a40}

/* visibility helpers for modes */
.hide{display:none !important}

/* Responsive */
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr;gap:12px}
  .mobile-only{display:flex;justify-content:flex-end}
  .axis-panel{order:2}
  .words-panel{order:1}
  .word-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width: 560px){
  .word-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .vertex,.edge,.diag,.diag-back,.mid-left,.mid-right,.dmid{min-width:44px}
  .dropzone::after{display:none}
}