/* =========================================
   Global & Reset
   ========================================= */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html,
body {
   position: relative;
   width: 100%;
   height: 100dvh;
   margin: 0;
   padding: 0;
   overflow: hidden;
   padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* =========================================
   Login Page
   ========================================= */
.login-page {
   position: relative;
   width: 100%;
   height: 100%;
}

body.page-login,
body.page-error {
   background-image: url('../images/backgrounds/bg-yakata-pc.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

body.time-morning {
   background-image: url('../images/backgrounds/bg-yakata-pc-asa.jpg');
}

body.time-day {
   background-image: url('../images/backgrounds/bg-yakata-pc-hiru.jpg');
}

body.time-night {
   background-image: url('../images/backgrounds/bg-yakata-pc.jpg');
}

.title-logo-container {
   position: absolute;
   top: 2%;
   left: 50%;
   transform: translateX(-50%);
   max-width: 90%;
   z-index: 5;
   padding: 15px 25px;
   border-radius: 10px;
}

.title-logo {
   display: block;
   width: 245px;
   max-width: 100%;
}

.google-login-btn {
   position: absolute;
   bottom: 35%;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(139, 90, 43, 0.9);
   border: 2px solid #d4af37;
   border-radius: 8px;
   padding: 18px 40px;
   font-size: 1.1rem;
   font-weight: bold;
   color: #fff;
   text-decoration: none;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
   min-width: 280px;
}

.speech-bubble {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 468px;
   background: rgba(0, 0, 0, 0.7);
   border: 1px solid #d4af37;
   border-radius: 10px;
   padding: 25px;
   color: #fff;
   font-size: 0.9rem;
   line-height: 1.8;
   z-index: 15;
   text-align: left;
}

.speech-bubble .data-list {
   margin-left: 20px;
}

.speech-bubble p {
   margin-bottom: 1em;
   text-align: left;
   line-height: 1.5;
}

.speech-bubble p:last-child {
   margin-bottom: 0;
}

.speech-bubble .next-step {
   display: block;
   margin: 15px auto 0;
   width: fit-content;
   background: linear-gradient(145deg, #1a1a1a, #000);
   border: 2px solid #330000;
   border-radius: 5px;
   padding: 10px 30px;
   font-size: 1rem;
   font-weight: bold;
   color: #fff;
   text-decoration: none;
   box-shadow: 0 0 10px rgba(139, 0, 0, 0.7), inset 0 0 5px rgba(0, 0, 0, 0.8);
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
   text-shadow: 0 0 3px #fff, 0 0 5px #ff0000, 0 0 10px #ff0000;
}

.terms-box {
   max-height: 100px;
   overflow-y: auto;
   background: rgba(0, 0, 0, 0.4);
   padding: 15px;
   border: 1px solid #444;
   border-radius: 5px;
   margin-top: 1em;
   font-size: 0.85em;
}

.butler-container {
   position: absolute;
   top: 42%;
   left: 65%;
   transform: translate(-50%, -50%);
   height: 80vh;
   max-width: 100%;
   object-fit: contain;
   pointer-events: none;
   z-index: 10;
}

.butler-container::after {
   content: "";
   position: absolute;
   left: 55%;
   bottom: -5%;
   transform: translateX(-50%) scaleX(1.2);
   width: 38%;
   height: 11%;
   background: rgba(0, 0, 0, 0.8);
   border-radius: 50%;
   z-index: -1;
   pointer-events: none;
   filter: blur(4px);
   opacity: 0.6;
}

.butler-image {
   height: 100%;
   width: auto;
}

.btn {
   display: inline-block;
   background: linear-gradient(145deg, #1a1a1a, #000);
   border: 2px solid #330000;
   border-radius: 5px;
   padding: 15px 35px;
   font-size: 1.2rem;
   font-weight: bold;
   color: #fff;
   text-decoration: none;
   box-shadow: 0 0 10px rgba(139, 0, 0, 0.7), inset 0 0 5px rgba(0, 0, 0, 0.8);
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
   z-index: 20;
   text-shadow: 0 0 3px #fff, 0 0 5px #ff0000, 0 0 10px #ff0000;
}

.btn:hover {
   background: linear-gradient(145deg, #2a2a2a, #111);
   border-color: #660000;
   box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), inset 0 0 8px rgba(0, 0, 0, 1);
}

.hidden {
   display: none !important;
}

.text-red {
   color: red;
}

.google-text {
   font-family: 'Arial', sans-serif;
   /* Googleに近いフォント */
   font-weight: bold;
   font-size: 1.1em;
}

/* 1文字目・4文字目・7文字目...（ブルー） */
.google-text span:nth-child(6n+1),
.google-text span:nth-child(6n+4) {
   color: #4285F4;
}

/* 2文字目・6文字目・8文字目...（レッド） */
.google-text span:nth-child(6n+2),
.google-text span:nth-child(6n+6) {
   color: #EA4335;
}

/* 3文字目（イエロー） */
.google-text span:nth-child(6n+3) {
   color: #FBBC05;
}

/* 5文字目（グリーン） */
.google-text span:nth-child(6n+5) {
   color: #34A853;
}

.text-yellow {
   /* color: red; */
   color: yellow;
}










.button-container {
   text-align: center;
}

.btn-accept,
.btn-decline,
#relogin-sound-off,
#relogin-sound-on {
   margin-top: 20px;
   margin-left: 10px;
   margin-right: 10px;
}

.btn-accept:hover,
.btn-decline:hover {
   transform: translateY(-2px);
}

.page-delete-data .butler-container {
   position: absolute;
   top: 42%;
   left: 76%;
   transform: translate(-50%, -50%);
   height: 80vh;
   max-width: 100%;
   object-fit: contain;
   pointer-events: none;
   z-index: 10;
}


/* =========================================
   Profile Page
   ========================================= */
.profile-page {
   position: relative;
   width: 100%;
   height: 100vh;
}

body.page-profile {
   background-image: url('../images/backgrounds/bg-yakata-pc.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

.profile-butler {
   position: absolute;
   top: 50%;
   left: 65%;
   transform: translate(-50%, -50%);
   height: 80vh;
   max-width: 100%;
   object-fit: contain;
   pointer-events: none;
   z-index: 10;
}

.profile-intro-bubble {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 450px;
   background: rgba(0, 0, 0, 0.7);
   border: 1px solid #d4af37;
   border-radius: 10px;
   padding: 25px;
   color: #fff;
   font-size: 1rem;
   line-height: 1.8;
   z-index: 15;
}

.profile-intro-bubble p {
   min-height: 150px;
}

#profile-intro-next {
   display: block;
   margin: 20px auto 0;
}

.form-container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90%;
   max-width: 400px;
   max-height: 80vh;
   overflow: auto;
   background: rgba(0, 0, 0, 0.8);
   border: 3px solid #d4af37;
   border-radius: 12px;
   padding: 25px 20px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
}

.interactive-mode .form-container {
   min-height: 400px;
}

.question-step {
   display: none;
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
}

.question-step.active {
   display: block;
   opacity: 1;
}

.question-title {
   font-size: 1rem;
   color: #d4af37;
   margin-bottom: 20px;
   text-align: center;
   font-weight: bold;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.progress-indicator {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-bottom: 20px;
}

.progress-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
   transition: all 0.3s ease;
}

.progress-dot.completed {
   background: #8b5a2b;
}

.progress-dot.current {
   background: #d4af37;
   transform: scale(1.3);
}

.edit-mode-toggle {
   text-align: center;
   margin-top: 15px;
}

.edit-mode-toggle a {
   color: #d4af37;
   text-decoration: underline;
   font-size: 0.9rem;
   cursor: pointer;
}

.form-container h2 {
   font-size: 1.3rem;
   color: #d4af37;
   margin-bottom: 20px;
   text-align: center;
   border-bottom: 2px solid #d4af37;
   padding-bottom: 10px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.form-group {
   margin-bottom: 18px;
}

.form-group label {
   display: block;
   font-size: 0.95rem;
   color: #fff;
   margin-bottom: 8px;
   font-weight: bold;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
   text-align: center;
}

.form-group select,
.form-group input[type="text"] {
   width: 100%;
   padding: 10px;
   font-size: 0.95rem;
   border: 2px solid #d4af37;
   border-radius: 5px;
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
   font-family: "游明朝", "Yu Mincho", serif;
}

.gender-buttons {
   display: flex;
   gap: 10px;
   justify-content: center;
}

.gender-btn {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 12px 8px;
   background: rgba(0, 0, 0, 0.6);
   border: 3px solid #d4af37;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   color: #fff;
}

.gender-btn:hover {
   background: rgba(212, 175, 55, 0.1);
   border-color: #f0e68c;
   transform: translateY(-2px);
   box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
}

.gender-btn.selected {
   background: rgba(212, 175, 55, 0.2);
   border-color: #f0e68c;
   border-width: 4px;
   box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
}

.gender-btn input[type="radio"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.gender-icon {
   width: 60px;
   height: 60px;
   margin-bottom: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.5rem;
   color: #d4af37;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.gender-icon.male.has-png {
   background-image: url('../images/icons/gender_male.png');
}

.gender-icon.female.has-png {
   background-image: url('../images/icons/gender_female.png');
}

.gender-icon.other.has-png {
   background-image: url('../images/icons/gender_other.png');
}

.gender-icon.has-png>i {
   display: none;
}

.gender-label {
   font-size: 0.9rem;
   color: #d4af37;
   font-weight: bold;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.age-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   padding: 5px;
}

.age-btn {
   padding: 10px 8px;
   background: rgba(0, 0, 0, 0.6);
   border: 2px solid #d4af37;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 0.85rem;
   text-align: center;
   color: #fff;
   position: relative;
}

.age-btn:hover {
   background: rgba(212, 175, 55, 0.1);
   border-color: #f0e68c;
   box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
}

.age-btn.selected {
   background: rgba(212, 175, 55, 0.2);
   border-color: #f0e68c;
   border-width: 3px;
   box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
}

.age-btn input[type="radio"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.personality-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
   max-height: 250px;
   overflow-y: auto;
   padding: 5px;
}

.personality-card {
   padding: 12px 10px;
   background: rgba(0, 0, 0, 0.6);
   border: 2px solid #d4af37;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 0.85rem;
   text-align: center;
   color: #fff;
   position: relative;
}

.personality-card:hover {
   background: rgba(212, 175, 55, 0.1);
   border-color: #f0e68c;
   transform: scale(1.02);
   box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
}

.personality-card.selected {
   background: rgba(212, 175, 55, 0.2);
   border-color: #f0e68c;
   border-width: 3px;
   box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
}

.personality-card input[type="radio"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.zodiac-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}

.zodiac-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 8px 5px;
   background: rgba(0, 0, 0, 0.6);
   border: 2px solid #d4af37;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   color: #fff;
}

.zodiac-btn:hover {
   background: rgba(212, 175, 55, 0.1);
   border-color: #f0e68c;
   transform: scale(1.05);
   box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
}

.zodiac-btn.selected,
.zodiac-btn:has(input:checked) {
   background: rgba(212, 175, 55, 0.2);
   border-color: #f0e68c;
   border-width: 3px;
   box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
}

.zodiac-btn input[type="radio"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.zodiac-icon {
   width: 40px;
   height: 40px;
   margin-bottom: 4px;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.zodiac-icon.aries {
   background-image: url('../images/icons/zodiac_aries.png');
}

.zodiac-icon.taurus {
   background-image: url('../images/icons/zodiac_taurus.png');
}

.zodiac-icon.gemini {
   background-image: url('../images/icons/zodiac_gemini.png');
}

.zodiac-icon.cancer {
   background-image: url('../images/icons/zodiac_cancer.png');
}

.zodiac-icon.leo {
   background-image: url('../images/icons/zodiac_leo.png');
}

.zodiac-icon.virgo {
   background-image: url('../images/icons/zodiac_virgo.png');
}

.zodiac-icon.libra {
   background-image: url('../images/icons/zodiac_libra.png');
}

.zodiac-icon.scorpio {
   background-image: url('../images/icons/zodiac_scorpio.png');
}

.zodiac-icon.sagittarius {
   background-image: url('../images/icons/zodiac_sagittarius.png');
}

.zodiac-icon.capricorn {
   background-image: url('../images/icons/zodiac_capricorn.png');
}

.zodiac-icon.aquarius {
   background-image: url('../images/icons/zodiac_aquarius.png');
}

.zodiac-icon.pisces {
   background-image: url('../images/icons/zodiac_pisces.png');
}

.zodiac-name {
   font-size: 0.75rem;
   color: #d4af37;
   font-weight: bold;
   margin-bottom: 2px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.zodiac-period {
   font-size: 0.65rem;
   color: #ccc;
}

.location-select {
   width: 100%;
   padding: 10px;
   font-size: 0.9rem;
   border: 2px solid #d4af37;
   border-radius: 5px;
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
   font-family: "游明朝", "Yu Mincho", serif;
   max-height: 150px;
}

.age-grid::-webkit-scrollbar,
.personality-grid::-webkit-scrollbar {
   width: 6px;
}

.age-grid::-webkit-scrollbar-track,
.personality-grid::-webkit-scrollbar-track {
   background: rgba(139, 90, 43, 0.1);
   border-radius: 3px;
}

.age-grid::-webkit-scrollbar-thumb,
.personality-grid::-webkit-scrollbar-thumb {
   background: rgba(139, 90, 43, 0.5);
   border-radius: 3px;
}

.age-grid::-webkit-scrollbar-thumb:hover,
.personality-grid::-webkit-scrollbar-thumb:hover {
   background: rgba(139, 90, 43, 0.7);
}

.submit-btn {
   width: 100%;
   padding: 14px;
   background: linear-gradient(145deg, #1a1a1a, #000);
   border: 2px solid #330000;
   border-radius: 5px;
   font-size: 1.2rem;
   font-weight: bold;
   color: #fff;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-top: 10px;
   margin-bottom: 30px;
   text-shadow: 0 0 3px #fff, 0 0 5px #ff0000, 0 0 10px #ff0000;
}

.submit-btn:hover {
   background: linear-gradient(145deg, #2a2a2a, #111);
   border-color: #660000;
   box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), inset 0 0 8px rgba(0, 0, 0, 1);
}

.success-message {
   background: rgba(139, 90, 43, 0.9);
   border: 1px solid #d4af37;
   color: #fff;
   padding: 12px;
   border-radius: 6px;
   margin-bottom: 15px;
   text-align: center;
   font-weight: bold;
}

.logout-btn {
   position: absolute;
   top: 12px;
   left: 12px;
   background: rgba(0, 0, 0, 0.6);
   border: 1px solid #d4af37;
   border-radius: 6px;
   padding: 8px 16px;
   font-size: 0.9rem;
   color: #d4af37;
   text-decoration: none;
   transition: all 0.3s ease;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
   z-index: 30;
}

.logout-btn:hover {
   background: rgba(0, 0, 0, 0.8);
   border-color: #f0e68c;
}

.first-logout-btn {
   top: 7px;
}

/* =========================================
   Select Master Page (画像サイズ 2562x1460 に対応)
   ========================================= */
.select-master-page {
   position: relative;
   width: 100%;
   height: 100vh;
}

.select-master-page .logout-btn {
   color: #fff;
}

.select-master-page#selectMasterPage {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

/* Time-of-day specific backgrounds for Select Master page */
body.time-morning .select-master-page#selectMasterPage {
   background-image: url('../images/backgrounds/bg-select_master-asa.jpg');
}

body.time-day .select-master-page#selectMasterPage {
   background-image: url('../images/backgrounds/bg-select_master-hiru.jpg');
}

body.time-night .select-master-page#selectMasterPage {
   background-image: url('../images/backgrounds/bg-select_master-yoru.jpg');
}

/* 背景画像（2562x1460）のアスペクト比 1.7548 に合わせてコンテナを固定 */
.door-selection {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100vw;
   height: 56.99vw;
   z-index: 50;
   pointer-events: none;
}

/* 画面が画像比率より縦長（スマホ等）の場合の計算 */
@media (max-aspect-ratio: 2562/1460) {
   .door-selection {
      width: 175.48vh;
      height: 100vh;
   }
}

/* 個別のフォーム設定 */
.door-selection form {
   position: absolute;
   margin: 0;
   padding: 0;
   pointer-events: auto;
   cursor: pointer;
}

/* ▼▼▼ 各扉の位置調整 (指定された値) ▼▼▼ */
/* 左の扉 */
.select-master-page #doorSelection.door-selection form:nth-child(1) {
   left: 37.3%;
   top: 35%;
   width: 7%;
   height: 26%;
}

/* 中央の扉 */
.select-master-page #doorSelection.door-selection form:nth-child(2) {
   left: 46.5%;
   top: 35%;
   width: 7%;
   height: 26%;
}

/* 右の扉 */
.select-master-page #doorSelection.door-selection form:nth-child(3) {
   left: 56%;
   top: 35%;
   width: 7%;
   height: 26%;
}

/* ボタン（クリック領域）: ブラウザの初期スタイルを打ち消して透明にする */
.select-master-page .door-btn {
   display: block;
   width: 100%;
   height: 100%;
   background: transparent;
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
}

/* ホバー時: うっすら白く光らせる */
.select-master-page .door-btn:hover {
   background: rgba(255, 255, 255, 0.1);
   box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
   transform: scale(1.02);
}

/* その他要素 */
.door-label,
.door-clickarea {
   display: none;
}

.message-box {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   max-width: 500px;
   background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
   border: 2px solid #500;
   border-radius: 5px;
   padding: 20px;
   color: #c7c7c7;
   font-size: 0.95rem;
   line-height: 1.6;
   text-align: left;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(80, 0, 0, 0.6);
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

#message-box-container {
   top: 12%;
}

.divination-description {
   bottom: 10%;
   font-size: 1.0rem;
   line-height: 1.5;
}

.select-master-page .success-message {
   position: absolute;
   top: 180px;
   left: 50%;
   transform: translateX(-50%);
   background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
   border: 2px solid #500;
   border-radius: 5px;
   padding: 15px 25px;
   color: #c7c7c7;
   font-weight: bold;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(80, 0, 0, 0.6);
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
   z-index: 200;
   text-align: center;
   max-width: 80%;
}

body.page-select-master {
   background-image: url('../images/backgrounds/bg-select-pc.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

body.page-combined {
   background-image: url('../images/backgrounds/bg-select-pc.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

/* =========================================
   Chat Page
   ========================================= */
:root {
   --avator-mobile-width: calc((100vw - 20px) * 2.2);
}

.chat-page {
   position: relative;
   width: 100%;
   height: 100vh;
}

.chat-page .logout-btn {
   color: #d4af37;
}

.avatar-wrapper {
   width: 100%;
   height: 100%;
   z-index: 10;
   position: relative;
   box-sizing: border-box;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.avatar-image__container {
   position: absolute;
   top: 60%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: 100%;
   max-width: 500px;
   max-height: 100%;
}

.avatar-image__image--fortune-teller,
.image-layer {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   background-size: cover;
   background-position: top center;
}

.avatar_image_base {
   z-index: -1;
   background-image: url('/images/avatars/1010013001/p_1/c0.webp');
}

.chat-area {
   position: absolute;
   bottom: 110px;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   max-width: 700px;
   max-height: calc(60vh - 110px);
   background: rgba(0, 0, 0, 0.5);
   border-radius: 12px;
   padding: 15px;
   padding-bottom: 10px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
   z-index: 40;
   display: flex;
   flex-direction: column;
}

.avatar-name {
   font-size: 1.1rem;
   font-weight: bold;
   color: #d4af37;
   text-align: center;
   margin-bottom: 10px;
   border-bottom: 2px solid #d4af37;
   padding-bottom: 5px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.chat-history {
   flex: 1;
   overflow-y: auto;
   margin-bottom: 12px;
   padding-right: 8px;
}

.chat-history::-webkit-scrollbar {
   width: 8px;
}

.chat-history::-webkit-scrollbar-track {
   background: rgba(212, 175, 55, 0.1);
   border-radius: 4px;
}

.chat-history::-webkit-scrollbar-thumb {
   background: rgba(212, 175, 55, 0.5);
   border-radius: 4px;
}

.welcome-message {
   text-align: center;
   color: #fff;
   padding: 20px;
   font-size: 0.95rem;
   line-height: 1.6;
}

.message {
   margin-bottom: 12px;
   animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.message-content {
   padding: 10px 14px;
   border-radius: 8px;
   font-size: 0.9rem;
   line-height: 1.5;
   word-wrap: break-word;
   max-width: 80%;
}

.user-message {
   display: flex;
   justify-content: flex-end;
   flex-direction: column;
   align-items: flex-end;
}

.user-message .message-content {
   background: rgba(119, 173, 139, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
}

.assistant-message {
   display: flex;
   justify-content: flex-start;
   flex-direction: column;
}

.assistant-message .message-content {
   background: rgba(212, 55, 170, 0.15);
   border: 1px solid rgba(212, 175, 55, 0.3);
   color: #fff;
}

.message-time {
   display: block;
   font-size: 0.75rem;
   color: #888;
   margin-top: 4px;
}

.user-message .message-time {
   text-align: right;
}

.assistant-message .message-time {
   text-align: left;
}

.message-inner {
   display: flex;
   flex-direction: column;
}

.chat-input-area {
   padding-top: 10px;
}

.input-group {
   display: flex;
   gap: 8px;
   margin-bottom: 8px;
}

#messageInput {
   flex: 1;
   padding: 10px;
   border: 2px solid #d4af37;
   border-radius: 6px;
   font-size: 0.9rem;
   font-family: "游明朝", "Yu Mincho", serif;
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
}

.btn-send {
   padding: 10px 20px;
   background: linear-gradient(145deg, #1a1a1a, #000);
   border: 2px solid #330000;
   border-radius: 5px;
   color: #fff;
   font-weight: bold;
   font-size: 0.9rem;
   cursor: pointer;
   transition: all 0.3s ease;
   text-shadow: 0 0 3px #fff, 0 0 5px #ff0000;
}

.btn-send:hover {
   background: linear-gradient(145deg, #2a2a2a, #111);
   border-color: #660000;
   box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.btn-primary {
   width: 100%;
   padding: 12px;
   background: linear-gradient(145deg, #1a1a1a, #000);
   border: 2px solid #330000;
   border-radius: 8px;
   color: #fff;
   font-weight: bold;
   font-size: 1rem;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-bottom: 8px;
   text-shadow: 0 0 3px #fff, 0 0 5px #ff0000;
}

.btn-primary:hover {
   background: linear-gradient(145deg, #2a2a2a, #111);
   border-color: #660000;
   box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.chat-actions {
   display: flex;
   gap: 8px;
   justify-content: center;
}

.btn-secondary {
   padding: 8px 15px;
   background: rgba(0, 0, 0, 0.6);
   border: 1px solid #d4af37;
   border-radius: 6px;
   color: #d4af37;
   font-size: 0.85rem;
   text-decoration: none;
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
}

.btn-secondary:hover {
   background: rgba(0, 0, 0, 0.8);
   border-color: #f0e68c;
}

.btn-icon {
   width: 40px;
   height: 46px;
   font-size: 1.2rem;
   display: flex;
   justify-content: center;
   align-items: center;
}

.loading-indicator {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: rgba(0, 0, 0, 0.9);
   border: 3px solid #d4af37;
   border-radius: 12px;
   padding: 25px 40px;
   text-align: center;
   z-index: 200;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
}

.spinner {
   width: 40px;
   height: 40px;
   margin: 0 auto 0px;
   border: 4px solid rgba(212, 175, 55, 0.3);
   border-top-color: #d4af37;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

.loading-indicator p {
   color: #d4af37;
   font-weight: bold;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

body.page-chat {
   background-image: url('../images/backgrounds/bg-chat01-pc.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   height: 100dvh;
   overflow: hidden;
   position: fixed;
   width: 100%;
}

.recording {
   color: red;
   animation: micPulse 1s infinite;
}

.microphone-button.auto-mode {
   background-color: rgba(212, 175, 55, 0.2) !important;
   border-color: #d4af37 !important;
   box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

@keyframes micPulse {
   0% {
      opacity: 1;
   }

   50% {
      opacity: 0.5;
   }

   100% {
      opacity: 1;
   }
}

.avatar-wrapper-10001 {
   background-image: url('../images/backgrounds/bg-chat01-pc.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

.avatar-wrapper-10002 {
   background-image: url('../images/backgrounds/bg-chat01-pc.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

.avatar-wrapper-10003 {
   background-image: url('../images/backgrounds/bg-chat01-pc.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

/* =========================================
   UI Components & Modules
   ========================================= */
/* Hamburger Menu */
#hamburger-btn {
   position: fixed;
   top: 30px;
   right: 30px;
   width: 36px;
   height: 30px;
   cursor: pointer;
   z-index: 20000;
   /* 十分に高い値に設定 */
   pointer-events: auto;
   /* クリックを確実に検知 */
}

#hamburger-btn span {
   display: block;
   position: absolute;
   width: 100%;
   height: 2px;
   background-color: #d4af37;
   border-radius: 1px;
   transition: all 0.4s ease;
   box-shadow: 0 0 4px rgba(212, 175, 55, 0.7);
}

#hamburger-btn span:nth-child(1) {
   top: 0;
}

#hamburger-btn span:nth-child(2) {
   top: 50%;
   transform: translateY(-50%);
}

#hamburger-btn span:nth-child(3) {
   top: 100%;
   transform: translateY(-100%);
}

#hamburger-btn:hover span {
   background-color: #fff;
   box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

#nav-menu {
   position: fixed;
   top: 0;
   right: -100%;
   width: 300px;
   height: 100vh;
   background: rgba(0, 0, 0, 0.95);
   border-left: 2px solid #d4af37;
   z-index: 21000;
   transition: right 0.4s ease-in-out;
   padding: 40px 0;
   overflow-y: auto;
}

#nav-menu.open {
   right: 0;
   box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
}

#nav-menu.open~#hamburger-btn span:nth-child(1) {
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
}

#nav-menu.open~#hamburger-btn span:nth-child(2) {
   opacity: 0;
}

#nav-menu.open~#hamburger-btn span:nth-child(3) {
   top: 50%;
   transform: translateY(-50%) rotate(-45deg);
}

#nav-menu ul {
   list-style: none;
   margin-top: 40px;
   margin-bottom: 15px;
}

#nav-menu ul li a {
   display: block;
   padding: 15px 20px;
   color: #d4af37;
   text-decoration: none;
   font-size: 1.1rem;
   transition: all 0.3s ease;
   border-bottom: 1px solid #333;
}

#nav-menu ul li a:hover {
   background: rgba(212, 175, 55, 0.1);
   color: #fff;
   padding-left: 35px;
}

#nav-menu .logout-btn {
   font-size: 0.9rem;
   background-color: #d4af37;
   color: #000;
}

#menu-close-btn {
   display: none;
   /* スマホで二重表示になるため非表示（ハンバーガーボタンが×になる） */
   position: absolute;
   top: 2px;
   right: 10px;
   font-size: 2.3rem;
   color: #d4af37;
   text-decoration: none;
   transition: all 0.3s ease;
}

#menu-close-btn:hover {
   color: #fff;
   transform: rotate(90deg);
}

/* .page-delete-data #hamburger-btn {
   display: none;
} */

/* Modals */
.modal-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   z-index: 1000;
   display: none;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.modal-container.show {
   display: flex;
   opacity: 1;
}

.modal-content {
   position: relative;
   background: rgba(245, 235, 215, 0.95);
   border: 3px solid #8b5a2b;
   border-radius: 12px;
   padding: 30px;
   width: 90%;
   max-width: 600px;
   max-height: 80vh;
   overflow-y: auto;
   color: #4a3520;
}

.modal-close-btn {
   position: absolute;
   top: 10px;
   right: 15px;
   font-size: 2rem;
   color: #8b5a2b;
   text-decoration: none;
   transition: color 0.3s ease;
}

.modal-close-btn:hover {
   color: #d4af37;
}

.modal-body h3 {
   font-size: 1.5rem;
   margin-bottom: 15px;
   border-bottom: 2px solid #8b5a2b;
   padding-bottom: 10px;
}

.modal-body h4 {
   font-size: 1.1rem;
   margin-top: 20px;
   margin-bottom: 10px;
}

.modal-body p {
   line-height: 1.7;
   margin-bottom: 10px;
}

.modal-body ul {
   margin-left: 20px;
   margin-bottom: 10px;
}

.modal-body li {
   margin-bottom: 5px;
}

.company-info {
   font-size: 0.8rem;
}

.company-info p {
   line-height: 1.5;
   margin-bottom: 8px;
}

/* Ad Banner */
.ad-banner-container {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background: rgba(0, 0, 0, 0.5);
   padding: 5px 0;
   z-index: 50;
}

.ad-banner-wrapper {
   display: flex;
   justify-content: center;
   gap: 15px;
}

.ad-banner {
   display: block;
   width: 220px;
   height: 60px;
   border: 1px solid #d4af37;
   overflow: hidden;
   transition: opacity 0.3s ease;
}

.ad-banner:hover {
   opacity: 0.8;
}

.ad-banner img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.copyright {
   position: fixed;
   bottom: 70px;
   left: 0;
   width: 100%;
   height: 28px;
   text-align: center;
   font-size: 0.7rem;
   color: #888;
   padding: 5px 0;
   z-index: 51;
}

/* Speaker & Sound */
#speaker-btn {
   position: fixed;
   top: 70px;
   right: 28px;
   font-size: 28px;
   color: darkred;
   cursor: pointer;
   z-index: 1001;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Ad Modal */
.ad-modal-container {
   position: fixed;
   bottom: -100%;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.85);
   z-index: 2000;
   transition: bottom 0.5s ease-in-out;
   padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
   display: flex;
   align-items: flex-end;
}

.ad-modal-container.show {
   bottom: 0;
}

.ad-modal-content {
   position: relative;
   background: #f0e6d6;
   padding: 25px;
   width: 100%;
   height: 95%;
   overflow-y: auto;
   color: #4a3520;
   box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
   border-radius: 20px 20px 0 0;
}

.ad-modal-close-btn {
   position: absolute;
   top: 15px;
   right: 15px;
   width: 36px;
   height: 36px;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   transition: all 0.3s ease;
   z-index: 10;
   line-height: 1;
}

.ad-modal-close-btn:hover {
   background: rgba(0, 0, 0, 0.6);
   transform: rotate(90deg);
   color: #d4af37;
}

.ad-content-panel h3 {
   font-size: 1.5rem;
   margin-bottom: 15px;
   border-bottom: 2px solid #8b5a2b;
   padding-bottom: 10px;
   color: #4a3520;
}

/* Start Overlay */
.start-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: opacity 0.5s ease;
}

.start-box {
   width: 90%;
   max-width: 600px;
   background-color: #000;
   border: 2px solid #d4af37;
   border-radius: 15px;
   padding: 40px 20px;
   text-align: center;
   color: #fff;
   box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.start-title {
   font-size: 2rem;
   font-weight: bold;
   margin-bottom: 20px;
   color: #fff;
   text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.start-desc {
   font-size: 1rem;
   margin-bottom: 40px;
   line-height: 1.5;
}

.start-btn-container {
   display: flex;
   justify-content: center;
   gap: 30px;
}

.btn-start {
   background: #000;
   color: #fff;
   border: 1px solid #555;
   padding: 15px 20px;
   font-size: 1.1rem;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease;
   box-shadow: 0 0 10px #800000, inset 0 0 10px #800000;
   border-left: 4px solid #330000;
}

.start-title-img-container {
   text-align: center;
   margin-bottom: 20px;
}

.start-title-img-container .title-logo {
   margin-left: auto;
   margin-right: auto;
}

.btn-start:hover {
   background: #1a0000;
   box-shadow: 0 0 20px #ff0000, inset 0 0 15px #ff0000;
   border-color: #ff0000;
   transform: scale(1.05);
}

.fade-out {
   opacity: 0;
   pointer-events: none;
}

.cancel-btn {
   margin-right: 10px;
}

/* =========================================
   Media Queries
   ========================================= */
@media (max-width: 1369px) {
   .divination-description {
      font-size: 0.7rem;
      padding: 10px;
      bottom: 95px;
   }
}

@media (max-width: 768px) {
   .title-logo-container {
      top: 5px;
      padding: 10px 15px;
      left: 5px;
      transform: translateX(0);
      width: 120px;
   }

   .title-logo {
      width: 250px;
   }

   .speech-bubble {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      height: auto;
      font-size: 1.0rem;
      line-height: 1.7;
   }

   .btn {
      min-width: auto;
      padding: 12px 20px;
      font-size: 1rem;
      width: 45%;
   }

   .cancel-btn {
      width: 40%;
   }

   .btn-accept,
   .btn-decline,
   #relogin-sound-off,
   #relogin-sound-on {
      margin: 25px 2% 5px;
   }

   .butler-container {
      width: 100%;
      height: 70vh;
      position: absolute;
      z-index: -1;
      left: 36%;
      top: 63%;
   }

   .page-delete-complete .butler-container {
      left: 67%;
   }

   body.page-login .butler-container {
      height: 115vh;
   }

   body.page-error .butler-container {
      height: 100vh;
      top: 65%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   body.page-login .speech-bubble,
   body.page-error .speech-bubble {
      font-size: 0.85rem;
   }

   body.page-error .speech-bubble {
      top: 40%;
      z-index: 20;
   }

   body.page-error .butler-container {
      height: 100vh;
      top: 65%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
   }

   /* Profile Mobile */
   .profile-butler {
      top: auto;
      bottom: 50px;
      left: 75%;
      transform: translateX(-50%);
      height: 80vh;
   }

   .profile-intro-bubble {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      height: auto;
      font-size: 0.85rem;
      line-height: 1.7;
   }

   .profile-intro-bubble p {
      min-height: 130px;
   }

   .form-container {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 95%;
      padding: 20px 15px;
      max-height: calc(80vh - 50px);
      overflow-y: auto;
   }

   .form-container h2 {
      font-size: 1.1rem;
   }

   .form-group {
      margin-bottom: 15px;
   }

   .form-group label {
      font-size: 0.85rem;
   }

   .form-group select,
   .form-group input[type="text"] {
      font-size: 0.9rem;
      padding: 8px;
   }

   .submit-btn {
      font-size: 1rem;
      padding: 12px;
   }

   .logout-btn {
      top: 15px;
      left: 22px;
      padding: 6px;
      font-size: 0.8rem;
   }

   .gender-icon {
      width: 100%;
      height: 50px;
   }

   .gender-label {
      font-size: 0.8rem;
   }

   .age-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
   }

   .age-btn {
      padding: 8px 6px;
      font-size: 0.75rem;
   }

   .personality-grid {
      gap: 6px;
      max-height: 220px;
   }

   .personality-card {
      padding: 10px 8px;
      font-size: 0.75rem;
   }

   .zodiac-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
   }

   .zodiac-btn {
      padding: 6px 4px;
   }

   .zodiac-icon {
      width: 100%;
      height: 25px;
   }

   .zodiac-name {
      font-size: 0.7rem;
   }

   .zodiac-period {
      font-size: 0.6rem;
   }

   /* Select Master Mobile */
   #message-box-container {
      top: 14%;
      font-size: 0.85rem;
      padding: 15px;
   }

   .divination-description {
      bottom: 10%;
      font-size: 0.7rem;
   }

   /* Common UI Mobile */
   #hamburger-btn {
      top: 16px;
      right: 10px;
      width: 26px;
      height: 20px;
      z-index: 20000;
      pointer-events: auto !important;
      /* タップ反応を確実に */
      cursor: pointer;
   }

   #nav-menu {
      width: 90%;
   }

   .modal-content {
      padding: 20px;
   }

   .modal-body h3 {
      font-size: 1.3rem;
   }

   .modal-body h4 {
      font-size: 1.1rem;
   }

   #speaker-btn {
      top: 46px;
      right: 10px;
      font-size: 20px;
      width: 26px;
      height: 26px;
   }

   .ad-banner-container {
      padding: 0;
      overflow: hidden;
   }

   .ad-banner-wrapper {
      position: relative;
      height: 60px;
   }

   .ad-banner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      transform: translateY(100%);
      transition: transform 0.8s ease-in-out;
   }

   .ad-banner.active {
      transform: translateY(0);
      z-index: 2;
   }

   .ad-banner.previous {
      transform: translateY(-100%);
      z-index: 1;
   }

   /* Chat Mobile */
   .chat-area {
      width: 95%;
      max-height: calc(60vh - 100px);
      bottom: 100px;
      padding: 12px;
      padding-bottom: 8px;
   }

   .avatar-name {
      font-size: 1rem;
   }

   .message-content {
      font-size: 0.85rem;
      padding: 8px 12px;
   }

   /* Issue #231: マイクはみ出し・入力欄表示問題修正 */
   .input-group {
      flex-wrap: nowrap;
      overflow: hidden;
   }

   #messageInput {
      font-size: 0.85rem;
      padding: 8px;
      min-width: 0;
      text-overflow: ellipsis;
   }

   #messageInput:focus {
      text-overflow: clip;
   }

   .btn-send {
      padding: 8px 12px;
      font-size: 0.85rem;
      flex-shrink: 0;
   }

   .chat-actions {
      flex-shrink: 0;
   }

   .btn-icon {
      width: 36px;
      height: 40px;
      padding: 0;
   }

   .copyright {
      bottom: 55px;
   }

   .question-title {
      margin-bottom: 10px;
   }
}



/* 以下、combined_page.twig　から移動 */

/* Combined page用のスタイル - 3ページ構成 */
#selectMethodPage {
   display: block;
   /* 初期表示: 占い方法選択 */
}

