:root{
  --black:#020403;
  --green0:#07100a;
  --green1:#102818;
  --green2:#1d6537;
  --green3:#80d972;
  --cream:#f4f0dc;
  --muted:#aebca8;
  --gold:#d8b35f;
  --line:rgba(244,240,220,.15);
  --panel:rgba(244,240,220,.07);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Corbel,Arial,sans-serif;background:var(--black);color:var(--cream)}
body{overscroll-behavior:none}
button,input{font-family:Corbel,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}
.start-screen{
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:34px 26px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(92,190,83,.22), transparent 28%),
    radial-gradient(circle at 50% 88%, rgba(35,140,73,.65), transparent 34%),
    linear-gradient(180deg,#000 0%,#030806 42%,#092012 72%,#14582f 100%);
}
.start-screen:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.10;
  background-image:
    linear-gradient(rgba(244,240,220,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,240,220,.10) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%);
}
.start-screen:after{
  content:"";
  position:absolute;
  inset:-10%;
  background:radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.78) 100%);
  pointer-events:none;
}
.start-text{
  position:relative;
  z-index:1;
  width:min(520px,100%);
  margin-top:-2svh;
}
.style4-splash{display:flex;flex-direction:column;align-items:center}
.splash-title{
  margin:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.02em;
  font-family:Impact,"Arial Black",Haettenschweiler,Corbel,sans-serif;
  font-weight:900;
  line-height:.82;
  letter-spacing:.015em;
  text-transform:uppercase;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.42));
}
.splash-title span{display:block}
.title-white{
  color:#f3f0e5;
  font-size:clamp(60px,20vw,128px);
  text-shadow:0 1px 0 rgba(255,255,255,.25),0 7px 20px rgba(0,0,0,.42);
}
.title-green{
  color:#56bb48;
  font-size:clamp(92px,31vw,190px);
  letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(202,255,188,.30),0 10px 28px rgba(0,0,0,.50),0 0 24px rgba(86,187,72,.15);
}
.splash-divider{
  width:min(330px,72vw);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:center;
  margin:16px auto 18px;
  color:#cdeab8;
}
.splash-divider span{height:2px;background:linear-gradient(90deg,transparent,#7bdd64)}
.splash-divider span:last-child{background:linear-gradient(90deg,#7bdd64,transparent)}
.splash-divider strong{font-size:36px;font-weight:400;text-shadow:0 0 12px rgba(123,221,100,.38)}
.splash-subtitle{
  margin:0 0 22px;
  color:#f4f0dc;
  font-size:clamp(18px,4.8vw,26px);
  line-height:1.25;
  font-weight:400;
  text-shadow:0 3px 18px rgba(0,0,0,.65);
}
.splash-quote{
  max-width: min(620px, 86vw);
  margin: -4px auto 16px;
  color: rgba(244,240,220,.88);
  font-size: clamp(14px,3.45vw,18px);
  line-height:1.32;
  font-style: italic;
  text-shadow:0 3px 16px rgba(0,0,0,.70);
}
.splash-quote span{
  display:inline-block;
  margin-top:5px;
  color:#8ee27f;
  font-style:normal;
  font-weight:700;
}
.splash-author{
  margin:0 0 26px;
  color:#78dc68;
  font-size:clamp(18px,4.8vw,25px);
  line-height:1.2;
  font-weight:500;
  text-shadow:0 0 16px rgba(120,220,104,.24);
}
.primary-btn{
  border:1px solid rgba(209,255,195,.22);
  border-radius:999px;
  padding:17px 48px;
  min-width:238px;
  background:linear-gradient(135deg,#d9ffd0 0%,#8de47d 45%,#2f994f 100%);
  color:#061009;
  font-size:25px;
  font-weight:950;
  box-shadow:0 20px 48px rgba(0,0,0,.44),0 0 34px rgba(128,217,114,.20),inset 0 1px 0 rgba(255,255,255,.45);
}
@media(max-width:390px){
  .title-white{font-size:clamp(62px,22vw,96px)}
  .title-green{font-size:clamp(98px,35vw,155px)}
  .splash-divider{margin:18px auto 20px}
  .primary-btn{min-width:210px;font-size:23px;padding:16px 38px}
}
.app{min-height:100svh;background:radial-gradient(circle at 90% 0%,rgba(128,217,114,.14),transparent 30%),linear-gradient(180deg,#020403,#07100a 44%,#040705)}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:rgba(2,4,3,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.top-btn{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--cream);font-size:21px}
.top-copy{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.top-copy strong{font-size:17px}
.top-copy span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-view{padding:16px 14px 90px;max-width:760px;margin:0 auto;width:100%}
.continue-title,.recent-title{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:#96dd85;font-weight:950;margin:22px 2px 10px}
.continue-card{border:1px solid rgba(216,179,95,.35);background:linear-gradient(135deg,rgba(216,179,95,.13),rgba(128,217,114,.06));border-radius:22px;overflow:hidden;margin-bottom:20px;box-shadow:0 18px 42px rgba(0,0,0,.28)}
.continue-inner{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px;align-items:center}
.continue-thumb{width:96px;height:126px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:#111}
.continue-copy h2{font-size:22px;line-height:1.05;margin:0 0 7px}
.continue-copy p{margin:0 0 11px;color:var(--muted);font-size:14px}
.recent-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:8px;scrollbar-width:none}
.recent-strip::-webkit-scrollbar{display:none}
.recent-item{flex:0 0 88px;border:1px solid var(--line);border-radius:16px;background:rgba(244,240,220,.06);padding:7px;color:var(--cream);text-align:left}
.recent-item img{width:100%;height:94px;object-fit:cover;border-radius:10px;display:block;margin-bottom:7px}
.recent-item span{display:block;font-size:12px;font-weight:900;line-height:1.05}
.search-wrap{position:sticky;top:66px;z-index:8;display:flex;align-items:center;gap:8px;margin:8px 0 18px;padding:10px 12px;border-radius:17px;background:rgba(2,4,3,.78);backdrop-filter:blur(14px);border:1px solid var(--line)}
.search-wrap input{width:100%;border:0;outline:0;background:transparent;color:var(--cream);font-size:17px}
.search-wrap input::placeholder{color:rgba(174,188,168,.75)}
.progress-row{display:flex;align-items:center;gap:9px}
.progress-track{height:8px;background:rgba(244,240,220,.12);border-radius:999px;overflow:hidden;flex:1}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--green3),var(--gold));border-radius:999px}
.progress-text{font-size:12px;color:var(--muted);min-width:35px;text-align:right;font-weight:900}
.section-block{margin-top:24px}
.section-banner{position:relative;min-height:88px;border-radius:20px;overflow:hidden;border:1px solid var(--line);margin-bottom:11px;background:#111}
.section-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.1);opacity:.45}
.section-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.80),rgba(0,0,0,.38))}
.section-banner-copy{position:relative;z-index:1;padding:16px}
.section-name{font-size:13px;text-transform:uppercase;letter-spacing:.13em;color:var(--cream);font-weight:950;margin-bottom:8px}
.section-count{color:var(--muted);font-size:12px;font-weight:900;margin-bottom:9px}
.section-progress{height:6px;background:rgba(244,240,220,.14);border-radius:999px;overflow:hidden}
.chapter-row{width:100%;display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:rgba(244,240,220,.06);color:var(--cream);border-radius:17px;padding:8px;margin:8px 0;box-shadow:0 10px 25px rgba(0,0,0,.18)}
.chapter-thumb-mini{width:54px;height:72px;object-fit:cover;border-radius:9px;border:1px solid rgba(244,240,220,.18);background:#111}
.chapter-main{min-width:0}
.chapter-title{font-size:17px;font-weight:950;line-height:1.08;margin-bottom:5px}
.chapter-meta{font-size:12px;color:var(--muted);margin-bottom:7px}
.chapter-progress{height:5px;background:rgba(244,240,220,.12);border-radius:999px;overflow:hidden}
.chapter-status{font-size:20px;min-width:26px;text-align:center;color:rgba(244,240,220,.38);font-weight:950}
.chapter-status.progress{color:var(--green3)}
.chapter-status.done{color:var(--gold)}
.no-results{padding:32px 12px;color:var(--muted);text-align:center}
.reader-view{min-height:calc(100svh - 64px);display:flex;flex-direction:column}
.reader-head{padding:10px 12px 8px;background:rgba(2,4,3,.86);border-bottom:1px solid var(--line)}
.reader-link{border:0;background:transparent;color:#aeeaa1;font-weight:950;font-size:15px;padding:7px 0}
.reader-title{font-size:18px;font-weight:950;margin:3px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-progress-row{display:flex;align-items:center;gap:9px}
#readerProgressText{font-size:12px;color:var(--muted);font-weight:950;min-width:35px;text-align:right}
#pdfFrame{width:100%;height:calc(100svh - 236px);border:0;background:white;flex:1}
.reader-big-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;padding:9px 10px 0;background:rgba(2,4,3,.88);border-top:1px solid var(--line)}
.reader-big-btn{border:1px solid var(--line);border-radius:14px;padding:12px 8px;background:var(--panel);color:var(--cream);font-weight:950;font-size:14px}
.home-big{background:linear-gradient(135deg,#f0ffe6,#92e582,#2c8b4d);color:#061009;border:0;min-width:76px}
.reader-actions{padding:8px 10px calc(9px + env(safe-area-inset-bottom));background:rgba(2,4,3,.88)}
.reader-action-btn{width:100%;border:0;border-radius:14px;padding:12px;background:linear-gradient(135deg,#f2dd94,#d8b35f);color:#171004;font-weight:950}
.reader-big-btn:disabled{opacity:.35}
button:active,.chapter-row:active,.continue-card:active,.recent-item:active{transform:scale(.985)}
@media(min-width:800px){
  .toc-view{max-width:860px}
  .chapter-list-inner{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
  .chapter-row{margin:0}
}


/* Bishop spotlight splash animation */
.start-screen{
background: radial-gradient(circle at 50% 15%, rgba(80,180,60,.45), transparent 30%), #030503;
overflow:hidden;
}
.start-screen::before{
content:'';
position:absolute;inset:0;
background:linear-gradient(to bottom, rgba(180,255,120,.55), transparent 35%);
clip-path:polygon(45% 0,55% 0,70% 45%,30% 45%);
filter:blur(20px);
opacity:.8;
}
.splash-divider strong{
font-size:50px !important;
display:inline-block;
animation: bishopRise 1.2s ease-out forwards;
}
.splash-title,.splash-subtitle,.splash-quote,.splash-author,.primary-btn{
opacity:0;
animation: fadeUp .6s ease forwards;
}
.splash-title{animation-delay:1s}
.splash-subtitle{animation-delay:1.3s}
.splash-quote{animation-delay:1.45s}
.splash-author{animation-delay:1.65s}
.primary-btn{animation-delay:1.9s}
@keyframes bishopRise{
0%{transform:translateY(60px) scale(.7);opacity:0}
100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(15px)}
to{opacity:1;transform:translateY(0)}
}


/* New sequence */
.magic-intro{
opacity:0;
font-size:clamp(28px,6vw,42px);
font-style:italic;
color:#f4f0dc;
margin:0 0 20px;
animation: fadeUp .9s ease forwards;
animation-delay:.2s;
}
.splash-title,.splash-divider{
opacity:0;
animation: fadeUp .9s ease forwards;
animation-delay:1.6s;
}
.splash-quote{
opacity:0;
animation: fadeUp .8s ease forwards;
animation-delay:3.0s !important;
}
.splash-author{
font-size:clamp(12px,3vw,16px) !important;
opacity:0;
animation: fadeUp .8s ease forwards;
animation-delay:4.2s !important;
}
.primary-btn{
opacity:0;
animation: fadeUp .8s ease forwards;
animation-delay:5.0s !important;
}
.splash-subtitle{display:none;}


/* ONLINE APP LICHESS 1 — Chessground lesson reader */
.reader-view{min-height:calc(100svh - 64px);display:flex;flex-direction:column;background:linear-gradient(180deg,#020403,#06110c)}
.reader-head{padding:7px 12px 6px;background:rgba(2,4,3,.9);border-bottom:1px solid var(--line)}
.reader-title{font-size:14px;font-weight:950;margin:2px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cream)}
.reader-progress-row{display:none}
.lesson-wrap{width:min(100%,720px);margin:0 auto;padding:10px 10px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;align-items:center;flex:1}
.board-area,.cg-wrap{width:100%;}
.board{width:min(100%,calc(100svw - 20px));height:min(calc(100svw - 20px),520px);max-width:520px;max-height:520px;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.42);background:#b58863;touch-action:manipulation}
.annotation-box{width:100%;max-width:520px;min-height:76px;border:1px solid rgba(244,210,122,.18);border-radius:18px;background:rgba(8,22,15,.92);padding:14px 15px;color:var(--cream);font-size:17px;line-height:1.35;font-weight:750;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.annotation-box.empty{color:var(--muted);font-weight:750;font-style:italic}
.forward-arrow{width:100%;max-width:520px;border:0;border-radius:20px;padding:14px 0 17px;background:linear-gradient(135deg,#f0ffe6,#92e582,#2c8b4d);color:#061009;font-size:54px;line-height:.9;font-weight:950;box-shadow:0 14px 35px rgba(51,175,89,.28);touch-action:manipulation}
.forward-arrow:active{transform:scale(.985)}
.forward-arrow:disabled{opacity:.45;filter:grayscale(.4)}
@media(max-width:390px){.annotation-box{font-size:15.5px}.forward-arrow{font-size:48px}.reader-title{font-size:13px}.lesson-wrap{gap:8px}}

/* APP BOARD 1.1 — compact reader header + Back/Forward controls */
.compact-reader-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 12px 5px;
  min-height:34px;
}
.compact-reader-head .reader-link{
  flex:0 0 auto;
  font-size:14px;
  padding:4px 0;
  line-height:1;
}
.compact-reader-head .inline-reader-title{
  flex:1;
  margin:0;
  font-size:14px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.move-nav-row{
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns:82px 1fr;
  gap:10px;
  align-items:stretch;
}
.back-move-btn{
  border:1px solid rgba(244,240,220,.16);
  border-radius:18px;
  background:rgba(244,240,220,.08);
  color:var(--cream);
  font-size:30px;
  font-weight:950;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  touch-action:manipulation;
}
.back-move-btn:active,.forward-arrow:active{transform:scale(.985)}
.back-move-btn:disabled,.forward-arrow:disabled{opacity:.38;filter:grayscale(.4)}
.move-nav-row .forward-arrow{
  max-width:none;
  width:100%;
}
@media(max-width:390px){
  .compact-reader-head{padding-top:4px;padding-bottom:4px;gap:8px}
  .compact-reader-head .reader-link{font-size:13px}
  .compact-reader-head .inline-reader-title{font-size:13px}
  .move-nav-row{grid-template-columns:70px 1fr;gap:8px}
  .back-move-btn{font-size:26px;border-radius:16px}
}

/* APP BOARD 1.2 — warmer main board + light-blue variation mode */
#board cg-board square.light{background-color:#d7a14a !important;}
#board cg-board square.dark{background-color:#8b4f24 !important;}
#board.variation-board cg-board square.light{background-color:#cbe8f7 !important;}
#board.variation-board cg-board square.dark{background-color:#6aa7c8 !important;}
.variation-box{
  width:100%;
  max-width:520px;
  border:1px solid rgba(156,213,239,.26);
  border-radius:16px;
  background:rgba(12,38,54,.88);
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}
.variation-box.hidden{display:none;}
.variation-label{
  width:100%;
  color:#dff3ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.9;
}
.variation-btn{
  border:1px solid rgba(224,247,255,.28);
  border-radius:999px;
  background:linear-gradient(135deg,#eefaff,#9bd9f4,#4d98bd);
  color:#06141c;
  font-size:14px;
  font-weight:950;
  padding:9px 12px;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}
.variation-btn.return-main{
  background:linear-gradient(135deg,#fff7dc,#e1b85f,#8e5b1d);
  color:#160d04;
}
.variation-btn:active{transform:scale(.98);}


/* Trophy system restored */
.trophy-panel{
  border:1px solid rgba(216,179,95,.32);
  background:linear-gradient(135deg,rgba(216,179,95,.11),rgba(128,217,114,.055));
  border-radius:20px;
  padding:12px;
  margin:14px 0 18px;
  box-shadow:0 16px 38px rgba(0,0,0,.24);
}
.trophy-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.trophy-label{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:#96dd85;font-weight:950;margin-bottom:3px}
.trophy-score{font-size:23px;font-weight:950;color:var(--cream);line-height:1}
.reset-progress-btn{
  border:1px solid rgba(244,240,220,.18);
  border-radius:999px;
  background:rgba(244,240,220,.07);
  color:var(--cream);
  padding:9px 12px;
  font-size:12px;
  font-weight:950;
}
.trophy-progress{margin:6px 0 10px}
.trophy-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.mini-trophy{
  aspect-ratio:1;
  border:1px solid rgba(244,240,220,.12);
  border-radius:9px;
  background:rgba(244,240,220,.045);
  color:rgba(244,240,220,.35);
  font-size:13px;
  font-weight:950;
  line-height:1;
}
.mini-trophy.earned{
  color:#ffd86d;
  background:rgba(216,179,95,.16);
  border-color:rgba(255,216,109,.34);
  box-shadow:0 0 14px rgba(255,216,109,.12);
}
.chapter-status.trophy-earned{font-size:19px;color:#ffd86d;text-shadow:0 0 12px rgba(255,216,109,.20)}
.trophy-toast{
  position:fixed;
  left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);
  z-index:1000;
  max-width:min(92vw,520px);
  border:1px solid rgba(255,216,109,.40);
  border-radius:999px;
  background:linear-gradient(135deg,#fff4c7,#d8b35f,#7aaa52);
  color:#130d03;
  padding:12px 18px;
  font-size:15px;
  font-weight:950;
  box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 30px rgba(255,216,109,.22);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.trophy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:390px){.trophy-grid{grid-template-columns:repeat(7,1fr)}.trophy-score{font-size:21px}.reset-progress-btn{font-size:11px;padding:8px 10px}}

/* APP BOARD 3.1 — dark ochre board + sleek trophy case */
#board cg-board square.light{background-color:#d8c4a0 !important;}
#board cg-board square.dark{background-color:#a36b2c !important;}
#board.variation-board cg-board square.light{background-color:#dbe8f3 !important;}
#board.variation-board cg-board square.dark{background-color:#7fa6c7 !important;}

.trophy-panel{
  border:1px solid rgba(216,179,95,.20);
  background:rgba(244,240,220,.035);
  border-radius:14px;
  padding:8px 10px;
  margin:8px 0 12px;
  box-shadow:none;
}
.sleek-trophy-top,.trophy-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.trophy-score{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-size:13px;
  font-weight:950;
  color:var(--cream);
  line-height:1;
}
.trophy-word{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.trophy-score strong{
  color:#ffd86d;
  font-size:14px;
}
.reset-progress-btn{
  border:1px solid rgba(244,240,220,.14);
  border-radius:999px;
  background:rgba(244,240,220,.05);
  color:var(--muted);
  padding:5px 8px;
  font-size:10px;
  font-weight:900;
}
.trophy-dot-row{
  display:grid;
  grid-template-columns:repeat(19,1fr);
  gap:4px;
  align-items:center;
}
.mini-trophy-dot{
  width:8px;
  height:8px;
  min-width:8px;
  min-height:8px;
  border:1px solid rgba(244,240,220,.16);
  border-radius:999px;
  background:rgba(244,240,220,.08);
  padding:0;
  box-shadow:none;
}
.mini-trophy-dot.earned{
  border-color:rgba(255,216,109,.78);
  background:radial-gradient(circle at 32% 28%, #fff4b8 0 18%, #ffd86d 28%, #d8a928 70%, #8f5f10 100%);
  box-shadow:0 0 7px rgba(255,216,109,.34);
}
@media(max-width:430px){
  .trophy-panel{padding:7px 9px;margin:7px 0 10px;}
  .trophy-dot-row{grid-template-columns:repeat(19,1fr);gap:3px;}
  .mini-trophy-dot{width:7px;height:7px;min-width:7px;min-height:7px;}
}


/* APP BOARD 3.2 — missing navigation buttons restored */
.lesson-tools-row{
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns:1fr .72fr 1fr;
  gap:8px;
  margin-top:0;
}
.lesson-tool-btn,.flip-board-btn{
  border:1px solid rgba(244,240,220,.14);
  background:rgba(244,240,220,.07);
  color:var(--cream);
  border-radius:14px;
  padding:10px 8px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.01em;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  touch-action:manipulation;
}
.lesson-tool-btn.home-tool{
  color:#122014;
  background:linear-gradient(135deg,#dff0be,#8edb72);
  border-color:rgba(142,219,114,.45);
}
.lesson-tool-btn:disabled{opacity:.38;filter:grayscale(.55)}
.flip-board-btn{
  width:100%;
  max-width:520px;
  padding:8px 10px;
  font-size:12px;
  color:#f7e5b6;
  background:rgba(158,107,47,.22);
  border-color:rgba(247,196,98,.18);
}
@media(max-width:390px){
  .lesson-tools-row{gap:6px}
  .lesson-tool-btn{font-size:11px;padding:9px 6px;border-radius:12px}
  .flip-board-btn{font-size:11px;padding:7px 8px}
}


/* APP BOARD 3.3 — forced board colors + Merida pieces + visual PGN marks */
#board cg-board{
  background-color:#d8c4a0 !important;
  background-image:conic-gradient(#a36b2c 25%, #d8c4a0 0 50%, #a36b2c 0 75%, #d8c4a0 0) !important;
  background-size:25% 25% !important;
}
#board.variation-board cg-board{
  background-color:#dbe8f3 !important;
  background-image:conic-gradient(#7fa6c7 25%, #dbe8f3 0 50%, #7fa6c7 0 75%, #dbe8f3 0) !important;
  background-size:25% 25% !important;
}
#board svg.cg-shapes{
  opacity:.95;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.16));
}
.trophy-icon{font-size:13px;line-height:1;filter:drop-shadow(0 1px 3px rgba(255,216,109,.25));}

/* APP BOARD 3.4 FIX — keep working Chessground pieces, force board colors, restore button position */
#board.cg-wrap cg-board,
#board cg-board{
  background-color:#d8c4a0 !important;
  background-image:
    conic-gradient(#a36b2c 25%, #d8c4a0 0 50%, #a36b2c 0 75%, #d8c4a0 0) !important;
  background-size:25% 25% !important;
}
#board.variation-board.cg-wrap cg-board,
#board.variation-board cg-board{
  background-color:#dbe8f3 !important;
  background-image:
    conic-gradient(#7fa6c7 25%, #dbe8f3 0 50%, #7fa6c7 0 75%, #dbe8f3 0) !important;
  background-size:25% 25% !important;
}
.move-nav-row{
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns:82px 1fr;
  gap:10px;
  align-items:stretch;
  margin:0 auto;
}
.move-nav-row .forward-arrow{
  width:100%;
  max-width:none;
  margin:0;
}
.back-move-btn{margin:0;}
.annotation-box + .variation-box + .move-nav-row,
.variation-box + .move-nav-row{margin-top:0;}
@media(max-width:390px){
  .move-nav-row{grid-template-columns:70px 1fr;gap:8px;}
}
/* Trophy label requested: 🏆 Progress 12/38 */
.trophy-score{display:flex;align-items:center;gap:5px;}
.trophy-icon{font-size:13px;line-height:1;filter:drop-shadow(0 1px 3px rgba(255,216,109,.25));}


/* APP BOARD 3.5 — controls locked directly under board; game buttons stay inside chapter */
.lesson-wrap{gap:8px;}
.move-nav-row{order:2; margin:0 auto 0; flex:0 0 auto;}
.annotation-box{order:3;}
.variation-box{order:4;}
.lesson-tools-row{order:5;}
.flip-board-btn{order:6;}
#board.board{order:1; flex:0 0 auto;}
.move-nav-row .forward-arrow{padding:10px 0 13px; font-size:48px; border-radius:18px;}
.back-move-btn{min-height:64px;}
.annotation-box{margin-top:2px;}
@media(max-width:430px){
  .lesson-wrap{padding-top:8px; gap:7px;}
  .move-nav-row{grid-template-columns:68px 1fr; gap:8px;}
  .move-nav-row .forward-arrow{font-size:44px; padding:9px 0 12px;}
  .back-move-btn{min-height:58px; font-size:25px;}
}

/* In-app PDF chapter reader */
.pdf-wrap{
  width:100%;
  margin:0 auto;
  padding:0 0 18px;
}
.pdf-frame{
  width:100%;
  height:calc(100vh - 112px);
  min-height:640px;
  border:0;
  border-radius:18px;
  background:#111;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
@media (max-width: 700px){
  .pdf-frame{
    height:calc(100vh - 86px);
    min-height:560px;
    border-radius:12px;
  }
}


/* Image-based reader for Chapter 38. Keeps the page full-width on phones and avoids PDF iframe margins. */
.chapter-image-wrap{
  width:min(100%,760px);
  margin:0 auto;
  padding:8px 8px calc(22px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  overflow-x:hidden;
}
.chapter-page-image{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow:0 16px 45px rgba(0,0,0,.28);
  background:#fff;
}
@media(max-width:700px){
  .chapter-image-wrap{width:100%; padding:6px 0 calc(16px + env(safe-area-inset-bottom)); gap:10px;}
  .chapter-page-image{width:100%; border-radius:0; box-shadow:none;}
}

/* WORKING APP 3 update: wider Reset Progress button */
.reset-progress-btn{min-width:112px;white-space:nowrap;padding-left:10px;padding-right:10px;}
@media(max-width:390px){.reset-progress-btn{min-width:106px;font-size:10px;padding-left:8px;padding-right:8px;}}


/* WORKING APP 3 bonus chapter restore: hidden treasure chest row */
.bonus-section-block{margin-top:8px;}
.bonus-list-inner{display:block;}
.bonus-chapter-row{
  border-color:rgba(255,216,109,.30) !important;
  background:linear-gradient(135deg,rgba(255,216,109,.10),rgba(128,217,114,.045)) !important;
}
.bonus-chapter-row.locked{opacity:.78;}
.bonus-chapter-row.unlocked{
  box-shadow:0 0 0 1px rgba(255,216,109,.10),0 18px 42px rgba(255,216,109,.08);
}
.bonus-chest-thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background:radial-gradient(circle at 40% 30%,rgba(255,216,109,.28),rgba(40,60,32,.82));
  border:1px solid rgba(255,216,109,.28);
  border-radius:12px;
  object-fit:cover;
}


/* WORKING APP 4 golden king shortcut — three presses completes every chapter */
.golden-king-shortcut-row{
  display:flex;
  justify-content:flex-start;
  margin:8px 0 2px 4px;
}
.golden-king-shortcut{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,216,109,.55);
  background:radial-gradient(circle at 35% 25%,#fff0a8 0%,#d9a735 45%,#6c4a10 100%);
  color:#1c1202;
  font-size:20px;
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 18px rgba(255,216,109,.20);
  cursor:pointer;
  opacity:.88;
}
.golden-king-shortcut:active{transform:scale(.95);}

/* WORKING APP 4.1 — refined rewards/search home UI */
#continueCard{display:none!important;}
.trophy-progress-bar{
  height:3px;
  width:100%;
  margin-top:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.trophy-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#9b6a1f,#ffd86d,#fff0aa);
  box-shadow:0 0 12px rgba(255,216,109,.35);
  transition:width .35s ease;
}
.bonus-knight-thumb{
  position:relative;
  color:#2b1a05!important;
  font-size:28px!important;
  font-weight:900;
  background:
    radial-gradient(circle at 30% 22%, #fff4b5 0%, #ffd86d 28%, #c88a24 62%, #6f4308 100%)!important;
  border:1px solid rgba(255,230,130,.75)!important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -7px 13px rgba(88,45,0,.45),
    0 7px 18px rgba(255,184,62,.20),
    0 2px 0 rgba(55,28,0,.80);
  text-shadow:0 1px 0 rgba(255,246,184,.45), 0 2px 4px rgba(58,30,0,.35);
  transform:perspective(90px) rotateX(8deg);
}
.bonus-knight-thumb::after{
  content:'';
  position:absolute;
  left:16%; right:16%; bottom:6px;
  height:4px;
  border-radius:999px;
  background:rgba(65,34,0,.45);
  filter:blur(.1px);
}

/* Compact visual game navigation bar under Flip Board */
.game-nav-dots{
  width:100%;
  max-width:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:-3px;
  min-height:14px;
  padding:0 6px 2px;
}
.game-nav-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(244,240,220,.32);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.game-nav-dot.active{
  width:9px;
  height:9px;
  background:linear-gradient(135deg,#dff0be,#8edb72);
  box-shadow:0 0 0 2px rgba(142,219,114,.16),0 0 10px rgba(142,219,114,.36);
}
@media(max-width:390px){
  .game-nav-dots{gap:5px; min-height:12px;}
  .game-nav-dot{width:6px;height:6px;}
  .game-nav-dot.active{width:8px;height:8px;}
}

/* WORKING APP 5 reader navigation cleanup: remove duplicate top bar in reader mode */
.app.reader-mode .topbar{display:none;}
.app.reader-mode .reader-view{min-height:100svh;}
.reader-home-top-btn{
  margin-left:auto;
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(244,240,220,.16);
  background:rgba(255,255,255,.055);
  color:var(--cream);
  font-weight:950;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.reader-home-top-btn:active{transform:scale(.96);}
.compact-reader-head .inline-reader-title{min-width:0;}

/* FINISHED APP 1 splash update: dramatic magic sequence + subtitle */
#startScreen .style4-splash .magic-intro{
  order:0;
  opacity:0;
  font-size:clamp(28px,7vw,46px);
  font-style:italic;
  letter-spacing:.035em;
  color:#f7f1dc;
  margin:0 0 24px;
  text-shadow:0 0 18px rgba(247,241,220,.35), 0 0 36px rgba(123,221,100,.20);
  animation:magicReveal 1.25s cubic-bezier(.18,.9,.2,1) forwards;
  animation-delay:.12s;
}
#startScreen .style4-splash .splash-title{
  order:1;
  opacity:0;
  animation:fadeUp .9s ease forwards;
  animation-delay:1.65s !important;
}
#startScreen .style4-splash .splash-divider{
  order:2;
  opacity:0;
  animation:fadeUp .9s ease forwards;
  animation-delay:1.65s !important;
}
#startScreen .style4-splash .splash-divider strong{
  animation:none !important;
  opacity:1;
  transform:none;
}
#startScreen .style4-splash .splash-subtitle{
  order:3;
  display:block !important;
  opacity:0;
  margin:4px 0 22px;
  color:rgba(246,244,220,.88);
  font-size:clamp(14px,3.6vw,18px);
  letter-spacing:.08em;
  text-transform:none;
  animation:fadeUp .8s ease forwards;
  animation-delay:2.18s !important;
}
#startScreen .style4-splash .primary-btn{
  order:4;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:2.85s !important;
}
#startScreen .style4-splash .splash-quote,
#startScreen .style4-splash .splash-author{
  display:none !important;
}
@keyframes magicReveal{
  0%{opacity:0;transform:translateY(28px) scale(.94);filter:blur(10px);letter-spacing:.12em}
  55%{opacity:1;filter:blur(0);transform:translateY(0) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);letter-spacing:.035em}
}


/* FINISHED APP 1 — keyboard controls modal shared by top menu and reader header button */
.controls-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(6px);
}
.controls-overlay.hidden{display:none;}
.controls-panel{
  width:min(420px, 94vw);
  border:1px solid rgba(244,240,220,.18);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(16,28,18,.98), rgba(4,8,5,.98));
  color:var(--cream);
  box-shadow:0 24px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  padding:18px 18px 16px;
  position:relative;
}
.controls-panel h2{
  margin:0 42px 14px 0;
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.controls-close{
  position:absolute;
  right:12px;
  top:10px;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(244,240,220,.16);
  background:rgba(255,255,255,.06);
  color:var(--cream);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.controls-list{display:grid;gap:9px;}
.controls-list div{
  display:grid;
  grid-template-columns:84px 1fr;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(244,240,220,.08);
}
.controls-list span{
  justify-self:start;
  min-width:52px;
  text-align:center;
  padding:4px 8px;
  border-radius:10px;
  background:rgba(174,234,161,.12);
  color:#b8ff9d;
  font-weight:950;
}
.controls-list strong{font-size:14px;}


/* FINISHED APP 8 quote generator button beside golden king */
.golden-king-shortcut-row{
  gap:8px;
  align-items:center;
}
.quote-shortcut{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(245,249,255,.72);
  background:radial-gradient(circle at 35% 25%,#ffffff 0%,#dfe7ef 38%,#7b8794 72%,#303844 100%);
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 18px rgba(220,235,255,.18),inset 0 0 8px rgba(255,255,255,.28);
  cursor:pointer;
  opacity:.9;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
.quote-book-svg{
  width:24px;
  height:24px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.38));
}
.quote-book-svg .book-cover{
  fill:rgba(210,220,230,.24);
  stroke:#ffffff;
  stroke-width:3.2;
  stroke-linejoin:round;
}
.quote-book-svg .book-page{
  fill:rgba(255,255,255,.10);
  stroke:rgba(255,255,255,.92);
  stroke-width:2.6;
  stroke-linejoin:round;
}
.quote-book-svg .book-line{
  fill:none;
  stroke:rgba(255,255,255,.82);
  stroke-width:2.4;
  stroke-linecap:round;
}
.quote-shortcut:active{transform:scale(.95);}
.quote-modal.hidden{display:none!important;}
.quote-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:22px;
}
.quote-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(5px);
}
.quote-card{
  position:relative;
  width:min(92vw,430px);
  height:min(68vh,420px);
  min-height:310px;
  padding:34px 24px 24px;
  border:1px solid rgba(255,209,88,.68);
  border-radius:24px;
  background:radial-gradient(circle at top,rgba(255,205,73,.18),transparent 36%),linear-gradient(145deg,rgba(18,30,23,.98),rgba(2,8,5,.98));
  color:#fff4cf;
  box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 28px rgba(255,191,60,.22),inset 0 0 28px rgba(255,213,96,.08);
  text-align:center;
  font-family:Corbel,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  animation:quoteCardIn 180ms ease-out;
  display:flex;
  flex-direction:column;
}
@keyframes quoteCardIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.quote-card-kicker{display:none!important;}
.quote-text{
  font-size:clamp(1.15rem,3.8vw,1.62rem);
  line-height:1.22;
  font-weight:700;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:4px 4px 8px;
  scrollbar-width:thin;
}
.quote-author{flex:0 0 auto;margin-top:14px;color:#e0bd68;font-size:1rem;font-weight:700;}
.quote-next{flex:0 0 auto;margin-top:18px;padding:11px 18px;border:1px solid rgba(255,209,88,.7);border-radius:999px;background:linear-gradient(180deg,#e7bd52,#8f641c);color:#121007;font-family:inherit;font-weight:900;cursor:pointer;}
.quote-close{position:absolute;top:10px;right:12px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#f8df9c;font-size:1.4rem;line-height:1;cursor:pointer;}

@media (max-height:640px){
  .quote-card{height:min(76vh,390px);min-height:280px;padding-top:30px;}
  .quote-text{font-size:clamp(1rem,3.6vw,1.35rem);}
}

/* FINISHED APP 9 — optional landscape reader layout + layout toggle buttons */
.layout-toggle{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(244,240,220,.18);
  background:rgba(244,240,220,.07);
  color:#f4f0dc;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  font-size:18px;
  line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 0 16px rgba(255,255,255,.03);
  cursor:pointer;
  touch-action:manipulation;
}
.layout-toggle:active{transform:scale(.96)}
.splash-layout-toggle{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  right:14px;
  z-index:5;
  background:rgba(12,22,16,.62);
  backdrop-filter:blur(12px);
}
.reader-layout-toggle{
  flex:0 0 auto;
  margin-left:auto;
  width:30px;
  height:30px;
  border-radius:10px;
  font-size:16px;
}
.compact-reader-head .reader-home-top-btn{margin-left:4px;}
body.force-landscape .layout-toggle,
body.auto-landscape-active .layout-toggle{color:#b8f4a2;border-color:rgba(184,244,162,.36);box-shadow:0 0 16px rgba(115,219,101,.16), inset 0 0 16px rgba(255,255,255,.03);}

@media (min-width:900px) and (orientation:landscape){
  body:not(.force-portrait) .app.reader-mode .lesson-wrap{
    width:min(100%,980px);
    max-width:980px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(315px,420px) minmax(340px,500px);
    grid-template-areas:
      "dots dots"
      "board annot"
      "moves annot"
      "moves variation"
      "moves tools"
      "moves flip";
    align-items:start;
    justify-content:center;
    column-gap:24px;
    row-gap:8px;
    padding:12px 20px 22px;
  }
  body:not(.force-portrait) .app.reader-mode #board.board{grid-area:board;width:min(39vw,420px);height:min(39vw,420px);max-width:420px;max-height:420px;justify-self:end;}
  body:not(.force-portrait) .app.reader-mode .move-nav-row{grid-area:moves;width:min(39vw,420px);max-width:420px;justify-self:end;align-self:start;}
  body:not(.force-portrait) .app.reader-mode .annotation-box{grid-area:annot;width:100%;max-width:500px;min-height:132px;font-size:18px;align-self:start;margin-top:0;}
  body:not(.force-portrait) .app.reader-mode .variation-box{grid-area:variation;width:100%;max-width:500px;}
  body:not(.force-portrait) .app.reader-mode .lesson-tools-row{grid-area:tools;width:100%;max-width:500px;}
  body:not(.force-portrait) .app.reader-mode .flip-board-btn{grid-area:flip;width:100%;max-width:500px;}
  body:not(.force-portrait) .app.reader-mode .game-nav-dots{grid-area:dots;justify-self:center;width:auto;max-width:min(62vw,640px);margin:0 auto 8px;}
  body:not(.force-portrait) .app.reader-mode .reader-head{position:sticky;top:0;z-index:20;}
}

body.force-landscape .app.reader-mode .lesson-wrap{
  width:min(100%,980px);
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(315px,420px) minmax(340px,500px);
  grid-template-areas:
    "dots dots"
    "board annot"
    "moves annot"
    "moves variation"
    "moves tools"
    "moves flip";
  align-items:start;
  justify-content:center;
  column-gap:24px;
  row-gap:8px;
  padding:12px 20px 22px;
}
body.force-landscape .app.reader-mode #board.board{grid-area:board;width:min(39vw,420px);height:min(39vw,420px);max-width:420px;max-height:420px;justify-self:end;}
body.force-landscape .app.reader-mode .move-nav-row{grid-area:moves;width:min(39vw,420px);max-width:420px;justify-self:end;align-self:start;}
body.force-landscape .app.reader-mode .annotation-box{grid-area:annot;width:100%;max-width:500px;min-height:132px;font-size:18px;align-self:start;margin-top:0;}
body.force-landscape .app.reader-mode .variation-box{grid-area:variation;width:100%;max-width:500px;}
body.force-landscape .app.reader-mode .lesson-tools-row{grid-area:tools;width:100%;max-width:500px;}
body.force-landscape .app.reader-mode .flip-board-btn{grid-area:flip;width:100%;max-width:500px;}
body.force-landscape .app.reader-mode .game-nav-dots{grid-area:dots;justify-self:center;width:auto;max-width:min(62vw,640px);margin:0 auto 8px;}

@media (max-width:899px){
  body.force-landscape .app.reader-mode .lesson-wrap{
    grid-template-columns:1fr;
    grid-template-areas:"dots" "board" "moves" "annot" "variation" "tools" "flip";
    padding-left:10px;
    padding-right:10px;
    column-gap:0;
  }
  body.force-landscape .app.reader-mode #board.board,
  body.force-landscape .app.reader-mode .move-nav-row,
  body.force-landscape .app.reader-mode .annotation-box,
  body.force-landscape .app.reader-mode .variation-box,
  body.force-landscape .app.reader-mode .lesson-tools-row,
  body.force-landscape .app.reader-mode .flip-board-btn{width:100%;max-width:520px;justify-self:center;}
}

/* Landscape v2: no splash-screen layout toggle */
.splash-layout-toggle{display:none!important;}

/* FINISHED APP 9 — desktop-only landscape toggle */
.layout-toggle.mobile-disabled{
  opacity:.45;
  filter:grayscale(.45);
}
@media (max-width:899px){
  body.force-landscape .app.reader-mode .lesson-wrap,
  body.auto-landscape-active .app.reader-mode .lesson-wrap{
    display:block!important;
  }
}

/* FINISHED APP 10.1 — refined desktop landscape reader controls
   - Right-side text box has a fixed visual size.
   - Game buttons + Flip Board sit on the same horizontal line as the big move buttons.
   - Long annotation text is fitted smaller by JS so the box does not push controls/scroll. */
.landscape-side-controls{
  width:100%;
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:8px;
  order:5;
}
.landscape-side-controls .lesson-tools-row,
.landscape-side-controls .flip-board-btn{
  width:100%;
  max-width:none;
}

@media (min-width:900px) and (orientation:landscape){
  body:not(.force-portrait) .app.reader-mode .lesson-wrap{
    width:min(100%,1020px);
    max-width:1020px;
    grid-template-columns:minmax(300px,410px) minmax(360px,520px);
    grid-template-areas:
      "dots dots"
      "board annot"
      "moves side";
    column-gap:24px;
    row-gap:10px;
    align-items:start;
    overflow:visible;
  }
  body:not(.force-portrait) .app.reader-mode #board.board{
    width:min(38vw,410px);
    height:min(38vw,410px);
    max-width:410px;
    max-height:410px;
    justify-self:end;
  }
  body:not(.force-portrait) .app.reader-mode .annotation-box{
    grid-area:annot;
    width:100%;
    max-width:520px;
    height:min(38vw,410px);
    min-height:0;
    max-height:410px;
    overflow:hidden;
    align-self:start;
    margin-top:0;
    display:flex;
    align-items:flex-start;
  }
  body:not(.force-portrait) .app.reader-mode .move-nav-row{
    grid-area:moves;
    width:min(38vw,410px);
    max-width:410px;
    justify-self:end;
    align-self:start;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls{
    grid-area:side;
    width:100%;
    max-width:520px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 150px;
    gap:10px;
    align-items:stretch;
    align-self:start;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .lesson-tools-row{
    grid-template-columns:1fr .72fr 1fr;
    gap:8px;
    margin:0;
    height:64px;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .lesson-tool-btn,
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .flip-board-btn{
    height:64px;
    min-height:64px;
    padding:8px 10px;
    align-self:stretch;
  }
  body:not(.force-portrait) .app.reader-mode .variation-box{
    grid-area:annot;
    align-self:end;
    justify-self:start;
    width:100%;
    max-width:520px;
    margin-top:0;
  }
}

body.force-landscape .app.reader-mode .lesson-wrap{
  width:min(100%,1020px);
  max-width:1020px;
  grid-template-columns:minmax(300px,410px) minmax(360px,520px);
  grid-template-areas:
    "dots dots"
    "board annot"
    "moves side";
  column-gap:24px;
  row-gap:10px;
  align-items:start;
  overflow:visible;
}
body.force-landscape .app.reader-mode #board.board{
  width:min(38vw,410px);
  height:min(38vw,410px);
  max-width:410px;
  max-height:410px;
  justify-self:end;
}
body.force-landscape .app.reader-mode .annotation-box{
  grid-area:annot;
  width:100%;
  max-width:520px;
  height:min(38vw,410px);
  min-height:0;
  max-height:410px;
  overflow:hidden;
  align-self:start;
  margin-top:0;
  display:flex;
  align-items:flex-start;
}
body.force-landscape .app.reader-mode .move-nav-row{
  grid-area:moves;
  width:min(38vw,410px);
  max-width:410px;
  justify-self:end;
  align-self:start;
}
body.force-landscape .app.reader-mode .landscape-side-controls{
  grid-area:side;
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:10px;
  align-items:stretch;
  align-self:start;
}
body.force-landscape .app.reader-mode .landscape-side-controls .lesson-tools-row{
  grid-template-columns:1fr .72fr 1fr;
  gap:8px;
  margin:0;
  height:64px;
}
body.force-landscape .app.reader-mode .landscape-side-controls .lesson-tool-btn,
body.force-landscape .app.reader-mode .landscape-side-controls .flip-board-btn{
  height:64px;
  min-height:64px;
  padding:8px 10px;
  align-self:stretch;
}
body.force-landscape .app.reader-mode .variation-box{
  grid-area:annot;
  align-self:end;
  justify-self:start;
  width:100%;
  max-width:520px;
  margin-top:0;
}

@media (max-width:899px){
  .landscape-side-controls{width:100%;max-width:520px;margin:0 auto;}
  body.force-landscape .app.reader-mode .landscape-side-controls{
    grid-area:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
    max-width:520px;
  }
}

/* FINISHED APP 10.2 — landscape controls normal spacing
   Keeps desktop landscape annotation fixed and lets the right-side game controls
   stack normally instead of being squeezed into one cramped row. */
@media (min-width:900px) and (orientation:landscape){
  body:not(.force-portrait) .app.reader-mode .lesson-wrap{
    grid-template-columns:minmax(300px,410px) minmax(390px,520px);
    grid-template-areas:
      "dots dots"
      "board annot"
      "moves side";
    row-gap:10px;
    align-items:start;
  }
  body:not(.force-portrait) .app.reader-mode .annotation-box{
    height:min(37vw,390px);
    max-height:390px;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-self:start;
    width:100%;
    max-width:520px;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .lesson-tools-row{
    display:grid;
    grid-template-columns:1fr .72fr 1fr;
    gap:8px;
    height:auto;
    margin:0;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .lesson-tool-btn{
    height:52px;
    min-height:52px;
    padding:10px 12px;
    white-space:nowrap;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .flip-board-btn{
    height:44px;
    min-height:44px;
    padding:9px 12px;
    width:100%;
  }
}
body.force-landscape .app.reader-mode .lesson-wrap{
  grid-template-columns:minmax(300px,410px) minmax(390px,520px);
  grid-template-areas:
    "dots dots"
    "board annot"
    "moves side";
  row-gap:10px;
  align-items:start;
}
body.force-landscape .app.reader-mode .annotation-box{
  height:min(37vw,390px);
  max-height:390px;
}
body.force-landscape .app.reader-mode .landscape-side-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-self:start;
  width:100%;
  max-width:520px;
}
body.force-landscape .app.reader-mode .landscape-side-controls .lesson-tools-row{
  display:grid;
  grid-template-columns:1fr .72fr 1fr;
  gap:8px;
  height:auto;
  margin:0;
}
body.force-landscape .app.reader-mode .landscape-side-controls .lesson-tool-btn{
  height:52px;
  min-height:52px;
  padding:10px 12px;
  white-space:nowrap;
}
body.force-landscape .app.reader-mode .landscape-side-controls .flip-board-btn{
  height:44px;
  min-height:44px;
  padding:9px 12px;
  width:100%;
}

/* FINISHED APP 19 — trophy toast at top of board in lesson reader */
.trophy-board-anchor{
  position:relative;
}
.trophy-toast.board-top-trophy-toast{
  position:absolute;
  left:50%;
  top:8px;
  bottom:auto;
  transform:translateX(-50%) translateY(-12px);
  z-index:80;
  max-width:min(88%,440px);
  text-align:center;
  pointer-events:none;
}
.trophy-toast.board-top-trophy-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* FINISHED APP 24.1 — splash page landscape/desktop fit only
   Keeps APP 24 behavior intact; adjusts only the start screen sizing when viewport is wide/short. */
@media (orientation: landscape){
  #startScreen.start-screen{
    min-height:100svh;
    padding:14px 26px;
    place-items:center;
  }

  #startScreen .start-text{
    width:min(700px,96vw);
    margin-top:0;
    transform:scale(.92);
    transform-origin:center center;
  }

  #startScreen .style4-splash .magic-intro{
    font-size:clamp(22px,3.4vw,34px);
    margin:0 0 10px;
  }

  #startScreen .style4-splash .splash-title{
    line-height:.78;
  }

  #startScreen .style4-splash .title-white{
    font-size:clamp(38px,7.8vw,76px);
  }

  #startScreen .style4-splash .title-green{
    font-size:clamp(58px,11.8vw,116px);
  }

  #startScreen .style4-splash .splash-divider{
    width:min(280px,38vw);
    gap:14px;
    margin:8px auto 10px;
  }

  #startScreen .style4-splash .splash-divider strong{
    font-size:clamp(24px,3.5vw,32px);
  }

  #startScreen .style4-splash .splash-subtitle{
    font-size:clamp(13px,2.1vw,17px);
    margin:0 0 14px;
    letter-spacing:.07em;
  }

  #startScreen .style4-splash .primary-btn{
    min-width:190px;
    padding:13px 34px;
    font-size:clamp(18px,2.8vw,22px);
  }
}

/* Extra protection for very short landscape screens, like laptop browser windows. */
@media (orientation: landscape) and (max-height:620px){
  #startScreen .start-text{
    transform:scale(.82);
  }

  #startScreen .style4-splash .magic-intro{
    margin-bottom:6px;
  }

  #startScreen .style4-splash .splash-divider{
    margin:4px auto 6px;
  }

  #startScreen .style4-splash .splash-subtitle{
    margin-bottom:10px;
  }
}


/* Local self-contained chessboard renderer */
.local-chessground{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;height:100%;position:relative;user-select:none;touch-action:manipulation;overflow:hidden;border-radius:12px;background:#d9c7a5}
.local-chessground .lcg-square{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.local-chessground .light{background:#e8d8b8}
.local-chessground .dark{background:#7a8f5a}
.local-chessground .last{box-shadow:inset 0 0 0 999px rgba(255,230,80,.28)}
.local-chessground .mark::after{content:'';position:absolute;width:34%;height:34%;border-radius:50%;background:rgba(40,190,90,.38);z-index:1}
.local-chessground .mark-red::after{background:rgba(220,55,55,.38)}
.local-chessground .mark-yellow::after{background:rgba(240,200,50,.42)}
.local-chessground .mark-blue::after{background:rgba(60,120,230,.35)}
.local-chessground .lcg-piece{font-family:'Times New Roman','DejaVu Serif',serif;font-size:clamp(30px,8.2vmin,72px);line-height:1;z-index:2;filter:drop-shadow(0 2px 1px rgba(0,0,0,.28))}
.local-chessground .lcg-piece.white{color:#f7f0df;text-shadow:0 0 1px #111,0 1px 2px rgba(0,0,0,.55)}
.local-chessground .lcg-piece.black{color:#161616;text-shadow:0 1px 1px rgba(255,255,255,.24)}
.local-chessground small{position:absolute;font-size:10px;font-weight:700;opacity:.55;z-index:3;pointer-events:none}
.local-chessground .rank{left:3px;top:2px}
.local-chessground .file{right:4px;bottom:1px}

/* FINISHED APP ALL LOCAL — Merida/local-piece board test */
.local-chessground.meridia-darkgold-board,
.local-chessground.merida-darkgold-board{
  background:#2b2116;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 2px rgba(235,197,111,.18);
}
.local-chessground.meridia-darkgold-board .light,
.local-chessground.merida-darkgold-board .light{background:#d9c29a !important;}
.local-chessground.meridia-darkgold-board .dark,
.local-chessground.merida-darkgold-board .dark{background:#4b3422 !important;}
.local-chessground.meridia-darkgold-board .last,
.local-chessground.merida-darkgold-board .last{box-shadow:inset 0 0 0 999px rgba(245,199,74,.30) !important;}
.local-chessground .lcg-piece-svg{
  width:78%;
  height:78%;
  object-fit:contain;
  z-index:2;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.38));
}
.local-chessground .lcg-piece-svg.white{
  filter:invert(96%) sepia(13%) saturate(607%) hue-rotate(339deg) brightness(108%) contrast(98%) drop-shadow(0 2px 1px rgba(0,0,0,.55));
}
.local-chessground .lcg-piece-svg.black{
  filter:invert(5%) sepia(4%) saturate(1244%) hue-rotate(350deg) brightness(92%) contrast(93%) drop-shadow(0 2px 1px rgba(230,196,125,.18));
}
.local-chessground small{color:#f1d28a !important;text-shadow:0 1px 2px rgba(0,0,0,.55);opacity:.72 !important;}

/* Uploaded SVG piece-set fix — board grid, white/black color, and PGN arrows */
.local-chessground{position:relative;overflow:hidden;aspect-ratio:1/1;display:block;touch-action:manipulation;}
.local-chessground .lcg-board-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);z-index:1;}
.local-chessground .lcg-square{position:relative;display:flex;align-items:center;justify-content:center;}
.local-chessground .lcg-square.mark-green{box-shadow:inset 0 0 0 999px rgba(53,208,111,.15)}
.local-chessground .lcg-square.mark-red{box-shadow:inset 0 0 0 999px rgba(255,77,77,.15)}
.local-chessground .lcg-square.mark-blue{box-shadow:inset 0 0 0 999px rgba(66,165,255,.15)}
.local-chessground .lcg-square.mark-yellow{box-shadow:inset 0 0 0 999px rgba(255,216,77,.16)}
.local-chessground .lcg-shapes{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));}
.local-chessground .lcg-piece-svg{position:relative;z-index:4;}
.local-chessground small{position:absolute;z-index:5;font-size:10px;font-weight:800;pointer-events:none;}


/* Uploaded SVG recolor pass — use generated SVG colors, do not CSS-invert pieces */
.local-chessground .lcg-piece-svg.white,
.local-chessground .lcg-piece-svg.black{
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.45)) !important;
}

/* Piece style toggle — textless knight button next to layout toggle */
.piece-style-toggle{
  flex:0 0 auto;
  margin-left:4px;
  width:30px;
  height:30px;
  border-radius:10px;
  font-size:17px;
}
.piece-style-toggle.secondary-active{
  color:#f1d28a;
  border-color:rgba(241,210,138,.42);
  box-shadow:0 0 16px rgba(241,210,138,.16), inset 0 0 16px rgba(255,255,255,.03);
}


/* Recropped uploaded piece set default */
.local-chessground .lcg-piece-svg{
  width:86% !important;
  height:86% !important;
  object-fit:contain !important;
}
.local-chessground .lcg-piece-svg.white,
.local-chessground .lcg-piece-svg.black{
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.42)) !important;
}


/* Piece toggle fix — tiny click feedback */
.piece-style-toggle.piece-toggle-pulse{
  animation: pieceTogglePulse .22s ease-out;
}
@keyframes pieceTogglePulse{
  0%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.12) rotate(-8deg); }
  100%{ transform:scale(1) rotate(0deg); }
}

/* FINISHED APP ALL LOCAL THEMES 1 — piece + board theme controls */
.board-theme-toggle{
  flex:0 0 auto;
  margin-left:4px;
  width:30px;
  height:30px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.mini-board-icon{
  width:17px;
  height:17px;
  border-radius:3px;
  display:block;
  box-shadow:0 0 0 1px rgba(244,240,220,.28), 0 2px 6px rgba(0,0,0,.22);
  background:conic-gradient(#4b3422 25%, #d9c29a 0 50%, #4b3422 0 75%, #d9c29a 0);
}
.board-theme-toggle[data-theme="green"] .mini-board-icon{
  background:conic-gradient(#5f7f51 25%, #e4d8b8 0 50%, #5f7f51 0 75%, #e4d8b8 0);
}
.board-theme-toggle[data-theme="ocher"] .mini-board-icon{
  background:conic-gradient(#b8672b 25%, #f0d6a6 0 50%, #b8672b 0 75%, #f0d6a6 0);
}
.board-theme-toggle.board-toggle-pulse{animation:boardTogglePulse .22s ease-out;}
@keyframes boardTogglePulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.12) rotate(4deg)}
  100%{transform:scale(1)}
}
.local-chessground.darkgold-board,
.local-chessground.meridia-darkgold-board,
.local-chessground.merida-darkgold-board{
  background:#2b2116;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 2px rgba(235,197,111,.18);
}
.local-chessground.darkgold-board .light,
.local-chessground.meridia-darkgold-board .light,
.local-chessground.merida-darkgold-board .light{background:#d9c29a !important;}
.local-chessground.darkgold-board .dark,
.local-chessground.meridia-darkgold-board .dark,
.local-chessground.merida-darkgold-board .dark{background:#4b3422 !important;}
.local-chessground.darkgold-board .last,
.local-chessground.meridia-darkgold-board .last,
.local-chessground.merida-darkgold-board .last{box-shadow:inset 0 0 0 999px rgba(245,199,74,.30) !important;}
.local-chessground.green-board{
  background:#25351f;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 2px rgba(218,231,184,.16);
}
.local-chessground.green-board .light{background:#e4d8b8 !important;}
.local-chessground.green-board .dark{background:#5f7f51 !important;}
.local-chessground.green-board .last{box-shadow:inset 0 0 0 999px rgba(255,226,90,.24) !important;}
.local-chessground.ocher-board{
  background:#3b2414;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,199,105,.18);
}
.local-chessground.ocher-board .light{background:#f0d6a6 !important;}
.local-chessground.ocher-board .dark{background:#b8672b !important;}
.local-chessground.ocher-board .last{box-shadow:inset 0 0 0 999px rgba(255,238,112,.23) !important;}
.local-chessground.green-board small,
.local-chessground.ocher-board small,
.local-chessground.darkgold-board small{color:#f1d28a !important;text-shadow:0 1px 2px rgba(0,0,0,.58);opacity:.72 !important;}


/* VARIATION BOARD 1 — automatic light-blue board for optional PGN variations.
   This theme is not part of the normal board-color cycle; it only appears while inside a variation. */
.local-chessground.variationblue-board{
  background:#24455a;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 2px rgba(185,226,245,.20);
}
.local-chessground.variationblue-board .light{background:#d7edf8 !important;}
.local-chessground.variationblue-board .dark{background:#7fb8d4 !important;}
.local-chessground.variationblue-board .last{box-shadow:inset 0 0 0 999px rgba(255,236,105,.20) !important;}
.local-chessground.variationblue-board small{color:#f4fbff !important;text-shadow:0 1px 2px rgba(0,0,0,.55);opacity:.75 !important;}

/* FINISHED LOCAL APP 2 — 3D alternate pieces + keyboard panel polish */
.controls-list .customize-shortcut span{
  background:rgba(75, 190, 105, .22) !important;
  color:#7dff93 !important;
  border:1px solid rgba(125,255,147,.24);
  box-shadow:inset 0 0 10px rgba(125,255,147,.08), 0 0 10px rgba(64,180,92,.08);
}
@media (min-width:900px) and (orientation:landscape){
  body.force-landscape .controls-panel,
  body.auto-landscape-active .controls-panel{
    transform:scale(.8);
    transform-origin:center center;
  }
}

/* 3D alternate piece polish — thin black outline + taller royal/minor tall pieces */
.local-chessground .lcg-piece-svg.piece-style-secondary{
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(0,0,0,.85)) !important;
  width:86% !important;
  height:86% !important;
  object-fit:contain !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:102% !important;
  width:auto !important;
  max-width:96% !important;
  object-fit:contain !important;
  transform:translateY(-4%);
  transform-origin:center bottom;
}

/* FINISHED LOCAL APP NEW 3D 2 — alternate Soviet set size/clipping polish */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  align-self:flex-end !important;
  width:auto !important;
  height:86% !important;
  max-width:96% !important;
  object-fit:contain !important;
  transform:none !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:69% !important;
  max-width:78% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:95% !important;
  max-width:108% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:103% !important;
  max-width:112% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:86% !important;
  max-width:96% !important;
}

/* FINISHED LOCAL APP NEW 3D 3 — alignment and scale pass */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-square{
  align-items:center !important;
  justify-content:center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  align-self:flex-end !important;
  width:auto !important;
  height:86% !important;
  max-width:96% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  transform:none !important;
  transform-origin:center bottom !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:69% !important;   /* pawns stay 20% smaller */
  max-width:78% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:95% !important;   /* bishops +10% */
  max-width:106% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:103% !important;  /* queens +20% */
  max-width:116% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:112% !important;  /* kings +30% */
  max-width:124% !important;
}

/* FINISHED LOCAL 3D 4.1 — optical canvas fit for alternate Soviet pieces
   Keep pieces centered in their squares; remove bottom anchoring that made the 3D set sit too low. */
.local-chessground .lcg-square{
  align-items:center !important;
  justify-content:center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  align-self:center !important;
  object-position:center center !important;
  transform:none !important;
  transform-origin:center center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  align-self:center !important;
  object-position:center center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  align-self:center !important;
  object-position:center center !important;
}

/* FINISHED LOCAL 3D 5 — knight-reference alignment + 10% smaller rooks
   Apply the knight's optical centering to back-rank alternate pieces; leave pawns as-is. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  align-self:center !important;
  object-position:center center !important;
  transform:none !important;
  transform-origin:center center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:77.4% !important; /* rooks 10% smaller than the 86% knight reference */
  max-width:86% !important;
  width:auto !important;
}


/* FINISHED LOCAL 3D 6 — bishop-baseline alignment fix
   Locked: pawns, knights, bishops.
   Adjust only rooks, queens, and kings so their bases align with the bishop baseline. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  transform:translateY(8.8%) !important;
  transform-origin:center center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  transform:translateY(-4%) !important;
  transform-origin:center center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  transform:translateY(-8.5%) !important;
  transform-origin:center center !important;
}


/* FINISHED LOCAL 3D 6 — 3D alternate color + double-size test
   White 3D pieces: ivory cream.
   Black 3D pieces: dark charcoal grey with light grey details/outline.
   Display size: doubled from the current 3D alternate sizing. */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  height:172% !important;
  width:auto !important;
  max-width:192% !important;
  object-fit:contain !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:138% !important;
  max-width:156% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:154.8% !important;
  max-width:172% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:190% !important;
  max-width:212% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:206% !important;
  max-width:232% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:224% !important;
  max-width:248% !important;
}



/* Locked 3D size hierarchy from the approved realistic test */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:110% !important;
  max-width:125% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:124% !important;
  max-width:138% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N{
  height:138% !important;
  max-width:154% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:152% !important;
  max-width:170% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:165% !important;
  max-width:186% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:179% !important;
  max-width:198% !important;
}

/* Subtle move polish: safe CSS transition only.
   No mutation observer, no global blur. */
.local-chessground .lcg-piece-svg,
.local-chessground .lcg-piece{
  transition:transform 160ms cubic-bezier(.2,.8,.2,1), filter 120ms ease !important;
}


/* FINISHED LOCAL 3D 9 — true base-anchor fix
   Current 3D size is locked.
   The bad downward offset is overridden so the visible base sits just above the square edge. */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  object-fit:contain !important;
  object-position:center bottom !important;
  transform:translateY(-11%) !important;
  transform-origin:center bottom !important;
  transition:transform 160ms cubic-bezier(.2,.8,.2,1), filter 120ms ease !important;
}

/* Locked 3D size hierarchy from the approved realistic sizing */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:110% !important;
  max-width:125% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:124% !important;
  max-width:138% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N{
  height:138% !important;
  max-width:154% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:152% !important;
  max-width:170% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:165% !important;
  max-width:186% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:179% !important;
  max-width:198% !important;
}



/* Keep pawn exactly where it is */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  transform:translateY(0%) !important;
}

/* Move all other pieces onto the pawn floor line */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  transform:translateY(7%) !important;
}



/* Locked 3D size hierarchy */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:110% !important;
  max-width:125% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:124% !important;
  max-width:138% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N{
  height:138% !important;
  max-width:154% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:152% !important;
  max-width:170% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:165% !important;
  max-width:186% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:179% !important;
  max-width:198% !important;
}

/* Remove piece movement animation/blur for now */
.local-chessground .lcg-piece,
.local-chessground .lcg-piece-svg{
  transition:none !important;
  animation:none !important;
  filter:inherit;
}
.local-chessground .lcg-piece-svg.piece-moving,
.local-chessground .lcg-piece.piece-moving{
  filter:inherit !important;
}


/* FINISHED LOCAL 3D 13 — simple brown alternate + exact 4px base gap
   Black pieces are generated from the white pieces with only the fill changed to light brown.
   All 3D piece bottoms sit 4px above the bottom of their square. */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-square{
  align-items:flex-end !important;
  justify-content:center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  align-self:flex-end !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  transform:translateY(-4px) !important;
  transform-origin:center bottom !important;
  transition:none !important;
  animation:none !important;
}

/* Locked 3D size hierarchy from the approved realistic sizing */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:110% !important;
  max-width:125% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:124% !important;
  max-width:138% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N{
  height:138% !important;
  max-width:154% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:152% !important;
  max-width:170% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:165% !important;
  max-width:186% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:179% !important;
  max-width:198% !important;
}

/* No movement animation for now */
.local-chessground .lcg-piece,
.local-chessground .lcg-piece-svg{
  transition:none !important;
  animation:none !important;
}


/* FINISHED LOCAL 3D 14 - simple placement fix
   Keep design and sizes. Move pieces upward so bases sit fully inside squares. */
.local-chessground .lcg-piece-svg.piece-style-secondary{
  object-position:center bottom !important;
  transform:translateY(-14px) !important;
  transform-origin:center bottom !important;
}


/* FINISHED LOCAL 3D 15 — asset-canvas anchor fix
   Piece placement is now baked into the PNG canvases.
   No vertical CSS transform hacks. Every 3D piece image is a square canvas
   with the piece base sitting 4px above the canvas bottom. */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-square{
  align-items:center !important;
  justify-content:center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  transform-origin:center center !important;
  align-self:center !important;
  transition:none !important;
  animation:none !important;
}


/* FINISHED LOCAL 3D 16 — seamless tall-piece overflow
   Keep current 3D piece size and 4px bottom anchor.
   Allow tall pieces to extend above their square without clipping. */
.local-chessground,
.local-chessground *,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square,
.local-chessground .lcg-piece-layer,
.local-chessground .cg-board,
.local-chessground .cg-wrap,
.local-chessground square,
.local-chessground piece{
  overflow:visible !important;
}

.local-chessground .lcg-piece-svg.piece-style-secondary,
.local-chessground .lcg-piece.piece-style-secondary{
  z-index:30 !important;
  position:relative !important;
  pointer-events:none;
}

.local-chessground .lcg-square{
  isolation:isolate;
}


/* FINISHED LOCAL 3D 18 — king/queen overlap layer + pawn 3px lift
   Keep design, sizes, and placement system. Only fix overlap order and pawn height. */

/* Make sure tall pieces can draw outside their square/board cleanly. */
.local-chessground,
.local-chessground *,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square,
.local-chessground .lcg-piece-layer,
.local-chessground .cg-board,
.local-chessground .cg-wrap,
.local-chessground square,
.local-chessground piece{
  overflow:visible !important;
}

/* Do not isolate individual squares; king/queen overflow needs to layer over neighbors. */
.local-chessground .lcg-square{
  isolation:auto !important;
  position:relative !important;
}

/* Normal alternate pieces. */
.local-chessground .lcg-piece-svg.piece-style-secondary{
  position:relative !important;
  z-index:20 !important;
}

/* Pawns: move all alternate 3D pawns up exactly 3px. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  transform:translateY(-3px) !important;
  z-index:20 !important;
}

/* Kings and queens must sit above all other pieces when their crowns/tops overflow. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  position:relative !important;
  z-index:120 !important;
}

/* Raise the square itself when it contains a 3D king/queen so overflow beats neighboring squares. */
.local-chessground .lcg-square:has(.lcg-piece-svg.piece-style-secondary.piece-K),
.local-chessground .lcg-square:has(.lcg-piece-svg.piece-style-secondary.piece-Q){
  z-index:120 !important;
}


/* FINISHED LOCAL 3D 18 — royal front/no-crop fix + brown black detail lines
   White king/queen should always render in front and not be cropped by neighboring squares. */

.local-chessground,
.local-chessground *,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square,
.local-chessground .lcg-piece-layer,
.local-chessground .cg-board,
.local-chessground .cg-wrap,
.local-chessground square,
.local-chessground piece{
  overflow:visible !important;
}

.local-chessground .lcg-board-grid{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
}

.local-chessground .lcg-square{
  position:relative !important;
  isolation:auto !important;
  overflow:visible !important;
}

/* White royals always in front. */
.local-chessground .lcg-piece-svg.piece-style-secondary.white.piece-K,
.local-chessground .lcg-piece-svg.piece-style-secondary.white.piece-Q{
  position:relative !important;
  z-index:999999 !important;
}

/* Raise the whole square containing a white royal, not only the image. */
.local-chessground .lcg-square.white-royal-front-square{
  z-index:999998 !important;
  overflow:visible !important;
  isolation:auto !important;
}

.local-chessground .lcg-square.white-royal-front-square .lcg-piece-svg.piece-style-secondary{
  z-index:999999 !important;
}


/* BOARD BAR BUG FIX
   Prevent the board from becoming taller than 8x8 when switching piece styles.
   The extra brown strip was caused by board/background layers extending below the square grid. */
.local-chessground{
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

.local-chessground .lcg-board-grid{
  display:grid !important;
  grid-template-columns:repeat(8, 1fr) !important;
  grid-template-rows:repeat(8, 1fr) !important;
  aspect-ratio:1 / 1 !important;
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
}

.local-chessground .lcg-square{
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
}

/* Hide any accidental board/background filler that appears below the real 8x8 grid. */
.local-chessground::after,
.local-chessground .lcg-board-grid::after{
  display:none !important;
  content:none !important;
}

/* Keep piece images from changing board layout in either 2D or 3D mode. */
.local-chessground .lcg-piece-svg,
.local-chessground .lcg-piece{
  flex:0 0 auto !important;
}


/* REDONE 3D 2 — keyboard panel O shortcut visual fallback */
.shortcut-key{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.7em;
  padding:.25em .65em;
  border-radius:12px;
  background:rgba(147, 220, 124, .16);
  color:#b8ff9e;
  font-weight:800;
  margin-right:.75em;
}