/* Jevィーン — tone & manner: 黒地 × 赤 × 砂。ドラマ公式サイトの雰囲気を「匂わせる」程度に留め、ロゴ・写真・書体データは一切使わない。 */
:root {
  --bg: #0a0a0a; --bg2: #141414; --card: #161616; --line: #2a2a2a;
  --text: #ffffff; --muted: #b5b5b5; --dim: #7a7a7a;
  --red: #d71718; --red2: #af1918; --gold: #dabd64; --sand: #c9924f; --sand2: #8a5a2b;
  --good: #dabd64; --evil: #d71718; --neutral: #b5b5b5; --danger: #d71718;
  --display: "Anton", "Antonio", "Arial Narrow", Impact, "Hiragino Sans", sans-serif;
  --body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); font-family: var(--body); line-height: 1.7; min-height: 100vh; position: relative;
  background: linear-gradient(180deg, #000 0%, #0a0a0a 45%, #17110a 100%); }
/* 砂丘のシルエット */
body::before { content: ""; position: fixed; left: -20vw; right: -20vw; bottom: -18vh; height: 42vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 80% at 30% 100%, rgba(201,146,79,.55) 0%, rgba(201,146,79,0) 70%),
    radial-gradient(55% 75% at 75% 100%, rgba(138,90,43,.6) 0%, rgba(138,90,43,0) 70%),
    radial-gradient(90% 60% at 50% 100%, rgba(218,189,100,.25) 0%, rgba(0,0,0,0) 70%); }
a { color: var(--gold); }
.wrap { max-width: 720px; margin: 0 auto; padding: 28px 16px 56px; }
.wrap.narrow { max-width: 420px; }

/* hero / logo */
.hero { text-align: center; margin-bottom: 22px; }
.hero .kicker { font-family: var(--display); color: var(--red); letter-spacing: .35em; font-size: 13px; margin: 0; text-transform: uppercase; }
.hero h1, .logo { margin: 0; font-family: var(--display); font-weight: 400; font-size: 76px; line-height: 1; letter-spacing: .04em; color: var(--red);
  text-shadow: 0 0 40px rgba(215,23,24,.35); }
.logo .kana { font-family: var(--body); font-weight: 900; }
.hero .yomi { margin: 2px 0 0; font-size: 12px; color: var(--dim); letter-spacing: .35em; }
.hero .tagline { margin: 14px 0 10px; font-size: 20px; font-weight: 700; letter-spacing: .12em; }
.hero .sub { color: var(--muted); font-size: 13px; }
.hero.small { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.hero.small h1 { font-size: 22px; letter-spacing: .1em; }
.brand { font-family: var(--display); font-size: 26px; letter-spacing: .06em; text-decoration: none; color: var(--red); }
.brand .kana { font-family: var(--body); font-weight: 900; font-size: 22px; }
.rule { height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); margin: 6px auto 18px; width: 60%; }

