@import url("/style-sky-diary.css");
@import url("/style-theme-layout.css");

:root {
  --ink: #17204f;
  --navy: #17458d;
  --blue: #2e78c7;
  --paper: #fffdf0;
  --yellow: #ffe461;
  --pink: #f29abd;
  --safe: #8bd179;
  --ecchi: #f1c94e;
  --hentai: #dc6670;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  padding: 22px 12px 72px;
  color: var(--ink);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  background-color: #7fc7e9;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%),
    linear-gradient(rgba(255,255,255,.18) 50%, transparent 50%),
    url("/assets/clouds.png");
  background-size: 18px 18px, 18px 18px, auto;
  background-attachment: fixed;
}

a { color: #164eb0; }
a:visited { color: #6a398e; }
a:hover { color: #d52c6d; background: #fff2a2; }
a:focus-visible, .cursor:focus-visible { outline: 3px dashed #ef5c9c; outline-offset: 3px; }

.content {
  position: relative;
  z-index: 1;
  width: min(100%, 1000px);
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  background: var(--paper);
  border: 3px ridge #d9ebff;
  outline: 2px solid #1c4d8c;
  box-shadow: 8px 8px 0 rgba(29,66,112,.48);
}

.site-chrome {
  min-height: 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 4px 8px;
  color: white;
  font: bold 12px "Courier New", monospace;
  letter-spacing: .04em;
  text-align: left;
  background: linear-gradient(#337dcc, #17458d);
  border-bottom: 2px solid #0c2c63;
  text-shadow: 1px 1px #08234f;
}
.site-chrome nav { display: flex; }
.site-chrome nav a { padding: 3px 9px; color: #fff; border-left: 1px solid #8fc8ff; text-decoration: none; }
.site-chrome nav a:last-child { border-right: 1px solid #8fc8ff; }
.site-chrome nav a:hover { color: #152453; background: var(--yellow); text-shadow: none; }
.site-chrome__status { justify-self: end; }
.site-chrome__status i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #71f879; box-shadow: 0 0 5px #9fff96; }

header {
  position: relative;
  padding: 12px 20px 15px;
  background:
    radial-gradient(circle at 13px 13px, rgba(255,255,255,.68) 2px, transparent 3px) 0 0 / 26px 26px,
    linear-gradient(115deg, #fff0a3, #f5afd0 50%, #b7e8fb 50%);
  border-bottom: 4px double #1a4c8b;
}
.logo { margin: 0 auto 5px; text-align: center; }
.logo img { display: block; width: min(80%, 520px); height: auto; margin: auto; filter: drop-shadow(3px 4px 0 rgba(255,255,255,.8)); }
header h1 { display: inline-block; min-width: 210px; margin: 3px 0 7px; padding: 4px 24px; color: #1d4d94; font: bold 25px Georgia, serif; background: rgba(255,255,255,.85); border: 2px dashed #3675b6; text-shadow: 2px 2px 0 #fff, 3px 3px 0 #ef79ad; }
header p { width: fit-content; max-width: 720px; margin: 2px auto 8px; padding: 3px 8px; line-height: 1.45; background: rgba(255,255,255,.78); }
header h2 { margin: 8px auto 0; padding: 5px; color: white; font: bold 12px Verdana, sans-serif; background: #245da4; border: 2px outset #a9d7ff; }
.rating-stamp { position: absolute; right: 14px; bottom: 12px; padding: 5px 8px; color: #17204f; font: bold 10px "Courier New", monospace; border: 2px solid #17204f; transform: rotate(-2deg); box-shadow: 2px 2px 0 rgba(0,0,0,.2); }
.rating-safe .rating-stamp { background: #afe6a1; }
.rating-ecchi .rating-stamp { background: #ffe171; }
.rating-hentai .rating-stamp { color: #fff; background: #d75561; border-color: #6e101b; }

main { padding-bottom: 8px; background: #e6f3fa; }
#gallery-root { padding: 14px 14px 6px; }
.row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; }
.column { min-width: 0; padding: 6px; background: linear-gradient(#fff, #ddecf8); border: 2px outset #c8e2f3; box-shadow: 3px 3px 0 rgba(40,79,121,.25); }
.column img { display: block; width: 100% !important; max-width: none !important; aspect-ratio: 1 / 1; margin: 0; object-fit: cover; background: #b7d9e9; border: 1px solid #20376b; }
.gallery-caption { margin: 5px 0 0; padding: 4px 3px; overflow: hidden; color: #17204f; font: bold 10px Verdana, sans-serif; text-align: center; text-overflow: ellipsis; white-space: nowrap; background: #ffec9a; border: 1px solid #c9a23e; }
.gallery-type { display: inline-block; float: right; margin-left: 4px; padding: 1px 3px; color: #fff; font: bold 8px "Courier New", monospace; background: #2c62a4; }
.favorite-button { float: left; width: 22px; height: 19px; margin: -2px 4px -2px -2px; padding: 0; color: #506080; font: bold 16px/16px Arial, sans-serif; background: #fff; border: 1px outset #fff; }
.favorite-button:hover, .favorite-button.is-favorite { color: #c83270; background: #fff1a0; }
.favorite-button:active { border-style: inset; }
.gallery-error { margin: 12px; padding: 12px; color: #75162d; background: #ffe6e8; border: 2px dashed #c95469; }
.column:hover { background: #fff9d9; border-color: #ef9ec2; box-shadow: 4px 4px 0 #e6a7c2; }
.column:hover img { filter: saturate(1.08); }
.cursor { cursor: pointer; }

#gallery-pagination-container { padding: 0 10px 9px; }
#gallery-pagination-heading { width: fit-content; margin: 5px auto; padding: 3px 14px; color: white; font: bold 11px Verdana, sans-serif; background: #245da4; border: 1px solid #163b77; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pagination li a { display: block; min-width: 30px; padding: 6px 9px; color: #17204f; text-decoration: none; background: #e1eff8; border: 2px outset #fff; }
.pagination li a:hover { background: #fff1a0; }
.pagination li a.active { color: #fff; background: #d64179; border-color: #f6b4ce; }
.pagination li a.disabled { color: #888; background: #ddd; cursor: not-allowed; pointer-events: none; }

.modal { display: none; position: fixed; z-index: 50; inset: 0; padding: 38px 18px 30px; overflow: auto; background: rgba(12,29,61,.92); }
.modal-content { position: relative; width: min(94%, 1050px); margin: 0 auto; padding: 27px 8px 8px; background: #c7dce9; border: 3px outset #e7f6ff; box-shadow: 8px 8px 0 rgba(0,0,0,.48); }
.modal-content::before { content: "Aizumanga Image Viewer"; position: absolute; left: 4px; right: 4px; top: 4px; height: 20px; padding: 3px 6px; color: white; font: bold 11px Verdana, sans-serif; text-align: left; background: linear-gradient(90deg, #17458d, #4d92d1); }
.close { position: fixed; z-index: 52; top: 8px; right: 18px; width: 30px; height: 26px; padding: 0; color: #17204f; font: bold 23px/20px Arial, sans-serif; background: #ddd; border: 2px outset white; }
.close:hover, .close:focus { color: #fff; background: #d54458; }
.mySlides { display: none; position: relative; padding: 2px; background: #101a33; }
.mySlides.is-loading { min-height: min(60vh, 600px); }
.mySlides.is-loading::before { content: "LOADING MEDIA..."; position: absolute; left: 50%; top: 50%; color: #d8efff; font: bold 11px "Courier New", monospace; letter-spacing: 1px; transform: translate(-50%, -50%); animation: loading-blink .85s steps(2, end) infinite; }
.mySlides.is-loading img, .mySlides.is-loading video { position: relative; z-index: 1; }
@keyframes loading-blink { 50% { opacity: .35; } }
.mySlides img, .mySlides video { display: block; width: 100%; max-height: 74vh; margin: auto; object-fit: contain; background: #101a33; }
.prev, .next { position: absolute; top: 37%; width: auto; margin-top: -30px; padding: 12px 15px; color: #fff; font: bold 45px Arial, sans-serif; text-decoration: none; user-select: none; background: rgba(20,55,104,.55); border: 1px solid rgba(255,255,255,.65); }
.prev { left: 10px; }
.next { right: 10px; }
.prev:hover, .next:hover { color: #17204f; background: #ffe46a; }
.caption-container { padding: 6px 16px; color: white; text-align: center; background: #17458d; border-top: 2px solid #79ace0; }
.caption-container p { margin: 0; font-weight: bold; }
.modal-content > .row { grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 7px; }
.modal-content > .row .column { padding: 3px; box-shadow: none; }
.modal-content > .row img { aspect-ratio: 4 / 3; opacity: .62; }
.modal-content > .row img.active, .modal-content > .row img:hover { opacity: 1; outline: 2px solid #f45c9b; }

.navbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; padding: 9px; color: #fff; background: #17458d; border-top: 4px double #fff; }
.navbar > div, .navbar p { display: flex; gap: 4px; align-items: center; justify-content: center; margin: 0; }
.navbar a { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; color: #142556; background: #d7ecf8; border: 2px outset #fff; font-size: 0; text-decoration: none; }
.navbar a:active { border-style: inset; }
.navbar a i { display: none; }
.navbar a[href*="index"]::after { content: "\2302  HOME"; font: bold 11px Verdana, sans-serif; }
.navbar a[href*="patreon"]::after { content: "PATREON"; font: bold 11px Verdana, sans-serif; }
.navbar a[href*="x.com"]::after { content: "TWITTER / X"; font: bold 11px Verdana, sans-serif; }
.navbar a[href*="discord"]::after { content: "DISCORD"; font: bold 11px Verdana, sans-serif; }

.sticker { position: fixed; z-index: 0; pointer-events: none; image-rendering: pixelated; transform-origin: 50% 75%; filter: drop-shadow(2px 3px 0 rgba(24,49,87,.28)); animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.sticker--bob { animation-name: sticker-bob; }
.sticker--sway { animation-name: sticker-sway; }
.sticker--wiggle { animation-name: sticker-wiggle; }
.sticker--float { animation-name: sticker-float; }
@keyframes sticker-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-11px) rotate(1deg); } }
@keyframes sticker-sway { 0%,100% { transform: translateX(-4px) rotate(-3deg); } 50% { transform: translateX(5px) rotate(3deg); } }
@keyframes sticker-wiggle { 0%,100% { transform: rotate(-2deg); } 35% { transform: rotate(3deg) scale(1.02); } 70% { transform: rotate(-4deg); } }
@keyframes sticker-float { 0%,100% { transform: translate(0, 2px); } 33% { transform: translate(5px, -8px) rotate(2deg); } 66% { transform: translate(-4px, -5px) rotate(-2deg); } }

.cursor-particle { position: fixed; z-index: 9999; contain: layout paint; pointer-events: none; font-weight: bold; line-height: 1; text-shadow: 0 0 3px #fff, 1px 1px 0 #36547d; will-change: transform, opacity; animation: cursor-sparkle .95s ease-out forwards; }
@keyframes cursor-sparkle { from { opacity: 1; transform: translate3d(0,0,0) scale(.85); } 35% { opacity: 1; transform: translate3d(2px,5px,0) scale(1.2); } to { opacity: 0; transform: translate3d(var(--particle-x), var(--particle-y), 0) scale(.35) rotate(100deg); } }

@media (pointer: fine) and (min-width: 761px) {
  html, body, body * {
    cursor: url("/assets/osaka-cursor.svg?v=3") 7 9, auto !important;
  }
}

@media (max-width: 760px) {
  body { padding: 0 0 50px; }
  .content { width: 100%; border-inline: 0; outline: 0; box-shadow: none; }
  .site-chrome { grid-template-columns: 1fr auto; font-size: 10px; }
  .site-chrome__brand { display: none; }
  .site-chrome nav a { padding-inline: 5px; }
  header { padding-inline: 8px; }
  header h1 { font-size: 21px; }
  .rating-stamp { position: static; display: block; width: fit-content; margin: 8px auto 0; transform: none; }
  #gallery-root { padding: 8px; }
  .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .column { padding: 4px; }
  .gallery-caption { font-size: 9px; }
  .modal { padding: 34px 0 12px; }
  .modal-content { width: 100%; border-inline: 0; }
  .prev, .next { top: 32%; padding: 8px; font-size: 34px; }
  .modal-content > .row { grid-template-columns: repeat(4, 1fr); padding-inline: 4px; }
  .sticker { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sticker, .cursor-particle, .mySlides.is-loading::before { animation: none; }
  .cursor-particle { display: none; }
}


/* Persistent theme switcher and alternate gallery palettes */
.site-chrome { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.theme-picker { display: inline-flex; align-items: center; gap: 5px; color: #fff; font: bold 9px "Courier New", monospace; }
.theme-picker select { max-width: 116px; padding: 2px 3px; color: #17204f; font: 10px Verdana, sans-serif; background: #fffbd1; border: 2px inset #d5e8f8; }

html[data-theme="strawberry"] {
  --ink: #5d2445;
  --navy: #8f2e67;
  --blue: #c84f89;
  --paper: #fff4f8;
  --yellow: #ffe58a;
  --pink: #f277ac;
}
html[data-theme="strawberry"] body { background-color: #e995bd; background-image: radial-gradient(#fff7fb 2px, transparent 3px), url("/assets/clouds.png"); background-size: 22px 22px, auto; }
html[data-theme="strawberry"] .site-chrome,
html[data-theme="strawberry"] header h2,
html[data-theme="strawberry"] #gallery-pagination-heading,
html[data-theme="strawberry"] .caption-container,
html[data-theme="strawberry"] .navbar { background: linear-gradient(90deg, #7e295d, #d75e98 70%, #f3a9c9); }
html[data-theme="strawberry"] main { background: #f8d6e5; }
html[data-theme="strawberry"] .row .column { background: linear-gradient(#fff, #f4dce8); }

html[data-theme="frutiger"] {
  --ink: #123d56;
  --navy: #0871b5;
  --blue: #20a7da;
  --paper: #f5fff9;
  --yellow: #fff07a;
  --pink: #ff78aa;
}
html[data-theme="frutiger"] body {
  background-color: #71cbed;
  background-image:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.92) 0 4%, transparent 4.5%),
    radial-gradient(circle at 79% 23%, rgba(255,255,255,.76) 0 5%, transparent 5.5%),
    linear-gradient(#54bce8 0 53%, #6bd44a 54%, #198b31 100%);
  background-size: 520px 280px, 650px 320px, auto;
  background-attachment: fixed;
}
html[data-theme="frutiger"] .content { border-color: #c9f8ff; outline-color: #0877a7; box-shadow: 8px 8px 0 rgba(0,83,117,.36); }
html[data-theme="frutiger"] .site-chrome,
html[data-theme="frutiger"] header h2,
html[data-theme="frutiger"] #gallery-pagination-heading,
html[data-theme="frutiger"] .caption-container,
html[data-theme="frutiger"] .navbar { background: linear-gradient(#43ccef, #0878bf 55%, #07558f); }
html[data-theme="frutiger"] header { background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(116,223,247,.72) 52%, rgba(128,225,74,.78)); }
html[data-theme="frutiger"] main { background: rgba(230,255,248,.92); }
html[data-theme="frutiger"] .row .column { background: linear-gradient(#fff, #d7f6f5); border-color: #b9ebf2; }
html[data-theme="frutiger"] .gallery-caption { background: linear-gradient(#fff69a, #f2d94d); }
html[data-theme="frutiger"] .modal { background: rgba(0,46,70,.9); }
html[data-theme="frutiger"] .theme-picker select { background: #efffff; border-color: #b2eff7; }

html[data-theme="xp"] {
  --ink: #17356c;
  --navy: #0755c7;
  --blue: #2877df;
  --paper: #ece9d8;
  --yellow: #fff17d;
  --pink: #f28bad;
}
html[data-theme="xp"] body {
  background-color: #3b82df;
  background-image:
    radial-gradient(ellipse at 25% 22%, #fff 0 7%, rgba(255,255,255,.8) 7.5% 10%, transparent 10.5%),
    radial-gradient(ellipse at 76% 17%, rgba(255,255,255,.9) 0 6%, transparent 6.5%),
    linear-gradient(#2e76d5 0 58%, #75c94d 59%, #2c8f25 100%);
  background-size: 620px 330px, 720px 360px, auto;
  background-attachment: fixed;
}
html[data-theme="xp"] .content { background: #ece9d8; border-color: #7ea8f5; outline-color: #0755c7; box-shadow: 8px 8px 0 rgba(0,31,91,.42); }
html[data-theme="xp"] .site-chrome,
html[data-theme="xp"] header h2,
html[data-theme="xp"] #gallery-pagination-heading,
html[data-theme="xp"] .caption-container,
html[data-theme="xp"] .navbar { background: linear-gradient(#3b91f7 0 9%, #0755c7 12% 82%, #003d9e 100%); }
html[data-theme="xp"] header { background: linear-gradient(135deg, #fff, #d9e8ff 55%, #b9d6ff); border-bottom-color: #0755c7; }
html[data-theme="xp"] main { background: #ece9d8; }
html[data-theme="xp"] .row .column { background: linear-gradient(#fff, #e7e4d3); border-color: #fff #aca899 #aca899 #fff; }
html[data-theme="xp"] .gallery-caption { background: #fff7c8; border-color: #d6c96b; }
html[data-theme="xp"] .pagination li a,
html[data-theme="xp"] .navbar a { background: linear-gradient(#fff, #ece9d8); border-color: #fff #aca899 #aca899 #fff; }
html[data-theme="xp"] .modal-content { background: #ece9d8; border-color: #fff #0755c7 #0755c7 #fff; }
html[data-theme="xp"] .modal-content::before { background: linear-gradient(90deg, #0755c7, #3a93f8); }
html[data-theme="xp"] .theme-picker select { background: #fff; border-color: #7f9db9; }

html[data-theme="midnight"] {
  --ink: #292550;
  --navy: #20205f;
  --blue: #5146a5;
  --paper: #f2f0ff;
  --yellow: #f6db68;
  --pink: #d273c6;
}
html[data-theme="midnight"] body { background-color: #090d28; background-image: radial-gradient(#d7dcff 1px, transparent 2px), linear-gradient(#121844, #090d28); background-size: 25px 25px, auto; }
html[data-theme="midnight"] .site-chrome,
html[data-theme="midnight"] header h2,
html[data-theme="midnight"] #gallery-pagination-heading,
html[data-theme="midnight"] .caption-container,
html[data-theme="midnight"] .navbar { background: linear-gradient(90deg, #17194e, #5146a5 68%, #9169b8); }
html[data-theme="midnight"] main { background: #d7d9ef; }
html[data-theme="midnight"] .row .column { background: linear-gradient(#fff, #e1e0f2); }
html[data-theme="midnight"] .modal { background: rgba(5,7,25,.94); }

@media (max-width: 760px) {
  .site-chrome { grid-template-columns: minmax(0,1fr) auto auto; }
  .theme-picker span { display: none; }
}

@media (max-width: 560px) {
  .site-chrome { grid-template-columns: minmax(0,1fr) auto; }
  .site-chrome__status { display: none; }
  .theme-picker select { max-width: 92px; }
}
.gallery-item-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 4px 0 1px; color: #173c77; font: bold 13px Verdana, sans-serif; text-decoration: none; vertical-align: middle; background: linear-gradient(#fff,#cfe7f6); border: 2px outset #fff; }
.gallery-item-link:active { border-style: inset; }