/* Plagebleu 4.0 — additive, non-destructive responsive design layer.
   No persistence, permissions, game state, or content logic is changed. */
:root{--pb4-navy:#073b63;--pb4-ocean:#087e9b;--pb4-aqua:#19b8b0;--pb4-ice:#f4f9fc;--pb4-gold:#ffb547;--pb4-radius:20px;--pb4-shadow:0 10px 30px rgba(3,41,68,.10)}
html{scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{overflow-x:clip}
#navbar{background:color-mix(in srgb,var(--glass,#fff) 90%,transparent);border-bottom:1px solid rgba(8,126,155,.17);box-shadow:0 3px 16px rgba(3,41,68,.07);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
#navbar .nav-inner{max-width:1440px;margin-inline:auto;min-height:64px;padding-inline:clamp(14px,3vw,42px);gap:clamp(10px,1.5vw,22px)}
#mainContent{min-width:0;max-width:100%}
#mainContent .site-section{max-width:1440px;padding-inline:clamp(16px,3.5vw,52px);padding-block:clamp(34px,5vw,68px);scroll-margin-top:84px}
#mainContent .section-header{max-width:840px;margin-inline:auto;text-align:center}
#mainContent .section-header h2{font-size:clamp(1.55rem,2.5vw,2.5rem);line-height:1.25;letter-spacing:-.02em}
#mainContent .section-header p{line-height:1.75}
#mainContent .cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(14px,2vw,24px);align-items:stretch}
#mainContent .cards-grid>.card{min-width:0;border-radius:var(--pb4-radius);border:1px solid rgba(8,126,155,.15);box-shadow:var(--pb4-shadow);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
#mainContent .cards-grid>.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(3,41,68,.15);border-color:rgba(25,184,176,.5)}
#mainContent .cards-grid>.card h3{line-height:1.4;overflow-wrap:anywhere}
#mainContent .cards-grid>.card p{line-height:1.7;overflow-wrap:anywhere}
#mainContent .card-btn,#mainContent .btn-primary{border-radius:12px;min-height:44px;max-width:100%;white-space:normal;touch-action:manipulation}
#mainContent img,#mainContent video,#mainContent canvas{max-width:100%}
.modal-content{max-width:min(94vw,720px);max-height:min(88dvh,900px);overscroll-behavior:contain;border-radius:20px;scrollbar-gutter:stable}
.modal-content iframe{max-width:100%;min-height:260px}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pb4-aqua);outline-offset:3px}
@media(min-width:1100px){#mainContent .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1450px){#mainContent .cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){
 html{scroll-padding-top:70px}
 body{overscroll-behavior-y:contain}
 #navbar .nav-inner{min-height:56px;padding-inline:12px;gap:8px}
 #topControls{top:calc(env(safe-area-inset-top,0px) + 8px);gap:6px;max-width:calc(100vw - 20px)}
 #topControls button{min-width:40px;min-height:40px;touch-action:manipulation}
 #mainContent .site-section{padding:30px 15px;scroll-margin-top:70px}
 #mainContent .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #mainContent .cards-grid>.card{border-radius:16px;padding:clamp(10px,2.5vw,16px)}
 #mainContent .cards-grid>.card h3{font-size:clamp(.95rem,3.6vw,1.15rem)}
 #mainContent .cards-grid>.card p{font-size:.88rem}
 #mainContent .cards-grid>.card .card-btn{width:100%;min-height:44px;font-size:.9rem}
 .modal-content{width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);padding:18px;border-radius:18px}
 .modal-content iframe{height:min(62dvh,550px)}
 #pb-bottom-tabs{padding-bottom:max(6px,env(safe-area-inset-bottom,0px))}
}
@media(max-width:370px){#mainContent .cards-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){#mainContent .cards-grid>.card{transition:none}#mainContent .cards-grid>.card:hover{transform:none}}
/* Phase 2 refinement: predictable touch targets and narrow-screen layouts. */
#navbar .nav-brand{display:inline-flex;align-items:center;min-height:44px;max-width:100%;text-decoration:none;font-weight:800;letter-spacing:-.01em}
#navbar .nav-links{min-width:0}
#navbar .nav-links a,#navbar .nav-links button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;line-height:1.3}
#mainContent .card{isolation:isolate}
#mainContent .card .card-badge{max-width:100%;overflow-wrap:anywhere}
#mainContent .cards-grid>.card .card-btn{margin-top:auto}
#mainContent .cards-grid>.card{display:flex;flex-direction:column;align-items:stretch}
#mainContent .cards-grid>.card .card-icon{flex-shrink:0}
#mainContent .site-section .section-divider{max-width:100%}
#mainContent .site-section :is(input,select,textarea){max-width:100%;min-width:0}
#mainContent .site-section :is(table,.table-container){max-width:100%}
#mainContent .site-section .table-container{overflow-x:auto;overscroll-behavior-x:contain}
#mobileMenu{max-width:100vw;overscroll-behavior:contain}
@media(hover:none){#mainContent .cards-grid>.card:hover{transform:none;box-shadow:var(--pb4-shadow)}}
@media(max-width:767px){
 #navbar .nav-brand{font-size:clamp(.9rem,3.7vw,1.12rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #navbar .nav-hamburger{min-width:44px;min-height:44px;flex-shrink:0;border-radius:12px;touch-action:manipulation}
 #mainContent .site-section .section-header{padding-inline:4px}
 #mainContent .site-section .section-header h2{font-size:clamp(1.35rem,5.3vw,1.85rem)}
 #mainContent .cards-grid>.card{gap:6px}
 #mainContent .cards-grid>.card .card-icon{font-size:clamp(1.65rem,7vw,2.4rem)}
 #mainContent .cards-grid>.card small{line-height:1.5;overflow-wrap:anywhere}
 #mainContent .cards-grid>.card .card-badge{font-size:.75rem}
 #mainContent .site-section :is(input,select,textarea){font-size:16px}
 #mainContent .site-section button{touch-action:manipulation}
 #mobileMenu:not(.hidden){max-height:calc(100dvh - 72px - env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch}
 #pb-bottom-tabs button{min-width:0;min-height:48px;touch-action:manipulation}
 #pb-bottom-tabs button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
 .modal-content .modal-close{min-width:44px;min-height:44px;touch-action:manipulation}
}
@media(min-width:768px) and (max-width:1099px){#mainContent .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phase 3: refreshed ocean hero and accessible carousel controls. */
#mainContent #section-hero.hero-section{width:min(calc(100% - 36px),1440px)!important;margin:20px auto 30px!important;border-radius:clamp(18px,2.5vw,30px)!important;box-shadow:0 22px 52px rgba(3,41,68,.17)!important;overflow:hidden!important;isolation:isolate}
#section-hero .slider-container{border-radius:inherit;overflow:hidden}
#section-hero .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,32,58,.35),rgba(4,32,58,.07));pointer-events:none}
#section-hero .slide-content{position:relative;z-index:4;max-width:820px;padding-inline:clamp(16px,3vw,44px)}
#section-hero .slide-content h1{font-size:clamp(1.85rem,4.1vw,3.65rem);letter-spacing:-.025em;line-height:1.25;text-wrap:balance}
#section-hero .slide-content p{font-size:clamp(.98rem,1.5vw,1.23rem);line-height:1.75;text-wrap:pretty}
#section-hero .slide-content .btn-hero{min-height:48px;min-width:155px;border-radius:14px!important;background:linear-gradient(135deg,#19b8b0,#087e9b)!important;color:#fff!important;font-weight:800;box-shadow:0 8px 20px rgba(0,51,74,.22);touch-action:manipulation}
#section-hero .slider-nav{min-width:42px;min-height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
#section-hero .slider-dot{min-width:12px;min-height:12px;cursor:pointer}
@media(max-width:767px){
 #mainContent #section-hero.hero-section{width:calc(100% - 20px)!important;margin:10px auto 20px!important;border-radius:18px!important}
 #section-hero .slide-content{padding-inline:18px!important;max-width:100%}
 #section-hero .slide-content h1{font-size:clamp(1.45rem,6.4vw,2.1rem)!important;line-height:1.3!important}
 #section-hero .slide-content p{font-size:clamp(.87rem,3.65vw,1.03rem)!important;line-height:1.6!important}
 #section-hero .slide-content .btn-hero{min-height:46px;min-width:145px;padding:10px 18px!important}
 #section-hero .slider-nav{min-width:36px;min-height:36px}
}
/* Phase 4 — unified educational card surfaces and discovery navigation. */
#mainContent :is(#section-games,#section-creatures,#section-library) .section-header{margin-bottom:clamp(20px,3vw,36px)}
#mainContent :is(#section-games,#section-creatures,#section-library) .section-divider{width:72px;max-width:100%;height:4px;margin:12px auto 0;border-radius:999px;background:linear-gradient(90deg,var(--pb4-ocean),var(--pb4-aqua))}
#section-games .game-card{position:relative;gap:9px!important;padding:clamp(16px,2vw,24px)!important;background:linear-gradient(160deg,#fff 60%,#f2fbfc 100%)!important;border-color:#cfe7ed!important}
#section-games .game-card .card-icon{display:grid;place-items:center;align-self:flex-start;width:64px;height:64px;max-width:100%;font-size:2.2rem;line-height:1;border-radius:18px;background:linear-gradient(145deg,#e0f7f9,#eaf3ff)}
#section-games .game-card h3{color:var(--pb4-navy)!important;font-size:clamp(1.05rem,1.7vw,1.3rem);margin:4px 0 0}
#section-games .game-card p{flex:1;line-height:1.7!important}
#section-games .game-card .card-btn{margin-top:auto!important;min-height:46px;border-radius:13px!important;background:linear-gradient(115deg,#087e9b,#0a9fa3)!important;color:#fff!important;font-weight:800!important;box-shadow:0 5px 14px rgba(8,126,155,.15)}
#section-games .game-card .card-badge{align-self:flex-start;border-radius:999px;padding:5px 10px;line-height:1.4}
#section-creatures .creature-card{background:linear-gradient(180deg,#fff,#f3fbfd)!important;border-color:#d3e8ee!important;padding:clamp(12px,1.6vw,20px)!important}
#section-creatures .creature-card .creature-emoji{width:100%;max-width:100%;height:clamp(90px,12vw,140px);min-height:90px;border-radius:15px;background:linear-gradient(145deg,#e6f8ff,#e6f7f3);margin-bottom:8px}
#section-creatures .creature-card .creature-name{color:var(--pb4-navy)!important;line-height:1.5;font-size:clamp(.9rem,1.5vw,1.08rem)}
#section-creatures .creature-tabs{gap:8px!important}
#section-creatures .creature-tabs .ctab{border-radius:999px!important;min-height:42px!important;touch-action:manipulation}
#section-creatures .creature-tabs .ctab.active{background:var(--pb4-ocean)!important;color:#fff!important;border-color:var(--pb4-ocean)!important}
#section-library :is(.ebook-card,.article-card,.video-card,.card){border-color:#d4e9ef!important;background:linear-gradient(170deg,#fff,#f7fcfd)!important}
#section-library :is(.ebook-card,.article-card,.video-card,.card) :is(h3,h4){color:var(--pb4-navy)!important;overflow-wrap:anywhere}
#section-library :is(.ebook-card,.article-card,.video-card,.card) button{min-height:42px;touch-action:manipulation}
@media(max-width:767px){
 #section-games .game-card{padding:12px!important;gap:6px!important}
 #section-games .game-card .card-icon{width:48px;height:48px;font-size:1.75rem;border-radius:13px}
 #section-games .game-card h3{font-size:clamp(.95rem,3.6vw,1.12rem)}
 #section-games .game-card p{font-size:.85rem;line-height:1.5!important}
 #section-games .game-card .card-btn{min-height:44px;padding-inline:6px;font-size:.84rem}
 #section-creatures .creature-card{padding:10px!important;min-height:145px}
 #section-creatures .creature-card .creature-emoji{height:95px;min-height:90px}
 #section-creatures .creature-tabs .ctab{border-radius:12px!important}
}
/* Phase 5: administration, account and dialog visual consistency.
   Styling only: preserve all permissions, data and navigation handlers. */
#adminDashboard .dash-sidebar{background:linear-gradient(180deg,#073b63,#0b4969)!important}
#adminDashboard .dash-brand{letter-spacing:-.015em;line-height:1.45}
#adminDashboard .dash-nav-item,#adminDashboard .dash-nav-group-title{border-radius:11px!important;transition:background-color .15s ease,color .15s ease}
#adminDashboard .dash-nav-item.active{background:linear-gradient(110deg,#087e9b,#119ca2)!important;box-shadow:inset 3px 0 0 #8ff5e9!important}
#adminDashboard .dash-header{min-height:64px;border-color:#d8e9ef!important}
#adminDashboard .dash-content :is(.dash-kpi,.dash-chart-area,.dash-report-row){border:1px solid #d8e9ef!important;box-shadow:0 6px 22px rgba(3,41,68,.06)!important}
#adminDashboard .dash-content :is(input,select,textarea){min-height:42px;border-radius:10px}
#adminDashboard .dash-content :is(button,.dash-btn-sm){border-radius:10px;min-height:42px}
#adminDashboard .dash-content :is(table){border-collapse:separate;border-spacing:0}
#adminDashboard .dash-content :is(th,td){overflow-wrap:anywhere}
#participantDashModal .modal-content,#adminDashModal .modal-content,#reportFormModal .modal-content,#reportViewModal .modal-content,#loginModal .modal-content,#participantRegModal .modal-content{border:1px solid rgba(8,126,155,.19);box-shadow:0 22px 65px rgba(3,41,68,.2);background:var(--glass,#fff)}
#participantDashModal .modal-content :is(h2,h3),#adminDashModal .modal-content :is(h2,h3),#reportFormModal .modal-content :is(h2,h3){line-height:1.35;overflow-wrap:anywhere}
:is(#participantDashModal,#adminDashModal,#reportFormModal,#reportViewModal,#loginModal,#participantRegModal) .modal-content :is(input,select,textarea){width:100%;max-width:100%;min-width:0;min-height:44px;border-radius:11px;font-size:16px}
:is(#participantDashModal,#adminDashModal,#reportFormModal,#reportViewModal,#loginModal,#participantRegModal) .modal-content button{min-height:42px;touch-action:manipulation}
:is(#participantDashModal,#adminDashModal,#reportFormModal,#reportViewModal,#loginModal,#participantRegModal) .modal-content :is(table,.table-responsive){max-width:100%}
#gamePlayModal .game-play-content{border-radius:20px!important;border:1px solid rgba(8,126,155,.22)!important}
#gamePlayModal #gamePlayTitle{line-height:1.4;overflow-wrap:anywhere;padding-inline:28px}
#gamePlayModal #gamePlayBody{min-width:0;max-width:100%}
@media(max-width:767px){
 #adminDashboard .dash-header{min-height:58px}
 #adminDashboard .dash-content{padding:12px!important;padding-bottom:max(16px,env(safe-area-inset-bottom,0px))!important}
 #adminDashboard .dash-sidebar{padding-top:max(12px,env(safe-area-inset-top,0px))!important}
 #adminDashboard .dash-nav{padding-bottom:max(24px,env(safe-area-inset-bottom,0px))!important}
 #adminDashboard .dash-content :is(.dash-kpi,.dash-chart-area,.dash-report-row){min-width:0}
 #gamePlayModal .game-play-content{border-radius:15px!important}
 #gamePlayModal #gamePlayTitle{font-size:clamp(1rem,4.3vw,1.3rem)}
 :is(#participantDashModal,#adminDashModal,#reportFormModal,#reportViewModal,#loginModal,#participantRegModal) .modal-content{padding:18px 14px!important;max-height:calc(100dvh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important}
}
/* Phase 6 — final mobile usability and accessible reading refinements. */
#ui-layer{scrollbar-gutter:stable;scroll-padding-top:76px}
#mainContent .site-section :is(h1,h2,h3,h4){text-wrap:balance}
#mainContent .site-section :is(p,li){overflow-wrap:anywhere}
#mainContent :is(.cards-grid,.articles-grid,.ebooks-grid,.projects-grid,.workshops-grid,.videos-grid)>*{min-width:0}
#mainContent .site-section :is(.ctab,.filter-btn,[role=tab]){touch-action:manipulation;min-height:42px}
#mainContent .site-section :is(.pagination,.creature-pagination){max-width:100%;flex-wrap:wrap;justify-content:center;gap:6px}
#mainContent .site-section :is(.pagination,.creature-pagination) button{min-width:38px;min-height:40px}
#mainContent .site-section :is(.articles-grid,.ebooks-grid,.projects-grid,.workshops-grid,.videos-grid){gap:clamp(12px,1.8vw,24px)}
#mainContent :is(.article-card,.ebook-card,.video-card,.project-card,.workshop-card){min-width:0;overflow:hidden}
#mainContent :is(.article-card,.ebook-card,.video-card,.project-card,.workshop-card) :is(img,video){max-width:100%;height:auto}
#mainContent .site-section :is(.tabs,.category-tabs,.library-tabs){max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
#adminDashboard .dash-content :is(.dash-table,.data-table){max-width:100%;overflow-x:auto}
@media(max-width:767px){
 #ui-layer{scrollbar-gutter:auto;scroll-padding-top:62px}
 #mainContent>.site-section:not(.hero-section){padding-inline:clamp(12px,3.6vw,20px)!important}
 #mainContent .site-section :is(.pagination,.creature-pagination){padding-inline:4px}
 #mainContent .site-section :is(.pagination,.creature-pagination) button{min-width:40px;min-height:44px}
 #mainContent :is(.articles-grid,.ebooks-grid,.projects-grid,.workshops-grid,.videos-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));gap:12px}
 #mainContent .site-section :is(.tabs,.category-tabs,.library-tabs){-webkit-overflow-scrolling:touch}
 #mainContent .site-section :is(.tabs,.category-tabs,.library-tabs) button{min-height:44px;flex-shrink:0}
 #adminDashboard .dash-content :is(.dash-table,.data-table){-webkit-overflow-scrolling:touch}
}
@media(max-width:390px){
 #mainContent :is(.articles-grid,.ebooks-grid,.projects-grid,.workshops-grid,.videos-grid){grid-template-columns:minmax(0,1fr)}
 #mainContent .site-section :is(.section-header h2){font-size:clamp(1.3rem,6vw,1.7rem)}
}
/* Phase 11: prevent the legacy !important mobile menu sizing from hiding its last links behind bottom tabs. */
@media (max-width:767px){
  #mobileMenu:not(.hidden){
    top:calc(62px + env(safe-area-inset-top,0px))!important;
    max-height:calc(100dvh - 62px - env(safe-area-inset-top,0px) - 72px - env(safe-area-inset-bottom,0px))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:18px!important;
  }
  #mobileMenu:not(.hidden) :is(a,button){touch-action:manipulation}
  #gamePlayModal:not(.hidden),#creatureModal:not(.hidden){z-index:1200}
  #gamePlayModal:not(.hidden) .modal-content,#creatureModal:not(.hidden) .modal-content{overscroll-behavior:contain;overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* Marine quiz return button: override legacy display:flex!important when closed. */
body #marineQuizModal.pb-quiz-closed,body #marineQuizModal[style*="display: none"]{display:none!important;pointer-events:none!important}