:root{--ink:#211b32;--cream:#fff8db;--gold:#e9a23b;--orange:#c95b36;--night:#07162b}*{box-sizing:border-box}html{background:var(--night)}body{background:var(--night);color:var(--ink);image-rendering:pixelated;margin:0;font-family:Courier New,monospace;overflow:hidden}button,a{font:inherit}button{color:inherit}.rpg-shell{background:var(--night);flex-direction:column;height:100svh;min-height:620px;display:flex;overflow:hidden}.scanlines{z-index:50;pointer-events:none;opacity:.052;background:repeating-linear-gradient(0deg,#000 0 1px,#0000 1px 4px);position:fixed;inset:0}.topbar{height:70px;color:var(--cream);z-index:20;background:#18152a;border-bottom:4px solid #0c0b18;flex:0 0 70px;justify-content:space-between;align-items:center;padding:0 clamp(20px,5vw,76px);display:flex;position:relative}.brand{color:inherit;letter-spacing:2px;align-items:center;gap:13px;text-decoration:none;display:flex}.brand span{background:var(--gold);color:#352137;border:3px solid var(--cream);place-items:center;width:42px;height:42px;font-weight:900;display:grid;box-shadow:3px 3px #9b3f32}.brand b{font-size:17px}.status,.header-tag{letter-spacing:1px;font-size:10px}.status{color:#b9d79e}.status i{background:#77cb6b;width:8px;height:8px;margin-right:8px;animation:2.8s steps(2,end) infinite statusPulse;display:inline-block;box-shadow:0 0 8px #77cb6b}.header-tag{color:#b7af9c}.world{background:var(--night);isolation:isolate;flex:1;min-height:0;position:relative;overflow:hidden}.scene{z-index:-4;transform-origin:58% 55%;will-change:transform;animation:18s ease-in-out infinite alternate worldDrift;position:absolute;inset:-1.5%}.scene-base,.hero-idle{background:url(/hero-fantasy.png) 50%/cover no-repeat;position:absolute;inset:0}.hero-idle{z-index:2;will-change:transform}.hero-staff{clip-path:polygon(73% 43%,77.5% 43%,78.5% 88%,73.5% 88%);transform-origin:76% 87%;animation:3.8s ease-in-out infinite staffIdle}.hero-body{clip-path:polygon(80% 47%,85% 48%,87% 56%,89% 68%,90% 81%,87% 90%,78% 89%,75% 78%,75% 64%,78% 54%);transform-origin:83% 88%;animation:3.8s ease-in-out infinite heroIdle}.world-shade{z-index:-2;background:linear-gradient(90deg,#040e1ea8 0%,#040e1e61 37%,#040e1e14 63%,#040e1e03 80%),linear-gradient(#0000 68%,#070b1899);position:absolute;inset:0}.star{z-index:4;background:#fff3bf;width:3px;height:3px;animation:3.1s steps(2,end) infinite twinkle;position:absolute;box-shadow:0 0 7px 2px #ffde808c}.star-one{animation-delay:-.4s;top:7%;left:24%}.star-two{animation-delay:-1.8s;top:13%;left:43%}.star-three{animation-delay:-2.4s;top:8%;left:58%}.star-four{animation-delay:-.9s;top:16%;left:69%}.star-five{animation-delay:-2.8s;top:9%;left:91%}.waterfall{z-index:3;opacity:.18;mix-blend-mode:screen;filter:blur(.2px);background:repeating-linear-gradient(#a4deff00 0 5px,#b5e6ffb8 6px 9px,#539dd72e 10px 15px) 0 0/100% 30px;animation:1.1s linear infinite waterRun;position:absolute;overflow:hidden}.waterfall:after{content:"";background:linear-gradient(90deg,#0000,#e5f8ffcc,#0000);animation:4.2s ease-in-out infinite waterShine;position:absolute;inset:0}.waterfall-one{width:3.2%;height:11%;top:49%;left:66.7%;transform:skew(-5deg)}.waterfall-two{width:3.3%;height:11%;animation-delay:-.45s;top:49%;left:83.2%;transform:skew(-3deg)}.waterfall-three{width:3.2%;height:11%;animation-delay:-.8s;top:62%;left:62.6%;transform:skew(-5deg)}.waterfall-four{width:3.2%;height:10%;animation-delay:-.25s;top:65%;left:69.5%;transform:skew(-5deg)}.mist{z-index:4;filter:blur(7px);background:radial-gradient(#b7dce133,#0000 70%);border-radius:50%;width:26%;height:9%;animation:12s ease-in-out infinite alternate mistDrift;position:absolute}.mist-one{top:69%;left:51%}.mist-two{animation-duration:15s;animation-delay:-6s;top:57%;left:64%}.staff-glow{z-index:5;aspect-ratio:1;filter:blur(1px);mix-blend-mode:screen;background:radial-gradient(circle,#fff1a0 0 12%,#f5a933 25%,#ee6a204d 48%,#0000 72%);border-radius:50%;width:2.4%;animation:1.7s steps(4,end) infinite staffGlow;position:absolute;top:45.5%;left:75.15%}.hero-copy{z-index:6;width:min(680px,58vw);height:100%;color:var(--cream);text-shadow:4px 4px #2c1e2f8c;flex-direction:column;justify-content:center;padding:clamp(34px,7vh,78px) 0 68px clamp(24px,8vw,128px);display:flex;position:relative}.kicker{color:#ffe27a;letter-spacing:4px;margin:0 0 13px;font-size:11px}.hero-copy h1{letter-spacing:2px;margin:0;font-family:Impact,Arial Black,sans-serif;font-size:clamp(44px,6.1vw,88px);font-weight:900;line-height:.9}.hero-copy h1 span{color:#ffd46b}.intro{text-shadow:2px 2px #3c3d45;margin:18px 0;font-size:clamp(12px,1.1vw,16px);line-height:1.55}.level-card{border:3px solid var(--cream);background:#24223af0;align-items:center;gap:14px;width:min(100%,390px);padding:9px 13px;display:flex;box-shadow:6px 6px #181526}.avatar{background:#d87a45;border:3px solid #f4c15d;place-items:center;width:45px;height:45px;font-size:27px;display:grid}.level-card div{flex:1;gap:4px;display:grid}.level-card b{letter-spacing:2px;font-size:12px}.level-card small{color:#cbc3ac;font-size:8px}.level-card i{background:#11101f;border:1px solid #8a806f;height:7px}.level-card u{background:#e9a23b;width:74%;height:100%;text-decoration:none;display:block}.main-menu{width:min(100%,570px);text-shadow:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:17px;display:grid}.main-menu button{text-align:left;cursor:pointer;background:#efe2b7f2;border:3px solid #6d493c;grid-template-columns:32px 1fr 12px;align-items:center;gap:7px;min-height:52px;padding:5px 10px;transition:transform .12s,background .12s;display:grid;box-shadow:3px 3px #171525}.main-menu button:hover,.main-menu button:focus-visible{outline-offset:2px;background:#fff4cc;outline:3px solid #ffe27a;transform:translateY(-3px)}.main-menu button:active{transform:translate(2px,2px);box-shadow:1px 1px #171525}.main-menu button span{border:2px solid var(--ink);background:#d69542;place-items:center;width:29px;height:29px;font-size:18px;display:grid}.main-menu button b{letter-spacing:.7px;text-transform:uppercase;font-size:9px}.main-menu button i{font-size:18px;font-style:normal}.world-footer{z-index:7;color:#bcb4a2;letter-spacing:1px;text-shadow:2px 2px #151325;justify-content:space-between;font-size:8px;display:flex;position:absolute;bottom:18px;left:clamp(24px,4vw,62px);right:clamp(24px,4vw,62px)}.world-footer b{color:#e2bd6c}.panel-backdrop{z-index:30;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#070a17a8;place-items:center;padding:28px;animation:.18s ease-out backdropIn;display:grid;position:fixed;inset:70px 0 0}.panel{background:var(--cream);border:5px solid var(--ink);outline:3px solid #b77a47;width:min(720px,92vw);max-height:calc(100svh - 126px);padding:34px 40px 25px;animation:.2s ease-out panelIn;position:relative;overflow:auto;box-shadow:10px 10px #0c0a178c}.panel-close{color:#fff3ce;border:3px solid var(--ink);cursor:pointer;background:#29344c;place-items:center;width:36px;height:36px;font:24px/1 Courier New,monospace;display:grid;position:absolute;top:14px;right:16px;box-shadow:3px 3px #d77c42}.panel-close:hover,.panel-close:focus-visible{background:#b5523a;outline:3px solid #fff}.panel-heading{align-items:center;gap:20px;padding-right:48px;display:flex}.panel-icon{border:4px solid var(--ink);background:#d77c42;flex:0 0 64px;place-items:center;width:64px;height:64px;font-size:35px;display:grid;box-shadow:4px 4px #eab04f}.panel-heading p{color:#9d4e39;letter-spacing:3px;margin:0 0 5px;font-size:10px;font-weight:700}.panel h2{text-transform:uppercase;letter-spacing:1px;margin:0;font-family:Impact,Arial Black,sans-serif;font-size:clamp(24px,3vw,38px)}.rule{background:var(--ink);height:7px;margin:22px 0;position:relative}.rule i{background:#d87a45;width:13px;height:13px;position:absolute;top:-3px;right:0;transform:rotate(45deg)}.panel-body{min-height:180px;font-family:Georgia,serif;font-size:16px;line-height:1.62}.panel-body>p{margin-top:0}.dialogue{background:#ead79c;border-left:6px solid #c25f3e;margin-top:22px;padding:15px 17px;font-style:italic}.dialogue span{color:#9b4a36;font-family:Courier New,monospace;font-size:11px;font-style:normal;font-weight:700}.panel-nav{color:#7f6e5b;letter-spacing:1px;justify-content:space-between;align-items:center;gap:15px;margin-top:18px;font-size:8px;display:flex}.panel-nav p{margin:0}.panel-nav p span{margin:0 5px}.panel-nav div{gap:7px;display:flex}.panel-nav button{cursor:pointer;background:#c7ad74;border:2px solid #5e4938;width:10px;height:10px;padding:0}.panel-nav button.active{background:#c95b36;box-shadow:0 0 0 2px #f1d79a}.skill-list{gap:14px;display:grid}.skill-list div{text-transform:uppercase;grid-template-columns:190px 1fr;align-items:center;font-family:Courier New,monospace;font-size:11px;font-weight:700;display:grid}.skill-list i{border:2px solid var(--ink);background:#d2bb82;height:14px;position:relative}.skill-list i:after{content:"";width:var(--level);background:repeating-linear-gradient(90deg,#c95b36 0 14px,#e9a23b 14px 17px);height:100%;display:block}.quest-list{gap:10px;display:grid}.quest-list p{background:#ead79c;border:2px solid #6d493c;grid-template-columns:110px 1fr auto;align-items:center;gap:12px;margin:0;padding:12px;display:grid}.quest-list b,.quest-list em{font-family:Courier New,monospace;font-size:9px;font-style:normal}.quest-list em{color:#a94d35}.game-list{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.game-list span{text-align:center;color:#fff3ce;text-transform:uppercase;background:#29344c;border:3px solid #6d493c;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:92px;padding:12px 10px;font:700 10px/1.35 Courier New,monospace;display:flex;box-shadow:3px 3px #d77c42}.game-list b{width:24px;height:24px;color:var(--ink);background:#d69542;border:2px solid #fff3ce;place-items:center;font-size:8px;display:grid}.pixel-button{color:#fff3ce;border:3px solid var(--ink);background:#29344c;align-items:center;gap:20px;margin-top:12px;padding:13px 17px;font-family:Courier New,monospace;font-size:11px;font-weight:700;text-decoration:none;display:inline-flex;box-shadow:4px 4px #d77c42}.pixel-button:hover{transform:translate(2px,2px);box-shadow:2px 2px #d77c42}.placeholder-note{color:#8c7159;margin-top:12px;font:9px Courier New,monospace;display:block}@keyframes worldDrift{0%{transform:scale(1.015)translate(-.25%)}to{transform:scale(1.035)translate(.3%,-.3%)}}@keyframes heroIdle{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-2px)rotate(-.08deg)}}@keyframes staffIdle{0%,to{transform:rotate(0)}50%{transform:rotate(.18deg)translateY(-1px)}}@keyframes twinkle{0%,to{opacity:.18;transform:scale(.65)}50%{opacity:1;transform:scale(1.7)}}@keyframes waterRun{to{background-position:0 30px}}@keyframes waterShine{0%,to{opacity:.2;transform:translate(-100%)}50%{opacity:.65;transform:translate(100%)}}@keyframes mistDrift{0%{opacity:.25;transform:translate(-5%)scale(.9)}to{opacity:.58;transform:translate(18%)scale(1.12)}}@keyframes staffGlow{0%,to{opacity:.72;transform:scale(.9)}50%{opacity:1;transform:scale(1.35)}}@keyframes statusPulse{50%{opacity:.45}}@keyframes backdropIn{0%{opacity:0}}@keyframes panelIn{0%{opacity:.35;transform:translateY(10px)scale(.985)}}@media (max-width:900px){.hero-copy{width:min(690px,75vw);padding-left:clamp(24px,6vw,58px)}.world-shade{background:linear-gradient(90deg,#040e1ebf,#040e1e6b 55%,#040e1e0f),linear-gradient(#0000 60%,#070b18a3)}}@media (max-width:680px){.rpg-shell{min-height:560px}.topbar{flex-basis:60px;height:60px;padding-inline:16px}.brand span{width:37px;height:37px}.brand b{font-size:13px}.status{display:none}.header-tag{font-size:8px}.scene-base,.hero-idle{background-position:68%}.hero-staff,.hero-body{display:none}.waterfall,.mist,.staff-glow{opacity:.12}.hero-copy{justify-content:flex-start;width:100%;padding:35px 18px 55px}.kicker{margin-bottom:10px;font-size:9px}.hero-copy h1{font-size:clamp(38px,12vw,57px)}.intro{margin:13px 0;font-size:11px}.level-card{width:330px;max-width:100%;padding:7px 9px}.avatar{width:39px;height:39px;font-size:23px}.main-menu{grid-template-columns:repeat(5,1fr);gap:5px;width:100%;margin-top:auto}.main-menu button{text-align:center;flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:4px;display:flex}.main-menu button span{width:28px;height:25px;font-size:16px}.main-menu button b{font-size:7px}.main-menu button i{display:none}.world-footer{bottom:10px;left:18px;right:18px}.world-footer b{display:none}.panel-backdrop{padding:14px;inset:60px 0 0}.panel{width:100%;max-height:calc(100svh - 88px);padding:27px 20px 20px}.panel-heading{gap:13px;padding-right:35px}.panel-icon{flex-basis:52px;width:52px;height:52px;font-size:29px}.panel-heading p{font-size:8px}.panel h2{font-size:24px}.panel-close{width:31px;height:31px;top:10px;right:10px}.panel-body{min-height:150px;font-size:14px}.skill-list div{grid-template-columns:1fr;gap:5px}.quest-list p{grid-template-columns:1fr;gap:4px}.game-list{grid-template-columns:1fr}.game-list span{text-align:left;flex-direction:row;justify-content:flex-start;min-height:58px}.panel-nav p{display:none}.panel-nav{justify-content:flex-end}}@media (max-height:700px) and (min-width:681px){.topbar{flex-basis:60px;height:60px}.hero-copy{padding-top:20px;padding-bottom:42px}.hero-copy h1{font-size:clamp(40px,5.3vw,68px)}.intro{margin:12px 0}.level-card{padding-block:6px}.main-menu{margin-top:11px}.main-menu button{min-height:46px}.world-footer{bottom:9px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.scene{transform:none}.hero-idle{display:none}}