:root {
  --iq-bg: #120f0b;
  --iq-panel: rgba(39, 28, 18, .88);
  --iq-panel-2: rgba(61, 42, 24, .86);
  --iq-gold: #d8aa51;
  --iq-ink: #f1dfb8;
  --iq-muted: #c7ad7a;
  --iq-line: rgba(216, 170, 81, .32);
  --iq-shadow: rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--iq-ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(107, 81, 35, .25), transparent 30%),
    radial-gradient(circle at 80% 0%, rgba(28, 65, 57, .18), transparent 24%),
    linear-gradient(135deg, #080705, #1a120d 48%, #0c0c09);
  font-family: Georgia, 'Times New Roman', serif;
}
.iq-topbar { background: rgba(15, 11, 8, .96); backdrop-filter: blur(8px); }
.iq-brand { color: var(--iq-gold) !important; font-variant: small-caps; letter-spacing: .06em; }
.iq-brand span { color: var(--iq-muted); font-size: .72rem; }
.iq-page { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; padding: 1rem; }
.iq-main { display: grid; gap: 1rem; }
.parchment-panel {
  border: 1px solid var(--iq-line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,236,180,.08), transparent 32%),
    radial-gradient(circle at 15% 20%, rgba(236,189,95,.08), transparent 30%),
    var(--iq-panel);
  box-shadow: 0 18px 50px var(--iq-shadow), inset 0 0 0 1px rgba(255,255,255,.03);
}
.iq-sidebar { position: sticky; top: 80px; height: calc(100vh - 96px); padding: 1rem; overflow:auto; }
.iq-menu-title { color: var(--iq-gold); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; margin-bottom: .4rem; }
.iq-menu-btn {
  width: 100%; display:block; margin: .25rem 0; padding: .55rem .75rem;
  background: rgba(0,0,0,.18); border: 1px solid rgba(216,170,81,.18); color: var(--iq-ink);
  border-radius: 10px; text-align:left;
}
.iq-menu-btn:hover, .iq-menu-btn.active { border-color: var(--iq-gold); background: rgba(216,170,81,.12); }
.iq-hero { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1.2rem 1.4rem; }
.iq-hero h1, .iq-panel h2 { color: var(--iq-gold); margin:0 0 .35rem; font-variant: small-caps; letter-spacing: .04em; }
.iq-hero p, .iq-muted { color: var(--iq-muted); }
.iq-panel { display:none; padding:1rem; }
.iq-panel.active { display:block; }
.iq-map-shell { padding:.75rem; border-radius:14px; background: rgba(0,0,0,.25); border:1px solid rgba(216,170,81,.18); overflow:auto; }
.microtile-grid { display:grid; grid-template-columns: repeat(10, minmax(42px, 1fr)); gap:2px; max-width: 780px; margin:auto; }
.microtile {
  aspect-ratio: 1/1; border-radius: 4px; background-size: cover; background-position:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -12px 20px rgba(0,0,0,.16);
  position:relative; image-rendering:auto;
}
.microtile[data-hint="1"]::after {
  content: '✥'; position:absolute; right:4px; top:2px; color:#f7d889; text-shadow:0 1px 3px #000; font-size:.9rem;
}
.iq-map-meta { color: var(--iq-muted); border:1px solid var(--iq-line); border-radius:999px; padding:.35rem .75rem; background:rgba(0,0,0,.18); }
.iq-console-log { height: 340px; overflow:auto; padding:.75rem; background: rgba(0,0,0,.35); border-radius:12px; border:1px solid rgba(216,170,81,.18); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.iq-console-line { padding:.3rem .15rem; border-bottom:1px dashed rgba(216,170,81,.12); color:#ead7aa; }
.iq-console-line .ts { color:#927a4c; margin-right:.6rem; }
.iq-command-form { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:.5rem; }
.iq-command-input { background:rgba(0,0,0,.4); border-color: var(--iq-line); color: var(--iq-ink); }
.iq-portrait { min-height:240px; display:grid; place-items:center; font-size:6rem; color: var(--iq-gold); border-radius:14px; background: radial-gradient(circle, rgba(216,170,81,.15), rgba(0,0,0,.28)); border:1px solid rgba(216,170,81,.18); }
.iq-stat-list dt { color: var(--iq-muted); }
.iq-stat-list dd { color: var(--iq-ink); }
.iq-equipment-grid, .iq-list-grid, .iq-skill-tree { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:.7rem; }
.iq-card-mini { padding:.8rem; border:1px solid rgba(216,170,81,.18); background:rgba(0,0,0,.22); border-radius:12px; min-height:80px; }
.iq-card-mini strong { display:block; color:var(--iq-gold); }
.iq-login-wrap { min-height:100vh; display:grid; place-items:center; padding:1rem; }
.iq-login { width:min(460px,100%); padding:1.4rem; }
@media (max-width: 920px) {
  .iq-page { grid-template-columns: 1fr; }
  .iq-sidebar { position: static; height:auto; }
  .iq-hero { flex-direction:column; align-items:flex-start; }
}

/* Embedded viewport hotfix: character binding + map readability */
.iq-login-strip { margin: 1rem 1rem 0; padding: .65rem .9rem; }
.iq-nick-form { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; }
.iq-nick-form label { color: var(--iq-gold); font-weight:700; }
.iq-nick-form input { max-width: 180px; background:rgba(0,0,0,.38); border:1px solid var(--iq-line); color:var(--iq-ink); border-radius:8px; padding:.28rem .5rem; }
.microtile-grid { gap:0; border: 2px solid rgba(216,170,81,.35); background:rgba(0,0,0,.35); box-shadow:0 0 0 5px rgba(0,0,0,.18), inset 0 0 22px rgba(0,0,0,.38); }
.microtile { border-radius: 0; outline:1px solid rgba(0,0,0,.12); }
.microtile[data-player="1"]::before { content:'◆'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#ffdf73; font-size:1.35rem; text-shadow:0 0 4px #000, 0 0 8px #000; z-index:3; }
.microtile[data-player="1"] { box-shadow: inset 0 0 0 2px rgba(255,223,115,.85), 0 0 10px rgba(255,223,115,.35); z-index:2; }
.microtile[data-terrain*="road"] { filter:saturate(.95) brightness(.96); }