/* Shared viewport and safe areas; the desktop composition stays in scene.css. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
body{height:100dvh;height:var(--viewport-height,100dvh)}
#wordsea-scene{position:relative;width:100%;height:100%;overflow:hidden}
.journal-tools{display:contents}
.sea-settings-open{display:none}
.sea-settings-dialog{width:min(480px,calc(100% - 24px));max-height:calc(100dvh - 24px);max-height:calc(var(--viewport-height,100dvh) - 24px);margin:auto auto max(12px,var(--safe-bottom));padding:22px;border:1px solid #a9c3d535;border-radius:20px;background:#0d1828f7;color:#e3edf1;overflow:auto;overscroll-behavior:contain;box-shadow:0 18px 60px #0006}
.sea-settings-dialog::backdrop{background:#02091480}
.sea-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.sea-settings-heading h2{font:22px/1.4 "Songti SC",serif;letter-spacing:.08em;margin:0}
.sea-settings-close{width:44px;height:44px;flex-shrink:0;border:1px solid #a9c3d535;border-radius:50%;background:#162437;color:#c5d9e5;font-size:24px}
.sea-settings-body{display:grid;gap:22px}
.sea-settings-body .themes{width:100%;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:14px;padding:5px;gap:4px}
.sea-settings-body .theme{min-height:44px;padding:10px 4px;border-radius:10px;font-size:14px}
.sea-settings-body .range-group{display:grid;grid-template-columns:54px minmax(0,1fr) 38px;gap:12px}
.sea-settings-body .range-group label,.sea-settings-body .range-group output{font-size:14px}
.sea-settings-body input[type=range]{width:100%;height:44px;min-width:0}
.sea-settings-body input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-8px}
.sea-settings-body input[type=range]::-moz-range-thumb{width:18px;height:18px}
.sea-settings-body .plain-button{min-height:44px;padding:10px 12px;border:1px solid #a9c3d535;border-radius:10px;justify-content:center}
.sea-settings-body .plain-button span{display:inline}

@media(max-width:700px),(max-width:1000px) and (max-height:500px){
  .header{top:calc(var(--safe-top) + 18px);left:max(20px,var(--safe-left));right:max(20px,var(--safe-right));min-width:0}
  .identity{width:100%;min-width:0;gap:12px}
  .identity>div:last-child{min-width:0;flex:1}
  .symbol{font-size:32px;padding-right:12px;flex-shrink:0}
  .header h1{font-size:18px;line-height:1.45;letter-spacing:.12em;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header .kicker{font-size:11px;line-height:1.6;max-width:100%;letter-spacing:.08em}
  .edition,.caption{display:none}
  .weather-chip{top:calc(var(--safe-top) + 80px);left:max(20px,var(--safe-left));max-width:calc(100% - 40px);min-height:44px;padding:10px 14px;font-size:12px}
  .journal{left:max(20px,var(--safe-left));right:max(20px,var(--safe-right));top:calc(var(--safe-top) + 145px);bottom:calc(var(--safe-bottom) + 110px);width:auto;min-height:0}
  .journal-label{font-size:10px;line-height:1.8;letter-spacing:.12em;margin-bottom:12px;flex-shrink:0}
  .journal-scroll{flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto;padding-right:4px;-webkit-overflow-scrolling:touch}
  .story-link{gap:12px;min-height:78px;padding:15px 0}
  .story-title{font-size:17px;line-height:1.65;letter-spacing:.025em;overflow-wrap:anywhere}
  .story-meta{font-size:11px;letter-spacing:.05em;margin-top:5px}
  .story-link:hover .story-title{transform:none}
  .journal .story-link:nth-of-type(3){display:flex}
  .journal-pagination{flex-shrink:0;min-width:0}
  .page-navigator{flex-wrap:nowrap;gap:4px;margin:8px 0 0;overflow-x:auto;white-space:nowrap;font-size:12px}
  .page-navigator li{flex-shrink:0}
  .page-navigator a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:44px;padding:6px 10px}
  .site-pages{flex-shrink:0;flex-wrap:nowrap;gap:14px;overflow-x:auto;margin-top:2px;font-size:13px;white-space:nowrap}
  .site-pages a{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0}
  .site-search{display:flex;flex-shrink:0;min-height:44px;margin-top:0;gap:8px}
  .site-search input{font-size:16px;min-height:44px;padding:8px 0}
  .site-search button{width:44px;min-height:44px;flex-shrink:0;font-size:20px}
  .controls{left:max(20px,var(--safe-left));right:max(20px,var(--safe-right));bottom:calc(var(--safe-bottom) + 28px);height:56px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;align-items:end;padding-top:12px}
  .controls .control-surface{left:-20px;right:-20px;top:-26px;bottom:-28px}
  .controls>.icon-button,.controls .tools>.icon-button{width:44px;height:44px}
  .controls .themes,.controls .range-group,.controls #clouds{display:none}
  .controls .tools{display:contents}
  .sea-settings-open{display:flex;justify-content:center;align-items:center;gap:10px;min-width:0;height:44px;padding:10px 15px;border:1px solid var(--line);border-radius:24px;background:#0b152680;font-size:13px;letter-spacing:.08em}
  .sea-settings-open svg{width:16px;height:16px}
  .site-footer{left:max(20px,var(--safe-left));right:max(20px,var(--safe-right));bottom:calc(var(--safe-bottom) + 6px);font-size:10px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .restore{right:max(20px,var(--safe-right));bottom:calc(var(--safe-bottom) + 20px);width:44px;height:44px}
  #site-status{top:calc(var(--safe-top) + 128px);right:20px;font-size:11px}

  .passage-nav,.friends-view .passage-nav{left:max(16px,var(--safe-left));right:max(16px,var(--safe-right));top:calc(var(--safe-top) + 16px);height:44px;gap:6px}
  .passage-back{min-height:44px;padding:10px 12px;font-size:12px;letter-spacing:.02em;gap:8px;white-space:nowrap;flex-shrink:0}
  .passage-name{display:none}
  .passage-tools{gap:6px;align-items:center}
  .passage-tools .icon-button{width:44px;height:44px}
  .pick-entry{font-size:12px;min-height:44px;padding:8px 7px;letter-spacing:0}
  #passage-play{display:none}
  .article-view>.passage-nav{padding-right:50px}
  .article-view{--reading-width:100%;--reading-gutter:24px;--reading-fade:12px}
  .article-scroll{top:calc(var(--safe-top) + 78px);bottom:calc(var(--safe-bottom) + 36px);width:100%;padding:18px max(24px,var(--safe-right)) 48px max(24px,var(--safe-left));-webkit-overflow-scrolling:touch}
  .article-backdrop{top:calc(var(--safe-top) + 65px);bottom:var(--safe-bottom);width:100%;mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 24px),transparent)}
  .article-text{font-size:17px;line-height:1.95;letter-spacing:.015em}
  .article-text h1{font-size:28px;line-height:1.5;letter-spacing:.045em;margin-bottom:22px}
  .article-meta{font-size:11px;line-height:1.7;letter-spacing:.08em;margin-bottom:18px}
  .article-text h2{font-size:23px;margin-top:32px}
  .article-text h3{font-size:20px}
  .article-text blockquote{margin:24px 0;padding-left:15px}
  .article-reading-info{font-size:12px;gap:6px 14px;margin-bottom:22px}
  .article-freshness{font-size:13px;padding:12px 14px}
  .article-text .code-window pre{padding:16px;font-size:13px;overscroll-behavior-x:contain}
  .code-window-bar{height:50px;padding:0 10px;gap:6px}
  .code-window-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .code-copy{height:44px;min-width:64px;margin-left:4px;font-size:12px}
  .article-text table{font-size:14px;overscroll-behavior-x:contain}
  .comment-form input,.comment-form textarea,.protected input{font-size:16px;min-height:44px}
  .comment-form button,.protected button,.protected input[type=submit]{min-height:44px;font-size:14px}
  .reading-return{min-height:44px}
  .reading-toc{top:calc(var(--safe-top) + 16px);bottom:auto;right:max(16px,var(--safe-right));left:auto}
  .reading-toc-toggle{width:44px;height:44px;padding:10px;background:#0b152680;border:1px solid #a5bfd52b;border-radius:50%}
  .reading-toc-toggle span{width:18px}
  .reading-toc .reading-toc-panel,.reading-toc.is-open .reading-toc-panel{top:54px;bottom:auto;right:0;width:280px;max-width:calc(100vw - 32px)}
  .reading-toc-list{max-height:calc(var(--viewport-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 170px)}
  .reading-toc-list a{font-size:14px;min-height:44px;padding:10px 2px}
  .reading-toc-list .reading-toc-sub a{font-size:13px}
  .passage-foot{bottom:calc(var(--safe-bottom) + 10px);padding:0 16px;font-size:9px;line-height:1.5;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .friends-intro{left:max(24px,var(--safe-left));right:max(24px,var(--safe-right));top:calc(var(--safe-top) + 82px)}
  .friends-eyebrow{font-size:10px;letter-spacing:.18em;margin-bottom:9px}
  .friends-intro h1{font-size:28px;letter-spacing:.12em;margin-bottom:9px}
  .friends-intro>p:last-child{display:block;font-size:12px;letter-spacing:.05em;margin:0;line-height:1.8}
  .friend-list,body:not(.effects-ready) .friend-list{top:calc(var(--safe-top) + 185px);bottom:calc(var(--safe-bottom) + 178px);left:max(20px,var(--safe-left));right:max(20px,var(--safe-right));display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:0 0 12px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .friend-link{gap:14px;min-height:84px;padding:14px 16px;width:100%;border:1px solid #a5bfd519;border-radius:14px;background:linear-gradient(110deg,#0b1725e6,#0b1725a6)}
  .friend-avatar{width:40px;height:40px}
  .friend-avatar svg{width:20px;height:20px}
  .friend-name{font-size:17px;line-height:1.4;letter-spacing:.035em}
  .friend-note{font-size:12px;line-height:1.7}
  .friends-foot{left:max(24px,var(--safe-left));right:24px;max-width:none;bottom:calc(var(--safe-bottom) + 149px);font-size:11px;letter-spacing:.02em;line-height:1.7}
  .friends-hint{font-size:0}
  .friends-hint::after{content:' · 轻触链接，拜访朋友';font-size:11px}
  .friends-pagination{left:max(24px,var(--safe-left));right:max(24px,var(--safe-right));bottom:calc(var(--safe-bottom) + 99px);font-size:12px;gap:12px;justify-content:flex-end;min-height:44px}
  .friends-pagination a{display:inline-flex;align-items:center;min-height:44px}
  .friends-empty,.friends-locked{position:relative;left:auto;top:auto;transform:none;width:auto;font-size:17px;grid-column:1/-1}

  .weather-dialog{max-height:calc(var(--viewport-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 24px);padding:20px;border-radius:18px}
  .weather-close,.collection-close{width:44px;height:44px;min-width:44px}
  .weather-search input,.weather-preview select{font-size:16px;min-height:44px}
  .weather-dialog button:not(.weather-close){min-height:44px;font-size:13px}
  .weather-heading h2{font-size:22px;line-height:1.5}
  .weather-description,.weather-status{font-size:13px}
  .collection-card{left:max(12px,var(--safe-left));right:max(12px,var(--safe-right));bottom:max(12px,var(--safe-bottom));width:auto;max-width:none;max-height:calc(var(--viewport-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 24px);padding:20px 22px;font-size:14px}
  .collection-next{min-height:44px;font-size:12px}
  .image-lightbox{height:var(--viewport-height,100dvh)}
  .lightbox-toolbar{gap:6px;padding:calc(var(--safe-top) + 12px) 60px 12px 8px}
  .lightbox-toolbar button{min-width:44px;height:44px}
  .lightbox-toolbar [data-close]{right:max(8px,var(--safe-right))}
  .lightbox-toolbar [data-zoom="reset"]{padding:0 9px;font-size:11px}
  .lightbox-zoom{min-width:40px}
  .lightbox-caption{min-height:0;padding:12px 16px calc(var(--safe-bottom) + 14px);font-size:12px}
  .keyboard-open .header,.keyboard-open .weather-chip,.keyboard-open .controls,.keyboard-open .site-footer{visibility:hidden}
  .keyboard-open .journal{top:calc(var(--safe-top) + 12px);bottom:12px}
  .keyboard-open .passage-nav,.keyboard-open .reading-toc,.keyboard-open .passage-foot{visibility:hidden}
  .keyboard-open .article-scroll{top:calc(var(--safe-top) + 12px);bottom:12px}
}

@media(max-width:360px){
  .header h1{font-size:16px}
  .article-scroll{padding-left:max(20px,var(--safe-left));padding-right:max(20px,var(--safe-right))}
  .article-text h1{font-size:26px}
  .reading-end .post-near{grid-template-columns:1fr;gap:8px}
  .reading-end .post-near>div:last-child{text-align:left}
}
@media(max-width:700px) and (max-height:650px){
  .header{top:calc(var(--safe-top) + 12px)}
  .header h1{font-size:16px}
  .header .kicker{display:none}
  .symbol{font-size:28px}
  .weather-chip{top:calc(var(--safe-top) + 54px)}
  .journal{top:calc(var(--safe-top) + 116px);bottom:calc(var(--safe-bottom) + 100px)}
  .journal-label{margin-bottom:8px}
  #site-status{top:calc(var(--safe-top) + 100px)}
  .friends-intro{top:calc(var(--safe-top) + 76px)}
  .friends-intro>p:last-child{display:none}
  .friend-list,body:not(.effects-ready) .friend-list{top:calc(var(--safe-top) + 148px)}
}
@media(min-width:701px) and (max-width:1000px) and (max-height:500px){
  .header{top:calc(var(--safe-top) + 12px);right:260px}
  .header h1{font-size:16px}
  .header .kicker{display:none}
  .weather-chip{top:calc(var(--safe-top) + 10px);left:auto;right:max(20px,var(--safe-right));max-width:230px}
  .journal{top:calc(var(--safe-top) + 74px);bottom:calc(var(--safe-bottom) + 103px);display:grid;grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:auto minmax(0,1fr);gap:0 24px}
  .journal-label{grid-column:1;grid-row:1}
  .journal-scroll{grid-column:1;grid-row:2}
  .journal-tools{display:flex;flex-direction:column;grid-column:2;grid-row:1/3;min-height:0;overflow-y:auto}
  .page-navigator{margin-top:0}
  .article-scroll{top:calc(var(--safe-top) + 72px);bottom:calc(var(--safe-bottom) + 14px);width:min(760px,calc(100% - 36px));padding-top:14px}
  .passage-foot{display:none}
  .friends-intro{top:calc(var(--safe-top) + 82px);right:auto;width:180px}
  .friends-intro h1{font-size:25px}
  .friend-list,body:not(.effects-ready) .friend-list{top:calc(var(--safe-top) + 78px);left:230px;bottom:calc(var(--safe-bottom) + 104px);grid-template-columns:repeat(2,minmax(0,1fr))}
  .friends-foot{right:auto;width:180px;bottom:calc(var(--safe-bottom) + 160px)}
  .friends-pagination{right:auto;width:180px;bottom:calc(var(--safe-bottom) + 102px);justify-content:flex-start;flex-wrap:wrap;gap:4px 8px}
}
@media(min-width:701px) and (max-width:1150px) and (min-height:501px){
  .header .identity{min-width:0;max-width:60%}
  .header .identity>div:last-child{min-width:0}
  .header h1{overflow-wrap:anywhere;letter-spacing:.15em}
  .article-view{--reading-width:min(700px,calc(100% - 80px));--reading-gutter:32px;--reading-fade:26px}
  .reading-toc{left:auto;right:8px}
}
@media(hover:none) and (pointer:coarse){
  button,a,input[type=range]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
}