/* Draft (draft.js): pantalla completa, sin cabecera. Prefijo df-. Solo tokens de style.css (docs/diseno.md). */
.df-page { position: fixed; inset: 0; z-index: var(--z-raise); display: flex; flex-direction: column; background: var(--bg); color: var(--text); overflow: hidden;
  /* --df-size-f lo escribe draft.js desde HS.prefs.cardSize; los anchos se calculan acá (también en la regla angosta) */
  --df-pack-w: clamp(96px, calc(11vw * var(--df-size-f, 1)), 220px); --df-bcard-w: clamp(80px, calc(8.5vw * var(--df-size-f, 1)), 176px); }
.df-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.df-scroll { overflow: auto; }

/* ---------- barra ---------- */
.df-bar { position: relative; z-index: var(--z-float); display: flex; align-items: center; gap: var(--s3); height: 56px; padding: 0 var(--s4); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex: none; }
.df-bar .brand { margin-right: 0; }
.df-title { min-width: 0; font-size: var(--fs-4); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-bar .badge { white-space: nowrap; flex: none; }
.df-bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }

/* menú (.glass) bajo el botón de la barra */
.df-menu { position: absolute; top: 60px; right: var(--s4); z-index: var(--z-menu); min-width: 240px; padding: var(--s2); display: flex; flex-direction: column; gap: 2px; animation: pop var(--t-base) var(--ease); }
.df-menu-cap { padding: var(--s2) var(--s2) var(--s1); }
.df-menu-item { display: flex; align-items: center; gap: var(--s3); width: 100%; height: 36px; padding: 0 var(--s2); border: 0; border-radius: var(--r-2); background: transparent; color: var(--text); font-size: var(--fs-3); font-weight: 600; text-align: left; transition: background var(--t-fast) var(--ease); }
.df-menu-item:hover, .df-menu-item:focus-visible { background: var(--panel-3); outline: none; }
.df-menu-item .icon { color: var(--text-2); }
.df-menu-danger { color: color-mix(in srgb, var(--wine-2) 70%, white); } .df-menu-danger .icon { color: inherit; }

.df-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- encabezado del sobre ---------- */
.df-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) 20px var(--s1); font-size: var(--fs-5); }
.df-head-main { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-6); }
.df-head-pick { font-weight: 700; color: var(--gold-2); }
.df-head-dir { display: inline-flex; align-items: center; gap: var(--s1); color: var(--text-2); font-size: var(--fs-4); }
.df-head-sep { color: var(--muted); }
.df-head-right { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s3); }
.df-timer { display: inline-flex; align-items: center; gap: var(--s1); color: var(--text-2); } .df-timer .icon { color: var(--muted); }
.df-timer b { font-size: var(--fs-5); min-width: 42px; color: var(--text); }
.df-timer.low b, .df-timer.low .icon { color: var(--wine-2); animation: df-blink calc(var(--t-slow) * 3) steps(2) infinite; }
@keyframes df-blink { 50% { opacity: .35; } }

