that its own stylesheet
(which we don't load) normally hides and shrinks. Left unstyled it defaults
to filling the button — ballooning it into a giant square ~324px tall. Hide
it so the button is a normal slim button matching the input's height. */
#newsletterSheet .sib-form-block__button svg {
display: none !important;
}
/* Hide the honeypot field */
.input--hidden {
display: none !important;
}
/* Ensure invisible recaptcha doesn't take space if it renders explicitly */
.g-recaptcha {
display: none;
}
/* Nuclear option to hide honeypot and other hidden elements */
#sib-container input[name="email_address_check"],
#sib-container .input--hidden,
input[name="email_address_check"],
.input--hidden {
display: none !important;
opacity: 0 !important;
position: absolute !important;
left: -9999px !important;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
clip: rect(0, 0, 0, 0) !important;
pointer-events: none !important;
visibility: hidden !important;
}
/* Ensure recaptcha is also hidden */
.g-recaptcha,
.grecaptcha-badge {
visibility: hidden;
}
/* Hide the visible form container inside the newsletter sheet ON DESKTOP */
/* This hides the input and button but leaves the success/error messages visible */
@media (min-width: 741px) {
#newsletterSheet #sib-container {
display: none !important;
}
}
/* Error text */
.error-text {
color: #c9302c;
font-weight: 500;
margin-top: 10px;
font-size: 0.9rem;
text-align: left;
}
/* Success text */
.success-text {
color: #218838;
font-weight: 500;
margin-top: 10px;
font-size: 0.9rem;
text-align: left;
}
/* Hide default Brevo messages inside newsletter sheet since we use custom ones */
#newsletterSheet .sib-form-message-panel {
display: none !important;
}
/* Helper for Intro Animation Layout Preservation */
.invisible-layout {
visibility: hidden !important;
opacity: 0;
}
/* Text Animation Effects */
.char {
display: inline-block;
white-space: pre;
}
.effect-wave-pop .char {
animation: wavePop 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
opacity: 0;
transform: scale(0);
animation-delay: calc(var(--i) * 0.01s);
/* Twice as fast */
}
@keyframes wavePop {
to {
opacity: 1;
transform: scale(1);
}
}
.effect-headshake {
animation: headshake 0.5s ease-in-out;
display: inline-block;
/* Needed for transform to work on inline elements */
}
@keyframes headshake {
0% {
transform: translateX(0);
}
6.5% {
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
transform: translateX(5px) rotateY(7deg);
}
31.5% {
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
transform: translateX(2px) rotateY(3deg);
}
50% {
transform: translateX(0);
}
}
#postGameControls {
margin-top: -42px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
width: 100%;
}
/* Ensure children extend full width to allow internal centering or full width buttons */
#postGameControls>div {
width: 100%;
}
/* --- Text Animation Effects --- */
.char {
display: inline-block;
white-space: pre;
opacity: 0;
/* Start hidden */
}
.effect-wave-opacity .char {
animation: waveOpacityFadeIn 0.3s ease-in-out forwards;
animation-delay: calc(var(--i) * 0.03s);
}
@keyframes waveOpacityFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Game Complete Overlay */
#gameCompleteOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
color: #ffffff !important;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
#gameCompleteOverlay h1 {
font-size: 4rem;
margin-bottom: 20px;
color: #ffffff !important;
font-family: 'Playfair Display', serif;
font-weight: 400;
line-height: 1.1;
}
#gameCompleteOverlay p {
font-size: 1.4rem;
max-width: 600px;
line-height: 1.5;
color: #ffffff !important;
margin: 0;
}
#gameCompleteOverlay .btn-container {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
max-width: 300px;
margin-top: 40px;
}
#gameCompleteOverlay .btn-share {
background-color: #ffffff;
color: #000000;
border: none;
font-size: 1.2rem;
padding: 12px 20px;
width: 100%;
}
#gameCompleteOverlay .btn-restart {
background-color: transparent;
color: #ffffff;
border: 1px solid #ffffff;
font-size: 1.2rem;
padding: 12px 20px;
width: 100%;
}
#gameCompleteOverlay .btn-share:hover,
#gameCompleteOverlay .btn-restart:hover {
opacity: 0.9;
transform: scale(1.02);
}
/* Mobile Responsive Adjustments */
@media (max-width: 600px) {
#gameCompleteOverlay h1 {
font-size: 2.5rem;
}
#gameCompleteOverlay p {
font-size: 1.2rem;
}
}
@media (max-width: 360px) {
#gameCompleteOverlay h1 {
font-size: 2rem;
}
#gameCompleteOverlay p {
font-size: 1rem;
}
#gameCompleteOverlay .btn-container {
max-width: 100%;
}
}
/* Global Scrollbar */
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--main-text-color);
border-radius: 0;
}
.bottom-layout-spacer {
height: 74px;
margin-top: 10px;
width: 100%;
}
/* Victory Share Menu Styles */
.victory-share-container {
position: relative;
display: block;
/* changed from inline-block to block/flex item behavior */
width: 280px;
/* Explicit width */
}
.victory-share-menu {
display: flex;
flex-direction: column;
gap: 10px;
background: transparent;
padding: 0;
margin: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease-out, opacity 0.3s ease-in;
/* Start hidden */
pointer-events: none;
/* Prevent clicks when hidden */
}
.victory-share-menu.expanded {
max-height: 300px;
/* Sufficient to fit 4 buttons */
opacity: 1;
pointer-events: auto;
margin-top: -50px;
/* Pull up to cover the trigger button or replace it */
position: relative;
z-index: 10;
}
/* We want the menu to appear 'in place' of the trigger button.
When expanded, we hide the trigger button.
But simpler: Just toggle visibility/logic in JS.
CSS Transition for height is good.
*/
/* Shared Style for Game Complete Overlay Buttons */
#gameCompleteOverlay .btn-share,
#gameCompleteOverlay .btn-share-option,
#gameCompleteOverlay .btn-restart {
background-color: transparent;
color: #ffffff;
border: 1px solid #ffffff;
font-size: 1.2rem;
padding: 12px 20px;
width: 100%;
cursor: pointer;
transition: all 0.3s ease;
box-sizing: border-box;
/* Ensure padding included */
}
#gameCompleteOverlay .btn-share-option {
text-align: left;
display: flex;
align-items: center;
gap: 10px;
}
#gameCompleteOverlay .btn-share:hover,
#gameCompleteOverlay .btn-share-option:hover,
#gameCompleteOverlay .btn-restart:hover {
opacity: 1;
transform: none;
background: white;
color: var(--main-text-color);
border-color: white;
}
.btn-share-option svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* Specific Tweak for Game Complete Overlay Layout */
#gameCompleteOverlay .btn-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
width: 100%;
/* Ensure container allows full width children if needed */
}
/* Ensure buttons are same width if possible, or wide enough */
.victory-share-container,
.btn-restart {
width: 300px;
max-width: 90vw;
/* Safety for mobile */
/* Fixed width for consistency */
box-sizing: border-box;
/* Ensure padding doesn't add to width */
}
.btn-share,
.btn-share-option {
width: 100%;
/* Fill container */
}
#finalMessage {
font-size: 1.4rem;
line-height: 2;
}
/* Supporter Mode - Hide Ads */
body.supporter-mode .adsbygoogle {
display: none !important;
}
/* License Section Styles */
#licenseKeyInput {
border-radius: 0 !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
}
#verifyLicenseBtn {
height: 34px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 34px !important;
}
/* Modal Center Override for Sheets — desktop only. On mobile (<=600px)
these sheets fall back to the bottom-sheet behavior defined in the
earlier @media (max-width: 600px) block. */
@media (min-width: 601px) {
.sheet.modal-center {
bottom: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
width: 90%;
max-width: 400px;
max-height: 90vh;
border-radius: 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.sheet.modal-center.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
visibility: visible;
}
}
/* Mobile share-sheet only: elements that should only render on devices where
navigator.share() with files is supported (iOS Safari, Android Chrome).
The body class is set by app.js once on init. */
.share-sheet-only {
display: none;
}
body.has-share-sheet .share-sheet-only {
display: block;
}
/* Mid-puzzle share consolidation: on mobile, hide the four per-platform
"Ask X" buttons in favour of the single #askFriendBtn, and vice versa
on desktop. !important is needed because the game-over flow calls
jQuery .show() on each of these, which would otherwise win. */
body:not(.has-share-sheet) #askFriendBtn {
display: none !important;
}
body.has-share-sheet #askRedditBtn,
body.has-share-sheet #askFacebookBtn,
body.has-share-sheet #askXBtn,
body.has-share-sheet #askWhatsappBtn {
display: none !important;
}
/* Share-image builder — off-screen 1080px-wide DOM captured by html2canvas
to produce a portrait-orientation shareable PNG. */
#shareImageBuilder {
position: fixed;
left: -100000px;
top: 0;
width: 1080px;
pointer-events: none;
z-index: -1;
}
.share-image-root {
width: 1080px;
background: var(--main-bg-color);
color: var(--main-text-color);
/* Tight margins (~25% less than before) so cards get more horizontal room. */
padding: 24px 36px 36px 36px;
font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-sizing: border-box;
}
.share-image-brand-header {
text-align: center;
margin-bottom: 24px;
color: var(--main-text-color);
line-height: 1.2;
}
.share-image-brand-header .share-image-brand {
font-family: "Playfair Display", serif;
font-weight: 500;
font-size: 60px;
}
.share-image-brand-header .share-image-url {
font-size: 32px;
margin-top: 2px;
}
.share-image-instructions {
text-align: center;
margin-bottom: 32px;
/* Use the same body font + size as the statements so the two feel like
one continuous voice. Brand title above stays in Playfair Display. */
font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-weight: 400;
color: var(--main-text-color);
}
/* Set font metrics on the directly — the global `p { font-size: 0.9rem }`
rule earlier in this file has equal specificity to inherited values and
would otherwise win, shrinking the text. */
.share-image-instructions p {
margin: 0;
font-size: 36px;
line-height: 1.4;
font-weight: 400;
}
.share-image-instructions strong {
font-weight: 600;
}
.share-image-cards {
display: flex;
flex-direction: column;
gap: 28px;
}
.share-image-card {
display: flex;
flex-direction: row;
align-items: stretch;
border: 1px solid var(--main-text-color);
}
.share-image-portrait {
flex: 0 0 187px;
width: 187px;
/* Use min-height instead of a hard height so the portrait box stretches
with the card when the text side grows past 224px. background-size:
100% auto then reveals more of the character (down toward the
shoulders / chest) instead of leaving an empty white strip below. */
min-height: 224px;
background-color: var(--main-bg-color);
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
border-right: 1px solid var(--main-text-color);
}
.share-image-text {
flex: 1 1 auto;
padding: 22px 30px;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-width: 0;
}
.share-image-text h3 {
font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-weight: 500;
font-size: 36px;
line-height: 1.1;
margin: 0 0 16px 0;
color: var(--main-text-color);
}
.share-image-text p {
font-family: "TikTok Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0 0 10px 0;
font-size: 36px;
line-height: 1.4;
font-weight: 400;
color: var(--main-text-color);
}
.share-image-text p:last-child {
margin-bottom: 0;
}