:root { --ink: #222; --muted: #265e0c; --line: #dddddd; --paper: #fff; --accent: #333; --accent-dark: #111; --gold: #bb03c2; --shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } * { box-sizing: border-box; } html,body { width: 100%;min-height: 100%;margin: 0;padding: 0;overflow-x: hidden;overflow-y: auto;scrollbar-width: none;-ms-overflow-style: none;} html::-webkit-scrollbar,body::-webkit-scrollbar {display: none;} body { font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: var(--ink); background-color: #f5f5f5; background-image: url("images/XPD_22.PNG"); background-repeat: repeat; overflow-x: hidden; } button { font-family: inherit; cursor: pointer; touch-action: manipulation; } button:disabled { cursor: not-allowed; opacity: 0.45; } .hidden { display: none !important; } .top-bar { width: 100%; min-height: 72px; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 15px; color: var(--ink); background: #f5f5f5 url("images/STRT_22.PNG") repeat; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; } .top-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .top-btn, #soundBtn { border: none; border-radius: 8px; padding: 12px 20px; font-size: 15px; font-weight: bold; box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); transition: transform 0.15s ease, opacity 0.15s ease; } .top-btn:hover:not(:disabled) { transform: translateY(-2px); } .start-btn { background-color: rgba(43, 175, 54, 0.8); text-shadow: 1px 1px 1px #000; color: #ececec; } .stop-btn { background: #ddd; text-shadow: 1px 1px 1px #000; color: #e61515; } #soundBtn { background: #ddd; text-shadow: 1px 1px 1px #000; color: #605edf; } .apology-btn { background: #8b0000; color: #fff; } .difficulty-area { display: flex; align-items: center; gap: 8px; color: #ebe703; text-shadow: 1px 1px 1px #000; font-size: 20px; font-weight: bold; white-space: nowrap; } #difficultyStars { color: var(--gold); font-size: 22px; letter-spacing: 2px; } .screen { display: none; width: 100%; min-height: calc(100vh - 72px); padding: 30px 20px; } .screen.active { display: flex; } #startScreen { justify-content: center; align-items: flex-start; background: linear-gradient(rgb(198, 238, 179), rgb(240, 239, 239)); } .start-content { width: min(1200px, 100%); color: #1a074eee; text-shadow: 1px 1px 1px #eaeffff1; text-align: center; } .title-image { display: block; width: min(100%, 1200px); height: auto; margin: 10px auto 25px; object-fit: contain; } .start-description { margin: 12px 0; font-size: 20px; line-height: 1.8; font-weight: bold; } .start-description.small { font-size: 18px; font-weight: bold; color: var(--muted); } #gameScreen { justify-content: center; align-items: flex-start; } .game-container { width: min(1400px, 100%); margin: 0 auto; } .question-info { width: 100%; display: flex; align-items: center; gap: 20px; margin-bottom: 8px; font-weight: bold; } #questionNumber { flex-shrink: 0; font-size: 22px; white-space: nowrap; } #timer { flex-shrink: 0; font-size: 22px; color: #295704; font-weight: bold; font-variant-numeric: tabular-nums; } .progress-area { width: 100%; height: 12px; margin-bottom: 25px; background: #e3deffc5; border-radius: 999px; overflow: hidden; } #progressBar { width: 100%; height: 100%; background: #6d5bd0; transform-origin: left center; transition: width 0.1s linear; } .game-title { margin: 0 0 22px; text-align: center; color: #050505; text-shadow: 1px 2px 3px #fff5f5; font-size: clamp(20px, 3vw, 34px); } .compare-area { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .image-box { min-width: 0; text-align: center; } .image-label { margin: 0 0 8px; font-size: 15px; font-weight: bold; } .image-box img { display: block; width: 100%; max-width: 640px; aspect-ratio: 4 / 3; margin: 0 auto; object-fit: contain; background: #eee; border-radius: 8px; border: 4px solid #0b910b; } .answer-area { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 30px auto 0; width: min(900px, 100%); } .answer-btn { min-height: 70px; border-radius: 12px; background: #fff; font-size: clamp(18px, 2.5vw, 24px); transition: transform 0.15s ease, background 0.15s ease; } #wrongBtn, #sameBtn, #unknownBtn { border: 0; line-height: 2; padding: 0 18px; font-size: 1.5rem; text-align: center; color: #fffafa; font-weight: bold; text-shadow: 1px 1px 1px #050505; border-radius: 10px; box-shadow: inset 4px 4px 6px rgba(255, 255, 255, 0.6), inset -4px -4px 6px rgba(0, 0, 0, 0.6); z-index: 2; } #wrongBtn { background-color: rgba(219, 58, 198, 0.8); } #sameBtn { background-color: rgba(68, 113, 211, 0.8); } #unknownBtn { background-color: rgba(124, 126, 31, 0.8); } .answer-btn:hover:not(:disabled) { transform: translateY(-3px); } #wrongBtn:hover:not(:disabled) { background: #ffe5e5; color: #070707; text-shadow: 1px 1px 1px #fffafa; } #sameBtn:hover:not(:disabled) { background: #afbff7; color: #070707; text-shadow: 1px 1px 1px #fffafa; } #unknownBtn:hover:not(:disabled) { background: #ebe59b; color: #070707; text-shadow: 1px 1px 1px #fffafa; } .result-area { flex: 1; display: flex; align-items: center; justify-content: center; gap: 20px; min-width: 0; } .result-area p { margin: 0; font-size: 22px; font-weight: bold; white-space: nowrap; } #correctText { font-size: 30px; } .next-btn, .next-no-btn { padding: 6px 28px; border: 0; font-size: 1rem; text-align: center; color: #fffafa; font-weight: bold; text-shadow: 1px 1px 1px #050505; border-radius: 10px; box-shadow: inset 4px 4px 6px rgba(255, 255, 255, 0.6), inset -4px -4px 6px rgba(0, 0, 0, 0.6); z-index: 2; } .next-btn { background-color: rgba(91, 47, 209, 0.8); } .next-btn:hover { background: #000; } .next-no-btn { background-color: rgba(199, 43, 191, 0.8); } .next-no-btn:hover { background: #f8cae5; color: #161414; } #unknownScreen { background: url("images/BRICKTAN.PNG") repeat; background-size: 128px 128px; } .unknown-container { width: min(1200px, 100%); text-align: center; color: #ffffff; } .unknown-images { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .unknown-images img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #222; border: 2px solid #fff; } #unknownMessage { margin: 30px 0 10px; font-size: clamp(24px, 4vw, 42px); color: #0a090c; text-shadow: 2px 2px 2px #fffafa; font-weight: bold; } .unknown-countdown { color: #ccc; font-size: 18px; } #finalScreen { justify-content: center; align-items: center; background: linear-gradient(rgb(232, 117, 255), rgb(240, 239, 239)); } .final-container { width: min(700px, 100%); padding: 50px 30px; text-align: center; color: #080808; font-weight: bold; background: url("images/CAP_11.PNG") repeat; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); } .final-container h1 { margin-top: 0; color: #4611af; font-size: 38px; } .score-text { font-size: 34px; font-weight: bold; } .evaluation-text { font-size: 22px; line-height: 1.8; margin: 25px 0; } .end-message { margin-top: 30px; padding: 24px 30px; font-size: 28px; font-weight: bold; line-height: 1.8; text-align: center; background: rgba(255, 255, 255, 0.95); border: 3px solid #222; border-radius: 12px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); } .special-container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 20px; box-sizing: border-box; text-align: center; } .special-images { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 20px; width: 100%; } .special-images img { display: block; width: calc(50% - 10px); max-width: 750px; height: auto; object-fit: contain; flex: 1 1 0; min-width: 0; } .special-question-text { margin: 20px 0 8px; font-size: clamp(20px, 2.2vw, 32px); color: #4611af; font-weight: bold; text-align: center; } .special-question { margin: 20px 0 8px; font-size: clamp(20px, 2.2vw, 22px); color: #3b3f09; font-weight: bold; text-align: center; } .special-timer-text { margin: 0; color: #0c3103; font-size: clamp(22px, 2.5vw, 36px); font-weight: bold; text-align: center; } .button-wrapper { position: relative; display: inline-block;} .button-tip { position: absolute; top: -20px;left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 14px;} @media (max-width: 900px) { .top-bar { min-height: auto; } .compare-area { gap: 12px; } .answer-area { gap: 10px; } .answer-btn { min-height: 62px; } } @media (max-width: 700px) { .question-info { gap: 8px; } #questionNumber { font-size: 14px; } .result-area { gap: 7px; } .result-area p { font-size: 12px; } #correctText { font-size: 14px; } .result-area .next-btn { padding: 6px 9px; font-size: 11px; } #timer { font-size: 20px; } } @media (max-width: 600px) { .top-bar { padding: 10px; align-items: flex-start; } .top-left { gap: 6px; } .top-btn { padding: 9px 11px; font-size: 12px; } .difficulty-area { flex-direction: column; gap: 2px; font-size: 11px; } #difficultyStars { font-size: 16px; } .screen { padding: 18px 10px; } .start-description { font-size: 16px; } .question-info { margin-bottom: 5px; } #questionNumber { font-size: 18px; } #timer { font-size: 25px; } .progress-area { height: 9px; margin-bottom: 16px; } .game-title { font-size: 19px; margin-bottom: 15px; } .compare-area { grid-template-columns: 1fr; gap: 15px; } .image-label { font-size: 13px; } .answer-area { grid-template-columns: 1fr; margin-top: 20px; } .answer-btn { min-height: 58px; font-size: 18px; } .result-area p { font-size: 18px; } #correctText { font-size: 25px; } .unknown-images { grid-template-columns: 1fr; gap: 10px; } #unknownMessage { font-size: 26px; } .final-container { padding: 35px 20px; } .final-container h1 { font-size: 30px; } .score-text { font-size: 28px; } .evaluation-text { font-size: 18px; } } @media (max-width: 380px) { .top-bar { flex-direction: column; align-items: stretch; } .top-left { justify-content: center; } .difficulty-area { flex-direction: row; justify-content: center; } }