/* ============================================================
   HOMIES — DESIGN SYSTEM v2 (socle unique des maquettes)
   Repris des prototypes clash_room, tailles HARMONISÉES.
   Règle : tous les composants d'un même type ont la MÊME taille.
   Emojis = Noto animés (img .nemoji) · Avatars = DiceBear (img .avatar)
   ============================================================ */
:root {
  --paper:var(--paper); --ink:var(--ink); --gray:#C8C8C8; --gray2:#E8E8E8;
  --magenta:#FF2E93; --yellow:#FFD600; --cyan:#5BD8E5; --green:#5BE885;
  --red:#FF5252; --orange:#FF9F45; --purple:#9D4EDD; --blue:#4D7CFF; --pink:#FF80AB;
  /* tokens d'épaisseur/ombre — un seul jeu pour tout le système */
  --bd:3px;            /* bordure standard */
  --bd-strong:4px;     /* bordure d'accent (CTA, cadre) */
  --sh:5px;            /* ombre dure standard */
  --sh-cta:6px;        /* ombre dure CTA */
  --radius:0px;        /* brutalist = angles droits */
  --font-d:var(--fd);       /* display */
  --font-m:var(--fb);/* texte */
}
* { box-sizing:border-box; margin:0; padding:0; }

/* ---------- atelier (page galerie) ---------- */
.lab { font-family:var(--font-m); background:var(--gray); color:var(--ink); padding:36px 24px 80px; min-height:100vh;
  background-image:radial-gradient(rgba(10,10,10,.07) 1.5px, transparent 1.5px); background-size:22px 22px; }
.lab-h1 { font-family:var(--font-d); font-size:34px; letter-spacing:2px; margin-bottom:6px; }
.lab-sub { font-family:var(--font-m); font-weight:700; font-size:13px; line-height:1.5; color: color-mix(in srgb, var(--ink) 70%, transparent); max-width:820px; margin-bottom:24px; }
.lab-back { display:inline-block; font-family:var(--font-d); font-size:13px; letter-spacing:1px; border:var(--bd) solid var(--ink); background:var(--yellow); padding:7px 12px; box-shadow:3px 3px 0 var(--ink); text-decoration:none; color:var(--ink); margin-bottom:18px; }
.lab-sect { font-family:var(--font-d); font-size:20px; letter-spacing:1.5px; padding:7px 12px; background:var(--magenta); color:var(--paper); border:var(--bd-strong) solid var(--ink); box-shadow:var(--sh) var(--sh) 0 var(--ink); display:inline-block; margin:34px 0 16px; }
.lab-row { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; margin-bottom:8px; }
.lab-item { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.lab-cap { font-family:var(--font-m); font-weight:700; font-size:10px; letter-spacing:1px; color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent); }
.lab-card { background:var(--paper); border:var(--bd) solid var(--ink); box-shadow:var(--sh) var(--sh) 0 var(--ink); padding:18px; }

/* ---------- cadre device (iPhone, taille UNIQUE 390×844) ---------- */
.device { width:390px; height:844px; background:var(--paper); border:var(--bd-strong) solid var(--ink);
  box-shadow:10px 10px 0 var(--ink); overflow:hidden; position:relative; display:flex; flex-direction:column; }
.device .statusbar { height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 18px; font-family:var(--font-m); font-weight:700; font-size:11px; }
.device-label { margin-top:12px; font-family:var(--font-d); font-size:14px; letter-spacing:2px; }
.device-note { margin-top:3px; max-width:360px; font-family:var(--font-m); font-weight:700; font-size:10.5px; line-height:1.4; color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent); }

/* ---------- emoji Noto animé + avatar DiceBear ---------- */
.nemoji { display:inline-block; width:1em; height:1em; vertical-align:-.14em; object-fit:contain; }
.emoji-box { border:var(--bd) solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; transform:rotate(-3deg); box-shadow:3px 3px 0 var(--ink); }
.emoji-box.s { width:34px; height:34px; } .emoji-box.s .nemoji { width:24px; height:24px; }
.emoji-box.m { width:44px; height:44px; } .emoji-box.m .nemoji { width:32px; height:32px; }
.emoji-box.l { width:64px; height:64px; } .emoji-box.l .nemoji { width:46px; height:46px; }
/* avatars : JAMAIS à plat -> toujours une ombre dure */
.avatar { border:var(--bd) solid var(--ink); background:var(--paper); overflow:hidden; flex-shrink:0; display:block; box-shadow:4px 4px 0 var(--ink); }
.avatar img { width:100%; height:100%; display:block; }
.avatar.s { width:36px; height:36px; } .avatar.m { width:48px; height:48px; } .avatar.l { width:72px; height:72px; }

