:root{
  --bg:#071227;
  --text:rgba(245,248,255,.98);
  --muted:rgba(245,248,255,.78);
  --line:rgba(255,255,255,.16);
  --card:rgba(9,18,35,.76);
  --card2:rgba(255,255,255,.08);
  --primary:#37d699;
  --primary2:#25b47d;
  --shadow:0 18px 55px rgba(0,0,0,.38);
  --font:ui-rounded, system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  overflow:hidden;
}

button,input{ font:inherit; }
button{ cursor:pointer; }
img{ display:block; max-width:100%; }

.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.bgScene{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.34)),
    radial-gradient(circle at 50% 14%, rgba(67,103,200,.16), transparent 34%),
    url("./img/background.jpg") center/cover no-repeat;
}

.appShell{
  position:relative;
  z-index:1;
  height:100%;
  display:grid;
  grid-template-rows:1fr auto;
  gap:10px;
  padding:18px 24px 16px;
}

.appMain{
  min-height:0;
  position:relative;
}

.appFooter{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  pointer-events:none;
  padding-bottom:2px;
}

.screen{
  display:none;
  width:100%;
  height:100%;
}

.screen.isActive{
  display:grid;
}

/* ---------------------------
   動物選択画面
---------------------------- */

#screenSelect{
  align-items:stretch;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
}

#screenGame{
  align-items:start;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
}

#screenResult{
  align-items:start;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
}

.titleScreen{
  width:100%;
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:20px;
  align-items:start;
  padding-top:12px;
  padding-bottom:24px;
  position:relative;
}

.selectLogoWrap{
  position:relative;
  z-index:3;
  width:min(627px, 46vw);
  margin:0 auto;
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.selectLogoTop{
  width:100%;
  aspect-ratio:1254 / 571;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.22));
}

.animalRowWide{
  width:100%;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  align-items:end;
  gap:28px;
  padding:0 14px;
}

.pickTile{
  border:0;
  background:transparent;
  color:inherit;
  display:grid;
  justify-items:center;
  align-content:end;
  gap:10px;
  padding:0;
  transition:transform .15s ease;
}

.pickTile:hover{
  transform:translateY(-4px);
}

.pickTile:focus-visible{
  outline:none;
}

.pickTile:focus-visible .tileTag{
  border-color:rgba(55,214,153,.85);
  box-shadow:0 0 0 4px rgba(55,214,153,.16), 0 12px 28px rgba(0,0,0,.20);
}

.tileFrame{
  width:100%;
  height:clamp(250px, 38vh, 470px);
  display:grid;
  place-items:end center;
  overflow:visible;
}

.tileImg{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.34));
}

.tileTag{
  min-width:170px;
  padding:12px 26px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.97);
  color:#1a2332;
  text-align:center;
  font-weight:1000;
  font-size:30px;
  letter-spacing:.03em;
  box-shadow:0 12px 28px rgba(0,0,0,.20);
  position:relative;
  z-index:5;
}

.titlePrompt{
  width:100%;
  padding:22px 24px;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  color:#1a2332;
  text-align:center;
  font-size:clamp(34px, 3.3vw, 62px);
  font-weight:1000;
  letter-spacing:.18em;
  box-shadow:0 16px 40px rgba(0,0,0,.20);
}

/* ---------------------------
   共通カード
---------------------------- */

.card{
  width:min(1200px, 100%);
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:32px;
  background:linear-gradient(180deg, rgba(9,18,35,.84), rgba(9,18,35,.64));
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
}

.gameCard,
.resultCard{
  height:min(100%, 860px);
  padding:22px;
}

.gameCard{
  margin-bottom:8px;
  height:auto;
  min-height:min(100%, 860px);
}

/* ---------------------------
   えさ選択画面
---------------------------- */

.gameLayout{
  height:100%;
  display:grid;
  grid-template-columns:minmax(260px, 360px) minmax(0,1fr);
  gap:22px;
}

.gameAnimalCol,
.gameActionCol,
.resultAnimalPanel,
.resultTextPanel,
.resultImagePanel{
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--card2);
}

.gameAnimalCol{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:18px;
  padding:18px;
}

.begBox{
  padding:14px 16px;
  border-radius:22px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}

.begLabel{
  font-size:12px;
  letter-spacing:.12em;
  font-weight:900;
  color:var(--muted);
}

.begLine{
  margin-top:8px;
  font-size:24px;
  line-height:1.5;
  font-weight:900;
}

.animalShow{
  min-height:0;
  display:grid;
  place-items:center;
}

.animalShow img{
  width:min(100%, 320px);
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
}

.gameActionCol{
  min-height:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:18px;
  padding:22px;
}

