/* アズソート — 小さく、静かに、洗練。紙色＋インク＋AZURE系アクセント1色。 */
:root {
  --paper: #f7f5f0;
  --card: #fffdf9;
  --ink: #23211d;
  --sub: #8a857b;
  --line: #e5e0d5;
  --accent: #2f6fb2;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  background: var(--paper); color: var(--ink); line-height: 1.75; font-size: 15px;
}
.wrap { max-width: 480px; margin: 0 auto; padding: 20px 18px 28px; min-height: 100svh; display: flex; flex-direction: column; }
.screen { display: none; }
.screen.active { display: block; animation: fadein .45s cubic-bezier(.22,.8,.3,1); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen.active { animation: none; } .tube { transition: none; } }

.brand { font-size: 11px; letter-spacing: .32em; color: var(--sub); text-align: center; margin-top: 26px; }
.game-title { font-size: 30px; font-weight: 700; text-align: center; letter-spacing: .06em; }
.tagline { text-align: center; color: #55524b; margin-top: 12px; font-size: 14px; }
.note { font-size: 12px; color: var(--sub); text-align: center; min-height: 1em; margin-top: 14px; }
.fineprint { text-align: center; color: var(--sub); font-size: 12px; margin-top: 16px; }
.howto-link { text-align: center; margin-top: 26px; font-size: 13px; }
.howto-link a, .foot a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }

/* タイトル画：小さな試験管3本 */
.title-art { display: flex; justify-content: center; gap: 14px; padding: 30px 0 6px; }
.mini-tube {
  width: 30px; height: 96px; border: 2px solid #b9b2a4; border-top: none;
  border-radius: 0 0 15px 15px; display: flex; flex-direction: column-reverse;
  padding: 3px; gap: 2px; background: rgba(255,255,255,.5);
}
.mini-tube i { display: block; height: 20px; border-radius: 3px; }

/* レベル選択 */
.level-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.level-btn {
  appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; text-align: left; padding: 12px 14px; border-radius: var(--radius); cursor: pointer;
  transition: transform .2s cubic-bezier(.22,.8,.3,1), border-color .2s;
}
.level-btn:active { transform: scale(.97); }
.level-btn:disabled { opacity: .42; cursor: default; }
.level-no { display: block; font-weight: 700; font-size: 15px; }
.level-meta { display: block; font-size: 11.5px; color: var(--sub); margin-top: 2px; }

