/* The Wardrobe (game-hub-D45, the owner's pick A, "the sticker album"; mock-up
   https://claude.ai/artifact/Lw1J1k6dNLZSqXuDC4f6Xo). Me wears the hub's sticker sheet: white die-cut tiles, ink
   outlines, hard offset shadows. A game's tab wears that game's own look. Dark behind ?wardrobe (js/core/wardrobe.js). */

body[data-screen="shop"]:has(#screen-shop.wd-on) {
  background:
    radial-gradient(circle at 12px 12px, var(--dot) 2px, transparent 2.5px) 0 0 / 24px 24px,
    var(--sheet);
}
/* a computer: the Wardrobe is a screen of its own, a column; a phone or tablet: the third page of the pager, which
   keeps <main> the screen's width (a narrower main misaligned every page, game-hub-D59) */
body:not(.paged)[data-screen="shop"]:has(#screen-shop.wd-on) main { width: min(560px, 100% - 32px); margin-top: 0; padding: 14px 0 0; }
body.paged #screen-shop.wd-on { padding: 14px max(16px, (100% - 560px) / 2) 0; }
/* a phone or tablet: the page is a column that does not scroll; only the options (.wd-body) scroll, in the room
   between the sticker and the action row, so no tile ever slides under the buttons (the CPO's D79 review: at 320x568
   the die and an earned note sat on the second row of hats) */
body.paged #screen-shop.wd-on { display: flex; flex-direction: column; overflow: hidden; }
body.paged #screen-shop.wd-on > * { flex: none; }
body.paged #screen-shop.wd-on > .wd { flex: 1 1 0; min-height: 0; }
body.paged .wd > *, body.paged .wd-game > * { flex: none; }
body.paged .wd-game { flex: 1 1 0; min-height: 0; }
body.paged :is(.wd, .wd-game) > .wd-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 7px 7px 2px; } /* room for a picked tile's ring */
.wd-body { display: flex; flex-direction: column; gap: 10px; }
/* one grid on Me (hats, colours, frames, titles): its rows share the room the column leaves, whole rows on every
   phone, from 46 px up to 104 px; the face's four grids scroll (wardrobe.js sets --cols and --rows) */
.wd > .wd-body > .wd-grid:only-child { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } /* six hats: two rows of three; eight colours: two of four */
body.paged :is(.wd, .wd-game) > .wd-body { container-type: size; }
body.paged .wd > .wd-body > .wd-grid:only-child { --row: clamp(46px, (100cqh - 9px - (var(--rows, 2) - 1) * 8px) / var(--rows, 2), 104px); grid-auto-rows: var(--row); }
body.paged .wd > .wd-body > .wd-grid:only-child .wd-tile { min-height: 0; padding: 4px; }
body.paged .wd > .wd-body > .wd-grid:only-child .wd-art svg { width: auto; max-width: 90%; max-height: calc(var(--row) - 14px); }
body.paged .wd-foot { position: static; background: none; }
#screen-shop.wd-on > :is(h2, .earn, .tabs, #shop-list) { display: none; }
#screen-shop.wd-on { gap: 10px; text-align: left; min-width: 0; }
/* the tab and chip strips scroll sideways; they must not set the page's width (at 320 px they once made it 329) */
body[data-screen="shop"]:has(#screen-shop.wd-on) main, .wd, .wd > * { min-width: 0; max-width: 100%; }
#screen-shop.wd-on :is(.back, .coins) {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; border-radius: 22px; outline: 0;
  background: #fff; color: #1d1a2e; box-shadow: 0 0 0 3px #1d1a2e, 0 4px 0 0 #1d1a2e; translate: none;
  font: 800 16px/1 "Bricolage Grotesque", system-ui, sans-serif;
}
#screen-shop.wd-on .coin { width: 22px; height: 22px; }
/* Settings beside the coins, the same die-cut chip; a page of the pager has no back unless a game opened it */
#screen-shop.wd-on .gear-pill { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 22px; outline: 0; background: #fff; box-shadow: 0 0 0 3px #1d1a2e, 0 4px 0 0 #1d1a2e; }
#screen-shop.wd-on .gear-pill svg { width: 30px; height: 30px; }
body.paged #screen-shop.wd-on .back:not(.returning) { display: none; }

