@font-face{
  font-family: "anzu";
  src: url("../fonts/APT.ttf") format("truetype");
  font-display: swap;
}

:root{
  --stage-width: min(100vw, calc(100dvh * 1.39));
  --stage-half-width: calc(var(--stage-width) * 0.5);
}

/* =========================
   全体ハイライト禁止
========================= */

/* タップ時の青いハイライト消す（iOS / Android） */
* {
  -webkit-tap-highlight-color: transparent;
}

/* フォーカス枠を消す */
*:focus {
  outline: none;
}

/* テキスト選択ハイライト消す */
*::selection {
  background: transparent;
}

/* iOS系 */
* {
  -webkit-touch-callout: none;
}

/* 選択自体も禁止したい場合 */
body {
  user-select: none;
}

html, body{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden;
  background:#000;
}

/* スクリーンをぴったり重ねるための記述 */
.title-screen{
  position: absolute;
  inset: 0;
}

/* タイトルスクリーン */
.title-screen{
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
  opacity: 1;
  z-index: 20;
}

.bg-image{
  position:absolute;
  top:0;
  left:50%;
  height:100dvh;
  width:auto;

  transform:translateX(-50%);
}

.title-logo{
  position:absolute;

  left:50%;
  top:0;

  height:36dvh;
  width:auto;

  transform:translateX(-50%) translateY(-6dvh);

  opacity:0;

  filter:
    drop-shadow(0 6px 10px rgba(0,0,0,0.45))
    drop-shadow(0 2px 3px rgba(0,0,0,0.35));

  animation:
    logoFade 1.2s ease 0.8s forwards;
}

