:root {
  --bg: #0f0905;
  --bg2: #191008;
  --panel: #21150c;
  --panel2: #2c1d10;
  --ink: #ead7aa;
  --muted: #a88c61;
  --amber: #f1ad42;
  --orange: #c76523;
  --red: #8e2d1f;
  --green: #6a7b43;
  --line: #6e4a26;
  --black: #070403;
  --white: #fff5d7;
  --shadow: rgba(0,0,0,.52);
  --pixel: 3px;
  --font: "Courier New", "Lucida Console", monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  background:
    radial-gradient(circle at 20% -10%, rgba(155, 72, 26, .18), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 24px 24px, 24px 24px, auto;
  image-rendering: pixelated;
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, transparent 0 35%, rgba(255,174,67,.025) 35% 36%, transparent 36% 100%);
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.scanlines { position: fixed; inset: 0; pointer-events:none; z-index: 100; opacity:.10; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.55) 3px 4px); mix-blend-mode:multiply; }
.shell { width: min(1440px, calc(100% - 28px)); margin: 14px auto; }
.pixel-frame {
  border: 2px solid var(--line);
  box-shadow:
    0 0 0 2px var(--black),
    0 0 0 4px #3b2716,
    7px 7px 0 var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 14%), var(--panel);
}
.pixel-frame::selection { background: var(--amber); color: var(--black); }
.topbar { min-height: 84px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 14px 18px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; background:var(--amber); color:var(--black); border: 3px solid var(--black); box-shadow: inset -5px -5px 0 rgba(0,0,0,.35); font-size:26px; }
.eyebrow { font-size: 10px; color:var(--muted); letter-spacing:.15em; }
h1,h2,h3,p { margin-top:0; }
h1 { margin:4px 0 0; font-size: clamp(20px,3vw,34px); letter-spacing:.04em; color:var(--white); text-shadow:3px 3px 0 #5f311b; }
.topbar-meta { display:flex; align-items:center; gap:9px; font-size:11px; color:var(--muted); white-space:nowrap; }
.status-dot { width:8px; height:8px; background:#9db56a; box-shadow:0 0 8px #9db56a; }
.tabs { display:flex; flex-wrap:wrap; gap:0; margin-top:12px; padding:6px; }
.tab { border:0; border-right:1px solid #6f4c2e; background:transparent; padding:10px 12px; cursor:pointer; font-size:12px; color:var(--muted); text-align:left; }
.tab:hover, .tab:focus-visible, .tab.is-active { background:#3b2613; color:var(--amber); outline:none; }
.tab.add-button { margin-left:auto; color:var(--white); background:var(--red); border:2px solid var(--black); box-shadow:inset -3px -3px 0 rgba(0,0,0,.35); }
.view { display:none; margin-top:16px; }
.view.is-active { display:block; }
.hero-grid, .about-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; }
.panel { padding:16px; position:relative; }
.panel-title { color:var(--amber); font-size:11px; letter-spacing:.12em; margin-bottom:14px; border-bottom:1px dashed #6b4728; padding-bottom:7px; }
.intro-panel p { max-width:850px; color:#c9b58c; line-height:1.55; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; }
.stat { background:#171008; border:1px solid #5a3d23; padding:10px; min-height:70px; }
.stat strong { display:block; font-size:22px; color:var(--white); }
.stat span { color:var(--muted); font-size:9px; }
.world-map { position:relative; overflow:hidden; background:#10140e; border:2px solid #070905; box-shadow:inset 0 0 0 2px #354029; }
.world-map.mini { height:210px; }
.world-map.full { height:min(70vh,700px); }
.world-map svg { width:100%; height:100%; display:block; }
.map-grid { stroke:#45513a; stroke-width:.5; opacity:.45; }
.land { fill:#6a7549; stroke:#1e2618; stroke-width:1.4; }
.coast-hi { fill:none; stroke:#97a06c; stroke-width:.6; opacity:.55; }
.map-pin { position:absolute; width:14px; height:14px; transform:translate(-50%,-50%); border:2px solid var(--black); background:var(--amber); box-shadow:2px 2px 0 var(--black); cursor:pointer; z-index:3; }
.map-pin.origin { background:#a24a2f; transform:translate(-50%,-50%) rotate(45deg); }
.map-pin:hover { z-index:5; outline:2px solid var(--white); }
.map-tooltip { position:absolute; z-index:10; min-width:180px; max-width:260px; padding:8px; background:#130d08; border:1px solid var(--amber); color:var(--ink); font-size:10px; box-shadow:5px 5px 0 rgba(0,0,0,.5); pointer-events:none; }
.text-button { margin-top:10px; border:0; background:transparent; color:var(--amber); padding:0; cursor:pointer; font-size:11px; }
.filter-panel { margin:16px 0; }
.filter-row { display:grid; grid-template-columns:1.5fr .8fr .6fr; gap:12px; }
label { display:flex; flex-direction:column; gap:6px; font-size:9px; color:var(--muted); letter-spacing:.08em; }
input, select, textarea { width:100%; border:1px solid #725032; background:#100b07; color:var(--ink); padding:10px; border-radius:0; outline:none; }
input:focus, select:focus, textarea:focus { border-color:var(--amber); box-shadow:0 0 0 1px var(--amber); }
.entries-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.entry-card { overflow:hidden; padding:0; }
.entry-image-wrap { height:230px; position:relative; background:#0b0805; border-bottom:2px solid var(--line); }
.entry-image { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.72) contrast(1.08) sepia(.13); image-rendering:auto; }
.photo-noise { position:absolute; inset:0; pointer-events:none; opacity:.15; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.55) 2px 3px); }
.entry-body { padding:14px; }
.entry-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:9px; margin-bottom:8px; }
.entry-name { color:var(--white); font-size:17px; margin-bottom:4px; }
.entry-brand { color:var(--amber); font-size:10px; text-transform:uppercase; margin-bottom:12px; }
.rating-row { display:flex; align-items:center; gap:10px; }
.rating-bar { height:9px; flex:1; background:#0d0906; border:1px solid #5e4228; }
.rating-bar span { display:block; height:100%; background:repeating-linear-gradient(90deg,var(--amber) 0 6px,#9a5528 6px 8px); }
.entry-rating { color:var(--white); font-size:11px; }
.data-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0; }
.data-chip { border:1px solid #513720; background:#171008; padding:7px; font-size:9px; color:var(--muted); }
.data-chip b { display:block; color:#d7c49c; font-size:10px; margin-top:3px; font-weight:normal; }
.flavor-list { display:flex; flex-wrap:wrap; gap:5px; margin:9px 0; }
.flavor { font-size:9px; padding:4px 6px; background:#3a2918; border:1px solid #70502f; color:#e1cda3; }
.entry-notes { font-size:10px; color:#bdaa83; line-height:1.45; margin:10px 0 0; }
.map-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; }
.legend { display:flex; gap:20px; margin-top:10px; font-size:9px; color:var(--muted); }
.pin { display:inline-block; width:9px; height:9px; background:var(--amber); border:1px solid var(--black); margin-right:6px; }
.pin.origin { background:#a24a2f; transform:rotate(45deg); }
.location-list { display:flex; flex-direction:column; gap:8px; }
.location-item { padding:9px; border:1px solid #593a20; background:#171008; cursor:pointer; }
.location-item:hover { border-color:var(--amber); }
.location-item strong { display:block; color:var(--white); font-size:10px; }
.location-item span { font-size:9px; color:var(--muted); }
.cabinet-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.cigar-slot { aspect-ratio: .72; border:2px solid #0a0503; background:linear-gradient(145deg,#372116,#1b1009); box-shadow:inset 0 0 0 2px #6b3f23, inset 0 0 30px #080503; padding:8px; display:flex; flex-direction:column; justify-content:space-between; }
.cigar-sprite { height:70%; display:grid; place-items:center; }
.cigar-shape { width:22px; height:86%; background:linear-gradient(90deg,#5a2b16,#bb7040 38%,#6c341c 68%,#34190e); border:2px solid #120905; position:relative; }
.cigar-shape::before { content:""; position:absolute; left:-2px; right:-2px; top:25%; height:15px; background:#b59242; border:2px solid #2b160b; box-shadow:inset 0 0 0 2px #d9bb62; }
.cigar-slot strong { font-size:9px; color:var(--white); line-height:1.2; }
.cigar-slot span { font-size:8px; color:var(--muted); }
.keys { margin:0; }
.keys div { display:grid; grid-template-columns:90px 1fr; border-bottom:1px dashed #50371f; padding:8px 0; }
.keys dt { color:var(--amber); }
.keys dd { margin:0; color:var(--muted); }
.footer { display:flex; justify-content:space-between; gap:12px; padding:10px 14px; margin-top:16px; font-size:9px; color:var(--muted); }
.entry-dialog { width:min(860px,calc(100vw - 24px)); color:var(--ink); background:var(--panel); padding:0; }
.entry-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(2px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:14px 16px; }
.dialog-head h2 { margin:4px 0 0; font-size:20px; color:var(--white); }
.close-button { width:34px; height:34px; background:#321a10; border:1px solid #6f4727; cursor:pointer; font-size:21px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px; }
.span-2 { grid-column:1/-1; }
.file-label { border:1px dashed #725032; padding:12px; }
.file-label input { border:0; padding:0; background:transparent; }
.file-label span { font-size:9px; color:var(--muted); }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; padding:14px 16px; border-top:1px solid var(--line); }
.dialog-actions button { border:1px solid var(--black); padding:10px 15px; cursor:pointer; box-shadow:inset -3px -3px 0 rgba(0,0,0,.3); }
.secondary { background:#3b291a; }
.primary { background:var(--red); color:var(--white); }
.empty { grid-column:1/-1; border:1px dashed var(--line); padding:30px; text-align:center; color:var(--muted); }

@media (max-width: 1000px) {
  .entries-grid { grid-template-columns:repeat(2,1fr); }
  .cabinet-grid { grid-template-columns:repeat(4,1fr); }
  .map-layout { grid-template-columns:1fr; }
  .map-side { order:2; }
}
@media (max-width: 720px) {
  .shell { width:min(100% - 16px, 1440px); margin:8px auto; }
  .topbar { align-items:flex-start; }
  .topbar-meta { display:none; }
  .brand-mark { width:38px; height:38px; }
  .tabs { display:grid; grid-template-columns:1fr 1fr; }
  .tab { border-bottom:1px solid #55361f; }
  .tab.add-button { margin-left:0; grid-column:1/-1; text-align:center; }
  .hero-grid, .about-grid, .filter-row, .entries-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .entry-image-wrap { height:260px; }
  .cabinet-grid { grid-template-columns:repeat(3,1fr); }
  .form-grid { grid-template-columns:1fr; }
  .span-2 { grid-column:auto; }
  .footer { flex-direction:column; }
  .world-map.full { height:52vh; min-height:340px; }
}

/* v1.2 // HUMIDOR ACCESS SEQUENCE --------------------------------------- */
.humidor-panel { overflow:hidden; }
.humidor-sequence {
  min-height: 420px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:20px;
  padding:34px 16px 42px;
}
.humidor-sequence.is-hidden { display:none; }
.humidor-sequence-label {
  font-size:10px;
  color:var(--muted);
  letter-spacing:.12em;
  min-height:14px;
}
.humidor-inventory { display:none; }
.humidor-inventory.is-visible { display:block; }
.humidor-toolbar {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:8px 10px;
  border:1px solid #593a20;
  background:#171008;
  font-size:9px;
  color:var(--muted);
}

.humidor-crate {
  position:relative;
  width:min(390px, 82vw);
  height:250px;
  image-rendering:pixelated;
  filter:drop-shadow(10px 12px 0 rgba(0,0,0,.34));
}
.humidor-base,
.humidor-lid {
  position:absolute;
  left:5%;
  width:90%;
  border:5px solid #160b05;
  background:
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(30,10,3,.18) 40px 44px),
    linear-gradient(#7b4524,#4c2815);
  box-shadow:
    inset 0 0 0 4px #a8693a,
    inset 0 0 0 8px #3b1d0f;
}
.humidor-base {
  bottom:8px;
  height:142px;
}
.humidor-lid {
  z-index:3;
  bottom:146px;
  height:82px;
  transform-origin:50% 100%;
}
.humidor-lid::before,
.humidor-base::before {
  content:"";
  position:absolute;
  inset:14px;
  border:3px solid rgba(35,14,6,.62);
  box-shadow:inset 0 0 0 3px rgba(183,111,59,.28);
}
.lid-highlight {
  position:absolute;
  left:18%; right:18%; top:18px;
  height:7px;
  background:#b47440;
  opacity:.45;
}
.humidor-hinge {
  position:absolute;
  z-index:4;
  bottom:137px;
  width:34px;
  height:12px;
  background:#332a1d;
  border:3px solid #100a06;
}
.hinge-left { left:22%; }
.hinge-right { right:22%; }
.humidor-lock {
  position:absolute;
  z-index:5;
  width:34px;
  height:28px;
  left:50%;
  top:-4px;
  transform:translateX(-50%);
  background:#6f5a29;
  border:4px solid #1b1208;
  box-shadow:inset 0 0 0 3px #b1954e;
}
.wood-line { position:absolute; left:10%; right:10%; height:3px; background:rgba(34,13,6,.5); }
.line-a { top:47px; }
.line-b { top:91px; }

/* Intentionally discrete: exactly four visible frames, not a smooth CSS tween. */
.humidor-crate.frame-1 .humidor-lid { transform:translateY(0) skewX(0deg) scaleY(1); }
.humidor-crate.frame-2 .humidor-lid { transform:translateY(-11px) skewX(-3deg) scaleY(.90); }
.humidor-crate.frame-3 .humidor-lid { transform:translateY(-38px) skewX(-7deg) scaleY(.63); }
.humidor-crate.frame-4 .humidor-lid { transform:translateY(-69px) skewX(-10deg) scaleY(.32); }
.humidor-crate.frame-2 .humidor-lock,
.humidor-crate.frame-3 .humidor-lock,
.humidor-crate.frame-4 .humidor-lock { transform:translateX(-50%) translateY(4px); }

.cigar-slot .cigar-type {
  display:block;
  margin-top:4px;
  color:var(--amber);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

@media (max-width:720px) {
  .humidor-sequence { min-height:330px; padding:20px 8px 30px; }
  .humidor-crate { height:205px; width:min(330px,88vw); }
  .humidor-base { height:116px; }
  .humidor-lid { bottom:120px; height:68px; }
  .humidor-hinge { bottom:111px; }
  .humidor-crate.frame-2 .humidor-lid { transform:translateY(-9px) skewX(-3deg) scaleY(.90); }
  .humidor-crate.frame-3 .humidor-lid { transform:translateY(-31px) skewX(-7deg) scaleY(.63); }
  .humidor-crate.frame-4 .humidor-lid { transform:translateY(-56px) skewX(-10deg) scaleY(.32); }
}