/* ゴミ捜査 — The Gomi Investigation */

:root{
  --cream:#FFF8F0;
  --paper:#FFFDF9;
  --chat-bg:#F6EDE3;
  --ink:#3A3335;
  --ink-soft:#8A7F82;
  --line:#EADFD6;
  --sakura:#F7C8D4;
  --sakura-deep:#E76E8F;
  --me-bub:#A8E6B0;
  --sticker-yellow:#FFD93B;
  --yuki:#7F77DD; --kenta:#D85A30; --mai:#D4537E; --riku:#1D9E75; --tanaka:#888780;
  --r-lg:18px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:"Zen Maru Gothic",-apple-system,"Hiragino Maru Gothic ProN",sans-serif;
  background:linear-gradient(180deg,#2B2640 0%,#5D4A6E 42%,#C96F6F 78%,#E8A87C 100%);
  background-attachment:fixed;
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* ---------- floating background emojis (desktop) ---------- */
#bgfx{position:fixed;inset:0;pointer-events:none;display:none}
#bgfx span{position:absolute;opacity:.5;filter:saturate(.9);animation:float linear infinite}
@keyframes float{
  0%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-26px) rotate(7deg)}
  100%{transform:translateY(0) rotate(-6deg)}
}

/* ---------- phone ---------- */
#phone{
  width:100%;height:100dvh;
  background:var(--cream);
  display:flex;flex-direction:column;
  overflow:hidden;position:relative;
}
@media (min-width:768px){
  #bgfx{display:block}
  #phone{
    width:430px;height:min(860px,94vh);
    border-radius:46px;
    border:10px solid #241F2E;
    box-shadow:0 30px 80px rgba(20,12,30,.55),0 0 0 1px rgba(255,255,255,.08);
  }
}

/* ---------- title screen ---------- */
#titlescreen{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:28px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 80% 12%, var(--sakura) 0%, transparent 34%),
    radial-gradient(circle at 12% 88%, #FBE3C9 0%, transparent 40%),
    var(--cream);
}
.t-sticker{
  font-weight:900;font-size:21px;line-height:1.15;color:#5B4A00;
  background:var(--sticker-yellow);
  border:3px dashed #B98F00;border-radius:6px;
  padding:10px 16px;transform:rotate(-8deg);
  box-shadow:0 6px 14px rgba(90,70,0,.25);
  margin-bottom:18px;
  animation:stickerslap .5s cubic-bezier(.2,1.6,.4,1) both;
}
.t-sticker small{display:block;font-size:10px;letter-spacing:.22em;margin-top:4px;color:#8A6E00}
@keyframes stickerslap{from{transform:rotate(-30deg) scale(2.4);opacity:0}to{transform:rotate(-8deg) scale(1);opacity:1}}
#titlescreen h1{
  margin:0;font-size:64px;font-weight:900;letter-spacing:.04em;line-height:1;
  color:var(--ink);
  text-shadow:4px 4px 0 var(--sakura);
  animation:rise .6s .15s ease-out both;
}
.t-sub{margin:10px 0 0;font-size:15px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--sakura-deep);animation:rise .6s .25s ease-out both}
.t-cast{display:flex;gap:9px;margin:26px 0 0;animation:rise .6s .35s ease-out both}
.t-cast span{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:23px;
  background:var(--paper);border:2.5px solid var(--c,#ccc);
  box-shadow:0 3px 0 rgba(58,51,53,.12);
}
.t-tag{margin:20px 0 0;font-size:15px;line-height:1.7;color:var(--ink-soft);animation:rise .6s .45s ease-out both}
.t-tag strong{color:var(--ink)}
#startbtn{
  margin-top:26px;cursor:pointer;border:none;
  font-family:inherit;font-weight:900;font-size:22px;color:#fff;
  background:var(--sakura-deep);
  padding:16px 44px;border-radius:999px;
  box-shadow:0 6px 0 #B94A6B,0 14px 26px rgba(231,110,143,.4);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .12s ease, box-shadow .12s ease;
  animation:rise .6s .55s ease-out both;
}
#startbtn small{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.85}
#startbtn:hover{transform:translateY(-2px) scale(1.03)}
#startbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #B94A6B}
.t-meta{margin:22px 0 0;font-size:12px;color:var(--ink-soft);animation:rise .6s .65s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---------- app: header ---------- */
#app{flex:1;display:flex;flex-direction:column;min-height:0}
#app[hidden]{display:none}
#bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.bar-ico{font-size:20px}
.bar-name{flex:1;min-width:0}
.bar-name p{margin:0}
.bar-name p:first-child{font-size:15px;font-weight:700}
.bar-name p:last-child{font-size:11.5px;color:var(--ink-soft)}
#livebadge{
  font-size:11px;font-weight:900;letter-spacing:.08em;
  color:#fff;background:#E5484D;
  padding:3px 10px;border-radius:999px;
  animation:pulse 1.6s ease-in-out infinite;
}
#livebadge.fin{background:var(--riku);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
#mutebtn{
  border:none;background:var(--cream);cursor:pointer;
  font-size:17px;width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--line);
}
#mutebtn:active{transform:scale(.9)}
#progwrap{height:4px;background:var(--line)}
#prog{height:100%;width:0%;background:linear-gradient(90deg,var(--sakura-deep),var(--yuki));transition:width .4s ease}

