/* The Secret Base (js/secret-base.js): the room on top, a cream hint line, the picked piece's keys, then the tray. */
.secret-base {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  background: #1d2440; color: #fff; overflow-y: auto;
  font-family: var(--pixel-font); font-synthesis-weight: none;
}
.secret-base > * { flex-shrink: 0; }   /* the page scrolls; nothing squashes to fit */
.sb-top { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 560px; }
.sb-top h2 { margin: 0; font-size: 14px; color: var(--gold); letter-spacing: 0.06em; }
.sb-close { width: 36px; height: 36px; border: 2px solid #fff4; border-radius: 50%; background: #0004; color: #fff; font-size: 16px; cursor: pointer; }
.sb-room { width: 100%; max-width: 560px; padding: 6px; border-radius: 10px; background: #0d1226; box-shadow: inset 0 0 0 2px #3a4470; }
.sb-room canvas { display: block; width: 100%; aspect-ratio: 1; image-rendering: pixelated; cursor: pointer; touch-action: manipulation; }
.sb-hint {
  width: 100%; max-width: 560px; margin: 0; padding: 10px 12px; min-height: 3.2em;
  border: 2px solid #14275e; border-radius: 8px; background: #fff8e0; color: #14275e;
  font-size: 12px; line-height: 1.5;
}
.sb-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sb-actions[hidden] { display: none; }
.sb-actions button, .sb-tab {
  padding: 8px 12px; border: 2px solid #14275e; border-radius: 999px;
  background: #fff8e0; color: #14275e; font: 12px/1 var(--pixel-font); cursor: pointer; box-shadow: 0 3px 0 #0d1a44;
}
.sb-actions button[hidden] { display: none; }
.sb-actions [data-act="store"] { background: #f4b0a8; }
.sb-tabs { display: flex; gap: 6px; }
.sb-tab.on { background: var(--gold); }
.sb-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px;
  width: 100%; max-width: 560px;
}
.sb-item {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  min-height: 92px; padding: 8px 4px; border: 2px solid #3a4470; border-radius: 8px;
  background: #2a3358; color: #fff; font: 12px/1.3 var(--pixel-font); cursor: pointer;
}
.sb-item.on { border-color: var(--gold); background: #3a4470; box-shadow: 0 0 0 2px #ffcb0560; }
.sb-item canvas { max-width: 64px; max-height: 56px; transform: scale(1.5); transform-origin: bottom; margin-top: 18px; }
.sb-swatch { width: 48px; height: 36px; border: 2px solid #0d1226; border-radius: 4px; }

.sb-top h2 { flex: 1; }

/* The 3D base (js/base-3d.js): the WebGL view fills the screen. Walking, only a ✕ and the round Decorate key sit on
   it; decorating, a cream sheet slides up over the bottom (icon tabs, the tab's name, Done, then one row of tiles that
   scrolls sideways), and a hint pill floats under the top bar for the odd message; a piece in hand or picked tucks the
   sheet down to its hinge and keys. The sheet is
   moved off screen, never hidden, so the camera can measure it (fitCamera()). */
.base3d {
  position: fixed; inset: 0; z-index: 900; overflow: clip;
  background: #0a0c18; font-family: var(--pixel-font); font-synthesis-weight: none;
  --b3-ink: #2a2a3a; --b3-cream: #fbf6ea; --b3-line: #e6dcc6;
}
.b3-stage { position: absolute; inset: 0; }
.b3-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }
.b3-top {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px; pointer-events: none;
}
.b3-top > * { pointer-events: auto; }
.b3-top h2 {
  flex: 1; margin: 0; font-size: 14px; color: var(--gold); letter-spacing: 0.06em; text-shadow: 0 2px 0 #0008;
  opacity: 0; transition: opacity 0.3s;
}
.base3d.editing .b3-top h2 { opacity: 1; }
.b3-fps { font-size: 12px; color: #9f9; text-shadow: 0 1px 0 #000; }
.b3-key {
  display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; box-sizing: border-box;
  border: 0; border-radius: 50%; background: #0007; color: #fff; cursor: pointer;
  box-shadow: inset 0 0 0 2px #fff3; -webkit-tap-highlight-color: transparent;
}
.b3-key svg { width: 18px; height: 18px; }
.b3-key:active { scale: 0.92; }

/* the hint: a slim pill under the top bar, only while decorating */
.b3-hint {
  position: absolute; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 50px); translate: -50% 0;
  width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 7px 14px; box-sizing: border-box;
  border-radius: 999px; background: #000b; color: #fff; font-size: 12px; line-height: 1.6; text-align: center;
  pointer-events: none; opacity: 0; transition: opacity 0.25s;
}
.base3d.editing .b3-hint:not(:empty) { opacity: 1; }

/* Decorate: one round shell key at the bottom, walking */
.b3-decor {
  position: absolute; left: 50%; bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)); translate: -50% 0;
  display: flex; align-items: center; gap: 8px; padding: 0 18px 0 8px; height: 50px; box-sizing: border-box;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 12px/1 var(--pixel-font);
  background: radial-gradient(circle at 30% 25%, var(--shell-hi), var(--shell) 60%, var(--shell-lo));
  box-shadow: inset 0 0 0 2px var(--shell-rim), inset 0 2px 0 #fff4, 0 4px 0 var(--shell-deep), 0 6px 16px #0006;
  text-shadow: 0 1px 0 var(--shell-deep); -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s, translate 0.3s cubic-bezier(.3, 1.4, .5, 1);
}
.b3-decor svg {
  width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 50%;
  background: #fff3; box-shadow: inset 0 0 0 2px #fff5;
}
.b3-decor:active { translate: -50% 3px; box-shadow: inset 0 0 0 2px var(--shell-rim), 0 1px 0 var(--shell-deep); }
.base3d.editing .b3-decor { opacity: 0; translate: -50% 90px; pointer-events: none; }

/* the sheet: the Pokédex's shell (the user's pick, 2026-10-09), like the rooms' and the Clearing's bars. On the hinge, one
   line: the lens, lights, the tabs as round keys and Done, the rooms' gold pill (the user's call, 2026-10-08: no LCDs); the Furniture tab's filters; then the pieces on a pale screen, kept pale so their 20 colours read true */
.b3-sheet {
  position: absolute; left: 50%; bottom: 0; z-index: 2; width: min(100%, 560px); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 12px max(12px, env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0; background: var(--shell); color: #fff;
  box-shadow: inset 0 3px 0 var(--shell-hi), inset 0 0 0 3px var(--shell-rim), 0 -6px 24px #0006;
  translate: -50% calc(100% + 20px); transition: translate 0.35s cubic-bezier(.2, .9, .3, 1);
}
.base3d.editing .b3-sheet { translate: -50% 0; }
.b3-hinge { gap: 6px; padding: 2px 2px 0; }
.b3-ok { height: 36px; min-width: 72px; padding: 0 12px; margin-left: auto; font-size: 12px; flex: none; }
.b3-tabs, .b3-acts { display: flex; gap: 0; flex: 1 1 auto; justify-content: center; min-width: 0; }
.b3-tab {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.b3-tab .round-key { width: 40px; height: 40px; opacity: 0.8; transition: translate 0.08s, box-shadow 0.12s, opacity 0.12s; }
.b3-tab .round-key svg { width: 22px; height: 22px; }
.b3-tab:active .round-key { translate: 0 2px; box-shadow: inset 0 0 0 2px var(--shell-rim), 0 1px 0 var(--shell-deep); }
/* the open tab's key is pushed in and ringed in the yellow light's gold */
.b3-tab.on .round-key {
  opacity: 1; translate: 0 2px;
  box-shadow: inset 0 0 0 2px var(--shell-rim), inset 0 3px 4px #0005, 0 0 0 3px #f8d030, 0 0 10px 2px #ffd84099;
}

/* the Furniture tab's filters: chips on a dark strip, the picked one lit gold */
.b3-filters {
  display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--shell-deep);
  box-shadow: inset 0 2px 3px #0006; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.b3-filters::-webkit-scrollbar { display: none; }
.b3-filters[hidden] { display: none; }
.b3-chip {
  flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--shell-lo); color: #fff; font: 12px/1 var(--pixel-font); text-shadow: 0 1px 0 var(--shell-deep);
  box-shadow: inset 0 0 0 2px var(--shell-rim); -webkit-tap-highlight-color: transparent;
}
.b3-chip.on {
  background: linear-gradient(#fff3a0, #f8d030 45%, #e0a818); color: #3a2400; text-shadow: 0 1px 0 #fff8;
  box-shadow: inset 0 0 0 2px #5a3a08;
}

/* the screen the pieces sit on: a bezel like the device's, a pale glass inside */
.b3-screen {
  padding: 8px 0; border: 2px solid #2a2a30; border-radius: 10px; background: var(--b3-cream);
  box-shadow: inset 0 2px 0 #0001, 0 0 0 3px #e4e4ea, 0 0 0 5px var(--shell-rim);
  margin: 2px 4px;
}


.b3-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 70px; gap: 8px; width: 100%;
  padding: 2px 10px 4px; box-sizing: border-box; scroll-padding-inline: 10px; scroll-snap-type: x proximity;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.b3-strip::-webkit-scrollbar { display: none; }
.b3-tile {
  display: flex; flex-direction: column; align-items: center; padding: 4px; scroll-snap-align: start;
  border: 0; border-radius: 14px; background: #fff; color: var(--b3-ink); cursor: pointer;
  box-shadow: 0 0 0 1.5px var(--b3-line), 0 3px 0 var(--b3-line); -webkit-tap-highlight-color: transparent;
  transition: translate 0.12s, box-shadow 0.12s;
}
.b3-tile:active { translate: 0 2px; }
.b3-tile.on { box-shadow: 0 0 0 3px #f8c830, 0 3px 0 #d8a20c, 0 0 14px #f8c83066; translate: 0 -2px; }
.b3-pic {
  position: relative; display: grid; place-items: center; width: 62px; height: 58px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 85%, #fff 0 30%, #f3ead6 75%);
}
.b3-pic canvas { max-width: 50px; max-height: 44px; transform: scale(1.3); }
.b3-pic img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; }
.b3-tag {
  position: absolute; top: 4px; right: 4px; padding: 4px 6px; border-radius: 999px; font: normal 12px/1 var(--pixel-font);
  background: #8a94a8; color: #fff;
}
.b3-tile.on .b3-tag { background: #f8c830; color: #3a2400; }
.b3-tile.sale .b3-tag { background: #d83a3a; }
.b3-tile.locked .b3-pic canvas { filter: grayscale(1) opacity(0.55); }
.b3-tile.secret .b3-pic canvas { filter: brightness(0) opacity(0.35); }
.b3-tile.locked .b3-tag { background: #b08ad0; }
.b3-swatch { width: 46px; height: 38px; border-radius: 10px; box-shadow: inset 0 0 0 2px #0002, 0 2px 4px #0002; }
/* tiles show no names, to fit five across: a piece's name is its tooltip, and said for a moment once it's taken */
.b3-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.b3-tile { position: relative; }
.b3-tag { top: 3px; right: 3px; padding: 3px 5px; font-size: 12px; }

/* the grip: a bottom sheet's handle on the shell's top edge; it, or a tap on the lens, folds the sheet to its hinge */
.b3-grip {
  position: absolute; left: 50%; top: -14px; translate: -50% 0; width: 64px; height: 22px; padding: 0; border: 0;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.b3-grip::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 15px; height: 5px; border-radius: 999px;
  background: var(--shell-hi); box-shadow: 0 1px 0 var(--shell-deep);
}
.b3-hinge .pdx-lens, .b3-hinge .mdex-lights { cursor: pointer; }
.base3d.folded .b3-filters, .base3d.folded:not(.painting) .b3-screen { display: none; }

/* a piece in hand or picked tucks the sheet down to its hinge and one row of round keys (Turn, Colour, Store, Cancel)
   where the tabs were, the LCD naming the piece and the gold pill putting it down or letting go (the user's ask,
   2026-10-08: the sheet, a hint box and a floating key strip covered most of the room); Colour brings back the screen */
.b3-acts { animation: b3Pop 0.2s cubic-bezier(.3, 1.5, .5, 1); }
.b3-acts[hidden], .b3-act[hidden], .base3d.tucked .b3-tabs, .base3d.tucked .b3-filters,
.base3d.tucked:not(.painting) .b3-screen { display: none; }
.b3-act {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.b3-act .round-key { width: 40px; height: 40px; transition: translate 0.08s, box-shadow 0.12s; }
.b3-act .round-key svg { width: 22px; height: 22px; }
.b3-act:active .round-key { translate: 0 2px; box-shadow: inset 0 0 0 2px var(--shell-rim), 0 1px 0 var(--shell-deep); }
.b3-act.on .round-key {
  translate: 0 2px; box-shadow: inset 0 0 0 2px var(--shell-rim), inset 0 3px 4px #0005, 0 0 0 3px #f8d030, 0 0 10px 2px #ffd84099;
}

@keyframes b3Pop { from { opacity: 0; scale: 0.8; } }
@media (prefers-reduced-motion: reduce) { .b3-sheet, .b3-decor, .b3-acts { transition: none; animation: none; } }

/* the first room's present: a tip while walking, then what was inside on a cream card */
.base3d .b3-hint.tip { opacity: 1; animation: b3Pop 0.3s cubic-bezier(.3, 1.5, .5, 1); }
.b3-gift {
  position: absolute; left: 50%; top: 50%; z-index: 4; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(340px, calc(100% - 32px)); padding: 16px; box-sizing: border-box;
  border-radius: 22px; background: var(--b3-cream); color: var(--b3-ink);
  box-shadow: 0 10px 30px #0008, inset 0 2px 0 #fff; animation: b3Pop 0.3s cubic-bezier(.3, 1.5, .5, 1);
}
.b3-gift[hidden] { display: none; }
.b3-gift p { margin: 0; font-size: 12px; color: #c0392b; }
.b3-gift-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.b3-gift-row .b3-pic { width: 60px; height: 54px; animation: b3Pop 0.35s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.b3-gift-row .b3-pic canvas { max-width: 44px; max-height: 40px; transform: none; }
@media (prefers-reduced-motion: reduce) { .b3-gift, .b3-gift-row .b3-pic, .base3d .b3-hint.tip { animation: none; } }

/* Smeargle's housewarming: Animal Crossing's cream speech window over the Decorate key, its name on a tilted tag, a
   bouncing arrow saying a tap goes on */
.base3d.visiting .b3-decor { display: none; }
/* a friend's base is only walked round (openBase3d({ guest })) */
.base3d.guest .b3-decor { display: none; }
/* out in the backyard there's only furniture and who's let out to pick: no wallpaper, no floor */
.base3d.outdoors .b3-tab:not([data-tab=furniture]):not([data-tab=mons]) { display: none; }
.b3-talk {
  position: absolute; left: 50%; bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)); z-index: 4; translate: -50% 0;
  width: min(460px, calc(100% - 32px)); margin: 0; padding: 24px 22px 20px; box-sizing: border-box;
  border-radius: 26px / 22px; background: #fbf4df; color: #6a5440; font-size: 15px; line-height: 1.6; text-align: left;
  box-shadow: 0 3px 0 #d8c8a4, 0 6px 16px #0005; cursor: pointer;
}
.b3-talk[hidden] { display: none; }
.b3-talk.b3-say { animation: b3Pop 0.25s cubic-bezier(.3, 1.5, .5, 1); }
.b3-talk b {
  position: absolute; left: 18px; top: -15px; padding: 7px 14px; border-radius: 999px; font-weight: normal; font-size: 12px;
  background: #f0a0b0; color: #6a2a3a; rotate: -4deg; box-shadow: 0 2px 0 #c87888;
}
.b3-talk i {
  position: absolute; right: 18px; bottom: 8px; width: 0; height: 0;
  border: 6px solid transparent; border-top: 7px solid #e8a040; border-bottom: 0; animation: b3Nudge 0.8s ease-in-out infinite;
}
@keyframes b3Nudge { 50% { translate: 0 3px; } }
@media (prefers-reduced-motion: reduce) { .b3-talk.b3-say, .b3-talk i { animation: none; } }


/* the present's Decorate button, the rooms' gold pill */
.b3-gift .b3-done {
  height: 38px; padding: 0 18px; cursor: pointer; border: 2px solid #5a3a08; border-radius: 999px;
  background: linear-gradient(#fff3a0, #f8d030 45%, #e0a818); color: #3a2400; font: 12px/1 var(--pixel-font);
  text-transform: uppercase; box-shadow: inset 0 2px 0 #fffb, 0 3px 0 #5a3a08; -webkit-tap-highlight-color: transparent;
}
.b3-gift .b3-done:active { translate: 0 2px; box-shadow: inset 0 2px 0 #fffb, 0 1px 0 #5a3a08; }

/* decorating, the hint is the rooms' cream speech window */
.base3d .b3-hint {
  max-width: min(460px, calc(100% - 32px)); padding: 16px 22px; border-radius: 30px / 26px; background: #fbf4df; color: #6a5440;
  font-size: 15px; box-shadow: 0 3px 0 #d8c8a4, 0 6px 16px #0005;
}
@media (max-width: 360px) { .b3-tab, .b3-act { width: 40px; height: 40px; } :is(.b3-tab, .b3-act) .round-key { width: 36px; height: 36px; } .b3-hinge .mdex-lights { display: none; } }

/* tapped away (a tap anywhere else), it stays away until it says something new */
.base3d .b3-hint.hush { opacity: 0 !important; animation: none; }

/* ---------- the berry garden's Garden key and windows (2026-10-15; js/berry-garden.js) ---------- */
.b3-garden {
  position: absolute; left: calc(50% + 6px); bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  display: flex; align-items: center; gap: 8px; padding: 0 16px 0 8px; height: 50px; box-sizing: border-box;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 12px/1 var(--pixel-font);
  background: radial-gradient(circle at 30% 25%, #9ad86a, #4f9e3c 60%, #2f6a22);
  box-shadow: inset 0 0 0 2px #23501a, inset 0 2px 0 #fff4, 0 4px 0 #1a3c12, 0 6px 16px #0006;
  text-shadow: 0 1px 0 #1a3c12; -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s, translate 0.3s cubic-bezier(.3, 1.4, .5, 1);
}
.b3-garden[hidden] { display: none; }
.b3-garden svg { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: #fff3; box-shadow: inset 0 0 0 2px #fff5; }
.b3-garden:active { translate: 0 3px; box-shadow: inset 0 0 0 2px #23501a, 0 1px 0 #1a3c12; }
.base3d.has-garden .b3-decor { translate: calc(-100% - 6px) 0; }
.base3d.has-garden .b3-decor:active { translate: calc(-100% - 6px) 3px; }
@media (prefers-reduced-motion: reduce) { .b3-garden { transition: none; } }

/* the Garden window on Kurt's bench (js/berry-garden.js's openGarden(), 2026-10-17, the user's ask): the Workshop's
   craft-* look in css/screens.css, plus three tabs, a "?" for How to garden in Smeargle's bubble, stat chips with no
   bar, and small keys under the big button */
.dialog.craft.garden .craft-tabs { grid-template-columns: repeat(3, 1fr); }
.dialog.craft.garden .craft-head { align-items: center; }
.gd-q {
  flex: none; width: 32px; height: 32px; padding: 0; border: 2px solid #2a170c; border-radius: 50%; cursor: pointer;
  background: #c89a62; color: #3a2414; font: inherit; font-size: 0.8rem; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.gd-q.on { background: #ffd860; }
.dialog.craft .craft-say[hidden], .gd-help[hidden] { display: none; }
.dialog.craft .gd-help { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dialog.craft .gd-help li { display: grid; grid-template-columns: 22px 54px 1fr; align-items: center; gap: 6px; margin: 0; font-size: 0.75rem; line-height: 1.35; color: #5a3e28; }
.dialog.craft .gd-help b { font-weight: normal; color: #3a2414; }
.gd-help-ico { font-size: 1.1rem; line-height: 1; text-align: center; }
.dialog.craft.garden .craft-mats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.dialog.craft.garden .craft-mat { grid-template-columns: auto 1fr; grid-template-rows: auto auto 6px; }
.dialog.craft.garden .craft-mat-ico { grid-row: 1 / 4; }
.dialog.craft.garden :is(.craft-mat-n, .craft-bar) { grid-column: 2; }
.dialog.craft.garden .craft-mat.gd-flat { grid-template-rows: auto auto; }
.dialog.craft.garden .craft-mat.gd-flat .craft-mat-ico { grid-row: 1 / 3; }
.dialog.craft.garden .craft-mat-n { color: #8a5a28; }
.dialog.craft.garden .craft-mat.ok .craft-mat-n { color: #2a8a2a; }
.gd-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.gd-more:empty { display: none; }
.gd-more-btn {
  padding: 6px 12px; border: 2px solid #2a170c; border-radius: 999px; cursor: pointer; background: #fbf4df; color: #3a2414;
  font: inherit; font-size: 0.75rem; box-shadow: inset 0 -2px 0 #c8b088;
}
.gd-more-btn.warn { background: #f4d4c8; color: #8a2a1a; }
.gd-more-btn:active { translate: 0 2px; }
@media (max-width: 400px) {
  .dialog.craft.garden .craft-pic { width: 64px; height: 64px; }
  .dialog.craft.garden .craft-pic > * { width: 52px; height: 52px; }
}

/* a piece you haven't looked at yet: a gold "!" on its tile, its filter, the Furniture tab and the Decorate key, till it's tapped */
.b3-new, .b3-chip.fresh::after, .b3-tab.fresh::after, .b3-decor.fresh::after {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px;
  background: #ffd040; color: #3a1c0c; font: normal 12px/1 var(--pixel-font); box-shadow: 0 0 0 2px #3a1c0c, 0 0 8px #ffd040;
  animation: newsBob 0.8s ease-in-out infinite alternate; pointer-events: none;
}
.b3-new { top: 6px; left: 6px; }
.b3-chip.fresh::after, .b3-tab.fresh::after, .b3-decor.fresh::after { content: '!'; }
.b3-chip, .b3-tab { position: relative; }
.b3-chip.fresh { padding-right: 26px; }
.b3-chip.fresh::after { top: 7px; right: 6px; }
.b3-tab.fresh::after { top: 0; right: 0; }
.b3-decor.fresh::after { top: -6px; right: -6px; }
@media (prefers-reduced-motion: reduce) { .b3-new, .b3-chip.fresh::after, .b3-tab.fresh::after, .b3-decor.fresh::after { animation: none; } }