/* CITY Films — Media Player skin. Year-2000 media-player chrome: blue gradient skin windows on a desktop, taskbar left, playlist right. */
:root {
  --desk-1: #3f78b8; --desk-2: #1f4d84;
  --skin-hi: #f4f8fd; --skin-1: #dfe9f7; --skin-2: #9db7dd; --skin-3: #5b80b8; --skin-4: #2c4f86; --skin-edge: #1d3a66;
  --glass: #0a1626; --lcd: #9fe870; --lcd-dim: #6f9c58;
  --text: #0d1f3a; --white: #ffffff; --gold-1: #ffe58a; --gold-2: #f0b324; --gold-edge: #a8700b;
  --row: #eef3fb; --warn: #fff7d6; --warn-edge: #d9b44a;
  --ui: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  --mono: "Lucida Console", Monaco, "Courier New", monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: linear-gradient(160deg, var(--desk-1) 0%, var(--desk-2) 100%) fixed; color: var(--text); font: 13px/1.5 var(--ui);
  padding: 18px max(12px, env(safe-area-inset-right, 0px)) 32px max(12px, env(safe-area-inset-left, 0px)); }
body > .win, body > .row { margin: 0 auto 16px; }
a { color: #0b3d91; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 6px 10px; z-index: 9; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px dotted var(--gold-2); outline-offset: 2px; }

/* Skin windows */
.win { width: 100%; max-width: 1080px; min-width: 0; border-radius: 18px 18px 12px 12px; padding: 6px; scroll-margin-top: 16px;
  background: linear-gradient(180deg, var(--skin-hi) 0%, var(--skin-2) 40%, var(--skin-3) 100%);
  box-shadow: 0 0 0 1px var(--skin-edge), 0 16px 36px rgba(0,0,0,.4), inset 0 1px 0 #fff; }
.titlebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 14px 8px; border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, #6f97d3 0%, var(--skin-4) 100%); color: var(--white); font-weight: bold; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.tb-name { display: flex; align-items: center; gap: 8px; }
.orb { width: 16px; height: 16px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff 0 15%, #ffcf3c 30%, #e07b00 80%); box-shadow: 0 0 0 1px #8a4b00; }
.tb-btns { display: flex; gap: 4px; }
.tb-btns i { width: 18px; height: 16px; border-radius: 4px; background: linear-gradient(#a9c3ea, #4c71ab); box-shadow: inset 0 0 0 1px #24426f; }
.tb-btns i.x { background: linear-gradient(#f4a289, #c3401f); }
.pane { margin: 0; padding: 7px 12px; font-size: 13px; color: var(--white); text-shadow: 0 1px 0 rgba(0,0,0,.5);
  background: linear-gradient(180deg, var(--skin-3), var(--skin-4)); border-radius: 9px 9px 0 0; }
.pane.big { font-size: 14px; border-radius: 13px 13px 4px 4px; padding: 9px 14px; }
.body { margin-top: 6px; padding: 14px 16px; background: linear-gradient(180deg, #f6f9fe, var(--skin-1)); border-radius: 6px 6px 8px 8px; box-shadow: inset 0 0 0 1px #6f8fc0; }
.body p { margin: 0 0 10px; max-width: 68ch; }
.status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 5px 12px 1px; color: var(--white); font-size: 11px; text-shadow: 0 1px 0 rgba(0,0,0,.5); }

/* Main deck */
.deck { display: grid; grid-template-columns: 150px minmax(0, 1fr) 270px; gap: 6px; padding-top: 6px; }
.taskbar { background: linear-gradient(180deg, var(--skin-3), var(--skin-4)); border-radius: 10px; padding: 8px 6px; display: flex; flex-direction: column; gap: 4px; }
.taskbar a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--white); text-decoration: none; font-weight: bold; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.taskbar a.on, .taskbar a:hover { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: #3a2500; text-shadow: none; box-shadow: inset 0 0 0 1px var(--gold-edge); }
.stage { background: var(--glass); border-radius: 10px; box-shadow: inset 0 0 0 2px #1b2f4d; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.lcd { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; color: var(--lcd); font: bold 12px/1.3 var(--mono); border-bottom: 1px solid #1d3352; }
.lcd b { font-weight: bold; }
.lcd-dim { color: var(--lcd-dim); font-variant-numeric: tabular-nums; }
.viz { position: relative; flex: 1; min-height: 290px; }
.viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cap { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: var(--white); text-shadow: 0 2px 6px #000; padding: 0 12px; }
.cap h1 { margin: 0; font: bold clamp(26px, 4vw, 40px)/1.05 "Trebuchet MS", var(--ui); letter-spacing: .04em; }
.cap p { margin: 2px 0 0; }
.controls { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(180deg, #c9daf2, #7d9fd2); }
.ctl { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #fff 0 10%, #9cc0ef 35%, #2f5b9b 100%); box-shadow: 0 1px 2px rgba(0,0,0,.45); }
.ctl.play { width: 46px; height: 46px; background: radial-gradient(circle at 40% 30%, #fff 0 10%, #9fe870 35%, #2e7d1d 100%); }
.ctl span { display: block; width: 0; height: 0; border-style: solid; }
.ctl.play span { border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.ctl.play.on span { width: 12px; height: 14px; border: 0; border-left: 4px solid #fff; border-right: 4px solid #fff; margin-left: 0; }
.ctl.prev span { border-width: 6px 9px 6px 0; border-color: transparent #fff transparent transparent; box-shadow: -3px 0 0 #fff; }
.ctl.next span { border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff; box-shadow: 3px 0 0 #fff; }
.seek { flex: 1; min-width: 40px; height: 8px; border-radius: 4px; background: var(--skin-4); box-shadow: inset 0 1px 2px #000; position: relative; overflow: hidden; }
.seek i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#bff79a, #4fa73a); }
.msg { font-size: 11px; color: var(--text); white-space: nowrap; }

.side { background: linear-gradient(180deg, #eef4fc, #c6d8f1); border-radius: 10px; box-shadow: inset 0 0 0 1px #6f8fc0; display: flex; flex-direction: column; min-width: 0; }
.playlist { list-style: none; margin: 0; padding: 4px; }
.playlist button { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; text-align: left; padding: 7px 6px; border: 0; border-radius: 4px; background: none; font: inherit; color: inherit; cursor: pointer; }
.playlist button:hover { background: #dbe6f6; }
.playlist button.on { background: var(--skin-4); color: var(--white); }
.playlist small { display: block; opacity: .8; font-size: 11px; }
.info { margin: auto 6px 6px; padding: 10px; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px #9db7dd; }
.info h3 { margin: 0 0 4px; font-size: 13px; }
.info p { margin: 0 0 10px; }
.pill { display: inline-block; padding: 5px 14px; border-radius: 12px; background: linear-gradient(#fff, #c9daf2); border: 1px solid var(--skin-4); color: var(--text); text-decoration: none; font-weight: bold; }
.pill:hover { background: linear-gradient(var(--gold-1), var(--gold-2)); border-color: var(--gold-edge); }

/* Media guide */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: center; }
.guide-screen { aspect-ratio: 4 / 3; max-width: 100%; background: var(--glass); border-radius: 8px; box-shadow: inset 0 0 0 2px #1b2f4d; display: grid; place-content: center; text-align: center; color: var(--white); padding: 12px; }
.guide-screen span { font: bold clamp(24px, 3.4vw, 36px)/1.1 "Trebuchet MS", var(--ui); letter-spacing: .03em; }
.guide-screen small { margin-top: 10px; color: var(--lcd); font: bold 11px/1.3 var(--mono); }
.hook { font: bold 17px/1.35 "Trebuchet MS", var(--ui); color: var(--skin-4); }

/* Slate table */
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--white); }
th { text-align: left; font-weight: normal; padding: 5px 8px; background: linear-gradient(#f4f4f4, #d9d9d9); border: 1px solid #a8a8a8; }
td { padding: 6px 8px; border: 1px solid #d0d0d0; }
tbody tr:nth-child(even) td { background: var(--row); }

.row { width: 100%; max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.check { list-style: none; padding: 0; margin: 0 0 12px; }
.check li { padding: 4px 0 4px 22px; position: relative; }
.check li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 10px; border-radius: 2px; background: linear-gradient(#bff79a, #4fa73a); box-shadow: inset 0 0 0 1px #2e7d1d; }
.warn { padding: 10px; margin-bottom: 10px; border-radius: 6px; background: var(--warn); border: 1px solid var(--warn-edge); }
.links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (max-width: 860px) {
  .deck { grid-template-columns: minmax(0, 1fr); }
  .taskbar { flex-direction: row; overflow-x: auto; }
  .taskbar a { white-space: nowrap; }
  .viz { min-height: 220px; }
  .two, .row { grid-template-columns: minmax(0, 1fr); }
  .msg { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }