/* ===== SPLAT 10 WAVES ===== */
:root {
  --ink: #ff8a00;
  --ink2: #ffc400;
  --foe: #8a3ff0;
  --bg0: #12141d;
  --bg1: #1a1e2c;
  --paper: #f4f2ec;
  --danger: #ff3d6e;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg0); }
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Arial Black", sans-serif;
  color: var(--paper);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }
/* 合作模式：客机等待房主时隐藏主机专属按钮 */
body.guest-wait .host-only { display: none !important; }

/* ---------- 触屏 UI ---------- */
#touch-ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.tbtn {
  position: absolute; pointer-events: auto;
  touch-action: none;
  font-family: inherit; cursor: pointer;
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255, 138, 0, .16);
  border: 3px solid rgba(255, 164, 60, .65);
  color: #ffd9a3; font-size: 13px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.25;
  backdrop-filter: blur(2px);
}
.tbtn:active { background: rgba(255, 138, 0, .45); }
.tbtn span { pointer-events: none; }
#btn-swim { right: calc(24px + env(safe-area-inset-right)); bottom: calc(150px + env(safe-area-inset-bottom)); }
#btn-swap { right: calc(126px + env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom)); width: 70px; height: 70px; }
#btn-fire {
  right: calc(24px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 96px; height: 96px;
  background: rgba(255, 61, 110, .28);
  border-color: rgba(255, 115, 148, .8);
  color: #fff; font-size: 18px; letter-spacing: 1px;
}
#btn-fire:active, #btn-fire.active { background: rgba(255, 61, 110, .72); }
#btn-swim.active { background: rgba(255, 138, 0, .55); color: #fff; }

#sys-buttons { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); display: flex; gap: 8px; z-index: 20; }
#sys-buttons button {
  width: 40px; height: 40px; border-radius: 10px; border: 2px solid rgba(244,242,236,.25);
  background: rgba(18,20,29,.6); color: var(--paper); font-size: 17px; cursor: pointer;
}
#sys-buttons button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink2); }
#sys-buttons button:active { background: rgba(255,138,0,.4); }

/* ---------- 通用面板 ---------- */
.screen {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 11, 17, .72);
  backdrop-filter: blur(4px);
  padding: 16px;
  overflow: hidden;
}
.panel {
  background: var(--bg1);
  border: 3px solid rgba(244, 242, 236, .14);
  border-radius: 18px;
  padding: 26px 30px;
  max-width: 640px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  position: relative;
  transform: rotate(-0.5deg);
}
.panel::before {
  content: ""; position: absolute; inset: -3px; border-radius: 18px; pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255,138,0,.28) 30%, transparent 38%);
}

