@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Noto+Serif+Thai:wght@500;600;700&display=swap');
:root{--gold:#d7b981;--bright:#f2dbab;--paper:#e8e6da;--muted:#a7b5b3;--line:#87714766}*{box-sizing:border-box}body{margin:0;background:#0a1114;color:var(--paper);font:14px Kanit,Tahoma,sans-serif;overflow:hidden}button,input,select{font:inherit}button{color:inherit;cursor:pointer;transition:background .16s,border-color .16s,filter .16s}button:disabled{opacity:.42;cursor:not-allowed}button:hover:not(:disabled){filter:brightness(1.16)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #e4c187;outline-offset:3px}input,select{color:#efece2;background:#091719;border:1px solid #68807566;padding:9px 11px;border-radius:4px;min-width:0}svg{display:block;pointer-events:none}.hidden{display:none!important}#app{height:100dvh;display:flex;flex-direction:column}.masthead{height:52px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #b89a5b55;background:linear-gradient(100deg,#18262a,#0d171d)}.wordmark{display:flex;align-items:center;gap:12px;font:600 23px Georgia,serif;letter-spacing:.2em;color:#eddbb4}.wordmark small{font:300 10px Kanit;display:block;letter-spacing:.12em;color:#a8bbb4;margin-top:-1px}.crest{font-size:33px;color:#dbb875}.edition{font:10px Kanit;letter-spacing:.3em;border-left:1px solid #bbaa7866;padding-left:14px;color:#a9bdb8}.session-info{display:flex;align-items:center;gap:9px;font-size:11px;color:#b2c1ba}.status-light{height:5px;width:5px;border-radius:50%;background:#82cda7;box-shadow:0 0 6px #89d6a8}.divider{height:15px;width:1px;background:#a8b4a044;margin:0 9px}.text-button,.sound-button{background:none;border:0;color:#cad2c9;font-size:11px}.sound-button{font-size:22px;padding:2px 12px}.sound-button.muted{color:#687b7a}kbd{font:10px Kanit;color:#d8c9a5;background:#101b20d9;border:1px solid #b7ac704d;border-radius:3px;padding:0 4px;white-space:nowrap}
#stage{position:relative;flex:1;min-height:0;overflow:hidden;outline:0;background:#1e302c}#world{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}#hud{position:absolute;inset:0;pointer-events:none}#hud button,#hud canvas,.glass{pointer-events:auto}.glass{background:linear-gradient(125deg,rgba(24,40,43,.94),rgba(10,20,25,.93));border:1px solid var(--line);box-shadow:0 8px 28px #0005;backdrop-filter:blur(7px)}.profile{position:absolute;top:19px;left:20px;width:283px;display:flex;gap:10px;padding:10px 12px 9px 8px;border-radius:7px}.portrait-ring{width:59px;height:64px;border:1px solid #c2a169;border-radius:4px;position:relative;flex:none;background:radial-gradient(ellipse,#66756a,#1a2b2a 65%)}.portrait-ring canvas{width:59px;height:64px}.portrait-ring b{position:absolute;bottom:-6px;left:16px;border:1px solid #bc9c62;background:#22332f;font-size:10px;padding:0 5px;border-radius:4px;color:#eedfb8}.vitals{flex:1;min-width:0}.player-heading{display:flex;align-items:center;justify-content:space-between;font-size:13px}.player-heading>span{font-size:9px;border:1px solid #86b8bd66;border-radius:2px;padding:0 4px;color:#9dd5dc}.fine{font-size:9px;color:#a0b3b0}.meter{height:12px;background:#050c11;border:1px solid #7a817233;position:relative;margin-top:4px;overflow:hidden;transform:skew(-3deg)}.meter i{display:block;height:100%;width:100%;transition:width .16s}.meter span{position:absolute;inset:0;text-align:center;font:8px/11px Tahoma;color:#f6eee1;text-shadow:0 1px 2px #000;transform:skew(3deg)}.health i{background:linear-gradient(90deg,#903b31,#d78c60);box-shadow:inset 0 1px #f6c38d66}.mana i{background:linear-gradient(90deg,#245f7c,#73bbce)}.enemy i{background:linear-gradient(90deg,#8b3430,#dc8f6a)}.zone-title{position:absolute;left:50%;top:20px;transform:translateX(-50%);display:flex;align-items:center;text-align:center;gap:16px;text-shadow:0 2px 5px #000}.zone-title small{font-size:9px;letter-spacing:.15em;color:#ece9da}.zone-title h1{font:600 21px 'Noto Serif Thai',Georgia,serif;color:#fff3d5;margin:4px 0;white-space:nowrap}.zone-title #zoneSafety{font-size:10px;color:#c5e8d8}.zone-line{width:40px;height:1px;background:linear-gradient(90deg,transparent,#eddaba)}.zone-line:last-child{transform:rotate(180deg)}.target{position:absolute;top:113px;left:50%;transform:translateX(-50%);width:235px;padding:8px 12px;border-radius:4px}.target>div:first-child{display:flex;justify-content:space-between;font-size:12px}.target small{font-size:9px;color:#d7b480}
.sidebar{position:absolute;top:19px;right:20px;width:223px}.minimap-frame{border-radius:7px;padding:8px}.panel-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#d7bf8d;letter-spacing:.06em;margin-bottom:7px}.panel-heading button{border:0;background:none;color:#d7bf8d;line-height:14px}#minimap{width:100%;height:125px;border:1px solid #c1a37055;border-radius:3px;cursor:crosshair;display:block}.map-footer{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#b6c5bd;padding:4px 2px 0}.map-footer button{background:none;border:0;width:20px;color:#c8cbb9;font-size:15px}.quest-card{margin-top:10px;border-radius:6px;padding:12px}.quest-link{display:block;width:100%;border:0;background:none;text-align:left;padding:0;color:#e8dfc5}.quest-link b{font-size:13px;font-weight:500}.quest-link p{font-size:11px;line-height:1.6;color:#b9c1b2;margin:7px 0}.tiny-progress{height:3px;background:#101915;margin:9px 0 6px}.tiny-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#708f77,#dabf86)}.quest-link small{font-size:10px;color:#d9c497}.outline-button{background:rgba(94,128,118,.13);border:1px solid #7d9a7a66;border-radius:3px;padding:7px 14px;color:#c9ddc8}.small{font-size:11px;padding:5px 10px}.quest-card .outline-button{width:100%;margin-top:9px}.realm-note{padding:15px 10px;color:#ece7d1;text-shadow:0 1px 4px #000;display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px;font-size:10px}.realm-note b{font:12px Georgia;color:#f7e4b2}.realm-note small{width:100%;font-size:9px;color:#d1d9c4}.utility-stack{position:absolute;top:116px;left:20px;display:flex;gap:5px}.utility-stack button{background:#14272bda;border:1px solid #a7985b70;padding:6px 10px;border-radius:4px;font-size:10px;color:#d1d9c6}.utility-stack button.active{background:#356752dd;border-color:#b7d293}.notifications{position:absolute;top:30%;left:50%;transform:translateX(-50%);text-align:center}.announcement{font:600 27px 'Noto Serif Thai',serif;color:#f9e4a5;text-shadow:0 2px 5px #111,0 0 25px #bc8844;padding:10px;animation:announce 3s both;white-space:nowrap}@keyframes announce{0%{opacity:0;transform:translateY(12px)}15%,65%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}.chat{position:absolute;bottom:44px;left:20px;width:295px;border-radius:5px;padding:8px 10px;background:linear-gradient(110deg,#0b191de0,#0b191dab);font-size:10px}.chat-tabs{display:flex;gap:12px;border-bottom:1px solid #81936f30;padding-bottom:5px;color:#96aaa4;font-size:9px}.chat-tabs b{color:#d7bf8c;font-weight:400}.chat-tabs #savedIndicator{margin-left:auto;font-size:8px}#chatLog{height:75px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;line-height:1.65;color:#d7dccd}#chatLog span{color:#90b7b3;margin-right:6px}
.skill-dock{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:8px}.skill-center{position:relative}.context-hint{position:absolute;bottom:90px;width:380px;left:50%;transform:translateX(-50%);text-align:center;font-size:10px;color:#ece6d0;text-shadow:0 2px 4px #000;background:linear-gradient(90deg,transparent,#0e1c2077,transparent);padding:4px 0}.skill-buttons{display:flex;gap:4px;padding:6px;border:1px solid #bc9a5977;background:linear-gradient(#22312de8,#101c21ed);border-radius:6px;box-shadow:0 5px 25px #0009}.ability{width:56px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at top,#405853,#111e26 80%);border:1px solid #b79b6866;border-radius:3px;padding:5px 2px 10px;overflow:hidden}.ability:hover{border-color:#e5c382}.ability-icon{width:32px;height:32px;color:#f0d79f;filter:drop-shadow(0 0 5px #cf9e3544)}.ability-icon svg{width:100%;height:100%}.ability small{font-size:8px;color:#e2dbbe;max-width:100%;white-space:nowrap;overflow:hidden}.ability kbd{position:absolute;bottom:0;right:1px;font-size:8px;border:0;background:#11181bc9;z-index:2}.potion-ability{background:radial-gradient(ellipse at top,#60362f,#191e24 80%)}.mana-ability{background:radial-gradient(ellipse at top,#2a5269,#111e26 80%)}.cooldown{position:absolute;inset:auto 0 0;height:0;background:#020809a3;z-index:1;pointer-events:none}.resource-orb{width:64px;height:64px;border-radius:50%;border:3px double #bba376;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 15px #000b,inset 0 -10px 20px #0b0d1666;position:relative}.resource-orb:after{content:'';position:absolute;inset:5px;border-radius:50%;border-top:1px solid #fff3}.hp-orb{background:radial-gradient(circle at 30% 20%,#d78a77,#903c31 40%,#401b23 80%)}.mp-orb{background:radial-gradient(circle at 30% 20%,#89d1d9,#28667f 45%,#172835 80%)}.resource-orb span{font:12px Georgia;color:#ffeed4}.resource-orb small{font-size:8px;color:#d4d7c4}.menu-dock{position:absolute;right:20px;bottom:38px;display:grid;grid-template-columns:repeat(3,54px);gap:7px}.menu-dock button{position:relative;border:1px solid #b3976266;background:linear-gradient(#22312edd,#0f1b21e8);border-radius:5px;display:flex;flex-direction:column;align-items:center;padding:7px 1px 5px;gap:2px;font-size:8px;color:#dedcc7;box-shadow:0 4px 10px #0005}.menu-dock button span{width:22px;height:22px;color:#cfb887}.menu-dock svg{width:100%;height:100%}.menu-dock kbd{position:absolute;top:2px;right:2px;font-size:7px;background:none;border:0;padding:0;color:#c0c3ad}.exp-track{position:absolute;bottom:0;height:6px;left:0;right:0;background:#162120;border-top:1px solid #a88a5555}.exp-track i{height:100%;width:0;display:block;background:linear-gradient(90deg,#a58446,#f0d39d);box-shadow:0 0 8px #ebc37c66}.exp-track span{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);font:9px Tahoma;color:#f8ecc7;text-shadow:0 1px 3px #000;white-space:nowrap}.bottom-status{height:27px;flex:none;background:#0b171b;border-top:1px solid #91a49133;padding:0 20px;display:flex;align-items:center;justify-content:space-between;color:#8ea69e;font-size:9px}.bottom-status #wallet{color:#dac58b;white-space:nowrap}
.selection{position:absolute;inset:0;overflow:auto;display:grid;grid-template-columns:1fr 1fr 345px;align-items:center;padding:45px 45px 40px;gap:15px}.selection-backdrop{position:absolute;inset:0;background:url('assets/huangzhou-map.png') center/cover;filter:blur(1px);transform:scale(1.015)}.selection.demon .selection-backdrop{background-image:url('assets/demon-map.png')}.selection-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,20,24,.95),rgba(5,20,24,.15) 53%,rgba(5,20,24,.82)),linear-gradient(0deg,#0a1a20,transparent 70%)}.creation-copy,.hero-preview,.creation-panel{position:relative;z-index:1}.overline{font:9px Georgia;letter-spacing:.28em;color:#b9c7b5}.creation-copy h1{font:600 clamp(27px,3.1vw,49px)/1.5 'Noto Serif Thai',Georgia,serif;color:#f6efd8;margin:20px 0}.creation-copy h1 em{font-style:normal;color:#d8b87b}.creation-copy>p{font-size:13px;line-height:1.9;color:#b8c7c2;font-weight:300}.feature-tags{display:flex;flex-wrap:wrap;gap:6px;margin:23px 0}.feature-tags span{padding:4px 9px;border:1px solid #9c906133;border-radius:3px;background:#19303588;font-size:9px;color:#c4caba}.continue-box{margin-top:28px;padding:13px;border:1px solid #c4a76b55;background:#1b353670;border-radius:5px;max-width:300px}.continue-box small{font-size:10px;color:#aacbbf}.continue-box b{display:block;font-size:13px;color:#edddb7;margin:5px 0 10px}.hero-preview{align-self:stretch;min-height:460px;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}.preview-aura{position:absolute;top:15%;bottom:15%;left:-20%;right:-20%;background:radial-gradient(ellipse,#b5bf7c33,transparent 68%)}#heroArt{position:relative;width:min(440px,40vw);height:auto;max-height:70vh;object-fit:contain;margin-top:-10px;filter:drop-shadow(0 14px 30px #0008)}.hero-caption{text-align:center;position:absolute;bottom:12px;width:100%;text-shadow:0 2px 8px #061b1c}.hero-caption small{color:#cfbc88;font-size:11px;letter-spacing:.07em}.hero-caption h2{font:600 30px 'Noto Serif Thai',serif;color:#f1dfb4;margin:4px}.hero-caption p{font-size:11px;color:#c6d6ca;line-height:1.6}.creation-panel{padding:22px 20px;border-radius:6px;background:linear-gradient(145deg,#213333dd,#0e1c23f0);box-shadow:0 16px 50px #0008}.step-label{font:11px Georgia;color:#c4aa75;display:flex;align-items:center;gap:10px;margin:3px 0 10px}.step-label span{font:12px Kanit;color:#dde5d8}.faction-picks{display:flex;gap:8px;margin-bottom:21px}.faction-pick{flex:1;padding:11px 8px;border:1px solid #80988144;background:#0e202588;border-radius:4px;display:grid;grid-template-columns:29px 1fr;align-items:center;text-align:left}.faction-pick>span{grid-row:span 2;font-size:25px;color:#cdb787}.faction-pick b{font-size:16px;font-weight:500}.faction-pick small{font-size:9px;color:#a4bcb3}.faction-pick.active{border-color:#d7b878;background:linear-gradient(135deg,#7a714330,#29433c80)}.faction-pick[data-faction=demon].active{background:#5e365a80;border-color:#bb9aca}.class-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:20px}.class-choice{background:#102027;border:1px solid #68807455;border-radius:4px;padding:7px 4px;display:flex;align-items:center;flex-direction:column;gap:5px;font-size:10px;color:#b7c8bc}.class-choice svg{width:23px;height:23px;color:#b5a275}.class-choice.active{border-color:#d6b574;background:#3c4a3866;color:#f1dfb3}.class-choice.active svg{color:#e1c186}#characterName{width:100%;margin-bottom:12px;background:#0b1920b3;border-color:#93a28055;color:#f1e4c3}.primary{border:1px solid #e0c493;border-radius:4px;background:linear-gradient(110deg,#b39152,#d2b077);color:#1c251f;padding:9px 16px;font-weight:600;box-shadow:inset 0 1px #fff3,0 4px 15px #060d1166}.primary.large{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 15px;font-size:14px}.creation-note{display:block;text-align:center;font-size:9px;color:#839e95;margin-top:12px;line-height:1.5}
.modal-layer{position:absolute;inset:0;z-index:20;background:#061015b5;display:grid;place-items:center;padding:25px;backdrop-filter:blur(4px)}.modal{width:min(840px,96vw);max-height:95%;display:flex;flex-direction:column;border-radius:9px;background:linear-gradient(125deg,#1c3032f5,#0c1a23f8);box-shadow:0 30px 100px #0009}.modal-header{padding:20px 25px 14px;border-bottom:1px solid #bfa16640;display:flex;align-items:center;justify-content:space-between;flex:none}.modal-header small{font:9px Georgia;letter-spacing:.2em;color:#8caba3}.modal-header h2{font:500 23px 'Noto Serif Thai',serif;color:#ead9b3;margin:4px 0 0}.close-button{border:1px solid #84907866;background:#0d1e24;width:32px;height:32px;border-radius:50%;font-size:23px;color:#c6cbb5;line-height:25px}.modal-content{padding:20px 25px;overflow:auto;min-height:0;scrollbar-color:#53746b #12262a;font-size:13px}.modal-content p{color:#b4c5bc;line-height:1.7}.modal-content h3{font-weight:500;color:#e6d4a8;font-size:16px}.modal-content h4{font-weight:500;color:#e3d9be}.muted{color:#91a89e!important;font-size:11px}.two-column{display:grid;grid-template-columns:1.12fr 1fr;gap:22px}.three-column{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}.tabs button{border:1px solid #6e897a55;padding:7px 12px;background:#102329;border-radius:3px;font-size:12px}.tabs button.active{background:#48624b66;color:#f4dfa8;border-color:#c6aa6b}.item-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.item-cell{min-height:59px;aspect-ratio:1;background:radial-gradient(ellipse at top,#2e4844,#11232b);border:1px solid #7e978566;border-radius:5px;position:relative;display:grid;place-items:center;padding:8px}.item-cell.empty{opacity:.38;cursor:default;background:#0d2025}.item-cell svg{width:29px;height:29px;color:#c6bb91}.item-cell.selected{outline:1px solid #f1d79f;box-shadow:0 0 12px #dcc77722}.item-cell small{position:absolute;right:4px;bottom:2px;font-size:10px}.item-cell .plus{top:2px;bottom:auto;color:#f7d990}.rarity1{border-color:#6dba86!important}.rarity2{border-color:#b199e7!important;box-shadow:inset 0 0 17px #9e78d525}.rarity3{border-color:#e6b969!important;box-shadow:inset 0 0 22px #d7aa4730}.rarity3 svg{color:#f6d391}.item-detail,.surface{background:#0c1c2280;border:1px solid #87956b33;border-radius:5px;padding:15px}.item-detail h3{margin:0 0 8px}.actions-row{margin-top:16px;display:flex;gap:6px;flex-wrap:wrap}.danger{color:#f4a097!important;border-color:#c4836866!important}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat-grid>div{background:#10232a;border:1px solid #70887633;padding:9px;border-radius:4px;color:#b4c6bc;font-size:11px;display:flex;justify-content:space-between}.stat-grid b{font-size:13px;color:#ece3c7}.equipment-row{border:1px solid #70857755;background:#13252b;border-radius:4px;padding:12px;margin-bottom:8px;display:flex;gap:12px;align-items:center;width:100%;text-align:left}.equipment-row svg{width:33px;height:33px;flex:none;color:#cbb687}.equipment-row b{display:block;font-size:12px;font-weight:500}.equipment-row small{color:#9db6a8;font-size:10px}.character-art{width:100%;height:340px;background:radial-gradient(ellipse,#68857844,transparent 70%);object-fit:contain}.detail-list{padding:0;list-style:none;font-size:12px;line-height:1.8;color:#b9c8bd}.detail-list li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #80997d22;padding:3px 0}.detail-list b{color:#e2d7b6}.shop-card{border:1px solid #718d7355;background:#102329;border-radius:4px;padding:13px;text-align:center}.shop-card svg{width:38px;height:38px;color:#dccda3;margin:auto}.shop-card h4{margin:7px 0 4px;font-size:12px}.shop-card p{font-size:10px;color:#a1b7a7;min-height:32px}.shop-card button{width:100%}.cost{color:#e3c182;font-size:12px;margin:9px 0}.check-row{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;margin:10px 0;color:#bdcabb}.check-row input{accent-color:#b99b5d;margin-top:4px}.chance-box{display:flex;gap:10px;margin:16px 0}.chance-box div{background:#0d2026;border:1px solid #8a916333;padding:13px;flex:1;text-align:center}.chance-box b{display:block;font:28px Georgia;color:#afd8b1}.chance-box .bad b{color:#e69c8e}.chance-box span{font-size:10px;color:#b3c1ad}.forge-core{padding:22px;background:radial-gradient(ellipse,#6a643330,#112229 65%);border:1px solid #9e986044;border-radius:6px;text-align:center}.forge-core svg{width:60px;height:60px;color:#e4c78d;margin:auto}.forge-core h3{font-size:14px}.enhance-level{font:44px Georgia;color:#edd099;margin:13px}.forge-result{padding:12px;background:#48683a55;border:1px solid #8cba7c66;border-radius:3px;color:#cee7b4;margin:12px 0}.forge-result.fail{background:#713d3540;border-color:#c38c7266;color:#f1b7a7}.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.book-card{background:#102129;border:1px solid #76927255;padding:10px;border-radius:5px;text-align:center}.book-card canvas{width:100%;height:120px;object-fit:contain}.book-card h4{font-size:12px;margin:5px 0}.book-card p{font-size:10px;line-height:1.6;margin:5px 0}.book-card.locked canvas{filter:brightness(.25)}.world-map-img{width:100%;max-height:270px;object-fit:cover;border:1px solid #a3946355;border-radius:5px}.zone-card{border:1px solid #8a9a6555;padding:12px;background:#10232a;border-radius:5px;text-align:left}.zone-card b{font-size:13px;display:block;color:#e4d5af}.zone-card small{font-size:10px;color:#abc1af;display:block;margin:6px 0}.zone-card.locked{opacity:.5}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.help-grid>div{border-bottom:1px solid #71867c33;padding:6px;font-size:12px;color:#b3c5bd;display:flex;justify-content:space-between}.death-layer{position:absolute;inset:0;display:grid;place-items:center;background:#0a141ca1;z-index:15;backdrop-filter:grayscale(.9)}.death-card{width:min(460px,90%);padding:35px;text-align:center;border-radius:7px}.death-symbol{font-size:60px;color:#d3c798}.death-card h2{font:500 23px 'Noto Serif Thai',serif;color:#ede3c5}.death-card p{font-size:12px;color:#adbdaf}.toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);padding:10px 20px;border:1px solid #bfab7180;border-radius:5px;background:#102328ec;color:#eadbb4;z-index:60;font-size:12px;box-shadow:0 5px 18px #0006;max-width:90%;text-align:center}.loading{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:radial-gradient(ellipse,#233832,#0c171e);color:#cbb788}.loading b{font-weight:400}.loading small{font-size:11px;color:#98b4a9}.loader{width:38px;height:38px;border-radius:50%;border:1px solid #9a8c5944;border-top-color:#e1c78c;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.selection{grid-template-columns:1fr 1fr 300px;padding:25px;gap:0}.creation-copy h1{font-size:30px}.creation-copy p{font-size:11px}.hero-caption{bottom:0}.creation-panel{padding:16px}.hero-preview{min-height:420px}.chat{width:223px;font-size:9px}.menu-dock{grid-template-columns:repeat(3,45px);gap:5px}.profile{width:244px}.sidebar{width:193px}.zone-title h1{font-size:17px}.zone-line{width:18px}.skill-dock{gap:4px}.ability{width:48px}.resource-orb{width:54px;height:54px}}
@media(max-width:800px){.masthead{height:44px;padding:0 12px}.edition,.divider{display:none}.wordmark{font-size:18px}.wordmark small{font-size:8px}.session-info{font-size:9px}.selection{grid-template-columns:1fr 285px;padding:20px;gap:12px}.creation-copy{position:absolute;left:22px;top:23px;width:45%;z-index:3}.creation-copy h1{font-size:24px;margin:10px 0}.creation-copy p,.feature-tags,.overline{display:none}.continue-box{margin-top:8px;max-width:230px;padding:8px}.continue-box b{font-size:11px}.continue-box button{font-size:10px;padding:6px}.hero-preview{grid-column:1;align-self:end;min-height:360px}.hero-preview canvas{width:100%;max-height:52vh;margin-top:80px}.hero-caption{bottom:-4px}.hero-caption h2{font-size:22px}.hero-caption p,.hero-caption small{font-size:9px}.creation-panel{grid-column:2}.profile{left:8px;top:8px;width:209px;padding:6px;gap:6px}.portrait-ring,.portrait-ring canvas{width:43px;height:50px}.portrait-ring b{left:10px}.player-heading{font-size:11px}.fine{font-size:8px}.zone-title{top:17px;left:52%}.zone-title small,.zone-line{display:none}.zone-title h1{font-size:13px}.zone-title #zoneSafety{font-size:9px}.sidebar{right:8px;top:8px;width:145px}.minimap-frame{padding:5px}#minimap{height:87px}.panel-heading{font-size:10px}.quest-card{padding:8px}.quest-link b{font-size:11px}.quest-link p,.quest-link small{font-size:9px}.realm-note{display:none}.utility-stack{left:8px;top:84px}.utility-stack button{font-size:9px;padding:5px}.chat{left:8px;bottom:105px;width:195px;padding:5px;font-size:8px}.chat-tabs{font-size:8px}#chatLog{height:52px}.skill-dock{bottom:24px;left:44%}.ability{width:43px;height:56px}.ability small{font-size:7px}.resource-orb{width:42px;height:42px}.resource-orb small{display:none}.resource-orb span{font-size:10px}.ability-icon{width:26px;height:26px}.context-hint{bottom:78px;font-size:9px;width:290px}.menu-dock{right:8px;bottom:24px;grid-template-columns:repeat(2,40px);gap:3px}.menu-dock button{font-size:7px;padding:4px}.menu-dock span{width:16px!important;height:16px!important}.bottom-status{padding:0 10px;font-size:8px}.bottom-status #bottomTip{max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-layer{padding:12px}.modal-header{padding:13px 17px}.modal-content{padding:15px 17px}.modal-header h2{font-size:19px}.two-column{gap:12px}.item-grid{grid-template-columns:repeat(5,1fr);gap:4px}.item-cell{min-height:44px}.target{top:90px;left:48%;width:180px}.target>div:first-child{font-size:10px}}
@media(max-width:550px){.selection{display:flex;flex-direction:column;align-items:stretch;padding:15px;overflow:auto}.creation-copy{display:none}.hero-preview{position:absolute;left:0;right:0;top:0;height:230px;min-height:0;opacity:.55}.hero-preview canvas{height:230px;width:260px;margin:0}.hero-caption{display:none}.creation-panel{margin:185px auto 0;width:100%;max-width:360px}.faction-picks,.class-choices{margin-bottom:12px}.profile{width:178px}.sidebar{width:120px}.zone-title,.quest-card{display:none}.utility-stack{top:88px}.utility-stack button{padding:4px 6px}.chat{width:170px;bottom:112px}.chat-tabs span:nth-child(2){display:none}.menu-dock{grid-template-columns:repeat(3,33px);bottom:87px}.skill-dock{left:50%;gap:3px}.ability{width:43px}.resource-orb{width:32px;height:32px;border-width:1px}.resource-orb span{font-size:8px}.context-hint{bottom:75px}.two-column,.three-column{grid-template-columns:1fr}.item-grid{grid-template-columns:repeat(6,1fr)}.character-art{height:230px}.book-grid{grid-template-columns:1fr 1fr}.modal-content{font-size:12px}.session-info #connection{max-width:72px;white-space:nowrap;overflow:hidden}.bottom-status #bottomTip{max-width:48%}.announcement{font-size:20px}.target{top:93px;left:49%;width:160px}}

/* Equipment art: readable inventory illustrations and worn costume preview. */
.item-art{display:block!important;width:72px!important;height:72px!important;object-fit:contain;filter:drop-shadow(0 3px 5px #0009);flex:none}
.item-cell{min-height:100px!important;min-width:0;width:100%;aspect-ratio:auto;position:relative;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;padding:5px 3px 18px!important;overflow:hidden}
.item-cell .item-art{width:65px!important;height:65px!important;max-width:100%}
.item-caption{font-size:9px;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e7dac0}
.item-cell small{z-index:2;background:#102220e6;padding:1px 4px;border-radius:3px}
.item-detail .item-hero{width:170px!important;height:170px!important;margin:0 auto 12px;background:radial-gradient(ellipse,#9b794630,transparent 68%)}
.equipment-row .item-art{width:68px!important;height:68px!important}
.equipment-row{min-height:86px;align-items:center}
.forge-core .forge-item{width:190px!important;height:190px!important;margin:0 auto}
.shop-card>.item-art{width:100px!important;height:100px!important;margin:0 auto}
.character-art[data-avatar]{background:radial-gradient(ellipse at 50% 65%,#3d696648,transparent 66%);height:390px;max-width:100%}
@media(max-width:800px){.item-cell{min-height:83px!important}.item-cell .item-art{width:50px!important;height:50px!important}.item-caption{font-size:8px}.item-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}

.outfit-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.outfit-card{border:1px solid #ae986344;border-radius:8px;text-align:center;background:radial-gradient(ellipse at 50% 40%,#65847a33,#0b191b);padding:8px 5px}.outfit-card canvas{width:100%;height:auto}.outfit-card b,.outfit-card small{display:block}.outfit-card b{font-size:12px;color:#ead6a9}.outfit-card small{font-size:9px;color:#9dafa6;margin-top:5px}@media(max-width:550px){.outfit-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Inventory uses its available panel width, without square-cell minimum overflow. */
.modal{max-width:100%;min-width:0}
.modal-content{container-type:inline-size}
.two-column>*,.inventory-layout,.inventory-layout .item-grid{min-width:0}
.inventory-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
.inventory-layout .item-grid{grid-template-columns:repeat(auto-fit,minmax(min(72px,100%),1fr))!important;gap:8px}
.inventory-layout .item-cell{height:100px;min-height:100px!important;max-width:100%;margin:0}
.inventory-layout .item-caption{width:100%;text-align:center}
.inventory-layout .item-art{max-width:100%;object-fit:contain}
.inventory-layout .item-detail{min-width:0;overflow-wrap:anywhere}
.inventory-layout .panel-heading{flex-wrap:wrap;gap:6px}
@container(max-width:640px){.inventory-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.inventory-layout{grid-template-columns:minmax(0,1fr)}}

.world-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:18px}.destination{text-align:left;min-width:0;padding:15px;background:linear-gradient(125deg,#284e48,#10232c);border:1px solid #b4a16d66;border-radius:7px}.destination b,.destination small,.destination span{display:block}.destination b{font-size:14px;color:#e6d4ac}.destination small{font-size:10px;margin:7px 0;color:#a6c5ba}.destination span{font-size:11px;color:#ebd59c}.destination.active{border-color:#e4c38d;opacity:1}.adventure-banner{padding:22px;border:1px solid #c6a86b77;border-radius:8px;background:linear-gradient(115deg,#294d47,#172634);margin-bottom:20px}.adventure-banner h3{font-size:25px;margin:8px 0}.adventure-banner button{margin-right:8px;margin-top:8px}.daily-card{background:#132930;border:1px solid #8ca38255;padding:16px;border-radius:7px}.daily-card strong{display:block;font:27px Georgia;color:#efd598;margin:12px 0}.daily-card p{font-size:11px}.daily-card button{width:100%;font-size:11px}.field-event{position:absolute;left:50%;top:84px;transform:translateX(-50%);background:#122a2cdf;color:#e9d2a3;border:1px solid #9d936759;border-radius:20px;padding:6px 15px;font-size:11px;pointer-events:auto}.utility-stack{flex-wrap:wrap;max-width:310px}.compact-ui .chat,.compact-ui .quest-card,.compact-ui .realm-note{display:none}.compact-ui .sidebar{width:165px}.compact-ui .zone-title h1{font-size:17px}.compact-ui .zone-title small{font-size:9px}.compact-ui .profile{transform:scale(.88);transform-origin:top left}.compact-ui .skill-dock{transform:translateX(-50%) scale(.92);transform-origin:bottom center}@media(max-width:800px){.world-directory{grid-template-columns:repeat(2,minmax(0,1fr))}.field-event{top:142px;font-size:9px;max-width:70%;white-space:nowrap}.utility-stack{max-width:230px}}@media(max-width:550px){.world-directory{grid-template-columns:1fr}.field-event{top:147px}.daily-card{padding:12px}}

.affix-list{margin-top:12px;text-align:left;padding:12px;background:#293d3455;border:1px solid #839b7655;border-radius:5px}.affix-list small{display:block;color:#d8c796;margin-bottom:6px}.affix-list div{font-size:12px;color:#aee5c1;line-height:1.8}.affix-list p{font-size:10px!important;margin-bottom:0}.worn-affixes{display:block;font-size:10px;color:#aee5c1;line-height:1.6;margin-top:5px}

.skill-tree{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.skill-card{padding:17px;border:1px solid #9cb99e66;border-radius:8px;background:linear-gradient(125deg,#254139,#132330)}.skill-card small{color:#cbb280}.skill-card p{font-size:12px}.skill-card strong{color:#a7dfc5}.skill-card.locked{opacity:.55}.skill-summary b{color:#e7c681}.advanced-hotbar{display:flex;gap:5px;margin-bottom:5px}.advanced-hotbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-width:0;background:#142c2ef2;border:1px solid #a9996577;border-radius:5px;padding:5px;color:#e4d0a3;font-size:10px}.advanced-hotbar small{font-size:9px;color:#9acdc9}.context-hint{bottom:140px}@media(max-width:550px){.skill-tree{grid-template-columns:1fr}.advanced-hotbar button{font-size:8px}.advanced-hotbar kbd,.advanced-hotbar small{font-size:8px}.context-hint{bottom:132px}.chat{bottom:175px}.menu-dock{bottom:155px}}

.skill-picture{display:block;width:54px;height:54px;border:1px solid #c9b17988;border-radius:7px;object-fit:contain}.skill-card>.skill-picture{width:68px;height:68px;float:left;margin:0 12px 8px 0}.ability-icon .skill-picture{width:100%;height:100%;border-radius:3px}.advanced-hotbar button{position:relative;padding-left:42px;min-height:49px}.advanced-hotbar button:last-child{padding-left:5px;flex:0 0 48px}.extra-picture{position:absolute;left:4px;top:7px}.extra-picture .skill-picture{width:34px;height:34px}.buff-tray{position:absolute;left:22px;top:178px;display:flex;gap:7px;pointer-events:auto}.buff-badge{position:relative}.buff-badge .skill-picture{width:42px;height:42px}.buff-badge span{position:absolute;bottom:-4px;left:0;right:0;text-align:center;background:#081916ec;color:#f3deab;font-size:9px;border-radius:3px}.buff-badge.passive{opacity:.8}.context-hint{bottom:150px}@media(max-width:800px){.buff-tray{left:10px;top:166px}.buff-badge .skill-picture{width:33px;height:33px}.advanced-hotbar button{font-size:8px;padding-left:32px}.extra-picture .skill-picture{width:25px;height:25px}.extra-picture{top:10px}}

/* Ascension and economy */
.market-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.market-cards .item-art{width:100px;height:100px}.market-cards button{display:block;width:100%;margin-top:12px}.class-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.current-class{border:1px solid #eed28d!important;box-shadow:0 0 25px #e5bd4d22}.tier-emblem{font-size:44px;color:#f8de9f;text-shadow:0 0 22px #d7a44a}.exchange-banner{display:flex;justify-content:space-between;gap:20px;padding:20px;background:linear-gradient(130deg,#172e32,#20213c);border:1px solid #a8bcad33;border-radius:12px}.exchange-banner .price{color:#97efcf}.trade-chart{display:block;width:100%;height:210px;background:#101e24;border:1px solid #405857;border-radius:12px;margin-top:14px}.exchange-form{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0;align-items:end}.exchange-form label{display:grid;gap:6px}.exchange-form input,.exchange-form select,.exchange-form>select{max-width:100%;padding:12px;border:1px solid #586963;background:#12282a;color:#fff3cd;border-radius:8px}.order-table>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;border-bottom:1px solid #8fabac25}.trade-history{max-height:230px;overflow:auto;font-size:12px}.trade-history time{color:#94afab}.positive{color:#94ecc9}.advanced-hotbar{flex-wrap:wrap}.utility-stack{max-height:65vh;overflow-y:auto}.equipment-row{min-width:0}.equipment-row>div{min-width:0}.equipment-row b{overflow-wrap:anywhere}@media(max-width:720px){.class-path{grid-template-columns:1fr}.exchange-banner{display:block}.order-table>div{flex-wrap:wrap}}

/* Viewport-bounded dialogs: only the content scrolls, never the header. */
.modal-layer{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:clamp(8px,2vh,24px);height:100vh;height:100dvh;min-height:0;overflow:hidden}
.modal{width:min(840px,100%);height:100%;max-height:900px;min-height:0;overflow:hidden;flex:0 1 840px}
.modal-header{flex:0 0 auto;min-width:0;gap:12px}
.modal-header>div{min-width:0}.modal-header h2{overflow-wrap:anywhere}
.modal-header .close-button{flex:none;min-width:36px;min-height:36px}
.modal-content{flex:1 1 0;min-height:0;min-width:0;max-width:100%;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;padding-bottom:32px;scroll-padding-block:16px;overflow-wrap:anywhere}
.modal-content:focus-visible{outline:1px solid #d7b98188;outline-offset:-3px}
.modal-content::-webkit-scrollbar{width:12px}.modal-content::-webkit-scrollbar-track{background:#12262a}.modal-content::-webkit-scrollbar-thumb{background:#64897b;border:3px solid #12262a;border-radius:10px}
.modal-content .trade-history{max-height:none;overflow:visible}
.modal-content .two-column>*,.modal-content .three-column>*,.modal-content .class-path>*,.modal-content .skill-book>*{min-width:0}
.modal-content .tabs{flex-wrap:wrap}.modal-content .actions-row{flex-wrap:wrap}
@media(max-height:600px){.modal-layer{padding:8px}.modal-header{padding:9px 15px}.modal-header small{display:none}.modal-header h2{font-size:18px}.modal-content{padding:12px 15px 28px}}
@media(max-width:600px){.modal-layer{padding:6px}.modal{border-radius:6px}.modal-content .two-column,.modal-content .three-column,.modal-content .class-path{grid-template-columns:minmax(0,1fr)}}
/* Reference-led atlas interface: restrained navy, parchment and engraved gold. */
.modal{border:1px solid #c9ab68;box-shadow:0 22px 90px #030817cc,0 0 0 3px #1a2d46;border-radius:10px;background:#14223a}
.modal-header{background:linear-gradient(110deg,#132645,#23466b 60%,#10213b);border-bottom:2px solid #c4a35b;padding:20px 25px;color:#f9e7b3}
.modal-header small{color:#c3cfdf;letter-spacing:2px}.modal-header h2{color:#ffedc2}.modal-header .close-button{background:#713736;border-color:#cfae71;color:#fff3dd}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"]){background:linear-gradient(130deg,#f7f2e1,#e9dec2);color:#26364e}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"]) :is(h2,h3,b,strong){color:#23385b}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"]) :is(.muted,small,.panel-heading){color:#756247}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="character"]) :is(.surface,.item-detail,.shop-card,.equipment-row){background:#fffaf0;border:1px solid #c4b38c;box-shadow:0 2px 4px #78633516;color:#33415a;border-radius:7px}
.modal-content[data-panel="inventory"] .item-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;align-content:start;padding:12px;background:#dce5eb;border:1px solid #a8bbcc;border-radius:7px}
.modal-content[data-panel="inventory"] .item-cell{width:100%;min-width:0;height:auto;aspect-ratio:1;position:relative;background:linear-gradient(145deg,#f8f0dc,#dac9a7);border:1px solid #b49d72;border-radius:6px;padding:5px;box-shadow:inset 0 0 0 2px #fff8e650}
.modal-content[data-panel="inventory"] .item-cell[hidden]{display:none!important}
.modal-content[data-panel="inventory"] .item-cell .item-art{width:80%;height:80%;margin:auto;display:block}
.modal-content[data-panel="inventory"] .item-cell .item-caption{display:none}
.modal-content[data-panel="inventory"] .item-cell small{background:#203655dc;color:#fff4d8;padding:1px 4px;border-radius:3px;font-weight:bold}
.modal-content[data-panel="inventory"] .item-cell.rarity1{border-color:#45998e;background:linear-gradient(145deg,#edf8e7,#b6d8cb)}
.modal-content[data-panel="inventory"] .item-cell.rarity2{border-color:#a45ad2;background:linear-gradient(145deg,#f2defe,#bea9d4)}
.modal-content[data-panel="inventory"] .item-cell.rarity3{border-color:#bf862b;background:linear-gradient(145deg,#fff2bc,#e1b769)}
.modal-content[data-panel="inventory"] .item-cell.selected{outline:2px solid #224d83;outline-offset:2px;box-shadow:0 0 12px #577dac55}
.inventory-toolbar{display:grid;gap:10px;margin:12px 0}.inventory-categories{display:flex;gap:5px;flex-wrap:wrap}.inventory-categories button{padding:8px 12px;border:1px solid #bba575;border-radius:5px;background:#f7f0dd;color:#34435b}.inventory-categories button.active{background:#224773;color:#fff1c5;border-color:#d6ad56}.inventory-filters{display:flex;flex-wrap:wrap;gap:7px}.inventory-filters input{flex:1 1 140px;min-width:0}.inventory-filters :is(input,select){padding:8px;border:1px solid #a0b1c6;border-radius:5px;background:#fffdf5;color:#263955;max-width:100%}.inventory-filters select{flex:1 1 100px}.filter-count{font-size:11px}
.modal-content[data-panel="inventory"] .inventory-layout{grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:18px}.item-detail .detail-list li{border-bottom-color:#cbbb9c}.modal-content .item-detail .affix-list{background:#e9e2ee;color:#604080}.modal-content[data-panel="inventory"] .item-detail{padding:18px}.modal-content[data-panel="inventory"] .item-hero{width:120px;height:120px;margin:auto;display:block}
.atelier-banner{display:flex;align-items:center;justify-content:space-between;min-height:160px;padding:15px 25px;margin-bottom:20px;border:1px solid #ac9160;border-radius:8px;background:radial-gradient(ellipse at 85% 50%,#bdcdd5,#e1e5df 30%,#f7ecd2 75%);overflow:hidden}.atelier-banner canvas{flex:none;width:130px;height:150px}.atelier-banner h3{font-size:24px;margin:9px 0}.atelier-banner p{font-size:12px}.atelier-banner small{font-size:10px;letter-spacing:1.3px}
.modal-content[data-panel="market"] .market-cards .surface{padding:14px;background:#fff9e9}.modal-content[data-panel="market"] .market-cards .item-art{display:block;margin:0 auto}.modal-content[data-panel="market"] .order-table>div{border-bottom-color:#c4b797}.modal-content[data-panel="market"] .exchange-form :is(select,input){background:#fffaf0;color:#263955;border-color:#b5a17c}
.modal-content[data-panel="map"] .world-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.modal-content[data-panel="map"] .destination{background:#fffaea;border:1px solid #bbaa85;color:#253653;padding:12px;min-height:95px;text-align:left;border-radius:6px}.modal-content[data-panel="map"] .destination.active{background:#233e65;border-color:#d6b168;opacity:1}.modal-content[data-panel="map"] .destination.active :is(b,small,span){color:#fff0c5}.modal-content[data-panel="map"] .destination:disabled:not(.active){opacity:.5}.modal-content[data-panel="map"] .world-map-img{border:2px solid #b59b5e;border-radius:8px;max-height:400px;object-fit:contain;background:#14243a}.map-region-title{border-left:4px solid #b79851;padding-left:12px;margin-top:24px}.audio-credit{font-size:12px;line-height:1.8;color:#b6c6d5;border-top:1px solid #8e9eaf40;padding-top:18px}
@media(max-width:680px){.modal-content[data-panel="inventory"] .inventory-layout{grid-template-columns:minmax(0,1fr)}.modal-content[data-panel="inventory"] .item-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.modal-content[data-panel="map"] .world-directory{grid-template-columns:repeat(2,minmax(0,1fr))}.atelier-banner{padding:12px}.atelier-banner h3{font-size:19px}.atelier-banner canvas{width:95px;height:115px}}
.modal-content[data-panel="inventory"] .item-cell{min-height:0!important;padding:5px!important;justify-content:center;aspect-ratio:1}
.modal-content[data-panel="inventory"] .item-cell .item-art{width:82%!important;height:auto!important;aspect-ratio:1;flex:none}
.modal-content[data-panel="map"] .destination span{color:#305078}
/* HUD: status badges and actions occupy separate measured areas. */
.buff-tray{left:20px;max-width:244px;flex-wrap:wrap;gap:6px;z-index:8;padding:3px 0 7px;pointer-events:auto}
.buff-badge .skill-picture{width:33px;height:33px}.buff-badge span{font-size:8px;bottom:-5px}.utility-stack{left:20px;width:220px;max-width:220px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;overflow:auto;align-content:start;padding:2px 4px 6px 0;scrollbar-width:thin}.utility-stack button{min-width:0;min-height:35px;padding:7px 6px;font-size:10px;white-space:normal;background:linear-gradient(#203953,#152a40);border:1px solid #8e998577;color:#e9e3c8;border-radius:5px}.utility-stack button.active{border-color:#e5c472;background:linear-gradient(#4d6146,#283e38);color:#fff2bf}
.minimap-frame{background:linear-gradient(145deg,#183752f5,#0c213bf5);border:1px solid #bd9c56;box-shadow:0 5px 20px #0005,inset 0 0 0 2px #647c9040}#minimap{display:block;width:100%;height:auto;aspect-ratio:224/142;border:1px solid #e1c88788;border-radius:5px;image-rendering:auto}.minimap-legend{display:flex;justify-content:space-around;gap:5px;color:#c8d8df;font-size:9px;padding:5px 0}.minimap-legend span:first-child{color:#ffdc78}.minimap-legend span:nth-child(2){color:#7eeeff}
.boss-panel{background:linear-gradient(130deg,#f5efdc,#e9ddc0);color:#263c58}.boss-region{margin-bottom:25px}.boss-region>h3{border-left:4px solid #bf9956;padding:8px 12px;background:#233d60;color:#fff0c9}.boss-region>h3 small{display:block;color:#c2d6e5;font-size:11px;margin-top:5px}.boss-panel>.muted{color:#6c604d}.boss-cards{display:grid;gap:10px}.boss-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:15px;background:#fff9e9;border:1px solid #b8a37a;border-radius:7px;box-shadow:0 2px 6px #44351915}.boss-card canvas{width:96px;height:105px;background:radial-gradient(#284759,#111d2d);border:1px solid #bf9d5b;border-radius:6px}.boss-card h3{margin:4px 0;color:#283953}.boss-card p{font-size:12px;margin:6px 0}.boss-card small{font-size:10px;color:#786545}.boss-card button{margin-top:10px;background:linear-gradient(#e6c57d,#c5a052);border:1px solid #a68641;border-radius:4px;padding:7px 14px;color:#293244}.boss-live{color:#2a785d}.boss-wait{color:#9b4b46}.new-ability small{font-size:9px}.new-ability:disabled{opacity:.5}
@media(max-width:800px){.buff-tray{left:10px;max-width:195px}.utility-stack{left:10px;width:185px;max-width:185px}.utility-stack button{font-size:9px;padding:5px}.skill-buttons{gap:3px}.skill-buttons .ability{width:42px}.sidebar{width:180px;right:8px}.zone-title{max-width:calc(100% - 410px)}.zone-title h1{font-size:13px}}
@media(max-width:580px){.utility-stack{width:145px;max-width:145px}.utility-stack button{min-height:32px;font-size:8px}.buff-tray{max-width:150px}.sidebar{width:132px}.quest-card,.realm-note{display:none}.skill-dock{max-width:100%;gap:3px}.resource-orb{display:none}.skill-buttons .ability{width:39px}.zone-title{display:none}.boss-card{grid-template-columns:70px minmax(0,1fr);gap:10px;padding:10px}.boss-card canvas{width:70px;height:82px}}
.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.wallet-grid .surface{padding:24px}.wallet-grid h1{font-size:34px}.wallet-grid article:first-child{border-color:#a8c7d3}.wallet-grid article:last-child{border-color:#c9ab66}.wallet-grid button{padding:10px 15px;margin-top:12px}.wallet-grid p{line-height:1.7}#botRange{accent-color:#e4c985}#botTogglePanel{padding:12px 22px;background:#b79854;color:#13273b;border:1px solid #dfc88b;border-radius:5px}@media(max-width:600px){.wallet-grid{grid-template-columns:1fr}}

/* Readability audit: explicit foregrounds for cream and dark panels. */
.modal-content{font-family:Tahoma,"Leelawadee UI",sans-serif;font-size:14px;line-height:1.65;text-shadow:none}
.modal-content :is(button,input,select){font-size:13px;font-weight:600}
.modal-content small{font-size:12px;line-height:1.6}
.modal-content .detail-list{font-size:14px;line-height:1.8}
.modal-content .affix-list{font-size:14px;line-height:1.8}
.modal-content .muted{color:#c3d1ca!important;font-size:13px}
.modal-content button:disabled{opacity:1;color:#aab8c2;background:#253644;border-color:#52616a;box-shadow:none}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]){color:#24364e;--muted:#535b65;--paper:#24364e}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) :is(p,.detail-list li span,.audio-credit,.filter-count,.panel-heading){color:#465365}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) :is(.muted,small){color:#535b65!important}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) .detail-list li b{color:#203653;font-weight:700}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) .affix-list{background:#eee8f2;color:#433651;border-color:#8c739e}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) .affix-list :is(div,p,small){color:#433651!important}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) .affix-list.rarity1 div{color:#19533e!important}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) .affix-list.rarity2 div{color:#633982!important}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) .affix-list.rarity3 div{color:#775015!important}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) .outline-button{color:#29466b;background:#edf1f5;border-color:#778ca3}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) button:disabled{opacity:1;color:#59616b;background:#e3e5e8;border-color:#a6adb5;box-shadow:none}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) :is(input,select){color:#24364e;background:#fffdf7;border-color:#7b899b}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) input::placeholder{color:#606b76;opacity:1}
.modal-content:is([data-panel="inventory"],[data-panel="shop"],[data-panel="market"],[data-panel="map"],[data-panel="character"],[data-panel="boss"]) .destination.active :is(b,small,span){color:#fff4d7!important}
.boss-region>h3 small{color:#d6e6f7!important}
.modal-content .boss-live{color:#176145}.modal-content .boss-wait{color:#943934}
.meter{height:16px;transform:none}.meter span{font:11px/14px Tahoma,sans-serif;transform:none}
.utility-stack button{font-size:12px;line-height:1.4}.buff-badge span{font-size:11px;background:#102235;color:#fff;padding:1px 3px;border-radius:3px}
@media(max-width:580px){.modal-content{font-size:14px}.utility-stack button{font-size:11px}.modal-content :is(.detail-list,.affix-list){font-size:13px}}

.modal-content .affix-list :is(p,small){font-size:12px;line-height:1.7}
.modal-content[data-panel="boss"] .boss-region>h3 small{color:#d6e6f7!important}

.bag-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.bag-tabs button{background:#fff9e9;color:#29446a;border:1px solid #8295ab;border-radius:6px;padding:10px 5px;font-size:13px}.bag-tabs button.active{background:#234a76;color:#fff4d5;border-color:#c4a161}.bag-tabs button small{display:block}.modal-content[data-panel="inventory"] .bag-tabs button.active small{color:#fff4d5!important}
/* Account lobby: classic blue window chrome, parchment cards, five character pedestals. */
.account-gate{position:absolute;inset:0;z-index:18;overflow:auto;padding:32px 22px;background:linear-gradient(110deg,#071a37e8,#183653be),url('assets/huangzhou-map.png') center/cover}
.account-shell{max-width:1280px;margin:0 auto;border:1px solid #d0b16e;border-radius:14px;background:#f4eddb;box-shadow:0 22px 80px #0008,inset 0 0 0 5px #d6c598;color:#243858;overflow:hidden;font-family:Tahoma,sans-serif}
.account-shell>header{padding:25px 35px;background:linear-gradient(115deg,#193b66,#315985,#152e54);border-bottom:3px solid #c6a55f;color:#fff3ce}.account-shell header small{letter-spacing:.25em;color:#efce89;font-size:11px}.account-shell h1{font-size:30px;margin:8px 0}.account-shell header p{font-size:13px;color:#d9e5f5;line-height:1.7;margin-bottom:0}
#accountFormArea{display:grid;grid-template-columns:1.15fr 1fr;min-height:420px}.account-art{padding:65px 45px;background:linear-gradient(0deg,#102a54e8,#24457279),url('assets/huangzhou-map.png') center/cover;color:#fff1c6;display:flex;flex-direction:column;justify-content:center}.account-art>span{font-size:62px;color:#e3c47a}.account-art h2{font-size:36px;line-height:1.6;margin:8px 0}.account-art p{color:#e0eafa;font-size:14px;line-height:1.8}
#accountForm{padding:28px 40px;display:flex;flex-direction:column;gap:15px}#accountForm h2{margin:0 0 4px}#accountForm label{font-size:14px;font-weight:bold;display:flex;flex-direction:column;gap:7px}#accountForm input{background:#fffdf8;color:#223954;border:1px solid #879ab2;border-radius:6px;padding:12px}#accountForm button{padding:12px;border-radius:5px;font-size:15px}#accountForm small{font-size:12px;line-height:1.7;color:#5d6370}.account-link{color:#244f82;background:#e3eaf2;border:1px solid #98abc3;border-radius:5px;padding:10px 18px}
#accountRoster{padding:24px 28px}.roster-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.roster-heading small{font-size:11px;letter-spacing:2px;color:#686251}.roster-heading h2{font-size:22px;margin:7px 0}#accountLogout{background:#fffaf1;color:#304b6d;border:1px solid #9dabc0;border-radius:5px;padding:10px 16px}
#accountSlots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.character-slot{min-width:0;border:1px solid #aa9266;border-radius:8px;padding:16px 8px;background:linear-gradient(#fffaf0,#e8dfc7);color:#253d60;text-align:center;box-shadow:0 3px 8px #68553020}.character-slot>small{font:11px Georgia;letter-spacing:2px;color:#65573f}.character-slot canvas{display:block;width:100%;height:auto;aspect-ratio:220/260;background:radial-gradient(ellipse at 50% 87%,#b3c8db 0%,#ede6d449 53%,transparent 65%);margin:8px auto}.character-slot h3{font-size:17px;overflow-wrap:anywhere;margin:8px 0}.character-slot p,.character-slot span{font-size:13px;line-height:1.6;margin:5px 0;color:#4c596e}.character-slot b{display:block;padding:10px 4px;margin-top:15px;border-radius:4px;background:#244c79;color:#fff1c9;font-size:13px}.empty-character{height:240px;display:grid;place-items:center;font-size:54px;color:#877857}.empty-slot{border-style:dashed;background:#e9e3d4}.empty-slot b{background:#ded3b7;color:#294363}.character-slot:hover{outline:2px solid #c69e4e;outline-offset:2px;filter:none;transform:translateY(-2px)}#legacyImport{margin-top:20px}#accountMessage{color:#9b3030;font-size:14px;line-height:1.7;padding:0 30px 12px;min-height:24px}
.back-roster{position:absolute;top:12px;left:18px;z-index:5;border:1px solid #c5aa69;border-radius:5px;background:#1b3a61;color:#fff0c9;padding:10px 18px}.selection .creation-panel{border:1px solid #c8b077;background:linear-gradient(#244769f5,#122c49f5)}.selection .creation-panel input{background:#fff8e9;color:#233e5e}.selection .step-label{color:#eddcb9}
@media(max-width:900px){#accountSlots{grid-template-columns:repeat(3,minmax(0,1fr))}.account-art{padding:30px}.account-art h2{font-size:28px}#accountForm{padding:25px}.account-gate{padding:15px}.empty-character{height:180px}}
@media(max-width:600px){#accountFormArea{grid-template-columns:1fr}.account-art{display:none}#accountSlots{grid-template-columns:repeat(2,minmax(0,1fr))}#accountRoster{padding:16px}.roster-heading{align-items:start}.roster-heading h2{font-size:17px}.account-shell>header{padding:20px}.account-shell h1{font-size:24px}.character-slot h3{font-size:15px}.empty-character{height:180px}}
.attribute-panel{margin:18px 0;padding:18px;border:1px solid #ab9468;border-radius:8px;background:#fff9eb;color:#263d5a}.attribute-panel header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center}.attribute-panel header h3{margin:0}.attribute-panel header>b{background:#244d77;color:#fff2c7!important;border-radius:4px;padding:6px 10px}.attribute-panel>p{font-size:12px;line-height:1.7}.attribute-rows{display:grid;gap:8px}.attribute-rows>div{display:grid;grid-template-columns:minmax(0,1fr) 32px auto;align-items:center;gap:8px;border-top:1px solid #d7c8ad;padding-top:9px}.attribute-rows strong{font-size:15px}.attribute-rows small{display:block;font-size:12px}.attribute-rows p{grid-column:1/-1;font-size:12px;margin:0 0 4px}.attribute-rows button,.attribute-panel>button{padding:7px 10px;background:#234b76;color:#fff4d4;border:1px solid #b49a67;border-radius:4px}.attack-speed-summary{display:flex;flex-direction:column;gap:5px;padding:12px;margin:14px 0;background:#e4edf5;border:1px solid #a0b4c9;border-radius:5px}.attack-speed-summary span{font-size:12px;color:#40536b}

.boss-drops{margin:12px 0;color:#243753}.boss-drops summary{cursor:pointer;font-weight:700;color:#233b68;padding:10px;background:#e9d7a9;border-radius:5px}.boss-drops table{width:100%;border-collapse:collapse;font-size:12px}.boss-drops th,.boss-drops td{padding:5px 3px;border-bottom:1px solid #cbbd9b;text-align:left}.boss-drops td:last-child{font-weight:700;white-space:nowrap}.boss-drops p{font-size:12px;line-height:1.6}

.rarity4{border-color:#ed3559!important;color:#a51434;box-shadow:0 0 14px #f33a5d44}.affix-list.rarity4{background:#f9dce3!important}.affix-list.rarity4 div{color:#991a3b!important}.world-map-img{max-width:100%;height:auto}

.raid-combat-info{position:absolute;top:100px;left:50%;transform:translateX(-50%);width:min(420px,40vw);padding:10px 14px;background:#240b1eee;border:1px solid #b73853;border-radius:8px;color:#ffe7ec;pointer-events:none;z-index:7;text-align:center}.raid-combat-info b,.raid-combat-info span,.raid-combat-info small{display:block}.raid-combat-info span{font-size:12px;margin:4px 0}.raid-combat-info small{color:#ffb4c4;font-size:11px}@media(max-width:700px){.raid-combat-info{top:135px;width:42vw;padding:6px;font-size:11px}}
/* Consistent readable skill controls on dark cards, including native buttons. */
#modalContent .skill-card button {background:#254260;color:#fff3d5;border:1px solid #aebfcc;border-radius:6px;padding:9px 14px;font-weight:700;text-shadow:none;}
#modalContent .skill-card button:disabled {background:#344354;color:#d4dde6;border-color:#738496;opacity:1;cursor:not-allowed;box-shadow:none;}
#modalContent .skill-card label {color:#f0e5ce;display:inline-flex;gap:7px;align-items:center;padding:8px;}
.monster-drop-directory {margin-top:24px;} .monster-drop-directory details {margin:10px 0;padding:12px;} .monster-drop-directory table {width:100%;border-collapse:collapse;} .monster-drop-directory td,.monster-drop-directory th {padding:8px;text-align:left;border-bottom:1px solid #8899aa55;}
.gender-choices{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0;color:#f5e8d0}.gender-choices button{padding:9px 24px;border:1px solid #9eabbb;border-radius:7px;background:#20384e;color:#f6ecdd}.gender-choices button.active{background:#d4b675;color:#182c41;border-color:#ffe5a3}.gender-choices small{flex-basis:100%;color:#c8d4dc}
/* Shared readable controls, including previously unstyled native white buttons. */
#modalContent button{background:#234363;color:#fff1cb;border:1px solid #94a7bb;border-radius:6px;padding:9px 13px;font-weight:700;text-shadow:none}
#modalContent button:hover:not(:disabled){background:#305a80;border-color:#efd197}
#modalContent button.active,#modalContent button.primary{background:linear-gradient(#efd99f,#c9a65c);color:#192d43;border-color:#ffe6a7}
#modalContent button:disabled{background:#344557;color:#d6e0e9;border-color:#718399;opacity:1;cursor:not-allowed;box-shadow:none}
#modalContent button small,#modalContent button span{color:inherit}
#modalContent input:not([type=checkbox]):not([type=range]),#modalContent select,#modalContent option{background:#fff9eb;color:#19334f;border:1px solid #879bb1;border-radius:5px;padding:9px;max-width:100%;min-width:0}
#modalContent input::placeholder{color:#53667a;opacity:1}
#modalContent input:disabled{background:#dbe1e7!important;color:#40566c!important;opacity:1}
#modalContent .skill-card.locked{opacity:1}
.market-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.market-tabs button{flex:1}.market-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.market-cards article{min-width:0}.market-cards article>button{display:block;width:100%;margin-top:12px}.market-sell-card.selected{border:2px solid #e5c375;box-shadow:0 0 0 2px #e5c37526}.market-sell-card label{display:block;margin-top:12px;color:#dce9f4}.market-sell-card input{width:100%;margin:6px 0}.market-pick strong,.market-pick span{display:block;margin:6px 0}.market-submit{position:sticky;bottom:-16px;padding:12px;background:#14263df5;border:1px solid #c8ac6e;border-radius:8px;box-shadow:0 -5px 25px #0005;z-index:2}.market-submit button{margin-right:8px}.market-notice,.market-help{padding:13px;border-left:3px solid #cfb673;background:#1e354c;color:#e4eaf1}.commerce-hub .surface{margin-bottom:12px}.commerce-hub label{display:block;margin:10px 0}.commerce-hub input{display:block;width:100%;margin-top:5px}.gold-chart-empty{min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:repeating-linear-gradient(0deg,#172c48,#172c48 33px,#29435c 34px);border:1px solid #58718b;color:#f8e0a6;text-align:center;padding:16px}.gold-chart-empty>span{font-size:32px}.gold-chart-empty p{color:#d2deec}
/* Compact overlay expands without moving the skill dock. */
.chat.player-chat,.compact-ui .chat.player-chat{display:block;left:14px;bottom:35px;width:min(380px,31vw);padding:10px;z-index:12;pointer-events:auto;background:#102031eb;border:1px solid #c9ab6a;box-shadow:0 6px 24px #0005;color:#f3efdc}
.player-chat header{display:flex;gap:6px;align-items:center}.player-chat header #savedIndicator{flex:1;font-size:9px;color:#b6c9d7}.player-chat button,.player-chat select{background:#24425c;color:#fff0c7;border:1px solid #7894ac;border-radius:5px;padding:5px;cursor:pointer}.player-chat nav{display:flex;gap:4px;margin:8px 0;flex-wrap:wrap}.player-chat nav button{flex:1;font-size:11px}.player-chat button.active{background:#d4b56f;color:#152b42}.player-chat #playerChatRows{height:78px;overflow:auto;font-size:var(--chat-font,13px);line-height:1.65;overflow-wrap:anywhere;scrollbar-color:#8b9fae #142636}.chat-line{padding:2px 0}.chat-line time{color:#aabed0;font-size:.85em}.chat-line b{color:#eac878}.channel-system b{color:#b9c6d3}.channel-whisper b{color:#d7a8ff}.channel-trade b{color:#8de1b0}.channel-map b{color:#80cfff}.player-chat form{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}.player-chat input{min-width:0;flex:1;width:70px;background:#0c1b2a;color:#f2f0dc;border:1px solid #8da3b4;border-radius:5px;padding:7px}.player-chat input::placeholder{color:#bbccda}.player-chat #chatRecipient{flex-basis:100%}.chat.player-chat.expanded{width:min(630px,calc(100vw - 28px));bottom:35px;max-height:calc(100vh - 100px)}.player-chat.expanded #playerChatRows{height:min(480px,calc(100vh - 260px))}
@media(max-width:900px){.chat.player-chat,.compact-ui .chat.player-chat{width:280px;bottom:210px}.player-chat:not(.expanded) #playerChatRows{height:50px}.player-chat:not(.expanded) nav{display:none}.player-chat header #savedIndicator{display:none}}
@media(max-width:550px){.chat.player-chat,.compact-ui .chat.player-chat{width:calc(100vw - 28px);bottom:220px}.market-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bottom-status{gap:14px;padding:0 12px;min-height:29px}.live-status{display:flex;align-items:center;gap:10px;flex-shrink:0;font:600 11px Tahoma,sans-serif;color:#eff4f8;font-variant-numeric:tabular-nums;white-space:nowrap}.live-status time{color:#f7dfab}.live-status .online{color:#9fe7b4}.live-status .slow{color:#ffc77d}.bottom-status #bottomTip{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:10px;min-width:0}.bottom-status #wallet{margin-left:auto;white-space:nowrap}@media(max-width:800px){.bottom-status #bottomTip{display:none}.bottom-status{gap:6px}.live-status{gap:7px;font-size:10px}.bottom-status #wallet{font-size:9px}}@media(max-width:420px){.live-status{gap:5px;font-size:9px}.bottom-status{padding:0 6px}}
/* Explicit foregrounds prevent cream-panel text rules leaking into dark market bars. */
#modalContent .exchange-banner{background:linear-gradient(120deg,#162c43,#243854);border:1px solid #a28b56;color:#f2f6fc;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;line-height:1.6}
#modalContent .exchange-banner b,#modalContent .exchange-banner strong{color:#ffe2a0;font-size:16px;font-weight:700}
#modalContent .exchange-banner span{color:#f2f6fc;font-size:14px;font-weight:500}
#modalContent .market-submit p,#modalContent .market-help,#modalContent .market-notice{color:#eaf2fc}
#modalContent .market-sell-card label{color:#263955}
/* Devil Chronicles original Gold shop: ivory catalogue, midnight steel and crimson jewels. */
#modalContent .gold-store{background:#f5edda;border:1px solid #c0a369;border-radius:12px;padding:20px;color:#203754}
#modalContent .gold-store-intro{padding:4px 2px 20px;border-bottom:1px solid #cbbb94;margin-bottom:18px}
#modalContent .gold-store-intro>small{color:#805a31;font-size:10px;letter-spacing:2px}
#modalContent .gold-store-intro h2{font-size:27px;color:#203754;margin:6px 0}
#modalContent .gold-store-intro p{color:#526079;margin:6px 0 12px}
#modalContent .topup-preview-tag{display:inline-block;background:#e4dac1;color:#644b22;border:1px solid #b39d6c;border-radius:20px;padding:5px 12px;font-size:11px}
.gold-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#modalContent button.gold-pack{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:16px 10px 12px;background:radial-gradient(ellipse at 50% 30%,#4a5866,#1a2c43 65%);border:1px solid #a38b5b;border-radius:10px;box-shadow:0 3px 6px #15263c33;color:#fff0ca;position:relative;overflow:hidden}
#modalContent button.gold-pack:hover{background:radial-gradient(ellipse at 50% 30%,#616275,#223b59 70%);border-color:#ffdf8e;transform:translateY(-2px)}
#modalContent button.gold-pack.selected{outline:2px solid #bd8435;outline-offset:2px;background:radial-gradient(ellipse at 50% 30%,#765540,#233049 70%)}
#modalContent .gold-pack-name{color:#dfd9ce;font-size:11px;min-height:20px}
.gold-chest{display:block;width:125px;height:100px;max-width:100%;filter:drop-shadow(0 0 13px #ffc77135)}
.gold-chest.royal{filter:drop-shadow(0 0 14px #f76b624f)}
#modalContent .gold-pack strong{font-size:25px;line-height:1.4;color:#ffe5a7;white-space:nowrap}
#modalContent .gold-pack strong small{font-size:11px;color:#ffe5a7}
#modalContent .gold-pack-bonus{color:#d3e4f2;font-size:11px;min-height:22px}
#modalContent .gold-pack-price{background:linear-gradient(#ecd8a5,#c6a36c);color:#20334c;font-size:20px;border:1px solid #f7deb0;border-radius:5px;width:100%;padding:5px}
#modalContent .gold-pack-price small{color:#354a63;font-size:10px}
#modalContent .gold-pack-action{color:#f5e8c8;font-size:10px;margin-top:4px}
#modalContent .topup-summary{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:18px;margin-top:20px;border:1px solid #b8a479;border-radius:8px;background:#fffaf0}
#modalContent .topup-summary h3{color:#223c5b;margin:4px 0;font-weight:700}
#modalContent .topup-summary p,#modalContent .topup-summary small{color:#4b5e73}
#modalContent .topup-summary>b,#modalContent .topup-summary>strong{color:#253c57;font-size:24px}
#modalContent .topup-note{border-top:1px solid #c9b98f;padding:16px 0 0;margin-top:18px;color:#3b5069;font-size:12px}
#modalContent .topup-note b{color:#293f5a}#modalContent .topup-note p{color:#4b5e73;line-height:1.8}
@media(max-width:600px){.gold-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#modalContent .gold-store{padding:12px}#modalContent .gold-pack strong{font-size:21px}#modalContent .gold-store-intro h2{font-size:23px}.gold-chest{width:105px;height:86px}}
@media(prefers-reduced-motion:reduce){#modalContent button.gold-pack:hover{transform:none}}
.game-settings{background:#f5eedc;color:#243b55;border:1px solid #bfa36b;border-radius:10px;padding:20px}.settings-intro h2{color:#223953;margin:6px 0}.settings-intro small{color:#80663d;letter-spacing:2px}.game-settings article{border:1px solid #c2b18c;border-radius:7px;background:#fffaf0;margin:14px 0;padding:16px}#modalContent .game-settings h3{background:linear-gradient(100deg,#243e62,#4d6887);color:#fff0c5;padding:10px;margin:-16px -16px 14px;border-radius:6px 6px 0 0}#modalContent .game-settings p{color:#526177;font-size:12px}.setting-row{display:flex;align-items:center;gap:14px;margin:16px 0;flex-wrap:wrap}.setting-row>span{flex:1;min-width:150px}.setting-row input[type=range]{flex:1;accent-color:#b88938;min-width:100px}.setting-row select{max-width:58%!important}.setting-check{display:flex;align-items:center;gap:10px;margin:14px 0;color:#263d59}.setting-check input{width:18px;height:18px;accent-color:#294e7c}.settings-chat{display:flex;gap:12px;flex-wrap:wrap}.settings-chat .setting-check{margin:6px 0}.utility-stack,.skill-dock,.menu-dock{opacity:var(--game-hud-opacity,1)}
#modalContent .premium-benefits{padding:16px;border:1px solid #c2ab7b;background:#fffaf0;border-radius:7px;margin-bottom:16px}#modalContent .premium-benefits h3{color:#243d5c}#modalContent .premium-benefits p{color:#526278;font-size:12px}.premium-benefits li{margin:10px 0;line-height:1.6}.premium-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}#modalContent .premium-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 6px;background:linear-gradient(#5a2038,#271f3c);color:#ffe7b1;border-color:#b39564}#modalContent .premium-card.selected{outline:2px solid #cb963f;outline-offset:2px}#modalContent .premium-card strong{color:#ffe8af;font-size:21px}.premium-crown{font-size:45px;color:#ffda72!important;text-shadow:0 0 12px #fda53755}#modalContent .premium-card small{color:#e2d4bd}.invite-code-hint{display:block;margin:10px 0}.invite-panel h3{border-bottom:1px solid #a4b4c4;padding-bottom:10px}#modalContent .invite-panel input{font-size:14px}#modalContent .invite-panel p{line-height:1.8}@media(max-width:650px){.premium-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#modalContent .payment-sandbox{padding:16px;border:1px solid #b18f43;border-radius:8px;background:#fff8df;color:#203650;margin:16px 0}#modalContent .payment-sandbox p,#modalContent .payment-sandbox b{color:#203650}.payment-order{border:1px solid #b7a985;padding:14px;border-radius:8px;margin:12px 0}.payment-order small{display:block;overflow-wrap:anywhere}.payment-qr{display:block;width:240px;height:240px;max-width:100%;object-fit:contain;background:#fff;padding:10px;margin:12px auto}

#channelSelect{color:#fff0c5;background:#172c49;border:1px solid #bda467;border-radius:5px;padding:4px 6px;max-width:135px;font-size:12px}#channelSelect option{color:#fff0c5;background:#172c49}

/* Map destination text must stay readable in available, locked and current states. */
#modalContent[data-panel="map"] .world-directory .destination{background:#203e5c;color:#fff5df;border:1px solid #849bb0;opacity:1;text-shadow:none;line-height:1.65;padding:14px;min-height:110px}
#modalContent[data-panel="map"] .world-directory .destination b{color:#fff0c5!important;font-size:15px;font-weight:600}
#modalContent[data-panel="map"] .world-directory .destination small{color:#e0e9f2!important;font-size:13px;line-height:1.6;font-weight:400;margin:6px 0}
#modalContent[data-panel="map"] .world-directory .destination span{color:#ffe3a0!important;font-size:13px;font-weight:600}
#modalContent[data-panel="map"] .world-directory .destination:disabled:not(.active){background:#303f50;border-color:#8393a4;opacity:1;filter:none}
#modalContent[data-panel="map"] .world-directory .destination:disabled:not(.active) span{color:#edf2f7!important}
#modalContent[data-panel="map"] .world-directory .destination.active{background:#193f3b;border:2px solid #d7ba73;opacity:1}
#modalContent[data-panel="map"] .world-directory .destination.active span{color:#bff2d8!important}
#modalContent[data-panel="map"] .world-directory .destination:hover:not(:disabled){background:#2b5075;border-color:#ffe0a3;filter:none}

/* Touch layout: native-size hit targets and safe areas on both phone orientations. */
.mobile-controls{display:none}
body.touch-ui{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.touch-ui #app{height:var(--touch-height,100dvh);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.touch-ui button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.touch-ui input,.touch-ui select,.touch-ui textarea{font-size:16px!important}
.touch-ui .masthead{height:38px;padding:0 10px}.touch-ui .wordmark{font-size:17px}.touch-ui .wordmark small,.touch-ui .edition,.touch-ui .crest,.touch-ui .divider{display:none}
.touch-ui .bottom-status{height:22px;padding:0 8px}.touch-ui #bottomTip,.touch-ui #wallet{display:none}
.touch-ui #hud .mobile-controls{display:contents}.touch-ui #touchStick{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;position:absolute;left:14px;bottom:32px;width:112px;height:112px;border-radius:50%;background:#132b47ac;border:2px solid #c9ac70;box-shadow:inset 0 0 22px #9abadd38;display:grid;place-items:center;z-index:15}
.touch-ui #touchStick i{width:46px;height:46px;border-radius:50%;background:radial-gradient(#9bd4e8,#38628c);border:2px solid #ecd29d;pointer-events:none}.touch-ui #touchStick span{position:absolute;top:7px;font-size:12px;color:#fff0ca;pointer-events:none}
.touch-ui #touchMenu{position:absolute;right:10px;top:118px;min-height:44px;padding:8px 14px;z-index:32;background:#213b59;color:#fff1ce;border:1px solid #cfb16e;border-radius:7px}
.touch-ui .touch-actions{position:absolute;bottom:154px;right:10px;display:flex;gap:5px;pointer-events:auto;z-index:15}.touch-ui .touch-actions button{min-height:44px;padding:6px 9px;background:#19334be8;color:#fff0ca;border:1px solid #a58e60;border-radius:6px;font-size:12px}
.touch-ui .profile{top:8px;left:8px;width:205px;padding:6px;transform:none!important}.touch-ui .portrait-ring,.touch-ui .portrait-ring canvas{width:42px;height:52px}.touch-ui .fine{display:none}.touch-ui .meter{height:16px}.touch-ui .meter span{font:11px/14px Tahoma}
.touch-ui .sidebar{top:8px;right:8px;width:122px!important}.touch-ui #minimap{height:68px;width:100%}.touch-ui .minimap-legend,.touch-ui .map-footer,.touch-ui .quest-card,.touch-ui .realm-note{display:none}.touch-ui .minimap-frame{padding:5px}.touch-ui .minimap-frame .panel-heading{margin:0}.touch-ui #channelSelect{font-size:12px!important;max-width:86px;padding:4px 0;min-height:32px}.touch-ui .minimap-frame button{min-width:28px;min-height:32px}
.touch-ui .zone-title,.touch-ui #fieldEvent,.touch-ui .resource-orb,.touch-ui .context-hint{display:none}
.touch-ui .buff-tray{top:91px;left:8px;max-width:205px;right:auto;display:flex;overflow-x:auto;flex-wrap:nowrap;pointer-events:auto}.touch-ui .buff-badge{flex:none}.touch-ui .buff-badge canvas{width:25px;height:25px}
.touch-ui .target{top:140px;left:8px;transform:none;width:205px;padding:5px;pointer-events:none}
.touch-ui .skill-dock{left:auto;right:8px;bottom:27px;transform:none!important;max-width:calc(100% - 140px);z-index:15}.touch-ui .advanced-hotbar{display:none}.touch-ui .skill-buttons{display:grid;grid-template-columns:repeat(4,46px);gap:4px;padding:4px}.touch-ui .skill-buttons .ability{width:46px;height:52px;min-width:0}.touch-ui .ability-icon{width:27px;height:27px}.touch-ui .ability small{font-size:10px;max-width:44px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.touch-ui .skill-picture{max-width:28px;max-height:28px}.touch-ui #hud kbd{display:none}
.touch-ui .utility-stack,.touch-ui .menu-dock{display:none!important}
.touch-ui.touch-menu-open .utility-stack{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));top:170px;right:8px;left:auto;bottom:128px;width:290px;max-width:calc(100% - 16px);max-height:calc(100% - 182px);overflow-y:auto;background:#13283bf5;padding:8px;gap:6px;z-index:30;pointer-events:auto;transform:none}
.touch-ui.touch-menu-open .utility-stack button{min-height:44px;font-size:12px;padding:6px;white-space:normal}
.touch-ui.touch-menu-open .menu-dock{display:grid!important;grid-template-columns:repeat(3,1fr);right:8px;bottom:16px;left:auto;width:290px;max-width:calc(100% - 16px);background:#13283bf5;padding:8px;gap:5px;z-index:31;transform:none}.touch-ui .menu-dock button{min-height:44px;font-size:12px}.touch-ui .menu-dock button span{display:none}
.touch-ui .chat.player-chat{display:none!important}.touch-ui.touch-chat-open .chat.player-chat{display:block!important;width:calc(100% - 16px);left:8px;bottom:202px;max-height:calc(100% - 220px);overflow:auto;z-index:33}.touch-ui .player-chat.expanded #playerChatRows{height:140px}.touch-ui .player-chat input{font-size:16px}
.touch-ui .modal-layer{height:var(--touch-height,100dvh);padding:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))}.touch-ui .modal{width:100%;max-height:100%;border-radius:7px}.touch-ui .modal-header{padding:8px 12px;flex-shrink:0}.touch-ui .modal-header h2{font-size:19px}.touch-ui #closeModal{min-width:44px;min-height:44px}.touch-ui .modal-content{padding:12px;scrollbar-gutter:auto}.touch-ui .modal-content button{min-height:44px}
.touch-ui .selection{overflow-y:auto;display:block;padding:55px 12px 24px}.touch-ui .creation-copy{display:none}.touch-ui .hero-preview{position:relative;width:100%;height:190px;inset:auto}.touch-ui #heroArt{height:190px;width:auto;max-width:100%}.touch-ui .hero-caption{display:none}.touch-ui .creation-panel{position:relative;inset:auto;width:100%;max-width:620px;margin:0 auto;padding:15px}.touch-ui .account-gate{padding:12px;overscroll-behavior:contain}.touch-ui .account-shell{padding:12px}.touch-ui .account-form input{font-size:16px}.touch-ui .notifications{top:120px;left:8px;right:140px;width:auto;pointer-events:none}
@media(pointer:coarse) and (max-width:370px){.touch-ui .profile{width:180px}.touch-ui #touchStick{width:96px;height:96px;left:8px}.touch-ui .skill-dock{max-width:calc(100% - 110px)}.touch-ui .skill-buttons{grid-template-columns:repeat(4,44px)}.touch-ui .skill-buttons .ability{width:44px}}
@media(orientation:landscape){.touch-ui .masthead{height:30px}.touch-ui .sidebar{width:110px!important}.touch-ui #minimap{height:46px}.touch-ui #touchMenu{top:94px}.touch-ui .target{top:8px;left:50%;transform:translateX(-50%);width:200px}.touch-ui #touchStick{bottom:18px}.touch-ui .skill-dock{bottom:18px;max-width:none}.touch-ui .skill-buttons{grid-template-columns:repeat(7,46px)}.touch-ui .touch-actions{bottom:83px}.touch-ui.touch-menu-open .utility-stack{top:10px;right:132px;bottom:110px;max-height:none;width:310px}.touch-ui.touch-menu-open .menu-dock{right:132px;bottom:8px;width:310px}.touch-ui.touch-chat-open .chat.player-chat{width:min(420px,60%);bottom:12px;left:135px;max-height:calc(100% - 40px)}.touch-ui .selection{display:flex;gap:12px;align-items:flex-start}.touch-ui .hero-preview{width:28%;flex-shrink:0}.touch-ui .creation-panel{width:70%}.touch-ui .notifications{left:220px;right:130px;top:62px}}

.login-public-links{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.login-public-links a{color:#fff0c6;background:#233f67;border:1px solid #cbb06d;border-radius:6px;padding:12px;text-decoration:none;display:inline-block}
.touch-ui.touch-menu-open .utility-stack{top:170px!important;max-height:calc(100% - 182px)!important}@media(orientation:landscape){.touch-ui.touch-menu-open .utility-stack{top:10px!important;max-height:calc(100% - 120px)!important}}

/* Keep hit targets fixed when hovered, including their edges. */
#modalContent button:hover,.character-slot:hover{transform:none!important}
/* Mail attachment form: readable labels, stable full-width controls, mobile stacking. */
.mail-workspace>article.surface{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mail-workspace>article.surface>h3,.mail-workspace>article.surface>p,.mail-workspace>article.surface>button{grid-column:1/-1;margin:0}
.mail-workspace label{display:flex;flex-direction:column;gap:7px;min-width:0;color:#f1e9d2}
.mail-workspace input,.mail-workspace select{width:100%;min-width:0;box-sizing:border-box;min-height:44px}
@media(max-width:600px){.mail-workspace>article.surface{grid-template-columns:1fr}}
/* Inventory cleanup: readable controls on parchment surfaces. */
#modalContent .auto-sell-settings{padding:16px;margin-bottom:16px}
#modalContent .auto-sell-settings h3{font-size:18px;margin:0 0 10px}
#modalContent .auto-sell-settings p{margin:10px 0;line-height:1.6}
#modalContent .auto-sell-settings button{color:#fff8df!important;background:#254c70!important;text-shadow:none!important}
#modalContent .auto-sell-settings button:disabled{color:#e2e9ee!important;background:#536477!important;opacity:1}
#modalContent .auto-sell-settings label{display:inline-flex;align-items:center;gap:5px;padding:5px 4px}
#modalContent .bag-tabs button:not(.active) small{color:#e5edf8!important}
/* Main-screen account and character balances. */
.hud-wallet{position:fixed;z-index:25;top:76px;left:50%;transform:translateX(-50%);display:flex;gap:8px;pointer-events:none;font-size:13px;filter:drop-shadow(0 3px 6px #0008)}
.hud-wallet[hidden],body:has(#accountGate:not(.hidden)) .hud-wallet,body:has(#selection:not(.hidden)) .hud-wallet{display:none}
.hud-wallet>span{display:flex;align-items:center;gap:10px;padding:9px 15px;border:1px solid #ac9158;border-radius:10px;background:#102238f2;color:#e7eef8}
.hud-wallet strong{font-size:21px;font-variant-numeric:tabular-nums;color:#fff}
.hud-wallet .hud-gold,.hud-wallet .hud-gold strong{color:#ffdc75}
@media(max-width:700px){.hud-wallet{top:58px;gap:4px}.hud-wallet>span{padding:6px 8px;font-size:11px;gap:5px}.hud-wallet strong{font-size:16px}}
/* Boss directory: three clear categories with compact, readable cards. */
.boss-category-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
#modalContent .boss-category-tabs button{background:#203e5f!important;color:#fff8e3!important;padding:13px 8px;border:1px solid #8298af;border-radius:8px;font-size:15px;transform:none}
#modalContent .boss-category-tabs button.active{background:#e5c276!important;color:#243348!important;border-color:#a67b28}
.boss-category-tabs small{display:inline-block;padding:2px 7px;border-radius:12px;background:#0002;margin-left:4px;color:inherit!important}
.boss-category-intro{margin:0 0 16px;line-height:1.7}
.boss-directory-filters{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-bottom:18px;padding:14px;background:#e9dfc5;border-radius:8px}
.boss-directory-filters label{display:grid;gap:6px;color:#203b57!important}
.boss-directory-filters input[type=search],.boss-directory-filters select{width:100%;min-width:0;background:#fffdf7!important;color:#203b57!important;border:1px solid #9aa9b5;border-radius:6px;padding:9px}
.boss-directory-filters .boss-ready-filter{display:flex;align-items:center;padding-bottom:10px;font-size:12px}
#bossDirectoryList{display:grid;gap:14px}
#modalContent .boss-directory-card{margin:0;padding:16px;grid-template-columns:96px minmax(0,1fr);background:#fffaf0;color:#233b51;border:1px solid #c7b990;border-radius:12px}
.boss-directory-card[hidden]{display:none!important}
.boss-card-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:#586a7a}
#modalContent .boss-directory-card h3{font-size:20px;line-height:1.5;margin:7px 0;color:#203d5b}
.boss-card-status{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.boss-reward-badge{border-radius:6px;padding:5px 9px;background:#f2e3b4;color:#6d4810;font-weight:700;font-size:12px}
.boss-short-stats{font-size:12px;margin:8px 0;color:#566577}
.boss-tactics{margin:10px 0}.boss-tactics summary{cursor:pointer;color:#294968;font-weight:600;padding:6px 0}
.boss-travel-row{display:flex;justify-content:flex-end;margin-top:12px}
#modalContent .boss-travel-row button{background:#244d71!important;color:#fff8df!important;border-radius:7px;padding:9px 16px}
#modalContent .boss-travel-row button:disabled{background:#d4d9dc!important;color:#4c5b65!important;opacity:1}
@media(max-width:600px){.boss-directory-filters{grid-template-columns:1fr}.boss-directory-filters .boss-ready-filter{padding:0}#modalContent .boss-directory-card{grid-template-columns:62px minmax(0,1fr);gap:10px;padding:12px}.boss-directory-card canvas{width:62px;height:70px}.boss-category-tabs{gap:4px}#modalContent .boss-category-tabs button{font-size:12px;padding:12px 3px}#modalContent .boss-directory-card h3{font-size:17px}}
#modalContent .boss-category-tabs button small{color:#ffffff!important;background:#ffffff20}
#modalContent .boss-category-tabs button.active small{color:#263c52!important;background:#8b681025}