@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;900&display=swap');
:root{color-scheme:dark;--bg:#0e1619;--panel:#182327;--border:#304044;--muted:#93a9ad;--mint:#b5efbb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#e4efeb;font:14px 'Noto Sans KR',sans-serif}button,select{font:inherit;color:inherit;border:1px solid var(--border);border-radius:9px;background:#223137;padding:10px 16px;cursor:pointer}button:hover{border-color:var(--mint);background:#2c4144}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #b5efbb;outline-offset:3px}header{height:92px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:24px;padding:0 5vw}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:20px;font-weight:700}.brand>span{font-size:38px;color:var(--mint)}small{display:block}.brand small{font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:4px}.demo{margin-left:auto;border-radius:30px;padding:7px 12px;background:#3b3423;color:#edd9a7;font-size:12px}main{max-width:1500px;margin:auto;padding:35px 5vw}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--mint);font-weight:700}h1{font-size:32px;letter-spacing:-1.5px;margin:12px 0}p{color:var(--muted);line-height:1.8;margin:8px 0}.wallet{border:1px solid #554b33;background:#29281f;border-radius:12px;padding:18px;color:#efd499}.wallet strong{margin-left:14px;font-size:22px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px}.world{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:#1b3031}.worldtop,.worldbottom{padding:17px 20px;display:flex;align-items:center;gap:8px;background:#182529}.worldtop #mode{margin-left:auto;color:var(--muted);font-size:12px}.live{width:7px;height:7px;background:var(--mint);border-radius:100%}.worldbottom{justify-content:space-between;font-size:11px;color:var(--muted);gap:16px;min-height:58px}#town,#battle{height:490px;position:relative;overflow:hidden}#town{background:radial-gradient(ellipse at 55% 45%,#436d55 0,#264b42 45%,#173536 95%);outline-offset:-3px}#town:after{content:'';position:absolute;inset:0;background-image:radial-gradient(#b6d9ac55 1px,transparent 1px);background-size:41px 37px;pointer-events:none}.moon{position:absolute;width:50px;height:50px;border-radius:50%;background:#daedbf66;top:24px;left:49%;box-shadow:0 0 50px #daedbf44}.mountain{position:absolute;background:#173a39;clip-path:polygon(0 100%,50% 0,100% 100%);width:340px;height:180px;top:-45px}.m1{left:-20px}.m2{right:-30px;background:#21483e}.trail{position:absolute;background:#90907255;border:6px solid #a6a07620;border-radius:80px}.horizontal{left:7%;right:7%;top:51%;height:60px}.vertical{top:23%;bottom:10%;left:48%;width:60px}.fountain{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:85px;height:65px;border-radius:50%;background:#497d80;border:8px solid #778f80;box-shadow:0 9px #3a594e;text-align:center;font-size:39px;color:#d5fff2}.fountain small{font-size:10px;white-space:nowrap;margin-top:2px;color:#d8ecdf}.building{position:absolute;z-index:2;width:142px;height:121px;background:linear-gradient(#304c48,#1f3736);border:1px solid #668178;box-shadow:0 10px 0 #142d2aa0,0 15px 25px #0d252860;transform:translate(-50%,-50%);padding:12px}.building i{font-style:normal;display:block;font-size:34px;color:#f0d699;text-shadow:0 0 25px #eab77a77}.building b{display:block;font-size:14px;margin:4px 0}.building small{font-size:10px;color:#bdd0c4}.shop{left:23%;top:32%}.dungeon{left:77%;top:32%;background:linear-gradient(#37424b,#253239)}.forge{left:23%;top:76%}.inn{left:77%;top:76%}.tree{position:absolute;color:#153c2e;font-size:100px;text-shadow:0 6px #102f29;pointer-events:none}.t1{left:1%;top:27%}.t2{right:0;top:50%}.t3{left:37%;bottom:-35px}.t4{left:32%;top:0;font-size:80px}.maphint{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;color:#c1d1c1;background:#18332cc9;padding:7px 12px;border-radius:20px}.hero{--armor:#58adff;--weapon:#b5cad2;width:62px;height:86px;position:absolute;z-index:3;filter:drop-shadow(0 8px 5px #0006);pointer-events:none}.hero svg{width:100%;height:100%;overflow:visible}.hero.walking svg{animation:walk .22s infinite alternate}#hero{left:50%;top:65%;transform:translate(-50%,-80%)}.card{border:1px solid var(--border);border-radius:15px;background:var(--panel);padding:22px;margin-bottom:18px}h2{font-size:18px;margin:12px 0}.identity{display:flex;align-items:center;gap:10px;margin:20px 0}.identity .hero{position:relative;flex-shrink:0}.identity h2{font-size:16px;margin:0 0 5px}.identity span,.row{font-size:12px;color:var(--muted)}.row{display:flex;justify-content:space-between}.bar{height:7px;border-radius:10px;background:#334447;margin-top:10px;overflow:hidden}.bar i{display:block;width:100%;height:100%;background:#b1e4af;transition:width .4s}.selectlabel{display:block;font-size:11px;color:var(--muted);margin:22px 0 8px}select{width:100%;background:#111d21;padding:11px}.equipment{display:flex;gap:25px;margin-top:20px}.equipment small{font-size:10px;color:var(--muted);margin-bottom:5px}.equipment b{font-size:12px}.muted{font-size:11px;margin-top:15px}.journal{min-height:150px}#log p{font-size:12px;border-left:2px solid #547565;padding-left:10px}.journal h2{margin-top:10px}footer{display:flex;justify-content:space-between;font-size:10px;color:#6e8587;margin-top:22px}#battle{background:radial-gradient(ellipse at 50% 80%,#405a64,#162931 70%)}#battle.boss{background:radial-gradient(ellipse at 50% 80%,#42698b,#101f37 70%)}[hidden]{display:none!important}.battlehead{display:flex;justify-content:space-between;margin:20px 25px 0;font-weight:700}.enemybar{margin:10px 25px;}.enemybar i{background:#e5a685}.enemy{position:absolute;width:160px;aspect-ratio:151/165;top:110px;left:62%;transform:translateX(-50%);animation:breathe 3s ease-in-out infinite}.enemy img{width:100%;height:100%;object-fit:contain}.enemy.boss{width:290px;aspect-ratio:681/585;top:90px}.eyelid{position:absolute;background:#a6e821;width:10%;height:9%;border-radius:50%;top:61%;transform:scaleY(0);animation:blink 5s infinite}.eyelid.left{left:25%}.eyelid.right{left:55%}.boss .eyelid{background:#2586bb;width:4%;height:2%;top:40%}.boss .eyelid.left{left:67%}.boss .eyelid.right{left:74.5%;top:41.5%}#fighter{left:23%;top:55%;transform:scale(1.4)}#dice{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);font-size:65px;color:#f4e5bb;text-shadow:0 0 20px #e6c17755}.battleactions{position:absolute;bottom:23px;left:0;right:0;display:flex;justify-content:center;gap:9px}.primary{background:#b5efbb;color:#16291d;font-weight:700;border-color:#b5efbb}.primary:hover{background:#d4f7d6}#damage{position:absolute;left:63%;top:100px;z-index:5;font-size:30px;font-weight:900;color:#ffde93;pointer-events:none}#playerdamage{position:absolute;left:20%;top:185px;z-index:5;font-size:28px;font-weight:900;color:#ff9c9c;text-shadow:0 2px 12px #5b0000;pointer-events:none}.attack{animation:lunge .35s!important}.hit{animation:hit .4s!important}.rolling{animation:roll .15s linear infinite}.float{animation:float .7s both}dialog{color:#e4efeb;border:1px solid #53716a;border-radius:18px;background:#18272b;width:min(430px,90vw);padding:30px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#061116bb;backdrop-filter:blur(5px)}dialog h2{font-size:24px}.close{position:absolute;right:15px;top:12px;font-size:20px;padding:0 8px}#panelactions{display:grid;gap:10px;margin-top:22px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#def4da;color:#1a3423;padding:12px 20px;border-radius:10px;z-index:10;opacity:0;transition:opacity .2s;pointer-events:none}#toast.visible{opacity:1}@keyframes walk{to{transform:translateY(-5px) rotate(4deg)}}@keyframes breathe{50%{translate:0 -7px}}@keyframes blink{0%,91%,96%,100%{transform:scaleY(0)}94%{transform:scaleY(1)}}@keyframes lunge{50%{translate:70px -10px}}@keyframes hit{25%{translate:-8px 0;filter:brightness(2)}75%{translate:8px 0}}@keyframes roll{to{rotate:360deg}}@keyframes float{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -45px}}@media(max-width:1000px){.layout{grid-template-columns:minmax(0,1fr)}aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}.building{width:130px}header{gap:12px}.intro h1{font-size:26px}}@media(max-width:600px){header{height:78px;padding:0 18px}.brand{font-size:16px}.brand small{font-size:7px}.demo{font-size:9px;padding:5px 8px}header>button{display:none}main{padding:24px 15px}.intro{display:block}.wallet{display:inline-block;padding:10px 15px;margin-top:10px}.intro h1{font-size:25px}aside{grid-template-columns:1fr}#town,#battle{height:460px}.building{width:112px;height:110px}.worldbottom{font-size:10px}.worldbottom>span:last-child{display:none}.enemy.boss{width:220px;left:65%}footer{display:block;line-height:2}.card{margin-bottom:0}.battleactions button{padding:10px}#fighter{left:16%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Original web artwork and a six-sided, readable dice reveal. */
#town{background:linear-gradient(#112d281f,#102b2540),url("web/background/A_background.png") center/cover no-repeat}
#town .moon,#town .mountain,#town .tree{display:none}
#town:after{background-image:none;box-shadow:inset 0 0 70px #071f2755}
.trail{background:#baa77935;border-color:#d4cf9225}
.building{background:linear-gradient(#183f37eb,#112e2aeb);backdrop-filter:blur(5px);border-color:#bcd6a380}
.building:hover{background:#2c5542;box-shadow:0 0 25px #efffaf55}
#battle{background:linear-gradient(#071e2860,#071c2520 35%,#071721b0),url("web/background/A_background_boss.png") center/cover no-repeat}
#battle.boss{background:linear-gradient(#06173260,#071c2510 35%,#061328b0),url("web/background/E_background_boss.png") center/cover no-repeat}
.battlehead{position:relative;z-index:2;text-shadow:0 2px 6px #000}.enemybar{position:relative;z-index:2;background:#111c29cc}
#dice{position:absolute;left:50%;bottom:79px;width:260px;height:158px;transform:translateX(-50%);font-size:14px;color:#fff1c7;text-shadow:none;z-index:6;perspective:700px;pointer-events:none}
.dice-rig{position:absolute;left:calc(50% - 35px);top:10px;width:70px;height:70px;perspective:700px;z-index:2}
.dice-cube{width:70px;height:70px;position:relative;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-25deg)}
.dice-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7px;padding:12px;border:2px solid #ffe4a1;border-radius:12px;background:linear-gradient(145deg,#fffbed,#e5bc72);box-shadow:inset 0 0 0 3px #a9703430;backface-visibility:hidden}
.dice-face i{border-radius:50%;display:block}.dice-face .pip{background:#4a3028;box-shadow:inset 1px 2px 2px #17090699,0 1px 1px #fff}
.face-1{transform:translateZ(35px)}.face-2{transform:rotateY(90deg) translateZ(35px)}.face-3{transform:rotateX(90deg) translateZ(35px)}.face-4{transform:rotateX(-90deg) translateZ(35px)}.face-5{transform:rotateY(-90deg) translateZ(35px)}.face-6{transform:rotateY(180deg) translateZ(35px)}
.dice-shadow{position:absolute;width:80px;height:15px;left:calc(50% - 40px);top:83px;background:#01091099;filter:blur(5px);border-radius:50%}
.dice-halo{position:absolute;width:130px;height:60px;left:calc(50% - 65px);top:58px;border-radius:50%;border:1px solid #ffc86c66;box-shadow:0 0 25px #ffbd4a22,inset 0 0 25px #ffbd4a22;transform:rotateX(40deg)}
.dice-caption{position:absolute;top:112px;left:50%;transform:translateX(-50%);text-align:center;width:290px;padding:7px 10px;border-radius:12px;background:#0c1c26dd;border:1px solid #b3bfaa30;box-shadow:0 4px 20px #0003}
.dice-caption strong{font-size:16px;display:block;line-height:1.3;color:#ffe2a6}.dice-caption span{display:block;font-size:10px;margin-top:4px;color:#c3d1d4}
#dice.casting .dice-halo{animation:charge 1.25s ease-out both}#dice.casting .dice-shadow{animation:shadowpulse 1.25s ease-out}
#dice.settled .dice-halo{animation:shockwave .7s ease-out both}#dice.perfect .dice-caption{border-color:#ffe291;box-shadow:0 0 25px #ffc85c70}#dice.perfect .dice-caption strong{color:#fff7be}
.dice-sparks{position:absolute;left:50%;top:45px}.dice-sparks i{position:absolute;width:4px;height:10px;border-radius:3px;background:#ffe39f;opacity:0;box-shadow:0 0 9px #ffc84c}
.settled .dice-sparks i{animation:spark .75s ease-out both}
#battle:after{content:'';position:absolute;left:57%;top:25%;width:150px;height:150px;pointer-events:none;opacity:0;background:linear-gradient(135deg,transparent 45%,#fff9c1 49%,#ffc268 51%,transparent 55%);z-index:4;filter:drop-shadow(0 0 9px #ffe1a5)}
#battle.impact:after{animation:slash .4s ease-out both}
@keyframes charge{0%{scale:.5;opacity:.2}60%{scale:1.5;opacity:1}100%{scale:1;opacity:.8}}
@keyframes shockwave{0%{scale:.6;opacity:1;border-width:4px}100%{scale:2;opacity:0;border-width:1px}}
@keyframes shadowpulse{30%{scale:.65;opacity:.5}75%{scale:1.2;opacity:1}}
@keyframes spark{0%{opacity:1;transform:rotate(var(--angle)) translateY(10px) scale(1.2)}100%{opacity:0;transform:rotate(var(--angle)) translateY(var(--reach)) scale(.2)}}
@keyframes slash{0%{opacity:0;scale:.5}30%{opacity:1;scale:1.2}100%{opacity:0;scale:1.5}}
@media(max-width:600px){#dice{left:45%;bottom:86px}.dice-caption{width:240px}.dice-caption strong{font-size:14px}#battle:after{left:50%}}
@media(prefers-reduced-motion:reduce){#dice *,#battle:after{animation:none!important}.dice-sparks{display:none}}