body {
margin: 0;
background: #0b3d2e;

justify-content: center;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
}

#game {
display: flex;
width: 768px;
height: 1280px;
background: #1f5f4a;
display: flex;
flex-direction: column;
color: white;
margin-left: auto;
margin-right: auto;
clear: both;
}

.life {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.life img{
width:40px;
height:40px;
object-fit:contain;
}

.hand {
height: 260px;
position: relative;
}

.card {
width: 132px;
height: 198px;
border-radius: 14px;
cursor: pointer;
position: absolute;
transition:
transform 0.4s,
opacity 0.4s;

background-size: cover;
background-position: center;
background-repeat: no-repeat;

box-shadow:
0 10px 24px rgba(0,0,0,0.35);
}

.pos0 { left: 2%; }
.pos1 { left: 21.5%; }
.pos2 { left: 41%; }
.pos3 { left: 60.5%; }
.pos4 { left: 80%; }

.back {
background-image: url("img/card.jpg");
}

.open {
}

.flip {
animation: flip 0.4s;
}

@keyframes flip {
0% { transform: rotateY(0); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(0); }
}

.from-top { transform: translateY(-260px); opacity:0; }
.from-bottom { transform: translateY(260px); opacity:0; }
.show { transform: translateY(0); opacity:1; }

#controls{
position:absolute;
left:50%;
bottom:320px;
transform:translateX(-50%);

width:520px;
height:90px;

z-index:20;
}


#center {
flex: 1;
text-align: center;
}

#game {
position: relative;
overflow: hidden;
}

.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: opacity 1s ease;
z-index: 0;
}

#bgimage1 { z-index: 0; }
#bgimage2 { z-index: 1; }

.hidden {
opacity: 0;
}

.show-bg {
opacity: 1;
}

#game > *:not(.bg):not(#cutin) {
position: relative;
z-index: 2;
}

#cutin{

position:absolute;

top:32%;
left:50%;

transform:
translateX(-50%)
scale(0.9);

width:78%;
max-width:620px;

padding:28px 36px;

font-size:28px;
line-height:1.6;
color:white;

background:
rgba(45,55,90,0.35);

backdrop-filter:
blur(14px);

-webkit-backdrop-filter:
blur(14px);

border:
1px solid rgba(255,255,255,0.15);

border-radius:28px;

box-shadow:
0 10px 30px rgba(0,0,0,0.25);

text-shadow:
0 0 12px rgba(0,0,0,.8);

opacity:0;
z-index:999;

transition:all .4s ease;

pointer-events:none;
text-align:center;
}

#cutin.show{
opacity:1;

transform:
translateX(-50%)
translateY(-8px)
scale(1);
}

/* ===== レイアウト調整 ===== */

#cpu-life{
position:absolute;
top:230px;
width:100%;
z-index:5;
}

#cpu-hand{
position:absolute;
top:-40px;
left:0;
width:100%;
}

#player-hand{
position:absolute;
bottom:-100px;
left:0;
width:100%;
}

#player-life{
position:absolute;
bottom:-90px;
width:100%;
z-index:5;
}

#center{
position:absolute;
top:30%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
z-index:100;
pointer-events:none;
}

#result-window{

display:none;

width:560px;

margin:30px auto 0;

padding:30px;

border-radius:28px;

background:
rgba(20,30,60,0.55);

backdrop-filter:blur(12px);

border:
1px solid rgba(255,255,255,.15);

box-shadow:
0 10px 40px rgba(0,0,0,.45);

}

#result-window.show{
display:block;
}

#result-title{

font-size:36px;
font-weight:bold;

letter-spacing:4px;

margin-bottom:20px;

color:#ffd86b;

text-shadow:
0 0 12px rgba(255,216,107,.5);

}

#player-role,
#cpu-role{

font-size:28px;

margin:12px 0;
}

#battle-result{

margin-top:24px;

font-size:42px;
font-weight:bold;

text-shadow:
0 0 15px rgba(255,255,255,.4);
}

.win{
color:#7ee8ff;
}

.lose{
color:#ff9090;
}

.draw{
color:#ffffff;
}

#result-window.show{
display:block;
}

#result{

font-size:28px;
line-height:1.6;

}

#route-window{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

display:none;

flex-direction:column;

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

gap:40px;

background:
rgba(10,20,40,.75);

backdrop-filter:blur(10px);

z-index:9999;
}

#route-title{

font-size:42px;
font-weight:bold;

color:white;

text-shadow:
0 0 15px rgba(255,255,255,.3);
}

