* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; background: linear-gradient(180deg, #bfe9ff 0%, #fff6c9 100%); color: #25314d; user-select: none; -webkit-user-select: none; }
.top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
.top a, .top button { font-weight: 700; font-size: 20px; font-family: inherit; text-decoration: none; color: #25314d; background: #fff; border: 3px solid #25314d; border-radius: 99px; padding: 8px 18px; cursor: pointer; }
.top .sp { flex: 1; }
.stars { font-size: 26px; font-weight: 800; letter-spacing: 2px; }
h1 { margin: 0 14px; font-size: 28px; }
#msg { min-height: 54px; margin: 6px 14px; font-size: 34px; font-weight: 800; text-align: center; color: #1b2a63; }
#stage { position: relative; margin: 0 auto; max-width: 1000px; min-height: 520px; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.card { font-size: 110px; line-height: 1.1; width: 190px; height: 190px; display: grid; place-items: center; border-radius: 28px; border: 6px solid #fff; background: #ffffffaa; box-shadow: 0 6px 0 #25314d33; cursor: pointer; transition: transform .15s; position: relative; }
.card:active { transform: scale(.94); }
.card .lb { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 20px; font-weight: 800; }
.card.ok { border-color: #2ecc71; background: #d9ffe6; }
.card.bad { animation: shake .4s; border-color: #e53935; }
.card.done { opacity: .35; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-14px); } 75% { transform: translateX(14px); } }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
.pop { animation: pop .4s; }
.col { width: 170px; height: 170px; border-radius: 50%; border: 8px solid #fff; cursor: pointer; box-shadow: 0 6px 0 #25314d33; }
.col:active { transform: scale(.92); }
.big { font-size: 130px; }
.free { position: absolute; font-size: 100px; cursor: pointer; line-height: 1; transition: left .2s, top .2s; }
.sc { position: absolute; font-size: 64px; cursor: pointer; line-height: 1; }
#start { position: fixed; inset: 0; background: #bfe9ffee; display: grid; place-items: center; z-index: 5; text-align: center; }
#start button { font-weight: 800; font-size: 44px; font-family: inherit; padding: 24px 60px; border-radius: 99px; border: 6px solid #25314d; background: #ffd23f; color: #25314d; cursor: pointer; }
#start p { font-size: 22px; margin: 0 20px 24px; }
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; max-width: 1000px; margin: 14px auto; padding: 0 14px; }
.hub a { display: block; text-decoration: none; color: #25314d; background: #fff; border: 5px solid #25314d; border-radius: 28px; padding: 16px; text-align: center; font-size: 22px; font-weight: 800; box-shadow: 0 6px 0 #25314d33; }
.hub a:active { transform: scale(.96); }
.hub .em { font-size: 74px; display: block; line-height: 1.2; }
.hub small { display: block; font-weight: 600; font-size: 15px; color: #526087; margin-top: 4px; }
.foot { text-align: center; font-size: 14px; color: #526087; margin: 20px 0; }
@media (max-width: 600px) { .card { width: 150px; height: 150px; font-size: 84px; } .col { width: 130px; height: 130px; } #msg { font-size: 26px; } }