/* Compact starter wardrobe. Preview and primary action stay in place while choices scroll. */
#campaign .creator-shade{justify-content:center;padding:24px;background:#17362bc9}
#campaign .creator-shade .creator-modal{width:760px;height:min(620px,100%);max-width:100%;max-height:100%;padding:0;gap:0;overflow:hidden;border:1px solid #e7dfc7;border-radius:18px;box-shadow:0 24px 90px #0b211e70}
#campaign .creator-heading{display:grid;grid-template-columns:1fr 44px;gap:10px 16px;flex:none;padding:18px 24px 16px;border-bottom:1px solid #344e3420}
#campaign .creator-heading h2{font:30px/44px Georgia,serif;letter-spacing:-.7px}
#campaign .creator-heading>button{width:44px;height:44px;padding:0;font-size:26px;background:#e6e6d7;color:#39533f;border:0;border-radius:50%}
#campaign .creator-name{grid-column:1/-1;display:flex;align-items:center;gap:16px;font:12px Arial;color:#61735f}
#campaign .creator-name input{flex:1;min-width:0;width:auto;margin:0;height:42px;padding:8px 12px;border-radius:7px;font:16px Arial;background:#e9e8db}
#campaign .creator-main{display:grid;grid-template-columns:.92fr 1fr;flex:1;min-height:0}
#campaign .creator-preview{position:relative;min-width:0;min-height:0;background:radial-gradient(ellipse at 50% 50%,#ecdfbd 0%,#e0dac1 65%,#d3d6bd 100%);border-right:1px solid #4259391c}
#campaign .creator-preview #wardrobe-preview{height:100%;min-height:0;margin:0;background:none;border:0;border-radius:0}
#campaign .creator-preview canvas{position:static!important;display:block;width:100%!important;height:100%!important;touch-action:manipulation}
#campaign .creator-preview .preview-turn{position:absolute;bottom:12px;right:12px;width:auto;min-height:44px;padding:6px 14px;background:#f4eedfcc;color:#39533f;border:1px solid #73846c40;border-radius:20px;font:12px Arial}
#campaign .creator-options{display:flex;flex-direction:column;min-height:0;min-width:0}
#campaign .creator-tabs{display:flex;gap:4px;padding:12px 16px 10px;border-bottom:1px solid #344e3420;flex:none}
#campaign .creator-tabs button{flex:1;width:auto;min-width:0;min-height:44px;padding:8px 6px;font-size:13px;border:0;border-radius:7px;background:transparent;color:#64745e}
#campaign .creator-tabs button.selected{background:#2d5142;color:#fff3d9}
#campaign .creator-scroll{overflow:auto;overscroll-behavior:contain;touch-action:pan-y;min-height:0;padding:14px 18px 20px;display:flex;flex-direction:column;gap:14px}
#campaign .creator-field{padding:0;margin:0;border:0;min-width:0;flex:none}
#campaign .creator-field legend{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0 0 6px;font:12px Arial;color:#304c3c}
#campaign .creator-field legend span{color:#7c8069;font-size:11px}
#campaign .starter-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:3px;min-width:0}
#campaign .starter-colors button{display:flex;align-items:center;justify-content:center;width:100%;min-width:44px;height:44px;min-height:44px;padding:0;background:none;border:1px solid transparent;border-radius:8px}
#campaign .starter-colors button i{display:block;width:27px;height:27px;border-radius:50%;box-shadow:inset 0 0 0 1px #203e2e24}
#campaign .starter-colors button.chosen{border-color:#536e53;background:#dce3cd}
#campaign .starter-colors button.chosen i{outline:2px solid #f8f2df;outline-offset:2px}
#campaign .color-strip{display:flex;overflow-x:auto;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:4px}
#campaign .color-strip button{flex:0 0 44px}
#campaign .starter-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#campaign .starter-items button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:8px;background:#e9e8db;color:#53634f;border:1px solid transparent;border-radius:8px;font:12px Arial}
#campaign .starter-items button svg{width:37px;height:32px;flex:none}
#campaign .item-photo{display:flex;width:72px;height:68px;flex:none;align-items:center;justify-content:center}
#campaign .item-photo img{width:72px;height:68px;object-fit:contain;filter:drop-shadow(0 3px 3px #23402e20)}
#campaign .item-photo.paired{width:72px;position:relative}
#campaign .item-photo.paired img:first-child{position:absolute;width:58px;left:-3px;top:-8px}
#campaign .item-photo.paired img:last-child{position:absolute;width:40px;right:-2px;bottom:-9px}
#campaign .starter-items button{flex-direction:column;gap:1px;min-height:92px;padding:4px}
#campaign .shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 16px}
#campaign .shop-card{overflow:hidden;border:1px solid #83917a40;border-radius:12px;background:#f4eedf;min-width:0}
#campaign .shop-card.equipped{border-color:#49694f;box-shadow:0 0 0 1px #49694f}
#campaign .shop-photo{position:relative;aspect-ratio:1.15;background:radial-gradient(ellipse at 50% 40%,#ece4d1,#d9dccb)}
#campaign .shop-photo>img{width:100%;height:100%;object-fit:contain;padding:5px;display:block}
#campaign .wearing-badge{position:absolute;left:7px;bottom:7px;background:#315442ed;color:#f7f0d9;border-radius:20px;padding:4px 8px;font:10px Arial}
#campaign .shop-item-info{padding:11px;display:flex;flex-direction:column;gap:9px}
#campaign .shop-item-info h3{margin:0;font:600 13px/1.3 Arial;color:#344d3c;min-height:34px}
#campaign .shop-price{display:flex;align-items:center;justify-content:space-between;font:12px Arial;color:#5f705c;gap:6px}
#campaign .item-colors{display:flex;gap:3px}
#campaign .item-colors i{width:11px;height:11px;border:1px solid #273b3428;border-radius:50%}
#campaign .shop-item-info button{width:100%;min-height:44px;margin:0;padding:9px 5px;border-radius:7px;font-size:12px}
#campaign .shop-card.equipped button{background:#dce6d5;color:#3d6147;opacity:1}
#campaign .hair-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#campaign .hair-cards button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 3px;font-size:11px;min-height:98px;border-radius:8px}
#campaign .hair-cards img{width:72px;height:65px;object-fit:contain}
#campaign .hair-symbol{display:grid;place-items:center;height:65px;font-size:45px;line-height:1}
#campaign .wardrobe-content{min-width:0}
#campaign .player-outfit{position:relative;margin:12px 0}
#campaign .player-outfit #wardrobe-preview{margin:0;height:180px;border-radius:12px;background:radial-gradient(ellipse,#e9dfc5,#cdd6c0)}
#campaign .player-outfit #wardrobe-preview canvas{display:block;height:100%;width:100%}
#campaign .player-outfit .preview-turn{position:absolute;right:8px;bottom:8px;min-height:44px;padding:7px 12px;border-radius:20px;background:#f4eedfcc;color:#39533f;font-size:12px}
@media(min-width:800px){
 #campaign .wardrobe-panel{width:min(700px,calc(100vw - 52px))}
 #campaign .wardrobe-panel .panel-scroll{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:start;gap:18px}
 #campaign .wardrobe-panel .player-outfit{position:sticky;top:12px}
 #campaign .wardrobe-panel #wardrobe-preview{height:330px}
}
#campaign .starter-items button.selected{background:#dce3cd;border-color:#536e53;color:#294a39}
#campaign .creator-select{display:flex;flex-direction:column;gap:7px;font:12px Arial;color:#304c3c;flex:none}
#campaign .creator-select select{width:100%;height:44px;padding:8px 12px;border:1px solid #75846a50;border-radius:7px;background:#e9e8db;color:#304c3c;font:14px Arial;touch-action:manipulation}
#campaign .creator-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:14px 24px;border-top:1px solid #344e3420;background:#f4eedf}
#campaign .creator-footer>span{font:11px Arial;color:#718066}
#campaign .creator-footer>button{width:180px;min-height:46px;font-size:15px;border-radius:8px}
#campaign .starter-wardrobe{margin-bottom:20px;padding:12px;border:1px solid #80927544;border-radius:10px}
#campaign .starter-wardrobe summary{font-size:14px;cursor:pointer;min-height:32px}
#campaign .starter-wardrobe .creator-field{margin-top:14px}
#campaign .movement-wardrobe{margin-bottom:20px;padding:12px;border:1px solid #80927544;border-radius:10px}
#campaign .movement-wardrobe summary{font-size:14px;cursor:pointer;min-height:32px}
#campaign .movement-wardrobe .creator-field{margin-top:14px}
#campaign .starter-colors button:focus-visible,#campaign .starter-items button:focus-visible,#campaign .creator-tabs button:focus-visible{outline:3px solid #b17a33;outline-offset:1px}
@media(max-width:600px){
 #campaign .creator-shade{padding:calc(var(--safe-top,0px) + 12px) 12px calc(var(--safe-bottom,0px) + 12px)}
 #campaign .creator-shade .creator-modal{height:min(770px,100%);max-width:420px;border-radius:14px}
 #campaign .creator-heading{padding:10px 16px 12px;gap:6px 12px}
 #campaign .creator-heading h2{font-size:25px}
 #campaign .creator-name{gap:12px}
 #campaign .creator-main{grid-template-columns:1fr;grid-template-rows:clamp(120px,21dvh,180px) minmax(0,1fr)}
 #campaign .creator-preview{border-right:0;border-bottom:1px solid #4259391c}
 #campaign .creator-preview .preview-turn{left:auto;right:10px;bottom:10px;transform:none}
 #campaign .creator-tabs{padding:8px 14px 7px}
 #campaign .creator-scroll{padding:12px 16px 16px;gap:12px}
 #campaign .creator-footer{padding:12px 16px;gap:12px}
 #campaign .creator-footer>button{width:150px}
}
@media(max-height:600px) and (orientation:portrait){
 #campaign .creator-main{grid-template-rows:104px minmax(0,1fr)}
 #campaign .creator-heading{grid-template-columns:1fr 44px;padding:6px 12px 8px;gap:0 8px}
 #campaign .creator-heading h2{font-size:23px}
 #campaign .creator-name input{height:36px}
 #campaign .creator-tabs{padding:4px 10px}
 #campaign .creator-footer{padding:8px 12px}
}
@media(max-height:500px) and (orientation:landscape){
 #campaign .creator-shade{padding:10px}
 #campaign .creator-heading{grid-template-columns:auto 1fr 44px;align-items:center;padding:8px 16px;gap:16px}
 #campaign .creator-name{grid-column:2;grid-row:1}
 #campaign .creator-heading>button{grid-column:3}
 #campaign .creator-heading h2{font-size:23px}
 #campaign .creator-main{grid-template-columns:.8fr 1.2fr;grid-template-rows:minmax(0,1fr)}
 #campaign .creator-tabs{padding:4px 12px}
 #campaign .creator-footer{padding:8px 16px}
}