.route-btn{

width:380px;
height:82px;

font-size:30px;
font-weight:700;

color:white;

background:
rgba(255,105,105,.32);

backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

border:
1px solid rgba(255,255,255,.25);

border-radius:24px;

box-shadow:
0 8px 24px rgba(0,0,0,.25);

text-shadow:
0 0 8px rgba(0,0,0,.7);
}

.route-btn:active{

box-shadow:
0 6px 16px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.9);
}

.fade-ui{
opacity:0;
transition:opacity .8s ease;
pointer-events:none;
}

.btn-clear{
min-width:380px;
height:90px;
font-size:30px;
}

#next-stage-tap{

position:absolute!important;

top:50%;
left:50%;

transform:translate(-50%,-50%);

font-size:44px;
color:white;
font-weight:900;

text-shadow:
/* 濃紺の縁 */
2px 0 0 #203050,
-2px 0 0 #203050,
0 2px 0 #203050,
0 -2px 0 #203050,

2px 2px 0 #203050,
-2px 2px 0 #203050,
2px -2px 0 #203050,
-2px -2px 0 #203050,

/* 発光 */
0 0 12px rgba(255,255,255,.6);

opacity:1;

display:none;

z-index:10000;

animation:
tapBlink 2.2s ease-in-out infinite;
}

@keyframes tapBlink{

0%{
opacity:.15;
}

50%{
opacity:1;
}

100%{
opacity:.15;
}
}

/* =========================
タイトル画面
========================= */

#title-screen{

position:absolute!important;
inset:0;

overflow:hidden;

z-index:10000;
}

/* 背景画像 */

#title-bg{

position:absolute;
inset:0;

background:#333333;
background-image:
url("img/title_bg.png");

background-size:cover;
background-position:center;

z-index:0;
}


/* ロゴ */

#title-logo{

position:absolute;

top:80px;
left:50%;

transform:translateX(-50%);

z-index:2;
}

#title-logo img{

display:block;

width:700px;
height:auto;

filter:
drop-shadow(0 0 10px rgba(0,0,0,.5))
drop-shadow(0 0 30px rgba(0,0,0,.4));
}

/* ボタン群 */

#title-menu{

position:absolute;

left:50%;
top:700px;

transform:translateX(-50%);

display:flex;
flex-direction:column;

gap:38px;

z-index:2;
}

/* タイトル専用ボタン */

.title-btn{

width:420px;
height:90px;

border:none;
border-radius:22px;

color:white;
margin-bottom:90px;

font-size:32px;
font-weight:bold;

background:
linear-gradient(
180deg,
#7cb8ff,
#4b77d1
);

box-shadow:
0 8px 24px rgba(0,0,0,.35),
0 0 20px rgba(100,150,255,.35);

cursor:pointer;
}

/* =========================
ギャラリー画面
========================= */

#gallery-screen{

position:absolute!important;
inset:0;

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

background:#3399ff;

color:white;
font-size:64px;
font-weight:bold;

z-index:10001;
}

#title-screen,
#gallery-screen{
transition:
opacity .6s ease;
}

.screen-hide{
opacity:0;
pointer-events:none;
}

#gallery-screen {
  position: absolute !important;
  inset: 0;
  background: #0d2a55;
background-image:
url("img/gallery_bg.png");
  overflow: hidden;
}

/* 共通スロット */
.gallery-slot {
  position: absolute;
  width: 462px;
  height: 768px;
  transform: translate(-50%, -50%);
}

/* 画像 */
.gallery-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 軽い枠線 */
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  border-radius: 10px;
}

.protect-image{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    object-fit:cover;

    pointer-events:auto;

    user-select:none;
    -webkit-user-drag:none;

    z-index:10!important;
}

/* 中央 */
.center {
  left: 50%;
  top: 50%;
  z-index: 5;
}

/* 上下左右（見切れ配置） */
.up {
  left: 50%;
  top: -13%;
  opacity: 0.75;
  transform: translate(-50%, -50%)
}

.down {
  left: 50%;
  top: 113%;
  opacity: 0.75;
  transform: translate(-50%, -50%)
}

.left {
  left: -15%;
  top: 50%;
  opacity: 0.75;
  transform: translate(-50%, -50%)
}

.right {
  left: 115%;
  top: 50%;
  opacity: 0.75;
  transform: translate(-50%, -50%)
}

.up-left {
  left: -15%;
  top: -13%;
  opacity: 0.6;
  transform: translate(-50%, -50%);
}

.up-right {
  left: 115%;
  top: -13%;
  opacity: 0.6;
  transform: translate(-50%, -50%);
}

.down-left {
  left: -15%;
  top: 113%;
  opacity: 0.6;
  transform: translate(-50%, -50%);
}

.down-right {
  left: 115%;
  top: 113%;
  opacity: 0.6;
  transform: translate(-50%, -50%);
}

