*{box-sizing:border-box}

:root{
  color-scheme:dark;
  font-family:Inter,"Noto Sans JP",system-ui,sans-serif;
  background:#070b15;
  color:#f5f7ff;
  --job:#cfd8ef;
  --job-soft:rgba(207,216,239,.18);
}

:root[data-theme="red"]{--job:#ef6575;--job-soft:rgba(239,101,117,.20)}
:root[data-theme="blue"]{--job:#74b8ff;--job-soft:rgba(116,184,255,.20)}
:root[data-theme="purple"]{--job:#b58cff;--job-soft:rgba(181,140,255,.20)}
:root[data-theme="silver"]{--job:#bcd8f4;--job-soft:rgba(188,216,244,.20)}
:root[data-theme="crimson"]{--job:#e65050;--job-soft:rgba(230,80,80,.22)}
:root[data-theme="orange"]{--job:#f0a35b;--job-soft:rgba(240,163,91,.22)}
:root[data-theme="green"]{--job:#70bd8a;--job-soft:rgba(112,189,138,.20)}
:root[data-theme="violet"]{--job:#a579df;--job-soft:rgba(165,121,223,.20)}
:root[data-theme="balanced"]{--job:#e5d6ad;--job-soft:rgba(229,214,173,.20)}

body{
  margin:0;
  min-height:100vh;
  background:radial-gradient(circle at 50% 0,#18213d 0,#0b1020 34%,#070b15 72%);
}

.shell{width:min(720px,100%);margin:auto;padding:42px 18px 70px}
.hero{text-align:center}
.brand{font-size:13px;letter-spacing:.28em;color:#b9c4e4}
h1{font-size:clamp(30px,8vw,48px);margin:12px 0 8px}
.hero>p{color:#aeb7ce;line-height:1.7}

.search{display:flex;gap:8px;margin:28px auto 0;max-width:560px}
.search input{
  min-width:0;flex:1;border:1px solid #34405e;background:#11182a;
  color:#fff;padding:15px 16px;border-radius:12px;font-size:16px;
}
button{
  border:0;border-radius:12px;padding:0 20px;background:#eef2ff;
  color:#101526;font-weight:800;cursor:pointer;
}
button:hover{filter:brightness(.94)}
button:focus-visible,input:focus-visible{outline:2px solid var(--job);outline-offset:3px}
.status{min-height:25px;color:#c8d2ef}
.hidden{display:none}
.result{margin-top:26px}

.card{
  overflow:hidden;border:1px solid color-mix(in srgb,var(--job) 35%,#303b59);
  border-radius:24px;padding:24px;
  background:linear-gradient(155deg,rgba(30,40,69,.96),rgba(11,16,32,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  transition:border-color .2s ease;
}

.player{margin:0;color:#b8c3df;font-size:14px}
.identity h2{
  display:flex;align-items:center;gap:10px;
  font-size:30px;margin:5px 0 0;color:var(--job);
}

#type-emblem{
  width:58px;height:58px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.28));
}

.character{
  min-height:350px;height:350px;margin:20px -4px;
  display:flex;align-items:center;justify-content:center;
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:22px;
  background:radial-gradient(ellipse at 50% 48%,var(--job-soft) 0%,rgba(20,29,51,.55) 48%,rgba(20,29,51,.18) 72%,transparent 100%);
  color:#64708f;letter-spacing:.25em;font-size:12px;
}

.character::before{
  content:"";position:absolute;z-index:-1;
  width:68%;aspect-ratio:1;border-radius:50%;
  background:var(--job-soft);filter:blur(55px);opacity:.85;
  pointer-events:none;
}

.character img{
  display:block;position:relative;z-index:1;
  width:100%;height:340px;object-fit:contain;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.3));
}

.style-copy{
  max-width:600px;margin:22px auto;text-align:center;
  font-weight:700;line-height:1.8;
}

.axes{display:grid;gap:18px;margin:26px 0}
.axis-head{
  display:grid;grid-template-columns:1fr 50px 1fr;
  align-items:center;font-size:13px;color:#b9c3dc;
}
.axis-head span:last-child{text-align:right}
.axis-head b{text-align:center;color:#fff}

.track{
  position:relative;
  height:10px;
  margin-top:8px;
  border-radius:999px;
  background:#344158;
}
.track-fill{
  position:absolute;
  top:0;
  height:100%;
  border-radius:3px;
  background:var(--job,#648ac4);
}
.track-center{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:18px;
  transform:translate(-50%,-50%);
  background:#f0f4ff;
}
.axis-note{
  margin-top:8px;
  text-align:center;
  font-size:12px;
  color:#b9c3dc;
}

.tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tags span{
  padding:8px 12px;
  border:1px solid color-mix(in srgb,var(--job) 40%,#465474);
  border-radius:999px;background:#141d31;font-size:13px;
}

.meta{
  display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid #303b59;margin-top:22px;padding-top:16px;
  color:#9da9c4;font-size:12px;
}

.detail{margin-top:28px}
.detail h3{font-size:17px;margin:26px 4px 10px}
.detail-list{display:grid;gap:9px}
.detail-item,.empty{
  border:1px solid #29344f;border-radius:14px;
  background:#101727;padding:15px 16px;line-height:1.6;
}
.detail-item{border-left:2px solid color-mix(in srgb,var(--job) 55%,#29344f)}
.empty{color:#8995b0}
footer{text-align:center;margin-top:36px;color:#68738e;font-size:11px;letter-spacing:.08em}

@media(max-width:600px){
  .shell{padding:28px 14px 56px}
  .search{flex-direction:column}
  .search button{height:48px}
  .card{padding:19px}
  .identity h2{font-size:26px}
  #type-emblem{width:48px;height:48px}
  .character{height:290px;min-height:290px;margin:18px -3px}
  .character img{height:285px}
  .style-copy{margin:20px 2px;line-height:1.8}
  .meta{font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}

/* Diagnosis insights */
.detail{
  margin-top:34px;
}

.detail h3{
  margin:30px 4px 12px;
  font-size:18px;
  letter-spacing:.02em;
}

.detail-list{
  display:grid;
  gap:12px;
}

.insight-card{
  position:relative;
  overflow:hidden;
  border:1px solid #29344f;
  border-radius:16px;
  padding:17px 18px 18px;
  background:linear-gradient(145deg,rgba(18,26,45,.98),rgba(11,17,31,.98));
}

.insight-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
}

.strength-card{
  border-color:rgba(112,189,138,.28);
}

.strength-card::before{
  background:#70bd8a;
}

.review-card{
  border-color:color-mix(in srgb,var(--job) 30%,#29344f);
}

.review-card::before{
  background:var(--job);
}

.insight-kicker{
  margin-bottom:6px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  color:#7786a8;
}

.strength-card .insight-kicker{
  color:#70bd8a;
}

.review-card .insight-kicker{
  color:var(--job);
}

.insight-title{
  font-size:16px;
  font-weight:800;
  line-height:1.55;
  color:#f5f7ff;
}

.insight-description{
  margin:9px 0 0;
  color:#aeb8d0;
  font-size:13px;
  line-height:1.75;
}

@media(max-width:600px){
  .detail{
    margin-top:30px;
  }

  .detail h3{
    font-size:17px;
    margin-top:27px;
  }

  .insight-card{
    padding:15px 16px 16px;
  }

  .insight-title{
    font-size:15px;
  }

  .insight-description{
    font-size:12.5px;
  }
}

.share-actions{
  display:flex;
  justify-content:center;
  margin:22px 0 28px;
}

.share-actions button{
  appearance:none;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  padding:13px 26px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,.09);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:transform .15s ease,background .15s ease;
}

.share-actions button:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.14);
}

.share-actions button:disabled{
  opacity:.55;
  cursor:wait;
  transform:none;
}


/* =========================================================
   JAKUFU KARTE — ornamental UI
   ========================================================= */

body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -8%,rgba(80,104,174,.22),transparent 34%),
    radial-gradient(circle at 8% 42%,rgba(80,101,160,.08),transparent 27%),
    radial-gradient(circle at 92% 65%,rgba(96,76,150,.07),transparent 30%),
    linear-gradient(180deg,#0b1120 0%,#070b15 58%,#050912 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  padding-top:12px;
}

.hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:-25px;
  width:340px;
  height:160px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(122,150,226,.12),transparent 68%);
  filter:blur(10px);
  pointer-events:none;
}

.brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-weight:700;
}

.brand::before,
.brand::after{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg,transparent,#65769f);
}

.brand::after{
  background:linear-gradient(90deg,#65769f,transparent);
}

.hero h1{
  position:relative;
  text-shadow:0 4px 28px rgba(0,0,0,.35);
}

/* ---------- Diagnosis entrance ---------- */

.diagnosis-panel{
  position:relative;
  max-width:610px;
  margin:30px auto 0;
  padding:22px 24px 18px;
  border:1px solid rgba(128,148,199,.28);
  border-radius:20px;
  background:
    linear-gradient(145deg,rgba(24,34,59,.78),rgba(11,17,31,.88));
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 20px 55px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
}

.diagnosis-panel::before,
.diagnosis-panel::after{
  content:"";
  position:absolute;
  width:34px;
  height:34px;
  pointer-events:none;
}

.diagnosis-panel::before{
  top:8px;
  left:8px;
  border-top:1px solid rgba(156,177,230,.42);
  border-left:1px solid rgba(156,177,230,.42);
  border-radius:8px 0 0 0;
}

.diagnosis-panel::after{
  right:8px;
  bottom:8px;
  border-right:1px solid rgba(156,177,230,.42);
  border-bottom:1px solid rgba(156,177,230,.42);
  border-radius:0 0 8px 0;
}

.panel-kicker{
  margin-bottom:4px;
  color:#8191b8;
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
}

.panel-note{
  margin-top:11px;
  color:#7886a5;
  font-size:11px;
  letter-spacing:.02em;
}

.diagnosis-panel .search{
  max-width:none;
  margin-top:10px;
}

.search input{
  border-color:rgba(112,133,184,.42);
  background:rgba(7,13,27,.72);
  box-shadow:inset 0 1px 7px rgba(0,0,0,.22);
}

.search input::placeholder{
  color:#657391;
}

.search button{
  min-width:100px;
  position:relative;
  box-shadow:0 7px 24px rgba(0,0,0,.22);
}

/* ---------- Result certificate ---------- */

.card{
  position:relative;
  isolation:isolate;
  border-color:color-mix(in srgb,var(--job) 43%,#303b59);
  background:
    radial-gradient(circle at 78% 18%,var(--job-soft),transparent 31%),
    linear-gradient(155deg,rgba(29,40,68,.97),rgba(9,15,29,.99));
  box-shadow:
    0 28px 80px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.035),
    inset 0 0 55px rgba(0,0,0,.12);
}

.card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:7px;
  border:1px solid color-mix(in srgb,var(--job) 15%,transparent);
  border-radius:18px;
  pointer-events:none;
}

.card::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:12%;
  right:12%;
  top:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb,var(--job) 75%,white 10%),
    transparent
  );
  box-shadow:0 0 18px var(--job);
  opacity:.72;
}

.card-watermark{
  position:absolute;
  z-index:-1;
  top:38px;
  right:-42px;
  width:245px;
  height:245px;
  object-fit:contain;
  opacity:.055;
  filter:grayscale(.15) blur(.2px);
  transform:rotate(10deg);
  pointer-events:none;
}

.card-corners{
  position:absolute;
  inset:14px;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(var(--job),var(--job)) left top/26px 1px no-repeat,
    linear-gradient(var(--job),var(--job)) left top/1px 26px no-repeat,
    linear-gradient(var(--job),var(--job)) right top/26px 1px no-repeat,
    linear-gradient(var(--job),var(--job)) right top/1px 26px no-repeat,
    linear-gradient(var(--job),var(--job)) left bottom/26px 1px no-repeat,
    linear-gradient(var(--job),var(--job)) left bottom/1px 26px no-repeat,
    linear-gradient(var(--job),var(--job)) right bottom/26px 1px no-repeat,
    linear-gradient(var(--job),var(--job)) right bottom/1px 26px no-repeat;
  opacity:.23;
}

.identity{
  position:relative;
  z-index:2;
}

.player{
  letter-spacing:.04em;
}

.identity h2{
  text-shadow:0 0 24px var(--job-soft);
}

#type-emblem{
  filter:
    drop-shadow(0 5px 11px rgba(0,0,0,.35))
    drop-shadow(0 0 12px var(--job-soft));
}

.character{
  border-top:1px solid color-mix(in srgb,var(--job) 9%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--job) 9%,transparent);
}

.style-copy{
  position:relative;
  padding:0 18px;
}

.style-copy::before,
.style-copy::after{
  content:"◆";
  margin:0 10px;
  color:var(--job);
  opacity:.42;
  font-size:8px;
  vertical-align:middle;
}

.tags span{
  box-shadow:inset 0 0 16px var(--job-soft);
}

.share-actions button{
  border-color:color-mix(in srgb,var(--job) 28%,rgba(255,255,255,.12));
}

@media(max-width:600px){
  .diagnosis-panel{
    margin-top:24px;
    padding:18px 16px 15px;
  }

  .panel-note{
    text-align:left;
  }

  .card-watermark{
    width:190px;
    height:190px;
    right:-38px;
    top:36px;
  }

  .style-copy{
    padding:0 3px;
  }
}

/* =========================================================
   JAKUFU KARTE — fantasy background
   ========================================================= */

body{
  background-image:
    linear-gradient(rgba(5,9,18,.30),rgba(5,9,18,.46)),
    url("./assets/backgrounds/base.webp");
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

body.has-result{
  background-image:
    linear-gradient(rgba(5,9,18,.26),rgba(5,9,18,.42)),
    var(--result-background, url("./assets/backgrounds/base.webp"));
}

body::before{
  opacity:.12;
}

@media (max-width:700px){
  body,
  body.has-result{
    background-attachment:scroll;
    background-position:center top;
  }
}



/* =========================================================
   JAKUFU KARTE — input / result screen separation
   ========================================================= */

body.has-result .hero{
  display:none;
}

body.has-result .shell{
  max-width:100%;
  padding-top:32px;
}

body.has-result .result{
  margin-top:0;
}

body.has-result .card,
body.has-result .share-actions,
body.has-result .detail,
body.has-result footer{
  width:min(720px,calc(100% - 32px));
  margin-left:auto;
  margin-right:auto;
}

/* Result background is the main visual */
body.has-result{
  min-height:100vh;
  background-size:cover;
  background-position:center top;
}

/* Soften the old dark certificate surface */
body.has-result .card{
  background:
    linear-gradient(
      155deg,
      rgba(13,20,36,.82),
      rgba(7,12,24,.88)
    );
  backdrop-filter:blur(5px);
}

/* Keep lower information readable without hiding the artwork */
body.has-result .insight-card{
  background:rgba(8,15,29,.86);
  backdrop-filter:blur(5px);
}

@media(max-width:700px){
  body.has-result .shell{
    padding-top:18px;
  }

  body.has-result{
    background-size:cover;
    background-attachment:fixed;
    background-position:center top;
    background-repeat:no-repeat;
    background-color:#070b15;
  }

  body.has-result .card,
  body.has-result .share-actions,
  body.has-result .detail,
  body.has-result footer{
    width:min(100% - 20px,720px);
  }
}


/* =========================================================
   JAKUFU KARTE — result polish
   ========================================================= */

body.has-result .card{
  width:min(660px,calc(100% - 32px));
  padding:26px 28px 22px;
  border-radius:22px;
  background:
    linear-gradient(
      160deg,
      rgba(10,16,31,.70),
      rgba(8,13,26,.78)
    );
  backdrop-filter:blur(3px);
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.04);
}

body.has-result .identity{
  padding:2px 4px 0;
}

body.has-result .player{
  font-size:13px;
  color:rgba(232,237,250,.78);
}

body.has-result .identity h2{
  margin-top:6px;
  font-size:29px;
}

body.has-result #type-emblem{
  width:56px;
  height:56px;
}

/* Character floats naturally over the occupation background */
body.has-result .character{
  height:340px;
  min-height:340px;
  margin:14px 0 12px;
  border:0;
  border-radius:0;
  background:none;
  overflow:visible;
}

body.has-result .character::before{
  width:54%;
  opacity:.34;
  filter:blur(70px);
}

body.has-result .character img{
  height:330px;
  width:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 16px 22px rgba(0,0,0,.38))
    drop-shadow(0 0 18px var(--job-soft));
}

body.has-result .style-copy{
  margin:15px auto 20px;
  max-width:560px;
  font-size:14px;
  line-height:1.75;
}

body.has-result .axes{
  gap:15px;
  margin:20px 0;
}

body.has-result .tags{
  margin-top:20px;
}

body.has-result .meta{
  margin-top:20px;
  padding-top:13px;
}

.confidence-note{
  margin:8px 0 0;
  text-align:right;
  color:rgba(205,214,235,.58);
  font-size:10px;
  letter-spacing:.02em;
}

/* Lower sections remain readable but let the artwork show through */
body.has-result .detail{
  width:min(660px,calc(100% - 32px));
}

body.has-result .insight-card{
  background:rgba(8,14,27,.80);
  backdrop-filter:blur(4px);
}

body.has-result .share-actions{
  width:min(660px,calc(100% - 32px));
}

@media(max-width:700px){
  body.has-result .card{
    width:calc(100% - 20px);
    padding:20px 18px 18px;
  }

  body.has-result .identity h2{
    font-size:26px;
  }

  body.has-result .character{
    height:300px;
    min-height:300px;
    margin:10px 0;
  }

  body.has-result .character img{
    height:295px;
  }

  body.has-result .detail,
  body.has-result .share-actions{
    width:calc(100% - 20px);
  }

  .confidence-note{
    text-align:center;
  }
}

/* =========================================================
   JAKUFU KARTE — final result refinement
   ========================================================= */

/* Result card: let the occupation artwork breathe */
body.has-result .card{
  width:min(640px,calc(100% - 32px));
  padding:28px 30px 24px;
  background:
    linear-gradient(
      160deg,
      rgba(8,13,27,.54),
      rgba(6,11,23,.66)
    );
  backdrop-filter:blur(2px);
  border-color:color-mix(in srgb,var(--job) 38%,rgba(255,255,255,.15));
}

/* Remove emblem from the result UI */
body.has-result #type-emblem,
body.has-result .card-watermark{
  display:none !important;
}

/* Stronger player → occupation hierarchy */
body.has-result .identity{
  text-align:center;
  padding-top:3px;
}

body.has-result .player{
  margin-bottom:4px;
  font-size:15px;
  font-weight:600;
  color:rgba(245,247,255,.88);
}

body.has-result .identity h2{
  display:block;
  margin:2px 0 0;
  font-size:31px;
  line-height:1.25;
  text-align:center;
}

/* Character becomes the main visual */
body.has-result .character{
  height:365px;
  min-height:365px;
  margin:8px 0 4px;
}

body.has-result .character img{
  height:360px;
  transform:scale(1.08);
  transform-origin:center;
}

/* Description */
body.has-result .style-copy{
  margin:10px auto 22px;
  max-width:570px;
  font-size:14px;
}

/* Axes */
body.has-result .axes{
  margin:18px 0 22px;
}

body.has-result .track{
  height:7px;
}

/* Feature tags */
body.has-result .tags{
  margin:4px 0 2px;
}

body.has-result .tags span{
  background:rgba(10,17,32,.58);
  backdrop-filter:blur(3px);
}

/* Match count / diagnosis mode */
body.has-result .meta{
  margin-top:20px;
  border-color:rgba(180,195,225,.22);
}

body.has-result .confidence-note{
  margin-top:7px;
  color:rgba(220,226,240,.62);
}

/* Share action */
body.has-result .share-actions{
  margin-top:18px;
  margin-bottom:32px;
}

/* Lower diagnosis area */
body.has-result .detail{
  margin-top:0;
}

body.has-result .detail h3{
  margin:28px 3px 12px;
  font-size:18px;
  text-shadow:0 2px 12px rgba(0,0,0,.65);
}

body.has-result .detail-list{
  gap:11px;
}

body.has-result .insight-card{
  padding:17px 19px;
  background:rgba(7,13,26,.72);
  backdrop-filter:blur(4px);
  box-shadow:0 10px 30px rgba(0,0,0,.13);
}

/* Footer */
body.has-result footer{
  margin-top:34px;
  margin-bottom:18px;
  color:rgba(220,226,240,.52);
}

/* Mobile */
@media(max-width:700px){
  body.has-result .card{
    width:calc(100% - 18px);
    padding:20px 17px 18px;
  }

  body.has-result .player{
    font-size:14px;
  }

  body.has-result .identity h2{
    font-size:27px;
  }

  body.has-result .character{
    height:315px;
    min-height:315px;
  }

  body.has-result .character img{
    height:310px;
    transform:scale(1.06);
  }

  body.has-result .style-copy{
    font-size:13px;
  }

  body.has-result .detail,
  body.has-result .share-actions{
    width:calc(100% - 18px);
  }
}


/* =========================================================
   JAKUFU KARTE — final spacing & readability
   ========================================================= */

/* 1. Result cardを少しだけ縦に圧縮 */
body.has-result .card{
  padding-top:24px;
  padding-bottom:20px;
}

/* 2. Character周辺の余白を整理 */
body.has-result .character{
  height:350px;
  min-height:350px;
  margin:2px 0 0;
}

body.has-result .character img{
  height:345px;
}

body.has-result .style-copy{
  margin:4px auto 18px;
}

/* 3. 診断モードの理由を読みやすく */
body.has-result .confidence-note{
  margin-top:8px;
  font-size:11px;
  line-height:1.5;
  font-weight:500;
  color:rgba(230,235,247,.76);
}

/* 4. 強み・検討カードの可読性を少し上げる */
body.has-result .insight-card{
  background:rgba(7,13,26,.84);
  backdrop-filter:blur(5px);
}

body.has-result .insight-title{
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

body.has-result .insight-description{
  color:rgba(220,226,240,.82);
}

/* Mobile balance */
@media(max-width:700px){
  body.has-result .card{
    padding-top:18px;
    padding-bottom:17px;
  }

  body.has-result .character{
    height:300px;
    min-height:300px;
    margin:0;
  }

  body.has-result .character img{
    height:296px;
  }

  body.has-result .style-copy{
    margin:2px auto 16px;
  }

  body.has-result .confidence-note{
    font-size:10.5px;
  }
}


/* =========================================================
   JAKUFU KARTE — official visual identity
   ========================================================= */

.brand.brand-logo{
  display:block;
  width:min(680px,94vw);
  margin:0 auto 4px;
}

.brand.brand-logo::before,
.brand.brand-logo::after{
  display:none;
}

.brand-logo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.30));
}

.hero-copy{
  width:min(760px,96vw);
  margin:0 auto 12px;
}

.hero-copy img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 5px 16px rgba(0,0,0,.24));
}

@media(max-width:600px){
  .brand.brand-logo{
    width:96vw;
    margin-bottom:0;
  }

  .hero-copy{
    width:98vw;
    margin-top:-2px;
    margin-bottom:10px;
  }
}

/* Tighten logo / copy composition */
.brand.brand-logo{
  width:min(560px,88vw);
  margin-bottom:-55px;
}

.hero-copy{
  width:min(650px,92vw);
  margin-bottom:4px;
}

@media(max-width:600px){
  .brand.brand-logo{
    width:92vw;
    margin-bottom:-10vw;
  }

  .hero-copy{
    width:96vw;
    margin-bottom:4px;
  }
}


/* V3: readable summary and review presentation */

body.has-result #overall-section{
  box-sizing:border-box;
  background:rgba(8,14,27,.88);
  border:1px solid rgba(180,195,225,.22);
  border-radius:16px;
  padding:20px 22px;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

body.has-result #overall-section h3{
  margin:0 0 10px;
  color:#f5f7ff;
}

body.has-result #overall-summary{
  margin:0;
  color:#e5eaf5;
  font-size:14px;
  line-height:1.95;
  overflow-wrap:anywhere;
}

