:root { color-scheme:light; --ink:#14213d; --muted:#667085; --blue:#1769e8; --coral:#ff6b72; --lime:#ffd160; --paper:#fff; --wash:#fffaf3; --line:#e5ded4; --shadow:0 18px 46px rgba(20,33,61,.10); font-family:ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-width:320px; overflow-x:hidden; background:var(--wash); color:var(--ink); font-size:16px; }
body { min-height:100vh; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; }
.app-shell { min-height:100vh; min-height:100dvh; }
.topbar { max-width:900px; margin:0 auto; padding:max(18px,env(safe-area-inset-top)) 24px 10px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:8px; min-height:44px; border:0; padding:0; background:none; color:var(--ink); font-weight:900; font-size:20px; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:#fff; background:var(--blue); }
.brand-mark svg { width:25px; height:25px; }
.quiet,.quiet-button { color:var(--muted); font-size:13px; }
.content { max-width:900px; margin:0 auto; padding:18px 24px max(44px,env(safe-area-inset-bottom)); }
h1 { margin:0; font-size:clamp(32px,7vw,54px); line-height:1.12; letter-spacing:-.06em; }
.lead { color:var(--muted); line-height:1.6; }
.panel,.question-card { background:var(--paper); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.home-screen { max-width:560px; margin:0 auto; text-align:center; }
.masthead-slot { position:relative; width:min(100%,340px); aspect-ratio:34 / 23; height:auto; min-height:0; overflow:hidden; margin:0 auto 14px; }
.masthead-image { position:absolute; display:block; width:105%; max-width:none; height:auto; left:50%; top:-8.7%; transform:translateX(-50%); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.form-panel { padding:14px; text-align:left; }
.home-screen .form-panel { padding:0; border:0; box-shadow:none; background:transparent; }
.participant-list { display:grid; gap:10px; }
.name-field { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:12px; min-height:70px; padding:10px 14px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.name-avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:15px; color:var(--blue); background:#e6f0ff; font-size:19px; font-weight:900; }.name-avatar svg { display:block; width:42px; height:42px; }
.name-field input { min-height:46px; width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:18px; }
.name-field input::placeholder { color:#9aa4b5; }
.name-field input:focus { box-shadow:0 3px 0 var(--blue); }
.inline-actions { display:grid; gap:8px; margin:10px 0 14px; }
.primary-button,.secondary-button,.text-button,.back-link,.quiet-button { min-height:46px; border-radius:14px; padding:0 18px; border:0; font-weight:900; }
.primary-button { width:100%; color:#fff; background:var(--blue); box-shadow:0 10px 20px rgba(23,105,232,.18); }
.text-button,.back-link,.quiet-button { padding:0; color:var(--blue); background:none; }
.add-person { width:100%; min-height:54px; border:1.5px dashed var(--blue); border-radius:17px; }
.text-button.muted { color:var(--muted); font-weight:700; }
.limit-note,.form-error { color:var(--muted); font-size:13px; }
.form-error { min-height:18px; color:#b42318; }
.form-error:empty { display:none; }
.home-illustration { display:block; width:calc(100% + 44px); max-width:none; height:230px; margin:8px -22px 0; object-fit:cover; object-position:center top; }
.screen-brand { display:flex; align-items:center; gap:10px; max-width:620px; min-height:44px; margin:0 auto 12px; font-size:20px; }
.screen-brand .back-link { min-width:44px; font-size:26px; }
.theme-screen { max-width:620px; margin:0 auto; }
.theme-screen .intro { padding:3px 0 14px; }
.theme-screen .intro h1 { font-size:clamp(30px,8vw,48px); }
.deck-list { display:grid; gap:8px; }
.deck-option { display:flex; align-items:center; gap:10px; min-height:58px; padding:9px 12px; border:1px solid var(--line); border-radius:16px; background:#fff; cursor:pointer; }
.deck-option.is-selected { border-color:var(--blue); box-shadow:0 0 0 3px rgba(23,105,232,.12); }
.deck-option input { width:20px; height:20px; flex:0 0 auto; accent-color:var(--blue); }
.topic-icon { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:13px; color:var(--ink); background:#e9f0ff; }
.topic-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.topic-date { background:#ffe3e5; color:#df4059; }.topic-intimacy { background:#f0e0ff; color:#7136c5; }.topic-friends { background:#dff4df; color:#237c53; }.topic-founders { background:#fff0c7; color:#a56b00; }.topic-team { background:#e2efff; color:#2769ba; }.topic-parent-50plus { background:#e8e4ff; color:#5340a6; }.topic-parent-under12 { background:#e9f7d8; color:#4c7a22; }
.deck-option-copy { display:grid; min-width:0; flex:1; gap:2px; }.deck-option-copy strong,.deck-option-copy small { overflow-wrap:anywhere; }.deck-option-copy small { color:var(--muted); font-size:13px; line-height:1.3; }.deck-count { color:var(--muted); white-space:nowrap; font-size:13px; }
.selected-start { margin-top:14px; }.consent { display:flex; gap:8px; align-items:flex-start; margin-top:12px; color:var(--muted); font-size:14px; line-height:1.4; }.consent input { width:18px; height:18px; accent-color:var(--blue); flex:0 0 auto; }
.play-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }.play-deck { margin:0 0 2px; color:var(--blue); font-weight:900; }.progress-copy { margin:0; color:var(--muted); font-size:13px; }.progress-copy span { color:var(--blue); }.round-progress { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; margin:12px 0 10px; }.round-segment { height:7px; border-radius:99px; background:#dfe8f6; }.round-segment.is-done { background:var(--blue); }.round-segment.is-current { background:var(--coral); }
.question-card { position:relative; min-height:240px; padding:clamp(24px,5vw,52px); overflow:hidden; display:flex; align-items:center; }.question-card::after,.question-card::before { content:""; position:absolute; background:var(--coral); transform:rotate(45deg); }.question-card::after { width:90px; height:90px; right:-38px; top:-38px; opacity:.8; }.question-card::before { width:54px; height:54px; left:-28px; bottom:-28px; opacity:.22; }.question-card p { position:relative; z-index:1; margin:0; font-size:clamp(25px,5vw,46px); line-height:1.35; letter-spacing:-.04em; font-weight:700; overflow-wrap:anywhere; }
.speaker-pill { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:12px 16px; border-radius:17px; color:var(--ink); background:#dceaff; }.speaker-pill strong { font-size:20px; overflow-wrap:anywhere; }.speaker-pill span { flex:0 0 auto; color:var(--ink); font-size:14px; font-weight:800; }.participant-strip { display:flex; gap:6px; overflow-x:auto; padding:8px 0 3px; }.participant-chip { flex:0 0 auto; max-width:24ch; padding:4px 9px; border-radius:99px; background:#eef3fb; overflow-wrap:anywhere; }.participant-chip.is-current { color:var(--ink); background:#dceaff; font-weight:900; }.participant-chip i { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:5px; border-radius:50%; color:var(--blue); background:#fff; font-style:normal; font-size:12px; vertical-align:middle; }
.answer-actions { display:grid; grid-template-columns:1fr 1.35fr 1fr; gap:8px; align-items:stretch; margin-top:10px; }.answer-actions button { min-height:48px; }.like-button { grid-column:2; color:var(--ink); border:0; border-radius:15px; background:var(--coral); font-weight:900; padding:8px 12px; overflow-wrap:anywhere; }.like-button strong { margin-left:8px; padding-left:8px; border-left:1px solid rgba(20,33,61,.28); }.secondary-button,.pass-button { color:var(--ink); border:1px solid var(--line); background:#fff; }.pass-button { border-radius:14px; font-weight:900; }.answer-actions .primary-button { grid-column:3; width:auto; }
.card-back { position:relative; min-height:clamp(390px,68dvh,620px); display:grid; place-items:center; align-content:center; gap:14px; border-radius:28px; color:#fff; background:var(--blue); box-shadow:0 22px 56px rgba(23,105,232,.24); text-align:center; cursor:pointer; }.card-back .round-badge { position:absolute; top:20px; left:20px; color:var(--ink); background:var(--lime); }.back-brand { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:clamp(30px,8vw,46px); letter-spacing:-.05em; }.back-brand-mark { display:grid; place-items:center; width:66px; height:66px; border-radius:20px; color:#fff; background:rgba(255,255,255,.16); }.back-brand-mark svg { width:54px; height:54px; }.card-back h1 { color:#fff; font-size:clamp(28px,7vw,42px); }.card-back p { margin:0; color:#dfe8ff; }.round-break { max-width:620px; padding:clamp(28px,8dvh,80px) 0; }.round-badge { display:inline-flex; padding:8px 12px; border-radius:99px; background:var(--lime); font-size:13px; font-weight:900; }.round-break h1 { margin-top:20px; }.break-actions { display:flex; gap:10px; margin-top:24px; }.break-actions .primary-button,.break-actions .secondary-button { width:auto; }
button:focus-visible,input:focus-visible,.card-back:focus-visible,.deck-option:has(input:focus-visible) { outline:3px solid var(--lime); outline-offset:3px; }
[data-focus]:focus { outline:none; }
@media (max-width:680px) { .content { padding:8px 16px max(30px,env(safe-area-inset-bottom)); }.topbar { padding-left:16px; padding-right:16px; }.quiet { display:none; }.masthead-slot { aspect-ratio:34 / 23; }.masthead-image { width:105%; max-width:none; }.home-illustration { width:calc(100% + 64px); margin-left:-32px; margin-right:-32px; }.theme-screen .intro { padding-top:0; }.deck-option { min-height:56px; }.question-card { min-height:245px; padding:24px; }.question-card p { font-size:clamp(25px,7vw,34px); }.answer-actions { grid-template-columns:1fr 1fr; }.like-button { grid-column:1 / -1; grid-row:1; }.answer-actions .secondary-button { grid-column:1; grid-row:2; }.answer-actions .primary-button { grid-column:2; grid-row:2; }.pass-button { grid-column:1 / -1; grid-row:3; }.card-back { min-height:clamp(390px,64dvh,540px); } }
@media (max-width:680px) and (max-height:700px) { .masthead-slot { width:min(100%,290px); aspect-ratio:34 / 23; }.masthead-image { width:105%; max-width:none; top:-8.7%; }.home-illustration { margin-top:2px; }.question-card { min-height:210px; }.question-card p { font-size:clamp(23px,6vw,30px); }.answer-actions button { min-height:44px; } }
@media (orientation:landscape) and (max-height:560px) { .topbar { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }.content { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }.app-shell[data-screen="play"] .content { display:grid; grid-template-columns:minmax(0,1fr) 220px; grid-template-rows:auto auto 1fr; gap:8px 16px; }.app-shell[data-screen="play"] .play-head,.app-shell[data-screen="play"] .round-progress { grid-column:1 / -1; }.app-shell[data-screen="play"] .participant-strip { display:none; }.app-shell[data-screen="play"] .card-back,.app-shell[data-screen="play"] .round-break { grid-column:1 / -1; }.app-shell[data-screen="play"] .question-card { min-height:205px; grid-column:1; grid-row:3; }.app-shell[data-screen="play"] .speaker-pill { grid-column:1; grid-row:4; }.app-shell[data-screen="play"] .round-break { padding:20px 0; }.app-shell[data-screen="play"] .answer-actions { grid-column:2; grid-row:3 / span 2; display:flex; flex-direction:column; margin:0; }.app-shell[data-screen="play"] .answer-actions .like-button { order:0; }.app-shell[data-screen="play"] .answer-actions button { width:100%; }.home-illustration { max-height:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }