/* Lorewheel on a TV (/tv, tv.js). Every rule starts with html.tv, so nothing here reaches the site.
   Sized for 1920x1080 seen from across a room: bigger type, a margin TVs do not crop,
   a focus ring that can be found from the sofa, and no controls that only show on hover. */
html.tv{font-size:150%;cursor:none}
html.tv body{padding:3vh 3vw;box-sizing:border-box}
html.tv .frame{width:100%;height:100%;margin:0}

/* what a remote cannot use or a TV does not need */
html.tv .promo,html.tv .side-legal,html.tv .side-install,html.tv [data-install],html.tv .search,
html.tv #tb-side,html.tv #tb-rail,html.tv #nav-more,html.tv #more-sheet,html.tv #room-copy{display:none!important}
/* the TV's room stays open: closing it would cut every phone off, and nothing on a TV reopens it */
html.tv #room-end{display:none!important}
/* nothing for sale on a TV (tv.js keeps the selling screens shut too): the Pro and Event Packs tabs,
   the Go Pro chip, the coming-holiday pack, offline downloads (a Pro feature a TV has no use for),
   printing the Yearbook, and a photo upload a TV cannot do */
html.tv .nav [data-go="pro"],html.tv .nav [data-go="packs"],html.tv #tb-pro,html.tv .season-spot,html.tv .pack-shelf,html.tv .dl-btn,html.tv #libdl,
html.tv #yb-pro,html.tv #yb-print,html.tv .nt-photo-row,html.tv .lib-cat-packs,html.tv .lib-price{display:none!important}
/* Legacy Letters records a voice: a TV has no microphone. Duels trade links by copy and paste, which
   a remote cannot do, and Seasons is a roadmap of every game with nothing a remote can focus to scroll it */
html.tv .lg-promo,html.tv .nav [data-go="duels"],html.tv .nav [data-go="seasons"]{display:none!important}
/* pages of their own (Daily, Read the Room, About): a TV app stays in the app */
html.tv .daily-tease,html.tv .m-sub a[href]{display:none!important}
/* phones bring the names: no typing names with a remote */
html.tv #cadd,html.tv #railadd{display:none!important}
/* the home panel's "Play it on the TV" note: this is the TV */
html.tv .rail-tv,html.tv #nav-tv{display:none!important}

/* grids sized in px were sized for an 18px root; at a TV's 24px the cards got too narrow for a word */
html.tv .herd-groups{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
html.tv .circles{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
/* the menu badges (Circle's "!" until three people are in) are a 20px pill: at a TV's larger type the mark
   overflowed it and its dot was cut off. Size the pill with the type and centre the mark on one line */
html.tv .badge{min-width:30px;height:30px;padding:0 8px;line-height:1;box-sizing:border-box}
html.tv #tv-room[hidden]{display:none}

/* the focus, visible from across the room */
html.tv :focus{outline:none}
/* !important: the site's own rules hide the outline on some controls (the hero title) after a focus() from script */
html.tv :is(button,a,input,select,textarea,[tabindex]):focus{outline:5px solid #fff!important;outline-offset:4px;box-shadow:0 0 0 10px rgba(255,45,111,.55)!important;border-radius:12px;position:relative;z-index:2}
html.tv .gcard:focus,html.tv .ritem:focus{transform:scale(1.06);transition:transform .15s}
@media (prefers-reduced-motion:reduce){html.tv .gcard:focus,html.tv .ritem:focus{transform:none}}

/* the room code, always on screen, in the empty foot of the menu column so it never covers a game */
html.tv #tv-room{position:fixed;left:calc(3vw + 14px);bottom:calc(3vh + 14px);width:204px;z-index:50;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;box-sizing:border-box;
  background:rgba(255,255,255,.06);color:#f4f4f6;border-radius:16px}
html.tv #tv-room p{margin:0}
html.tv #tv-room .tvr-qr{width:132px;height:132px;background:#fff;border-radius:10px;overflow:hidden}
html.tv #tv-room .tvr-qr svg{width:100%;height:100%;display:block}
html.tv #tv-room .tvr-how{font-size:.78rem;opacity:.85;line-height:1.3}
html.tv #tv-room .tvr-code{font-size:2.1rem;font-weight:800;letter-spacing:.14em;line-height:1.1}
html.tv #tv-room .tvr-n{font-size:.8rem;opacity:.85}

/* a phone's offer to sign the TV in (tv.js): asked on the TV, over everything */
html.tv #tv-ask{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(10,10,14,.72)}
html.tv #tv-ask .tv-ask-card{max-width:900px;padding:40px 44px;border-radius:24px;background:#1d1d22;color:#f4f4f6;box-shadow:0 30px 80px rgba(0,0,0,.6)}
html.tv #tv-ask h2{margin:0 0 .4em;font-size:1.8rem;line-height:1.15}
html.tv #tv-ask p{margin:0 0 1.2em;line-height:1.5}
html.tv #tv-ask .row{display:flex;gap:18px}
/* the game area itself holds the focus while a remote game runs (engines-tv.js) or a step has no buttons: no ring round the whole screen */
html.tv #app:focus{outline:none!important;box-shadow:none!important}