/* =========================================================
   RESET & BASE
========================================================= */



* {
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .header {
    padding: 18px 14px;
  }
}
html, body {
  width: 100%;
  max-width: 100%;
}



body {
  margin: 0;
  background: #0b0f14;
  color: #e6edf3;
  font-family: "JetBrains Mono", monospace;
  line-height: 1.6;
}

/* =========================================================
   HEADER
========================================================= */
.header {
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 30px 20px;
  border-bottom: 1px solid #1f2937;
  font-weight: 1000;
}


.logo {
  font-size: 88px;
  font-weight: 1000;
}

.tagline {
  color: #9ca3af;
  font-size: 48px;
  font-weight: 1000;  
}
#walletBox {
  width: 100%;
  min-width: 100%;
  display: block;
}




.nf-mining-pill {
  padding: 2px; 
  border-radius: 8px;  
  box-shadow:
    0 0 0 02px rgba(185,130,255,0.45),
    0 0 12px rgba(0,255,138,0.7),
    0 0 20px rgba(0,255,138,0.45),
    inset 0 0 6px rgba(255,255,255,0.08);  
  background: linear-gradient(
    135deg,
    #0b1024,   /* bleu nuit */
    #1a1433,   /* bleu-mauve profond */
    #2a1f44    /* mauve sombre */
  );
  animation: violetNavyGlow 4.5s ease-in-out infinite;    
}








.nf-stats-mini {
  padding: 2px; 
  border-radius: 8px;  
  box-shadow:
    0 0 0 02px rgba(127, 220, 255, 0.75),
    0 0 12px rgba(127, 220, 255, 0.75),
    0 0 20px rgba(127, 220, 255, 0.75),
    inset 0 0 6px rgba(255,255,255,0.08); 
  background: linear-gradient(
    135deg,
    #08131f,
    #0b1c2d,
    #112a44
  );    
  animation: navyGlow 4s ease-in-out infinite;    
}

.btc{
  background: linear-gradient(
    135deg,
    #ffe08a,
    #ffc857,
    #ffb703
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 6px rgba(255, 235, 59, 0.95),
    0 0 14px rgba(255, 223, 0, 0.75),
}

/* =========================================
   NF-CASH GLOBAL HEADER
========================================= */

/* HEADER CONTAINER */
.nf-header {
  width: 100%;
  height: 640px;              /* 👈 hauteur maîtrisée */
  background: #000;           /* fondu noir naturel */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* LIEN CLIQUABLE */
.nf-header-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* IMAGE */
.nf-header-img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}


/* HOVER SUBTIL */
.nf-header-link:hover .nf-header-img {
  filter: brightness(1.05);
}
/* ===========================
   NF HEADER RESPONSIVE
=========================== */

@media (max-width: 1024px) {
  .nf-header {
    height: 420px;
  }
}

@media (max-width: 768px) {
  .nf-header {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .nf-header {
    height: 220px;
  }
}


/* =========================================================
   LAYOUT
========================================================= */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* =========================================================
   BOXES
========================================================= */
.box {
  background: #0f1620;
  border: 1px solid #243041;
  padding: 22px;
  box-shadow:
    0 0 0 02px rgba(185,130,255,0.45),
    0 0 12px rgba(0,255,138,0.7),
    0 0 50px rgba(185,130,255,0.45),
    inset 0 0 6px rgba(255,255,255,0.08);  
}

.box h4 {
  margin-top: 0;
  font-size: 22px;
  color: #A8E6A3;
  
}



.box h3 {
  margin-top: 0;
  font-size: 34px;
}


.box h1 {
  margin-top: 0;
  font-size: 24px;
  padding: 6px; 
  border-radius: 8px;  
  box-shadow:
    0 0 0 02px rgba(127, 220, 255, 0.75),
    0 0 12px rgba(127, 220, 255, 0.75),
    0 0 20px rgba(127, 220, 255, 0.75),
    inset 0 0 6px rgba(255,255,255,0.08); 
  background: linear-gradient(
    135deg,
    #08131f,
    #0b1c2d,
    #112a44
  );    
  animation: navyGlow 4s ease-in-out infinite;    
}

.box h2 {
  font-size: 22px;
  color: #cbd5f5;
  padding: 6px; 
  border-radius: 8px;  
  box-shadow:
    0 0 0 02px rgba(185,130,255,0.45),
    0 0 12px rgba(0,255,138,0.7),
    0 0 20px rgba(0,255,138,0.45),
    inset 0 0 6px rgba(255,255,255,0.08);  
  background: linear-gradient(
    135deg,
    #0b1024,   /* bleu nuit */
    #1a1433,   /* bleu-mauve profond */
    #2a1f44    /* mauve sombre */
  );
  animation: violetNavyGlow 4.5s ease-in-out infinite;    
}



.box h5 {
  margin-top: 0;
  font-size: 23px;
  padding: 6px; 
  border-radius: 8px;  
  box-shadow:
    0 0 0 02px rgba(127, 220, 255, 0.75),
    0 0 12px rgba(127, 220, 255, 0.75),
    0 0 20px rgba(127, 220, 255, 0.75),
    inset 0 0 6px rgba(255,255,255,0.08);    
}






@media (max-width: 768px){

  .box h1{
    font-size: 14px;       /* ↓ taille */
    line-height: 1.2;     /* ↓ hauteur de ligne */
    padding: 3px 6px;      /* ↓ padding vertical */
    margin: 2px 0 6px;     /* ↓ marges */
  }

  .box h2{
    font-size: 14px;
    line-height: 1.2;
    padding: 3px 6px;
    margin: 2px 0 6px;
  }
  
  .box h5{
    font-size: 10px;       /* ↓ taille */
    line-height: 1.2;     /* ↓ hauteur de ligne */
    padding: 3px 6px;      /* ↓ padding vertical */
    margin: 2px 0 6px;     /* ↓ marges */
  }  

}

/* =========================================================
   QUEST VISUAL (IMAGE)
========================================================= */

.quest-visual {
  margin: 24px auto 32px;
  text-align: center;
  position: relative;
}

.quest-image {
  max-width: 100%;
  width: 880px;
  border-radius: 14px;

  /* Effet GPU / blockchain glow */
  box-shadow:
    0 0 30px rgba(120, 180, 255, 0.25),
    0 0 80px rgba(120, 180, 255, 0.15);

  image-rendering: auto;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Effet "scan / focus" */
.quest-image:hover {
  transform: scale(1.015);
  box-shadow:
    0 0 40px rgba(160, 220, 255, 0.35),
    0 0 120px rgba(120, 180, 255, 0.25);
}






.box.quest-detail .highlight {
  margin-top: 10px;
  color: #ffcc33;
  font-weight: 600;
}




/* =========================================================
   QUEST
========================================================= */
.quest .highlight {
  margin-top: 20px;
  color: #ffcc33;
  font-weight: 600;
}

/* =========================================================
   ACTION BUTTONS (SOUS QUEST)
========================================================= */
.actions {
  margin: 30px auto 50px;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* BASE BUTTON */
.btn {
  font-family: "JetBrains Mono", monospace;
  font-size: 24px;
  padding: 12px 18px;
  border-radius: 8px;
  border: 2px solid #333;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(63, 81, 181, 0.65),   /* cœur cristal */
      rgba(28,36,44,0.35) 60%,
      rgba(127, 220, 255, 0.75) 80%,
      rgba(63, 81, 181, 0.65) 100%	  
    ),
    linear-gradient(
      135deg,
      rgba(200,225,245,0.22),
      rgba(200,225,245,0.08)
    );

  color: #eee;
  cursor: pointer;
  transition: all 0.2s ease;

  box-shadow:
    0 0 0 2px rgba(255, 230, 0, 0.45),
    0 0 12px rgba(198,156,255,0.45),
    0 0 20px rgba(198,156,255,0.45),
    inset 0 0 6px rgba(255,255,255,0.08);
}



.btn.swap {
  border: 2px solid #d6c9ff;      /* violet narratif */
  color: #d6c9ff;	
  font-weight: 600;
  min-width: 100%;    
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(63, 81, 181, 0.65),   /* cœur cristal */
      rgba(28,36,44,0.35) 60%,
      rgba(127, 220, 255, 0.75) 80%,
      rgba(63, 81, 181, 0.65) 100%	  
    ),
    linear-gradient(
      135deg,
      rgba(200,225,245,0.22),
      rgba(200,225,245,0.08)
    );

  color: #eee;
  cursor: pointer;
  transition: all 0.2s ease;

  box-shadow:
    0 0 0 2px rgba(255, 230, 0, 0.45),
    0 0 12px rgba(198,156,255,0.45),
    0 0 20px rgba(198,156,255,0.45),
    inset 0 0 6px rgba(255,255,255,0.08);
}




.btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 225, 0, 0.18),
    rgba(255, 225, 0, 0.06)
  ); 
  transform: translateY(-3px);
}

