:root{
  --bg:#020617;        /* deep navy */
  --panel:#070d1b;
  --text:#e8f1f2;
  --muted:#9bb0b3;
  --acc:#00d1ff;
  --mag:#ff3df1;
  --btc:#f7931a;
  --good:#2bd46a;
  --warn:#ffb13b;
    --graffiti-red:rgba(248,113,113,0.28); /* hotter neon red */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1350px 900px at 8% 0%, #020617 0%, #020617 52%, #000000 100%) fixed,
    radial-gradient(1200px 800px at 85% 100%, rgba(56,189,248,0.25), transparent 70%) fixed;
  color:var(--text);
  font-family:'Roboto Mono',monospace;
}
.hidden{display:none!important}
.muted{color:var(--muted)}

/* CRT overlays */
.scanlines,.noise{pointer-events:none;position:fixed;inset:0;z-index:1}
.scanlines{
  background:repeating-linear-gradient(
    to bottom,
    rgba(15,23,42,0.6) 0,
    rgba(15,23,42,0.6) 2px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode:soft-light;
  opacity:.12;
}
.noise{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="noStitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.45"/></svg>');
  opacity:.18;
  animation:noise 1.2s steps(3) infinite;
}
@keyframes noise{to{transform:translate3d(1px,-1px,0)}}
.crt{text-shadow:0 0 14px rgba(0,209,255,.38),0 0 6px rgba(255,61,241,.22)}

/* Glitch title */
.glitch-title{position:relative;display:inline-block}
.glitch-title::before,.glitch-title::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;opacity:.7;clip-path:inset(0 0 0 0);
}
.glitch-title::before{
  transform:translate(1px,-1px);
  color:var(--acc);
  mix-blend-mode:screen;
  filter:blur(.4px);
}
.glitch-title::after{
  transform:translate(-1px,1px);
  color:var(--mag);
  mix-blend-mode:screen;
  filter:blur(.4px);
}
@media (prefers-reduced-motion:no-preference){
  .glitch-title{animation:gl 3.2s infinite steps(2,end)}
  @keyframes gl{
    50%{transform:translateX(0)}
    52%{transform:translateX(1px)}
    54%{transform:translateX(-1px)}
  }
}

/* Preloader */
#preloader{
  position:fixed;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(800px 600px at 50% 0%,#020617 0%,#020014 50%,#000 90%);
  z-index:9999;
  transition:opacity .45s ease, filter .25s ease;
}
#preloader .logo{
  font-family:'Press Start 2P',monospace;
  letter-spacing:2px;
  font-size:14px;
  color:var(--acc);
  margin-bottom:16px;
}
#preloader .spinner{
  width:42px;height:42px;
  border:3px solid rgba(0,209,255,.18);
  border-top-color:var(--acc);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-bottom:8px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.satoshi{color:var(--muted);opacity:.85}
.pre-terminal{
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
  max-width:320px;
  text-align:left;
  line-height:1.3;
  opacity:.95;
  min-height:80px;
}
.pre-terminal .line{
  display:block;
  margin-bottom:2px;
  opacity:.85;
}
.pre-terminal .line.strong{
  color:var(--text);
}
.pre-terminal .line.genesis{
  color:var(--warn);
  font-weight:700;
}
.pre-terminal .line.meta{
  color:var(--acc);
}
.pre-terminal .line.system{
  color:var(--muted);
  opacity:.9;
}
/* new colors for Act III */
.pre-terminal .line.info{
  color:#38bdf8;
}
.pre-terminal .line.amber{
  color:#fbbf24;
}

/* Matrix-style blinking cursor */
.pre-terminal .line.cursor-line::after{
  content:'▊';
  margin-left:4px;
  animation:blinkCursor .8s steps(2,start) infinite;
}
@keyframes blinkCursor{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}

.pre-terminal .line.fade-in{
  animation:fadeInLine .6s ease forwards;
}
@keyframes fadeInLine{
  from{opacity:0;transform:translateY(2px);}
  to{opacity:.9;transform:translateY(0);}
}

/* tiny Satoshi-style skip text */
.pre-skip{
  margin-top:10px;
  font-size:9px;
  color:rgba(148,163,184,0.75);
  text-align:center;
  max-width:320px;
  cursor:pointer;
  opacity:0.8;
}
.pre-skip:hover{
  opacity:1;
  color:var(--acc);
}

