/* ============================================================
   aid.css — 원조 위원회 (lessonType: "aid")
   교사 대시보드는 bal.css의 bl-*·hitl.css의 ht-* 골격(딥네이비)을 재사용, 여기엔 aw-* 전용만.
   핵심 연출은 3D 카드 뒤집기 — 나라 카드(앞면 1인당 GDP / 뒷면 시나리오), 모둠 카드, 사상가 카드.
   ============================================================ */
:root {
  --awA: #2f9b6b; --awA-soft: #ddf2e8;   /* A국 — 막 싹트는 희망(초록) */
  --awB: #d4573a; --awB-soft: #fbe5de;   /* B국 — 절망·고통(코럴) */
  --awC: #3f6fa8; --awC-soft: #e6edf6;   /* C국 — 우방(블루) */
  --awN: #8a6d3b; --awN-soft: #f3ebdb;   /* 원조하지 않음 — 돌려줌(브라운) */
  --awDuty: #3f6fa8; --awCharity: #d08a22;
}

/* ── 공용: 선택 알약·점 ── */
.aw-pick-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; white-space: nowrap; border: 1.5px solid currentColor; }
.aw-pick-pill.big { font-size: 18px; padding: 5px 14px; }
.aw-pick-pill.p-a { color: var(--awA); background: var(--awA-soft); }
.aw-pick-pill.p-b { color: var(--awB); background: var(--awB-soft); }
.aw-pick-pill.p-c { color: var(--awC); background: var(--awC-soft); }
.aw-pick-pill.p-n { color: var(--awN); background: var(--awN-soft); }
.aw-pick-pill.p-x { color: #999; background: transparent; border-style: dashed; }
.aw-pick-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 900; font-size: 12px; color: #fff; flex: none; }
.aw-pick-dot.p-a { background: var(--awA); } .aw-pick-dot.p-b { background: var(--awB); } .aw-pick-dot.p-c { background: var(--awC); } .aw-pick-dot.p-n { background: var(--awN); }
.aw-chg { display: inline-block; font-size: 12.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #eceae4; color: #555; }
.aw-chg.on { background: #ffe9a8; color: #7a5200; }
.aw-chg.big { display: block; margin: 8px 0 2px; font-size: 14px; padding: 6px 12px; border-radius: 10px; text-align: center; }
.aw-side-tag { display: inline-block; font-style: normal; font-weight: 800; font-size: 12px; padding: 1px 8px; border-radius: 999px; color: #fff; margin-right: 4px; }
.aw-side-tag.duty { background: var(--awDuty); } .aw-side-tag.charity { background: var(--awCharity); }

/* ── 나라 카드 — 3D 뒤집기 ── */
.aw-card { perspective: 1200px; min-height: 230px; position: relative; }
.aw-card.compact { min-height: 118px; }
.aw-card.xl { min-height: clamp(300px, 58vh, 560px); }
.aw-card-inner { position: relative; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,1.35,.5,1); }
.aw-card.open .aw-card-inner { transform: rotateY(180deg); }
.aw-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; box-shadow: var(--sh-2, 0 4px 14px rgba(0,0,0,.12)); overflow: hidden; }
.aw-card-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; padding: 14px;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px); }
.aw-card.c-a .aw-card-front { background-color: var(--awA); }
.aw-card.c-b .aw-card-front { background-color: var(--awB); }
.aw-card.c-c .aw-card-front { background-color: var(--awC); }
.aw-card-badge { position: absolute; top: 10px; left: 12px; font-weight: 900; font-size: 13px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; }
.aw-card-name { font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.aw-card-gdp { display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,.16); border-radius: 12px; padding: 6px 14px; }
.aw-card-gdp small { font-size: 11px; opacity: .85; } .aw-card-gdp b { font-size: 20px; }
.aw-card-q { font-size: 13px; font-weight: 800; opacity: .9; margin-top: 4px; }
.aw-card.compact .aw-card-name { font-size: 18px; } .aw-card.compact .aw-card-gdp { padding: 3px 8px; } .aw-card.compact .aw-card-gdp b { font-size: 14px; } .aw-card.compact .aw-card-gdp small { font-size: 10px; } .aw-card.compact .aw-card-q { display: none; } .aw-card.compact .aw-card-badge { display: none; }
.aw-card.tappable { cursor: pointer; }
.aw-card.tappable .aw-card-front { animation: aw-wiggle 2.4s ease-in-out infinite; box-shadow: 0 0 0 3px #ffd45e, 0 8px 22px rgba(0,0,0,.22); }
.aw-card.tappable .aw-card-q { background: #ffd45e; color: #3b2a00; padding: 3px 10px; border-radius: 999px; opacity: 1; }
@keyframes aw-wiggle { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-2deg); } 94% { transform: rotate(2deg); } }
.aw-card-back { transform: rotateY(180deg); background: #fff; color: var(--ink, #1b1f26); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.aw-card-back p { font-size: 13px; line-height: 1.5; margin: 0; }
.aw-card-backhead { display: flex; align-items: center; gap: 8px; }
.aw-card-backhead .aw-card-badge { position: static; color: #fff; }
.aw-card.c-a .aw-card-backhead .aw-card-badge { background: var(--awA); } .aw-card.c-b .aw-card-backhead .aw-card-badge { background: var(--awB); } .aw-card.c-c .aw-card-backhead .aw-card-badge { background: var(--awC); }
.aw-card-gdp-sm { margin-left: auto; font-size: 11.5px; color: var(--slate, #667); }
.aw-card-title { font-size: 16px; font-weight: 900; }
.aw-card.c-a .aw-card-title { color: var(--awA); } .aw-card.c-b .aw-card-title { color: var(--awB); } .aw-card.c-c .aw-card-title { color: var(--awC); }
.aw-card.c-a .aw-card-back { border-top: 6px solid var(--awA); } .aw-card.c-b .aw-card-back { border-top: 6px solid var(--awB); } .aw-card.c-c .aw-card-back { border-top: 6px solid var(--awC); }
.aw-card.compact .aw-card-back { padding: 8px 10px; } .aw-card.compact .aw-card-back p { display: none; } .aw-card.compact .aw-card-title { font-size: 13px; }
.aw-card.xl .aw-card-name { font-size: 46px; } .aw-card.xl .aw-card-gdp b { font-size: 34px; } .aw-card.xl .aw-card-gdp small { font-size: 15px; }
.aw-card.xl .aw-card-q { font-size: 18px; } .aw-card.xl .aw-card-badge { width: 40px; height: 40px; font-size: 20px; }
.aw-card.xl .aw-card-back { padding: clamp(14px, 1.4vw, 24px); gap: 10px; } .aw-card.xl .aw-card-title { font-size: clamp(18px, 1.9vw, 30px); } .aw-card.xl .aw-card-back p { font-size: clamp(13px, 1.25vw, 21px); line-height: 1.55; }
.aw-card.xl .aw-card-gdp-sm { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .aw-card-inner, .aw-th-inner, .aw-gflip-inner { transition: none; } .aw-card.tappable .aw-card-front { animation: none; } }

/* ── 학생 화면 ── */
/* flex: 1 0 auto — 줄어들지 않게. 내용이 화면보다 길면 박스가 늘어나 푸터가 카드 위로 겹치지 않는다(.hub-gate와 같은 이유) */
.aw-stage { flex: 1 0 auto; display: flex; flex-direction: column; }
.aw-progress { display: flex; gap: 4px; padding: 10px 14px 0; max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.aw-progress span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--slate-2, #888); padding: 6px 2px; border-radius: 999px; background: var(--paper-2, #eee); }
.aw-progress span b { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: #fff; }
.aw-progress span.cur { background: var(--ink, #1b1f26); color: #fff; } .aw-progress span.cur b { color: var(--ink, #1b1f26); }
.aw-progress span.done { color: var(--awA); background: var(--awA-soft); }
.aw-body { flex: 1; padding: 12px 14px 40px; max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.aw-panel { display: flex; flex-direction: column; gap: 12px; }
.aw-h { font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.aw-lead { font-size: 14.5px; line-height: 1.55; color: var(--ink-2, #333); margin: 0; }
.aw-sub { font-size: 13px; font-weight: 800; color: var(--slate, #556); margin-top: 4px; }
.aw-note { font-size: 13px; color: var(--slate, #556); margin: 0; }
.aw-wait { font-size: 14px; background: #fff; border: 1.5px dashed var(--line-2, #ccc); border-radius: 12px; padding: 12px 14px; margin: 0; }
.aw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aw-cards:not(.compact) { grid-template-columns: 1fr; }
@media (min-width: 560px) { .aw-cards:not(.compact) { grid-template-columns: repeat(3, 1fr); } .aw-cards:not(.compact) .aw-card { min-height: 300px; } }
.aw-card-wrap { display: flex; flex-direction: column; gap: 4px; }
.aw-owner { text-align: center; font-size: 12px; font-weight: 800; color: var(--slate, #556); }
.aw-picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 520px) { .aw-picks { grid-template-columns: repeat(4, 1fr); } }
.aw-pick { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; border: 2px solid var(--line, #ddd); background: #fff; cursor: pointer; font-size: 14px; font-weight: 800; text-align: left; transition: transform .15s, background .15s; }
.aw-pick b { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.aw-pick.p-a b { background: var(--awA); } .aw-pick.p-b b { background: var(--awB); } .aw-pick.p-c b { background: var(--awC); } .aw-pick.p-n b { background: var(--awN); font-size: 15px; }
.aw-pick.sel { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.aw-pick.p-a.sel { border-color: var(--awA); background: var(--awA-soft); } .aw-pick.p-b.sel { border-color: var(--awB); background: var(--awB-soft); }
.aw-pick.p-c.sel { border-color: var(--awC); background: var(--awC-soft); } .aw-pick.p-n.sel { border-color: var(--awN); background: var(--awN-soft); }
.aw-pick em { position: absolute; top: -8px; right: 8px; font-style: normal; font-size: 10.5px; background: var(--ink, #222); color: #fff; padding: 1px 7px; border-radius: 999px; }
.aw-ta { width: 100%; font-size: 15px; line-height: 1.5; }
.aw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aw-count { font-size: 12px; color: var(--slate-2, #888); } .aw-count.ok { color: var(--awA); font-weight: 700; }
.aw-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: var(--sh-1); font-size: 14px; }
.aw-mine > span:not(.aw-pick-pill):not(.aw-chg):not(.aw-side-tag) { flex: 1; min-width: 160px; }
.aw-members { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-members span { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--paper-2, #eee); color: var(--slate, #556); }
.aw-members span.on { background: var(--awA-soft); color: var(--awA); font-weight: 800; }
.aw-members span.me { outline: 2px solid var(--ink, #222); }
.aw-members span.absent { opacity: .45; text-decoration: line-through; }
.aw-writer { font-size: 14px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1.5px solid var(--line, #ddd); }
.aw-writer.me { background: #fff6d6; border-color: #e9b93a; }
.aw-firsts { display: flex; flex-direction: column; gap: 6px; }
.aw-first { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; box-shadow: var(--sh-1); }
.aw-first b { flex: none; }
.aw-sub-card { display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,.6); border-radius: 14px; padding: 10px; border: 1px solid var(--line, #ddd); }
.aw-recap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; background: #fff; border-radius: 12px; padding: 9px 12px; }
.aw-recap > span:first-child { font-weight: 800; color: var(--slate, #556); font-size: 12.5px; }
.aw-recap i { font-style: normal; color: var(--ink-2, #333); flex: 1; min-width: 160px; }
.aw-toggle { align-self: flex-start; border: 0; background: transparent; font-weight: 800; font-size: 14px; cursor: pointer; padding: 4px 0; color: var(--ink, #222); }
.aw-turn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: var(--sh-1); }
.aw-turn > div { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.aw-turn small { font-size: 11px; color: var(--slate-2, #888); font-weight: 700; }
.aw-turn em { font-style: normal; font-weight: 900; color: var(--slate-2, #888); }
.aw-board { display: flex; flex-direction: column; gap: 6px; }
.aw-board-row { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 7px 10px; font-size: 13.5px; }
.aw-board-row b { min-width: 52px; } .aw-board-row em { font-style: normal; color: #999; }
.aw-board-row.me { outline: 2px solid var(--ink, #222); }
.aw-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aw-side { border: 2px solid var(--line, #ddd); background: #fff; border-radius: 14px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.aw-side b { font-size: 20px; } .aw-side small { font-size: 12px; color: var(--slate, #556); }
.aw-side.duty.sel { border-color: var(--awDuty); background: #e6edf6; } .aw-side.duty b { color: var(--awDuty); }
.aw-side.charity.sel { border-color: var(--awCharity); background: #fbf0d6; } .aw-side.charity b { color: var(--awCharity); }
/* ⑤ 논술 */
.aw-h-tag { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #ffe9a8; color: #7a5200; }
.aw-essay-field { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 14px; padding: 12px; box-shadow: var(--sh-1); }
.aw-essay-q { font-size: 14.5px; font-weight: 800; line-height: 1.5; }
.aw-essay-tip { font-size: 12.5px; color: var(--slate, #556); background: var(--paper, #f3f1ec); border-radius: 8px; padding: 6px 9px; }
.aw-rubric { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }
.aw-rubric div { display: flex; flex-direction: column; gap: 2px; } .aw-rubric span { color: var(--slate, #556); }
.aw-comment { background: #eef6ff; border: 1px solid #b9d5f5; border-radius: 12px; padding: 9px 12px; font-size: 14px; }
.aw-rec { background: #fff; border-radius: 12px; padding: 9px 12px; box-shadow: var(--sh-1); }
.aw-rec small { font-weight: 800; font-size: 12px; color: var(--slate, #556); } .aw-rec p { margin: 2px 0 0; font-size: 14px; }

/* ── 집계 막대 ── */
.aw-tally { display: flex; flex-direction: column; gap: 6px; }
.aw-tally-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; }
.aw-tally-label { font-size: 13px; font-weight: 800; }
.aw-tally-row.p-a .aw-tally-label { color: var(--awA); } .aw-tally-row.p-b .aw-tally-label { color: var(--awB); } .aw-tally-row.p-c .aw-tally-label { color: var(--awC); } .aw-tally-row.p-n .aw-tally-label { color: var(--awN); }
.aw-tally-bars { display: flex; flex-direction: column; gap: 3px; }
.aw-tally-bar { position: relative; height: 18px; background: rgba(0,0,0,.06); border-radius: 6px; overflow: hidden; }
.aw-tally-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; transition: width .8s cubic-bezier(.22,.61,.36,1); min-width: 2px; }
.aw-tally-row.p-a i { background: var(--awA); } .aw-tally-row.p-b i { background: var(--awB); } .aw-tally-row.p-c i { background: var(--awC); } .aw-tally-row.p-n i { background: var(--awN); }
.aw-tally-bar.k-1 i, .aw-tally-bar.k-f i { opacity: .45; }
.aw-tally-bar em { position: relative; font-style: normal; font-size: 11px; font-weight: 800; padding-left: 6px; line-height: 18px; color: #222; }
.aw-tally.dark .aw-tally-bar { background: rgba(255,255,255,.08); } .aw-tally.dark .aw-tally-bar em { color: #fff; }
.aw-tally.dark .aw-tally-row.p-a .aw-tally-label { color: #6fd6a4; } .aw-tally.dark .aw-tally-row.p-b .aw-tally-label { color: #ff8f73; }
.aw-tally.dark .aw-tally-row.p-c .aw-tally-label { color: #8fb7ec; } .aw-tally.dark .aw-tally-row.p-n .aw-tally-label { color: #d9b77a; }
.aw-side-bar { display: flex; height: 30px; border-radius: 10px; overflow: hidden; font-size: 13px; font-weight: 800; color: #fff; }
.aw-side-bar i { font-style: normal; display: flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; overflow: hidden; transition: flex .8s; }
.aw-side-bar .duty { background: var(--awDuty); } .aw-side-bar .charity { background: var(--awCharity); }
.aw-side-bar.big { height: 70px; font-size: 26px; border-radius: 16px; }

/* ── 사상가 카드 ── */
.aw-thinkers { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .aw-thinkers { grid-template-columns: repeat(2, 1fr); } }
.aw-th { perspective: 1000px; min-height: 150px; }
.aw-th.minor { min-height: 120px; }
.aw-th-inner { position: relative; min-height: inherit; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,1.35,.5,1); }
.aw-th.open .aw-th-inner { transform: rotateY(180deg); }
.aw-th-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; overflow: hidden; }
.aw-th-front { background: #2b2440; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background-image: radial-gradient(circle at 30% 20%, rgba(255,212,94,.25), transparent 60%); }
.aw-th-front b { font-size: 22px; } .aw-th-front small { opacity: .75; font-size: 12px; } .aw-th-front span { font-size: 26px; font-weight: 900; opacity: .6; }
.aw-th.minor .aw-th-front { background: #3a3f4c; }
.aw-th.tappable { cursor: pointer; } .aw-th.tappable .aw-th-front { box-shadow: 0 0 0 3px #ffd45e; }
.aw-th-back { transform: rotateY(180deg); background: #fff; color: var(--ink, #1b1f26); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; border-top: 5px solid #2b2440; }
.aw-th-head { display: flex; align-items: center; gap: 8px; } .aw-th-head b { font-size: 17px; }
.aw-th-duty { font-size: 12.5px; color: var(--slate, #556); } .aw-th-duty b { color: var(--ink, #222); }
.aw-th-back p { margin: 0; font-size: 13px; line-height: 1.5; }

/* ── 교사 대시보드(딥네이비 bl-* 위) ── */
.aw-h-flips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aw-h-flip { padding: 10px 4px; border-radius: 10px; border: 1px solid var(--blLine); background: transparent; color: var(--blInk); font-weight: 800; cursor: pointer; }
.aw-h-flip.on { background: var(--blGold); color: #1a1a1a; border-color: var(--blGold); }
.aw-h-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.aw-h-counts > div { background: var(--blBg2); border: 1px solid var(--blLine); border-radius: 12px; padding: 8px 12px; font-size: 13px; color: var(--blMut); }
.aw-h-counts > div b { font-size: 24px; color: var(--blInk); margin-right: 2px; }
.aw-h-counts > div span { display: block; font-size: 12px; }
.aw-h-counts > div.cur { border-color: var(--blGold); } .aw-h-counts > div.cur b { color: var(--blGold); }
.aw-h-tallies { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 12px; }
.aw-h-tally { background: var(--blBg2); border: 1px solid var(--blLine); border-radius: 12px; padding: 10px 12px; }
.aw-h-writers { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1 !important; min-width: 0; }
.aw-h-gflips { margin-left: auto; display: flex; gap: 3px; }
.aw-h-gflips i { font-style: normal; font-size: 11px; font-weight: 800; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--blLine); display: inline-flex; align-items: center; justify-content: center; opacity: .5; }
.aw-h-gflips i.on { background: var(--blGold); color: #1a1a1a; opacity: 1; }
.aw-h-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.04); }
.aw-h-entry.empty i { opacity: .55; font-style: normal; }
.aw-h-entry.rej { opacity: .6; } .aw-h-entry em { color: #ff9a9a; font-style: normal; font-size: 12px; }
.aw-h-round { font-weight: 900; color: var(--blGold); }
.aw-h-why { flex: 1; min-width: 160px; } .aw-h-why small { opacity: .6; }
.aw-h-firsts { display: flex; flex-direction: column; gap: 3px; }
.aw-h-first { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.aw-h-first b { min-width: 52px; } .aw-h-first i { opacity: .5; font-style: normal; }
.aw-h-first .aw-pick-dot { width: 20px; height: 20px; font-size: 10.5px; }

/* ── 칠판 ── */
.aw-present { flex-shrink: 0; min-height: 100vh; background: #14172b; color: #eef0ff; padding: 26px 32px 40px; display: flex; flex-direction: column; gap: 18px; }
.aw-pres-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.aw-pres-kicker { font-size: 14px; letter-spacing: .12em; opacity: .7; font-weight: 800; }
.aw-pres-head h1 { margin: 0; font-size: clamp(22px, 3vw, 34px); flex: 1; }
.aw-pres-count { font-size: 15px; opacity: .75; }
.aw-pres-sub { font-size: clamp(18px, 2.2vw, 26px); text-align: center; opacity: .92; } .aw-pres-sub b { color: #ffd45e; }
.aw-pres-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.aw-pres-lights { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.aw-pres-lights span { display: inline-flex; flex-direction: column; align-items: center; padding: 8px 16px; border-radius: 12px; border: 1px solid #303660; background: #1d2140; font-weight: 800; font-size: 16px; min-width: 88px; }
.aw-pres-lights span small { font-size: 12px; opacity: .65; font-weight: 600; }
.aw-pres-lights span.on { border-color: #ffd45e; background: rgba(255,212,94,.15); }
.aw-pres-intro { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; margin-top: 4vh; }
.aw-pres-q { font-size: clamp(24px, 3.2vw, 42px); line-height: 1.4; text-align: center; } .aw-pres-q b { color: #ffd45e; }
.aw-pres-join { display: flex; align-items: center; gap: 20px; background: #fff; color: #1b1f26; padding: 14px 22px; border-radius: 18px; font-size: 20px; }
.aw-pres-steps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.aw-pres-steps span { padding: 6px 14px; border-radius: 999px; border: 1px solid #303660; font-size: 15px; opacity: .85; }
.aw-pres-reveal { display: flex; flex-direction: column; gap: 18px; }
.aw-pres-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.aw-gflip { perspective: 1000px; min-height: 190px; }
.aw-gflip-inner { position: relative; min-height: inherit; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,1.35,.5,1); }
.aw-gflip.open .aw-gflip-inner { transform: rotateY(180deg); }
.aw-gflip:not(.open) { cursor: pointer; }
.aw-gflip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; }
.aw-gflip-front { background: #1d2140; border: 2px solid #303660; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.aw-gflip-front b { font-size: 24px; } .aw-gflip-front span { font-size: 40px; opacity: .4; font-weight: 900; }
.aw-gflip-back { transform: rotateY(180deg); background: #fff; color: #1b1f26; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; overflow: hidden; }
.aw-gflip-back > b { font-size: 18px; }
.aw-gflip-turn { display: flex; align-items: center; gap: 8px; } .aw-gflip-turn em { font-style: normal; font-weight: 900; color: #888; }
.aw-gflip-back p { margin: 0; font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.aw-pres-tally { max-width: 900px; width: 100%; margin: 0 auto; }
.aw-pres-tally .aw-tally-row { grid-template-columns: 150px 1fr; } .aw-pres-tally .aw-tally-label { font-size: 18px; }
.aw-pres-tally .aw-tally-bar { height: 26px; } .aw-pres-tally .aw-tally-bar em { line-height: 26px; font-size: 14px; }
.aw-pres-hint { text-align: center; opacity: .65; font-size: 16px; }
.aw-pres-thinkers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.aw-pres-thinkers .aw-th { min-height: 210px; }
.aw-pres-thinkers .aw-th-front b { font-size: 30px; } .aw-pres-thinkers .aw-th-back p { font-size: 15.5px; } .aw-pres-thinkers .aw-th-head b { font-size: 21px; }
.aw-pres-thinkers.small { grid-template-columns: repeat(3, 1fr); }
.aw-pres-mine { display: flex; flex-direction: column; gap: 20px; max-width: 1100px; width: 100%; margin: 0 auto; }
@media (max-width: 900px) { .aw-pres-cards, .aw-pres-thinkers { grid-template-columns: 1fr; } }