/* BUTTON VARIANTS */
.btn.primary {
  border-color: var(--nf-yellow);
  color: var(--nf-yellow);
  font-weight: 600;
}

.btn.primary:hover {
  box-shadow: 0 0 16px var(--nf-glow-yellow);
  background: linear-gradient(
    135deg,
    rgba(255, 225, 0, 0.18),
    rgba(255, 225, 0, 0.06)
  ); 
}
.btn.Mining {
  border: 2px solid #F5F7FA;
  color: #F5F7FA;
  font-weight: 600;
  min-width: 100%; 
}

.btn.Create {
  border: 2px solid #FFF7CC;
  color: #FFF7CC;
  font-weight: 600;
  min-width: 100%;  
}






.btn.lore {
  border: 2px solid #9b5cff;      /* violet narratif */
  color: #d8c7ff;
  font-weight: 600;
  min-width: 100%;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(215, 185, 255, 0.70),   /* cœur mauve pâle glow */
      rgba(70, 60, 90, 0.35) 60%,  /* transition douce */
      rgba(200, 160, 255, 0.75) 80%,/* halo améthyste */
      rgba(215, 185, 255, 0.65) 100%
    ),
    linear-gradient(
      135deg,
      rgba(215, 185, 255, 0.22),
      rgba(200, 160, 255, 0.08)
    );
}


.btn.fame {
  border: 2px solid #FFFF00;      /* violet narratif */
  color: #FFFF00;
  font-weight: 600;
  min-width: 100%;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255, 245, 190, 0.80),
      rgba(110, 100, 60, 0.30) 60%,
      rgba(255, 230, 150, 0.70) 80%,
      rgba(255, 245, 190, 0.65) 100%
    ),
    linear-gradient(
      135deg,
      rgba(255, 240, 180, 0.24),
      rgba(255, 225, 150, 0.10)
    );
}

.btn.fame:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 225, 0, 0.18),
    rgba(255, 225, 0, 0.06)
  ); 
  transform: translateY(-3px);
}


.btn.lore:hover {
  box-shadow: 0 0 18px rgba(155, 92, 255, 0.45);
  background: linear-gradient(
    135deg,
    rgba(155, 92, 255, 0.22),
    rgba(80, 40, 140, 0.12)
  );
  transform: translateY(-3px);
}

.wallet-address-row {
  word-break: break-all; /* adresse complète sans overflow */
}

.wallet-address.copyable {
  cursor: pointer;
}

.wallet-address.copyable:hover {
  color: #7cff7c;
  text-shadow: 0 0 6px rgba(124, 255, 124, 0.6);
}

.wallet-address.copied {
  color: #00ff9c;
}


.disconnect-wallet {
  background: transparent;
  border: 1px solid #ff6b6b;
  color: #ff6b6b;
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
}

.disconnect-wallet:hover {
  border-color: #ff2e2e;
  color: #ff2e2e;
}


.send-box .wallet-input.large {
  font-size: 1.1rem;
  padding: 14px;
}

.btn.send {
  border: 2px solid #F2AFC5;
  color: #F2AFC5;
  font-weight: 600;
  min-width: 100%;
}


.btn.swap {
  border-color: #d6c9ff;
  color: #d6c9ff;
  font-weight: 600;
  min-width: 100%;  
}



.btn.claim {
  border-color: #00ffaa;
  color: #00ffaa;
  font-weight: 600;
  min-width: 100%;  
}

.btn.quest {
  border-color: #c084fc;
  color: #c084fc;
  font-weight: 600;
  min-width: 100%;  
}

.btn.explorer {
  border-color: #4cc9f0;
  color: #4cc9f0;
  font-weight: 600;
  min-width: 100%;  
}

.btn.secondary {
  border-color: #666;
  color: #ccc;
  opacity: 0.85;
  font-weight: 600;  
}

.btn.secondary:hover {
  opacity: 1;
}

/* DISABLED (POUR PHASES PLUS TARD) */
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}





/* =========================================================
   NODE
========================================================= */
.node-status {
  margin: 14px 0;
  font-weight: 600;
  
}

.node-status.online {
  color: #22c55e;
}

.terminal{
  background: #020617;
  padding: 16px 20px;
  border: 2px solid #1e293b;
  margin: 4px 0;

  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  line-height: 1.55;

  color: #e5f0ff; /* blanc / bleu givre */

  box-shadow:
    0 0 0 2px rgba(185,130,255,0.45),
    0 0 12px rgba(0,255,138,0.7),
    0 0 50px rgba(185,130,255,0.45),
    inset 0 0 6px rgba(255,255,255,0.08);

  overflow-x: auto;
}

/* 🔢 NOMBRES — TURQUOISE */
.terminal .num{
  color: #7dd3fc;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(56,249,215,0.45);
}

/* 🧊 MOTS / LABELS — BLEU GIVRE */
.terminal .label{
  color: #cfe8ff;
  letter-spacing: 0.3px;
}

/* 📱 MOBILE — fixe les 2 specs (une ligne + gauche + plus bas) */
@media (max-width: 768px){
  .terminal{
    font-size: 9px;
    margin: 1px 0;
    line-height: 0.75;
    padding: 1px 6px;
    margin: 1px 0;
    
    text-align: left;      /* fix à gauche */
  }

  /* Réduit l’espace entre chaque ligne */
  .terminal > div{
    margin: 0;
    padding: 0;
  }

  /* Supprime l’effet “ligne vide” du <br> */
  .terminal br{
    display: none;
  }

  /* Les 2 premières lignes (specs) : 1 ligne, compacte */
  .terminal .spec-line{
    display: block;
    white-space: nowrap;   /* empêche de casser la ligne */
    line-height: 0.35;     /* réduit la hauteur des caractères */
    font-size: 9px;       /* encore un peu plus petit */
    letter-spacing: -0.2px;/* compacte légèrement */
  }

  .terminal .num{
    font-weight: 500;
    text-shadow: 0 0 3px rgba(125,211,252,0.35); /* bleu givre */
  }
}

/* =========================================================
   PHASES
========================================================= */
.box.phases hr {
  border: none;
  border-top: 1px solid #333;
  margin: 20px 0;
}

.box.phases .highlight {
  color: #ffcc33;
  font-weight: 600;
}

/* =========================================================
   RULES
========================================================= */
.rules ul {
  list-style: none;
  padding-left: 0;
}

.rules li::before {
  content: "\2022 ";
  padding: 6px 6px;  
  color: #60a5fa;
}



.ruless ul {
  list-style: none;
  padding-left: 0;
}

.ruless li::before {
  content: "\2022 ";
  padding: 6px 6px;  
  color: #60a5fa;
}




