/* Seatback IFE player — seat-back leather, plastic IFE housing, glossy bezel, 16:9 screen.
   All on-screen sizing uses --u (1% of screen width) set from JS, so it scales on any laptop. */

:root {
  --navy: #0b1a33; --navy2: #102446; --ink: #f4f7fb; --muted: rgba(230, 238, 248, 0.68);
  --accent: #4fb3ff; --accent2: #8fd3ff; --good: #3fdc8a; --warn: #ffb020; --alert: #ff4d4d;
  --u: 10px;
  --font: 'Barlow', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c1a19; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; user-select: none; }

/* ------------------------------------------------------------ the seat */
#seat {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,0.07), rgba(0,0,0,0) 55%),
    radial-gradient(140% 120% at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='g'><feTurbulence type='turbulence' baseFrequency='0.045' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    linear-gradient(180deg, #34302d 0%, #2a2725 45%, #221f1e 100%);
}
/* stitched seams of the seat-back panel */
#seat::before, #seat::after {
  content: ''; position: absolute; pointer-events: none;
  left: 3.2vw; right: 3.2vw; border-radius: 3vw;
}
#seat::before { top: 2.2vh; bottom: 2.2vh; border: 1.5px dashed rgba(190, 175, 160, 0.28); box-shadow: inset 0 0 0 4px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.25); }
#seat::after  { top: 3.4vh; bottom: 3.4vh; left: 4.4vw; right: 4.4vw; border: 1px solid rgba(0,0,0,0.28); box-shadow: 0 1px 0 rgba(255,255,255,0.04); }

/* tray-table latch above the screen */
#latch {
  position: relative; z-index: 1; width: calc(var(--sw) * 0.12); height: calc(var(--sw) * 0.022); margin-bottom: calc(var(--sw) * 0.022);
  border-radius: 999px; background: linear-gradient(180deg, #4a4643, #2b2826); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 4px rgba(0,0,0,0.6);
}
#latch::after { content: ''; position: absolute; left: 30%; right: 30%; top: 35%; height: 30%; border-radius: 999px; background: #1b1918; box-shadow: inset 0 1px 2px #000; }

