*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#050608;color:#f2f2f0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI",sans-serif;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.app{width:100%;height:100dvh;min-height:100svh;max-width:520px;margin:auto;background:radial-gradient(circle at 50% 18%,#1a1d22 0,#0c0e11 42%,#060709 100%);position:relative;overflow:hidden}.screen{position:absolute;inset:0;padding:max(18px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom));display:none}.screen.active{display:flex}.status{text-align:center;font-size:13px;letter-spacing:.08em;color:#a8abb1}.incoming{flex-direction:column}.incoming-center{margin:auto;text-align:center}.avatar{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:#2b2e34;border:1px solid #41454c;font-size:32px;color:#d7d9dc}.avatar.small{width:54px;height:54px;margin:0 auto 10px;font-size:20px}.eyebrow{font-size:13px;color:#aaaeb5;letter-spacing:.12em}h1{font-size:31px;margin:8px 0 0;font-weight:500}h2{font-size:21px;margin:0 0 4px;font-weight:500}.ringdots{font-size:10px;color:#6c717a;letter-spacing:.4em;animation:pulse 1.4s infinite}.answer{width:88px;height:88px;border:0;border-radius:50%;background:#e8e8e4;color:#090a0c;margin:0 auto 28px;font-size:27px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:0 0 30px #ffffff12}.answer span{font-size:10px}.call{flex-direction:column}header{height:28px;display:flex;justify-content:space-between;align-items:center;color:#8f939b;font-size:12px;letter-spacing:.08em}.identity{text-align:center;margin-top:8px}.identity #callTime{font-variant-numeric:tabular-nums;color:#8f939b;font-size:12px}.dialogue{min-height:118px;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:clamp(18px,5.2vw,23px);line-height:1.75;font-weight:500;padding:10px 6px;text-wrap:balance}.dialogue .line{animation:fadein .2s ease}.countdown{text-align:center;font-size:34px;font-variant-numeric:tabular-nums;height:48px;transition:transform .12s,opacity .12s}.countdown.urgent{transform:scale(1.18)}.answer-stage{flex:1;min-height:170px;display:flex;align-items:center;justify-content:center;position:relative}.answer-card{width:100%;min-height:150px;border:1px solid #30343a;border-radius:20px;background:#131519;box-shadow:0 16px 50px #0008;display:grid;grid-template-columns:1fr 1px 1fr;position:relative;will-change:transform,opacity;touch-action:manipulation}.choice{padding:28px 16px 45px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px;line-height:1.55;cursor:pointer}.choice:active{background:#ffffff08}.divider{background:#2d3036;margin:20px 0 42px}.hint{position:absolute;bottom:15px;left:0;right:0;text-align:center;color:#737780;font-size:11px;letter-spacing:.06em}.hangup{border:1px solid #35383e;background:transparent;color:#8f939b;border-radius:999px;padding:10px 18px;margin:8px auto 0;font-size:12px}.hidden{visibility:hidden;pointer-events:none}.overlay{z-index:5;background:#050608;align-items:center;justify-content:center}.ending-body{width:100%;text-align:center;line-height:1.9}.ending-line{font-size:18px;margin:8px 0;animation:fadein .35s ease}.ending-title{font-size:28px;letter-spacing:.08em;margin:24px 0 8px}.retry{margin-top:26px;border:1px solid #4a4d53;background:#111318;color:#eee;border-radius:999px;padding:14px 24px;font-size:14px}.message{max-width:82%;margin:7px 0 7px auto;background:#24272d;padding:9px 13px;border-radius:16px 16px 4px 16px;text-align:left}.glitch{animation:glitch .16s steps(2) 4}.dim{opacity:.4}@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes pulse{50%{opacity:.25}}@keyframes glitch{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@media(min-width:700px){body{background:#000}.app{border-left:1px solid #202227;border-right:1px solid #202227}}/* v2: subtle-call horror / interaction polish */
.identity h2{min-height:30px;transition:opacity .12s,filter .12s}.call.late{background:radial-gradient(circle at 50% 18%,#171b21 0,#0a0d12 45%,#05070a 100%)}
.answer-card{overflow:hidden}.choice{min-width:0;min-height:108px}.said{font-size:16px;color:#aeb2ba;border:1px solid #30343a;border-radius:14px;padding:13px 16px;margin:18px auto;max-width:88%;opacity:.9}.realize{font-size:27px;margin:30px 0 8px;letter-spacing:.12em;animation:fadein .5s ease}.locked{pointer-events:none!important;opacity:.18!important}.fade-away{opacity:0!important;transition:opacity .55s ease!important}.dawn{background:linear-gradient(#151c26,#303a47 55%,#68717a)!important;transition:background 2.4s ease}.overlay{transition:background 1.2s}.dawn-time{font-size:15px;color:#b9bec5}.history-row{font-size:17px;margin:22px auto;transition:opacity 1.5s,filter 1.5s}.history-row.vanish{opacity:0;filter:blur(5px)}.goodnight{font-size:28px;letter-spacing:.08em;margin:30px 0}.true-meta{opacity:0;transition:opacity 1.2s}.true-meta.show{opacity:1}.true-meta .ending-title{font-size:18px;color:#aeb3bb}.hangup{min-height:42px;touch-action:manipulation}.hint{transition:opacity .2s}.countdown:empty{opacity:0}.countdown.urgent{transform:scale(1.12);opacity:.95}.call .status,.call header,.identity,.dialogue,.countdown,.answer-stage,.hangup{transition:opacity .45s}
@media(max-height:680px){.screen{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}.identity{margin-top:2px}.avatar.small{width:44px;height:44px;margin-bottom:5px}.dialogue{min-height:94px;font-size:17px;line-height:1.55}.countdown{height:38px;font-size:28px}.answer-stage{min-height:135px}.answer-card{min-height:125px}.choice{padding:20px 12px 38px}.hangup{margin-top:3px}}
button{font:inherit;-webkit-tap-highlight-color:transparent}.answer,.choice,.hangup,.retry{outline:none}.answer:focus-visible,.hangup:focus-visible,.retry:focus-visible,.choice:focus-visible{outline:2px solid #d7d9dc;outline-offset:3px}.choice{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.retry{min-height:48px}.hangup{min-width:112px}.screen{width:100%}@media(max-width:360px){.screen{padding-left:16px;padding-right:16px}.choice{font-size:15px;padding-left:10px;padding-right:10px}.dialogue{font-size:17px}.goodnight{font-size:25px}}

/* v3 audit fixes: short landscape / low-height stability */
@media (orientation:landscape) and (max-height:520px){
  .screen{padding-top:max(7px,env(safe-area-inset-top));padding-bottom:max(7px,env(safe-area-inset-bottom));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  header{height:20px}.identity{margin-top:0}.avatar.small{width:34px;height:34px;margin-bottom:2px;font-size:15px}.identity h2{min-height:23px;font-size:17px}.identity #callTime{font-size:10px}
  .dialogue{min-height:58px;padding:2px 4px;font-size:15px;line-height:1.38}.countdown{height:29px;font-size:23px}.answer-stage{min-height:92px}.answer-card{min-height:88px;border-radius:16px}.choice{min-height:78px;padding:12px 10px 28px;font-size:14px;line-height:1.35}.divider{margin:10px 0 28px}.hint{bottom:8px;font-size:9px}.hangup{min-height:38px;margin-top:2px;padding:7px 16px}.said{margin:8px auto;padding:8px 12px}.realize{margin:12px 0 4px}
}
@media (max-height:560px) and (orientation:portrait){.dialogue{min-height:72px;font-size:15px;line-height:1.42}.answer-stage{min-height:108px}.answer-card{min-height:100px}.choice{min-height:88px;padding-top:14px;padding-bottom:32px}.avatar.small{width:38px;height:38px}.countdown{height:32px;font-size:25px}}


/* v5: iPhone portrait flex-collapse fix + restored prologue */
#call.screen{flex-direction:column;width:100%;min-width:0;align-items:stretch}
#call>header,#call>.identity,#call>.dialogue,#call>.countdown,#call>.answer-stage{width:100%;min-width:0;flex-shrink:0}
#call>.answer-stage{flex:1 1 auto}
#call .identity h2{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
#call .answer-card{width:100%;min-width:0;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)}
#call .choice{width:auto;min-width:0;word-break:normal;overflow-wrap:anywhere;writing-mode:horizontal-tb}
#call .dialogue{writing-mode:horizontal-tb;word-break:normal}
.prologue{padding:0!important;align-items:stretch;justify-content:stretch;background:#050608}
.prologue-hit{width:100%;height:100%;border:0;background:#050608;color:#f2f2f0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}
.prologue-hit span{font-size:clamp(30px,9vw,44px);font-weight:700;line-height:1.45;text-align:center;letter-spacing:.03em;animation:fadein .7s ease}
.prologue-hit small{position:absolute;bottom:max(34px,calc(env(safe-area-inset-bottom) + 18px));font-size:11px;font-weight:400;color:#555a62;letter-spacing:.08em;animation:fadein 1.4s ease}
@media(max-width:360px){#call .choice{font-size:14px;line-height:1.45;padding-left:8px;padding-right:8px}}

body.death-tap #dialogue::after{content:'タップで続ける';display:block;margin-top:18px;font-size:11px;letter-spacing:.12em;opacity:.38;text-align:center}

/* v8: ordinary smartphone-call interface */
#call.call-screen{
  flex-direction:column;
  align-items:stretch;
  width:100%;
  min-width:0;
  padding:max(18px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 12%,rgba(66,72,82,.26),transparent 35%),
    linear-gradient(180deg,#15171b 0%,#0b0c0f 48%,#07080a 100%);
}
.call-top{width:100%;text-align:center;flex:0 0 auto;padding-top:3px}
.contact-avatar{
  width:72px;height:72px;margin:0 auto 10px;border-radius:50%;
  display:grid;place-items:center;background:#32353b;border:1px solid #484c54;
  font-size:27px;font-weight:400;color:#f2f2f2;
}
#call #callerName{
  min-height:0;margin:0;font-size:25px;line-height:1.2;font-weight:500;
  letter-spacing:.01em;white-space:nowrap;word-break:keep-all;
}
.call-duration{margin-top:5px;font-size:13px;color:#a3a6ac;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.call-game{
  width:100%;min-width:0;flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;
}
.call-meta{height:20px;display:flex;justify-content:space-between;align-items:center;color:#73777e;font-size:10px;letter-spacing:.08em;padding:0 2px}
#call .dialogue{width:100%;min-width:0;min-height:92px;padding:6px 8px;font-size:clamp(17px,4.8vw,21px);line-height:1.65}
#call .countdown{height:38px;font-size:29px}
#call .answer-stage{width:100%;min-width:0;flex:0 1 auto;min-height:126px}
#call .answer-card{
  width:100%;min-width:0;min-height:118px;border-color:#35383e;border-radius:18px;
  background:rgba(31,33,38,.82);box-shadow:0 12px 34px #0006;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
}
#call .choice{
  min-width:0;min-height:104px;padding:18px 11px 35px;font-size:15px;line-height:1.45;
  writing-mode:horizontal-tb;word-break:normal;overflow-wrap:anywhere;
}
#call .divider{margin:16px 0 35px;background:#3b3e45}
#call .hint{bottom:10px;font-size:10px;color:#777b82}

.phone-controls{
  width:min(290px,86vw);margin:8px auto 10px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;flex:0 0 auto;pointer-events:none;
}
.phone-tool{
  border:0;background:transparent;color:#eee;padding:0;display:flex;flex-direction:column;
  align-items:center;gap:5px;opacity:.9;
}
.phone-icon{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:#36393f;font-size:20px;line-height:.8;
}
.phone-tool small,.phone-end small{font-size:9px;font-weight:400;color:#b8bbc0;white-space:nowrap}
.keypad-icon{font-size:16px;letter-spacing:4px;padding-left:4px}
#call .phone-end{
  visibility:visible!important;pointer-events:none;
  width:62px;height:62px;min-width:62px;min-height:62px;margin:0 auto;
  padding:0;border:0;border-radius:50%;background:#e7473e;color:#fff;
  display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto;
  box-shadow:none;transform:none;
}
#call .phone-end>span{display:block;font-size:27px;line-height:1;transform:rotate(135deg)}
#call .phone-end>small{
  position:absolute;top:67px;left:50%;transform:translateX(-50%);color:#9b9ea4;
}
#call .phone-end.hidden{visibility:visible!important;opacity:1!important;pointer-events:none!important}
#call .phone-end:not(.hidden){pointer-events:auto!important;cursor:pointer}
#call .phone-end:active{transform:scale(.96)}
body.death-tap #call .phone-controls,body.death-tap #call .phone-end{opacity:.2;transition:opacity .3s}
body.death-tap #dialogue::after{color:#9a9da3}

@media(max-width:360px){
  #call.call-screen{padding-left:15px;padding-right:15px}
  .contact-avatar{width:62px;height:62px;font-size:23px;margin-bottom:7px}
  #call #callerName{font-size:22px}
  .phone-controls{width:min(260px,88vw);gap:14px;margin-top:5px}
  .phone-icon{width:48px;height:48px}
  #call .phone-end{width:56px;height:56px;min-width:56px;min-height:56px}
}
@media(max-height:700px) and (orientation:portrait){
  .contact-avatar{width:54px;height:54px;margin-bottom:5px;font-size:20px}
  #call #callerName{font-size:20px}.call-duration{margin-top:2px}
  #call .dialogue{min-height:68px;font-size:16px;line-height:1.45;padding:3px 6px}
  #call .countdown{height:29px;font-size:24px}
  #call .answer-stage{min-height:100px}
  #call .answer-card{min-height:94px}
  #call .choice{min-height:84px;padding-top:12px;padding-bottom:29px;font-size:14px}
  #call .divider{margin:10px 0 29px}
  .phone-controls{margin:3px auto 6px}.phone-icon{width:44px;height:44px;font-size:17px}
  #call .phone-end{width:50px;height:50px;min-width:50px;min-height:50px}
  #call .phone-end>small{top:54px}
}
@media(orientation:landscape) and (max-height:520px){
  #call.call-screen.active{display:grid;grid-template-columns:120px minmax(260px,1fr) 150px;grid-template-rows:1fr;gap:12px;align-items:center}
  .call-top{padding:0}.contact-avatar{width:48px;height:48px;margin-bottom:5px;font-size:18px}
  #call #callerName{font-size:18px}.call-game{height:100%;justify-content:center}
  .phone-controls{width:140px;grid-template-columns:repeat(3,1fr);gap:4px;margin:0}
  .phone-icon{width:38px;height:38px;font-size:14px}.phone-tool small{display:none}
  #call .phone-end{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:46px;height:46px;min-width:46px;min-height:46px}
  #call .phone-end>small{display:none}
}

.death-end-hint{margin-top:18px;font-size:11px;letter-spacing:.12em;opacity:.38;text-align:center}

/* v13: death reveal — large, spacious, slow typewriter */
.death-special-wrap{width:100%;min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 10px}
.death-special-line{width:100%;max-width:460px;min-height:5.2em;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:clamp(26px,7.4vw,38px);font-weight:600;line-height:1.6;letter-spacing:.045em;white-space:pre-line;text-wrap:balance}
.death-special-line.second{margin-top:42px}
.death-special-wrap .death-end-hint{margin-top:44px}
@media(max-height:620px){.death-special-wrap{min-height:48vh;padding:18px 8px}.death-special-line{font-size:clamp(23px,6.7vw,32px);line-height:1.65}.death-special-line.second{margin-top:30px}}

/* v15: time progression + subtle caller-name deterioration + stronger dawn */
#callerName{transition:letter-spacing .8s ease,transform .8s ease,opacity .8s ease,filter .8s ease}
#callerName.name-shift-1{letter-spacing:.035em;transform:translateX(.5px)}
#callerName.name-shift-2{letter-spacing:.075em;transform:translateX(-1px);opacity:.96}
#callerName.name-shift-3{letter-spacing:.13em;transform:translateX(1.5px);opacity:.9;filter:blur(.15px)}
#call.dawn{background:linear-gradient(180deg,#cfd8df 0%,#e9edf0 48%,#f6f4ef 100%);color:#202226;transition:background 2.4s ease,color 2.4s ease}
#call.dawn .call-meta,#call.dawn .call-duration,#call.dawn .phone-tool small,#call.dawn .phone-end>small{color:#555b61}
#call.dawn .contact-avatar{background:#e4e7e8;color:#333;border-color:#c5c9cc}
#call.dawn .phone-icon{background:#d7dbde;color:#303338}
#call.dawn .answer-card{background:rgba(245,245,244,.84);border-color:#c7c9ca;box-shadow:none}
#call.dawn .choice{color:#27292c}
#call.dawn .divider{background:#c4c7c9}

/* v18: all typography Mincho + death reveal cross-fade */
html,body,button,input,textarea,select{
  font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","YuMincho","Yu Mincho","HGS明朝E","MS PMincho",serif !important;
}
.death-special-line{
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s ease,transform .2s ease;
}
.death-special-line.is-visible{
  opacity:1;
  transform:none;
}
.death-special-line.is-leaving{
  opacity:0;
  transform:translateY(-3px);
}

/* v19: interactive call controls + top-left game clock */
.game-clock-top{position:absolute;top:max(18px,env(safe-area-inset-top));left:20px;z-index:2;color:#8f939b;font-size:12px;letter-spacing:.1em;font-variant-numeric:tabular-nums;pointer-events:none}
.call-meta #clock{display:none}.call-meta{justify-content:flex-end}
.phone-controls{pointer-events:auto}.phone-tool{cursor:pointer;touch-action:manipulation;min-width:64px;min-height:68px;border-radius:14px}
.phone-tool:active .phone-icon{transform:scale(.94)}.phone-icon{transition:background .18s,color .18s,transform .12s}
.phone-tool.is-on .phone-icon{background:#f1f1ef;color:#16171a}.phone-tool.is-on small{color:#f1f1ef}
#call .phone-end.hidden{visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.keypad-panel{position:absolute;z-index:8;inset:0;background:rgba(8,9,11,.97);display:none;flex-direction:column;align-items:center;justify-content:center;padding:70px 28px 110px}
.keypad-panel.open{display:flex}.keypad-grid{width:min(300px,86vw);display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px}
.keypad-grid button{width:68px;height:68px;justify-self:center;border:0;border-radius:50%;background:#34373c;color:#fff;font-size:28px;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation}
.keypad-grid button:active{background:#555960;transform:scale(.96)}.keypad-grid small{font-size:8px;letter-spacing:.12em;margin-top:5px;color:#c9cbd0;min-height:8px}
.keypad-close{margin-top:24px;min-height:44px;padding:10px 20px;border:0;background:transparent;color:#d7d8da;font-size:13px;text-decoration:underline;text-underline-offset:5px}
body.death-tap .phone-tool{pointer-events:none}
@media(max-width:360px){.game-clock-top{left:15px}.keypad-grid{gap:10px 18px}.keypad-grid button{width:62px;height:62px}}


/* v21: monochrome classic-call layout */
#call.call-screen{
  background:linear-gradient(180deg,#1a1a1c 0%,#101012 48%,#050506 100%);
  color:#fff;
  padding-top:max(18px,env(safe-area-inset-top));
}
.call-top{padding-top:34px}
.contact-avatar{
  width:104px;height:104px;margin:0 auto 16px;
  background:#262628;border:1px solid #555;color:#fff;
  font-size:34px;
}
#call #callerName{font-size:27px;font-weight:600;color:#fff}
.call-duration{font-size:15px;color:#d0d0d0;margin-top:6px}
.game-clock-top{top:max(18px,env(safe-area-inset-top));left:20px;color:#bdbdbd;font-size:13px}
.phone-controls{width:min(320px,90vw);gap:28px;margin:12px auto 12px}
.phone-tool{color:#fff;gap:7px;min-width:72px}
.phone-icon{
  width:58px;height:58px;background:transparent;border:1.5px solid #f2f2f2;
  color:#fff;font-size:21px;
}
.phone-tool small,.phone-end small{color:#e4e4e4;font-size:10px}
.phone-tool.is-on .phone-icon{background:#fff;color:#050506}
.phone-tool.is-on small{color:#fff}
#call .phone-end{
  width:66px;height:66px;min-width:66px;min-height:66px;
  background:#fff;color:#050506;border:0;
}
#call .phone-end>span{font-family:Arial,sans-serif!important;font-size:42px;font-weight:300;line-height:1;transform:none;margin-top:-4px}
#call .phone-end>small{top:72px;color:#d8d8d8}
#call .answer-card{background:#171719;border-color:#454548;box-shadow:none}
#call .divider{background:#48484b}
#call .choice{color:#fff}
#call .hint,#call .call-meta{color:#96969b}
.keypad-panel{background:rgba(5,5,6,.985)}
.keypad-grid button{background:transparent;border:1.5px solid #eee;color:#fff}
.keypad-grid button:active{background:#fff;color:#050506}
.keypad-grid button:active small{color:#050506}
.keypad-close{color:#fff}
#call.dawn .phone-end{background:#222;color:#fff}
@media(max-height:700px) and (orientation:portrait){
  .call-top{padding-top:22px}
  .contact-avatar{width:74px;height:74px;font-size:26px;margin-bottom:8px}
  #call #callerName{font-size:22px}.call-duration{font-size:12px}
  .phone-controls{margin:4px auto 6px}.phone-icon{width:46px;height:46px}
  #call .phone-end{width:52px;height:52px;min-width:52px;min-height:52px}
  #call .phone-end>span{font-size:34px}#call .phone-end>small{top:57px}
}

/* v22: prologue focal text slightly higher */
.prologue-hit span{
  transform:translateY(-58px);
  animation:prologueFade .7s ease;
}
@keyframes prologueFade{
  from{opacity:0}
  to{opacity:1}
}

/* v023: Aki photo avatar */
.avatar,.contact-avatar{overflow:hidden;padding:0}
.avatar img,.contact-avatar img{width:100%;height:100%;display:block;object-fit:cover;object-position:54% 42%;border-radius:50%}


/* v026: mute = the player's side is actually silent */
#call.is-muted .answer-card{
  opacity:.46;
  transition:opacity .18s ease;
}


/* v028 TRUE END: the night slowly washes into morning.
   Kept neutral-white rather than orange sunrise so the phone UI remains uncanny. */
.dawn-wash{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  background:#f7f7f4;
  opacity:0;
  visibility:hidden;
}
.dawn-wash.is-rising{
  visibility:visible;
  animation:trueDawnWash 8s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes trueDawnWash{
  0%{opacity:0}
  35%{opacity:.08}
  68%{opacity:.28}
  100%{opacity:.72}
}


/* v030 — iPhone Safari incoming-call layout & tap reliability */
#incoming{
  position:relative;
  min-height:100dvh;
  height:100dvh;
  overflow:hidden;
  padding:
    max(18px,env(safe-area-inset-top))
    22px
    max(22px,env(safe-area-inset-bottom));
  box-sizing:border-box;
}

/* Keep decorative/ambient layers from stealing the tap. */
#incoming::before,
#incoming::after,
#incoming .incoming-bg,
#incoming .noise,
#incoming .grain{
  pointer-events:none !important;
}

#incoming .incoming-time{
  position:absolute;
  top:max(20px,env(safe-area-inset-top));
  left:22px;
  z-index:2;
}

#incoming .incoming-main,
#incoming .incoming-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translateY(-2.5vh);
  pointer-events:none;
}

#incoming .incoming-avatar,
#incoming .caller-photo,
#incoming .incoming-name,
#incoming .incoming-status,
#incoming .dots{
  pointer-events:none;
}

/* Aki alone is Gothic; the rest of the site stays Mincho. */
#incoming .incoming-name,
#incoming #incomingName,
#incoming .caller-name{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",
              "Yu Gothic","YuGothic","Meiryo",sans-serif !important;
  font-weight:600;
  letter-spacing:.04em;
}

/* Answer control must always sit above the screen and accept touch. */
#incoming .answer,
#incoming .answer-btn,
#incoming #answerBtn,
#incoming button[data-action="answer"]{
  position:absolute !important;
  right:22px !important;
  top:max(22px,env(safe-area-inset-top)) !important;
  z-index:50 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Avoid the screenshot's overly low/empty composition on tall iPhones. */
@media (max-width:600px){
  #incoming .incoming-main,
  #incoming .incoming-center{
    justify-content:flex-start;
    padding-top:clamp(235px,32dvh,315px);
    transform:none;
    box-sizing:border-box;
  }
}

/* v032: answer button must win hit-testing on iPhone Safari */
#incoming{isolation:isolate;}
#answerBtn{
  z-index:2147483647 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-user-select:none;
  user-select:none;
}
#incoming .incoming-center,
#incoming .status,
#incoming .avatar,
#incoming .eyebrow,
#incoming .ringdots,
#incoming h1{
  pointer-events:none !important;
}

/* v034 — conventional incoming-call layout */
#incoming.screen.active{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
#incoming .status{
  position:absolute;
  top:max(20px,env(safe-area-inset-top));
  left:22px;
  z-index:2;
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;
}
#incoming .incoming-center{
  position:static !important;
  inset:auto !important;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start !important;
  padding:clamp(74px,10dvh,112px) 0 0 !important;
  transform:none !important;
  margin:0 !important;
  pointer-events:none;
}
#incoming .incoming-name{
  order:1;
  margin:0 0 7px;
  font-size:clamp(31px,9vw,42px);
  line-height:1.15;
}
#incoming .eyebrow{
  order:2;
  font-size:14px;
  letter-spacing:.08em;
  color:#aeb1b7;
}
#incoming .avatar{
  order:3;
  width:112px;
  height:112px;
  margin:clamp(38px,6dvh,62px) auto 0;
}
#incoming .ringdots{
  order:4;
  margin:22px 0 0;
}
#incoming #answerBtn{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:max(38px,calc(env(safe-area-inset-bottom) + 24px)) !important;
  transform:translateX(-50%);
  width:82px;
  height:82px;
  margin:0 !important;
  background:#36c45f;
  color:#fff;
  box-shadow:0 8px 30px #0008;
  z-index:50 !important;
}
#incoming #answerBtn span{
  position:absolute;
  top:88px;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  color:#e9e9e9;
  font-size:12px;
  white-space:nowrap;
}
@media(max-height:700px){
  #incoming .incoming-center{padding-top:62px !important}
  #incoming .avatar{width:92px;height:92px;margin-top:25px}
  #incoming #answerBtn{bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px)) !important}
}

/* Tap controls: no drag or flick interaction is used for answers. */
#dialogue.tap-ready{cursor:pointer}
#dialogue.tap-ready::after{content:'タップで次へ';display:block;margin-top:8px;font-size:11px;letter-spacing:.08em;color:#8f939b;opacity:.72}
#call .choice{touch-action:manipulation}

/* v050: four-stage Aki portrait progression + slightly larger portrait */
#call .contact-avatar{
  width:116px;
  height:116px;
  margin-bottom:16px;
}
#incoming .avatar{
  width:124px;
  height:124px;
}
@media(max-height:700px) and (orientation:portrait){
  #call .contact-avatar{
    width:82px;
    height:82px;
    margin-bottom:8px;
  }
  #incoming .avatar{
    width:100px;
    height:100px;
  }
}
@media(max-height:560px) and (orientation:portrait){
  #call .contact-avatar{
    width:68px;
    height:68px;
    margin-bottom:5px;
  }
}

