⏳ ready to roll ⚡

⏱️ roll once per 60s · counters persist locally

padding: 30px; box-shadow: 14px 14px 0 #000000; position: relative; z-index: 2; } /* big bold headline — like a bootlegger marquee */ h1 { font-size: 5rem; font-weight: 800; letter-spacing: 8px; text-transform: uppercase; color: #e0e0e0; text-align: center; border: 4px solid #3a3a3a; padding: 25px 15px; margin-bottom: 35px; background: #1d1d1d; box-shadow: 10px 10px 0 #000; word-break: break-word; font-family: 'Impact', 'Arial Black', 'Courier New', sans-serif; text-shadow: 3px 3px 0 #2a2a2a; } /* input area — raw square */ .input-area { border: 4px solid #333; padding: 25px; margin-bottom: 35px; background: #1a1a1a; box-shadow: 10px 10px 0 #000; display: flex; flex-wrap: wrap; gap: 15px; } .input-area input[type="text"] { flex: 3 1 250px; background: #0a0a0a; border: 3px solid #3a3a3a; padding: 18px 20px; font-size: 1.5rem; color: #b5ffb5; /* faint terminal green */ font-family: 'Courier New', Courier, monospace; font-weight: bold; outline: none; box-shadow: inset 4px 4px 0 #000; } .input-area input[type="text"]::placeholder { color: #4a4a4a; font-style: italic; letter-spacing: 1px; } .input-area button { flex: 1 1 auto; background: #222; border: 3px solid #3a3a3a; padding: 18px 30px; font-size: 1.8rem; font-weight: bold; color: #f0f0f0; cursor: pointer; font-family: 'Courier New', Courier, monospace; text-transform: uppercase; letter-spacing: 2px; box-shadow: 6px 6px 0 #000; transition: 0.05s linear; } .input-area button:hover { background: #2e2e2e; border-color: #5a5a5a; box-shadow: 2px 2px 0 #000; transform: translate(4px, 4px); } /* suggestion board — second tab look (square & raw) */ .suggestions-list { border: 4px solid #333; padding: 10px 20px 20px 20px; background: #151515; box-shadow: 10px 10px 0 #000; margin-bottom: 35px; } /* like a little tab header inside the board */ .suggestions-list::before { content: "⚡ SUGGESTION FORUM ⚡"; display: block; font-size: 2rem; font-weight: bold; letter-spacing: 3px; padding: 20px 0 15px 0; border-bottom: 4px solid #3a3a3a; margin-bottom: 15px; color: #b0ffb0; text-shadow: 2px 2px 0 #1f1f1f; font-family: 'Impact', 'Arial Black', sans-serif; } /* individual suggestion cards — square, heavy */ .suggestion-item { display: flex; align-items: center; justify-content: space-between; border: 3px solid #2a2a2a; background: #1e1e1e; padding: 18px 20px; margin: 15px 0; box-shadow: 6px 6px 0 #000; transition: 0.05s linear; } .suggestion-item:hover { border-color: #4f4f4f; box-shadow: 2px 2px 0 #000; transform: translate(2px, 2px); } .suggestion-text { flex: 1; font-size: 1.6rem; font-weight: 500; color: #dbdbdb; word-break: break-word; padding-right: 20px; font-family: 'Courier New', Courier, monospace; text-transform: none; letter-spacing: 0.5px; } .vote-area { display: flex; align-items: center; gap: 20px; flex-shrink: 0; } .vote-btn { width: 55px; height: 55px; background: #252525; border: 3px solid #3c3c3c; font-size: 2.8rem; font-weight: 900; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; box-shadow: 5px 5px 0 #000; transition: 0.02s linear; user-select: none; line-height: 1; } .vote-btn:hover { background: #3a3a3a; border-color: #6a6a6a; box-shadow: 2px 2px 0 #000; transform: translate(3px, 3px); } .vote-count { font-size: 2.4rem; font-weight: 800; min-width: 55px; text-align: center; color: #b3ffb3; /* dirty green for bootleg vibe */ text-shadow: 2px 2px 0 #121212; background: #0f0f0f; padding: 5px 0; border: 2px solid #3f3f3f; box-shadow: inset 2px 2px 0 #000; } /* view counter footer — raw, square, no roundness */ .footer { border: 4px solid #333; padding: 20px; background: #1a1a1a; text-align: center; font-size: 2rem; font-weight: bold; box-shadow: 10px 10px 0 #000; text-transform: uppercase; letter-spacing: 3px; color: #bcbcbc; } #viewCounter { color: #93f093; background: #0a0a0a; padding: 5px 20px; border: 3px solid #3c3c3c; margin-left: 15px; font-size: 2.2rem; box-shadow: inset 3px 3px 0 #000; } /* keep everything sharp & square */ button, input, div, h1, .vote-btn, .suggestion-item { border-radius: 0 !important; } /* extra glitch / bootlegger noise (overlay) */ .container::after { content: ""; position: absolute; top: 10px; left: 10px; right: -10px; bottom: -10px; background: repeating-linear-gradient(45deg, rgba(255, 200, 0, 0.02) 0px, rgba(255, 0, 0, 0.01) 4px, transparent 8px); pointer-events: none; z-index: -1; border: 2px solid #2b2b2b; }

