/* Content-first styling */
.en-container { max-width: 1100px; margin: 0 auto; padding: 12px 16px; }
.en-h1 { font-size: 28px; line-height: 1.2; margin: 6px 0 10px; }
.en-lead { color:#374151; margin:0 0 14px; }
.en-breadcrumbs { font-size: 14px; color:#6b7280; margin-bottom:8px; }
.en-breadcrumbs a { color: inherit; text-decoration: none; }
.en-breadcrumbs a:hover { text-decoration: underline; }

.en-chooser-row { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin: 12px 0 18px; }
.en-chooser { border:1px solid #e5e7eb; border-radius:10px; padding:12px; background:#fff; }
.en-chooser h2 { margin:0 0 8px; font-size:18px; }
.en-search { width:100%; padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; margin-bottom:8px; }

/* Visible card tiles with optional background image */
.en-card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap:10px; }
.en-cardbtn {
  position: relative; aspect-ratio: 2/3; border-radius:10px; overflow:hidden;
  background: linear-gradient(180deg, #0ea5e9, #7c3aed);
  border: 2px solid #1f2937; cursor:pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15);
  display:flex; align-items:flex-end; justify-content:center; color:#fff; font-weight:700; text-align:center; padding:6px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.en-cardbtn .en-label { 
  font-size: 11px; line-height:1.15; width:100%; background: rgba(0,0,0,.45); padding:4px 6px; border-radius:6px;
}
.en-cardbtn:hover { transform: translateY(-1px); }
.en-cardbtn.active { outline: 3px solid #10b981; }

/* Optional list fallback */
.en-altlist { margin-top: 8px; }
.en-card-list { list-style:none; margin:0; padding:0; max-height:240px; overflow:auto; }
.en-card-list li { padding:8px 10px; border-radius:8px; cursor:pointer; }
.en-card-list li:hover, .en-card-list li.active { background:#f9fafb; }

/* Selected + pairs */
.en-selected-wrap { margin: 10px 0 16px; }
.en-selected-title { margin:0 0 6px; }
.en-pairs-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.en-pair { border:1px solid #e5e7eb; border-radius:10px; padding:10px; background:#fff; }
.en-pair a { text-decoration:none; color:inherit; display:block; }
.en-pair a:hover { text-decoration:underline; }
.en-pair small { display:block; color:#6b7280; margin-top:4px; }

.en-longlist { margin-top:16px; }
.en-combos-list { columns: 2 ; column-gap: 24px; list-style: disc; padding-left: 18px; }
.en-combos-list li { break-inside: avoid; margin: 3px 0; }

/* Picker styles */
.en-tarot-picker { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; background: #ffffff; }
.en-tarot-picker .en-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px; }
.en-tarot-picker .en-btn { border: 1px solid #e5e7eb; background:#f9fafb; padding:8px 12px; border-radius:8px; cursor:pointer; }
.en-tarot-picker .en-btn:hover { background:#f3f4f6; }
.en-tarot-picker .en-instructions { margin: 8px 0 12px; color:#374151; }
.en-tarot-picker .en-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(80px,1fr)); gap:10px; }
.en-card { position: relative; aspect-ratio: 2 / 3; border-radius:10px; overflow:hidden; background: linear-gradient(180deg, #0ea5e9, #7c3aed); border: 2px solid #111827; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.en-card .en-back { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; }
.en-card .en-front { position:absolute; inset:0; background:#fff; padding:6px; display:flex; flex-direction:column; }
.en-card .en-front .en-name { font-weight:600; font-size:12px; margin-bottom:6px; }
.en-card .en-front .en-keywords { font-size:11px; color:#4b5563; }
.en-card.revealed { border-color:#10b981; }
.en-result { margin-top:14px; }
.en-card-meaning { background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; padding:12px; margin-bottom:10px; }
.en-card-meaning h2 { margin:0 0 6px; }