<span style="display:block; text-align:center; font-size:3em; color:#d0faff; filter: drop-shadow(0 0 1px #b8d4e7) drop-shadow(0 0 2px #ffffff); font-family: 'Courier New', monospace;">✦ 🩶 ✦</span>
<span style="display:block; background: rgba(18, 41, 64, 0.7); padding: 1em; border: 2px solid #98c9ff; border-radius: 10px; font-size: 1.5em; color: #e0f7ff; text-align: center; font-family: 'Georgia', serif; box-shadow: 0 0 10px #98c9ff;">Shoreline Tales</span>
A quiet town by the sea, where stories drift in on the tide.
• [[Begin Your Story->Introduction]]
• [[Meet the Creators->About]]
• [[Exit Game->End]]
<style>
tw-link {
display: block;
font-size: 1.3em;
margin: 0.8em 0;
text-align: center;
}
</style>
<style>
.glowSilver {
font-weight: 700;
color: #c0c9d6;
text-shadow:
0 0 5px #b6c9db,
0 0 10px #a8c2e0,
0 0 20px #9ab8f4,
0 0 30px #9ab8f4,
0 0 40px #a8c2e0,
0 0 50px #b6c9db;
animation: pulseGlow 3s infinite alternate;
}
@keyframes pulseGlow {
0% {
text-shadow:
0 0 4px #9ab8f4,
0 0 8px #9ab8f4,
0 0 12px #a8c2e0,
0 0 16px #b6c9db;
}
100% {
text-shadow:
0 0 8px #b6c9db,
0 0 16px #a8c2e0,
0 0 24px #9ab8f4,
0 0 32px #9ab8f4;
}
}
.introContainer {
max-width: 750px;
margin: 3em auto;
padding: 2.5em 3em;
background: rgba(35, 50, 65, 0.85);
border-radius: 20px;
box-shadow: 0 0 25px #8a9bc3;
font-family: Georgia, serif;
color: #d8e2f1;
font-size: 1.22em;
line-height: 1.75;
text-align: center;
user-select: none;
}
.introButton {
margin-top: 3.4em;
font-weight: 700;
font-size: 1.3em;
color: #e9f1ff;
background: linear-gradient(145deg, #90a9de 0%, #6c7dad 100%);
padding: 1em 2.4em;
border-radius: 12px;
box-shadow: 0 0 15px #a0b0dd;
cursor: pointer;
user-select: none;
display: inline-block;
text-decoration: none;
}
.introButton:hover {
background: linear-gradient(145deg, #6c7dad 0%, #90a9de 100%);
box-shadow: 0 0 25px #cad9ff;
}
</style>
<div class="introContainer">
<p>
You sit at the edge of the coastline, the early morning sun barely peeking over the horizon. The salty breeze carries the sharp scent of seaweed and brine, and waves lap gently against the jagged rocks below. Somewhere distant, a lone gull cries out — its voice sharp and lonely, a reminder of the vast, open world beyond.
</p>
<p style="margin-top: 1.8em;">
You are <span class="glowSilver">Marisyl</span>.
</p>
<p style="margin-top: 1.6em;">
A cat monster who doesn't speak — but your silence is far from empty. It is full of feeling, memory, and quiet strength. You have always found comfort in the hush between tides, in the endless rhythm of the sea’s breath.
</p>
<p style="margin-top: 1.6em;">
Today, something stirs. The wind carries a different weight. The tide shifts with a subtle urgency.
</p>
<p style="margin-top: 1.6em;">
Something is beginning.
</p>
(link: "Begin your journey")[ (goto: "Appearance Choice") ]
</div>
|styleFur>[
<div style="max-width: 600px; margin: 2em auto; padding: 2em; background: rgba(210, 230, 245, 0.15); border-radius: 14px; border: 2px solid #a0c4ff; font-family: 'Georgia', serif; color: #336699; line-height: 1.6; text-align: center; box-shadow: 0 0 12px #aaccee;">
<h2 style="font-size: 2.2em; margin-bottom: 0.5em;">🐾 Before you go, let’s shape how the world sees you.</h2>
<p style="font-size: 1.1em; margin-bottom: 2em; font-style: italic; color: #5882a3;">
What color is your fur? Choose the shade that feels like home to your soul — every hue tells a story.
</p>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4em;">
(link: "🌫️ Soft grey\n[like fog before dawn]")[
(set: $furColor to "soft grey")
(goto: "Eye Color")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #c4d4db;
border: 2px solid #7a8ca2;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #aec4d9;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
(link: "🌞 Sandy gold\n[warm like the beach]")[
(set: $furColor to "sandy gold")
(goto: "Eye Color")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #f5deb3;
border: 2px solid #d2b48c;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #e3cba1;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
(link: "🌑 Deep black\n[like a moonless sea]")[
(set: $furColor to "deep black")
(goto: "Eye Color")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #222222;
border: 2px solid #555555;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
color: #ddd;
cursor: pointer;
box-shadow: 1px 1px 6px #444444;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
(link: "🐾 Mottled calico\n[specks of rust and cream]")[
(set: $furColor to "mottled calico")
(goto: "Eye Color")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #f4e1d2;
border: 2px solid #d8b8a3;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #e7cfc2;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
(link: "❄️ Silvery blue\n[almost shimmering]")[
(set: $furColor to "silvery blue")
(goto: "Eye Color")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #c8dff2;
border: 2px solid #9ec5e6;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #a6c9e9;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
(link: "🌸 Soft mauve\n[like evening petals]")[
(set: $furColor to "soft mauve")
(goto: "Eye Color")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #d1b3c4;
border: 2px solid #af8aa6;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #c7a7bb;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
(link: "🤍 Ivory white\n[pure as fresh shells]")[
(set: $furColor to "ivory white")
(goto: "Eye Color")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #f7f7e8;
border: 2px solid #c9c9b3;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #e3e3ca;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
</div>
</div>
]
|styleEye>[
<div style="max-width: 600px; margin: 2em auto; padding: 2em; background: rgba(230, 220, 245, 0.15); border-radius: 14px; border: 2px solid #b39ddb; font-family: 'Georgia', serif; color: #4b3b70; line-height: 1.6; text-align: center; box-shadow: 0 0 12px #9e8cc3;">
<h2 style="font-size: 2.2em; margin-bottom: 0.5em;">Your eyes reflect something deep and unseen.</h2>
<p style="font-size: 1.1em; margin-bottom: 2em; font-style: italic; color: #6b5999;">
What color are they? Each shade whispers secrets about the soul.
</p>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4em;">
(link: "🌊 Ocean blue\n[calm and endless]")[
(set: $eyeColor to "ocean blue")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #a3cde3;
border: 2px solid #739fcf;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #7ca6d6;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
(link: "🌟 Golden amber\n[fierce and bright]")[
(set: $eyeColor to "golden amber")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #f0c75e;
border: 2px solid #b88a1e;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #dbb848;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
(link: "⛈ Storm grey\n[full of quiet power]")[
(set: $eyeColor to "storm grey")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #a9a9a9;
border: 2px solid #6f6f6f;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #828282;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
color: #eee;
]
]
(link: "💜 Violet\n[strange and beautiful]")[
(set: $eyeColor to "violet")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #9b59b6;
border: 2px solid #713d88;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #8046a3;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
color: #f2e6fc;
]
]
(link: "🌿 Mint green\n[soft and unexpected]")[
(set: $eyeColor to "mint green")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #a7d7c5;
border: 2px solid #5f9e8f;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #7bb09e;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
(link: "💙 Ice blue\n[cold and clear]")[
(set: $eyeColor to "ice blue")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #c0e7f9;
border: 2px solid #7ec3e5;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #94c6ea;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
]
]
(link: "🔥 Fiery red\n[intense and burning]")[
(set: $eyeColor to "fiery red")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #ef6e6e;
border: 2px solid #b44545;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #cf6363;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
color: #fff;
]
]
(link: "🌌 Cosmic black\n[mystery beyond stars]")[
(set: $eyeColor to "cosmic black")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
display: inline-block;
flex: 1 1 45%;
background: #1a1a2e;
border: 2px solid #3d3d5c;
border-radius: 12px;
padding: 1em 1.2em;
font-size: 1.05em;
cursor: pointer;
box-shadow: 1px 1px 6px #222244;
white-space: pre-wrap;
user-select: none;
text-align: center;
margin-bottom: 0.5em;
color: #aaa;
]
]
<!-- Special Otherworldly Eye Colors Button -->
(link: "✨ Otherworldly Colors...")[
(goto: "Otherworldly Eyes")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 95%;
background: #f3e8ff;
border: 3px dashed #ab82ff;
border-radius: 16px;
padding: 1.5em 1.5em;
font-size: 1.3em;
font-weight: bold;
color: #7a3eff;
cursor: pointer;
text-shadow: 0 0 6px #bd9aff;
user-select: none;
text-align: center;
margin-top: 1em;
box-shadow: 0 0 15px #b87dff;
]
]
</div>
</div>
]
<style>
.sceneContainer {
max-width: 720px;
margin: 3em auto;
padding: 2.8em 3em;
background: rgba(25, 35, 45, 0.88);
border-radius: 18px;
box-shadow: 0 0 20px #9db4cc;
font-family: "Georgia", serif;
color: #e6edf5;
font-size: 1.18em;
line-height: 1.8;
text-align: left;
user-select: none;
}
.sceneLink {
display: inline-block;
margin-top: 2.8em;
font-weight: 700;
font-size: 1.2em;
color: #edf6ff;
background: linear-gradient(120deg, #7aa6d6, #4f6b92);
padding: 0.9em 2em;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 0 15px #a7c5e2;
}
.sceneLink:hover {
background: linear-gradient(120deg, #4f6b92, #7aa6d6);
box-shadow: 0 0 25px #c7e4ff;
}
</style>
<div class="sceneContainer">
<p>
The wind brushes through your <strong>$furColor </strong> fur, tugging gently like a memory trying to surface. It’s cool, briny, and familiar — the kind of wind that smells like driftwood and carries stories whispered between the tides.
</p>
<p>
Your <strong>$eyeColor </strong> eyes reflect the wide sky above — open, endless, and streaked with the fading colors of morning. In their quiet shine, there’s a sense of something old stirring. Something waiting.
</p>
<p>
You wear <strong>$clothes </strong>, a quiet choice that fits your rhythm. It moves with you, not against you. With <strong>$accessory </strong> to finish the look, and <strong>$shoes </strong> grounding your steps, you begin the day not as someone arriving, but as someone returning.
</p>
<p>
Overhead, a gull circles — its wings slicing the sky with soft, spiraling arcs. It cries once, sharp and distant. Down in the market square, a familiar voice shouts a greeting to no one in particular. The clatter of crates and laughter rises like mist.
</p>
<p>
The salt in the air tastes like yesterday, but the hush beneath it says something different. There’s a weight to this morning. The kind that clings just behind your ribs. The kind that says:
</p>
<p>
<em>Something’s about to change.</em>
</p>
<p>
And just beyond the bend in the road — past the brush, past the dew-soaked moss — something is waiting.
</p>
(link: "Step forward")[ (goto: "Meet the Locals") ]
</div>
|styleAccessoryChoice>[
<div style="max-width: 650px; margin: 2em auto; padding: 2.5em; background: rgba(200, 230, 210, 0.18); border-radius: 20px; border: 2px solid #6da96a; font-family: 'Georgia', serif; color: #3e6b3d; line-height: 1.8; text-align: center; box-shadow: 0 0 18px #7bbf79;">
<h2 style="font-size: 2.2em; margin-bottom: 1em; font-weight: 700; text-shadow: 1px 1px 7px #6cab6c;">
What small detail finishes the look?
</h2>
<p style="font-size: 1.15em; margin-bottom: 2em; font-style: italic; color: #5a8b5c;">
Choose an accessory that whispers your personality or the story you want to tell.
</p>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8em;">
(link: "A delicate necklace made from driftwood, sea glass, and tiny shells")[
(set: $accessory to "a delicate necklace made from driftwood, sea glass, and tiny shells")
(goto: "Shoe Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #d3ebd7;
border: 2px solid #5c9961;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 12px #88b372;
color: #3c693b;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "A small leather pouch tied at your hip, always brimming with curious trinkets")[
(set: $accessory to "a small leather pouch tied at your hip, always brimming with curious trinkets")
(goto: "Shoe Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #a87f5a;
border: 2px solid #7e5e3e;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 12px #b3946f;
color: #4a3723;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "A single, elegant earring shaped like a weathered fish hook")[
(set: $accessory to "a single elegant earring shaped like a weathered fish hook")
(goto: "Shoe Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #c9d8c9;
border: 2px solid #7aa070;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 12px #a4b18a;
color: #406038;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "A soft, sea-blue ribbon tied playfully to your tail or fur")[
(set: $accessory to "a soft, sea-blue ribbon tied playfully to your tail or fur")
(goto: "Shoe Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #bdd7d7;
border: 2px solid #529494;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 12px #7da6a6;
color: #2f6363;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "No accessories — just the wind brushing your fur")[
(set: $accessory to "no accessories, just the wind brushing your fur")
(goto: "Shoe Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 95%;
background: #e0f2df;
border: 2px solid #7ab576;
border-radius: 20px;
padding: 1.9em 2.2em;
font-size: 1.2em;
cursor: pointer;
box-shadow: 1px 1px 15px #a6d3a5;
color: #3b6e3a;
text-align: center;
font-weight: 600;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
margin-top: 1.8em;
]
]
</div>
</div>
]
|styleClothingChoice>[
<div style="max-width: 650px; margin: 2em auto; padding: 2.5em; background: rgba(180, 220, 230, 0.18); border-radius: 20px; border: 2px solid #74a9c8; font-family: 'Georgia', serif; color: #2f496e; line-height: 1.8; text-align: center; box-shadow: 0 0 16px #8ab7d6;">
<h2 style="font-size: 2.3em; margin-bottom: 1em; font-weight: 700; text-shadow: 1px 1px 7px #7ca8c7;">
You dress with care. Even in a quiet town like this, clothing tells a story.
</h2>
<p style="font-size: 1.15em; margin-bottom: 2em; font-style: italic; color: #5a7f9d;">
What are you wearing today? Pick the outfit that best fits your mood and the tale you want to weave.
</p>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8em;">
(link: "A long, hooded cloak stitched with seashells and driftwood beads")[
(set: $clothes to "a long, hooded cloak stitched with seashells and driftwood beads")
(goto: "Accessory Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #d3e7e8;
border: 2px solid #5a9ca0;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 10px #92bdc0;
color: #336a70;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "A weathered leather jacket paired with patched sailor pants, rugged and well-traveled")[
(set: $clothes to "a weathered leather jacket paired with patched sailor pants")
(goto: "Accessory Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #8d7a6b;
border: 2px solid #5a4f44;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 10px #a1897e;
color: #3c2c1e;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "A sleeveless linen tunic tied with braided rope, light and breezy for warm days")[
(set: $clothes to "a sleeveless linen tunic tied with braided rope")
(goto: "Accessory Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #e7f1de;
border: 2px solid #8aa156;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 10px #a7c081;
color: #4d6b2f;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "A soft cardigan paired with a long seafoam-colored skirt, cozy and gentle")[
(set: $clothes to "a soft cardigan paired with a long seafoam-colored skirt")
(goto: "Accessory Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #c7dce0;
border: 2px solid #59959d;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 10px #a1b9bf;
color: #3b5c61;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "Simple flowing robes adorned with faded wave patterns, whispering of the sea’s calm")[
(set: $clothes to "simple flowing robes adorned with faded wave patterns")
(goto: "Accessory Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #dae9f1;
border: 2px solid #6f93ad;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 10px #8aadca;
color: #2f4f6a;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "A cozy wool sweater with intricate knit patterns, perfect for chilly nights")[
(set: $clothes to "a cozy wool sweater with intricate knit patterns")
(goto: "Accessory Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #b4b6b8;
border: 2px solid #7a7c7e;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 10px #8e9092;
color: #3a3a3a;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "A tailored vest and crisp linen trousers, neat and sharp for formal occasions")[
(set: $clothes to "a tailored vest and crisp linen trousers")
(goto: "Accessory Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #e0dcd3;
border: 2px solid #a59f93;
border-radius: 16px;
padding: 1.6em 1.8em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 10px #b7b2aa;
color: #4a463e;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "A patchwork dress woven from colorful scraps, full of personality and charm")[
(set: $clothes to "a patchwork dress woven from colorful scraps")
(goto: "Accessory Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 95%;
background: #f7d6a1;
border: 2px solid #d4a357;
border-radius: 22px;
padding: 1.9em 2.2em;
font-size: 1.2em;
cursor: pointer;
box-shadow: 1px 1px 12px #e1bb71;
color: #6f4f1e;
text-align: center;
font-weight: 600;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
margin-top: 1.8em;
]
]
</div>
</div>
]
|styleShoeChoice>[
<div style="max-width: 650px; margin: 2em auto; padding: 2.8em; background: rgba(180, 210, 230, 0.2); border-radius: 20px; border: 2px solid #557da3; font-family: 'Georgia', serif; color: #2e4a6f; line-height: 1.8; text-align: center; box-shadow: 0 0 18px #7498c2;">
<h2 style="font-size: 2.3em; margin-bottom: 1.2em; font-weight: 700; text-shadow: 1px 1px 6px #577aad;">
And on your feet?
</h2>
<p style="font-size: 1.15em; margin-bottom: 2.3em; font-style: italic; color: #466b98;">
Every step tells a story — how do you meet the world beneath you?
</p>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1.9em;">
(link: "Worn leather boots with seaweed laces, weathered by salt and sand")[
(set: $shoes to "worn leather boots with seaweed laces")
(goto: "Starting Scene")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #9aa9c9;
border: 2px solid #5d6e9b;
border-radius: 16px;
padding: 1.7em 2em;
font-size: 1.15em;
cursor: pointer;
box-shadow: 1px 1px 14px #768ab5;
color: #2a3a5a;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "Barefoot — you trust the soft sand and smooth stone underfoot")[
(set: $shoes to "bare feet")
(goto: "Starting Scene")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #d4e5f8;
border: 2px solid #a3badc;
border-radius: 16px;
padding: 1.7em 2em;
font-size: 1.15em;
cursor: pointer;
box-shadow: 1px 1px 14px #aec5dc;
color: #1f3552;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "Simple sandals adorned with smooth stone buttons, perfect for beach walks")[
(set: $shoes to "simple stone-buttoned sandals")
(goto: "Starting Scene")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #b3c3d7;
border: 2px solid #7689ab;
border-radius: 16px;
padding: 1.7em 2em;
font-size: 1.15em;
cursor: pointer;
box-shadow: 1px 1px 14px #8a9fbc;
color: #2a3a59;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "Laced shoes dyed a deep indigo, rich as the midnight ocean")[
(set: $shoes to "deep indigo laced shoes")
(goto: "Starting Scene")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #424f7d;
border: 2px solid #2e3a5a;
border-radius: 16px;
padding: 1.7em 2em;
font-size: 1.15em;
cursor: pointer;
box-shadow: 1px 1px 14px #58689b;
color: #c7d0f0;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "Tide shoes with thick soles and rope fastenings, ready for any terrain")[
(set: $shoes to "tide shoes with rope fastenings")
(goto: "Starting Scene")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #618b76;
border: 2px solid #47664e;
border-radius: 16px;
padding: 1.7em 2em;
font-size: 1.15em;
cursor: pointer;
box-shadow: 1px 1px 14px #7ca48a;
color: #e1f1e9;
text-align: center;
user-select: none;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
]
]
</div>
</div>
]
<!--:: Meet the Locals-->
<style>
.localsScene {
max-width: 780px;
margin: 3em auto;
padding: 2.5em 3em;
border-radius: 20px;
background: radial-gradient(ellipse at top left, #0a1e24 0%, #071419 100%);
color: #d6f5fa;
font-family: 'Georgia', serif;
font-size: 1.15em;
line-height: 1.7;
box-shadow: 0 0 35px rgba(92, 193, 223, 0.4);
border: 2px solid #3b7485;
}
.romanceNote {
font-style: italic;
color: #a9eaff;
text-align: center;
font-size: 1em;
margin-bottom: 2em;
text-shadow: 0 0 6px #48c1d8;
}
.optionList {
list-style: none;
padding: 0;
margin-top: 2em;
}
.optionList li {
margin: 2em 0;
padding: 1.3em 1.5em;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #2b5f6f;
transition: background 0.3s ease, transform 0.2s ease;
box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.optionList li:hover {
background: rgba(255, 255, 255, 0.06);
transform: scale(1.015);
}
.optionList a {
font-weight: bold;
color: #b7f6ff;
text-shadow: 0 0 5px #5ac0d6;
text-decoration: none;
font-size: 1.15em;
}
.optionList span {
display: block;
margin-top: 0.5em;
color: #ccecf3;
font-style: italic;
font-weight: normal;
font-size: 1em;
}
.continueBtn {
display: inline-block;
margin-top: 3em;
padding: 0.9em 2em;
font-size: 1.1em;
background: #1d5e6c;
color: #dcfcff;
border-radius: 12px;
text-shadow: 0 0 7px #85f0ff;
box-shadow: 0 0 15px rgba(90, 192, 214, 0.5);
transition: background 0.3s ease, transform 0.2s ease;
}
.continueBtn:hover {
background: #257c8e;
transform: translateY(-2px);
}
</style>
<div class="localsScene">
(if: $romanceFinn is 2)[<div class="romanceNote">💙 You're on a romantic path with Finn. His lazy grin sharpens whenever you're near, like he’s suddenly paying attention to the tide.</div>]
(if: $romanceGulliver is 2)[<div class="romanceNote">🧡 Gulliver’s notes aren’t the only thing that flutter. Lately, his gaze lingers longer, warmer, sweeter.</div>]
(if: $romanceGaster is 2)[<div class="romanceNote">💜 With Gaster, silence holds gravity. You’ve begun to understand each other in ways even time can’t explain.</div>]
<style>
.relationshipStatus {
font-style: italic;
font-size: 0.95em;
margin-top: 0.3em;
color: #a2cbe0;
text-shadow: 0 0 4px #4b8cbf;
}
.romanceStatus {
color: #5bb3e8;
}
.friendshipStatus {
color: #f7d86d;
}
</style>
<div class="meetLocalsSection">
The town of **Shoalhollow** rises and falls along the coast like an old lullaby.
Built from sea-glass windows, driftwood frames, and tangled roots of drowned trees, it whispers with every creak, every bell chime, every turn of tide.
You walk the worn path down from your hill, the sky still tinted with soft morning hues.
Children’s laughter ripples like birdsong between tide pools. The distant clang of the dock bell means someone’s ship has come in. A baker waves from their hut, flour on their fur, the scent of seaweed bread thick in the air.
Everyone here knows you — not by voice, but by shape, by shadow, by the hush that follows behind your steps.
They greet you like an old song: gently, wordlessly, often with a smile.
Up ahead, the path splits four ways — and each one hums with a different kind of invitation.
<ul class="optionList">
<li>(link: "Head toward the docks and visit Finn")[ (goto: "Visit Finn") ]
<span>He's still sprawled on the pier, sardines balanced on his stomach, hat askew, sun glinting off his fins like scales of lazy gold. He hasn't moved much since dawn — and probably won’t unless you show up.</span>
</li>
(if: $romanceFinn is 2)[
<p class="relationshipStatus romanceStatus">*You are romantically involved with Finn.* 💙</p>
]
(if: $friendshipFinn is 2)[
<p class="relationshipStatus friendshipStatus">*You share a close friendship with Finn.* 🤝</p>
]
<li>(link: "Walk to the posts and greet Gulliver")[ (goto: "Visit Gulliver") ]
<span>From up high, his feathers flash silver and white. He moves like a poem mid-flight, squawking greetings, laughing mid-glide as he delivers pastel letters from roof to roof.</span>
</li>
(if: $romanceGulliver is 2)[
<p class="relationshipStatus romanceStatus">*Gulliver’s heart beats a little faster around you.* 🧡</p>
]
(if: $friendshipGulliver is 2)[
<p class="relationshipStatus friendshipStatus">*You and Gulliver share a warm friendship.* 🤗</p>
]
<li>(link: "Take the moss path and visit Gaster")[ (goto: "Visit Gaster") ]
<span>Past wind-slick cliffs and sea-carved stone arches, Gaster’s home glows faintly with runes. He listens to the ocean like it speaks a language only he remembers.</span>
</li>
(if: $romanceGaster is 2)[
<p class="relationshipStatus romanceStatus">*You feel a deep connection with Gaster.* 💜</p>
]
(if: $friendshipGaster is 2)[
<p class="relationshipStatus friendshipStatus">*Gaster trusts you as a close friend.* 🤝</p>
]
<li>(link: "Visit the store in town")[ (goto: "Shop") ]
<span>Coins rattle in your pouch. Maybe you’ll find something meaningful, practical — or something your heart’s been quietly hoping to give away.</span>
</li>
</ul>
(link: "Continue")[(goto: "Continue")]<span class="continueBtn">→</span>
</div>
<style>
.sceneContainer {
background: linear-gradient(135deg, #2a3a4f, #1b2735);
border: 3px solid #7fa6d7;
border-radius: 12px;
padding: 20px 25px;
max-width: 700px;
margin: 1.5em auto;
color: #d9e4f5;
font-family: 'Georgia', serif;
box-shadow: 0 0 15px #476ba9;
}
.sceneContainer p {
margin: 1.1em 0;
line-height: 1.5em;
}
.sceneHighlight {
color: #a9c9ff;
font-style: italic;
margin-top: 1.2em;
}
.dialogue {
font-family: 'Courier New', Courier, monospace;
color: #acc8ff;
margin: 1.3em 0 1.8em 0;
border-left: 3px solid #8fa7f7;
padding-left: 12px;
}
.linkList {
margin-top: 1.8em;
display: flex;
flex-direction: column;
gap: 10px;
}
.linkList a {
background: #4169e1cc;
border-radius: 8px;
padding: 12px 18px;
color: #e0e8ff;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s ease;
box-shadow: 0 0 6px #5981ff88;
}
.linkList a:hover {
background-color: #2a3ebdcc;
box-shadow: 0 0 12px #1f2eaa;
}
</style>
<section class="sceneContainer">
<p>Finn doesn’t move when you approach. Not at first.</p>
<p>The docks creak under your steps, weathered boards groaning softly underfoot. Boats bob in their slips nearby, tied with thick rope and decorated with charms meant to keep away bad dreams. The scent of salt, rust, and fish guts clings to everything here — and yet, somehow, it's comforting.</p>
<p>Finn tilts his head as you sit beside him, his single visible eye half-lidded with amusement.</p>
<div class="dialogue">“Well hey, whiskers,” he drawls, voice rough like gravel in water. “Didn’t think the morning breeze would carry you out here.”</div>
<p>You offer him a look. Calm. Curious.</p>
<p>He slowly lifts a sardine from the can and pops it into his mouth, chewing with satisfaction.</p>
<div class="dialogue">“They’re good with ketchup. Don’t give me that look.” He grins sideways. “It’s a texture thing.”</div>
<p>Finn has always been strange in the best kind of way — sharp wit, sharp teeth, but a soft soul that swims beneath it all. The kind of person who pretends to nap so he doesn’t have to explain he’s listening. Who pays attention to things no one else does. Who always knows when to break the silence — and when to let it sit.</p>
<p>He eyes you again, this time more seriously.</p>
<div class="dialogue">“You hear it too, don’t you?” he mutters. “Something’s different in the waves today.”</div>
<p>The wind whistles low through the ropes and bells.</p>
<p>Finn leans back on his elbows and lets the sun touch his gills. “Stick around. Let the tide speak. It always does, eventually.”</p>
<p class="sceneHighlight">You sit with him a while longer, the silence between you heavy and golden.</p>
<div class="linkList">
<a href="javascript:void(0)" data-passage="Meet the Locals">(link: "Return to the crossroads")[ (goto: "Meet the Locals") ]</a>
<a href="javascript:void(0)" data-passage="Finn Shared Sardines">(link: "Offer to share sardines")[ (set: $romanceFinn to 1) (goto: "Finn Shared Sardines") ]</a>
(if: $romanceFinn >= 1)[
<a href="javascript:void(0)" data-passage="Finn Fishing Stories">(link: "Ask Finn about his favorite fishing spots")[ (goto: "Finn Fishing Stories") ]</a>
]
</div>
</section>
<style>
.gulliverScene {
background: linear-gradient(145deg, #3a2f1a, #5c4c2d);
border: 3px solid #e0c88a;
border-radius: 16px;
padding: 30px 40px;
max-width: 740px;
margin: 2.5em auto;
color: #fff7db;
font-family: 'Georgia', serif;
text-shadow: 0 0 6px #e9db96, 0 0 12px #e9db96;
box-shadow: 0 0 24px #dec27155;
line-height: 1.8em;
}
.gulliverScene p {
margin-bottom: 1.5em;
}
.goldButton {
display: inline-block;
margin: 1.2em auto;
padding: 14px 32px;
font-weight: bold;
font-size: 1.1em;
font-family: 'Georgia', serif;
color: #fff9e6;
background: linear-gradient(45deg, #d1a545, #f7e07c);
border: 2px solid #ffe38f;
border-radius: 16px;
box-shadow:
0 0 12px #f1ce5c88,
0 0 26px #ffeaaa88;
text-decoration: none;
cursor: pointer;
animation: shimmerGold 3s ease-in-out infinite;
text-align: center;
transition: box-shadow 0.3s ease;
}
@keyframes shimmerGold {
0%, 100% {
box-shadow: 0 0 12px #f1ce5c88, 0 0 26px #ffeaaa88;
}
50% {
box-shadow: 0 0 24px #ffe9a3, 0 0 40px #fff2bd;
}
}
</style>
<div class="gulliverScene">
<p>You follow the winding stones toward the tall posts and rope bridges near the center of town. The air smells of citrus ink and salt-sun paper, and the breeze whistles through the lines like a forgotten tune.</p>
<p>**Gulliver** swoops down with the grace of a well-rehearsed storm, feathers flaring, scarf trailing behind like a streamer. He lands atop a wooden post in a burst of wings and energy, beaming.</p>
<p>“Marisyl!” he crows. “Just in time! I delivered a crab that screamed in rhyme this morning. Not even the weirdest part of my shift!”</p>
<p>You offer him a calm nod, your tail flicking gently in amusement.</p>
<p>He rummages through his satchel, feathers fluffing as he mutters to himself. “No, that’s for the hermit who lives in a mailbox… Ah-ha! No, wait—Dobbins again. Wait, wait... Here!”</p>
<p>He hands you a folded paper star — blank.</p>
<p>“I figured you'd like it like that. You always say so much without saying anything at all.” His golden eyes flicker thoughtfully. “That’s a kind of magic, you know.”</p>
<p>Then, softer: “Something feels off today. Like the clouds know something they won’t tell.”</p>
<p>He smooths his scarf, offers you a wink, and leaps into the air once more. “If you need me, I’ll be somewhere between sky and shore! Or in a tree. Or accidentally married to a lighthouse. Long story.”</p>
<p>He disappears into the sky, laughter trailing behind him like ribbon.</p>
<p>You tuck the paper star into your pouch — a quiet gift, just for you.</p>
<p style="text-align:center;">
<a href="javascript:void(0)" class="goldButton" data-passage="Meet the Locals">(link: "Return to the crossroads")[ (goto: "Meet the Locals") ]</a>
</p>
<p style="margin-top: 2em;"><strong>Other choices:</strong></p>
(link: "Ask Gulliver about his strangest delivery")[
(goto: "Gulliver Delivery Story")
]
(link: "Help Gulliver sort his letters")[
(set: $friendshipGulliver to (either: $friendshipGulliver, 1))
(goto: "Gulliver Letter Sorting")
]
(if: $romanceGulliver is 2)[
(link: "Accept the golden feather he offers")[
(goto: "Gulliver Gift Accepted")
]
]
</div>
<style>
.sceneContainer {
background: linear-gradient(135deg, #2a3a4f, #1b2735);
border: 3px solid #7fa6d7;
border-radius: 12px;
padding: 22px 28px;
max-width: 700px;
margin: 1.5em auto;
color: #d9e4f5;
font-family: 'Georgia', serif;
box-shadow: 0 0 18px #4e7fcf;
}
.sceneContainer p {
margin: 1.1em 0;
line-height: 1.55em;
}
.dialogue {
font-family: 'Courier New', Courier, monospace;
color: #acc8ff;
margin: 1.5em 0 2em 0;
border-left: 3px solid #8fa7f7;
padding-left: 14px;
}
.linkList {
margin-top: 1.8em;
display: flex;
flex-direction: column;
gap: 12px;
}
.linkList a {
background: #4169e1cc;
border-radius: 8px;
padding: 14px 22px;
color: #e0e8ff;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s ease;
box-shadow: 0 0 8px #5981ff88;
}
.linkList a:hover {
background-color: #2a3ebdcc;
box-shadow: 0 0 16px #1f2eaa;
}
</style>
<section class="sceneContainer">
<p>Finn watches with quiet amusement as you take the sardine from his hand and pop it into your mouth without hesitation. His visible eye narrows just slightly, a flicker of surprise—and something softer—crossing his expression.</p>
<div class="dialogue">“Huh,” he says, voice low and a little rough, “didn’t think you’d actually eat it. I was kinda hoping you’d hate it, so I could have something to tease you about.”</div>
<p>He pauses, flicking his tail lazily behind him, the sun glinting on the chipped scales that line his arms.</p>
<p>“But... maybe you’re full of surprises, whiskers.” He shifts closer, the worn wood of the pier creaking beneath him. The scent of salt and seaweed swirls around you, wrapping the two of you in the kind of quiet moment that doesn’t need words.</p>
<p>His grin softens, eyes catching yours in a way that feels like an invitation—not just to stay, but to trust.</p>
<p>For once, Finn isn’t hiding behind jokes or laziness. He’s here, present, and maybe even a little vulnerable.</p>
(set: $romanceFinn to 1)
<div class="linkList">
<a href="javascript:void(0)" data-passage="Finn Ocean Silence">(link: "Smile at him and stay")[ (goto: "Finn Ocean Silence") ]</a>
<a href="javascript:void(0)" data-passage="Meet the Locals">(link: "Return to the crossroads")[ (goto: "Meet the Locals") ]</a>
</div>
</section>
<style>
.storyContainer {
background: linear-gradient(135deg, #1f2e47, #0e1a2f);
border: 3px solid #7fa6d9;
border-radius: 14px;
padding: 26px 34px;
max-width: 720px;
margin: 2em auto;
color: #e3efff;
font-family: 'Georgia', serif;
box-shadow: 0 0 24px #5a8cdb99;
}
.storyContainer p {
margin: 1.3em 0;
line-height: 1.7em;
}
.choiceList {
list-style: none;
padding: 0;
margin-top: 2.5em;
}
.choiceList li {
margin-bottom: 1.2em;
}
.glowChoice {
display: inline-block;
padding: 14px 30px;
font-weight: 700;
font-family: 'Georgia', serif;
font-size: 1.1em;
color: #e2ecff;
background: linear-gradient(45deg, #507fd4, #a0c3ff);
border: 2px solid #aacfff;
border-radius: 16px;
box-shadow:
0 0 14px #578cd988,
0 0 28px #a5d6ff88;
cursor: pointer;
text-align: center;
animation: pulseGlow 2.8s ease-in-out infinite;
transition: box-shadow 0.3s ease;
text-decoration: none;
}
.glowChoice:hover {
box-shadow:
0 0 18px #6b9ef0,
0 0 34px #c2e0ff;
}
@keyframes pulseGlow {
0%, 100% {
box-shadow:
0 0 14px #578cd988,
0 0 28px #a5d6ff88;
}
50% {
box-shadow:
0 0 26px #75aaf5,
0 0 48px #c9f0ff;
}
}
</style>
<section class="storyContainer">
<p>You nudge Finn with your shoulder, and his smirk is instant — like he’d been waiting for it all morning.</p>
<p>“Careful,” he teases, voice a low ripple against the hush of the waves. “I might start thinking you like me.”</p>
<p>He nudges you back. It’s playful, but there’s a softness to it — careful, almost tender. His shoulder lingers just barely against yours, the warmth of him brushing against your side like the tide brushing the shore.</p>
<p>The two of you fall into a companionable hush, gulls wheeling above, the sea breathing steady below. It’s a pause full of something unspoken. A closeness neither of you need to name.</p>
(set: $romanceFinn to 3)
<ul class="choiceList">
<li><a href="javascript:void(0)" class="glowChoice" data-passage="Finn Ocean Silence">(link: "Lean into him slightly")[ (goto: "Finn Ocean Silence") ]</a></li>
<li><a href="javascript:void(0)" class="glowChoice" data-passage="Meet the Locals">(link: "Return to the crossroads")[ (goto: "Meet the Locals") ]</a></li>
<li><a href="javascript:void(0)" class="glowChoice" data-passage="Finn Kiss Scene">(link: "Kiss him")[ (goto: "Finn Kiss Scene") ]</a></li>
</ul>
</section>
<style>
.sceneContainer {
background: linear-gradient(135deg, #2a3a4f, #1b2735);
border: 3px solid #7fa6d7;
border-radius: 12px;
padding: 22px 28px;
max-width: 700px;
margin: 1.5em auto;
color: #d9e4f5;
font-family: 'Georgia', serif;
box-shadow: 0 0 18px #4e7fcf;
}
.sceneContainer p {
margin: 1.2em 0;
line-height: 1.6em;
}
.glowButton {
display: inline-block;
padding: 14px 26px;
margin-top: 1.8em;
font-weight: 700;
font-family: 'Georgia', serif;
font-size: 1.1em;
color: #e0e8ff;
background: linear-gradient(45deg, #4a86ff, #a1c6ff);
border: 2px solid #a9c4ff;
border-radius: 14px;
box-shadow:
0 0 8px #4a86ff,
0 0 15px #a1c6ff,
0 0 30px #cde4ff;
cursor: pointer;
text-align: center;
text-decoration: none;
transition: box-shadow 0.4s ease;
user-select: none;
}
.glowButton:hover {
box-shadow:
0 0 12px #5b9eff,
0 0 20px #c0dbff,
0 0 40px #d3e7ff;
}
</style>
<section class="sceneContainer">
<p>You and Finn sit side by side, wrapped in the gentle cadence of the sea. The water laps softly against the pilings beneath you, its rhythm a quiet heartbeat shared between two souls. Above, a lone gull cries out, the sound sharp and fleeting against the endless blue sky.</p>
<p>The wind stirs, playful and cool, threading through your fur and ruffling Finn’s sun-bleached hair. The silence between you feels thick with understanding — no need for words, just the steady presence of each other and the ocean’s breath.</p>
<p>After a time, Finn slowly pushes himself up from the pier. His gaze meets yours, steady and warm. Without hesitation, he extends a hand toward you.</p>
<p><em>“Come on,”</em> he says quietly, <em>“I’ll walk you back.”</em></p>
(if: $romanceFinn < 2)[
(set: $romanceFinn to 2)
]
<a href="javascript:void(0)" class="glowButton" data-passage="Meet the Locals">(link: "Take his hand and walk back together")[ (goto: "Meet the Locals") ]</a>
</section>
<style>
.gulliverGift {
background: linear-gradient(145deg, #3a2f1a, #5c4c2d);
border: 3px solid #e0c88a;
border-radius: 16px;
padding: 30px 40px;
max-width: 740px;
margin: 2.5em auto;
color: #fff7db;
font-family: 'Georgia', serif;
text-shadow: 0 0 6px #e9db96, 0 0 12px #e9db96;
box-shadow: 0 0 24px #dec27155;
line-height: 1.8em;
}
.goldButton {
display: inline-block;
margin: 1.2em auto;
padding: 14px 32px;
font-weight: bold;
font-size: 1.1em;
font-family: 'Georgia', serif;
color: #fff9e6;
background: linear-gradient(45deg, #d1a545, #f7e07c);
border: 2px solid #ffe38f;
border-radius: 16px;
box-shadow:
0 0 12px #f1ce5c88,
0 0 26px #ffeaaa88;
text-decoration: none;
cursor: pointer;
animation: shimmerGold 3s ease-in-out infinite;
text-align: center;
transition: box-shadow 0.3s ease;
}
@keyframes shimmerGold {
0%, 100% { box-shadow: 0 0 12px #f1ce5c88, 0 0 26px #ffeaaa88; }
50% { box-shadow: 0 0 24px #ffe9a3, 0 0 40px #fff2bd; }
}
</style>
<div class="gulliverGift">
<p>You bow gracefully, accepting the delicate feather with careful hands. Gulliver’s eyes light up, shimmering like sunlight on calm water.</p>
<p>“You’re really taking it,” he says softly, a smile spreading across his face. “I wasn’t sure you would. This means more than you know.”</p>
<p>He flutters his wings joyfully, almost tipping over a crate of clams nearby.</p>
<p>“I think this calls for a sonnet — a celebration of this moment, and the kindness you’ve shown.”</p>
<p>(set: $romanceGulliver to 2)</p>
<p style="text-align:center;">
<a href="javascript:void(0)" class="goldButton" data-passage="Gulliver Wing Hold">(link: "Gently hold his wing")[ (goto: "Gulliver Wing Hold") ]</a><br>
<a href="javascript:void(0)" class="goldButton" data-passage="Meet the Locals">(link: "Return to the crossroads")[ (goto: "Meet the Locals") ]</a><br>
<span style="font-size: 1.8em;">💛</span>
</p>
</div>
<style>
.gulliverFeatherScene {
background: linear-gradient(135deg, #4b3a1a, #7f6a3f);
border: 3px solid #e6cd8a;
border-radius: 18px;
padding: 40px 48px;
max-width: 720px;
margin: 3em auto;
color: #fff9e6;
font-family: 'Georgia', serif;
text-shadow: 0 0 10px #f7e18c, 0 0 20px #f0db7a;
box-shadow: 0 0 40px #d4bb5e99;
line-height: 1.9em;
}
.glowPulseButton {
display: inline-block;
margin: 2em auto 0;
padding: 14px 44px;
font-weight: 700;
font-size: 1.3em;
font-family: 'Georgia', serif;
color: #fff9e6;
background: linear-gradient(45deg, #d1a53f, #e8e0ae);
border: 2px solid #f6dd8f;
border-radius: 20px;
box-shadow:
0 0 15px #f8df7c99,
0 0 35px #f8df7c99;
text-decoration: none;
cursor: pointer;
animation: pulseGlow 2.5s ease-in-out infinite;
text-align: center;
transition: box-shadow 0.4s ease;
}
@keyframes pulseGlow {
0%, 100% {
box-shadow:
0 0 15px #f8df7c99,
0 0 35px #f8df7c99;
}
50% {
box-shadow:
0 0 30px #fff8ccdd,
0 0 60px #fff8ccdd;
}
}
</style>
<div class="gulliverFeatherScene">
<p>You tuck the feather gently behind your ear and smile up at him. Gulliver stops mid-rant.</p>
<p>“Oh... you look— uh— I mean— yes! Very good! I am flustered but in a delightful way!”</p>
<p>His feathers puff out in all directions as he tries to straighten them, clearly struggling.</p>
<p>(set: $romanceGulliver to 1)</p>
<p style="text-align:center;">
<a href="javascript:void(0)" class="glowPulseButton" data-passage="Gulliver Walk Scene">(link: "Offer to walk with him for his next delivery")[ (goto: "Gulliver Walk Scene") ]</a><br><br>
<a href="javascript:void(0)" class="glowPulseButton" data-passage="Meet the Locals">(link: "Return to the crossroads")[ (goto: "Meet the Locals") ]</a>
</p>
</div>
<style>
.storyContainer {
background: linear-gradient(135deg, #273a56, #1c2441);
border: 3px solid #7ea9d9;
border-radius: 14px;
padding: 24px 30px;
max-width: 700px;
margin: 2em auto;
color: #d4e2f0;
font-family: 'Georgia', serif;
box-shadow: 0 0 22px #5a8cdb88;
}
.storyContainer p {
margin: 1.3em 0;
line-height: 1.65em;
}
.pulseGlowButton {
display: inline-block;
padding: 16px 34px;
margin-top: 2em;
font-weight: 700;
font-family: 'Georgia', serif;
font-size: 1.2em;
color: #e1eaff;
background: linear-gradient(45deg, #557fcc, #a1c7ff);
border: 2px solid #aac9ff;
border-radius: 16px;
box-shadow:
0 0 12px #557fcc,
0 0 25px #a1c7ff,
0 0 40px #c7dcff;
cursor: pointer;
text-align: center;
text-decoration: none;
user-select: none;
animation: pulseGlow 2.8s ease-in-out infinite;
transition: box-shadow 0.4s ease;
}
.pulseGlowButton:hover {
box-shadow:
0 0 18px #6a8ee8,
0 0 33px #b6d0ff,
0 0 52px #d2e5ff;
}
@keyframes pulseGlow {
0%, 100% {
box-shadow:
0 0 12px #557fcc,
0 0 25px #a1c7ff,
0 0 40px #c7dcff;
}
50% {
box-shadow:
0 0 24px #6d96f5,
0 0 45px #bbe2ff,
0 0 70px #dff5ff;
}
}
</style>
<section class="storyContainer">
<p>You ask Finn about his favorite fishing spots, and for a moment his usual laziness fades, replaced by a warm, quiet glow in his eye.</p>
<p>“There’s a place out past the reef,” he says softly. “Quiet, far from everything. If you sit still long enough, you can see the bioluminescent squid dance like tiny stars beneath the waves.”</p>
<p>He chuckles, rubbing the back of his neck with a bashful grin.</p>
<p>“I don’t usually bring folks there. It’s my private spot. But... maybe I’ll show you sometime.”</p>
<p>He avoids your gaze, but there’s hope in his voice — a silent invitation waiting to be accepted.</p>
(set: $romanceFinn to 2)
<a href="javascript:void(0)" class="pulseGlowButton" data-passage="Meet the Locals">(link: "Smile and promise to be patient")[ (goto: "Meet the Locals") ]</a>
</section>
<style>
.gulliverWingHold {
background: linear-gradient(145deg, #3a2f1a, #5c4c2d);
border: 3px solid #e0c88a;
border-radius: 16px;
padding: 32px 42px;
max-width: 740px;
margin: 3em auto;
color: #fff9e6;
font-family: 'Georgia', serif;
text-shadow: 0 0 8px #f1d97f, 0 0 14px #e9db96;
box-shadow: 0 0 30px #d4bb5e88;
line-height: 1.9em;
}
.goldButton {
display: inline-block;
margin: 1.5em auto 0;
padding: 16px 36px;
font-weight: bold;
font-size: 1.2em;
font-family: 'Georgia', serif;
color: #fff9e6;
background: linear-gradient(45deg, #d1a545, #f7e07c);
border: 2px solid #ffe38f;
border-radius: 16px;
box-shadow:
0 0 15px #f1ce5c88,
0 0 34px #ffeaaa88;
text-decoration: none;
cursor: pointer;
animation: shimmerGold 3s ease-in-out infinite;
text-align: center;
transition: box-shadow 0.3s ease;
}
</style>
<div class="gulliverWingHold">
<p>You reach out and gently cradle Gulliver’s wing. His feathers tremble beneath your touch, as if they might take flight without him.</p>
<p>A soft, breathless smile spreads across his beak. “This... this feels like more than friendship, doesn’t it?”</p>
<p>You nod quietly, and his entire body seems to glow with joy, his wings fluttering with excitement.</p>
<p>“I want to compose a melody for this moment — for two hearts carried on the wind.”</p>
<p>With a graceful spin, he reaches for your paw and holds it warmly.</p>
<p>“Together, we’ll make even the ocean jealous of our song.”</p>
<p>(set: $romanceGulliver to 2)</p>
<p style="text-align:center;">
<a href="javascript:void(0)" class="goldButton" data-passage="Meet the Locals">(link: "Laugh and let him twirl you")[ (goto: "Meet the Locals") ]</a><br>
<span style="font-size: 2em;">💛</span>
</p>
</div>
<style>
.gulliverDelivery {
background: linear-gradient(145deg, #3a2f1a, #5c4c2d);
border: 3px solid #e0c88a;
border-radius: 16px;
padding: 36px 44px;
max-width: 740px;
margin: 3em auto;
color: #fff9e6;
font-family: 'Georgia', serif;
text-shadow: 0 0 8px #f1d97f, 0 0 14px #e9db96;
box-shadow: 0 0 30px #d4bb5e88;
line-height: 1.9em;
}
.goldButton {
display: inline-block;
margin: 1.5em auto 0;
padding: 16px 38px;
font-weight: bold;
font-size: 1.2em;
font-family: 'Georgia', serif;
color: #fff9e6;
background: linear-gradient(45deg, #d1a545, #f7e07c);
border: 2px solid #ffe38f;
border-radius: 16px;
box-shadow:
0 0 15px #f1ce5c88,
0 0 34px #ffeaaa88;
text-decoration: none;
cursor: pointer;
animation: shimmerGold 3s ease-in-out infinite;
text-align: center;
transition: box-shadow 0.3s ease;
}
</style>
<div class="gulliverDelivery">
<p>You ask if you might join Gulliver on his next delivery. His eyes widen, and he gasps so theatrically you can’t help but smile.</p>
<p>“Walk with me? You want to witness the sacred art of mail delivery?”</p>
<p>You nod, and he places a hand gently over his heart.</p>
<p>“Oh, be still, my heart! This is a rare honor indeed.”</p>
<p>Together, you stroll along the sparkling coast. Gulliver delivers letters with practiced flair, always glancing back to make sure you’re following every graceful step.</p>
<p>When the last bundle is safely in place, he turns to you, voice soft and sincere.</p>
<p>“No one’s ever asked to come along before… thank you.”</p>
<p>(set: $romanceGulliver to 2)</p>
<p style="text-align:center;">
<a href="javascript:void(0)" class="goldButton" data-passage="Meet the Locals">(link: "Pat his wing softly")[ (goto: "Meet the Locals") ]</a><br>
<span style="font-size: 2em;">💛</span>
</p>
</div>
<!--:: Continue-->
<style>
.demoEnd {
font-size: 1.15em;
line-height: 1.7;
color: #dcecf2;
text-align: center;
margin-top: 3em;
padding: 2em;
background: linear-gradient(180deg, rgba(0,20,30,0.3), rgba(0,20,30,0.6));
border-radius: 12px;
box-shadow: 0 0 20px #4d8fa0a1;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.demoEndTitle {
font-size: 1.8em;
color: #b4f0ff;
text-shadow: 0 0 6px #74c6e4;
margin-bottom: 0.8em;
}
.demoEndNote {
font-size: 0.95em;
font-style: italic;
color: #aac8d4;
margin-top: 2em;
}
.teamNote {
margin-top: 2em;
font-size: 1em;
font-weight: bold;
color: #f0f8ff;
text-shadow: 0 0 4px #4eacc9;
}
.waveEmoji {
animation: floatWave 3s ease-in-out infinite;
display: inline-block;
margin-left: 0.2em;
}
@keyframes floatWave {
0% { transform: translateY(0); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0); }
}
</style>
<div class="demoEnd">
<div class="demoEndTitle">Thank you for playing the demo of <i>Shoreline Tales</i>!</div>
This small glimpse into the tide-swept world of <b>Marisyl</b>, <b>Finn</b>, <b>Gulliver</b>, and <b>Gaster</b> is only the beginning.
More characters, deeper routes, and richer choices are gently washing ashore — piece by piece.
<p>Right now, it’s just the Wingding brothers and the tide-chosen few, but the full version will bring in familiar souls and strange ones alike.</p>
<p class="demoEndNote">*It’s a work in progress, so some things might not work perfectly — but they will soon.*</p>
<div class="teamNote">Stay tuned for updates. And until then…
<br>May the waves carry you gently<span class="waveEmoji">🌊</span></div>
<p style="margin-top: 2.5em;">— <b>Butterfly</b> and the <i>Shoreline Tales</i> Team</p>
</div>
<div style="max-width: 40em; margin: 2em auto; padding: 1.5em; background: rgba(208, 240, 255, 0.15); border: 2px solid #a0d8ff; border-radius: 12px; font-family: 'Georgia', serif; color: #cde6f7; text-align: center; box-shadow: 0 0 10px #9cd4ff;">
<h2 style="color: #8fc9ff; font-weight: normal; font-size: 2em; margin-bottom: 0.2em; text-shadow: 0 0 4px #d1ecff;">About Shoreline Tales</h2>
<p style="font-size: 1.1em; line-height: 1.6;">
Welcome to <strong>Shoreline Tales</strong>, a gentle journey through a world where monsters walk freely under the open sky,
and friendships bloom by the ocean’s edge. This interactive fiction is a love letter to connection, discovery, and the stories that shape us.
</p>
<p style="font-size: 1em; font-style: italic; margin: 1em 0;">
Created with care by Butterfly and friends — crafting tales of heart and hope, one choice at a time.
</p>
<p style="font-size: 1.1em; line-height: 1.5;">
In this demo, you'll meet a few familiar faces and start your adventure with Marisyl, our brave cat monster navigating a peaceful yet mysterious town.
More characters, deeper stories, and romance options are in the works — thanks for being part of this growing world!
</p>
<p style="margin-top: 2em; font-size: 0.9em; color: #88bbff;">
Special thanks to <strong>SilentWing</strong>, <strong>CrushedChrysalis</strong>, and all the wonderful souls who make this possible.
And most importantly, <strong>YOU</strong>, for your support and curiosity.
</p>
</div>
[[Back to Main Menu->Main Menu]]
(set: $fade to true)
(if: $fade)[
<span id="fadeOut" style="display:block; text-align:center; font-size:1.4em; margin-top:4em; max-width: 30em; margin-left:auto; margin-right:auto; line-height:1.6; color:#cde6f7; transition: opacity 7s ease-in-out; opacity: 1; font-family: 'Georgia', serif;">
The waves whisper soft lullabies<br>
and the sky deepens to twilight.<br><br>
Your eyes grow heavy, the world slows,<br>
and the gentle sea breeze wraps you in its calm embrace.<br><br>
This adventure will pause here for now,<br>
but the tides will bring new stories another day.<br><br>
Rest well, wanderer.<br>
Dream of moonlit shores and the friends you've met.<br><br>
<span style="font-size:2em; font-style:italic; opacity: 0.7; animation: breathe 4s ease-in-out infinite;">Zzz... Zzz... Zzz...</span>
</span>
<style>
@keyframes breathe {
0%, 100% { opacity: 0.7; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-5px); }
}
</style>
<script>
setTimeout(function() {
document.getElementById("fadeOut").style.opacity = 0;
}, 4000);
</script>
]
<span style="display:block; text-align:center; margin-top:4em; font-size:1.3em; color:#bcdff2; font-style:italic;">
Your thoughts drift like clouds…<br>
soft footsteps on the shore…<br>
everything fades to silver.<br><br>
<span style="font-size:2.5em; opacity: 0.6; animation: drift 6s infinite ease-in-out;">Z Z Z Z Z</span>
</span>
<style>
@keyframes drift {
0%, 100% { opacity: 0.6; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-6px); }
}
</style>
<span style="display:block; text-align:center; font-size:3em; margin-top:2em; color:#d0faff; animation: pulseHeart 2.5s infinite ease-in-out;">🩶</span>
<style>
@keyframes pulseHeart {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 2px #cde6f7) drop-shadow(0 0 5px #ffffff);
opacity: 0.85;
}
50% {
transform: scale(1.1);
filter: drop-shadow(0 0 5px #d0faff) drop-shadow(0 0 8px #ffffff);
opacity: 1;
}
}
</style>
|styleOtherworldlyEyes>[
<div style="max-width: 600px; margin: 2em auto; padding: 2.5em; background: rgba(220, 190, 255, 0.18); border-radius: 18px; border: 2px solid #aa7aff; font-family: 'Georgia', serif; color: #5d3c8a; line-height: 1.7; text-align: center; box-shadow: 0 0 18px #b07aff; overflow-wrap: break-word;">
<h2 style="font-size: 2.2em; margin: 0 0 0.6em 0; font-weight: 700; text-shadow: 1px 1px 6px #d2baff; word-wrap: break-word; max-width: 100%;">
Otherworldly Eyes
</h2>
<p style="font-size: 1.15em; margin-bottom: 2.2em; font-style: italic; color: #7f5bbf;">
These eyes shimmer with the mysteries of realms beyond the mundane. Choose wisely, for your gaze will speak of secrets untold.
</p>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6em;">
(link: "🌠 Starfire Gold\n[sparks of distant suns]")[
(set: $eyeColor to "starfire gold")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #f9e79f;
border: 2px solid #c49e1a;
border-radius: 14px;
padding: 1.3em 1.4em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 8px #e6d870;
white-space: pre-wrap;
user-select: none;
text-align: center;
color: #5a4200;
margin-bottom: 0.7em;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "🌙 Moonlit Silver\n[soft glow of lunar light]")[
(set: $eyeColor to "moonlit silver")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #cfd8f7;
border: 2px solid #a5afcc;
border-radius: 14px;
padding: 1.3em 1.4em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 8px #a9b7d9;
white-space: pre-wrap;
user-select: none;
text-align: center;
color: #383f5c;
margin-bottom: 0.7em;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "✨ Aurora Green\n[dancing northern lights]")[
(set: $eyeColor to "aurora green")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #a8f0cc;
border: 2px solid #4db276;
border-radius: 14px;
padding: 1.3em 1.4em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 8px #72cc9d;
white-space: pre-wrap;
user-select: none;
text-align: center;
color: #215a33;
margin-bottom: 0.7em;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "💫 Void Purple\n[depths of endless space]")[
(set: $eyeColor to "void purple")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #5a2a74;
border: 2px solid #3d1a50;
border-radius: 14px;
padding: 1.3em 1.4em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 8px #6a3a84;
white-space: pre-wrap;
user-select: none;
text-align: center;
color: #d3baff;
margin-bottom: 0.7em;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "🌌 Nebula Pink\n[swirling cosmic dust]")[
(set: $eyeColor to "nebula pink")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #f7c1d8;
border: 2px solid #d05b8f;
border-radius: 14px;
padding: 1.3em 1.4em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 8px #e48aba;
white-space: pre-wrap;
user-select: none;
text-align: center;
color: #6a1f4a;
margin-bottom: 0.7em;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "❄ Glacial Blue\n[icy, frozen stare]")[
(set: $eyeColor to "glacial blue")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #a3d5ff;
border: 2px solid #4a81c4;
border-radius: 14px;
padding: 1.3em 1.4em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 8px #75a9e8;
white-space: pre-wrap;
user-select: none;
text-align: center;
color: #10375a;
margin-bottom: 0.7em;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "🔥 Ember Orange\n[embers glowing in darkness]")[
(set: $eyeColor to "ember orange")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 45%;
background: #ffb75d;
border: 2px solid #cc7b1c;
border-radius: 14px;
padding: 1.3em 1.4em;
font-size: 1.1em;
cursor: pointer;
box-shadow: 1px 1px 8px #ff9933;
white-space: pre-wrap;
user-select: none;
text-align: center;
color: #5a2f00;
margin-bottom: 0.7em;
overflow-wrap: break-word;
word-break: break-word;
]
]
(link: "🌟 Prism Spectrum\n[rainbow gleam shifting with every glance]")[
(set: $eyeColor to "prism spectrum")
(goto: "Clothing Choice")
](append: ?_container)[
(css: ?_container)[
flex: 1 1 95%;
background: linear-gradient(45deg, #ff0055, #ffcc00, #00ffcc, #0055ff, #ff00ff);
border: 2px solid #aa33aa;
border-radius: 20px;
padding: 1.7em 1.7em;
font-size: 1.3em;
font-weight: bold;
cursor: pointer;
box-shadow: 0 0 15px #cc88cc;
white-space: normal;
user-select: none;
text-align: center;
color: #fff;
margin-top: 1em;
text-shadow: 0 0 10px #ff66bb;
overflow-wrap: break-word;
word-break: break-word;
]
]
</div>
<p style="margin-top: 2.4em; font-size: 0.9em; color: #9277c0;">
Want to go back and choose a more earthly hue instead? <br>
(link: "Return to Eye Colors")[ (goto: "Eye Color") ]
</p>
</div>
]
<!--:: Shop-->
<style>
.shopScene {
max-width: 780px;
margin: 3em auto;
padding: 2.8em 3.2em;
border-radius: 20px;
background: radial-gradient(ellipse at center, #142a32 0%, #0c1a22 100%);
color: #cceeff;
font-family: 'Georgia', serif;
font-size: 1.15em;
line-height: 1.75;
box-shadow: 0 0 40px rgba(56, 153, 196, 0.5);
border: 2px solid #31708f;
}
.shopIntro {
margin-bottom: 1.7em;
font-style: italic;
color: #a3d8f4;
text-shadow: 0 0 6px #5ba6c9;
}
.coinCount {
font-weight: bold;
color: #f0e68c;
margin-bottom: 1.5em;
text-shadow: 0 0 6px #d4c86a;
}
ul.shopList {
list-style: none;
padding-left: 0;
}
ul.shopList li {
background: rgba(255, 255, 255, 0.05);
margin: 1.4em 0;
padding: 1.3em 1.6em;
border-radius: 14px;
border: 1px solid #1c5673;
box-shadow: 0 2px 12px rgba(0,0,0,0.25);
transition: background 0.3s ease;
}
ul.shopList li:hover {
background: rgba(255, 255, 255, 0.10);
}
ul.shopList a {
font-weight: 700;
font-size: 1.12em;
color: #a8d9ff;
text-decoration: none;
text-shadow: 0 0 7px #64a9d6;
}
ul.shopList span {
display: block;
font-style: italic;
font-weight: 400;
margin-top: 0.5em;
color: #c9e7ff;
}
.backLink {
margin-top: 3em;
display: inline-block;
font-weight: 600;
color: #7ed1ff;
text-decoration: underline;
cursor: pointer;
}
</style>
<div class="shopScene">
<p class="shopIntro">
The shop in Shoalhollow smells of salt and cedarwood, its shelves lined with curious trinkets, practical tools, and treats from the sea.
The shopkeeper smiles knowingly as you step inside, the soft bell above the door chiming your arrival.
</p>
<p class="coinCount">
You have <strong>$coinCount</strong> coins jingling in your pouch.
</p>
<p>What would you like to buy today?</p>
<ul class="shopList">
<li>
(link: "A tin of fine sardines")[
(if: $coinCount >= 3)[
(set: $coinCount to $coinCount - 3)
(set: $gift to "a tin of fine sardines")
(goto: "Gift Confirmation")
]
(else:)[
You don’t have enough coins for this.
]
]
<span>Finn’s favorite. Perfect for the laid-back shark who never turns down a salty snack.</span>
</li>
<li>
(link: "A bundle of pastel seaweed mail")[
(if: $coinCount >= 4)[
(set: $coinCount to $coinCount - 4)
(set: $gift to "a bundle of pastel seaweed mail")
(goto: "Gift Confirmation")
]
(else:)[
You don’t have enough coins for this.
]
]
<span>Gulliver’s favorite — letters wrapped with care and ocean blooms, brightening his busy days.</span>
</li>
<li>
(link: "A small vial of glowing rune dust")[
(if: $coinCount >= 5)[
(set: $coinCount to $coinCount - 5)
(set: $gift to "a small vial of glowing rune dust")
(goto: "Gift Confirmation")
]
(else:)[
You don’t have enough coins for this.
]
]
<span>Gaster’s favorite — rare dust that hums softly with magic and memory.</span>
</li>
<li>
(link: "A simple shell bracelet")[
(if: $coinCount >= 2)[
(set: $coinCount to $coinCount - 2)
(set: $gift to "a simple shell bracelet")
(goto: "Gift Confirmation")
]
(else:)[
You don’t have enough coins for this.
]
]
<span>A sweet, thoughtful gift for anyone who loves the sea’s quiet beauty.</span>
</li>
<li>
(link: "A small bag of fragrant sea salt crystals")[
(if: $coinCount >= 1)[
(set: $coinCount to $coinCount - 1)
(set: $gift to "a bag of sea salt crystals")
(goto: "Gift Confirmation")
]
(else:)[
You don’t have enough coins for this.
]
]
<span>Useful for cooking or magic, or just a little something to bring the sea with you.</span>
</li>
</ul>
(link: "Leave the shop")[
(goto: "Meet the Locals")
]
</div>
<style>
.gulliverScene {
background: linear-gradient(145deg, #3a2f1a, #5c4c2d);
border: 3px solid #e0c88a;
border-radius: 16px;
padding: 30px 40px;
max-width: 740px;
margin: 2.5em auto;
color: #fff7db;
font-family: 'Georgia', serif;
text-shadow: 0 0 6px #e9db96, 0 0 12px #e9db96;
box-shadow: 0 0 24px #dec27155;
line-height: 1.8em;
}
.goldButton {
display: inline-block;
margin: 1.2em auto;
padding: 14px 32px;
font-weight: bold;
font-size: 1.1em;
font-family: 'Georgia', serif;
color: #fff9e6;
background: linear-gradient(45deg, #d1a545, #f7e07c);
border: 2px solid #ffe38f;
border-radius: 16px;
box-shadow:
0 0 12px #f1ce5c88,
0 0 26px #ffeaaa88;
text-decoration: none;
cursor: pointer;
animation: shimmerGold 3s ease-in-out infinite;
text-align: center;
transition: box-shadow 0.3s ease;
}
@keyframes shimmerGold {
0%, 100% { box-shadow: 0 0 12px #f1ce5c88, 0 0 26px #ffeaaa88; }
50% { box-shadow: 0 0 24px #ffe9a3, 0 0 40px #fff2bd; }
}
</style>
<div class="gulliverScene">
<p>You ask Gulliver about the strangest delivery he’s ever made.</p>
<p>He lights up like a lantern, flapping his wings mid-air for emphasis. “Oh! That’s easy. A haunted message scroll written in lemon juice and wrapped around a fish skeleton!”</p>
<p>You blink. He nods rapidly.</p>
<p>“It was supposed to sing when opened. Instead it shrieked and summoned every seagull in a ten-mile radius. I was pecked for twenty minutes straight. I saw my life flash before my eyes — and I didn’t even like the flashback quality!”</p>
<p>He laughs, brushing off phantom feathers. “But I delivered it anyway. Because the mail must fly, even when it screams.”</p>
<p>He looks at you, warm and sincere. “I guess that’s my magic. Even the weird stuff deserves to get where it’s going.”</p>
<p>You nod. Gulliver may be a whirlwind of energy, but he’s steady where it counts.</p>
<p style="text-align:center;">
<a href="javascript:void(0)" class="goldButton" data-passage="Meet the Locals">(link: "Return to the crossroads")[ (goto: "Meet the Locals") ]</a><br>
<span style="font-size: 1.8em;">💛</span>
</p>
</div>
<style>
.gulliverScene {
background: linear-gradient(145deg, #3a2f1a, #5c4c2d);
border: 3px solid #e0c88a;
border-radius: 16px;
padding: 30px 40px;
max-width: 740px;
margin: 2.5em auto;
color: #fff7db;
font-family: 'Georgia', serif;
text-shadow: 0 0 6px #e9db96, 0 0 12px #e9db96;
box-shadow: 0 0 24px #dec27155;
line-height: 1.8em;
}
.goldButton {
display: inline-block;
margin: 1.2em auto;
padding: 14px 32px;
font-weight: bold;
font-size: 1.1em;
font-family: 'Georgia', serif;
color: #fff9e6;
background: linear-gradient(45deg, #d1a545, #f7e07c);
border: 2px solid #ffe38f;
border-radius: 16px;
box-shadow:
0 0 12px #f1ce5c88,
0 0 26px #ffeaaa88;
text-decoration: none;
cursor: pointer;
animation: shimmerGold 3s ease-in-out infinite;
text-align: center;
transition: box-shadow 0.3s ease;
}
@keyframes shimmerGold {
0%, 100% { box-shadow: 0 0 12px #f1ce5c88, 0 0 26px #ffeaaa88; }
50% { box-shadow: 0 0 24px #ffe9a3, 0 0 40px #fff2bd; }
}
</style>
<div class="gulliverScene">
<p>You gesture toward the spilling stack of letters tipping out of Gulliver’s satchel with a quiet tilt of your head.</p>
<p>He blinks, then lights up with a wide grin. “You wanna help me sort these? You’re officially my favorite person on the shoreline.”</p>
<p>He flutters down beside you, tail feathers sweeping over the sand as he plops down with a sigh and a dramatic flap. “Careful, some of these bite. Not metaphorically. There was an enchanted envelope last week that actually tried to nibble me.”</p>
<p>He hands you a pile. The letters are soft with salt and wind, each one unique — painted edges, knotted seals, odd textures like sea-glass or bark. One is shaped like a fish. Another smells faintly of strawberries and regret.</p>
<p>You and Gulliver fall into an easy rhythm: you sort, he hums old sea songs, occasionally tossing one in the air to land dramatically in a labeled bin.</p>
<p>“This one’s for the Cloud-Cursed Twins,” he says, squinting at the ink. “And this? Ah. ‘To Marisyl — when the wind whispers.’”</p>
<p>He offers it to you with a sheepish smile. “I didn’t peek. Even though it crinkled funny and smelled like moonlight. Your secrets are safe with me.”</p>
<p>You take it, fingers brushing the star-embossed paper. It's still sealed.</p>
<p>After a while, the letters dwindle. Gulliver leans back with a satisfied sigh. “You didn’t have to help. But you did. That’s rare, you know?”</p>
<p>He gives you a soft look, one wing brushing against your shoulder. “Thanks. It means more than you think.”</p>
<p>(set: $friendshipGulliver to 2)</p>
<p style="text-align:center;">
<a href="javascript:void(0)" class="goldButton" data-passage="Meet the Locals">(link: "Return to the crossroads")[ (goto: "Meet the Locals") ]</a><br>
<span style="font-size: 1.8em;">💛</span>
</p>
</div>
You follow the moss-covered path, cool and quiet, down to the cliff’s edge where the sea hums low and patient. Crumbling stones peek out from the grass like broken teeth, and beneath an outcropping carved by tide and time... waits Gaster.
He doesn’t look up when you approach. His hands are full — repairing what looks like a half-crushed conch-radio.
“Old thing still remembers how to sing,” he murmurs.
He glances at you, eyes gleaming with soft biolight.
“You came. Good.”
Around him are pieces of forgotten stories — sea-glass etched with glyphs, ruined tomes drying in the sun, fossil fragments whispering of long-lost monsters.
“It listens, you know,” he says, gently twisting wires into a spiral. “The sea. The past. You.”
(set: $romanceGaster to (either: $romanceGaster, 0))
|[(link: "Ask what he's fixing")[(set: $romanceGaster to 1)(goto: "Gaster Tinkering")]]|<span class="gasterBtn">Ask what he's fixing</span>|
|[(link: "Sit beside him silently")[(set: $romanceGaster to 1)(goto: "Gaster Silence")]]|<span class="gasterBtn">Sit beside him silently</span>|
|[(link: "Offer a memory for the sea")[(set: $romanceGaster to 2)(goto: "Gaster Memory Exchange")]]|<span class="gasterBtn">Offer a memory for the sea</span>|
|[(link: "Return to the crossroads")[(goto: "Meet the Locals")]]|<span class="gasterBtn">Return to the crossroads</span>|
<div class="gasterHeart">💜</div>
<!--:: Gaster Memory Exchange
<style>/* Same CSS as above f-->
You offer him a memory — a quiet sunrise by the sea you cherished long ago. Gaster closes his hollow eyes and listens.
“This… this one sings,” he says, voice thick with something deeper. “You let me hear it.” He gently holds your shoulder.
Your gift hums between you, fitting into the broken parts of his project.
(set: $romanceGaster to (max: $romanceGaster, 2))
(link: "Return to the crossroads")[
(goto: "Meet the Locals")
]
<span class="gasterHeart">💜</span>
<!--:: Gaster Tinkering-->
<style>
.gasterBtn {
display: inline-block;
margin-top: 1.5em;
padding: 12px 36px;
font-weight: bold;
font-size: 1.1em;
font-family: 'Palatino Linotype', serif;
color: #f4eeff;
background: linear-gradient(45deg, #5b3e88, #3a245c);
border: 2px solid #a694d1;
border-radius: 18px;
box-shadow: 0 0 14px #8467bbcc;
animation: pulseGaster 3s ease-in-out infinite;
cursor: pointer;
text-align: center;
text-decoration: none;
}
@keyframes pulseGaster {
0%,100% { box-shadow: 0 0 12px #8467bbcc; }
50% { box-shadow: 0 0 24px #cbb6ffdd; }
}
.gasterHeart {
font-size: 2em;
color: #af82e2;
text-shadow: 0 0 10px #cbb6ffcc;
margin-top: 1em;
animation: pulseGaster 3s ease-in-out infinite;
}
</style>
Gaster guides your hand to the gears he’s carefully repairing. Each cog and wire hums with purpose.
“Most see ruin,” he says softly. “But here… there’s life. A purpose reclaimed.”
As you tighten a bolt in unison, the machine clicks to life. Gaster’s eyes light up with quiet triumph.
“You… you have gentle hands,” he whispers. His gaze meets yours — patient, sincere.
(set: $romanceGaster to (max: $romanceGaster, 1))
(link: "Return to the crossroads")[
(goto: "Meet the Locals")
]
<span class="gasterHeart">💜</span>
<!--:: Gaster Silence-->
You sit beside Gaster in companionable silence. The machine’s low hum synchronizes with your heartbeat.
Slowly, he speaks: “Silence speaks, too. It listens.” His voice is soft, thoughtful.
You simply remain — a steady presence. After a moment, Gaster breathes out, “Thank you. That helps… more than words.”
(set: $romanceGaster to (max: $romanceGaster, 1))
(link: "Return to the crossroads")[
(goto: "Meet the Locals")
]
<span class="gasterHeart">💜</span>