* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { min-height: 100vh; padding: 24px 90px; font-family: Poppins, sans-serif; background: #fff; color: #423c3b; display: grid; place-items: center; }
.wrapper { width: min(600px, 100%); }
h1 { text-align: center; margin-bottom: 20px; font-size: clamp(1.5rem, 4vw, 2rem); }
.message-grid { min-height: 440px; }.envelope-card { position: relative; width: 100%; }.card-top-controls { min-height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 16px; }.card-content { height: 400px; position: relative; perspective: 800px; cursor: pointer; }
.envelope, .letter { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; transition: transform .6s, opacity .6s; }
.envelope { background: #e5e7eb; display: grid; place-items: center; transform-origin: bottom; z-index: 2; }.center-text { font-weight: 600; }
.envelope-decoration { position: absolute; top: 0; left: 0; width: 120px; height: 120px; object-fit: contain; object-position: top left; }.envelope-icon { position: absolute; right: 0; bottom: 0; width: 180px; }
.letter { background: #f8eee0; padding: 24px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; transform: rotateX(90deg); transform-origin: top; opacity: 0; pointer-events: none; z-index: 1; }.letter::-webkit-scrollbar { width: 0; height: 0; }.letter-message { margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.65; }
.envelope-card.open .envelope { transform: rotateX(-90deg); opacity: 0; pointer-events: none; }.envelope-card.open .letter { transform: rotateX(0); opacity: 1; pointer-events: auto; }
.card-number { width: 46px; height: 46px; border-radius: 50%; background: #423c3b; color: white; display: grid; place-items: center; font-weight: 600; font-size: 18px; box-shadow: 0 4px 8px rgba(66,60,59,.3); }
.refresh-btn { justify-self: start; border: 0; border-radius: 8px; padding: 12px 20px; color: #fff; background: #423c3b; font: 600 14px Poppins, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 2px 6px rgba(66,60,59,.3); }.refresh-btn:hover { background: #595352; transform: translateY(-2px); }.refresh-icon { font-size: 20px; line-height: 1; }.refresh-btn:hover .refresh-icon { animation: spin .6s ease-in-out; }@keyframes spin { to { transform: rotate(360deg); } }
.new-message-badge { justify-self: end; border: 0; border-radius: 999px; padding: 9px 14px; color: #fff; background: linear-gradient(135deg, #ff4444, #cc0000); box-shadow: 0 4px 12px rgba(255,68,68,.4); font: 600 14px Poppins, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; animation: badgePulse 2s infinite; }.new-message-badge[hidden] { display: none; }.badge-icon { font-size: 18px; }@keyframes badgePulse { 50% { box-shadow: 0 4px 20px rgba(255,68,68,.8); } }
.media-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }.media-button { width: 82px; height: 82px; border: 0; border-radius: 18px; background: #423c3b; padding: 10px; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; box-shadow: 0 3px 7px rgba(66,60,59,.25); }.media-button:hover { transform: translateY(-2px); }.media-button:focus-visible, .nav-btn:focus-visible { outline: 3px solid #8b7f7b; outline-offset: 3px; }.media-button.is-opened { background: #bcbcbc; }.media-button img { width: 100%; height: 100%; object-fit: contain; }
.nav-btn { position: fixed; top: 50%; z-index: 10; transform: translateY(-50%); border: 0; border-radius: 8px; padding: 14px 19px; color: #fff; background: #423c3b; font-size: 22px; cursor: pointer; }.nav-btn.left { left: max(16px, 10vw); }.nav-btn.right { right: max(16px, 10vw); }.status-message { min-height: 1.5em; margin-top: 12px; text-align: center; font-size: .85rem; color: #746c6b; }
.media-modal { display: none; position: fixed; inset: 0; z-index: 100; padding: 56px 24px 24px; background: rgba(0,0,0,.9); align-items: center; justify-content: center; }.modal-media { display: grid; place-items: center; width: min(90vw, calc((100vh - 100px) * 16 / 9), 1100px); aspect-ratio: 16 / 9; overflow: hidden; background: #111; }.modal-content { display: block; width: 100%; height: 100%; object-fit: contain; }.modal-media iframe { display: block; width: 100%; height: 100%; border: 0; background: #111; }.close-modal { position: absolute; right: 22px; top: 12px; border: 0; background: transparent; color: #fff; font-size: 42px; line-height: 1; cursor: pointer; }
@media (max-width: 700px) { body { padding: 18px 54px; }.message-grid { min-height: 410px; }.card-top-controls { min-height: 56px; margin-bottom: 10px; gap: 6px; }.card-content { height: min(400px, 65vh); }.nav-btn.left { left: 8px; }.nav-btn.right { right: 8px; }.envelope-decoration { width: 95px; height: 95px; }.envelope-icon { width: 130px; }.letter { padding: 18px; }.refresh-btn { padding: 9px 10px; font-size: 11px; gap: 4px; }.refresh-icon { font-size: 16px; }.card-number { width: 40px; height: 40px; font-size: 16px; }.new-message-badge { padding: 7px 9px; font-size: 11px; gap: 4px; }.badge-icon { font-size: 15px; }.media-button { width: 70px; height: 70px; border-radius: 15px; } }