* {
  box-sizing: border-box;
}

:root {
  --bg: #080b0f;
  --panel: rgba(20, 24, 29, 0.94);
  --panel2: rgba(31, 36, 42, 0.92);
  --border: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --muted: #a7adb5;
  --green: #2ee889;
  --blue: #55a9ff;
  --gold: #f5c451;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top, #26303a 0%, #10151b 35%, #080b0f 75%);
  color: var(--text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;
}

button {
  font-family: inherit;
}

.game-container {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 105px;
  background: #0b0f14;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.65);
}

/* =========================
   実写オフィス
========================= */

.hero {
  position: relative;
  min-height: 350px;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.05) 45%,
      #0b0f14 100%
    ),
    url("office-lv1.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;

  background:
    linear-gradient(
      transparent,
      #0b0f14
    );
}

.hero-overlay {
  position: relative;
  z-index: 2;

  min-height: 350px;
  padding: 22px 20px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 15px;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.9);
}

.sub-title {
  margin: 0 0 3px;

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

  font-size: 12px;
}

h1 {
  margin: 0;

  font-size: 30px;

  letter-spacing: 0.02em;

  text-shadow:
    0 2px 10px rgba(0,0,0,0.9);
}

.clock-area {
  text-align: right;

  font-size: 12px;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.95);
}

#clock {
  margin-top: 3px;

  font-size: 22px;
  font-weight: 800;
}

.hero-message {
  position: relative;
  z-index: 3;

  margin-bottom: 18px;

  text-shadow:
    0 2px 10px rgba(0,0,0,0.9);
}

.hero-message > span {
  display: inline-block;

  padding: 6px 11px;
  margin-bottom: 8px;

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

  border-radius: 999px;

  background:
    rgba(0,0,0,0.55);

  font-size: 11px;

  backdrop-filter: blur(10px);
}

.hero-message h2 {
  margin: 0;

  max-width: 360px;

  font-size: 25px;
  line-height: 1.35;
}

/* =========================
   会社情報
========================= */

.label {
  margin: 0 0 5px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.company-main {
  position: relative;
  z-index: 5;

  margin: -32px 15px 12px;
  padding: 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background:
    rgba(25,29,34,0.90);

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

  border-radius: 16px;

  backdrop-filter: blur(18px);
}

.company-main h2 {
  margin: 0;

  font-size: 20px;
}

.industry {
  margin: 5px 0 0;

  color: var(--muted);

  font-size: 12px;
}

.company-level {
  padding: 7px 11px;

  background: var(--green);

  color: #07130d;

  border-radius: 9px;

  font-weight: 900;
}

/* =========================
   経営数字
========================= */

.stats {
  padding: 0 15px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 9px;
}

.stat-card {
  padding: 14px;

  min-height: 82px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  background: var(--panel);

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

  border-radius: 14px;
}

.stat-card span {
  color: var(--muted);

  font-size: 12px;
}

.stat-card strong {
  font-size: 20px;
}

/* =========================
   信用・行動力
========================= */

.status-row {
  margin: 9px 15px 0;

  display: grid;

  grid-template-columns:
    0.8fr 1.8fr;

  gap: 9px;
}

.trust-box,
.ap-box {
  padding: 14px;

  background: var(--panel);

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

  border-radius: 14px;
}

.trust-box {
  display: flex;

  flex-direction: column;

  justify-content: space-between;
}

.trust-box span,
.ap-title span {
  color: var(--muted);

  font-size: 12px;
}

.trust-box strong {
  font-size: 25px;

  color: var(--gold);
}

.ap-title {
  display: flex;

  justify-content: space-between;

  gap: 8px;
}

.ap-bar {
  height: 8px;

  margin-top: 13px;

  overflow: hidden;

  background: #30363d;

  border-radius: 999px;
}

#apBar {
  width: 100%;
  height: 100%;

  background: var(--green);

  border-radius: 999px;

  box-shadow:
    0 0 12px
    rgba(46,232,137,0.4);

  transition:
    width 0.25s;
}