#preloader.storm{
  animation:stormFlash 0.12s steps(2,end) 10;
  filter:contrast(1.18) brightness(1.2);
}
@keyframes stormFlash{
  0%{background:#f9fafb;color:#020617;}
  50%{background:#020617;color:#e5e7eb;}
  100%{background:#f9fafb;color:#020617;}
}

/* Layout */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 20px 8px 20px;
}
.brand{
  text-align:left;
}
.brand h1{
  margin:0;
  font-family:'Press Start 2P',monospace;
  font-size:20px;
}
.logo-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.mm-badge{
  border-radius:999px;
  border:1px solid rgba(248,181,73,0.9);
  padding:2px 6px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#f97316;
  opacity:.9;
}
.tagline{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
}
.wallet{display:flex;align-items:center;gap:10px}
#connectBtn{min-width:150px}

/* Top bar */
.bar{
  display:grid;
  grid-template-columns:1.2fr 1fr .6fr .6fr auto;
  gap:10px;
  padding:8px 20px 0;
  align-items:end;
}
.group{display:flex;flex-direction:column;gap:6px}
.row{display:flex;gap:8px}
input,select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.55);
  background:rgba(2,6,23,.92);
  color:var(--text);
  outline:none;
  font-size:12px;
}
input::placeholder{color:rgba(148,163,184,.75)}
.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.7);
  background:linear-gradient(135deg,rgba(0,209,255,.19),rgba(255,61,241,.09));
  color:var(--text);
  cursor:pointer;
  transition:transform .06s ease, box-shadow .18s, border-color .18s, background .18s;
  font-size:11px;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 16px rgba(0,209,255,.35);
  border-color:rgba(0,209,255,.55);
}
.btn.primary{
  box-shadow:0 0 20px rgba(0,209,255,.3);
  border-color:rgba(0,209,255,.6);
}
.btn.success{
  box-shadow:0 0 20px rgba(43,212,106,.3);
  border-color:rgba(43,212,106,.6);
}
.btn.warn{
  box-shadow:0 0 20px rgba(255,177,59,.3);
  border-color:rgba(255,177,59,.6);
}

/* Deep red borders for main action buttons */
#listBtn,
#cancelBtn,
#buyBtn{
  border-color:#7f1d1d;
  box-shadow:0 0 20px rgba(127,29,29,0.9);
  background:linear-gradient(135deg,rgba(127,29,29,0.95),rgba(239,68,68,0.6));
}
#listBtn:hover,
#cancelBtn:hover,
#buyBtn:hover{
  border-color:#fecaca;
  box-shadow:0 0 28px rgba(248,113,113,0.95);
  background:linear-gradient(135deg,rgba(127,29,29,1),rgba(248,113,113,0.9));
}

.big{font-weight:700}
.cta{display:flex;gap:10px;align-items:center}

/* Main cards */
.grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  padding:12px 20px 24px;
}
.card{
  background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(2,6,23,.96));
  border-radius:18px;
  padding:14px 14px 16px;
  border:1px solid rgba(148,163,184,.5);
  box-shadow:
    0 0 30px rgba(15,23,42,.85),
    0 0 40px rgba(0,0,0,.9),
    inset 0 0 18px rgba(148,163,184,.25);
}
.status{
  min-height:22px;
  margin-bottom:8px;
  color:var(--muted);
  white-space:pre-line;
  font-size:12px;
}
.meta{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.meta img{
  width:180px;height:180px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.7);
  background:#020617;
}
.traits{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  max-height:140px;
  overflow:auto;
  white-space:pre-line;
}
.mini-row{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
  font-size:11px;
}

/* QR */
.qrWrap{
  display:flex;
  gap:12px;
  align-items:center;
}
.qrWrap canvas{
  background:#f9fafb;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.7);
  padding:8px;
}
.links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.links a{
  color:var(--acc);
  text-decoration:none;
  font-size:11px;
}

/* Board */
.board{margin:0 20px 24px 20px}
.board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.board-ctrl{
  display:flex;
  gap:8px;
  align-items:end;
  font-size:11px;
}
.board-ctrl input{
  max-width:120px;
  font-size:11px;
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
}
.card-nft{
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(30,64,175,.88));
  border-radius:16px;
  padding:10px;
  display:flex;
  gap:10px;
  position:relative;
  overflow:hidden;
  transition:transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  border:1px solid rgba(148,163,184,.8);
  box-shadow:
    0 0 16px rgba(15,23,42,.9),
    0 0 22px rgba(0,0,0,.9);
}
.card-nft::before{
  content:'';
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 0 0,rgba(0,209,255,.16),transparent 60%),
    radial-gradient(circle at 100% 100%,rgba(248,113,113,.18),transparent 55%);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.card-nft:hover{
  transform:translateY(-1px);
  box-shadow:0 0 26px rgba(0,209,255,.4);
  border-color:rgba(0,209,255,.8);
  background:linear-gradient(180deg,rgba(30,64,175,.98),rgba(2,6,23,.98));
}
.card-nft:hover::before{opacity:1;}
.card-nft img{
  width:80px;height:80px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.85);
  background:#020617;
}
.card-nft .title{font-weight:700;font-size:12px;margin-bottom:2px;}
.card-nft .price{color:var(--btc);font-weight:700;font-size:12px;}
.card-nft .row{justify-content:space-between}

