/* TOGLABO v2 — approved artwork fidelity. Load after common.css.
   Art source and integration details: INTEGRATION.md / ASSET_NOTES.md. */
body.dev { --world-soil: #51392b; }
body.dev.buruburu, body.dev.buruburu2 { display: block; width: 100%; }
body.dev .content-wrapper .l-main { width: 100%; max-width: 1120px; }
body.dev .l-main-inner > .l-section > .topocs-board { max-width: 600px; }

/* 01: Three equal sprite cells: book, deciduous tree, two pine trees.
   Book art is baked into the sprite. The transparent HTML link sits over it. */
.journal-island-wrap { position: relative; width: 100%; height: 160px; margin: -24px 0 12px; }
.journal-island {
  position: absolute; width: 230px; height: 230px; z-index: 25;
  background-image: url('../images/world/islands-v2.png');
  background-size: 300% 100%; background-repeat: no-repeat;
  image-rendering: pixelated; animation: island-float 5s ease-in-out infinite;
}
.journal-island--book { left: 0; top: -130px; background-position: 0 0; }
.journal-island--tree { right: 0; top: -365px; background-position: 50% 0; animation-delay: -1.8s; }
.journal-island--pines { right: 0; top: -70px; background-position: 100% 0; animation-delay: -3.1s; }
.island-book {
  position: absolute; left: 38%; top: 32%; width: 28%; height: 25%;
  display: block; text-decoration: none;
}
.island-label {
  position: absolute; bottom: 100%; left: 70%; padding: 6px 10px; white-space: nowrap;
  background: #fffef0; border: 2px solid #20232d; color: #20232d;
  font-size: 14px; line-height: 1.2; opacity: 0; pointer-events: none;
}
.island-label::after { content: ''; position: absolute; left: 10px; bottom: -6px; width: 8px; height: 8px; background: #fffef0; border-right: 2px solid #20232d; border-bottom: 2px solid #20232d; transform: rotate(45deg); }
.island-book:hover .island-label, .island-book:focus-visible .island-label { opacity: 1; }
@keyframes island-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* 02: Water/horizon and detailed foreground are separate transparent layers.
   Natural-size panorama repeat fills wide screens; no viewport-wide stretching.
   The ground is an unlabelled secret. There is deliberately no sign/door art. */
body.dev footer { height: 440px; padding: 0; margin: 20px 0 0; isolation: isolate; }
.world-horizon, .world-ground { position: absolute; inset: 0; pointer-events: none; image-rendering: pixelated; }
.world-horizon { z-index: -2; background: url('../images/world/horizon-v2.png') center bottom 100px / 1440px 480px repeat-x; }
.world-ground { z-index: -1; background: url('../images/world/ground-v2.png') center bottom / 1440px 480px repeat-x; }
body.dev footer .footer-inner {
  position: absolute; bottom: 0; left: 0; display: flex; align-items: flex-end;
  justify-content: center; height: 190px; width: 100%; padding: 0 12px 22px;
  border: 0; border-radius: 0; background: transparent; color: #fff;
  text-align: center; cursor: default; font-family: inherit;
}
body.dev footer .footer-inner small { letter-spacing: 0; font-size: 12px; line-height: 1.4; text-shadow: 1px 2px #302525; }

/* 03: A bounded cave scene. No horizontal tiling or width-extension logic.
   Mobile uses a separate portrait composition, keeping the centre readable. */
body.dev .underground { background: #171518; }
body.dev .underground::after { display: none; }
body.dev .underground .downbelow { background: transparent; }
body.dev .underground .downbelow .downbelow-inner {
  position: relative; height: 100%; min-height: 560px; padding: 0;
  background: #171518 url('../images/world/cave-v2.png') center / auto 100% no-repeat;
  image-rendering: pixelated;
}
body.dev .underground .downbelow .downbelow-content { min-height: 560px; height: 100%; padding: 0 20px; }
body.dev .underground .downbelow .downbelow-content-inner { width: 100%; max-width: 720px; padding: 0; text-align: center; }
.cave-message { position: relative; z-index: 1; padding-top: 42px; text-shadow: 2px 2px #171518; }
.cave-message h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: .1em; color: #f5e6c8; }
.cave-message p { margin-bottom: 28px; color: #d7caba; font-size: 14px; }
body.dev .underground .escapebtn { border: 2px solid #e3dbc9; border-radius: 0; background: #171518e6; color: #f5e6c8; padding: 10px 16px; font-family: inherit; font-size: 14px; }
body.dev .underground .escapebtn:hover { background: #45352c; }
/* A tiny, deliberately meaningless slime interaction. */
.cave-slime {
  position: absolute; z-index: 12; left: max(20px, calc(50% - 180px)); bottom: 35px;
  width: 64px; height: 52px; padding: 0; border: 0; border-radius: 0;
  background: url('../images/world/slime-v4.svg') center / contain no-repeat;
  cursor: default; transform-origin: center bottom;
}
.cave-slime[aria-pressed='true'] { animation: slime-squish .9s ease-in-out; }
.cave-slime:focus-visible { outline: 2px solid #fff1b9 !important; outline-offset: 4px; }
.underground[inert] .cave-slime { pointer-events: none; }
@keyframes slime-squish {
  0%,100% { transform: translateY(0) scale(1,1); }
  15% { transform: scale(1.25,.7); }
  42% { transform: translateY(-24px) scale(.85,1.15); }
  65% { transform: translateY(0) scale(1.16,.85); }
  82% { transform: translateY(-5px) scale(.96,1.04); }
}
/* Existing common.css resets all focus outlines with !important. */
.island-book:focus-visible, body.dev footer .footer-inner:focus-visible, body.dev .underground .escapebtn:focus-visible { outline: 3px solid #fff1b9 !important; outline-offset: 4px; }
body.dev footer .footer-inner:focus-visible { outline-offset: -7px; }

@media (min-width: 769px) and (max-width: 1100px) {
  .journal-island { width: 180px; height: 180px; }
  .journal-island--book { left: 0; top: -55px; }
  .journal-island--tree { right: 0; top: -310px; }
  .journal-island--pines { right: 0; top: -30px; }
  body.dev .l-main-inner > .l-section > .topocs-board { max-width: 470px; }
}
@media (max-width: 768px) {
  /* スマホは島を2つだけ、横に並べる。左: きろく（本）／右: 将来アプリの入口にする島。松の島は出さない */
  .journal-island-wrap { display: flex; justify-content: center; align-items: flex-start; gap: 4%; height: auto; margin: 28px 0 10px; padding: 0 4%; }
  .journal-island { position: relative; flex: 0 1 170px; width: auto; max-width: 170px; height: auto; aspect-ratio: 1; }
  .journal-island--book, .journal-island--tree { left: auto; right: auto; top: auto; }
  .journal-island--tree { margin-top: 34px; }
  .journal-island--pines { display: none; }
  .island-book { min-width: 44px; min-height: 44px; }
  body.dev footer { height: 325px; margin-top: 12px; }
  .world-horizon { background-size: 1050px 350px; background-position: 60% bottom 70px; }
  .world-ground { background-size: 1050px 350px; background-position: 42% bottom; }
  body.dev footer .footer-inner { height: 140px; padding-bottom: 18px; }
  body.dev .underground .downbelow .downbelow-inner { background-image: url('../images/world/cave-mobile-v2.png'); background-size: cover; background-position: center; }
  .cave-message { padding-top: 0; }
  .cave-message h2 { font-size: 18px; }
  .cave-slime { left: 24%; bottom: 28px; width: 60px; }
}
@media (prefers-reduced-motion: reduce) { .journal-island { animation: none; } }