/* ═══════════════════════════════════════════════════════
   KISUKE URAHARA BOT — style.css centralisé
   Thème : Soul Society · Gotei 13 · Shikai/Bankai
   Police : Shippori Mincho (titres) + DM Sans (corps)
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=Noto+Serif+JP:wght@300;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  /* Gris ardoise Soul Society — moins sombre */
  --void:    #0e1014;
  --deep:    #13161b;
  --panel:   #181c22;
  --surface: #1d2128;
  --rim:     #252a32;
  --border:  rgba(255,255,255,.09);

  /* Or Shinigami */
  --gold:      #d4a843;
  --gold-lt:   #f0c96a;
  --gold-pale: rgba(212,168,67,.12);
  --gold-glow: rgba(212,168,67,.28);
  --gold-line: rgba(212,168,67,.18);

  /* Bleu Bleach (remplace violet) */
  --rei:       #1460b8;
  --rei-mid:   #1e7fe8;
  --rei-lt:    #5eb0ff;
  --rei-pale:  rgba(30,127,232,.10);
  --rei-glow:  rgba(30,127,232,.32);

  /* Rouge-orangé Bleach */
  --red:       #c43318;
  --red-lt:    #e8541a;
  --red-pale:  rgba(232,84,26,.10);
  --red-glow:  rgba(232,84,26,.28);
  --red-line:  rgba(232,84,26,.20);

  /* Textes — plus lisibles */
  --white:  #f0ece6;
  --text:   #cdc9c2;
  --muted:  #8e8a84;
  --dim:    #484440;

  /* Feedback */
  --ok-bg: #071410; --ok-bd: #15803d; --ok-tx: #4ade80;
  --ko-bg: #130606; --ko-bd: #991b1b; --ko-tx: #f87171;
  --yw-bg: #130d03; --yw-bd: #92400e; --yw-tx: #fbbf24;

  /* Survie */
  --surv-bg: #0b1020; --surv-bd: rgba(94,176,255,.35); --surv-tx: #d9eeff;
}

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* ── ATMOSPHERE ──────────────────────────────────────── */
.atmo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%,  rgba(30,127,232,.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 100% 55%,  rgba(232,84,26,.07)  0%, transparent 55%),
    radial-gradient(ellipse 35% 35% at   0% 70%,  rgba(30,127,232,.06) 0%, transparent 55%);
}

/* ── BARRE DE PROGRESSION COULEUR ───────────────────── */
.top-bar {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 600;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--rei-mid) 15%,
    var(--gold) 38%,
    var(--red-lt) 55%,
    var(--gold) 75%,
    var(--rei-mid) 92%,
    transparent 100%);
  opacity: .8;
}

/* ── NAVIGATION ──────────────────────────────────────── */
nav {
  position: fixed; top: 2px; width: 100%; z-index: 400;
  padding: 0 3rem;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(14,16,20,.94);
  border-bottom: 1px solid var(--gold-line);
  backdrop-filter: blur(14px);
}

.nav-logo {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800; font-size: 1.05rem;
  color: var(--gold); text-decoration: none;
  letter-spacing: .12em;
  display: flex; align-items: center; gap: .5rem;
  transition: color .2s;
}
.nav-logo:hover { color: var(--gold-lt); }
.nav-logo span { font-size: .75em; opacity: .55; }

.nav-links { display: flex; gap: .2rem; list-style: none; }
.nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem; font-weight: 500;
  color: var(--muted);
  text-decoration: none; letter-spacing: .04em;
  padding: .4rem .85rem;
  border-radius: 2px;
  transition: color .2s, background .2s;
  position: relative;
}
.nav-links a:hover   { color: var(--white); background: rgba(255,255,255,.05); }
.nav-links a.active  {
  color: var(--gold-lt);
  background: var(--gold-pale);
}
.nav-links a.active::after {
  content: '';
  position: absolute; bottom: -1px; left: .85rem; right: .85rem;
  height: 1px; background: var(--gold);
}