@media (max-width: 768px){

  .ruless li{
    font-size: 0.9rem;     /* ↓ taille texte */
    line-height: 1.25;      /* ↓ hauteur ligne */
  }

  .ruless li::before{
    font-size: 0.9rem;     /* bullet aligné */
  }

}





/* =========================================================
   RESPONSIVE
========================================================= */
@media (min-width: 900px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }

  .quest {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .btn {
    min-width: 100%;
  }
}

/* =========================================================
   ✅ Explorer NAV exception (mobile)
   Prevent global .btn { min-width:100% } from breaking Prev/Next
========================================================= */
@media (max-width: 720px){
  .explorer-page .ex-nav .btn.explorer-btn{
    min-width:0 !important;
    width:auto !important;
  }
}
/* QUEST COLLAPSIBLE */
.quest-collapsible .quest-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.btn.read-more {
  border-color: var(--nf-lemon, #eaff00);
  color: var(--nf-lemon, #eaff00);
  font-size: 20px;
  background: transparent;
  opacity: 0.9;
}

.btn.read-more:hover {
  opacity: 1;
}

/* QUAND OUVERT → PLUS VISIBLE */
.quest-collapsible.open .btn.read-more {
  color: var(--nf-yellow, #ffe100);
  border-color: var(--nf-yellow, #ffe100);
  box-shadow: 0 0 10px rgba(255, 225, 0, 0.25);
}


/* COLLAPSE LOGIC */
.quest-full {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.4s ease;
  opacity: 0;
}

.quest-collapsible.open .quest-full {
  max-height: 2000px; /* suffisamment grand */
  opacity: 1;
}

.quest-collapsible.open .quest-preview {
  display: none;
}



.audio-btn {
  border-color: var(--nf-lime, #9aff00);
  color: var(--nf-lime, #9aff00);
}

.audio-btn:hover {
  box-shadow: 0 0 12px rgba(154, 255, 0, 0.3);
}




/* =========================================================
   EMOJI QUEST CLAIM
========================================================= */

/* Full width sections */
.full-width,
.emoji-grid {
  grid-column: 1 / -1;
}

/* =========================================================
   SEQUENCE DISPLAY
========================================================= */

.sequence-display {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 24px 0;
}

.sequence-display .slot {
  width: 72px;
  height: 72px;
  line-height: 72px;
  justify-content: center;

  font-size: 40px;
  font-weight: 600;
  text-align: center;

  border-radius: 10px;
  border: 1px solid #2a2f3a;

  background: linear-gradient(180deg, #141826, #0c0f1a);

  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);

  opacity: 0.85;
  transition: all 0.15s ease;
}

.sequence-display .slot.active {
  border-color: #00ffd5;
  box-shadow:
    0 0 10px rgba(0, 255, 213, 0.5),
    inset 0 0 6px rgba(0, 255, 213, 0.3);
  opacity: 1;
}

/* =========================================================
   SEQUENCE ACTIONS
========================================================= */

.sequence-actions {
  display: flex;	
  margin-top: 16px;
  justify-content: center;
  align-items: center;
  gap: 14px; 
}

.btn.reset {
  background: transparent;
  min-width: 200px;
  border: 1px dashed #ff5f87;
  color: #ff5f87;
}

.btn.reset:hover {
  background: #ff5f87;
  color: #000;
}

/* =========================================================
   EMOJI GRID
========================================================= */

.emoji-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 20px;
  margin-top: 20px;

  font-size: 40px;
  user-select: none;
}

/* =========================================================
   EMOJI STYLE
========================================================= */

.emoji {
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s;
  filter: brightness(1.25);
}

.emoji:hover {
  transform: scale(1.3);
  filter: brightness(1.6) drop-shadow(0 0 10px rgba(0, 255, 213, 0.6));
}

.emoji.used {
  opacity: 0.25;
  filter: grayscale(100%);
  pointer-events: none;
}

/* =========================================================
   CLAIM BOX VISUAL BOOST
========================================================= */

.quest-claim {
  padding: 32px 36px;
}

.quest-claim h1 {
  font-size: 26px;
}

.quest-claim h2 {
  font-size: 20px;
}


/* Bouton retour accueil */
.wallet-box-header {
  background: transparent;
  border: 2px solid #333;
  color: #6FE7DB;
  font-size: 20px;
  padding: 16px 20px;
  margin-bottom:0; /* 👈 espace entre le bouton et le titre */
}

/* Bouton retour accueil */
.back-home {
  background: transparent;
  border: 2px solid #333;
  color: #aaa;
  font-size: 18px;
  padding: 16px 20px;
  margin-bottom:0; /* 👈 espace entre le bouton et le titre */
}

.back-home:hover {
  border-radius:14px;
  color: #00ffd5;
  border-color: #00ffd5;
  box-shadow: 0 0 6px rgba(0,255,213,0.4);
}



/* daily hold claim */



body {
  font-family: "JetBrains Mono", monospace;
  background: #0b0e14;
  color: #e6e6e6;
}

.full-width {
  grid-column: 1 / -1;
}

.hold-claim h1 {
  font-size: 26px;
}

.hold-metrics {
  display: flex;
  justify-content: space-around;
  margin: 24px 0;
  gap: 24px;
}

.metric {
  text-align: center;
}

.metric .label {
  font-size: 13px;
  opacity: 0.6;
}

.metric .value {
  font-size: 22px;
  margin-top: 6px;
}

.soft-green {
  color: #7dffb3;
}

.claim-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}

.btn.hold {
  padding: 14px 26px;
  font-size: 15px;
}

.btn.reset {
  padding: 10px 16px;
  font-size: 13px;
}

.hold-rules ul {
  margin-top: 12px;
  line-height: 1.6;
}


/* ===============================
   Explorer Search Input
================================ */

.explorer-input {
  width: 100%;
  max-width: 640px;          /* largeur confortable */
  padding: 18px 16px;
  margin: 12px 0 18px;

  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;

  background: #e6e8ec;       /* gris pâle */
  color: #111;

  border: 1px solid #b8bcc4;
  border-radius: 6px;

  outline: none;
  transition: all 0.2s ease;
}

/* Focus cyber clean */
.explorer-input:focus {
  background: #eef0f4;
  border-color: #6aa9ff;
  box-shadow: 0 0 0 2px rgba(106, 169, 255, 0.25);
}

/* Placeholder plus doux */
.explorer-input::placeholder {
  color: #6b7280;
}
.explorer-page .btn.explorer {
  margin-top: 6px;
}

/* ===============================
   MINING ACTIONS
================================ */

.mining-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.btn.mining.start {
  background: #00ffd5;
  color: #000;
}

.btn.mining.stop {
  background: transparent;
  border: 1px solid #ff5f87;
  color: #ff5f87;
}

.btn.mining.stop:hover {
  background: #ff5f87;
  color: #000;
}


/* ===============================
   WALLET INPUT
================================ */
.btn.wallet.connect {
  background: transparent;
  border: 2px solid #FFD966;        /* jaune clair */
  color: #FFD966;
}

.btn.wallet.connect:hover {
  background: #FFD966;
  color: #000;
  box-shadow: 0 0 12px rgba(255, 217, 102, 0.6);
}
.btn.wallet.metamask {
  background: transparent;
  border: 2px solid #FF9F43;        /* orange clair */
  color: #FF9F43;
}

.btn.wallet.metamask:hover {
  background: #FF9F43;
  color: #000;
  box-shadow: 0 0 12px rgba(255, 159, 67, 0.6);
}

.wallet-input {
  width: 100%;
  margin-top: 12px;
  margin-bottom:0;

  padding: 16px 18px;
  font-size: 19px;

  font-family: "JetBrains Mono", monospace;

  background: #e6e8ec;           /* 👈 gris pâle */
  color: #000;

  border: 2px solid #b9beca;
  border-radius: 10px;

  outline: none;
}

.wallet-input::placeholder {
  color: #6b7280;
}

.wallet-input:focus {
  border-color: #00E5D8;
  box-shadow: 0 0 0 2px rgba(0,229,216,0.25);
}

/* ===============================
   WALLET ACTION BUTTONS
================================ */

.wallet-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Create wallet button */
.btn.wallet.create {
  background: transparent;
  border: 1px dashed #00E5D8;
  color: #00E5D8;
}

.btn.wallet.create:hover {
  background: #00E5D8;
  color: #000;
}




.btn.wallet.generate {
  background: #00ffd5;
  color: #000;
}

.wallet-output {
  margin-top: 24px;
}


#walletAddress {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;     /* 👈 coupe l’adresse si besoin */
  overflow-wrap: anywhere;  /* 👈 mobile-friendly */
}

@media (max-width: 768px) {
  #walletAddress {
    font-size: 15px;
  }

  .wallet-box-header {
    font-size: 16px;	
  }
}


@media (max-width: 480px) {
  #walletAddress {
    font-size: 12px;     /* 👈 réduit fortement */
    line-height: 1.4;
  }

  .wallet-box-header {
    font-size: 14px;
    padding: 12px 14px;
  }
}



/* Wallet output animation */
.wallet-output {
  transition: all 0.35s ease;
  overflow: hidden;
}

.wallet-output.collapsed {
  max-height: 320px;
}

.wallet-output.expanded {
  max-height: 420px;
}

/* Highlight generated address */
.wallet-output .address {
  color: #00ffd5;
  font-weight: 600;
}

/* Hidden helper */
.hidden {
  display: none;
}


/* =========================================================
   RESPONSIVE GRID
========================================================= */

@media (min-width: 900px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }

  .quest {
    grid-column: span 2;
  }
}