/* =========================
ギャラリー矢印
========================= */

.arrow{

position:absolute;

z-index:20;

cursor:pointer;

user-select:none;

width:96px;
height:96px;

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

transition:
transform .12s ease,
filter .12s ease,
opacity .12s ease;
}

.arrow img{

width:100%;
height:100%;

object-fit:contain;

pointer-events:none;

filter:
drop-shadow(0 6px 12px rgba(0,0,0,.55));
}

/* 上 */
.up-arrow{

top:140px;
left:50%;

transform:translateX(-50%);
}

/* 下 */
.down-arrow{

bottom:140px;
left:50%;

transform:translateX(-50%);
}

/* 左 */
.left-arrow{

left:35px;
top:50%;

transform:translateY(-50%);
}

/* 右 */
.right-arrow{

right:35px;
top:50%;

transform:translateY(-50%);
}

/* 再開ボタン　*/
#gallery-back-btn {
  position: absolute;
  left: 50%;
  top: 73%;
  transform: translate(-50%, -50%);
  z-index: 30;
}

/* =========================
共通ボタン
========================= */

button {

font-family: "Zen Maru Gothic", sans-serif;

font-weight: 700;

border: none;

cursor: pointer;

transition:
transform .12s ease,
filter .12s ease,
box-shadow .12s ease;

user-select:none;
}

button:hover{

filter:brightness(1.04);
}

button:active{

filter:brightness(.97);
}

/* =========================
メインボタン
交換・次のゲーム
========================= */

.btn-main{

position:absolute;

left:50%;
transform:translateX(-50%);

min-width:320px;
height:88px;

font-size:34px;
font-weight:900;

letter-spacing:1px;

color:#6d4d4d;

border-radius:28px;

background:

linear-gradient(
180deg,
#fffdf8 0%,
#fceee6 45%,
#f2d8cf 100%
);

border:
2px solid
rgba(220,180,150,.9);

box-shadow:

0 10px 24px rgba(0,0,0,.25),

inset
0 2px 0
rgba(255,255,255,.9),

inset
0 -2px 0
rgba(210,170,150,.5);

text-shadow:

0 1px 0 #ffffff;
}

.btn-main:hover{

box-shadow:

0 12px 28px rgba(0,0,0,.3),

inset
0 2px 0
rgba(255,255,255,.95),

inset
0 -2px 0
rgba(210,170,150,.6);
}

/* =========================
サブボタン
降りる
========================= */

.btn-sub{

position:absolute;

left:50%;
top:12px;

transform:translateX(190px);

width:170px;
height:68px;

font-size:24px;
font-weight:700;

color:#6a6270;

border-radius:20px;

background:

linear-gradient(
180deg,
#f5f4f7,
#d9d7df
);

border:
2px solid
rgba(180,180,190,.8);

box-shadow:

0 6px 16px rgba(0,0,0,.2),

inset
0 1px 0
rgba(255,255,255,.8);
}

/* =========================
ステージクリア
========================= */

.btn-clear{

min-width:420px;
height:92px;

font-size:34px;

background:

linear-gradient(
180deg,
#fff9dc,
#ffe8a6
);

border:
2px solid
#d8b04c;

color:#6f5420;

text-shadow:
0 1px 0 #fff;
}

/* =========================
タイトル画面ボタン
========================= */

.title-btn{

width:430px;
height:94px;

border:none;

border-radius:32px;

font-size:34px;
font-weight:900;

letter-spacing:1px;

color:#6b4c4c;

background:

linear-gradient(
180deg,
#fffdf8 0%,
#faece4 50%,
#efcfc6 100%
);

border:
2px solid
rgba(220,180,150,.9);

box-shadow:

0 12px 28px rgba(0,0,0,.25),

inset
0 2px 0
rgba(255,255,255,.95),

inset
0 -3px 0
rgba(210,170,150,.55),

0 0 20px rgba(255,220,220,.4);

text-shadow:

0 1px 0 #fff;

cursor:pointer;

transition:
all .15s ease;

margin-bottom:35px;
}

.title-btn:hover{

transform:scale(1.02);

box-shadow:

0 16px 34px rgba(0,0,0,.3),

inset
0 2px 0
rgba(255,255,255,.95),

inset
0 -3px 0
rgba(210,170,150,.55),

0 0 30px rgba(255,220,220,.6);
}

.title-btn:active{

box-shadow:

0 6px 16px rgba(0,0,0,.25),

inset
0 2px 0
rgba(255,255,255,.9);
}

/* =========================
次のゲーム
========================= */

