/* ==========================================================================
   skins/cards-compactos.css — the launcher's menu (THE menu since 25/set/2026)
   The launcher's apps as a game select screen: small tiles in groups + ONE
   detail sheet that follows the tile under the mouse / in focus / tapped.
   Markup is built by skins/cards-compactos.js inside #kc. It only exists with
   html[data-cards="compacto"]; the old grid stays in the page, just hidden.
   Pink shows up only on the picked tile and on its Abrir button, so it moves
   with the choice. Base look = the classic dark cards (also fits Arcade); the
   Caderno skin (official) gets its paper version in section 4.
   ========================================================================== */

/* ─── 1. the stage: roster on the left, one detail sheet on the right ─── */
html[data-cards="compacto"] main > .cards { display:none; }
/* the menu sits right under the scoreboard: centred in the height, a big screen left it floating far below */
html[data-cards="compacto"] main { justify-content:flex-start; padding-top:1.9rem; }

.kc {
  width:100%; max-width:900px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) clamp(300px, 38%, 368px);
  gap:30px; align-items:start;
}
.kc [hidden] { display:none !important; }
.kc-roster { display:flex; flex-direction:column; gap:22px; min-width:0; padding-top:2px; }
.kc-group { min-width:0; }
.kc-label {
  display:inline-block; margin:0 0 25px 2px; /* room for a "parou aqui" flag on the tile below */
  font-family:'Angela Notes','Caveat',cursive; font-weight:600; font-size:1.08rem; line-height:1;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);
}
/* 4 per row on every wide screen: more apps just add rows (20 apps = 5 rows) */
.kc-grid {
  position:relative; /* offsetLeft of the tiles = notch position on phones */
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px;
}
@media (max-width:900px) {
  .kc { grid-template-columns:minmax(0,1fr) clamp(280px, 38%, 368px); }
  .kc-grid { gap:12px; }
  .kc-cat { font-size:.74rem; letter-spacing:.02em; }
}