/* v051 audit: keep the call screen hidden until active, including short landscape. */
#call.call-screen:not(.active){display:none!important}

/* v051 audit: final landscape overrides must come after the accumulated call-layout revisions. */
@media(orientation:landscape) and (max-height:520px){
  #incoming .incoming-center{padding-top:46px!important}
  #incoming .incoming-name{font-size:32px}
  #incoming .avatar{width:78px;height:78px;margin-top:18px}
  #incoming .ringdots{margin-top:10px}
  #incoming #answerBtn{width:68px;height:68px;bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px))!important}
  #incoming #answerBtn span{top:69px}

  #call.call-screen.active{
    grid-template-columns:92px minmax(0,1fr) 138px;
    grid-template-rows:1fr;
    gap:8px;
    padding-top:max(7px,env(safe-area-inset-top));
    padding-bottom:max(7px,env(safe-area-inset-bottom));
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  #call .call-top{padding-top:0}
  #call .contact-avatar{width:48px;height:48px;margin-bottom:5px}
  #call #callerName{font-size:18px}
  #call .call-duration{font-size:11px;margin-top:2px}
  #call .call-game{height:100%;justify-content:center}
  #call .dialogue{min-height:58px;padding:2px 4px;font-size:15px;line-height:1.38}
  #call .countdown{height:29px;font-size:23px}
  #call .answer-stage{min-height:92px}
  #call .answer-card{min-height:88px;border-radius:16px}
  #call .choice{min-height:78px;padding:12px 8px 28px;font-size:14px;line-height:1.35}
  #call .divider{margin:10px 0 28px}
  #call .hint{bottom:8px;font-size:9px}
  #call .phone-controls{width:138px;grid-template-columns:repeat(3,1fr);gap:2px;margin:0}
  #call .phone-tool{min-width:0;min-height:46px;gap:0}
  #call .phone-icon{width:34px;height:34px;font-size:13px}
  #call .phone-tool small{display:none}
  #call .phone-end{right:max(18px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:46px;height:46px;min-width:46px;min-height:46px}
  #call .phone-end>span{font-size:31px}
  #call .phone-end>small{display:none}
}