/* ---------- TOP BAR ---------- */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:var(--bd) solid var(--ink); flex-shrink:0; background:var(--paper); }
.topbar .left { display:flex; align-items:center; gap:10px; }
.iconbtn { width:34px; height:34px; flex-shrink:0; border:var(--bd) solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); font-family:var(--font-d); font-size:18px; display:flex; align-items:center; justify-content:center; }
.iconbtn.red { background:var(--red); color:var(--paper); }
.page-title { font-family:var(--font-d); font-size:22px; letter-spacing:2px; }
.brand { position:relative; display:inline-block; }
.brand::before { content:''; position:absolute; top:3px; left:3px; right:-3px; bottom:-3px; background:var(--ink); }
.brand .b { position:relative; padding:6px 12px; border:var(--bd) solid var(--ink); background:var(--magenta); font-family:var(--font-d); font-size:16px; letter-spacing:1.5px; color:var(--paper); }
.step-counter { font-family:var(--font-m); font-weight:700; font-size:11px; letter-spacing:1.5px; color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent); }

/* ---------- PROGRESS (segments) ---------- */
.progress { display:flex; gap:6px; padding:12px 18px 8px; border-bottom:var(--bd) solid var(--ink); flex-shrink:0; }
.progress .seg { flex:1; height:5px; background:var(--gray2); border:2px solid var(--ink); }
.progress .seg.done { background:var(--green); } .progress .seg.active { background:var(--magenta); }

/* ---------- HUD PILLS (bandeau de jeu) — TAILLE UNIQUE ---------- */
.hud { display:flex; align-items:center; gap:8px; padding:10px 14px; flex-shrink:0; }
.hud .spacer { flex:1; }
.pill { font-family:var(--font-d); font-size:13px; letter-spacing:.5px; line-height:1;
  height:30px; padding:0 11px; border:2.5px solid var(--ink); background:var(--paper);
  display:inline-flex; align-items:center; gap:6px; box-shadow:3px 3px 0 var(--ink); }
.pill .nemoji { width:15px; height:15px; }
.pill.red { background:var(--red); color:var(--paper); }
.pill.yellow { background:var(--yellow); }
.pill.green { background:var(--green); }
.pill.cyan { background:var(--cyan); }
/* élément sombre -> ombre COLORÉE (jamais noir sur noir) */
.pill.ink { background:var(--ink); color:var(--paper); box-shadow:3px 3px 0 var(--magenta); }

/* ---------- TYPE PILL (label de manche) ---------- */
.type-pill { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; position:relative; transform:rotate(-1deg); }
.type-pill .sh { position:absolute; top:3px; left:3px; right:-3px; bottom:-3px; background:var(--ink); }
.type-pill .bd { position:relative; padding:6px 14px; border:var(--bd) solid var(--ink); background:var(--cyan); font-family:var(--font-d); font-size:13px; letter-spacing:1.5px; display:inline-flex; align-items:center; gap:7px; }
.type-pill .nemoji { width:16px; height:16px; }

/* ---------- BUTTONS (tailles sm / md / lg) ---------- */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:var(--font-d); border:var(--bd-strong) solid var(--ink); background:var(--paper); color:var(--ink);
  box-shadow:var(--sh) var(--sh) 0 var(--ink); text-transform:uppercase; text-decoration:none; }
.btn.sm { font-size:13px; letter-spacing:1px; padding:8px 13px; border-width:var(--bd); box-shadow:3px 3px 0 var(--ink); }
.btn.md { font-size:16px; letter-spacing:1.5px; padding:13px 18px; }
.btn.lg { font-size:20px; letter-spacing:2px; padding:16px 22px; }
.btn.block { display:flex; width:100%; }
.btn.magenta { background:var(--magenta); color:var(--paper); }
.btn.yellow { background:var(--yellow); } .btn.cyan { background:var(--cyan); }
.btn.green { background:var(--green); } .btn.red { background:var(--red); color:var(--paper); }

/* ---------- CARD (stamp = ombre dure via ::before) ---------- */
.card { position:relative; }
.card::before { content:''; position:absolute; top:var(--sh); left:var(--sh); right:calc(-1*var(--sh)); bottom:calc(-1*var(--sh)); background:var(--ink); }
.card > .bd { position:relative; border:var(--bd) solid var(--ink); background:var(--paper); }

