/* ============================================================
   LUMORA LINK mk.II — app.css
   画面レイアウト / コンポーネント / レスポンシブ
   ============================================================ */

.screen{position:relative;}
.screen.is-hidden{display:none;}

/* ============================================================
   画面 1 : 接続
   ============================================================ */
.screen--connect{
  min-height:100vh;
  min-height:100dvh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(18px + var(--safe-t));
  padding-bottom:calc(18px + var(--safe-b));
  animation:screenIn .5s var(--ease-out);
  --mint:var(--mint);
}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.99);}to{opacity:1;transform:none;}}

.brand{display:flex;align-items:baseline;justify-content:center;gap:9px;
  letter-spacing:.36em;font-size:12px;color:var(--muted);text-transform:uppercase;}
.brand-mark{font-weight:800;color:var(--text);}
.brand-sub{font-weight:500;}
.brand-tag{padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  font-size:10px;letter-spacing:.18em;color:var(--mint);
  background:rgba(110,242,200,.08);}

.connect-grid{display:flex;flex-direction:column;gap:6px;margin-top:10px;}

/* ── 本体ビジュアル ── */
.device-card{position:relative;}
.device-stage{position:relative;display:grid;place-items:center;padding:6px 0 2px;}
.device-glow{
  position:absolute;top:50%;left:50%;width:min(320px,80vw);height:min(320px,80vw);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(110,242,200,.16),rgba(110,242,200,0) 62%);
  animation:auraBreathe 4.4s var(--ease) infinite;
}
@keyframes auraBreathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94);}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}}

.device{width:min(168px,42vw);height:auto;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.75));
  animation:deviceFloat 7s var(--ease) infinite;}
@keyframes deviceFloat{0%,100%{transform:translateY(0) rotate(-.4deg);}
  50%{transform:translateY(-8px) rotate(.4deg);}}

.device .d-led-halo{transform-box:fill-box;transform-origin:center;
  animation:ledBreath 2.8s var(--ease) infinite;}
.device .d-led{transform-box:fill-box;transform-origin:center;
  animation:ledBreath 2.8s var(--ease) infinite;}
.device .d-ledstrip,.device .d-ledstrip2{animation:seamSweep 3.2s linear infinite;}
.device .d-sheen{animation:sheenMove 5.5s var(--ease) infinite;}
@keyframes ledBreath{0%,100%{opacity:.42;}50%{opacity:1;}}
@keyframes seamSweep{0%{opacity:.12;}50%{opacity:.7;}100%{opacity:.12;}}
@keyframes sheenMove{0%,100%{opacity:.55;transform:translateX(0);}50%{opacity:.95;transform:translateX(4px);}}

.device-caption{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:4px;padding:9px 14px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.3);border:1px solid var(--line);
  font-size:11.5px;line-height:1.55;color:var(--muted);text-align:left;
}
.device-caption b{color:var(--mint);}
.power-pulse{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;
  border-radius:50%;background:rgba(110,242,200,.12);color:var(--mint);
  animation:auraBreathe 2.4s var(--ease) infinite;}
.power-pulse svg{width:15px;height:15px;}

/* ── コード入力 ── */
.connect-panel{
  display:flex;flex-direction:column;
  margin-top:14px;padding:18px 16px 16px;
  border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(14,16,24,.70),rgba(9,10,16,.58));
  border:1px solid var(--line);
  box-shadow:var(--sh-in),var(--sh-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:screenIn .6s var(--ease-out) both;
}
.connect-panel h1{font-size:clamp(19px,5.4vw,24px);font-weight:800;letter-spacing:.04em;}
.lead{margin-top:8px;font-size:12.5px;line-height:1.75;color:var(--muted);}