/* During death/reveal states the end-call control may remain visible as scenery, but must not steal taps. */
body.death-tap #call .phone-end.hidden{pointer-events:none!important;opacity:.2!important}

/* v051 audit: keep the end-call caption inside the smallest portrait viewport. */
#call .phone-end>small{top:68px}
@media(max-height:700px) and (orientation:portrait){#call .phone-end>small{top:54px}}
/* v051 audit: Aki's displayed contact name stays Gothic on both incoming and in-call screens. */
#call #callerName{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",sans-serif!important;
}

/* Hidden really means hidden outside the deliberate dimmed death-state scenery. */
body:not(.death-tap) #call .phone-end.hidden{visibility:hidden!important;opacity:0!important;pointer-events:none!important}

/* Give the end-call caption a few pixels of breathing room from the viewport edge. */
#call .phone-end{margin-bottom:4px}



/* v053: occasional three-choice questions. Two-choice stages retain the original horizontal card. */
#middleChoice,.divider-b{display:none}
#card.three-choice{
  grid-template-columns:1fr;
  grid-template-rows:auto 1px auto 1px auto;
  min-height:166px;
}
#card.three-choice #middleChoice{display:flex}
#card.three-choice .divider-b{display:block}
#card.three-choice .divider{
  width:auto;
  height:1px;
  margin:0 16px;
}
#card.three-choice .choice{
  min-height:52px;
  padding:10px 14px;
  font-size:15px;
  line-height:1.35;
}
#card.three-choice .hint{display:none}
@media(max-height:700px) and (orientation:portrait){
  #card.three-choice{min-height:148px}
  #card.three-choice .choice{min-height:46px;padding:8px 10px;font-size:14px}
}
@media(max-height:560px) and (orientation:portrait){
  #card.three-choice{min-height:136px}
  #card.three-choice .choice{min-height:42px;padding:6px 8px;font-size:13px}
  #card.three-choice .divider{margin:0 12px}
}
@media(orientation:landscape) and (max-height:520px){
  #card.three-choice{
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);
    grid-template-rows:1fr;
    min-height:88px;
  }
  #card.three-choice .divider{width:1px;height:auto;margin:10px 0 20px}
  #card.three-choice .choice{min-height:78px;padding:10px 7px 24px;font-size:12px;line-height:1.3}
}


