/* Jade lacquer, brass borders and compact portrait-native panels. */
.menuSymbol{display:block;width:30px;height:30px;flex:none}
#game header{height:86px;padding-right:145px;gap:7px;align-items:center}
#game header .identity{min-width:0;flex:1}
#game header .identity strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game header .currency{position:absolute;right:10px;top:8px;max-width:135px;display:flex;flex-wrap:nowrap;padding:1px 5px;background:#10271eaa;border:0;gap:5px;border-radius:4px;font-size:12px}
#game header .currency b{min-width:0;font-size:14px}
#game header .currency .artIcon{width:19px;height:19px}
.headerActions{position:absolute;right:7px;top:37px;display:flex;align-items:center;gap:2px}
.headerActions button{position:relative;width:42px;height:43px;border:1px solid #bfa46588;border-radius:7px;background:linear-gradient(#203c2cee,#10251bee);color:#eed097;display:grid;place-items:center;padding:5px;box-shadow:inset 0 0 0 2px #0b1b1455}
.headerActions #menu{width:42px;height:43px}
.headerActions button:hover,.headerActions #menu[aria-expanded=true]{background:#456143;color:#fff1b5;border-color:#eed097}
.headerActions button.hasNotice:after{content:'';position:absolute;right:-2px;top:-3px;width:9px;height:9px;background:#b94830;border:1px solid #ffe0a3;transform:rotate(45deg)}
[data-menu-badge],#characterDockBadge{position:absolute;right:-3px;top:-5px;background:#a9422b;border:1px solid #d8b174;border-radius:8px;padding:1px 4px;min-width:15px;font:700 12px var(--font-ui);line-height:16px;color:#fff3ce;text-align:center;font-style:normal}
[data-menu-badge][hidden],#characterDockBadge[hidden]{display:none}
#characterDock{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
#characterDockIcon .menuSymbol{color:#e8c789;width:30px;height:30px}
#characterDockBadge{right:10%;top:1px}

/* Compact overlays leave the field visible; only the panel has a translucent fill. */
#panel.characterPanel,#panel.gameMenuPanel{color:#f0e9d5;border:1px solid #bca16bc9;border-radius:4px;background:linear-gradient(145deg,#173c2ce0,#0a2018db);box-shadow:inset 0 0 0 2px #0d1d1644,0 3px 12px #0005;text-shadow:0 1px 2px #07150e;}
#panel.characterPanel .panelHead,#panel.gameMenuPanel .panelHead{padding:2px 6px;min-height:32px;gap:5px;background:#1c3c2ed4;border-bottom:1px solid #b59a6966;color:#eed5a0;flex:none}
#panel.characterPanel .panelHead #panelTitle,#panel.gameMenuPanel .panelHead #panelTitle{font-size:16px;letter-spacing:.025em;line-height:1.3}
#panel.characterPanel .panelHead button,#panel.gameMenuPanel .panelHead button{width:28px;height:28px;font-size:21px;line-height:1;color:#f5d999;border-color:#cdb075aa;background:#244739aa;box-shadow:none}
#panel.characterPanel{inset:auto 5px max(5px,env(safe-area-inset-bottom));height:min(356px,48%);display:flex;flex-direction:column;overflow:hidden}
#panel.characterPanel #panelBody{min-height:0;flex:1;overflow:hidden;padding:0}
.characterSheet{display:flex;flex-direction:column;height:100%;min-height:0;padding:0 6px 4px;gap:3px}
.characterIdentity{display:flex;align-items:center;gap:5px;min-width:0;flex:none;height:38px;padding:2px 0}
.characterIdentity .classPortrait{flex:none;width:28px;height:32px;margin:0;border:1px solid #bc9a5666;border-radius:3px;background-size:168px 112px}
.characterIdentity .classPortrait.sword{background-size:84px 56px}
.characterIdentity>div{display:flex;align-items:baseline;gap:5px;min-width:0;flex:1;flex-wrap:wrap;line-height:1.2}
.characterIdentity h3{font:700 14px var(--font-display);line-height:1.2;margin:0;color:#f6eacb;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.characterIdentity small{color:#d7bf8a;font-size:11px}
.characterIdentity>div>span{display:none}
.characterIdentity button{border:1px solid #9f8b5c88;background:#29483a77;color:#e5d1a1;font-size:11px;border-radius:3px;padding:3px 5px;min-height:27px;flex:none}
.attributeIntro{display:none}
.characterColumns{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:5px;flex:1;min-height:0}
.attributeList{display:grid;grid-auto-rows:minmax(49px,1fr);min-height:0;overflow:auto;overscroll-behavior:contain;border:1px solid #9b8b615e;border-radius:3px;background:#08140c20;scrollbar-width:thin;scrollbar-color:#978152 #17251b66}
.attributeCard{display:grid;grid-template-columns:29px minmax(0,1fr);grid-template-rows:27px 12px;align-content:center;padding:3px;column-gap:3px;row-gap:0;border-bottom:1px solid #7b795349;min-height:49px}
.attributeCard:last-child{border-bottom:0}
.attributeName{grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#e3bf7e}
.attributeName .menuSymbol{width:16px;height:16px;color:#c5ad73}
.attributeName strong{font:700 13px var(--font-display);line-height:1.1}
.attributeStepper{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;gap:1px;align-items:center;text-align:center}
.attributeStepper button{height:26px;min-width:0;border:1px solid #d6ba79a0;border-radius:3px;box-shadow:inset 0 0 0 1px #172a2155;background:linear-gradient(#3a5640b8,#213a2bb8);color:#f0d390;font:700 20px var(--font-ui);line-height:1;padding:0;touch-action:manipulation}
.attributeStepper b{font:700 16px var(--font-ui);font-variant-numeric:tabular-nums;color:#f9f1dd}
.attributeCard small{grid-column:2;font-size:10px;line-height:12px;text-align:center;color:#becbb9;font-variant-numeric:tabular-nums}
.attributeStepper button:disabled{opacity:.38;cursor:default}
.characterDetails{overflow:auto;min-width:0;min-height:0;border:1px solid #9b8b615e;border-radius:3px;background:#08140c20;scrollbar-width:thin;scrollbar-color:#978152 #17251b66;overscroll-behavior:contain}
.statPreviewTag{position:sticky;top:0;padding:3px;font-size:10px;line-height:1.2;text-align:center;background:#203e2fec;color:#c4c5a2;z-index:1;border-bottom:1px solid #827d525e}
.statPreviewTag.previewing{color:#c8efb0;background:#345736ee}
.attributeStats h4{display:flex;align-items:center;justify-content:center;gap:5px;margin:0;padding:3px;color:#e2cf9f;font:700 12px var(--font-display);line-height:1.2;background:#080f0b30}
.attributeStats h4:before,.attributeStats h4:after{content:'◆';font-size:5px;color:#9b8a55}
.attributeStat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px;align-items:center;padding:3px 5px;font-size:12px;line-height:1.3;border-bottom:1px solid #b5af7120}
.attributeStat>span{min-width:0;color:#e0e3d1;word-break:keep-all;overflow-wrap:anywhere}
.attributeStat>b{font-size:12px;color:#fff5dc;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.attributeStat b small{display:inline;font-size:10px;margin-right:3px;color:#a8b5a0;text-decoration:line-through}
.statChange{color:#b0efb9;display:inline}
.attributeEquipment{display:flex;flex-direction:column;gap:3px;padding:5px;font-size:12px;border-bottom:1px solid #b5af7120}
.attributeEquipment small,.attributeEquipment span{font-size:10px;color:#b6c0aa}
.attributeEquipment strong{font-size:12px;color:#e9cc8d}
.attributeDetailsNote{margin:0;padding:5px;font-size:11px;line-height:1.4;color:#b9c4b0}
.attributeEffectHint{margin:0;padding:0 1px;min-height:14px;font-size:10px;line-height:1.3;color:#c7d3bf;flex:none}
.attributeFooter{display:grid;grid-template-columns:1.1fr 1fr 1.15fr;gap:5px;align-items:center;border-top:1px solid #b99d5b44;padding-top:3px;flex:none;min-height:34px}
.attributePointSummary{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;line-height:1.15}
.attributePointSummary small{color:#d6b66e;font-size:10px}
.attributePointSummary strong{color:#a2e4ac;font-size:16px;font-variant-numeric:tabular-nums}
.attributePointSummary span{font-size:10px;color:#becbb4}
.attributeFooter button{min-height:29px;padding:3px;background:linear-gradient(#55382aca,#301c16ca);color:#e6ccb0;border:1px solid #bfa06d99;border-radius:3px;font:700 13px var(--font-display);box-shadow:inset 0 0 0 1px #160f0844}
.attributeFooter #attributeApply{background:linear-gradient(#456c43ce,#274a35ce);color:#f3eacb}
.attributeFooter button:disabled{opacity:.45;cursor:default}
.attributeStatus{flex:none;min-height:13px;font-size:10px;color:#c3d1b8;line-height:1.3;text-align:center;margin:0}

#panel.gameMenuPanel{inset:82px 5px auto auto;width:min(260px,78%);max-height:min(260px,calc(100% - 170px));overflow:auto;scrollbar-width:thin;scrollbar-color:#998551 #15261c66}
#panel.gameMenuPanel #panelBody{padding:4px}
.menuGroup{position:relative;border-bottom:1px solid #aa945642;margin-bottom:2px;padding-bottom:2px}
.menuGroup:last-of-type{margin-bottom:0}
.menuGroup h3{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gameMenuGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:2px;row-gap:3px;padding:1px 0}
.gameMenuTile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;min-height:38px;padding:1px 0;background:transparent;border:0;color:#ede5cf;font:11px var(--font-ui);line-height:1.2;cursor:pointer}
.menuTileArt{position:relative;display:grid;place-items:center;width:24px;height:24px;border:1px solid #b9a26b99;border-radius:5px;background:radial-gradient(ellipse at 50% 20%,#354a2b88,#15221a66);box-shadow:inset 0 0 0 1px #09130e44;color:#e4cd9a}
.menuTileArt .menuSymbol{width:18px;height:18px}
.menuTileArt .artIcon{width:22px;height:22px;border-radius:3px}
.gameMenuTile strong{font-size:10px;font-weight:500;word-break:keep-all;overflow-wrap:anywhere;text-align:center}
.gameMenuTile:hover .menuTileArt{border-color:#f7d68d;background:#4b5c34bb}
.gameMenuTile.planned{color:#b4baa6}
.gameMenuTile.planned>.menuTileArt{color:#a3ac91;border-color:#7b805780;background:#15221a44}
.gameMenuTile.planned>.menuTileArt>.menuSymbol{opacity:.6}
.menuLock{position:absolute;right:-3px;bottom:-2px;border-radius:50%;background:#18241bc9;border:1px solid #9c956488;padding:1px}
.menuLock .menuSymbol{width:11px;height:11px;color:#d6ca9d}
.gameMenuTile [data-menu-badge]{font-size:10px;line-height:12px;min-width:12px;right:-5px;top:-4px;padding:0 2px}
.menuPlannedInfo{padding:5px;background:#13291cd9;border-left:2px solid #c6a467;color:#d5dcc9;font-size:11px;line-height:1.4;margin:4px 1px}
.menuPlannedInfo strong{color:#edce92;font-family:var(--font-display);font-size:12px}
.menuPlannedInfo p{margin:3px 0 0}
.menuLegend{display:flex;justify-content:flex-end;align-items:center;gap:3px;margin:2px 1px 0;color:#c2c9b3;font-size:10px;line-height:14px}
.menuLegend .menuSymbol{width:12px;height:12px}
@media(max-width:350px){
 #game header{padding-right:130px;padding-left:8px;gap:5px}
 #game header .portrait{width:39px;height:39px;flex:none}
 .headerActions{gap:2px;right:5px}
 .headerActions button,.headerActions #menu{width:38px;height:40px}
 #game header .currency{right:7px}
 #game header .identity strong{font-size:14px}
 #game header #level{font-size:12px;line-height:1.3}
 .characterColumns{grid-template-columns:104px minmax(0,1fr);gap:4px}
 .attributeCard{grid-template-columns:24px minmax(0,1fr);column-gap:2px;padding:2px}
 .attributeStat{padding:3px;font-size:11px}
 .attributeStat>b{font-size:11px}
 .characterIdentity>div{gap:2px 4px}
 #panel.gameMenuPanel{width:80%;}
 .gameMenuTile strong{font-size:10px}
}
@media(max-height:650px){
 #panel.characterPanel{height:48%;}
 .attributeEffectHint{display:none}
 #panel.gameMenuPanel{top:77px;max-height:min(260px,calc(100% - 148px))}
}

#panel.gameMenuPanel .panelHead{min-height:28px;padding:1px 5px}
#panel.gameMenuPanel .panelHead #panelTitle{font-size:14px}
#panel.gameMenuPanel .panelHead button{width:25px;height:25px;font-size:19px}