/* ---------- fila de jugadores ---------- */
.df-players { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) 20px var(--s3); }
.df-pl { height: 30px; padding: 0 var(--s2) 0 10px; gap: var(--s2); font-size: var(--fs-2); box-shadow: none; }
.df-pl.me { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 12%, var(--panel-2)); }
.df-pl.off { opacity: .6; }
/* bot del draft de uno solo: apagado y con borde punteado, para que no se confunda con alguien de verdad */
.df-pl-bot { padding: 0 var(--s2); border-style: dashed; background: transparent; color: var(--muted); }
.df-pl-bot .df-pl-name { font-weight: 600; }
.df-pl-name { font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-pl-st { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-1); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.df-st-pick { color: var(--gold-2); } .df-st-wait { color: var(--muted); } .df-st-ready { color: var(--forest-2); }
.df-arrow { display: inline-flex; color: var(--muted); }

/* ---------- cuerpo: sobre + panel lateral ---------- */
.df-body { flex: 1; min-height: 0; display: flex; }
.df-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.df-pack { flex: 1; min-height: 0; padding: var(--s2) 20px var(--s4); }
.df-pack.sending { opacity: .55; pointer-events: none; transition: opacity var(--t-base) var(--ease); }
.df-grid { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: center; align-content: flex-start; padding: var(--s2) 0; }
.df-grid .df-card { width: var(--df-pack-w); }

/* ---------- carta (compone .card): zoom en su lugar ---------- */
.df-card { position: relative; aspect-ratio: 1 / 1.4; cursor: pointer; user-select: none; --hs-on: 1.6; transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(var(--hs, 1)); }
.df-card img, .df-card .df-ph { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.df-card .df-ph { font-size: var(--fs-2); padding: var(--s2); }
.df-card:hover, .df-card:focus-visible { --hs: var(--hs-on); z-index: var(--z-float); }
.df-card.on { box-shadow: 0 0 0 2px var(--gold), 0 0 12px color-mix(in srgb, var(--gold) 50%, transparent); }
.df-card.on:hover { box-shadow: 0 0 0 2px var(--gold), var(--sh-3); }
.df-card-check { position: absolute; left: var(--s2); top: var(--s2); width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--gold); color: var(--on-accent); display: none; align-items: center; justify-content: center; box-shadow: var(--sh-1); }
.df-card.on .df-card-check { display: inline-flex; }
.df-card.dim { opacity: .3; pointer-events: none; }
.df-card-i { position: absolute; right: var(--s2); top: var(--s2); display: none; background: color-mix(in srgb, var(--bg) 75%, transparent); border-color: color-mix(in srgb, white 30%, transparent); color: var(--text); }
.df-card:hover .df-card-i, .df-card:focus-within .df-card-i { display: inline-flex; }
.df-card-i:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.df-crown { position: absolute; left: var(--s2); top: var(--s2); display: none; background: color-mix(in srgb, var(--bg) 75%, transparent); border-color: color-mix(in srgb, white 30%, transparent); color: var(--gold-2); }
.df-card:hover .df-crown, .df-card:focus-within .df-crown { display: inline-flex; }
.df-crown:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
/* carta que sale del pool al agregarla al mazo */
.df-card.out { opacity: 0; --hs: .85; transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }

/* ---------- confirmar ---------- */
.df-confirm { flex: none; display: flex; align-items: center; gap: var(--s4); margin: 0 20px var(--s4); padding: var(--s3) var(--s4); }
.df-confirm-hint { font-weight: 600; color: var(--text-2); } .df-queued { margin-left: auto; } .df-confirm .btn-lg { min-width: 160px; }

/* ---------- espera / espectador ---------- */
.df-wait { height: 100%; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); color: var(--text-2); text-align: center; padding: 20px; }
.df-wait .icon { color: var(--gold); width: 28px; height: 28px; }
.df-wait-text { font-size: var(--fs-5); font-weight: 600; }
.df-empty { margin: var(--s4) auto; max-width: 420px; } .df-empty-title { font-size: var(--fs-5); font-weight: 600; color: var(--text); }