body.has-result .review-v3-card{
  padding:19px 20px;
  background:rgba(8,14,27,.90);
}

.review-v3-block{
  margin-top:17px;
}

.review-v3-heading,
.review-v3-metric{
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  color:#e0e7f4;
}

.review-v3-block p{
  margin:7px 0 0;
  color:#d2daea;
  font-size:13px;
  line-height:1.85;
}

.review-v3-stats{
  display:grid;
  gap:12px;
  margin-top:17px;
}

.review-v3-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:8px;
}

.review-v3-stat-value{
  min-width:0;
  padding:11px 12px;
  background:rgba(34,46,68,.80);
  border:1px solid rgba(167,184,214,.14);
  border-radius:10px;
}

.review-v3-stat-value span{
  display:block;
  margin-bottom:6px;
  color:#b2bfd5;
  font-size:11px;
  line-height:1.45;
}

.review-v3-stat-value strong{
  display:block;
  color:#fff;
  font-size:clamp(17px,4.5vw,23px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.review-v3-check{
  border-top:1px solid rgba(174,191,219,.17);
  padding-top:15px;
}

.review-v3-caution{
  margin:15px 0 0;
  color:#9dabc3;
  font-size:11px;
  line-height:1.7;
}

@media(max-width:600px){
  body.has-result #overall-section{
    padding:17px 16px;
  }
  body.has-result .review-v3-card{
    padding:17px 15px;
  }
  .review-v3-stat-value{
    padding:10px;
  }
}

/* V3 preview: player name search candidates */
.player-suggestions{
  display:grid;
  gap:6px;
  max-width:560px;
  margin:10px auto 0;
}

.player-suggestions[hidden]{
  display:none!important;
}

.player-suggestion{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:55px;
  padding:10px 15px;
  border:1px solid rgba(166,185,222,.27);
  border-radius:11px;
  background:rgba(12,20,38,.94);
  color:#f1f5ff;
  text-align:left;
}

.player-suggestion:hover{
  background:rgba(39,54,82,.96);
  border-color:rgba(180,197,231,.6);
}

.player-suggestion strong{
  min-width:0;
  overflow-wrap:anywhere;
  font-size:14px;
}

.player-suggestion small{
  flex-shrink:0;
  color:#aebbd5;
  font-size:11px;
}

@media(max-width:390px){
  .player-suggestion{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
}

/* V3 SNS sharing */
body.has-result .share-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

body.has-result #share-x-button{
  background:rgba(12,19,34,.88);
  color:#f4f6ff;
  border:1px solid rgba(185,198,225,.45);
}

.share-guide{
  margin:8px auto 0;
  padding:0 16px;
  text-align:center;
  color:#c4cce0;
  font-size:11px;
  line-height:1.7;
}

.creator-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) 160px;
  align-items:center;
  gap:22px;
  box-sizing:border-box;
  width:min(660px,calc(100% - 32px));
  margin:30px auto 12px;
  padding:22px;
  border-radius:16px;
  background:rgba(8,14,27,.90);
  border:1px solid rgba(174,190,219,.25);
  color:#e5ebf5;
}

