:root {
  --bg: #1b1433; --bg2: #2a2050; --panel: #2f2559; --line: #4a3f80; --text: #f3efff; --muted: #b6acd8;
  --accent: #ffd23f; --accent2: #ff7ab6; --good: #4ad66d; --bad: #ff5d5d;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 20% 0%, #3a2a6b, var(--bg) 60%) fixed; color: var(--text); font: 15px/1.45 Nunito, system-ui, sans-serif; min-height: 100vh; }
a { color: var(--accent); }
h1, h2, h3, h4 { font-family: "Baloo 2", Nunito, sans-serif; margin: .3em 0; line-height: 1.15; }
h1 { font-size: 3rem; text-align: center; background: linear-gradient(90deg, #ffd23f, #ff7ab6, #8a7aff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); } .small { font-size: .86em; } .center { text-align: center; }
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: rgba(0,0,0,.35); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px); }
.top .back { color: var(--muted); text-decoration: none; font-size: .9em; }
.top .brand { font: 800 1.3rem "Baloo 2"; color: #fff; text-decoration: none; }
.top .who { margin-left: auto; font-size: .9em; color: var(--muted); }
.hud { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: .88em; white-space: nowrap; }
.chip.gold { color: var(--accent); } .chip.warn { border-color: var(--bad); color: #ffb0b0; }
.chip.mode-classic { background: #5a3ab0; } .chip.mode-playful { background: #2a8a6a; }
.tabs { display: flex; gap: 4px; margin-left: 6px; flex-wrap: wrap; }
.tab { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font: 700 .9em Nunito; cursor: pointer; }
.tab.on { background: var(--accent); color: #2a1a00; border-color: var(--accent); }
main { max-width: 1180px; margin: 0 auto; padding: 16px; }

.btn { background: linear-gradient(180deg, #8a6aff, #6a4ae0); color: #fff; border: 0; border-radius: 10px; padding: 8px 14px; font: 800 .95em Nunito; cursor: pointer; box-shadow: 0 3px 0 #3a2a90; transition: transform .08s, filter .15s; margin: 2px; }
.btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #3a2a90; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; border: 1px solid var(--line); box-shadow: none; color: var(--text); }
.btn.small { padding: 4px 10px; font-size: .85em; }
.btn.big { font-size: 1.3em; padding: 14px 30px; }
.btn small { opacity: .75; font-weight: 600; }
.link { background: none; border: 0; cursor: pointer; font-size: .8em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; } .row.end { justify-content: flex-end; } .row.between { justify-content: space-between; }
.input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 700 1.1em Nunito; margin: 6px 0; }
select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px; font: inherit; max-width: 100%; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.scene-wrap { position: relative; border-radius: 16px; overflow: hidden; border: 3px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.4); line-height: 0; }
.scene-wrap canvas { width: 100%; height: auto; display: block; cursor: pointer; touch-action: manipulation; }
.scene-hint { position: absolute; left: 10px; bottom: 8px; line-height: 1.2; background: rgba(0,0,0,.5); padding: 2px 8px; border-radius: 6px; font-size: .8em; pointer-events: none; }

.gate { max-width: 560px; margin: 40px auto; text-align: center; }
.gate .btn { text-decoration: none; display: inline-block; }
/* title */
.title-screen .scene-wrap, #titleCv { width: 100%; height: auto; border-radius: 16px; display: block; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 18px 0; }
.slot-card { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 18px; }
.slot-classic { border-color: #8a6aff; } .slot-playful { border-color: #4ad6a0; }
.slot-pets { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0; }

.thumb { display: inline-block; background-repeat: no-repeat; background-position: 0 0; image-rendering: auto; vertical-align: middle; flex-shrink: 0; }

.thumb.px { image-rendering: pixelated; }   /* old 48px pixel-art sheets */
/* home */
.home, .town { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.pet-head { display: flex; gap: 10px; align-items: center; }
.pet-head .thumb { background-color: rgba(255,255,255,.06); border-radius: 12px; }
.lbl { font-size: .75em; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bar { position: relative; height: 16px; background: rgba(0,0,0,.35); border-radius: 8px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 8px; transition: width .4s; }
.bar span { position: relative; font-size: .72em; font-weight: 800; padding-left: 6px; line-height: 16px; text-shadow: 0 1px 2px #000; }
.stats { margin: 10px 0 6px; display: grid; gap: 5px; }
.stat-row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: center; font-size: .88em; }
.stat-row b { color: var(--accent); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.small-actions .btn { font-size: .85em; }
.warn-text { color: #ffb0b0; font-weight: 700; }
.good-text { color: #9dffb8; font-weight: 700; }
.pet-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pet-mini { display: flex; align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 3px 8px 3px 3px; color: var(--text); cursor: pointer; font: 700 .85em Nunito; text-align: left; }
.pet-mini.on { border-color: var(--accent); }
.pet-mini:disabled { opacity: .4; cursor: not-allowed; }
h4 { margin-top: 12px; }

/* town */
.building h2 { margin-top: 4px; }
.bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; }
.card h3 { font-size: 1.05em; }
.egg-icon { font-size: 2.4rem; animation: bob 2s ease-in-out infinite; }
.elite-card { border-color: #7ae0ff; background: linear-gradient(180deg, rgba(122,224,255,.10), var(--bg2)); }
/* world map + visits */
.world-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.world-row { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; color: var(--text); cursor: pointer; font: inherit; }
.world-row:hover { border-color: var(--accent); }
.world-row > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.world-row small { font-size: .78em; }
.world-nopet { width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.5em; flex-shrink: 0; }
.visit-pets { display: flex; flex-direction: column; gap: 6px; }
.visit-pet { display: flex; gap: 8px; align-items: center; background: var(--bg2); border-radius: 10px; padding: 4px 8px; }
/* home store + decorate */
.store-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 10px; }
.store-tabs .tab { font-size: .8em; padding: 3px 8px; }
.store-cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.store-card { padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.store-card h3 { margin: 2px 0; font-size: .95em; }
.store-card p { margin: 0; }
.room-thumb { width: 100%; aspect-ratio: 19 / 10; object-fit: cover; border-radius: 8px; display: block; }
.item-pic { height: 84px; width: 100%; display: grid; place-items: center; background: rgba(255,255,255,.05); border-radius: 8px; }
.item-pic img { max-width: 92%; max-height: 76px; }
.home-btns { display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #ff5d8f; color: #fff; font-size: .8em; line-height: 18px; text-align: center; }
/* guestbook */
.gb-form textarea { resize: vertical; font: 600 .95em Nunito; }
.gb-form .row { margin: 0 0 8px; }
.gb-notes { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.gb-note { background: #f6e2bd; color: #2a1a0e; border-radius: 10px; padding: 6px 10px; border-left: 4px solid #c08a2a; overflow-wrap: anywhere; }
.gb-note .row { margin: 0; }
.gb-note small.muted { color: #7a6040; }
/* chat */
.chat-main { display: flex; flex-direction: column; min-height: 0; }
.chat-main h2 { margin-top: 0; }
.chat-log { height: min(60vh, 520px); overflow-y: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.chat-msg { line-height: 1.4; overflow-wrap: anywhere; padding: 2px 4px; border-radius: 6px; }
.chat-msg:hover { background: rgba(255,255,255,.04); }
.chat-msg.mine { background: rgba(138,106,255,.12); }
.chat-time { color: var(--muted); font-size: .75em; margin-right: 4px; }
.chat-name { background: none; border: 0; padding: 0; color: var(--accent); font: 800 1em Nunito; cursor: pointer; }
.chat-name:hover { text-decoration: underline; }
.chat-tools { float: right; opacity: .35; }
.chat-msg:hover .chat-tools { opacity: 1; }
.chat-form { display: flex; gap: 6px; margin-top: 8px; }
.chat-form .input { margin: 0; flex: 1; }
.chat-online { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.deco-sel { display: flex; gap: 10px; align-items: center; background: var(--bg2); border: 1px solid #ffd23f; border-radius: 12px; padding: 8px; }
.deco-sel > img { max-width: 72px; max-height: 72px; }
.deco-sel .row { margin: 4px 0 0; gap: 2px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.swatch { background: var(--bg2); border: 2px solid var(--line); border-radius: 10px; padding: 3px; color: var(--text); cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; }
.swatch img { width: 100%; aspect-ratio: 19 / 10; object-fit: cover; border-radius: 6px; display: block; }
.swatch small { font-size: .72em; line-height: 1.3; }
.swatch.on { border-color: var(--accent); }
.deco-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.deco-item { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; color: var(--text); cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; }
.deco-item img { max-width: 60px; max-height: 52px; }
.deco-item small { font-size: .7em; line-height: 1.2; text-align: center; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-4deg); } }
.odds { font-size: .78em; text-align: left; display: grid; gap: 2px; margin: 6px 0; }
.egg-royal { border-color: var(--accent); box-shadow: 0 0 18px rgba(255,210,63,.2); }
.rar { display: inline-block; border-radius: 6px; padding: 0 6px; font-size: .75em; font-weight: 800; background: rgba(255,255,255,.1); }
.rar-common { color: #c9d0da; } .rar-uncommon { color: #4cc38a; } .rar-rare { color: #4a9eff; } .rar-epic { color: #c08aff; } .rar-legendary { color: #ffb020; text-shadow: 0 0 8px rgba(255,176,32,.6); }
.mini-stats { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; font-size: .78em; margin: 6px 0; }
.offer .thumb { background-color: rgba(255,255,255,.05); border-radius: 12px; }
.memorial { display: grid; gap: 8px; }
.grave { display: flex; gap: 10px; align-items: center; background: var(--bg2); border-radius: 12px; padding: 8px; border-left: 4px solid #8a8aaa; }
.trophy { font-size: .8em; background: rgba(255,210,63,.15); border-radius: 6px; padding: 1px 6px; }
.league-grid, .arena-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.league-grid > *, .arena-grid > *, .town > *, .home > * { min-width: 0; }
.step small { text-align: center; line-height: 1.1; margin-top: 2px; }
.league-card { border-color: var(--lc); }
.reg { display: block; width: 100%; border-left: 6px solid var(--lc); }
.reg.locked { filter: grayscale(.8); }
.steps { display: flex; gap: 4px; justify-content: center; margin: 8px 0; }
.step { display: flex; flex-direction: column; align-items: center; width: 52px; font-size: .7em; color: var(--muted); }
.step span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.3); border: 2px solid var(--line); font-weight: 800; font-size: 1.3em; }
.step.done span { background: var(--good); border-color: var(--good); color: #003; }
.step.cur span { border-color: var(--accent); box-shadow: 0 0 12px var(--accent); animation: bob 1.5s infinite; }
.opp-list { display: grid; gap: 6px; }
.opp { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; background: var(--bg2); border-radius: 10px; padding: 6px; }
.top { padding-left: 20px; } .top li { margin: 4px 0; }

/* battle */
.battle { max-width: 900px; margin: 0 auto; }
.battle-ui { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 10px; align-items: start; }
.bat-log { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-height: 92px; font-size: .9em; }
#batActs { grid-template-columns: 1fr 1fr; min-width: 300px; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(5,0,20,.7); display: grid; place-items: center; z-index: 50; padding: 12px; backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal-box { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 18px 20px; width: min(480px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: pop .2s ease-out; }
.modal-box.wide { width: min(760px, 100%); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.news { padding-left: 18px; } .news li { margin: 6px 0; }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick { background: var(--bg2); border: 2px solid var(--line); border-radius: 14px; padding: 10px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; }
.pick:hover, .train-btn:hover, .sp-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.pick small { color: var(--muted); font-size: .75em; }
.train-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.train-btn { background: var(--bg2); border: 2px solid var(--line); border-radius: 14px; padding: 10px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; font: inherit; transition: transform .1s; }
.train-btn .ti { font-size: 2rem; }
.species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; max-height: 55vh; overflow: auto; }
.sp-btn { position: relative; background: var(--bg2); border: 2px solid var(--line); border-radius: 12px; padding: 4px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; font: inherit; }
.sp-btn small { font-size: .7em; }
.dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.mg-wrap { position: relative; line-height: 0; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); }
.mg-wrap canvas { width: 100%; height: auto; touch-action: none; }
.mg-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); line-height: 1.4; }
.mg-ctl { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.mg-ctl .ctl { font-size: 1.4em; min-width: 80px; padding: 12px; user-select: none; touch-action: none; }
.grade { font: 800 4rem "Baloo 2"; width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; animation: pop .4s; }
.grade-S { background: linear-gradient(135deg, #ffd23f, #ff7ab6); color: #2a0a2a; } .grade-A { background: #4ad66d; color: #002a10; } .grade-B { background: #4a9eff; color: #001a3a; } .grade-C { background: #b6acd8; color: #222; } .grade-D { background: #6a5a7a; }
.up { color: var(--good); font-weight: 800; }
.big-emoji { font-size: 4rem; animation: pop .4s; }
.gold-text { color: var(--accent); font: 800 1.6em "Baloo 2"; margin: 0; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #120a28; border: 1px solid var(--accent); padding: 10px 18px; border-radius: 12px; z-index: 60; font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,.5); max-width: 92vw; }

@media (max-width: 900px) {
  .home, .town { grid-template-columns: 1fr; }
  .battle-ui { grid-template-columns: 1fr; }
  #batActs { min-width: 0; }
}
@media (max-width: 560px) {
  main { padding: 10px 16px; }
  h1 { font-size: 2.2rem; }
  .pick-grid, .train-grid { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: 110px 1fr; }
  .top .who { margin-left: 0; }
  .top { position: static; }
}