.compare-tool{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:34px 0 100px}.compare-intro{padding:54px 0 40px;border-bottom:1px solid #2d3934;background:radial-gradient(circle at 82% 30%,rgba(191,164,104,.08),transparent 28%)}.compare-intro h1{max-width:1000px;margin:0;color:#e6dac2;font:500 clamp(48px,6.4vw,82px)/.94 var(--serif);letter-spacing:-.035em}.compare-intro h1 em{color:#81958c;font-weight:500}.compare-intro p{max-width:760px;margin:22px 0 0;color:#b8c2bc;font-size:18px;line-height:1.65}.compare-picker{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) auto;gap:12px;align-items:end;margin:28px 0 44px;padding:22px;border:1px solid #39463f;background:#101613}.compare-picker label{display:grid;gap:8px}.compare-picker label>span,.suggested-comparisons>span,.compare-start span,.comparison-ledger>header>span{color:#c7a95e;font:13px var(--mono);letter-spacing:.12em}.compare-picker select{width:100%;min-height:52px;border:1px solid #4a5952;background:#0b100e;color:#e6ddc9;padding:0 14px;font:500 17px var(--serif)}.compare-picker select:focus{outline:1px solid #c2a45c}.compare-vs{display:grid;height:52px;color:#7f9188;font:600 13px var(--mono);place-items:center}.compare-picker button{min-height:52px;border:1px solid #c0a35d;background:#c0a35d;color:#0a100d;padding:0 20px;font:600 13px var(--mono);cursor:pointer}.compare-identities{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:42px}.compare-identity{--compare-accent:#c4a45f;display:grid;grid-template-columns:120px 1fr;gap:26px;min-height:280px;padding:28px;border:1px solid #53472d;border-top:4px solid var(--compare-accent);background:linear-gradient(125deg,rgba(75,57,25,.2),#101613 48%);position:relative}.compare-identity--poe2{--compare-accent:#79a9a1;border-color:#385b57;background:linear-gradient(125deg,rgba(24,67,63,.25),#101613 48%)}.compare-game{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;color:var(--compare-accent);font:13px var(--mono);letter-spacing:.1em}.compare-game b{display:grid;width:38px;height:38px;border:1px solid var(--compare-accent);font:500 19px var(--serif);place-items:center}.compare-art{display:grid;min-height:130px;place-items:center}.compare-art img{max-width:105px;max-height:105px;object-fit:contain;filter:drop-shadow(0 10px 16px #000)}.compare-seal{width:90px;height:90px;border:1px solid var(--compare-accent);transform:rotate(45deg)}.compare-identity small{color:var(--compare-accent);font:13px var(--mono);text-transform:uppercase}.compare-identity h2{margin:5px 0;color:#e8dcc4;font:500 38px/1 var(--serif)}.compare-identity p{color:#acb6b0;font-size:15px}.compare-identity a{color:#d6bf82;font-size:14px;text-decoration:none}.comparison-ledger{border:1px solid #34413b;background:#0e1311}.comparison-ledger>header{padding:30px;border-bottom:1px solid #34413b}.comparison-ledger h2,.suggested-comparisons h2,.compare-start h2{margin:5px 0;color:#e6d9c0;font:500 36px var(--serif)}.comparison-ledger>header p{margin:7px 0 0;color:#9faaa4}.comparison-row{display:grid;grid-template-columns:210px 1fr 1fr}.comparison-row>div,.comparison-row>p{margin:0;padding:22px;border-bottom:1px solid #2b3631}.comparison-row>p{border-left:1px solid #2b3631;color:#c2cbc5;font-size:15px;line-height:1.65}.comparison-label{display:flex;flex-direction:column;gap:7px}.comparison-label>span{color:#dfd3bd;font:500 18px var(--serif)}.comparison-kind{width:fit-content;padding:3px 6px;border:1px solid #4a593f;color:#c5a861;font:11px var(--mono);text-transform:uppercase}.comparison-kind--editorial{border-color:#385b57;color:#88b6ae}.compare-note{margin-top:22px;padding:22px 25px;border-left:3px solid #c2a45d;background:#111714}.compare-note strong{color:#dfcfaa}.compare-note p{margin:5px 0 0;color:#aab4ae}.compare-start{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:10px 0 48px;background:#35413c}.compare-start>div{padding:32px;background:#101613}.compare-start p{color:#aeb8b2;font-size:16px}.suggested-comparisons{padding-top:42px;border-top:1px solid #303b36}.suggested-comparisons>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.suggested-comparisons a{display:flex;padding:20px;border:1px solid #435048;background:#111714;color:#dcc88e;text-decoration:none;justify-content:space-between}.compare-another-link{display:inline-block;margin:-12px 0 24px;color:#d8c27f;font:13px var(--mono);text-decoration:none}
@media(max-width:850px){.compare-picker{grid-template-columns:1fr}.compare-vs{height:auto}.compare-identities,.compare-start{grid-template-columns:1fr}.comparison-row{grid-template-columns:150px 1fr 1fr}.suggested-comparisons>div{grid-template-columns:1fr}}
@media(max-width:620px){.compare-tool{width:calc(100% - 28px)}.compare-identity{grid-template-columns:82px 1fr;padding:20px;gap:16px}.compare-art img{max-width:75px;max-height:75px}.comparison-row{grid-template-columns:1fr}.comparison-row>p{border-left:0}.comparison-row>p:nth-child(3){background:#121916}.compare-picker{padding:15px}.compare-intro h1{font-size:48px}}
.compare-search{position:relative;display:grid;gap:8px;min-width:0}.compare-search>label{color:#c7a95e;font:13px var(--mono);letter-spacing:.12em}.compare-search>input[type=search]{width:100%;min-height:52px;border:1px solid #4a5952;background:#0b100e;color:#e6ddc9;padding:0 15px;font:500 17px var(--serif)}.compare-search>input[type=search]:focus{outline:1px solid #c2a45c}.compare-suggestions{display:none;position:absolute;z-index:40;top:100%;left:0;right:0;max-height:330px;overflow:auto;border:1px solid #53625a;background:#0b100e;box-shadow:0 18px 35px rgba(0,0,0,.65)}.compare-suggestions.is-open{display:block}.compare-suggestions button{display:grid;width:100%;min-height:0;padding:13px 15px;border:0;border-bottom:1px solid #29342f;background:transparent;color:#e8ddc7;text-align:left}.compare-suggestions button:hover,.compare-suggestions button.is-active{background:#17211d}.compare-suggestions button strong{font:500 18px var(--serif)}.compare-suggestions button small{margin-top:2px;color:#82aaa3;font:12px var(--mono);text-transform:uppercase}.compare-search-state{display:block;padding:15px;color:#9ca9a2;font-size:14px}