/* Playable cards: one readable scale, spatial icons, and an original atlas identity. */
:root {
  --card-width:288px;
}
.icon-badge {
  --icon-ink:#51615e;
  --icon-paper:#edf0ed;
  display:inline-grid;place-items:center;flex:none;
  width:42px;height:42px;border-radius:11px;
  background:var(--icon-paper);color:var(--icon-ink);
  border:1px solid color-mix(in srgb,var(--icon-ink) 24%,transparent);
  box-shadow:inset 0 1px 0 #fff9;
}
.icon-badge[data-icon=castle] {--icon-ink:#384d66;--icon-paper:#e7edf7;border-radius:7px;}
.icon-badge[data-icon=leaf] {--icon-ink:#246241;--icon-paper:#e2efdf;border-radius:16px 6px 16px 6px;}
.icon-badge[data-icon=crown] {--icon-ink:#7b5106;--icon-paper:#ffedb8;border-radius:6px 6px 12px 12px;}
.icon-badge[data-icon=lightbulb] {--icon-ink:#15558a;--icon-paper:#e0efff;border-radius:50%;}
.icon-badge[data-icon=factory] {--icon-ink:#8a3d24;--icon-paper:#fae6d9;border-radius:5px;}
.icon-badge[data-icon=clock] {--icon-ink:#664494;--icon-paper:#eee5fc;border-radius:50%;}
.icon-badge[data-icon=avatar] {--icon-ink:#873961;--icon-paper:#f8e1ee;border-radius:14px 14px 5px 5px;}
.icon-badge>.icon {width:28px;height:28px;color:inherit;}

.idea-card {
  display:flex;flex-direction:column;min-height:420px;
  background:#fffdf7;border:1px solid color-mix(in srgb,var(--card-color) 50%,#bbb);
  border-top:0;border-radius:12px;overflow:hidden;
  color:#20352f;box-shadow:0 2px 3px #15372d12,0 8px 20px #15372d0d;
}
.idea-card.red {--card-color:#943c32;}
.idea-card.yellow {--card-color:#765709;}
.idea-card.green {--card-color:#276349;}
.idea-card.blue {--card-color:#275d7e;}
.idea-card.purple {--card-color:#69497f;}
.idea-card .card-heading {
  padding:14px 15px;gap:12px;min-height:88px;align-items:center;
  color:#fffdf5;background:var(--card-color);
  background-image:linear-gradient(120deg,#ffffff0a,transparent);
}
.idea-card .card-title {flex:1;min-width:0;}
.idea-card .card-color-name {
  display:block;margin:0 0 7px;color:#fffdf5;
  font:700 10px/1.2 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;
}
.idea-card .card-id {font:500 10px/1.2 'Manrope',sans-serif;letter-spacing:.03em;color:inherit;opacity:.85;}
.idea-card .card-heading h3 {
  font:700 21px/1.2 'Manrope',sans-serif;letter-spacing:-.035em;
  overflow-wrap:break-word;color:inherit;
}
.idea-card .age-seal {
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;
  width:48px;height:58px;flex:none;padding:0;border:1px solid #fff8;border-radius:8px;
  background:#ffffff12;color:#fffdf5;clip-path:none;
}
.idea-card .age-seal small {margin:0;font:700 9px/1.2 'Manrope',sans-serif;letter-spacing:.12em;}
.idea-card .age-seal strong {font:700 31px/1 'Manrope',sans-serif;letter-spacing:-.08em;padding-right:2px;}
.idea-card .card-art {
  display:block;position:relative;isolation:isolate;flex:none;height:82px;margin:0;border-radius:0;
  background-size:var(--art-zoom,140%) auto;background-position:var(--art-position,50%) var(--art-y,50%);
}
.idea-card .card-art::after {
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#0a2c2bb3,transparent 65%);
}
.idea-card .icon-slot {display:flex;align-items:center;flex-direction:column;justify-content:center;gap:6px;min-width:0;}
.idea-card .card-art>.icon-slot {
  position:absolute;left:15px;top:9px;padding:0;
}
.idea-card .card-art .icon-badge {box-shadow:0 2px 8px #09252155;}
.idea-card .card-featured {
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  margin:0;padding:12px 15px;border-bottom:1px solid #e4e6da;
  background:#f2f3eaff;color:#273d32;
}
.idea-card .card-featured .icon-badge {width:34px;height:34px;border-radius:9px;}
.idea-card .card-featured .icon {width:23px;height:23px;}
.idea-card .card-featured>span:not(.icon-badge) {display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.idea-card .card-featured small {font:700 9px/1.1 'Manrope',sans-serif;letter-spacing:.1em;color:#52604f;}
.idea-card .card-featured b {font:700 13px/1.2 'Manrope',sans-serif;}
.idea-card .card-featured>.effect-count {margin-left:auto;font-size:10px;letter-spacing:0;white-space:nowrap;}
.idea-card .card-effects {padding:15px;flex:1;}
.idea-card .card-effect {padding:0;margin:0;}
.idea-card .card-effect+.card-effect {margin-top:16px;padding-top:14px;border-top:1px solid #e1e5d9;}
.idea-card .effect-heading {display:flex;align-items:center;gap:7px;margin-bottom:7px;}
.idea-card .effect-index {
  position:static;font:700 10px/1 'Manrope',sans-serif;color:#4c6253;
  width:21px;height:19px;display:grid;place-items:center;border-radius:4px;background:#e9eee3;
}
.idea-card .dogma-label,.idea-card .demand-label {
  display:block;margin:0;font:800 10px/1.2 'Manrope',sans-serif;letter-spacing:.08em;color:#415749;
}
.idea-card .card-effects p {
  font:500 15px/1.6 'Manrope',sans-serif;letter-spacing:-.015em;
  padding:0;margin:0;color:#21372d;overflow-wrap:break-word;
}
.idea-card .card-effects .demand {
  border-left:3px solid #b14a34;border-top:0;border-radius:0 6px 6px 0;
  margin:0;padding:10px 11px;background:#faf0e9;
}
.idea-card .card-effects .card-effect+.demand {margin-top:16px;}
.idea-card .demand-label {color:#8e3525;}
.idea-card .demand .effect-index {color:#8e3525;background:#f2dbce;}
.idea-card .card-bottom {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  padding:13px 12px;background:#f3f2e9;border-top:1px solid #dde1d3;
}
.idea-card .card-bottom .icon-slot {min-width:0;}
.idea-card .card-bottom .icon-slot .icon {width:28px;height:28px;color:inherit;}
.idea-card.selected {outline:3px solid #b28529;outline-offset:3px;box-shadow:0 0 0 7px #b2852926;}
.idea-card .selection-order {
  right:7px;top:86px;width:32px;height:32px;
  color:#fff;background:#123e38;border:2px solid #fffdf7;font-size:14px;
}
.idea-card.has-order .card-heading {padding-right:15px;}
.idea-card[role=button]:hover {transform:none;box-shadow:0 3px 6px #15372d14,0 9px 22px #15372d24;}

/* Cards gain room instead of shrinking rules text as the viewport narrows. */
.library-grid {grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:28px 24px;}
.library-grid>div {min-width:0;}
.board-columns {grid-template-columns:repeat(5,minmax(var(--card-width),1fr));gap:16px;}
.color-pile {width:auto;min-width:0;scroll-snap-align:start;}
.board-scroll-hint {display:block;font-size:12px;color:#536753;margin:0 0 15px;}
.board-color-nav {display:flex;gap:6px;margin-bottom:16px;}
.board-color-nav button {
  display:flex;align-items:center;justify-content:center;gap:6px;
  flex:1;min-width:0;min-height:42px;padding:8px;
  border:1px solid color-mix(in srgb,var(--card-color) 35%,#e0dfd2);border-radius:7px;
  background:color-mix(in srgb,var(--card-color) 6%,#fffdf7);
  color:#354839;font-size:12px;font-weight:700;
}
.board-color-nav button:hover {background:color-mix(in srgb,var(--card-color) 16%,#fffdf7);}
.pile-label {font-size:11px;font-weight:700;letter-spacing:.06em;gap:7px;}
.pile-label>span:last-child {font-size:10px;}
.color-dot {width:8px;height:8px;}
.empty-pile {min-height:420px;}
.hand-cards,.decision-options {align-items:stretch;gap:18px;scroll-snap-type:x proximity;}
.hand-cards>.idea-card,.decision-options>.idea-card {width:var(--card-width);min-width:var(--card-width);flex:none;scroll-snap-align:start;}
.covered-card {min-height:42px;font-size:12px;gap:8px;padding:7px 9px;}
.covered-card>small {font-size:12px;font-weight:700;}
.covered-card .exposed-icons {gap:4px;}
.exposed-icons .icon-badge {width:26px;height:26px;border-radius:6px;}
.exposed-icons .icon {width:19px;height:19px;}
.icon-bar {border-radius:12px;padding:9px 11px;gap:12px;}
.icon-count {gap:5px;}
.icon-count .icon-badge {width:28px;height:28px;border-radius:7px;}
.icon-count .icon {width:20px;height:20px;color:inherit;}
.icon-count b {font-size:14px;font-weight:700;}
.modal.card-detail {width:470px;max-width:100%;}
.modal>.idea-card {max-width:none;min-width:0;width:100%;}
.modal .idea-card .card-effects p {font-size:16px;}
.modal .idea-card .card-heading h3 {font-size:24px;}
.close-modal {min-width:38px;min-height:38px;color:#526553;}
.decision-options {max-height:none;overflow:visible;padding:23px 5px;}
.decision-panel {max-width:1040px;width:94vw;}
.decision-footer {position:sticky;bottom:-32px;background:#f7f2e7;z-index:3;padding-bottom:12px;}

@media(max-width:900px) {
  .board-columns {display:grid;grid-template-columns:repeat(5,var(--card-width));}
  .section-title .icon-bar {gap:9px;}
}
@media(max-width:650px) {
  :root {--card-width:min(288px,calc(100vw - 44px));}
  .library-grid {grid-template-columns:minmax(0,1fr);max-width:420px;}
  .board-columns {display:grid;gap:14px;}
  .board-color-nav {gap:4px;}
  .board-color-nav button {padding:6px 3px;gap:4px;font-size:10px;}
  .board-color-nav .color-dot {width:6px;height:6px;}
  .color-pile {width:auto;min-width:0;}
  .section-title .icon-bar {gap:9px;padding:9px;}
  .icon-count {gap:4px;}
  .icon-count .icon-badge {width:25px;height:25px;}
  .icon-count .icon {width:18px;height:18px;}
  .modal.card-detail {padding:18px 14px;}
  .modal-heading {margin-bottom:14px;gap:10px;}
  .modal .idea-card .card-heading h3 {font-size:21px;}
  .modal .idea-card .card-effects p {font-size:15px;}
  .modal-shade,.decision-shade {padding:10px;}
  .decision-panel {padding:22px 14px;min-width:0;width:100%;}
  .decision-options {flex-wrap:nowrap;max-height:none;overflow:auto;align-items:stretch;gap:14px;}
  .decision-options>.idea-card {width:min(288px,calc(100vw - 62px));min-width:min(288px,calc(100vw - 62px));}
  .decision-footer {bottom:-22px;gap:10px;}
}