:root{

  --bg-start:#dff4ff;

  --bg-end:#eadcff;

  --surface:rgba(255,255,255,0.84);

  --surface-strong:rgba(255,255,255,0.94);

  --card-border:rgba(255,255,255,0.78);

  --text-main:#22252f;

  --text-sub:#667085;

  --primary:#6c63ff;

  --primary-2:#4f8df7;

  --primary-soft:#f1efff;

  --green:#22c55e;

  --orange:#f97316;

  --red:#ef4444;

  --shadow-sm:0 8px 20px rgba(43,53,88,0.08);

  --shadow-md:0 14px 35px rgba(43,53,88,0.12);

  --radius-xl:30px;

  --radius-lg:24px;

  --radius-md:18px;

  --radius-sm:14px;

  --nav-height:86px;

}

*{

  box-sizing:border-box;

  -webkit-tap-highlight-color:transparent;

}

html{

  height:100%;

  font-size:16px;

}

body{

  margin:0;

  min-height:100%;

  font-family:"Noto Sans JP","Segoe UI","Hiragino Sans","Yu Gothic UI",sans-serif;

  color:var(--text-main);

  background:

    radial-gradient(circle at top left, rgba(255,255,255,0.6), transparent 35%),

    linear-gradient(180deg,var(--bg-start),var(--bg-end));

  -webkit-text-size-adjust:100%;

  text-size-adjust:100%;

  font-size:clamp(14px,2.5vw,18px);

}

button,

input,

select,

textarea{

  font:inherit;

}

button{

  border:none;

  background:none;

  cursor:pointer;

}

img{

  max-width:100%;

  display:block;

}

a,

a:visited,

a:hover,

a:active{

  text-decoration:none;

  color:inherit;

}

/* ===== LAYOUT ===== */

.app-shell{

  width:100%;

  max-width:520px;

  min-height:100vh;

  margin:0 auto;

  position:relative;

  padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 14px);

  background:

    radial-gradient(circle at top right, rgba(255,255,255,0.45), transparent 30%),

    linear-gradient(180deg,var(--bg-start),var(--bg-end));

}

.topbar{

  padding:18px 18px 10px;

  position:sticky;

  top:0;

  z-index:20;

  background:linear-gradient(

    180deg,

    rgba(223,244,255,0.9) 0%,

    rgba(223,244,255,0.72) 60%,

    rgba(223,244,255,0) 100%

  );

  backdrop-filter:blur(10px);

}

.main-content{

  padding:8px 18px 22px;

}

/* ===== BRAND ===== */

.brand{

  display:flex;

  align-items:center;

  gap:12px;

  padding:14px 16px;

  border-radius:24px;

  background:rgba(255,255,255,0.72);

  border:1px solid rgba(255,255,255,0.86);

  box-shadow:var(--shadow-sm);

}

.brand-logo{

  width:52px;

  height:52px;

  border-radius:18px;

  display:grid;

  place-items:center;

  background:linear-gradient(135deg,var(--primary),var(--primary-2));

  box-shadow:0 10px 18px rgba(108,99,255,0.28);

  flex-shrink:0;

  overflow:hidden;

}

.brand-logo img{

  width:100%;

  height:100%;

  object-fit:cover;

}

.brand h1{

  margin:0;

  font-size:clamp(18px,4.5vw,24px);

  line-height:1.2;

  font-weight:800;

  letter-spacing:0.01em;

}

.brand p{

  margin:4px 0 0;

  font-size:clamp(12px,3vw,14px);

  color:var(--text-sub);

  line-height:1.4;

}

/* ===== HERO ===== */

.hero-card{

  position:relative;

  overflow:hidden;

  border-radius:var(--radius-xl);

  padding:24px 20px;

  color:#fff;

  background:linear-gradient(135deg,var(--primary-2),var(--primary));

  box-shadow:var(--shadow-md);

  margin-bottom:18px;

}

.hero-card::after{

  content:"";

  position:absolute;

  width:180px;

  height:180px;

  right:-50px;

  top:-40px;

  border-radius:50%;

  background:rgba(255,255,255,0.12);

}

.hero-badge{

  display:inline-flex;

  align-items:center;

  gap:6px;

  min-height:28px;

  padding:6px 12px;

  margin-bottom:10px;

  border-radius:999px;

  background:rgba(255,255,255,0.16);

  border:1px solid rgba(255,255,255,0.16);

  font-size:12px;

  font-weight:700;

  letter-spacing:0.03em;

  position:relative;

  z-index:1;

}

.hero-card h2{

  margin:0 0 10px;

  font-size:clamp(22px,5vw,30px);

  line-height:1.3;

  font-weight:800;

  position:relative;

  z-index:1;

}

.hero-card p{

  margin:0;

  font-size:14px;

  line-height:1.7;

  color:rgba(255,255,255,0.94);

  position:relative;

  z-index:1;

}

/* ===== PANEL ===== */

.panel{

  background:var(--surface);

  border:1px solid var(--card-border);

  box-shadow:var(--shadow-sm);

  border-radius:24px;

  padding:18px 16px;

  backdrop-filter:blur(12px);

  margin-top:16px;

}

.panel h2{

  margin:0 0 12px;

  font-size:18px;

  line-height:1.3;

  font-weight:800;

}

.panel p{

  margin:0;

  color:var(--text-main);

  line-height:1.7;

}

/* ===== STATUS ===== */

.status-row{

  display:flex;

  align-items:center;

  gap:8px;

  margin-bottom:10px;

}

.label-name{

  width:72px;

  flex-shrink:0;

  font-size:13px;

  font-weight:700;

  color:var(--text-main);

}

