/*
 * NFT art direction layer
 * Rough marker lines, stained paper, and watercolor bleed.  This file is
 * intentionally isolated from the functional styles so the visual direction
 * can be iterated without touching wallet or contract behaviour.
 */
:root {
  --bg: #17120d;
  --side: #14130e;
  --card: #202018;
  --card2: #2a2418;
  --line: #75664c;
  --text: #f4ead7;
  --muted: #c7bba5;
  --acid: #c9f51f;
  --green: #78c47a;
  --orange: #e88846;
  --paper: #d7c5a0;
}

html {
  background: #17120d;
}

body {
  position: relative;
  isolation: isolate;
  color: var(--text);
  background:
    linear-gradient(105deg, rgba(17, 13, 9, .9), rgba(38, 24, 13, .62)),
    url('assets/nt-ground.jpg') center / cover fixed;
  font-family: Arial, Helvetica, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background:
    repeating-linear-gradient(102deg, transparent 0 37px, rgba(244, 219, 169, .035) 38px 39px, transparent 40px 83px),
    url('assets/nt-parchment-chart.jpg') center / 620px auto repeat;
  mix-blend-mode: screen;
}

.grain {
  display: block;
  opacity: .2;
  background:
    url('assets/nt-rust-frame.jpg') center / 720px auto repeat,
    url('assets/nt-parchment-chart.jpg') center / 480px auto repeat;
  mix-blend-mode: soft-light;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(13, 15, 11, .97), rgba(28, 19, 12, .91)),
    url('assets/nt-drip-moss.jpg') bottom / auto 55% no-repeat;
  border-right-color: rgba(173, 143, 95, .62);
}

.terminal {
  background:
    linear-gradient(90deg, rgba(12, 12, 9, .74), rgba(34, 21, 13, .42)),
    url('assets/nt-void.jpg') center / cover fixed;
}

.topline {
  background:
    linear-gradient(90deg, rgba(32, 18, 10, .93), rgba(54, 27, 12, .78)),
    url('assets/nt-rust-frame.jpg') center / cover;
  border-bottom-color: #815b37;
}

.market-strip {
  background:
    linear-gradient(90deg, rgba(58, 31, 14, .88), rgba(32, 19, 12, .76)),
    url('assets/nt-rust-altar.jpg') center / cover;
}

.notice,
.welcome-card,
.metric,
.furnace-card,
.route-card,
.small-card,
.token-board,
.router-board,
.allocation-board,
.control-card,
.vault-intro,
.claim-terminal,
.rule-grid article,
.safety-card,
.dashboard-ca,
.docs-index,
.whitepaper-sheet,
.native-swap-shell,
.mentor-control,
.mint-hero {
  border-radius: 0;
  background-blend-mode: multiply, soft-light, normal;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .34), 0 0 0 1px rgba(232, 205, 158, .08);
}

.notice {
  background:
    linear-gradient(90deg, rgba(35, 51, 29, .94), rgba(36, 29, 17, .84)),
    url('assets/nt-parchment-chart.jpg') center / 480px auto repeat;
  border-color: #6d8750;
}

.welcome-card {
  position: relative;
  overflow: hidden;
  border-color: #8c704d;
  background:
    linear-gradient(115deg, rgba(26, 31, 21, .94), rgba(45, 28, 15, .78)),
    url('assets/nt-market-ruin.jpg') center / cover;
}

.welcome-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(234, 195, 129, .18);
  background: repeating-linear-gradient(165deg, transparent 0 52px, rgba(248, 220, 163, .025) 53px 54px, transparent 55px 93px);
  mix-blend-mode: screen;
}

.welcome-card > * {
  position: relative;
  z-index: 1;
}

.welcome-art {
  background:
    linear-gradient(180deg, rgba(17, 17, 11, .16), rgba(16, 10, 7, .42)),
    url('assets/nt-hero.jpg') center / cover;
  filter: saturate(.82) contrast(1.04);
}

.welcome-art::after {
  background: linear-gradient(180deg, rgba(17, 12, 7, .08), rgba(17, 10, 6, .54));
}

