:root {
--main-color: rgba(30, 16, 38, .82);
--text-color: #f7efe4;
--screen-background-color: #1b0f22;
--character-name-color: #f7c873;
--gold: #f7c873;
--gold-deep: #c9902f;
--plum: #241329;
--plum-deep: #150b1b;
--cream: #f7efe4;
--verdict-right: #8fe0b0;
--verdict-wrong: #ff9db1;
--text-box-height: 26vh;
--font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
--font-body: "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
}
body {
background-color: var(--plum-deep);
font-family: var(--font-body);
}
#device-gate {
display: none;
position: fixed;
inset: 0;
z-index: 100;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
color: var(--cream);
background-color: var(--plum-deep);
background-image:
linear-gradient(rgba(21, 11, 27, .88), rgba(21, 11, 27, .96)),
url("../assets/scenes/wedding.webp");
background-size: cover;
background-position: center;
}
#device-gate [data-gate="touch"] { display: none; }
[data-device="touch"] #device-gate [data-gate="touch"] { display: block; }
[data-device="touch"] #device-gate [data-gate="window"] { display: none; }
#device-gate h1 {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.6rem, 7vh, 3rem);
line-height: 1.15;
color: var(--gold);
}
#device-gate p {
margin: 1.2rem auto 0;
max-width: 32rem;
font-size: clamp(.95rem, 2.6vh, 1.15rem);
line-height: 1.5;
color: rgba(247, 239, 228, .88);
}
#device-gate small {
display: block;
margin-top: 1.6rem;
font-size: clamp(.7rem, 2vh, .85rem);
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(247, 200, 115, .75);
}
[data-platform="web"][data-device="touch"] #device-gate { display: flex; }
[data-platform="web"][data-device="touch"] #monogatari { display: none; }
@media (orientation: portrait), (max-width: 799px), (max-height: 449px) {
[data-platform="web"] #device-gate { display: flex; }
}
[data-screen] {
color: var(--cream);
background-color: var(--plum-deep);
}
[data-screen]:not([data-screen="game"]) {
background-image:
linear-gradient(rgba(21, 11, 27, .82), rgba(21, 11, 27, .92)),
url("../assets/scenes/wedding.webp");
}
[data-screen] h1,
[data-screen] h2,
[data-screen] h3 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: .02em;
color: var(--cream);
}
[data-screen]:not([data-screen="game"]) [data-action="back"] {
background-color: rgba(21, 11, 27, .75);
border: 1px solid rgba(247, 200, 115, .4);
color: var(--gold);
}
[data-content="game-title"] {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
padding: 0 6vw;
text-align: left;
}
[data-content="game-title"] h1 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(2.4rem, 8vh, 5.5rem);
line-height: 1.05;
color: var(--gold);
text-shadow: 0 .3rem 2rem rgba(0, 0, 0, .6);
}
[data-content="game-title"] p {
margin: .8rem 0 0;
font-size: clamp(.9rem, 2.2vh, 1.4rem);
letter-spacing: .28em;
text-transform: uppercase;
color: rgba(247, 239, 228, .7);
}
button {
font-family: var(--font-body);
}
button:focus {
border: none;
}
main-menu {
align-items: flex-end;
gap: .35rem;
padding: 0 5vw 6vh 0;
}
main-menu button {
width: auto;
min-width: 13rem;
height: auto;
margin: 0;
padding: .85rem 1.6rem;
text-align: right;
font-size: clamp(.95rem, 2.1vh, 1.3rem);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cream);
background: transparent;
border-right: 2px solid transparent;
border-radius: 0;
transition: color .2s, border-color .2s, padding .2s;
}
main-menu button:hover,
main-menu button:focus {
color: var(--gold);
background: transparent;
border-right: 2px solid var(--gold);
padding-right: 1.2rem;
}
main-menu button > span:not([data-string]) {
display: none;
}
text-box {
left: 3vw;
width: 94vw;
min-height: var(--text-box-height);
max-height: var(--text-box-height);
bottom: 1.5vh;
border: 1px solid rgba(247, 200, 115, .3);
border-radius: 1rem;
background:
linear-gradient(180deg, rgba(41, 22, 48, .9), rgba(19, 10, 25, .94));
box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .5);
backdrop-filter: blur(6px);
color: var(--text-color);
font-size: clamp(1rem, 2.4vh, 1.65rem);
line-height: 1.45;
}
text-box[mode="nvl"] {
max-height: calc(100% - 3vh);
height: calc(100% - 3vh);
}
text-box:after {
bottom: 1.5vh;
}
text-box [data-content="text"] {
justify-content: center;
}
text-box [data-content="name"] {
padding: .9rem 1.4rem 0;
}
[data-ui="who"] {
font-family: var(--font-display);
font-size: 1.05em;
letter-spacing: .06em;
}
text-box [data-content="dialog"],
text-box type-writer {
padding: .5rem 1.4rem 1rem;
}
[lang="ar"] {
font-family: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.7;
}
text-box [data-content="side-image"] {
padding: .9rem 0 .9rem 1.2rem;
}
[data-ui="face"] {
height: 100%;
aspect-ratio: 1;
object-fit: cover;
object-position: 50% 12%;
border-radius: 50%;
border: 2px solid rgba(247, 200, 115, .55);
background: radial-gradient(circle at 50% 25%, rgba(247, 200, 115, .3), rgba(36, 19, 41, .7));
box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .45);
}
[data-component="centered-dialog"] {
width: 86vw;
padding: 5rem 4rem;
background: radial-gradient(ellipse 46% 50% at center,
rgba(21, 11, 27, .95) 0%,
rgba(21, 11, 27, .86) 42%,
rgba(21, 11, 27, .45) 72%,
rgba(21, 11, 27, 0) 100%);
font-family: var(--font-display);
text-align: center;
text-shadow: 0 .3rem 2.4rem rgba(0, 0, 0, .85), 0 0 1.2rem rgba(0, 0, 0, .7);
}
[data-component="centered-dialog"] small {
display: block;
margin-top: 1.2rem;
font-family: var(--font-body);
font-size: .3em;
letter-spacing: .28em;
text-transform: uppercase;
color: rgba(247, 239, 228, .82);
}
[data-component="centered-dialog"].splash {
font-size: clamp(2rem, 9vh, 6rem);
line-height: 1.1;
color: var(--gold);
}
[data-component="centered-dialog"].verdict {
font-size: clamp(2rem, 10vh, 6.5rem);
line-height: 1.1;
letter-spacing: .02em;
}
[data-component="centered-dialog"].verdict-right {
color: var(--verdict-right);
}
[data-component="centered-dialog"].verdict-wrong {
color: var(--verdict-wrong);
}
[data-component="centered-dialog"].verdict-duel {
color: var(--gold);
font-size: clamp(1.6rem, 7vh, 4.5rem);
}
[data-component="centered-dialog"].finale {
top: 30%;
}
choice-container {
z-index: 12;
width: min(64rem, 88vw);
top: 44%;
}
@media screen and (min-width: 48em) {
choice-container { width: min(64rem, 80vw); }
}
@media screen and (min-width: 62em) {
choice-container { width: min(64rem, 70vw); }
}
@media screen and (min-width: 75em) {
choice-container { width: min(64rem, 62vw); }
}
@media screen and (min-width: 120em) {
choice-container { width: min(72rem, 55vw); }
}
choice-container [data-content="wrapper"] {
gap: .85rem;
}
choice-container button {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
height: auto;
margin: 0;
padding: 1rem 1.4rem;
text-align: left;
font-size: clamp(.92rem, 2.1vh, 1.35rem);
line-height: 1.35;
color: var(--cream);
background: linear-gradient(180deg, rgba(49, 27, 57, .94), rgba(24, 13, 30, .96));
border: 1px solid rgba(247, 200, 115, .35);
border-radius: .85rem;
box-shadow: 0 .7rem 1.8rem rgba(0, 0, 0, .45);
transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
choice-container button::before {
content: attr(data-choice);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1em;
height: 2.1em;
font-family: var(--font-display);
font-size: .95em;
color: var(--gold);
background: rgba(247, 200, 115, .12);
border: 1px solid rgba(247, 200, 115, .45);
border-radius: 50%;
}
choice-container button:hover,
choice-container button:focus {
transform: translateY(-2px);
background: linear-gradient(180deg, rgba(70, 39, 80, .96), rgba(35, 19, 42, .97));
border-color: var(--gold);
box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .55);
}
[data-screen="game"] {
overflow: hidden;
}
html,
body {
overflow: hidden;
overscroll-behavior: none;
}
[data-screen="game"] [data-character] {
max-height: none;
filter: drop-shadow(0 1.4rem 2.2rem rgba(0, 0, 0, .45));
transition: filter .45s ease, opacity .45s ease;
}
[data-screen="game"] [data-character].left {
left: 3%;
right: auto;
margin: 0;
}
[data-screen="game"] [data-character].right {
right: 3%;
left: auto;
margin: 0;
}
[data-screen="game"] [data-character="s"][data-sprite="casual"]  { height: 74vh; }
[data-screen="game"] [data-character="s"][data-sprite="wedding"] { height: 82vh; }
[data-screen="game"] [data-character="g"][data-sprite="casual"]  { height: 68vh; }
[data-screen="game"] [data-character="g"][data-sprite="wedding"] { height: 80vh; }
[data-screen="game"] [data-character="a"] { height: 66vh; }
[data-screen="game"] [data-character].lit {
filter:
drop-shadow(0 1.4rem 2.2rem rgba(0, 0, 0, .5))
drop-shadow(0 0 1.2rem rgba(255, 214, 130, .95))
drop-shadow(0 0 3.5rem rgba(255, 190, 90, .8));
}
[data-screen="game"] [data-character].dim {
filter: grayscale(1) brightness(.7) contrast(.95);
opacity: .9;
}
[data-screen="game"] [data-character="a"].finale {
right: 6%;
}
[data-screen="game"] [data-image="chest"] {
inset: auto 27% calc(var(--text-box-height) - 4vh) auto;
height: 28vh;
width: auto;
max-width: none;
max-height: none;
margin: 0;
filter: drop-shadow(0 1.2rem 2rem rgba(0, 0, 0, .5)) drop-shadow(0 0 2.5rem rgba(247, 200, 115, .7));
}
[data-screen="settings"] {
justify-content: center;
}
[data-screen="settings"] h2 {
margin: 0 0 8vh;
text-align: center;
}
[data-screen="settings"] .settings {
align-items: center;
justify-content: center;
gap: 6vw;
}
[data-screen="settings"] .settings-group {
width: min(18rem, 34vw);
align-items: center;
padding: 0;
text-align: center;
}
[data-screen="settings"] .settings-group h3,
[data-screen="settings"] [data-content="audio-settings"] > [data-string="Music"] {
display: block;
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1rem, 2.8vh, 1.7rem);
letter-spacing: .02em;
color: var(--cream);
}
[data-screen="settings"] input[type="range"] {
width: 100%;
margin: 2vh 0 0;
}
input[type=range]::-webkit-slider-runnable-track {
height: .5rem;
border-radius: .25rem;
background: rgba(247, 200, 115, .35);
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.1rem;
height: 1.1rem;
margin-top: -.3rem;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .5);
cursor: pointer;
}
input[type=range]::-moz-range-track {
height: .5rem;
border-radius: .25rem;
background: rgba(247, 200, 115, .35);
}
input[type=range]::-moz-range-thumb {
width: 1.1rem;
height: 1.1rem;
border: none;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .5);
cursor: pointer;
}
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
background: rgba(247, 200, 115, .35);
}