:root{
  --paper:#f6f2e9;
  --paper2:#eee8dc;
  --ink:#171717;
  --muted:#77736c;
  --line:#202020;
  --dark:#0b1110;
  --dark2:#111816;
  --white:#fffaf0;
  --orange:#ff7433;
  --teal:#2f9da3;
  --pink:#d8408b;
  --green:#66b46c;
  --yellow:#e3bb32;
  --header-h:104px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#0a0a0a;color:var(--ink)}
body{font-family:"IBM Plex Mono","Noto Sans JP",monospace;overflow-x:hidden}
button{font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:pointer}
#app{width:100%;min-height:100dvh;background:var(--paper);position:relative;overflow:hidden}
#app:before{content:"";position:fixed;inset:0;background-image:radial-gradient(rgba(20,20,20,.14) 1px, transparent 1.3px);background-size:18px 18px;opacity:.45;pointer-events:none;z-index:0}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--header-h);display:grid;grid-template-columns: minmax(160px, .95fr) minmax(150px, .85fr) 66px;gap:14px;align-items:start;padding:22px 22px 12px;background:linear-gradient(var(--paper) 78%,rgba(246,242,233,0));}
.brand{height:66px;border:3px solid var(--line);background:rgba(246,242,233,.9);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:7px 12px;letter-spacing:.24em;font-size:22px;line-height:1.15;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset;white-space:nowrap}
.connection{font-size:13px;line-height:1.75;letter-spacing:.22em;color:#151515;opacity:.78;white-space:nowrap;padding-top:1px}
.connection i{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--orange);vertical-align:-2px;margin-left:8px}
.menu-button{width:58px;height:58px;border:3px solid var(--line);background:var(--paper);display:grid;place-content:center;gap:7px;justify-self:end;position:relative;z-index:4}
.menu-button span{display:block;width:31px;height:4px;background:var(--line)}
.page{position:relative;z-index:1;min-height:100dvh;padding:var(--header-h) 22px 24px;animation:fade .18s ease both}
@keyframes fade{from{opacity:.72;transform:translateY(5px)}to{opacity:1;transform:none}}
.home{height:100dvh;overflow:hidden;padding-top:0}
.home-title{position:absolute;left:24px;top:-2.0dvh;font-family:"Space Grotesk","Noto Sans JP",sans-serif;font-size:clamp(60px,16vw,90px);line-height:.9;letter-spacing:-.055em;font-weight:700;z-index:2}
.home-version{position:absolute;left:27px;top:64.6dvh;color:var(--orange);font-weight:700;font-size:17px;letter-spacing:.16em;z-index:3}
.home-copy{position:absolute;left:27px;top:70dvh;width:48vw;max-width:250px;font-family:"Noto Sans JP",sans-serif;font-weight:900;line-height:1.75;font-size:18px;z-index:4;color:rgba(20,20,20,.76)}
.home-slash{position:absolute;right:-80px;top:39dvh;width:72vw;height:22dvh;background:var(--orange);transform:skewY(-26deg);z-index:1}
.home-slash.small{left:34vw;right:auto;top:68dvh;width:31vw;height:24dvh;transform:skewY(-31deg);opacity:.98}
.home-art{position:absolute;right:-40px;bottom:30dvh;width:95vw;max-width:none;z-index:3;border:none;background:transparent;box-shadow:none}
.home-art img{display:block;width:100% !important;height: auto;object-fit:cover;object-fit:contain;object-position:center;}
.enter-button{position:absolute;left:26px;bottom:19dvh;z-index:5;width:58vw;min-height:58px;border:2px solid var(--orange);background:rgba(246,242,233,.82);color:var(--orange);font-weight:700;font-size:22px;letter-spacing:.06em;text-align:left;padding:13px 22px;backdrop-filter:blur(2px)}
.home-stats{position:absolute;left:24px;right:24px;bottom:5dvh;height:72px;z-index:5;border:3px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;background:rgba(246,242,233,.79);backdrop-filter:blur(2px)}
.home-stats div{padding:11px 12px;border-right:2px solid rgba(20,20,20,.65);font-size:12px;letter-spacing:.09em;line-height:1.25}.home-stats div:last-child{border-right:0}.home-stats strong{display:block;margin-top:4px;font-size:20px;color:var(--orange);letter-spacing:.02em}.home-stats .ink{color:var(--ink)}
.dark-page{background:var(--dark);color:var(--white)}
.dark-page:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;pointer-events:none;opacity:.45}
.dark-page .site-heading,.site-heading{font-size:38px;letter-spacing:.02em;margin:26px 0 26px;line-height:1}.site-heading b{color:var(--orange);font-weight:500;margin-right:12px}
.subline{color:rgba(255,250,240,.62);letter-spacing:.12em;margin-top:16px;margin-bottom:30px}.paper-subline{color:var(--muted);letter-spacing:.12em;margin-top:-12px;margin-bottom:26px}
.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 26px;margin-top:20px}.can-card{text-align:left;min-width:0}.can-card.disabled{opacity:.38;filter:saturate(.4)}.can-img{display:block;width:100%;height:70px;object-fit:contain;margin-bottom:14px;filter:drop-shadow(0 11px 8px rgba(0,0,0,.38))}.can-title{font-weight:700;font-size:24px;letter-spacing:.04em}.can-meta{color:rgba(255,250,240,.62);font-size:18px;letter-spacing:.06em;margin-top:8px}.info-box{border:1px solid rgba(255,250,240,.48);padding:19px;margin-top:56px;color:rgba(255,250,240,.86);line-height:1.8;font-family:"Noto Sans JP",sans-serif}
.thumb-grid{display:grid;grid-template-columns:1fr;gap:18px;padding-bottom:30px}
.thumb-banner{
    position:relative;
    overflow:hidden;
    border:2px solid rgba(255,250,240,.68);
    background:#111;

    width:330px;
}

