body { margin: 0; background: #181818; font-family: sans-serif; } .canvas-wrap { display: flex; justify-content: center; margin-top: 20px; } .canvas-inner { position: relative; width: 806px; height: 500px; } canvas { background: #eeeeee; border: 3px solid #2a6cff; border-radius: 6px; box-shadow: 0 4px 12px rgba(231, 231, 231, 0.25); } .top-ui { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 18px; } .top-ui button { font-size: 18px; padding: 6px 14px; } .bottom-ui { margin: 10px auto 0; display: flex; justify-content: center; align-items: center; gap: 20px; width: 806px; padding: 6px 20px; box-sizing: border-box; border: 3px solid #1b8307; border-radius: 10px; background: #c9f1f7cc; font-size: 18px; box-shadow: 0 4px 12px rgba(231, 231, 231, 0.25); } .start-btn, .descent { font-size: 18px; padding: 6px 14px; border: 0; line-height: 1; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(0, 0, 219, 0.8); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); z-index : 2; } .start-btn:hover { background-color: rgba(104, 104, 196, 0.8); } .descent:hover { background-color: rgba(104, 104, 196, 0.8); } #coins { white-space: nowrap; color: #096909; font-size: 20px; font-weight: bold; text-shadow: 1px 1px 1px #272727; } #catches { white-space: nowrap; color: #e7640d; font-size: 20px; font-weight: bold; text-shadow: 1px 1px 1px #272727; } .score, .guide { white-space: nowrap; color: #252525; font-size: 20px; font-weight: bold; text-shadow: 1px 1px 1px #ececec; } .prize-area { width: 800px; margin: 8px auto 0; padding: 6px 4px; border: 2px solid #444; border-radius: 10px; background: #ffffff22; box-sizing: border-box; display: flex; align-items: center; gap: 24px; } .prize-title { font-size: 22px; color: #1aecdb; text-shadow: 1px 1px 1px #1b1b1b; white-space: nowrap; } .prize-list { display: flex; gap: 18px; overflow-x: auto; } .prize-list span { font-size: 24px; display: inline-block; } .prize-list .dim { opacity: 0.25; } .prize-item { position: relative; display: inline-block; } .prize-count { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); margin-left: 4px; font-size: 16px; color: #f7f31c; font-weight: bold; text-shadow: 1px 1px 2px #000; display: none; } #toggle-sound { position: absolute; top: 8px; right: 10px; padding: 2px 14px; font-size: 14px; font-weight: bold; color: #ffe5f6; background: linear-gradient(145deg, #271c58, #0a0a0a); border: 2px solid #27c013; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); z-index: 999; } .sound-credit { position: absolute; top: 31px; right: 12px; font-size: 11px; color: #7a7a7a; pointer-events: none; } .miss-badge, .miss-badge2{ background: #efff0f; color: #272727; font-size: 16px; font-weight: bold; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 4px #000; } .miss-badge2{ background: #d8371a; color: #fff; font-size: 16px; font-weight: bold; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 4px #000; } .miss-label { font-size: 14px; color: #7bfff8; font-weight: bold; user-select: none; } @media (max-width: 768px) { .bottom-ui { width: 95%; gap: 20px; font-size: 16px; padding: 10px 14px; } .start-btn, .help { font-size: 16px; padding: 5px 10px; } } @media (max-width: 480px) { .bottom-ui { flex-direction: column; gap: 10px; width: 100%; max-width: 100%; padding: 12px; font-size: 15px; } .guide { text-align: center; line-height: 1.4; white-space: normal; word-break: break-word; } .start-btn, .descent { width: 100%; max-width: 260px; } .score { width: 100%; text-align: center; } } .btn-disabled { opacity: 0.4; background: #f864b5; pointer-events: none; }