:root{
    --ink:#e8f1ef; --dim:#6b807d; --line:#1c2b29;
    --safe:#3fd0c9; --warn:#ffc247; --bad:#ff3d7f;
    --bg:#05090a;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);
    font-family:"Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;
    color:var(--ink); -webkit-user-select:none; user-select:none;
    /* iOS は viewport の user-scalable=no を無視するため、ダブルタップ拡大は
       touch-action で止める。キャンバスは none、UIは manipulation。 */
    touch-action:manipulation;}
  button,#chip,#panel,#toast,#ana,#photo,#shot,#actions,#boot{touch-action:manipulation;}
  #c{position:fixed;inset:0;display:block;touch-action:none;}

  #brand{position:fixed;right:calc(env(safe-area-inset-right) + 17px);top:calc(env(safe-area-inset-top) + 16px);
    z-index:5;text-align:right;pointer-events:none;white-space:nowrap;
    text-shadow:0 2px 18px rgba(0,0,0,.94);transition:opacity .65s ease,transform .65s ease;}
  #brand strong{display:block;font:700 10px/1 ui-monospace,Menlo,monospace;
    letter-spacing:.34em;word-spacing:-.36em;color:rgba(232,241,239,.78);margin-right:-.34em;}
  #brand span{display:block;margin-top:6px;font:500 7px/1 ui-monospace,Menlo,monospace;
    letter-spacing:.16em;color:rgba(155,187,182,.52);margin-right:-.16em;}
  #ogp-brand{display:none;position:fixed;left:58px;bottom:38px;z-index:8;pointer-events:none;text-shadow:0 4px 20px #000;}
  #ogp-brand strong{display:block;font:500 54px/.86 "Helvetica Neue",sans-serif;letter-spacing:.035em;word-spacing:-.16em;color:#eef7f4;}
  #ogp-brand span{display:block;margin-top:14px;color:var(--safe);font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.22em;}

  /* --- 常時見えているのは2つだけ --- */
  #chip{position:fixed;left:14px;top:calc(env(safe-area-inset-top) + 14px);z-index:6;
    display:flex;align-items:center;gap:9px;padding:9px 14px 9px 12px;
    background:rgba(6,14,15,.52);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(120,160,158,.16);border-radius:999px;cursor:pointer;
    font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.13em;color:var(--dim);
    opacity:1;pointer-events:auto;
    transition:.3s cubic-bezier(.2,.8,.2,1);}
  #chip:active{transform:scale(.96);}
  #chip.open{border-color:rgba(63,208,201,.45);color:var(--ink);}
  #chip .sep{width:1px;height:12px;background:rgba(120,160,158,.22);margin:0 2px;}
  #chip .st{display:flex;align-items:center;gap:6px;}
  #chip .st b{font:600 10px/1 "Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:.06em;color:var(--dim);}
  #chip .dot{width:7px;height:7px;border-radius:50%;background:var(--safe);
    box-shadow:0 0 8px currentColor;color:var(--safe);transition:.5s;}
  #chip .st.warn .dot{background:var(--warn);color:var(--warn);}
  #chip .st.bad  .dot{background:var(--bad);color:var(--bad);animation:pulse 1.6s infinite;}
  #chip .st.warn b,#chip .st.bad b{color:var(--ink);}
  @keyframes pulse{50%{opacity:.35;}}

  #fab{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);z-index:7;
    width:54px;height:54px;border-radius:50%;padding:0;flex:none;
    background:rgba(6,14,15,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(120,160,158,.20);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:.3s cubic-bezier(.2,.8,.2,1);}
  #fab:active{transform:scale(.94);}
  #spin{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);z-index:7;
    width:44px;height:44px;border-radius:50%;padding:0;flex:none;
    background:rgba(6,14,15,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(120,160,158,.16);color:var(--dim);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:.3s cubic-bezier(.2,.8,.2,1);}
  #spin svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:.3s;}
  #spin.on{background:rgba(63,208,201,.16);border-color:rgba(63,208,201,.45);color:var(--safe);}
  #spin.on svg{animation:spinIcon 6s linear infinite;}
  @keyframes spinIcon{to{transform:rotate(360deg);}}
  #spin:active{transform:scale(.94);}
  body.photo #spin{opacity:.55;}
  /* 撮影バーが中央にあるので、ヒントも中央へ（広い画面で左端に取り残さない） */
  body.photo #hint{bottom:calc(env(safe-area-inset-bottom) + 132px);left:16px;right:16px;text-align:center;}
  /* 水槽を眺める時間はクロームを退かせる。操作するとJS側で即座に戻す。 */
  body.ui-idle #brand{opacity:0;transform:translateY(-8px);}
  body.ui-idle #chip,body.ui-idle #panel,body.ui-idle #actions,
  body.ui-idle #fab,body.ui-idle #spin,body.ui-idle #hint{
    opacity:0!important;pointer-events:none!important;
  }
  body.ui-idle #fab,body.ui-idle #spin{transform:translateY(10px);}
  #fab .bars{position:relative;width:17px;height:11px;}
  #fab .bars i{position:absolute;left:0;height:1.5px;background:var(--ink);border-radius:2px;
    transition:.3s cubic-bezier(.2,.8,.2,1);}
  #fab .bars i:nth-child(1){top:0;width:17px;}
  #fab .bars i:nth-child(2){top:5px;width:11px;}
  #fab .bars i:nth-child(3){top:10px;width:14px;}
  #fab.scrub{border-color:var(--warn);box-shadow:0 0 0 1px rgba(255,194,71,.30);}
  #fab.scrub::after{content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
    border-radius:50%;background:var(--warn);box-shadow:0 0 7px var(--warn);}
  #fab{position:fixed;}
  #fab.open{background:var(--safe);border-color:var(--safe);}
  #fab.open .bars i{background:#04100f;}
  #fab.open .bars i:nth-child(1){top:5px;width:17px;transform:rotate(45deg);}
  #fab.open .bars i:nth-child(2){opacity:0;}
  #fab.open .bars i:nth-child(3){top:5px;width:17px;transform:rotate(-45deg);}

  /* --- 開くパネル --- */
  #panel{position:fixed;left:14px;right:14px;max-width:560px;top:calc(env(safe-area-inset-top) + 62px);z-index:8;
    background:rgba(6,14,15,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(120,160,158,.16);border-radius:14px;padding:14px 14px 12px;
    opacity:0;transform:translateY(-10px) scale(.985);pointer-events:none;
    transition:.3s cubic-bezier(.2,.8,.2,1);}
  #panel.open{opacity:1;transform:none;pointer-events:auto;}
  #meters{display:flex;gap:8px;}
  .m{flex:1;min-width:0;}
  .m .k{font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:var(--dim);}
  .m .v{font:500 17px/1.1 ui-monospace,Menlo,monospace;margin-top:5px;
    font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
  .m .bar{height:1.5px;margin-top:7px;background:rgba(120,160,158,.14);border-radius:2px;overflow:hidden;}
  .m .bar i{display:block;height:100%;width:0;background:var(--safe);border-radius:2px;transition:width .5s,background .5s;}
  #panel hr{border:0;border-top:1px solid rgba(120,160,158,.13);margin:12px 0 10px;}
  #prow2{display:flex;gap:14px;}
  #prow2 .st{flex:1;min-width:0;}
  #prow2 .k{font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:var(--dim);}
  #prow2 .v{font:500 13px/1.2 "Hiragino Sans",ui-monospace,monospace;margin-top:5px;color:var(--ink);}
  #prow2 .bar{height:1.5px;margin-top:7px;background:rgba(120,160,158,.14);border-radius:2px;overflow:hidden;}
  #prow2 .bar i{display:block;height:100%;width:0;background:var(--safe);border-radius:2px;transition:width .5s,background .5s;}
  #care-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;
    padding:9px 10px;border-radius:9px;background:rgba(63,208,201,.07);border:1px solid rgba(63,208,201,.12);}
  #care-note span{font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:var(--dim);}
  #care-note b{font:600 11px/1.3 "Hiragino Sans","Noto Sans JP",sans-serif;color:var(--safe);text-align:right;}
  #prow{display:flex;justify-content:flex-start;align-items:center;
    font:500 11px/1 ui-monospace,Menlo,monospace;color:var(--dim);}
  #prow b{color:var(--ink);font-weight:600;}

  /* --- 操作アイコン --- */
  #actions{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 82px);z-index:6;
    display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;transition:opacity .55s ease;}
  #actions .act{display:flex;align-items:center;gap:11px;
    opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
    transition:.32s cubic-bezier(.2,.8,.2,1);}
  #actions.open .act{opacity:1;transform:none;pointer-events:auto;}
  #actions.open .act:nth-child(1){transition-delay:.11s;}
  #actions.open .act:nth-child(2){transition-delay:.09s;}
  #actions.open .act:nth-child(3){transition-delay:.07s;}
  #actions.open .act:nth-child(4){transition-delay:.05s;}
  #actions.open .act:nth-child(5){transition-delay:.03s;}
  #actions.open .act:nth-child(6){transition-delay:.02s;}
  #actions.open .act:nth-child(7){transition-delay:.01s;}
  #actions.open .act:nth-child(8){transition-delay:.00s;}
  #actions.open .act:nth-child(9){transition-delay:.00s;}
  @media (max-height:520px){
    #actions{flex-direction:row-reverse;flex-wrap:wrap-reverse;justify-content:flex-start;
      max-width:calc(100vw - 100px);gap:6px 14px;bottom:calc(env(safe-area-inset-bottom) + 76px);}
    #actions .act{flex-direction:row-reverse;}
    #actions .lbl{text-align:left;}
    #actions .lbl em{text-align:left;}
    #actions button{width:40px;height:40px;}
    #actions .duo{height:40px;}
    #panel{top:calc(env(safe-area-inset-top) + 54px);}
    #ana{top:calc(env(safe-area-inset-top) + 48px);bottom:calc(env(safe-area-inset-bottom) + 72px);}
  }
  #actions .duo{display:flex;gap:6px;height:46px;align-items:center;}
  #actions .lbl{font:600 11px/1 "Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:.06em;
    color:var(--ink);text-shadow:0 1px 6px rgba(0,0,0,.8);white-space:nowrap;text-align:right;}
  #actions .lbl em{display:block;font:500 8px/1 ui-monospace,monospace;
    color:var(--dim);font-style:normal;margin-top:4px;letter-spacing:.1em;text-align:right;}
  #actions .lbl em.crowd{color:var(--warn);}
  #actions button,#actions .round-link{flex:none;width:46px;height:46px;border-radius:50%;padding:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(6,14,15,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(120,160,158,.20);color:var(--ink);transition:.2s;text-decoration:none;}
  #actions button:active,#actions .round-link:active{transform:scale(.9);}
  #actions button.on{background:var(--safe);border-color:var(--safe);color:#04100f;}
  #actions svg{width:19px;height:19px;fill:none;stroke:currentColor;
    stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

  button{appearance:none;background:none;border:0;color:inherit;cursor:pointer;font:inherit;}

  #hint{position:fixed;left:72px;right:86px;bottom:calc(env(safe-area-inset-bottom) + 30px);
    text-align:left;font:500 11px/1.5 "Hiragino Sans",ui-monospace,monospace;color:var(--dim);
    z-index:5;pointer-events:none;opacity:0;transition:opacity .35s;text-shadow:0 1px 6px rgba(0,0,0,.8);}
  #hint.show{opacity:1;}

  #toast{position:fixed;left:16px;right:16px;margin-inline:auto;max-width:820px;
    top:50%;transform:translate(0,-50%) scale(.97);z-index:9;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 120px);
    display:none;flex-direction:column;
    background:rgba(4,11,12,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(120,160,158,.18);border-radius:16px;
    padding:22px 20px;font:400 13px/1.9 "Hiragino Sans","Noto Sans JP",sans-serif;
    pointer-events:auto;opacity:0;transition:.3s cubic-bezier(.2,.8,.2,1);}
  #toast.in{opacity:1;transform:translate(0,-50%) scale(1);}
  #toast-b{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #toast h3{margin:0 0 12px;font:600 10px/1 ui-monospace,monospace;letter-spacing:.2em;color:var(--safe);}
  #toast ul{margin:0;padding-left:1.15em;}
  #toast li{margin-bottom:4px;}
  #toast .close{margin-top:18px;width:100%;padding:12px;border-radius:10px;
    border:1px solid rgba(120,160,158,.20);font:600 12px/1 "Hiragino Sans",sans-serif;color:var(--ink);}
  #toast .help-intro{margin:0 0 18px;color:var(--ink);font-size:14px;line-height:1.85;}
  #toast .help-intro b{color:var(--safe);font-weight:600;}
  #toast .care-cycle{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 18px;}
  #toast .care-step{min-width:0;padding:11px 8px 10px;border:1px solid rgba(120,160,158,.16);
    border-radius:11px;background:rgba(20,42,40,.24);text-align:center;}
  #toast .care-step i{display:flex;width:24px;height:24px;margin:0 auto 8px;border-radius:50%;
    align-items:center;justify-content:center;background:rgba(63,208,201,.14);color:var(--safe);
    font:700 10px/1 ui-monospace,monospace;font-style:normal;}
  #toast .care-step b{display:block;font-size:11px;line-height:1.35;}
  #toast .care-step span{display:block;margin-top:5px;color:var(--dim);font:500 9px/1.45 ui-monospace,monospace;}
  #toast .help-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;}
  #toast .help-card{padding:12px;border:1px solid rgba(120,160,158,.14);border-radius:11px;
    background:rgba(4,12,13,.28);}
  #toast .help-card h4{margin:0 0 7px;color:var(--safe);font:600 10px/1 ui-monospace,monospace;
    letter-spacing:.12em;}
  #toast .help-card p{margin:0;color:#c3d1ce;font-size:11px;line-height:1.75;}
  #toast .help-note{margin:14px 1px 0;padding-top:12px;border-top:1px solid rgba(120,160,158,.13);
    color:var(--dim);font-size:10px;line-height:1.8;}
  #toast .about-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;
    padding:14px 15px;border-radius:11px;background:var(--safe);color:#04100f;text-decoration:none;
    font:700 11px/1.3 "Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:.04em;}
  #toast .about-cta:visited{color:#04100f;}
  #toast .about-cta span{font:700 13px/1 ui-monospace,monospace;}
  #toast .license-link{margin:11px 1px 0;text-align:center;color:var(--dim);font-size:10px;line-height:1.7;}
  #toast .license-link a{color:var(--dim);text-decoration:none;border-bottom:1px solid rgba(120,160,158,.28);}
  #toast .data-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px;padding-top:14px;
    border-top:1px solid rgba(120,160,158,.13);}
  #toast .data-tools button{padding:11px 9px;border-radius:9px;border:1px solid rgba(120,160,158,.20);
    color:var(--ink);font:600 11px/1 "Hiragino Sans","Noto Sans JP",sans-serif;}
  #toast .data-tools button:first-child{border-color:rgba(63,208,201,.30);color:var(--safe);}

  body.about-embed #brand,body.about-embed #chip,body.about-embed #panel,
  body.about-embed #actions,body.about-embed #fab,body.about-embed #spin,
  body.about-embed #hint,body.about-embed #toast,body.about-embed #dbg,
  body.about-embed #ana,body.about-embed #photo{display:none!important;}
  body.about-embed #c{pointer-events:none;}
  body.ogp #brand,body.ogp #chip,body.ogp #panel,body.ogp #actions,
  body.ogp #fab,body.ogp #spin,body.ogp #hint{display:none!important;}
  body.ogp #ogp-brand{display:block;}

  #dbg{position:fixed;left:12px;top:calc(env(safe-area-inset-top) + 56px);z-index:12;
    width:min(320px, calc(100vw - 24px));max-height:calc(100vh - 190px);overflow:auto;
    background:rgba(8,6,14,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(180,140,255,.28);border-radius:14px;padding:12px;
    display:none;flex-direction:column;gap:8px;}
  #dbg.show{display:flex;}
  #dbg .dbg-h{display:flex;align-items:center;justify-content:space-between;
    font:700 10px/1 ui-monospace,monospace;letter-spacing:.20em;color:#c4a6ff;}
  #dbg .dbg-h button{background:none;border:none;color:#8a7aa8;font:400 18px/1 system-ui;padding:0 2px;cursor:pointer;}
  #dbg .dbg-s{font:500 10px/1.6 ui-monospace,monospace;color:#9fb3b0;white-space:pre-wrap;}
  #dbg .dbg-g{display:flex;flex-wrap:wrap;gap:5px;}
  #dbg .dbg-g button{flex:1 1 auto;min-width:88px;padding:7px 6px;border-radius:8px;cursor:pointer;
    background:rgba(180,140,255,.10);border:1px solid rgba(180,140,255,.22);color:#ddd0ff;
    font:600 10px/1 "Hiragino Sans","Noto Sans JP",sans-serif;transition:.15s;}
  #dbg .dbg-g button:active{transform:scale(.95);background:rgba(180,140,255,.26);}
  #dbg .dbg-l{font:500 9.5px/1.55 ui-monospace,monospace;color:#7d8f8d;
    border-top:1px solid rgba(180,140,255,.14);padding-top:7px;max-height:190px;overflow:auto;}
  #dbg .dbg-l b{color:#c4a6ff;font-weight:600;}
  #dbg .dbg-l .hi{color:#ffd479;}
  body.photo #dbg{display:none;}
  #ana{position:fixed;left:auto;right:12px;width:min(360px, calc(100vw - 24px));top:calc(env(safe-area-inset-top) + 56px);
    bottom:calc(env(safe-area-inset-bottom) + 84px);z-index:9;
    background:rgba(4,11,12,.90);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(120,160,158,.18);border-radius:16px;padding:16px 14px 12px;
    display:none;flex-direction:column;opacity:0;transform:translateY(8px) scale(.985);
    transition:.3s cubic-bezier(.2,.8,.2,1);pointer-events:auto;}
  #ana.in{opacity:1;transform:none;}
  #ana .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
  #ana h3{margin:0;font:600 10px/1 ui-monospace,monospace;letter-spacing:.2em;color:var(--safe);}
  #ana .rng{display:flex;gap:4px;}
  #ana .rng button{padding:5px 9px;border-radius:6px;font:600 10px/1 ui-monospace,monospace;
    border:1px solid rgba(120,160,158,.18);color:var(--dim);}
  #ana .rng button.on{background:var(--safe);border-color:var(--safe);color:#04100f;}
  #ana .body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;min-height:0;}
  #ana .card{margin-bottom:10px;}
  #ana .body{text-align:right;}
  #ana .legend{justify-content:flex-end;}
  #ana .cap{display:flex;justify-content:space-between;align-items:baseline;
    font:600 9px/1 ui-monospace,monospace;letter-spacing:.12em;color:var(--dim);margin:0 2px 5px;}
  #ana .cap b{font:500 13px/1 ui-monospace,monospace;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums;}
  #ana svg{width:100%;height:auto;display:block;}
  #ana .empty{color:var(--dim);font:500 12px/1.8 "Hiragino Sans",sans-serif;text-align:center;padding:36px 0;}
  #ana .foot{display:flex;gap:8px;margin-top:8px;}
  #ana .foot button{flex:1;padding:11px;border-radius:10px;border:1px solid rgba(120,160,158,.20);
    font:600 12px/1 "Hiragino Sans",sans-serif;color:var(--ink);}
  #ana .foot #ana-log{color:var(--safe);border-color:rgba(63,208,201,.28);}
  #ana .legend{display:flex;gap:12px;font:500 9px/1 ui-monospace,monospace;color:var(--dim);margin:2px 2px 6px;}
  #ana .legend i{display:inline-block;width:8px;height:2px;margin-right:5px;vertical-align:middle;border-radius:1px;}

  #photo{position:fixed;left:14px;right:14px;margin-inline:auto;max-width:640px;
    bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:8;
    background:rgba(6,14,15,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(120,160,158,.16);border-radius:14px;padding:12px 14px;
    display:none;flex-direction:column;gap:10px;opacity:0;transform:translateY(10px);
    transition:.3s cubic-bezier(.2,.8,.2,1);}
  #photo.in{opacity:1;transform:none;}
  #photo .row{display:flex;align-items:center;gap:10px;}
  #photo .k{font:600 9px/1 ui-monospace,monospace;letter-spacing:.12em;color:var(--dim);width:34px;}
  #photo .v{font:500 12px/1 ui-monospace,monospace;color:var(--ink);min-width:36px;text-align:right;}
  #photo input[type=range]{flex:1;appearance:none;-webkit-appearance:none;height:2px;background:rgba(120,160,158,.25);border-radius:2px;outline:none;}
  #photo input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--safe);border:0;box-shadow:0 0 0 4px rgba(63,208,201,.18);}
  #photo .btns{gap:8px;}
  #photo .btns button{flex:1;padding:11px;border-radius:10px;border:1px solid rgba(120,160,158,.20);
    font:600 12px/1 "Hiragino Sans",sans-serif;color:var(--ink);}
  #photo .btns #ph-shot{background:var(--safe);border-color:var(--safe);color:#04100f;}
  body.photo #chip,body.photo #panel,body.photo #actions,body.photo #fab,body.photo #ana{display:none!important;}
  /* 水換え中は押せないことを見せる。餌の落下位置を選んでいる間はボタンを光らせる */
  body.wc #btn-water{opacity:.45;pointer-events:none;}
  body.feedaim #btn-feed-s,body.feedaim #btn-feed-l{border-color:var(--safe);}
  #flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:40;transition:opacity .35s;}
  #shot{position:fixed;inset:0;z-index:45;display:none;align-items:center;justify-content:center;
    background:rgba(3,8,9,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    opacity:0;transition:.35s cubic-bezier(.2,.8,.2,1);padding:calc(env(safe-area-inset-top)+20px) 18px calc(env(safe-area-inset-bottom)+20px);}
  #shot.in{opacity:1;}
  #shot .card{width:min(100%,520px);max-height:100%;display:flex;flex-direction:column;gap:12px;
    transform:translateY(16px) scale(.96);transition:.45s cubic-bezier(.2,.8,.2,1);}
  #shot.in .card{transform:none;}
  #shot img{width:100%;height:auto;max-height:calc(100dvh - 190px);object-fit:contain;
    border-radius:14px;border:1px solid rgba(120,160,158,.22);box-shadow:0 24px 60px rgba(0,0,0,.55);background:#000;}
  #shot .meta{display:flex;justify-content:space-between;font:600 10px/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--dim);padding:0 2px;}
  #shot .row{display:flex;gap:8px;}
  #shot .row button{flex:1;padding:12px;border-radius:10px;border:1px solid rgba(120,160,158,.20);
    font:600 12px/1 "Hiragino Sans",sans-serif;color:var(--ink);background:rgba(6,14,15,.5);}
  #shot .row button.pri{background:var(--safe);border-color:var(--safe);color:#04100f;}

  #boot{position:fixed;inset:0;z-index:50;background:#05090a;display:flex;
    align-items:center;justify-content:center;text-align:center;padding:24px;}
  #boot .bt{font:600 12px/1 ui-monospace,monospace;letter-spacing:.24em;color:var(--safe);}
  /* 読み込み中は文字を出さず、水面に落ちた雫のような波紋だけを見せる */
  #boot{transition:opacity .55s ease;}
  #boot.gone{opacity:0;pointer-events:none;}
  #boot > div{animation:b-in .9s cubic-bezier(.2,.8,.2,1) .1s both;}
  #boot .bl{position:relative;width:112px;height:112px;margin:26px auto 0;}
  #boot .bl b{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
    border-radius:50%;background:rgba(150,238,226,.85);animation:b-drop 3s ease-in-out infinite;}
  #boot .bl i{position:absolute;left:50%;top:50%;border-radius:50%;
    border:1px solid rgba(150,238,226,.85);transform:translate(-50%,-50%);opacity:0;
    animation:b-ripple 3s cubic-bezier(.15,.65,.3,1) infinite;}
  #boot .bl i:nth-of-type(2){animation-delay:1s;}
  #boot .bl i:nth-of-type(3){animation-delay:2s;}
  @keyframes b-in{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
  @keyframes b-drop{0%,100%{opacity:.25;}42%{opacity:1;}}
  @keyframes b-ripple{
    0%{width:6px;height:6px;opacity:0;}
    12%{opacity:.75;}
    100%{width:112px;height:112px;opacity:0;}}
  /* 状況テキストは読み上げには残し、画面には出さない。失敗時と長引いたときだけ表に出す */
  #boot .bs{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  #boot.err .bs,#boot.slow .bs{position:static;width:auto;height:auto;overflow:visible;clip-path:none;
    white-space:normal;margin-top:16px;font:500 13px/1.6 "Hiragino Sans",sans-serif;color:var(--ink);}
  #boot .be{margin:14px 0 0;white-space:pre-wrap;word-break:break-all;text-align:left;
    font:500 10px/1.6 ui-monospace,monospace;color:var(--bad);max-height:38vh;overflow:auto;}
  #boot .bh{display:none;}
  #boot.err .bh,#boot.slow .bh{display:block;margin-top:16px;
    font:500 10px/1.6 ui-monospace,monospace;color:var(--dim);}
  #boot.err .bl{display:none;}
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;}
    #boot > div,#boot .bl b,#boot .bl i{animation:none!important;}
    #boot .bl i{width:64px;height:64px;opacity:.35;}
    #boot .bl i:nth-of-type(2){width:96px;height:96px;opacity:.16;}
    #boot .bl i:nth-of-type(3){display:none;}
  }
  @media (max-width:520px){
    #brand span{display:none;}
    #toast .help-grid{grid-template-columns:1fr;}
  }