.metric,
.dashboard-ca,
.small-card,
.token-board,
.router-board,
.control-card,
.vault-intro,
.claim-terminal,
.rule-grid article,
.safety-card {
  background:
    linear-gradient(145deg, rgba(31, 33, 23, .92), rgba(46, 27, 14, .78)),
    url('assets/nt-ground.jpg') center / cover;
}

.metric:nth-child(even),
.route-card,
.router-board,
.native-swap-shell {
  background:
    linear-gradient(145deg, rgba(19, 29, 23, .91), rgba(42, 27, 16, .79)),
    url('assets/nt-chart-frame.jpg') center / cover;
}

.metric.acid {
  border-color: #829d3d;
  background:
    linear-gradient(145deg, rgba(44, 61, 24, .9), rgba(46, 31, 15, .76)),
    url('assets/nt-parchment-chart.jpg') center / cover;
}

.metric.orange,
.furnace-card,
.art-terminal.orange-terminal {
  background:
    linear-gradient(145deg, rgba(65, 42, 22, .85), rgba(39, 24, 14, .8)),
    url('assets/nt-rust-altar.jpg') center / cover;
}

.art-terminal,
.mint-content,
.stake-control,
.mentor-control {
  background-blend-mode: multiply, soft-light, normal;
}

.art-terminal {
  border-color: #8a704c;
  background:
    linear-gradient(145deg, rgba(39, 32, 21, .82), rgba(22, 20, 13, .81)),
    url('assets/nt-rust-frame.jpg') center / cover;
}

.mint-hero {
  border-color: #92714b;
  background:
    linear-gradient(90deg, rgba(20, 21, 14, .83), rgba(46, 28, 15, .38)),
    url('assets/nt-shitcoin-field.png') center / cover;
}

.mint-content {
  text-shadow: 1px 1px 0 rgba(7, 8, 5, .7);
}

.page-title,
.doc-cover,
.handbook-cover {
  border-color: #8d704d;
  background:
    linear-gradient(110deg, rgba(19, 25, 17, .92), rgba(49, 30, 15, .68)),
    url('assets/nt-market-split.jpg') center / cover;
}

.whitepaper-sheet,
.handbook-sheet {
  background:
    linear-gradient(125deg, rgba(32, 30, 20, .9), rgba(49, 31, 17, .76)),
    url('assets/nt-parchment-chart.jpg') center / cover;
}

.docs-index {
  background:
    linear-gradient(145deg, rgba(25, 27, 18, .92), rgba(52, 31, 16, .78)),
    url('assets/nt-ground.jpg') center / cover;
}

.docs-index > a:not(.docs-download):hover,
.handbook-nav a:hover {
  background: rgba(196, 245, 31, .14);
}

.card-head,
.data-row,
.weight-table,
.route-splits,
.dashboard-ca,
.mint-data,
.docs-split,
.burn-stats,
.weight-grid {
  border-color: rgba(218, 186, 129, .38);
}

.action-btn,
.wallet,
.docs-download,
.mint-actions .action-btn,
.owned-nft-card.selected {
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .38);
  clip-path: polygon(0 1%, 98% 0, 100% 96%, 2% 100%);
}

.action-btn:hover,
.wallet:hover {
  filter: saturate(.82) contrast(1.1);
}

h1,
h2,
h3,
h4,
.welcome-card strong,
.furnace-copy strong,
.art-terminal > strong,
.token-board > strong,
.router-board h3,
.control-card h3,
.vault-intro h3,
.page-title h2,
.doc-cover h3,
.handbook-cover h3 {
  text-shadow: 2px 2px 0 rgba(19, 12, 7, .72), -1px 0 0 rgba(255, 234, 188, .08);
}

input,
textarea,
select {
  border-radius: 0;
  background:
    linear-gradient(120deg, rgba(14, 17, 12, .94), rgba(43, 27, 15, .82)),
    url('assets/nt-ground.jpg') center / cover;
}

@media (max-width: 780px) {
  body::before { opacity: .16; }
  .welcome-card,
  .metric,
  .furnace-card,
  .route-card,
  .small-card,
  .token-board,
  .router-board,
  .control-card,
  .vault-intro,
  .claim-terminal,
  .rule-grid article,
  .safety-card,
  .mint-hero { box-shadow: 3px 3px 0 rgba(0, 0, 0, .3); }
}

