* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #082a2c; color: #f3f8ef; font-family: "Segoe UI", Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus, a:focus { outline: 2px solid #d3f4dc; outline-offset: 4px; }
#aquarium, #tank { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
#tank { display: block; }
.glass-edge { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(ellipse at center, rgba(0, 12, 16, 0) 45%, rgba(0, 12, 16, .38) 100%); pointer-events: none; }
body[data-tank-type="jellyfish"] { background: #000; }
body[data-tank-type="jellyfish"] .glass-edge, body[data-tank-type="amazon"] .glass-edge { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .38) 100%); }
.masthead { position: absolute; top: 34px; left: 42px; max-width: calc(100% - 84px); }
.heading-panel { padding: 15px 19px 13px; background: rgba(0, 0, 0, .66); border: 1px solid rgba(192, 227, 211, .2); border-radius: 12px; }
h1 { font-family: Georgia, serif; font-size: 22px; font-weight: normal; line-height: 1.2; letter-spacing: .3px; margin: 0; color: #edf5ef; }
.habitat { display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(192, 227, 211, .13); font-size: 12px; line-height: 1.6; color: #c3d9d2; }
.habitat-name { margin-right: 16px; white-space: nowrap; }
.habitat small { font-size: 11px; white-space: nowrap; color: #a8c0ba; }
.live-dot { display: inline-block; width: 6px; height: 6px; background: #b5e8b8; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.invite { position: absolute; right: 28px; bottom: 28px; width: 166px; opacity: .5; }
.invite:hover { opacity: 1; }
#qrPanel { transform: scale(.5); transform-origin: bottom right; }
.masthead, .invite { transition: transform 25s ease-in-out; }
#notice { position: absolute; left: 50%; top: 24%; max-width: 85%; transform: translateX(-50%); border-radius: 8px; padding: 12px 22px; background: rgba(5, 25, 26, .88); font-size: 13px; text-align: center; }
#notice:empty, #network:empty { display: none; }
#network { position: absolute; top: 154px; left: 42px; color: #ffe1ac; font-size: 12px; background: #173435; padding: 8px 12px; border-radius: 6px; }
.rcRoomQrCodeLink, .rcRoomQrCodeLink * { box-sizing: content-box; }
.rcRoomQrCodeLink { display: block; width: 150px; margin-left: auto; margin-right: auto; border: solid 8px #fff; border-radius: 8px; color: #fff; background-color: #fff; box-shadow: 0 0 0 1px #fff; text-align: center; transition: opacity 1s ease; text-decoration: none; box-shadow: 0 0 32px #000; transform-origin: center; transform: scale(1); animation: pop-in 500ms ease-in-out forwards; }
@keyframes pop-in { 0% { transform: scale(.5); } 66% { transform: scale(1.1); } 100% { transform: scale(1); } }
.rcTechLabel { background-color: #000; color: #fff; font-family: monospace; font-size: 13px; font-weight: bold; margin: 0 0 8px 0; padding: 4px; letter-spacing: .2em; border-radius: 8px 8px 0 0; }
.rcRoomQrCode { width: 150px; height: 150px; }
.rcRoomId { background-color: #000; color: #fff; font-family: monospace; font-size: 16px; padding: 4px; margin: 8px 0 0 0; letter-spacing: .25em; border-radius: 0 0 8px 8px; }
.lean-paint * { box-shadow: none; text-shadow: none; }
.lean-paint .glass-edge { background: none; }
.lean-paint body[data-tank-type="jellyfish"] .glass-edge, .lean-paint body[data-tank-type="amazon"] .glass-edge { background: none; }
.lean-paint .rcRoomQrCodeLink { animation: none; }
.lean-paint .masthead, .lean-paint .invite { transition: none; }
@media (min-width: 1900px) { .masthead { top: 40px; left: 48px; } h1 { font-size: 26px; } .habitat { font-size: 13px; } .habitat small { font-size: 12px; } .invite { right: 40px; bottom: 40px; } }
@media (max-height: 650px) and (min-width: 700px) { .masthead { top: 20px; left: 25px; } h1 { font-size: 20px; } .invite { right: 22px; bottom: 22px; } }
@media (orientation: portrait) { .masthead { top: 28px; left: 24px; max-width: calc(100% - 48px); } .heading-panel { padding: 13px 16px 11px; } h1 { font-size: 20px; } .habitat { font-size: 11px; } .habitat small { font-size: 10px; } .invite { right: 20px; bottom: 24px; } #network { top: 150px; left: 24px; } }
@media (max-width: 1000px), (max-height: 650px) { .heading-panel { transform: scale(.75); transform-origin: top left; } }