/* ==========================
   Bottom Dock + Panels
   ========================== */

.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  display:flex;
  justify-content:center;
  gap:10px;
  padding:6px 14px;
  background:
    linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.98));
  border-top:1px solid rgba(148,163,184,0.6);
  box-shadow:
    0 -8px 30px rgba(0,0,0,0.9),
    0 -2px 16px rgba(0,209,255,0.25);
  backdrop-filter:blur(12px);
}

.dock-btn{
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
  padding:6px 14px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  background:linear-gradient(135deg,rgba(0,209,255,0.14),rgba(255,61,241,0.12));
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:
    transform .06s ease,
    box-shadow .18s,
    border-color .18s,
    background .18s;
}

.dock-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(0,209,255,0.75);
  box-shadow:0 0 18px rgba(0,209,255,0.6);
  background:linear-gradient(135deg,rgba(0,209,255,0.22),rgba(255,61,241,0.18));
}

.dock-overlay{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(15,23,42,0.85),rgba(0,0,0,0.96));
  z-index:39;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.dock-overlay.active{
  opacity:1;
  pointer-events:auto;
}

/* Slide-up panel shell */

.dock-panel{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:72vh;
  max-height:520px;
  z-index:41;
  background:
    radial-gradient(1100px 700px at 15% 0%,rgba(15,23,42,0.96),rgba(2,6,23,0.98));
  border-top:1px solid rgba(148,163,184,0.65);
  box-shadow:
    0 -10px 40px rgba(0,0,0,0.95),
    0 -4px 18px rgba(0,209,255,0.3);
  transform:translateY(100%);
  opacity:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  transition:
    transform .25s cubic-bezier(0.22,0.61,0.36,1),
    opacity .2s ease-out;
}

.dock-panel.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.dock-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px 8px;
  border-bottom:1px solid rgba(148,163,184,0.55);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
}

.dock-close{
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:16px;
  cursor:pointer;
  padding:2px 6px;
  border-radius:999px;
  transition:background .15s ease, color .15s ease;
}

.dock-close:hover{
  background:rgba(15,23,42,0.8);
  color:var(--acc);
}

.dock-panel-body{
  padding:8px 16px 10px;
  overflow-y:auto;
  flex:1;
  font-size:11px;
}

.dock-panel-footer{
  padding:6px 16px 8px;
  font-size:10px;
  color:var(--muted);
  border-top:1px solid rgba(148,163,184,0.4);
  background:rgba(2,6,23,0.96);
}

/* Order flow items */

.order-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  border-bottom:1px dashed rgba(51,65,85,0.9);
}

.order-thumb{
  width:40px;
  height:40px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,0.7);
  background:#020617;
  flex-shrink:0;
}

.order-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.order-main{
  flex:1;
}

.order-title{
  font-size:11px;
  color:var(--text);
}

.order-meta{
  font-size:10px;
  color:var(--muted);
}

.order-meta strong{
  color:var(--acc);
}

.order-tx{
  font-size:9px;
  margin-top:2px;
}

.order-tx a{
  color:var(--acc);
  text-decoration:none;
}

.order-tx a:hover{
  text-decoration:underline;
}
.order-share{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-left:8px;
}

.share-btn{
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
  padding:4px 10px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  background:linear-gradient(135deg,rgba(15,23,42,0.9),rgba(15,23,42,0.95));
  color:var(--muted);
  cursor:pointer;
  transition:
    transform .06s ease,
    box-shadow .18s,
    border-color .18s,
    color .15s ease;
}

.share-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(0,209,255,0.9);
  box-shadow:0 0 14px rgba(0,209,255,0.55);
  color:var(--acc);
}

/* Empty + notes */

.dock-panel-empty{
  padding:14px 0;
  color:var(--muted);
}

.dock-panel-note{
  margin-top:8px;
  font-size:10px;
}