SUGGESTION

font-weight: 400; text-transform: uppercase; letter-spacing: 3px; font-size: 1.2rem; margin-bottom: 2rem; color: #b7c2e2; border-left: 3px solid #cc3b3b; padding-left: 1rem; } .modal-box input { width: 100%; background: #171e2d; border: 1px solid #37415f; padding: 0.9rem 1rem; color: white; font-size: 1rem; outline: none; margin-bottom: 1rem; border-radius: 0; } .modal-box input:focus { border-color: #c53c3c; } .modal-box button { width: 100%; background: #1c2338; border: 1px solid #c53c3c; color: #f0d9d9; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; padding: 0.9rem; cursor: pointer; font-size: 0.85rem; transition: 0.1s; border-radius: 0; } .modal-box button:hover { background: #262f4a; border-color: #ff5a5a; color: white; } .skip-link { display: block; text-align: center; margin-top: 1rem; color: #8b97bb; cursor: pointer; font-size: 0.9rem; } .skip-link:hover { color: #f0f3fd; } /* Rest of your styles unchanged - copy from previous version */ .app { max-width: 780px; width: 100%; background: #0b0f18; border: 1px solid #2b3247; padding: 2rem 1.8rem; box-shadow: 0 20px 40px -15px black; display: none; } .tabs { display: flex; border-bottom: 1px solid #2b3247; margin-bottom: 1.8rem; } .tab { background: transparent; border: none; color: #8b97bb; font-size: 0.9rem; font-weight: 400; padding: 0.6rem 2rem; cursor: pointer; border-bottom: 2px solid transparent; letter-spacing: 1px; text-transform: uppercase; } .tab.active { color: #f0f3fd; border-bottom: 2px solid #d14747; } .user-header { display: flex; justify-content: space-between; align-items: center; background: #141a28; padding: 0.7rem 1.2rem; margin-bottom: 2rem; border: 1px solid #2e3650; font-size: 0.9rem; } .user-name { color: #dbe2ff; font-weight: 500; } .change-btn { background: none; border: 1px solid #49547c; color: #b1beec; padding: 0.2rem 1rem; cursor: pointer; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 0; } .ask-row { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 2rem; } .ask-row input { flex: 1; background: #121826; border: 1px solid #384160; padding: 1rem 1.2rem; color: white; font-size: 1rem; outline: none; border-radius: 0; } .ask-row input:focus { border-color: #c54242; } .nine-box { width: 85px; height: 85px; background: #0d101b; border: 2px solid #b63b3b; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.1s ease; flex-shrink: 0; } .nine-box:hover { background: #181f32; border-color: #ff5e5e; } .nine-box:active { transform: scale(0.96); } .nine-box .nine { font-size: 4rem; font-weight: 600; color: #d14949; font-family: 'Times New Roman', serif; line-height: 1; text-shadow: 0 2px 8px #631c1c; } .answer-panel { background: #0c101c; border: 1px solid #2f3753; padding: 1.5rem 2rem; margin: 1.5rem 0 1rem; min-height: 90px; font-size: 1.1rem; line-height: 1.5; color: #d2dcff; border-left: 4px solid #c94646; word-break: break-word; } .cooldown { color: #e69292; font-size: 0.85rem; text-align: right; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; } .feed-list { max-height: 380px; overflow-y: auto; border: 1px solid #262e48; background: #0a0e18; margin-top: 1rem; } .feed-item { padding: 1.2rem 1.4rem; border-bottom: 1px solid #1f263b; background: #101523; } .feed-item:last-child { border-bottom: none; } .feed-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: #7e8bb3; margin-bottom: 0.3rem; text-transform: uppercase; } .feed-name { color: #d2dcff; font-weight: 600; } .feed-question { color: white; margin-bottom: 0.3rem; } .feed-answer { color: #b7c7ff; font-style: italic; border-left: 2px solid #c44b4b; padding-left: 1rem; } .footer { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; border-top: 1px solid #242d45; padding-top: 1.2rem; font-size: 0.8rem; color: #657199; } .counter { border: 1px solid #3b4670; padding: 0.2rem 1rem; color: #b3c0f0; } .reset { background: none; border: none; color: #6575b0; text-decoration: underline; cursor: pointer; font-size: 0.7rem; }

