.rcGame{
  --ink:#283b52;
  --paper:#fff7d9;
  --paper-dark:#e4c985;
  --violet:#7457c7;
  --blue:#3e79c9;
  --gold:#ffc95c;
  --green:#3daf77;
  --red:#e15b63;
  direction:rtl;
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:22px;
  color:var(--ink);
  background:
    radial-gradient(circle at 14% 6%,rgba(255,255,255,.92),transparent 17%),
    linear-gradient(180deg,#243751 0 35%,#d8c69a 35% 100%);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
  box-shadow:0 25px 72px rgba(30,49,70,.34);
  isolation:isolate
}
.rcGame *{box-sizing:border-box}
.rcGame button{font:inherit}
.rcSky{position:absolute;inset:0;pointer-events:none}
.rcMoon{position:absolute;left:6%;top:44px;font-size:65px;filter:drop-shadow(0 0 16px rgba(255,244,174,.48));animation:rcMoon 5s ease-in-out infinite}
.rcCloud{position:absolute;width:145px;height:40px;border-radius:999px;background:rgba(230,239,249,.16);filter:blur(.3px);animation:rcCloud 26s linear infinite}
.rcCloud:before,.rcCloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.rcCloud:before{width:66px;height:58px;right:22px;bottom:7px}
.rcCloud:after{width:48px;height:44px;left:21px;bottom:8px}
.rcCloudOne{top:83px;right:-170px}
.rcCloudTwo{top:160px;left:-155px;animation-duration:33s;animation-delay:-15s;transform:scale(.8)}
.rcStar{position:absolute;color:#fff1a4;text-shadow:0 0 12px #fff;animation:rcStar 2.4s ease-in-out infinite}
.rcStarOne{right:14%;top:95px;font-size:22px}
.rcStarTwo{left:25%;top:150px;font-size:16px;animation-delay:-1s}
.rcStarThree{right:47%;top:60px;font-size:18px;animation-delay:-1.7s}

.rcHeader{position:relative;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:2px 3px 16px;color:#fff}
.rcTitleBlock{max-width:770px}
.rcKicker{display:inline-flex;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.12);font-size:12px;font-weight:900;box-shadow:0 7px 17px rgba(0,0,0,.13)}
.rcHeader h1{margin:8px 0 3px;font-size:clamp(31px,5vw,52px);line-height:1;color:#ffd66f;text-shadow:0 3px 0 rgba(0,0,0,.24)}
.rcHeader h1 span{display:inline-block;animation:rcTitle 2.2s ease-in-out infinite}
.rcHeader p{margin:0;font-weight:800;color:#dce9f2}
.rcSound{border:0;border-radius:999px;background:#fff;color:#314a60;cursor:pointer;font-weight:900;padding:11px 16px;white-space:nowrap;box-shadow:0 8px 19px rgba(0,0,0,.18)}

.rcLevels{position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rcLevels button{appearance:none;border:2px solid transparent;border-radius:20px;padding:11px 8px;background:rgba(255,255,255,.92);cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.14);transition:.22s}
.rcLevels button span,.rcLevels button b,.rcLevels button small{display:block}
.rcLevels button span{font-size:26px}
.rcLevels button b{font-size:17px}
.rcLevels button small{margin-top:3px;color:#687b82;font-size:11px}
.rcLevels button:hover{transform:translateY(-3px)}
.rcLevels button.is-active{transform:translateY(-4px);border-color:var(--gold);background:#fff2bf;box-shadow:0 12px 26px rgba(221,157,24,.25)}

.rcStats{position:relative;z-index:4;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.rcStats>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:0 7px;padding:8px 10px;border-radius:17px;background:rgba(255,255,255,.92);box-shadow:0 6px 15px rgba(0,0,0,.12)}
.rcStats>div>span{grid-row:1/3;font-size:23px}
.rcStats small{font-size:10px;color:#6d777a;font-weight:900}
.rcStats b{font-size:19px}
.rcStats em{font-style:normal}

.rcLibrary{position:relative;z-index:2;min-height:790px;overflow:hidden;border-radius:29px;background:linear-gradient(180deg,#344a64 0 42%,#78553a 42% 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.15),inset 0 -30px 50px rgba(38,24,12,.28),0 15px 35px rgba(14,27,35,.26)}
.rcLibrary:before{content:"";position:absolute;left:-5%;right:-5%;bottom:-105px;height:320px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#8a6441,#50321e);box-shadow:inset 0 18px 0 rgba(255,255,255,.05)}
.rcShelves{position:absolute;inset:0 0 auto 0;height:46%;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:25px 5% 0;opacity:.72}
.rcShelves span{position:relative;border:10px solid #51341f;border-radius:12px;background:
  repeating-linear-gradient(90deg,#8d2d3e 0 18px,#d2a342 19px 34px,#315d86 35px 54px,#6b4c8c 55px 74px,#4d864b 75px 94px);
  box-shadow:inset 0 -17px #3c281a,0 12px 17px rgba(0,0,0,.22)}
.rcShelves span:before,.rcShelves span:after{content:"";position:absolute;left:-10px;right:-10px;height:9px;background:#52351f}
.rcShelves span:before{top:31%}
.rcShelves span:after{top:65%}
.rcWindow{position:absolute;left:4%;top:35px;width:125px;height:155px;border:12px solid #1b2733;background:linear-gradient(145deg,#1f3153,#596b91);box-shadow:0 0 28px rgba(255,221,122,.13)}
.rcWindow:before,.rcWindow:after{content:"";position:absolute;background:#1b2733}
.rcWindow:before{left:50%;top:0;bottom:0;width:6px}
.rcWindow:after{left:0;right:0;top:48%;height:6px}
.rcWindow span{position:absolute;left:12px;top:12px;font-size:48px}
.rcOwl{position:absolute;z-index:10;right:4%;top:165px;font-size:68px;filter:drop-shadow(0 11px 9px rgba(0,0,0,.28));animation:rcOwl 2.7s ease-in-out infinite}

.rcReadingDesk{position:absolute;z-index:10;left:18px;top:210px;width:175px;min-height:180px;padding:17px 13px;text-align:center;border-radius:23px;background:linear-gradient(145deg,#70461f,#4a2d18);border:5px solid #d0a25c;color:#fff;box-shadow:0 11px 0 rgba(52,32,18,.35),0 18px 24px rgba(0,0,0,.23)}
.rcReadingDesk .rcLamp{display:block;font-size:37px;filter:drop-shadow(0 0 12px #ffe67a);animation:rcLamp 2.2s ease-in-out infinite}
.rcReadingDesk small,.rcReadingDesk strong{display:block}
.rcReadingDesk small{font-size:9px;color:#efd9b2}
.rcReadingDesk strong{margin-top:6px;font-size:12px;line-height:1.65}
.rcWordCount{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:7px 9px;border-radius:13px;background:rgba(255,255,255,.12)}
.rcWordCount span{font-size:9px}
.rcWordCount b{font-size:18px;color:#ffe58b}

.rcBook{position:absolute;z-index:14;left:10%;right:10%;top:185px;min-height:340px;display:grid;grid-template-columns:1fr 1fr;gap:0;filter:drop-shadow(0 24px 26px rgba(0,0,0,.32));transition:.3s}
.rcBook.is-correct{animation:rcBookCorrect .65s}
.rcBook.is-wrong{animation:rcBookWrong .5s}
.rcPage{position:relative;min-height:340px;padding:27px 27px 30px;background:
  linear-gradient(rgba(126,94,43,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(126,94,43,.055) 1px,transparent 1px),
  linear-gradient(160deg,#fff9dd,#edd69d);
  background-size:24px 24px,24px 24px,auto;
  border:5px solid #9f7138}
.rcPageRight{border-radius:8px 27px 27px 8px;box-shadow:inset -15px 0 25px rgba(94,64,30,.12)}
.rcPageLeft{border-radius:27px 8px 8px 27px;box-shadow:inset 15px 0 25px rgba(94,64,30,.12)}
.rcBookSpine{position:absolute;z-index:8;left:50%;top:0;bottom:0;width:20px;transform:translateX(-50%);background:linear-gradient(90deg,#7d5128,#d6a45c,#6c431f);box-shadow:0 0 18px rgba(68,42,20,.34)}
.rcPageMeta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rcPageMeta>span{font-size:33px}
.rcPageMeta small{padding:5px 10px;border-radius:999px;background:#7a58c4;color:#fff;font-weight:1000;font-size:9px}
.rcPage h2{margin:8px 0 10px;color:#754426;font-size:25px}
.rcPassageText{font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:20px;font-weight:800;line-height:2.05;color:#3d3025;text-align:justify}
.rcPassageText mark{padding:1px 5px;border-radius:8px;background:#fff079;color:#713f23;box-shadow:0 0 0 3px rgba(255,224,64,.22)}
.rcQuestionType{display:inline-flex;padding:5px 10px;border-radius:999px;background:#4d86c6;color:#fff;font-size:9px;font-weight:1000}
.rcQuestionLabel{display:block;margin-top:19px;color:#8a6b48;font-weight:900}
.rcPage h3{margin:7px 0 14px;font-size:23px;line-height:1.7;color:#5c3826}
.rcReadingTip{padding:11px 12px;border-radius:15px;background:rgba(255,255,255,.58);color:#6c5439;font-size:11px;font-weight:900;line-height:1.6}
.rcSpeechActions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.rcSpeechActions button{border:0;border-radius:14px;padding:8px 12px;cursor:pointer;font-weight:900;background:#fff;color:#40576a;box-shadow:0 5px 0 rgba(73,60,39,.18)}
.rcBookmark{position:absolute;left:23px;bottom:-26px;font-size:43px;filter:drop-shadow(0 8px 6px rgba(80,45,21,.24))}
.rcPageTurn{position:absolute;z-index:20;right:0;top:0;width:50%;height:100%;border-radius:0 27px 27px 0;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,243,196,.98));transform-origin:left center;transform:rotateY(90deg);opacity:0;pointer-events:none}
.rcBook.is-turning .rcPageTurn{animation:rcTurn .55s ease}

.rcAnswers{position:absolute;z-index:16;left:7%;right:7%;bottom:92px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rcAnswer{position:relative;min-height:92px;border:0;border-radius:21px;padding:15px 18px 15px 58px;cursor:pointer;text-align:right;background:linear-gradient(145deg,#fff,#eef5ff);color:#334b5f;font-size:15px;font-weight:900;line-height:1.7;box-shadow:0 8px 0 #748fa4,0 13px 17px rgba(42,52,59,.2);transition:.2s}
.rcAnswer:before{content:"📘";position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:31px}
.rcAnswer:hover{transform:translateY(-5px)}
.rcAnswer.is-correct{background:linear-gradient(145deg,#dfffd3,#80df91);box-shadow:0 8px 0 #3e9b5d}
.rcAnswer.is-wrong{background:linear-gradient(145deg,#ffd6d6,#f49196);box-shadow:0 8px 0 #ad4149}
.rcAnswer[disabled]{cursor:default;opacity:.7}

.rcMessage{position:absolute;z-index:18;left:17%;right:17%;bottom:25px;min-height:45px;padding:10px 14px;text-align:center;border-radius:17px;background:rgba(255,255,255,.93);color:#435966;font-weight:900;box-shadow:0 8px 19px rgba(0,0,0,.18)}
.rcBankStatus{position:absolute;z-index:18;left:18%;right:18%;bottom:7px;text-align:center;color:#ffeab4;font-size:9px;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.55)}
.rcCombo{position:absolute;z-index:31;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff36e;font-size:38px;font-weight:1000;text-shadow:0 4px 0 #6f391e}

.rcProgress{height:14px;margin:13px 4px;border-radius:999px;background:#ac9365;overflow:hidden;box-shadow:inset 0 2px 5px rgba(58,39,19,.25)}
.rcProgress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7457c7,#3e79c9,#ffc95c,#3daf77);transition:.35s}
.rcControls,.rcShare{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.rcControls button,.rcShare button,.rcEnd button{border:0;border-radius:16px;padding:11px 18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.rcPrimary{background:linear-gradient(145deg,#7457c7,#4e39a5);color:#fff}
.rcSecondary{background:#fff;color:#365b68}
.rcShare{margin-top:11px}
.rcShare button{padding:8px 14px;background:rgba(255,255,255,.88);font-size:12px;color:#3f5d67}

.rcEnd{display:none;position:absolute;z-index:60;inset:0;align-items:center;justify-content:center;padding:20px;background:rgba(18,31,42,.82);backdrop-filter:blur(5px)}
.rcEnd.is-visible{display:flex}
.rcEndCard{width:min(460px,100%);padding:29px;text-align:center;border-radius:31px;background:linear-gradient(160deg,#fff,#f3dfaa);box-shadow:0 28px 80px rgba(0,0,0,.42);animation:rcEndIn .38s}
.rcEndBooks{font-size:26px}
.rcCup{font-size:72px}
.rcStars{font-size:37px}
.rcEndCard h2{margin:6px;font-size:30px;color:#65448f}
.rcEndStats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}
.rcEndStats>div{padding:11px;border-radius:17px;background:#fff;box-shadow:0 7px 17px rgba(78,70,37,.08)}
.rcEndStats b,.rcEndStats small{display:block}
.rcEndStats b{font-size:21px}
.rcEndStats small{font-size:10px;color:#77766b}
.rcBest{font-weight:900;color:#8b641b}
.rcEndCard button{background:linear-gradient(145deg,#7457c7,#4e39a5);color:#fff}

.rcPaused .rcSky *,.rcPaused .rcOwl,.rcPaused .rcLamp{animation-play-state:paused!important}
.rcPaused .rcAnswers,.rcPaused .rcSpeechActions{pointer-events:none;filter:grayscale(.25)}

@keyframes rcMoon{50%{transform:translateY(7px) rotate(5deg)}}
@keyframes rcCloud{from{transform:translateX(0)}to{transform:translateX(-130vw)}}
@keyframes rcStar{50%{opacity:.25;transform:scale(.55) rotate(90deg)}}
@keyframes rcTitle{50%{transform:rotate(6deg) translateY(-4px)}}
@keyframes rcOwl{50%{transform:translateY(-7px) rotate(4deg)}}
@keyframes rcLamp{50%{filter:drop-shadow(0 0 22px #ffe36f);transform:scale(1.06)}}
@keyframes rcBookCorrect{45%{transform:translateY(-10px) scale(1.02);filter:brightness(1.1)}}
@keyframes rcBookWrong{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes rcTurn{0%{transform:rotateY(90deg);opacity:0}35%{opacity:1}100%{transform:rotateY(-90deg);opacity:0}}
@keyframes rcEndIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

@media(max-width:980px){
  .rcGame{padding:13px;border-radius:20px}
  .rcHeader{align-items:flex-start}
  .rcHeader p{font-size:12px}
  .rcLevels{gap:6px}
  .rcLevels button{padding:8px 4px}
  .rcLevels button small{display:none}
  .rcStats{gap:4px}
  .rcStats>div{display:block;text-align:center;padding:6px 2px}
  .rcStats>div>span{font-size:18px}
  .rcStats small{display:block;font-size:8px}
  .rcStats b{font-size:15px}
  .rcLibrary{min-height:970px}
  .rcWindow{opacity:.55;transform:scale(.75);transform-origin:left top}
  .rcOwl{right:2%;top:150px;font-size:54px}
  .rcReadingDesk{left:4px;top:165px;transform:scale(.72);transform-origin:left top}
  .rcBook{left:4%;right:4%;top:190px;grid-template-columns:1fr;filter:drop-shadow(0 18px 22px rgba(0,0,0,.3))}
  .rcBookSpine{display:none}
  .rcPage{min-height:auto}
  .rcPageRight{border-radius:24px 24px 8px 8px}
  .rcPageLeft{border-radius:8px 8px 24px 24px}
  .rcPassageText{font-size:18px;line-height:1.95}
  .rcAnswers{left:4%;right:4%;bottom:95px}
  .rcMessage{left:4%;right:4%;bottom:27px;font-size:12px}
  .rcBankStatus{left:4%;right:4%;bottom:8px}
}
@media(max-width:600px){
  .rcHeader h1{font-size:30px}
  .rcKicker{font-size:9px}
  .rcSound{padding:9px 10px;font-size:11px}
  .rcLibrary{min-height:1110px}
  .rcReadingDesk{display:none}
  .rcOwl{top:170px;opacity:.64}
  .rcBook{top:185px}
  .rcPage{padding:22px 17px}
  .rcPage h2{font-size:21px}
  .rcPassageText{font-size:17px;text-align:right}
  .rcPage h3{font-size:19px}
  .rcAnswers{grid-template-columns:1fr;bottom:96px}
  .rcAnswer{min-height:76px;font-size:13px;padding:12px 15px 12px 49px}
  .rcAnswer:before{font-size:26px;left:12px}
  .rcEndStats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .rcGame *{animation:none!important;transition:none!important}
}