@charset "utf-8";
/* ============================================================================
   新城娱乐 XINCHENG · 组件层
   ----------------------------------------------------------------------------
   签名组件（全站复用）：
     xc-ticker  档口跑马灯      xc-menu    点线菜单列表
     xc-ticket  撕票式信息卡    xc-plate   CSS 餐盘图形
     xc-step    取餐流程        xc-sched   直播排期表
     xc-faq     折叠问答        xc-note    合规提示条
   ============================================================================ */

@layer comp {

  /* ------------------------------------------------------------------ 跑马灯 */
  .xc-ticker {
    overflow: hidden;
    background: var(--xc-tomato);
    color: #fff8ee;
    border-block-end: 2px solid var(--xc-ink);
  }
  .xc-ticker__track {
    display: flex;
    inline-size: max-content;
    animation: xc-slide 46s linear infinite;
  }
  .xc-ticker:hover .xc-ticker__track { animation-play-state: paused; }
  .xc-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 26px;
    font-size: .78rem;
    letter-spacing: .05em;
    white-space: nowrap;
  }
  .xc-ticker__item::after {
    content: "◆";
    font-size: .55rem;
    color: var(--xc-yolk);
    margin-inline-start: 14px;
  }
  .xc-ticker__item b { font-family: var(--xc-num); color: var(--xc-yolk); }
  @keyframes xc-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .xc-ticker__track { animation: none; }
  }

  /* ------------------------------------------------------------------ 菜单列表 */
  .xc-menu { display: grid; }
  .xc-menu__row {
    display: grid;
    grid-template-columns: auto minmax(0, auto) minmax(36px, 1fr) auto;
    align-items: baseline;
    gap: 4px 18px;
    padding: 20px 4px;
    border-block-end: 1.5px dashed var(--xc-line-2);
    transition: background var(--xc-fast) var(--xc-ease), padding-inline var(--xc-fast) var(--xc-ease);
  }
  .xc-menu__row:hover { background: rgba(240, 178, 60, .14); padding-inline: 14px; }
  .xc-menu__no {
    font-family: var(--xc-num);
    font-size: .78rem;
    color: var(--xc-tomato);
    letter-spacing: .1em;
    padding-block-start: 6px;
  }
  .xc-menu__name {
    font-size: clamp(1.18rem, 2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -.015em;
  }
  .xc-menu__name span {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--xc-ink-3);
    margin-block-start: 4px;
  }
  .xc-menu__dots {
    align-self: center;
    block-size: 0;
    border-block-end: 2px dotted var(--xc-line-2);
    transform: translateY(-4px);
  }
  .xc-menu__meta {
    font-size: .82rem;
    color: var(--xc-ink-3);
    text-align: end;
    font-family: var(--xc-num);
    letter-spacing: .02em;
  }
  .xc-menu__arrow {
    display: inline-block;
    margin-inline-start: 8px;
    color: var(--xc-tomato);
    transition: transform var(--xc-fast) var(--xc-ease);
  }
  .xc-menu__row:hover .xc-menu__arrow { transform: translateX(5px); }

  /* ------------------------------------------------------------------ 撕票卡 */
  .xc-ticket {
    --xc-notch: 13px;
    position: relative;
    background: var(--xc-card);
    border: 2px solid var(--xc-ink);
    border-radius: var(--xc-radius);
    padding: 22px 22px 20px;
    display: grid;
    gap: 12px;
    box-shadow: var(--xc-lift-sm);
  }
  .xc-ticket::before,
  .xc-ticket::after {
    content: "";
    position: absolute;
    inline-size: calc(var(--xc-notch) * 2);
    block-size: calc(var(--xc-notch) * 2);
    border-radius: 50%;
    background: var(--xc-paper);
    border: 2px solid var(--xc-ink);
    inset-block-start: calc(50% - var(--xc-notch));
  }
  .xc-ticket::before { inset-inline-start: calc(var(--xc-notch) * -1 - 2px); }
  .xc-ticket::after  { inset-inline-end: calc(var(--xc-notch) * -1 - 2px); }
  .xc-ticket__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-block-end: 10px;
    border-block-end: 1.5px dashed var(--xc-line-2);
    font-family: var(--xc-num);
    font-size: .7rem;
    letter-spacing: .16em;
    color: var(--xc-ink-3);
    text-transform: uppercase;
  }
  .xc-ticket__title { font-size: 1.12rem; font-weight: 800; }
  .xc-ticket__body { font-size: .88rem; color: var(--xc-ink-2); }
  .xc-ticket__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-block-start: 12px;
    border-block-start: 1.5px dashed var(--xc-line-2);
    font-size: .8rem;
    color: var(--xc-ink-3);
  }

  /* ------------------------------------------------------------------ 餐盘 */
  .xc-plate {
    position: relative;
    inline-size: min(100%, 430px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid var(--xc-ink);
    background:
      radial-gradient(circle at 34% 30%, #ffffff 0 16%, #f7eedd 16% 34%, #e8d6b8 34% 36%, #fdf7ea 36% 62%, #ddc9a8 62% 64%, #f8efdd 64% 100%);
    box-shadow: var(--xc-lift), inset 0 0 0 10px rgba(255, 253, 246, .6);
    display: grid;
    place-items: center;
    isolation: isolate;
  }
  .xc-plate__food {
    inline-size: 56%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(circle at 36% 34%, #f6c453 0 12%, transparent 13%),
      radial-gradient(circle at 66% 30%, #3d7a55 0 10%, transparent 11%),
      radial-gradient(circle at 52% 62%, #d63a25 0 22%, transparent 23%),
      radial-gradient(circle at 30% 66%, #f0b23c 0 15%, transparent 16%),
      radial-gradient(circle at 72% 70%, #a92a18 0 12%, transparent 13%),
      radial-gradient(circle at 50% 44%, #f7d9a0 0 42%, #e6b877 58%, #c99455 76%, #a9762f 100%);
    border: 2px solid rgba(23, 17, 13, .5);
    box-shadow: inset 0 -10px 24px rgba(23, 17, 13, .28), 0 12px 22px -14px rgba(23, 17, 13, .7);
  }
  .xc-plate__ring {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1.5px dashed rgba(23, 17, 13, .38);
    animation: xc-spin 34s linear infinite;
  }
  .xc-plate__ring::before,
  .xc-plate__ring::after {
    content: "";
    position: absolute;
    inline-size: 12px;
    block-size: 12px;
    border-radius: 50%;
    background: var(--xc-tomato);
    border: 2px solid var(--xc-ink);
  }
  .xc-plate__ring::before { inset-block-start: -7px; inset-inline-start: 50%; }
  .xc-plate__ring::after  { inset-block-end: -7px; inset-inline-start: 50%; background: var(--xc-yolk); }
  .xc-plate__chop {
    position: absolute;
    inset-block-start: -9%;
    inset-inline-end: -6%;
    inline-size: 4px;
    block-size: 74%;
    border-radius: 3px;
    background: linear-gradient(180deg, #c99455, #7a4a1d);
    transform: rotate(24deg);
    box-shadow: 12px 0 0 -1px #a9762f;
  }
  @keyframes xc-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .xc-plate__ring { animation: none; }
  }

  /* ------------------------------------------------------------------ 数字 */
  .xc-stat {
    display: grid;
    gap: 2px;
    align-content: start;
  }
  .xc-stat__v {
    font-family: var(--xc-num);
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
  }
  .xc-stat__v small { font-size: .44em; font-weight: 600; margin-inline-start: 2px; }
  .xc-stat__k { font-size: .8rem; color: var(--xc-ink-3); }
  .xc-sec--ink .xc-stat__k,
  .xc-sec--tomato .xc-stat__k { color: rgba(253, 247, 234, .66); }

  /* ------------------------------------------------------------------ 通用卡 */
  .xc-card {
    position: relative;
    display: grid;
    gap: 12px;
    align-content: start;
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--xc-card);
    border: 2px solid var(--xc-ink);
    border-radius: var(--xc-radius);
    transition: transform var(--xc-fast) var(--xc-ease), box-shadow var(--xc-fast) var(--xc-ease);
  }
  .xc-card--hover:hover { transform: translate(-3px, -3px); box-shadow: var(--xc-lift); }
  .xc-card--plain { border-color: var(--xc-line); background: rgba(255, 253, 246, .7); }
  .xc-card__idx {
    font-family: var(--xc-num);
    font-size: .72rem;
    letter-spacing: .16em;
    color: var(--xc-tomato);
  }
  .xc-card__title { font-size: 1.1rem; }
  .xc-card__text { font-size: .88rem; color: var(--xc-ink-2); }
  .xc-card__list { display: grid; gap: 7px; font-size: .86rem; color: var(--xc-ink-2); }
  .xc-card__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .xc-card__list li::before { content: "·"; color: var(--xc-tomato); font-weight: 800; }

  .xc-sec--ink .xc-card {
    background: #221a15;
    border-color: rgba(253, 247, 234, .26);
    color: var(--xc-ink-inv);
  }
  .xc-sec--ink .xc-card__text,
  .xc-sec--ink .xc-card__list { color: rgba(253, 247, 234, .72); }

  /* ------------------------------------------------------------------ 流程 */
  .xc-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 2px solid var(--xc-ink);
    border-radius: var(--xc-radius);
    overflow: hidden;
    background: var(--xc-card);
  }
  .xc-steps__item {
    padding: 22px 20px 24px;
    border-inline-end: 1.5px dashed var(--xc-line-2);
    display: grid;
    gap: 8px;
    align-content: start;
    position: relative;
  }
  .xc-steps__item:last-child { border-inline-end: 0; }
  .xc-steps__no {
    font-family: var(--xc-num);
    font-size: .72rem;
    letter-spacing: .14em;
    color: var(--xc-tomato);
  }
  .xc-steps__t { font-size: 1rem; font-weight: 800; }
  .xc-steps__d { font-size: .83rem; color: var(--xc-ink-3); }

  /* ------------------------------------------------------------------ 排期表 */
  .xc-sched {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: .9rem;
  }
  .xc-sched th,
  .xc-sched td {
    padding: 14px 16px;
    text-align: start;
    border-block-end: 1.5px dashed var(--xc-line-2);
    vertical-align: top;
  }
  .xc-sched thead th {
    font-family: var(--xc-num);
    font-size: .7rem;
    letter-spacing: .14em;
    color: var(--xc-ink-3);
    text-transform: uppercase;
    border-block-end: 2px solid var(--xc-ink);
    padding-block: 10px;
  }
  .xc-sched tbody tr:hover { background: rgba(240, 178, 60, .13); }
  .xc-sched td:first-child { font-family: var(--xc-num); white-space: nowrap; color: var(--xc-tomato-d); }
  .xc-sched__scroll { overflow-x: auto; }

  /* ------------------------------------------------------------------ 折叠问答 */
  .xc-faq { display: grid; gap: 10px; }
  .xc-faq__item {
    border: 2px solid var(--xc-ink);
    border-radius: var(--xc-radius);
    background: var(--xc-card);
    overflow: hidden;
  }
  .xc-faq__item[open] { background: var(--xc-paper-2); }
  .xc-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    font-weight: 700;
    font-size: .98rem;
    cursor: pointer;
    list-style: none;
  }
  .xc-faq__q::-webkit-details-marker { display: none; }
  .xc-faq__q::after {
    content: "+";
    font-family: var(--xc-num);
    font-size: 1.2rem;
    color: var(--xc-tomato);
    flex: none;
    transition: transform var(--xc-fast) var(--xc-ease);
  }
  .xc-faq__item[open] .xc-faq__q::after { transform: rotate(45deg); }
  .xc-faq__a {
    padding: 0 20px 18px;
    font-size: .89rem;
    color: var(--xc-ink-2);
    max-inline-size: 76ch;
  }

  /* ------------------------------------------------------------------ 合规提示 */
  .xc-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 18px 20px;
    background: var(--xc-yolk-l);
    border: 2px solid var(--xc-ink);
    border-radius: var(--xc-radius);
    font-size: .85rem;
    color: var(--xc-ink-2);
  }
  .xc-note__mark {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: var(--xc-ink);
    color: var(--xc-yolk);
    display: grid;
    place-items: center;
    font-family: var(--xc-num);
    font-size: .8rem;
    font-weight: 700;
    flex: none;
  }
  .xc-note b { color: var(--xc-ink); }

  /* ------------------------------------------------------------------ 表单 */
  .xc-form { display: grid; gap: 16px; }
  .xc-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .xc-field { display: grid; gap: 6px; }
  .xc-field > span {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--xc-ink-2);
  }
  .xc-field input,
  .xc-field select,
  .xc-field textarea {
    inline-size: 100%;
    padding: 12px 14px;
    background: var(--xc-card);
    border: 2px solid var(--xc-line-2);
    border-radius: 10px;
    font-size: .92rem;
    transition: border-color var(--xc-fast) var(--xc-ease), background var(--xc-fast) var(--xc-ease);
  }
  .xc-field input:focus,
  .xc-field select:focus,
  .xc-field textarea:focus {
    border-color: var(--xc-tomato);
    background: #fff;
    outline: none;
  }
  .xc-field textarea { min-block-size: 118px; resize: vertical; }
  .xc-form__hint { font-size: .76rem; color: var(--xc-ink-3); }
  .xc-form__msg {
    display: none;
    padding: 12px 16px;
    border: 2px solid var(--xc-scallion);
    border-radius: 10px;
    background: var(--xc-scallion-l);
    font-size: .86rem;
    color: #285840;
  }
  .xc-form__msg.is-on { display: block; }

  /* ------------------------------------------------------------------ 头像 */
  .xc-avatar {
    inline-size: 64px;
    block-size: 64px;
    border-radius: 50%;
    border: 2px solid var(--xc-ink);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--xc-ink);
    background: var(--xc-yolk);
    flex: none;
  }
  .xc-avatar--tomato { background: var(--xc-tomato); color: #fff8ee; }
  .xc-avatar--scallion { background: var(--xc-scallion); color: #f2fbf4; }
  .xc-avatar--paper { background: var(--xc-paper-3); }

  /* ------------------------------------------------------------------ 数据条 */
  .xc-meter { display: grid; gap: 6px; }
  .xc-meter__top {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--xc-ink-2);
  }
  .xc-meter__bar {
    block-size: 10px;
    background: var(--xc-paper-3);
    border: 1.5px solid var(--xc-ink);
    border-radius: var(--xc-radius-pill);
    overflow: hidden;
  }
  .xc-meter__fill {
    display: block;
    block-size: 100%;
    background: repeating-linear-gradient(-45deg, var(--xc-tomato) 0 7px, #e8604a 7px 14px);
    inline-size: var(--v, 60%);
  }

  /* ------------------------------------------------------------------ 面包屑 */
  .xc-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--xc-ink-3);
  }
  .xc-crumb a:hover { color: var(--xc-tomato); }
  .xc-crumb li + li::before { content: "/"; margin-inline-end: 6px; color: var(--xc-line-2); }
  .xc-crumb li { display: inline-flex; align-items: center; }

  /* ------------------------------------------------------------------ 横向滚动 */
  .xc-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: var(--xc-gap);
    overflow-x: auto;
    padding-block-end: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .xc-rail > * { scroll-snap-align: start; }
}