/* v064: one collectible END per stage (40 total; timeouts excluded) */
.collection-entry{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:max(78px,calc(env(safe-area-inset-bottom) + 62px));
  transform:translateX(-50%);
  min-height:42px;
  padding:9px 16px;
  border:1px solid #34363b;
  border-radius:999px;
  background:rgba(8,9,11,.78);
  color:#b9bbc0;
  font-size:11px;
  letter-spacing:.08em;
  white-space:nowrap;
  touch-action:manipulation;
}
.collection-entry strong{font-weight:500;color:#f1f1ef;margin-left:6px;font-variant-numeric:tabular-nums}
.collection-entry:active{background:#17181b}

html.collection-view,body.collection-view{touch-action:pan-y}
.collection-screen{
  z-index:20;
  padding:0!important;
  background:#07080a;
  color:#f2f2f0;
  touch-action:pan-y;
}
.collection-screen.active{display:flex;flex-direction:column}
.collection-shell{height:100%;min-height:0;display:flex;flex-direction:column;width:100%}
.collection-header{
  flex:0 0 auto;
  min-height:112px;
  height:auto;
  padding:max(22px,env(safe-area-inset-top)) 22px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-bottom:1px solid #26282d;
  background:#0b0c0f;
}
.collection-kicker{font-size:9px;letter-spacing:.18em;color:#686b72;margin-bottom:4px}
.collection-header h2{font-size:24px;margin:0 0 3px;color:#fff;letter-spacing:.04em}
.collection-total{font-size:12px;color:#92959b;font-variant-numeric:tabular-nums}
.collection-close{
  width:44px;height:44px;min-width:44px;border-radius:50%;
  border:1px solid #34363b;background:#101115;color:#ddd;
  font-size:25px;line-height:1;touch-action:manipulation;
}
.collection-grid{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding:14px 16px max(32px,calc(env(safe-area-inset-bottom) + 20px));
}
.collection-card{
  position:relative;
  padding:15px 15px 14px;
  margin:0 0 10px;
  border:1px solid #2d2f34;
  border-radius:14px;
  background:#101115;
  text-align:left;
}
.collection-card.locked-end{opacity:.58}
.collection-card.true-end-card{border-style:double}
.collection-no{font-size:9px;letter-spacing:.13em;color:#686b72;margin-bottom:7px}
.collection-card h3{font-size:16px;line-height:1.5;margin:0;color:#efefec;font-weight:600}
.collection-stage{font-size:11px;color:#96999f;margin-top:5px}
.collection-card p{font-size:12px;line-height:1.75;color:#aaaeb5;margin:9px 0 0}
.collection-complete{padding:24px 10px 44px;text-align:center;font-size:13px;letter-spacing:.08em;color:#c4c6c9;min-height:80px}

.end-label{font-size:10px;letter-spacing:.2em;color:#81858b;margin-top:6px}
.end-name{font-size:24px;line-height:1.55;letter-spacing:.035em;margin:5px 0 0}
.new-end{font-size:11px;letter-spacing:.18em;margin-top:20px;color:#f2f2f0}
.end-added{font-size:10px;letter-spacing:.07em;color:#777b82;margin-top:5px}
.ending-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px}
.ending-actions .retry{margin-top:0}
.open-collection{
  min-height:44px;
  border:0;
  background:transparent;
  color:#9da0a6;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:5px;
  touch-action:manipulation;
}
.true-meta .ending-actions{opacity:1}

@media(max-width:360px){
  .collection-entry{bottom:max(70px,calc(env(safe-area-inset-bottom) + 54px));padding:8px 13px}
  .collection-header{padding-left:16px;padding-right:16px}
  .collection-grid{padding-left:12px;padding-right:12px}
  .collection-card{padding:13px}
  .end-name{font-size:21px}
}
@media(orientation:landscape) and (max-height:520px){
  .collection-header{min-height:72px;padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
  .collection-header h2{font-size:18px}
  .collection-kicker{display:none}
  .collection-close{width:38px;height:38px;min-width:38px}
  .collection-grid{padding-top:8px}
  .collection-card{padding:10px 12px;margin-bottom:7px}
  .collection-card p{line-height:1.5}
}


/* v066 END still gallery */
.collection-still{
  display:block;
  width:100%;
  margin:11px 0 2px;
  padding:0;
  border:1px solid #2d2f34;
  border-radius:10px;
  overflow:hidden;
  background:#08090b;
  cursor:zoom-in;
  touch-action:manipulation;
}
.collection-still img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  image-rendering:auto;
}
.still-viewer{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background:rgba(0,0,0,.94);
}
.still-viewer.open{display:flex}
.still-viewer-inner{width:min(960px,100%);position:relative}
.still-viewer img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#050506;border:1px solid #2d2f34}
.still-viewer-caption{margin-top:10px;text-align:center;font-size:12px;line-height:1.6;color:#b9bbc0}
.still-viewer-close{
  position:absolute;right:0;top:-50px;width:42px;height:42px;border-radius:50%;
  border:1px solid #3a3c41;background:#101115;color:#eee;font-size:24px;line-height:1;
  touch-action:manipulation;
}
@media(orientation:landscape) and (max-height:520px){
  .collection-still{max-width:420px}
  .still-viewer{padding:8px 56px}
  .still-viewer-inner{max-height:100%}
  .still-viewer img{max-height:calc(100dvh - 38px);width:auto;max-width:100%;margin:auto}
  .still-viewer-caption{display:none}
  .still-viewer-close{top:0;right:-48px}
}


/* v068: truth reconstruction / retry progression */
.truth-record{
  flex:0 0 auto;
  max-height:38vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 16px 12px;
  border-bottom:1px solid #26282d;
  background:#090a0c;
}
.truth-record-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.truth-kicker{font-size:8px;letter-spacing:.18em;color:#656870;margin-bottom:3px}
.truth-record h3{margin:0;font-size:16px;letter-spacing:.04em;color:#f1f1ef}
.truth-record-head strong{font-size:11px;font-weight:500;color:#a6a9af;font-variant-numeric:tabular-nums;white-space:nowrap}
.truth-status{margin:8px 0 10px;font-size:11px;line-height:1.6;color:#858990}
.truth-status.ready{color:#d6d7d9}
.truth-timeline{display:grid;gap:6px}
.truth-row{border-left:1px solid #292c31;padding:6px 0 6px 10px}
.truth-row-head{font-size:9px;letter-spacing:.08em;color:#676b72;margin-bottom:3px}
.truth-row-body{font-size:11px;line-height:1.65;color:#a8abb1;white-space:pre-wrap}
.truth-row.locked .truth-row-body{color:#45484e;letter-spacing:.05em}
.truth-row.unlocked{border-left-color:#73777f}
.truth-row.unlocked .truth-row-head{color:#bfc1c5}
.collection-section-label{flex:0 0 auto;padding:10px 16px 0;font-size:9px;letter-spacing:.18em;color:#686b72;background:#07080a}
.truth-added{margin-top:14px;font-size:11px;line-height:1.6;letter-spacing:.05em;color:#d3d4d6}
.truth-added small{display:block;margin-top:4px;font-size:10px;color:#7f838a;letter-spacing:.03em}
@media(max-width:360px){
  .truth-record{padding-left:12px;padding-right:12px;max-height:35vh}
  .truth-row-body{font-size:10px}
}
@media(orientation:landscape) and (max-height:520px){
  .truth-record{max-height:45vh;padding:8px 12px}
  .truth-timeline{grid-template-columns:1fr 1fr;gap:4px 12px}
  .truth-row{padding-top:3px;padding-bottom:3px}
  .truth-row-body{font-size:9px;line-height:1.35}
  .collection-section-label{padding-top:6px}
}

/* v069: END「また明日」→翌晩2:13→2周目 */
.loop-night{margin-top:20px;min-height:150px;text-align:center}
.loop-shift,.loop-time,.loop-incoming,.loop-again{margin:10px 0;animation:fadein .45s ease both}
.loop-time{font-size:1.4rem;font-weight:700;letter-spacing:.08em}
.loop-incoming{font-size:1.05rem}
.loop-again{margin-top:18px;font-weight:700}
.loop-retry{font-weight:700}


/* Landscape keypad and safe touch targets */
@media(orientation:landscape) and (max-height:520px){
  #keypadPanel.keypad-panel{justify-content:flex-start;overflow-y:auto;padding:max(8px,env(safe-area-inset-top)) 20px max(8px,env(safe-area-inset-bottom));}
  #keypadPanel .keypad-grid{width:min(270px,72vw);gap:6px 18px;}
  #keypadPanel .keypad-grid button{width:54px;height:54px;font-size:23px;}
  #keypadPanel .keypad-grid small{font-size:7px;margin-top:3px;}
  #keypadPanel .keypad-close{min-height:44px;margin-top:8px;padding:8px 18px;}
  .collection-close{width:44px;height:44px;min-width:44px;}
}


/* v074 second-pass audit: scroll-safe endings + touch targets */
.overlay{
  justify-content:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.overlay .ending-body{
  flex:0 0 auto;
  margin:auto 0;
  padding:12px 0;
}
.collection-entry{min-height:44px;}

html.ending-view,body.ending-view{touch-action:pan-y;}

/* v074 final audit: minimum touch targets */
@media(max-height:560px) and (orientation:portrait){#card.three-choice .choice{min-height:44px;}}
.still-viewer-close{width:44px;height:44px;}

/* v074 final audit: very short portrait must not overlap choices and phone tools */
@media(max-height:500px) and (orientation:portrait){
  #call .dialogue{min-height:58px;padding-top:2px;padding-bottom:2px;font-size:15px;line-height:1.38}
  #call .countdown{height:26px;font-size:22px}
  #call .answer-stage{min-height:88px}
  #call .answer-card{min-height:84px}
  #call .choice{min-height:74px;padding-top:9px;padding-bottom:25px;font-size:13.5px;line-height:1.35}
  #call .divider{margin-top:8px;margin-bottom:25px}
  #call .hint{bottom:7px;font-size:9px}
  #call .phone-controls{margin-top:6px;margin-bottom:2px}
}
@media(max-height:500px) and (orientation:portrait){
  #card.three-choice{
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);
    grid-template-rows:1fr;
    min-height:84px;
  }
  #card.three-choice .divider{width:1px;height:auto;margin:8px 0 22px}
  #card.three-choice .choice{min-height:74px;padding:8px 5px 22px;font-size:11.5px;line-height:1.3;overflow-wrap:anywhere}
}

/* v075 third-pass audit: iPhone dynamic viewport for END still viewer */


/* v076 fourth-pass audit: 568px-class portrait 3-choice overlap fix */
@media(max-height:600px) and (min-height:501px) and (orientation:portrait){
  #card.three-choice{min-height:136px}
  #card.three-choice .choice{min-height:44px;padding:6px 8px;font-size:13px}
  #card.three-choice .divider{margin:0 12px}
}
@media(max-height:600px) and (min-height:501px) and (orientation:portrait){
  #call .answer-stage{margin-bottom:3px}
}

/* v077 friendship-language audit: no visual changes */

/* v079 performance/responsive audit: media loading optimized; no visual design changes */


/* v081 audit: preserve responsive 4:3 still geometry when width/height attributes are present */

/* v081 audit: keep the still-viewer close control reachable on low-height tablet/PC landscapes. */
@media (min-width:700px) and (min-height:521px) and (max-height:820px){
  .still-viewer-close{top:8px;right:8px;z-index:2}
}

/* v084 requested fixes */
#call .answer-card.choices-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.collection-tabs{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #26282d;background:#0b0c0f;padding:0 12px}
.collection-tab{min-height:46px;border:0;border-bottom:2px solid transparent;background:transparent;color:#777b82;font-size:12px;touch-action:manipulation}
.collection-tab.active{color:#fff;border-bottom-color:#ddd}
.collection-pane{display:none;min-height:0;flex:1 1 auto;overflow:hidden}
.collection-pane.active{display:flex;flex-direction:column}
.collection-pane .truth-record{max-height:none;height:100%;border-bottom:0}
.collection-pane .collection-grid{height:100%}
.ending-still{display:block;width:min(78vw,420px);aspect-ratio:4/3;margin:18px auto;border:1px solid #34363b;padding:0;background:#0b0c0f;overflow:hidden;touch-action:manipulation}
.ending-still img{display:block;width:100%;height:100%;object-fit:contain;background:#050607}
/* v092: single utterance, named speaker, name entry, modest portrait enlargement. */
#dialogue .dialogue-speaker{font-size:11px;line-height:1.4;color:#92969c;letter-spacing:.04em;margin-bottom:7px;font-weight:400}
#dialogue .dialogue-speech{font-size:calc(1em + 2px);line-height:inherit;overflow-wrap:anywhere}
#dialogue .line{width:100%}
.name-entry{align-items:center;justify-content:center;background:#050608}
.player-name-form{width:min(100%,320px);display:flex;flex-direction:column;gap:14px;text-align:center}
.player-name-form label{font-size:20px}
.player-name-form input{width:100%;min-height:48px;border:1px solid #45484e;border-radius:10px;background:#151619;color:#eee;padding:12px;font:inherit;font-size:16px;text-align:center;user-select:text;-webkit-user-select:text;touch-action:manipulation}
.player-name-form small{font-size:11px;color:#92969c;line-height:1.6}
.player-name-form button{min-height:48px;padding:12px;border:1px solid #55585e;border-radius:999px;background:#111318;color:#eee;touch-action:manipulation}
#call .contact-avatar{width:132px;height:132px}
#incoming .avatar{width:140px;height:140px}
@media(max-height:700px) and (orientation:portrait){#call .contact-avatar{width:94px;height:94px}#incoming .avatar{width:112px;height:112px}}
@media(max-height:560px) and (orientation:portrait){#call .contact-avatar{width:78px;height:78px}}
@media(orientation:landscape) and (max-height:520px){#call .contact-avatar{width:56px;height:56px}#incoming .avatar{width:88px;height:88px}}

/* v093: discreet opening-only skip control. */
.opening-skip{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:4;min-height:32px;padding:5px 8px;border:0;background:transparent;color:#898d93;font-size:9px;line-height:1.4;letter-spacing:.03em;touch-action:manipulation}
.opening-skip[hidden]{display:none!important}
.opening-skip:focus-visible{outline:1px solid #898d93;outline-offset:2px}

/* v097: reserve the enlarged utterance height in compact call layouts. */
#call #dialogue{flex-shrink:0}

/* v099: stable speaker rows and readable Japanese wrapping. */
#call #dialogue .dialogue-speaker{
  height:2.8em;min-height:2.8em;max-height:2.8em;
  width:100%;max-width:100%;margin:0 0 7px;
  display:flex;align-items:center;justify-content:center;
  white-space:normal;overflow-wrap:anywhere;word-break:normal;
  text-wrap:wrap;overflow:hidden;
}
#call #dialogue .dialogue-speech{
  min-height:2lh;line-break:strict;word-break:normal;
  overflow-wrap:break-word;text-wrap:pretty;
}
/* Draw a single ring over each photograph, retaining its original color and size. */
#call .contact-avatar,#incoming .avatar{position:relative;border-color:transparent}
#call .contact-avatar::after,#incoming .avatar::after{
  content:'';position:absolute;inset:0;border:1px solid;border-radius:50%;pointer-events:none;
}
#call .contact-avatar::after{border-color:#555}
#incoming .avatar::after{border-color:#41454c}
.game-clock-top{
  left:max(20px,calc(env(safe-area-inset-left) + 12px));
  top:max(18px,calc(env(safe-area-inset-top) + 8px));
}
@media(max-width:360px){.game-clock-top{left:max(15px,calc(env(safe-area-inset-left) + 8px))}}
@media(orientation:landscape) and (max-height:520px){
  .game-clock-top{left:max(14px,calc(env(safe-area-inset-left) + 8px));top:max(9px,calc(env(safe-area-inset-top) + 6px))}
}
#call .answer-stage:has(#card.three-choice){min-height:166px;flex:0 0 auto}
#call:has(#card.three-choice) #dialogue{padding-top:3px;padding-bottom:3px}
/* Compact portraits reserve the actual three-choice card height, without clipping the timer. */
@media(max-height:700px) and (orientation:portrait){
  #call #dialogue .dialogue-speaker{height:auto;min-height:1.4em;max-height:2.8em}
  #call .answer-stage:has(#card.three-choice){min-height:148px;flex-shrink:0}
}
@media(max-height:620px) and (orientation:portrait){
  #call:has(#card.three-choice) .call-top{padding-top:0}
  #call .answer-stage:has(#card.three-choice){min-height:136px}
}
@media(max-height:500px) and (orientation:portrait){
  #call:has(#card.three-choice) .call-top{padding-top:6px}
  #call .answer-stage:has(#card.three-choice){min-height:88px}
}
@media(max-height:620px) and (orientation:portrait){
  #call:has(#card.three-choice) #dialogue{padding-top:1px;padding-bottom:1px}
}

@media(orientation:landscape) and (max-height:520px){#call .answer-stage:has(#card.three-choice){min-height:92px}}

.share-card{border:1px solid #4a4d53;background:#111318;color:#eee;border-radius:999px;padding:14px 24px;font-size:14px;touch-action:manipulation}

/* v113: subtle remaining-to-morning counter at the lower right of the call screen. */
.morning-progress{
  position:absolute;
  right:max(14px,calc(env(safe-area-inset-right) + 10px));
  bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));
  z-index:3;
  color:#777b82;
  font-size:10px;
  font-weight:400;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}
@media(max-width:360px){.morning-progress{right:max(10px,calc(env(safe-area-inset-right) + 7px));bottom:max(9px,calc(env(safe-area-inset-bottom) + 6px));font-size:9px}}
@media(orientation:landscape) and (max-height:520px){.morning-progress{right:max(10px,calc(env(safe-area-inset-right) + 7px));bottom:max(70px,calc(env(safe-area-inset-bottom) + 63px));font-size:9px}}
.share-card:disabled{opacity:.55;pointer-events:none}


/* Opening-page visitor counter: intentionally hidden just below the first viewport. */
html.prologue-view,body.prologue-view{touch-action:pan-y!important}
#prologue.prologue{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y!important;
  scrollbar-width:none;
}
#prologue.prologue::-webkit-scrollbar{display:none}
#prologue.prologue.active{display:block}
#prologue .prologue-hit{
  width:100%;
  height:100dvh;
  min-height:100svh;
  flex:none;
}
.prologue-visitor-counter{
  width:74px;
  height:24px;
  margin:2px auto max(6px,env(safe-area-inset-bottom));
  border:1px solid #1b1d21;
  background:#000;
  color:#777b82;
  display:grid;
  place-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;
  line-height:1;
  letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
  opacity:.78;
  user-select:none;
  -webkit-user-select:none;
}
.prologue-visitor-counter b{font:inherit;font-weight:500}
.prologue-visitor-counter.is-offline{opacity:.34}