/* =========================================================
   🔒 MOBILE OVERFLOW PROTECTION (AJOUT UNIQUE)
========================================================= */

@media (max-width: 768px) {

  html, body {
    overflow-x: hidden;
  }

  .container,
  .box,
  .actions,
  .quest-visual,
  .sequence-display,
  .emoji-list,
  .hold-metrics,
  .wallet-actions,
  .claim-actions,
  .mining-actions {
    max-width: 100%;
    overflow-x: hidden;
  }

  .quest-image,
  img,
  video,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
  }

  .terminal {
    white-space: pre-wrap;
    word-break: break-word;
  }
}
@media (max-width: 768px){

  html{
    font-size: 55%; /* ≈ 14px au lieu de 16px */
  }

}


/* =========================================================
   COOKIE BANNER
========================================================= */
.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 980px);
  background: #020617;
  border: 2px solid #1e293b;
  border-radius: 12px;
  padding: 14px 18px;
  z-index: 99999; /* TRÈS IMPORTANT */
}

.cookie-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cookie-text {
  color: #93c5fd;
  font-size: 14px;
}

.cookie-banner.hidden {
  display: none;
}


.cookie-actions {
  display: flex;
  gap: 10px;
}

.btn.cookie-accept {
  border: 2px solid #22c55e;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.btn.cookie-accept:hover {
  background: rgba(34, 197, 94, 0.25);
}


/* Decline */
.btn.cookie-decline {
  padding: 4px 12px;   /* ⬅ 2x moins haut */
  font-size: 14px;     /* optionnel : un peu plus discret */	
  border: 2px solid #64748b;
  color: #cbd5f5;
  background: transparent;
  opacity: 0.85;
}

.btn.cookie-decline:hover {
  opacity: 1;
  border-color: #94a3b8;
  color: #fff;
}

/* =========================================================
   FOOTER
========================================================= */
.footer {
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 24px 16px;
  font-size: 18px;
  color: #6b7280;
  border-top: 1px solid #1f2937;
}
@media (max-width: 480px) {
  .footer {
    font-size: 15px;
    padding: 18px 12px;
  }
}

/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-link {
  color: #6FE7DB;              /* turquoise doux */
  text-decoration: none;
  font-weight: 600;
  opacity: 0.9;
  transition: all 0.2s ease;
}

.footer-link:hover {
  color: #00ffd5;
  text-shadow: 0 0 6px rgba(0,255,213,0.5);
}

.footer-sep {
  color: #4b5563;
}



.nf-terminal{ white-space: pre; }

/* =========================
   CARD + LAYOUT (2 colonnes / empilé mobile)
========================= */
.nf-card{
  background:#0b0f14;
  border:1px solid #1f2937;
  padding:16px;
  max-width:1050px;
  margin:auto;
  font-family:"JetBrains Mono", monospace;
  color:#e6edf3;
}

.nf-title{
  text-align:center;
  font-weight:900;
  letter-spacing:1px;
  margin-bottom:0;
}

.nf-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

.nf-box{
  border:1px solid #1f2937;
  padding:12px;
  box-shadow:
    0 0 0 2px rgba(185,130,255,0.45),
    0 0 12px rgba(0,255,138,0.7),
    0 0 50px rgba(185,130,255,0.45),
    inset 0 0 6px rgba(255,255,255,0.08);  
}



/* =========================
   STATS
========================= */
.nf-live-stats{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:15px;
}

.nf-live-stats .k{
  opacity:0.7;
  margin-right:6px;
}

/* =========================
   HINT BOX
========================= */
.nf-hint-box{
  border:2px solid #1f2937;
  padding:10px 12px;
  min-width:260px;
  text-align:center;
}

.nf-hint-title{
  font-weight:900;
  margin-bottom:0;
  opacity:0.8;
}

.nf-hint-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

#nf-hint-img{
  width:220px;
  height:auto;
}

#nf-hint-count{
  font-size:36px;
  font-weight:900;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){
  .nf-layout{
    grid-template-columns: 1fr; /* empilé */
  }

  /* image principale pleine largeur */


  /* hint box aussi full si tu veux */
  .nf-hint-box{
    min-width:0;
  }

  #nf-hint-img{
    width:100%;
    max-width:250px; /* optionnel: évite trop gros */
  }
}

.nf-sealed-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:0;
}

