/* Piccoli pensieri per Tiziana. Tutto è confinato ai componenti abilitati
   dal server: nessun cambio di stile agli altri quaderni. */
.surprise-trigger, .surprise-dialog, .surprise-settings { --gift-ink: #463a36; --gift-rose: #954f59; --gift-paper: #fffaf2; --gift-muted: #75605a; }
.surprise-trigger { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 48px; margin: 14px 0 0; padding: 10px 14px; border: 1px solid #d7bdb4; border-radius: 12px 12px 12px 3px; background: var(--gift-paper); color: var(--gift-ink); font-family: inherit; font-size: .85rem; font-weight: 500; line-height: 1.4; text-align: left; overflow-wrap: anywhere; cursor: pointer; box-sizing: border-box; }
.surprise-trigger .ui-icon, .book-cover .surprise-trigger .ui-icon { width: 24px; height: 24px; opacity: 1; flex: 0 0 24px; color: var(--gift-rose); }
.surprise-trigger-mark { color: var(--gift-rose); margin-left: auto; font-size: 1.25rem; }
.surprise-trigger:hover { border-color: #a77372; background: #fcefe5; }
.surprise-trigger:focus-visible, .surprise-dialog :focus-visible, .surprise-settings :focus-visible { outline: 3px solid var(--blu, #285ea0); outline-offset: 4px; }
.surprise-trigger-segnalibro { align-self: start; background: #f4dbb0; border-color: #f4dbb0; border-radius: 3px 3px 12px 3px; }
.surprise-trigger-radici { background: #f5f7ed; border-color: #b4c6a8; }
.surprise-trigger-radici .ui-icon { color: #4d744b; }
.surprise-trigger-caffe { display: flex; width: fit-content; margin: 0 0 24px; }
.surprise-trigger[data-motion='true'] .ui-icon { transition: transform .2s ease; }
.surprise-trigger[data-motion='true']:hover .ui-icon { transform: rotate(-8deg); }
.surprise-dialog { box-sizing: border-box; width: min(580px, calc(100vw - 32px)); max-width: calc(100vw - 16px); max-height: calc(100dvh - 32px); padding: 0; margin: auto; border: 1px solid #d6bdb0; border-radius: 22px; background: var(--gift-paper); color: var(--gift-ink); overflow: auto; overscroll-behavior: contain; box-shadow: 0 24px 100px #2c251e33; }
.surprise-dialog *, .surprise-settings * { box-sizing: border-box; }
.surprise-dialog::backdrop { background: #2b3129a3; }
body:has(.surprise-dialog[open]) { overflow: hidden; }
.surprise-dialog-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px 8px 24px; border-bottom: 1px solid #ecdfd4; background: var(--gift-paper); }
.surprise-dialog-top p { margin: 0; color: var(--gift-muted); font-size: .75rem; line-height: 1.4; letter-spacing: .07em; overflow-wrap: anywhere; }
.surprise-close { flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid #ddc9bd; border-radius: 50%; color: var(--gift-ink); background: #fffdfa; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.surprise-dialog-content { padding: 24px 36px 28px; text-align: center; }
.surprise-dialog-content p, .surprise-dialog-content h2 { overflow-wrap: anywhere; }
.surprise-eyebrow { font-size: .7rem; line-height: 1.5; letter-spacing: .07em; color: var(--gift-muted); margin: 0 0 12px; }
.surprise-dialog h2 { font: 400 clamp(1.6rem, 4vw, 2rem)/1.15 Georgia, 'Times New Roman', serif; letter-spacing: -.035em; margin: 0; color: #65414a; }
.surprise-interaction { margin: 0 0 28px; }
.surprise-message p { font-size: .95rem; line-height: 1.7; margin: 0 0 14px; }
.surprise-signature { font-size: .85rem; color: var(--gift-muted); margin: 24px 0; }
.surprise-signature span { display: block; margin-top: 5px; font: italic 1.5rem/1.3 Georgia, serif; color: var(--gift-rose); }
.surprise-play, .surprise-back { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 14px 18px; font-family: inherit; font-size: .9rem; line-height: 1.4; border: 1px solid #d6bdb0; border-radius: 12px; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.surprise-play { background: #854650; border-color: #854650; color: #fff; font-weight: 600; }
.surprise-play:hover { background: #713640; }
.surprise-back { color: var(--gift-muted); background: transparent; border-color: transparent; margin-top: 10px; text-decoration: underline; text-underline-offset: 4px; }
.surprise-response { font-size: .95rem; line-height: 1.6; color: #68404a; margin: 16px 0 0; padding: 14px; border-radius: 12px; background: #f6e7dc; }
.surprise-response:empty { display: none; }
.surprise-small { font-size: .8rem; line-height: 1.6; color: var(--gift-muted); }
.surprise-scene { position: relative; width: 230px; max-width: 100%; height: 186px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; gap: 24px; isolation: isolate; }
.surprise-scene::before { content: ''; position: absolute; inset: 30px 24px 10px; border-radius: 50%; background: #f3e8db; z-index: -1; }
.surprise-scene .ui-icon { width: 40px; height: 40px; }
.surprise-envelope { position: absolute; width: 154px; height: 99px; bottom: 15px; left: calc(50% - 77px); border: 1px solid #cda394; border-radius: 6px; background: linear-gradient(33deg, #e9bca9 49%, #f3d4bc 50%); box-shadow: 0 6px 12px #9e76621c; }
.surprise-envelope .ui-icon { width: 100%; height: 100%; stroke-width: .5; color: #be8b78; }
.surprise-letter { position: absolute; display: grid; place-items: center; width: 126px; height: 96px; bottom: 50px; border: 1px solid #e3cfc0; border-radius: 4px; background: #fffdf8; color: #a45a65; transform: rotate(-4deg); }
.surprise-letter .ui-icon { fill: #e8bbc0; }
.surprise-scene-lettera:not([data-step='0']) .surprise-letter { transform: translateY(-22px) rotate(-7deg); }
.surprise-bookmark { position: relative; width: 82px; height: 146px; transform-style: preserve-3d; transform: rotate(-6deg); }
.surprise-bookmark-front, .surprise-bookmark-back { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 83%, 0 100%); border-radius: 7px 7px 0 0; background: #dfba86; color: #684c31; }
.surprise-bookmark-back { transform: rotateY(180deg); background: #e7b7ba; color: #854650; }
.surprise-bookmark-back .ui-icon { fill: #854650; }
.surprise-scene-segnalibro.is-turned .surprise-bookmark { transform: rotateY(180deg) rotate(-6deg); }
.surprise-polaroid { width: 128px; height: 151px; padding: 10px 10px 26px; position: relative; border: 1px solid #deccbd; border-radius: 3px; background: #fff; box-shadow: 3px 5px 0 #d7c8b645; transform: rotate(-5deg); }
.surprise-smile { display: flex; justify-content: center; align-items: center; gap: 18px; position: relative; width: 100%; height: 100%; border-radius: 50%; background: #f1cf87; color: #674d30; font-size: 1.6rem; opacity: .35; }
.surprise-smile span { padding-bottom: 20px; }
.surprise-smile i { position: absolute; left: 31%; bottom: 25%; width: 38%; height: 20%; border-bottom: 3px solid #674d30; border-radius: 0 0 50% 50%; }
.surprise-polaroid-heart { position: absolute; bottom: 0; left: 0; right: 0; font: 26px/1 Georgia, serif; color: #9c515d; }
.surprise-scene-sorriso:not([data-step='0']) .surprise-smile { opacity: 1; }
.surprise-scene-sorriso.is-turned .surprise-polaroid { transform: rotate(4deg); }
.surprise-stem { position: absolute; bottom: 22px; left: calc(50% - 2px); width: 5px; height: 122px; background: #749264; border-radius: 90% 0 0 0; transform: rotate(12deg); }
.surprise-stem::before, .surprise-stem::after { content: ''; position: absolute; top: 46px; width: 54px; height: 3px; background: #749264; transform: rotate(35deg); transform-origin: left; }
.surprise-stem::after { width: 50px; top: 78px; transform: rotate(220deg); }
.surprise-scene .surprise-leaf { position: absolute; width: 55px; height: 55px; left: calc(50% - 57px); bottom: 29px; color: #617e4e; fill: #d1dcba; transform: rotate(32deg); }
.surprise-blossom { position: absolute; color: #af6c79; transform: scale(.45); opacity: .18; }
.surprise-blossom .ui-icon { width: 38px; height: 38px; fill: #e7b6bf; }
.surprise-blossom-0 { top: 19px; left: calc(50% - 10px); }
.surprise-blossom-1 { top: 68px; right: 38px; }
.surprise-blossom-2 { top: 87px; left: 43px; }
.surprise-scene-radici:not([data-step='0']) .surprise-blossom-0,
.surprise-scene-radici:is([data-step='2'], [data-step='3']) .surprise-blossom-1,
.surprise-scene-radici[data-step='3'] .surprise-blossom-2 { transform: scale(1); opacity: 1; }
.surprise-cup { display: flex; align-items: center; flex-direction: column; gap: 4px; position: relative; margin-top: 10px; color: #a06050; font: italic 1rem/1.4 Georgia, serif; }
.surprise-cup .ui-icon { width: 66px; height: 66px; fill: #edc9ad; stroke-width: 1.1; }
.surprise-cup:last-child { color: #537453; }
.surprise-cup:last-child .ui-icon { fill: #d4dfbf; }
.surprise-steam { position: absolute; bottom: calc(100% - 10px); color: #aa9c8c; font: 42px/1 Georgia, serif; opacity: 0; }
.surprise-scene-caffe:not([data-step='0']) .surprise-steam { opacity: .8; }
.surprise-sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.surprise-sparkles i { position: absolute; top: 90px; left: calc(22px + var(--i) * 31px); color: #a45a65; font: normal 25px/1 Georgia, serif; opacity: 0; }
.surprise-settings .surprise-preferences { border: 0; padding: 0; margin: 0; min-width: 0; }
.surprise-preferences legend { font-size: 1rem; font-weight: 600; line-height: 1.4; margin-bottom: 18px; }
.surprise-preferences label { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px; border: 1px solid #dbcbbb; border-radius: 12px; margin: 10px 0 0; cursor: pointer; }
.surprise-preferences label:has(input:checked) { background: #f8eee3; border-color: #a77868; }
.surprise-preferences input { width: 24px; height: 24px; flex: 0 0 24px; accent-color: #854650; }
.surprise-preferences strong { display: block; font-size: .9rem; line-height: 1.4; }
.surprise-preferences small { display: block; font-size: .8rem; line-height: 1.5; margin-top: 4px; color: var(--gift-muted); }
.surprise-settings summary { min-height: 48px; padding: 12px 0; cursor: pointer; font-size: .85rem; }
.surprise-settings details p, .surprise-preference-status { font-size: .85rem; line-height: 1.6; }
.surprise-preference-status:empty { display: none; }
.surprise-dialog[data-motion='true'][open] { animation: gift-arrives .32s ease-out both; }
.surprise-dialog[data-motion='true'] :is(.surprise-letter, .surprise-bookmark, .surprise-polaroid, .surprise-smile, .surprise-blossom) { transition: transform .5s ease, opacity .5s ease; }
.surprise-dialog[data-motion='true'] .surprise-sparkles i { animation: gift-hearts 1.2s ease-out calc(var(--i) * .025s) both; }
.surprise-dialog[data-motion='true'] .surprise-scene-caffe:not([data-step='0']) .surprise-steam { animation: gift-steam 1.6s ease-out 2; }
@keyframes gift-arrives { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gift-hearts { 0% { opacity: 0; transform: translateY(15px) scale(.7); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-72px) scale(1.2); } }
@keyframes gift-steam { from { opacity: .6; transform: translateY(0); } to { opacity: 0; transform: translateY(-18px); } }
@media (max-width: 699px) {
  .surprise-trigger { font-size: .85rem; padding: 10px 12px; }
  .surprise-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 20px; }
  .surprise-dialog-content { padding: 20px 20px max(20px, env(safe-area-inset-bottom)); }
  .surprise-dialog-top { padding-left: 20px; }
  .surprise-dialog h2 { font-size: 1.65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .surprise-dialog[open], .surprise-dialog *, .surprise-trigger * { animation: none !important; transition: none !important; }
}