.code-wrap{position:relative;margin-top:18px;scroll-margin-bottom:46vh;}
.code-row{display:flex;gap:7px;cursor:text;}
.code-box{
  flex:1 1 0;min-width:0;
  aspect-ratio:1 / 1.24;
  display:grid;place-items:center;
  border-radius:15px;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.28));
  border:1px solid var(--line-2);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7);
  font-size:clamp(19px,6.2vw,27px);font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             transform var(--t-fast) var(--ease),color var(--t) var(--ease);
}
.code-box.is-filled{border-color:rgba(110,242,200,.5);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 0 18px -4px rgba(110,242,200,.55);
  color:#e9fff9;}
.code-box.is-active{border-color:var(--mint);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 0 0 3px rgba(110,242,200,.16);}
.code-box.is-error{border-color:var(--danger);animation:shake .42s var(--ease);}
.code-box.is-pop{animation:pop .28s var(--ease-out);}
@keyframes pop{0%{transform:scale(1);}42%{transform:scale(1.14);}100%{transform:scale(1);}}

/* 自動入力時：1桁ずつ順に現れる */
.code-wrap.is-prefilled .code-box{animation:prefillIn .5s var(--ease-out) both;}
.code-wrap.is-prefilled .code-box:nth-child(1){animation-delay:0s;}
.code-wrap.is-prefilled .code-box:nth-child(2){animation-delay:.07s;}
.code-wrap.is-prefilled .code-box:nth-child(3){animation-delay:.14s;}
.code-wrap.is-prefilled .code-box:nth-child(4){animation-delay:.21s;}
.code-wrap.is-prefilled .code-box:nth-child(5){animation-delay:.28s;}
.code-wrap.is-prefilled .code-box:nth-child(6){animation-delay:.35s;}
@keyframes prefillIn{from{opacity:0;transform:translateY(7px) scale(.92);}
  to{opacity:1;transform:none;}}
@keyframes shake{0%,100%{transform:translateX(0);}18%{transform:translateX(-7px);}36%{transform:translateX(7px);}
  54%{transform:translateX(-4px);}72%{transform:translateX(4px);}}

.hidden-input{
  position:absolute;left:0;bottom:0;width:100%;height:1px;
  opacity:0;border:0;padding:0;background:transparent;font-size:16px;
}

.status-line{min-height:19px;margin-top:13px;font-size:12.5px;font-weight:600;
  text-align:center;color:var(--mint);letter-spacing:.02em;
  opacity:0;transition:opacity var(--t) var(--ease);}
.status-line.is-show{opacity:1;}

.steps{display:flex;flex-direction:column;gap:7px;margin-top:14px;
  padding-top:14px;border-top:1px dashed rgba(255,255,255,.08);}
.steps li{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted-2);
  transition:color var(--t) var(--ease);}
.steps li i{position:relative;width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);transition:all var(--t) var(--ease);}
.steps li.is-active{color:var(--mint);}
.steps li.is-active i{border-color:var(--mint);background:rgba(110,242,200,.16);
  box-shadow:0 0 0 4px rgba(110,242,200,.1);animation:auraBreathe 1.2s var(--ease) infinite;}
.steps li.is-done{color:var(--text);}
.steps li.is-done i{border-color:var(--mint);background:var(--mint);}
.steps li.is-done i::after{content:'';position:absolute;left:4px;top:1.5px;width:4px;height:8px;
  border:solid #05261d;border-width:0 2px 2px 0;transform:rotate(42deg);}

/* ============================================================
   画面 2 : コントロール
   ============================================================ */
.screen--control{
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  padding-top:calc(8px + var(--safe-t));
  animation:screenIn .45s var(--ease-out);
}
.screen--control.is-hidden{display:none;}

.col-left{display:contents;}
.col-right{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(10px + var(--safe-b));
  scrollbar-width:none;}
.col-right::-webkit-scrollbar{width:0;height:0;}

/* ── トップバー ── */
.topbar{display:flex;align-items:center;gap:10px;padding:4px 0 10px;flex:0 0 auto;}
.icon-btn{
  position:relative;width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:var(--surface);border:1px solid var(--line);
  color:var(--text);
  transition:transform var(--t-fast) var(--ease),background var(--t) var(--ease);
  touch-action:none;
}
.icon-btn:active{transform:scale(.94);background:var(--surface-2);}
.icon-btn > svg:first-child{width:20px;height:20px;}
.icon-btn .hold-ring{position:absolute;inset:-3px;width:46px;height:46px;transform:rotate(-90deg);
  opacity:0;transition:opacity var(--t) var(--ease);pointer-events:none;}
.icon-btn.is-holding .hold-ring{opacity:1;}
.hold-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2.5;}
.hold-fill{fill:none;stroke:var(--danger);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:119.4;stroke-dashoffset:119.4;}