/* =========================
   今日のミッション
========================= */

.mission-card {
  margin: 18px 15px 0;

  padding: 17px;

  background:
    linear-gradient(
      135deg,
      rgba(35,42,49,0.98),
      rgba(15,18,22,0.98)
    );

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

  border-radius: 17px;
}

.mission-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 13px;
}

.mission-header h2 {
  margin: 0;

  font-size: 18px;
}

.gift {
  font-size: 27px;
}

.mission {
  padding: 10px 0;

  display: flex;

  align-items: center;

  gap: 10px;

  border-top:
    1px solid
    rgba(255,255,255,0.07);

  font-size: 14px;
}

.checkbox {
  width: 20px;
  height: 20px;

  flex: 0 0 auto;

  border:
    2px solid #79818a;

  border-radius: 5px;
}

/* =========================
   CEO行動
========================= */

.action-section {
  padding:
    25px 15px 0;
}

.section-heading h2 {
  margin: 0;

  font-size: 21px;
}

.actions {
  margin-top: 13px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;
}

.action-button {
  position: relative;

  min-height: 130px;

  padding:
    17px 12px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-end;

  overflow: hidden;

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

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #28313a,
      #151a20
    );

  color: white;

  text-align: left;

  cursor: pointer;

  transition:
    0.18s ease;
}

.action-button::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,0,0,0.65)
    );

  pointer-events: none;
}

.action-button > * {
  position: relative;

  z-index: 2;
}

.action-button:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(85,169,255,0.7);
}

.action-button:active {
  transform:
    scale(0.98);
}

.action-icon {
  margin-bottom: auto;

  font-size: 28px;
}

.action-button strong {
  margin-top: 20px;

  font-size: 16px;
}

.action-button small {
  margin-top: 4px;

  color: #b7bdc5;
}

/* =========================
   入金・支払
========================= */

.schedule-grid {
  padding:
    25px 15px 0;

  display: grid;

  gap: 10px;
}

.schedule-card,
.report-card,
.goal-card {
  padding: 17px;

  background: var(--panel);

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

  border-radius: 17px;
}

.schedule-card h2,
.report-card h2,
.goal-card h2 {
  margin:
    0 0 12px;

  font-size: 18px;
}

.empty {
  color: var(--muted);

  font-size: 13px;
}

.schedule-item {
  margin-top: 8px;

  padding: 12px;

  background: var(--panel2);

  border-radius: 11px;

  font-size: 13px;
}

/* =========================
   経営日報
========================= */

.report-card {
  margin:
    10px 15px 0;
}

#gameLog p {
  margin:
    8px 0 0;

  padding: 12px;

  background: var(--panel2);

  border-radius: 11px;

  font-size: 13px;

  line-height: 1.5;
}

/* =========================
   30日チャレンジ
========================= */

.goal-card {
  margin:
    10px 15px 25px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 15px;
}

.goal-card h2 {
  margin: 0;
}

.goal-card > strong {
  white-space: nowrap;

  color: var(--gold);

  font-size: 20px;
}

/* =========================
   下メニュー
========================= */

.bottom-nav {
  position: fixed;

  z-index: 100;

  left: 50%;
  bottom: 0;

  width:
    min(100%, 520px);

  height: 76px;

  transform:
    translateX(-50%);

  display: grid;

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

  background:
    rgba(9,13,18,0.95);

  border-top:
    1px solid
    rgba(255,255,255,0.12);

  backdrop-filter:
    blur(20px);
}

.bottom-nav button {
  border: 0;

  background:
    transparent;

  color:
    #8e98a3;

  cursor: pointer;
}

.bottom-nav button span,
.bottom-nav button small {
  display: block;
}

.bottom-nav button span {
  margin-bottom: 3px;

  font-size: 20px;
}

.bottom-nav button small {
  font-size: 10px;
}

.bottom-nav .nav-active {
  color: white;
}