Guest

⚡ ask the 9 box

background: #0e121c; border: 1px solid #2c354f; width: 90%; max-width: 360px; padding: 2rem 1.8rem; } .modal-box h2 { font-weight: 400; text-transform: uppercase; letter-spacing: 3px; font-size: 1.2rem; margin-bottom: 2rem; color: #b7c2e2; border-left: 3px solid #cc3b3b; padding-left: 1rem; } .modal-box input { width: 100%; background: #171e2d; border: 1px solid #37415f; padding: 0.9rem 1rem; color: white; font-size: 1rem; outline: none; margin-bottom: 1.8rem; border-radius: 0; } .modal-box input:focus { border-color: #c53c3c; } .modal-box button { width: 100%; background: #1c2338; border: 1px solid #c53c3c; color: #f0d9d9; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; padding: 0.9rem; cursor: pointer; font-size: 0.85rem; transition: 0.1s; border-radius: 0; } .modal-box button:hover { background: #262f4a; border-color: #ff5a5a; color: white; } .app { max-width: 780px; width: 100%; background: #0b0f18; border: 1px solid #2b3247; padding: 2rem 1.8rem; box-shadow: 0 20px 40px -15px black; } .tabs { display: flex; border-bottom: 1px solid #2b3247; margin-bottom: 1.8rem; } .tab { background: transparent; border: none; color: #8b97bb; font-size: 0.9rem; font-weight: 400; padding: 0.6rem 2rem; cursor: pointer; border-bottom: 2px solid transparent; letter-spacing: 1px; text-transform: uppercase; } .tab.active { color: #f0f3fd; border-bottom: 2px solid #d14747; } .user-header { display: flex; justify-content: space-between; align-items: center; background: #141a28; padding: 0.7rem 1.2rem; margin-bottom: 2rem; border: 1px solid #2e3650; font-size: 0.9rem; } .user-name { color: #dbe2ff; font-weight: 500; } .change-btn { background: none; border: 1px solid #49547c; color: #b1beec; padding: 0.2rem 1rem; cursor: pointer; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 0; } .ask-row { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 2rem; } .ask-row input { flex: 1; background: #121826; border: 1px solid #384160; padding: 1rem 1.2rem; color: white; font-size: 1rem; outline: none; border-radius: 0; } .ask-row input:focus { border-color: #c54242; } .nine-box { width: 85px; height: 85px; background: #0d101b; border: 2px solid #b63b3b; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.1s ease; flex-shrink: 0; } .nine-box:hover { background: #181f32; border-color: #ff5e5e; } .nine-box:active { transform: scale(0.96); } .nine-box .nine { font-size: 4rem; font-weight: 600; color: #d14949; font-family: 'Times New Roman', serif; line-height: 1; text-shadow: 0 2px 8px #631c1c; } .answer-panel { background: #0c101c; border: 1px solid #2f3753; padding: 1.5rem 2rem; margin: 1.5rem 0 1rem; min-height: 90px; font-size: 1.1rem; line-height: 1.5; color: #d2dcff; border-left: 4px solid #c94646; word-break: break-word; } .cooldown { color: #e69292; font-size: 0.85rem; text-align: right; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; } .feed-list { max-height: 380px; overflow-y: auto; border: 1px solid #262e48; background: #0a0e18; margin-top: 1rem; } .feed-item { padding: 1.2rem 1.4rem; border-bottom: 1px solid #1f263b; background: #101523; } .feed-item:last-child { border-bottom: none; } .feed-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: #7e8bb3; margin-bottom: 0.3rem; text-transform: uppercase; } .feed-name { color: #d2dcff; font-weight: 600; } .feed-question { color: white; margin-bottom: 0.3rem; } .feed-answer { color: #b7c7ff; font-style: italic; border-left: 2px solid #c44b4b; padding-left: 1rem; } .footer { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; border-top: 1px solid #242d45; padding-top: 1.2rem; font-size: 0.8rem; color: #657199; } .counter { border: 1px solid #3b4670; padding: 0.2rem 1rem; color: #b3c0f0; } .reset { background: none; border: none; color: #6575b0; text-decoration: underline; cursor: pointer; font-size: 0.7rem; } background: #0e121c; border: 1px solid #2c354f; width: 90%; max-width: 360px; padding: 2rem 1.8rem; } .modal-box h2 { font-weight: 400; text-transform: uppercase; letter-spacing: 3px; font-size: 1.2rem; margin-bottom: 2rem; color: #b7c2e2; border-left: 3px solid #cc3b3b; padding-left: 1rem; } .modal-box input { width: 100%; background: #171e2d; border: 1px solid #37415f; padding: 0.9rem 1rem; color: white; font-size: 1rem; outline: none; margin-bottom: 1.8rem; border-radius: 0; } .modal-box input:focus { border-color: #c53c3c; } .modal-box button { width: 100%; background: #1c2338; border: 1px solid #c53c3c; color: #f0d9d9; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; padding: 0.9rem; cursor: pointer; font-size: 0.85rem; transition: 0.1s; border-radius: 0; } .modal-box button:hover { background: #262f4a; border-color: #ff5a5a; color: white; } .app { max-width: 780px; width: 100%; background: #0b0f18; border: 1px solid #2b3247; padding: 2rem 1.8rem; box-shadow: 0 20px 40px -15px black; } .tabs { display: flex; border-bottom: 1px solid #2b3247; margin-bottom: 1.8rem; } .tab { background: transparent; border: none; color: #8b97bb; font-size: 0.9rem; font-weight: 400; padding: 0.6rem 2rem; cursor: pointer; border-bottom: 2px solid transparent; letter-spacing: 1px; text-transform: uppercase; } .tab.active { color: #f0f3fd; border-bottom: 2px solid #d14747; } .user-header { display: flex; justify-content: space-between; align-items: center; background: #141a28; padding: 0.7rem 1.2rem; margin-bottom: 2rem; border: 1px solid #2e3650; font-size: 0.9rem; } .user-name { color: #dbe2ff; font-weight: 500; } .change-btn { background: none; border: 1px solid #49547c; color: #b1beec; padding: 0.2rem 1rem; cursor: pointer; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 0; } .ask-row { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 2rem; } .ask-row input { flex: 1; background: #121826; border: 1px solid #384160; padding: 1rem 1.2rem; color: white; font-size: 1rem; outline: none; border-radius: 0; } .ask-row input:focus { border-color: #c54242; } .nine-box { width: 85px; height: 85px; background: #0d101b; border: 2px solid #b63b3b; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.1s ease; flex-shrink: 0; } .nine-box:hover { background: #181f32; border-color: #ff5e5e; } .nine-box:active { transform: scale(0.96); } .nine-box .nine { font-size: 4rem; font-weight: 600; color: #d14949; font-family: 'Times New Roman', serif; line-height: 1; text-shadow: 0 2px 8px #631c1c; } .answer-panel { background: #0c101c; border: 1px solid #2f3753; padding: 1.5rem 2rem; margin: 1.5rem 0 1rem; min-height: 90px; font-size: 1.1rem; line-height: 1.5; color: #d2dcff; border-left: 4px solid #c94646; word-break: break-word; } .cooldown { color: #e69292; font-size: 0.85rem; text-align: right; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; } .feed-list { max-height: 380px; overflow-y: auto; border: 1px solid #262e48; background: #0a0e18; margin-top: 1rem; } .feed-item { padding: 1.2rem 1.4rem; border-bottom: 1px solid #1f263b; background: #101523; } .feed-item:last-child { border-bottom: none; } .feed-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: #7e8bb3; margin-bottom: 0.3rem; text-transform: uppercase; } .feed-name { color: #d2dcff; font-weight: 600; } .feed-question { color: white; margin-bottom: 0.3rem; } .feed-answer { color: #b7c7ff; font-style: italic; border-left: 2px solid #c44b4b; padding-left: 1rem; } .footer { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; border-top: 1px solid #242d45; padding-top: 1.2rem; font-size: 0.8rem; color: #657199; } .counter { border: 1px solid #3b4670; padding: 0.2rem 1rem; color: #b3c0f0; } .reset { background: none; border: none; color: #6575b0; text-decoration: underline; cursor: pointer; font-size: 0.7rem; } .modal-box { background: #0e121c; border: 1px solid #2c354f; width: 90%; max-width: 360px; padding: 2rem 1.8rem; } .modal-box h2 { font-weight: 400; text-transform: uppercase; letter-spacing: 3px; font-size: 1.2rem; margin-bottom: 2rem; color: #b7c2e2; border-left: 3px solid #cc3b3b; padding-left: 1rem; } .modal-box input { width: 100%; background: #171e2d; border: 1px solid #37415f; padding: 0.9rem 1rem; color: white; font-size: 1rem; outline: none; margin-bottom: 1.8rem; border-radius: 0; } .modal-box input:focus { border-color: #c53c3c; } .modal-box button { width: 100%; background: #1c2338; border: 1px solid #c53c3c; color: #f0d9d9; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; padding: 0.9rem; cursor: pointer; font-size: 0.85rem; transition: 0.1s; border-radius: 0; } .modal-box button:hover { background: #262f4a; border-color: #ff5a5a; color: white; } /* main app container */ .app { max-width: 780px; width: 100%; background: #0b0f18; border: 1px solid #2b3247; padding: 2rem 1.8rem; box-shadow: 0 20px 40px -15px black; } /* tab bar */ .tabs { display: flex; border-bottom: 1px solid #2b3247; margin-bottom: 1.8rem; } .tab { background: transparent; border: none; color: #8b97bb; font-size: 0.9rem; font-weight: 400; padding: 0.6rem 2rem; cursor: pointer; border-bottom: 2px solid transparent; letter-spacing: 1px; text-transform: uppercase; } .tab.active { color: #f0f3fd; border-bottom: 2px solid #d14747; } /* user header */ .user-header { display: flex; justify-content: space-between; align-items: center; background: #141a28; padding: 0.7rem 1.2rem; margin-bottom: 2rem; border: 1px solid #2e3650; font-size: 0.9rem; } .user-name { color: #dbe2ff; font-weight: 500; } .change-btn { background: none; border: 1px solid #49547c; color: #b1beec; padding: 0.2rem 1rem; cursor: pointer; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 0; } /* ask row */ .ask-row { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 2rem; } .ask-row input { flex: 1; background: #121826; border: 1px solid #384160; padding: 1rem 1.2rem; color: white; font-size: 1rem; outline: none; border-radius: 0; } .ask-row input:focus { border-color: #c54242; } /* red 9 box */ .nine-box { width: 85px; height: 85px; background: #0d101b; border: 2px solid #b63b3b; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.1s ease; flex-shrink: 0; } .nine-box:hover { background: #181f32; border-color: #ff5e5e; } .nine-box:active { transform: scale(0.96); } .nine-box .nine { font-size: 4rem; font-weight: 600; color: #d14949; font-family: 'Times New Roman', serif; line-height: 1; text-shadow: 0 2px 8px #631c1c; } /* answer panel */ .answer-panel { background: #0c101c; border: 1px solid #2f3753; padding: 1.5rem 2rem; margin: 1.5rem 0 1rem; min-height: 90px; font-size: 1.1rem; line-height: 1.5; color: #d2dcff; border-left: 4px solid #c94646; word-break: break-word; } /* cooldown line */ .cooldown { color: #e69292; font-size: 0.85rem; text-align: right; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; } /* feed container */ .feed-list { max-height: 380px; overflow-y: auto; border: 1px solid #262e48; background: #0a0e18; margin-top: 1rem; } .feed-item { padding: 1.2rem 1.4rem; border-bottom: 1px solid #1f263b; background: #101523; } .feed-item:last-child { border-bottom: none; } .feed-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: #7e8bb3; margin-bottom: 0.3rem; text-transform: uppercase; } .feed-name { color: #d2dcff; font-weight: 600; } .feed-question { color: white; margin-bottom: 0.3rem; } .feed-answer { color: #b7c7ff; font-style: italic; border-left: 2px solid #c44b4b; padding-left: 1rem; } /* footer */ .footer { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; border-top: 1px solid #242d45; padding-top: 1.2rem; font-size: 0.8rem; color: #657199; } .counter { border: 1px solid #3b4670; padding: 0.2rem 1rem; color: #b3c0f0; } .reset { background: none; border: none; color: #6575b0; text-decoration: underline; cursor: pointer; font-size: 0.7rem; } position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 4, 8, 0.95); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.2s; } .modal-box { background: #11141e; border: 1px solid #3e455a; padding: 2.5rem 2rem; width: 90%; max-width: 380px; box-shadow: 0 30px 50px black; } .modal-box h2 { font-weight: 400; text-transform: uppercase; letter-spacing: 2px; font-size: 1.3rem; margin-bottom: 2rem; color: #b7bfd9; border-left: 3px solid #e13e3e; padding-left: 1rem; } .modal-box input { width: 100%; background: #1b1f2b; border: 1px solid #373e55; padding: 0.9rem 1rem; color: white; font-size: 1rem; outline: none; margin-bottom: 1.5rem; border-radius: 0; } .modal-box input:focus { border-color: #c54242; } .modal-box button { width: 100%; background: #1e2538; border: 1px solid #c54242; color: #f0d6d6; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; padding: 0.9rem; cursor: pointer; font-size: 0.9rem; transition: 0.15s; border-radius: 0; } .modal-box button:hover { background: #2c314b; border-color: #ff5a5a; color: white; } /* tabs */ .tab-bar { display: flex; gap: 0; border-bottom: 1px solid #292f40; margin-bottom: 2rem; } .tab { background: transparent; border: none; color: #8f9bb5; font-size: 1rem; font-weight: 400; padding: 0.7rem 2rem; cursor: pointer; border-bottom: 2px solid transparent; letter-spacing: 0.5px; text-transform: uppercase; } .tab.active { color: #f0f2f8; border-bottom: 2px solid #d34c4c; } /* name header */ .user-header { display: flex; justify-content: space-between; align-items: center; background: #181d2b; padding: 0.8rem 1.2rem; margin-bottom: 2rem; border: 1px solid #2d344a; font-size: 0.95rem; } .user-name { color: #dde2ff; font-weight: 500; } .change-name-btn { background: none; border: 1px solid #4e577a; color: #b2bfee; padding: 0.3rem 1.2rem; cursor: pointer; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 0; } /* question row */ .ask-row { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 2rem; } .ask-row input { flex: 1; background: #121623; border: 1px solid #353e5c; padding: 1rem 1.2rem; color: white; font-size: 1rem; outline: none; border-radius: 0; } .ask-row input:focus { border-color: #c03e3e; } .nine-box { width: 85px; height: 85px; background: #0f121c; border: 2px solid #b13b3b; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.1s ease; flex-shrink: 0; } .nine-box:hover { background: #181e30; border-color: #ff6767; } .nine-box:active { transform: scale(0.96); } .nine-box .nine { font-size: 4.2rem; font-weight: 600; color: #d14949; font-family: 'Times New Roman', serif; line-height: 1; text-shadow: 0 2px 8px #6b1f1f; } /* answer panel */ .answer-panel { background: #0e121d; border: 1px solid #2f3651; padding: 1.5rem 2rem; margin: 1.8rem 0 2.5rem; min-height: 100px; font-size: 1.15rem; line-height: 1.6; color: #d3dcf5; border-left: 4px solid #c94646; word-break: break-word; } /* feed list */ .feed-container { max-height: 400px; overflow-y: auto; border: 1px solid #242b40; background: #0c0f18; margin-top: 1rem; } .feed-item { padding: 1.2rem 1.4rem; border-bottom: 1px solid #1f2538; background: #111624; } .feed-item:last-child { border-bottom: none; } .feed-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #7f8cb0; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.3px; } .feed-name { color: #d1daff; font-weight: 600; } .feed-question { color: white; font-weight: 400; margin-bottom: 0.3rem; } .feed-answer { color: #bbcbff; font-style: italic; border-left: 2px solid #c44b4b; padding-left: 1rem; } /* cooldown message */ .cooldown-msg { color: #f2a3a3; font-size: 0.9rem; margin-top: 0.5rem; text-align: right; text-transform: uppercase; letter-spacing: 1px; } /* visitor counter */ .footer-stats { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; border-top: 1px solid #242b40; padding-top: 1.2rem; font-size: 0.85rem; color: #6d789b; } .counter-num { border: 1px solid #3b4363; padding: 0.2rem 1rem; color: #b7c2ee; } .reset-counter { background: none; border: none; color: #6a75a5; text-decoration: underline; cursor: pointer; font-size: 0.75rem; } display: flex; gap: 0.5rem; margin-bottom: 1.8rem; border-bottom: 1px solid #2b3045; padding-bottom: 0.5rem; } .tab-btn { background: transparent; border: none; color: #7e89b0; font-size: 1.1rem; font-weight: 500; padding: 0.4rem 1.2rem; border-radius: 2rem; cursor: pointer; transition: all 0.2s; } .tab-btn.active { background: #2d344a; color: white; } /* name section */ .name-section { background: #1c212f; border-radius: 3rem; padding: 0.7rem 1.2rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.95rem; border: 1px solid #353e58; } .name-display { display: flex; align-items: center; gap: 0.5rem; } .change-name { background: #2f3a5a; border: none; color: #b3c2ff; padding: 0.2rem 0.8rem; border-radius: 2rem; font-size: 0.75rem; cursor: pointer; } .name-input { background: #0f121b; border: 1px solid #3d4765; border-radius: 3rem; padding: 0.5rem 1rem; color: white; font-size: 0.9rem; width: 180px; } .save-name { background: #4b5c9e; border: none; color: white; padding: 0.4rem 1rem; border-radius: 3rem; font-weight: 500; cursor: pointer; margin-left: 0.5rem; } /* question area */ .question-area { margin: 1.5rem 0 1rem; display: flex; gap: 0.8rem; align-items: center; } .question-input { flex: 1; background: #1a1f30; border: 1px solid #38405f; border-radius: 3rem; padding: 0.9rem 1.5rem; font-size: 1rem; color: white; outline: none; } .question-input:focus { border-color: #7e8bb4; } /* black 9 box */ .black-box { width: 80px; height: 80px; background: #0a0c14; border-radius: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -5px black, inset 0 -3px 0 #2f354a; border: 1px solid #4b547a; cursor: pointer; transition: 0.1s ease; flex-shrink: 0; } .black-box:hover { background: #121624; border-color: #8f9ed4; transform: scale(1.02); } .black-box:active { transform: scale(0.97); } .black-box .nine { font-size: 3.5rem; font-weight: 700; color: #e0e5ff; text-shadow: 0 2px 5px #30386b; font-family: 'Times New Roman', serif; line-height: 1; } /* answer display */ .answer-display { background: #1a1f2d; border-radius: 2rem; padding: 1.2rem 1.5rem; margin: 1rem 0 2rem; border-left: 4px solid #7d8ed1; font-size: 1.1rem; line-height: 1.5; color: #e5eafe; min-height: 5rem; word-break: break-word; } /* feed tab */ .feed-list { max-height: 380px; overflow-y: auto; padding-right: 0.5rem; margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.8rem; } .feed-item { background: #1e2436; border-radius: 1.5rem; padding: 0.9rem 1.2rem; border: 1px solid #303a57; } .feed-header { display: flex; justify-content: space-between; margin-bottom: 0.4rem; font-size: 0.85rem; color: #a6b4dc; } .feed-name { font-weight: 600; color: #ccd9ff; } .feed-time { font-family: monospace; } .feed-question { font-weight: 500; margin-bottom: 0.3rem; color: white; } .feed-answer { color: #b1c6ff; font-style: italic; border-left: 2px solid #4d5f9e; padding-left: 0.7rem; } /* counter and footer */ .site-counter { margin-top: 2rem; font-size: 0.85rem; color: #5f6b99; display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #2d334f; padding-top: 1.2rem; } .counter-number { background: #232a41; padding: 0.2rem 1rem; border-radius: 30px; color: #cbd5ff; font-weight: 600; } .btn-reset { background: none; border: none; color: #5f6fa3; text-decoration: underline dotted; cursor: pointer; font-size: 0.8rem; } .small-note { color: #3f4870; font-size: 0.7rem; text-align: center; margin-top: 0.5rem; }