/* ---------- LISTE CARD (pack / jeu / format) — structure unique ---------- */
.listcard { position:relative; margin-bottom:10px; }
.listcard::before { content:''; position:absolute; top:var(--sh); left:var(--sh); right:calc(-1*var(--sh)); bottom:calc(-1*var(--sh)); background:var(--ink); }
.listcard .bd { position:relative; display:flex; align-items:center; gap:12px; border:var(--bd) solid var(--ink); background:var(--paper); padding:10px 12px; }
.listcard.on .bd { background:#FFE99C; }
.listcard.sel .bd { background:var(--yellow); transform:translate(var(--sh),var(--sh)); }
.listcard.sel::before { display:none; }
.listcard .info { flex:1; min-width:0; }
/* titres : TOUJOURS sur une seule ligne, "…" si trop long */
.listcard .name { font-family:var(--font-d); font-size:15px; letter-spacing:.5px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listcard .desc { font-family:var(--font-m); font-weight:700; font-size:10px; line-height:1.25; color: color-mix(in srgb, var(--ink) 60%, transparent); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- STEPPER (− N +) — symboles DESSINÉS EN CSS = centrés au pixel ---------- */
.stepper { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.stepper .sbtn { width:32px; height:32px; flex-shrink:0; border:2.5px solid var(--ink); background:var(--yellow); box-shadow:2px 2px 0 var(--ink); position:relative; cursor:pointer; }
.stepper .sbtn::before { content:''; position:absolute; top:50%; left:50%; width:13px; height:3px; background:var(--ink); transform:translate(-50%,-50%); }   /* barre du − */
.stepper .sbtn.plus::after { content:''; position:absolute; top:50%; left:50%; width:3px; height:13px; background:var(--ink); transform:translate(-50%,-50%); } /* barre verticale du + */
.stepper .sval { font-family:var(--font-d); font-size:22px; min-width:26px; text-align:center; line-height:1; }

/* ---------- ACTIVER UN MODE : bouton "AJOUTER" → "ACTIVÉ" (pas de checkbox) ---------- */
.toggle-btn { font-family:var(--font-d); font-size:12px; letter-spacing:.5px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--ink); padding:9px 14px; cursor:pointer; white-space:nowrap; line-height:1; }
.toggle-btn.on { background:var(--green); }
.toggle-btn:active { transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }

/* ---------- OPTION (réponse A/B/C/D) — taille unique ---------- */
.options { display:flex; flex-direction:column; gap:10px; padding:4px 16px 14px; }
.opt { position:relative; }
.opt .sh { position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
.opt .bd { position:relative; display:flex; align-items:center; gap:12px; padding:13px 12px; border:var(--bd) solid var(--ink); }
.opt .lwrap { position:relative; flex-shrink:0; }
.opt .lwrap .lsh { position:absolute; top:3px; left:3px; right:-3px; bottom:-3px; background:var(--ink); }
.opt .lbox { position:relative; width:34px; height:34px; border:2px solid var(--ink); background:var(--paper); color:var(--ink); font-family:var(--font-d); font-size:18px; display:flex; align-items:center; justify-content:center; }
.opt .text { font-family:var(--font-d); font-size:16px; letter-spacing:.3px; line-height:1.15; flex:1; }
.opt.c-yellow .bd { background:var(--yellow); color:var(--ink); }
.opt.c-violet .bd { background:var(--purple); color:var(--paper); }
.opt.c-red .bd { background:var(--red); color:var(--paper); }
.opt.c-teal .bd { background:#4ECDC4; color:var(--paper); }
/* ---- ÉTATS de réponse : tampon coin (✓/✗ dessinés), sélection, reveal ---- */
.opt .stamp { position:absolute; top:50%; right:12px; width:30px; height:30px; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); transform:translateY(-50%) rotate(8deg); z-index:3; display:none; }
.opt.selected .bd, .opt.correct .bd { border-width:5px; }
.opt.selected .bd, .opt.correct .bd, .opt.wrong .bd { padding-right:52px; }
.opt.selected { } /* sélection AVANT reveal : tampon vert + bord épaissi */
.opt.selected .stamp, .opt.correct .stamp { display:block; background:var(--green); }
.opt.selected .stamp::before, .opt.correct .stamp::before { content:''; position:absolute; left:9px; top:4px; width:6px; height:13px; border:solid var(--ink); border-width:0 3px 3px 0; transform:rotate(42deg); } /* coche ✓ */
.opt.correct .bd { background:var(--green); color:var(--ink); }
.opt.wrong .bd { background:var(--red); color:var(--paper); }
.opt.wrong .stamp { display:block; background:var(--red); }
.opt.wrong .stamp::before, .opt.wrong .stamp::after { content:''; position:absolute; left:12.5px; top:5px; width:3px; height:18px; background:var(--paper); } /* croix ✗ */
.opt.wrong .stamp::before { transform:rotate(45deg); } .opt.wrong .stamp::after { transform:rotate(-45deg); }
.opt.faded { opacity:.38; }                                      /* les autres au reveal */

/* ---------- Q-CARD (énoncé) ---------- */
.qcard { position:relative; margin:6px 16px 12px; }
.qcard .sh { position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
.qcard .bd { position:relative; padding:14px; border:var(--bd) solid var(--ink); background:var(--paper); font-family:var(--font-d); font-size:18px; line-height:1.2; }

/* ---------- FOOTER + CTA ---------- */
.footer { padding:12px 18px 16px; border-top:var(--bd) solid var(--ink); background:var(--paper); flex-shrink:0; }
.cta { position:relative; cursor:pointer; }
.cta::before { content:''; position:absolute; top:var(--sh-cta); left:var(--sh-cta); right:calc(-1*var(--sh-cta)); bottom:calc(-1*var(--sh-cta)); background:var(--ink); }
.cta .bd { position:relative; border:var(--bd-strong) solid var(--ink); padding:14px; font-family:var(--font-d); font-size:18px; letter-spacing:2px; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--magenta); color:var(--paper); }
.cta.go .bd { background:var(--green); color:var(--ink); font-size:20px; }
.cta .count { background:var(--paper); color:var(--ink); border:2.5px solid var(--ink); padding:1px 8px; font-size:13px; box-shadow:2px 2px 0 rgba(0,0,0,.35); }

/* ---------- BOTTOM NAV ---------- */
.bottomnav { display:flex; border-top:var(--bd) solid var(--ink); background:var(--paper); flex-shrink:0; }
.bottomnav .it { flex:1; text-align:center; padding:8px 0 9px; font-family:var(--font-d); font-size:9px; letter-spacing:.5px; opacity:.55; }
.bottomnav .it .nemoji { width:20px; height:20px; display:block; margin:0 auto 3px; }
.bottomnav .it.on { opacity:1; }
.bottomnav .it.on .lbl { background:var(--magenta); color:var(--paper); border:2px solid var(--ink); padding:1px 5px; }

/* ---------- STICKER ---------- */
.sticker { position:relative; display:inline-flex; align-items:center; gap:7px; }
.sticker::before { content:''; position:absolute; top:3px; left:3px; right:-3px; bottom:-3px; background:var(--ink); }
.sticker .bd { position:relative; padding:5px 12px; border:var(--bd) solid var(--ink); background:var(--yellow); font-family:var(--font-d); font-size:13px; letter-spacing:1px; }
.sticker.magenta .bd { background:var(--magenta); color:var(--paper); }
.sticker.rot { transform:rotate(-3deg); }

/* ============================================================
   GAMIFICATION & MÉTA
   ============================================================ */
/* niveau + barre XP */
.levelbar { display:flex; align-items:center; gap:10px; }
.level-badge { width:42px; height:42px; flex-shrink:0; border:3px solid var(--ink); background:var(--magenta); color:var(--paper); box-shadow:3px 3px 0 var(--ink); font-family:var(--font-d); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.level-badge .n { font-size:18px; } .level-badge .l { font-size:6px; letter-spacing:1px; margin-top:1px; }
.xpbar { flex:1; height:20px; border:3px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); position:relative; overflow:hidden; }
.xpbar .fill { height:100%; background:var(--magenta); border-right:3px solid var(--ink); }
.xpbar .txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:10px; letter-spacing:1px; }

/* badges / trophées */
.badge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.badge { display:flex; flex-direction:column; align-items:center; gap:5px; }
.badge .ic { width:100%; aspect-ratio:1; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--yellow); display:flex; align-items:center; justify-content:center; }
.badge .ic .nemoji { width:58%; height:58%; }
.badge.locked .ic { background:var(--gray2); }
.badge.locked .ic .nemoji { filter:grayscale(1); opacity:.45; }
.badge .nm { font-family:var(--font-m); font-weight:700; font-size:8px; text-align:center; line-height:1.15; }

/* distinctions : médailles + rangs */
.medal { width:36px; height:36px; flex-shrink:0; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.medal .nemoji { width:24px; height:24px; }
.medal.gold { background:var(--yellow); } .medal.silver { background:#DADADA; } .medal.bronze { background:var(--orange); }
.rank-chip { font-family:var(--font-d); font-size:14px; line-height:1; border:2.5px solid var(--ink); background:var(--magenta); color:var(--paper); box-shadow:2px 2px 0 var(--ink); padding:5px 8px; }
.rank-chip.gold { background:var(--yellow); color:var(--ink); }

/* avatar + niveau (badge coin) */
.avatar-lv { position:relative; display:inline-block; }
.avatar-lv .lv { position:absolute; bottom:-7px; right:-7px; background:var(--magenta); color:var(--paper); border:2px solid var(--ink); font-family:var(--font-d); font-size:10px; line-height:1; padding:2px 5px; box-shadow:1px 1px 0 var(--ink); }

/* ============================================================
   FORMULAIRES & SAISIE
   ============================================================ */
.input { width:100%; border:3px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); padding:13px 14px; font-family:var(--font-m); font-weight:700; font-size:16px; outline:none; color:var(--ink); }
.input::placeholder { color: color-mix(in srgb, var(--ink) 40%, transparent); }
.input:focus { background:#fff; box-shadow:4px 4px 0 var(--magenta); }

.codecells { display:flex; gap:8px; }
.codecells .cell { width:44px; height:54px; flex-shrink:0; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper); font-family:var(--font-d); font-size:28px; display:flex; align-items:center; justify-content:center; }
.codecells .cell.filled { background:var(--yellow); }

/* contrôle segmenté (ON/OFF, niveaux…) */
.seg { display:inline-flex; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
.seg .o { font-family:var(--font-d); font-size:13px; letter-spacing:.5px; padding:9px 14px; border-right:3px solid var(--ink); background:var(--paper); cursor:pointer; }
.seg .o:last-child { border-right:0; }
.seg .o.on { background:var(--magenta); color:var(--paper); }

/* ============================================================
   CLASSEMENT / LOBBY / RÉSULTATS
   ============================================================ */
.lbrow { display:flex; align-items:center; gap:12px; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:9px 12px; }
.lbrow.me { background:var(--yellow); }
.lbrow .rk { font-family:var(--font-d); font-size:18px; min-width:26px; text-align:center; }
.lbrow .nm { font-family:var(--font-d); font-size:15px; letter-spacing:.3px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbrow .sc { font-family:var(--font-d); font-size:17px; }

.ptile { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ptile .nm { font-family:var(--font-d); font-size:12px; letter-spacing:.3px; max-width:70px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.statcard { border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper); text-align:center; padding:11px 6px; }
.statcard .v { font-family:var(--font-d); font-size:24px; line-height:1; } .statcard .l { font-family:var(--font-m); font-weight:700; font-size:9px; letter-spacing:.5px; margin-top:4px; }
.statcard.a { background:var(--yellow); } .statcard.b { background:var(--green); } .statcard.c { background:var(--cyan); }

/* ============================================================
   CARTE À JOUER (Couple / Soirée) + SHEET / MODAL
   ============================================================ */
.playcard { position:relative; }
.playcard::before { content:''; position:absolute; top:8px; left:8px; right:-8px; bottom:-8px; background:var(--ink); }
.playcard .bd { position:relative; border:5px solid var(--ink); background:var(--paper); padding:18px; min-height:210px; display:flex; flex-direction:column; }
.playcard .corner { font-family:var(--font-d); font-size:13px; }
.playcard .lvltag { align-self:flex-start; font-family:var(--font-d); font-size:11px; border:2.5px solid var(--ink); background:var(--green); box-shadow:2px 2px 0 var(--ink); padding:3px 9px; }
.playcard .txt { font-family:var(--font-d); font-size:22px; line-height:1.25; margin:auto 0; text-align:center; }

.sheet { position:relative; }
.sheet::before { content:''; position:absolute; top:7px; left:7px; right:-7px; bottom:-7px; background:var(--ink); }
.sheet .bd { position:relative; border:4px solid var(--ink); background:var(--paper); padding:22px 18px; display:flex; flex-direction:column; gap:12px; }
.sheet .handle { width:50px; height:5px; background:var(--ink); margin:-8px auto 2px; }

/* marquee (bandeau défilant) */
.marquee { border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap; padding:5px 0; font-family:var(--font-d); font-size:11px; letter-spacing:2px; }

/* toast / notif */
.toast { display:inline-flex; align-items:center; gap:8px; border:3px solid var(--ink); background:var(--green); box-shadow:4px 4px 0 var(--ink); padding:10px 14px; font-family:var(--font-d); font-size:13px; letter-spacing:.5px; }