.card { background: rgba(22,22,22,.92); border: 1px solid var(--line); border-radius: 4px; padding: 22px; margin-bottom: 18px; }
.drop { display: block; border: 1px dashed #4a4a4a; border-radius: 4px; padding: 12px; text-align: center; cursor: pointer; position: relative; min-height: 180px; background: #0f0f0f; }
.drop:hover { border-color: var(--gold); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop-text { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 156px; color: var(--muted); }
.drop-text .big { font-size: 40px; }
.preview-wrap img { max-width: 100%; max-height: 420px; border-radius: 2px; }
.hidden { display: none !important; }
.pledge { margin: 16px 0; font-size: 12.5px; color: var(--muted); }
.pledge label { display: flex; gap: 10px; align-items: flex-start; }
.pledge input { margin-top: 4px; transform: scale(1.3); accent-color: var(--red); }
.btn { display: inline-block; padding: 13px 22px; border-radius: 2px; border: 1px solid #3a3a3a; background: #1e1e1e; color: var(--text);
  font-size: 15px; font-weight: 700; letter-spacing: .12em; text-decoration: none; cursor: pointer; font-family: var(--body); }
.btn.primary { width: 100%; background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red2); }
.btn.primary:disabled { opacity: .35; cursor: not-allowed; }
.btn.share { background: #000; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.small { padding: 6px 12px; font-size: 12px; }
.btn.link, button.link { background: none; border: none; color: var(--gold); cursor: pointer; font-size: 14px; padding: 0; font-family: var(--body); }
.status { text-align: center; color: var(--muted); margin-top: 12px; font-size: 13px; }
.alert { background: #1a1a1a; border-left: 3px solid var(--gold); padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.alert.error { border-left-color: var(--red); }
.foot { text-align: center; color: var(--dim); font-size: 11.5px; margin-top: 28px; line-height: 1.8; }
.foot a { color: var(--muted); }

/* result */
.result { text-align: center; }
.result .stage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
.result .photo img { width: 100%; max-height: 360px; object-fit: cover; border: 1px solid #333; }
.result .jameen img { width: 100%; max-height: 360px; object-fit: contain; }
.result .lead { color: var(--muted); margin: 18px 0 2px; font-size: 13px; letter-spacing: .3em; }
.verdict { font-family: var(--display); font-weight: 400; font-size: 64px; margin: 0; line-height: 1.1; letter-spacing: .08em; }
.verdict.good { color: var(--good); text-shadow: 0 0 30px rgba(218,189,100,.45); }
.verdict.evil { color: var(--evil); text-shadow: 0 0 30px rgba(215,23,24,.55); }
.verdict.neutral { color: var(--neutral); }
.reason { font-size: 19px; margin: 10px 0 20px; font-weight: 700; }
.meter { max-width: 360px; margin: 0 auto 16px; }
.meter-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; letter-spacing: .15em; }
.meter-bar { height: 6px; background: #2a2a2a; overflow: hidden; }
.meter-fill { height: 100%; background: var(--gold); }
body.verdict-evil .meter-fill { background: var(--red); }
.badge { display: inline-block; border: 1px solid var(--red); color: var(--red); padding: 4px 12px; font-size: 12px; letter-spacing: .1em; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
@media (max-width: 520px) { .result .stage { grid-template-columns: 1fr; } .hero h1, .logo { font-size: 58px; } .verdict { font-size: 48px; } }

/* about */
.about h2 { font-family: var(--display); font-weight: 400; letter-spacing: .1em; color: var(--gold); font-size: 22px; margin: 22px 0 8px; }
.about p, .about li { font-size: 14px; color: var(--muted); }

/* admin */
.admin-nav nav { display: flex; gap: 14px; align-items: center; }
.admin-nav nav a { text-decoration: none; color: var(--muted); font-size: 14px; }
.admin-nav nav a.active { color: var(--text); font-weight: 700; border-bottom: 2px solid var(--red); }
.inline { display: inline; }
.form label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.form input[type=text], .form input[type=password] { display: block; width: 100%; margin-top: 4px; padding: 10px; border-radius: 2px; border: 1px solid #3a3a3a; background: #0f0f0f; color: var(--text); font-size: 15px; }
.form input[type=file] { display: block; margin-top: 4px; color: var(--text); }
.hint { color: var(--muted); font-size: 13px; }
code { background: #0f0f0f; padding: 2px 6px; border-radius: 2px; color: var(--gold); }
h2 { font-size: 18px; letter-spacing: .08em; }
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.tile { background: #0f0f0f; border: 1px solid var(--line); overflow: hidden; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.tile-body { padding: 10px; font-size: 13px; }
.tile-body p { margin: 4px 0; color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.thumb { width: 56px; height: 56px; object-fit: cover; }
.pill { padding: 2px 10px; font-weight: 700; color: #000; }
.pill.good { background: var(--good); } .pill.evil { background: var(--evil); color: #fff; } .pill.neutral { background: var(--neutral); }

/* share */
.share-lead { text-align: center; color: var(--muted); font-size: 12px; letter-spacing: .3em; margin: 18px 0 8px; }
.share-card { text-align: center; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sbtn { display: inline-block; padding: 9px 14px; border-radius: 2px; border: 1px solid #3a3a3a; background: #1e1e1e; color: var(--text);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-decoration: none; cursor: pointer; font-family: var(--body); }
.sbtn:hover { border-color: var(--gold); }
.sbtn.x { background: #000; } .sbtn.threads { background: #101010; } .sbtn.facebook { background: #1877f2; border-color: #1877f2; }
.sbtn.line { background: #06c755; border-color: #06c755; } .sbtn.copy, .sbtn.native { background: #2a2a2a; }