* { -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #fff8ef; color: #3f315f; font-family: "Trebuchet MS", Arial, sans-serif; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; -webkit-tap-highlight-color: rgba(0,0,0,0); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.hidden { display: none !important; }
.home-page { min-height: 100vh; padding-bottom: 20px; background: -webkit-linear-gradient(top, #bcecff 0, #f7f4ff 400px, #fff8ef 100%); background: linear-gradient(#bcecff 0, #f7f4ff 400px, #fff8ef 100%); }
.hero { position: relative; height: 230px; padding-top: 52px; text-align: center; overflow: hidden; }
.hero h1 { position: relative; z-index: 3; margin: 0; color: #6d4de8; font-size: 48px; line-height: 1.05; text-shadow: 0 3px 0 #fff; }
.hero p { position: relative; z-index: 3; margin: 12px 0 0; font-size: 23px; font-weight: bold; color: #ff5f87; }
.hero-cloud { position: absolute; width: 110px; height: 42px; border-radius: 50px; background: rgba(255,255,255,.85); }
.hero-cloud:before, .hero-cloud:after { content: ""; position: absolute; bottom: 0; background: inherit; border-radius: 50%; }
.hero-cloud:before { left: 18px; width: 48px; height: 58px; }.hero-cloud:after { right: 12px; width: 55px; height: 68px; }
.cloud-one { left: 5%; top: 36px; }.cloud-two { right: 4%; top: 102px; -webkit-transform: scale(.8); transform: scale(.8); }
.hero-star { position: absolute; color: #ffd846; font-size: 30px; -webkit-animation: twinkle 1.6s infinite alternate; animation: twinkle 1.6s infinite alternate; }
.star-one { left: 23%; top: 34px; }.star-two { right: 24%; top: 34px; -webkit-animation-delay: .7s; animation-delay: .7s; }
@-webkit-keyframes twinkle { from {-webkit-transform:scale(.75) rotate(-8deg)} to {-webkit-transform:scale(1.15) rotate(8deg)} }
@keyframes twinkle { from {transform:scale(.75) rotate(-8deg)} to {transform:scale(1.15) rotate(8deg)} }
.rainbow { position: absolute; left: 50%; bottom: -100px; width: 330px; height: 165px; margin-left: -165px; border: 18px solid #ff6e83; border-bottom: 0; border-radius: 180px 180px 0 0; opacity: .35; }
.rainbow i { position:absolute; border-style:solid; border-bottom:0; border-radius:150px 150px 0 0; }
.rainbow i:nth-child(1){left:0;top:0;width:294px;height:147px;border-width:18px;border-color:#ffb341}.rainbow i:nth-child(2){left:18px;top:18px;width:258px;height:129px;border-width:18px;border-color:#71d879}.rainbow i:nth-child(3){left:36px;top:36px;width:222px;height:111px;border-width:18px;border-color:#62bffc}.rainbow i:nth-child(4){left:54px;top:54px;width:186px;height:93px;border-width:18px;border-color:#906ce8}
.game-grid { position: relative; z-index: 4; width: 94%; max-width: 980px; margin: -12px auto 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.game-card { position: relative; width: 29%; min-height: 190px; margin: 2%; padding: 18px 10px 14px; border: 0; border-radius: 27px; background: #fff; box-shadow: 0 8px 0 rgba(90,58,130,.15), 0 11px 24px rgba(90,58,130,.1); text-align: center; -webkit-transition: -webkit-transform .12s; transition: transform .12s; overflow: hidden; }
.game-card:active { -webkit-transform: translateY(5px) scale(.98); transform: translateY(5px) scale(.98); box-shadow: 0 3px 0 rgba(90,58,130,.15); }
.game-card:after { content: ""; position: absolute; top: -35px; right: -35px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.35); }
.card-icon { display: block; height: 85px; font-size: 68px; line-height: 80px; }
.game-card strong { display: block; font-size: 21px; line-height: 1.08; }
.game-card small { display: block; margin-top: 7px; font-size: 15px; color: rgba(63,49,95,.72); }
.card-race{background:#fff1a8}.card-bubbles{background:#c9f2ff}.card-fruit{background:#ffd4ca}.card-memory{background:#e2d3ff}.card-paint{background:#ffe2f1}.card-music{background:#ccf4d4}.card-shapes{background:#d8efff}.card-maze{background:#f6e6a9}.card-space{background:#d9d9ff}.card-bunny{background:#ffe6c9}
.home-footer { text-align: center; margin: 30px auto 0; padding: 0 12px; }
.help-button { border: 0; border-radius: 25px; padding: 13px 23px; background: #fff; box-shadow: 0 4px 13px rgba(80,50,120,.14); color: #6d4de8; font-weight: bold; font-size: 17px; }
.home-footer p { font-size: 14px; color: #978ba5; }
.game-page { position: fixed; left: 0; top: 0; width: 100%; height: 100%; height: 100vh; overflow: hidden; background: #bcecff; }
.game-toolbar { position: absolute; z-index: 12; top: 0; left: 0; width: 100%; height: 58px; padding: 6px 10px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; background: rgba(255,255,255,.88); box-shadow: 0 2px 8px rgba(40,20,80,.1); }
.round-button { width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #7b61ff; color: #fff; font-size: 28px; line-height: 46px; font-weight: bold; box-shadow: 0 3px 0 #5941bd; }
.round-button:active { -webkit-transform:translateY(2px); transform:translateY(2px); box-shadow:0 1px 0 #5941bd; }
.game-title { -webkit-box-flex:1; -webkit-flex:1; flex:1; text-align:center; padding: 0 8px; font-size: 22px; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#gameCanvas { position: absolute; left: 0; top: 58px; width: 100%; height: calc(100% - 58px); display: block; touch-action: none; background: #bcecff; }
.overlay, .modal { position: fixed; z-index: 30; left: 0; top: 0; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; padding: 18px; background: rgba(65,42,100,.48); }
.overlay-card, .modal-card { width: 92%; max-width: 480px; max-height: 94vh; overflow-y: auto; padding: 24px 24px 22px; border-radius: 30px; background: #fffdf8; box-shadow: 0 12px 0 rgba(63,49,95,.18), 0 20px 50px rgba(40,20,70,.25); text-align:center; }
.intro-icon { font-size: 76px; line-height: 1; }
.overlay-card h2, .modal-card h2 { margin: 10px 0; color:#6d4de8; font-size:32px; line-height:1.08; }
.overlay-card p { margin: 8px 0 20px; font-size:20px; line-height:1.35; }
.play-button { min-width: 190px; min-height: 60px; padding: 12px 28px; border:0; border-radius:32px; color:#fff; background:#ff6489; box-shadow:0 6px 0 #d93e66; font-size:24px; font-weight:bold; }
.play-button:active { -webkit-transform:translateY(4px); transform:translateY(4px); box-shadow:0 2px 0 #d93e66; }
.choose-button { display:block; margin:18px auto 0; border:0; background:transparent; color:#6d4de8; font-weight:bold; font-size:18px; text-decoration:underline; }
.confetti { color:#ffbf2f; font-size:38px; letter-spacing:8px; }
.modal { z-index:50; }
.modal-card { position:relative; text-align:left; padding:28px; }
.modal-card h2 { text-align:center; }
.modal-close { position:absolute; right:13px; top:10px; width:44px; height:44px; border:0; background:transparent; color:#8b7b9b; font-size:38px; line-height:40px; }
.help-icon { text-align:center; color:#ff6489; font-size:55px; font-weight:bold; }
.modal-card ol { margin:18px 0; padding-left:30px; font-size:18px; line-height:1.35; }
.modal-card li { margin:9px 0; padding-left:4px; }
.help-note { padding:12px 14px; border-radius:15px; background:#fff0b8; font-size:16px; line-height:1.35; }
.modal-card .play-button { display:block; margin:18px auto 0; }
@media (max-width: 700px) {
  .hero { height: 205px; padding-top:43px }.hero h1{font-size:39px}.hero p{font-size:20px}
  .game-card { width: 46%; min-height:174px; margin:2%; border-radius:23px; padding-top:13px }.card-icon{height:78px;font-size:61px;line-height:74px}.game-card strong{font-size:19px}
}
@media (max-width: 370px) { .game-card{min-height:158px}.card-icon{height:67px;font-size:53px;line-height:63px}.game-card strong{font-size:17px}.game-card small{font-size:13px} }
@media (orientation: landscape) and (max-height: 600px) { .overlay-card{padding:13px 20px}.intro-icon{font-size:49px}.overlay-card h2{font-size:27px;margin:5px}.overlay-card p{font-size:17px;margin:5px 0 12px}.play-button{min-height:48px;font-size:20px}.game-toolbar{height:50px}.round-button{width:38px;height:38px;line-height:38px;font-size:24px}#gameCanvas{top:50px;height:calc(100% - 50px)} }