/* SKJEE learning fullscreen layout, placements and settings */

/* Promotion appearance: /theme/css/skjee-promotions.css */

/* ===== Root Variables ===== */

:root{
  --skj-fs-bg:#eefafa;
  --skj-fs-panel:#ffffff;
  --skj-fs-border:#d9eeee;
  --skj-fs-shadow:0 12px 30px rgba(0,0,0,.15);
  --skj-fs-radius:22px;
  --skj-fs-gap:18px;
  --skj-fs-side-width:300px;
  --skj-fs-banner-gap:18px;
  --skj-fs-transition:.25s ease;
  --skj-fs-z:9999;

  --skj-promo-border:#b8dddd;
  --skj-fs-banner-height:88px;

  --skj-settings-bg:#ffffff;
  --skj-settings-border:#b8dddd;
  --skj-settings-row:#f7fbfb;
  --skj-settings-row-hover:#effafa;
  --skj-settings-text:#173f3d;
  --skj-settings-muted:#5e7775;
  --skj-settings-primary:#0b9a92;
  --skj-settings-primary-hover:#087c76;
  --skj-settings-danger:#b42318;
  --skj-settings-danger-hover:#8f1b13;
  --skj-settings-shadow:0 16px 36px rgba(18,71,68,.16);
}

/* ===== Main Wrapper ===== */

.skjee-learning-fullscreen{
  position:relative;
  width:100%;
}

.skjee-learning-fullscreen,
.skjee-learning-fullscreen *{
  box-sizing:border-box;
}

/* ===== Fullscreen Container ===== */

.skjee-learning-container{
  display:block;
  width:100%;
}

/* ===== Fullscreen Inner Wrapper ===== */

.skjee-learning-wrapper{
  width:100%;
}

/* ===== Main Content Column ===== */

.skjee-learning-main{
  width:100%;
  min-width:0;
}

/* ===== Practice Content ===== */

.skjee-learning-content{
  width:100%;
  min-width:0;
}

.skjee-learning-content > .lesson-learn-box{
  margin:0;
}

/* Reserved promotion placements */

/* Hidden during normal page viewing */

.skjee-fs-side-ad,
.skjee-fs-banner-ad{
  display:none;
  position:relative;
  width:100%;
  background:transparent;
  border:2px solid var(--skj-promo-border);
  border-radius:18px;
  overflow:hidden;
}

/* Desktop side placement */

.skjee-fs-side-ad{
  min-height:250px;
}

/* Bottom banner placement */

.skjee-fs-banner-ad{
  min-height:100px;
  margin-top:var(--skj-fs-banner-gap);
}

/* Rendered promotion fills its placement */

.skjee-fs-side-ad > *,
.skjee-fs-banner-ad > *{
  width:100%;
  min-height:inherit;
}

/* Empty reserved placement */

.skjee-fs-side-ad:not(:has(*))::before,
.skjee-fs-banner-ad:not(:has(*))::before{
  content:"Reserved Promotion Space";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:transparent;
  color:#789493;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.05em;
  text-align:center;
  text-transform:uppercase;
}

/* Fullscreen mode */

.skjee-learning-container:fullscreen,
.skjee-learning-container:-webkit-full-screen{
  width:100%;
  height:100%;
  max-width:none;
  max-height:100%;
  padding:18px;
  overflow:hidden;
  background:var(--skj-fs-bg);
  isolation:isolate;
}

/* ===== Fullscreen Grid Layout ===== */

.skjee-learning-container:fullscreen .skjee-learning-wrapper,
.skjee-learning-container:-webkit-full-screen .skjee-learning-wrapper{
  display:grid;
  grid-template-columns:
    var(--skj-fs-side-width)
    minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  align-items:stretch;
  width:100%;
  height:100%;
  min-height:0;
  max-width:1600px;
  margin:0 auto;
  gap:var(--skj-fs-gap);
}

/* ===== Fullscreen Main Column ===== */

.skjee-learning-container:fullscreen .skjee-learning-main,
.skjee-learning-container:-webkit-full-screen .skjee-learning-main{
  display:grid;
  grid-template-rows:
    auto
    minmax(0,1fr)
    var(--skj-fs-banner-height);
  min-width:0;
  min-height:0;
  height:100%;
  max-height:100%;
  gap:9px;
  overflow:hidden;
}

/* ===== Show and Stretch Desktop Side Placement ===== */

