/* ===== バナナスリップ Webフォント ===== */
@font-face {
  font-family: 'BananaSlip';
  src: url('../assets/YDWbananaslipplus.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ===== Design Tokens ===== */
:root {
    --bg: #f0f4f8;
    --bg-dark: #0d1117;
    --surface: #ffffff;
    --surface-hover: #f8fafc;
    --primary: #2563eb;
    --primary-light: #dbeafe;
    --primary-dark: #1d4ed8;
    --accent: #f59e0b;
    --text: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-focus: #2563eb;
    --danger: #ef4444;
    --success: #22c55e;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.1);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.15);
    --shadow-xl: 0 20px 60px rgba(0,0,0,.2);
    --font: 'Inter','Noto Sans JP',system-ui,sans-serif;
    --transition: .2s cubic-bezier(.4,0,.2,1);
    --nav-h: 60px;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw}
body{font-family:var(--font);background:url('../assets/32661683_s.jpg') center/cover fixed no-repeat,#0a0a23;color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}
body::before{content:'';position:fixed;inset:0;background:rgba(8,8,28,.55);z-index:-1;pointer-events:none}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:var(--font);cursor:pointer;border:none;background:none}
input{font-family:var(--font)}
img{max-width:100%;display:block}

/* ===== Navbar ===== */
.navbar{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:var(--nav-h)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;height:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:.4rem;text-decoration:none}
.nav-logo:hover{text-decoration:none}
.nav-logo-img{height:40px;width:auto;display:block}
.nav-logo-manager{font-weight:900;font-size:1.15rem;color:#FED020;letter-spacing:.02em;text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000}
.nav-links{display:flex;gap:.25rem}
.nav-link{padding:.5rem 1rem;border-radius:var(--radius-sm);color:var(--text-secondary);font-weight:600;font-size:.9rem;transition:var(--transition);text-decoration:none;position:relative}
.nav-link:hover{color:var(--primary);background:var(--primary-light);text-decoration:none}
.nav-link.active{color:var(--primary)}
.nav-link.active::after{content:'';position:absolute;bottom:-1px;left:1rem;right:1rem;height:2px;background:var(--primary);border-radius:2px}

/* ===== Main Content ===== */
.main-content{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem;width:100%}
@media(max-width:600px){.main-content{padding:1rem .75rem 3rem}}

/* ===== Editor Layout ===== */
.editor-container{display:grid;grid-template-columns:1fr 280px;gap:2rem;align-items:start;min-width:0}
.editor-left{min-width:0}
.editor-right{min-width:0}
@media(max-width:768px){.editor-container{grid-template-columns:1fr;gap:1rem}}

.editor-left{display:flex;flex-direction:column;gap:1rem}
.editor-right{position:sticky;top:calc(var(--nav-h) + 1.5rem);display:flex;flex-direction:column;gap:1rem}

/* ===== Form Card ===== */
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;display:flex;align-items:center;gap:.75rem;transition:var(--transition)}
.form-card:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--primary-light)}
.form-label{font-weight:600;font-size:.85rem;color:var(--text-secondary);white-space:nowrap}
.form-input{flex:1;border:none;outline:none;font-size:1rem;color:var(--text);background:transparent;min-width:0}
.form-input::placeholder{color:var(--text-muted)}
.form-card-textarea{align-items:flex-start;flex-direction:column;gap:.5rem}
.form-textarea{width:100%;border:none;outline:none;font-size:.95rem;color:var(--text);background:transparent;resize:vertical;font-family:var(--font);line-height:1.6;min-height:72px}
.form-textarea::placeholder{color:var(--text-muted)}

/* 連絡先カード: ヒント文を含むので縦並びレイアウト */
#contactCard{flex-direction:column;align-items:stretch;gap:.4rem}
#contactCard .form-label{white-space:normal}
#contactCard .form-input{width:100%;padding:.4rem 0}
#contactCard .form-hint{width:100%}

/* ===== Help Banner ===== */
.help-banner{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem}
.help-icon{font-size:1.5rem;background:var(--primary);color:#fff;width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.help-text{display:flex;flex-direction:column;gap:.1rem}
.help-text strong{font-size:.95rem;color:var(--text)}
.help-text span{font-size:.8rem;color:var(--text-secondary)}

/* ===== Bingo Editor Grid ===== */
.bingo-editor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:8px;box-shadow:var(--shadow-sm)}

