@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700;800&display=swap";@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap";.screen{width:100vw;height:100dvh;min-height:100svh;display:grid;place-items:center;padding:clamp(24px,7vh,96px) clamp(16px,4vw,48px) clamp(32px,10vh,120px);position:relative;overflow:hidden;box-sizing:border-box;font-family:Noto Sans JP,Noto Sans,sans-serif}button,input{font-family:inherit}.screen:before{content:"";position:absolute;z-index:0;width:260%;height:260%;top:-80%;left:-80%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0,rgba(0,0,0,.15) 1px,transparent 1px,transparent 150px),repeating-linear-gradient(90deg,rgba(0,0,0,.15) 0,rgba(0,0,0,.15) 1px,transparent 1px,transparent 150px);background-size:150px 150px;pointer-events:none;animation:grid-drift 9s linear infinite;transform:rotate(45deg);transform-origin:center}.panel{position:relative;z-index:2;width:min(820px,100%);text-align:center}.start-panel,.finish-panel{display:grid;place-items:center;width:100%;height:100%;max-width:none}.start-screen,.finish-screen{padding:0}.start-button,.finish-button{border:none;background:transparent;color:#1b1b1b;cursor:pointer;display:grid;gap:6px;align-items:center;justify-items:center;align-content:center;font-weight:800;text-transform:uppercase;width:100%;height:100%;text-align:center}.start-button:focus-visible,.finish-button:focus-visible{outline:3px solid rgba(30,139,255,.35);outline-offset:10px;border-radius:16px}.start-title,.finish-title{font-size:clamp(48px,8vw,72px);letter-spacing:.08em;text-align:center;line-height:1.05}.start-divider,.finish-divider{width:min(520px,82vw);height:1px;background:#1b1b1b}.start-subtitle,.finish-subtitle{font-size:clamp(16px,3vw,22px);font-weight:600;letter-spacing:.2em;text-align:center;line-height:1.2;animation:tap-blink 1.2s ease-in-out infinite}.finish-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:5}.finish-overlay:before{content:"";position:absolute;width:100vw;height:min(38vh,240px);background:#ffffffeb;top:50%;left:50%;transform:translate(-50%,-50%)}.finish-overlay .finish-button{width:100%;height:100%;position:relative;z-index:1}.quiz-screen .panel{width:100%;max-width:none;height:100%}.menu-actions{position:absolute;top:16px;left:16px;z-index:3;display:flex;gap:8px}.name-edit-trigger,.logout-trigger{border:2px solid #2b2b2b;background:#fff;color:#1b1b1b;font-size:14px;font-weight:700;padding:6px 14px;border-radius:12px;cursor:pointer}.name-edit-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#ffffffb3;display:grid;place-items:center;z-index:6}.name-edit-panel{background:#fff;border:2px solid #2b2b2b;border-radius:16px;padding:20px;width:min(360px,90vw);display:grid;gap:12px;text-align:center}.name-edit-title{margin:0;font-size:16px;font-weight:700}.name-edit-row{display:grid;grid-template-columns:1fr auto;border:2px solid #9a9a9a;border-radius:10px;overflow:hidden}.name-edit-input{border:none;padding:8px 12px;font-size:14px;font-family:inherit;text-align:center}.name-edit-input::placeholder{color:#9a9a9a}.name-edit-save{border:none;background:#26a9ff;color:#fff;font-size:14px;font-weight:700;font-family:inherit;padding:8px 16px;cursor:pointer}.name-edit-save:disabled{opacity:.6;cursor:default}.name-edit-close{border:2px solid #2b2b2b;background:#fff;color:#1b1b1b;font-size:14px;font-weight:700;padding:6px 16px;border-radius:12px;cursor:pointer}.logo{width:min(720px,100%);height:auto;display:block;margin:0 auto 24px;filter:none}.logo-float{animation:logo-float 3s ease-in-out infinite}.title{font-size:clamp(20px,2.6vw,26px);margin:0 0 28px;color:#1b1b1b}.password-form{display:grid;justify-items:center;gap:10px}.physics-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto}.physics-layer canvas{display:block}.menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:end;margin-top:32px}.screen.is-dragging .menu,.screen.is-dragging .panel{pointer-events:none}.menu-item{border:none;background:transparent;padding:0;cursor:pointer;transition:transform .2s ease}.menu-item img{width:min(240px,100%);height:auto;display:block;margin:0 auto;filter:none}.menu-item:focus-visible{outline:3px solid rgba(30,139,255,.35);outline-offset:6px;border-radius:20px}.menu-item:hover{transform:translateY(-4px)}.quiz-panel{display:grid;gap:36px;position:relative;justify-items:center;text-align:center;height:100%;align-content:start;grid-template-rows:auto minmax(220px,40vh) 1fr}.quiz-topbar{width:100%;display:grid;place-items:center}.quiz-title{margin:0;font-size:clamp(26px,4vw,36px);font-weight:700}.quiz-swatch{width:min(320px,72vw);aspect-ratio:1 / 1;border-radius:16px;border:3px solid #4a4a4a;box-shadow:0 18px 28px #00000029}.quiz-swatch-wrap{position:relative;display:grid;place-items:center}.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;width:min(860px,100%);align-content:start}.quiz-option{border:3px solid #2b2b2b;border-radius:18px;background:#fff;color:#1b1b1b;font-weight:700;padding:18px 24px;font-size:20px;cursor:pointer;box-shadow:0 7px #0003;transition:transform .15s ease,box-shadow .15s ease;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:72px}.quiz-option-label{display:inline-flex;align-items:center;justify-content:center;gap:4px;line-height:1.2;overflow:visible}.quiz-option-label ruby{line-height:1;vertical-align:middle;position:relative;display:inline-block}.quiz-option-label rt{font-size:.6em;line-height:1;position:absolute;left:50%;top:0;transform:translate(-50%,-135%);white-space:nowrap}.quiz-option:hover{transform:translateY(-2px);box-shadow:0 8px #0003}.quiz-option.is-selected{border-color:#1e8bff;background:#e6f2ff;color:#0c4a85}.quiz-option.is-answer{border-color:#ff4a4a;box-shadow:0 6px #ff4a4a66}.quiz-option.is-wrong{border-color:#1e8bff;background:#1569ff;color:#fff}.quiz-option.is-answer:after{content:"";position:absolute;width:92px;height:92px;border-radius:999px;border:8px solid rgba(255,96,96,.6);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.quiz-option.is-wrong:before,.quiz-option.is-wrong:after{content:"";position:absolute;width:96px;height:12px;background:#1c4ed299;left:50%;top:50%;transform-origin:center;pointer-events:none}.quiz-option.is-wrong:before{transform:translate(-50%,-50%) rotate(45deg)}.quiz-option.is-wrong:after{transform:translate(-50%,-50%) rotate(-45deg)}.quiz-option:disabled{cursor:default;opacity:1}.quiz-empty{margin:0;font-weight:700;color:#c33838}.quiz-feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}.quiz-feedback-image{display:block;width:150%;height:auto;max-width:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.18))}.quiz-status{position:fixed;top:clamp(160px,22vh,220px);right:-10px;display:grid;gap:12px;z-index:2}.status-pill{display:flex;align-items:center;gap:10px;background:url("data:image/svg+xml,%3csvg%20width='160'%20height='61'%20viewBox='0%200%20160%2061'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cmask%20id='path-1-inside-1_158_87'%20fill='white'%3e%3cpath%20d='M0%2030.5C0%2013.6553%2013.6553%200%2030.5%200H160V61H30.5C13.6553%2061%200%2047.3447%200%2030.5Z'/%3e%3c/mask%3e%3cpath%20d='M-3%2030.5C-3%2011.9985%2011.9985%20-3%2030.5%20-3H160V3H30.5C15.3122%203%203%2015.3122%203%2030.5H-3ZM160%2064H30.5C11.9985%2064%20-3%2049.0015%20-3%2030.5H3C3%2045.6878%2015.3122%2058%2030.5%2058H160V64ZM30.5%2064C11.9985%2064%20-3%2049.0015%20-3%2030.5C-3%2011.9985%2011.9985%20-3%2030.5%20-3V3C15.3122%203%203%2015.3122%203%2030.5C3%2045.6878%2015.3122%2058%2030.5%2058V64ZM160%200V61V0Z'%20fill='black'%20mask='url(%23path-1-inside-1_158_87)'/%3e%3c/svg%3e") center / 100% 100% no-repeat;border:none;border-radius:0;padding:10px 24px 10px 20px;min-width:170px;min-height:60px;box-shadow:none;font-weight:700}.status-pill.is-score{justify-content:flex-end;padding-right:24px}.status-icon{width:24px;height:24px}.status-heart{width:24px;height:24px;display:inline-block;background-color:#2fea45;-webkit-mask:url("data:image/svg+xml,%3csvg%20width='42'%20height='42'%20viewBox='0%200%2042%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21%2037.3625L18.4625%2035.0525C9.45%2026.88%203.5%2021.4725%203.5%2014.875C3.5%209.4675%207.735%205.25%2013.125%205.25C16.17%205.25%2019.0925%206.6675%2021%208.89C22.9075%206.6675%2025.83%205.25%2028.875%205.25C34.265%205.25%2038.5%209.4675%2038.5%2014.875C38.5%2021.4725%2032.55%2026.88%2023.5375%2035.0525L21%2037.3625Z'%20fill='%232FEA45'/%3e%3c/svg%3e") center / contain no-repeat;mask:url("data:image/svg+xml,%3csvg%20width='42'%20height='42'%20viewBox='0%200%2042%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21%2037.3625L18.4625%2035.0525C9.45%2026.88%203.5%2021.4725%203.5%2014.875C3.5%209.4675%207.735%205.25%2013.125%205.25C16.17%205.25%2019.0925%206.6675%2021%208.89C22.9075%206.6675%2025.83%205.25%2028.875%205.25C34.265%205.25%2038.5%209.4675%2038.5%2014.875C38.5%2021.4725%2032.55%2026.88%2023.5375%2035.0525L21%2037.3625Z'%20fill='%232FEA45'/%3e%3c/svg%3e") center / contain no-repeat}.status-heart.is-green{background-color:#2fea45}.status-heart.is-yellow{background-color:#ffd23f}.status-heart.is-red{background-color:#ff4a4a}.status-heart.is-gray{background-color:#9b9b9b}.status-text{font-size:20px}.result-panel{display:grid;justify-items:center;gap:12px}.result-title-image{width:min(340px,70%);height:auto;display:block}.result-desc{margin:0;font-size:clamp(16px,3vw,22px);font-weight:600;color:#1b1b1b}.result-score-inline{display:inline-flex;align-items:baseline;gap:6px;margin:0 6px}.result-score-number{font-size:clamp(36px,6vw,64px);font-weight:800;color:#e04a4a}.result-score-unit{font-size:clamp(18px,3vw,24px);font-weight:700;color:#1b1b1b}.result-subtitle{margin:0;font-size:clamp(14px,2.4vw,18px);color:#1b1b1b}.result-button{border:2px solid #2b2b2b;background:#fff;color:#1b1b1b;font-size:16px;font-weight:700;padding:8px 20px;border-radius:12px;cursor:pointer;margin-top:6px}.result-register{display:grid;gap:8px;width:min(420px,100%);justify-items:center}.result-register-note{margin:0;font-size:15px;font-weight:700;line-height:1.5}.result-register-row{display:grid;grid-template-columns:1fr auto;gap:0;width:100%;border:2px solid #9a9a9a;border-radius:10px;overflow:hidden;background:#fff}.result-name-input{width:100%;border:none;padding:8px 12px;font-size:14px;font-family:inherit;text-align:center;background:transparent}.result-name-input::placeholder{color:#9a9a9a}.result-register-button{border:none;background:#26a9ff;color:#fff;font-size:14px;font-weight:700;font-family:inherit;padding:8px 18px;cursor:pointer}.result-register-button:disabled{opacity:.6;cursor:default}.result-register-done{margin:0;font-size:14px;font-weight:700;color:#e04a4a}.ranking-screen{padding:clamp(32px,7vh,72px) clamp(16px,4vw,48px)}.ranking-panel{width:min(900px,100%);display:grid;gap:20px;justify-items:center}.ranking-title-image{width:min(360px,70%);height:auto;display:block}.ranking-columns{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,4vw,32px)}.ranking-card{display:grid;gap:12px;justify-items:center}.ranking-banner-image{width:min(220px,70%);height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}.ranking-list{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:6px}.ranking-item{display:grid;grid-template-columns:50px 1fr auto;gap:8px;font-size:16px;font-weight:600;align-items:center}.ranking-rank{text-align:right}.ranking-name{text-align:left}.ranking-score{text-align:right;font-variant-numeric:tabular-nums}.input-group{display:grid;grid-template-columns:1fr auto;align-items:center;background:#fff;border:2px solid #b5b5b5;border-radius:12px;padding:12px;box-shadow:0 10px 22px #00000014;width:min(520px,100%);gap:12px}.input-stack{display:grid;gap:10px}.input-group input{flex:1;border:1px solid #d4d4d4;border-radius:8px;padding:14px 16px;font-size:16px;outline:none;background:#fff;width:100%}.input-group input::placeholder{color:#a0a0a0}.input-group button{border:none;background:#1e8bff;color:#fff;font-size:16px;font-weight:700;padding:14px 20px;cursor:pointer;border-radius:10px}.input-group:focus-within{border-color:#1e8bff;box-shadow:0 0 0 3px #1e8bff33}.error{color:#e03535;font-weight:700;margin:0;min-height:24px}.error.is-hidden{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes grid-drift{0%{background-position:0 0,0 0}to{background-position:-150px 0,-150px 0}}@keyframes logo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes tap-blink{0%,to{opacity:.2}50%{opacity:1}}@media (max-width: 600px){.screen{padding:72px 16px 96px}.menu,.input-group{grid-template-columns:1fr}.input-group button{width:100%}.quiz-options{grid-template-columns:1fr}.quiz-status{top:16px;right:0;justify-items:end}.ranking-columns{grid-template-columns:1fr}.ranking-item{font-size:14px}}:root{font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;line-height:1.5;font-weight:400;color:#1c1c1c;background:#f7f7f7}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f7f7f7}#root{min-height:100vh}