html.theme-copper {
--stone-light: var(--copper-light);
--stone: var(--copper);
--stone-dark: var(--copper-dark);
}
html.theme-bronze {
--stone-light: var(--bronze-light);
--stone: var(--bronze);
--stone-dark: var(--bronze-dark);
}
:root {
--paper: #f5efe3;
--paper-deep: #e7ddca;
--ink: #1e2a25;
--muted: #756f64;
--wood: #d97848;
--wood-dark: #ad4f2b;
--wood-light: #eea06f;
/* Brick finish: silver is the active choice (bright/cool to pop against the warm paper
background); copper and bronze kept below as swappable backups.
To switch, add class="theme-copper" or class="theme-bronze" to the tag. */
--silver-light: #eef1f3;
--silver: #a9b4bc;
--silver-dark: #626d76;
--copper-light: #f2c39a;
--copper: #c17d4a;
--copper-dark: #7a4a24;
--bronze-light: #e0b877;
--bronze: #8c6b32;
--bronze-dark: #574018;
--stone-light: var(--silver-light);
--stone: var(--silver);
--stone-dark: var(--silver-dark);
--gold-light: #fff0a3;
--gold: #d9a823;
--gold-dark: #9d6d08;
--platinum-light: #f4f6f8;
--platinum: #cdd4da;
--platinum-dark: #8e969f;
--grid: #d8cdb9;
--panel: rgba(255, 252, 246, 0.72);
--chest-frame: #875332;
--chest-wall: #a36c43;
--cell: min(calc((100vw - 96px) / 9), 52px); /* 96px = shell padding 40 + gaps 24 + box seams 6 + board padding 16 + border 10 */
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background: var(--paper);
font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overscroll-behavior: none; }
body {
min-height: 100dvh;
background:
radial-gradient(circle at 82% 12%, rgba(255,255,255,.64), transparent 32%),
repeating-linear-gradient(45deg, transparent 0 27px, rgba(39,78,54,.038) 28px 29px),
#dce8df;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
.app-shell {
position: relative;
z-index: 1;
width: min(100%, 520px);
min-height: 100dvh;
margin: 0 auto;
padding: max(18px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
gap: 18px;
}
.topbar { position: relative; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 58px; }
.brand { grid-column: 1; justify-self: start; min-width: 0; }
.eyebrow { margin: 0 0 3px; color: var(--wood-dark); font-size: 10px; letter-spacing: .2em; font-weight: 800; }
h1 { margin: 0; font-size: clamp(28px, 8vw, 38px); letter-spacing: -.055em; line-height: .95; }
.hero-text { margin: 6px 0 0; color: var(--gold-dark); font-size: clamp(11px, 3.6vw, 17px); font-weight: 750; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.score-card { grid-column: 3; justify-self: end; text-align: right; border-left: 1px solid rgba(77,87,84,.24); padding-left: 18px; min-width: 0; max-width: 100%; }
.score-card span { display: block; color: var(--muted); font-size: 13px; letter-spacing: .16em; font-weight: 800; }
.score-card strong {
display: block;
font-size: clamp(15px, 28px - (var(--score-digits, 3) - 3) * 2.4px, 28px);
line-height: 1.05;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
white-space: nowrap;
}
.score-card small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; letter-spacing: .12em; font-weight: 750; white-space: nowrap; }
.score-card small b { color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.play-area { position: relative; isolation: isolate; display: grid; place-items: center; }
.board {
position: relative;
display: grid;
grid-template-columns: repeat(9, var(--cell));
grid-template-rows: repeat(9, var(--cell));
gap: 3px;
padding: 8px;
border: 5px solid #6f4228;
border-radius: 13px;
background:
linear-gradient(115deg, rgba(255,255,255,.2), transparent 25% 72%, rgba(65,31,13,.13)),
repeating-linear-gradient(88deg, transparent 0 38px, rgba(68,34,17,.08) 39px, transparent 41px),
var(--chest-wall);
box-shadow:
0 14px 30px rgba(61, 34, 18, .22),
inset 0 2px rgba(255, 235, 207, .42),
inset 0 -3px rgba(54, 28, 14, .32),
0 0 0 1px rgba(76, 43, 24, .3);
touch-action: none;
/* Own paint layer: a drop re-rasters only the board, not the patterned page background under it. */
contain: paint;
will-change: transform;
}
.cell {
position: relative;
z-index: 0;
border: 1px solid rgba(61, 32, 18, .24);
border-radius: 2px;
background:
linear-gradient(145deg, rgba(255,255,255,.13), transparent 35%),
linear-gradient(160deg, var(--pocket-top), var(--pocket-bottom));
box-shadow:
inset 0 6px 7px rgba(35, 17, 8, .38),
inset 5px 0 6px rgba(41, 21, 10, .23),
inset 0 -1px rgba(255, 230, 196, .2),
0 1px rgba(255, 222, 181, .28);
overflow: visible;
}
.cell.area-dark { --pocket-top: #71472f; --pocket-bottom: #4d2d1f; }
.cell.area-mid { --pocket-top: #86624d; --pocket-bottom: #674939; }
.cell.area-light { --pocket-top: #c39a72; --pocket-bottom: #98704f; }
.cell:nth-child(3n):not(:nth-child(9n)) { margin-right: 3px; }
.cell:nth-child(n+19):nth-child(-n+27), .cell:nth-child(n+46):nth-child(-n+54) { margin-bottom: 3px; }
.cell::after {
content: "";
position: absolute;
inset: .5px;
z-index: 2;
border: 1px solid rgba(84, 74, 66, .62);
border-radius: 4px;
background:
repeating-linear-gradient(115deg, rgba(255,255,255,.16) 0 1px, transparent 1px 3px),
linear-gradient(110deg, transparent 24%, rgba(255,255,255,.9) 44%, transparent 62%) 170% 0 / 220% 100% no-repeat,
linear-gradient(132deg, rgba(255,255,255,.72), transparent 27%),
linear-gradient(145deg, var(--stone-light), var(--stone) 54%, var(--stone-dark));
box-shadow:
inset 0 2px rgba(255,255,255,.5),
inset 0 -2px rgba(40, 44, 48, .32),
0 3px 4px rgba(35, 19, 10, .38),
0 0 0 1px rgba(159, 111, 81, .28);
opacity: 0;
transform: scale(.88);
/* No transition here on purpose: preview highlights toggle every frame during a drag and a
transitioning ::after forces repaint + re-raster of these gradient-heavy cells for ~120ms each time. */
pointer-events: none;
}
.cell.filled, .cell.preview-valid, .cell.preview-clear { z-index: 2; }
.cell.filled::after, .cell.preview-valid::after {
opacity: 1;
transform: scale(1);
}
.cell.preview-valid::after { box-shadow: inset 0 2px rgba(255,255,255,.7), 0 3px 5px rgba(35,19,10,.42), 0 0 0 1px rgba(235,225,214,.5); }
.cell.preview-clear::after {
opacity: 1;
transform: scale(1);
background:
linear-gradient(110deg, transparent 24%, rgba(255,255,255,.88) 44%, transparent 62%) 170% 0 / 220% 100% no-repeat,
linear-gradient(132deg, rgba(255,255,255,.72), transparent 29%),
linear-gradient(145deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
border-color: rgba(115, 75, 4, .58);
box-shadow: inset 0 2px rgba(255,255,255,.62), inset 0 -2px rgba(112,72,4,.24), 0 3px 5px rgba(55,31,7,.36), 0 0 0 1px rgba(255,216,83,.35);
animation: clear-preview-pulse .55s ease-in-out infinite alternate, metal-shine 1s ease-out 1;
}
@keyframes clear-preview-pulse { to { transform: scale(.93); } }
.cell.dropping::after { animation: stone-drop .16s cubic-bezier(.22,.84,.42,1), metal-shine 1.05s .16s ease-out 1; }
.cell.clearing::after { animation: clear-pop .18s cubic-bezier(.3,.8,.35,1) forwards; }
@keyframes metal-shine {
0%, 20% { background-position: 170% 0, 0 0, 0 0; }
58%, 100% { background-position: -90% 0, 0 0, 0 0; }
}
@keyframes stone-drop {
0% { opacity: .88; transform: translateY(-7px) scale(1.035); }
72% { opacity: 1; transform: translateY(1px) scale(.985); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes clear-pop {
0% { opacity: 1; transform: scale(1); }
42% { opacity: 1; transform: scale(1.08); background: linear-gradient(145deg, var(--gold-light), var(--gold) 55%, var(--gold-dark)); }
100% { opacity: 0; transform: scale(.1); background: linear-gradient(145deg, #fff8cb, var(--gold)); }
}
.toast {
position: absolute;
top: 50%; left: 50%;
translate: -50% -50%;
padding: 9px 14px;
border-radius: 999px;
background: var(--ink);
color: white;
font-weight: 800;
font-size: 13px;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: .2s ease;
z-index: 60;
isolation: isolate;
backface-visibility: hidden;
will-change: opacity, transform;
}
.toast.show { opacity: 1; transform: translateY(0); }
/* Score popup: no pill background, floats at the placed piece's board cell. */
.score-pop {
--pop-size: 30px;
--pop-color: var(--gold-dark);
--pop-hold: 900ms;
--pop-tag-size: var(--pop-size);
--pop-tag-color: var(--platinum);
position: fixed;
left: 50%; top: 50%;
translate: -50% -50%;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
pointer-events: none;
z-index: 65;
opacity: 0;
isolation: isolate;
will-change: opacity, transform;
}
.score-pop-points {
font-size: var(--pop-size);
font-weight: 800;
line-height: 1;
letter-spacing: -.03em;
color: var(--pop-color);
text-shadow:
0 1px 0 rgba(255, 255, 255, .55),
0 2px 6px rgba(30, 42, 37, .45),
0 0 1px rgba(30, 42, 37, .6);
}
.score-pop-multiplier {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--pop-tag-size);
font-weight: 900;
line-height: 1;
color: var(--pop-tag-color);
-webkit-text-stroke: .5px rgba(75, 82, 90, .55);
text-shadow:
0 1px 0 rgba(255, 255, 255, .85),
0 2px 6px rgba(70, 78, 86, .5),
0 0 10px rgba(205, 212, 218, .6);
}
.score-pop-ring {
position: absolute;
left: 50%; top: 50%;
width: 60px; height: 60px;
margin: -30px 0 0 -30px;
border-radius: 999px;
border: 3px solid var(--gold);
box-shadow: 0 0 12px rgba(217, 168, 35, .5);
opacity: 0;
z-index: -1;
}
/* Tiered look: bigger, more colorful, longer-held as the multiplier climbs. */
.score-pop[data-tier="1"] { --pop-size: 26px; }
.score-pop[data-tier="2"] { --pop-size: 30px; --pop-tag-size: 32px; }
.score-pop[data-tier="3"] {
--pop-size: 36px;
--pop-tag-size: 42px;
--pop-color: var(--gold-dark);
}
.score-pop[data-tier="4"] {
--pop-size: 44px;
--pop-tag-size: 54px;
--pop-hold: 1400ms;
--pop-color: var(--gold-dark);
}
.score-pop[data-tier="5"] {
--pop-size: 54px;
--pop-tag-size: 70px;
--pop-tag-color: var(--platinum-light);
--pop-hold: 1800ms;
--pop-color: var(--gold-dark);
}
.score-pop.pop { animation: score-pop-anim var(--pop-hold) cubic-bezier(.22, .9, .3, 1) both; }
.score-pop[data-tier="2"].pop .score-pop-multiplier { animation: tag-pop .3s .05s cubic-bezier(.2,1.55,.45,1) both; }
.score-pop[data-tier="3"].pop { animation: score-pop-anim var(--pop-hold) cubic-bezier(.22, .9, .3, 1) both, score-pop-rotate-in .35s ease-out both; }
.score-pop[data-tier="3"].pop .score-pop-multiplier { animation: tag-pop .34s .05s cubic-bezier(.2,1.55,.45,1) both; }
.score-pop[data-tier="4"].pop .score-pop-multiplier,
.score-pop[data-tier="5"].pop .score-pop-multiplier { animation: tag-pop .38s .06s cubic-bezier(.2,1.55,.45,1) both; }
.score-pop[data-tier="4"].pop .score-pop-ring,
.score-pop[data-tier="5"].pop .score-pop-ring { animation: ring-expand var(--pop-hold) ease-out both; }
.score-pop[data-tier="5"].pop .score-pop-points { animation: pop-shake 320ms 140ms ease-in-out; }
@keyframes score-pop-anim {
0% { opacity: 0; transform: translateY(0) scale(.6); }
22% { opacity: 1; transform: translateY(0) scale(1.1); }
40% { transform: translateY(0) scale(1); }
72% { opacity: 1; transform: translateY(-8px) scale(1); }
100% { opacity: 0; transform: translateY(-24px) scale(1); }
}
@keyframes score-pop-rotate-in {
0% { rotate: -6deg; }
100% { rotate: 0deg; }
}
@keyframes tag-pop {
0% { opacity: 0; transform: scale(.25) rotate(-18deg); }
68% { opacity: 1; transform: scale(1.18) rotate(4deg); }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes ring-expand {
0% { opacity: .8; transform: scale(.5); }
60% { opacity: .35; }
100% { opacity: 0; transform: scale(2); }
}
@keyframes pop-shake {
0%, 100% { translate: 0 0; }
20% { translate: -3px 0; }
40% { translate: 3px 0; }
60% { translate: -2px 0; }
80% { translate: 2px 0; }
}
/* Brief full-board gold wash for tier 5+ clears. */
#board.gold-wash::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
border-radius: 13px;
background: radial-gradient(circle, rgba(255, 240, 163, .55), rgba(217, 168, 35, .1) 70%, transparent 100%);
pointer-events: none;
animation: gold-wash 200ms ease-out;
}
@keyframes gold-wash {
0% { opacity: 0; }
40% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.score-pop.pop,
.score-pop.pop .score-pop-multiplier,
.score-pop.pop .score-pop-ring,
.score-pop.pop .score-pop-points {
animation: score-pop-fade var(--pop-hold) ease both !important;
}
#board.gold-wash::after { animation: none; opacity: 0; }
}
@keyframes score-pop-fade {
0% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
.tray-zone { display: grid; }
.piece-rack { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 9px; height: 92px; }
.bank {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
min-width: 0;
overflow: hidden;
gap: 3px;
padding: 4px;
border: 4px solid #a77e5a;
border-radius: 12px;
background:
linear-gradient(145deg, rgba(255,255,255,.13), transparent 35%),
linear-gradient(160deg, #c39a72, #98704f);
box-shadow:
inset 0 6px 7px rgba(35, 17, 8, .38),
inset 5px 0 6px rgba(41, 21, 10, .23),
inset 0 -1px rgba(255, 230, 196, .2),
0 4px 10px rgba(61,34,18,.12);
}
.piece-slot, .spare {
display: grid;
place-items: center;
min-width: 0;
background: var(--panel);
}
.bank .piece-slot, .spare::after {
border-radius: 4px;
background:
linear-gradient(180deg, rgba(35, 17, 8, .14), transparent 42%),
var(--panel);
box-shadow:
inset 0 5px 6px rgba(35, 17, 8, .24),
inset 4px 0 4px rgba(41, 21, 10, .13),
inset -2px 0 4px rgba(41, 21, 10, .08),
inset 0 -1px rgba(255, 230, 196, .2);
}
.bank .piece-slot { border: 1px solid rgba(61, 32, 18, .3); }
.piece-slot { cursor: grab; touch-action: none; }
.piece-slot:active { cursor: grabbing; }
.piece-slot.drag-source .piece-grid { opacity: 0; transform: translateY(-4px) scale(1.035); }
.piece-grid { display: grid; gap: 1px; pointer-events: none; transform-origin: center; transition: opacity .1s linear, transform .15s ease; }
.piece-block {
width: 17px; height: 17px;
border-radius: 3px;
border: 1px solid rgba(84, 74, 66, .55);
background:
linear-gradient(110deg, transparent 24%, rgba(255,255,255,.9) 44%, transparent 62%) 170% 0 / 220% 100% no-repeat,
linear-gradient(132deg, rgba(255,255,255,.72), transparent 28%),
linear-gradient(145deg, var(--stone-light), var(--stone) 54%, var(--stone-dark));
box-shadow: inset 0 1px rgba(255,255,255,.65), inset 0 -2px rgba(63,55,49,.18), 0 2px 3px rgba(53,36,25,.25), 0 0 0 1px rgba(159,111,81,.2);
}
.piece-grid.shine-once .piece-block,
.spare.just-dropped .piece-block { animation: metal-shine 1.05s ease-out 1; }
.piece-slot.unplaceable .piece-block,
.drag-ghost.unplaceable .piece-block {
animation: none;
border-color: #6d321f;
background: linear-gradient(135deg, #f1b085, #b66038 48%, #6e301f 88%);
box-shadow: inset 0 1px rgba(255,242,225,.5), inset 0 -2px rgba(80,28,14,.3), 0 2px 4px rgba(66,30,18,.28);
}
.drag-ghost .piece-block.preview-clear {
opacity: 1;
background:
linear-gradient(110deg, transparent 24%, rgba(255,255,255,.88) 44%, transparent 62%) 170% 0 / 220% 100% no-repeat,
linear-gradient(132deg, rgba(255,255,255,.72), transparent 29%),
linear-gradient(145deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
border-color: rgba(115, 75, 4, .58);
box-shadow: inset 0 1px rgba(255,255,255,.62), 0 0 0 2px rgba(217,168,35,.34), 0 3px 5px rgba(80,45,12,.28);
animation: ghost-clear-pulse .55s ease-in-out infinite alternate, metal-shine 1s ease-out 1;
}
@keyframes ghost-clear-pulse { to { transform: scale(.91); } }
.piece-space { width: 17px; height: 17px; }
.spare {
position: relative;
height: 92px;
isolation: isolate;
border: 4px solid #a77e5a;
border-radius: 12px;
background:
linear-gradient(145deg, rgba(255,255,255,.13), transparent 35%),
linear-gradient(160deg, #c39a72, #98704f);
box-shadow:
inset 0 6px 7px rgba(35, 17, 8, .38),
inset 5px 0 6px rgba(41, 21, 10, .23),
inset 0 -1px rgba(255, 230, 196, .2),
0 4px 10px rgba(61,34,18,.12);
touch-action: none;
}
.spare::after { content: ""; position: absolute; inset: 3px; z-index: 0; pointer-events: none; }
.spare > * { position: relative; z-index: 1; }
.spare.drop-ready { border-color: var(--wood-dark); box-shadow: inset 0 1px rgba(255,235,207,.5), 0 0 0 2px rgba(173,79,43,.16); }
.spare.just-dropped .piece-grid { animation: tray-drop .16s cubic-bezier(.22,.84,.42,1); }
@keyframes tray-drop {
0% { opacity: .82; transform: translateY(-7px) scale(1.055); filter: drop-shadow(0 7px 4px rgba(53,34,18,.24)); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}
.spare-empty { color: rgba(117, 111, 100, .33); font-size: 30px; line-height: 1; font-weight: 800; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; display: grid; gap: 3px; opacity: 1; animation: piece-lift .14s ease-out; will-change: transform; }
/* Lift shadow lives on the blocks (painted once into the ghost layer), not as a filter on the moving ghost. */
.drag-ghost .piece-block { box-shadow: inset 0 1px rgba(255,255,255,.65), inset 0 -2px rgba(63,55,49,.18), 0 10px 8px rgba(53,34,18,.3), 0 0 0 1px rgba(159,111,81,.2); }
.drag-ghost .piece-block, .drag-ghost .piece-space { transition: scale .12s cubic-bezier(.22, .9, .3, 1); }
.drag-ghost.grow-in .piece-block, .drag-ghost.grow-in .piece-space { scale: .62; }
.drag-ghost .piece-block {
width: calc((var(--cell) - 3px) * .94);
height: calc((var(--cell) - 3px) * .94);
place-self: center;
}
.drag-ghost .piece-space { width: calc(var(--cell) - 3px); height: calc(var(--cell) - 3px); }
@keyframes piece-lift {
from { opacity: .72; }
to { opacity: 1; }
}
footer { margin-top: auto; display: flex; justify-content: center; gap: 28px; }
.text-button { border: 0; background: none; padding: 10px 12px; color: var(--muted); font-size: 16px; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.dialog-backdrop {
position: fixed; inset: 0; z-index: 40;
display: grid; place-items: center;
padding: 22px;
background: rgba(29, 34, 31, .55);
backdrop-filter: blur(5px);
}
.dialog-backdrop[hidden] { display: none; }
.dialog {
width: min(100%, 370px);
padding: 28px;
border-radius: 16px;
background: #fffaf1;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
text-align: center;
}
.dialog-mark { width: 38px; height: 38px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--wood); color: white; font-size: 25px; }
.dialog h2 { margin: 5px 0 8px; font-size: 28px; letter-spacing: -.04em; }
.dialog > p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.5; }
.dialog button { width: 100%; min-height: 46px; margin-top: 9px; border-radius: 9px; font-weight: 800; cursor: pointer; }
.primary-button { border: 0; background: var(--ink); color: white; }
.secondary-button { border: 1px solid #cfc3ad; background: transparent; }
.help-dialog { text-align: left; }
.help-dialog ol { padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }
@media (min-height: 760px) { .app-shell { gap: 24px; } .piece-rack, .spare { height: 100px; } }
@media (max-width: 390px) { :root { --cell: calc((100vw - 70px) / 9); } .app-shell { padding-inline: 15px; gap: 14px; } .board { gap: 2px; padding: 6px; border-width: 4px; } .cell:nth-child(3n):not(:nth-child(9n)) { margin-right: 2px; } .cell:nth-child(n+19):nth-child(-n+27), .cell:nth-child(n+46):nth-child(-n+54) { margin-bottom: 2px; } }
@media (display-mode: standalone) { .app-shell { padding-top: max(24px, env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
body { background: #dce8df; }
}