.thumb-banner img{
    width:100%;
    height:60px;
    object-fit:cover;
    display:block;
}

.thumb-id{
    position:absolute;
    top:0;
    right:0;

    width:25%;
    height:100%;

    background:rgba(0,0,0,.45);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:34px;
    font-weight:700;
    color:rgba(255,255,255,.28);
}
.back-row{position:relative;z-index:5;margin:4px 0 20px}.back-row button{color:inherit;font-size:16px;letter-spacing:.08em}
.work{background:var(--dark);color:var(--white);padding:0 0 24px;min-height:100dvh}.work-header{position:fixed;top:0;left:0;right:0;height:80px;z-index:60;background:linear-gradient(var(--dark),rgba(11,17,16,.88));display:grid;grid-template-columns:1fr 64px;align-items:center;padding:18px 22px}.work-header .brand{height:52px;font-size:17px;color:var(--ink);background:var(--paper);}.work-close{width:54px;height:54px;background:var(--paper);color:var(--ink);font-size:42px;line-height:1;border:3px solid var(--line)}.work-back{position:relative;z-index:2;margin:92px 0 12px;padding-left:24px;color:rgba(255,250,240,.78);font-size:14px;letter-spacing:.1em;text-align:left}.work-image-wrap{background:var(--paper);none;border-top:3px solid rgba(255,250,240,.75);border-bottom:3px solid rgba(255,250,240,.75);padding:36px 22px 0;display:grid;place-items:center}.work-image-wrap img{max-width:100%;max-height:58dvh;object-fit:contain;border:2px solid rgba(0,0,0,.6);background:white}.work-info{padding:28px 24px 0}.work-info h1{font-size:48px;line-height:1;margin:0 0 8px}.work-info h2{color:var(--orange);font-size:18px;margin:0 0 30px}.meta-table{display:grid;grid-template-columns:90px 1fr;gap:10px 20px;color:rgba(255,250,240,.78);font-size:15px;line-height:1.5}.meta-table b{color:rgba(255,250,240,.52);font-weight:500}.open-image{display:block;margin-top:28px;border:2px solid rgba(255,250,240,.9);padding:18px;text-align:center;color:var(--white);text-decoration:none;font-weight:700;font-size:20px;letter-spacing:.2em}
.paper-page{background:var(--paper);color:var(--ink)}.profile-card,.connection-card{border:2px solid var(--line);background:rgba(255,255,255,.34);padding:20px;margin-top:18px}.profile-row{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:start}.profile-row img{width:92px;height:92px;object-fit:cover;border:2px solid var(--line)}.label{color:var(--orange);font-weight:700;letter-spacing:.08em}.jp{font-family:"Noto Sans JP",sans-serif;line-height:1.9;font-weight:700}.sketch-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sketch-list img{width:100%;aspect-ratio:1/1.25;object-fit:cover;border:2px solid var(--line);filter:grayscale(.1)}.error-page{display:grid;place-content:center;text-align:center;min-height:100dvh;background:var(--paper);padding:90px 30px}.error-page h1{font-size:78px;margin:0}.error-page p{line-height:1.6}.error-page button{border:2px solid var(--line);padding:14px 22px;margin-top:24px}.fishbone{font-size:60px;opacity:.8}.menu-panel{position:fixed;z-index:100;inset:0;background:var(--dark);color:var(--white);transform:translateX(100%);transition:transform .22s ease;padding:48px 26px;display:flex;flex-direction:column}.menu-panel.open{transform:translateX(0)}.menu-close{width:66px;height:66px;background:var(--paper);color:var(--ink);font-size:50px;line-height:1;margin-bottom:42px}.menu-list{display:grid;gap:30px}.menu-list button{text-align:left;color:var(--white);font-size:38px;letter-spacing:.08em}.menu-list b{display:inline-block;width:48px;color:var(--orange);font-weight:400}.panel-info{margin-top:auto;border:1px solid rgba(255,250,240,.55);padding:20px;font-size:18px}.panel-info p{margin-top:0}.panel-info div{display:flex;justify-content:space-between;margin:12px 0}.orange{color:var(--orange)}
@media (max-width:390px){:root{--header-h:92px}.site-header{padding:18px 16px 8px;grid-template-columns: minmax(150px,.9fr) minmax(118px,.7fr) 58px;gap:10px}.brand{height:58px;font-size:18px}.connection{font-size:11px}.menu-button{width:52px;height:52px}.home-title{font-size:58px;top:36dvh}.home-art{right:16px;width:56vw}.home-copy{font-size:16px}.enter-button{font-size:18px}.home-stats strong{font-size:18px}.site-heading{font-size:34px}.menu-list button{font-size:32px}}
@media (min-width:700px){#app{max-width:430px;margin:0 auto}.site-header,.work-header{left:50%;right:auto;width:430px;transform:translateX(-50%)}.menu-panel{left:50%;right:auto;width:430px;transform:translateX(50%)}.menu-panel.open{transform:translateX(-50%)}}
.home-title{
  transform: translateY(-160px);
}
.home .home-art{
  width:95vw !important;
  max-width:none !important;
right:-80px !important;
}

.home .home-art img{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
}
.work-image-wrap,
.work-image-wrap img{
  position:relative;
  z-index:100;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}

.work::before,
.work::after,
.work-image-wrap::before,
.work-image-wrap::after{
  content:none !important;
  display:none !important;
}

.year-title{
  margin-bottom:24px;
}

.year-title-row{
  display:flex;
  align-items:center;
  gap:14px;
}

.year-title-row .site-heading{
  margin:0;
  white-space:nowrap;
}

.year-can-inline{
  width:72px !important;
  height:auto !important;
  max-width:72px !important;
  display:block;
  flex-shrink:0;
}

.year-title-row img.year-can-inline{
  width:72px !important;
  max-width:72px !important;
  min-width:72px !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
}

.year-can-small{
  width:100px !important;
  max-width:100px !important;
  height:auto !important;
  display:block !important;
}
.work-can-label{
  display:block;
  width:100px;
  height:auto;
  margin:0 0 18px;
}

.work-title-can{
    display:flex;
    align-items:center;

    gap:12px;

    margin:14px 0 6px;
}

.work-title-can img{
    width:95px;
}

.work-title-can h2{
    margin-left:-12px;
}

.work-slider{
  position:relative;
  overflow:hidden;
  padding:36px 0;
  background:var(--paper);
}

.work-slider img{
  display:block;
  object-fit:contain;
}

.main-work-img{
  width:86%;
  max-height:58dvh;
  margin:0 auto;
  border:2px solid rgba(0,0,0,.6);
  background:white;
  position:relative;
  z-index:2;
}

.work-slider .side{
  position:absolute;
  top:50%;
  width:72%;
  max-height:50dvh;
  transform:translateY(-50%) scale(.88);
  opacity:.22;
  filter:grayscale(.2);
  z-index:1;
}

.prev-side{
  left:-62%;
}

.next-side{
  right:-62%;
}
.work-slider{
  touch-action:pan-y;
}

.work-slider.swiping .main-work-img{
  transform:scale(.98);
  transition:transform .15s ease;
}

.main-work-img{
  transition:transform .22s ease, opacity .22s ease;
}
.prev-side,
.next-side{
  display:none !important;
}
.swipe-hint{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:5;

  font-size:12px;
  letter-spacing:.22em;
  color:rgba(20,20,20,.55);
  background:rgba(255,250,240,.72);
  border:1px solid rgba(20,20,20,.25);
  padding:6px 10px;

  animation:swipeHint 2s ease forwards;
  pointer-events:none;
}

@keyframes swipeHint{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(8px);
  }
  20%{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
  70%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translateX(-50%) translateY(-4px);
  }
}
.main-work-img{
  transition:transform .2s ease, opacity .2s ease;
}
.connection-card{
  border:2px solid var(--line);
  background:rgba(255,255,255,.34);
  padding:18px;
  margin-top:20px;
}