@keyframes logoFade{

  from{
    opacity:0;
    transform:translateX(-50%) translateY(-6dvh);
  }

  to{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

}

.title-screen.fade-out{
  opacity: 0;
  transition: opacity 1s ease;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 内装スクリーン */
.interior-screen {
  position:absolute;
  inset: 0;
  overflow: hidden;
  z-index: 10;
  display: none;
}


/* ★カウンター基準コンテナ（div） */
.counter-layer {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  transform: translateX(-50%) translateY(var(--counter-shift, 0));
  transition: transform 0.50s ease;
  pointer-events: none; /* 基本は透過。クリックしたければ後で変える */
  z-index: 10;
  
  --counter-shift: 0dvh;
}

/* counter画像そのもの */
.interior-screen .counter-layer .counter {
  height: 100dvh;
  width: auto;
  display: block;
}
/*
.interior-screen .counter-layer .chara {
  position: absolute;
  z-index: 20;
  height: 76dvh;
  width: auto;
  left: 50%;
  bottom: 21dvh;
  transform:
    translateX(-50%)
    scale(calc(var(--chara-scale, 1) * 0.8));
  opacity: 0;
}
*/
/* 置き物：counter-layerの中で絶対配置 */
.item {
  position: absolute;
  z-index: 20;
  height: auto;
  
  opacity: 0;

  transform: translate(-50%, -4dvh);
  
  transition:
    transform 1.50s cubic-bezier(.22,1.2,.36,1),
    opacity 1.00s ease;
}

.item.visible{
  opacity: 1;
  transform: translate(-50%, 0);
}

.udon {
  width: 32%;
  left: 45%;
  bottom: 16dvh;
}

.tea {
  width: 16%;
  left: 60%;
  bottom: 22dvh;
}

/* 影（共通） */
.counter-layer .shadow{
  position: absolute;
  pointer-events: none;
  z-index: 15;

  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(50, 30, 18, 0.65) 0%,
    rgba(50, 30, 18, 0.38) 40%,
    rgba(50, 30, 18, 0.12) 65%,
    rgba(50, 30, 18, 0.00) 85%
  );

  filter: blur(5px);
  opacity: 0;
  mix-blend-mode: multiply;
  transform: translate(-50%, 0);
  transition:
    transform 1.50s ease,
    opacity 1.00s ease;
}

.counter-layer .shadow.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* うどん影：うどんの位置に合わせる */
.counter-layer .shadow-udon{
  left: 46%;
  bottom: 16dvh;
  width: 22%;
  height: 12dvh;
}

/* お茶影：お茶の位置に合わせる */
.counter-layer .shadow-tea{
  left: 60%;
  bottom: 20dvh;
  width: 10%;
  height: 10dvh;
}

/* ========================================
   キャラレイヤー
======================================== */
.chara-layer{
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100dvh;
  width: auto;
  transform: translateX(-50%) translateY(var(--counter-shift, 0));
  transition: transform 0.45s ease;
  pointer-events: none;
  z-index: 5;
}

/* ========================================
   スロット共通
======================================== */
.slot{
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.slot.visible{
  opacity: 1;
}

/* ========================================
   スロット位置
======================================== */
/* back */
.slot.back-left{
  left: -41vh;
  bottom: 43dvh;
}

.slot.back-center-left,
.slot.back-turn-center-left{
  left: -6vh;
  bottom: 43dvh;
}

.slot.back-center-right,
.slot.back-turn-center-right{
  left: 6vh;
  bottom: 43dvh;
}

.slot.back-right{
  left: 41vh;
  bottom: 43dvh;
}

/* mid */
.slot.mid-center-left,
.slot.mid-turn-center-left{
  left: -12vh;
  bottom: 30dvh;
}

.slot.mid-center-right,
.slot.mid-turn-center-right{
  left: 12vh;
  bottom: 30dvh;
}

/* front */
.slot.front-center{
  left: 0;
  bottom: 0;
}

/* sit counterLayer基準のため、他とleftが異なるので注意。*/
.slot.sit-center{
  left: 50%;
  bottom: 32.6dvh;
}

/* ========================================
   キャラ画像 共通
======================================== */
.slot .chara{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  z-index: 6;
  transform-origin: bottom center;
  transform:
    translateX(-50%)
    scale(calc(var(--chara-scale, 1) * 0.8));
}

/* ========================================
   キャラ高さ
======================================== */
.slot.back-left .chara,
.slot.back-center-left .chara,
.slot.back-turn-center-left .chara,
.slot.back-center-right .chara,
.slot.back-turn-center-right .chara,
.slot.back-right .chara{
  height: 50dvh;
}

.slot.mid-center-left .chara,
.slot.mid-turn-center-left .chara,
.slot.mid-center-right .chara,
.slot.mid-turn-center-right .chara{
  height: 70dvh;
}

.slot.front-center .chara{
  height: 120dvh;
}

.slot.sit-center .chara{
  height: 66dvh;
}

/* ========================================
   左側だけ反転
======================================== */
.slot.back-left .chara,
.slot.back-center-left .chara,
.slot.back-turn-center-left .chara,
.slot.mid-center-left .chara,
.slot.mid-turn-center-left .chara{
  transform:
    translateX(-50%)
    scaleX(-1)
    scale(calc(var(--chara-scale, 1) * 0.8));
}

/* ========================================
   キャラの身長補正
======================================== */
.chara[data-chara="kuro"]    { --chara-scale: 1.00; --chara-offset-y: -0.9dvh; }
.chara[data-chara="mari"]    { --chara-scale: 0.97; --chara-offset-y: -1.0dvh; }
.chara[data-chara="saguru"]  { --chara-scale: 0.94; --chara-offset-y: -1.1dvh; }
.chara[data-chara="tsumugi"] { --chara-scale: 0.92; --chara-offset-y: -1.2dvh; }
.chara[data-chara="tama"]    { --chara-scale: 0.88; --chara-offset-y: -1.3dvh; }

/* ========================================
   キャラ影 共通
======================================== */
.slot .shadow-chara{
  position: absolute;
  left: 0;
  bottom: -2dvh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(50, 30, 18, 0.65) 0%,
    rgba(50, 30, 18, 0.38) 40%,
    rgba(50, 30, 18, 0.12) 65%,
    rgba(50, 30, 18, 0.00) 85%
  );
  filter: blur(4px);
  mix-blend-mode: multiply;
  z-index: 4;
  pointer-events: none;
}

/* ========================================
   キャラ影サイズ
======================================== */
.slot.back-left .shadow-chara,
.slot.back-center-left .shadow-chara,
.slot.back-turn-center-left .shadow-chara,
.slot.back-center-right .shadow-chara,
.slot.back-turn-center-right .shadow-chara,
.slot.back-right .shadow-chara{
  width: 18vh;
  height: 7dvh;
}

.slot.mid-center-left .shadow-chara,
.slot.mid-turn-center-left .shadow-chara,
.slot.mid-center-right .shadow-chara,
.slot.mid-turn-center-right .shadow-chara{
  width: 26vh;
  height: 12dvh;
}

/* ========================================
   キャラ影位置
======================================== */
.slot.back-left .shadow-chara,
.slot.back-center-left .shadow-chara,
.slot.back-turn-center-left .shadow-chara,
.slot.mid-center-left .shadow-chara,
.slot.mid-turn-center-left .shadow-chara{
  left: -2vh;
}

.slot.back-center-right .shadow-chara,
.slot.back-turn-center-right .shadow-chara,
.slot.mid-center-right .shadow-chara,
.slot.mid-turn-center-right .shadow-chara{
  left: 2vh;
}

.slot.back-right .shadow-chara{
  left: 3vh;
}

/* =========================
   front-center専用
========================= */
.slot.front-center{
  transition: opacity 0s;
  opacity: 1;
}
.slot.front-center .chara{
  transition: opacity 0.4s ease;
  opacity: 0;
}
.slot.front-center .chara.visible{
  opacity: 1;
}

/* =========================
   sit-center専用
========================= */
.slot.sit-center{
  transition: opacity 0s;
  opacity: 1;
}
.slot.sit-center .chara{
  transition: opacity 0.4s ease;
  opacity: 0;
}
.slot.sit-center .chara.visible{
  opacity: 1;
}

/* =========================
   メッセージ表示
========================= */

/* 字幕の外枠 */
.message-screen{
  position: absolute;
  inset: 0;
  z-index: 70;

  opacity: 0;
  visibility: hidden;

  transform: translateY(0);

  transition:
    opacity 0.50s ease,
    transform 0.50s ease,
    visibility 0s linear 0.50s;
}

/* ▼ 店員（上から） */
.message-screen.staff {
  transform: translateY(-20px);
}

/* ▼ ユーザ（下から） */
.message-screen.user {
  transform: translateY(20px);
}

/* 表示 */
.message-screen.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);

  transition:
    opacity 0.50s ease,
    transform 0.50s ease,
    visibility 0s;
}