.nf-sealed{
  font-weight:800;
  opacity:0;
  transform: translateY(4px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.nf-sealed.is-on{
  opacity:1;
  transform: translateY(0);
}

.nf-mute{
  border:1px solid #1f2937;
  background:#0b0f14;
  color:#e6edf3;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-family:"JetBrains Mono", monospace;
  font-size:13px;
}
.nf-mute[aria-pressed="false"]{
  border-color:#2b3647;
}


.nf-sealed{ opacity:0; transform:translateY(4px); transition:opacity 700ms ease, transform 700ms ease; font-weight:800; }
.nf-sealed.is-on{ opacity:1; transform:translateY(0); }


/* HINT fade */
.nf-hint-wrap{ position:relative; }
#nf-hint-img{ width:100%; height:auto; display:block; transition:opacity 900ms ease; }
#nf-hint-count{ transition:opacity 900ms ease; }

.nf-hint-dim{
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  transition:opacity 900ms ease;
  pointer-events:none;
}

.nf-hint-wrap.is-idle #nf-hint-img{ opacity:0.15; }
.nf-hint-wrap.is-idle .nf-hint-dim{ opacity:0.65; }
.nf-hint-wrap.is-idle #nf-hint-count{ opacity:0.35; }



/* Layout texte + image */
.hold-layout {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 100%; 
}

/* Texte */
.hold-text {
  flex: 1;
}

/* Image */
.hold-image img {
  max-width: 100%;   /* 👈 limite demandée */
  width: 100%;
  height: auto;
  border-radius: 10px;
  opacity: 0.95;
  align-items:center;  
}

/* Mobile */
@media (max-width: 768px) {
  .hold-layout {
    flex-direction: column;
    text-align: center;
  }

  .hold-image img {
    max-width: 100%;
  }
}
.spaced-list li {
  margin-bottom:0;
}



.mining-reward-footer--stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.mining-reward-footer--stack .lore-seal{
  margin:0;
}

/* === Avatar overlay sizing === */
.sender-avatar,
.recipient-avatar{
  width:110px;
  height:110px;
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  pointer-events:none;
}

/* === Gas price highlight === */
.gas-price-box{
  border:2px solid #2aa9ff;
  box-shadow:0 0 12px rgba(42,169,255,0.6);
}



/* =========================================================
   ⏱ Block Time (mm:ss) — warnings at 3:45 / 4:15
   (Inserted under Block Number in Start Mining stats)
========================================================= */
.nf-block-time{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  margin-bottom:0;
  font-weight:800;
}
.nf-block-time .label{ opacity:.82; color:#cfe8ff; }
.nf-block-time .num{
  font-weight:1000;
  letter-spacing:.6px;
  color:#7dd3fc;
  text-shadow: 0 0 10px rgba(56,249,215,.35);
}
.nf-block-time .approx{
  opacity:.72;
  font-weight:900;
  color:#cbd5f5;
}

/* ⚠️ Yellow warning flash */
@keyframes nfFlashYellow{
  0%{ filter:brightness(1); }
  50%{ filter:brightness(1.55); }
  100%{ filter:brightness(1); }
}
.nf-timer-yellow{
  color:#ffe75a !important;
  text-shadow: 0 0 18px rgba(255,231,90,.55) !important;
  animation: nfFlashYellow 1.05s ease-in-out infinite;
}

/* 🚨 Red critical flash */
@keyframes nfFlashRed{
  0%{ filter:brightness(1); }
  50%{ filter:brightness(1.75); }
  100%{ filter:brightness(1); }
}
.nf-timer-red{
  color:#ff4d4d !important;
  text-shadow: 0 0 20px rgba(255,77,77,.75) !important;
  animation: nfFlashRed .75s ease-in-out infinite;
}

@media (max-width: 768px){
  .nf-block-time{ font-size: 12px; margin-top:3px; margin-bottom:0; }
  .nf-block-time .approx{ font-size: 12px; }
}



/* =========================================================
   🌐 GLOBAL + 💻 YOUR SYSTEM — RETRO HUD (Oldschool gameplay)
   - Two distinct boxes (same line)
   - Pills on the same line
   - Turquoise clear backlight on both boxes
========================================================= */
.nf-gs-row{
  width:100%;
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:stretch;
}
@media (max-width: 900px){
  .nf-gs-row{ grid-template-columns: 1fr; }
}

.nf-gs-box{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  padding:12px;
  border:2px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  /* Turquoise clear backlight */
  box-shadow:
    0 0 0 2px rgba(0,229,216,.18),
    0 0 22px rgba(0,229,216,.14),
    inset 0 0 18px rgba(0,0,0,.48);
}

/* distinct retro glows */
.nf-gs-global{
  border-color: rgba(74,163,255,.26);
  box-shadow:
    0 0 0 2px rgba(198,156,255,0.35),
    0 0 12px rgba(0,255,138,0.7),
    0 0 50px rgba(198, 156, 255, 0.25),
    inset 0 0 6px rgba(255,255,255,0.08);
}
.nf-gs-system{
  border-color: rgba(185,130,255,.20);
  box-shadow:
    0 0 0 2px rgba(185,130,255,0.45),
    0 0 12px rgba(0,255,138,0.7),
    0 0 50px rgba(185,130,255,0.45),
    inset 0 0 6px rgba(255,255,255,0.08);
}

/* scanlines */
.nf-gs-box::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  opacity:.78;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 2px,
      rgba(0,0,0,.00) 2px,
      rgba(0,0,0,.00) 6px
    );
  mix-blend-mode: overlay;
  animation: nfHudScan 3.6s linear infinite;
}
@keyframes nfHudScan{ 0%{ transform: translateY(0px);} 100%{ transform: translateY(18px);} }

/* soft auras */
.nf-gs-global::after,
.nf-gs-system::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.72;
}
.nf-gs-global::after{
  background:
    radial-gradient(520px 220px at 18% 22%, rgba(74,163,255,.18), transparent 60%),
    radial-gradient(520px 220px at 82% 78%, rgba(255,231,90,.12), transparent 62%);
}
.nf-gs-system::after{
  background:
    radial-gradient(520px 220px at 18% 22%, rgba(185,130,255,.16), transparent 60%),
    radial-gradient(520px 220px at 82% 78%, rgba(34,197,94,.10), transparent 62%);
}
.nf-gs-box > *{ position:relative; z-index:1; }

.nf-gs-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:0;
}
.nf-gs-title{ font-weight:1000; letter-spacing:.3px; opacity:.96; font-size:14px; }
.nf-gs-sub{ font-weight:900; opacity:.70; font-size:12px; }

.nf-gs-pills{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 520px){
  .nf-gs-pills{ grid-template-columns: 1fr; }
}
.nf-gs-pill{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 10px;
  background: rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  box-shadow: inset 0 0 14px rgba(0,0,0,.35);
}
.nf-gs-pill.full{ grid-column: 1 / -1; }

.nf-gs-lab{
  font-size:12px;
  font-weight:900;
  opacity:.78;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nf-gs-val{
  font-size:13px;
  font-weight:1000;
  color: rgba(245,250,255,.96); /* glacier white */
  text-shadow: 0 0 10px rgba(125,211,252,.35), 0 0 18px rgba(125,211,252,.18);
  white-space:nowrap;
}

/* Reduce width of Number of Devices pill */
.nf-gs-dev{
  max-width: 280px;
  justify-self:start;
}

/* Bigger Effective HashPower value */
.nf-gs-val-big{
  font-size:18px;
  letter-spacing:.2px;
}

/* >0 => turquoise */
.nf-gs-val.on-turq{
  color: rgba(0,229,216,.98);
  text-shadow:
    0 0 10px rgba(0,229,216,.45),
    0 0 22px rgba(0,229,216,.25),
    0 0 40px rgba(255,255,255,.14);
}

/* Prompt pill */
.nf-gs-prompt{
  cursor:pointer;
  border-color: rgba(255,255,255,.12);
}
.nf-gs-prompt:hover{
  filter: brightness(1.12);
}

/* Blinks */
@keyframes nfBlinkGreen{
  0%{ box-shadow: inset 0 0 14px rgba(0,0,0,.35), 0 0 12px rgba(34,197,94,.20); border-color: rgba(34,197,94,.28); }
  50%{ box-shadow: inset 0 0 18px rgba(0,0,0,.35), 0 0 28px rgba(34,197,94,.55); border-color: rgba(34,197,94,.65); }
  100%{ box-shadow: inset 0 0 14px rgba(0,0,0,.35), 0 0 12px rgba(34,197,94,.20); border-color: rgba(34,197,94,.28); }
}
@keyframes nfBlinkOrange{
  0%{ box-shadow: inset 0 0 14px rgba(0,0,0,.35), 0 0 12px rgba(255,159,47,.18); border-color: rgba(255,159,47,.30); }
  50%{ box-shadow: inset 0 0 18px rgba(0,0,0,.35), 0 0 28px rgba(255,159,47,.58); border-color: rgba(255,159,47,.75); }
  100%{ box-shadow: inset 0 0 14px rgba(0,0,0,.35), 0 0 12px rgba(255,159,47,.18); border-color: rgba(255,159,47,.30); }
}
.nf-gs-prompt.blink-green{ animation: nfBlinkGreen 1.05s ease-in-out infinite; }
.nf-gs-prompt.blink-orange{ animation: nfBlinkOrange 1.05s ease-in-out infinite; }

/* Mining OFF: reduce intensity only for Your System box (slight) */
.nf-startmining:not(.running) .nf-gs-system{
  opacity:.86;
  filter: saturate(.92) brightness(.98);
}



/* =========================================================
   HUD: Device ID input (inline in Your System header)
========================================================= */
.nf-gs-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.nf-gs-head-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.nf-gs-idlab{
  font-size:12px;
  font-weight:950;
  opacity:.80;
  white-space:nowrap;
}
.nf-gs-idinp{
  width: 150px;
  max-width: 42vw;
  border-radius:10px;
  border:1px solid rgba(0,229,216,.28);
  background: rgba(0,0,0,.30);
  color: rgba(245,250,255,.96);
  font: 900 12px/1.2 "JetBrains Mono", monospace;
  padding:8px 10px;
  outline:none;
  box-shadow:
    0 0 10px rgba(0,229,216,.10),
    inset 0 0 12px rgba(0,0,0,.35);
}
.nf-gs-idinp:focus{
  border-color: rgba(0,229,216,.55);
  box-shadow:
    0 0 16px rgba(0,229,216,.22),
    0 0 28px rgba(125,211,252,.14),
    inset 0 0 12px rgba(0,0,0,.35);
}

/* =========================================================
   DEVICES FEED (Full width)
========================================================= */
.nf-device-feed-wrap{
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(0,229,216,.24);
  background: rgba(0,0,0,.20);
  padding:12px;
  box-shadow:
    0 0 0 2px rgba(0,229,216,.10),
    0 0 22px rgba(0,229,216,.12),
    inset 0 0 18px rgba(0,0,0,.46);
  position:relative;
  overflow:hidden;
}
.nf-device-feed-wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.75;
  background:
    radial-gradient(720px 240px at 20% 20%, rgba(0,229,216,.10), transparent 60%),
    radial-gradient(720px 240px at 85% 80%, rgba(74,163,255,.10), transparent 62%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 2px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: overlay;
  animation: nfHudScan2 3.6s linear infinite;
}
@keyframes nfHudScan2{ 0%{ transform: translateY(0px);} 100%{ transform: translateY(18px);} }
.nf-device-feed-wrap > *{ position:relative; z-index:1; }

.nf-device-feed-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:0;
}
.nf-device-feed-title{
  font-weight:1000;
  letter-spacing:.3px;
  opacity:.96;
}
.nf-device-feed-sub{
  font-weight:900;
  font-size:12px;
  opacity:.70;
}

