.spritesheet-tool-page{min-height:100vh;background:linear-gradient(170deg,var(--cream) 0%,var(--peach) 40%,var(--sky) 100%)}.tool-header{text-align:center;padding:2.5rem 1.5rem 1.5rem}.back-link{display:inline-block;margin-bottom:.8rem;color:var(--blue);text-decoration:none;font-weight:600;font-size:.9rem;padding:.3rem .8rem;border-radius:10px;transition:background .3s,transform .3s}.back-link:hover{background:#8cc0eb26;transform:translate(-2px)}.back-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.tool-header h1{font-family:Patrick Hand,cursive;font-size:2.4rem;color:var(--text-dark);letter-spacing:1px}.tool-header p{font-size:.95rem;margin-top:.3rem;opacity:.8}.card{background:#ffffffbf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:18px;padding:1.4rem;border:2px solid rgba(191,221,240,.35);box-shadow:0 8px 32px #8cc0eb26}.card h3{font-family:Patrick Hand,cursive;font-size:1.25rem;color:var(--text-dark);margin-bottom:.8rem}.btn-primary{width:100%;padding:.7rem 1.2rem;border:none;border-radius:14px;font-family:Quicksand,sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;background:linear-gradient(135deg,var(--blue),#6aaddf);color:var(--white);box-shadow:0 4px 14px #8cc0eb4d;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px #8cc0eb59}.btn-primary:active{transform:translateY(0)}.btn-primary:focus-visible{outline:2px solid var(--text-dark);outline-offset:2px}.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-small{padding:.35rem .8rem;border:2px solid rgba(191,221,240,.35);border-radius:10px;background:#fff9;font-family:Quicksand,sans-serif;font-weight:600;font-size:.8rem;color:var(--text-dark);cursor:pointer;transition:background .3s,transform .3s}.btn-small:hover{background:#ffffffe6;transform:translateY(-1px)}.btn-small:active{transform:translateY(0)}.btn-small:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.btn-accent{padding:.4rem 1rem;border:none;border-radius:10px;background:linear-gradient(135deg,var(--blue),#6aaddf);color:var(--white);font-family:Quicksand,sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;box-shadow:0 3px 10px #8cc0eb40;transition:transform .3s,box-shadow .3s}.btn-accent:hover{transform:translateY(-1px);box-shadow:0 5px 14px #8cc0eb59}.btn-accent:active{transform:translateY(0)}.btn-accent:focus-visible{outline:2px solid var(--text-dark);outline-offset:2px}.btn-accent:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-danger{border-color:#e070704d;color:#e07070}.btn-danger:hover{background:#e070701a}.btn-icon{width:36px;height:36px;border:2px solid rgba(191,221,240,.35);border-radius:10px;background:#fff9;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .3s,transform .3s;color:var(--text-dark)}.btn-icon:hover{background:#fffffff2;transform:translateY(-1px)}.btn-icon:active{transform:translateY(0)}.btn-icon:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.spritesheet-tool-page input[type=number],.spritesheet-tool-page input[type=text],.spritesheet-tool-page select{padding:.5rem .7rem;border:2px solid rgba(191,221,240,.35);border-radius:10px;background:#ffffffd9;font-family:Quicksand,sans-serif;font-size:.85rem;font-weight:600;color:var(--text-dark);transition:border-color .3s,box-shadow .3s}.spritesheet-tool-page input[type=number]:focus,.spritesheet-tool-page input[type=text]:focus,.spritesheet-tool-page select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #8cc0eb26}.spritesheet-tool-page input[type=number]{width:70px;text-align:center}.upload-zone{max-width:600px;margin:1rem auto 2rem;padding:4rem 2rem;background:#ffffffbf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:3px dashed var(--blue);border-radius:18px;text-align:center;cursor:pointer;transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s}.upload-zone:hover,.upload-zone.dragover{transform:translateY(-4px);border-color:var(--text-dark);background:#ffffffd9}.upload-zone .upload-icon{font-size:3.5rem;margin-bottom:.8rem;display:block}.upload-zone h2{font-family:Patrick Hand,cursive;font-size:1.5rem;color:var(--text-dark)}.upload-zone p{font-size:.9rem;margin-top:.3rem;opacity:.7}.hidden{display:none!important}.editor{max-width:1100px;margin:0 auto;padding:0 1.5rem 3rem}.editor-main{display:grid;grid-template-columns:1fr 280px;gap:1.2rem;margin-bottom:1.2rem}.video-area{display:flex;flex-direction:column;gap:1rem}.video-wrapper{position:relative;background:#1e2837;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:200px}.video-wrapper video{display:block;max-width:100%}.video-wrapper canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:crosshair}.capture-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none;z-index:10}.capture-flash.active{animation:flashCapture .3s ease-out}@keyframes flashCapture{0%{opacity:.7}to{opacity:0}}.video-controls{background:#ffffffbf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:14px;padding:.8rem 1rem;border:2px solid rgba(191,221,240,.35)}.controls-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}.frame-info,.time-info{font-size:.8rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}.time-info{margin-left:auto}.seekbar-container{position:relative;height:20px;display:flex;align-items:center}.mark-range{position:absolute;top:50%;transform:translateY(-50%);height:8px;background:#8cc0eb59;border-radius:4px;pointer-events:none;z-index:0}.seekbar-container input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:#bfddf066;outline:none;position:relative;z-index:1;border:none;padding:0}.seekbar-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--blue);border:2px solid var(--white);cursor:pointer;box-shadow:0 2px 8px #8cc0eb59;transition:transform .2s}.seekbar-container input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.auto-capture h3{margin-bottom:.6rem}.auto-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap}.auto-row:last-child{margin-bottom:0}.auto-row label{font-size:.85rem;font-weight:600}.mark-label{font-size:.78rem;font-weight:600;color:var(--blue);min-width:50px}.controls-area{display:flex;flex-direction:column;gap:1rem}.setting-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}.setting-row:last-of-type{margin-bottom:1rem}.setting-row label{font-size:.85rem;font-weight:600}.size-inputs{display:flex;align-items:center;gap:.3rem}.size-inputs span{font-weight:700;color:var(--text)}.size-inputs input{width:60px}.checkbox-row{display:flex;align-items:center;gap:.4rem}.checkbox-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}.live-preview-wrap{display:flex;align-items:center;justify-content:center}.live-preview-wrap canvas{border-radius:12px;border:2px solid rgba(191,221,240,.35);background:repeating-conic-gradient(rgba(0,0,0,.06) 0% 25%,transparent 0% 50%) 50% / 16px 16px;image-rendering:pixelated;max-width:100%}.frames-section{margin-bottom:1.2rem}.frames-header{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}.frames-header h3{margin-bottom:0}.frame-count{font-size:.8rem;font-weight:600;color:var(--blue);background:#8cc0eb1f;padding:.2rem .6rem;border-radius:8px}.frames-header .btn-small{margin-left:auto}.frames-list{display:flex;gap:.6rem;flex-wrap:wrap;min-height:60px}.frames-empty{width:100%;text-align:center;padding:1.5rem;font-size:.85rem;opacity:.5;font-style:italic}.frame-thumb{position:relative;border-radius:12px;overflow:hidden;border:3px solid rgba(191,221,240,.35);cursor:grab;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;background:repeating-conic-gradient(rgba(0,0,0,.06) 0% 25%,transparent 0% 50%) 50% / 12px 12px}.frame-thumb:hover{transform:translateY(-4px);box-shadow:0 8px 20px #8cc0eb40;border-color:var(--blue)}.frame-thumb.dragging{opacity:.4;transform:scale(.95)}.frame-thumb.drag-over{border-color:var(--text-dark);box-shadow:0 0 0 3px #8cc0eb4d}.frame-thumb img{display:block;width:80px;height:80px;object-fit:contain;image-rendering:pixelated}.frame-thumb .frame-label{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.7rem;font-weight:700;background:#3d4f5fb3;color:var(--white);padding:.15rem}.frame-thumb .frame-delete{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:#e07070d9;color:#fff;font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.frame-thumb:hover .frame-delete{opacity:1}.frame-thumb .frame-delete:hover{background:#e07070}.output-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.output-header h3{margin-bottom:0}.output-content{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:start}.spritesheet-preview{overflow-x:auto;padding:1rem;background:repeating-conic-gradient(rgba(0,0,0,.06) 0% 25%,transparent 0% 50%) 50% / 16px 16px;border-radius:12px;border:2px solid rgba(191,221,240,.35);min-height:80px;display:flex;align-items:center;justify-content:center}.spritesheet-empty{font-size:.85rem;opacity:.5;font-style:italic}.spritesheet-info{font-size:.75rem;font-weight:600;color:var(--text);margin-top:.5rem;text-align:center}.anim-preview-area{text-align:center;min-width:160px}.anim-preview-area h4{font-size:.85rem;font-weight:700;color:var(--text-dark);margin-bottom:.5rem}.anim-preview-area canvas{border-radius:12px;border:2px solid rgba(191,221,240,.35);background:repeating-conic-gradient(rgba(0,0,0,.06) 0% 25%,transparent 0% 50%) 50% / 12px 12px;image-rendering:pixelated}.anim-controls{display:flex;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.8rem;font-weight:600}.anim-controls label{white-space:nowrap}.anim-controls input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80px;height:4px;border-radius:2px;background:#bfddf080;outline:none;border:none;padding:0}.anim-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--blue);border:2px solid white;cursor:pointer}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%) translateY(80px);background:#3d4f5feb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:.65rem 1.4rem;border-radius:12px;font-weight:600;font-size:.9rem;z-index:1000;opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s;pointer-events:none}.toast.show{transform:translate(-50%) translateY(0);opacity:1}@media(max-width:800px){.editor-main,.output-content{grid-template-columns:1fr}.anim-preview-area{display:flex;flex-direction:column;align-items:center}.frame-thumb img{width:64px;height:64px}}:root{--cream: #FFF9D2;--peach: #FFEBCC;--sky: #BFDDF0;--blue: #8CC0EB;--text: #5a6a7a;--text-dark: #3d4f5f;--white: #ffffff;--card-shadow: 0 8px 32px rgba(140, 192, 235, .18)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Quicksand,sans-serif;color:var(--text);background:var(--cream);overflow-x:hidden}.particles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.particle{position:absolute;border-radius:50%;opacity:0;animation:floatUp linear infinite}@keyframes floatUp{0%{opacity:0;transform:translateY(100vh) scale(0) rotate(0)}10%{opacity:.7}90%{opacity:.5}to{opacity:0;transform:translateY(-10vh) scale(1) rotate(360deg)}}.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}.reveal.visible{opacity:1;transform:translateY(0)}nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;display:flex;justify-content:center;gap:2rem;background:#fff9d2d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:2px solid rgba(191,221,240,.3);transition:box-shadow .3s}nav.scrolled{box-shadow:0 4px 20px #8cc0eb26}nav a{text-decoration:none;color:var(--text);font-weight:600;font-size:.95rem;padding:.4rem 1rem;border-radius:20px;transition:color .3s ease,background .3s ease;position:relative;cursor:pointer}nav a:after{content:"";position:absolute;bottom:0;left:50%;right:50%;height:2px;background:var(--blue);border-radius:2px;transition:left .3s ease,right .3s ease}nav a:hover{color:var(--text-dark);background:#bfddf04d}nav a:hover:after{left:20%;right:20%}.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6rem 2rem 4rem;background:linear-gradient(170deg,var(--cream) 0%,var(--peach) 35%,var(--sky) 70%,var(--blue) 100%);overflow:hidden}.hero-glow{position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(80px);opacity:.4;animation:glowPulse 6s ease-in-out infinite alternate}.hero-glow.g1{background:var(--peach);top:10%;left:10%}.hero-glow.g2{background:var(--sky);bottom:10%;right:10%;animation-delay:3s}@keyframes glowPulse{0%{transform:scale(1);opacity:.3}to{transform:scale(1.3);opacity:.5}}.hero-portrait{position:relative;z-index:2;width:280px;height:280px;border-radius:50%;overflow:hidden;border:5px solid var(--white);box-shadow:0 0 0 8px #8cc0eb40,0 20px 60px #8cc0eb4d;animation:portraitFloat 5s ease-in-out infinite;cursor:pointer;transition:transform .3s ease}.hero-portrait:hover{animation-play-state:paused;transform:scale(1.05)}.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:0% 40%}@keyframes portraitFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.hero-sparkle{position:absolute;z-index:3;font-size:1.5rem;animation:sparkle 2s ease-in-out infinite;pointer-events:none}.hero-sparkle:nth-child(1){top:5%;left:0%;animation-delay:.3s}.hero-sparkle:nth-child(2){top:15%;right:-5%;animation-delay:.8s}.hero-sparkle:nth-child(3){bottom:10%;left:-5%;animation-delay:1.2s}.hero-sparkle:nth-child(4){bottom:5%;right:5%;animation-delay:.5s}@keyframes sparkle{0%,to{opacity:.3;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(20deg)}}.hero-text{position:relative;z-index:2;text-align:center;margin-top:2rem}.hero-text h1{font-family:Patrick Hand,cursive;font-size:3.5rem;color:var(--text-dark);letter-spacing:2px;animation:titlePop 1s cubic-bezier(.22,1,.36,1) forwards;opacity:0}.hero-text .subtitle{font-size:1.15rem;color:var(--text);margin-top:.5rem;font-weight:500;opacity:0;animation:fadeSlideUp 1s .4s cubic-bezier(.22,1,.36,1) forwards}.hero-text .server-tag{display:inline-block;margin-top:1rem;padding:.4rem 1.2rem;background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px;font-size:.9rem;font-weight:600;color:var(--blue);border:2px solid rgba(140,192,235,.3);opacity:0;animation:fadeSlideUp 1s .7s cubic-bezier(.22,1,.36,1) forwards}@keyframes titlePop{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.scroll-indicator{position:absolute;bottom:2rem;z-index:2;animation:bounce 2s ease-in-out infinite;color:var(--text);font-size:.85rem;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:.3rem;opacity:.6}.scroll-indicator svg{width:24px;height:24px;stroke:var(--text)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(8px)}}section{position:relative;z-index:1;padding:5rem 2rem}.section-title{font-family:Patrick Hand,cursive;font-size:2.2rem;color:var(--text-dark);text-align:center;margin-bottom:.5rem}.section-divider{width:60px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--peach),var(--blue));margin:0 auto 3rem}.about{background:linear-gradient(180deg,var(--blue) 0%,var(--sky) 30%,var(--cream) 100%)}.about-grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.about-card{background:#ffffffbf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:20px;padding:1.8rem;border:2px solid rgba(191,221,240,.3);box-shadow:var(--card-shadow);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease}.about-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px #8cc0eb40}.about-card .icon{margin-bottom:.8rem;display:inline-block;animation:wiggle 3s ease-in-out infinite;width:52px;height:52px}.about-card .icon svg{width:100%;height:100%;display:block}.about-card:nth-child(2) .icon{animation-delay:.5s}.about-card:nth-child(3) .icon{animation-delay:1s}.about-card:nth-child(4) .icon{animation-delay:1.5s}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}.about-card h3{font-size:1.1rem;color:var(--text-dark);margin-bottom:.5rem;font-weight:700}.about-card p{font-size:.95rem;line-height:1.6}.about-full{grid-column:1 / -1;text-align:center}.gallery{background:linear-gradient(180deg,var(--cream) 0%,var(--peach) 50%,var(--sky) 100%)}.gallery-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.gallery-item{position:relative;border-radius:20px;overflow:hidden;border:4px solid var(--white);box-shadow:var(--card-shadow);cursor:pointer;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}.gallery-item:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 20px 60px #8cc0eb4d}.gallery-item:nth-child(2n):hover{transform:translateY(-8px) rotate(1deg)}.gallery-item.featured{grid-column:1 / -1}.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}.gallery-item:hover img{transform:scale(1.06)}.gallery-item .caption{position:absolute;bottom:0;left:0;right:0;padding:1.5rem 1.2rem 1rem;background:linear-gradient(transparent,#3d4f5fb3);color:var(--white);font-weight:600;font-size:.95rem;transform:translateY(100%);transition:transform .4s cubic-bezier(.22,1,.36,1)}.gallery-item:hover .caption{transform:translateY(0)}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#1e2837e6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease}.lightbox.active{opacity:1;pointer-events:auto}.lightbox img{max-width:90vw;max-height:85vh;border-radius:16px;box-shadow:0 20px 80px #0006;transform:scale(.9);transition:transform .4s cubic-bezier(.22,1,.36,1)}.lightbox.active img{transform:scale(1)}.lightbox-close{position:absolute;top:1.5rem;right:1.5rem;background:#ffffff26;border:none;color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:background .3s;display:flex;align-items:center;justify-content:center}.lightbox-close:hover{background:#ffffff4d}.lightbox-close:focus-visible{outline:2px solid var(--white);outline-offset:2px}.jobs{background:linear-gradient(180deg,var(--sky) 0%,var(--peach) 100%)}.jobs-categories{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:2rem}.job-category{background:#ffffff59;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:20px;padding:1.4rem 1.6rem;border:1px solid rgba(191,221,240,.25)}.job-category-title{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid rgba(191,221,240,.3)}.job-category-title.tank{color:#3d6fb5}.job-category-title.healer{color:#3a8f46}.job-category-title.melee,.job-category-title.ranged{color:#c74040}.job-category-title.magic{color:#7b5ea7}.job-category-title.crafter{color:#b08520}.job-category-title.gatherer{color:#2e7d6e}.jobs-grid{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-start}.job-badge{display:flex;align-items:center;gap:.55rem;padding:.6rem 1.1rem;background:#ffffffbf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;border:2px solid rgba(191,221,240,.3);box-shadow:var(--card-shadow);font-weight:600;font-size:.88rem;color:var(--text-dark);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1);cursor:default}.job-badge:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 36px #8cc0eb4d}.job-badge:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.job-badge .job-icon{display:inline-block;width:20px;height:20px;flex-shrink:0;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}.job-badge .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.job-badge .dot.tank{background:#3d6fb5}.job-badge .dot.healer{background:#4fad5b}.job-badge .dot.dps{background:#c74040}.job-badge .dot.magic{background:#7b5ea7}.job-badge .dot.crafter{background:#c49a3c}.job-badge .dot.gatherer{background:#2e9e84}.job-badge .job-level{font-size:.75rem;font-weight:700;color:#0006;margin-left:.1rem}.job-badge .job-level.max{color:#d4a017}.job-badge .job-level.limited{color:#7b5ea7}.job-badge.main{background:linear-gradient(135deg,var(--peach),var(--sky));border-color:var(--blue);position:relative}.job-badge.main:after{content:"★";position:absolute;top:-6px;right:-6px;font-size:1rem;color:#f0a030;animation:sparkle 2s ease-in-out infinite}.jobs-extra{max-width:900px;margin:2rem auto 0;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.jobs-extra-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ffffff80;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;border:1px solid rgba(191,221,240,.25);font-size:.8rem;font-weight:600;color:var(--text-dark)}.jobs-extra-badge .extra-label{opacity:.6;font-weight:500}.jobs-extra-badge .extra-level{color:#d4a017;font-weight:700}footer{background:linear-gradient(180deg,var(--cream),var(--peach));text-align:center;padding:2.5rem 2rem;color:var(--text);font-size:.85rem}footer .heart{display:inline-block;color:#e94560;animation:heartBeat 1.5s ease-in-out infinite}@keyframes heartBeat{0%,to{transform:scale(1)}15%{transform:scale(1.2)}30%{transform:scale(1)}45%{transform:scale(1.15)}}.ground-scene{position:fixed;bottom:0;left:0;right:0;height:200px;z-index:90;pointer-events:none}.ground-fade{position:absolute;top:0;left:0;right:0;height:70px;background:linear-gradient(to bottom,transparent,rgba(182,212,148,.1));z-index:0}.parallax-layer{position:absolute;left:0;will-change:transform}.cloud-layer{bottom:50px;width:6000px;height:160px;z-index:1}.cloud{position:absolute;bottom:0;height:auto;opacity:.85;filter:drop-shadow(0 4px 8px rgba(140,192,235,.15));animation:cloudBob 6s ease-in-out infinite}@keyframes cloudBob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.grass-layer{background:url(/Assets/grass.png) repeat-x bottom left;background-size:auto 100%;width:7500px;height:60px;bottom:8px;z-index:5}.ground-floor{position:absolute;bottom:0;left:0;right:0;height:16px;background:linear-gradient(to bottom,#7ab34a,#5a9a30);z-index:4}.char-sprite{position:absolute;bottom:14px;left:42%;z-index:6;width:100px;height:120px;will-change:transform}.char-canvas{display:block;width:100%;height:100%}.char-shadow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:70px;height:14px;background:radial-gradient(ellipse,rgba(0,0,0,.2) 0%,transparent 70%);border-radius:50%;z-index:-1}.char-sprite.idle{animation:charIdle 3s ease-in-out infinite}.char-sprite.idle .char-shadow{animation:shadowIdle 3s ease-in-out infinite}@keyframes charIdle{0%,to{transform:translateY(0) scaleX(var(--dir, 1))}30%{transform:translateY(0) scaleX(var(--dir, 1))}60%{transform:translateY(0) scaleX(var(--dir, 1))}}@keyframes shadowIdle{0%,to{transform:translate(-50%) scale(1);opacity:.8}30%{transform:translate(-50%) scale(.9);opacity:.6}60%{transform:translate(-50%) scale(.95);opacity:.7}}.char-sprite.walking{animation:charWalk .35s ease-in-out infinite}.char-sprite.walking .char-shadow{animation:shadowWalk .35s ease-in-out infinite}@keyframes charWalk{0%,to{transform:translateY(0) scaleX(var(--dir, 1))}50%{transform:translateY(-5px) scaleX(var(--dir, 1))}}@keyframes shadowWalk{0%,50%,to{transform:translate(-50%) scale(1);opacity:.7}25%,75%{transform:translate(-50%) scale(.7);opacity:.4}}.char-bubble{position:absolute;top:-20px;left:50%;transform:translate(-50%) scale(0) scaleX(var(--dir, 1));background:#ffffffeb;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:.35rem .7rem;border-radius:12px;font-size:.75rem;font-weight:600;color:var(--text-dark);white-space:nowrap;box-shadow:0 3px 12px #0000001a;transition:transform .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:10}.char-bubble:after{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:10px;height:10px;background:#ffffffeb;clip-path:polygon(0 0,100% 0,50% 100%)}.char-sprite.idle .char-bubble.show{transform:translate(-50%) scale(1) scaleX(var(--dir, 1))}footer{padding-bottom:10rem!important}@media(max-width:640px){.hero-portrait{width:200px;height:200px}.hero-text h1{font-size:2.5rem}.about-grid,.gallery-grid{grid-template-columns:1fr}nav{gap:.8rem;padding:.8rem 1rem}nav a{font-size:.82rem;padding:.3rem .7rem}.char-sprite{width:70px;height:84px;bottom:18px}.ground-scene{height:150px}}