/* A reusable paper sticker book. Scenery is CSS; all animals are existing PNGs. */
.sb-screen { --sb-sticker-size: clamp(80px, 15vh, 130px); display: flex; flex-direction: column; gap: 14px; color: #315c50; background: radial-gradient(ellipse at 12% 0, #f4df9a42, transparent 48%), #faf4e5; overflow: hidden; }
.sb-header { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 22px); flex: 0 0 auto; min-width: 0; }
.sb-back { flex: 0 0 auto; width: 50px; height: 50px; border: 1.5px solid #ae8a68; border-radius: 18px; background: #fffaf0; color: #315c50; font-size: 27px; }
.sb-heading { flex: 1 1 auto; min-width: 0; }
.sb-heading h1 { margin: 0; white-space: nowrap; color: #315c50; font-size: clamp(23px, 3vw, 34px); letter-spacing: .04em; }
.sb-heading p { margin: 4px 0 0; color: #866c53; font-size: clamp(10px, 1.2vw, 13px); white-space: nowrap; }
.sb-pages, .sb-themes { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.sb-pages { border-radius: 18px; padding: 4px; background: #e9dfc93b; }
.sb-page { min-width: 48px; min-height: 48px; padding: 4px 12px; border: 1px solid transparent; border-radius: 13px; color: #7a6950; background: transparent; font-weight: 800; font-size: 23px; }
.sb-page.is-current { color: #fff8e9; background: #315c50; border-color: #315c50; box-shadow: 0 3px 0 #315c5022; }
.sb-themes { padding-left: 12px; border-left: 1px solid #ccb79588; }
.sb-theme { display: grid; justify-items: center; gap: 3px; min-width: 48px; min-height: 49px; padding: 4px; border: 0; border-radius: 12px; color: #776049; background: transparent; }
.sb-theme small { font-size: 10px; }
.sb-theme-preview { display: grid; place-items: center; width: 32px; height: 27px; overflow: hidden; border-radius: 10px; border: 1px solid #baa57e; font-size: 18px; }
.sb-preview-meadow { color: #66814d; background: linear-gradient(#fff6d9 53%, #bbd29d 54%); }
.sb-preview-night { color: #ffe6a0; background: #385b6e; }
.sb-preview-pond { color: #568f9c; background: linear-gradient(#ecf2d5 48%, #9fcdd0 49%); }
.sb-theme.is-current { background: #f4e9cb; color: #315c50; box-shadow: inset 0 0 0 1px #c8ad7c; }
.sb-body { display: grid; grid-template-columns: clamp(112px, 17vw, 182px) minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); flex: 1 1 auto; min-width: 0; min-height: 0; }
.sb-shelf { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding-right: 11px; border-right: 1px dashed #bea888; }
.sb-shelf h2 { margin: 0 0 9px; color: #80674f; font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.sb-palette { display: grid; align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 5px; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c3b694 transparent; touch-action: pan-y; padding: 3px; }
.sb-palette-button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 78px; padding: 5px 1px; border: 1.5px solid transparent; border-radius: 16px; color: #5d5944; background: transparent; touch-action: pan-y; }
.sb-palette-button img { display: block; width: 100%; height: clamp(43px, 9vh, 66px); object-fit: contain; pointer-events: none; user-select: none; }
.sb-palette-button > span { font-size: 11px; line-height: 1.15; white-space: nowrap; }
.sb-palette-button.is-selected { border-color: #688d6d; background: #e4edda; box-shadow: 0 3px 0 #61795016; }
.sb-palette-button.is-placed { background: #e9e6d94d; }
.sb-palette-button.is-placed img { opacity: .56; }
.sb-used-page { position: absolute; top: 0; right: 0; width: max-content; white-space: nowrap; padding: 2px 4px; border-radius: 6px; color: #596d57; background: #e5ebd8ed; font-size: 9px; line-height: 1.2; pointer-events: none; }
.sb-palette-button:active { background-color: #eee5c9; }
.sb-reuse-note { margin: auto 0 0; padding-top: 9px; color: #8d775c; font-size: 10px; line-height: 1.4; text-align: center; }
.sb-palette-empty { grid-column: 1 / -1; padding-top: 20px; text-align: center; color: #9a896a; }
.sb-palette-empty > span { font-size: 32px; color: #c4b285; }
.sb-palette-empty p { font-size: 12px; line-height: 1.7; }
.sb-workspace { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.sb-paper-frame { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; padding: 5px; border: 1.5px solid #b89d76; border-radius: 27px; background: #fffcf0; box-shadow: 0 5px 0 #685b3812, inset 0 0 0 2px #eee1bf61; }
.sb-board { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: 21px; isolation: isolate; touch-action: none; background: #fbf3dc; }
.sb-board:focus-visible { outline: 3px solid #4c929e; outline-offset: -4px; }
.sb-board.is-ready { cursor: crosshair; }
.sb-landscape { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: -1; }
.sb-landscape::before, .sb-landscape::after { content: ""; position: absolute; display: block; pointer-events: none; }
.theme-meadow { background: radial-gradient(ellipse at 45% 12%, #fffdf2 0, transparent 72%), #f9efd4; }
.theme-meadow .sb-landscape::before { left: -21%; bottom: -57%; width: 130%; height: 88%; border-radius: 50%; background: #d6dfb5; transform: rotate(5deg); }
.theme-meadow .sb-landscape::after { right: -25%; bottom: -62%; width: 100%; height: 97%; border-radius: 50%; background: #bbd1a3; transform: rotate(-13deg); }
.sb-sky-orb { position: absolute; width: clamp(25px, 6vh, 48px); aspect-ratio: 1; top: 10%; left: 8%; border-radius: 50%; background: #f3d9929c; }
.sb-stars, .sb-lily { display: none; }
.theme-night { background: radial-gradient(ellipse at 68% 16%, #638297 0, #3f6176 49%, #315363 100%); }
.theme-night .sb-landscape::before { width: 130%; height: 57%; left: -10%; bottom: -43%; border-radius: 50%; background: #2b5660; }
.theme-night .sb-landscape::after { width: 95%; height: 64%; right: -22%; bottom: -48%; border-radius: 50%; background: #254b54; }
.theme-night .sb-sky-orb { background: #fae7b4; left: 8%; top: 10%; box-shadow: 0 0 18px #ffedaf15; }
.theme-night .sb-sky-orb::after { content: ""; position: absolute; width: 84%; height: 84%; top: -10%; right: -17%; background: #4a6c80; border-radius: 50%; }
.theme-night .sb-stars { display: block; position: absolute; top: 14%; left: 48%; color: #e1dca6; font-size: 14px; text-shadow: 94px 34px 0 #e8dea7, -90px 47px 0 #d8ddb1, 33px 63px 0 #c9d9c2; opacity: .65; }
.theme-pond { background: radial-gradient(ellipse at 55% 7%, #fffcee 0, transparent 78%), #edf2d8; }
.theme-pond .sb-landscape::before { width: 86%; height: 79%; left: 30%; bottom: -42%; border: 4px solid #d6e4c1; border-radius: 50%; background: #a8cdd0; box-shadow: inset 0 10px 0 #cce4db6b; transform: rotate(-9deg); }
.theme-pond .sb-landscape::after { left: -15%; bottom: -39%; width: 79%; height: 68%; border-radius: 50%; background: #cbdda9; transform: rotate(10deg); }
.theme-pond .sb-sky-orb { width: 24px; background: #f4e4ad88; }
.theme-pond .sb-lily { display: block; position: absolute; bottom: 7%; right: 13%; width: 28px; height: 11px; border-radius: 50%; background: #7caa8e; transform: rotate(-17deg); }
.sb-sticker { --sb-edge: calc(var(--sb-sticker-size) * var(--sb-edge-factor, .5) + 4px); position: absolute; display: grid; place-items: center; width: var(--sb-sticker-size); height: var(--sb-sticker-size); margin: 0; padding: 4px; border: 0; border-radius: 20%; color: inherit; background: transparent; touch-action: none; cursor: grab; transform-origin: center; overflow: visible; }
.sb-sticker img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 1px #263c2520); user-select: none; }
.sb-sticker.is-selected { outline: 2px dashed #537e62; outline-offset: 3px; background: #ffffff18; }
.theme-night .sb-sticker.is-selected { outline-color: #fce6a0; }
.sb-sticker:active { cursor: grabbing; }
.sb-sticker.rarity-rare img, .sb-palette-button.rarity-rare img { filter: drop-shadow(0 0 2px #f0c764) drop-shadow(1px 1px 0 #fff2bd); }
.sb-sticker.rarity-super::before { content: ""; position: absolute; inset: 2px; border-radius: 43%; border: 2px solid #e1c568; box-shadow: 0 0 0 2px #fff1b95c, inset 0 0 9px #fff5cb54; pointer-events: none; }
.sb-sticker.rarity-super img, .sb-palette-button.rarity-super img { filter: drop-shadow(1px 0 1px #e3b76c) drop-shadow(-1px 0 1px #b7d4bd); }
.sb-foil-spark { position: absolute; top: 2px; right: 1px; color: #b59743; font-style: normal; font-size: 12px; pointer-events: none; }
.sb-first-page { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 13px 20px; pointer-events: none; text-align: center; color: #766d50; }
.sb-first-flower { font-size: clamp(28px, 6vh, 51px); line-height: 1; color: #c5b583; opacity: .6; }
.sb-first-page p { margin: 0; font-size: clamp(15px, 2.2vh, 21px); line-height: 1.6; letter-spacing: .015em; }
.sb-first-page small { font-size: 11px; color: #968267; }
.theme-night .sb-first-page, .theme-night .sb-first-page small { color: #e4e9d2; }
.theme-night .sb-first-flower { color: #dfd5a8; }
.sb-gacha-link { pointer-events: auto; min-height: 48px; margin-top: 3px; padding: 8px 23px; border: 0; border-radius: 17px; background: #315c50; color: #fff8e6; font-weight: 800; font-size: 17px; }
.theme-night .sb-gacha-link { background: #f3d894; color: #314f4b; }
.sb-page-count { position: absolute; right: 14px; top: 13px; padding: 3px 7px; color: #6e7861; background: #ffffedaf; border-radius: 10px; pointer-events: none; font-size: 11px; }
.sb-capacity { position: absolute; bottom: 8px; right: 9px; left: 9px; margin: 0; padding: 5px 10px; border-radius: 12px; color: #5d624b; background: #ffffeacb; font-size: 11px; text-align: center; pointer-events: none; }
.sb-capacity span { margin-left: 7px; }
.sb-editbar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; min-height: 48px; overflow-x: auto; scrollbar-width: thin; }
.sb-edit-invitation { flex: 1 1 auto; min-width: 0; margin: 0; color: #927b59; font-size: 12px; line-height: 1.5; }
.sb-pick-hint strong { color: #315c50; }
.sb-selected-name { flex: 0 0 auto; min-width: 42px; color: #80684f; font-size: 12px; }
.sb-edit-group { display: flex; gap: 3px; flex: 0 0 auto; }
.sb-edit-group + .sb-edit-group { padding-left: 7px; border-left: 1px solid #c6b997; }
.sb-tool { display: grid; place-content: center; justify-items: center; gap: 0; width: 48px; height: 48px; padding: 2px; border: 1px solid transparent; border-radius: 12px; background: #f0e7cf; color: #47654d; }
.sb-tool b { font-size: 23px; line-height: 1.05; font-weight: 600; }
.sb-tool small { font-size: 9px; line-height: 1.25; }
.sb-return-one { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 7px 9px; border: 0; border-radius: 12px; background: transparent; color: #856e53; font-size: 12px; }
.sb-return-one span { font-size: 21px; }
.sb-undo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 86px; min-height: 48px; margin-left: auto; padding: 7px 10px; border: 1px solid #ccb994; border-radius: 13px; color: #7d664b; background: #fff8e8; }
.sb-undo > span { font-size: 21px; }
.sb-undo small { font-size: 11px; white-space: nowrap; }
.sb-save-note { position: absolute; left: 15px; right: 15px; top: 70px; z-index: 50; margin: 0; padding: 8px 14px; border: 1px solid #bf9574; border-radius: 13px; color: #774e37; background: #fff1d8f2; font-size: 12px; }
.sb-message { border-color: #a7b591; background: #f4f6e6f2; color: #486347; pointer-events: none; }
.sb-drag-ghost { position: fixed; z-index: 70; pointer-events: none; width: var(--sb-sticker-size, 64px); height: var(--sb-sticker-size, 64px); transform: translate(-50%, -50%); filter: drop-shadow(0 5px 3px #27463038); }
.sb-drag-ghost img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sb-board.is-drop-ready { box-shadow: inset 0 0 0 3px #709b70; }
@media (max-height: 480px) {
  .sb-screen { gap: 7px; }
  .sb-header { gap: 10px; }
  .sb-back { width: 48px; height: 48px; border-radius: 15px; }
  .sb-heading h1 { font-size: 23px; }
  .sb-heading p { margin-top: 2px; font-size: 10px; }
  .sb-pages { padding: 2px; gap: 3px; }
  .sb-page { min-height: 48px; min-width: 48px; font-size: 21px; padding-inline: 8px; }
  .sb-themes { padding-left: 8px; gap: 2px; }
  .sb-theme { min-height: 48px; min-width: 48px; padding: 2px; gap: 1px; }
  .sb-theme-preview { width: 28px; height: 25px; }
  .sb-body { gap: 11px; grid-template-columns: 111px minmax(0, 1fr); }
  .sb-shelf { padding-right: 8px; }
  .sb-shelf h2 { font-size: 13px; margin-bottom: 4px; }
  .sb-palette { gap: 4px 1px; padding: 2px; }
  .sb-palette-button { min-height: 63px; padding: 2px 0; border-radius: 12px; }
  .sb-palette-button img { height: 43px; }
  .sb-palette-button > span { font-size: 9px; }
  .sb-used-page { font-size: 8px; padding-inline: 3px; }
  .sb-reuse-note { font-size: 9px; padding-top: 4px; }
  .sb-paper-frame { padding: 4px; border-radius: 20px; }
  .sb-board { border-radius: 15px; }
  .sb-workspace { gap: 5px; }
  .sb-editbar { min-height: 48px; gap: 5px; }
  .sb-tool { width: 48px; height: 48px; }
  .sb-selected-name { font-size: 11px; min-width: 36px; }
  .sb-return-one { padding-inline: 5px; font-size: 11px; }
  .sb-undo { min-width: 79px; padding-inline: 7px; }
  .sb-first-page { gap: 4px; padding: 7px 12px; }
  .sb-first-page p { font-size: 15px; line-height: 1.45; }
  .sb-first-page small { font-size: 10px; }
  .sb-first-flower { font-size: 27px; }
  .sb-no-stickers .sb-first-flower { display: none; }
}
@media (max-width: 700px) {
  .sb-screen { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
  .sb-heading h1 { font-size: 20px; letter-spacing: 0; }
  .sb-heading p { font-size: 9px; }
  .sb-header { gap: 8px; }
  .sb-body { grid-template-columns: 99px minmax(0, 1fr); gap: 9px; }
  .sb-shelf { padding-right: 6px; }
  .sb-pages { gap: 1px; }
  .sb-page { min-width: 48px; }
  .sb-themes { padding-left: 5px; }
  .sb-theme { min-width: 48px; }
  .sb-edit-invitation { font-size: 11px; }
  .sb-selected-name { display: none; }
  .sb-capacity { font-size: 10px; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .sb-header { flex-wrap: wrap; gap: 7px; }
  .sb-heading { flex-basis: calc(100% - 58px); }
  .sb-pages { margin-left: 0; }
  .sb-themes { margin-left: auto; }
  .sb-body { grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
  .sb-palette { grid-template-columns: 1fr; }
  .sb-editbar { flex-wrap: wrap; }
  .sb-tool { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-screen *, .sb-drag-ghost { scroll-behavior: auto !important; }
}