Files
multiplayer_crosswords/multiplayer_crosswords/webui/styles.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);
}