@font-face { font-family:'DSEG7'; src:url('assets/fonts/DSEG7Classic-Bold.ttf') format('truetype'); }

* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; background:#05070C; overflow:hidden;
  font-family:'Helvetica Neue',Arial,sans-serif; }

/* Center the 1920x1080 stage in the window. A fixed full-window flex container
   centers its child; the stage is only scaled (no positioning tricks). */
#viewport { position:fixed !important; left:0 !important; top:0 !important;
  width:100vw !important; height:100vh !important; margin:0 !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:#05070C; overflow:hidden; z-index:2147483647; }
#stage { position:relative !important; flex:0 0 auto !important;
  width:1920px !important; height:1080px !important; margin:0 !important; padding:0 !important;
  background:#05070C; transform-origin:center center; transform:scale(1); }

.abs { position:absolute; }
.lbl { white-space:nowrap; color:#fff; line-height:1; }
.lbl.ctr { text-align:center; }
.bold { font-weight:bold; }
.box { }

.screen { position:absolute; inset:0; opacity:0; transition:opacity .4s ease;
  pointer-events:none; }
.screen.active { opacity:1; pointer-events:auto; }

/* boot — splash exists at first; video created in JS, splash fades to reveal it. */
#boot { background:#000; display:flex; align-items:center; justify-content:center; }
#boot.introout { opacity:0; transition:opacity .8s ease-out; }
#boot #introSplash { position:absolute; inset:0; width:1920px; height:1080px; object-fit:cover;
  z-index:10; opacity:1; transition:opacity .7s ease-out; }
#boot #introSplash.hide { opacity:0; pointer-events:none; }

/* LED clock row: image glyphs, faithful to ClockScreen (image-based) */
.ledrow { display:flex; justify-content:center; align-items:center; gap:6px; height:150px; }
.ledcell { position:relative; height:128px; }
.ledcell.digit { width:104px; }
.ledcell.colon { width:26px; }
.ledcell img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; }
.ledcell .ghost { opacity:1; }

/* recent QSO rows */
.qso { display:flex; align-items:center; gap:14px;
  padding:0 18px 0 22px; height:61px; position:relative; border-bottom:1px solid #ffffff10; }
.qso .qflag { width:40px; height:27px; flex:0 0 40px; object-fit:cover; border-radius:2px; }
.qso .qinfo { flex:1 1 auto; min-width:0; }
.qso .c { font-size:30px; color:#E8ECF6; font-weight:bold; line-height:1.05; }
.qso .cc { font-size:18px; color:#5A9ABF; line-height:1.05; }
.qso .m { font-size:22px; color:#3FD6C2; flex:0 0 auto; text-align:right; }
.qso.sel { background:rgba(63,214,194,0.22) !important; box-shadow: inset 5px 0 0 0 #3FD6C2 !important; }
.qso.sel::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#3FD6C2; }

/* dx rows */
.dxrow { background:#0A1626; margin-bottom:12px; padding:20px 28px; 
  display:flex; justify-content:space-between; align-items:center; }
.dxrow .a { font-size:34px; color:#E8ECF6; font-weight:bold; }
.dxrow .b { font-size:30px; color:#7EC8F7; }

/* map dots */
.mapdot { position:absolute; width:10px; height:10px; border-radius:50%;
  background:#FF6B5A; transform:translate(-50%,-50%); }
.mapdot.home { background:#F5A623; width:16px; height:16px; box-shadow:0 0 8px #F5A623; }
.mapdot.seldot { background:#3FD6C2; width:18px; height:18px; box-shadow:0 0 10px #3FD6C2; z-index:5; }

/* onboarding / menu buttons */
.welbtn { display:flex; align-items:center; justify-content:center; text-align:center; }
.welbtn.focused { outline:4px solid #3FD6C2; filter:brightness(1.15); }
.set-row { display:flex; justify-content:space-between; align-items:center; height:64px;
  padding:0 20px; font-size:28px; color:#D8E2EE; border-bottom:1px solid #ffffff10; }
.set-row.sel { background:#3FD6C21F; color:#fff; }
.set-row .val { color:#3FD6C2; font-weight:bold; }
.ov-badge { display:inline-block; background:#12325a55; color:#9FD2F0; border:1px solid #3FD6C255;
   padding:10px 24px; margin:8px; font-size:26px; }
.guide-row { display:flex; align-items:center; gap:24px; height:62px; font-size:28px; color:#D8E2EE; }
.guide-key { min-width:120px; color:#3FD6C2; font-weight:bold; }
.kbkey { display:inline-block; width:88px; height:84px; line-height:84px; text-align:center;
  background:#16273F; color:#fff; font-size:40px;  }
.kbkey.sel { background:#3FD6C2; color:#06121A; }