/* -------------------------------------------------------------------------
   Final rough-watercolour pass
   The reference art is intentionally imperfect: ink edges, dry-brush
   streaks and stained paper.  Keep these rules as a visual-only layer so
   contract and wallet behaviour remain untouched.
------------------------------------------------------------------------- */
:root {
  --ink: #090d0b;
  --ink-blue: #0b1820;
  --stain: #9a5b2d;
  --stain-light: #c98b4a;
  --chalk: #f5eddc;
}

body {
  background:
    linear-gradient(108deg, rgba(8, 12, 10, .76), rgba(25, 13, 9, .56)),
    url('assets/nt-void.jpg') center / cover fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::after {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: -1;
  pointer-events: none;
  opacity: .3;
  background:
    repeating-linear-gradient(173deg, transparent 0 24px, rgba(248, 228, 184, .055) 25px 26px, transparent 27px 65px),
    repeating-linear-gradient(87deg, transparent 0 43px, rgba(0, 0, 0, .12) 44px 46px, transparent 47px 103px),
    url('assets/nt-parchment-chart.jpg') center / 680px auto repeat;
  mix-blend-mode: soft-light;
  transform: rotate(-.25deg);
}

.grain {
  opacity: .32;
  background:
    repeating-linear-gradient(94deg, transparent 0 17px, rgba(245, 215, 160, .04) 18px 19px, transparent 20px 51px),
    url('assets/nt-rust-frame.jpg') center / 560px auto repeat;
  mix-blend-mode: overlay;
}

.app-shell,
.terminal,
main {
  background-color: transparent;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(8, 13, 11, .97), rgba(13, 18, 15, .86) 54%, rgba(38, 20, 11, .93)),
    url('assets/nt-drip-chart.jpg') bottom / cover no-repeat;
  box-shadow: 4px 0 0 rgba(4, 6, 5, .5), inset -1px 0 rgba(221, 176, 105, .2);
}

.logo,
.side-kicker,
.side-bottom {
  border-color: rgba(205, 174, 119, .36);
}

.logo span,
.side-kicker,
.side-bottom p,
.chain-pill,
.nav-item {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
}

.side-nav {
  background: linear-gradient(180deg, rgba(9, 14, 11, .28), rgba(66, 33, 14, .15));
}

.nav-item {
  min-height: 44px;
  border-color: rgba(192, 167, 117, .23);
  background: rgba(7, 13, 10, .48);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
  clip-path: polygon(0 2%, 99% 0, 100% 96%, 1% 100%);
}

.nav-item:nth-child(odd) { clip-path: polygon(1% 0, 100% 2%, 98% 100%, 0 97%); }
.nav-item:hover { background: rgba(137, 83, 42, .28); border-color: rgba(212, 171, 104, .5); }
.nav-item.active { box-shadow: 4px 4px 0 rgba(0, 0, 0, .3); }

.terminal {
  background:
    linear-gradient(90deg, rgba(7, 14, 11, .64), rgba(14, 14, 11, .28)),
    url('assets/nt-void.jpg') center / cover fixed;
}

.topline {
  background:
    linear-gradient(90deg, rgba(10, 12, 10, .92), rgba(72, 34, 15, .7)),
    url('assets/nt-rust-frame.jpg') center / cover;
  border-bottom-color: rgba(199, 126, 62, .62);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}

.market-strip {
  background:
    linear-gradient(90deg, rgba(50, 25, 13, .82), rgba(24, 25, 17, .62)),
    url('assets/nt-drip-chart.jpg') center / cover;
  border-bottom-color: rgba(213, 153, 84, .4);
}

main { position: relative; }
main::before {
  content: "";
  position: absolute;
  inset: 12px 6px auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(218, 172, 102, .38), transparent);
  transform: rotate(-.15deg);
}

.notice,
.welcome-card,
.metric,
.dashboard-ca,
.furnace-card,
.route-card,
.small-card,
.token-board,
.router-board,
.allocation-board,
.control-card,
.vault-intro,
.claim-terminal,
.rule-grid article,
.safety-card,
.mint-hero,
.native-swap-shell,
.mentor-control,
.whitepaper-sheet {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .36), 1px 0 0 rgba(246, 223, 174, .12);
}

