:root { --ink:#fff; --muted:#b9b4e6; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; min-height:100%; }
body { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); touch-action:manipulation;
  background:radial-gradient(1200px 600px at 50% -10%,#5b3fd1 0%,#2a1b6e 45%,#150f3a 100%) fixed; }
.topbar { display:flex; justify-content:space-between; gap:.5rem; padding:.7rem 1rem; }
.pill { font:inherit; font-weight:600; color:#241a5c; background:rgba(255,255,255,.9); border:0; border-radius:999px; padding:.45rem 1rem; text-decoration:none; cursor:pointer; }

.arena { display:grid; grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr); gap:1rem; align-items:center; justify-content:center; padding:0 1rem 1.5rem; max-width:1200px; margin:0 auto; }
.pet-panel { background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.15); border-radius:24px; padding:1rem; text-align:center; transition:box-shadow .3s, border-color .3s, transform .3s; }
.pet-panel.active { border-color:#ffe066; box-shadow:0 0 0 4px rgba(255,224,102,.25), 0 0 40px rgba(255,224,102,.25); transform:scale(1.03); }
.who { font-weight:800; font-size:1.3rem; letter-spacing:.05em; }
.pet { position:relative; width:min(150px,100%); margin:.2rem auto; animation:bob 2.4s ease-in-out infinite; }
.pet svg { display:block; width:100%; height:auto; filter:drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.pname { font-weight:700; font-size:1.1rem; }
.swatch { display:flex; gap:.4rem; align-items:center; justify-content:center; color:var(--muted); font-size:.8rem; margin:.1rem 0 .6rem; }
.swatch i { width:14px; height:14px; border-radius:4px; display:inline-block; }
.hpbar { height:14px; border-radius:99px; background:rgba(0,0,0,.35); overflow:hidden; }
.hpbar span { display:block; height:100%; width:100%; background:linear-gradient(90deg,#ff5252,#ffd740 50%,#69f0ae); border-radius:99px; transition:width .5s; }
.hptext { font-size:.8rem; color:var(--muted); margin-top:.3rem; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.p1 .pet.lunge { animation:none; transform:translateX(50px) scale(1.12); transition:transform .18s; }
.p2 .pet.lunge { animation:none; transform:translateX(-50px) scale(1.12); transition:transform .18s; }
.pet.hit { animation:shake .38s; }
.pet.hit svg { filter:brightness(1.8) drop-shadow(0 0 12px #fff); }
@keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-9px); } 40% { transform:translateX(9px); } 60% { transform:translateX(-6px); } 80% { transform:translateX(6px); } }
.float { position:absolute; left:50%; top:10%; transform:translateX(-50%); font-weight:900; font-size:2rem; color:#ffeb3b; text-shadow:0 2px 0 #b71c1c,0 0 12px #000; animation:rise 1s forwards; pointer-events:none; }
@keyframes rise { to { transform:translate(-50%,-70px); opacity:0; } }

.board-wrap { width:min(80vh,58vw); }
.turn { text-align:center; font-weight:800; font-size:1.15rem; min-height:1.8rem; margin-bottom:.5rem; }
.turn[data-p="0"] { color:#8fd0ff; } .turn[data-p="1"] { color:#ff9e9e; }
.board { position:relative; width:100%; aspect-ratio:1; background:rgba(10,6,40,.55); border:3px solid rgba(255,255,255,.18); border-radius:20px; padding:0; overflow:hidden; touch-action:none; user-select:none; }
.tile { position:absolute; left:0; top:0; width:calc(100% / var(--n)); height:calc(100% / var(--n)); transition:transform .25s ease-in; cursor:pointer; }
.tile i { position:absolute; inset:5%; display:block; border-radius:28%; background:radial-gradient(circle at 32% 28%,#fff8 0 12%,transparent 13%),linear-gradient(145deg,var(--a),var(--b)); box-shadow:inset 0 -4px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.35); transition:transform .15s; }
.tile.sel i { transform:scale(1.12); outline:3px solid #fff; outline-offset:1px; }
.tile.pop i { animation:pop .26s forwards; }
.tile.nope i { animation:shake .25s; }
@keyframes pop { to { transform:scale(0); opacity:0; } }
.hint { text-align:center; min-height:1.4rem; color:var(--muted); margin:.5rem 0 0; font-size:.95rem; }

.overlay { position:fixed; inset:0; background:rgba(10,6,40,.75); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:10; }
.overlay[hidden] { display:none; }
.modal { background:linear-gradient(160deg,#4a35b8,#2a1b6e); border:2px solid rgba(255,255,255,.25); border-radius:26px; padding:1.6rem 1.8rem; max-width:460px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.modal h1 { margin:.2rem 0 .6rem; }
.modal p { color:#e3deff; line-height:1.6; }
.go { font:inherit; font-weight:800; font-size:1.2rem; color:#2a1b6e; background:linear-gradient(180deg,#ffe066,#ffb300); border:0; border-radius:999px; padding:.7rem 2.6rem; cursor:pointer; box-shadow:0 6px 0 #c67c00; }
.go:active { transform:translateY(4px); box-shadow:0 2px 0 #c67c00; }

/* portrait: pets on top, board below */
@media (orientation:portrait), (max-width:760px) {
  .arena { grid-template-columns:1fr 1fr; grid-template-areas:"a b" "c c"; }
  #panel-0 { grid-area:a; } #panel-1 { grid-area:b; } .board-wrap { grid-area:c; width:min(98vw,68vh); justify-self:center; }
  .pet { width:min(90px,60%); } .pet-panel { padding:.6rem; } .swatch { display:none; }
  .p1 .pet.lunge, .p2 .pet.lunge { transform:translateY(20px) scale(1.12); }
}
/* short landscape phones */
@media (orientation:landscape) and (max-height:520px) {
  .board-wrap { width:min(78vh,54vw); } .pet { width:90px; } .swatch, .hptext { display:none; } .topbar { padding:.3rem .8rem; } .turn { min-height:1.4rem; margin-bottom:.2rem; }
}

.modal { max-width:640px; }
.picks { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:.7rem; margin-top:1rem; }
.picks[hidden], .go[hidden] { display:none; }
.pick { font:inherit; color:#fff; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2); border-radius:18px; padding:.6rem .4rem; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.15rem; transition:transform .15s, border-color .15s, background .15s; }
.pick:hover:not(:disabled), .pick:focus-visible { transform:translateY(-4px); border-color:#ffe066; background:rgba(255,255,255,.18); }
.pick.taken { opacity:.35; cursor:not-allowed; }
.pick-art { width:80px; }
.pick-art svg { display:block; width:100%; height:auto; }
.pick span { display:flex; align-items:center; gap:.3rem; font-size:.8rem; color:#d9d3ff; }
.pick i { width:12px; height:12px; border-radius:4px; display:inline-block; }

.right { display:flex; gap:.5rem; }
#fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.spark { position:absolute; left:50%; top:45%; width:10px; height:10px; border-radius:50%; pointer-events:none; animation:spark .65s ease-out forwards; }
@keyframes spark { to { transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0; } }
.arena.intro { animation:zoomin 1s cubic-bezier(.2,.9,.3,1); }
@keyframes zoomin { from { transform:scale(1.25); opacity:.2; } to { transform:scale(1); opacity:1; } }
.arena.shake1 { animation:sh1 .3s; } .arena.shake2 { animation:sh2 .45s; } .arena.shake3 { animation:sh3 .7s; }
@keyframes sh1 { 0%,100% { transform:translate(0); } 25% { transform:translate(-4px,2px); } 50% { transform:translate(4px,-2px); } 75% { transform:translate(-2px,2px); } }
@keyframes sh2 { 0%,100% { transform:translate(0); } 15% { transform:translate(-9px,4px); } 30% { transform:translate(9px,-5px); } 45% { transform:translate(-7px,5px); } 60% { transform:translate(6px,-3px); } 80% { transform:translate(-3px,2px); } }
@keyframes sh3 { 0%,100% { transform:translate(0) rotate(0); } 10% { transform:translate(-14px,7px) rotate(-.6deg); } 25% { transform:translate(14px,-8px) rotate(.6deg); } 40% { transform:translate(-11px,8px) rotate(-.4deg); } 55% { transform:translate(10px,-6px) rotate(.4deg); } 75% { transform:translate(-5px,3px); } }
.board-wrap { position:relative; }
.banner { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-weight:900; font-size:clamp(2rem,9vw,4rem); color:#ffe066; text-shadow:0 4px 0 #b71c1c,0 0 24px rgba(0,0,0,.7); pointer-events:none; z-index:5; white-space:nowrap; }
.banner[hidden] { display:none; }
.banner.show { animation:bn 1s ease-out forwards; }
@keyframes bn { 0% { transform:translate(-50%,-50%) scale(.3); opacity:0; } 25% { transform:translate(-50%,-50%) scale(1.25); opacity:1; } 45% { transform:translate(-50%,-50%) scale(1); } 85% { opacity:1; } 100% { transform:translate(-50%,-70%) scale(1); opacity:0; } }

.extra { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; align-items:center; margin-top:1rem; }
.extra .go { font-size:1.05rem; padding:.65rem 1.6rem; }
.go.alt { background:linear-gradient(180deg,#fff,#cfd8dc); box-shadow:0 6px 0 #90a4ae; }
.code { display:block; font-size:2.8rem; font-weight:900; letter-spacing:.3em; margin:.4rem 0; color:#ffe066; text-shadow:0 3px 0 #b71c1c; }
.code-input { font:inherit; font-size:1.6rem; font-weight:800; letter-spacing:.3em; text-transform:uppercase; text-align:center; width:7.5em; padding:.45rem; border-radius:14px; border:2px solid rgba(255,255,255,.4); background:rgba(0,0,0,.3); color:#fff; }
.err { color:#ff9e9e; font-weight:700; width:100%; text-align:center; margin:0; }

.toast { position:fixed; top:.7rem; left:50%; transform:translateX(-50%); z-index:30; background:#ffb300; color:#3b2a00; font-weight:700; padding:.5rem 1.1rem; border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.4); }
.toast[hidden] { display:none; }