/* ---- the visual creator: the player is the page, the choices are the things ---- */
#campaign .creator-shade .creator-modal{width:860px}
#campaign .creator-main{grid-template-columns:1.06fr 1fr}
#campaign .creator-preview{cursor:grab;background:radial-gradient(ellipse at 50% 38%,#f2e6c4 0%,#e2dcc0 58%,#cfd5bb 100%)}
#campaign .creator-preview:active{cursor:grabbing}
#campaign .creator-preview canvas{touch-action:none}
#campaign .preview-hint{position:absolute;left:14px;bottom:18px;font:11px Arial;letter-spacing:.09em;text-transform:uppercase;color:#5d6d55;opacity:.7;pointer-events:none}
#campaign .creator-preview .preview-turn{width:44px;padding:0;font-size:18px;line-height:1}
#campaign .creator-scroll{padding:16px 18px 24px;gap:0}
#campaign .creator-part{display:flex;flex-direction:column;gap:9px;padding:14px 0;border-bottom:1px solid #3d5a3f1c}
#campaign .creator-part:first-child{padding-top:0}
#campaign .creator-part:last-child{border-bottom:0}
#campaign .creator-part>header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#campaign .creator-part>header h3{margin:0;font:600 12px/1.2 Arial;letter-spacing:.11em;text-transform:uppercase;color:#31503e}
#campaign .creator-part>header span{font:12px Arial;color:#7d8a70;text-align:right}
#campaign .creator-part .starter-items+.starter-colors{margin-top:2px}
#campaign .face-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#campaign .face-cards button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:90px;padding:6px 3px;font-size:11px;border:1px solid transparent;border-radius:8px;background:#e9e8db;color:#53634f}
#campaign .face-cards button.selected{background:#dce3cd;border-color:#536e53;color:#294a39}
#campaign .face-icon{display:grid;place-items:center;width:56px;height:56px}
#campaign .face-icon svg{width:52px;height:52px;color:#4a5745}
#campaign .hair-cards button,#campaign .face-cards button{transition:background .14s ease,border-color .14s ease}
@media(max-width:600px){
 /* One column on a phone: the player on top, the choices under him. This has to restate
    grid-template-columns because the desktop rule above it is not inside a media query. */
 #campaign .creator-main{grid-template-columns:1fr;grid-template-rows:clamp(215px,37dvh,330px) minmax(0,1fr)}
 #campaign .creator-scroll{padding:12px 16px 20px}
 #campaign .preview-hint{left:12px;bottom:14px}
}
@media(max-height:600px) and (orientation:portrait){
 #campaign .creator-main{grid-template-columns:1fr;grid-template-rows:clamp(175px,31dvh,240px) minmax(0,1fr)}
}
@media(max-height:500px) and (orientation:landscape){
 #campaign .creator-main{grid-template-columns:.95fr 1.05fr;grid-template-rows:minmax(0,1fr)}
}

#campaign .player-outfit #wardrobe-preview canvas,#campaign .barber-preview canvas{touch-action:none}
#campaign .player-outfit,#campaign .barber-preview{cursor:grab}