/* ── HAMBURGER ───────────────────────────────────────── */
.ham {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px; z-index: 500;
}
.ham span { display:block; width:22px; height:1.5px; background:var(--gold); border-radius:2px; transition:all .3s; }
.ham.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── DRAWER MOBILE ───────────────────────────────────── */
.drawer {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  background: rgba(14,16,20,.98);
  border-bottom: 1px solid var(--gold-line);
  backdrop-filter: blur(20px);
  padding: 4.5rem 1.5rem 2rem;
  display: flex; flex-direction: column;
  transform: translateY(-110%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.drawer.open { transform: translateY(0); }
.drawer a {
  font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 500;
  color: var(--muted); text-decoration: none;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s; display: block;
}
.drawer a:hover, .drawer a.active { color: var(--gold-lt); }

/* ── PAGE HEADER (commun) ────────────────────────────── */
.phdr {
  position: relative; z-index: 1;
  padding: 100px 3rem 0;
  text-align: center;
}
.pkana {
  font-family: 'Noto Serif JP', serif;
  font-size: .7rem; color: var(--rei-lt);
  letter-spacing: .6em; margin-bottom: .8rem;
  opacity: 0; animation: rise .6s .1s forwards;
}
.pttl {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5.5vw, 4.8rem);
  line-height: .9; letter-spacing: -.01em;
  opacity: 0; animation: rise .6s .25s forwards;
}
.pttl .t1 { display: block; color: var(--white); }
.pttl .t2 {
  display: block;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-lt) 55%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-size: .45em; font-family: 'DM Sans', sans-serif; font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase; margin-top: .5em;
}
.psub {
  font-size: clamp(.9rem, 2vw, 1.05rem);
  color: var(--text); margin-top: .9rem; line-height: 1.75;
  opacity: 0; animation: rise .6s .4s forwards;
  max-width: 560px; margin-left: auto; margin-right: auto;
}

/* ── ORBES ───────────────────────────────────────────── */
.orbs { display:flex; justify-content:center; gap:8px; margin:1.4rem 0 0; opacity:0; animation:rise .6s .55s forwards; }
.orb  { width:6px; height:6px; border-radius:50%; background:var(--rei-mid); box-shadow:0 0 8px var(--rei-glow); animation:pulse 2.8s ease-in-out infinite; }
.orb:nth-child(2) { animation-delay:.4s; background:var(--gold); box-shadow:0 0 8px var(--gold-glow); }
.orb:nth-child(3) { animation-delay:.8s; background:var(--red-lt); box-shadow:0 0 8px var(--red-glow); }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.5;} 50%{transform:scale(1.7);opacity:1;} }

/* ── DIVIDER ─────────────────────────────────────────── */
.divider {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 3rem; margin: 2rem 0 1rem;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--red-pale), var(--gold-line), transparent);
}
.div-sym { color: var(--gold); font-size: 1rem; opacity: .5; font-family: 'Shippori Mincho', serif; }

/* ── LABEL DE SECTION ────────────────────────────────── */
.sec-lbl {
  font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 500;
  letter-spacing: .4em; color: var(--gold);
  text-transform: uppercase; margin-bottom: 1.8rem;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.sec-lbl::before, .sec-lbl::after {
  content: ''; width: 40px; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}
.sec-lbl::after { transform: scaleX(-1); }

/* ── BOUTONS ─────────────────────────────────────────── */
.btn {
  font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .78rem 2rem; text-decoration: none;
  transition: all .25s; display: inline-block;
  border: 1px solid;
}
.btn-gold {
  background: var(--gold); color: var(--void); border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-lt); border-color: var(--gold-lt);
  box-shadow: 0 0 28px var(--gold-glow); transform: translateY(-2px);
}
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--white); border-color: rgba(255,255,255,.20); transform: translateY(-2px); }

/* ── FOOTER ──────────────────────────────────────────── */
footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--gold-line);
  padding: 2rem 3rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.foot-copy { font-size: .75rem; color: var(--muted); }
.foot-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; }
.foot-links a {
  font-size: .72rem; font-weight: 500; letter-spacing: .05em;
  color: var(--muted); text-decoration: none; text-transform: uppercase;
  transition: color .25s;
}
.foot-links a:hover { color: var(--gold); }

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--rei-pale); border-radius: 4px; }

