:root{--gold:#d8ad58;--edge:#b98b40;--ink:#140f09}body:has(.select-shell):before,body:has(.game-shell):before,body:has(.select-shell):after,body:has(.game-shell):after{display:none}button{font:inherit;color:#f9e9c0;border:1px solid #87632e;border-radius:7px;background:linear-gradient(#33271a,#14110d);cursor:pointer;min-height:44px;padding:8px 12px;touch-action:manipulation}button:disabled{opacity:.6;cursor:wait}button:hover{border-color:#f3d28a}button:focus-visible{outline:2px solid #ffe2a0;outline-offset:2px}[hidden]{display:none!important}.gold{background:linear-gradient(#a87931,#654017);border-color:#e0b364;color:#fff0c3;font-weight:700;min-height:46px}h1,h2,p{overflow-wrap:anywhere}.ornate{border:1px solid var(--edge);border-radius:12px;background:linear-gradient(130deg,#23190fef,#090b09e8);box-shadow:inset 0 0 0 2px #372718,0 3px 15px #0007}.ornate:before{pointer-events:none}#toast{position:fixed;z-index:30;left:50%;top:max(18px,env(safe-area-inset-top));transform:translateX(-50%);padding:14px 20px;border:1px solid #e4be73;border-radius:8px;background:#21190af5;color:#ffe3a1;max-width:90vw;width:max-content;box-shadow:0 5px 20px #0008}body.selection{background:#2b2414 url('assets/ui/selection-background.png') center/cover fixed}.select-shell{min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));display:grid;grid-template-columns:260px minmax(200px,1fr) 310px;grid-template-rows:auto 1fr;gap:24px;max-width:1600px;margin:auto;align-items:center;background:linear-gradient(90deg,#0b080730,transparent 50%,#0b080730)}.select-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;text-shadow:0 2px 5px #000}.select-head h1{font-family:Georgia,serif;color:#ffe0a1;margin:5px 0;font-size:30px}.select-head small{font-size:11px;letter-spacing:.15em}.select-head button{background:#18120ddb}.character-list{align-self:stretch;margin-block:35px;padding:18px;display:flex;flex-direction:column;gap:12px;min-height:250px;max-height:75dvh}.character-list h2,.character-controls h2{font-size:22px;margin:0 0 15px}.list-scroll{flex:1;overflow:auto;min-height:80px}.character-row{width:100%;display:flex;flex-direction:column;text-align:left;gap:5px;margin-bottom:8px;padding:12px}.character-row strong{color:#f6dda6;font-size:17px}.character-row span{font-size:12px;color:#d6c6a4}.character-row.active{border-color:#eac36c;background:linear-gradient(90deg,#782411d9,#2e2116)}.empty{font-size:14px;color:#ccb58b;line-height:1.8}.character-stage{position:relative;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;isolation:isolate}.stage-title{text-shadow:0 2px 5px #000}.stage-title span{color:#fff0c3;letter-spacing:.13em}.stage-title h2{font-size:28px;color:#ffdb7e;margin:10px}.character-stage canvas{width:min(100%,510px);height:400px;object-fit:contain;filter:drop-shadow(0 5px 3px #0008)}.pedestal{position:absolute;bottom:70px;left:10%;width:80%;height:50px;border:2px solid #c8b07577;background:radial-gradient(ellipse,#dfc88344,#16292399);border-radius:50%;z-index:-1}.stage-caption{color:#fff0c9;text-shadow:0 2px 4px #000;background:#130d0680;padding:7px 12px;border-radius:5px;font-size:14px}.character-controls{padding:22px}.factions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:15px}.factions button{display:flex;align-items:center;flex-direction:column;font-size:13px;padding:12px 4px;gap:8px}.factions b{font-size:30px;color:#eac475;font-family:serif}.genders{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0 22px}[aria-pressed=true]{border-color:#f6cc78;background:linear-gradient(#674923,#362415);box-shadow:inset 0 0 12px #dda94a20}#createForm .gold{width:100%;margin-top:16px}#createError{color:#ffb399;font-size:13px;margin-bottom:0}.game-shell{position:relative;width:100%;height:100dvh;min-height:320px;overflow:hidden;background:#252c20;font-size:14px}.ingame{overflow:hidden}.ingame #app{height:100dvh}#world{position:absolute;inset:0;width:100%;height:100%}.player{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));display:flex;gap:10px;padding:10px;width:290px;align-items:center}.player>div{flex:1;min-width:0}.player strong{font-size:18px;text-shadow:0 2px #000}.level{float:right;color:#e9cb82;font-size:12px;margin-top:5px}.player canvas{width:64px;height:72px;object-fit:contain;border:1px solid #bd914b;border-radius:50%;background:#17120c}.bar{height:18px;border-radius:10px;border:1px solid #b39554;margin-top:5px;text-align:center;font-size:11px;text-shadow:0 1px 2px #000;background:#101010}.hp{background:linear-gradient(#ff6860,#9e0606)}.mp{background:linear-gradient(#649dff,#133aab)}.xp{background:linear-gradient(90deg,#b08a35 2%,#17160e 2%)}.map-hud{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;align-items:flex-start;gap:9px}.extras{display:flex;flex-direction:column;gap:7px}.extras button{width:72px;min-height:62px;display:flex;flex-direction:column;align-items:center;padding:4px;font-size:10px;gap:3px;background:#16150eea}.extras b{font-size:25px;color:#f3ce7b}.minimap{width:205px;padding:7px}.map-title{display:flex;justify-content:space-between;gap:5px;font-family:Georgia,serif;color:#ffdfa0;font-size:14px;padding-bottom:6px}.map-title span{white-space:nowrap;font-size:12px}.minimap canvas{width:100%;height:115px;border:1px solid #a78545;background:#253422}.map-buttons{display:grid;gap:5px;margin-top:5px}.map-buttons button{min-height:38px;padding:4px}.quick{position:absolute;right:0;top:calc(100% + 8px);display:flex;gap:8px}.quick button{width:54px;height:54px;display:flex;align-items:center;justify-content:center;gap:2px;background:#16150ee8}.potion{display:inline-block;width:18px;height:25px;border:2px solid #e9d1b5;border-radius:5px 5px 10px 10px;position:relative;box-shadow:inset 3px 0 4px #fff5}.potion:before{content:'';position:absolute;width:7px;height:8px;top:-9px;left:3px;background:#bfc5c6;border:1px solid #eee}.red{background:#be2529}.blue{background:#1557e4}.actor{position:absolute;left:50%;top:55%;width:0;height:0;pointer-events:none}.actor canvas{position:absolute;width:273px;height:254px;left:-130px;top:-179px}.nameplate{position:absolute;bottom:145px;left:-150px;width:300px;text-align:center;color:#edff9b;font-weight:700;text-shadow:1px 1px #000,-1px -1px #000,0 2px 3px #000}.nameplate small{display:block;color:#fff;font-size:12px;margin-top:3px}.joystick{position:absolute;bottom:116px;left:max(25px,env(safe-area-inset-left));width:130px;height:130px;border:2px solid #cead61aa;border-radius:50%;background:#211c0e70;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:8px;color:#d4aa6590}.joystick i{position:absolute;left:35px;top:35px;width:56px;height:56px;border:1px solid #cfb36b;border-radius:50%;background:linear-gradient(#d6b56eaa,#685334aa)}.chat-group{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:110px;width:min(420px,52vw)}.auto-controls{display:flex;justify-content:flex-end;gap:14px;margin-bottom:9px}.auto-controls button{width:62px;height:62px;border:2px solid #d8b266;border-radius:50%;background:#171710dc;padding:1px;font-size:29px;display:flex;align-items:center;flex-direction:column;line-height:1}.auto-controls span{font-size:12px;line-height:1.5}.chat{padding:4px 12px;color:#dfd3b6}.chat>button{border:0;background:none;display:flex;width:100%;justify-content:space-between;text-align:left;font-size:12px;padding:4px 0;min-height:32px;color:#eccc8f}.chat-content{font-size:12px;line-height:1.5;height:83px;overflow:auto}.chat-content p{margin:4px 0}.chat-content em{font-style:normal;color:#f2cb5f}.chat.collapsed .chat-content{display:none}.toolbar{position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));height:86px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));padding:4px;gap:0}.toolbar button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:0;border-right:1px solid #a7804233;border-radius:0;background:none;min-width:0;padding:3px 1px;font-size:13px;white-space:nowrap}.toolbar button:last-child{border:0}.toolbar b{font-size:32px;color:#f1ce77;font-weight:400;line-height:1.2;text-shadow:0 2px 3px #000}.tool-6,.tool-7{border-radius:50%;width:43px;background:radial-gradient(#eaaa2b,#980c04 55%,#130b05);border:1px solid #d8b266}.toolbar .tool-7{background:radial-gradient(#75ccff,#164dcc 55%,#080f29)}dialog{color:#f4e4ba;max-width:330px;padding:24px}dialog::backdrop{background:#0009}dialog button{width:100%;margin:6px 0}.preview-badge{position:absolute;top:155px;left:14px;font-size:10px;background:#15130ac9;border:1px solid #9a793a;color:#d2bc8b;padding:5px;border-radius:5px}
@media(orientation:portrait){.actor{top:52%}}
@media(max-width:900px){.select-shell{grid-template-columns:210px minmax(190px,1fr);gap:16px}.character-controls{grid-column:1/-1;display:block}.character-stage{min-height:400px}.character-stage canvas{height:300px}.character-list{margin-block:0;max-height:410px}.character-controls .factions{max-width:420px;margin-inline:auto}.genders{max-width:420px;margin-inline:auto}.character-controls form{max-width:420px;margin:auto}.character-controls h2{text-align:center}.player{width:245px}.minimap{width:170px}.extras button{width:60px;font-size:9px;min-height:55px}.minimap canvas{height:90px}}
@media(max-width:600px) and (orientation:portrait){.select-shell{grid-template-columns:1fr 1fr;padding:16px;gap:12px;align-items:start}.select-head h1{font-size:24px}.select-head small{font-size:8px}.character-list{grid-column:1/-1;max-height:185px;min-height:100px;padding:12px;gap:7px}.character-list h2{font-size:17px;margin:0}.list-scroll{min-height:38px;display:flex;gap:8px}.character-row{min-width:145px;margin:0;padding:7px}.character-row strong{font-size:14px}.character-row span{font-size:10px}.character-list #newChar{min-height:44px}.character-stage{grid-column:1/-1;min-height:270px}.character-stage canvas{height:215px;width:100%;margin-top:-20px}.stage-title h2{font-size:22px;margin:5px}.stage-title span{font-size:11px}.stage-caption{margin:0;font-size:12px}.pedestal{bottom:26px}.character-controls{padding:16px}.character-controls h2{font-size:20px}.factions button{padding:8px 4px;min-height:65px}.genders{margin:10px 0 15px}.player{width:calc(100% - 174px);min-width:155px;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));gap:4px;padding:6px}.player canvas{width:36px;height:45px}.player strong{font-size:12px}.level{font-size:10px;margin-top:1px}.bar{font-size:9px;height:15px;margin-top:3px}.map-hud{right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));gap:5px;flex-direction:column-reverse;align-items:flex-end}.minimap{width:152px;padding:5px}.map-title{font-size:11px;padding-bottom:4px}.map-title span{font-size:9px}.minimap canvas{height:83px}.map-buttons{gap:4px}.map-buttons button{min-height:44px;font-size:12px}.extras{flex-direction:row;gap:3px;margin-top:55px}.extras button{width:49px;min-height:49px;font-size:8px;gap:1px;padding:2px}.extras b{font-size:20px}.quick{top:218px;right:0;gap:6px}.quick button{width:48px;height:46px}.toolbar{height:124px;grid-template-columns:repeat(4,minmax(0,1fr));left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));bottom:max(6px,env(safe-area-inset-bottom))}.toolbar button{font-size:11px;min-height:55px;gap:1px}.toolbar b{font-size:25px}.tool-6,.tool-7{width:32px}.joystick{bottom:165px;width:90px;height:90px;left:14px}.joystick i{width:40px;height:40px;left:23px;top:23px}.chat-group{bottom:146px;right:8px;width:calc(100% - 119px);max-width:330px}.chat{padding:3px 9px}.chat-content{height:63px;font-size:10px}.auto-controls{gap:10px}.auto-controls button{width:48px;height:48px;font-size:23px}.auto-controls span{font-size:10px}.nameplate{font-size:13px}.preview-badge{top:120px;left:8px;max-width:145px;font-size:8px}}
@media(max-height:550px) and (orientation:landscape){.select-shell{grid-template-columns:180px minmax(160px,1fr) 260px;grid-template-rows:50px 1fr;gap:10px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));height:100dvh;min-height:350px}.select-head h1{font-size:20px}.select-head small{font-size:8px}.character-list{margin:0;max-height:calc(100dvh - 80px);min-height:180px;padding:12px}.character-list h2{font-size:17px}.character-stage{min-height:240px;height:calc(100dvh - 80px)}.character-stage canvas{height:230px;margin-top:-20px}.stage-title{display:none}.stage-caption{font-size:11px;margin:0}.character-controls{grid-column:auto;padding:12px}.character-controls h2{font-size:17px;margin:0 0 7px}.factions{gap:5px;margin-bottom:7px}.factions button{font-size:11px;padding:5px;gap:3px;min-height:55px}.factions b{font-size:20px}.genders{margin:7px 0;gap:5px}.genders button{min-height:44px;padding:4px}#createForm label{font-size:11px;margin-bottom:3px}#charName{padding:8px;font-size:16px}#createForm .gold{margin-top:7px;min-height:44px;padding:7px}#createError:empty{display:none}.player{top:max(7px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));width:235px;padding:5px;gap:6px}.player canvas{width:42px;height:48px}.player strong{font-size:13px}.bar{height:13px;font-size:9px;margin-top:2px}.map-hud{top:max(7px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));gap:5px}.minimap{width:150px;padding:4px}.map-title{font-size:11px;padding-bottom:3px}.map-title span{font-size:9px}.minimap canvas{height:50px}.map-buttons{grid-template-columns:1fr 1fr;gap:3px}.map-buttons button{font-size:10px;min-height:44px;padding:2px}.extras{gap:4px}.extras button{width:54px;min-height:44px;font-size:8px;padding:2px;gap:0}.extras b{font-size:17px}.quick{top:calc(100% + 5px);gap:5px}.quick button{height:44px;width:44px}.potion{height:19px;width:14px}.potion:before{left:1px}.toolbar{height:62px;bottom:max(5px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}.toolbar button{font-size:10px;gap:1px}.toolbar b{font-size:24px}.tool-6,.tool-7{width:32px}.joystick{bottom:80px;width:88px;height:88px;left:max(16px,env(safe-area-inset-left))}.joystick i{left:23px;top:23px;width:38px;height:38px}.chat-group{width:260px;bottom:80px;right:max(8px,env(safe-area-inset-right))}.chat-content{height:36px;font-size:9px}.chat>button{min-height:28px;font-size:10px}.auto-controls{gap:8px;margin-bottom:5px}.auto-controls button{height:44px;width:44px;font-size:21px}.auto-controls span{font-size:9px}.actor canvas{width:231px;height:215px;left:-110px;top:-152px}.nameplate{bottom:125px;font-size:12px}.preview-badge{top:98px;font-size:8px}.chat-group .chat{max-width:190px;margin-left:auto}}
.player img{width:64px;height:72px;object-fit:cover;border:1px solid #bd914b;border-radius:50%;background:#17120c}.mini-wrap{position:relative;height:115px}.mini-wrap img{width:100%;height:100%;object-fit:cover;border:1px solid #a78545}.mini-marker{position:absolute;width:7px;height:7px;border-radius:50%;border:1px solid #fff;background:#8dff57;left:50%;top:55%;box-shadow:0 0 4px #000}.character-stage canvas{aspect-ratio:1!important;object-fit:contain}@media(max-width:900px){.mini-wrap{height:90px}}@media(max-width:600px) and (orientation:portrait){.player img{width:36px;height:45px}.mini-wrap{height:83px}}@media(max-height:550px) and (orientation:landscape){.player img{width:42px;height:48px}.mini-wrap{height:50px}}
body.selection{background-image:linear-gradient(#76561944,#76561944),url(assets/ui/selection-background.png)}@media(min-height:451px) and (max-height:550px) and (orientation:landscape){.character-stage canvas{height:360px}}.game-shell .potion{min-width:14px}.game-shell button:disabled{cursor:default}
@media(max-width:600px) and (orientation:portrait){.toolbar{grid-template-columns:repeat(8,minmax(0,1fr));height:86px;padding:3px 1px}.toolbar button{font-size:9px;white-space:normal;line-height:1.25;gap:6px;min-height:72px}.toolbar button span{display:block;max-width:42px;min-height:24px}.toolbar b{font-size:26px}.chat-group{bottom:108px}.joystick{bottom:125px}.extras button{min-height:44px;width:49px}}.toolbar .tool-0{background:url(assets/ui/status.png) center/contain no-repeat;color:transparent;width:34px;height:34px}.toolbar .tool-1{background:url(assets/ui/bag.png) center/contain no-repeat;color:transparent;width:34px;height:34px}.toolbar .tool-2{background:url(assets/ui/skills.png) center/contain no-repeat;color:transparent;width:34px;height:34px}.toolbar .tool-5{background:url(assets/ui/system.png) center/contain no-repeat;color:transparent;width:34px;height:34px}.extras button:nth-child(1) b{background:url(assets/ui/shop.png) center/contain no-repeat;color:transparent;width:28px;height:28px}.extras button:nth-child(2) b{background:url(assets/ui/welfare.png) center/contain no-repeat;color:transparent;width:28px;height:28px}.extras button:nth-child(3) b{background:url(assets/ui/ranking.png) center/contain no-repeat;color:transparent;width:28px;height:28px}
.toolbar .tool-0,.toolbar .tool-1,.toolbar .tool-2,.toolbar .tool-5,.extras button b{background-size:300% 100%!important;background-position:left center!important;background-repeat:no-repeat!important}
.extras button:nth-child(2) b{background-size:200% 100%!important}
.mini-wrap{background:#141a11}.mini-wrap img{object-fit:contain}.mini-marker{transform:translate(-50%,-50%)}
.danger{color:#ffb7a0;border-color:#9f5137;background:linear-gradient(#4d2319,#28110d)}.character-controls #deleteCharacter{margin-top:15px;width:100%}
.character-stage canvas{aspect-ratio:auto!important}.factions button{justify-content:center;font-size:14px;min-height:48px}.factions{margin-bottom:12px}.chat>button{min-height:44px}@media(max-width:600px) and (orientation:portrait){.character-stage{min-height:320px}.character-stage canvas{height:265px;margin:0}.factions button{min-height:48px;font-size:13px}.chat-group{bottom:108px}.chat>button{min-height:44px}}@media(max-height:550px) and (orientation:landscape){.factions button{min-height:44px;font-size:12px}.chat>button{min-height:44px}}
@media(max-height:550px) and (orientation:landscape){.auto-controls{justify-content:flex-start}.chat-group{bottom:80px}}
.map-buttons button{min-height:44px}@media(max-width:600px) and (orientation:portrait){.list-scroll{display:block;max-height:100px}.character-row{min-width:0;width:100%;margin-bottom:6px}}
/* Shared selection framing: body size stays equal across classes and animation states. */.character-stage canvas{width:min(100%,700px);height:600px;margin:0}.character-stage{min-height:700px}@media(max-width:900px){.character-stage canvas{height:460px}.character-stage{min-height:550px}}@media(max-width:600px) and (orientation:portrait){.character-stage canvas{height:340px}.character-stage{min-height:405px}}@media(max-height:550px) and (orientation:landscape){.character-stage{min-height:240px}.character-stage canvas{height:285px}}@media(min-height:451px) and (max-height:550px) and (orientation:landscape){.character-stage canvas{height:390px}}
/* Icons retain their original artwork without extra button boxes. */.extras button{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}.extras button:hover{background:none!important}.auto-controls button{border:0!important;background:none!important;box-shadow:none!important}.toolbar button{border:0!important}.quick .empty-slot{border:1px solid #ab8c4a;background:#14160db8;border-radius:5px;box-shadow:none}.slot-add{font-size:28px;line-height:1;color:#d0b779;font-weight:300}.toolbar .tool-6,.toolbar .tool-7{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #9b844f;border-radius:5px;background:none!important;box-shadow:none;color:#d0b779;font-size:28px;text-shadow:none}.joystick{touch-action:none;user-select:none;cursor:grab}.joystick:active{cursor:grabbing}.joystick i{left:50%!important;top:50%!important;transform:translate(calc(-50% + var(--joy-x,0px)),calc(-50% + var(--joy-y,0px)));pointer-events:none}#world{touch-action:none;cursor:crosshair}