.phone { width:min(100%,430px); min-height:min(690px,100dvh); }
.notice { height:34px; margin-top:8px; }
.belt-label,.hanging,.machine>span { display:none; }
.modal .result-stats:empty,.modal .save-status:empty,#modalHint:empty { display:none; }
.best-score[hidden],.help-details[hidden],.text-btn[hidden] { display:none; }
.help-details { margin:12px 0; color:#7e9268; font-size:11px; }
.help-details summary { cursor:pointer; padding:6px; }
.help-details .level-details { text-align:left; line-height:1.9; }
.text-btn { border:0; background:none; color:#78905e; font:inherit; font-size:11px; padding:8px; cursor:pointer; }
.modal>#lessonBtn { display:block; margin:7px auto 0; }
.modal>#lessonBtn[hidden] { display:none; }
.tutorial-coach { display:none; position:absolute; z-index:25; bottom:12px; left:16px; right:16px; padding:12px 16px 14px; border:2px solid #d4dfb6; border-radius:19px; background:#fffef0; box-shadow:0 5px 24px #38503826; }
.phone[data-phase=tutorial] .tutorial-coach:not([hidden]) { display:block; }
.tutorial-top { display:flex; justify-content:space-between; align-items:center; color:#8a9c70; font-size:10px; }
.tutorial-coach h2 { margin:4px 0 7px; font-size:17px; color:#517448; }
.tutorial-coach p { margin:0 0 10px; font-size:12px; color:#80916c; line-height:1.6; }
.tutorial-next { width:100%; padding:10px; border:0; border-radius:10px; background:#99b779; color:#fff; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.tutorial-next[hidden] { display:none; }
.phone[data-phase=tutorial] .rabbit-speech { visibility:hidden; }
.belt-items .cookie.tutorial-target { border-radius:50%; outline:3px solid #f5d47d; outline-offset:5px; filter:drop-shadow(0 0 5px #fff5b0); animation:tutorial-glow 1.2s ease-in-out infinite alternate; }
.tutorial-speed { outline:3px solid #a3bd78; border-radius:12px; }
@keyframes tutorial-glow { to { outline-offset:9px; filter:drop-shadow(0 0 10px #fff5b0); } }
@media(prefers-reduced-motion:reduce) { .cookie.tutorial-target { animation:none; } }
.campaign-toolbar { display:flex; gap:7px; margin:8px 17px 0; flex-shrink:0; height:30px; }
.campaign-toolbar button { flex:1; border:1px solid #cdd9b5; border-radius:9px; background:#f9f9e7; color:#68835b; font-size:10px; font-weight:800; cursor:pointer; }
.campaign-toolbar button:first-child { flex:0 0 auto; padding:0 14px; }
.campaign-toolbar button:disabled { opacity:.5; cursor:default; }
.modal-nav { display:flex; gap:6px; margin:10px 0; }
.modal-nav button { flex:0 0 calc((100% - 12px)/3); border:1px solid #d1ddbb; border-radius:8px; background:#f1f5de; color:#63834e; padding:8px 3px; font:inherit; font-size:10px; cursor:pointer; }
.modal-nav button:disabled { opacity:.5; cursor:default; }
.campaign-level { font-size:11px; color:#8b9e68; font-weight:900; margin:4px 0 9px; }
.modal .level-details { font-size:10px; color:#8d9775; line-height:1.8; margin:8px 0; }
.modal .title-award { font-size:13px; color:#9a7b3f; padding:10px; background:#f4e9bd; border:1px solid #daca8d; border-radius:10px; margin:9px 0; }
.modal .title-award[hidden],.secondary-btn[hidden] { display:none; }
.secondary-btn { border:1px solid #b7c99c; background:#f3f5de; color:#668251; font-family:inherit; padding:9px 12px; border-radius:10px; cursor:pointer; font-size:11px; }
.modal .secondary-btn { width:100%; margin-top:10px; }
.modal .save-status { font-size:10px; color:#aa805b; min-height:13px; margin:6px 0; }
.modal { max-height:calc(100% - 12px); overflow-y:auto; }
.modal-art { height:95px; }
.modal h2 { font-size:20px; }
.campaign-sheet { position:absolute; inset:12px; z-index:40; display:flex; flex-direction:column; background:#fafbea; border:2px solid #d4dfbe; border-radius:21px; box-shadow:0 10px 45px #3e573c4d; }
.campaign-sheet[hidden] { display:none; }
.sheet-header { display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid #dce3cb; }
.sheet-header h2 { font-size:16px; margin:0; color:#52714c; }
#sheetClose { border:0; background:#e7edcf; border-radius:10px; padding:7px 12px; color:#60784a; cursor:pointer; }
#sheetBody { overflow-y:auto; padding:12px; flex:1; min-height:0; }
.sheet-note { font-size:11px; line-height:1.8; color:#82916e; margin:0 0 10px; }
.stage-card { border:1px solid #dce5ca; border-left:4px solid var(--stage-color); background:#fffef1; border-radius:13px; padding:11px 8px; margin-bottom:12px; }
.stage-card h3,.title-card h3,.profile-editor h3 { font-size:13px; color:#526e49; margin:0 0 5px; }
.stage-card p,.title-card p { font-size:10px; line-height:1.6; color:#93a07d; margin:0 0 9px; }
.level-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.level-tile { border:1px solid #d6dfbd; border-radius:9px; padding:8px 2px; background:#f6f7e3; color:#71925c; cursor:pointer; display:flex; flex-direction:column; gap:4px; align-items:center; }
.level-tile b { font-size:17px; }
.level-tile span { font-size:8px; white-space:nowrap; }
.level-tile small { font-size:8px; color:#b7a267; }
.level-tile:disabled { opacity:.45; cursor:default; }
.level-tile.completed { background:#e7efcf; }
.level-tile.selected { box-shadow:0 0 0 2px #a0bd75 inset; }
.title-card { display:flex; gap:14px; padding:16px 9px; border-bottom:1px solid #dce5ca; opacity:.55; }
.title-card.earned { opacity:1; }
.title-medal { width:48px; height:48px; display:grid; place-items:center; font-size:27px; border-radius:50%; color:var(--stage-color); background:#f2efd4; border:2px solid currentColor; flex-shrink:0; }
.rank-row { display:flex; align-items:center; gap:10px; padding:12px 6px; border-bottom:1px solid #dce5ca; }
.rank-row.is-me { background:#e9efce; border-radius:9px; }
.rank-number { width:22px; font-size:17px; color:#b09d62; }
.rank-info { flex:1; min-width:0; }
.rank-info strong { font-size:12px; display:block; overflow-wrap:anywhere; }
.rank-info small { font-size:9px; color:#8c9b78; }
.rank-points { font-size:15px; color:#6e8b54; }
.self-rank { font-size:12px; font-weight:800; color:#70905d; }
.empty-state { padding:30px 10px; text-align:center; font-size:12px; line-height:1.9; color:#8e9b73; }
.profile-editor { margin:22px 0 12px; padding-top:15px; border-top:1px dashed #cdd8b6; }
.profile-editor input,.profile-editor select { width:100%; padding:10px; margin:6px 0; border:1px solid #cedab5; background:#fffef2; color:#60784e; border-radius:9px; }
.profile-editor small { color:#8f9d76; font-size:9px; }
@media(max-height:760px){.campaign-toolbar{height:27px;margin-top:5px;}.factory{min-height:260px;}.bottom-panel{height:70px;}footer{height:20px;font-size:8px;}.modal-art{height:65px;}.modal{padding:16px 18px;}.level-details{margin:4px 0;}}

/* A quiet home for progress, the next rescue and sharing. */
.lobby { position:absolute; inset:0; z-index:30; padding:20px 20px 16px; overflow-y:auto; background:linear-gradient(160deg,#f9f6e6 20%,#e6edcf); color:#476650; display:flex; flex-direction:column; gap:16px; }
.lobby[hidden] { display:none; }
.lobby-header { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.lobby-header span { font-size:10px; letter-spacing:2px; color:#8fa079; }
.lobby-header h1 { margin:5px 0 0; font-size:23px; letter-spacing:2px; color:#365f4e; }
.rescue-preview { position:relative; flex-shrink:0; min-height:160px; overflow:hidden; border-radius:20px; border:1px solid #d4dfbb; background:#dce7c5; isolation:isolate; }
.rescue-preview::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#e9efd4ee 15%,#e2ebc670),url('assets/art/spring-garden.svg') center 30%/cover; transition:filter .5s; }
.rescue-preview[data-stage="2"]::before { filter:hue-rotate(20deg); }
.rescue-preview[data-stage="3"]::before { filter:hue-rotate(37deg); }
.rescue-preview[data-stage="4"]::before { filter:hue-rotate(-15deg); }
.rescue-preview[data-stage="5"]::before { filter:hue-rotate(-28deg); }
.preview-copy { position:relative; z-index:1; width:66%; padding:17px 14px 42px; pointer-events:none; }
.preview-copy>span { font-size:9px; color:#68845d; letter-spacing:1px; }
.preview-copy h2 { margin:8px 0; font-size:18px; line-height:1.4; color:#41654a; }
.preview-copy p { margin:0; font-size:11px; line-height:1.7; color:#6c8562; }
.preview-art { position:absolute; right:-1%; top:6px; width:40%; height:127px; pointer-events:none; }
.preview-art i { position:absolute; width:105px; height:105px; background:#fff8c879; border-radius:50%; bottom:5px; left:7px; }
#previewSpirit { position:absolute; width:110px; height:120px; object-fit:contain; right:-5px; top:0; transform:rotate(7deg); }
#previewSeed { position:absolute; width:36px; height:36px; left:-5px; bottom:5px; transform:rotate(-13deg); }
.preview-controls { position:absolute; bottom:9px; left:12px; right:12px; display:flex; align-items:center; gap:8px; }
.preview-controls>button { width:24px; height:24px; padding:0; border:0; border-radius:50%; background:#fff9dfaa; color:#69845b; cursor:pointer; }
.preview-controls #previewPause { margin-left:auto; font-size:10px; }
.preview-dots { display:flex; gap:3px; }
.preview-dots button { width:20px; height:24px; padding:8px 6px; border:0; background:none; cursor:pointer; }
.preview-dots button::before { content:''; display:block; width:6px; height:6px; border-radius:5px; background:#a6b995; }
.preview-dots button[aria-current="true"]::before { background:#527d51; width:12px; margin-left:-3px; }
.lobby-progress { border:1px solid #dedfc3; background:#fffef1; border-radius:22px; padding:16px; box-shadow:0 5px 0 #d8e0bc55; flex-shrink:0; }
.traveler { display:flex; align-items:center; gap:9px; padding-bottom:14px; border-bottom:1px dashed #dce4c8; }
.traveler-avatar { width:42px; height:42px; background:#edf1d6; border-radius:50%; flex-shrink:0; overflow:hidden; }
.traveler-avatar img { width:100%; height:100%; object-fit:cover; }
.traveler>div:nth-child(2) { min-width:0; flex:1; }
.traveler h2 { margin:0 0 4px; font-size:14px; overflow-wrap:anywhere; }
.traveler button { background:none; border:0; padding:0; font-size:10px; color:#9a9b68; text-align:left; cursor:pointer; }
#lobbyMode { font-size:8px; color:#92a080; background:#f1f4df; border-radius:6px; padding:4px 6px; white-space:nowrap; }
.journey-heading { display:flex; justify-content:space-between; align-items:end; margin:16px 0 12px; }
.journey-heading span { display:block; font-size:10px; color:#91a07c; margin-bottom:4px; }
.journey-heading strong { font-size:31px; line-height:1.2; color:#577c51; }
.journey-heading small { font-size:11px; font-weight:400; color:#8da177; }
.lobby-stars { color:#b69651; font-size:15px; padding-bottom:4px; }
.lobby-stars small { display:block; text-align:right; font-size:9px; }
.lobby-progress-track { height:10px; border-radius:12px; background:#e9edda; overflow:hidden; }
.lobby-progress-track i { display:block; height:100%; width:0; border-radius:12px; background:linear-gradient(90deg,#c1d488,#7ba474); transition:width .4s; }
.lobby-milestones { display:grid; grid-template-columns:repeat(6,1fr); margin-top:9px; }
.lobby-milestones button { display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0; padding:0; color:#acb59a; cursor:pointer; }
.lobby-milestones i { display:grid; place-items:center; border:1px solid #dfe5cd; background:#f2f4e7; border-radius:50%; font-size:17px; font-style:normal; width:28px; height:28px; }
.lobby-milestones small { font-size:8px; }
.lobby-milestones .earned { color:#789158; }
.lobby-milestones .earned i { background:#e4edc5; border-color:#aabf80; color:#799354; }
.lobby-next-title { text-align:center; color:#8a9b72; font-size:10px; margin:12px 0; }
.lobby-current { display:flex; align-items:center; gap:8px; background:#f0f3df; padding:10px; border-radius:12px; }
#lobbyCurrentIcon { color:#8baa69; font-size:25px; }
.lobby-current div { flex:1; min-width:0; }
.lobby-current small { display:block; font-size:9px; color:#93a17b; margin-bottom:3px; }
.lobby-current strong { font-size:11px; color:#65805a; }
.lobby-current button { border:0; background:none; color:#8b9b72; font-size:10px; padding:3px; cursor:pointer; }
.lobby-actions { display:flex; flex-direction:column; gap:10px; flex-shrink:0; }
.lobby-primary { width:100%; min-height:51px; background:linear-gradient(#9bbd7d,#85a96a); border:1px solid #86a763; border-radius:14px; box-shadow:0 4px 0 #668d51; color:#fffdef; font:inherit; font-size:16px; font-weight:800; cursor:pointer; }
.lobby-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #668d51; }
.lobby-primary:disabled { opacity:.55; cursor:default; }
.lobby-retry { border:1px solid #ced9b4; background:#f7f7e7; color:#879a6d; border-radius:11px; min-height:36px; font-size:11px; cursor:pointer; }
.lobby-retry[hidden] { display:none; }
.lobby-shortcuts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; flex-shrink:0; }
.lobby-shortcuts button { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; background:#fffcee99; border:1px solid #dbe2c5; border-radius:13px; font:inherit; font-size:11px; color:#7c9066; cursor:pointer; }
.lobby-shortcuts span { font-size:22px; color:#9caa71; }
.lobby-status { margin:0; font-size:10px; color:#a78461; line-height:1.6; }
.lobby-status:empty { display:none; }
.lobby-footer { margin:auto 0 0; padding-top:3px; text-align:center; font-size:9px; color:#a3af8b; letter-spacing:1px; }
.result-links { display:flex; justify-content:center; gap:12px; }
.share-card { position:relative; overflow:hidden; border:1px solid #d5dfb8; border-radius:18px; background:linear-gradient(#f4f3daeb,#edf1d8eb),url('assets/art/spring-garden.svg') center/cover; text-align:center; padding:20px; margin-bottom:14px; }
.share-card img { display:block; width:105px; height:100px; object-fit:contain; margin:0 auto; }
.share-card h3 { margin:4px 0 9px; font-size:18px; color:#52774a; }
.share-card strong { font-size:25px; color:#76935a; }
.share-card p { font-size:11px; color:#8b9971; line-height:1.7; overflow-wrap:anywhere; }
.share-copy { width:100%; min-height:88px; border:1px solid #d8e0c4; background:#fffef1; border-radius:10px; padding:10px; color:#6d855b; font:inherit; font-size:11px; line-height:1.7; resize:vertical; }
.share-buttons { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
@media(max-height:760px) { .lobby { padding:15px 16px; gap:12px; } .lobby-header h1 { font-size:20px; } .rescue-preview { min-height:143px; } .preview-copy { padding-top:12px; padding-bottom:36px; } .preview-copy h2 { font-size:16px; margin:6px 0; } .lobby-progress { padding:13px; } .traveler { padding-bottom:10px; } .journey-heading { margin:12px 0 9px; } .journey-heading strong { font-size:27px; } .lobby-next-title { margin:9px 0; } .lobby-shortcuts button { padding:8px 4px; } }
@media(prefers-reduced-motion:reduce) { .rescue-preview::before,.lobby-progress-track i { transition:none; } }@media(max-height:850px) {
  .lobby { gap:10px; padding:14px 16px; }
  .rescue-preview { min-height:130px; }
  .preview-copy { padding:11px 12px 34px; }
  .preview-copy h2 { font-size:16px; margin:5px 0; }
  .preview-copy p { font-size:10px; }
  .preview-art { height:105px; }
  #previewSpirit { height:98px; width:98px; }
  .lobby-progress { padding:11px 13px; }
  .traveler { padding-bottom:8px; }
  .traveler-avatar { width:32px; height:32px; }
  .traveler h2 { font-size:12px; margin-bottom:2px; }
  .journey-heading { margin:9px 0 7px; }
  .journey-heading strong { font-size:25px; }
  .journey-heading span { font-size:9px; margin-bottom:2px; }
  .lobby-progress-track { height:8px; }
  .lobby-milestones { margin-top:7px; }
  .lobby-milestones i { width:24px; height:24px; font-size:15px; }
  .lobby-milestones button { gap:2px; }
  .lobby-next-title { font-size:9px; margin:7px 0; }
  .lobby-current { padding:8px; }
  .lobby-current small { font-size:8px; }
  .lobby-primary { min-height:46px; font-size:14px; }
  .lobby-retry { min-height:31px; }
  .lobby-shortcuts button { gap:4px; padding:8px 4px; font-size:10px; }
  .lobby-shortcuts span { font-size:18px; }
  .lobby-footer { font-size:8px; padding:0; }
}
@media(max-height:620px) { .lobby { gap:8px; padding:12px 14px; } .lobby-header h1 {font-size:19px;} .lobby-header span {font-size:9px;} .rescue-preview {min-height:123px;} .lobby-footer {display:none;} .lobby-shortcuts button {padding:6px 4px;} }
.lobby-primary:focus-visible { outline:3px solid #b9cd99; outline-offset:3px; }
.overlay.hidden { visibility:hidden; }

.difficulty-picker { flex-shrink:0; padding:11px 13px; border:1px solid #d6e0bd; border-radius:14px; background:#f9faeb; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 12px; }
.difficulty-picker>span { font-size:11px; color:#83986c; }
.difficulty-picker>div { display:flex; gap:6px; }
.difficulty-picker button { flex:1; min-height:36px; padding:6px 7px; border:1px solid #d7e0c3; border-radius:9px; background:#fffef3; color:#8a9c76; font:inherit; font-size:12px; cursor:pointer; }
.difficulty-picker button small { display:block; margin-top:2px; font-size:8px; font-weight:400; }
.difficulty-picker button[aria-pressed=true] { background:#e2edc9; border-color:#9eb878; color:#547547; box-shadow:inset 0 0 0 1px #b6cb92; font-weight:800; }
.difficulty-picker button:disabled { opacity:.5; cursor:default; }
#difficultyHint { grid-column:1/-1; margin:0; color:#99a782; font-size:9px; text-align:right; }
@media(max-height:850px) { .difficulty-picker { padding:8px 11px; gap:5px 10px; } .difficulty-picker button {min-height:32px;padding:4px;} }
/* Each mission supplies its own pair of illustrated objects. */
.factory .belt-items .cookie { background-image:var(--item-art)!important; }
.legend .cookie { background-image:var(--item-art); }
.legend b { font-weight:inherit; }
.legend { font-size:8px; }
.bottom-panel { grid-template-columns:1fr 116px; gap:10px; }
.collection-guide { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0 4px; }
.collection-guide[hidden] { display:none; }
.collection-guide>div { display:flex; flex-direction:column; align-items:center; padding:8px; border:1px solid #e4d6ba; border-radius:12px; background:#f9f0db; }
.collection-guide .sample-keep { border-color:#d3dfb8; background:#edf3db; }
.collection-guide span { font-size:10px; color:#a88159; }
.collection-guide .sample-keep span { color:#839c64; }
.collection-guide img { width:62px; height:62px; object-fit:contain; margin:4px 0; }
.collection-guide b { font-size:11px; color:#6e8057; }
.modal .collection-guide p { grid-column:1/-1; font-size:10px; color:#9a926b; margin:0; }
.phone[data-phase=ready] .modal-art { display:none; }
.level-tile img { width:29px; height:29px; object-fit:contain; }
#lobbyCurrentIcon img { width:35px; height:35px; object-fit:contain; display:block; }
@media(max-height:650px) { .collection-guide img {width:46px;height:46px;} .collection-guide {margin-top:8px;} }