:root{--green:#55b83e;--green2:#dff4c8;--blue:#3189e7;--purple:#6232a4;--orange:#ffa21a;--pink:#ee5f91;--ink:#25382f;--cream:#fffdf5}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Arial,sans-serif;color:var(--ink)}
body{background:#e9f7ee}.page{min-height:100vh;background-size:cover;background-position:center;padding:14px}.shell{max-width:1180px;margin:auto}
.header{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fffef5ef;border:3px solid #dbe9dc;border-radius:24px;padding:10px 14px;box-shadow:0 8px 22px #24503b1b}
.brand{font-size:24px;font-weight:950;color:#317a55}.gameTitle{font-size:clamp(27px,4vw,42px);font-weight:950;color:#54269b;text-align:center;flex:1}.homeBtn,.soundBtn{width:54px;height:54px;border:0;border-radius:50%;background:#3e91ea;color:#fff;font-size:27px;box-shadow:0 4px 0 #2472c0}
.panel{margin-top:10px;background:#fffdf7f2;border:3px solid #dbe8dc;border-radius:25px;padding:14px;box-shadow:0 9px 28px #244b3c1c}
.help{text-align:center;font-size:18px;font-weight:800;color:#425f52;margin:3px 0 10px}.hud{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.pill{background:#e8f6e7;border-radius:15px;padding:7px 12px;font-weight:900}
.variants{display:flex;gap:7px}.variant{width:38px;height:38px;border-radius:50%;border:3px solid #bad8bf;background:white;font-weight:900}.variant.on{background:#62c24d;color:white;border-color:#3da42c}
.stage{min-height:600px;margin-top:10px;border-radius:24px;border:3px solid #cfe2d2;background:#ffffffc2;padding:12px;position:relative;overflow:hidden}
.grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.wordCard{background:#fff;border:3px solid #d7e5da;border-radius:18px;padding:7px;text-align:center}.pic{height:122px;background:#f5fbff;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}.pic img{width:100%;height:100%;object-fit:contain}.join{display:flex;gap:5px;margin-top:6px}.fixed,.drop{height:48px;flex:1;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:950}.fixed{background:#ffe78d;border:3px solid #d9af2b}.drop{background:white;border:3px dashed #dca044;color:#769087}.drop.done{background:#e0f4cd;border-style:solid;color:#294238}
.bank{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}.tile{min-width:70px;min-height:52px;border-radius:14px;border:3px solid #70ad58;background:#dff4c8;box-shadow:0 4px 0 #5b9447;font-size:23px;font-weight:950;padding:7px 12px;touch-action:manipulation}.tile:active{transform:translateY(2px)}
.msg{text-align:center;min-height:34px;font-size:20px;font-weight:900;margin-top:8px}.error{color:#d73542}.ok{color:#248a4a}
.scene{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:500px}.bigPic{width:min(430px,85vw);height:310px;border-radius:25px;background:#fff;border:4px solid #d8e7db;display:flex;align-items:center;justify-content:center;overflow:hidden}.bigPic img{width:100%;height:100%;object-fit:contain}.bigPic.reveal img{animation:reveal .65s ease-out}@keyframes reveal{0%{opacity:0;transform:scale(.65)}100%{opacity:1;transform:scale(1)}}
.options{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}.option{min-width:95px;padding:13px 18px;border-radius:17px;border:3px solid #79ad88;background:white;font-size:25px;font-weight:900}
.alphabetArea{width:min(760px,95%);height:470px;position:relative;margin:10px auto}.dot{position:absolute;width:58px;height:58px;border-radius:50%;background:white;border:4px solid #4ea66a;font-size:24px;font-weight:950}.dot.start{background:#fff085;border-color:#e0a10a;box-shadow:0 0 0 8px #fff2a361}.dot.done{background:#c6edcb}.drawSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.frag{display:none}
.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:16px}.bucket{min-height:230px;background:#fff;border:4px dashed #7eb28b;border-radius:22px;padding:12px;text-align:center;font-size:22px;font-weight:900}
.seq{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.seqTile{min-width:85px;min-height:70px;border-radius:17px;background:white;border:3px solid #83b68d;font-size:27px;font-weight:900;display:flex;align-items:center;justify-content:center}
.result{position:fixed;inset:0;background:#eff9f0ed;z-index:99;display:flex;align-items:center;justify-content:center;padding:20px}.resultCard{background:#fff;border:4px solid #d7eadb;border-radius:30px;width:min(620px,94vw);padding:28px;text-align:center;box-shadow:0 20px 70px #244b3b3b}.resultCard h2{font-size:42px;margin:5px}.grade{font-size:34px;font-weight:950;color:#367a57}.mist{font-size:23px;font-weight:900;margin:12px}.rbtn{border:0;border-radius:17px;padding:14px 22px;margin:6px;font-size:19px;font-weight:900;background:#dff3cd}
.menuHero{max-width:1180px;width:100%;border-radius:24px;display:block;margin:0 auto 16px;box-shadow:0 10px 35px #234a3b25}.catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.gameCard{background:white;border:3px solid #d9e8dc;border-radius:20px;padding:13px;border-top-width:9px;box-shadow:0 6px 20px #244b3b17}.gameCard h3{margin:0 0 7px;font-size:19px}.gameCard p{font-size:14px;color:#63776e;min-height:40px}.play{display:inline-block;padding:9px 13px;border-radius:12px;background:#dff4cb;color:#2d684c;font-weight:900}
@media(max-width:760px){.grid8{grid-template-columns:repeat(2,1fr)}.pic{height:100px}.stage{min-height:560px}.twoCol{grid-template-columns:1fr}.gameTitle{font-size:27px}.homeBtn,.soundBtn{width:48px;height:48px}.alphabetArea{height:430px}}

/* ===== Learnika bookshelf home ===== */
.homeBooks{min-height:100vh;background:linear-gradient(#eef7f1 0 64%,#e5d5bc 64%);padding:18px;overflow:hidden}
.shopShell{max-width:1280px;margin:0 auto}
.shopHeader{display:flex;align-items:center;justify-content:center;gap:18px;background:#fffdf7;border:3px solid #dce9df;border-radius:28px;padding:16px 22px;box-shadow:0 10px 30px #294b3c1d}
.shopLogoMark{width:78px;height:78px;border-radius:22px;background:#77c99a;display:flex;align-items:center;justify-content:center;font-size:43px;box-shadow:inset 0 -5px 0 #58a877}
.shopTitle{font-size:42px;font-weight:950;color:#2e7555;line-height:1}.shopSub{font-size:18px;color:#6c7a73;margin-top:6px;text-align:center}
.storeScene{margin-top:18px;background:linear-gradient(180deg,#f7efe4,#f2e4cf);border-radius:32px;border:3px solid #d9c9b0;box-shadow:0 14px 40px #51391f20;padding:26px 28px 36px;position:relative}
.storeScene:before{content:"";position:absolute;inset:18px;border:2px solid #eadbc7;border-radius:24px;pointer-events:none}
.shelfTitle{text-align:center;font-size:30px;font-weight:950;color:#5e4432;margin:3px 0 8px}.shelfHint{text-align:center;color:#7a6554;font-size:16px;margin-bottom:18px}
.booksRow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:end;padding:16px 22px 0}
.bookLink{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;transition:.25s}.bookLink:hover{transform:translateY(-8px)}.bookLink.disabled{opacity:.62;filter:saturate(.65);pointer-events:none}
.book{width:210px;height:300px;border-radius:15px 20px 20px 15px;box-shadow:11px 12px 0 #4c3524,0 18px 28px #523a2830;position:relative;overflow:hidden;border:5px solid rgba(255,255,255,.55)}
.book:before{content:"";position:absolute;left:12px;top:0;bottom:0;width:5px;background:#ffffff65}
.book:after{content:"";position:absolute;right:11px;top:9px;bottom:9px;width:7px;border-radius:6px;background:#ffffff38}
.book.spring{background:linear-gradient(145deg,#85d39c,#4eaa70)}.book.summer{background:linear-gradient(145deg,#77cbe9,#3b9fcd)}.book.autumn{background:linear-gradient(145deg,#efbd6a,#d8833c)}.book.winter{background:linear-gradient(145deg,#a9c7ea,#648dc8)}
.seasonArt{height:165px;display:flex;align-items:center;justify-content:center;font-size:95px;background:#ffffff22;margin:18px 18px 8px;border-radius:18px}
.classNo{text-align:center;font-size:38px;font-weight:950;color:white;text-shadow:0 3px 0 #0002}.classText{text-align:center;color:white;font-size:20px;font-weight:900}
.bookStatus{margin-top:18px;background:#fff9ee;border-radius:14px;padding:8px 14px;font-weight:850;color:#644c39;border:2px solid #e1d2bd}
.woodShelf{height:56px;margin:0 0 10px;background:linear-gradient(#b27b4f,#8e5d39);border-radius:11px 11px 20px 20px;box-shadow:0 13px 0 #694225,0 20px 22px #3d291e42;border:3px solid #754a2e;position:relative}
.woodShelf:before,.woodShelf:after{content:"";position:absolute;top:9px;width:23%;height:8px;background:#c69469;border-radius:50%}.woodShelf:before{left:13%}.woodShelf:after{right:17%}
.homeFooter{text-align:center;margin-top:18px;color:#6a5b4f;font-weight:800}
@media(max-width:900px){.booksRow{grid-template-columns:repeat(2,1fr);gap:28px}.book{width:190px;height:275px}.seasonArt{height:145px}.storeScene{padding:22px 12px 30px}}
@media(max-width:520px){.booksRow{grid-template-columns:1fr 1fr;gap:18px 8px;padding:12px 4px}.book{width:145px;height:225px;border-width:4px}.seasonArt{height:115px;font-size:72px;margin:12px 12px 6px}.classNo{font-size:30px}.classText{font-size:16px}.shopTitle{font-size:31px}.shopHeader{padding:12px}.shopLogoMark{width:60px;height:60px;font-size:34px}}

/* ===== Class 1 spring catalog ===== */
.class1Page{min-height:100vh;background:linear-gradient(180deg,#eaf8ef 0%,#f8f3e7 100%);padding:16px}
.class1Shell{max-width:1260px;margin:auto}
.class1Hero{background:linear-gradient(135deg,#9edba9,#6fc38a);border:4px solid #fff;border-radius:30px;box-shadow:0 12px 35px #315b4325;padding:22px 26px;display:grid;grid-template-columns:170px 1fr auto;align-items:center;gap:24px;position:relative;overflow:hidden}
.class1Hero:after{content:"";position:absolute;right:-80px;bottom:-120px;width:360px;height:260px;border-radius:50%;background:#ffffff22}
.classBook{width:145px;height:190px;border-radius:14px 20px 20px 14px;background:linear-gradient(145deg,#88d69e,#4fae73);box-shadow:10px 11px 0 #356f4d,0 16px 25px #315b4330;border:5px solid #ffffff70;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.classBook .n{font-size:55px;font-weight:950}.classBook .t{font-size:22px;font-weight:900}
.heroText h1{font-size:46px;margin:0;color:white;text-shadow:0 3px 0 #39764e}.heroText p{font-size:20px;color:#f7fff8;font-weight:800;margin:8px 0 0}.heroFlowers{font-size:62px;z-index:1}
.backHome{display:inline-flex;align-items:center;gap:8px;margin:12px 0 16px;padding:10px 15px;background:white;border-radius:14px;font-weight:900;color:#327052;border:2px solid #d8eadc}
.subjectSection{margin-top:18px;background:#fffdf7;border:3px solid #e1ebdf;border-radius:26px;padding:18px 18px 22px;box-shadow:0 8px 24px #324b3e16}
.subjectHeader{display:flex;align-items:center;gap:12px;margin-bottom:14px}.subjectIcon{width:54px;height:54px;border-radius:16px;background:#e0f3df;display:flex;align-items:center;justify-content:center;font-size:30px}.subjectHeader h2{margin:0;font-size:30px;color:#416c50}.subjectHeader span{color:#7a8b81;font-weight:800}
.gameShelf{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;align-items:stretch}.miniBook{background:white;border-radius:18px;padding:14px;border:3px solid #dce8dc;box-shadow:0 7px 0 #b99569,0 12px 22px #4e392518;position:relative;min-height:205px;display:flex;flex-direction:column}
.miniBook:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:7px;border-radius:0 7px 7px 0;background:#6dbf83}.miniTop{display:flex;align-items:center;gap:10px}.miniIcon{font-size:38px;width:52px;height:52px;border-radius:14px;background:#edf8ec;display:flex;align-items:center;justify-content:center}.miniBook h3{font-size:19px;margin:0;line-height:1.15;color:#2f4a39}.miniBook p{font-size:14px;color:#68796f;line-height:1.35;flex:1}.miniActions{display:flex;justify-content:space-between;align-items:center;gap:8px}.startGame{padding:9px 12px;background:#dff3cf;border-radius:12px;font-weight:900;color:#2c6c4d}.five{font-size:12px;font-weight:850;color:#87968e}
.class1Footer{text-align:center;margin:22px 0 8px;color:#6d7d74;font-weight:800}
@media(max-width:1000px){.gameShelf{grid-template-columns:repeat(3,1fr)}.class1Hero{grid-template-columns:140px 1fr}.heroFlowers{display:none}.classBook{width:125px;height:170px}.heroText h1{font-size:38px}}
@media(max-width:720px){.gameShelf{grid-template-columns:repeat(2,1fr)}.class1Hero{grid-template-columns:100px 1fr;padding:16px}.classBook{width:90px;height:125px}.classBook .n{font-size:38px}.classBook .t{font-size:16px}.heroText h1{font-size:30px}.heroText p{font-size:16px}}
@media(max-width:480px){.gameShelf{grid-template-columns:1fr}.subjectSection{padding:13px}.class1Hero{grid-template-columns:1fr;text-align:center}.classBook{margin:auto}.heroText h1{font-size:28px}}

.showcaseWrap{margin:18px auto 24px;max-width:1180px;background:#fff;border:4px solid #fff;border-radius:26px;padding:8px;box-shadow:0 12px 34px #315b4325}
.showcaseWrap img{display:block;width:100%;height:auto;border-radius:18px}

.dragGhost{position:fixed!important;z-index:99999!important;pointer-events:none!important;transform:translate(-50%,-50%) scale(1.08);opacity:.94;box-shadow:0 14px 28px #243b2e55!important}
.dropHot,.bucket.dropHot,.slot.dropHot{outline:5px solid #f0b21c!important;outline-offset:3px;transform:scale(1.03)}
.tile,.option,.wordCard{touch-action:none;-webkit-user-select:none;user-select:none}

.drop.done{animation:snapIn .28s ease-out}
@keyframes snapIn{0%{transform:scale(.82)}70%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ===== Tablet drag layout: draggable items on the RIGHT ===== */
.dragLayout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:14px;
  align-items:start;
}
.dragMain{min-width:0}
.dragSide{
  position:sticky;
  top:10px;
  align-self:start;
  max-height:calc(100dvh - 150px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#f7fff1;
  border:3px solid #d6e9d2;
  border-radius:20px;
  padding:10px;
}
.dragSide .bank{
  margin-top:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.dragSide .tile{
  width:100%;
  min-width:0;
  min-height:52px;
}
.stage{
  overscroll-behavior:none;
}
body.dragging,
body.dragging *{
  overscroll-behavior:none!important;
}
body.dragging{
  touch-action:none!important;
  overflow:hidden;
}
@media (max-width:820px) and (orientation:landscape){
  .stage{min-height:calc(100dvh - 185px);padding:10px}
  .dragLayout{grid-template-columns:minmax(0,1fr) 165px;gap:10px}
  .dragSide{max-height:calc(100dvh - 205px);padding:8px}
  .dragSide .tile{font-size:21px;min-height:48px}
  .grid8{gap:6px}
  .wordCard{padding:5px}
  .pic{height:88px}
  .fixed,.drop{height:44px;font-size:21px}
}
@media (max-width:700px) and (orientation:portrait){
  .dragLayout{grid-template-columns:minmax(0,1fr) 125px;gap:8px}
  .dragSide{max-height:calc(100dvh - 220px);padding:6px}
  .dragSide .tile{font-size:19px;min-height:46px;padding:6px}
  .grid8{grid-template-columns:repeat(2,1fr)}
}
/* Keep controls away from iPad/Safari screen edges */
.page{padding-bottom:max(24px,env(safe-area-inset-bottom))}
.dragSide{margin-bottom:max(20px,env(safe-area-inset-bottom))}

/* ===== Narrower source panel + clearer placement feedback ===== */
.dragLayout{
  grid-template-columns:minmax(0,1fr) 142px!important;
  gap:10px!important;
}
.dragSide{
  padding:7px!important;
  border-radius:17px!important;
}
.dragSide .help{
  font-size:13px!important;
  line-height:1.15;
  margin-bottom:6px!important;
}
.dragSide .bank{
  gap:6px!important;
}
.dragSide .tile{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  padding:5px 7px!important;
  font-size:19px!important;
  border-radius:12px!important;
  border-width:2px!important;
  box-shadow:0 3px 0 #5b9447!important;
}
.drop.snapPlaced,
.bucket.snapPlaced,
.slot.snapPlaced{
  animation:placedLift .48s cubic-bezier(.2,.8,.2,1);
}
@keyframes placedLift{
  0%{transform:translateY(0) scale(1)}
  38%{transform:translateY(-12px) scale(1.07)}
  68%{transform:translateY(-4px) scale(1.03)}
  100%{transform:translateY(0) scale(1)}
}
.tile.sourceLift{
  animation:sourceLift .28s ease-out;
}
@keyframes sourceLift{
  0%{transform:translateY(0)}
  55%{transform:translateY(-8px) scale(1.05)}
  100%{transform:translateY(0)}
}
@media (max-width:820px) and (orientation:landscape){
  .dragLayout{grid-template-columns:minmax(0,1fr) 126px!important}
  .dragSide .tile{font-size:18px!important;min-height:42px!important}
}
@media (max-width:700px) and (orientation:portrait){
  .dragLayout{grid-template-columns:minmax(0,1fr) 104px!important}
  .dragSide .tile{font-size:17px!important;min-height:40px!important;padding:4px 5px!important}
}

@media (pointer:fine){
  .tile{cursor:grab}
  .tile:active{cursor:grabbing}
  .drop{cursor:crosshair}
}
.usedSyllable{animation:usedOut .26s ease-in forwards!important}@keyframes usedOut{0%{opacity:1;transform:translateY(0) scale(1)}55%{opacity:1;transform:translateY(-9px) scale(1.06)}100%{opacity:0;transform:translateY(-16px) scale(.82)}}.reflowUp{animation:reflowUp .38s cubic-bezier(.2,.8,.2,1)}@keyframes reflowUp{0%{transform:translateY(13px);opacity:.72}65%{transform:translateY(-3px);opacity:1}100%{transform:translateY(0);opacity:1}}