.skjee-learning-container:fullscreen .skjee-fs-side-ad,
.skjee-learning-container:-webkit-full-screen .skjee-fs-side-ad{
  display:flex;
  position:relative;
  top:auto;
  align-self:stretch;
  min-height:0;
  height:100%;
  max-height:100%;
  overflow:hidden;
}

/* Side promotion fills the complete grid-row height */

.skjee-learning-container:fullscreen .skjee-fs-side-ad > *,
.skjee-learning-container:-webkit-full-screen .skjee-fs-side-ad > *{
  flex:1 1 auto;
  width:100%;
  min-height:0;
  height:100%;
  max-height:100%;
}

/* ===== Fullscreen Content and Compact Bottom Banner ===== */

.skjee-learning-container:fullscreen .skjee-learning-content,
.skjee-learning-container:-webkit-full-screen .skjee-learning-content{
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.skjee-learning-container:fullscreen .skjee-fs-banner-ad,
.skjee-learning-container:-webkit-full-screen .skjee-fs-banner-ad{
  display:block;
  width:100%;
  height:var(--skj-fs-banner-height);
  min-height:0;
  max-height:var(--skj-fs-banner-height);
  margin-top:0;
  border-radius:14px;
  overflow:hidden;
}

.skjee-learning-container:fullscreen .skjee-fs-banner-ad > *,
.skjee-learning-container:-webkit-full-screen .skjee-fs-banner-ad > *{
  width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
}

/* Fullscreen toolbar */

.skjee-fs-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:16px;
}

/* Settings remain hidden during normal page mode */

.skjee-fs-settings-btn,
.skjee-fs-settings-panel{
  display:none;
}

/* Shared toolbar-button appearance */

.skjee-fs-btn,
.skjee-fs-settings-btn{
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border:0;
  border-radius:14px;
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:
    background-color var(--skj-fs-transition),
    transform var(--skj-fs-transition),
    box-shadow var(--skj-fs-transition);
}

/* Fullscreen open/close button */

.skjee-fs-btn{
  display:inline-flex;
  background:#0b9a92;
  box-shadow:0 8px 18px rgba(11,154,146,.25);
}

.skjee-fs-btn:hover{
  background:#087c76;
  transform:translateY(-2px);
}

.skjee-fs-btn:active{
  transform:translateY(0);
}

/* Settings button */

.skjee-fs-settings-btn{
  background:#315c59;
  box-shadow:0 8px 18px rgba(49,92,89,.22);
}

.skjee-fs-settings-btn:hover{
  background:#244946;
  transform:translateY(-2px);
}

.skjee-fs-settings-btn:active{
  transform:translateY(0);
}

/* Show Settings only after fullscreen opens */

.skjee-learning-container:fullscreen .skjee-fs-settings-btn,
.skjee-learning-container:-webkit-full-screen .skjee-fs-settings-btn{
  display:inline-flex;
}

/* Toolbar focus states */

.skjee-fs-btn:focus,
.skjee-fs-settings-btn:focus{
  outline:none;
}

.skjee-fs-btn:focus-visible,
.skjee-fs-settings-btn:focus-visible{
  outline:3px solid rgba(11,154,146,.3);
  outline-offset:3px;
}

/* Toolbar disabled states */

.skjee-fs-btn:disabled,
.skjee-fs-settings-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}

/* Keep the complete toolbar accessible while scrolling */

.skjee-learning-container:fullscreen .skjee-fs-controls,
.skjee-learning-container:-webkit-full-screen .skjee-fs-controls{
  position:sticky;
  top:0;
  z-index:30;
  width:max-content;
  max-width:100%;
  margin-right:0;
  margin-bottom:0;
  margin-left:auto;
  padding:0;
}

/* Fullscreen settings panel */

/* Display only when fullscreen is active and hidden is removed */

.skjee-learning-container:fullscreen
.skjee-fs-settings-panel:not([hidden]),
.skjee-learning-container:-webkit-full-screen
.skjee-fs-settings-panel:not([hidden]){
  display:block;
}

/* Main settings card */

