body.night .main-visuals {
	filter: invert(1) hue-rotate(180deg);
}
/* Override Paper CSS global image styles for main images */
.boat, .fish, .info-image {
	border: none !important;
	box-shadow: none !important;
	background: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	max-width: unset !important;
	height: auto !important;
	display: block;
}
body.night {
	background: #181a1b;
}

#night-switch {
	transition: background .2s, color .2s;
}
body.night #night-switch {
	background: #ffffff;
	color: #000000;
	border: 1px solid #2222;
}
:root{
	--wave-duration: 3.6s; /* slower, more natural */
	--story-top: 16vh; /* vertical position for story text */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	background: #ffffff;
	color:#000000;
	position: relative;
	z-index: 0;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url('paper.jpg') center center/cover no-repeat;
    opacity: 1;
    transition: filter 0.3s;
}

body.night::before {
    filter: invert(1) hue-rotate(180deg);
}

.viewport{
	position:relative;
	width:100vw;
	height:100vh;
	overflow-x:hidden;
	overflow-y:auto; /* allow vertical scroll for diving */
}

/* The scroller holds a very wide world that we translate horizontally via JS */
.scroller{
	position:absolute;
	inset:0;
	will-change:transform;
}

.world{
	position:relative;
	width:520vw; /* tune world length */
	min-height: calc(100vh + 800px); /* allow for deep fish */
	height: auto;
}

.story{
	position:absolute; top:var(--story-top); transform:translateX(-50%);
	max-width: min(72ch, 80vw);
	color:#0a2239; font-family:"Homemade Apple", cursive; font-weight:400;
	font-size:clamp(18px, 5vmin, 32px); line-height:1.35;
	text-shadow:0 1px 0 #ffffff;
}
.story{
	position:absolute;
	left: 0; right: 0;
	transform:translateX(-50%);
	max-width: min(72ch, 80vw);
	font-family:"Homemade Apple", cursive; font-weight:400;
	font-size:clamp(18px, 5vmin, 32px); line-height:1.35;
	z-index: 10;
	transition: top 0.3s, color 0.3s, filter 0.3s;
}
.story-above {
	top: calc(var(--story-top, 16vh));
	color: #0a2239;
	text-shadow: 0 1px 0 #ffffff, 0 2px 8px #fff8;
	z-index: 10;
}
.story-behind {
	top: calc(var(--story-top, 16vh) + 50vh);
	color: #0a2239cc;
	opacity: 0.8;
	filter: blur(1.2px) brightness(0.92) saturate(0.7);
	z-index: 2;
	pointer-events: none;
}
@media (max-width: 700px) {
  .story {
    font-size: clamp(15px, 4vw, 22px);
    max-width: 96vw;
  }
  .story-above {
    top: 10vh;
  }
  .story-behind {
    top: 22vh;
  }
}

/* Fish layer */
.fish-layer{
	position:absolute; left:0; top:0; width:100%;
	min-height: calc(100vh + 800px);
	height: 100%;
	pointer-events:auto; overflow:visible;
	z-index: 2;
}
.fish{
	position:absolute; width:64px; height:auto; will-change:transform;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
	transform: none;
	cursor: pointer;
	transform-origin: 0% 50%; /* pivot at middle of the left side */
}

/* Center-fixed boat */
.boat-wrap{
	position:absolute; left:50%; top:48%; transform:translate(-50%, -45%);
	transform-origin:50% 100%; /* pivot around bottom center for natural bob */
	animation: float var(--wave-duration) ease-in-out infinite;
}
.boat{
	display:block;
	width:min(48vmin, 520px); height:auto; pointer-events:none; user-select:none;
}

@keyframes float{
	0%   { transform: translate(-50%, -45%) rotate(-1.6deg); }
	25%  { transform: translate(-50%, -46%) rotate(0.8deg); }
	50%  { transform: translate(-50%, -45%) rotate(1.6deg); }
	75%  { transform: translate(-50%, -44%) rotate(-0.8deg); }
	100% { transform: translate(-50%, -45%) rotate(-1.6deg); }
}

