/* Mobile archive reading layout, 2026-10-02. */
.hy-mobile-names { display:none; }
.hy-card > .hy-legend.compact { display:none; }
@media (max-width:650px) {
 .hy-overview-grid > [data-trap="meowls"] { display:none; }
 .hy-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .hy-card { --hy-inset:12px; }
 .hy-rows { padding:8px 0 16px; gap:12px; }
 .hy-row,.hy-row:first-child { padding:16px 12px; border-radius:12px; gap:14px; }
 .hy-trap { position:relative; padding-right:40px; min-height:40px; }
 .hy-trap:has(.hy-trap-icons) > .cm-sec,
 .hy-trap:not(:has(.hy-trap-icons)) > .cm-sec {
  position:absolute; right:0; top:0; margin:0; width:36px; height:36px; grid-column:auto; grid-row:auto;
 }
 .hy-trap-heading b { font-size:16px; }
 .hy-sevgroups { display:flex; flex-direction:column; gap:18px; }
 .hy-sevgroup,.hy-sevgroup + .hy-sevgroup { width:100%; padding:0; gap:10px; align-items:flex-start; }
 .hy-sevgroup > .hy-sevlabel { width:auto; align-self:flex-start; padding:4px 10px; border-radius:6px; font-size:11px; }
 .hy-ctiles { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; width:100%; }
 .hy-ctiles > .hy-ctile {
  display:grid; grid-template-columns:90px minmax(0,1fr); align-content:start; align-items:start;
  gap:8px 12px; width:auto!important; max-width:100%; min-width:0;
  padding:12px; border:1px solid #303b4d; border-radius:10px; background:#121925;
 }
 .hy-ctile > .hy-card-set {
  grid-column:1; grid-row:1 / span 8; display:flex; flex-direction:column;
  justify-content:flex-start; align-items:flex-start; gap:8px; width:90px; min-width:0;
 }
 .hy-ctiles .hy-card-set > .hy-tile,
 .hy-ctiles .hy-card-set > .hy-tile:only-child { width:90px!important; max-width:90px; margin:0; }
 .hy-card-set .hy-tile strong { min-height:0!important; font-size:11px; line-height:1.4; padding:4px 2px; }
 .hy-ctile > :not(.hy-card-set) { grid-column:2; min-width:0; margin:0; overflow-wrap:anywhere; }
 .hy-ctile .hy-timing { font-size:13px; line-height:1.6; color:#edf2ff; }
 .hy-ctile p { font-size:13px; line-height:1.65; color:#c6d1e3; }
 .hy-ctile .hy-sources { font-size:11px; }
 .hy-card-set > .cm-tile { width:90px; min-height:34px; justify-content:center; margin:0; }
 .hy-ctiles > .hy-ctile.hy-multiple { grid-template-columns:minmax(0,1fr); }
 .hy-ctile.hy-multiple > .hy-card-set {
  grid-column:1; grid-row:auto; width:100%; flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:8px;
 }
 .hy-ctile.hy-multiple > :not(.hy-card-set) { grid-column:1; }
 .hy-ctile.hy-multiple .cm-tile { margin-left:auto; width:auto; padding:7px; }
 .hy-ctile:not(:has(> .hy-card-set)) { grid-template-columns:minmax(0,1fr); }
 .hy-ctile:not(:has(> .hy-card-set)) > * { grid-column:1; }
}
/* Compact thumbnails leave room for readable names and copy. */
@media (max-width:650px) {
 .hy-ctiles > .hy-ctile { position:relative; grid-template-columns:64px minmax(0,1fr); gap:5px 10px; padding:10px 10px 38px; }
 .hy-ctile > .hy-card-set { width:64px; }
 .hy-ctiles .hy-card-set > .hy-tile,
 .hy-ctiles .hy-card-set > .hy-tile:only-child { width:64px!important; max-width:64px; padding:3px; }
 .hy-card-set .hy-tile strong { display:none; }
 .hy-ctile > .hy-mobile-names { display:block; font-size:13px; font-weight:700; line-height:1.45; color:#edf2ff; }
 .hy-card-set > .cm-tile,
 .hy-ctile.hy-multiple .cm-tile { position:absolute; right:8px; bottom:5px; width:auto; min-height:28px; padding:4px 6px; margin:0; border:0; background:transparent; font-size:11px; }
 .hy-ctiles > .hy-ctile.hy-multiple { grid-template-columns:minmax(0,1fr); }
 .hy-ctile.hy-multiple > .hy-card-set { width:100%; }
 .hy-ctile .hy-timing,.hy-ctile p { line-height:1.5; }
}
@media (min-width:520px) and (max-width:650px) {
 .hy-ctiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hy-ctiles > .hy-ctile { grid-template-columns:80px minmax(0,1fr); gap:8px 10px; padding:10px; }
 .hy-ctile > .hy-card-set { width:80px; }
 .hy-ctiles .hy-card-set > .hy-tile,
 .hy-ctiles .hy-card-set > .hy-tile:only-child { width:80px!important; max-width:80px; }
 .hy-card-set > .cm-tile { width:80px; }
 .hy-ctiles > .hy-ctile.hy-multiple { grid-column:1 / -1; }
}
@media (max-width:650px) {
 .hy-trap:has(.hy-trap-icons),.hy-trap:has(.hy-trap-icons img:only-child) {
  display:grid; grid-template-columns:54px minmax(0,1fr) 32px; gap:4px 8px; padding:0;
 }
 .hy-trap:has(.hy-trap-icons) > .hy-trap-heading { display:contents; }
 .hy-trap:has(.hy-trap-icons) > .hy-trap-heading > .hy-trap-icons { grid-column:1; grid-row:1 / span 2; }
 .hy-trap:has(.hy-trap-icons) > .hy-trap-heading > b { grid-column:2; grid-row:1; }
 .hy-trap:has(.hy-trap-icons) > small { grid-column:2; grid-row:2; }
 .hy-trap:has(.hy-trap-icons) > .cm-sec {
  position:static; grid-column:3; grid-row:1; align-self:start; margin:0; width:32px; height:32px; min-width:32px; min-height:32px;
 }
 .hy-ctiles > .hy-ctile:not(.hy-multiple) { grid-template-columns:64px minmax(0,1fr); }
 .hy-ctile:not(.hy-multiple) > .hy-card-set { width:64px; }
 .hy-ctiles .hy-card-set > .hy-tile,
 .hy-ctiles .hy-card-set > .hy-tile:only-child { width:64px!important; max-width:64px; }
 .hy-card-set > .cm-tile { width:auto; }
}
/* Card title, timing and supporting copy have separate visual levels. */
@media (max-width:650px) {
 .hy-ctile > .hy-mobile-names { font-size:14px; font-weight:800; line-height:1.4; margin-bottom:5px; color:#c6d1e3; }
 .hy-ctile:has(.hy-tile.sev-r) > .hy-mobile-names { color:#ff9299; }
 .hy-ctile:has(.hy-tile.sev-y) > .hy-mobile-names { color:#ffda65; }
 .hy-ctile:has(.hy-tile.sev-g) > .hy-mobile-names { color:#70e3ae; }
 .hy-ctile > .hy-timing { font-size:12px; font-weight:600; line-height:1.55; color:#e2e8f2; }
 .hy-ctile > .hy-timing::before { content:'타이밍'; display:block; font-size:10px; font-weight:400; color:#91a0b7; margin-bottom:2px; }
 .hy-ctile > p { font-size:12px; font-weight:400; line-height:1.6; color:#aebbd0; }
}
.cm-invite-btn > svg { display:none; }
@media (max-width:650px) {
 .cm-invite { display:flex; justify-content:flex-end; padding:0; margin:8px 12px 0; border:0; background:none; box-shadow:none; }
 .cm-invite > div,.cm-invite-btn > .cm-invite-label { display:none; }
 .cm-invite .cm-invite-btn { display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; min-height:36px; padding:0; border:1px solid #435774; border-radius:8px; background:#1c2839; color:#bac9e1; }
 .cm-invite-btn > svg { display:block; width:16px; height:16px; }
}
.hy-theme-trigger { display:none; }
.hy-theme-drawer { box-sizing:border-box; position:fixed; inset:0 0 0 auto; margin:0; width:min(360px,92vw); height:100dvh; max-height:none; max-width:none; padding:20px 16px; border:0; border-left:1px solid #34445b; background:#101722; color:#edf2ff; }
.hy-theme-drawer::backdrop { background:rgb(0 0 0 / .65); }
.hy-theme-drawer > header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.hy-theme-drawer h2 { font-size:20px; margin:0; }
.hy-theme-drawer header button { width:40px; height:40px; color:#cbd7ea; background:#1c2839; border:1px solid #435774; border-radius:8px; }
.hy-theme-drawer .hy-side { display:flex; flex-direction:column; position:static; width:100%; height:calc(100% - 58px); max-height:none; padding:0; }
.hy-theme-drawer .hy-list { flex:1; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; }
@media(max-width:650px) {
 .hy-layout > .hy-side { display:none; }
 .hy-theme-trigger { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; margin-bottom:14px; background:#151e2b; border:1px solid #34445b; border-radius:10px; color:#edf2ff; text-align:left; }
 .hy-theme-trigger span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; }
 .hy-theme-trigger b { flex-shrink:0; font-size:12px; color:#aebfda; }
}
/* Mobile deck header: one title, large art and grouped actions. */
.hy-screen-modes { display:flex; align-items:center; justify-content:center; gap:6px; padding:22px 12px 32px; font-size:12px; color:#9cacc5; }
.hy-screen-modes button { border:1px solid #39475e; border-radius:7px; background:#141d2a; color:#b8c6db; padding:9px 13px; min-height:36px; }
.hy-screen-modes button[aria-pressed=true] { background:#304466; border-color:#849fc8; color:#fff; }
html[data-screen-mode=mobile] body { max-width:480px; margin-inline:auto; }
html[data-screen-mode=pc] body { min-width:1200px; }
html[data-screen-mode=pc] .hy-screen-modes { position:sticky; left:0; width:min(100vw,1200px); box-sizing:border-box; }
@media(max-width:650px) {
 .hy-heading { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin-bottom:14px; padding-bottom:14px; }
 .hy-heading > div { grid-column:1 / -1; }
 .hy-heading h1 { font-size:24px; margin-bottom:5px; }
 .hy-heading .hy-sub { font-size:12px; line-height:1.55; }
 .hy-heading > button[data-site-help] { grid-column:2; grid-row:2; padding:8px 10px; min-height:40px; font-size:12px; }
 .hy-heading > .hy-theme-trigger { display:flex; grid-column:1; grid-row:2; width:max-content; min-height:40px; margin:0; padding:9px 14px; font-size:13px; font-weight:700; }
 .hy-card > .hy-hero { height:250px; border-radius:12px 12px 0 0; }
 .hy-hero > img { object-position:center 28%; }
 .hy-hero .hy-hero-shade { background:linear-gradient(0deg,rgba(9,15,24,.97),rgba(9,15,24,.50) 48%,rgba(9,15,24,.08)); }
 .hy-hero .hy-hero-text { left:16px; right:16px; bottom:58px; }
 .hy-hero .hy-hero-text h2 { font-size:32px; }
 .hy-hero .hy-hero-text > small { display:none; }
 .hy-hero .cm-invite { position:absolute; left:16px; bottom:12px; right:16px; margin:0; padding:0; display:flex; justify-content:flex-end; z-index:2; width:auto; }
 .hy-hero .cm-invite .cm-invite-btn { width:36px; height:36px; background:#172235cc; backdrop-filter:blur(8px); }
 .hy-hero .hy-meta-feedback { margin-top:7px; }
 .hy-theme-drawer .search-wrap { width:100%; box-sizing:border-box; }
 .hy-theme-drawer .search-wrap input { min-width:0; width:100%; box-sizing:border-box; }
}
@media(max-width:650px) {
 .hy-hero .hy-hero-text { bottom:18px; }
 .hy-hero .hy-hero-meta { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:10px 8px; }
 .hy-hero .hy-hero-meta > p { flex-basis:100%; }
 .hy-hero .hy-hero-meta > .cm-meta-feedback { min-height:36px; margin:0; padding:7px 10px; }
 .hy-hero .hy-hero-meta > .cm-invite { position:static; display:inline-flex; flex-direction:row; flex:0 0 auto; width:auto; margin:0; padding:0; }
}
/* Record editor fields align independently of their optional help text. */
#recordDialog .dialog-body > .row:first-child > label { display:grid; grid-template-rows:20px 40px auto; align-content:start; row-gap:7px; min-width:0; }
#recordDialog .dialog-body > .row:first-child > label > select { grid-row:2; margin:0; height:40px; width:100%; min-width:0; }
#recordDialog .dialog-body > .row:first-child > label > small { grid-row:3; margin:0; font-size:11px; line-height:1.4; }
#recordDialog .dialog-head > div { flex:1; min-width:0; }
#recordDialog .dialog-head > button { flex-shrink:0; white-space:nowrap; }
@media(max-width:650px) {
 #viewClimb > .heading { display:flex; flex-direction:column; align-items:stretch; gap:14px; }
 #viewClimb > .heading h1 { font-size:25px; word-break:keep-all; }
 #viewClimb .help-heading-actions { display:flex; flex-direction:row; justify-content:flex-end; gap:8px; }
 #viewClimb .help-heading-actions > button { white-space:nowrap; min-height:40px; padding:9px 14px; }
 #recordDialog .dialog-head { display:grid; grid-template-columns:minmax(0,1fr) 36px; gap:10px; padding:16px; }
 #recordDialog .dialog-head > div { grid-column:1; grid-row:1; }
 #recordDialog .dialog-head h2 { font-size:19px; line-height:1.4; word-break:keep-all; }
 #recordDialog .dialog-head > [data-close] { grid-column:2; grid-row:1; }
 #recordDialog .dialog-head > [data-site-help] { grid-column:1; grid-row:2; justify-self:start; font-size:12px; padding:7px 10px; }
 #recordDialog .dialog-body { padding:16px; }
}
/* The sheet toolbar spans the panel, not the narrower card content. */
.hy-card-preview.is-sheet > .hy-sheet-bar { width:calc(100% + 36px); max-width:none; flex:0 0 52px; height:52px; min-height:52px; align-self:center; margin:0 -18px; box-sizing:border-box; }
.hy-card-preview.is-sheet .hy-preview-close { right:12px; top:6px; width:40px; height:40px; padding:0; }
/* Keep feedback under the thumbnail without reserving an empty bottom row. */
@media(max-width:650px) {
 .hy-ctiles > .hy-ctile { padding-bottom:10px; }
 .hy-ctile > .hy-card-set { gap:5px; }
 .hy-card-set > .cm-tile,
 .hy-ctile.hy-multiple .cm-tile { position:static; width:64px; min-height:30px; margin:0; padding:4px 2px; align-self:flex-start; justify-content:center; }
 .hy-ctile.hy-multiple > .hy-card-set { display:grid; grid-template-columns:repeat(auto-fit,64px); }
 .hy-ctile.hy-multiple .cm-tile { grid-column:1 / -1; justify-self:start; }
}
/* Mobile entry: artwork and copy, followed by a separate source/action footer. */
@media(max-width:650px) {
 .hy-ctiles > .hy-ctile:not(.hy-multiple) { grid-template-columns:80px minmax(0,1fr); gap:6px 12px; padding:12px 12px 0; }
 .hy-ctile:not(.hy-multiple) > .hy-card-set { width:80px; grid-row:1 / span 8; }
 .hy-ctiles .hy-card-set > .hy-tile,
 .hy-ctiles .hy-card-set > .hy-tile:only-child { width:80px!important; max-width:80px; }
 .hy-ctiles > .hy-ctile:not(:has(> .hy-card-set)) { grid-template-columns:minmax(0,1fr); }
 .hy-ctile:not(:has(> .hy-card-set)) > * { grid-column:1; width:auto; max-width:100%; }
 .hy-ctile > .hy-chip { justify-self:start; white-space:normal; overflow-wrap:normal; word-break:keep-all; }
 .hy-ctile > .cm-tile-actions:empty { display:none; }
 .hy-ctile > .hy-mobile-footer { grid-column:1 / -1!important; grid-row:9; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin:6px -12px 0; padding:8px 12px; min-width:0; border-top:1px solid #303b4d; background:#192231; border-radius:0 0 9px 9px; }
 .hy-mobile-footer > .hy-sources { flex:1; min-width:0; margin:0; padding:5px 0; font-size:11px; }
 .hy-mobile-footer > .cm-tile { position:static; flex:0 0 auto; width:auto; min-height:30px; margin:0 0 0 auto; padding:4px 6px; border:0; background:transparent; font-size:11px; }
 .hy-ctiles > .hy-ctile.hy-multiple { padding:12px 12px 0; }
 .hy-ctile.hy-multiple > .hy-card-set { grid-template-columns:repeat(auto-fit,80px); }
}
@media(max-width:650px) {
 .hy-trap:has(.hy-trap-icons),.hy-trap:has(.hy-trap-icons img:only-child) { grid-template-columns:auto minmax(0,1fr) 32px; column-gap:10px; }
 .hy-trap .hy-trap-heading > .hy-trap-icons { position:static; top:auto; height:auto; margin:0; transform:none; display:flex; gap:4px; align-items:center; align-self:start; }
 .hy-trap .hy-trap-heading > .hy-trap-icons img { width:30px; height:30px; flex:0 0 30px; margin:0; }
 .hy-trap .hy-trap-heading > .hy-trap-icons img + img { margin-left:0; }
 .hy-trap:has(.hy-trap-icons) > small { grid-column:2; padding-left:0; }
}
@media(max-width:650px) {
 .hy-ctiles { align-items:start; }
 .hy-ctile:not(.hy-multiple) > .hy-card-set { grid-row:1; }
 .hy-ctile > .hy-mobile-copy { grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
 .hy-mobile-copy > * { margin:0; }
 .hy-mobile-copy > .hy-mobile-names { display:block; font-size:14px; font-weight:800; line-height:1.4; margin-bottom:5px; color:#c6d1e3; }
 .hy-ctile:has(.sev-r) .hy-mobile-names { color:#ff9299; }
 .hy-ctile:has(.sev-y) .hy-mobile-names { color:#ffda65; }
 .hy-ctile:has(.sev-g) .hy-mobile-names { color:#70e3ae; }
 .hy-mobile-copy > .hy-timing { font-size:12px; font-weight:600; line-height:1.55; color:#e2e8f2; }
 .hy-mobile-copy > .hy-timing::before { content:'타이밍'; display:block; font-size:10px; font-weight:400; color:#91a0b7; margin-bottom:2px; }
 .hy-mobile-copy > p { font-size:12px; font-weight:400; line-height:1.6; color:#aebbd0; }
 .hy-mobile-copy > .hy-chip { align-self:flex-start; white-space:normal; word-break:keep-all; }
 .hy-ctile > .hy-mobile-footer { grid-row:2; margin-top:6px; }
 .hy-ctile:not(:has(> .hy-card-set)) > .hy-mobile-copy { grid-column:1; }
 .hy-ctile.hy-multiple > .hy-card-set { grid-row:1; }
 .hy-ctile.hy-multiple > .hy-mobile-copy { grid-column:1; grid-row:2; }
 .hy-ctile.hy-multiple > .hy-mobile-footer { grid-row:3; }
}
@media(max-width:650px) {
 .hy-trap:has(.hy-trap-icons),.hy-trap:has(.hy-trap-icons img:only-child) { column-gap:10px; row-gap:2px; align-items:start; }
 .hy-trap .hy-trap-heading > .hy-trap-icons { gap:0; }
 .hy-trap .hy-trap-heading > .hy-trap-icons img { width:38px; height:38px; flex-basis:38px; }
 .hy-trap .hy-trap-heading > .hy-trap-icons img + img { margin-left:-16px; }
 .hy-trap:has(.hy-trap-icons) > .hy-trap-heading > b { font-size:18px; line-height:1.25; align-self:start; margin:0; }
 .hy-trap:has(.hy-trap-icons) > .cm-sec { grid-row:1 / span 2; }
 .hy-trap:has(.hy-trap-icons) > small { margin:0; padding:0; line-height:1.45; font-size:12px; }
}
@media(max-width:650px) {
 .hy-ctiles > .hy-ctile:not(.hy-multiple),
 .hy-ctiles > .hy-ctile.hy-multiple { padding-right:8px; }
 .hy-ctile > .hy-mobile-footer { margin-right:-8px; padding-right:8px; }
}
.hy-theme-drawer header button { border:0; background:transparent; font-size:30px; line-height:1; width:44px; height:44px; padding:0; }
.hy-hero-credit { margin-bottom:8px; }
.hy-hero-credit .hy-cmb { margin:0; }
.hy-ygo-guide { display:inline-flex; align-items:center; min-height:34px; padding:6px 10px; border:1px solid #7187aa; border-radius:6px; background:#172235d9; color:#e0eaff; font-size:12px; text-decoration:none; box-sizing:border-box; }
.hy-ygo-guide:hover { background:#304566; }
@media(max-width:650px) {
 .hy-theme-drawer { width:100%; max-width:100%; border-left:0; border-radius:0; }
 .hy-hero .hy-hero-meta { column-gap:6px; }
 .hy-ygo-guide { font-size:11px; padding-inline:8px; }
 .hy-hero .hy-hero-meta > .cm-meta-feedback { font-size:11px; padding-inline:8px; }
}
.hy-hero > .hy-hero-credit { position:absolute; left:16px; top:14px; z-index:3; margin:0; }
.hy-hero .hy-hero-meta > .cm-meta-feedback,
.hy-hero .hy-hero-meta > .hy-ygo-guide { background:#172235d9; color:#e0eaff; border:1px solid #7187aa; border-radius:6px; min-height:36px; padding:7px 10px; font-size:12px; box-sizing:border-box; }
.hy-hero .hy-hero-meta > .cm-meta-feedback:hover,
.hy-hero .hy-hero-meta > .hy-ygo-guide:hover { background:#304566; }
@media(max-width:540px) {
 .hy-hero > .hy-hero-credit { left:10px; top:10px; }
 .hy-hero .hy-hero-meta > .cm-meta-feedback,
 .hy-hero .hy-hero-meta > .hy-ygo-guide { font-size:11px; padding-inline:8px; }
}
/* Short landscape screens prioritize the editable content. */
@media (orientation:landscape) and (max-height:500px) {
 #recordDialog { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; overflow:hidden; }
 #recordDialog > form { display:flex; flex-direction:column; height:100%; min-height:0; }
 #recordDialog .dialog-head { display:flex; flex:0 0 auto; align-items:center; padding:6px 16px; gap:10px; min-height:44px; box-sizing:border-box; }
 #recordDialog .dialog-head h2 { font-size:17px; line-height:1.2; margin:0; }
 #recordDialog .dialog-head > [data-site-help] { padding:5px 9px; min-height:30px; font-size:11px; }
 #recordDialog .dialog-head > [data-close] { width:34px; height:32px; padding:0; }
 #recordDialog .dialog-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:10px 16px; }
 #recordDialog .dialog-footer { position:static; flex:0 0 auto; padding:6px 16px; gap:8px; }
 #recordDialog .dialog-footer button { min-height:34px; padding:6px 12px; font-size:12px; }
 #recordDialog .dialog-body > .row:first-child > label { grid-template-rows:16px 34px auto; row-gap:4px; }
 #recordDialog .dialog-body > .row:first-child > label > select { height:34px; padding:5px 8px; }
 #recordDialog .form-hint { margin:6px 0 10px; font-size:11px; }
 #recordDialog .row { margin-bottom:8px; }
}
.hy-start-choice { display:none; }
@media(max-width:650px) {
 .hy-heading > .hy-theme-trigger.is-first-choice { background:#aac1ff; border-color:#c3d2ff; color:#10203e; font-weight:800; box-shadow:0 3px 12px #0003; }
 .hy-empty .hy-start-choice { display:block; width:100%; min-height:48px; padding:12px 16px; margin:18px 0 22px; border:1px solid #c3d2ff; border-radius:10px; background:#aac1ff; color:#10203e; font-size:15px; font-weight:800; }
 .hy-empty > .hy-legend { display:none; }
 .hy-start-choice:focus-visible,.hy-theme-trigger:focus-visible { outline:3px solid #fff; outline-offset:3px; }
}
@media(max-width:650px) {
 .hy-heading > .hy-theme-trigger.is-first-choice { position:relative; background:#151e2b; border-color:#34445b; color:#edf2ff; box-shadow:none; font-weight:700; }
 .hy-theme-trigger.is-first-choice::after { content:''; position:absolute; inset:-3px; border:2px solid #a9c4ff; border-radius:12px; pointer-events:none; opacity:0; animation:hy-choice-pulse 1.4s ease-in-out 2; }
 .hy-start-choice { display:none!important; }
 .hy-ctiles:has(> .hy-image-only) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hy-ctiles:has(> .hy-image-only) > .hy-ctile:not(.hy-image-only) { grid-column:1 / -1; }
 .hy-ctiles > .hy-ctile.hy-image-only { grid-template-columns:minmax(0,1fr); padding:10px 8px 0; gap:6px; }
 .hy-ctile.hy-image-only > .hy-card-set { grid-column:1; grid-row:1; width:auto; justify-self:center; }
 .hy-ctile.hy-image-only > .hy-mobile-copy { grid-column:1; grid-row:2; text-align:center; }
 .hy-ctile.hy-image-only > .hy-mobile-footer { grid-row:3; margin-inline:-8px; padding-inline:6px; gap:3px; }
 .hy-ctile > .cm-tile-actions:empty { display:none; }
}
@keyframes hy-choice-pulse { 0%,100% { opacity:0; } 50% { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .hy-theme-trigger.is-first-choice::after { animation:none; } }
@media (orientation:landscape) and (max-height:500px) {
 #recordDialog .dialog-head,
 #recordDialog .dialog-body,
 #recordDialog .dialog-footer { padding-left:max(16px,calc((100% - 680px)/2)); padding-right:max(16px,calc((100% - 680px)/2)); }
}
@media(max-width:650px) {
 .hy-ctiles:has(> .hy-card-strip) { display:flex; flex-direction:column; align-items:stretch; }
 .hy-card-strip { display:flex; gap:8px; overflow-x:auto; padding:0 0 6px; max-width:100%; scroll-snap-type:x proximity; }
 .hy-card-strip > .hy-ctile.hy-image-only { display:flex; flex-direction:column; flex:0 0 116px; width:116px!important; min-width:0; box-sizing:border-box; padding:10px 8px 0; gap:7px; border:1px solid #303b4d; border-radius:10px; background:#121925; scroll-snap-align:start; }
 .hy-card-strip .hy-card-set { width:auto; align-self:center; }
 .hy-card-strip .hy-mobile-copy { display:block; flex:1; text-align:center; }
 .hy-card-strip .hy-mobile-names { font-size:12px; line-height:1.4; margin:0; }
 .hy-card-strip .hy-mobile-footer { display:flex; flex-wrap:wrap; margin:2px -8px 0; padding:5px 7px; gap:0; border-top:1px solid #303b4d; }
 .hy-card-strip .hy-mobile-footer > .hy-sources { font-size:10px; }
 .hy-card-strip .hy-mobile-footer > .cm-tile { font-size:10px; padding:3px; }
}
/* Compact, wrapping card gallery and full-width action rows. */
@media(max-width:650px) {
 .hy-card-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; overflow:visible; padding:0; scroll-snap-type:none; }
 .hy-card-strip > .hy-ctile.hy-image-only { width:auto!important; min-width:0; padding:7px 5px 0; gap:5px; }
 .hy-card-strip .hy-card-set { max-width:100%; }
 .hy-card-strip .hy-card-set > .hy-tile,
 .hy-card-strip .hy-card-set > .hy-tile:only-child { width:min(80px,100%)!important; max-width:100%; }
 .hy-card-strip .hy-mobile-names { font-size:11px; overflow-wrap:anywhere; }
 .hy-ctile > .hy-mobile-footer { padding-top:3px; padding-bottom:3px; margin-top:3px; min-height:30px; box-sizing:border-box; }
 .hy-mobile-footer > .cm-tile { min-height:26px; padding-block:2px; }
 .hy-ctile:not(:has(> .hy-card-set)) > .hy-mobile-footer { width:auto; max-width:none; justify-self:stretch; margin-left:-12px; margin-right:-8px; }
 .hy-card-strip .hy-mobile-footer { margin:2px -5px 0; padding:3px 4px; gap:0; }
 .hy-card-strip .hy-mobile-footer > .hy-sources { font-size:10px; }
 .hy-card-strip .hy-mobile-footer > .cm-tile { font-size:0; gap:0; min-width:26px; min-height:26px; padding:3px; }
 .hy-card-strip .hy-mobile-footer > .cm-tile svg { width:13px; height:13px; }
}
@media(max-width:359px) {
 .hy-card-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Mobile priority belongs to the entry, not a second frame around its artwork. */
@media(max-width:650px) {
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-r) { border-color:#d96672; }
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-y) { border-color:#c9a63c; }
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-g) { border-color:#46b68a; }
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-n) { border-color:#526078; }
 .hy-ctiles .hy-card-set > .hy-tile { border:0!important; background:transparent!important; box-shadow:none!important; padding:0; border-radius:3px; }
}
@media(max-width:650px) {
 .hy-ctiles .hy-ctile { position:relative; isolation:isolate; overflow:hidden; border-width:2px; }
 .hy-ctiles .hy-ctile::before { content:''; position:absolute; inset:0; z-index:5; border:2px solid; border-color:inherit; border-radius:8px; pointer-events:none; }
 .hy-card-strip > .hy-ctile.hy-image-only { border-width:2px; align-items:stretch; }
 .hy-card-strip .hy-card-set { width:100%!important; max-width:100%; display:flex; justify-content:center; align-items:flex-start; align-self:center; }
 .hy-card-strip .hy-card-set > .hy-tile,
 .hy-card-strip .hy-card-set > .hy-tile:only-child { display:block; width:76px!important; max-width:100%; margin:0 auto; flex:0 1 76px; }
 .hy-card-strip .hy-tile-art { display:block; width:100%; aspect-ratio:59 / 86; }
 .hy-card-strip .hy-tile-art > img:not(.hy-ban) { display:block; width:100%; height:100%; object-fit:contain; }
 .hy-card-strip .hy-mobile-footer { width:auto; min-width:0; max-width:none; }
}
@media(max-width:650px) { .hy-ctiles .hy-ctile::before { inset:-2px; border-radius:10px; } }
.hy-hero .hy-hero-meta > .cm-meta-feedback,
.hy-hero .hy-hero-meta > .hy-ygo-guide { border-color:#43516a; }
@media(max-width:650px) {
 .hy-mobile-copy > .hy-mobile-names,
 .hy-card-strip .hy-mobile-names { white-space:normal; word-break:keep-all; overflow-wrap:anywhere; overflow:visible; text-overflow:clip; max-width:100%; min-width:0; height:auto; -webkit-line-clamp:unset; }
}
/* Hybrid mobile layout: readable copy rows and roomier simple cards. */
@media(max-width:650px) {
 .hy-ctiles > .hy-ctile:not(:has(> .hy-mobile-footer)),
 .hy-card-strip > .hy-ctile:not(:has(> .hy-mobile-footer)) { padding-bottom:12px; }
 .hy-ctile > .hy-mobile-footer:empty { display:none; }
 .hy-ctile:has(> .hy-mobile-footer:empty) { padding-bottom:12px; }
 .hy-card-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .hy-card-strip > .hy-ctile.hy-image-only { padding-top:10px; }
 .hy-card-strip .hy-mobile-names { font-size:12px; line-height:1.45; }
 .hy-card-strip .hy-mobile-footer { margin-top:6px; }
}
/* Each artwork keeps its own caption, including related-card groups. */
@media(max-width:650px) {
 .hy-ctiles .hy-card-set > .hy-tile { padding:4px!important; border-radius:6px; }
 .hy-ctiles .hy-card-set > .hy-tile.sev-r { background:#352329!important; }
 .hy-ctiles .hy-card-set > .hy-tile.sev-y { background:#332e1e!important; }
 .hy-ctiles .hy-card-set > .hy-tile.sev-g { background:#1c3029!important; }
 .hy-ctiles .hy-card-set > .hy-tile.sev-n { background:#232b39!important; }
 .hy-ctiles .hy-card-set .hy-tile strong { display:block!important; min-height:0!important; height:auto; padding:6px 1px 3px; font-size:11px; line-height:1.4; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; text-align:center; }
 .hy-ctiles .hy-mobile-names { display:none!important; }
 .hy-card-strip .hy-mobile-copy:has(> .hy-mobile-names:only-child) { display:none; }
 .hy-card-strip .hy-card-set > .hy-tile,
 .hy-card-strip .hy-card-set > .hy-tile:only-child { width:90px!important; flex-basis:90px; }
 .hy-card-strip .hy-mobile-footer { margin-top:auto; }
}
/* Quiet outer frame: priority stays on the badge and artwork caption. */
@media(max-width:650px) {
 .hy-ctiles .hy-ctile,
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-r),
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-y),
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-g),
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-n),
 .hy-card-strip > .hy-ctile.hy-image-only { border:1px solid #303b4d; }
 .hy-ctiles .hy-ctile::before { content:none; }
 .hy-ctile > .hy-mobile-footer,
 .hy-card-strip .hy-mobile-footer { background:transparent; border-top:1px solid #293344; }
}
/* Subtle priority tint across the whole mobile entry. */
@media(max-width:650px) {
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-r),
 .hy-ctiles .hy-ctile:has(.hy-chip.sev-r) { background:#211c27; }
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-y),
 .hy-ctiles .hy-ctile:has(.hy-chip.sev-y) { background:#24231f; }
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-g),
 .hy-ctiles .hy-ctile:has(.hy-chip.sev-g) { background:#182722; }
 .hy-ctiles .hy-card-set > .hy-tile.sev-r,
 .hy-ctiles .hy-card-set > .hy-tile.sev-y,
 .hy-ctiles .hy-card-set > .hy-tile.sev-g,
 .hy-ctiles .hy-card-set > .hy-tile.sev-n { background:transparent!important; }
}
/* Restore priority-colored mobile borders alongside the subtle fill. */
@media(max-width:650px) {
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-r),.hy-ctiles .hy-ctile:has(.hy-chip.sev-r) { border:2px solid #d96672; }
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-y),.hy-ctiles .hy-ctile:has(.hy-chip.sev-y) { border:2px solid #c9a63c; }
 .hy-ctiles .hy-ctile:has(.hy-tile.sev-g),.hy-ctiles .hy-ctile:has(.hy-chip.sev-g) { border:2px solid #46b68a; }
 .hy-ctiles .hy-ctile::before { content:''; inset:-2px; border:2px solid; border-color:inherit; border-radius:10px; }
}