/* Espaturk v107: scoped, accessible loading placeholders */
.esp107-skeleton{position:relative;overflow:hidden;background:linear-gradient(110deg,#253748 8%,#354b60 18%,#253748 33%);background-size:220% 100%;border-radius:10px;min-height:13px;animation:esp107-shimmer 1.45s linear infinite}
.esp107-skeleton[hidden]{display:none!important}
.esp107-skeleton .esp107-line{height:12px;border-radius:8px;background:#52677a55;margin:12px 0}
.esp107-skeleton .esp107-line:nth-child(2){width:72%}.esp107-skeleton .esp107-line:nth-child(3){width:48%}
.esp107-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin:14px 0}
.esp107-card{height:145px;padding:18px;border:1px solid #52677a44}
.esp107-inline{padding:16px;margin:12px 0;min-height:75px;box-sizing:border-box}
.esp107-share{aspect-ratio:4/5;width:min(100%,390px);margin:10px auto;display:flex;align-items:center;justify-content:center;color:#d1dbe6;font-size:13px}
/* Full lesson-stage skeleton: preserve the landscape canvas dimensions. */
.esp107-viewer{position:absolute;inset:0;z-index:4;display:flex;align-items:stretch;justify-content:center;padding:clamp(12px,3vw,36px);background:#152331;pointer-events:none;box-sizing:border-box}
.esp107-stage{width:100%;height:100%;max-width:1600px;display:grid;grid-template-rows:minmax(12px,5%) minmax(0,1fr) minmax(20px,10%);gap:clamp(10px,2vh,22px);align-items:center;justify-items:center}
.esp107-stage-title{width:min(65%,600px);height:100%;max-height:30px}
.esp107-stage-body{width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:clamp(12px,3vw,44px);align-items:center}
.esp107-stage-character{width:100%;max-width:270px;height:75%;max-height:460px;justify-self:center;border-radius:24px}
.esp107-stage-content{width:100%;height:65%;max-height:320px;border-radius:20px}
.esp107-stage-side{width:80%;height:42%;max-height:230px;justify-self:center;border-radius:18px}
.esp107-stage-footer{width:min(75%,850px);height:100%;max-height:55px}
@media(max-width:620px){.esp107-viewer{padding:12px}.esp107-stage-body{grid-template-columns:1fr 1.5fr;gap:12px}.esp107-stage-side{display:none}.esp107-stage-character{height:65%}.esp107-stage-content{height:65%}}
/* Match other Espaturk primary and secondary controls in the quiz header. */
.quiz-overlay .quiz-head-actions button{appearance:none!important;min-height:42px!important;border:1px solid #c39527!important;border-radius:10px!important;padding:10px 15px!important;background:#efbd42!important;color:#20190d!important;font-weight:700!important;font-size:14px!important;line-height:1.2!important;box-shadow:none!important}
.quiz-overlay .quiz-head-actions button:hover{filter:brightness(1.07)}
.quiz-overlay .quiz-head-actions button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:620px){.quiz-overlay .quiz-head-actions button{padding:9px 12px!important;font-size:12px!important;min-height:38px!important}}
/* Keep header dimensions stable while native/mobile styles initialize. */
.archive-header{min-height:126px;align-content:start}
.archive-header .archive-brand{min-width:0}
.archive-header .account-actions{min-width:0}
@media(max-width:620px){.archive-header{min-height:122px}}
@keyframes esp107-shimmer{to{background-position-x:-220%}}
@media(prefers-reduced-motion:reduce){.esp107-skeleton{animation:none}}

/* v109: reserve account menu width before asynchronous account initialization */
.archive-header>#refresh{margin-right:56px}
.archive-header>.account-actions #refresh{margin-right:0}
.archive-header .archive-brand{min-height:74px}
.archive-header #siteBrand{min-height:42px}
@media(max-width:620px){.archive-header>#refresh{margin-right:50px}.archive-header .archive-brand{min-height:62px}.archive-header #siteBrand{min-height:36px}}

/* V9 Skeleton UX: reserve the actual logo footprint without flashing text. */
#siteBrand.esp-skeleton-brand{position:relative;min-height:110px;min-width:0;font-size:0!important;color:transparent!important;}
#siteBrand.esp-skeleton-brand::before{content:"";display:block;width:min(100%,220px);height:110px;border-radius:12px;background:linear-gradient(110deg,#253748 8%,#354b60 18%,#253748 33%);background-size:220% 100%;animation:esp107-shimmer 1.45s linear infinite;}
#siteBrand.esp-skeleton-brand img{visibility:hidden;}
#siteBrand:not(.esp-skeleton-brand) img{visibility:visible;}
/* XP slot stays in document flow until actual XP data arrives. */
.esp-skeleton-xp-slot{position:relative;min-height:100px;}
.esp-skeleton-xp-slot:has(#xpOverview:not([hidden])){min-height:0;}
.esp-skeleton-xp-slot.esp-xp-disabled{display:none;}
.esp-skeleton-xp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:90px;margin:0 0 14px;}
.esp-skeleton-xp span{display:block;border-radius:14px;background:linear-gradient(110deg,#253748 8%,#354b60 18%,#253748 33%);background-size:220% 100%;animation:esp107-shimmer 1.45s linear infinite;}
.esp-skeleton-xp-slot:has(#xpOverview:not([hidden]))>.esp-skeleton-xp{display:none;}
/* Replace loading copy with a correctly sized title placeholder. */
#welcomeTitle:has(.esp-skeleton-welcome){font-size:0!important;line-height:1.4;}
.esp-skeleton-welcome{display:block;width:min(70%,360px);height:27px;border-radius:8px;background:linear-gradient(110deg,#253748 8%,#354b60 18%,#253748 33%);background-size:220% 100%;animation:esp107-shimmer 1.45s linear infinite;}
@media(max-width:620px){#siteBrand.esp-skeleton-brand::before{height:95px;width:min(100%,190px)}.esp-skeleton-xp-slot{min-height:92px}.esp-skeleton-xp{min-height:82px;gap:7px}}
@media(prefers-reduced-motion:reduce){#siteBrand.esp-skeleton-brand::before,.esp-skeleton-xp span,.esp-skeleton-welcome{animation:none}}

/* V9 logo shift fix: real image is in HTML from first paint. */
#siteBrand{min-height:110px;line-height:0;}
#siteBrand .site-logo{display:block;width:220px;max-width:100%;height:auto;aspect-ratio:2 / 1;object-fit:contain;}
#siteBrand.esp-skeleton-brand::before{display:none!important;}
#siteBrand.esp-skeleton-brand img{visibility:visible!important;}
@media(max-width:620px){#siteBrand{min-height:110px;}}

/* V9 skeleton UX revision: match the actual single XP panel. */
.esp-skeleton-xp-slot{min-height:0!important;}
.esp-skeleton-xp{display:block!important;position:relative;box-sizing:border-box;height:72px;min-height:72px;margin:16px 0;padding:0;border:1px solid #536278;border-radius:16px;background:linear-gradient(110deg,#253748 8%,#354b60 18%,#253748 33%);background-size:220% 100%;animation:esp107-shimmer 1.45s linear infinite;overflow:hidden;}
.esp-skeleton-xp>span{display:none!important;}
.esp-skeleton-xp-slot:has(#xpOverview:not([hidden]))>.esp-skeleton-xp{display:none!important;}
/* Keep logo's layout box stable when the editor-selected image is resolved and linked. */
.archive-header #siteBrand{display:flex!important;align-items:center;justify-content:flex-start;height:110px;min-height:110px!important;margin:7px 0;line-height:0!important;overflow:visible;}
.archive-header #siteBrand>a{display:inline-flex!important;align-items:center;justify-content:flex-start;line-height:0!important;height:110px;max-width:100%;}
.archive-header #siteBrand img.site-logo{display:block!important;box-sizing:border-box;height:110px!important;max-height:110px!important;max-width:100%;object-fit:contain;object-position:left center;vertical-align:middle;}
@media(max-width:620px){.esp-skeleton-xp{height:68px;min-height:68px;margin:16px 0;}}
@media(prefers-reduced-motion:reduce){.esp-skeleton-xp{animation:none;}}

/* V9 guest mode: hide XP skeleton and its reserved space before first paint. */
html[data-esp-xp-skeleton="guest"] .esp-skeleton-xp-slot:has(#xpOverview[hidden]){min-height:0!important;margin:0!important;padding:0!important;}
html[data-esp-xp-skeleton="guest"] .esp-skeleton-xp-slot:has(#xpOverview[hidden])>.esp-skeleton-xp{display:none!important;margin:0!important;height:0!important;min-height:0!important;}

/* 2026-10-31: skeleton and loaded XP panel share identical dimensions. */
.esp-skeleton-xp-slot>.esp-skeleton-xp{box-sizing:border-box!important;height:68px!important;min-height:68px!important;margin:16px 0!important;}
.esp-skeleton-xp-slot>#xpOverview:not([hidden]){box-sizing:border-box!important;height:68px!important;min-height:68px!important;max-height:68px!important;margin:16px 0!important;align-items:center;}
@media(max-width:620px){.esp-skeleton-xp-slot>.esp-skeleton-xp,.esp-skeleton-xp-slot>#xpOverview:not([hidden]){height:68px!important;min-height:68px!important;}}