.title{flex:1 1 auto;display:flex;align-items:baseline;gap:6px;min-width:0;
  font-size:13px;letter-spacing:.2em;}
.title b{font-weight:800;}
.title span{color:var(--muted-2);font-size:11px;letter-spacing:.14em;}

.link-pill{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:7px 11px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.06em;
  transition:border-color .12s linear,background .12s linear;
}
.link-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 10px var(--mint);animation:blink 2.2s infinite;}
.link-pill em{font-style:normal;color:var(--muted-2);font-variant-numeric:tabular-nums;letter-spacing:0;}
.link-pill.is-tx{border-color:rgba(110,242,200,.75);background:rgba(110,242,200,.14);}
.link-pill.is-tx .dot{background:#ffffff;box-shadow:0 0 14px #ffffff;animation:none;}

/* ── ヒーロー (デバイス可視化) ── */
.hero{
  position:relative;flex:0 0 auto;
  height:clamp(206px,33vh,286px);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.06),rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(9,11,18,.66),rgba(6,7,12,.86));
  box-shadow:var(--sh-in),0 26px 50px -30px rgba(0,0,0,1);
  overflow:hidden;
  transition:height .3s var(--ease);
  --glow:calc(.18 + var(--lvl) * .5);
}
.hero-glow{position:absolute;left:50%;top:44%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(110,242,200,calc(.04 + var(--env) * .09)),rgba(110,242,200,0) 58%);
  mix-blend-mode:screen;}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

.hero-overlay{position:absolute;inset:0;padding:13px 15px;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-start;}
.hero-left .k{font-size:9.5px;letter-spacing:.24em;color:var(--muted-2);font-weight:700;}
.hero-left .v{position:relative;font-size:clamp(38px,12vw,54px);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:#eafff8;text-shadow:0 0 calc(12px + var(--env) * 34px) rgba(110,242,200,calc(.3 + var(--env) * .6));
  transition:font-size .3s var(--ease);}
.hero-left .u{font-size:10.5px;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums;}

.hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right;}
.stat{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.4);border:1px solid var(--line);
  font-size:11px;font-variant-numeric:tabular-nums;color:var(--text);}
.stat-ico{font-size:11px;filter:saturate(.8);}
.stat--pattern{flex-direction:column;align-items:flex-end;gap:0;padding:5px 9px;}
.stat--pattern .k2{font-size:9px;letter-spacing:.14em;color:var(--muted-2);}
.stat--pattern b{font-size:12px;color:var(--mint);}

.hero-bottom{position:absolute;left:15px;right:15px;bottom:11px;pointer-events:none;
  display:flex;align-items:baseline;gap:9px;}
.hero-bottom .k{font-size:9.5px;letter-spacing:.2em;color:var(--muted-2);font-weight:700;}
.hero-bottom b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.state-tag{margin-left:auto;padding:3px 8px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);font-size:9.5px;letter-spacing:.16em;color:var(--muted);
  background:rgba(0,0,0,.4);transition:all var(--t) var(--ease);}
.state-tag.is-run{color:#0a1f18;background:var(--mint);border-color:var(--mint);
  box-shadow:0 0 18px rgba(110,242,200,.5);}
.state-tag.is-heat{color:#2a1305;background:var(--heat-1);border-color:var(--heat-1);}

.tx-pill{
  position:absolute;right:13px;bottom:11px;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(110,242,200,.16);border:1px solid rgba(110,242,200,.45);
  color:#d8fff3;font-size:10px;letter-spacing:.08em;font-weight:700;
  opacity:0;transform:translateY(4px);
  transition:opacity .12s linear,transform .12s var(--ease);pointer-events:none;
}
.tx-pill.is-show{opacity:1;transform:none;}
.tx-pill.is-show::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 8px var(--mint);animation:blink .5s infinite;}

/* compact: スクロール時にヒーローを縮める */
.screen--control.is-compact .hero{height:132px;}
.screen--control.is-compact .hero-left .v{font-size:30px;}
.screen--control.is-compact .hero-right .stat:not(.stat--pattern){display:none;}

/* ── ロック表示 / 同意 ── */
.lock-msg{
  flex:0 0 auto;margin:9px 0 0;font-size:11.5px;line-height:1.5;color:var(--heat-1);
  text-align:center;letter-spacing:.02em;
  opacity:0;transition:opacity var(--t) var(--ease);
}
.lock-msg.is-show{opacity:1;}

