{"html":"

\n \n \n

\n \n

\n Story Mode\n \n\n \n \n

\n \n

\n Online\n \n\n \n \n

\n \n

\n Settings\n \n\n \n \n

\n \n

\n Quit Game\n \n

\n","css":".rdr-radio-option {\n /* Scoped Palette */\n --rdr-red: #d00000;\n --rdr-red-dark: #8a0000;\n --rdr-white: #f0f0f0;\n --rdr-grey: #8c8c8c;\n --rdr-black: #080808;\n\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n max-width: 22em; /* Converted to em */\n padding: 0.7em 1.1em; /* Converted to em */\n cursor: pointer;\n font-size: 18px; /* Base size for em scaling */\n transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n z-index: 1;\n}\n\n/* Hide Default Input */\n.rdr-radio-option input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* --- Background Strip (The \"Pause Menu\" Highlight) --- */\n.rdr-radio-option::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 90deg,\n rgba(208, 0, 0, 0.8),\n rgba(138, 0, 0, 0) 90%\n );\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: -1;\n /* Ragged Edge simulation */\n clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);\n border-left: 0.25em solid var(--rdr-white);\n}\n\n/* --- The Marker (Target Lock) --- */\n.rdr-radio-marker {\n position: relative;\n width: 1.5em; /* Scalable size */\n height: 1.5em;\n border: 0.12em solid var(--rdr-grey);\n border-radius: 50%;\n margin-right: 1em;\n transition: all 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(0, 0, 0, 0.3);\n box-sizing: border-box;\n}\n\n/* Rotating Lock Ring */\n.rdr-radio-marker::after {\n content: \"\";\n position: absolute;\n top: -0.4em;\n left: -0.4em;\n right: -0.4em;\n bottom: -0.4em;\n border: 0.12em dashed transparent;\n border-radius: 50%;\n transition: all 0.4s ease;\n}\n\n/* --- The X Mark (SVG) --- */\n.rdr-x-mark {\n width: 200%;\n height: 200%;\n position: absolute;\n pointer-events: none;\n z-index: 10;\n}\n\n.rdr-x-path {\n fill: none;\n stroke: var(--rdr-red);\n stroke-width: 8;\n stroke-linecap: round;\n stroke-dasharray: 60;\n stroke-dashoffset: 60;\n filter: drop-shadow(0 0 0.1em rgba(0, 0, 0, 0.5));\n opacity: 0.9;\n}\n\n/* --- Text Label --- */\n.rdr-label-text {\n color: var(--rdr-grey);\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.15em;\n font-size: 1.1em;\n transition: all 0.3s ease;\n position: relative;\n /* Vintage print texture */\n filter: contrast(1.2);\n}\n\n/* --- Hover Interactions --- */\n.rdr-radio-option:hover .rdr-radio-marker {\n border-color: var(--rdr-white);\n transform: scale(1.1);\n}\n\n.rdr-radio-option:hover .rdr-label-text {\n color: var(--rdr-white);\n transform: translateX(0.3em);\n}\n\n/* --- Checked State --- */\n\n/* 1. Row Highlight */\n.rdr-radio-option input:checked + .rdr-radio-marker + .rdr-label-text {\n color: var(--rdr-white);\n text-shadow: 0.1em 0.1em 0px rgba(0, 0, 0, 0.5);\n transform: translateX(0.6em);\n}\n\n.rdr-radio-option:has(input:checked)::before {\n transform: scaleX(1);\n}\n\n/* 2. Marker Activation */\n.rdr-radio-option input:checked + .rdr-radio-marker {\n border-color: var(--rdr-white);\n background: transparent;\n box-shadow: 0 0 0.8em rgba(255, 255, 255, 0.2);\n}\n\n/* 3. Lock Ring Animation */\n.rdr-radio-option input:checked + .rdr-radio-marker::after {\n border-color: rgba(255, 255, 255, 0.3);\n animation: rdr-lock-on 4s linear infinite;\n}\n\n/* 4. Draw the X */\n.rdr-radio-option input:checked + .rdr-radio-marker .rdr-x-path {\n animation: rdr-slash 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;\n}\n.rdr-radio-option input:checked + .rdr-radio-marker .rdr-x-path.delay {\n animation-delay: 0.1s;\n}\n\n/* 5. Particle Explosion (Pseudo-element on marker) */\n.rdr-radio-option input:checked + .rdr-radio-marker::before {\n content: \"\";\n position: absolute;\n width: 0.2em;\n height: 0.2em;\n border-radius: 50%;\n background: var(--rdr-red);\n z-index: -1;\n /* Box Shadow Particles - using ems for scaling */\n box-shadow:\n 0 -1em 0 var(--rdr-red),\n 1em -0.8em 0 var(--rdr-red),\n 1em 0 0 var(--rdr-red),\n -1em 0.5em 0 var(--rdr-red),\n -0.8em -0.8em 0 var(--rdr-red);\n animation: rdr-impact 0.4s ease-out forwards;\n}\n\n/* --- Focus Accessibility --- */\n.rdr-radio-option input:focus-visible + .rdr-radio-marker {\n outline: 0.12em solid var(--rdr-white);\n outline-offset: 0.25em;\n}\n\n/* --- Animations --- */\n\n@keyframes rdr-slash {\n to {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes rdr-lock-on {\n 0% {\n transform: rotate(0deg) scale(1);\n }\n 5% {\n transform: rotate(45deg) scale(0.9);\n }\n 10% {\n transform: rotate(90deg) scale(1);\n }\n 100% {\n transform: rotate(90deg) scale(1);\n }\n}\n\n@keyframes rdr-impact {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n box-shadow:\n 0 -2em 0 transparent,\n 2em -1.5em 0 transparent,\n 2em 0 0 transparent,\n -2em 1em 0 transparent,\n -1.5em -1.5em 0 transparent;\n }\n}\n"}

fast-snail-42

👁 实时预览

📝 源代码