:root {
  --presentation-ink: #f9f5ec;
  --presentation-dark: #17262a;
}

.player-screen {
  min-height: 100dvh;
  background: #111a1c;
  color: var(--presentation-ink);
}

.player-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(44px, 1fr) minmax(0, 2fr) minmax(110px, 1fr);
  align-items: center;
  min-height: 68px;
  padding: 10px clamp(14px, 3vw, 38px);
  background: rgba(17, 26, 28, .96);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.player-header > strong { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.player-header .back-icon,
.player-header-actions button { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); }
.player-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.player-header-actions span { font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.player-header-actions button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }

.player-stage {
  display: grid;
  place-items: center;
  height: calc(100dvh - 142px);
  min-height: 480px;
  padding: clamp(8px, 1.5vw, 20px);
}

.player-slide {
  --layout-rgb: 18, 27, 30;
  --layout-accent: 224, 173, 88;
  --slide-accent: #e0ad58;
  --overlay-strength: .76;
  --overlay-mid: .65;
  --overlay-soft: .3;
  --text-width: 46%;
  position: relative;
  isolation: isolate;
  width: min(100%, 1600px);
  max-height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(16px, 2vw, 30px);
  background: rgb(var(--layout-rgb));
  box-shadow: 0 24px 80px rgba(0,0,0,.32);
}

.player-slide > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform .25s ease, object-position .25s ease;
}

.player-text-card {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--text-width);
  min-width: 34%;
  max-width: 64%;
  padding: clamp(38px, 5vw, 82px);
  color: var(--presentation-ink);
  text-align: left;
}

.layout-left .player-text-card { left: 0; }
.layout-right .player-text-card { right: 0; }
.layout-bottom .player-text-card {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 42%;
  padding: clamp(28px, 4vw, 58px) clamp(36px, 6vw, 92px);
}

.panel-gradient.layout-left .player-slide,
.panel-gradient.layout-right .player-slide,
.panel-gradient.layout-bottom .player-slide { background: rgb(var(--layout-rgb)); }
.panel-gradient.layout-left::after,
.panel-gradient.layout-right::after,
.panel-gradient.layout-bottom::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.panel-gradient.layout-left::after {
  inset: 0 34% 0 0;
  background: linear-gradient(90deg, rgba(var(--layout-rgb), var(--overlay-strength)) 0%, rgba(var(--layout-rgb), var(--overlay-mid)) 62%, transparent 100%);
}
.panel-gradient.layout-right::after {
  inset: 0 0 0 34%;
  background: linear-gradient(270deg, rgba(var(--layout-rgb), var(--overlay-strength)) 0%, rgba(var(--layout-rgb), var(--overlay-mid)) 62%, transparent 100%);
}
.panel-gradient.layout-bottom::after {
  inset: 42% 0 0;
  background: linear-gradient(0deg, rgba(var(--layout-rgb), var(--overlay-strength)) 0%, rgba(var(--layout-rgb), var(--overlay-mid)) 70%, transparent 100%);
}

.panel-glass .player-text-card,
.panel-solid .player-text-card {
  top: auto;
  bottom: clamp(22px, 4vw, 58px);
  height: auto;
  max-height: calc(100% - clamp(44px, 8vw, 116px));
  margin-inline: clamp(22px, 4vw, 58px);
  padding: clamp(24px, 3vw, 46px);
  border-left: 4px solid var(--slide-accent);
  border-radius: 8px 24px 24px 8px;
  box-shadow: 0 18px 55px rgba(0,0,0,.2);
}
.panel-glass .player-text-card {
  background: rgba(var(--layout-rgb), calc(var(--overlay-strength) * .82));
  border-top: 1px solid rgba(255,255,255,.16);
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px) saturate(115%);
}
.panel-solid .player-text-card { background: rgba(var(--layout-rgb), var(--overlay-strength)); }
.panel-glass.layout-right .player-text-card,
.panel-solid.layout-right .player-text-card { border-right: 4px solid var(--slide-accent); border-left-width: 0; border-radius: 24px 8px 8px 24px; }
.panel-glass.layout-bottom .player-text-card,
.panel-solid.layout-bottom .player-text-card { width: calc(100% - clamp(44px, 8vw, 116px)); min-height: 0; margin-inline: clamp(22px, 4vw, 58px); border-radius: 18px; }

.panel-none .player-text-card { text-shadow: 0 2px 18px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.95); }
.panel-none::after { content: ''; position: absolute; z-index: 1; inset: 0; background: rgba(0,0,0,calc(var(--overlay-strength) * .28)); pointer-events: none; }