/* ---------- panel lateral "Tus cartas" + chat ---------- */
.df-page { --df-side-w: clamp(360px, 34vw, 700px); }
.df-side { width: var(--df-side-w); flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg-2); min-height: 0; }
.df-side-head { display: flex; align-items: center; gap: var(--s2); padding: 10px var(--s3); border-bottom: 1px solid var(--border); }
.df-seg { margin-left: auto; padding: 2px; } .df-seg button { min-height: 24px; padding: 0 var(--s2); font-size: var(--fs-1); }
.df-pool-body { flex: 1; min-height: 0; padding: 10px var(--s3) 20px; }
.df-pool-note { margin-bottom: var(--s2); }
.df-group { margin-bottom: var(--s3); }
.df-group-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); } .df-group-h .badge { margin-left: auto; }
.df-thumbs { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* pestañas del panel (Tus cartas · Pasadas · Chat) y el orden de las pilas */
.df-tabs { width: 100%; padding: 2px; } .df-tabs button { flex: 1; min-height: 28px; gap: var(--s1); font-size: var(--fs-2); }
.df-tabs .badge { min-width: 18px; height: 16px; padding: 0 4px; font-size: var(--fs-1); }
.df-side-sub { display: flex; justify-content: flex-end; padding: var(--s2) var(--s3) 0; }
.df-side-sub .df-seg { margin-left: 0; }
/* las pilas: una columna por grupo, cartas encimadas que dejan ver el nombre (18 % de la carta) */
.df-piles { --df-pw: 108px; display: flex; flex-wrap: wrap; gap: var(--s4) var(--s3); align-items: flex-start; }
.df-pile { width: var(--df-pw); flex: none; }
.df-pile-h { display: flex; align-items: center; gap: var(--s1); margin-bottom: var(--s2); min-height: 20px; }
.df-pile-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); } .df-pile-h .badge { margin-left: auto; }
.df-pile-cards { display: block; }
.df-pilecard { display: block; width: 100%; height: calc(var(--df-pw) * 1.3968); aspect-ratio: auto; --hs-on: 1; position: relative; }
.df-pilecard + .df-pilecard { margin-top: calc(var(--df-pw) * 1.3968 * -.82); }
.df-pilecard:hover { z-index: 2; }
.df-pilecard .df-card-i, .df-pilecard:hover .df-card-i { display: none; }
.df-chatwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.df-chatwrap .df-chat { flex: 1; height: auto; border-top: 0; }
.df-chatwrap .df-chat-head { display: none; }
.df-thumb { width: 62px; --hs-on: 2.4; } .df-thumb .df-card-i, .df-thumb:hover .df-card-i { display: none; } .df-thumb .df-ph { font-size: var(--fs-1); line-height: 1.1; padding: 2px; border-width: 1px; }