.creator-portrait{
  display:block;
  width:160px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.22));
}

.creator-copy{min-width:0;}

.creator-panel h3{
  margin:0 0 10px;
  font-size:13px;
  color:#b9c8e2;
}

.creator-name{
  margin:0 0 8px;
  color:#fff;
  font-size:21px;
  font-weight:800;
}

.creator-panel p{
  line-height:1.8;
}

.creator-social-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.creator-social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(170,187,222,.40);
  border-radius:10px;
  color:#f4f6ff;
  background:rgba(33,47,73,.80);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}

.creator-social-links a:hover{
  background:rgba(61,80,118,.90);
}

@media(max-width:600px){
  body.has-result .share-actions button{
    min-height:44px;
  }

  .creator-panel{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    padding:20px 17px;
    text-align:center;
  }
  .creator-portrait{
    width:136px;
    margin:0 auto;
  }
  .creator-social-links{
    justify-content:center;
  }
}

/* Native image sharing */
#share-image-button[hidden]{
  display:none!important;
}

body.has-result #share-image-button{
  background:var(--job,#d58d9d);
  color:#101526;
}

body.has-result #share-image-button:disabled{
  opacity:.65;
  cursor:wait;
}


/* Two-button share action layout */
body.has-result .share-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:10px;
  width:min(660px,calc(100% - 32px));
  margin:20px auto;
}