.panelTitle{
  margin:0;
  font-size:30px;
  font-weight:900;
}

.foodGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  align-content:start;
}

.foodBtn,
.btn{
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:rgba(255,255,255,.09);
  color:var(--text);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}

.foodBtn:hover,
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.3);
}

.foodBtn{
  min-height:168px;
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center;
  align-content:stretch;
  gap:4px;
  padding:10px 12px 12px;
  text-align:center;
  font-size:20px;
  font-weight:900;
}

.foodBtnIcon{
  width:min(46%, 152px);
  max-width:100%;
  height:auto;
  max-height:112px;
  object-fit:contain;
  align-self:center;
}

.freeBox{
  display:grid;
  gap:14px;
}

.input{
  width:100%;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  color:#162033;
  padding:16px 18px;
  font-size:18px;
}

.freeActions,
.resultActions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.freeActions{
  justify-content:flex-end;
}

#btnBackToSelect{
  order:1;
}

#btnSend{
  order:2;
}

.btn{
  min-height:52px;
  padding:12px 18px;
  font-weight:900;
}

.btn.primary{
  background:linear-gradient(180deg, var(--primary), var(--primary2));
  color:#072215;
  border:none;
}

.btn.ghost{
  background:transparent;
}

/* ---------------------------
   結果画面
---------------------------- */

.resultCard{
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:18px;
}

.resultHeader{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:0;
}

.resultHeaderIcon,
.resultEmoji{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  font-size:34px;
  border-radius:20px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
}

.resultTitle{
  font-size:32px;
  font-weight:900;
}

.resultSub{
  color:var(--muted);
}

.resultBody{
  min-height:0;
  overflow:auto;
  padding-right:4px;
  display:grid;
  grid-template-columns:minmax(340px, 1.1fr) minmax(280px, .9fr);
  grid-template-rows:minmax(180px, auto) minmax(480px, auto);
  grid-template-areas:
    "image text"
    "image animal";
  gap:18px;
  align-items:start;
}

.resultLeft,
.resultRight{
  min-height:0;
  display:contents;
}

.resultAnimalPanel{
  grid-area:animal;
  height:100%;
  min-height:700px;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  grid-template-rows:auto minmax(500px, 1fr);
  grid-template-areas:
    "emoji badges"
    "image image";
  gap:14px;
  padding:18px;
  align-content:stretch;
  overflow:visible;
}

.resultAnimalPic{
  grid-area:image;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  transform:translateY(-12px);
}

.resultAnimalPic img{
  width:min(100%, 540px);
  max-height:520px;
  object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
}

.resultBadges{
  grid-area:badges;
  display:grid;
  gap:10px;
  align-self:start;
  align-content:start;
  transform:none;
}

.resultAnimalPanel > .resultEmoji{
  grid-area:emoji;
  align-self:start;
}

.badge{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  font-weight:800;
}

.badgeFoodIcon{
  width:24px;
  height:24px;
  object-fit:contain;
}

.badgeMood{
  justify-content:center;
}

.resultRight{
  display:contents;
}

.resultTextPanel,
.resultImagePanel{
  min-height:0;
  padding:18px;
}

.resultImagePanel{
  grid-area:image;
}

.resultTextPanel{
  grid-area:text;
  align-self:start;
}

.resultSectionTitle{
  margin-bottom:12px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--muted);
}

.resultText{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:inherit;
  font-size:28px;
  line-height:1.7;
  font-weight:900;
}

.resultImagePanel{
  display:grid;
  grid-template-rows:auto auto 1fr;
}

.resultImagePlaceholder{
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  min-height:220px;
  border-radius:22px;
  border:1px dashed rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  text-align:center;
  padding:16px;
}

.phTitle{ font-size:22px; font-weight:900; }
.phSub{ color:var(--muted); }

.resultImage{
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:contain;
  border-radius:22px;
  background:rgba(255,255,255,.06);
}

.resultActions{
  position:relative;
  z-index:3;
  justify-content:flex-end;
  align-items:center;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(9,18,35,0), rgba(9,18,35,.32));
  flex-shrink:0;
}

.resultActions .btn{
  flex:0 0 auto;
}

.isHidden{ display:none !important; }

/* ---------------------------
   ローディング・トースト・モーダル
---------------------------- */

.loadingOverlay{
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  place-items:center;
  background:rgba(5,10,20,.5);
  backdrop-filter:blur(6px);
}

.loadingOverlay.show{
  display:grid;
}

.loadingCard{
  width:min(360px, calc(100vw - 32px));
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(9,18,35,.92), rgba(9,18,35,.78));
  text-align:center;
}