.connection-card .label{
  margin:0 0 16px;
  color:var(--orange);
  font-size:18px;
  letter-spacing:.12em;
}

.my-banner{
  border:2px solid var(--line);
  background:var(--paper);
  padding:14px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
}

.my-banner img{
  width:100%;
  max-width:100%;
  height:auto;
  image-rendering:auto;
}

.site-info{
  display:grid;
  gap:6px;
  font-size:14px;
  line-height:1.6;
}

.site-info b{
  font-size:18px;
  letter-spacing:.04em;
}

.site-info span{
  color:var(--muted);
  word-break:break-all;
}

.site-info small{
  color:var(--orange);
  letter-spacing:.08em;
}

.connection-link{
  min-height:64px;
  border:2px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  margin-top:12px;
  font-weight:700;
  letter-spacing:.04em;
  background:rgba(246,242,233,.75);
}

.connection-link b{
  color:var(--orange);
  font-size:13px;
  letter-spacing:.08em;
}

.search-banner{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:14px;
  align-items:center;
  border:2px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  padding:12px;
  margin-top:12px;
  background:rgba(246,242,233,.75);
}

.search-banner img{
  width:88px;
  height:31px;
  object-fit:contain;
  background:white;
  border:1px solid rgba(0,0,0,.25);
}