/* ─── 2. tiles (base = classic dark card in miniature) ─── */
.kc-tile {
  position:relative; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:7px; padding:7px 7px 11px;
  color:#F0EDE5; text-decoration:none; background:#1b1917;
  border:1.5px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .18s cubic-bezier(.3,1.3,.5,1), box-shadow .18s ease, border-color .18s ease;
}
.kc-tile.is-sel { z-index:1; transform:translateY(-4px); border-color:var(--pink); box-shadow:var(--shadow-md); }
.kc-tile:focus-visible { outline:3px solid var(--pink); outline-offset:3px; }
/* the art window: empty at rest, painted when picked (marker swipe, left → right) */
.kc-win {
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; place-items:center; width:100%; aspect-ratio:5 / 4;
  border-radius:10px; background:#262321;
}
.kc-win::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background-color:#FF2D6E;
  background-image:linear-gradient(rgba(0,0,0,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.10) 1px,transparent 1px);
  background-size:13px 13px;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .22s cubic-bezier(.4,0,.2,1);
}
.kc-tile.is-sel .kc-win::before { clip-path:inset(0 0 0 0); }
.kc-tile--saga .kc-win::before { background-color:#5865F2; }
.kc-art { width:56%; height:auto; overflow:visible; color:#A9A398; transition:color .18s ease; }
.kc-tile--saga .kc-art { width:44%; }
.kc-tile.is-sel .kc-art { color:#fff; }
.kc-name {
  max-width:100%; font-size:1.32rem; line-height:1; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:2px 2px 0;
}
/* the category is a pencil note under the name: true weight, quieter */
.kc-cat {
  max-width:100%; margin-top:-2px; font-size:.8rem; font-weight:400; line-height:1; letter-spacing:.06em; color:#A9A398;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* "em breve" / "novo" stamp on the window, "parou aqui" flag on the corner */
.kc-badge {
  position:absolute; left:5px; top:5px; z-index:1; transform:rotate(-5deg);
  background:#FFB800; color:#161413; border:1px solid rgba(0,0,0,.2); border-radius:6px; padding:3px 6px;
  font:800 .56rem/1 'Poppins',system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 2px 0 rgba(0,0,0,.25); white-space:nowrap;
}
.kc-badge.is-new, .kc-d-badge-soon.is-new { background:#4ADE80; }
.kc-flag {
  position:absolute; top:-10px; right:-6px; z-index:2; transform:rotate(5deg);
  background:var(--yellow); color:#161413; border-radius:6px; padding:4px 8px 2px;
  font-size:.84rem; line-height:1; white-space:nowrap; pointer-events:none;
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}
.kc-sr {
  position:absolute; width:1px; height:1px; overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}

/* doodle strokes (tile + detail share the drawings) */
.kc-art *, .kc-d-art * { fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.kc-art .kc-fill, .kc-art .kc-solid, .kc-d-art .kc-solid { fill:currentColor; stroke:none; }
.kc-d-art .kc-fill, .kc-tile.is-sel .kc-art .kc-fill { fill:#161413; stroke:none; }
.kc-art .kc-thin, .kc-d-art .kc-thin { stroke-width:2.6; opacity:.6; }
.kc-art .kc-bold, .kc-d-art .kc-bold { stroke-width:6.5; }
.kc-art .kc-guide, .kc-d-art .kc-guide { stroke-width:2.4; stroke-dasharray:4.5 4.5; opacity:.45; }
.kc-d-art .kc-guide, .kc-tile.is-sel .kc-art .kc-guide { stroke:#161413; opacity:.5; }
.kc-d-art .kc-dark, .kc-tile.is-sel .kc-art .kc-dark { stroke:#161413; }
.kc-art .kc-box, .kc-d-art .kc-box { stroke-width:6.5; }
.kc-art .kc-hidden, .kc-d-art .kc-hidden { stroke-width:3; stroke-dasharray:5 6; opacity:.55; }
.kc-art .kc-letter, .kc-d-art .kc-letter { fill:currentColor; stroke:none; font:900 30px 'Arial Black',Arial,sans-serif; }

/* ─── 3. the detail sheet (base = classic dark card) ─── */
.kc-detail {
  position:sticky; top:16px; min-width:0;
  /* steady frame: as tall as its tallest app (measured by the JS), so the
     page never jumps while hovering and the Abrir button never moves */
  display:flex; flex-direction:column; min-height:var(--kc-min-h, 0px);
  background:#1b1917; color:#F0EDE5;
  border:1.5px solid var(--border); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-md);
}
.kc-tape { display:none; }
.kc-d-head {
  position:relative; height:150px; display:grid; place-items:center; overflow:hidden;
  background-color:#FF2D6E;
  background-image:linear-gradient(rgba(0,0,0,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.10) 1px,transparent 1px);
  background-size:26px 26px;
}
.kc-detail.is-saga .kc-d-head { background-color:#5865F2; }
.kc-d-art { width:104px; height:104px; color:#fff; overflow:visible; filter:drop-shadow(0 2px 0 rgba(0,0,0,.22)); }
.kc-d-head > .saga-head-logo { width:74px; height:74px; }
/* the pick draws itself: strokes first, ink fills after */
.kc-d-art [pathLength] { stroke-dasharray:100; stroke-dashoffset:100; animation:kcDraw .46s cubic-bezier(.45,0,.2,1) forwards; }
.kc-d-art [pathLength]:nth-child(2) { animation-delay:.1s; }
.kc-d-art [pathLength]:nth-child(3) { animation-delay:.18s; }
.kc-d-art [pathLength]:nth-child(4) { animation-delay:.24s; }
.kc-d-art .kc-fill, .kc-d-art .kc-solid, .kc-d-art .kc-letter { opacity:0; animation:kcInk .22s ease-out .4s forwards; }
/* the Box's hidden edges (dashed) show up once the box is drawn (~0.5 s) */
.kc-d-art .kc-hidden { opacity:0; animation:kcGhost .2s ease-out .36s forwards; }
@keyframes kcDraw { to { stroke-dashoffset:0; } }
@keyframes kcInk { to { opacity:1; } }
@keyframes kcGhost { to { opacity:.55; } }
.kc-d-badge {
  position:absolute; left:12px; top:12px; width:38px; height:38px;
  display:grid; place-items:center; background:#fff; border-radius:11px;
  box-shadow:0 3px 0 rgba(0,0,0,.18);
}
.kc-d-badge b { font:900 1.25rem/1 'Arial Black',Arial,sans-serif; color:var(--pink); }
.kc-d-badge-soon {
  position:absolute; left:12px; top:11px; transform:rotate(-4deg);
  background:#FFB800; color:#161413; border:1.5px solid rgba(0,0,0,.22); border-radius:10px; padding:5px 11px;
  font:800 .7rem/1 'Poppins',system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 4px 0 rgba(0,0,0,.28);
}
.kc-d-chip {
  position:absolute; right:12px; bottom:11px; transform:rotate(-3deg);
  display:inline-flex; align-items:center; gap:6px;
  background:#161413; color:#fff; border:1.5px solid rgba(255,255,255,.16); border-radius:10px; padding:5px 12px;
  font:800 .72rem/1 'Poppins',system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 4px 0 rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.28);
}
.kc-d-chip svg { width:13px; height:13px; flex:0 0 auto; }
.kc-d-last {
  position:absolute; right:12px; top:10px; transform:rotate(4deg);
  background:var(--yellow); color:#161413; border-radius:8px; padding:4px 11px 2px;
  font-size:.98rem; line-height:1.1; box-shadow:0 3px 0 rgba(0,0,0,.22);
}
.kc-d-body { flex:1 1 auto; display:flex; flex-direction:column; gap:.55rem; padding:1.15rem 1.35rem 1.35rem; }
.kc-d-head { flex:0 0 auto; }
.kc-d-intro { min-width:0; }
.kc-d-name { font-size:2.15rem; line-height:.9; color:#F0EDE5; }
.kc-d-name .sub { font-family:'Angela Notes','Caveat',cursive; font-weight:600; font-size:1.45rem; color:var(--pink); }
.kc-detail.is-saga .kc-d-name .sub { color:#8B94FF; }
.kc-d-cat { display:none; }
.kc-d-pitch { margin-top:.55rem; font-size:.9rem; line-height:1.45; color:#B8B3A8; }
.kc-d-facts { list-style:none; margin:.2rem 0 .35rem; }
.kc-d-facts li {
  display:flex; align-items:center; gap:10px; padding:.5rem 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.86rem; font-weight:600; line-height:1.3; color:#F0EDE5;
}
.kc-d-facts li:last-child { border-bottom:1px solid rgba(255,255,255,.08); }
.kc-d-ico { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:#A9A398; }
.kc-d-note { font-size:.84rem; line-height:1.4; color:#FFC34D; }
.kc-d-status { display:flex; align-items:center; gap:8px; font-size:.84rem; color:rgba(246,242,233,.62); }
.kc-d-status b { color:#F6F2E9; font-weight:700; }
.kc-d-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--green); box-shadow:0 0 8px var(--green); }
.kc-d-unlink {
  margin-left:auto; padding:0; background:none; border:none; cursor:pointer; flex:0 0 auto;
  color:rgba(246,242,233,.5); font:inherit; font-size:.8rem; text-decoration:underline; text-underline-offset:2px;
}
.kc-d-unlink:hover { color:var(--pink); }
.kc-d-unlink:disabled { opacity:.5; cursor:default; }
/* today's training (Treino do dia) falls on this app: a note right above Abrir; tapping it opens the training */
.kc-d-hoje {
  display:flex; align-items:center; gap:8px; width:100%; margin:0; padding:.5rem .7rem; cursor:pointer; text-align:left;
  font:inherit; font-size:.84rem; line-height:1.3; color:#F0EDE5;
  background:rgba(255,210,63,.1); border:1.5px dashed rgba(255,210,63,.6); border-radius:10px;
}
.kc-d-hoje-txt { min-width:0; }
.kc-d-hoje b { font-weight:800; }
.kc-d-hoje .kc-d-ico { color:#FFD23F; }
.kc-d-hoje-min { color:rgba(246,242,233,.6); white-space:nowrap; }
.kc-d-hoje:hover { border-style:solid; }
.kc-d-hoje:focus-visible { outline:2px solid #FFD23F; outline-offset:2px; }
.kc-d-cta {
  align-self:flex-start; margin-top:auto; /* pinned to the bottom of the sheet */
  display:inline-flex; align-items:center; gap:9px;
  background:#D11857; color:#fff; text-decoration:none;
  font-weight:800; font-size:.88rem; letter-spacing:.06em; text-transform:uppercase;
  border-radius:12px; padding:.74rem 1.35rem; box-shadow:0 4px 0 #8E1140;
  transition:transform .1s ease, box-shadow .1s ease, filter .12s ease;
}
.kc-d-cta svg { width:15px; height:15px; flex:0 0 auto; }
.kc-d-cta:hover { filter:brightness(1.08); }
.kc-d-cta:active { transform:translateY(3px); box-shadow:0 1px 0 #8E1140; }
.kc-d-cta:focus-visible, .kc-d-unlink:focus-visible { outline:3px solid var(--pink); outline-offset:3px; border-radius:12px; }
/* the Saga is community, not a tool: Discord blue, like its old card */
.kc-d-cta.is-saga { background:#5865F2; box-shadow:0 4px 0 #3C45A5; }
.kc-d-cta.is-saga:active { box-shadow:0 1px 0 #3C45A5; }

/* ─── 4. Caderno (official look): pencil sketches on index cards; the pink
   marker colors in the one you pick. Tape labels, a taped sheet, a vinyl
   sticker button. Paper does not glow. ─── */
html[data-skin="caderno"] .kc-label {
  position:relative; z-index:0; margin:0 0 25px 4px; padding:6px 15px 3px;
  color:#3B3226; font-size:1.06rem; transform:rotate(-1.2deg);
  filter:drop-shadow(0 1px 1.5px rgba(90,70,40,.28));
}
/* masking tape with torn ends (clip on ::before so the shadow survives) */
html[data-skin="caderno"] .kc-label::before {
  content:''; position:absolute; inset:0; z-index:-1; background-color:rgba(238,223,184,.97);
  clip-path:polygon(0 12%, 3% 0, 97% 5%, 100% 22%, 98.5% 58%, 100% 88%, 96% 100%, 2.5% 95%, 1% 62%);
}
html[data-skin="caderno"] .kc-group:nth-of-type(2) .kc-label { transform:rotate(.8deg); }
html[data-skin="caderno"] .kc-group:nth-of-type(3) .kc-label { transform:rotate(-.5deg); }
html[data-skin="caderno"].dark .kc-label { color:#2B2520; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }
html[data-skin="caderno"].dark .kc-label::before { background-color:rgba(221,200,152,.93); }

html[data-skin="caderno"] .kc-tile {
  color:var(--ink); background:var(--paper);
  border:1px solid rgba(120,98,62,.30);
  border-radius:9px 12px 10px 13px / 12px 9px 13px 10px;
  box-shadow:0 1px 0 rgba(90,70,40,.05), 0 4px 10px rgba(90,70,40,.10);
  transform:rotate(var(--kc-tilt, 0deg));
}
html[data-skin="caderno"].dark .kc-tile {
  border-color:rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 4px 12px rgba(0,0,0,.4);
}
/* picking it up: lifts and straightens (papers never glow, never outline pink) */
html[data-skin="caderno"] .kc-tile.is-sel {
  transform:translateY(-6px) rotate(0deg);
  border-color:rgba(120,98,62,.30); box-shadow:var(--shadow-md);
}
html[data-skin="caderno"].dark .kc-tile.is-sel { border-color:rgba(0,0,0,.55); }
html[data-skin="caderno"] .kc-tile:focus-visible { outline:2.5px dashed var(--pink); outline-offset:5px; }
/* the thumbnail box: a pencil frame on the card */
html[data-skin="caderno"] .kc-win {
  background:transparent; border:1.5px solid rgba(43,37,32,.40);
  border-radius:6px 9px 7px 10px / 9px 6px 10px 7px;
  transition:border-color .18s ease;
}
html[data-skin="caderno"].dark .kc-win { border-color:rgba(241,234,218,.28); }
html[data-skin="caderno"] .kc-tile.is-sel .kc-win { border-color:var(--ink); }
html[data-skin="caderno"].dark .kc-tile.is-sel .kc-win { border-color:rgba(0,0,0,.6); }
html[data-skin="caderno"] .kc-win::before {
  background-color:#FF447B; background-size:auto;
  background-image:repeating-linear-gradient(var(--kc-hatch, -45deg), rgba(0,0,0,.05) 0 3px, transparent 3px 11px);
}
html[data-skin="caderno"].dark .kc-win::before { background-color:#DC2A60; }
html[data-skin="caderno"] .kc-tile--saga .kc-win::before { background-color:#5865F2; background-image:none; }
html[data-skin="caderno"] .kc-art { color:var(--ink-soft); }
html[data-skin="caderno"] .kc-tile.is-sel .kc-art { color:#FFFDF4; }
html[data-skin="caderno"] .kc-cat { color:var(--muted); }
html[data-skin="caderno"] .kc-badge { border-radius:3px 7px 4px 8px; }
html[data-skin="caderno"] .kc-flag {
  top:-8px; right:-7px; border-radius:2px 9px 3px 10px;
  box-shadow:2px 3px 0 rgba(43,37,32,.3);
}

/* the detail = one big taped sheet, cut by hand */
html[data-skin="caderno"] .kc-detail {
  --kc-cut:16px 235px 18px 250px / 245px 16px 230px 18px;
  overflow:visible; background:#FFFDF4; color:var(--ink);
  border:1px solid rgba(120,98,62,.32); border-radius:var(--kc-cut);
  box-shadow:0 2px 0 rgba(90,70,40,.06), 0 10px 24px rgba(90,70,40,.14);
  transform:rotate(.4deg);
  animation:kcSettle .5s cubic-bezier(.3,1.18,.36,1) .1s both;
}
html[data-skin="caderno"].dark .kc-detail {
  background:#221F1C; border-color:rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 12px 30px rgba(0,0,0,.5);
}
@keyframes kcSettle { from { opacity:0; transform:translateY(-10px) rotate(1.6deg); } }
html[data-skin="caderno"] .kc-tape {
  display:block; position:absolute; top:-10px; left:54%; z-index:3; width:92px; height:26px;
  transform:translateX(-50%) rotate(-3deg); pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(90,70,40,.3));
}
html[data-skin="caderno"] .kc-tape::before {
  content:''; position:absolute; inset:0; background-color:rgba(255,214,110,.96);
  clip-path:polygon(2% 0, 98% 4%, 100% 12%, 97% 100%, 3% 96%, 0 88%, 1% 10%);
}
html[data-skin="caderno"].dark .kc-tape { filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
/* the "você parou aqui" flag took the right side: the tape moves over */
html[data-skin="caderno"] .kc-detail.has-last .kc-tape { left:36%; transform:translateX(-50%) rotate(2.5deg); }
html[data-skin="caderno"].dark .kc-tape::before { background-color:rgba(255,196,70,.97); }
html[data-skin="caderno"] .kc-d-head {
  background-color:#FF447B; background-size:auto;
  background-image:repeating-linear-gradient(var(--kc-hatch, -45deg), rgba(0,0,0,.05) 0 3px, transparent 3px 11px);
  border-bottom:2px solid var(--ink);
  border-radius:var(--kc-cut); border-bottom-left-radius:0; border-bottom-right-radius:0;
}
html[data-skin="caderno"].dark .kc-d-head { background-color:#DC2A60; }
html[data-skin="caderno"] .kc-detail.is-saga .kc-d-head { background-color:#5865F2; background-image:none; }
html[data-skin="caderno"] .kc-d-art { color:#FFFDF4; filter:none; }
html[data-skin="caderno"] .kc-d-badge {
  width:34px; height:34px; border:2px solid var(--ink);
  border-radius:10px 12px 10px 13px / 12px 10px 13px 10px;
  box-shadow:0 0 0 3px #FFFDF4, 2px 3px 0 rgba(0,0,0,.22); transform:rotate(-3deg);
}
html[data-skin="caderno"].dark .kc-d-badge { box-shadow:0 0 0 3px rgba(241,234,218,.9), 2px 3px 0 rgba(0,0,0,.35); }
html[data-skin="caderno"] .kc-d-badge b { font-size:1.15rem; }
html[data-skin="caderno"] .kc-d-chip {
  background:#FFFDF4; color:var(--ink); border:1.6px dashed rgba(43,37,32,.72); box-shadow:none;
  border-radius:10px 12px 10px 13px / 12px 10px 13px 10px;
  font-family:'Angela Notes','Caveat',cursive; font-weight:600; font-size:1.02rem; letter-spacing:.04em;
  padding:3px 11px 2px; transform:rotate(-2deg);
}
html[data-skin="caderno"].dark .kc-d-chip { background:#221F1C; border-color:rgba(241,234,218,.6); }
html[data-skin="caderno"] .kc-d-last { top:9px; border-radius:2px 10px 4px 12px; box-shadow:2px 3px 0 rgba(43,37,32,.3); }
html[data-skin="caderno"] .kc-d-name { color:var(--ink); }
html[data-skin="caderno"] .kc-d-name .sub { color:#D11857; }
html[data-skin="caderno"].dark .kc-d-name .sub { color:#FF5C8D; }
html[data-skin="caderno"] .kc-detail.is-saga .kc-d-name .sub { color:#4752C4; }
html[data-skin="caderno"].dark .kc-detail.is-saga .kc-d-name .sub { color:#8B94FF; }
html[data-skin="caderno"] .kc-d-pitch { color:var(--ink-soft); }
/* the facts are written on the ruled lines of the sheet */
html[data-skin="caderno"] .kc-d-facts li { color:var(--ink); border-color:rgba(43,37,32,.10); }
html[data-skin="caderno"].dark .kc-d-facts li { border-color:rgba(241,234,218,.08); }
html[data-skin="caderno"] .kc-d-ico { color:var(--ink-soft); }
html[data-skin="caderno"] .kc-d-note { color:#8A5A00; }
html[data-skin="caderno"].dark .kc-d-note { color:#FFC34D; }
html[data-skin="caderno"] .kc-d-status { color:var(--ink-soft); }
html[data-skin="caderno"] .kc-d-status b { color:var(--ink); }
html[data-skin="caderno"] .kc-d-hoje { color:var(--ink); background:#FFF3C4; border-color:var(--ink); }
html[data-skin="caderno"] .kc-d-hoje .kc-d-ico { color:var(--ink); }
html[data-skin="caderno"] .kc-d-hoje-min { color:var(--muted); }
html[data-skin="caderno"].dark .kc-d-hoje { background:rgba(255,210,63,.1); border-color:rgba(255,210,63,.55); }
html[data-skin="caderno"].dark .kc-d-hoje .kc-d-ico { color:#FFD23F; }
html[data-skin="caderno"] .kc-d-dot { box-shadow:none; background:#3FA968; }
html[data-skin="caderno"].dark .kc-d-dot { background:#4ADE80; }
html[data-skin="caderno"] .kc-d-unlink { color:var(--muted); }
/* the vinyl sticker: the ONE pink-deep thing on the page (white on it passes AA) */
html[data-skin="caderno"] .kc-d-cta {
  border-radius:12px 14px 12px 15px / 14px 12px 14px 12px;
  transform:rotate(-.6deg); box-shadow:3px 4px 0 #8E1140;
}
html[data-skin="caderno"] .kc-d-cta:active { transform:rotate(-.6deg) translateY(3px); box-shadow:1px 1px 0 #8E1140; }
html[data-skin="caderno"] .kc-d-cta.is-saga { transform:none; box-shadow:3px 4px 0 #2D3486; }
html[data-skin="caderno"] .kc-d-cta.is-saga:active { transform:translateY(3px); box-shadow:1px 1px 0 #2D3486; }
html[data-skin="caderno"] .kc-d-cta:focus-visible,
html[data-skin="caderno"] .kc-d-unlink:focus-visible { outline:2.5px dashed var(--pink); outline-offset:3px; }
/* ─── 4a. the cards stand out on their own (25/set/2026, Lucas' pick after
   the green mat did not work): the rest of the page (score card, Desafio,
   Loja) is paper with an ink outline and a hard shadow, and the app cards
   were the only ones without it, so they melted into the page.
   Light = white index cards with the ink outline. Dark = the same outline in
   cream on a slightly lifted card. ─── */
html[data-skin="caderno"] .kc-tile {
  background:#FFFFFF; border:1.6px solid var(--ink); box-shadow:3px 4px 0 rgba(43,37,32,.2);
}
html[data-skin="caderno"] .kc-detail {
  background:#FFFFFF; border:1.8px solid var(--ink); box-shadow:5px 6px 0 rgba(43,37,32,.18);
}
html[data-skin="caderno"].dark .kc-tile {
  background:#282421; border-color:rgba(240,237,229,.82); box-shadow:3px 4px 0 rgba(0,0,0,.6);
}
html[data-skin="caderno"].dark .kc-tile.is-sel { border-color:#F0EDE5; box-shadow:5px 7px 0 rgba(0,0,0,.65); }
html[data-skin="caderno"].dark .kc-detail {
  background:#282421; border-color:rgba(240,237,229,.82); box-shadow:5px 6px 0 rgba(0,0,0,.6);
}

/* ─── 4b. locked (Box before the password): pencil grey, never pink ───
   Pink means "do this now"; a door that asks for a password is not that.
   The button turns into an ink outline with a padlock ("Tenho a senha").
   Unlocked, everything goes back to normal. */
.kc-tile.is-locked .kc-win::before, .kc-detail.is-locked .kc-d-head { background-color:#D9CFBC; }
html.dark .kc-tile.is-locked .kc-win::before, html.dark .kc-detail.is-locked .kc-d-head { background-color:#4A433B; }
html .kc-tile.is-locked.is-sel .kc-art, html .kc-detail.is-locked .kc-d-art { color:#2B2520; }
html.dark .kc-tile.is-locked.is-sel .kc-art, html.dark .kc-detail.is-locked .kc-d-art { color:#F0EDE5; }
.kc-tile.is-locked.is-sel { border-color:#8A8580; }
.kc-d-lock { display:none; width:15px; height:15px; flex:0 0 auto; }
.kc-detail.is-locked .kc-d-lock { display:inline-block; }
.kc-detail.is-locked .kc-d-arrow { display:none; }
.kc-detail.is-locked .kc-d-cta {
  background:transparent; color:#F0EDE5; border:1.6px solid #F0EDE5; box-shadow:none;
}
.kc-detail.is-locked .kc-d-cta:hover { filter:none; background:rgba(128,128,128,.10); }
.kc-detail.is-locked .kc-d-cta:active { transform:translateY(2px); box-shadow:none; }
html[data-skin="caderno"] .kc-detail.is-locked .kc-d-cta {
  color:var(--ink); border-color:var(--ink); box-shadow:2px 3px 0 rgba(43,37,32,.18);
}
html[data-skin="caderno"].dark .kc-detail.is-locked .kc-d-cta { box-shadow:2px 3px 0 rgba(0,0,0,.4); }
html[data-skin="caderno"] .kc-detail.is-locked .kc-d-cta:active { transform:rotate(-.6deg) translateY(2px); box-shadow:none; }

/* ─── 4c. wide screens: what it is and the Abrir button first, the facts
   after, and a shorter header, so a laptop (1366×657) sees the sentence
   and the button without scrolling (measured: button ends at ~648 px) ─── */
/* every width: name and sentence, then the Abrir button, the facts after
   (on a phone this puts the button of the "parou aqui" app on the first screen) */
.kc-d-intro { order:0; }
.kc-d-note, .kc-d-status, .kc-d-hoje { order:1; }
.kc-d-cta { order:2; }
.kc-d-facts { order:3; }
@media (min-width:760px) {
  /* meio-termo (25/set): nem boiando longe do placar, nem colado nele; cresce com a altura da tela */
  html[data-cards="compacto"] main { padding-top:clamp(1.5rem, 5vh, 3.25rem); }
  .kc-d-head { height:84px; }
  .kc-d-art { width:60px; height:60px; }
  .kc-d-head > .saga-head-logo { width:48px; height:48px; }
  .kc-d-body { gap:.45rem; padding-top:.8rem; }
  .kc-d-name { font-size:2rem; }
  .kc-d-pitch { margin-top:.3rem; min-height:2.9em; } /* 2 lines kept: the button never moves */
  .kc-d-cta { margin-top:0; padding-top:.64rem; padding-bottom:.64rem; }
  .kc-d-facts { margin-top:.6rem; }
}

/* ─── 5. tablet and phone: the sheet drops in right under the picked row ─── */
@media (max-width:759.98px) {
  .kc { grid-template-columns:minmax(0,1fr); gap:0; }
  .kc-grid { grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:12px; }
  .kc-detail {
    grid-column:1 / -1; position:relative; top:auto; margin:8px 0 2px;
    display:grid; grid-template-columns:92px minmax(0,1fr); column-gap:14px; align-items:start;
    padding:12px; overflow:visible;
    /* scrolled into view with room to spare: the Abrir button must clear the
       fixed corner button (Reportar bug) */
    scroll-margin:16px 0 76px;
    animation:kcOpen .22s cubic-bezier(.3,1.1,.4,1) both;
  }
  html[data-skin="caderno"] .kc-detail {
    --kc-cut:12px 180px 14px 190px / 150px 12px 160px 14px;
    transform:none; animation:kcOpen .22s cubic-bezier(.3,1.1,.4,1) both;
  }
  .kc-d-head, html[data-skin="caderno"] .kc-d-head {
    grid-column:1; grid-row:1; width:92px; height:92px;
    border-radius:12px 14px 12px 15px / 14px 12px 15px 12px; border-bottom:none;
  }
  html[data-skin="caderno"] .kc-d-head { border:2px solid var(--ink); }
  .kc-d-body { display:contents; }
  .kc-d-intro { grid-column:2; grid-row:1; align-self:center; }
  .kc-d-facts, .kc-d-note, .kc-d-status, .kc-d-hoje, .kc-d-cta { grid-column:1 / -1; }
  .kc-d-facts { margin:12px 0 2px; }
  .kc-d-note, .kc-d-status, .kc-d-hoje { margin-top:8px; }
  .kc-d-cta { margin-top:12px; justify-self:start; padding:.8rem 1.5rem; }
  html[data-skin="caderno"] .kc-d-cta { transform:none; }
  .kc-d-name { font-size:1.75rem; }
  .kc-d-name .sub { font-size:1.2rem; }
  .kc-d-cat { display:block; margin-top:3px; font-size:.92rem; line-height:1; color:#A9A398; }
  html[data-skin="caderno"] .kc-d-cat { color:var(--muted); }
  .kc-d-pitch { margin-top:6px; font-size:.84rem; line-height:1.4; }
  .kc-d-chip, .kc-d-badge, .kc-d-last, .kc-tape, html[data-skin="caderno"] .kc-tape { display:none; }
  .kc-d-art { width:64px; height:64px; }
  .kc-d-head > .saga-head-logo { width:48px; height:48px; }
  .kc-d-badge-soon { left:4px; top:5px; padding:3px 6px; font-size:.54rem; border-radius:6px; box-shadow:0 2px 0 rgba(0,0,0,.28); }
  /* the notch that points at the picked tile */
  .kc-detail::after {
    content:''; position:absolute; top:-8px; left:calc(var(--kc-caret-x, 50%) - 7px);
    width:13px; height:13px; transform:rotate(45deg);
    background:inherit; border-left:inherit; border-top:inherit; border-top-left-radius:3px;
  }
  html[data-skin="caderno"] .kc-detail::after { background:#FFFFFF; }
  html[data-skin="caderno"].dark .kc-detail::after { background:#282421; }
}
@keyframes kcOpen { from { opacity:0; transform:translateY(-6px); } }
@media (max-width:560px) {
  /* a phone: the Abrir button spans the sheet (thumb-size target) */
  .kc-d-cta { justify-self:stretch; justify-content:center; padding:.8rem 1rem; }
  .kc-roster { gap:18px; }
  .kc-grid { grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
  .kc-tile { gap:5px; padding:5px 5px 8px; border-radius:12px; }
  .kc-name { font-size:1.02rem; }
  .kc-cat { font-size:.7rem; letter-spacing:.02em; }
  .kc-flag, html[data-skin="caderno"] .kc-flag { top:-7px; right:-4px; padding:3px 6px 1px; font-size:.74rem; }
  .kc-badge { left:3px; top:3px; padding:2px 4px; font-size:.5rem; }
  .kc-label, html[data-skin="caderno"] .kc-label { margin-bottom:22px; }
}

/* ─── 6. less motion: the picked tile is simply painted; tilt is not motion ─── */
@media (prefers-reduced-motion: reduce) {
  .kc-tile, .kc-win, .kc-win::before, .kc-art, .kc-d-cta { transition:none !important; }
  .kc-detail, html[data-skin="caderno"] .kc-detail { animation:none !important; }
  .kc-d-art [pathLength] { animation:none; stroke-dasharray:none; stroke-dashoffset:0; }
  .kc-d-art .kc-fill, .kc-d-art .kc-solid, .kc-d-art .kc-letter { animation:none; opacity:1; }
  .kc-d-art .kc-hidden { animation:none; opacity:.55; }
}

/* ─── 7. very narrow phones: the category under the name has to fit the small tile */
@media (max-width:400px) {
  .kc-cat, html[data-skin="caderno"] .kc-cat { font-size:.6rem; letter-spacing:0; }
}
@media (max-width:340px) {
  .kc-grid { gap:7px; }
  .kc-tile { padding:4px 3px 7px; }
}