.tone-dark .player-text-card { color: #172326; }
.tone-dark.panel-gradient.layout-left::after { background: linear-gradient(90deg, rgba(247,243,233,var(--overlay-strength)), rgba(247,243,233,var(--overlay-mid)) 62%, transparent); }
.tone-dark.panel-gradient.layout-right::after { background: linear-gradient(270deg, rgba(247,243,233,var(--overlay-strength)), rgba(247,243,233,var(--overlay-mid)) 62%, transparent); }
.tone-dark.panel-gradient.layout-bottom::after { background: linear-gradient(0deg, rgba(247,243,233,var(--overlay-strength)), rgba(247,243,233,var(--overlay-mid)) 70%, transparent); }
.tone-dark.panel-glass .player-text-card,
.tone-dark.panel-solid .player-text-card { background: rgba(247,243,233,var(--overlay-strength)); border-color: rgba(23,35,38,.12); border-left-color: var(--slide-accent); }
.tone-dark.panel-none .player-text-card { text-shadow: 0 2px 15px rgba(255,255,255,.95), 0 1px 3px #fff; }

.align-center .player-text-card { text-align: center; align-items: center; }
.align-right .player-text-card { text-align: right; align-items: flex-end; }
.player-text-card::before { content: ''; width: 48px; height: 5px; margin-bottom: clamp(18px, 2.5vw, 34px); border-radius: 99px; background: var(--slide-accent); }
.player-text-card h2 { margin: 0 0 clamp(13px, 1.8vw, 24px); font-size: clamp(var(--title-size-min, 23px), var(--title-size-fluid, 2.45vw), var(--title-size-max, 42px)); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.player-narration { display: grid; gap: .8em; }
.player-narration p { margin: 0; font-size: clamp(var(--body-size-min, 14px), var(--body-size-fluid, 1.28vw), var(--body-size-max, 20px)); line-height: 1.52; }
.player-text-card small { display: block; margin-top: clamp(14px, 2vw, 26px); color: currentColor; font-size: clamp(10px, .8vw, 13px); font-weight: 750; opacity: .72; }
.fit-compact h2 { font-size: clamp(20px, 2vw, 34px); }
.fit-compact .player-narration p { font-size: clamp(13px, 1.1vw, 17px); line-height: 1.43; }
.fit-tight h2 { margin-bottom: 10px; font-size: clamp(18px, 1.7vw, 29px); }
.fit-tight .player-narration { gap: .45em; }
.fit-tight .player-narration p { font-size: clamp(12px, .95vw, 15px); line-height: 1.36; }
.fit-tight::before { margin-bottom: 12px; }
.fit-tight small { margin-top: 10px; }

.slide-number { position: absolute; z-index: 4; top: clamp(16px,2vw,30px); right: clamp(16px,2vw,30px); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #172326; background: rgba(249,245,236,.9); font-size: 13px; font-weight: 900; box-shadow: 0 8px 24px rgba(0,0,0,.12); }

.player-controls { display: flex; align-items: center; justify-content: center; gap: 18px; height: 74px; padding: 10px; background: #111a1c; }
.player-controls > button { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); }
.player-controls > button.next { color: #172326; background: #e0ad58; border-color: #e0ad58; }
#playerDots { display: flex; align-items: center; justify-content: center; gap: 7px; max-width: min(55vw, 500px); overflow: hidden; }
.player-dot { flex: 0 0 auto; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.28); }
.player-dot.active { width: 22px; background: #e0ad58; }

:fullscreen .player-screen { height: 100dvh; }
:fullscreen .player-header,
:fullscreen .player-controls { position: absolute; z-index: 20; right: 0; left: 0; transition: opacity .2s ease; }
:fullscreen .player-header { top: 0; background: linear-gradient(rgba(10,15,17,.88), transparent); border: 0; }
:fullscreen .player-controls { bottom: 0; background: linear-gradient(transparent, rgba(10,15,17,.9)); }
:fullscreen .player-stage { height: 100dvh; min-height: 0; padding: 0; }
:fullscreen .player-slide { width: 100vw; max-width: none; max-height: none; height: 100dvh; aspect-ratio: auto; border-radius: 0; }
:fullscreen .player-text-card { padding-top: clamp(74px,10vh,120px); padding-bottom: clamp(90px,12vh,140px); }

@media (max-width: 760px) {
  .player-header { min-height: 58px; grid-template-columns: 44px minmax(0,1fr) 92px; padding: 7px 10px; }
  .player-header > strong { font-size: 12px; }
  .player-header-actions { gap: 5px; }
  .player-header-actions button { width: 36px; height: 36px; }
  .player-stage { height: calc(100dvh - 126px); min-height: 420px; padding: 7px; }
  .player-slide { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 18px; }
  .player-text-card,
  .layout-bottom .player-text-card { top: auto; right: 0; bottom: 0; left: 0; width: 100%; min-width: 0; max-width: none; min-height: 45%; height: auto; padding: 26px 22px 22px; }
  .panel-gradient.layout-left::after,
  .panel-gradient.layout-right::after,
  .panel-gradient.layout-bottom::after { inset: 34% 0 0; background: linear-gradient(0deg, rgba(var(--layout-rgb), var(--overlay-strength)) 0%, rgba(var(--layout-rgb), var(--overlay-mid)) 72%, transparent 100%); }
  .tone-dark.panel-gradient.layout-left::after,
  .tone-dark.panel-gradient.layout-right::after,
  .tone-dark.panel-gradient.layout-bottom::after { background: linear-gradient(0deg, rgba(247,243,233,var(--overlay-strength)), rgba(247,243,233,var(--overlay-mid)) 72%, transparent); }
  .panel-glass .player-text-card,
  .panel-solid .player-text-card,
  .panel-glass.layout-right .player-text-card,
  .panel-solid.layout-right .player-text-card,
  .panel-glass.layout-bottom .player-text-card,
  .panel-solid.layout-bottom .player-text-card { right: 12px; bottom: 12px; left: 12px; width: auto; max-height: 60%; margin: 0; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--slide-accent); border-radius: 18px; }
  .player-text-card::before { width: 34px; height: 4px; margin-bottom: 13px; }
  .player-text-card h2 { margin-bottom: 10px; font-size: clamp(21px, 6vw, 28px); }
  .player-narration p { font-size: clamp(var(--body-mobile-min,14px), var(--body-mobile-fluid,4vw), var(--body-mobile-max,17px)); line-height: 1.45; }
  .player-text-card small { margin-top: 10px; }
  .slide-number { top: 14px; right: 14px; width: 38px; height: 38px; }
  .player-controls { height: 68px; }
  :fullscreen .player-text-card { padding-top: 24px; padding-bottom: 88px; }
}