@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&family=Fredoka:wght@400;500;600;700&display=swap";:root{--al-bg:#7ec9e8;--al-bg-gradient-top:#8fd3f4;--al-bg-gradient-bottom:#5cb8e0;--al-panel:#fff8e7;--al-panel-border:#3a2a1d;--al-ink:#3a2a1d;--al-white:#fff;--al-red:#ff5a5f;--al-red-dark:#d63a3f;--al-orange:#ff9f43;--al-orange-dark:#e07f1f;--al-yellow:#ffd93d;--al-yellow-dark:#e0b01f;--al-green:#6bcb77;--al-green-dark:#47a553;--al-blue:#54a0ff;--al-blue-dark:#2e78d0;--al-purple:#a29bfe;--al-purple-dark:#7a72e0;--al-border-w:4px;--al-radius:18px;--al-radius-sm:12px;--al-shadow:0 6px 0 #0000002e;--al-shadow-pressed:0 2px 0 #0000002e;--al-font-display:"Baloo 2", "Comic Sans MS", cursive;--al-font-body:"Fredoka", "Trebuchet MS", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{font-family:var(--al-font-body);color:var(--al-ink);background:linear-gradient(180deg, var(--al-bg-gradient-top), var(--al-bg-gradient-bottom));overscroll-behavior:none;-webkit-user-select:none;user-select:none;background-attachment:fixed;min-height:100vh;margin:0;padding:0}.al-button{font-family:var(--al-font-display);color:var(--al-white);text-shadow:0 2px #00000040;background:var(--al-green);border:var(--al-border-w) solid var(--al-panel-border);border-radius:var(--al-radius);cursor:pointer;box-shadow:var(--al-shadow);touch-action:manipulation;justify-content:center;align-items:center;gap:8px;padding:14px 32px;font-size:1.25rem;font-weight:800;transition:transform 80ms,box-shadow 80ms,filter .12s;display:inline-flex;position:relative}.al-button:before{content:"";inset:4px var(--al-border-w) auto var(--al-border-w);border-radius:calc(var(--al-radius) - 6px) calc(var(--al-radius) - 6px) 40% 40%;pointer-events:none;background:linear-gradient(#ffffff59,#fff0);height:40%;position:absolute}.al-button:hover{filter:brightness(1.06)}.al-button:active,.al-button.pressed{box-shadow:var(--al-shadow-pressed);transform:translateY(4px)}.al-button:disabled{filter:grayscale(.7)brightness(.9);cursor:not-allowed}.al-button--red{background:var(--al-red)}.al-button--orange{background:var(--al-orange)}.al-button--blue{background:var(--al-blue)}.al-button--yellow{background:var(--al-yellow);color:var(--al-ink);text-shadow:0 1px #fff6}.al-button--purple{background:var(--al-purple)}.al-button--big{padding:24px 56px;font-size:2rem}.al-panel{background:var(--al-panel);border:var(--al-border-w) solid var(--al-panel-border);border-radius:var(--al-radius);box-shadow:var(--al-shadow);padding:20px}.al-badge{font-family:var(--al-font-display);background:var(--al-yellow);border:3px solid var(--al-panel-border);border-radius:999px;align-items:center;padding:4px 14px;font-size:.9rem;font-weight:700;display:inline-flex;box-shadow:0 3px #00000026}.al-progress{border:var(--al-border-w) solid var(--al-panel-border);background:#d9c9a8;border-radius:999px;width:100%;height:28px;position:relative;overflow:hidden;box-shadow:inset 0 3px 6px #0003}.al-progress__fill{background:linear-gradient(180deg, var(--al-green), var(--al-green-dark));border-radius:999px;height:100%;transition:width .25s cubic-bezier(.34,1.56,.64,1);position:relative}.al-progress__fill:after{content:"";background:#ffffff59;border-radius:999px;height:35%;position:absolute;inset:3px 6px auto}.al-counter{font-family:var(--al-font-display);color:var(--al-white);text-shadow:0 3px 0 var(--al-panel-border), 0 6px 12px #00000040;font-size:3.5rem;font-weight:800;line-height:1}@keyframes al-pop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes al-shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)rotate(-2deg)}75%{transform:translate(6px)rotate(2deg)}}@keyframes al-bounce-in{0%{opacity:0;transform:scale(.3)translateY(40px)}60%{opacity:1;transform:scale(1.08)translateY(-6px)}to{transform:scale(1)translateY(0)}}@keyframes al-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.al-animate-pop{animation:.3s cubic-bezier(.34,1.56,.64,1) al-pop}.al-animate-shake{animation:.35s al-shake}.al-animate-bounce-in{animation:.45s cubic-bezier(.34,1.56,.64,1) al-bounce-in}.al-animate-float{animation:2.5s ease-in-out infinite al-float}.al-screen{flex-direction:column;gap:16px;max-width:560px;min-height:100vh;margin:0 auto;padding:16px;display:flex}.al-title{font-family:var(--al-font-display);color:var(--al-white);text-shadow:0 3px 0 var(--al-panel-border), 0 6px 12px #0000004d;text-align:center;letter-spacing:1px;margin:0;font-size:2.2rem;font-weight:800}.al-subtitle{font-family:var(--al-font-body);color:var(--al-white);text-shadow:0 2px #00000040;text-align:center;margin:0;font-size:1.05rem;font-weight:500}.al-game-card{background:var(--al-panel);border:var(--al-border-w) solid var(--al-panel-border);border-radius:var(--al-radius);box-shadow:var(--al-shadow);cursor:pointer;color:var(--al-ink);align-items:center;gap:16px;padding:16px;text-decoration:none;transition:transform .12s,box-shadow .12s;display:flex}.al-game-card:hover{transform:translateY(-3px);box-shadow:0 9px #0000002e}.al-game-card:active{box-shadow:var(--al-shadow-pressed);transform:translateY(2px)}.al-game-card__icon{border:3px solid var(--al-panel-border);border-radius:var(--al-radius-sm);background:var(--al-yellow);flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;font-size:2rem;display:flex}.al-game-card__name{font-family:var(--al-font-display);margin:0 0 4px;font-size:1.3rem;font-weight:800}.al-game-card__desc{opacity:.75;margin:0;font-size:.9rem;line-height:1.3}.al-dialog-backdrop{z-index:100;background:#00000080;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.al-dialog{background:var(--al-panel);border:var(--al-border-w) solid var(--al-panel-border);border-radius:var(--al-radius);box-shadow:var(--al-shadow);text-align:center;width:100%;max-width:380px;padding:28px;animation:.4s cubic-bezier(.34,1.56,.64,1) al-bounce-in}.al-dialog h2{font-family:var(--al-font-display);margin:0 0 12px;font-size:1.6rem;font-weight:800}.al-dialog p{margin:0 0 20px;line-height:1.4}.al-toast{background:var(--al-panel);border:var(--al-border-w) solid var(--al-panel-border);box-shadow:var(--al-shadow);font-family:var(--al-font-display);z-index:200;border-radius:999px;padding:10px 24px;font-weight:700;animation:.3s cubic-bezier(.34,1.56,.64,1) al-bounce-in;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@media (width<=430px){.al-title{font-size:1.8rem}.al-counter{font-size:2.8rem}.al-button--big{padding:20px 40px;font-size:1.6rem}}
