:root{color-scheme:dark;--gold:#d4b77e}*{box-sizing:border-box}body{margin:0;background:#101a20;color:#f3e8cc;font-family:"Songti TC",Georgia,serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #ffe1a4;outline-offset:5px}[hidden]{display:none!important}.screen{position:relative;min-height:100svh;overflow:hidden;background:#667172 url('assets/courtyard.png') center/cover no-repeat}.screen:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 110px #07151bc0;pointer-events:none;z-index:1}.veil{position:absolute;inset:0;background:linear-gradient(#06131b55,#06131b33 40%,#06131be0)}.start-content{position:relative;z-index:2;text-align:center;padding-top:22vh}.kicker{font-size:14px;letter-spacing:.4em;color:var(--gold)}h1{font-size:clamp(58px,9vw,132px);font-weight:400;letter-spacing:-.055em;margin:12px 0;text-shadow:0 3px 15px #000}h1 span{color:var(--gold)}.ornament{color:var(--gold);margin:20px auto;display:flex;align-items:center;justify-content:center;gap:22px}.ornament:before,.ornament:after{content:'';width:100px;height:1px;background:#d4b77e88}.subtitle{letter-spacing:.2em;font-size:17px;color:#e4dac3;margin:24px 0 48px}.gold{color:#f9e8bf;background:linear-gradient(#554426dd,#28271fe8);border:1px solid #bd9c60;box-shadow:inset 0 0 0 3px #15191a70,0 5px 20px #0004;padding:16px 40px;letter-spacing:.15em;transition:.2s}.gold:hover{background:#846437;box-shadow:0 0 22px #e7bd6544;transform:translateY(-2px)}.bottom-note{position:absolute;bottom:25px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.25em;color:#bbb5a5;z-index:2}header{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:22px 4vw;text-align:center;background:linear-gradient(#08131cd9,transparent)}header h2{font-size:25px;font-weight:400;letter-spacing:.15em;margin:9px}header .kicker{margin:0;font-size:12px}.quiet{border:1px solid #c5b58a55;background:#101d24bd;color:#e0d1ad;padding:10px 17px;font-size:14px}.step{font:18px Georgia;color:#cbb889}.lineup{position:relative;width:min(1300px,100%);height:calc(100svh - 280px);min-height:360px;margin:auto}.hero{position:absolute;bottom:5%;width:24%;height:90%;border:0;background:none;padding:0;transform-origin:50% 95%;transition:transform .3s,filter .3s;filter:brightness(.66) saturate(.7);z-index:2}.hero canvas{width:100%;height:100%;object-fit:contain;pointer-events:none}.hero span{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#f8e8c1;text-shadow:0 2px 7px black;font-size:16px;letter-spacing:.12em;opacity:.65}.hero:nth-child(1){left:36%;bottom:0;height:100%;width:28%;z-index:4}.hero:nth-child(2){left:17%;bottom:9%;height:85%}.hero:nth-child(3){left:60%;bottom:8%;height:87%}.hero:nth-child(4){left:0;bottom:16%;height:76%;width:24%;z-index:1}.hero:nth-child(5){left:61%;bottom:12%;height:135%;width:60%;z-index:1}.hero:hover,.hero.active,.hero:focus-visible{filter:brightness(1.12) saturate(1.05) drop-shadow(0 0 14px #f7d690);transform:scale(1.06);z-index:6}.hero.active span,.hero:hover span{opacity:1}.select-bottom{position:relative;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 7vw;background:linear-gradient(transparent,#09151cee 25%);min-height:150px}.select-bottom small{color:var(--gold);font-size:14px}.select-bottom h3{font-size:30px;letter-spacing:.14em;font-weight:400;margin:8px 0}form{width:min(460px,55%)}label{display:block;font-size:14px;color:#e4ce9e;margin-bottom:8px}.name-row{display:flex;gap:10px}input{min-width:0;flex:1;background:#101b21d9;border:1px solid #b69a6355;color:#fff3dc;padding:12px;font-size:16px}.name-row .gold{padding:12px 20px;white-space:nowrap}#name-error{font-size:12px;margin:8px 0 0;color:#c9c0ae}#field{position:absolute;inset:0;touch-action:none;outline:none;cursor:crosshair}.hud{position:absolute;z-index:5;left:28px;top:25px;display:flex;align-items:center;gap:18px;background:#0d1a23e0;border:1px solid #baa17480;padding:12px 26px 12px 12px;box-shadow:0 6px 25px #0005;pointer-events:none}.hud img{width:90px;height:90px;object-fit:cover;object-position:top;border:1px solid #b49c6d}.hud h2{font-size:24px;margin:7px 0;font-weight:400}.hud small{color:#ddbd78;font-size:14px}.hud span{font-size:13px;color:#b5b8b4}.location{position:absolute;right:35px;top:25px;text-align:right;z-index:3;text-shadow:0 2px 7px #000}.location small{font-size:12px;letter-spacing:.2em;color:#d6bd8f}.location h3{font-size:24px;font-weight:400;letter-spacing:.2em;margin:7px}.world-back{position:absolute;right:32px;bottom:30px;z-index:5}#player{position:absolute;width:100px;height:120px;transform:translate(-50%,-100%);z-index:3;pointer-events:none}#sprite{position:relative;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;z-index:2}#player i{position:absolute;bottom:1px;left:20%;width:60%;height:10px;background:#18211d60;border-radius:50%;filter:blur(3px)}#player-label{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:14px;white-space:nowrap;text-shadow:0 2px 3px black;background:#14222a88;padding:3px 10px;border-radius:2px}#player.walking canvas{animation:walk .22s steps(2) infinite}#player.left canvas{scale:-1 1}@keyframes walk{50%{translate:0 -4px;rotate:1deg}}#destination{position:absolute;width:20px;height:10px;border:2px solid #f0d699;border-radius:50%;transform:translate(-50%,-50%);opacity:.8}.movement-help{position:absolute;bottom:32px;left:30px;z-index:4;font-size:14px;text-shadow:0 2px 5px black;color:#fff0cb}.dpad{display:none;position:absolute;bottom:70px;left:20px;z-index:8;text-align:center}.dpad button{width:45px;height:45px;border:1px solid #c0aa79;background:#101e26bd;color:#f0ddb5;touch-action:none}.dpad>button{margin-bottom:3px}.dpad div{display:flex;gap:3px}@media(max-width:760px){header{padding:16px}.lineup{min-height:360px;height:52svh}.hero{width:30%}.hero:nth-child(1){left:32%;width:36%;height:92%}.hero:nth-child(2){left:10%;width:32%;height:78%;bottom:12%}.hero:nth-child(3){left:59%;width:32%;height:78%;bottom:12%}.hero:nth-child(4){left:0;width:29%;height:60%;bottom:34%}.hero:nth-child(5){left:58%;width:64%;height:105%;bottom:25%}.hero span{font-size:12px}.select-bottom{padding:18px;display:block}.select-bottom h3{font-size:23px}form{width:100%;margin-top:18px}.hud{top:15px;left:15px;padding:8px 15px 8px 8px;gap:10px}.hud img{width:60px;height:60px}.hud h2{font-size:19px}.location{top:115px;right:20px}.dpad{display:block}.movement-help{font-size:12px;bottom:20px;left:20px;max-width:55%}.world-back{right:20px;bottom:20px}#player{width:80px;height:100px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.monster{position:absolute;width:66px;height:70px;transform:translate(-50%,-100%);border:0;background:none;z-index:4;padding:0;cursor:crosshair}.monster img{width:60px;height:55px;object-fit:contain;image-rendering:pixelated;pointer-events:none;animation:slime 1.4s ease-in-out infinite}.monster .hp{display:block;height:5px;background:#253c32;border:1px solid #e5dab0;width:48px;margin:auto}.monster .hp i{display:block;height:100%;background:#83d676}.monster small{display:block;color:white;text-shadow:0 1px 3px black;font:12px sans-serif}@keyframes slime{50%{transform:scale(1.08,.9)}}.combatbar{position:absolute;bottom:65px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:9}.combatbar button{width:105px;min-height:64px;background:#10232ded;color:#f1deb4;border:1px solid #b69a61;padding:8px;font-size:14px}.combatbar button small{display:block;font:11px sans-serif;color:#b6bbaf;margin-top:5px}.combatbar button:disabled{opacity:.45;cursor:default}.combatbar button.armed{outline:2px solid #ffe3a0;box-shadow:0 0 20px #ddb656}.battle-note{position:absolute;bottom:143px;left:50%;transform:translateX(-50%);z-index:9;padding:7px 15px;background:#10202ac9;font-size:14px;text-align:center;pointer-events:none;max-width:90%}.fx{position:absolute;pointer-events:none;z-index:7;border:4px solid var(--fx);width:75px;height:75px;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 24px var(--fx);animation:blast .65s ease-out forwards}.fx.slash{border-radius:0;border-width:0 0 7px;rotate:-30deg}.fx.beam{width:20px;height:140px;border-radius:0}.fx.burst{border-style:dashed;border-width:7px}.fx.spiral{border-radius:20% 80%;border-style:dotted}.damage{position:absolute;z-index:10;pointer-events:none;color:#fff1b6;font:bold 25px Georgia;text-shadow:0 2px 5px black;animation:float .8s forwards}@keyframes blast{to{scale:2.5;opacity:0;rotate:60deg}}@keyframes float{to{translate:0 -50px;opacity:0}}dialog{background:#14232b;color:#eee0bf;border:1px solid #c2a567;width:min(450px,90vw);padding:28px;box-shadow:0 10px 80px #0009}dialog::backdrop{background:#07121abb}dialog h2{font-size:26px;font-weight:400}dialog p{font-size:15px;line-height:1.8}dialog input,dialog select{width:100%;padding:12px;margin:10px 0 20px;background:#091820;color:#fff;border:1px solid #958057;font-size:16px}dialog .gold{width:100%}.registration{position:absolute;right:30px;top:125px;z-index:9}.registration button{background:#16272ddd;color:#e1c991;border:1px solid #a38b58;padding:10px;font-size:14px}.summary-list{line-height:2;font-size:15px;overflow-wrap:anywhere}@media(max-width:760px){.combatbar{bottom:30px;gap:3px;width:96%;justify-content:center}.combatbar button{width:19%;font-size:12px;padding:5px;min-height:60px}.battle-note{bottom:100px;font-size:12px}.movement-help{bottom:4px}.world-back{bottom:170px}.dpad{bottom:115px}.registration{right:16px;top:180px}.monster{width:55px}.hud{max-width:85%}}

.skill-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}.skill-announcement{position:absolute;top:26%;left:50%;transform:translateX(-50%);z-index:8;pointer-events:none;white-space:nowrap;font-size:clamp(20px,3vw,32px);letter-spacing:.22em;color:#fff5df;text-shadow:0 0 12px var(--skill-color),0 2px 5px #000;padding:10px 35px;border-bottom:1px solid var(--skill-color);background:linear-gradient(90deg,transparent,#081923cc,transparent);animation:skill-title 1.3s ease-out forwards}@keyframes skill-title{0%{opacity:0;translate:0 12px}15%,65%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -8px}}

#registration-link{display:block;text-align:center;text-decoration:none;padding:14px 12px;margin:18px 0 12px;font-size:14px;letter-spacing:.03em}

.google-registration{width:min(760px,96vw);max-height:94svh;padding:18px}.google-registration-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.google-registration-header h2{margin:4px 0}.google-registration iframe{display:block;width:100%;height:65svh;border:0;background:white}.google-registration p{font-size:14px;margin:12px 0}
