/* styles.css */
.floating-image {
    position: fixed;
    bottom: 30%;
    right: 0;
    z-index: 1000;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

.floating-image img {
    width: 50px;
    height: auto;
}

.tooltip {
    position: absolute;
    top: -40px;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: normal;
    word-wrap: break-word;
    width: 60px;
    text-align: center;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.custom-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background-color: #FFFFFF;
    border: 1px solid #D1D1D1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    width: 300px;
    font-family: "San Francisco", Arial, sans-serif;
    border-radius: 12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    will-change: transform, opacity;
}

.modal-header {
    background-color: #F2F2F2;
    border-bottom: 1px solid #D1D1D1;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-title {
    font-size: 14px;
    font-weight: bold;
    color: #000;
}

.modal-close {
    cursor: pointer;
    color: #000;
    font-size: 16px;
    font-weight: bold;
}

.modal-content {
    padding: 10px;
    color: #333;
    height: 120px;
    overflow-y: auto;
    position: relative;
    display: flex; 
    justify-content: space-between;
}

.modal-footer {
    border-top: 1px solid #D1D1D1;
    padding: 10px;
    text-align: right;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    position: fixed;
    bottom: 0;
    width: 95%;
    height: 30px;
}

.modal-button {
    background-color: #2196F3;
    border: 1px solid #D1D1D1;
    color: #ffeb3b;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.modal-button1 {
    background-color: #F2F2F2;
    border: 1px solid #D1D1D1;
    color: #000000;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 12px;
}

.modal-button.red {
    background-color: #FF453A;
    border-color: #FF453A;
    color: #FFF;
}

.modal-button.yellow {
    background-color: #FFCC00;
    border-color: #FFCC00;
}

.modal-button.green {
    background-color: #34C759;
    border-color: #34C759;
}

.modal-button.blue {
    background-color: #007AFF;
    border-color: #007AFF;
    color: #FFF;
}

.modal-button.red:hover {
    background-color: #FF3B30;
}

.modal-button.yellow:hover {
    background-color: #FFD60A;
}

.modal-button.green:hover {
    background-color: #34C759;
}

.modal-button.blue:hover {
    background-color: #0062CC;
}

.minimized {
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
}

.image-scale-up {
    transform: scale(1.2);
    opacity: 0.5;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000a6;
    z-index: 1002;
    pointer-events: none;
}

.image-selection {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    width: 80%;
    float: left;
}

.image-selection img {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
}

.image-selection img.selected {
    border-color: #34C759;
}

/* 今天吃啥 */
#randomText {
    white-space: pre-line; /* 允许在文本中换行 */
}

