/* 旅行地探索的全部样式。颜色、字体都用 :root 里的变量;五档红绿灯 --lv0…--lv4 和 site/util.js 的 GRADE_RGB 是同一套。
   顺序:变量 -> 基础 -> 舞台(地球、右上角一组、时间轴、图层)-> 侧栏 -> 国家页 -> 全年页 -> 搜索框
         -> 浮层(关于、提示条)-> 英文排版 -> 窄屏和手机。
   最后三节是覆盖层,只能往后加,不要挪到前面去。 */
:root {
  --bg: #05070d;
  --ink: #e8edf6;
  --ink-2: #9aa6bc;
  --ink-3: #8896af;
  --line: rgba(160, 185, 230, 0.12);
  --glass: rgba(14, 20, 34, 0.72);
  --sun: #ffb35c;
  --sun-2: #ffd9a0;
  --mark: #ffd98a; /* 全年页的时令亮点(金点) */
  --risk: #c58fd8; /* 全年页的风险标记(紫三角) */
  --scroll: #2a3448; /* 滚动条 */
  --sea: #4f9dff; /* 水温线(和对比用的青色虚线分开) */
  /* 五档颜色:红绿灯,避开 -> 最推荐。和 util.js 的 GRADE_RGB 是同一套,列表、色条、时间轴、地球都用它 */
  --lv0: #e5534b;
  --lv1: #f0883e;
  --lv2: #e3c341;
  --lv3: #8fd05f;
  --lv4: #3fbf7f;
  /* 时间轴的实际高度(行高之和 + 上下内边距),主标题、提示和图层框按它往上让;窄屏那一节会改小 */
  --tl-h: 96px;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; }
