:root { color-scheme: light; color-scheme: only light; }
/*
 * iBønn TV for Samsung Tizen. Designflaten er 1920 × 1080 px og skaleres til skjermen i main.js.
 * Bare CSS som virker i Chromium 63 (Tizen 5.0): ingen flexbox-gap, aspect-ratio eller inset.
 */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-Medium.ttf') format('truetype'); font-weight: 500; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-SemiBold.ttf') format('truetype'); font-weight: 600; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype'); font-weight: 800; }
@font-face { font-family: 'Al Mushaf'; src: url('../fonts/AlMushafQuran.ttf') format('truetype'); }

html, body {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #06252F;
  -webkit-user-select: none; user-select: none;
  cursor: default;
}

#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden;
  transform-origin: 0 0;
  background: #06252F;
  color: #fff;
  font-family: 'Plus Jakarta Sans', 'Samsung One', 'Tizen Sans', sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#boot {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  background: #06252F url('../images/splash.png') center / cover no-repeat;
}

*, *::before, *::after { box-sizing: border-box; }

.app, .layer-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.screen { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; }

.row { display: flex; flex-direction: row; }
.col { display: flex; flex-direction: column; }
.box { position: relative; }
.center { display: flex; align-items: center; justify-content: center; }
.ac { align-items: center; }
.f1 { flex: 1 1 0; min-width: 0; min-height: 0; }
.t { flex: none; max-width: 100%; }
.row > .t { max-width: none; }
.arabic { font-family: 'Al Mushaf', serif; line-height: 1.5; white-space: nowrap; }
.icon { display: block; }

/* Fokus (som tvFocusCard på Android TV): hvitt, større og med skygge. */
.focusable { transition: transform 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out; }
.focusable.is-focused { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); z-index: 2; }
.card.is-focused { transform: scale(1.08); }
.col.card.is-focused[data-f^="mode:"] { transform: scale(1.05); }
.box.is-focused[data-f^="k:"] { transform: scale(1.06); }
.box.is-focused[data-f^="exit:"] { transform: scale(1.06); }
.search.is-focused { box-shadow: inset 0 0 0 3px #8FE0B6; transform: none; }

.search-input {
  position: absolute; left: 0; top: 0; width: 100%; height: 88px;
  border: 0; outline: 0; background: transparent; padding: 0; margin: 0;
  font-family: inherit; font-size: 32px; font-weight: 700;
  -webkit-user-select: text; user-select: text;
}

.grid-scroll { transition: transform 250ms ease-out; }

/* Plakater */
.layers { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; }
.layer.on { opacity: 1; }
.fade8 { transition: opacity 800ms ease-in-out; }
img.fit { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
img.cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
img.blurred { -webkit-filter: blur(48px); filter: blur(48px); opacity: 0.55; transform: scale(1.1); }
.dot { transition: width 250ms ease-out; flex: none; }

@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.fadein3 { -webkit-animation: fadein 300ms ease-out; animation: fadein 300ms ease-out; }
.fadein6 { -webkit-animation: fadein 600ms ease-out; animation: fadein 600ms ease-out; }

/* Klokkemerker i Dagslys: sentrert om punktet */
.pill-at { position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); white-space: nowrap; }

/* Lasting */
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { flex: none; border-style: solid; border-radius: 50%; -webkit-animation: spin 900ms linear infinite; animation: spin 900ms linear infinite; }

@-webkit-keyframes pulse-bg { from { background-color: rgba(255,255,255,0.05); } to { background-color: rgba(255,255,255,0.12); } }
@keyframes pulse-bg { from { background-color: rgba(255,255,255,0.05); } to { background-color: rgba(255,255,255,0.12); } }
.skeleton { -webkit-animation: pulse-bg 800ms ease-in-out infinite alternate; animation: pulse-bg 800ms ease-in-out infinite alternate; }

/* Fullskjermvarsel: pulserende ring rundt ikonet */
@-webkit-keyframes ring { from { -webkit-transform: scale(1); opacity: 0.55; } to { -webkit-transform: scale(1.7); opacity: 0; } }
@keyframes ring { from { transform: scale(1); opacity: 0.55; } to { transform: scale(1.7); opacity: 0; } }
.pulse {
  position: absolute; left: 0; top: 0; width: 168px; height: 168px; border-radius: 50%;
  border: 4px solid #8FE0B6;
  -webkit-animation: ring 2400ms linear infinite; animation: ring 2400ms linear infinite;
}

/* «Ingen nett» */
.offline-badge { opacity: 0; transition: opacity 600ms ease-in-out; }
.offline-badge.on { opacity: 1; }

.overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .fade8, .focusable, .dot, .offline-badge { transition: none; }
  .pulse { display: none; }
}