.grid-cell{aspect-ratio:1;border:2px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;background:var(--surface-hover)}
.grid-cell:hover{border-color:var(--primary);background:var(--primary-light);transform:scale(1.02)}
.grid-cell.filled{border-style:solid;border-color:var(--border);cursor:default;background:#fff}
.grid-cell.filled:hover{transform:none;border-color:var(--text-muted)}
.grid-cell.free-cell{border-color:var(--accent)!important;background:linear-gradient(135deg,#fffbeb,#fef3c7)!important}

.cell-placeholder{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text-muted)}
.cell-plus{font-size:1.5rem;font-weight:300;line-height:1}
.cell-num{font-size:.7rem;font-weight:600}

/* Filled cell content */
.cell-filled-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cell-cover{position:absolute;inset:0;object-fit:cover;opacity:.85;transition:opacity var(--transition)}
.cell-title-overlay{position:relative;z-index:2;color:#fff;font-size:.65rem;font-weight:700;text-align:center;padding:4px;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.8);background:linear-gradient(transparent,rgba(0,0,0,.7));width:100%;position:absolute;bottom:0;padding:6px 4px 4px}
.cell-remove-btn{position:absolute;top:4px;right:4px;z-index:5;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}
.grid-cell.filled:hover .cell-remove-btn{opacity:1}
.cell-remove-btn:hover{background:var(--danger)}

/* FREE cell */
.cell-free-label{font-size:1rem;font-weight:900;color:var(--accent);letter-spacing:2px}

/* ===== Free Space Section ===== */
.free-space-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem}
.free-toggle-btn{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--text);padding:.4rem 0;width:100%;transition:var(--transition)}
.free-toggle-btn:hover{color:var(--accent)}
.free-icon{font-size:1.2rem}
.free-selector{margin-top:.75rem}
.free-desc{font-size:.8rem;color:var(--text-secondary);margin-bottom:.5rem}
.free-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:.5rem}
.free-cell{padding:.5rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;color:var(--text);background:var(--surface-hover);transition:var(--transition)}
.free-cell:hover:not(:disabled){background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.free-cell.selected{background:var(--accent);color:#fff;border-color:var(--accent)}
.free-cell.disabled{opacity:.3;cursor:not-allowed}
.free-clear-btn{font-size:.75rem;color:var(--text-muted);padding:.25rem .5rem;border-radius:var(--radius-sm);transition:var(--transition)}
.free-clear-btn:hover{color:var(--danger);background:#fef2f2}

/* ===== IGDB Settings ===== */
.igdb-settings{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.igdb-summary{padding:1rem 1.25rem;font-weight:600;font-size:.9rem;cursor:pointer;color:var(--text-secondary);transition:var(--transition);list-style:none}
.igdb-summary::-webkit-details-marker{display:none}
.igdb-summary::before{content:'▶';margin-right:.5rem;font-size:.7rem;display:inline-block;transition:transform .2s}
details[open] .igdb-summary::before{transform:rotate(90deg)}
.igdb-summary:hover{color:var(--text)}
.igdb-form{padding:0 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}
.igdb-desc{font-size:.8rem;color:var(--text-secondary);line-height:1.5}
.igdb-desc a{font-size:.8rem}
.igdb-field{display:flex;flex-direction:column;gap:.25rem}
.igdb-field label{font-size:.75rem;font-weight:600;color:var(--text-secondary)}
.igdb-field input{padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;transition:var(--transition)}
.igdb-field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.igdb-save-btn{align-self:flex-start;padding:.5rem 1.25rem;background:var(--primary);color:#fff;border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;transition:var(--transition)}
.igdb-save-btn:hover{background:var(--primary-dark)}
.igdb-status{font-size:.8rem;min-height:1.2rem}

/* ===== Submit Button ===== */
.submit-btn{width:100%;padding:1rem 1.5rem;background:var(--primary);color:#fff;border-radius:var(--radius);font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:var(--transition);box-shadow:var(--shadow-md)}
.submit-btn:not(:disabled):hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.submit-btn:disabled{opacity:.4;cursor:not-allowed}
.submit-arrow{font-size:1.2rem;transition:transform .2s}
.submit-btn:not(:disabled):hover .submit-arrow{transform:translateX(4px)}

.submit-progress{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem}
.progress-text{font-size:.8rem;color:var(--text-secondary);font-weight:600;margin-bottom:.5rem}
.progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1)}

/* ===== Search Modal ===== */
.search-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:15vh}
.search-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.search-modal-content{position:relative;z-index:1;width:90%;max-width:540px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden;animation:modalIn .25s ease-out}
@keyframes modalIn{from{opacity:0;transform:translateY(-20px) scale(.97)}to{opacity:1;transform:none}}

.search-header{display:flex;align-items:center;border-bottom:1px solid var(--border);padding:.75rem 1rem}
.search-input{flex:1;border:none;outline:none;font-size:1rem;color:var(--text);padding:.25rem}
.search-input::placeholder{color:var(--text-muted)}
.search-close-btn{width:32px;height:32px;border-radius:var(--radius-sm);color:var(--text-muted);font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.search-close-btn:hover{background:var(--border);color:var(--text)}

.search-results{max-height:400px;overflow-y:auto;padding:.5rem}
.search-empty{padding:2rem;text-align:center;color:var(--text-muted);font-size:.9rem}
.search-loading{padding:2rem;text-align:center;color:var(--text-muted);font-size:.9rem}
.search-loading::after{content:'';display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite;margin-left:.5rem;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

.search-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}
.search-item:hover{background:var(--primary-light)}
.search-item-cover{width:48px;height:64px;border-radius:6px;object-fit:cover;background:var(--border);flex-shrink:0}
.search-item-info{flex:1;min-width:0}
.search-item-name{font-weight:600;font-size:.9rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px}

/* ===== Toast ===== */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.5rem;box-shadow:var(--shadow-lg);z-index:3000;animation:toastIn .3s ease-out}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ===== Footer ===== */
.footer{text-align:center;padding:2rem;color:var(--text-muted);font-size:.8rem;border-top:1px solid var(--border)}

/* ==================================================
   ADMIN PAGE
   ================================================== */
.admin-page{background:transparent}

.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.admin-header-left{display:flex;align-items:center;gap:.75rem}
.admin-header-left h1{font-size:1.5rem;font-weight:800;color:var(--text)}
.admin-count{background:var(--primary-light);color:var(--primary);padding:.2rem .75rem;border-radius:20px;font-size:.8rem;font-weight:700}
.admin-header-right{display:flex;gap:.5rem}

.admin-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;transition:var(--transition);border:1px solid var(--border)}
.admin-btn.secondary{background:var(--surface);color:var(--text)}
.admin-btn.secondary:hover{background:var(--surface-hover);border-color:var(--text-muted)}
.admin-btn.danger{background:#fef2f2;color:var(--danger);border-color:#fecaca}
.admin-btn.danger:hover{background:#fee2e2}

/* ===== Admin Grid ===== */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}

.admin-empty{grid-column:1/-1;text-align:center;padding:4rem 2rem;color:var(--text-muted)}
.empty-icon{font-size:3rem;margin-bottom:1rem}
.admin-empty h3{font-size:1.1rem;color:var(--text);margin-bottom:.5rem}
.admin-empty p{font-size:.9rem;margin-bottom:1rem}
.empty-link{font-weight:600;font-size:.9rem}

/* ===== Admin Card (Thumbnail) ===== */
.admin-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:var(--transition);position:relative}
.admin-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.admin-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:6px;background:var(--surface)}
.admin-card-cell{aspect-ratio:1;background:var(--surface-hover);border-radius:4px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.admin-card-cell img{width:100%;height:100%;object-fit:cover}
.admin-card-cell.free-marker{background:linear-gradient(135deg,#fef3c7,#fde68a)}
.admin-card-cell.free-marker::after{content:'FREE';font-size:.45rem;font-weight:800;color:var(--accent);letter-spacing:1px}
.admin-card-cell-title{font-size:.35rem;color:var(--text-secondary);text-align:center;padding:2px;line-height:1.1;word-break:break-all;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.admin-card-footer{padding:.6rem .75rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.admin-card-name{font-weight:700;font-size:.85rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-card-date{font-size:.7rem;color:var(--text-muted)}
.admin-card-delete{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:.7rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);z-index:5}
.admin-card:hover .admin-card-delete{opacity:1}
.admin-card-delete:hover{background:var(--danger)}

/* ===== Card Modal (Admin) ===== */
.card-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center}
.card-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
.card-modal-content{position:relative;z-index:1;width:90%;max-width:480px;animation:modalIn .3s ease-out}
.modal-top-bar{position:absolute;top:-48px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.modal-download-btn{padding:.45rem 1rem;border-radius:var(--radius-sm);background:rgba(255,255,255,.15);color:#fff;font-size:.85rem;font-weight:600;transition:var(--transition);border:1px solid rgba(255,255,255,.25)}
.modal-download-btn:hover:not(:disabled){background:rgba(255,255,255,.28)}
.modal-download-btn:disabled{opacity:.6;cursor:wait}
.modal-close-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}
.modal-close-btn:hover{background:rgba(255,255,255,.3)}

.modal-card-wrapper{background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xl)}
.modal-card-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);text-align:center}
.modal-card-header h2{font-size:1.3rem;font-weight:800;color:var(--text)}
.modal-card-header .modal-date{font-size:.8rem;color:var(--text-muted);margin-top:.25rem}

.modal-bingo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px}
.modal-bingo-cell{aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;position:relative;cursor:pointer;transition:var(--transition);background:var(--surface-hover);display:flex;align-items:center;justify-content:center;flex-direction:column}
.modal-bingo-cell:not(.free-marker):hover{transform:scale(1.03);box-shadow:var(--shadow-md)}
.modal-bingo-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-cell-title{position:relative;z-index:2;color:#fff;font-size:.7rem;font-weight:700;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.9);padding:4px;line-height:1.2;position:absolute;bottom:0;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.75));padding:8px 4px 6px}
.modal-bingo-cell.free-marker{background:linear-gradient(135deg,#fef3c7,#fde68a);cursor:default}
.modal-bingo-cell.free-marker .modal-free-label{font-size:1.2rem;font-weight:900;color:var(--accent);letter-spacing:3px}
.modal-cell-no-img{font-size:.75rem;color:var(--text-secondary);text-align:center;padding:.5rem;word-break:break-all}
.modal-steam-hint{position:absolute;top:4px;right:4px;z-index:5;background:rgba(0,0,0,.6);color:#fff;font-size:.55rem;padding:2px 6px;border-radius:4px;opacity:0;transition:var(--transition);pointer-events:none}
.modal-bingo-cell:not(.free-marker):hover .modal-steam-hint{opacity:1}
/* マスの左下に出す「代替」ボタン: ストアが地域制限で開けない時の Steam コミュニティページへ */
.modal-alt-link-btn{position:absolute;bottom:4px;left:4px;z-index:6;background:rgba(0,0,0,.55);color:#fff;font-size:.55rem;padding:2px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.25);cursor:pointer;opacity:0;transition:var(--transition);font-weight:600;letter-spacing:.02em}
.modal-bingo-cell:not(.free-marker):hover .modal-alt-link-btn{opacity:.85}
.modal-alt-link-btn:hover{opacity:1 !important;background:rgba(0,0,0,.8)}

/* Admin card theme */
.admin-card-theme{font-size:.65rem;color:var(--text-muted);padding:0 .5rem .4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}

/* Modal theme */
.modal-theme{font-size:.85rem;color:var(--text-secondary);font-weight:600;margin-top:.1rem}

/* ===== Auth Overlay ===== */
.auth-overlay{position:fixed;inset:0;z-index:900;background:rgba(8,8,28,.75);display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem 2rem;max-width:400px;width:100%;text-align:center;box-shadow:var(--shadow-lg);animation:modalIn .4s ease-out}
.auth-icon{font-size:3rem;margin-bottom:1rem}
.auth-title{font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:.5rem}
.auth-desc{font-size:.9rem;color:var(--text-secondary);margin-bottom:1.5rem}
.auth-input-wrap{display:flex;flex-direction:column;gap:.5rem}
.auth-input{padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;color:var(--text);transition:var(--transition);width:100%}
.auth-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.auth-submit-btn{margin-top:.25rem;padding:.75rem 1.5rem;background:var(--primary);color:#fff;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem;transition:var(--transition);white-space:nowrap;width:100%}
.auth-submit-btn:hover{background:var(--primary-dark)}
.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed}
.auth-error{margin-top:1rem;color:var(--danger);font-size:.85rem;font-weight:600;animation:shake .4s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* ===== Lottery Panel ===== */
.lottery-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow-sm)}
.lottery-top{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.lottery-draw-area{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.draw-btn{display:flex;align-items:center;gap:.6rem;padding:1rem 2rem;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border-radius:var(--radius-md);font-size:1.1rem;font-weight:800;transition:all .2s;box-shadow:0 4px 15px rgba(245,158,11,.4);cursor:pointer}
.draw-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,158,11,.5)}
.draw-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.draw-btn-icon{font-size:1.4rem}
.draw-pool-info{font-size:.8rem;color:var(--text-muted);font-weight:500}
.draw-result-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:var(--radius-md);min-height:80px;border:2px solid #f59e0b}
.draw-result-label{font-size:.8rem;color:#92400e;font-weight:700;margin-bottom:.3rem}
.draw-result-title{font-size:1.3rem;font-weight:900;color:#78350f;text-align:center;word-break:break-all}
.draw-result-title.cycling{animation:textCycle .1s infinite;opacity:.7}
.draw-result-title.revealed{animation:revealPop .5s ease-out;opacity:1}
@keyframes textCycle{0%{opacity:.5}50%{opacity:.8}100%{opacity:.5}}
@keyframes revealPop{0%{transform:scale(1.5);opacity:0}60%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}

/* Lottery History */
.lottery-history{margin-top:1.2rem;border-top:1px solid var(--border);padding-top:1rem}
.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.history-header h3{font-size:.95rem;font-weight:700;color:var(--text);margin:0}
.history-clear-btn{font-size:.75rem;color:var(--danger);background:none;border:1px solid var(--danger);border-radius:var(--radius-sm);padding:.25rem .75rem;cursor:pointer;transition:var(--transition)}
.history-clear-btn:hover{background:var(--danger);color:#fff}
.history-list{display:flex;flex-wrap:wrap;gap:.4rem;max-height:200px;overflow-y:auto}
.history-item{display:flex;align-items:center;gap:.4rem;padding:.35rem .7rem;background:var(--bg);border-radius:var(--radius-sm);font-size:.8rem;border:1px solid var(--border)}
.history-item.latest{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#f59e0b;font-weight:700}
.history-num{color:var(--text-muted);font-weight:700;font-size:.7rem}
.history-title{color:var(--text);font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-time{color:var(--text-muted);font-size:.7rem}

/* ===== Status Summary ===== */
.status-summary{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.status-group{flex:1;min-width:200px;border-radius:var(--radius-md);padding:1rem 1.2rem}
.bingo-group{background:linear-gradient(135deg,#fef2f2,#fee2e2);border:2px solid #ef4444}
.reach-group{background:linear-gradient(135deg,#fff7ed,#ffedd5);border:2px solid #f97316}
.status-label{font-size:1rem;font-weight:800;margin-bottom:.6rem}
.bingo-group .status-label{color:#b91c1c}
.reach-group .status-label{color:#c2410c}
.status-names{display:flex;flex-wrap:wrap;gap:.4rem}
.status-badge{padding:.3rem .7rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:700}
.bingo-badge{background:#ef4444;color:#fff}
.reach-badge{background:#f97316;color:#fff}

/* ===== Card Status Badges ===== */
.card-status-badge{position:absolute;top:-2px;left:-2px;z-index:5;padding:.3rem .7rem;border-radius:var(--radius-sm) 0 var(--radius-sm) 0;font-size:.7rem;font-weight:800;letter-spacing:.5px}
.card-status-badge.bingo{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px rgba(239,68,68,.4)}
.card-status-badge.reach{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;box-shadow:0 2px 8px rgba(249,115,22,.4)}
.admin-card.card-bingo{border:2px solid #ef4444;box-shadow:0 0 15px rgba(239,68,68,.2)}
.admin-card.card-reach{border:2px solid #f97316;box-shadow:0 0 10px rgba(249,115,22,.15)}

/* Matched cell highlighting */
.admin-card-cell{position:relative;overflow:hidden;border-radius:4px}
.admin-card-cell.matched{position:relative}
.admin-card-cell.matched::after{content:'✔';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(34,197,94,.45);color:#fff;font-size:.8rem;font-weight:900;border-radius:2px;z-index:2}
.admin-card-cell.free-marker.matched::after{background:rgba(34,197,94,.35)}

/* === 最新の当選マス: 金 (派手・主役) - admin画面用 === */
.admin-card-cell.matched.recent-hit::after{
    background:radial-gradient(circle at center,
        rgba(255,215,0,.6) 0%,
        rgba(255,165,0,.5) 60%,
        rgba(255,140,0,.4) 100%);
    color:#fff200;
    text-shadow:
        0 0 6px #ffd700,
        0 0 12px #ffae00,
        0 0 18px #ff8c00,
        0 2px 6px rgba(0,0,0,.6),
        -1px -1px 0 #b8860b, 1px -1px 0 #b8860b,
        -1px  1px 0 #b8860b, 1px  1px 0 #b8860b;
    box-shadow:
        inset 0 0 0 3px #ffd700,
        inset 0 0 15px rgba(255,215,0,.6),
        0 0 15px rgba(255,215,0,.8);
    animation:adminRecentHitPulse 2.4s ease-in-out infinite;
    font-size:1rem;
}
@keyframes adminRecentHitPulse{
    0%,100%{box-shadow:inset 0 0 0 3px #ffd700,inset 0 0 15px rgba(255,215,0,.6),0 0 12px rgba(255,215,0,.7)}
    50%{box-shadow:inset 0 0 0 4px #ffec5c,inset 0 0 25px rgba(255,215,0,.9),0 0 25px rgba(255,215,0,1)}
}

/* マッチ瞬間のフラッシュ (新規ヒット時の派手な一回限り演出) - admin画面用 */
.admin-card-cell.flash{
    animation:adminCellFlash 1.6s ease;
    z-index:10;
}
.admin-card-cell.flash::before{
    content:'';
    position:absolute;
    inset:-4px;
    border:4px solid #ffd700;
    border-radius:inherit;
    box-shadow:
        0 0 25px #ffd700,
        0 0 50px #facc15,
        inset 0 0 20px rgba(255,215,0,.5);
    pointer-events:none;
    animation:adminCellFlashGlow 1.6s ease;
    z-index:3;
}
@keyframes adminCellFlash{
    0%{transform:scale(1)}
    15%{transform:scale(1.2) rotate(-3deg)}
    30%{transform:scale(.95) rotate(2deg)}
    45%{transform:scale(1.1) rotate(-1deg)}
    60%{transform:scale(.98)}
    100%{transform:scale(1) rotate(0)}
}
@keyframes adminCellFlashGlow{
    0%{opacity:0;transform:scale(.8)}
    20%{opacity:1;transform:scale(1.05)}
    100%{opacity:0;transform:scale(1)}
}

/* === ビンゴライン強調 (admin画面用) === */
.admin-card-cell.bingo-line{
    outline:3px solid rgba(244,63,94,.85);
    outline-offset:-3px;
}
.admin-card-cell.bingo-line.matched::after{
    background:linear-gradient(135deg,rgba(244,63,94,.55),rgba(168,85,247,.55));
    box-shadow:inset 0 0 0 3px #f43f5e,0 0 15px rgba(244,63,94,.6);
}
/* ビンゴラインのrecent-hitは金優先 */
.admin-card-cell.bingo-line.matched.recent-hit::after{
    background:radial-gradient(circle at center,
        rgba(255,215,0,.65) 0%,
        rgba(244,63,94,.5) 70%,
        rgba(168,85,247,.45) 100%);
    box-shadow:
        inset 0 0 0 3px #ffd700,
        inset 0 0 15px rgba(244,63,94,.5),
        0 0 15px rgba(255,215,0,.9);
}

/* === REACH 画面エフェクト overlay (admin画面用) === */
.reach-effect-overlay{
    position:fixed;
    inset:0;
    background:radial-gradient(circle at center,rgba(249,115,22,.3),rgba(0,0,0,.6));
    z-index:9998;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    animation:reachOverlayFade 1.6s ease;
}
.reach-text{
    font-size:clamp(4rem,12vw,9rem);
    font-weight:900;
    color:#fff;
    text-shadow:
        0 0 20px #f97316,
        0 0 40px #ea580c,
        0 0 60px #f97316,
        4px 4px 0 #b91c1c,
        8px 8px 20px rgba(0,0,0,.7);
    letter-spacing:.05em;
    font-family:'Rokkitt','Inter',sans-serif;
    animation:reachTextSlam 1.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes reachOverlayFade{
    0%{opacity:0}
    15%{opacity:1}
    75%{opacity:1}
    100%{opacity:0}
}
@keyframes reachTextSlam{
    0%{transform:scale(.3) rotate(-15deg);opacity:0}
    20%{transform:scale(1.3) rotate(5deg);opacity:1}
    35%{transform:scale(.95) rotate(-2deg)}
    50%{transform:scale(1.05) rotate(1deg)}
    65%{transform:scale(1) rotate(0)}
    80%{transform:scale(1) rotate(0);opacity:1}
    100%{transform:scale(1.1);opacity:0}
}

/* Modal matched cells */
.modal-bingo-cell.matched{border:3px solid #22c55e !important;box-shadow:0 0 10px rgba(34,197,94,.3)}
.modal-bingo-cell.matched::before{content:'';position:absolute;inset:0;background:rgba(34,197,94,.15);z-index:1;border-radius:inherit;pointer-events:none}
.modal-matched-check{position:absolute;top:6px;left:6px;z-index:5;width:22px;height:22px;background:#22c55e;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;box-shadow:0 2px 6px rgba(34,197,94,.4)}

/* Modal status */
.modal-status{display:inline-block;padding:.4rem 1rem;border-radius:var(--radius-sm);font-weight:800;font-size:.9rem;margin-top:.5rem}
.bingo-status{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.reach-status{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff}

/* ===== Complete Modal (応募完了) ===== */
.complete-modal{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;padding:1rem}
.complete-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.complete-modal-content{position:relative;z-index:1;background:var(--surface);border-radius:var(--radius-lg);max-width:460px;width:100%;padding:2rem;box-shadow:var(--shadow-lg);animation:modalIn .35s ease-out;max-height:90vh;overflow-y:auto}
.complete-header{text-align:center;margin-bottom:1.5rem}
.complete-header h2{font-size:1.5rem;font-weight:900;color:var(--text);margin-bottom:.3rem}
.complete-header p{font-size:.9rem;color:var(--text-secondary)}
.complete-actions{display:flex;gap:.8rem;margin-top:1.5rem;justify-content:center;flex-wrap:wrap}
.complete-download-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem;transition:var(--transition)}
.complete-download-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,197,94,.4)}
.complete-download-btn:disabled{opacity:.6;cursor:wait}
.complete-close-btn{padding:.75rem 1.5rem;background:var(--bg);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);font-weight:600;transition:var(--transition)}
.complete-close-btn:hover{background:var(--surface-hover);color:var(--text)}

/* Card Preview (for download) - 参考デザイン準拠 */
.complete-modal-content{max-width:720px}

/* === カード全体 === */
.preview-card{
  position:relative;width:100%;border-radius:var(--radius-md);overflow:hidden;
  background:#0a0a23;display:flex;flex-direction:column;
}
.preview-card-bg{
  position:absolute;inset:0;
  background:url('../assets/32661683_s.jpg') center/cover no-repeat;
  opacity:.3;z-index:0;
}

/* === タイトルカード画像: 横幅90%、中央配置 === */
/* (新画像は「積みゲーBINGO ～2026夏～」が一体化した横長デザイン) */
.preview-logo-wrap{
  position:relative;z-index:1;width:100%;flex-shrink:0;
  padding:0.6rem 0 0.3rem;
  display:flex;justify-content:center;
}
.preview-logo{
  width:90%;height:auto;display:block;max-width:520px;
  filter:drop-shadow(2px 2px 6px rgba(0,0,0,.7));
}

/* === preview-season は新画像内で表現されているため未使用 === */
.preview-season{
  display:none;
}

/* === 応募者名 + テーマ: Rokkitt Bold Italic, #fed020, 黒縁取り === */
.preview-info-bar{
  position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;padding:.15rem .5rem .05rem;flex-shrink:0;gap:0;
}
.preview-player-name{
  font-family:'Rokkitt', 'Georgia', serif;
  font-size:1.75rem;font-weight:900;font-style:italic;
  color:#fed020;
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill;
  text-shadow:3px 3px 4px rgba(0,0,0,.8);
  letter-spacing:.05em;
  line-height:1.2;
}
.preview-theme{
  width:100%;text-align:center;
  font-family:'Rokkitt', 'Georgia', serif;
  font-weight:700;font-style:italic;
  color:#fed020;
  -webkit-text-stroke:1.5px #000;
  paint-order:stroke fill;
  text-shadow:2px 2px 3px rgba(0,0,0,.8);
  white-space:nowrap;
  /* フォントサイズはJSで動的に設定 */
}

/* === 3x3グリッド領域（マスコット背景付き） === */
.preview-grid-area{
  position:relative;z-index:1;padding:.3rem .5rem .5rem;
}
.preview-grid-mascot{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:0;
}
.preview-grid-mascot img{
  width:70%;height:auto;opacity:.18;
  filter:grayscale(.3);
}
.preview-card-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
}

/* === 各マス: 正方形 + ぼかし背景 + 中央画像 === */
.preview-cell{
  position:relative;aspect-ratio:1;overflow:hidden;
  border-radius:3px;border:1px solid rgba(255,255,255,.2);
  background:#1a1a2e;
}
/* ぼかし背景レイヤー */
.preview-cell-blur{
  position:absolute;inset:-10px;
  background-size:cover;background-position:center;
  filter:blur(8px) brightness(.5);
  opacity:.7;z-index:0;
}
/* メイン画像: 横幅フィット、上下中央 */
.preview-cell-img{
  position:relative;z-index:1;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.preview-cell-img img{
  width:100%;height:auto;display:block;
  object-fit:contain;
}
/* タイトル文字 */
.preview-cell-title{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:.15rem .2rem;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  color:#fff;font-size:.5rem;font-weight:700;
  text-align:center;line-height:1.2;word-break:break-all;
}

/* FREE マス */
.preview-cell.free{
  background:radial-gradient(circle,#dc2626 60%,#991b1b 100%);
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fbbf24;
}
.preview-cell.free span{
  font-size:1.1rem;font-weight:900;color:#fff;
  letter-spacing:3px;text-shadow:1px 1px 4px rgba(0,0,0,.6);
}

/* ===== Search Manual Section ===== */
.search-manual-section{border-top:1px solid var(--border);padding:.75rem;background:var(--surface-hover)}
.search-manual-label{font-size:.75rem;color:var(--text-muted);font-weight:600;margin-bottom:.5rem}
.search-manual-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.4rem}
.search-manual-row:last-child{margin-bottom:0}
.search-manual-title,.search-manual-url,.search-manual-image-url{flex:1;min-width:80px;padding:.4rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;color:var(--text);background:var(--surface);outline:none;transition:var(--transition)}
.search-manual-title:focus,.search-manual-url:focus,.search-manual-image-url:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--primary-light)}
.search-manual-btn{padding:.4rem .9rem;background:var(--primary);color:#fff;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;white-space:nowrap;transition:var(--transition)}
.search-manual-btn:hover{background:var(--primary-dark)}
.search-manual-image-btn{padding:.4rem .8rem;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:var(--transition)}
.search-manual-image-btn:hover{background:var(--surface-hover);border-color:var(--primary)}
.search-manual-image-btn:disabled{opacity:.55;cursor:wait}
.search-manual-actions{display:flex;justify-content:flex-end;margin-top:.5rem}

/* 画像検索結果 */
.search-manual-image-results{margin-top:.5rem;padding:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.image-search-loading{font-size:.8rem;color:var(--text-muted);text-align:center;padding:.5rem}
.image-search-empty{font-size:.8rem;color:var(--text-muted);text-align:center;padding:.5rem;line-height:1.6}
.image-search-label{font-size:.7rem;color:var(--text-muted);font-weight:600;margin-bottom:.4rem}
.image-search-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:.4rem}
.image-search-card{position:relative;border:2px solid transparent;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;background:var(--surface-hover);transition:var(--transition);aspect-ratio:3/4}
.image-search-card:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.12)}
.image-search-card.selected{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.image-search-card img{width:100%;height:100%;object-fit:cover;display:block}
.image-search-card .image-search-source{position:absolute;bottom:0;left:0;right:0;font-size:.55rem;text-align:center;background:rgba(0,0,0,.55);color:#fff;padding:.1rem .2rem;font-weight:600}
/* ソース別のラベル色 (一目で出所が分かるように) */
.image-search-card .image-search-source[data-src^="steam"]{background:rgba(23,42,68,.85)}
.image-search-card .image-search-source[data-src="rawg"]{background:rgba(139,92,246,.85)}
.image-search-card .image-search-source[data-src^="wiki"]{background:rgba(75,85,99,.85)}

/* ===== Search Duplicate Warning ===== */
.search-duplicate{margin:.5rem;padding:.85rem 1rem;border-radius:var(--radius-sm);background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:.9rem;font-weight:600}

/* ===== Admin Contact ===== */
.admin-card-contact{font-size:.6rem;color:var(--text-muted);padding:0 .5rem .3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-contact{font-size:.82rem;color:var(--text-secondary);margin-top:.2rem;font-weight:500}
/* ===== 抽選モード切替タブ ===== */
.draw-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.draw-mode-tab {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: .9rem;
    transition: var(--transition);
}
.draw-mode-tab:hover { border-color: var(--primary); color: var(--primary); }
.draw-mode-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-md);
}

/* ===== 抽選回数カウンター ===== */
.draw-counter {
    margin-top: 8px;
    font-size: .85rem;
    color: var(--text-muted);
    text-align: center;
}

/* ===== 連続抽選の2件目表示 ===== */
.draw-result-title.secondary {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px dashed rgba(255,255,255,.2);
    opacity: .95;
}

/* ===== 50回目発動ボタン演出 ===== */
.draw-btn.special-trigger {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #8b5cf6 100%);
    background-size: 200% 200%;
    animation: specialBtnPulse 2s ease infinite;
    box-shadow: 0 0 30px rgba(245, 158, 11, .6);
}
@keyframes specialBtnPulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ===== 特別抽選パネル ===== */
.special-draw-panel {
    margin-top: 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(245,158,11,.08) 0%, rgba(139,92,246,.08) 100%);
    border: 2px solid #f59e0b;
    border-radius: var(--radius-lg);
    box-shadow: 0 0 40px rgba(245,158,11,.3);
    position: relative;
    overflow: hidden;
}
.special-draw-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(245,158,11,.04) 20px, rgba(245,158,11,.04) 40px);
    pointer-events: none;
}
.special-draw-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}
.special-draw-badge {
    display: inline-block;
    padding: 4px 14px;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
    font-weight: 900;
    font-size: .85rem;
    border-radius: 20px;
    letter-spacing: .12em;
    box-shadow: 0 4px 12px rgba(245,158,11,.5);
    animation: badgeGlow 1.5s ease-in-out infinite alternate;
}
@keyframes badgeGlow {
    from { box-shadow: 0 4px 12px rgba(245,158,11,.5); }
    to { box-shadow: 0 4px 20px rgba(245,158,11,.9), 0 0 30px rgba(239,68,68,.5); }
}
.special-draw-header h3 {
    margin: 10px 0 4px;
    font-size: 1.4rem;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.special-draw-desc {
    font-size: .9rem;
    color: var(--text-secondary);
    margin: 0;
}
.special-draw-body { position: relative; }
.special-step {
    background: var(--surface);
    padding: 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.special-step-label {
    font-size: .8rem;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: .1em;
    margin-bottom: 10px;
}
.special-step-hint {
    font-size: .85rem;
    color: var(--text-secondary);
    margin: 0 0 12px;
}
.special-pool-info {
    text-align: center;
    color: var(--text-secondary);
    font-size: .9rem;
    margin-bottom: 10px;
}
.special-draw-btn,
.special-confirm-btn {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius);
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(245,158,11,.4);
}
.special-confirm-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34,197,94,.4);
}
.special-draw-btn:hover:not(:disabled),
.special-confirm-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(245,158,11,.6);
}
.special-confirm-btn:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(34,197,94,.6);
}
.special-draw-btn:disabled,
.special-confirm-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.special-cancel-btn {
    display: block;
    margin: 0 auto;
    padding: 8px 20px;
    color: var(--text-muted);
    font-size: .85rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.special-cancel-btn:hover { color: var(--danger); border-color: var(--danger); }

.special-person-result {
    margin-top: 14px;
    text-align: center;
}
.special-person-label {
    font-size: .85rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.special-person-name {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: var(--transition);
}
.special-person-name.cycling { opacity: .6; }
.special-person-name.revealed {
    animation: specialReveal .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes specialReveal {
    0% { transform: scale(.6); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== 特別抽選 タイトル選択グリッド ===== */
.special-target-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.special-grid-cell {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    background: var(--surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}
.special-grid-cell img {
    width: 100%; height: 100%; object-fit: cover;
}
.special-grid-cell-title,
.special-grid-cell-title-only {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 4px 6px;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.special-grid-cell-title-only {
    position: static;
    background: transparent;
    color: var(--text);
    white-space: normal;
    padding: 8px;
}
.special-grid-cell-free {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--accent);
}
.special-grid-cell-mark {
    position: absolute;
    top: 4px; right: 4px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
.special-grid-cell:hover:not(.disabled) {
    border-color: #f59e0b;
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(245,158,11,.4);
}
.special-grid-cell.selected {
    border-color: #22c55e;
    border-width: 3px;
    box-shadow: 0 0 0 3px rgba(34,197,94,.3);
}
.special-grid-cell.disabled {
    opacity: .35;
    filter: grayscale(.7);
    cursor: not-allowed;
}

/* ===== 履歴: 特別抽選アイテム ===== */
.history-item.special-item {
    background: linear-gradient(90deg, rgba(245,158,11,.15), rgba(139,92,246,.15));
    border-left: 3px solid #f59e0b;
}
.history-item.special-item .history-num {
    color: #f59e0b;
    font-weight: 900;
}

/* ====================================================================
   応募完了モーダル: カードURL + シェアボタン
   ==================================================================== */
.complete-url-section {
    margin: 16px 0;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(168, 85, 247, .08));
    border: 2px solid rgba(99, 102, 241, .3);
    border-radius: var(--radius);
}
/* 重要案内 (当日まで保存してね) */
.complete-url-important {
    margin: -2px 0 12px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .35);
    border-radius: var(--radius-sm);
    color: #f0f0f5;
    font-size: .85rem;
    line-height: 1.6;
    text-align: center;
}
.complete-url-important strong {
    color: #fca5a5;
    font-weight: 800;
    font-size: .9rem;
}
.complete-url-important span {
    display: block;
    margin-top: 4px;
    font-size: .78rem;
    opacity: .85;
}
.complete-url-label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
    text-align: center;
}
.complete-url-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.complete-url-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: .85rem;
    font-family: var(--font-mono, monospace);
}
.complete-url-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}
.complete-url-copy-btn {
    padding: 10px 14px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
    transition: var(--transition);
}
.complete-url-copy-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.complete-url-actions {
    display: flex;
    gap: 8px;
}
.complete-url-open-btn,
.complete-url-share-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    transition: var(--transition);
}
.complete-url-open-btn {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.complete-url-open-btn:hover { border-color: var(--primary); color: var(--primary); }
.complete-url-share-btn {
    background: #000;
    color: #fff;
}
.complete-url-share-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.complete-url-share-btn .x-icon {
    font-weight: 900;
    font-size: 1.1em;
    letter-spacing: -.05em;
}

/* ====================================================================
   カードページ全体
   ==================================================================== */
.card-page-body { background: var(--bg); min-height: 100vh; }
.card-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px 80px;
}

/* 読み込み中 */
.card-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}
.card-loading-spinner {
    width: 48px; height: 48px;
    margin: 0 auto 16px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* エラー */
.card-error {
    text-align: center;
    padding: 60px 20px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.card-error-icon { font-size: 4rem; margin-bottom: 16px; }
.card-error h2 { margin-bottom: 8px; }
.card-error-link {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 24px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
}

/* === ステータスパネル === */
.card-status-panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 16px;
    margin-bottom: 16px;
}
.card-status-counts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 12px;
}
.card-status-item { text-align: center; }
.card-status-label {
    font-size: .75rem;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: .08em;
}
.card-status-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary);
    font-family: var(--font-display, system-ui);
    line-height: 1;
}
.card-status-divider {
    width: 1px;
    height: 36px;
    background: var(--border);
}
.card-status-history {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.card-status-history-label {
    font-size: .75rem;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 6px;
}
.card-status-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--surface-hover, rgba(0,0,0,.03));
    border-radius: var(--radius-sm);
    font-size: .85rem;
}
.card-history-item.mine {
    background: linear-gradient(90deg, rgba(34,197,94,.15), rgba(34,197,94,.05));
    border-left: 3px solid #22c55e;
}
.card-history-item.special {
    background: linear-gradient(90deg, rgba(245,158,11,.15), rgba(139,92,246,.15));
}
.card-history-mark { font-size: .9rem; }
.card-history-title { flex: 1; font-weight: 600; }
.card-history-hit {
    background: #22c55e;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: .04em;
}
.card-history-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: .85rem;
    padding: 8px;
}
.card-sound-toggle {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}
.card-sound-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.card-sound-label input { cursor: pointer; }

/* === 状態バナー === */
.card-state-banner {
    padding: 14px 20px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 900;
    box-shadow: var(--shadow-md);
    animation: bannerSlide .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bannerSlide {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.card-state-banner.reach {
    background: linear-gradient(135deg, #fb923c, #f59e0b);
    color: #fff;
    box-shadow: 0 0 24px rgba(251, 146, 60, .5);
}
.card-state-banner.bingo {
    background: linear-gradient(135deg, #f43f5e, #ec4899, #a855f7);
    color: #fff;
    background-size: 200% 200%;
    animation: bannerSlide .5s cubic-bezier(.34,1.56,.64,1), bingoBannerShift 3s ease infinite;
    box-shadow: 0 0 40px rgba(244, 63, 94, .7);
}
@keyframes bingoBannerShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.card-state-banner .state-icon { margin-right: 8px; }
.card-state-banner .state-sub {
    display: inline-block;
    margin-left: 12px;
    padding: 4px 12px;
    background: rgba(255,255,255,.25);
    border-radius: 20px;
    font-size: .85rem;
}

/* === マスのマッチ表示 (preview-cell に matched を追加) === */
.preview-cell { position: relative; }

/* チェックマーク(共通: ✓ アイコン) */
.preview-cell .cell-checkmark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s, background .4s;
    z-index: 5;
}
.preview-cell .cell-checkmark::before {
    content: '✓';
    font-size: 4rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 12px rgba(0,0,0,.4);
    transform: scale(.6);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

/* === 過去当選マス: 緑 (落ち着いた表示) === */
.preview-cell.matched .cell-checkmark {
    opacity: 1;
    background: rgba(34, 197, 94, .42);
    backdrop-filter: blur(1px);
    box-shadow: inset 0 0 0 3px rgba(34, 197, 94, .8);
}
.preview-cell.matched .cell-checkmark::before {
    transform: scale(1);
    color: #fff;
    text-shadow:
        0 0 8px #16a34a,
        0 0 16px rgba(34, 197, 94, .8),
        0 4px 12px rgba(0,0,0,.5);
}

/* === 最新の当選マス: 金 (派手・主役) === */
.preview-cell.matched.recent-hit .cell-checkmark {
    background: radial-gradient(circle at center,
        rgba(255, 215, 0, .55) 0%,
        rgba(255, 165, 0, .45) 60%,
        rgba(255, 140, 0, .35) 100%);
    box-shadow:
        inset 0 0 0 4px #ffd700,
        inset 0 0 30px rgba(255, 215, 0, .6),
        0 0 30px rgba(255, 215, 0, .8);
    animation: recentHitPulse 2.4s ease-in-out infinite;
}
.preview-cell.matched.recent-hit .cell-checkmark::before {
    color: #fff200;
    text-shadow:
        0 0 12px #ffd700,
        0 0 24px #ffae00,
        0 0 36px #ff8c00,
        0 4px 12px rgba(0,0,0,.6),
        -2px -2px 0 #b8860b, 2px -2px 0 #b8860b,
        -2px  2px 0 #b8860b, 2px  2px 0 #b8860b;
    animation: recentHitCheckBounce 2.4s ease-in-out infinite;
}
@keyframes recentHitPulse {
    0%, 100% {
        box-shadow:
            inset 0 0 0 4px #ffd700,
            inset 0 0 30px rgba(255, 215, 0, .6),
            0 0 24px rgba(255, 215, 0, .7);
    }
    50% {
        box-shadow:
            inset 0 0 0 5px #ffec5c,
            inset 0 0 50px rgba(255, 215, 0, .85),
            0 0 50px rgba(255, 215, 0, 1);
    }
}
@keyframes recentHitCheckBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* マッチ瞬間のフラッシュ (新規ヒット時の派手な一回限り演出) */
.preview-cell.flash {
    animation: cellFlash 1.8s ease;
    z-index: 10;
}
.preview-cell.flash::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 5px solid #ffd700;
    border-radius: inherit;
    box-shadow:
        0 0 40px #ffd700,
        0 0 80px #facc15,
        0 0 120px rgba(255, 215, 0, .8),
        inset 0 0 30px rgba(255, 215, 0, .5);
    pointer-events: none;
    animation: cellFlashGlow 1.8s ease;
    z-index: 11;
}
@keyframes cellFlash {
    0% { transform: scale(1); }
    15% { transform: scale(1.25) rotate(-3deg); }
    30% { transform: scale(.95) rotate(2deg); }
    45% { transform: scale(1.12) rotate(-1deg); }
    60% { transform: scale(.98); }
    75% { transform: scale(1.05); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes cellFlashGlow {
    0% { opacity: 0; transform: scale(.8); }
    20% { opacity: 1; transform: scale(1.1); }
    60% { opacity: .8; }
    100% { opacity: 0; transform: scale(1); }
}

/* ビンゴライン強調 (matched 上に重ね) */
.preview-cell.bingo-line.matched .cell-checkmark {
    background: linear-gradient(135deg, rgba(244,63,94,.55), rgba(168,85,247,.55));
    box-shadow: inset 0 0 0 4px #f43f5e, 0 0 24px rgba(244, 63, 94, .6);
}
.preview-cell.bingo-line {
    outline: 3px solid rgba(244, 63, 94, .7);
    outline-offset: -3px;
    border-radius: inherit;
}
/* ビンゴラインのrecent-hitは金優先 */
.preview-cell.bingo-line.matched.recent-hit .cell-checkmark {
    background: radial-gradient(circle at center,
        rgba(255, 215, 0, .6) 0%,
        rgba(244, 63, 94, .5) 70%,
        rgba(168, 85, 247, .45) 100%);
    box-shadow:
        inset 0 0 0 4px #ffd700,
        inset 0 0 30px rgba(244, 63, 94, .5),
        0 0 30px rgba(255, 215, 0, .9);
}

/* === BINGO演出 overlay === */
.bingo-effect-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.bingo-effect-overlay canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.bingo-text {
    position: relative;
    font-family: 'Rokkitt', serif;
    font-weight: 900;
    font-size: 8rem;
    color: #fff;
    text-shadow:
        0 0 20px #ec4899,
        0 0 40px #f43f5e,
        0 4px 0 #be123c,
        0 8px 24px rgba(0,0,0,.5);
    letter-spacing: .05em;
    transform: scale(0);
    opacity: 0;
}
.bingo-text.animate {
    animation: bingoTextPop 5s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes bingoTextPop {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    20% { transform: scale(1.3) rotate(5deg); opacity: 1; }
    30% { transform: scale(1) rotate(-2deg); }
    40% { transform: scale(1.1) rotate(2deg); }
    50% { transform: scale(1) rotate(0); }
    85% { transform: scale(1) rotate(0); opacity: 1; }
    100% { transform: scale(.9) rotate(0); opacity: 0; }
}

@media (max-width: 600px) {
    .bingo-text { font-size: 4.5rem; }
}

/* === 管理画面: 公開ページリンク === */
.admin-card-public-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 10px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(99, 102, 241, .08);
    border: 1px solid rgba(99, 102, 241, .3);
    border-radius: 14px;
    text-decoration: none;
    transition: var(--transition);
}
.admin-card-public-link:hover {
    background: var(--primary);
    color: #fff;
}

/* ===== 検索フィルター注意書き ===== */
.search-filter-note {
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(168,85,247,.10));
    border-bottom: 1px solid var(--border);
    font-size: .8rem;
    color: var(--text-secondary);
    text-align: center;
}
.search-filter-note strong {
    color: var(--primary);
}

/* ===== 手動追加セクション (結果0件時の強調) ===== */
.search-manual-section.highlighted {
    margin-top: 12px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(99, 102, 241, .12));
    border: 2px solid #f59e0b;
    border-radius: var(--radius);
    box-shadow: 0 0 24px rgba(245, 158, 11, .25);
    animation: manualHighlightPulse 2s ease-in-out infinite;
}
@keyframes manualHighlightPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, .25); }
    50% { box-shadow: 0 0 36px rgba(245, 158, 11, .5); }
}
.search-manual-section.highlighted .search-manual-label {
    color: #f59e0b;
    font-weight: 900;
    font-size: 1rem;
    margin-bottom: 8px;
}
.search-manual-section.highlighted .search-manual-btn {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(245, 158, 11, .4);
}
.search-manual-section.highlighted .search-manual-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, .6);
}
.search-manual-hint {
    margin-top: 8px;
    font-size: .8rem;
    color: var(--text-secondary);
    text-align: center;
}

/* ===== イベント説明バナー (応募ページ冒頭) ===== */
.about-banner {
    max-width: 880px;
    margin: 0 auto 20px;
    padding: 20px 24px;
    background: rgba(15, 15, 35, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
    color: #fff;
}

/* ===== ウェルカム説明画面 (チュートリアル風カルーセル) ===== */
.welcome-screen {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 12px;
}
.welcome-card {
    background: rgba(15, 15, 35, .95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    padding: 20px 0 16px;
    color: #fff;
    overflow: hidden;
}

/* スライドコンテナ: 横並びにして1枚ずつ見せる */
.welcome-slides {
    display: flex;
    width: 100%;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.welcome-slide {
    flex: 0 0 100%;
    padding: 0 24px;
    box-sizing: border-box;
    min-height: 460px;
    display: flex;
    flex-direction: column;
}

/* 挿絵エリア */
.welcome-illust {
    width: 100%;
    max-width: 280px;
    margin: 0 auto 14px;
}
.welcome-illust svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(255, 215, 0, .15));
}

/* スライドのタイトル */
.welcome-slide-title {
    margin: 0 0 12px;
    font-size: 1.35rem;
    text-align: center;
    color: #ffd700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 0 12px rgba(255, 215, 0, .3);
    font-weight: 900;
    line-height: 1.3;
}
.welcome-slide-title.welcome-warning-title {
    color: #ff8888;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 0 12px rgba(239, 68, 68, .3);
}

/* スライド本文 */
.welcome-slide-text {
    margin: 0 0 16px;
    font-size: .92rem;
    line-height: 1.7;
    color: #e8e8f0;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* イベント情報 (スライド1のカード) */
.welcome-event-info {
    margin-top: auto;
    padding: 14px 16px;
    background: rgba(255, 215, 0, .08);
    border: 1px solid rgba(255, 215, 0, .25);
    border-radius: var(--radius-sm);
}
.welcome-event-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: .9rem;
    color: #f0f0f5;
}
.welcome-event-row + .welcome-event-row {
    border-top: 1px dashed rgba(255, 215, 0, .25);
    margin-top: 4px;
    padding-top: 8px;
}
.welcome-event-label {
    color: #ffd56a;
    font-weight: 700;
    font-size: .82rem;
}
.welcome-event-value {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* 応募の流れ・ポイント・注意事項のリスト共通 */
.welcome-steps-list,
.welcome-tips-list,
.welcome-warnings-list {
    margin: 0;
    padding: 0 0 0 22px;
    color: #e8e8f0;
}
.welcome-steps-list li,
.welcome-tips-list li,
.welcome-warnings-list li {
    margin-bottom: 10px;
    font-size: .92rem;
    line-height: 1.65;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.welcome-steps-list li:last-child,
.welcome-tips-list li:last-child,
.welcome-warnings-list li:last-child {
    margin-bottom: 0;
}
.welcome-step-sub {
    font-size: .8rem;
    color: #a0a0b0;
}
.welcome-tips-list strong {
    color: #ffd56a;
}
.welcome-warnings-list li strong {
    color: #ff9999;
}

/* ナビゲーション (矢印 + ドット) */
.welcome-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px 4px;
    gap: 8px;
}
.welcome-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 215, 0, .15);
    border: 1px solid rgba(255, 215, 0, .4);
    color: #ffd700;
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.welcome-nav-btn:hover:not(:disabled) {
    background: rgba(255, 215, 0, .3);
    transform: scale(1.08);
}
.welcome-nav-btn:disabled {
    opacity: .25;
    cursor: not-allowed;
}
.welcome-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.welcome-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    cursor: pointer;
    transition: all .2s;
}
.welcome-dot:hover {
    background: rgba(255, 255, 255, .5);
}
.welcome-dot.active {
    background: #ffd700;
    width: 24px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(255, 215, 0, .6);
}

/* 「応募を始める」ボタン (最終スライドでのみ表示) */
.welcome-start-btn {
    display: block;
    margin: 14px 24px 4px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
    color: #1a1a3a;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255, 215, 0, .35);
    transition: transform .15s, box-shadow .15s;
    letter-spacing: .03em;
    width: calc(100% - 48px);
}
.welcome-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, .5);
}
.welcome-start-btn:active {
    transform: translateY(0);
}

/* 共感ポイントの吹き出し (スライド1) */
.welcome-empathy {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .04);
    border-radius: var(--radius-sm);
    border-left: 3px solid rgba(255, 215, 0, .5);
}
.welcome-empathy p {
    margin: 0 0 5px;
    font-size: .88rem;
    line-height: 1.55;
    color: #d0d0e0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.welcome-empathy-call {
    margin-top: 8px !important;
    text-align: center;
    font-size: 1rem !important;
    font-weight: 800;
    color: #ffd700 !important;
}

/* チェックリスト (スライド2) */
.welcome-list-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #e8e8f0;
}
.welcome-list-checks li {
    position: relative;
    padding: 8px 8px 8px 30px;
    margin-bottom: 6px;
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .25);
    border-radius: var(--radius-xs);
    font-size: .9rem;
    line-height: 1.55;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.welcome-list-checks li::before {
    content: '✓';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #22c55e;
    font-weight: 900;
    font-size: 1.1rem;
}

/* STEPボックス (スライド3) */
.welcome-step-box {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 14px;
    background: rgba(255, 215, 0, .08);
    border: 1px solid rgba(255, 215, 0, .25);
    border-radius: var(--radius-sm);
}
.welcome-step-num {
    flex: 0 0 auto;
    padding: 4px 10px;
    background: #ffd700;
    color: #1a1a3a;
    border-radius: var(--radius-xs);
    font-size: .75rem;
    font-weight: 900;
    height: fit-content;
    letter-spacing: .04em;
}
.welcome-step-body {
    flex: 1;
    font-size: .88rem;
    line-height: 1.55;
    color: #e8e8f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* テーマ例 折りたたみ (スライド3) */
.welcome-theme-examples {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .04);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .1);
}
.welcome-theme-examples summary {
    cursor: pointer;
    color: #ffd56a;
    font-weight: 700;
    font-size: .88rem;
    list-style: none;
    padding: 2px 0;
}
.welcome-theme-examples summary::-webkit-details-marker { display: none; }
.welcome-theme-examples summary::before {
    content: '▶ ';
    font-size: .7rem;
    transition: transform .2s;
    display: inline-block;
}
.welcome-theme-examples[open] summary::before {
    transform: rotate(90deg);
}
.welcome-theme-examples ul {
    margin: 8px 0 0;
    padding-left: 22px;
    color: #e8e8f0;
}
.welcome-theme-examples li {
    margin-bottom: 4px;
    font-size: .85rem;
    line-height: 1.5;
}

/* 景品リスト (スライド4) */
.welcome-prize-list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}
.welcome-prize-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, .04);
    border-radius: var(--radius-xs);
    border-left: 3px solid rgba(255, 215, 0, .3);
}
.welcome-prize-rank {
    flex: 0 0 50px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, .1);
    color: #e0e0ee;
    border-radius: 12px;
    font-size: .8rem;
    font-weight: 800;
    text-align: center;
}
.welcome-prize-rank.gold {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #1a1a3a;
    box-shadow: 0 2px 6px rgba(255, 215, 0, .4);
}
.welcome-prize-rank.silver {
    background: linear-gradient(135deg, #e0e0e8, #b0b0c0);
    color: #1a1a3a;
}
.welcome-prize-rank.bronze {
    background: linear-gradient(135deg, #d4824a, #a85a25);
    color: #fff;
}
.welcome-prize-amount {
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.welcome-side-prize {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: rgba(168, 85, 247, .12);
    border: 1px solid rgba(168, 85, 247, .35);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: .88rem;
    color: #e8e0f8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* スマホ対応 */
@media (max-width: 640px) {
    .welcome-screen { padding: 12px 8px; }
    .welcome-card { padding: 16px 0 14px; }
    .welcome-slide { padding: 0 18px; min-height: 420px; }
    .welcome-illust { max-width: 220px; margin-bottom: 10px; }
    .welcome-slide-title { font-size: 1.15rem; margin-bottom: 10px; }
    .welcome-slide-text { font-size: .85rem; }
    .welcome-event-row { font-size: .82rem; }
    .welcome-event-value { font-size: .85rem; }
    .welcome-steps-list li,
    .welcome-tips-list li,
    .welcome-warnings-list li { font-size: .85rem; margin-bottom: 8px; }
    .welcome-step-sub { font-size: .75rem; }
    .welcome-nav { padding: 12px 18px 4px; }
    .welcome-nav-btn { width: 36px; height: 36px; font-size: 1rem; }
    .welcome-start-btn { margin: 12px 18px 4px; padding: 12px 18px; font-size: 1rem; width: calc(100% - 36px); }
    /* 新要素のスマホ調整 */
    .welcome-empathy p { font-size: .82rem; }
    .welcome-empathy-call { font-size: .92rem !important; }
    .welcome-list-checks li { font-size: .83rem; padding: 7px 7px 7px 26px; }
    .welcome-list-checks li::before { left: 8px; font-size: 1rem; }
    .welcome-step-box { padding: 10px 12px; gap: 10px; }
    .welcome-step-num { font-size: .7rem; padding: 3px 8px; }
    .welcome-step-body { font-size: .82rem; }
    .welcome-theme-examples summary { font-size: .82rem; }
    .welcome-theme-examples li { font-size: .8rem; }
    .welcome-prize-list li { padding: 7px 12px; }
    .welcome-prize-rank { flex: 0 0 44px; font-size: .75rem; padding: 3px 6px; }
    .welcome-prize-amount { font-size: .88rem; }
    .welcome-side-prize { font-size: .82rem; padding: 8px 10px; }
}
.about-title {
    margin: 0 0 12px;
    font-size: 1.6rem;
    color: #ffd700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 0 12px rgba(255, 215, 0, .3);
    font-weight: 900;
}
.about-text {
    margin: 0 0 14px;
    font-size: .95rem;
    line-height: 1.7;
    color: #f0f0f5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.about-privacy {
    padding: 14px 16px;
    background: rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    border-left: 4px solid #fbbf24;
    font-size: .85rem;
    line-height: 1.75;
    color: #e8e8ee;
}
.about-privacy strong {
    color: #fff;
    font-weight: 800;
}
.about-privacy strong[style*="ef4444"] {
    color: #fca5a5 !important;
}
.about-show-welcome-btn {
    margin-top: 12px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #e0e0ee;
    border-radius: var(--radius-xs);
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s;
}
.about-show-welcome-btn:hover {
    background: rgba(255, 255, 255, .18);
}

/* ===== フォームラベルサブ・ヒント ===== */
.form-label-sub {
    margin-left: 6px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--text-muted);
}
.form-hint {
    margin-top: 4px;
    padding-top: 4px;
    font-size: .7rem;
    color: var(--text-muted);
    line-height: 1.35;
    opacity: .8;
}

/* ===== フッター強化 ===== */
.footer-about {
    margin: 0 auto 12px;
    max-width: 720px;
    padding: 0 16px;
    font-size: .8rem;
    line-height: 1.7;
    color: var(--text-muted);
    text-align: center;
}
.footer-credits {
    margin: 8px auto 12px;
    max-width: 720px;
    padding: 0 16px;
    font-size: .72rem;
    line-height: 1.7;
    color: var(--text-muted);
    text-align: center;
    opacity: .85;
}
.footer-credits a {
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: rgba(148, 163, 184, .4);
    text-underline-offset: 2px;
}
.footer-credits a:hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
}

/* ===== Auth note (管理画面ログイン下部) ===== */
.auth-note {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .2);
    border-radius: var(--radius-sm);
    font-size: .75rem;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: left;
}
.auth-desc { line-height: 1.6; }

/* ===== Presented by 表記 ===== */
.footer-presented {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.footer-presented-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.footer-presented-logos {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-presented-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 6px;
    padding: 2px;
    transition: background .2s, transform .2s;
}
.footer-presented-link:hover {
    background: rgba(145, 70, 255, .08);
    transform: scale(1.05);
}
.footer-presented-link:hover .footer-presented-logo {
    opacity: 1;
}
.footer-presented-link:focus-visible {
    outline: 2px solid #9146ff;
    outline-offset: 2px;
}
.footer-presented-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    opacity: .9;
    transition: opacity .2s;
}
/* るるいﾁｬﾝロゴ: 横長なので高さ控えめ */
.footer-presented-logo.logo-lulu {
    height: 43px;
}
/* ちゃんディーロゴ: 縦長なので高さ揃え */
.footer-presented-logo.logo-chandy {
    height: 67px;
}

@media (max-width: 480px) {
    .footer-presented-logos { gap: 2px; }
    .footer-presented-link { padding: 1px; }
    .footer-presented-logo.logo-lulu { height: 34px; }
    .footer-presented-logo.logo-chandy { height: 53px; }
}

/* ===== 検索結果アイテム: 邦題チップ ===== */
.search-item-ja {
    font-size: .8rem;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
    word-break: break-word;
}
.search-item-ja:empty,
.search-item-ja[data-ja-pending] {
    display: none;
}
.ja-badge {
    display: inline-block;
    padding: 1px 6px;
    background: #f59e0b;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 8px;
    margin-right: 4px;
    vertical-align: 1px;
    letter-spacing: .04em;
}

/* ===== モバイル: 横はみ出し追加対策 ===== */
@media (max-width: 600px) {
    .editor-container { padding: 0; }
    .form-card,
    .editor-left .form-card,
    .editor-right > * {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .form-input,
    .form-textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* about-banner も内側パディングを縮める */
    .about-banner {
        padding: 14px 14px;
        margin: 0 auto 16px;
        border-radius: 12px;
    }
    .about-title { font-size: 1.25rem; }
    .about-text { font-size: .9rem; }
    .about-privacy { font-size: .8rem; padding: 10px 12px; }
    /* ナビバー横はみ出し対策 */
    .nav-inner { padding: 0 1rem; }
    /* ビンゴグリッドが収まるよう */
    .preview-card-grid,
    .editor-grid {
        width: 100%;
        max-width: 100%;
    }
}

/* ===== 管理画面: 効果音トグル ===== */
.admin-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .85rem;
    color: var(--text-secondary);
    user-select: none;
    transition: var(--transition);
}
.admin-sound-toggle:hover {
    background: var(--surface-hover);
    border-color: var(--border-focus);
}
.admin-sound-toggle input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.admin-sound-icon {
    font-size: 1rem;
}
.admin-sound-label {
    font-weight: 600;
}

/* ===== 一時保存トースト (画面右下に表示) ===== */
.draft-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(15, 15, 35, .96);
    color: #fff;
    border: 1px solid rgba(255, 215, 0, .4);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 0 16px rgba(255, 215, 0, .15);
    font-size: .88rem;
    line-height: 1.4;
    max-width: 380px;
    animation: draft-toast-in .35s ease-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@keyframes draft-toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.draft-toast.draft-toast-fadeout {
    animation: draft-toast-out .3s ease-in forwards;
}
@keyframes draft-toast-out {
    to { transform: translateY(20px); opacity: 0; }
}
.draft-toast-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}
.draft-toast-text {
    flex: 1;
    min-width: 0;
}
.draft-toast-date {
    color: #a0a0c0;
    font-size: .78rem;
    margin-left: 2px;
}
.draft-toast-clear {
    flex-shrink: 0;
    padding: 5px 12px;
    background: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #ff9999;
    border-radius: var(--radius-xs);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.draft-toast-clear:hover {
    background: rgba(239, 68, 68, .25);
    color: #fff;
}
.draft-toast-close {
    flex-shrink: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: #a0a0b0;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.draft-toast-close:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
@media (max-width: 640px) {
    .draft-toast {
        bottom: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
        font-size: .82rem;
        padding: 10px 12px;
    }
    .draft-toast-clear { font-size: .72rem; padding: 4px 10px; }
}

/* ===== マス移動機能 (ドラッグ&ドロップ + タップ移動) ===== */
/* 入力済みマスのドラッグハンドル (右下のドット縦並び) */
.cell-move-hint {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border-radius: 50%;
    font-size: .65rem;
    line-height: 22px;
    text-align: center;
    cursor: grab;
    opacity: 0;
    transition: opacity .15s, transform .1s;
    z-index: 3;
    user-select: none;
    -webkit-user-select: none;
}
.grid-cell.filled:hover .cell-move-hint,
.grid-cell.filled .cell-move-hint:focus {
    opacity: .8;
}
.cell-move-hint:hover {
    opacity: 1 !important;
    transform: scale(1.1);
}
.cell-move-hint:active {
    cursor: grabbing;
}

/* ドラッグ中のマス */
.grid-cell.dragging {
    opacity: .5;
    transform: scale(.95);
}
/* ドロップ可能なマスのヒント */
.grid-cell.drop-target-active {
    outline: 2px dashed rgba(255, 215, 0, .4);
    outline-offset: -4px;
}
.grid-cell.drop-target-hover {
    outline: 3px solid #ffd700;
    background: rgba(255, 215, 0, .15);
}

/* タップ移動モード: 移動元 */
.grid-cell.move-source {
    outline: 3px solid #ffd700;
    box-shadow: 0 0 16px rgba(255, 215, 0, .5);
    animation: move-source-pulse 1.2s ease-in-out infinite;
}
@keyframes move-source-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 215, 0, .5); }
    50%      { box-shadow: 0 0 24px rgba(255, 215, 0, .9); }
}
/* タップ移動モード: 移動先候補 */
.grid-cell.move-target-candidate {
    outline: 2px dashed rgba(34, 197, 94, .6);
    outline-offset: -3px;
    cursor: pointer;
    background: rgba(34, 197, 94, .08);
}
.grid-cell.move-target-candidate:hover {
    background: rgba(34, 197, 94, .2);
}

