/* 小栈 2026-10-03：温馨双栏首页与日夜场景；保留角色彩色及原有功能。 */
/* ==========================================================================
   SalaFM的小窝 · 手机端样式表（≤ 780px）
   ---------------------------------------------------------------------------
   【这个文件只放手机端的规则】
   电脑端的样式在 style.css 里，两边分开放，改一边不会碰到另一边。

   引入方式（见 index.html）：
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="mobile.css"
           media="(max-width: 780px), ((hover: none) and (pointer: coarse))">

   什么时候算"手机端"（2026-09-29 改）：
     ① 屏幕宽 ≤ 780px —— 普通情况
     ② 或者是**触摸设备**且宽度 ≤ 1100px —— 兜住两种真实场景：
        · 手机浏览器开"桌面站点"时，布局视口会被谎报成 ~980px。
          旧逻辑只认宽度 → 手机样式整份失效 → 电脑端布局挤在手机屏幕上，
          **右边的聊天框被挤出屏幕外**（主人报的就是这个）。
        · 手机**横过来**时宽度约 800~930px，也会超过 780 而掉回电脑端布局
          （看起来"全屏了还是竖的"）。
     触屏笔记本一般 ≥1366px，不会被误伤。
   分界线（普通情况）：屏幕宽 > 780px = 电脑端；≤ 780px = 手机端。
   因为这个文件排在 style.css 后面，同优先级的规则会覆盖电脑端那份，所以不用 !important。

   ⚠️ 下面每个块又写了一遍同样的媒体条件。**内外条件必须一致**：
      它们不是"双保险"，而是同一道门的两把锁 —— 条件一旦判错，两边会**一起失效**
      （2026-09-29 的教训：当时内外都写 `max-width: 780px`，桌面站点模式下一齐失灵）。
   ========================================================================== */


/* ==========================================================================
   1) 窄屏细节（≤ 720px）
   ========================================================================== */

/* 立绘：底部露半身、降低不透明度，既有氛围又不挡内容 */
@media (max-width: 720px) {
  .mascot-wrap { height: min(40vh, 330px); right: -12%; opacity: .4; }
  .mascot-wrap::before { display: none; }
}

/* 音乐播放器：手机端重新排布，保证一行放得下
   （原来 input[type="range"] 的 170px 会压过 .pl-vol，音量条直接撑出屏幕） */
@media (max-width: 780px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  .player {
    left: 10px; right: 10px; bottom: 10px; max-width: none;
    padding: 7px 10px 7px 8px;
    gap: 8px;
  }
  .pl-main { width: 36px; height: 36px; font-size: 13px; }
  .pl-mid { min-width: 0; flex: 1 1 auto; gap: 4px; }   /* 关键：允许被压小，否则挤爆整行 */
  .pl-title { font-size: 11.5px; }
  .pl-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
  .pl-side { gap: 1px; }
  input.pl-vol { width: 44px; }                          /* 不再是 170px */
}

/* 站长后台「好友账号」：表单和账号行改成两列/竖排 */
@media (max-width: 720px) {
  .user-add { grid-template-columns: 1fr 1fr; }
  .user-add .btn { grid-column: span 2; }
  .user-row { grid-template-columns: 34px 1fr; row-gap: 8px; }
  .u-act { grid-column: span 2; justify-content: flex-start; }
}


/* ==========================================================================
   2) 手机端主体（≤ 780px）—— 2026-09-25 重做
   ---------------------------------------------------------------------------
   原来窄屏的问题：.topbar-in 是 nowrap，品牌名 + 6 个导航 + 3 个图标按钮全挤在
   一行里，导航被压成一条缝 → 每个按钮里的字只好折成两行，竖着排了一大列，
   一进站就吃掉小半屏（朋友反馈"上面太大了"）。

   现在的结构：
     第一行：logo + 站名（超长省略号截断） ······ 👥 🔑 🌙
     第二行：导航胶囊，一整行、横向可滑动、右边缘淡出提示"还能往右滑"
   实测顶栏高度从约 400px 降到约 84px。
   ========================================================================== */
