:root {
  --cyan: #2ee6ff;
  --blue: #1f6bff;
  --blue-deep: #0b2a8a;
  --panel: rgba(10, 20, 60, 0.88);
  --ink: #ffffff;
  --gold: #ffd23f;
  --pink: #ff8fb1;
  --latin: "Russo One", "Arial Black", system-ui, sans-serif;
  --cjk: system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}

/* touch-action 不會繼承，所以每個元素都要設定，iOS 才不會雙擊放大 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: none; }
.card { touch-action: pan-y; } /* 卡片內容過長時仍可上下捲動（pan-y 也會停用雙擊放大） */

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #14161c;
  color: var(--ink);
  font-family: var(--cjk);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
}

#game { position: fixed; inset: 0; }
#game canvas { display: block; width: 100%; height: 100%; }

.hidden { display: none !important; }

/* ---------- HUD top ---------- */
.hud { position: fixed; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 5; }

#hud-top { top: max(6px, env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: center; }
#hud-top .phase {
  font-family: var(--latin);
  font-size: clamp(14px, 2.2vw, 26px);
  letter-spacing: 0.12em;
  color: #fff;
  -webkit-text-stroke: 1px #1b1b1b;
  text-shadow: 0 2px 0 #1b1b1b, 0 0 10px rgba(46, 230, 255, 0.6);
  padding: 0 18px 2px;
  border-bottom: 2px solid var(--gold);
}
.top-bar {
  margin-top: 4px;
  display: flex; align-items: center; gap: 14px;
  background: rgba(0, 0, 0, 0.82);
  padding: 2px 18px;
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
  font-family: var(--latin);
  font-size: clamp(18px, 3vw, 34px);
}
.top-bar .sep { width: 4px; align-self: stretch; background: #fff; margin: 4px 0; }
.top-bar .timer.warn { color: #ff5a5a; animation: pulse 0.5s infinite alternate; }
.top-bar .gems { display: flex; align-items: center; gap: 6px; }
.top-bar small { font-size: 0.6em; opacity: 0.85; }
.slime-icon {
  display: inline-block; width: 0.9em; height: 0.7em;
  background: radial-gradient(circle at 35% 35%, #c9a6ff, #9b5cff 60%, #6a2fd0);
  border-radius: 50% 50% 40% 40%;
}
.gem-icon {
  display: inline-block; width: 0.75em; height: 0.75em;
  background: linear-gradient(135deg, #b8fbff, #2ee6ff 50%, #1aa2d6);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--cyan);
}
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.12); } }

/* ---------- HUD bottom ---------- */
#hud-bottom {
  bottom: max(6px, env(safe-area-inset-bottom));
  display: flex; align-items: stretch; gap: 6px;
}
.portrait {
  position: relative;
  width: clamp(54px, 7vw, 78px);
  background: linear-gradient(#3b8cff, #1f4fd8);
  border: 3px solid var(--blue);
  border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 3px;
}
.portrait canvas { width: 100%; aspect-ratio: 1; background: #fff3d6; border-radius: 2px; }
.hearts { display: flex; gap: 2px; font-size: clamp(11px, 1.4vw, 16px); line-height: 1.2; }
.hearts i { color: #ff4f86; font-style: normal; text-shadow: 0 1px 0 #7a0030; }
.hearts i.off { color: rgba(255, 255, 255, 0.25); text-shadow: none; }

.panel { display: flex; flex-direction: column; gap: 4px; }
.slots, .name-bar {
  background: var(--panel);
  border: 3px solid var(--blue);
  border-radius: 6px;
}
.slots { display: flex; gap: 8px; padding: 5px 10px; align-items: center; }
.slot {
  position: relative;
  width: clamp(34px, 4.4vw, 50px); aspect-ratio: 1;
  background: linear-gradient(#ff5d5d, #c51f3c);
  border: 2px solid #ffe3a1;
  border-radius: 4px;
  overflow: hidden;
}
#slot-guard { background: linear-gradient(#5ec8ff, #1f5fd8); }
#slot-guard .cd { background: rgba(0, 0, 0, 0.55); }
#slot-guard.active { box-shadow: 0 0 10px #5ec8ff; border-color: #fff; }
#slot-guard.broken { filter: grayscale(1) brightness(0.7); }
.slot .ico { position: absolute; inset: 14%; background-size: contain; background-repeat: no-repeat; background-position: center; }
.ico-attack { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fff'%3E%3Crect x='6' y='12' width='14' height='14' rx='3'/%3E%3Cpath d='M22 19h8v-5l8 5-8 5v-5z'/%3E%3C/g%3E%3C/svg%3E"); }
.ico-guard { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 4l13 5v10c0 9-6 14-13 17C13 33 7 28 7 19V9z' fill='%23fff'/%3E%3Cpath d='M20 10v20M13 17h14' stroke='%231f5fd8' stroke-width='3'/%3E%3C/svg%3E"); }
.ico-stomp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3'%3E%3Ccircle cx='20' cy='20' r='6' fill='%23fff'/%3E%3Ccircle cx='20' cy='20' r='12' opacity='.8'/%3E%3Ccircle cx='20' cy='20' r='18' opacity='.45'/%3E%3C/g%3E%3C/svg%3E"); }
.ico-dash { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fff'%3E%3Crect x='20' y='12' width='14' height='14' rx='3'/%3E%3Crect x='4' y='14' width='12' height='3' rx='1.5' opacity='.8'/%3E%3Crect x='7' y='20' width='9' height='3' rx='1.5' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"); }
.ico-ko { display: inline-block; width: 1.4em; height: 1.4em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='24' rx='15' ry='12' fill='%23a46bff'/%3E%3Cpath d='M12 18l5 5M17 18l-5 5M23 18l5 5M28 18l-5 5' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E"); background-size: contain; vertical-align: middle; }
.slot .key {
  position: absolute; right: 1px; top: 0;
  font-family: var(--latin); font-size: 10px; color: #fff;
  text-shadow: 0 1px 0 #000; z-index: 2;
}
.slot .cd {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: rgba(0, 0, 0, 0.6);
}
.slot.flash { animation: flash 0.25s; }
@keyframes flash { 50% { filter: brightness(1.8); } }
.stat { font-family: var(--latin); font-size: clamp(14px, 1.8vw, 20px); display: flex; align-items: center; gap: 4px; padding-left: 4px; }
.name-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 12px;
  font-family: var(--latin); font-size: clamp(13px, 1.7vw, 20px); letter-spacing: 0.06em;
}
.name-bar b { color: var(--gold); }

body.touch .key { display: none; }

/* ---------- Touch UI ---------- */
#touch-ui { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#joy-zone { position: absolute; left: 0; bottom: 0; width: 45%; height: 70%; pointer-events: auto; }
#joy-base {
  position: absolute;
  left: max(28px, env(safe-area-inset-left)); bottom: 28px;
  width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.22));
  border: 3px solid rgba(255,255,255,0.45);
  transition: opacity 0.2s;
  opacity: 0.75;
}
#joy-base.active { opacity: 1; }
#joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b9d4ff 60%, #6a8fd8);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
#btn-zone {
  position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: 22px;
  width: 190px; height: 170px; pointer-events: none;
}
.tbtn {
  position: absolute; pointer-events: auto;
  width: 84px; height: 84px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.75);
  color: #fff; font-family: var(--cjk); font-weight: 800; font-size: 17px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  box-shadow: 0 5px 0 rgba(0,0,0,0.35);
  touch-action: none;
}
.tbtn.down { transform: translateY(3px) scale(0.95); box-shadow: 0 2px 0 rgba(0,0,0,0.35); filter: brightness(1.2); }
#btn-a { right: 0; bottom: 0; background: radial-gradient(circle at 35% 30%, #ff8a8a, #d42a48); }
#btn-b { left: 0; top: 0; width: 72px; height: 72px; background: radial-gradient(circle at 35% 30%, #8fd8ff, #2464e0); }
#btn-pause {
  position: absolute; pointer-events: auto;
  top: max(10px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(0,0,0,0.55); color: #fff; border: 2px solid rgba(255,255,255,0.5);
  font-family: var(--latin); font-size: 16px;
}

/* ---------- Screens ---------- */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10,20,60,0.55), rgba(5,8,20,0.88));
  padding: 12px;
}
.card {
  background: linear-gradient(180deg, rgba(20,40,110,0.95), rgba(8,18,60,0.95));
  border: 3px solid var(--cyan);
  box-shadow: 0 0 30px rgba(46,230,255,0.35), inset 0 0 0 3px var(--blue-deep);
  border-radius: 14px;
  padding: clamp(14px, 3vh, 28px) clamp(18px, 4vw, 40px);
  text-align: center;
  max-width: min(560px, 94vw);
  max-height: 94vh; overflow: auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.card h1, .card h2 {
  margin: 0;
  font-family: var(--latin);
  font-size: clamp(28px, 6vh, 52px);
  letter-spacing: 0.06em;
  -webkit-text-stroke: 1.5px #0b1030;
  text-shadow: 0 4px 0 #0b1030;
}
.card h1 span { color: var(--gold); }
.card .sub { margin: 0; opacity: 0.9; font-size: clamp(13px, 2.4vh, 17px); }
#title-cube { width: clamp(70px, 18vh, 130px); height: auto; }
.howto {
  text-align: left; font-size: clamp(12px, 2.2vh, 15px); line-height: 1.9;
  background: rgba(0,0,0,0.3); border-radius: 8px; padding: 6px 14px;
}
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 6px; margin-right: 3px;
  background: #fff; color: #10204d; border-radius: 4px;
  font-family: var(--cjk); font-weight: 700; font-size: 0.9em; text-align: center;
  box-shadow: 0 2px 0 #7a8ab8;
}
.mobile-only { display: none; }
body.touch .mobile-only { display: block; }
.big-btn {
  font-family: var(--cjk); font-weight: 800; font-size: clamp(16px, 3vh, 22px);
  color: #10204d;
  background: linear-gradient(#ffe680, #ffb820);
  border: 3px solid #fff; border-radius: 40px;
  padding: 10px 44px; cursor: pointer;
  box-shadow: 0 5px 0 #b06f00;
  min-width: 200px;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b06f00; }
.big-btn.ghost { background: linear-gradient(#e8f0ff, #9fb8ff); box-shadow: 0 5px 0 #4d63a8; }
#end-detail { margin: 0; line-height: 1.8; font-size: clamp(14px, 2.6vh, 18px); }

/* ---------- Banner (READY / GO) ---------- */
#banner {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);
  z-index: 8; pointer-events: none;
  font-family: var(--latin); font-size: clamp(40px, 12vh, 110px);
  color: #fff; -webkit-text-stroke: 3px #0b1030;
  text-shadow: 0 6px 0 #0b1030, 0 0 30px rgba(46,230,255,0.8);
  animation: pop 0.45s ease-out;
}
@keyframes pop { from { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ---------- Rotate hint ---------- */
#rotate-hint {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: #0b1030; color: #fff;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  font-size: 18px;
}
#rotate-hint .phone {
  width: 54px; height: 92px; border: 4px solid #fff; border-radius: 10px;
  animation: rot 1.6s ease-in-out infinite;
}
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-hint { display: flex; }
}

/* ---------- Small landscape phones ---------- */
@media (max-height: 460px) {
  #joy-base { width: 110px; height: 110px; bottom: 16px; }
  #joy-knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  #btn-zone { bottom: 12px; width: 165px; height: 148px; }
  .tbtn { width: 74px; height: 74px; font-size: 15px; }
  #btn-b { width: 64px; height: 64px; }
  .slots { padding: 3px 6px; gap: 6px; }
  .howto { line-height: 1.6; }
}

/* 手機：玩家面板移到左上角，避免遮住場地 */
body.touch #hud-bottom {
  left: max(10px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top));
  bottom: auto; transform: scale(0.82); transform-origin: top left;
}
body.touch #hud-top .phase { display: none; }

