/* base.css
   Shared layout + components for ALL themes.
   Theme-specific colors/backgrounds/extra effects live in theme-*.css.
*/

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  overflow-x: hidden;
}

button, select, input {
  font-family: inherit;
}

/* A simple container */
.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px;
}

/* ---------- Header / Controls ---------- */
header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom: 12px;

  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 0 10px;

  /* Themes can override background/backdrop on header; keep structure here */
}

h1{
  margin:0;
  font-size: 26px;
  letter-spacing: .2px;
}

.sub{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.25;
  opacity: .9;
}

.controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.pill{
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Shared button/select ergonomics (themes style the visuals) */
button, select{
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: inherit;
}

button{
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

select{
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Select dropdown readability baseline (themes may override) */
select option{
  background: #0c1023;
  color: #fff;
}

/* ---------- Message panel ---------- */
.msg{
  padding: 12px 14px;
  border-radius: 18px;
  margin: 10px 0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.tiny{
  font-size: 12px;
  opacity: .85;
}

/* ---------- Grid / Cards ---------- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}

.card{
  height: 132px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  perspective: 1100px;
  padding: 0;
  position: relative;
  user-select:none;
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}

.inner{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition: transform .28s cubic-bezier(.2,.9,.2,1);
}

.card.up .inner{ transform: rotateY(180deg); }

.face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 12px;
  backface-visibility:hidden;
  border-radius: 20px;
  text-align:center;
  line-height:1.18;
}

.front{
  font-size: 46px;
}

.back{
  transform: rotateY(180deg);
  font-size: 13.2px;
}

/* Selected / matched states (themes can restyle) */
.card.selected{
  outline: 2px solid rgba(255,204,102,.70);
  outline-offset: -2px;
}

.matchedBadge{
  position:absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  display:none;
}

.matched .matchedBadge{ display:inline-flex; }

/* Small animation for wrong picks */
.shake{ animation: shake .2s linear 2; }
@keyframes shake{
  0%{ transform: translateX(0) }
  25%{ transform: translateX(-4px) }
  50%{ transform: translateX(4px) }
  75%{ transform: translateX(-3px) }
  100%{ transform: translateX(0) }
}

/* ---------- Footer ---------- */
footer{
  margin-top: 14px;
  font-size: 12px;
  opacity: .9;
}

/* ---------- Confetti overlay (used by app.js) ---------- */
#confetti{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 520px){
  .grid{ grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
  .card{ height: 126px; }
  .front{ font-size: 42px; }
}