.consent{display:flex;align-items:center;gap:9px;justify-content:center;
  flex:0 0 auto;margin-top:7px;font-size:11.5px;color:var(--muted);cursor:pointer;
  transition:color var(--t) var(--ease);}
.consent input{position:absolute;opacity:0;width:1px;height:1px;}
.consent .box{width:17px;height:17px;flex:0 0 auto;border-radius:5px;
  border:1px solid var(--line-2);display:grid;place-items:center;
  background:rgba(0,0,0,.4);transition:all var(--t) var(--ease);}
.consent .box svg{width:11px;height:11px;opacity:0;transform:scale(.6);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-out);color:#05261d;}
.consent input:checked + .box{background:var(--mint);border-color:var(--mint);
  box-shadow:0 0 14px rgba(110,242,200,.5);}
.consent input:checked + .box svg{opacity:1;transform:none;}
.consent input:focus-visible + .box{outline:2px solid rgba(110,242,200,.8);outline-offset:2px;}
.consent.is-hidden{display:none;}
.consent--warn{color:var(--heat-1);}
.consent--warn .box{border-color:rgba(255,179,71,.7);animation:auraBreathe 1s var(--ease) 3;}

/* ── アクションバー ── */
.actionbar{display:flex;gap:10px;flex:0 0 auto;
  margin-top:12px;padding-bottom:2px;
  transition:opacity var(--t) var(--ease);}
.actionbar.is-blocked{opacity:.5;}

/* ── カード ── */
.card{
  margin-bottom:var(--gap);padding:14px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(18,20,29,.70),rgba(11,13,20,.60));
  border:1px solid var(--line);
  box-shadow:var(--sh-in),var(--sh-1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity var(--t) var(--ease),filter var(--t) var(--ease);
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.card-head h2{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--text);}
.card-val{font-size:13px;font-weight:800;color:var(--mint);font-variant-numeric:tabular-nums;letter-spacing:.04em;}
.card-note{margin-top:9px;font-size:10.5px;letter-spacing:.06em;color:var(--muted-2);}
.card-note b{color:var(--muted);font-variant-numeric:tabular-nums;}

.lockable.is-locked{opacity:.4;filter:saturate(.35);pointer-events:none;}
.lockable.is-locked .card-head::after{
  content:'LOCKED';font-size:9px;letter-spacing:.16em;color:var(--muted-2);
  padding:3px 7px;border-radius:var(--r-pill);border:1px solid var(--line);
}

/* ── パターン ── */
.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:12px;}
.mode-chip{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:4px;
  padding:10px 11px 9px;border-radius:var(--r-md);
  background:rgba(0,0,0,.32);border:1px solid var(--line);
  transition:transform var(--t-fast) var(--ease),border-color var(--t) var(--ease),
             background var(--t) var(--ease),box-shadow var(--t) var(--ease);
  text-align:left;
}
.mode-chip:active{transform:scale(.975);}
.mode-thumb{width:100%;height:30px;display:block;opacity:.55;transition:opacity var(--t) var(--ease);}
.mode-name{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);}
.mode-chip.is-active{
  border-color:rgba(110,242,200,.6);background:rgba(110,242,200,.1);
  box-shadow:0 0 22px -6px rgba(110,242,200,.55),inset 0 0 0 1px rgba(110,242,200,.2);
}
.mode-chip.is-active .mode-name{color:var(--mint);}
.mode-chip.is-active .mode-thumb{opacity:1;}

/* ── 配信ルーム（カード間の導線） ── */
.card--live{padding:10px;}
.live-btn{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 12px;border-radius:var(--r-md);
  background:linear-gradient(100deg,rgba(255,92,122,.22),rgba(255,92,122,.07) 58%,rgba(255,255,255,.03));
  border:1px solid rgba(255,92,122,.4);
  box-shadow:0 12px 28px -18px rgba(255,92,122,1),var(--sh-in);
  transition:transform var(--t-fast) var(--ease),border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.live-btn:active{transform:scale(.985);border-color:rgba(255,92,122,.75);}
.live-btn::after{
  content:'';position:absolute;top:0;bottom:0;width:60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);
  transform:translateX(-120%);animation:liveSweep 3.6s linear infinite;pointer-events:none;
}
@keyframes liveSweep{0%{transform:translateX(-120%);}55%,100%{transform:translateX(220%);}}

