@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/0569c822cab6.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/9bd8ba39c9d5.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/18e69125ce1f.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/8257aa2626c3.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/4f8baddc09ac.ttf) format('truetype');
}

:root{--paper:#f7f3eb;--ink:#51415a;--pink:#ac4e6b;--line:#ded5cd;--serif:'Libre Caslon Display',Georgia,serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #9864ac;outline-offset:4px}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}.app{max-width:1600px;margin:auto;padding:0 4%}header{height:80px;display:flex;align-items:center;gap:18px}.brand{margin-right:auto}.brand-logo{display:block;width:110px;height:78px;object-fit:contain}.dedication{font-family:var(--serif);font-size:23px;font-style:italic}.icon-button{flex-shrink:0;height:42px;width:42px;border:1px solid #d3bfd3;border-radius:13px;background:#fff8f0e8;color:#705375;font-size:22px;position:relative;box-shadow:0 3px 10px #3726440d}.sound-slash{position:absolute;inset:4px 0 0;font-size:28px}.game-frame{height:min(740px,calc(100svh - 132px));min-height:460px;position:relative;overflow:hidden;border:1px solid #ccbbce;border-radius:20px;background:#e6d8eb;box-shadow:0 15px 50px #67556b15;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.welcome{position:absolute;top:3%;left:3%;right:3%;text-align:center;pointer-events:none}.welcome button{pointer-events:auto}.cover-logo{display:block;width:145px;height:92px;object-fit:contain;margin:auto}.eyebrow{display:block;font-size:9px;line-height:1.5;letter-spacing:2.2px;font-weight:700;color:#8b6683}h1{font-family:var(--serif);font-size:clamp(48px,5.6vw,78px);line-height:.96;font-weight:400;letter-spacing:-1.5px;margin:14px 0}h1 em{font-weight:400;color:var(--pink)}h2{font-family:var(--serif);font-size:42px;line-height:1.12;font-weight:400;margin:18px 0}p{font-size:14px;line-height:1.7}.welcome h1{font-size:clamp(48px,5vw,64px);margin:10px 0}.welcome .text-button{padding:7px 8px}.welcome p{margin:8px 0;color:#765f76;font-size:13px}.start-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.primary,.secondary{min-height:44px;padding:11px 23px;border:1px solid #ac4e6b;border-radius:10px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:13px}.primary{color:#fffaf3;background:linear-gradient(160deg,#b96283,#984765);box-shadow:0 4px 12px #803c5426}.secondary{background:#fff9f0e6;color:#8c526e;border-color:#b89cae}.primary:hover{filter:brightness(1.06)}.secondary:hover{background:#fffaf5}.text-button{border:0;background:none;color:#936880;font-size:12px;padding:13px 8px;text-decoration:underline;text-underline-offset:4px}.cover-links{display:flex;justify-content:center;gap:12px}.welcome .cover-note{font-size:9px;letter-spacing:1.5px;margin:6px 0}.welcome .save-summary{font-size:11px;margin:8px 0 0}.hud{position:absolute;top:18px;left:18px;right:18px;display:flex;gap:10px;align-items:center}.chapter-badge{display:flex;align-items:center;gap:10px;background:#fff8f0e8;border:1px solid #d5bed4;padding:4px 18px 5px 8px;border-radius:40px;box-shadow:0 4px 18px #4e314515}.chapter-badge img{width:65px;height:52px;object-fit:contain}.chapter-badge span{display:block;letter-spacing:2px;font-size:8px;color:#947188;margin-bottom:3px}.chapter-badge strong{font-family:var(--serif);font-size:23px;font-weight:400}.letter-count{margin-left:auto;height:44px;padding:0 16px;display:flex;align-items:center;gap:6px;background:#fff9f2ed;border:1px solid #cab7ce;border-radius:15px;color:#6a496f;font-size:14px}.letter-count span{font-size:25px;color:#ad587e}.letter-count i{font-style:normal;color:#927390}.objective{position:absolute;top:90px;left:22px;max-width:70%;color:#684c6e;background:#fff8ece3;border-radius:20px;padding:7px 14px;font-size:11px;box-shadow:0 3px 16px #4e31450a}.chapter-banner{position:absolute;top:24%;left:50%;transform:translateX(-50%);text-align:center;background:#fff9ecf2;border:1px solid #e5c8cd;border-radius:25px;padding:22px 34px;box-shadow:0 12px 40px #3d25451a;width:max-content;max-width:90%;pointer-events:none;animation:chapter-in .5s ease}.chapter-banner span,.chapter-banner small{display:block;font-size:10px;letter-spacing:1.6px;color:#9b6685}.chapter-banner strong{display:block;font-family:var(--serif);font-size:38px;font-weight:400;margin:8px 0}.chapter-banner small{letter-spacing:.2px;font-size:12px}.progress-track{position:absolute;bottom:22px;left:38%;right:38%;display:flex;align-items:center;gap:8px;color:#fff2dc;text-shadow:0 2px 7px #513e69;font-size:22px;pointer-events:none}.progress-track>i{position:relative;background:#fff4d766;border:1px solid #fff3dfaa;height:4px;flex:1;border-radius:6px}.progress-track b{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#fce2b2;border-radius:6px}.progress-track em{position:absolute;top:-4px;width:9px;height:9px;border-radius:50%;background:#b86d96;border:1px solid #fff6df;left:33%}.progress-track em+em{left:66%}.touch-controls{display:none;position:absolute;bottom:20px;left:18px;right:18px;justify-content:space-between;align-items:end;pointer-events:none;user-select:none}.touch-controls>div{display:flex;gap:10px;align-items:end}.touch-controls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:64px;height:60px;border:2px solid #fff7eabf;border-bottom:4px solid #ac8ca4;background:#fff6e7dc;color:#8c5b7b;border-radius:19px;font-size:29px;box-shadow:0 3px 12px #3b244e2a}.touch-controls button.pressed{background:#efd1e1;transform:translateY(2px)}.touch-controls .jump{width:73px;height:73px;border-radius:50%;background:#a85786e8;color:#fff3e3;border-bottom-color:#783957}.touch-controls small{display:block;font-size:8px;letter-spacing:1px}.touch-controls .interact{width:54px;height:55px;font-size:25px;background:#ffecc2ed}.interact-hint{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);background:#fff8eced;border:1px solid #dac298;border-radius:25px;padding:9px 17px;font-size:12px;width:max-content;max-width:90%;text-align:center}#toast{position:absolute;left:50%;top:132px;transform:translateX(-50%);max-width:85%;padding:12px 22px;border:1px solid #e0c9d4;border-radius:13px;background:#fff7eef2;box-shadow:0 8px 25px #67435d15;font-size:12px;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}#toast.show{opacity:1}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#30233c92;z-index:5;backdrop-filter:blur(3px)}.intro-card,.soft-card{width:min(470px,90%);max-height:92%;overflow:auto;padding:27px;text-align:center;background:#fff8edfa;border:1px solid #d9becd;border-radius:22px;box-shadow:0 18px 60px #39204740}.intro-card>img{display:block;width:160px;height:170px;object-fit:contain;margin:15px auto 0;border-radius:10px}.intro-card h2{font-size:42px}.intro-card p{font-size:14px;color:#8d6d7d}.intro-ornament{display:block;font-size:35px;color:#b36e8b}.intro-progress{height:3px;background:#e8d5dd;margin:20px 0}.intro-progress i{display:block;height:100%;width:0;background:#a9587a}.failure{z-index:6}.declaration,.ending{position:absolute;top:13%;left:5%;right:5%;text-align:center;color:#fff1d4;text-shadow:0 3px 25px #1b1e46;pointer-events:none}.declaration h1,.ending h1{font-size:clamp(38px,4.3vw,63px);line-height:1.08}.declaration .eyebrow,.ending .eyebrow{color:#f5dcab}.declaration h1 em,.ending h1 em{color:#ffd89d}.ending button{pointer-events:auto}.ending .start-buttons{margin-top:25px}.ending .text-button{color:#fff0d7}.credits{display:block;overflow:clip;overscroll-behavior:contain;background:#10182ddd;backdrop-filter:blur(7px)}.credits-heading{position:absolute;top:22px;left:25px;right:25px;display:flex;justify-content:space-between;color:#fae9c9;z-index:2}.credits-heading .eyebrow{color:#fae9c9}.credits-heading>span:last-child{font-size:12px}#credits-card{position:absolute;left:50%;top:0;margin:0;width:min(570px,82%);padding:15px 15px 12px;border:1px solid #e9d9c8;background:#fff7eb;border-radius:12px;box-shadow:0 20px 70px #0005;will-change:transform,opacity}#credits-photo{display:block;width:100%;height:min(54vh,390px);object-fit:contain;background:#f0e9e1}#credits-caption{font-family:var(--serif);font-size:22px;text-align:center;margin:13px 0 3px;white-space:pre-wrap}.credits-controls{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center;gap:9px;z-index:3}footer{height:52px;display:flex;align-items:center;justify-content:space-between;color:#8c798d;font-size:11px}kbd{font:inherit;border:1px solid #cbbac7;background:#fff9ef80;padding:2px 5px;border-radius:5px;font-size:11px}.mobile-help{display:none}dialog{padding:0;border:1px solid #d9beca;border-radius:20px;background:#fff9f0;color:var(--ink);width:min(510px,92vw);max-height:88svh;box-shadow:0 25px 100px #34223a60}dialog::backdrop{background:#30233c94;backdrop-filter:blur(4px)}.paper{padding:32px;text-align:center}.paper>.primary{width:100%}.paper>.text-button{display:block;margin:auto}.paper p{color:#8a6e80}.help-list{list-style:none;padding:0;text-align:left;border-top:1px solid var(--line);margin:20px 0}.help-list li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.help-list span{color:#96728c}.volume-control{display:grid;grid-template-columns:1fr auto;text-align:left;gap:13px;font-size:12px;margin:24px 0}.volume-control input{grid-column:span 2;width:100%;accent-color:var(--pink)}.letter-paper{--letter-accent:#b76c8c;--letter-bg:#fff7eb;background:var(--letter-bg);display:flex;flex-direction:column;max-height:86svh;border:6px double color-mix(in srgb,var(--letter-accent) 32%,transparent);border-radius:20px}.letter-heading{flex-shrink:0;height:auto;display:flex;justify-content:space-between;padding:19px 25px 8px;color:var(--letter-accent)}.letter-index{font-size:9px;font-weight:700;letter-spacing:1.7px}.letter-symbol{font-size:34px;line-height:1}.letter-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 26px 10px;text-align:center}.letter-scroll h2{color:var(--letter-accent);font-size:40px;margin:12px 0 24px}.letter-scroll p{text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;font-size:15px}.letter-paper>footer{height:auto;padding:16px 24px 21px;border-top:1px solid color-mix(in srgb,var(--letter-accent) 18%,transparent);flex-shrink:0}.letter-paper>footer button{width:100%;background:var(--letter-accent);border-color:var(--letter-accent)}.letter-seal{font-size:42px;display:block;margin:20px;color:var(--letter-accent)}#letter-figure{margin:0 0 20px;padding:9px;border:1px solid #d8c3b8;background:#fffdf5;box-shadow:0 4px 16px #51415a12;border-radius:10px}#letter-photo{width:100%;height:auto;max-height:300px;object-fit:contain;display:block;border-radius:5px}#letter-caption{font-family:var(--serif);font-size:20px;color:#7d6373;margin:10px 0 4px}.letter-paper[data-theme="gold"]{--letter-accent:#a47c37;--letter-bg:#fffbeb}.letter-paper[data-theme="garden"]{--letter-accent:#8b6aa4;--letter-bg:#f5eef9}.letter-paper[data-theme="sunset"]{--letter-accent:#b76966;--letter-bg:#fff0e6}.letter-paper[data-theme="stars"]{--letter-accent:#c5a864;--letter-bg:#26345d;color:#fff3dc}.letter-paper[data-theme="keepsake"]{--letter-accent:#af698e;--letter-bg:#fffdf2;border-color:#d7bb74}.letter-paper{animation:letter-open .28s ease}#collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:24px 0}#collection-grid button{min-height:85px;border:1px solid #d8bad0;border-radius:12px;background:#f5e4e9;color:#a45378;padding:10px;font-family:var(--serif);font-size:30px}#collection-grid button span{display:block;font-family:'DM Sans',sans-serif;font-size:10px;line-height:1.4;margin-top:6px}#collection-grid button:disabled{background:#eee8e8;color:#aa99a5;cursor:default}.collection-note{font-size:11px}.night-scene #objective{background:#26345de8;color:#fae6bc;border:1px solid #ceacc755}.night-scene .chapter-badge{background:#292e52e8;color:#fff0d4}.night-scene .chapter-badge span{color:#d7bfcf}@keyframes letter-open{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}@keyframes chapter-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(pointer:coarse),(max-width:700px){.touch-controls{display:flex}.mobile-help{display:inline}.desktop-help{display:none}.progress-track{bottom:39px;left:40%;right:40%}.interact-hint{bottom:102px}}
@media(max-width:700px){.app{padding:0 10px}header{height:68px}.brand-logo{width:93px;height:66px}.dedication{font-size:17px}.game-frame{height:calc(100svh - 111px);min-height:450px;border-radius:17px}.cover-logo{width:138px;height:100px}.welcome{top:3%}.welcome h1{font-size:48px;margin:10px 0}.welcome p{font-size:12px;margin:10px 0}.welcome .eyebrow{font-size:8px;letter-spacing:1.6px}.welcome .primary,.welcome .secondary{padding:10px 17px}.cover-links .text-button{font-size:10px;padding:8px}.cover-note{max-width:80%;margin:6px auto!important}.hud{top:12px;left:11px;right:11px;gap:6px}.chapter-badge{padding:3px 9px 3px 3px;gap:4px;max-width:65%;border-radius:18px}.chapter-badge img{width:40px;height:40px}.chapter-badge strong{font-size:18px;line-height:1;display:block}.chapter-badge span{font-size:7px;letter-spacing:1px}.letter-count{padding:0 10px;height:40px;font-size:12px;gap:3px}.letter-count span{font-size:20px}.hud .icon-button{width:36px;height:39px}.objective{top:71px;left:13px;font-size:10px;padding:6px 10px;max-width:84%}#toast{top:108px;font-size:11px;padding:10px 14px;width:max-content;max-width:90%}.chapter-banner{top:25%;padding:18px 22px}.chapter-banner strong{font-size:32px}.touch-controls{left:14px;right:14px;bottom:20px}.touch-controls button{width:57px;height:55px;border-radius:17px}.touch-controls .jump{width:66px;height:66px}.touch-controls>div{gap:8px}.progress-track{bottom:38px;left:41%;right:40%;font-size:16px}.intro-card{padding:22px}.intro-card h2{font-size:36px}.intro-card>img{width:140px;height:150px}.intro-card p{font-size:13px}.ending,.declaration{top:13%;left:5%;right:5%}.ending h1,.declaration h1{font-size:37px;line-height:1.1}.ending .eyebrow,.declaration .eyebrow{font-size:8px}.ending .start-buttons{gap:7px;margin-top:15px}.ending .primary,.ending .secondary{padding:10px 13px;font-size:11px}.paper{padding:27px 23px}.paper h2{font-size:37px}.letter-scroll{padding:0 18px 8px}.letter-scroll p{font-size:14px}.letter-heading{padding:18px 18px 6px}.letter-paper>footer{padding:13px 18px 17px}footer{height:42px;font-size:8px}.credits-controls{gap:6px;padding:0 15px}.credits-controls button{font-size:11px;padding:10px 13px}#credits-caption{font-size:19px}#credits-card{width:87%;padding:10px}}
@media(max-height:520px) and (orientation:landscape){.app{padding:0 8px}header{height:44px}.brand-logo{width:68px;height:42px}.dedication{font-size:15px}.icon-button{height:33px;width:33px;font-size:18px}.game-frame{height:calc(100svh - 52px);min-height:280px}footer{display:none}.welcome{top:1%}.cover-logo{width:83px;height:57px}.welcome h1{font-size:34px;margin:3px 0}.welcome p{font-size:10px;margin:5px 0}.welcome .eyebrow,.cover-note{display:none}.welcome .primary,.welcome .secondary{min-height:32px;padding:6px 13px}.welcome .text-button{padding:5px}.hud{top:9px}.chapter-badge{padding-top:0;padding-bottom:0}.chapter-badge img{height:36px;width:42px}.chapter-badge strong{font-size:18px}.objective{top:65px;font-size:10px}#toast{top:102px}.touch-controls{bottom:12px}.touch-controls button{width:49px;height:47px}.touch-controls .jump{width:56px;height:56px}.intro-card{max-height:94%;padding:14px;display:grid;grid-template-columns:90px 1fr;gap:4px 13px;align-items:center}.intro-card .eyebrow{grid-column:span 2}.intro-card>img{width:90px;height:105px;grid-row:2/5;margin:0}.intro-card .intro-ornament{display:none}.intro-card h2{font-size:28px;margin:4px}.intro-card p{font-size:12px;margin:2px}.intro-progress{margin:5px}.intro-card button{grid-column:2;min-height:30px}.ending,.declaration{top:9%}.ending h1,.declaration h1{font-size:33px;margin:7px}.ending .start-buttons{margin-top:9px}.ending button{min-height:32px;padding:6px 12px}.ending .text-button{padding:6px}.credits-heading{top:12px}.credits-controls{bottom:10px}#credits-photo{height:36vh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.credits-card{will-change:opacity}}

/* A single affectionate action, shared by mouse, keyboard and touch. */
.pet-button{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;justify-content:center;gap:8px;min-width:132px;height:48px;padding:8px 12px;border:2px solid #fff5e5;border-bottom:4px solid #b28aa2;border-radius:18px;background:#fff3e1ec;color:#935b80;box-shadow:0 3px 12px #3b244e2a;touch-action:manipulation;user-select:none;z-index:2;cursor:pointer}
.pet-button svg{width:26px;height:26px;fill:currentColor;flex-shrink:0}.pet-button span{font-size:9px;font-weight:700;letter-spacing:.7px}.pet-button kbd{font-size:10px}.pet-button:hover,.pet-button[aria-pressed="true"]{background:#f6dce9}.pet-button:active{transform:translateY(2px)}.pet-button:focus-visible{outline:3px solid #a55e89;outline-offset:3px}
@media(pointer:coarse),(max-width:700px){.pet-button{right:18px;bottom:105px;min-width:0;width:73px;height:60px;padding:6px 2px;flex-direction:column;gap:2px;border-radius:19px}.pet-button svg{width:25px;height:25px}.pet-button span{font-size:8px;letter-spacing:.4px}.pet-button kbd{display:none}.interact-hint{bottom:178px;max-width:80%}}
@media(max-width:700px){.pet-button{right:14px;bottom:98px;width:66px;height:59px}}
@media(max-height:520px) and (orientation:landscape){.pet-button{right:18px;bottom:79px;width:56px;height:52px;min-width:0;padding:4px 1px;flex-direction:column;gap:1px}.pet-button svg{width:21px;height:21px}.pet-button span{font-size:7px}.pet-button kbd{display:none}.interact-hint{bottom:146px}}

/* Progress changes do not reflow the HUD. Preserve native canvas resolution. */
#intro-progress{width:100%;transform:scaleX(0);transform-origin:left}

/* A lightweight 3D phone demonstrates the gesture before a portrait start. */
#rotate-dialog{width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);border:1px solid #ead3df;border-radius:26px;background:linear-gradient(155deg,#fffaf0,#f7eaf1);overflow:auto}
#rotate-dialog::backdrop{background:#30244491;backdrop-filter:blur(6px)}
.rotate-card{position:relative;text-align:center;padding:30px 25px 20px}
.rotate-close{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#926c86;font-size:26px}
.rotate-close:hover{background:#eacbdc55}
.rotate-card .eyebrow{font-size:9px;letter-spacing:2px;margin:1px 20px 0}
.rotate-card h2{font-size:38px;margin:8px 0 12px;color:#705071}
.rotate-card p{font-size:14px;line-height:1.6;color:#80687d;margin:0}
.rotate-card #rotate-status{font-size:11px;line-height:1.6;color:#9a758e;margin:17px 0 3px}
.rotate-card .text-button{min-height:44px;font-size:12px;padding:10px 12px}
.rotate-illustration{position:relative;width:230px;height:170px;margin:10px auto 0;perspective:600px}
.rotation-arc{position:absolute;inset:0;width:100%;height:100%;color:#ce9c72;opacity:.75}
.rotate-phone{position:absolute;left:76px;top:23px;width:78px;height:132px;border:4px solid #c89bbf;border-radius:17px;background:linear-gradient(135deg,#946b9b,#60466c);box-shadow:5px 5px 0 #6b486f,9px 15px 22px #61456827;transform-style:preserve-3d;transform:rotateX(10deg) rotateY(-18deg)}
#rotate-dialog[open] .rotate-phone{animation:rotate-to-play 3.8s cubic-bezier(.45,0,.2,1) infinite}
.rotate-phone::before{content:'';position:absolute;top:6px;left:22px;width:26px;height:5px;background:#493952;border-radius:10px;z-index:2}
.rotate-phone::after{content:'';position:absolute;bottom:5px;left:25px;width:20px;height:3px;background:#d8bddb;border-radius:10px;z-index:2}
.rotate-phone-screen{position:absolute;inset:3px;border-radius:10px;overflow:hidden;background:linear-gradient(#b9bff2,#f8d9de 70%,#eddbb2);border:1px solid #efe0f2}
.rotate-phone-screen::before{content:'';position:absolute;width:19px;height:19px;right:8px;top:22px;border-radius:50%;background:#fff0c0;box-shadow:0 0 15px #ffe7ae}
.rotate-phone-screen span{position:absolute;left:11px;top:43px;font-size:27px;color:#af5c90;text-shadow:0 2px 0 #fff2e5}
.rotate-phone-screen i{position:absolute;left:-15px;right:-15px;bottom:-11px;height:38px;border-radius:50% 50% 0 0;background:linear-gradient(#c4d69d,#a2b783)}
.rotation-sparkle{position:absolute;left:26px;bottom:12px;color:#d3ac6c;font-size:23px}
@keyframes rotate-to-play{0%,14%,100%{transform:rotateX(10deg) rotateY(-18deg) rotateZ(0deg)}48%,78%{transform:rotateX(10deg) rotateY(-18deg) rotateZ(-90deg)}}
@media(prefers-reduced-motion:reduce){#rotate-dialog[open] .rotate-phone{animation:none;transform:rotateX(10deg) rotateY(-18deg) rotateZ(-90deg)}}
@media(max-height:600px){.rotate-card{padding:25px 22px 13px}.rotate-illustration{height:145px;margin-top:2px;scale:.86;transform-origin:center center;margin-bottom:-10px}.rotate-card h2{font-size:33px}.rotate-card p{font-size:13px}.rotate-card #rotate-status{margin-top:12px}}

/* The canvas fills the available screen; controls stay within the safe area. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
.app{width:100%;max-width:none;height:100svh;height:100dvh;margin:0;padding:0}
.app>.game-frame{width:100%;height:100%;min-height:0;border:0;border-radius:0;box-shadow:none}
.hud{top:calc(var(--safe-top) + 18px);left:calc(var(--safe-left) + 18px);right:calc(var(--safe-right) + 18px);z-index:8;pointer-events:none}
.hud button{pointer-events:auto}
.chapter-badge{min-width:0;flex:0 1 auto}
.chapter-badge>div{min-width:0}
.chapter-badge img{flex-shrink:0}
.hud-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.hud-actions .letter-count{margin-left:0;white-space:nowrap;height:44px}
.hud-actions .icon-button{width:44px;height:44px}
.objective{top:calc(var(--safe-top) + 90px);left:calc(var(--safe-left) + 22px)}
#toast{top:calc(var(--safe-top) + 132px)}
.welcome{top:calc(var(--safe-top) + 3%);left:calc(var(--safe-left) + 3%);right:calc(var(--safe-right) + 3%)}
.touch-controls{left:calc(var(--safe-left) + 18px);right:calc(var(--safe-right) + 18px);bottom:calc(var(--safe-bottom) + 20px)}
.pet-button{right:calc(var(--safe-right) + 20px);bottom:calc(var(--safe-bottom) + 20px)}
.progress-track{bottom:calc(var(--safe-bottom) + 22px)}
.interact-hint{bottom:calc(var(--safe-bottom) + 90px)}
.credits-heading{top:calc(var(--safe-top) + 24px);left:calc(var(--safe-left) + 25px);right:calc(var(--safe-right) + 80px)}
.credits-controls{bottom:calc(var(--safe-bottom) + 24px)}
.letter-paper>footer{display:flex}
@media(pointer:coarse),(max-width:700px){
  .pet-button{right:calc(var(--safe-right) + 18px);bottom:calc(var(--safe-bottom) + 105px)}
  .progress-track{bottom:calc(var(--safe-bottom) + 39px)}
  .interact-hint{bottom:calc(var(--safe-bottom) + 178px)}
}
@media(max-width:700px){
  .hud{top:calc(var(--safe-top) + 12px);left:calc(var(--safe-left) + 10px);right:calc(var(--safe-right) + 10px);gap:6px}
  .chapter-badge{max-width:none;padding:3px 8px 3px 3px;gap:4px}
  .chapter-badge strong{font-size:17px;line-height:1.1}
  .chapter-badge span{white-space:nowrap;letter-spacing:.7px}
  .hud-actions{gap:6px}
  .hud-actions .letter-count{padding:0 8px}
  .objective{top:calc(var(--safe-top) + 76px);left:calc(var(--safe-left) + 12px);max-width:calc(100% - var(--safe-left) - var(--safe-right) - 24px)}
  #toast{top:calc(var(--safe-top) + 118px)}
  .touch-controls{left:calc(var(--safe-left) + 14px);right:calc(var(--safe-right) + 14px)}
  .pet-button{right:calc(var(--safe-right) + 14px);bottom:calc(var(--safe-bottom) + 98px)}
  .progress-track{bottom:calc(var(--safe-bottom) + 38px)}
}
@media(max-width:360px){
  .hud{left:calc(var(--safe-left) + 8px);right:calc(var(--safe-right) + 8px)}
  .chapter-badge img{width:30px;height:36px}
  .chapter-badge strong{font-size:15px}
  .chapter-badge span{font-size:6px}
  .hud-actions{gap:4px}
  .hud-actions .letter-count{padding:0 6px}
  .progress-track{left:46%;right:28%;gap:5px}
}
@media(max-height:520px) and (orientation:landscape){
  .hud{top:calc(var(--safe-top) + 9px)}
  .objective{top:calc(var(--safe-top) + 64px)}
  #toast{top:calc(var(--safe-top) + 102px)}
  .welcome{top:calc(var(--safe-top) + 1%)}
  .touch-controls{display:flex;bottom:calc(var(--safe-bottom) + 12px)}
  .pet-button{right:calc(var(--safe-right) + 18px);bottom:calc(var(--safe-bottom) + 79px)}
  .interact-hint{bottom:calc(var(--safe-bottom) + 146px)}
  .credits-heading{top:calc(var(--safe-top) + 12px)}
  .credits-controls{bottom:calc(var(--safe-bottom) + 10px)}
}