/* Categories, the game screen. A full screen under the header, in the OS's ink with hairlines and pixel type, that
   moves like a console menu: shelves of tiles that drop in one after another and then breathe, the makers' own faces
   on each tile, a lift under the hand, a zoom when one is picked, cards that rise in, a pass of the three colours as
   light along the top when it opens. Nothing here is a coloured surface; the colours are light. */

/* the channel is already the screen's containing block: Codex positions it absolutely to fill the scene, and its stage
   takes the height that is left. Never re-position it here; doing so once collapsed the stage to its minimum. */
#rot .rc-intents button { white-space: nowrap; }
#rot .rc-intents .tvcat-glass { padding: 0 8px; }
#rot .rc-intents .tvcat-glass svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; display: block; }
#rot .rc-intents [data-tvcat="open"][aria-pressed="true"] { color: var(--bone); border-color: rgba(255, 250, 248, .55); background: rgba(21, 22, 26, .8); }

#rot dialog.tvcat:not([open]) { display: none; }
#rot .tvcat { position: absolute; inset: var(--tvcat-top, 48px) 0 0 0; margin: 0; width: auto; height: auto; max-width: none; max-height: none; border: 0; z-index: 30; overflow: auto; padding: 22px 3vw 28px; box-sizing: border-box; background: rgba(14, 15, 18, .985); border-top: 1px solid var(--line); color: var(--bone); display: flex; flex-direction: column; gap: 22px; animation: tvcat-in .38s var(--os-settle, cubic-bezier(.22, .8, .22, 1)) both; }
@keyframes tvcat-in { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } }
/* the caret under the Categories button, and a pass of light along the top edge as the screen opens */
#rot .tvcat::before { content: ''; position: absolute; left: calc(var(--tvcat-caret, 24px) - 5px); top: -6px; width: 10px; height: 10px; background: rgba(14, 15, 18, .985); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
#rot .tvcat::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--r) 30%, var(--g) 50%, var(--b) 70%, transparent); filter: blur(.6px); opacity: 0; animation: tvcat-light 1.4s ease-out .1s both; pointer-events: none; }
@keyframes tvcat-light { 0% { opacity: 0; transform: scaleX(.2); } 35% { opacity: .9; } 100% { opacity: 0; transform: scaleX(1); } }

#rot .tvcat .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
#rot .tvcat .eyebrow .px { width: 5px; height: 5px; background: var(--bone-45); border-radius: 1px; }
#rot .tvcat .eyebrow .px.g { background: var(--g); box-shadow: 0 0 8px var(--g); }
#rot .tvcat .eyebrow small { font: inherit; text-transform: none; letter-spacing: .04em; color: rgba(255, 250, 248, .3); }
#rot .tvcat .eyebrow small b { font: 700 11px/1 'Doto', var(--mono); color: var(--bone-70); }
#rot .tvcat .eyebrow .t { color: var(--bone-70); }
#rot .tvcat kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid rgba(255, 250, 248, .25); border-radius: 3px; font: 500 9px/1 var(--mono); letter-spacing: .08em; color: var(--bone-70); background: rgba(255, 250, 248, .04); }

/* the top: the eyebrow, the search, the way back */
#rot .tvcat-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
#rot .tvcat-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255, 250, 248, .03); max-width: 560px; justify-self: center; width: 100%; }
#rot .tvcat-search:focus-within { border-color: rgba(255, 250, 248, .5); box-shadow: 0 0 0 3px rgba(255, 250, 248, .06); }
#rot .tvcat-search svg { width: 14px; height: 14px; fill: none; stroke: var(--bone-45); stroke-width: 1.8; stroke-linecap: round; flex: none; }
#rot .tvcat-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--bone); font: 500 12px/1 var(--mono); letter-spacing: .04em; }
#rot .tvcat-search input::placeholder { color: rgba(255, 250, 248, .3); }
#rot .tvcat-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
#rot .tvcat-close { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 6px 0 14px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--bone-70); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; }
#rot .tvcat-close:hover, #rot .tvcat-close:focus-visible { color: var(--bone); border-color: rgba(255, 250, 248, .5); outline: none; }

/* the shelves: rows that rise in once, then are still */
#rot .tvcat-shelves { display: grid; gap: 26px; align-content: start; }
#rot .tvcat-shelves.leaving, #rot .tvcat-open.leaving { animation: tvcat-leave .2s ease-in both; }
@keyframes tvcat-leave { to { opacity: 0; transform: translateX(-12px); } }
#rot .tvcat-shelf { display: grid; gap: 12px; animation: tvcat-rise .5s var(--os-settle, cubic-bezier(.22, .8, .22, 1)) both; animation-delay: calc(var(--s, 0) * 90ms); }
@keyframes tvcat-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the tile: ink, one hairline, the glyph, the name, the count. Still at rest. Under the hand it lifts, the glyph makes
   its one gesture, the count lights, and the real stills of the makers inside slide into the corner. */