/* メッセージ位置：ゲーム画面幅の中に閉じ込める */
.message-layer{
  position: absolute;

  left: 50%;
  right: auto;
  bottom: 72px;

  width: var(--stage-width);
  transform: translateX(-50%);

  z-index: 50;
  pointer-events: none;
  box-sizing: border-box;

  padding-bottom: env(safe-area-inset-bottom, 0px);

  padding-left: clamp(10px, 2.5dvh, 24px);
  padding-right: clamp(10px, 2.5dvh, 24px);
}

/* 黒帯（角丸の“板”） */
.message-window{
  width: min(620px, 92%);
  margin: 0 auto;
  box-sizing: border-box;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.68),
    rgba(0, 0, 0, 0.88)
  );

  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);

  padding:
    clamp(12px, 2.2dvh, 18px)
    clamp(16px, 3.0dvh, 24px)
    clamp(14px, 2.4dvh, 20px);

  text-align: left;
  line-height: 1.45;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 0 6px rgba(0,0,0,0.35);

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.message-window.staff{
  font-family: "anzu", sans-serif;
  font-size: clamp(18px, 3.4dvh, 25px);
  letter-spacing: 0.05em;
  color: #fff;
}

.message-window.user{
  font-family: system-ui, sans-serif;
  font-size: clamp(15px, 2.8dvh, 20px);
  letter-spacing: 0.1em;
  color: #ddd;
}

