/* Phone pages for the story, the knowledge cards' further parts and the chapter pages. Loaded only on a phone
   (the same condition as phone.css) and after every other stylesheet, so nothing here has to out-shout a wide rule. */

/* The start page: the name, 咚咚 and one button. There is no navigation yet. */
body[data-phone-screen=start] header{display:none;}
body[data-phone-screen=start] #main{padding:0;}
.story-start{box-sizing:border-box;min-height:100dvh;flex-direction:column;gap:0;padding:max(24px,env(safe-area-inset-top)) 0 max(28px,env(safe-area-inset-bottom));}
.story-start>div{display:contents;}
.story-start .eyebrow{order:1;font-size:15px;letter-spacing:3px;}
.story-start h1{order:2;font-size:46px;margin:6px 0 0;}
.story-start>img{order:3;flex:1 1 0;min-height:0;width:min(74vw,300px);max-height:none;margin:8px 0 14px;}
.story-start .primary{order:4;min-width:210px;min-height:60px;font-size:23px;}

/* The story: 咚咚 above her words. */
.story-stage{max-width:none;max-height:none;width:100%;height:100dvh;padding:0;border-radius:0;}
.story-speaker{height:64%;width:80%;left:10%;bottom:24%;}
.story-box{left:14px;right:14px;bottom:max(16px,env(safe-area-inset-bottom));padding:15px 18px;}
.story-box>b{font-size:20px;}
.story-box .story-words{font-size:19px;line-height:1.7;min-height:5.1em;}

/* A level's first card: 咚咚 beside her line, the drawing of what to do, the buttons. */
.warehouse .overlay{gap:6px;}
.overlay .story-bubble{gap:8px;padding:7px 10px;}
.overlay .story-bubble>img{width:44px;height:57px;}
.overlay .story-bubble p{font-size:14px!important;line-height:1.5!important;}
.overlay .story-bubble .voice-button{margin-top:4px;}
.overlay .story-bubble rt{font-size:12px;}

/* Knowledge cards: the parts are tabs. In the collection a card shows the words alone; in the card dialog 咚咚
   stands beside them. */
.knowledge-tabs{flex-wrap:nowrap;gap:4px;margin:5px 0;}
.knowledge-tabs button{font-size:13px;padding:4px 7px;flex:1;white-space:nowrap;}
.knowledge-part{min-height:0;}
.knowledge-part p{font-size:15px;line-height:1.6;margin:4px 0;}
.knowledge-part .voice-button{margin:3px 0 0;}
.collection.phone-deck{height:calc(100dvh - 310px);min-height:240px;}
.collection.phone-deck .city-knowledge{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto minmax(80px,1fr) auto;gap:4px;padding:10px;min-height:0;}
.collection.phone-deck .city-knowledge h3{grid-column:1;grid-row:1;font-size:16px;margin:0;}
.collection.phone-deck .knowledge-tabs{grid-column:1;grid-row:2;}
.collection.phone-deck .phone-city-picture{grid-column:1;grid-row:3;margin:0 auto;width:auto;height:100%;max-height:180px;aspect-ratio:1;align-self:center;min-height:0;}
.collection.phone-deck .phone-city-picture .city-art{width:100%;height:100%;}
.collection.phone-deck .knowledge-part{grid-column:1;grid-row:4;}
.collection-tabs{gap:6px;flex-wrap:nowrap;margin:6px 0;}
.collection-tabs button{font-size:13px;padding:4px 8px;}
.knowledge-detail .city-knowledge{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto minmax(80px,1fr) auto;gap:5px;height:calc(100dvh - 170px);min-height:0;}
.knowledge-detail .city-knowledge h3{grid-column:1;grid-row:1;font-size:17px;margin:0;}
.knowledge-detail .knowledge-tabs{grid-column:1;grid-row:2;}
.knowledge-detail .phone-city-picture{grid-column:1;grid-row:3;width:auto;height:100%;max-height:230px;aspect-ratio:1;margin:0 auto;min-height:0;}
.knowledge-detail .phone-city-picture .city-art{width:100%;height:100%;}
.knowledge-detail .knowledge-says{grid-column:1;grid-row:4;gap:10px;}
.knowledge-detail .knowledge-guide{width:56px;height:73px;margin-top:8px;}
/* The longest part is four lines here; the same height for every part keeps the picture from jumping between tabs. */
.knowledge-detail .knowledge-part{min-height:164px;padding:8px 12px;}
.knowledge-detail .knowledge-part:before{top:26px;}

/* The result's second page: 咚咚 beside what she says about the city. */
#modal .phone-result-deck .result-knowledge{display:flex;align-items:center;gap:10px;animation:none;}
.phone-result-deck .knowledge-panda{display:block;width:60px;height:78px;flex:0 0 60px;margin:0;}
.phone-result-deck .knowledge-bubble{flex:1;min-width:0;}
.phone-result-deck .knowledge-bubble:before{display:block;top:calc(50% - 8px);}
.phone-result-deck .knowledge-bubble .knowledge-zoom{width:112px;height:112px;margin:6px auto;}
.phone-result-deck .knowledge-zoom .city-art{width:112px;height:112px;}
.phone-result-deck .voice-button,.phone-result-deck .knowledge-more{display:inline-flex;align-items:center;vertical-align:top;margin:6px 6px 0 0;}
.phone-result-deck .knowledge-more{min-height:44px;padding:4px 12px;font-size:14px;}
.phone-result-deck .new-card-tag{left:2px;right:auto;top:2px;}

/* A chapter picture, opened large. */
.illustration-card>img,.illustration-silhouette{min-height:0;height:65%;object-fit:contain;}
.illustration-viewer{padding:10px;width:calc(100% - 24px);}
.illustration-viewer img{max-height:calc(100dvh - 180px);}
.illustration-viewer figcaption{font-size:16px;}