#rot .tvcat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; }
#rot .tvcat-tile { position: relative; display: grid; grid-template-rows: 1fr auto; height: 100px; padding: 12px 12px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 250, 248, .02); color: var(--bone); text-align: left; cursor: pointer; overflow: hidden; outline: none;
  transition: transform .26s var(--os-settle, cubic-bezier(.22, .8, .22, 1)), border-color .2s, background .2s; animation: tvcat-drop .5s var(--os-settle, cubic-bezier(.22, .8, .22, 1)) both; animation-delay: calc(var(--s, 0) * 90ms + var(--i, 0) * 35ms + 60ms); }
@keyframes tvcat-drop { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } }
#rot .tvcat-tile:hover, #rot .tvcat-tile:focus-visible { transform: translateY(-4px); border-color: rgba(255, 250, 248, .85); background: rgba(255, 250, 248, .04); z-index: 2; }
#rot .tvcat-tile:active { transform: translateY(-2px); }
#rot .tvcat-tile.zoom { animation: tvcat-zoom .2s ease-in both; z-index: 3; }
@keyframes tvcat-zoom { to { transform: scale(1.06); opacity: 0; } }
#rot .tvcat-glyph { display: block; width: 24px; height: 24px; color: var(--bone); }
#rot .tvcat-glyph svg { width: 24px; height: 24px; display: block; overflow: visible; }
#rot .tvcat-tile-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#rot .tvcat-name { font: 500 14px/1.2 var(--sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rot .tvcat-count { display: inline-flex; align-items: center; gap: 6px; }
#rot .tvcat-count b { font: 800 15px/1 'Doto', var(--mono); color: var(--bone-45); letter-spacing: .02em; transition: color .2s, text-shadow .3s; }
#rot .tvcat-count .px { width: 5px; height: 5px; background: var(--g); box-shadow: 0 0 8px var(--g); border-radius: 1px; }
#rot .tvcat-tile:hover .tvcat-count b, #rot .tvcat-tile:focus-visible .tvcat-count b { color: var(--bone); }
/* the peek: the makers' real stills, hidden at rest, sliding into the top corner under the hand */
#rot .tvcat-peek { position: absolute; right: 10px; top: 10px; display: flex; gap: 3px; opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .3s var(--os-settle, cubic-bezier(.22, .8, .22, 1)); pointer-events: none; }
#rot .tvcat-peek img { width: 30px; height: 20px; object-fit: cover; border-radius: 2px; border: 1px solid rgba(255, 250, 248, .18); background: #15161A; display: block; }
#rot .tvcat-tile:hover .tvcat-peek, #rot .tvcat-tile:focus-visible .tvcat-peek { opacity: 1; transform: none; }

