/*
 单人拼图「难度 / 尺寸选择页」样式（/play/{puzzle}/size）
 沿用站点现有设计规范：正文灰 #555 / 次要灰 #999 / 边框 #eee / 强调粉 #ea4c89 /
 白卡 + 10px 圆角；与首页、列表页同一视觉体系。

 宽度：容器同时带 .wrap（站点首页同款：宽 100%、最大 1750px），
 因此「预览/选择」「排行榜」「你可能喜欢」三个区块左右边界完全对齐。
 三端适配：桌面两栏（预览 | 选择），平板/手机单栏纵向堆叠。
*/

.psz {
    /* max-width 交给 .wrap（首页同款 1750px），此处只给内边距与排版基线 */
    padding: 24px 0 60px;
    color: #555;
    font-size: 14px;
    box-sizing: border-box;
}

/* ---------- ① 预览 + 信息 + 主操作 ---------- */
.psz-hero {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 34px;
}
.psz-hero__media {
    flex: 0 0 46%;
    max-width: 46%;
    background: #f4f4f4;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
}
/* 预览图：随容器同比放大，宽高比不变（height:auto），不拉伸、不裁切 */
.psz-hero__media img { display: block; width: 100%; max-width: 100%; height: auto; }
.psz-hero__info { flex: 1 1 auto; min-width: 0; }
.psz-hero__title {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 700;
    color: #333;
}
/* 拼图说明（简介）：默认最多 2 行，超出省略号截断（无内容时模板不输出该节点） */
.psz-hero__desc {
    display: -webkit-box; /* 必须为 -webkit-box：line-clamp 仅在该显示模式下生效 */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
    max-width: 100%;
    color: #888;
    font-size: 13px;
    line-height: 1.65;
}
.psz-hero__sub { margin: 0 0 18px; color: #999; font-size: 13px; }

.psz-section__title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: #333;
}

