* { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; background:#05263f; touch-action:none;
  font-family:'Comic Sans MS','Chalkboard SE','Segoe UI',system-ui,sans-serif; }

#game { max-width:600px; height:100%; margin:0 auto; display:flex; flex-direction:column;
  background:linear-gradient(#0a3a5c,#05263f); }
/* on a real computer the phone-width frame just wastes the screen — use all of it */
@media (min-width:700px) { #game { max-width:none; } }

#topbar { display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:rgba(3,25,42,.85); color:#fff; border-bottom:2px solid #1a5f8a; }
#money { color:#ffd54a; font-size:22px; font-weight:bold; text-shadow:0 1px 3px rgba(0,0,0,.5); }
#title { font-size:15px; color:#9fd8ff; }
#count { font-size:16px; color:#cfeaff; }

#tank { position:relative; flex:1; overflow:hidden; }
#canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }

#bottombar { display:flex; gap:8px; padding:10px; background:rgba(3,25,42,.85); border-top:2px solid #1a5f8a; }
.barbtn { flex:1; padding:12px 6px; font-size:15px; font-family:inherit; font-weight:bold;
  border:none; border-radius:16px; color:#fff; cursor:pointer;
  background:linear-gradient(#2fa7e0,#1a6fa8); box-shadow:0 3px 0 #10517d; }
.barbtn:active { transform:translateY(2px); box-shadow:0 1px 0 #10517d; }

#zoomBtns { position:absolute; right:10px; top:36px; display:flex; flex-direction:column; gap:6px; z-index:15; }
#zoomBtns button { width:38px; height:38px; font-size:20px; font-family:inherit; font-weight:bold;
  border:none; border-radius:12px; color:#fff; cursor:pointer;
  background:rgba(3,25,42,.6); border:1px solid #2b7fb5; }
#zoomBtns button:active { background:rgba(47,167,224,.5); }
#toast { position:absolute; top:12px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.75); color:#fff; padding:8px 18px; border-radius:20px;
  font-size:15px; display:none; z-index:20; white-space:nowrap; }
#babyAnnounce { position:absolute; top:34%; left:50%; transform:translate(-50%,-50%);
  color:#ffe066; font-size:30px; font-weight:bold; text-shadow:0 2px 6px rgba(0,0,0,.6);
  display:none; z-index:20; pointer-events:none; }

#infoPanel { display:none; position:absolute; left:50%; transform:translateX(-50%);
  bottom:76px; width:min(92%,420px); background:rgba(6,36,58,.96); border:2px solid #2fa7e0;
  border-radius:18px; padding:14px 16px; color:#fff; z-index:30; text-align:center; }
#infoClose { position:absolute; top:0; right:0; background:none; border:none; color:#9fd8ff;
  font-size:24px; cursor:pointer; padding:12px 16px; line-height:1; }
#infoName { font-size:18px; font-weight:bold; color:#ffe9a8; }
#infoStatus { font-size:14px; color:#cfeaff; margin:6px 0 10px; }
#sellBtn { padding:10px 22px; font-size:16px; font-family:inherit; font-weight:bold; border:none;
  border-radius:14px; color:#fff; background:linear-gradient(#ffb347,#e08a1e); box-shadow:0 3px 0 #a5620e; cursor:pointer; }
#sellBtn:active { transform:translateY(2px); box-shadow:0 1px 0 #a5620e; }

.panel { display:none; position:absolute; inset:0; background:rgba(2,15,26,.88); z-index:40;
  overflow-y:auto; padding:20px 12px; }
.panel.open { display:block; }
.panelInner { max-width:480px; margin:0 auto; color:#fff; text-align:center; }
.panelInner h2 { margin-bottom:14px; color:#9fd8ff; }
.panelInner p { color:#cfeaff; margin-bottom:14px; }

.shopItem, .upItem { display:flex; align-items:center; gap:12px; background:rgba(20,60,90,.7);
  border:1px solid #2b7fb5; border-radius:14px; padding:10px 12px; margin-bottom:10px; text-align:left; }
/* v68: the swatch is now a TILE holding the real drawn creature (see speciesSprite),
   not a coloured blob. Square so a tall jellyfish and a long whale both fit. */
.shopSwatch { width:52px; height:52px; border-radius:14px; flex-shrink:0; overflow:hidden;
  background:#16374d; display:flex; align-items:center; justify-content:center; }
.swatchArt { width:52px; height:52px; display:block; image-rendering:auto; }
.shopInfo { flex:1; }
.shopName { font-weight:bold; font-size:16px; }
.shopSub { font-size:12px; color:#a8cfe8; }
.buyBtn { padding:9px 14px; font-size:14px; font-family:inherit; font-weight:bold; border:none;
  border-radius:12px; color:#fff; background:linear-gradient(#3ecf6e,#1e9c48); box-shadow:0 3px 0 #14713300; cursor:pointer; }
.buyBtn.cant { background:linear-gradient(#d96a6a,#a83a3a); opacity:.85; }
.buyBtn.owned { background:#3a566b; color:#9ab6c9; }
/* fish rows carry two buys: a single, and a guaranteed one-of-each PAIR */
.buyCol { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.buyCol .buyBtn { width:100%; white-space:nowrap; }
.pairBtn { background:linear-gradient(#c98ce8,#8b4fb8); font-size:13px; padding:8px 12px; }
.pairBtn.cant { background:linear-gradient(#d96a6a,#a83a3a); opacity:.85; }

.closeBtn { margin-top:8px; padding:12px 34px; font-size:16px; font-family:inherit; font-weight:bold;
  border:none; border-radius:16px; color:#fff; background:linear-gradient(#2fa7e0,#1a6fa8);
  box-shadow:0 3px 0 #10517d; cursor:pointer; }
#resetBtn { display:block; margin:18px auto 4px; padding:10px 20px; font-size:14px; font-family:inherit;
  border:none; border-radius:12px; color:#fff; background:#8a2f2f; cursor:pointer; }
#rescueBtn { padding:14px 26px; font-size:18px; font-family:inherit; font-weight:bold; border:none;
  border-radius:16px; color:#333; background:linear-gradient(#ffe066,#ffc93c); box-shadow:0 3px 0 #c79a1a; cursor:pointer; }

.decorSwatch { display:flex; align-items:center; justify-content:center; font-size:26px;
  background:rgba(10,45,70,.8) !important; border-radius:12px; }

@keyframes hueSpin { from { filter:hue-rotate(0deg);} to { filter:hue-rotate(360deg);} }
.rainbowSwatch { background:linear-gradient(135deg,#ff5f6d,#ffc371,#47e891,#4aa8ff,#c86bff); animation:hueSpin 2s linear infinite; }

/* ---- Guide panel ---- */
#nameEditor { margin-bottom:18px; }
#nameEditor label { display:block; font-size:13px; color:#9fd8ff; margin-bottom:6px; }
.nameRow { display:flex; gap:8px; justify-content:center; }
#nameInput { flex:1; max-width:260px; padding:10px 12px; font-family:inherit; font-size:16px;
  border-radius:10px; border:2px solid #1a5f8a; background:#062338; color:#eaf6ff; }
#nameInput:focus { outline:none; border-color:#4fb0ea; }
#nameSave { padding:10px 18px; font-family:inherit; font-size:15px; font-weight:bold;
  border:none; border-radius:10px; background:#2f8fd0; color:#fff; box-shadow:0 3px 0 #1b6ba3; }
#nameSave:active { transform:translateY(2px); box-shadow:0 1px 0 #1b6ba3; }
.guideRule { text-align:left; background:rgba(9,42,66,.72); border-radius:12px;
  padding:11px 13px; margin-bottom:9px; }
.guideRule b { color:#ffd54a; display:block; margin-bottom:3px; font-size:14px; }
.guideRule span { color:#cfeaff; font-size:13px; line-height:1.45; }
/* build number — deliberately small and dim; it's a diagnostic, not decoration */
#buildLine { margin-top:14px; font-size:11px; color:#5f93b8; letter-spacing:.5px; }

/* left/right pan slider — deliberately OUTSIDE the tank so it never covers the animals */
#panBar { display:none; padding:8px 12px 10px; background:rgba(3,25,42,.85); }
#panBar.on { display:block; }
#panTrack { position:relative; height:30px; border-radius:15px; background:rgba(9,45,70,.9);
  border:1px solid #1a5f8a; touch-action:none; cursor:pointer; }
#panThumb { position:absolute; top:3px; height:22px; min-width:44px; border-radius:11px;
  background:linear-gradient(#bfe6ff,#7fc4ee); border:1px solid #2b7fb5; pointer-events:none; }
/* the event log */
#logList { display:flex; flex-direction:column; gap:6px; }
.logRow { background:rgba(9,45,70,.75); border:1px solid #1a5f8a; border-radius:12px;
  padding:8px 12px; color:#e8f4ff; font-size:14px; display:flex; gap:10px; align-items:flex-start; }
.logAge { color:#7fb6d8; font-size:12px; white-space:nowrap; padding-top:2px; min-width:52px; }
.logEmpty { color:#9fd8ff; opacity:.8; padding:10px 2px; }