.bottom-nav .nav-active span {
  color: var(--blue);

  text-shadow:
    0 0 15px
    rgba(85,169,255,0.7);
}

/* =========================
   PC表示
========================= */

@media (min-width: 700px) {

  body {
    padding:
      25px 0;
  }

  .game-container {
    border-radius:
      28px;

    overflow: hidden;
  }

  .bottom-nav {
    bottom: 25px;

    border-radius:
      0 0 28px 28px;
  }
}
/* MVP additions preserve the original dark office design. */
[hidden]{display:none!important}
.panel{margin:18px 15px;padding:20px;background:var(--panel);border:1px solid var(--border);border-radius:17px}
.panel h2{margin-top:4px;font-size:21px}.panel p{color:var(--muted);font-size:13px;line-height:1.8}
.panel button,dialog button{display:block;width:100%;padding:15px;margin-top:12px;border:1px solid var(--border);border-radius:12px;background:#253740;color:white;font-size:14px;cursor:pointer}
button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
#clientsList,#employeesList{white-space:pre-line;line-height:2;font-size:14px}
.warning{margin:15px;padding:14px;border:1px solid #bd7041;border-radius:12px;background:#38271c;color:#ffca90;font-size:13px}
.progress,#missionReward{font-size:12px;color:var(--green);line-height:1.7}.progress{margin:12px 17px}
dialog{width:min(88%,380px);border:1px solid var(--border);border-radius:20px;background:#111820;color:white;padding:25px;text-align:center;box-shadow:0 25px 80px #000b}dialog::backdrop{background:#0009}dialog h2{font-size:20px;color:var(--green)}dialog strong{color:var(--gold)}dialog button{background:var(--green);color:#07130d;font-weight:700}
.stat-card{min-width:0}.stat-card strong{font-size:clamp(15px,4.5vw,20px);overflow-wrap:anywhere}
.bottom-nav{height:calc(76px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:360px){.hero-top{gap:5px}.sub-title{font-size:10px}h1{font-size:26px}.hero-message h2{font-size:23px}.goal-card{flex-wrap:wrap}.ap-title{flex-wrap:wrap}}

/* v1.0: touch targets, short guide, safe-area spacing */
.game-container{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
html{scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom))}
button{min-height:44px;touch-action:manipulation}
main{scroll-margin-top:12px}
.game-tools{display:flex;align-items:center;justify-content:space-between;margin:12px 17px;color:var(--muted);font-size:12px}
.game-tools button{background:#1b2936;border:1px solid var(--border);border-radius:10px;color:#e8eef5;padding:8px 16px}
.tutorial{border-color:#468dba}.tutorial strong{font-size:15px;color:#aad7ff}.tutorial .subtle{background:transparent;margin-top:6px;color:#b6c2d0}
.mode-card{white-space:pre-line;line-height:1.8;font-size:13px;border-left:3px solid #64b5fa;padding:12px;background:#14202c;border-radius:8px;margin:16px 0}
dialog{max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
#helpDialog{text-align:left}#helpDialog p,#helpDialog dd{font-size:13px;line-height:1.7;color:#b8c5d5}#helpDialog dt{font-size:14px;margin-top:12px;color:#e7eef8}#helpDialog dd{margin:4px 0 0}
.panel,.mission-card,.goal-card{overflow-wrap:anywhere}
@media(max-width:360px){.panel{padding:16px}.company-main{gap:8px}.company-main h2{font-size:20px}.clock-area{font-size:11px}.schedule-grid{grid-template-columns:1fr}}

/* Compact, in-flow sound controls on every view. */
.sound-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 17px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#14202c;font-size:12px;color:#c5d4e3}.sound-controls button{border:1px solid #405666;background:#1b2936;color:#edf4fb;border-radius:9px;padding:8px 12px}.sound-controls input{flex:1;min-width:60px;width:80px;min-height:44px;accent-color:#7ecbb1}.sound-controls output{width:34px}.sound-controls small{flex-basis:100%;color:#a4b7ca;font-size:11px}