.name-bar small { font-family: var(--cjk); font-size: 0.7em; opacity: 0.8; }

/* 提示文字 */
#toast {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%);
  z-index: 8; pointer-events: none; white-space: nowrap;
  font-family: var(--latin), var(--cjk); font-weight: 800; font-size: clamp(20px, 4.5vh, 36px);
  color: var(--gold); -webkit-text-stroke: 1.5px #0b1030;
  text-shadow: 0 3px 0 #0b1030;
  animation: toast 1.1s ease-out forwards;
}
@keyframes toast {
  0% { transform: translate(-50%, 10px) scale(0.6); opacity: 0; }
  15% { transform: translate(-50%, 0) scale(1.1); opacity: 1; }
  25% { transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -16px); opacity: 0; }
}

/* 頭頂耐力條 */
#stamina {
  position: fixed; z-index: 4; pointer-events: none;
  width: 52px; height: 8px; margin: -4px 0 0 -26px;
  background: rgba(0, 0, 0, 0.6); border: 1.5px solid #fff; border-radius: 4px; overflow: hidden;
}
#stamina-fill { height: 100%; width: 100%; background: linear-gradient(#9fe0ff, #2e8bff); }
#stamina.broken #stamina-fill { background: linear-gradient(#ff9f9f, #e03030); }

