/* NULL — Rope & Silence — Stylesheet (updated with command input) */
:root{
  --bg:#070607;
  --muted:#9aa0a6;
  --accent:#9fd3c7;
  --rope:#6b4938;
  --bead:#c9a34a;
  --danger:#d96b6b;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;background:
  radial-gradient(1200px 600px at 10% 20%, rgba(15,18,20,0.6), transparent 10%),
  linear-gradient(180deg,var(--bg),#030303 60%);color:#dfe6e6}
body{display:grid;grid-template-columns:1fr 320px;gap:18px;padding:20px;align-items:start}

.game{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:18px;display:flex;flex-direction:column;min-width:360px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.title{font-size:1.35rem;color:var(--accent);letter-spacing:.06em}
.muted{color:var(--muted);font-size:.9rem}
.subtitle{font-size:.78rem;color:var(--muted)}
.main-area{display:flex;flex-direction:column;gap:12px;height:76vh}
.log{background:linear-gradient(180deg,rgba(0,0,0,0.1),transparent);border-radius:8px;padding:14px;overflow:auto;flex:1;line-height:1.5;white-space:pre-wrap}
.choices{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);color:var(--accent);padding:8px 12px;border-radius:999px;cursor:pointer}
.ghost{background:transparent;border:1px dashed rgba(255,255,255,0.04);color:var(--muted)}
.footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.tip{font-size:.88rem;pointer-events:none;user-select:none}

/* command row - moved to bottom, made more prominent */
.command-row{display:flex;gap:10px;align-items:center;margin-top:16px;padding:12px;background:linear-gradient(180deg, rgba(159,211,199,0.03), rgba(159,211,199,0.01));border-radius:10px;border:1px solid rgba(159,211,199,0.15)}
.command-label{font-size:1rem;font-weight:600;color:var(--accent);white-space:nowrap}
.command-input{flex:1;padding:12px 14px;border-radius:8px;border:2px solid rgba(159,211,199,0.4);background:#0f0f0f;color:#dfe6e6;font-size:1rem;transition:all 0.2s ease;outline:none}
.command-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(159,211,199,0.15);background:#111111}
.command-input::placeholder{color:rgba(159,211,199,0.4)}
.btn-primary{background:linear-gradient(180deg, rgba(159,211,199,0.15), rgba(159,211,199,0.08));border:1px solid rgba(159,211,199,0.3);color:var(--accent);font-weight:600;padding:12px 20px}
.btn-primary:hover{background:linear-gradient(180deg, rgba(159,211,199,0.2), rgba(159,211,199,0.12));border-color:rgba(159,211,199,0.5)}

/* panel */
.panel{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border-radius:12px;padding:14px;box-shadow:0 10px 40px rgba(0,0,0,0.75)}
.status{display:flex;gap:12px;align-items:center}
.bell img{width:56px;height:56px}
.sensate-block{display:flex;flex-direction:column}
.label{font-weight:700}
.senses{font-size:.9rem;color:var(--muted);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:8px;border-radius:8px}

.ping-box{margin-top:12px}
.meter{display:flex;gap:8px;align-items:center}
.rope{display:flex;gap:6px;align-items:center}
.bead{width:16px;height:16px;opacity:.28;filter:saturate(.6);transition:transform .18s,opacity .18s}
.bead.on{opacity:1;transform:scale(1.08);filter:saturate(1)}
.ping-number{font-weight:800;color:var(--danger)}

.map{margin-top:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));padding:10px;border-radius:8px}
.locations{display:flex;flex-direction:column;gap:8px}
.mini-map{width:100%;margin-bottom:8px}
.map-svg{display:block;background:rgba(0,0,0,0.2);border-radius:6px;padding:8px;min-height:180px}
.loc-list{display:flex;flex-direction:column;gap:4px}
.loc{padding:6px 8px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,0.02);transition:all 0.2s ease;font-size:0.9rem}
.loc:hover{background:rgba(255,255,255,0.03);border-color:rgba(159,211,199,0.2)}
.loc.current{background:rgba(159,211,199,0.08);border-color:rgba(159,211,199,0.3);color:var(--accent);font-weight:600}
.current-loc{filter:drop-shadow(0 0 3px rgba(159,211,199,0.6))}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.8;transform:scale(1.1)}
}

.inventory{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.inventory .item{padding:6px 8px;border-radius:999px;background:#0b0b0b;color:var(--muted);font-weight:600;border:1px solid rgba(255,255,255,0.02)}

.turns-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px}

/* messages */
.m-info{color:#cdebd9}
.m-action{color:#bfe0ff}
.m-danger{color:#ffb8b8}
.m-world{color:#efdfb0}
.m-sense{color:#bfb6ff;font-style:italic}

/* responsive */
@media (max-width:900px){
  body{grid-template-columns:1fr;grid-auto-rows:auto;padding:12px}
  .panel{order:2}
}