:root{--ink:#294d43;--muted:#6b7d6c;--paper:#faf7ea;--line:#b8c4ad}




*{box-sizing:border-box}




[hidden]{display:none!important}




body{margin:0;color:var(--ink);background:#e8eddf;font-family:CloudSerif,'Microsoft YaHei',serif}




button,input{font:inherit}




button{cursor:pointer}




button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #4a735b;outline-offset:5px}




button:disabled{cursor:not-allowed;filter:saturate(.3);opacity:.65}




main{min-height:100svh;position:relative;overflow:hidden;background:linear-gradient(160deg,#e2eadb,#f8f4e5 65%,#e1e9d7)}




header,footer{display:flex;align-items:center;justify-content:space-between;position:absolute;left:5%;right:5%;z-index:2}




header{top:28px}




footer{bottom:22px;color:var(--muted);font-size:11px;letter-spacing:2px}




.brand{font-size:14px;letter-spacing:3px}




.seal{display:inline-grid;place-items:center;width:29px;height:32px;border:1px solid #567359;margin-right:12px;transform:rotate(-5deg)}




#page-status{font-size:11px;letter-spacing:3px;color:var(--muted)}




.scenery{position:absolute;inset:0;pointer-events:none;overflow:hidden}




.sun{position:absolute;right:8%;top:12%;width:250px;height:250px;border-radius:50%;background:#eddc9d40}




.mountain{position:absolute;bottom:0;left:-3%;width:33%;height:55%;background:#9eb79935;clip-path:polygon(0 40%,15% 30%,25% 0,32% 8%,40% 54%,56% 39%,64% 13%,69% 10%,80% 56%,100% 100%,0 100%)}




.mountain.right{left:auto;right:-6%;transform:scaleX(-1);background:#a8bea03b;height:64%;width:37%}




.cloud{position:absolute;width:46%;height:160px;background:#faf8ec;border-radius:50%;bottom:-65px;box-shadow:80px -20px 0 #faf8ec,180px 20px 0 #faf8ec,-100px 30px 0 #faf8ec}




.cloud.right{left:auto;right:0;bottom:-50px;transform:scaleX(-1)}




.screen{position:relative;z-index:1;min-height:100svh;padding:110px 8% 90px}




#cover{display:flex;align-items:center;justify-content:center;text-align:center}




.eyebrow{font-size:12px;letter-spacing:6px;color:var(--muted)}




h1{font-size:clamp(46px,6vw,85px);letter-spacing:.08em;margin:20px 0;transform:rotate(-2deg)}




.subtitle{font-size:14px;line-height:2;letter-spacing:3px;color:var(--muted)}




.cover-divider{width:55px;height:1px;background:#9caf96;margin:35px auto}




.gloss{position:relative;isolation:isolate;border:2px solid #795638;border-radius:47% 48% 43% 45% / 49% 47% 49% 46%;background:radial-gradient(ellipse at 34% 17%,#fff4cf70 0%,#fff2d400 45%),linear-gradient(180deg,#f4bd7a,#e9a363 55%,#d68a4d);box-shadow:inset 0 2px 2px #fff1d6a8,inset -3px -6px 8px #9b5f2024,0 5px 0 #b17c4c,0 12px 20px #52664e20;color:#5b432d;transition:transform .16s,box-shadow .16s;font-size:clamp(17px,1.8vw,28px);letter-spacing:5px}




.gloss:before{content:'';position:absolute;left:12%;top:10%;width:35%;height:18%;border-radius:50%;background:linear-gradient(#fff9ea96,#fff9ea10);transform:rotate(-9deg);pointer-events:none}




.gloss:hover:not(:disabled){transform:translateY(-3px) rotate(-1deg)}




.gloss:active:not(:disabled){transform:translateY(4px) scale(.98);box-shadow:inset 0 2px 2px #fff1d6a8,0 1px 0 #b17c4c,0 5px 8px #52664e20}




.primary-action{width:22vw;height:11.363636vh;min-width:160px;min-height:48px;max-width:none}




.cover-note{font-size:11px;color:var(--muted);margin-top:28px;max-width:450px;line-height:1.9;letter-spacing:1px}




.auth{display:grid;place-items:center}




.sheet{width:min(100%,450px);border:1px solid #b3bea5;border-radius:26px;background:#faf7eaed;padding:32px 38px;box-shadow:0 20px 65px #6072550b}




.quiet{background:none;border:0;color:var(--muted);font-size:12px;padding:8px 0}




.tabs{display:flex;border-bottom:1px solid var(--line);margin:15px 0 24px;gap:30px}




.tabs button{padding:12px 0;background:none;border:0;color:var(--muted)}




.tabs button[aria-selected=true]{color:var(--ink);border-bottom:2px solid var(--ink)}




h2{font-size:30px;margin:15px 0}




label{display:block;font-size:13px;margin:18px 0 8px}




input{width:100%;border:1px solid #acb99f;background:#fffdf4;border-radius:10px;height:46px;padding:0 13px;color:var(--ink);font-size:14px}




.help{font-size:11px;color:var(--muted);line-height:1.9;margin:7px 0}




.auth .gloss{width:100%;height:58px;margin-top:15px;font-size:20px}




.error{color:#9c4b36;font-size:12px;min-height:20px;line-height:1.7}




.privacy{font-size:10px;line-height:1.9;color:#7c8b74;margin-top:22px;border-top:1px solid #d7ddcc;padding-top:15px}




.panel{max-width:1250px;margin:auto}




.panel-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b7c5aa;padding-bottom:22px}




.panel-title .eyebrow{font-size:10px;letter-spacing:3px}




.panel-title h2{margin:8px 0 0}




.account{text-align:right;font-size:13px;line-height:2}




.account .quiet{margin-left:12px;text-decoration:underline;text-underline-offset:4px}




.panel-body{display:grid;grid-template-columns:1fr 1.2fr;gap:10%;padding-top:48px}




.label{font-size:12px;color:var(--muted);letter-spacing:3px}




.level-value{font-size:80px;line-height:1.4;display:flex;align-items:baseline;gap:15px}




.level-value small{font-size:17px;color:var(--muted)}




.rule{height:1px;background:#bec9b1;margin:22px 0}




.wallet{display:flex;justify-content:space-between;align-items:center;font-size:14px}




.amber{display:inline-block;width:15px;height:20px;background:linear-gradient(145deg,#f9d98d,#d88e3d);clip-path:polygon(50% 0,100% 30%,85% 82%,40% 100%,0 60%,10% 18%);vertical-align:middle;margin-right:9px}




.wallet strong{font-size:30px;font-weight:500;font-variant-numeric:tabular-nums}




.next{font-size:12px;color:var(--muted);line-height:2.2;margin-top:18px}




.save-note{font-size:11px;color:#6b8165;line-height:1.8}




.actions{display:flex;flex-direction:column;align-items:flex-start;gap:35px;padding-top:4px}




.action-item small{display:block;font-size:11px;color:var(--muted);margin-top:14px;letter-spacing:1px}




.action-item .gloss{display:block}




.gloss.sage{background:radial-gradient(ellipse at 34% 17%,#fffde265,transparent 45%),linear-gradient(180deg,#c9d4aa,#b6c697 55%,#9caf83);border-color:#657956;box-shadow:inset 0 2px 2px #ffffdfa0,inset -3px -6px 8px #445e2020,0 5px 0 #7c9267,0 12px 20px #52664e18;color:#3e5839}




.skills{margin-top:38px;padding-top:20px;border-top:1px dashed #b5c1a8;font-size:12px;line-height:2;color:var(--muted)}




#panel-message{font-size:12px;line-height:2;min-height:28px;color:#597b4f;margin-top:28px}




dialog{border:1px solid #9eaf90;border-radius:25px;padding:30px;max-width:min(420px,88vw);background:var(--paper);color:var(--ink);text-align:center}




dialog::backdrop{background:#344d4455}




dialog p{font-size:13px;color:var(--muted);line-height:2}




dialog button{border:0;border-radius:20px;background:#59765b;color:var(--paper);padding:12px 28px;margin-top:12px}




dialog h2{font-size:26px}




.stats{margin-top:23px;padding-top:14px;border-top:1px solid #bec9b1}




.stat-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:13px}




.stat-row strong{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;color:#355d48}




.stat-row+ .stat-row{border-top:1px dashed #cdd5c1}




@media(max-width:650px){.stats{margin-top:15px;padding-top:5px}




.stat-row{padding:6px 0}




.stat-row strong{font-size:22px}




.screen{padding:105px 7% 85px}




header{top:22px}




footer{font-size:9px;letter-spacing:1px}




h1{font-size:44px;letter-spacing:1px}




.eyebrow{letter-spacing:3px;font-size:10px}




.subtitle{font-size:12px;letter-spacing:2px}




.primary-action{width:40vw;height:6.25vh;min-width:0;min-height:44px;font-size:19px;letter-spacing:3px}




.sheet{padding:22px}




.panel-top{align-items:start}




.panel-title h2{font-size:25px}




.account{font-size:11px}




.panel-body{grid-template-columns:1fr;gap:20px;padding-top:28px}




.level-value{font-size:54px}




.rule{margin:16px 0}




.actions{flex-direction:row;gap:6vw;justify-content:space-between;padding-top:4px}




.action-item small{font-size:10px;letter-spacing:0;max-width:40vw;line-height:1.8}




.skills{margin-top:20px}




#panel-message{margin-top:18px}




.sun{width:160px;height:160px}




.auth .gloss{height:50px}




.privacy{margin-top:15px}




}




.monster-page{max-width:1300px;margin:auto}
.monster-heading{display:flex;gap:18px;align-items:center;padding-bottom:24px;border-bottom:1px solid #b7c5aa}
.monster-heading h2{margin:7px 0 0}
.back-arrow{width:46px;height:46px;flex-shrink:0;border:1px solid #9cac8f;border-radius:50%;background:#faf7eaaa;color:#355d48;font-size:25px;transition:transform .15s}
.back-arrow:hover:not(:disabled){transform:translateX(-3px)}
.monster-layout{display:grid;grid-template-columns:1fr 1.35fr;gap:7%;padding-top:32px}
.monster-option{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #93a87e;background:#e4ebd2;border-radius:15px;padding:18px 20px;margin-top:16px;color:#355139}
.monster-option span{font-size:22px}
.monster-option small{font-size:10px;color:#708166}
.monster-preview{margin:23px 0 28px;border-top:1px solid #bdc9af}
.monster-preview div{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed #cbd4bb}
.monster-preview dt{font-size:12px;color:#71816b}
.monster-preview dd{margin:0;font-size:23px;font-variant-numeric:tabular-nums}
.monster-page .help{line-height:1.9}
.monster-page .primary-action{max-width:100%}
.battle-stage{padding:6px 0 0}
.battle-stage h3{font-size:27px;font-weight:500;margin-top:22px}
.battle-stage p{font-size:12px;line-height:2.1;color:#6a7e66}
.battle-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.hp-row{margin-bottom:22px}
.hp-row>div{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:7px}
.hp-row>div+div{justify-content:flex-start;gap:6px;font-variant-numeric:tabular-nums;font-size:20px}
.hp-row>div>span:last-child{color:#73836b}
.hp-row progress{appearance:none;width:100%;height:7px;border:none;border-radius:10px;background:#d9e0c9;overflow:hidden}
.hp-row progress::-webkit-progress-bar{background:#d9e0c9}
.hp-row progress::-webkit-progress-value{background:#789667;transition:width .2s}
.hp-row progress::-moz-progress-bar{background:#789667}
.hp-row:nth-of-type(3) progress::-webkit-progress-value{background:#c49d6c}
.battle-log{height:200px;overflow-y:auto;margin:15px 0;padding:10px 0 10px 27px;border-top:1px solid #bec9b1;border-bottom:1px solid #bec9b1;font-size:11px;line-height:2.2;color:#466b50;scrollbar-width:thin}
.battle-log li[data-actor=monster]{color:#977752}
.battle-result{min-height:45px;padding-top:10px;font-size:15px;color:#597b4f;line-height:1.8}
.battle-result[data-winner=monster]{color:#9b7252}
#battle-message{min-height:42px}
.monster-page #monster-level{max-width:100%;font-variant-numeric:tabular-nums}

@media(max-width:650px){.monster-page{padding-top:100px}
.monster-layout{grid-template-columns:1fr;gap:24px;padding-top:23px}
.monster-heading h2{font-size:25px}
.monster-option{padding:13px 17px;margin-top:12px}
.monster-preview{margin:15px 0 21px}
.monster-preview div{padding:8px 0}
.monster-preview dd{font-size:21px}
.battle-stage{border-top:1px solid #bac7ac;padding-top:26px}
.battle-stage h3{font-size:24px}
.battle-log{height:190px}
.monster-heading .eyebrow{font-size:9px}
.battle-stage .hp-row{margin-bottom:16px}
.battle-title{margin-bottom:17px}
}


.monster-select-page{max-width:1250px;margin:auto}

.selection-intro{color:#6b8067;font-size:14px;line-height:2;margin-top:28px}

.monster-choices{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:42px 0 48px}

.monster-choice .label{display:block;margin-bottom:23px}

.monster-choice .primary-action{display:block;max-width:100%;font-size:clamp(19px,1.8vw,28px);letter-spacing:3px}

.monster-choice p{font-size:13px;line-height:2.1;color:#607459;margin:25px 0 12px}

.monster-choice small{font-size:11px;line-height:1.9;color:#849076}

.boss-label{color:#527681}

.gloss.blue{border-color:#557a83;background:radial-gradient(ellipse at 34% 17%,#f3fffc80,transparent 45%),linear-gradient(180deg,#b8dbe0,#9bc4cf 55%,#7ea8b9);box-shadow:inset 0 2px 2px #eafff5b0,inset -3px -6px 8px #27536c20,0 5px 0 #6b8d9b,0 12px 20px #52664e18;color:#35596b}

.skill-note{font-size:12px;color:#637f73;line-height:2;padding:13px 0;border-top:1px dashed #bbc9b0;margin-bottom:22px}

.battle-log li[data-phase=skill]{color:#397b85;font-weight:600}

@media(max-width:650px){.monster-choices{grid-template-columns:1fr;gap:35px;padding:28px 0}
.monster-choice{display:grid;grid-template-columns:1fr 1fr;column-gap:5vw;align-items:center}
.monster-choice .label{grid-column:1 / -1;font-size:10px;margin-bottom:15px}
.monster-choice p{font-size:11px;margin:0;line-height:1.9}
.monster-choice small{grid-column:1 / -1;margin-top:14px;font-size:10px}
.monster-choice .primary-action{font-size:18px}
.selection-intro{font-size:12px;line-height:1.9}
.skill-note{font-size:11px}
}


#upgrade{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

#upgrade.is-holding:not(:disabled){transform:translateY(4px) scale(.98);box-shadow:inset 0 2px 2px #fff1d6a8,0 1px 0 #b17c4c,0 5px 8px #52664e20}

.action-item .hold-help{font-size:10px;margin-top:7px;color:#7b8b70;letter-spacing:0}


.silver-wallet{margin-top:14px;color:#687b70}

.silver-wallet strong{font-size:26px}

.silver-ingot{display:inline-block;position:relative;width:20px;height:12px;margin-right:9px;vertical-align:middle;border-radius:35% 35% 55% 55%;background:linear-gradient(160deg,#fffef5,#d6dfd9 50%,#9eafa6);border:1px solid #93a49b;box-shadow:inset 0 1px 1px #fff}

.silver-ingot:before{content:'';position:absolute;left:4px;top:-4px;width:10px;height:7px;border-radius:50%;background:linear-gradient(#fffef6,#c7d3cc);border:1px solid #9aaca2}

.stat-row small{display:block;font-size:10px;color:#84927b;font-weight:400;margin-top:4px}

.gloss.silver{border-color:#7a8b7c;background:radial-gradient(ellipse at 34% 17%,#ffffffa0,transparent 45%),linear-gradient(180deg,#edf0dc,#d5deca 55%,#b4c2af);box-shadow:inset 0 2px 2px #fffdebb0,inset -3px -6px 8px #52624620,0 5px 0 #92a28b,0 12px 20px #52664e18;color:#52644f}

.actions{display:grid;grid-template-columns:1fr;gap:25px;align-items:start}

.monster-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:4%}

.refine-page{max-width:1250px;margin:auto}

.refine-inventory{display:flex;align-items:center;gap:25px;flex-wrap:wrap;padding:25px 0 18px;font-size:14px}

.refine-inventory strong{font-size:30px;font-weight:500;color:#556d55}

.refine-inventory small{font-size:11px;color:#819076}

.refine-options{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:30px 0}

.refine-choice p{font-size:13px;color:#75866b;line-height:2.2;margin:19px 0 24px}

.refine-choice p strong{font-size:19px;color:#41644b;font-weight:500;margin-left:12px}

.refine-choice .primary-action{max-width:100%;font-size:clamp(18px,1.6vw,26px);letter-spacing:3px}

.refine-choice small{display:block;font-size:11px;color:#819076;margin-top:17px;line-height:1.9}

#refine-message{min-height:44px;font-size:13px;line-height:2;color:#597b4f}

.battle-log li[data-phase=skip]{color:#936e4d;background:#e4d6ad26}

@media(max-width:650px){.actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 6vw}
.monster-choices{grid-template-columns:1fr;gap:30px}
.monster-choice .primary-action{font-size:17px}
.refine-options{gap:6vw}
.refine-choice p{font-size:11px;line-height:2.2}
.refine-choice p strong{font-size:15px;margin-left:4px}
.refine-choice small{font-size:10px}
.refine-inventory{gap:15px;padding-top:22px}
.refine-inventory small{flex-basis:100%}
.refine-choice .primary-action{font-size:17px;letter-spacing:1px}
#refine-message{font-size:12px}
}


.monster-choices{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8%;row-gap:32px}

.skill-empty{padding:30px 0 36px;border-top:1px solid #bdc9b0;margin-top:24px}

.skill-empty h3{font-size:24px;font-weight:500;color:#5e735a}

#skills-message{min-height:44px;margin-top:28px;line-height:2}

@media(max-width:650px){.monster-choices{grid-template-columns:1fr;row-gap:30px}
.skill-empty h3{font-size:21px}
.skill-empty .primary-action{font-size:17px;letter-spacing:1px}
}


@media(prefers-reduced-motion:reduce){*{transition:none!important}




}