:root{--c-sun:#ffd54a;--c-sun-deep:#ffb300;--c-sky:#6ec6ff;--c-sky-deep:#29b6f6;--c-grass:#7bd88f;--c-grass-deep:#43c267;--c-peach:#ff9d8a;--c-peach-deep:#ff7a66;--c-grape:#b59be8;--c-grape-deep:#9575cd;--c-cream:#fff9ec;--c-paper:#fff;--c-ink:#4a3b2a;--c-ink-soft:#8a7a64;--c-line:#f0e6d2;--radius:28px;--radius-lg:40px;--shadow:0 8px 0 #00000014, 0 14px 28px #785a2829;--shadow-press:0 3px 0 #00000014, 0 6px 14px #785a282e;color:var(--c-ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Hiragino Maru Gothic ProN,Hiragino Maru Gothic Pro,"Rounded Mplus 1c","M PLUS Rounded 1c",Yu Gothic UI,Meiryo,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--c-cream);overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}.tap{transition:transform 80ms,box-shadow 80ms,filter .12s}.tap:active{transform:translateY(3px)scale(.98);box-shadow:var(--shadow-press)!important}.app{background:var(--c-cream);flex-direction:column;max-width:720px;height:100%;margin:0 auto;display:flex;position:relative;overflow:hidden}.screen{-webkit-overflow-scrolling:touch;padding:16px 16px calc(96px + env(safe-area-inset-bottom));flex:1;overflow-y:auto}.screen-pad-top{padding-top:calc(12px + env(safe-area-inset-top))}.topbar{padding:calc(10px + env(safe-area-inset-top)) 14px 10px;align-items:center;gap:12px;display:flex}.topbar h1{letter-spacing:.02em;margin:0;font-size:22px}.back-btn{background:var(--c-paper);width:56px;height:56px;box-shadow:var(--shadow);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.back-btn svg{width:30px;height:30px}.tabbar{padding:8px 8px calc(8px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:3px solid var(--c-line);background:#ffffffeb;justify-content:space-around;align-items:stretch;gap:4px;display:flex;position:absolute;bottom:0;left:0;right:0}.tab{color:var(--c-ink-soft);border-radius:18px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:6px 2px;font-size:11px;font-weight:700;display:flex}.tab svg{width:30px;height:30px}.tab.active{color:var(--c-sun-deep);background:#fff6da}.tab.active svg{transform:translateY(-1px)scale(1.08)}.home-hero{text-align:center;padding:10px 0 4px}.home-hero .logo{letter-spacing:.04em;color:var(--c-sun-deep);text-shadow:0 2px #fff,0 3px #ffb30040;font-size:30px;font-weight:800}.home-hero .tagline{color:var(--c-ink-soft);margin-top:2px;font-size:13px}.menu-grid{grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;display:grid}.menu-card{border-radius:var(--radius);box-shadow:var(--shadow);color:#fff;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:150px;padding:18px 10px 16px;display:flex;position:relative;overflow:hidden}.menu-card .art{width:84px;height:84px}.menu-card .label{text-shadow:0 2px 4px #0000002e;font-size:19px;font-weight:800}.menu-card .sub{opacity:.95;font-size:11px;font-weight:700}.bg-sun{background:linear-gradient(160deg, #ffe27a, var(--c-sun-deep))}.bg-sky{background:linear-gradient(160deg, #8fd6ff, var(--c-sky-deep))}.bg-grass{background:linear-gradient(160deg, #9ee6ab, var(--c-grass-deep))}.bg-peach{background:linear-gradient(160deg, #ffb3a3, var(--c-peach-deep))}.bg-grape{background:linear-gradient(160deg, #cdb8f5, var(--c-grape-deep))}.section-title{color:var(--c-ink);margin:14px 4px 8px;font-size:16px;font-weight:800}.pill-row{scrollbar-width:none;gap:8px;padding:4px 2px 8px;display:flex;overflow-x:auto}.pill-row::-webkit-scrollbar{display:none}.pill{background:var(--c-paper);box-shadow:var(--shadow);color:var(--c-ink-soft);border-radius:999px;flex:none;padding:10px 18px;font-size:15px;font-weight:800}.pill.active{background:var(--c-sun);color:var(--c-ink)}.tile-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.tile-grid.cols2{grid-template-columns:repeat(2,1fr)}.tile-grid.cols4{grid-template-columns:repeat(4,1fr)}.tile{background:var(--c-paper);box-shadow:var(--shadow);aspect-ratio:1;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:12px 6px;display:flex}.tile .art{width:64px;height:64px}.tile .name{font-size:14px;font-weight:800}.big-btn{background:var(--c-grass);color:#fff;box-shadow:var(--shadow);text-shadow:0 2px 3px #00000026;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:16px 28px;font-size:19px;font-weight:800;display:inline-flex}.big-btn svg{width:28px;height:28px}.big-btn.sky{background:var(--c-sky-deep)}.big-btn.peach{background:var(--c-peach-deep)}.big-btn.grape{background:var(--c-grape-deep)}.big-btn.ghost{background:var(--c-paper);color:var(--c-ink-soft);text-shadow:none}@keyframes pop-in{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.pop-in{animation:.32s cubic-bezier(.2,1.2,.4,1) both pop-in}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}.wiggle{animation:.5s ease-in-out wiggle}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.bob{animation:2.4s ease-in-out infinite bob}@keyframes float-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.float-up{animation:.4s both float-up}@keyframes spin-slow{to{transform:rotate(360deg)}}.spin-slow{transform-origin:50%;animation:8s linear infinite spin-slow}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}:focus-visible{outline:4px solid var(--c-sky-deep);outline-offset:2px}.praise-overlay{z-index:60;background:#00000040;justify-content:center;align-items:center;animation:.2s float-up;display:flex;position:fixed;inset:0}.praise-card{background:var(--c-paper);text-align:center;box-shadow:var(--shadow);border-radius:36px;padding:26px 30px;animation:.4s cubic-bezier(.2,1.2,.4,1) both pop-in}.praise-card .star{width:130px;height:130px}.praise-card .msg{color:var(--c-sun-deep);margin-top:6px;font-size:24px;font-weight:800}.confetti{z-index:61;pointer-events:none;border-radius:3px;width:12px;height:12px;animation:linear forwards fall;position:fixed;top:-12px}@keyframes fall{to{opacity:.9;transform:translateY(110vh)rotate(540deg)}}.gate{z-index:80;background:#4a3b2a8c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.gate-card{background:var(--c-paper);width:100%;max-width:360px;box-shadow:var(--shadow);border-radius:28px;padding:24px}.gate-card h2{margin:0 0 4px;font-size:18px}.gate-q{text-align:center;margin:14px 0;font-size:28px;font-weight:800}.gate-keys{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.gate-key{background:var(--c-cream);box-shadow:var(--shadow-press);border-radius:18px;padding:16px 0;font-size:22px;font-weight:800}.center-col{flex-direction:column;align-items:center;gap:14px;display:flex}.row{align-items:center;gap:12px;display:flex}.row.center{justify-content:center}.muted{color:var(--c-ink-soft)}.text-c{text-align:center}.stage{background:var(--c-paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.hidden{display:none!important}