🤐 Ask the 9 box anything

👥 visitors 0

h1 { font-size: 2.2rem; font-weight: 500; letter-spacing: -0.02em; text-align: center; color: rgba(255, 255, 255, 0.9); margin-bottom: 0.25rem; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .sub { text-align: center; color: #a9b4d4; margin-bottom: 2rem; font-size: 0.95rem; font-weight: 400; border-bottom: 1px dashed rgba(255, 255, 255, 0.15); padding-bottom: 1rem; } /* the 9 box */ .nine-box { width: 220px; height: 220px; background: #121520; border-radius: 3.5rem; margin: 1.5rem auto 2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 35px -8px black, inset 0 -5px 10px rgba(0,0,0,0.6), inset 0 5px 15px rgba(255,255,255,0.1); border: 1px solid rgba(255, 215, 100, 0.3); transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1), box-shadow 0.2s, background 0.2s; cursor: pointer; user-select: none; } .nine-box:hover { transform: scale(1.02); box-shadow: 0 25px 45px -8px #000, 0 0 0 2px rgba(255, 215, 100, 0.4); background: #1b1f30; } .nine-box:active { transform: scale(0.98); } .nine-box.disabled { opacity: 0.45; filter: grayscale(0.6); pointer-events: none; box-shadow: 0 10px 20px -5px black; } .nine-box .nine { font-size: 8rem; font-weight: 700; color: #ffd964; text-shadow: 0 5px 15px #b27700, 0 -2px 5px #fff6d0; transform: rotate(-2deg); font-family: 'Times New Roman', serif; } .answer-area { background: rgba(10, 12, 22, 0.7); border-radius: 3rem; padding: 1.5rem 2rem; margin: 2rem 0 1.5rem; border-left: 4px solid #ffd964; min-height: 100px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1.6; color: #f0eef7; text-align: center; box-shadow: inset 0 0 15px rgba(0,0,0,0.6); word-break: break-word; } .status-message { color: #b1c2e0; font-size: 1rem; margin: 1rem 0 0; padding: 0.75rem; background: rgba(0, 0, 0, 0.25); border-radius: 3rem; text-align: center; font-weight: 400; border: 1px solid rgba(255,255,240,0.05); } .site-counter { margin-top: 2.5rem; font-size: 0.9rem; color: #7b89b3; display: flex; justify-content: center; align-items: center; gap: 0.5rem; border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 1.5rem; } .counter-number { background: #1e2338; padding: 0.25rem 0.9rem; border-radius: 40px; font-weight: 600; color: #ffd964; letter-spacing: 1px; border: 1px solid rgba(255, 215, 100, 0.3); } .btn-reset { background: none; border: none; color: #4b5a87; font-size: 0.8rem; text-decoration: underline dotted; cursor: pointer; margin-left: 0.75rem; transition: color 0.2s; } .btn-reset:hover { color: #a9b4d4; } footer { font-size: 0.8rem; text-align: center; color: #49557e; margin-top: 1rem; }

⚡ 9 BOX ⚡

click the 9 · one wish per day

🤐 ask me anything

✨ click the 9 and get a fortune

👁️ visitors 0

SUGGESTION

enter your name

enter your name

enter your name

enter your name

ENTER YOUR NAME

⚡ 9 BOX ⚡