/* som-ui.css — "Aether Grimoire", the Spirits of Monad interface (launch design, 2026-11-09).
   Every panel is a page of the opening film's night sky: deep indigo with a dithered star grain, a stepped gold
   pixel frame with a thin aether-mint inner line, a gold title plate, mint for what is alive or done, gold for what
   matters, rarity colours on slots. Loaded last: it restyles the shared classes (.modal, .btn, rows, bars, HUD) and
   adds the components of the launch screens (bag grid, slots, coin purse, tabs, cards). Hard pixel steps, no blur. */

:root {
  /* night */
  --ink-0: #06051a; --ink-1: #0d0b29; --ink-2: #15123d; --ink-3: #201b56; --ink-4: #2c2672;
  --line: #3a3480; --line-hi: #5a52b0;
  /* light */
  --cream: #f4eedc; --dim: #aaa4cc; --faint: #6f69a0;
  --gold: #f2c96a; --gold-hi: #ffe8a6; --gold-lo: #9c6c2a; --gold-ink: #3b2408;
  --mint: #7ef0c6; --mint-lo: #2e8c78; --mint-ink: #0b3a33;
  --lilac: #c7a6ff; --rose: #ff8fa3; --ember: #ff9a52;
  /* rarity, after the old MMO convention, tuned to the night */
  --r-poor: #8a86a8; --r-common: #f4eedc; --r-uncommon: #6fe08a; --r-rare: #5fb2ff; --r-epic: #c58cff; --r-legendary: #ffa64d;
  /* shared */
  --step: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  --step-sm: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
  --grain:
    radial-gradient(1px 1px at 7px 11px, #ffffff30 99%, transparent),
    radial-gradient(1px 1px at 29px 3px, #c7a6ff28 99%, transparent),
    radial-gradient(1px 1px at 41px 37px, #7ef0c622 99%, transparent),
    radial-gradient(1px 1px at 17px 49px, #ffffff1c 99%, transparent);
  /* the prototype's shared names, pointed at the night */
  --wood: var(--ink-1); --wood-2: var(--ink-2); --wood-edge: var(--line-hi); --cream-dim: var(--dim); --leaf: var(--mint); --berry: var(--rose); --night: var(--ink-0);
  --font-pixel: "Pixelify Sans", EarthPixel, monospace;
  --font-num: "VT323", EarthNumbers, monospace;
}

/* ------------------------------------------------------------------ panels */
.modal-bg { background: #06051ad0; }
.modal-bg .modal, .start-card {
  color: var(--cream);
  background:
    var(--grain),
    linear-gradient(180deg, var(--ink-2) 0, var(--ink-2) 56px, var(--ink-1) 56px, var(--ink-1) 100%);
  background-size: 53px 59px, 53px 59px, 53px 59px, 53px 59px, 100% 100%;
  border: 2px solid var(--gold-lo);
  border-radius: 0;
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px var(--ink-0), inset 0 0 0 3px var(--mint-lo), inset 0 3px 0 3px #ffffff0d, 0 6px 0 #00000080;
  scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent;
}
.modal-bg .modal h2 {
  position: relative; margin: -4px 44px 14px -4px; padding: 4px 6px 8px;
  font-size: 23px; letter-spacing: .02em; color: var(--gold);
  text-shadow: 2px 2px 0 var(--gold-ink);
  border-bottom: 2px solid var(--gold-lo); box-shadow: 0 2px 0 var(--ink-0);
}
.modal-bg .modal h2::after { /* an aether gem on the plate's rule */
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 6px; height: 6px; margin-left: -3px;
  background: var(--mint); box-shadow: 0 0 0 2px var(--ink-0); transform: rotate(45deg);
}
.modal-close {
  background: var(--ink-3); border: 2px solid var(--gold-lo); color: var(--gold); border-radius: 0;
  clip-path: var(--step-sm); box-shadow: inset 0 2px 0 #ffffff14;
}
.modal-close:active { background: var(--ink-4); transform: translateY(1px); }
.modal p, .modal-foot-note, .craft-safety-note { color: var(--dim); }
.menu-section-title, .som-section {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; padding: 0 0 4px;
  font-family: var(--font-pixel); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--mint);
  border-bottom: 2px dotted var(--line); border-top: 0;
}
.menu-section-title::before, .som-section::before { content: ""; width: 6px; height: 6px; background: var(--mint); transform: rotate(45deg); flex: 0 0 6px; }

/* ----------------------------------------------------------------- buttons */
.btn {
  min-height: 44px; border-radius: 0; clip-path: var(--step-sm);
  border: 2px solid var(--line-hi); background: var(--ink-3); color: var(--cream);
  box-shadow: inset 0 2px 0 #ffffff1a, inset 0 -3px 0 #0000004d;
  font-family: var(--font-pixel); font-size: 15px; letter-spacing: .02em;
}
.btn.primary, .btn.som-gold {
  background: linear-gradient(180deg, var(--gold-hi) 0, var(--gold-hi) 3px, var(--gold) 3px, var(--gold) calc(100% - 5px), var(--gold-lo) calc(100% - 5px));
  border-color: var(--gold-ink); color: var(--gold-ink); text-shadow: 0 1px 0 #ffffff55; box-shadow: none;
}
.btn.som-mint { background: var(--mint-lo); border-color: var(--mint); color: var(--cream); box-shadow: inset 0 2px 0 #ffffff26, inset 0 -3px 0 #00000040; }
.btn.danger { background: #3a1430; border-color: var(--rose); color: #ffd6de; }
.btn:disabled, .btn.disabled { background: var(--ink-1); color: var(--faint); border-color: var(--line); box-shadow: none; }
.btn:not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 2px 0 #00000066; filter: none; }
button:focus-visible, [role=button]:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
input, select { background: var(--ink-0); color: var(--cream); border: 2px solid var(--line-hi); border-radius: 0; }

/* -------------------------------------------------------------- rows, cards */
.inv-row, .quest-row, #craft-list .craft-row, .modal-bg .dg-card, .modal-bg .expedition-find-card, .modal-bg .reward-row, .som-card {
  background: var(--ink-2); border: 2px solid var(--line); border-radius: 0; clip-path: var(--step-sm);
  box-shadow: inset 0 2px 0 #ffffff0d;
}
.quest-row.done, .som-card.done { border-color: var(--mint-lo); box-shadow: inset 4px 0 0 var(--mint); }
.quest-row.board { border-color: #5a3f9a; }
#craft-list .craft-recommended { border-color: var(--gold-lo) !important; box-shadow: inset 4px 0 0 var(--gold) !important; }
#craft-list .craft-output, #inv-list .inv-copy .inv-relevance { color: var(--mint); }
#craft-list .craft-ingredient { background: var(--ink-0); border: 1px solid var(--line); }
#craft-list .craft-ingredient.missing { color: var(--rose); border-color: #6a2a48; }
.quest-bar, .xp-track, #hud .journey-progress, .som-bar { background: var(--ink-0); border: 1px solid var(--line); border-radius: 0; }
.quest-bar > div, #xp-fill, #hud .journey-progress > i, .som-bar > i {
  background: repeating-linear-gradient(90deg, var(--mint) 0 6px, #63d6ae 6px 8px); border-radius: 0;
}

/* --------------------------------------------------------------------- HUD */
.round-btn, .pill, .level-badge, #hud .map-mode-panel, #hud #journey-card, #toast, #big-toast, #boot-status, #hud #dungeon-hud, #btn-map-close {
  background-color: #0d0b29e8; border-color: var(--gold-lo); color: var(--cream);
}
.round-btn { box-shadow: inset 0 0 0 2px var(--ink-0), inset 0 3px 0 2px #ffffff12, 0 3px 0 #00000080; }
.round-btn:active, .round-btn[aria-pressed=true] { background: var(--mint-ink); border-color: var(--mint); }
.level-badge { box-shadow: inset 0 0 0 2px var(--ink-0), 0 2px 0 #00000080; color: var(--gold); }
#hud #journey-card { border-color: var(--gold-lo); box-shadow: inset 4px 0 0 var(--gold), 0 3px 0 #00000080; }
#hud .journey-kicker { color: var(--mint); letter-spacing: .08em; }
#hud .journey-action { color: var(--gold); }
#btn-action { background: var(--mint-ink); border-color: var(--mint); box-shadow: inset 0 2px 0 #ffffff26, 0 4px 0 #00000080; }
#joystick { background: #0d0b29b0; border-color: var(--gold-lo); }
#joy-thumb { background: var(--ink-4); border: 2px solid var(--gold); }
#quest-badge { background: var(--rose); border-color: var(--ink-0); color: var(--ink-0); }

/* ---------------------------------------------------------------- the bag */
.som-bag-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.som-bag-cap { font-family: var(--font-num); font-size: 20px; color: var(--dim); }
.som-bag-cap b { color: var(--cream); font-weight: 400; }
.som-bag-cap.full b { color: var(--rose); }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.slot {
  --rar: var(--line-hi);
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, var(--ink-3) 0 40%, var(--ink-1) 70%);
  border: 2px solid var(--rar); clip-path: var(--step-sm);
  box-shadow: inset 0 0 0 2px var(--ink-0), inset 0 -4px 0 2px #00000040;
  padding: 0; cursor: pointer; color: var(--cream);
}
.slot.empty { --rar: var(--line); background: var(--ink-1); cursor: default; }
.slot.locked { --rar: var(--ink-3); background: repeating-linear-gradient(45deg, var(--ink-1) 0 4px, var(--ink-0) 4px 8px); cursor: default; }
.slot .pe-icon { --icon-size: 32px; }
.slot .slot-n { position: absolute; right: 3px; bottom: 1px; font-family: var(--font-num); font-size: 18px; line-height: 1; color: var(--cream); text-shadow: 1px 1px 0 var(--ink-0), -1px 0 0 var(--ink-0); }
.slot[aria-pressed=true] { border-color: var(--gold-hi); box-shadow: inset 0 0 0 2px var(--gold-ink), 0 0 0 2px var(--gold); }
.slot[data-rarity=poor] { --rar: var(--r-poor); }
.slot[data-rarity=common] { --rar: #8e88b8; }
.slot[data-rarity=uncommon] { --rar: var(--r-uncommon); }
.slot[data-rarity=rare] { --rar: var(--r-rare); }
.slot[data-rarity=epic] { --rar: var(--r-epic); }
.slot[data-rarity=legendary] { --rar: var(--r-legendary); }
.rar-poor { color: var(--r-poor); } .rar-common { color: var(--r-common); } .rar-uncommon { color: var(--r-uncommon); }
.rar-rare { color: var(--r-rare); } .rar-epic { color: var(--r-epic); } .rar-legendary { color: var(--r-legendary); }
.som-detail { margin-top: 12px; padding: 10px 12px; min-height: 92px; background: var(--ink-0); border: 2px solid var(--line); clip-path: var(--step-sm); }
.som-detail b { font-size: 17px; display: block; }
.som-detail small { display: block; color: var(--dim); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.som-detail .som-kind { font-family: var(--font-num); font-size: 16px; color: var(--faint); text-transform: capitalize; }
.som-tabs { display: flex; gap: 4px; margin: 0 0 10px; }
.som-tab { flex: 1; min-height: 36px; font-family: var(--font-pixel); font-size: 13px; color: var(--dim); background: var(--ink-1); border: 2px solid var(--line); border-radius: 0; clip-path: var(--step-sm); }
.som-tab[aria-selected=true] { color: var(--ink-0); background: var(--mint); border-color: var(--mint-ink); }

/* ------------------------------------------------------------- the purse */
.purse { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-num); font-size: 20px; line-height: 1; color: var(--cream); white-space: nowrap; }
.purse > span { display: inline-flex; align-items: center; gap: 3px; }
/* crystal coins, in percentages so one shape serves every size: Glimmer a mint diamond, Prism a lilac hexagonal gem,
   Starcrystal a gold four-point star; each with a light facet (top left) and a shade (bottom right) */
.coin { width: 11px; height: 11px; display: inline-block; flex: 0 0 11px; position: relative; }
.coin.c { background: linear-gradient(135deg, #d8fff0 0 30%, var(--mint) 30% 62%, var(--mint-lo) 62%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.coin.s { background: linear-gradient(135deg, #f3e8ff 0 30%, var(--lilac) 30% 64%, #7a55c4 64%); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.coin.g { width: 13px; height: 13px; flex-basis: 13px; background: linear-gradient(135deg, var(--gold-hi) 0 34%, var(--gold) 34% 62%, var(--gold-lo) 62%); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.purse.big { font-size: 26px; gap: 12px; } .purse.big .coin { width: 15px; height: 15px; flex-basis: 15px; } .purse.big .coin.g { width: 18px; height: 18px; flex-basis: 18px; }

/* ------------------------------------------------------------------ motion */
@keyframes som-unfold { 0% { clip-path: inset(46% 0 46% 0); } 34% { clip-path: inset(30% 0 30% 0); } 67% { clip-path: inset(12% 0 12% 0); } 100% { clip-path: var(--step); } }
@keyframes som-rise { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
.modal-bg.show .modal { animation: som-unfold .16s steps(1, end) both; }
.modal-bg.show .bag-grid .slot, .modal-bg.show .quest-row, .modal-bg.show #craft-list .craft-row, .modal-bg.show .som-card { animation: som-rise .18s steps(3) both; }
.modal-bg.show .bag-grid .slot:nth-child(n+5) { animation-delay: .03s; } .modal-bg.show .bag-grid .slot:nth-child(n+9) { animation-delay: .06s; }
.modal-bg.show .bag-grid .slot:nth-child(n+13) { animation-delay: .09s; } .modal-bg.show .bag-grid .slot:nth-child(n+17) { animation-delay: .12s; }
.modal-bg.show .quest-row:nth-child(2), .modal-bg.show .som-card:nth-child(2) { animation-delay: .04s; }
.modal-bg.show .quest-row:nth-child(3), .modal-bg.show .som-card:nth-child(3) { animation-delay: .08s; }
.modal-bg.show .quest-row:nth-child(n+4), .modal-bg.show .som-card:nth-child(n+4) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .modal-bg.show .modal, .modal-bg.show .slot, .modal-bg.show .quest-row, .modal-bg.show .som-card { animation: none !important; } }

/* ------------------------------------------------------------- homestead */
.hs-top { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-family: var(--font-num); font-size: 19px; color: var(--dim); }
.hs-top b { color: var(--cream); font-weight: 400; }
.hs-station, .hs-build { display: grid; gap: 7px; padding: 11px; margin: 0 0 9px; }
.hs-head { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.hs-head .pe-icon { --icon-size: 32px; }
.hs-head b { flex: 1; color: var(--gold); text-shadow: 1px 1px 0 var(--gold-ink); }
.hs-pips { display: inline-flex; gap: 3px; }
.hs-pip { width: 8px; height: 8px; background: var(--ink-0); border: 1px solid var(--line-hi); transform: rotate(45deg); }
.hs-pip.on { background: var(--mint); border-color: var(--mint-ink); }
.hs-fill { height: 8px; }
.hs-store { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.hs-store small, .hs-rate { color: var(--dim); font-size: 13px; }
.hs-item { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 2px; background: var(--ink-0); border: 1px solid var(--line); clip-path: var(--step-sm); }
.hs-item .pe-icon { --icon-size: 16px; } .hs-item b { font-family: var(--font-num); font-size: 18px; font-weight: 400; }
.hs-workers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.hs-worker { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 8px; text-align: left; font-family: var(--font-pixel); font-size: 14px; color: var(--cream); background: var(--ink-3); border: 2px solid var(--line-hi); border-radius: 0; clip-path: var(--step-sm); }
.hs-worker small { margin-left: auto; color: var(--dim); font-family: var(--font-num); font-size: 15px; }
.hs-worker.empty { justify-content: center; color: var(--mint); background: transparent; border-style: dashed; border-color: var(--mint-lo); }
.hs-el { width: 10px; height: 10px; flex: 0 0 10px; background: var(--el); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--ink-0); }
.hs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hs-actions .btn, .hs-build .btn { margin: 0; }
.hs-actions .btn small, .hs-build .btn small { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center; font-family: var(--font-num); font-size: 15px; }
.hs-cost { display: inline-flex; align-items: center; gap: 2px; } .hs-cost .pe-icon { --icon-size: 16px; }
.hs-picks { display: grid; gap: 6px; margin-bottom: 10px; }
.hs-pick { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 2px 8px; text-align: left; color: var(--cream); font-family: var(--font-pixel); font-size: 15px; padding: 9px 10px; cursor: pointer; }
.hs-pick small { grid-column: 2; color: var(--dim); font-size: 12px; }
.hs-good { grid-column: 3; grid-row: 1 / span 2; color: var(--ink-0); background: var(--mint); padding: 2px 6px; font-family: var(--font-num); font-size: 15px; }