/* Island cosmetics: Decorate mode pins and panel, the Island Style panel and the market's cosmetic
   details (skins, decor, style). Decorate and Island Style open from the profile panel's Your island
   section (island.css), Inventory and the market; the island view has no tool buttons of their own. */
body.decorating .island-status-bubble,body.decorating .island-sale,body.decorating .plot-actions,body.decorating .draft-tryon {visibility:hidden}

/* Decorate mode: one pin per open spot (its size letter, or the picture of what stands there) */
.decorate-pins {position:fixed;inset:0;z-index:40;pointer-events:none}
.decorate-pin {position:absolute;left:0;top:0;pointer-events:auto;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;
  border:3px solid #fff;color:#22324a;font:700 16px/1 Rajdhani,sans-serif;cursor:pointer;box-shadow:0 3px 10px rgba(30,40,60,.35);background:#9fd3ff;
  animation:decorate-glow 1.6s ease-in-out infinite;overflow:visible}
.decorate-pin.size-S {background:#7ed492}.decorate-pin.size-M {background:#68b6ff}.decorate-pin.size-L {background:#ffb057}
.decorate-pin.size-rug {background:#c58cff}.decorate-pin.size-wall {background:#ffe066}
.decorate-pin-art {width:100%;height:100%;object-fit:contain;border-radius:50%;background:#fffaf0;pointer-events:none}
.decorate-pin.occupied {border-color:#fffaf0;box-shadow:0 0 0 3px #3b8d4b,0 3px 10px rgba(30,40,60,.35);animation:none}
.decorate-pin.occupied::after {content:'✓';position:absolute;right:-7px;top:-7px;width:17px;height:17px;border-radius:50%;background:#3b8d4b;color:#fff;font-size:11px;line-height:17px;text-align:center}
.decorate-pin.selected {outline:3px solid #ff7a2f;outline-offset:3px}
.decorate-pin.unfit,.decorate-pin:disabled {opacity:.25;animation:none;cursor:not-allowed}
.decorate-pin[hidden] {display:none}
.decorate-pin:focus-visible {outline:3px solid #3a97cf;outline-offset:3px}
@keyframes decorate-glow {50%{box-shadow:0 0 0 7px rgba(255,255,255,.4),0 3px 10px rgba(30,40,60,.35)}}
@media (prefers-reduced-motion:reduce) {.decorate-pin {animation:none}}

/* The banner: what Decorate does, what the letters mean, and Done */
.decorate-banner {position:fixed;left:50%;top:96px;transform:translateX(-50%);z-index:48;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;
  width:max-content;max-width:calc(100vw - 24px);padding:10px 18px;background:#fff7e0;border:3px solid #b98651;border-radius:12px;box-shadow:0 6px 18px rgba(64,48,28,.25);
  font:600 16px/1.25 Rajdhani,sans-serif;color:#3e2b22;box-sizing:border-box}
.decorate-banner-copy {display:flex;flex-direction:column;min-width:0}
.decorate-banner-copy strong {font:700 17px/1.2 Pixeloid,monospace;color:#3e211d}
.decorate-banner-copy span {font-size:16px;color:#6b4a33}
.decorate-legend {display:flex;flex-wrap:wrap;gap:4px 10px;font:600 14px/1 Rajdhani,sans-serif;color:#6b4a33}
.decorate-legend-key {display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.decorate-legend-pin {display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid #fff;font:700 12px/1 Rajdhani,sans-serif;font-style:normal;
  color:#22324a;box-shadow:0 1px 3px rgba(30,40,60,.3)}
.decorate-legend-pin.size-S {background:#7ed492}.decorate-legend-pin.size-M {background:#68b6ff}.decorate-legend-pin.size-L {background:#ffb057}
.decorate-legend-pin.size-rug {background:#c58cff}.decorate-legend-pin.size-wall {background:#ffe066}
.decorate-banner-actions {display:flex;align-items:center;gap:8px}
.decorate-banner[hidden],.decorate-panel[hidden],.island-style-panel[hidden] {display:none}
.decorate-link,.decorate-done {border:0;background:transparent;font:700 16px Rajdhani,sans-serif;color:#2b6b8f;cursor:pointer;text-decoration:underline;padding:2px 4px}
.decorate-done {min-height:40px;padding:4px 18px;border:7px solid transparent;border-image:url('../ui/frames/picker-button.svg') 12 fill stretch;
  color:#2d181c;text-decoration:none;font-size:18px}

/* With a spot open on a wide screen the banner moves into the room left of the panel, without its legend. */
@media (min-width:701px) {body.decorating-spot .decorate-banner {left:calc((100vw - min(470px,100vw - 32px) - 16px) / 2);max-width:calc(100vw - min(470px,100vw - 32px) - 48px)}
  body.decorating-spot .decorate-legend {display:none}}
/* A game notice (an item placed, a purchase refused: workshop-ui.mjs) sits in the game's own window layer, under the
   banner and the spot panel. While one shows (decorate-ui.mjs body.decorate-notice) the banner steps aside, and beside
   an open spot panel on a wide screen the notice moves into the room left of the panel, like the banner. */
body.decorating.decorate-notice .decorate-banner {visibility:hidden}
@media (min-width:701px) {body.decorating-spot .workshop-ui[data-mode] .game-message {left:calc((100vw - min(470px,100vw - 32px) - 16px) / 2);
  max-width:calc(100vw - min(470px,100vw - 32px) - 48px)}}

/* The spot panel (G51): the market's cream window, real pictures, one clear button per item */
.decorate-panel {--dk:clamp(.86px,min(.07vw,.112dvh),1.2px);position:fixed;right:16px;top:calc(112 * var(--dk));bottom:calc(104 * var(--dk));z-index:48;
  width:min(calc(470 * var(--dk)),calc(100vw - 32px));display:flex;flex-direction:column;box-sizing:border-box;
  border:calc(12 * var(--dk)) solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;
  color:#3e211d;font:600 calc(17 * var(--dk))/1.3 Rajdhani,sans-serif;box-shadow:0 12px 40px #090f2433}
.decorate-panel * {box-sizing:border-box}
.decorate-panel :is(h2,h3,p) {margin:0}
.decorate-panel button:focus-visible {outline:3px solid #3a97cf;outline-offset:2px}
.decorate-head {flex:none;display:flex;align-items:center;gap:calc(12 * var(--dk));padding:calc(8 * var(--dk)) calc(10 * var(--dk));
  background:linear-gradient(105deg,#ffd08b,#ffe6ae);border-bottom:calc(3 * var(--dk)) solid #d9a15f}
.decorate-spot {flex:none;display:grid;place-items:center;width:calc(46 * var(--dk));height:calc(46 * var(--dk));border-radius:50%;border:3px solid #fff;
  font:700 calc(21 * var(--dk))/1 Rajdhani,sans-serif;color:#22324a;box-shadow:0 2px 0 #b8742f}
.decorate-spot.size-S {background:#7ed492}.decorate-spot.size-M {background:#68b6ff}.decorate-spot.size-L {background:#ffb057}
.decorate-spot.size-rug {background:#c58cff}.decorate-spot.size-wall {background:#ffe066}
.decorate-title {flex:1;min-width:0}
.decorate-title h2 {font:700 calc(22 * var(--dk))/1.15 Pixeloid,monospace;color:#3e211d;overflow-wrap:anywhere}
.decorate-title p {margin-top:calc(3 * var(--dk));font:600 calc(17 * var(--dk))/1.25 Rajdhani,sans-serif;color:#6a3a16}
.decorate-close {flex:none;display:grid;place-items:center;width:calc(46 * var(--dk));height:calc(46 * var(--dk));min-width:40px;min-height:40px;padding:calc(11 * var(--dk));
  border:0;background:url('../ui/frames/picker-close.svg') center/100% 100% no-repeat;color:#3e211d;cursor:pointer}
.decorate-close svg {width:100%;height:100%;shape-rendering:crispEdges}
.decorate-body {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:calc(10 * var(--dk)) calc(12 * var(--dk)) calc(12 * var(--dk));
  scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
.decorate-section + .decorate-section {margin-top:calc(14 * var(--dk))}
.decorate-section-title {margin:0 0 calc(8 * var(--dk));padding:calc(5 * var(--dk)) calc(10 * var(--dk));font:700 calc(15 * var(--dk))/1.3 Pixeloid,monospace;color:#5a3418;
  background:linear-gradient(90deg,#ffdaa0,#ffedc3);clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%,0 5px)}
.decorate-current {display:flex;align-items:center;gap:calc(12 * var(--dk));padding:calc(8 * var(--dk));
  border:calc(6 * var(--dk)) solid transparent;border-image:url('../ui/frames/tile-blue.svg') 8 fill stretch}
.decorate-current-art {flex:none;width:calc(84 * var(--dk));height:calc(84 * var(--dk));object-fit:contain}
.decorate-current-copy {flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2 * var(--dk))}
.decorate-current-copy strong {font:700 calc(19 * var(--dk))/1.2 Rajdhani,sans-serif}
.decorate-current-copy span {font-size:calc(16 * var(--dk));color:#6b4a33}
.decorate-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(10 * var(--dk))}
.decorate-card {display:flex;flex-direction:column;gap:calc(4 * var(--dk));min-width:0;padding:calc(4 * var(--dk));
  border:calc(6 * var(--dk)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch}
.decorate-card-stage {position:relative;height:calc(128 * var(--dk));background:#f1e7c8;border-radius:4px;overflow:hidden}
.decorate-card-art {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:calc(8 * var(--dk))}
.decorate-fit {align-self:flex-start;display:inline-flex;align-items:center;gap:calc(4 * var(--dk));
  padding:calc(1 * var(--dk)) calc(6 * var(--dk));border:calc(4 * var(--dk)) solid transparent;border-image:url('../ui/frames/tag-owned.svg') 8 fill stretch;
  color:#304624;font:700 calc(14 * var(--dk))/1.2 Rajdhani,sans-serif;white-space:nowrap}
.decorate-fit svg {width:calc(14 * var(--dk));height:calc(14 * var(--dk));flex:none;shape-rendering:crispEdges}
.decorate-card-name {font:700 calc(18 * var(--dk))/1.15 Rajdhani,sans-serif;color:#2f1d18;min-height:2.3em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.decorate-card-tags {display:flex;flex-wrap:wrap;align-items:center;gap:calc(3 * var(--dk)) calc(6 * var(--dk))}
.decorate-card-meta {font:600 calc(15 * var(--dk))/1.2 Rajdhani,sans-serif;color:#7a5a3a}
.decorate-price {display:flex;align-items:center;flex-wrap:wrap;gap:0 calc(6 * var(--dk));font:700 calc(18 * var(--dk))/1.2 Rajdhani,sans-serif;color:#3e211d}
.decorate-price small {font:600 calc(15 * var(--dk))/1.2 Rajdhani,sans-serif;color:#7a5a3a}
.decorate-coin {width:calc(20 * var(--dk));height:calc(20 * var(--dk));image-rendering:pixelated}
.decorate-card-actions {display:flex;flex-direction:column;gap:calc(2 * var(--dk));margin-top:auto}
.decorate-action {min-height:calc(46 * var(--dk));width:100%;padding:calc(2 * var(--dk)) calc(8 * var(--dk));cursor:pointer;
  border:calc(7 * var(--dk)) solid transparent;border-image:url('../ui/frames/picker-button.svg') 12 fill stretch;background:none;
  font:700 calc(18 * var(--dk))/1.1 Rajdhani,sans-serif;color:#2d181c;margin-top:auto}
.decorate-action.place {border-image-source:url('../ui/frames/picker-selected-green.svg');color:#f6ffe8;text-shadow:0 1px 0 #274e2b}
.decorate-action.secondary {flex:none;width:auto;min-width:calc(96 * var(--dk));margin:0;border-image-source:url('../ui/frames/tile.svg');border-image-slice:8 fill;color:#5a3418}
.decorate-action:disabled {opacity:.55;cursor:not-allowed;filter:grayscale(.35)}
.decorate-action:not(:disabled):hover {filter:brightness(1.05)}
.decorate-details {align-self:center;border:0;background:none;padding:calc(2 * var(--dk)) calc(6 * var(--dk));cursor:pointer;
  font:600 calc(15 * var(--dk))/1.2 Rajdhani,sans-serif;color:#2b6b8f;text-decoration:underline}
.decorate-empty {font-size:calc(17 * var(--dk));color:#6b4a33;padding:calc(4 * var(--dk)) calc(2 * var(--dk))}
.decorate-unfit {margin-top:calc(8 * var(--dk))!important;font-size:calc(15 * var(--dk));color:#8a6443}
.decorate-note {margin-top:calc(14 * var(--dk))!important;font-size:calc(15 * var(--dk));color:#8a6443;text-align:center}

/* Island Style (owner, 8 Oct 2026): the market's cream pixel window on the left, category tabs at the top (the
   leaderboard's tab look), owned items as rows with their free action, items on sale as picture cards with Buy. */
.island-style-panel {--dk:clamp(.86px,min(.07vw,.112dvh),1.2px);position:fixed;left:16px;top:calc(112 * var(--dk));bottom:max(calc(104 * var(--dk)),124px);z-index:48;
  width:min(calc(470 * var(--dk)),calc(100vw - 32px));display:flex;flex-direction:column;box-sizing:border-box;
  border:calc(12 * var(--dk)) solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;
  color:#3e211d;font:600 calc(17 * var(--dk))/1.3 Rajdhani,sans-serif;box-shadow:0 12px 40px #090f2433}
.island-style-panel * {box-sizing:border-box}
.island-style-panel :is(h2,h3,p) {margin:0}
.island-style-panel:focus {outline:none}
.island-style-panel button:focus-visible,.island-style-panel :is(input,select):focus-visible {outline:3px solid #3a97cf;outline-offset:2px}
.island-style-head {flex:none;display:flex;align-items:center;gap:calc(12 * var(--dk));padding:calc(8 * var(--dk)) calc(10 * var(--dk));
  background:linear-gradient(105deg,#ffd08b,#ffe6ae);border-bottom:calc(3 * var(--dk)) solid #d9a15f}
.island-style-title {flex:1;min-width:0}
.island-style-title h2 {font:700 calc(22 * var(--dk))/1.15 Pixeloid,monospace;color:#3e211d}
.island-style-title p {margin-top:calc(3 * var(--dk));font:600 calc(16 * var(--dk))/1.25 Rajdhani,sans-serif;color:#6a3a16}
.island-style-close {flex:none;display:grid;place-items:center;width:calc(46 * var(--dk));height:calc(46 * var(--dk));min-width:40px;min-height:40px;padding:calc(11 * var(--dk));
  border:0;background:url('../ui/frames/picker-close.svg') center/100% 100% no-repeat;color:#3e211d;cursor:pointer}
.island-style-close svg {width:100%;height:100%;shape-rendering:crispEdges}
.island-style-tabs {flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(6 * var(--dk));padding:calc(10 * var(--dk)) calc(10 * var(--dk)) calc(6 * var(--dk));
  border-bottom:calc(2 * var(--dk)) solid #ecd3a4}
.island-style-tab {min-width:0;min-height:max(40px,calc(44 * var(--dk)));padding:calc(3 * var(--dk)) calc(4 * var(--dk)) calc(5 * var(--dk));border:7px solid transparent;
  border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;color:#6b5444;font:700 calc(14 * var(--dk))/1.15 Pixeloid,monospace;cursor:pointer;
  touch-action:manipulation;text-align:center}
.island-style-tab:hover {color:#493127}
.island-style-tab[aria-selected=true] {border-image-source:url('../ui/frames/tile-blue.svg');border-image-slice:9 fill;color:#263b4a}
.island-style-tab:active {transform:translateY(1px)}
.island-style-body {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:calc(10 * var(--dk)) calc(12 * var(--dk)) calc(12 * var(--dk));
  scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
.island-style-section {margin-top:calc(12 * var(--dk))}
.island-style-section-title {margin:0 0 calc(8 * var(--dk));padding:calc(5 * var(--dk)) calc(10 * var(--dk));font:700 calc(15 * var(--dk))/1.3 Pixeloid,monospace;color:#5a3418;
  background:linear-gradient(90deg,#ffdaa0,#ffedc3);clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%,0 5px)}
.island-style-slots {display:flex;flex-wrap:wrap;align-items:center;gap:calc(5 * var(--dk))}
.island-style-slots-label {font:700 calc(14 * var(--dk))/1.2 Pixeloid,monospace;color:#7a5a3a;margin-right:calc(2 * var(--dk))}
.island-style-slot {display:inline-flex;align-items:center;gap:calc(4 * var(--dk));padding:calc(2 * var(--dk)) calc(9 * var(--dk));border-radius:999px;background:#efe4d2;
  color:#6d5a44;font:600 calc(15 * var(--dk))/1.25 Rajdhani,sans-serif}
.island-style-slot.filled {background:#d8f0f8;color:#24485b}
.island-style-clear {display:grid;place-items:center;min-width:24px;min-height:24px;border:0;background:transparent;cursor:pointer;font:700 17px/1 sans-serif;color:#24485b;padding:0}
.island-style-list {display:flex;flex-direction:column;gap:calc(8 * var(--dk))}
.island-style-item {padding:calc(6 * var(--dk)) calc(8 * var(--dk));border:calc(6 * var(--dk)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch}
.island-style-item.in-use {border-image-source:url('../ui/frames/tile-blue.svg')}
.island-style-row {display:flex;align-items:center;gap:calc(10 * var(--dk))}
.island-style-thumb {flex:none;width:calc(64 * var(--dk));height:calc(64 * var(--dk));object-fit:contain;border-radius:4px;background:#f1e7c8}
.island-style-copy {display:flex;flex-direction:column;gap:calc(1 * var(--dk));flex:1;min-width:0}
.island-style-copy strong {font:700 calc(18 * var(--dk))/1.2 Rajdhani,sans-serif;color:#2f1d18;overflow-wrap:anywhere}
.island-style-status {font:600 calc(15 * var(--dk))/1.25 Rajdhani,sans-serif;color:#7a5a3a}
.island-style-item.in-use .island-style-status {color:#2f7a45}
.island-style-meta {font:600 calc(14 * var(--dk))/1.25 Rajdhani,sans-serif;color:#8a6443}
.island-style-actions {flex:none;display:flex;flex-direction:column;align-items:stretch;gap:calc(4 * var(--dk));max-width:46%}
.island-style-action {min-height:max(36px,calc(42 * var(--dk)));padding:calc(2 * var(--dk)) calc(10 * var(--dk));cursor:pointer;border:calc(7 * var(--dk)) solid transparent;
  border-image:url('../ui/frames/picker-button.svg') 12 fill stretch;background:none;font:700 calc(17 * var(--dk))/1.1 Rajdhani,sans-serif;color:#2d181c}
.island-style-action.use,.island-style-action.decorate {border-image-source:url('../ui/frames/picker-selected-green.svg');color:#f6ffe8;text-shadow:0 1px 0 #274e2b}
.island-style-action.secondary {border-image-source:url('../ui/frames/tile.svg');border-image-slice:8 fill;color:#5a3418}
.island-style-action.small {min-height:max(32px,calc(36 * var(--dk)));font-size:calc(15 * var(--dk))}
.island-style-action:disabled {opacity:.55;cursor:not-allowed;filter:grayscale(.35)}
.island-style-action:not(:disabled):hover {filter:brightness(1.05)}
.island-style-option {display:flex;align-items:center;gap:calc(8 * var(--dk));margin-top:calc(6 * var(--dk));font:600 calc(15 * var(--dk))/1.2 Rajdhani,sans-serif;color:#7a5a3a}
.island-style-option input,.island-style-option select {flex:1;min-width:0;min-height:34px;font:600 calc(16 * var(--dk)) Rajdhani,sans-serif;padding:3px 8px;border:1px solid #d6c5a7;border-radius:5px;background:#fff;color:#2f1d18}
.island-style-option .island-style-action {flex:none;min-height:34px}
.island-style-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(10 * var(--dk))}
.island-style-card {display:flex;flex-direction:column;gap:calc(4 * var(--dk));min-width:0;padding:calc(4 * var(--dk));
  border:calc(6 * var(--dk)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch}
.island-style-card-stage {position:relative;height:calc(120 * var(--dk));background:#f1e7c8;border-radius:4px;overflow:hidden}
.island-style-card-art {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:calc(8 * var(--dk))}
.island-style-card-name {font:700 calc(18 * var(--dk))/1.15 Rajdhani,sans-serif;color:#2f1d18;min-height:2.3em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.island-style-card-meta {font:600 calc(14 * var(--dk))/1.2 Rajdhani,sans-serif;color:#7a5a3a}
.island-style-price {display:flex;align-items:center;flex-wrap:wrap;gap:0 calc(6 * var(--dk));font:700 calc(18 * var(--dk))/1.2 Rajdhani,sans-serif;color:#3e211d}
.island-style-price small {font:600 calc(15 * var(--dk))/1.2 Rajdhani,sans-serif;color:#7a5a3a}
.island-style-coin {width:calc(20 * var(--dk));height:calc(20 * var(--dk));image-rendering:pixelated}
.island-style-card-actions {display:flex;flex-direction:column;gap:calc(2 * var(--dk));margin-top:auto}
.island-style-card-actions .island-style-action {width:100%}
.island-style-spotlight,.island-style-card.spotlight,.island-style-item.spotlight {outline:3px solid #ff7a2f;outline-offset:2px}
.island-style-decor-summary {display:flex;align-items:center;flex-wrap:wrap;gap:calc(8 * var(--dk)) calc(12 * var(--dk))}
.island-style-facts {flex:1;display:flex;gap:calc(8 * var(--dk));min-width:0}
.island-style-fact {flex:1;display:flex;flex-direction:column;min-width:0;padding:calc(3 * var(--dk)) calc(8 * var(--dk));border:calc(5 * var(--dk)) solid transparent;
  border-image:url('../ui/frames/cream.svg') 12 fill stretch}
.island-style-fact small {font:600 calc(14 * var(--dk))/1.2 Rajdhani,sans-serif;color:#7a5a3a;white-space:nowrap}
.island-style-fact strong {font:700 calc(20 * var(--dk))/1.1 Pixeloid,monospace;color:#3e211d}
.island-style-decor-summary .island-style-action.decorate {flex:none;min-width:calc(130 * var(--dk))}
.island-style-waiting {display:flex;align-items:center;flex-wrap:wrap;gap:calc(6 * var(--dk)) calc(10 * var(--dk));margin-bottom:calc(8 * var(--dk));
  padding:calc(6 * var(--dk)) calc(8 * var(--dk));background:#fff0c8;border-radius:6px;color:#6a3a16}
.island-style-empty {padding:calc(4 * var(--dk)) calc(2 * var(--dk));font-size:calc(16 * var(--dk));color:#6b4a33}
.island-style-note {margin-top:calc(14 * var(--dk))!important;font-size:calc(15 * var(--dk));color:#8a6443;text-align:center}
.island-style-swatches {display:flex;align-items:center;gap:calc(6 * var(--dk));margin:calc(4 * var(--dk)) 0;flex-wrap:wrap}
.island-style-swatches span {width:calc(80 * var(--dk));font-size:calc(15 * var(--dk));color:#7a5a3a}
.island-style-swatch {width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #c9b28a;cursor:pointer;padding:0}
.island-style-swatch.chosen {box-shadow:0 0 0 3px #2b6b8f}
@media (prefers-reduced-motion:reduce) {.island-style-tab:active {transform:none}}

/* Market and inventory */
.market-cosmetic-note {display:block;margin:6px 0;font-size:13px;color:#2f7a45}
.market-skin-choice {display:flex;align-items:center;gap:8px;margin:8px 0 2px;font:600 14px Rajdhani,sans-serif;color:#4c4036}
.market-skin-note {margin:2px 0 6px;font:600 12px/1.3 Rajdhani,sans-serif;color:#5d5045}
.market-skin-choice select {flex:1;min-width:0;font:600 14px Rajdhani,sans-serif;padding:4px 6px;border:1px solid #d6c5a7;border-radius:5px;background:#fff}
.market-bundle-list {margin:4px 0 6px;padding-left:18px;font-size:13px;color:#5d5045}
.market-cosmetic-actions {display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.market-product[data-family] .market-product-art,.market-detail[data-family] .market-detail-art {object-fit:contain}

/* Tablets (701-820 px): the island HUD wraps to its own row under the social buttons (unified-hud.css, top 68 px), so
   the banner, the spot panel and Island Style start below it instead of covering energy, wallet and rewards (not on a
   phone held sideways, too short to give the panel that room). */
@media (min-width:701px) and (max-width:820px) and (min-height:600px) {.decorate-banner,.decorate-panel {top:146px}}
@media (min-width:701px) and (max-width:820px) and (min-height:600px) {.island-style-panel {top:146px}}
@media (max-width:700px) {
  /* Phones: Island Style is a sheet from the bottom edge, like the spot panel (two rows of three tabs). */
  .island-style-panel {--dk:.92px;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:76dvh;border-width:10px}
  .island-style-title p {display:none}
  .island-style-card-stage {height:96px}
  .island-style-thumb {width:52px;height:52px}
  .island-style-swatches span {width:100%}
  /* Phones: the spot panel is a sheet from the bottom edge; the banner sits under the HUD and keeps only Done
     (and its title) while a spot is open. */
  .decorate-panel {--dk:.92px;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:62dvh;border-width:10px}
  .decorate-banner {top:132px;padding:8px 12px;gap:4px 12px}
  .decorate-banner-copy strong {font-size:15px}
  .decorate-banner-copy span,.decorate-legend {font-size:14px}
  body.decorating-spot .decorate-banner :is(.decorate-banner-copy span,.decorate-legend,.decorate-link) {display:none}
  .decorate-card-stage {height:104px}
  .decorate-pin {width:34px;height:34px;font-size:15px}}