@import "../game-common.css";

/* ===================================================
0. 全局变量 & 基础容器
=================================================== */
:root{
--pool-bg:rgba(255,255,255,0.4);
--pool-padding:12px;
--slot-bg:#ffffff;
--border-color:#dddddd;
--border-active:var(--macaron-blue);
--color-correct-border:#B8F2E6;
--color-correct-bg:#E8FBF7;
--color-wrong-border:#FFAEC0;
--color-wrong-bg:#FFF0F3;

--radius:6px; /* 统一圆角 */

--item-gap:6px;
--item-width:260px;
--item-height:50px;
--min-image-size:60px;

--macaron-blue:#A2D2FF;
--macaron-gray:#D1D9E0;
}

.game-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* ===================================================
   Full Screen Mode
=================================================== */
/* 当 .game-wrapper 进入全屏时，强制所有内部容器撑满 */
.game-wrapper:fullscreen{
    /* 修复顶/底栏玻璃效果在全屏下变灰：提供可被 blur 的背景 */
    background: var(--page-bg);
}
.game-wrapper:fullscreen .game-area-wrapper,
.game-wrapper:fullscreen .game-area {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
}

/* 关键修复：覆盖 game-common.css 中对 .top-bar/.bottom-bar 的宽度限制 */
.game-wrapper:fullscreen .top-bar,
.game-wrapper:fullscreen .bottom-bar {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
}

/* ===================================================
1. Game Area
=================================================== */
/* 游戏区 wrapper (合并了原 main-content 样式) */
.game-area {
    /* width: 80%;
    max-width: 1200px;
    flex: 1;
    display: flex; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--game-area-bg);
    border-radius: var(--card-radius);
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
    padding:6px;
}
/* .game-area{
width:100%;
max-width:1200px;
flex:1;
margin:0 auto;
display:flex;
justify-content:center;
align-items:center;
padding:6px;
box-sizing:border-box;
overflow:hidden;
} */

/* submit button 容器 */
.submit-container {
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 64px;
    padding: 6px 10px 12px;
    box-sizing: border-box;
}

.top-bar .pagination-container {
    display: none !important;
}

.dm-action-bar {
    width: min(100%, 720px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 32px;
}

.dm-action-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    justify-self: center;
}

.dm-pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 3;
    justify-self: end;
}

.dm-pagination {
    margin-top: 0;
}

.layout.is-submitted .card-content,
.layout.is-submitted .drag-item,
.layout.is-submitted .pool-inner {
    filter: grayscale(0.22);
}

.layout.is-submitted .card-content,
.layout.is-submitted .drag-item {
    opacity: 0.82;
}

/* ===================================================
2. Layout 基础
=================================================== */
.layout{
flex:1;
width:100%;
height:96%;
display:flex;
gap:24px;
padding:20px;
box-sizing:border-box;
}

/* ===================================================
3. Layout 1 （左右结构）
=================================================== */
.layout-layout1{
flex-direction:row;
}
.layout-layout1 .source{
flex:0.6;
display:flex;
justify-content:center;
align-items:center;
}
.layout-layout1 .pool-inner{
width:calc(var(--item-width) + var(--pool-padding) * 2);
height:80%;
display:grid;
justify-content:center;
align-content:center;
gap:var(--item-gap);
padding:var(--pool-padding);
background:var(--pool-bg);
border-radius:var(--radius);
box-sizing:border-box;
}
.layout-layout1 .target{
flex:1.2;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:var(--item-gap);
}

/* ===================================================
4. Layout 2 （上下结构）
=================================================== */
.layout-layout2 {
    flex-direction: column;
    gap: 0px;
    padding: 5px;
}

.layout-layout2 .source {
    flex: 0;
    margin-bottom: 10px;
}

.layout-layout2 .pool-inner {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: grid;
    grid-template-rows: repeat(var(--pool-rows, 2), var(--slot-h, var(--item-height)));
    grid-template-columns: repeat(var(--pool-cols, 5), minmax(0, 1fr));
    justify-content: center;
    align-content: center;
    gap: var(--item-gap);
    background: var(--pool-bg);
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden; /* 防止内容撑开 */
}

/* 确保 layout2 里的 drag-item 宽度自适应容器 */
.layout-layout2 .drag-item {
    width: 100%; 
    height: var(--slot-h, var(--item-height));
    min-width: 0;
}

.layout-layout2 .target {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--target-cols, 3), 1fr);
    grid-template-rows: repeat(var(--target-rows, 2), minmax(0, 1fr));
    gap: 10px;
    overflow: hidden; /* 禁止滚动轴 */
    box-sizing: border-box;
    min-height: 0; /* 允许在 flex 布局中缩小 */
}

/* 垂直布局下的卡片排版：Slot在上，Content在下 */
.layout-layout2 .drop-card {
    display: flex;
    flex-direction: column-reverse; /* 因为 HTML 顺序是 Content 然后 Slot，所以用 reverse 让 Slot 在上 */
    height: 100%; /* 占满网格单元格 */
    padding: 4px;
    gap: 4px;
    align-items: stretch;
    box-sizing: border-box;
    min-height: 0; /* 允许缩小 */
    min-width: 0;
}