/* タップ移動モードのヒントトースト (画面上部) */
.move-mode-hint {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(15, 15, 35, .96);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, .5);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    font-size: .88rem;
    font-weight: 700;
    animation: draft-toast-in .3s ease-out;
}
.move-mode-cancel {
    padding: 5px 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    border-radius: var(--radius-xs);
    font-size: .76rem;
    cursor: pointer;
}
.move-mode-cancel:hover {
    background: rgba(255, 255, 255, .2);
}
@media (max-width: 640px) {
    .cell-move-hint {
        opacity: .6;  /* スマホでは常時表示 */
        width: 26px;
        height: 26px;
        line-height: 26px;
        font-size: .75rem;
    }
    .move-mode-hint { font-size: .8rem; padding: 8px 12px; }
}

/* ===== 応募期間外画面 ===== */
.period-screen {
    max-width: 620px;
    margin: 0 auto;
    padding: 24px 16px;
}
.period-card {
    background: rgba(15, 15, 35, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    padding: 28px 24px 24px;
    color: #fff;
    text-align: center;
}
.period-title-image {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto 18px;
    border-radius: var(--radius-sm);
}
.period-status {
    font-size: 1.25rem;
    color: #ffd700;
    font-weight: 900;
    margin-bottom: 18px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 0 12px rgba(255, 215, 0, .3);
}
.period-status-after {
    color: #22c55e;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 0 12px rgba(34, 197, 94, .35);
}
.period-message {
    margin: 14px 0;
    font-size: .92rem;
    line-height: 1.7;
    color: #e8e8f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.period-message strong {
    color: #ffd56a;
}
.period-note {
    margin-top: 18px;
    font-size: .88rem;
    color: #a0a0c0;
}

/* カウントダウン表示 */
.period-countdown {
    margin: 0 0 22px;
}
.period-countdown-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.period-countdown-cell {
    flex: 1;
    max-width: 80px;
    padding: 10px 4px 8px;
    background: linear-gradient(135deg, rgba(255, 215, 0, .15), rgba(255, 168, 0, .15));
    border: 1px solid rgba(255, 215, 0, .35);
    border-radius: var(--radius-sm);
}
.period-countdown-num {
    font-size: 1.85rem;
    font-weight: 900;
    color: #ffd700;
    line-height: 1.1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6), 0 0 12px rgba(255, 215, 0, .3);
    font-variant-numeric: tabular-nums;
}
.period-countdown-label {
    margin-top: 2px;
    font-size: .68rem;
    color: #d0d0e0;
    letter-spacing: .05em;
}

