@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

:root {
  --ui-pink: #f164d2;
  --ui-ink: #627c9b;
  --ui-violet: #8070df;

  /* SHELL CONTENT: adjust these four values to move/resize everything inside. */
  --shell-content-top: 22%;
  --shell-content-right: 23%;
  --shell-content-bottom: 27%;
  --shell-content-left: 23%;

  /* EXIT BUTTON: attached to the lower-right edge of the seashell. */
  --exit-right: 27%;
  --exit-bottom: 18%;
  --exit-size: clamp(45px, 7vw, 60px);

  /* FOUR MENU BUTTONS: change left/bottom values to hand-position each pearl. */
  --settings-left: 12%;
  --settings-bottom: 29%;
  --profile-left: 9%;
  --profile-bottom: 17%;
  --achievement-left: 17%;
  --achievement-bottom: 11%;
  --console-left: 27%;
  --console-bottom: 12%;
  --menu-button-size: clamp(58px, 8vw, 60px);

  /* RIGHT TOOLBAR: Home and Map buttons. */
  --toolbar-button-size: 58px;
  --toolbar-button-right: 5px;
  --toolbar-home-top: 15px;
  --toolbar-map-top: 80px;
  --toolbar-decor-width: 65px;
  --toolbar-decor-height: 248px;
  --toolbar-decor-top: 0px;
  --toolbar-decor-right: 0px;

  /* WHOLE SHELL: keeps the 1225 × 991 image inside short/wide screens. */
  --shell-max-width: 810px;
  --shell-screen-gap: 32px;

  /* INNER PAGE UI: independent from the seashell and pearl-button scale. */
  --inner-content-width: 88%;
  --gem-offset-y: clamp(0px, 1.4vw, 16px);
  --inner-content-offset-y: clamp(10px, 1.5vw, 18px);
  --option-row-width: 300px;
  --option-row-height: 34px;
  --option-row-gap: 8px;
  --option-font-size: clamp(12px, 1.45vw, 16px);

  /* SEA BOOK: content boundaries inside the book artwork. */
  --book-content-top: 31%;
  --book-content-right: 5%;
  --book-content-bottom: 9%;
  --book-content-left: 16%;

  /* SEA BOOK TITLE: move the eyebrow, large title, and subtitle together. */
  --book-title-offset-x: 30px;
  --book-title-offset-y: 0px;

  /* SEA BOOK SCROLLBAR: pearl size and thickness of the vertical track. */
  --book-scroll-column-width: clamp(31px, 4.4vw, 47px);
  --book-scroll-pearl-size: clamp(22px, 2.8vw, 31px);
  --book-scroll-track-width: 12px;

  /* SEA BOOK EXIT BUTTON: position and scale relative to the whole book. */
  --book-exit-top: 7%;
  --book-exit-left: 8%;
  --book-exit-size: clamp(38px, 5.2vw, 58px);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
#webgl { display: block; width: 100%; height: 100%; }
body.is-loading #webgl, body.is-loading #game-ui { pointer-events: none; }
body.is-loading > div:not(.loading-screen):not(#game-ui), body.is-loading > canvas:not(#webgl) { visibility: hidden; }
.loading-screen { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: end center; overflow: hidden; padding: clamp(34px, 8vh, 86px) 24px; background: #8271df; color: #fff; font-family: "Lilita One", "Arial Rounded MT Bold", sans-serif; opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s linear .7s; }
.loading-screen.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-background { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; user-select: none; animation: loading-drift 12s ease-in-out infinite alternate; }
.loading-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(83, 102, 161, .05) 28%, rgba(73, 62, 132, .2) 65%, rgba(54, 42, 105, .62) 100%); }
.loading-card { position: relative; width: min(620px, 88vw); text-align: center; filter: drop-shadow(0 5px 9px rgba(69, 52, 124, .28)); }
.loading-eyebrow { margin: 0 0 5px; color: #fff4fc; font-size: clamp(10px, 1.4vw, 14px); letter-spacing: .28em; text-shadow: 0 2px 4px #6659a8; }
.loading-card h1 { margin: 0 0 clamp(18px, 3vh, 30px); color: #f6abd3; font-size: clamp(27px, 4.5vw, 48px); font-weight: 400; letter-spacing: .025em; -webkit-text-stroke: 1.5px white; text-shadow: 0 3px 0 #718eaf, 0 6px 12px rgba(69, 52, 124, .38); }
.loading-track { position: relative; width: 100%; height: clamp(20px, 3vw, 27px); overflow: hidden; padding: 4px; border: 3px solid rgba(255, 255, 255, .92); border-radius: 999px; background: rgba(101, 85, 166, .48); box-shadow: inset 0 3px 8px rgba(73, 56, 137, .45), 0 4px 0 rgba(91, 105, 157, .62), 0 7px 13px rgba(57, 44, 108, .24); }
.loading-fill { position: relative; width: 0; height: 100%; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, #ec75ca 0%, #ffaddd 55%, #f48bce 100%); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .72), 0 0 12px rgba(255, 180, 231, .64); }
.loading-shine { position: absolute; inset: 1px 4px auto; height: 38%; border-radius: 999px; background: rgba(255,255,255,.5); }
.loading-fill::after { content: ""; position: absolute; top: 50%; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: white; box-shadow: 0 0 10px 3px #fff, 0 0 18px 7px #ffc5ec; transform: translateY(-50%); }
.loading-meta { display: flex; justify-content: space-between; gap: 18px; margin-top: 12px; padding: 0 5px; color: #fff; font-size: clamp(12px, 1.8vw, 16px); letter-spacing: .055em; text-shadow: 0 2px 4px #5f589a; }
.loading-percent { min-width: 42px; text-align: right; color: #ffd4ed; }
.loading-screen.has-error .loading-fill { background: #d66a9f; }
@keyframes loading-drift { from { transform: scale(1.015) translate3d(-.3%, 0, 0); } to { transform: scale(1.045) translate3d(.3%, -.4%, 0); } }
#game-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-family: "Lilita One", "Arial Rounded MT Bold", sans-serif; color: var(--ui-ink); }
.notify-banner { position: absolute; z-index: 20; top: clamp(18px, 4vh, 42px); left: 50%; display: grid; grid-template-columns: 28px minmax(0, 1fr) 52px; align-items: center; gap: 12px; width: min(430px, calc(100vw - 32px)); min-height: 92px; padding: 13px 14px 13px 18px; border: 3px solid rgba(255, 255, 255, .9); border-radius: 27px; background: linear-gradient(135deg, rgba(255, 236, 249, .97), rgba(239, 206, 255, .97)); box-shadow: inset 0 2px 6px #fff, 0 7px 0 rgba(111, 105, 181, .35), 0 14px 28px rgba(65, 47, 112, .25); opacity: 0; transform: translate(-50%, calc(-100% - 60px)) scale(.94); transition: opacity .3s ease, transform .48s cubic-bezier(.2, 1.25, .35, 1); }
.notify-banner.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.notify-sparkle { align-self: start; color: #fff; font-size: 25px; text-shadow: 0 2px 0 #d969ba, 0 0 9px #f164d2; animation: notify-twinkle 1.7s ease-in-out infinite; }
.notify-copy { display: flex; min-width: 0; flex-direction: column; }
.notify-copy small { color: #dd58b5; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.notify-copy strong { overflow: hidden; margin: 1px 0; color: #6d62b6; font-size: clamp(18px, 4vw, 23px); font-weight: 400; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.notify-copy span { color: #7186a1; font: 700 12px/1.2 Arial, sans-serif; }
.notify-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff, #f592d5 58%, #9c82db); color: #fff; font-size: 29px; box-shadow: inset 0 -3px 5px #836bc655, 0 3px 7px #79579b55; text-shadow: 0 2px 2px #8b63a7; }
.notify-banner[data-type="teleport"] .notify-icon { background: radial-gradient(circle at 35% 25%, #fff, #8de5ee 58%, #718ddb); }
@keyframes notify-twinkle { 50% { opacity: .55; transform: rotate(18deg) scale(.78); } }
.game-toolbar { position: absolute; top: 10px; right: 12px; width: 104px; height: 324px; pointer-events: none; }
.toolbar-decor { position: absolute; top: var(--toolbar-decor-top); right: var(--toolbar-decor-right); width: var(--toolbar-decor-width); height: var(--toolbar-decor-height); object-fit: contain; pointer-events: none; }
.game-toolbar button, .image-button, .shell-tabs button { border: 0; padding: 0; background: none; cursor: pointer; }
.game-toolbar button { position: absolute; right: var(--toolbar-button-right); width: var(--toolbar-button-size); height: var(--toolbar-button-size); pointer-events: auto; transition: transform .16s ease, filter .16s ease; }
.game-toolbar button:first-of-type { top: var(--toolbar-home-top); }
.game-toolbar button:last-of-type { top: var(--toolbar-map-top); }
.game-toolbar button img, .image-button img, .shell-tabs img { display: block; width: 100%; height: 100%; object-fit: contain; }
.game-toolbar button:hover, .game-toolbar button:focus-visible, .shell-tabs button:hover, .shell-tabs button:focus-visible, .image-button:hover { transform: scale(1.07); filter: brightness(1.08) drop-shadow(0 5px 5px #7e376955); outline: none; }
.shell-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; }
.shell-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.shell-backdrop { position: absolute; inset: 0; border: 0; background: rgba(23, 45, 83, .16); cursor: default; backdrop-filter: blur(2px); }
.shell-panel {
  position: relative;
  width: min(
    78vw,
    var(--shell-max-width),
    calc((100dvh - var(--shell-screen-gap)) * 1225 / 991)
  );
  max-width: calc(100vw - var(--shell-screen-gap));
  aspect-ratio: 1225 / 991;
  filter: drop-shadow(0 18px 15px rgba(78, 28, 81, .3));
  transform: translateY(12px) scale(.97);
  transition: transform .25s ease;
}
.is-open .shell-panel { transform: none; }
.shell-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.shell-close { position: absolute; z-index: 4; right: var(--exit-right); bottom: var(--exit-bottom); width: var(--exit-size); aspect-ratio: 1; }
.shell-scroll {
  position: absolute;
  z-index: 2;
  top: var(--shell-content-top);
  right: var(--shell-content-right);
  bottom: var(--shell-content-bottom);
  left: var(--shell-content-left);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  text-align: center;
  padding: 0 3% 3%;
  contain: layout paint;
}
.shell-scroll::-webkit-scrollbar, .shell-content::-webkit-scrollbar, .console-box::-webkit-scrollbar { display: none; width: 0; height: 0; }
.shell-gem { display: block; flex: 0 0 auto; width: min(68%, 320px); height: auto; margin: var(--gem-offset-y) auto -1%; pointer-events: none; }
.shell-title { flex: 0 0 auto; margin: 0 0 var(--inner-content-offset-y); color: #f2a4c2; letter-spacing: .1em; font-size: clamp(24px, 3.2vw, 42px); -webkit-text-stroke: 1.5px white; text-shadow: 0 3px 0 #6d9db5, 0 5px 8px #627c9b55; }
.shell-content { width: var(--inner-content-width); min-height: 0; margin: 0 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.map-content h2 { margin: 0 0 22px; color: #f2a4c2; letter-spacing: .1em; font-size: clamp(24px, 3.2vw, 42px); -webkit-text-stroke: 1.5px white; text-shadow: 0 3px 0 #6d9db5, 0 5px 8px #627c9b55; }
.shell-tabs { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.shell-tabs button { position: absolute; width: var(--menu-button-size); aspect-ratio: 1; pointer-events: auto; transition: transform .16s ease, filter .16s ease; }
.shell-tabs button:nth-child(1) { left: var(--settings-left); bottom: var(--settings-bottom); }
.shell-tabs button:nth-child(2) { left: var(--profile-left); bottom: var(--profile-bottom); }
.shell-tabs button:nth-child(3) { left: var(--achievement-left); bottom: var(--achievement-bottom); }
.shell-tabs button:nth-child(4) { left: var(--console-left); bottom: var(--console-bottom); }
.shell-tabs button.is-active { filter: brightness(1.12) drop-shadow(0 0 8px #fff) drop-shadow(0 5px 5px #d148a888); transform: translateY(-3px) scale(1.08); }
.setting-list { display: grid; gap: var(--option-row-gap); width: min(100%, var(--option-row-width)); margin: auto; }.setting-row { display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; min-height: var(--option-row-height); padding: 5px 14px; border: 2px solid #fff9; border-radius: 999px; background: linear-gradient(#ffb8eb, #f47ccc); color: #655ba8; font-size: var(--option-font-size); font-weight: 800; text-align: left; box-shadow: inset 0 2px 7px #fff9; }.setting-row input, .setting-row select { min-width: 0; max-height: 25px; accent-color: var(--ui-violet); }.setting-row input[type="checkbox"] { justify-self: end; width: 18px; height: 18px; }
.profile-card { display: flex; gap: 18px; align-items: center; justify-content: center; }.profile-avatar { display: block; width: 96px; height: 96px; border: 4px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff, #f5a8dc 60%, #a987d4); object-fit: cover; box-shadow: 0 7px 14px #66578b44; }.profile-card h3, .achievement-list h3 { margin: 0; color: #6d62b6; }.profile-card h3 { font-size: clamp(24px, 3.5vw, 38px); font-weight: 400; }.profile-card p, .achievement-list p { margin: 4px 0; }.profile-card p { color: #d34bac; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }.stat-grid span { padding: 12px 7px; border-radius: 18px; background: #fff8; }.stat-grid strong { display: block; color: #d34bac; font-size: 1.25rem; }
.about-copy { display: grid; gap: 9px; margin-top: 18px; padding: 16px 18px; border: 3px solid #fff9; border-radius: 20px; background: linear-gradient(135deg, #ffc5e9bb, #bceaf0bb); color: #655f8e; text-align: left; box-shadow: inset 0 2px 8px #fff8; }
.about-copy p { margin: 0; font: 700 clamp(11px, 1.35vw, 14px)/1.55 Arial, sans-serif; }
.about-contact { display: grid; gap: 2px; margin: 16px auto 5px; width: min(100%, 430px); padding: 12px 18px; border: 3px solid #fff; border-radius: 16px; background: linear-gradient(135deg, #e96abe, #8875ca); color: #fff; box-shadow: 0 6px 0 #66559d, 0 11px 18px #4f3e7e33; text-align: center; text-decoration: none; transition: transform .16s ease, filter .16s ease; }
.about-contact strong { font-size: clamp(15px, 2vw, 21px); font-weight: 400; letter-spacing: .05em; }
.about-contact span { font: 700 clamp(9px, 1.2vw, 12px)/1.35 Arial, sans-serif; overflow-wrap: anywhere; opacity: .92; }
.about-contact:hover, .about-contact:focus-visible { outline: none; filter: brightness(1.08); transform: translateY(-2px); }
.achievement-list { display: grid; gap: 10px; text-align: left; }.achievement-list article { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 18px; background: #fff9; }.achievement-list article > span { font-size: 28px; color: #e24ebf; }.achievement-list b { color: #7665c5; }
.console-box { height: 135px; overflow: auto; scrollbar-width: none; padding: 12px 16px; border: 2px solid #fff9; border-radius: 18px; background: #66528bd9; color: #fff; text-align: left; font: 13px/1.5 monospace; }.console-box p { margin: 0 0 4px; }.console-form { display: grid; gap: 5px; margin-top: 10px; text-align: left; font-weight: bold; }.console-form div { display: flex; }.console-form input { flex: 1; min-width: 0; border: 2px solid #efa4dc; border-radius: 99px 0 0 99px; padding: 9px 14px; }.console-form button { border: 0; border-radius: 0 99px 99px 0; padding: 0 18px; background: #e55bbf; color: white; font-weight: bold; }
.control-guide { display: grid; gap: 14px; text-align: left; }
.control-guide article { display: grid; grid-template-columns: minmax(92px, 130px) 1fr; gap: 18px; align-items: center; padding: 16px 18px; border: 3px solid #fff9; border-radius: 20px; background: linear-gradient(135deg, #ffb8ebdd, #9edeeadd); box-shadow: inset 0 2px 8px #fff9, 0 6px 12px #67558e33; }
.control-guide h3 { margin: 0 0 3px; color: #7665c5; font-size: clamp(18px, 2.4vw, 26px); font-weight: 400; }
.control-guide p { margin: 0; color: #655f8e; font: 700 clamp(11px, 1.3vw, 14px)/1.45 Arial, sans-serif; }
.control-guide kbd { display: grid; place-items: center; min-width: 38px; min-height: 38px; border: 3px solid #fff; border-radius: 10px; background: linear-gradient(#fefaff, #ddc9ef); color: #7564b6; font: 400 20px/1 "Lilita One", "Arial Rounded MT Bold", sans-serif; box-shadow: 0 5px 0 #a88dc3, 0 7px 8px #66578b44; }
.wasd-keys { display: grid; grid-template-columns: repeat(3, 38px); gap: 7px; justify-content: center; }
.wasd-keys kbd:first-child { grid-column: 2; }
.wasd-keys kbd:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.wasd-keys kbd:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.wasd-keys kbd:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.control-key-pair { display: flex; gap: 8px; align-items: center; justify-content: center; }
.control-key-pair-wide { flex-wrap: wrap; }
.control-key-pair-wide kbd { padding: 0 8px; font-size: 13px; }
.interaction-key { width: 58px; height: 58px; margin: auto; font-size: 29px !important; }
.game-control-hint { position: absolute; z-index: 2; right: 22px; bottom: 18px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px 13px; max-width: min(620px, calc(100vw - 36px)); padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; background: rgba(30, 44, 73, .28); color: rgba(255, 255, 255, .68); font: 600 11px/1.25 Arial, sans-serif; letter-spacing: .015em; text-shadow: 0 1px 2px rgba(27, 37, 63, .55); pointer-events: none; transition: opacity .2s ease; }
.game-control-hint span { white-space: nowrap; }
.game-control-hint kbd { margin-right: 3px; color: rgba(255, 255, 255, .82); font: inherit; font-weight: 800; }
body.ui-is-open .game-control-hint { opacity: .18; }
.map-card { position: relative; flex: 0 1 auto; width: 100%; aspect-ratio: 16 / 8; overflow: hidden; border: 4px solid #fff9; border-radius: 22px; background: #8fe2ef; box-shadow: inset 0 0 22px #4a81a766; cursor: grab; touch-action: none; user-select: none; }.map-card.is-panning { cursor: grabbing; }.map-pan { position: absolute; left: 50%; top: 50%; width: 145%; aspect-ratio: 1401 / 1123; transform: translate(-50%, -50%); will-change: transform; }.map-texture { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }.map-locations { position: absolute; inset: 0; }.map-pin { position: absolute; width: clamp(24px, 4.5vw, 38px); padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -58%); filter: drop-shadow(0 2px 2px #674c8d88); transition: transform .15s ease, filter .15s ease; }.map-pin img { display: block; width: 100%; height: auto; pointer-events: none; }.map-pin small { position: absolute; left: 50%; top: 84%; padding: 2px 6px; border: 2px solid #fff9; border-radius: 20px; background: linear-gradient(#ffc8ee, #ef79cd); color: #675aa8; font: 9px/1.15 "Lilita One", sans-serif; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 2px 4px #78518155; pointer-events: none; }.map-pin:hover:not(:disabled), .map-pin:focus-visible { z-index: 2; outline: none; transform: translate(-50%, -58%) scale(1.16); filter: brightness(1.08) drop-shadow(0 3px 4px #674c8daa); }.map-pin:disabled { cursor: not-allowed; filter: grayscale(.7) opacity(.48); }.map-help { margin: 7px 0 0; font-size: 12px; font-weight: bold; }
body.ui-is-open #webgl { filter: saturate(.93); }
.project-overlay { position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; padding: 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; }
.project-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.project-backdrop { position: absolute; inset: 0; border: 0; background: rgba(50, 58, 111, .22); backdrop-filter: blur(3px); }
.project-book { position: relative; width: min(920px, calc(100vw - 28px), calc((100dvh - 28px) * 1230 / 895)); aspect-ratio: 1230 / 895; filter: drop-shadow(0 18px 18px rgba(74, 44, 105, .3)); transform: translateY(18px) scale(.96); transition: transform .35s cubic-bezier(.2, 1, .35, 1); }
.project-overlay.is-open .project-book { transform: none; }
.project-book-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.project-book-close { position: absolute; z-index: 4; top: var(--book-exit-top); left: var(--book-exit-left); width: var(--book-exit-size); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 3px 4px #955b9070); transition: transform .16s ease, filter .16s ease; }
.project-book-close img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-book-close:hover, .project-book-close:focus-visible { outline: none; filter: brightness(1.08) drop-shadow(0 5px 5px #955b9088); transform: rotate(8deg) scale(1.08); }
.project-book-viewport { position: absolute; z-index: 2; top: var(--book-content-top); right: var(--book-content-right); bottom: var(--book-content-bottom); left: var(--book-content-left); display: grid; grid-template-columns: minmax(0, 1fr) var(--book-scroll-column-width); gap: clamp(8px, 1.5vw, 18px); overflow: hidden; }
.project-book-content { min-width: 0; overflow-x: hidden; overflow-y: auto; padding: 1% 2% 9% 4%; color: #6b7599; outline: none; scrollbar-width: none; overscroll-behavior: contain; }
.project-book-content::-webkit-scrollbar { display: none; }
.project-book-content header { margin: 0 0 clamp(18px, 3vw, 34px); text-align: center; transform: translate(var(--book-title-offset-x), var(--book-title-offset-y)); }
.project-profile { display: grid !important; grid-template-columns: clamp(84px, 15vw, 132px) 1fr; gap: 18px; align-items: center; margin: 0 0 clamp(20px, 3vw, 32px) !important; padding: 14px 18px; border: 3px solid rgba(255, 255, 255, .88); border-radius: 24px; background: linear-gradient(135deg, rgba(255, 190, 232, .58), rgba(157, 224, 235, .55)); box-shadow: inset 0 2px 9px #fff8, 0 8px 18px rgba(79, 62, 126, .16); }
.project-profile img { display: block; width: 100%; aspect-ratio: 1; border: 4px solid #fff; border-radius: 50%; object-fit: cover; background: #e7d9f2; box-shadow: 0 7px 14px rgba(92, 67, 126, .25); }
.project-profile div { display: grid; gap: 4px; min-width: 0; }
.project-profile strong { color: #7767bb; font: 400 clamp(24px, 4vw, 40px)/1 "Lilita One", "Arial Rounded MT Bold", sans-serif; letter-spacing: .03em; overflow-wrap: anywhere; -webkit-text-stroke: 1px #fff; text-shadow: 0 3px 0 #d9cce9; }
.project-profile span { color: #d75cae; font: 700 clamp(10px, 1.45vw, 14px)/1.3 Arial, sans-serif; letter-spacing: .13em; }
.project-eyebrow { color: #e568bd; font-size: clamp(9px, 1.35vw, 13px); letter-spacing: .2em; text-transform: uppercase; }
.project-book-content h2 { margin: 2px 0 4px; color: #8373c0; font-size: clamp(28px, 5vw, 56px); font-weight: 400; letter-spacing: .025em; line-height: 1; overflow-wrap: anywhere; -webkit-text-stroke: 1px #fff; text-shadow: 0 3px 0 #d9cce9; }
.project-subtitle { margin: 0 auto; color: #d75cae; font-size: clamp(11px, 1.65vw, 16px); }
.project-book-content section { margin: 0 0 clamp(18px, 2.8vw, 30px); }
.project-book-content h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 7px; color: #8170bd; font-size: clamp(19px, 2.7vw, 29px); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; }
.project-book-content h3::after { content: ""; flex: 1; height: 2px; border-radius: 99px; background: linear-gradient(90deg, #eda2d4, transparent); }
.project-book-content p, .project-book-content li { font: 700 clamp(11px, 1.35vw, 14px)/1.55 Arial, sans-serif; }
.project-book-content p { margin: 0 0 10px; }
.project-book-content ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.project-book-content li { position: relative; padding-left: 21px; }
.project-book-content li::before { content: "✦"; position: absolute; left: 1px; color: #e56abd; }
.project-media { margin: 14px 0 0; }
.project-media video { display: block; width: 100%; max-height: min(48vh, 420px); border: 3px solid rgba(255, 255, 255, .92); border-radius: 16px; background: #252242; box-shadow: 0 8px 18px rgba(79, 62, 126, .22); }
.project-media figcaption { margin-top: 7px; color: #9a83bd; font: 700 clamp(10px, 1.2vw, 13px)/1.4 Arial, sans-serif; text-align: center; }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.project-gallery figure { min-width: 0; margin: 0; }
.project-gallery a { display: block; overflow: hidden; border: 3px solid rgba(255, 255, 255, .92); border-radius: 14px; background: #252242; box-shadow: 0 7px 16px rgba(79, 62, 126, .2); }
.project-gallery img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .25s ease, filter .25s ease; }
.project-gallery a:hover img, .project-gallery a:focus-visible img { filter: brightness(1.07); transform: scale(1.025); }
.project-gallery figcaption { margin-top: 6px; color: #9a83bd; font: 700 clamp(9px, 1.1vw, 12px)/1.4 Arial, sans-serif; text-align: center; }
.project-pdf object { display: block; width: 100%; height: clamp(280px, 48vh, 520px); border: 3px solid rgba(255, 255, 255, .92); border-radius: 16px; background: #252242; box-shadow: 0 8px 18px rgba(79, 62, 126, .22); }
.project-media-link { display: block; margin-top: 8px; color: #d75cae; font: 700 clamp(10px, 1.3vw, 14px)/1.4 Arial, sans-serif; text-align: center; }
.project-download { display: grid; gap: 3px; margin-top: 12px; padding: 14px 18px; border: 3px solid rgba(255, 255, 255, .92); border-radius: 16px; background: linear-gradient(135deg, #e96abe, #8772c5); color: #fff; box-shadow: 0 7px 0 #66559d, 0 12px 20px rgba(79, 62, 126, .22); text-align: center; text-decoration: none; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.project-download strong { font: 400 clamp(16px, 2.2vw, 23px)/1.1 "Lilita One", "Arial Rounded MT Bold", sans-serif; letter-spacing: .025em; }
.project-download small { font: 700 clamp(9px, 1.15vw, 12px)/1.35 Arial, sans-serif; opacity: .9; }
.project-download:hover, .project-download:focus-visible { outline: none; filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 9px 0 #66559d, 0 15px 22px rgba(79, 62, 126, .27); }
.project-external-link { background: linear-gradient(135deg, #70cfdd, #8875ca); }
.project-scroll { position: relative; height: 100%; padding: 3px 0; cursor: pointer; touch-action: none; }
.project-scroll-track { position: absolute; top: 3%; bottom: 3%; left: 50%; width: var(--book-scroll-track-width); border: 2px solid #fff; border-radius: 99px; background: linear-gradient(#f4a3d4, #9fddea); box-shadow: inset 0 1px 4px #8771bd88, 0 2px 4px #836b9b44; transform: translateX(-50%); }
.project-scroll-pearl { position: relative; z-index: 1; display: block; width: var(--book-scroll-pearl-size); height: auto; margin: 0 auto; cursor: grab; filter: drop-shadow(0 3px 3px #7f618877); user-select: none; }
.project-scroll-pearl:active { cursor: grabbing; }
.project-scroll.is-disabled { opacity: .45; pointer-events: none; }
@media (max-width: 700px) { .game-toolbar { transform: scale(.78); transform-origin: top right; }.shell-overlay { padding: 8px; }.shell-panel { width: min(96vw, 670px, calc((100dvh - 16px) * 1225 / 991)); max-width: calc(100vw - 16px); }.shell-scroll { padding-inline: 3%; }.setting-row { font-size: 12px; padding: 5px 12px; min-height: 34px; }.stat-grid { font-size: 11px; }.achievement-list article { font-size: 11px; padding: 7px; }.achievement-list article > span { font-size: 20px; }.shell-gem { width: 58%; }.shell-title, .map-content h2 { margin-bottom: 10px; } }
@media (max-width: 700px) { .game-control-hint { right: 10px; bottom: 10px; gap: 5px 9px; max-width: calc(100vw - 20px); font-size: 9px; } }
@media (max-width: 520px) { .project-gallery { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .shell-overlay, .shell-panel, .project-overlay, .project-book, button, .notify-banner { transition: none !important; } .loading-background, .notify-sparkle { animation: none; } }