/* -------------------------------
　　　　　フォント指定
------------------------------- */
@font-face{
	font-family:'Shippori Mincho';
	src:url('../font/ShipporiMincho.woff') format('woff');
}

@font-face{
	font-family:'WebSubsetFont';
	src:url('../font/WebSubsetFont.woff') format('woff');
}


@font-face{
	font-family:'sorttmillgoudy';
	src:url('../font/SortsMillGoudy.woff') format('woff');
}

@font-face{
	font-family:'JosefinSlab';
	src:url('../font/JosefinSlab.woff') format('woff');
}

/* -------------------------------
　　　　　　骨組み
------------------------------- */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	color:#fff;
	font-size:12px;
	line-height:1.6;
	font-family:"WebSubsetFont","メイリオ",sans-serif;
	min-height:100vh;
	overflow-x:hidden;
	width:100%;
	position:relative;
}

body.wizard{
	background-image:linear-gradient(135deg,
	rgba(4,250,253,0.7) 0%,rgba(3,199,255,0.7) 40%,
	rgba(16,115,250,0.7) 60%,rgba(10,234,237, 0.7)100%),
	url(../images/star_2.jpg);
	background-repeat:repeat;
	background-attachment:fixed;
	background-size: auto;
	background-blend-mode:overlay;
}

body.cleric{
	background-image:linear-gradient(135deg,
	rgba(153,255,0,0.7) 0%,rgba(17,248,136,0.7) 40%,
	rgba(5,205,127,0.7) 60%,rgba(2,276,182, 0.7) 100%),
	url(../images/star_2.jpg);
	background-repeat:repeat;
	background-attachment:fixed;
	background-size: auto;
	background-blend-mode:overlay;
}

body.thief{
	background-image:linear-gradient(135deg,
	rgba(144,139,255,0.7) 0%,rgba(200,83,255,0.7) 40%,
	rgba(111,13,179,0.7) 60%,rgba(164,16,182, 0.7) 100%),
	url(../images/star_2.jpg);
	background-repeat:repeat;
	background-attachment:fixed;
	background-size: auto;
	background-blend-mode:overlay;
}

body.fighter{
	background-image:linear-gradient(135deg,rgba(248,216,24,0.7) 0%,rgba(248,80,0,0.7) 40%,rgba(208,0,0,0.7) 60%,rgba(136,0,0, 0.7) 100%),url(../images/star_2.jpg);
	background-repeat:repeat;
	background-attachment:fixed;
	background-size:100% 100%, auto;
	background-blend-mode:overlay;
}

#starry_sky{
	width:100%;
	height:100dvh;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	pointer-events: none;
	overflow:hidden;
}

.star{
	background-color:white;
	position:absolute;
	border-radius:50%;
	animation-name:star-twinkle;
	animation-iteration-count:infinite;
	transition:transform 0.4s ease-out; 
}

@keyframes star-twinkle{
	50%{
	transform: scale(0.2);   
}} 

.shooting-star{
	position:fixed;
	top:0;
	left:0;
	width:100px;
	height:2px;
	background:linear-gradient(-90deg, white, transparent);
	animation:shoot 8s infinite;
	opacity:0;
	pointer-events:none;
	z-index:10;
}

@keyframes shoot{
	0%{
	transform: translate(0,0) rotate(40deg); 
	opacity:0;}
	5%{ 
	opacity:1;}
	15%{ 
	transform:translateX(60vw) translateY(60vw) rotate(45deg); 
	opacity:0;}
	100% {
	opacity:0;}
}

.sparkle {
	position:absolute;
	width:1px;
	height:1px;
	background-color:rgba(255, 255, 255, 0.8);
	border-radius:50%;
	pointer-events:none;
	z-index:9999;
	box-shadow:0 0 3px 0.5px rgba(255, 255, 255, 0.6),
	0 0 6px var(--glow-color);
	transition:transform 0.5s ease-out,opacity 0.5s ease-out;
	opacity:0;
	transform: scale(0);
}

:root{
	--glow-color:rgba(170, 240, 248, 0.8);
}

#stardust-garden{
	position:relative;
	overflow:hidden;
	z-index:50;
	background:rgba(255, 255, 255, 0.04);
	

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

border:1px solid rgba(255, 255, 255, 0.1);
	margin:0 auto 35px;
	padding-bottom:50px;
	width:92%;
	max-width:340px;
	min-height:100vh;
	border-radius:8px;
	touch-action:pan-y;
}

/* -------------------------------
　　　　　　ヘッダー
------------------------------- */
.garden-title{
	font-family:"Shippori Mincho", serif;
	font-size:1.9rem;
	font-weight:700;
	letter-spacing:0.15em;
	text-shadow:0 0 8px rgba(97,222,250,0.7), 
	0 0 15px rgba(255,255,255,0.2);
	text-align:center;
	margin:25px 0 30px;
	animation:twinkle 4s infinite ease-in-out;
}

@keyframes twinkle{
	0%,
	100%{
		opacity:1;
		text-shadow:0 0 8px rgba(71,185,255,0.7);
	}
	50%{
		opacity:0.8;
		text-shadow:0 0 15px rgba(97,222,250,0.9);
}
}



/* -------------------------------
　　　　　　main
------------------------------- */

.panel-title{
	margin-top:35px;
	margin-bottom:20px;
	font-weight:1000;
	text-align:left;
	border-bottom:1px solid rgba(170, 240, 248, 0.2);
	padding:0 0 8px 10px;
	font-family:"Shippori Mincho", serif;
	font-size:1.5rem;
	letter-spacing:0.1em;
	background-color:#1a0f0a; 
	background:linear-gradient(to bottom,
	#cfb53b 0%,#fcf6ba 45%,#aa8954 50%,
	#ffecbb 55%,#8a6e2f 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
	filter:drop-shadow(0 2px 2px rgba(0,0,0,0.8))
	drop-shadow(0 0 5px rgba(212, 175, 55, 0.2));
}

.equip{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	margin:3px 8px;
	padding:10px;
	background:rgba(255, 255, 255, 0.05);
	border-radius:6px;
	gap:8px;
}

.equip h3,.equip h4{
	flex:1;
	margin:0;
	font-size:10px;
	line-height:1.4;
	word-break:break-all;
	text-align:left;
}

.equip h3 span{
	display:inline-block;
	padding:0;
	margin-right:2px;
	font-size:9px;
	color:#fff;
	font-weight:normal;
	font-family:"sorttmillgoudy","WebSubsetFont","メイリオ",sans-serif;
}
.equip h4{
	border-left:1px dashed rgba(255, 255, 255, 0.2);
	padding-left:8px;
}

.equip small{
	display:block;
	font-size:8px;
	color:rgba(255, 255, 255, 0.6);
	font-weight:normal;
	margin-top:2px;
	font-family:"JosefinSlab","WebSubsetFont","メイリオ",sans-serif;
}

.not{
	opacity:0.6;
}

p{
	margin:5px 10px;
	text-indent:-1.5em;
	padding-left:1.5em;
}

/* -------------------------------
　　　　　　footer
------------------------------- */

#garden-footer{
	text-align:center;
	padding:40px 0 20px;
	font-size:0.7rem;
	color:rgba(255, 255, 255, 0.2);
	letter-spacing:0.15em;
	font-family:"sorttmillgoudy","WebSubsetFont",sans-serif;
	white-space:nowrap;
}

#garden-footer::before{
 	content:'ーーー';
	display:block;
	margin-bottom:10px;
	opacity: 0.3;
}