@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=Nunito:wght@400;600;800&display=swap');

:root {
  --bg: #0f1218; --text: #f3ece0; --muted: #b3a891;
  --wood: #2a1d14; --wood2: #3a2819; --bronze: #c89b55; --bronze-dark: #7a5a2e; --gold: #f1c75b;
  --good: #63d985; --bad: #ff5d5d; --bond: #f5c542; --blue: #4f8df7;
  --frame: linear-gradient(180deg, #3d2a1b 0%, #24180f 100%);
  --frame-border: 2px solid var(--bronze-dark);
  --inner: inset 0 0 0 1px rgba(241,199,91,.25), inset 0 2px 10px rgba(0,0,0,.6);
  --title: 'Cinzel', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.45 'Nunito', system-ui, sans-serif; }
button { font: inherit; cursor: pointer; color: inherit; }
.hidden { display: none !important; }
.screen { min-height: 100%; }

/* ================= Setup ================= */
#setup { max-width: 1120px; margin: 0 auto; padding: 22px 16px 70px; }
.setup-head { text-align: center; margin-bottom: 14px; }
.setup-head h1 { margin: 0; font: 800 38px/1.1 var(--title); color: var(--gold); letter-spacing: 1px; text-shadow: 0 2px 0 #5a3d14, 0 4px 14px rgba(0,0,0,.6); }
.sub { color: var(--muted); margin: 6px 0 0; }
.panel { background: var(--frame); border: var(--frame-border); border-radius: 12px; box-shadow: var(--inner), 0 6px 20px rgba(0,0,0,.45); padding: 14px 16px; margin-bottom: 14px; }
.panel h3 { margin: 0 0 10px; font: 600 15px var(--title); color: var(--gold); letter-spacing: .6px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.field { flex: 1 1 250px; }
.field > label { display: block; font-weight: 800; margin-bottom: 6px; }
small { color: var(--muted); }
select, input[type=range] { width: 100%; accent-color: var(--gold); }
select { background: #1b130c; color: var(--text); border: 1px solid var(--bronze-dark); border-radius: 8px; padding: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { background: #1b130c; border: 1px solid var(--bronze-dark); border-radius: 10px; padding: 10px 14px; font-weight: 800; }
.seg button.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 14px rgba(241,199,91,.25); }
.check { display: block; font-weight: 400; margin-top: 6px; }
.moon-info { color: var(--muted); font-size: 14px; }
/* Each pet's own level on its card */
.pet-lv { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; background: rgba(0,0,0,.3); border: 1px solid var(--bronze-dark); border-radius: 999px; padding: 2px 4px; }
.pet-lv b { font-size: 12px; color: var(--gold); min-width: 42px; text-align: center; }
.pet-lv .lvbtn { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #1b130c; border: 1px solid var(--bronze-dark); font-weight: 800; cursor: pointer; user-select: none; }
.pet-lv .lvbtn:hover { border-color: var(--gold); color: var(--gold); }
.card > div:last-child { min-width: 0; flex: 1 1 auto; }   /* lets the level pill shrink to fit inside the card */
.pet-lv { max-width: 100%; box-sizing: border-box; }
.pet-lv .xpbar { flex: 0 1 70px; min-width: 20px; height: 7px; border-radius: 4px; background: #1b130c; border: 1px solid var(--bronze-dark); overflow: hidden; margin-right: 6px; }
.pet-lv .xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #6a9cff, #b58cff); }
/* XP on the results screen */
.xp-results { display: grid; gap: 8px; margin: 12px 0 4px; text-align: left; }
.xp-row { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--bronze-dark); }
.xp-row.up { border-color: var(--gold); box-shadow: 0 0 14px rgba(241,199,91,.25); }
.xp-row .mini-p { width: 44px; height: 44px; flex: none; font-size: 22px; }
.xp-info { flex: 1; display: grid; gap: 3px; font-size: 14px; }
.xp-gain { color: #b58cff; font-weight: 800; }
.xp-line { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.xp-line .lvl { color: var(--gold); font-weight: 800; min-width: 42px; }
.xpbar.big { flex: 1; height: 9px; border-radius: 5px; background: #1b130c; border: 1px solid var(--bronze-dark); overflow: hidden; }
.xpbar.big i { display: block; height: 100%; background: linear-gradient(90deg, #6a9cff, #b58cff); }
.lvup { color: var(--gold); font: 700 14px var(--title); letter-spacing: 1px; animation: lvpulse 1s ease-in-out infinite alternate; }
@keyframes lvpulse { from { opacity: .7; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }
/* Banner designer */
.banner-maker { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
#bannerPreview { width: 120px; height: 240px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.banner-controls { flex: 1; min-width: 260px; display: grid; gap: 8px; }
.banner-controls h4 { margin: 0 0 4px; font: 600 12px var(--title); color: var(--gold); letter-spacing: .5px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatches .sw { width: 26px; height: 26px; border-radius: 6px; border: 2px solid #1b130c; padding: 0; cursor: pointer; }
.swatches .sw.on { outline: 2px solid var(--gold); outline-offset: 1px; }
.seg.small button { padding: 5px 9px; font-size: 12px; text-transform: capitalize; }
.emblems { display: flex; flex-wrap: wrap; gap: 5px; }
.emblems button { width: 34px; height: 34px; font-size: 19px; background: #1b130c; border: 1px solid var(--bronze-dark); border-radius: 8px; padding: 0; color: #f3e5c7; cursor: pointer; }
.emblems button.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgba(241,199,91,.3); }
.row-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row-inline input { background: #1b130c; border: 1px solid var(--bronze-dark); border-radius: 8px; color: var(--text); padding: 7px 10px; font-weight: 700; letter-spacing: 1px; }
.muted { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.card { background: linear-gradient(180deg, #2b1f15, #1a120c); border: 1px solid var(--bronze-dark); border-radius: 12px; padding: 10px; text-align: left; position: relative; display: flex; gap: 10px; align-items: flex-start; transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.card.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset, 0 0 18px rgba(241,199,91,.3); }
.emblem { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; border: 2px solid var(--bronze); box-shadow: inset 0 0 0 3px rgba(0,0,0,.35); }
.card .nm { font: 600 15px var(--title); }
.card .fam { font-size: 12px; font-weight: 800; }
.card .lk { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.card .num { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #2a1a05; font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.primary { background: linear-gradient(180deg, #ffd977, #d9a33a); color: #2a1a05; border: 2px solid #8a5f1c; border-radius: 12px; padding: 13px 30px; font: 800 18px var(--title); letter-spacing: .8px; box-shadow: 0 4px 0 #6b4612, 0 8px 18px rgba(0,0,0,.45); }
.primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #6b4612; }
.primary:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
.ghost { background: #1b130c; border: 1px solid var(--bronze-dark); border-radius: 12px; padding: 12px 18px; font-weight: 800; }
/* Main-screen tabs: pinned at the top; scroll sideways on narrow phones */
.tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px 14px; padding: 8px 16px; background: linear-gradient(180deg, rgba(15,18,24,.97), rgba(15,18,24,.9)); border-bottom: 1px solid var(--bronze-dark); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; background: #1b130c; border: 1px solid var(--bronze-dark); border-radius: 10px 10px 4px 4px; padding: 10px 14px; font: 700 14px var(--title); color: var(--text); white-space: nowrap; }
.tabs button.on { color: #2a1a05; background: linear-gradient(180deg, #ffd977, #d9a33a); border-color: #8a5f1c; }
/* Random team + Enter the Pit stay pinned at the bottom on every tab */
.sticky-actions { position: sticky; bottom: 0; z-index: 20; margin: 16px -16px 0; padding: 12px 16px;
  background: linear-gradient(0deg, rgba(15,18,24,.98), rgba(15,18,24,.88)); border-top: 1px solid var(--bronze-dark); }
.guide p { margin: 0 0 10px; line-height: 1.5; }
/* Report a problem, announcements, admin link */
.setup-head { position: relative; }
.setup-head .report-btn { position: absolute; top: 0; right: 0; }
@media (max-width: 640px) { .setup-head .report-btn { position: static; margin-top: 8px; } }
.report-in-battle { position: absolute; right: 12px; bottom: 120px; z-index: 30; width: 44px; height: 44px; border-radius: 50%; background: rgba(27,19,12,.85); border: 1px solid var(--bronze-dark); font-size: 20px; }
.support-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0,0,0,.6); padding: 16px; }
.support-modal .box { max-width: 520px; width: 100%; }
.support-modal textarea { width: 100%; background: #120c07; color: var(--text); border: 1px solid var(--bronze-dark); border-radius: 8px; padding: 8px; font: inherit; margin: 6px 0 10px; }
.bug-shot { display: block; max-width: 100%; border-radius: 6px; margin: 6px 0 10px; border: 1px solid var(--bronze-dark); }
.announce { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: linear-gradient(90deg, #3d2a1b, #2a1d14); border: 1px solid var(--gold); color: var(--text); }
.announce span { flex: 1; }
.announce button { background: none; border: none; color: var(--muted); font-size: 16px; }
.admin-link { text-decoration: none; display: inline-block; }
/* My Pets tab and quick teams */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h3 { margin: 0; }
.small-btn { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.small-btn:disabled { opacity: .45; cursor: default; }
.hint { margin: 0 0 10px; font-size: 13px; }
.team-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.team { background: #1b130c; border: 1px solid var(--bronze-dark); border-radius: 10px; padding: 10px; cursor: pointer; }
.team.editing { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 14px rgba(241,199,91,.2); }
.team-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.team-name { flex: 1 1 120px; min-width: 0; font: 700 15px var(--title); color: var(--gold); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; }
.team-name:focus { border-color: var(--bronze-dark); background: #120c07; outline: none; }
.team-note { width: 100%; margin-top: 6px; font-size: 12px; background: #120c07; border: 1px solid #3a2819; border-radius: 6px; padding: 5px 7px; color: var(--muted); }
.team-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.slot-pet { padding: 6px 4px; background: #120c07; border: 1px solid var(--bronze-dark); border-radius: 8px; }
.slot-empty { display: grid; place-items: center; min-height: 86px; border: 1px dashed var(--bronze-dark); border-radius: 8px; font-size: 12px; color: var(--muted); text-align: center; padding: 4px; }
.mini-pet { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.mini-pet .portrait { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; position: relative; }
.mini-pet .portrait img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mini-pet small { color: var(--muted); }
.quick-teams { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-team { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: #1b130c; border: 1px solid var(--bronze-dark); border-radius: 10px; padding: 8px 12px; text-align: left; }
.quick-team b { font: 700 14px var(--title); color: var(--gold); }
.quick-team span { font-size: 12px; color: var(--muted); }
.quick-team.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.pets-tools { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin-bottom: 12px; }
.pets-tools h4 { margin: 0 0 6px; }
.pets-tools input, .pets-tools select { min-width: 170px; }
.card .fav { position: absolute; top: 4px; left: 6px; font-size: 18px; color: var(--muted); z-index: 2; line-height: 1; padding: 2px; }
.card .fav.on { color: var(--gold); }
.guide .badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--bronze-dark); color: var(--text); font: 700 11px system-ui, sans-serif; letter-spacing: .4px; vertical-align: middle; }

/* ================= Battle ================= */
#battle { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; inset: 0; }
#floats, #plates { position: absolute; inset: 0; pointer-events: none; }

/* Floating numbers and call-outs */
.float { position: absolute; transform: translate(-50%, -50%); font: 800 24px 'Nunito'; color: #fff; -webkit-text-stroke: 1px rgba(0,0,0,.6); text-shadow: 0 3px 6px #000; animation: rise 1.3s ease-out forwards; white-space: nowrap; }
.float.strong { color: #ffd34d; font-size: 30px; } .float.weak { color: #c8ccd6; font-size: 19px; }
.float.heal { color: var(--good); } .float.miss { color: #d7e7ff; font-size: 19px; }
@keyframes rise { 0% { transform: translate(-50%, -30%) scale(.7); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -170%) scale(1); opacity: 0; } }
.callout { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font: 800 46px var(--title); color: var(--gold); text-shadow: 0 3px 0 #5a3d14, 0 0 30px rgba(0,0,0,.8); animation: callout 1.4s ease-out forwards; white-space: nowrap; pointer-events: none; }
.callout.bad { color: #ff7b6b; text-shadow: 0 3px 0 #5a1414, 0 0 30px rgba(0,0,0,.8); }
.callout.good { color: #7ff0a1; text-shadow: 0 3px 0 #145a2a, 0 0 30px rgba(0,0,0,.8); }
@keyframes callout { 0% { transform: translate(-50%, -50%) scale(2); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -70%) scale(1); opacity: 0; } }

/* Health plates above pets */
.plate { position: absolute; transform: translate(-50%, -100%); width: 120px; text-align: center; }
.plate .pn { font: 600 13px var(--title); text-shadow: 0 1px 3px #000, 0 0 6px #000; white-space: nowrap; }
.plate .hb { height: 9px; border-radius: 6px; background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.35); overflow: hidden; margin-top: 2px; }
.plate .hb i { display: block; height: 100%; background: linear-gradient(180deg, #8af0a8, #2fb35b); transition: width .35s; }
.plate.low .hb i { background: linear-gradient(180deg, #ff9a8a, #d93a3a); }
.plate.foe .pn { color: #ffd2c8; } .plate.you .pn { color: #cfe4ff; }

/* Top medallion */
.hud-top { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.medal { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5b3d22, #20150d); border: 3px solid var(--bronze); box-shadow: var(--inner), 0 4px 12px rgba(0,0,0,.6); display: grid; place-items: center; text-align: center; line-height: 1; }
.medal small { display: block; font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.medal b { font: 800 24px var(--title); color: var(--gold); }
.world { display: flex; gap: 6px; }
.wchip { background: var(--frame); border: 1px solid var(--bronze-dark); border-radius: 10px; padding: 4px 10px; font-size: 12.5px; box-shadow: var(--inner); text-align: center; min-width: 74px; }
.wchip .ic { font-size: 18px; display: block; line-height: 1.2; }
.wchip.alert { border-color: #c0392b; color: #ffb3a8; }

/* Unit frames */
.unit { position: absolute; top: 10px; width: 290px; }
.unit.left { left: 10px; } .unit.right { right: 10px; }
.uf { display: flex; gap: 10px; align-items: center; background: var(--frame); border: var(--frame-border); border-radius: 14px; padding: 8px 10px; box-shadow: var(--inner), 0 6px 16px rgba(0,0,0,.5); }
.unit.right .uf { flex-direction: row-reverse; text-align: right; }
.portrait { position: relative; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; border: 3px solid var(--bronze); box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.6); }
.portrait .lv { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); background: #1b130c; border: 1px solid var(--bronze); border-radius: 8px; font-size: 10.5px; font-weight: 800; padding: 0 5px; color: var(--gold); }
.uf .info { flex: 1; min-width: 0; }
.uf .nm { font: 600 16px var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf .sub2 { font-size: 11.5px; color: var(--muted); }
.bar { height: 12px; background: rgba(0,0,0,.55); border: 1px solid rgba(0,0,0,.8); border-radius: 7px; overflow: hidden; margin-top: 4px; position: relative; }
.bar > i { display: block; height: 100%; background: linear-gradient(180deg, #8af0a8, #2fb35b); transition: width .35s; }
.bar.low > i { background: linear-gradient(180deg, #ff9a8a, #d93a3a); }
.bar .tx { position: absolute; inset: 0; font-size: 10px; font-weight: 800; display: grid; place-items: center; text-shadow: 0 1px 2px #000; }
.bar.bond > i { background: linear-gradient(180deg, #ffe58a, #e0a520); }
.bar .tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; box-shadow: 0 0 4px #fff; }
.icons { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; min-height: 0; }
.unit.right .icons { justify-content: flex-end; }
.sicon { font-size: 10.5px; font-weight: 800; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 0 5px; }
.sicon.good { color: #9ff2b6; } .sicon.bad { color: #ffb0a6; }
.bench { display: flex; gap: 8px; margin-top: 8px; padding-left: 14px; }
.unit.right .bench { justify-content: flex-end; padding: 0 14px 0 0; }
.mini { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; border: 2px solid var(--bronze-dark); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.mini .ring { position: absolute; inset: -5px; border-radius: 50%; }
.mini.ko { filter: grayscale(1) brightness(.5); }
.mini.ko::after { content: '✕'; position: absolute; font-size: 26px; color: #ff6b6b; text-shadow: 0 0 4px #000; }
.foe-name { font: 600 12px var(--title); color: var(--muted); text-align: right; margin-bottom: 4px; letter-spacing: .5px; }
/* Tamer nameplate: mini banner, name, record (record hidden if the tamer turned it off) */
.tamer-plate { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 4px 12px 4px 6px;
  background: linear-gradient(180deg, rgba(43,31,21,.95), rgba(26,18,12,.95)); border: var(--frame-border); border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.45); max-width: 100%; }
.unit.right .tamer-plate { flex-direction: row-reverse; padding: 4px 6px 4px 12px; float: right; }
.unit.right .tamer-plate + .uf { clear: both; }
.tamer-plate .mini-banner { width: 22px; height: 44px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.tamer-plate .tname { font: 700 14px var(--title); color: var(--gold); letter-spacing: .6px; white-space: nowrap; }
.tamer-plate .trec { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.unit.right .tamer-plate .tname, .unit.right .tamer-plate .trec { text-align: right; }
.tamer-row { margin-bottom: 4px; }
.account { margin-bottom: 10px; padding: 8px 10px; background: rgba(0,0,0,.25); border: 1px dashed var(--bronze-dark); border-radius: 8px; font-size: 14px; }
.account .acct { display: grid; gap: 6px; }
.account .acct.signed { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.account input[type=email], .account input#acName { background: #1b130c; border: 1px solid var(--bronze-dark); border-radius: 8px; color: var(--text); padding: 7px 10px; min-width: 220px; }
.account button { padding: 6px 12px; }
.account .danger { color: #ffb0a6; border-color: #7a2a20; }
.account .danger:disabled { opacity: .45; cursor: not-allowed; }
.account .spacer { flex: 1; }
.acct-settings { margin-top: 10px; padding: 10px 12px 0; border-top: 1px solid var(--bronze-dark); display: grid; gap: 8px; }
.acct-settings.hidden { display: none; }
.acct-settings h4 { margin: 0; font: 600 13px var(--title); color: var(--gold); }
.danger-zone { border: 1px solid #7a2a20; border-radius: 8px; padding: 10px; background: rgba(122,42,32,.12); }
.danger-zone b { color: #ffb0a6; }
.danger-zone p { margin: 4px 0 8px; font-size: 13px; }
.danger-zone input { background: #1b130c; border: 1px solid #7a2a20; border-radius: 8px; color: var(--text); padding: 6px 10px; }
.account .error { color: #ffb0a6; }
.tamer-row input#tamerName { background: #1b130c; border: 1px solid var(--bronze-dark); border-radius: 8px; color: var(--text); padding: 7px 10px; font-weight: 700; }

/* Bottom action bar */
.bottom { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(860px, 98vw); }
.prompt { text-align: center; margin-bottom: 8px; font: 600 16px var(--title); text-shadow: 0 2px 4px #000; min-height: 22px; }
.prompt .first { font: 800 12px 'Nunito'; padding: 2px 8px; border-radius: 99px; margin-left: 8px; vertical-align: 2px; }
.prompt .first.yes { background: rgba(99,217,133,.2); color: #9ff2b6; border: 1px solid #2fb35b; }
.prompt .first.no { background: rgba(255,93,93,.15); color: #ffb0a6; border: 1px solid #d93a3a; }
.action-bar { display: flex; gap: 8px; justify-content: center; align-items: flex-end; background: var(--frame); border: var(--frame-border); border-radius: 16px; padding: 10px 12px 8px; box-shadow: var(--inner), 0 8px 22px rgba(0,0,0,.55); }
.slot { position: relative; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; }
.slot .sq { position: relative; width: 66px; height: 66px; border-radius: 14px; display: grid; place-items: center; font-size: 30px; border: 2px solid var(--bronze); box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), inset 0 -8px 14px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.5); transition: transform .1s, box-shadow .1s; overflow: hidden; }
.slot:hover:not(:disabled) .sq { transform: translateY(-3px); box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 0 16px rgba(241,199,91,.55); border-color: var(--gold); }
.slot:disabled { cursor: default; }
.slot:disabled .sq { filter: grayscale(.6) brightness(.6); }
.slot .lbl { font-size: 12px; font-weight: 800; text-align: center; line-height: 1.15; max-width: 104px; }
.slot .key { position: absolute; top: 3px; left: 5px; font-size: 10px; font-weight: 800; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px #000; }
.slot .badge { position: absolute; top: -6px; right: 12px; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 8px; z-index: 2; }
.badge.strong { background: #ffd34d; color: #3a2a00; } .badge.weak { background: #6b6f7a; color: #fff; } .badge.third { background: #b9e27a; color: #213300; }
.slot .sweep { position: absolute; inset: 0; display: grid; place-items: center; font: 800 24px var(--title); color: #fff; text-shadow: 0 2px 4px #000; }
.slot.util .sq { width: 52px; height: 52px; font-size: 22px; border-radius: 50%; }
.slot.util { width: 70px; }
.slot.tether .sq { border-color: var(--bond); box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 0 14px rgba(245,197,66,.6); }
.sep { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, var(--bronze-dark), transparent); margin: 0 4px; }
.tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; width: 240px; background: #140e09; border: 1px solid var(--bronze); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; text-align: left; display: none; z-index: 5; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.tip b { font-family: var(--title); color: var(--gold); }
.slot:hover .tip { display: block; }

/* Log drawer */
.log { position: absolute; left: 10px; bottom: 150px; width: 320px; max-height: 40vh; overflow-y: auto; background: rgba(20,14,9,.92); border: 1px solid var(--bronze-dark); border-radius: 12px; padding: 8px 10px; font-size: 12.5px; display: none; }
.log.open { display: block; }
.log div { margin: 1px 0; } .log .round { color: var(--gold); font-weight: 800; margin-top: 6px; font-family: var(--title); }
.log .strong { color: #ffd34d; } .log .weak { color: #a8abb3; } .log .good { color: var(--good); } .log .ko { color: var(--bad); }
.log .bond { color: var(--bond); } .log .world { color: #8fd3ff; } .log .win { color: var(--good); font-weight: 800; } .log .info { color: #d9cfbd; }
.log-toggle { position: absolute; left: 10px; bottom: 112px; background: var(--frame); border: 1px solid var(--bronze-dark); border-radius: 10px; padding: 6px 12px; font-size: 12.5px; font-weight: 800; box-shadow: var(--inner); }

/* Modals */
.modal { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; }
.modal .box { background: var(--frame); border: 2px solid var(--bronze); border-radius: 16px; padding: 20px; width: min(480px, 100%); box-shadow: var(--inner), 0 20px 50px rgba(0,0,0,.7); text-align: center; }
.modal h2 { margin: 0 0 8px; font: 800 28px var(--title); color: var(--gold); text-shadow: 0 2px 0 #5a3d14; }
.modal .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0; }
.choice { background: linear-gradient(180deg, #2b1f15, #1a120c); border: 1px solid var(--bronze-dark); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.choice:hover { border-color: var(--gold); }
.choice .nm { font: 600 14px var(--title); }
.choice .hint { font-size: 11.5px; font-weight: 800; }
.hint.good { color: #9ff2b6; } .hint.bad { color: #ffb0a6; }
.modal .row-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.result-pet { font-size: 54px; width: 96px; height: 96px; margin: 6px auto; }

/* Phones */
@media (max-width: 760px) {
  .unit { width: 47vw; top: 84px; }
  .uf { padding: 6px; gap: 6px; }
  .portrait { width: 42px; height: 42px; font-size: 22px; }
  .uf .nm { font-size: 13px; } .uf .sub2 { display: none; }
  .mini { width: 32px; height: 32px; font-size: 15px; }
  .hud-top { top: 6px; } .medal { width: 50px; height: 50px; } .medal b { font-size: 18px; }
  .wchip { min-width: 0; padding: 3px 6px; font-size: 10.5px; }
  .action-bar { gap: 4px; padding: 8px 6px; flex-wrap: wrap; }
  .slot { width: 76px; } .slot .sq { width: 52px; height: 52px; font-size: 24px; }
  .slot.util { width: 56px; } .slot.util .sq { width: 42px; height: 42px; }
  .sep { display: none; }
  .callout { font-size: 30px; }
  .log { width: 92vw; left: 4vw; bottom: 190px; }
  .log-toggle { bottom: auto; top: 6px; left: 6px; }
  .plate { width: 90px; } .plate .pn { font-size: 11px; }
}
.action-bar:empty { display: none; }

/* Real creature art inside round frames (falls back to the emoji if missing) */
.emblem, .portrait, .mini { position: relative; overflow: hidden; }
.art-img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: contain; pointer-events: none; }
.portrait .lv { z-index: 2; }
.card .emblem { width: 64px; height: 64px; }
.emblem:has(.art-img), .portrait:has(.art-img), .mini:has(.art-img) { font-size: 0 !important; }

/* ================= Look-and-feel pass (6 Nov 2026) ================= */
body { background: radial-gradient(ellipse 120% 70% at 50% -10%, #1f2b4f 0%, #121626 45%, #0b0d14 100%) fixed; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 15% 85%, rgba(241,199,91,.06), transparent 40%), radial-gradient(circle at 85% 70%, rgba(208,50,42,.05), transparent 40%); }
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; text-align: left; margin-bottom: 12px; }
.head-logo { font-size: 30px; }
.head-tools { display: flex; align-items: center; gap: 10px; }
.whoami { color: var(--muted); font-size: 14px; } .whoami b { color: var(--gold); font-family: var(--title); }
.tabs { padding: 6px 0 0; background: linear-gradient(180deg, rgba(11,13,20,.96), rgba(11,13,20,.85)); backdrop-filter: blur(6px); border-bottom: 2px solid var(--bronze-dark); margin: 0 -16px 14px; padding-left: 16px; padding-right: 16px; }
.tabs button { transition: transform .12s, color .12s; }
.tabs button:hover:not(.on) { color: var(--gold); transform: translateY(-1px); }
.panel { background: linear-gradient(180deg, rgba(61,42,27,.92) 0%, rgba(36,24,15,.94) 100%); }
.card { transition: transform .14s, box-shadow .14s, border-color .14s; }
.card:hover { border-color: var(--bronze); }
.primary { transition: filter .12s, transform .08s; } .primary:hover:not(:disabled) { filter: brightness(1.08); }
/* testing tools only for admins and offline test copies */
.test-only { display: none; } body.tester .test-only { display: block; }

/* ---- the sign-in gate ---- */
body.gated { overflow: hidden; }
body.gated #setup, body.gated #battle { display: none; }
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: #080a12; }
.gate-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.gate-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(8,10,18,.35), rgba(8,10,18,.92) 75%); }
.gate-box { position: relative; width: min(460px, 100%); text-align: center; display: grid; gap: 14px; justify-items: center; }
.gate-logo { font-size: 54px; }
.gate-body { width: 100%; background: rgba(20,14,9,.78); border: 1px solid var(--bronze-dark); border-radius: 16px; padding: 20px; box-shadow: var(--inner), 0 20px 50px rgba(0,0,0,.6); backdrop-filter: blur(8px); }
.gate-body h2 { margin: 0 0 6px; font: 800 24px var(--title); color: var(--gold); }
.gate-body p { margin: 0 0 12px; }
.gate-form { display: grid; gap: 10px; text-align: left; }
.gate-form input[type=email], .gate-form input#acName { width: 100%; font-size: 17px; padding: 13px 14px; background: #120c07; color: var(--text); border: 1px solid var(--bronze); border-radius: 10px; }
.gate-form .check { margin: 0; }
.gate-body .big { width: 100%; }
.gate-body .ghost.big { margin-top: 10px; }
.gate-msg { margin-top: 12px; min-height: 1em; }
.gate-foot { color: var(--muted); font-size: 13px; margin: 0; } .gate-foot a { color: var(--gold); }
.gate-wait { color: var(--muted); }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--bronze-dark); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; vertical-align: -3px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.error { color: #ffb0a6; }
@media (max-width: 760px) { .head-logo { font-size: 22px; } .gate-logo { font-size: 40px; } }

/* Showcase mode: a clean screen for filming (index.html?showcase=...) */
body.showcase .unit, body.showcase .bottom, body.showcase .log, body.showcase .log-toggle, body.showcase .report-in-battle,
body.showcase .hud-top, body.showcase #modal { display: none !important; }
body.showcase.wide-stage #stage { position: fixed; left: 0; top: 0; width: 1280px !important; height: 720px !important; }

/* Pet nicknames */
.card .nm .species { font: 600 11px 'Nunito', sans-serif; color: var(--muted); }
.card .nick { display: inline-block; margin-left: 4px; font-size: 13px; color: var(--muted); cursor: pointer; padding: 0 3px; border-radius: 4px; }
.card .nick:hover { color: var(--gold); background: rgba(241,199,91,.12); }

/* Up to 40 saved teams: the lists scroll instead of growing forever */
.quick-teams { max-height: 158px; overflow-y: auto; padding-right: 4px; }
.team-list { max-height: 560px; overflow-y: auto; padding-right: 4px; }

/* Pets you haven't tamed yet (JC, 6 Nov 2026): a dark shape to hunt for */
.card.locked { cursor: default; opacity: .72; border-style: dashed; }
.card.locked:hover { transform: none; }
.locked-art img { filter: brightness(0); opacity: .8; }
.mini-pet.locked { opacity: .6; }
.owned-note { margin: 4px 0 10px; color: var(--muted); }
.owned-note b { color: var(--gold, #f3d27a); }

/* Weather charms on the Fight tab, and the weather countdown in battle (JC, 6 Nov 2026) */
.charm-box { margin-top: 14px; }
.charm-box h3 { margin: 0 0 8px; }
.charms { display: flex; flex-wrap: wrap; gap: 8px; }
.charms button { display: grid; justify-items: start; gap: 1px; padding: 8px 12px; border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(241,199,91,.25); color: inherit; font: 600 14px inherit; }
.charms button small { font-size: 11px; opacity: .7; font-weight: 400; }
.charms button .cnt { color: #f1c75b; margin-left: 4px; }
.charms button.on { border-color: #f1c75b; background: rgba(241,199,91,.18); box-shadow: 0 0 0 1px #f1c75b inset; }
.charms button:disabled { opacity: .35; cursor: default; }
.small-note { font-size: 12px; margin: 6px 0 0; }
.wchip.temp { box-shadow: 0 0 0 1px #f1c75b inset, 0 0 12px rgba(241,199,91,.4); }
.wchip .left { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; border-radius: 9px; background: #f1c75b; color: #2a1a05; font-size: 11px; }
.charm-won { margin: 10px auto 4px; padding: 8px 12px; border-radius: 10px; background: rgba(241,199,91,.12); border: 1px solid rgba(241,199,91,.4); }