html{font-family:system-ui,sans-serif}body{margin:0;padding:0;background:#fff;overflow:hidden}.game-grid{display:grid;grid-template-rows:1fr 1fr 1fr;height:100vh;width:100%;overflow:hidden}.grid-row{display:flex;justify-content:space-around;align-items:center;gap:10px;padding:10px 20px}.game-row,.menu-row,.help-row{background:#fff}.card{height:auto;border-radius:10px;cursor:pointer;transition:transform .2s;position:relative;display:flex;justify-content:center}.card img{width:100%;max-height:28vh;height:auto;border-radius:10px;object-fit:contain}.card:hover{transform:scale(1.05)}.start-indicator{position:absolute;left:-60px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:10;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.1)}}.indicator-content{display:flex;flex-direction:column;align-items:center;gap:5px}.indicator-text{background:#4caf50;color:#fff;padding:8px 16px;border-radius:20px;font-weight:700;font-size:14px;box-shadow:0 2px 5px #0003;white-space:nowrap}.indicator-arrow{font-size:24px;color:#4caf50}.game-header{position:fixed;top:0;left:0;width:100%;height:80px;background:#fff;display:flex;justify-content:center;align-items:center;gap:40px;padding:0 20px;box-shadow:0 2px 10px #0000001a;z-index:100}.header-logo{max-width:200px;height:auto}.header-controls{display:flex;align-items:center;gap:20px}.header-btn{padding:10px 20px;background:#333;color:#fff;border:none;cursor:pointer;border-radius:5px;font-size:14px;transition:background .2s}.header-btn:hover:not(:disabled){background:#555}.header-btn:disabled{opacity:.5;cursor:not-allowed}.home-btn{background:#4caf50}.nav-buttons{display:flex;gap:10px}.card-detail-view{height:100vh;padding-top:80px;overflow:hidden}.card-detail-desktop{display:grid;grid-template-columns:1fr 1fr;gap:40px;height:calc(100vh - 80px);padding:40px;max-width:1400px;margin:0 auto;align-items:center}.card-front-column,.card-back-column{display:flex;align-items:center;justify-content:center;height:100%}.card-front-image{max-width:100%;max-height:80vh;border-radius:10px;box-shadow:0 4px 20px #0000001a}.card-back-wrapper{position:relative;width:100%;height:80vh;max-width:500px;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px #0000001a}.card-back-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:10px}.card-back-content{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow-y:auto;padding:120px 40px;background:transparent;border-radius:10px;box-sizing:border-box}.card-back-content::-webkit-scrollbar{width:8px}.card-back-content::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}.card-back-content::-webkit-scrollbar-thumb{background:#0000004d;border-radius:4px}.card-back-content h2{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;line-height:1.2;margin-top:0;margin-bottom:20px}.card-back-content ul,.card-back-content ol{padding-left:20px}.card-back-content li{margin-bottom:12px;line-height:1.5}.card-detail-mobile-vertical{display:none;width:100%;height:calc(100vh - 60px);overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;box-sizing:border-box}.mobile-front-section,.mobile-back-section{width:100%;height:calc(100vh - 60px);scroll-snap-align:start;position:relative;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box;overflow:hidden}.mobile-front-image{max-width:100%;max-height:80vh;object-fit:contain;border-radius:10px;box-shadow:0 4px 20px #00000026}.scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:#4caf50f2;color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;font-weight:700;animation:bounce 2s infinite;pointer-events:none;box-shadow:0 2px 10px #0003}.mobile-back-wrapper{position:relative;width:100%;height:100%;max-width:500px;border-radius:10px;box-shadow:0 4px 20px #0000001a;overflow:hidden;box-sizing:border-box}.mobile-back-background{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:10px}.mobile-back-content{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow-y:auto;overflow-x:hidden;padding:120px 40px;background:transparent;border-radius:10px;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.mobile-back-content h2{font-size:1.5rem;font-weight:700;margin-top:0;color:#333}.mobile-back-content ul,.mobile-back-content ol{padding-left:20px}.mobile-back-content li{margin-bottom:12px;line-height:1.5}@keyframes bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-10px)}}.evaluation-single-column{display:flex;flex-direction:column;gap:15px;margin-top:20px;width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.evaluation-single-column h3{font-size:1rem;margin-top:0;margin-bottom:5px;color:#333}@media(max-width:768px){.card-detail-desktop{display:none}.card-detail-mobile-vertical{display:block}.card-back-wrapper{height:100%}.card-back-content{padding:20px}.card-back-content h2{font-size:1.3rem}.evaluation-columns{grid-template-columns:1fr;gap:20px}.evaluation-center-img{max-width:150px;margin:0 auto;display:block}}} } .card-detail-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px;max-width:1400px;margin:0 auto;align-items:center}.card-detail-image img{max-width:100%;max-height:70vh;border-radius:10px;box-shadow:0 4px 20px #0000001a}.card-detail-text h2{font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1.2;margin-top:0}.card-detail-text ul,.card-detail-text ol{padding-left:20px}.card-detail-text li{margin-bottom:15px;line-height:1.6}.help-exercise-detail{min-height:calc(100vh - 80px)}.help-exercise-prompt p{font-size:1.2rem;margin-bottom:20px}.help-exercise-btn{padding:20px 40px;font-size:1.2rem;background:#4caf50;color:#fff;border:none;border-radius:10px;cursor:pointer;transition:transform .2s}.help-exercise-btn:hover{transform:scale(1.05)}.help-exercise-exercise{animation:fadeIn .5s}.exercise-text{font-size:1.5rem;margin-bottom:30px;padding:40px;background:#fff;border-radius:10px;box-shadow:0 4px 20px #0000001a;max-width:800px}.try-another-btn{padding:15px 30px;font-size:1rem;background:#333;color:#fff;border:none;border-radius:5px;cursor:pointer}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.recipes-detail{grid-template-columns:1fr 1fr;gap:40px}.help-cards-list{list-style:none;padding:0;margin-top:30px}.help-card-item{display:flex;align-items:center;gap:15px;padding:15px;background:#f9f9f9;border-radius:10px;cursor:pointer;transition:transform .2s,background .2s;margin-bottom:10px}.help-card-item:hover{transform:scale(1.02);background:#f0f0f0}.help-card-icon{width:60px;height:60px;object-fit:contain;border-radius:5px}.help-card-text{font-size:1rem;font-weight:500;color:#333}.help-link{display:flex!important;align-items:center;padding:15px!important;background:#f9f9f9;border-radius:10px;cursor:pointer;transition:transform .2s,background .2s;margin-bottom:10px;color:#333;text-decoration:none}.help-link:hover{transform:scale(1.02);background:#f0f0f0}.help-link-icon{width:50px;height:50px;margin-right:10px;vertical-align:middle;border-radius:5px}.evaluation-detail{grid-template-columns:1fr}.evaluation-columns{display:grid;grid-template-columns:1fr 300px 1fr;gap:40px;align-items:start;margin-top:30px}.evaluation-columns .evaluation-center-img{width:100%;max-width:300px;border-radius:10px;box-shadow:0 4px 15px #0000001a}.evaluation-col h3{color:#333;margin-top:0;margin-bottom:20px;font-size:1.2rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;width:90%;max-width:1000px;max-height:90vh;border-radius:15px;position:relative;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.modal-evaluation{max-width:1200px;grid-template-columns:1fr;padding:40px;overflow-y:auto}.modal-evaluation-content{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;margin-bottom:30px}.modal-evaluation-center img{width:100%;border-radius:10px}.modal-left img{width:100%;height:100%;object-fit:cover}.modal-right{padding:40px;display:flex;flex-direction:column}.close-btn{position:absolute;top:20px;right:20px;font-size:30px;background:none;border:none;cursor:pointer;z-index:10}.modal-footer{display:flex;justify-content:space-between;padding:20px 0;border-top:1px solid #eee;margin-top:auto}.modal-footer button{padding:10px 20px;border:none;border-radius:5px;background:#333;color:#fff;cursor:pointer}.modal-footer button:hover{background:#555}.modal-mobile-image{display:none}@media(max-width:768px){.game-grid{display:grid;grid-template-rows:auto 1fr auto;height:100vh;gap:0;padding:0;min-height:-webkit-fill-available}.grid-row{flex-wrap:nowrap;overflow-x:auto;padding:5px 10px;justify-content:flex-start;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:8px;min-height:max-content;align-items:center}.grid-row::-webkit-scrollbar{display:none}.grid-row{-ms-overflow-style:none;scrollbar-width:none}.game-row,.help-row{padding:10px}.game-row .card,.help-row .card{min-width:45vw;max-width:45vw;scroll-snap-align:center}.game-row .card img,.help-row .card img{max-height:25vh;width:100%;object-fit:contain}.menu-row{padding:10px 5vw;height:100%}.menu-row .card{min-width:80vw;max-width:80vw;scroll-snap-align:center;display:flex;justify-content:center}.menu-row .card img{max-height:35vh;width:100%;object-fit:contain}.game-header{height:60px;padding:0 10px}.header-logo{max-width:120px}.nav-text{display:none}.header-btn{padding:8px 12px;font-size:14px}.start-indicator{left:-25px}.indicator-text{font-size:11px;padding:5px 10px}.indicator-arrow{font-size:16px}.modal-content{grid-template-columns:1fr;overflow-y:auto;height:90vh;display:block}.modal-left,.modal-right{padding:20px}.modal-left img,.modal-mobile-image img,.evaluation-center-img{width:66%!important;margin:0 auto;display:block;max-height:30vh;object-fit:contain}.modal-right h2,.card-detail-text h2{font-size:1.5rem;margin-top:10px}.recipes-detail,.evaluation-columns,.modal-evaluation-content{grid-template-columns:1fr}.modal-evaluation-center{order:-1}.modal-evaluation-center img{max-width:200px;margin:0 auto;display:block}.help-card-item{padding:10px}.help-card-icon{width:50px;height:50px}}