/* Screenshot-based 240px mobile surfaces, using original raster UI skins. */
.role-screen{width:min(100vw,60dvh);height:min(100dvh,166.6667vw);margin:auto;background:#0b1b17;color:#c7ddcf;font:5.5cqw JHPixel,SimSun,monospace;container-type:inline-size;display:flex;flex-direction:column;border:1px solid #668b7b}
.role-screen>header{background:#29483f;border:1px solid #8cad9d;text-align:center;flex:none;padding:1.8cqw;font:6cqw JHPixel,SimSun,monospace}
.role-frame{border:3px double #86a698;margin:3cqw 2cqw 0;padding:2.5cqw;flex:1;min-height:0;overflow:auto}
.role-card{position:relative;border:solid transparent;border-width:1.5cqw;border-image:url('original/UI14.gif.png') 6 fill stretch;background:none;width:100%;min-height:29cqw;margin:0 0 1.5cqw;padding:0;color:#d4e3da;image-rendering:pixelated}
.role-card:first-child{background:#3d665b}.role-enter{width:100%;display:flex;align-items:center;gap:3cqw;text-align:left;border:0;background:none;color:#d6e8df;padding:1cqw 2cqw;font:5.5cqw/1.2 JHPixel,SimSun,monospace;border-radius:0}
.role-enter canvas{width:22cqw;height:25cqw;image-rendering:pixelated;flex:none}.role-enter em{font-style:normal;color:#c0ce98}.role-delete{position:absolute;right:0;bottom:0;font:3cqw JHPixel,monospace;border:0;border-radius:0;background:#29493f;color:#b4cfbd;padding:.5cqw;min-height:6cqw}
.role-add{font:6cqw JHPixel,monospace;color:#90af9c;background:#294b40}.role-screen>footer{height:20cqw;flex:none;text-align:center;color:#00eeee;font:5cqw/1.2 JHPixel,monospace;padding:2cqw}.role-screen footer button{display:block;margin:1cqw auto 0;background:none;border:0;color:#c4d5a5;font:4cqw JHPixel,monospace;min-height:6cqw;padding:0}
.create-role-frame{padding:3cqw 5cqw}.create-role-frame>canvas{width:25cqw;height:40cqw;object-fit:contain;display:block;margin:0 auto 5cqw;image-rendering:pixelated}.create-role-frame form{display:flex;flex-direction:column;gap:3cqw}.create-role-frame label{display:flex;align-items:center;gap:3cqw;font:6cqw JHPixel,monospace}.create-role-frame label>span{width:19cqw;color:#c4cc98;flex:none}.create-role-frame label:nth-child(2)>span{color:#00eeee}.create-role-frame input,.create-role-frame select{font:6cqw JHPixel,monospace;background:#294a40;color:#e1e9e2;border:1px solid #87aa9a;border-radius:0;min-width:0;width:100%;padding:2cqw 3cqw;height:11cqw;appearance:none}.create-role-frame form>button{font:5cqw JHPixel,monospace;align-self:flex-end;border-radius:0;background:#29493f;color:#d2e0d4}.role-error{color:#ffb795;font:4cqw JHPixel,monospace;margin:0}
dialog.scroll-menu{inset:0;width:min(53vw,32dvh);height:auto;max-height:65dvh;border:solid transparent;border-width:min(6vw,3.6dvh) min(5vw,3dvh);border-image:url('original/UI_menu2.gif.png') 13 11 fill stretch;padding:2cqw 0;image-rendering:pixelated;background:none;overflow:visible}
.scroll-menu::backdrop{background:#0002}.scroll-menu .original-title,.scroll-menu .original-footer{display:none}.scroll-menu .original-content{border:0;background:#cecfbd;overflow:auto;flex:none;padding:0;scrollbar-width:thin;scrollbar-color:#8a9478 transparent}.scroll-menu .original-content::before,.scroll-menu .original-content::after{display:none}.scroll-menu .original-content::-webkit-scrollbar{width:4px}.scroll-menu .original-content::-webkit-scrollbar-thumb{background:#8a9478;border-radius:2px}
.original-panel.scroll-menu .original-content>.scroll-option{display:block;width:100%;margin:0;padding:.5cqw 0;min-height:0;border:0;border-radius:0;color:#101b15;background:none;text-align:center;font:12cqw/1.1 JHPixel,SimSun,monospace}.original-panel.scroll-menu .original-content>.scroll-option.selected,.original-panel.scroll-menu .scroll-option:hover,.original-panel.scroll-menu .scroll-option:focus{background:#4c584d;color:#fff}
dialog.inset-panel{width:min(96vw,57.6dvh);height:min(83dvh,138vw);inset:0;border:3px double #83aa98;background:#0b1b17;padding:1.5cqw;box-shadow:none}.inset-panel::backdrop{background:#0002}.inset-panel .original-title{height:9cqw;font-size:6cqw;letter-spacing:0;padding:0 3cqw;background:#29483f;margin:0 0 2cqw}.inset-panel .original-content{border:0;background:#0b1b17}.inset-panel .original-content::before,.inset-panel .original-content::after{display:none}.inset-panel .original-footer{border:0;background:none;height:10cqw;padding:0;gap:1cqw;color:#bdc98d;font-size:5cqw}.inset-panel .original-footer button{border:0;border-image:none;min-width:0;font-size:5cqw;min-height:7cqw;height:auto;color:#cbce8f}.inset-panel .original-footer button:disabled{color:#5e7978}.inset-panel .original-content>.guild-option{margin:0;padding:1cqw 3cqw;text-align:left;background:none;color:#c0dbc9;border:0;font:6cqw JHPixel,monospace}.inset-panel .guild-option.selected{background:#36594f}
.rank-tabs{display:flex;flex:none;gap:1cqw;margin-bottom:2cqw}.rank-tabs button{flex:1;min-width:0;min-height:9cqw;border:1px solid #91b29e;border-radius:0;background:#345649;color:#c5d9b5;font:6cqw JHPixel,monospace;padding:1cqw}.rank-tabs button.active{background:#294a40;border-color:#c5e0ce}.rank-list{padding:0}.rank-row{display:flex;padding:1cqw 2cqw;gap:3cqw;font:6cqw/1.2 JHPixel,monospace}.rank-row span:first-child{width:43%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.rank-row span:last-child{color:#c3cc92}.rank-row.selected{background:#36594f}.rank-mine{color:#00eeee}
.peer-row{padding:2cqw;border-bottom:1px solid #33584c;font-size:5cqw;line-height:1.4}.peer-row button,.spell-row button{font:4cqw JHPixel,monospace;background:#294a40;border:1px solid #709481;border-radius:0;color:#d7e3ce;padding:1cqw;margin:1cqw;min-height:8cqw}
.peer-name{background:none!important;border:0!important;padding:0!important;margin:0!important;min-height:0!important;font:inherit;color:#ffe873;text-align:left;cursor:pointer}
.peer-row .peer-name{display:block;margin-bottom:1cqw!important}
.rank-row .peer-name.rank-name{width:43%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}
.guild-member .peer-name{font-size:inherit}
.chat-sender{color:inherit;text-decoration:none}.spell-row{padding:2cqw;border-bottom:1px solid #33584c;font-size:5cqw}.spell-row span{display:block;font-size:4cqw;color:#c3cc92}.spell-row p{font-size:4cqw;line-height:1.4}.title-row{display:flex;justify-content:space-between;padding:2cqw}.title-row img{image-rendering:pixelated;object-fit:contain;max-width:65%}.chat-stream{flex:1;min-height:0;overflow:auto;font:5cqw/1.5 JHPixel,monospace;color:#c4e0cd;padding:2cqw;overflow-wrap:anywhere}.chat-stream p{margin:1cqw 0}#community-chat-form{display:flex;flex:none;gap:1cqw;padding:1cqw}#community-chat-form input{width:0;flex:1;border-radius:0;background:#294a40;font:5cqw JHPixel,monospace;color:#fff}#community-chat-form button{font:5cqw JHPixel,monospace;border-radius:0;background:#294a40;color:#c4d4bd}
dialog.stats-panel{width:min(100vw,60dvh);height:min(100dvh,166.6667vw);background:#3b6157;padding:3cqw}.stats-panel .original-content{background:#3b6157;overflow:hidden}.stats-name{flex:none;text-align:center;color:#ffff00;font:5.5cqw JHPixel,monospace;height:7cqw}.original-stat-table{margin:0;flex:1;min-height:0;overflow:auto;background:linear-gradient(to right,#365c52 22%,#10251e 22%);font:5.8cqw/1.08 JHPixel,monospace}.original-stat-table>div{display:flex;min-height:8.7cqw;border-bottom:1px solid #33594f}.original-stat-table dt{width:22%;color:#b4cd8e;flex:none;padding:1cqw 1cqw}.original-stat-table dd{margin:0;flex:1;min-width:0;color:#eff3e9;padding:1cqw 0;overflow-wrap:anywhere}.stats-panel .original-title{margin-bottom:3cqw}.jh-system-font .original-panel,.jh-system-font .original-panel *,.jh-system-font .role-screen *{font-family:SimSun,serif!important}
.role-card{border-image-slice:6;background:#294b40}.role-card:first-child{background:#3d665b}.role-enter canvas{height:29cqw}.create-role-frame>canvas{width:35cqw;height:44cqw;margin-bottom:1cqw}
.original-stat-table{background:#10251e}.original-stat-table dt{background:#365c52}.stats-panel .original-stat-table{position:relative}.stats-panel .original-stat-table::before{content:'';position:absolute;z-index:0;left:0;top:0;bottom:0;width:22%;background:#365c52}.original-stat-table>div{position:relative}
dialog.scroll-menu{height:min(62vw,37.2dvh);padding:0;border-image-slice:13 11;background:#cecfbd;overflow:hidden}.scroll-menu .original-content{flex:1;overflow:visible;justify-content:center}.original-panel.scroll-menu .original-content>.scroll-option{flex:none;font-size:min(7vw,4.2dvh);line-height:1.05;padding:0;min-height:min(7.8vw,4.68dvh)}
dialog.scroll-menu{top:min(33.3333vw,20dvh);bottom:auto;margin:0 auto;width:min(48vw,28.8dvh)}dialog.inset-panel{padding:min(1.5vw,.9dvh)}dialog.stats-panel{padding:min(3vw,1.8dvh)}.stats-panel .original-title{font-size:7cqw;margin-bottom:5cqw}.stats-panel[data-stats-page="0"] .original-stat-table{display:flex;flex-direction:column}.stats-panel[data-stats-page="0"] .original-stat-table>div{flex:1;min-height:0}.stats-panel .original-stat-table>div{min-height:9.3cqw}.panel-corner{position:absolute;width:15cqw;height:9cqw;background:url('original/Background.gif.png') left top / 503% 1000%;image-rendering:pixelated;pointer-events:none;mix-blend-mode:screen}.corner-tl{left:0;top:0}.corner-tr{right:0;top:0;transform:scaleX(-1)}.corner-bl{left:0;bottom:0;transform:scaleY(-1)}.corner-br{right:0;bottom:0;transform:scale(-1)}

/* Scroll content without clipping entries or scrolling the map beneath the menu. */
dialog.original-panel.scroll-menu{height:auto!important;max-height:calc(100dvh - min(33.3333vw,20dvh) - 20px)!important;overflow:hidden!important}
dialog.original-panel.scroll-menu[open]{display:flex;flex-direction:column}
dialog.original-panel.scroll-menu .original-content{display:flex;flex-direction:column;flex:0 1 auto!important;min-height:0!important;max-height:min(60dvh,calc(6 * max(36px,min(7.8vw,4.68dvh)) + 18px));overflow-y:auto!important;overflow-x:hidden!important;justify-content:flex-start!important;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:3px 0!important}
dialog.original-panel.scroll-menu .original-content>.scroll-option{flex-shrink:0;min-height:max(36px,min(7.8vw,4.68dvh));padding:3px 6px;box-sizing:border-box}
.stats-panel[data-stats-page="1"] .original-content{overflow-y:auto!important;min-height:0;overscroll-behavior:contain;touch-action:pan-y}
.stats-breakdown{margin-top:14px;border-top:1px solid #729a85;padding:12px 5px;color:#d3e5da;font:14px/1.6 JHPixel,monospace}
.stats-breakdown summary{color:#d3d991;cursor:pointer}.stats-breakdown p{margin:8px 0!important;font-size:14px!important}.stats-breakdown strong,.stats-breakdown small{display:block;font-weight:normal}.stats-breakdown strong{color:#e6ecb2}.stats-breakdown small{color:#cee2d9;font-size:13px}
.stats-panel[data-stats-page="1"] .original-stat-table{flex:none;overflow:visible}.stats-panel[data-stats-page="1"] .stats-breakdown{flex:none}