.notice::before,
.welcome-card::before,
.metric::before,
.dashboard-ca::before,
.furnace-card::before,
.route-card::before,
.small-card::before,
.token-board::before,
.router-board::before,
.allocation-board::before,
.control-card::before,
.vault-intro::before,
.claim-terminal::before,
.rule-grid article::before,
.safety-card::before,
.native-swap-shell::before,
.mentor-control::before,
.whitepaper-sheet::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border-top: 1px solid rgba(247, 222, 171, .12);
  border-bottom: 1px solid rgba(5, 7, 5, .3);
  opacity: .8;
  transform: rotate(.12deg);
}

.notice > *,
.welcome-card > *,
.metric > *,
.dashboard-ca > *,
.furnace-card > *,
.route-card > *,
.small-card > *,
.token-board > *,
.router-board > *,
.allocation-board > *,
.control-card > *,
.vault-intro > *,
.claim-terminal > *,
.rule-grid article > *,
.safety-card > *,
.native-swap-shell > *,
.mentor-control > *,
.whitepaper-sheet > * {
  position: relative;
  z-index: 1;
}

.notice {
  background:
    linear-gradient(90deg, rgba(25, 46, 27, .9), rgba(36, 26, 16, .74)),
    url('assets/nt-parchment-chart.jpg') center / 520px auto repeat;
  border-color: rgba(125, 161, 77, .74);
}

.welcome-card {
  background:
    linear-gradient(96deg, rgba(9, 17, 12, .9), rgba(27, 19, 13, .47)),
    url('assets/nt-hero.jpg') center / cover;
}

.welcome-card h1,
.page-title h2,
.mint-content h2,
.control-card h3,
.vault-intro h3,
.router-board h3,
.small-card h2,
.token-board > strong,
.furnace-copy strong,
.handbook-cover h3,
.doc-section h3 {
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  text-shadow: 3px 3px 0 rgba(6, 8, 6, .78), -1px 0 rgba(255, 239, 200, .1);
}

.welcome-card > div:first-child > p:not(.terminal-label),
.control-card > p,
.route-card > p,
.router-board p,
.small-card p,
.notice span,
.handbook-deck,
.doc-section p {
  color: #dfd8c8;
}

.welcome-art {
  background:
    linear-gradient(180deg, rgba(8, 10, 8, .06), rgba(11, 9, 6, .16)),
    url('assets/nt-hero.jpg') center / cover;
  filter: saturate(.96) contrast(1.08);
}

.welcome-art img { opacity: 0; }

.metric {
  background:
    linear-gradient(145deg, rgba(28, 43, 24, .82), rgba(35, 24, 14, .7)),
    url('assets/nt-ground.jpg') center / cover;
}

.metric:nth-child(even) {
  background:
    linear-gradient(145deg, rgba(17, 33, 33, .83), rgba(34, 23, 14, .72)),
    url('assets/nt-chart-frame.jpg') center / cover;
}

.metric:nth-child(3n) {
  background:
    linear-gradient(145deg, rgba(62, 38, 18, .77), rgba(27, 20, 13, .72)),
    url('assets/nt-rust-altar.jpg') center / cover;
}

.live-metric::after {
  display: block;
  content: "LIVE / 15S";
  position: absolute;
  top: 13px;
  right: 13px;
  color: rgba(239, 218, 175, .68);
  font: 800 9px ui-monospace, monospace;
  letter-spacing: .05em;
}

.live-metric > i,
.card-head,
.terminal-label,
label,
.text-link,
.ladder-note,
.handbook-line p,
.doc-section > b {
  font-family: "Courier New", ui-monospace, monospace;
  letter-spacing: .06em;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
}

.furnace-card,
.art-terminal.orange-terminal,
.p3-art {
  background:
    linear-gradient(145deg, rgba(74, 42, 20, .74), rgba(31, 20, 13, .72)),
    url('assets/nt-rust-altar.jpg') center / cover;
}

.route-card,
.router-board,
.native-swap-shell {
  background:
    linear-gradient(145deg, rgba(11, 28, 31, .83), rgba(21, 19, 14, .72)),
    url('assets/nt-chart-frame.jpg') center / cover;
}

.route-flow div,
.route-splits,
.allocation-board span,
.stock-tags span {
  background:
    linear-gradient(140deg, rgba(35, 49, 35, .82), rgba(31, 22, 14, .72)),
    url('assets/nt-parchment-chart.jpg') center / 420px auto;
  border-color: rgba(212, 181, 126, .38);
}