/* one gesture per glyph, only under the hand or the focus ring; the reel turns while the tape plays */
#rot .tvcat-tile:hover .g-anime .m, #rot .tvcat-tile:focus-visible .g-anime .m { stroke-dasharray: 6 10; animation: g-run .7s linear infinite; }
#rot .g-anime .m2 { animation-delay: -.2s !important; } #rot .g-anime .m3 { animation-delay: -.4s !important; }
@keyframes g-run { to { stroke-dashoffset: -16; } }
#rot .tvcat-tile:hover .g-animation .ball, #rot .tvcat-tile:focus-visible .g-animation .ball { animation: g-bounce .8s cubic-bezier(.3, 0, .7, 1) infinite alternate; transform-origin: 17px 7px; }
@keyframes g-bounce { 0% { transform: translateY(0) scale(1, 1); } 85% { transform: translateY(10px) scale(1.05, .95); } 100% { transform: translateY(11px) scale(1.2, .75); } }
#rot .tvcat-tile:hover .g-comedy .face, #rot .tvcat-tile:focus-visible .g-comedy .face { animation: g-tilt 1.1s ease-in-out infinite; transform-origin: 12px 14px; }
@keyframes g-tilt { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
#rot .tvcat-tile:hover .g-film .clap, #rot .tvcat-tile:focus-visible .g-film .clap { animation: g-clap .9s ease-in-out infinite; transform-origin: 4.5px 9.5px; }
@keyframes g-clap { 0%, 55%, 100% { transform: rotate(0); } 25% { transform: rotate(-22deg); } }
#rot .tvcat-tile:hover .g-action .bolt, #rot .tvcat-tile:focus-visible .g-action .bolt { animation: g-flash .6s steps(2, end) infinite; }
@keyframes g-flash { 0% { opacity: 1; fill: currentColor; } 50% { opacity: .35; fill: none; } 100% { opacity: 1; fill: currentColor; } }
#rot .tvcat-tile:hover .g-music .bar, #rot .tvcat-tile:focus-visible .g-music .bar { animation: g-eq .5s ease-in-out infinite alternate; transform-origin: 50% 19px; }
#rot .g-music .b2 { animation-delay: -.17s !important; } #rot .g-music .b3 { animation-delay: -.33s !important; }
@keyframes g-eq { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }
#rot .tvcat-tile:hover .g-3d .back, #rot .tvcat-tile:hover .g-3d .edge, #rot .tvcat-tile:focus-visible .g-3d .back, #rot .tvcat-tile:focus-visible .g-3d .edge { animation: g-depth 1.4s ease-in-out infinite alternate; }
@keyframes g-depth { from { transform: translate(0, 0); } to { transform: translate(-2.5px, 2.5px); } }
#rot .tvcat-tile:hover .g-comic .burst, #rot .tvcat-tile:focus-visible .g-comic .burst { animation: g-pop .7s ease-out infinite; transform-origin: 15px 12px; }
@keyframes g-pop { 0% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
#rot .tvcat-tile:hover .g-horror .light, #rot .tvcat-tile:focus-visible .g-horror .light { animation: g-flicker .9s steps(3, end) infinite; stroke-width: 3; opacity: .9; }
@keyframes g-flicker { 0% { opacity: .9; } 33% { opacity: .3; } 66% { opacity: 1; } 100% { opacity: .5; } }
#rot .tvcat-tile:hover .g-fashion .hanger, #rot .tvcat-tile:focus-visible .g-fashion .hanger { animation: g-swing 1.3s ease-in-out infinite; transform-origin: 12px 4px; }
@keyframes g-swing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
#rot .tvcat-tile:hover .g-experimental .glitch, #rot .tvcat-tile:focus-visible .g-experimental .glitch { animation: g-jitter .5s steps(4, end) infinite; }
@keyframes g-jitter { 0% { transform: translate(0, 0); } 25% { transform: translate(1.5px, -1px); } 50% { transform: translate(-1.5px, 1px); } 75% { transform: translate(1px, 1.5px); } 100% { transform: translate(0, 0); } }
#rot .g-art .stroke { stroke-dasharray: 100; stroke-dashoffset: 0; }
#rot .tvcat-tile:hover .g-art .stroke, #rot .tvcat-tile:focus-visible .g-art .stroke { animation: g-draw 1.6s ease-in-out infinite; }
@keyframes g-draw { 0% { stroke-dashoffset: 100; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
#rot .tvcat-tile:hover .g-kids .hop, #rot .tvcat-tile:focus-visible .g-kids .hop { animation: g-hop .7s ease-in-out infinite alternate; }
@keyframes g-hop { from { transform: translateY(0); } to { transform: translateY(-3px); } }
#rot .tvcat-tile:hover .g-documentary .rec, #rot .tvcat-tile:focus-visible .g-documentary .rec { animation: g-rec 1s steps(1, end) infinite; }
@keyframes g-rec { 0%, 100% { fill: var(--r, #F04E4E); } 50% { fill: currentColor; opacity: .4; } }
#rot .tvcat-tile:hover .g-brand .spot, #rot .tvcat-tile:focus-visible .g-brand .spot { animation: g-sweep 1.6s ease-in-out infinite alternate; }
@keyframes g-sweep { from { transform: translateX(-4px); } to { transform: translateX(4px); } }

/* universes are tags, so they are chips; tools are words in a line */
#rot .tvcat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#rot .tvcat-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); color: var(--bone-70); font: 500 11px/1 var(--mono); letter-spacing: .06em; cursor: pointer; outline: none; transition: border-color .2s, color .2s, background .2s; }
#rot .tvcat-chip b { font: 700 12px/1 'Doto', var(--mono); color: var(--bone-45); letter-spacing: .04em; }
#rot .tvcat-chip:hover, #rot .tvcat-chip:focus-visible { color: var(--bone); border-color: rgba(255, 250, 248, .5); }
#rot .tvcat-shelf-tools .tvcat-chips { gap: 4px 14px; }
#rot .tvcat-shelf-tools .tvcat-chip { border: 0; padding: 0; height: 24px; background: none; font-size: 12px; letter-spacing: .04em; }
#rot .tvcat-shelf-tools .tvcat-chip:hover, #rot .tvcat-shelf-tools .tvcat-chip:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* a label opened: the way back, the title, the cards rising in */
#rot .tvcat-open { display: grid; gap: 18px; align-content: start; animation: tvcat-rise .4s var(--os-settle, cubic-bezier(.22, .8, .22, 1)) both; }
#rot .tvcat-open-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#rot .tvcat-glyph-head { width: 32px; height: 32px; } #rot .tvcat-glyph-head svg { width: 32px; height: 32px; }
#rot .tvcat-open-head h2 { margin: 0; display: flex; align-items: baseline; gap: 12px; font: 600 clamp(20px, 2.2vw, 30px)/1.1 var(--sans); letter-spacing: -.02em; }
#rot .tvcat-open-head h2 small { font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); }
#rot .tvcat-back { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--bone-70); font: 500 11px/1 var(--mono); letter-spacing: .08em; cursor: pointer; outline: none; transition: color .2s, border-color .2s; }
#rot .tvcat-back:hover, #rot .tvcat-back:focus-visible { color: var(--bone); border-color: rgba(255, 250, 248, .5); }
#rot .tvcat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
#rot .tvcat-card { position: relative; display: grid; grid-template-rows: 120px auto; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 250, 248, .025); color: var(--bone); text-align: left; cursor: pointer; overflow: hidden; outline: none;
  transition: transform .28s var(--os-settle, cubic-bezier(.22, .8, .22, 1)), border-color .2s, box-shadow .3s; animation: tvcat-drop .5s var(--os-settle, cubic-bezier(.22, .8, .22, 1)) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
#rot .tvcat-card:hover, #rot .tvcat-card:focus-visible { transform: translateY(-4px) scale(1.02); border-color: rgba(255, 250, 248, .6); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); z-index: 2; }
#rot .tvcat-card.zoom { animation: tvcat-zoom .26s ease-in both; z-index: 3; }
#rot .tvcat-art { position: relative; display: block; background: #0a0b0f; overflow: hidden; }
#rot .tvcat-art img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 3s ease; }
#rot .tvcat-card:hover .tvcat-art img, #rot .tvcat-card:focus-visible .tvcat-art img { transform: scale(1.08); }
#rot .tvcat-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(14, 15, 18, .85)); }
#rot .tvcat-ch { position: absolute; right: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 7px 2px; border: 1px solid rgba(255, 250, 248, .25); border-radius: 4px; background: rgba(14, 15, 18, .7); font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--bone-45); }
#rot .tvcat-ch b { font: 800 16px/1 'Doto', var(--mono); color: var(--bone); letter-spacing: .02em; }
#rot .tvcat-card-body { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px 12px; }
#rot .tvcat-face { width: 34px; height: 34px; overflow: hidden; border-radius: 4px; background: #15161A; display: grid; place-items: center; border: 1px solid rgba(255, 250, 248, .12); }
#rot .tvcat-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#rot .tvcat-face i { font: 700 14px/1 'Doto', var(--mono); font-style: normal; color: var(--bone-70); }
#rot .tvcat-card-text { display: grid; gap: 3px; min-width: 0; }
#rot .tvcat-name { font: 600 14px/1.2 var(--sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rot .tvcat-why { font: 500 10px/1.4 var(--mono); letter-spacing: .04em; color: var(--bone-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rot .tvcat-go { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; transition: color .2s, border-color .2s, background .2s; }
#rot .tvcat-card:hover .tvcat-go, #rot .tvcat-card:focus-visible .tvcat-go { color: var(--ink, #0E0F12); background: var(--bone); border-color: var(--bone); }
#rot .tvcat-tiles-found { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
#rot .tvcat-hint { margin: 0; max-width: 620px; font: 400 12px/1.6 var(--sans); color: var(--bone-45); }

/* the foot: the keys, and the promise */
#rot .tvcat-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
#rot .tvcat-keys { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-45); }
#rot .tvcat-honest { font: 400 11px/1.5 var(--sans); color: rgba(255, 250, 248, .35); max-width: 620px; }

@media (max-width: 720px) { #rot .tvcat { padding: 14px 16px 20px; gap: 16px; } #rot .tvcat-top { grid-template-columns: 1fr auto; } #rot .tvcat-top .eyebrow { display: none; } #rot .tvcat-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } #rot .tvcat-cards { grid-template-columns: 1fr; } #rot .tvcat-keys { display: none; } }
@media (prefers-reduced-motion: reduce) { #rot .tvcat, #rot .tvcat::after, #rot .tvcat-shelf, #rot .tvcat-tile, #rot .tvcat-card, #rot .tvcat-open, #rot .tvcat-shelves.leaving, #rot .tvcat-open.leaving, #rot .tvcat-g *, #rot .tvcat-tile:hover .tvcat-g *, #rot .tvcat-tile:focus-visible .tvcat-g * { animation: none !important; } #rot .tvcat-tile, #rot .tvcat-card, #rot .tvcat-art img, #rot .tvcat-peek { transition: none; } }