/* Liquidity chart canvas */

#liquidityChart{
  width:100%;
  height:220px;
  border-radius:12px;
  background:radial-gradient(circle at 0 0,#020617,#020617 55%,#000 100%);
  border:1px solid rgba(148,163,184,0.5);
  box-shadow:inset 0 0 22px rgba(15,23,42,0.9);
}

/* Mobile tweaks: shrink dock + panels a bit */

@media (max-width: 768px){
  .dock{
    padding:6px 8px 8px;
    gap:6px;
  }
  .dock-btn{
    padding:5px 10px;
    font-size:9px;
  }
  .dock-panel{
    height:70vh;
  }
}

/* Meme market bar & panel */
.market-bar{
  margin-bottom:6px;
  padding:6px 10px;
  border-radius:12px;
  background:linear-gradient(90deg,rgba(30,64,175,.75),rgba(248,113,113,.32));
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  box-shadow:0 0 18px rgba(15,23,42,.9);
  font-size:11px;
}
.market-bar::before{
  content:'◼';
  font-size:8px;
  color:var(--acc);
  opacity:.7;
}
.meme-panel{
  margin:8px 0 10px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(2,6,23,.96);
  border:1px dashed rgba(148,163,184,.7);
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
  font-size:11px;
}
.meme-label{
  color:var(--acc);
  font-weight:700;
  margin-right:4px;
}
.meme-text{color:var(--muted);}

/* Graffiti layer */
.graffiti-layer{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:2px;
}
.graffiti-layer .tag{
  position:absolute;
  color:var(--graffiti-red);
}
.graffiti-layer .tag-send{
  top:12%;left:6%;
  transform:rotate(-11deg);
}
.graffiti-layer .tag-cope{
  bottom:14%;right:8%;
  transform:rotate(9deg);
}
.graffiti-layer .tag-hodl{
  top:55%;right:6%;
  transform:rotate(-7deg);
}
.graffiti-layer .tag-wagmi{
  bottom:8%;left:10%;
  transform:rotate(5deg);
}
.graffiti-layer .tag-fud{
  top:28%;left:70%;
  transform:rotate(-4deg);
}
.graffiti-layer .tag-sats{
  top:6%;right:16%;
  transform:rotate(7deg);
}
.graffiti-layer .tag-lfg{
  bottom:20%;left:32%;
  transform:rotate(-6deg);
}
.graffiti-layer .tag-bml{
  top:36%;left:18%;
  transform:rotate(4deg);
}
.graffiti-layer .tag-ledger{
  bottom:30%;right:30%;
  transform:rotate(-8deg);
}
.graffiti-layer .tag-nokings{
  top:70%;left:45%;
  transform:rotate(3deg);
}

/* Degen banner */
.degen-banner{
  margin-top:4px;
  color:var(--acc);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.98;
}

/* Disclaimer & footer */
.disclaimer{
  margin:0 20px 24px 20px;
  font-size:11px;
}
.footer{
  padding:0 20px 40px 20px;
  color:var(--muted);
  text-align:center;
  font-size:11px;
}
.footer .manifesto{
  margin-top:6px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.4;
  color:var(--muted);
  opacity:.95;
}
.footer .replay{
  margin-top:8px;
}
.linkish{
  background:none;
  border:none;
  color:var(--acc);
  cursor:pointer;
  padding:0;
  font:inherit;
  text-decoration:none;
  opacity:0.75;
}
.linkish:hover{
  opacity:1;
  text-decoration:underline;
}

/* Wallet HUD side tab + panel */
.wallet-tab{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  z-index:20;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  padding:10px 6px;
  border-radius:14px 0 0 14px;
  border:1px solid rgba(56,189,248,0.9);
  background:linear-gradient(180deg,rgba(15,23,42,0.96),rgba(30,64,175,0.96));
  color:#e5f2ff;
  cursor:pointer;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-size:9px;
  box-shadow:
    0 0 16px rgba(56,189,248,0.8),
    0 0 26px rgba(15,23,42,1);
  text-shadow:0 0 4px rgba(56,189,248,0.9);
}
.wallet-tab:hover{
  box-shadow:
    0 0 24px rgba(56,189,248,1),
    0 0 40px rgba(15,23,42,1);
  border-color:#fae8ff;
}

/* slide-in panel */
.wallet-panel{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:280px;
  z-index:19;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}
