/* ===== Painted UI (image frames, buttons, tiles) + clean bold font ===== */
:root { --ui-font: "Noto Sans", "Segoe UI", sans-serif; }
html body, html body .num, .font-cinzel, .font-display, html body .btn, html body .label, html body .tag, html body .panel-head, .sf-tab, .sf-item-n, .sf-side-h, .sf-kicker, .sf-purse-l,
.fr-tile-label, .fr-chip, .fr-btn, .g-tab, .wm-label, .wm-pop-s, html body input, html body select, html body button { font-family: var(--ui-font) !important; }
html body .panel-head, .sf-side-h { letter-spacing: .06em !important; font-weight: 700 !important; font-size: 13px !important; color: #ffe08a !important; text-shadow: 0 1px 2px #000, 0 0 8px rgba(255, 200, 80, .35) !important; }
.modal-banner *, .sf-banner-t, .wm-pop-t, .font-deco, .font-display, h1, h2 { font-family: "Lilita One", var(--ui-font) !important; font-weight: 400 !important; letter-spacing: .04em !important; }

.fr-modal { background: none !important; border: 40px solid transparent !important; border-image: url(/art/hud/panel.webp) 195 fill / 40px / 0 stretch !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .7) !important; backdrop-filter: none !important; }
.fr-modal > div:first-of-type { margin: -22px -18px 0; }
.fr-modal .overflow-y-auto { margin: 0 -18px -22px; padding-left: 14px !important; padding-right: 14px !important; }
@media (max-width: 640px) { .fr-modal { border-width: 22px !important; border-image-width: 22px !important; } .fr-modal > div:first-of-type { margin: -10px -10px 0; } .fr-modal .overflow-y-auto { margin: 0 -10px -10px; } }
.fr-modal-head { border-bottom: 1px solid rgba(255, 210, 110, .35) !important; }
.fr-modal-x { width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 50% !important; background: url(/art/hud/close.webp) center / contain no-repeat !important; color: transparent !important; transition: transform .15s ease, filter .2s; }
.fr-modal-x:hover { transform: translateY(-50%) scale(1.1) !important; filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 80, 60, .6)); }
.fr-modal-x svg { display: none; }

[data-testid="action-bar"].fr-panel { border: 18px solid transparent !important; border-image: url(/art/hud/panel.webp) 195 fill / 18px / 0 stretch !important; background: none !important; padding: 0 8px !important; }

