Spaces:
Running
Running
| * { | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --bg: #f6f4ef; | |
| --surface: #ffffff; | |
| --ink: #202020; | |
| --muted: #6b6b6b; | |
| --line: #dfddd7; | |
| --red: #d5554f; | |
| --red-soft: #fff0ee; | |
| --green: #26765e; | |
| --green-soft: #eaf6f1; | |
| --yellow: #f0c86c; | |
| --yellow-soft: #fff8e6; | |
| --blue: #4169a1; | |
| --shadow: 0 18px 45px rgba(0, 0, 0, 0.08); | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| background: | |
| radial-gradient(circle at top left, #fff9e9, transparent 35%), | |
| var(--bg); | |
| color: var(--ink); | |
| font-family: | |
| Inter, | |
| ui-sans-serif, | |
| system-ui, | |
| -apple-system, | |
| BlinkMacSystemFont, | |
| "Segoe UI", | |
| sans-serif; | |
| } | |
| .game-shell { | |
| width: min(960px, 92%); | |
| margin: 0 auto; | |
| padding: 56px 0 34px; | |
| } | |
| /* ---------- Header ---------- */ | |
| .hero { | |
| text-align: center; | |
| margin-bottom: 34px; | |
| } | |
| .eyebrow { | |
| display: inline-block; | |
| margin-bottom: 12px; | |
| padding: 7px 13px; | |
| border: 1px solid #d7d2c9; | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.7); | |
| color: #6c655a; | |
| font-size: 0.78rem; | |
| font-weight: 750; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .hero h1 { | |
| margin: 0; | |
| font-size: clamp(2.35rem, 6vw, 4.3rem); | |
| letter-spacing: -0.05em; | |
| } | |
| .subtitle { | |
| max-width: 560px; | |
| margin: 16px auto 0; | |
| color: var(--muted); | |
| font-size: 1.08rem; | |
| line-height: 1.65; | |
| } | |
| /* ---------- Progress ---------- */ | |
| .progress-wrap { | |
| margin-bottom: 16px; | |
| } | |
| .progress-label { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| color: var(--muted); | |
| font-size: 0.82rem; | |
| font-weight: 650; | |
| } | |
| .progress-bar { | |
| height: 7px; | |
| overflow: hidden; | |
| border-radius: 999px; | |
| background: #dfddd8; | |
| } | |
| .progress-fill { | |
| width: 25%; | |
| height: 100%; | |
| border-radius: inherit; | |
| background: var(--ink); | |
| transition: width 0.35s ease; | |
| } | |
| /* ---------- Card ---------- */ | |
| .card { | |
| background: rgba(255,255,255,0.92); | |
| border: 1px solid rgba(210, 205, 196, 0.85); | |
| border-radius: 26px; | |
| box-shadow: var(--shadow); | |
| } | |
| .game-card { | |
| padding: clamp(26px, 5vw, 52px); | |
| } | |
| .stage { | |
| display: none; | |
| animation: fadeIn 0.35s ease; | |
| } | |
| .stage.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ---------- Scenario ---------- */ | |
| .scenario-top { | |
| display: flex; | |
| gap: 25px; | |
| align-items: center; | |
| margin-bottom: 32px; | |
| } | |
| .scenario-top h2 { | |
| margin: 0 0 7px; | |
| font-size: 1.8rem; | |
| } | |
| .scenario-top p, | |
| .food-panel p { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| .price-badge { | |
| flex: 0 0 112px; | |
| min-height: 112px; | |
| border-radius: 20px; | |
| background: var(--ink); | |
| color: white; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .price-badge .small { | |
| font-size: 0.67rem; | |
| letter-spacing: 0.11em; | |
| opacity: 0.68; | |
| } | |
| .price { | |
| font-size: 2.15rem; | |
| font-weight: 850; | |
| } | |
| .food-panel { | |
| display: grid; | |
| grid-template-columns: 105px 1fr; | |
| gap: 22px; | |
| align-items: center; | |
| padding: 24px; | |
| border-radius: 20px; | |
| background: #f5f2ec; | |
| } | |
| .plate { | |
| font-size: 4rem; | |
| text-align: center; | |
| } | |
| .food-panel h3 { | |
| margin: 0 0 10px; | |
| } | |
| .reaction { | |
| display: inline-block; | |
| margin-bottom: 11px; | |
| padding: 7px 10px; | |
| border-radius: 9px; | |
| background: var(--red-soft); | |
| color: #9c3732; | |
| font-weight: 750; | |
| } | |
| .thought-box { | |
| margin-top: 24px; | |
| padding: 21px 23px; | |
| border-left: 4px solid var(--yellow); | |
| border-radius: 5px 15px 15px 5px; | |
| background: var(--yellow-soft); | |
| } | |
| .thought-label { | |
| font-size: 0.78rem; | |
| color: #8b6a20; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| font-weight: 800; | |
| } | |
| .thought-box p { | |
| margin: 6px 0 0; | |
| font-size: 1.08rem; | |
| font-weight: 650; | |
| } | |
| .decision-title { | |
| margin-top: 31px; | |
| text-align: center; | |
| } | |
| /* ---------- Choices ---------- */ | |
| .choices { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| margin-top: 17px; | |
| } | |
| .choice { | |
| display: flex; | |
| gap: 14px; | |
| align-items: center; | |
| width: 100%; | |
| padding: 19px; | |
| background: white; | |
| border: 1px solid var(--line); | |
| border-radius: 17px; | |
| cursor: pointer; | |
| color: var(--ink); | |
| text-align: left; | |
| transition: | |
| transform 0.18s ease, | |
| box-shadow 0.18s ease, | |
| border-color 0.18s ease; | |
| } | |
| .choice:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 12px 25px rgba(0,0,0,0.08); | |
| } | |
| .choice-icon { | |
| font-size: 1.8rem; | |
| } | |
| .choice strong { | |
| display: block; | |
| margin-bottom: 4px; | |
| font-size: 1rem; | |
| } | |
| .choice small { | |
| display: block; | |
| color: var(--muted); | |
| line-height: 1.4; | |
| } | |
| .behavioral:hover { | |
| border-color: var(--red); | |
| } | |
| .rational-looking:hover { | |
| border-color: var(--green); | |
| } | |
| /* ---------- Stage 2 ---------- */ | |
| .status-row { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 12px; | |
| margin-bottom: 30px; | |
| } | |
| .stat { | |
| padding: 17px; | |
| border-radius: 15px; | |
| background: #f5f3ee; | |
| text-align: center; | |
| } | |
| .stat-label { | |
| display: block; | |
| margin-bottom: 4px; | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| } | |
| .stat strong { | |
| font-size: 1.5rem; | |
| } | |
| .warning-stat { | |
| background: var(--red-soft); | |
| } | |
| .warning-stat strong { | |
| color: var(--red); | |
| } | |
| .narrative { | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| padding: 24px; | |
| border-radius: 20px; | |
| background: #f5f2ec; | |
| } | |
| .narrative h2 { | |
| margin: 0 0 8px; | |
| } | |
| .narrative p { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| .big { | |
| flex: 0 0 125px; | |
| } | |
| .cost-illusion { | |
| margin-top: 23px; | |
| padding: 23px; | |
| border-radius: 18px; | |
| border: 1px dashed #d6b35b; | |
| background: var(--yellow-soft); | |
| } | |
| .cost-illusion h3 { | |
| margin-top: 0; | |
| } | |
| .cost-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| } | |
| .cost-grid > div { | |
| padding: 15px; | |
| border-radius: 12px; | |
| background: rgba(255,255,255,0.75); | |
| } | |
| .cost-grid span { | |
| display: block; | |
| color: var(--muted); | |
| font-size: 0.8rem; | |
| } | |
| .cost-grid strong { | |
| font-size: 1.22rem; | |
| } | |
| .temptation { | |
| margin-bottom: 0; | |
| font-weight: 650; | |
| } | |
| /* ---------- Stage 3 ---------- */ | |
| .crisis-banner { | |
| display: flex; | |
| gap: 16px; | |
| align-items: center; | |
| margin-bottom: 28px; | |
| padding: 20px; | |
| border-radius: 17px; | |
| background: var(--red-soft); | |
| } | |
| .crisis-banner > span { | |
| font-size: 2.8rem; | |
| } | |
| .crisis-banner p { | |
| margin: 4px 0 0; | |
| color: #805653; | |
| } | |
| .meters { | |
| display: grid; | |
| gap: 17px; | |
| } | |
| .meter-row { | |
| display: grid; | |
| grid-template-columns: 145px 1fr 80px; | |
| gap: 14px; | |
| align-items: center; | |
| } | |
| .meter-row > span { | |
| color: var(--muted); | |
| font-size: 0.88rem; | |
| } | |
| .meter-track { | |
| height: 11px; | |
| overflow: hidden; | |
| border-radius: 999px; | |
| background: #e9e6df; | |
| } | |
| .meter-fill { | |
| height: 100%; | |
| border-radius: inherit; | |
| } | |
| .money-fill { | |
| width: 0%; | |
| background: var(--green); | |
| } | |
| .pain-fill { | |
| width: 88%; | |
| background: var(--red); | |
| } | |
| .joy-fill { | |
| width: 11%; | |
| background: #b7b7b7; | |
| } | |
| .reflection-box { | |
| margin: 31px 0 10px; | |
| padding: 24px; | |
| border: 2px solid var(--ink); | |
| border-radius: 18px; | |
| text-align: center; | |
| } | |
| .reflection-box h3 { | |
| margin-top: 0; | |
| } | |
| .reflection-box p { | |
| margin-bottom: 0; | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| } | |
| /* ---------- Results ---------- */ | |
| .result-icon { | |
| text-align: center; | |
| font-size: 4.2rem; | |
| } | |
| #resultTitle { | |
| margin-bottom: 8px; | |
| text-align: center; | |
| font-size: 2rem; | |
| } | |
| .result-intro { | |
| max-width: 650px; | |
| margin: 0 auto 28px; | |
| color: var(--muted); | |
| text-align: center; | |
| line-height: 1.65; | |
| } | |
| .comparison { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 17px; | |
| } | |
| .comparison-card { | |
| padding: 23px; | |
| border-radius: 18px; | |
| } | |
| .behavioral-card { | |
| background: var(--red-soft); | |
| border: 1px solid #efc4c0; | |
| } | |
| .rational-card { | |
| background: var(--green-soft); | |
| border: 1px solid #b9dfd1; | |
| } | |
| .comparison-label { | |
| display: inline-block; | |
| font-size: 0.72rem; | |
| font-weight: 850; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| } | |
| .behavioral-card .comparison-label { | |
| color: #a03f39; | |
| } | |
| .rational-card .comparison-label { | |
| color: var(--green); | |
| } | |
| .comparison-card h3 { | |
| margin: 10px 0 18px; | |
| } | |
| .logic { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .logic > div { | |
| padding-top: 10px; | |
| border-top: 1px solid rgba(0,0,0,0.09); | |
| } | |
| .logic span { | |
| display: block; | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| } | |
| .logic strong { | |
| display: block; | |
| margin-top: 2px; | |
| } | |
| .equation-box { | |
| margin-top: 20px; | |
| padding: 24px; | |
| border-radius: 18px; | |
| background: #f3f6fb; | |
| border: 1px solid #d7e0ee; | |
| text-align: center; | |
| } | |
| .equation-box h3 { | |
| margin-top: 0; | |
| } | |
| .equation { | |
| padding: 13px; | |
| border-radius: 12px; | |
| background: white; | |
| font-size: 1.1rem; | |
| } | |
| .equation strong { | |
| color: var(--blue); | |
| } | |
| .equation-box p { | |
| margin-bottom: 0; | |
| color: var(--muted); | |
| line-height: 1.55; | |
| } | |
| .reveal { | |
| margin-top: 20px; | |
| padding: 28px; | |
| border-radius: 18px; | |
| background: var(--ink); | |
| color: white; | |
| } | |
| .reveal-tag { | |
| color: var(--yellow); | |
| font-size: 0.72rem; | |
| font-weight: 850; | |
| letter-spacing: 0.1em; | |
| } | |
| .reveal h2 { | |
| margin-bottom: 10px; | |
| } | |
| .reveal p { | |
| color: #dddddd; | |
| line-height: 1.62; | |
| } | |
| .takeaway { | |
| display: flex; | |
| gap: 17px; | |
| align-items: flex-start; | |
| margin-top: 20px; | |
| padding: 21px; | |
| border: 1px solid var(--line); | |
| border-radius: 17px; | |
| } | |
| .takeaway-icon { | |
| font-size: 2rem; | |
| } | |
| .takeaway p { | |
| margin-bottom: 0; | |
| color: var(--muted); | |
| line-height: 1.55; | |
| } | |
| .restart { | |
| display: block; | |
| margin: 25px auto 0; | |
| padding: 13px 24px; | |
| border: none; | |
| border-radius: 999px; | |
| background: var(--ink); | |
| color: white; | |
| font: inherit; | |
| font-weight: 750; | |
| cursor: pointer; | |
| } | |
| .restart:hover { | |
| opacity: 0.85; | |
| } | |
| footer { | |
| padding-top: 24px; | |
| color: #928d84; | |
| text-align: center; | |
| font-size: 0.78rem; | |
| } | |
| /* ---------- Mobile ---------- */ | |
| @media (max-width: 700px) { | |
| .game-shell { | |
| width: min(94%, 960px); | |
| padding-top: 28px; | |
| } | |
| .game-card { | |
| padding: 22px; | |
| border-radius: 20px; | |
| } | |
| .scenario-top { | |
| align-items: flex-start; | |
| } | |
| .price-badge { | |
| flex-basis: 90px; | |
| min-height: 90px; | |
| } | |
| .price { | |
| font-size: 1.7rem; | |
| } | |
| .food-panel, | |
| .narrative { | |
| grid-template-columns: 1fr; | |
| display: grid; | |
| } | |
| .plate, | |
| .big { | |
| font-size: 3rem; | |
| text-align: left; | |
| } | |
| .choices, | |
| .comparison, | |
| .cost-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .status-row { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .warning-stat { | |
| grid-column: 1 / -1; | |
| } | |
| .meter-row { | |
| grid-template-columns: 1fr; | |
| gap: 7px; | |
| } | |
| } |