.hero-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.hero-modal {
position: relative;
max-width: 90vw;
max-height: 90vh;
background: #23244a;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
padding: 32px;
display: flex;
flex-direction: column;
color: #fff;
width: 800px;
}
.hero-modal-close {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-size: 18px;
cursor: pointer;
z-index: 1001;
transition: background-color 0.2s;
}
.hero-modal-close:hover {
background: rgba(0, 0, 0, 0.9);
}
.hero-modal-title {
margin: 0 0 20px 0;
font-size: 22px;
color: #a7a7ff;
font-weight: 700;
text-align: left;
}
.hero-modal-pre {
background: #1a1b2e;
color: #e1e1e6;
border-radius: 8px;
padding: 20px;
margin: 0;
flex-grow: 1;
overflow: auto;
font-family: 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
white-space: pre;
text-align: left;
tab-size: 2;
font-size: 14px;
line-height: 1.6;
border: 1px solid rgba(99, 102, 241, 0.3);
max-width: 100%;
display: block;
unicode-bidi: embed;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Pixel Art Buttons */
.pixel-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 10px;
}
.pixel-button {
position: relative;
padding: 12px 30px;
font-family: 'Press Start 2P', 'Courier New', monospace;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
border: none;
cursor: pointer;
outline: none;
background: #2b2b2b;
box-shadow:
4px 0 0 0 #000,
0 4px 0 0 #000,
4px 4px 0 0 #000,
4px 0 0 0 #000 inset,
0 4px 0 0 #000 inset;
transition: all 0.15s ease;
transform: translate(0, 0);
overflow: hidden;
width: 140px;
min-width: 140px;
max-width: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.pixel-button-claude {
background: #9a6aff;
text-shadow: 2px 2px 0 #6c3cd2;
}
.pixel-button-cursor {
background: #00c1ff;
text-shadow: 2px 2px 0 #0077b3;
}
.pixel-button-warp {
background: linear-gradient(90deg, #ff00cc 0%, #00eaff 100%);
text-shadow: 2px 2px 0 #23244a;
}
.pixel-button:hover {
transform: translate(-2px, -2px);
box-shadow:
6px 2px 0 0 #000,
2px 6px 0 0 #000,
6px 6px 0 0 #000,
6px 2px 0 0 #000 inset,
2px 6px 0 0 #000 inset;
}
.pixel-button:active {
transform: translate(2px, 2px);
box-shadow:
2px -2px 0 0 #000,
-2px 2px 0 0 #000,
2px 2px 0 0 #000,
2px -2px 0 0 #000 inset,
-2px 2px 0 0 #000 inset;
}
.pixel-button-text {
position: relative;
z-index: 2;
font-weight: bold;
}
.pixel-button-shine {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%);
opacity: 0.5;
transition: opacity 0.3s ease;
}
.pixel-button:hover .pixel-button-shine {
opacity: 0.8;
}
/* Prism.js overrides */
.hero-modal-pre {
background: #1e1e1e !important;
border-radius: 8px !important;
margin: 0 !important;
padding: 20px !important;
}
.hero-modal-pre code {
background: transparent !important;
color: #e1e1e6 !important;
font-family: 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
font-size: 14px !important;
line-height: 1.6 !important;
text-shadow: none !important;
white-space: pre !important;
}
/* Line numbers */
.line-numbers .line-numbers-rows {
border-right: 1px solid #2d2d2d;
padding-right: 1em;
}
.line-numbers-rows > span:before {
color: #6c7086;
}
/* JSON syntax highlighting */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #6a9955;
}
.token.punctuation {
color: #d4d4d4;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #9cdcfe;
}
.token.boolean,
.token.number {
color: #b5cea8;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #ce9178;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #d4d4d4;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #569cd6;
}
.token.function,
.token.class-name {
color: #dcdcaa;
}
.token.regex,
.token.important,
.token.variable {
color: #d16969;
}
.hero-modal-copy {
background: #3b82f6;
color: white;
border: none;
border-radius: 6px;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
font-weight: 600;
font-size: 16px;
align-self: flex-end;
transition: background-color 0.2s;
}
.hero-modal-copy:hover {
background: #2563eb;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
.warp-modal-note {
font-size: 13px;
color: #a7a7ffcc;
margin: 12px 0 8px 0;
text-align: left;
}
.how-to-play-container {
display: flex;
justify-content: center;
margin: 12px 0;
}
.how-to-play-button {
background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
color: white;
font-weight: 700;
font-size: 1.25rem;
padding: 0.75rem 2.5rem;
border-radius: 9999px;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
text-decoration: none;
transition: background 0.2s;
letter-spacing: 0.02em;
}
.how-to-play-button:hover {
background: linear-gradient(90deg, #4f46e5 0%, #4338ca 100%);
}
.audio-section {
width: 100%;
margin: 12px 0 24px 0;
}