/* ------------------------------------------------------------ IFE housing + bezel */
#unit {
  position: relative; z-index: 1; padding: calc(var(--sw) * 0.022) calc(var(--sw) * 0.022) calc(var(--sw) * 0.05);
  border-radius: calc(var(--sw) * 0.03);
  background: linear-gradient(180deg, #3b3d42 0%, #2a2c30 60%, #222428 100%);
  box-shadow: 0 1.2vw 3vw rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -2px 6px rgba(0,0,0,0.5);
}
#bezel {
  position: relative; padding: calc(var(--sw) * 0.012); border-radius: calc(var(--sw) * 0.016);
  background: linear-gradient(160deg, #111214 0%, #050506 55%, #0d0e10 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 2px 8px rgba(0,0,0,0.9);
}
#screen {
  position: relative; width: var(--sw); height: calc(var(--sw) * 9 / 16); overflow: hidden; background: #000;
  border-radius: calc(var(--sw) * 0.004);
  container-type: size;
}
/* glass glare */
#screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 50;
  background: linear-gradient(115deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.03) 100%);
}
#ports {
  position: absolute; left: 0; right: 0; bottom: calc(var(--sw) * 0.014); display: flex; justify-content: center; align-items: center; gap: calc(var(--sw) * 0.016);
}
.port-usb { width: calc(var(--sw) * 0.03); height: calc(var(--sw) * 0.011); border-radius: 2px; background: #0b0b0c; box-shadow: inset 0 0 0 2px #1a1b1d, inset 0 -3px 0 #2f3035; }
.port-jack { width: calc(var(--sw) * 0.013); height: calc(var(--sw) * 0.013); border-radius: 50%; background: radial-gradient(circle, #000 40%, #2a2b2e 45%, #17181a 70%); }
.port-label { font: 600 calc(var(--sw) * 0.0075) var(--font); letter-spacing: .12em; color: rgba(255,255,255,0.28); }
#led { width: calc(var(--sw) * 0.006); height: calc(var(--sw) * 0.006); border-radius: 50%; background: #333; margin-left: calc(var(--sw) * 0.03); transition: background .3s, box-shadow .3s; }
#led.ok { background: #46e08b; box-shadow: 0 0 6px #46e08b; }
#led.retry { background: #ffb020; box-shadow: 0 0 6px #ffb020; }
#led.offline { background: #ff4d4d; box-shadow: 0 0 6px #ff4d4d; }

/* ------------------------------------------------------------ screen layers */
.layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.layer.on { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.layer.cut, .layer.cut.on { transition: none; }
.layer > img.fill, .layer > video.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#L-image img.fill.kb { animation: kb 30s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.0); } to { transform: scale(1.07) translate(-1%, -1%); } }
#L-black { background: #000; }
#ending { position: absolute; inset: 0; background: #000; z-index: 60; display: none; }
#ending.on { display: block; }

.caption {
  position: absolute; left: calc(var(--u) * 4); bottom: calc(var(--u) * 3.4); max-width: 70%;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 0.6);
  background: rgba(8, 22, 46, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-left: calc(var(--u) * 0.35) solid var(--accent);
  font: 600 calc(var(--u) * 2.3) / 1.2 var(--font); letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.caption:empty { display: none; }

/* video placard overlay */
.overlay-card {
  position: absolute; width: calc(var(--u) * 30); border-radius: calc(var(--u) * 1); overflow: hidden;
  background: #fff; box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 2.5) rgba(0,0,0,0.5); transform-origin: center;
  animation: popin .6s cubic-bezier(.2,1.4,.4,1) both;
}
.overlay-card img { display: block; width: 100%; }
.overlay-card.tl { top: calc(var(--u) * 3); left: calc(var(--u) * 3); }
.overlay-card.tr { top: calc(var(--u) * 3); right: calc(var(--u) * 3); }
.overlay-card.bl { bottom: calc(var(--u) * 3); left: calc(var(--u) * 3); }
.overlay-card.br { bottom: calc(var(--u) * 3); right: calc(var(--u) * 3); }
.overlay-card:not([data-src]), .overlay-card[data-src=""] { display: none; }
@keyframes popin { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ IFE chrome (status bar) */
.ife-bar {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 5.2); display: flex; align-items: center; gap: calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 2.6); z-index: 5;
  background: linear-gradient(180deg, rgba(4, 12, 28, 0.85), rgba(4, 12, 28, 0.0));
  font: 600 calc(var(--u) * 1.5) var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.ife-bar .brand { color: var(--ink); font: 700 calc(var(--u) * 1.8) var(--font); letter-spacing: .02em; text-transform: none; display: flex; align-items: center; gap: calc(var(--u) * 0.8); }
.ife-bar .brand svg { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); }
.ife-bar .sp { flex: 1; }

/* ------------------------------------------------------------ boot / idle */
#L-boot, #L-idle { background: radial-gradient(120% 120% at 30% 20%, #1d4f8f 0%, #0b2552 45%, #050f24 100%); }
#L-idle img.fill { opacity: .55; }
.center-stack { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2); text-align: center; padding: calc(var(--u) * 4); }
.hello { font: 300 calc(var(--u) * 6.2) / 1 var(--font); letter-spacing: -.01em; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hello b { font-weight: 600; }
.sub { font: 500 calc(var(--u) * 2) var(--font); color: var(--muted); max-width: 70%; }
.ife-btn {
  appearance: none; border: 0; cursor: pointer; color: #04203f; background: linear-gradient(180deg, #ffffff, #dbe9f7);
  font: 700 calc(var(--u) * 2.2) var(--font); letter-spacing: .04em; padding: calc(var(--u) * 1.4) calc(var(--u) * 4.4); border-radius: 999px;
  box-shadow: 0 calc(var(--u) * 0.4) calc(var(--u) * 1.6) rgba(0,0,0,.35);
}
.ife-btn:active { transform: scale(.97); }
.ife-btn[disabled] { opacity: .5; cursor: progress; }
.progress { width: calc(var(--u) * 40); height: calc(var(--u) * 0.6); border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #ffffff); transition: width .2s; }
.small { font: 500 calc(var(--u) * 1.4) var(--font); color: var(--muted); letter-spacing: .04em; }
.chiprow { display: flex; gap: calc(var(--u) * 1); flex-wrap: wrap; justify-content: center; }
.chip { font: 600 calc(var(--u) * 1.3) var(--font); letter-spacing: .06em; text-transform: uppercase; padding: calc(var(--u) * .5) calc(var(--u) * 1.2); border-radius: 999px; background: rgba(255,255,255,.12); color: var(--muted); }
.chip.ok { background: rgba(63, 220, 138, .2); color: #bff5d6; }
.chip.bad { background: rgba(255, 77, 77, .2); color: #ffd0d0; }

/* ------------------------------------------------------------ text announcement */
#L-text { background: radial-gradient(130% 130% at 50% 0%, #17396d 0%, #0a1f45 50%, #050e22 100%); }
#L-text.alert { background: radial-gradient(130% 130% at 50% 0%, #6d1717 0%, #3a0a0a 55%, #160404 100%); }
#L-text .icon { width: calc(var(--u) * 13); height: calc(var(--u) * 13); filter: drop-shadow(0 0 calc(var(--u) * 2) rgba(255,255,255,.25)); }
#L-text .title { font: 700 calc(var(--u) * 5.6) / 1.05 var(--cond); letter-spacing: .02em; text-transform: uppercase; }
#L-text .body { font: 500 calc(var(--u) * 2.3) / 1.35 var(--font); color: var(--muted); max-width: 72%; white-space: pre-line; }
#L-text.blink .icon { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ------------------------------------------------------------ recognizer */
#L-recog { background: #040a16; }
#camWrap { position: absolute; inset: 0; transform: scaleX(-1); }
#camWrap video, #camWrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#camWrap video { filter: saturate(.85) brightness(.85) contrast(1.05); }
#L-recog .shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(4,12,30,.92) 0%, rgba(4,12,30,.72) 34%, rgba(4,12,30,.0) 56%),
  linear-gradient(0deg, rgba(4,12,30,.75) 0%, rgba(4,12,30,0) 22%),
  linear-gradient(180deg, rgba(4,12,30,.7) 0%, rgba(4,12,30,0) 20%); }
#L-recog.nocam .shade { background: radial-gradient(120% 120% at 70% 50%, #123465, #050f24); }
.r-head { position: absolute; left: calc(var(--u) * 3.4); top: calc(var(--u) * 3); right: 45%; }
.r-kicker { font: 700 calc(var(--u) * 1.45) var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--accent2); display: flex; align-items: center; gap: calc(var(--u) * .8); }
.r-kicker::before { content: ''; width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; background: var(--alert); box-shadow: 0 0 calc(var(--u)*.8) var(--alert); animation: blink 1.2s infinite; }
.r-title { margin-top: calc(var(--u) * 1); font: 700 calc(var(--u) * 5) / 1.0 var(--cond); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.r-sub { margin-top: calc(var(--u) * 1.1); font: 500 calc(var(--u) * 1.9) / 1.3 var(--font); color: var(--muted); }
.r-card {
  position: absolute; left: calc(var(--u) * 3.4); bottom: calc(var(--u) * 3.4); width: calc(var(--u) * 36); border-radius: calc(var(--u) * 1.2);
  overflow: hidden; background: #fff; box-shadow: 0 calc(var(--u)*.8) calc(var(--u)*3) rgba(0,0,0,.55);
  transition: transform .35s cubic-bezier(.2,1.4,.4,1), box-shadow .35s;
}
.r-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.r-chips { position: absolute; left: calc(var(--u) * 41); bottom: calc(var(--u) * 3.6); display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.r-meter { width: calc(var(--u) * 15); }
.r-meter span { display: block; font: 600 calc(var(--u) * 1.2) var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: calc(var(--u) * .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-meter i { display: block; height: calc(var(--u) * .7); border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.r-meter i b { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }
.r-meter.hit i b { background: var(--good); }
.r-timer { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 3); width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.r-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.r-timer .num { position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(var(--u) * 2.8) var(--cond); }
.r-ok {
  position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 3.4); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4); border-radius: 999px;
  background: rgba(63, 220, 138, .95); color: #032313; font: 700 calc(var(--u) * 2.4) var(--font); letter-spacing: .03em;
  opacity: 0; transform: translateY(calc(var(--u) * 1)) scale(.9); transition: opacity .25s, transform .35s cubic-bezier(.2,1.4,.4,1);
}
#L-recog.hit .r-ok { opacity: 1; transform: none; }
#L-recog.hit .r-card { transform: scale(1.03); box-shadow: 0 0 0 calc(var(--u)*.5) var(--good), 0 calc(var(--u)*.8) calc(var(--u)*3) rgba(0,0,0,.55); }
.r-flash { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 calc(var(--u) * .9) var(--good); opacity: 0; transition: opacity .5s; }
#L-recog.hit .r-flash { opacity: 1; transition: opacity .05s; }
.r-nocam { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 10); display: none; }
#L-recog.nocam .r-nocam { display: block; }

/* ------------------------------------------------------------ map */
#L-map { background: #02060f; }
#mapBox { position: absolute; inset: 0; }

/* ------------------------------------------------------------ preview / debug */
#debug { position: fixed; left: 8px; bottom: 8px; z-index: 100; font: 11px/1.35 ui-monospace, Menlo, monospace; color: #9fb3c8; background: rgba(0,0,0,.6); padding: 6px 8px; border-radius: 6px; white-space: pre; display: none; pointer-events: none; }
body.debug #debug { display: block; }
body.preview #seat::before, body.preview #seat::after, body.preview #latch { display: none; }
body.preview #seat { background: #000; }
body.preview #unit { padding: 0; background: none; box-shadow: none; border-radius: 0; }
body.preview #bezel { padding: 0; border-radius: 0; }
body.preview #ports { display: none; }
#previewAudio { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(0,0,0,.55); color: #fff; font: 600 14px system-ui; cursor: pointer; }
#previewAudio.on { display: grid; }