.nf-device-feed{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nf-device-row{
  display:grid;
  grid-template-columns: minmax(160px, 1.35fr) 0.8fr minmax(140px, 1fr) 34px;
  gap:10px;
  align-items:center;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(0,229,216,.20);
  background: rgba(0,0,0,.22);
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.38),
    0 0 14px rgba(0,229,216,.06);
}
@media (max-width: 700px){
  .nf-device-row{
    grid-template-columns: 1fr;
    gap:8px;
  }
}

.nf-device-id{
  font-weight:1000;
  font-size:13px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nf-device-status{
  justify-self:center;
  font-weight:1000;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  text-align:center;
}
.nf-device-status.ok{
  color: rgba(134,239,172,.98);
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 0 16px rgba(34,197,94,.12);
}
.nf-device-status.bad{
  color: rgba(255,210,160,.98);
  border-color: rgba(255,159,47,.38);
  box-shadow: 0 0 16px rgba(255,159,47,.12);
}

.nf-device-hash{
  justify-self:end;
  font-weight:1000;
  font-size:13px;
  color: rgba(0,229,216,.98);
  text-shadow: 0 0 10px rgba(0,229,216,.30), 0 0 18px rgba(125,211,252,.16);
  white-space:nowrap;
}

.nf-device-del{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.70);
  font-weight:1000;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .08s ease, filter .12s ease, border-color .12s ease;
}
.nf-device-del:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.30);
  filter: brightness(1.10);
}
.nf-device-del:active{ transform: translateY(0px) scale(.98); }
.nf-device-del-spacer{ border-color: transparent; background: transparent; cursor: default; }
@media (max-width: 700px){
  .nf-device-del{ margin-left:auto; }
}

.nf-device-hash.zero{
  color: rgba(255,77,77,.92);
  text-shadow: 0 0 12px rgba(255,77,77,.22);
}

/* ▶ play icon */
.nf-play{
  font-weight:1000;
  color: rgba(0,229,216,.95);
  margin-right:6px;
}

/* Blink ONLY text (green) */
@keyframes nfBlinkTextGreen{
  0%{ color: rgba(134,239,172,.65); text-shadow:none; }
  50%{ color: rgba(134,239,172,.98); text-shadow:0 0 14px rgba(34,197,94,.65); }
  100%{ color: rgba(134,239,172,.65); text-shadow:none; }
}
.nf-gs-prompt.blink-green .nf-gs-lab{
  animation: nfBlinkTextGreen 1.05s ease-in-out infinite;
}

/* Disable frame blink for green state */
.nf-gs-prompt.blink-green{
  animation: none !important;
  box-shadow: inset 0 0 14px rgba(0,0,0,.35);
}

/* Slightly smaller Total Effective numbers */
.nf-gs-val-big{
  font-size:16px; /* was 18px */
}

/* Device feed: status as colored text only (no badge/frame) */
.nf-device-status{
  justify-self:center;
  font-weight:1000;
  font-size:12px;
  padding:0 !important;
  border:none !important;
  background: transparent !important;
  box-shadow:none !important;
}
.nf-device-status.ok{
  color: rgba(134,239,172,.98) !important;
  border:none !important;
  box-shadow:none !important;
}
.nf-device-status.bad{
  color: rgba(255,210,160,.98) !important;
  border:none !important;
  box-shadow:none !important;
}

/* CPU info line inside the prompt pill */
.nf-cpuinfo{
  margin-left:10px;
  font-size:11px;
  font-weight:950;
  opacity:.82;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: rgba(245,250,255,.92);
  text-shadow: 0 0 10px rgba(125,211,252,.22);
}

/* Devices feed: add CPU column */
.nf-device-row{
  grid-template-columns: minmax(150px, 1.25fr) 0.7fr minmax(220px, 1.15fr) minmax(140px, 1fr);
}
@media (max-width: 900px){
  .nf-device-row{
    grid-template-columns: 1fr;
  }
}
.nf-device-cpu{
  font-weight:950;
  font-size:12px;
  opacity:.82;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Flash helper for RPC URL input when auto-start is attempted without RPC */
.nf-flash-rpc{
  animation: nfFlashRpc 1.1s ease-in-out 2;
  border-color: rgba(255,159,47,.75) !important;
  box-shadow: 0 0 18px rgba(255,159,47,.22), 0 0 28px rgba(255,225,0,.12) !important;
}
@keyframes nfFlashRpc{
  0%{ filter: brightness(1.0); }
  50%{ filter: brightness(1.35); }
  100%{ filter: brightness(1.0); }
}

/* Annual Emission Decay tiny note */
.nf-decay-note{
  font-size:10px;
  font-weight:1000;
  opacity:.70;
  margin-left:6px;
  letter-spacing:.2px;
}

/* Global pills: allow hashpower + gauge on same line (desktop) */
@media (min-width: 901px){
  .nf-gs-global .nf-gs-pills{
    grid-template-columns: 1fr 1fr 140px;
  }
  .nf-gs-hashpill{ grid-column: 1 / 3; }
  .nf-gs-gaugepill{ grid-column: 3 / 4; }
}
.nf-gs-gaugepill{
  padding:10px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Net gauge */
.nf-netgauge{
  position:relative;
  width:100%;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(0,229,216,.26);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 14px rgba(0,229,216,.10);
}
.nf-netgauge-bar{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(0,229,216,.55),
    rgba(245,250,255,.45),
    rgba(74,163,255,.55),
    rgba(0,229,216,.55)
  );
  background-size: 220% 100%;
  opacity:.55;
  animation: nfGaugeShimmer 1.35s linear infinite;
}
@keyframes nfGaugeShimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}
.nf-netgauge-glow{
  position:absolute;
  inset:-20px;
  pointer-events:none;
  opacity:.0;
  transition: opacity .25s ease;
}