.route-card .route-flow i,
.route-card .route-splits strong,
.allocation-board > b,
.stock-tags b { text-shadow: 2px 2px 0 rgba(0, 0, 0, .66); }

.mint-hero {
  background:
    linear-gradient(90deg, rgba(7, 12, 9, .72), rgba(13, 15, 11, .28)),
    url('assets/nt-shitcoin-field.png') center / cover;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .4), 1px 0 rgba(239, 201, 134, .2);
}

.mint-hero::after,
.art-terminal::after,
.p3-art::after,
.mentor-control::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(162deg, transparent 0 39px, rgba(247, 220, 165, .035) 40px 41px, transparent 42px 91px),
    repeating-linear-gradient(17deg, transparent 0 58px, rgba(0, 0, 0, .08) 59px 61px, transparent 62px 117px);
  mix-blend-mode: screen;
  opacity: .55;
}

.mint-countdown,
.mint-data,
.owned-nft-grid,
.mentor-picker-grid section,
.claim-line,
.data-row,
.handbook-table,
.docs-split,
.burn-stats,
.weight-grid {
  border-color: rgba(226, 193, 132, .42);
}

.mint-countdown,
.owned-nft-grid,
.mentor-picker-grid section {
  background:
    linear-gradient(145deg, rgba(9, 17, 12, .83), rgba(38, 23, 13, .62)),
    url('assets/nt-drip-chart.jpg') center / cover;
}

.control-card,
.stake-control,
.mentor-control {
  background:
    linear-gradient(130deg, rgba(13, 26, 19, .86), rgba(39, 26, 16, .66)),
    url('assets/nt-void.jpg') center / cover;
}

.claim-terminal {
  background:
    linear-gradient(145deg, rgba(23, 38, 25, .8), rgba(36, 26, 15, .63)),
    url('assets/nt-drip-chart.jpg') center / cover;
}

.p3-art { min-height: 440px; }
.p3-art .burn-ladder-hero span { color: var(--chalk); }

.action-btn,
.wallet,
.docs-download,
.handbook-nav a,
.text-link {
  font-family: "Courier New", ui-monospace, monospace;
  text-transform: uppercase;
}

.action-btn,
.wallet {
  border-color: rgba(234, 196, 125, .62);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 45%),
    repeating-linear-gradient(174deg, transparent 0 8px, rgba(255, 255, 255, .035) 9px 10px, transparent 11px 17px);
}

.action-btn.acid-btn,
.wallet { color: var(--ink); }
.action-btn.orange-btn { color: #1c1109; }
.action-btn:hover,
.wallet:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(0, 0, 0, .4); }

input,
textarea,
select {
  background:
    linear-gradient(120deg, rgba(8, 15, 11, .9), rgba(44, 25, 14, .72)),
    url('assets/nt-parchment-chart.jpg') center / 460px auto;
  border-color: rgba(225, 190, 126, .45);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .2);
}

.page-title,
.doc-cover,
.handbook-cover {
  background:
    linear-gradient(110deg, rgba(9, 20, 13, .78), rgba(52, 28, 14, .5)),
    url('assets/nt-market-split.jpg') center / cover;
}

.whitepaper-sheet,
.handbook-sheet,
.docs-index {
  background:
    linear-gradient(125deg, rgba(23, 30, 20, .82), rgba(55, 31, 15, .62)),
    url('assets/nt-parchment-chart.jpg') center / cover;
}

.doc-section,
.handbook-nav { border-color: rgba(221, 184, 124, .34); }
.handbook-nav { background: rgba(8, 14, 10, .8); }
.handbook-nav a { box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }

@media (max-width: 780px) {
  main::before { inset: 7px 2px auto; }
  .nav-item { box-shadow: 2px 2px 0 rgba(0, 0, 0, .24); }
  .welcome-card,
  .metric,
  .furnace-card,
  .route-card,
  .small-card,
  .token-board,
  .router-board,
  .control-card,
  .vault-intro,
  .claim-terminal,
  .rule-grid article,
  .safety-card,
  .mint-hero { box-shadow: 3px 3px 0 rgba(0, 0, 0, .34); }
}