/* Encore page: TV screens drawn in HTML/CSS, matching the themes on the real Shield launcher.
   Everything inside a screen is sized in cqw (percent of the screen width) so it scales like a TV. */

.tv { background: #0b0a09; border: 6px solid #2a2627; border-radius: 16px; box-shadow: 0 30px 60px -25px rgba(35,31,32,.5); }
.tv-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; container-type: inline-size; background: #0a0705; }
html[data-theme="theater"] .tv { box-shadow: 0 30px 60px -25px rgba(0,0,0,.8); }
.hero-tv { width: 100%; }
.hero-tv-stand { width: 46%; height: 14px; margin: 10px auto 0; border-radius: 4px; background: linear-gradient(180deg, #2a2627, #151314); }

/* ---------- shared bits ---------- */
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .22em; }
.enc-screen .sk { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility 0s linear .45s; }
.enc-screen[data-skin="classic"] .sk-classic,
.enc-screen[data-skin="component"] .sk-component,
.enc-screen[data-skin="crate"] .sk-crate,
.enc-screen[data-skin="bauhaus"] .sk-bauhaus { visibility: visible; opacity: 1; transition: opacity .45s ease; }
.sk .sk-home, .sk .sk-saver { position: absolute; inset: 0; transition: opacity .5s ease; }
.sk .sk-saver { opacity: 0; pointer-events: none; }
.enc-screen[data-mode="saver"] .sk-home { opacity: 0; pointer-events: none; }
.enc-screen[data-mode="saver"] .sk-saver { opacity: 1; pointer-events: auto; cursor: pointer; }
.enc-screen[data-mode="app"] .sk-home { opacity: .15; }

/* ---------- turntable (Classic screensaver, and the hero) ---------- */
.tt-scene { position: absolute; inset: 0; background: radial-gradient(90% 80% at 35% 40%, #2c1b0d 0%, #160e07 55%, #0b0704 100%); color: #e8d9bf; }
.tt-plinth { position: absolute; left: 6.4%; top: 16.2%; width: 53%; aspect-ratio: 678 / 533; border-radius: .9cqw;
  background: #6d3f1d url(../img/encore/wood.webp) center / cover; box-shadow: 0 2.4cqw 3.6cqw rgba(0,0,0,.65), inset 0 0 0 .12cqw rgba(255,220,170,.12), inset 0 -.5cqw 1.2cqw rgba(0,0,0,.35); }
.tt-plinth::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2.2cqw; height: 2.2cqw; border-radius: 0 0 .9cqw .9cqw; background: linear-gradient(180deg, #4a2a12, #1c1008); }
.tt-platter { position: absolute; left: 5.6%; top: 5.3%; width: 71%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #3a3a3c 0 69%, #1b1b1d 70.5% 100%); box-shadow: 0 1.2cqw 2.4cqw rgba(0,0,0,.6); }
.tt-record { position: absolute; inset: 3.6%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #121214 0 .22cqw, #19191b .22cqw .4cqw), #121214;
  animation: tt-spin 1.8s linear infinite; }
.tt-record::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 .5cqw #0c0c0d, inset 0 0 0 2.2cqw rgba(0,0,0,.25); }
.tt-label { position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-28deg); border-radius: 50%;
  background: var(--label, #3e7c3a); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqw; text-align: center; color: #f3ead8;
  box-shadow: inset 0 0 0 .18cqw rgba(255,255,255,.18), inset 0 0 0 .9cqw rgba(0,0,0,.12); }
.tt-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6%; aspect-ratio: 1; margin: -3% 0 0 -3%; border-radius: 50%; background: #bfb6a6; box-shadow: 0 0 0 .1cqw #333; }
.tt-l-title { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.45cqw; line-height: 1.05; max-width: 82%; }
.tt-l-artist { font-family: "IBM Plex Mono", monospace; font-size: .62cqw; letter-spacing: .2em; text-transform: uppercase; opacity: .85; margin-top: 1.3cqw; }
.tt-sheen { position: absolute; inset: 3.6%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255,255,255,.07) 12%, transparent 18% 50%, rgba(255,255,255,.06) 62%, transparent 68%); }
@keyframes tt-spin { to { transform: rotate(360deg); } }

.tt-arm-base { position: absolute; left: 80.6%; top: 7.9%; width: 9.6%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3b3b3d, #141415 70%); box-shadow: 0 .6cqw 1.2cqw rgba(0,0,0,.55); }
.tt-arm { position: absolute; left: 85.4%; top: 12.7%; width: 46%; height: .55cqw; transform-origin: 0 50%; transform: rotate(117deg);
  background: linear-gradient(180deg, #d9d9db, #8d8d90); border-radius: .3cqw; box-shadow: 0 .5cqw .8cqw rgba(0,0,0,.45); }
.tt-arm::before { content: ""; position: absolute; left: -9%; top: 50%; width: 11%; height: 1.9cqw; transform: translateY(-50%); border-radius: .35cqw; background: linear-gradient(180deg, #8c8c8f, #4b4b4e); }
.tt-arm::after { content: ""; position: absolute; right: -4%; top: 50%; width: 10%; height: 1.7cqw; transform: translateY(-50%) rotate(-28deg); border-radius: .2cqw; background: linear-gradient(180deg, #3b3b3d, #1b1b1d); }
.tt-pivot { position: absolute; left: 83.8%; top: 11.1%; width: 3.2%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e3e3e5, #7b7b7e); }
.tt-speed { position: absolute; left: 4%; bottom: 4.5%; font-size: .75cqw; color: #e8c58c; display: flex; align-items: center; gap: .6cqw; }
.tt-speed i { width: .55cqw; height: .55cqw; border-radius: 50%; background: #ffb648; box-shadow: 0 0 .9cqw .3cqw rgba(255,182,72,.6); }
.tt-speed span + span { color: #b59670; }
.tt-brand { position: absolute; right: 4%; bottom: 4.5%; font-size: .75cqw; color: #d9bf98; }

.tt-info { position: absolute; left: 64.7%; right: 5%; top: 11%; }
.tt-time { font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 8.4cqw; line-height: .95; letter-spacing: -.03em; color: #e8d9bf; display: flex; align-items: flex-end; gap: 1.2cqw; }
.tt-time small { font-family: "IBM Plex Mono", monospace; font-size: .95cqw; letter-spacing: .22em; text-transform: uppercase; color: #c7ab83; padding-bottom: .9cqw; }
.tt-meta { font-size: .9cqw; color: #c7ab83; margin-top: 1.6cqw; }
.tt-rule { height: 1px; background: rgba(232,217,191,.18); margin: 2.4cqw 0 2.6cqw; }
.tt-k { font-size: .85cqw; color: #c7ab83; display: block; }
.tt-title { font-family: Fraunces, Georgia, serif; font-size: 4.6cqw; line-height: 1; margin-top: 1.4cqw; letter-spacing: -.01em; }
.tt-artist { font-family: Fraunces, Georgia, serif; font-size: 2cqw; color: #d9c6a6; margin-top: .9cqw; }
.tt-year { font-size: .85cqw; color: #c7ab83; margin: 1.4cqw 0 2.4cqw; display: block; }
.tt-quote { font-family: Fraunces, Georgia, serif; font-style: italic; font-size: 1.75cqw; line-height: 1.35; color: #e1cfae; margin-top: 1cqw; }
.tt-house { margin-top: 2cqw; font-size: .85cqw; color: #ffb648; display: grid; gap: .6cqw; }
.tt-house span:last-child { color: #c7ab83; }

/* ---------- Classic home ---------- */
.ck-home { background: #efe7da; color: #2a2522; padding: 4.2cqw 5cqw; display: flex; flex-direction: column; }
.ck-bar { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.45cqw; }
.ck-bar .ck-clock { font-weight: 600; }
.ck-bar .ck-menu { display: flex; gap: 2.4cqw; color: #4a433d; }
.ck-house { font-size: 1.3cqw; color: #6a5f55; margin-top: .9cqw; min-height: 1.6cqw; }
.ck-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6cqw; margin-top: 5.2cqw; align-items: end; }
.ck-tile { position: relative; aspect-ratio: 1 / 1.05; border: 0; border-radius: .35cqw; padding: 1.2cqw; text-align: left; cursor: pointer;
  background: #e2d8c8; color: #2a2522; font: 600 1.7cqw/1.1 var(--sans); display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); transition: transform .35s cubic-bezier(.2,.8,.2,1.2), background .25s ease, color .25s ease, box-shadow .35s ease; }
.ck-tile b { font-weight: 500; font-size: 1.4cqw; color: #4c5f86; }
.ck-tile.is-focus { background: #c8281e; color: #fff4ec; transform: translateY(-1.6cqw) scale(1.04); box-shadow: 0 1.8cqw 2.6cqw -1.2cqw rgba(120,20,10,.55); }
.ck-tile.is-focus b { color: #ffd9cf; }
.enc-screen:focus-within .ck-tile.is-focus { outline: .35cqw solid #0077a8; outline-offset: .35cqw; }
.ck-more { margin-top: 3.4cqw; }
.ck-more-h { font-size: 1.35cqw; color: #9c2a20; font-weight: 600; }
.ck-more ul { list-style: none; margin: 1.2cqw 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9cqw 2cqw; font-size: 1.35cqw; color: #3b3430; }

/* ---------- Component (receiver faceplate) ---------- */
.cp-home { background: #0d0d0e; }
.cp-plate { position: absolute; inset: 2.6% 2%; border-radius: 1.1cqw;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 .08cqw, rgba(0,0,0,.03) .08cqw .2cqw), linear-gradient(180deg, #4b4a48 0%, #353432 45%, #2a2928 100%);
  box-shadow: inset 0 .15cqw 0 rgba(255,255,255,.18), inset 0 -.3cqw .6cqw rgba(0,0,0,.4), 0 1.6cqw 3cqw rgba(0,0,0,.7); color: #c9c6bf; }
.cp-screw { position: absolute; width: .9cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8c8a86, #2c2b29); }
.cp-brand { position: absolute; left: 3.6%; top: 5.5%; font-family: Michroma, sans-serif; font-size: 1.7cqw; letter-spacing: .3em; color: #d9d6cf; display: flex; align-items: baseline; gap: 1.6cqw; }
.cp-brand small { font-family: Michroma, sans-serif; font-size: .7cqw; letter-spacing: .25em; color: #9d9a93; }
.cp-top { position: absolute; right: 3.6%; top: 5%; display: flex; align-items: center; gap: 1.4cqw; }
.cp-top span { display: grid; justify-items: center; gap: .5cqw; font-family: Michroma, sans-serif; font-size: .62cqw; letter-spacing: .14em; color: #a9a59d; }
.cp-top span i { width: 4.6cqw; height: 1.3cqw; border-radius: .3cqw; background: linear-gradient(180deg, #2b2a29, #1c1b1a); box-shadow: inset 0 .1cqw 0 rgba(255,255,255,.12); }
.cp-led { width: .8cqw !important; height: .8cqw !important; border-radius: 50% !important; background: #5bff7a !important; box-shadow: 0 0 1cqw .2cqw rgba(91,255,122,.7) !important; }
.cp-vu { position: absolute; top: 15%; width: 22.5%; aspect-ratio: 27 / 16; border-radius: .6cqw; background: #1a1612; padding: .55cqw; box-shadow: inset 0 0 0 .15cqw #0d0b09, 0 .3cqw .6cqw rgba(0,0,0,.5); }
.cp-vu.h { left: 3.6%; } .cp-vu.m { left: 27.6%; }
.cp-face { position: relative; width: 100%; height: 100%; border-radius: .35cqw; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #fff0c4 0%, #f2cf86 55%, #d9a650 100%); box-shadow: inset 0 0 2cqw rgba(120,70,0,.35); transition: filter .6s ease; }
.cp-face svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-needle { position: absolute; left: 50%; bottom: -8%; width: .28cqw; height: 92%; margin-left: -.14cqw; background: #1d1a17; transform-origin: 50% 100%; border-radius: .2cqw; }
.cp-hub { position: absolute; left: 50%; bottom: -9%; width: 18%; aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #1d1a17; }
.cp-vfd { position: absolute; left: 3.6%; top: 49%; width: 46.5%; height: 13.5%; border-radius: .6cqw; background: linear-gradient(180deg, #071513, #04100e); overflow: hidden;
  box-shadow: inset 0 0 0 .15cqw #000, inset 0 .4cqw 1.2cqw rgba(0,0,0,.7), 0 0 2.4cqw rgba(60,240,210,.08); padding: 1.1cqw 1.8cqw; font-family: "Share Tech Mono", monospace; }
.cp-vfd-main { position: relative; font-size: 3.4cqw; line-height: 1; letter-spacing: .12em; white-space: nowrap; }
.cp-vfd-main .ghost { position: absolute; left: 0; top: 0; color: #0f2a26; }
.cp-vfd-main .lit { position: relative; color: #63f5da; text-shadow: 0 0 .6cqw rgba(99,245,218,.85), 0 0 1.6cqw rgba(99,245,218,.4); }
.cp-vfd-tag { position: absolute; right: 1.8cqw; top: 1.4cqw; font-size: .75cqw; letter-spacing: .14em; color: #ffb648; text-shadow: 0 0 .6cqw rgba(255,182,72,.7); }
.cp-vfd-sub { margin-top: .9cqw; font-size: .95cqw; letter-spacing: .14em; color: #4cd9c0; text-shadow: 0 0 .5cqw rgba(76,217,192,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-vfd-sub em { font-style: normal; color: #ffb648; text-shadow: 0 0 .5cqw rgba(255,182,72,.7); }
.cp-knob-wrap { position: absolute; left: 63%; top: 18%; width: 30%; height: 54%; }
.cp-knob { position: absolute; left: 50%; top: 50%; width: 15cqw; aspect-ratio: 1; margin: -7.5cqw 0 0 -7.5cqw; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0 2deg, rgba(0,0,0,.05) 2deg 4deg), conic-gradient(from 210deg, #6e6c69, #c9c7c2, #6e6c69, #2f2e2c, #8b8985, #6e6c69);
  box-shadow: 0 0 0 .9cqw #1d1c1b, 0 0 0 1.1cqw #3e3d3b, 0 1.6cqw 2.4cqw rgba(0,0,0,.7); }
.cp-knob::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8f8d89, #3c3b39 75%); box-shadow: inset 0 .2cqw .4cqw rgba(255,255,255,.2); }
.cp-knob i { position: absolute; left: 50%; top: 8%; width: .45cqw; height: 22%; margin-left: -.22cqw; border-radius: .2cqw; background: #f4f2ed; box-shadow: 0 0 .5cqw rgba(255,255,255,.5); }
.cp-src { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: .4cqw .6cqw; cursor: pointer; white-space: nowrap;
  font-family: Michroma, sans-serif; font-size: .8cqw; letter-spacing: .14em; text-transform: uppercase; color: #b9b5ad; display: flex; align-items: center; gap: .5cqw; }
.cp-src::before { content: ""; width: .55cqw; height: .55cqw; border-radius: 50%; background: #3a2a14; flex: none; }
.cp-src.is-focus { color: #fff; }
.cp-src.is-focus::before { background: #ffb648; box-shadow: 0 0 .8cqw .2cqw rgba(255,182,72,.75); }
.enc-screen:focus-within .cp-src.is-focus { outline: .2cqw solid #4cc3ee; outline-offset: .2cqw; border-radius: .3cqw; }
.cp-src-label { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); font-family: Michroma, sans-serif; font-size: .7cqw; letter-spacing: .3em; color: #8f8b84; }
.cp-aux { position: absolute; left: 3.6%; right: 3.6%; bottom: 6.5%; font-family: Michroma, sans-serif; font-size: .62cqw; letter-spacing: .14em; color: #a6a29a; }
.cp-aux ul { list-style: none; margin: .9cqw 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5cqw 1cqw; color: #c3bfb7; }
.enc-screen[data-lights="off"] .cp-face { filter: brightness(.62) saturate(.8); }

/* Component screensaver: VFD clock */
.cp-saver { background: #030807; font-family: "Share Tech Mono", monospace; color: #63f5da; }
.cp-standby { position: absolute; left: 5%; top: 6%; font-size: 1cqw; letter-spacing: .3em; color: #ffb648; display: flex; align-items: center; gap: .8cqw; text-shadow: 0 0 .6cqw rgba(255,182,72,.7); }
.cp-standby i { width: .6cqw; height: .6cqw; border-radius: 50%; background: #ffb648; box-shadow: 0 0 .9cqw .3cqw rgba(255,182,72,.6); }
.cp-date { position: absolute; right: 5%; top: 6%; font-size: 1cqw; letter-spacing: .3em; color: #2f8f80; }
.cp-big { position: absolute; left: 4.5%; top: 14%; font-size: 21cqw; line-height: 1; letter-spacing: .04em; }
.cp-big .ghost { position: absolute; left: 0; top: 0; color: #0b211d; }
.cp-big .lit { position: relative; text-shadow: 0 0 1.4cqw rgba(99,245,218,.65), 0 0 4cqw rgba(99,245,218,.25); }
.cp-ampm { position: absolute; left: 79%; top: 44%; font-size: 2.6cqw; letter-spacing: .1em; text-shadow: 0 0 .8cqw rgba(99,245,218,.7); }
.cp-spec { position: absolute; left: 79%; right: 5%; top: 17%; height: 10cqw; display: flex; align-items: flex-end; gap: .35cqw; }
.cp-spec i { flex: 1; height: 40%; background: repeating-linear-gradient(0deg, #63f5da 0 .32cqw, transparent .32cqw .5cqw); box-shadow: 0 0 .6cqw rgba(99,245,218,.4); transform-origin: 50% 100%; }
.cp-lines { position: absolute; left: 79%; top: 54%; display: grid; gap: .5cqw; font-size: .95cqw; letter-spacing: .14em; color: #ffb648; text-shadow: 0 0 .5cqw rgba(255,182,72,.6); }
.cp-lines span::before { content: "\25CF  "; font-size: .7cqw; }
.cp-rec { position: absolute; left: 5%; right: 5%; bottom: 8%; }
.cp-rec small { display: block; font-size: 1cqw; letter-spacing: .3em; color: #ffb648; text-shadow: 0 0 .5cqw rgba(255,182,72,.6); }
.cp-rec b { display: block; font-weight: 400; font-size: 4.6cqw; letter-spacing: .14em; margin-top: .6cqw; text-shadow: 0 0 1cqw rgba(99,245,218,.65); text-transform: uppercase; }
.cp-rec span { display: block; margin-top: .8cqw; font-size: 1.05cqw; letter-spacing: .16em; color: #3fbfa8; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-sleep { position: absolute; right: 5%; bottom: 20%; text-align: right; font-size: 1cqw; letter-spacing: .3em; color: #ffb648; }
.cp-sleep b { display: block; font-weight: 400; font-size: 2.6cqw; letter-spacing: .08em; text-shadow: 0 0 .8cqw rgba(255,182,72,.7); }

/* ---------- notices (Control4 reminders) ---------- */
.enc-screen .enc-notice { position: absolute; left: 50%; top: 4%; transform: translate(-50%, -160%); z-index: 3; display: flex; align-items: center; gap: 1.2cqw;
  padding: 1.1cqw 2.2cqw; border-radius: 99px; font-size: 1.6cqw; white-space: nowrap; opacity: 0; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1.1); }
.enc-screen .enc-notice.show { opacity: 1; transform: translate(-50%, 0); }
.enc-screen .enc-notice i { width: 1cqw; height: 1cqw; border-radius: 50%; flex: none; }
.enc-screen[data-skin="classic"] .enc-notice { background: #2a2522; color: #fff4e4; box-shadow: 0 1.2cqw 2.4cqw rgba(0,0,0,.35); font-family: Fraunces, Georgia, serif; }
.enc-screen[data-skin="classic"] .enc-notice i { background: #ffb648; box-shadow: 0 0 1cqw #ffb648; }
.enc-screen[data-skin="component"] .enc-notice { background: #04100e; color: #ffb648; border: .15cqw solid #3a2a14; font-family: "Share Tech Mono", monospace; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 .6cqw rgba(255,182,72,.7); }
.enc-screen[data-skin="component"] .enc-notice i { background: #ffb648; box-shadow: 0 0 1cqw #ffb648; }

/* ---------- opening an app ---------- */
.enc-screen .enc-app { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw;
  opacity: 0; transform: scale(1.04); pointer-events: none; transition: opacity .45s ease, transform .45s ease; }
.enc-screen[data-mode="app"] .enc-app { opacity: 1; transform: none; }
.enc-screen[data-skin="classic"] .enc-app { background: rgba(239,231,218,.94); color: #2a2522; }
.enc-screen[data-skin="component"] .enc-app { background: rgba(3,8,7,.92); color: #63f5da; font-family: "Share Tech Mono", monospace; }
.enc-app-name { font-family: Fraunces, Georgia, serif; font-size: 6cqw; }
.enc-screen[data-skin="component"] .enc-app-name { font-family: "Share Tech Mono", monospace; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 1cqw rgba(99,245,218,.7); }
.enc-app-hint { font-size: 1.8cqw; opacity: .75; }

/* ---------- style picker ---------- */
.enc-styles { display: grid; gap: 8px; }
.enc-styles-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.enc-styles .kp-btn { justify-content: center; }

@media (max-width: 760px) {
  .enc-screen .enc-notice { font-size: 2.6cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-record { animation: none; }
  .enc-screen .sk, .sk .sk-home, .sk .sk-saver, .ck-tile, .enc-screen .enc-notice, .enc-screen .enc-app, .cp-face { transition: none; }
}
.cp-ampm, .cp-date { text-transform: uppercase; }
.enc-screen.tv-screen { aspect-ratio: 16 / 9; color: inherit; }
@media (max-width: 760px) { .enc-screen.tv-screen { aspect-ratio: 16 / 9; } }

/* ---------- Crate (record crate) ---------- */
.kr-home { background: radial-gradient(70% 80% at 28% 30%, #4a3524 0%, #1d140d 55%, #0e0a07 100%); color: #f2e7d2; }
.kr-bar { position: absolute; left: 5%; right: 5%; top: 5.5%; display: flex; justify-content: space-between; font-size: .85cqw; color: #b9a585; }
.kr-crate { position: absolute; left: 5%; top: 14%; width: 44%; bottom: 0; }
.kr-back { position: absolute; left: calc(14% - var(--k) * 2.2%); top: calc(16% - var(--k) * 3.2%); width: 78%; aspect-ratio: 912 / 816;
  background: linear-gradient(180deg, #2a2420, #151210); border-radius: .3cqw; box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.5), inset 0 .12cqw 0 rgba(255,220,170,.12); z-index: calc(10 - var(--k)); }
.kr-back:nth-child(2n) { background: linear-gradient(180deg, #23314a, #121a28); }
.kr-back:nth-child(3n) { background: linear-gradient(180deg, #4a1f1c, #22100e); }
.kr-back span { position: absolute; left: 3%; top: .5cqw; padding: .2cqw .6cqw; font-size: .62cqw; color: #2a2118; background: #efe6d2; border-radius: .15cqw; letter-spacing: .14em; }
.kr-front { position: absolute; left: 14%; top: 16%; width: 78%; aspect-ratio: 912 / 816; z-index: 20; border-radius: .3cqw; overflow: hidden;
  box-shadow: 0 1.6cqw 3cqw rgba(0,0,0,.65), inset 0 0 0 .12cqw rgba(255,220,170,.14); }
.kr-art, .kr-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kr-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 8%; background: #efe6d2; color: #1d1712; font-size: .9cqw; letter-spacing: .2em;
  writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: flex-start; padding-top: 1.4cqw; box-shadow: inset -.15cqw 0 0 rgba(0,0,0,.15); }
.kr-box { position: absolute; left: 6%; right: 2%; top: 78%; bottom: -6%; z-index: 30; border-radius: .5cqw .5cqw 0 0;
  background: #6d3f1d url(../img/encore/wood.webp) center / cover; box-shadow: 0 -1cqw 2cqw rgba(0,0,0,.45), inset 0 .15cqw 0 rgba(255,220,170,.25); }
.kr-box i { position: absolute; left: 50%; top: 22%; width: 22%; height: 18%; transform: translateX(-50%); border-radius: 99px; background: #1d1008; box-shadow: inset 0 .3cqw .5cqw rgba(0,0,0,.8); }
.kr-info { position: absolute; left: 58%; right: 5%; top: 12%; }
.kr-k { display: block; font-size: .8cqw; color: #c9a46a; }
.kr-gap { margin-top: 2.6cqw; }
.kr-title { font-family: Fraunces, Georgia, serif; font-size: 5.6cqw; line-height: 1; margin-top: 1cqw; letter-spacing: -.01em; }
.kr-meta { display: block; font-size: .8cqw; color: #b9a585; margin-top: 1.2cqw; }
.kr-list { list-style: none; margin: 1cqw 0 0; padding: 0; display: grid; gap: .25cqw; }
.kr-item { display: flex; align-items: baseline; gap: 1.6cqw; width: 100%; border: 0; background: none; padding: .25cqw 0; cursor: pointer; text-align: left;
  font-family: Fraunces, Georgia, serif; font-size: 1.7cqw; color: #e6d9c0; }
.kr-item small { font-size: .62cqw; color: #b09d80; width: 6cqw; flex: none; }
.kr-item.is-focus, .kr-item.is-focus small { color: #f5d08c; }
.kr-item.is-focus span::before { content: "\25B8  "; font-size: 1.2cqw; }
.enc-screen:focus-within .kr-item.is-focus { outline: .2cqw solid #4cc3ee; outline-offset: .2cqw; border-radius: .2cqw; }
.kr-shelf { display: flex; align-items: flex-end; gap: .35cqw; margin-top: 1cqw; padding-bottom: .1cqw; border-bottom: .5cqw solid #5e3a1d; height: 8cqw; }
.kr-book { width: 2.4cqw; height: 82%; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 30%, rgba(0,0,0,.2)), var(--c); border-radius: .15cqw .15cqw 0 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kr-book:nth-child(odd) { height: 92%; } .kr-book:nth-child(3n) { height: 74%; }
.kr-book i { font-style: normal; writing-mode: vertical-rl; transform: rotate(180deg); font-family: "IBM Plex Mono", monospace; font-size: .55cqw; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 0 .3cqw rgba(0,0,0,.6); white-space: nowrap; }
.enc-screen[data-skin="crate"] .enc-notice { background: #efe6d2; color: #1d1712; font-family: Fraunces, Georgia, serif; box-shadow: 0 1.2cqw 2.4cqw rgba(0,0,0,.5); }
.enc-screen[data-skin="crate"] .enc-notice i { background: #c8352a; }
.enc-screen[data-skin="crate"] .enc-app { background: rgba(14,10,7,.94); color: #f2e7d2; }

/* ---------- Bauhaus ---------- */
.bh-home, .bh-saver { background: #1b1b2a; color: #72bfe6; font-family: Jost, var(--sans); overflow: hidden; }
.bh-home::before, .bh-saver::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px) 0 0 / .5cqw .5cqw; }
.bh-home { padding: 4.4cqw 5cqw; display: flex; flex-direction: column; }
.bh-sun { position: absolute; right: 13%; top: -10%; width: 14cqw; aspect-ratio: 1; border-radius: 50%; background: #e8529f; }
.bh-tri { position: absolute; right: 3%; top: 2%; width: 9cqw; aspect-ratio: 1; clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: radial-gradient(#72bfe6 .14cqw, transparent .17cqw) 0 0 / .6cqw .6cqw; opacity: .8; }
.bh-bar { position: relative; display: flex; justify-content: space-between; align-items: baseline; font-size: 1.5cqw; }
.bh-clock { color: #e8529f; font-weight: 500; }
.bh-menu { display: flex; gap: 2.6cqw; color: #fff; }
.bh-house { position: relative; font-size: 1.25cqw; color: #9fc6dd; margin-top: .8cqw; }
.bh-row { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4cqw; margin-top: 3.8cqw; padding-bottom: 1cqw; border-bottom: .3cqw solid #b9a6e8; }
.bh-tile { position: relative; aspect-ratio: 1 / 1.08; border: 0; padding: 1cqw; cursor: pointer; text-align: left; color: #b8e2f5;
  font: 500 1.7cqw/1.05 Jost, var(--sans); display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(rgba(114,191,230,.45) .13cqw, transparent .16cqw) 0 0 / .55cqw .55cqw, #20223a; box-shadow: inset 0 0 0 .1cqw rgba(114,191,230,.35);
  transition: background .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1.2); }
.bh-tile b { font-weight: 500; font-size: 1.3cqw; color: #f27ab7; }
.bh-tile.is-focus { background: #e8529f; color: #fff; transform: translateY(-1cqw); box-shadow: none; }
.bh-tile.is-focus b { color: #fff; }
.enc-screen:focus-within .bh-tile.is-focus { outline: .3cqw solid #72bfe6; outline-offset: .3cqw; }
.bh-more { position: relative; margin-top: 2.6cqw; }
.bh-more-h { font-size: 1.4cqw; color: #f27ab7; font-weight: 500; }
.bh-more ul { list-style: none; margin: 1cqw 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw 2cqw; font-size: 1.4cqw; color: #9fd4ef; }
.bh-seesaw { position: absolute; left: 41%; top: 6%; width: 42%; height: 46%; }
.bh-plank { position: absolute; left: 0; right: 0; top: 41%; height: 3.5%; background: #72bfe6; transform-origin: 50% 50%; transform: rotate(-4deg); }
.bh-ball { position: absolute; left: 4%; bottom: 100%; width: 25%; aspect-ratio: 1; border-radius: 50%; background: #e8529f; }
.bh-dots { position: absolute; right: 0; bottom: 100%; width: 17%; aspect-ratio: 1; background: radial-gradient(#72bfe6 .16cqw, transparent .19cqw) 0 0 / .62cqw .62cqw; box-shadow: inset 0 0 0 .14cqw #72bfe6; }
.bh-fulcrum { position: absolute; left: 50%; top: 44%; width: 32%; height: 56%; transform: translateX(-50%); clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #b9a6e8; }
.bh-time { position: absolute; left: 3%; top: 26%; font-size: 15cqw; line-height: 1; font-weight: 500; color: #5aa9d8; letter-spacing: -.02em; display: flex; }
.bh-time sup { font-size: 3cqw; color: #f27ab7; margin: 1.6cqw 0 0 1cqw; font-weight: 500; }
.bh-line { position: absolute; left: 3%; right: 6%; top: 52.5%; height: .25cqw; background: #8fb6cf; }
.bh-cols { position: absolute; left: 3%; right: 5%; top: 57%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3cqw; font-size: 1.6cqw; }
.bh-cols span { display: block; }
.bh-h { color: #f27ab7; font-weight: 500; }
.bh-big { font-size: 2.2cqw; color: #9fd4ef; margin-top: .9cqw; }
.bh-blue { color: #5aa9d8; font-weight: 600; text-transform: lowercase; }
.bh-soft { color: #8aa9c0; margin-top: .4cqw; }
.bh-quote { color: #9fc6e0; margin-top: .9cqw; line-height: 1.35; }
.bh-cols .bh-house2 { display: flex; align-items: center; gap: .8cqw; color: #f27ab7; margin-top: 1.6cqw; }
.bh-house2 i { width: .9cqw; height: .9cqw; background: #f27ab7; flex: none; }
.enc-screen[data-skin="bauhaus"] .enc-notice { background: #c43a82; color: #fff; font-family: Jost, var(--sans); border-radius: 0; }
.enc-screen[data-skin="bauhaus"] .enc-notice i { background: #fff; border-radius: 0; }
.enc-screen[data-skin="bauhaus"] .enc-app { background: rgba(27,27,42,.95); color: #9fd4ef; }
.enc-screen[data-skin="bauhaus"] .enc-app-name { font-family: Jost, var(--sans); font-weight: 500; text-transform: lowercase; color: #f27ab7; }
@media (prefers-reduced-motion: reduce) { .bh-tile { transition: none; } }

/* ===== Why Encore: problem, what it adds, platform in one band (2026-11-08 trim) ===== */
.why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why-card { display: flex; flex-direction: column; }
.why-card h3 { font-size: 1.45rem; }
.why-k { display: inline-flex; align-items: center; gap: 9px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-3); margin-bottom: 16px; }
.why-k i { width: 7px; height: 7px; border-radius: 50%; background: #4cc3ee; box-shadow: 0 0 8px #00a6db; }
.why-card .checks { margin-top: 18px; }
.why-card .checks li { font-size: .95rem; margin-bottom: 10px; }
.why-card .checks li:last-child { margin-bottom: 0; }
/* line up the label, heading, text and list across the three cards */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    .why-grid { grid-template-rows: repeat(4, auto); row-gap: 0; }
    .why-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .why-card .checks { align-self: start; }
  }
}
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } .why-card p { max-width: 40em; } }