:root {
  color-scheme: light;
  --paper: #fcfaff; --paper-strong: #fff; --paper-subtle: #f5effc;
  --ink: #2b213d; --dim: #6e637c; --faint: #786d86;
  --line: #e7ddef; --gold: #8050bd; --gold-deep: #633699;
  --gold-fill: #8050bd; --gold-wash: #f3ecfc;
  --sans: 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif; --serif: 'Noto Serif SC', 'Songti SC', serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font: 16px/1.8 var(--sans); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
a { color: inherit; }
:is(button,a,input,[tabindex]):focus-visible { outline: 3px solid #9b70d0; outline-offset: 4px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 10000; padding: 10px 18px; background: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-nav-bar > .personal-center-link { flex: 0 0 auto; width: auto; margin-left: auto; }
.play-main { width: min(1200px, calc(100% - 80px)); margin: 0 auto; padding: 24px 0 28px; }
.play-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 12px; color: var(--gold-deep); font-size: 12px; font-weight: 600; letter-spacing: .14em; }
h1,h2,h3,p { overflow-wrap: anywhere; }
.play-heading h1 { margin: 0; font: 600 clamp(27px, 3vw, 38px)/1.5 var(--serif); letter-spacing: .04em; }
.play-heading div > p:last-child { margin: 9px 0 0; color: var(--dim); font-size: 14px; }
.collection-link { flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font-size: 14px; }
.collection-link span,.collection h2 span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--gold-deep); background: #ece3f6; font: 12px var(--sans); }
.collection-link i { font-style: normal; color: var(--gold); }
.game-tabs { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-bottom: 24px; }
.game-tabs button { display: grid; justify-items: start; gap: 4px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-align: left; transition: background .18s, border-color .18s, transform .18s; }
.game-tabs button > span { margin-bottom: 3px; color: var(--gold); font: 600 24px/1.3 var(--serif); }
.game-tabs b { font-size: 14px; font-weight: 500; }
.game-tabs small { color: var(--dim); font-size: 12px; }
.game-tabs button:hover { border-color: #b392d2; transform: translateY(-2px); }
.game-tabs button[aria-selected='true'] { background: #eee5f9; border-color: #b18ad3; box-shadow: inset 0 0 0 1px #b18ad344; }
.game-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,70px); align-items: start; padding: 32px 38px; min-height: 460px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.game-intro h2 { margin: 12px 0 15px; font: 600 clamp(24px,2.7vw,30px)/1.5 var(--serif); letter-spacing: .03em; }
.game-intro > p:not(.eyebrow):not(.helper):not(.challenge-progress) { max-width: 380px; color: var(--dim); margin: 0 0 22px; }
.game-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.game-facts span { padding: 3px 10px; background: #f6f1fb; color: #74518c; border-radius: 6px; font-size: 12px; }
.primary-button,.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 11px 22px; border: 1px solid transparent; border-radius: 11px; font-size: 14px; font-weight: 500; line-height: 1.6; }
.primary-button { color: #fff; background: #8050bd; box-shadow: 0 5px 15px #68379d17; }
.primary-button:hover:not(:disabled) { background: #6c3ea5; }
.secondary-button { background: #fff; color: var(--gold-deep); border-color: #cbb4df; }
.secondary-button:hover,.secondary-button[aria-pressed='true'] { background: #eee5f9; border-color: #9466bd; }
.helper { color: var(--faint); font-size: 12px; line-height: 1.9; margin: 16px 0 0; max-width: 380px; }
.inspiration-card { position: relative; align-self: stretch; min-height: 415px; display: flex; flex-direction: column; padding: 24px 30px 19px; border: 1px solid #9976bb; border-radius: 14px; color: #fff9ff; background: #553676; background-image: radial-gradient(ellipse at 100% 0%, #9773b455, transparent 65%); box-shadow: 0 16px 36px #4d2c7617; }
.card-top,.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #e0cfee; font-size: 12px; letter-spacing: .06em; }
.card-top { padding-bottom: 15px; border-bottom: 1px solid #ffffff29; }
.card-bottom { margin-top: auto; padding-top: 18px; }
.card-bottom > span:last-child { font-size: 22px; line-height: 1; }
.sealed-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 0; text-align: center; }
.seal-mark { display: grid; place-items: center; width: 70px; height: 90px; border: 1px solid #e0c1ea8a; border-radius: 40px; color: #ecd6f8; font: 32px var(--serif); box-shadow: 0 0 0 7px #ffffff05; }
.sealed-card h3 { margin: 25px 0 10px; font: 500 23px/1.7 var(--serif); }
.sealed-card p { margin: 0; color: #dfcdec; font-size: 13px; }
.card-result { padding-top: 24px; }
.card-number { margin: 0 0 9px; color: #e0cfee; font-size: 12px; letter-spacing: .12em; }
.card-result h3 { margin: 0 0 16px; font: 600 27px/1.6 var(--serif); }
.card-body { margin: 0; color: #f0e3f9; font-size: 15px; line-height: 1.9; }
.card-action { margin: 23px 0 18px; padding: 14px 17px; border-left: 2px solid #d1aeea; background: #ffffff09; }
.card-action b { color: #e9d1f6; font-size: 12px; font-weight: 500; }
.card-action p { margin: 6px 0 0; font-size: 14px; line-height: 1.85; }
.save-button { min-height: 44px; padding: 8px 0; border: 0; color: #f5e5ff; background: transparent; font-size: 13px; }
.save-button:focus-visible { outline-color: #e6c9ff; }
.answer-card { border-color: #c4b295; color: #4b3c2a; background: #f6f0e4; background-image: linear-gradient(90deg,#c7b79622,transparent 7%,transparent 95%,#c7b79622); }
.answer-card .card-top,.answer-card .card-bottom,.answer-card .card-number,.answer-card .sealed-card p { color: #79664e; border-color: #cfbda659; }
.answer-card .seal-mark { color: #8c704a; border-color: #ab946e; }
.answer-card .card-body,.answer-card .save-button,.answer-card .card-action b { color: #6d573c; }
.answer-card .card-action { border-color: #b89b6e; background: #b09a7512; }
.relation-card { color: #41475f; border-color: #c7cbdc; background: #eef0f9; }
.relation-card .card-top,.relation-card .card-bottom,.relation-card .card-number,.relation-card .sealed-card p { color: #5d6586; border-color: #bbc3db77; }
.relation-card .seal-mark { color: #707ba4; border-color: #a3aed1; }
.relation-card .card-body,.relation-card .save-button,.relation-card .card-action b { color: #586182; }
.relation-card .card-action { border-color: #9ba5c9; background: #bbc2dd1c; }
.relation-card .card-result h3 { font-size: 25px; }
.relationship-modes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 26px 0; border: 0; }
.relationship-modes legend { margin-bottom: 10px; color: var(--dim); font-size: 13px; }
.relationship-modes label { position: relative; cursor: pointer; }
.relationship-modes input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.relationship-modes span { display: block; min-height: 44px; padding: 8px 21px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
.relationship-modes input:checked + span { background: #eee5f9; border-color: #b18ad3; color: var(--gold-deep); }
.relationship-modes input:focus-visible + span { outline: 3px solid #9b70d0; outline-offset: 3px; }
.element-row { display: flex; gap: 12px; margin: 26px 0; }
.element-row span { display: grid; place-items: center; height: 42px; width: 42px; border-radius: 50%; font: 20px var(--serif); background: #edf2ec; color: #55785a; }
.element-row span:nth-child(2) { background: #faebed; color: #b26e7b; }.element-row span:nth-child(3) { background: #f4eddd; color: #947d47; }.element-row span:nth-child(4) { background: #eeeef3; color: #777389; }.element-row span:nth-child(5) { background: #eaf0fa; color: #5f7caf; }
.quiz-workspace { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: #fcfaff; }
.quiz-progress { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 20px; font-size: 12px; color: var(--gold-deep); }
progress { width: 46%; height: 5px; border: 0; border-radius: 9px; background: #e7ddef; accent-color: #9c73c9; }
progress::-webkit-progress-bar { border-radius: 9px; background: #e7ddef; }progress::-webkit-progress-value { border-radius: 9px; background: #9c73c9; }
.quiz-question { border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz-question legend { font: 600 20px/1.65 var(--serif); margin-bottom: 16px; }
#quizOptions { display: grid; gap: 9px; }
.quiz-option { display: flex; align-items: center; gap: 12px; padding: 10px 13px; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; }
.quiz-option:has(input:checked) { background: #f1e9fa; border-color: #ae87d4; }
.quiz-option input { margin: 0; flex: 0 0 16px; accent-color: var(--gold); width: 16px; height: 16px; }
.quiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.text-button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--gold-deep); font-size: 13px; }
.quiz-result h3 { font: 600 27px/1.6 var(--serif); margin: 0 0 14px; }
.quiz-summary,#quizAdvice { color: var(--dim); font-size: 14px; line-height: 1.9; }
.quiz-bars { display: grid; gap: 12px; margin: 24px 0; }
.quiz-bar { display: grid; grid-template-columns: 28px 1fr 42px; align-items: center; gap: 14px; font-size: 13px; }
.quiz-bar-track { height: 8px; border-radius: 8px; background: #eae4f1; overflow: hidden; }
.quiz-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--bar-color,#9c73c9); }
.quiz-bar > span:last-child { text-align: right; color: var(--dim); }
#coinForm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#coinForm label { display: grid; gap: 7px; font-size: 12px; color: var(--dim); }
#coinForm input { width: 100%; min-width: 0; min-height: 47px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fcfaff; color: var(--ink); font-size: 14px; }
#coinForm .primary-button { justify-self: start; grid-column: 1 / -1; margin-top: 10px; }
.form-error { grid-column: 1 / -1; margin: 0; color: #a64565; font-size: 13px; }
.coin-workspace { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; border-radius: 16px; background: #f5f0fb; text-align: center; }
.coin-visual { width: 132px; height: 132px; display: grid; place-items: center; margin: 4px 0 28px; border: 1px solid #b29ace; border-radius: 50%; outline: 1px solid #cbb8df; outline-offset: -9px; background: linear-gradient(130deg,#f9f2ff,#d9c5ee); box-shadow: 0 12px 25px #75479c1a; color: #714a99; font: 600 47px var(--serif); }
.coin-workspace h3 { font: 600 24px/1.6 var(--serif); margin: 0 0 13px; }
.coin-workspace > p:not(.eyebrow) { margin: 0; max-width: 320px; font-size: 14px; color: var(--dim); }
.coin-reactions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.coin-reactions .secondary-button { padding: 9px 14px; }
.coin-workspace .coin-reaction-text { padding-top: 18px; }
.challenge-steps { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 14px; }
.challenge-steps span { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 50%; background: #fcfaff; color: var(--faint); font-size: 13px; }
.challenge-steps span[data-done='true'] { background: #8050bd; border-color: #8050bd; color: #fff; }
.challenge-steps span[aria-current='step'] { border-color: #9b70c7; background: #f1e9fa; color: var(--gold-deep); }
.challenge-progress { font-size: 14px; color: var(--gold-deep); }
.challenge-workspace { align-self: stretch; padding: 32px; border: 1px solid #d1dfd4; border-radius: 14px; background: #f2f6f2; }
.challenge-workspace .eyebrow { color: #56735e; }
.challenge-workspace h3 { font: 600 27px/1.6 var(--serif); margin: 20px 0; }
#challengeBody { color: #607565; font-size: 15px; }
.challenge-task { border-top: 1px solid #d1dfd4; padding-top: 20px; margin: 26px 0; }
.challenge-task b { color: #56735e; font-size: 12px; font-weight: 500; }
.challenge-task p { margin: 8px 0 0; color: #425e4b; font-size: 15px; }
.challenge-workspace .primary-button { background: #577b62; }
.collection { scroll-margin-top: 95px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.collection > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.collection .eyebrow { margin-bottom: 5px; font-size: 12px; }
.collection h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 22px/1.6 var(--serif); }
.collection > header > span { color: var(--dim); font-size: 12px; }
.collection-empty { margin: 20px 0 0; padding: 24px; border: 1px dashed #d9cbe7; border-radius: 12px; color: var(--dim); font-size: 14px; }
.collection-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 20px; }
.saved-card { padding: 21px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.saved-card > header { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--dim); }
.saved-card h3 { margin: 15px 0 10px; font: 600 19px/1.7 var(--serif); }
.saved-card p { color: var(--dim); font-size: 13px; line-height: 1.9; }
.saved-card > p:last-of-type { padding-top: 12px; border-top: 1px solid var(--line); }
.saved-card .text-button { font-size: 12px; min-height: 44px; }
.play-status { position: fixed; z-index: 1000; bottom: calc(85px + env(safe-area-inset-bottom,0px)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); margin: 0; padding: 10px 20px; border: 1px solid #9773b4; border-radius: 12px; background: #493062; color: #fff; box-shadow: 0 8px 20px #34204422; font-size: 13px; pointer-events: none; }
.play-status:empty { display: none; }
.play-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 32px; font-size: 12px; color: var(--dim); }
.play-footer a { text-decoration: none; }
.is-drawing { animation: card-reveal .48s ease; }
.is-flipping { animation: coin-flip .6s ease; }
@keyframes card-reveal { 0% { opacity: .6; transform: translateY(7px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes coin-flip { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(540deg) translateY(-22px); } 100% { transform: rotateY(1080deg) translateY(0); } }
@media (max-width: 1050px) {
  .play-main { width: calc(100% - 48px); }.game-panel { gap: 28px; padding: 32px; }.game-tabs button { padding: 15px 12px; }.game-tabs small { font-size: 11px; }
}
@media (max-width: 760px) {
  .play-main { width: calc(100% - 32px); padding-top: 24px; }.play-heading { align-items: flex-start; gap: 12px; margin-bottom: 22px; }.play-heading h1 { font-size: 26px; }.play-heading .eyebrow { font-size: 11px; }.collection-link { gap: 6px; font-size: 12px; }.collection-link i { display: none; }
  .game-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 18px; }.game-tabs button { grid-template-columns: 25px 1fr; align-items: center; gap: 3px 6px; padding: 12px 10px; }.game-tabs button > span { grid-row: 1 / 3; font-size: 21px; margin-bottom: 0; }.game-tabs b { font-size: 13px; }.game-tabs small { font-size: 10px; }
  .game-panel { grid-template-columns: 1fr; gap: 26px; padding: 27px 22px; border-radius: 16px; }.game-intro h2 { font-size: 27px; line-height: 1.5; margin: 10px 0 14px; }.game-intro h2 br { display: none; }.game-intro > p:not(.eyebrow):not(.helper):not(.challenge-progress) { max-width: none; font-size: 15px; margin-bottom: 17px; }.game-facts { margin: 18px 0; }.game-intro .helper { max-width: none; }.inspiration-card { min-height: 365px; padding: 23px; }.collection-list { grid-template-columns: repeat(2,minmax(0,1fr)); }.collection > header { align-items: flex-end; }.collection > header > span { max-width: 110px; text-align: right; }.quiz-workspace { padding: 22px; }.quiz-panel .element-row { margin: 18px 0; }.quiz-panel .game-intro .helper { font-size: 11px; }
  .coin-workspace { min-height: 380px; }.challenge-workspace { padding: 25px; }.challenge-steps { margin-top: 20px; }.play-heading div > p:last-child { font-size: 12px; }
}
@media (max-width: 420px) {
  .play-heading { flex-wrap: wrap; gap: 10px; }.collection-link { min-height: 36px; }.game-tabs button { grid-template-columns: 20px 1fr; padding: 10px 8px; gap: 4px; }.game-tabs small { display: none; }.game-tabs button > span { grid-row: auto; }.game-tabs b { font-size: 12px; }.game-panel { padding: 23px 17px; }.game-intro h2 { font-size: 24px; }.card-result h3 { font-size: 25px; }.collection-list { grid-template-columns: 1fr; }.quiz-workspace { padding: 17px; }.quiz-question legend { font-size: 19px; }.quiz-actions .primary-button { padding-inline: 15px; }.coin-reactions .secondary-button { font-size: 12px; }.inspiration-card { padding: 20px; }.sealed-card h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

@media (max-width: 980px) {
  .game-tabs button { --game-tone:#7550b5; --game-wash:#eae0f7; min-height:44px; background:var(--game-wash); }
  .game-tabs [data-game='answer'],.game-tabs [data-game='coin'] { --game-tone:#8e6328; --game-wash:#f7edda; }
  .game-tabs [data-game='quiz'],.game-tabs [data-game='challenge'] { --game-tone:#267363; --game-wash:#e3f2ec; }
  .game-tabs [data-game='relation'] { --game-tone:#a34870; --game-wash:#f8e5ee; }
  .game-tabs button > span { color:var(--game-tone); }
  .game-tabs button[aria-selected='true'] { background:var(--orchid); color:#fff; border-color:var(--orchid); box-shadow:0 3px 9px #59358f26; }
  .game-tabs button[aria-selected='true'] > :is(span,small) { color:#fff; }
  .play-main .primary-button { background:var(--orchid); }
}