/* ---------- chat ---------- */
#chat{flex:1;overflow-y:auto;background:var(--chat-bg);cursor:pointer;padding:6px 0 10px;overscroll-behavior:contain}
.row{display:flex;gap:8px;margin:10px 12px;align-items:flex-end;animation:msgin .25s ease-out both}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--paper);border:2px solid var(--c,#ccc);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.avgap{width:34px;flex-shrink:0}
.nm{font-size:11px;font-weight:700;margin:0 0 3px 2px}
.bub{
  max-width:78%;padding:9px 13px;border-radius:16px;
  font-size:14px;line-height:1.55;word-wrap:break-word;white-space:pre-line;
}
.npc{width:fit-content;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(58,51,53,.05)}
.me-wrap{display:flex;align-items:flex-end;gap:6px;margin-left:auto;max-width:82%}
.kidoku{font-size:10px;color:var(--ink-soft);flex-shrink:0;line-height:1.2;text-align:right}
.me{background:var(--me-bub);border-bottom-right-radius:5px;box-shadow:0 1px 2px rgba(58,51,53,.08)}
.sysm{
  text-align:center;font-size:12px;color:var(--ink-soft);margin:16px 14px;
}
.sysm em{
  font-style:normal;background:rgba(58,51,53,.07);
  padding:3px 14px;border-radius:999px;
}
.stamp{font-size:58px;line-height:1.1;padding:2px 6px;animation:stampin .4s cubic-bezier(.2,1.8,.4,1) both}
@keyframes stampin{from{transform:scale(.2) rotate(-14deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

/* typing */
.dots{display:flex;gap:4px;padding:13px 14px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);animation:bl 1s infinite}
@keyframes bl{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- reply bar / choices ---------- */
#replybar{background:var(--paper);border-top:1px solid var(--line);padding:9px 12px;min-height:46px}
#hint{margin:4px 0;font-size:11.5px;color:var(--ink-soft);text-align:center}
.chbtn{
  display:block;width:100%;text-align:left;margin:7px 0;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink);
  background:var(--cream);border:2px solid var(--sakura);
  border-radius:14px;padding:12px 15px;
  transition:transform .1s ease,background .15s ease,border-color .15s ease;
  animation:rise .3s ease-out both;
}
.chbtn:nth-child(2){animation-delay:.07s}
.chbtn:nth-child(3){animation-delay:.14s}
.chbtn:hover{background:var(--sakura);border-color:var(--sakura-deep)}
.chbtn:active{transform:scale(.98)}
.chprompt{margin:2px 2px 6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sakura-deep)}

/* ---------- media cards & scenes ---------- */
.mediacard{padding:8px!important;max-width:85%!important;width:300px}
.mc-head{display:flex;align-items:center;gap:7px;margin:2px 4px 7px}
.mc-head .mc-ico{font-size:15px}
.mc-head .mc-file{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600;letter-spacing:-.02em}
.mc-desc{margin:7px 4px 2px;font-size:11.5px;color:var(--ink-soft);line-height:1.45}
.scene{position:relative;height:150px;border-radius:11px;overflow:hidden;cursor:pointer;user-select:none}
.scene span{position:absolute}

/* scene: door photo */
.sc-door{background:linear-gradient(180deg,#EFE2CE 0%,#E2D0B4 70%,#C9B493 70%,#BFA886 100%)}
.sc-door .door{font-size:96px;left:50%;top:54%;transform:translate(-50%,-50%)}
.sc-door .bag{font-size:44px;left:50%;top:62%;transform:translate(-50%,-50%) rotate(-5deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.sc-door .tape{position:absolute;width:54px;height:13px;background:rgba(255,236,150,.85);border:1px solid rgba(180,150,40,.4);left:50%;top:46%}
.sc-door .tape.t1{transform:translateX(-50%) rotate(-32deg)}
.sc-door .tape.t2{transform:translateX(-50%) rotate(31deg)}
.sc-door .sticker{
  position:absolute;right:9%;top:12%;transform:rotate(9deg);
  background:var(--sticker-yellow);border:2px dashed #B98F00;border-radius:4px;
  font-size:13px;font-weight:900;line-height:1.2;color:#5B4A00;
  padding:5px 8px;text-align:center;box-shadow:0 3px 8px rgba(90,70,0,.3);
  animation:stickerslap .5s .3s cubic-bezier(.2,1.6,.4,1) both;
}
.sc-door .sticker small{display:block;font-size:8px;letter-spacing:.18em;color:#8A6E00}
.sc-door .flash{position:absolute;inset:0;background:#fff;animation:flash .7s ease-out both;pointer-events:none}
@keyframes flash{from{opacity:.95}to{opacity:0}}

/* scene: doorbell cam (kenta) */
.sc-kenta{background:radial-gradient(circle at 50% 45%,#16321A 0%,#081507 75%);box-shadow:inset 0 0 38px rgba(0,0,0,.85)}
.sc-kenta .cammeta{left:9px;top:7px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#9FE89F;letter-spacing:.08em}
.sc-kenta .rec{right:10px;top:7px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#FF6B6B;animation:pulse 1s infinite}
.sc-kenta .host{font-size:62px;left:50%;top:52%;transform:translate(-50%,-50%);filter:sepia(.4) hue-rotate(60deg) saturate(.7)}
.sc-kenta .glass{font-size:26px;left:63%;top:36%;animation:bob 1.4s ease-in-out infinite}
.sc-kenta .spark{font-size:17px;animation:twinkle 1.1s ease-in-out infinite}
.sc-kenta .s1{left:30%;top:28%}
.sc-kenta .s2{left:66%;top:64%;animation-delay:.4s}
.sc-kenta .s3{left:40%;top:70%;animation-delay:.8s}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-7px) rotate(8deg)}}
.playbar{position:absolute;left:8%;right:8%;bottom:9px;height:4px;background:rgba(255,255,255,.22);border-radius:2px}
.playbar i{display:block;height:100%;width:0;background:#fff;border-radius:2px;animation:playprog 6s linear forwards}
@keyframes playprog{to{width:100%}}

/* scene: timelapse (mai) */
.sc-mai{background:linear-gradient(180deg,#2E2A45 0%,#413A5E 55%,#2A2640 100%)}
.sc-mai .speed{left:9px;top:7px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#CFC6F2;letter-spacing:.1em}
.sc-mai .datez{right:10px;top:7px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#CFC6F2;width:64px;text-align:right;height:14px}
.sc-mai .datez i{position:absolute;right:0;top:0;font-style:normal;opacity:0;animation:cycledate 2.4s linear infinite}
.sc-mai .datez i:nth-child(2){animation-delay:.6s}
.sc-mai .datez i:nth-child(3){animation-delay:1.2s}
.sc-mai .datez i:nth-child(4){animation-delay:1.8s}
@keyframes cycledate{0%{opacity:0}4%{opacity:1}24%{opacity:1}28%{opacity:0}100%{opacity:0}}
.sc-mai .runner{font-size:38px;left:-18%;top:52%;animation:dash 1.3s linear infinite}
.sc-mai .trail{font-size:21px;left:-30%;top:60%;animation:dash 1.3s .12s linear infinite}
@keyframes dash{from{transform:translateX(0)}to{transform:translateX(430px)}}
.sc-mai .closet{font-size:62px;right:6%;top:54%;transform:translateY(-50%)}
.sc-mai .zilla{font-size:30px;right:9%;top:30%;animation:peek 2.4s ease-in-out infinite}
@keyframes peek{0%,55%,100%{transform:translateY(12px);opacity:0}65%,90%{transform:translateY(0);opacity:1}}

/* scene: hallway audio (luna) */
.sc-luna{background:linear-gradient(180deg,#141229 0%,#241E45 100%)}
.sc-luna .moon{font-size:30px;left:10%;top:13%;animation:bob 3s ease-in-out infinite}
.sc-luna .spark{font-size:14px;animation:twinkle 1.6s ease-in-out infinite}
.sc-luna .s1{right:16%;top:16%}
.sc-luna .s2{right:30%;top:38%;animation-delay:.6s}
.sc-luna .drop{font-size:13px;top:-14%;animation:rainfall 1.7s linear infinite;opacity:.65}
.sc-luna .d1{left:22%}
.sc-luna .d2{left:48%;animation-delay:.5s}
.sc-luna .d3{left:74%;animation-delay:1.1s}
@keyframes rainfall{to{transform:translateY(190px)}}
.wave{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);display:flex;gap:4px;align-items:center;height:54px}
.wave i{width:5px;border-radius:3px;background:#B9A8F5;height:100%;animation:wv 1s ease-in-out infinite}
@keyframes wv{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.scrub{position:absolute;left:10%;right:10%;bottom:10px;display:flex;align-items:center;gap:8px;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#B9A8F5}
.scrub .track{flex:1;height:3px;background:rgba(185,168,245,.3);border-radius:2px;position:relative}
.scrub .track i{position:absolute;left:0;top:-3.5px;width:10px;height:10px;border-radius:50%;background:#B9A8F5;animation:scrubmove 15s linear forwards}
@keyframes scrubmove{to{left:calc(100% - 10px)}}

/* ---------- ending card ---------- */
.endcard{
  margin:18px auto;width:min(86%,300px);text-align:center;
  background:var(--paper);border:2px solid var(--sakura);
  border-radius:20px;padding:20px 16px;
  box-shadow:0 8px 24px rgba(58,51,53,.12);
  animation:rise .5s ease-out both;
}
.endcard .e-badge{font-size:44px;margin:0;animation:stampin .5s .2s cubic-bezier(.2,1.8,.4,1) both}
.endcard .e-name{margin:8px 0 0;font-size:19px;font-weight:900}
.endcard .e-name-en{margin:2px 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sakura-deep);font-weight:700}
.endcard .e-stats{margin:12px 0 0;font-size:12.5px;color:var(--ink-soft)}
.endcard .e-found{margin:5px 0 0;font-size:12.5px;color:var(--ink-soft);letter-spacing:.1em}
.endcard .e-btns{display:flex;gap:8px;margin-top:15px}
.endcard button{
  flex:1;cursor:pointer;font-family:inherit;font-weight:900;font-size:13.5px;
  border:none;border-radius:12px;padding:11px 6px;
  transition:transform .1s ease;
}
.endcard button:active{transform:scale(.96)}
.endcard .e-share{background:var(--sakura-deep);color:#fff;box-shadow:0 3px 0 #B94A6B}
.endcard .e-replay{background:var(--cream);color:var(--ink);border:2px solid var(--line)}
.sharebox{
  margin:10px 0 0;padding:9px;font-size:11.5px;line-height:1.5;color:var(--ink);
  background:var(--cream);border:1.5px dashed var(--sakura-deep);border-radius:10px;
  user-select:all;-webkit-user-select:all;word-break:break-all;
}
#toast{
  position:absolute;left:50%;bottom:88px;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:13px;font-weight:700;
  padding:9px 18px;border-radius:999px;pointer-events:none;
  opacity:0;transition:opacity .25s ease;white-space:nowrap;z-index:5;
}
#toast.show{opacity:.94}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
  #bgfx{display:none}
}