/* 8-bit 平台遊戲風格：天空、磚塊、問號方塊、地面 */
@font-face { font-family: "Pixel"; src: url(fonts/PressStart2P.woff2) format("woff2"); font-display: swap; }
:root {
  --sky: #6b8cff; --card: #fff8e1; --text: #1a1a1a; --muted: #6b4f2a; --ink: #000;
  --accent: #d82800; --coin: #fcbc3c; --coin-hi: #fce0a8; --coin-lo: #c84c0c;
  --pipe: #00a800; --pipe-hi: #80d010; --line: #000; --warn-bg: #fff; --warn: #d82800; --cap: #d82800;
  --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23c84c0c'/%3E%3Cpath d='M0 15h32M0 31h32M15 0v15M31 16v16' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M1 1h13M17 17h13M0 17h14' stroke='%23fcbcb0' stroke-width='2'/%3E%3C/svg%3E");
  --ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23c84c0c'/%3E%3Crect width='32' height='32' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M2 2h28M2 2v28' stroke='%23fcbcb0' stroke-width='2'/%3E%3Cpath d='M16 4v12h12' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='260' shape-rendering='crispEdges'%3E%3Cg fill='%23fff'%3E%3Crect x='40' y='60' width='96' height='16'/%3E%3Crect x='56' y='44' width='64' height='16'/%3E%3Crect x='72' y='28' width='32' height='16'/%3E%3Crect x='220' y='180' width='112' height='16'/%3E%3Crect x='236' y='164' width='80' height='16'/%3E%3Crect x='252' y='148' width='48' height='16'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  /* 夜晚／地下關卡 */
  :root { --sky: #0c0c24; --card: #1c1c3c; --text: #f8f8f8; --muted: #a8b8f8; --line: #000;
    --warn-bg: #1c1c3c; --warn: #ff8070; --cap: #ff8070; --accent: #ff6040;
    --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%230058a8'/%3E%3Cpath d='M0 15h32M0 31h32M15 0v15M31 16v16' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M1 1h13M17 17h13M0 17h14' stroke='%2378b8f8' stroke-width='2'/%3E%3C/svg%3E");
    --cloud: none; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { background: var(--sky); }
body { margin: 0; color: var(--text); background: var(--sky) var(--cloud) repeat fixed;
  font: 16px/1.55 system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
button, input { font-family: inherit; }
.pixel { font-family: "Pixel", system-ui, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }

/* 頂部：磚塊 */
.top { position: sticky; top: 0; z-index: 1; background: var(--brick); background-size: 32px 32px;
  padding: 12px 16px 10px; border-bottom: 4px solid var(--ink); display: grid; gap: 8px; image-rendering: pixelated; }
.weight { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; color: #fff;
  text-shadow: 2px 2px 0 #000; }
.weight::before { content: "?"; font-family: "Pixel", monospace; font-size: 18px; color: #fff; text-shadow: 2px 2px 0 var(--coin-lo);
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: var(--coin);
  border: 3px solid var(--ink); box-shadow: inset -3px -3px 0 var(--coin-lo), inset 3px 3px 0 var(--coin-hi); }
.weight input { flex: 1; min-width: 0; font-size: 24px; padding: 8px 10px; border: 3px solid var(--ink);
  border-radius: 0; background: #fff; color: #000; box-shadow: inset 3px 3px 0 #ccc; }
.weight input:focus { outline: 3px solid var(--coin); outline-offset: 0; }
#q { font-size: 16px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 0; background: #fff; color: #000; }

/* 按鈕：問號方塊 */
.chips { display: flex; gap: 6px; }
.chips button { border: 3px solid var(--ink); border-radius: 0; background: var(--coin); color: #000;
  padding: 6px 10px; font-size: 11px; line-height: 1.4; cursor: pointer;
  box-shadow: inset -3px -3px 0 var(--coin-lo), inset 3px 3px 0 var(--coin-hi); }
.chips button.on { background: var(--accent); color: #fff; box-shadow: inset -3px -3px 0 #881400, inset 3px 3px 0 #ff9070; }
.chips button:active { transform: translateY(2px); }
.chips.scroll { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
.chips.scroll button { flex: none; white-space: nowrap; }
.chips.sub button { font-size: 10px; padding: 4px 8px; }

.warn { margin: 12px 16px; padding: 8px 12px; background: var(--warn-bg); color: var(--warn);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-size: 13px; font-weight: 600; }
main { padding: 0 16px 16px; display: grid; gap: 14px; }

/* 藥卡：對話框 */
.card { background: var(--card); border: 3px solid var(--ink); border-radius: 0; padding: 12px 14px;
  box-shadow: 5px 5px 0 var(--ink); }
.card h2 { margin: 0; font-size: 17px; }
.card h2 small { color: var(--muted); font-weight: 400; font-size: 13px; }
.prod, .note, .src { margin: 4px 0; font-size: 13px; color: var(--muted); }
.dose { margin: 8px 0; }
.dose .big { font-size: 15px; line-height: 1.9; }
.dose .big .ml { color: #fff; background: var(--pipe); padding: 2px 6px; border: 2px solid var(--ink);
  box-shadow: inset -2px -2px 0 #005800, inset 2px 2px 0 var(--pipe-hi); white-space: nowrap; }
.dose .big::before { content: ""; display: inline-block; width: 10px; height: 14px; margin-right: 8px; vertical-align: -1px;
  background: var(--coin); border: 2px solid var(--ink); box-shadow: inset -2px 0 0 var(--coin-lo); }
.dose .sub { font-size: 14px; color: var(--muted); }
.ml + small { font-family: system-ui, sans-serif; font-size: 13px; color: var(--muted); }
.cap { color: var(--cap); font-size: 13px; font-weight: 700; }
.age { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.empty { color: #fff; text-shadow: 2px 2px 0 #000; text-align: center; padding: 24px 0; font-weight: 700; }
a { color: var(--accent); }
.src .cat { margin-right: 6px; }

/* 套餐列 */
.bundlebar { margin: 0 16px 12px; display: grid; gap: 8px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row button, .filebtn { border: 3px solid var(--ink); border-radius: 0; background: #fff; color: #000;
  padding: 6px 12px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.row button:active, .filebtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.row.small button, .row.small .filebtn { font-size: 12px; padding: 4px 10px; }
.primary { background: var(--pipe) !important; color: #fff !important; }
.hint { color: #fff; text-shadow: 1px 1px 0 #000; font-size: 13px; }
.pick .hint { color: var(--muted); text-shadow: none; }

dialog { border: 4px solid var(--ink); border-radius: 0; background: var(--card); color: var(--text);
  width: min(480px, calc(100vw - 32px)); padding: 0; box-shadow: 6px 6px 0 var(--ink); }
dialog::backdrop { background: rgb(0 0 0 / .55); }
.dlg { display: grid; gap: 10px; padding: 16px; }
.dlg h3 { margin: 0; }
.dlg input[type=search], #bundleName { font-size: 16px; padding: 8px 10px; border: 3px solid var(--ink);
  border-radius: 0; background: #fff; color: #000; }
.pick { max-height: 50vh; overflow-y: auto; display: grid; gap: 2px; }
.pick label { padding: 6px 4px; border-bottom: 2px dashed var(--muted); }
.pick small { color: var(--muted); }

/* 底部：地面 */
footer { margin-top: 16px; padding: 16px 16px 40px; font-size: 12px; color: #fff; text-shadow: 1px 1px 0 #000;
  background: var(--ground); background-size: 32px 32px; border-top: 4px solid var(--ink); }
footer p { margin: 0 0 6px; }
[hidden] { display: none !important; }

/* ===== 風格提案（頁尾可切換）===== */
.skins { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.skins button { font: 12px/1.2 system-ui, sans-serif; padding: 4px 10px; border: 2px solid #000; background: #fff; color: #000; cursor: pointer; }
.skins button.on { background: var(--coin); font-weight: 700; }

/* A 柔和：保留磚塊與問號方塊，但降飽和、細邊框、小陰影 */
:root[data-skin="soft"] { --sky: #b9cdf6; --card: #fffdf7; --muted: #6d6458; --coin: #f6d98a; --coin-hi: #fbecc4; --coin-lo: #d9a65a;
  --accent: #d4664f; --pipe: #5fae6a; --pipe-hi: #9bd3a0; --cap: #c0442c; --warn: #b2452f; --cloud: none;
  --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23d98b63'/%3E%3Cpath d='M0 15h32M0 31h32M15 0v15M31 16v16' stroke='%23b86b45' stroke-width='2'/%3E%3C/svg%3E");
  --ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='32' height='32' fill='%23b88a64'/%3E%3Crect width='32' height='32' fill='none' stroke='%239c7350' stroke-width='2'/%3E%3C/svg%3E"); }
:root[data-skin="soft"] .top { border-bottom-width: 2px; }
:root[data-skin="soft"] .card, :root[data-skin="soft"] .warn { border-width: 2px; box-shadow: 3px 3px 0 rgb(0 0 0 / .25); }
:root[data-skin="soft"] .chips button { border-width: 2px; box-shadow: inset -2px -2px 0 var(--coin-lo); }
:root[data-skin="soft"] .chips button.on { box-shadow: inset -2px -2px 0 #a8442f; }
:root[data-skin="soft"] .weight::before { border-width: 2px; box-shadow: inset -2px -2px 0 var(--coin-lo); }
:root[data-skin="soft"] .row button, :root[data-skin="soft"] .filebtn { border-width: 2px; box-shadow: 2px 2px 0 rgb(0 0 0 / .25); }
:root[data-skin="soft"] .dose .big .ml { border-width: 0; box-shadow: none; }

/* B 極簡：白底卡片為主，只留一條磚塊、問號圖示與像素數字當點綴 */
:root[data-skin="minimal"] { --sky: #f4f1ea; --card: #fff; --text: #222; --muted: #6b6b6b; --accent: #c8452e; --pipe: #3f9b4f;
  --cap: #c8452e; --warn: #9a4a1c; --warn-bg: #fff6e6; --cloud: none; --ink: #2a2a2a; }
:root[data-skin="minimal"] .top { background: var(--sky); border-bottom: 0; box-shadow: inset 0 -6px 0 #c84c0c, 0 2px 0 #2a2a2a; padding-bottom: 14px; }
:root[data-skin="minimal"] .weight { color: var(--text); text-shadow: none; }
:root[data-skin="minimal"] .weight::before { border-width: 2px; }
:root[data-skin="minimal"] .chips button { background: #fff; border-width: 2px; box-shadow: none; font-family: system-ui, "PingFang TC", "Noto Sans TC", sans-serif; font-size: 13px; }
:root[data-skin="minimal"] .chips button.on { background: var(--coin); color: #000; box-shadow: inset -2px -2px 0 var(--coin-lo); }
:root[data-skin="minimal"] .card, :root[data-skin="minimal"] .warn { border-width: 2px; box-shadow: none; }
:root[data-skin="minimal"] .warn { border-color: #e7b97f; }
:root[data-skin="minimal"] .row button, :root[data-skin="minimal"] .filebtn { border-width: 2px; box-shadow: none; }
:root[data-skin="minimal"] .dose .big .ml { background: none; color: var(--pipe); border: 0; box-shadow: none; padding: 0; }
:root[data-skin="minimal"] .hint, :root[data-skin="minimal"] .empty { color: var(--muted); text-shadow: none; }
:root[data-skin="minimal"] footer { background: var(--sky); color: var(--muted); text-shadow: none; border-top: 6px solid #c84c0c; }

/* C 夜晚：深藍底、柔和的地下關卡配色，不管手機是否深色模式 */
:root[data-skin="night"] { --sky: #1d2440; --card: #262f52; --text: #eef0f8; --muted: #aab3d6; --ink: #0d1020;
  --accent: #e0775f; --coin: #e9c46a; --coin-hi: #f3dca0; --coin-lo: #b8913c; --pipe: #4f9a64; --pipe-hi: #7cc08e;
  --cap: #ff9a85; --warn: #ffb4a3; --warn-bg: #262f52; --cloud: none; color-scheme: dark;
  --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%232f3b6b'/%3E%3Cpath d='M0 15h32M0 31h32M15 0v15M31 16v16' stroke='%23222b50' stroke-width='2'/%3E%3C/svg%3E");
  --ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='32' height='32' fill='%232f3b6b'/%3E%3Crect width='32' height='32' fill='none' stroke='%23222b50' stroke-width='2'/%3E%3C/svg%3E"); }
:root[data-skin="night"] .card, :root[data-skin="night"] .warn { border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
:root[data-skin="night"] .chips button { border-width: 2px; box-shadow: inset -2px -2px 0 var(--coin-lo); }
:root[data-skin="night"] .chips button.on { box-shadow: inset -2px -2px 0 #9c4a37; }
:root[data-skin="night"] .row button, :root[data-skin="night"] .filebtn { border-width: 2px; background: var(--card); color: var(--text); box-shadow: 2px 2px 0 var(--ink); }
:root[data-skin="night"] .weight input, :root[data-skin="night"] #q { box-shadow: none; }

/* 數字用一般粗體，好讀；像素字只留在問號圖示 */
.dose .big, .weight input { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.dose .big { font-size: 20px; line-height: 1.7; }
.weight input { font-size: 28px; }
.chips button { font-size: 13px; font-weight: 600; }
.chips.sub button { font-size: 12px; }