/* The end of a chapter fills the screen: the picture, 咚咚's words, the badge. */
body[data-phone-screen=chapter] header{display:none;}
body[data-phone-screen=chapter] #main{padding:max(8px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom));}
.chapter-reveal{box-sizing:border-box;height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));margin:0;padding:12px!important;gap:10px;}
.chapter-reveal-heading h1{font-size:25px;margin:5px 0;}
.chapter-reveal-heading .eyebrow{font-size:13px;letter-spacing:1px;}
.chapter-reveal-body{display:flex;flex-direction:column;gap:10px;}
.chapter-reveal-art{flex:1;min-height:95px;--bar:32px;}
.chapter-reveal-art>span:last-child{font-size:13px;}
.chapter-reveal-copy{gap:6px;}
.chapter-reveal-copy .story-bubble{gap:8px;padding:8px 10px;}
.chapter-reveal-copy .story-bubble>img{width:48px;height:62px;}
.chapter-reveal-copy .story-bubble p{font-size:15px!important;line-height:1.55!important;}
.chapter-reveal-seal .city-art{width:40px;height:40px;}
.chapter-reveal-seal{font-size:14px;gap:8px;}
.chapter-reveal-progress{font-size:13px;}
.chapter-reveal-actions{gap:6px;}
.chapter-reveal-actions button{padding:5px 8px;font-size:13px;flex:1;}

/* The journey page has the whole height: the name bar gives its room to the cards. What flies about on the first
   card stays inside the card. */
body[data-phone-screen=finale] header{display:none;}
body[data-phone-screen=finale] #main{padding-top:max(8px,env(safe-area-inset-top));}
body[data-phone-screen=finale] .journey-finale{margin:0;}
.phone-finale-deck.phone-deck{height:calc(100dvh - 126px - max(8px,env(safe-area-inset-top)) - env(safe-area-inset-bottom));min-height:0;}
.phone-finale-deck.phone-deck>.finale-hero{overflow:hidden;}
/* Its route map, upright: the map, under it the chosen stretch, then the five badges in a row. */
.phone-finale-deck>.finale-layout{display:flex;flex-direction:column;gap:8px;overflow:hidden;}
.phone-finale-deck .journey-map-panel{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;padding:8px 10px;}
.phone-finale-deck .map-head{flex:none;flex-wrap:nowrap;gap:6px;margin:0;}
.phone-finale-deck .map-head h2{flex:1;min-width:0;font-size:16px;letter-spacing:0;white-space:nowrap;}
.phone-finale-deck .map-head button{flex:none;min-height:44px;margin:0;padding:5px 8px;font-size:13px;white-space:nowrap;}
.phone-finale-deck .journey-map-scroll{flex:none;}
.phone-finale-deck .finale-route{flex:1;min-height:0;margin:0;padding:6px 8px;overflow:hidden;font-size:13px;}
.phone-finale-deck .route-overview{display:grid;align-content:center;height:100%;}
.phone-finale-deck .route-overview p{display:none;}
.phone-finale-deck .route-line{gap:6px 0;}
.phone-finale-deck .route-end{padding:0 2px;font-size:14px;}
.phone-finale-deck .route-leg{width:58px;}
.phone-finale-deck .route-head{flex-wrap:nowrap;gap:8px;}
.phone-finale-deck .route-head .road-shield,.phone-finale-deck .route-title span{display:none;}
.phone-finale-deck .route-title{flex:1;min-width:0;}
.phone-finale-deck .route-title strong{font-size:16px;white-space:nowrap;}
.phone-finale-deck .route-stars{margin:0;font-size:14px;}
.phone-finale-deck .route-all{margin:0;}
.phone-finale-deck .route-stops{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px;}
.phone-finale-deck .route-stop{grid-template-columns:44px minmax(0,1fr);justify-items:start;align-items:center;gap:0 6px;padding:4px 5px;border-radius:12px;}
.phone-finale-deck .route-stop .city-art{grid-row:1/3;width:44px;height:44px;}
.phone-finale-deck .stop-name{flex-direction:row;font-size:14px;}
.phone-finale-deck .stop-name small{display:none;}
.phone-finale-deck .finale-badges{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:0;overflow:visible;}
/* A badge: the round picture keeps clear of the chapter's name. */
.phone-finale-deck .finale-badge{flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:62px;padding:6px 2px 4px;}
.phone-finale-deck .badge-medal{flex:none;width:34px;height:34px;}
.phone-finale-deck .badge-medal .city-art{border-width:2px;box-shadow:0 0 0 2px var(--badge);}
.phone-finale-deck .badge-medal:before,.phone-finale-deck .badge-medal:after{bottom:-6px;width:9px;height:15px;}
.phone-finale-deck .badge-medal:before{left:6px;}
.phone-finale-deck .badge-medal:after{right:6px;}
.phone-finale-deck .badge-check{right:-4px;bottom:-3px;width:15px;height:15px;border-width:1px;font-size:9px;}
.phone-finale-deck .badge-text strong{margin:0;font-size:13px;letter-spacing:0;white-space:nowrap;}
.phone-map-viewer .journey-map-scroll{max-height:calc(100dvh - 134px);}

/* Home: a station's name stands on the card itself, and a locked station's lock on its picture. The save panel
   opens above its bar and over the page, so nothing on the page moves. */