#selectMasterPage {
   display: none;
   /* 非表示: 占い師選択 */
}

#chatPage {
   display: none;
   /* 非表示: チャット */
}

/* 占い師選択ページ用のスタイル */
/* style.cssの.door-selectionをFlexboxで上書き */
#avatarDoorSelection {
   display: flex !important;
   justify-content: center !important;
   align-items: flex-end !important;
   gap: 2% !important;
   height: 450px !important;
   padding: 0 2% !important;
   top: 55%;
}

@media (max-width: 768px) {
   #avatarDoorSelection {
      align-items: center !important;
   }
}

#avatarDoorSelection form,
#avatarDoorSelection .select-avatar-form {
   position: relative !important;
   left: auto !important;
   right: auto !important;
   top: auto !important;
   bottom: auto !important;
   transform: none !important;
   flex: 0 0 30% !important;
   max-width: 370px !important;
}

@media (min-width: 1922px) {
   #avatarDoorSelection {
      top: 80%;
   }

   #avatarDoorSelection form,
   #avatarDoorSelection .select-avatar-form {
      max-width: 700px !important;
   }
}

@media (max-width: 1921px) {
   #avatarDoorSelection {
      top: 70%;
   }

   #avatarDoorSelection form,
   #avatarDoorSelection .select-avatar-form {
      max-width: 420px !important;
   }
}

