/* ZEP's practical editor composition, using the incumbent Malang surfaces. */
.player-profile-page{margin:0;background:#f5f6f9;color:var(--ml-ink);font:16px/1.5 var(--ml-font);min-height:100dvh}
.player-profile-page *,.player-profile-editor,.player-profile-editor *{box-sizing:border-box}
.player-profile-page [hidden],.player-profile-editor[hidden],.player-profile-editor [hidden]{display:none!important}
.player-profile-page ::selection,.player-profile-editor ::selection{background:var(--ml-land);color:var(--ml-ink)}
.player-profile-site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1120px;margin:0 auto;padding:24px 32px}
.player-profile-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.player-profile-brand img:first-child{width:42px;height:39px;object-fit:contain}
.player-profile-brand img:last-child{width:174px;height:40px;object-fit:contain}
.player-profile-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ml-muted);font-size:14px;text-decoration:none}
.player-profile-back svg{width:18px;height:18px;stroke:currentColor}
.player-profile-page-main{width:min(840px,calc(100% - 48px));margin:24px auto 64px}
.player-profile-page-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:600px;padding:40px 24px;border-radius:16px;background:var(--ml-white);text-align:center}
.player-profile-page-state h1,.player-profile-page-state h2{font-size:22px;line-height:1.4;margin:0 0 16px;font-weight:750;letter-spacing:-.025em}
.player-profile-page-state p{max-width:48ch;margin:0 0 24px;color:var(--ml-muted);font-size:15px;word-break:keep-all}
.player-profile-page-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.player-profile-editor{font:16px/1.5 var(--ml-font);color:var(--ml-ink);background:var(--ml-white);width:100%;max-width:840px;margin:0 auto;padding:0;border:0;border-radius:16px;box-shadow:0 8px 32px #17171714;overflow:hidden}
dialog.player-profile-editor{position:fixed;top:calc(var(--player-visible-top,0px) + 24px);bottom:calc(var(--player-visible-bottom,0px) + 24px);width:min(840px,calc(100vw - 48px));max-height:calc(var(--player-visible-height,100dvh) - 48px)}
dialog.player-profile-editor[open]{display:flex;flex-direction:column}
dialog.player-profile-editor .player-profile-form{min-height:0;overflow:hidden}
dialog.player-profile-editor .player-profile-editor-body{overflow:auto;overscroll-behavior:contain;scroll-padding-block:12px}
.player-profile-field input{scroll-margin-block:12px}
dialog.player-profile-editor::backdrop{background:#17171766}
.player-profile-editor-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:14px 24px;border-bottom:1px solid #ececea;flex:none}
.player-profile-editor-header h2{margin:0;font-size:20px;line-height:28px;font-weight:750;letter-spacing:-.025em}
.player-profile-close{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:var(--ml-muted);cursor:pointer}
.player-profile-close svg{width:22px;height:22px}
.player-profile-close:hover{background:#f5f5f2;color:var(--ml-ink)}
.player-profile-form{display:flex;flex-direction:column;min-height:528px;min-width:0}
.player-profile-editor-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-areas:"catalog preview" "catalog field";gap:18px 32px;flex:1;min-height:0;padding:24px}
.player-profile-editor.is-avatar-only .player-profile-editor-body{grid-template-areas:"catalog preview"}
.player-profile-preview{grid-area:preview;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:0;height:296px;border-radius:12px;background:#f5f5f2}
.player-profile-preview-name{position:absolute;top:18px;left:12px;right:12px;margin:0;font-size:14px;font-weight:650;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-profile-preview-canvas{display:block;width:252px;max-width:100%;height:270px;object-fit:contain;image-rendering:pixelated}
.player-profile-preview-status{position:absolute;bottom:16px;left:12px;right:12px;margin:0;font-size:13px;color:var(--ml-muted);text-align:center}
.player-profile-field{grid-area:field;min-width:0}
.player-profile-field-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.player-profile-field label{font-size:14px;font-weight:650}
.player-profile-counter{font-size:12px;color:var(--ml-muted);font-variant-numeric:tabular-nums}
.player-profile-counter.is-invalid{color:#a01f18}
.player-profile-field input{width:100%;height:48px;padding:12px;border:1px solid #deded7;border-radius:8px;background:#fff;color:var(--ml-ink);font:16px/22px var(--ml-font);caret-color:var(--ml-brand-text)}
.player-profile-field input::placeholder{color:var(--ml-muted);opacity:1}
.player-profile-field input[aria-invalid=true]{border-color:#a01f18}
.player-profile-help{margin:8px 0 0;font-size:12px;line-height:18px;color:var(--ml-muted);word-break:keep-all}
.player-profile-catalog{grid-area:catalog;min-width:0}
.player-profile-catalog h3{font-size:14px;line-height:22px;font-weight:650;margin:0 0 12px}
.player-profile-character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.player-profile-character{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:172px;padding:8px;border:1px solid #e5e5de;border-radius:10px;background:#fafaf7;color:var(--ml-ink);font:14px/20px var(--ml-font);cursor:pointer}
.player-profile-character:hover:not(:disabled){background:#f5f5f1}
.player-profile-character[aria-checked=true]{border-color:#756000;background:#fff8ce;box-shadow:inset 0 0 0 1px #756000}
.player-profile-character-art{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:140px}
.player-profile-character canvas{display:block;max-width:100%;width:120px;height:140px;image-rendering:pixelated}
.player-profile-character-status{font-size:12px;line-height:18px;color:var(--ml-muted);text-align:center}
.player-profile-character-name{display:block;width:100%;text-align:center;font-size:13px;font-weight:650;white-space:nowrap}
.player-profile-editor-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;min-height:80px;padding:16px 24px 20px;border-top:1px solid #ececea;background:#fff;flex:none}
.player-profile-feedback{flex:1;min-width:0}
.player-profile-error{font-size:13px;line-height:20px;color:#a01f18;margin:0;overflow-wrap:anywhere}
.player-profile-actions{display:flex;gap:10px;flex:none}
.player-profile-control{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border:1px solid #deded7;border-radius:8px;font:650 14px/1.4 var(--ml-font);text-decoration:none;cursor:pointer;white-space:nowrap}
.player-profile-control.primary{border-color:var(--ml-land);background:var(--ml-land);color:#302700}
.player-profile-control.primary:hover:not(:disabled){background:#efd017;border-color:#efd017}
.player-profile-control.secondary{background:#fff;color:var(--ml-ink)}
.player-profile-control.secondary:hover:not(:disabled){background:#f5f5f2}
.player-profile-control:disabled{background:#ededeb;border-color:#ededeb;color:#656561;cursor:default}
.player-profile-character:disabled,.player-profile-field input:disabled{cursor:wait;opacity:.7}
.player-profile-text-button{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:8px 0;border:0;background:transparent;color:#756000;font:650 13px/20px var(--ml-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.player-profile-text-button:disabled{color:var(--ml-muted);cursor:wait}
.player-profile-page a:focus-visible,.player-profile-page button:focus-visible,.player-profile-editor button:focus-visible,.player-profile-editor input:focus-visible{outline:3px solid #756000;outline-offset:3px}
@media(max-width:700px){
 .player-profile-editor-body{grid-template-columns:minmax(0,1fr) 240px;gap:18px 20px;padding:20px}
 .player-profile-character{min-height:160px;padding:4px}
 .player-profile-character-name{font-size:12px}
}
@media(max-width:600px){
 .player-profile-site-header{padding:16px 20px;gap:16px}
 .player-profile-brand{gap:9px}.player-profile-brand img:first-child{width:32px;height:30px}.player-profile-brand img:last-child{width:128px;height:30px}
 .player-profile-back{font-size:13px}
 .player-profile-page-main{width:calc(100% - 32px);margin:16px auto 32px}
 .player-profile-page-state{min-height:600px;padding:32px 20px}
 dialog.player-profile-editor{position:fixed;inset:auto 0 var(--player-visible-bottom,0px);width:100%;max-width:none;height:min(780px,calc(var(--player-visible-height,100dvh) - 12px));max-height:calc(var(--player-visible-height,100dvh) - 12px);margin:0;border-radius:20px 20px 0 0}
 dialog.player-profile-editor[open]{display:flex;flex-direction:column}
 .player-profile-editor-header{min-height:64px;padding:10px 16px;flex:none}
 .player-profile-editor-header h2{font-size:18px}
 .player-profile-form{min-height:0;flex:1;overflow:hidden}
 .player-profile-editor-body{display:flex;flex-direction:column;gap:20px;padding:16px;overflow:auto;overscroll-behavior:contain}
 .player-profile-preview{height:202px;min-height:202px;flex:none}
 .player-profile-preview-name{top:12px}
 .player-profile-preview-canvas{width:174px;height:186px}
 .player-profile-preview-status{bottom:12px}
 .player-profile-field,.player-profile-catalog{flex:none}
 .player-profile-character-grid{gap:10px}
 .player-profile-character{min-height:156px}
 .player-profile-character-art{height:130px}
 .player-profile-character canvas{width:111px;height:130px}
 .player-profile-editor-footer{align-items:stretch;flex-direction:column;gap:8px;flex:none;min-height:80px;padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
 .player-profile-feedback:empty{display:none}
 .player-profile-actions{width:100%;gap:10px}
 .player-profile-actions .player-profile-control{flex:1}
 section.player-profile-editor .player-profile-form{overflow:visible}
 section.player-profile-editor .player-profile-editor-body{overflow:visible}
 section.player-profile-editor .player-profile-editor-footer{position:sticky;bottom:var(--player-visible-bottom,0px)}
}

/* Short, wide screens retain ZEP's choices-left, preview-right composition.
   Only the editor body scrolls; its header and save actions stay in view. */
@media(min-width:480px) and (max-height:540px){
 .player-profile-site-header{min-height:52px;padding:4px max(16px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left));gap:16px}
 .player-profile-brand{gap:9px}
 .player-profile-brand img:first-child{width:30px;height:28px}
 .player-profile-brand img:last-child{width:128px;height:28px}
 .player-profile-back{font-size:13px}
 .player-profile-page-main{width:min(840px,calc(100% - max(16px,env(safe-area-inset-left)) - max(16px,env(safe-area-inset-right))));margin:8px auto}
 .player-profile-page-state{min-height:0;height:calc(100dvh - 68px - env(safe-area-inset-bottom));padding:20px;overflow:auto}
 .player-profile-page-state h1,.player-profile-page-state h2{font-size:20px;margin-bottom:12px}
 .player-profile-page-state p{margin-bottom:16px}
 dialog.player-profile-editor{position:fixed;inset:var(--player-visible-top,0px) 0 var(--player-visible-bottom,0px);width:min(840px,calc(100vw - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right))));height:calc(var(--player-visible-height,100dvh) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));max-height:calc(var(--player-visible-height,100dvh) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));margin:auto;border-radius:12px}
 .player-profile-page section.player-profile-editor{display:flex;flex-direction:column;height:calc(100dvh - 68px - env(safe-area-inset-bottom));max-height:calc(100dvh - 68px - env(safe-area-inset-bottom))}
 .player-profile-editor-header{min-height:56px;padding:5px 16px;flex:none}
 .player-profile-editor-header h2{font-size:18px;line-height:24px}
 .player-profile-form,section.player-profile-editor .player-profile-form{min-height:0;flex:1;overflow:hidden}
 .player-profile-editor-body,section.player-profile-editor .player-profile-editor-body{display:grid;grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:max-content max-content;grid-template-areas:"catalog preview" "catalog field";gap:8px 16px;align-content:start;min-height:0;padding:10px 16px;overflow:auto;overscroll-behavior:contain}
 .player-profile-preview{height:134px;min-height:0;align-self:start;flex:none}
 .player-profile-preview-name{top:8px;font-size:12px;line-height:18px}
 .player-profile-preview-canvas{width:auto;max-width:144px;height:calc(100% - 24px);margin-top:16px;aspect-ratio:14/15}
 .player-profile-preview-status{bottom:8px;font-size:11px;line-height:14px}
 .player-profile-field-heading{margin-bottom:4px}
 .player-profile-field label{font-size:13px;line-height:18px}
 .player-profile-field input{height:48px;padding:12px}
 .player-profile-help{margin-top:4px;font-size:11px;line-height:14px}
 .player-profile-catalog h3{margin-bottom:4px;font-size:13px;line-height:18px}
 .player-profile-character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .player-profile-character{min-height:94px;padding:4px}
 .player-profile-character-art{height:66px}
 .player-profile-character canvas{width:auto;max-width:100%;height:66px;aspect-ratio:6/7}
 .player-profile-character-name{font-size:11px;line-height:16px;overflow:hidden;text-overflow:ellipsis}
 .player-profile-editor-footer,section.player-profile-editor .player-profile-editor-footer{position:static;flex-direction:row;align-items:center;gap:12px;min-height:68px;padding:10px 16px;flex:none}
 .player-profile-actions{width:auto;gap:8px}
 .player-profile-control{min-height:44px;padding:8px 20px}
 .player-profile-actions .player-profile-control{flex:none}
 .player-profile-error{font-size:12px;line-height:18px}
 .player-profile-text-button{min-height:44px;font-size:12px;padding:6px 0}
}
@media(min-width:480px) and (max-width:650px) and (max-height:540px){
 .player-profile-editor-body,section.player-profile-editor .player-profile-editor-body{grid-template-columns:minmax(0,1fr) 176px;gap:8px 12px;padding:10px 12px}
}
@media(min-width:651px) and (max-width:740px) and (max-height:540px){
 .player-profile-editor-body,section.player-profile-editor .player-profile-editor-body{grid-template-columns:minmax(0,1fr) 210px}
}
@media(min-width:480px) and (max-height:400px){
 .player-profile-preview{height:104px}
 .player-profile-character{min-height:80px}
 .player-profile-character-art,.player-profile-character canvas{height:52px}
}
/* A landscape keyboard can leave less space than a header and footer need.
   Keep the active field and explicit save/cancel together; draft selections
   return when the keyboard closes. Controls retain their touch target size. */
dialog.player-profile-editor[data-player-compact-input]{top:var(--player-visible-top,0px);bottom:auto;height:auto;max-height:none;margin:0 auto;border-radius:8px}
dialog.player-profile-editor[data-player-compact-input] .player-profile-editor-header,
dialog.player-profile-editor[data-player-compact-input] .player-profile-preview,
dialog.player-profile-editor[data-player-compact-input] .player-profile-catalog,
dialog.player-profile-editor[data-player-compact-input] .player-profile-help{display:none}
dialog.player-profile-editor[data-player-compact-input] .player-profile-editor-body{display:block;padding:8px 12px;min-width:0}
dialog.player-profile-editor[data-player-compact-input] .player-profile-field-heading{margin-bottom:4px}
dialog.player-profile-editor[data-player-compact-input] .player-profile-editor-footer{min-height:0;padding:8px 12px;gap:8px}
@media(min-width:480px){
 dialog.player-profile-editor[data-player-compact-input] .player-profile-form{flex-direction:row;align-items:stretch}
 dialog.player-profile-editor[data-player-compact-input] .player-profile-field-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 dialog.player-profile-editor[data-player-compact-input] .player-profile-editor-footer{border-top:0;align-items:center;max-width:50%}
 dialog.player-profile-editor[data-player-compact-input] .player-profile-actions{width:auto}
 dialog.player-profile-editor[data-player-compact-input] .player-profile-actions .player-profile-control{flex:none}
}