/* ── KEYFRAMES ───────────────────────────────────────── */
@keyframes rise { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }

/* ── RESPONSIVE GLOBALS ──────────────────────────────── */
@media (max-width: 700px) {
  nav            { padding: 0 1.2rem; }
  .nav-links     { display: none; }
  .ham           { display: flex; }
  .phdr          { padding: 88px 1.2rem 0; }
  .divider       { padding: 0 1.2rem; }
  footer         { padding: 1.6rem 1.2rem; flex-direction: column; align-items: flex-start; }
  .foot-links    { gap: .9rem; }
}
@media (min-width: 701px) and (max-width: 1024px) {
  nav { padding: 0 1.8rem; }
}


/* ═══════════════════════════════════════════════════════
   PAGE : HOME (index.html)
   ═══════════════════════════════════════════════════════ */

.hero {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 7rem 3rem 5rem;
}
.hero-inner {
  max-width: 860px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.eyebrow {
  font-size: .72rem; font-weight: 500;
  color: var(--rei-lt); letter-spacing: .5em; text-transform: uppercase;
  margin-bottom: 2.5rem; opacity: 0; animation: rise .7s .1s forwards;
}
.hero-top {
  display: flex; align-items: center; justify-content: center; gap: 2.5rem;
  flex-wrap: wrap; margin-bottom: 2rem;
  opacity: 0; animation: rise .7s .3s forwards;
}
.avatar {
  width: 110px; height: 110px; border-radius: 50%;
  border: 2px solid var(--gold); object-fit: cover; object-position: top center;
  box-shadow: 0 0 0 4px var(--gold-pale), 0 0 40px var(--gold-glow), 0 0 80px var(--rei-pale);
  flex-shrink: 0; transition: box-shadow .45s;
}
.avatar:hover {
  box-shadow: 0 0 0 5px rgba(212,168,67,.2), 0 0 60px var(--gold-glow), 0 0 120px var(--rei-glow);
}
.hero-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800; font-size: clamp(2.8rem, 8.5vw, 7.5rem);
  line-height: .88; letter-spacing: -.01em; text-align: left;
}
.hero-title .l1 { display: block; color: var(--white); }
.hero-title .l2 {
  display: block;
  background: linear-gradient(120deg, var(--red-lt) 0%, var(--gold) 50%, var(--gold-lt) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-size: .55em; letter-spacing: .08em; margin-top: .18em;
}
.hero-desc {
  font-size: clamp(.95rem, 2vw, 1.1rem); color: var(--text);
  max-width: 520px; margin: 0 auto 2.8rem; line-height: 1.8;
  opacity: 0; animation: rise .7s .55s forwards;
}
.hero-cta {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  opacity: 0; animation: rise .7s .75s forwards;
}

/* Feature grid */
.features-sec {
  position: relative; z-index: 1;
  padding: 3rem 3rem 7rem; max-width: 1080px; margin: 0 auto;
  opacity: 0; animation: rise .7s .5s forwards;
}
.feat-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--gold-line); border: 1px solid var(--gold-line);
  overflow: hidden;
}
.fcard {
  background: var(--panel); padding: 2rem 1.6rem;
  text-decoration: none; color: inherit; display: block;
  position: relative; overflow: hidden; transition: background .25s;
}
.fcard::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--rei-mid), var(--red-lt));
  transform: scaleX(0); transition: transform .35s;
}
.fcard:hover                { background: var(--rei-pale); }
.fcard:hover::after         { transform: scaleX(1); }
.fcard-icon  { font-size: 1.4rem; margin-bottom: .9rem; display: block; }
.fcard-name  {
  font-family: 'Shippori Mincho', serif; font-weight: 700;
  font-size: .82rem; letter-spacing: .06em; color: var(--gold-lt);
  margin-bottom: .55rem;
}
.fcard-desc  { font-size: .88rem; color: var(--text); line-height: 1.6; }

@media (max-width: 700px) {
  .hero          { padding: 6.5rem 1.2rem 4rem; }
  .hero-top      { gap: 1.4rem; }
  .hero-title    { text-align: center; font-size: clamp(2.6rem, 14vw, 4.5rem); }
  .avatar        { width: 85px; height: 85px; }
  .features-sec  { padding: 2.5rem 1.2rem 5rem; }
  .feat-grid     { grid-template-columns: 1fr; }
}
@media (min-width: 701px) and (max-width: 1024px) {
  .feat-grid { grid-template-columns: repeat(2,1fr); }
}


