/* The research view mirrors a Palworld terminal: choose one Pal, then read
   only the pairings the player has personally logged. */
.combo-workbench { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(330px, .72fr); gap: 26px; align-items: start; margin-top: 22px; }
.combo-selector { min-width: 0; }
.combo-focus { display: grid; place-items: center; gap: 8px; width: 190px; min-height: 190px; margin: 0 auto 21px; padding: 14px; color: #efffff; border: 2px solid #ffdf49; background: linear-gradient(145deg, rgba(9, 42, 58, .95), rgba(4, 26, 38, .96)); cursor: pointer; transition: transform .18s, box-shadow .18s; }
.combo-focus:hover, .combo-focus:focus-visible { outline: 0; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.combo-focus img { width: 100px; height: 100px; object-fit: contain; border: 2px solid #f7e733; border-radius: 50%; filter: drop-shadow(0 6px 4px rgba(0,0,0,.45)); }
.combo-focus img[hidden] { display: none; }.combo-focus.empty { min-height: 150px; border-color: #397d8d; }.combo-focus.empty::before { content: '⌕'; color: #71e4e5; font-size: 38px; }.combo-focus span { font: 800 23px/1.1 "Arial Narrow", Arial, sans-serif; letter-spacing: .02em; text-align: center; }
.combo-catalog-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }.combo-catalog-tools .search { flex: 1; }.combo-catalog-tools .count-label { white-space: nowrap; }
.combo-pal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; max-height: 565px; padding: 5px 9px 8px 5px; overflow-y: auto; scrollbar-color: #4fa2b2 #082738; }
.combo-select-card { position: relative; min-height: 140px; display: grid; grid-template-rows: 78px auto auto; align-items: center; gap: 4px; padding: 8px; color: #eaffff; border: 1px solid #2d7187; border-radius: 10px; background: linear-gradient(145deg, rgba(16, 63, 83, .96), rgba(8, 36, 52, .98)); cursor: pointer; transition: .18s border-color, .18s transform, .18s background; }
.combo-select-card:hover, .combo-select-card:focus-visible { outline: 0; border-color: #72e9e6; background: linear-gradient(145deg, #17647a, #0b4056); transform: translateY(-3px); }.combo-select-card.selected { border-color: #ffdf49; box-shadow: inset 0 0 0 1px #ffdf49; }
.combo-select-card img { width: 72px; height: 72px; margin: auto; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(0,0,0,.36)); }.combo-select-card span { overflow: hidden; font: 800 13px/1.15 "Arial Narrow", Arial, sans-serif; letter-spacing: .02em; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.combo-select-card em { justify-self: stretch; overflow: hidden; padding: 3px 6px; color: #b996ff; border: 1px solid #8d5ee9; border-radius: 999px; font: 700 10px/1 Arial, sans-serif; font-style: normal; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.combo-results { overflow: hidden; border: 1px solid #285d74; border-radius: 16px 16px 0 0; background: rgba(9, 40, 57, .78); }.combo-result-search { display: flex; margin: 12px; }.combo-tabs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(96, 193, 208, .18); border-bottom: 1px solid rgba(96, 193, 208, .18); }.combo-tabs button { min-height: 41px; color: #7598a3; border: 0; background: rgba(17, 55, 77, .68); font: 800 14px/1 Arial, sans-serif; cursor: pointer; }.combo-tabs button.active { color: #edffff; background: #315d80; }.combo-tabs button:focus-visible { outline: 2px solid #6ce4e6; outline-offset: -2px; }
.combo-grid { display: grid; max-height: 596px; overflow-y: auto; scrollbar-color: #4fa2b2 #082738; }.combo-card { overflow: hidden; border-bottom: 1px solid rgba(92, 184, 200, .25); background: rgba(20, 63, 84, .82); }.combo-card:last-child { border-bottom: 0; }.combo-card-head { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px 0; color: #84b5c0; font-size: 10px; }.combo-card-head span { color: #69e5df; font: 800 9px/1 Arial, sans-serif; letter-spacing: .1em; }.combo-line { display: grid; grid-template-columns: minmax(0, 1fr) 25px minmax(0, 1fr) 25px minmax(0, 1fr); align-items: center; gap: 3px; padding: 8px 9px 12px; }.combo-line > b { display: grid; place-items: center; color: #71dfe2; font: 400 30px/1 Arial, sans-serif; }.combo-line > b:nth-of-type(2) { color: #81e2e3; }
.combo-pal { min-width: 0; display: grid; grid-template-rows: 11px 49px auto; justify-items: center; gap: 3px; padding: 3px; color: #eaffff; border: 0; background: transparent; cursor: pointer; }.combo-pal:hover .combo-pal-name, .combo-pal:focus-visible .combo-pal-name { color: #ffdf61; }.combo-pal:focus-visible { outline: 1px solid #72e9e6; outline-offset: 2px; }.combo-pal-label { color: #8bbbc5; font: 800 8px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }.combo-pal img { width: 47px; height: 47px; object-fit: contain; border: 2px solid #62c5d1; border-radius: 50%; background: rgba(3, 26, 38, .5); filter: drop-shadow(0 4px 3px rgba(0,0,0,.35)); }.combo-pal.combo-result img { border-color: #ffdb63; }.combo-pal-name { overflow: hidden; max-width: 100%; font: 800 12px/1.14 "Arial Narrow", Arial, sans-serif; letter-spacing: .01em; text-align: center; text-overflow: ellipsis; transition: color .16s; }
.combo-note { margin: -4px 12px 10px; padding-top: 7px; border-top: 1px solid rgba(102, 228, 229, .14); color: #9bc7d0; font-size: 11px; line-height: 1.35; }.combo-empty { display: grid; justify-items: center; gap: 15px; min-height: 310px; padding: 48px 22px; color: #96c4ce; text-align: center; }.combo-empty p { margin: 0; max-width: 250px; line-height: 1.45; }
@media (max-width: 980px) { .combo-workbench { grid-template-columns: 1fr; }.combo-results { max-width: none; }.combo-pal-grid { max-height: 410px; }.combo-grid { max-height: none; } }
@media (max-width: 600px) { .combo-focus { width: 156px; min-height: 156px; }.combo-focus img { width: 78px; height: 78px; }.combo-focus span { font-size: 18px; }.combo-pal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.combo-select-card { min-height: 126px; }.combo-line { grid-template-columns: 1fr; gap: 4px; }.combo-line > b { height: 19px; transform: rotate(90deg); }.combo-card-head { padding-top: 9px; }.combo-pal { grid-template-columns: 49px minmax(0, 1fr); grid-template-rows: 12px auto; width: 100%; justify-items: start; text-align: left; }.combo-pal-label { grid-column: 1 / -1; }.combo-pal img { grid-row: 2; }.combo-pal-name { align-self: center; text-align: left; } }

/* Combinations: an illustrated research board. One selected Pal sits at the
   centre of the view; every proven pairing is read as a calm visual trail. */
#combos { --combo-ink: #eaffff; --combo-muted: #99c4cb; --combo-cyan: #75ddd9; --combo-deep: #082d3d; --combo-panel: rgba(8, 43, 58, .78); --combo-gold: #e7c875; }
#combos .section-heading { position: relative; align-items: end; margin-bottom: 24px; padding: 7px 4px 0 18px; }
#combos .section-heading::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 1px; width: 4px; border-radius: 99px; background: linear-gradient(#8fe8e2, #3caeb7); box-shadow: 0 0 16px rgba(112, 224, 218, .28); }
#combos .section-heading h2 { margin: 4px 0 8px; color: var(--combo-ink); font-size: clamp(31px, 3.4vw, 48px); line-height: .94; letter-spacing: .025em; text-shadow: none; }
#combos .section-heading p:not(.eyebrow) { max-width: 640px; color: #a8cdd2; font-size: 14px; line-height: 1.55; }
#combos .section-heading .collection-count { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; padding: 9px 13px; color: #a4cbd0; border: 1px solid rgba(117, 221, 217, .25); border-radius: 13px; background: rgba(4, 30, 42, .38); box-shadow: inset 0 1px rgba(255,255,255,.05); }
#combos .section-heading .collection-count span { color: #91e9e2; font-size: 28px; }

.combo-workbench { position: relative; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .78fr); gap: 22px; margin-top: 0; }
.combo-selector, .combo-results { position: relative; border: 1px solid rgba(105, 203, 207, .28); border-radius: 20px; background: linear-gradient(145deg, rgba(11, 53, 68, .76), rgba(5, 31, 43, .72)); box-shadow: inset 0 1px rgba(235, 255, 255, .07), 0 12px 30px rgba(0, 11, 18, .12); }
.combo-selector { min-height: 676px; padding: 22px 20px 18px; overflow: hidden; }
.combo-selector::before { content: ""; position: absolute; width: 300px; height: 180px; top: -118px; right: -92px; border-radius: 50%; background: radial-gradient(circle, rgba(117, 222, 217, .13), transparent 68%); pointer-events: none; }
.combo-focus { position: relative; z-index: 1; grid-template-columns: 106px minmax(0, 1fr); grid-template-rows: 1fr; justify-items: start; align-items: center; gap: 17px; width: min(100%, 440px); min-height: 132px; margin: 0 auto 22px; padding: 14px 19px 14px 14px; color: var(--combo-ink); border: 1px solid rgba(229, 199, 111, .7); border-radius: 18px; background: linear-gradient(135deg, rgba(12, 57, 70, .96), rgba(7, 37, 49, .91)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 10px 24px rgba(0, 14, 22, .17); cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.combo-focus::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(230, 202, 119, .12); border-radius: 14px; pointer-events: none; }
.combo-focus:hover, .combo-focus:focus-visible { outline: 0; border-color: #f3d883; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 13px 29px rgba(0, 14, 22, .26), 0 0 0 4px rgba(231, 200, 117, .07); transform: translateY(-2px); }
.combo-focus img { position: relative; z-index: 1; width: 98px; height: 98px; padding: 5px; object-fit: contain; border: 1px solid #f0d878; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #1d6072, #092d3d 70%); box-shadow: 0 0 0 5px rgba(236, 205, 119, .08), 0 8px 17px rgba(0,0,0,.25); filter: drop-shadow(0 5px 4px rgba(0,0,0,.28)); }
.combo-focus span { position: relative; z-index: 1; overflow: hidden; color: #f2ffff; font: 800 clamp(20px, 2.2vw, 27px)/1.04 "Arial Narrow", Arial, sans-serif; letter-spacing: .02em; text-align: left; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.combo-focus.empty { grid-template-columns: 42px minmax(0, 1fr); min-height: 108px; border-color: rgba(117, 221, 217, .44); }
.combo-focus.empty::before { content: "⌕"; position: relative; z-index: 1; color: var(--combo-cyan); font-size: 34px; }
.combo-focus.empty span { color: #c5e3e7; font-size: 20px; }
.combo-catalog-tools { position: relative; z-index: 1; margin: 0 0 14px; padding: 7px; border: 1px solid rgba(109, 206, 210, .17); border-radius: 14px; background: rgba(3, 27, 39, .28); }
.combo-catalog-tools .search { min-height: 38px; border: 0; border-radius: 10px; background: transparent; }
.combo-catalog-tools .search-icon, .combo-result-search .search-icon { flex: 0 0 auto; width: 21px; height: 21px; margin-left: 6px; color: #8be0df; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.combo-catalog-tools .search:focus-within { box-shadow: inset 0 0 0 1px rgba(126, 229, 224, .6); }
.combo-catalog-tools .count-label { padding-right: 7px; color: #79b4bd; font-size: 11px; }
.combo-pal-grid { position: relative; z-index: 1; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 11px; max-height: 482px; padding: 2px 4px 10px 1px; scrollbar-color: #68cdd1 transparent; }
.combo-select-card { min-height: 152px; grid-template-rows: 82px minmax(28px, auto) auto; gap: 5px; padding: 10px 8px 9px; color: #eaffff; border: 1px solid rgba(105, 190, 202, .34); border-radius: 16px; background: linear-gradient(155deg, rgba(20, 83, 101, .78), rgba(7, 40, 54, .86)); box-shadow: inset 0 1px rgba(236, 255, 255, .06); transition: border-color .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease; }
.combo-select-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(145deg, rgba(124, 227, 220, .09), transparent 50%); opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.combo-select-card:hover, .combo-select-card:focus-visible { outline: 0; border-color: rgba(128, 231, 225, .78); background: linear-gradient(155deg, rgba(24, 101, 117, .91), rgba(8, 51, 65, .93)); box-shadow: inset 0 1px rgba(243, 255, 255, .1), 0 9px 17px rgba(0, 13, 22, .14); transform: translateY(-3px); }
.combo-select-card:hover::before, .combo-select-card:focus-visible::before { opacity: 1; }
.combo-select-card.selected { border-color: #e8cc78; background: linear-gradient(155deg, rgba(33, 101, 111, .94), rgba(11, 53, 65, .96)); box-shadow: inset 0 0 0 1px rgba(238, 211, 126, .36), 0 0 0 3px rgba(231, 200, 117, .08); }
.combo-select-card img { position: relative; z-index: 1; width: 78px; height: 78px; padding: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 23%, rgba(106, 220, 220, .2), rgba(3, 30, 42, .74) 68%); filter: drop-shadow(0 7px 6px rgba(0,0,0,.28)); }
.combo-select-card span { position: relative; z-index: 1; align-self: center; color: #eaffff; font: 800 13px/1.13 "Arial Narrow", Arial, sans-serif; letter-spacing: .01em; text-transform: none; }
.combo-select-card em { position: relative; z-index: 1; justify-self: center; width: calc(100% - 7px); padding: 4px 6px; color: #cdb3ff; border-color: rgba(174, 116, 247, .72); background: rgba(32, 19, 68, .13); font-size: 9px; }

.combo-results { display: flex; flex-direction: column; min-height: 676px; overflow: hidden; border-radius: 20px; background: linear-gradient(155deg, rgba(12, 57, 73, .85), rgba(5, 31, 43, .78)); }
.combo-results::before { content: attr(data-results-title); display: block; padding: 20px 19px 0; color: #a0e9e4; font: 800 10px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.combo-result-search { margin: 14px 15px 12px; padding: 3px; border: 1px solid rgba(109, 206, 210, .22); border-radius: 13px; background: rgba(2, 26, 38, .32); }
.combo-result-search input { min-height: 36px; border: 0; background: transparent; }
.combo-result-search:focus-within { border-color: rgba(129, 231, 225, .58); box-shadow: 0 0 0 3px rgba(109, 220, 215, .06); }
.combo-tabs { gap: 4px; margin: 0 15px; padding: 4px; border: 0; border-radius: 13px; background: rgba(3, 27, 39, .4); }
.combo-tabs button { min-height: 39px; border-radius: 9px; color: #84b5bd; background: transparent; font-size: 12px; letter-spacing: .01em; transition: color .22s ease, background .22s ease, box-shadow .22s ease; }
.combo-tabs button:hover { color: #dffffe; }
.combo-tabs button.active { color: #06313d; background: linear-gradient(135deg, #91e7e1, #66d5d4); box-shadow: 0 4px 10px rgba(58, 199, 199, .18), inset 0 1px rgba(255,255,255,.33); }
.combo-grid { align-content: start; gap: 10px; max-height: 552px; margin: 14px 7px 7px 15px; padding: 0 8px 13px 0; overflow-y: auto; scrollbar-color: #67cbd0 transparent; }
.combo-card { overflow: hidden; border: 1px solid rgba(107, 197, 204, .22); border-radius: 16px; background: linear-gradient(150deg, rgba(20, 79, 96, .64), rgba(7, 40, 53, .76)); box-shadow: inset 0 1px rgba(242, 255, 255, .055); transition: border-color .22s ease, transform .22s ease, background .22s ease; }
.combo-card:hover { border-color: rgba(126, 226, 221, .45); background: linear-gradient(150deg, rgba(24, 93, 108, .72), rgba(8, 47, 60, .82)); transform: translateY(-1px); }
.combo-card-head { align-items: center; padding: 11px 13px 0; color: #8fbfc6; font-size: 10px; }
.combo-card-head span { padding: 4px 7px; color: #76ded8; border-radius: 999px; background: rgba(91, 220, 208, .09); font-size: 8px; letter-spacing: .1em; }
.combo-line { position: relative; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr); gap: 3px; padding: 10px 10px 13px; }
.combo-line > b { position: relative; z-index: 1; color: #80deda; font-size: 25px; }
.combo-line > b:nth-of-type(2) { color: #e7c875; }
.combo-pal { grid-template-rows: 12px 58px auto; gap: 4px; padding: 4px; border-radius: 12px; transition: background .2s ease, transform .2s ease; }
.combo-pal:hover, .combo-pal:focus-visible { outline: 0; background: rgba(131, 226, 220, .08); transform: translateY(-1px); }
.combo-pal-label { color: #81b3bc; font-size: 8px; letter-spacing: .07em; }
.combo-pal img { width: 56px; height: 56px; padding: 2px; border: 1px solid #70cdd0; background: radial-gradient(circle at 35% 25%, rgba(94, 214, 211, .18), rgba(2, 29, 41, .75) 68%); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.combo-pal.combo-result img { border-color: #e8ca75; background: radial-gradient(circle at 35% 25%, rgba(229, 196, 106, .16), rgba(3, 31, 42, .76) 68%); }
.combo-pal-name { color: #edffff; font-size: 12px; text-transform: none; }
.combo-pal:hover .combo-pal-name, .combo-pal:focus-visible .combo-pal-name { color: #ffe59a; }
.combo-note { margin: -2px 13px 12px; padding: 10px 11px 0; border-top: 1px solid rgba(122, 213, 214, .16); color: #a8cfd3; font-size: 11px; line-height: 1.45; }
.combo-empty { min-height: 315px; padding: 45px 27px; color: #a2c9ce; }
.combo-empty::before { content: "✦"; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(122, 222, 217, .42); border-radius: 50%; color: #94e7e1; background: rgba(82, 202, 200, .08); font-size: 18px; }
.combo-empty p { max-width: 270px; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  #combos.page.active .combo-selector, #combos.page.active .combo-results { animation: combo-panel-in .48s cubic-bezier(.2, .72, .36, 1) both; }
  #combos.page.active .combo-results { animation-delay: .08s; }
  #combos.page.active .combo-select-card { animation: combo-card-in .42s cubic-bezier(.2, .72, .36, 1) both; }
  #combos.page.active .combo-select-card:nth-child(2) { animation-delay: .035s; } #combos.page.active .combo-select-card:nth-child(3) { animation-delay: .07s; } #combos.page.active .combo-select-card:nth-child(4) { animation-delay: .105s; } #combos.page.active .combo-select-card:nth-child(5) { animation-delay: .14s; } #combos.page.active .combo-select-card:nth-child(6) { animation-delay: .175s; }
}
@keyframes combo-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes combo-card-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) { .combo-workbench { grid-template-columns: 1fr; } .combo-selector, .combo-results { min-height: 0; } .combo-pal-grid { max-height: 455px; } .combo-grid { max-height: 520px; } }
@media (max-width: 620px) { #combos .section-heading { display: block; padding-left: 15px; } #combos .section-heading .collection-count { display: inline-flex; margin-top: 13px; } .combo-workbench { gap: 16px; } .combo-selector { padding: 16px 13px 13px; border-radius: 16px; } .combo-focus { grid-template-columns: 82px minmax(0, 1fr); min-height: 111px; gap: 13px; margin-bottom: 16px; padding: 12px; border-radius: 15px; } .combo-focus img { width: 75px; height: 75px; } .combo-focus span { font-size: 20px; } .combo-pal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 420px; gap: 9px; } .combo-select-card { min-height: 142px; } .combo-results { border-radius: 16px; } .combo-results::before { padding: 17px 15px 0; } .combo-result-search, .combo-tabs { margin-left: 12px; margin-right: 12px; } .combo-grid { max-height: none; margin-left: 12px; padding-right: 5px; } .combo-card { border-radius: 14px; } }
@media (max-width: 390px) { .combo-line { grid-template-columns: 1fr; gap: 4px; } .combo-line > b { height: 18px; transform: rotate(90deg); } .combo-pal { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 12px auto; width: 100%; justify-items: start; text-align: left; } .combo-pal-label { grid-column: 1 / -1; } .combo-pal img { grid-row: 2; } .combo-pal-name { align-self: center; text-align: left; } }