.live-badge{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:5px 9px;border-radius:var(--r-pill);
  background:rgba(255,92,122,.24);border:1px solid rgba(255,92,122,.5);
  color:#ffdae1;font-size:10px;font-weight:800;letter-spacing:.14em;
}
.live-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;}
.live-text b{font-size:13px;font-weight:700;letter-spacing:.03em;color:#fff1f4;}
.live-text em{font-style:normal;font-size:10.5px;line-height:1.4;color:#cb9aa4;letter-spacing:.01em;}
.live-arrow{width:18px;height:18px;flex:0 0 auto;color:#ffb9c6;}

/* ── 加熱 ── */
.heat-body{display:flex;gap:13px;margin-top:13px;}
.thermo{position:relative;flex:0 0 auto;width:14px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8);overflow:hidden;
  display:flex;flex-direction:column-reverse;}
.thermo-fill{width:100%;height:0%;border-radius:var(--r-pill);
  background:linear-gradient(0deg,#ff5f6d,#ffb347);
  box-shadow:0 0 16px rgba(255,120,80,.7);
  transition:height .12s linear;}
.thermo-now{position:absolute;left:-3px;right:-3px;height:2px;bottom:26%;background:#fff;
  border-radius:2px;box-shadow:0 0 8px rgba(255,255,255,.9);
  transition:bottom .12s linear;opacity:0;}
.thermo-goal{position:absolute;left:-2px;right:-2px;height:1px;bottom:0;background:rgba(255,179,71,.9);
  transition:bottom .2s var(--ease);opacity:0;}
.is-heating .thermo-now,.is-heating .thermo-goal{opacity:1;}
.is-heating .thermo{animation:heatShimmer 2.4s var(--ease) infinite;}
@keyframes heatShimmer{0%,100%{box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 0 0 rgba(255,120,80,0);}
  50%{box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 0 16px rgba(255,120,80,.55);}}

.heat-vals{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:6px;}
.heat-vals > div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.heat-vals .k{font-size:10px;letter-spacing:.14em;color:var(--muted-2);}
.heat-vals b{font-size:15px;font-variant-numeric:tabular-nums;}
#heatCurrent{color:var(--heat-1);}

/* ── 潤滑 ── */
.spray{
  position:relative;width:100%;height:86px;margin-top:12px;
  border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(124,198,255,.10),rgba(124,198,255,.03));
  border:1px dashed rgba(124,198,255,.35);
  display:grid;place-items:center;overflow:hidden;
  transition:transform var(--t-fast) var(--ease),border-color var(--t) var(--ease),
             background var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.spray:active{transform:scale(.985);}
.spray-label{position:relative;z-index:2;font-size:13px;font-weight:700;letter-spacing:.05em;color:#cfe8ff;}
.spray-halo{position:absolute;width:150px;height:150px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(124,198,255,.4),rgba(124,198,255,0) 65%);
  transition:opacity var(--t) var(--ease);}
.spray-ripple{position:absolute;width:70px;height:70px;border-radius:50%;
  border:1px solid rgba(124,198,255,.7);opacity:0;}
.spray.is-active{border-style:solid;border-color:rgba(124,198,255,.8);
  background:linear-gradient(180deg,rgba(124,198,255,.22),rgba(124,198,255,.06));
  box-shadow:0 0 30px -6px rgba(124,198,255,.6),inset 0 0 22px rgba(124,198,255,.18);}
.spray.is-active .spray-halo{opacity:1;}
.spray.is-active .spray-label{color:#eaf6ff;}
.spray.is-active .spray-ripple{animation:sprayRipple 1.5s linear infinite;}
@keyframes sprayRipple{0%{opacity:.7;transform:scale(.5);}100%{opacity:0;transform:scale(2.1);}}

.spray-drops{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .2s linear;}
.spray.is-active .spray-drops{opacity:1;}
.spray-drops i{position:absolute;bottom:82%;width:4px;height:4px;border-radius:50%;
  background:rgba(200,235,255,.95);box-shadow:0 0 7px rgba(124,198,255,.9);}
.spray.is-active .spray-drops i{animation:drop 1.05s linear infinite;}
.spray-drops i:nth-child(1){left:24%;animation-delay:0s;}
.spray-drops i:nth-child(2){left:40%;animation-delay:.21s;}
.spray-drops i:nth-child(3){left:55%;animation-delay:.42s;}
.spray-drops i:nth-child(4){left:70%;animation-delay:.63s;}
.spray-drops i:nth-child(5){left:84%;animation-delay:.84s;}
@keyframes drop{0%{transform:translateY(0) scale(.6);opacity:0;}
  20%{opacity:1;transform:translateY(8px) scale(1);}
  100%{transform:translateY(86px) scale(.8);opacity:0;}}

.tank{margin-top:13px;}
.tank-head{display:flex;align-items:baseline;justify-content:space-between;font-size:10.5px;
  letter-spacing:.1em;color:var(--muted-2);}
.tank-head b{font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums;}
.tank-bar{position:relative;height:9px;margin:8px 0 11px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8);overflow:hidden;}
.tank-bar i{display:block;height:100%;width:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#2b7fb8,#7cc6ff);
  box-shadow:0 0 14px rgba(124,198,255,.5);
  transition:width .2s linear,background var(--t) var(--ease);}
.tank-bar.is-low i{background:linear-gradient(90deg,#ff8a3d,#ff5f6d);
  box-shadow:0 0 14px rgba(255,95,109,.6);}
.tank .mini-btn{width:100%;justify-content:center;}

/* ── 設定 ── */
.row-list{display:flex;flex-direction:column;margin-top:6px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.07);}
.row:last-child{border-bottom:0;padding-bottom:2px;}
.row-label{font-size:12.5px;letter-spacing:.04em;color:var(--muted);}

.spec{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:7px;}
.spec > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:11px;letter-spacing:.04em;}
.spec dt{color:var(--muted-2);}
.spec dd{color:var(--muted);font-variant-numeric:tabular-nums;}

/* ============================================================
   画面 3 : ライブルーム（アプリ内）
   ============================================================ */
.screen--live{
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  padding-top:calc(8px + var(--safe-t));
  animation:screenIn .4s var(--ease-out);
}
.screen--live.is-hidden{display:none;}

.live-pill{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:6px 11px;border-radius:var(--r-pill);
  background:rgba(255,92,122,.16);border:1px solid rgba(255,92,122,.5);
  color:#ffd9e0;font-size:10px;font-weight:800;letter-spacing:.16em;
}

.live-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(10px + var(--safe-b));
  scrollbar-width:none;
}
.live-scroll::-webkit-scrollbar{width:0;height:0;}

.live-stage{
  margin-bottom:var(--gap);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,20,29,.72),rgba(10,12,18,.80));
  box-shadow:var(--sh-in),var(--sh-1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.live-screen{
  position:relative;aspect-ratio:16 / 10;
  display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,92,122,.20), rgba(10,12,18,0) 62%),
    linear-gradient(160deg,#151827,#0a0b12);
}
.live-bars{
  position:absolute;left:0;right:0;bottom:0;height:38%;
  display:flex;align-items:flex-end;gap:3px;padding:0 14px;
  mask-image:linear-gradient(180deg,transparent,#000 40%);
}
.live-bars i{
  flex:1 1 0;min-width:2px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,rgba(255,92,122,.85),rgba(255,92,122,.12));
  animation:liveBar 1.25s var(--ease) infinite;
  animation-delay:calc(var(--i,0) * -0.11s);
}
@keyframes liveBar{0%,100%{height:18%;}50%{height:92%;}}