.bar{

  flex:1;

  height:12px;

  background:#e5e7eb;

  border-radius:999px;

  overflow:hidden;

}

.bar-inner{

  height:100%;

  width:0;

  background:var(--green);

  transition:width .25s ease;

}

.bar-inner.heat{

  background:#3b82f6;

}

.bar-inner.fatigue{

  background:#a855f7;

}

.status-value{

  width:40px;

  flex-shrink:0;

  text-align:right;

  font-size:12px;

  color:var(--text-sub);

  font-weight:700;

}

.risk-label{

  font-weight:800;

  margin-top:8px;

  font-size:14px;

}

/* ===== SCENE ===== */

.scene h2{

  margin-bottom:8px;

}

.scene p{

  color:var(--text-main);

  font-size:14px;

}

/* ===== CHOICES ===== */

.choices-area{

  display:flex;

  flex-direction:column;

  gap:10px;

}

.choice-btn{

  position:relative;

  width:100%;

  padding:12px 12px 12px 24px;

  font-size:14px;

  text-align:left;

  border:1px solid #e5e7eb;

  border-radius:14px;

  background:#f9fafb;

  cursor:pointer;

  transition:all .2s ease;

  min-height:48px;

}

.choice-btn:hover{

  background:#eef2ff;

  box-shadow:0 8px 18px rgba(15,23,42,0.08);

}

.choice-btn:active{

  transform:scale(0.985);

}

.choice-btn::before{

  content:"▶";

  position:absolute;

  left:8px;

  top:50%;

  transform:translateY(-50%);

  color:#9ca3af;

  font-size:12px;

}

.tag{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  font-size:11px;

  font-weight:700;

  padding:2px 8px;

  border-radius:999px;

  margin-right:6px;

  vertical-align:middle;

}

.tag-good{

  background:#dcfce7;

  color:#166534;

}

.tag-neutral{

  background:#e0f2fe;

  color:#075985;

}

.tag-warn{

  background:#fef9c3;

  color:#92400e;

}

.tag-danger{

  background:#fee2e2;

  color:#b91c1c;

}

.choice-number{

  font-weight:800;

  color:#4f46e5;

  margin-right:4px;

}

/* ===== LOG ===== */

.log-list{

  list-style:none;

  padding:8px;

  margin:0;

  font-size:13px;

  max-height:220px;

  overflow-y:auto;

  background:#f1f5f9;

  border-radius:10px;

}

.log-list li{

  border-bottom:1px dashed #e5e7eb;

  padding:6px 0;

}

.log-list li:last-child{

  border-bottom:none;

}

/* ===== RESULT ===== */

.result-screen h2{

  margin-bottom:8px;

}

.status-summary{

  margin-top:14px;

}

.status-summary ul{

  margin:8px 0 0;

  padding-left:20px;

}

.score-box,

.advice-box{

  margin-top:14px;

  padding:14px;

  border-radius:12px;

  background:#f8fafc;

  border:1px solid #e5e7eb;

}

.score-box p,

.advice-box p{

  margin:0;

}

/* ===== BUTTON ===== */

.btn-restart{

  width:100%;

  padding:12px;

  margin-top:16px;

  font-size:14px;

  font-weight:800;

  border:none;

  border-radius:999px;

  background:linear-gradient(135deg,#4f46e5,#22c55e);

  color:#fff;

  cursor:pointer;

  box-shadow:0 4px 10px rgba(0,0,0,0.1);

}

.btn-restart:active{

  transform:scale(0.97);

}

/* ===== BOTTOM NAV ===== */

.bottom-nav{

  position:fixed;

  left:0;

  right:0;

  bottom:0;

  z-index:30;

  width:100%;

  max-width:520px;

  margin:0 auto;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:8px;

  padding:10px 12px calc(10px + env(safe-area-inset-bottom));

  background:rgba(255,255,255,0.9);

  backdrop-filter:blur(16px);

  border-top:1px solid rgba(50,60,90,0.08);

  box-shadow:0 -8px 30px rgba(43,53,88,0.06);

}

.nav-item{

  min-height:58px;

  border-radius:18px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:4px;

  color:#5f6475;

  transition:background .18s ease, color .18s ease, transform .18s ease;

}

.nav-item.active{

  background:var(--primary-soft);

  color:var(--primary);

  font-weight:800;

}

.nav-item:active{

  transform:scale(0.97);

}

.nav-icon{

  font-size:20px;

  line-height:1;

}

.nav-text{

  font-size:12px;

  line-height:1;

  letter-spacing:0.01em;

}

/* ===== FOOTER ===== */

.footer{

  margin:24px 0 16px;

  text-align:center;

  font-size:12px;

  color:var(--text-sub);

}

/* ===== MOBILE ===== */

@media (max-width:480px){

  .main-content{

    padding:8px 14px 22px;

  }

  .label-name{

    width:64px;

    font-size:12px;

  }

  .status-value{

    width:36px;

  }

  .choice-btn{

    padding:12px 12px 12px 22px;

  }

}

@media (max-width:360px){

  .brand h1{

    font-size:18px;

  }

  .hero-card h2{

    font-size:24px;

  }

}

@media (min-width:768px){

  body{

    padding:18px 0;

    font-size:16px;

  }

  .app-shell{

    border-radius:34px;

    overflow:hidden;

    min-height:calc(100vh - 36px);

    box-shadow:0 18px 60px rgba(43,53,88,0.14);

  }

  .main-content{

    padding:10px 20px 24px;

  }

  .bottom-nav{

    border-radius:22px 22px 0 0;

  }

}