/* MoleWord V0.1.1 — Dark espionage skin + keyboard */
:root {
  --bg: #0b0f14;
  --panel: #121822;
  --text: #e6f2ff;
  --muted: #93a4b7;
  --accent: #20e3b2;
  --accent-hover: #14c79c;
  --error: #ff4d6d;
  --border: #1f2a3a;
  --ok:#1bd760;

  --lexi-direct:#34C759;
  --lexi-indirect:#0A84FF;

  --key-green-bg:#163b2a;
  --key-green-fg:#bdf6cf;
  --key-green-border:#1f5a3f;
  --key-grey-bg:#1a2230;
  --key-grey-fg:#8aa0ba;
  --key-grey-border:#223145;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(32,227,178,.08), transparent 50%),
             linear-gradient(180deg, #0b0f14, #0a0f18 60%, #0b0f14);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 16px;
}

.app-header{
  max-width: 820px; margin: 0 auto 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ font-size: 20px; font-weight: 800; letter-spacing:.05em }
.hud{ display:flex; gap:10px; align-items:center }
.hud span{ background:#0f1622; border:1px solid var(--border); padding:6px 10px; border-radius:10px; font-weight:700 }
.help-btn{
  display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:10px; border:1px solid var(--border); background:#0f1622; color:var(--text); font-weight:800;
}

main{ max-width:820px; margin:0 auto }
.card, .modal{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.card{ padding:14px }

.board{ display:grid; gap:.5rem; margin: .6rem 0 1rem }
.word-row{ display:flex; justify-content: flex-start; gap:.4rem }
.cell{
  width:2.2rem; height:2.2rem; border:1px solid #263246; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#0f1622; color:var(--text); font-weight:800; font-size:1.1rem;
}
.cell.revealed{ background:#152133; border-color:#2b3f59 }

.word-row.word-solved .cell{ color:#fff; border-color:transparent }
.word-row.word-direct .cell{ background: var(--lexi-direct); }
.word-row.word-indirect .cell{ background: var(--lexi-indirect); }

.guess-area{ margin:.75rem 0 1rem }
.guess-form{ display:flex; gap:.5rem; flex-wrap:wrap }
#guess-input{
  min-width:260px; width:60%;
  font-size:16px; padding:.6rem .7rem; border-radius:10px; border:1px solid var(--border);
  background:#0f1622; color:var(--text);
}
button{
  background: var(--accent);
  color:#081019; border-radius:10px; border:1px solid #11493f; padding:10px 14px; cursor:pointer;
  transition: background .15s ease, transform .02s ease;
  font-weight:700;
}
button:hover{ background: var(--accent-hover); }
button:active{ transform: translateY(1px); }
.secondary-btn{ background:#0f1622; color:var(--text); border:1px solid var(--border) }

.allowed-lengths{ display:block; color:var(--muted); margin-top:.35rem }

/* Keyboard */
.keyboard{
  max-width:820px; margin:.5rem auto .2rem;
  padding:.5rem .5rem;
  background:#0f1622; border:1px solid var(--border); border-radius:10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.keyboard-row{ display:flex; justify-content:center; gap:.32rem; margin:.28rem 0; }
.key{
  flex: 1 1 32px;
  height: 44px; padding:0 .35rem;
  background:#0f1622; color:var(--text); border:1px solid var(--border);
  border-radius:10px; font-weight:800; letter-spacing:.03em;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  transition: transform .06s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.key:hover{ background:#0c141f; }
.key:active{ transform: translateY(1px); }
.key-enter, .key-backspace{ flex: 1.6 1 42px; }

/* Insight coloring */
.key-green{ background:var(--key-green-bg); color:var(--key-green-fg); border-color:var(--key-green-border); }
.key-grey { background:var(--key-grey-bg);  color:var(--key-grey-fg);  border-color:var(--key-grey-border); }

.modal{ padding:0; width:min(560px, 92vw) }
.modal::backdrop{ background: rgba(0,0,0,.5) }
.modal-content{ padding: 14px 14px 16px }
.modal-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:10px }
.muted{ color: var(--muted) }
.status{ margin-top:.4rem }

.share-box{
  width:100%; min-height:120px; max-height:40vh; resize:none;
  background:#0f1622; color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:.55rem .65rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.env-badge{
  position: fixed; right:10px; bottom:8px; font-size:11px; color:#93a4b7; opacity:.75;
  user-select:none; pointer-events:none;
}

.app-footer{
  max-width:820px; margin: 1rem auto 0; text-align:center; color:#93a4b7; font-size:12px;
}


/* ===== Inline Mole-selection column ===== */
.board-mole-wrap{
  display: grid;
  grid-template-columns: 1fr auto; /* words | radios */
  align-items: start;
  gap: .8rem;
}
.mole-col{
  display: grid;
  grid-template-rows: auto auto auto;
  gap: .4rem;
  padding: .5rem;
  background: #0f1622;
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 96px;
  height: fit-content;
}
.mole-col-header{
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mole-inline-form{
  display: grid;
  grid-template-rows: repeat(5, 2.2rem);
  align-items: center;
  justify-items: center;
  gap: .4rem;
}
.mole-inline-form input[type="radio"]{
  width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent);
}
#mole-inline-submit[disabled]{ opacity: .6; cursor: not-allowed; }

@media (max-width: 680px){
  .board-mole-wrap{ grid-template-columns: 1fr 70px; }
  .mole-col{ padding: .4rem; }
  .mole-inline-form{ grid-template-rows: repeat(5, 2rem); }
}


/* Left-align puzzle word rows (hotfix) */
.word-row{ justify-content: flex-start; }


/* === Board-wrap integration (Mole column inside the same card) === */
.board-mole-wrap{
  /* Make the wrapper the visual card */
  background: var(--panel, #0f1622);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 92px; /* board | mole radios */
  align-items: start;
  gap: 10px;
}

/* Let the inner board render as plain content (no separate card look) */
.board{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Mole column should appear embedded, not as its own panel */
.mole-col{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 0 0 6px !important;
}
.mole-col-header{
  opacity: .9;
}

/* Keep rows left-aligned */
.word-row{ justify-content: flex-start; }

@media (max-width: 720px){
  .board-mole-wrap{
    grid-template-columns: 1fr 72px;
    padding: 10px;
    gap: 8px;
  }
}