/* ═══════════════════════════════════════════════════════
   PAGE : COMMANDS (commandes.html)
   ═══════════════════════════════════════════════════════ */

.content {
  position: relative; z-index: 1;
  max-width: 1020px; margin: 0 auto;
  padding: 0 3rem 6rem;
  opacity: 0; animation: rise .7s .3s forwards;
}

/* Search */
.search-wrap { position: relative; max-width: 460px; margin: 0 auto 2.5rem; }
.search-icon { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--gold); font-size:.85rem; pointer-events:none; }
.search-inp  {
  width:100%; background:var(--panel); border:1px solid var(--border);
  color:var(--white); font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:400;
  padding:.8rem 1rem .8rem 2.5rem; outline:none; transition:border-color .2s;
}
.search-inp:focus { border-color: var(--gold-line); }
.search-inp::placeholder { color: var(--dim); }

/* Category */
.cat { margin-bottom: 2px; }
.cat-hdr {
  display: flex; align-items: center; gap: .9rem; padding: .78rem 1.2rem;
  background: var(--panel); border: 1px solid var(--border);
  cursor: pointer; user-select: none; transition: background .2s;
}
.cat-hdr:hover { background: var(--surface); }
.cat-icon  { font-size: 1.15rem; flex-shrink: 0; }
.cat-name  {
  font-family: 'Shippori Mincho', serif; font-weight: 700;
  font-size: .8rem; letter-spacing: .08em; color: var(--gold-lt);
  text-transform: uppercase; flex: 1;
}
.cat-count { font-size: .7rem; color: var(--muted); }
.cat-arrow { color: var(--gold); font-size: .7rem; transition: transform .25s; }
.cat-hdr.open .cat-arrow { transform: rotate(90deg); }

.cmd-list { display:none; flex-direction:column; border:1px solid var(--border); border-top:none; }
.cmd-list.open { display:flex; }

.cmd {
  display: grid; grid-template-columns: 200px 1fr;
  background: var(--deep); padding: .85rem 1.2rem; gap: .9rem; align-items: start;
  transition: background .15s; border-bottom: 1px solid var(--border);
}
.cmd:last-child { border-bottom: none; }
.cmd:hover      { background: var(--panel); }
.cmd-name  { font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 600; color: var(--rei-lt); }
.cmd-desc  { font-size: .85rem; color: var(--text); line-height: 1.55; }
.cmd-admin .cmd-name { color: var(--gold-lt); }
.cmd-admin { border-left: 2px solid rgba(212,168,67,.3); }
.cmd-usage {
  grid-column: 1 / -1; font-size: .72rem; color: var(--text);
  background: var(--rei-pale); border: 1px solid rgba(30,127,232,.15);
  padding: .3rem .75rem; margin-top: .3rem;
}

@media (max-width: 700px) {
  .content  { padding: 0 1rem 4rem; }
  .cmd      { grid-template-columns: 1fr; gap: .3rem; }
  .cmd-usage{ grid-column: 1; }
}
@media (min-width: 701px) and (max-width: 1024px) {
  .content { padding: 0 1.8rem 5rem; }
  .cmd     { grid-template-columns: 160px 1fr; }
}


/* ═══════════════════════════════════════════════════════
   PAGE : REIATSU (reiatsu.html)
   ═══════════════════════════════════════════════════════ */

.cls-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--gold-line); border: 1px solid var(--gold-line);
  margin-bottom: 3rem; overflow: hidden;
}
.cls {
  background: var(--panel); padding: 1.8rem 1.4rem; text-align: center;
  position: relative; overflow: hidden; transition: background .25s;
}
.cls::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--rei-mid), var(--red-lt));
  transform: scaleX(0); transition: transform .35s;
}
.cls:hover { background: var(--rei-pale); }
.cls:hover::after { transform: scaleX(1); }
.cls-rank  { font-size: 1.7rem; margin-bottom: .6rem; }
.cls-name  {
  font-family: 'Shippori Mincho', serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .06em; color: var(--gold-lt);
  margin-bottom: .3rem;
}
.cls-range {
  font-size: .68rem; font-weight: 500;
  color: var(--rei-lt); margin-bottom: .5rem; letter-spacing: .06em;
}
.cls-desc { font-size: .85rem; color: var(--text); line-height: 1.6; }

