@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

  :root {
    --gold: #c9a84c; --gold-light: #f0d080; --gold-dark: #8a6a1a;
    --obsidian: #0a0a0f; --obsidian-mid: #12121a; --obsidian-light: #1e1e2e;
    --stone: #2a2a3a; --stone-light: #3a3a4e;
    --text: #e8dfc0; --text-dim: #9a8f70;
    --danger: #c0392b; --danger-light: #e74c3c;
    --safe: #27ae60; --safe-light: #2ecc71;
    --glow: rgba(201,168,76,0.4);
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  body {
    background: var(--obsidian); color: var(--text);
    font-family: 'Crimson Text', serif; min-height: 100vh; overflow-x: hidden;
    background-image:
      radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.04) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 20%, rgba(100,60,200,0.04) 0%, transparent 50%),
      repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(201,168,76,0.015) 40px, rgba(201,168,76,0.015) 41px),
      repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(201,168,76,0.015) 40px, rgba(201,168,76,0.015) 41px);
  }

  header { text-align:center; padding:3rem 2rem 1.5rem; }
  .idol-glyph { font-size:5rem; display:block; filter:drop-shadow(0 0 20px var(--glow)); animation:breathe 3s ease-in-out infinite; margin-bottom:0.5rem; }
  @keyframes breathe { 0%,100%{filter:drop-shadow(0 0 15px var(--glow));transform:scale(1)} 50%{filter:drop-shadow(0 0 35px rgba(201,168,76,0.7));transform:scale(1.05)} }
  h1 { font-family:'Cinzel Decorative',serif; font-size:clamp(1.4rem,4vw,2.6rem); font-weight:900; color:var(--gold-light); text-shadow:0 0 40px var(--glow),0 2px 0 var(--gold-dark); letter-spacing:0.05em; }
  .subtitle { font-family:'Cinzel',serif; font-size:0.85rem; color:var(--text-dim); letter-spacing:0.25em; text-transform:uppercase; margin-top:0.4rem; }
  .divider { width:200px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:1.5rem auto; }
  .app { max-width:900px; margin:0 auto; padding:0 1.5rem 4rem; }

  .loading-screen { text-align:center; padding:4rem 2rem; display:none; }
  .loading-screen.active { display:block; }
  .spinner { width:40px; height:40px; border:3px solid var(--stone); border-top-color:var(--gold); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 1rem; }
  @keyframes spin { to{transform:rotate(360deg)} }

  .sync-bar { display:flex; align-items:center; justify-content:flex-end; gap:0.5rem; margin-bottom:1rem; font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-dim); }
  .sync-dot { width:6px; height:6px; border-radius:50%; background:var(--stone-light); transition:background 0.3s; }
  .sync-dot.live    { background:var(--safe-light); box-shadow:0 0 6px var(--safe); }
  .sync-dot.syncing { background:var(--gold); animation:pulse 0.6s ease-in-out infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  .status-card { background:linear-gradient(135deg,var(--obsidian-light),var(--stone)); border:1px solid var(--gold-dark); border-radius:4px; padding:2rem; text-align:center; margin-bottom:2rem; box-shadow:0 0 40px rgba(0,0,0,0.5),inset 0 1px 0 rgba(201,168,76,0.1); }
  .status-label { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.75rem; }
  .idol-status  { font-family:'Cinzel Decorative',serif; font-size:clamp(1rem,3vw,1.6rem); color:var(--gold-light); text-shadow:0 0 20px var(--glow); }
  .idol-status.dim { color:var(--text-dim); font-size:clamp(0.9rem,2.5vw,1.3rem); }
  .status-meta  { font-size:0.85rem; color:var(--text-dim); margin-top:0.75rem; font-style:italic; }
  .last-updated { font-size:0.7rem; color:var(--stone-light); margin-top:0.5rem; font-family:'Cinzel',serif; letter-spacing:0.1em; }

  .winner-banner { background:linear-gradient(135deg,rgba(39,174,96,0.15),rgba(39,174,96,0.05)); border:1px solid rgba(39,174,96,0.4); border-radius:4px; padding:1.75rem; margin-bottom:2rem; text-align:center; display:none; animation:fadeIn 0.5s ease; }
  .winner-banner.active { display:block; }
  .winner-banner .trophy { font-size:3rem; margin-bottom:0.5rem; }
  .winner-banner h3 { font-family:'Cinzel Decorative',serif; color:var(--safe-light); font-size:1.1rem; margin-bottom:0.5rem; }
  .winner-banner p { color:var(--text-dim); font-size:0.9rem; font-style:italic; margin-bottom:1rem; }
  .confirm-copy { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.15em; color:var(--text-dim); margin-top:0.5rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; display:block; }
  .confirm-copy:hover { color:var(--text); }

  .hunt-zone { background:linear-gradient(135deg,rgba(201,168,76,0.06),rgba(201,168,76,0.02)); border:1px solid var(--gold-dark); border-radius:4px; padding:1.75rem; margin-bottom:2rem; display:none; }
  .hunt-zone.active { display:block; animation:fadeIn 0.5s ease; }
  .hunt-title { font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
  .clue-type-badge { display:inline-block; background:var(--gold-dark); color:var(--gold-light); font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.25rem 0.75rem; border-radius:2px; margin-bottom:1rem; }
  .clue-content { font-size:1.15rem; line-height:1.6; color:var(--text); background:rgba(0,0,0,0.3); padding:1rem 1.25rem; border-left:3px solid var(--gold); border-radius:0 2px 2px 0; margin-bottom:1.25rem; font-style:italic; }
  .hunt-claimed-notice { background:rgba(39,174,96,0.1); border:1px solid rgba(39,174,96,0.3); border-radius:2px; padding:1rem 1.25rem; color:var(--safe-light); font-family:'Cinzel',serif; font-size:0.8rem; letter-spacing:0.1em; display:none; }

  .form-group { margin-bottom:1.25rem; }
  label { display:block; font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.5rem; }
  input[type="text"], input[type="password"], textarea, select { width:100%; background:var(--obsidian-mid); border:1px solid var(--stone-light); border-radius:2px; padding:0.65rem 0.9rem; color:var(--text); font-family:'Crimson Text',serif; font-size:1rem; transition:border-color 0.2s,box-shadow 0.2s; outline:none; }
  input:focus, textarea:focus { border-color:var(--gold-dark); box-shadow:0 0 0 2px rgba(201,168,76,0.15); }
  textarea { resize:vertical; min-height:80px; }

  .btn { font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.7rem 1.75rem; border:none; border-radius:2px; cursor:pointer; transition:all 0.2s; display:inline-block; }
  .btn-gold   { background:linear-gradient(135deg,var(--gold-dark),var(--gold),var(--gold-dark)); color:var(--obsidian); font-weight:600; box-shadow:0 2px 12px rgba(201,168,76,0.3); }
  .btn-gold:hover { box-shadow:0 4px 24px rgba(201,168,76,0.5); transform:translateY(-1px); }
  .btn-ghost  { background:transparent; border:1px solid var(--stone-light); color:var(--text-dim); }
  .btn-ghost:hover { border-color:var(--gold-dark); color:var(--text); }
  .btn-danger { background:linear-gradient(135deg,#7a1010,var(--danger),#7a1010); color:#fff; box-shadow:0 2px 12px rgba(192,57,43,0.3); }
  .btn-danger:hover { box-shadow:0 4px 24px rgba(192,57,43,0.5); transform:translateY(-1px); }
  .btn-row    { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1rem; }
  .btn:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; }

  .section { background:var(--obsidian-light); border:1px solid var(--stone); border-radius:4px; padding:1.75rem; margin-bottom:1.5rem; display:none; }
  .section.visible { display:block; animation:fadeIn 0.4s ease; }
  .section-title { font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; padding-bottom:0.5rem; border-bottom:1px solid var(--stone); }

  .token-display { background:var(--obsidian-mid); border:1px solid var(--gold-dark); border-radius:2px; padding:0.75rem 1rem; font-family:monospace; font-size:0.85rem; color:var(--gold-light); letter-spacing:0.1em; word-break:break-all; margin:0.5rem 0; cursor:pointer; }
  .copy-hint { font-size:0.75rem; color:var(--text-dim); font-style:italic; margin-top:0.25rem; }
  .idol-download { display:flex; flex-direction:column; align-items:center; gap:0.75rem; padding:1rem 0; }
  .idol-download canvas { border:1px solid var(--gold-dark); border-radius:2px; box-shadow:0 0 20px rgba(201,168,76,0.2); }
  .upload-zone { border:2px dashed var(--stone-light); border-radius:4px; padding:1.5rem; text-align:center; cursor:pointer; transition:all 0.2s; position:relative; }
  .upload-zone:hover { border-color:var(--gold-dark); background:rgba(201,168,76,0.04); }
  .upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
  .upload-zone .upload-icon { font-size:2rem; margin-bottom:0.5rem; }
  .upload-zone .upload-label { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-dim); }
  .upload-zone.has-file { border-color:var(--gold-dark); background:rgba(201,168,76,0.06); }
  .upload-zone.has-file .upload-label { color:var(--gold); }

  .tab-row { display:flex; border-bottom:1px solid var(--stone); margin-bottom:1.5rem; flex-wrap:wrap; }
  .tab { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.6rem 1.25rem; cursor:pointer; color:var(--text-dim); border-bottom:2px solid transparent; transition:all 0.2s; }
  .tab:hover { color:var(--text); }
  .tab.active { color:var(--gold); border-bottom-color:var(--gold); }
  .tab-content { display:none; }
  .tab-content.active { display:block; animation:fadeIn 0.3s ease; }
  .sub-tab-row { display:flex; border-bottom:1px solid var(--stone); margin-bottom:1rem; flex-wrap:wrap; }

  .play-btn-wrap { text-align:center; padding:1.5rem 0; }
  .btn-play-idol { font-family:'Cinzel Decorative',serif; font-size:1rem; letter-spacing:0.1em; padding:1rem 3rem; background:linear-gradient(135deg,#3a1a00,#c9841a,#c9a84c,#c9841a,#3a1a00); color:#fff; border:none; border-radius:2px; cursor:pointer; box-shadow:0 0 30px rgba(201,168,76,0.4),0 4px 15px rgba(0,0,0,0.5); transition:all 0.3s; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
  .btn-play-idol:hover { box-shadow:0 0 60px rgba(201,168,76,0.7),0 6px 25px rgba(0,0,0,0.5); transform:translateY(-2px) scale(1.02); }
  .warning-text { font-size:0.8rem; color:var(--text-dim); font-style:italic; margin-top:0.75rem; }

  .history-list { list-style:none; }
  .history-item { padding:0.85rem 0; border-bottom:1px solid var(--stone); display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:start; font-size:0.9rem; }
  .history-item:last-child { border-bottom:none; }
  .history-icon { font-size:1.1rem; }
  .history-desc { color:var(--text); line-height:1.4; }
  .history-desc .actor { color:var(--gold); font-family:'Cinzel',serif; font-size:0.8rem; }
  .history-time { font-size:0.75rem; color:var(--text-dim); white-space:nowrap; font-style:italic; }
  .empty-history { text-align:center; color:var(--text-dim); font-style:italic; padding:1.5rem 0; font-size:0.9rem; }

  .sub-log-entry { font-size:0.85rem; padding:0.5rem 0; border-bottom:1px solid var(--stone); display:grid; grid-template-columns:auto auto 1fr auto; gap:0.75rem; align-items:center; }
  .sub-log-entry:last-child { border-bottom:none; }
  .sub-rank   { font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.1em; padding:0.15rem 0.5rem; border-radius:2px; white-space:nowrap; }
  .sub-rank.winner { background:rgba(39,174,96,0.2); color:var(--safe-light); }
  .sub-rank.late   { background:rgba(192,57,43,0.15); color:var(--danger-light); }
  .sub-name   { color:var(--gold); font-family:'Cinzel',serif; font-size:0.75rem; }
  .sub-answer { color:var(--text); font-style:italic; }
  .sub-time   { color:var(--text-dim); font-size:0.75rem; white-space:nowrap; text-align:right; }

  .overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:100; padding:1rem; }
  .overlay.active { display:flex; animation:fadeIn 0.3s ease; }
  .modal { background:var(--obsidian-light); border:1px solid var(--gold-dark); border-radius:4px; padding:2rem; max-width:520px; width:100%; box-shadow:0 0 60px rgba(201,168,76,0.15); }
  .modal-title { font-family:'Cinzel Decorative',serif; font-size:1.1rem; color:var(--gold-light); margin-bottom:0.5rem; text-align:center; }
  .modal-sub   { font-size:0.85rem; color:var(--text-dim); text-align:center; margin-bottom:1.5rem; font-style:italic; }
  .modal-idol  { text-align:center; font-size:3.5rem; margin-bottom:1rem; animation:breathe 2s ease-in-out infinite; }

  details { border:1px solid var(--stone); border-radius:4px; margin-bottom:1rem; overflow:hidden; }
  summary { font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--text-dim); padding:1rem 1.5rem; cursor:pointer; background:var(--obsidian-light); user-select:none; list-style:none; display:flex; align-items:center; justify-content:space-between; }
  summary::after { content:'▾'; color:var(--gold-dark); }
  details[open] summary::after { content:'▴'; }
  summary:hover { color:var(--text); }
  .rules-body { padding:1.5rem; background:var(--obsidian-mid); border-top:1px solid var(--stone); }
  .rules-body ol { padding-left:1.5rem; display:flex; flex-direction:column; gap:0.75rem; }
  .rules-body li { font-size:0.95rem; line-height:1.5; color:var(--text); }
  .rules-body li strong { color:var(--gold); font-family:'Cinzel',serif; font-size:0.8rem; letter-spacing:0.05em; }

  .toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(100px); background:var(--stone); border:1px solid var(--gold-dark); color:var(--text); font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:0.15em; text-transform:uppercase; padding:0.75rem 2rem; border-radius:2px; box-shadow:0 4px 20px rgba(0,0,0,0.5); transition:transform 0.3s ease; z-index:999; white-space:nowrap; }
  .toast.show { transform:translateX(-50%) translateY(0); }

  @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
  .text-dim { color:var(--text-dim); font-style:italic; font-size:0.85rem; }
  .admin-lock-screen { padding:1.5rem; text-align:center; }
  .admin-lock-screen .lock-icon { font-size:2rem; margin-bottom:0.75rem; }
  .admin-lock-screen .lock-label { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:1rem; display:block; }
  .admin-lock-screen input { max-width:280px; margin:0 auto 0.75rem; display:block; }
  .admin-lock-screen .lock-error { color:var(--danger-light); font-size:0.8rem; margin-top:0.4rem; display:none; }
  .text-safe { color:var(--safe-light); }
  .text-danger { color:var(--danger-light); }
  .expiry-badge { display:inline-block; font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.1em; padding:0.2rem 0.6rem; border-radius:2px; margin-top:0.4rem; }
  .expiry-badge.ok      { background:rgba(39,174,96,0.15);  color:var(--safe-light);    border:1px solid rgba(39,174,96,0.3); }
  .expiry-badge.warn    { background:rgba(201,168,76,0.15); color:var(--gold);           border:1px solid rgba(201,168,76,0.3); }
  .expiry-badge.expired { background:rgba(192,57,43,0.15);  color:var(--danger-light);   border:1px solid rgba(192,57,43,0.3); }
  .expiry-badge.grace   { background:rgba(192,57,43,0.25);  color:var(--danger-light);   border:1px solid rgba(192,57,43,0.5); }
  .idol-card { background:linear-gradient(135deg,var(--obsidian-light),var(--stone)); border:1px solid var(--gold-dark); border-radius:4px; padding:1.25rem 1.5rem; margin-bottom:1rem; }
  .idol-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; flex-wrap:wrap; gap:0.5rem; }
  .idol-card-name { font-family:'Cinzel Decorative',serif; font-size:0.9rem; color:var(--gold-light); }
  .idol-card-type { font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.2rem 0.6rem; border-radius:2px; }
  .idol-card-type.hunt   { background:rgba(201,168,76,0.15); color:var(--gold);         border:1px solid rgba(201,168,76,0.3); }
  .idol-card-type.reward { background:rgba(100,80,200,0.2);  color:#a090e0;              border:1px solid rgba(100,80,200,0.3); }
  .idol-card-status { font-size:0.85rem; color:var(--text-dim); font-style:italic; }
  .admin-idol-row { display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid var(--stone); gap:0.5rem; flex-wrap:wrap; }
  .admin-idol-row:last-child { border-bottom:none; }
  .admin-idol-row .idol-info { font-family:'Cinzel',serif; font-size:0.7rem; color:var(--text); }
  .admin-idol-row .idol-meta { font-size:0.75rem; color:var(--text-dim); font-style:italic; }
  .issued-idols-table { width:100%; border-collapse:collapse; margin-top:0.5rem; }
  .issued-idols-table th { font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-dim); padding:0.4rem 0.6rem; border-bottom:1px solid var(--stone); text-align:left; white-space:nowrap; }
  .issued-idols-table td { font-size:0.82rem; padding:0.65rem 0.6rem; border-bottom:1px solid var(--stone); vertical-align:middle; }
  .issued-idols-table tr:last-child td { border-bottom:none; }
  .issued-idols-table tr:hover td { background:rgba(201,168,76,0.03); }
  .idol-holder-cell { color:var(--gold); font-family:'Cinzel',serif; font-size:0.72rem; }
  .idol-status-cell { font-style:italic; color:var(--text-dim); font-size:0.78rem; }
  .idol-expiry-cell { white-space:nowrap; }
  .idol-actions-cell { white-space:nowrap; display:flex; gap:0.4rem; align-items:center; }
  .btn-micro { font-family:'Cinzel',serif; font-size:0.58rem; letter-spacing:0.15em; text-transform:uppercase; padding:0.3rem 0.65rem; border:none; border-radius:2px; cursor:pointer; transition:all 0.2s; }
  .btn-micro-danger { background:rgba(192,57,43,0.2); color:var(--danger-light); border:1px solid rgba(192,57,43,0.35); }
  .btn-micro-danger:hover { background:rgba(192,57,43,0.35); }
  .btn-micro-ghost { background:transparent; color:var(--text-dim); border:1px solid var(--stone-light); }
  .btn-micro-ghost:hover { border-color:var(--gold-dark); color:var(--gold); }

  .season-ribbon-wrap {
    position: fixed;
    top: 0;
    right: 0;
    width: 160px;
    height: 160px;
    overflow: hidden;
    z-index: 500;
    pointer-events: none;
  }
  .season-ribbon {
    position: absolute;
    top: 38px;
    right: -46px;
    width: 220px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-dark));
    color: var(--obsidian);
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.4rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(0,0,0,0.25);
  }
  .season-ribbon .numeral {
    letter-spacing: 0.02em;
    margin-left: 0.15em;
  }
  @media (max-width: 560px) {
    .season-ribbon-wrap { width: 120px; height: 120px; }
    .season-ribbon { top: 26px; right: -50px; width: 170px; font-size: 0.55rem; padding: 0.3rem 0; }
  }