/* Fixed 760x690 stage, scaled as a unit to fit the window (like the original embedded canvas). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #fff; overflow: hidden; }
body { font-family: "Arial Rounded MT Bold", "VAG Rounded", "Nunito", "Trebuchet MS", Arial, sans-serif; font-weight: bold; color: #17466e; user-select: none; }
button { font: inherit; cursor: pointer; border: 0; padding: 0; color: inherit; background: none; }
input { font: inherit; }
.hidden { display: none !important; }
#stage { position: fixed; left: 0; top: 0; width: 760px; height: 690px; transform-origin: 0 0; background: #fff; overflow: hidden; }

/* top navigation */
#nav { position: absolute; left: 0; top: 0; width: 760px; height: 46px; padding: 12px 0 0 14px; display: flex; gap: 2px; }
#nav button { height: 24px; padding: 0 8px; font-size: 13px; color: #0c3f73; background: linear-gradient(#bfe2fb, #8cc6f2); border: 1px solid #9fd0f5; }
#nav button.on { background: #0c5fa8; color: #fff; border-color: #0c5fa8; }
#nav button { position: relative; }
#nav .badge { position: absolute; top: -8px; right: -6px; background: #e8402e; color: #fff; font-size: 10px; border-radius: 9px; padding: 1px 5px; border: 1px solid #fff; }
.nb .dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #7a8a9a; border: 1.5px solid #fff; }
.nb .dot.on { background: #2ee66a; box-shadow: 0 0 6px #2ee66a; }
.li .av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 60, 110, .3); }
.li .on { color: #1f9a3a; font-weight: bold; } .li .off { color: #7a8a9a; }
.chat { display: flex; flex-direction: column; height: 420px; }
#chatBtn { width: 46px; height: 62px; flex: none; margin-left: 6px; background: linear-gradient(#5ac0ea, #2a9ad8); border: 2px solid #bfe6f5; border-radius: 8px; color: #fff; font-size: 10px; line-height: 1.1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
#chatBtn:hover { filter: brightness(1.15); }
#chatBtn .ico { font-size: 20px; line-height: 1; margin-bottom: 3px; }
#chatBtn .badge { position: absolute; top: -7px; right: -7px; background: #e8402e; color: #fff; font-size: 10px; border-radius: 9px; padding: 1px 5px; border: 1px solid #fff; }
#chatPanel { position: absolute; right: 8px; bottom: 48px; width: 330px; height: 312px; padding: 8px; z-index: 12; background: rgba(232, 248, 254, .97); border: 3px solid #4aa8d8; border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 40, 80, .4); }
#chatPanel .tabs2 { position: relative; padding-right: 26px; }
#chatPanel .x { position: absolute; right: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #f0603a; color: #fff; font-size: 13px; border: 2px solid #fff; }
#chatPanel .meta { font: 11px Arial; color: #4a7fa8; margin: 2px 0 4px; }
#chatPanel .log { font-size: 12px; }
#chatPanel .msg .txt { max-width: 230px; }
#chatPanel .msg .av { width: 22px; height: 22px; border-width: 1px; flex: none; }
#chatPanel .empty { text-align: center; color: #8a9ab0; font-family: Arial; font-weight: normal; }
.msg .del { font-size: 9px; padding: 0 4px; margin-left: 4px; color: #8a9ab0; border-radius: 6px; } .msg .del:hover { background: #ffd6d0; color: #c0392b; }
.msg.del .txt { opacity: .55; text-decoration: line-through; }
.msg .deltag { margin-left: 6px; font-size: 9px; color: #fff; background: #c0392b; border-radius: 6px; padding: 0 5px; vertical-align: top; }
#joyhint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(12, 48, 84, .85); color: #fff; border-radius: 12px; padding: 14px 18px; font-size: 16px; text-align: center; z-index: 95; }
.chat .tabs2 { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.chat .tabs2 button { background: #d8f2ff; border-radius: 12px; padding: 3px 10px; font-size: 12px; color: #17466e; border: 1px solid #fff; }
.chat .tabs2 button.on { background: #1f8fd0; color: #fff; }
.chat .log { flex: 1; overflow-y: auto; background: #f4fbff; border-radius: 10px; padding: 8px; font-family: Arial; font-weight: normal; font-size: 13px; border: 1px solid #fff; }
.chat .msg { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 6px; }
.chat .msg .who { font-weight: bold; color: #1f6fd8; font-size: 12px; } .chat .msg .when { color: #8a9ab0; font-size: 10px; margin-left: 6px; }
.chat .msg.mine .who { color: #1f9a3a; }
.chat .msg .txt { background: #fff; border-radius: 10px; padding: 4px 8px; display: inline-block; max-width: 340px; word-break: break-word; }
.chat .msg.mine .txt { background: #dff7e4; }
.chat .send { display: flex; gap: 6px; margin-top: 6px; }
.chat .send input { flex: 1; font: 13px Arial; border: 1px solid #7cc4ea; border-radius: 8px; padding: 6px 8px; background: #fff; color: #17466e; }
.chests { display: flex; gap: 12px; justify-content: center; margin: 10px 0; }
.chests button { width: 120px; background: linear-gradient(#f4fbff, #cfeafa); border: 2px solid #fff; border-radius: 12px; padding: 8px 4px; font-size: 12px; color: #17466e; box-shadow: 0 2px 5px rgba(0, 60, 110, .25); transition: transform .12s; }
.chests button:hover { transform: translateY(-3px); }
.chests button.win { border-color: #1f9a3a; box-shadow: 0 0 0 3px #1f9a3a; }
.chests button.lost { opacity: .6; }
#nav button:hover:not(.on) { background: linear-gradient(#d6eeff, #a8d6f8); }
#logo { position: absolute; right: 4px; top: -1px; filter: drop-shadow(0 2px 2px rgba(12, 79, 154, .25)); }




input[type=range] { width: 150px; accent-color: #1f9a3a; }

/* HUD */
#hud { position: absolute; left: 8px; top: 48px; width: 744px; height: 60px; display: flex; gap: 8px; }
.panel { background: linear-gradient(#a8dcf5, #7cc4ea); border: 2px solid #d8f2ff; box-shadow: 0 0 0 2px #6ab4e0; border-radius: 12px; display: flex; align-items: center; height: 60px; }
#hudLeft { width: 392px; padding: 0 8px 0 30px; }
#hudRight { flex: 1; padding: 0 8px 0 14px; }
#level { font-size: 40px; color: #fff; text-shadow: 0 2px 0 #4a9ac8; width: 48px; text-align: center; margin-left: -6px; }
.pill { background: #5aaede; color: #fff; border-radius: 12px; padding: 4px 16px; font-size: 12px; border: 1px solid #d8f2ff; min-width: 84px; text-align: center; margin-left: 10px; }
.admin p { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; }
.admin button { white-space: nowrap; }
.admin .notes { max-height: 120px; overflow-y: auto; background: #fff; border-radius: 6px; padding: 4px 6px; font-family: Arial; font-weight: normal; font-size: 11px; }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 6px 0; }
.avatars button { border-radius: 50%; width: 54px; height: 54px; background: #bfe6f5; border: 3px solid #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.avatars button.on { border-color: #1f9a3a; box-shadow: 0 0 0 2px #1f9a3a; }
.nb .face canvas { display: block; }
.tag.exo { background: linear-gradient(#ffd86a, #ff9a2e); color: #5a2a00; }
.card .tro { position: absolute; right: 4px; top: 4px; background: #7a4a9a; color: #fff; font-size: 9px; border-radius: 8px; padding: 1px 6px; border: 1px solid #dcf3ff; }
.sep { width: 2px; height: 42px; background: #6ab4e0; margin: 0 10px; border-right: 1px solid #d8f2ff; }
#money { flex: 1; }
#money .row, #meters .row { display: flex; align-items: center; height: 25px; gap: 4px; }
#money .row > span:first-child { width: 62px; text-align: right; font-size: 17px; color: #17466e; }
.ic { display: inline-flex; }
.bluebtn { background: linear-gradient(#4aa0f0, #1a6ad8); color: #fff; font-size: 11px; border-radius: 10px; height: 20px; width: 96px; border: 1px solid #0c4fa8; margin-left: 4px; }
.bluebtn:hover { filter: brightness(1.15); }
.fb { background: #3b5998; padding: 0 4px; border-radius: 2px; margin-right: 2px; font-family: Arial; }
#meters label { width: 92px; text-align: right; font-size: 15px; color: #17466e; margin-right: 6px; }
.meter { width: 104px; height: 17px; background: #17567a; border-radius: 9px; border: 2px solid #5aaede; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 7px; transition: width .4s; }
.meter i.green { background: linear-gradient(#3fc02e, #1f8a1a); }
.meter i.orange { background: linear-gradient(#ffa02e, #f07010); }
#votes { text-align: center; font-size: 12px; color: #fff; display: flex; flex-direction: column; align-items: center; line-height: 1; }
#voteBtn { margin-left: 8px; background: linear-gradient(#bfe6f5, #8fcdea); border: 1px solid #5aaede; border-radius: 6px; font-size: 10px; line-height: 1.1; padding: 4px 6px; color: #17466e; }
#voteBtn:hover { background: #d8f2ff; }

/* tank view */
#view { position: absolute; left: 8px; top: 112px; width: 744px; height: 490px; border: 4px solid #7cc4ea; border-radius: 6px; overflow: hidden; background: #2a74d8; }
#tank, #mini { position: absolute; left: 0; top: 0; width: 736px; height: 482px; display: block; }
#mini { z-index: 30; cursor: pointer; }
#tankTitle { position: absolute; right: 12px; top: 6px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; text-shadow: 0 1px 2px #17466e; }
#renameTank { color: #ffe680; font-size: 14px; }
#expandBtn { background: #9fd0f0; color: #5a9ac8; font-size: 10px; border-radius: 9px; padding: 2px 10px; border: 1px solid #d8f2ff; }
#expandBtn:hover { color: #17466e; }
#cameraBtn:hover { filter: brightness(1.15); }
#banner { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); background: rgba(23, 86, 122, .78); color: #fff; padding: 6px 16px; border-radius: 8px; font-size: 14px; white-space: nowrap; z-index: 5; display: flex; gap: 8px; align-items: center; }
#banner button { background: linear-gradient(#bfe6f5, #8fcdea); color: #17466e; border-radius: 10px; padding: 3px 10px; font-size: 12px; }
#banner button[disabled] { opacity: .45; cursor: default; }
#foodCount { position: absolute; left: 392px; top: 6px; background: #1a6ad8; color: #fff; border-radius: 10px; padding: 2px 14px; font-size: 12px; border: 1px solid #d8f2ff; }

#toolbar { position: absolute; left: 6px; bottom: 2px; width: 724px; height: 40px; display: flex; align-items: center; gap: 3px; }
#toolbar button { width: 34px; height: 36px; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 6px; }
#toolbar button:hover { transform: scale(1.15); }
#toolbar button.active { background: rgba(255, 255, 255, .25); box-shadow: 0 0 0 2px #ffe680; }
#toolbar button.off { opacity: .4; }
#toolbar button.big { width: 46px; height: 46px; margin-top: -8px; }
#toolbar .badge { position: absolute; left: 14px; top: -4px; background: #f5a81f; color: #fff; border: 1px solid #a86a00; border-radius: 4px; font-size: 10px; padding: 0 4px; }
#toolbar .count { margin-left: auto; color: #fff; font-size: 16px; display: flex; align-items: center; gap: 6px; padding-right: 6px; text-shadow: 0 1px 1px #2a1a10; }
#tooltip { position: absolute; background: #fff; border: 3px solid #1f7fb8; border-radius: 14px; padding: 5px 14px; font-size: 11px; color: #17466e; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none; z-index: 20; }
#floaters { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.fly { position: absolute; transition: left .65s cubic-bezier(.3, -.3, .7, 1), top .65s cubic-bezier(.3, -.3, .7, 1), opacity .65s; }
.bump { animation: bump .35s; }
@keyframes bump { 40% { transform: scale(1.5); color: #f5a81f; } }
#coins, #pearls, #xp { display: inline-block; }
button { transition: transform .08s, filter .12s; }
button:active { transform: scale(.93); }
#toolbar button:active { transform: scale(1.02); }
.dlg { animation: pop .22s cubic-bezier(.3, 1.5, .6, 1); }
@keyframes pop { from { transform: scale(.82); opacity: 0; } }
#toast { animation: pop .2s; }
.floater { position: absolute; color: #fff; font-size: 18px; text-shadow: 0 0 3px #17466e, 0 2px 0 #17466e; animation: rise 1.4s ease-out forwards; white-space: nowrap; }
@keyframes rise { to { transform: translateY(-46px); opacity: 0; } }

/* fish card */
#fishCard { position: absolute; width: 150px; background: #c9ecf8; border: 2px solid #fff; box-shadow: 0 0 0 2px #7cc4ea; border-radius: 10px; padding: 4px 8px 8px; text-align: center; font-size: 11px; z-index: 10; }
#fishCard h4 { margin: 0; font-size: 14px; color: #0c3f73; }
#fishCard .sex { position: absolute; left: -10px; top: -10px; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 16px; line-height: 22px; border: 2px solid #fff; }
#fishCard .x { position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: #2a9ad8; color: #fff; font-size: 12px; border: 2px solid #fff; }
#fishCard .stage { height: 18px; background: #17567a; border-radius: 9px; border: 2px solid #fff; margin: 3px 0; overflow: hidden; position: relative; }
#fishCard .stage i { display: block; height: 100%; background: linear-gradient(#3fe0f5, #10b8e0); }
#fishCard .stage::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 31%, rgba(23, 86, 122, .6) 31% 33.3%); }
#fishCard .hrow { display: flex; align-items: center; justify-content: center; gap: 6px; }
#fishCard .meter { width: 64px; height: 12px; }
#fishCard .btns { display: flex; gap: 4px; justify-content: center; margin-top: 5px; flex-wrap: wrap; }
#fishCard .btns button, #decoCtl .lbl button { background: linear-gradient(#e6f6fd, #a8dcf5); border: 1px solid #5aaede; border-radius: 9px; padding: 2px 9px; font-size: 11px; color: #0c3f73; }
#fishCard .btns button:hover { background: #fff; }
#fishCard .side { position: absolute; right: -30px; top: 16px; display: flex; flex-direction: column; gap: 4px; }
#fishCard .side button { width: 24px; height: 22px; background: #e6f6fd; border: 1px solid #5aaede; border-radius: 5px; font-size: 13px; }
#decoCtl { position: absolute; z-index: 10; transform: translate(-50%, -50%); text-align: center; }
#decoCtl .ring { display: flex; align-items: center; gap: 4px; justify-content: center; }
#decoCtl .ring button { width: 22px; height: 22px; border-radius: 50%; background: #2a9ad8; color: #fff; border: 2px solid #fff; font-size: 14px; line-height: 16px; }
#decoCtl .ring .mv { width: 40px; height: 40px; background: #1f7fb8; border: 4px solid #e8262e; font-size: 22px; cursor: move; }
#decoCtl .lbl { margin-top: 6px; background: #fff; border: 2px solid #7cc4ea; border-radius: 6px; padding: 6px 10px; font-size: 11px; min-width: 90px; }
#decoCtl .lbl div { margin-bottom: 4px; }

/* bottom bar */
#bottom { position: absolute; left: 8px; top: 606px; width: 744px; height: 78px; background: linear-gradient(#a8dcf5, #7cc4ea); border: 2px solid #d8f2ff; box-shadow: 0 0 0 2px #6ab4e0; border-radius: 12px; display: flex; align-items: center; padding: 0 8px; }
#bottom .sep { height: 60px; }
#tankSel { width: 208px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 4px; justify-items: center; padding-left: 50px; }
#tankSel button { position: relative; width: 40px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
#tankSel button.on { background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 2px #fff; }
#tankSel button .lk { position: absolute; right: -4px; bottom: -3px; }
#neighborBar { flex: 1; display: flex; gap: 5px; align-items: center; overflow: hidden; }
.nb { width: 43px; height: 62px; flex: none; background: linear-gradient(#3f9ad8, #1f6fb8); border: 2px solid #bfe6f5; border-radius: 8px; color: #fff; font-size: 9px; line-height: 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: visible; }
.nb:hover { filter: brightness(1.15); }
.nb .plus { position: absolute; top: -8px; left: 50%; margin-left: -7px; width: 14px; height: 14px; border-radius: 50%; background: #2a9ad8; border: 1px solid #fff; font-size: 11px; line-height: 12px; }
.nb.harold { background: linear-gradient(#ffe9a0, #ffd24a); color: #7a4a00; }
.nb.me { background: #fff; color: #17466e; }
.nb .face { width: 26px; height: 26px; border-radius: 50%; background: #ffd9b8; border: 1px solid #a87a5a; margin-bottom: 2px; font-size: 15px; line-height: 24px; color: #5a3a22; text-align: center; }
.nb .nm { max-width: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* dialogs */
#modal { position: absolute; left: 0; top: 46px; width: 760px; height: 644px; background: rgba(23, 86, 122, .35); z-index: 50; display: flex; align-items: center; justify-content: center; }
.dlg { position: relative; background: linear-gradient(#cfeefa, #a8def5); border: 5px solid #4aa8d8; box-shadow: 0 0 0 3px #d8f2ff inset, 0 6px 20px rgba(0, 40, 80, .4); border-radius: 26px; padding: 22px 22px 18px; max-height: 620px; }
.dlg.store { width: 640px; height: 560px; padding-top: 40px; }
.dlg.mid { width: 470px; }
.dlg.small { width: 360px; text-align: center; }
.dlg h2 { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); margin: 0; background: linear-gradient(#5ac0ea, #2a9ad8); border: 4px solid #8fd4f2; border-radius: 24px; padding: 4px 34px; color: #fff; font-size: 30px; letter-spacing: 1px; -webkit-text-stroke: 1px #17567a; white-space: nowrap; }
.dlg h3 { margin: 0 0 8px; font-size: 22px; color: #1f6fd8; text-align: center; }
.dlg p { margin: 6px 0; font-size: 14px; }
.dlg .close { position: absolute; right: -14px; top: -14px; width: 38px; height: 38px; border-radius: 50%; background: #f0603a; color: #fff; font-size: 22px; border: 3px solid #fff; z-index: 2; }
.wallet { position: absolute; left: 26px; top: 14px; display: flex; gap: 8px; }
.wallet span { background: #4aa0d8; color: #fff; border-radius: 10px; padding: 1px 6px 1px 18px; font-size: 12px; display: flex; align-items: center; gap: 4px; min-width: 70px; justify-content: flex-end; }
.tabs { display: flex; gap: 3px; margin-top: 18px; }
.tabs button { flex: 1; height: 30px; background: #9fd4ee; border-radius: 10px 10px 0 0; font-size: 13px; color: #17466e; }
.tabs button.on { background: #e6f6fd; }
.subtabs { display: flex; gap: 8px; margin: 8px 0; height: 22px; }
.subtabs button { background: #4aa0d8; color: #fff; border-radius: 11px; padding: 0 22px; font-size: 12px; border: 1px solid #d8f2ff; }
.subtabs button.on { background: #e6f6fd; color: #4a8ab8; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 10px; padding-right: 26px; }
.card { background: #8fcdf0; border-radius: 8px; height: 170px; text-align: center; position: relative; padding-top: 10px; }
.card .tag { position: absolute; top: 2px; left: 0; right: 0; color: #fff; font-size: 12px; text-shadow: 0 1px 2px #17466e; z-index: 1; }
.card .nm { font-size: 11px; color: #0c3f73; height: 13px; overflow: hidden; }
.card .lock { font-size: 9px; color: #17466e; }
.price { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 13px; height: 22px; }
.card .buy { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); }
.card.dim { opacity: .75; }
.green { background: linear-gradient(#4fd05a, #1f9a3a); color: #fff; border: 2px solid #0f6a24; border-radius: 12px; padding: 1px 14px; font-size: 14px; letter-spacing: 1px; box-shadow: 0 2px 0 #0a4a18; }
button.green:hover { filter: brightness(1.12); }
button.green[disabled] { filter: grayscale(1); opacity: .6; cursor: default; }
.light { background: linear-gradient(#e6f6fd, #a8dcf5); border: 2px solid #5aaede; border-radius: 12px; padding: 2px 16px; font-size: 14px; color: #0c3f73; }
.light:hover { background: #fff; }
.pager { position: absolute; top: 50%; width: 30px; height: 60px; font-size: 34px; color: #f5a81f; -webkit-text-stroke: 1px #a86a00; }
.pager.next { right: 4px; } .pager.prev { left: -2px; }
.buybox { display: flex; gap: 20px; align-items: center; }
.buybox .left { width: 200px; text-align: center; }
.buybox .right { flex: 1; text-align: center; }
.namebox { background: #d8f2ff; border: 2px solid #fff; border-radius: 10px; padding: 8px; margin: 8px 0; font-size: 13px; }
.namebox input { width: 90%; text-align: center; background: #8fcdd8; color: #fff; border: 0; border-radius: 4px; padding: 3px; margin: 4px 0 8px; }
.sexpick { display: flex; justify-content: center; gap: 14px; align-items: center; font-size: 12px; }
.sexpick button { opacity: .5; } .sexpick button.on { opacity: 1; }
.sexpick i { display: block; width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 3px; color: #fff; font-size: 22px; line-height: 32px; font-style: normal; border: 2px solid #fff; }
.boy { color: #1f6fd8; } .boy i, .sex.m { background: #2a6fb8; } .girl { color: #e85ab8; } .girl i, .sex.f { background: #f07fd0; }
.qty { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12px; margin: 4px 0; }
.qty button { width: 20px; height: 20px; border-radius: 50%; background: #2a9ad8; color: #fff; line-height: 18px; }
.qty b { background: #4aa0d8; color: #fff; border-radius: 10px; padding: 1px 30px; }
.acts { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.list { max-height: 400px; overflow-y: auto; margin-top: 8px; padding-right: 4px; }
.li { display: flex; align-items: center; gap: 10px; background: #d8f2ff; border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; font-size: 13px; text-align: left; }
.li .grow { flex: 1; } .li small { display: block; font-size: 11px; color: #4a7fa8; }
.li.done { opacity: .6; }
.cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cols .cell { background: #d8f2ff; border-radius: 8px; text-align: center; font-size: 10px; padding: 2px; }
.cols .cell.no canvas { filter: brightness(0) opacity(.25); }
.harold { display: flex; gap: 14px; align-items: center; text-align: center; }
.code { font-size: 30px; letter-spacing: 6px; color: #1f6fd8; background: #fff; border-radius: 10px; padding: 6px 12px; user-select: text; display: inline-block; }
.lily { background: radial-gradient(ellipse at 40% 40%, #6fc45a, #3d8a34); border: 0; box-shadow: none; border-radius: 48% 52% 50% 50% / 55% 50% 50% 45%; color: #fff; width: 480px; padding: 34px 44px; text-align: center; }
.lily h3 { color: #fff; font-size: 28px; -webkit-text-stroke: 1px #7a3a00; }
.lily p { color: #17341a; }
.lily .meter { width: 180px; height: 24px; margin: 8px auto; }
#toast { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); background: #fff; border: 3px solid #1f7fb8; border-radius: 14px; padding: 8px 18px; font-size: 13px; z-index: 80; max-width: 500px; text-align: center; }
textarea, .dlg input[type=text] { user-select: text; }

/* polish pass: glossier panels, cards and buttons */
.dlg:not(.lily) { background: linear-gradient(#e6f8fe, #aee0f6 70%, #8fd0ee); box-shadow: 0 0 0 3px #eefaff inset, 0 10px 28px rgba(0, 40, 80, .45); }
.dlg h2 { background: linear-gradient(#72d2f6, #1f8fd0); box-shadow: 0 3px 0 #0c5f9a; text-shadow: 0 2px 0 #0c5f9a; }
.card { background: linear-gradient(#b2e0f9, #7cc0ea); box-shadow: 0 0 0 2px #dcf3ff inset, 0 2px 4px rgba(0, 60, 110, .25); transition: transform .12s; }
.card:hover { transform: translateY(-3px); }
.li { background: linear-gradient(#f4fbff, #cfeafa); border: 1px solid #fff; box-shadow: 0 1px 3px rgba(0, 60, 110, .2); }
.cols .cell { background: linear-gradient(#f4fbff, #cfeafa); border: 1px solid #fff; }
.green { background: linear-gradient(#86e480 0%, #42c44c 48%, #1f9a3a 52%, #188a30); text-shadow: 0 1px 0 #0a4a18; }
.light, #fishCard .btns button { box-shadow: 0 2px 0 #4a8ab8; }
.tabs button { background: linear-gradient(#bfe5f6, #8cc8ea); border: 1px solid #dcf3ff; border-bottom: 0; }
.tabs button.on { background: linear-gradient(#fff, #e6f6fd); }
.panel, #bottom { background: linear-gradient(#c6eafb, #8fd0ee 55%, #7cc4ea); }
#fishCard { background: linear-gradient(#e6f8fe, #b8e4f6); box-shadow: 0 0 0 2px #7cc4ea, 0 4px 10px rgba(0, 40, 80, .35); }
#saveTick { position: absolute; right: 18px; top: 671px; font-size: 10px; color: #1f8a3a; opacity: 0; transition: opacity .3s; z-index: 5; pointer-events: none; }
#saveTick.on { opacity: 1; }
.card .lv { position: absolute; left: 4px; top: 4px; background: #1f8fd0; color: #fff; font-size: 9px; border-radius: 8px; padding: 1px 6px; border: 1px solid #dcf3ff; }
.card.locked .lv { background: #7a8a9a; }

.gridwrap { height: 424px; overflow-y: scroll; padding: 6px 4px 36px 0; margin-right: -8px; scrollbar-width: thin; scrollbar-color: #2a9ad8 #cfeafa; }
.gridwrap::-webkit-scrollbar { width: 12px; }
.gridwrap::-webkit-scrollbar-track { background: #cfeafa; border-radius: 6px; }
.gridwrap::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #4ab8ee, #1f8fd0); border-radius: 6px; border: 2px solid #cfeafa; }
.gridwrap .grid { padding-right: 8px; }

.gridwrap { height: 404px; }

#feedAllBtn, #sellAllBtn { background: #9fd0f0; color: #2a6a98; font-size: 10px; border-radius: 9px; padding: 2px 9px; border: 1px solid #d8f2ff; }
#feedAllBtn:hover, #sellAllBtn:hover { color: #17466e; background: #d8f2ff; }
#tankTitle { gap: 6px; }

#photoBar { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 12; background: rgba(12, 48, 84, .8); color: #fff; border-radius: 12px; padding: 6px 12px; display: flex; gap: 12px; align-items: center; font-size: 12px; transition: opacity .3s; }
#photoBar:has(#phide:checked) { opacity: .12; bottom: 6px; } #photoBar:has(#phide:checked):hover { opacity: 1; }
#photoBar label { display: flex; align-items: center; gap: 4px; }
.fly.spin canvas { animation: coinspin .7s linear; }
@keyframes coinspin { to { transform: rotateY(720deg) scale(.7); } }

#photoBar { bottom: auto; top: 552px; z-index: 70; }
#photoBar:has(#phide:checked) { bottom: auto; top: 566px; }

#xp { white-space: nowrap; padding: 4px 10px; }

/* touch devices: the tank handles its own drags; everything else allows pinch-zoom so small controls can be enlarged */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#stage { touch-action: manipulation; }
#tank, #mini, #decoCtl .mv { touch-action: none; }
.dlg input[type=email], .dlg input[type=password] { text-align: center; background: #fff; color: #17466e; border: 1px solid #7cc4ea; border-radius: 6px; padding: 5px; margin: 3px 0; }

@media (pointer: coarse) { /* bigger tap targets on touch screens */
  #toolbar { gap: 5px; height: 48px; }
  #toolbar button { width: 46px; height: 46px; }
  #toolbar button.big { width: 52px; height: 52px; margin-top: -6px; }
  #nav button { height: 30px; padding: 0 12px; }
  #nav { padding-top: 8px; }
  .dlg .close { width: 46px; height: 46px; }
}

#tour { position: absolute; inset: 0; z-index: 90; }
#tour .hole { position: absolute; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(8, 30, 60, .62), 0 0 0 3px #ffe14a inset; pointer-events: none; transition: all .25s; }
#tour .tip { position: absolute; width: 348px; background: #fff; border: 3px solid #1f7fb8; border-radius: 14px; padding: 8px 10px; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; box-shadow: 0 6px 16px rgba(0, 30, 70, .4); animation: pop .2s; }
#tour .tip p { margin: 0 0 6px; }
#tour .tip small { color: #4a7fa8; margin-left: 6px; }