/* 功能区1 */
.modal-content1-1 {
    width: 80px; 
    height: 30px; 
    background: #FF705E; 
    color: #fff; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* 功能区1-抛硬币 */
.modal-content1-2 {
    margin-top: 10px;
    width: 80px;
    height: 80px;
    background: #f0f0f0;
    color: #fff; /* 文字颜色为白色 */
    border-radius: 10px;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    cursor: pointer;
    position: relative; /* 使子元素相对定位 */
}
.top-texts {
    /* display: flex; */
    justify-content: center;
    margin-bottom: 60px;
    font-size: 10px;
}

.top-texts span {
    color: #03a9f4;
    /* margin: 0 5px; */
}

.side-texts {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 60%;
    left: 3px;
    right: 3px;
    transform: translateY(-50%);
    font-size: 10px;
}

.left-texts, .right-texts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.left-texts span, .right-texts span {
    color: #03a9f4;
    /* margin: 5px 0; */
}

.floating-texts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.floating-texts span {
    position: absolute;
    font-size: 10px;
}

.floating-texts .top {
    top: 0;
    transform: translateY(-50%);
}

.floating-texts .bottom {
    bottom: 0;
    transform: translateY(50%);
}

.floating-texts .left {
    left: 0;
    transform: translateX(-50%);
}

.floating-texts .right {
    right: 0;
    transform: translateX(50%);
}

.floating-texts .top:nth-child(2) { left: 20%; }
.floating-texts .top:nth-child(3) { left: 40%; }
.floating-texts .top:nth-child(4) { left: 60%; }
.floating-texts .top:nth-child(5) { left: 80%; }

.floating-texts .bottom:nth-child(2) { left: 20%; }
.floating-texts .bottom:nth-child(3) { left: 40%; }
.floating-texts .bottom:nth-child(4) { left: 60%; }
.floating-texts .bottom:nth-child(5) { left: 80%; }

.floating-texts .left:nth-child(2) { top: 20%; }
.floating-texts .left:nth-child(3) { top: 40%; }
.floating-texts .left:nth-child(4) { top: 60%; }
.floating-texts .left:nth-child(5) { top: 80%; }

.floating-texts .right:nth-child(2) { top: 20%; }
.floating-texts .right:nth-child(3) { top: 40%; }
.floating-texts .right:nth-child(4) { top: 60%; }
.floating-texts .right:nth-child(5) { top: 80%; }

#coinResult img {
    width: 80px;
    height: 80px;
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 精确居中 */
}
#coinText {
    width: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #03a9f4;
    font-size: 16px;
    z-index: 1; /* 确保文字在图片之上 */
}

#loadingImage {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#coinResult {
    /* font-size: 16px; */
    color: #333;
}

/* 功能1一 */
.modal-content1 a {
    color: #fff; text-decoration: none;
}

/* 功能1二-预留弹窗 */
.modal-content2 {
    width: 50px; 
    /* height: 100px;  */
    background: #ffffff; 
    color: #000; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    /* padding: 10px; */
}
/* 第一行中间效果 */
.modal-content2 {
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    gap: 10px; /* 子元素之间的间距 */
}

.modal-content2-1 {
    width: 50px;
    height: 10px;
    background: #03A9F4;
    color: #000;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.modal-content2-2 {
    width: 50px;
    height: 100px;
    background: #8bc34a;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}


#weatherInfo1, #weatherInfo2 {
    cursor: pointer; /* 鼠标悬停时显示指针 */
    font-size: 16px; /* 文字大小 */
    color: #ffffff; /* 文字颜色 */
}

.new-window {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F2F2F2;
    border: 1px solid #D1D1D1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1003;
    font-family: "San Francisco", Arial, sans-serif;
    overflow: hidden;
}

.new-window-header {
    background-color: #EDEDED;
    border-bottom: 1px solid #D1D1D1;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.new-window-title {
    font-weight: bold;
    color: #333;
}

.new-window-button {
    background-color: #FF3B30;
    border: none;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 12px;
    transition: background-color 0.3s ease;
}

.new-window-button:hover {
    background-color: #E52D27;
}

.new-window-content {
    padding: 20px;
    color: #333;
    height: calc(100% - 60px); /* 减去头部的高度 */
    overflow-y: auto;
    background-color: #FFFFFF;
}
/* 功能1三 */
.modal-content3 {
    width: 120px; 
    height: 120px; 
    background: #f0f0f0; 
    color: #000; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
    /* padding: 10px; */
}
.modal-content5 {
    display: block; /* 确保每个 div 都独占一行 */
    margin-bottom: 10px; /* 可选：增加一些间距，使布局更美观 */
    clear: both; /* 清除浮动，防止其他样式影响布局 */
}

/* 功能区第二行 */
.modal-contentx2 {
    padding: 10px;
    color: #333;
    height: 120px;
    overflow-y: auto;
    position: relative;
    display: flex; 
    justify-content: space-between;
}
.modal-contentxfooter {
    padding: 10px;
    color: #333;
    height: 50px;
    overflow-y: auto;
    position: relative;
    display: flex; 
    justify-content: space-between;
}
/* 左右盒子样式 */
.box{
    border-radius: 10px;
}