/* イベント情報 */
.period-event-info {
    margin: 16px 0;
    padding: 14px 16px;
    background: rgba(255, 215, 0, .08);
    border: 1px solid rgba(255, 215, 0, .25);
    border-radius: var(--radius-sm);
    text-align: left;
}
.period-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: .88rem;
    color: #f0f0f5;
}
.period-event-row + .period-event-row {
    border-top: 1px dashed rgba(255, 215, 0, .25);
    margin-top: 4px;
    padding-top: 10px;
}
.period-event-row.period-event-highlight {
    padding: 4px 0;
}
.period-event-label {
    color: #ffd56a;
    font-weight: 700;
    font-size: .82rem;
    flex-shrink: 0;
}
.period-event-value {
    color: #fff;
    font-weight: 800;
    text-align: right;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    line-height: 1.4;
}

/* スマホ対応 */
@media (max-width: 640px) {
    .period-screen { padding: 16px 10px; }
    .period-card { padding: 22px 18px 20px; }
    .period-status { font-size: 1.05rem; margin-bottom: 14px; }
    .period-message { font-size: .85rem; }
    .period-countdown-cell { padding: 8px 2px 6px; }
    .period-countdown-num { font-size: 1.55rem; }
    .period-countdown-label { font-size: .62rem; }
    .period-event-row { font-size: .82rem; }
    .period-event-value { font-size: .85rem; }
}