.live-stage-msg{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;gap:5px;
  padding:0 18px;}
.live-stage-msg b{font-size:14px;font-weight:700;letter-spacing:.04em;color:#fff1f4;}
.live-stage-msg em{font-style:normal;font-size:11px;line-height:1.5;color:#c69aa3;letter-spacing:.01em;}

.live-stage-tag{
  position:absolute;top:11px;left:11px;
  padding:4px 9px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.45);border:1px solid var(--line-2);
  font-size:10px;letter-spacing:.1em;color:var(--muted);
  transition:all var(--t) var(--ease);
}
.live-stage-tag.is-run{color:#0a1f18;background:var(--mint);border-color:var(--mint);
  box-shadow:0 0 18px rgba(110,242,200,.5);}

.live-meta{display:flex;align-items:center;gap:9px;padding:11px 13px;
  border-top:1px solid var(--line);}
.live-room-name{font-size:12.5px;font-weight:700;letter-spacing:.06em;}
.live-viewers{margin-left:auto;font-size:11px;color:var(--muted-2);letter-spacing:.02em;}
.live-viewers b{color:var(--muted);font-variant-numeric:tabular-nums;}

.live-feed{display:flex;flex-direction:column;margin-top:6px;}
.live-feed li{display:flex;align-items:baseline;gap:8px;padding:9px 0;
  border-bottom:1px dashed rgba(255,255,255,.06);
  font-size:11.5px;line-height:1.45;color:var(--muted);
  animation:feedIn .38s var(--ease-out);}
.live-feed li:last-child{border-bottom:0;}
.live-feed li.is-empty{color:var(--muted-2);}
.live-feed li::before{content:'';width:5px;height:5px;flex:0 0 auto;border-radius:50%;
  background:var(--mint);box-shadow:0 0 8px rgba(110,242,200,.8);transform:translateY(-1px);}
.live-feed time{margin-left:auto;flex:0 0 auto;font-size:10px;color:var(--muted-2);
  font-variant-numeric:tabular-nums;}
@keyframes feedIn{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:none;}}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* 小さい端末 (高さが低い) */
@media (max-height:900px) and (max-width:899px){
  .device{width:min(128px,32vw);}
  .connect-panel{padding:15px 15px 12px;}
  .fine{padding:8px 2px 12px;}
  .code-wrap{margin-top:14px;}
  .steps{margin-top:12px;padding-top:12px;}
}