html body .btn, .fr-btn, .sf-tab, .g-tab { border: 12px solid transparent !important; border-image: url(/art/hud/btn_dark.webp) 70 140 fill / 12px 18px / 0 stretch !important; background: none !important; border-radius: 0 !important;
  color: #f4e6c4 !important; font-weight: 700 !important; text-shadow: 0 1px 2px #000 !important; padding: 0 8px !important; min-height: 34px; box-shadow: none !important; transition: filter .15s, transform .12s !important; }
html body .btn { min-width: 76px; }
html body .btn-sm { min-height: 30px; min-width: 64px; font-size: 12px !important; padding: 0 2px !important; border-width: 8px 13px !important; border-image-width: 8px 13px !important; }
html body .btn:hover:not(:disabled), .fr-btn:hover, .sf-tab:hover, .g-tab:hover { filter: brightness(1.18) drop-shadow(0 0 6px rgba(255, 200, 90, .45)); background: none !important; }
html body .btn:active:not(:disabled), .fr-btn:active { transform: translateY(1px) scale(.97) !important; }
html body .btn-gold, .sf-tab.on, .g-tab.on, .fr-btn:not(.fr-btn-dark) { border-image: url(/art/hud/btn_gold.webp) 80 140 fill / 12px 18px / 0 stretch !important; color: #2a1503 !important; text-shadow: 0 1px 0 rgba(255, 240, 200, .6) !important; }
html body .btn:disabled { filter: grayscale(.8) brightness(.7); }
.sf-tab { border-bottom-width: 12px !important; margin-bottom: 2px; }

.fr-tile { background: url(/art/hud/tile.webp) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.fr-tile-label { color: #fff1c9 !important; text-shadow: 0 1px 2px #000, 0 0 6px #000 !important; font-weight: 700 !important; }
.sf-item-art, .sf-deal > img { background-image: url(/art/hud/tile.webp) !important; background-size: 100% 100% !important; border: 0 !important; }
.sf-deal > img { padding: 5px; }

/* player card */
.pcard { position: relative; width: 360px; height: 169px; background: url(/art/hud/card2.webp) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.pcard-face { position: absolute; left: 33px; top: 33px; width: 98px; height: 98px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #3a8fb8, #0a2a44); box-shadow: inset 0 0 12px rgba(0,0,0,.8); }
.pcard-face img { width: 100%; height: 100%; object-fit: cover; }
.pcard-lv { position: absolute; left: 62px; top: 138px; width: 40px; text-align: center; font: 800 13px var(--ui-font); color: #2a1503; padding: 1px 0; border-radius: 10px; background: linear-gradient(180deg, #ffe7a0, #d39a2c); border: 1px solid #fff2c4; box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.pcard-name { position: absolute; left: 172px; top: 42px; width: 170px; font: 800 15px var(--ui-font); color: #fff3cf; text-shadow: 0 1px 2px #000, 0 0 8px rgba(255, 200, 80, .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-place { position: absolute; left: 172px; top: 62px; width: 170px; font: 600 10.5px var(--ui-font); color: #9fe9c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.pcard-bars { position: absolute; left: 172px; top: 82px; width: 168px; display: flex; flex-direction: column; gap: 2px; }
.pcard-bar { position: relative; height: 9px; border-radius: 5px; background: rgba(0, 0, 0, .65); box-shadow: inset 0 1px 2px #000; overflow: hidden; }
.pcard-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2bc9ff, #8ff4ff); border-radius: 5px; }
.pcard-bar span { position: absolute; inset: 0; font: 800 8px/9px var(--ui-font); color: #fff; text-align: center; text-shadow: 0 1px 1px #000; }
.pcard-bar.xp { height: 4px; } .pcard-bar.xp i { background: linear-gradient(90deg, #b44dff, #ff8af0); }
.pcard-ic { position: absolute; top: 142px; } .pcard-ic.gold { left: 187px; } .pcard-ic.pearl { left: 307px; }
.pcard-v { position: absolute; top: 139px; font: 800 13px var(--ui-font); color: #fff3cf; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.pcard-v.gold { left: 212px; width: 86px; } .pcard-v.pearl { left: 328px; }

/* quick tackle (right edge) */
.qt { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 6; }
.qt-slot { position: relative; width: 62px; height: 62px; display: grid; place-items: center; background: url(/art/hud/tile.webp) center / 100% 100% no-repeat; transition: transform .15s, filter .2s; }
.qt-slot:hover, .qt-slot.on { transform: scale(1.07); filter: drop-shadow(0 0 8px rgba(255, 210, 110, .6)); }
.qt-slot img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.qt-none { color: #a8987a; }
.qt-cap { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font: 800 9.5px var(--ui-font); color: #fff1c9; white-space: nowrap; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, .75); text-shadow: 0 1px 1px #000; }
.qt-pop { position: absolute; right: 72px; top: 50%; transform: translateY(-50%); width: 230px; max-height: 300px; overflow-y: auto; padding: 6px; border: 16px solid transparent; border-image: url(/art/hud/panel.webp) 195 fill / 16px / 0 stretch; }
.qt-pop-h { font: 800 12px var(--ui-font); color: #ffe08a; padding: 0 2px 5px; text-shadow: 0 1px 2px #000; }
.qt-empty { font-size: 12px; color: #a8987a; padding: 4px; }
.qt-row { width: 100%; display: flex; align-items: center; gap: 7px; padding: 4px 5px; border-radius: 4px; font: 700 12px var(--ui-font); color: #f4e6c4; text-align: left; border: 1px solid transparent; transition: background-color .15s; }
.qt-row:hover:not(:disabled) { background: rgba(214, 172, 92, .15); border-color: rgba(214, 172, 92, .4); }
.qt-row.on { color: #ffe08a; } .qt-row img { width: 26px; height: 26px; object-fit: contain; }
.qt-n { font-size: 10.5px; color: #a8987a; }
@media (max-width: 640px) { .qt { top: 40%; gap: 6px; } .qt-slot { width: 46px; height: 46px; } .qt-slot img { width: 30px; height: 30px; } .qt-pop { right: 54px; width: 200px; } }

/* chat */
.chatbox { position: absolute; left: 8px; bottom: 120px; width: 340px; z-index: 6; border: 16px solid transparent; border-image: url(/art/hud/panel.webp) 195 fill / 16px / 0 stretch; padding: 0 2px; }
.chat-tabs { display: flex; gap: 3px; align-items: center; }
.chat-tab { font: 800 11.5px var(--ui-font); color: #cbbd9e; padding: 3px 10px; border-radius: 4px 4px 0 0; border-bottom: 2px solid transparent; transition: color .15s; }
.chat-tab.on { color: #ffe08a; border-bottom-color: #e2bb6a; } .chat-tab:hover { color: #fff1c9; }
.chat-toggle { margin-left: auto; color: #e8d6ae; }
.chat-list { height: 118px; overflow-y: auto; margin-top: 4px; padding: 4px 2px; font: 600 12.5px/1.35 var(--ui-font); color: #efe6d2; }
.chat-line { word-break: break-word; padding: 1px 0; } .chat-line b { color: #8fd0f0; } .chat-line b.me { color: #ffe08a; } .chat-line b.sys { color: #9fe9c0; } .chat-line .lv { font-size: 10px; color: #a8987a; }
.chat-empty { color: #a8987a; font-size: 12px; padding: 6px 2px; }
.chat-input { display: flex; gap: 4px; margin-top: 4px; }
.chat-input input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border-radius: 4px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(214, 172, 92, .35); color: #fff3cf; font: 600 12.5px var(--ui-font); outline: none; }
.chat-input input:focus { border-color: #e2bb6a; }
.chat-input button { width: 34px; border-radius: 4px; display: grid; place-items: center; color: #2a1503; background: linear-gradient(180deg, #ffe7a0, #c7963c); }
@media (max-width: 640px) { .chatbox { width: 250px; bottom: 96px; } .chat-list { height: 100px; } }

/* big action button */
.fish-btn.fish-btn-img { background-color: transparent !important; background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important; border: 0 !important; box-shadow: none !important; border-radius: 50% !important; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); transition: transform .15s, filter .2s; }
.fish-btn.fish-btn-img:hover:not(:disabled) { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(255, 210, 110, .7)); }
.fish-btn-label { align-self: end; margin-bottom: -6px; font: 900 13px var(--ui-font); letter-spacing: .06em; color: #2a1503; padding: 1px 10px; border-radius: 10px; background: linear-gradient(180deg, #ffe7a0, #d39a2c); border: 1px solid #fff2c4; box-shadow: 0 2px 4px rgba(0, 0, 0, .6); white-space: nowrap; }

/* travel map extras */
.wm-exp { font: 800 9px var(--ui-font); color: #08202c; background: #7ff3ff; padding: 0 5px; border-radius: 6px; margin-bottom: 1px; box-shadow: 0 0 10px #7ff3ff; }
.wm-banner:empty { display: none; }
.wm-banner > * { border: 18px solid transparent !important; border-image: url(/art/hud/panel.webp) 195 fill / 18px / 0 stretch !important; background: none !important; box-shadow: none !important; }

.fight-msg { font: 800 19px var(--ui-font) !important; letter-spacing: .02em; text-shadow: 0 2px 0 #000, 0 0 3px #000, 0 0 10px rgba(0, 0, 0, .9) !important; -webkit-text-fill-color: currentColor !important; }

/* readable dialogs over the game (species info etc.) */
.fixed.inset-0 > .panel, .fixed.inset-0 > div > .panel, [role="dialog"] .panel { background: linear-gradient(180deg, #17130f, #0b0908) !important; border: 1px solid rgba(214, 172, 92, .55) !important; }

/* world map */
.wm { position: relative; width: 100%; aspect-ratio: 1264 / 848; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px rgba(214, 172, 92, .5), 0 10px 30px rgba(0, 0, 0, .6); user-select: none; }
.wm-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wm-shimmer { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .22; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(180, 240, 255, .5) 24px, transparent 28px 60px); background-size: 200% 200%; animation: wm-sh 9s linear infinite; }
@keyframes wm-sh { to { background-position: 120px 60px; } }
.wm-clouds { position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), transparent) 10% 20% / 22% 12% no-repeat, radial-gradient(closest-side, rgba(255, 255, 255, .45), transparent) 60% 35% / 26% 13% no-repeat, radial-gradient(closest-side, rgba(255, 255, 255, .4), transparent) 30% 70% / 20% 10% no-repeat; animation: wm-cl 60s linear infinite; }
@keyframes wm-cl { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.wm-boat { position: absolute; width: 4.2%; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5)); }
.wm-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; z-index: 2; transition: transform .15s; }
.wm-pin img { width: clamp(18px, 2.6vw, 34px); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); animation: wm-bob 2.6s ease-in-out infinite; }
.wm-pin:hover, .wm-pin.on { transform: translate(-50%, -100%) scale(1.15); z-index: 3; }
.wm-pin.locked img { filter: grayscale(1) brightness(.7) drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); }
.wm-pin.here img { filter: drop-shadow(0 0 10px #7ff3ff) drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); }
@keyframes wm-bob { 50% { transform: translateY(-4px); } }
.wm-label { margin-top: 1px; font: 700 clamp(9px, 1vw, 12px) var(--ui-font); color: #fff4d2; white-space: nowrap; padding: 0 6px; border-radius: 8px; background: rgba(0, 0, 0, .62); text-shadow: 0 1px 2px #000; }
.wm-pin.locked .wm-label { color: #c9bfae; }
.wm-pop { position: absolute; z-index: 5; width: 230px; padding: 10px; border: 16px solid transparent; border-image: url(/art/hud/panel.webp) 195 fill / 16px / 0 stretch; text-align: center; }
.wm-pop-img { width: 100%; height: 80px; object-fit: cover; border-radius: 3px; margin-bottom: 6px; }
.wm-pop-t { font-size: 15px; font-weight: 700; color: #ffe9a3; }
.wm-pop-s { font-size: 12px; color: #d9ccb0; }

[data-testid="page-modal"] .flex:has(> .btn) { flex-wrap: wrap; }
.sf-wallet { background: #0b0908 !important; }
@media (max-width: 640px) {
  .wm-pop { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 78%; padding: 4px; }
  .wm-pop-img { height: 54px; }
  .wm-label { display: none; }
  .wm-pin.here .wm-label, .wm-pin.on .wm-label { display: block; }
}

/* Tackle-shop look for every menu panel: framed dark card, painted header ribbon, framed rows */
html body .fr-modal .panel { background: linear-gradient(180deg, rgba(22, 48, 86, .7), rgba(6, 14, 30, .85)) !important; border: 1px solid rgba(226, 180, 90, .5) !important; border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 230, 180, .08), 0 6px 16px rgba(0, 0, 0, .45) !important; }
html body .fr-modal .panel-head { border: 10px solid transparent !important; border-image: url(/art/hud/btn_dark.webp) 70 140 fill / 10px 16px / 0 stretch !important; background: none !important; margin: -1px -1px 4px; padding: 0 8px !important; min-height: 40px; }
html body .fr-modal .panel .panel { background: rgba(0, 0, 0, .32) !important; box-shadow: none !important; }
.fr-modal .panel > div > .flex.gap-3:not(.panel-head), .fr-modal [data-testid^="quest-"], .fr-modal [data-testid^="story-"], .fr-modal [data-testid^="crew-row"], .fr-modal [data-testid^="ach-"] {
  border-radius: 4px; }
.fr-modal [data-testid^="quest-"]:not(button), .fr-modal [data-testid^="story-"]:not(button) { background: linear-gradient(180deg, rgba(40, 80, 130, .35), rgba(4, 12, 26, .5)); border: 1px solid rgba(226, 180, 90, .3); padding: 8px; margin-bottom: 6px; }
html body .fr-modal .label, html body .fr-modal .tag { color: #e2bb6a !important; }
html body .fr-modal select { background: rgba(0, 0, 0, .5) !important; border: 1px solid rgba(214, 172, 92, .4) !important; color: #f4e6c4 !important; border-radius: 4px !important; }
.fr-modal .bar, .fr-modal [class*="progress"] { border-radius: 4px; }
html body .btn-sm { padding: 0 6px !important; }

/* Tackle-shop look for every menu panel: framed dark card, painted header ribbon, framed rows */
html body .fr-modal .panel { background: linear-gradient(180deg, rgba(22, 48, 86, .7), rgba(6, 14, 30, .85)) !important; border: 1px solid rgba(226, 180, 90, .5) !important; border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 230, 180, .08), 0 6px 16px rgba(0, 0, 0, .45) !important; }
html body .fr-modal .panel-head { border: 10px solid transparent !important; border-image: url(/art/hud/btn_dark.webp) 70 140 fill / 10px 16px / 0 stretch !important; background: none !important; margin: -1px -1px 4px; padding: 0 8px !important; min-height: 40px; }
html body .fr-modal .panel .panel { background: rgba(0, 0, 0, .32) !important; box-shadow: none !important; }
.fr-modal .panel > div > .flex.gap-3:not(.panel-head), .fr-modal [data-testid^="quest-"], .fr-modal [data-testid^="story-"], .fr-modal [data-testid^="crew-row"], .fr-modal [data-testid^="ach-"] {
  border-radius: 4px; }
.fr-modal [data-testid^="quest-"]:not(button), .fr-modal [data-testid^="story-"]:not(button) { background: linear-gradient(180deg, rgba(40, 80, 130, .35), rgba(4, 12, 26, .5)); border: 1px solid rgba(226, 180, 90, .3); padding: 8px; margin-bottom: 6px; }
html body .fr-modal .label, html body .fr-modal .tag { color: #e2bb6a !important; }
html body .fr-modal select { background: rgba(0, 0, 0, .5) !important; border: 1px solid rgba(214, 172, 92, .4) !important; color: #f4e6c4 !important; border-radius: 4px !important; }
.fr-modal .bar, .fr-modal [class*="progress"] { border-radius: 4px; }
html body .btn-sm { padding: 0 6px !important; }

.fr-modal .overflow-y-auto { background: radial-gradient(ellipse at top, rgba(40, 90, 150, .25), transparent 60%); }
.g-card, .sf-item { background: linear-gradient(180deg, rgba(36, 74, 124, .45), rgba(6, 14, 28, .75)) !important; }
.sf-body { background: rgba(6, 16, 32, .5) !important; }
.sf-side, .sf-deal { background: rgba(10, 26, 50, .6) !important; }
.sf-tab:not(.on) { color: #e6f1ff !important; }
.wm-pin img { width: clamp(14px, 1.9vw, 26px); }
html body .panel-head, .sf-side-h { color: #ffd27a !important; }
.look-edit-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #2a1503; background: linear-gradient(180deg, #ffd88a, #e08a1e); border: 2px solid #fff0c8; box-shadow: 0 3px 6px rgba(0, 0, 0, .6); transition: transform .15s; }
.look-edit-btn:hover { transform: scale(1.1); }

/* toasts + popups in the game theme */
html body [data-sonner-toast] { border: 14px solid transparent !important; border-image: url(/art/hud/panel.webp) 195 fill / 14px / 0 stretch !important; background: none !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .55) !important; color: #f2f6ff !important; font: 700 13.5px var(--ui-font) !important; padding: 6px 10px !important; border-radius: 0 !important; }
html body [data-sonner-toast] [data-title] { font: 800 14px var(--ui-font) !important; color: #ffd27a !important; text-shadow: 0 1px 2px #000; text-transform: none !important; letter-spacing: 0 !important; }
html body [data-sonner-toast] [data-description] { color: #dbe8ff !important; font: 600 12.5px var(--ui-font) !important; text-transform: none !important; }
html body [data-sonner-toast] [data-icon] svg { color: #7dd87d; }
html body [data-sonner-toast][data-type="error"] [data-title] { color: #ff9a8a !important; }
.fixed.inset-0 > .panel, .fixed.inset-0 > div > .panel, [role="dialog"] .panel, [data-testid="look-dialog"] > div {
  border: 30px solid transparent !important; border-image: url(/art/hud/panel.webp) 195 fill / 30px / 0 stretch !important; background: none !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .7) !important; border-radius: 0 !important; }
@media (max-width: 640px) { .fixed.inset-0 > .panel, .fixed.inset-0 > div > .panel, [role="dialog"] .panel, [data-testid="look-dialog"] > div { border-width: 18px !important; border-image-width: 18px !important; } }

/* reel button: one control, navy when idle, orange while held */
html body .reel-btn { border: 14px solid transparent !important; border-image: url(/art/hud/btn_dark.webp) 70 140 fill / 14px 24px / 0 stretch !important; background: none !important; color: #f2f6ff !important; min-height: 58px; font: 800 17px var(--ui-font) !important; text-shadow: 0 1px 2px #000 !important; box-shadow: none !important; }
html body .reel-btn.holding { border-image: url(/art/hud/btn_gold.webp) 80 140 fill / 14px 24px / 0 stretch !important; color: #2a1503 !important; text-shadow: 0 1px 0 rgba(255, 240, 200, .6) !important; background: none !important; }
.pcard-ic { width: 18px; height: 18px; object-fit: contain; margin-top: -2px; }

.wm-dot { display: block; width: clamp(22px, 3vw, 42px); height: clamp(22px, 3vw, 42px); border-radius: 50%; overflow: hidden; border: 3px solid #e2b45a; box-shadow: 0 0 0 2px #3a240f, 0 4px 8px rgba(0, 0, 0, .6); background: #0a2a44; }
.wm-dot img { width: 100% !important; height: 100% !important; object-fit: cover; animation: none !important; filter: none !important; }
.wm-pin.locked .wm-dot { filter: grayscale(1) brightness(.6); }
.wm-pin.here .wm-dot { border-color: #7ff3ff; box-shadow: 0 0 0 2px #08303f, 0 0 14px #7ff3ff; }

.pcard-bars { padding-left: 16px; }
.pcard-zap { position: absolute; left: -1px; top: -2px; filter: drop-shadow(0 0 4px rgba(255, 210, 63, .8)); z-index: 1; }
.pcard-bar.energy { height: 11px; border: 1px solid rgba(255, 210, 63, .6); }
.pcard-bar.energy i { background: linear-gradient(180deg, #ffe66b, #ffb31a 60%, #e88a00); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.pcard-bar.energy span { line-height: 9px; font-size: 8.5px; color: #2a1503; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }

/* live duel */
.duel-board { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 10px; padding: 4px 8px; border: 16px solid transparent; border-image: url(/art/hud/panel.webp) 195 fill / 16px / 0 stretch; }
.duel-side { display: flex; flex-direction: column; align-items: flex-start; min-width: 120px; font-family: var(--ui-font); }
.duel-side.right { align-items: flex-end; }
.duel-side b { font-size: 13px; color: #fff3cf; text-shadow: 0 1px 2px #000; }
.duel-side.lead b { color: #ffd23f; }
.duel-kg { font: 400 22px "Lilita One", var(--ui-font); color: #fff; text-shadow: 0 2px 0 #000; line-height: 1.1; }
.duel-side small { font-size: 10.5px; color: #a9c1e0; }
.duel-clock { font: 400 26px "Lilita One", var(--ui-font); color: #ffd23f; min-width: 110px; text-align: center; text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 210, 63, .5); }
.duel-result { width: min(92vw, 420px); padding: 14px; }
.duel-result-t { font: 400 40px "Lilita One", var(--ui-font); text-shadow: 0 3px 0 #000; }
.duel-result-t.win { color: #ffd23f; } .duel-result-t.lose { color: #ff8a7a; } .duel-result-t.draw { color: #bfe3ff; }
.duel-final { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.duel-final > div { display: flex; flex-direction: column; padding: 8px; border-radius: 6px; background: rgba(6, 16, 32, .6); border: 1px solid rgba(226, 180, 90, .35); }
.duel-final > div.me { border-color: #ffd23f; }
.duel-final b { color: #fff3cf; font-size: 13px; } .duel-final span { font: 400 22px "Lilita One", var(--ui-font); color: #fff; } .duel-final small { color: #a9c1e0; font-size: 10.5px; }
.duel-reward { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 400 22px "Lilita One", var(--ui-font); color: #ffd23f; }
.duel-reward img { width: 26px; height: 26px; }
@media (max-width: 640px) { .duel-board { top: 180px; gap: 4px; } .duel-side { min-width: 84px; } .duel-kg { font-size: 17px; } .duel-clock { font-size: 20px; min-width: 76px; } }
img.px-icon { display: inline-block; vertical-align: middle; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }

/* one navy + brass palette for every menu (overrides the old brown theme vars) */
html body { --bg: #071427 !important; --bg-2: rgba(10, 28, 54, .78) !important; --bg-deep: #040c1a !important; --panel: rgba(12, 30, 58, .85) !important; --panel-2: rgba(18, 42, 78, .8) !important;
  --panel-hi: rgba(30, 64, 110, .85) !important; --border: rgba(226, 180, 90, .32) !important; --border-2: rgba(226, 180, 90, .55) !important; }
.fr-modal [class*="bg-[var(--bg-2)]"] { border-radius: 6px; }

/* FishyLand homepage */
.fl-home { min-height: 100vh; color: #eaf3ff; font-family: var(--ui-font); background: linear-gradient(180deg, rgba(4, 18, 36, .55), rgba(4, 14, 30, .92)), url(/art/shots/harbour.jpg) center top / cover fixed; }
.fl-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; }
.fl-logo-sm { height: 44px; width: auto; }
.fl-online { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 12px; background: rgba(0, 0, 0, .45); }
.fl-online i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }
.fl-main { max-width: 1120px; margin: 0 auto; padding: 0 16px 30px; display: flex; flex-direction: column; align-items: center; }
.fl-mascot-row { display: flex; align-items: flex-end; gap: 10px; margin-top: 4px; }
.fl-mascot { height: 210px; width: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.fl-bubble { max-width: 300px; margin-bottom: 110px; padding: 10px 14px; border-radius: 14px; background: #fff6dc; color: #2a1a08; font-weight: 700; font-size: 14px; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); position: relative; }
.fl-bubble::before { content: ""; position: absolute; left: -10px; bottom: 16px; border: 10px solid transparent; border-right-color: #fff6dc; border-left: 0; }
.fl-logo { width: min(520px, 86vw); height: auto; margin-top: -30px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); }
.fl-grid { width: 100%; display: grid; gap: 18px; margin-top: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fl-grid { grid-template-columns: 400px minmax(0, 1fr); } }
html body .panel.fl-card, html body .panel.fl-login { padding: 16px 18px !important; border: 30px solid transparent !important; border-image: url(/art/hud/panel.webp) 195 fill / 30px / 0 stretch !important; background: none !important; }
.fl-login { width: min(92vw, 380px); }
.fl-h { font: 400 26px "Lilita One", var(--ui-font) !important; color: #ffd27a; text-align: center; margin-bottom: 10px; text-shadow: 0 2px 0 #000; }
.fl-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.fl-shot { margin: 0; border-radius: 8px; overflow: hidden; border: 3px solid #e2b45a; box-shadow: 0 0 0 2px #3a240f, 0 8px 18px rgba(0, 0, 0, .55); background: #0a2a44; }
.fl-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .3s; }
.fl-shot:hover img { transform: scale(1.04); }
.fl-shot figcaption { padding: 6px 10px; font-weight: 700; font-size: 12.5px; color: #fff3cf; background: rgba(6, 16, 32, .9); }
.fl-foot { display: flex; gap: 16px; justify-content: center; padding: 16px; font-size: 12.5px; color: #a9c1e0; }
.fl-foot a:hover { color: #ffd27a; }
@media (max-width: 640px) { .fl-mascot { height: 150px; } .fl-bubble { margin-bottom: 70px; font-size: 12.5px; max-width: 200px; } .fl-shots { grid-template-columns: 1fr; } }