@import url('ui/theme.css');

#preworld { position:fixed; inset:0; z-index:8; overflow:auto; overscroll-behavior:contain; color:var(--text); background:var(--night); font:16px/1.65 var(--sans); padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); color-scheme:dark; }
#preworld[hidden] { display:none; }
#preworld *, #preworld *::before, #preworld *::after { box-sizing:border-box; }
#preworld button, #preworld input, #preworld select { font:inherit; }
#preworld button, #preworld a, #preworld label { -webkit-tap-highlight-color:transparent; }
#preworld button:not(:disabled), #preworld label:has(input[type=radio]), #preworld label:has(input[type=checkbox]) { cursor:pointer; }
#preworld button:disabled { opacity:.5; cursor:wait; }
#preworld a { color:inherit; text-decoration:none; }
#preworld p { margin:0 0 20px; }
#preworld h1, #preworld h2, #preworld h3 { font-family:var(--serif); font-weight:400; color:var(--text); line-height:1.25; margin:0 0 12px; }
#preworld h1 { font-family:'Midkemia Display',Georgia,serif; font-size:clamp(25px,2.3vw,34px); font-synthesis:none; line-height:1.45; letter-spacing:.012em; }
#preworld h2 { font-size:28px; }
#preworld h3 { font-size:25px; }
#preworld svg { width:23px; height:23px; flex:0 0 auto; }
#preworld :focus-visible { outline:2px solid var(--gold-light); outline-offset:4px; }
#preworld h1:focus { outline:none; }
.pw-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; padding:16px clamp(20px,5vw,80px); border-top:2px solid #7f7154; border-bottom:1px solid var(--line); background:#091018; }
.pw-brand { display:flex; align-items:center; flex-direction:column; line-height:1; }
.pw-brand > span { font:32px/1.2 'Midkemia Initial',Georgia,serif; letter-spacing:-.025em; color:#dce9ec; background:linear-gradient(#fafcf9,#9eb8c5 60%,#edf5f2 70%,#8bafc4); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.pw-brand small { font:9px var(--serif); letter-spacing:.55em; padding-left:.55em; margin-top:3px; color:var(--gold-light); }
.pw-header-actions { display:flex; align-items:center; gap:28px; }
#pw-music { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; min-width:44px; border:1px solid var(--line); border-radius:0; padding:7px 11px; background:transparent; color:var(--muted); font-size:12px; }
#pw-music[aria-pressed=true] { color:var(--gold-light); border-color:#7d7056; }
#pw-music svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#pw-music[aria-pressed=true] .pw-music-slash { display:none; }
#pw-website { font-size:12px; color:var(--muted); }
#pw-language { min-height:44px; border:0; border-bottom:1px solid var(--line); color:var(--gold-light); background:#091018; padding:4px 8px; font-size:13px; }
.pw-shell { max-width:1440px; margin:auto; padding:clamp(30px,5vw,76px) clamp(20px,5vw,80px); display:grid; grid-template-columns:minmax(250px,1fr) minmax(360px,480px); gap:clamp(40px,6vw,100px); align-items:center; min-height:calc(100dvh - 90px); }
.pw-art { position:relative; align-self:stretch; min-height:540px; display:flex; align-items:flex-end; isolation:isolate; }
.pw-art::before { content:''; position:absolute; inset:-50px -80px -45px -90px; z-index:-2; background:url('ui/mage-hd.jpg') 60% center/cover no-repeat; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 80%,transparent),linear-gradient(0deg,transparent,#000 20%,#000 85%,transparent); mask-composite:intersect; opacity:.88; }
.pw-art::after { content:''; position:absolute; inset:-50px -80px -45px -90px; z-index:-1; background:linear-gradient(0deg,var(--night) 4%,#0b131de0 20%,transparent 58%); }
.pw-art-copy { max-width:430px; padding:0 0 30px; }
#pw-welcome { font-size:clamp(33px,3vw,44px); }
#pw-introduction { color:#afbbc6; max-width:340px; font-size:16px; }
.pw-panel { position:relative; padding:40px 38px 28px; background:linear-gradient(140deg,#152635eF,#0d1a27f5),url('ui/ice.webp') center/600px; border:1px solid var(--line); box-shadow:0 20px 70px #0003,inset 0 0 0 4px #080f1722; }
.pw-panel::before, .pw-panel::after { content:''; position:absolute; width:15px; height:15px; border:solid #b49b6a; opacity:.8; pointer-events:none; }
.pw-panel::before { left:5px; top:5px; border-width:1px 0 0 1px; }
.pw-panel::after { right:5px; bottom:5px; border-width:0 1px 1px 0; }
.pw-eyebrow { display:flex; align-items:center; gap:10px; color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.pw-eyebrow::before { content:''; width:23px; height:1px; background:var(--gold); }
.pw-lead { color:var(--muted); font-size:15px; }
.pw-form { display:flex; flex-direction:column; gap:20px; }
.pw-form label, .pw-delete-dialog label { display:flex; flex-direction:column; gap:7px; color:#d1d8d9; font-size:14px; }
#preworld .pw-form input:not([type=checkbox]):not([type=radio]), #preworld .pw-form select, #preworld .pw-delete-dialog input { width:100%; min-width:0; min-height:50px; border:1px solid #53616a; border-radius:0; padding:10px 13px; background:#09131d; color:var(--text); font-size:16px; }
.pw-form input:hover, .pw-form select:hover { border-color:#8c806a; }
.pw-password { position:relative; display:flex; }
.pw-password input { padding-right:52px !important; }
.pw-password button { position:absolute; inset:1px 1px 1px auto; width:46px; border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; display:grid; place-items:center; color:var(--gold); padding:0; }
.pw-check { flex-direction:row !important; align-items:center; gap:11px !important; font-size:13px !important; min-height:44px; }
.pw-form input[type=checkbox], .pw-form input[type=radio] { accent-color:var(--gold); width:19px; height:19px; margin:0; flex-shrink:0; }
.pw-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:50px; padding:12px 20px; border:1px solid #7d7766; border-radius:0; font-size:14px !important; font-weight:700 !important; line-height:1.45; touch-action:manipulation; transition:background .15s,border-color .15s; }
.pw-primary { background:linear-gradient(120deg,#d8c191,#b69b67); color:#171b20 !important; border-color:#c7b182; box-shadow:inset 0 0 0 3px #171b2028; }
.pw-primary:hover:not(:disabled) { background:linear-gradient(120deg,#e7d2a6,#c8b17f); }
.pw-secondary { background:#0d182380; color:var(--text); }
.pw-secondary:hover:not(:disabled) { background:#243442; border-color:var(--gold-light); }
.pw-first-visit { margin-top:26px; padding-top:23px; border-top:1px solid var(--line); font-size:13px; }
.pw-first-visit strong { color:var(--gold-light); font-weight:400; }
.pw-first-visit p { margin:7px 0 0 !important; color:var(--muted); line-height:1.85; }
.pw-alert { border-left:2px solid #d5a686; padding:12px 15px; background:#60303244; color:#f1d8c5; font-size:14px; }
.pw-alert[hidden] { display:none; }
.pw-wait { display:flex; flex-direction:column; align-items:center; gap:22px; padding:40px 0; color:var(--muted); text-align:center; }
.pw-spinner { width:38px; height:38px; border:1px solid var(--line); border-top:2px solid var(--gold); border-radius:50%; animation:pw-spin 1.1s linear infinite; }
@keyframes pw-spin { to { transform:rotate(360deg); } }
.pw-characters { display:grid; gap:12px; margin:27px 0; }
.pw-character { display:flex; align-items:center; gap:15px; width:100%; min-height:92px; padding:17px; text-align:left; border:1px solid var(--line); border-radius:0; color:var(--text); background:#0a1622; }
.pw-character.is-selected { border-color:var(--gold); background:linear-gradient(110deg,#c6ac7b13,#0a1622); box-shadow:inset 3px 0 var(--gold); }
.pw-character strong { display:block; font:24px/1.25 var(--serif); overflow-wrap:anywhere; }
.pw-character small { display:block; color:var(--muted); font-size:12px; margin-top:5px; }
.pw-crest { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid var(--line); color:var(--gold); flex:0 0 auto; }
.pw-crest svg { width:28px !important; height:28px !important; }
.pw-character-arrow { margin-left:auto; color:var(--gold); }
.pw-selection-actions { display:grid; gap:12px; }
.pw-minor-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.pw-minor-actions .pw-button { padding:8px 0; min-height:44px; border:0; background:none; font-size:12px !important; color:var(--muted); font-weight:400 !important; }
.pw-minor-actions [data-action=delete] { color:#bfaaa0; }
.pw-wide .pw-shell { grid-template-columns:minmax(170px,.48fr) minmax(600px,1.52fr); gap:45px; align-items:start; }
.pw-wide .pw-art { position:sticky; top:35px; min-height:640px; }
.pw-wide .pw-art-copy { padding-top:390px; }
.pw-wide #pw-welcome { font-size:33px; }
.pw-wide .pw-panel { padding:32px; }
.pw-wide .pw-panel > h1 { font-size:29px !important; }
.pw-steps { display:flex; margin:26px 0 30px; padding:0; list-style:none; gap:18px; border-bottom:1px solid var(--line); }
.pw-steps li { display:flex; align-items:center; gap:8px; color:#81909c; font-size:12px; padding:0 0 16px; flex:1; }
.pw-steps li > span { color:var(--gold); font-size:10px; }
.pw-steps li[aria-current] { color:var(--gold-light); border-bottom:2px solid var(--gold); }
.pw-steps .is-complete { color:#c0c9c9; }
.pw-creation-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:28px; }
.pw-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pw-help { color:var(--muted); font-size:13px; line-height:1.75; margin:0 !important; }
.pw-form fieldset { margin:0; padding:0; border:0; min-width:0; }
.pw-form legend { font-size:14px; color:#d1d8d9; margin-bottom:9px; padding:0; }
.pw-segments { display:flex; gap:9px; }
.pw-segments label { flex:1; position:relative; min-width:0; }
.pw-segments input, .pw-profession input { position:absolute; left:12px; top:12px; opacity:0; }
.pw-segments span { text-align:center; padding:12px 8px; border:1px solid var(--line); color:var(--muted); background:#0a1622; }
.pw-segments input:checked + span { border-color:var(--gold); color:var(--gold-light); background:#c6ac7b12; }
.pw-segments input:focus-visible + span, .pw-profession input:focus-visible + span { outline:2px solid var(--gold-light); outline-offset:3px; }
.pw-segments + .pw-help { margin-top:10px !important; }
.pw-palette > div { display:flex; flex-wrap:wrap; gap:8px; }
.pw-swatch { position:relative; width:38px; height:38px; min-width:38px; }
.pw-swatch input { position:absolute; opacity:0; }
.pw-swatch span { width:100%; height:100%; display:block; background:var(--swatch); border:3px solid #0a1622; box-shadow:0 0 0 1px #52616a; }
.pw-swatch input:checked + span { box-shadow:0 0 0 2px var(--gold-light); }
.pw-swatch input:checked + span::after { content:'✓'; display:grid; place-items:center; height:100%; color:#fff; text-shadow:0 1px 3px #000; }
.pw-swatch input:focus-visible + span { outline:2px solid var(--gold-light); outline-offset:4px; }
.pw-preview { position:sticky; top:26px; align-self:start; display:flex; flex-direction:column; align-items:center; padding:21px 10px; border:1px solid var(--line); background:radial-gradient(ellipse at 50% 40%,#27425388,transparent 70%),#09131d55; text-align:center; }
.pw-preview .pw-eyebrow { font-size:9px; letter-spacing:.12em; }
.pw-preview .pw-eyebrow::before { display:none; }
#pw-preview-slot { width:100%; height:264px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pw-preview strong { font:22px/1.3 var(--serif); overflow-wrap:anywhere; max-width:100%; }
.pw-preview > span { margin-top:5px; color:var(--gold-light); font-size:11px; }
.pw-preview small { margin-top:16px; color:#8195a2; font-size:10px; }
#viewport.pw-avatar-viewport { position:relative; display:flex; flex:0 0 auto; width:192px; height:264px; overflow:visible; pointer-events:none; }
.pre-world #viewport:not(.pw-avatar-viewport) { position:fixed; width:1px; height:1px; visibility:hidden; pointer-events:none; }
.pre-world #canvas { background:transparent; width:100%; height:100%; max-height:100%; max-width:100%; object-fit:contain; }
.pre-world #touch-controls, .pre-world #touch-editor, .pre-world footer, .pre-world #loading { display:none !important; }
.pw-wizard-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; padding-top:22px; border-top:1px solid var(--line); }
.pw-wizard-actions .pw-primary { margin-left:auto; }
.pw-professions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.pw-profession { position:relative; }
.pw-profession > span { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:5px; height:100%; min-height:132px; border:1px solid var(--line); padding:14px 8px; background:radial-gradient(ellipse at 50% 25%,#c6ac7b0b,transparent 75%),#0a1622; }
.pw-profession-icon { display:flex; color:var(--gold); margin-bottom:4px; }
#preworld .pw-profession-icon svg { width:56px; height:56px; }
.pw-profession strong { font:20px/1.3 var(--serif); color:var(--text); }
.pw-profession small { color:var(--muted); font-size:9px; line-height:1.45; }
.pw-profession input:checked + span { border-color:var(--gold); background:#c6ac7b12; }
.pw-profession-detail { border-top:1px solid var(--line); padding-top:19px; }
.pw-profession-detail p { color:var(--muted); font-size:13px; }
.pw-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; }
.pw-stats > div { border:1px solid var(--line); padding:9px 5px; text-align:center; }
.pw-stats dt { font-size:11px; color:var(--muted); }
.pw-stats dd { font:25px var(--serif); color:var(--gold-light); margin:4px 0 0; }
.pw-skill-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; }
.pw-skill-heading h2 { font-size:23px !important; margin:0 !important; }
.pw-skill-heading > span { font-size:11px; color:var(--gold-light); white-space:nowrap; }
.pw-skills { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.pw-skills label { flex-direction:row; align-items:center; gap:9px; border:1px solid var(--line); padding:9px; font-size:12px; min-height:44px; }
.pw-skills label:has(input:checked) { background:#c6ac7b12; border-color:#7d7056; }
.pw-skills label:has(input:disabled) { color:#80919e; }
.pw-text-button { align-self:start; min-height:44px; border:0; background:none; color:var(--gold-light); padding:0; font-size:12px !important; }
.pw-review { text-align:center; padding:5px 0; }
.pw-review .pw-crest { margin-bottom:12px; }
.pw-review h3 { font-size:30px !important; margin-bottom:5px !important; }
.pw-review p { color:var(--gold-light); font-size:13px; }
.pw-small-heading { font-size:21px !important; margin-bottom:0 !important; }
.pw-review-skills { margin:0; padding:0; list-style:none; }
.pw-review-skills li { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:8px 0; font-size:13px; color:var(--muted); }
.pw-review-skills li span { color:var(--gold-light); }
.pw-permanent { display:flex; align-items:flex-start; gap:10px; color:#e0c796; font-size:12px; padding:13px; background:#c6ac7b0a; border:1px solid var(--line); }
.pw-tutorial { padding:17px; border:1px solid var(--line); background:#09131d77; }
.pw-tutorial .pw-check { align-items:flex-start; padding:4px 0; }
.pw-tutorial input { margin-top:2px !important; }
.pw-tutorial strong { font-weight:500; font-size:15px; color:var(--gold-light); }
#preworld .pw-start { display:flex; gap:10px; align-items:flex-start; margin:15px 0 0; padding-top:13px; border-top:1px solid var(--line); color:var(--gold-light); font-size:13px; }
.pw-delete-dialog { max-width:440px; width:calc(100% - 32px); padding:30px; background:var(--panel); border:1px solid var(--gold); color:var(--text); font:16px/1.65 var(--sans); }
.pw-delete-dialog::backdrop { background:#04090dda; }
.pw-delete-dialog p { color:var(--muted); }
.pw-dialog-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }
.pw-delete { background:#603032; color:#f3d8c5; border-color:#ba9180; }
@media(min-width:1500px) { .pw-shell { max-width:1560px; } }
@media(max-width:1100px) { .pw-wide .pw-shell { grid-template-columns:1fr; max-width:1000px; } .pw-wide .pw-art { display:none; } }
@media(max-width:760px) {
    .pw-header { min-height:74px; padding:13px 20px; gap:16px; }
    .pw-brand > span { font-size:28px; }
    .pw-header-actions { gap:14px; }
    #pw-website { font-size:11px; }
    .pw-shell, .pw-wide .pw-shell { display:block; min-height:calc(100dvh - 76px); padding:30px 20px 40px; max-width:580px; }
    .pw-art { min-height:160px; margin:0 0 26px; }
    .pw-art::before { inset:-30px -20px -20px; background-position:65% 32%; opacity:.58; }
    .pw-art::after { inset:-30px -20px -20px; background:linear-gradient(90deg,#0b131daa,transparent),linear-gradient(0deg,var(--night),transparent 75%); }
    .pw-art-copy { padding:55px 0 0; max-width:220px; }
    #pw-welcome { font-size:30px !important; }
    #pw-introduction { display:none; }
    .pw-panel, .pw-wide .pw-panel { padding:27px 23px; }
    .pw-wide .pw-creation-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
    .pw-preview { grid-row:1; position:static; padding:15px; background:radial-gradient(ellipse at 50% 40%,#27425388,transparent 70%),#0d1b28; }
    .pw-preview .pw-eyebrow { display:none; }
    .pw-appearance .pw-preview { position:sticky; top:8px; z-index:1; }
    #preworld.pw-appearance { scroll-padding-top:320px; scroll-padding-bottom:90px; }
    #pw-preview-slot { height:220px; }
    #viewport.pw-avatar-viewport { width:160px; height:220px; }
    .pw-preview small { margin-top:8px; }
    .pw-steps { gap:12px; }
    .pw-steps li { flex-direction:column; align-items:flex-start; gap:3px; font-size:11px; }
    .pw-fields { grid-template-columns:1fr; }
    .pw-wizard-actions { position:sticky; bottom:0; background:#10202e; margin-inline:-10px; padding:16px 10px 10px; z-index:2; }
    .pw-wizard-actions .pw-button { padding:12px 14px; }
    .pw-swatch { width:40px; height:40px; }
}
@media(max-width:500px) { #pw-website { display:none; } #pw-music span { display:none; } .pw-header-actions { gap:8px; } }
@media(max-width:380px) { .pw-shell, .pw-wide .pw-shell { padding:20px 12px 30px; } .pw-art::before, .pw-art::after { left:-12px; right:-12px; } .pw-panel, .pw-wide .pw-panel { padding:24px 18px; } .pw-header { padding:10px 14px; } #pw-website { display:none; } .pw-professions { grid-template-columns:minmax(0,1fr); } .pw-profession strong { font-size:19px; } .pw-segments { gap:6px; } }
@media(max-width:380px) { .pw-header { gap:6px; } .pw-brand > span { font-size:24px; } .pw-header-actions { gap:6px; } #pw-language { font-size:12px; padding:4px; } }
@media(max-height:550px) and (orientation:landscape) { .pw-art { display:none; } .pw-shell { grid-template-columns:minmax(0,1fr); max-width:700px; padding-top:20px; } }
@media(max-height:550px) { .pw-preview, .pw-appearance .pw-preview { position:static; } #preworld.pw-appearance { scroll-padding-top:0; } }
@media(prefers-reduced-motion:reduce) { .pw-spinner { animation:none; } #preworld *, #preworld *::before, #preworld *::after { transition:none !important; } }