@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libertinus+Sans:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Klee+One&display=swap');

@font-face {
  font-family: "ディスコ";
  src: url(https://dl.dropboxusercontent.com/scl/fi/it6ouxxwg52x7q6dillu6/Social-Media-Circled.otf?rlkey=445ts4q801cw9prjm4tao99tp&st=kfi3wvdn&)
  format('opentype');
}

@font-face{
font-family:"タコ";
src:url(https://dl.dropboxusercontent.com/scl/fi/q3e009k65jute1gzo0v82/Sea-Life.otf?rlkey=10l08v7ji0ra4eont9dnev9te&st=3caqd18f&)
format('opentype');
}

@font-face{
font-family:"猫";
src:url(https://dl.dropboxusercontent.com/scl/fi/r46q7ea930jrncy1to8ho/kitty-cats-tfb.woff2?rlkey=ajbljk8kr2tnku1h8kormxw3z&e=1&st=stm4g256&)
format('woff2');
}

@font-face{
font-family:"タバコ";
src:url(https://dl.dropboxusercontent.com/scl/fi/1uhvlipswpia76fpsgd6z/Smoking.otf?rlkey=9jyeqlknxdj0mhsmpd2vnehcz&st=pqzps9jf&)
format('opentype');
}

@font-face{
font-family:"宇宙";
src:url(https://dl.dropboxusercontent.com/scl/fi/chs175l3iz2ltnc4d0pnf/Space.otf?rlkey=e0dg65kfzqe4u2e2kx5sx91jc&st=avevh3vj&)
format('opentype');
}

@font-face{
font-family:"あずき";
src:url(https://dl.dropboxusercontent.com/scl/fi/ruc35sv05kj05mx3zldk0/azuki.otf?rlkey=cc0wz712j7ewlei9638yvbf73&st=iqpodndd&)
format('opentype');
}

@font-face{
font-family:"剣";
src:url(https://dl.dropboxusercontent.com/scl/fi/scl/nj4w1133sxq60xwevlvjh/Ancient-Weapons.otf?rlkey=m1hv2kae5zq5kvpp9wv9juvus&st=oo4f8nbq&)
format('opentype');
}

@font-face{
font-family:"ハート";
src:url(https://dl.dropboxusercontent.com/scl/fi/scl/5cjv3dl8x09imogs5vtop/EmojiFont.otf?rlkey=z1yn0w2bpzv1krrq7omis9hps&st=kz89gbh3)
format('opentype');
}


*{
  font-family: 'DotGothic16', sans-serif;
  color: #fff;
}


/* 全体背景と基本スタイル */
body {
  font-family: 'DotGothic16', sans-serif;
  margin: 0;
  padding: 0; /* auto は無効なので修正 */
  background: linear-gradient(to bottom, #051637, #1c2c52 );
  background-attachment: fixed;
  background-size: cover;
  overflow-x: hidden;
  font-color: #fff;
  font-size: 0.7em;
  text-align: center;
  position: relative;
  min-height: 100vh;
  background:
    /* 遠い星（小さく多い） */
    radial-gradient(0.8px 0.8px at 10% 20%, #fff, transparent),
    radial-gradient(0.8px 0.8px at 30% 70%, #fff, transparent),
    radial-gradient(0.8px 0.8px at 50% 40%, #fff, transparent),

    /* 近い星（少し大きい） */
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 80% 60%, #fff, transparent),

    linear-gradient(to bottom, #051637, #1c2c52);

}

html body {
  font-family: 'DotGothic16', sans-serif !important;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 2s infinite;
  z-index: 0;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* パッケージ全体 */
.pbox {
  background: linear-gradient(to bottom, rgba(0, 31, 77, 0.85), rgba(75, 0, 95, 0.85));
  width: 300px;
  margin: auto;
  padding: 10px 20px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 20px #A590AF ;
  font-color: #fff;
}

/* 数字サークル */
nop {
  font-family: "宇宙";
  font-size: 15em;
  margin: 20px 0;
  color: #fff;
}

/* 警告文 */
wning {
  color: #fff;
  font-size: 1.2em;
  line-height: 1.4;
  padding: 6px 8px;
  text-align: left;
font-family: "ＭＳ Ｐ明朝" , serif;
0 20px #A590AF33 ;
  text-align: left;
}

/*ディスコ佐伯アイコン*/
sicon {
  top: 0;
  left: 0;
  margin: 0 auto;
  font-family: ディスコ;
  font-size: 1.8em;
  color: #8c4664;
  text-align: left;
  padding: 0 0 0 20px;
}

/*ディスコ用名前*/
nmp {
  font-family: 'DotGothic16', sans-serif;
  color: #fff;
  font-size: 1.3em;
  font-weight: bold;
  text-align: left;
}

/*ディスコード用ペン*/
dpn {
  font-family: 'DotGothic16', sans-serif;
  font-size: 1em;
  color: #fff;
  text-align: left;
  padding: 0 20px;
}

/*本文用タイトル*/
t2 {
  background: #8c4664;
  color: #fff;
  font-weight: bold;
  font-size: 0.8em;
  padding: 4px 10px;
  display: inline-block; /* ←文字量に合わせて縮む */
  transform: skewX(-15deg);
  margin-bottom: 15px;
  font-family: 'DotGothic16', sans-serif;
  width: auto; /* 念のため追加 */
}

t1 {
  background: #a9a9a9;
  color: #fff;
  font-weight: bold;
  font-size: 0.8em;
  padding: 4px 10px;
  display: inline-block; /* ←文字量に合わせて縮む */
  transform: skewX(-15deg);
  margin-bottom: 15px;
  font-family: 'DotGothic16', sans-serif;
  width: auto; /* 念のため追加 */
}

t3 {
  background: #A590AF;
  color: #fff;
  font-weight: bold;
  font-size: 0.8em;
  padding: 4px 10px;
  display: inline-block; /* ←文字量に合わせて縮む */
  transform: skewX(-15deg);
  margin-bottom: 15px;
  font-family: 'DotGothic16', sans-serif;
  width: auto; /* 念のため追加 */
}

/*本文*/
spn {
  font-family: 'DotGothic16', sans-serif;
  font-size: 1em;
  color: #fff;
}

/*佐伯マーカー*/
smk {
  font-family: 'DotGothic16', sans-serif;
  font-size: 1em;
  background:linear-gradient(transparent 70%, #8c4664 70%);
}

/*星導マーカー*/
hmk {
  font-family: 'あずき';
  font-size: 1.1em;
  background:linear-gradient(transparent 70%, #A58CDC 70%);
}

/*佐伯マーク*/
sm {
  position: absolute;
  bottom: -4vw;  /* ← マイナス指定で下にはみ出す */
  right: -4vw;   /* ← マイナス指定で右にはみ出す */
  font-size: 15vw;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  font-family: "タバコ";
}

/*剣持マーク*/
km {
  position: absolute;
  bottom: -4vw;  /* ← マイナス指定で下にはみ出す */
  right: -4vw;   /* ← マイナス指定で右にはみ出す */
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  font-family: "剣";
}

/*刀子マーク*/
tkm {
  position: absolute;
  bottom: -4vw;  /* ← マイナス指定で下にはみ出す */
  right: -4vw;   /* ← マイナス指定で右にはみ出す */
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  font-family: "ハート";
}

hm {
  position: absolute;
  bottom: -4vw;  /* ← マイナス指定で下にはみ出す */
  right: -4vw;   /* ← マイナス指定で右にはみ出す */
  font-size: 15vw;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  font-family: "タコ";
}


/* デフォルトの三角を非表示に */
summary {
  font-family: 'DotGothic16', sans-serif;
  list-style: none;
  color: #fff;
}

/* 独自の矢印を追加（閉じてるとき） */
details:not([open]) summary::before {
  content: "☆"; /* 閉じてる状態の三角マーク */
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.3s ease;
  font-family: 'DotGothic16', sans-serif;
}

/* 開いてるとき */
details[open] summary::before {
  content: "★"; /* 開いてる状態の三角マーク */
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.3s ease;
  font-family: 'DotGothic16', sans-serif;
}

details[open] {
  background-color: #121212;
  font-family: 'DotGothic16', sans-serif;
  color: #fff;
}

/* ふきだし */

/* ===== 外枠（指定CSS準拠） ===== */

.talk {
font-size: 10px;
max-width: 300px;
height: auto;
margin: auto;
padding: 10px 20px;
border-radius: 8px;
background-color: #565565;
color: #565564;
line-height: 1;
overflow: hidden;
overflow-y: scroll;
-ms-overflow-style: #fff;
scrollbar-width: #fff;
text-align:left;
font-family: "ヒラギノ角ゴ ProN W3", sans-serif;
}

.talk::-webkit-scrollbar{
display:none;
}

/* 剣持右 */

.talk .kr {
position: relative;
display: inline-block;
max-width: 170px;
margin: 1px 10px ;
padding: 9px 14px;
border-radius: 19px;
overflow-wrap: break-word;
clear: both;
box-sizing: content-box;
font-size:9px;
float: right;
background: #A590AF;
color: #000000;
font-family: "ヒラギノ角ゴ ProN W3", sans-serif;
}

/* 剣持右 しっぽなし */

.talk .kr.nt {
margin-bottom: 0;
}

.talk .kr::after {
position: absolute;
content: "";
width: 17px;
height: 17px;
bottom: 0;
}

.talk .kr::after {
right: -6px;
border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
box-shadow: 14px 2px 0 -3px #A590AF inset; 
}

.talk .kr.nt::after {
content: none;
}

/* 伏見左 */

.talk .fl {
position: relative;
display: inline-block;
max-width: 170px;
margin: 1px 10px;
padding: 9px 14px;
border-radius: 19px;
overflow-wrap: break-word;
clear: both;
box-sizing: content-box;
font-size:10px;
float: left;
background: #ffcb58;
color: #000000;
font-family: "ヒラギノ角ゴ ProN W3", sans-serif;
}

/* 伏見左 しっぽなし */

.talk .fl.nt {
margin-bottom: 0;
}

/* 伏見右 しっぽあり */

.talk .fr.nt {
margin-bottom: 0;
}

.talk .fl::after {
position: absolute;
content: "";
width: 17px;
height: 17px;
bottom: 0;
}

.talk .fl::after {
left: -6px;
border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
box-shadow: -14px 2px 0 -3px #ffcb58 inset; 
}

.talk .fl.nt::after {
content: none;
}

/*テキストエリア*/

textarea {
  width: 300px;
  padding: 10px;
  border-radius: 8px;
  border: none;

  /* デザイン */
  background-color: #565565;
  color: #fff;

  /* 高さ自動調整 */
  height: auto;
  min-height: 40px;

  /* テキスト表示調整 */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

input[type="text"],
input[type="password"] {
  background-color: #565565;
  color: #fff;

  border-radius: 8px;
  border: none;
  padding: 8px;

  /* 見た目調整 */
  outline: none;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
  color: #ffffff; /* 好きな色に変更OK */
  text-decoration: none; /* 下線を消したい場合 */
}