/* ============================================================
   LUMORA LINK mk.II — base.css
   デザイントークン / リセット / 背景 / 汎用UI
   ============================================================ */

:root{
  color-scheme: dark;

  /* surfaces */
  --bg-0:#07080d;
  --bg-1:#0c0e16;
  --bg-2:#12141f;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --surface-3:rgba(255,255,255,.11);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* text */
  --text:#eef1f8;
  --muted:#8f97ad;
  --muted-2:#606877;

  /* accents */
  --mint:#6ef2c8;
  --mint-2:#2fbf9b;
  --mint-deep:#0f8f74;
  --aqua:#7cc6ff;
  --heat-1:#ffb347;
  --heat-2:#ff5f6d;
  --danger:#ff5c7a;

  /* metrics */
  --r-xs:8px;  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --pad:14px;
  --gap:12px;

  /* motion */
  --ease:cubic-bezier(.22,.85,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.14s; --t:.24s; --t-slow:.45s;

  /* shadow */
  --sh-1:0 10px 26px -14px rgba(0,0,0,.9);
  --sh-2:0 22px 50px -22px rgba(0,0,0,.95);
  --sh-in:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.5);

  /* runtime (JS から更新) */
  --env:0;      /* 0-1 モーター振動エンベロープ */
  --lvl:0.3;    /* 0-1 強度 */
  --heat:0;     /* 0-1 加熱量 */

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium",Meiryo,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{height:100%;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg-0);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.5;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

button,input,a{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;}
[hidden]{display:none !important;}
h1,h2,p,dl,dd,ol,ul{margin:0;}
ol,ul{list-style:none;padding:0;}
a{text-decoration:none;}

:focus{outline:none;}
:focus-visible{outline:2px solid rgba(110,242,200,.85);outline-offset:2px;border-radius:6px;}

::selection{background:rgba(110,242,200,.28);}

/* ─────────────────────────────────────────────
   背景 (写真 + 環境光)
   ───────────────────────────────────────────── */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--bg-0);
}

/* 背景写真（bj.jpg）— 端末サイズに合わせて cover */
.ambient .photo{
  position:absolute;inset:-3%;
  background-image:url('../bj.jpg');
  background-size:cover;
  background-position:60% 34%;
  background-repeat:no-repeat;
  filter:blur(1px) saturate(1.02) brightness(.80);
  transform:scale(1.03);
}

/* 写真の上に重ねるスクリム
   0-8%   : ブランドバーが読める暗さ
   14-30% : 写真を一番見せる（本体が映える帯）
   40%〜  : カードが読めるまで一気に落とす */
.ambient .scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(125% 66% at 50% 22%,
      rgba(7,8,13,0) 24%, rgba(7,8,13,.42) 100%),
    linear-gradient(180deg,
      rgba(7,8,13,.74) 0%,
      rgba(7,8,13,.50) 7%,
      rgba(7,8,13,.28) 14%,
      rgba(7,8,13,.26) 24%,
      rgba(7,8,13,.42) 32%,
      rgba(7,8,13,.62) 40%,
      rgba(7,8,13,.82) 50%,
      rgba(7,8,13,.90) 64%,
      rgba(7,8,13,.95) 80%,
      rgba(7,8,13,.97) 100%);
  box-shadow:inset 0 0 120px 16px rgba(0,0,0,.30);
}

.ambient .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.18;will-change:transform;}
.ambient .b1{width:58vmax;height:58vmax;left:-22vmax;top:-18vmax;
  background:radial-gradient(circle,rgba(110,242,200,.20),rgba(110,242,200,0) 70%);
  animation:drift1 26s var(--ease) infinite alternate;}
.ambient .b2{width:48vmax;height:48vmax;right:-18vmax;top:18vmax;
  background:radial-gradient(circle,rgba(124,198,255,.16),rgba(124,198,255,0) 70%);
  animation:drift2 32s var(--ease) infinite alternate;}
.ambient .b3{width:52vmax;height:52vmax;left:10vw;bottom:-26vmax;
  background:radial-gradient(circle,rgba(255,95,109,.12),rgba(255,95,109,0) 70%);
  animation:drift3 38s var(--ease) infinite alternate;}

.ambient .vignette{position:absolute;inset:0;
  background:radial-gradient(115% 80% at 50% 40%,rgba(0,0,0,0) 40%,rgba(0,0,0,.62) 100%);}
.ambient .scanlines{position:absolute;inset:0;opacity:.05;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.9) 0 1px,transparent 1px 3px);}

@keyframes drift1{to{transform:translate3d(6vw,4vh,0) scale(1.12);}}
@keyframes drift2{to{transform:translate3d(-5vw,6vh,0) scale(1.08);}}
@keyframes drift3{to{transform:translate3d(4vw,-5vh,0) scale(1.15);}}

/* ─────────────────────────────────────────────
   アプリ枠
   ───────────────────────────────────────────── */