.btn {
  appearance: none; border: 1px solid var(--ink); background: var(--card); color: var(--ink);
  font: inherit; font-size: 15px; padding: 11px 26px; border-radius: 999px; cursor: pointer;
  transition: transform .25s cubic-bezier(.22,.8,.3,1), background .25s;
}
.btn.primary { background: var(--ink); color: #fff; }
.btn.small { font-size: 13.5px; padding: 9px 18px; border-color: var(--line); }
.btn.small.ghost { border-color: transparent; color: var(--sub); }
.btn:active { transform: scale(.97); }

/* プレイ画面 */
.play-head { display: flex; gap: 14px; align-items: baseline; margin-top: 6px; font-size: 12.5px; color: #55524b; }
#play-level { font-size: 16px; font-weight: 700; color: var(--ink); }
#moves { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--ink); }

.board {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 12px;
  margin-top: 28px; padding: 6px 2px 2px;
}
.tube {
  appearance: none; background: none; border: none; cursor: pointer; padding: 10px 2px 0;
  transition: transform .25s cubic-bezier(.22,.8,.3,1);
  -webkit-tap-highlight-color: transparent;
}
.tube.selected { transform: translateY(-12px); }
.tube-inner {
  width: 44px; height: 156px; border: 2.5px solid #a49c8b; border-top: none;
  border-radius: 0 0 22px 22px; display: flex; flex-direction: column-reverse;
  padding: 4px; gap: 2px; background: rgba(255,255,255,.55); overflow: hidden;
}
.tube.selected .tube-inner { border-color: var(--accent); }
.tube.done .tube-inner { border-color: var(--accent); }
.seg { display: block; height: 32px; border-radius: 4px; flex: none; }
.seg.empty { background: transparent; }

.stuck-note {
  margin-top: 18px; text-align: center; font-size: 13px; color: #55524b;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
}
.play-actions { display: flex; gap: 9px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* クリア */
.clear-panel {
  margin-top: 24px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 16px; text-align: center;
  animation: fadein .45s cubic-bezier(.22,.8,.3,1);
}
.clear-title { font-size: 20px; letter-spacing: .08em; }
.clear-stats { color: #55524b; font-size: 14px; margin-top: 6px; }
.clear-actions { display: flex; flex-direction: column; gap: 9px; align-items: center; margin-top: 16px; }

.foot {
  margin-top: auto; padding-top: 28px; display: flex; gap: 16px; align-items: baseline;
  font-size: 11.5px; color: var(--sub);
}
.foot span { margin-right: auto; }

/* ガイド/規約 共通 */
.guide h1, .terms h1 { font-size: 22px; margin-top: 18px; line-height: 1.5; }
.guide h2, .terms h2 { font-size: 16px; margin: 26px 0 8px; }
.guide p, .guide li, .terms p, .terms li { font-size: 14px; color: #3c392f; }
.guide ul, .guide ol, .terms ol { padding-left: 1.4em; margin-top: 6px; }
.guide .back { display: inline-block; margin-top: 30px; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.terms .small { font-size: 12px; color: var(--sub); margin-top: 30px; }
.terms .cta { display: block; text-align: center; margin-top: 22px; color: var(--accent); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 11px; background: var(--card); }

/* === Webアプリ化 (2026-10-28): ゲーム本編ページ専用 (body.app スコープ)。guide/terms は対象外 === */
html:has(body.app){overscroll-behavior:none}
body.app{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body.app .wrap{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* === 品質改修 (2026-10-28): ガラス感・液体・手応え・感情 === */
/* 紙の質感：ごく薄いドット */
body{background-image:radial-gradient(rgba(35,33,29,.05) 1px,transparent 1.4px);background-size:22px 22px}
/* 台：盤面下に柔らかい影だまり */
.board{background:radial-gradient(ellipse 90% 60% at 50% 100%,rgba(122,102,70,.16),transparent 70%);border-radius:18px;padding-bottom:12px}

/* 音トグル */
.sound-toggle{appearance:none;background:var(--card);border:1px solid var(--line);color:#55524b;font:inherit;font-size:11.5px;line-height:1;padding:6px 11px;border-radius:999px;cursor:pointer;transition:transform .2s cubic-bezier(.22,.8,.3,1),color .2s}
.sound-toggle:active{transform:scale(.95)}
.sound-toggle.off{color:var(--sub);opacity:.65}
.play-head .sound-toggle{margin-left:2px}
.howto-link .sound-toggle{font-size:12px}

/* 試験管：ガラスの口（リム）＋厚み＋反射 */
.tube{position:relative;transition:transform .32s cubic-bezier(.22,.9,.28,1)}
.tube::before{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);width:49px;height:13px;border:2.5px solid #a49c8b;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.22));z-index:3;pointer-events:none;transition:border-color .25s}
.tube.selected::before{border-color:var(--accent)}
.tube.done::before{border-color:var(--accent)}
.tube-inner{
  position:relative;
  background:linear-gradient(105deg,rgba(255,255,255,.78),rgba(255,255,255,.30) 42%,rgba(210,220,228,.38) 78%,rgba(255,255,255,.55));
  box-shadow:inset 0 -14px 18px -12px rgba(70,60,40,.35),inset 3px 0 6px -3px rgba(255,255,255,.9),0 12px 14px -10px rgba(60,50,30,.45);
}
.tube-inner::before{content:"";position:absolute;top:8px;bottom:16px;left:5px;width:6px;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.12));z-index:2;pointer-events:none}
.tube.selected .tube-inner{box-shadow:inset 0 -14px 18px -12px rgba(70,60,40,.35),inset 3px 0 6px -3px rgba(255,255,255,.9),0 18px 20px -10px rgba(47,111,178,.45)}
/* 色水：上面の艶・沈み込みの陰影で透明感と層を出す */
.seg{position:relative;box-shadow:inset 0 5px 5px rgba(255,255,255,.40),inset 0 -7px 9px rgba(0,0,0,.20),inset 3px 0 5px rgba(255,255,255,.14);border-radius:5px}
.seg::after{content:"";position:absolute;left:4px;right:4px;top:2px;height:5px;border-radius:50%;background:rgba(255,255,255,.34);pointer-events:none}
.seg.empty{box-shadow:none}
.seg.empty::after{display:none}
.mini-tube{background:linear-gradient(105deg,rgba(255,255,255,.75),rgba(255,255,255,.28));box-shadow:inset 3px 0 5px -3px rgba(255,255,255,.9),0 8px 10px -8px rgba(60,50,30,.4)}
.mini-tube i{box-shadow:inset 0 4px 4px rgba(255,255,255,.38),inset 0 -5px 6px rgba(0,0,0,.18)}

/* 注ぎ演出（複製管＋水流） */
.pour-fx{position:fixed;z-index:80;pointer-events:none;padding:10px 2px 0;transition:transform .52s cubic-bezier(.30,.72,.28,1),opacity .22s ease;transform-origin:50% 88%;will-change:transform}
.pour-fx .tube-inner{width:44px;height:156px;border:2.5px solid #a49c8b;border-top:none;border-radius:0 0 22px 22px;display:flex;flex-direction:column-reverse;padding:4px;gap:2px}
.pour-stream{position:fixed;z-index:79;width:5px;height:0;border-radius:3px;pointer-events:none;opacity:0;transition:height .26s ease .20s,opacity .18s ease .16s}
.pour-stream.on{height:34px;opacity:.85}
.pour-stream.off{opacity:0;transition:opacity .18s ease}
.seg.fx-grow{animation:segGrow .5s cubic-bezier(.22,.8,.3,1);transform-origin:50% 100%}
@keyframes segGrow{0%{transform:scaleY(.25);opacity:.4}60%{transform:scaleY(1.06);opacity:1}100%{transform:scaleY(1)}}

/* 完成の小さな祝福 */
.tube.celebrate .tube-inner{animation:donePop .6s cubic-bezier(.22,.8,.3,1)}
@keyframes donePop{0%{transform:scale(1)}35%{transform:scale(1.07) translateY(-3px)}100%{transform:scale(1)}}
.spark{position:absolute;top:6px;width:6px;height:6px;border-radius:50%;background:#e0a81c;opacity:0;pointer-events:none;z-index:4;animation:sparkFloat 1s cubic-bezier(.22,.8,.3,1) forwards}
.spark.big{width:7px;height:7px;top:auto;bottom:12px}
.clear-panel{position:relative;overflow:hidden}
.clear-panel .spark{animation-duration:1.4s}
@keyframes sparkFloat{0%{opacity:0;transform:translateY(6px) scale(.6)}25%{opacity:.95}100%{opacity:0;transform:translateY(-32px) scale(1.05)}}

/* 注げない時：小さく首を振る */
.tube.shake{animation:shakeX .32s cubic-bezier(.36,.07,.19,.97)}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}55%{transform:translateX(3.5px)}80%{transform:translateX(-2px)}}

/* 応援トースト */
.cheer-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(8px);background:var(--ink);color:#fff;font-size:13px;letter-spacing:.04em;padding:9px 18px;border-radius:999px;opacity:0;transition:opacity .35s ease,transform .35s cubic-bezier(.22,.8,.3,1);z-index:90;pointer-events:none;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(35,33,29,.55)}
.cheer-toast.on{opacity:.94;transform:translateX(-50%) translateY(0)}

/* クリアの称号と一言 */
.clear-rank{font-weight:700;letter-spacing:.1em;color:var(--accent);font-size:14px;margin-top:8px}
.clear-line{color:#55524b;font-size:13.5px;margin-top:5px}

@media (prefers-reduced-motion: reduce){
  .pour-fx,.pour-stream{display:none}
  .tube.celebrate .tube-inner,.tube.shake,.seg.fx-grow,.spark{animation:none}
  .cheer-toast{transition:none}
}

/* === リアル化改修 (2026-10-29): 連続した液体・厚いガラス・実験台・注ぎの手応え ===
   描画のみ。寸法（管44×148・段34px）は演出計算と一致させてある。 */
/* 実験台：光の落ちるトレイ＋奥の影だまり */
.board{
  background:
    radial-gradient(ellipse 88% 55% at 50% 110%, rgba(110,92,60,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #fcfaf5, #f0e9d8);
  border: 1px solid rgba(214,207,190,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -20px 26px -20px rgba(96,78,44,.4), 0 16px 22px -20px rgba(80,66,38,.5);
  padding: 14px 8px 16px;
}
/* 管の接地影：台に落ちる楕円の影。選んで持ち上げると影は小さく薄くなる */
.tube::after{
  content:""; position:absolute; left:50%; bottom:-2px; width:54px; height:12px;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(62,52,32,.30), rgba(62,52,32,0) 68%);
  z-index:0; pointer-events:none;
  transition:opacity .32s ease, transform .32s cubic-bezier(.22,.9,.28,1);
}
.tube.selected::after{ opacity:.5; transform:translateX(-50%) scale(.86,.8); }
.tube-inner{ z-index:1; }
/* ガラスの厚み：厚い管底＋右壁の影＋口の内側の影 */
.tube-inner{
  padding:5px 4px 7px; gap:0;
  box-shadow:
    inset 0 -15px 13px -7px rgba(168,188,200,.55),
    inset 0 -4px 5px rgba(120,110,88,.18),
    inset 3px 0 6px -3px rgba(255,255,255,.92),
    inset -5px 0 7px -4px rgba(110,122,132,.38),
    0 13px 15px -10px rgba(60,50,30,.5);
}
.tube::before{ box-shadow: inset 0 -3px 4px rgba(90,80,60,.16), inset 0 2px 3px rgba(255,255,255,.75), 0 1px 1px rgba(255,255,255,.6); }
.tube.selected .tube-inner{
  box-shadow:
    inset 0 -15px 13px -7px rgba(168,188,200,.55),
    inset 3px 0 6px -3px rgba(255,255,255,.92),
    inset -5px 0 7px -4px rgba(110,122,132,.38),
    0 22px 24px -12px rgba(47,111,178,.5);
}
/* 液体：段の継ぎ目を消して連続した水柱に。色は --c から濃淡を作る */
.seg{
  height:36px; border-radius:0; position:relative;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--c, #999) 84%, white 16%),
    var(--c, #999) 52%,
    color-mix(in srgb, var(--c, #999) 76%, black 24%));
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.17),
    inset 4px 0 6px -2px rgba(255,255,255,.20),
    inset -4px 0 6px -2px rgba(0,0,0,.14);
}
.seg::after{ display:none; }
.seg.botseg{ border-radius:0 0 15px 15px; box-shadow: inset 4px 0 6px -2px rgba(255,255,255,.20), inset -4px 0 6px -2px rgba(0,0,0,.14), inset 0 -6px 8px rgba(0,0,0,.18); }
/* 液面：最上段だけに楕円の水面とツヤ */
.seg.topseg{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--c, #999) 72%, white 28%),
    var(--c, #999) 46%,
    color-mix(in srgb, var(--c, #999) 76%, black 24%));
}
.seg.topseg::after{
  display:block; content:""; position:absolute; left:2px; right:2px; top:1px; height:7px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.14));
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.10);
  pointer-events:none;
}
.seg.empty{ background:transparent; box-shadow:none; }
/* タイトルの小型管も連続液体＋面のツヤに合わせる */
.mini-tube{ gap:0; padding:3px; }
.mini-tube i{ height:22px; border-radius:0; box-shadow:none; background-image:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 46%, rgba(0,0,0,.18)) !important; }
.mini-tube i:first-child{ border-radius:0 0 11px 11px; }
/* 注ぎ：水柱に円筒の陰影と静かな揺らぎ、波紋・滴・泡 */
.pour-stream{ border-radius:3px 3px 4px 4px; }
.pour-stream.on{ animation:streamSway .5s ease-in-out; }
@keyframes streamSway{ 0%{ transform:scaleX(1);} 35%{ transform:scaleX(1.18);} 70%{ transform:scaleX(.92);} 100%{ transform:scaleX(1);} }
.pour-fx .tube-inner{ padding:5px 4px 7px; gap:0; }
.pour-ripple{
  position:fixed; z-index:81; width:36px; height:11px; margin:-5px 0 0 -18px;
  border:2px solid #fff; border-radius:50%; opacity:0; pointer-events:none;
  animation:rippleGrow .55s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes rippleGrow{ 0%{ opacity:.85; transform:scale(.45);} 100%{ opacity:0; transform:scale(1.18);} }
.pour-drop{
  position:fixed; z-index:81; width:5px; height:8px; border-radius:50% 50% 60% 60%;
  opacity:0; pointer-events:none; animation:dropFall .42s ease-in forwards;
}
@keyframes dropFall{ 0%{ opacity:0; transform:translateY(0) scaleY(.8);} 18%{ opacity:.9;} 100%{ opacity:0; transform:translateY(30px) scaleY(1.15);} }
.bub{
  position:absolute; bottom:9px; width:5px; height:5px; border-radius:50%; z-index:3;
  background:radial-gradient(circle at 35% 32%, rgba(255,255,255,.95), rgba(255,255,255,.35) 70%);
  opacity:0; pointer-events:none; animation:bubRise .95s ease-out forwards;
}
@keyframes bubRise{ 0%{ opacity:0; transform:translateY(0) scale(.7);} 22%{ opacity:.85;} 100%{ opacity:0; transform:translateY(var(--rise, -60px)) scale(1.05);} }
/* 目標の見え方：そろった色の進み（細く静かに） */
.sort-progress{ display:flex; align-items:center; gap:10px; margin-top:16px; padding:0 4px; }
.sort-progress #sort-progress-label{ font-size:11px; letter-spacing:.08em; color:var(--sub); white-space:nowrap; }
.sort-progress-track{ flex:1; height:4px; border-radius:99px; background:var(--line); overflow:hidden; box-shadow:inset 0 1px 2px rgba(90,78,50,.18); }
#sort-progress-fill{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg, #8fb0cd, var(--accent)); transition:width .55s cubic-bezier(.22,.8,.3,1); }
/* 「次のレベルへ」の静かな呼吸（離さなさ・演出のみ） */
#btn-next-level{ animation:nextBreath 3s ease-in-out infinite; }
@keyframes nextBreath{ 0%,100%{ box-shadow:0 0 0 0 rgba(35,33,29,0);} 50%{ box-shadow:0 6px 18px -8px rgba(35,33,29,.55);} }
@media (prefers-reduced-motion: reduce){
  .pour-ripple,.pour-drop,.bub{ display:none; }
  .pour-stream.on{ animation:none; }
  #btn-next-level{ animation:none; }
  #sort-progress-fill{ transition:none; }
  .tube::after{ transition:none; }
}
/* トレイ化で横幅が足りず6本が折り返した件の是正（390pxで1列に収める） */
.board{ gap:16px 10px; padding-left:2px; padding-right:2px; }

/* === 再点検パス (2026-10-29): 新条件一式 ===
   長押し全廃／収納の再編／チップ被り回避／プレイヤーチップ／ショップ／
   プログレス線／ネイティブ級演出。ゲームプレイ・数値・寸法の計算式は無変更
   （管の段36px化に合わせ演出計算の定数も app.js 側で一致させた）。 */
/* --- 長押しポップアップ全廃（本作に入力欄はないため面全体に徹底） --- */
.wrap, .wrap *, .az-intro-overlay, .az-intro-overlay * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* --- CENTERチップ被り回避（本作側・共通キット無変更）: プレイ中は隠す --- */
body.play-active #azc-chip, body.play-active #azc-menu { display: none !important; }
/* --- プログレス線: 本作の基調（アクセント）に溶ける細さ・点滅なし --- */
#az-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1200; pointer-events: none; opacity: 0; transition: opacity .3s cubic-bezier(.22,.8,.3,1); }
#az-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(47,111,178,.45), #2f6fb2 70%); border-radius: 0 2px 2px 0; box-shadow: 0 1px 5px rgba(47,111,178,.35); }
/* --- CENTERアバター／名前（プレイヤー本人・全タイトル共通の見せ方） --- */
.az-player { display: flex; align-items: center; gap: 9px; }
.azp-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; background: #e9e2d2; box-shadow: 0 0 0 1px var(--line), 0 3px 7px rgba(35,33,29,.13); }
.azp-av svg, .azp-av img { width: 36px; height: 36px; display: block; object-fit: cover; }
.azp-meta { display: flex; flex-direction: column; line-height: 1.3; text-align: left; min-width: 0; }
.azp-name { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.azp-sub { font-size: 10px; color: var(--sub); letter-spacing: .1em; font-weight: 700; }
.title-player { justify-content: center; width: fit-content; max-width: 100%; margin: 14px auto 0; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 16px 5px 5px; box-shadow: 0 6px 14px rgba(35,33,29,.06); }
.res-player { justify-content: center; margin: 12px 0 2px; }
/* --- プレイ画面の収納再編: 画面いっぱいに広げ、盤面トレイが残り高さを受けて管を中央に置く（縮小ではなく再編で大きく） --- */
#screen-play.active { display: flex; flex-direction: column; flex: 1 0 auto; }
#screen-play .board { flex: 1 0 auto; align-content: center; min-height: 216px; }
#screen-play .play-actions { margin-top: 18px; }
/* --- 完成管の「そろいフタ」（要素のキャラ性・演出のみ） --- */
.tube-cap {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 15px; border-radius: 8px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, #fdfcf8, #e6dfcd);
  border: 2px solid #a49c8b;
  box-shadow: 0 3px 6px -2px rgba(60,50,30,.35), inset 0 1px 0 rgba(255,255,255,.9);
  animation: capIn .5s cubic-bezier(.22,1,.36,1) both;
}
.tube-cap::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle at 35% 32%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%), var(--cap, #999);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.25);
}
@keyframes capIn { from { opacity: 0; transform: translateX(-50%) translateY(-7px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.tube.done .tube-inner { box-shadow: inset 0 -15px 13px -7px rgba(168,188,200,.55), inset 3px 0 6px -3px rgba(255,255,255,.92), inset -5px 0 7px -4px rgba(110,122,132,.38), 0 13px 15px -10px rgba(60,50,30,.5), 0 0 0 3px rgba(47,111,178,.14), 0 0 18px -2px rgba(47,111,178,.28); }
/* --- タイトルの空気（物差し寄せ）: 紙の上に淡い水色の光だまり --- */
#screen-title { background: radial-gradient(115% 42% at 50% 0%, rgba(72,169,197,.13), rgba(72,169,197,0) 62%); border-radius: 18px; }
/* --- ネイティブアプリ級の演出（静かなイージングのみ）: タイトルのスタッガード登場 --- */
@keyframes riseIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
#screen-title.active > * { animation: riseIn .55s cubic-bezier(.22,1,.36,1) both; }
#screen-title.active > *:nth-child(2) { animation-delay: .05s; }
#screen-title.active > *:nth-child(3) { animation-delay: .1s; }
#screen-title.active > *:nth-child(4) { animation-delay: .15s; }
#screen-title.active > *:nth-child(5) { animation-delay: .2s; }
#screen-title.active > *:nth-child(6) { animation-delay: .25s; }
#screen-title.active .level-btn { animation: riseIn .45s cubic-bezier(.22,1,.36,1) both; }
#screen-title.active .level-btn:nth-child(2) { animation-delay: .04s; }
#screen-title.active .level-btn:nth-child(3) { animation-delay: .08s; }
#screen-title.active .level-btn:nth-child(4) { animation-delay: .12s; }
#screen-title.active .level-btn:nth-child(5) { animation-delay: .16s; }
#screen-title.active .level-btn:nth-child(6) { animation-delay: .2s; }
#screen-title.active .level-btn:nth-child(7) { animation-delay: .24s; }
#screen-title.active .level-btn:nth-child(8) { animation-delay: .28s; }
#screen-title.active .level-btn:nth-child(9) { animation-delay: .32s; }
#screen-title.active .level-btn:nth-child(10) { animation-delay: .36s; }
/* クリアパネルの金のグリント（結果確定後のみ・静かに1回） */
.clear-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(224,168,28,.16) 50%, transparent 58%); transform: translateX(-90%); animation: clearGlint 1.1s cubic-bezier(.22,1,.36,1) .35s both; pointer-events: none; }
@keyframes clearGlint { to { transform: translateX(90%); } }
/* --- ショップ導線（タイトル） --- */
.menu-row {
  appearance: none; width: 100%; margin-top: 14px; display: flex; justify-content: space-between; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink); padding: 13px 16px; cursor: pointer;
  transition: transform .16s cubic-bezier(.22,1,.36,1);
}
.menu-row:active { transform: scale(.985); }
.menu-row .mr-sub { font-size: 11.5px; color: var(--sub); font-weight: 400; }
/* --- ショップ画面（アズコイン販売中） --- */
#screen-shop { padding-top: 36px; }
.shop-head { display: flex; align-items: center; gap: 10px; }
.shop-title { font-size: 19px; letter-spacing: .05em; }
.shop-note { font-size: 12px; color: var(--sub); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; line-height: 1.65; margin-top: 14px; }
.shop-cat-head { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--sub); margin: 18px 2px 2px; }
.shop-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.shop-item .s-main { flex: 1; min-width: 0; }
.shop-item .s-main b { font-size: 14.5px; }
.shop-item .s-effect { flex: 0 0 100%; color: var(--sub); font-size: 12px; line-height: 1.65; }
.shop-item .s-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-item .s-tax { font-size: 10px; color: var(--sub); font-weight: 700; margin-left: 3px; }
.shop-ic-wrap { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; background: #fffdf8; border: 1px solid var(--line); border-radius: 10px; }
.shop-ic { width: 23px; height: 23px; display: block; }
.shop-badge-design { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: #2f6fb2; background: rgba(47,111,178,.12); border-radius: 99px; padding: 2px 7px; margin-left: 7px; vertical-align: 2px; }
.btn-disabled { font-size: 12px; font-weight: 700; color: var(--sub); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; white-space: nowrap; font: inherit; }
.catalog-btn:disabled { opacity: .85; cursor: default; }
#screen-shop.active .catalog-row, #screen-shop.active .ref-item { animation: riseIn .34s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  #screen-title.active > *, #screen-title.active .level-btn, #screen-shop.active .catalog-row, #screen-shop.active .ref-item, .tube-cap { animation: none; }
  .clear-panel::after { display: none; }
}
/* --- クリア状態の収納是正: パネルは縮ませず（flex:none）、盤面と余白の再配分で844内に収める --- */
.clear-panel { flex: none; }
body.cleared #screen-play .board { flex: 0 0 auto; margin-top: 12px; padding-top: 8px; padding-bottom: 10px; }
body.cleared .clear-panel { margin-top: 14px; padding: 16px 14px; }
body.cleared .clear-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
body.cleared .clear-actions #btn-next-level { flex: 1 1 100%; }
body.cleared #screen-play .fineprint { display: none; }
body.cleared .play-actions { margin-top: 10px; }

/* === アイテムショップ大型化（ITEM-SHOP-SPEC・フラッグシップ選択欄の文法） === */
.azs-balance { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.azs-balance-label { font-size: 11px; letter-spacing: .08em; color: var(--sub); font-weight: 700; }
.azs-balance-num { font-size: 20px; font-variant-numeric: tabular-nums; }
.azs-balance-link { margin-left: auto; font-size: 12px; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.azs-guest { margin-top: 18px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px; }
.azs-guest p { font-size: 13.5px; line-height: 1.7; margin-bottom: 14px; }
.azs-stage { display: flex; align-items: center; gap: 4px; margin-top: 18px; }
.azs-arrow { appearance: none; border: none; background: none; font-size: 30px; line-height: 1; color: var(--sub); cursor: pointer; padding: 10px 6px; flex: none; transition: transform .25s cubic-bezier(.22,.8,.3,1), color .25s; -webkit-tap-highlight-color: transparent; }
.azs-arrow:active { transform: scale(.9); color: var(--ink); }
.azs-focus { flex: 1; height: 218px; border-radius: 20px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: background .45s cubic-bezier(.22,.8,.3,1); }
.azs-focus .shop-ic { width: 132px; height: 132px; animation: azsIn .5s cubic-bezier(.22,.8,.3,1) both; }
@keyframes azsIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.azs-info { text-align: center; margin-top: 16px; }
.azs-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--sub); }
.azs-name { font-size: 22px; letter-spacing: .03em; margin-top: 4px; }
.azs-effect { font-size: 13px; color: #55524b; line-height: 1.7; margin-top: 8px; min-height: 2.6em; }
.azs-price { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px; }
.azs-price-unit { font-size: 13px; font-weight: 700; color: var(--sub); }
.azs-owned { font-size: 12.5px; color: var(--accent); font-weight: 700; min-height: 1.4em; margin-top: 4px; }
.azs-action { width: 100%; margin-top: 10px; padding: 14px 26px; font-size: 16px; }
.azs-action:disabled { opacity: .45; cursor: default; }
.azs-note { font-size: 11.5px; color: var(--sub); margin-top: 10px; }
.azs-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.azs-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.azs-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: background .3s, width .3s cubic-bezier(.22,.8,.3,1); }
.azs-dot.on { background: var(--ink); width: 18px; }
.azs-strip { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.azs-thumb { position: relative; appearance: none; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .25s cubic-bezier(.22,.8,.3,1), border-color .25s; -webkit-tap-highlight-color: transparent; }
.azs-thumb .shop-ic { width: 30px; height: 30px; }
.azs-thumb.on { border-color: var(--ink); transform: translateY(-2px); }
.azs-thumb-owned { position: absolute; right: 3px; bottom: 3px; font-size: 9px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 99px; padding: 1px 5px; }
.azs-sheet-wrap { position: fixed; inset: 0; z-index: 60; }
.azs-sheet-backdrop { position: absolute; inset: 0; background: rgba(28,26,22,.42); animation: azsFade .25s ease both; }
.azs-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-radius: 20px 20px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; animation: azsSheet .38s cubic-bezier(.22,.8,.3,1) both; }
@keyframes azsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes azsSheet { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.azs-sheet-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--sub); }
.azs-sheet-name { font-size: 19px; margin-top: 3px; }
.azs-sheet-rows { margin-top: 14px; border-top: 1px solid var(--line); }
.azs-sheet-rows > div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.azs-sheet-rows b { font-size: 16px; font-variant-numeric: tabular-nums; }
.azs-sheet-note { font-size: 11.5px; color: var(--sub); margin-top: 12px; }
.azs-sheet-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.azs-sheet-error { font-size: 13px; color: #b03a30; margin-top: 10px; }
.azs-sheet-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.azs-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); background: var(--ink); color: #fff; font-size: 13.5px; padding: 11px 18px; border-radius: 99px; opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(.22,.8,.3,1), transform .35s cubic-bezier(.22,.8,.3,1); z-index: 70; max-width: 88vw; text-align: center; }
.azs-toast.on { opacity: 1; transform: translate(-50%, 0); }
.play-items { display: flex; gap: 8px; justify-content: center; margin-top: 9px; flex-wrap: wrap; }
.item-qty { font-weight: 700; color: var(--accent); }
.hint-panel { margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; line-height: 1.9; }
.tube.hint-glow .tube-inner { border-color: #d9a441; box-shadow: 0 0 0 3px rgba(217,164,65,.35), inset 0 -14px 18px -12px rgba(70,60,40,.35); }
/* スキン：磨りガラス管 */
body.skin-frost .tube-inner { background: linear-gradient(115deg, rgba(235,244,250,.92), rgba(198,220,238,.55) 45%, rgba(225,238,248,.8)); backdrop-filter: blur(3px); border-color: #8fb0c9; }
/* スキン：AZRION管（金のリング＋黒管） */
body.skin-azrion .tube-inner { border-color: #2c3242; box-shadow: inset 0 0 0 2.5px #d9a441, inset 3px 0 6px -3px rgba(255,255,255,.9), 0 12px 14px -10px rgba(60,50,30,.45); }
/* テーマ：夕焼けラボ */
body.theme-sunset { --paper: #f8eee1; --card: #fff9f1; --line: #ead8c2; --accent: #c47f2a; }
/* テーマ：深夜ラボ */
body.theme-midnight { --paper: #16191f; --card: #1e222b; --ink: #ece9e1; --sub: #9aa0ae; --line: #343a47; --accent: #7fb2e0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); }
body.theme-midnight .azs-effect, body.theme-midnight .stuck-note { color: #c9cdd6; }
body.theme-midnight .tagline { color: #c9cdd6; }
body.theme-midnight .tube-inner { background: linear-gradient(105deg, rgba(50,56,70,.9), rgba(34,39,50,.75) 42%, rgba(56,64,80,.8) 78%, rgba(46,52,66,.9)); }
body.theme-midnight .mini-tube { background: rgba(30,34,43,.6); border-color: #4a5162; }
body.theme-midnight .shop-ic-wrap { background: #262b36; }
body.theme-midnight .azs-focus { border-color: #343a47; }

.azs-banner{display:block;margin:30px 0 2px;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;overflow:hidden;line-height:0;aspect-ratio:4/1;background:#16222e;transition:transform .12s ease}
.azs-banner img{display:block;width:100%;height:100%;object-fit:cover}
.azs-banner:active{transform:scale(.99)}

/* === ノースクロール是正 (2026-11-01 FIX1): タイトル画面を 375×812 に収める ===
   構造のみの是正（文言・導線・世界観は不変）。レベル選択は2列→3列の
   コンパクトグリッドに組み替え、装飾と余白のリズムを詰める。 */
body.app .wrap { padding-top: 12px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
#screen-title .brand { margin-top: 2px; line-height: 1.4; }
#screen-title .title-art { padding: 8px 0 2px; gap: 10px; }
#screen-title .mini-tube { width: 22px; height: 56px; border-radius: 0 0 11px 11px; padding: 2px; gap: 1px; }
#screen-title .game-title { font-size: 26px; line-height: 1.25; }
#screen-title .tagline { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
#screen-title .title-player { margin-top: 8px; padding: 2px 11px 2px 2px; }
#screen-title .title-player .azp-av, #screen-title .title-player .azp-av svg, #screen-title .title-player .azp-av img { width: 26px; height: 26px; }
#screen-title .note { margin-top: 8px; }
#screen-title .level-grid { grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-top: 12px; }
#screen-title .level-btn { padding: 8px 9px; border-radius: 11px; line-height: 1.35; }
#screen-title .level-no { font-size: 13.5px; }
#screen-title .level-meta { font-size: 10.5px; margin-top: 1px; }
#screen-title .menu-row { margin-top: 8px; padding: 10px 16px; }
#screen-title .howto-link { margin-top: 6px; line-height: 1.5; }
#screen-title .fineprint { font-size: 11px; line-height: 1.5; margin-top: 8px; }
#screen-title .azs-banner { margin-top: 10px; height: 38px; aspect-ratio: auto; }
#screen-title .azs-banner img { object-position: center 42%; }
.foot { padding-top: 10px; }
.azi-strip { padding-top: 10px !important; padding-bottom: 10px !important; }
.azi-strip-title { line-height: 1.35 !important; }
.azi-strip-sub { line-height: 1.4 !important; }

/* === BUG-SWEEP 2026-11-02: ホーム追加カード(.azip-card, z-index 900)がクリア後の選択肢を覆う欠陥の修正 ===
   再現: レベルクリア直後、「次のレベルへ」「もう一度」「レベル選択へ」の全てがカードに覆われて押せなかった
   (375x812 / 375x667 両方)。プレイ画面のアイテムボタン(ヒント等)も定位置ではカードの下だった。
   対処: プレイ画面(クリアパネルを含む)ではカードを出さない。アズメモリー 2026-11-01 の play/end 扱いと同方針で、
   本作既存の body.play-active (CENTERチップを隠す規則) にカードも加える。購入シート(z80)表示中も同様。 */
body.play-active .azip-card { display: none !important; }
body:has(#azs-sheet-wrap:not([hidden])) .azip-card { display: none !important; }
/* 帯(.azi-strip)とカードの二重表示では帯のボタンがカードに覆われるため、カード表示中は帯を畳む */
body:has(.azip-card) .azi-strip { display: none !important; }
/* 同・ショップ画面はタスク画面としてカードを出さない。タイトル画面ではカード表示中だけ
   .wrap の下余白を足し、フッターリンク類をカードの上までスクロールできるようにする */
body:has(#screen-shop.active) .azip-card { display: none !important; }
body:has(#screen-title.active):has(.azip-card.open) .wrap { padding-bottom: 160px; }

/* === 低い画面の圧縮（2026-11-02 レベル増量対応、375×667 等） ===
   レベル20追加でタイトルのグリッドが7行になり、低い画面でショップ行が
   折り目の下に落ちた。構造・文言は不変、寸法と余白のみ詰める。
   プレイ画面も同様に、12管（3行）でも操作ボタンが画面内に収まるよう詰める。 */
@media (max-height: 720px) {
  #screen-title .title-art { transform: scale(.78); margin-top: -6px; margin-bottom: -8px; }
  #screen-title .game-title { font-size: 26px; }
  #screen-title .tagline { margin-top: 2px; line-height: 1.45; }
  #screen-title .level-grid { gap: 7px; margin-top: 12px; }
  #screen-title .level-btn { padding-top: 5px; padding-bottom: 5px; }
  #screen-play .board { margin-top: 12px; gap: 10px 12px; }
  #screen-play .tube-inner { height: 134px; }
  #screen-play .seg { height: 27px; }
  #screen-play .pour-fx .tube-inner { height: 134px; }
}