/** * エントリー完了ポップアップ（争奪戦 / raid / 通常ガチャ waitlist 登録成功時） * spec: docs/features/battle-entry-cutin-popup/spec.md * * このファイルは base.blade.php で 内に読み込む（全ページで一貫適用）。 * 直近エントリー者アイコン部分は gacha-card.css の .waitlist-users-section 系 * ルールを .wec-content スコープで self-contained に複製している。 */ .wec-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000001; } .wec-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .wec-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; width: 343px; padding: 16px 16px 12px; flex-direction: column; align-items: center; gap: 0; border-radius: 8px; border: 2px solid #D9D9D9; background: #FFF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .wec-popup.is-shaking .wec-content { animation: wec-shake 0.55s cubic-bezier(.36,.07,.19,.97) both; } @keyframes wec-shake { 0% { transform: translate(-50%, -50%) rotate(0deg); } 10% { transform: translate(calc(-50% - 8px), calc(-50% - 2px)) rotate(-1.2deg); } 20% { transform: translate(calc(-50% + 10px), calc(-50% + 2px)) rotate(1.4deg); } 30% { transform: translate(calc(-50% - 8px), calc(-50% - 3px)) rotate(-1.6deg); } 40% { transform: translate(calc(-50% + 8px), calc(-50% + 3px)) rotate(1.6deg); } 50% { transform: translate(calc(-50% - 6px), calc(-50% - 2px)) rotate(-1.2deg); } 60% { transform: translate(calc(-50% + 6px), calc(-50% + 2px)) rotate(1.2deg); } 70% { transform: translate(calc(-50% - 4px), calc(-50% - 1px)) rotate(-0.8deg); } 80% { transform: translate(calc(-50% + 4px), calc(-50% + 1px)) rotate(0.8deg); } 90% { transform: translate(calc(-50% - 2px), calc(-50% - 1px)) rotate(-0.4deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } } .wec-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #333; text-align: center; } /* 虹色ボーダー付きサムネイルラッパー（gacha-card.css の .rainbow-border-wrapper と同じ仕様を self-contained に複製。全ページで安定して表示するため .wec-content スコープに閉じる） */ .wec-content .wec-thumbnail-wrap { width: 100%; max-width: 280px; padding: 4px; border-radius: 12px; background: conic-gradient(from var(--wec-rainbow-angle, 0deg), #ffc8c8, #ffe6b0, #fffaaa, #b8f0b8, #b0d8ff, #d4b0ff, #ffb8e0, #ffc8c8); animation: wec-rainbow-rotate 3s linear infinite; margin-bottom: 12px; box-sizing: border-box; } @property --wec-rainbow-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes wec-rainbow-rotate { to { --wec-rainbow-angle: 360deg; } } .wec-thumbnail { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; } /* 大きな赤ブロック（エントリー No. + 自分のアイコン + 名前） */ .wec-entry-block { width: 100%; background: linear-gradient(180deg, #E84545 0%, #C13030 100%); color: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; box-shadow: 0 4px 10px rgba(232, 69, 69, 0.35); text-align: center; } .wec-entry-block__no { font-size: 22px; font-weight: 900; line-height: 1.1; letter-spacing: 0.02em; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); } .wec-entry-block__no-label { font-size: 18px; margin: 0 2px 0 6px; } .wec-entry-block__no-value { font-size: 28px; color: #FFE374; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); } .wec-entry-block__self { display: flex; align-items: center; justify-content: center; gap: 10px; } .wec-entry-block__icon { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #FFE374; object-fit: cover; background: #fff; flex-shrink: 0; animation: wec-icon-charge 0.9s ease-in-out infinite, wec-icon-glow 1.4s ease-in-out infinite; transform-origin: center; will-change: transform, box-shadow; } @keyframes wec-icon-charge { 0% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(0); } 75% { transform: translateX(4px); } 100% { transform: translateX(0); } } @keyframes wec-icon-glow { 0%, 100% { box-shadow: 0 0 6px rgba(255, 227, 116, 0.6), 0 0 12px rgba(255, 227, 116, 0.35); } 50% { box-shadow: 0 0 12px rgba(255, 227, 116, 1), 0 0 24px rgba(255, 227, 116, 0.7), 0 0 36px rgba(255, 255, 255, 0.35); } } @media (prefers-reduced-motion: reduce) { .wec-entry-block__icon { animation: wec-icon-glow 1.4s ease-in-out infinite; } } .wec-entry-block__name { font-size: 18px; font-weight: 700; line-height: 1.2; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 直近エントリー者アイコン列: gacha-card.css の .waitlist-users-section 系ルールを self-contained に複製（gacha-card.css 未読み込み画面でも同一デザインを保証） */ .wec-content .waitlist-users-section { width: 100%; padding: 0; display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 10px; } .wec-content .waitlist-entry-label { color: #6F6969; text-align: center; font-size: 12px; font-weight: 700; line-height: normal; } .wec-content .waitlist-users-icons { display: flex; align-items: center; position: relative; } .wec-content .waitlist-user-icon { width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 2px solid #6F6969; background: lightgray; display: flex; align-items: center; justify-content: center; position: relative; } .wec-content .waitlist-user-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .wec-content .waitlist-user-ellipsis { display: flex; align-items: center; justify-content: center; } .wec-content .waitlist-user-ellipsis span { color: #6F6969; font-size: 14px; font-weight: 700; letter-spacing: 1px; } .wec-event-date { display: block; font-size: 20px; font-weight: 700; color: #E84545; text-align: center; line-height: 1.3; margin: 1px 0 10px; } .wec-footer { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 0; } .wec-calendar-btn { width: 100%; height: auto; padding: 10px 20px; font-size: 15px; font-weight: 700; margin-bottom: 8px; /* border-radius は .gummy-btn の 18px を継承（shell の inherit と整合させる） */ } .wec-calendar-btn.is-busy { opacity: 0.6; pointer-events: none; } .wec-close-link { color: #666; font-size: 13px; font-weight: 400; text-decoration: underline; cursor: pointer; padding: 4px 8px; background: transparent; border: none; } .wec-close-link:hover { color: #333; text-decoration: underline; } /* ダークモード配色（既存 dark-mode.css パレット流用） */ html.dark-mode-on .wec-content { background: #15172e; border-color: #2a2d4a; color: #e6e8f5; } html.dark-mode-on .wec-title { color: #e6e8f5; } html.dark-mode-on .wec-event-date { color: #ff7676; } html.dark-mode-on .wec-content .waitlist-entry-label, html.dark-mode-on .wec-content .waitlist-user-ellipsis span { color: #d8d9e0; } html.dark-mode-on .wec-content .waitlist-user-icon { border-color: #d8d9e0; } html.dark-mode-on .wec-close-link { color: #a0a0b0; } html.dark-mode-on .wec-close-link:hover { color: #e6e8f5; }