.mechs {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 1px; background: var(--gold-line); border: 1px solid var(--gold-line);
  overflow: hidden;
}
.mech { background: var(--panel); padding: 1.6rem 1.4rem; transition: background .25s; }
.mech:hover { background: var(--surface); }
.mech-icon { font-size: 1.35rem; margin-bottom: .7rem; display: block; }
.mech-name {
  font-family: 'Shippori Mincho', serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .06em; color: var(--gold-lt); margin-bottom: .5rem;
}
.mech-desc { font-size: .86rem; color: var(--text); line-height: 1.6; }
.mech-desc code {
  font-size: .72rem; color: var(--rei-lt);
  background: var(--rei-pale); padding: 1px 5px;
}

@media (max-width: 700px) {
  .cls-grid { grid-template-columns: repeat(2,1fr); }
  .mechs    { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════
   PAGE : INSTALLATION (install.html)
   ═══════════════════════════════════════════════════════ */

.steps { display: flex; flex-direction: column; gap: 2px; }
.step {
  display: grid; grid-template-columns: 52px 1fr;
  background: var(--panel); border: 1px solid var(--border);
  padding: 1.8rem 1.6rem; gap: 1.4rem; align-items: start;
  position: relative; overflow: hidden; transition: background .25s;
}
.step::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--rei-mid), var(--red-lt));
  transform: scaleY(0); transition: transform .35s;
}
.step:hover { background: var(--surface); }
.step:hover::before { transform: scaleY(1); }
.step-num {
  font-family: 'Shippori Mincho', serif;
  font-size: 1.8rem; font-weight: 800; color: var(--rei-mid);
  line-height: 1; padding-top: .1rem; text-shadow: 0 0 18px var(--rei-glow);
}
.step-title {
  font-family: 'Shippori Mincho', serif; font-weight: 700;
  font-size: .82rem; letter-spacing: .08em; color: var(--gold-lt);
  margin-bottom: .5rem; text-transform: uppercase;
}
.step-desc { font-size: .9rem; color: var(--text); line-height: 1.7; margin-bottom: .7rem; }
.step-desc:last-child { margin-bottom: 0; }
.code-block {
  background: var(--void); border: 1px solid rgba(30,127,232,.20);
  padding: .75rem 1.1rem; font-family: 'Courier New', monospace;
  font-size: .78rem; color: var(--rei-lt); overflow-x: auto; margin-top: .5rem;
}
.code-block::before { content: '$ '; color: var(--red-lt); opacity: .7; }

.env-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  margin-top: .7rem; overflow: hidden;
}
.env-row { background: var(--deep); padding: .65rem .9rem; display: flex; gap: .7rem; align-items: baseline; }
.env-key { font-size: .7rem; font-weight: 600; color: var(--rei-lt); flex-shrink: 0; }
.env-val { font-size: .82rem; color: var(--text); }
.req-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.req-tag {
  background: var(--rei-pale); border: 1px solid rgba(30,127,232,.25);
  color: var(--rei-lt); font-size: .68rem; font-weight: 600;
  padding: .25rem .6rem; text-transform: uppercase; letter-spacing: .06em;
}

@media (max-width: 700px) {
  .step      { grid-template-columns: 38px 1fr; padding: 1.3rem 1rem; gap: 1rem; }
  .step-num  { font-size: 1.4rem; }
  .env-grid  { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════
   PAGE : GUESSER (guesser.html)
   ═══════════════════════════════════════════════════════ */

/* Mode switcher */
.gwrap {
  position: relative; z-index: 1; width: 100%; max-width: 1100px;
  margin: 0 auto; padding: .5rem 1.5rem 5rem;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; animation: rise .7s .6s forwards;
}
.msw { display:flex; overflow:hidden; border:1px solid var(--border); background:var(--panel); }
.mbtn {
  font-family:'DM Sans',sans-serif; font-size:.76rem; font-weight:600; letter-spacing:.06em;
  padding:.65rem 1.8rem; border:none; background:transparent;
  color:var(--muted); cursor:pointer; transition:all .2s; text-transform:uppercase;
  position:relative;
}
.mbtn.active { color: var(--gold-lt); }
.mbtn.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); }
.mbtn.surv.active { color: var(--surv-tx); }
.mbtn.surv.active::after { background: var(--rei-lt); }

