/* Readthrough drone modes (ocean / jungle): real drone footage under the glass. Loaded after app.css; keyed on
   html[data-drone] (set by bg/drone.js) so it also holds in the instant before data-mode is relabelled. Darker scrims than
   sky so text stays readable over bright water/leaves; glass cards and the primary-card LED rim are kept. */
html[data-drone=ocean],html[data-drone=ocean] body{background:#06223d}
html[data-drone=jungle],html[data-drone=jungle] body{background:#0b1d11}
html[data-drone] #sea,html[data-drone] #jellies{display:none}
html[data-drone=ocean] #scene::after{background:linear-gradient(180deg,rgba(2,14,30,.52),rgba(2,14,30,.28) 45%,rgba(2,14,30,.46))}
html[data-drone=jungle] #scene::after{background:linear-gradient(180deg,rgba(3,14,7,.58),rgba(3,14,7,.36) 45%,rgba(3,14,7,.52))}
html[data-drone=ocean] .card{background:linear-gradient(160deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 38%,rgba(120,210,255,.05) 100%),rgba(4,26,52,.50)}
html[data-drone=ocean] .card .body{background:radial-gradient(ellipse 75% 70% at 45% 50%,rgba(2,16,36,.42),rgba(2,16,36,.18) 70%,rgba(2,16,36,0))}
html[data-drone=ocean] .chips{background:linear-gradient(180deg,rgba(4,28,56,.85),rgba(4,28,56,.58))}
html[data-drone=ocean] .tick{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04)),rgba(4,26,52,.55)}
html[data-drone=ocean] header.top{background:radial-gradient(ellipse 90% 85% at 30% 50%,rgba(2,18,40,.55),rgba(2,18,40,.24) 70%,rgba(2,18,40,0))}
html[data-drone=jungle] .card{background:linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 38%,rgba(170,255,190,.04) 100%),rgba(6,24,12,.54)}
html[data-drone=jungle] .card .body{background:radial-gradient(ellipse 75% 70% at 45% 50%,rgba(3,16,8,.44),rgba(3,16,8,.20) 70%,rgba(3,16,8,0))}
html[data-drone=jungle] .chips{background:linear-gradient(180deg,rgba(6,26,13,.86),rgba(6,26,13,.60))}
html[data-drone=jungle] .tick{background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.03)),rgba(6,24,12,.58)}
html[data-drone=jungle] header.top{background:radial-gradient(ellipse 90% 85% at 30% 50%,rgba(3,18,8,.58),rgba(3,18,8,.26) 70%,rgba(3,18,8,0))}
:root[data-drone=ocean] .card.card--primary{     /* same cool LED light as the other modes, halo a touch stronger on deep water */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),inset 1px 0 0 rgba(255,255,255,.18),inset 0 0 18px rgba(140,230,255,.10),
    0 0 0 1.5px rgba(2,4,8,.96),0 0 0 2.5px rgba(220,250,255,.26),
    0 0 10px 3px rgba(200,248,255,.5),0 0 28px 9px rgba(130,225,255,.26),
    0 14px 34px rgba(0,10,26,.42),0 2px 6px rgba(0,10,26,.28)}
:root[data-drone=jungle] .card.card--primary{    /* dark leaves: the dark rim plus the same cool-white halo */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),inset 1px 0 0 rgba(255,255,255,.16),inset 0 0 18px rgba(170,240,220,.08),
    0 0 0 1.5px rgba(0,0,0,.97),0 0 0 2.5px rgba(225,252,255,.28),
    0 0 10px 3px rgba(205,248,255,.48),0 0 28px 9px rgba(140,225,255,.22),
    0 14px 34px rgba(0,8,2,.45),0 2px 6px rgba(0,8,2,.3)}