/* ---------- 开始界面（Splatoon 墨渍背景） ---------- */
#screen-start {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(7, 8, 13, .34);
  backdrop-filter: none;
}
.splat-bg { position: absolute; inset: 0; pointer-events: none; }
.splat-bg .blob { position: absolute; border-radius: 50% 40% 55% 45% / 45% 55% 40% 50%; filter: blur(1px); opacity: .85; }
.splat-bg .b1 { width: 340px; height: 300px; background: rgba(255,138,0,.16); top: -80px; left: -90px; transform: rotate(24deg); }
.splat-bg .b2 { width: 260px; height: 230px; background: rgba(138,63,240,.20); bottom: -70px; right: -60px; transform: rotate(-18deg); }
.splat-bg .b3 { width: 150px; height: 130px; background: rgba(255,196,0,.14); top: 30px; right: 18%; transform: rotate(40deg); }
.splat-bg .b4 { width: 110px; height: 100px; background: rgba(255,138,0,.13); bottom: 60px; left: 12%; transform: rotate(12deg); }
.splat-bg .b5 { width: 90px; height: 80px; background: rgba(138,63,240,.16); top: 45%; left: -30px; }
.start-panel {
  width: min(40vw, 560px);
  max-width: none;
  max-height: none;
  height: 100%;
  margin: 0;
  padding: clamp(24px, 3.2vw, 48px);
  border: 0;
  border-radius: 0;
  background: rgba(13, 14, 21, .96);
  box-shadow: -18px 0 60px rgba(0,0,0,.42);
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.start-panel::before { inset: 0; border-radius: 0; }
.start-panel .logo .l1, .start-panel .logo .l2 { transform-origin: left center; }
.start-panel .logo .l3 { letter-spacing: 8px; }
.start-panel .start-btns { flex-direction: column; align-items: stretch; }
.start-panel .big-btn { width: 100%; }
.start-panel .assist-setting { align-self: flex-start; }
.logo { display: flex; flex-direction: column; line-height: .95; margin-bottom: 10px; }
.logo .l1 {
  font-size: clamp(44px, 9vw, 76px); font-weight: 900; font-style: italic;
  color: var(--ink); letter-spacing: 2px;
  text-shadow: 3px 3px 0 rgba(0,0,0,.45), 6px 6px 0 rgba(138,63,240,.35);
  transform: rotate(-3deg);
}
.logo .l2 {
  font-size: clamp(26px, 5.4vw, 42px); font-weight: 900; font-style: italic;
  color: var(--paper); letter-spacing: 6px; transform: rotate(-3deg);
  text-shadow: 2px 2px 0 rgba(255,138,0,.5);
}
.logo .l3 {
  margin-top: 10px; font-size: clamp(15px, 3vw, 20px); letter-spacing: 14px; color: var(--ink2);
}
.tagline { color: rgba(244,242,236,.65); font-size: 14px; margin: 6px 0 18px; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.rule {
  background: rgba(244,242,236,.06); border-radius: 10px; padding: 10px 12px;
  text-align: left; font-size: 12.5px; color: rgba(244,242,236,.8);
  display: flex; flex-direction: column; gap: 3px;
  border-left: 3px solid var(--ink);
  transform: skewX(-3deg);
}
.rule b { color: var(--ink2); font-size: 14px; }
.controls-hint { font-size: 13px; color: rgba(244,242,236,.75); line-height: 1.9; margin: 12px 0 8px; }
.controls-hint b { color: var(--ink2); }
.assist-setting {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 4px 0 8px; color: rgba(244,242,236,.8); font-size: 13px; font-weight: 800;
}
.assist-setting select {
  font: inherit; color: var(--paper); background: #28252f;
  border: 1px solid rgba(244,242,236,.28); border-radius: 7px; padding: 7px 10px;
}
.assist-setting select:focus-visible { outline: 2px solid var(--ink2); outline-offset: 2px; }
.tv-hint { font-size: 12px; color: rgba(244,242,236,.45); margin-top: 10px; }
.start-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.big-btn {
  font: inherit; font-weight: 900; font-size: 20px; letter-spacing: 4px;
  color: #1a1206; background: linear-gradient(180deg, var(--ink2), var(--ink));
  border: none; border-radius: 12px; padding: 14px 42px; cursor: pointer;
  transform: skewX(-8deg); box-shadow: 0 6px 0 rgba(0,0,0,.35);
  transition: transform .08s;
}
.big-btn.alt { background: linear-gradient(180deg, #b08cff, var(--foe)); color: #fff; }
.big-btn.ghost { background: rgba(244,242,236,.12); color: var(--paper); box-shadow: none; }
.big-btn.small { font-size: 15px; padding: 10px 20px; letter-spacing: 2px; }
.big-btn:active { transform: skewX(-8deg) translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }

/* ---------- 双人配对 ---------- */
.net-panel { max-width: 720px; }
.net-desc { font-size: 13px; color: rgba(244,242,236,.7); margin: 8px 0 12px; line-height: 1.7; }
.net-status {
  background: rgba(255,138,0,.12); border-left: 3px solid var(--ink);
  padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 700;
  margin-bottom: 12px; color: var(--ink2);
}
.net-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.net-col { background: rgba(244,242,236,.05); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.net-col h3 { font-size: 15px; color: var(--ink2); font-style: italic; }
.net-col textarea {
  width: 100%; height: 62px; resize: none; border-radius: 8px;
  border: 2px solid rgba(244,242,236,.15); background: rgba(0,0,0,.3);
  color: var(--paper); font-size: 11px; padding: 6px; font-family: monospace;
}
.mini-btn {
  font: inherit; font-weight: 700; font-size: 12px; cursor: pointer;
  background: rgba(244,242,236,.1); color: var(--paper);
  border: 1px solid rgba(244,242,236,.2); border-radius: 8px; padding: 7px 10px;
}
.mini-btn:active { background: rgba(255,138,0,.3); }

/* ---------- 商店 ---------- */
.shop-panel { max-width: 560px; }
.shop-title { font-style: italic; font-weight: 900; font-size: 24px; color: var(--ink); letter-spacing: 2px; }
.shop-title span { color: var(--paper); font-size: 18px; }
.shop-coins { font-size: 18px; font-weight: 900; color: var(--ink2); margin: 8px 0 14px; }
.wave-summary { margin: 0 0 14px; padding: 10px; border-radius: 10px; background: rgba(244,242,236,.06); text-align: left; }
.wave-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wave-summary-head strong { color: var(--ink2); font-size: 13px; }
.wave-summary-head span { color: rgba(244,242,236,.65); font-size: 11px; text-align: right; }
.wave-summary-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.wave-summary-player { padding: 8px; border-radius: 8px; background: rgba(0,0,0,.2); }
.wave-summary-player h3 { color: var(--paper); font-size: 12px; margin-bottom: 6px; }
.wave-summary-player dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 12px; }
.wave-summary-player dl div { display: flex; justify-content: space-between; gap: 4px; }
.wave-summary-player dt { color: rgba(244,242,236,.6); font-size: 11px; }
.wave-summary-player dd { color: var(--ink2); font-size: 12px; font-weight: 900; }
.shop-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.shop-item {
  background: rgba(244,242,236,.07); border: 2px solid rgba(244,242,236,.14);
  border-radius: 12px; padding: 10px 12px; text-align: left; cursor: pointer;
  color: var(--paper); font: inherit; transition: background .1s;
}
.shop-item:active { background: rgba(255,138,0,.25); }
.shop-item.cant { opacity: .45; cursor: default; }
.shop-item .si-name { font-weight: 900; font-size: 15px; color: var(--ink2); }
.shop-item .si-desc { font-size: 12px; color: rgba(244,242,236,.7); margin: 3px 0; }
.shop-item .si-cost { font-weight: 900; font-size: 14px; color: var(--ink2); }
.shop-weapons { margin: 0 0 14px; padding: 10px; border-radius: 10px; background: rgba(244,242,236,.05); }
.shop-weapons h3 { color: var(--ink2); font-size: 13px; margin-bottom: 8px; }
.weapon-rack { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; }
.rack-slot { display: grid; grid-template-columns: 1fr auto auto; gap: 5px; align-items: center; }
.rack-select, .rack-move {
  min-height: 34px; border: 1px solid rgba(244,242,236,.18); border-radius: 7px;
  background: rgba(0,0,0,.2); color: var(--paper); font: inherit; font-size: 12px; cursor: pointer;
}
.rack-select { text-align: left; padding: 6px 8px; }
.rack-select[aria-pressed="true"] { border-color: var(--ink); color: var(--ink2); }
.rack-move { min-width: 34px; font-weight: 900; }
.rack-select:disabled, .rack-move:disabled { opacity: .4; cursor: default; }
.shop-timer { margin-top: 10px; font-size: 13px; color: rgba(244,242,236,.55); }

/* ---------- 结算（参考 survive10waves） ---------- */
.over-panel { text-align: center; max-width: 600px; }
.over-tag { letter-spacing: 6px; font-size: 12px; color: rgba(244,242,236,.5); margin-bottom: 6px; }
.over-panel h2 {
  font-style: italic; font-weight: 900; font-size: clamp(34px, 7vw, 54px);
  letter-spacing: 3px; transform: rotate(-2deg);
}
.over-panel h2.win { color: var(--ink2); text-shadow: 3px 3px 0 rgba(138,63,240,.4); }
.over-panel h2.lose { color: var(--danger); }
.over-panel p { color: rgba(244,242,236,.7); margin: 8px 0 14px; font-size: 14px; }
.over-panel .over-return-timer { color: var(--ink2); font-weight: 900; font-variant-numeric: tabular-nums; }
.wave-strip { display: flex; gap: 4px; justify-content: center; margin: 10px 0 4px; }
.wseg {
  flex: 1; max-width: 44px; height: 34px; line-height: 34px;
  background: rgba(244,242,236,.07); border-radius: 6px;
  font-weight: 900; font-size: 13px; color: rgba(244,242,236,.4);
  transform: skewX(-8deg);
  border-bottom: 3px solid rgba(244,242,236,.15);
}
.wseg.done { background: rgba(255,138,0,.3); color: var(--ink2); border-bottom-color: var(--ink); }
.wseg.cur { background: rgba(255,196,0,.2); color: #fff; border-bottom-color: var(--ink2); }
.strip-label { font-size: 10px; letter-spacing: 3px; color: rgba(244,242,236,.4); margin-bottom: 12px; }
.over-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { background: rgba(244,242,236,.06); border-radius: 10px; padding: 10px 6px; }
.stat .s-v { font-size: 20px; font-weight: 900; color: var(--ink2); }
.stat .s-k { font-size: 11px; color: rgba(244,242,236,.6); margin-top: 2px; }
.best-line { font-size: 14px; font-weight: 900; color: var(--ink2); min-height: 20px; margin-bottom: 10px; }
.over-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- 暂停 ---------- */
.pause-panel { text-align: center; max-width: 480px; }
.pause-panel h2 { font-style: italic; font-weight: 900; color: var(--paper); letter-spacing: 4px; margin-bottom: 12px; }
.volume-controls { display: grid; gap: 8px; margin: 16px 0; padding: 12px; border-radius: 10px; background: rgba(244,242,236,.06); text-align: left; }
.volume-setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; font-weight: 700; color: var(--paper); }
.volume-setting span { display: flex; align-items: center; gap: 8px; width: min(62%, 250px); }
.volume-setting input { flex: 1; min-width: 0; accent-color: var(--ink); touch-action: pan-x; }
.volume-setting output { min-width: 40px; text-align: right; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* ---------- 全屏（电视/投屏）模式 ---------- */
body.tv .panel { max-width: 860px; padding: 40px 48px; }
body.tv .big-btn { font-size: 28px; padding: 20px 60px; }
body.tv .stat .s-v { font-size: 30px; }
body.tv .stat .s-k { font-size: 16px; }
body.tv .rule { font-size: 16px; }
body.tv .logo .l1 { font-size: 100px; }
body.tv .controls-hint { font-size: 17px; }
body.tv .over-panel h2 { font-size: 72px; }

@media (max-width: 640px) {
  #screen-start { justify-content: center; background: rgba(7, 8, 13, .72); }
  .start-panel { width: 100%; padding: 24px 20px; }
  .start-panel .logo .l1 { font-size: clamp(48px, 14vw, 76px); }
  .start-panel .logo .l2 { font-size: clamp(28px, 8vw, 42px); }
  .panel { padding: 20px 16px; }
  .start-panel { padding: 24px 20px; }
  .rules { grid-template-columns: 1fr; }
  .shop-items { grid-template-columns: 1fr; }
  .net-cols { grid-template-columns: 1fr; }
  #btn-swim { width: 74px; height: 74px; right: calc(16px + env(safe-area-inset-right)); bottom: calc(132px + env(safe-area-inset-bottom)); }
  #btn-swap { right: calc(112px + env(safe-area-inset-right)); bottom: calc(28px + env(safe-area-inset-bottom)); }
  #btn-fire { right: calc(16px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); width: 88px; height: 88px; }
  .over-stats { grid-template-columns: repeat(3, 1fr); }
}