:root {
  --bg: #0a0f1e; --bg2: #0f1730; --panel: #111c36; --panel2: #16244a; --line: #24375f;
  --grid: #12203a; --path: #1d3b5c; --neon: #00e5ff; --magenta: #ff3dcb; --amber: #ffb020; --core: #39ff88;
  --danger: #ff4d5e; --text: #e6f1ff; --mut: #8ea3c8;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
.hc { --mut: #c8d6f0; --line: #4a6aa8; --panel: #0c1428; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.35 var(--sans); overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--neon); }
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; padding-top: var(--safe-t); padding-bottom: var(--safe-b); }
.screen.on { display: flex; }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; padding: 12px 16px 24px; }
.wrap { max-width: 720px; margin: 0 auto; width: 100%; }

/* botones */
.btn { min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-weight: 700; letter-spacing: .02em; transition: transform .08s, background .15s, border-color .15s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(180deg, #00b8d6, #0078a8); border-color: var(--neon); color: #001018; box-shadow: 0 0 18px rgba(0,229,255,.35); }
.btn.magenta { background: linear-gradient(180deg, #ff5cd6, #b0157f); border-color: var(--magenta); color: #fff; }
.btn.amber { background: linear-gradient(180deg, #ffc44d, #c27a00); border-color: var(--amber); color: #1a0f00; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 44px; padding: 6px 12px; font-size: 14px; }
.linkbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; }
.btn[disabled] { opacity: .45; cursor: default; }
.iconbtn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: inline-grid; place-items: center; font-size: 18px; }
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 10px; }
.mut { color: var(--mut); }
.tab { font-variant-numeric: tabular-nums; font-family: var(--mono); }
h1, h2, h3 { margin: 0; }
h2 { font-size: 20px; letter-spacing: .04em; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--bg2); min-height: 56px; }
.topbar h2 { flex: 1; }

/* título */
#scr-title { background: radial-gradient(ellipse at 50% 30%, #13254d 0%, var(--bg) 70%); }
.logo { text-align: center; margin: 28px 0 8px; }
.logo canvas { width: min(92vw, 420px); height: auto; }
.logo .sub { color: var(--mut); font-size: 14px; margin-top: 4px; }
.title-btns { display: grid; gap: 10px; max-width: 360px; margin: 12px auto 0; width: 100%; padding: 0 16px; }
.title-btns .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lvl { max-width: 360px; margin: 14px auto 0; padding: 0 16px; width: 100%; }
.bar { height: 8px; border-radius: 6px; background: #0b1428; border: 1px solid var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--neon), var(--magenta)); width: 0; transition: width .8s ease; }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--magenta); color: #fff; font-size: 12px; font-weight: 800; text-align: center; margin-left: 6px; }
.account { text-align: center; color: var(--mut); font-size: 13px; margin: 14px 16px 0; }
.footer-link { text-align: center; margin: 10px 0 18px; font-size: 13px; }

/* mapas y modos */
.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.mapcard { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 8px; text-align: left; position: relative; }
.mapcard canvas { width: 100%; height: auto; border-radius: 8px; display: block; }
.mapcard .nm { font-weight: 800; margin-top: 6px; }
.mapcard .tier { font-size: 12px; color: var(--mut); }
.medals { display: flex; gap: 3px; margin-top: 4px; }
.medal { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #0a0f1e; background: #1a2440; }
.medal.on { box-shadow: 0 0 8px currentColor; }
.mapcard.locked { opacity: .55; }
.mapcard .lock { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; background: rgba(10,15,30,.55); border-radius: 14px; text-align: center; padding: 10px; }
.modes { display: grid; gap: 10px; }
.mode { text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 12px 14px; }
.mode b { font-size: 17px; } .mode .l { color: var(--mut); font-size: 13px; }
.mode.sel { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon) inset; }
.heroes { display: flex; gap: 10px; flex-wrap: wrap; }
.hero { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 8px 12px; display: flex; gap: 8px; align-items: center; min-height: 52px; }
.hero.sel { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta) inset; }

/* partida: una rejilla. Vertical: HUD, tira, mapa, tienda y controles (la tienda encima de ▶: entre el mapa y ▶ hay
   una fila entera). La casilla sale del hueco que deja todo lo demás, así que cada píxel de bandeja cuenta. */
#scr-game { background: var(--bg); }
#scr-game.on { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "hud" "strip" "stage" "shop" "ctrl"; }
.hud { grid-area: hud; contain: layout paint; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 10px; background: var(--bg2); border-bottom: 1px solid var(--line); min-width: 0; }
.hud .st { display: flex; align-items: center; gap: 5px; white-space: nowrap; min-width: 0; font: 700 16px var(--mono); font-variant-numeric: tabular-nums; }
.hud .st.integ { color: var(--core); } .hud .st.cr { color: var(--amber); position: relative; } .hud .st.rnd { color: var(--text); flex: 1; justify-content: center; font-size: 15px; overflow: hidden; }
.hud .debt { color: var(--danger); font-size: 13px; }
.hud .iconbtn { width: 44px; height: 44px; font-size: 17px; flex: none; border-radius: 10px; }
.cfloat { will-change: transform, opacity; position: absolute; left: calc(100% + 4px); top: 0; font: 800 14px var(--mono); color: var(--amber); pointer-events: none; animation: rise .9s ease-out forwards; text-shadow: 0 0 6px rgba(255,176,32,.6); }
@keyframes rise { from { opacity: 1; transform: translateY(8px); } to { opacity: 0; transform: translateY(-10px); } }
.strip { grid-area: strip; height: 24px; padding: 0 10px; font-size: 13px; background: #0c1630; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; overflow: hidden; white-space: nowrap; min-width: 0; }
.strip .chip { display: inline-flex; align-items: center; gap: 3px; flex: none; } .strip canvas { vertical-align: middle; }
.strip .nw { color: var(--amber); font-weight: 700; margin-left: 2px; } .strip .more { color: var(--mut); flex: none; }
.stage { grid-area: stage; contain: strict; position: relative; min-height: 0; min-width: 0; touch-action: none; overflow: hidden; }
.stage > canvas { position: absolute; left: 0; top: 0; }
.stage > canvas.bg { pointer-events: none; }
.trayin { grid-area: shop; background: var(--bg2); border-top: 1px solid var(--line); min-width: 0; min-height: 0; }
.ctrl { grid-area: ctrl; display: flex; gap: 6px; align-items: center; padding: 2px 8px; min-height: 64px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: var(--bg2); min-width: 0; }
.ctrl::-webkit-scrollbar { display: none; }
.ctrl.more { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); }
.ctrl .btn { flex: none; }
.ctrl .go { min-width: 64px; font-size: 20px; }
.ctrl .tog.on { border-color: var(--neon); color: var(--neon); }
.ctrl .abils { display: contents; }
.abil { position: relative; width: 56px; height: 60px; flex: none; border: none; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.abil .ic { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; font-size: 18px; }
.abil .ic svg { position: absolute; inset: -3px; width: 48px; height: 48px; transform: rotate(-90deg); pointer-events: none; }
.abil.ready .ic { border-color: var(--magenta); box-shadow: 0 0 12px rgba(255,61,203,.6); }
.abil .lb { font-size: 12px; line-height: 14px; color: var(--mut); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abil.ready .lb { color: var(--text); }
.abil .n { position: absolute; right: -4px; top: -4px; font-size: 12px; background: var(--magenta); border-radius: 8px; padding: 0 4px; }
/* tienda: una fila con desplazamiento (y un degradado si hay más), o 2 × 5 si sobra alto */
.shop { display: flex; gap: 6px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; }
.shop::-webkit-scrollbar { display: none; }
.shop.more { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.shop .card { flex: 0 0 72px; }
.card { height: 70px; min-width: 0; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px; position: relative; }
.card canvas { width: 30px !important; height: 30px !important; }
.card .nm { font-size: 13px; font-weight: 700; line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .pr { font: 700 13px var(--mono); color: var(--amber); }
.card.poor .pr { color: var(--danger); } .card.poor { opacity: .6; }
.card.lock { opacity: .4; } .card.lock .pr { color: var(--mut); }
.card.sel { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon) inset, 0 0 12px rgba(0,229,255,.4); }
.card.hero { border-color: #6a2a6a; }
/* panel de torre: en vertical, hoja sobre el mapa (play.js la coloca); en horizontal, en la columna */
.sheet { position: absolute; z-index: 8; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 0 28px rgba(0,0,0,.65); }
.panel { padding: 6px 8px 8px; }
.ph { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ph .nmb { flex: 1; min-width: 96px; display: flex; flex-direction: column; line-height: 1.15; }
.ph .nm { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph .x { font: 700 13px var(--mono); color: var(--mut); white-space: nowrap; }
.ph .btn.small { padding: 4px 8px; white-space: nowrap; font-size: 14px; flex: none; }
.ph .btn.sell { border-color: var(--danger); }
.ph .iconbtn { width: 44px; height: 44px; flex: none; }
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.pathc { border: 1px solid var(--line); border-radius: 10px; padding: 5px 6px; background: var(--panel); display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.pathc .pn { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pips { display: flex; gap: 3px; } .pip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; } .pip.on { background: currentColor; }
.pathc .un { font-size: 14px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.pathc .cost { margin-top: auto; font: 700 14px var(--mono); color: var(--amber); }
.pathc.poor .cost { color: var(--danger); } .pathc.blocked { opacity: .55; } .pathc.armed { border-color: var(--core); box-shadow: 0 0 0 1px var(--core) inset; }
.pathc.blocked.armed { opacity: .8; }
.pathc.done .cost { color: var(--core); }
.desc { font-size: 14px; line-height: 1.3; min-height: 2.6em; margin-top: 6px; color: var(--mut); }
.desc b { font-weight: 800; }
.stats { display: flex; gap: 2px 10px; flex-wrap: wrap; font-size: 13px; color: var(--mut); margin-top: 4px; }
.stats b { color: var(--text); font-family: var(--mono); }

/* capas sobre el mapa */
.confirm { position: absolute; display: flex; gap: 8px; z-index: 9; }
.confirm button { width: 44px; height: 44px; border-radius: 50%; font-size: 20px; font-weight: 900; border: 2px solid; }
.confirm .ok { background: #0d3a24; border-color: var(--core); color: var(--core); }
.confirm .no { background: #3a0d14; border-color: var(--danger); color: var(--danger); }
/* tutorial y avisos: en el borde del mapa contrario a la entrada de la ruta (.dtop = arriba) */
.notice { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: min(92%, 400px); background: rgba(17,28,54,.86); border: 1px solid var(--amber); border-radius: 12px; padding: 4px 10px; font-size: 14px; display: flex; gap: 10px; align-items: center; z-index: 6; animation: drop .25s ease; pointer-events: none; }
.notice .t { font-weight: 800; } .notice .d { font-size: 13px; color: var(--mut); line-height: 1.2; }
.notice.up { bottom: 76px; }
.stage.dtop .notice { bottom: auto; top: 6px; } .stage.dtop .notice.up { top: 76px; }
@keyframes drop { from { transform: translate(-50%, -20px); opacity: 0; } }
.tut { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: min(94%, 440px); background: rgba(0,24,40,.94); border: 1px solid var(--neon); border-radius: 14px; padding: 6px 8px 6px 12px; z-index: 7; display: flex; gap: 10px; align-items: center; box-shadow: 0 0 20px rgba(0,229,255,.3); pointer-events: none; }
.stage.dtop .tut { bottom: auto; top: 8px; }
.tut.hide { display: none; }
.tut button { pointer-events: auto; }
.tut .txt { flex: 1; font-weight: 700; }
.pulse { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(0,229,255,.55), 0 0 18px rgba(0,229,255,.7); } }
.bossbar { position: absolute; left: 10px; right: 10px; top: 6px; z-index: 4; pointer-events: none; }
.bossbar .nm { font: 800 13px var(--mono); color: var(--danger); text-shadow: 0 0 8px #000; }
.bossbar .bar { height: 10px; position: relative; } .bossbar .bar > i { background: linear-gradient(90deg, #ff2e4d, #ff8a3d); transition: width .15s; }
.bossbar .mk { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff8; }
/* avisos sueltos: en #app, fuera de las pantallas; con un diálogo abierto bajan al pie para no tapar su título */
.toast { position: absolute; left: 50%; top: calc(var(--safe-t) + 120px); transform: translateX(-50%); background: rgba(17,28,54,.96); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; z-index: 30; max-width: 90%; text-align: center; font-weight: 700; animation: drop .2s ease; pointer-events: none; }
.toast.imp { border-color: var(--amber); }
#app:has(.modal) > .toast { top: auto; bottom: calc(var(--safe-b) + 16px); }
.warn { max-width: 420px; margin: 12px auto 0; padding: 8px 12px; border: 1px solid var(--amber); border-radius: 12px; background: #2a1d05; color: #ffd27a; font-size: 14px; text-align: left; }
.box .warn { margin: 6px 0 4px; }
.big-text { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font: 900 26px var(--sans); letter-spacing: .04em; text-shadow: 0 0 18px var(--neon), 0 2px 0 #000; z-index: 6; pointer-events: none; animation: pop 1.8s ease forwards; }
.big-text .sub { font: 800 16px var(--mono); color: var(--amber); letter-spacing: 0; text-shadow: 0 0 10px rgba(255,176,32,.6), 0 2px 0 #000; margin-top: 4px; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 20% { transform: scale(1.08); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
/* modales */
.modal { position: absolute; inset: 0; background: rgba(4,8,18,.78); display: grid; place-items: center; z-index: 20; padding: 16px; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.box { width: min(100%, 440px); max-height: 92vh; max-height: 92dvh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.box h2 { margin-bottom: 8px; }
.box .actions { display: grid; gap: 8px; margin-top: 14px; position: sticky; bottom: -18px; background: var(--panel); padding: 8px 0 18px; }
.sticky-go { position: sticky; bottom: 0; padding: 8px 0 calc(8px + var(--safe-b)); background: linear-gradient(transparent, var(--bg) 30%); }
.end-title { font: 900 26px var(--sans); text-align: center; letter-spacing: .03em; }
.end-title.win { color: var(--core); text-shadow: 0 0 18px rgba(57,255,136,.5); } .end-title.lose { color: var(--danger); }
.bigmedal { width: 96px; height: 96px; margin: 8px auto; border-radius: 50%; display: grid; place-items: center; font-size: 42px; animation: spin 1.2s ease; }
@keyframes spin { from { transform: rotateY(540deg) scale(.4); } }
.list { display: grid; gap: 8px; }
.item { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.item .t { font-weight: 800; } .item .d { font-size: 13px; color: var(--mut); }
.item.off { opacity: .45; }
.kernel { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; overflow-x: auto; }
.kcol { display: flex; flex-direction: column; gap: 6px; }
.kcol h3 { font-size: 13px; text-align: center; color: var(--neon); }
.knode { min-height: 64px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 6px; font-size: 12px; text-align: left; }
.knode.on { border-color: var(--core); background: #0d2a1c; } .knode.can { border-color: var(--neon); } .knode .c { font: 700 12px var(--mono); color: var(--amber); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); min-height: 52px; }
.setrow input[type=range] { width: 46%; height: 44px; accent-color: var(--neon); }
.switch { width: 60px; height: 44px; border: none; background: none; position: relative; flex: none; }
.switch::before { content: ''; position: absolute; left: 4px; top: 7px; width: 52px; height: 30px; border-radius: 16px; border: 1px solid var(--line); background: #0b1428; box-sizing: border-box; }
.switch::after { content: ''; position: absolute; left: 8px; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--mut); transition: left .15s, background .15s; }
.switch.on::before { border-color: var(--neon); } .switch.on::after { left: 30px; background: var(--neon); }
.small { font-size: 13px; }

/* Vertical alto (≥ 800 px, p. ej. 390×844): la tienda cabe en 2 × 5 sin quitarle casilla al mapa por debajo de 28 px */
@media (orientation: portrait) and (min-height: 800px) and (max-aspect-ratio: 5/9) {
  .shop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Vertical bajo (iPhone SE, Safari con barras, 360×640…): el alto es lo que falta, así que ▶, velocidad, Auto y las
   habilidades pasan a una columna a la derecha del mapa, en el hueco que dejaba a los lados */
@media (orientation: portrait) and (min-aspect-ratio: 5/9) {
  #scr-game.on { grid-template-columns: minmax(0, 1fr) 60px; grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "hud hud" "strip strip" "stage ctrl" "shop shop"; }
  .ctrl { flex-direction: column; padding: 6px 4px; min-height: 0; overflow-x: hidden; overflow-y: auto; border-left: 1px solid var(--line); }
  .ctrl.more { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
  .ctrl .btn { width: 52px; min-width: 0; padding: 0; } .ctrl .go { min-width: 0; min-height: 52px; }
  .ctrl .tog { font-size: 14px; }
  .abil { width: 52px; }
}
/* Horizontal (móvil girado y escritorio): mapa a la izquierda y, a la derecha, una columna con el HUD, la tira, los
   controles y la tienda o el panel. El mapa es 12 × 18: en horizontal manda el alto (alto / 18). */
@media (orientation: landscape) {
  #scr-game.on { --side: clamp(280px, calc(100vw - 66.7vh), 420px); grid-template-columns: minmax(0, 1fr) var(--side);
    grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "stage hud" "stage strip" "stage ctrl" "stage shop"; }
  .hud, .strip, .ctrl, .trayin { border-left: 1px solid var(--line); }
  .trayin { border-top: none; overflow-y: auto; }
  .shop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .card { height: 64px; } .card .nm { white-space: normal; overflow-wrap: anywhere; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .logo { margin: 8px 0 0; } .logo canvas { width: min(60vw, 360px); }
}
@media (orientation: landscape) and (min-height: 700px) {
  .card { height: 76px; }
  .ctrl { flex-wrap: wrap; overflow: visible; padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.rm * { animation-duration: .01ms !important; }
/* Kernel en móvil: ramas una debajo de otra, cada una en rejilla de 3 */
@media (max-width: 700px) {
  .kernel { grid-template-columns: 1fr; overflow-x: visible; }
  .kcol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .kcol h3 { grid-column: 1 / -1; text-align: left; margin-top: 6px; }
}