@font-face {
    font-family: 'Morganite-Black-2';
    src: url('../../fonts/Morganite-Black-2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  /* 仅作用于 #agePicker，展示三行，居中高亮 */
  #agePicker{ position: relative; width: 100%; height: 360px; margin: 0 auto; }
  #agePicker .picker-column{ position: relative; width:100%; height:99%; overflow:hidden; margin-top: 1px;}
  #agePicker ul{ list-style:none; margin:0; padding:0; }
  #agePicker .column-item{ display:flex; align-items:center; justify-content:center; padding:0 4px; color:#fff; height:120px; line-height:120px; font-size:8rem; font-family:'Morganite-Black-2', Arial, sans-serif; }
  /* 上下遮罩与中间细线 */
  #agePicker .mask{ position:absolute; top:0; left:0; z-index:2; width:100%; height:100%;
    background-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0)), linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,0));
    background-repeat:no-repeat; background-position: top left, bottom left;
    background-size: 100% calc((100% - 120px)/2), 100% calc((100% - 120px)/2);
    pointer-events:none; }
  #agePicker .cover-border{ position:absolute; z-index:3; top:50%; left:16px; right:16px; transform:translateY(-50%); pointer-events:none; }
  #agePicker .cover-border::after{ content:""; position:absolute; box-sizing:border-box; top:-50%; right:-50%; bottom:-50%; left:-50%; border:0 solid transparent; transform:scale(.5); border-width:1px 0; }
  /* 选中项加大字体 */
  #agePicker .column-item.selected{ font-size:8rem; }


   /* Tens & Units pickers inline styles */
   #ageTens,#ageUnits{ position: relative; width: 100%; height: 360px; }
   #ageTens .picker-column,#ageUnits .picker-column{ position: relative; width:100%; height:99%; overflow:hidden; margin-top:1px; }
   #ageTens ul,#ageUnits ul{ list-style:none; margin:0; padding:0; }
   #ageTens .column-item,#ageUnits .column-item{ display:flex; align-items:center; justify-content:center; padding:0 4px; color:#fff; height:120px; line-height:120px; font-size:8rem; font-family:'Morganite-Black-2', Arial, sans-serif; }
   #ageTens .mask,#ageUnits .mask{ position:absolute; top:0; left:0; z-index:2; width:100%; height:100%;
       background-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0)), linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,0));
       background-repeat:no-repeat; background-position: top left, bottom left; background-size: 100% calc((100% - 120px)/2), 100% calc((100% - 120px)/2); pointer-events:none; }
   #ageTens .cover-border,#ageUnits .cover-border{ position:absolute; z-index:3; top:50%; left:8px; right:8px; transform:translateY(-50%); pointer-events:none; }
   #ageTens .cover-border::after,#ageUnits .cover-border::after{ content:""; position:absolute; box-sizing:border-box; top:-50%; right:-50%; bottom:-50%; left:-50%; border:0 solid transparent; transform:scale(.5); border-width:1px 0; }
   /* 允许交互，避免父容器的 pointer-events:none 拦截 */
   #tensSelector,#unitsSelector{ pointer-events:auto; }
   #ageTens,#ageUnits{ pointer-events:auto; }
   /* 关闭旧的命中层，避免遮挡 */
   #tensHit,#unitsHit{ display:none !important; }
   /* 选中项加大字体 */
   #ageTens .column-item.selected, #ageUnits .column-item.selected{ font-size:8rem; }