@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;
--teal: #3fd9c9;
--red: #ff6a52;
}
.mothergameholder {
background: #140a0a;
font-family: "Outfit", system-ui, sans-serif;
-webkit-user-select: none;
user-select: none;
}
.iframe_fs_back{top:70px;z-index:30;}
canvas {
display: block;
width:100%;
position:relative;
}
.ordiv{padding:10px 0;font-size:14px;color:#d7d7d7;}
#ui {
position: absolute;
top: 18px;
left: 18px;
z-index: 10;
color: #f6efe6;
width: 236px;
padding: 18px 20px 16px;
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: 18px;
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.55),
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;
}
}

#ui h1 {
margin: 0 0 12px;
font-family: "Cormorant Garamond", serif;
font-weight: 700;
font-size: 34px;
letter-spacing: 0.02em;
line-height: 0.9;
background: linear-gradient(
180deg,
#fff,
var(--gold-soft) 60%,
var(--gold)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
#ui h1::after {
content: "";
display: block;
width: 42px;
height: 2px;
margin-top: 9px;
background: linear-gradient(90deg, var(--gold), transparent);
border-radius: 2px;
}

.turn {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
margin-bottom: 14px;
letter-spacing: 0.03em;
}
.dot {
width: 13px;
height: 13px;
border-radius: 50%;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.15),
0 0 14px currentColor;
transition: 0.3s;
}
.dot.black {
background: radial-gradient(circle at 32% 28%, #5a5a64, #0c0c10);
color: #6cd;
}
.dot.white {
background: radial-gradient(circle at 32% 28%, #fff, #cfc4ad);
color: #fda;
}

.score {
display: flex;
gap: 10px;
margin-bottom: 12px;
}
.pad {
flex: 1;
padding: 9px 11px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.pad .lab {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.55;
}
.pad .lab .you {
margin-left: 5px;
color: var(--gold-soft);
text-transform: none; /* keep it "(You)", not "(YOU)" against the uppercase label */
}
.pad .num {
font-family: "Cormorant Garamond", serif;
font-size: 28px;
font-weight: 600;
line-height: 1;
margin-top: 3px;
}
.pips {
display: flex;
gap: 4px;
margin-top: 7px;
}
.pip {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
transition: 0.35s;
}
.pip.on {
background: var(--gold);
box-shadow: 0 0 8px var(--gold);
}

.hint {
font-size: 11px;
line-height: 1.5;
opacity: 0.6;
font-weight: 300;
margin-bottom: 13px;
}
.hint b {
color: var(--gold-soft);
font-weight: 500;
}

#winner {
font-family: "Cormorant Garamond", serif;
font-size: 23px;
font-weight: 700;
min-height: 0;
color: var(--gold-soft);
text-shadow: 0 0 22px rgba(231, 184, 90, 0.5);
transition: 0.5s;
}
#winner:not(:empty) {
margin-bottom: 11px;
}

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;
}
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);
}
button:active {
transform: translateY(0);
}
.iframeoverlay{z-index: 50;}
.gamestpIco{position:relative;z-index: 51;}

/* Top-right icon strip (right-to-left): reset | help | fullscreen.
reset and help are edge-anchored at fixed offsets; fullscreen is the innermost button so that when the Fullscreen API is absent and its button is removed, nothing shifts and no gap opens at the edge. */
#resetBtn,
#fullscreenBtn,
#helpBtn {
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: 90px;
display:none;
}
#helpBtn {
right: 52px;
}
#resetBtn {
right: 14px;
}
#resetBtn:hover,
#fullscreenBtn:hover,
#helpBtn: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: 248px;
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;
}
#helpPanel .sw {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
vertical-align: middle;
margin-right: 3px;
box-shadow: 0 0 6px currentColor;
}

/* New-game / mode-select modal */
#setupModal {
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);
}
#setupModal.show {
display: flex;
}
#setupModal .modal-card {
width: min(86vw, 320px);
padding: 22px;
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);
}
#setupModal h2 {
margin: 0 0 6px;
font-family: "Cormorant Garamond", serif;
font-size: 23px;
font-weight: 700;
color: var(--gold-soft);
}
#setupModal p {
margin: 0 0 16px;
font-size: 12px;
opacity: 0.78;
}
#setupModal .setup-opt {
margin-bottom: 10px;
}
#setupModal .setup-sub {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.6;
margin: 4px 0 8px;
}
#setupModal .modal-actions {
display: flex;
gap: 10px;
}
#setupModal .modal-actions .setup-opt {
width: 100%;
margin-bottom: 0;
}
#setupModal .ghost {
margin-top: 14px;
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.14);
color: #e8ddcf;
}

/* 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 card becomes a slim top bar that spans the width and stays out of the board's way. Flexbox (not grid) so wrapping is predictable. Title + turn on the left, scores + New Game on the right. */
@media (max-width: 680px), (max-height: 560px) {
#ui {
top: 0;
left: 0;
right: 0;
width: auto;
bottom: auto;
border-radius: 0 0 16px 16px;
padding: max(8px, env(safe-area-inset-top)) 12px 9px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
animation: none;
}
#ui h1 {
font-size: 20px;
margin: 0;
}
#ui h1::after {
display: none;
}
.turn {
margin: 0;
font-size: 12px;
gap: 7px;
}
.hint {
display: none;
} /* rules live in the ? panel on mobile */
.score {
margin: 0 0 0 auto;
gap: 7px;
} /* push scores to the right edge */
.pad {
padding: 4px 9px;
}
.pad .lab {
font-size: 8px;
letter-spacing: 0.12em;
}
.pad .num {
font-size: 17px;
margin-top: 1px;
}
.pips {
gap: 3px;
margin-top: 3px;
}
.pip {
width: 5px;
height: 5px;
}
#winner {
font-size: 15px;
margin: 0;
order: 5;
flex-basis: 100%;
}
#winner:empty {
display: none;
}
button {
width: auto;
padding: 7px 16px;
font-size: 11px;
}
/* icons clear the bar by sitting a touch lower, enlarged for touch */
#resetBtn,
#fullscreenBtn,
#helpBtn {
width: 34px;
height: 34px;
top: auto;
bottom: 14px;
}
#fullscreenBtn {
right: 98px;
}
#helpBtn {
right: 56px;
}
#resetBtn {
right: 14px;
}
#helpPanel {
width: min(80vw, 300px);
top: auto;
bottom: 56px;
right: 56px;
}
#stats {
left: 12px;
right: auto;
text-align: left;
}
}
/* Extra-narrow portrait: drop the title to reclaim width. */
@media (max-width: 420px) {
#ui h1 {
display: none;
}
.turn {
font-size: 11px;
}
}