/* ===========================================================
   汉语群岛 · 共享视觉层
   三个世界页面(群岛/内景/路线)共用此文件,避免调色板与
   界面构件三处复制、各自漂移。
   老 WebView 兼容:不使用 inset / clamp / min 的裸写法。
   =========================================================== */
:root{
 --sky-1:#A6D2DE;--sky-2:#EFD592;--sky-3:#F4B368;
 --sun:#FFF0C4;--sun-core:#FFF7E0;--sun-glow:rgba(255,221,150,.85);
 --sea-1:#7FCBD6;--sea-2:#2E86A4;--sea-3:#123F5A;--sea-4:#0B2C41;
 --foam:#F0FAFB;--glitter:#FFF4D0;
 --sand:#ECD6AB;--sand-2:#D8B784;--rock:#B49B78;--rock-2:#8E7757;
 --grass:#67AC46;--grass-2:#98D06A;--grass-d:#3C7A31;--tree:#4E9A45;--pine:#2F6E46;
 --ink:#213039;--ink-soft:#5C6B74;--plate:#FFFAF0;--plate-line:rgba(30,42,50,.14);
 --hair:rgba(255,255,255,.5);--seal:#C8341F;--gold:#E0A93E;--lock:#93A2AB;
 --grain:.05;--vig:.28;
 --serif:"Noto Serif SC","Songti SC",serif;
 --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
 --brush:"Ma Shan Zheng",var(--serif);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --sky-1:#0B1B30;--sky-2:#152A44;--sky-3:#243b56;
 --sun:#E8EFF6;--sun-core:#FBFDFF;--sun-glow:rgba(200,222,240,.5);
 --sea-1:#1B4C60;--sea-2:#0E3446;--sea-3:#07202F;--sea-4:#04141F;
 --foam:rgba(190,225,232,.4);--glitter:#CFE3F0;
 --sand:#3C3526;--sand-2:#2C2718;--rock:#4A4132;--rock-2:#332C20;
 --grass:#356B41;--grass-2:#4C8B57;--grass-d:#234a2c;--tree:#2C5E39;--pine:#244f38;
 --ink:#EAF2F6;--ink-soft:#9DB2BC;--plate:rgba(16,30,42,.92);--plate-line:rgba(170,205,218,.22);
 --hair:rgba(120,160,175,.25);--seal:#DE5942;--gold:#E9BC5E;--lock:#5A6B75;
 --grain:.07;--vig:.5;
}}
:root[data-theme="dark"]{
 --sky-1:#0B1B30;--sky-2:#152A44;--sky-3:#243b56;
 --sun:#E8EFF6;--sun-core:#FBFDFF;--sun-glow:rgba(200,222,240,.5);
 --sea-1:#1B4C60;--sea-2:#0E3446;--sea-3:#07202F;--sea-4:#04141F;
 --foam:rgba(190,225,232,.4);--glitter:#CFE3F0;
 --sand:#3C3526;--sand-2:#2C2718;--rock:#4A4132;--rock-2:#332C20;
 --grass:#356B41;--grass-2:#4C8B57;--grass-d:#234a2c;--tree:#2C5E39;--pine:#244f38;
 --ink:#EAF2F6;--ink-soft:#9DB2BC;--plate:rgba(16,30,42,.92);--plate-line:rgba(170,205,218,.22);
 --hair:rgba(120,160,175,.25);--seal:#DE5942;--gold:#E9BC5E;--lock:#5A6B75;
 --grain:.07;--vig:.5;
}

/* ---- 通用界面构件(三页共用) ---- */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--sea-4);overflow:hidden;
 -webkit-tap-highlight-color:transparent}
.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:4}
.back{position:absolute;top:16px;left:16px;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;
 text-decoration:none;background:var(--plate);border:1.5px solid var(--plate-line);color:var(--ink);
 border-radius:999px;padding:11px 20px;font-weight:800;font-size:15px;
 box-shadow:0 8px 22px rgba(0,0,0,.16);transition:.15s}
.back:hover{border-color:var(--seal);transform:translateX(-2px)}
.dn{position:absolute;top:16px;right:16px;pointer-events:auto;border:1.5px solid var(--plate-line);
 background:var(--plate);color:var(--ink);border-radius:999px;height:44px;min-width:44px;
 font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:var(--plate);
 border:1.5px solid var(--plate-line);border-radius:999px;padding:9px 20px;font-weight:700;
 font-size:14px;color:var(--ink-soft);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.hint b{color:var(--seal)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---- flex gap 回退(Chrome <84 不支持 gap;用 margin 兜底,新旧一致) ---- */
/* 实测不支持 flex gap 时才启用(Chrome 66-83 对 @supports 会误报,故用 JS 检测) */
html.no-flexgap .tools>*+*{margin-left:8px}
html.no-flexgap .back>*+*{margin-left:8px}
html.no-flexgap .chips>*{margin:0 8px 8px 0}
html.no-flexgap .chip>*+*{margin-left:6px}
html.no-flexgap .prog>*+*{margin-left:8px}
html.no-flexgap .row>*+*{margin-left:10px}
html.no-flexgap .frow>*+*{margin-left:10px}
html.no-flexgap .fitem>*+*{margin-left:12px}