@media (max-width: 780px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {

  /* ---------- 顶栏 ---------- */
  .topbar-in {
    flex-wrap: wrap;                 /* 允许换行：导航单独占一行 */
    padding: 8px 14px;
    gap: 8px 10px;
  }
  .brand { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .brand img { width: 32px; height: 32px; border-radius: 10px; }
  .brand-txt { min-width: 0; }
  .brand-txt b {
    font-size: 14.5px; letter-spacing: .3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .brand-txt span { font-size: 9px; letter-spacing: 1.5px; }

  .iconbtn { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; flex: 0 0 auto; }
  .iconbtn .member-ava { width: 20px; height: 20px; }

  /* 导航：整行 + 横向滑动 + 绝不折行 */
  nav.menu {
    order: 3;                        /* 排到品牌/按钮后面 → 自然落到第二行 */
    flex: 1 0 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 3px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  nav.menu::-webkit-scrollbar { display: none; }
  .navbtn {
    flex: 0 0 auto;
    white-space: nowrap;             /* 关键：一个字都不许折行 */
    padding: 7px 13px;
    font-size: 13px;
  }

  /* ---------- 主菜单首屏：压扁 ---------- */
  .wrap { padding: 0 14px; }
  .hero { padding: 16px 0 20px; }
  .hero-in {
    flex-wrap: nowrap;               /* 头像和文字并排，别让头像独占一整行 */
    align-items: center;
    padding: 16px 16px;
    gap: 14px;
    border-radius: 22px;
  }
  .avatar-ring { width: 76px; height: 76px; padding: 3px; }
  .avatar-ring > div { font-size: 34px; }
  .hero-txt { flex: 1 1 auto; min-width: 0; }
  .hero-txt h1 { font-size: 20px; line-height: 1.4; letter-spacing: .3px; }
  .hero-txt .sign { font-size: 12.5px; line-height: 1.8; margin: 8px 0 10px; }
  .chips { gap: 6px; }
  .chip { font-size: 11px; padding: 4px 10px; }

  /* 板块标题也收紧一点 */
  .sec { padding: 18px 0 6px; }
  .sec-h { margin-bottom: 12px; }

  /* 立绘再淡一点、往下缩，别跟文字打架 */
  .mascot-wrap { height: min(32vh, 240px); right: -16%; opacity: .26; }
}


/* ==========================================================================
   4) 日志的评论 / 点赞 / 回复：手机端补丁
   —— 电脑端那套在 style.css，这里只做"更紧凑 + 防挤压"
   ========================================================================== */
@media (max-width: 780px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  .post-foot { gap: 6px; margin-top: 12px; padding-top: 10px; }
  .pf-btn { padding: 5px 12px; font-size: 12.5px; gap: 5px; }
  .pf-btn .pf-ico { font-size: 13px; }

  .cmt-head { margin-bottom: 10px; }
  .cmt-head b { font-size: 13px; }

  .cmt-form { gap: 8px; margin-bottom: 14px; }
  .cmt-ava { width: 32px; height: 32px; font-size: 15px; }
  .cmt-input textarea { min-height: 60px; font-size: 12.5px; padding: 9px 11px; }

  /* 手机上一行放不下"名字输入框 + 字数 + 发布"，让名字独占一行 */
  .cmt-form-foot { flex-wrap: wrap; row-gap: 8px; }
  .cmt-name { width: 100%; order: -1; }
  .cmt-who { flex: 1 1 auto; min-width: 0; }
  .cmt-num { margin-left: auto; }

  .cmt-list { gap: 13px; }
  .cmt { gap: 8px; }
  .cmt-text { font-size: 12.5px; line-height: 1.8; }
  .cmt-top b { font-size: 12px; }
  .cmt-time { font-size: 10.5px; }
  .cmt-btn { padding: 3px 8px; font-size: 11px; }
  .cmt-subs { padding-left: 8px; gap: 11px; }
  .cmt.sub .cmt-ava { width: 26px; height: 26px; font-size: 12px; }

  /* 排序 tab 别被标题挤到第二行 */
  .cmt-sort { flex: 0 0 auto; }
  .cmt-tab { padding: 3px 10px; font-size: 11.5px; }

  /* 留言板：名字 + 心情挤一行会太窄，让心情换到下一行 */
  .cmt-row { flex-wrap: wrap; gap: 6px; }
  .cmt-row .cmt-name { flex: 1 1 100%; }
  .cmt-mood { min-width: 0; flex: 0 0 auto; }
  .cmt-avs { gap: 5px; }
  .cmt-av { width: 27px; height: 27px; font-size: 13px; }
  .cmt-box.board .cmt-head b { font-size: 14px; }
}

/* ==========================================================================
   5) 公告弹窗：手机上要让位给"拇指区"和"小屏幕"
   —— 卡片贴边一点、正文更矮、按钮变整行，吉祥物缩小别挡字
   ========================================================================== */
@media (max-width: 780px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  .notice-modal { padding: 12px; align-items: flex-start; padding-top: 34px; }
  .notice-card {
    width: 100%; max-height: calc(100vh - 46px);
    padding: 36px 15px 12px; border-radius: 22px;
  }
  .nc-ribbon { font-size: 12px; padding: 5px 16px; top: -11px; }
  .nc-close { top: 9px; right: 9px; width: 26px; height: 26px; }

  .nc-body { max-height: min(38vh, 250px); padding: 12px 14px 14px 12px; border-radius: 15px; }
  .nc-title { font-size: 17px; }
  .nc-text { font-size: 13px; line-height: 1.95; }

  /* 吉祥物缩小、往角上再挪一点：手机页面窄，别让它压到按钮 */
  .nc-mascot { width: 78px; right: -8px; bottom: -14px; opacity: .95; }
  .nc-deco.d1 { top: 10px; left: 10px; font-size: 13px; }
  .nc-deco.d2 { top: 20px; right: 40px; font-size: 11px; }
  .nc-deco.d3 { display: none; }
  .nc-deco.d4 { top: -14px; right: 26px; }

  /* 拇指区：勾选框一行，两个按钮一行；右边留出吉祥物站的位置 */
  .nc-foot { padding-right: 0; margin-top: 11px; gap: 9px; }
  .nc-today { font-size: 12px; }
  .nc-btns { width: 100%; margin-left: 0; gap: 8px; padding-right: 66px; }
  .nc-btns .btn { flex: 1 1 0; justify-content: center; text-align: center; }
}

/* ==========================================================================
   6) 放映厅：手机端（片单两列、播放器铺满、聊天挪到下面）
   ========================================================================== */
@media (max-width: 780px), ((hover: none) and (pointer: coarse) and (max-width: 1100px)) {
  .video-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
  .vcard-body { padding: 9px 11px 10px; }
  .vcard-body b { font-size: 13px; }
  .vcard-body .vmeta { gap: 7px; font-size: 10.5px; }
  /* 手机没有 hover，站长按钮得常显，不然点不着 */
  .vcard-admin { opacity: 1; }
  .vcard-admin .btn { padding: 2px 7px; font-size: 10.5px; }
  .cine-tabs .tab { padding: 5px 12px; font-size: 12px; }
  .cine-hint { font-size: 11.5px; line-height: 1.7; }

  /* 改日志的弹窗：手机上铺满，正文给足高度（改长日记才不至于只能看两行） */
  .edit-modal { padding: 0; align-items: stretch; }
  .edit-card { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; padding: 12px 14px 16px; }
  .edit-card #eText { min-height: 200px; }
  .edit-card .field { flex-direction: column; align-items: stretch; }
  .edit-card .field select { flex: 0 0 auto; width: 100%; }

  /* 播放器：手机上直接铺满屏幕，别留边 */
  .cine-player { padding: 0; align-items: stretch; }
  .cp-box { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; padding: 10px; min-height: 0; }
  .cp-main { flex-direction: column; gap: 8px; min-height: 0; }
  .cp-vwrap { gap: 6px; flex: 0 0 auto; }
  /* ★ 视频区按 16:9 自己撑出一块高度，绝不被聊天挤没。
     2026-09-27 修：以前是 flex:1 + max-height:34vh，聊天一长就把视频压成 0 高，
     主人截图里视频只剩顶上一条进度条。 */
  #cpVideo {
    flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 16 / 9;
    max-height: 42vh; min-height: 0; border-radius: 10px;
    object-fit: contain; background: #000;
  }
  .cp-vbar { gap: 7px; padding: 5px 9px; }
  .cpb { font-size: 17px; padding: 2px 6px; }      /* 手机上按钮大一点好点 */
  .cpb-time { font-size: 11px; }
  /* ★ 聊天区：吃掉剩下的高度，并且自己滚（以前 max-height:none + flex:1 1 auto
     会让它无限长 → 超出屏幕的部分划不到，就是主人说的"划不下来"）。 */
  .cp-side { width: 100%; flex: 1 1 0; min-height: 0; overflow: hidden; }
  .cp-chat {
    flex: 1 1 0; min-height: 60px; max-height: none; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .cp-input, .cp-members { flex: 0 0 auto; }
  /* 同步房那块面板也别被聊天吃掉 */
  .cp-sync { flex: 0 0 auto; min-height: 0; max-height: 36vh; }

  /* ★ 全屏：各引擎的前缀都要写 —— 只认 :fullscreen 的话，
     鸿蒙上的百度浏览器算不出高度，就变成"能进全屏但一片黑"。
     另外手机上全屏的是「视频区」而不是「视频+聊天」，
     浏览器才不会因为百分比高度算成 0 而黑屏。 */
  .cp-main:fullscreen, .cp-main:-webkit-full-screen { padding: 8px; background: #000; }
  .cp-main:fullscreen #cpVideo, .cp-main:-webkit-full-screen #cpVideo { max-height: calc(100vh - 150px); }
  .cp-vwrap:fullscreen, .cp-vwrap:-webkit-full-screen { background: #000; padding: 0; gap: 6px; }
  .cp-vwrap:fullscreen #cpVideo,
  .cp-vwrap:-webkit-full-screen #cpVideo {
    flex: 1 1 auto; height: auto; max-height: none; aspect-ratio: auto; border-radius: 0;
  }
  .cp-title { font-size: 13.5px; }
  .cp-mode { font-size: 10.5px; padding: 2px 8px; }
  .cp-foot { flex-wrap: wrap; gap: 6px; font-size: 11px; }
  .cp-code { margin-left: 0; }
  .cp-input input { font-size: 13px; }
  .room-item .ri-cover { display: none; }
  /* 手机上播放器是满屏的（圆角为 0），那张氛围背景也跟着贴满 */
  #cinePlayer.friend-room .cp-friendart:not(.no-art) { inset: 0; border-radius: 0; opacity: .22; }
  .cine-switch { gap: 9px; padding: 10px 12px; }
  .cine-switch .sw-txt em { font-size: 11px; }
  .room-item .ri-txt .ri-flag { display: block; margin: 3px 0 0; width: fit-content; }
}

/* ==========================================================================
   7) 超窄屏（iPhone SE 那种 320~360）再收一档
   ========================================================================== */
@media (max-width: 380px) {
  .brand-txt b { font-size: 13.5px; }
  .brand-txt span { display: none; }
  .iconbtn { width: 30px; height: 30px; }
  .navbtn { padding: 6px 11px; font-size: 12.5px; }
  .hero-txt h1 { font-size: 18px; }
  .avatar-ring { width: 64px; height: 64px; }
  .avatar-ring > div { font-size: 28px; }
  .nc-mascot { display: none; }        /* 再窄就别让吉祥物挤正文了 */
  .nc-btns { padding-right: 0; }
  .nc-title { font-size: 16px; }
  .video-grid { grid-template-columns: 1fr; }
  #cpVideo { max-height: 34vh; }
}

/* 蓝白海洋提案：与现有触摸设备判据保持一致 */
@media (max-width:780px), ((hover:none) and (pointer:coarse) and (max-width:1100px)) {
 .wrap { padding:0 16px; }
 .topbar-in { min-height:0;padding:12px 16px 8px;gap:10px 6px; }
 .brand { margin-right:0; }
 .brand-txt b { font-size:15px; }
 .brand-txt span { font-size:8px; }
 .iconbtn { width:30px;height:30px; }
 .navbtn { font-size:12px;padding:8px 12px; }
 .hero { padding:22px 0 27px; }
 .hero-in { display:block;min-height:0;padding:25px 24px 24px;border-radius:23px; }
 .hero .avatar-ring { width:40px;height:40px;left:25px;top:28px; }
 .hero-eyebrow { padding-left:56px;height:46px;max-width:70%; }
 .hero-eyebrow span { font-size:9px;letter-spacing:1.7px; }
 .hero-eyebrow small { font-size:9px;letter-spacing:0; }
 .hero-art { width:160px;height:192px;top:5px;right:-5px;bottom:auto;overflow:clip;mask-image:linear-gradient(to bottom,#000 82%,transparent); }
 .hero-art img { height:305px;right:-16px;bottom:-70px; }
 .hero-orbit { width:151px;height:151px;right:0;top:24px; }
 .hero-star { font-size:20px;right:12px;top:9px; }
 .hero-sticker { display:none; }
 .hero-txt { width:100%;padding-top:112px; }
 .hero-hello { font-size:12px;letter-spacing:1.2px; }
 .hero-txt h1 em { font-size:32px;letter-spacing:0; }
 .hero-subtitle { font-size:17px;margin-top:10px;letter-spacing:0; }
 .hero-txt .sign { font-size:12px;line-height:1.85;margin:15px 0 19px;max-width:none; }
 .hero-actions { gap:17px;margin-bottom:20px;flex-wrap:wrap; }
 .hero-actions .btn { padding:11px 14px;font-size:12px; }
 .hero-actions .btn span { margin-left:7px; }
 .hero-secondary { font-size:11px; }
 .chips { gap:6px; }
 .chip { font-size:9px;padding:5px 7px; }
 .sec-h { gap:8px;margin-bottom:16px; }
 .sec-h h2 { font-size:17px;letter-spacing:.5px; }
 .sec-h .en { font-size:7px;letter-spacing:1px; }
 .section-star { margin-left:5px;font-size:18px; }
 .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
 .tile { min-height:171px;padding:18px 17px;border-radius:18px; }
 .tile .ti { width:29px;height:29px;margin-bottom:9px; }
 .tile b { font-size:16px;letter-spacing:.5px; }
 .tile i { font-size:10px;line-height:1.8; }
 .tile .tprev { font-size:9px;min-height:18px;margin-top:9px; }
 .tile>em { font-size:9px; }
 .tile::after { right:15px;top:16px;font-size:8px; }
 .tile[data-go="view-cinema"] { grid-column:span 2;grid-row:auto;min-height:255px;padding:24px; }
 .tile[data-go="view-cinema"] .ti { width:35px;height:35px; }
 .tile[data-go="view-cinema"] .cinema-label { margin-top:7px;font-size:9px; }
 .tile[data-go="view-cinema"] b { font-size:22px;max-width:80%; }
 .cinema-doodle { width:66px;height:66px;right:25px;bottom:27px;font-size:20px; }
 .player { left:10px;right:10px;bottom:10px; }
}
@media (max-width:360px) { .hero-in { padding:23px 20px; }.hero-txt h1 em { font-size:29px; }.hero-subtitle { font-size:15px; }.hero-actions { gap:12px; }.sec-h .en { display:none; } }

@media (max-width:780px), ((hover:none) and (pointer:coarse) and (max-width:1100px)) {
 .topbar-in { min-height:0; }
 .hero { padding:21px 0 27px; }
 .hero-in { padding:24px 22px 25px;border-width:4px;border-radius:16px;min-height:0; }
 .cozy-room { height:231px;object-position:75% 58%;mask-image:linear-gradient(#000 75%,transparent); }
 .hero-in::before,[data-theme="night"] .hero-in::before { background:none; }
 .hero .avatar-ring { left:23px;top:25px;width:39px;height:39px; }
 .hero-eyebrow { padding-left:55px;height:45px;max-width:100%;color:#76563b; }
 .hero-eyebrow span { font-size:8px;letter-spacing:1.3px; }
 .hero-eyebrow small { color:#76563b;font-size:9px; }
 .hero-art { top:42px;right:0;bottom:auto;width:155px;height:186px;mask-image:linear-gradient(#000 78%,transparent); }
 .hero-art img { height:255px;right:-3px;bottom:-41px; }
 .hero-sticker,.room-note { display:none; }
 .hero-txt { width:100%;padding-top:163px; }
 .hero-hello { font-size:11px;margin-bottom:8px;color:var(--muted); }
 .hero-txt h1 em { font-size:35px;color:var(--ink-blue); }
 .hero-subtitle { font-size:21px;color:var(--txt);margin-top:10px; }
 .hero-txt .sign { color:var(--txt-dim);font-size:12px;margin:17px 0 22px;line-height:1.9; }
 .hero-actions { gap:11px;margin-bottom:22px; }
 .hero-actions .btn { border-radius:22px;padding:11px 15px;font-size:11px; }
 .hero-secondary { font-size:10px;color:var(--ink-blue); }
 .chips { gap:5px; }
 .chip { font-size:8px;padding:5px 6px; }
 .sec-h h2 { font-size:20px; }
 .sec-h .en { display:none; }
 .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 14px; }
 .tile,.tile[data-go="view-cinema"] { min-height:166px;padding:18px 15px;border-radius:6px 6px 17px 6px; }
 .tile::before,.tile[data-go="view-cinema"]::before { width:49px;height:15px;right:33%;top:-7px; }
 .tile b { font-size:21px; }
 .tile i { font-size:10px; }
 .tile .tprev { font-size:9px; }
 .tile[data-go="view-cinema"] { grid-column:span 2;min-height:179px; }
 .tile[data-go="view-cinema"] .cinema-label { font-size:9px;margin-top:0; }
 .tile[data-go="view-cinema"] b { font-size:23px;max-width:100%; }
 .tile[data-go="view-cinema"] .ti { width:28px;height:28px; }
 .cinema-doodle { width:43px;height:43px;right:18px;bottom:18px;font-size:13px; }
 .cozy-photo { width:52px;right:12px;top:40px;padding:3px 3px 6px; }
 .cozy-photo img { height:43px; }
 .cozy-photo small { font-size:6px;margin-top:3px; }
 .tile[data-go="view-gallery"] b,.tile[data-go="view-gallery"] i,.tile[data-go="view-gallery"] .tprev { max-width:70%; }
}
@media(max-width:360px) { .hero-in { padding:24px 17px; }.hero-txt h1 em { font-size:31px; }.hero-subtitle { font-size:19px; }.hero-actions { gap:8px; }.hero-actions .btn { padding:10px 13px; }.hero-secondary { font-size:9px; }.tile b { font-size:19px; } }

@media (max-width:780px), ((hover:none) and (pointer:coarse) and (max-width:1100px)) {
 .hero { padding:18px 0 25px; }
 .hero-in { height:272px;min-height:0;padding:17px 19px;border:0;border-radius:12px; }
 .cozy-room { height:100%;mask-image:none;object-position:65% center; }
 .hero-in::before,[data-theme="night"] .hero-in::before { background:linear-gradient(0deg,#2c1d189c,transparent 75%); }
 .hero-eyebrow { padding:5px 8px;max-width:100%;height:auto; }
 .hero-eyebrow span { font-size:7px;letter-spacing:1px; }
 .hero-txt { width:auto;padding:0;left:20px;bottom:24px; }
 .hero-hello { font-size:9px;color:#fff4dd;letter-spacing:1px; }
 .hero-txt h1 em { font-size:29px;color:#fff8e4; }
 .hero-subtitle { font-size:15px;color:#fff8e4; }
 .hero-art { width:130px;height:235px;top:auto;bottom:0;right:-10px;mask-image:none; }
 .hero-art img { height:280px;bottom:-50px;right:-5px; }
 .hero-sticker { display:none; }
 .home-layout { display:flex;flex-direction:column;gap:25px; }
 .home-sidebar { width:100%; }
 .profile-paper { padding:20px 19px;text-align:left;display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 17px; }
 .profile-paper::before { width:56px;left:calc(50% - 28px); }
 .profile-kicker { grid-column:2;grid-row:1;font-size:8px; }
 .profile-paper .avatar-ring { grid-column:1;grid-row:1/span 3;width:58px;height:58px;margin:5px 0; }
 .profile-paper h2 { grid-column:2;grid-row:2;font-size:24px;margin:6px 0; }
 .profile-sub { grid-column:2;grid-row:3;font-size:9px; }
 .profile-paper .sign { grid-column:span 2;margin:16px 0;min-height:0;font-size:11px;line-height:1.85; }
 .profile-hello { grid-column:span 2;font-size:10px; }
 .profile-divider { grid-column:span 2;margin:16px 0 12px; }
 .profile-paper .chips { grid-column:span 2;flex-direction:row;flex-wrap:wrap;gap:8px 10px;justify-content:center; }
 .profile-paper .chip { font-size:8px; }
 .sidebar-note { display:none; }
 .home-content { width:100%; }
 .home-content .sec-h h2 { font-size:22px; }
 .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
 .tile { grid-column:auto;min-height:143px;padding:17px 15px; }
 .tile[data-go="view-log"],.tile[data-go="view-cinema"] { grid-column:span 2;grid-row:auto;min-height:200px;padding:23px; }
 .tile[data-go="view-log"] b,.tile[data-go="view-cinema"] b { font-size:24px;max-width:82%; }
 .tile[data-go="view-log"] { order:-2; }.tile[data-go="view-cinema"] { order:-1; }
 .tile[data-go="view-stats"] { grid-column:span 2;gap:8px;padding:13px 15px; }
 .tile[data-go="view-stats"] .tprev { font-size:8px; }
 .tile[data-go="view-stats"] em { font-size:8px; }
 .cozy-photo { width:47px;right:10px;top:33px; }.cozy-photo img { height:36px; }.cozy-photo small { font-size:6px; }
}
@media(max-width:360px) { .hero-txt h1 em { font-size:26px; }.hero-subtitle { font-size:13px; }.hero-art { right:-29px; }.tile b { font-size:18px; }.tile[data-go="view-log"] b,.tile[data-go="view-cinema"] b { font-size:22px; } }

@media (max-width:780px), ((hover:none) and (pointer:coarse) and (max-width:1100px)) {
 .section-view .page-bar { padding:20px 0 12px;gap:9px; }.section-view .page-bar h2 { font-size:12px; }.section-view .page-bar .hint { font-size:9px; }.section-view .backbtn { font-size:10px;margin-right:2px; }
 .section-intro { padding:26px 0 24px; }.section-kicker { font-size:8px;letter-spacing:1.4px; }.section-intro h3 { font-size:25px;line-height:1.55;margin:10px 0;max-width:93%; }.section-intro p { font-size:11px;line-height:1.9;max-width:95%; }.section-intro::after { top:23px;right:0;font-size:40px; }
 .section-layout.editorial,.section-layout.bulletin,.section-layout.guestbook { display:flex;flex-direction:column;gap:25px; }.section-main { width:100%; }.section-aside { width:100%; }.editorial .section-aside,.bulletin .section-aside { order:2; }.aside-paper { padding:21px 23px; }.aside-doodle { float:right;margin:8px 0;font-size:38px; }.aside-paper h3 { font-size:22px;margin:10px 0; }.aside-paper p { margin:9px 0;font-size:11px; }.aside-foot { margin:17px 0 0; }.guestbook .section-aside { display:none; }
 .section-view .card.glass { padding:20px 18px;border-radius:10px; }.section-view .btnrow { flex-wrap:wrap;gap:9px; }.section-view input,.section-view textarea,.section-view select { font-size:12px; }.section-view .empty { padding:30px 17px;font-size:11px; }
 #view-log .post-list { margin-left:7px;padding-left:16px;gap:20px; }#view-log .post { padding:21px 19px; }#view-log .post::before { left:-23px;top:29px;width:9px;height:9px; }.section-view .post h3 { font-size:23px; }.section-view .post-body { font-size:12px;line-height:1.95; }.section-view .post-hd { gap:7px;padding-bottom:11px; }.section-view .post-date { font-size:9px; }#view-log .log-tools { padding:12px; }
 #view-notice .section-main { padding:21px 15px; }#view-notice .post { padding:23px 19px; }
 #view-cinema .cine-tabs { margin:19px 0 17px; }#view-cinema .cine-hero { height:262px;padding:25px 21px;margin-bottom:23px; }#view-cinema .ch-txt { max-width:100%;gap:8px; }#view-cinema .ch-txt b { font-size:27px;max-width:90%; }#view-cinema .ch-txt span { font-size:11px; }#view-cinema .ch-txt .section-kicker { font-size:8px;letter-spacing:1px; }#view-cinema .ch-txt .ch-sub { font-size:9px; }.cinema-ticket { right:16px;top:15px;padding:10px 13px;font-size:9px; }.cinema-ticket small { font-size:7px; }#view-cinema .video-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px; }#view-cinema .vcard-body { padding:12px;gap:7px; }#view-cinema .vcard-body b { font-size:13px; }#view-cinema .vcard-admin { right:5px;top:5px;gap:3px; }#view-cinema .vcard-admin .btn { font-size:8px;padding:4px 7px; }
 .about-spread { grid-template-columns:1fr; }.about-portrait { padding:24px;border-right:0;border-bottom:1px dashed var(--brd); }.about-portrait img { width:120px;height:135px;margin-bottom:10px; }.about-portrait h3 { font-size:28px;margin:10px 0; }.about-portrait p { font-size:11px;margin-bottom:8px; }.about-details { padding:10px 22px 25px; }#view-about .about-row { grid-template-columns:65px minmax(0,1fr);gap:12px;font-size:12px;padding:15px 0; }#view-about .skills { gap:18px; }#view-about .skill .t { font-size:10px; }
 #view-fav>.card { display:block;padding:20px 17px; }#view-fav .tabs { flex-direction:row;border-right:0;border-bottom:1px solid var(--brd);padding:0 0 17px;margin:0 0 22px;gap:8px;flex-wrap:wrap; }#view-fav .tabs .tab { padding:8px 12px;font-size:11px; }#view-fav .fav-list { grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px; }#view-fav .fav-item { min-height:199px;padding:16px 14px;gap:11px; }#view-fav .fav-cover { width:47px;height:58px;font-size:25px; }#view-fav .fav-item .t { font-size:19px; }#view-fav .fav-item .s { font-size:10px; }
 #view-gallery .gal { grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 15px; }#view-gallery .gal figure { padding:7px 7px 34px;aspect-ratio:3/4;font-size:35px; }#view-gallery .gal figcaption { font-size:12px;padding:9px 0;left:8px;right:8px; }
 #view-guest .section-main>.card { padding:20px 17px; }.section-view .cmt-form { padding:14px 12px;gap:8px; }.section-view .cmt-form>.cmt-ava { display:none; }.section-view .cmt-form .cmt-input { width:100%; }.section-view .cmt-avs { gap:5px; }.section-view .cmt-av { width:29px;height:29px; }.section-view .cmt-input textarea { font-size:12px;min-height:105px; }.section-view .cmt-who { font-size:9px; }.section-view .cmt-num { font-size:9px; }.section-view .cmt-subs { padding:10px; }.section-view .cmt { gap:9px;padding:20px 0; }.section-view .cmt-text { font-size:12px; }
 #view-note .section-intro { padding-top:30px; }#view-note .section-intro h3 { max-width:100%; }#view-note #note { margin:7px 0 35px;padding:44px 25px 27px; }#view-note .note-body { min-height:240px;font-size:18px;line-height:35px; }
 #view-stats .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:0; }#view-stats .stat { padding:20px 10px; }#view-stats .stat:nth-child(2) { border-right:0; }#view-stats .stat:nth-child(-n+2) { border-bottom:1px dashed var(--brd); }#view-stats .stat b { font-size:36px;margin-bottom:9px; }#view-stats .stat span { font-size:10px; }#view-stats .share-in { grid-template-columns:1fr;gap:23px; }#view-stats .qr-box { padding:0 0 20px;border-right:0;border-bottom:1px dashed var(--brd);text-align:center; }#view-stats .qr-box img { width:130px;height:130px; }#view-stats .share-card::after { font-size:7px;right:18px;top:25px;letter-spacing:1px; }#view-stats .share-card h3 { font-size:22px; }
}
@media(max-width:360px) { .section-intro h3 { font-size:23px; }#view-fav .fav-list { grid-template-columns:1fr; }#view-cinema .ch-txt b { font-size:24px; }.section-view .cmt-row { flex-wrap:wrap; }.section-view .cmt-row input { min-width:0; } }