.wd {
  --ink: #1d1a2e;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--ink);
  font: 500 15px/1.35 "Bricolage Grotesque", system-ui, sans-serif;
}
#screen-shop.wd-on .wd .coin, .wd-peel .coin { width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 3px; }

/* game-hub-D79 B, "the mirror" (the owner's pick): the games as quiet underlined words; the parts as one segmented
   strip; the sticker large beside what it is trying on; tiles of the part alone, one quiet mark each. Purple is the
   one accent on Me and Themes (the picked tile, the button); each game's tab keeps its own button colour as its one. */
.wd { --acc: #7c5cff; }
.wd-tabs, .wd-chips { display: flex; overflow-x: auto; scrollbar-width: none; }
.wd-tabs::-webkit-scrollbar, .wd-chips::-webkit-scrollbar { display: none; }
/* more past an edge: that edge fades (wardrobe.js sets data-more) */
:is(.wd-tabs, .wd-chips)[data-more="end"] { mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
:is(.wd-tabs, .wd-chips)[data-more="start"] { mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
:is(.wd-tabs, .wd-chips)[data-more="start end"] { mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.wd-tabs button, .wd-chips button { flex: none; border: 0; background: none; font: 800 14px/1 "Bricolage Grotesque", system-ui, sans-serif; white-space: nowrap; }
.wd-tabs { gap: 18px; padding: 0 2px; border-bottom: 2px solid rgb(29 26 46 / .12); }
.wd-tabs button { min-height: 40px; padding: 0 2px; color: #5f5a74; font-size: 15px; }
.wd-tabs [aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.wd-chips { padding: 3px; border-radius: 14px; background: #ece8f7; }
.wd-chips button { flex: 1 0 auto; min-height: 36px; padding: 0 10px; border-radius: 11px; color: #4a4560; }
.wd-chips [aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }

/* your sticker, beside its name and title, or the part it is trying on and that part's state */
.wd-hero { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.wd-me { flex: none; line-height: 0; }
.wd-me svg { width: clamp(124px, 40vw, 168px); height: auto; }
.wd-plate { display: grid; gap: 8px; min-width: 0; }
.wd-plate b { font: 400 26px/1 "Bagel Fat One", system-ui, sans-serif; overflow-wrap: anywhere; }
.wd-plate b.wd-cap { font-size: clamp(18px, 5.4vw, 26px); overflow-wrap: normal; text-wrap: balance; } /* two words fit at 320 */
.wd-line { display: inline-flex; align-items: center; gap: 6px; font: 800 18px/1 "Bricolage Grotesque", system-ui, sans-serif; }
.wd-line .wd-tick { width: 22px; height: 22px; }
.wd-line .wd-star { width: 20px; height: 20px; }
#screen-shop.wd-on .wd .wd-line .coin { width: 20px; height: 20px; vertical-align: -4px; }
.wd-title {
  display: inline-block; width: max-content; max-width: 100%; padding: 5px 8px; border-radius: 8px; background: #ffe14d;
  box-shadow: 0 0 0 2.5px var(--ink); rotate: -3deg; font: 800 12px/1 "Bricolage Grotesque", system-ui, sans-serif; white-space: nowrap;
}
.wd-plate .wd-title { background: #fff; rotate: 0deg; box-shadow: 0 0 0 2px var(--ink); } /* in ink, not a second accent */

/* the album: each part alone */
.wd-sub { margin: 4px 0 -2px; font: 800 12px/1 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #4a4560; }
.wd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wd-tile, .wd-item {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 4px 4px 8px; border: 0;
  border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink);
  font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: scale 0.15s cubic-bezier(0.3, 1.6, 0.6, 1);
}
.wd-tile { align-content: center; min-height: 78px; padding: 14px 6px; }
.wd-tile:active, .wd-item:active { scale: 0.96; }
.wd-tile b, .wd-item b { font: 800 11.5px/1.1 "Bricolage Grotesque", system-ui, sans-serif; text-align: center; overflow-wrap: anywhere; }
.wd-art { display: grid; place-items: center; width: 100%; line-height: 0; }
.wd-art svg { width: min(68px, 90%); height: auto; overflow: visible; }
.wd-art .wd-title { font-size: 11px; padding: 4px 6px; line-height: 1; }
.wd-tile.sel, .wd-item.sel { box-shadow: 0 0 0 3px var(--acc), 0 0 0 6px color-mix(in srgb, var(--acc) 22%, transparent); }
.wd-tile.locked svg { filter: grayscale(0.85) opacity(0.75); }
/* one quiet mark in one corner: worn, a price, or earned only (wardrobe.js mark) */
.wd-mark { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; line-height: 1; color: var(--mark, var(--ink)); font: 800 12px/1 "Bricolage Grotesque", system-ui, sans-serif; }
.wd-tick { width: 20px; height: 20px; }
.wd-star { width: 17px; height: 17px; }
#screen-shop.wd-on .wd .wd-mark .coin { width: 13px; height: 13px; margin-right: 2px; vertical-align: -2px; }
.wd-game .wd-mark { font-family: inherit; } /* a game's prices in its own type (Ripple Lake's lining digits) */
/* a game's tile: its mark above the drawing, not on it; picked, a ring in the game's own button colour, over each
   look's own edge (a look's box-shadow: none once hid it) */
.wd .wd-game .wd-item { padding-top: 26px; }
.wd-game .wd-mark { top: 4px; right: 4px; }
.wd .wd-game .wd-item.sel { box-shadow: 0 0 0 3px var(--acc), 0 0 0 6px color-mix(in srgb, var(--acc) 30%, transparent); }

/* Random and the one button stay in reach at the bottom of the screen */
.wd-foot {
  position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px; margin: 2px -4px 0; padding: 14px 4px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(rgb(255 243 247 / 0), var(--sheet) 34%);
}
/* earned only: not a button (the CPO's D79 review): no fill, no edge, no shadow, nothing to press; how it is earned */
.wd-earn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin: 0; color: inherit; font: 800 15px/1.2 "Bricolage Grotesque", system-ui, sans-serif; text-align: center; cursor: default; }
.wd-earn .wd-star { flex: none; width: 20px; height: 20px; }
.wd-btn {
  flex: 1; min-height: 50px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--acc); color: #fff;
  box-shadow: 0 0 0 3px var(--ink), 3px 3px 0 3px var(--ink); font: 400 17px/1.1 "Bagel Fat One", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.wd-btn:not(.dim):active { translate: 2px 2px; box-shadow: 0 0 0 3px var(--ink), 1px 1px 0 3px var(--ink); }
/* not yet: the game's own button, dimmed where it stands, its price or award still on it (game-hub-D77). Opaque, so
   the grid never shows through it; muted, never grey. */
.wd-btn.dim { filter: saturate(.45); cursor: default; }
.wd-btn { text-wrap: balance; }
.wd-btn .wd-n { white-space: nowrap; } /* a price's coin and number stay on one line */
.wd-foot:empty { padding-block: 0 env(safe-area-inset-bottom); }
/* Random: a quiet die beside the one filled button */
.wd-btn.wd-rnd { flex: 0 0 50px; width: 50px; padding: 0; display: grid; place-items: center; background: transparent; color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.wd-btn.wd-rnd:active { translate: none; box-shadow: 0 0 0 2px var(--ink); scale: .94; }
.wd-btn.wd-rnd svg { width: 26px; height: 26px; }
.wd :is(button, .wd-btn):focus-visible { outline: 3px solid #3b6cff; outline-offset: 4px; }

/* a game's items, each in its game's own look */
.wd-game { display: flex; flex-direction: column; gap: 10px; }
.wd-item .swatch { width: 100%; max-width: 84px; padding: 6px 4px; }
.wd-item .item-sub { font-size: 11px; line-height: 1.2; text-align: center; color: #4a4560; }
.wd-gear { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: #334155; color: #fff; font: 800 10px/1.3 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: .04em; vertical-align: 1px; } /* once, in a gear section head */
.wd-note { margin: 0; font-size: 13px; color: #4a4560; }
/* Tic Tac Toe: the ladder's sticker sheet, its blue button */
.look-ttt .wd-btn:not(:disabled) { background: #3b6cff; }
.look-ttt { --acc: #3b6cff; }
/* Trailblades: its menu's cards, purple choice and the blue-to-red Start quest button */
.look-quest { margin: 0 -4px; padding: 14px 12px 0; border-radius: 22px 22px 0 0; background: var(--surface, #fff); box-shadow: 0 0 0 2px var(--line, #e2e8f0); font-family: "Fredoka", system-ui, sans-serif; }
.look-quest .wd-sub { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; color: var(--muted, #64748b); letter-spacing: 0.08em; }
.look-quest .wd-item { border-radius: 14px; box-shadow: none; outline: 2px solid var(--line, #e2e8f0); outline-offset: -2px; font-family: "Fredoka", system-ui, sans-serif; }
.look-quest .wd-item b { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; }
.look-quest { --acc: #2563eb; }
.look-quest .wd-item.sel { outline: 0; }
.look-quest .wd-foot { margin: 2px -12px 0; padding-left: 12px; padding-right: 12px; background: linear-gradient(rgb(255 255 255 / 0), var(--surface, #fff) 40%); }
.look-quest .wd-btn:not(:disabled) { background: linear-gradient(90deg, #2563eb, #dc2626); box-shadow: 0 6px 0 #1e3a8a; font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; }

/* high scores: each row's sticker and title */
.wd-row { gap: 8px; padding: 6px 10px; }
.wd-row svg { flex: none; width: 48px; height: 48px; }
.wd-row .lb-name { gap: 3px; }
.wd-row .wd-title { font-size: 10.5px; padding: 3px 6px; }

/* a look just earned peels onto the page, once */
.wd-peel {
  --ink: #1d1a2e;
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60; translate: -50% 0; rotate: -1.5deg;
  display: flex; align-items: center; gap: 10px; width: min(380px, 100% - 32px); padding: 10px; border-radius: 18px;
  background: #c9f7df; color: var(--ink); box-shadow: 0 0 0 3px var(--ink), 3px 3px 0 3px var(--ink);
  font: 500 12.5px/1.3 "Bricolage Grotesque", system-ui, sans-serif;
  animation: wd-peel 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards;
}
.wd-peel b { display: block; font: 400 17px/1.1 "Bagel Fat One", system-ui, sans-serif; }
.wd-peel-sticker { flex: none; rotate: -12deg; filter: drop-shadow(2px 3px 0 rgb(0 0 0 / 0.25)); line-height: 0; }
.wd-peel .wd-btn { flex: none; min-height: 44px; font-size: 15px; }
/* Lantern Deep: its night water, cut-paper cards and the lantern-red Dive button */
.look-deep { margin: 0 -4px; padding: 14px 12px 0; border-radius: 6px 6px 0 0; background: #0d1533; color: #fbe7c6; min-height: 120px; }
.look-deep .wd-note { color: rgba(251, 231, 198, .75); }
.look-deep .wd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.look-deep .wd-item { border-radius: 4px; background: #16204a; color: #fbe7c6; box-shadow: none; padding: 6px 4px 8px; }
.look-deep { --acc: #e2582b; --mark: #fbe7c6; --tick-on: #0d1533; }
.look-deep .wd-item.sel { background: #1d2a5e; }
.look-deep .wd-item.locked .wd-cv { filter: grayscale(.8) brightness(.8); }
.wd-cv { width: 68px; height: 68px; }

/* Orbit Rumble's paints (game-hub-D55, mock-up A2): the hangar's deep space, glass tiles, light that glows */
.look-shooter { margin: 0 -4px; padding: 14px 12px 0; border-radius: 6px 6px 0 0; color: #e8ecff; font-family: "Fredoka", system-ui, sans-serif;
  background: radial-gradient(120% 70% at 50% 18%, #27306b 0, #0d1336 45%, #04050d 100%); }
.look-shooter .wd-sub { margin: 0; color: #fde047; font: 700 22px/1 "Fredoka", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 14px rgb(253 224 71 / .45); }
.look-shooter .wd-note { color: #9fb0e8; }
.look-shooter .wd-hangar { display: grid; justify-items: center; gap: 4px; padding: 4px 0 6px; background: radial-gradient(circle at 50% 42%, rgb(56 120 200 / .35), transparent 62%); }
.look-shooter .wd-ship { width: 60px; height: 60px; }
.look-shooter .wd-ship.big { width: 120px; height: 120px; filter: drop-shadow(0 0 14px rgb(255 255 255 / .25)); }
.look-shooter .wd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.look-shooter .wd-item { border-radius: 14px; background: rgb(255 255 255 / .06); color: #e8ecff; box-shadow: none; outline: 1.5px solid rgb(255 255 255 / .18); outline-offset: -1.5px; padding: 6px 3px 8px; }
.look-shooter .wd-item b { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 13px; }
.look-shooter { --acc: #fde047; --mark: #e8ecff; --tick-on: #04050d; }
.look-shooter .wd-item.sel { background: rgb(253 224 71 / .1); outline: 0; }
.look-shooter .wd-item.locked .wd-ship { filter: grayscale(.6) brightness(.85); }
.look-shooter .wd-foot { margin: 2px -12px 0; padding: 10px 12px 12px; background: linear-gradient(rgb(4 5 13 / 0), #04050d 40%); }
.look-shooter .wd-foot:empty { padding: 0 0 env(safe-area-inset-bottom); } /* the paint worn: no buttons, no band */
.look-shooter .wd-btn:not(:disabled) { background: #fde047; color: #1d1a2e; box-shadow: 0 0 22px rgb(253 224 71 / .45); font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; }
.look-deep .wd-foot { margin: 2px -12px 0; padding-left: 12px; padding-right: 12px; background: linear-gradient(rgb(13 21 51 / 0), #0d1533 40%); }
.look-deep .wd-btn:not(:disabled) { background: #e2582b; color: #fff6d2; box-shadow: none; border-radius: 14px; }
/* Ripple Lake: the chart's paper and ink, each paint on the shallow-water tint inside a hairline frame, chart red */
@font-face { font-family: 'IM Fell English'; src: url(../fonts/im-fell-english-latin.woff2) format('woff2'); font-style: normal; font-display: swap; }
/* IM Fell has only old-style figures (40 reads as 4o): the digits come lining from Fraunces, as in the game */
@font-face { font-family: 'Lake Digits'; src: url(../fonts/fraunces-latin.woff2) format('woff2'); font-weight: 100 900; unicode-range: U+0030-0039; font-display: swap; }
.look-lake { margin: 0 -4px; padding: 14px 12px 0; background: #f4ecd8; color: #1f3a4a; min-height: 120px; font-family: 'Lake Digits', 'IM Fell English', Georgia, serif; box-shadow: inset 0 0 0 1px #1f3a4a, inset 0 0 0 4px #f4ecd8, inset 0 0 0 5px #1f3a4a; }
.look-lake .wd-note { color: #1f3a4a; font-style: italic; opacity: .85; }
.look-lake .wd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.look-lake .wd-item { border-radius: 0; background: #f4ecd8; color: #1f3a4a; box-shadow: none; padding: 6px 4px 8px; font-family: inherit; }
.look-lake .wd-item b { font-family: inherit; font-weight: 400; font-size: 14px; }
.look-lake .wd-cv { background: #cfe3e6; outline: 1px solid #1f3a4a; }
.look-lake { --acc: #b8202a; --mark: #1f3a4a; --tick-on: #f4ecd8; }
.look-lake .wd-foot { margin: 2px -12px 0; padding-left: 12px; padding-right: 12px; background: linear-gradient(rgb(244 236 216 / 0), #f4ecd8 40%); }
.look-lake .wd-btn { font-family: inherit; font-weight: 400; border-radius: 0; box-shadow: none; }
.look-lake .wd-btn:not(:disabled) { background: #b8202a; color: #f4ecd8; }
/* Sky Hamlet: look A's sanded beech board and walnut ink (sky/docs/art-direction.md); each paper laid out from above
   on a pale board, the coral of the game's Climb button for the buy */
@font-face { font-family: 'Rammetto One'; src: url(../fonts/rammetto-one-latin.woff2) format('woff2'); font-style: normal; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url(../fonts/lexend-latin.woff2) format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
.look-sky { margin: 0 -4px; padding: 14px 12px 0; border-radius: 16px 16px 0 0; color: #3a2618; min-height: 120px; font-family: 'Lexend', system-ui, sans-serif; font-variant-numeric: lining-nums;
  background: repeating-linear-gradient(176deg, rgba(150,95,40,0) 0 7px, rgba(150,95,40,.07) 7px 9px), linear-gradient(180deg, #f3d7a8, #e2bb83); box-shadow: inset 0 2px 0 rgba(255,255,255,.55); }
.look-sky .wd-note { color: #3a2618; opacity: .85; }
.look-sky .wd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.look-sky .wd-item { border-radius: 14px; background: linear-gradient(180deg, #f0cf9c, #dcb177); color: #3a2618; padding: 6px 4px 8px; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(120,72,30,.35), 0 3px 0 #8a5a2e; }
.look-sky .wd-item b { font: 400 clamp(11px, 3.4vw, 13px)/1.15 'Rammetto One', Georgia, serif; overflow-wrap: normal; word-break: normal; hyphens: none; } /* "Sunflower" broke between letters at 320 */
.look-sky .wd-cv { background: #fff6e6; border-radius: 10px; }
.look-sky { --acc: #b84d34; --mark: #3a2618; --tick-on: #fff6e6; }
.look-sky .wd-foot { margin: 2px -12px 0; padding-left: 12px; padding-right: 12px; background: linear-gradient(rgb(226 187 131 / 0), #e2bb83 40%); }
.look-sky .wd-btn { font: 400 15px 'Rammetto One', Georgia, serif; border-radius: 14px; }
.look-sky .wd-btn:not(:disabled) { background: radial-gradient(circle at 40% 30%, #f08a6c, #b84d34 70%); color: #fff6e6; box-shadow: 0 4px 0 #6e2a1a; }
@keyframes wd-peel { from { opacity: 0; rotate: -14deg; scale: 0.7; translate: -50% 40px; } }

@media (prefers-reduced-motion: reduce) {
  .wd-peel { animation: none; }
  .wd-tile, .wd-item { transition: none; }
}
/* short phones (320 x 568): a smaller sticker on top, so a second row of options shows above the buttons */
@media (max-height: 680px) {
  .wd-me svg { width: 92px; }
  .wd-hero { padding: 6px 10px; }
  .wd-plate b { font-size: 21px; }
  .wd-tile { min-height: 64px; padding: 10px 6px; }
  .look-shooter .wd-ship.big { width: 104px; height: 104px; } /* the paint row shows whole under it at 320 x 568 */
}
@media (min-width: 900px) {
  .wd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }}