:root{--ink:#203d35;--muted:#728078;--green:#146956;--light:#edf5ef;--paper:#f7f9f6;--line:#e5ebe4;--yellow:#f6d675;--white:#fff;font-family:ui-rounded,"PingFang TC","Noto Sans TC",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e9b958;outline-offset:3px}a{color:inherit;text-decoration:none}button{color:inherit}input[type=checkbox]{width:19px;height:19px;accent-color:var(--green)}input,select{border:1px solid #d9e3da;border-radius:9px;padding:10px;background:white;color:var(--ink);min-width:0}h1,h2,h3,p{margin:0}h1{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.04em;line-height:1.4}h2{font-size:1.15rem}h3{font-size:1.05rem}small{font-size:.8rem}.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}.sidebar{padding:32px 23px 22px;border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;font-size:1.25rem;font-weight:800;letter-spacing:.05em}.brand small{display:block;font-size:.75rem;font-weight:500;color:var(--muted);letter-spacing:.17em;margin-top:3px}.brand-icon{display:grid;place-items:center;background:var(--green);color:var(--yellow);height:43px;width:43px;border-radius:14px;font-size:2rem}.class-label{font-size:.75rem;letter-spacing:.08em;color:var(--muted);margin:42px 10px 12px}.class-select{display:flex;justify-content:space-between;width:100%;border:1px solid var(--line);background:var(--paper);padding:13px;border-radius:10px;font-weight:600}nav{display:grid;gap:7px;margin-top:28px}.nav-item{border:0;background:transparent;text-align:left;padding:13px 15px;display:flex;align-items:center;gap:14px;border-radius:11px;font-size:1.1rem}.nav-item span{font-size:.92rem}.nav-item.active{background:var(--light);color:var(--green);font-weight:700}.sidebar-note{margin-top:auto;padding:32px 9px 24px;font-size:1rem;line-height:1.9;color:#577165}.sidebar-note span{display:block;font-size:.75rem;color:var(--muted);margin-top:16px}.local-label{font-size:.75rem;border-top:1px solid var(--line);padding-top:18px;color:var(--muted)}main{min-width:0}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:#ffffffa8;border-bottom:1px solid var(--line);font-size:.85rem}.crumb{color:var(--muted);margin-left:10px}.button{background:var(--green);color:white;border:1px solid var(--green);border-radius:10px;padding:12px 18px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem}.button.secondary{background:white;color:var(--ink);border-color:#dce5dd}.button.danger{background:#a64132;border-color:#a64132}.button.small{padding:8px 12px;font-size:.85rem}.workspace{max-width:1250px;margin:auto;padding:38px 42px 60px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.2em;color:var(--green);margin-bottom:10px}.page-heading p{color:var(--muted);font-size:.95rem;margin-top:9px;line-height:1.7}.tag{white-space:nowrap;display:inline-flex;background:#f4eed6;color:#877034;border-radius:7px;padding:6px 10px;font-size:.75rem}.stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--green);color:white;border-radius:18px;padding:23px 28px;margin-bottom:28px;gap:20px}.stats>div{border-right:1px solid #ffffff30}.stats>div:last-child{border:0}.stats span{display:block;color:#c5ddd2;font-size:.8rem;margin-bottom:10px}.stats strong{font-size:1.85rem;font-weight:600;letter-spacing:-.02em}.stats small{font-size:.8rem;font-weight:400;color:#c5ddd2;margin-left:6px}.panel{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:23px 26px}.panel-head p{color:var(--muted);font-size:.8rem;margin-top:7px}.batch-toolbar{background:#fafcf9;padding:14px 26px;border-block:1px solid var(--line);display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:.85rem}.batch-toolbar label{display:flex;align-items:center;gap:8px}.batch-toolbar>span{color:var(--muted)}.student-row{display:flex;align-items:center;gap:18px;padding:14px 26px;border-bottom:1px solid #eef1ec;min-height:79px}.student-row:last-child{border:0}.seat{font-variant-numeric:tabular-nums;font-size:.85rem;color:#859189}.student-name{font-weight:600;min-width:100px}.student-name small{display:block;color:var(--muted);font-weight:400;font-size:.75rem;margin-top:5px}.mini-progress{margin-left:auto;width:190px}.mini-progress>span{font-size:.75rem;color:var(--muted)}.progress{height:5px;background:#eaf0e8;border-radius:20px;margin-top:9px;overflow:hidden}.progress i{display:block;height:100%;background:#83b394;border-radius:20px}.energy-input{display:flex;align-items:center;gap:8px;margin-left:30px;font-size:.75rem;color:var(--muted)}.energy-input input{width:92px;text-align:center;padding:10px;font-weight:600;font-variant-numeric:tabular-nums}.panel-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 26px;border-top:1px solid var(--line);background:#fcfdfa}.panel-footer>span{color:var(--muted);font-size:.8rem}#toast:not(:empty){position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:14px 22px;background:#203d35;color:white;border-radius:12px;box-shadow:0 8px 30px #0002;z-index:100;max-width:90vw;font-size:.9rem}.hidden{display:none!important}.loading{display:grid;place-items:center;min-height:100vh}.muted{color:var(--muted)}
@media(max-width:1000px){.shell{grid-template-columns:190px 1fr}.sidebar{padding:28px 15px}.workspace{padding:28px 24px}.topbar{padding:0 24px}.mini-progress{width:130px}.student-row{gap:12px;padding:14px 18px}.energy-input{margin-left:10px}.student-name{min-width:65px}}
@media(max-width:720px){.shell{display:block}.sidebar{height:auto;position:static;padding:18px 20px 0;border-right:0}.brand{font-size:1.1rem}.brand small,.sidebar-note,.local-label{display:none}.class-label{margin:18px 0 8px}.class-select{display:block;min-height:48px;font-size:1rem}nav{display:flex;margin-top:18px;gap:4px;overflow-x:auto}.nav-item{padding:12px 10px;gap:7px;white-space:nowrap;border-radius:9px 9px 0 0}.nav-item span{font-size:.82rem}.topbar{height:62px;padding:0 20px}.topbar .crumb{display:none}.workspace{padding:25px 16px 40px}.page-heading{margin-bottom:22px}.stats{gap:12px;padding:21px 17px;border-radius:14px}.stats strong{font-size:1.55rem}.stats small{display:block;margin:5px 0 0}.stats span{font-size:.75rem}.panel-head{padding:18px;align-items:flex-start;flex-wrap:wrap}.batch-toolbar{padding:12px 16px;gap:12px}.student-row{gap:10px;padding:13px 12px;flex-wrap:wrap}.mini-progress{display:none}.energy-input{margin-left:auto;gap:5px}.energy-input input{width:72px}.student-name{min-width:60px}.panel-footer{padding:16px;align-items:stretch;flex-direction:column}.button{min-height:44px}.page-heading .tag{font-size:.75rem}.eyebrow{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
.top-actions,.period-control,.footer-actions,.display-actions{display:flex;align-items:center;gap:12px}.top-actions #connection{font-size:.75rem;color:var(--muted)}#connection.offline{color:#aa4d30}.nav-symbol{width:18px;text-align:center}.chip{border:1px solid #dce6dc;border-radius:7px;background:white;padding:7px 10px;min-height:35px;font-size:.8rem}.chip:hover,.button.secondary:hover{background:#eef5ec}.text-button{border:0;background:transparent;font-size:.85rem;padding:8px 4px;color:var(--green)}.icon-button{border:0;background:transparent;padding:8px;font-size:1.1rem;min-width:40px;min-height:40px}.text-button:hover{text-decoration:underline}.footnote{font-size:.75rem!important;color:var(--muted);margin-top:7px;line-height:1.7}.student-row .monster.mini{width:49px;height:49px;border-radius:13px;flex:0 0 49px}.monster{background-size:300% 200%;background-repeat:no-repeat;aspect-ratio:1;width:100%;border-radius:16px;overflow:hidden}.student-name{min-width:85px}.student-row .mini-progress{width:170px}.progress-total{float:right;font-size:.75rem;color:#8d9891}.skip-button{border:0;background:none;color:#8a968e;padding:8px 2px;font-size:.75rem}.skip-button.selected{color:var(--green);font-weight:700}.skipped{background:#f7f9f6}.skipped .energy-input input{background:#f0f4ee}.row-check{width:19px;color:#80a98b}.settled-amount{margin-left:auto;min-width:130px;text-align:right;font-size:1.2rem;color:var(--green);font-weight:600}.settled-amount small{display:block;font-size:.75rem;color:var(--muted);margin-top:4px}.settled-notice{padding:14px 26px;background:#edf6ec;border-block:1px solid var(--line);font-size:.85rem;color:#446c51}.tag.success{background:#e6f0e2;color:#4c7651}.empty{padding:70px 25px;text-align:center;line-height:1.9}.empty p{color:var(--muted);font-size:.9rem;margin-top:9px}.garden-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:15px;font-size:.9rem;color:var(--muted)}.search input{max-width:230px;background:white}.garden-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.pet-card{display:block;text-align:left;background:white;border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:0 4px 14px #203d3503;transition:transform .2s,box-shadow .2s;min-width:0}.pet-card[hidden]{display:none}.pet-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px #203d350c}.card-heading{display:flex;justify-content:space-between;align-items:center;margin:2px 0 13px;font-size:.85rem;font-weight:600;gap:8px;flex-wrap:wrap}.stage-label{font-size:.75rem;font-weight:400;color:#7a8a80;background:#f0f5ec;padding:4px 8px;border-radius:5px}.pet-card>.monster{border-radius:12px}.card-caption{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:16px}.card-caption>span{font-size:.75rem;color:var(--muted)}.card-numbers{display:flex;justify-content:space-between;gap:6px;font-size:.75rem;color:var(--muted);margin-top:9px}.pet-card .progress{margin-top:15px}.history-list{display:grid;gap:16px}.history-card{display:flex;align-items:center;gap:25px;padding:24px}.history-date{border-radius:12px;background:#f1f5ed;padding:14px 20px;text-align:center}.history-date span{display:block;font-size:.75rem;color:var(--muted)}.history-date strong{display:block;font-size:1.4rem;margin-top:3px}.history-content{flex:1}.history-content h2{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.history-content p{font-size:.85rem;color:var(--muted);margin:10px 0}.history-content small{font-size:.75rem;color:#8d978e}.history-actions{display:grid;gap:10px}.danger-text{color:#a94b36}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:23px}.settings-section{padding:25px}.settings-section h2{margin-bottom:20px}.settings-section>p{font-size:.85rem;line-height:1.8}.settings-section.wide{grid-column:1/-1}.field{display:grid;gap:9px;font-size:.9rem;margin:18px 0}.field input{width:100%}.settings-buttons{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:17px 0;font-size:.85rem}.notice{background:#f8f3df;color:#8b733a;border-radius:9px;padding:13px;font-size:.8rem!important;line-height:1.8;margin-top:18px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.section-heading h2{margin:0}.section-heading small{color:var(--muted);font-weight:400;margin-left:8px}.roster-table{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}.roster-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.85rem}.roster-row strong{flex:1;font-weight:500}.roster-row .muted{font-size:.75rem}.status-row{display:flex;justify-content:space-between;gap:15px;font-size:.8rem;padding:9px 0}.status-row strong{font-weight:500}dialog{border:1px solid var(--line);border-radius:20px;padding:0;color:var(--ink);width:min(680px,calc(100vw - 32px));max-height:88vh;box-shadow:0 22px 100px #10302533}dialog::backdrop{background:#142f2a70;backdrop-filter:blur(3px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:17px 23px;border-bottom:1px solid var(--line);gap:15px;position:sticky;top:0;background:white;z-index:2}.modal-body{padding:24px}.modal-body p{line-height:1.9;margin-bottom:12px;font-size:.9rem}.modal-footer{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding:18px 24px;border-top:1px solid var(--line);background:#fafcf9;position:sticky;bottom:0}.preview-summary{display:flex;align-items:center;justify-content:space-between;background:var(--light);padding:20px;border-radius:12px;margin-bottom:17px;gap:12px}.preview-summary strong{font-size:2rem;color:var(--green)}.preview-summary small{font-size:.8rem;margin-left:8px;font-weight:400}.preview-summary>span{font-size:.85rem;color:var(--muted)}.preview-list{margin-top:15px;max-height:42vh;overflow:auto}.preview-list>div,.personal-history>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line);font-size:.85rem}.preview-list>div>span:last-child{font-size:.8rem;color:var(--muted)}.preview-list strong{margin-left:auto;color:var(--green)}.pet-detail{display:grid;grid-template-columns:210px 1fr;gap:30px;align-items:center}.pet-detail strong{display:block;font-size:1.8rem;margin:13px 0}.pet-detail small{color:var(--muted);font-weight:400;font-size:.8rem}.section-title{margin:26px 0 18px}.collection-grid,.graduation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.collection-grid>p{grid-column:1/-1}.collection-grid strong,.graduation-grid strong{display:block;margin-top:10px;font-size:.9rem}.collection-grid small,.graduation-grid small{display:block;color:var(--muted);font-size:.75rem;margin-top:5px}.center{text-align:center}.celebration{text-align:center;padding:5px 10px 20px}.celebration-spark{font-size:4rem;color:#e8b43a;display:block;animation:bloom .8s cubic-bezier(.3,.7,.4,1.4)}.celebration.still .celebration-spark{animation:none}.celebration h3{font-size:1.6rem;margin:10px 0}.celebration p{color:var(--muted)}@keyframes bloom{from{transform:scale(.4) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.display-page{max-width:1600px;margin:auto;padding:28px 45px 40px}.display-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.display-header .brand{font-size:1.2rem}.display-actions>span{font-size:.8rem;color:var(--muted)}.display-intro{text-align:center;margin:40px 0 35px}.display-intro h1{font-size:2rem}.display-intro p{color:var(--muted);margin-top:12px}.display-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.display-grid .pet-card{padding:12px}.display-grid .card-heading{font-size:.9rem}.display-grid .stage-label{font-size:.75rem}.display-grid .card-caption{display:block}.display-grid .card-caption span{display:block;margin-top:6px}.display-footer{display:flex;justify-content:space-between;padding:25px 0 0;font-size:.8rem;color:var(--muted)}.login{min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(ellipse at 20% 30%,#dceede,transparent 60%),var(--paper)}.login-card{width:min(440px,100%);padding:40px;background:#fff;border:1px solid var(--line);border-radius:22px}.login-card .brand-icon{margin-bottom:28px}.login-card h1{font-size:1.7rem}.login-card>p{font-size:.9rem;color:var(--muted);line-height:1.9;margin:15px 0}.login-card label{display:grid;gap:10px;margin:22px 0;font-size:.9rem}.login-card .button{width:100%}#login-error{color:#ac4c36}.offline .topbar{border-bottom-color:#cf9f57}
@media(min-width:1500px){.garden-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.display-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1100px){.student-row .mini-progress{display:none}.energy-input{margin-left:auto}.garden-grid{gap:14px}.display-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.card-caption{display:block}.card-caption>span{display:block;margin-top:7px}.card-numbers{flex-direction:column}.history-card{gap:16px;padding:18px}.settings-grid{gap:16px}.settings-section{padding:20px}.roster-table{grid-template-columns:1fr}.history-actions{min-width:90px}}
@media(max-width:720px){.top-actions #connection{display:none}.student-row{gap:8px;flex-wrap:nowrap}.student-row .monster.mini{width:38px;height:38px;flex-basis:38px;border-radius:10px}.student-name{min-width:50px;font-size:.9rem}.student-name small{font-size:.75rem;max-width:100px}.seat{font-size:.75rem}.energy-input{gap:4px}.energy-input input{width:61px;padding:10px 4px}.energy-input>span{display:none}.skip-button{font-size:.75rem}.student-row>input[type=checkbox]{width:17px;height:17px;flex-shrink:0}.batch-toolbar{gap:8px;font-size:.8rem}.chip{font-size:.75rem;min-height:38px}.footer-actions{display:grid;grid-template-columns:1fr 1.4fr}.garden-toolbar{align-items:flex-start;flex-direction:column;font-size:.85rem}.garden-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pet-card{padding:11px;border-radius:14px}.card-heading{gap:5px;font-size:.8rem;margin-bottom:9px}.stage-label{font-size:.75rem;padding:3px 5px}.card-caption h3{font-size:.95rem}.history-card{flex-wrap:wrap;gap:14px}.history-date{padding:13px}.history-content{min-width:170px}.history-content h2{font-size:1rem}.history-actions{display:flex;width:100%;justify-content:flex-end}.settings-grid{grid-template-columns:1fr}.settings-section.wide{grid-column:auto}.pet-detail{grid-template-columns:130px 1fr;gap:18px}.collection-grid,.graduation-grid{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.preview-list>div{gap:8px;font-size:.8rem;flex-wrap:wrap}.preview-list>div>span:last-child{min-width:100px;text-align:right}.preview-summary{align-items:flex-start;flex-direction:column}.modal-body{padding:20px}.modal-head{padding:14px 18px}.modal-head h2{font-size:1rem}.display-page{padding:20px 14px}.display-header .brand{font-size:1rem}.display-header .brand small{display:block;font-size:.75rem}.display-actions>span{display:none}.display-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.display-intro{margin:32px 0 25px}.display-intro h1{font-size:1.55rem}.display-intro p{font-size:.85rem}.display-footer{gap:12px;line-height:1.8}.settled-amount{min-width:65px;font-size:1.1rem}.login-card{padding:28px}}
/* Individual viewboxes preserve generated wings/tails; no image files are cropped. */
.monster.alive{position:relative;background:#fff}
.motion-frame{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:var(--frame-width) / 256;transform:translate(-50%,-50%);background-repeat:no-repeat;animation:monster-cycle 2.8s steps(1,end) infinite;animation-delay:var(--idle-delay,0s)}
.stage-0 .motion-frame{animation-duration:3.6s}.stage-1 .motion-frame{animation-duration:3.2s}
@keyframes monster-cycle{0%,100%{background-position-y:var(--frame-y0)}25%{background-position-y:var(--frame-y1)}50%{background-position-y:var(--frame-y2)}75%{background-position-y:var(--frame-y3)}}
.monster.pet-hop{animation:pet-hop .8s ease-in-out!important;overflow:visible}
.monster.pet-hop .motion-frame{animation-duration:.7s}
@keyframes pet-hop{0%,100%{transform:translateY(0) rotate(0) scale(1)}20%{transform:translateY(4px) rotate(-5deg) scale(1.04,.94)}45%{transform:translateY(-20px) rotate(6deg) scale(.98,1.03)}65%{transform:translateY(0) rotate(-3deg) scale(1.04,.97)}82%{transform:translateY(-6px) rotate(2deg)}}
.pet-detail .monster{cursor:pointer}.pet-detail #play-pet{margin:5px 0 10px}.pet-card:hover .motion-frame{animation-duration:1.8s}
@media(prefers-reduced-motion:reduce){.motion-frame,.monster.pet-hop{animation:none!important}}

.motion-paused .motion-frame,.page-hidden .motion-frame{animation-play-state:paused!important}
textarea{font:inherit;border:1px solid #d9e3da;border-radius:10px;padding:13px;resize:vertical;color:var(--ink);width:100%;line-height:1.8;background:white}.birthday-list{max-height:45vh;overflow:auto;margin-bottom:20px}.birthday-list label{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}.birthday-list input{width:100px}.birthday-list small{display:block;color:var(--muted);margin-top:4px}.student-home{max-width:1050px;margin:auto;padding:30px 28px 50px}.student-hero{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin:45px 0}.student-companion{padding:20px;background:white;border:1px solid var(--line);border-radius:32px}.student-welcome>p{margin:12px 0 18px;line-height:1.8;color:var(--muted)}.student-energy{margin:25px 0}.student-energy strong{font-size:2.6rem;color:var(--green)}.student-energy small{font-size:.9rem;color:var(--muted);font-weight:400}.student-energy .progress{height:9px;max-width:350px}.student-energy p{font-size:.85rem;color:var(--muted);margin-top:12px}.student-records{margin-top:35px}.student-records h2{margin-bottom:15px}.student-home .collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#student-login-error{color:#a64132;font-size:.85rem;line-height:1.8}
@media(max-width:720px){.student-home{padding:22px 18px}.student-home .brand{font-size:1rem}.student-home .brand small{display:block;font-size:.75rem}.student-hero{grid-template-columns:1fr;gap:25px;margin:30px 0}.student-companion{max-width:330px;width:100%;margin:auto;padding:15px}.student-welcome{text-align:center}.student-energy .progress{margin-inline:auto}.student-energy{margin:20px 0}.student-home .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Collection slots reveal only completed species. */
.collection-album .section-heading{flex-wrap:wrap;gap:10px}.album-count{font-size:.85rem;color:var(--green);font-weight:700}.album-intro{font-size:.85rem;color:var(--muted);line-height:1.8;margin:12px 0 22px}.album-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.album-slot{position:relative;min-width:0;padding:12px 8px;text-align:center;border:1px solid var(--line);border-radius:16px;background:#fff}.album-slot.unlocked{border-color:#bdd6b9;background:#f7fbf4;transition:transform .2s,box-shadow .2s}.album-slot.unlocked:hover{transform:translateY(-3px);box-shadow:0 8px 20px #203d3512}.album-number{display:block;text-align:left;font-size:.72rem;letter-spacing:.04em;color:#87998e}.album-slot strong{display:block;font-size:.85rem;margin-top:6px;overflow-wrap:anywhere}.album-slot small{display:block;font-size:.72rem;color:var(--muted);margin-top:6px}.album-slot.locked{background:#f3f5f1;border-style:dashed;color:#839086}.album-mystery{aspect-ratio:1;display:grid;place-items:center;font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;color:#b0bcb0;background:radial-gradient(ellipse,#e4ebe1,transparent 70%)}.egg-catalog-open{margin-top:16px}#album-greet{margin-top:20px}
@media(max-width:720px){.album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.album-slot{padding:10px 6px;border-radius:12px}.album-slot strong{font-size:.75rem}.collection-album.settings-section{padding:18px 12px}.album-mystery{font-size:2.6rem}}
@media(prefers-reduced-motion:reduce){.album-slot.unlocked{transition:none}.album-slot.unlocked:hover{transform:none}}
.class-size{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.class-size-summary{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:.85rem;margin-bottom:14px}.class-size form{display:flex;gap:12px;align-items:flex-end}.class-size .field{flex:1;margin-bottom:0}.roster-login{display:block;margin-top:5px;font-size:.7rem}.new-student-fields{display:grid;grid-template-columns:70px 1fr 110px;gap:12px;border:1px solid var(--line);border-radius:12px;padding:15px;margin:16px 0}.new-student-fields legend{font-size:.8rem;color:var(--muted)}.new-student-fields .field{min-width:0;margin:0}.new-student-fields input{width:100%}.resize-roster-list{max-height:55vh;overflow:auto;padding:4px 22px 4px 4px;scrollbar-gutter:stable}#resize-error{color:#a64132;margin:12px 0}
@media(max-width:720px){.class-size form{flex-wrap:wrap}.new-student-fields{grid-template-columns:65px 1fr;gap:10px}.new-student-fields .field:last-child{grid-column:1/-1}}
.excel-upload{background:#f4f8f1;border:1px solid #dde8d8;border-radius:12px;padding:20px;margin:16px 0 24px}.excel-upload p{font-size:.85rem;line-height:1.8;margin:10px 0 14px;color:var(--muted)}.excel-upload form{margin-top:20px}.excel-upload input[type=file]{width:100%;font-size:.85rem}.excel-preview-scroll{max-height:42vh;overflow:auto;margin:18px 0}.excel-preview{width:100%;border-collapse:collapse;font-size:.85rem}.excel-preview th,.excel-preview td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}.excel-preview th{background:#edf5e9;position:sticky;top:0}.excel-preview small{display:block;color:var(--muted);font-size:.72rem;margin-top:5px}.excel-preview td:nth-child(3){font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:720px){.excel-upload{padding:15px}.excel-preview th,.excel-preview td{padding:10px 5px;font-size:.78rem}}
/* Shared student / teacher entrance. */
.entry-page{padding:24px 16px;min-height:100svh}.entry-card{width:min(500px,100%);padding:32px}.entry-heading{display:flex;align-items:center;gap:12px}.entry-heading>div:first-child{flex:1;min-width:0}.entry-heading .eyebrow{font-size:.75rem;letter-spacing:.14em}.entry-heading h1{font-size:clamp(1.35rem,5vw,1.65rem);line-height:1.5;margin-top:10px}.entry-heading p{font-size:.9rem;color:var(--muted);margin-top:8px;line-height:1.7}.entry-companion{width:74px;height:74px;flex:0 0 74px;border-radius:18px;background:radial-gradient(circle at 40% 38%,#f1f9ed,#b5d6c1)}.entry-roles{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:#edf3ee;border-radius:13px;margin:25px 0 20px}.entry-roles button{border:0;background:transparent;border-radius:9px;min-height:48px;font:inherit;color:var(--green);font-weight:600}.entry-roles button[aria-pressed=true]{background:var(--green);color:#fff;box-shadow:0 3px 8px #14695620}.entry-card input,.entry-card select{width:100%;min-width:0;font-size:1rem;min-height:48px}.entry-card label{margin:18px 0;font-size:.95rem}.entry-note{color:var(--muted);font-size:.9rem;line-height:1.8;margin:12px 0 18px}.entry-section-title{font-size:1.1rem;line-height:1.6}.entry-card #entry-error{color:#a64132;font-size:.9rem;line-height:1.8;margin-top:12px}.entry-card .entry-footer{font-size:.8rem;text-align:center;color:var(--muted);margin:24px 0 0}.entry-card .button{display:block;text-align:center;min-height:48px}.entry-roles button:focus-visible{outline:3px solid #c59527;outline-offset:2px}@media(max-width:380px){.entry-card{padding:22px}.entry-companion{width:54px;height:54px;flex-basis:54px}.entry-heading h1{font-size:1.3rem}}

.egg-selection{margin:38px 0}.egg-intro{text-align:center;max-width:700px;margin:0 auto 26px}.egg-intro h1{font-size:clamp(1.5rem,4vw,2rem);line-height:1.6}.egg-intro p{font-size:1rem;line-height:1.8;color:var(--muted);margin-top:12px}.egg-intro .egg-energy{color:var(--green);font-weight:600}.egg-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.egg-option{display:flex;flex-direction:column;align-items:center;padding:20px;background:white;border:2px solid var(--line);border-radius:24px;color:var(--ink);text-align:center;min-width:0}.egg-option:hover,.egg-option:focus-visible{border-color:var(--green);box-shadow:0 8px 25px #14695615}.egg-option:focus-visible{outline:3px solid #c59527;outline-offset:3px}.egg-final-label{font-size:.9rem;color:var(--muted);margin-bottom:12px}.egg-option>strong{font-size:1.3rem;margin:14px 0 5px}.egg-element{font-size:.9rem;color:var(--muted)}.egg-option .egg-preview{width:95px;margin:10px 0}.egg-option .button{width:100%;font-size:1rem}.egg-confirm{max-width:220px;margin:0 auto 20px}.awaiting-egg{opacity:.8}.egg-options .monster{animation:none!important;transition:none!important}@media(max-width:640px){.egg-options{gap:12px;grid-template-columns:1fr}.egg-option{width:min(350px,100%);margin:auto;padding:22px}.egg-option .egg-final{max-width:230px}.egg-option .egg-preview{width:85px}.egg-intro{text-align:left}}
/* Six-by-four generated atlases use one shared source rectangle for stills and motion. */
.atlas-static,.atlas-monster{position:relative;background:#fff}.atlas-frame,.atlas-monster .motion-frame{aspect-ratio:var(--frame-width) / var(--frame-height,256);background-repeat:no-repeat;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.atlas-frame{animation:none}.atlas-monster .motion-frame{animation:atlas-cycle 2.8s steps(1,end) infinite;animation-delay:var(--idle-delay,0s)}.atlas-monster.stage-0 .motion-frame{animation-duration:3.6s}.atlas-monster.stage-1 .motion-frame{animation-duration:3.2s}
@keyframes atlas-cycle{0%,100%{background-position-y:var(--frame-y0);background-size:var(--frame-size0);aspect-ratio:var(--frame-ratio0)}25%{background-position-y:var(--frame-y1);background-size:var(--frame-size1);aspect-ratio:var(--frame-ratio1)}50%{background-position-y:var(--frame-y2);background-size:var(--frame-size2);aspect-ratio:var(--frame-ratio2)}75%{background-position-y:var(--frame-y3);background-size:var(--frame-size3);aspect-ratio:var(--frame-ratio3)}}
.student-header-actions{display:flex;align-items:center;gap:10px}.egg-toolbar,.catalog-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 auto 20px;max-width:900px}.egg-toolbar .search,.catalog-toolbar .search{flex:1 1 220px}.egg-toolbar .search input,.catalog-toolbar .search input{width:100%;max-width:none}.egg-filter{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}.egg-filter select{min-width:150px}.egg-count{font-size:.8rem;color:var(--muted);white-space:nowrap}.egg-option[hidden]{display:none}.egg-pagination,.catalog-pagination{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:22px;font-size:.8rem;color:var(--muted)}.egg-pagination .chip:disabled,.catalog-pagination .chip:disabled{opacity:.45}.catalog-content{min-width:0}.catalog-intro-text{color:var(--muted);line-height:1.8;margin-bottom:18px}.catalog-stages{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.catalog-stages .chip.selected{background:var(--green);border-color:var(--green);color:#fff}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.catalog-card{position:relative;display:block;width:100%;min-width:0;padding:11px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:15px;transition:transform .2s,box-shadow .2s}.catalog-card:hover,.catalog-card:focus-visible{transform:translateY(-2px);box-shadow:0 8px 22px #203d3514}.catalog-card .monster{width:100%;border-radius:10px}.catalog-card strong{display:block;margin-top:9px;font-size:.9rem}.catalog-card small{display:block;margin-top:4px;color:var(--muted);font-size:.75rem}.catalog-number{position:absolute;top:10px;right:11px;z-index:1;padding:3px 6px;background:#ffffffd9;border-radius:5px;color:var(--green);font-size:.7rem}.catalog-detail{display:grid;grid-template-columns:minmax(180px,270px) 1fr;gap:26px;align-items:center}.catalog-detail-art{min-width:0}.catalog-detail-art .monster{width:100%;border-radius:15px}.catalog-detail h3{font-size:1.35rem;margin:8px 0}.catalog-detail .catalog-stages{margin-top:22px}.catalog-detail-note{font-size:.8rem;color:var(--muted);line-height:1.8;margin-top:16px}.catalog-footer-note{margin-right:auto;color:var(--muted);font-size:.8rem}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:720px){.student-header-actions{gap:5px}.student-header-actions .button{padding:9px 10px;font-size:.8rem}.egg-toolbar,.catalog-toolbar{align-items:stretch;flex-direction:column;gap:9px}.egg-filter{justify-content:space-between}.egg-filter select{flex:1}.egg-count{align-self:flex-start}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-card{padding:8px;border-radius:12px}.catalog-card strong{font-size:.8rem}.catalog-stages{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-right:-4px}.catalog-stages .chip{flex:0 0 auto;font-size:.75rem}.catalog-detail{grid-template-columns:1fr;gap:17px}.catalog-detail-art{max-width:250px;width:100%;margin:auto}.catalog-detail h3{font-size:1.15rem}}
@media(max-width:720px){.egg-toolbar .search,.catalog-toolbar .search{flex:0 0 auto}}
/* User-supplied six-stage illustrations: display crops only; original PNGs are unchanged. */
.portrait-monster{position:relative;background:linear-gradient(145deg,#fafbf6,#eef3ec);isolation:isolate}
.portrait-position{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.portrait-frame{width:100%;height:100%;background-repeat:no-repeat;border-radius:14px;transform-origin:50% 80%;animation-delay:var(--idle-delay,0s)!important}
.portrait-float .portrait-frame{animation:portrait-float 4s ease-in-out infinite}
.portrait-sway .portrait-frame{animation:portrait-sway 3.5s ease-in-out infinite}
.portrait-bounce .portrait-frame{animation:portrait-bounce 3.1s ease-in-out infinite}
.portrait-breathe .portrait-frame{animation:portrait-breathe 3.8s ease-in-out infinite}
@keyframes portrait-float{0%,100%{transform:translateY(2%) rotate(-1deg)}50%{transform:translateY(-3%) rotate(1deg)}}
@keyframes portrait-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes portrait-bounce{0%,65%,100%{transform:translateY(0) scale(1)}72%{transform:scale(1.02,.98)}83%{transform:translateY(-4%) scale(.99,1.01)}}
@keyframes portrait-breathe{0%,100%{transform:scale(.98)}50%{transform:scale(1.015) translateY(-1%)}}
.motion-paused .portrait-frame,.page-hidden .portrait-frame{animation-play-state:paused!important}
.awaiting-egg{position:relative;background:#edf3ee;display:grid;place-items:center}
.unselected-egg{display:grid;place-items:center;width:44%;height:59%;border-radius:50% 50% 43% 43%;background:radial-gradient(circle at 30% 28%,#fff 0 8%,transparent 9%),linear-gradient(135deg,#d1e7d1,#a4cbb6);color:#48765f;font-size:clamp(10px,3vw,36px);box-shadow:inset -4px -5px 8px #54886c20}
.entry-companion{background:radial-gradient(circle at 40% 38%,#f1f9ed,#b5d6c1);display:grid;place-items:center}
.entry-companion::after{content:'✦';font-size:38px;color:#386b57}
@media(prefers-reduced-motion:reduce){.portrait-frame{animation:none!important}}