/* さらに小さい端末 (高さが低い) */
@media (max-height:680px){
  .hero{height:clamp(170px,28vh,220px);}
  .device{width:min(106px,28vw);}
  .device-caption{font-size:10.5px;padding:7px 12px;}
  .code-box{aspect-ratio:1 / 1.1;}
}

/* 横長 / タブレット / デスクトップ */
@media (min-width:760px){
  .app{max-width:640px;}
}

@media (min-width:900px) and (min-height:520px){
  .app{max-width:1080px;padding-left:28px;padding-right:28px;}

  /* 接続画面 : 2カラム */
  .screen--connect{justify-content:center;}
  .connect-grid{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,440px);
    gap:34px;align-items:center;margin-top:16px;
  }
  .device-card{display:flex;justify-content:center;}
  .device-stage{flex-direction:column;}
  .device{width:min(220px,20vw);}
  .connect-panel{margin-top:0;padding:26px 26px 20px;}

  /* コントロール画面 : 左=デバイス固定 / 右=設定スクロール */
  .screen--control{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,400px);
    gap:22px;
    height:100vh;height:100dvh;
    padding-bottom:calc(14px + var(--safe-b));
  }
  .col-left{
    display:flex;flex-direction:column;
    height:100%;min-height:0;
    padding-bottom:2px;
  }
  .hero{flex:1 1 auto;height:auto;min-height:230px;}
  .screen--control.is-compact .hero{height:auto;min-height:200px;}
  .screen--control.is-compact .hero-left .v{font-size:clamp(38px,4.4vw,54px);}
  .screen--control.is-compact .hero-right .stat:not(.stat--pattern){display:inline-flex;}
  .col-right{
    height:100%;overflow-y:auto;padding-right:6px;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
    mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
  .col-right::-webkit-scrollbar{width:6px;}
  .col-right::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px;}
  .mode-grid{gap:10px;}
  .actionbar{margin-top:14px;}

  /* ライブルームは読みやすい幅に絞って中央寄せ */
  .screen--live{width:100%;max-width:760px;margin-inline:auto;}
}

/* 横向きの狭いスマホ */
@media (max-width:899px) and (orientation:landscape) and (max-height:520px){
  .hero{height:150px;}
  .device{width:min(110px,18vh);}
  .screen--connect{justify-content:flex-start;}
}

@media (prefers-reduced-motion: reduce){
  .device,.device-glow,.power-pulse{animation:none;}
}