.btn-next{

position:absolute;

left:50%;
transform:translateX(-50%);

min-width:360px;
height:88px;

font-size:34px;
font-weight:900;

letter-spacing:1px;

color:#4d5f78;

border-radius:28px;

background:

linear-gradient(
180deg,
#f7fbff 0%,
#dfeeff 45%,
#bfd8f7 100%
);

border:
2px solid
rgba(130,170,220,.9);

box-shadow:

0 10px 24px rgba(0,0,0,.25),

inset
0 2px 0
rgba(255,255,255,.95),

inset
0 -2px 0
rgba(120,160,210,.5);

text-shadow:
0 1px 0 #ffffff;
}

.btn-next:hover{

box-shadow:

0 12px 28px rgba(0,0,0,.3),

inset
0 2px 0
rgba(255,255,255,.95),

inset
0 -2px 0
rgba(120,160,210,.6);
}

#ending-screen{

position:absolute!important;
inset:0;

display:none;

flex-direction:column;
justify-content:center;
align-items:center;

background:
linear-gradient(
180deg,
#030303,
#101010
);

z-index:30000;

color:white;
}

#ending-title{

color: #ff6666;
font-size:96px;
font-weight:900;

letter-spacing:4px;

margin-top:0px;
margin-bottom:70px;

text-shadow: 0 0 15px rgba(256, 256, 256, 1);
}

#ending-text{

color: #333333;
width:620px;
font-weight:700;

font-size:30px;
line-height:1.8;

text-align:left;

margin-bottom:80px;
text-shadow: 0 0 10px rgba(256, 256, 256, 1);
}

#warning-screen{

position:absolute!important;
inset:0;

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

background:
linear-gradient(
180deg,
#071018,
#111827
);

z-index:25000!important;

font-size:26px;
line-height:1.9;

color:white;
text-align:center;
}

#warning-content{

width:620px;

padding:50px;

border-radius:32px;

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,255,255,.12);

backdrop-filter:blur(12px);
}

#warning-tap{

margin-top:80px;

font-size:36px;
font-weight:900;

animation:tapBlink 2s infinite;
}

#ending-links{

margin-top:0;

display:flex;
flex-direction:column;

gap:16px;

align-items:center;
}

#ending-links a{

display:block;

transition:
transform .15s ease,
filter .15s ease;
}

#ending-links a:hover{

transform:scale(1.02);

filter:brightness(1.05);
}

#ending-links a:active{

transform:scale(0.98);
}

#ending-links img{

width:360px;
margin-bottom:20px;

box-shadow:
0 8px 24px rgba(0,0,0,.4);
}

#ending-other-games{

margin-top:400px;
margin-bottom:40px;

font-size:34px;
font-weight:700;

letter-spacing:2px;

color:#cc5533;
text-shadow: 0 0 10px rgba(256, 256, 256, 1);

}

#ending-tap{

font-size:34px;
font-weight:700;

color:rgba(255,255,255,.9);

text-shadow: 0 0 10px rgba(0, 0, 0, 1);
}

/* =========================
GAME OVER
========================= */

#gameover-overlay{

position:absolute!important;
inset:0;

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

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

backdrop-filter:blur(4px);

z-index:25000;
}

#gameover-window{

width:620px;

padding:50px;

border-radius:36px;

background:
rgba(20,30,60,.92);

border:
1px solid rgba(255,255,255,.15);

box-shadow:
0 25px 60px rgba(0,0,0,.6);

text-align:center;

transform:
translateY(-500px);

opacity:0;

transition:
transform .7s cubic-bezier(.18,.89,.32,1.28),
opacity .5s;
}

#gameover-overlay.show
#gameover-window{

transform:
translateY(0);

opacity:1;
}

#gameover-title{

font-size:72px;
font-weight:900;

color:#ff9090;

margin-bottom:30px;

text-shadow:
0 0 20px rgba(255,100,100,.5);
}

#gameover-text{

font-size:30px;

margin-bottom:50px;
}

#gameover-buttons{

display:flex;
flex-direction:column;

gap:25px;

align-items:center;
}

#ad-overlay {
  position: fixed!important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999!important;
}

#ad-container {
  width: 800px;
  height: 1200px;
  background-color: black;
  position: relative!important;
}

#ad-message {
  color: white;
  text-align: center;
  font-size: 24px;
}

#ad-message2 {
  color: white;
  text-align: center;
  font-size: 24px;
}

/* Outstream広告 */

#outstream-overlay {
  position: fixed!important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999!important;
}

#outstream-container {
  width: 800px;
  height: 1200px;
  background-color: black;
  position: relative!important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#outstream-message,
#outstream-message2 {
  color: white;
  text-align: center;
  font-size: 24px;
  padding: 10px;
}

#outstream-ad-slot {
  flex-grow: 1;
}