/* ================= 選單系統 ================= */
.screen button, .screen input, .scroll, .seg { touch-action: manipulation; }
.scroll { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; min-height: 0; }
.card { position: relative; }
.card.wide { width: min(760px, 96vw); max-width: none; align-items: stretch; }
.card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.card header h2 { font-family: var(--cjk); font-weight: 900; font-size: clamp(20px, 4.5vh, 30px); -webkit-text-stroke: 0; }
.card h3 { margin: 10px 0 6px; text-align: left; font-size: 15px; opacity: 0.85; }
.back {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 24px; line-height: 1; font-weight: 700;
}
.fine { margin: 0; font-size: 11px; opacity: 0.6; }
.menu-list { display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); }
.menu-list .row { display: flex; gap: 10px; }
.menu-list .row .big-btn { flex: 1; min-width: 0; padding: 8px 10px; font-size: clamp(13px, 2.4vh, 16px); }
.big-btn small { display: block; font-size: 0.55em; font-weight: 600; opacity: 0.75; }
.big-btn.alt { background: linear-gradient(#8fe0ff, #2e9bff); box-shadow: 0 5px 0 #14509a; }
.big-btn.alt:active { box-shadow: 0 2px 0 #14509a; }
.big-btn:disabled { filter: grayscale(1); opacity: 0.6; }
.coin-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px;
  background: rgba(0,0,0,0.45); border-radius: 20px; font-family: var(--latin); font-size: 16px; color: var(--gold);
}
#screen-menu .coin-chip { position: absolute; right: 12px; top: 12px; }
.coin {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a8, #ffcf3f 55%, #c98a00); border: 2px solid #a86f00;
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.tile-card {
  position: relative; border-radius: 10px; border: 3px solid rgba(255,255,255,0.35); overflow: hidden;
  padding: 0; cursor: pointer; color: #fff; text-align: left; font-family: var(--cjk);
  background: #223; min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end;
}
.tile-card .art { position: absolute; inset: 0; }
.tile-card .label { position: relative; padding: 6px 10px; background: linear-gradient(transparent, rgba(0,0,0,0.75)); }
.tile-card .label b { display: block; font-size: 16px; }
.tile-card .label span { font-size: 11px; opacity: 0.85; }
.tile-card.locked { filter: grayscale(0.9) brightness(0.55); cursor: default; }
.tile-card.selected { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,210,63,0.7); }
.tile-card .badge {
  position: absolute; right: 6px; top: 6px; z-index: 1; font-size: 12px; font-weight: 800;
  background: rgba(0,0,0,0.6); border-radius: 10px; padding: 1px 8px;
}
.tile-card .badge.ok { background: #2fae4a; }
.tile-card canvas { display: block; width: 64px; height: 64px; margin: 8px auto 0; position: relative; }
.grid.small .tile-card { min-height: 0; align-items: center; padding-bottom: 4px; text-align: center; }
.grid.small .swatch { width: 44px; height: 44px; border-radius: 10px; margin: 10px auto 4px; border: 2px solid rgba(255,255,255,0.6); }
.grid.small .label { background: none; padding: 0 4px 2px; }
.grid.small .label b { font-size: 13px; }

.form { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; text-align: left; width: 100%; }
.form label { font-size: 14px; opacity: 0.9; white-space: nowrap; }
.form .hint { grid-column: 2; margin: -4px 0 2px; font-size: 12px; opacity: 0.75; min-height: 2.6em; }
.seg { display: flex; gap: 6px; }
.seg.wrap { flex-wrap: wrap; }
.seg button {
  flex: 1; padding: 7px 10px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.35); cursor: pointer;
  background: rgba(255,255,255,0.08); color: #fff; font-family: var(--cjk); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.seg button.on { background: var(--gold); color: #10204d; border-color: #fff; }
input[type=range] { width: 100%; accent-color: var(--gold); height: 28px; }
.reward { font-family: var(--latin), var(--cjk); color: var(--gold); font-size: clamp(15px, 3vh, 20px); min-height: 1em; }
.reward .unlock { display: block; color: #8ff6ff; font-size: 0.85em; margin-top: 2px; }

/* ================= 對戰 HUD 補充 ================= */
.top-bar .info { display: flex; align-items: center; gap: 6px; }
.top-bar .t0 { color: #6fbcff; } .top-bar .t1 { color: #ff7a7a; }
.hearts .inf { font-family: var(--latin); font-size: 1.2em; color: #fff; }
#board {
  position: fixed; z-index: 5; pointer-events: none; list-style: none; margin: 0; padding: 4px 8px;
  right: max(10px, env(safe-area-inset-right)); top: 64px;
  background: rgba(0,0,0,0.5); border-radius: 8px; font-size: 12px; min-width: 120px;
}
#board li { display: flex; align-items: center; gap: 6px; line-height: 1.55; }
#board li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
#board li span { flex: 1; }
#board li b { font-family: var(--latin), var(--cjk); color: #ff6f9a; }
#board li.me { color: var(--gold); font-weight: 800; }
#board li.out { opacity: 0.4; text-decoration: line-through; }
body.touch #board { top: 58px; font-size: 10px; min-width: 96px; padding: 2px 6px; }
@media (max-height: 460px) {
  .card { gap: 6px; padding: 10px 16px; }
  #title-cube { display: none; }
  .tile-card { min-height: 70px; }
  .big-btn { padding: 7px 30px; }
}

#hud-top .phase { font-family: var(--latin), var(--cjk); font-weight: 800; -webkit-text-stroke: 0; text-shadow: 0 2px 0 #1b1b1b, 0 0 8px rgba(0,0,0,0.8); font-size: clamp(13px, 2vw, 20px); }

/* ================= 職業相關 ================= */
#stamina.charge #stamina-fill { background: linear-gradient(#fff3a8, #ffb820); }
#stamina.charge.full { box-shadow: 0 0 8px #ffe14a; }
#stamina.charge.full #stamina-fill { background: #fff; }
#stamina.stealth #stamina-fill { background: linear-gradient(#c9b8ff, #7a5ad0); }
.ico-skill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l5 11 12 1-9 8 3 12-11-6-11 6 3-12-9-8 12-1z' fill='%23fff'/%3E%3C/svg%3E"); }
.slot.none { filter: grayscale(1) brightness(0.5); }
#char-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
#char-grid .tile-card { min-height: 150px; }
#char-grid .label small { font-size: 11px; font-weight: 600; opacity: 0.8; }
#char-grid .label .stats { display: block; margin-top: 2px; font-size: 10px; opacity: 0.75; color: var(--gold); }

/* ================= 線上對戰 ================= */
.big-btn.net { background: linear-gradient(#b8ffb0, #2fbf5a); box-shadow: 0 5px 0 #177a36; }
.big-btn.net:active { box-shadow: 0 2px 0 #177a36; }
.screen input[type=text] {
  font: inherit; font-size: 16px; font-weight: 700; color: #fff; padding: 8px 12px; min-width: 0; width: 100%;
  background: rgba(0,0,0,0.35); border: 2px solid rgba(255,255,255,0.35); border-radius: 8px; outline: none;
  user-select: text; -webkit-user-select: text; touch-action: manipulation;
}
.screen input[type=text]:focus { border-color: var(--gold); }
.online-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.online-actions .big-btn { min-width: 0; padding: 9px 26px; }
.join-box { display: flex; gap: 8px; flex: 1; min-width: 220px; }
#online-code { width: 6em; flex: none; text-align: center; letter-spacing: 0.25em; font-family: var(--latin); text-transform: uppercase; }
.status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--gold); }
.sub-head h3 { margin: 0; }
.mini {
  padding: 5px 12px; border-radius: 16px; border: 2px solid rgba(255,255,255,0.5); cursor: pointer;
  background: rgba(255,255,255,0.1); color: #fff; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
}
#room-list { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; }
.room-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 8px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.25); color: #fff; font: inherit;
}
.room-row b { font-family: var(--latin); font-size: 18px; letter-spacing: 0.15em; color: var(--gold); }
.room-row span { flex: 1; font-size: 14px; }
.room-row i { font-style: normal; font-family: var(--latin); opacity: 0.8; }
.code { font-family: var(--latin); letter-spacing: 0.2em; color: var(--gold); }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seat {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 3px solid rgba(255,255,255,0.25); min-height: 76px;
}
.seat canvas { grid-row: 1 / 4; width: 56px; height: 56px; }
.seat b { font-size: 16px; } .seat b small { margin-left: 6px; font-size: 10px; background: var(--gold); color: #10204d; padding: 1px 6px; border-radius: 8px; }
.seat span { font-size: 12px; opacity: 0.85; }
.seat i { font-style: normal; font-size: 12px; font-weight: 800; color: #ffb0b0; }
.seat.ready { border-color: #58d66a; } .seat.ready i { color: #8ff0a0; }
.seat.me { box-shadow: 0 0 0 2px var(--gold) inset; }
.seat.empty { display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0.6; border-style: dashed; }
#room-jobs button { flex: 0 0 auto; padding: 5px 10px; font-size: 13px; }
#room-jobs button:disabled { opacity: 0.45; }
#room-job-desc { margin: 6px 0 0; font-size: 12px; opacity: 0.8; min-height: 2.4em; text-align: left; }
.row-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.row-btns .big-btn { min-width: 0; padding: 9px 26px; }
#net-info {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); top: 96px; pointer-events: none;
  font-size: 10px; color: rgba(255,255,255,0.75); background: rgba(0,0,0,0.4); padding: 1px 8px; border-radius: 8px; white-space: nowrap;
}
body.touch #net-info { top: 46px; }

/* ================= 打擊感：位置跳字、畫面閃光、數字彈跳 ================= */
#pops { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.popup {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity;
  font-family: var(--latin), var(--cjk); font-weight: 900; font-size: clamp(14px, 2.6vh, 22px);
  color: #fff; -webkit-text-stroke: 1px #0b1030; text-shadow: 0 2px 0 #0b1030;
}
.popup.guard { color: #8fd8ff; }
.popup.heavy { color: #ffb347; font-size: clamp(17px, 3.2vh, 28px); }
.popup.good { color: var(--gold); font-size: clamp(17px, 3.2vh, 28px); }
.popup.bad { color: #ff7a8a; }
.popup.out { color: #ffffff; }
.popup.curse { color: #c9a0ff; }
.popup.slow { color: #8fe0ff; }
#flash { position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0; }
@keyframes flash-out { from { opacity: 0.38; } to { opacity: 0; } }
.bump { display: inline-block; animation: bump 0.3s ease-out; }
@keyframes bump { 0% { transform: scale(1.7); color: #fff; } 100% { transform: scale(1); } }