.app{
  position:relative;
  z-index:1;
  width:100%;
  max-width:520px;
  margin-inline:auto;
  padding-left:calc(var(--pad) + var(--safe-l));
  padding-right:calc(var(--pad) + var(--safe-r));
}

/* ─────────────────────────────────────────────
   ボタン
   ───────────────────────────────────────────── */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:56px;padding:0 20px;
  border-radius:var(--r-md);
  font-size:16px;font-weight:700;letter-spacing:.03em;
  color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--line-2);
  box-shadow:var(--sh-in),var(--sh-1);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),
             background var(--t) var(--ease),opacity var(--t) var(--ease),border-color var(--t) var(--ease);
  overflow:hidden;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}
.btn .ico{width:20px;height:20px;flex:0 0 auto;}
.btn:active:not(:disabled){transform:translateY(1.5px) scale(.985);box-shadow:inset 0 2px 6px rgba(0,0,0,.6);}
.btn:disabled{opacity:.4;cursor:not-allowed;}

.btn--primary{
  background:linear-gradient(180deg,#7ff5cf,#2fbf9b);
  color:#04211a;border-color:rgba(255,255,255,.3);
  box-shadow:0 14px 30px -14px rgba(110,242,200,.7),inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--primary:active:not(:disabled){box-shadow:inset 0 3px 10px rgba(0,0,0,.35);}

.btn--connect{width:100%;height:58px;margin-top:14px;font-size:17px;}
.btn--connect .btn-label{position:relative;z-index:1;}
.btn--connect.is-busy .btn-label::after{content:'';display:inline-block;width:1em;text-align:left;animation:dots 1.2s steps(4,end) infinite;}
@keyframes dots{0%{content:'';}25%{content:'・';}50%{content:'・・';}75%{content:'・・・';}}

.btn-progress{position:absolute;left:0;bottom:0;height:3px;width:0%;
  background:linear-gradient(90deg,#0b7f66,#eafff8);
  box-shadow:0 0 12px rgba(255,255,255,.6);transition:width .3s linear;}

.btn--run{
  flex:1 1 auto;
  background:linear-gradient(180deg,#eafff8,#6ef2c8);
  color:#04211a;border-color:rgba(255,255,255,.35);
  box-shadow:0 16px 34px -16px rgba(110,242,200,.85),inset 0 1px 0 rgba(255,255,255,.7);
}
.btn--run.is-running{
  background:linear-gradient(180deg,#fff3d6,#ffb347);
  box-shadow:0 16px 34px -16px rgba(255,179,71,.85),inset 0 1px 0 rgba(255,255,255,.7);
  animation:runPulse 1.1s var(--ease) infinite;
}
@keyframes runPulse{
  0%,100%{box-shadow:0 16px 34px -16px rgba(255,179,71,.7),inset 0 1px 0 rgba(255,255,255,.7);}
  50%{box-shadow:0 20px 44px -14px rgba(255,179,71,1),inset 0 1px 0 rgba(255,255,255,.7);}
}
.btn--stop{
  flex:0 0 auto;min-width:112px;
  background:linear-gradient(180deg,rgba(255,92,122,.16),rgba(255,92,122,.06));
  border-color:rgba(255,92,122,.42);color:#ffc9d3;
}
.btn--stop:not(:disabled):active{background:rgba(255,92,122,.24);}

/* ─────────────────────────────────────────────
   チップ / ミニボタン
   ───────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  align-self:flex-end;
  margin-top:8px;padding:6px 12px;
  border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--line);
  color:var(--muted-2);
  font-size:11.5px;font-weight:600;line-height:1.3;letter-spacing:.02em;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease),transform var(--t-fast) var(--ease);
}
.chip b{color:var(--mint);font-variant-numeric:tabular-nums;letter-spacing:.13em;font-weight:700;}
.chip:active{transform:scale(.96);color:var(--text);border-color:var(--line-2);}

/* 入力済み（消去できる状態）：控えめなグレー */
.chip--clear{color:var(--muted-2);}
.chip--clear .chip-ico{opacity:.6;}
/* 未入力（前回コードを入れられる状態）：ミントで誘導 */
.chip--fill{color:var(--mint);border-color:rgba(110,242,200,.3);background:rgba(110,242,200,.07);}
.chip--fill .chip-ico{opacity:.85;}
.chip-ico{width:12px;height:12px;flex:0 0 auto;opacity:.7;}
.chip .chip-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.mini-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line-2);
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--text);
  transition:transform var(--t-fast) var(--ease),background var(--t) var(--ease),opacity var(--t) var(--ease);
  white-space:nowrap;
}
.mini-btn:active{transform:scale(.96);background:var(--surface-3);}
.mini-btn:disabled{opacity:.45;}
.live-dot{width:7px;height:7px;border-radius:50%;background:#ff5c7a;box-shadow:0 0 8px #ff5c7a;animation:blink 1.4s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}

/* ─────────────────────────────────────────────
   スイッチ
   ───────────────────────────────────────────── */
.switch{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 11px 4px 4px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  color:var(--muted);font-size:11.5px;font-weight:800;letter-spacing:.1em;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.switch i{position:relative;width:34px;height:20px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.13);transition:background var(--t) var(--ease);box-shadow:inset 0 1px 3px rgba(0,0,0,.6);}
.switch i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:linear-gradient(180deg,#e7ecf7,#aeb6c7);box-shadow:0 2px 5px rgba(0,0,0,.6);
  transition:left var(--t) var(--ease),background var(--t) var(--ease);}
.switch[aria-checked="true"]{background:rgba(255,179,71,.12);border-color:rgba(255,179,71,.4);color:var(--heat-1);}
.switch[aria-checked="true"] i{background:rgba(255,179,71,.4);}
.switch[aria-checked="true"] i::after{left:16px;background:linear-gradient(180deg,#ffe2b0,#ffb347);}
.switch--mint[aria-checked="true"]{background:rgba(110,242,200,.12);border-color:rgba(110,242,200,.4);color:var(--mint);}
.switch--mint[aria-checked="true"] i{background:rgba(110,242,200,.4);}
.switch--mint[aria-checked="true"] i::after{left:16px;background:linear-gradient(180deg,#dffff4,#6ef2c8);}

/* ─────────────────────────────────────────────
   スライダー
   ───────────────────────────────────────────── */
.slider{
  --pct:30%;
  margin-top:10px;
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  transition:opacity var(--t) var(--ease);
}
.slider.is-disabled{opacity:.35;pointer-events:none;}
.slider .track{position:relative;height:46px;}
.slider .track::before{
  content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:9px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.05);
}
.slider .fill{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:9px;width:var(--pct);border-radius:var(--r-pill);
  background:linear-gradient(90deg,#0f8f74,#6ef2c8);
  box-shadow:0 0 18px rgba(110,242,200,.5);
  transition:width .06s linear;
}
.slider .ticks{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:18px;}
.slider .ticks b{position:absolute;top:50%;width:2px;height:8px;margin-left:-1px;border-radius:1px;
  background:rgba(255,255,255,.22);transition:background var(--t) var(--ease),height var(--t) var(--ease);}
.slider .ticks b.on{background:rgba(255,255,255,.55);height:12px;}

.slider .thumb{
  position:absolute;left:var(--pct);top:50%;
  width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#ffffff,#cfe9e1 55%,#9fc3b8);
  box-shadow:0 8px 18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.45),
             0 0 calc(10px + var(--env) * 26px) rgba(110,242,200,calc(.25 + var(--lvl) * .5));
  transition:width .12s var(--ease),height .12s var(--ease),margin .12s var(--ease);
  display:grid;place-items:center;
}
.slider .thumb i{width:5px;height:5px;border-radius:50%;background:rgba(9,20,17,.55);}
.slider .thumb::after{
  content:'';position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(110,242,200,.5);opacity:0;transform:scale(.8);
}
.slider.is-dragging .thumb::after{opacity:1;transform:scale(1);transition:opacity .2s,transform .2s;}
.slider.is-dragging .thumb{width:42px;height:42px;margin:-21px 0 0 -21px;}

.slider .scale{display:flex;justify-content:space-between;margin-top:2px;
  font-size:10.5px;letter-spacing:.1em;color:var(--muted-2);font-variant-numeric:tabular-nums;}

.slider--heat{--pct:44%;}
.slider--heat .fill{background:linear-gradient(90deg,#ff8a3d,#ff5f6d);box-shadow:0 0 18px rgba(255,120,80,.5);}
.slider--heat .thumb{background:radial-gradient(circle at 34% 28%,#fff,#ffd6b0 55%,#ffa06a);
  box-shadow:0 8px 18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.4),0 0 22px rgba(255,140,80,.5);}
.slider--heat .thumb i{background:rgba(60,18,6,.5);}

/* ─────────────────────────────────────────────
   トースト
   ───────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(26px + var(--safe-b));
  transform:translate(-50%,16px);
  z-index:60;
  padding:11px 18px;border-radius:var(--r-pill);
  background:rgba(20,23,34,.92);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
  opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-out);
  max-width:calc(100vw - 40px);text-align:center;
}
.toast.is-show{opacity:1;transform:translate(-50%,0);}
.toast.is-warn{border-color:rgba(255,92,122,.5);color:#ffd0d8;}
.toast.is-ok{border-color:rgba(110,242,200,.45);color:#d8fff3;}

/* ─────────────────────────────────────────────
   細字・注記
   ───────────────────────────────────────────── */
.fine{
  margin:0;padding:14px 2px 22px;
  font-size:11.5px;line-height:1.7;letter-spacing:.02em;
  color:var(--muted-2);text-align:center;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .ambient .blob{animation:none;}
}