/* touch-action:manipulation でダブルタップズームを全面的に無効化する
   (iOSはviewportのuser-scalable=noを無視するため、ここで抑止する) */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent;
    touch-action:manipulation; }
  html,body { width:100%; height:100%; overflow:hidden; touch-action:none; overscroll-behavior:none;
    font-family:'Fredoka','Zen Maru Gothic','Hiragino Maru Gothic ProN','ヒラギノ丸ゴ ProN','Rounded Mplus 1c','BIZ UDGothic',system-ui,sans-serif;
    background:#7ec8ff; user-select:none; -webkit-user-select:none; }
  #wrap { position:fixed; inset:0; }
  canvas { display:block; }
  #fx { position:fixed; inset:0; width:100%; height:100%; z-index:8; pointer-events:none; }

  /* ---------- HUD ---------- */
  .hud { position:fixed; z-index:10; pointer-events:none; color:#fff;
    text-shadow: 2px 0 0 #2a5a8a, -2px 0 0 #2a5a8a, 0 2px 0 #2a5a8a, 0 -2px 0 #2a5a8a,
      1.5px 1.5px 0 #2a5a8a, -1.5px 1.5px 0 #2a5a8a, 1.5px -1.5px 0 #2a5a8a, -1.5px -1.5px 0 #2a5a8a; }
  #hudTop { top:calc(env(safe-area-inset-top,0px) + 10px); left:0; right:0;
    display:flex; justify-content:space-between; padding:0 14px; align-items:flex-start; }
  #hudTime { font-size:26px; font-weight:800; letter-spacing:1px; }
  #hudScore { font-size:19px; font-weight:900; color:#ffe000; margin-top:2px;
    text-shadow: 2px 0 0 #7a4a00, -2px 0 0 #7a4a00, 0 2px 0 #7a4a00, 0 -2px 0 #7a4a00,
      1.5px 1.5px 0 #7a4a00, -1.5px 1.5px 0 #7a4a00, 1.5px -1.5px 0 #7a4a00, -1.5px -1.5px 0 #7a4a00; }
  #hudBest { font-size:12px; opacity:.9; margin-top:2px; }
  #hudLap  { font-size:20px; font-weight:800; text-align:right; }
  #hudRank { font-size:15px; font-weight:900; text-align:right; margin-top:1px; color:#ffe000;
    text-shadow: 2px 0 0 #7a4a00, -2px 0 0 #7a4a00, 0 2px 0 #7a4a00, 0 -2px 0 #7a4a00,
      1.5px 1.5px 0 #7a4a00, -1.5px 1.5px 0 #7a4a00, 1.5px -1.5px 0 #7a4a00, -1.5px -1.5px 0 #7a4a00; }
  #hudSpeed { bottom:calc(env(safe-area-inset-bottom,0px) + 14px); left:50%; transform:translateX(-50%);
    font-size:30px; font-weight:800; }
  #hudSpeed small { font-size:14px; }
  #miniWrap { position:fixed; z-index:10; right:12px; top:calc(env(safe-area-inset-top,0px) + 72px);
    width:104px; height:104px; background:rgba(10,40,70,.45); border:3px solid rgba(255,255,255,.85);
    border-radius:14px; pointer-events:none; }
  #minimap { width:100%; height:100%; }
  #msg { top:26%; left:50%; transform:translate(-50%,-50%); font-size:29px; font-weight:900;
    letter-spacing:1px; color:#ffe000;
    text-shadow: 3px 0 0 #c2410c, -3px 0 0 #c2410c, 0 3px 0 #c2410c, 0 -3px 0 #c2410c,
      2.2px 2.2px 0 #c2410c, -2.2px 2.2px 0 #c2410c, 2.2px -2.2px 0 #c2410c, -2.2px -2.2px 0 #c2410c;
    opacity:0; transition:opacity .15s; white-space:nowrap; }

  /* ---------- COIN DASH ---------- */
  /* チャージゲージ(コイン枚数表示の下の小さなバー) */
  #hudCharge { width:78px; height:8px; margin-top:5px; border-radius:99px;
    background:rgba(10,40,70,.5); border:2px solid rgba(255,255,255,.8); overflow:hidden; }
  #hudCharge i { display:block; height:100%; width:0%; border-radius:99px;
    background:linear-gradient(90deg,#ffe98a,#ffc93c); transition:width .25s; }
  /* 発動ボタン(速度表示の上のピル型。ストックがある時だけ出現) */
  #coinDashBtn { position:fixed; z-index:10; left:50%;
    bottom:calc(env(safe-area-inset-bottom,0px) + 62px);
    padding:11px 28px; border-radius:999px; cursor:pointer;
    font-family:inherit; font-weight:900; font-size:16px; letter-spacing:1px; color:#7a3b00;
    background:linear-gradient(#ffe98a,#ffc93c); border:3px solid #fff;
    box-shadow:0 4px 0 #c2410c, 0 8px 14px rgba(0,0,0,.3);
    touch-action:none; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none;
    display:none; }
  #coinDashBtn b { font-size:18px; }
  #coinDashBtn.show { display:block; animation:cdPop .45s cubic-bezier(.3,1.5,.4,1); }
  #coinDashBtn:active { transform:translateX(-50%) translateY(3px) !important;
    box-shadow:0 1px 0 #c2410c; }
  #coinDashBtn.gameui { transform:translateX(-50%) scale(.6); }
  body.uiOn #coinDashBtn.gameui { transform:translateX(-50%) scale(1); }
  body.uiOn #coinDashBtn.gameui.show { pointer-events:auto; }
  @keyframes cdPop {
    0%   { transform:translateX(-50%) scale(.3); }
    60%  { transform:translateX(-50%) scale(1.15); }
    100% { transform:translateX(-50%) scale(1); }
  }

  /* ---------- 操作ボタン ---------- */
  .steerBtn { position:fixed; z-index:9; bottom:calc(env(safe-area-inset-bottom,0px) + 40px);
    touch-action:none; -webkit-touch-callout:none; /* 連打でのズーム・長押しメニューを防ぐ */
    width:88px; height:88px; border-radius:50%; border:4px solid rgba(255,255,255,.9);
    background:rgba(255,255,255,.18); color:#fff; font-size:38px; font-weight:900;
    display:flex; align-items:center; justify-content:center;
    text-shadow:2px 2px 0 rgba(0,0,0,.35); }
  .steerBtn.press { background:rgba(255,225,77,.55); }
  #btnL { left:22px; } #btnR { right:22px; }

  /* スマホ:COIN DASHと左右ボタンが接触しないよう、全体を少し詰めて隙間を確保する */
  @media (max-width: 480px) {
    #coinDashBtn { padding:10px 16px; font-size:14px; letter-spacing:.5px;
      bottom:calc(env(safe-area-inset-bottom,0px) + 70px); }
    #coinDashBtn b { font-size:16px; }
    .steerBtn { width:76px; height:76px; font-size:33px; }
    #btnL { left:12px; } #btnR { right:12px; }
  }
  /* さらに幅の狭い端末(iPhone SEなど)はもう一段詰める */
  @media (max-width: 360px) {
    #coinDashBtn { padding:9px 12px; font-size:13px; letter-spacing:.3px; }
    #coinDashBtn b { font-size:15px; }
    .steerBtn { width:68px; height:68px; font-size:30px; }
    #btnL { left:10px; } #btnR { right:10px; }
  }

  /* ---------- ゲームUIの出現演出 ---------- */
  .gameui { opacity:0; transform:scale(.6); pointer-events:none;
    transition:transform .5s cubic-bezier(.2,1.7,.35,1), opacity .3s; }
  #hudSpeed.gameui { transform:translateX(-50%) scale(.6); }
  body.uiOn .gameui { opacity:1; transform:scale(1); }
  body.uiOn #hudSpeed.gameui { transform:translateX(-50%) scale(1); }
  body.uiOn .steerBtn.gameui { pointer-events:auto; }

  /* ---------- PAUSE ---------- */
  #pauseBtn { position:fixed; z-index:11; top:calc(env(safe-area-inset-top,0px) + 10px);
    left:50%; margin-left:-21px; width:42px; height:42px; border-radius:50%;
    border:3px solid rgba(255,255,255,.9); background:rgba(10,40,70,.45);
    color:#fff; font-size:15px; font-weight:900; letter-spacing:1px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; }
  body.uiOn #pauseBtn { pointer-events:auto; }
  #pauseModal { position:fixed; inset:0; z-index:40; display:flex; align-items:center;
    justify-content:center; background:rgba(8,24,48,.62); opacity:0; pointer-events:none;
    transition:opacity .25s; }
  #pauseModal.show { opacity:1; pointer-events:auto; }
  #pauseCard { background:#fffdf4; color:#3a3a3a; border-radius:22px; border:4px solid #222;
    padding:22px 20px 18px; width:min(80vw,300px); text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.2,1.1,.35,1); }
  #pauseModal.show #pauseCard { transform:translateY(0) scale(1); }
  #pauseCard h3 { font-size:20px; font-weight:900; color:#c2410c; letter-spacing:3px; }
  .pBtn { display:block; width:100%; margin-top:12px; cursor:pointer; font-family:inherit;
    font-size:16px; font-weight:900; color:#7a3b00;
    background:linear-gradient(#ffe98a,#ffc93c); border:0; border-radius:999px;
    padding:12px 0; box-shadow:0 4px 0 #c2410c; }
  .pBtn:active { transform:translateY(3px); box-shadow:0 1px 0 #c2410c; }
  .pBtn.sub { background:#fff; color:#666; box-shadow:0 4px 0 #bbb; }

  /* ---------- カウントダウンの弾み ---------- */
  @keyframes cnPop {
    0%   { transform:scale(.2) rotate(-8deg); opacity:0; }
    55%  { transform:scale(1.28) rotate(3deg); opacity:1; }
    75%  { transform:scale(.94) rotate(-1.5deg); }
    100% { transform:scale(1) rotate(0deg); }
  }
  #countNum.pop { animation:cnPop .5s cubic-bezier(.3,1.4,.4,1); }

  /* ---------- 仕上げ演出 ---------- */
  @keyframes hudPop { 0%{transform:scale(1)} 40%{transform:scale(1.32)} 100%{transform:scale(1)} }
  #hudScore.pop, #hudRank.pop { animation:hudPop .3s ease-out; display:inline-block; }
  #flash { position:fixed; inset:0; z-index:9; pointer-events:none; background:#fff; opacity:0; }
  #flash.on { animation:flashA .32s ease-out; }
  @keyframes flashA { 0%{opacity:.4} 100%{opacity:0} }
  #confetti { position:fixed; inset:0; z-index:31; pointer-events:none; overflow:hidden; }
  .cf { position:absolute; top:-14px; width:10px; height:14px; border-radius:2px;
    animation:cfFall linear forwards; }
  @keyframes cfFall {
    0%   { transform:translateY(-20px) rotate(0deg); opacity:1; }
    100% { transform:translateY(105vh) rotate(720deg); opacity:.85; }
  }

  /* ---------- オーバーレイ ---------- */
  .overlay { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; overflow-y:auto;
    padding:30px 0; background:radial-gradient(ellipse at 50% 35%, rgba(30,80,140,.55), rgba(10,30,60,.85)); color:#fff; }
  .overlay.hidden { display:none; }
  #title h1 { font-size:min(11.5vw,56px); font-weight:900; line-height:1.05; color:#ffe000;
    text-shadow: 4px 0 0 #c2410c, -4px 0 0 #c2410c, 0 4px 0 #c2410c, 0 -4px 0 #c2410c,
      3px 3px 0 #c2410c, -3px 3px 0 #c2410c, 3px -3px 0 #c2410c, -3px -3px 0 #c2410c; }
  #title h2 { font-size:min(5vw,21px); margin-top:4px; font-weight:800;
    text-shadow: 2px 0 0 #2a5a8a, -2px 0 0 #2a5a8a, 0 2px 0 #2a5a8a, 0 -2px 0 #2a5a8a,
      1.5px 1.5px 0 #2a5a8a, -1.5px 1.5px 0 #2a5a8a, 1.5px -1.5px 0 #2a5a8a, -1.5px -1.5px 0 #2a5a8a; }
  .selLabel { margin-top:16px; font-size:12px; font-weight:900; letter-spacing:3px; opacity:.85; }
  #dogGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:7px;
    width:min(86vw,380px); }
  .dogCard { pointer-events:auto; cursor:pointer; background:rgba(255,255,255,.12);
    border:3px solid rgba(255,255,255,.45); border-radius:16px; padding:9px 6px 8px; text-align:center;
    transition:transform .12s, border-color .12s, background .12s; }
  .dogCard.sel { background:rgba(255,225,77,.22); border-color:#ffe14d; transform:scale(1.05); }
  .dogCard .sw { width:32px; height:32px; border-radius:50%; margin:0 auto 5px; border:3px solid #1a1a1a; }
  .dogCard .nm { font-size:13.5px; font-weight:900; letter-spacing:.5px; }
  .dogCard .ds { font-size:10.5px; opacity:.92; margin-top:1px; }
  #courseRow { display:flex; gap:8px; margin-top:7px; pointer-events:auto;
    flex-wrap:wrap; justify-content:center; max-width:88vw; }
  .courseChip { cursor:pointer; font-family:inherit; color:#fff; font-weight:900; font-size:13px;
    padding:8px 15px; border-radius:999px; border:3px solid rgba(255,255,255,.45);
    background:rgba(255,255,255,.12); transition:.12s; }
  .courseChip.sel { background:rgba(255,225,77,.22); border-color:#ffe14d; }
  /* コース解説のテキストマーキー(選択中コースの紹介文が右から左へ流れ続ける) */
  /* flex-noneと明示的な高さが必須:overflow:hiddenのflexアイテムはタイトル画面(flex列)で高さ0に潰されるため */
  #courseDesc { width:min(86vw,430px); margin-top:8px; overflow:hidden; white-space:nowrap;
    flex:none; height:1.6em; line-height:1.6em;
    font-size:12.5px; font-weight:700; opacity:.94;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  /* padding-left:100%で文頭を右端の外に置き、自身の幅ぶん(-100%)流し切ると継ぎ目なくループする */
  #courseDescText { display:inline-block; padding-left:100%; animation:descScroll linear infinite; }
  @keyframes descScroll { from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
  #diffRow { display:flex; gap:8px; margin-top:7px; pointer-events:auto; justify-content:center; }
  .diffChip { cursor:pointer; font-family:inherit; color:#fff; font-weight:900; font-size:14px;
    background:rgba(255,255,255,.12); border:2.5px solid rgba(255,255,255,.4);
    border-radius:14px; padding:7px 14px 6px; line-height:1.1;
    display:flex; flex-direction:column; align-items:center; gap:2px; }
  .diffChip i { font-style:normal; font-size:10px; font-weight:700; opacity:.8; }
  .diffChip.sel { background:rgba(255,225,77,.22); border-color:#ffe14d; transform:scale(1.06); }
  .bigBtn { margin-top:18px; pointer-events:auto; cursor:pointer;
    font-family:inherit; font-size:21px; font-weight:900; color:#7a3b00;
    background:linear-gradient(#ffe98a,#ffc93c); border:0; border-radius:999px;
    padding:15px 44px; box-shadow:0 6px 0 #c2410c, 0 10px 18px rgba(0,0,0,.35); }
  .bigBtn:active { transform:translateY(4px); box-shadow:0 2px 0 #c2410c; }
  .ghostBtn { margin-top:13px; pointer-events:auto; cursor:pointer; font-family:inherit;
    font-weight:900; font-size:14px; color:#fff; background:rgba(255,255,255,.14);
    border:3px solid rgba(255,255,255,.55); border-radius:999px; padding:8px 24px; }

  /* ---------- 遊び方モーダル(フワッと) ---------- */
  #howto { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
    background:rgba(8,24,48,.62); opacity:0; pointer-events:none; transition:opacity .3s; }
  #howto.show { opacity:1; pointer-events:auto; }
  #howtoCard { background:#fffdf4; color:#3a3a3a; border-radius:22px; border:4px solid #222;
    padding:20px 18px 16px; width:min(88vw,360px); box-shadow:0 12px 30px rgba(0,0,0,.4);
    transform:translateY(18px) scale(.97); transition:transform .38s cubic-bezier(.2,1.1,.35,1); }
  #howto.show #howtoCard { transform:translateY(0) scale(1); }
  #howtoCard h3 { font-size:20px; font-weight:900; color:#c2410c; text-align:center; letter-spacing:1px; }
  #howtoCard ul { list-style:none; margin:12px 0 0; font-size:13.5px; line-height:1.85; text-align:left; }
  /* ぶら下げインデントは行頭の「・」(全角=1em)と同じ幅にする(ずれると折り返し行が揃わない) */
  #howtoCard li { padding-left:1em; text-indent:-1em; }
  #howtoCard b { color:#c2410c; }
  #howtoClose { display:block; margin:16px auto 0; cursor:pointer; font-family:inherit;
    font-size:15px; font-weight:900; color:#7a3b00; background:linear-gradient(#ffe98a,#ffc93c);
    border:0; border-radius:999px; padding:10px 34px; box-shadow:0 4px 0 #c2410c; }

  #countNum { font-size:120px; font-weight:900; color:#ffe000;
    text-shadow: 5px 0 0 #c2410c, -5px 0 0 #c2410c, 0 5px 0 #c2410c, 0 -5px 0 #c2410c,
      3.5px 3.5px 0 #c2410c, -3.5px 3.5px 0 #c2410c, 3.5px -3.5px 0 #c2410c, -3.5px -3.5px 0 #c2410c; }
  #countdown { background:none; pointer-events:none; }
  #finRank { font-size:min(11vw,54px); font-weight:900; color:#ffe000;
    text-shadow: 4px 0 0 #c2410c, -4px 0 0 #c2410c, 0 4px 0 #c2410c, 0 -4px 0 #c2410c,
      3px 3px 0 #c2410c, -3px 3px 0 #c2410c, 3px -3px 0 #c2410c, -3px -3px 0 #c2410c; }
  #finTime { font-size:38px; font-weight:900; margin-top:12px; }
  #finCoins { font-size:22px; margin-top:8px; color:#ffe000; font-weight:900; }
  #finBest { font-size:15px; margin-top:6px; opacity:.9; }

  /* ---------- ローディング(柴モチーフ・CSSのみで動く) ---------- */
  #loader { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    background:linear-gradient(#3f9bf0, #8fd0ff 60%, #d8f2ff);
    transition:opacity .45s; }
  #loader.done { opacity:0; pointer-events:none; }
  .ldWrap { position:relative; width:120px; height:120px; }
  .ldFace { position:absolute; left:12px; top:20px; width:96px; height:86px;
    background:#b05e2a; border:4px solid #1a1a1a; border-radius:48% 48% 46% 46%;
    animation:ldBounce .7s ease-in-out infinite; z-index:2; }
  .ldEar { position:absolute; top:-14px; width:32px; height:32px; background:#b05e2a;
    border:4px solid #1a1a1a; z-index:1; }
  .ldEar.l { left:2px;  border-radius:62% 30% 30% 30%; transform:rotate(6deg); }
  .ldEar.r { right:2px; border-radius:30% 62% 30% 30%; transform:rotate(-6deg); }
  .ldMz { position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
    width:46px; height:32px; background:#fff3e0; border-radius:50%; }
  .ldMz::after { content:''; position:absolute; left:50%; top:2px; transform:translateX(-50%);
    width:13px; height:10px; background:#1a1a1a; border-radius:50%; }
  .ldEye { position:absolute; top:32px; width:10px; height:11px; background:#1a1a1a; border-radius:50%; }
  .ldEye.l { left:22px; } .ldEye.r { right:22px; }
  .ldBrow { position:absolute; top:18px; width:14px; height:9px; background:#fff3e0; border-radius:50%; }
  .ldBrow.l { left:20px; } .ldBrow.r { right:20px; }
  .ldShadow { position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
    width:76px; height:13px; background:rgba(10,40,70,.25); border-radius:50%;
    animation:ldShadow .7s ease-in-out infinite; }
  @keyframes ldBounce {
    0%,100% { transform:translateY(0) scale(1,1); }
    50%     { transform:translateY(-16px) scale(.96,1.05); }
  }
  @keyframes ldShadow {
    0%,100% { transform:translateX(-50%) scale(1); opacity:.9; }
    50%     { transform:translateX(-50%) scale(.72); opacity:.55; }
  }
  .ldText { margin-top:30px; font-size:17px; font-weight:900; color:#fff; letter-spacing:2px;
    text-shadow: 2px 0 0 #2a5a8a, -2px 0 0 #2a5a8a, 0 2px 0 #2a5a8a, 0 -2px 0 #2a5a8a,
      1.5px 1.5px 0 #2a5a8a, -1.5px 1.5px 0 #2a5a8a, 1.5px -1.5px 0 #2a5a8a, -1.5px -1.5px 0 #2a5a8a; }
  .ldText i { font-style:normal; animation:ldDot 1.2s infinite; }
  .ldText i:nth-child(2) { animation-delay:.2s; }
  .ldText i:nth-child(3) { animation-delay:.4s; }
  @keyframes ldDot { 0%,60%,100% { opacity:.25; } 25% { opacity:1; } }
  .ldPaws { display:flex; gap:16px; margin-top:18px; }
  .ldPaw { position:relative; width:20px; height:16px; background:#fff; border-radius:50%;
    opacity:0; animation:ldPaw 1.3s infinite; }
  /* 指は4本(外側2本は少し低く、内側2本は高めのアーチ状) */
  .ldPaw::after { content:''; position:absolute; left:-2px; top:-6px; width:7px; height:8px;
    border-radius:50%; background:#fff;
    box-shadow:5.5px -3.5px 0 #fff, 11px -3.5px 0 #fff, 16.5px 0 0 #fff; }
  .ldPaw:nth-child(1){ animation-delay:0s;  transform:rotate(-10deg); }
  .ldPaw:nth-child(2){ animation-delay:.18s; transform:rotate(9deg) translateY(-5px); }
  .ldPaw:nth-child(3){ animation-delay:.36s; transform:rotate(-9deg); }
  .ldPaw:nth-child(4){ animation-delay:.54s; transform:rotate(10deg) translateY(-5px); }
  @keyframes ldPaw { 0%,55%,100% { opacity:0; } 12%,40% { opacity:.95; } }

  /* スマホ:タイトル画面は中央寄せだと上端(タイトルやサウンドボタン)が
     見切れることがあるので、上から順に並べてスクロールで全体を見られるようにする */
  @media (max-width: 600px), (max-height: 700px) {
    #title { justify-content:flex-start;
      padding-top:calc(env(safe-area-inset-top,0px) + 58px); padding-bottom:36px; }
  }

  /* ---------- タイトルのクレジット ---------- */
  #titleCredit { margin-top:22px; font-size:11.5px; font-weight:700; letter-spacing:.04em;
    color:rgba(255,255,255,.78);
    text-shadow:1.5px 0 0 rgba(42,90,138,.85), -1.5px 0 0 rgba(42,90,138,.85),
      0 1.5px 0 rgba(42,90,138,.85), 0 -1.5px 0 rgba(42,90,138,.85); }
  #titleCredit a { pointer-events:auto; color:#fff; text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.45); padding:1px; }
  #titleCredit a:hover, #titleCredit a:focus { color:#ffe14d; border-bottom-color:#ffe14d; }
  #titleCredit .sep { opacity:.55; margin:0 .1em; }
  #titleCredit .sep2 { opacity:.5; margin:0 .55em; }

  /* ---------- サウンドON/OFF(タイトル右上) ---------- */
  #sndBtn { position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); right:14px;
    pointer-events:auto; cursor:pointer; font-family:inherit; font-weight:900; font-size:13px;
    color:#fff; background:rgba(255,255,255,.14); border:3px solid rgba(255,255,255,.55);
    border-radius:999px; padding:7px 14px; letter-spacing:1px; transition:.15s; }
  #sndBtn.off { color:rgba(255,255,255,.5); background:rgba(10,40,70,.35);
    border-color:rgba(255,255,255,.28); }