Show sourcecode
The following files exists in this folder. Click to view.
style.css
322 lines ASCII Unix (LF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
background: #f0f2f5;
color: #1a1a2e;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.08);
padding: 2.5rem;
max-width: 600px;
width: 90%;
text-align: center;
}
h1 {
font-size: 1.6rem;
margin-bottom: 1.2rem;
color: #16213e;
}
h2 {
font-size: 1.2rem;
margin-bottom: 1rem;
color: #16213e;
}
p {
line-height: 1.6;
margin-bottom: 1rem;
color: #444;
}
/* Forms */
.form-group {
margin-bottom: 1.2rem;
text-align: left;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.3rem;
font-size: 0.9rem;
}
.form-group input,
.form-group select {
width: 100%;
padding: 0.6rem 0.8rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #4361ee;
}
.btn {
display: inline-block;
padding: 0.7rem 2rem;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.btn:active {
transform: scale(0.97);
}
.btn-primary {
background: #4361ee;
color: #fff;
}
.btn-primary:hover {
background: #3a56d4;
}
.btn-secondary {
background: #e0e0e0;
color: #333;
}
.btn-secondary:hover {
background: #d0d0d0;
}
/* Debug elements */
.debug-section {
margin-top: 1rem;
padding: 0.8rem;
border: 2px dashed #f59e0b;
border-radius: 8px;
background: #fffbeb;
}
.debug-section label {
color: #92400e;
}
.debug-skip {
position: fixed;
top: 12px;
right: 12px;
background: #f59e0b;
color: #000;
padding: 0.4rem 1rem;
border-radius: 6px;
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
z-index: 9999;
}
.debug-skip:hover {
background: #d97706;
}
/* Reaction test */
.reaction-screen {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
transition: background 0.15s;
flex-direction: column;
}
.reaction-screen.waiting {
background: #6b7280;
}
.reaction-screen.countdown {
background: #dc2626;
}
.reaction-screen.ready {
background: #16a34a;
}
.reaction-screen.result {
background: #2563eb;
}
.reaction-screen .message {
font-size: 2rem;
color: #fff;
font-weight: 700;
text-align: center;
padding: 1rem;
}
.reaction-screen .sub-message {
font-size: 1.1rem;
color: rgba(255,255,255,0.85);
margin-top: 0.5rem;
}
/* Maze */
.maze-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 1rem;
}
.maze-hud {
display: flex;
gap: 2rem;
margin-bottom: 1rem;
font-size: 1.1rem;
font-weight: 600;
}
.maze-hud span {
background: #e0e7ff;
padding: 0.4rem 1rem;
border-radius: 6px;
}
#maze-canvas {
border: 2px solid #1a1a2e;
border-radius: 4px;
background: #fff;
}
.maze-instructions {
margin-top: 1rem;
color: #666;
font-size: 0.9rem;
}
/* Simon Says */
.simon-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 1rem;
}
.simon-hud {
margin-bottom: 1.5rem;
font-size: 1.3rem;
font-weight: 700;
}
.simon-status {
margin-bottom: 1rem;
font-size: 1rem;
color: #555;
min-height: 1.5rem;
}
.simon-board {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 320px;
height: 320px;
}
.simon-btn {
border: none;
border-radius: 12px;
cursor: pointer;
transition: filter 0.15s, transform 0.1s;
opacity: 0.7;
}
.simon-btn:active {
transform: scale(0.95);
}
.simon-btn.lit {
opacity: 1;
filter: brightness(1.4);
transform: scale(1.05);
}
.simon-btn.disabled {
pointer-events: none;
}
.simon-btn-0 { background: #ef4444; }
.simon-btn-1 { background: #3b82f6; }
.simon-btn-2 { background: #eab308; }
.simon-btn-3 { background: #22c55e; }
/* Results page */
.results-summary {
text-align: left;
margin: 1.5rem 0;
}
.results-summary .stat {
display: flex;
justify-content: space-between;
padding: 0.6rem 0;
border-bottom: 1px solid #eee;
}
.results-summary .stat-label {
color: #666;
}
.results-summary .stat-value {
font-weight: 700;
color: #16213e;
}
/* Instruction overlay (shown before each test) */
.instruction-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
}
.instruction-overlay .container {
animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}