.layout-layout2 .card-slot {
    width: 100%;
    height: var(--slot-h, var(--item-height));
    flex-shrink: 0; /* 禁止压缩 Slot */
}

.layout-layout2 .card-content {
    width: 100%;
    flex: 1; /* 剩余空间全部给内容区（展示图片） */
    height: auto;
    min-height: 0; /* 极其重要：允许在容器缩小时内容也跟着缩小 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 图片在 layout2 中的自适应 */
.layout-layout2 .content-wrapper.has-image {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout-layout2 .content-image {
    max-width: 100%;
    max-height: 100%;
    min-width: var(--min-image-size);
    min-height: var(--min-image-size);
    width: auto;
    height: auto;
    object-fit: contain; /* 保证图片不溢出且比例正确 */
}

/* ===================================================
5. 通用 Source
=================================================== */
.source{
min-width:0;
display:flex;
justify-content:center;
align-items:center;
}
.pool-inner{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:var(--item-gap);
padding:var(--pool-padding);
border-radius:var(--radius);
background:var(--pool-bg);
box-sizing:border-box;
}

/* ===================================================
6. Target
=================================================== */
.target{
flex:1;
min-width:0;
}

/* ===================================================
7. Drag Item
=================================================== */
.drag-item{
width:var(--item-width);
height:var(--item-height);
padding:6px 8px;
border-radius:var(--radius);
background:#ffffff;
border:1px solid rgba(0,0,0,0.15);
display:flex;
align-items:center;
justify-content:center;
cursor:grab;
user-select:none;
transition:transform .25s,box-shadow .25s;
box-sizing:border-box;
}
.drag-item:hover{
transform:translateY(-3px);
box-shadow:0 6px 14px rgba(0,0,0,0.15);
}
.drag-item.is-dragging{
cursor:grabbing;
transform:scale(0.76);
box-shadow:0 8px 16px rgba(0,0,0,0.18);
}

/* ===================================================
8. Drop Card
=================================================== */
.drop-card{
width:100%;
max-width:100%;
display:flex;
gap:12px;
padding: 6px;
border-radius:var(--radius);
border:1.5px dashed rgba(0,0,0,0.2);
box-sizing:border-box;
min-width:0;
}

/* ===================================================
9. Card Content
=================================================== */
.card-content{
width:var(--item-width);
height:var(--item-height);
padding:2px 2px;
border-radius:var(--radius);
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
flex-shrink:1;
min-width:0;
}
.content-wrapper{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
width:100%;
height:100%;
min-width:0;
}
.content-wrapper.has-image{
flex-direction:column;
}
.content-wrapper.has-image.has-text{
flex-direction:row;
justify-content:flex-start;
}
.content-image{
min-width:var(--min-image-size);
min-height:var(--min-image-size);
max-width:100%;
max-height:100%;
object-fit:contain;
}

/* ===================================================
10. Slot
=================================================== */
.card-slot{
width:var(--item-width);
height:var(--item-height);
display:flex;
align-items:center;
justify-content:center;
border-radius:var(--radius);
border:1px dashed rgba(0,0,0,0.3);
background:rgba(255,255,255,0.75);
box-sizing:border-box;
flex-shrink:0;
position:relative; /* 添加此行以支持对错图标定位 */
}
.card-slot .drag-item{
width:100%;
height:100%;
}
.card-slot:empty::after{
content:"Drop here";
font-size:12px;
color:rgba(0,0,0,0.35);
}

/* ===================================================
11. 状态
=================================================== */
.area-hover{
border-color:var(--macaron-blue)!important;
background:rgba(162,210,255,0.15);
}
/* .correct-match, .wrong-match 已废弃，现使用 .result-icon 展示对错 */

/* ===================================================
13. Submit Button
=================================================== */
.submit-btn{
padding:7px 18px;
border-radius:var(--radius);
border:none;
font-size:15px;
cursor:pointer;
background:var(--macaron-blue);
color:#fff;
transition:opacity .2s, transform .15s ease, box-shadow .15s ease;
margin-bottom: 0;
}
.submit-btn:hover{
opacity:.85;
transform:translateY(-2px);
box-shadow:0 10px 18px rgba(0,0,0,0.18);
}
.submit-btn:active{
transform:translateY(0);
box-shadow:0 6px 12px rgba(0,0,0,0.14);
}
.submit-btn.submitted{
background:#ccc;
pointer-events:none;
}

/* ===================================================
14. Result Icon
=================================================== */
.result-icon{
position:absolute;
top:-8px;
right:-8px;
width:58px;
height:58px;
pointer-events:none;
z-index:999;
}

.disabled-item {
    filter: grayscale(100%);
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: none;
}

.submitted-slot {
    border-style: dashed !important;
    background: #f0f0f0 !important;
}