button { font: inherit; color: inherit; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:focus-visible { outline: 2px solid var(--sun-2); outline-offset: 3px; }
[hidden] { display: none !important; }
.lv-signature { display: block; margin-top: 7px; color: var(--ink-2); font-size: 13px; line-height: 1.4; text-decoration: none; pointer-events: auto; }
.lv-signature:hover { color: var(--ink); text-decoration: underline; }
.y-left > .lv-signature { margin: 0 auto 12px; }
.y-data-note { color: var(--ink-2); font-size: 12px; line-height: 1.65; }
#startup { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; background: var(--bg); text-align: center; }
#startup h1 { font-size: 24px; font-weight: 500; }
#startup p { max-width: 38em; color: var(--ink-2); line-height: 1.7; }
#startup button { padding: 12px 24px; background: var(--sun-2); color: var(--bg); border: 0; border-radius: 10px; cursor: pointer; }
.noscript { position: fixed; inset: 0; z-index: 101; padding: 32px; background: var(--bg); }
body.notices-page { height: auto; overflow: auto; }
.notices-page main { max-width: 760px; margin: auto; padding: 32px 24px; line-height: 1.75; }
.notices-page h1 { font-family: var(--serif); font-weight: 500; }
.notices-page h2 { margin-top: 28px; font-size: 18px; }
.notices-page section + section { margin-top: 60px; border-top: 1px solid var(--line); padding-top: 32px; }
.notices-page a { color: var(--sun-2); text-underline-offset: 3px; }

#app { display: grid; grid-template-columns: 1fr 400px; height: 100vh; }
.stage-slot, .sheet-handle, .sheet-filters, .layer-toggle { display: none; }

/* 档位颜色:1 避开 … 5 最推荐。列表圆点、色块表、时间轴、图例都用它 */
.g1 { background: var(--lv0); } .g2 { background: var(--lv1); } .g3 { background: var(--lv2); } .g4 { background: var(--lv3); } .g5 { background: var(--lv4); }
.lv-0 { color: var(--lv0); } .lv-1 { color: var(--lv1); } .lv-2 { color: var(--lv2); } .lv-3 { color: var(--lv3); } .lv-4 { color: var(--lv4); }
.bg-0 { background: var(--lv0); } .bg-1 { background: var(--lv1); } .bg-2 { background: var(--lv2); } .bg-3 { background: var(--lv3); } .bg-4 { background: var(--lv4); }

/* ---------- 舞台:地球 ---------- */
.stage { position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.stage.dragging { cursor: grabbing; }
/* 只有地球和星空这两张画布铺满舞台。必须限定成直接子元素:舞台里还有右上角那组按钮,
   写成 .stage canvas, .stage svg 会把分享按钮里的图标也拉成整块画布那么大 */
.stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#stars { pointer-events: none; }

.brand { position: absolute; left: 32px; top: 26px; z-index: 3; pointer-events: none; max-width: calc(100% - var(--toolbar-width, 200px) - 64px); }
.brand .name { font-family: var(--serif); font-size: 26px; letter-spacing: 0.18em; }
.brand .slogan { font-size: 13px; color: var(--ink-2); margin-top: 6px; letter-spacing: 0.1em; }

.hero { position: absolute; left: 32px; bottom: calc(var(--tl-h) + 40px); z-index: 3; pointer-events: none; }
.hero .m { font-family: var(--serif); font-size: 84px; line-height: 0.9; letter-spacing: -0.02em; color: var(--sun-2); }
.hero .season { font-size: 14px; color: var(--ink-2); letter-spacing: 0.16em; margin-top: 10px; }
.hero .counts { font-size: 12px; color: var(--ink-3); margin-top: 6px; letter-spacing: 0.08em; }

.hint { position: absolute; left: 50%; bottom: calc(var(--tl-h) + 26px); transform: translateX(-50%); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; z-index: 2;
        pointer-events: none; white-space: nowrap; transition: opacity 1s; }

#tip { position: absolute; z-index: 5; pointer-events: none; min-width: 180px; max-width: 260px; padding: 10px 12px; border-radius: 10px;
       background: rgba(10, 14, 24, 0.9); border: 1px solid var(--line); font-size: 12px; opacity: 0; transform: translateY(4px);
       transition: opacity .15s, transform .15s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#tip.show { opacity: 1; transform: none; }
#tip .n { font-size: 14px; font-weight: 600; }
#tip .c { color: var(--ink-3); margin-left: 6px; font-weight: 400; font-size: 11px; }
#tip .r { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
#tip .r.dim { color: var(--ink-2); }
#tip .gl { margin-top: 4px; }
#tip .sf { color: var(--sf); font-size: 11.5px; }

/* ---------- 舞台右上角一组:语言切换、分享、☰ ---------- */
/* 地图那一半的右上角一组,全年页同样位置一组(.y-left .topctl) */
.topctl { position: absolute; right: 24px; top: 22px; z-index: 3; display: flex; gap: 8px; }
.y-left .topctl { right: 28px; top: 24px; }
.langsw { display: flex; align-items: center; gap: 2px; padding: 3px;
          border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font-size: 12px; }
.langsw button { background: none; border: 0; border-radius: 999px; padding: 4px 11px; font: inherit; letter-spacing: 0.04em; color: var(--ink-3); cursor: pointer; }
.langsw button:hover { color: var(--ink); }
.langsw button.on { color: #0a0f19; background: var(--sun-2); font-weight: 600; cursor: default; }
.langsw button:focus-visible { outline: 2px solid var(--sun-2); outline-offset: 1px; }
.langsw .sep { color: var(--ink-3); opacity: 0.45; font-size: 11px; }
.menubtn { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; }
.menubtn:hover { color: var(--ink); border-color: rgba(255, 190, 120, 0.5); }
.menubtn:focus-visible { outline: 2px solid var(--sun-2); outline-offset: 2px; }
.menubtn svg { display: block; margin: auto; } /* 图标在按钮里居中(高度由按钮自己居中) */

/* ---------- 底部时间轴 ---------- */
.timeline { position: absolute; left: 24px; right: 24px; bottom: 18px; z-index: 3;
            display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: 14px 62px; column-gap: 14px;
            padding: 10px 18px 10px 12px; border-radius: 16px; border: 1px solid var(--line);
            background: linear-gradient(180deg, rgba(14, 20, 34, 0.62), rgba(8, 12, 22, 0.78));
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: default; touch-action: none; user-select: none; -webkit-user-select: none; }
.tl-play { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
           border: 1px solid rgba(255, 190, 120, 0.35); background: rgba(255, 170, 80, 0.08); position: relative; transition: background .2s, border-color .2s; }
.tl-play:hover { border-color: rgba(255, 190, 120, 0.7); }
.tl-play::before { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--sun-2); }
.tl-play.on { background: rgba(255, 170, 80, 0.2); }
.tl-play.on::before { left: 11px; top: 11px; width: 4px; height: 12px; border: 0; background: var(--sun-2); box-shadow: 7px 0 0 var(--sun-2); }
.tl-play:focus-visible { outline: 2px solid var(--sun-2); outline-offset: 2px; }
.tl-cap { grid-column: 2; grid-row: 1; font-size: 11px; line-height: 11px; color: var(--ink-3); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline.dest .tl-cap { color: var(--ink-2); }
.tl-track { grid-column: 2; grid-row: 2; position: relative; display: grid; grid-template-columns: repeat(12, 1fr); cursor: pointer; }
/* z-index 1:月份格子压在太阳标记(z-index 0)上面 */
.tl-cell { all: unset; position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; min-width: 0; z-index: 1; }
.tl-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 22%; min-height: 0; }
.tl-bar { display: block; width: 100%; border-radius: 3px 3px 1px 1px; transition: height .35s ease, background .35s; min-height: 2px; }
.tl-n { font-size: 10px; color: var(--ink-3); line-height: 1; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.tl-lab { font-size: 11.5px; color: var(--ink-2); text-align: center; line-height: 15px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tl-cell:hover .tl-lab { color: var(--ink); }
.tl-cell.cur .tl-lab { color: var(--sun-2); font-weight: 600; }
.tl-cell.cur .tl-n { color: var(--sun-2); }
.tl-cell.cur::before { content: ""; position: absolute; inset: -4px 1px -2px; border-radius: 7px; background: rgba(255, 190, 120, 0.07); pointer-events: none; }
.tl-sun { position: absolute; top: -4px; bottom: 19px; width: 0; transition: left .12s linear; outline: none; z-index: 0; }
.timeline.dragging .tl-sun { transition: none; }
.tl-sun:focus-visible .tl-sun-core { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sun-2), 0 0 12px 4px rgba(255, 170, 80, 0.6); }
.tl-sun-line { position: absolute; left: -0.5px; top: 6px; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(255, 210, 150, 0.9), rgba(255, 180, 100, 0)); }
.tl-sun-core { position: absolute; left: -6px; top: 0; width: 12px; height: 12px; border-radius: 50%;
               background: radial-gradient(circle, #fff6e0, #ffc070 55%, #ff8a30); box-shadow: 0 0 10px 3px rgba(255, 170, 80, 0.55); cursor: grab; }
.timeline.dragging .tl-sun-core { cursor: grabbing; }

/* ---------- 地图图层切换:地球右下角,时间轴上方 ---------- */
.layers { position: absolute; right: 24px; bottom: calc(var(--tl-h) + 46px); z-index: 3; width: 236px; padding: 8px 10px 9px;
          border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(14, 20, 34, 0.62), rgba(8, 12, 22, 0.78));
          backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink-2); font-size: 11px; }
.ly-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ly-btns button { border: 1px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 999px; padding: 3px 0; font: inherit; font-size: 11.5px; cursor: pointer; }
.ly-btns button:hover { color: var(--ink); }
.ly-btns button.on { color: #0a0f19; background: var(--sun-2); border-color: var(--sun-2); }
.ly-btns button:focus-visible { outline: 2px solid var(--sun-2); outline-offset: 2px; }
.ly-legend { margin-top: 8px; }
.lg-grade { display: flex; justify-content: space-between; gap: 2px; }
.lg-grade span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; flex: 1; }
.lg-grade i { display: block; width: 100%; height: 6px; border-radius: 2px; }
.lg-ramp { height: 7px; border-radius: 4px; }
.lg-ticks { position: relative; height: 13px; margin-top: 2px; }
.lg-ticks span { position: absolute; transform: translateX(-50%); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-ticks span:first-child { transform: none; }
.lg-ticks span:last-child { transform: translateX(-100%); }
.lg-note { margin-top: 3px; font-size: 10px; color: var(--ink-3); }

/* ---------- 侧栏 ---------- */
.panel { position: relative; z-index: 4; background: linear-gradient(180deg, rgba(12, 17, 29, 0.96), rgba(8, 11, 19, 0.98));
         border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
/* 顶上一行:搜索框 + 心愿单入口 */
.topbar { display: flex; align-items: center; gap: 8px; padding: 20px 22px 0; }
.topbar .topsearch { flex: 1; min-width: 0; padding: 0; }
/* 放大镜画在背景上。注意:这条规则现在整条都不生效 —— 下面「搜索框」一节的 .search input 和它同权重、
   排在后面,那边的 padding 和 background 都是简写,会把这里的 padding-left 和 background-image 一起覆盖掉,
   所以侧栏搜索框现在看不到放大镜。保留这条是为了留住原意;要让图标出来,把 .search input 的
   background 改成 background-color(简写会清掉 background-image),这属于改画面,没在这轮里动。 */
.topsearch input { padding-left: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%235d6a82' stroke-width='1.6'%3E%3Ccircle cx='6' cy='6' r='4.6'/%3E%3Cpath d='M9.4 9.4 13 13'/%3E%3C/svg%3E");
                   background-repeat: no-repeat; background-position: 12px 50%; }
.wishbtn { flex: none; display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
           background: rgba(160, 185, 230, 0.05); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.wishbtn span { color: var(--sun-2); font-size: 15px; line-height: 1; }
.wishbtn b { font-weight: 500; font-variant-numeric: tabular-nums; }
.wishbtn:hover { color: var(--ink); border-color: rgba(255, 190, 120, 0.4); }
.wishbtn.on { color: #0a0f19; background: var(--sun-2); border-color: var(--sun-2); }
.wishbtn.on span { color: #0a0f19; }
.wishbtn:focus-visible, .star:focus-visible { outline: 2px solid var(--sun-2); outline-offset: 2px; }
.star { flex: none; background: none; border: 0; padding: 0 2px; margin-left: 2px; font-size: 16px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.star:hover, .star.on { color: var(--sun-2); }
.lists { overflow-y: auto; flex: 1; padding: 6px 0 24px; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
.empty { padding: 12px 22px; color: var(--ink-3); font-size: 13px; }
.chip { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 5px 11px; font-size: 12px; color: var(--ink-2);
        cursor: pointer; transition: all .18s; }
.chip:hover { color: var(--ink); border-color: rgba(200, 215, 240, 0.3); }
.chip.on { color: #0a0f19; background: var(--sun-2); border-color: var(--sun-2); }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 5px; background: rgba(140, 170, 220, 0.08); color: var(--ink-2); }
.tag.pro { background: rgba(255, 207, 112, 0.1); color: #ffe0a6; }
.tag.con { background: rgba(178, 122, 164, 0.14); color: #e2b8d6; }
.tag.ev { background: none; border: 1px dashed rgba(160, 185, 230, 0.35); color: var(--ink-2); }
.tag.now { background: none; border: 1px solid currentColor; } /* 选中卡片上"这个月 · 档位"那一枚,颜色由 lv-N 给 */

/* 筛选:范围一行(选了洲再多一行区域)、玩法一行、「更多条件」一行 */
.filters { padding: 12px 22px 14px; border-bottom: 1px solid var(--line); }
.frow { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; }
.frow + .frow { margin-top: 8px; }
.frow.sub { margin-top: 6px; }
.flab { font-size: 11px; color: var(--ink-3); line-height: 26px; letter-spacing: 0.1em; }
.fchips { display: flex; flex-wrap: wrap; gap: 5px; }
.frow.sub .chip { font-size: 11.5px; padding: 3px 9px; }
/* 更多条件:按钮 + 默认收起的小抽屉(白天气温区间、水温下限) */
.cond-toggle { background: none; border: 1px dashed var(--line); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12px; color: var(--ink-3); cursor: pointer; }
.cond-toggle:hover { color: var(--ink); }
.cond-toggle.set { color: var(--sun-2); border-color: rgba(255, 190, 120, 0.5); border-style: solid; }
.csum { font-size: 11.5px; color: var(--sun-2); align-self: center; }
.cond { margin: 8px 0 2px 38px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(160, 185, 230, 0.04); }
.cond .crow2 { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.cond .crow2:first-child { margin-top: 0; }
.cond .cv { color: var(--ink); font-variant-numeric: tabular-nums; }
.cond input[type="range"] { width: 100%; accent-color: var(--sun-2); margin: 4px 0 6px; }
.cond .cnote { font-size: 10.5px; color: var(--ink-3); line-height: 1.5; margin-top: 4px; }
.cond .cond-clear { margin-top: 6px; background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
/* 双头气温滑块:两个原生滑块叠在一条轨道上,各自去掉轨道、只有圆点能拖;
   亮色轨道画在外层的 ::before 上,只在两个圆点之间(--a、--b 由 panel.js 设) */
.cond .cdual { position: relative; height: 22px; --a: 0%; --b: 100%; }
.cond .cdual::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(160, 185, 230, 0.18) var(--a), var(--sun-2) var(--a), var(--sun-2) var(--b), rgba(160, 185, 230, 0.18) var(--b)); }
.cond .cdual input { position: absolute; left: 0; top: 0; margin: 0; height: 22px; pointer-events: none;
  -webkit-appearance: none; appearance: none; background: transparent; }
.cond .cdual input::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.cond .cdual input::-moz-range-track { background: transparent; }
.cond .cdual input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--sun-2); border: 2px solid #0a0f19; margin-top: -6px; cursor: pointer; pointer-events: auto; }
.cond .cdual input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--sun-2); border: 2px solid #0a0f19; cursor: pointer; pointer-events: auto; }

/* 行上的小徽章:安全级别、物价。点一下打开「关于」并跳到对应一节(app.js 的捕获阶段监听) */
/* 安全警告:4 级用「避开」的红,3 级用「不太推荐」的橙,1 级绿、2 级黄,和档位颜色是同一套 */
.sf-avoid { --sf: var(--lv0); } .sf-caution { --sf: var(--lv1); }
.sf-l1 { --sf: var(--lv4); } .sf-l2 { --sf: var(--lv2); }
.sfb { flex: none; font-size: 10.5px; padding: 0 6px; border-radius: 4px; color: var(--sf); border: 1px solid var(--sf); white-space: nowrap; cursor: pointer; }
.sfb.sf-l1, .sfb.sf-l2 { opacity: 0.85; cursor: help; } /* 低风险只是说明"查过",不跳转 */
.sfbanner { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--sf); border-left-width: 3px;
  background: color-mix(in srgb, var(--sf) 10%, transparent); font-size: 12px; line-height: 1.55; color: var(--ink); }
.sfbanner .h { color: var(--sf); font-weight: 600; font-size: 12.5px; }
.sfbanner .d { color: var(--ink-3); font-size: 11px; }
.sfbanner a { color: var(--ink-2); }
/* 当地吃住物价:$ / $$ / $$$,没点亮的 $ 是淡色;按团价的另写字 */
.price { flex: none; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-3);
         font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; margin-left: 6px; }
.price b { font-weight: 600; color: var(--sun-2); }
.price.pkg { color: #e8c48c; border-color: rgba(232, 196, 140, 0.45); }
.focus .cc .sfb, .y-head .crumb .sfb { margin-left: 6px; vertical-align: 1px; }
.focus .cc .price, .y-head .crumb .price { vertical-align: 1px; }

/* 分档国家列表 */
.tier { padding-top: 6px; }
.tier-h { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 8px;
          padding: 14px 22px 8px; cursor: pointer; }
.tier-h .tn { font-size: 13px; letter-spacing: 0.14em; color: var(--ink); }
.tier-h b { font-size: 12px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tier-h .th { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier-h .caret { font-size: 14px; color: var(--ink-3); width: 14px; text-align: center; }
.tier-h:hover .tn, .tier-h:hover .caret { color: var(--sun-2); }
.tier-h:focus-visible { outline: 2px solid var(--sun-2); outline-offset: -2px; }
/* 世界视图按国家整体档位分组(whole…avoid,再加单独的 unsafe);下钻后按地方档位分组(g5…g1) */
.tier-whole .tn, .tier-g5 .tn { color: var(--lv4); }
.tier-partial .tn, .tier-g4 .tn { color: var(--lv3); }
.tier-ok .tn, .tier-g3 .tn { color: var(--lv2); }
.tier-meh .tn, .tier-g2 .tn { color: var(--lv1); }
.tier-avoid .tn, .tier-unsafe .tn, .tier-g1 .tn { color: var(--lv0); }
.tbadge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.tbadge.tier-whole { color: var(--lv4); } .tbadge.tier-partial { color: var(--lv3); } .tbadge.tier-ok { color: var(--lv2); }
.tbadge.tier-meh { color: var(--lv1); } .tbadge.tier-avoid { color: var(--lv0); }

/* 下钻:面包屑、国家/大区抬头、大区行、地方行、国家行 */
/* top 抵掉 .lists 的 6px 上内边距,否则吸顶后上面会露出一条滚过去的内容 */
.crumbs { position: sticky; top: -6px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 12px 22px 10px;
          background: rgb(11, 15, 26); border-bottom: 1px solid var(--line); font-size: 12px; }
.crumb { all: unset; cursor: pointer; color: var(--ink-2); padding: 2px 0; }
.crumb:hover, .crumb:focus-visible { color: var(--sun-2); text-decoration: underline; text-underline-offset: 3px; }
.crumb.cur { cursor: default; color: var(--ink); font-weight: 600; }
.crumbs .sep { color: var(--ink-3); }
.crumbs .crumb-x { margin-left: auto; width: 24px; height: 24px; padding: 0; border-radius: 50%; text-align: center; line-height: 24px; font-size: 12px; color: var(--ink-3); }
.crumbs .crumb-x:hover, .crumbs .crumb-x:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--ink); text-decoration: none; }
.dhead { padding: 16px 22px 6px; }
.dhead .t1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dhead .nm { font-family: var(--serif); font-size: 26px; }
.dhead .meta { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; letter-spacing: 0.04em; }
.dhead .where, .dhead .tl { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.6; }
.dhead .rs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.glab { flex: none; margin-left: auto; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.dhead .glab { margin-left: 0; }

.urow, .prow, .crow { padding: 9px 22px 10px; cursor: pointer; border-left: 2px solid transparent; transition: background .15s, border-color .15s; outline: none; }
.urow:hover, .urow:focus-visible, .prow:hover, .prow:focus-visible, .crow:hover, .crow:focus-visible { background: rgba(120, 150, 210, 0.06); border-left-color: rgba(255, 190, 120, 0.5); }
.prow.sel { background: rgba(255, 180, 100, 0.07); border-left-color: var(--sun); }
/* 地图上指着的国家 / 大区 / 地方,对应的那一行跟着亮 */
.crow.hl, .urow.hl, .prow.hl, .mx-row.hl { background: rgba(120, 150, 210, 0.1); border-left-color: rgba(235, 242, 255, 0.75); }
.urow .c1, .prow .c1 { display: flex; align-items: center; gap: 8px; }
/* 国家行上徽章多(当季 + 安全 + 物价):间距收紧、允许压缩,行不超出侧栏 */
.crow .c1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.urow .nm, .prow .nm { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 国名尽量完整:先让右边的色条变短,实在放不下才截断国名 */
.crow .nm { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 3em; max-width: calc(100% - 140px); }
.urow .ct, .crow .ct { flex: none; font-size: 11px; color: var(--ink-3); min-width: 52px; text-align: right; }
.crow .ct { font-variant-numeric: tabular-nums; }
.urow .chev, .crow .chev { flex: none; font-size: 15px; color: var(--ink-3); }
.crow .chev { transition: transform .15s, color .15s; }
.urow:hover .chev, .crow:hover .chev { color: var(--sun-2); }
.crow:hover .chev { transform: translateX(2px); }
.prow .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.urow .where, .crow .where { font-size: 12px; color: var(--ink-2); margin-top: 5px; line-height: 1.55; }
.urow .tl, .prow .tl { font-size: 12px; color: var(--ink-3); margin-top: 5px; line-height: 1.55; }
.urow .rs, .prow .rs, .crow .rs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crow .season, .dhead .season { flex: none; font-size: 10.5px; padding: 0 6px; border-radius: 4px; color: var(--lv4); border: 1px solid var(--lv4); letter-spacing: 0.08em; }
/* 一格一片:大区或地方,宽度按地方数,颜色按档位 */
.ubar { flex: none; margin-left: auto; width: 84px; display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; }
.ubar span { min-width: 3px; display: flex; }
.ubar i { flex: 1; opacity: 0.92; }
.crow .ubar { flex: 0 12 84px; min-width: 12px; }

/* 选中目的地卡片 */
.focus { margin: 16px 16px 4px; padding: 16px; border-radius: 14px; background: rgba(255, 180, 100, 0.05); border: 1px solid rgba(255, 190, 120, 0.22); }
.focus .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.focus .nm { font-family: var(--serif); font-size: 22px; }
.focus .cc { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.focus .acts { display: flex; align-items: center; gap: 4px; }
.focus .x { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; }
.focus .x:hover { color: var(--ink); }
.focus .tl { font-size: 13px; color: var(--ink-2); margin-top: 10px; line-height: 1.6; }
.focus .strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 14px; }
.focus .strip div { height: 26px; border-radius: 4px; position: relative; cursor: pointer; transition: transform .15s; }
.focus .strip div:hover { transform: translateY(-2px); }
.focus .strip div.cur { outline: 1.5px solid var(--sun-2); outline-offset: 2px; }
/* 它全年最好的那几个月(去就挑这几个月):格子下方一个小点 */
.focus .strip div.top::after { content: ""; position: absolute; left: 50%; bottom: -21px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--lv4); }
.focus .strip span { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font-size: 10px; color: var(--ink-3); }
.focus .rs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 28px; }
.focus .open-year { margin-top: 14px; width: 100%; padding: 9px 0; border-radius: 10px; border: 1px solid rgba(255, 190, 120, 0.4); background: rgba(255, 170, 80, 0.1);
                    cursor: pointer; font-size: 13px; letter-spacing: 0.12em; transition: background .2s, border-color .2s; }
.focus .open-year:hover { background: rgba(255, 170, 80, 0.2); border-color: rgba(255, 200, 140, 0.8); }
.focus .open-year::after { content: " →"; }
.focus .open-group { margin-top: 8px; width: 100%; padding: 8px 0; border-radius: 10px; border: 1px solid var(--line); background: transparent;
                     cursor: pointer; font-size: 12px; color: var(--ink-2); transition: color .2s, border-color .2s; }
.focus .open-group:hover { color: var(--ink); border-color: rgba(200, 215, 240, 0.35); }

/* 国家组 / 心愿单:地点 x 12 个月的色块表 */
.grp { margin: 16px 16px 0; }
.grp-h { display: flex; justify-content: space-between; align-items: flex-start; padding: 2px 6px 12px; }
.grp-h .nm { font-family: var(--serif); font-size: 24px; letter-spacing: 0.06em; }
.grp-h .sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.grp-h .gx, .grp-h .wx { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; }
.grp-h .gx:hover, .grp-h .wx:hover { color: var(--ink); }
.grp-h .wacts { display: flex; align-items: center; gap: 6px; }
.grp-h .wshare { all: unset; font-size: 12px; color: var(--sun-2); border: 1px solid rgba(255, 190, 120, 0.35); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.grp-h .wshare:hover { background: rgba(255, 190, 120, 0.12); }
.grp-h .wshare:focus-visible { outline: 2px solid var(--sun-2); }
.mx { display: flex; flex-direction: column; gap: 3px; }
.mx-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(12, 18px); gap: 3px; align-items: center; padding: 2px 6px; border-radius: 6px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.mx-row[data-id]:hover { background: rgba(120, 150, 210, 0.07); }
.mx-row.sel { background: rgba(255, 180, 100, 0.09); }
.mx-row .nm { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.mx-row.sel .nm { color: var(--sun-2); }
.mx-head { cursor: default; position: sticky; top: 0; z-index: 1; background: rgba(10, 14, 24, 0.96); padding-top: 6px; padding-bottom: 4px; }
.mx-head .mh { font-size: 9px; text-align: center; color: var(--ink-3); cursor: pointer; white-space: nowrap; letter-spacing: -0.06em; }
.mx-head .mh.cur { color: var(--sun-2); font-weight: 600; }
.mx-row .c { height: 15px; border-radius: 3px; transition: transform .12s; }
.mx-row .c:hover { transform: scale(1.2); }
.mx-row .c.cur { box-shadow: 0 0 0 1.5px rgba(255, 217, 160, 0.9); }
.mx-row .c.g0 { background: rgba(120, 140, 180, 0.12); }
.mx-row .c.top { position: relative; }
/* 年历里全年最好的月份:格子中间一个深色小点 */
.mx-row .c.top::after, .wkey .c.top::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: rgba(8, 12, 20, 0.85); }
.mx-row .nm .open-year.mini { all: unset; margin-left: 6px; font-size: 11px; color: var(--sun-2); cursor: pointer; }
.mx-row .nm .open-year.mini:hover { text-decoration: underline; }
.grp-hint { font-size: 11px; color: var(--ink-3); margin: 12px 6px 0; line-height: 1.6; }

/* 心愿单:年历、分享、打开别人分享来的单子 */
.wish .wrow .cc { font-size: 11px; color: var(--ink-3); }
.wish .wrow .tl { margin-left: 16px; }
.wish .dview { margin: 0 6px 8px; }
.wish .ysec { margin: 4px 0 14px; }
.wnote { font-size: 12px; color: var(--ink-2); margin: -4px 6px 10px; line-height: 1.6; }
.wnote.ok { color: var(--sun-2); }
.wnote input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; font: inherit; font-size: 11.5px; color: var(--ink); background: rgba(120, 150, 210, 0.08); border: 1px solid rgba(120, 150, 210, 0.25); border-radius: 6px; padding: 6px 8px; }
.wbanner { margin: -2px 6px 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 190, 120, 0.08); border: 1px solid rgba(255, 190, 120, 0.25); font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.wb-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wb-acts button { all: unset; font-size: 12px; padding: 4px 12px; border-radius: 999px; cursor: pointer; color: var(--ink-2); border: 1px solid rgba(120, 150, 210, 0.3); }
.wb-acts .wmerge { background: var(--sun-2); color: #1a1208; border-color: transparent; font-weight: 600; }
.wb-acts button:focus-visible { outline: 2px solid var(--sun-2); }
.wnow { margin: 0 6px 10px; font-size: 13px; line-height: 1.6; }
.wnow span { color: var(--sun-2); margin-right: 8px; }
.wnow b { font-weight: 500; }
.wnow i { font-style: normal; color: var(--ink-3); }
.wkey { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); margin: 8px 6px 0; }
.wkey .c { position: relative; display: inline-block; width: 18px; height: 15px; border-radius: 3px; }

/* ---------- 国家页 / 大区页 ---------- */
.mstrip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin: 12px 0 24px; }
.mstrip .ms { all: unset; box-sizing: border-box; height: 22px; border-radius: 4px; position: relative; cursor: pointer; transition: transform .15s; }
.mstrip .ms.g0 { background: rgba(120, 140, 180, 0.12); }
.mstrip .ms.g1 { background: var(--lv0); } .mstrip .ms.g2 { background: var(--lv1); } .mstrip .ms.g3 { background: var(--lv2); }
.mstrip .ms.g4 { background: var(--lv3); } .mstrip .ms.g5 { background: var(--lv4); }
.mstrip .ms:hover { transform: translateY(-2px); }
.mstrip .ms.cur { outline: 1.5px solid var(--sun-2); outline-offset: 2px; }
.mstrip .ms:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mstrip .ms span { position: absolute; left: 0; right: 0; bottom: -15px; text-align: center; font-size: 10px; color: var(--ink-3); }
.mstrip .ms.cur span { color: var(--sun-2); }
.dview { display: flex; gap: 4px; margin: 10px 22px 4px; padding: 3px; border-radius: 8px; background: rgba(120, 150, 210, 0.08); }
.dview button { all: unset; flex: 1; text-align: center; font-size: 12.5px; padding: 6px 0; border-radius: 6px; color: var(--ink-2); cursor: pointer; letter-spacing: 0.08em; }
.dview button.on { background: rgba(255, 190, 120, 0.16); color: var(--sun-2); }
.dview button:not(.on):hover { color: var(--ink); }
.dview button:focus-visible { outline: 2px solid var(--sun-2); }
.ysec { margin: 14px 16px 0; }
.ysec-h { font-size: 12px; letter-spacing: 0.12em; color: var(--ink-3); padding: 0 6px 8px; }
.ysec .mx-head { position: static; } /* 下钻里面包屑已经吸顶,表头不再吸顶,免得钻到面包屑底下 */
.mrow { display: grid; grid-template-columns: 38px auto minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; }
.mrow:hover, .mrow:focus-visible { background: rgba(120, 150, 210, 0.07); outline: none; }
.mrow.cur { background: rgba(255, 180, 100, 0.08); }
.mrow .mn { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mrow.cur .mn { color: var(--sun-2); }
.mrow .glab { margin-left: 0; }
.mrow .glab.lv-none { color: var(--ink-3); }
.mrow .mw { font-size: 12px; color: var(--ink-2); line-height: 1.55; }
/* 心愿单的「每个月能去哪儿」只有两列 */
.mrow.wm { grid-template-columns: 38px minmax(0, 1fr); padding: 4px 6px; }
.mrow.wm .mw b { font-weight: 500; }
.mrow.wm .mw i { font-style: normal; color: var(--ink-3); }
.mx-row.unit .nm { font-size: 13.5px; }
.mx-row.unit .nm em { font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-left: 5px; }
.mx-row.unit .caret { font-style: normal; display: inline-block; width: 14px; color: var(--ink-2); font-size: 12px; }
.mx-row.unit:hover { background: rgba(120, 150, 210, 0.07); }
.mx-row.sub .nm { padding-left: 16px; font-size: 12.5px; color: var(--ink-2); }

/* ---------- 全年页 ---------- */
#year { position: fixed; inset: 0; z-index: 20; display: none; grid-template-columns: minmax(0, 1fr) 440px;
        background: radial-gradient(110% 90% at 32% 50%, rgba(16, 24, 44, 0.84), rgba(5, 7, 13, 0.95) 72%);
        backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }
#year.open { display: grid; }
.y-portal { position: fixed; z-index: 21; pointer-events: none; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0;
            border: 1.5px solid rgba(255, 210, 150, 0.9); box-shadow: 0 0 28px 6px rgba(255, 170, 80, 0.35), inset 0 0 28px rgba(255, 170, 80, 0.25); }
.y-left { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.y-back { position: absolute; left: 28px; top: 24px; z-index: 2; background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
          padding: 8px 16px; font-size: 13px; cursor: pointer; transition: border-color .2s; }
.y-back::before { content: "← "; }
.y-back:hover, .y-back:focus-visible { border-color: rgba(255, 190, 120, 0.6); outline: none; }
/* top 70px:右上角让给语言切换那一组 */
.y-cmp-legend { position: absolute; right: 28px; top: 70px; display: flex; gap: 16px; font-size: 12px; color: var(--ink-2); }
.y-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 0 24px 26px; font-size: 11px; color: var(--ink-3); letter-spacing: 0.05em; }
.y-legend i { display: inline-block; vertical-align: middle; margin-right: 7px; }
.lg-petal { width: 9px; height: 14px; border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%; background: linear-gradient(0deg, rgba(63, 191, 127, 0.15), var(--lv4)); }
.lg-temp { width: 46px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--lv0), var(--lv1), var(--lv2), var(--lv3), var(--lv4)); }
.lg-rain { width: 14px; height: 6px; border-radius: 2px; background: rgba(110, 165, 255, 0.6); }
.lg-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 6px var(--mark); }
.lg-risk { width: 8px; height: 7px; background: var(--risk); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* 年轮图(SVG):12 瓣,瓣长和颜色是人工档位,外圈是降水 */
.y-chart { overflow: visible; }
.y-chart text { font-family: var(--sans); }
.y-rings circle { stroke: rgba(160, 185, 230, 0.11); stroke-dasharray: 2 5; }
.y-rings text { fill: var(--ink-3); font-size: 10px; letter-spacing: 0.12em; }
.y-rain-track { stroke: rgba(110, 165, 255, 0.025); }
.y-rain { fill: rgba(110, 165, 255, 0.34); pointer-events: none; transition: fill .2s; }
.y-rain.hl { fill: rgba(150, 195, 255, 0.85); }
.y-rain-b { stroke: rgb(130, 225, 255); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.y-petal { pointer-events: none; transition: opacity .25s; }
.y-petal.cur { stroke: rgba(255, 238, 205, 0.95); stroke-width: 1.4; filter: url(#yglow); }
.y-chart.hovering .y-petal:not(.hl), .y-chart.hovering .y-petal-b:not(.hl) { opacity: 0.4; }
.y-petal-b { fill: rgba(130, 225, 255, 0.06); stroke: rgba(130, 225, 255, 0.9); stroke-width: 1.4; stroke-linejoin: round; pointer-events: none; transition: opacity .25s; }
.y-mlabel { fill: rgba(170, 185, 210, 0.55); font-size: 12px; pointer-events: none; }
.y-mlabel.cur { fill: var(--sun-2); font-weight: 600; }
.mk-peak { fill: var(--mark); filter: drop-shadow(0 0 3px rgba(255, 200, 110, 0.9)); }
.mk-win { fill: rgba(255, 217, 138, 0.45); }
.mk-risk { fill: var(--risk); }
.mk-sev1 { opacity: 0.5; } .mk-sev2 { opacity: 0.8; } .mk-sev3 { opacity: 1; }
.y-hole { fill: rgba(5, 8, 16, 0.88); stroke: rgba(160, 185, 230, 0.14); pointer-events: none; }
.y-c-month { fill: var(--ink); font-family: var(--serif) !important; pointer-events: none; }
.y-c-level { fill: currentColor; letter-spacing: 0.2em; pointer-events: none; }
.y-c-level-b { fill: rgb(130, 225, 255); pointer-events: none; }
.y-hit { fill: transparent; cursor: pointer; }

.y-right { overflow-y: auto; padding: 34px 30px 44px; border-left: 1px solid var(--line); background: rgba(8, 11, 19, 0.5);
           scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
.y-right > section { margin-top: 26px; }
.y-in { opacity: 0; transform: translateY(12px); transition: opacity .55s, transform .55s cubic-bezier(.2, .7, .2, 1); }
#year.shown .y-in { opacity: 1; transform: none; }
#year.shown .y-in:nth-child(1) { transition-delay: .30s; } #year.shown .y-in:nth-child(2) { transition-delay: .38s; }
#year.shown .y-in:nth-child(3) { transition-delay: .46s; } #year.shown .y-in:nth-child(4) { transition-delay: .54s; }
#year.shown .y-in:nth-child(5) { transition-delay: .62s; }
/* 顶上这行只是说明(国家 · 类型 · 区域),和侧栏面包屑同名,不要继承面包屑的悬停下划线 */
.y-head .crumb { font-size: 12px; color: var(--ink-3); letter-spacing: 0.1em; cursor: default; }
.y-head .crumb:hover { color: var(--ink-3); text-decoration: none; }
.y-head .nm { font-family: var(--serif); font-weight: 400; font-size: 40px; margin: 8px 0 0; letter-spacing: 0.04em; }
.y-head .nm .star { font-size: 22px; vertical-align: 0.15em; margin-left: 10px; }
.y-head .tl { font-size: 14px; color: var(--ink-2); line-height: 1.75; margin: 10px 0 0; }
.y-head .meta { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.y-sum .row { display: flex; gap: 14px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.y-sum .k { width: 40px; flex: none; font-size: 12px; letter-spacing: 0.1em; }
.y-sum .v { font-size: 14px; color: var(--ink); }
.y-h { font-size: 12px; letter-spacing: 0.2em; color: var(--ink-3); margin-bottom: 10px; }

.y-month { padding: 16px; border-radius: 14px; background: rgba(160, 185, 230, 0.035); border: 1px solid var(--line); }
.y-month .mh { display: flex; align-items: center; gap: 10px; }
.y-month .m { font-family: var(--serif); font-size: 24px; }
.y-month .lv { font-size: 12px; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; }
.y-month .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.y-month .stats.five { grid-template-columns: repeat(5, 1fr); }
.y-month .sk { font-size: 11px; color: var(--ink-3); }
.y-month .sv { font-size: 15px; margin-top: 3px; white-space: nowrap; }
.y-month .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 12px; min-height: 20px; }
.y-month table.vs { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.y-month .vs th { font-weight: 500; text-align: left; font-size: 12px; color: var(--ink-2); padding: 4px 0; }
.y-month .vs td { padding: 4px 0; }
.y-month .vs td.sk { font-size: 11px; color: var(--ink-3); width: 44px; }
.sw-a, .sw-b { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; flex: none; }
.sw-a { background: linear-gradient(#ffe0a0, #ff9e52); }
.sw-b { border: 1.5px solid rgb(130, 225, 255); background: rgba(130, 225, 255, 0.12); }

.cmp-chip { display: inline-flex; align-items: center; gap: 2px; padding: 5px 6px 5px 10px; border-radius: 999px; font-size: 13px; margin-bottom: 10px;
            border: 1px solid rgba(130, 225, 255, 0.45); background: rgba(130, 225, 255, 0.07); }
.cmp-chip .cc { font-size: 11px; color: var(--ink-3); margin-left: 6px; }
.cmp-chip .x { background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: 16px; padding: 0 6px; line-height: 1; }
.cmp-chip .x:hover { color: var(--ink); }
/* 相似的地方(点一下就对比) */
.y-sim { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.y-sim .k { font-size: 11px; color: var(--ink-3); margin-right: 2px; }
.y-sim button { background: rgba(160, 185, 230, 0.06); border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.y-sim button:hover { color: var(--ink); border-color: rgba(127, 214, 232, 0.6); }
.y-sim .cc { font-size: 10px; color: var(--ink-3); margin-left: 5px; }

/* 逐月气候小图(SVG):气温区间 + 降水柱 + 白昼虚线 + 水温线;对比的第二个地方用青色虚线 */
.y-clim-svg { width: 100%; height: auto; display: block; overflow: visible; }
.y-clim-svg .col { fill: transparent; cursor: pointer; }
.y-clim-svg .col.cur { fill: rgba(255, 217, 160, 0.06); }
.y-clim-svg .col.hl { fill: rgba(160, 185, 230, 0.07); }
.y-clim-svg .ax { font-size: 8px; fill: var(--ink-3); }
.y-clim-svg .ml { font-size: 9px; fill: var(--ink-3); pointer-events: none; }
.y-clim-svg .ml.cur { fill: var(--sun-2); }
.y-clim-svg .rain { fill: rgba(110, 150, 230, 0.45); pointer-events: none; }
.y-clim-svg .rain.hl { fill: rgba(140, 180, 250, 0.8); }
.y-clim-svg .band { fill: rgba(240, 160, 110, 0.14); pointer-events: none; }
.y-clim-svg .tmax, .y-clim-svg .tmin { fill: none; stroke-width: 1.6; stroke-linejoin: round; pointer-events: none; }
.y-clim-svg .tmax { stroke: #f0a06e; } .y-clim-svg .tmin { stroke: rgba(240, 160, 110, 0.55); }
.y-clim-svg .day { fill: none; stroke: var(--sun-2); stroke-width: 1; stroke-dasharray: 2 2.5; opacity: 0.75; pointer-events: none; }
.y-clim-svg .sea { fill: none; stroke: var(--sea); stroke-width: 1.6; pointer-events: none; }
.y-clim-svg .tmax-b, .y-clim-svg .tmin-b { fill: none; stroke: #7fd6e8; stroke-width: 1.3; stroke-dasharray: 4 3; pointer-events: none; }
.y-clim-svg .tmin-b { opacity: 0.6; }
.y-clim-lg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.y-clim-lg i { display: inline-block; width: 12px; height: 3px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.y-clim-lg .lg-t { background: #f0a06e; } .y-clim-lg .lg-r { background: rgba(110, 150, 230, 0.6); height: 8px; width: 8px; }
.y-clim-lg .lg-s { background: var(--sea); height: 2px; }
.y-clim-lg .lg-d { background: none; border-top: 1px dashed var(--sun-2); height: 0; } .y-clim-lg .lg-b { background: none; border-top: 1.5px dashed #7fd6e8; height: 0; }

/* 玩法日历:每种玩法一行,外加风险和旺季各一行 */
.y-cal-grid { display: grid; grid-template-columns: 86px repeat(12, 1fr); gap: 3px; align-items: center; }
.y-cal-grid .lab { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.y-cal-grid .lab.risk { color: #d9b0e6; } .y-cal-grid .lab.peak { color: #e8c48c; }
.y-cal-grid .mh-c { font-size: 10px; text-align: center; color: var(--ink-3); cursor: pointer; }
.y-cal-grid .mh-c.cur { color: var(--sun-2); }
.y-cal-grid .cell { height: 16px; border-radius: 3px; position: relative; cursor: pointer; transition: transform .15s; }
.y-cal-grid .cell.off { background: rgba(160, 185, 230, 0.04); }
.y-cal-grid .cell.pk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; opacity: 0.85; }
.y-cal-grid .cell.rk1 { background: rgba(197, 143, 216, 0.3); } .y-cal-grid .cell.rk2 { background: rgba(197, 143, 216, 0.6); } .y-cal-grid .cell.rk3 { background: rgba(197, 143, 216, 0.92); }
.y-cal-grid .cell.pkseason { background: repeating-linear-gradient(135deg, rgba(232, 196, 140, 0.5) 0 3px, rgba(232, 196, 140, 0.12) 3px 6px); }
.y-cal-grid .cell.cur { box-shadow: 0 0 0 1.5px rgba(255, 217, 160, 0.9); }
.y-cal-grid .cell.hl { transform: scaleY(1.25); }
.y-cal-hint { font-size: 11px; color: var(--ink-3); margin-top: 10px; line-height: 1.6; }

/* ---------- 搜索框:侧栏顶上和全年页"对比"共用 ---------- */
/* 必须排在 .topsearch input 后面:两条同权重,这里的 padding 简写说了算 */
.search { position: relative; }
.search input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(160, 185, 230, 0.05);
                color: var(--ink); font: inherit; font-size: 13px; outline: none; transition: border-color .2s; }
.search input:focus { border-color: rgba(255, 190, 120, 0.55); }
.search input::placeholder { color: var(--ink-3); }
.sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; display: none; max-height: 320px; overflow-y: auto; padding: 6px 0;
       border-radius: 12px; border: 1px solid var(--line); background: rgb(12, 17, 29); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.sug.open { display: block; }
.sug-h { font-size: 11px; color: var(--ink-3); letter-spacing: 0.14em; padding: 8px 14px 4px; }
.sug-i { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.sug-i .sub { font-size: 11px; color: var(--ink-3); }
.sug-i.on, .sug-i:hover { background: rgba(255, 180, 100, 0.09); }
.sug-empty { padding: 10px 14px; font-size: 12px; color: var(--ink-3); }

/* ---------- 浮层:「关于」面板、提示条 ---------- */
#about { position: fixed; inset: 0; z-index: 40; }
#about[hidden] { display: none; }
#about .ab-back { position: absolute; inset: 0; background: rgba(3, 5, 10, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#about .ab-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); overflow-y: auto; padding: 28px 30px 40px;
                   background: linear-gradient(180deg, rgba(12, 17, 29, 0.98), rgba(8, 11, 19, 0.99)); border-left: 1px solid var(--line); color: var(--ink);
                   transform: translateX(16px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
#about.open .ab-panel { transform: none; opacity: 1; }
#about .ab-x { position: absolute; right: 18px; top: 18px; width: 30px; height: 30px; border: 0; background: none; color: var(--ink-3); font-size: 22px; cursor: pointer; }
#about .ab-x:hover { color: var(--ink); }
#about h1 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 10px; }
#about h2 { font-size: 13px; font-weight: 600; color: var(--sun-2); margin: 0 0 8px; letter-spacing: 0.04em; }
#about section { margin-top: 22px; padding: 6px 0; border-radius: 8px; transition: background .6s; }
#about section.flash { animation: abflash 1.2s ease; } /* 从小徽章跳进来时,对应那一节闪一下 */
@keyframes abflash { 0% { background: rgba(255, 190, 120, 0.14); } 100% { background: transparent; } }
#about p { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); margin: 6px 0; }
#about ul { list-style: none; padding: 0; margin: 0; }
#about li { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); padding: 4px 0; }
#about li > .sfb, #about li > .price { flex: none; min-width: 64px; text-align: center; cursor: default; margin: 0; }
#about .ab-grades i { flex: none; width: 12px; height: 12px; border-radius: 3px; transform: translateY(1px); }
#about .ab-grades b { flex: none; min-width: 64px; font-weight: 600; color: var(--ink); }
#about .ab-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); }
#about .ab-credits { font-size: 11.5px; }
#about .ab-credits a { color: var(--ink-2); border-bottom: 1px dotted rgba(154, 166, 188, 0.5); text-decoration: none; }
#about a { color: var(--sun-2); text-underline-offset: 3px; }

.toast { position: fixed; z-index: 50; max-width: 300px; padding: 9px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5;
         background: rgba(14, 20, 34, 0.97); color: var(--ink); border: 1px solid rgba(255, 190, 120, 0.4); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); }
.toast input { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 11px; background: rgba(160, 185, 230, 0.06); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }

/* ---------- 英文排版 ---------- */
/* 中文那套大字距放到拉丁字母上会显得散,英文也比中文长;只对 lang=en 生效,中文不受影响 */
html:lang(en) .brand .name { letter-spacing: 0.04em; }
html:lang(en) .brand .slogan { letter-spacing: 0.04em; }
html:lang(en) .hero .season { letter-spacing: 0.04em; }
html:lang(en) .hero .counts { letter-spacing: 0.02em; }
html:lang(en) .hint { letter-spacing: 0.02em; }
html:lang(en) .flab { letter-spacing: 0.02em; }
html:lang(en) .frow { grid-template-columns: 44px minmax(0, 1fr); }
html:lang(en) .cond { margin-left: 52px; }
html:lang(en) .tier-h .tn { letter-spacing: 0.03em; }
html:lang(en) .ysec-h, html:lang(en) .y-h, html:lang(en) .sug-h { letter-spacing: 0.06em; }
html:lang(en) .y-rings text, html:lang(en) .y-c-level, html:lang(en) .y-head .crumb, html:lang(en) .y-sum .k { letter-spacing: 0.04em; }
html:lang(en) .lg-grade span { white-space: nowrap; }
/* 左下角的统计行和底部的操作提示:英文提示更长,两行挨得太近,统计块整体往上让一点 */
html:lang(en) .hero { bottom: calc(var(--tl-h) + 50px); }
/* 玩法日历:英文名字更长(Cities & culture、Gion Matsuri (Jul)),左边一列放宽 */
html:lang(en) .y-cal-grid { grid-template-columns: 132px repeat(12, 1fr); }
/* 对比表左边一列(Humidity、Daylight)和心愿单"每个月能去"的月份名(January)英文更宽 */
html:lang(en) .y-month .vs td.sk { width: 66px; padding-right: 8px; }
html:lang(en) .mrow { grid-template-columns: 76px auto minmax(0, 1fr); }
html:lang(en) .mrow.wm { grid-template-columns: 76px minmax(0, 1fr); }

/* ---------- 窄屏:上地球、下侧栏;全年页改成一列滚动 ---------- */
@media (max-width: 860px) {
  html, body { overflow: hidden; }
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56vh minmax(0, 1fr); grid-template-rows: 56dvh minmax(0, 1fr); height: 100vh; height: 100dvh; }
  :root { --tl-h: 84px; }
  .panel { border-left: 0; border-top: 1px solid var(--line); min-width: 0; }
  .brand { left: 16px; top: 14px; }
  .brand .name { font-size: 20px; }
  .brand .slogan { display: none; }
  .hero { left: 16px; bottom: calc(var(--tl-h) + 20px); }
  .hero .m { font-size: 38px; }
  .hero .season { display: none; }
  .hero .counts { font-size: 11px; }
  .hint { display: none; }
  #tip { display: none; }
  .timeline { left: 8px; right: 8px; bottom: 8px; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: 14px 54px; column-gap: 8px; padding: 8px 10px 8px 8px; border-radius: 12px; }
  .tl-play { width: 30px; height: 30px; }
  .tl-play::before { left: 11px; top: 8px; }
  .tl-play.on::before { left: 9px; top: 9px; }
  .tl-lab { font-size: 10px; }
  .tl-n { font-size: 9px; }
  .tl-col { padding: 0 16%; }
  .topctl { right: 12px; top: 12px; gap: 6px; }
  .langsw { font-size: 11px; }
  .langsw button { padding: 3px 9px; }
  .topbar { padding: 12px 14px 0; }
  .wishbtn { height: 36px; padding: 0 10px; }
  .filters { padding: 10px 14px 10px; }
  .frow { grid-template-columns: 26px minmax(0, 1fr); gap: 6px; }
  .fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fchips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .crow { padding: 9px 14px 10px; }
  .tier-h { padding: 12px 14px 6px; }
  .tier-h .th { display: none; }
  .focus, .grp { margin: 12px 10px 0; }

  #year { grid-template-columns: 1fr; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #year.open { display: block; }
  .y-left { height: calc(100vw + 120px); max-height: 680px; }
  .y-left .topctl { right: 14px; top: 14px; }
  .y-back { left: 12px; top: 12px; padding: 7px 13px; font-size: 12px; }
  .y-cmp-legend { right: 14px; top: 52px; flex-direction: column; gap: 4px; align-items: flex-end; }
  .y-legend { gap: 6px 12px; padding: 0 12px 10px; font-size: 10.5px; }
  .y-right { border-left: 0; border-top: 1px solid var(--line); padding: 22px 16px 48px; overflow: visible; }
  .y-head .nm { font-size: 32px; }
  .y-month .stats, .y-month .stats.five { grid-template-columns: repeat(2, 1fr); }
  .y-cal-grid { grid-template-columns: 70px repeat(12, 1fr); gap: 2px; }

  html:lang(en) .frow { grid-template-columns: 40px minmax(0, 1fr); }
  html:lang(en) .hero { bottom: calc(var(--tl-h) + 20px); }
}
@media (max-width: 640px) {
  /* 手机上左下角是月份和计数,放不下,图层切换和语言切换都挪到右上角:语言在上面一排,图层框往下让 */
  .topctl { right: 8px; top: 10px; }
  .layers { right: 8px; top: 44px; bottom: auto; width: 210px; padding: 6px 8px 7px; }
  .lg-grade span { font-size: 9px; white-space: nowrap; }
  .lg-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  #about section.flash { animation: none; }
}

/* 短屏留出能阅读的列表,而不是把上下布局压成几行像素。 */
@media (max-width: 1000px) and (max-height: 540px) and (min-width: 600px) {
  #app { grid-template-columns: minmax(0, 1fr) minmax(300px, 46%); grid-template-rows: minmax(0, 1fr); height: 100dvh; }
  .panel { border-left: 1px solid var(--line); border-top: 0; }
  .brand { left: 12px; top: 12px; }
  .brand .name { font-size: 19px; }
  .brand .slogan, .hero .season, .hero .counts, .hint { display: none; }
  .hero { left: 12px; bottom: calc(var(--tl-h) + 22px); }
  .hero .m { font-size: 32px; }
  .layers { top: 63px; right: 10px; bottom: auto; width: 190px; }
  #year.open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 48%); overflow: hidden; }
  .y-left { height: 100dvh; min-height: 0; }
  .y-right { overflow-y: auto; border-top: 0; border-left: 1px solid var(--line); padding: 16px 16px 36px; }
  .y-back { max-width: 42%; }
}
@media (max-width: 599px) and (max-height: 650px) {
  #app { grid-template-rows: minmax(250px, 46dvh) minmax(0, 1fr); }
  .panel { overflow-y: auto; }
  .lists { flex: 0 0 auto; overflow: visible; }
  .y-left { height: min(430px, 72dvh); }
}
@media (pointer: coarse) {
  input[type="search"], input[type="text"], select { font-size: 16px; }
  .menubtn, .wishbtn, #about .ab-x, .star, .tl-play { min-width: 44px; min-height: 44px; }
  .langsw button, .chip, .y-sim button, .y-back { min-height: 44px; }
  .fchips { gap: 4px; }
  .topbar { padding-top: 8px; }
  .layers { top: 64px; }
}

/* 筛选区可单独滚动,让短屏与长文案始终留下结果阅读空间。 */
@media (max-width: 1000px) {
  .filters { flex: 0 1 auto; max-height: clamp(76px, 20dvh, 180px); overflow-y: auto; }
  .topbar { flex-shrink: 0; }
  .lists { min-height: 80px; }
}
.y-back-short { display: none; }
@media (max-width: 420px) {
  .y-back-full { display: none; }
  .y-back-short { display: inline; }
}
@supports (padding: env(safe-area-inset-top)) {
  .brand { top: max(14px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
  .topctl, .y-left .topctl { top: max(14px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  .y-back { top: max(14px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
  .timeline { bottom: max(8px, env(safe-area-inset-bottom)); }
}

/* Compact screens disclose the list instead of making the globe share half a page. */
@media (max-width: 860px), (max-width: 1000px) and (max-height: 540px) {
  #app { --compact-ui: 1; --dock-height: calc(108px + env(safe-area-inset-bottom, 0px)); position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--dock-height); height: 100dvh; }
  #app[data-sheet="collapsed"] { --dock-height: calc(44px + env(safe-area-inset-bottom, 0px)); }
  .stage-slot { display: block; position: absolute; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); pointer-events: none; }
  #app .brand { max-width: calc(100% - var(--toolbar-width, 180px) - 32px); }
  #app .brand .name { display: block; line-height: 1.2; text-wrap: balance; }
  #app .panel { border-left: 0; border-top: 1px solid var(--line); overflow: visible; padding-bottom: env(safe-area-inset-bottom, 0px); }
  #app[data-sheet="expanded"] .panel { position: absolute; bottom: 0; right: 0; left: 0; height: min(74dvh, 640px); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .28); }
  .sheet-handle { display: flex; align-items: center; flex: 0 0 44px; height: 44px; padding: 0 12px; gap: 8px; }
  .sheet-toggle { display: flex; align-items: center; flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: none; font-size: 13px; cursor: pointer; gap: 8px; touch-action: none; }
  .sheet-toggle svg { flex: none; transition: transform .18s; }
  #app[data-sheet="expanded"] .sheet-toggle svg { transform: rotate(180deg); }
  .sheet-grip { width: 24px; height: 3px; border-radius: 3px; background: var(--ink-3); flex: none; }
  .sheet-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 11px; }
  .sheet-map { height: 44px; border: 0; background: none; padding: 0 4px; font-size: 12px; color: var(--sun-2); cursor: pointer; flex: none; }
  #app[data-sheet="collapsed"] .sheet-map { display: none; }
  #app .topbar { flex: 0 0 56px; padding: 0 12px 12px; }
  #app .topsearch input { height: 44px; font-size: 16px; }
  #app .wishbtn { height: 44px; min-width: 44px; }
  #app .filters { min-height: 0; max-height: min(180px, 26dvh); flex: 0 1 auto; padding: 4px 12px 12px; overflow-y: auto; }
  #app .lists { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .sheet-filters { display: block; text-align: left; margin: 0 12px; padding: 0 8px; min-height: 44px; flex: 0 0 44px; color: var(--sun-2); background: none; border: 0; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; }
  #app:not([data-sheet="expanded"]) .filters, #app:not([data-sheet="expanded"]) .lists, #app:not([data-sheet="expanded"]) .sheet-filters,
  #app[data-sheet="collapsed"] .topbar, #app .panel[data-filters="false"] .filters { display: none; }
  #app .layers { top: calc(var(--toolbar-bottom, 50px) + 8px); right: max(12px, env(safe-area-inset-right)); bottom: auto; width: auto; padding: 0; border: 0; background: none; backdrop-filter: none; }
  .layer-toggle { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-width: 96px; min-height: 44px; font-size: 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: #0e1422; cursor: pointer; margin-left: auto; }
  .layer-options { display: none; position: absolute; right: 0; top: calc(100% + 6px); width: min(290px, calc(100vw - 24px)); padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #0e1422; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
  .layers.is-open .layer-options { display: block; }
  .ly-btns button { min-height: 44px; }
  .lg-note { display: block; }
  .lg-grade span { font-size: 10px; }
  .chip { min-height: 44px; }
}
/* Short landscape: the same disclosure docks at the side, leaving the map tall. */
@media (max-width: 1000px) and (max-height: 540px) and (min-width: 480px) {
  #app, #app[data-sheet="collapsed"] { grid-template-columns: minmax(0, 1fr) 52px; grid-template-rows: minmax(0, 1fr); }
  #app .panel { border-top: 0; border-left: 1px solid var(--line); padding-bottom: 0; }
  #app:not([data-sheet="expanded"]) .sheet-handle { flex: 1; height: auto; padding: 6px 4px; }
  #app:not([data-sheet="expanded"]) .sheet-toggle { height: 100%; flex-direction: column; justify-content: center; }
  #app:not([data-sheet="expanded"]) .sheet-toggle > span:not(.sheet-grip):not(.sheet-summary) { writing-mode: vertical-rl; }
  #app:not([data-sheet="expanded"]) .sheet-summary, #app:not([data-sheet="expanded"]) .sheet-grip, #app:not([data-sheet="expanded"]) .sheet-map, #app:not([data-sheet="expanded"]) .topbar { display: none; }
  #app[data-sheet="expanded"] .panel { top: 0; left: auto; bottom: 0; height: auto; width: clamp(300px, 46vw, 420px); border-radius: 0; }
  #app .brand .slogan, #app .hero .season, #app .hero .counts { display: none; }
  #app .stage-slot { left: 136px; }
  #app .hero { left: 12px; top: 128px; bottom: auto; }
  #app .layers { left: 12px; right: auto; }
  #app .layer-options { left: 0; right: auto; }
  #app .hero .m { font-size: 28px; }
  #app .timeline { grid-template-rows: 14px 44px; }
}