@font-face{font-family:"Fredoka";src:url("assets/fonts/fredoka-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"ToyRoomSC";src:url("assets/fonts/noto-sans-sc-ui-500.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}

body.toyroom-welcome-active{overflow:hidden}

.toyroom-welcome[hidden],.toyroom-welcome [hidden]{display:none!important}
.toyroom-welcome{position:fixed;z-index:1200;inset:0;color:#3b2718;font-family:"ToyRoomSC","Microsoft YaHei UI","PingFang SC",sans-serif}
.toyroom-welcome__veil{position:absolute;inset:0;background:rgba(54,35,24,.24);backdrop-filter:blur(6px) saturate(.9);animation:toyroom-welcome-veil-in 260ms ease-out both}
.toyroom-welcome__dialog{position:absolute;inset:0;overflow:hidden;outline:0}
.toyroom-welcome__close{position:absolute;z-index:8;top:max(22px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));min-width:76px;min-height:44px;padding:0 16px;border:1px solid rgba(59,39,24,.14);border-radius:22px;background:rgba(255,250,246,.9);box-shadow:0 2px 8px rgba(59,39,24,.08),0 14px 34px rgba(59,39,24,.12);color:#5f4e45;cursor:pointer}
.toyroom-welcome__stage{position:absolute;inset:0;display:grid;place-items:center;perspective:1200px}
.toyroom-welcome__envelope{position:absolute;z-index:3;width:min(620px,76vw);aspect-ratio:1;border:0;background:transparent;filter:drop-shadow(0 28px 28px rgba(67,38,23,.18));cursor:pointer;transform:translateY(2.5vh) scale(.98);transition:opacity 180ms ease,transform 220ms cubic-bezier(.23,1,.32,1),filter 220ms ease}
.toyroom-welcome__envelope-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.toyroom-welcome__hint{position:absolute;left:50%;bottom:2.5%;width:max-content;max-width:84vw;padding:9px 14px;border-radius:18px;background:rgba(255,250,246,.9);box-shadow:0 8px 22px rgba(67,38,23,.1);color:#66544b;font-size:14px;line-height:1.45;transform:translateX(-50%)}
.toyroom-welcome__paper{position:absolute;z-index:2;left:50%;top:50%;width:min(700px,calc(100vw - 40px));max-height:calc(100dvh - 48px);overflow:auto;padding:50px 60px 40px;border:1px solid rgba(112,82,61,.12);border-radius:16px;background:linear-gradient(150deg,rgba(255,255,255,.45),transparent 38%),#fffaf1;box-shadow:0 4px 14px rgba(75,47,29,.09),0 32px 80px rgba(75,47,29,.24);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-48%) scale(.96);transition:opacity 180ms ease,transform 240ms cubic-bezier(.23,1,.32,1),visibility 0s linear 240ms;scrollbar-color:rgba(180,128,115,.55) transparent;scrollbar-width:thin}
.toyroom-welcome__paper:after{content:"";position:absolute;inset:13px;border:1px solid rgba(205,132,124,.2);border-radius:9px;pointer-events:none}
.toyroom-welcome__paper::-webkit-scrollbar{width:8px}
.toyroom-welcome__paper::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:8px;background:rgba(180,128,115,.55);background-clip:padding-box}
.toyroom-welcome__brand{display:block;margin-bottom:22px;color:#d96370;font-family:"Fredoka","Arial Rounded MT Bold",sans-serif;font-size:22px;line-height:1}
.toyroom-welcome__paper h2{margin:0 0 22px;font-family:"Fredoka","ToyRoomSC",sans-serif;font-size:clamp(30px,4vw,38px);line-height:1.15;letter-spacing:-.02em}
.toyroom-welcome__letter-copy{max-width:66ch}
.toyroom-welcome__paper p{margin:0;color:#5f5048;font-size:16px;line-height:1.78}
.toyroom-welcome__paper p+p{margin-top:15px}
.toyroom-welcome__paper .toyroom-welcome__signature{margin-top:24px;color:#d96370;font-family:"Fredoka","ToyRoomSC",sans-serif;font-size:20px;text-align:right}
.toyroom-welcome__keep{position:absolute;z-index:2;left:60px;bottom:22px;display:inline-flex;min-height:46px;align-items:center;justify-content:center;margin:0;padding:0 20px;border:1px solid rgba(255,255,255,.34);border-radius:16px;background:#ef6b69;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 26px rgba(205,78,83,.2);color:#fff;cursor:pointer}

.toyroom-welcome[data-phase="reading"] .toyroom-welcome__envelope{opacity:0;pointer-events:none;transform:translateY(2.5vh) scale(.94)}
.toyroom-welcome[data-phase="reading"] .toyroom-welcome__paper{z-index:5;opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1);transition-delay:40ms,40ms,0s}

.toyroom-welcome button:focus-visible{outline:3px solid #5b3722;outline-offset:4px}
.toyroom-welcome__envelope:focus-visible{outline:0;filter:drop-shadow(0 28px 28px rgba(67,38,23,.18)) drop-shadow(0 0 12px rgba(255,250,240,.72))}
.toyroom-welcome__close:active,.toyroom-welcome__keep:active{transform:translateY(1px)}

@media (hover:hover) and (pointer:fine){
  .toyroom-welcome__envelope:hover{transform:translateY(2vh) scale(1.01);filter:drop-shadow(0 34px 32px rgba(67,38,23,.2))}
  .toyroom-welcome__close,.toyroom-welcome__keep{transition:transform 160ms ease,box-shadow 180ms ease,background-color 160ms ease}
  .toyroom-welcome__close:hover{background:#fffaf6;box-shadow:0 3px 10px rgba(59,39,24,.1),0 18px 38px rgba(59,39,24,.14)}
  .toyroom-welcome__keep:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 16px 30px rgba(205,78,83,.26)}
}

@media (max-width:620px){
  .toyroom-welcome__close{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right))}
  .toyroom-welcome__envelope{width:min(540px,96vw)}
  .toyroom-welcome__hint{bottom:3%;font-size:13px}
  .toyroom-welcome__paper{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:40px 28px 30px}
  .toyroom-welcome__brand{margin-bottom:18px;font-size:20px}
  .toyroom-welcome__paper h2{margin-bottom:18px;font-size:30px}
  .toyroom-welcome__paper p{font-size:16px;line-height:1.72}
  .toyroom-welcome__paper p+p{margin-top:13px}
  .toyroom-welcome__keep{left:28px;bottom:18px}
}

@media (max-height:700px){
  .toyroom-welcome__paper{max-height:calc(100dvh - 24px);padding-top:34px;padding-bottom:28px}
}

@media (prefers-reduced-motion:reduce){
  .toyroom-welcome__veil,.toyroom-welcome__envelope,.toyroom-welcome__paper,.toyroom-welcome__close,.toyroom-welcome__keep{animation:none!important;transition:none!important}
  .toyroom-welcome[data-phase="reading"] .toyroom-welcome__paper{transform:translate(-50%,-50%) scale(1)}
}

@keyframes toyroom-welcome-veil-in{from{opacity:0}to{opacity:1}}