.wallet-panel.open{
  pointer-events:auto;
}
.wallet-panel-inner{
  width:100%;
  height:100%;
  padding:14px 14px 16px;
  background:
    radial-gradient(circle at 0% 0%,rgba(56,189,248,0.18),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(244,63,94,0.16),transparent 60%),
    linear-gradient(180deg,rgba(15,23,42,0.98),rgba(2,6,23,0.98));
  border-left:1px solid rgba(148,163,184,0.7);
  box-shadow:
    -8px 0 25px rgba(15,23,42,1),
    0 0 40px rgba(0,0,0,0.9),
    inset 0 0 18px rgba(148,163,184,0.3);
  transform:translateX(100%);
  opacity:0;
  transition:transform .22s ease-out, opacity .22s ease-out;
  overflow-y:auto;
}
.wallet-panel.open .wallet-panel-inner{
  transform:translateX(0);
  opacity:1;
}

.wallet-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:8px;
  color:#e5f2ff;
}
.wallet-close{
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:14px;
  padding:2px 4px;
}
.wallet-close:hover{
  color:var(--acc);
}

.wallet-panel-section{
  margin-top:8px;
}
.wallet-panel-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(148,163,184,0.95);
  margin-bottom:2px;
}
.wallet-panel-value{
  font-size:11px;
}
.wallet-panel-value.pepe{
  color:#22c55e;
}
.wallet-panel-hint{
  font-size:10px;
}

.wallet-panel-nfts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}
.wallet-nft{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:4px;
  border-radius:10px;
  background:rgba(15,23,42,0.95);
  border:1px solid rgba(148,163,184,0.7);
  box-shadow:0 0 10px rgba(15,23,42,0.9);
}
.wallet-nft img{
  width:44px;
  height:44px;
  border-radius:6px;
  border:1px solid rgba(148,163,184,0.9);
  object-fit:cover;
}
.wallet-nft span{
  font-size:9px;
}

.wallet-panel-section.quotes{
  margin-top:10px;
}
.wallet-panel-quote{
  margin-top:3px;
  font-size:10px;
  color:var(--muted);
  padding:6px 8px;
  border-radius:10px;
  border:1px dashed rgba(148,163,184,0.7);
  background:rgba(2,6,23,0.95);
  animation:rgbJitter 2.8s infinite alternate;
}
.wallet-panel-footer{
  margin-top:10px;
  font-size:9px;
}
.wallet-panel-sub{
  display:block;
  margin-top:3px;
  opacity:0.85;
}
.wallet-home-link{
  display:inline-block;
  margin-top:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,0.85);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:9px;
  color:#e5f2ff;
  background:linear-gradient(135deg,rgba(15,23,42,0.96),rgba(30,64,175,0.96));
  box-shadow:0 0 14px rgba(56,189,248,0.8);
}
.wallet-home-link:hover{
  border-color:#fae8ff;
  box-shadow:0 0 22px rgba(56,189,248,1);
}


/* subtle RGB jitter */
@keyframes rgbJitter{
  0%{
    text-shadow:
      1px 0 4px rgba(56,189,248,0.7),
      -1px 0 4px rgba(244,63,94,0.7);
  }
  100%{
    text-shadow:
      1px 0 4px rgba(244,63,94,0.7),
      -1px 0 4px rgba(56,189,248,0.7);
  }
}

/* Responsive */
@media(max-width:1100px){
  .grid{grid-template-columns:1fr}
  .bar{grid-template-columns:1fr}
}

/* === MetaMask Install Badge === */
.metamask-install {
  position: absolute;
  top: 26px;
  right: 20px;
  text-align: right;
  z-index: 5; /* below wallet HUD (19/20) so HUD slides over it */
  font-family: 'Roboto Mono', monospace;
}

/* Desktop: push badge much further left so it never overlaps wallet connect */
@media (min-width: 768px) {
  .metamask-install {
    top: 18px;
    right: 340px;   /* move toward center, well left of wallet connect */
    text-align: left;
  }
}

.mm-install-link {
  display: inline-block;
  padding: 6px 10px;
  font-size: 11px;
  color: #fff;
  background: #f97316; /* orange */
  border-radius: 8px;
  text-decoration: none;
  border: 1px dashed #fff;
  position: relative;
  overflow: hidden;
}

/* animated dotted outline */
.mm-install-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed #fff;
  border-radius: 8px;
  animation: spinDots 2.4s linear infinite;
}

@keyframes spinDots {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mm-install-link:hover {
  background: #fb923c;
}

.mm-tip {
  font-size: 10px;
  margin-top: 4px;
  color: #fcd9bd;
  opacity: 0.9;
  max-width: 200px;
  line-height: 1.3;
}