1525 lines
59 KiB
CSS
1525 lines
59 KiB
CSS
:root {
|
|
--keyboard-space: 30vh; /* fallback - will be calculated dynamically */
|
|
--page-padding: 0rem;
|
|
--max-container-width: 720px;
|
|
|
|
/* Calculated keyboard height - all values proportional to key-width for consistency */
|
|
--key-width: clamp(1.7rem, 5.5vw, 2.1rem);
|
|
--key-height: calc(var(--key-width) * 1.4);
|
|
--keyboard-gap: calc(var(--key-width) * 0.2); /* gap between rows, proportional to key size */
|
|
--keyboard-padding: calc(var(--key-width) * 0.4); /* keyboard padding, proportional to key size */
|
|
--handle-height: calc(var(--key-width) * 0.8); /* handle height, proportional to key size */
|
|
--handle-padding: calc(var(--key-width) * 0.2); /* handle padding, proportional to key size */
|
|
--keyboard-border: 2px; /* fixed border */
|
|
--keyboard-buffer: calc(var(--key-width) * 0.3); /* bottom buffer, proportional to key size */
|
|
|
|
--keyboard-height: calc(
|
|
(var(--key-height) * 4) + /* 4 rows of keys */
|
|
(var(--keyboard-gap) * 3) + /* 3 gaps between rows */
|
|
(var(--keyboard-padding) * 2) + /* keyboard padding top/bottom */
|
|
var(--keyboard-border) + /* keyboard border-top */
|
|
);
|
|
|
|
/* Crossword color palette - lighter, more paper-like */
|
|
--paper-bg: #f9f7f3;
|
|
--paper-light: #fcfaf8;
|
|
--paper-dark: #e6e2db;
|
|
--ink-dark: #1a1815;
|
|
--ink-light: #3a3530;
|
|
--wall-dark: #2a2520;
|
|
--wall-light: #1a1815;
|
|
--highlight-current: #fffbee;
|
|
--highlight-mode: #ecf8fb;
|
|
--accent-wall: #d4696b;
|
|
}
|
|
|
|
html, body { -webkit-text-size-adjust: 100%; }
|
|
body {
|
|
font-family: 'Segoe UI', 'Helvetica Neue', system-ui, Roboto, Arial;
|
|
margin: 0;
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
|
|
radial-gradient(ellipse 900px 700px at 25% 35%, rgba(0,0,0,.3) 0%, transparent 45%),
|
|
radial-gradient(ellipse 700px 600px at 75% 65%, rgba(255,255,255,.02) 0%, transparent 50%),
|
|
linear-gradient(135deg, #0a0805 0%, #0f0c09 100%);
|
|
color: var(--ink-dark);
|
|
-webkit-font-smoothing: antialiased;
|
|
font-size: 100%;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
padding: var(--page-padding);
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* On mobile devices, expand main to fill more space when keyboard is collapsed */
|
|
@media (max-width: 900px) {
|
|
main {
|
|
min-height: calc(100vh - var(--keyboard-space));
|
|
}
|
|
}
|
|
.container {
|
|
width: fit-content; /* Size exactly to content */
|
|
max-width: 100%; /* But don't exceed viewport */
|
|
}
|
|
|
|
#grid-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
justify-content: center; /* Center small grids */
|
|
}
|
|
crossword-grid { display: block; margin: 0 auto; }
|
|
mobile-keyboard { display: block; }
|
|
h2, h3 {
|
|
margin: 0.5rem 0;
|
|
color: #f5f1ed;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
crossword-grid { display: block; margin: 0 auto; }
|
|
|
|
|
|
.grid-container {
|
|
display: inline-block;
|
|
gap: 0;
|
|
overflow: visible;
|
|
/* padding only top and bottom for better centering */
|
|
padding-bottom: 1rem;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
grid-template-columns: repeat(var(--cols), var(--cell-size));
|
|
border: none;
|
|
}
|
|
|
|
/* Grid glow animation removed - now using solution letter glow */
|
|
|
|
.cell {
|
|
width: var(--cell-size, 4rem);
|
|
height: var(--cell-size, 4rem);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.025) 4px, rgba(0,0,0,.025) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.06) 3px, rgba(255,255,255,.06) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.04) 4px, rgba(255,255,255,.04) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.05) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.02) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(0,0,0,.015) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 900px 700px at 25% 35%, rgba(255,255,255,.35) 0%, transparent 45%),
|
|
radial-gradient(ellipse 700px 600px at 75% 65%, rgba(0,0,0,.03) 0%, transparent 50%),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.025) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.025) 0%, transparent 70%),
|
|
linear-gradient(135deg, #fefdfb 0%, #f9f7f3 100%);
|
|
color: var(--ink-dark);
|
|
font-weight: 700;
|
|
font-size: 1.05rem;
|
|
user-select: none;
|
|
touch-action: manipulation;
|
|
border: 1px solid #c0bbb5;
|
|
box-shadow:
|
|
inset 0 1px 2px rgba(255,255,255,0.9),
|
|
inset 0 -0.5px 1px rgba(0,0,0,0.03),
|
|
0 0.5px 1px rgba(0,0,0,0.05),
|
|
inset -1px -1px 2px rgba(0,0,0,0.015),
|
|
inset 1px 1px 2px rgba(255,255,255,0.5);
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.cell:active {
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), inset 0 0 4px rgba(0,0,0,0.03);
|
|
}
|
|
|
|
.cell.wall {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.025) 3px, rgba(0,0,0,.025) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.02) 4px, rgba(0,0,0,.02) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.025) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.035) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.02) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(255,255,255,.015) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(0,0,0,.025) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(0,0,0,.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.03) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.03) 0%, transparent 70%),
|
|
linear-gradient(135deg, #3a3530 0%, #2a2520 100%);
|
|
color: transparent;
|
|
border-color: var(--wall-dark);
|
|
box-shadow:
|
|
inset 0 1px 2px rgba(255,255,255,0.1),
|
|
0 0.5px 1px rgba(0,0,0,0.2),
|
|
inset -1px -1px 2px rgba(0,0,0,0.3),
|
|
inset 1px 1px 2px rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.cell.wall .cell-letter {
|
|
font-size: 0;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.cell.wall.selected {
|
|
border-color: var(--accent-wall);
|
|
box-shadow: inset 0 1px 2px rgba(255,255,255,0.1), inset 0 0 0 1px var(--accent-wall), 0 0 6px rgba(212,105,107,0.3);
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
|
|
linear-gradient(135deg, #3a3530 0%, #2a2520 100%);
|
|
}
|
|
|
|
.cell.wall.mode-highlighted {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
|
|
linear-gradient(135deg, #3a3530 0%, #2a2520 100%);
|
|
}
|
|
|
|
/* Clue number styling - only in grid cells */
|
|
.cell .clue-number {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
font-size: 0.55rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: #000000 !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cell-letter {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: contrast(1.05);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.solution-index {
|
|
position: absolute;
|
|
bottom: 1px;
|
|
right: 2px;
|
|
font-size: 0.5rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: #000000 !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.solution-circle {
|
|
position: absolute;
|
|
width: calc(var(--cell-size) * 0.75);
|
|
height: calc(var(--cell-size) * 0.75);
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(calc(-50% + var(--cell-size) * 0.0625), calc(-50% + var(--cell-size) * 0.0625));
|
|
border: 1.5px solid rgba(26, 24, 21, 0.7);
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
/* Hide bottom-right quarter with clip-path for 270 degree arc */
|
|
clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%);
|
|
}
|
|
|
|
.solution-word-grid .solution-circle {
|
|
display: block;
|
|
}
|
|
|
|
.solution-word-grid {
|
|
max-width: 100%;
|
|
width: fit-content; /* Only take the space needed */
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.grid .cell .solution-circle {
|
|
display: block;
|
|
}
|
|
|
|
.cell.mode-highlighted {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,180,200,.15) 3px, rgba(100,180,200,.15) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,180,200,.1) 4px, rgba(100,180,200,.1) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,180,200,.08) 3px, rgba(100,180,200,.08) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,180,200,.05) 4px, rgba(100,180,200,.05) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(100,180,200,.07) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(100,180,200,.09) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(100,180,200,.04) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(100,180,200,.02) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.04) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.3) 0%, transparent 40%),
|
|
radial-gradient(circle at 0% 0%, rgba(100,180,200,.02) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(100,180,200,.02) 0%, transparent 70%),
|
|
linear-gradient(135deg, #f0fafb 0%, #e8f4f8 100%);
|
|
box-shadow:
|
|
inset 0 1px 2px rgba(255,255,255,0.9),
|
|
inset 0 0 0 1px #c8e6f0,
|
|
0 0.5px 1px rgba(0,0,0,0.05),
|
|
inset -1px -1px 2px rgba(100,180,200,0.08),
|
|
inset 1px 1px 2px rgba(255,255,255,0.4);
|
|
border-color: #a8d4e8;
|
|
}
|
|
|
|
/* Solved cells - green background and not editable */
|
|
@keyframes cell-bounce {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
25% {
|
|
transform: scale(1.15);
|
|
}
|
|
50% {
|
|
transform: scale(1.25);
|
|
}
|
|
75% {
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
|
|
.cell.solved {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,200,100,.1) 3px, rgba(100,200,100,.1) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,200,100,.08) 4px, rgba(100,200,100,.08) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,200,100,.06) 3px, rgba(100,200,100,.06) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,200,100,.04) 4px, rgba(100,200,100,.04) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(100,200,100,.06) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(100,200,100,.07) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(100,200,100,.03) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(100,200,100,.015) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.2) 0%, transparent 40%),
|
|
radial-gradient(circle at 0% 0%, rgba(100,200,100,.015) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(100,200,100,.015) 0%, transparent 70%),
|
|
linear-gradient(135deg, #d4f4d4 0%, #c8ead4 100%);
|
|
box-shadow:
|
|
inset 0 1px 2px rgba(255,255,255,0.8),
|
|
inset 0 0 0 1px #a8d4a8,
|
|
0 0.5px 1px rgba(0,0,0,0.05),
|
|
inset -1px -1px 2px rgba(100,200,100,0.08),
|
|
inset 1px 1px 2px rgba(255,255,255,0.3);
|
|
}
|
|
|
|
@keyframes cell-bounce {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
25% {
|
|
transform: scale(1.15);
|
|
}
|
|
50% {
|
|
transform: scale(1.25);
|
|
}
|
|
75% {
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cell.selected {
|
|
outline: none;
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,200,0,.15) 3px, rgba(255,200,0,.15) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,200,0,.1) 4px, rgba(255,200,0,.1) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,200,0,.08) 3px, rgba(255,200,0,.08) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,200,0,.05) 4px, rgba(255,200,0,.05) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,200,0,.07) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(255,200,0,.09) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,200,0,.04) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(255,200,0,.02) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.04) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.4) 0%, transparent 40%),
|
|
radial-gradient(circle at 0% 0%, rgba(255,200,0,.02) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(255,200,0,.02) 0%, transparent 70%),
|
|
linear-gradient(135deg, #fffef9 0%, #fff8e6 100%);
|
|
border-color: var(--ink-dark);
|
|
box-shadow:
|
|
inset 0 1px 2px rgba(255,255,255,0.9),
|
|
inset 0 0 0 1.5px #ffc107,
|
|
0 0 8px rgba(255,193,7,0.25),
|
|
inset -1px -1px 2px rgba(255,200,0,0.1),
|
|
inset 1px 1px 2px rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.cell.selected.mode-highlighted {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(200,150,0,.15) 3px, rgba(200,150,0,.15) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(200,150,0,.1) 4px, rgba(200,150,0,.1) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(200,150,0,.08) 3px, rgba(200,150,0,.08) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(200,150,0,.05) 4px, rgba(200,150,0,.05) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(200,150,0,.07) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(200,150,0,.09) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(200,150,0,.04) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(200,150,0,.02) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.04) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.4) 0%, transparent 40%),
|
|
radial-gradient(circle at 0% 0%, rgba(200,150,0,.02) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(200,150,0,.02) 0%, transparent 70%),
|
|
linear-gradient(135deg, #fffaf0 0%, #fff5d6 100%);
|
|
box-shadow:
|
|
inset 0 1px 2px rgba(255,255,255,0.9),
|
|
inset 0 0 0 1.5px #ffc107,
|
|
0 0 8px rgba(255,193,7,0.25),
|
|
inset -1px -1px 2px rgba(200,150,0,0.1),
|
|
inset 1px 1px 2px rgba(255,255,255,0.5);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.cell { font-size: 1.05rem; }
|
|
}
|
|
|
|
/* ========= mobile-keyboard (light DOM) ========= */
|
|
mobile-keyboard {
|
|
display: none; /* Hidden by default (desktop) */
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 2000;
|
|
font-size: clamp(0.95rem, 2.4vw, 1.15rem);
|
|
--key-width: clamp(1.7rem, 5.5vw, 2.1rem);
|
|
--key-height: calc(var(--key-width) * 1.4);
|
|
--stagger-factor: 0.4;
|
|
--stagger-factor-deep: 0.8;
|
|
--up-arrow-offset: calc(0 - var(--key-width) * var(--stagger-factor-deep));
|
|
}
|
|
|
|
/* Show keyboard only on mobile devices */
|
|
@media (max-width: 900px) {
|
|
mobile-keyboard {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
mobile-keyboard .keyboard-container {
|
|
position: relative;
|
|
transition: transform 0.3s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
/* Hide keyboard wrapper when collapsed */
|
|
mobile-keyboard[collapsed] .keyboard-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
mobile-keyboard .keyboard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--keyboard-gap);
|
|
padding: var(--keyboard-padding);
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
|
|
radial-gradient(ellipse 900px 700px at 25% 35%, rgba(0,0,0,.3) 0%, transparent 45%),
|
|
radial-gradient(ellipse 700px 600px at 75% 65%, rgba(255,255,255,.02) 0%, transparent 50%),
|
|
linear-gradient(135deg, #0a0805 0%, #0f0c09 100%);
|
|
border-top: 2px solid #3a3530;
|
|
box-shadow: 0 -0.6rem 1.4rem rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
|
|
margin: 0 auto;
|
|
max-width: calc(var(--key-width) * 10 + 5.25rem);
|
|
align-items: left;
|
|
}
|
|
|
|
mobile-keyboard .row {
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
align-items: left;
|
|
}
|
|
|
|
mobile-keyboard .row .keys { transform: none; }
|
|
mobile-keyboard .row.stagger .keys {
|
|
transform: translateX(calc(var(--key-width) * var(--stagger-factor)));
|
|
}
|
|
mobile-keyboard .row.stagger-deep .keys {
|
|
transform: translateX(calc(var(--key-width) * var(--stagger-factor-deep)));
|
|
}
|
|
|
|
mobile-keyboard .row .keys {
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
mobile-keyboard .row .arrows {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: var(--key-width);
|
|
gap: 0.35rem;
|
|
align-items: left;
|
|
}
|
|
|
|
mobile-keyboard button {
|
|
width: var(--key-width);
|
|
height: var(--key-height);
|
|
padding: 0;
|
|
border-radius: 0.5rem;
|
|
border: none;
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.04) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.015) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(0,0,0,.01) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.35) 0%, transparent 40%),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
linear-gradient(180deg, #fffef9 0%, #f5f1ed 100%);
|
|
font-family: inherit;
|
|
font-weight: 600;
|
|
font-size: clamp(1rem, 2.4vw, 1.25rem);
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
color: var(--ink-dark);
|
|
box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 3px rgba(0,0,0,0.2);
|
|
cursor: pointer;
|
|
transition: all 0.1s ease;
|
|
user-select: none;
|
|
transform-origin: center;
|
|
}
|
|
|
|
mobile-keyboard button:active {
|
|
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.2);
|
|
transform: translateY(2px) rotateZ(-1deg);
|
|
}
|
|
|
|
mobile-keyboard button:hover {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.025) 3px, rgba(0,0,0,.025) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.018) 4px, rgba(0,0,0,.018) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.06) 3px, rgba(255,255,255,.06) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.04) 4px, rgba(255,255,255,.04) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.025) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.05) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.02) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(0,0,0,.015) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.04) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.45) 0%, transparent 40%),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
linear-gradient(180deg, #fffbf5 0%, #f8f4ef 100%);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
mobile-keyboard button.backspace {
|
|
width: calc(var(--key-width) * 1.3);
|
|
}
|
|
|
|
mobile-keyboard button[aria-pressed="true"] {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.02) 4px, rgba(0,0,0,.02) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,200,0,.12) 3px, rgba(255,200,0,.12) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,200,0,.08) 4px, rgba(255,200,0,.08) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.025) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(255,200,0,.08) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.02) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(255,200,0,.05) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(255,200,0,.06) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.3) 0%, transparent 40%),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
linear-gradient(180deg, #fffef5 0%, #fffbf0 100%);
|
|
box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 0 0 2px #ffc107, inset 0 1px 0 rgba(255,255,255,0.8);
|
|
}
|
|
|
|
mobile-keyboard .nav {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.05) 4px, rgba(0,0,0,.05) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.04) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.06) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.03) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(255,255,255,.02) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(0,0,0,.04) 0.8px, transparent 0.8px),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.03) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.03) 0%, transparent 70%),
|
|
linear-gradient(180deg, #5a8ca4 0%, #4a7c94 100%);
|
|
color: #f0f8ff;
|
|
width: var(--key-width);
|
|
height: var(--key-height);
|
|
box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
mobile-keyboard .nav:hover {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.06) 3px, rgba(255,255,255,.06) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.04) 4px, rgba(255,255,255,.04) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.1) 3px, rgba(0,0,0,.1) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.06) 4px, rgba(0,0,0,.06) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.05) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.08) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.04) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(255,255,255,.025) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(0,0,0,.05) 0.8px, transparent 0.8px),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.04) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.04) 0%, transparent 70%),
|
|
linear-gradient(180deg, #6a9cb4 0%, #5a8ca4 100%);
|
|
}
|
|
|
|
mobile-keyboard .space {
|
|
width: calc(var(--key-width) * 8.4);
|
|
min-width: calc(var(--key-width) * 8.4);
|
|
height: var(--key-height);
|
|
padding: 0;
|
|
border-radius: 0.5rem;
|
|
border: none;
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.04) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.015) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(0,0,0,.01) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.35) 0%, transparent 40%),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
linear-gradient(180deg, #fffef9 0%, #f5f1ed 100%);
|
|
font-family: inherit;
|
|
font-weight: 600;
|
|
font-size: clamp(1rem, 2.4vw, 1.25rem);
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
color: var(--ink-dark);
|
|
box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 3px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
mobile-keyboard .key-spacer {
|
|
width: var(--key-width);
|
|
height: var(--key-height);
|
|
}
|
|
|
|
mobile-keyboard .handle {
|
|
position: absolute;
|
|
top: calc(-1 * var(--handle-height));
|
|
left: var(--keyboard-padding);
|
|
transform: none;
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.01) 3px, rgba(255,255,255,.01) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.008) 4px, rgba(255,255,255,.008) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.012) 3px, rgba(0,0,0,.012) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.008) 4px, rgba(0,0,0,.008) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.01) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.015) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.008) 1.5px, transparent 1.5px),
|
|
linear-gradient(135deg, #1a1512 0%, #0f0c09 100%);
|
|
color: #7a7268;
|
|
padding: var(--handle-padding) calc(var(--handle-padding) * 1.5);
|
|
border-radius: 0.25rem 0.25rem 0 0;
|
|
border: 1px solid rgba(58, 53, 48, 0.4);
|
|
cursor: pointer;
|
|
box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
opacity: 0.75;
|
|
transition: opacity 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
mobile-keyboard .handle:hover {
|
|
opacity: 0.95;
|
|
}
|
|
|
|
mobile-keyboard[collapsed] .keyboard-container { transform: translateY(calc(100% - 2.6rem)); }
|
|
mobile-keyboard:not([collapsed]) .keyboard-container { transform: translateY(0); }
|
|
|
|
@media (max-width: 980px) and (orientation: portrait) {
|
|
mobile-keyboard .keyboard { padding-bottom: 1.6rem; }
|
|
|
|
/* Override :root variables globally for portrait mode */
|
|
:root {
|
|
--keyboard-height: calc(
|
|
(calc(8vw * 1.4) * 4) + /* 4 rows with 8vw-based key-height */
|
|
(calc(8vw * 0.2) * 3) + /* 3 gaps between rows (8vw-based) */
|
|
calc(8vw * 0.4) + /* bottom padding (8vw-based) - the 1.6rem is separate */
|
|
calc(8vw * 0.8) + /* handle height (8vw-based) */
|
|
2px + /* keyboard border-top */
|
|
0.6rem /* visual buffer for shadow effects */
|
|
);
|
|
}
|
|
|
|
mobile-keyboard {
|
|
width: 100%;
|
|
--key-width: 8vw;
|
|
}
|
|
}
|
|
|
|
mobile-keyboard.wide-screen .keyboard-wrapper { display: flex; align-items: flex-end; justify-content: center; gap: 0.75rem; }
|
|
mobile-keyboard.wide-screen .keyboard-controls { display: none; }
|
|
|
|
/* ========= crossword-menu ========= */
|
|
crossword-menu {
|
|
display: block;
|
|
}
|
|
|
|
.menu-container {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
|
|
radial-gradient(ellipse 900px 700px at 25% 35%, rgba(0,0,0,.3) 0%, transparent 45%),
|
|
radial-gradient(ellipse 700px 600px at 75% 65%, rgba(255,255,255,.02) 0%, transparent 50%),
|
|
linear-gradient(135deg, #0a0805 0%, #0f0c09 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.menu {
|
|
background: #f9f7f3;
|
|
background-image:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.04) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.015) 1.5px, transparent 1.5px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.35) 0%, transparent 40%),
|
|
radial-gradient(ellipse 600px 500px at 70% 60%, rgba(0,0,0,.02) 0%, transparent 50%),
|
|
linear-gradient(135deg, #fefdfb 0%, #f9f7f3 100%);
|
|
padding: 2rem;
|
|
border-radius: 0.5rem;
|
|
box-shadow:
|
|
0 10px 40px rgba(0,0,0,0.3),
|
|
inset 0 0 60px rgba(0,0,0,0.08),
|
|
inset 0 0 100px rgba(0,0,0,0.04);
|
|
max-width: 400px;
|
|
width: 100%;
|
|
}
|
|
|
|
.menu h1 {
|
|
color: #1a1815;
|
|
text-align: center;
|
|
margin: 0 0 2rem 0;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
color: #1a1815;
|
|
font-weight: 600;
|
|
margin-bottom: 0.3rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.form-group select,
|
|
.form-group input[type="text"] {
|
|
width: 100%;
|
|
padding: 0.6rem;
|
|
border: 1px solid #c0bbb5;
|
|
border-radius: 0.25rem;
|
|
font-size: 1rem;
|
|
box-sizing: border-box;
|
|
background: #fefdfb;
|
|
color: #1a1815;
|
|
box-shadow: inset 0 1px 2px rgba(255,255,255,0.9), inset 0 -0.5px 1px rgba(0,0,0,0.03);
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-group select:focus,
|
|
.form-group input[type="text"]:focus {
|
|
outline: none;
|
|
border-color: #1a1815;
|
|
box-shadow: inset 0 1px 2px rgba(255,255,255,0.9), inset 0 0 0 2px rgba(26,24,21,0.1);
|
|
}
|
|
|
|
.menu button {
|
|
width: 100%;
|
|
padding: 0.6rem;
|
|
margin-bottom: 0.7rem;
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.04) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.015) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(0,0,0,.01) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
|
|
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.35) 0%, transparent 40%),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
linear-gradient(180deg, #fffef9 0%, #f5f1ed 100%);
|
|
color: #1a1815;
|
|
border: 1px solid #c0bbb5;
|
|
border-radius: 0.25rem;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 3px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.8);
|
|
transition: all 0.15s ease;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.menu button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.8);
|
|
}
|
|
|
|
.menu button:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.menu button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
/* Session management styles */
|
|
.saved-sessions {
|
|
margin-top: 2rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.saved-sessions h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: #5c6fc3;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.session-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.session-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 0.25rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.session-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.session-id {
|
|
font-family: monospace;
|
|
font-weight: bold;
|
|
color: #222c55;
|
|
}
|
|
|
|
.session-time, .session-lang {
|
|
font-size: 0.8rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.session-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.reconnect-btn {
|
|
padding: 0.4rem 0.8rem;
|
|
background: rgba(76, 175, 80, 0.2);
|
|
color: #81c784;
|
|
border: 1px solid rgba(76, 175, 80, 0.3);
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.reconnect-btn:hover {
|
|
background: rgba(76, 175, 80, 0.3);
|
|
border-color: rgba(76, 175, 80, 0.5);
|
|
}
|
|
|
|
.remove-btn {
|
|
padding: 0.4rem 0.6rem;
|
|
background: rgba(244, 67, 54, 0.2);
|
|
color: #ef5350;
|
|
border: 1px solid rgba(244, 67, 54, 0.3);
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
font-weight: bold;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.remove-btn:hover {
|
|
background: rgba(244, 67, 54, 0.3);
|
|
border-color: rgba(244, 67, 54, 0.5);
|
|
}
|
|
|
|
.clear-all-btn {
|
|
padding: 0.5rem 1rem;
|
|
background: rgba(255, 152, 0, 0.2);
|
|
color: #ffab40;
|
|
border: 1px solid rgba(255, 152, 0, 0.3);
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.clear-all-btn:hover {
|
|
background: rgba(255, 152, 0, 0.3);
|
|
border-color: rgba(255, 152, 0, 0.5);
|
|
}
|
|
|
|
.loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 300px;
|
|
color: #1a1815;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.error {
|
|
background: #ffebee;
|
|
color: #c62828;
|
|
padding: 1rem;
|
|
border-radius: 0.25rem;
|
|
margin-bottom: 1.5rem;
|
|
border-left: 4px solid #c62828;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Notification Area */
|
|
.notification-area {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
z-index: 10000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.notification {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.875rem 1rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
animation: slideIn 0.3s ease-out;
|
|
pointer-events: auto;
|
|
gap: 0.75rem;
|
|
max-width: 350px;
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 2px, rgba(0,0,0,.015) 2px, rgba(0,0,0,.015) 3px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 3px, rgba(0,0,0,.01) 3px, rgba(0,0,0,.01) 4px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 2px, rgba(255,255,255,.03) 2px, rgba(255,255,255,.03) 3px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 4px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.01) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.02) 0.8px, transparent 0.8px),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.notification-success {
|
|
background: rgba(76, 175, 80, 0.95);
|
|
color: #f5f5f5;
|
|
border-left: 4px solid #45a049;
|
|
}
|
|
|
|
.notification-info {
|
|
background: rgba(33, 150, 243, 0.95);
|
|
color: #f5f5f5;
|
|
border-left: 4px solid #1976d2;
|
|
}
|
|
|
|
.notification-error {
|
|
background: rgba(244, 67, 54, 0.95);
|
|
color: #f5f5f5;
|
|
border-left: 4px solid #d32f2f;
|
|
}
|
|
|
|
.notification-message {
|
|
flex-grow: 1;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.notification-close {
|
|
background: none;
|
|
border: none;
|
|
color: inherit;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.notification-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Loading and Game States */
|
|
.loading-spinner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 60vh;
|
|
font-size: 1.5rem;
|
|
color: #f5f1ed;
|
|
position: relative;
|
|
}
|
|
|
|
.loading-spinner::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border: 3px solid rgba(245, 241, 237, 0.3);
|
|
border-top-color: #f5f1ed;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.game-loaded {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 60vh;
|
|
color: #f5f1ed;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
background: rgba(26, 24, 21, 0.5);
|
|
border-radius: 0.5rem;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.game-loaded h2 {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.game-loaded p {
|
|
margin: 0.5rem 0;
|
|
font-size: 1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Game Header with Close Button */
|
|
.game-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 0.2rem;
|
|
padding: 0.5rem 0.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.game-header h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
/* On very small screens, align title to the left */
|
|
@media (max-width: 600px) {
|
|
.game-header {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
.header-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
}
|
|
|
|
.share-game-btn {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,180,255,.04) 3px, rgba(100,180,255,.04) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,180,255,.025) 4px, rgba(100,180,255,.025) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,180,255,.03) 3px, rgba(100,180,255,.03) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,180,255,.02) 4px, rgba(100,180,255,.02) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(100,180,255,.025) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(100,180,255,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(100,180,255,.02) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(100,180,255,.01) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(100,180,255,.015) 0.8px, transparent 0.8px),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.03) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.03) 0%, transparent 70%),
|
|
linear-gradient(180deg, #4a5a6a 0%, #3a4a5a 100%);
|
|
border: 1px solid rgba(100, 180, 255, 0.3);
|
|
color: #f5f1ed;
|
|
cursor: pointer;
|
|
/* width: 2.5rem; */
|
|
height: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.25rem;
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.share-game-btn:hover {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,180,255,.05) 3px, rgba(100,180,255,.05) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,180,255,.03) 4px, rgba(100,180,255,.03) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,180,255,.04) 3px, rgba(100,180,255,.04) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,180,255,.025) 4px, rgba(100,180,255,.025) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(100,180,255,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(100,180,255,.025) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(100,180,255,.025) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(100,180,255,.015) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(100,180,255,.02) 0.8px, transparent 0.8px),
|
|
radial-gradient(circle at 0% 0%, rgba(100,180,255,.05) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(100,180,255,.05) 0%, transparent 70%),
|
|
linear-gradient(180deg, #5a6a7a 0%, #4a5a6a 100%);
|
|
border-color: rgba(100, 180, 255, 0.5);
|
|
}
|
|
|
|
.close-game-btn {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.04) 3px, rgba(255,255,255,.04) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.025) 4px, rgba(255,255,255,.025) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(180,80,80,.03) 3px, rgba(180,80,80,.03) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(180,80,80,.02) 4px, rgba(180,80,80,.02) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.025) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(180,80,80,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.02) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(180,80,80,.01) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(180,80,80,.015) 0.8px, transparent 0.8px),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.03) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.03) 0%, transparent 70%),
|
|
linear-gradient(180deg, #5a4a4a 0%, #4a3a3a 100%);
|
|
border: 1px solid rgba(160, 90, 90, 0.3);
|
|
color: #f5f1ed;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.25rem;
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.close-game-btn:hover {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.045) 3px, rgba(255,255,255,.045) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(180,80,80,.04) 3px, rgba(180,80,80,.04) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(180,80,80,.025) 4px, rgba(180,80,80,.025) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(180,80,80,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.025) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(180,80,80,.015) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(180,80,80,.02) 0.8px, transparent 0.8px),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.035) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.035) 0%, transparent 70%),
|
|
linear-gradient(180deg, #6a5a5a 0%, #5a4a4a 100%);
|
|
border-color: rgba(160, 90, 90, 0.4);
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.close-game-btn:active {
|
|
background: rgba(245, 241, 237, 0.2);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.game-content {
|
|
display: block;
|
|
overflow-y: auto;
|
|
overflow-x: auto; /* Allow horizontal scrolling */
|
|
max-height: calc(100vh - 200px); /* Leave space for header, clue area, and keyboard */
|
|
width: 100%;
|
|
text-align: center; /* Center inline-block children */
|
|
}
|
|
|
|
crossword-grid {
|
|
display: block;
|
|
width: 100%;
|
|
border-radius: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Completely independent scroll containers */
|
|
.main-grid-scroll-container {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
max-width: 100%;
|
|
margin-bottom: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.main-grid-scroll-container .grid-container {
|
|
display: inline-block;
|
|
min-width: fit-content;
|
|
align-items: center;
|
|
}
|
|
|
|
.solution-scroll-container {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
max-width: 100%;
|
|
display: inline-block; /* Behave like inline-block to only take needed space */
|
|
width: auto; /* Auto width to fit content */
|
|
}
|
|
|
|
/* Clue Area */
|
|
.clue-area {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
|
|
radial-gradient(ellipse 900px 700px at 25% 35%, rgba(0,0,0,.3) 0%, transparent 45%),
|
|
radial-gradient(ellipse 700px 600px at 75% 65%, rgba(255,255,255,.02) 0%, transparent 50%),
|
|
linear-gradient(135deg, #0a0805 0%, #0f0c09 100%);
|
|
backdrop-filter: blur(8px);
|
|
border-bottom: 2px solid rgba(245, 241, 237, 0.2);
|
|
z-index: 1000;
|
|
padding: 1rem;
|
|
box-sizing: border-box;
|
|
max-height: 3.5rem;
|
|
transition: max-height 0.3s ease;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/* Expanded clue area - show all clues */
|
|
.clue-area.expanded {
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.clue-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.current-clue {
|
|
font-weight: 600;
|
|
color: #a8b8ff;
|
|
font-size: 0.875rem;
|
|
min-width: 2rem;
|
|
}
|
|
|
|
.clue-number {
|
|
font-weight: 700;
|
|
color: #ffd700;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.clue-text {
|
|
color: #f5f1ed;
|
|
font-size: 0.95rem;
|
|
line-height: 1.7;
|
|
flex-grow: 1;
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
overflow-y: scroll;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.clue-text.empty {
|
|
opacity: 0.6;
|
|
font-style: italic;
|
|
}
|
|
|
|
.clue-toggle {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.04) 3px, rgba(255,255,255,.04) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.025) 4px, rgba(255,255,255,.025) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,130,180,.03) 3px, rgba(100,130,180,.03) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,130,180,.02) 4px, rgba(100,130,180,.02) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.025) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(100,130,180,.02) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.02) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(100,130,180,.01) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(100,130,180,.015) 0.8px, transparent 0.8px),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.03) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.03) 0%, transparent 70%),
|
|
linear-gradient(180deg, #3a4a5a 0%, #2a3a4a 100%);
|
|
border: 1px solid rgba(100, 130, 180, 0.3);
|
|
color: #f5f1ed;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.25rem;
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
padding: 0;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.clue-toggle:hover {
|
|
background:
|
|
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.045) 3px, rgba(255,255,255,.045) 5px),
|
|
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
|
|
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,130,180,.04) 3px, rgba(100,130,180,.04) 5px),
|
|
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,130,180,.025) 4px, rgba(100,130,180,.025) 6px),
|
|
repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 67% 77%, rgba(100,130,180,.03) 1px, transparent 1px),
|
|
repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.025) 1.5px, transparent 1.5px),
|
|
repeating-radial-gradient(circle at 23% 67%, rgba(100,130,180,.015) 0.8px, transparent 0.8px),
|
|
repeating-radial-gradient(circle at 78% 22%, rgba(100,130,180,.02) 0.8px, transparent 0.8px),
|
|
radial-gradient(circle at 0% 0%, rgba(0,0,0,.035) 0%, transparent 70%),
|
|
radial-gradient(circle at 100% 100%, rgba(0,0,0,.035) 0%, transparent 70%),
|
|
linear-gradient(180deg, #4a5a6a 0%, #3a4a5a 100%);
|
|
border-color: rgba(100, 130, 180, 0.4);
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.clue-toggle:active {
|
|
background: rgba(245, 241, 237, 0.2);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.clue-toggle-group {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
/* All Clues View */
|
|
.clue-area h3 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 1.2rem;
|
|
color: #f5f1ed;
|
|
}
|
|
|
|
.clue-list-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.clue-list-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.clue-section h4 {
|
|
margin: 0 0 0.75rem 0;
|
|
font-size: 1rem;
|
|
color: #a8b8ff;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.clue-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
max-height: 40vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.clue-item {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.clue-item:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.clue-item.solved .clue-text {
|
|
text-decoration: line-through;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.clue-item .clue-number {
|
|
flex-shrink: 0;
|
|
min-width: 2rem;
|
|
}
|
|
|
|
.clue-item .clue-text {
|
|
flex-grow: 1;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Adjust main content for clue area */
|
|
main {
|
|
padding-top: calc(var(--page-padding) + 4rem);
|
|
}
|
|
|
|
/* Solution circle rotation animation */
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Solution circles spin continuously when complete */
|
|
@keyframes spin-with-translate {
|
|
from {
|
|
transform: translate(calc(-50% + var(--cell-size) * 0.0625), calc(-50% + var(--cell-size) * 0.0625)) rotate(0deg);
|
|
}
|
|
to {
|
|
transform: translate(calc(-50% + var(--cell-size) * 0.0625), calc(-50% + var(--cell-size) * 0.0625)) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.solution-word-grid.complete .solution-circle,
|
|
.grid-container.complete .solution-circle {
|
|
animation: spin-with-translate 3s linear infinite;
|
|
}
|
|
|
|
/* Pulse animation for all grid cells when puzzle is solved */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
.grid-container.complete .cell {
|
|
animation: pulse 0.6s ease-in-out;
|
|
}
|
|
|
|
/* Staggered animation delays using CSS custom property */
|
|
.grid-container.complete .cell {
|
|
animation-delay: var(--pulse-delay, 0s);
|
|
}
|
|
|