/* States driven by avgBlockTime */
.nf-netgauge[data-state="green"]{
  border-color: rgba(34,197,94,.55);
  box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 18px rgba(34,197,94,.18);
}
.nf-netgauge[data-state="green"] .nf-netgauge-bar{ opacity:.70; }
.nf-netgauge[data-state="yellow"]{
  border-color: rgba(255,225,0,.55);
  box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 18px rgba(255,225,0,.18);
}
.nf-netgauge[data-state="yellow"] .nf-netgauge-bar{ opacity:.68; }
.nf-netgauge[data-state="red"]{
  border-color: rgba(255,77,77,.60);
  box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 20px rgba(255,77,77,.18);
}
.nf-netgauge[data-state="red"] .nf-netgauge-bar{ opacity:.72; }
.nf-netgauge[data-state="red2"]{
  border-color: rgba(255,77,77,.78);
  box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 26px rgba(255,77,77,.26);
}
.nf-netgauge[data-state="red2"] .nf-netgauge-bar{ opacity:.78; }
.nf-netgauge[data-state="redmauve"]{
  border-color: rgba(185,130,255,.70);
  box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 26px rgba(185,130,255,.22), 0 0 18px rgba(255,77,77,.14);
}
.nf-netgauge[data-state="redmauve"] .nf-netgauge-bar{ opacity:.80; }

/* Reduce Network HashPower pill width */
/* =========================================================
   ✅ FIX TRUNCATION — 🌐 Global pills (desktop)
   Put this at the VERY END of style130.css (override)
========================================================= */
@media (min-width: 901px){

  /* 2 columns: left grows, right is fixed for Time Gauge */
  .nf-gs-global .nf-gs-pills{
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 260px !important;
  }

  /* Ensure items are allowed to shrink WITHOUT clipping text incorrectly */
  .nf-gs-global .nf-gs-pill{
    min-width: 0;
    width: 100%;
  }

  /* Row 2: HashPower left, Gauge right */
  .nf-gs-global .nf-gs-hashpill{
    grid-column: 1 / 2 !important;
  }
  .nf-gs-global .nf-gs-gaugepill{
    grid-column: 2 / 3 !important;
    min-width: 200px !important;
    justify-content: center;
  }

  /* The gauge bar must also be allowed to fit the column */
  .nf-gs-global .nf-netgauge{
    min-width: 0;
  }
}


/* =========================================================
   ❄️ Frost-blue flash hint (above 🌐 Global)
   - triggered by JS adding .nf-frost-flash
========================================================= */
.nf-scale-hint{
  display:none;
  width:100%;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(127,220,255,.26);
  background:
    radial-gradient(520px 220px at 18% 18%, rgba(127,220,255,.14), transparent 62%),
    radial-gradient(520px 220px at 82% 24%, rgba(167,139,250,.10), transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.12));
  color: rgba(245,250,255,.96);
  font-weight: 950;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .15px;
  text-align:center;
  text-shadow: 0 0 10px rgba(127,220,255,.22);
  box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 16px rgba(127,220,255,.10);
}
.nf-scale-hint.nf-show{ display:block; }

@keyframes nfFrostFlash{
  0%{
    filter: brightness(1.0) saturate(1.05);
    border-color: rgba(127,220,255,.28);
    box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 14px rgba(127,220,255,.10);
  }
  45%{
    filter: brightness(1.40) saturate(1.35);
    border-color: rgba(127,220,255,.92);
    box-shadow:
      inset 0 0 12px rgba(0,0,0,.38),
      0 0 20px rgba(127,220,255,.42),
      0 0 46px rgba(127,220,255,.26),
      0 0 26px rgba(255,255,255,.16);
  }
  100%{
    filter: brightness(1.0) saturate(1.05);
    border-color: rgba(127,220,255,.28);
    box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 14px rgba(127,220,255,.10);
  }
}
.nf-scale-hint.nf-frost-flash{
  animation: nfFrostFlash .22s ease-in-out 4;
}


/* ================================
   MOBILE — Very slight button text reduction
   ================================ */
@media (max-width: 768px){
  button,
  .btn,
  .nf-btn,
  .action-btn{
    font-size: 2.2em; /* ≈ -3.5% */
  }
}

@media (max-width: 768px){
  .btn{
    box-shadow:
      0 0 0 2px rgba(190,205,215,0.45),
      0 0 12px rgba(170,195,215,0.35),
      0 0 22px rgba(170,195,215,0.30),
      inset 0 1px 12px rgba(255,255,255,0.28),
      inset 0 -1px 8px rgba(120,150,170,0.14);
  }
}

/* =========================================================
   P2P SWAP BOARD
========================================================= */

.btn.swap{
  border-color:#FFB86B; /* soft BTC orange */
  color:#FFB86B;
  font-weight:600;
}
.btn.swap:hover{
  box-shadow:0 0 16px rgba(255,184,107,0.25);
  background: linear-gradient(135deg, rgba(255,184,107,0.18), rgba(255,184,107,0.06));
}

.p2p-user{
  display:flex;
  gap:16px;
  align-items:center;
  padding:14px 12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background: rgba(0,0,0,0.18);
}

.p2p-avatar{
  width:110px;
  height:110px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 0 18px rgba(0,255,213,0.10);
  object-fit:cover;
}

.p2p-user-label{
  opacity:0.75;
  font-size:14px;
  margin-bottom:6px;
}
.p2p-wallet{
  font-size:18px;
  color:#cbd5f5;
  word-break:break-all;
}
.p2p-wallet.connected{
  color:#00ffd5;
}

.p2p-user-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.p2p-board{
  margin-top:14px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  overflow:hidden;
}

