:root{--color-bg-start: hsl(260, 40%, 94%);--color-bg-end: hsl(20, 60%, 95%);--color-primary: hsl(260, 50%, 65%);--color-primary-hover: hsl(260, 50%, 55%);--color-primary-light: hsl(260, 60%, 90%);--color-accent-mint: hsl(150, 45%, 50%);--color-accent-mint-light: hsl(150, 50%, 90%);--color-accent-peach: hsl(18, 75%, 65%);--color-accent-peach-light: hsl(18, 80%, 92%);--color-accent-sky: hsl(200, 65%, 55%);--color-accent-sky-light: hsl(200, 70%, 90%);--color-text-main: hsl(240, 10%, 25%);--color-text-muted: hsl(240, 6%, 50%);--color-white: #ffffff;--glass-bg: rgba(255, 255, 255, .45);--glass-bg-hover: rgba(255, 255, 255, .65);--glass-border: rgba(255, 255, 255, .5);--glass-shadow: 0 8px 32px 0 rgba(142, 126, 177, .15);--glass-shadow-hover: 0 12px 40px 0 rgba(142, 126, 177, .25);--border-radius-sm: 12px;--border-radius-md: 20px;--border-radius-lg: 32px;--transition-smooth: all .3s cubic-bezier(.25, .8, .25, 1);--transition-bounce: all .5s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:Outfit,Quicksand,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,BIZ UDPGothic,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;color:var(--color-text-main);background:linear-gradient(135deg,var(--color-bg-start) 0%,var(--color-bg-end) 100%);background-attachment:fixed;min-height:100vh;overflow-x:hidden}.glass-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--border-radius-md);box-shadow:var(--glass-shadow);transition:var(--transition-bounce)}.glass-card:hover{background:var(--glass-bg-hover);box-shadow:var(--glass-shadow-hover);transform:translateY(-5px) scale(1.02)}.btn-bounce{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:var(--border-radius-lg);border:none;font-weight:700;cursor:pointer;transition:var(--transition-bounce);text-decoration:none;box-shadow:0 4px 15px #0000000d}.btn-bounce:active{transform:scale(.92)}@keyframes floatBubble{0%{transform:translateY(0) rotate(0);opacity:.2}50%{transform:translateY(-20px) rotate(180deg);opacity:.4}to{transform:translateY(0) rotate(360deg);opacity:.2}}.bubble-drift{position:absolute;pointer-events:none;border-radius:50%;background:#ffffff4d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.4);animation:floatBubble 8s ease-in-out infinite}body{margin:0;padding:0;font-family:"M PLUS Rounded 1c",Quicksand,Outfit,sans-serif;background:radial-gradient(circle,#fff5f5,#f0f7ff);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}.game-container{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.header-bar{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;z-index:10;pointer-events:none}.back-btn{pointer-events:auto;background:var(--color-white, #ffffff);color:var(--color-text, #333333);border:3px solid #e2e8f0;padding:10px 20px;border-radius:30px;font-size:1rem;font-weight:800;box-shadow:0 8px 16px #0000000d;cursor:pointer;display:flex;align-items:center;gap:8px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s}.back-btn:active{transform:scale(.9)}.title-display{background:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:3px solid rgba(255,255,255,.6);padding:8px 20px;border-radius:20px;font-size:1.1rem;font-weight:800;color:#4f46e5;box-shadow:0 8px 20px #4f46e50d}.zukan-viewport{display:flex;align-items:center;justify-content:center;width:100%;max-width:none;gap:20px;height:100%;box-sizing:border-box;position:relative}.grid-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:20px;flex-grow:1;height:100%;box-sizing:border-box}.nav-arrow-btn{background:#fff;color:#6366f1;border:6px solid #e2e8f0;border-radius:50%;width:80px;height:80px;font-size:2.5rem;font-weight:900;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 20px #0000000d,inset 0 -4px #cbd5e1;transition:transform .15s cubic-bezier(.175,.885,.32,1.275),background-color .2s;-webkit-user-select:none;user-select:none;z-index:10;flex-shrink:0}.nav-arrow-btn:active:not(:disabled){transform:scale(.85)}.nav-arrow-btn:disabled{opacity:.15;cursor:not-allowed}@media (max-width: 768px){.grid-container{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);gap:12px}.zukan-viewport{padding:0 10px;gap:10px}.nav-arrow-btn{width:60px;height:60px;font-size:1.8rem;border-width:4px}}@media (max-width: 640px){.zukan-viewport{height:100%}.grid-container{gap:12px}.game-container{padding:10px}}.animal-card{position:relative;background:var(--color-white, #ffffff);border-radius:var(--border-radius-md, 24px);border:6px solid var(--border-color);box-shadow:0 12px 24px #0000000a,inset 0 -6px 0 var(--shadow-color);cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px;box-sizing:border-box;transition:transform .15s cubic-bezier(.175,.885,.32,1.275);overflow:hidden}.animal-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pastel-bg);opacity:.15;z-index:1}.animal-emoji{width:140px;height:140px;max-width:80%;max-height:60%;object-fit:contain;z-index:2;transition:transform .2s cubic-bezier(.175,.885,.32,1.275);filter:drop-shadow(0 8px 12px rgba(0,0,0,.08));font-size:5rem;display:flex;align-items:center;justify-content:center}.animal-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.animal-name-bottom{position:absolute;bottom:12px;left:50%;transform:translate(-50%);font-size:1.3rem;font-weight:800;color:var(--text-color, #4a5568);z-index:3;background:#ffffffe6;padding:4px 16px;border-radius:12px;box-shadow:0 4px 10px #00000026;white-space:nowrap}@media (max-width: 640px){.animal-emoji{font-size:3rem}.animal-name-bottom{font-size:1rem;padding:2px 12px;bottom:8px}}.poyon-active{animation:poyon .4s cubic-bezier(.175,.885,.32,1.275) forwards}.poyon-active .animal-emoji,.poyon-active .animal-image{animation:spin-jump .4s ease-out forwards}@keyframes poyon{0%{transform:scale(1)}25%{transform:scale(.85)}60%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes spin-jump{0%{transform:translateY(0) scale(1) rotate(0)}50%{transform:translateY(-25px) scale(1.1) rotate(8deg)}75%{transform:translateY(-10px) scale(.95) rotate(-4deg)}to{transform:translateY(0) scale(1) rotate(0)}}.particle{position:absolute;font-size:2.2rem;pointer-events:none;z-index:20;animation:explode-particle var(--duration) cubic-bezier(.1,.8,.3,1) forwards;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}@keyframes explode-particle{0%{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(var(--scale)) rotate(var(--rotate));opacity:0}}.rest-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#fef3c7,#fde68a);z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#78350f;text-align:center;padding:24px}.rest-card{background:#ffffffe6;padding:40px 32px;border-radius:40px;box-shadow:0 20px 40px #d9770626;max-width:480px;width:90%;animation:bounce-in .8s cubic-bezier(.175,.885,.32,1.275)}.rest-emoji{font-size:5rem;margin-bottom:24px;display:inline-block;animation:wave-sleep 3s ease-in-out infinite}.rest-title{font-size:2rem;font-weight:800;margin-bottom:16px}.rest-text{font-size:1.1rem;line-height:1.6;margin-bottom:24px;color:#92400e}@keyframes bounce-in{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes wave-sleep{0%,to{transform:rotate(0) translateY(0)}50%{transform:rotate(-10deg) translateY(-10px)}}