@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Outfit:wght@300;400;500;600&display=swap");

:root {
--gold: #e7b85a;
--gold-soft: #f2d79b;
--ink: #0b0708;
}
.mothergameholder {
background: #140a0a;
font-family: "Outfit", system-ui, sans-serif;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
canvas {
display: block;
touch-action: none;
-webkit-user-select: none;
user-select: none;

-webkit-touch-callout: none;

-webkit-tap-highlight-color: transparent;
}

#ui {
position: absolute;
top: 14px;
left: 14px;
z-index: 10;
color: #f6efe6;
padding: 9px 15px;
background: linear-gradient(
160deg,
rgba(34, 16, 16, 0.72),
rgba(12, 6, 6, 0.72)
);
border: 1px solid rgba(231, 184, 90, 0.22);
border-radius: 14px;
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
box-shadow:
0 18px 44px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}

/* One slim horizontal row: title · Next · Score · Best */
.bar {
display: flex;
align-items: center;
gap: 13px;
}
.bar .sep {
width: 1px;
align-self: stretch;
background: rgba(231, 184, 90, 0.18);
}

#ui .gmmnhd {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 26px;
letter-spacing: 0.02em;
line-height: 1;
background: linear-gradient(
180deg,
#fff,
var(--gold-soft) 60%,
var(--gold)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

/* Score / Best as inline label-over-number figures. */
.stat {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
}
.stat .slab {
font-size: 8px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.5;
margin-bottom: 3px;
}
.stat .snum {
font-family: "Cormorant Garamond", serif;
font-size: 21px;
font-weight: 600;
line-height: 0.85;
}

/* Next: inline group, label then dots. */
.next {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.next-lab {
font-size: 8px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.5;
}
.next .dots {
display: flex;
gap: 6px;
}
.next .b {
width: 15px;
height: 15px;
border-radius: 50%;
box-shadow:
inset 0 2px 3px rgba(255, 255, 255, 0.5),
inset 0 -2px 4px rgba(0, 0, 0, 0.55),
0 0 9px currentColor;
}
/* Scale-pop when the preview changes each turn, so the eye catches it. */
.next .b.pop {
animation: dotpop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes dotpop {
0% {
transform: scale(0.2);
opacity: 0;
}
60% {
transform: scale(1.25);
opacity: 1;
}
100% {
transform: scale(1);
}
}

/* Floating "+N" that rises off the Score number when a line clears. */
.gain {
position: absolute;
top: -16px;
left: 0;
font-family: "Cormorant Garamond", serif;
font-size: 19px;
font-weight: 700;
color: var(--gold-soft);
text-shadow: 0 0 14px rgba(231, 184, 90, 0.7);
opacity: 0;
pointer-events: none;
}
.gain.fly {
animation: gainfly 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gainfly {
0% {
opacity: 0;
transform: translateY(6px) scale(0.7);
}
18% {
opacity: 1;
transform: translateY(0) scale(1.1);
}
100% {
opacity: 0;
transform: translateY(-34px) scale(1);
}
}

/* Status only occupies space when it actually has something to say. */
#status {
font-size: 11.5px;
line-height: 1.4;
color: var(--gold-soft);
opacity: 0.85;
font-weight: 400;
letter-spacing: 0.02em;
}
#status:not(:empty) {
margin-top: 12px;
}

.mothergameholder button {
width: 100%;
padding: 10px;
border: 1px solid rgba(231, 184, 90, 0.4);
border-radius: 11px;
background: linear-gradient(
180deg,
rgba(231, 184, 90, 0.16),
rgba(231, 184, 90, 0.05)
);
color: var(--gold-soft);
font-family: "Outfit";
font-weight: 600;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: 0.2s;
}
.mothergameholder button:hover {
background: linear-gradient(
180deg,
rgba(231, 184, 90, 0.3),
rgba(231, 184, 90, 0.12)
);
box-shadow: 0 0 22px rgba(231, 184, 90, 0.25);
transform: translateY(-1px);
}
.mothergameholder button:active {
transform: translateY(0);
}

/* Top-right icon strip (right-to-left): mute | new | undo | help | fullscreen.
mute, new, undo, help are edge-anchored; fullscreen is innermost so that when the Fullscreen API is absent and its button is removed, nothing shifts. */
#muteBtn,
#newBtn,
#undoBtn,
#helpBtn,
#fullscreenBtn {
position: absolute;
top: 14px;
width: 30px;
height: 30px;
z-index: 12;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gold-soft);
background: rgba(20, 10, 10, 0.55);
border: 1px solid rgba(231, 184, 90, 0.22);
border-radius: 9px;
cursor: pointer;
padding: 0;
transition: 0.15s;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
#fullscreenBtn {
right: 166px;display:none;
}
#helpBtn {
right: 128px;
}
#undoBtn {
right: 90px;
}
#newBtn {
right: 52px;
}
#muteBtn {
right: 14px;
}
#undoBtn[disabled] {
opacity: 0.35;
cursor: default;
}
/* Muted state: dim the waves, show the slash. */
#muteBtn.muted {
color: #c98a8a;
}
#muteBtn .slash {
opacity: 0;
}
#muteBtn.muted .wave {
opacity: 0.2;
}
#muteBtn.muted .slash {
opacity: 1;
}
#muteBtn:hover,
#newBtn:hover,
#undoBtn:not([disabled]):hover,
#helpBtn:hover,
#fullscreenBtn:hover {
transform: scale(1.1);
border-color: rgba(231, 184, 90, 0.5);
}

