:root{color-scheme:light;--cream: #fffdf4;--ivory: #fff8e8;--tile: #f8fff9;--teal: #007f7d;--teal-dark: #075f61;--mint: #76c8a8;--green: #58976b;--coral: #f2533a;--orange: #f69b3d;--yellow: #ffe1a8;--ink: #174345;--muted: #657c75;--line: #add7c8;--paper-line: #f0c783;--white: #ffffff;--shadow: 0 18px 35px rgba(9, 95, 97, .16)}*{box-sizing:border-box}html{min-width:320px;background:var(--tile)}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:linear-gradient(#fffdf457,#fffdf457),url(./retro-tile-bg-BJHbYHFI.png),var(--tile);background-size:auto,520px 520px,auto;background-position:center top;font-family:Yu Gothic,YuGothic,Hiragino Maru Gothic ProN,Hiragino Sans,Meiryo,system-ui,sans-serif}body:before{content:"";position:fixed;inset:0 0 auto;height:38px;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent),repeating-linear-gradient(90deg,var(--teal) 0 54px,#0b9c98 54px 58px,var(--teal-dark) 58px 112px,#e8fff6 112px 116px);box-shadow:0 4px #ffffffbf,0 8px #007f7d1f}button,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default}.appShell{width:min(100%,520px);min-height:100vh;margin:0 auto;padding:58px 14px 18px;display:flex;align-items:center;justify-content:center}.topScreen{align-items:stretch;flex-direction:column;justify-content:space-between;gap:14px}.quizScreen,.resultScreen{align-items:flex-start}.signBoard{position:relative;width:100%;border:3px solid var(--coral);border-radius:34px;background:radial-gradient(circle at top left,rgba(255,225,168,.52),transparent 32%),linear-gradient(180deg,var(--cream),var(--ivory));box-shadow:0 0 0 7px var(--white),0 0 0 10px var(--teal),var(--shadow)}.signBoard:before{content:"";position:absolute;inset:10px;border:2px solid var(--teal);border-radius:26px;pointer-events:none}.heroPanel{margin:auto 0;padding:70px 20px 22px;text-align:center}.quizPanel,.resultPanel{padding:28px 18px 20px}.tileCap{position:absolute;top:-45px;left:18px;right:18px;height:30px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent),repeating-linear-gradient(90deg,var(--teal) 0 44px,#e2fff7 44px 48px,#088f8b 48px 92px,#e2fff7 92px 96px);box-shadow:0 4px #075f6133}.vine{position:absolute;top:-34px;right:8px;width:72px;height:94px;border-right:4px solid var(--green);border-radius:0 28px 28px 0;transform:rotate(-10deg)}.vine:before,.vine:after{content:"";position:absolute;border-radius:50%;background:radial-gradient(circle,var(--yellow) 0 17%,transparent 18%),conic-gradient(var(--coral) 0 12%,#ff8a75 12% 24%,var(--coral) 24% 36%,#ff8a75 36% 48%,var(--coral) 48% 60%,#ff8a75 60% 72%,var(--coral) 72% 84%,#ff8a75 84% 100%)}.vine:before{top:8px;right:16px;width:34px;height:34px}.vine:after{top:48px;right:-6px;width:24px;height:24px}.sealStars{display:flex;justify-content:center;gap:20px;margin-bottom:16px}.sealStars span{width:22px;height:22px;background:var(--coral);clip-path:polygon(50% 0,62% 34%,98% 35%,69% 56%,79% 91%,50% 70%,21% 91%,31% 56%,2% 35%,38% 34%);filter:drop-shadow(2px 2px 0 rgba(246,155,61,.55))}.sealStars span:nth-child(2){width:34px;height:34px;margin-top:-6px}.eyebrow{position:relative;z-index:1;margin:0 0 10px;color:var(--coral);font-size:.75rem;font-weight:900;letter-spacing:0}h1{position:relative;z-index:1;margin:0;color:var(--teal);font-size:clamp(3rem,18vw,5.2rem);font-weight:950;line-height:.98;letter-spacing:0;text-shadow:3px 3px 0 var(--white),6px 6px 0 rgba(242,83,58,.85),9px 9px 0 rgba(246,155,61,.65)}.subcopy{position:relative;z-index:1;margin:26px 0 0;color:var(--teal-dark);font-size:clamp(1.45rem,8vw,2.3rem);font-weight:950;line-height:1.25}.dotDivider{width:min(280px,75%);height:14px;margin:22px auto 14px;background:radial-gradient(circle,var(--teal) 0 4px,transparent 5px) left center / 18px 12px repeat-x}.lead{position:relative;z-index:1;display:inline-block;margin:0 auto;padding:14px 18px;border:2px solid var(--paper-line);border-radius:8px;color:var(--teal-dark);background:#fffdf4eb;font-size:clamp(1.05rem,5vw,1.45rem);font-weight:900;line-height:1.55;box-shadow:0 5px #f69b3d2e}.primaryButton,.ghostButton,.softButton,.choiceButton{width:100%;min-height:52px;border-radius:999px;font-weight:950;letter-spacing:0}.primaryButton{border:3px solid var(--white);color:var(--white);background:linear-gradient(180deg,#079690,var(--teal-dark));box-shadow:0 0 0 3px var(--teal-dark),0 7px #f2533af2,0 13px 20px #075f612e}.primaryButton:hover{filter:brightness(1.04);transform:translateY(-1px)}.startButton{min-height:70px;font-size:clamp(2rem,11vw,3.4rem);text-shadow:3px 3px 0 var(--coral)}.ghostButton,.softButton{border:2px solid var(--teal);color:var(--teal-dark);background:var(--white)}.softButton{border-color:var(--paper-line);color:var(--coral);background:#fffaf0}.fanmade{width:fit-content;margin:0 auto;padding:8px 18px;border:2px solid var(--paper-line);border-radius:999px;color:var(--teal-dark);background:#fffdf4eb;font-size:.86rem;font-weight:900;text-align:center}.fanmade.inPanel{margin-top:14px;font-size:.76rem}.quizHeader{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px}.quizHeader .eyebrow{margin-bottom:4px}.quizHeader strong,.progressText{color:var(--teal-dark);font-size:1rem;font-weight:950}.progressText{display:grid;place-items:center;width:54px;height:54px;border:3px solid var(--coral);border-radius:50%;background:var(--white);box-shadow:3px 3px 0 var(--orange)}.progressTrack{position:relative;z-index:1;height:13px;margin-top:16px;overflow:hidden;border:2px solid var(--teal);border-radius:999px;background:var(--white)}.progressTrack span{display:block;height:100%;border-radius:inherit;background:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 8px,transparent 8px 16px),linear-gradient(90deg,var(--mint),var(--coral));transition:width .18s ease}.quizPanel h1,.resultPanel h1{text-shadow:none}.quizPanel h1{margin-top:22px;padding:16px;border:2px solid var(--line);border-radius:18px;color:var(--ink);background:#ffffffc7;font-size:clamp(1.2rem,5.5vw,1.8rem);line-height:1.45}.resultPanel h1{font-size:clamp(1.8rem,8vw,2.7rem);line-height:1.15}.choiceList{position:relative;z-index:1;margin-top:16px;display:grid;gap:12px}.choiceButton{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;min-height:58px;padding:10px 15px 10px 12px;border:2px solid var(--line);color:var(--ink);background:var(--white);text-align:left;box-shadow:0 5px #007f7d1a}.choiceButton span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--white);background:var(--teal);font-weight:950}.choiceButton:hover:not(:disabled){border-color:var(--coral);transform:translateY(-1px)}.choiceButton.correct{border-color:var(--green);background:#effbf2}.choiceButton.correct span{background:var(--green)}.choiceButton.incorrect{border-color:var(--coral);background:#fff2ec}.choiceButton.incorrect span{background:var(--coral)}.answerBox{position:relative;z-index:1;margin-top:18px;padding:18px;border:2px solid var(--line);border-radius:20px;background:var(--white);box-shadow:0 8px #f69b3d2e}.answerBox:before{content:"";position:absolute;top:-12px;right:18px;width:58px;height:28px;border:2px solid currentColor;border-radius:999px;background:var(--white);transform:rotate(4deg)}.answerBox.isCorrect{color:var(--green)}.answerBox.isIncorrect{color:var(--coral)}.answerBox strong{display:inline-block;margin-bottom:10px;padding:4px 14px;border:2px solid currentColor;border-radius:999px;background:var(--white);font-size:1.1rem;transform:rotate(-2deg)}.answerBox p{margin:0 0 16px;color:var(--ink);line-height:1.75}.miniOrnaments{position:absolute;top:14px;right:18px;display:flex;gap:6px}.miniOrnaments span{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,var(--yellow) 0 21%,transparent 22%),conic-gradient(var(--coral) 0 12%,#ff8a75 12% 24%,var(--coral) 24% 36%,#ff8a75 36% 48%,var(--coral) 48% 60%,#ff8a75 60% 72%,var(--coral) 72% 84%,#ff8a75 84% 100%)}.scoreGrid{position:relative;z-index:1;margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.scoreGrid div,.titleBox,.shareBox{border:2px solid var(--line);border-radius:18px;background:#ffffffdb}.scoreGrid div{padding:15px 12px;min-width:0;text-align:center}.scoreGrid span,.titleBox span,.shareBox span{display:block;color:var(--muted);font-size:.78rem;font-weight:950}.scoreGrid strong{display:block;margin-top:6px;color:var(--coral);font-size:clamp(1.45rem,7vw,1.95rem);line-height:1.1;white-space:nowrap}.titleBox{position:relative;z-index:1;margin-top:12px;padding:17px;overflow-wrap:anywhere;box-shadow:0 6px #007f7d1a}.titleBox strong{display:block;margin-top:8px;color:var(--teal-dark);font-size:clamp(1.18rem,5vw,1.48rem);line-height:1.38}.titleBox p{margin:10px 0 0;color:var(--ink);line-height:1.7}.shareBox{position:relative;z-index:1;display:block;margin-top:12px;padding:14px}.shareBox textarea{display:block;width:100%;max-width:100%;margin-top:8px;padding:12px;resize:none;color:var(--ink);border:2px solid #d7eadf;border-radius:14px;background:var(--cream);line-height:1.6;overflow-wrap:anywhere}.buttonRow{position:relative;z-index:1;margin-top:14px;display:grid;gap:10px}@media(min-width:560px){.appShell{padding:66px 18px 24px}.heroPanel{padding:78px 30px 28px}.quizPanel,.resultPanel{padding:32px 28px 24px}.quizScreen,.resultScreen{align-items:center}}@media(max-width:410px){.appShell{padding-left:10px;padding-right:10px}.signBoard{border-radius:26px;box-shadow:0 0 0 5px var(--white),0 0 0 8px var(--teal),var(--shadow)}.signBoard:before{inset:8px;border-radius:20px}.heroPanel{padding:62px 16px 18px}.quizPanel,.resultPanel{padding:26px 14px 18px}.scoreGrid{grid-template-columns:1fr}}