/* ── 陶艺工作室：手机优先 ─────────────────────────────── */
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body.studiopage {
  font-family: var(--font-ui);
  color: var(--ink-0);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  background: #efe2cc;
}
/* 场景背景：工作室（暖白墙 + 窗光）、窑里、家里 */
body.studiopage::before {
  content: ''; position: fixed; inset: 0; z-index: -1; transition: opacity 1s;
  background:
    radial-gradient(70% 45% at 22% 12%, rgba(255,252,240,.95), transparent 70%),
    linear-gradient(180deg, #f4ead8 0%, #eadbc2 52%, #cdb08a 100%);
}
body.studiopage[data-scene="kiln"]::before {
  background: radial-gradient(80% 60% at 50% 58%, #5c2a16 0%, #2a120a 55%, #120705 100%);
}
body.studiopage[data-scene="kiln"]::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 70px);
  opacity: .5;
}
body.studiopage[data-scene="home"]::before {
  background:
    radial-gradient(60% 40% at 70% 15%, rgba(255,250,235,.95), transparent 70%),
    linear-gradient(180deg, #f6efe3 0%, #e9dcc6 60%, #d7c0a0 100%);
}

.studio { position: fixed; inset: 0; }
.studio__gl { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; opacity: 0; transition: opacity .6s; }
.studio__gl.is-on { opacity: 1; }
.studio__ui { position: absolute; inset: 0; pointer-events: none; }
.studio__ui > * { pointer-events: auto; }

.ico { display: inline-flex; width: 24px; height: 24px; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button { font-family: inherit; cursor: pointer; }

/* ── 前台 ── */
.desk {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); text-align: center; gap: 10px;
}
.desk__brand { font-size: 12px; letter-spacing: .5em; color: #8a6c4e; }
.desk h1 { margin: 0; font-family: var(--font-hand); font-size: clamp(40px, 12vw, 64px); letter-spacing: .08em; color: #3b2516; }
.desk__lead { max-width: 380px; margin: 2px 0 4px; font-size: 15px; line-height: 1.75; color: #5a4632; }
.desk__steps { display: flex; gap: 8px; margin-bottom: 10px; }
.desk__steps span { padding: 5px 12px; border-radius: 999px; background: rgba(255,250,240,.7); font-size: 13px; font-weight: 700; color: #6b4a2c; }
.desk__label { font-size: 12px; letter-spacing: .3em; color: #8a6c4e; }
.clays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(460px, 100%); }
.clay {
  border: 2px solid transparent; border-radius: 20px; padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(255,250,240,.75); color: #3b2516; box-shadow: 0 6px 16px rgba(90,58,30,.12);
}
.clay i { width: 54px; height: 46px; border-radius: 48% 52% 44% 46% / 58% 56% 42% 44%; box-shadow: inset -4px -6px 10px rgba(0,0,0,.25), 0 4px 8px rgba(60,35,15,.2); }
.clay b { font-size: 16px; }
.clay span { font-size: 11.5px; line-height: 1.5; color: #6b5440; }
.clay.is-on { border-color: #a8703a; background: #fff8ea; }
.go {
  margin-top: 14px; border: 0; border-radius: 20px; padding: 16px 34px; font-size: 18px; font-weight: 800; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #7f9b64, #5f7b47); box-shadow: 0 8px 20px rgba(60,80,40,.35);
}
.go:disabled { opacity: .7; }
.go:active { transform: scale(.97); }
.desk__back { margin-top: 10px; font-size: 13px; color: #8a6c4e; }

/* ── 顶栏：一条细的 ── */
.top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 4px; pointer-events: none; }
.top > * { pointer-events: auto; }
.top__btn {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 0;
  background: rgba(255,250,240,.78); color: #5a4026; font-size: 26px; line-height: 1; text-decoration: none; backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(60,35,15,.12);
}
.top__btn .ico { width: 20px; height: 20px; }
.top__btn.is-on { background: #6b4226; color: #fff4e4; }
.top__btn.is-off { opacity: .45; }
.top__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none !important; }
.dots { display: flex; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(120,85,50,.25); }
.dots i.is-done { background: #7f9b64; }
.dots i.is-on { width: 20px; border-radius: 6px; background: #6b4226; }
.top__info { max-width: 100%; font-size: 12px; font-weight: 700; color: #6b5440; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255,250,240,.8); }
body[data-scene="kiln"] .top__info { color: #f0d2b0; text-shadow: none; }

/* 「…」菜单 */
.menu {
  position: absolute; right: 10px; top: calc(52px + env(safe-area-inset-top)); z-index: 5;
  display: flex; flex-direction: column; padding: 6px; border-radius: 18px; min-width: 170px;
  background: rgba(255,250,240,.96); box-shadow: 0 12px 30px rgba(40,22,10,.25); backdrop-filter: blur(10px);
}
.menu__it { border: 0; background: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 700; color: #4a3826; text-align: left; }
.menu__it .ico { width: 20px; height: 20px; }
.menu__it:active, .menu__it.is-on { background: rgba(120,85,50,.1); }

/* ── 剖面小图（菜单里打开）── */
.section {
  position: absolute; left: 10px; top: calc(56px + env(safe-area-inset-top)); width: 108px; height: 128px;
  border-radius: 14px; background: rgba(255,250,240,.6); backdrop-filter: blur(6px); pointer-events: none !important;
}

/* ── 提示：一条，自己会淡掉 ── */
.hint {
  position: absolute; left: 50%; top: calc(56px + env(safe-area-inset-top)); transform: translate(-50%, -6px);
  width: max-content; max-width: min(84vw, 480px); box-sizing: border-box; padding: 8px 14px; border-radius: 14px; text-align: center;
  background: rgba(58,38,22,.82); color: #fff3df; font-size: 13.5px; line-height: 1.55;
  opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none !important;
}
.hint.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── 右边一根竖条：转盘、水、撤回、放大缩小 ── */
.rail {
  position: absolute; right: calc(8px + env(safe-area-inset-right)); top: 50%; transform: translateY(-58%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 5px; border-radius: 24px;
  background: rgba(255,250,240,.72); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(60,35,15,.14);
}
.rail__b { width: 46px; border: 0; background: none; border-radius: 14px; padding: 5px 0 3px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #5a4026; font-size: 10px; font-weight: 800; }
.rail__b .ico { width: 22px; height: 22px; }
.rail__b.is-on { background: #6b4226; color: #fff4e4; }
.rail__b.is-dim { opacity: .4; }
.speed { writing-mode: vertical-lr; direction: rtl; width: 30px; height: 84px; accent-color: #8a5a32; margin: 0; }
.bowl { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 0; overflow: hidden; background: #e9dccb; color: #2f5d7a; display: grid; place-items: center; }
.bowl .ico { width: 20px; height: 20px; z-index: 1; }
.bowl__fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #9cc9e4, #5d9cc4); transition: height .3s; }
.bowl.is-dry { animation: dry 1s ease-in-out infinite; box-shadow: 0 0 0 3px #c4552c; }
@keyframes dry { 50% { transform: scale(1.08); } }

/* 割口沿：确认 */
.confirm {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 18px; width: max-content; max-width: 94vw; box-sizing: border-box;
  background: rgba(255,250,240,.96); box-shadow: 0 8px 24px rgba(40,22,10,.22); font-size: 13.5px; font-weight: 700; color: #4a3826;
}
.confirm button { border: 0; border-radius: 12px; padding: 9px 14px; font-weight: 800; font-size: 14px; }
.confirm__no { background: rgba(120,85,50,.1); color: #6b4a2c; }
.confirm__yes { background: #c0502a; color: #fff; }

/* 装饰：颜色一条（可左右滑） */
.colors {
  position: absolute; left: 0; right: 0; bottom: calc(80px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; padding: 4px 12px; overflow-x: auto; scrollbar-width: none; justify-content: safe center;
}
.colors::-webkit-scrollbar { display: none; }

/* 粗细：当前工具上再点一下弹出来 */
.sizes { display: flex; gap: 6px; justify-content: center; }

/* 怎么玩 */
.tips { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(40,24,12,.35); z-index: 9; }
.tips__card { width: min(88vw, 360px); padding: 18px 18px 10px; border-radius: 22px; background: rgba(255,250,240,.97); box-shadow: 0 18px 40px rgba(40,20,8,.3); }
.tips__row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.tips__row b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #6b4226; color: #fff4e4; font-size: 13px; }
.tips__row strong { display: block; font-size: 15px; color: #3b2516; }
.tips__row span { font-size: 13px; color: #6b5440; }
.tips__close { text-align: center; font-size: 12px; color: #8a6c4e; margin: 6px 0 0; }

/* ── 下面一排 ── */
.dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.dock > * { pointer-events: auto; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; padding: 2px 4px; align-items: center; }
.chips::-webkit-scrollbar { display: none; }
.chips__k { flex: none; font-size: 12px; font-weight: 800; color: #7a5c3e; margin-right: 2px; }
.chip {
  flex: none; border: 1.5px solid rgba(120,85,50,.25); background: rgba(255,250,240,.9); color: #4a3826;
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
}
.chip i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 -1px 2px rgba(0,0,0,.3), 0 0 0 1.5px #fff; }
.chip.is-on { background: #6b4226; color: #fff4e4; border-color: #6b4226; }
.dot { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,250,240,.95); box-shadow: 0 2px 6px rgba(60,35,15,.25); }
.dot.is-on { transform: scale(1.15); box-shadow: 0 0 0 2.5px #6b4226, 0 2px 6px rgba(60,35,15,.25); }
.dock__row { display: flex; align-items: center; gap: 8px; }
.tools {
  flex: 1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; justify-content: safe center;
  padding: 6px; border-radius: 22px; background: rgba(70,46,28,.85); backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(40,22,10,.3);
}
.tools::-webkit-scrollbar { display: none; }
.tool {
  flex: none; min-width: 56px; border: 0; border-radius: 16px; padding: 7px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; color: #f3e3c8; font-size: 11.5px; font-weight: 700;
}
.tool.is-on { background: linear-gradient(180deg, #f6d995, #e2b45a); color: #3b2a06; }
.next { flex: none; border: 0; height: 56px; padding: 0 16px; border-radius: 18px; font-weight: 800; font-size: 15px; background: linear-gradient(180deg, #7f9b64, #5f7b47); color: #fff; box-shadow: 0 6px 16px rgba(60,80,40,.35); white-space: nowrap; }
.next.is-dim { opacity: .55; }

/* ── 烧 ── */
.firecard, .result {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(92vw, 440px); box-sizing: border-box; padding: 18px 18px 14px; border-radius: 24px; text-align: center;
  background: rgba(255,248,236,.95); backdrop-filter: blur(10px); box-shadow: 0 16px 40px rgba(40,20,8,.3);
}
.firecard { display: none; }
.firecard.is-on { display: block; animation: rise .5s cubic-bezier(.2,.9,.3,1.2); }
.firecard__k { font-family: "Kaiti SC", "STKaiti", serif; font-size: 26px; font-weight: 800; color: #3b2516; }
.firecard p { margin: 6px 0 4px; font-size: 14px; line-height: 1.75; color: #5a4632; }
.firecard .tiny { font-size: 12px; color: #8a6c4e; }
.footbar { height: 10px; border-radius: 10px; background: rgba(120,85,50,.15); overflow: hidden; margin: 10px 4px 0; }
.footbar i { display: block; height: 100%; width: 0; background: #5d9cc4; transition: width .15s; }
.linkbtn { margin-top: 6px; border: 0; background: none; color: #8a5a32; font-weight: 700; font-size: 14px; padding: 8px 10px; text-decoration: none; display: inline-block; }
.temp, .days { position: absolute; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); display: none; font-variant-numeric: tabular-nums; pointer-events: none !important; }
.temp.is-on, .days.is-on { display: block; }
.temp { color: #ffd9a8; text-shadow: 0 0 18px rgba(255,140,50,.8); }
.temp b { font-size: 56px; font-weight: 800; }
.temp span { font-size: 20px; margin-left: 4px; }
.days { color: #6b4a2c; font-size: 18px; font-weight: 700; }
.days b { font-size: 40px; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 30px); } }

/* 快递盒 */
.unbox { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .6s; }
.unbox.is-gone { opacity: 0; pointer-events: none; }
.unbox p { font-size: 15px; font-weight: 700; color: #6b4a2c; }
.box { position: relative; width: 220px; height: 170px; border-radius: 10px; background: linear-gradient(180deg, #d7a86e, #b98549); box-shadow: 0 20px 40px rgba(60,35,15,.3), inset 0 -10px 20px rgba(0,0,0,.12); touch-action: none; }
.box__lid { position: absolute; left: -8px; right: -8px; top: -14px; height: 40px; border-radius: 8px; background: linear-gradient(180deg, #e2b57b, #c79659); box-shadow: 0 4px 8px rgba(0,0,0,.15); transition: transform .6s cubic-bezier(.3,1.4,.5,1); transform-origin: 50% 0; }
.box.is-open .box__lid { transform: translateY(-80px) rotate(-14deg); }
.box__tape { position: absolute; left: -8px; right: -8px; top: 6px; height: 16px; background: rgba(240,220,170,.85); }
.box__tape i { display: block; height: 100%; width: 0; background: #b98549; }
.box__label { position: absolute; left: 24px; bottom: 22px; padding: 8px 12px; background: #fff8ea; border-radius: 4px; font-size: 12px; line-height: 1.6; color: #6b4a2c; text-align: left; transform: rotate(-3deg); }

/* 到家 */
.result { animation: rise .6s cubic-bezier(.2,.9,.3,1.2); }
.result__k { font-size: 12px; letter-spacing: .4em; color: #8a6c4e; }
.result h2 { margin: 2px 0 4px; font-family: "Kaiti SC", "STKaiti", serif; font-size: 28px; }
.result__facts { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: #5a4632; }
.name { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 2px solid rgba(120,85,50,.2); border-radius: 14px; background: #fffdf8; font-size: 16px; -webkit-user-select: text; user-select: text; }
.result .go { width: 100%; margin-top: 10px; }
.result__tip { margin: 6px 2px 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.result__btns { display: flex; gap: 10px; justify-content: center; }

@media (min-width: 900px) {
  .tools { flex: none; }
  .dock__row { justify-content: center; }
}
/* 横屏的手机：见文件末尾「V13.5 横屏」——工具盘竖到左边去 */

/* 选釉 */
.glazes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.glaze { border: 2px solid transparent; border-radius: 14px; padding: 8px 4px; background: rgba(120,85,50,.07); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #4a3826; }
.glaze i { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.15); }
.glaze.is-on { border-color: #a8703a; background: #fff8ea; }
.firecard .go { width: 100%; margin-top: 10px; }
.firecard.is-top { top: calc(64px + env(safe-area-inset-top)); bottom: auto; }
.result { padding: 14px 16px 10px; }
.result h2 { font-size: 24px; }
.result__facts { font-size: 12.5px; margin-bottom: 8px; }
@media (max-width: 420px) {
  .tool { min-width: 50px; padding: 6px 4px; font-size: 11px; }
  .next { padding: 0 12px; font-size: 14px; }
}

/* ══ V13.2：和泥土实验室用同一套样子 ═════════════════════
   颜色、纸纹、细线、木牌按钮都取自 src/styles/tokens.css（泥土实验室的设计令牌）：
   暖纸面、细描边、金色是「选中」、绿色木牌是「往下走」。
   底下的工具不再是一整条深色大横条：只包住那几个按钮，浮在画面上，按钮和底色一样宽。 */
body.studiopage { font-family: var(--font-ui); color: var(--ink-0); background: var(--paper-1); }
body.studiopage::before {
  background:
    var(--tex-paper),
    radial-gradient(70% 45% at 22% 12%, rgba(255,252,240,.95), transparent 70%),
    linear-gradient(180deg, var(--paper-0) 0%, var(--paper-1) 50%, #dcc7a6 100%);
}
body.studiopage[data-scene="home"]::before {
  background: var(--tex-paper), radial-gradient(60% 40% at 70% 15%, rgba(255,250,235,.95), transparent 70%), linear-gradient(180deg, var(--paper-0), var(--paper-2));
}
.desk h1, .firecard__k, .result h2 { font-family: var(--font-hand); color: var(--soil-deep); }
.desk__brand, .desk__label, .result__k { color: var(--ink-2); }
.desk__lead, .clay span, .firecard p, .result__facts { color: var(--ink-1); }
.clay { background: var(--paper-0); border: 1.5px solid var(--hair); box-shadow: var(--sh-2); }
.clay.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-lit), var(--sh-2); background: var(--paper-0); }
.desk__steps span { background: var(--paper-0); border: 1px solid var(--hair); color: var(--ink-1); }

/* 绿色木牌：开始、往下走、送进博物馆（和「这件做好了」一样） */
.go, .next {
  border: 0; color: #fdf8ec; font-weight: 800; text-shadow: 0 1px 0 rgba(0,0,0,.18);
  background:
    repeating-linear-gradient(92deg, rgba(60,90,45,.14) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #8fb072, #6d8d55);
  box-shadow: 0 3px 0 #4c6a3d, 0 5px 12px rgba(40,60,26,.3);
  border-radius: 12px;
}
.go:active, .next:active { transform: translateY(3px); box-shadow: 0 0 0 #4c6a3d, 0 2px 6px rgba(40,60,26,.3); }

/* 顶上：纸做的小圆钮 */
.top__btn { background: rgba(253,248,236,.92); border: 1.5px solid var(--hair); color: var(--ink-1); box-shadow: var(--sh-1); }
.top__btn.is-on { background: var(--soil-dark); border-color: var(--soil-dark); color: var(--paper-0); }
.top__info { color: var(--ink-1); }
.dots i { background: var(--hair); }
.dots i.is-done { background: var(--green); }
.dots i.is-on { background: var(--soil); }
.menu { background: var(--paper-0); border: 1.5px solid var(--hair); box-shadow: var(--sh-3); }
.menu__it { color: var(--ink-0); }

/* 提示：一张便签纸（不是黑条） */
.hint {
  background: var(--tex-paper), rgba(251,243,218,.97); color: var(--ink-0);
  border: 1.5px solid var(--hair); box-shadow: var(--sh-2); font-weight: 600;
}

/* 右边竖条：纸面 + 细线，选中是泥色 */
.rail { background: rgba(253,248,236,.9); border: 1.5px solid var(--hair); box-shadow: var(--sh-2); }
.rail__b { color: var(--ink-1); }
.rail__b.is-on { background: var(--soil-dark); color: var(--paper-0); }
.speed { accent-color: var(--soil); }

/* 底下：只包住按钮的一条，浮在中间 */
.dock { align-items: center; padding-left: 8px; padding-right: 8px; }
.dock__row { justify-content: center; max-width: 100%; }
.tools {
  flex: 0 1 auto; max-width: 100%; gap: 2px; padding: 4px;
  background: rgba(253,248,236,.92); border: 1.5px solid var(--hair); border-radius: 18px;
  box-shadow: var(--sh-2); backdrop-filter: blur(8px);
}
.tool {
  min-width: 52px; padding: 5px 6px 4px; border-radius: 13px; color: var(--ink-1); font-size: 11px;
}
.tool .ico { width: 22px; height: 22px; }
.tool.is-on {
  background: linear-gradient(180deg, var(--gold-lit), var(--gold)); color: #3b2a06;
  box-shadow: 0 0 0 2px #fff3d0, 0 2px 0 var(--gold-deep);
}
.next { height: auto; align-self: stretch; padding: 0 14px; font-size: 14px; }
.next.is-dim { opacity: .5; }
.chip { background: var(--paper-0); border-color: var(--hair); color: var(--ink-1); }
.chip.is-on { background: linear-gradient(180deg, var(--gold-lit), var(--gold)); border-color: var(--gold-deep); color: #3b2a06; }
.sizes .chip { box-shadow: var(--sh-1); }
.dot { border-color: var(--paper-0); box-shadow: 0 0 0 1.5px var(--hair), var(--sh-1); }
.dot.is-on { box-shadow: 0 0 0 2.5px var(--gold), var(--sh-1); }
.colors { bottom: calc(70px + env(safe-area-inset-bottom)); }
.confirm { background: var(--paper-0); border: 1.5px solid var(--hair); color: var(--ink-0); bottom: calc(76px + env(safe-area-inset-bottom)); }
.confirm__yes { background: linear-gradient(180deg, #e07a44, #c4552c); box-shadow: 0 3px 0 #8c3418; }
.firecard, .result { background: var(--tex-paper), rgba(253,248,236,.97); border: 1.5px solid var(--hair); box-shadow: var(--sh-3); }
.tips__card { background: var(--paper-0); border: 1.5px solid var(--hair); }
.tips__row b { background: var(--soil); }
.glaze.is-on { border-color: var(--gold); }
.linkbtn { color: var(--soil); }

/* 纹样（装饰里的「花样」） */
.pats { position: absolute; left: 0; right: 0; bottom: calc(70px + env(safe-area-inset-bottom)); display: flex; gap: 6px; padding: 4px 12px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; align-items: center; }
.pats::-webkit-scrollbar { display: none; }
.pats__k { flex: none; font-size: 11px; font-weight: 800; color: var(--ink-2); letter-spacing: .1em; padding: 0 2px; }
.pat {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 4px 3px; border-radius: 12px;
  border: 1.5px solid var(--hair); background: var(--paper-0); color: var(--ink-1); font-size: 10.5px; font-weight: 700; box-shadow: var(--sh-1);
}
.pat img { width: 56px; height: 22px; display: block; border-radius: 4px; background: #e8d6b8; }
.pat.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-lit); }
.pats + .colors, .colors.is-up { bottom: calc(124px + env(safe-area-inset-bottom)); }
.dot--mix { position: relative; overflow: hidden; display: block; }
.dot--mix input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.dot--mix::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.dot { width: 32px; height: 32px; position: relative; }
/* 色点只有 32px，手指的命中范围往外扩一圈，不动布局 */
.dot::before { content: ''; position: absolute; inset: -6px -3px; }
.seg { flex: none; display: inline-flex; border: 1.5px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--paper-0); margin-right: 4px; }
.seg button { border: 0; background: none; padding: 6px 9px; font-size: 12px; font-weight: 800; color: var(--ink-1); }
.seg button.is-on { background: var(--soil-dark); color: var(--paper-0); }

/* 展签卡 */
.label { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: calc(64px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.label__card { width: min(100%, 420px); box-sizing: border-box; border-radius: 22px; overflow: hidden; background: var(--plaque-paper); border: 1.5px solid var(--hair); box-shadow: var(--sh-3); text-align: center; padding-bottom: 14px; }
.label__pic { background: radial-gradient(ellipse at 50% 30%, var(--wall-1), var(--wall-0) 75%); padding: 14px 0 6px; }
.label__pic img { width: min(300px, 78%); aspect-ratio: 1; display: block; margin: 0 auto; }
.label__k { margin-top: 12px; font-size: 11px; letter-spacing: .35em; color: var(--ink-2); }
.label__card h2 { margin: 4px 0 0; font-family: var(--font-label); font-size: 26px; color: var(--plaque-ink); }
.label__by { font-size: 13px; color: var(--ink-1); margin-top: 2px; }
.label__rows { text-align: left; margin: 10px 18px 0; }
.label__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--hair); font-size: 13.5px; }
.label__row span { color: var(--ink-2); flex: none; }
.label__row b { text-align: right; color: var(--ink-0); }
.label__know { width: min(100%, 420px); box-sizing: border-box; padding: 12px 16px; border-radius: 16px; background: var(--note-paper); border: 1.5px solid var(--hair); box-shadow: var(--sh-1); }
.label__knowk { font-size: 11px; letter-spacing: .25em; color: var(--ink-2); margin-bottom: 4px; }
.label__know b { font-family: var(--font-hand); font-size: 18px; color: var(--soil-deep); }
.label__know p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-1); }
.label__tiny { margin-top: 4px; font-size: 11px; color: var(--ink-2); }
.label__btns { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(100%, 420px); }
.label__btns .go { width: 100%; text-align: center; box-sizing: border-box; margin-top: 4px; padding: 14px; font-size: 16px; }
.label > * { flex: none; }

/* ── V13.4：键盘焦点、指上去的反馈，和主游戏同一套 ── */
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--gold-lit); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.dot:focus-visible { outline-offset: 3px; }
@media (hover: hover) {
  .go:hover, .next:hover { filter: brightness(1.05); }
  .top__btn:hover, .linkbtn:hover { filter: brightness(.97); }
}

/* 手机竖屏：十七个色点一行放不下，以前横着滑、右边一半看不见——
   排成两行，一眼全看到 */
@media (max-width: 560px) {
  .colors { flex-wrap: wrap; justify-content: center; gap: 7px 9px; padding: 4px 18px; overflow: visible; }
  .colors .dot { width: 30px; height: 30px; }
}
/* 花样一排是可以滑的：两头淡出去，告诉人「还有」 */
.pats { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }

/* ══ V13.5 横屏：按屏幕的形状摆按钮 ═══════════════════════
   竖屏：工具在下面一排（拇指够得着），转盘/水/撤回在右边一根竖条。
   横屏的手机（矮）：下面只剩一条缝，以前工具挤成一条、图标和字都被藏掉（.tool span 连图标一起藏了），
   只看到一个金色的小条。现在工具竖到左边一根，和右边那根对称，两只手的拇指各管一边；
   陶器在中间，取景会自己让开两边（app.js insets()）。 */
@media (orientation: landscape) and (max-height: 520px) {
  .dock {
    left: calc(8px + env(safe-area-inset-left)); right: auto; top: calc(52px + env(safe-area-inset-top)); bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 0; justify-content: center; align-items: flex-start;
  }
  .dock__row { flex-direction: column; align-items: stretch; gap: 6px; max-height: 100%; }
  .tools { flex-direction: column; flex: 0 1 auto; overflow-x: hidden; overflow-y: auto; justify-content: flex-start; min-height: 0; }
  .tool { min-width: 0; width: 54px; padding: 4px 2px 3px; font-size: 10.5px; }
  .tool .ico { width: 20px; height: 20px; }
  .next { height: 42px; padding: 0 6px; font-size: 12.5px; align-self: stretch; }
  .sizes { flex-direction: row; justify-content: flex-start; }
  .rail { top: calc(50% + 20px); transform: translateY(-50%); gap: 3px; padding: 6px 4px; }
  .rail__b { padding: 3px 0 2px; }
  .speed { height: 64px; }
  .colors, .pats { left: calc(84px + env(safe-area-inset-left)); right: calc(72px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); }
  .pats + .colors, .colors.is-up { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .confirm { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .section { left: calc(78px + env(safe-area-inset-left)); }   /* 左边是工具那一列，剖面图挪到它右边 */
  /* 到家、烧窑的卡片放到右半边，左边留给陶器 */
  .result, .firecard {
    left: auto; right: calc(12px + env(safe-area-inset-right)); transform: none;
    width: min(48vw, 420px); top: calc(54px + env(safe-area-inset-top)); bottom: calc(10px + env(safe-area-inset-bottom));
    overflow-y: auto; display: flex; flex-direction: column; justify-content: center;
  }
  .firecard { display: none; bottom: auto; max-height: calc(100% - 64px - env(safe-area-inset-top)); }
  .firecard.is-on { display: flex; animation: none; }
  .result { animation: none; }
  .result > *, .firecard > * { flex: none; }
  .hint { max-width: min(46vw, 420px); }
  /* 卡片在右边时，提示挪到左边陶器上方，不压住卡片的标题 */
  .studio__ui:has(.result) .hint, .studio__ui:has(.firecard.is-on) .hint { left: 27%; max-width: 44vw; }
}