body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #e2e8f0;
    background-color: #050510; /* 深淵の宇宙空間ベース色 */
    overflow-x: hidden;
}

/* --- 遠近感を生み出す宇宙の背景アニメーション --- */
@keyframes cosmicFlow {
    0% { transform: scale(1) translate(0, 0); opacity: 0.3; }
    50% { transform: scale(1.1) translate(3%, 3%); opacity: 0.5; }
    100% { transform: scale(1) translate(0, 0); opacity: 0.3; }
}

@keyframes deepAbyss {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* 遠景：不思議な星雲の光 */
.nebula-layer {
    position: fixed;
    inset: -50%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(88, 28, 135, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(2, 66, 82, 0.4) 0%, transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(15, 23, 42, 0.8) 0%, transparent 60%);
    z-index: -30;
    animation: deepAbyss 40s linear infinite;
    pointer-events: none;
}

/* 中景：星屑（SVGノイズで遠くの銀河を表現） */
.star-dust {
    position: fixed;
    inset: 0;
    z-index: -20;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.3"/%3E%3C/svg%3E');
    mix-blend-mode: color-dodge;
    opacity: 0.15;
    pointer-events: none;
}

/* --- ダーク・グラスモーフィズムのカード --- */
.cosmic-card {
    position: relative;
    overflow: hidden;
    background: rgba(15, 20, 35, 0.4); /* 深い闇の半透明 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* 微かなエッジ光 */
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.6), /* 強い浮遊感を生む影 */
        inset 0 0 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* カード内部を漂う微小なエネルギーの波 */
.cosmic-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    animation: cosmicFlow 10s infinite alternate ease-in-out;
    pointer-events: none;
}

.cosmic-card:active {
    transform: translateY(2px) scale(0.97);
    background: rgba(20, 25, 45, 0.6);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

/* --- 暗闇で発光するプラズマコア（アイコン） --- */
.plasma-sphere {
    position: relative;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 0 25px currentColor,
        inset 0 2px 5px rgba(255, 255, 255, 0.6),
        inset 0 -5px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

/* ガラスの鋭いハイライト */
.plasma-sphere::after {
    content: '';
    position: absolute;
    top: 8%; left: 15%; width: 35%; height: 35%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
}

.group:hover .plasma-sphere {
    transform: scale(1.08);
    filter: brightness(1.2);
}

/* アイコンの強い発光 */
.icon-glow {
    filter: drop-shadow(0 0 6px white) drop-shadow(0 0 12px currentColor);
}

/* --- 共通: ポータルグリッドのレスポンシブ設定 --- */
#portal-grid {
    align-items: stretch;
    justify-items: stretch;
}

#portal-grid .cosmic-card {
    box-sizing: border-box;
    padding: 0.5rem;
    overflow: hidden;
}

/* plasma-sphere は常に真円を維持 — flex圧縮を防止 */
#portal-grid .plasma-sphere {
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    width: clamp(40px, min(3.5rem, 50%, 12dvh), 56px);
    height: auto !important;
    margin-bottom: 0.25rem;
}

@media (min-width: 640px) {
    #portal-grid .plasma-sphere {
        width: min(4.5rem, 60%, 15dvh);
    }
}

#portal-grid .plasma-sphere svg {
    width: 60%;
    height: 60%;
}

/* --- 極端に縦が短い画面の対応 --- */
@media (max-height: 520px) {
    .slogan-text {
        display: none; /* 短い画面ではスローガンを非表示 */
    }
    header {
        margin-bottom: 0.25rem !important;
        margin-top: 0.25rem !important;
    }
    header h1 {
        font-size: 1.125rem !important; /* text-lg相当 */
    }
    #portal-grid {
        gap: 0.25rem !important;
    }
    #portal-grid .cosmic-card {
        padding: 0.25rem !important;
    }
    #portal-grid span {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
}

/* --- ポートレイト表示 --- */
@media (orientation: portrait) {
    #portal-grid {
        grid-template-rows: repeat(4, 1fr);
    }
}

/* --- ランドスケープ表示 --- */
@media (orientation: landscape) {
    #portal-grid {
        grid-template-rows: repeat(2, 1fr);
    }

    /* ランドスケープではヘッダー内のスローガンを非表示にしてスペース削減 */
    header p {
        display: none;
    }

    header h1 {
        font-size: 1.25rem;
    }

    header .mb-4 {
        margin-bottom: 0.25rem;
    }
}

/* --- iOS PWA Install Prompt --- */
.ios-pwa-prompt {
    position: fixed;
    bottom: -100%;
    left: 12px;
    right: 12px;
    z-index: 9999;
    background: rgba(30, 30, 30, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: bottom 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #fff;
    box-sizing: border-box;
}

.ios-pwa-prompt.show {
    bottom: calc(12px + env(safe-area-inset-bottom));
}

.ios-pwa-prompt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.ios-pwa-prompt-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.ios-pwa-prompt-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 12px;
    padding: 0;
}

.ios-pwa-prompt-body {
    font-size: 14px;
    line-height: 1.5;
    color: #ebebf5;
    margin: 0 0 12px 0;
}

.ios-pwa-prompt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0 4px;
    color: #0a84ff; /* iOS Blue */
}

.ios-pwa-prompt-footer {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #ebebf5;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
}

.ios-pwa-prompt-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    margin-right: 8px;
    position: relative;
    cursor: pointer;
    background: transparent;
    flex-shrink: 0;
}

.ios-pwa-prompt-checkbox:checked {
    background-color: #0a84ff;
    border-color: #0a84ff;
}

.ios-pwa-prompt-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ios-pwa-prompt-footer label {
    cursor: pointer;
}

/* Light mode support for iOS style, just in case user switches OS theme */
@media (prefers-color-scheme: light) {
    .ios-pwa-prompt {
        background: rgba(249, 249, 249, 0.85);
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #000;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    }
    .ios-pwa-prompt-close {
        background: rgba(0, 0, 0, 0.05);
        color: #000;
    }
    .ios-pwa-prompt-body,
    .ios-pwa-prompt-footer {
        color: #3c3c43;
    }
    .ios-pwa-prompt-footer {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    .ios-pwa-prompt-checkbox {
        border: 1px solid rgba(0, 0, 0, 0.2);
    }
}