.skjee-fs-settings-panel{
  position:fixed;
  top:82px;
  right:20px;
  z-index:100;
  width:min(760px,calc(100vw - 40px));
  max-height:calc(100vh - 104px);
  margin:0;
  overflow-x:hidden;
  overflow-y:auto;
  border:2px solid rgba(184,221,221,.92);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  color:var(--skj-settings-text);
  box-shadow:0 18px 50px rgba(18,71,68,.24);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

/* Settings header */

.skjee-fs-settings-header{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid rgba(184,221,221,.92);
  background:rgba(239,250,250,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.skjee-fs-settings-title{
  margin:0;
  color:var(--skj-settings-text);
  font-size:20px;
  font-weight:800;
  line-height:1.3;
}

/* Settings close button */

.skjee-fs-settings-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:0 0 auto;
  padding:0;
  border:1px solid var(--skj-settings-border);
  border-radius:12px;
  background:#ffffff;
  color:var(--skj-settings-text);
  font-size:18px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:
    background-color var(--skj-fs-transition),
    border-color var(--skj-fs-transition),
    transform var(--skj-fs-transition);
}

.skjee-fs-settings-close:hover{
  background:#e3f5f4;
  border-color:#8dcac7;
  transform:translateY(-1px);
}

.skjee-fs-settings-close:active{
  transform:translateY(0);
}

.skjee-fs-settings-close:focus{
  outline:none;
}

.skjee-fs-settings-close:focus-visible{
  outline:3px solid rgba(11,154,146,.25);
  outline-offset:2px;
}

/* Settings rows wrapper */

.skjee-fs-settings-options{
  display:grid;
  gap:12px;
  padding:16px;
}

/* Individual setting row */

.skjee-fs-setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:0;
  padding:14px 16px;
  border:1px solid rgba(220,238,238,.95);
  border-radius:15px;
  background:rgba(247,251,251,.82);
  transition:
    background-color var(--skj-fs-transition),
    border-color var(--skj-fs-transition);
}

.skjee-fs-setting-row:hover{
  background:rgba(239,250,250,.94);
  border-color:#b8dddd;
}

/* Setting label area */

.skjee-fs-setting-info{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.skjee-fs-setting-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:12px;
  background:#e4f5f4;
  font-size:22px;
  line-height:1;
}

.skjee-fs-setting-text{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.skjee-fs-setting-name{
  color:var(--skj-settings-text);
  font-size:15px;
  font-weight:800;
  line-height:1.3;
}

.skjee-fs-setting-description{
  color:var(--skj-settings-muted);
  font-size:12px;
  line-height:1.45;
}

/* Sound and contrast toggle */

.skjee-fs-toggle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  min-height:40px;
  flex:0 0 auto;
  padding:8px 14px;
  border:2px solid #c5dedd;
  border-radius:999px;
  background:#edf4f4;
  color:#496765;
  font-size:13px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:
    background-color var(--skj-fs-transition),
    border-color var(--skj-fs-transition),
    color var(--skj-fs-transition),
    transform var(--skj-fs-transition);
}

.skjee-fs-toggle-btn[aria-pressed="true"]{
  border-color:var(--skj-settings-primary);
  background:var(--skj-settings-primary);
  color:#ffffff;
}

.skjee-fs-toggle-btn:hover{
  transform:translateY(-1px);
}

.skjee-fs-toggle-btn:active{
  transform:translateY(0);
}

.skjee-fs-toggle-btn:focus{
  outline:none;
}

.skjee-fs-toggle-btn:focus-visible{
  outline:3px solid rgba(11,154,146,.25);
  outline-offset:2px;
}

/* Volume controls */

.skjee-fs-volume-controls{
  display:grid;
  grid-template-columns:40px minmax(120px,220px) 40px 52px;
  align-items:center;
  gap:10px;
  min-width:0;
}

.skjee-fs-volume-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid #b8dddd;
  border-radius:12px;
  background:#ffffff;
  color:var(--skj-settings-text);
  font-size:22px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:
    background-color var(--skj-fs-transition),
    border-color var(--skj-fs-transition),
    transform var(--skj-fs-transition);
}

.skjee-fs-volume-btn:hover{
  background:#e7f6f5;
  border-color:#83c5c1;
  transform:translateY(-1px);
}

.skjee-fs-volume-btn:active{
  transform:translateY(0);
}

.skjee-fs-volume-btn:focus{
  outline:none;
}

.skjee-fs-volume-btn:focus-visible{
  outline:3px solid rgba(11,154,146,.25);
  outline-offset:2px;
}

/* Volume range */

.skjee-fs-volume-range{
  width:100%;
  min-width:0;
  height:24px;
  margin:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  accent-color:var(--skj-settings-primary);
}

