.skins-panel { color:#302719; background:#eadbbb; padding:14px; min-height:0; height:100%; display:flex; flex-direction:column; gap:10px; box-sizing:border-box; overflow:auto; }
.skins-panel [hidden] { display:none!important; }
.skins-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.skins-heading h2,.skins-heading p { margin:0; }
.skins-heading p,.skins-notice,.skins-footer { font-size:12px; }
.skins-wallet { display:grid; gap:4px; text-align:right; font-size:13px; }
.skins-wallet strong { color:#634600; font-size:20px; }
.skins-panel button { background:#f4e8ca; color:#302719; border:1px solid #8b724e; border-radius:5px; padding:8px 12px; cursor:pointer; font:inherit; }
.skins-panel button:hover { background:#fff0cb; }
.skins-panel button:focus-visible { outline:3px solid #82510a; outline-offset:2px; }
.skins-panel button:disabled { opacity:.65; cursor:default; }
.skins-filters { display:flex; flex-wrap:wrap; gap:5px; }
.skins-panel button[aria-pressed="true"] { background:#d0ac61; border:2px solid #593e18; }
.skins-notice { margin:0; line-height:1.5; }
.skins-notice strong { font-weight:normal; color:#695033; }
.skins-body { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr); gap:14px; min-height:0; flex:1; overflow:auto; padding:3px; }
.skins-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; align-content:start; overflow:auto; min-height:0; padding:3px; }
.skin-card { display:flex; flex-direction:column; align-items:center; gap:7px; min-height:140px; text-align:center; }
.skin-card strong { font-size:14px; }
.skin-card>span:last-child { font-size:12px; }
.skin-art { display:grid; place-items:center; width:64px; height:64px; font-size:48px; color:#685379; border:1px dashed #877297; border-radius:10px; background:#dcd0c2; }
.skin-detail { overflow:auto; padding:14px; background:#f3e7cc; border:1px solid #aa9270; border-radius:6px; }
.skin-detail>.skin-art { width:96px; height:96px; font-size:66px; margin:0 auto; }
.skin-detail h3 { margin:10px 0; }
.skin-detail p,.skin-detail li { font-size:14px; line-height:1.45; }
.skin-detail ul { padding-left:20px; }
.skin-primary,.skin-confirm button:first-of-type { width:100%; background:#665634!important; color:#fff5dc!important; }
.skin-confirm { border-top:1px solid #aa9270; padding-top:8px; }
.skin-confirm button { margin:4px 0; }
.skins-feedback { border:1px solid #916746; padding:8px; margin:0; background:#fff0ce; }
.skins-footer { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex-shrink:0; }
.skins-footer span { margin-left:auto; }
.skin-flag-preview { display:block; width:65px; height:75px; position:relative; overflow:hidden; background:var(--flag-primary,#742b27); border:2px solid #735d37; clip-path:polygon(0 0,100% 0,100% 85%,50% 100%,0 85%); }
.skin-flag-preview .flag-symbol { display:block; position:absolute; inset:12px; }
.skin-flag-preview svg { width:100%; height:100%; }
#modal.shop-modal .skin-flag-preview .flag-symbol { color:var(--flag-symbol-color)!important; }
#skinsView { min-height:0; height:100%; overflow:hidden; }
#profileScreen .profile-tabs { grid-template-columns:repeat(5,minmax(52px,1fr)); }
#modal.shop-modal .rs-shop-shell.skin-shop-shell { grid-template-rows:52px 48px minmax(0,1fr)!important; }
#modal.shop-modal .skin-shop-shell>.skins-panel { height:100%; max-height:none; min-height:0; }
.shop-modal .skins-panel { max-height:calc(100dvh - 180px); }
.city-node[data-city-skin="halloween_city"] .city-castle::after { content:"Skin preview"; position:absolute; left:50%; bottom:0; transform:translateX(-50%); white-space:nowrap; font-size:12px; background:#e9dfef; color:#4d3a5d; padding:2px 4px; border:1px dashed #695278; pointer-events:none; }
.city-node[data-flag-border="halloween_border"] .kingdom-flag { outline:3px dashed #7c5987; outline-offset:1px; }
.army-token[data-troop-skin="halloween_troops"] .army-token-icon { border:2px dashed #7c5987; border-radius:5px; }
.harvest-bonus-node.harvest-bonus-crowns { --pickup-glow-bright:rgba(216,181,238,.96); --pickup-glow-core:rgba(150,94,181,.78); --pickup-glow-wide:rgba(99,57,127,.5); }
.harvest-bonus-node.harvest-bonus-crowns .harvest-bonus-icon { filter:drop-shadow(0 0 9px rgba(193,145,218,.86)) drop-shadow(0 0 19px rgba(108,61,137,.64)) drop-shadow(0 4px 4px rgba(25,16,9,.52)); }
@media (max-width:900px) { .skins-panel { padding:8px; gap:6px; } .skins-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .skin-card { min-height:105px; padding:7px!important; } .skins-heading h2 { font-size:19px; } .skins-wallet strong { font-size:17px; } .skins-body { grid-template-columns:minmax(0,1fr) minmax(190px,.8fr); gap:8px; } .skin-art { width:44px; height:44px; font-size:32px; } .skin-detail>.skin-art { width:52px; height:52px; font-size:38px; } }
@media (max-height:500px) { .skins-heading p { display:none; } .skins-heading h2 { font-size:17px; } .skins-notice { font-size:11px; } .skins-filters button { padding:5px 8px; font-size:12px; } .skins-body { min-height:65px; } .skins-footer span { display:none; } #modal.shop-modal .rs-shop-shell.skin-shop-shell { grid-template-rows:34px 44px minmax(0,1fr)!important; } #modal.shop-modal .skin-shop-shell .rs-shop-header { min-height:0!important;padding:4px 12px!important; } .skins-wallet { display:flex; flex-wrap:wrap; align-items:center;justify-content:flex-end;gap:4px 10px; } .skins-wallet strong { font-size:15px; } .skins-wallet span { font-size:11px; } .skins-wallet button { padding:5px 8px; } }
/* My Skins shares the Profile ledger frame. Keep these rules out of the Shop,
   map appearances and Crown pickup marker. Existing handlers own all actions. */
#profileScreen.skins-active{--paper:#f2e8cd;--ink:#352f23;--muted:#716247;--line:#b8a684;--moss:#4b583c;--burgundy:#703e3d;width:min(1200px,calc(100% - 24px))!important;height:min(700px,calc(100dvh - 24px))!important;grid-template-rows:83px minmax(0,1fr)!important;padding:5px!important;border:1px solid #766346!important;border-radius:2px!important;background:var(--paper)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 3px #d6c49e,inset 0 0 0 4px #a99876,0 0 0 100vmax #20261f99,0 10px 45px #171b1b88!important;backdrop-filter:none!important;font:14px/1.4 "Segoe UI",Arial,sans-serif!important;overflow:hidden!important}
#profileScreen.skins-active.open{display:grid!important}
#profileScreen.skins-active::before,#profileScreen.skins-active::after{display:none!important}
#profileScreen.skins-active *{box-sizing:border-box}
#profileScreen.skins-active :is(h2,h3,p,strong,button),#profileScreen.skins-active .profile-screen-heading>span{color:inherit!important;font-family:inherit!important;font-variant:normal!important;text-shadow:none!important;font-weight:400!important;text-transform:none!important;letter-spacing:normal!important}
#profileScreen.skins-active button{font:inherit!important;min-width:0;min-height:40px;border-radius:0!important;box-shadow:inset 0 0 0 2px #f8ecd377!important;background:#e4d3ae!important;border:1px solid #ad956b!important;transition:none!important}
#profileScreen.skins-active button:hover:not(:disabled){filter:brightness(1.05)}
#profileScreen.skins-active button:focus-visible{outline:2px solid #426f76!important;outline-offset:2px!important}
#profileScreen.skins-active .profile-screen-header{display:flex!important;align-items:center;gap:20px;padding:12px 20px!important;min-height:0!important;border:0!important;border-bottom:1px solid var(--line)!important;background:#e9dcb483!important;color:var(--ink)!important;box-shadow:none!important}
#profileScreen.skins-active .profile-screen-heading{display:grid!important;flex:none;gap:4px;min-width:0;text-align:left}
#profileScreen.skins-active .profile-screen-heading>span{font-size:9px;letter-spacing:1.9px!important;color:var(--muted)!important}
#profileScreen.skins-active .profile-screen-heading h2{margin:0!important;font:30px/1 Georgia,serif!important;white-space:nowrap}
#profileScreen.skins-active .profile-tabs{display:flex!important;flex:none;width:auto!important;gap:6px;margin-left:auto;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
#profileScreen.skins-active .profile-tabs button{height:44px;min-width:78px;padding:0 14px!important;font-size:12px!important}
#profileScreen.skins-active .profile-tabs button.active,#profileScreen.skins-active .skins-filters button[aria-pressed=true]{background:var(--burgundy)!important;color:#fff1d3!important;border-color:#643938!important;box-shadow:inset 0 0 0 2px #ab8d6966!important}
#profileScreen.skins-active #profileCloseBtn{position:static;display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:0;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
#profileScreen.skins-active #profileCloseBtn svg{width:22px;height:22px}
#profileScreen.skins-active #skinsView{height:100%;min-width:0;border:1px solid var(--line);border-top:0}
#profileScreen.skins-active .skins-panel{padding:16px 20px;gap:10px;font:inherit;background:radial-gradient(ellipse at 48% 40%,#fff9e288,transparent 75%);color:var(--ink);overflow:hidden}
#profileScreen.skins-active .skins-panel:has(>.skins-feedback,>p[role=status]){overflow-y:auto}
#profileScreen.skins-active .skins-panel:has(>.skins-feedback,>p[role=status]) .skins-body{flex:1 0 110px}
#profileScreen.skins-active .skins-feedback{flex:none}
#profileScreen.skins-active .skins-heading{flex:none;min-width:0;border-bottom:1px solid var(--line);padding-bottom:10px}
#profileScreen.skins-active .skins-heading h2{font:26px/1.15 Georgia,serif!important;margin:3px 0 0!important}
#profileScreen.skins-active .skins-heading p{font-size:10px;letter-spacing:1.5px!important;color:var(--muted)!important}
#profileScreen.skins-active .skins-wallet{grid-template-columns:auto auto;align-items:center;gap:3px 14px}
#profileScreen.skins-active .skins-wallet strong{font:22px/1.15 Georgia,serif!important;font-variant-numeric:tabular-nums!important}
#profileScreen.skins-active .skins-wallet strong::before{content:"";display:inline-block;width:24px;height:24px;margin-right:7px;vertical-align:middle;background:url("assets/optimized/crown-coin-96x96-34224e7d7fb4.webp") center/contain no-repeat}
#profileScreen.skins-active .skins-wallet>span{grid-column:1;grid-row:2;color:var(--muted);font-size:11px}
#profileScreen.skins-active .skins-wallet button{grid-column:2;grid-row:1/3}
#profileScreen.skins-active .skins-notice{flex:none;margin:0!important;color:var(--muted)!important;font-size:12px;line-height:1.35}
#profileScreen.skins-active .skins-filters{flex:none;gap:6px}
#profileScreen.skins-active .skins-filters button{padding:7px 15px}
#profileScreen.skins-active .skins-body{min-width:0;min-height:0;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);gap:16px;padding:3px;overflow:hidden}
#profileScreen.skins-active .skins-grid{gap:10px;scrollbar-width:thin}
#profileScreen.skins-active .skin-card{padding:14px!important;min-height:158px;gap:10px;border-color:#c0ab83!important;background:linear-gradient(112deg,#f7ecd3,#eaddbd)!important;box-shadow:inset 0 0 0 3px #fff7df66!important}
#profileScreen.skins-active .skin-card[aria-pressed=true]{border-color:var(--burgundy)!important;box-shadow:inset 0 0 0 2px #703e3d!important}
#profileScreen.skins-active .skin-card strong{font:17px/1.2 Georgia,serif!important}
#profileScreen.skins-active .skin-card>span:last-child{font-size:11px;color:var(--moss)}
#profileScreen.skins-active .skin-art{flex:none;border-radius:0;border:1px dashed #a89773;background:#e4d8bc;color:#75654c}
#profileScreen.skins-active .skin-flag-preview{flex:none}
#profileScreen.skins-active .skin-flag-preview .flag-symbol{color:var(--flag-symbol-color)!important}
#profileScreen.skins-active .skin-detail{border:1px solid #c0ab83;border-radius:0;background:linear-gradient(112deg,#f7ecd3,#eaddbd);box-shadow:inset 0 0 0 3px #fff7df66;scrollbar-width:thin;padding:18px}
#profileScreen.skins-active .skin-detail h3{font:23px/1.2 Georgia,serif!important}
#profileScreen.skins-active .skin-primary{background:var(--moss)!important;color:#fff5dc!important;border-color:#3d4931!important;box-shadow:inset 0 0 0 2px #93a07944!important}
#profileScreen.skins-active .skins-footer{border-top:1px solid var(--line);padding-top:10px;color:var(--muted)}
@media(max-height:600px),(max-width:1000px){
 #profileScreen.skins-active{grid-template-rows:54px minmax(0,1fr)!important}
 #profileScreen.skins-active .profile-screen-header{padding:5px 10px!important;gap:8px}
 #profileScreen.skins-active .profile-screen-heading h2{font-size:21px!important}
 #profileScreen.skins-active .profile-screen-heading>span{font-size:7px}
 #profileScreen.skins-active .profile-tabs{gap:4px}
 #profileScreen.skins-active .profile-tabs button{min-width:59px;height:40px;padding:0 11px!important;font-size:11px!important}
 #profileScreen.skins-active .skins-panel{padding:8px 10px;gap:6px;font-size:12px!important}
 #profileScreen.skins-active .skins-heading{gap:8px;padding-bottom:6px}
 #profileScreen.skins-active .skins-heading h2{font-size:20px!important}
 #profileScreen.skins-active .skins-wallet strong{font-size:18px!important}
 #profileScreen.skins-active .skins-wallet strong::before{width:20px;height:20px}
 #profileScreen.skins-active .skins-wallet{display:grid;gap:2px 10px}
 #profileScreen.skins-active .skins-notice{font-size:10px}
 #profileScreen.skins-active .skins-filters button{padding:5px 10px}
 #profileScreen.skins-active button{min-height:34px}
 #profileScreen.skins-active .skins-body{gap:8px;grid-template-columns:minmax(0,1.4fr) minmax(180px,1fr)}
 #profileScreen.skins-active .skin-card{min-height:110px;padding:8px!important;gap:6px}
 #profileScreen.skins-active .skin-card strong{font-size:14px!important}
 #profileScreen.skins-active .skin-detail{padding:10px}
 #profileScreen.skins-active .skin-detail h3{font-size:18px!important;margin:8px 0!important}
 #profileScreen.skins-active .skin-detail p{font-size:12px}
 #profileScreen.skins-active .skins-footer{padding-top:6px}
}
@media(max-width:650px){
 #profileScreen.skins-active{width:calc(100% - 12px)!important;height:calc(100dvh - 12px)!important;padding:4px!important;grid-template-rows:45px minmax(0,1fr)!important}
 #profileScreen.skins-active .profile-screen-header{padding:1px 5px!important;gap:3px}
 #profileScreen.skins-active .profile-screen-heading>span{display:none}
 #profileScreen.skins-active .profile-screen-heading h2{font-size:17px!important}
 #profileScreen.skins-active .profile-tabs{gap:2px}
 #profileScreen.skins-active .profile-tabs button{min-width:0;height:38px;padding:0 8px!important;font-size:10px!important}
 #profileScreen.skins-active #profileCloseBtn{width:30px;height:38px}
 #profileScreen.skins-active .skins-panel{padding:6px;gap:4px}
 #profileScreen.skins-active .skins-heading h2{font-size:17px!important}
 #profileScreen.skins-active .skins-wallet strong{font-size:16px!important}
 #profileScreen.skins-active .skins-body{grid-template-columns:minmax(0,1fr) minmax(170px,.85fr)}
 #profileScreen.skins-active .skins-filters button{padding:5px 8px}
 #profileScreen.skins-active .skins-footer{padding-top:4px}
}
@media(max-height:360px){
 #profileScreen.skins-active .skins-heading>div:first-child{display:none}
 #profileScreen.skins-active .skins-heading{padding-bottom:4px}
 #profileScreen.skins-active .skins-wallet{display:flex;flex-wrap:wrap;width:100%;gap:4px 8px;align-items:center}
 #profileScreen.skins-active .skins-wallet strong{margin-right:auto}
 #profileScreen.skins-active .skins-wallet button{min-height:30px;padding:4px 8px}
 #profileScreen.skins-active .skins-grid{grid-template-columns:minmax(0,1fr);gap:6px}
 #profileScreen.skins-active .skin-card{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;min-height:58px;gap:3px 8px;text-align:left;align-content:center}
 #profileScreen.skins-active .skin-card>:first-child{grid-column:1;grid-row:1/3}
 #profileScreen.skins-active .skin-card>:is(strong,span:last-child){grid-column:2}
 #profileScreen.skins-active .skin-card .skin-art{width:32px;height:32px;font-size:26px}
 #profileScreen.skins-active .skin-card .skin-flag-preview{width:28px;height:32px}
 #profileScreen.skins-active .skin-card .skin-flag-preview .flag-symbol{inset:4px}
}