/* =========================================================
Snip & Rip — visual bible in one CSS file
Palette locked to mockup: warm wood, ribbon red, coin gold.
========================================================= */
:root {
--wood-dark: #3a1f0e;
--wood: #7a4a22;
--wood-light: #a6712f;
--wood-edge: #2a150a;
--cream: #f6e7c1;
--ribbon-red: #c92f27;
--ribbon-dark: #8b1f1a;
--coin-gold: #ffcc3a;
--coin-deep: #d89b1a;
--ink: #2a150a;
--skin-shadow: rgba(58, 31, 14, 0.35);
--stage-w: 1600px;
--stage-h: 900px;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
height: 100%;
overflow: hidden;
background: #1b0d04;
font-family: "Nunito", "Baloo 2", "Fredoka", system-ui, -apple-system, sans-serif;
font-weight: 800;
color: var(--ink);
-webkit-user-select: none;
user-select: none;
touch-action: none;
}
#app {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* -----------------------------------------------------------
Stage — 1200x1200 square reference, scaled to fit.
Everything positioned in percent so it reflows consistently.
The face is the hero — barber shop framing is just backdrop.
----------------------------------------------------------- */
.stage {
position: relative;
width: min(100vw, 100vh);
aspect-ratio: 1 / 1;
max-height: 100vh;
background: #2b1608;
overflow: hidden;
border-radius: 2px;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.shop-bg, .reveal-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
/* -----------------------------------------------------------
Face layer stack — 720x900 source, positioned in the chair.
The mockup shows the customer roughly at [20%..55%] horizontally.
We align face canvases over that region.
----------------------------------------------------------- */
.face-layer {
position: absolute;
/* Face is the hero — framed to show head, beard AND neck.
--face-scale (default 1) shrinks the portrait for harder difficulties.
The box's aspect ratio matches the 720x900 source (4:5) so object-fit:cover
never crops any part of the image.
Positioning: when the box is TALLER than the stage (Easy), pin the bottom
so the neck stays visible and only the top of the head overflows (clipped
by the stage). When the box FITS inside the stage (Medium/Hardcore),
center it vertically so the head hangs in the middle instead of sinking
to the floor. The min() picks the more-negative value at scale 1
(bottom-pinned) and the smaller positive value at smaller scales (center).
Keep this formula in sync with getBeardRestingRect() in game.js. */
--fs: var(--face-scale, 1);
--w: calc(105% * var(--fs));
--h: calc(131.25% * var(--fs));
width: var(--w);
height: var(--h);
left: calc((100% - var(--w)) / 2);
top: min(calc(100% - var(--h)), calc((100% - var(--h)) / 2));
bottom: auto;
object-fit: cover;
object-position: center 100%;
pointer-events: none;
}
.face-canvas { z-index: 2; }
.beard-canvas { z-index: 3; pointer-events: auto; cursor: crosshair; }
.fx-canvas { z-index: 4; }
/* -----------------------------------------------------------
Ribbon banner — reusable red ribbon with yellow type
----------------------------------------------------------- */
.ribbon {
position: relative;
display: inline-block;
padding: 10px 28px;
background: linear-gradient(180deg, var(--ribbon-red) 0%, var(--ribbon-dark) 100%);
color: var(--coin-gold);
font-weight: 900;
font-size: 32px;
letter-spacing: 0.03em;
text-transform: uppercase;
text-align: center;
text-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 0 2px #3a1f0e;
border: 3px solid var(--wood-dark);
border-radius: 8px;
box-shadow: 0 4px 0 var(--wood-dark), 0 6px 14px rgba(0,0,0,0.35);
}
.ribbon::before, .ribbon::after {
content: '';
position: absolute;
top: 50%;
width: 22px; height: 32px;
background: var(--ribbon-dark);
border: 3px solid var(--wood-dark);
transform: translateY(-50%);
z-index: -1;
clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%, 20% 50%);
}
.ribbon::before { left: -22px; clip-path: polygon(100% 0, 0 25%, 0 75%, 100% 100%, 80% 50%); }
.ribbon::after { right: -22px; }
.ribbon--small { font-size: 18px; padding: 5px 18px; }
.ribbon--logo { font-size: 64px; padding: 14px 44px; letter-spacing: 0.04em; }
.ribbon--red { font-size: 22px; padding: 6px 20px; }
.ribbon--banner {
font-size: 42px;
padding: 14px 40px;
background: linear-gradient(180deg, #fff8e4 0%, var(--cream) 100%);
color: var(--coin-deep);
text-shadow: 0 3px 0 rgba(216,155,26,0.4);
}
/* -----------------------------------------------------------
Wood-plank button — shared shape for START, CONTINUE, TRY AGAIN
----------------------------------------------------------- */
.wood-btn {
font-family: inherit;
font-weight: 900;
font-size: 22px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cream);
background:
repeating-linear-gradient(90deg,
rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 2px,
transparent 2px, transparent 18px),
linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 55%, var(--wood-dark) 100%);
border: 3px solid var(--wood-edge);
border-radius: 14px;
padding: 14px 30px;
cursor: pointer;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.15),
inset 0 -3px 0 rgba(0,0,0,0.3),
0 6px 0 var(--wood-edge),
0 10px 20px rgba(0,0,0,0.45);
text-shadow: 0 2px 0 rgba(0,0,0,0.5);
transition: transform 80ms ease, box-shadow 80ms ease;
}
.wood-btn:hover { transform: translateY(-1px); }
.wood-btn:active {
transform: translateY(4px);
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.15),
inset 0 -3px 0 rgba(0,0,0,0.3),
0 2px 0 var(--wood-edge),
0 4px 8px rgba(0,0,0,0.45);
}
.wood-btn--big { font-size: 36px; padding: 22px 60px; border-radius: 20px; }
.wood-btn--green { background:
repeating-linear-gradient(90deg,
rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 2px,
transparent 2px, transparent 18px),
linear-gradient(180deg, #7bc24a 0%, #4c8c2a 55%, #2f5a18 100%);
border-color: #1f3d10; box-shadow:
inset 0 2px 0 rgba(255,255,255,0.15),
inset 0 -3px 0 rgba(0,0,0,0.3),
0 6px 0 #1f3d10,
0 10px 20px rgba(0,0,0,0.45);
}
.wood-btn--red { background:
repeating-linear-gradient(90deg,
rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 2px,
transparent 2px, transparent 18px),
linear-gradient(180deg, #e25a4a 0%, var(--ribbon-red) 55%, var(--ribbon-dark) 100%);
border-color: #4a100c;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.15),
inset 0 -3px 0 rgba(0,0,0,0.3),
0 6px 0 #4a100c,
0 10px 20px rgba(0,0,0,0.45);
}
/* -----------------------------------------------------------
Clock pill (top center, Sculpt)
----------------------------------------------------------- */
.clock-pill {
position: absolute;
top: 2%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
padding: 8px 22px;
background: linear-gradient(180deg, #fff 0%, #f2e4bc 100%);
border: 3px solid var(--wood-edge);
border-radius: 40px;
font-size: 28px;
color: #c83a2a;
font-weight: 900;
box-shadow: 0 4px 0 var(--wood-edge), 0 6px 14px rgba(0,0,0,0.35);
z-index: 8;
}
.clock-pill .clock-icon { font-size: 22px; color: #c83a2a; }
.clock-pill.warn { animation: pulseWarn 0.6s infinite; color: #b1140a; }
@keyframes pulseWarn {
0%,100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.08); }
}
/* -----------------------------------------------------------
Wish card (right side, slides in for 6s)
----------------------------------------------------------- */
.wish-card {
position: absolute;
right: 3%;
top: 12%;
width: 19%;
aspect-ratio: 360 / 560;
background: #fff7d8;
border: 6px solid var(--wood-edge);
border-radius: 18px;
padding: 10px 10px 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
box-shadow: 0 10px 24px rgba(0,0,0,0.45), inset 0 0 0 3px #e5c587;
transform: translateX(calc(100% + 6vw)) rotate(5deg);
transition: transform 450ms cubic-bezier(0.22, 1.35, 0.4, 1);
z-index: 9;
}
.wish-card.visible { transform: translateX(0) rotate(-3deg); }
.wish-card.ghost {
opacity: 0.35;
transform: translateX(0) rotate(-3deg) scale(0.95);
pointer-events: none;
}
.wish-canvas {
width: 100%;
flex: 1;
background: #efe1b2;
border-radius: 8px;
border: 2px solid #b88d3e;
display: block;
}
.wish-style {
color: var(--wood-dark);
font-size: 13px;
text-align: center;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* -----------------------------------------------------------
Bottom shelf — wood plate that covers the mockup's painted
tool shelf + HUD so our live widgets read as the UI.
----------------------------------------------------------- */
/* Subtle darker floor band so the live toolbelt + HUD reads as a single shelf */
.bottom-shelf {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 12%;
background:
linear-gradient(180deg, rgba(20,10,4,0) 0%, rgba(20,10,4,0.55) 55%, rgba(20,10,4,0.92) 100%);
z-index: 5;
pointer-events: none;
}
/* -----------------------------------------------------------
Toolbelt — wood plank across the bottom
----------------------------------------------------------- */
.toolbelt {
position: absolute;
bottom: 1.2%;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
padding: 6px 18px;
background:
repeating-linear-gradient(90deg,
rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 3px,
transparent 3px, transparent 28px),
linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 55%, var(--wood-dark) 100%);
border: 4px solid var(--wood-edge);
border-radius: 18px;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.15),
inset 0 -4px 0 rgba(0,0,0,0.35),
0 8px 0 var(--wood-edge),
0 12px 28px rgba(0,0,0,0.55);
z-index: 7;
}
.tool-slot {
position: relative;
width: 72px; height: 72px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #f0d5a3 0%, #c08747 60%, #7a4a22 100%);
border: 3px solid var(--wood-edge);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: inset 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 4px rgba(0,0,0,0.15);
transition: transform 80ms ease;
}
.tool-slot:hover { transform: translateY(-2px); }
.tool-slot.active {
background: radial-gradient(circle at 30% 30%, #fff5cc 0%, var(--coin-gold) 60%, var(--coin-deep) 100%);
box-shadow:
inset 0 3px 6px rgba(0,0,0,0.25),
inset 0 -3px 4px rgba(0,0,0,0.15),
0 0 0 4px rgba(255,204,58,0.5),
0 0 22px rgba(255,204,58,0.7);
}
.tool-icon {
width: 52px; height: 52px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35));
}
/* Inline SVG icons — on-theme with the mockup, no external slicing needed */
.tool-icon--razor {
background-image: url("data:image/svg+xml;utf8,");
}
.tool-icon--scissors {
background-image: url("data:image/svg+xml;utf8,");
}
.tool-icon--trimmer {
background-image: url("data:image/svg+xml;utf8,");
}
.tool-icon--comb {
background-image: url("data:image/svg+xml;utf8,");
}
.tool-icon--tweezers {
background-image: url("data:image/svg+xml;utf8,");
}
.tool-icon--pomade {
background-image: url("data:image/svg+xml;utf8,");
}
.tool-icon--flame {
background-image: url("data:image/svg+xml;utf8,");
}
/* v1-ported tools: wax pot, spray bottle, paint brush */
.tool-icon--wax {
background-image: url("data:image/svg+xml;utf8,");
}
.tool-icon--water {
background-image: url("data:image/svg+xml;utf8,");
}
.tool-icon--dye {
background-image: url("data:image/svg+xml;utf8,");
}
/* Slap — uses an emoji instead of an SVG background */
.tool-icon--slap {
background: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
line-height: 1;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35));
}
/* Wiggle — customer face gets restless. Transform is driven per-frame by JS
(layered smooth noise + random lurches). The CSS class just enables
will-change so the compositor can promote the layers for jank-free motion. */
.stage.wiggling .face-layer {
will-change: transform;
}
/* Slap — red flash overlay + hand emoji pop + screen shake */
.slap-flash {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, rgba(220,40,20,0.55), rgba(180,20,10,0.15) 70%, transparent);
opacity: 0;
}
.slap-flash.active {
animation: slapFlash 0.35s ease-out forwards;
}
@keyframes slapFlash {
0% { opacity: 1; }
100% { opacity: 0; }
}
.slap-hand {
position: absolute;
top: 35%;
z-index: 11;
font-size: 80px;
pointer-events: none;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
animation: slapSwing 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
transform-origin: 50% 100%;
}
@keyframes slapSwing {
0% { transform: translateX(calc(var(--slap-dir, 1) * -60px)) rotate(calc(var(--slap-dir, 1) * -30deg)) scale(0.6); opacity: 1; }
30% { transform: translateX(0) rotate(calc(var(--slap-dir, 1) * 10deg)) scale(1.15); opacity: 1; }
60% { transform: translateX(calc(var(--slap-dir, 1) * 10px)) rotate(calc(var(--slap-dir, 1) * -5deg)) scale(1); opacity: 0.8; }
100% { transform: translateX(calc(var(--slap-dir, 1) * 20px)) rotate(0deg) scale(0.7); opacity: 0; }
}
.tool-num {
position: absolute;
top: -6px; left: -6px;
width: 20px; height: 20px;
background: var(--wood-dark);
color: var(--cream);
border: 2px solid var(--cream);
border-radius: 50%;
font-size: 12px;
display: flex; align-items: center; justify-content: center;
}
/* Tool name floats ABOVE the slot so it never leaves the stage bounds. */
.tool-name {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
color: var(--cream);
background: rgba(0,0,0,0.65);
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
white-space: nowrap;
letter-spacing: 0.05em;
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
opacity: 0;
transition: opacity 120ms ease;
pointer-events: none;
}
.tool-slot:hover .tool-name,
.tool-slot.active .tool-name { opacity: 1; }
/* -----------------------------------------------------------
HUD pill (top-left, Sculpt) — persistent score/cash/level
----------------------------------------------------------- */
.hud {
position: absolute;
top: 2%;
left: 2%;
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 16px;
background: linear-gradient(180deg, rgba(58,31,14,0.85), rgba(26,14,6,0.85));
border: 3px solid var(--wood-edge);
border-radius: 14px;
color: var(--cream);
font-size: 15px;
letter-spacing: 0.04em;
text-transform: uppercase;
z-index: 7;
box-shadow: 0 4px 0 var(--wood-edge), 0 6px 12px rgba(0,0,0,0.4);
text-shadow: 0 2px 0 rgba(0,0,0,0.65);
}
.hud-item { display: flex; gap: 8px; justify-content: space-between; min-width: 108px; }
.hud-label { color: var(--coin-gold); }
/* -----------------------------------------------------------
Title overlay
----------------------------------------------------------- */
.overlay {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
.overlay > * { pointer-events: auto; }
.overlay--title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 5% 0 8%;
background:
radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
}
.logo {
display: flex; flex-direction: column; align-items: center; gap: 10px;
animation: logoIn 600ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes logoIn {
from { transform: translateY(-40px) scale(0.8); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.ribbon--logo {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
gap: 6px;
}
.ribbon--logo .ribbon-title {
font-size: inherit;
letter-spacing: inherit;
}
.ribbon--logo .ribbon-tagline {
font-size: 18px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--coin-gold);
opacity: 0.92;
}
.title-links {
display: flex;
gap: 30px;
align-items: center;
padding: 10px 18px;
background: rgba(0,0,0,0.45);
border-radius: 12px;
position: absolute;
left: 3%; bottom: 3%;
}
.link-btn {
background: transparent;
border: none;
color: var(--cream);
font-family: inherit;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
text-shadow: 0 2px 0 rgba(0,0,0,0.5);
opacity: 0.9;
}
.link-btn:hover { opacity: 1; text-decoration: underline; }
/* -----------------------------------------------------------
Difficulty slider on the title screen.
Segmented pill with a gold thumb that slides between three
modes. Easy keeps the face at full size; Medium shrinks it
noticeably; Hardcore shrinks it way down for real barber-pain.
----------------------------------------------------------- */
/* -----------------------------------------------------------
Difficulty selector — styled to match the wood-plank button
language. Outer housing uses the same grained wood surface as
`.wood-btn`; the active-index "thumb" is a raised inner plank
(same gradient, wood-edge border, bottom shadow) so the UI feels
like three planks nailed into a wooden strip.
----------------------------------------------------------- */
.difficulty-slider {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 22px 16px;
background:
repeating-linear-gradient(90deg,
rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 2px,
transparent 2px, transparent 18px),
linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 55%, var(--wood-dark) 100%);
border: 3px solid var(--wood-edge);
border-radius: 16px;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.15),
inset 0 -3px 0 rgba(0,0,0,0.3),
0 6px 0 var(--wood-edge),
0 10px 20px rgba(0,0,0,0.45);
}
.difficulty-label {
color: var(--coin-gold);
font-weight: 900;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}
.difficulty-track {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
background: linear-gradient(180deg, #2a1508, #140800);
border: 2px solid var(--wood-edge);
border-radius: 12px;
padding: 4px;
min-width: 360px;
box-shadow: inset 0 3px 6px rgba(0,0,0,0.55);
}
.difficulty-thumb {
position: absolute;
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc((100% - 8px - 8px) / 3);
background:
repeating-linear-gradient(90deg,
rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 2px,
transparent 2px, transparent 18px),
linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 55%, var(--wood-dark) 100%);
border: 2px solid var(--wood-edge);
border-radius: 10px;
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.18),
inset 0 -3px 0 rgba(0,0,0,0.32),
0 3px 0 var(--wood-edge),
0 5px 10px rgba(0,0,0,0.4);
transition: transform 280ms cubic-bezier(0.34, 1.35, 0.64, 1);
pointer-events: none;
z-index: 0;
}
.difficulty-thumb[data-index="0"] { transform: translateX(0%); }
.difficulty-thumb[data-index="1"] { transform: translateX(calc(100% + 4px)); }
.difficulty-thumb[data-index="2"] { transform: translateX(calc(200% + 8px)); }
.diff-btn {
position: relative;
z-index: 1;
background: transparent;
border: none;
color: var(--coin-gold);
font-family: inherit;
font-weight: 900;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 10px 6px;
cursor: pointer;
text-shadow: 0 2px 0 rgba(0,0,0,0.6);
transition: color 200ms ease, transform 120ms ease, filter 120ms ease;
}
.diff-btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
.diff-btn.active {
color: var(--cream);
text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}
/* -----------------------------------------------------------
DONE button (Sculpt) — finish the round manually
----------------------------------------------------------- */
.done-btn {
position: absolute;
right: 2%;
top: 2%;
padding: 10px 22px;
font-size: 16px;
z-index: 8;
}
/* -----------------------------------------------------------
Reveal overlay
----------------------------------------------------------- */
.overlay--reveal {
background: rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
}
.reveal-bg {
position: absolute;
inset: 0;
z-index: -1;
}
.reveal-panels {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
width: 90%;
max-width: 1400px;
}
/* Top row: YOUR WORK | % MATCH! banner | GOAL — all on one line,
centered on each other so the red ribbons and the cream banner share
the same vertical midline. --top-row-h forces a uniform height so the
three headers visually connect into a single strip. */
.reveal-top {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
justify-items: center;
gap: 24px;
--top-row-h: 68px;
}
.reveal-top-cell {
height: var(--top-row-h);
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
}
/* Bottom row: YOUR WORK photo | stars+tip | GOAL photo — same 3-column
grid so photos/content sit in the exact columns defined above. */
.reveal-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
justify-items: center;
gap: 24px;
}
.reveal-col {
display: flex;
justify-content: center;
width: 100%;
}
.reveal-canvas {
width: 100%;
max-width: 360px;
aspect-ratio: 360 / 450;
background: #efe1b2;
border: 6px solid var(--wood-edge);
border-radius: 12px;
box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}
.reveal-center {
position: relative;
display: flex; flex-direction: column; align-items: center;
justify-content: center;
gap: 22px;
min-width: 320px;
padding-top: 10px;
}
.score-breakdown {
display: flex;
flex-direction: column;
gap: 4px;
font-family: 'Comic Neue', sans-serif;
font-size: 18px;
font-style: italic;
color: #5a3a1a;
text-align: left;
margin-top: -6px;
padding: 8px 20px;
background: rgba(255,248,228,0.5);
border-radius: 12px;
}
.bd-row {
display: flex;
justify-content: space-between;
gap: 18px;
}
.bd-label {
font-weight: 700;
}
.bd-val {
font-weight: 900;
min-width: 44px;
text-align: right;
}
.bd-mul {
font-size: 0.78em;
font-weight: 700;
font-style: italic;
color: var(--coin-deep, #c07a18);
margin-left: 6px;
letter-spacing: 0.02em;
}
.bd-bonus .bd-label,
.bd-bonus .bd-val {
color: var(--coin-deep, #c07a18);
}
.bd-penalty .bd-label,
.bd-penalty .bd-val {
color: var(--ribbon-red, #c83a2a);
}
/* Combined shape×color subtotal. Sits visually between the per-category
rows above and the time bonus / penalty rows below, so a dashed top
border gives the eye a hint that "this is the sum of what's above". */
.bd-subtotal {
margin-top: 2px;
padding-top: 4px;
border-top: 1px dashed rgba(58, 31, 14, 0.35);
}
.bd-subtotal .bd-label {
font-style: italic;
opacity: 0.9;
}
.bd-subtotal .bd-val {
font-weight: 900;
}
.stars {
display: flex; gap: 6px;
}
.star {
width: 42px; height: 42px;
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
position: relative;
}
.star.full {
background: url('data:image/svg+xml;utf8,') no-repeat center/contain;
animation: starPop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.star.half {
background: linear-gradient(90deg,
transparent 50%, transparent 50%),
url('data:image/svg+xml;utf8,') no-repeat center/contain;
position: relative;
}
.star.half::before {
content: '';
position: absolute; inset: 0;
width: 50%;
background: url('data:image/svg+xml;utf8,') no-repeat left/220% 100%;
}
@keyframes starPop {
0% { transform: scale(0.3); }
60% { transform: scale(1.25); }
100% { transform: scale(1); }
}
.tip-bubble {
background: linear-gradient(180deg, #fff8e4 0%, var(--cream) 100%);
border: 4px solid var(--wood-edge);
border-radius: 30px;
padding: 10px 26px;
display: flex; gap: 10px; align-items: center;
font-size: 28px;
color: var(--coin-deep);
box-shadow: 0 4px 0 var(--wood-edge), 0 8px 16px rgba(0,0,0,0.35);
text-shadow: 0 2px 0 rgba(216,155,26,0.3);
}
.tip-label { color: var(--wood-dark); font-size: 20px; }
.reveal-buttons { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
/* -----------------------------------------------------------
Reaction pill (floats above the % MATCH banner on reveal)
----------------------------------------------------------- */
.reaction-pill {
position: absolute;
left: 50%;
top: -46px;
display: flex; flex-direction: row; align-items: center;
gap: 10px;
padding: 6px 16px;
background: linear-gradient(180deg, #fff8e4 0%, var(--cream) 100%);
border: 4px solid var(--wood-edge);
border-radius: 24px;
box-shadow: 0 4px 0 var(--wood-edge), 0 8px 16px rgba(0,0,0,0.4);
transform-origin: 50% 100%;
transform: translateX(-50%) scale(0.3) rotate(-18deg);
opacity: 0;
pointer-events: none;
transition: none;
z-index: 3;
white-space: nowrap;
}
.reaction-pill.show {
animation: reactionPop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.3s forwards;
}
.reaction-face { font-size: 34px; line-height: 1; }
.reaction-text {
font-size: 16px;
font-weight: 900;
color: var(--wood-dark);
letter-spacing: 0.05em;
}
@keyframes reactionPop {
0% { transform: translateX(-50%) scale(0.3) rotate(-18deg); opacity: 0; }
60% { transform: translateX(-50%) scale(1.2) rotate(6deg); opacity: 1; }
100% { transform: translateX(-50%) scale(1) rotate(-4deg); opacity: 1; }
}
/* -----------------------------------------------------------
Coin shower (5-star reveal)
----------------------------------------------------------- */
.coin-shower {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 20;
overflow: hidden;
}
.coin {
position: absolute;
width: 36px; height: 36px;
background: radial-gradient(circle at 35% 35%, #fff4b0 0%, var(--coin-gold) 60%, var(--coin-deep) 100%);
border: 2px solid var(--wood-edge);
border-radius: 50%;
box-shadow: inset -2px -3px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.4);
animation: coinFall linear forwards;
}
@keyframes coinFall {
0% { transform: translateY(-60px) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg); opacity: 1; }
}
/* -----------------------------------------------------------
Modal
----------------------------------------------------------- */
.modal {
position: absolute;
inset: 0;
z-index: 30;
background: rgba(0,0,0,0.6);
display: flex; align-items: center; justify-content: center;
}
.modal-box {
background: linear-gradient(180deg, #fff8e4, var(--cream));
border: 6px solid var(--wood-edge);
border-radius: 20px;
padding: 16px 24px;
max-width: 520px;
max-height: 84%;
display: flex; flex-direction: column; align-items: center; gap: 8px;
box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.modal-box h2 { margin: 0; font-size: 26px; }
.modal-box #modalBody { overflow-y: auto; width: 100%; min-height: 0; }
.modal-box ul { margin: 4px 0; padding-left: 20px; }
.modal-box p { margin: 4px 0; }
.modal-box h2 {
margin: 0;
color: var(--ribbon-red);
font-size: 32px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.modal-box #modalBody {
color: var(--wood-dark);
font-size: 16px;
line-height: 1.45;
font-weight: 700;
text-align: center;
}
/* -----------------------------------------------------------
Dye palette (Sculpt) — sits just above the toolbelt when Dye tool active
----------------------------------------------------------- */
.dye-palette {
position: absolute;
left: 50%;
bottom: calc(1.2% + 92px);
transform: translateX(-50%);
display: flex;
gap: 8px;
padding: 6px 10px;
background: linear-gradient(180deg, rgba(58,31,14,0.92), rgba(26,14,6,0.96));
border: 2px solid var(--wood-edge);
border-bottom: none;
border-radius: 14px 14px 0 0;
box-shadow: 0 -2px 10px rgba(0,0,0,0.45);
z-index: 7;
}
.dye-swatch {
width: 34px; height: 34px;
border-radius: 50%;
border: 2px solid var(--wood-edge);
cursor: pointer;
padding: 0;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
transition: transform 80ms ease;
}
.dye-swatch:hover { transform: translateY(-2px); }
.dye-swatch.active {
outline: 3px solid var(--coin-gold);
outline-offset: 2px;
transform: translateY(-2px);
box-shadow: 0 0 14px rgba(255,204,58,0.7);
}
/* -----------------------------------------------------------
Face picker overlay — choose a preset customer or upload a photo.
----------------------------------------------------------- */
.overlay--picker {
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
}
.picker-panel {
width: min(86%, 900px);
max-height: 86%;
display: flex; flex-direction: column; align-items: center;
gap: 16px;
padding: 24px;
background: linear-gradient(180deg, #fff8e4, var(--cream));
border: 6px solid var(--wood-edge);
border-radius: 20px;
box-shadow: 0 12px 40px rgba(0,0,0,0.6);
overflow: hidden;
}
.face-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px;
width: 100%;
overflow-y: auto;
padding: 4px;
}
.face-tile {
position: relative;
display: flex; flex-direction: column; align-items: center;
padding: 8px;
background: #efe1b2;
border: 3px solid var(--wood-edge);
border-radius: 12px;
cursor: pointer;
transition: transform 80ms ease, box-shadow 80ms ease;
}
.face-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--wood-edge); }
.face-tile img, .face-tile canvas {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 8px;
background: #d9c397;
display: block;
}
.face-tile-label {
margin-top: 6px;
font-size: 14px;
letter-spacing: 0.06em;
color: var(--wood-dark);
text-transform: uppercase;
}
/* "Upload your own" tile is a friendly dashed dropzone. */
.face-tile.upload-tile {
border: 3px dashed var(--wood);
background: repeating-linear-gradient(
45deg,
rgba(122,74,34,0.06) 0 10px,
rgba(122,74,34,0.12) 10px 20px
);
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
}
.face-tile.upload-tile .upload-icon { font-size: 44px; line-height: 1; }
.face-tile.upload-tile .upload-sub { font-size: 11px; color: var(--wood); }
.face-tile.upload-tile.drag-over { transform: scale(1.02); box-shadow: 0 0 0 4px var(--coin-gold); }
.picker-actions { display: flex; gap: 16px; }
.picker-loading {
position: absolute;
inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: rgba(0,0,0,0.55);
color: var(--cream);
gap: 16px;
border-radius: 20px;
z-index: 5;
}
.loading-text {
font-size: 18px; letter-spacing: 0.08em;
text-shadow: 0 2px 0 rgba(0,0,0,0.6);
}
.spinner {
width: 56px; height: 56px;
border: 6px solid rgba(255,255,255,0.15);
border-top-color: var(--coin-gold);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* -----------------------------------------------------------
Music toggle button — top-right corner of the stage
----------------------------------------------------------- */
.music-btn {
position: absolute;
top: 10px; right: 10px;
z-index: 20;
width: 40px; height: 40px;
border: 3px solid var(--wood-edge);
border-radius: 50%;
background: linear-gradient(180deg, rgba(58,31,14,0.8), rgba(26,14,6,0.9));
box-shadow: 0 3px 0 var(--wood-edge), 0 4px 10px rgba(0,0,0,0.4);
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 0;
display: flex; align-items: center; justify-content: center;
transition: transform 80ms ease;
}
.music-btn:hover { transform: scale(1.1); }
.music-btn:active { transform: scale(0.95); }
/* -----------------------------------------------------------
Utility
----------------------------------------------------------- */
.hidden { display: none !important; }
.fade-in { animation: fadeIn 300ms ease both; }
.fade-out { animation: fadeOut 300ms ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
/* -----------------------------------------------------------
Mobile tweaks
----------------------------------------------------------- */
@media (max-aspect-ratio: 16/9) {
.ribbon--logo { font-size: 48px; padding: 10px 28px; }
.wood-btn--big { font-size: 28px; padding: 16px 40px; }
.tool-slot { width: 64px; height: 64px; }
.tool-icon { width: 40px; height: 40px; }
.tool-name { font-size: 10px; }
.ribbon--banner { font-size: 28px; padding: 10px 24px; }
.dye-palette { bottom: calc(1.2% + 84px); }
}