/* Storybook preview surfaces. Existing geometry and interaction rules stay in
   the game stylesheet. No positioning, sizing, transforms, or animation rules. */

button.ui {
  border-color: #fffaf0;
  background:
    radial-gradient(ellipse at 30% 18%, #fffdf7 0, rgba(255,253,247,.55) 24%, transparent 55%),
    radial-gradient(ellipse at 68% 86%, rgba(199,153,90,.20), transparent 62%),
    linear-gradient(140deg, #fff9eb 8%, #f8e9cd 74%, #eddbb8);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95),
    inset 0 0 0 3px rgba(218,186,139,.30),
    inset 0 -5px 9px rgba(173,132,80,.16),
    0 6px 0 rgba(134,104,70,.72),
    0 10px 15px rgba(73,48,26,.21);
}

button.ui > svg {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.82)) drop-shadow(0 1px 1px rgba(27,45,66,.18));
}

button.ui > svg [fill="#3a4562"] {
  fill: #2c4664;
}

button.ui > svg [stroke="#3a4562"] {
  stroke: #2c4664;
}

#btnDart,
#btnBalloon,
#btnDayNight,
#btnDance,
#btnDanceInside {
  background:
    radial-gradient(ellipse at 31% 18%, #fffef9 0, rgba(255,253,247,.5) 30%, transparent 60%),
    radial-gradient(ellipse at 70% 88%, rgba(215,177,117,.20), transparent 62%),
    linear-gradient(145deg, #fff9ec, #f7e8cb);
}

#btnDone {
  background:
    radial-gradient(ellipse at 29% 18%, rgba(255,225,168,.83), transparent 44%),
    linear-gradient(140deg, #f5a15f 6%, #e98543 64%, #d97634);
  border-color: #fff6df;
}

#btnDone > svg [fill="#fdf3df"] {
  fill: #fff8e3;
}

#btnDone .finishLabel {
  background: linear-gradient(160deg, #385674, #263e59);
  color: #fff9ed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19), 0 4px 0 #23374b;
}

#coach,
#insideHint {
  background:
    radial-gradient(ellipse at 23% 8%, rgba(255,255,255,.81), transparent 60%),
    linear-gradient(115deg, #fcf3e2, #f4e3c5);
  color: #304a65;
  border-color: #fffaf1;
  box-shadow:
    inset 0 0 0 2px rgba(193,154,104,.24),
    inset 0 -3px 6px rgba(179,131,71,.12),
    0 5px 0 rgba(136,101,58,.55),
    0 9px 18px rgba(63,41,21,.16);
}

#adventureCard {
  background: linear-gradient(130deg, #30475f, #4c5d70);
  color: #fff8e8;
  border-color: #f8e9ce;
  box-shadow:
    inset 0 0 0 2px rgba(255,247,220,.12),
    0 6px 0 rgba(72,61,48,.48),
    0 10px 20px rgba(43,30,18,.20);
}

.adventureCopy small {
  color: #f5e5c6;
}

.adventureMoon {
  background: radial-gradient(circle at 34% 24%, #fff5cc, #edc27b 67%, #cf9b55);
  box-shadow: inset 0 0 0 2px rgba(255,250,224,.64), 0 2px 5px rgba(28,32,37,.18);
}

#toast {
  background: linear-gradient(150deg, #3b526a, #2c4056);
  color: #fff6e5;
  box-shadow: inset 0 1px 0 rgba(255,247,225,.18), 0 5px 14px rgba(48,32,17,.26);
}

/* These are decorative card rectangles, not the first invisible hit rectangle.
   Ancestor opacity, selected glow, hover motion, and coach pulse still apply. */
#trayItems [data-slot] > .slotCard:nth-child(2) {
  fill: #6d4428;
  fill-opacity: .78;
}

#trayItems [data-slot] > .slotCard:nth-child(3) {
  fill: #f2d3a2;
  stroke: #fcebd0;
  fill-opacity: .88;
  stroke-opacity: .88;
}

#settingsCard,
#galleryCard {
  background:
    radial-gradient(ellipse at 12% 0, rgba(255,255,255,.66), transparent 64%),
    linear-gradient(115deg, #fff6e5, #f3e2c3);
  color: #304a65;
  box-shadow:
    inset 0 0 0 2px rgba(255,252,241,.90),
    inset 0 0 0 6px rgba(181,139,86,.12),
    0 15px 44px rgba(39,24,12,.35);
}

#settingsCard {
  border-color: #fffaf0;
}

#galleryCard h2,
#galleryCard h3.sectionTitle,
#cheerBox h3 {
  color: #304a65;
}

.settingsTheme,
.settingsToggle,
.badgeCard {
  background: linear-gradient(145deg, #fffbf1, #f6e8cf);
  border-color: #d9c29f;
  color: #304a65;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 4px 0 rgba(145,111,70,.20);
}

.settingsGlyph {
  background: linear-gradient(140deg, #f6e3bd, #e9d1a7);
  box-shadow: inset 0 0 0 1px rgba(255,248,225,.66);
}

.settingsState {
  background: #7b7c78;
}

#settingsClose,
#galleryClose {
  background: linear-gradient(140deg, #f2a266, #df8649);
  color: #fffaf0;
  box-shadow: inset 0 2px 0 rgba(255,233,195,.58), 0 5px 0 #b77845;
}

.badgeCard.won {
  background: linear-gradient(145deg, #fff8df, #f4dfad);
  border-color: #dba46b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 5px 0 rgba(152,108,54,.22);
}

.adventureBookCard {
  background: linear-gradient(115deg, #fff5de, #f0dfbf);
  border-color: #d5ba93;
  color: #304a65;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 5px 13px rgba(96,66,35,.15);
}

.adventureBookCard:not(.won) .adventureBookCopy span {
  color: #68573f;
}

.adventureBookCard.won {
  color: #fff8dc;
}

.adventureBookCard:not(.won) .adventureStamp {
  border-color: #d3b88f;
  background: rgba(255,251,239,.64);
}

.adventureAction {
  background: linear-gradient(145deg, #ffe7ae, #edc480);
  color: #304a65;
  border-color: #fffae9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 3px 0 rgba(121,88,47,.30);
}

.polaroid {
  background: #fffdf4;
  box-shadow: inset 0 0 0 1px #eadcc4, 0 5px 12px rgba(101,70,37,.23);
}

.polaroid .del,
#cheerBtns button {
  background: linear-gradient(150deg, #3c5570, #2d435b);
  color: #fff7e7;
}

#cheerBox {
  border-top-color: #c3a67c;
}

#rotateNote {
  background: radial-gradient(ellipse at 48% 30%, #fff7e8, #ead0a4);
  color: #304a65;
}

#rotateCard {
  background: linear-gradient(145deg, #fff9ec, #f5e4c8);
  border-color: #fffaf1;
  box-shadow: inset 0 0 0 2px rgba(191,150,97,.20), 0 12px 28px rgba(114,80,42,.19);
}