/* Evarenity — colors taken from the logo: deep outline blue, bubbly mid blues and aqua highlights. */
:root {
  --ink: #0b3d63;
  --ink-soft: #3d6584;
  --outline: #0b5c8f;
  --blue: #2f6fe0;
  --blue-mid: #4b9cf2;
  --sky: #5fb6f7;
  --sky-light: #bfe3ff;
  --sky-pale: #eef8ff;
  --aqua: #6fe6f0;
  --white: #fff;
  --pink: #f27aa8;
  --green: #3fb97a;
  --gold: #f5b93b;
  --red: #e5534b;
  --radius: 18px;
  --shadow: 0 6px 0 rgba(11, 92, 143, 0.12), 0 12px 30px rgba(11, 92, 143, 0.1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Currency art next to amounts, sized to the text around it. */
.cur-icon { height: 1.25em; width: auto; vertical-align: -0.28em; display: inline-block; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #d9efff 0, #eef8ff 420px, #f6fbff 100%) fixed;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; }
a { color: var(--blue); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; color: var(--outline); line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 0.8em; }
small, .muted { color: var(--ink-soft); }
hr { border: 0; border-top: 2px dashed var(--sky-light); margin: 1.5rem 0; }

/* ---------- Header ---------- */
.site-header { background: var(--white); border-bottom: 4px solid var(--outline); box-shadow: 0 4px 20px rgba(11, 92, 143, 0.15); position: relative; z-index: 50; }
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0.4rem 16px; flex-wrap: wrap; }
/* The logo file has lots of empty space around the artwork; .logo-crop shows just the artwork. */
.logo-crop { display: block; overflow: hidden; aspect-ratio: 1330 / 715; }
.logo-crop img { display: block; width: 150.4%; max-width: none; margin: -4.5% 0 0 -26.3%; }
.logo { width: 150px; flex: none; }
.search { flex: 1 1 260px; display: flex; max-width: 460px; }
.search input { flex: 1; border: 3px solid var(--sky); border-right: 0; border-radius: 999px 0 0 999px; padding: 0.5rem 1rem; font: inherit; color: var(--ink); background: var(--sky-pale); min-width: 0; }
.search input:focus { outline: none; border-color: var(--blue); background: #fff; }
.search button { border: 3px solid var(--blue); background: var(--blue); color: #fff; border-radius: 0 999px 999px 0; padding: 0 1rem; cursor: pointer; font-size: 1rem; }
.purse { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; }
.purse a { background: var(--sky-pale); border: 2px solid var(--sky-light); border-radius: 999px; padding: 0.15rem 0.7rem; color: var(--ink); font-size: 0.9rem; white-space: nowrap; }
.purse a:hover { border-color: var(--sky); text-decoration: none; }

.main-nav { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem 16px 0.5rem; flex-wrap: wrap; }
.main-nav > a, .nav-group > span { font-family: 'Fredoka', sans-serif; font-weight: 500; color: var(--outline); padding: 0.4rem 0.8rem; border-radius: 999px; display: inline-block; cursor: pointer; }
.main-nav > a:hover, .main-nav > a.on, .nav-group:hover > span, .nav-group:focus-within > span { background: var(--sky-light); text-decoration: none; }
.nav-group { position: relative; outline: none; }
.nav-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 3px solid var(--outline); border-radius: 14px; padding: 0.4rem; min-width: 200px; box-shadow: var(--shadow); z-index: 60; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: block; }
.nav-menu a { display: block; padding: 0.45rem 0.8rem; border-radius: 10px; color: var(--ink); }
.nav-menu a:hover { background: var(--sky-pale); text-decoration: none; }
.nav-spacer { flex: 1; }
.me-link small { color: var(--ink-soft); font-weight: 600; }
.admin-link { color: #8a4b00 !important; }
.badge { background: var(--pink); color: #fff; border-radius: 999px; font-size: 0.72rem; padding: 0.05rem 0.45rem; font-family: 'Nunito', sans-serif; vertical-align: 2px; }
.nav-toggle, .nav-burger { display: none; }

@media (max-width: 760px) {
  .logo { width: 110px; }
  .purse { margin-left: 0; width: 100%; }
  .nav-burger { display: block; margin: 0 16px 0.5rem; font-family: 'Fredoka', sans-serif; color: var(--outline); cursor: pointer; font-weight: 600; }
  .main-nav { display: none; flex-direction: column; align-items: stretch; }
  .nav-toggle:checked ~ .main-nav { display: flex; }
  .nav-menu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 1rem; }
  .nav-spacer { display: none; }
}

/* ---------- Layout ---------- */
.page { max-width: 1200px; width: 100%; margin: 0 auto; padding: 1.5rem 16px 3rem; flex: 1; }
/* The player's card in the empty space left of the page (avatar in its background with the active pet, the pet's
   hunger and energy, quick links), only when the screen is wide enough to have room. */
.side-card { display: none; }
@media (min-width: 1560px) {
  .side-card { display: block; position: fixed; z-index: 20; top: 150px; left: calc((100vw - 1200px) / 4); transform: translateX(-50%);
    width: min(250px, calc((100vw - 1200px) / 2 - 28px)); max-height: calc(100vh - 170px); overflow-y: auto; scrollbar-width: none;
    background: var(--glass, rgba(255, 255, 255, 0.72)); border: 2px solid rgba(255, 255, 255, 0.9); outline: 1px solid var(--glass-edge, #bfe3ff); outline-offset: -3px;
    border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px; }
  .side-scene { position: relative; display: block; border-radius: 18px; overflow: hidden; border: 2px solid var(--glass-edge, #bfe3ff);
    background: radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.9) 0 6%, rgba(255, 255, 255, 0) 7%), linear-gradient(180deg, #9fd6ff 0%, #d8efff 62%, #b8ec9a 62%, #8fd37a 100%); }
  .side-figure { position: relative; display: block; width: 100%; transition: transform 0.25s; }
  .side-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .side-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; opacity: 0.5; }
  /* With the pet shown, the avatar steps a little to the left and the pet sits in front, bottom right. */
  .side-scene.with-pet .side-figure img:not([style*="z-index: 0"]) { transform: translateX(-14%); }
  .side-pet { position: absolute; z-index: 200; right: -6%; bottom: 0; width: 62%; filter: drop-shadow(0 4px 4px rgba(30, 60, 120, 0.3)); transition: transform 0.25s; }
  .side-scene:hover .side-pet { transform: translateY(-4px); }
  .side-body { padding: 0.5rem 0.35rem 0.2rem; text-align: center; }
  .side-name { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; line-height: 1.2; }
  .side-name small { font-family: inherit; font-weight: 600; color: var(--ink-soft); font-size: 0.8rem; }
  .side-pet-name { display: block; margin: 0.15rem 0 0.35rem; font-size: 0.88rem; color: var(--ink); text-decoration: none; }
  .side-stat { display: grid; grid-template-columns: 1.3rem 1fr auto; align-items: center; gap: 0.35rem; margin: 0.2rem 0; font-size: 0.78rem; color: var(--ink-soft); }
  .side-stat .bar { height: 10px; }
  .side-nopet { font-size: 0.82rem; color: var(--ink-soft); margin: 0.3rem 0; }
  .side-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; margin-top: 0.5rem; }
  .side-actions form { display: contents; }
  .side-actions .btn { padding: 0.25rem 0.6rem; font-size: 0.78rem; }
}
.site-footer { text-align: center; padding: 1.5rem 16px; color: var(--ink-soft); font-size: 0.9rem; border-top: 3px solid var(--sky-light); background: #fff; }
.card { background: var(--white); border: 3px solid var(--outline); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.card.soft { border-color: var(--sky-light); box-shadow: none; }
.card > :last-child { margin-bottom: 0; }
.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.medium { max-width: 760px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.row.top { align-items: flex-start; }
.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.cols { display: grid; grid-template-columns: 300px 1fr; gap: 1.25rem; align-items: start; }
.cols-even { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .cols, .cols-even { grid-template-columns: 1fr; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-title h1 { margin: 0; }
.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { padding: 0.35rem 0.9rem; border-radius: 999px; background: #fff; border: 2px solid var(--sky-light); color: var(--ink); font-size: 0.92rem; }
.tabs a.on, .tabs a:hover { background: var(--blue); border-color: var(--blue); color: #fff; text-decoration: none; }
.empty { text-align: center; color: var(--ink-soft); padding: 2rem 1rem; }

/* ---------- Buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem; color: #fff; background: linear-gradient(180deg, var(--blue-mid), var(--blue)); border: 3px solid var(--outline); border-radius: 999px; padding: 0.5rem 1.2rem; cursor: pointer; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 3px 0 var(--outline); text-decoration: none; line-height: 1.2; }
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn:active { transform: translateY(2px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 1px 0 var(--outline); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-small { font-size: 0.85rem; padding: 0.3rem 0.8rem; border-width: 2px; }
.btn-light { background: #fff; color: var(--outline); }
.btn-green { background: linear-gradient(180deg, #5fd497, var(--green)); }
.btn-pink { background: linear-gradient(180deg, #f8a0c2, var(--pink)); }
.btn-red { background: linear-gradient(180deg, #f17a73, var(--red)); }
.btn-gold { background: linear-gradient(180deg, #ffd36b, var(--gold)); color: #5a3a00; }
.btn-block { width: 100%; }
.main-nav .btn { color: #fff; }
.linkish { background: none; border: 0; color: var(--blue); font: inherit; font-weight: 700; cursor: pointer; padding: 0.4rem 0.6rem; }
.linkish:hover { text-decoration: underline; }
form.inline { display: inline; }
label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.field { margin-bottom: 0.9rem; }
.field small { display: block; font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search]:not(.search input), select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--sky-pale); border: 2px solid var(--sky-light); border-radius: 12px; padding: 0.55rem 0.8rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
textarea { min-height: 120px; resize: vertical; }
input[type=number] { max-width: 160px; }
.check { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; }
.check input { width: auto; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; }
.qty { width: 80px !important; }

.flash { border-radius: 14px; padding: 0.8rem 1.1rem; margin-bottom: 1.2rem; font-weight: 700; border: 3px solid; }
.flash-success { background: #e6f9ef; border-color: var(--green); color: #135c37; }
.flash-error { background: #fdecec; border-color: var(--red); color: #8a1f1a; }
.flash-info { background: var(--sky-pale); border-color: var(--sky); color: var(--ink); }

/* ---------- Tiles (items, pets) ---------- */
.tile { background: #fff; border: 2px solid var(--sky-light); border-radius: 16px; padding: 0.7rem; text-align: center; display: flex; flex-direction: column; gap: 0.35rem; position: relative; }
.tile:hover { border-color: var(--sky); }
.tile img.pic { width: 100%; aspect-ratio: 1; object-fit: contain; }
/* Item pictures always show at 100×100 (pets keep the larger size). */
.item-pic, .tile img.pic.item-pic { width: 100px; height: 100px; max-width: 100%; aspect-ratio: auto; object-fit: contain; display: block; margin: 0 auto; flex: none; }
.tile .name { font-weight: 800; line-height: 1.25; }
.tile .meta { font-size: 0.82rem; color: var(--ink-soft); }
.tile .qty-badge { position: absolute; top: 8px; right: 8px; background: var(--blue); color: #fff; border-radius: 999px; padding: 0 0.5rem; font-size: 0.8rem; font-weight: 800; }
.tile .actions { margin-top: auto; display: flex; flex-direction: column; gap: 0.35rem; }
.tile.active-pet { border-color: var(--gold); box-shadow: 0 0 0 3px #ffe7a8; }
.tile.selected { border-color: var(--blue); box-shadow: 0 0 0 3px var(--sky-light); }
.rarity { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.r-common { color: #6b7d8f; } .r-uncommon { color: #2f9a5f; } .r-rare { color: #2f6fe0; } .r-very-rare { color: #7a4fe0; }
.r-super-rare { color: #c03fb3; } .r-ultra-rare { color: #e0612f; } .r-legendary { color: #c79100; } .r-special { color: #0e9aa7; } .r-event, .r-admin-distributed { color: #d6457a; }
.thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: var(--sky-pale); flex: none; }
.thumb-lg { width: 96px; height: 96px; }

/* ---------- Stats ---------- */
.stats { display: grid; gap: 0.45rem; }
.stat { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 700; }
.stat small { font-weight: 600; white-space: nowrap; }
.bar { height: 14px; background: var(--sky-pale); border: 2px solid var(--sky-light); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; transition: width 0.3s; }
.bar .hp { background: linear-gradient(90deg, #ff8a8a, var(--red)); }
.bar .en { background: linear-gradient(90deg, #ffe07a, var(--gold)); }
.bar .hu { background: linear-gradient(90deg, #ffc48a, #f08a3b); }
.bar .ha { background: linear-gradient(90deg, #ffb3d1, var(--pink)); }
.bar .xp { background: linear-gradient(90deg, var(--aqua), var(--blue-mid)); }

/* ---------- Avatar ---------- */
.avatar { position: relative; width: 100%; background: linear-gradient(180deg, var(--sky-pale), #fff); border-radius: 16px; overflow: hidden; border: 2px solid var(--sky-light); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.avatar-sm { max-width: 120px; } .avatar-md { max-width: 260px; } .avatar-lg { max-width: 360px; margin: 0 auto; }
.avatar-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-soft); }

/* ---------- Tables & lists ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 2px solid var(--sky-pale); vertical-align: middle; }
th { font-family: 'Fredoka', sans-serif; color: var(--outline); font-weight: 600; }
.table-wrap { overflow-x: auto; }
.list { list-style: none; padding: 0; margin: 0; }
.list > li { padding: 0.7rem 0; border-bottom: 2px solid var(--sky-pale); display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.list > li:last-child { border-bottom: 0; }
.unread { font-weight: 800; }
.unread::before { content: '●'; color: var(--pink); margin-right: 0.35rem; }

/* ---------- Home / news ---------- */
.hero { text-align: center; padding: 1rem 1rem 1.5rem; }
.hero .logo-crop { max-width: 560px; margin: 0 auto 1rem; }
.hero p { font-size: 1.15rem; max-width: 620px; margin: 0 auto 1rem; }
.news-post { border-left: 6px solid var(--sky); }
.news-post .date { color: var(--ink-soft); font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem; }
.news-body { white-space: pre-wrap; }
.dash-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; }
.dash-links a { background: var(--sky-pale); border: 2px solid var(--sky-light); border-radius: 14px; padding: 0.8rem; text-align: center; color: var(--outline); font-family: 'Fredoka', sans-serif; font-weight: 600; }
.dash-links a span { display: block; font-size: 1.6rem; }
.dash-links a:hover { border-color: var(--sky); text-decoration: none; }

/* ---------- Shops ---------- */
.shopkeeper { display: flex; gap: 1rem; align-items: center; }
.shopkeeper img { width: 110px; height: 110px; object-fit: contain; flex: none; }
.speech { background: var(--sky-pale); border: 2px solid var(--sky-light); border-radius: 16px; padding: 0.8rem 1rem; position: relative; font-weight: 600; }
.price { font-weight: 800; color: var(--outline); }

/* ---------- Forum ---------- */
.post { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; }
.post-author { text-align: center; font-size: 0.9rem; }
.post-body { white-space: pre-wrap; word-wrap: break-word; }
@media (max-width: 600px) { .post { grid-template-columns: 1fr; } .post-author { text-align: left; } }

/* ---------- Pet database ---------- */
.db-entry { display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 2px solid var(--sky-pale); }
.db-entry:last-child { border-bottom: 0; }
.db-entry .pic { width: 100%; aspect-ratio: 1; object-fit: contain; background: radial-gradient(circle, var(--sky-pale) 60%, transparent 61%); }
.db-entry dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.8rem; margin: 0 0 0.8rem; }
.db-entry dt { font-weight: 800; }
.db-entry dd { margin: 0; }
@media (max-width: 600px) { .db-entry { grid-template-columns: 1fr; } .db-entry .pic { max-width: 220px; margin: 0 auto; } }

/* ---------- Custom pet bases ---------- */
.potion-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.potion-card { display: flex; gap: 0.6rem; align-items: center; background: var(--sky-pale); border: 2px solid var(--sky-light); border-radius: 14px; padding: 0.5rem 0.8rem; flex: 1 1 220px; }
.potion-card img { width: 56px; height: 56px; object-fit: contain; }
.custom-base { display: grid; grid-template-columns: 200px 1fr; gap: 0; padding: 0; overflow: hidden; }
.custom-base-pic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; border-right: 2px solid var(--sky-light); }
.custom-base-pic img { width: 160px; height: 160px; object-fit: contain; }
.custom-base-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--sky); color: #fff; padding: 0.55rem 1rem; font-family: 'Fredoka', sans-serif; }
.custom-base-head b:not(.rarity) { color: #fff; }
.sources { border: 2px solid #d6e6f5; border-radius: 14px; padding: 0.6rem 1rem 1rem; margin: 1rem 0; }
.sources legend { font-weight: 800; padding: 0 0.4rem; }
.sources h4 { margin: 1rem 0 0.4rem; }
.source-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding: 0.25rem 0; border-bottom: 1px dashed #e3edf7; }
.source-row .check { display: flex; align-items: center; gap: 0.4rem; }
.source-row .thumb { width: 32px; height: 32px; }
.source-amount { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.source-amount input { width: 6.5rem; }
.coloration-list { display: grid; gap: 0.5rem; }
.coloration-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem; border: 2px solid #e3edf7; border-radius: 12px; color: inherit; text-decoration: none; }
.coloration-row:hover { border-color: #8cc4f0; }
.rarity-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.rarity-jump a { background: #fff; border: 2px solid currentColor; border-radius: 999px; padding: 0.25rem 0.8rem; font-weight: 800; text-decoration: none; }
.rarity-jump a small { font-weight: 600; opacity: 0.8; }
.rarity-heading { margin: 1.4rem 0 0.7rem; padding-bottom: 0.3rem; border-bottom: 3px solid currentColor; scroll-margin-top: 1rem; }
.custom-base-head .rarity { background: #fff; padding: 0.05rem 0.5rem; border-radius: 999px; }
.custom-base-body { padding: 0.8rem 1rem 1rem; background: var(--sky-pale); height: 100%; }
.custom-base-body h3 { font-size: 1rem; margin: 0.4rem 0 0.2rem; text-decoration: underline; }
@media (max-width: 600px) { .custom-base { grid-template-columns: 1fr; } .custom-base-pic { border-right: 0; border-bottom: 2px solid var(--sky-light); } }

/* ---------- Trades ---------- */
.trade-side { border: 3px dashed var(--sky-light); border-radius: 16px; padding: 1rem; min-height: 180px; }
.trade-side.accepted { border-style: solid; border-color: var(--green); background: #f2fbf6; }

/* ---------- Adventure ---------- */
.adv-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .adv-wrap { grid-template-columns: 1fr; } }
.adv-map { display: grid; border: 4px solid var(--outline); border-radius: 16px; overflow: hidden; user-select: none; touch-action: manipulation; }
.tile-cell { aspect-ratio: 1; display: grid; place-items: center; font-size: clamp(10px, 2.3vw, 22px); position: relative; }
.t-grass { background: #9be08a; } .t-grass.alt { background: #93d982; }
.t-path { background: #ecd8a6; } .t-tree { background: #6cc46a; } .t-water { background: #6cc3f5; } .t-flower { background: #9be08a; }
.t-rock { background: #8a8fa8; } .t-floor { background: #5c5f7e; } .t-floor.alt { background: #575a78; } .t-crystal { background: #5c5f7e; } .t-pool { background: #3d6e9e; }
.t-sand { background: #f2e2b0; }
.tile-cell .player { width: 90%; height: 90%; object-fit: contain; z-index: 2; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25)); }
.dpad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 6px; justify-content: center; margin-top: 1rem; }
.dpad button { font-size: 1.4rem; border-radius: 14px; border: 3px solid var(--outline); background: #fff; color: var(--outline); cursor: pointer; }
.dpad button:active { background: var(--sky-light); }
.dpad .up { grid-column: 2; } .dpad .left { grid-column: 1; grid-row: 2; } .dpad .right { grid-column: 3; grid-row: 2; } .dpad .down { grid-column: 2; grid-row: 3; }
.adv-log { max-height: 220px; overflow-y: auto; font-size: 0.9rem; display: flex; flex-direction: column-reverse; gap: 0.3rem; }
.adv-log p { margin: 0; padding: 0.3rem 0.5rem; border-radius: 8px; background: var(--sky-pale); }
.encounter { position: fixed; inset: 0; background: rgba(11, 61, 99, 0.55); display: grid; place-items: center; z-index: 100; padding: 16px; }
.encounter[hidden] { display: none; }
.encounter .card { width: min(560px, 100%); margin: 0; text-align: center; }
.battle { display: flex; justify-content: space-around; align-items: center; gap: 1rem; margin: 1rem 0; }
.battle img { width: 120px; height: 120px; object-fit: contain; }
.battle .vs { font-family: 'Fredoka', sans-serif; font-size: 1.6rem; color: var(--pink); }
.battle .bar { width: 120px; margin: 0.3rem auto 0; }
.shake { animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.pot-icon { font-size: 3rem; opacity: 0.4; }
.pot.ready { border-color: var(--green); box-shadow: 0 0 0 3px #c9f2d9; }
.pot.empty { border-style: dashed; }
.pet-switcher { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.pet-switcher label { margin: 0; font-size: 0.9rem; }
.pet-switcher select { width: auto; flex: 1; min-width: 140px; padding: 0.35rem 0.6rem; }

/* ---------- New player tutorial ---------- */
.tutorial { max-width: 820px; margin: 0 auto 1.25rem; }
.tut-steps { list-style: none; display: flex; justify-content: center; gap: 0.4rem; padding: 0; margin: 0 0 1.25rem; flex-wrap: wrap; }
.tut-steps li { padding: 0.25rem 0.9rem; border-radius: 999px; background: var(--sky-pale); color: var(--ink-soft); font-weight: 800; font-size: 0.85rem; border: 2px solid var(--sky-light); }
.tut-steps li.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.tut-steps li.done { background: #e1f7ea; color: #186b3e; border-color: #b9e8cb; }
.tut-step h1 { text-align: center; }
.tut-step > p { text-align: center; }
.tut-logo { max-width: 300px; margin: 0 auto 0.5rem; }
.tut-question { font-family: 'Fredoka', sans-serif; font-size: 1.2rem; color: var(--outline); text-align: center; margin: 1rem 0 0.5rem; }
.tut-step input[type=text] { max-width: 380px; display: block; margin: 0 auto; text-align: center; font-size: 1.15rem; font-weight: 700; }
.tut-look { display: grid; grid-template-columns: 260px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 680px) { .tut-look { grid-template-columns: 1fr; } .tut-preview { margin: 0 auto; max-width: 200px; } }
.tut-pickers h3 { margin: 0.6rem 0 0.4rem; }
.tut-options { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tut-option { background: #fff; border: 3px solid var(--sky-light); border-radius: 14px; padding: 0.3rem; width: 92px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font: inherit; font-size: 0.75rem; font-weight: 700; color: var(--ink); }
.tut-option:hover { border-color: var(--sky); }
.tut-option.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--sky-light); }
.tut-option > img { width: 64px; height: 96px; object-fit: contain; object-position: top; }
.tut-thumb { position: relative; width: 80px; height: 64px; overflow: hidden; display: block; background: var(--sky-pale); border-radius: 10px; }
.tut-thumb img { position: absolute; left: 50%; top: -6px; width: 150px; transform: translateX(-50%); max-width: none; }
.tut-egg { background: none; border: 0; cursor: pointer; padding: 0.5rem; margin: 0.5rem auto; display: block; }
.tut-egg img { width: 170px; transition: transform 0.2s; }
.tut-egg:hover img { transform: scale(1.05) rotate(-3deg); }
.tut-egg.wobble img { animation: wobble 0.3s 3; }
.tut-egg.cracked img { transform: scale(1.25); opacity: 0; transition: transform 0.45s, opacity 0.45s; }
@keyframes wobble { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.tut-pets { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; margin: 1rem 0; animation: pop-in 0.3s; }
.tut-pet { background: #fff; border: 3px solid var(--sky-light); border-radius: 18px; padding: 0.8rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font: inherit; color: var(--ink); }
.tut-pet:hover { border-color: var(--sky); transform: translateY(-2px); }
.tut-pet.on { border-color: var(--gold); box-shadow: 0 0 0 4px #ffe7a8; }
.tut-pet img { width: 120px; height: 120px; object-fit: contain; }
.tut-pet b { font-family: 'Fredoka', sans-serif; font-size: 1.15rem; color: var(--outline); }
.tut-pet small { color: var(--ink-soft); }
.tut-final { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; margin: 1rem 0; }
.tut-final .avatar { width: 140px; }
.tut-final-pet { width: 130px; }
.tut-nav { display: flex; justify-content: space-between; margin-top: 1.5rem; gap: 0.6rem; }
.tut-nav #tut-next { margin-left: auto; }

/* ---------- Pop-up window ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(11, 61, 99, 0.55); display: grid; place-items: center; z-index: 200; padding: 16px; animation: fade-in 0.15s; }
.modal { width: min(420px, 100%); margin: 0; max-height: calc(100vh - 32px); overflow-y: auto; animation: pop-in 0.18s; }
.modal h2 { margin-bottom: 0.8rem; }
.modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.buy-summary { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 1rem; }
.buy-summary img { width: 84px; height: 84px; object-fit: contain; background: var(--sky-pale); border-radius: 14px; flex: none; }
.buy-name { font-size: 1.1rem; }
.buy-qty-label { margin-bottom: 0.4rem; }
.buy-qty { display: flex; gap: 0.5rem; align-items: center; }
.buy-qty input { width: 90px !important; text-align: center; font-weight: 800; font-size: 1.1rem; }
.buy-total { font-size: 1.15rem; margin: 1rem 0 0.2rem; }
.buy-balance { margin: 0; font-size: 0.9rem; }
.buy-warning { color: var(--red); font-weight: 700; margin: 0.5rem 0 0; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { transform: scale(0.92); opacity: 0; } }

/* ---------- Adventure platformer ---------- */
.plat-wrap { position: relative; border: 4px solid var(--outline); border-radius: 18px; overflow: hidden; background: #bfe8ff; box-shadow: var(--shadow); }
#plat { display: block; width: 100%; height: auto; image-rendering: auto; touch-action: none; }
.plat-hud { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 0.6rem; align-items: center; pointer-events: none; }
.plat-hud-pet { display: flex; align-items: center; gap: 0.4rem; background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 0.15rem 0.7rem 0.15rem 0.2rem; border: 2px solid var(--outline); font-size: 0.85rem; }
.plat-hud-pet img { width: 30px; height: 30px; object-fit: contain; }
.plat-hud-bars { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.plat-hud-bars span { background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.78rem; font-weight: 800; border: 2px solid var(--sky-light); }
.plat-toast { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); background: #fff; border: 3px solid var(--outline); border-radius: 14px; padding: 0.45rem 0.9rem; font-weight: 800; display: flex; gap: 0.5rem; align-items: center; box-shadow: var(--shadow); max-width: 90%; animation: pop-in 0.2s; }
.plat-toast img { width: 34px; height: 34px; object-fit: contain; }
.plat-screen { position: absolute; inset: 0; background: rgba(11, 61, 99, 0.6); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; }
.plat-screen h2 { color: #fff; font-size: 2rem; }
.plat-screen .muted { color: #dff1ff; max-width: 520px; }
.plat-error { color: #ffd6d6; font-weight: 800; min-height: 1.4em; margin-top: 0.6rem; }
.plat-touch { display: none; position: absolute; bottom: 10px; left: 10px; right: 10px; justify-content: space-between; pointer-events: none; }
.plat-touch button { pointer-events: auto; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--outline); background: rgba(255, 255, 255, 0.75); font-size: 1.6rem; color: var(--outline); touch-action: none; }
.plat-touch .jump { margin-left: auto; }
.plat-touch button + button { margin-left: 10px; }
@media (hover: none) { .plat-touch { display: flex; } }

/* ---------- Fishing ---------- */
#lake { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.reel-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 92%); background: #fff; border: 4px solid var(--outline); border-radius: 18px; padding: 1rem 1.2rem; text-align: center; box-shadow: var(--shadow); }
.reel-box .muted { font-size: 0.85rem; }
.pond { position: relative; height: 320px; border-radius: 20px; overflow: hidden; border: 4px solid var(--outline); background: linear-gradient(180deg, #bfe8ff 0 30%, #5fb6f7 30%, #2f6fe0 100%); }
.pond .bobber { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-size: 2rem; transition: top 0.2s; }
.pond .bobber.bite { animation: bob 0.25s infinite alternate; }
@keyframes bob { from { top: 30%; } to { top: 36%; } }
.pond .pond-pet { position: absolute; left: 12px; top: 8px; width: 80px; }
.pond-msg { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: #fff; font-family: 'Fredoka', sans-serif; font-size: 1.4rem; text-shadow: 0 2px 0 var(--outline); }
.reel { position: relative; height: 34px; background: #fff; border: 3px solid var(--outline); border-radius: 999px; overflow: hidden; margin: 1rem 0; }
.reel .zone { position: absolute; top: 0; bottom: 0; background: #8ee6a8; }
.reel .marker { position: absolute; top: -2px; bottom: -2px; width: 6px; background: var(--red); border-radius: 3px; }
.hits { font-size: 1.4rem; letter-spacing: 0.2rem; }

/* ---------- Dressing room ---------- */
.dress-wrap { display: grid; grid-template-columns: 360px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .dress-wrap { grid-template-columns: 1fr; } }
.dress-side { display: grid; gap: 1rem; align-content: start; }
.dress-side .card { margin: 0; }
/* Layers: the worn items, front first. Drag rows (or use ▲ ▼) to change what's in front. */
.layer-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.layer-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.4rem; background: #f4f9ff; border: 2px solid #d6e6f5; border-radius: 12px; cursor: grab; user-select: none; position: relative; }
.layer-row:first-child { background: #eafbe9; border-color: #b9e8c2; }
.layer-row.pinned { cursor: default; }
.layer-row.dragging { z-index: 5; cursor: grabbing; box-shadow: var(--shadow); opacity: 0.92; }
.layer-row.drop-before { box-shadow: 0 -4px 0 var(--blue); }
.layer-row.drop-after { box-shadow: 0 4px 0 var(--blue); }
.layer-handle { color: #9aabbf; font-size: 1.2rem; width: 1.2rem; text-align: center; touch-action: none; cursor: grab; }
.layer-row img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; }
.layer-name { flex: 1; font-weight: 800; font-size: 0.88rem; line-height: 1.15; min-width: 0; }
.layer-name small { display: block; font-weight: 600; color: #6b7d8f; }
.layer-moves { display: flex; flex-direction: column; gap: 2px; }
.layer-moves button { border: 2px solid #cfe0f2; background: #fff; border-radius: 6px; font-size: 0.6rem; line-height: 1; padding: 2px 5px; cursor: pointer; color: var(--outline); }
.layer-moves button:disabled { opacity: 0.35; cursor: default; }
.layer-empty { color: #6b7d8f; font-size: 0.9rem; padding: 0.4rem; }
.wardrobe .tile { cursor: pointer; }
.wardrobe .tile.worn { border-color: var(--green); box-shadow: 0 0 0 3px #c9f2d9; }
.wardrobe .tile.worn::after { content: '✓ Wearing'; position: absolute; top: 6px; left: 6px; background: var(--green); color: #fff; font-size: 0.72rem; font-weight: 800; border-radius: 999px; padding: 0 0.45rem; }
.base-pick { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.base-pick button { width: 64px; height: 96px; border-radius: 12px; border: 3px solid var(--sky-light); background: #fff; padding: 2px; cursor: pointer; }
.base-pick button.on { border-color: var(--blue); }
.base-pick img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Admin ---------- */
.item-form-icon { border: 2px dashed var(--sky-light); border-radius: 12px; background: var(--sky-pale); }
.ha-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.8rem; background: #b4ffb4; border-radius: 12px; padding: 0.8rem; }
.ha-preview figure { margin: 0; text-align: center; }
.ha-preview .avatar { background: transparent; border: 0; max-width: 160px; margin: 0 auto; }
.ha-preview figcaption { font-weight: 800; font-size: 0.85rem; color: var(--ink); }
.admin-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.admin-nav a { padding: 0.35rem 0.8rem; border-radius: 10px; background: #fff5e6; border: 2px solid #ffd9a3; color: #7a4300; font-size: 0.9rem; }
.admin-nav a.on, .admin-nav a:hover { background: #ffd9a3; text-decoration: none; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8rem; }
.stat-tiles div { background: var(--sky-pale); border: 2px solid var(--sky-light); border-radius: 14px; padding: 0.8rem; }
.stat-tiles b { display: block; font-size: 1.6rem; font-family: 'Fredoka', sans-serif; color: var(--outline); }
.pill { display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; background: var(--sky-pale); color: var(--outline); }
.pill.pending { background: #fff2cc; color: #7a5600; } .pill.approved { background: #e1f7ea; color: #186b3e; }
.premium-pill { background: linear-gradient(90deg, #fff1b8, #ffd6ec); color: #8a4b00; }
.pill.rejected, .pill.banned { background: #fde3e3; color: #8a1f1a; }

/* ---------- Starbloom Gardens ---------- */
.garden-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .garden-layout { grid-template-columns: minmax(0, 1fr); } }
.garden-card { background: #fff; border: 4px solid var(--outline); border-radius: 22px; box-shadow: var(--shadow); padding: 0.8rem; }
.garden-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.garden-tool { font: inherit; font-weight: 800; border: 3px solid #cfe2f5; background: #f4f9ff; color: #3b4d66; border-radius: 999px; padding: 0.35rem 0.85rem; cursor: pointer; }
.garden-tool:hover { border-color: var(--blue-mid); }
.garden-tool.on { background: var(--blue); border-color: var(--blue); color: #fff; }
/* The grass fills the whole picture (garden.js draws past the island), so this green only shows on very wide screens. */
.garden-sky { position: relative; border-radius: 18px; overflow: hidden; padding: 0; background: #8fcb3f; }
.garden-wrap { position: relative; display: flex; justify-content: center; overflow: hidden; }
.garden-wrap.scrolls { justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; }
.garden-stage { position: relative; flex: none; transform-origin: top left; overflow: hidden; }
/* The grassy yard round the farm, and the decorations players place on it. */
.g-yard { position: absolute; pointer-events: none; }
.g-yard img { width: 100%; height: 100%; display: block; }
.g-thing { position: absolute; pointer-events: none; max-width: none; filter: drop-shadow(0 4px 3px rgba(30, 20, 70, 0.28)); user-select: none; }
.garden-stage.yard-mode { cursor: copy; touch-action: none; }
.garden-stage.yard-mode .g-hit { pointer-events: none; }
.garden-stage.yard-mode .g-thing { pointer-events: auto; cursor: grab; }
.garden-stage.yard-mode .g-thing:hover { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 4px 3px rgba(30, 20, 70, 0.28)); }
.g-thing.selected { filter: drop-shadow(0 0 6px #fff7b0) drop-shadow(0 0 12px #ffe066); }
.g-thing-bar { position: absolute; z-index: 300; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 3px 10px rgba(30, 20, 70, 0.35); white-space: nowrap; }
.g-thing-bar button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eef5ff; font-size: 16px; line-height: 1; cursor: pointer; }
.g-thing-bar button:hover, .g-thing-bar button:focus-visible { background: #d9ebff; outline: none; }
.g-thing-bar button.remove { background: #ffe3ee; }
.g-thing-bar button.remove:hover { background: #ffc9dc; }
.g-tile { position: absolute; pointer-events: none; }
/* Plant care: mood emotes, visiting bugs and little effects. */
.g-mood { position: absolute; left: 62%; top: 4%; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 13px 13px 13px 3px; background: #fff; box-shadow: 0 2px 6px rgba(30, 20, 70, 0.3); font-size: 15px; line-height: 26px; text-align: center; animation: g-mood 2.4s ease-in-out infinite; }
.g-mood[hidden], .g-bug[hidden] { display: none; }
.g-mood.thirsty { background: #e3f3ff; }
.g-mood.sad { background: #ffe9e9; }
.g-mood.sparkle { background: #fff8d6; animation: g-mood 2.4s ease-in-out infinite, g-glow 1.6s ease-in-out infinite; }
@keyframes g-mood { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes g-glow { 0%, 100% { box-shadow: 0 2px 6px rgba(30, 20, 70, 0.3); } 50% { box-shadow: 0 0 12px 3px rgba(255, 220, 90, 0.8); } }
.g-bug { position: absolute; left: 32%; top: 38%; font-size: 22px; line-height: 1; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); animation: g-crawl 3s ease-in-out infinite; }
.g-bug.friend { animation: g-flutter 1.4s ease-in-out infinite; top: 30%; }
.g-bug.fly { animation: g-fly 0.9s ease-in forwards; }
@keyframes g-crawl { 0%, 100% { transform: translate(0, 0) scaleX(1); } 45% { transform: translate(14px, 5px) scaleX(1); } 50% { transform: translate(14px, 5px) scaleX(-1); } 95% { transform: translate(0, 0) scaleX(-1); } }
@keyframes g-flutter { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(8px, -6px) rotate(8deg); } }
@keyframes g-fly { to { transform: translate(60px, -70px) rotate(30deg); opacity: 0; } }
.g-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.g-can { position: absolute; left: 22%; top: 2%; width: 46px; transform-origin: 30% 80%; animation: g-pour 1.4s ease-in-out forwards; }
.g-can svg { display: block; width: 100%; height: auto; }
@keyframes g-pour { 0% { transform: translateY(-10px) rotate(0); opacity: 0; } 15% { opacity: 1; transform: translateY(0) rotate(0); } 35%, 75% { transform: rotate(28deg); } 100% { transform: rotate(0); opacity: 0; } }
.g-drop { position: absolute; top: 24%; width: 4px; height: 7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #6cc6ff; opacity: 0; animation: g-drop 0.6s ease-in forwards; }
@keyframes g-drop { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(30px); } }
.g-bit { position: absolute; top: 18%; width: 5px; height: 5px; border-radius: 50%; background: var(--c); opacity: 0; animation: g-bit 0.8s ease-in forwards; }
@keyframes g-bit { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(36px); } }
.g-quality { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); white-space: nowrap; padding: 2px 8px; border-radius: 10px; background: #fff; font-weight: 800; font-size: 12px; color: #6a4bc4; box-shadow: 0 2px 6px rgba(30, 20, 70, 0.3); animation: g-rise 2.2s ease-out forwards; }
.g-quality.q-excellent { background: #fff6cf; color: #a06800; }
.g-quality.q-extraordinary { background: linear-gradient(90deg, #e8f7ff, #f6e8ff); color: #5a2fb5; }
@keyframes g-rise { 0% { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -24px); } }
.plot-care { list-style: none; margin: 0.6rem 0 0; padding: 0; font-size: 0.88rem; }
.plot-care li { margin: 0.2rem 0; }
.plot-quality { margin: 0.4rem 0 0; font-size: 0.9rem; }
/* Garden weather, waiting crops, mimics and the Seed Collection Book. */
.garden-weather { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin: 0 0 0.5rem; padding: 0.35rem 0.8rem; border-radius: 12px; background: #eef1ff; color: #2a3a6a; font-size: 0.85rem; }
.garden-weather small { font-size: 0.78rem; color: #556; }
.garden-sky::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; }
/* Rain: separate drops (garden.js) falling at a slight slant, near ones longer and faster, plus little splashes. */
.garden-sky.wx-rain::after { background: linear-gradient(180deg, rgba(60, 80, 140, 0.26), rgba(60, 80, 140, 0.12)); }
.garden-sky.wx-night::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: rgba(35, 30, 95, 0.22); }
.garden-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.garden-rain i { position: absolute; top: -90px; width: 2.5px; border-radius: 2px; background: linear-gradient(180deg, rgba(240, 247, 255, 0), rgba(240, 247, 255, 0.95)); box-shadow: 0 0 1px rgba(40, 60, 120, 0.3); animation: wx-drop linear infinite; will-change: transform; }
.garden-rain i.far { width: 1.5px; opacity: 0.7; }
.garden-rain b { position: absolute; width: 18px; height: 6px; margin: -3px 0 0 -9px; border: 1.5px solid rgba(230, 242, 255, 0.8); border-radius: 50%; opacity: 0; animation: wx-splash ease-out infinite; }
@keyframes wx-drop { from { transform: translate3d(0, 0, 0) rotate(8deg); } to { transform: translate3d(-130px, 960px, 0) rotate(8deg); } }
@keyframes wx-splash { 0% { transform: scale(0.2); opacity: 0; } 8% { opacity: 0.9; } 30% { transform: scale(1); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .garden-rain { display: none; } }
.garden-sky.wx-snow::after, .garden-sky.wx-chilly::after { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px), radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1.5px, transparent 2.5px); background-size: 70px 70px, 45px 45px; background-position: 0 0, 20px 30px; animation: wx-snow 6s linear infinite; }
.garden-sky.wx-chilly::after { opacity: 0.4; }
@keyframes wx-snow { to { background-position: 30px 140px, 0 120px; } }
.garden-sky.wx-fog::after { background: linear-gradient(180deg, rgba(235, 235, 250, 0.1), rgba(235, 235, 250, 0.45) 60%, rgba(235, 235, 250, 0.2)); animation: wx-fog 8s ease-in-out infinite alternate; }
@keyframes wx-fog { from { opacity: 0.6; } to { opacity: 1; } }
.garden-sky.wx-starfall::after { background-image: linear-gradient(225deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 40px); background-size: 3px 60px; background-repeat: no-repeat; animation: wx-star 2.4s linear infinite; }
@keyframes wx-star { 0% { background-position: 80% -10%; } 100% { background-position: 30% 70%; opacity: 0; } }
.garden-sky.wx-clear:not(.wx-night)::after { background: radial-gradient(circle at 90% 5%, rgba(255, 236, 150, 0.55), rgba(255, 236, 150, 0) 35%); }
.g-mood.sleepy { background: #ece8ff; }
.g-mood.mimic { background: #f4eaff; }
.g-tile.mimic .g-img { transform-origin: 50% 70%; animation: g-wiggle 4s ease-in-out infinite; }
@keyframes g-wiggle { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-2.5deg); } 88% { transform: rotate(2.5deg); } 92% { transform: rotate(-1.5deg); } 96% { transform: rotate(1deg); } }
.g-quality.g-reveal { top: -6%; background: linear-gradient(90deg, #fff4d6, #ffe0f4); color: #7a3fb5; }
.book-extras { display: flex; justify-content: center; gap: 0.25rem; margin-top: 0.35rem; }
.book-chip { width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, 0.06); font-size: 0.85rem; opacity: 0.5; }
.book-chip.on { background: #fff6cf; opacity: 1; box-shadow: 0 0 6px rgba(255, 210, 80, 0.7); }
.discoveries { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.discoveries li { margin: 0.2rem 0; }
/* Food Shop orders and visiting friends' gardens. */
.food-orders .row.spread { align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }
.order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.8rem; margin-top: 0.6rem; }
.order-card { border-radius: 14px; padding: 0.8rem; background: rgba(255, 255, 255, 0.7); border: 2px dashed rgba(47, 109, 158, 0.25); display: flex; flex-direction: column; gap: 0.5rem; }
.order-card.ready { border: 2px solid #5cc77f; background: #f0fbf3; }
/* The Seed Shop keeper's starter quest. */
.farm-starter .speech { margin-bottom: 0.6rem; }
.farm-starter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.6rem; }
.farm-starter-goal { flex: 1 1 180px; }
.farm-starter-goal .bar { margin-top: 0.3rem; }
.farm-starter-rewards { display: flex; gap: 0.5rem; }
.farm-starter-rewards span { display: flex; flex-direction: column; align-items: center; text-align: center; width: 76px; }
.farm-starter-rewards .item-pic { width: 64px; height: 64px; object-fit: contain; }
.order-card.waiting { align-items: center; justify-content: center; text-align: center; min-height: 140px; }
.order-reason { font-style: italic; margin: 0; color: #5a4a7a; }
.order-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.order-lines li { display: flex; align-items: center; gap: 0.5rem; }
.order-lines .item-pic { width: 40px; height: 40px; }
.order-lines small { display: block; color: #667; font-size: 0.78rem; }
.order-lines li.ok b { color: #2f8a55; }
.order-tick { margin-left: auto; color: #2f8a55; font-weight: 800; }
.order-reward { margin: 0; font-weight: 700; }
.garden-visit-banner { margin-bottom: 0.7rem; }
.helps-list { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.helps-list li { padding: 0.25rem 0; border-bottom: 1px dashed rgba(47, 109, 158, 0.15); }
.garden-card.visiting .garden-tool[data-tool="plant"], .garden-card.visiting .garden-tool[data-tool="harvest"], .garden-card.visiting .garden-tool[data-tool="clear"], .garden-card.visiting .garden-tool[data-tool="decorate"],
.garden-card.visiting [data-bulk="plant"], .garden-card.visiting [data-bulk="harvest"] { display: none; }
/* Farm levels: the level bar, road map, records and the decorations that appear as the farm grows. */
.farm-level { margin-bottom: 0.7rem; }
.farm-level-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.farm-level-head small { margin-left: auto; }
.farm-level-badge { background: linear-gradient(135deg, #6fd18a, #3fa96b); color: #fff; font-weight: 800; border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.85rem; }
.farm-next { margin: 0.35rem 0 0; font-size: 0.85rem; }
.farm-badge { display: inline-block; margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 800; color: #2f8a55; }
.farm-newtitle { font-size: 1.05rem; }
.farm-unlocks { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.farm-reward { display: flex; align-items: center; gap: 0.6rem; }
.farm-reward .item-pic { width: 56px; height: 56px; }
.roadmap { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.roadmap li { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; border-radius: 10px; background: rgba(255, 255, 255, 0.55); opacity: 0.75; }
.roadmap li.reached { background: #e6f8ec; opacity: 1; }
.roadmap li.soon { opacity: 0.55; }
.roadmap li.soon em { font-size: 0.8rem; color: #8a7bd0; }
.rm-level { font-weight: 800; min-width: 3.2rem; color: #2f6d9e; }
.rm-icon { font-size: 1.15rem; }
.rm-text { flex: 1; }
.rm-check { color: #2f8a55; font-weight: 800; }
.farm-records { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.farm-records li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px dashed rgba(47, 109, 158, 0.15); }
.farm-records li b { text-align: right; }
.g-level { position: absolute; transform: translate(-50%, -50%); pointer-events: none; line-height: 1; }
.g-flower { font-size: 24px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.g-lantern { font-size: 28px; filter: drop-shadow(0 0 8px rgba(255, 170, 60, 0.95)); animation: g-lantern 2.6s ease-in-out infinite; }
@keyframes g-lantern { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 170, 60, 0.8)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 200, 90, 1)); } }
.g-light { width: 7px; height: 7px; border-radius: 50%; background: #ffd84d; box-shadow: 0 0 7px 3px rgba(255, 210, 80, 0.85); animation: g-twinkle 1.8s ease-in-out infinite; }
.g-light:nth-child(3n) { animation-delay: 0.6s; background: #ff8fd0; box-shadow: 0 0 7px 3px rgba(255, 130, 210, 0.8); }
.g-light:nth-child(3n + 1) { animation-delay: 1.2s; background: #7fd4ff; box-shadow: 0 0 7px 3px rgba(110, 200, 255, 0.8); }
@keyframes g-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.g-stone { width: 22px; height: 11px; border-radius: 50%; background: radial-gradient(ellipse at 40% 35%, #d9d6cf, #9c968b); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); }
.g-trophy { font-size: 24px; filter: drop-shadow(0 0 8px rgba(255, 215, 80, 0.9)); }
.g-fence { position: absolute; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(30, 20, 70, 0.25)); }
.g-fence.flip { transform: scaleX(-1); }
.g-tile .g-img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(30, 20, 70, 0.25)); }
.g-tile.selected .g-img { filter: drop-shadow(0 0 6px #fff7b0) drop-shadow(0 0 12px #ffe066); }
.g-tile[data-stage="grass"] .g-img { filter: saturate(0.85) brightness(0.92) drop-shadow(0 6px 6px rgba(30, 20, 70, 0.25)); }
.g-decor { position: absolute; left: 50%; top: calc(62% - 66px); width: 66px; height: 66px; margin-left: -33px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 2px rgba(30, 20, 70, 0.3)); }
.g-decor[hidden] { display: none; }
.g-ready { position: absolute; left: 50%; top: -6%; width: 52px; height: 52px; margin-left: -26px; animation: g-bob 1.8s ease-in-out infinite; }
.g-ready::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 150, 0.9), rgba(255, 220, 90, 0) 70%); animation: g-pulse 1.8s ease-in-out infinite; }
.g-ready img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
@keyframes g-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes g-pulse { 0%, 100% { opacity: 0.6; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
.g-hit { position: absolute; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; z-index: 100; }
.g-hit:hover, .g-hit:focus-visible { background: rgba(255, 255, 255, 0.28); outline: none; }
.g-hit.painted { background: rgba(255, 236, 120, 0.4); }
.g-spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fffbe0, #ffd84d 60%, transparent 70%); animation: g-spark 1s ease-out forwards; }
@keyframes g-spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx, 0), -60px) scale(0.3); opacity: 0; } }
.garden-toast { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 200; background: #fff; border: 3px solid var(--outline); border-radius: 14px; padding: 0.45rem 0.9rem; font-weight: 800; box-shadow: var(--shadow); max-width: 92%; text-align: center; animation: pop-in 0.2s; }
.garden-toast.error { border-color: var(--red); }
.garden-fireflies i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff6b0; box-shadow: 0 0 8px 3px rgba(255, 240, 150, 0.7); animation: g-float 7s ease-in-out infinite; pointer-events: none; }
.garden-fireflies i:nth-child(1) { left: 8%; top: 20%; } .garden-fireflies i:nth-child(2) { left: 88%; top: 15%; animation-delay: -1s; }
.garden-fireflies i:nth-child(3) { left: 15%; top: 70%; animation-delay: -2s; } .garden-fireflies i:nth-child(4) { left: 92%; top: 65%; animation-delay: -3s; }
.garden-fireflies i:nth-child(5) { left: 50%; top: 6%; animation-delay: -4s; } .garden-fireflies i:nth-child(6) { left: 30%; top: 88%; animation-delay: -5s; }
.garden-fireflies i:nth-child(7) { left: 72%; top: 85%; animation-delay: -2.5s; } .garden-fireflies i:nth-child(8) { left: 4%; top: 45%; animation-delay: -6s; }
@keyframes g-float { 0%, 100% { transform: translate(0, 0); opacity: 0.3; } 25% { opacity: 1; } 50% { transform: translate(14px, -18px); opacity: 0.6; } 75% { transform: translate(-10px, -8px); opacity: 1; } }
.garden-bulk { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.8rem; }
.garden-hint { text-align: center; margin: 0.4rem 0 0; }
.garden-side .card { margin-bottom: 1rem; }
.seed-bag { display: grid; gap: 0.4rem; }
.seed-pick { display: flex; align-items: center; gap: 0.5rem; border: 3px solid #e3edf7; border-radius: 14px; padding: 0.4rem 0.5rem; cursor: pointer; }
.seed-pick.on { border-color: var(--green); background: #effbf4; }
.seed-pick input { position: absolute; opacity: 0; pointer-events: none; }
.seed-pick img { width: 40px; height: 40px; object-fit: contain; }
.seed-pick .seed-result { width: 34px; height: 34px; opacity: 0.85; }
.seed-pick small { display: block; color: #6b7d8f; font-size: 0.78rem; }
.plot-info-head { display: flex; align-items: center; gap: 0.6rem; }
.plot-info-head img { width: 64px; }
.plot-crop { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0.4rem; font-weight: 800; }
.plot-crop img { width: 40px; height: 40px; object-fit: contain; }
.grow-steps { list-style: none; padding: 0; margin: 0 0 0.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.6rem; counter-reset: step; }
.grow-steps li { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; counter-increment: step; }
.grow-steps li::before { content: counter(step); position: absolute; left: 6px; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 0.75rem; font-weight: 800; display: grid; place-items: center; }
.grow-steps img { width: 84px; }
.grow-steps small { color: #6b7d8f; }
.g-tile.wild .g-img { filter: saturate(0.75) brightness(0.85) drop-shadow(0 6px 6px rgba(30, 20, 70, 0.25)); }
.g-tile.overgrown .g-img { filter: hue-rotate(-12deg) saturate(1.15) drop-shadow(0 6px 6px rgba(30, 20, 70, 0.25)); }
.g-tile.wilted .g-img { filter: sepia(0.85) saturate(0.7) brightness(0.85) drop-shadow(0 6px 6px rgba(30, 20, 70, 0.25)); }
.g-tile.wilted .g-ready { animation: none; }
.g-tile.wilted .g-ready::before { background: radial-gradient(circle, rgba(200, 160, 110, 0.6), rgba(200, 160, 110, 0) 70%); animation: none; }
.plot-warn { margin: 0.4rem 0 0; color: #a5640c; font-size: 0.9rem; }
.garden-rules { margin: 0.4rem 0 0; padding-left: 1.2rem; color: #4a5b70; } .garden-rules li { margin: 0.25rem 0; }

/* Avatar body picker: Base 1 / Base 2 and skin tone swatches */
.base-picker .bp-label { font-weight: 800; margin: 0.6rem 0 0.35rem; }
.base-picker .bp-label:first-child { margin-top: 0; }
.bp-bodies { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-body { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font: inherit; font-weight: 800; color: #3b4d66; background: #f4f9ff; border: 3px solid #d6e6f5; border-radius: 14px; padding: 0.35rem 0.6rem; cursor: pointer; }
.bp-body img { width: 54px; height: 81px; object-fit: contain; }
.bp-body:hover { border-color: var(--blue-mid); }
.bp-body.on { border-color: var(--blue); background: #e3f0ff; box-shadow: 0 0 0 2px #fff inset; }
.bp-tones { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bp-tone { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #fff; background: var(--swatch); box-shadow: 0 0 0 2px #cfe0f2; cursor: pointer; padding: 0; }
.bp-tone:hover { box-shadow: 0 0 0 2px var(--blue-mid); }
.bp-tone.on { box-shadow: 0 0 0 3px var(--blue); transform: scale(1.08); }
.pp-styles { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pp-style { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; font: inherit; font-size: 0.78rem; font-weight: 800; color: #3b4d66; background: #f4f9ff; border: 3px solid #d6e6f5; border-radius: 12px; padding: 0.25rem; cursor: pointer; width: 76px; }
.pp-style img { width: 60px; height: 60px; border-radius: 8px; }
.pp-style:hover { border-color: var(--blue-mid); }
.pp-style.on { border-color: var(--blue); background: #e3f0ff; }
.part-picker .bp-label { font-weight: 800; margin: 0.5rem 0 0.35rem; }
.part-picker .bp-label:first-child { margin-top: 0; }
.pp-none-icon { width: 60px; height: 60px; display: grid; place-items: center; font-size: 2rem; color: #9aabbf; background: #fff; border-radius: 8px; }

/* Admin item list: the filter fits any width, and phones skip the ID and Effects columns. */
.admin-filter { gap: 0.5rem; max-width: 100%; }
.admin-filter input[type="text"] { width: 200px; max-width: 100%; flex: 1 1 140px; }
.admin-filter select { width: auto; max-width: 100%; flex: 1 1 140px; min-width: 0; }
@media (max-width: 600px) { .items-table .wide-only { display: none; } .items-table td, .items-table th { padding: 0.4rem; } }

/* Adventure on phones and full screen */
.plat-full-btn { position: absolute; top: 8px; right: 8px; z-index: 5; width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--outline); background: rgba(255, 255, 255, 0.85); font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--outline); }
.plat-hud { right: 52px; }
.plat-wrap.plat-full { position: fixed; inset: 0; z-index: 90; border: 0; border-radius: 0; background: #03100c; display: flex; align-items: center; justify-content: center; }
.plat-wrap.plat-full #plat { width: 100%; height: 100%; object-fit: contain; }
body.no-scroll { overflow: hidden; }
.plat-screen { overflow-y: auto; }
@media (max-width: 600px) {
  .plat-hud { top: 6px; left: 6px; gap: 0.3rem; }
  .plat-hud-pet b { display: none; }
  .plat-hud-pet { padding: 0.1rem; }
  .plat-hud-pet img { width: 24px; height: 24px; }
  .plat-hud-bars { gap: 0.25rem; }
  .plat-hud-bars span { font-size: 0.66rem; padding: 0.05rem 0.4rem; }
  .plat-toast { top: 44px; font-size: 0.85rem; padding: 0.35rem 0.6rem; }
  .plat-touch button { width: 54px; height: 54px; font-size: 1.35rem; background: rgba(255, 255, 255, 0.55); }
  .plat-screen { padding: 0.8rem; justify-content: flex-start; }
  .plat-screen h2 { font-size: 1.35rem; margin: 0.2rem 0; }
  .plat-screen p { font-size: 0.85rem; margin: 0.3rem 0; }
}

/* Fishing on phones and full screen: the lake keeps its shape; on phones the start screen and reel box sit
   under the lake instead of covering it. */
.plat-wrap.plat-full { flex-direction: column; }
.plat-wrap.plat-full #lake { width: min(100vw, calc(100vh * 960 / 540)); height: auto; }
.plat-rotate { display: none; }
@media (max-width: 600px) {
  #fishing .plat-screen, #fishing .reel-box { position: static; transform: none; width: auto; border: 0; border-radius: 0; box-shadow: none; }
  #fishing .plat-screen { background: #0b3d63; }
  #fishing .reel-box { padding: 0.8rem; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .plat-wrap.plat-full .plat-rotate { display: block; position: absolute; bottom: 12px; left: 0; right: 0; margin: 0; text-align: center; color: #dff1ff; font-weight: 800; }
}
#fishing .plat-wrap.plat-full .plat-screen { position: absolute; inset: 0; background: rgba(11, 61, 99, 0.6); }
#fishing .plat-wrap.plat-full .reel-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 92%); border: 4px solid var(--outline); border-radius: 18px; }

/* Help desk */
.ticket-list li.unread { background: #f0fbf3; border-radius: 10px; }
.pill.ticket-open { background: #fff2cc; color: #7a5600; }
.pill.ticket-answered { background: #e1f7ea; color: #186b3e; }
.pill.ticket-closed { background: #eceff3; color: #5b6878; }
.ticket-thread { display: grid; gap: 0.7rem; margin: 1rem 0; }
.ticket-msg { border: 2px solid #d6e6f5; border-radius: 14px; padding: 0.7rem 0.9rem; background: #fff; margin-right: 2rem; }
.ticket-msg.staff { background: #eef6ff; border-color: #a9cdf2; margin-right: 0; margin-left: 2rem; }
.ticket-msg header { margin-bottom: 0.3rem; }
.ticket-shot { display: block; max-width: 100%; max-height: 320px; margin-top: 0.5rem; border-radius: 10px; border: 2px solid #d6e6f5; }
.ticket-reply { border-top: 2px dashed #d6e6f5; padding-top: 0.8rem; }
@media (max-width: 600px) { .ticket-msg { margin-right: 0.6rem; } .ticket-msg.staff { margin-left: 0.6rem; } }

/* Give Rewards: who gets it */
.who-choice { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
.who-choice label { cursor: pointer; }
.who-choice input { position: absolute; opacity: 0; pointer-events: none; }
.who-choice span { display: inline-block; padding: 0.5rem 1rem; border: 3px solid #d6e6f5; border-radius: 999px; font-weight: 800; background: #f4f9ff; }
.who-choice input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.who-choice input:focus-visible + span { outline: 3px solid #ffd84d; }
.who-all { display: none; }
form:has(input[name="who"][value="everyone"]:checked) .who-list { display: none; }
form:has(input[name="who"][value="everyone"]:checked) .who-all { display: block; }
.who-choice span small { color: inherit; opacity: 0.85; }

/* Clothing uploads per body (Base 1, Base 2, …) */
.body-uploads { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem; }
.body-upload { border: 2px solid #d6e6f5; border-radius: 14px; padding: 0.4rem 0.9rem 0.6rem; margin: 0; background: #fbfdff; }
.body-upload legend { font-weight: 800; padding: 0 0.4rem; }
.body-upload .small-check { font-weight: 600; font-size: 0.85rem; }

/* ==========================================================================
   Theme: "sky & pond" — soft blues, frosted-glass panels and rounded pills over a sky-and-water scene.
   The scene is public/img/theme/sky.svg (swap in hand-drawn art with the same name or update --scene).
   ========================================================================== */
:root {
  --ink: #1f4f7a;
  --ink-soft: #4f78a0;
  --outline: #2f78c8;
  --blue: #3d8fe6;
  --blue-mid: #6db6f5;
  --sky: #8ccaf8;
  --sky-light: #cfe7fb;
  --sky-pale: #f1f8ff;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-edge: rgba(176, 214, 246, 0.9);
  --radius: 26px;
  --shadow: 0 10px 30px rgba(61, 143, 230, 0.16), 0 2px 6px rgba(61, 143, 230, 0.08);
  --scene: url('/img/theme/sky.svg');
  --heading-font: 'Baloo 2', 'Fredoka', 'Nunito', sans-serif;
}
body { background: #cfe9fd; position: relative; }
/* The scene stays put while the page scrolls (a fixed layer, so it works on phones too). */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--scene) center bottom / cover no-repeat, linear-gradient(180deg, #86c9fb, #e3f3ff); }
h1, h2, h3, h4 { font-family: var(--heading-font); font-weight: 700; color: var(--outline); letter-spacing: 0.01em; }
h1 { text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8); }
a { color: #2f78c8; }

/* Header: logo on the sky, a frosted pill bar for the menu. */
.site-header { background: transparent; border-bottom: 0; box-shadow: none; }
.header-inner { padding-top: 0.6rem; }
.logo { width: 190px; filter: drop-shadow(0 4px 8px rgba(47, 120, 200, 0.18)); }
.search input { background: var(--glass-strong); border: 2px solid var(--glass-edge); border-right: 0; }
.search button { background: linear-gradient(180deg, #7cc0f7, var(--blue)); border: 2px solid var(--blue); }
.purse a { background: var(--glass-strong); border: 2px solid var(--glass-edge); box-shadow: 0 2px 8px rgba(61, 143, 230, 0.1); }
.main-nav { background: var(--glass); border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 999px; box-shadow: var(--shadow); padding: 0.35rem 0.6rem; margin: 0.3rem auto 0; max-width: calc(1200px - 32px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.main-nav > a, .nav-group > span { font-family: var(--heading-font); font-weight: 600; font-size: 1.02rem; color: #2f6db4; padding: 0.35rem 0.95rem; }
.main-nav > a:hover, .main-nav > a.on, .nav-group:hover > span, .nav-group:focus-within > span { background: rgba(141, 202, 248, 0.35); }
.nav-menu { border: 2px solid var(--glass-edge); border-radius: 18px; background: var(--glass-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-burger { background: var(--glass-strong); border: 2px solid var(--glass-edge); border-radius: 999px; padding: 0.35rem 1rem; display: none; }
@media (max-width: 760px) {
  .logo { width: 140px; }
  .nav-burger { display: inline-block; }
  .main-nav { border-radius: 22px; margin: 0 16px; max-width: none; }
}

/* Panels: frosted glass. */
.card { background: var(--glass); border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); outline: 1px solid var(--glass-edge); outline-offset: -3px; }
.card.soft { background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.8); outline: 0; box-shadow: none; }
.tile { background: var(--glass-strong); border: 2px solid var(--glass-edge); border-radius: 20px; }
.tile:hover { border-color: var(--sky); box-shadow: 0 6px 16px rgba(61, 143, 230, 0.15); }
.thumb { background: var(--sky-pale); }
.site-footer { background: var(--glass); border-top: 2px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink-soft); }
.flash { border-width: 2px; border-radius: 18px; box-shadow: var(--shadow); }
.tabs a { background: var(--glass-strong); border-color: var(--glass-edge); }

/* Buttons: soft blue pills. */
.btn { font-family: var(--heading-font); font-weight: 700; letter-spacing: 0.01em; background: linear-gradient(180deg, #7cc0f7, var(--blue)); border: 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 6px 14px rgba(61, 143, 230, 0.3); padding: 0.55rem 1.35rem; }
.btn:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(61, 143, 230, 0.3); }
.btn-small { padding: 0.32rem 0.9rem; }
.btn-light { background: rgba(255, 255, 255, 0.9); color: #2f78c8; box-shadow: inset 0 0 0 2px var(--sky), 0 4px 10px rgba(61, 143, 230, 0.12); }
.btn-green { background: linear-gradient(180deg, #7fe0ac, #3fb97a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 6px 14px rgba(63, 185, 122, 0.28); }
.btn-pink { background: linear-gradient(180deg, #f9b3cf, #ee7aa9); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 6px 14px rgba(238, 122, 169, 0.28); }
.btn-red { background: linear-gradient(180deg, #f59a93, #e5534b); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 6px 14px rgba(229, 83, 75, 0.25); }
.btn-gold { background: linear-gradient(180deg, #ffe08f, #f5b93b); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 6px 14px rgba(245, 185, 59, 0.3); }

/* Inputs: white pills with a soft blue edge. */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search]:not(.search input), select {
  background: rgba(255, 255, 255, 0.92); border: 2px solid var(--sky-light); border-radius: 999px; padding: 0.55rem 1.05rem;
}
textarea { background: rgba(255, 255, 255, 0.92); border: 2px solid var(--sky-light); border-radius: 20px; padding: 0.7rem 1rem; }
input:focus, select:focus, textarea:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 4px rgba(109, 182, 245, 0.25); }

/* Welcome page (logged out): pet art, greeting and login box, then a strip of what you can do. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.welcome { display: grid; grid-template-columns: 1fr 1.1fr minmax(280px, 0.9fr); gap: 1.5rem; align-items: center; margin: 1rem 0 1.5rem; }
.welcome-art img { width: 100%; max-width: 420px; display: block; margin: 0 auto; filter: drop-shadow(0 10px 20px rgba(47, 120, 200, 0.25)); }
.welcome-text { text-align: center; }
.welcome-text h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.05; color: #2f6db4; }
.welcome-text h1 span { display: block; font-size: 1.2em; background: linear-gradient(180deg, #4aa3f0, #2563c2); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.welcome-text p { color: #2f6db4; font-weight: 700; font-size: 1.1rem; max-width: 360px; margin: 0.6rem auto 1.2rem; }
.welcome-go { font-size: 1.25rem; padding: 0.75rem 2rem; }
.welcome-divider { display: flex; align-items: center; justify-content: center; gap: 0.6rem; color: #4b93e0; font-size: 1.1rem; margin: 0.4rem 0; }
.welcome-divider i { display: block; height: 2px; width: 70px; background: linear-gradient(90deg, transparent, #8ccaf8); border-radius: 2px; }
.welcome-divider i:last-child { background: linear-gradient(270deg, transparent, #8ccaf8); }
.welcome-divider.small { font-size: 0.9rem; margin: 0.8rem 0; }
.welcome-login { margin: 0; text-align: center; padding: 1.5rem; }
.welcome-login h2 { font-size: 1.3rem; color: #2f6db4; }
.welcome-login .btn { margin-top: 0.3rem; }
.icon-input { position: relative; margin-bottom: 0.75rem; }
.icon-input span { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); opacity: 0.6; pointer-events: none; }
.icon-input input { padding-left: 2.6rem !important; }
.welcome-features { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--glass); border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: 900px; margin: 0 auto 2rem; padding: 0.9rem 0.5rem; }
.welcome-features div { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.2rem 0.6rem; border-left: 2px solid var(--sky-light); }
.welcome-features div:first-child { border-left: 0; }
.welcome-features span { font-size: 1.6rem; color: #3d8fe6; line-height: 1.1; }
.welcome-features b { font-family: var(--heading-font); color: #2f6db4; font-size: 1.1rem; }
.welcome-features small { font-size: 0.85rem; }
@media (max-width: 960px) {
  .welcome { grid-template-columns: 1fr 1fr; }
  .welcome-login { grid-column: 1 / -1; max-width: 460px; width: 100%; margin: 0 auto; }
}
@media (max-width: 600px) {
  .welcome { grid-template-columns: 1fr; }
  .welcome-art img { max-width: 240px; }
  .welcome-features { grid-template-columns: 1fr 1fr; row-gap: 0.8rem; }
  .welcome-features div:nth-child(3) { border-left: 0; }
}

/* The user's background art (2400×1350): sky, clouds, the water pet on its lily pad and the reeds.
   Kept a little below centre so the pet and the pond stay in view on wide screens. */
:root { --scene: url('/img/theme/background.webp'); }
body::before { background: var(--scene) center 65% / cover no-repeat, linear-gradient(180deg, #86c9fb, #bfe8fd); }
.welcome-art.empty-art { min-height: 340px; } @media (max-width: 960px) { .welcome-art.empty-art { display: none; } .welcome { grid-template-columns: 1fr; } }

/* Background art: the plain scene on every page; the scene with the pet only on the welcome / login screens.
   Phones (and other tall, narrow screens) get the tall versions. */
:root { --scene: url('/img/theme/background.webp'); --scene-position: center 65%; }
body.welcome-page { --scene: url('/img/theme/background-pet.webp'); }
body::before { background: var(--scene) var(--scene-position) / cover no-repeat, linear-gradient(180deg, #86c9fb, #bfe8fd); }
@media (max-aspect-ratio: 4/5) {
  :root { --scene: url('/img/theme/background-mobile.webp'); --scene-position: center top; }
  body.welcome-page { --scene: url('/img/theme/background-pet-mobile.webp'); }
  /* Leave room at the top of the phone welcome page so the pet on its lily pad shows above the greeting. */
  body.welcome-page .welcome-art.empty-art { display: block; min-height: 34vh; }
}

/* Terms of Service and other long reading pages */
.legal { max-width: 820px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.legal h2 { margin-top: 1.75rem; scroll-margin-top: 1rem; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: 0.45rem; }
.legal-toc { background: rgba(255, 255, 255, 0.55); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 1rem 0; }
.legal-toc ol { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.25rem; }
.legal-toc li { margin-bottom: 0.2rem; break-inside: avoid; }
.legal mark.todo { background: #ffe58a; border-radius: 4px; padding: 0 0.25rem; }
@media (max-width: 600px) { .legal-toc ol { columns: 1; } }

/* Admin custom pet edit checker */
.edit-legend { font-size: 0.9rem; }
.edit-legend .key { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 3px; vertical-align: -0.1em; margin: 0 0.15rem 0 0.5rem; }
.edit-legend .key.grey { background: #9696a0; }
.edit-legend .key.green { background: #18aa46; }
.edit-legend .key.red { background: #e6323c; }
.edit-score { border-radius: 12px; padding: 0.6rem 0.8rem; margin: 0.5rem 0; border: 2px solid; }
.edit-score strong { font-size: 1.4rem; }
.edit-score small { display: block; opacity: 0.85; }
.edit-score.good { background: #e3f8e8; border-color: #6cc983; color: #17532a; }
.edit-score.close { background: #fff4d6; border-color: #f0bf4c; color: #6a4a00; }
.edit-score.over { background: #ffe3e3; border-color: #e97a7a; color: #7c1d1d; }

/* ---------- Fishing pond ---------- */
.pond-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.pond-tabs a { background: rgba(255, 255, 255, 0.75); border: 2px solid #fff; border-radius: 999px; padding: 0.3rem 0.9rem; font-weight: 800; text-decoration: none; }
.pond-tabs a.active { background: #2f6fe0; color: #fff; border-color: #2f6fe0; }
.pond-scene { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; border: 3px solid #fff; box-shadow: var(--shadow); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none; --sky1: #7fd0ff; --sky2: #d6f2ff; --water1: #58c1f2; --water2: #2a7fd0; --hill: #7cc77a; --hill2: #5aaa5f; }
.pond-scene:focus-visible { box-shadow: 0 0 0 4px #ffd34d, var(--shadow); }
.is-night .pond-scene { --sky1: #0e1840; --sky2: #2b3f7c; --water1: #24508e; --water2: #0d2550; --hill: #213a52; --hill2: #182c40; }
.pond-hollow .pond-scene { --water1: #4fbfae; --water2: #1f7a7a; --hill: #4f9a62; --hill2: #3c7f4f; }
.is-night.pond-hollow .pond-scene { --water1: #1d5a5a; --water2: #0b2f33; --hill: #1d3a35; --hill2: #142b27; }
/* Painted backgrounds (public/img/fishing) already have the sky, water, lily pads, dock and fireflies. */
.pond-scene.has-art { background: var(--art-wide) center / cover no-repeat; }
.pond-scene.has-art > .pond-sky, .pond-scene.has-art > .pond-hills, .pond-scene.has-art > .pond-willows, .pond-scene.has-art > .pond-water,
.pond-scene.has-art > .lily, .pond-scene.has-art > .firefly, .pond-scene.has-art > .pond-dock { display: none; }
.pond-sky { position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, var(--sky1), var(--sky2)); }
.pond-sun { position: absolute; right: 12%; top: 14%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff8c8 30%, #ffe27a 70%); box-shadow: 0 0 40px 12px rgba(255, 230, 120, 0.6); }
.is-night .pond-sun { background: radial-gradient(circle at 35% 35%, #fffef0 40%, #dfe6ff 75%); box-shadow: 0 0 30px 8px rgba(220, 230, 255, 0.45); width: 7%; }
.pond-stars { position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 55%, #fff, transparent), radial-gradient(2px 2px at 48% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 62% 42%, #fff, transparent), radial-gradient(2px 2px at 76% 64%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 80%, #fff, transparent), radial-gradient(2px 2px at 6% 60%, #fff, transparent); animation: twinkle 3s ease-in-out infinite alternate; }
.is-night .pond-stars { opacity: 1; }
@keyframes twinkle { from { opacity: 0.6; } to { opacity: 1; } }
.pond-hills { position: absolute; left: -5%; right: -5%; top: 34%; height: 14%; background: radial-gradient(ellipse 30% 100% at 20% 100%, var(--hill) 98%, transparent 100%), radial-gradient(ellipse 35% 120% at 62% 100%, var(--hill2) 98%, transparent 100%), radial-gradient(ellipse 30% 90% at 95% 100%, var(--hill) 98%, transparent 100%); }
.pond-willows { display: none; position: absolute; inset: 0 0 auto 0; height: 34%; background: repeating-linear-gradient(90deg, transparent 0 3%, rgba(70, 140, 80, 0.85) 3% 3.6%, transparent 3.6% 7%); -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); animation: sway 6s ease-in-out infinite alternate; transform-origin: top; }
.is-night .pond-willows { background: repeating-linear-gradient(90deg, transparent 0 3%, rgba(30, 70, 50, 0.9) 3% 3.6%, transparent 3.6% 7%); }
.pond-hollow .pond-willows { display: block; }
@keyframes sway { from { transform: skewX(-2deg); } to { transform: skewX(2deg); } }
.pond-water { position: absolute; inset: 46% 0 0 0; background: linear-gradient(180deg, var(--water1), var(--water2)); overflow: hidden; }
.pond-water::before, .pond-shine { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(170deg, transparent 0 22px, rgba(255, 255, 255, 0.16) 22px 24px, transparent 24px 60px); animation: shimmer 7s linear infinite; }
.pond-shine { background: repeating-linear-gradient(10deg, transparent 0 30px, rgba(255, 255, 255, 0.1) 30px 32px, transparent 32px 80px); animation-duration: 11s; animation-direction: reverse; }
@keyframes shimmer { from { background-position: 0 0; } to { background-position: 240px 40px; } }
.lily { position: absolute; width: 8%; aspect-ratio: 1.6; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #7ed67a, #3f9f4f); transform: translate(-50%, -50%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 55%, 48% 50%, 0 45%); animation: lily 5s ease-in-out infinite alternate; }
.lily.small { width: 5.5%; }
.lily::after { content: ''; position: absolute; right: 22%; top: 18%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ffc2dc; box-shadow: 0 0 0 2px #fff inset; }
.lily.small::after { display: none; }
.is-night .lily { filter: brightness(0.6); }
@keyframes lily { from { margin-top: -2px; } to { margin-top: 2px; } }
.firefly { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff7a8; box-shadow: 0 0 10px 4px rgba(255, 240, 120, 0.7); animation: firefly 6s ease-in-out infinite; }
@keyframes firefly { 0%, 100% { transform: translate(0, 0); opacity: 0.2; } 50% { transform: translate(30px, -18px); opacity: 1; } }
.pond-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.pond-rod { position: absolute; left: 20.5%; bottom: 15%; height: 46%; z-index: 5; pointer-events: none; transform-origin: 2% 99%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25)); }
.pond-rod.rod-cast { animation: rod-cast 0.55s ease; }
.pond-rod.rod-tug { animation: rod-tug 0.25s ease-in-out 3; }
@keyframes rod-cast { 30% { transform: rotate(-22deg); } 65% { transform: rotate(8deg); } }
@keyframes rod-tug { 50% { transform: rotate(7deg); } }
.pond-line .line { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pond-dock { position: absolute; left: -2%; bottom: 0; width: 30%; height: 20%; background: repeating-linear-gradient(90deg, #b07a4a 0 18%, #8e5f37 18% 20%); border-top: 6px solid #c99062; border-radius: 0 12px 0 0; z-index: 2; box-shadow: 0 6px 0 #6b4526 inset; }
.pond-pet { position: absolute; left: 3%; bottom: 13%; width: 17%; aspect-ratio: 1; object-fit: contain; z-index: 4; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)); transform-origin: bottom center; }
.pond-pet.pet-happy { animation: pet-happy 0.9s ease; }
.pond-pet.pet-sad { animation: pet-sad 0.8s ease; }
.pond-pet.pet-alert { animation: pet-alert 0.3s ease; }
@keyframes pet-happy { 0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-22%) rotate(-6deg); } 40% { transform: translateY(0) scale(1.05, 0.95); } 60% { transform: translateY(-12%) rotate(5deg); } 80% { transform: translateY(0); } }
@keyframes pet-sad { 0%, 100% { transform: none; } 30% { transform: translateY(4%) scale(1.02, 0.95) rotate(-3deg); } 60% { transform: translateY(4%) scale(1.02, 0.95) rotate(3deg); } }
@keyframes pet-alert { 50% { transform: translateY(-6%) scale(1.04); } }
.bobber { position: absolute; width: 5.2%; min-width: 24px; aspect-ratio: 1; transform: translate(-50%, -60%); z-index: 5; pointer-events: none; }
.bobber img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); }
.fx-sparkle { position: absolute; width: 10px; height: 10px; transform: translate(-50%, -50%); background: radial-gradient(circle, #fff 0 20%, #ffe9a8 35%, transparent 70%); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sparkle 1.1s ease-out forwards; }
@keyframes sparkle { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } 30% { opacity: 1; transform: translate(-50%, -80%) scale(1.3); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(0.6) rotate(90deg); } }
.bobber-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.2rem auto 0.6rem; }
.bobber-pick-label { font-weight: 800; }
.bobber-choice { display: flex; align-items: center; gap: 0.25rem; background: rgba(255, 255, 255, 0.75); border: 2px solid #fff; border-radius: 999px; padding: 0.15rem 0.7rem 0.15rem 0.25rem; font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.bobber-choice img { width: 28px; height: 28px; object-fit: contain; }
.bobber-choice.active { background: #2f6fe0; border-color: #2f6fe0; color: #fff; }
.bobber-pick-tip { font-size: 0.85rem; }
.bobber-perk { font-size: 0.85rem; font-weight: 700; margin: -0.3rem 0 0.6rem; }
/* Reeling panel: a tall track with the green zone and the fish, the catch meter beside it, line strain below. */
.reel-panel { position: absolute; right: 3%; top: 15%; bottom: 15%; width: 15%; min-width: 86px; z-index: 8; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: linear-gradient(180deg, rgba(235, 247, 255, 0.95), rgba(214, 238, 255, 0.95)); border: 3px solid #fff; border-radius: 18px; box-shadow: 0 6px 18px rgba(10, 40, 90, 0.35); animation: pop-in 0.35s cubic-bezier(.2, 1.4, .4, 1); cursor: pointer; }
.reel-panel[hidden] { display: none; }
.reel-bars { flex: 1; display: flex; gap: 6px; min-height: 0; }
.reel-track { position: relative; flex: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #8fd3ff, #2f78c8 60%, #18467f); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3); }
.reel-zone { position: absolute; left: 4px; right: 4px; bottom: 0; border-radius: 8px; background: rgba(120, 230, 140, 0.45); border: 2px solid #b8ffc4; box-shadow: 0 0 8px rgba(150, 255, 170, 0.5); transition: background 0.15s, border-color 0.15s; }
.reel-zone.has-fish { background: rgba(120, 240, 140, 0.7); border-color: #fff; box-shadow: 0 0 14px rgba(170, 255, 190, 0.9); }
.reel-fish { position: absolute; left: 50%; bottom: 50%; width: 70%; max-width: 46px; transform: translate(-50%, 50%); pointer-events: none; }
.reel-fish svg { display: block; width: 100%; fill: #13325e; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7)); animation: fish-wiggle 0.4s ease-in-out infinite alternate; }
.reel-fish.big { width: 88%; max-width: 58px; }
.reel-fish.dash svg { animation-duration: 0.12s; }
@keyframes fish-wiggle { from { transform: rotate(-8deg) scaleX(-1); } to { transform: rotate(8deg) scaleX(-1); } }
.reel-meter { position: relative; width: 12px; border-radius: 999px; overflow: hidden; background: rgba(20, 50, 90, 0.25); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
.reel-meter-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; border-radius: 999px; background: linear-gradient(0deg, #4fd36b, #ffe066); }
.reel-strain { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 800; color: #23407a; }
.reel-strain-bar { flex: 1; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(20, 50, 90, 0.2); }
.reel-strain-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8be0a0, #ffd34d 60%, #ff5a5a); background-size: 300% 100%; }
.reel-panel.strained .reel-strain { color: #d63a3a; animation: wiggle 0.1s linear infinite; }
.reel-panel.strained .reel-track { box-shadow: inset 0 0 0 3px #ff6b6b, inset 0 2px 6px rgba(0, 0, 0, 0.3); }
.bobber.fighting { animation: thrash 0.22s ease-in-out infinite alternate; }
@keyframes thrash { from { transform: translate(-58%, -50%) rotate(-12deg); } to { transform: translate(-42%, -45%) rotate(12deg); } }
.bobber.floating { animation: bob 1.6s ease-in-out infinite; }
.bobber.nibble { animation: nibble 0.35s ease; }
.bobber.biting { animation: plunge 0.5s ease forwards; }
.bobber.biting.big { animation: plunge 0.4s ease forwards, wiggle 0.15s 0.4s linear infinite; }
@keyframes bob { 50% { transform: translate(-50%, -48%); } }
@keyframes nibble { 40% { transform: translate(-50%, -30%); } }
/* Only the bobber picture sinks under the water line, so the "!" above it stays visible. */
@keyframes plunge { to { transform: translate(-50%, 0%); } }
.bobber.biting img { animation: sink 0.5s ease forwards; }
@keyframes sink { to { clip-path: inset(0 0 45% 0); } }
@keyframes wiggle { 50% { margin-left: 3px; } }
/* The user's pixel "!" (public/img/fishing/alert.png) pops up over the bobber on a bite. */
.bobber-mark { position: absolute; left: 50%; bottom: 115%; width: 0.6rem; aspect-ratio: 8 / 34; transform: translateX(-50%) scale(0); background: url('/img/fishing/alert.png') center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); color: transparent; font-size: 0; transition: transform 0.15s; }
.bobber-mark.show { transform: translateX(-50%) scale(1); animation: mark 0.4s ease infinite alternate; }
@keyframes mark { to { margin-bottom: 4px; } }
.fish-shadow { position: absolute; width: 9%; aspect-ratio: 2.2; border-radius: 50%; background: rgba(10, 30, 60, 0.35); filter: blur(3px); transform: translate(calc(-50% + var(--from, 10%)), -50%); animation: approach 1.3s ease-in forwards; z-index: 1; pointer-events: none; }
.fish-shadow.big { width: 14%; }
@keyframes approach { to { transform: translate(-50%, -50%); } }
.pond-fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.fx-ripple { position: absolute; width: 4%; aspect-ratio: 2.6; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; transform: translate(-50%, -50%) scale(0.3); animation: ripple 1.2s ease-out forwards; }
.fx-ripple.big { border-width: 3px; }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } }
.fx-drop { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #e6f7ff; box-shadow: 0 0 0 1px rgba(40, 120, 200, 0.4); animation: drop 0.7s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes drop { 60% { transform: translate(var(--dx), var(--dy)); opacity: 1; } to { transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) * -0.2)); opacity: 0; } }
.fx-bubble { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); animation: bubble 1.4s ease-out forwards; }
@keyframes bubble { to { transform: translateY(-40px); opacity: 0; } }
.fx-heart { position: absolute; width: 1.5rem; aspect-ratio: 24 / 18; background: url('/img/fishing/heart.png') center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 2px #fff); animation: heart 1.5s ease-out forwards; }
@keyframes heart { from { transform: translate(-50%, 0) scale(0.5); opacity: 1; } to { transform: translate(-50%, -70px) scale(1.2); opacity: 0; } }
.pond-clock { position: absolute; left: 10px; top: 10px; z-index: 7; background: rgba(255, 255, 255, 0.8); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.85rem; font-weight: 700; }
.pond-mute { position: absolute; right: 10px; top: 10px; z-index: 7; border: 0; background: rgba(255, 255, 255, 0.8); border-radius: 50%; width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1rem; }
.pond-status { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 7; background: rgba(15, 40, 80, 0.55); color: #fff; border-radius: 999px; padding: 0.3rem 1rem; font-weight: 700; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.pond-reveal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(10, 25, 60, 0.45); animation: fade-in 0.25s ease; --glow: #ffe27a; }
.pond-reveal[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }
.reveal-rays { position: absolute; width: 160%; aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--glow) 55%, transparent) 0 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 60%); mask: radial-gradient(circle, #000 15%, transparent 60%); animation: rays 12s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.pond-reveal.r-uncommon { --glow: #8fe3a8; } .pond-reveal.r-rare { --glow: #8cb8ff; } .pond-reveal.r-very-rare { --glow: #c3a2ff; } .pond-reveal.r-super-rare { --glow: #ff9fd6; } .pond-reveal.r-ultra-rare { --glow: #ffb36b; } .pond-reveal.glowing { --glow: #fffbd0; }
/* The catch card is the banner art; everything inside is sized in cqw (1% of the card's width) so it scales on phones.
   The catch's picture glows on the left; its name, rarity and rewards go on the right, under the ribbon for a new fish. */
.pond-reveal { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 4% 0; }
.reveal-card { position: relative; flex: none; width: min(470px, 92%); aspect-ratio: 253 / 151; container-type: inline-size; background: url('/img/fishing/banner-card.png') center / 100% 100% no-repeat; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3)); animation: pop-in 0.45s cubic-bezier(.2, 1.4, .4, 1); cursor: default; }
.reveal-ribbon { display: none; position: absolute; left: 67.5%; top: -9cqw; width: 62cqw; transform: translateX(-50%); overflow: visible; filter: drop-shadow(0 1cqw 1cqw rgba(30, 80, 150, 0.3)); animation: ribbon-in 0.6s 0.15s cubic-bezier(.2, 1.5, .4, 1) backwards; }
.new-fish .reveal-ribbon { display: block; }
.reveal-ribbon-text { font: 800 29px Fredoka, sans-serif; letter-spacing: 1px; fill: #fff; stroke: #1d5fae; stroke-width: 6px; stroke-linejoin: round; paint-order: stroke; }
@keyframes ribbon-in { from { transform: translateX(-50%) scale(0.4) rotate(-6deg); opacity: 0; } }
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } }
.reveal-grade { position: absolute; left: 4%; top: -4.5cqw; background: #fff; border: 0.6cqw solid #bfe3ff; border-radius: 999px; padding: 0.6cqw 2.6cqw; font: 900 max(3.8cqw, 12px) / 1.2 Fredoka, sans-serif; color: #2f6fe0; letter-spacing: 0.04em; }
.reveal-grade:empty { display: none; }
.grade-perfect .reveal-grade { color: #e09b00; border-color: #ffe08a; text-shadow: 0 0 8px rgba(255, 210, 80, 0.7); }
.reveal-pic { position: absolute; left: 6%; top: 50%; width: 32cqw; aspect-ratio: 1; transform: translateY(-50%); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 70%, #fff) 0 30%, color-mix(in srgb, var(--glow) 35%, transparent) 50%, transparent 70%); }
.reveal-pic img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 1cqw 1.2cqw rgba(20, 60, 110, 0.35)); animation: swim-in 0.6s cubic-bezier(.2, 1.4, .4, 1); }
.glowing .reveal-pic img { filter: drop-shadow(0 0 2.5cqw #fff6b0) drop-shadow(0 0 1cqw #fff6b0); }
@keyframes swim-in { from { transform: scale(0.3) rotate(-25deg); } }
.reveal-body { position: absolute; left: 40%; right: 5%; top: 9%; bottom: 17%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqw; text-align: center; overflow: hidden; }
.new-fish .reveal-body { top: 22%; bottom: 15%; }
.reveal-card h2 { margin: 0; font: 800 max(5.6cqw, 15px) / 1.1 Fredoka, sans-serif; color: #23407a; overflow-wrap: anywhere; }
.reveal-body .rarity { font-size: max(3cqw, 10px); }
.reveal-rewards { list-style: none; margin: 0.6cqw 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqw 1.4cqw; }
.reveal-rewards li { background: rgba(255, 255, 255, 0.85); border: 0.4cqw solid #cfe8ff; border-radius: 999px; padding: 0.5cqw 2cqw; font-weight: 800; font-size: max(3cqw, 10px); color: #2a4a7a; white-space: nowrap; }
.reveal-ok { position: absolute; left: 50%; bottom: -5.5cqw; transform: translateX(-50%); width: 34cqw; padding: 1.5cqw 0; font: 900 max(5cqw, 15px) / 1 Fredoka, sans-serif; letter-spacing: 0.06em; color: #fff; text-shadow: 0 0.4cqw 0 #1f7f8f; background: linear-gradient(180deg, #7fe0e4, #33a9bb); border: 0.8cqw solid #fff; border-radius: 999px; box-shadow: 0 1cqw 0 #23889a, 0 1.5cqw 3cqw rgba(0, 0, 0, 0.25); cursor: pointer; }
.reveal-ok:hover { filter: brightness(1.06); }
.reveal-ok:active { transform: translate(-50%, 0.6cqw); box-shadow: 0 0.4cqw 0 #23889a; }
.reveal-ok:focus-visible { outline: 3px solid #ffd34d; outline-offset: 2px; }
.reveal-more { position: relative; width: min(470px, 92%); margin-top: 2.2rem; background: rgba(255, 255, 255, 0.92); border-radius: 14px; padding: 0.4rem 0.8rem; text-align: center; font-size: 0.85rem; animation: pop-in 0.45s 0.1s cubic-bezier(.2, 1.4, .4, 1) backwards; cursor: default; }
.reveal-more[hidden] { display: none; }
.reveal-desc { margin: 0.2rem 0; font-style: italic; }
.reveal-desc:empty { display: none; }
.reveal-extra { background: #fff6d6; border-radius: 10px; padding: 0.3rem 0.6rem; margin: 0.3rem 0; }
.pond-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0.8rem 0 0.3rem; flex-wrap: wrap; }
.btn-cast { font-size: 1.2rem; padding: 0.6rem 2rem; }
.pond-energy { background: rgba(255, 255, 255, 0.75); border-radius: 999px; padding: 0.3rem 0.9rem; font-weight: 700; }
.pond-help { font-size: 0.88rem; max-width: 640px; margin: 0.2rem auto 1rem; }
.pond-recent { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.recent-catch { position: relative; width: 52px; height: 52px; background: rgba(255, 255, 255, 0.7); border-radius: 12px; display: grid; place-items: center; }
.recent-catch img { width: 44px; height: 44px; object-fit: contain; }
.recent-catch b { position: absolute; right: -4px; bottom: -4px; background: #2f6fe0; color: #fff; border-radius: 999px; font-size: 0.7rem; padding: 0 0.35rem; }
@media (max-width: 600px) {
  .pond-scene { aspect-ratio: 4 / 5; }
  .pond-scene.has-art { background-image: var(--art-tall); }
  .pond-sky { bottom: 55%; }
  .pond-hills { top: 30%; height: 16%; }
  .pond-water { top: 42%; }
  .pond-pet { width: 26%; bottom: 11%; }
  .pond-dock { width: 40%; height: 17%; }
  .lily { width: 13%; } .lily.small { width: 9%; }
  .bobber { width: 8.5%; }
  .pond-rod { left: 28.5%; bottom: 12%; height: 36%; }
  .reel-panel { width: 27%; top: 13%; bottom: 13%; padding: 6px; }
  .fish-shadow { width: 16%; } .fish-shadow.big { width: 24%; }
  .pond-status { font-size: 0.85rem; }
}

/* Fishing collection book */
.book-progress { height: 14px; background: rgba(255, 255, 255, 0.7); border-radius: 999px; overflow: hidden; margin: 0.4rem 0 1rem; }
.book-progress span { display: block; height: 100%; background: linear-gradient(90deg, #5fd1a0, #2f6fe0); border-radius: 999px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
@media (max-width: 600px) { .book-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; } .book-card img { width: 64px; height: 64px; } }
.book-card { background: rgba(255, 255, 255, 0.8); border: 2px solid #fff; border-radius: 16px; padding: 0.6rem; text-align: center; position: relative; }
.book-card img { width: 80px; height: 80px; object-fit: contain; }
.book-card.missing img { filter: brightness(0) opacity(0.28); }
.book-card.missing h3 { color: #8a97a6; }
.book-card h3 { font-size: 0.95rem; margin: 0.2rem 0; }
.book-card .hint { font-size: 0.75rem; color: #5b6b7d; margin: 0.2rem 0 0; }
.book-card .stats { font-size: 0.8rem; font-weight: 700; margin: 0.2rem 0 0; }
.book-card .tag { position: absolute; top: 6px; right: 6px; font-size: 0.7rem; background: #ff9f43; color: #fff; border-radius: 999px; padding: 0 0.4rem; font-weight: 800; }
.book-card.glow-card:not(.missing) { background: linear-gradient(160deg, #fffbe6, #fff); box-shadow: 0 0 14px rgba(255, 220, 120, 0.6); }
.btn-cast.btn-hook { background: linear-gradient(180deg, #ffb347, #ff7a3d); border-color: #e0662a; animation: mark 0.6s ease infinite alternate; }

/* ---------- Adventure (isometric pixel map) ---------- */
.iso-wrap { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; border: 3px solid #fff; box-shadow: var(--shadow); background: #2f6e34; }
.iso-wrap.theme-cave { background: #0a0712; }
.iso-wrap.theme-beach { background: #1f5d93; }
.iso-wrap canvas#iso { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; outline: none; }
.iso-hud { position: absolute; left: 8px; top: 8px; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; pointer-events: none; max-width: calc(100% - 140px); }
.iso-hud-pet { display: flex; align-items: center; gap: 0.3rem; background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 0.15rem 0.6rem 0.15rem 0.2rem; font-size: 0.85rem; }
.iso-hud-pet img { width: 26px; height: 26px; object-fit: contain; }
.iso-hud-bars { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.iso-hud-bars span { background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.8rem; font-weight: 700; }
.iso-mini { position: absolute; right: 8px; top: 48px; width: 96px; height: 96px; image-rendering: pixelated; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 8px; background: rgba(0, 0, 0, 0.35); pointer-events: none; }
.iso-btn { position: absolute; border: 0; background: rgba(255, 255, 255, 0.88); border-radius: 999px; padding: 0.3rem 0.7rem; font-weight: 800; cursor: pointer; z-index: 3; }
.iso-full-btn { right: 8px; top: 8px; width: 2.2rem; height: 2.2rem; padding: 0; }
.iso-leave { right: 8px; bottom: 8px; }
.iso-toast { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 0.4rem; background: rgba(20, 30, 60, 0.82); color: #fff; padding: 0.35rem 0.9rem; border-radius: 999px; font-weight: 700; z-index: 3; max-width: 86%; pointer-events: none; }
.iso-toast img { width: 26px; height: 26px; object-fit: contain; }
.iso-screen { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; text-align: center; padding: 1rem 1.5rem; background: rgba(8, 18, 40, 0.78); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.iso-screen[hidden] { display: none; }
.iso-screen h2 { color: #fff; margin: 0 0 0.3rem; }
.iso-screen p { max-width: 560px; margin: 0.3rem auto; }
.iso-screen .muted, .iso-screen .muted small, .iso-screen .muted b { color: #f2f6ff; }
.iso-screen .btn { justify-self: center; margin-top: 0.5rem; }
.iso-wrap.iso-full { position: fixed; inset: 0; z-index: 50; aspect-ratio: auto; border-radius: 0; border: 0; }
.iso-wrap.theme-forest { background: #1f3d22; }
.iso-wrap.theme-snow { background: #8fb3cf; }
.iso-wrap.theme-dream { background: #5e4699; }
.iso-music-btn { right: 8px; top: 152px; width: 2.2rem; height: 2.2rem; padding: 0; }
.iso-hazard { background: rgba(255, 190, 80, 0.2); border-radius: 12px; padding: 0.4rem 0.8rem; }
.iso-hazard.safe { background: rgba(120, 220, 140, 0.2); }
/* Quests in the corner of the map */
.iso-quests { position: absolute; left: 8px; bottom: 8px; z-index: 3; max-width: min(300px, 60%); display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; }
.iso-quests:empty { display: none; }
.iso-quests-toggle { align-self: flex-start; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.9); font-weight: 800; padding: 0.2rem 0.7rem; cursor: pointer; }
.iso-quest { background: rgba(20, 30, 60, 0.78); color: #fff; border-radius: 10px; padding: 0.3rem 0.55rem; line-height: 1.3; }
.iso-quest .done { opacity: 0.7; }
.iso-quest.ready { background: rgba(30, 110, 60, 0.85); }
/* Talking to characters */
.npc-dialog .card { position: relative; text-align: left; max-height: calc(100vh - 32px); overflow-y: auto; }
.npc-close { position: absolute; right: 10px; top: 10px; border: 0; background: var(--sky-pale); border-radius: 50%; width: 2rem; height: 2rem; font-weight: 900; cursor: pointer; }
.npc-head { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; }
.npc-head img { width: min(220px, 60vw); height: min(220px, 60vw); object-fit: contain; image-rendering: pixelated; background: radial-gradient(circle at 50% 60%, #ffffff, var(--sky-pale) 70%); border-radius: 24px; flex: none; }
.npc-portrait { width: 84px; height: 84px; object-fit: contain; image-rendering: pixelated; background: var(--sky-pale); border-radius: 16px; flex: none; }
.npc-head h2 { margin: 0; }
.npc-friend { font-size: 0.85rem; margin-top: 0.2rem; }
.npc-friend .bar { height: 10px; margin: 0.15rem auto; width: 220px; max-width: 100%; }
.npc-says { font-size: 1.05rem; font-style: italic; background: var(--sky-pale); border-radius: 14px; padding: 0.6rem 0.9rem; margin: 0.8rem 0 0.5rem; }
.npc-lines p { margin: 0.2rem 0; }
.npc-tabs { margin: 0.6rem 0; }
.npc-body h4 { margin: 0.6rem 0 0.2rem; }
.quest-card { border: 2px solid var(--sky-light); border-radius: 14px; padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; }
.quest-card.ready { border-color: #4caf6a; box-shadow: 0 0 0 3px #e1f7ea; }
.quest-card.locked, .quest-card.cooldown, .quest-card.done { opacity: 0.75; }
.quest-card p { margin: 0.3rem 0; }
.quest-ready { color: #186b3e; }
.quest-goals, .req-list { list-style: none; padding: 0; margin: 0.4rem 0; text-align: left; }
.quest-goals li, .req-list li { padding: 0.15rem 0; }
.quest-goals li.met, .req-list li.met { color: #186b3e; }
.territory-icon { font-size: 3.2rem; line-height: 1.2; }
.wish-form { display: inline; }
.tile .wish-form { position: absolute; top: 6px; left: 6px; z-index: 1; }
.wish-btn { border: 2px solid var(--sky-light); background: #fff; border-radius: 50%; width: 2rem; height: 2rem; padding: 0; font-size: 1.05rem; line-height: 1; cursor: pointer; color: #e0507a; }
.wish-btn:hover { border-color: #e0507a; }
.wish-btn.on { background: #eaf4ff; border-color: var(--blue); }
.explorer-title { display: inline-block; font-size: 0.8rem; font-weight: 800; color: #8a5a00; font-style: italic; }
.explorer-title-lg { font-size: 1rem; margin: -0.3rem 0 0.4rem; }
.rank-card { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.rank-badge { font-size: 2.6rem; line-height: 1; }
.rank-card .bar { min-width: 200px; flex: 1; }
/* Field journal: things not found yet show as silhouettes */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.7rem; }
.guide-entry { text-align: center; border: 2px solid var(--sky-light); border-radius: 14px; padding: 0.5rem; background: #fff; font-size: 0.82rem; }
.guide-entry img { width: 64px; height: 64px; object-fit: contain; }
.guide-entry img.pixel { image-rendering: pixelated; }
.guide-entry.unfound img { filter: brightness(0) opacity(0.35); }
.guide-entry.unfound .name { color: var(--ink-soft); }
.guide-entry .name { font-weight: 800; display: block; }
.guide-entry small { display: block; color: var(--ink-soft); line-height: 1.25; margin-top: 0.2rem; }
.ach-card { display: flex; gap: 0.7rem; align-items: center; border: 2px solid var(--sky-light); border-radius: 14px; padding: 0.6rem 0.8rem; background: #fff; }
.ach-card .ach-icon { font-size: 2rem; }
.ach-card.locked { opacity: 0.75; }
.ach-card.locked .ach-icon { filter: grayscale(1); }
.ach-card.earned { border-color: #e0b030; box-shadow: 0 0 0 3px #fff2cc; }
.ach-card .bar { height: 8px; margin-top: 0.25rem; }
.tile.locked { opacity: 0.8; background: rgba(240, 244, 250, 0.85); }
.tile.locked .territory-icon { filter: grayscale(0.6); }
@media (max-width: 600px) {
  .iso-wrap { aspect-ratio: 4 / 5; }
  .iso-mini { width: 72px; height: 72px; }
  .iso-music-btn { top: 128px; }
  .iso-screen { font-size: 0.9rem; padding: 0.8rem; }
  .iso-quests { max-width: 70%; font-size: 0.72rem; }
}

/* Admin adventure map editor */
.me-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.me-palette { display: flex; flex-direction: column; gap: 0.25rem; max-height: 70vh; overflow: auto; padding-right: 0.3rem; }
.me-palette h4 { margin: 0.6rem 0 0.2rem; font-size: 0.85rem; }
.me-swatch { display: flex; align-items: center; gap: 0.4rem; text-align: left; border: 2px solid transparent; background: rgba(255, 255, 255, 0.7); border-radius: 10px; padding: 0.2rem 0.4rem; cursor: pointer; font-size: 0.8rem; }
.me-swatch img { width: 28px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.me-swatch.on { border-color: #2f6fe0; background: #fff; }
.me-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 0.75rem; flex: none; }
.me-tools { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.5rem; font-size: 0.85rem; }
.me-tools select { width: auto; }
.me-stats { font-size: 0.8rem; }
.me-warn { color: #c0392b; }
.me-grid-wrap { overflow: auto; max-height: 70vh; border-radius: 10px; background: #11131a; }
#me-grid { display: block; image-rendering: pixelated; cursor: crosshair; touch-action: none; }
.me-status { font-size: 0.85rem; min-height: 1.2em; margin: 0.4rem 0 0; }
.me-preview { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #2f6e34; }
.me-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.me-more { margin-top: 0.8rem; }
@media (max-width: 1100px) { .me-layout { grid-template-columns: 160px minmax(0, 1fr); } .me-side { grid-column: 1 / -1; } .me-preview { aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .me-layout { grid-template-columns: 1fr; } .me-palette { flex-direction: row; flex-wrap: wrap; max-height: none; } .me-palette h4 { width: 100%; } }

/* ---------- Houses (the profile page) ---------- */
.house-card { background: #fff; border-radius: 20px; box-shadow: var(--shadow, 0 4px 16px rgba(40, 80, 140, 0.12)); padding: 1rem; margin-bottom: 1.25rem; }
.house-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.house-head h1 { margin: 0; }
.house-scene { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #e8d9c0 center / cover no-repeat; border: 3px solid var(--sky-light); user-select: none; -webkit-user-select: none; }
.house-thing { position: absolute; transform: translate(-50%, -100%); display: block; }
.house-thing img { display: block; width: 100%; height: auto; pointer-events: none; }
.ht-inner.flip { transform: scaleX(-1); }
.ht-avatar { position: relative; width: 100%; aspect-ratio: 400 / 600; }
.ht-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.house-thing.kind-pet { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25)); }
a.house-thing.kind-pet:hover { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25)); }
.house-scene.editing { cursor: default; touch-action: none; }
.house-scene.editing .house-thing { cursor: grab; }
.house-scene.editing .house-thing:hover { outline: 2px dashed rgba(255, 255, 255, 0.85); outline-offset: 2px; }
.house-scene.editing .house-thing.selected { outline: 3px solid var(--blue, #3b82f6); outline-offset: 2px; border-radius: 6px; }
.house-editor { margin-top: 0.8rem; position: relative; }
.house-selected { min-height: 2.6rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.house-selected p { margin: 0; }
.house-tools { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.house-tabs { margin-top: 0.6rem; }
.house-bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.5rem; max-height: 300px; overflow-y: auto; padding: 0.3rem 0; }
.house-bag > p { grid-column: 1 / -1; margin: 0.3rem 0; }
.house-bag-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.4rem; border: 2px solid var(--sky-light); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; font-size: 0.78rem; line-height: 1.15; }
.house-bag-item:hover { border-color: var(--blue, #3b82f6); }
.house-bag-item img { width: 64px; height: 64px; object-fit: contain; }
.house-bag-item.bg img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.house-bag-item.on { border-color: var(--green, #3aa55a); background: #effaf1; }
.house-bag-item small { color: var(--green, #3aa55a); font-weight: 700; }
.house-bag-item .qty-badge { font-style: normal; }
.house-editor-foot { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.house-toast { position: absolute; top: -3.2rem; left: 50%; transform: translateX(-50%); background: #2b3a55; color: #fff; padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.9rem; z-index: 5; white-space: nowrap; max-width: 95%; overflow: hidden; text-overflow: ellipsis; }
.house-toast.bad { background: #b3354f; }

/* ---------- Companion bond (pet page) ---------- */
.bond-pet { position: relative; width: 100%; max-width: 260px; margin: 0 auto; }
.bond-pet img { width: 100%; display: block; }
.bond-bubble { position: absolute; top: 4%; right: 6%; font-size: 2.2rem; background: #fff; border-radius: 50%; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(40, 80, 140, 0.2); opacity: 0; pointer-events: none; }
.bond-pet.react img { animation: bond-hop 0.7s ease; }
.bond-pet.react-sad img { animation: bond-shake 0.5s ease; }
.bond-pet.react .bond-bubble, .bond-pet.react-sad .bond-bubble { animation: bond-pop 2.4s ease forwards; }
@keyframes bond-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-14%) scale(1.03); } 55% { transform: translateY(0) scale(0.98, 1.02); } 75% { transform: translateY(-5%); } }
@keyframes bond-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5%); } 40% { transform: translateX(5%); } 60% { transform: translateX(-3%); } 80% { transform: translateX(3%); } }
@keyframes bond-pop { 0% { opacity: 0; transform: scale(0.3) translateY(20%); } 12% { opacity: 1; transform: scale(1.15); } 22% { transform: scale(1); } 80% { opacity: 1; transform: translateY(-10%); } 100% { opacity: 0; transform: translateY(-30%); } }
@media (prefers-reduced-motion: reduce) { .bond-pet.react img, .bond-pet.react-sad img { animation: none; } }
.bond-mini { margin: -0.4rem 0 0.6rem; font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); }
.bond-level { display: flex; align-items: center; gap: 0.8rem; }
.bond-heart { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; font-weight: 900; font-size: 1.1rem; color: #fff; background: radial-gradient(circle at 35% 30%, #ff9cc2, #e0507a); clip-path: path('M24 44 C10 34 2 26 2 15 C2 7 8 2 15 2 C19 2 22 4 24 8 C26 4 29 2 33 2 C40 2 46 7 46 15 C46 26 38 34 24 44 Z'); padding-bottom: 0.3rem; }
.bar .bd { background: linear-gradient(90deg, #ffb3d1, #e0507a); }
.bond-personality { margin: 0.8rem 0 0.6rem; }
.bond-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bond-btn[disabled] { opacity: 0.55; cursor: default; }
.bond-reaction { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: #fff3f8; border: 2px solid #ffd0e2; }
.bond-reaction p { margin: 0; }
.bond-reaction .bond-line { margin-top: 0.35rem; font-weight: 700; color: #a8325a; }
.bond-reaction.mood-favorite { background: #fff0f6; border-color: #ff9cc2; }
.bond-reaction.mood-disliked, .bond-reaction.mood-hungry { background: #fff8ec; border-color: #f5d39a; }
.bond-reaction.mood-present { background: #fffbe8; border-color: #f2d27a; }
.bond-reaction.mood-error { background: #fdeef0; border-color: #f2b8c2; color: #9a2a40; }
.bond-gain { color: #e0507a; white-space: nowrap; }
.bond-rewards { margin-top: 0.8rem; }
.bond-rewards li { display: flex; gap: 0.6rem; align-items: center; }
.bond-rewards li.got { opacity: 0.6; }

/* ---------- Development notice (sign-ups closed) ---------- */
.dev-notice { margin-top: 1rem; padding: 0.8rem 0.9rem; border-radius: 16px; background: rgba(255, 255, 255, 0.6); border: 2px dashed var(--sky-light, #bfe3ff); text-align: center; }
.dev-notice p { margin: 0 0 0.6rem; font-weight: 700; color: var(--ink-soft); }
.btn.discord-btn { background: #5865f2; color: #fff; }
.btn.discord-btn:hover { background: #4752c4; color: #fff; }