@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Serif+Thai:wght@400;600;700&display=swap');
:root{--ink:#0c1722;--panel:#101f2eed;--gold:#dfbd7e;--muted:#9cabb9;--line:#ffffff19;--white:#f4f1e9;--green:#70c7a0;--red:#ec6978;--blue:#6baff4;--font:'Noto Sans Thai',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--white);font:14px var(--font);overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:#223447;border:1px solid #ffffff22;border-radius:7px;padding:10px 16px;transition:background .18s,transform .18s}button:hover{background:#344c62;border-color:var(--gold)}button:active{transform:translateY(1px)}button:disabled{opacity:.35;cursor:not-allowed}button.primary{background:var(--gold);color:#19232c;font-weight:700;border-color:var(--gold)}button.primary:hover{background:#efd1a0}button.ghost{background:transparent}button.danger{border-color:#d16a7388;color:#f3a7af}button.small{padding:5px 10px;font-size:12px}.hidden{display:none!important}.serif,h1,h2,h3{font-family:'Noto Serif Thai',serif}h1,h2,h3,p{margin:0}small,.muted{color:var(--muted)}.eyebrow{font:11px var(--font);text-transform:uppercase;letter-spacing:3px;color:var(--gold)}.row{display:flex;align-items:center;gap:10px}.spread{justify-content:space-between}.grid{display:grid;gap:12px}.badge{display:inline-flex;padding:3px 8px;border:1px solid #ffffff24;border-radius:4px;font-size:11px;color:var(--gold)}.pill{background:#ffffff0a;border:1px solid var(--line);border-radius:30px;padding:5px 12px;font-size:12px}.line{height:1px;background:var(--line);margin:16px 0}.gold{color:var(--gold)}.good{color:var(--green)}.bad{color:var(--red)}.portrait{background-image:url('assets/heroes.png');background-size:500% 200%;background-repeat:no-repeat;aspect-ratio:1;flex-shrink:0}.monster-art{background-image:url('assets/monsters.png');background-size:500% 400%;background-repeat:no-repeat;aspect-ratio:1}.meter{height:7px;background:#060d15;border-radius:3px;overflow:hidden;border:1px solid #ffffff12}.meter>i{display:block;height:100%;background:linear-gradient(90deg,#b74155,#ed8d91);transition:width .45s}.meter.mp>i{background:linear-gradient(90deg,#4386b6,#85c9eb)}.meter.xp>i{background:var(--gold)}
.title-screen{height:720px;min-height:440px;background:linear-gradient(90deg,#071421f5 0%,#0b1929c9 35%,#0b19292a 70%),url('assets/world.png') center/cover;position:relative;display:flex;align-items:center;padding:43.2px 89.6px}.title-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#071421b0,transparent 35%)}.title-copy{max-width:560px;z-index:1}.brand{display:flex;align-items:center;gap:13px;margin-bottom:38px}.sigil{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--gold);transform:rotate(45deg);color:var(--gold);font-size:23px}.sigil span{transform:rotate(-45deg)}.brand b{font-size:12px;letter-spacing:3px;font-weight:500}.title-copy h1{font-size:clamp(42px,67.84px,82px);line-height:1.35;font-weight:600;margin:16px 0}.title-copy h1 em{font-style:normal;color:var(--gold)}.title-copy>p{max-width:400px;line-height:1.9;color:#c0ced8;margin:20px 0 28px}.title-actions{display:flex;gap:12px;flex-wrap:wrap}.title-actions button{padding:14px 28px}.title-bottom{position:absolute;bottom:25px;left:89.6px;right:64px;display:flex;justify-content:space-between;z-index:2;color:#b7c8ce;font-size:11px;letter-spacing:1px}.title-note{border-left:2px solid #dfbd7e66;padding-left:12px;font-size:12px!important;margin-top:24px!important}.title-counter{position:absolute;right:76.8px;top:50.4px;display:flex;gap:25px;text-align:center}.title-counter strong{font:26px 'Noto Serif Thai',serif;display:block;color:#fff}.title-counter small{font-size:10px;letter-spacing:2px}.name-input{background:#06111d;border:1px solid #dfbd7e70;border-radius:6px;padding:13px;color:white;width:100%;outline:none;margin:15px 0}.birth-card{display:grid;grid-template-columns:1fr 1.15fr;min-height:350px;gap:20px}.birth-art{position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#9ac9e520,transparent 70%);border:1px solid var(--line);border-radius:10px}.birth-art .portrait{width:100%;max-width:340px}.birth-info{padding:10px}.birth-info h2{font-size:28px;margin:9px 0}.stat-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.stat-chip{background:#ffffff05;border:1px solid var(--line);padding:10px;border-radius:5px}.stat-chip strong{display:block;color:var(--gold);font-size:20px}.stat-chip small{font-size:11px}.birth-buttons{display:flex;gap:8px;margin-top:20px}
.game{height:720px;display:grid;grid-template-rows:68px minmax(0,1fr) 90px;background:#0b1620;min-width:680px}.topbar{z-index:5;display:flex;align-items:center;justify-content:space-between;padding:8px 22px;background:#0a1523f5;border-bottom:1px solid #dfbd7e3a;gap:15px}.player-strip{display:flex;align-items:center;gap:10px;min-width:260px}.avatar-frame{width:47px;height:47px;overflow:hidden;background:#203449;border:1px solid #dfbd7e65;border-radius:8px}.avatar-frame .portrait{width:100%;height:100%}.player-strip b{font-size:13px}.mini-meters{width:160px;display:grid;gap:4px;margin-top:5px}.place-strip{text-align:center}.place-strip h3{font-size:17px}.place-strip small{font-size:10px;letter-spacing:1px}.resources{display:flex;align-items:center;gap:15px;font-size:12px}.icon-button{width:33px;height:33px;display:grid;place-items:center;padding:0;background:transparent}.world-scene{position:relative;overflow:hidden;background:linear-gradient(#204a5c19,#112d3b55),url('assets/world.png') center/cover}.world-scene:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 130px #0312219c}.world-scene canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}.world-tag{position:absolute;left:23px;top:18px;z-index:3;padding:8px 13px;background:#0c1a2bdd;border:1px solid #ffffff20;border-radius:5px}.world-tag b{display:block;font-size:12px}.world-tag small{font-size:10px}.world-help{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);z-index:3;text-align:center;white-space:nowrap;font-size:12px;background:#0c1a2be8;padding:9px 17px;border-radius:40px;border:1px solid #ffffff22}.world-character{position:absolute;z-index:2;width:95px;height:95px;left:calc(50% - 47px);top:calc(53% - 72px);filter:drop-shadow(0 10px 5px #0008);pointer-events:none;animation:breathe 3s ease-in-out infinite}.world-character .portrait{width:100%;height:100%}.side-journal{position:absolute;right:20px;top:18px;z-index:3;width:220px;background:#0b1929e8;border:1px solid #ffffff21;border-radius:8px;padding:15px}.side-journal h4{margin:0 0 10px;font-weight:500;font-size:12px;color:var(--gold)}.side-journal p{font-size:11px;line-height:1.9;color:#c3ced8}.side-journal .row{margin-top:13px}.event-log{position:absolute;left:20px;bottom:20px;z-index:3;width:250px;pointer-events:none}.event-log p{font-size:11px;background:#091725ce;border-left:2px solid #dfbd7e66;margin-top:4px;padding:6px 9px;animation:fadein .3s}.bottom-bar{z-index:5;background:#0a1523fa;border-top:1px solid #dfbd7e3a;display:flex;align-items:center;justify-content:space-between;padding:10px 22px;gap:12px}.bottom-nav{display:flex;gap:7px}.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;background:transparent;min-width:60px;padding:8px 11px;border-color:#ffffff17}.nav-item span{font-size:21px;color:var(--gold)}.dice-control{display:flex;align-items:center;gap:12px}.die{width:53px;height:53px;background:#f4f0e5;color:#182b3a;border:2px solid #d9cbb4;border-radius:10px;display:grid;place-items:center;font-size:35px;line-height:1;box-shadow:0 3px 0 #9b8c79,0 5px 15px #0005}.die.spin{animation:roll .17s linear infinite}.dice-button{min-width:130px;padding:13px 20px;font-size:15px}.journey-info{color:var(--muted);font-size:11px;text-align:right}.location-actions{display:flex;gap:7px;flex-wrap:wrap}.location-actions button{font-size:11px;padding:8px 11px}.path-choice{position:absolute;z-index:8;left:50%;top:70%;transform:translate(-50%,-50%);display:flex;gap:7px;max-width:90%;padding:10px;background:#0b1929f5;border:1px solid var(--gold);border-radius:9px}.path-choice button{font-size:12px;white-space:nowrap}
#modal{position:fixed;z-index:50;inset:0;background:#020912b5;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:22px}.modal-box{background:linear-gradient(145deg,#142638,#0b1725);border:1px solid #bfa06b77;border-radius:12px;width:min(940px,1216px);max-height:655.2px;display:flex;flex-direction:column;box-shadow:0 25px 80px #0009;animation:fadein .2s}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:19px 24px;border-bottom:1px solid var(--line);gap:15px}.modal-head h2{font-size:21px}.modal-head button{padding:3px 10px;background:transparent;font-size:21px}.modal-body{padding:23px;overflow:auto;min-height:0}.modal-body p{line-height:1.9}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:17px}.tabs button.active{border-color:var(--gold);color:var(--gold);background:#dfbd7e11}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.card{background:#ffffff04;border:1px solid var(--line);border-radius:8px;padding:16px}.card h3{font-size:16px;margin-bottom:7px}.card p{font-size:12px;color:#bdcbd7;line-height:1.8}.card .row{margin-top:12px}.skill-card{position:relative;overflow:hidden}.skill-card.locked{opacity:.6}.skill-card .skill-icon{font-size:26px;margin-bottom:8px;color:var(--gold)}.skill-meta{font-size:10px;color:#a2b3c3;margin:8px 0}.class-reward{display:grid;grid-template-columns:100px 1fr;gap:10px;align-items:center;margin-bottom:10px}.class-reward .portrait{width:100px;height:100px}.stats-table{display:grid;gap:10px}.stat-row{display:grid;grid-template-columns:1fr 60px 100px 38px;align-items:center;border-bottom:1px solid var(--line);padding:10px;gap:10px}.stat-row button{padding:5px}.inventory-row{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line)}.inventory-row .item-icon{font-size:24px}.inventory-row b{font-size:13px}.inventory-row p{font-size:11px;color:var(--muted)}.inventory-row button{font-size:11px;padding:6px 10px}.empty{padding:30px;text-align:center;color:var(--muted)}.notice{padding:12px 15px;background:#dfbd7e0b;border:1px solid #dfbd7e33;border-radius:7px;font-size:12px;line-height:1.8;color:#dcc9aa;margin-bottom:15px}.tower-floor{font:60px 'Noto Serif Thai',serif;color:var(--gold);text-align:center;margin:15px}.progress-track{height:7px;background:#060e19;border-radius:5px;overflow:hidden;margin:10px 0}.progress-track i{display:block;height:100%;background:var(--gold)}.setting-row{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:center}.setting-row select{background:#091522;color:white;border:1px solid #ffffff33;padding:7px;border-radius:5px}.town-hero{height:130px;border-radius:8px;background:linear-gradient(90deg,#0b1929dc,#0b192920),url('assets/world.png') 30% 40%/cover;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:17px}.town-hero h2{font-size:26px}.town-hero p{font-size:12px;color:#ddd}.chat-box{height:160px;background:#07111e;border:1px solid var(--line);padding:12px;border-radius:6px;overflow:auto;font-size:12px}.chat-input{display:flex;gap:8px;margin-top:10px}.chat-input input{flex:1;background:#07111e;color:white;border:1px solid #ffffff33;border-radius:5px;padding:10px;min-width:0}
.battle{height:720px;background:#080f18;display:grid;grid-template-rows:95px minmax(0,1fr) 112px;min-width:680px}.battle-top{display:grid;grid-template-columns:1fr 70px 1fr;gap:12px;padding:14px 24px}.combat-status{padding:3px 10px}.combat-status .row{margin-bottom:5px}.combat-status b{font-size:15px}.hp-label{font-size:11px;min-width:92px;text-align:right}.combat-status .meter{height:10px}.combat-status .meter.mp{height:5px;margin-top:5px}.turn-arrow{display:grid;place-items:center;font-size:35px;color:var(--gold)}.duel{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 22px;min-height:0}.fighter-panel{position:relative;border:1px solid #9aafbd77;border-radius:9px;overflow:hidden;background:linear-gradient(#14344555,#0b1d3377),url('assets/world.png') center/cover}.fighter-panel.enemy{background-position:70% center}.fighter-figure{position:absolute;width:88%;height:110%;left:6%;bottom:-15%;background-size:500% 200%;filter:drop-shadow(0 8px 10px #0007);transition:filter .2s}.fighter-figure.monster-art{background-size:500% 400%;height:105%;bottom:-6%;width:95%;left:2.5%}.panel-label{position:absolute;left:13px;top:11px;z-index:2;font-size:10px;letter-spacing:2px;color:#fff;background:#071725b0;padding:5px 9px;border-radius:4px}.status-tags{position:absolute;right:10px;top:10px;z-index:3;display:flex;gap:4px}.status-tags span{font-size:10px;background:#091625e0;border:1px solid #ffffff44;padding:4px 7px;border-radius:4px}.damage-number{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);z-index:10;font:bold 70px Georgia,serif;color:#fff3d0;-webkit-text-stroke:2px #5b2418;text-shadow:0 4px 0 #35170c,0 0 25px #ff900099;animation:damage 1.2s ease-out forwards;pointer-events:none}.damage-number.heal{color:#9dffc3;-webkit-text-stroke:2px #184d38}.damage-number small{display:block;font:12px var(--font);-webkit-text-stroke:0;text-align:center;color:#ffe8b8}.hit{animation:hit .45s!important}.battle-bottom{padding:12px 23px;display:flex;justify-content:space-between;align-items:center;gap:12px}.battle-message{font-size:12px;max-width:320px;color:#c1ccd6;line-height:1.7}.battle-commands{display:flex;gap:7px;flex-wrap:wrap}.battle-commands button{font-size:12px;padding:10px 15px}.battle-dice{position:absolute;top:14%;right:7%;z-index:6;display:flex;gap:8px}.battle-dice .die{width:64px;height:64px;font-size:42px}.battle-statusline{position:absolute;bottom:10px;left:12px;z-index:3;display:flex;gap:5px}.party-badge{width:42px;height:42px;border:1px solid var(--gold);background:#142a3c;border-radius:5px}.party-badge .portrait{width:100%;height:100%}#cinema{position:fixed;z-index:80;inset:0;pointer-events:none;background:#030a13ba;display:flex;align-items:center;justify-content:center}.cutin{height:417.6px;width:100%;position:relative;background:linear-gradient(100deg,#05111f,#143852dd,#05111f);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);overflow:hidden;animation:cutin .35s ease-out}.cutin:before{content:'';position:absolute;inset:-100%;background:repeating-linear-gradient(168deg,transparent 0 25px,#ffffff0a 25px 27px);animation:speedlines 1s linear infinite}.cutin-portrait{position:absolute;left:9%;bottom:-25%;width:381.6px;height:561.6px;filter:drop-shadow(0 0 20px #8ac6ff55);transform:rotate(-7deg)}.cutin-portrait.monster-art{height:504px;bottom:-12%;transform:rotate(5deg)}.cutin-title{position:absolute;left:47%;right:6%;top:37%;text-shadow:0 4px 15px #000}.cutin-title h2{font-size:clamp(24px,51.2px,54px);color:#fff9e9;line-height:1.5}.cutin-title p{font-size:12px;letter-spacing:3px;color:var(--gold);margin-top:10px}.cutin-flash{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;animation:vfx .8s ease-out forwards}.fx-slash{background:linear-gradient(155deg,transparent 46%,#a5edff 49%,white 50%,#69ceff 51%,transparent 54%)}.fx-fire{background:radial-gradient(ellipse at 65% 65%,#fff6a7,#ff6b2455 25%,transparent 65%)}.fx-ice{background:repeating-conic-gradient(from 20deg at 65% 50%,transparent 0deg 24deg,#a9efff88 25deg 28deg,transparent 29deg 45deg)}.fx-holy{background:radial-gradient(circle at 65% 50%,#fffbe8,#f8d98b66 15%,transparent 50%)}.fx-shadow{background:radial-gradient(ellipse at 65% 50%,#b985ff99,transparent 65%)}.fx-storm{background:linear-gradient(120deg,transparent 46%,white 47%,#76caff 48%,transparent 49%,transparent 53%,#c1e4ff 54%,transparent 56%)}.fx-nature{background:repeating-conic-gradient(at 65% 60%,transparent 0 20deg,#78e4a155 21deg 25deg,transparent 26deg 60deg)}.fx-beam{background:linear-gradient(0deg,transparent 43%,#7fe5ff88 48%,white 50%,#7fe5ff88 52%,transparent 57%)}.fx-impact{background:radial-gradient(circle at 65% 50%,white 0%,#ffb55b77 18%,transparent 45%)}.fx-portal{background:radial-gradient(ellipse at 65% 50%,transparent 18%,#c896ffbb 20%,transparent 24%,#6cb3ff99 27%,transparent 30%)}#toast{position:fixed;z-index:110;left:50%;bottom:115px;transform:translateX(-50%);pointer-events:none;max-width:1088px;background:#142537f5;border:1px solid #dfbd7e88;border-radius:8px;padding:12px 20px;font-size:13px;box-shadow:0 5px 30px #0006;opacity:0;transition:opacity .2s}#toast.show{opacity:1}#rotate{display:none}.footer-note{font-size:10px;color:#8498aa;line-height:1.7;margin-top:18px}.atlas-search{width:100%;background:#081421;border:1px solid #ffffff28;padding:10px;color:white;border-radius:6px;margin-bottom:15px}.rarity-rare{color:#78b8ff}.rarity-epic{color:#c799f5}.rarity-legendary{color:#e6bf75}
@keyframes roll{50%{transform:rotate(9deg) translateY(-3px)}100%{transform:rotate(-8deg)}}@keyframes breathe{50%{transform:translateY(-4px)}}@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes damage{0%{opacity:0;transform:translate(-50%,0) scale(.4)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}35%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-100%)}}@keyframes hit{20%,60%{transform:translateX(-9px);filter:brightness(2)}40%,80%{transform:translateX(9px)}100%{transform:translateX(0)}}@keyframes cutin{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes speedlines{to{transform:translateX(100px)}}@keyframes vfx{0%{opacity:0;transform:scale(.5)}25%{opacity:1}100%{opacity:0;transform:scale(1.4)}}


@media(orientation:portrait) and (max-width:700px){#rotate{display:flex;position:fixed;inset:0;z-index:200;background:radial-gradient(ellipse,#23364e,#09131f);align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#rotate span{font-size:80px;color:var(--gold)}#rotate h2{font-size:22px;margin:20px}#rotate p{color:var(--muted)}}
.source-download{color:var(--gold);border:1px solid #ffffff33;padding:7px 12px;border-radius:6px;text-decoration:none;font-size:12px}.player-strip>div:last-child{max-width:260px}.player-strip small{display:inline-block;max-width:150px;overflow:hidden;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap}.combat-status b{max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(orientation:portrait) and (max-width:1100px){#rotate{display:flex;position:fixed;inset:0;z-index:200;background:radial-gradient(ellipse,#23364e,#09131f);align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#rotate span{font-size:80px;color:var(--gold)}#rotate h2{font-size:22px;margin:20px}#rotate p{color:var(--muted)}}
/* Rebirth theatre */
.rebirth-stage{text-align:center;padding:32px 16px;min-height:310px;background:radial-gradient(ellipse at 50% 35%,#7759bb55,transparent 65%);position:relative;overflow:hidden}.rebirth-stage p{line-height:2;margin:20px auto;max-width:700px}.rebirth-stage h2{color:#f7dc9e;text-shadow:0 0 24px #b998f9}.rebirth-class .birth-art{filter:drop-shadow(0 0 24px #bc9bfd77);animation:birth-reveal .8s ease-out}.potential-reels{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:24px auto;max-width:720px}.potential-reel{border:1px solid #b4946355;border-radius:8px;background:linear-gradient(#0d1025,#353154,#0d1025);padding:14px 4px;box-shadow:inset 0 2px 12px #0008}.potential-reel strong{display:block;font-size:36px;line-height:1.8;color:#fff}.potential-reel small{display:block;color:#c1b5cb}.grade-best{color:#ffe6a1!important;text-shadow:0 0 8px #fff,0 0 25px #ffbb3d;animation:grade-glow 1s ease-in-out infinite alternate}.potential-best{box-shadow:inset 0 0 70px #edb54a25}.warp-stage{animation:warp-in 1.4s ease-in both}.warp-stage>span{font-size:100px;display:block;color:#d6c3ff;text-shadow:0 0 60px #fff}@keyframes birth-reveal{from{opacity:0;transform:scale(1.2);filter:brightness(4)}to{opacity:1;transform:scale(1)}}@keyframes grade-glow{to{filter:brightness(1.4);transform:scale(1.08)}}@keyframes warp-in{to{transform:scale(2.5);filter:brightness(5);opacity:0}}