*{box-sizing:border-box}body{margin:0;background:#182a24;color:#fff8e7;font:15px system-ui,-apple-system,sans-serif;background-image:linear-gradient(#102b26ac,#13261be0),url('/assets/ui/fondos/mundobeastkin.jpg');background-size:cover;background-position:center;background-attachment:fixed}button,input{font:inherit}button{cursor:pointer;border:1px solid #d9d49b;background:linear-gradient(140deg,#f5e4a1,#abd09d);border-radius:14px;color:#26372c;font-weight:750;padding:10px 14px}button:disabled{opacity:.4;cursor:not-allowed}.wrap{max-width:750px;margin:auto;padding:15px 12px 100px}.top{background:#19382ee8;border:1px solid #d2cf9a66;border-radius:18px;padding:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:space-between}.top strong{font-size:19px}.stats{font-size:13px;display:flex;gap:9px;align-items:center}.stats span{padding:6px;background:#274537;border-radius:10px}.tabs{position:fixed;z-index:8;bottom:0;left:0;right:0;display:flex;justify-content:center;background:#162d25ed;border-top:1px solid #e7d9a365;padding:9px;gap:6px}.tabs button{font-size:12px;padding:11px 5px;flex:1;max-width:160px}.tabs .active{background:#305740;color:#fff6d0}h1,h2,h3{color:#ffe5a6;margin:14px 0}h1{font-size:25px}p{line-height:1.5}.panel{background:#1d392ee8;border:1px solid #d1dca368;border-radius:19px;padding:16px;margin:13px 0}.muted{color:#c7dac9;font-size:13px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:14px auto;max-width:510px}.tile{padding:0;aspect-ratio:1;border-radius:12px;background:linear-gradient(140deg,#b6d0a6,#6d9c83);display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;border:2px solid #f3e3a7;box-shadow:0 3px 9px #0005}.tile img{width:95%;height:95%;object-fit:contain}.tile.hidden{background:#355044;color:#f6dfa2;font-size:30px}.tile.matched{opacity:.35}.card{border:1px solid #c1c8986c;background:#294a3aeb;border-radius:15px;padding:11px;min-width:0}.card img{width:100%;height:115px;object-fit:contain}.card strong{display:block;margin:8px 0}.card p{font-size:12px}.card button{width:100%;font-size:12px}.modes{grid-template-columns:repeat(2,minmax(0,1fr))}.modes .card{min-height:154px}.game-status{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.alert{background:#713e36;border-radius:12px;padding:12px;margin:14px 0}.success{background:#2b5c3e;padding:14px;border-radius:15px}.bigegg{display:block;margin:10px auto;width:min(70vw,280px);height:280px;background:radial-gradient(circle,#efd69277,transparent 65%);border:0}.bigegg img{width:100%;height:100%;object-fit:contain}.bigegg.shake{animation:shake .14s infinite alternate}@keyframes shake{from{transform:rotate(-8deg) scale(1.05)}to{transform:rotate(8deg) scale(1.12)}}.beast{width:180px;height:200px;object-fit:contain;display:block;margin:auto}.matchgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:14px auto;max-width:520px}.matchgrid .tile{border-radius:9px}.matchgrid .picked{outline:3px solid #ffdb67}.tubegrid{display:flex;align-items:end;gap:8px;justify-content:center;flex-wrap:wrap;margin:15px 0}.tube{width:60px;min-height:190px;background:#446455b3;border:2px solid #c1d7ba;border-radius:8px 8px 23px 23px;display:flex;flex-direction:column-reverse;align-items:center;gap:4px;padding:5px}.tube.picked{border-color:#ffdf79;box-shadow:0 0 10px #ffe483}.tube img{width:43px;height:39px;object-fit:contain}.bubblegrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin:15px auto;max-width:480px}.bubblegrid button{padding:2px;min-width:0;aspect-ratio:1;border-radius:50%;background:#48664c;border-color:#c2d09d}.bubblegrid img{width:100%;height:100%;object-fit:contain}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row button{flex:1}.error{color:#ffd6c7}.owned{color:#b7eaa4}.loading{padding:60px;text-align:center}.small{font-size:12px}.avatar{width:100%;height:170px;object-fit:contain}.center{text-align:center}.nowrap{white-space:nowrap}@media(max-width:390px){.tube{width:46px;min-height:154px}.tube img{width:35px;height:31px}.top strong{font-size:16px}.tiles{gap:4px}.card img{height:95px}}

/* PORTADAS RECTANGULARES CHIBI BEASTKIN */

.cb-games-heading {
  text-align: center;
  margin: 10px 0 22px;
}

.cb-games-eyebrow {
  font-size: 11px;
  color: #fbe2a0;
  letter-spacing: 2px;
  font-weight: 800;
}

.cb-games-heading h1 {
  color: #fff0c5;
  font-size: 29px;
  margin: 12px 0;
}

.cb-games-heading p {
  color: #d8e6d2;
  font-size: 14px;
}

.cb-games-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cb-game-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d8ca9180;
  border-radius: 22px;
  background: linear-gradient(145deg, #315341, #163428);
  box-shadow: 0 8px 20px #0005;
  min-width: 0;
}

.cb-game-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1b362b;
  overflow: hidden;
}

.cb-game-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cb-game-details {
  padding: 17px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.cb-game-details h2 {
  color: #ffe5a7;
  font-size: 21px;
  margin: 0;
}

.cb-game-details p {
  color: #e4ead7;
  font-size: 13px;
  margin: 0;
}

.cb-game-progress {
  color: #ffe1a0;
  font-weight: 700;
  font-size: 13px;
}

.cb-game-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.cb-game-actions button {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  font-size: 12px;
  border-radius: 12px;
  padding: 10px 6px;
}

.cb-game-actions .cb-play {
  background: linear-gradient(115deg, #ffe9a6, #b9dfa6);
  color: #163628;
}

.cb-game-actions .cb-replay {
  background: #244536;
  color: #f8eac1;
  border: 1px solid #c5d3a2;
}

.cb-game-actions button:disabled {
  opacity: .45;
}

@media (max-width: 600px) {
  .cb-games-list {
    grid-template-columns: 1fr;
  }

  .cb-game-cover {
    aspect-ratio: 16 / 9;
  }
}