.app{min-height:100vh;display:grid;place-items:center;padding:24px}.screen{width:min(520px,96vw);aspect-ratio:9 / 16;max-height:min(820px,calc(100vh - 48px));border-radius:32px;background:radial-gradient(140% 120% at 50% 0%,#bfe6ff,#97d6ff 36%,#6cc5ff);box-shadow:0 30px 90px #00000059,inset 0 0 0 10px #00000014;display:grid;grid-template-rows:auto 1fr auto;padding:38px 30px 26px;position:relative;overflow:hidden}.brand{text-align:center;color:#1b1aa8;text-transform:uppercase;letter-spacing:.08em;-webkit-user-select:none;user-select:none}.brandTop{font-weight:900;font-size:clamp(34px,5.5vw,56px);line-height:.92;text-shadow:0 4px 0 rgba(0,0,0,.08)}.brandSub{margin-top:12px;font-weight:900;font-size:clamp(20px,3.5vw,28px);line-height:1}.tapTarget{align-self:stretch;justify-self:center;width:min(330px,78%);border:none;background:transparent;color:#1b1aa8;display:grid;gap:18px;cursor:pointer;padding:0}.tapTarget:focus-visible{outline:4px solid rgba(27,26,168,.55);outline-offset:10px;border-radius:18px}.tapIcon{width:100%;aspect-ratio:1 / 1;background:linear-gradient(180deg,#2b2be0,#1b1aa8);border-radius:24px;display:grid;place-items:center;box-shadow:0 16px 40px #1b1aa859,inset 0 0 0 4px #ffffff2e;transition:transform .16s ease,box-shadow .16s ease}.tapIcon svg{width:52%;height:52%;color:#ffffffe6}.tapTarget:hover .tapIcon{transform:translateY(-2px);box-shadow:0 18px 48px #1b1aa86b,inset 0 0 0 4px #ffffff2e}.tapTarget:active .tapIcon{transform:translateY(1px) scale(.99)}.tapLabel{font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(16px,2.6vw,22px)}.playArea{min-height:0;display:grid;place-items:center;align-content:center;gap:12px}.hint{text-align:center;font-size:14px;color:#1b1aa8b8;-webkit-user-select:none;user-select:none}.inlineCard{position:relative;justify-self:center;width:min(560px,96vw);max-width:88%;margin-top:0;margin-bottom:0;height:min(430px,100%);border-radius:18px;background:linear-gradient(180deg,#fffffff5,#f5f8fff5);box-shadow:0 28px 80px #00000073;color:#0d1230;overflow:hidden;opacity:0;transform:translateY(8px) scale(.985);transition:opacity .18s ease,transform .18s ease;display:flex;flex-direction:column}.inlineCard.isVisible{opacity:1;transform:translateY(0) scale(1)}.cardInner{transition:opacity .18s ease,transform .18s ease;display:flex;flex-direction:column;min-height:0}.cardInner.isFaded{opacity:0;transform:translateY(10px) scale(.99)}.deckAnimation{position:absolute;top:0;right:0;bottom:0;left:0;display:block;pointer-events:none;opacity:0;z-index:3;transition:opacity .12s ease}.deckAnimation.isFlipping{opacity:1}.deckAnimation:not(.isFlipping) .deckGhost{animation:none}.deckGhost{position:absolute;left:50%;top:50%;width:min(440px,88%);aspect-ratio:9 / 12;transform-style:preserve-3d;border-radius:16px;background:linear-gradient(180deg,#2b2be0,#1b1aa8);box-shadow:0 24px 70px #1b1aa873,inset 0 0 0 4px #ffffff2e;backface-visibility:hidden;opacity:.9;animation:deckGhostFlip .7s ease forwards}.deckGhost.ghost0{transform:translate(-50%,-50%) rotateY(0) translateZ(0);animation-delay:0ms}.deckGhost.ghost1{transform:translate(-50%,-50%) rotateY(0) translateZ(0);animation-delay:80ms;opacity:.78}.deckGhost.ghost2{transform:translate(-50%,-50%) rotateY(0) translateZ(0);animation-delay:.16s;opacity:.66}@keyframes deckGhostFlip{0%{transform:translate(-50%,-50%) rotateY(0) translateY(0) scale(1)}45%{transform:translate(-50%,-50%) rotateY(85deg) translateY(-6px) scale(1.01)}to{transform:translate(-50%,-50%) rotateY(180deg) translateY(-26px) scale(.985);opacity:0}}.timer{margin-top:-2px;margin-bottom:12px;border-radius:14px;background:#1b1aa814;border:1px solid rgba(27,26,168,.22);padding:10px 12px;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}.timerLabel{font-weight:900;font-size:12px;text-transform:uppercase;color:#0d1230b3}.timerValue{font-weight:1000;letter-spacing:-.02em;font-size:clamp(34px,7vw,44px);line-height:1;color:#1b1aa8}.timer.isTimeUp{background:#c4000014;border-color:#c4000040}.timer.isTimeUp .timerValue{color:#c40000}.cardHeader{display:grid;grid-template-columns:1fr auto;align-items:start;gap:12px;padding:18px 18px 0}.cardTitle{display:grid;gap:6px;font-weight:900;letter-spacing:.02em;font-size:18px}.cardIndex{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#0d123099}.iconButton{width:40px;height:40px;border:none;background:#0d12300f;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:#0d1230d9}.iconButton:hover{background:#0d12301a}.iconButton:focus-visible{outline:3px solid rgba(27,26,168,.45);outline-offset:2px}.iconButton svg{width:22px;height:22px}.cardBody{padding:10px 18px 0;flex:1 1 auto;min-height:0;overflow:hidden}.cardPrompt{margin:0;font-size:clamp(21px,4.2vw,26px);line-height:1.3;font-weight:900;letter-spacing:.01em;color:#10185a;background:linear-gradient(180deg,#6cc5ff29,#6cc5ff0f);border:2px solid rgba(27,26,168,.2);border-left:6px solid rgba(27,26,168,.7);border-radius:14px;padding:12px 14px;overflow-wrap:break-word}.cardPrompt.isMedium{font-size:clamp(19px,3.7vw,23px);line-height:1.28}.cardPrompt.isLong{font-size:clamp(17px,3.2vw,20px);line-height:1.26}.cardPrompt.isXLong{font-size:clamp(15px,2.8vw,18px);line-height:1.23}.answerText{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#2b2be014;border:1px solid rgba(43,43,224,.2);font-size:14px;line-height:1.35}.cardActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px 18px;flex-shrink:0}.cardActions button{border:none;border-radius:12px;min-height:58px;padding:16px 18px;font-weight:800;font-size:18px;letter-spacing:.02em;cursor:pointer;width:100%;touch-action:manipulation}.cardActions .primary{background:linear-gradient(180deg,#2b2be0,#1b1aa8);color:#fffffff5}.cardActions .secondary{background:#0d123014;color:#0d1230e6}.inlineCard .cardActions{grid-template-columns:1fr}.cardActions button:hover{filter:brightness(1.03)}@media (prefers-reduced-motion: reduce){.tapIcon,.overlay,.cardModal,.deckAnimation,.deckGhost{transition:none!important}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#0d1230;background-color:#0b0f23;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-height:100vh;background:radial-gradient(1100px 700px at 30% 0%,#6cc5ff40,#0000 55%),radial-gradient(900px 600px at 80% 20%,#2b2be033,#0000 55%),#0b0f23;min-width:320px}h1{font-size:3.2em;line-height:1.1}button{font-family:inherit}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#root{min-height:100vh}
