/*@c:start@*/
/* 世界地图三合一 · 全部样式
   ---------------------------------------------------------------
   布局策略（这次重做的重点）
   1) App 高度 = 【可视视口】高度，由 index.html 里的内联脚本把 visualViewport
      的实测值写进 --app-h。这样浏览器自己的上/下工具栏、iOS 地址栏收缩、
      安卓键盘（resizes-visual 模式下布局视口不变）都不会压住内容。
   2) 竖向 flex 三段式：顶栏 / 舞台 / 底部输入区。键盘弹起时舞台（flex:1）
      让位、顶栏不动、输入框紧贴键盘上沿 —— 不做整体上移。
   3) 四边都吃 env(safe-area-inset-*)，刘海、挖孔、横屏、手势条都不会切边。
   4) 所有留白都用 min()/clamp()/百分比，没有写死像素的“魔法高度”，
      280px 的折叠屏外屏到 4K 显示器都是同一套规则。                */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#080d12;--panel:#111a24;--line:#1c2836;--fg:#e6edf3;--dim:#7c8ea3;
  --accent:#58a6ff;--ok:#2ea043;--ok2:#3fb950;--warn:#d29922;--bad:#f85149;
  --land:#182430;--land-line:#0a1017;--r:14px;
  /* 安全区：不支持的浏览器取 0 */
  --sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);
  --pad:12px;              /* 横向内边距 */
  --tap:36px;              /* 按钮尺寸 */
}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--fg);overflow:hidden;overscroll-behavior:none;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  text-rendering:optimizeLegibility;
}
/* 可视高度：JS 写 --app-h，没跑成则退回 dvh / vh */
#app{position:relative;height:100vh;display:flex;flex-direction:column;overflow:hidden}
@supports(height:100dvh){#app{height:100dvh}}
html.js-vh #app{height:var(--app-h)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
a{color:inherit;text-decoration:none}

/* ---------------- 主页 ---------------- */
/* 内容比屏幕高时【可以滚】，不再被裁掉；用 margin:auto 居中，
   避免 justify-content:center + overflow 导致的“顶部滚不到”老毛病 */
.home{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(20px + var(--sat)) calc(20px + var(--sar)) calc(20px + var(--sab)) calc(20px + var(--sal))}
.home-bg{position:fixed;inset:0;pointer-events:none;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 78%)}
.home-bg svg{width:100%;height:100%;display:block}
.home-bg path{fill:var(--land);stroke:var(--land-line);stroke-width:.6;vector-effect:non-scaling-stroke}
.home-inner{position:relative;width:100%;max-width:900px;margin:auto}
.home h1{margin:0 0 6px;font-size:clamp(24px,7vw,40px);font-weight:800;letter-spacing:-.02em}
.home h1 em{font-style:normal;background:linear-gradient(100deg,var(--ok2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.home .sub{margin:0 0 20px;color:var(--dim);font-size:clamp(12.5px,3.5vw,15px)}
.cards{display:grid;gap:11px}
.card{position:relative;display:block;padding:15px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(30,45,60,.55),rgba(12,18,25,.75));
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.card:active{transform:scale(.975)}
.card .no{position:absolute;top:13px;right:15px;font-size:32px;font-weight:800;line-height:1;color:#ffffff0d}
.card .ico{font-size:21px;margin-bottom:7px}
.card b{display:block;font-size:15.5px;font-weight:700;margin-bottom:4px}
.card p{margin:0;color:var(--dim);font-size:12.5px;line-height:1.6}

/*@c:end@*/
/* ---------------- 游戏通用 ---------------- */
.game{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.bar{display:flex;align-items:center;gap:10px;flex:none;z-index:6;min-height:46px;
  padding:calc(6px + var(--sat)) calc(var(--pad) + var(--sar)) 6px calc(var(--pad) + var(--sal));
  border-bottom:1px solid var(--line);background:rgba(8,13,18,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.back{width:var(--tap);height:var(--tap);flex:none;border-radius:10px;display:grid;place-items:center;font-size:19px;
  border:1px solid var(--line);background:#ffffff08;transition:background .15s}
.back:active{background:#ffffff14}
.title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:0 1 auto}
.stats{margin-left:auto;flex:none;display:flex;gap:14px;font-variant-numeric:tabular-nums}
.stat{text-align:right;line-height:1.15}
.stat u{display:block;font-size:10px;color:var(--dim);text-decoration:none;letter-spacing:.04em}
.stat s{display:block;font-size:16px;font-weight:700;text-decoration:none}
/* 舞台是唯一的弹性段：键盘/横屏/小屏都由它让位，上下两条固定栏永远完整可见 */
.stage{flex:1;min-height:56px;position:relative;display:flex;flex-direction:column;overflow:hidden;background:
  radial-gradient(ellipse 120% 90% at 50% 0%,#0e1926 0%,var(--bg) 70%)}

/* 世界地图 */
.viewport{position:relative;flex:1;min-height:0;touch-action:none;cursor:grab}
.viewport.dragging{cursor:grabbing}
.viewport svg{display:block;width:100%;height:100%}
.viewport path.ct{fill:#20313f;stroke:#0a1017;stroke-width:1;vector-effect:non-scaling-stroke;
  pointer-events:all;transition:fill .25s ease}
.viewport path.ct.hit{fill:#2b4356}
.viewport path.ct.found{fill:var(--ok);stroke:#5fdd7c}
.viewport path.ct.pick{fill:var(--accent)}
.viewport path.ct.wrong{fill:var(--bad)}
.viewport .hit circle{fill:transparent;pointer-events:all}
.viewport.locked{pointer-events:none}
.zoombar{position:absolute;right:calc(10px + var(--sar));bottom:calc(10px + var(--sab));
  display:flex;flex-direction:column;gap:6px;z-index:4}
.zoombar button{width:var(--tap);height:var(--tap);border-radius:10px;line-height:1;border:1px solid var(--line);
  background:rgba(17,26,36,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:18px;font-weight:600;display:grid;place-items:center;transition:background .15s}
.zoombar button:active{background:#1f2d3d}

/* 轮廓模式 */
.outline-wrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px}
.outline-wrap svg{width:100%;height:100%;max-width:min(100%,620px);max-height:100%;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.55))}
.outline-wrap path{fill:#16222e;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.outline-wrap path.correct{fill:#12351c;stroke:var(--ok2);transition:fill .3s ease,stroke .3s ease}

/* 输入区：贴在 #app 底部，键盘弹起时因为 #app 变矮而自然被推到键盘上方 */
.inputbar{flex:none;z-index:6;
  padding:8px calc(var(--pad) + var(--sar)) calc(8px + var(--sab)) calc(var(--pad) + var(--sal));
  border-top:1px solid var(--line);background:rgba(8,13,18,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.inputbox{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:0 12px;transition:border-color .15s,box-shadow .15s}
.inputbox:focus-within{border-color:#3d6fa8;box-shadow:0 0 0 3px rgba(88,166,255,.14)}
.inputbox.err{border-color:var(--bad);animation:shake .32s}
.inputbox.ok{border-color:var(--ok2)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.inputbox input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);
  font-size:17px;padding:12px 0;font-weight:500}
.inputbox input::placeholder{color:#54677c}
.tick{font-size:15px;flex:none;opacity:0;transition:opacity .2s}
.tick.on{opacity:1}
.hintline{margin-top:6px;min-height:17px;font-size:12px;color:var(--dim);display:flex;gap:10px;align-items:center;overflow:hidden}
.hintline b{color:var(--accent);font-weight:600}
.hintline>span:not(.pill){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pill{padding:2px 8px;border-radius:20px;background:#ffffff0f;border:1px solid var(--line);white-space:nowrap;flex:none}
.skip{flex:none;margin-left:auto;color:var(--accent);font-size:12px;padding:2px 9px;border-radius:8px;
  border:1px solid var(--line);background:#ffffff08}

/* 提示条 */
.toast{position:absolute;left:50%;top:calc(58px + var(--sat));transform:translate(-50%,-14px);z-index:20;
  max-width:calc(100% - 24px);padding:9px 16px;border-radius:26px;font-size:14px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;
  background:rgba(20,32,44,.96);border:1px solid var(--line);box-shadow:0 10px 30px -10px #000;
  opacity:0;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.good{border-color:#2ea04380;color:#7ee787}
.toast.bad{border-color:#f8514980;color:#ff9d94}

/* 结算：面板比屏幕高时可滚，键盘没收起也不会被截 */
.overlay{position:absolute;inset:0;z-index:30;display:flex;overflow-y:auto;overscroll-behavior:contain;
  padding:16px calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
  background:rgba(5,9,13,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:fade .22s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{margin:auto;width:100%;max-width:380px;border-radius:18px;border:1px solid var(--line);padding:20px;
  background:linear-gradient(170deg,#16212d,#0e151d);box-shadow:0 20px 60px -20px #000;text-align:center}
.panel h2{margin:0 0 4px;font-size:20px}
.panel .sub{margin:0 0 4px;color:var(--dim);font-size:12.5px}
.panel .big{font-size:clamp(30px,9vw,42px);line-height:1.15;font-weight:800;margin:8px 0 2px;
  background:linear-gradient(100deg,var(--ok2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.panel .rows{display:grid;gap:7px;margin:14px 0 4px;text-align:left}
.panel .row{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 11px;
  border-radius:9px;background:#ffffff08}
.panel .row u{color:var(--dim);text-decoration:none}
.panel .row s{font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums}
/* 面板比屏幕高时可滚；按钮吸底，短屏（横屏）不用滚到底也能点 */
.btns{display:flex;gap:9px;margin-top:16px;position:sticky;bottom:0;
  padding-top:10px;background:linear-gradient(180deg,rgba(14,21,29,0),rgba(14,21,29,.94) 45%)}
.btn{flex:1;padding:12px;border-radius:11px;font-weight:700;font-size:14.5px;text-align:center;
  border:1px solid var(--line);background:#ffffff0a;transition:transform .12s,background .15s}
.btn:active{transform:scale(.97)}
.btn.pri{background:linear-gradient(120deg,#2ea043,#3fb950);border-color:#3fb950;color:#04140a}
.panel .miss{max-height:min(132px,26vh);overflow:auto;text-align:left;font-size:12px;color:var(--dim);
  line-height:1.9;margin-top:10px;padding:9px 11px;border-radius:9px;background:#ffffff08}
.panel .miss span{display:inline-block;margin:0 4px 0 0;padding:1px 7px;border-radius:12px;background:#ffffff0d}

/* 加载 */
.loading{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:var(--bg);padding:20px}
.spin{width:30px;height:30px;border-radius:50%;border:2.5px solid #ffffff1a;border-top-color:var(--accent);
  animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.loading p{color:var(--dim);font-size:13px;margin:12px 0 0;text-align:center}
.finish{flex:none;margin-left:10px;padding:6px 11px;border-radius:9px;font-size:12.5px;font-weight:700;
  border:1px solid #2ea04366;background:#2ea0431f;color:#7ee787;transition:background .15s}
.finish:active{background:#2ea0433d}

/* ---------------- 大地图（看名字） ---------------- */
/* 底部信息条是 .game 的固定段（不再是 .stage 里的静态块，以前会跑到顶上去） */
.infobar{flex:none;display:flex;align-items:center;gap:9px;min-height:44px;
  padding:10px calc(14px + var(--sar)) calc(10px + var(--sab)) calc(14px + var(--sal));
  border-top:1px solid var(--line);background:#0b131c;font-size:12.5px;color:var(--dim)}
.infobar b{color:var(--fg);font-size:14px;font-weight:700;white-space:nowrap;flex:none}
.infobar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bar .tool{flex:none;margin-left:8px;padding:5px 10px;border-radius:8px;font-size:12px;font-weight:700;
  border:1px solid var(--line);background:#ffffff0a;color:var(--dim);transition:.15s}
.bar .tool.on{border-color:#2ea04366;background:#2ea0431f;color:#7ee787}
/* 大洲色标：竖屏时占真实高度（地图上下本来就有留白，正好填上），
   横屏矮屏改成贴底的浮层，不抢地图空间 */
.legend{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:3px 12px;
  padding:7px calc(12px + var(--sar)) calc(6px + var(--sab)) calc(12px + var(--sal));
  border-top:1px solid var(--line);background:#0b131c;
  font-size:11px;color:#8fa2b8}
.legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.legend i{width:9px;height:9px;border-radius:2px;flex:none;box-shadow:0 0 0 1px #ffffff1a inset}

/* ---- 大地图：按大洲着色 ---- */
.viewport.tinted path.ct{stroke:#07131c;stroke-width:.9}
.viewport.tinted path.ct[data-c="0"]{fill:#3a6f96}
.viewport.tinted path.ct[data-c="1"]{fill:#4a8f72}
.viewport.tinted path.ct[data-c="2"]{fill:#a87a45}
.viewport.tinted path.ct[data-c="3"]{fill:#6d62a6}
.viewport.tinted path.ct[data-c="4"]{fill:#a05a63}
.viewport.tinted path.ct[data-c="5"]{fill:#2f7f9c}
.viewport.tinted path.ct[data-c="7"]{fill:#4d6178}
.viewport.tinted path.ct.pick{fill:#e8c34a}

/* ---- 大地图：国家名标签 ---- */
.lbls text{font-size:11px;fill:#dce6f2;text-anchor:middle;dominant-baseline:middle;
  paint-order:stroke;stroke:#08101a;stroke-width:2.6px;stroke-linejoin:round;
  pointer-events:none;font-weight:500;letter-spacing:.3px}

/* ---- 轮廓比例尺 ---- */
.scalebar{position:absolute;left:calc(16px + var(--sal));bottom:calc(14px + var(--sab));pointer-events:none}
.scalebar i{display:block;height:5px;border:1px solid #4d6580;border-top:0;
  box-sizing:border-box;border-radius:0 0 2px 2px}
.scalebar b{display:block;margin-top:3px;font-size:10px;font-weight:600;letter-spacing:.3px;
  color:#7d90a6;text-align:center;white-space:nowrap}

/* ================= 各尺寸适配 ================= */

/*@c:start@*/
/* 平板 / 桌面：主页铺三列，第 4 张横跨整行 */
@media(min-width:720px){
  .cards{grid-template-columns:repeat(3,1fr);gap:12px}
  .card{padding:16px}
  .card.wide{grid-column:1/-1}
}
/*@c:end@*/

/* 桌面 / 横屏平板：把内容收进居中的 920px 列，别让输入框拉满 4K 屏 */
@media(min-width:900px){
  .bar,.inputbar,.infobar,.legend{
    padding-left:max(var(--pad),calc(50% - 460px));
    padding-right:max(var(--pad),calc(50% - 460px))}
  .overlay{padding-left:max(16px,calc(50% - 460px));padding-right:max(16px,calc(50% - 460px))}
}

/*@c:start@*/
/* 窄屏手机（≤400px）：收紧间距，标题让位给数字 */
@media(max-width:400px){
  :root{--pad:10px;--tap:34px}
  .bar{gap:8px}
  .stats{gap:11px}
  .stat s{font-size:15px}
  .title{font-size:13px}
  .home{padding-left:calc(16px + var(--sal));padding-right:calc(16px + var(--sar))}
  .home .sub{margin-bottom:16px}
  .card{padding:13px}
  .card p{font-size:12px}
}
/*@c:end@*/
/* 超窄（折叠屏外屏 280px 及以下）：标题直接隐藏，按钮和数字优先 */
@media(max-width:319px){
  .bar .title{display:none}
  .stats{gap:9px}
  .finish{padding:6px 9px;font-size:12px}
  .legend{gap:3px 9px;font-size:10px}
}
/* 矮屏（横屏手机、老款平板）：压缩固定栏，给地图让高度 */
@media(max-height:560px){
  .bar{min-height:40px;padding-top:calc(4px + var(--sat));padding-bottom:4px}
  .back{font-size:17px}
  .inputbar{padding-top:6px;padding-bottom:calc(6px + var(--sab))}
  .inputbox input{padding:9px 0;font-size:16.5px}
  .hintline{margin-top:4px;min-height:0}
  .outline-wrap{padding:6px}
  .scalebar{left:calc(10px + var(--sal));bottom:calc(8px + var(--sab))}
  .infobar{min-height:36px;padding-top:6px;padding-bottom:calc(6px + var(--sab))}
  .panel{padding:16px}
  .panel .miss{max-height:min(96px,22vh)}
  .panel .rows{margin-top:10px}
  .btns{margin-top:12px}
  /* 横屏：色标压成一条细线，把高度留给地图 */
  .legend{justify-content:flex-start;flex-wrap:nowrap;overflow:hidden;
    padding:3px calc(12px + var(--sar)) calc(3px + var(--sab)) calc(12px + var(--sal));
    font-size:10px;gap:0 10px}
}
/*@c:start@*/
/* 横屏手机特有的极矮情况：只留标签和「跳过」按钮，正文提示收掉
   （注意别整行 display:none —— 跳过按钮就在这一行里） */
@media(max-height:400px){
  .hintline{margin-top:3px;min-height:0;font-size:11px}
  .hintline>span:not(.pill){display:none}
  .home h1{font-size:22px;margin-bottom:4px}
  .home .sub{margin-bottom:12px}
  .card .ico{margin-bottom:3px}
  .card p{line-height:1.45}
}
/*@c:end@*/
/* 键盘弹起后（#app 被压到比屏高还矮）极矮的舞台也别变成 0 高 */
@media(max-height:480px){
  .stage{min-height:48px}
}