.phone-stations .station-stop .level .station-caption{border:0;background:none;}
.phone-stations .level:disabled:after{left:65px;top:50%;width:30px;height:30px;background-size:16px;}
/* 竖着拿时每一站的图放大（原来 41 像素），锁跟着图走；矮于 640 的竖屏放不下，照旧 */
@media(min-height:640px){
 .phone-stations .level{min-height:64px;}
 .phone-stations .level .city-art{width:54px;height:54px;flex:0 0 54px;}
 .phone-stations .level:disabled:after{left:71px;width:32px;height:32px;background-size:17px;}
}
/* “快递旅程”那一行：电脑上它是面板的标签页（深色底、上边框、圆角），手机上不要，原来在面板里看得见一个旧框 */
.phone-journey .section-top{background:none;border:0;border-radius:0;}
.phone-save{position:relative;}
.phone-save .save-transfer{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:5;margin:0;padding:10px;border-color:#eed79c88;border-radius:12px;background:#143a2a;box-shadow:0 8px 22px #0a1f1680;}
.phone-save .save-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.phone-save .save-actions button{min-height:44px;padding:4px;font-size:14px;}
.phone-save p{margin:6px 0 0;line-height:1.5;}
.phone-save #saveStatus:empty{display:none;}

/* Home: the dot before a chapter's name keeps its own place. */
.phone-journey .chapter{padding-left:25px;}
.phone-journey .chapter:before{left:9px;}

@media(orientation:landscape) and (max-height:500px){
 /* Start page on its side: the name and the button on the left, 咚咚 on the right. */
 .story-start{flex-direction:row;gap:6vw;padding:12px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));}
 .story-start>div{display:flex;flex-direction:column;align-items:center;}
 .story-start h1{font-size:clamp(40px,7vw,58px);margin:6px 0 22px;}
 .story-start>img{flex:none;width:auto;height:min(82dvh,330px);margin:0;}
 .story-start .primary{min-height:56px;}

 .story-speaker{height:85%;width:35%;left:3%;bottom:10%;}
 .story-box{left:34%;right:20px;bottom:14px;padding:12px 16px;}
 .story-box .story-words{font-size:18px;line-height:1.65;min-height:3.3em;margin:6px 0;}
 .story-listen{min-height:0;}
 .story-hint{font-size:13px;}

 /* Home fills the screen: 咚咚 and the buttons on the left, the three stations of a chapter side by side. */
 body[data-phone-screen=home] #main{box-sizing:border-box;min-height:calc(100dvh - 44px);grid-template-columns:minmax(150px,.6fr) minmax(0,1.5fr);grid-template-rows:minmax(0,1fr) auto;}
 .phone-home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-content:center;align-items:center;gap:0 6px;}
 .phone-home-hero>div{display:contents;}
 .phone-home-hero .phone-eyebrow{grid-column:1;grid-row:1;align-self:end;}
 .phone-home-hero h1{grid-column:1;grid-row:2;align-self:start;font-size:21px;line-height:1.3;margin:2px 0 0;word-break:keep-all;}
 .phone-home-hero .courier-button{grid-column:2;grid-row:1/3;}
 .phone-home-hero .courier-button,.phone-home-hero .courier-art{width:74px;height:98px;}
 .phone-home-hero .actions{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:1fr;gap:6px;margin-top:8px;}
 .phone-home-hero .actions button{min-height:46px;padding:4px 8px;font-size:15px;}
 .phone-journey{display:flex;flex-direction:column;min-height:0;}
 .phone-journey .chapters{flex:none;}
 .phone-stations{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0;}
 .phone-stations .station-stop,.phone-stations .station-stop:last-child{grid-column:auto;display:flex;min-width:0;}
 .phone-stations .level{flex-direction:column;justify-content:center;gap:6px;height:100%;min-height:0;padding:8px 4px;text-align:center;}
 .phone-stations .level .city-art{width:min(calc(100% - 14px),calc(100dvh - 230px),140px);height:auto;aspect-ratio:1;flex:none;border-radius:16px;}
 .phone-stations .station-caption,.phone-stations .station-stop:last-child .station-caption{display:flex;flex:none;flex-direction:column;gap:2px;}
 .phone-stations .level:disabled:after{left:50%;top:calc(50% - 22px);width:40px;height:40px;background-size:20px;}
 .phone-stations .level h3{font-size:16px;}

 /* The level's first card on its side. phone.css lays the card out for a card without 咚咚's line; these win by
    naming that line. The station and the title share the top row. */
 body.phone .warehouse .overlay:has(.story-bubble){grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr) 190px;grid-template-rows:auto auto minmax(0,1fr);gap:5px 10px;}
 body.phone .warehouse .overlay:has(.story-bubble)>.eyebrow{grid-column:2;grid-row:1;}
 body.phone .warehouse .overlay:has(.story-bubble)>h2{grid-column:3;grid-row:1;}
 body.phone .warehouse .overlay:has(.story-bubble)>.story-bubble{grid-column:1/5;grid-row:2;margin:0;padding:4px 8px;}
 body.phone .warehouse .overlay:has(.story-bubble)>.phone-demo{grid-column:1/5;grid-row:3;}
 body.phone .warehouse .overlay:has(.story-bubble)>.actions{grid-column:5;grid-row:1/3;align-self:center;padding:0;}
 body.phone .warehouse .overlay:has(.story-bubble)>.rule-detail{grid-column:5;grid-row:3;align-self:end;}
 .overlay .story-bubble>div{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
 .overlay .story-bubble p{flex:1;}
 .overlay .story-bubble .voice-button{flex:none;margin:0;}
 /* A narrow screen: the station is already named in the bar above, and the listen button is the picture alone. */
 @media(max-width:699px){
  body.phone .warehouse .overlay:has(.story-bubble){grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr) 150px;}
  body.phone .warehouse .overlay:has(.story-bubble)>.eyebrow{display:none;}
  body.phone .warehouse .overlay:has(.story-bubble)>h2{white-space:nowrap;}
  .overlay .story-bubble>img{width:40px;height:52px;}
  .overlay .story-bubble .voice-button{width:44px;padding:0;justify-content:center;}
  .overlay .story-bubble .voice-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
 }
 /* After a practice parcel: how it went and, when it went wrong, the drawing again on the left; the dots and the
    buttons on the right. */
 body.phone .warehouse .overlay:has(#practiceNext){grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:auto auto auto;align-content:center;gap:8px 14px;}
 body.phone .warehouse .overlay:has(#practiceNext)>h2{grid-column:1;grid-row:1/4;align-self:center;font-size:24px;}
 body.phone .warehouse .overlay:has(#practiceNext):has(.phone-demo)>h2{grid-row:1;align-self:end;}
 body.phone .warehouse .overlay:has(#practiceNext)>.phone-demo{grid-column:1;grid-row:2/4;align-self:start;}
 body.phone .warehouse .overlay:has(#practiceNext)>.practice-dots{grid-column:2;grid-row:1;align-self:end;margin:0;}
 body.phone .warehouse .overlay:has(#practiceNext)>#practiceNext{grid-column:2;grid-row:2;width:100%;}
 body.phone .warehouse .overlay:has(#practiceNext)>#practiceHome{grid-column:2;grid-row:3;align-self:start;width:100%;}
 /* The countdown stands in the middle, at a size for this screen. */
 body.phone .warehouse .overlay:has(>.count){display:flex;flex-direction:column;justify-content:center;gap:10px;}
 body.phone .warehouse .overlay>.count{width:100px;height:100px;font-size:58px;box-shadow:0 0 0 5px #e8b85a59,0 0 0 10px #e8b85a26,0 8px 18px #3b2a1238;}

 /* The collection on its side: picture on the left, the tabs and words on the right. */
 #modal:has(.collection-tabs) #modalContent{display:grid;grid-template-columns:1fr auto;grid-template-rows:44px minmax(0,1fr) 48px;gap:5px;height:calc(100dvh - 44px);}
 #modal:has(.collection-tabs) h2{grid-column:1;grid-row:1;margin:0;font-size:20px;align-self:center;}
 #modal:has(.collection-tabs) .collection-tabs{grid-column:2;grid-row:1;margin:0;align-self:center;}
 #modal:has(.collection-tabs) .collection-summary{display:none;}
 #modal:has(.collection-tabs) .collection.phone-deck{grid-column:1/-1;grid-row:2;height:100%;min-height:0;padding:2px 0;}
 #modal:has(.collection-tabs) .phone-deck-controls{grid-column:1;grid-row:3;padding:0;}
 #modal:has(.collection-tabs) .modal-actions{grid-column:2;grid-row:3;margin:0;}
 #modal:has(.collection-tabs) #modalContent{column-gap:14px;}
 #modal:has(.collection-tabs) .phone-deck-controls span{font-size:13px;white-space:nowrap;}
 .collection.phone-deck .city-knowledge{grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto 44px minmax(0,1fr);gap:2px 10px;padding:5px 8px;}
 .collection.phone-deck .city-knowledge h3{grid-column:2;grid-row:1;font-size:15px;line-height:1.5;}
 .collection.phone-deck .knowledge-tabs{grid-column:2;grid-row:2;margin:0;}
 .collection.phone-deck .phone-city-picture{grid-column:1;grid-row:1/-1;width:120px;height:120px;max-height:100%;margin:0;}
 .collection.phone-deck .knowledge-part{grid-column:2;grid-row:3;display:flex;align-items:flex-start;gap:8px;}
 .collection.phone-deck .knowledge-part p{flex:1;font-size:14px;line-height:1.5;margin:0;}
 .collection.phone-deck .knowledge-part .voice-button{flex:none;margin:0;}

 /* The card dialog on its side: its own title gives its row to the card; the listen button stands beside the words. */
 #modal:has(.knowledge-detail)>#modalContent>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
 .knowledge-detail .city-knowledge{grid-template-columns:130px minmax(0,1fr);grid-template-rows:auto 44px minmax(0,1fr);gap:3px 12px;height:calc(100dvh - 112px);}
 .knowledge-detail .city-knowledge h3{grid-column:2;grid-row:1;font-size:16px;}
 .knowledge-detail .knowledge-tabs{grid-column:2;grid-row:2;margin:0;}
 .knowledge-detail .phone-city-picture{grid-column:1;grid-row:1/-1;width:130px;height:130px;max-height:100%;align-self:center;margin:0;}
 .knowledge-detail .knowledge-says{grid-column:2;grid-row:3;align-items:center;min-height:0;}
 .knowledge-detail .knowledge-guide{width:54px;height:70px;margin:0;}
 .knowledge-detail .knowledge-part{display:flex;align-items:center;gap:8px;min-height:0;padding:6px 10px;}
 .knowledge-detail .knowledge-part:before{top:calc(50% - 7px);}
 .knowledge-detail .knowledge-part p{flex:1;font-size:14px;line-height:1.5;margin:0;}
 .knowledge-detail .knowledge-part .voice-button{flex:none;margin:0;}

 /* The result's first page: the opened details are one small line under their heading. On a low screen a smaller
    score and badge leave room for the buttons. */
 .phone-score .score-details p{margin:-6px 0 2px;font-size:13px;line-height:1.4;}
 @media(max-height:340px){
  #modal[data-phone-kind=result]{padding-top:8px;padding-bottom:8px;}
  .phone-score .result-metrics div{width:80px;height:80px;}
  .phone-score .result-metrics strong{font-size:24px;}
  .phone-score .chapter-seal .city-art{width:38px;}
 }
 /* The result's second page on its side: 咚咚, then the picture, then her words with the two buttons under them. */
 .phone-result-deck .knowledge-panda{width:76px;height:99px;flex-basis:76px;}
 .phone-result-deck .knowledge-bubble{grid-template-columns:108px auto minmax(0,1fr);gap:2px 10px;padding:6px 10px;}
 .phone-result-deck .knowledge-bubble>.eyebrow{grid-column:2/-1;}
 .phone-result-deck .knowledge-bubble>.knowledge-zoom{width:104px;height:104px;}
 .phone-result-deck .knowledge-zoom .city-art{width:104px;height:104px;}
 .phone-result-deck .knowledge-bubble>p{grid-column:2/-1;}
 .phone-result-deck .voice-button{grid-column:2;grid-row:3;margin:2px 0 0;}
 .phone-result-deck .knowledge-more{grid-column:3;grid-row:3;justify-self:start;margin:2px 0 0;}

 /* A chapter picture on its side: the picture on the left at the screen's height, its words on the right. */
 .illustration-viewer{width:auto;max-width:calc(100% - 20px);padding:10px 14px 10px 10px;}
 .illustration-viewer[open]{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:0 16px;}
 .illustration-viewer figure{display:contents;}
 .illustration-viewer img{grid-column:1;grid-row:1/3;width:min((100dvh - 44px)*1.5,100vw - 260px);height:min(100dvh - 44px,(100vw - 260px)/1.5);max-height:none;}
 .illustration-viewer>button{grid-column:2;grid-row:1;justify-self:end;margin:0;min-height:44px;}
 .illustration-viewer figcaption{grid-column:2;grid-row:2;align-self:center;padding:0;text-align:left;}

 /* A city picture opened large: the picture at the screen's height, its name beside it. */
 dialog.city-viewer{width:auto;max-width:calc(100% - 20px);max-height:calc(100dvh - 12px);padding:10px 14px 10px 10px;overflow:hidden;}
 dialog.city-viewer[open]{display:grid;grid-template-columns:auto minmax(110px,auto);grid-template-rows:auto minmax(0,1fr);gap:0 16px;}
 .city-viewer>.city-art{grid-column:1;grid-row:1/3;width:calc(100dvh - 36px);height:calc(100dvh - 36px);margin:0;}
 .city-viewer-close{grid-column:2;grid-row:1;justify-self:end;margin:0;}
 .city-viewer-caption{grid-column:2;grid-row:2;align-self:center;padding:0;font-size:21px;}

 /* The end of a chapter on its side: the picture on the left, 咚咚's words and the badge on the right. */
 body[data-phone-screen=chapter] .app{padding:0 12px;}
 .chapter-reveal{gap:6px;padding:8px 14px!important;}
 .chapter-reveal-heading{display:flex;align-items:baseline;gap:14px;}
 .chapter-reveal-heading h1{font-size:22px;margin:0;}
 .chapter-reveal-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;}
 .chapter-reveal-art{min-height:0;--bar:28px;}
 .chapter-reveal-copy .story-bubble{padding:6px 8px;}
 .chapter-reveal-copy .story-bubble p{font-size:14px!important;line-height:1.5!important;}
 .chapter-reveal-seal .city-art{width:34px;height:34px;}
 .chapter-reveal-actions button{min-height:44px;}

 /* The journey page on its side. Its route map: the map at the height there is, the chosen stretch beside it, the
    five badges in a column. A narrow screen leaves the middle part out; the map and the badges stay. */
 body[data-phone-screen=finale] #main{padding-top:8px;}
 body[data-phone-screen=finale] .phone-nav{top:0;}
 .phone-finale-deck.phone-deck{height:calc(100dvh - 64px);}
 .phone-finale-deck .letter-actions{justify-content:center;}
 .phone-finale-deck .letter-actions button{flex:0 1 auto;padding:4px 18px;white-space:nowrap;}
 .phone-finale-deck>.finale-layout{display:grid;grid-template-columns:minmax(0,1fr) 138px;gap:8px;--map:calc(100dvh - 142px);}
 .phone-finale-deck .journey-map-panel{display:grid;box-sizing:border-box;height:100%;padding:6px 8px;grid-template-columns:auto minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);gap:6px 10px;}
 .phone-finale-deck .map-head{grid-column:1/-1;}
 .phone-finale-deck .journey-map-scroll{grid-column:1;grid-row:2;width:calc(var(--map)*1.548);height:var(--map);}
 .phone-finale-deck .finale-route{grid-column:2;grid-row:2;align-self:stretch;padding:8px;}
 .phone-finale-deck .route-end{font-size:13px;}
 .phone-finale-deck .route-leg{width:54px;}
 .phone-finale-deck .route-leg span{min-width:36px;padding:0 5px;}
 .phone-finale-deck .route-head{flex-wrap:wrap;gap:4px 8px;}
 .phone-finale-deck .route-title{flex:1 0 100%;}
 .phone-finale-deck .route-all{margin-left:auto;}
 .phone-finale-deck .route-stops{gap:5px;}
 .phone-finale-deck .route-stop{grid-template-columns:minmax(0,1fr);justify-items:center;gap:2px;padding:4px 3px 5px;}
 .phone-finale-deck .route-stop .city-art{grid-row:auto;width:100%;height:auto;}
 .phone-finale-deck .stop-name{flex-direction:column;align-items:center;gap:0;font-size:13px;}
 .phone-finale-deck .finale-badges{display:flex;flex-direction:column;height:100%;}
 .phone-finale-deck .finale-badge{flex:1 1 0;flex-direction:row;justify-content:flex-start;gap:10px;min-height:44px;padding:4px 8px 4px 10px;}
 @media(max-width:799px){
  .phone-finale-deck .finale-route{display:none;}
  .phone-finale-deck .journey-map-panel{grid-template-columns:minmax(0,1fr);justify-items:center;}
  .phone-finale-deck .map-head{justify-self:stretch;}
 }

 /* Settings on their side: the switches on the left, the other buttons on the right. */
 #modal[data-settings-view=settings] #modalContent{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto;gap:0 20px;align-items:center;}
 #modal[data-settings-view=settings] h2{grid-column:1/-1;grid-row:1;margin:0 0 4px;}
 #modal[data-settings-view=settings] .setting-row{grid-column:1;padding:6px 0;}
 #modal[data-settings-view=settings] .setting-row button{min-height:44px;}
 #modal[data-settings-view=settings] .settings-note{grid-column:1;grid-row:5;margin:6px 0 0;font-size:13px;line-height:1.5;}
 #modal[data-settings-view=settings] :is(.phone-fullscreen,.phone-install-tip){grid-column:2;grid-row:2;}
 #modal[data-settings-view=settings] #replayStory{grid-column:2;grid-row:3;min-height:44px;margin:4px 0;}
 #modal[data-settings-view=settings] #clearSaveBtn{grid-column:2;grid-row:4;min-height:44px;margin:0;}
 #modal[data-settings-view=settings] .modal-actions{grid-column:2;grid-row:5;margin:8px 0 0;}
}

/* 没过关时放卡片的地方只有咚咚和她那句话：气泡里没有城市图，跟着字的长短 */
.phone-result-deck .retry-knowledge .knowledge-bubble{display:block;flex:0 1 auto;padding:12px 16px;}

/* 成长纪念页：手机横屏时咚咚也站在她那段话旁边（原来横屏把她藏了） */
@media(orientation:landscape) and (max-height:500px){
 #modal[data-phone-kind=keepsake] .keepsake-words{display:flex;align-items:flex-end;gap:8px}
 #modal[data-phone-kind=keepsake] .keepsake-words img{display:block;flex:none;width:clamp(42px,8vw,60px);height:auto;aspect-ratio:64/70;object-fit:cover;object-position:50% 12%}
}
/* 设置里并排的按钮（全屏显示、听开篇故事、清除本地记录）之间留出空隙；手机横屏另有排法 */
@media not all and (orientation:landscape) and (max-height:500px){
 #modal :is(.phone-fullscreen,#replayStory,#clearSaveBtn){margin:5px 8px 5px 0}
}

/* 手机横放时左边的菜单：每一项的字排成一行（“快递旅程”“城市图鉴”原来折成两行），按钮左右不留空，和星际一样 */
@media(orientation:landscape) and (max-height:500px){
 .phone-nav button{padding:4px 0;white-space:nowrap;}
}

/* 2026-10-14 他在 iPhone 上看到的几处 */
/* 关前的示意图：篮筐上的图案放在篮筐的牌子上（原来偏下），和关卡里的篮筐一样 */
/* (the example's sign: see the plaque rule at the end) */
/* 结算第一页：纪念章放在得分下面正中，隔开一点 */
.phone-score .chapter-seal{justify-self:center;width:fit-content;margin-left:auto;margin-right:auto;margin-top:12px;}
/* 竖着拿 */
@media not all and (orientation:landscape) and (max-height:500px){
 /* 首页的“继续旅程”小一点，和下面的旅程框隔开（按钮下面那道厚边原来压在框上） */
 .phone-home-hero .actions button{min-height:44px;padding:4px 18px;}
 .phone-home-hero{margin-bottom:14px;}
 /* 关卡顶上：站名和按钮离边框远一点（原来数字贴着左边框，“暂停”贴着右边框） */
 body.phone[data-phone-screen=game] .game-heading{padding:4px 8px 4px 12px;}
 /* 首页每一站的序号：圆圈在框里、是正圆（电脑版居中用的 translateX(-50%) 把它挪出了框） */
 .phone-stations .level .num{transform:none;flex:none;width:28px;height:28px;display:grid;place-items:center;}
 /* 关卡顶上的三个按钮隔开一点 */
 body.phone[data-phone-screen=game] .game-tools{gap:8px;}
 /* 关卡里的站名排成一行（原来“3 ·”和“宜昌”分两行） */
 body.phone[data-phone-screen=game] .game-heading h1{white-space:nowrap;}
 body.phone[data-phone-screen=game] .game-heading h1 .game-city{display:inline;}
 /* 快递放在传送带上面（原来压在传送带中间）：底边落在传送带面上 */
 .warehouse .lane .parcel{top:calc(33% - 49px);}
 /* 路线图那一页：卡片占满宽度（没走完时缩在左边），纪念章一排居中 */
 .phone-finale-deck>.finale-layout{align-items:stretch;}
 .phone-finale-deck .finale-badges{justify-content:center;}
}
/* 横着拿 */
@media(orientation:landscape) and (max-height:500px){
 /* 关卡顶上的三个按钮宽一点、隔开；中间那条进度跟着让出位置 */
 body.phone[data-phone-screen=game] .game-tools{gap:10px;}
 body.phone[data-phone-screen=game] .game-tools button{width:62px;min-width:62px;max-width:62px;padding:4px 6px;}
 body.phone[data-phone-screen=game] .stats{right:230px;}
 /* 快递放在传送带上面 */
 .warehouse .lane .parcel{top:calc(20% - 43px);}
 /* 篮筐按图片原来的比例画（原来被拉成 2.8:1，看着扁） */
 .warehouse .lane .basket .basket-body{left:0;right:0;margin:0 auto;width:min(96%,140px);height:auto;aspect-ratio:3/2;}
 /* 两条线时一条线只有一百来像素高：从下往上摆，篮筐、传送带（压住篮筐沿一点）、放在传送带上的快递 */
 /* 篮筐按原来的比例画以后牌子窄了：城市名用最小的 13 像素，放得进牌子 */
 .warehouse.two-lanes .basket .basket-body>span .destination-icon{font-size:13px;letter-spacing:0;}
}
/* 最矮的横屏（568×320 这一档）：两条线时再小一点 */
@media(orientation:landscape) and (max-height:340px){
 .warehouse.two-lanes .lane .belt{height:28px;}
 .warehouse.two-lanes .lane .parcel,.warehouse.two-lanes .lane .parcel .box{width:44px;height:44px;min-width:44px;min-height:44px;}
 .warehouse.two-lanes .lane .parcel{bottom:calc(39% + 18px);}
 .warehouse.two-lanes .lane .basket .basket-body{width:92px;}
}
/* 窄的横屏（宽 700 以内，没有灵动岛的那几档）：按钮稍窄，进度条才放得下 */
@media(orientation:landscape) and (max-height:500px) and (max-width:700px){
 body.phone[data-phone-screen=game] .game-tools{gap:8px;}
 body.phone[data-phone-screen=game] .game-tools button{width:54px;min-width:54px;max-width:54px;padding:4px 2px;}
 body.phone[data-phone-screen=game] .stats{right:200px;}
}

/* 篮筐上的图案放在篮筐图里画的那块牌子里面，不超出牌子（牌子的米色部分在图上：左右 31%～69%，上下 50%～69%） */
body.phone .warehouse .basket .basket-body>span,
body.phone .warehouse .basket .basket-body>span:has(.destination-icon),
body.phone .phone-demo-basket>span{left:50%;top:59.5%;right:auto;bottom:auto;width:36%;height:18%;transform:translate(-50%,-50%);padding:0;}
body.phone .warehouse .basket .basket-body>span .item-icon,body.phone .phone-demo-basket>span .item-icon{width:100%;height:100%;}
/* 关前的示意图大一点：快递和篮筐都放大，牌子上的图案才看得清（篮筐按图片的 3:2） */
body.phone .phone-demo{--demo:84px;width:auto;}
body.phone .phone-demo-lane{height:var(--demo);gap:18px;}
body.phone .phone-demo-parcel{width:calc(var(--demo) * .82);height:calc(var(--demo) * .82);}
body.phone .phone-demo-basket{width:calc(var(--demo) * 1.5);height:var(--demo);}
body.phone .phone-demo:has(.phone-demo-lane + .phone-demo-lane){--demo:72px;}
@media(orientation:landscape) and (max-height:500px){
 body.phone .phone-demo{--demo:68px;}
 body.phone .phone-demo:has(.phone-demo-lane + .phone-demo-lane){--demo:52px;}
 /* 关卡顶栏：框高 56，按钮 44，四边离框都有空；中间的计数在框里上下居中 */
 body.phone[data-phone-screen=game] .game-heading{height:56px;padding:0 10px 0 8px;}
 body.phone[data-phone-screen=game] .game-tools button{min-height:44px;height:44px;}
 body.phone[data-phone-screen=game] .stats{top:10px;}
}
@media(orientation:landscape) and (max-height:340px){
}
/* 带拼音的标题：注音小一点、贴着字，不把字往下顶太多 */
body.phone :is(.city-knowledge h3,.game-heading h1,.knowledge-bubble .eyebrow) rt{font-size:11px;line-height:1;}
/* 手机上的插画卡：竖着拿时图在上、字在下；横着拿时图在左、字在右并上下居中。字号写死，翻页前后一样 */
.collection.phone-deck .illustration-card{display:flex;flex-direction:column;height:100%;min-height:0;font-size:15px;line-height:1.5;}
.collection.phone-deck .illustration-art{flex:0 1 auto;min-height:0;}
.collection.phone-deck .illustration-copy{flex:none;gap:4px;padding:10px 14px;}
.collection.phone-deck .illustration-card small,.collection.phone-deck .illustration-card em{font-size:14px;}
.collection.phone-deck .illustration-card strong{font-size:19px;line-height:1.35;}
@media(orientation:landscape) and (max-height:500px){
 .collection.phone-deck .illustration-card{display:flex;flex-direction:row;align-items:center;gap:20px;padding:10px;}
 .collection.phone-deck .illustration-art{flex:none;height:100%;width:auto;aspect-ratio:3/2;max-width:58%;border-radius:12px;}
 .collection.phone-deck .illustration-copy{flex:1;min-width:0;padding:0 8px 0 0;}
}

/* 2026-10-14 夜：两条线、倒数、知识卡标题、路线、城市名、拼音、快递进场、带纪念章的结算 */
/* 每条线把伸出去的东西藏起来：快递从边上“开进来”，不压在线外的框上 */
body.phone .warehouse .lane{overflow:hidden;}
/* 牌子上的城市名：行高 1，正好放进牌子 */
body.phone .basket-body>span .destination-icon,body.phone .phone-demo-basket>span .destination-icon{line-height:1;}
/* 拼音小一点，不把它头上的字和旁边的字挤开 */
body.phone :is(.story-bubble,.story-words,.knowledge-part,.knowledge-bubble) rt{font-size:11px;}
/* 倒数：圆圈跳动时也碰不到“准备发车” */
body.phone .warehouse .overlay:has(>.count){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;}
@media(orientation:landscape) and (max-height:500px){
 /* 两条线从上到下：放在传送带上的快递、传送带、空一点、篮筐，互不重叠 */
 .warehouse.two-lanes .lane .parcel,.warehouse.two-lanes .lane .parcel .box{width:44px;height:44px;min-width:44px;min-height:44px;}
 .warehouse.two-lanes .lane .parcel{top:0;bottom:auto;}
 .warehouse.two-lanes .lane .belt{top:34px;bottom:auto;height:28px;}
 .warehouse.two-lanes .lane .basket .basket-body{left:50%;right:auto;bottom:0;margin:0;width:auto;height:calc(100% - 66px);max-height:66px;aspect-ratio:3/2;transform:translateX(-50%);}
 /* 两条线的牌子由页面画（和篮筐图上的牌子一样：米色、绿框、四颗铆钉），大到放得下图案和城市名 */
 body.phone .warehouse.two-lanes .basket .basket-body>span,body.phone .warehouse.two-lanes .basket .basket-body>span:has(.destination-icon){top:62%;width:66%;height:50%;box-sizing:border-box;padding:1px 2px;border:1.5px solid #2c5236;border-radius:3px;box-shadow:inset 0 0 0 1px #fffaf0,0 1px 1px #0003;
  background:radial-gradient(circle at 3px 3px,#b98a3c 1.2px,transparent 1.9px),radial-gradient(circle at calc(100% - 3px) 3px,#b98a3c 1.2px,transparent 1.9px),radial-gradient(circle at 3px calc(100% - 3px),#b98a3c 1.2px,transparent 1.9px),radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),#b98a3c 1.2px,transparent 1.9px),#f4ecdb;}
 /* 知识卡弹窗：卡片自己有标题，弹窗的标题只给读屏用（原来压在图下面） */
 #modal[data-knowledge-detail] #modalContent>h2{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 /* 路线图那一页：中间的路段列表放不下（按钮要 44 像素高），地图上有同样的路线 */
 .phone-finale-deck .finale-route{display:none;}
 /* 带纪念章的结算：得分圈和纪念章小一点，留出余地 */
 .phone-score .result-metrics div{width:92px;height:92px;}
 .phone-score .chapter-seal{margin-top:6px;padding:3px 10px;}
 .phone-score .chapter-seal .city-art{width:42px;height:42px;}
}
@media(orientation:landscape) and (max-height:340px){
 .warehouse.two-lanes .lane .belt{top:32px;height:24px;}
 .warehouse.two-lanes .lane .basket .basket-body{height:calc(100% - 59px);}
}

/* 2026-10-14 夜（第五轮） */
/* 旅程纪念第一页不放“返回首页”：手机的导航能回首页，最后一页也有 */
body.phone .phone-finale-deck .hero-home{display:none;}
/* 背景铺满整屏（竖屏首页下面原来露出一条纯色） */
body.phone{min-height:100dvh;box-sizing:border-box;}
/* 感谢信那一页：信和按钮一起上下居中 */
.phone-finale-deck>.finale-letter{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;}
/* 纪念页的寄语在框里居中，落款在右 */
#modal[data-phone-kind=keepsake] .keepsake-words p{text-align:center;}
#modal[data-phone-kind=keepsake] .keepsake-words p span{display:block;text-align:right;}
@media(orientation:landscape) and (max-height:500px){
 /* 纪念章的飘带露全：章在卡片里上下居中，卡片不剪掉飘带 */
 .phone-finale-deck .finale-badge{align-items:center;overflow:visible;}
 /* 放大路线图：整张地图放进屏幕，图在左，“关闭”在右 */
 .phone-map-viewer[open]{display:grid;grid-template-columns:auto auto;align-items:start;gap:0 12px;width:auto;max-width:calc(100% - 16px);padding:8px;}
 .phone-map-viewer .journey-map-scroll{grid-column:1;grid-row:1;max-height:none;overflow:visible;}
 .phone-map-viewer .journey-map-frame{width:min(calc((100dvh - 36px) * 1.548),calc(100vw - 200px));min-width:0;}
 .phone-map-viewer>button{grid-column:2;grid-row:1;position:static;}
 .phone-map-viewer p{display:none;}
 /* 两条线时关前示意图的牌子也由页面画；有城市名时示意图大一点，名字放得进牌子和快递的标签 */
 body.phone .phone-demo:has(.phone-demo-lane + .phone-demo-lane) .phone-demo-basket>span{top:62%;width:66%;height:50%;box-sizing:border-box;padding:1px 2px;border:1.5px solid #2c5236;border-radius:3px;box-shadow:inset 0 0 0 1px #fffaf0,0 1px 1px #0003;background:radial-gradient(circle at 3px 3px,#b98a3c 1.2px,transparent 1.9px),radial-gradient(circle at calc(100% - 3px) 3px,#b98a3c 1.2px,transparent 1.9px),radial-gradient(circle at 3px calc(100% - 3px),#b98a3c 1.2px,transparent 1.9px),radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),#b98a3c 1.2px,transparent 1.9px),#f4ecdb;}
 body.phone .phone-demo:has(.phone-demo-lane + .phone-demo-lane):has(.destination-icon){--demo:58px;}
 body.phone .phone-demo:has(.destination-icon) .phone-demo-parcel{width:var(--demo);height:var(--demo);}
}

/* 第六轮：进度条的小车离“入篮”远一点；横屏路线图那一页地图居中 */
body.phone .stats .progress-track{margin-left:22px;}
@media(orientation:landscape) and (max-height:500px){
 .phone-finale-deck .journey-map-panel{grid-template-columns:minmax(0,1fr);}
 .phone-finale-deck .journey-map-scroll{justify-self:center;}
}

/* 第七轮 */
/* 放大路线图：右上角一个小圆钮关闭 */
.phone-map-viewer>.phone-map-close{position:absolute;top:10px;right:10px;z-index:6;width:44px;height:44px;min-height:44px;margin:0;padding:0;display:grid;place-items:center;border-radius:50%;border:2px solid #fff1cc;background:#173d2ee6;color:#fff3cf;font-size:26px;line-height:1;box-shadow:0 3px 8px #0006;}
.phone-map-viewer p{margin-right:56px;}
/* 图鉴卡片的讲解：离分页按钮远一点，放在一块浅色底上 */
.collection.phone-deck .knowledge-part{margin-top:6px;padding:12px 14px;border:1px solid #e3cf9f;border-radius:14px;background:#f8efdb;}
.collection.phone-deck .knowledge-part p{font-size:15px;line-height:1.75;}
@media(orientation:landscape) and (max-height:500px){
 .phone-map-viewer[open]{display:block;padding:8px;}
 .phone-map-viewer .journey-map-frame{width:min(calc((100dvh - 34px) * 1.548),calc(100vw - 40px));}
 /* 旅程纪念第一页：咚咚和字都在框里上下居中 */
 .phone-finale-deck>.finale-hero{align-items:center;align-content:center;}
 .phone-finale-deck>.finale-hero>*{align-self:center;}
 /* 图鉴卡片的讲解在剩下的地方上下居中 */
 .collection.phone-deck .knowledge-part{align-self:center;margin-top:8px;}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:700px){
 /* 窄的横屏：路线图的标题让给两个按钮 */
 .phone-finale-deck .map-head h2{display:none;}
}
@media(orientation:landscape) and (max-height:340px){
 /* 最矮的横屏：章节页不写“已抵达…”（纪念章下面就是按钮）；感谢信那一页紧一点 */
 .chapter-reveal-progress{display:none;}
 .phone-finale-deck>.finale-letter{gap:6px;}
 .phone-finale-deck .letter-card p{margin:2px 0;}
}
@media(orientation:landscape) and (max-height:340px){
 /* 最矮的横屏：路线图再小一点放进框里；图鉴讲解的底板紧一点，不碰卡片的边 */
 .phone-finale-deck>.finale-layout{--map:calc(100dvh - 152px);}
 .collection.phone-deck .knowledge-part{padding:8px 10px;margin-top:4px;}
 .collection.phone-deck .knowledge-part p{font-size:14px;line-height:1.6;}
 /* 第 13 站咚咚那句话有三行：两条线带城市名的示意图小一点，不用往下滑 */
 body.phone .phone-demo:has(.phone-demo-lane + .phone-demo-lane):has(.destination-icon){--demo:51px;}
}
@media(orientation:landscape) and (max-height:500px){
 /* 放大路线图的弹窗贴着地图，关闭钮在地图的右上角 */
 .phone-map-viewer[open]{width:fit-content;max-width:calc(100% - 16px);}
}
/* 手机菜单：每项一个小图标在字上面，正在看的那一页亮成金色（2026-10-15 他说“至少要有高光说明现在在哪 以及做的美观一点”） */
.phone-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#f6e6bd;background:transparent;border:1.5px solid transparent;transition:background-color .2s,color .2s;}
.phone-nav button svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.phone-nav button span{line-height:1.15;}
.phone-nav button:active{background:#f4de9b26;}
.phone-nav button[aria-current=page]{background:linear-gradient(#fbe3a0,#e9b752);color:#1d4630;border-color:#fff0c2;box-shadow:inset 0 1px 0 #fffbe8,0 2px 0 #8d6526;}
@media(orientation:landscape) and (max-height:500px){.phone-nav button svg{width:20px;height:20px;}}

/* 没过关那页：咚咚画大，站在那句话旁边（他说“咚咚太小了”）；图是 1199×1312 */
.phone-result-deck .retry-knowledge{gap:16px;}
.phone-result-deck .retry-knowledge .knowledge-bubble>p{font-size:17px;line-height:1.5;}
.phone-result-deck .retry-knowledge .knowledge-panda{height:min(190px,28dvh);width:auto;aspect-ratio:1199/1312;flex:0 0 auto;object-fit:contain;}
@media(orientation:landscape) and (max-height:500px){.phone-result-deck .retry-knowledge .knowledge-panda{height:clamp(100px,calc(100dvh - 196px),190px);}}

/* 图鉴换标签时卡片不再从下面升上来：竖屏一页一张，看着像整屏抖了一下 */
#modal[data-phone-kind=collection] .collection article{animation:none;}

/* 第 13 站横屏：快递上写着城市名，原来比 44 像素的快递还宽（他说“文字不在快递上”）。这一站的快递大一点（50 像素），
   名字写在快递图上那张白标签里（标签占图的左右 23%–77%、上下 33%–81%），12 像素；传送带、篮筐跟着往下让一点 */
@media(orientation:landscape) and (max-height:500px){
 .warehouse.two-lanes:has(.destination-icon) .lane .parcel,.warehouse.two-lanes:has(.destination-icon) .lane .parcel .box{width:50px;height:50px;min-width:50px;min-height:50px;}
 .warehouse.two-lanes:has(.destination-icon) .lane .belt{top:40px;}
 .warehouse.two-lanes:has(.destination-icon) .lane .basket .basket-body{height:calc(100% - 72px);}
 .warehouse.two-lanes .parcel .label:has(.destination-icon){top:33%;left:23%;width:54%;height:48%;}
 .warehouse.two-lanes .parcel .label .destination-icon{font-size:12px;line-height:1;letter-spacing:0;white-space:nowrap;}
}
/* 最矮的横屏放不下大一点的快递（篮筐会太小）：快递照旧 44 像素，名字 11 像素，仍在白标签里 */
@media(orientation:landscape) and (max-height:340px){
 .warehouse.two-lanes:has(.destination-icon) .lane .parcel,.warehouse.two-lanes:has(.destination-icon) .lane .parcel .box{width:44px;height:44px;min-width:44px;min-height:44px;}
 .warehouse.two-lanes:has(.destination-icon) .lane .belt{top:32px;}
 .warehouse.two-lanes:has(.destination-icon) .lane .basket .basket-body{height:calc(100% - 59px);}
 .warehouse.two-lanes .parcel .label .destination-icon{font-size:11px;}
}