/* =========================
   右下入力UI
========================= */

.input-screen{
  position: absolute;
  inset: 0;
  z-index: 70;

  opacity: 0;
  visibility: hidden;

  transition: opacity 0.50s ease;
}

/* 表示 */
.input-screen.visible{
  opacity: 1;
  visibility: visible;
}

/*
  入力欄もゲーム画面幅の中に閉じ込める。
  右下配置は維持。
*/
.input-layer{
  position: absolute;

  left: 50%;
  right: auto;
  bottom: 12px;

  width: var(--stage-width);
  max-width: none;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  margin-left: 0;

  z-index: 80;
  pointer-events: auto;
  box-sizing: border-box;

  padding-left: calc(142px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 実際の入力欄の横幅 */
.dialog-input{
  flex: 0 1 480px;
  min-width: 0;
  height: 46px;

  padding: 0 14px;
  box-sizing: border-box;

  border: 1px solid rgba(120, 90, 60, 0.35);
  border-radius: 22px;

  background: #f6f1e7;
  color: #2b1b10;

  font-size: 16px;
  font-family: system-ui, sans-serif;

  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.dialog-input::placeholder{
  color: rgba(60, 40, 25, 0.55);
}

.dialog-send{
  flex: 0 0 50px;
  width: 50px;
  height: 50px;

  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.dialog-send img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;

  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  transition: transform 0.12s ease;
}

.dialog-send:active img{
  transform: scale(0.92);
}

.dialog-send:disabled{
  opacity: 0.4;
  cursor: default;
}

.dialog-send:disabled img{
  filter: grayscale(40%) brightness(0.9);
}

.event-screen{

  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 35;
}

.event-screen.visible{
  opacity: 1;
}

.event-screen .event{
  position: absolute;
  width: min(80vw, 420px);
  aspect-ratio: 1 / 1;
  object-fit: cover;

  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.14);

  opacity: 0;
  transition: opacity 0.6s ease;

  top: 50dvh;
  left: 50%;
  transform: translate(-50%, -66%);
}

.event-screen .event.visible{
  opacity: 1;
}

.call-screen{
  position: absolute;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.call-screen.visible{
  opacity: 1;
}

.dialog-call{
  position: absolute;

  left: calc(50% + var(--stage-half-width) - 16px - 112px);
  right: auto;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));

  width: 112px;
  height: 112px;

  border: none;
  background: none;
  padding: 0;
  cursor: pointer;

  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

.call-screen.visible .dialog-call{
  pointer-events: auto;
}

.dialog-call img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.12s ease;
}

.dialog-call:active img{
  transform: scale(0.92);
}

.dialog-call:disabled{
  opacity: 0.4;
  cursor: default;
}

.dialog-call:disabled img{
  filter: grayscale(40%) brightness(0.9);
}

.meal-screen{
  position: absolute;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.meal-screen.visible{
  opacity: 1;
}

.meal-button{
  position: absolute;

  width: 64px;
  height: 64px;

  border: none;
  background: none;
  padding: 0;
  cursor: pointer;

  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

.meal-screen.visible .meal-button{
  pointer-events: auto;
}

/*
  食事ボタンを中央ゲーム画面の左下へ固定。
  横長PCでも黒帯側に逃げない。
*/
.meal-udon{
  left: calc(50% - var(--stage-half-width) + 8px + env(safe-area-inset-left, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.meal-tea{
  left: calc(50% - var(--stage-half-width) + 74px + env(safe-area-inset-left, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.meal-button img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.12s ease;
}

.meal-button:active img{
  transform: scale(0.92);
}

.meal-button:disabled{
  opacity: 0.4;
  cursor: default;
}

.meal-button:disabled img{
  filter: grayscale(40%) brightness(0.9);
}