:root {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #14130f;
  background: #f6f2e8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.screen { position: fixed; inset: 0; min-height: 100dvh; overflow: hidden; }

.attractor {
  position: fixed; inset: 0; overflow: hidden; cursor: pointer;
  background: #ff3159;
}
.burst { position: absolute; inset: -40vmax; opacity: .24; background: repeating-conic-gradient(from 10deg, #fff 0 8deg, transparent 8deg 17deg); animation: spin 38s linear infinite; }
.slogan-stage { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; transition: background .2s; }
.slogan-stage::after { content: ""; position: absolute; inset: 4vh 0; border-block: clamp(5px, .7vw, 12px) solid #15130d; pointer-events: none; }
.slogan-1 { color: #15130d; background: #fff200; }
.slogan-2 { color: #fff; background: #2248ff; }
.slogan-stage strong {
  position: relative; z-index: 1; flex: none; white-space: nowrap;
  font-size: 65vh; line-height: .92; font-weight: 1000; letter-spacing: -.09em;
  -webkit-text-stroke: .018em #15130d;
  paint-order: stroke fill;
  text-shadow: .035em .035em 0 #15130d;
  animation: single-slogan 7.5s linear both;
}
.wake-hint { position: absolute; z-index: 4; left: 50%; bottom: max(3vh, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: .8rem 1.3rem; white-space: nowrap; color: #fff; background: #15130d; border-radius: 999px; font-size: clamp(15px, 1.5vw, 24px); font-weight: 800; box-shadow: 6px 6px 0 rgba(255,255,255,.5); }
.pulse-dot { display: inline-block; width: .7em; height: .7em; margin-right: .4em; border-radius: 50%; background: #82f000; animation: pulse 1s infinite; }

.menu-screen { padding: clamp(22px, 3vw, 48px); background: #ffe633; }
.menu-screen::after { content: ""; position: absolute; right: -10vw; top: -26vw; width: 60vw; aspect-ratio: 1; border: 9vw solid rgba(255,255,255,.25); border-radius: 50%; }
.menu-header, .topbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; }
.brand-tag { padding: .65rem 1rem; color: #fff; background: #15130d; border-radius: 999px; font-weight: 900; letter-spacing: .06em; }
.quiet-button { min-width: 96px; padding: .7rem 1rem; color: #fff; background: rgba(20,19,15,.82); border-radius: 999px; font-weight: 850; transition: transform .15s; }
.quiet-button:hover { transform: translateY(-2px); }
.quiet-button.dark { color: #15130d; background: rgba(255,255,255,.75); border: 2px solid #15130d; }
.menu-copy { position: relative; z-index: 2; margin: clamp(3vh, 5vh, 60px) 0 2.5vh; }
.menu-copy p { margin: 0 0 .2em; font-size: clamp(17px, 2vw, 30px); font-weight: 900; }
.menu-copy h1 { margin: 0; max-width: 900px; font-size: clamp(58px, 8.5vw, 150px); line-height: .83; letter-spacing: -.075em; font-weight: 1000; }
.menu-copy em { color: #ff3159; font-style: normal; text-shadow: .055em .055em 0 #15130d; }
.game-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 28px); max-width: 1500px; }
.game-card { position: relative; display: flex; flex-direction: column; min-height: clamp(220px, 35vh, 390px); padding: clamp(24px, 3vw, 50px); text-align: left; border: clamp(4px, .45vw, 8px) solid #15130d; border-radius: clamp(24px, 3vw, 46px); box-shadow: clamp(8px, 1vw, 16px) clamp(8px, 1vw, 16px) 0 #15130d; transition: transform .15s, box-shadow .15s; }
.game-card:hover { transform: translate(-4px,-4px); box-shadow: clamp(12px, 1.3vw, 20px) clamp(12px, 1.3vw, 20px) 0 #15130d; }
.guess-card { background: #ff6a3d; }
.icon-card { background: #35d9ee; }
.share-card { background: #ff5aa5; }
.card-number { position: absolute; right: 1.1em; top: 1em; font-weight: 1000; font-size: clamp(18px, 2vw, 32px); }
.card-icon { display: block; font-size: clamp(42px, 5vw, 84px); }
.game-card strong { display: block; margin-top: .15em; font-size: clamp(36px, 4vw, 68px); font-weight: 1000; letter-spacing: -.06em; }
.game-card small { display: block; margin-top: .5em; max-width: 28em; font-size: clamp(15px, 1.35vw, 22px); font-weight: 700; }
.game-card b { margin-top: auto; padding-top: .7em; font-size: clamp(17px, 1.5vw, 24px); }

.share-screen { color: #15130d; background: #35d9ee; }
.share-content { display: flex; flex-direction: column; height: calc(100dvh - clamp(64px, 9vh, 92px)); padding: 1.8vh 3vw 3vh; }
.share-heading { flex: none; text-align: center; }
.share-heading h1 { margin: 0; font-size: clamp(34px, 4vw, 62px); line-height: 1; letter-spacing: -.06em; }
.share-heading p { margin: .45em 0 1em; font-size: clamp(15px, 1.35vw, 21px); font-weight: 850; }
.qr-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.24fr 1fr; align-items: center; gap: clamp(16px, 2vw, 32px); width: min(1500px, 94vw); margin: 0 auto; }
.qr-card { display: grid; justify-items: center; align-content: center; padding: clamp(14px, 1.5vw, 24px); text-align: center; background: #fff; border: clamp(4px, .4vw, 7px) solid #15130d; border-radius: clamp(20px, 2.4vw, 38px); box-shadow: clamp(7px, .8vw, 13px) clamp(7px, .8vw, 13px) 0 #15130d; }
.qr-card h2 { margin: .35em 0 .5em; font-size: clamp(20px, 2vw, 30px); line-height: 1.1; }
.qr-card img { display: block; width: min(100%, 38vh); aspect-ratio: 1; object-fit: contain; image-rendering: auto; }
.qr-card p { margin: .55em 0 0; font-size: clamp(14px, 1.15vw, 18px); font-weight: 850; }
.qr-tag { padding: .4em .85em; color: #fff; background: #15130d; border-radius: 999px; font-size: clamp(13px, 1vw, 16px); font-weight: 900; }
.article-qr { background: #ffe633; transform: translateY(-.5vh); }
.article-qr img { width: min(100%, 46vh); background: #fff; border: clamp(8px, 1vw, 16px) solid #fff; }
.article-qr a { display: grid; place-items: center; }

.topbar { height: clamp(64px, 9vh, 92px); padding: 0 clamp(18px, 3vw, 46px); color: #fff; background: #15130d; }
.topbar-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: clamp(20px, 2vw, 32px); font-weight: 950; }
.topbar-right { min-width: 96px; text-align: right; }
.guess-screen { display: flex; flex-direction: column; background: #7857ff; }
.guess-status { display: flex; align-items: center; justify-content: space-between; padding: 2vh 5vw 1vh; color: #fff; }
.guess-status small { display: block; margin-bottom: -.2em; opacity: .8; font-weight: 800; }
.stopwatch { font: 950 clamp(38px, 5vw, 78px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.08em; }
.stopwatch i { color: #cfff49; font-size: .55em; font-style: normal; }
.mini-stats { display: flex; gap: 1rem; font-size: clamp(16px, 1.5vw, 24px); font-weight: 800; }
.mini-stats span { padding: .65em 1em; color: #15130d; background: #fff; border-radius: 999px; }
.mini-stats b { font-size: 1.2em; }
.word-card { flex: 1; display: grid; place-content: center; margin: 1vh 5vw; padding: 3vh 4vw; text-align: center; background: #fff4e7; border: clamp(5px, .55vw, 9px) solid #15130d; border-radius: clamp(30px, 4vw, 62px); box-shadow: 12px 12px 0 #15130d; }
.eyebrow { justify-self: center; padding: .5em 1em; background: #ffe633; border: 3px solid #15130d; border-radius: 999px; font-size: clamp(16px, 1.35vw, 22px); font-weight: 900; }
.word-card h1 { margin: .18em 0 .1em; font-size: clamp(64px, 12vw, 190px); line-height: 1; letter-spacing: -.08em; font-weight: 1000; animation: word-pop .25s both; }
.word-card p { margin: 0; color: #666055; font-weight: 700; }
.guess-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2vw; padding: 2vh 5vw 4vh; }
.guess-actions button { padding: clamp(18px, 2.3vh, 30px); border: 5px solid #15130d; border-radius: 25px; font-size: clamp(26px, 3vw, 48px); font-weight: 1000; box-shadow: 8px 8px 0 #15130d; }
.guess-actions button:active { transform: translate(5px,5px); box-shadow: 3px 3px 0 #15130d; }
.skip-button { background: #fff; }
.correct-button { background: #82f000; }
.guess-actions span { float: right; }

.icon-game { background: #f7f0ff; }
.score-live { color: #cfff49; font-size: clamp(16px, 1.5vw, 24px); font-weight: 900; }
.progress-line { height: 10px; background: #d8c9f0; }
.progress-line i { display: block; height: 100%; background: #ff3159; transition: width .35s; }
.question-copy { padding: clamp(18px, 2.3vh, 28px) 4vw 1.7vh; text-align: center; }
.question-copy span { color: #665779; font-weight: 900; }
.question-copy h1 { margin: .2em 0 0; font-size: clamp(28px, 4vw, 62px); line-height: 1.12; letter-spacing: -.05em; }
.question-copy em { color: #ff3159; font-style: normal; }
.options { display: grid; gap: clamp(12px, 1.5vw, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1vh 4vw 3vh; }
.options.count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1050px; margin-inline: auto; }
.options.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
.option-card { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: clamp(10px, 1.5vw, 22px); background: #fff; border: clamp(3px, .35vw, 6px) solid #15130d; border-radius: clamp(18px, 2vw, 32px); box-shadow: 7px 7px 0 #15130d; transition: transform .15s, background .15s; }
.option-card:not(:disabled):hover { transform: translateY(-7px) rotate(-1deg); }
.option-card:disabled { cursor: default; opacity: 1; }
.image-wrap { position: relative; display: grid; place-items: center; width: 100%; height: min(41vh, 360px); overflow: hidden; border-radius: 15px; background: #eef0f2; }
.image-wrap img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.mask-corner::after { content: ""; position: absolute; left: 0; top: 0; width: 18%; height: 17%; background: #fff; border-bottom-right-radius: 12px; }
.option-card b { margin-top: .6em; font-size: clamp(16px, 1.5vw, 24px); }
.option-card.is-correct { background: #82f000; animation: correct-pop .45s both; }
.option-card.is-wrong { color: #fff; background: #ff3159; animation: shake .4s both; }

.result-screen { color: #fff; background: #7857ff; }
.result-card { position: relative; z-index: 2; display: grid; place-items: center; width: min(760px, 88vw); margin: clamp(20px, 4vh, 46px) auto 0; padding: clamp(26px, 3.4vw, 50px); text-align: center; color: #15130d; background: #ffe633; border: 7px solid #15130d; border-radius: 45px; box-shadow: 14px 14px 0 #15130d; }
.result-kicker { padding: .5em 1em; color: #fff; background: #15130d; border-radius: 999px; font-weight: 900; }
.result-card h1 { margin: .12em 0 0; color: #ff3159; font-size: clamp(66px, 8vw, 115px); line-height: 1; letter-spacing: -.08em; text-shadow: .05em .05em 0 #15130d; }
.result-card p { margin: .8em 0; font-size: clamp(17px, 2vw, 28px); font-weight: 800; }
.score-row { display: flex; gap: 1rem; }
.score-row div { display: grid; min-width: 130px; padding: .8em 1.5em; background: #fff; border: 3px solid #15130d; border-radius: 20px; }
.score-row b { font-size: clamp(36px, 4vw, 62px); line-height: 1; }
.score-row span { font-weight: 800; }
.again-button { margin-top: 1em; padding: .75em 1.8em; color: #fff; background: #15130d; border-radius: 999px; font-size: clamp(18px, 2vw, 28px); font-weight: 950; }
.confetti { position: absolute; inset: 70px 0 0; overflow: hidden; }
.confetti i { position: absolute; top: -12%; width: 12px; height: 24px; background: #cfff49; animation: fall 3.3s linear infinite; }
.confetti i:nth-child(3n) { background: #ff3159; animation-delay: -1.1s; }
.confetti i:nth-child(3n+1) { background: #35d9ee; animation-delay: -2.2s; }

@keyframes single-slogan { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes pulse { 50% { transform: scale(1.5); box-shadow: 0 0 0 8px rgba(130,240,0,.2); } }
@keyframes word-pop { from { opacity: 0; transform: scale(.82) rotate(-2deg); } }
@keyframes correct-pop { 50% { transform: scale(1.045) rotate(1deg); } }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

@media (max-aspect-ratio: 4/5) {
  .menu-copy { margin-top: 5vh; }
  .menu-copy h1 { font-size: clamp(62px, 15vw, 120px); }
  .game-grid { grid-template-columns: 1fr; }
  .game-card { min-height: 25vh; }
  .options, .options.count-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .image-wrap { height: min(27vh, 280px); }
  .question-copy h1 { font-size: clamp(27px, 6vw, 52px); }
  .share-content { overflow-y: auto; }
  .qr-grid { flex: none; grid-template-columns: 1fr; padding-bottom: 4vh; }
  .article-qr { grid-row: 1; }
}

@media (max-height: 720px) {
  .menu-copy { margin-top: 2vh; }
  .menu-copy h1 { font-size: clamp(48px, 7vw, 90px); }
  .game-card { min-height: 32vh; }
  .game-card strong { font-size: clamp(30px, 3.5vw, 54px); }
  .image-wrap { height: 32vh; }
  .word-card h1 { font-size: clamp(56px, 10vw, 130px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}