/* Rules flyout */
#helpPanel {
position: absolute;
top: 52px;
right: 52px;
z-index: 11;
width: 252px;
font-size: 12px;
line-height: 1.65;
color: #e8ddcf;
background: linear-gradient(
160deg,
rgba(34, 16, 16, 0.92),
rgba(12, 6, 6, 0.92)
);
border: 1px solid rgba(231, 184, 90, 0.24);
padding: 15px 17px;
border-radius: 14px;
text-align: left;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition:
opacity 0.18s ease-out,
transform 0.18s ease-out;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
#helpPanel.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#helpPanel h2 {
margin: 0 0 9px;
font-family: "Cormorant Garamond", serif;
font-size: 21px;
font-weight: 700;
color: var(--gold-soft);
}
#helpPanel p {
margin: 0 0 9px;
opacity: 0.82;
}
#helpPanel b {
color: var(--gold-soft);
font-weight: 600;
}

/* Game-over modal */
#modal,
#confirmModal {
position: absolute;
inset: 0;
z-index: 20;
display: none;
align-items: center;
justify-content: center;
background: rgba(8, 4, 4, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
#modal.show,
#confirmModal.show {
display: flex;
}
#modal .modal-card,
#confirmModal .modal-card {
width: min(86vw, 320px);
padding: 24px;
border-radius: 16px;
text-align: center;
color: #e8ddcf;
background: linear-gradient(
160deg,
rgba(34, 16, 16, 0.95),
rgba(12, 6, 6, 0.95)
);
border: 1px solid rgba(231, 184, 90, 0.24);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
#modal h2,
#confirmModal h2 {
margin: 0 0 4px;
font-family: "Cormorant Garamond", serif;
font-size: 27px;
font-weight: 700;
color: var(--gold-soft);
}
#modal .final {
font-family: "Cormorant Garamond", serif;
font-size: 46px;
font-weight: 600;
line-height: 1;
margin: 8px 0 4px;
color: #fff;
}
#modal p,
#confirmModal p {
margin: 0 0 18px;
font-size: 12px;
opacity: 0.75;
letter-spacing: 0.04em;
}
#confirmModal .confirm-actions {
display: flex;
gap: 10px;
}
#confirmModal .confirm-actions button {
flex: 1;
}
#confirmModal .ghost {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.18);
color: #e8ddcf;
}
#confirmModal .ghost:hover {
background: rgba(255, 255, 255, 0.12);
box-shadow: none;
}

/* Discreet FPS / stats readout, bottom-right */
#stats {
position: absolute;
right: 14px;
bottom: 12px;
z-index: 10;
font-family: "SF Mono", Menlo, monospace;
font-size: 10px;
line-height: 1.35;
color: #f6efe6;
text-align: right;
white-space: pre-line;
mix-blend-mode: difference;
cursor: pointer;
padding: 3px 5px;
opacity: 0.7;
}
#stats .extra {
display: none;
}
#stats.expanded .extra {
display: block;
}

/* Mobile / short viewports: the bar spans the top edge. */
@media (max-width: 680px), (max-height: 560px) {
#ui {
top: 0;
left: 0;
right: 0;
bottom: auto;
border-radius: 0 0 16px 16px;
padding: max(7px, env(safe-area-inset-top)) 12px 8px;
animation: none;
}
.bar {
gap: 11px;
}
#ui .gmmnhd {
font-size: 19px;
}
#status {
display: none;
}
.bar .sep {
display: none;
}
.next-lab {
display: none;
}
.next .b {
width: 13px;
height: 13px;
}
.stat .snum {
font-size: 18px;
}
#newBtn,
#undoBtn,
#helpBtn,
#fullscreenBtn,
#muteBtn {
width: 34px;
height: 34px;
top: auto;
bottom: 14px;
}
#muteBtn {
right: 14px;
}
#newBtn {
right: 54px;
}
#undoBtn {
right: 94px;
}
#helpBtn {
right: 134px;
}
#fullscreenBtn {
right: 174px;
}
#helpPanel {
width: min(80vw, 300px);
top: auto;
bottom: 56px;
right: 56px;
}
#stats {
left: 12px;
right: auto;
text-align: left;
}
}
@media (max-width: 460px) {
#ui .gmmnhd,
.bar .sep {
display: none;
}
}
.iframe_fs_back{top:50px;}
.iframe_fs_back,.iframeoverlay{z-index:101}
.gamestpIco{position:relative;z-index:102}