/* Daily bar */
.dbar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  font-size:.7rem; font-weight:500; color:var(--muted);
}
.dbar .cnt { color: var(--gold-lt); font-weight: 600; }
.dots { display:flex; gap:5px; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--panel); border:1px solid var(--rim); transition:all .3s; }
.dot.used { background:rgba(212,168,67,.35); border-color:var(--gold); }
.dot.win  { background:var(--ok-bd); border-color:var(--ok-tx); box-shadow:0 0 5px rgba(74,222,128,.3); }
.dot.lose { background:var(--ko-bd); border-color:var(--ko-tx); }

/* Survival bar */
.sbar {
  display:none; width:100%; max-width:680px;
  background:var(--surv-bg); border:1px solid var(--surv-bd);
  padding:12px 18px; gap:18px; align-items:center; justify-content:center;
  flex-wrap:wrap; position:relative; overflow:hidden;
}
.sbar::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(30,127,232,.12) 0%,transparent 70%); pointer-events:none; }
.sbar.on { display:flex; }
.sv { display:flex; flex-direction:column; align-items:center; gap:2px; }
.sv-n { font-family:'Shippori Mincho',serif; font-size:1.4rem; font-weight:800; color:var(--surv-tx); line-height:1; }
.sv-l { font-size:.6rem; font-weight:600; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.svdiv { width:1px; height:34px; background:rgba(94,176,255,.2); }
.sdots-w { display:flex; flex-direction:column; align-items:center; gap:4px; }
.sdots   { display:flex; gap:4px; }
.sdot    { width:8px; height:8px; border-radius:50%; background:var(--panel); border:1px solid rgba(30,127,232,.3); transition:all .3s; }
.sdot.used { background:var(--rei-mid); border-color:var(--rei-lt); box-shadow:0 0 5px var(--rei-glow); }
.sdot.win  { background:var(--ok-bd); border-color:var(--ok-tx); }

/* Flash */
.flash { width:100%; max-width:660px; padding:9px 18px; text-align:center; font-size:.78rem; font-weight:600; display:none; }
.flash.on  { display:block; animation: flashP .25s ease; }
.flash.ok  { background:var(--ok-bg); border:1px solid var(--ok-bd); color:var(--ok-tx); }
.flash.ko  { background:var(--ko-bg); border:1px solid var(--ko-bd); color:var(--ko-tx); }
@keyframes flashP { from{opacity:0;transform:scale(.97) translateY(-4px);} to{opacity:1;transform:scale(1) translateY(0);} }

/* Help */
.hbtn { font-size:.7rem; font-weight:500; color:var(--muted); cursor:pointer; background:none; border:none; text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.hbtn:hover { color:var(--gold-lt); }
.hpanel { max-width:660px; width:100%; background:var(--panel); border:1px solid var(--border); padding:1.1rem 1.3rem; display:none; flex-direction:column; gap:8px; font-size:.85rem; line-height:1.7; color:var(--text); }
.hpanel.on { display:flex; }
.hpanel b  { color:var(--gold-lt); font-size:.7rem; font-weight:600; letter-spacing:.06em; }
.leg       { display:flex; gap:8px; align-items:center; font-size:.82rem; }
.sw { width:14px; height:14px; flex-shrink:0; border:1px solid; }
.sw.g { background:var(--ok-bg); border-color:var(--ok-bd); }
.sw.y { background:var(--yw-bg); border-color:var(--yw-bd); }
.sw.r { background:var(--ko-bg); border-color:var(--ko-bd); }

/* Input */
.iz { width:100%; max-width:660px; display:flex; border:1px solid var(--border); background:var(--panel); transition:border-color .2s; }
.iz:focus-within { border-color:var(--gold-line); }
.survival-mode .iz:focus-within { border-color:rgba(30,127,232,.5); }
.acw { position:relative; flex:1; }
.gi  { width:100%; background:transparent; border:none; color:var(--white); font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:500; padding:.8rem .9rem; outline:none; }
.gi::placeholder { color:var(--dim); }
.gbtn { background:var(--gold); border:none; color:var(--void); font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:700; padding:0 1.4rem; cursor:pointer; letter-spacing:.1em; transition:all .2s; text-transform:uppercase; white-space:nowrap; min-width:84px; border-left:1px solid rgba(0,0,0,.15); }
.gbtn:hover    { background:var(--gold-lt); }
.gbtn:disabled { opacity:.35; cursor:not-allowed; }
.survival-mode .gbtn { background:var(--rei-mid); color:var(--white); }
.survival-mode .gbtn:hover { background:var(--rei-lt); color:var(--void); }

/* Autocomplete */
.acl { position:absolute; top:100%; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-top:none; max-height:195px; overflow-y:auto; z-index:100; }
.acl:empty { display:none; }
.aci { padding:8px 13px; cursor:pointer; font-size:.76rem; font-weight:500; color:var(--text); transition:background .1s; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:9px; }
.aci:hover, .aci.sel { background:var(--gold-pale); color:var(--gold-lt); }
.survival-mode .aci:hover, .survival-mode .aci.sel { color:var(--surv-tx); }
.acb { font-size:.65rem; color:var(--dim); margin-left:auto; white-space:nowrap; }

/* Table desktop */
.tw { width:100%; overflow-x:auto; }
.th { display:grid; grid-template-columns:145px repeat(9,1fr); gap:2px; margin-bottom:5px; min-width:800px; padding:0 1px; }
.th div { font-size:.58rem; font-weight:600; letter-spacing:.08em; color:var(--muted); text-align:center; padding:4px 2px; border-bottom:1px solid rgba(30,127,232,.2); text-transform:uppercase; }
.th div:first-child { text-align:left; padding-left:7px; }
.row { display:grid; grid-template-columns:145px repeat(9,1fr); gap:2px; margin-bottom:2px; min-width:800px; animation:rowIn .35s cubic-bezier(.2,.8,.3,1) both; }
@keyframes rowIn { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
.cell { background:var(--panel); border:1px solid var(--rim); padding:6px 2px; text-align:center; font-size:.58rem; font-weight:500; min-height:42px; display:flex; align-items:center; justify-content:center; line-height:1.3; }
.cell:first-child { text-align:left; justify-content:flex-start; padding-left:7px; font-size:.63rem; }
.cell.correct { background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
.cell.close   { background:var(--yw-bg); border-color:var(--yw-bd); color:var(--yw-tx); }
.cell.wrong   { background:var(--ko-bg); border-color:var(--ko-bd); color:var(--ko-tx); }

/* Mobile cards */
.cards { display:none; flex-direction:column; gap:9px; width:100%; }
.card  { background:var(--panel); border:1px solid var(--border); overflow:hidden; animation:rowIn .35s cubic-bezier(.2,.8,.3,1) both; position:relative; }
.card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; }
.card.ok::before { background:linear-gradient(to bottom,var(--ok-bd),var(--ok-tx)); }
.card.ko::before { background:linear-gradient(to bottom,var(--ko-bd),var(--ko-tx)); }
.ctop  { display:flex; align-items:center; justify-content:space-between; padding:10px 13px 10px 17px; background:rgba(0,0,0,.3); border-bottom:1px solid var(--border); }
.cname { font-family:'Shippori Mincho',serif; font-size:.82rem; font-weight:700; }
.cname.correct { color:var(--ok-tx); } .cname.wrong { color:var(--ko-tx); }
.cbadge { font-size:.6rem; color:var(--muted); text-align:right; line-height:1.5; }
.cgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.cc    { background:var(--panel); padding:7px 4px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.cc.correct { background:var(--ok-bg); } .cc.close { background:var(--yw-bg); } .cc.wrong { background:var(--ko-bg); }
.cl { font-size:.48rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; text-align:center; color:var(--dim); }
.cc.correct .cl{color:rgba(74,222,128,.4);} .cc.close .cl{color:rgba(251,191,36,.4);} .cc.wrong .cl{color:rgba(248,113,113,.4);}
.cv { font-size:.66rem; font-weight:500; text-align:center; line-height:1.3; }
.cc.correct .cv{color:var(--ok-tx);} .cc.close .cv{color:var(--yw-tx);} .cc.wrong .cv{color:var(--ko-tx);}

/* Result banner */
.rbanner { width:100%; max-width:660px; padding:1.5rem 1.6rem; border:1px solid; text-align:center; display:none; flex-direction:column; gap:11px; animation:rise .45s ease both; }
.rbanner.on  { display:flex; }
.rbanner.win { border-color:var(--ok-bd); background:var(--ok-bg); }
.rbanner.lose{ border-color:var(--ko-bd); background:var(--ko-bg); }
.rttl  { font-family:'Shippori Mincho',serif; font-size:1rem; font-weight:800; letter-spacing:.08em; }
.rbanner.win  .rttl { color:var(--ok-tx); } .rbanner.lose .rttl { color:var(--ko-tx); }
.rchar { font-family:'Shippori Mincho',serif; font-size:.88rem; font-weight:700; color:var(--gold-lt); }
.rdesc { color:var(--text); font-size:.86rem; line-height:1.65; }
.ntmr  { font-size:.7rem; color:var(--muted); }
.ntmr span { color:var(--gold-lt); font-weight:600; }
.xbtn  { align-self:center; background:transparent; border:1px solid var(--border); color:var(--gold-lt); font-size:.7rem; font-weight:600; letter-spacing:.1em; padding:.55rem 1.4rem; cursor:pointer; transition:all .2s; text-transform:uppercase; }
.xbtn:hover { background:var(--gold-pale); border-color:var(--gold); }

/* Survival end */
.send { width:100%; max-width:660px; padding:1.8rem 1.6rem; border:1px solid var(--surv-bd); background:var(--surv-bg); text-align:center; display:none; flex-direction:column; gap:14px; animation:rise .45s ease both; }
.send.on { display:flex; }
.se-t { font-family:'Shippori Mincho',serif; font-size:1.1rem; font-weight:800; letter-spacing:.08em; color:var(--surv-tx); }
.se-s { color:var(--text); font-size:.88rem; line-height:1.7; }
.sestats { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.sestat  { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 13px; background:rgba(1,1,8,.6); border:1px solid rgba(30,127,232,.22); }
.sestat strong { font-family:'Shippori Mincho',serif; font-size:1.2rem; color:var(--surv-tx); }
.sestat span   { font-size:.58rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.r2btn  { align-self:center; background:transparent; border:1px solid rgba(94,176,255,.4); color:var(--surv-tx); font-size:.72rem; font-weight:700; padding:.65rem 1.7rem; cursor:pointer; letter-spacing:.1em; transition:all .2s; text-transform:uppercase; }
.r2btn:hover { background:var(--rei-pale); transform:translateY(-1px); }
.xbtn2  { align-self:center; background:transparent; border:1px solid rgba(94,176,255,.25); color:var(--surv-tx); font-size:.68rem; font-weight:600; letter-spacing:.1em; padding:.5rem 1.3rem; cursor:pointer; transition:all .2s; text-transform:uppercase; }
.xbtn2:hover { background:var(--rei-pale); }

@media (max-width: 700px) {
  .gwrap { padding:.5rem .7rem 4rem; gap:9px; }
  .mbtn  { padding:.6rem 1rem; font-size:.7rem; }
  .gi    { font-size:.78rem; padding:.75rem .8rem; }
  .gbtn  { min-width:68px; font-size:.66rem; padding:0 .8rem; }
  .tw    { display:none; }
  .cards { display:flex; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .th  { grid-template-columns:105px repeat(9,1fr); min-width:640px; }
  .row { grid-template-columns:105px repeat(9,1fr); min-width:640px; }
  .cell { font-size:.5rem; min-height:38px; }
  .cell:first-child { font-size:.56rem; }
}