/* Local mobile layout v2: retain original artwork, links and desktop layout. */
@media (max-width: 1199px) {
  /* Empty desktop header scaffolding should not become a second mobile header. */
  #hd .hdc { min-height: 0; height: auto; padding: 0; }
  .pg_index #pt { margin: 4px 0 10px; }

  #diy1 { --ty-panel: #17111f; --ty-border: #3e2e50; }
  #diy1 #framePk3QeP {
    background-image: none !important;
    width: 100%;
    margin: 0 !important;
  }
  /* Display the entire original 1903x2146 artwork once, including the original
     logo, characters and promotional illustration, instead of using spacer
     images to align separate controls over desktop background coordinates. */
  #diy1 #framePk3QeP::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1903 / 2146;
    background: url("../../../pic/5000_6.png") center top / 100% 100% no-repeat;
    border-radius: 16px;
    margin-bottom: 14px;
  }
  /* These nine blocks contain only the verified fully transparent 00.png,
     with no anchors or text. Keep the original DOM and files for desktop. */
  #diy1 #portal_block_32, #diy1 #portal_block_33, #diy1 #portal_block_34,
  #diy1 #portal_block_60, #diy1 #portal_block_37, #diy1 #portal_block_42,
  #diy1 #portal_block_46, #diy1 #portal_block_45, #diy1 #portal_block_59 { display: none; }

  #diy1 .frame, #diy1 .column, #diy1 .block {
    float: none;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    box-sizing: border-box;
  }
  #diy1 img { display: block; max-width: 100%; height: auto; }
  #diy1 .portal_block_summary { line-height: 0; }
  #diy1 .portal_block_summary a { display: block; }
  /* Empty DIY drag targets and clearfix pseudo-elements are not grid cells. */
  #diy1 .temp { display: none; }
  #diy1 .frame::after, #diy1 .column::after,
  #diy1 .frame:not(#framePk3QeP)::before { content: none; display: none; }

  /* Existing sponsorship / support image links form two clear touch targets. */
  #diy1 #framez6bNiC { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px !important; }
  #diy1 #framez6bNiC > .column,
  #diy1 #frameM19iA5, #diy1 #frameM19iA5 > .column,
  #diy1 #frametEeK1k, #diy1 #frametEeK1k > .column,
  #diy1 #framevP94Wx, #diy1 #framevP94Wx > .column,
  #diy1 #frameH6E8K6, #diy1 #frameH6E8K6 > .column { display: contents; }
  #portal_block_35 a, #portal_block_36 a {
    display: flex !important;
    align-items: center;
    min-height: 58px;
    padding: 8px 6px;
    background: linear-gradient(145deg, #2b1d3c, #17111f);
    border: 1px solid #604573;
    border-radius: 12px;
    box-sizing: border-box;
  }
  #portal_block_35 img, #portal_block_36 img { width: 100%; }

  /* Original four navigation images stay at a readable size, in two columns. */
  #diy1 #frameOZ4MVX {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--ty-border);
    border-radius: 14px;
    background: var(--ty-panel);
    margin-bottom: 14px !important;
  }
  #diy1 #frameOZ4MVX > .column { display: contents; }
  #frameOZ4MVX a { display: flex !important; align-items: center; justify-content: center; min-height: 58px; border-radius: 8px; background: #21182b; }
  #frameOZ4MVX img { width: 148px; max-width: 100%; }
  #diy1 .hvr-float:hover, #diy1 .hvr-float:active, #diy1 .hvr-float:focus { transform: translateY(-2px); }

  /* Announcements and original slideshow remain live, with their own space. */
  #diy1 #frametBK5j5 {
    border: 1px solid var(--ty-border);
    border-radius: 14px;
    padding: 12px;
    background: var(--ty-panel);
    margin-bottom: 12px !important;
  }
  #portal_block_44 li { height: auto; min-height: 32px; line-height: 1.7; padding: 6px 0; white-space: normal; border-bottom: 1px solid #30223e; }
  #portal_block_44 li:last-child { border-bottom: 0; }
  #portal_block_44 li em { float: right; font-size: 11px; color: #b8a7c8; }
  #portal_block_44 li > a { display: block; clear: both; font-size: 14px; overflow-wrap: anywhere; }
  #diy1 #frameZ65x4a { margin: 0 auto 18px !important; }
  #diy1 #portal_block_43 { max-width: 295px !important; margin: 0 auto !important; border-radius: 10px; }
  #portal_block_43 .slidebox, #portal_block_43 .slideshow { max-width: 100%; }
  #portal_block_43 .slideshow li, #portal_block_43 .slideshow img { max-width: 100%; }

  /* Pair original left/right game links row by row, preserving hrefs and hover. */
  #diy1 #framejXqtqf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ty-border);
    border-radius: 14px;
    background: var(--ty-panel);
    margin-bottom: 16px !important;
  }
  #diy1 #framejXqtqf > .column,
  #diy1 #framev3OHEh, #diy1 #framev3OHEh > .column,
  #diy1 #frameet65kQ, #diy1 #frameet65kQ > .column { display: contents; }
  #portal_block_47 { grid-area: 1 / 1; } #portal_block_48 { grid-area: 1 / 2; }
  #portal_block_49 { grid-area: 2 / 1; } #portal_block_50 { grid-area: 2 / 2; }
  #portal_block_51 { grid-area: 3 / 1; } #portal_block_52 { grid-area: 3 / 2; }
  #portal_block_53 { grid-area: 4 / 1; } #portal_block_54 { grid-area: 4 / 2; }
  #framejXqtqf a { border-radius: 10px; background: #251a31; min-height: 44px; }
  #framejXqtqf img { width: 100%; }

  #diy1 #framef22z51 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px !important; }
  #diy1 #framef22z51 > .column,
  #diy1 #frameMjUfNU, #diy1 #frameMjUfNU > .column,
  #diy1 #frameHvImzC, #diy1 #frameHvImzC > .column { display: contents; }
  #framef22z51 a { display: flex !important; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--ty-border); border-radius: 10px; background: var(--ty-panel); }
  #framef22z51 img { max-width: 100%; width: 157px; }
  .pg_index #chart { padding: 12px 8px; border: 1px solid #30223e; border-radius: 12px; }
  .pg_index #online { margin-top: 12px; }
  .pg_index #chart .chart {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    height: auto;
    padding: 0;
    background: none;
  }
  .pg_index #chart .chart::before { display: none; }
  .pg_index #chart .chart > span {
    float: none;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 34px 2px 8px;
    margin: 0;
    text-align: center;
    line-height: 1.5;
    background-position: center 6px;
    background-color: #17111f;
    color: #d4c6df;
    border-radius: 8px;
    box-sizing: border-box;
  }
  .pg_index #chart > .y { margin-top: 10px; }
  .pg_index #online { padding: 12px; border: 1px solid #30223e; border-radius: 12px; }
  .pg_index #online .bm_h { height: auto; padding: 0 18px 8px 0; line-height: 1.6; }
  .pg_index #online .bm_h h3 { white-space: normal; font-size: 12px; font-weight: normal; line-height: 1.7; }
  .pg_index #onlinelist { padding: 0; font-size: 12px; line-height: 2; }
  .pg_index #onlinelist dt { white-space: normal; }
  #diy1 #frameOZ4MVX, #diy1 #frametBK5j5, #diy1 #framejXqtqf {
    padding: 12px !important;
    border: 1px solid var(--ty-border) !important;
    background: var(--ty-panel) !important;
  }
}

@media (max-width: 767px) {
  .deanheader > .w1180 { padding-bottom: 0; }
  .deanlogin .deandenglu > ul { display: flex; align-items: center; gap: 6px; }
  .deanlogin .deandenglu > ul > li { float: none; margin: 0; }
  .deanlogin .deandenglu > ul > li > a { min-width: 64px; min-height: 40px; line-height: 40px; box-sizing: border-box; }
  .deanlogin .deandenglu > ul > li > a { width: 64px !important; margin: 0 !important; padding: 0 4px; }
  .deanlogin .deandenglu > ul > li > a { color: #f0e7f5; }
  .deanftbottom p:not([style]), .deanftbottom a { color: #b9aebf; line-height: 1.7; }
  .pg_post #subject { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  .pg_post #postbox .pbt > .z { max-width: 100%; }
  .deannav:not(:has(a)), .deansearch:not(:has(input, button, a)) { display: none; }
  .deanlogo { flex-basis: 140px; width: 140px; }
  .deanlogo img { max-height: 44px !important; }
}

@media (min-width: 600px) and (max-width: 1199px) {
  #diy1 #framePk3QeP::before { max-width: 520px; margin-left: auto; margin-right: auto; }
  #diy1 #framePk3QeP_left { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
}