.right-box {
    width: 120px;
    height: 120px;
    /* background-color: red; */
    /* padding: 10px; */
}

/* 为了确保两个盒子之间有10px的间隔 */
.modal-content4 .left-box {
    margin-right: 10px;
}

/* 第二行左轮播 */
.left-box {
    width: 155px;
    height: 120px;
    background-color: rgb(0, 0, 0);
    /* padding: 10px; */
    position: relative; /* 确保轮播图片的绝对定位相对于 .left-box */
    overflow: hidden; /* 隐藏超出部分 */
}

.carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 使图片覆盖整个 div */
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* 添加过渡效果 */
}

.carousel-image.active {
    opacity: 1; /* 显示当前活动的图片 */
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 0px;
    z-index: 100;
}

.carousel-control.prev {
    left: 0px;
}

.carousel-control.next {
    right: 0px;
}

/*  第二行右 */ 
.right-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 两列，每列等宽 */
    grid-template-rows: repeat(2, 1fr); /* 两行，每行等高 */
    gap: 5px; /* 间隔5px */
    padding: 0px; /* 可以根据需要调整内边距 */
   /* background-color: lightgray;  背景颜色，可以根据需要调整 */
    overflow: hidden; /* 确保内容不会超出上级 div */
}

.item-link {
    text-decoration: none; /* 去掉a标签的默认下划线 */
    color: inherit; /* 继承父元素的颜色 */
    display: block; /* 使a标签成为块级元素 */
    overflow: hidden; /* 确保内容不会超出 item-link */
}

.item {
    background-color: #f0f0f0; /* 背景颜色，可以根据需要调整 */
  /*  border: 1px solid #ccc;  边框，可以根据需要调整 */
    box-sizing: border-box; /* 确保边框和内边距不会增加元素的总宽度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; /* 使子元素可以相对于此元素定位 */
    padding: 5px; /*  可以根据需要调整内边距 */
    overflow: hidden; /* 确保内容不会超出 item */
}

.item-image {
    max-width: 65%; /* 图片最大宽度为80% */
    height: auto; /* 保持图片的宽高比 */
    object-fit: cover; /* 确保图片覆盖整个区域 */
}

.item-text {
    font-size: 11px; /* 文字大小为12px */
    margin-top: 5px; /*  文字与图片的间距 */
    color: black; /* 文字颜色为黑色 */
    word-wrap: break-word; /* 确保长单词或 URL 地址换行 */
}

.badge {
    position: absolute; /* 绝对定位 */
    top: 0px; /* 距离顶部5px */
    right: 0px; /* 距离右侧5px */
    background-color: red; /* 背景颜色为红色 */
    color: white; /* 文字颜色为白色 */
    padding: 2px 5px; /* 内边距 */
    border-radius: 10px; /* 圆角效果10px */
    font-size: 10px; /* 文字大小 */
    line-height: 1; /* 行高 */
}

/* 功能区第三行 */
.modal-contentx3 {
    /* padding: 0px 10px 0px 10px; */
    color: #333;
    height: 60px;
    overflow-y: auto;
    position: relative;
    display: flex; 
    justify-content: space-between;
    border-radius: 10px; /* 圆角效果10px */
    margin: 0px 8px 0px 8px;
}

.modal-contentx3-div {
    width: 1000%;
    height: 60px;
    background-color: #f0f0f0;
}
.link-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1px;
}

.link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 5px 5px 1px;
    width: 50px;
    height: 5px; /* 调整高度以适应图片和文字 */
    background-color: #f0f0f0;
    text-decoration: none;
    color: black;
    margin-top: 5px;
}

.link-item img {
    width: 60%;
    height: auto;
    /* margin-bottom: 2px; */
}

.link-item span {
    text-align: center;
    font-size: 12px; /* 根据需要调整字体大小 */
}