/* ---------- ② 尺寸 / 难度选项（等宽网格、对齐一致、间距统一） ---------- */
.psz-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    grid-auto-rows: 1fr; /* 所有选项等高，避免参差跳动 */
    gap: 12px;
    margin-bottom: 20px;
}
.psz-size {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 14px 16px;
    text-align: left;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    color: #555;
    cursor: pointer;
    transition: border-color .15s linear, background .15s linear, box-shadow .15s linear;
}
.psz-size:hover { border-color: #f3c2d6; background: #fdf2f7; }
.psz-size.is-active {
    border-color: #ea4c89;
    background: #fdf2f7;
    box-shadow: 0 0 0 1px #ea4c89 inset;
}
/* 「数量+单元格」与「难度名称」同一行：数量靠左、名称靠右 */
.psz-size__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
}
/* 「数字 + 单位」紧跟同一行（如「48 片」） */
.psz-size__count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1.1;
}
.psz-size__n { font-size: 22px; font-weight: 800; color: #ea4c89; }
.psz-size__unit { font-size: 12px; color: #999; }
.psz-size__name {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: #333;
}
.psz-size__hint { font-size: 12px; color: #999; }
.psz-size__grid {
    margin-top: 6px;
    font-size: 11px;
    color: #aaa;
    font-variant-numeric: tabular-nums;
}

.psz-start {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 22px;
    /* 必须 border-box：手机端 width:100% 时，若为 content-box 会因左右内边距撑破容器、产生横向溢出 */
    box-sizing: border-box;
    border-radius: 999px;
    background: #ea4c89;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s linear;
}
.psz-start:hover { background: #f5689e; color: #fff; }
.psz-start__go { font-size: 13px; opacity: .9; }

/* ---------- ③ 排行榜（标准张数） ---------- */
.psz-rank {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 34px;
}
.psz-rank__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
}
.psz-rank__head .psz-section__title { margin: 0; }
.psz-rank__tag {
    font-size: 12px;
    color: #ea4c89;
    background: #fdf2f7;
    border: 1px solid #f7d9e6;
    border-radius: 999px;
    padding: 2px 10px;
}
.psz-rank__more { margin-left: auto; font-size: 13px; color: #888; text-decoration: none; }
.psz-rank__more:hover { color: #ea4c89; }
/* 排行榜列表两列铺开（宽屏更整齐），窄屏回落单列 */
.psz-rank__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}
.psz-rank__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid #f4f4f4;
    font-size: 14px;
}
.psz-rank__no {
    flex: 0 0 22px; width: 22px; height: 22px; line-height: 22px;
    text-align: center; border-radius: 50%;
    background: #eef1f5; color: #5b6b7c; font-size: 12px;
}
.psz-rank__row:nth-child(1) .psz-rank__no { background: #f5c542; color: #7a5b00; }
.psz-rank__row:nth-child(2) .psz-rank__no { background: #d7dde5; color: #56626e; }
.psz-rank__row:nth-child(3) .psz-rank__no { background: #e8c3a2; color: #7a4a1e; }
.psz-rank__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psz-rank__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #ea4c89; }
.psz-rank__empty { margin: 6px 0; color: #999; font-size: 13px; }

/* ---------- ④ 你可能喜欢（复用首页卡片 .w-item）：每行 5 个，最多 2 行（10 个） ----------
   选择器带 body:not(.bg-com) 前缀以压过 main.css 窄屏的 .w-list .w-item{float:none;margin:auto} */
.psz-related__list { padding: 0; }
body:not(.bg-com) .psz-related__list .w-item { width: calc(20% - 30px); height: auto; float: left; margin: 10px 15px; }
body:not(.bg-com) .psz-related__list .w-img,
body:not(.bg-com) .psz-related__list .w-img img,
body:not(.bg-com) .psz-related__list .w-img a.w-img-link { width: 100%; height: auto; }
body:not(.bg-com) .psz-related__list a.w-title h5 { width: auto; margin-right: 12px; }

/* ---------- TAGS 关键词区（每个词可点击 → 列表页 ?q= 搜索，与 Tags 聚合页同口径） ---------- */
.psz-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
    font-size: 12px;
}
.psz-tags__label { color: #999; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.psz-tags__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.psz-tags__item {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #eee;
    border-radius: 999px;
    background: #fafafa;
    color: #666;
    font-size: 12px;
    text-decoration: none;
    transition: border-color .15s linear, background .15s linear, color .15s linear;
}
.psz-tags__item:hover { border-color: #f3c2d6; background: #fdf2f7; color: #ea4c89; }

/* ---------- 分享 + 在线举报（图标按钮行，举报靠最右） ---------- */
.psz-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}
.psz-share__list { display: flex; align-items: center; gap: 8px; }
.psz-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
    color: #666;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .15s linear, background .15s linear, color .15s linear;
}
.psz-share__btn:hover { border-color: #f3c2d6; background: #fdf2f7; color: #ea4c89; }
.psz-share__btn svg { width: 18px; height: 18px; }
.psz-report {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    box-sizing: border-box;
    margin-left: auto; /* 排在分享图标行最右 */
    transition: border-color .15s linear, background .15s linear, color .15s linear;
}
.psz-report:hover { border-color: #f3c2d6; background: #fdf2f7; color: #ea4c89; }
.psz-report svg { width: 16px; height: 16px; }

/* ---------- 举报弹窗 ---------- */
.psz-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.psz-modal[hidden] { display: none; }
.psz-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 18, 22, .55); }
.psz-modal__card {
    position: relative;
    width: min(560px, 100%);
    max-height: 88vh;
    overflow: auto;
    padding: 22px 22px 18px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.psz-modal__close {
    position: absolute; top: 10px; right: 12px;
    width: 30px; height: 30px;
    border: 0; border-radius: 8px;
    background: transparent; color: #999;
    font-size: 20px; line-height: 1;
    cursor: pointer;
}
.psz-modal__close:hover { background: #f4f4f4; color: #555; }
.psz-modal__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: #333; }
.psz-modal__lead { margin: 0 0 14px; font-size: 13px; color: #888; }
/* 问题类型：单选 chip（input 隐藏，:checked 样式直接生效，无需 JS） */
.psz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.psz-chip { position: relative; }
.psz-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.psz-chip span {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid #eee;
    border-radius: 999px;
    background: #fafafa;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s linear, background .15s linear, color .15s linear;
}
.psz-chip:hover span { border-color: #f3c2d6; }
.psz-chip input:checked + span { border-color: #ea4c89; background: #fdf2f7; color: #ea4c89; font-weight: 700; }
.psz-chip input:focus-visible + span { outline: 2px solid #ea4c89; outline-offset: 2px; }
.psz-field { display: block; margin-bottom: 12px; }
.psz-field__label { display: block; margin-bottom: 5px; font-size: 12px; color: #999; }
.psz-field__input, .psz-field__area {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-family: inherit;
}
.psz-field__area { min-height: 66px; resize: vertical; }
.psz-field__file { font-size: 13px; color: #555; }
.psz-modal__msg { margin: 0 0 10px; font-size: 13px; color: #2e9e5b; }
.psz-modal__msg.is-bad { color: #d9534f; }
.psz-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.psz-modal__cancel {
    height: 38px; padding: 0 16px;
    border: 1px solid #eee; border-radius: 999px;
    background: #fff; color: #666; font-size: 13px; cursor: pointer;
}
.psz-modal__submit {
    height: 38px; padding: 0 20px;
    border: 0; border-radius: 999px;
    background: #ea4c89; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.psz-modal__submit:hover { background: #f5689e; }
.psz-modal__submit:disabled { opacity: .6; cursor: default; }

.psz-empty { padding: 60px 0; text-align: center; color: #999; }

/* ---------- 三端适配 ---------- */
@media (max-width: 1199px) {
    .psz { padding: 16px 0 44px; }
    /* 平板：每行 4 个 */
    body:not(.bg-com) .psz-related__list .w-item { width: calc(25% - 30px); }
}
@media (max-width: 991px) {
    .psz-sizes { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .psz-rank__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .psz-hero { flex-direction: column; gap: 16px; }
    .psz-hero__media { flex: 0 0 auto; max-width: 100%; width: 100%; }
    .psz-hero__title { font-size: 20px; }
    /* 手机端：分享图标行与举报按钮同列排布，举报不再靠右浮动以免挤成一行溢出 */
    .psz-report { margin-left: 0; }
    .psz-modal__card { width: 100%; padding: 18px 16px 14px; }
    .psz-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .psz-size { padding: 12px 12px; }
    .psz-size__n { font-size: 19px; }
    .psz-start { width: 100%; justify-content: center; }
    .psz-rank { padding: 14px 14px; }
    .psz-rank__more { margin-left: 0; }
    /* 手机：每行 2 个 */
    body:not(.bg-com) .psz-related__list .w-item { width: calc(50% - 30px); }
}