@media (max-width: 1500px) {
   #avatarDoorSelection {
      top: 68%;
   }

   #avatarDoorSelection form,
   #avatarDoorSelection .select-avatar-form {
      max-width: 270px !important;
   }
}

@media (max-width: 768px) and (orientation: portrait) {
   #avatarDoorSelection {
      top: 65%;
   }

   #avatarDoorSelection form,
   #avatarDoorSelection .select-avatar-form {
      max-width: 180px !important;
   }
}

.avatar-door-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   background: transparent;
}

.avatar-image-wrapper {
   width: 100%;
   aspect-ratio: 600 / 1000;
   overflow: hidden;
   background: transparent;
   position: relative;
}

.avatar-portrait {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center bottom;
   filter: none;
}

.select-master-page .avatar-portrait {
   display: block !important;
   width: 100% !important;
   height: 100% !important;
   object-fit: contain !important;
   border-radius: 0 !important;
   position: static !important;
}

.door-label {
   position: relative;
   bottom: auto;
   margin-top: 10px;
   color: #d4af37;
   font-size: 1.1rem;
   font-weight: bold;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.avatar-placeholder {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* チャットページ用のスタイル（chat.twigから） */
/* システムメッセージ */
.system-message {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 15px 0;
}

.system-message .message-content {
   background: rgba(139, 90, 43, 0.8);
   color: #f5deb3 !important;
   text-align: center;
   max-width: 90%;
   padding: 15px 20px;
   border-radius: 8px;
   font-weight: 500;
   border: 1px solid rgba(212, 175, 55, 0.5);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.system-message .message-content p {
   color: #f5deb3 !important;
   margin: 0;
   line-height: 1.6;
}

.system-message .message-time {
   display: none;
}

/* フェーズ表示UI */
.phase-indicator {
   position: fixed;
   top: 80px;
   right: 20px;
   background: rgba(0, 0, 0, 0.8);
   padding: 15px 20px;
   border-radius: 8px;
   border: 1px solid rgba(212, 175, 55, 0.5);
   z-index: 1000;
   min-width: 200px;
}

.phase-indicator-title {
   color: #d4af37;
   font-size: 12px;
   font-weight: bold;
   margin-bottom: 10px;
   text-align: center;
}

.phase-step {
   display: flex;
   align-items: center;
   margin: 8px 0;
   color: #888;
   font-size: 13px;
}

.phase-step.active {
   color: #d4af37;
   font-weight: bold;
}

.phase-step.completed {
   color: #5cb85c;
}

.phase-step-icon {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   border: 2px solid #888;
   margin-right: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
}

.phase-step.active .phase-step-icon {
   border-color: #d4af37;
   background: #d4af37;
   color: #000;
}

.phase-step.completed .phase-step-icon {
   border-color: #5cb85c;
   background: #5cb85c;
   color: #fff;
}

/* デバッグ情報表示 */
.debug-panel {
   position: fixed;
   bottom: 80px;
   right: 20px;
   background: rgba(0, 0, 0, 0.9);
   padding: 15px 20px;
   border-radius: 8px;
   border: 1px solid rgba(212, 175, 55, 0.5);
   z-index: 1000;
   min-width: 300px;
   font-size: 12px;
   color: #f5deb3;
}

.debug-panel-title {
   color: #d4af37;
   font-weight: bold;
   margin-bottom: 10px;
   text-align: center;
   border-bottom: 1px solid rgba(212, 175, 55, 0.3);
   padding-bottom: 5px;
}

.debug-section {
   margin: 8px 0;
}

.debug-section-title {
   color: #d4af37;
   font-size: 11px;
   font-weight: bold;
   margin-bottom: 4px;
}

.debug-item {
   margin: 3px 0;
   padding: 3px 8px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
}

.debug-label {
   color: #999;
   display: inline-block;
   min-width: 120px;
}

.debug-value {
   color: #f5deb3;
   font-weight: normal;
}

.debug-value.highlight {
   color: #5cb85c;
   font-weight: bold;
}

/* 占い結果後の選択ボタン (Issue #200) */
.fortune-result-actions {
   padding: 15px 10px;
   text-align: center;
   position: relative;
   z-index: 100;
}

.fortune-result-actions__title {
   display: none;
}

.fortune-result-actions__buttons {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.btn-fortune-action {
   display: inline-block;
   background: linear-gradient(145deg, #1a1a1a, #000);
   border: 2px solid #330000;
   border-radius: 5px;
   padding: 12px 20px;
   font-size: 1rem;
   font-weight: bold;
   color: #fff;
   text-decoration: none;
   box-shadow: 0 0 10px rgba(139, 0, 0, 0.7), inset 0 0 5px rgba(0, 0, 0, 0.8);
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
   text-shadow: 0 0 3px #fff, 0 0 5px #ff0000, 0 0 10px #ff0000;
}

.btn-fortune-action i {
   margin-right: 8px;
}

.btn-fortune-action:hover {
   background: linear-gradient(145deg, #2a2a2a, #111);
   border-color: #660000;
   box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), inset 0 0 8px rgba(0, 0, 0, 1);
   transform: translateY(-2px);
}

@media (min-width: 768px) {
   .fortune-result-actions__buttons {
      flex-direction: row;
      justify-content: center;
      gap: 15px;
   }

   .btn-fortune-action {
      flex: 1;
      max-width: 220px;
   }
}

/* Issue #210, #211, #212: ログアウト・占い終了モーダル */
.logout-modal-content {
   max-width: 400px;
   text-align: center;
   padding: 30px 20px;
}

.logout-modal-text {
   /* color: #f5deb3; */
   font-size: 1rem;
   line-height: 1.8;
   margin-bottom: 25px;
   display: inline-block;
   max-width: 35ch;
   white-space: normal;
   overflow-wrap: anywhere;
   word-break: break-all;
}

.modal-buttons {
   display: flex;
   justify-content: center;
   gap: 15px;
}

.modal-buttons .btn {
   min-width: 120px;
   padding: 12px 16px;
   font-size: 1rem;
   border-radius: 5px;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-bottom: 0;
}

.modal-buttons .btn-danger {
   background: linear-gradient(145deg, #8b0000, #5a0000);
   border: 2px solid #660000;
   color: #fff;
}

.modal-buttons .btn-danger:hover {
   background: linear-gradient(145deg, #a00000, #6a0000);
   box-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}

.modal-buttons .btn-primary {
   background: linear-gradient(145deg, #1a1a1a, #000);
   border: 2px solid #d4af37;
   color: #d4af37;
}

.modal-buttons .btn-primary:hover {
   background: linear-gradient(145deg, #2a2a2a, #111);
   box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.modal-buttons .btn-secondary {
   background: linear-gradient(145deg, #333, #222);
   border: 2px solid #555;
   color: #ccc;
}

.modal-buttons .btn-secondary:hover {
   background: linear-gradient(145deg, #444, #333);
}

/* Avatar portrait: 足元の楕円影のみ（光源上方なし） */
.avatar-image__container {
   overflow: visible;
}

.avatar-portrait {
   display: inline-block;
   position: relative;
   border-radius: 50%;
   z-index: 2;
}

.avatar-image-wrapper::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 0%;
   transform: translateX(-50%) scaleX(1.2);
   width: 54%;
   height: 10%;
   background: rgba(0, 0, 0, 10);
   border-radius: 50%;
   z-index: 0;
   pointer-events: none;
   filter: blur(4px);
   opacity: 0.6;
}

.avatar-image-wrapper.small::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 1%;
   transform: translateX(-50%) scaleX(1.15);
   width: 45%;
   height: 9%;
   background: rgba(0, 0, 0, 0.45);
   border-radius: 50%;
   z-index: 0;
   pointer-events: none;
   filter: blur(3px);
   opacity: 0.55;
}


.uranai-type-sityu {
   background-image: url('../images/backgrounds/bg-select_master-sityu.jpg') !important;
}

.uranai-type-seiza {
   background-image: url('../images/backgrounds/bg-select_master-seiza.jpg') !important;
}

.uranai-type-husui {
   background-image: url('../images/backgrounds/bg-select_master-husui.jpg') !important;
}

.page-delete-complete {
   background-image: url('../images/backgrounds/bg-yakata-pc.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

img[alt="1"] {
   filter: grayscale(100%) brightness(70%);
   opacity: 0.7;
   transition: filter 0.25s ease, opacity 0.25s ease;
}

.avatar-portrait[src*="crid_10002"] {
   width: 108% !important;
   height: 108% !important;
   object-fit: cover !important;
   position: absolute !important;
   top: -25px
}

@media (max-width: 768px) {
   .avatar-portrait[src*="crid_10002"] {
      width: 108% !important;
      height: 108% !important;
      object-fit: cover !important;
      position: absolute !important;
      top: -10px
   }
}

/* SNS Menu */
.menu-sns {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
}

.menu-sns a {
   display: block;
   width: 40px;
   height: 40px;
   transition: transform 0.3s ease;
   object-fit: contain;
}

.menu-sns>img {
   display: block;
   width: 80px;
   height: 80px;
   transition: transform 0.3s ease;
   object-fit: contain;
}

.menu-sns a:hover,
.menu-sns>img:hover {
   transform: scale(1.1);
}

.menu-sns a img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.menu-company-info {
   text-align: left;
   font-size: 0.7rem;
   color: #ccc;
   margin-top: 10px;
   line-height: 1.6;
   padding: 0 20px;
}


/* =========================================
   Terms Modal (Login Page)
   ========================================= */
#termsModal .modal-content {
   max-width: 800px;
   height: 85vh;
   display: flex;
   flex-direction: column;
}

#termsModal .modal-body-scroll {
   flex: 1;
   overflow-y: auto;
   padding-right: 10px;
   margin-top: 10px;
   text-align: left;
   font-size: 0.8rem;
   line-height: 1.8;
}

#termsModal .modal-body-scroll::-webkit-scrollbar {
   width: 8px;
}

#termsModal .modal-body-scroll::-webkit-scrollbar-track {
   background: rgba(212, 175, 55, 0.1);
   border-radius: 4px;
}

#termsModal .modal-body-scroll::-webkit-scrollbar-thumb {
   background: rgba(212, 175, 55, 0.5);
   border-radius: 4px;
}

#openTermsModalBtn {
   font-size: 0.8rem;
   padding: 6px 12px;
}

#termsModal h3 {
   text-align: center;
   border-bottom: 2px solid #8b5a2b;
   padding-bottom: 10px;
   margin-bottom: 15px;
}

@media (max-width: 768px) {
   #termsModal h3 {
      font-size: 0.9rem;
      padding-bottom: 5px;
      margin-bottom: 10px;
   }

   #openTermsModalBtn {
      font-size: 0.6rem;
   }
}

/*メッセージボックスの中に送信ボタンをいれる*/
#chatInputGroup {
   gap: 0;
   position: relative;
}

#messageInput {
   padding-right: 50px !important;
}

#sendBtn {
   width: 50px;
   margin-left: -50px;
   background: transparent;
   border: none;
   box-shadow: none;
   color: #d4af37;
   z-index: 10;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
}

#sendBtn:hover {
   background: rgba(212, 175, 55, 0.1);
   border-color: transparent;
   box-shadow: none;
   color: #fff;
   transform: scale(1.1);
}

.chat-actions {
   margin-left: 8px;
}

@media (max-width: 768px) {
   #sendBtn {
      width: 44px;
      margin-left: -44px;
   }

   #messageInput {
      padding-right: 44px !important;
   }
}


/* ご利用規約 */
.terms-of-service h3 {
   text-align: left !important;
   margin-top: 20px;
}

/* 管理者用情報（mode=kanri） */
.kanri-info {
   margin-top: 8px;
   padding: 8px;
   background: rgba(0, 0, 0, 0.4);
   border: 1px dashed #d4af37;
   border-radius: 4px;
   font-size: 0.75rem;
   color: #ffcc00;
   line-height: 1.4;
   font-family: monospace;
}

.kanri-item {
   margin-bottom: 4px;
}

.kanri-item:last-child {
   margin-bottom: 0;
}

.kanri-label {
   color: #d4af37;
   font-weight: bold;
   margin-right: 5px;
}

.kanri-value {
   color: #fff;
}