.search-banner span{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
}
/* ------------------------
   SABA GAME
------------------------- */

.game-wrapper{
  position:relative;
  margin-top:10px;
}

.game-play{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.game-tank{
  position:relative;
  height:430px;
  flex:1;
  border:6px solid #111;
  border-radius:0;
  overflow:hidden;
  background:#fff;
  box-shadow:6px 6px 0 #111;
}

#fish-area{
  position:absolute;
  inset:0;
}

.game-side{
  height:auto;
  align-self:flex-start;
  flex:none;
  border:4px solid #111;
  background:#fff;
  box-shadow:5px 5px 0 #111;
  padding:8px 5px;
}

.game-side img{
  width:100%;
  height:auto;
  display:block;
  image-rendering:pixelated;
}

.game-instructor{
  position:absolute;
  right:-8px;
  bottom:180px;
  width:140px;
  z-index:30;
  image-rendering:pixelated;
}

.game-status{
  position:relative;
  margin-top:12px;
  background:white;
  border:4px solid #111;
  padding:18px;
  z-index:50;
}

.game-status::after{
  content:"";
  position:absolute;
  inset:10px;
  border:2px solid #111;
  pointer-events:none;
}

.game-text{
  font-family:"Press Start 2P","DotGothic16","IBM Plex Mono",monospace;
  font-size:18px;
  line-height:1.65;
  letter-spacing:.04em;
}

#message{
  margin-top:10px;
  font-size:15px;
}

#start-game{
  margin-top:12px;
  border:3px solid #111;
  background:#fff;
  padding:8px 16px;
  font-family:"Press Start 2P","DotGothic16","IBM Plex Mono",monospace;
  font-size:15px;
}

.fish{
  position:absolute;
  image-rendering:pixelated;
  user-select:none;
}
.game-side-column{
  width:82px;
  flex:none;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.game-result-mini{
  width:92px;
  height:74px;

  background:url("./assets/game/result_balloon.webp")
    center/contain no-repeat;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 8px 14px;

  color:var(--orange);
  font-family:"DotGothic16",sans-serif;
  font-size:13px;
  font-weight:bold;
  line-height:1.15;
  text-align:center;

  image-rendering:pixelated;
}

.game-page{
  padding-top:78px;
}
.point-popup{
  position:absolute;

  font-family:"Press Start 2P","DotGothic16",monospace;
  font-size:16px;
  color:#ff7433;

  pointer-events:none;

  animation:pointUp .6s ease forwards;

  z-index:100;
}

@keyframes pointUp{

  0%{
    opacity:1;
    transform:translateY(0);
  }

  100%{
    opacity:0;
    transform:translateY(-30px);
  }

}
.timeup-overlay{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--orange);
  font-family:"Press Start 2P","DotGothic16",monospace;
  font-size:28px;
  letter-spacing:.08em;

  z-index:100;
}

.timeup-overlay span{
  display:block;
  animation:timeBlink .5s steps(2, end) infinite;
}

@keyframes timeBlink{
  0%{ opacity:1; }
  50%{ opacity:.15; }
  100%{ opacity:1; }
}
.cursor{

  display:inline-block;

  animation:cursorBlink .7s steps(2) infinite;

}

@keyframes cursorBlink{

  50%{
    opacity:0;
  }

}
.menu-game-jp{
  font-family:"DotGothic16", sans-serif;
  font-size:30px;
  font-weight:900;
  color:#ff7b22;
  text-shadow:
    2px 2px 0 #000,
   -2px 2px 0 #000,
    2px -2px 0 #000,
   -2px -2px 0 #000;
}