/* Final client layout layer. Form controls stay large enough to avoid iOS focus zoom. */
.stage #world{position:relative;z-index:0}
.stage .game-toolbar{z-index:30;pointer-events:auto;touch-action:manipulation;isolation:isolate}
.stage .game-toolbar button{position:relative;pointer-events:auto;touch-action:manipulation}
.stage .game-toolbar img{pointer-events:none}
.camera-zoom{position:absolute;z-index:31;top:62px;left:132px;display:flex;align-items:center;gap:3px;padding:3px;background:#272a21e8;border:1px solid #a4966b;color:#ded3ae;touch-action:manipulation}
.camera-zoom button{width:30px;height:30px;padding:0;border:1px solid #948369;background:#4c493b;color:#e8d5a3;font:20px Georgia;cursor:pointer;touch-action:manipulation}
.camera-zoom span{font:11px Arial;min-width:37px;text-align:center}
#dialog.atlas-modal{width:min(1000px,calc(var(--client-width,100vw) - 28px));padding:10px;gap:5px}
#dialog.atlas-modal>.eyebrow{display:none}
#dialog.atlas-modal>h2{font-size:22px;padding-bottom:7px}
#dialog.atlas-modal #dialog-actions button{min-height:36px;padding:6px 12px}
.atlas-tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
#dialog .atlas-tools button{padding:6px 14px;min-height:34px;font:18px 'Aldoria Dialog',monospace;border:1px outset #9f8e68;background:#514d3d;color:#ead6a2;touch-action:manipulation}
.atlas-tools span{margin-left:auto;font-size:17px;color:#e7cf94}
#dialog .atlas-canvas{display:block;width:auto;height:auto;max-width:100%;max-height:calc(var(--client-height,100dvh) - 205px);margin:0 auto;border:2px solid #9f8e62;box-sizing:border-box;touch-action:none;cursor:grab}
#dialog .atlas-canvas:active{cursor:grabbing}
#dialog.atlas-modal .map-legend{font:16px/1.2 'Aldoria Dialog',monospace;margin:8px 0 0}
@media(max-height:500px){.camera-zoom{top:51px;left:105px}.camera-zoom button{width:26px;height:26px}.camera-zoom span{font-size:10px}#dialog.atlas-modal{gap:5px}#dialog.atlas-modal>.eyebrow{display:none}#dialog .atlas-canvas{max-height:calc(var(--client-height,100dvh) - 205px)}#dialog .atlas-tools button{min-height:29px;padding:4px 10px}.atlas-tools{gap:5px;margin-bottom:5px}#dialog.atlas-modal .map-legend{font-size:14px;margin-top:4px}}
.dedicated-client :is(input,select,textarea){font-size:16px!important;max-width:100%;min-width:0;box-sizing:border-box}
.dedicated-client :is(fieldset,.title-copy,.creator-editor,.creator-preview-panel,.roster-selection,.class-grid,.class-card,.appearance-fields,.appearance-fields label,.begin-row){min-inline-size:0;min-width:0}
.dedicated-client #client-fit{max-width:100%}
.dedicated-client #client-surface{left:var(--client-left,0px);transform:scale(var(--client-ui-scale,1));transform-origin:top left}
.dedicated-client.client-playing .client-play-tools{left:var(--client-center-x,50vw);top:calc(var(--client-top,0px) + 7px);bottom:auto;transform:translateX(-50%) scale(var(--client-ui-scale,1));transform-origin:top center}
.dedicated-client #title-screen .title-layout{width:100%;max-width:100%;box-sizing:border-box;margin:0}
.dedicated-client #title-screen .client-lobby{box-sizing:border-box}
.dedicated-client #title-screen .class-grid{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.dedicated-client #title-screen .class-card{min-width:0;overflow:hidden}
.dedicated-client #title-screen .class-name,.dedicated-client #title-screen .class-card small{overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.dedicated-client #title-screen .appearance-fields{width:100%;max-width:100%;box-sizing:border-box}
.dedicated-client #title-screen .appearance-fields select{width:100%;max-width:100%}
.dedicated-client #title-screen .begin-row input{flex:1;min-width:0;width:0}
.dedicated-client #title-screen .begin-row button{flex:1;min-width:0}
@media(orientation:landscape) and (max-height:600px){
 .dedicated-client #client-fit{left:0;width:100%;height:100%;transform:none;display:flex;flex-direction:column;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}
 .dedicated-client #title-screen .client-header{width:calc(100% - 20px);height:42px;min-height:42px;flex:none;gap:8px;box-sizing:border-box}
 .dedicated-client #title-screen .client-header-actions{gap:6px}
 .dedicated-client #title-screen .client-logo{width:100px;max-height:38px}
 .dedicated-client #title-screen .client-lobby{width:calc(100% - 20px);max-width:none;height:auto;flex:1;min-height:0;margin:4px auto 0;padding-bottom:0;display:flex;flex-direction:column}
 .dedicated-client #title-screen .client-topline{min-height:28px;flex:none}
 .dedicated-client #title-screen .title-layout{display:flex;flex-direction:column;flex:1;min-height:0;padding:8px;overflow:hidden}
 .dedicated-client #title-screen .title-copy{height:100%;max-height:100%;min-height:0;width:100%}
 .dedicated-client #title-screen #character-maker.character-workshop{display:grid;grid-template-columns:minmax(110px,24%) minmax(0,1fr);gap:12px;width:100%;max-width:none;min-height:0;flex:1}
 .dedicated-client #title-screen .creator-preview-panel{padding-right:12px;min-height:0;overflow:hidden}
 .dedicated-client #title-screen .creator-display{width:100%;max-width:none;min-height:0;flex:1;margin:0 0 3px}
 .dedicated-client #title-screen .creator-editor{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y}
 .dedicated-client #title-screen .creator-editor .class-card{grid-template-columns:30px minmax(0,1fr);padding:4px;column-gap:4px;min-height:44px}
 .dedicated-client #title-screen .creator-editor .class-card canvas{width:29px;height:35px}
 .dedicated-client #title-screen .creator-editor .class-name{font-size:12px}
 .dedicated-client #title-screen .creator-editor .class-card small{font-size:7px}
 .dedicated-client #title-screen .creator-editor .appearance-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 8px;padding:6px;margin:5px 0}
 .dedicated-client #title-screen .creator-editor .appearance-fields label{font-size:10px}
 .dedicated-client #title-screen .creator-editor .appearance-fields select{min-height:34px;line-height:1.1;padding:4px}
 .dedicated-client #title-screen .creator-editor .begin-row{display:flex;gap:8px;margin-top:7px}
 .dedicated-client #title-screen .creator-editor .begin-row input,.dedicated-client #title-screen .creator-editor .begin-row button{min-height:36px;padding:6px 8px}
 .dedicated-client #title-screen #save-note{font-size:9px;margin:3px 0 0;line-height:1.2}
 .dedicated-client #title-screen #title-import{font-size:10px;min-height:26px;padding:3px 6px;margin:0}
 .dedicated-client #title-screen #resume-box{min-height:0;grid-template-columns:minmax(110px,33%) minmax(0,1fr)}
}
/* All gameplay messages share the lobby's quiet charcoal and brass treatment. */
/* Remove the canvas's intrinsic grid minimum: the panel, not the bitmap,
   determines the available preview space on short landscape screens. */
#title-screen :is(.creator-display,.roster-preview-stage){position:relative;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
#title-screen .creator-display .creator-preview,#title-screen #resume-box .roster-preview-stage canvas{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;max-height:100%;object-fit:contain}
@media(orientation:landscape) and (max-height:600px){
 #title-screen #resume-box .roster-preview-stage{flex:1 1 0;min-height:0;overflow:hidden}
 #title-screen #resume-box .roster-preview-panel{min-height:0;overflow-y:auto;overscroll-behavior:contain}
 #title-screen #resume-box .roster-preview-panel>:not(.roster-preview-stage){flex-shrink:0}
 #title-screen .creator-display{flex:1 1 0;min-height:0}
}
#dialog{position:fixed;left:var(--client-center-x,50vw);top:var(--client-center-y,50dvh);right:auto;bottom:auto;transform:translate(-50%,-50%) scale(var(--client-ui-scale,1));transform-origin:center;box-sizing:border-box;width:min(620px,calc(var(--client-width,100vw) - 28px));max-width:calc(var(--client-width,100vw) - 28px);max-height:calc(var(--client-height,100dvh) - 24px);margin:0;padding:20px 22px;overflow:hidden;border:1px solid #82734e;border-image:none;outline:1px solid #080f0c;border-radius:7px;background:linear-gradient(135deg,#202a24,#101a16 70%);box-shadow:inset 0 1px #c7b17b22,0 18px 70px #000a;color:#dedaca}
#dialog[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px}
#dialog::backdrop{background:#050b08c9;backdrop-filter:blur(3px)}
#dialog>.eyebrow{grid-row:1;margin:0;padding-right:34px;color:#b7a271;font:10px/1.3 Karla,Arial,sans-serif;letter-spacing:.15em}
#dialog>h2{grid-row:2;margin:0;padding:0 36px 12px 0;border:0;border-bottom:1px solid #8a81513d;font:600 22px/1.25 Cinzel,Georgia,serif;color:#e2cf9a;text-align:left;text-shadow:none}
#dialog>#dialog-content{grid-row:3;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding-right:3px}
#dialog #dialog-content,#dialog #dialog-content>p{font:15px/1.55 Karla,Arial,sans-serif;color:#c7cfbd;text-shadow:none;overflow-wrap:anywhere}
#dialog #dialog-content>p{margin:4px 0 8px}
#dialog>#dialog-actions{grid-row:4;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0;padding-top:12px;border-top:1px solid #8a81513d}
#dialog #dialog-actions button{min-height:42px;padding:9px 15px;border:1px solid #b79e63;border-image:none;border-radius:4px;background:linear-gradient(#baa16b,#8c7547);color:#101b13;font:600 14px/1.3 Karla,Arial,sans-serif;text-shadow:none;box-shadow:inset 0 1px #e8d6a144}
#dialog #dialog-actions button.quiet{background:#1a261f;color:#ccd0b9;border-color:#637057;box-shadow:none}
#dialog #dialog-actions button.danger{background:#58332e;color:#f3d2be;border-color:#a76e54;box-shadow:none}
#dialog>.dialog-x{position:absolute;right:10px;top:9px;width:34px;height:34px;min-height:34px;padding:0!important;border:1px solid #686e52!important;border-image:none!important;background:#1b261f!important;color:#c8cfb8!important;border-radius:4px;font:24px/1 Arial,sans-serif;box-shadow:none}
#dialog.skills-modal,#dialog.inventory-modal{width:min(880px,calc(var(--client-width,100vw) - 28px))}
@media(orientation:landscape) and (max-height:600px){
 #dialog{padding:14px 18px;gap:7px;max-height:calc(var(--client-height,100dvh) - 18px)}
 #dialog>h2{font-size:19px;padding-bottom:9px}
 #dialog #dialog-content,#dialog #dialog-content>p{font-size:14px;line-height:1.45}
 #dialog>#dialog-actions{padding-top:9px}
 #dialog #dialog-actions button{min-height:38px;padding:7px 12px}
}

@media(max-height:500px){#dialog.atlas-modal .map-legend{display:none}}

/* North-up compass alongside the minimap, below the zoom controls. */
.hud-compass{position:absolute;z-index:3;left:132px;top:108px;width:58px;height:58px;pointer-events:none;filter:drop-shadow(0 2px 2px #0008)}
@media(max-width:750px) and (max-aspect-ratio:4/3){.hud-compass{left:117px;top:132px;width:52px;height:52px}}
@media(max-height:500px) and (min-aspect-ratio:4/3){.hud-compass{left:105px;top:89px;width:48px;height:48px}}

/* The old shard quest UI is retired; the tracker follows quests.mjs. */
#shard-list,#quest-tip{display:none!important}
#task-tracker[hidden]{display:none!important}
#world-stats [data-stat="task"]{display:none}