/* Home/Title page styles extracted from BKstyle.css */

/* Prevent scroll on title page */
.title-page { overflow: hidden; }

/* Title background */
#background-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: url('img/title.jpg');
  background-size: cover; background-position: center; z-index: -1;
}
@media (min-width: 768px) {
  #background-container { background-image: url('img/titlePC.jpg'); }
  .level-badge { left: -1em; top: 10px; }
}

/* Mobile placement from backup (smartphone) */
@media (max-width: 600px) {
  body.title-page #tako-image { width: 120px; top: 36%; left: 5%; }
  body.title-page #yaki-image { width: 100px; top: 63%; right: 8%; }
  .level-badge { left: -2em !important; transform: translateX(-50%); }
}

/* Floating images */
#tako-image { position: absolute; top: 5%; left: 8%; width: 115.2px; height: auto; z-index: 2; animation: float-tako 2s ease-in-out infinite alternate; }
#yaki-image { position: absolute; top: 14%; right: 3%; width: 100.8px; height: auto; z-index: 2; transform-origin: center bottom; animation: bounce-yaki 1s ease-out 0s infinite; }
@keyframes float-tako { 0% { transform: translate(0,0);} 50% { transform: translate(10px,20px);} 100% { transform: translate(0,0);} }
@keyframes bounce-yaki { 0% { transform: translateY(0) scaleY(1);} 50% { transform: translateY(-20px) scaleY(0.9);} 100% { transform: translateY(0) scaleY(1);} }

/* Bottom navigation */
#bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 600px; height: 78px; display: flex; justify-content: space-around; align-items: stretch;
  z-index: 1000; padding: 0; overflow: visible;
}
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 25%; height: 100%; cursor: pointer; text-decoration: none; color: var(--text-color-light); }
.nav-item img { width: auto; height: 100%; object-fit: contain; display: block; margin-top: -30px; margin-bottom: 0; transition: transform .2s ease-in-out, filter .2s ease-in-out; }
.nav-item:hover img { transform: scale(1.05); filter: brightness(1.2); }
.nav-item:active img { transform: scale(0.95); filter: brightness(1.0); }
#online-match { background: linear-gradient(180deg, #FF512F, #DD2476); }
#yokai-slayer { background: linear-gradient(180deg, #6dd5ed, #2193b0); }
#yokai-dex { background: linear-gradient(180deg, #38ef7d, #11998e); }
#profile { background: linear-gradient(180deg, #ffbd00, #cc8d00); }

/* Battle mode menu buttons */
.game-mode-button { width: 100%; padding: 15px; margin-bottom: 15px; background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); color: #fff; border: none; border-radius: 10px; font-size: 1.2em; font-weight: bold; cursor: pointer; transition: all .3s ease; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
#online-match-button { background: linear-gradient(to right, #44c8bd, #3ab568); }
#friend-match-button { background: linear-gradient(to right, #ffba33, #da9415); }
#local-two-player-button { background: linear-gradient(to right, #cfabff, #2774AE); }
.game-mode-button i { font-size: 2em; margin-bottom: 10px; }
.game-mode-button span { font-size: 1.1em; margin-bottom: 5px; }
.game-mode-button p { font-size: 0.6em; color: rgba(255,255,255,0.8); margin: 0; }
.game-mode-button:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.3); }
.game-mode-button .button-icon { height: 3em; width: auto; margin-bottom: 10px; }
/* Ensure modal generic image rule doesn't cap button icons */
.modal-content .button-icon { max-width: none; }

/* Passphrase modal */
#passphraseInput { width: 100%; padding: 12px; margin-bottom: 20px; border: 2px solid #e0e0e0; border-radius: 15px; font-size: 18px; box-sizing: border-box; text-align: center; font-family: var(--primary-font); transition: border-color 0.3s; }
#passphraseInput:focus { outline: none; border-color: var(--pastel-grad-end); }
#startPassphraseGameButton { width: 100%; padding: 12px; background: linear-gradient(45deg, var(--pastel-grad-start), var(--pastel-grad-end)); color: var(--text-color-light); border: none; border-radius: 15px; font-size: 18px; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s; font-family: var(--primary-font); }
#startPassphraseGameButton:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
#cancel-passphrase-button { cursor: pointer; margin-top: 20px; display: inline-block; color: #777; font-weight: bold; transition: color .2s ease; }
#cancel-passphrase-button:hover { color: #333; }

/* Matching overlay content + quote */
.matching-content-custom p { text-align: center; }
#quote-display { margin-top: 20px; margin-bottom: 25px; padding: 20px 20px 20px 55px; background: linear-gradient(135deg, #f5f7fa 0%, #e9ecf1 100%); border-radius: 8px; border: 1px solid #e1e4e8; font-style: italic; color: #4a4a4a; font-size: 1em; line-height: 1.7; text-align: left; position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
#quote-display::before { content: '\201C'; position: absolute; top: 12px; left: 15px; font-size: 3em; color: rgba(0,0,0,0.1); font-family: 'Georgia', serif; line-height: 1; }
#cancel-matching-button { cursor: pointer; margin-top: 15px; display: inline-block; color: #777; font-weight: bold; transition: color 0.2s ease; }
#cancel-matching-button:hover { color: #333; }

/* Break overlay (title page) */
#breakOverlay { display: none; z-index: 4000; pointer-events: auto; }
#breakOverlay .modal-content { text-align: center; }
#breakOverlay .modal-content #breakCountdown { margin-top: 10px; margin-bottom: 30px; font-family: var(--primary-font); font-size: 1.2em; font-weight: bold; color: #fff; }

/* Wider screens: enlarge bottom nav height to match original */
@media (min-width: 600px) {
  #bottom-nav { height: 120px; }
}