Troquinha de Squish

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Troquinha de Squish</title>
<style>
:root{--blue:#168bff;--navy:#123a85;--pink:#ff7eb6;--pale:#f3f9ff}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#17336d;background:radial-gradient(circle at top left,#d5f1ff,transparent 45%),linear-gradient(135deg,#eaf6ff,#ffeaf5);min-height:100vh;padding:16px}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:14px;padding:11px 14px;font-weight:800;box-shadow:0 4px 0 #b9d8ff;transition:transform .12s}button:active{transform:translateY(2px);box-shadow:0 2px 0 #b9d8ff}.app{max-width:900px;margin:auto}.hero{text-align:center;background:linear-gradient(135deg,#168bff,#6b65ff);color:white;padding:22px 14px;border:4px solid white;border-radius:26px;box-shadow:0 8px 0 #bddfff;position:relative;overflow:hidden}.hero:before,.hero:after{content:'✦ ✧ ✦';position:absolute;font-size:26px;opacity:.55}.hero:before{left:10px;top:10px}.hero:after{right:10px;bottom:10px}.hero h1{font-size:clamp(27px,6vw,43px);margin:0;text-shadow:0 3px #174bb4}.hero p{margin:6px 0 0}.panel{margin-top:18px;background:#ffffffd9;border:3px solid white;border-radius:22px;padding:16px;box-shadow:0 7px 0 #c9e4ff}.panel h2{margin:0 0 10px;font-size:21px}.nameRow{display:flex;gap:8px;flex-wrap:wrap}.nameRow input{flex:1;min-width:150px;border:2px solid #b9ddff;border-radius:12px;padding:11px;background:#fff;color:#17336d}.primary{background:var(--blue);color:white}.pink{background:var(--pink);color:#63224b}.soft{background:#e3f2ff;color:#174a98}.collection{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.squish{background:white;border:2px solid #c6e6ff;border-radius:18px;padding:12px;text-align:center;box-shadow:0 4px 0 #d6eaff;position:relative}.squish.selected{border-color:#ff6db1;background:#fff0f8;outline:3px solid #ffb9d8}.emoji{font-size:47px;line-height:1.2}.squish strong{display:block}.squish small{display:block;color:#5873a9;margin:4px 0 8px}.squish button{width:100%;padding:8px;background:#e7f3ff;color:#194b98;box-shadow:none}.squish.selected button{background:#ff7eb6;color:white}.tradeArea{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.tradeSlot{min-height:125px;border:2px dashed #9ecfff;border-radius:18px;background:#f7fcff;padding:12px;text-align:center}.tradeSlot .emoji{font-size:42px}.swap{font-size:27px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.actions button{flex:1;min-width:115px}.accept{background:#25b979;color:white;box-shadow:0 4px 0 #a9e9ce}.decline{background:#ff7b9e;color:white;box-shadow:0 4px 0 #ffd0dd}.reset{background:#e7efff;color:#254d9a;box-shadow:0 4px 0 #c7d7ff}.status{margin-top:12px;padding:11px;border-radius:13px;background:#eef7ff;font-weight:700;text-align:center;min-height:44px}.footer{text-align:center;padding:18px 6px;color:#5374aa;font-size:13px}.pill{display:inline-block;background:#fff0f8;color:#a53673;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;margin-bottom:8px}@media(max-width:500px){body{padding:10px}.panel{padding:12px}.tradeArea{grid-template-columns:1fr}.swap{transform:rotate(90deg);text-align:center}.tradeSlot{min-height:90px}.hero{padding:20px 8px}}
</style></head>
<body><main class="app">
<header class="hero"><div class="pill">✨ COLEÇÃO FOFA ✨</div><h1>🧸 Troquinha de Squish 💙</h1><p>Escolha seus Squish, monte a oferta e faça sua troquinha!</p></header>
<section class="panel"><h2>👋 Quem está jogando?</h2><div class="nameRow"><input id="playerName" maxlength="20" placeholder="Seu nome ou apelido"><button class="primary" id="saveName">Salvar nome</button></div><div class="status" id="welcome">Bem-vindo(a)! Escolha um Squish para começar 💖</div></section>
<section class="panel"><h2>🍡 Minha coleção</h2><p>Toque em “Oferecer” para escolher o Squish da sua oferta.</p><div class="collection" id="collection"></div></section>
<section class="panel"><h2>🔄 Montar troquinha</h2><div class="tradeArea"><div class="tradeSlot"><strong>Você oferece</strong><div id="offerEmoji" class="emoji">❔</div><div id="offerName">Escolha um Squish</div></div><div class="swap">💞</div><div class="tradeSlot"><strong>Você recebe</strong><div id="receiveEmoji" class="emoji">🎁</div><div id="receiveName">Escolha abaixo</div></div></div><h2 style="margin-top:16px">🎀 Squish da outra pessoa</h2><div class="collection" id="otherCollection"></div><div class="actions"><button class="accept" id="accept">✅ Aceitar troca</button><button class="decline" id="decline">❌ Recusar</button><button class="reset" id="reset">🔁 Limpar oferta</button></div><div class="status" id="status">Selecione um Squish de cada lado para montar a oferta.</div></section>
<div class="footer">💙 Feito com carinho para fãs de Squish • Demonstração local, sem chat 💗</div>
</main>
<script>
const mine=[{id:'cloud',name:'Nuvem Azul',emoji:'☁️',rarity:'Comum'},{id:'bear',name:'Ursinho',emoji:'🧸',rarity:'Comum'},{id:'strawberry',name:'Moranguinho',emoji:'🍓',rarity:'Fofo'},{id:'kitty',name:'Gatinho',emoji:'🐱',rarity:'Fofo'},{id:'pudding',name:'Pudim',emoji:'🍮',rarity:'Raro'},{id:'star',name:'Estrelinha',emoji:'⭐',rarity:'Raro'}];
const theirs=[{id:'peach',name:'Pêssego',emoji:'🍑',rarity:'Fofo'},{id:'bunny',name:'Coelhinho',emoji:'🐰',rarity:'Fofo'},{id:'donut',name:'Donut',emoji:'🍩',rarity:'Comum'},{id:'unicorn',name:'Unicórnio',emoji:'🦄',rarity:'Raro'},{id:'heart',name:'Coração',emoji:'💖',rarity:'Raro'},{id:'frog',name:'Sapo Fofo',emoji:'🐸',rarity:'Comum'}];
let offer=null,receive=null,player='';const $=id=>document.getElementById(id);
function render(list,el,side){$(el).innerHTML=list.map(x=>`<article class="squish ${((side==='mine'&&offer?.id===x.id)||(side==='theirs'&&receive?.id===x.id))?'selected':''}"><div class="emoji">${x.emoji}</div><strong>${x.name}</strong><small>Raridade: ${x.rarity}</small><button data-side="${side}" data-id="${x.id}">${side==='mine'?'Oferecer':'Quero receber'}</button></article>`).join('')}
function update(){render(mine,'collection','mine');render(theirs,'otherCollection','theirs');$('offerEmoji').textContent=offer?.emoji||'❔';$('offerName').textContent=offer?.name||'Escolha um Squish';$('receiveEmoji').textContent=receive?.emoji||'🎁';$('receiveName').textContent=receive?.name||'Escolha abaixo'}
document.addEventListener('click',e=>{const b=e.target.closest('button[data-side]');if(!b)return;const list=b.dataset.side==='mine'?mine:theirs;const item=list.find(x=>x.id===b.dataset.id);if(b.dataset.side==='mine')offer=item;else receive=item;update();$('status').textContent='Oferta montada! Você pode aceitar, recusar ou limpar.'});
$('saveName').onclick=()=>{player=$('playerName').value.trim();$('welcome').textContent=player?`Oi, ${player}! Bora fazer troquinhas, ${player} 💙`:'Digite um apelido primeiro 😊'};
$('accept').onclick=()=>{$('status').textContent=offer&&receive?`🎉 Troca de demonstração aceita${player?' por '+player:''}! ${offer.name} ↔ ${receive.name}. Nenhum item real foi transferido.`:'Escolha um Squish para oferecer e outro para receber primeiro.'};
$('decline').onclick=()=>{$('status').textContent=offer&&receive?`Troca recusada. Você pode montar outra oferta quando quiser 💙`:'Ainda não há uma oferta completa para recusar.'};
$('reset').onclick=()=>{offer=null;receive=null;update();$('status').textContent='Oferta limpa! Escolha um Squish de cada lado.'};update();
</script></body></html>