/* Wavy animated line under the boat */
.waterline{
	position:absolute; left:0; right:0; /* top is set by JS to sit under boat */
	width:100vw; height:10px;
	overflow:hidden;
	border-radius:5px;
	z-index:2;
}

.waterline .wave-strip{
	position:absolute; left:0; top:0; bottom:0; width:1600px; /* wide to allow smooth loop */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16' preserveAspectRatio='none'><path d='M0 8 Q 15 0 30 8 T 60 8 T 90 8 T 120 8' fill='none' stroke='%230a2239' stroke-width='3' stroke-linecap='round'/></svg>");
	background-repeat: repeat-x;
	background-size: 120px 100%;
	will-change: transform;
	animation: strip-move var(--wave-duration) linear infinite;
}

@keyframes strip-move{
	from { transform: translateX(0); }
	to { transform: translateX(-120px); }
}

@media (prefers-reduced-motion: reduce){
	.waterline{ animation:none }
}

/* Overlay card for fish info */
.info-overlay{
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.45);
	z-index: 9999;
	padding: 2rem;
}
.info-overlay.show{ display:flex }
.info-card{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	max-width: min(92vw, 900px);
	max-height: 85vh;
	background: #fff;
	color:#000;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0,0,0,.25);
	padding: 1.2rem;
	overflow: auto;
}
.info-image{
	flex: 0 0 auto;
	width: min(38vw, 280px);
	height: auto;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0,0,0,.15);
	background:#f4f6f8;
}
.info-text{ flex: 1 1 240px; min-width: 240px; align-self: center }
.info-title{ font-size: 1.25rem; font-weight: 600; margin: 0 0 .5rem }
.info-lore{ margin: 0 0 .75rem; line-height: 1.5 }
.info-author{ margin: 0; opacity: 0.75; font-style: italic }
.info-close{
	position: absolute;
	top: .5rem; right: .5rem;
	border: none; background: #000; color:#fff;
	padding: .35rem .6rem; border-radius: 8px; cursor: pointer;
	line-height: 1; font-size: 1rem;
}
body.night .info-card{ background:#fff; color:#000 }
.cloud-layer .cloud {
    filter: contrast(0.9);
    mix-blend-mode: multiply; /* for more natural sky blending */
	border: none !important;
	box-shadow: none !important;
	background: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	max-width: unset !important;
	height: auto !important;
}

body.night .cloud-layer .cloud {
    filter: brightness(0.7) contrast(1.2);
}

/* Pokedex panel */
.pokedex{
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: min(420px, 92vw);
	max-height: 70vh;
	background: #ffffff;
	color: #000000;
	border-radius: 14px;
	box-shadow: 0 14px 44px rgba(0,0,0,.25);
	padding: 0.75rem;
	display: none;
	z-index: 1001;
}
.pokedex[aria-hidden="false"]{ display: block; }
.pokedex-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .25rem .25rem .5rem;
	border-bottom: 1px dashed #0002;
}
.pokedex-title{ margin: 0; font-size: 1.1rem; }
.pokedex-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .6rem;
	padding: .6rem .2rem .2rem;
	overflow: auto;
	max-height: calc(70vh - 56px);
}
@media (max-width: 480px){
	.pokedex-grid{ grid-template-columns: repeat(2, 1fr); }
}
.dex-card{
	position: relative;
	background: #f6f7f9;
	border: 1px solid #00000010;
	border-radius: 10px;
	padding: .4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
}
.dex-card img{ width: 80px; height: auto; display: block; }
.dex-name{ font-size: .9rem; margin: 0; text-align: center; }
.dex-meta{ font-size: .7rem; opacity: .6; margin: 0; }
.dex-locked{ filter: grayscale(1) contrast(.7) opacity(.6); }
.dex-discovered{ outline: 2px solid #3a86ff33; box-shadow: inset 0 0 0 2px #3a86ff22; }

body.night .pokedex{ background:#ffffff; color:#000000 }