/* The player owns its viewport; course pages keep the remaining space. */
body.player-is-open { overflow: hidden; overscroll-behavior: none; }
#playerView, #playerView *, #playerView *::before, #playerView *::after { box-sizing: border-box; }
#playerView { position: fixed; z-index: 160; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; min-width: 0; max-width: 100%; overflow: hidden; background: #f5f8ff; color: #26334b; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
#playerView[hidden], #playerView [hidden] { display: none !important; }
#playerView:focus { outline: none; }
#playerView :is(button, a, summary):focus-visible { outline: 3px solid #8ba9f4; outline-offset: 3px; }
#playerView :is(button, a) { min-width: 44px; min-height: 44px; touch-action: manipulation; }
#playerView .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 13px; border: 1px solid #dce4f2; border-radius: 11px; background: #fff; color: #4e6284; font-size: 13px; font-weight: 700; line-height: 1.45; text-decoration: none; cursor: pointer; }
#playerView .ghost:hover { color: #315edb; border-color: #b5c8f0; background: #f4f7ff; }
#playerView .primary { min-height: 44px; padding: 10px 15px; font-size: 13px; line-height: 1.45; box-shadow: 0 5px 14px #315edb15; }
#playerView .player-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; flex: 0 0 auto; height: auto; min-height: 78px; padding: 11px max(18px, env(safe-area-inset-right, 0px)) 11px max(18px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid #e3e9f4; background: #fff; }
#playerView .player-heading { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1; min-width: 0; max-width: none; overflow: hidden; text-align: left; }
#playerView .player-heading :is(strong, span) { display: block; max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#playerView #playerTitle { color: #273753; font-size: 16px; line-height: 1.45; font-weight: 800; }
#playerView #playerMeta { color: #7a879d; font-size: 12px; line-height: 1.45; }
#playerView #playerMethod { color: #4569bb; font-size: 11px; line-height: 1.45; }
#playerView #backButton { white-space: nowrap; }
#playerView .player-back-short { display: none; }
#playerView #playerNextButton { grid-column: 3; white-space: nowrap; }
#playerView #fullscreenButton { display: inline-flex; grid-column: 4; white-space: nowrap; }
#playerView .player-device-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; flex: 0 0 auto; min-width: 0; max-height: calc(3em + 12px); margin: 0; padding: 6px max(18px, env(safe-area-inset-right, 0px)) 6px max(18px, env(safe-area-inset-left, 0px)); overflow: hidden; border-bottom: 1px solid #e2eaf7; background: #f0f5ff; color: #5b7296; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#playerView .player-help { flex: 0 0 auto; min-width: 0; max-height: 35vh; max-height: 35dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid #e3e9f4; background: #f8faff; }
#playerView .player-help > summary { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-height: 44px; padding: 8px max(18px, env(safe-area-inset-right, 0px)) 8px max(18px, env(safe-area-inset-left, 0px)); color: #5370a6; font-size: 13px; font-weight: 700; line-height: 1.5; list-style: none; cursor: pointer; touch-action: manipulation; }
#playerView .player-help > summary::-webkit-details-marker { display: none; }
#playerView .player-help > summary:hover { background: #f0f5ff; }
#playerView .player-help-chevron { display: inline-block; font-size: 17px; line-height: 1; transition: transform .15s ease; }
#playerView .player-help[open] .player-help-chevron { transform: rotate(180deg); }
#playerView .player-help-content { display: grid; gap: 10px; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 14px max(20px, env(safe-area-inset-left, 0px)); }
#playerView .player-help-content p { margin: 0; color: #62728c; font-size: 13px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
#playerView #playerDetailsTitle { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#playerView #playerActionMessage:empty { display: none; }
#playerView .player-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#playerView .player-stage { position: relative; display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%; overflow: hidden; background: #fff; }
#playerView .player-frame-host { display: flex; flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
#playerView .player-frame-host iframe { display: block; flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; margin: 0; border: 0; background: #fff; }
#playerView .player-loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 28px 18px; overflow: auto; overscroll-behavior: contain; background: radial-gradient(ellipse at 50% 25%, #eef3ff, #f9fbff 70%); }
#playerView .player-load-card { flex: 0 1 490px; min-width: 0; max-width: 100%; max-height: 100%; padding: 30px; overflow: auto; border: 1px solid #dce5f5; border-radius: 22px; background: #fff; box-shadow: 0 16px 48px #314a7b0c; text-align: center; }
#playerView .player-load-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 20px; color: #426ad5; background: #edf3ff; }
#playerView .player-load-icon::after { content: ""; position: absolute; inset: -4px; border: 2px solid transparent; border-top-color: #86a4ee; border-radius: 25px; }
#playerView .player-loading[data-state="loading"] .player-load-icon::after { animation: player-loading-spin 1.5s linear infinite; }
#playerView .player-loading[data-state="slow"] .player-load-icon { color: #96702f; background: #fff7e7; }
#playerView .player-loading[data-state="slow"] .player-load-icon::after { border-color: #efdcb2; }
#playerView .player-loading[data-state="error"] .player-load-icon { color: #b15948; background: #fff0eb; }
#playerView .player-loading[data-state="error"] .player-load-icon::after { border-color: #f0cfc5; }
#playerView #playerLoadTitle { margin: 0 0 10px; color: #293b5c; font-size: 23px; line-height: 1.4; letter-spacing: -.02em; overflow-wrap: anywhere; }
#playerView #playerLoadMessage { margin: 0 auto 22px; max-width: 380px; color: #6c7b94; font-size: 14px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
#playerView .player-load-actions { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 9px; }
#playerView .player-load-actions :is(button, a) { flex: 1 1 140px; }
#playerView #playerLoadBack { flex-basis: 100%; background: #f9fbff; }
@keyframes player-loading-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  #playerView .player-bar { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px; min-height: 64px; padding: 8px max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px)); }
  #playerView .player-heading { grid-column: 2; grid-row: 1; }
  #playerView #playerTitle { font-size: 14px; }
  #playerView #playerMeta { font-size: 11px; }
  #playerView #playerMethod { display: none; }
  #playerView .player-back-label { display: none; }
  #playerView .player-back-short { display: inline; }
  #playerView #fullscreenButton { grid-column: 4; grid-row: 1; padding-inline: 10px; }
  #playerView #playerNextButton { grid-column: 3; grid-row: 1; padding-inline: 10px; }
  #playerView #playerNextButton span { display: none; }
  #playerView .player-device-hint { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  #playerView .player-help > summary { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  #playerView .player-help-content { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  #playerView .player-help-actions :is(button, a) { flex: 1 1 130px; }
  #playerView .player-loading { padding: 18px 14px; }
  #playerView .player-load-card { padding: 24px 18px; border-radius: 18px; }
  #playerView #playerLoadTitle { font-size: 21px; }
  #playerView #playerLoadMessage { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #playerView .player-bar { grid-template-columns: auto minmax(0, 1fr) auto auto; min-height: 54px; padding-block: 5px; gap: 9px; }
  #playerView .player-heading { grid-column: 2; grid-row: 1; }
  #playerView #playerTitle { font-size: 14px; }
  #playerView :is(#playerMeta, #playerMethod) { display: none; }
  #playerView #playerNextButton { grid-column: 3; grid-row: 1; }
  #playerView #fullscreenButton { grid-column: 4; grid-row: 1; }
  #playerView .player-device-hint { display: block; max-height: 30px; white-space: nowrap; text-overflow: ellipsis; }
  #playerView .player-loading { padding-block: 12px; }
  #playerView .player-load-card { flex-basis: 620px; padding: 16px 22px; }
  #playerView .player-load-icon { width: 44px; height: 44px; margin-bottom: 8px; border-radius: 13px; }
  #playerView .player-load-icon::after { border-radius: 17px; }
  #playerView #playerLoadTitle { margin-bottom: 6px; font-size: 19px; }
  #playerView #playerLoadMessage { max-width: none; margin-bottom: 12px; }
  #playerView #playerLoadBack { flex-basis: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  #playerView .player-load-icon::after { animation: none !important; }
  #playerView .player-help-chevron { transition: none; }
}