.skjee-fs-volume-range:focus{
  outline:none;
}

.skjee-fs-volume-range:focus-visible{
  outline:3px solid rgba(11,154,146,.2);
  outline-offset:3px;
  border-radius:999px;
}

/* WebKit range design */

.skjee-fs-volume-range::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:#cfe6e4;
}

.skjee-fs-volume-range::-webkit-slider-thumb{
  width:20px;
  height:20px;
  margin-top:-6px;
  border:3px solid #ffffff;
  border-radius:50%;
  background:var(--skj-settings-primary);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  -webkit-appearance:none;
}

/* Firefox range design */

.skjee-fs-volume-range::-moz-range-track{
  height:8px;
  border:0;
  border-radius:999px;
  background:#cfe6e4;
}

.skjee-fs-volume-range::-moz-range-progress{
  height:8px;
  border-radius:999px;
  background:var(--skj-settings-primary);
}

.skjee-fs-volume-range::-moz-range-thumb{
  width:18px;
  height:18px;
  border:3px solid #ffffff;
  border-radius:50%;
  background:var(--skj-settings-primary);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

/* Volume percentage */

.skjee-fs-volume-value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  min-height:34px;
  padding:5px 8px;
  border-radius:10px;
  background:#e8f6f5;
  color:#176f69;
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-align:center;
}

/* Restart button */

.skjee-fs-restart-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:90px;
  min-height:40px;
  flex:0 0 auto;
  padding:8px 16px;
  border:0;
  border-radius:12px;
  background:var(--skj-settings-danger);
  color:#ffffff;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  cursor:pointer;
  transition:
    background-color var(--skj-fs-transition),
    transform var(--skj-fs-transition),
    box-shadow var(--skj-fs-transition);
  box-shadow:0 7px 16px rgba(180,35,24,.2);
}

.skjee-fs-restart-btn:hover{
  background:var(--skj-settings-danger-hover);
  transform:translateY(-1px);
}

.skjee-fs-restart-btn:active{
  transform:translateY(0);
}

.skjee-fs-restart-btn:focus{
  outline:none;
}

.skjee-fs-restart-btn:focus-visible{
  outline:3px solid rgba(180,35,24,.25);
  outline-offset:2px;
}

/* Disabled setting controls */

.skjee-fs-toggle-btn:disabled,
.skjee-fs-volume-btn:disabled,
.skjee-fs-volume-range:disabled,
.skjee-fs-restart-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

/* High contrast: JS adds .skjee-fs-high-contrast to the container */