.df-chat { flex: none; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--border); height: 240px; }
.df-chat-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); color: var(--muted); }
.df-chat-list { flex: 1; min-height: 0; overflow: auto; padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: var(--s2); user-select: text; -webkit-user-select: text; }
.df-chat-empty { padding: var(--s2) 0; }
.df-msg { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--s1) var(--s2); font-size: var(--fs-2); }
.df-msg-me { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.df-msg-who { font-weight: 700; color: var(--gold-2); margin-right: var(--s1); } .df-msg-me .df-msg-who { color: var(--text); }
.df-msg-text { margin-top: 2px; overflow-wrap: anywhere; white-space: pre-wrap; }
.df-chat-form { display: flex; gap: var(--s2); padding: var(--s2) var(--s3); border-top: 1px solid var(--border); } .df-chat-form .btn { flex: none; }
/* armado: burbuja abajo a la izquierda + panel flotante */
.df-chat-fab { position: absolute; left: var(--s4); bottom: var(--s4); z-index: var(--z-menu); width: 44px; height: 44px; }
.df-unread { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; justify-content: center; padding: 0 5px; }
.df-chat-float { position: absolute; left: var(--s4); bottom: 68px; z-index: var(--z-menu); width: 340px; max-width: calc(100% - 32px); height: 420px; max-height: calc(100% - 84px); display: flex; flex-direction: column; overflow: hidden; animation: pop var(--t-base) var(--ease); }
.df-chat-float .df-chat { flex: 1; height: auto; border-top: 0; }

/* ---------- vista previa grande (solo con HS.prefs.sidePreview) ---------- */
.df-preview { position: fixed; right: var(--df-preview-right, var(--s4)); top: 50%; transform: translateY(-50%); z-index: var(--z-float); width: 300px; padding: var(--s2); pointer-events: none; animation: fade var(--t-fast) var(--ease); }
.df-pv-img { width: 100%; }
.df-pv-text { padding: var(--s2) var(--s1) 2px; max-height: calc(100vh - 520px); overflow: hidden; }
.df-pv-name { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-weight: 700; font-size: var(--fs-4); margin-bottom: 2px; }
.df-pv-oracle { margin-top: var(--s2); } .df-pv-oracle p { margin: 0 0 var(--s1); }

/* ---------- sacado del draft: aviso + pool en solo lectura ---------- */
.df-out { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.df-out .df-empty { flex: none; }
.df-out-pool { flex: 1; min-height: 0; padding: 0 20px var(--s5); }
.df-out-head { border-bottom: 0; padding-left: 0; padding-right: 0; }
.df-out-pool .df-group-h .badge { margin-left: 0; } /* a ancho completo el contador va junto al rótulo, no en el margen */

/* ---------- armado del mazo ---------- */
.df-build { flex: 1; min-height: 0; display: flex; }
.df-build.locked .df-bpool, .df-build.locked .df-bdeck-top, .df-build.locked .df-bdeck-body { opacity: .55; pointer-events: none; }
.df-bpool { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.df-bpool-head { display: flex; align-items: center; gap: var(--s2); padding: 10px var(--s4) var(--s2); }
.df-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); padding: var(--s1) var(--s4) 10px; border-bottom: 1px solid var(--border); }
.df-cfilter { display: flex; gap: var(--s1); }
.df-cbtn { opacity: .55; } .df-cbtn .pip { width: 16px; height: 16px; }
.df-cbtn:hover { opacity: .85; } .df-cbtn.on { opacity: 1; border-color: var(--gold); box-shadow: var(--glow-gold); }
.df-search { position: relative; display: flex; align-items: center; width: 220px; margin-left: auto; }
.df-search .icon { position: absolute; left: 10px; color: var(--muted); pointer-events: none; } .df-search .input { padding-left: 32px; }
.df-cmd-hint { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold-2); font-size: var(--fs-3); border-bottom: 1px solid var(--border); }
.df-bpool-body { flex: 1; min-height: 0; padding: var(--s3) var(--s4) var(--s5); }
.df-bgrid { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.df-bgrid .df-card { width: var(--df-bcard-w); }

/* panel del mazo (derecha): cabecera fija, pestañas, cuerpo, pie */
.df-bdeck { width: 400px; flex: none; display: flex; flex-direction: column; background: var(--bg-2); min-height: 0; }
.df-bdeck-top { flex: none; padding: 10px var(--s4) var(--s2); display: flex; flex-direction: column; gap: var(--s2); }
.df-name { height: 32px; padding: 0 var(--s2); margin: 0 calc(var(--s2) * -1); width: calc(100% + var(--s4)); background: transparent; border-color: transparent; font-weight: 600; font-size: var(--fs-5); }
.df-name:hover { border-color: var(--border); background: var(--panel); } .df-name:focus-visible { background: var(--bg-2); }
.df-count { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.df-count-big { font-size: var(--fs-8); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--text); }
.df-count-op { color: var(--muted); font-weight: 500; } .df-count-big b.ok { color: var(--forest-2); } .df-count-big b.low { color: var(--ember-2); }
.df-cmd-row { display: flex; align-items: center; gap: 10px; padding: var(--s2); border: 1px solid var(--border); border-radius: var(--r-2); background: var(--panel); }
.df-cmd-art { width: 56px; height: 40px; flex: none; border-radius: var(--r-1); background-color: var(--panel-3); cursor: pointer; box-shadow: var(--sh-1); }
.df-cmd-name { flex: 1; min-width: 0; } .df-cmd-title { display: flex; align-items: center; gap: var(--s1); color: var(--gold-2); }
.df-cmd-title b { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-cmd-empty .icon { color: var(--muted); }
.df-tabs-row { flex: none; padding: var(--s1) var(--s4) var(--s2); border-bottom: 1px solid var(--border); }
.df-bdeck-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.df-bdeck-body > * { flex: 1; min-height: 0; }

/* pestaña Mazo */
.df-deck-list { padding: var(--s2) var(--s4); }
.df-dgroup { margin-bottom: 10px; }
.df-row { display: flex; align-items: center; gap: var(--s2); padding: 3px var(--s2); border-radius: var(--r-2); cursor: pointer; font-size: var(--fs-3); transition: background var(--t-fast) var(--ease); }
.df-row:hover { background: var(--panel-3); } .df-row-basic { cursor: default; } .df-row-basic:hover { background: transparent; }
.df-row-art { width: 24px; height: 34px; flex: none; border-radius: var(--r-1); background-color: var(--panel-3); box-shadow: var(--sh-1); }
.df-row-qty { min-width: 18px; text-align: right; font-weight: 700; color: var(--text-2); }
.df-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-row-btns { display: none; gap: 2px; } .df-row:hover .df-row-btns, .df-row:focus-within .df-row-btns { display: inline-flex; }

/* pestaña Tierras */
.df-lands { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.df-lands-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--s1); }
.df-land { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s2) 0; border-radius: var(--r-2); background: var(--panel); border: 1px solid var(--border); opacity: .7; }
.df-land.has { opacity: 1; border-color: var(--border-2); }
.df-land-pip .pip { width: 20px; height: 20px; }
.df-land-name { color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-land-ctl { display: flex; align-items: center; gap: 2px; }
.df-land-n { min-width: 20px; text-align: center; font-weight: 700; font-size: var(--fs-3); }
.df-lands-foot { display: flex; align-items: center; gap: var(--s3); }

/* pestaña Estadísticas */
.df-stats { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.df-stat-sec { display: flex; flex-direction: column; gap: var(--s2); }
.df-curve { display: flex; align-items: flex-end; gap: var(--s1); height: 72px; }
.df-curve-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.df-curve-n { font-size: var(--fs-1); color: var(--text-2); line-height: 1; height: 11px; }
.df-curve-bar { width: 100%; max-width: 26px; background: var(--gold); border-radius: var(--r-1) var(--r-1) 0 0; min-height: 2px; opacity: .85; transition: height var(--t-base) var(--ease); }
.df-curve-lbl { font-size: var(--fs-1); color: var(--muted); line-height: 1; }
.df-colors { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--fs-3); }
.df-color-n { display: inline-flex; align-items: center; gap: var(--s1); }
.df-types { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* pie: Listo + quiénes están listos */
.df-bdeck-foot { flex: none; display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4) var(--s3); border-top: 1px solid var(--border); }
.df-ready-wrap { display: inline-flex; flex: none; } .df-ready-btn { min-width: 190px; } .df-ready-btn:disabled { pointer-events: none; }
.df-ready-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.df-ready-msg { font-weight: 600; color: var(--ember-2); }
.df-ready-dots { display: inline-flex; gap: var(--s1); }

/* ---------- pantallas angostas ---------- */
/* vista previa grande: se corre a la izquierda del panel lateral (picks) o del panel del mazo (armado) para no taparlos,
   y el sobre / el pool le reservan su columna a la derecha en vez de quedar debajo */
@media (min-width: 961px) { .df-page:has(.df-side) { --df-preview-right: calc(var(--df-side-w) + var(--s4)); } .df-page:has(.df-bdeck) { --df-preview-right: calc(400px + var(--s4)); } }
@media (min-width: 761px) { .df-page:has(.df-preview) .df-pack, .df-page:has(.df-preview) .df-bpool-body, .df-page:has(.df-preview) .df-out-pool, .df-page:has(.df-preview) .df-filters { padding-right: calc(300px + var(--s4) * 2); } }
@media (max-width: 960px) {
  .df-body { flex-direction: column; }
  .df-main { min-height: 0; }
  .df-side { width: auto; max-height: 42vh; border-left: 0; border-top: 1px solid var(--border); }
  .df-chat { height: 160px; }
  .df-build { flex-direction: column; overflow: auto; }
  .df-bpool { border-right: 0; flex: none; min-height: 50vh; } .df-bpool-body { max-height: 60vh; }
  .df-bdeck { width: auto; flex: none; border-top: 1px solid var(--border); } .df-bdeck-body > * { max-height: 50vh; }
  .df-search { width: 100%; margin-left: 0; }
  .df-chat-fab, .df-chat-float { position: fixed; }
}
@media (max-width: 760px) {
  .df-preview { display: none; }
  .df-bar { padding: 0 var(--s3); gap: var(--s2); } .df-title { font-size: var(--fs-3); }
  .df-head { padding: 10px var(--s3) 2px; font-size: var(--fs-4); } .df-players, .df-pack { padding-left: var(--s3); padding-right: var(--s3); }
  .df-page { --df-pack-w: clamp(96px, calc(27vw * var(--df-size-f, 1)), 140px); --df-bcard-w: clamp(84px, calc(22vw * var(--df-size-f, 1)), 120px); }
  .df-confirm { margin: 0 var(--s3) var(--s3); padding: var(--s2) var(--s3); flex-wrap: wrap; }
  .df-bdeck-foot { flex-wrap: wrap; } .df-ready-wrap { width: 100%; } .df-ready-btn { width: 100%; }
}