.loadingAnimal img{
  width:180px;
  height:180px;
  object-fit:contain;
  margin:0 auto 8px;
}

.loadingText strong{ font-size:30px; }
.loadingText p{ margin:10px 0 0; color:var(--muted); }

.bob{
  animation:bob 1s ease-in-out infinite alternate;
}

@keyframes bob{
  from{ transform:translateY(0); }
  to{ transform:translateY(-8px); }
}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(120px);
  z-index:25;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(92vw, 760px);
  padding:12px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(9,18,35,.94);
  box-shadow:var(--shadow);
  opacity:0;
  transition:all .2s ease;
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.toast.isError{
  border-color:rgba(255,130,130,.4);
}

.toastClose{
  border:0;
  background:transparent;
  color:inherit;
  font-size:24px;
}

.imgModal{
  position:fixed;
  inset:0;
  z-index:30;
}

.imgModalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
}

.imgModalPanel{
  position:relative;
  z-index:1;
  width:min(900px, calc(100vw - 28px));
  height:min(900px, calc(100vh - 28px));
  margin:14px auto;
  padding:42px 16px 16px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(9,18,35,.96);
}

.imgModalImg{
  width:100%;
  height:100%;
  object-fit:contain;
}

.imgModalClose{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-size:24px;
}

/* ---------------------------
   レスポンシブ
---------------------------- */

@media (max-width: 1400px){
  .titleScreen{
    padding-top:10px;
  }

  .selectLogoTop{
    width:100%;
  }

  .tileFrame{
    height:clamp(220px, 34vh, 390px);
  }

  .tileTag{
    font-size:24px;
  }

  .titlePrompt{
    font-size:clamp(28px, 3vw, 48px);
  }
}

@media (max-width: 1100px){
  .resultActions{
    justify-content:center;
  }
}

@media (max-width: 980px){
  body{
    overflow:auto;
  }

  .appShell{
    height:auto;
    min-height:100%;
  }

  .titleScreen{
    height:auto;
    padding-top:8px;
    padding-bottom:24px;
    grid-template-rows:auto auto auto;
    align-items:start;
  }

  .selectLogoWrap{
    width:min(540px, 70vw);
  }

  .selectLogoTop{
    width:100%;
  }

  .animalRowWide,
  .gameLayout,
  .resultBody{
    grid-template-columns:1fr;
  }

  .resultBody{
    grid-template-areas:
      "image"
      "text"
      "animal";
  }

  .animalRowWide{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px 20px;
    padding:0 6px;
  }

  .pickTile{
    width:100%;
  }

  .tileFrame{
    height:clamp(180px, 28vh, 280px);
  }

  .tileTag{
    min-width:120px;
    font-size:22px;
  }

  .gameCard,
  .resultCard{
    height:auto;
  }

  .foodBtn{
    min-height:160px;
    grid-template-rows:1fr auto;
    gap:4px;
    padding:10px 12px 12px;
  }

  .foodBtnIcon{
    width:min(42%, 136px);
    max-height:100px;
  }

  .resultCard{
    overflow:visible;
  }

  .resultBody{
    overflow:visible;
    padding-right:0;
  }

  .resultRight{
    grid-template-rows:auto auto;
  }

  .resultText{
    font-size:24px;
  }

  .resultActions{
    justify-content:center;
  }
}

@media (max-width: 640px){
  .appShell{
    padding:12px;
  }

  .titleScreen{
    padding-top:6px;
    padding-bottom:18px;
    gap:14px;
  }

  .selectLogoWrap{
    width:min(430px, 78vw);
  }

  .selectLogoTop{
    width:100%;
  }

  .animalRowWide{
    gap:14px 12px;
  }

  .tileFrame{
    height:clamp(140px, 22vh, 220px);
  }

  .tileTag{
    min-width:110px;
    padding:9px 12px;
    font-size:16px;
  }

  .titlePrompt{
    padding:14px 10px;
    font-size:clamp(18px, 5.4vw, 28px);
    letter-spacing:.08em;
  }

  .foodGrid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .foodBtn{
    min-height:132px;
    font-size:16px;
    gap:4px;
    padding:8px 8px 10px;
    grid-template-rows:1fr auto;
  }

  .foodBtnIcon{
    width:min(54%, 92px);
    max-height:72px;
  }

  .gameCard,
  .resultCard{
    padding:14px;
  }

  .panelTitle,
  .resultTitle{
    font-size:24px;
  }

  .resultText{
    font-size:20px;
  }

  .btn,
  .input{
    font-size:16px;
  }

  .resultActions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .freeActions{
    justify-content:stretch;
  }

  .resultActions .btn{
    width:100%;
  }
}