.skjee-learning-container.skjee-fs-high-contrast:fullscreen,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen{
  --skj-fs-bg:#ffffff;
  --skj-promo-border:#000000;
  --skj-settings-border:#000000;
  --skj-settings-row:#ffffff;
  --skj-settings-row-hover:#f3f3f3;
  --skj-settings-text:#000000;
  --skj-settings-muted:#222222;
  background:#ffffff;
  color:#000000;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-learning-content > .lesson-learn-box,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-learning-content > .lesson-learn-box{
  border:3px solid #000000 !important;
  background:#ffffff !important;
  color:#000000 !important;
  box-shadow:none !important;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-learning-content > .lesson-learn-box :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  label,
  strong,
  small
),
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-learning-content > .lesson-learn-box :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  label,
  strong,
  small
){
  color:#000000 !important;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-fs-settings-panel,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-fs-settings-panel{
  border-color:#000000;
  background:#ffffff;
  color:#000000;
  box-shadow:none;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-fs-settings-header,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-fs-settings-header{
  border-color:#000000;
  background:#ffffff;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-fs-setting-row,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-fs-setting-row{
  border:2px solid #000000;
  background:#ffffff;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-fs-setting-icon,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-fs-setting-icon{
  border:1px solid #000000;
  background:#ffffff;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-fs-btn,
.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-fs-settings-btn,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-fs-btn,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-fs-settings-btn{
  border:2px solid #000000;
  background:#000000;
  color:#ffffff;
  box-shadow:none;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-fs-toggle-btn[aria-pressed="true"],
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-fs-toggle-btn[aria-pressed="true"]{
  border-color:#000000;
  background:#000000;
  color:#ffffff;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-fs-volume-btn,
.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-fs-settings-close,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-fs-volume-btn,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-fs-settings-close{
  border:2px solid #000000;
  background:#ffffff;
  color:#000000;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-fs-volume-value,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-fs-volume-value{
  border:1px solid #000000;
  background:#ffffff;
  color:#000000;
}

.skjee-learning-container.skjee-fs-high-contrast:fullscreen
.skjee-learning-content :focus-visible,
.skjee-learning-container.skjee-fs-high-contrast:-webkit-full-screen
.skjee-learning-content :focus-visible{
  outline:4px solid #000000 !important;
  outline-offset:3px !important;
}

/* Desktop */

@media (min-width:1200px){

  .skjee-learning-container:fullscreen .skjee-learning-wrapper,
  .skjee-learning-container:-webkit-full-screen .skjee-learning-wrapper{
    grid-template-columns:300px minmax(0,1fr);
  }

}

/* Laptop */

@media (max-width:1199px){

  .skjee-learning-container:fullscreen,
  .skjee-learning-container:-webkit-full-screen{
    padding:14px;
  }

  .skjee-learning-container:fullscreen .skjee-learning-wrapper,
  .skjee-learning-container:-webkit-full-screen .skjee-learning-wrapper{
    grid-template-columns:260px minmax(0,1fr);
    gap:16px;
  }

  .skjee-fs-volume-controls{
    grid-template-columns:40px minmax(110px,180px) 40px 52px;
  }

}

/* Short laptop height */

@media (max-height:720px) and (min-width:701px){

  :root{
    --skj-fs-banner-height:82px;
  }

  .skjee-learning-container:fullscreen,
  .skjee-learning-container:-webkit-full-screen{
    padding:9px;
  }

  .skjee-learning-container:fullscreen .skjee-learning-main,
  .skjee-learning-container:-webkit-full-screen .skjee-learning-main{
    gap:7px;
  }

}

/* Tablet: side promotion hidden, banner visible */

@media (max-width:991px){

  .skjee-learning-container:fullscreen,
  .skjee-learning-container:-webkit-full-screen{
    padding:12px;
  }

  .skjee-learning-container:fullscreen .skjee-learning-wrapper,
  .skjee-learning-container:-webkit-full-screen .skjee-learning-wrapper{
    grid-template-columns:1fr;
    align-items:start;
    gap:14px;
  }

  .skjee-learning-container:fullscreen .skjee-fs-side-ad,
  .skjee-learning-container:-webkit-full-screen .skjee-fs-side-ad{
    display:none;
  }

  .skjee-fs-controls{
    margin-bottom:12px;
  }

  .skjee-fs-settings-panel{
    top:76px;
    right:12px;
    left:12px;
    width:auto;
    max-height:calc(100vh - 92px);
  }

}

/* Mobile */

@media (max-width:700px){

  .skjee-learning-container:fullscreen,
  .skjee-learning-container:-webkit-full-screen{
    padding:10px;
  }

  .skjee-fs-controls{
    margin-bottom:10px;
  }

  .skjee-fs-btn{
    width:100%;
    min-height:46px;
    font-size:15px;
  }

  .skjee-learning-container:fullscreen .skjee-fs-controls,
  .skjee-learning-container:-webkit-full-screen .skjee-fs-controls{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
  }

  .skjee-learning-container:fullscreen .skjee-fs-settings-btn,
  .skjee-learning-container:fullscreen .skjee-fs-btn,
  .skjee-learning-container:-webkit-full-screen .skjee-fs-settings-btn,
  .skjee-learning-container:-webkit-full-screen .skjee-fs-btn{
    width:100%;
    min-width:0;
    min-height:46px;
    padding:0 12px;
    font-size:14px;
  }

  :root{
    --skj-fs-banner-height:72px;
  }

  .skjee-fs-banner-ad{
    border-radius:14px;
  }

  .skjee-fs-settings-panel{
    top:70px;
    right:10px;
    left:10px;
    width:auto;
    max-height:calc(100vh - 82px);
    border-radius:15px;
  }

  .skjee-fs-settings-header{
    padding:14px;
  }

  .skjee-fs-settings-title{
    font-size:18px;
  }

  .skjee-fs-settings-options{
    gap:10px;
    padding:12px;
  }

  .skjee-fs-setting-row{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:13px;
  }

  .skjee-fs-setting-info{
    align-items:flex-start;
  }

  .skjee-fs-toggle-btn,
  .skjee-fs-restart-btn{
    width:100%;
  }

  .skjee-fs-volume-controls{
    grid-template-columns:40px minmax(0,1fr) 40px 50px;
    width:100%;
  }

}

/* ===== Small Mobile ===== */

@media (max-width:420px){

  .skjee-learning-container:fullscreen,
  .skjee-learning-container:-webkit-full-screen{
    padding:8px;
  }

  :root{
    --skj-fs-banner-height:68px;
  }

  .skjee-fs-banner-ad{
    border-width:1px;
    border-radius:12px;
  }

  .skjee-learning-container:fullscreen .skjee-fs-settings-btn,
  .skjee-learning-container:fullscreen .skjee-fs-btn,
  .skjee-learning-container:-webkit-full-screen .skjee-fs-settings-btn,
  .skjee-learning-container:-webkit-full-screen .skjee-fs-btn{
    min-height:44px;
    padding:0 8px;
    font-size:13px;
  }

  .skjee-fs-btn-icon{
    display:none;
  }

  .skjee-fs-settings-panel{
    border-radius:14px;
  }

  .skjee-fs-settings-close{
    width:38px;
    height:38px;
  }

  .skjee-fs-setting-icon{
    width:38px;
    height:38px;
    font-size:20px;
  }

  .skjee-fs-volume-controls{
    grid-template-columns:38px minmax(0,1fr) 38px;
  }

  .skjee-fs-volume-btn{
    width:38px;
    height:38px;
  }

  .skjee-fs-volume-value{
    grid-column:1 / -1;
    justify-self:center;
  }

}

/* Mobile landscape */

@media (max-width:991px) and (orientation:landscape){

  .skjee-learning-container:fullscreen,
  .skjee-learning-container:-webkit-full-screen{
    padding:8px;
  }

  .skjee-fs-controls{
    margin-bottom:8px;
  }

  .skjee-fs-settings-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .skjee-fs-setting-row{
    align-items:stretch;
  }

  .skjee-fs-volume-row{
    grid-column:1 / -1;
  }

}

@media (max-width:700px) and (orientation:landscape){

  .skjee-fs-setting-row{
    flex-direction:row;
    align-items:center;
  }

  .skjee-fs-toggle-btn,
  .skjee-fs-restart-btn{
    width:auto;
  }

}

/* Fullscreen scrollbar */

.skjee-learning-container:fullscreen,
.skjee-learning-container:-webkit-full-screen{
  scrollbar-width:thin;
}

.skjee-learning-container:fullscreen::-webkit-scrollbar,
.skjee-learning-container:-webkit-full-screen::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.skjee-learning-container:fullscreen::-webkit-scrollbar-thumb,
.skjee-learning-container:-webkit-full-screen::-webkit-scrollbar-thumb{
  background:#b8dede;
  border-radius:20px;
}

.skjee-learning-container:fullscreen::-webkit-scrollbar-track,
.skjee-learning-container:-webkit-full-screen::-webkit-scrollbar-track{
  background:transparent;
}

/* Fullscreen content safety */

.skjee-learning-container:fullscreen .lesson-learn-box,
.skjee-learning-container:-webkit-full-screen .lesson-learn-box{
  width:100%;
  max-width:none;
}

.skjee-learning-container:fullscreen img,
.skjee-learning-container:-webkit-full-screen img{
  max-width:100%;
  height:auto;
}

.skjee-learning-container:fullscreen button,
.skjee-learning-container:-webkit-full-screen button{
  touch-action:manipulation;
}

/* Utility classes */

.skjee-fs-hide{
  display:none !important;
}

.skjee-fs-show{
  display:block !important;
}

.skjee-fs-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.skjee-fs-no-scroll{
  overflow:hidden;
}

/* Reduced motion */

@media (prefers-reduced-motion:reduce){

  .skjee-learning-fullscreen *,
  .skjee-learning-fullscreen *::before,
  .skjee-learning-fullscreen *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

}

/* Print */

@media print{

  .skjee-fs-controls,
  .skjee-fs-settings-panel,
  .skjee-fs-side-ad,
  .skjee-fs-banner-ad{
    display:none !important;
  }

  .skjee-learning-fullscreen,
  .skjee-learning-container,
  .skjee-learning-wrapper,
  .skjee-learning-main,
  .skjee-learning-content{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    overflow:visible !important;
    background:#ffffff !important;
    box-shadow:none !important;
  }

}