/* Title screen (js/title-screen.js): only what Bootstrap has no class for —
   the felt background, the logo lettering, the panel art and the focus frame. */
/* Full screen: no margin from the short-screen modal rule in responsive.css. */
#titleModal .modal-dialog { margin: 0; }
#titleModal h2[tabindex="-1"]:focus { outline: 0; }
/* The title's green: also the in-game tone (css/theme.css, the 緑 table preset). */
:root { --hk-green-1: #245c3c; --hk-green-2: #123824; --hk-green-3: #0a1f14; }
.title-screen {
    background: radial-gradient(ellipse at 50% 0%, var(--hk-green-1) 0%, var(--hk-green-2) 55%, var(--hk-green-3) 100%);
    color: #f8f4e6;
}
/* 花札-like red and gold bands above and below the panels. */
.title-header { border-bottom: 3px solid #b3261e; box-shadow: 0 2px 0 #c9a227; }
.title-footer { border-top: 3px solid #b3261e; background: rgba(0, 0, 0, .45); }
.title-name {
    font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 3.2vw, 2rem);
    letter-spacing: .1em;
    color: #f3d67a;
    text-shadow: 0 2px 0 #6b4f10, 0 0 14px rgba(243, 214, 122, .35);
}
.title-caption { color: #f1b8b0; letter-spacing: .15em; font-size: .75rem; }
/* The logo is the link back to the top. */
.title-home:hover .title-name, .title-home:focus-visible .title-name { color: #fff3c4; }

/* Logo: three tiny fanned cards. */
.title-logo-fan { position: relative; width: 44px; height: 40px; }
.title-logo-fan img {
    position: absolute;
    left: 13px;
    bottom: 0;
    width: 18px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    transform-origin: 50% 120%;
    transform: rotate(calc(var(--i) * 20deg));
}

.min-h-0 { min-height: 0; }
.title-stage { max-width: 1280px; }
.title-narrow { max-width: 900px; }
.title-arrow { min-height: 40%; font-size: 1.6rem; }

/* A panel: title band, art filling the middle, a dark description band. */
.title-panel-col { max-width: 420px; display: flex; min-height: 0; }
.title-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    border: 5px solid rgba(255, 255, 255, .15);
    border-radius: .75rem;
    overflow: hidden;
    background: #1d1a14;
    color: #fff;
    transition: transform .12s, border-color .12s;
}
.title-panel.is-current { border-color: var(--bs-warning); transform: scale(1.02); box-shadow: 0 0 18px rgba(255, 193, 7, .45); }
.title-panel:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.title-panel-name { font-size: clamp(1.1rem, 2.6vw, 1.9rem); letter-spacing: .1em; }
.title-panel-art {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, #f6ecd2 0%, #d9c69a 100%);
    overflow: hidden;
    container-type: size; /* the art scales with the box, not only its height */
}
.title-panel-art > .bi { font-size: min(55cqh, 45cqw); line-height: 1; }
.title-panel-desc { min-height: 3.6em; font-size: clamp(.72rem, 1.4vw, .95rem); line-height: 1.3; }
/* A fan of cards (card art / 取り札) centred in the art box. */
.title-art-card {
    position: absolute;
    left: 50%;
    top: 14%;
    height: min(64cqh, 72cqw);
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
    transform-origin: 50% 115%;
    transform: translateX(-50%) rotate(calc(var(--i) * var(--spread, 16deg)));
}
.title-art-avatar {
    position: absolute;
    right: 6%;
    bottom: 5%;
    height: min(38cqh, 34cqw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid #c9a227;
    background: #fff;
}

.title-keys kbd { background: #f8f4e6; color: #222; }

/* Short screens (phones held sideways): smaller bands. */
@media (max-height: 500px) {
    .title-logo-fan { width: 34px; height: 30px; }
    .title-logo-fan img { width: 14px; left: 10px; }
    .title-panel-name { font-size: 1.05rem; }
    .title-panel-desc { font-size: .7rem; min-height: 2.8em; }
    .title-panel { border-width: 4px; }
    #titleSetupFooter { padding: .3rem .75rem; }
    #titleStartBtn { padding: .3rem 1.5rem; font-size: 1.05rem; }
}

/* A modal opened from the title (図鑑, 遊び方, 設定, 対人戦) keeps the title's
   background behind it instead of showing the table (title-screen.js coverTable). */
body.over-title::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1045; /* over the page and navbar, under Bootstrap's modal backdrop (1050) */
    background: radial-gradient(ellipse at 50% 0%, var(--hk-green-1) 0%, var(--hk-green-2) 55%, var(--hk-green-3) 100%);
}