.layout-container{display:grid;grid-template-columns:1fr;gap:1.5rem}.left-column{width:100%}@media(min-width:1024px){.layout-container{grid-template-columns:1fr 320px;gap:1.5rem}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{transform:translate(-100%) translateY(-100%) rotate(45deg);opacity:0}50%{opacity:1}to{transform:translate(100%) translateY(100%) rotate(45deg);opacity:0}}.gojuon-card{position:relative;border-radius:2rem;background:linear-gradient(145deg,#fffffff2,#fffbebe6);border:2px solid rgba(251,191,36,.15);box-shadow:0 20px 50px #fbbf2414,0 8px 24px #0000000a,0 0 0 1px #fffc inset;overflow:hidden;animation:fadeInUp .6s cubic-bezier(.34,1.56,.64,1) backwards}.card-header{position:relative;padding:2.5rem 2rem 2rem;background:linear-gradient(135deg,#fbbf240d,#f59e0b14);border-bottom:2px solid rgba(251,191,36,.1)}.header-decoration{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 0%,rgba(251,191,36,.3) 20%,#FBBF24 50%,rgba(251,191,36,.3) 80%,transparent 100%);box-shadow:0 4px 16px #fbbf244d}.header-content{display:flex;align-items:center;justify-content:center;gap:1rem}.header-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:1rem;background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 8px 20px #fbbf244d,0 4px 10px #f59e0b33,0 0 0 3px #ffffff4d inset}.section-title{font-size:1.75rem;font-weight:800;color:#1f2937;letter-spacing:.02em}.card-body{padding:2rem 1rem}.gojuon-grid{display:flex;flex-direction:column;gap:.75rem;max-width:42rem;margin:0 auto}.gojuon-row{display:flex;justify-content:center;gap:.5rem;animation:fadeInUp .5s cubic-bezier(.34,1.56,.64,1) backwards}.gojuon-spacer{width:2.75rem;height:2.75rem}.reading-badge{position:relative;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:linear-gradient(145deg,#fffffffa,#fffbebf2);border:2px solid rgba(251,191,36,.2);box-shadow:0 6px 20px #fbbf241a,0 3px 10px #0000000a,0 0 0 1px #ffffffe6 inset;transition:all .4s cubic-bezier(.34,1.56,.64,1);cursor:pointer;text-decoration:none;overflow:hidden;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1) backwards}.reading-hiragana{position:relative;z-index:2;font-size:1.25rem;font-weight:700;color:#1f2937;line-height:1;transition:all .4s ease}.reading-shimmer{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 0%,transparent 40%,rgba(251,191,36,.3) 48%,rgba(255,255,255,.5) 50%,rgba(251,191,36,.3) 52%,transparent 60%,transparent 100%);transform:translate(-100%) translateY(-100%) rotate(45deg);transition:none;pointer-events:none;z-index:1}.reading-badge:before{content:"";position:absolute;inset:-2px;border-radius:50%;background:linear-gradient(135deg,#fbbf2466,#f59e0b80);opacity:0;transition:opacity .4s ease;z-index:0}.reading-badge:hover{background:linear-gradient(145deg,#fbbf24,#f59e0b);border-color:#d9770680;transform:translateY(-6px) scale(1.15);box-shadow:0 20px 40px #fbbf2459,0 10px 20px #f59e0b40,0 0 0 3px #fff6 inset}.reading-badge:hover:before{opacity:1}.reading-badge:hover .reading-hiragana{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.15);transform:scale(1.05)}.reading-badge:hover .reading-shimmer{animation:shimmer .8s ease-in-out}.reading-badge:active{transform:translateY(-3px) scale(1.1);transition-duration:.1s}@media(min-width:640px){.gojuon-spacer,.reading-badge{width:3.5rem;height:3.5rem}.reading-hiragana{font-size:1.5rem}.card-body{padding:2.5rem 2rem}.section-title{font-size:2rem}.gojuon-grid{gap:1rem}.gojuon-row{gap:.75rem}}@media(min-width:768px){.gojuon-spacer,.reading-badge{width:4.5rem;height:4.5rem}.reading-hiragana{font-size:2rem}.card-body{padding:3rem 2.5rem}.gojuon-grid{gap:1.25rem}.gojuon-row{gap:1rem}}@media(min-width:1024px){.gojuon-spacer,.reading-badge{width:5rem;height:5rem}.reading-hiragana{font-size:2.25rem}.card-body{padding:3.5rem 3rem}.gojuon-grid{gap:1.5rem}.gojuon-row{gap:1.25rem}}@media(min-width:1280px){.gojuon-spacer,.reading-badge{width:5.5rem;height:5.5rem}.reading-hiragana{font-size:2.5rem}}