.p2p-row{
  display:grid;
  grid-template-columns: 120px 160px 170px 1fr 120px;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,0.06);
  align-items:center;
}
.p2p-head{
  border-top:none;
  font-weight:600;
  color:#93c5fd;
  background: rgba(2,6,23,0.85);
}
.p2p-row a.nf-link{ color:#93c5fd; text-decoration:none; }
.p2p-row a.nf-link:hover{ text-decoration:underline; }

.rank-1{ background: linear-gradient(90deg, rgba(255, 225, 0, 0.18), rgba(0,0,0,0.00)); }
.rank-2{ background: linear-gradient(90deg, rgba(255, 184, 107, 0.16), rgba(0,0,0,0.00)); }
.rank-3{ background: linear-gradient(90deg, rgba(192, 132, 252, 0.16), rgba(0,0,0,0.00)); }
.rank-4{ background: linear-gradient(90deg, rgba(76, 201, 240, 0.14), rgba(0,0,0,0.00)); }

.p2p-links{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:18px;
}

.p2p-bullets{ list-style:none; padding-left:0; }
.p2p-bullets li{ margin: 10px 0; }
.p2p-bullets li::before{ content:"• "; color:#60a5fa; }

.nf-link{
  color:#93c5fd;
  text-decoration:none;
}
.nf-link:hover{ text-decoration:underline; }

.p2p-hero{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:center;
}
.p2p-hero-img{
  width:100%;
  max-width:320px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 0 40px rgba(0,0,0,0.45);
}

@media (max-width: 900px){
  .p2p-row{ grid-template-columns: 1fr; }
  .p2p-hero{ grid-template-columns: 1fr; }
}


/* Glow vert ultra clair pour 💲 */
.glow-emoji-dollar{
  display:inline-block;
  vertical-align:middle;
  filter:
    drop-shadow(0 0 1px rgba(190,255,200,.95))
    drop-shadow(0 0 8px rgba(60,255,120,.65));
}

@media (max-width: 768px){
  .glow-emoji-dollar{
    filter:
      drop-shadow(0 0 3px rgba(200,255,210,.98))
      drop-shadow(0 0 5px rgba(120,255,160,.90))
      drop-shadow(0 0 16px rgba(0,255,90,.55));
  }
}

.nf-brand .dollar{
  display:inline-block;
  transform: translateX(-0.35em);
  vertical-align: 0.00em; /* remonte l’emoji */
}
@media (max-width:768px){
  .nf-brand .dollar{
    transform: translateX(-0.15em);
    vertical-align: 0.00em; /* mobile */
  }
}



/* Glow Gold / Bitcoin ₿ */
.glow-emoji-btc{
  color: #ffd966; /* or clair */
  filter:
    drop-shadow(0 0 2px rgba(255,230,140,.95))
    drop-shadow(0 0 14px rgba(255,140,40,.65));
}

/* Mobile : glow un peu plus présent */
@media (max-width: 768px){
  .glow-emoji-btc{
    filter:
      drop-shadow(0 0 3px rgba(30,30,30,.95))
      drop-shadow(0 0 6px rgba(255,190,90,.90))
      drop-shadow(0 0 10px rgba(255,255,255,1.00))
      drop-shadow(0 0 28px rgba(255,255,255,1.00));	  
  }
}




/* Glow vert très clair (mobile-friendly) */
.glow-connect{
  color: #b9ffbf; /* vert très clair */
  text-shadow:
    0 0 2px rgba(185,255,191,.95),
    0 0 6px rgba(120,255,150,.85),
    0 0 14px rgba(255,255,255,0.95),
    0 0 24px rgba(255,255,255,0.95);
}

/* Mobile: un peu plus “punchy” */
@media (max-width: 768px){
  .glow-connect{
    filter:
      drop-shadow(0 0 3px rgba(30,30,30,.95))
      drop-shadow(0 0 6px rgba(255,190,90,.90))
      drop-shadow(0 0 10px rgba(255,255,255,1.00))
      drop-shadow(0 0 28px rgba(255,255,255,1.00));	  
  }
}



/* Glow vert très clair (mobile-friendly) */
.glow-blue{
  color: #b9ffbf; /* vert très clair */
  text-shadow:
    0 0 2px rgba(40,120,200,0.60),
    0 0 6px rgba(40,120,200,0.60),
    0 0 14px rgba(50,255,120,.65),
    0 0 24px rgba(255,255,255,0.95);
}

/* Mobile: un peu plus “punchy” */
@media (max-width: 768px){
  .glow-blue{
    filter:
      drop-shadow(0 0 3px rgba(40,120,200,0.60))
      drop-shadow(0 0 6px rgba(40,120,200,0.60))
      drop-shadow(0 0 10px rgba(255,255,255,1.00))
      drop-shadow(0 0 28px rgba(255,255,255,1.00));	  
  }
}




.glow-gold{
  color: #b9ffbf; /* vert très clair */
  text-shadow:
    0 0 2px rgba(255,225,120,0.90),
    0 0 6px rgba(255,225,120,0.90),
    0 0 14px rgba(255,150,40,.55),
    0 0 24px rgba(0,255,90,.40);
}

/* Mobile: un peu plus “punchy” */
@media (max-width: 768px){
  .glow-gold{
    filter:
      drop-shadow(0 0 3px rgba(30,30,30,.95))
      drop-shadow(0 0 6px rgba(255,190,90,.90))
      drop-shadow(0 0 10px rgba(255,255,255,1.00))
      drop-shadow(0 0 28px rgba(255,255,255,1.00));	  
  }
}


/* Glow vert très clair (mobile-friendly) */
.glow-green{
  color: #b9ffbf; /* vert très clair */
  text-shadow:
    drop-shadow(0 0 1px rgba(190,255,200,.95))
    drop-shadow(0 0 8px rgba(60,255,120,.65));
}

/* Mobile: un peu plus “punchy” */
@media (max-width: 768px){
  .glow-green{
    filter:
      drop-shadow(0 0 3px rgba(200,255,210,.98))
      drop-shadow(0 0 6px rgba(200,255,210,.98))
      drop-shadow(0 0 10px rgba(255,255,255,1.00))
      drop-shadow(0 0 28px rgba(255,255,255,1.00));	  
  }
}

/* Hover: bordure + glow mauve pâle (bien visible) */
.btn.swap:hover{
  border-color: #c9b6ff  !important;
  color: #ffffff  !important;

  box-shadow:
    0 0 0 2px rgba(185,130,255,0.65),   /* ring mauve pâle */
    0 0 28px rgba(155,92,255,0.45),    /* glow lavande */
    0 0 54px rgba(198,156,255,0.35),    /* halo externe doux */
    inset 0 0 8px rgba(255,255,255,0.12) !important;

  background: linear-gradient(
    135deg,
    rgba(246,242,255,0.22),             /* mauve blanc */
    rgba(214,201,255,0.10)              /* lavande ultra soft */
  ) !important;

  transform: translateY(-3px);
}


@media (max-width: 768px) {
  .btn.disconnect-wallet {
    width: auto;
    min-width: unset;
    padding: 2px 3px;
    font-size: 9px;
  }
}




/* =========================================================
   NF — Graph worker selector + worker close button
========================================================= */
.nf-worker-box{
  margin-top:8px;
  border:1px solid #1f2937;
  border-radius:12px;
  padding:10px 10px;
  background: rgba(5,7,10,.85);
  box-shadow: 0 0 18px rgba(0,0,0,.30);
}
.nf-worker-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 6px;
  border-radius:10px;
  user-select:none;
  font: 12px/1.2 "JetBrains Mono", monospace;
  opacity:.92;
}
.nf-worker-item input{ width:14px; height:14px; }
.nf-worker-item:hover{
  background: rgba(255,255,255,.04);
}

.nf-device-del.nf-device-kill{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.nf-device-del.nf-device-kill:hover{
  filter: brightness(1.08);
}



/* =========================================================
   NF$ — Balance loading UX + Confirmed state
   - Pending Balance loading x4 longer (perceptible)
   - Wallet Balance value never greyed out
   - When confirmed, show CONFIRMED
========================================================= */

/* Generic "loading" shimmer/pulse (slow) */
@keyframes nfBalancePulse {
  0%   { opacity: 0.25; filter: saturate(1.0); }
  45%  { opacity: 1.0;  filter: saturate(1.25); }
  100% { opacity: 0.25; filter: saturate(1.0); }
}

/* Apply this class ONLY to Pending Balance value while loading */
.nf-pending-loading{
  animation: nfBalancePulse 1.4s ease-in-out infinite; /* ~x4 vs 0.35s */
}

/* Extra gap between loading pulses (avoid "flash") */
.nf-pending-loading.nf-pulse-gap{
  animation-duration: 1.6s;
}

/* Wallet Balance must stay readable (never grey) */
.nf-wallet-balance{
  color:#00ffd5 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* CONFIRMED label/value */
.nf-confirmed{
  color:#7dffb3 !important;
  font-weight:700;
  letter-spacing:0.4px;
  text-shadow: 0 0 10px rgba(125,255,179,0.25);
}

/* =========================================================
   Mobile — put balance lines UNDER address (avoid compress)
   Works if you wrap them in .nf-balance-lines under the address.
========================================================= */
@media (max-width: 768px){
  .nf-connect-box .nf-address-row{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .nf-connect-box .nf-balance-lines{
    width: 100%;
    margin-top: 6px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* =========================================================
   Time Gauge thresholds
   - yellow at 150s
   - orange at 240s
   - red at 300s
========================================================= */
.tg-yellow{ color:#ffd966 !important; text-shadow:0 0 8px rgba(255,217,102,0.28); }
.tg-orange{ color:#ff9f43 !important; text-shadow:0 0 10px rgba(255,159,67,0.28); }
.tg-red{ color:#ff5f87 !important; text-shadow:0 0 14px rgba(255,95,135,0.40); font-weight:700; }