* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
    --frame-bottom: 0px;
    --frame-left: 0px;
    --frame-right: 0px;
    --accent: #0f766e;
    --orange: #f28c00;
}
html, body { height: 100%; }
/* Inside the site iframe a fixed footer bar (~40px) covers the bottom; the site hides it when height <= 400px. */
html.in-frame { --frame-bottom: 44px; }
@media (max-height: 400px) { html.in-frame { --frame-bottom: 0px; } }

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #cfe6f5;
    color: #fff;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
#pano { position: fixed; inset: 0; z-index: 0; }
#pano svg { width: 100%; height: 100%; display: block; }

#app {
    position: relative; z-index: 1;
    height: calc(100vh - var(--frame-bottom));
    height: calc(100dvh - var(--frame-bottom));
    padding: 0 var(--frame-right) 0 var(--frame-left);
    display: flex; justify-content: center;
}
#stage {
    position: relative; width: 100%; max-width: 480px; height: 100%;
    background: #0b2a3f; overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35), 0 20px 60px rgba(0, 30, 60, .45);
}
.screen { display: none; position: absolute; inset: 0; flex-direction: column; }
.screen.active { display: flex; }

/* ---------- Start ---------- */
#start-screen { justify-content: center; align-items: center; padding: 20px; text-align: center; background: linear-gradient(160deg, #0f4c75 0%, #0b2a3f 60%, #061a2b 100%); }
#start-screen h1 { font-size: 42px; letter-spacing: 2px; text-shadow: 3px 3px 6px rgba(0, 0, 0, .35); margin-bottom: 6px; }
#start-screen .desc { font-size: 16px; line-height: 1.45; max-width: 330px; margin-bottom: 18px; opacity: .95; }
.logo { font-size: 64px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); margin-bottom: 4px; }
.profile { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; font-size: 13px; }
.profile span { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); border-radius: 14px; padding: 4px 10px; }
.profile b { color: #ffe08a; }

.btn {
    display: block; width: 270px; max-width: 100%; border: none; padding: 13px 20px; margin: 6px auto;
    font-size: 18px; font-weight: bold; border-radius: 50px; cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2); transition: transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: #fff; color: #0b2a3f; }
.btn-secondary { background: rgba(255, 255, 255, .16); color: #fff; border: 2px solid rgba(255, 255, 255, .7); }
.btn-ghost { background: transparent; color: #fff; box-shadow: none; text-decoration: underline; font-size: 15px; padding: 6px; }
.btn-orange { background: linear-gradient(#ffb020, #f28c00); color: #3a2200; box-shadow: 0 4px 0 #a65d00, 0 8px 18px rgba(0, 0, 0, .3); }
.btn:disabled { opacity: .45; cursor: default; }

.icon-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12);
    color: #fff; font-size: 17px; font-weight: bold; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.icon-spacer { width: 36px; flex-shrink: 0; }

/* ---------- Bars ---------- */
.topbar {
    height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 10px; flex-shrink: 0; z-index: 5;
    background: linear-gradient(#1e3a5f, #15304f); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.topbar .title { flex: 1; text-align: center; font-weight: bold; font-size: 17px; text-shadow: 1px 1px 2px rgba(0, 0, 0, .4); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .title small { display: block; font-size: 11px; opacity: .85; font-weight: normal; letter-spacing: .5px; }
.timer { font-variant-numeric: tabular-nums; font-weight: bold; font-size: 17px; background: rgba(0, 0, 0, .25); padding: 4px 9px; border-radius: 14px; }
.timer.low { background: #c0392b; animation: pulse .6s infinite alternate; }
.taskbar {
    height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; flex-shrink: 0; z-index: 5;
    background: #fff6dc; color: #4a3b14; font-size: 14px; font-weight: bold; border-bottom: 3px solid #e9c96a; white-space: nowrap; overflow: hidden;
}
.taskbar .prog { background: #4a3b14; color: #ffe08a; border-radius: 10px; padding: 2px 8px; font-size: 13px; }
.taskbar .prog.done { background: #1e8449; color: #fff; }
.taskbar .stars { margin-left: auto; font-size: 17px; letter-spacing: 2px; color: #f59e0b; }
.taskbar .stars .off { color: #cbb98a; }

/* ---------- Game ---------- */
#scene { flex-shrink: 0; width: 100%; display: block; }
#water { flex: 1; min-height: 0; width: 100%; display: block; touch-action: none; cursor: pointer; }
.hud { flex-shrink: 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(#0a2235, #071a2a); z-index: 5; }
.chips { display: flex; gap: 8px; margin-bottom: 8px; }
.chip {
    display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 255, 255, .3); border-radius: 22px;
    padding: 4px 10px 4px 4px; font-size: 13px; font-weight: bold; white-space: nowrap; color: #fff; font-family: inherit; cursor: pointer;
}
.chip img, .chip .ico { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #333; flex-shrink: 0; }
.chip.fly { flex: 1; min-width: 0; }
.chip.fly .nm { overflow: hidden; text-overflow: ellipsis; }
.chip .arrow { margin-left: auto; opacity: .7; }
.chip.coin { background: #5b3d0a; border-color: #f3c452; color: #ffe08a; }
.action {
    height: 58px; border-radius: 30px; border: none; width: 100%; cursor: pointer; font-family: inherit;
    background: linear-gradient(#ffb020, #f28c00); color: #3a2200; font-weight: 900; font-size: 17px; letter-spacing: .5px;
    box-shadow: 0 5px 0 #a65d00, 0 8px 18px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; gap: 8px; touch-action: none;
}
.action small { font-size: 11px; font-weight: bold; opacity: .8; letter-spacing: 0; }
.action.hold { transform: translateY(3px); box-shadow: 0 2px 0 #a65d00, 0 4px 10px rgba(0, 0, 0, .35); }
.action.fight { background: linear-gradient(#5be0a0, #17b26a); color: #05341d; box-shadow: 0 5px 0 #0b7a45, 0 8px 18px rgba(0, 0, 0, .35); }
.action.fight.hold { box-shadow: 0 2px 0 #0b7a45, 0 4px 10px rgba(0, 0, 0, .35); }
.action.bite { background: linear-gradient(#ff6b6b, #d62828); color: #fff; animation: pulse .25s infinite alternate; }
.action.drill { background: linear-gradient(#9ad8ff, #4aa3df); color: #072a44; box-shadow: 0 5px 0 #1e6a9e, 0 8px 18px rgba(0, 0, 0, .35); }

.tension {
    display: none; position: absolute; left: 14px; right: 14px; top: 96px; z-index: 6;
    background: rgba(5, 20, 35, .8); border: 2px solid rgba(255, 255, 255, .4); border-radius: 14px; padding: 8px 10px 10px;
}
.tension.show { display: block; }
.tension .lbl { display: flex; justify-content: space-between; font-size: 12px; font-weight: bold; margin-bottom: 5px; }
.tension .bar { height: 16px; border-radius: 8px; background: linear-gradient(90deg, #9ad8ff 0 45%, #ffe066 45% 72%, #ff5a5a 72%); position: relative; }
.tension .needle { position: absolute; top: -6px; width: 6px; height: 28px; background: #fff; border: 2px solid #0b2a3f; border-radius: 3px; margin-left: -3px; left: 30%; }
.tension .dist { margin-top: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.tension .dist i { display: block; height: 100%; width: 50%; background: #5be0a0; transition: width .1s linear; }
.tension.danger { border-color: #ff5a5a; }

.toast { position: absolute; left: 0; right: 0; top: 34%; text-align: center; z-index: 7; pointer-events: none; }
.toast b {
    display: inline-block; background: #fff; color: #d62828; font-size: 28px; font-weight: 900; padding: 6px 20px; border-radius: 14px;
    transform: rotate(-4deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); border: 3px solid #d62828; letter-spacing: 1px; animation: toastIn .25s ease;
}
.toast b.good { color: #1e8449; border-color: #1e8449; }
.toast b.gold { color: #b7791f; border-color: #b7791f; background: #fff8e1; }
.toast b.info { color: #0b2a3f; border-color: #0b2a3f; font-size: 20px; transform: none; }
.catch-pop { position: absolute; z-index: 7; pointer-events: none; font-weight: 900; font-size: 15px; color: #ffe08a; text-shadow: 0 2px 4px #000; animation: popUp 1.3s ease forwards; white-space: nowrap; }
#scene .angler .rod { transition: d .2s; }
#scene.fight .angler .arm { animation: rodShake .25s infinite alternate; transform-origin: 36px 24px; }
#scene.drilling .holes { animation: shake .2s infinite; }
.smoke { animation: smoke 3s ease-in-out infinite; transform-origin: center bottom; }
.dog .tail { animation: wag .5s infinite alternate; transform-origin: 1px 8px; }
.aurora { animation: aurora 6s ease-in-out infinite alternate; }
.fire { animation: pulse .4s infinite alternate; transform-origin: 30px 30px; }

/* ---------- Map (locations + days) ---------- */
#map-screen { background: linear-gradient(160deg, #0f4c75, #0b2a3f); }
.scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 20px; -webkit-overflow-scrolling: touch; }
.loc-card {
    position: relative; display: block; width: 100%; border-radius: 16px; overflow: hidden; margin-bottom: 12px; text-align: left;
    background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 255, 255, .35); color: #fff; font-family: inherit; cursor: pointer; padding: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.loc-card svg { display: block; width: 100%; height: auto; }
.loc-card .info { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.loc-card .nm { font-size: 18px; font-weight: bold; }
.loc-card .sub { font-size: 12px; opacity: .85; }
.loc-card .st { margin-left: auto; font-size: 14px; font-weight: bold; color: #ffe08a; white-space: nowrap; }
.loc-card.locked { opacity: .55; cursor: default; filter: grayscale(.5); }
.loc-card.locked .st { color: #fff; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.day-btn {
    aspect-ratio: 1; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14); color: #fff;
    font-family: inherit; font-size: 18px; font-weight: bold; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.day-btn .st { font-size: 11px; letter-spacing: 1px; color: #fde047; min-height: 13px; }
.day-btn .lbl { font-size: 10px; opacity: .8; font-weight: normal; }
.day-btn.next { background: #fff; color: #0b2a3f; border-color: #fff; }
.day-btn.locked { opacity: .35; cursor: default; }
.day-btn.legend { border-color: #ffd166; }
.section-title { font-size: 15px; font-weight: bold; margin: 6px 0 8px; opacity: .9; }

/* ---------- Shop / fly box ---------- */
#shop-screen, #flybox-screen { background: linear-gradient(160deg, #0f4c75, #0b2a3f); }
.wallet { display: flex; justify-content: center; gap: 10px; padding: 8px; font-weight: bold; font-size: 15px; }
.wallet span { background: #5b3d0a; border: 2px solid #f3c452; color: #ffe08a; border-radius: 16px; padding: 3px 12px; }
.gear-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; padding: 8px 10px; margin-bottom: 8px; }
.gear-row .ico { font-size: 26px; width: 36px; text-align: center; }
.gear-row .txt { flex: 1; min-width: 0; }
.gear-row .nm { font-weight: bold; font-size: 15px; }
.gear-row .ds { font-size: 12px; opacity: .85; }
.gear-row .tiers { font-size: 12px; color: #ffe08a; letter-spacing: 1px; }
.buy { border: none; border-radius: 18px; padding: 8px 12px; font-weight: bold; font-family: inherit; font-size: 13px; cursor: pointer; background: #ffb020; color: #3a2200; white-space: nowrap; }
.buy:disabled { background: rgba(255, 255, 255, .2); color: #fff; opacity: .6; cursor: default; }
.buy.max { background: #1e8449; color: #fff; }
.fly-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fly-card {
    border-radius: 12px; overflow: hidden; background: #fff; color: #1f2937; border: 3px solid transparent; cursor: pointer; text-align: center; font-family: inherit; padding: 0;
}
.fly-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.fly-card .nm { font-size: 11px; font-weight: bold; padding: 4px 4px 2px; line-height: 1.2; min-height: 30px; }
.fly-card .pr { font-size: 11px; color: #7c4a03; font-weight: bold; padding-bottom: 5px; }
.fly-card.owned .pr { color: #1e8449; }
.fly-card.equipped { border-color: #f28c00; }
.fly-card.locked { opacity: .5; }
.fly-card.locked img { filter: grayscale(1); }
.fly-detail { background: #fff; color: #1f2937; border-radius: 16px; overflow: hidden; margin-bottom: 12px; }
.fly-detail img { width: 100%; height: 150px; object-fit: cover; display: block; }
.fly-detail .body { padding: 10px 12px 12px; }
.fly-detail h3 { font-size: 18px; margin-bottom: 2px; }
.fly-detail .sub { font-size: 12px; color: #6b7280; margin-bottom: 8px; }
.stat { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; }
.stat .k { width: 86px; color: #6b7280; }
.stat .b { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.stat .b i { display: block; height: 100%; background: var(--accent); }
.sp { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0; }
.sp span { font-size: 11px; font-weight: bold; background: #e0f2f1; color: var(--accent); padding: 3px 8px; border-radius: 10px; }
.sp span.dim { background: #f3f4f6; color: #9ca3af; }
.fly-detail .btn { width: 100%; padding: 10px; font-size: 15px; }
.fly-detail .btn-primary { background: var(--accent); color: #fff; }
.ad { margin-top: 8px; font-size: 11px; color: #6b7280; text-align: center; }
.ad a { display: inline-block; background: #111827; color: #fff; text-decoration: none; padding: 7px 12px; border-radius: 16px; font-weight: bold; font-size: 12px; }
.ad a em { font-style: normal; background: #fbbf24; color: #111827; padding: 1px 5px; border-radius: 6px; margin-right: 6px; font-size: 10px; }

/* ---------- Modals ---------- */
.modal-overlay {
    position: absolute; inset: 0; background: rgba(0, 0, 0, .6); display: none; align-items: center; justify-content: center; z-index: 400; padding: 14px;
}
.modal-overlay.show { display: flex; }
.modal {
    background: #fff; color: #374151; border-radius: 16px; padding: 20px 18px; width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .4); animation: modalIn .25s ease;
}
.modal h2 { font-size: 22px; margin-bottom: 6px; color: #0b2a3f; }
.modal .btn-primary { background: var(--orange); color: #3a2200; }
.modal .btn-secondary { background: #fff; color: #0b2a3f; border-color: #0b2a3f; }
.modal .btn { width: 100%; max-width: 260px; }
.modal p { font-size: 14px; line-height: 1.45; }
.intro-art { border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.intro-art svg { display: block; width: 100%; height: auto; }
.task-big { background: #fff6dc; border: 2px solid #e9c96a; color: #4a3b14; border-radius: 12px; padding: 8px 10px; font-weight: bold; font-size: 16px; margin: 8px 0; }
.tip { font-size: 13px; color: #6b7280; margin: 6px 0 10px; }
.stars-big { font-size: 42px; letter-spacing: 6px; margin: 4px 0; }
.stars-big .on { color: #f59e0b; text-shadow: 0 2px 6px rgba(245, 158, 11, .5); display: inline-block; animation: starPop .4s ease backwards; }
.stars-big .on:nth-child(2) { animation-delay: .15s; } .stars-big .on:nth-child(3) { animation-delay: .3s; }
.stars-big .off { color: #d1d5db; }
.star-rules { font-size: 12px; color: #6b7280; text-align: left; margin: 6px 0 8px; }
.star-rules div::before { content: '☆ '; color: #cbd5e1; }
.star-rules div.ok::before { content: '★ '; color: #f59e0b; }
.weigh { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.weigh td { padding: 3px 4px; border-bottom: 1px solid #eee; text-align: left; }
.weigh td:last-child { text-align: right; font-weight: bold; color: #7c4a03; }
.weigh tr.legend td { color: #b7791f; font-weight: bold; }
.totals { display: flex; justify-content: space-around; font-weight: bold; margin: 8px 0; font-size: 15px; }
.totals b { display: block; font-size: 20px; color: #0b2a3f; }
.xpbar { height: 10px; background: #e5e7eb; border-radius: 5px; overflow: hidden; margin: 4px 0 10px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #17b26a, #5be0a0); transition: width .8s ease; }
.modal.help { text-align: left; }
.modal.help h2 { text-align: center; }
.modal.help p { margin: 7px 0; }
.modal-buttons { margin-top: 12px; }
.reward-fly { display: flex; align-items: center; gap: 10px; background: #fff7e6; border: 1px solid #f3d089; border-radius: 10px; padding: 8px; margin: 8px 0; text-align: left; font-size: 13px; }
.reward-fly img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }

/* ---------- Animations ---------- */
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes shake { 20%, 60% { transform: translateX(-2px); } 40%, 80% { transform: translateX(2px); } }
@keyframes rodShake { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes smoke { 0% { transform: translateY(0) scale(1); opacity: .85; } 100% { transform: translateY(-8px) scale(1.15); opacity: .5; } }
@keyframes wag { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }
@keyframes aurora { from { opacity: .6; transform: translateX(-10px); } to { opacity: 1; transform: translateX(10px); } }
@keyframes toastIn { from { transform: scale(.6) rotate(-4deg); opacity: 0; } to { transform: scale(1) rotate(-4deg); opacity: 1; } }
@keyframes popUp { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } }
@keyframes starPop { from { transform: scale(0); } 70% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes modalIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-height: 640px) {
    #start-screen h1 { font-size: 32px; } .logo { display: none; } .btn { padding: 10px 18px; font-size: 16px; margin: 4px auto; }
    #scene { max-height: 150px; }
}
@media (max-width: 360px) {
    .chip { font-size: 12px; } .action { font-size: 15px; }
}

/* holes in the scene: closed = not drilled yet */
#scene .holes g.closed .hole-water { opacity: .2; }
#scene .holes g.current ellipse:first-child { stroke: #ffe08a; stroke-width: 2; }

/* ---------- Start extras ---------- */
.row2 { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.row2 .btn { width: auto; margin: 2px; }
.start-info { font-size: 13px; opacity: .9; min-height: 1.2em; margin-top: 6px; color: #ffe08a; }

/* ---------- Kalakirja ---------- */
#book-screen, #ach-screen { background: linear-gradient(160deg, #0f4c75, #0b2a3f); }
.book-totals { text-align: center; font-size: 13px; opacity: .9; margin-bottom: 10px; }
.fish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.fish-card { border-radius: 12px; background: #fff; color: #1f2937; border: 3px solid transparent; cursor: pointer; text-align: center; font-family: inherit; padding: 6px 4px; }
.fish-card canvas { width: 100%; height: 56px; display: block; }
.fish-card .nm { font-size: 12px; font-weight: bold; }
.fish-card .rec { font-size: 11px; color: #7c4a03; font-weight: bold; min-height: 13px; }
.fish-card.unknown canvas { filter: grayscale(1) brightness(.3) contrast(.4); }
.fish-card.unknown .nm { color: #9ca3af; }
.fish-card.sel { border-color: #f28c00; }
.fish-card.rare { background: #fff8e1; }
.fish-detail { background: #fff; color: #1f2937; border-radius: 16px; overflow: hidden; margin-bottom: 12px; display: none; }
.fish-detail.show { display: block; }
.fish-detail .hero { background: linear-gradient(#bfe6f7, #5fb3d9); height: 120px; display: flex; align-items: center; justify-content: center; }
.fish-detail .hero canvas { width: 100%; height: 110px; }
.fish-detail .body { padding: 10px 12px 12px; }
.fish-detail h3 { font-size: 18px; }
.fish-detail h3 small { font-size: 12px; color: #6b7280; font-weight: normal; margin-left: 6px; }
.fish-detail .sub { font-size: 12px; color: #6b7280; margin: 2px 0 8px; }
.fish-detail .fact { font-size: 13px; color: #4b5563; line-height: 1.4; margin-top: 8px; }
.rec-box { background: #fff7e6; border: 1px solid #f3d089; border-radius: 10px; padding: 8px 10px; font-size: 12px; margin-top: 8px; }
.rec-box b { display: block; font-size: 15px; color: #7c4a03; }
.legend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.legend-card { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; padding: 6px 8px; font-size: 12px; }
.legend-card canvas { width: 54px; height: 40px; flex-shrink: 0; }
.legend-card.unknown { opacity: .5; }
.legend-card.unknown canvas { filter: grayscale(1) brightness(.3); }
.legend-card b { display: block; font-size: 13px; color: #ffe08a; }

/* ---------- Achievements ---------- */
.ach-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
.ach-row .ico { font-size: 24px; width: 34px; text-align: center; }
.ach-row .nm { font-weight: bold; font-size: 14px; }
.ach-row .ds { font-size: 12px; opacity: .85; }
.ach-row .rw { margin-left: auto; font-size: 12px; color: #ffe08a; white-space: nowrap; }
.ach-row.done { background: rgba(94, 224, 160, .18); border-color: #5be0a0; }
.ach-row.done .rw { color: #5be0a0; }
.ach-row:not(.done) .ico { filter: grayscale(1); opacity: .6; }
.ach-toast { background: #e8f8ef; border: 1px solid #5be0a0; color: #0b7a45; border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: bold; margin: 4px 0; }
.daily-stars { font-size: 30px; letter-spacing: 3px; color: #f59e0b; }
.fish-detail.unknown .hero canvas { filter: grayscale(1) brightness(.25) contrast(.5); }
.fly-card.outbox .pr { color: #9ca3af; }
.fly-card.outbox img { opacity: .6; }

/* Long result modals (legend + rewards + achievements): keep the buttons visible at the bottom */
#result-modal .modal { padding-bottom: 0; }
#result-modal .modal-buttons { position: sticky; bottom: 0; background: #fff; padding: 8px 0 12px; margin-top: 8px; box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .18); }
#result-modal .modal-buttons .btn { margin: 4px auto; padding: 11px 18px; }
@media (max-height: 700px) { #result-modal .weigh tr:nth-child(n+5) { display: none; } }