:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fffaf0;
  background: #032f46;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; overflow: hidden; background: #022c40; }
button, a { font: inherit; }
button { border: 0; cursor: pointer; }

.home-back {
  position: absolute;
  z-index: 12;
  top: 18px;
  left: 18px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 4px;
  padding: 10px 13px;
  background: rgba(3,35,51,.82);
  color: #fff;
  font-size: .72rem;
  font-weight: 950;
  text-decoration: none;
  backdrop-filter: blur(8px);
}
body.playing .home-back { display: none; }

.fish-shell { position: relative; width: min(100vw, 1280px); aspect-ratio: 16 / 9; overflow: hidden; background: #096c8d; box-shadow: 0 18px 70px rgba(0,0,0,.45); }
#oceanCanvas { display: block; width: 100%; height: 100%; }

.game-bar {
  position: absolute;
  z-index: 10;
  top: 12px;
  right: 12px;
  left: 12px;
  display: none;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(3,35,51,.78);
  backdrop-filter: blur(8px);
}

body.playing .game-bar { display: grid; }
.game-bar a, .game-bar button { border-radius: 4px; padding: 9px 12px; background: #f69a52; color: #29160d; font-size: .75rem; font-weight: 950; text-decoration: none; }
.server-status { display: flex; align-items: center; gap: 7px; color: #d7f8f2; font-size: .72rem; font-weight: 850; }
.server-status i { width: 8px; height: 8px; border-radius: 50%; background: #67e590; box-shadow: 0 0 9px #67e590; }
.role-stats { display: flex; align-items: baseline; gap: 7px; }
.role-stats span { color: #9bd7dc; font-size: .65rem; font-weight: 900; }
.role-stats strong { font-size: 1.05rem; }.role-stats #fisherLevelBadge{padding:4px 7px;border:1px solid #62dfe6;border-radius:4px;background:#153f48;color:#85f3f5;font-size:.62rem}

.sonar-map {
  position: absolute;
  z-index: 8;
  top: 74px;
  right: 20px;
  display: none;
  width: 240px;
  overflow: hidden;
  border: 1px solid rgba(134,242,226,.52);
  border-radius: 6px;
  background: rgba(1,27,42,.88);
  box-shadow: 0 9px 28px rgba(0,0,0,.34), inset 0 0 20px rgba(56,220,193,.05);
  backdrop-filter: blur(8px);
}
body.playing-fish .sonar-map { display: block; }
.sonar-map header, .sonar-map footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; }
.sonar-map header { border-bottom: 1px solid rgba(134,242,226,.2); color: #cafff5; font-size: .62rem; font-weight: 950; }
.sonar-map header b { color: #7be2a3; font-size: .56rem; }
.sonar-map header b i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #70e59c; box-shadow: 0 0 8px #70e59c; }
#sonarCanvas { display: block; width: 240px; height: 138px; }
.sonar-map footer { border-top: 1px solid rgba(134,242,226,.14); color: #9ac8c8; font-size: .5rem; font-weight: 900; }
.sonar-map footer span { display: flex; align-items: center; gap: 4px; }
.sonar-map footer i { width: 7px; height: 7px; border-radius: 50%; }
.you-dot { border: 2px solid #fff; background: #ffca58; }
.fish-dot { background: #55e1c0; }

.start-screen, .server-screen, .role-screen, .caught-screen {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: none;
}
.start-screen.active { display: flex; }
.start-screen { flex-direction: column; align-items: center; justify-content: center; padding-top: 7%; }

.sea-title {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 0 rgba(0,52,74,.36));
}
.sea-title > span { color: #fff7dc; font-size: clamp(4rem, 11vw, 8.5rem); font-weight: 1000; line-height: .7; }
.sea-title > b { position: absolute; margin-top: 145px; color: #ffb05b; font-size: clamp(1.3rem, 3.4vw, 2.6rem); letter-spacing: .28em; text-indent: .28em; text-shadow: 0 4px #8b4923; }
.title-fish { position: relative; width: clamp(36px, 7vw, 76px); height: clamp(68px, 13vw, 132px); margin: 0 5px; transform: rotate(6deg); }
.title-fish::before { position: absolute; top: 17%; left: 4%; width: 76%; height: 58%; border-radius: 55% 45% 52% 48%; background: linear-gradient(90deg, #ffd265, #f1724b); box-shadow: inset -9px -8px rgba(137,48,42,.22); content: ""; }
.title-fish::after { position: absolute; top: 0; left: 18%; width: 70%; height: 32%; background: #f1724b; clip-path: polygon(0 100%, 45% 0, 100% 100%); content: ""; }
.title-fish::before {background:linear-gradient(90deg,var(--fish-color,#f3c65e) 50%,var(--fish-fin,#ef7652));border:2px solid #764b3655}
.title-fish::after {background:var(--fish-fin,#ef7652);clip-path:polygon(0 0,48% 28%,100% 0,73% 90%,40% 100%)}
.title-fish .fish-eye {position:absolute;z-index:2;left:28%;top:56%;width:17%;height:12%;border-radius:50%;background:#fff9dc;box-shadow:0 2px 0 #32282722}
.title-fish .fish-eye::after {content:"";position:absolute;inset:25% 10% 15% 35%;border-radius:50%;background:#243b3e}
.title-fish .fish-gill {position:absolute;z-index:2;left:42%;top:39%;width:21%;height:11%;border-top:2px solid #3c384466;border-radius:50%;transform:rotate(-10deg)}
.title-fish .fish-fin {position:absolute;z-index:2;left:58%;top:33%;width:32%;height:24%;background:var(--fish-fin,#ef7652);clip-path:polygon(0 0,100% 44%,0 100%)}
.customize-fish-button {margin-top:15px;border:1px solid #ffd49b;border-radius:5px;padding:10px 20px;background:#184e61;color:#fff2d7;font-size:.72rem;font-weight:900}
.missions-button{margin-top:9px;border:1px solid #84d9cb;border-radius:5px;padding:10px 20px;background:#0b6572;color:#effff4;font-size:.72rem;font-weight:900}.missions-button span{margin-left:12px;color:#ffd568}.fish-coins{color:#ffd568;font-weight:950}#skinShopStatus{min-height:18px;margin:0;color:#ffd29c;font-size:.75rem;font-weight:800}.fish-mission-screen{position:absolute;z-index:12;inset:0;display:none;flex-direction:column;align-items:center;background:#063b50f7;padding:clamp(22px,5vh,54px);overflow:auto}.fish-mission-screen.active{display:flex}.fish-mission-screen>header{display:flex;align-items:end;justify-content:space-between;width:min(720px,100%);border-bottom:1px solid #5aa6aa;padding-bottom:13px}.fish-mission-screen header span{color:#74dfce;font-size:.72rem;font-weight:950}.fish-mission-screen h1{margin:3px 0 0;font-size:2.5rem}.fish-mission-screen header>strong{color:#ffd568}#fishMissionList{display:grid;gap:9px;width:min(720px,100%);margin:18px 0}#fishMissionList article{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;border:1px solid #4c929a;border-radius:6px;padding:14px;background:#0a5265}#fishMissionList strong,#fishMissionList small,#fishMissionList span{display:block}#fishMissionList small{margin:4px 0 9px;color:#a9d7d7}#fishMissionList progress{width:min(280px,72%);accent-color:#ffad5c}#fishMissionList span{font-size:.68rem;color:#d6eeee}#fishMissionList button{min-width:120px;border:0;border-radius:4px;padding:10px;background:#f29a52;color:#2c170c;font-weight:950}#fishMissionList button:disabled{background:#315f69;color:#86a7aa}#fishMissionsDone{padding:11px 42px;border:0;border-radius:5px;background:#edf2df;color:#164457;font-weight:950}
.fish-ranking-button{margin-top:9px;border:1px solid #f5cf75;border-radius:5px;padding:9px 19px;background:#174f61;color:#ffe39a;font-size:.72rem;font-weight:950}.fish-ranking-button svg{width:16px;height:16px}#fishRankingDialog{width:min(520px,calc(100% - 28px));max-height:calc(100dvh - 36px);overflow:auto;border:3px solid #d7aa47;border-radius:8px;padding:24px;background:#fff8df;color:#214b57}#fishRankingDialog::backdrop{background:#032936aa}#fishRankingDialog header{display:flex;align-items:center;justify-content:space-between}#fishRankingDialog h2{margin:0;font-size:1.7rem}#fishRankingDialog header button{padding:5px;background:transparent;color:#214b57}#fishRankingDialog label{display:block;font-size:.72rem;font-weight:950}#fishRankingName{width:100%;margin:6px 0 14px;padding:11px;border:2px solid #76abb1;border-radius:4px}#fishRankingList{list-style:none;padding:0;margin:8px 0}#fishRankingList li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:9px;padding:11px 4px;border-bottom:1px solid #c5d5c5}#fishRankingList li:first-child{color:#9b6e11;font-weight:950}.fish-ranking-actions,#fishRankingTabs{display:flex;gap:7px;flex-wrap:wrap}.fish-ranking-actions button,#fishRankingTabs button{padding:10px;border-radius:4px;background:#0c6974;color:white;font-weight:900}#fishRankingTabs{display:grid;grid-template-columns:1fr 1fr;margin:13px 0}#fishRankingTabs button[aria-selected=true]{background:#e0a736;color:#193f48;box-shadow:inset 0 -3px #a66c14}#fishRankingStatus{min-height:20px;font-weight:800}
@media(max-width:560px){#fishMissionList article{grid-template-columns:1fr}#fishMissionList button{width:100%}.fish-mission-screen h1{font-size:2rem}}
.fish-color-screen {position:absolute;z-index:12;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:#073e53f5;padding:18px;gap:10px;overflow:hidden}
.fish-color-screen.active {display:flex}
.fish-color-screen h1 {font-size:32px;margin:0;color:#fff3da}
.fish-color-preview {height:155px;width:200px;display:grid;place-items:center}
.fish-color-preview .title-fish {display:block;width:80px;height:140px;transform:rotate(-90deg) scale(1.25)}
#fishColorChoices,#fisherColorChoices {display:grid;grid-template-columns:repeat(8,36px);gap:12px;max-width:100%}
#fishColorChoices button,#fisherColorChoices button {width:36px;height:36px;border:3px solid #ffffff44;border-radius:50%;background:var(--swatch)}
#fishColorChoices button[aria-pressed="true"],#fisherColorChoices button[aria-pressed="true"] {outline:3px solid #fff;outline-offset:3px}
#fishColorDone {border:0;border-radius:5px;background:#f7ae63;color:#35210d;padding:12px 45px;font-weight:900;margin-top:12px}
@media(max-width:500px){#fishColorChoices,#fisherColorChoices{grid-template-columns:repeat(4,36px)}.fish-color-screen{gap:8px;padding:12px}.fish-color-preview{height:115px}.fish-color-preview .title-fish{transform:rotate(-90deg)}}
@media(max-height:600px){.role-screen{padding:2% 6%}.role-screen h1{font-size:2rem}.difficulty-picker{margin-top:8px}.difficulty-picker>small{margin-top:3px}#difficultyButtons button{min-height:34px}.role-buttons{margin-top:8px}.role-choice{min-height:118px;padding:9px}.role-choice i{height:48px;margin-bottom:4px}}

.main-play { min-width: 230px; min-height: 62px; margin-top: 105px; border: 3px solid #fff1d2; border-radius: 6px; background: #f28f47; color: #30190c; font-size: 1.2rem; font-weight: 1000; box-shadow: 0 7px 0 #a94f2c, 0 12px 24px rgba(0,0,0,.25); }
.main-play:hover { transform: translateY(-2px); background: #ffad62; }
.servers-button { margin-top: 20px; border: 1px solid rgba(255,255,255,.52); border-radius: 5px; padding: 11px 17px; background: rgba(0,54,76,.62); color: #fff; font-size: .72rem; font-weight: 950; }
.servers-button span { margin-left: 8px; color: #80eda3; }

.server-screen, .role-screen { align-items: center; justify-content: center; flex-direction: column; padding: 7% 9%; background: rgba(2,35,51,.46); backdrop-filter: blur(3px); }
.server-screen.active, .role-screen.active { display: flex; }
.panel-heading { display: flex; align-items: center; gap: 16px; width: min(900px, 100%); margin-bottom: 18px; }
.panel-heading span, .role-screen > span { color: #ffc06e; font-size: .72rem; font-weight: 950; }
.panel-heading h1, .role-screen h1 { margin: 2px 0 0; font-size: clamp(2rem, 5vw, 4rem); line-height: .9; }
.back-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 2px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(2,50,70,.8); color: #fff; font-size: 1.4rem; }
.server-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(900px, 100%); }
.server-card { position: relative; min-height: 162px; overflow: visible; border: 2px solid rgba(255,181,97,.62); border-radius: 7px; padding: 18px; background: linear-gradient(165deg, rgba(7,91,113,.94), rgba(3,45,66,.97)); color: #fff; text-align: left; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.server-card:hover { border-color: #ffbb6b; transform: translateY(-2px); }
.server-card > span { color: #91ecbc; font-size: .7rem; font-weight: 900; }
.server-card strong { display: block; margin: 9px 0 20px; font-size: 1.18rem; }
.server-card footer { display: flex; justify-content: space-between; color: #b9d6d7; font-size: .68rem; font-weight: 800; }
.crew-popover { position: absolute; z-index: 9; right: 8px; bottom: calc(100% + 8px); left: 8px; display: none; border: 1px solid rgba(255,255,255,.3); border-radius: 5px; padding: 10px; background: #062f43; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.server-card:hover .crew-popover { animation: reveal-crew .01s 1s forwards; }
.crew-popover b { display: block; margin-bottom: 6px; color: #ffc174; font-size: .65rem; }
.crew-popover small { display: block; margin-top: 3px; color: #d9edef; font-size: .62rem; }
@keyframes reveal-crew { to { display: block; } }
.server-tip { color: #c9e7e4; font-size: .7rem; }

.role-screen > span, .role-screen h1 { text-align: center; }
.difficulty-picker{width:min(520px,100%);margin-top:20px;text-align:center}.difficulty-picker>span{display:block;margin-bottom:7px;color:#9de8df;font-size:.65rem;font-weight:950}.difficulty-picker>small{display:block;min-height:18px;margin-top:7px;color:#b8dadd;font-size:.68rem;font-weight:750}#difficultyButtons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}#difficultyButtons button{min-height:42px;border:1px solid rgba(255,255,255,.28);border-bottom-width:3px;border-radius:5px;background:#0d5269;color:#c7e8e9;font-size:.75rem;font-weight:950}#difficultyButtons button[aria-pressed="true"]{border-color:#ffe0a3;background:#f29a52;color:#29180f;box-shadow:0 0 0 2px rgba(242,154,82,.2)}
.role-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(650px, 100%); margin-top: 28px; transition: transform .5s ease, opacity .35s; }
.role-buttons.departing { transform: translateY(-220px); opacity: 0; }
.role-choice { min-height: 180px; border: 4px solid #f29a52; border-radius: 7px; padding: 18px; background: rgba(2,49,68,.78); color: #fff; transition: .18s; }
.role-choice:hover { transform: translateY(-5px); background: rgba(9,87,105,.88); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.role-choice:disabled { display: none; }
.role-choice i { position: relative; display: block; width: 80px; height: 70px; margin: 0 auto 11px; }
.fisherman-choice i::before { position: absolute; top: 0; left: 20px; width: 40px; height: 40px; border-radius: 50%; background: #d8a27a; box-shadow: 0 -10px 0 -2px #f06446; content: ""; }
.fisherman-choice i::after { position: absolute; bottom: 0; left: 7px; width: 66px; height: 38px; border-radius: 25px 25px 6px 6px; background: #f2eee3; content: ""; }
.fish-choice i::before { position: absolute; top: 15px; left: 4px; width: 62px; height: 38px; border-radius: 55% 45% 45% 55%; background: #f3b34f; box-shadow: inset -10px -7px #e06a45; content: ""; }
.fish-choice i::after { position: absolute; top: 21px; right: 0; width: 28px; height: 27px; background: #e06a45; clip-path: polygon(100% 0, 100% 100%, 0 50%); content: ""; }
.role-choice strong, .role-choice small { display: block; }
.role-choice strong { font-size: 1.15rem; }
.role-choice small { margin-top: 5px; color: #a8d6d8; font-size: .68rem; }

.intro-card { position: absolute; z-index: 11; top: 28%; left: 50%; display: none; min-width: 270px; border: 2px solid #ffd28f; border-radius: 6px; padding: 18px 24px; background: rgba(4,42,58,.9); text-align: center; transform: translateX(-50%); }
.intro-card.show { display: block; animation: intro-pop 2.4s both; }
.intro-card strong, .intro-card span { display: block; }
.intro-card strong { font-size: 1.25rem; }
.intro-card span { margin-top: 5px; color: #acdadd; font-size: .75rem; }
@keyframes intro-pop { 0% { opacity:0; transform:translate(-50%,18px) scale(.9); } 15%,75% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; } }

.controls-card { position: absolute; z-index: 5; top: 102px; left: 30px; display: none; width: 180px; border: 2px solid #be5a3e; border-radius: 3px; padding: 10px; background: #f1eee1; color: #2c302e; transform: rotate(-2deg); box-shadow: 0 7px 16px rgba(0,0,0,.24); }
body.playing .controls-card { display: block; }
.controls-card > div { display: none; }
.controls-card.fisher #fisherControls, .controls-card.fish #fishControls { display: grid; gap: 7px; }
.controls-card span { font-size: .6rem; font-weight: 950; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 21px; margin-right: 3px; border: 1px solid #6f7877; border-radius: 3px; background: #fff; color: #222; font: 900 .62rem system-ui; }

.fish-hud { position: absolute; z-index: 5; right: 28px; bottom: 24px; left: 28px; display: none; grid-template-columns: auto 1fr 1fr auto; gap: 16px; align-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 10px 14px; background: rgba(2,42,60,.78); backdrop-filter: blur(7px); }
body.playing-fish .fish-hud { display: grid; }
.species-badge span, .health-block span, .evolution-block span { display: block; color: #9fd9dd; font-size: .58rem; font-weight: 950; }
.species-badge strong { display: block; margin-top: 3px; font-size: .86rem; }
.health-block, .evolution-block { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; }
.health-block > div, .evolution-block > div { height: 8px; overflow: hidden; border-radius: 99px; background: #254a56; }
.health-block i, .evolution-block i { display: block; width: 100%; height: 100%; background: #e75e55; transition: width .25s; }
.evolution-block i { background: linear-gradient(90deg, #ffb14f, #f6dc62); }
.health-block b, .evolution-block b { font-size: .62rem; }
.regen-status{min-width:86px;border-left:1px solid #ffffff2c;padding-left:13px}.regen-status span,.regen-status strong{display:block}.regen-status span{color:#9fd9dd;font-size:.55rem;font-weight:950}.regen-status strong{margin-top:3px;color:#f5d76f;font-size:.72rem}.regen-status.active strong{color:#7ff0b3}.regen-status.capped strong{color:#a9cbd1}

.caught-screen { align-items: center; justify-content: center; flex-direction: column; background: rgba(1,30,43,.74); backdrop-filter: blur(4px); }
.caught-screen.active { display: flex; }
.caught-screen span { color: #ff9f59; font-size: clamp(2.6rem, 8vw, 6rem); font-weight: 1000; text-shadow: 0 6px #7b3727; }
.caught-screen strong { margin-top: 12px; }
.caught-screen button { min-width: 190px; margin-top: 24px; border-radius: 5px; padding: 14px 18px; background: #f2a050; color: #29160c; font-weight: 950; }

@media (max-width: 760px) {
  .fish-shell { width: 100vw; min-height: 100vh; aspect-ratio: auto; }
  #oceanCanvas { width: 100%; height: 100%; }
  .server-grid { grid-template-columns: 1fr; max-height: 58vh; overflow-y: auto; }
  .role-buttons { grid-template-columns: 1fr; max-width: 310px; }
  .role-choice { min-height: 135px; }
  .game-bar { grid-template-columns: auto 1fr auto; }
  .role-stats { display: none; }
  .controls-card { top: 76px; left: 10px; width: 150px; }
  .sonar-map { top: 72px; right: 8px; width: 180px; transform: scale(.82); transform-origin: top right; }
  .fish-hud { right: 10px; bottom: 10px; left: 10px; grid-template-columns: 1fr; }
}
.fish-code-gift{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:46px;height:46px;min-width:46px;padding:0;border:2px solid #a17b16;border-radius:50%;background:#ffd956;color:#5f430d;cursor:pointer}.fish-code-gift svg{width:24px;height:24px;display:block}#fishCodeDialog{width:min(380px,calc(100% - 32px));box-sizing:border-box;border:3px solid #dca740;border-radius:8px;padding:25px;color:#234651;background:#fff8df}#fishCodeDialog::backdrop{background:#062c3b99}#fishCodeClose{float:right;padding:4px;background:transparent;border:0}#fishCodeClose svg{width:22px;height:22px}#fishCodeForm{display:grid;gap:12px}#fishCodeForm input{min-width:0;padding:12px;font:16px system-ui;border:2px solid #77a8ad;border-radius:4px;background:white;color:#234651}#fishCodeForm button{padding:12px;background:#77d7a1;color:#174333;border:0;border-radius:5px;font-weight:800}#fishSkinChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(480px,90%)}#fishSkinChoices button{padding:10px 5px;min-height:40px;font:700 11px system-ui;border:2px solid #93c2cb;border-radius:5px;color:#244b5c;background:#e9f6ea}#fishSkinChoices button[aria-pressed=true]{border-color:#dd9a2e;background:#ffe0a0}#fishSkinChoices button:disabled{opacity:.6}#fishSkinPreview{width:240px;height:129px;object-fit:contain}@media(max-height:650px){#fishSkinPreview{width:170px;height:91px}.fish-color-screen h1{font-size:25px;margin:3px}}
.fish-color-screen h2{margin:3px 0;color:#8cded1;font-size:.72rem;letter-spacing:0}.skin-category-tabs{display:grid;grid-template-columns:1fr 1fr;width:min(430px,96%);padding:4px;border:1px solid #73aeb4;border-radius:6px;background:#052f40}.skin-category-tabs button{min-height:42px;border:0;border-radius:4px;background:transparent;color:#a9d8da;font-weight:950}.skin-category-tabs button[aria-selected=true]{background:#f3a85e;color:#2b1a0d}.skin-category-panel{display:none;flex-direction:column;align-items:center;gap:8px;width:min(560px,100%);max-height:min(62vh,510px);padding:8px 4px;overflow:auto}.skin-category-panel.active{display:flex}.skin-category-panel[hidden]{display:none}#fisherSkinChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(480px,90%)}#fisherSkinChoices button{padding:10px 5px;min-height:40px;font:700 11px system-ui;border:2px solid #93c2cb;border-radius:5px;color:#244b5c;background:#e9f6ea}#fisherSkinChoices button[aria-pressed=true]{border-color:#dd9a2e;background:#ffe0a0}#fisherSkinPreview{width:240px;height:129px;object-fit:contain}.fisher-skin-section{margin:0;border:0}@media(max-height:650px){#fisherSkinPreview{width:170px;height:91px}.skin-category-panel{max-height:55vh}}