/* Offline forest-friend rewards. All illustrations are existing learning assets. */
.rw-screen { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 18px); background: radial-gradient(ellipse at 3% 10%, #f9e9b778, transparent 40%), linear-gradient(145deg, #fff9ea, #f5f4df); overflow: hidden; }
.rw-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; }
.rw-header h1, .rw-header p, .rw-album-heading h2, .rw-album-heading p { margin: 0; }
.rw-header h1 { color: #315c50; font-size: clamp(20px, 3.2vw, 34px); letter-spacing: .045em; }
.rw-header p { color: #8d7159; font-size: clamp(12px, 1.4vw, 15px); margin-top: 4px; }
.rw-back { min-width: 82px; min-height: 48px; padding: 9px 13px; border: 1.5px solid #b49071; border-radius: 18px; background: #fffcf4; color: #315c50; font-weight: 800; font-size: 17px; }
.rw-header > div { flex: 1; }
.rw-count { color: #315c50; border: 1px solid #c9d7c0; background: #fffdf6; border-radius: 20px; padding: 9px 14px; font-size: clamp(15px, 2vw, 22px); font-weight: 800; white-space: nowrap; }
.rw-body { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(0, 1.8fr); gap: clamp(12px, 2.5vw, 34px); flex: 1; min-height: 0; }
.rw-draw-area { display: flex; flex-direction: column; align-items: center; min-height: 0; justify-content: center; border-radius: 28px; background: radial-gradient(ellipse at 50% 45%, #e2e9ce91 0%, #e2e9ce52 40%, transparent 68%); }
.rw-machine-scene { flex: 1 1 auto; min-height: 60px; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rw-machine-trigger { padding: 8px; border: 0; border-radius: 24px; background: transparent; }
.rw-machine-trigger:disabled { opacity: 1; }
.rw-machine-trigger:not(:disabled):active .rw-machine-handle { transform: rotate(45deg); }
.rw-machine { position: relative; aspect-ratio: .79; height: min(100%, 300px); max-width: 78%; filter: drop-shadow(0 8px 0 #53684915); }
.rw-machine-top { position: absolute; left: 8%; top: 0; width: 84%; height: 59%; border: 4px solid #a87c54; border-radius: 46% 46% 23% 23%; overflow: hidden; background: linear-gradient(135deg, #ffffffbd, #fff2c994); box-shadow: inset 0 0 0 6px #fffcf169; }
.rw-machine-shine { position: absolute; left: 13%; top: 9%; height: 30%; width: 11%; background: #ffffffe0; border-radius: 100%; transform: rotate(24deg); }
.rw-capsule { display: block; position: absolute; height: 31%; width: 34%; border: 2px solid #a18157; border-radius: 50%; background: linear-gradient(0deg, #fbf4de 49%, #82ad97 51%); box-shadow: inset 3px 3px 0 #ffffff77; }
.rw-capsule-a { bottom: 7%; left: 7%; transform: rotate(-25deg); }
.rw-capsule-b { bottom: 7%; right: 7%; transform: rotate(35deg); background-image: linear-gradient(0deg, #fff5dd 49%, #eac15d 51%); }
.rw-capsule-c { bottom: 34%; left: 31%; transform: rotate(10deg); background-image: linear-gradient(0deg, #fff5dd 49%, #d6977d 51%); }
.rw-capsule-d { bottom: 56%; left: 3%; transform: rotate(-48deg); background-image: linear-gradient(0deg, #fff5dd 49%, #92bdc5 51%); }
.rw-capsule-e { bottom: 63%; right: 4%; transform: rotate(70deg); background-image: linear-gradient(0deg, #fff5dd 49%, #eac15d 51%); }
.rw-machine-base { position: absolute; left: 0; bottom: 0; width: 100%; height: 47%; border: 3px solid #466d54; background: linear-gradient(125deg, #719479, #456c55); border-radius: 17% 17% 15% 15%; box-shadow: inset 0 4px 0 #adbea371; }
.rw-machine-flower { position: absolute; left: 11%; top: 11%; color: #ffe8a7; font-size: clamp(17px, 3vw, 34px); }
.rw-machine-handle { position: absolute; left: 45%; top: 14%; width: 26%; aspect-ratio: 1; border: 3px solid #a58254; border-radius: 50%; background: #fff4c6; }
.rw-machine-handle::after { content: ""; display: block; position: absolute; top: 36%; left: -12%; width: 124%; height: 30%; border-radius: 8px; background: #e3ba64; border: 2px solid #a58254; transform: rotate(-18deg); }
.rw-machine-door { position: absolute; bottom: 9%; left: 30%; width: 40%; height: 33%; border-radius: 46% 46% 12% 12%; background: #294b3c; border: 3px solid #93ac86; box-shadow: inset 0 7px 0 #1e37295e; }
.rw-draw-controls { text-align: center; width: 100%; flex: 0 0 auto; }
.rw-credits { display: inline-block; margin: 6px 0 10px; padding: 5px 15px; color: #6e583b; background: #f5e4b7; border-radius: 30px; font-weight: 800; font-size: clamp(15px, 1.8vw, 20px); }
.rw-credits > span { color: #a17a4c; }
.rw-turn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 9px 14px; background: #315c50; color: #fffbed; border: 2px solid #315c50; border-radius: 21px; box-shadow: 0 5px 0 #315c502b; font-weight: 800; font-size: clamp(17px, 2vw, 23px); }
.rw-turn > span { font-size: 1.45em; line-height: 1; }
.rw-turn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 #315c502b; }
.rw-turn:disabled { opacity: .72; color: #536653; background: #e0e6d6; border-color: #ccd7c4; box-shadow: none; }
.rw-draw-help { margin: 12px 0 0; font-size: clamp(11px, 1.3vw, 14px); color: #886e52; line-height: 1.7; }
.rw-album { display: flex; flex-direction: column; min-height: 0; padding: clamp(12px, 2vw, 25px); border: 1px solid #d4ceb4; border-radius: 25px; background: #ffffff8f; box-shadow: 0 5px 0 #315c500b; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.rw-album-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 14px; flex-shrink: 0; }
.rw-album-heading h2 { color: #315c50; font-size: clamp(17px, 2vw, 24px); }
.rw-album-heading p { color: #8b735c; font-size: clamp(11px, 1.1vw, 14px); }
.rw-friend-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.3vw, 16px); }
.rw-friend { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 92px; padding: 9px 4px; border-radius: 18px; background: #fffdf7; border: 1.5px solid #dcd3ba; color: #315c50; box-shadow: 0 3px 0 #bdb18e12; }
.rw-friend-image { width: clamp(45px, 7vw, 91px); height: clamp(45px, 7vw, 91px); object-fit: contain; pointer-events: none; }
.rw-friend strong { font-size: clamp(12px, 1.35vw, 16px); }
.rw-friend-chosen { border-color: #61836a; background: #edf3e7; box-shadow: inset 0 0 0 2px #8ba27c33; }
.rw-friend-badge { position: absolute; right: 3px; top: 3px; font-size: 10px; padding: 2px 5px; border-radius: 6px; background: #315c50; color: #fffced; }
.rw-friend-unknown { background: #edeedf70; border: 1px dashed #cdd2bb; box-shadow: none; }
.rw-friend-unknown img { filter: brightness(0); opacity: .09; }
.rw-friend-unknown > span { position: absolute; color: #829575; font-size: 22px; font-weight: 800; }
.rw-parent-note { margin: 20px 0 0; color: #827967; font-size: 11px; line-height: 1.75; flex-shrink: 0; }
.rw-storage-error { color: #804834; background: #fff2db; border: 1px solid #dcb88f; padding: 8px 12px; border-radius: 12px; font-size: 12px; margin: 0; flex-shrink: 0; }
.rw-reveal-backdrop { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 14px; background: #254b3ecd; backdrop-filter: blur(5px); overflow: auto; }
.rw-reveal { position: relative; text-align: center; width: min(450px, 96%); max-height: 100%; overflow: auto; padding: clamp(16px, 3vh, 34px) clamp(22px, 4vw, 46px); border: 3px solid #e6c77c; border-radius: 38px; background: radial-gradient(ellipse at 50% 30%, #fffdf3, #fff1c9); box-shadow: 0 15px 60px #142f364a; animation: rw-welcome .5s ease-out; }
.rw-reveal-kicker { color: #8c7049; margin: 0 0 7px; font-size: clamp(12px, 1.5vw, 16px); }
.rw-reveal h2 { color: #315c50; margin: 0; font-size: clamp(24px, 3.5vw, 36px); }
.rw-reveal-sprig { position: absolute; top: 12px; right: 20px; color: #d7ac4c; font-size: 28px; }
.rw-reveal-portrait { display: grid; place-items: center; position: relative; margin: 16px auto 8px; width: min(210px, 42vh); aspect-ratio: 1; border-radius: 50%; background: #e5ecd2; border: 2px dashed #bccb9a; }
.rw-reveal-image { width: 82%; height: 82%; object-fit: contain; animation: rw-friend-hello .65s ease-out; }
.rw-reveal-star { position: absolute; color: #d7a540; font-size: 35px; }
.rw-reveal-star-a { right: -10px; top: 12px; transform: rotate(10deg); }
.rw-reveal-star-b { left: -12px; bottom: 22px; font-size: 24px; }
.rw-reveal-greeting { color: #856a4c; font-size: clamp(13px, 1.5vw, 17px); line-height: 1.6; margin: 13px 0 19px; }
.rw-teaser { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 7px 15px; border: 1.5px solid #c6d1b6; border-radius: 22px; background: #f2f5e8; color: #315c50; text-align: left; }
.rw-teaser-friend { width: 46px; height: 46px; object-fit: contain; }
.rw-teaser strong { display: block; font-size: 16px; }
.rw-teaser small { display: block; color: #7f795d; margin-top: 3px; font-size: 12px; }
.rw-teaser-arrow { margin-left: auto; font-size: 26px; }
@keyframes rw-welcome { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rw-friend-hello { 0% { opacity: 0; transform: translateY(15px) rotate(-4deg); } 70% { transform: translateY(-4px) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@media (max-height: 460px) and (min-width: 600px) {
  .rw-screen { gap: 8px; }
  .rw-header h1 { font-size: 22px; }
  .rw-header p { display: none; }
  .rw-back { min-height: 44px; padding: 7px 11px; }
  .rw-body { grid-template-columns: minmax(200px, .75fr) minmax(0, 1.7fr); gap: 14px; }
  .rw-draw-area { flex-direction: row; gap: 12px; }
  .rw-machine-scene { flex: 1; height: 100%; }
  .rw-machine { max-width: 100%; width: 100%; height: auto; max-height: 100%; }
  .rw-draw-controls { width: 58%; }
  .rw-turn { min-height: 50px; font-size: 16px; padding: 7px; gap: 4px; border-radius: 16px; }
  .rw-draw-help { font-size: 11px; line-height: 1.6; }
  .rw-album { padding: 12px; }
  .rw-album-heading { margin-bottom: 9px; }
  .rw-friend { min-height: 84px; }
  .rw-reveal { width: min(580px, 90%); display: grid; grid-template-columns: minmax(100px, .65fr) 1fr; column-gap: 24px; padding: 18px 28px; border-radius: 26px; }
  .rw-reveal-kicker, .rw-reveal h2, .rw-reveal-greeting, .rw-reveal-confirm { grid-column: 2; }
  .rw-reveal-portrait { grid-column: 1; grid-row: 1 / span 4; margin: auto; width: 100%; max-width: 180px; }
  .rw-reveal-kicker { margin: 3px 0 5px; font-size: 12px; }
  .rw-reveal h2 { font-size: 27px; }
  .rw-reveal-greeting { margin: 11px 0; font-size: 14px; }
  .rw-reveal-confirm { min-height: 48px; }
}
/* A landscape phone still has room for a proper, inviting machine above its handle. */
@media (min-height: 341px) and (max-height: 460px) and (min-width: 600px) {
  .rw-draw-area { flex-direction: column; gap: 0; justify-content: center; }
  .rw-machine-scene { flex: 1 1 140px; width: 100%; height: auto; min-height: 90px; max-height: 155px; padding: 3px; }
  .rw-machine { width: auto; height: 100%; max-width: 145px; max-height: 149px; }
  .rw-draw-controls { width: 100%; }
  .rw-credits { margin: 3px 0 6px; padding: 3px 13px; font-size: 15px; }
  .rw-turn { min-height: 48px; font-size: 17px; white-space: nowrap; }
  .rw-draw-help { margin-top: 8px; font-size: 10px; line-height: 1.6; }
}
/* Very short landscape: keep the machine and action adjacent, with an unbroken label. */
@media (max-height: 340px) and (min-width: 600px) {
  .rw-draw-area { gap: 8px; }
  .rw-machine-scene { flex: 0 0 60px; width: 60px; height: 112px; padding: 0; }
  .rw-machine { width: 100%; height: auto; }
  .rw-draw-controls { flex: 1; width: auto; min-width: 0; }
  .rw-credits { margin: 4px 0 8px; padding: 4px 8px; font-size: 14px; }
  .rw-turn { min-height: 48px; font-size: 14px; white-space: nowrap; padding: 7px 4px; }
  .rw-draw-controls .rw-turn > span { display: none; }
  .rw-draw-help { margin-top: 8px; font-size: 10px; line-height: 1.5; }
  .rw-draw-help br { display: none; }
}
@media (max-width: 599px) {
  .rw-header { gap: 8px; }
  .rw-header h1 { font-size: 20px; }
  .rw-header p { font-size: 11px; }
  .rw-back { min-width: 44px; width: 44px; padding: 6px; }
  .rw-back span { display: none; }
  .rw-count { font-size: 15px; padding: 8px; }
  .rw-body { grid-template-columns: 1fr; grid-template-rows: minmax(165px, .65fr) minmax(0, 1fr); }
  .rw-draw-area { flex-direction: row; gap: 18px; padding: 0 8px; }
  .rw-machine-scene { width: 36%; height: 100%; }
  .rw-machine { max-width: 100%; height: 100%; }
  .rw-draw-controls { width: 60%; }
  .rw-friend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .rw-reveal, .rw-reveal-image { animation: none; } .rw-turn:not(:disabled):active { transform: none; } }

/* All finishes use the same draw: the foil is a keepsake, not different odds or a paid reward. */
.rw-screen .rw-back { min-width: 48px; min-height: 48px; }
.rw-sticker-link, .rw-sticker-cta, .rw-skip { min-height: 48px; border: 1.5px solid #b9975d; border-radius: 16px; background: #fff2cc; color: #5b6040; font-weight: 800; padding: 9px 16px; }
.rw-sticker-link { flex: 0 0 auto; font-size: 16px; white-space: nowrap; }
.rw-friend-rare { border-color: #d7b968; background: linear-gradient(135deg, #fffdf2, #fff3ce 64%, #fff9e8); box-shadow: inset 0 0 0 2px #ead7994d, 0 3px 0 #bc963218; }
.rw-friend-super { border: 2px solid transparent; background: linear-gradient(140deg, #fffdf6, #f5f1e8) padding-box, conic-gradient(from 30deg, #e4a0aa, #eacb78, #b9d7a1, #a2cdd4, #c6b4d7, #e4a0aa) border-box; box-shadow: 0 3px 0 #bda7bc1c; }
.rw-friend-rare.rw-friend-chosen, .rw-friend-super.rw-friend-chosen { box-shadow: inset 0 0 0 2px #608368, 0 3px 0 #315c5015; }
.rw-friend-rarity { color: #927126; font-size: 10px; line-height: 1.2; font-weight: 800; }
.rw-friend-super .rw-friend-rarity { color: #847294; }
.rw-opening-backdrop { background: #254b3eea; }
.rw-opening { display: grid; grid-template-columns: minmax(140px, .85fr) minmax(210px, 1.15fr); align-items: center; gap: clamp(16px, 3vw, 34px); width: min(710px, 96%); max-height: 100%; overflow: auto; padding: clamp(18px, 3.5vh, 32px); border: 2px solid #d8c68a; border-radius: 34px; background: radial-gradient(ellipse at 20% 45%, #e5ecd3, #fff8e8 65%); box-shadow: 0 15px 60px #142f364a; }
.rw-opening-machine { display: grid; place-items: center; width: auto; max-width: 100%; height: min(285px, 56vh); aspect-ratio: .79; justify-self: center; }
.rw-opening-machine .rw-machine { width: 100%; height: 100%; max-width: none; max-height: none; }
.rw-opening-copy { text-align: center; }
.rw-opening-kicker { color: #917343; font-size: clamp(13px, 1.8vw, 19px); font-weight: 800; margin: 0 0 14px; }
.rw-opening h2 { color: #315c50; font-size: clamp(23px, 3.5vw, 36px); line-height: 1.4; margin: 0; }
.rw-opening-hint { color: #8c7655; font-size: clamp(12px, 1.5vw, 17px); line-height: 1.7; margin: 16px 0; }
.rw-skip { min-width: 148px; margin-top: 8px; background: #fffdf5; font-size: 16px; }
.rw-is-turning .rw-machine-handle { animation: rw-handle-turn 1s ease-in-out both; }
.rw-is-turning .rw-capsule { animation: rw-ball-roll .5s ease-in-out 2 alternate; }
.rw-is-turning .rw-capsule-b, .rw-is-turning .rw-capsule-d { animation-delay: .08s; }
.rw-is-turning .rw-machine-flower { animation: rw-flower-wink .9s ease-in-out both; }
.rw-capsule-open { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; min-width: 150px; min-height: 48px; padding: 8px; border: 0; border-radius: 26px; color: #315c50; background: transparent; }
.rw-delivered-capsule { display: block; position: relative; width: min(180px, 48vh); aspect-ratio: 1; filter: drop-shadow(0 10px 0 #9c945825); animation: rw-capsule-pop .6s cubic-bezier(.2, .7, .2, 1) both; }
.rw-delivered-top, .rw-delivered-bottom { display: block; position: absolute; left: 0; width: 100%; height: 52%; border: 3px solid #9b7b49; }
.rw-delivered-top { top: 0; background: linear-gradient(120deg, #b8d2b2, #80a78f); border-radius: 100% 100% 5% 5% / 190% 190% 5% 5%; }
.rw-delivered-bottom { bottom: 0; background: linear-gradient(120deg, #fff9d8, #e7ce93); border-radius: 5% 5% 100% 100% / 5% 5% 190% 190%; }
.rw-delivered-flower { display: grid; place-items: center; position: absolute; top: 38%; left: 38%; width: 24%; height: 24%; border: 2px solid #b79554; border-radius: 50%; background: #ffefb8; color: #9c7435; font-size: clamp(20px, 4vh, 32px); line-height: 1; }
.rw-delivered-glint { position: absolute; top: 14%; left: 22%; width: 12%; height: 25%; border-radius: 100%; transform: rotate(30deg); background: #fffef9a3; }
.rw-capsule-tap-label { display: grid; place-items: center; min-height: 48px; width: 100%; padding: 10px 13px; border: 2px solid #315c50; border-radius: 17px; background: #315c50; color: #fffbed; font-size: clamp(15px, 1.9vw, 21px); font-weight: 800; white-space: nowrap; box-shadow: 0 4px 0 #315c5021; }
.rw-capsule-open:active .rw-delivered-capsule { transform: rotate(-5deg); }
.rw-reveal-tier { display: inline-block; margin: 10px auto 0; padding: 5px 13px; border-radius: 30px; color: #738359; background: #e9eedc; font-size: clamp(12px, 1.6vw, 17px); font-weight: 800; line-height: 1.3; }
.rw-tier-rare { background: linear-gradient(115deg, #ffeab2, #fff6d9, #eed797); color: #9b701f; border: 1px solid #d4b25b; }
.rw-tier-super { background: linear-gradient(105deg, #f8e0dd, #fff0c3, #e5eed0, #dfebf2, #eee0f2); color: #796583; border: 1px solid #cbb7c8; }
.rw-reveal-rare { border-color: #dfb758; background: radial-gradient(ellipse at 50% 30%, #fffef4, #fff0bf); --rw-burst-color: #d9af4a; }
.rw-reveal-super { border: 3px solid transparent; background: linear-gradient(140deg, #fffdf6, #f9f2e5) padding-box, conic-gradient(from 30deg, #e4a0aa, #eacb78, #b9d7a1, #a2cdd4, #c6b4d7, #e4a0aa) border-box; --rw-burst-color: #ad89bc; }
.rw-foil-rare { border: 3px solid #dbbc68; background: radial-gradient(ellipse at 40% 20%, #fffbed, #efda99); box-shadow: inset 0 0 0 5px #fff9e866; overflow: hidden; }
.rw-foil-super { border: 3px solid transparent; background: radial-gradient(ellipse at 40% 20%, #fffbedbb, #fffefa60) padding-box, conic-gradient(from -20deg, #f6d4d5, #fae4a9, #d6e9c4, #c5e6ee, #e0d0ed, #f6d4d5) border-box; box-shadow: inset 0 0 0 5px #fff9e844; overflow: hidden; }
.rw-foil-rare::after, .rw-foil-super::after { content: ""; position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(115deg, transparent 35%, #fffef879 47%, #fffef8a6 51%, transparent 63%); animation: rw-foil-sweep 1.1s .15s ease-out both; }
.rw-reveal-actions { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 2px; z-index: 1; }
.rw-reveal-actions .rw-reveal-confirm { grid-column: auto; width: 100%; min-width: 0; }
.rw-sticker-cta { font-size: clamp(15px, 1.8vw, 19px); width: 100%; background: #fff3ce; color: #806338; }
.rw-stage-error { margin: 6px 0 0; color: #94563d; font-size: 11px; line-height: 1.5; }
.rw-burst { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.rw-burst-piece { display: block; position: absolute; left: 48%; top: 42%; opacity: 0; font: normal 24px/1 Georgia, serif; color: var(--rw-burst-color, #b4bb80); animation: rw-petal-burst 1.3s ease-out both; animation-delay: calc(var(--rw-piece) * 20ms); }
.rw-burst-piece:nth-child(3n) { color: #dba08b; }
@keyframes rw-handle-turn { 0% { transform: rotate(0); } 75% { transform: rotate(350deg); } 100% { transform: rotate(360deg); } }
@keyframes rw-ball-roll { from { transform: translate(0, 0) rotate(-12deg); } to { transform: translate(8px, -10px) rotate(28deg); } }
@keyframes rw-flower-wink { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(30deg); } }
@keyframes rw-capsule-pop { 0% { opacity: 0; transform: translateY(-20px) scale(.78); } 65% { opacity: 1; transform: translateY(3px) scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes rw-foil-sweep { from { opacity: 0; transform: translateX(-85%); } 20% { opacity: .8; } to { opacity: 0; transform: translateX(85%); } }
@keyframes rw-petal-burst { 0% { opacity: 0; transform: rotate(calc(var(--rw-piece) * 36deg)) translateY(-30px) scale(.4); } 25% { opacity: .8; } 100% { opacity: 0; transform: rotate(calc(var(--rw-piece) * 36deg)) translateY(-195px) scale(1); } }
@media (max-height: 460px) and (min-width: 600px) {
  .rw-reveal { width: min(650px, 95%); grid-template-columns: minmax(130px, .8fr) 1.2fr; column-gap: 24px; padding: 16px 24px; }
  .rw-reveal-tier, .rw-reveal-actions { grid-column: 2; }
  .rw-reveal-portrait { grid-row: 1 / span 5; max-width: 200px; }
  .rw-reveal-tier { margin-top: 6px; font-size: 13px; padding: 4px 10px; }
  .rw-reveal-kicker { margin-bottom: 4px; }
  .rw-reveal-greeting { margin: 8px 0 10px; font-size: 13px; }
  .rw-reveal-actions { gap: 8px; }
  .rw-reveal-actions .rw-turn, .rw-sticker-cta { min-height: 48px; font-size: 16px; padding: 8px 10px; }
  .rw-opening { padding: 20px; gap: 22px; }
  .rw-opening-kicker { margin-bottom: 10px; }
  .rw-opening-hint { margin: 12px 0; }
}
@media (max-width: 740px) and (min-width: 600px) {
  .rw-header { gap: 10px; }
  .rw-header h1 { font-size: 18px; }
  .rw-sticker-link { padding: 8px 12px; font-size: 14px; }
  .rw-count { padding: 8px 10px; }
}
@media (max-height: 340px) and (min-width: 600px) {
  .rw-reveal { padding: 13px 20px; column-gap: 20px; }
  .rw-reveal h2 { font-size: 24px; }
  .rw-reveal-kicker { margin: 0 0 3px; font-size: 11px; }
  .rw-reveal-tier { margin-top: 4px; font-size: 12px; }
  .rw-reveal-greeting { font-size: 12px; margin: 7px 0; }
  .rw-reveal-portrait { max-width: 170px; }
  .rw-opening { padding: 16px 20px; gap: 16px; }
  .rw-opening h2 { font-size: 25px; }
  .rw-opening-kicker { font-size: 13px; }
  .rw-opening-hint { font-size: 12px; }
  .rw-capsule-open { gap: 12px; padding: 4px; }
}
@media (max-width: 599px) {
  .rw-header h1 { font-size: 16px; }
  .rw-header p { display: none; }
  .rw-sticker-link { padding: 8px; font-size: 12px; }
  .rw-screen .rw-back { width: 48px; }
  .rw-opening { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .rw-opening-machine { width: 150px; height: 190px; }
  .rw-opening h2 { font-size: 24px; }
  .rw-opening-kicker { margin-bottom: 6px; }
  .rw-opening-hint { margin: 8px 0; }
  .rw-opening .rw-skip { margin-top: 0; }
  .rw-capsule-open { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-is-turning .rw-machine-handle, .rw-is-turning .rw-capsule, .rw-is-turning .rw-machine-flower, .rw-delivered-capsule, .rw-foil-rare::after, .rw-foil-super::after, .rw-burst-piece { animation: none; }
  .rw-burst-piece, .rw-foil-rare::after, .rw-foil-super::after { display: none; }
  .rw-capsule-open:active .rw-delivered-capsule { transform: none; }
}