body.has-result .share-actions > button{
  appearance:none;
  box-sizing:border-box;
  display:flex;
  flex:1 1 240px;
  align-items:center;
  justify-content:center;
  min-height:52px;
  margin:0;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid color-mix(
    in srgb,
    var(--job, #e88a9a) 65%,
    #60708e
  );
  background:rgba(12,18,32,.88);
  color:#f4f7ff;
  font-size:14px;
  font-weight:800;
  line-height:1.4;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.20);
  transition:
    background .18s ease,
    border-color .18s ease,
    opacity .18s ease;
}

body.has-result .share-actions > button:hover:not(:disabled){
  background:rgba(24,32,52,.96);
  border-color:var(--job, #e88a9a);
  filter:none;
  transform:none;
}

body.has-result .share-actions > button:disabled{
  opacity:.6;
  cursor:wait;
}

body.has-result .share-actions > button:focus-visible{
  outline:2px solid #ffffff;
  outline-offset:3px;
}

@media (max-width:600px){
  body.has-result .share-actions > button{
    flex-basis:100%;
  }
}

.room-selector{grid-column:1/-1;flex-basis:100%;min-width:0;border:1px solid #48516a;border-radius:12px;padding:12px;margin:0 0 10px;color:#e1e7f2;}
.room-selector label{display:inline-flex;align-items:center;gap:6px;margin:6px 12px 6px 0;font-size:14px;cursor:pointer;}
.room-selector input[type="radio"]{width:18px;min-width:18px;height:18px;flex:0 0 18px;padding:0;margin:0;accent-color:#d5b86a;}
.room-selector p{font-size:12px;line-height:1.6;margin:6px 0 0;}
.search:has(.room-selector:not([hidden])){flex-wrap:wrap;}

#change-diagnosis-button[hidden]{display:none;}


.period-selector{min-width:0;width:100%;box-sizing:border-box;border:1px solid #b99b534d;border-radius:12px;padding:12px;margin:0 0 14px;grid-column:1/-1}
.period-selector legend{color:#dbc17f;padding:0 8px;font-weight:700}
.period-choices{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.period-choices label{display:flex;align-items:center;gap:5px;min-height:44px;padding:0 12px;box-sizing:border-box;cursor:pointer;border:1px solid #d5b86a40;border-radius:8px;background:#0b1020;color:#dce4f3}
.period-choices label:has(input:checked){background:#d5b86a22;border-color:#d5b86a;color:#f4df9d}
.period-choices input{accent-color:#d5b86a;width:auto!important;min-width:0!important;margin:0}
.period-help{font-size:12px;line-height:1.7;color:#aebbd0;margin:6px 0 0}
.period-selector [hidden]{display:none!important}

.search:has(.period-selector:not([hidden])){flex-wrap:wrap}
.period-selector{flex-basis:100%}
.period-choices input[type="radio"]{height:18px;width:18px!important;padding:0;flex:0 0 18px}