:root {
  --paper: #f5f3ed;
  --ink: #192d37;
  --muted: #465760;
  --accent: #234b58;
  --gold: #88683d;
  --line: #d7d8d1;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 15px/1.85 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: absolute; inset: 0 0 auto; height: 950px; pointer-events: none; background: radial-gradient(ellipse at 80% 15%, #d5ded96b, transparent 48%), linear-gradient(115deg, #ffffff8c, transparent 70%); z-index: -1; }
h1,h2,h3,p,figure { margin: 0; }
h2,h3 { font-weight: 600; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: #254956; color: #fff; }
.side-rail { display: none; }
.site-shell { width: min(1280px, calc(100% - 112px)); margin: 0 auto; }
.site-header { height: 112px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 22px; font: bold italic 44px/1 var(--serif); letter-spacing: -5px; color: #1b3642; }
.wordmark span { display: block; border-left: 1px solid #b4bcb8; padding-left: 22px; font: 600 16px/1.7 "Microsoft YaHei", sans-serif; letter-spacing: 2px; }
.edition { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 2px; color: #354b52; }
.edition i { width: 6px; height: 6px; border-radius: 50%; background: #7d6540; box-shadow: 0 0 0 5px #b3946020; }
.edition-detail { color: #56635e; letter-spacing: 1px; }
.hero { position: relative; display: grid; grid-template-columns: .86fr 1.5fr; gap: 0 56px; padding: 66px 0 0; }
.hero-copy { padding: 22px 0 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 3px; color: #5b503f; font-weight: 500; }
.eyebrow::before { content: ""; width: 25px; height: 1px; background: #9c7c4d; }
.hero h1 { font: 700 italic clamp(110px, 11vw, 164px)/.87 var(--serif); letter-spacing: -16px; margin: 36px 0 0 -5px; color: #203d48; text-shadow: 0 2px 0 #fff, 0 12px 18px #172f3b12; }
.hero h1 span { display: block; font: 600 31px/1.5 "Microsoft YaHei", sans-serif; letter-spacing: 5px; margin: 24px 0 0 8px; color: #203743; }
.hero-caption { margin-top: 24px; color: #3c5058; line-height: 1.95; font-size: 16px; letter-spacing: 1px; }
.start-game { margin-top: 27px; width: 228px; min-height: 61px; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(130deg,#345c69,#172f3b); color: #fff; text-decoration: none; font-size: 15px; letter-spacing: 4px; border: 1px solid #4c6570; box-shadow: inset 0 1px 0 #ffffff30, 0 8px 18px #142e3a17; transition: transform .25s,box-shadow .25s; }
.start-game span:last-child { font-size: 25px; line-height: 1; letter-spacing: 0; color: #e1c9a1; }
.start-game[href]:hover { transform: translateY(-3px); box-shadow: 0 12px 25px #142e3a30; }
.start-game[aria-disabled="true"] { cursor: default; }
:focus-visible { outline: 3px solid #88683d; outline-offset: 6px; }
.download-status { margin-top: 12px; font-size: 12px; color: #4b5960; letter-spacing: .5px; }
.hero-gallery { height: 492px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; perspective: 1300px; align-items: start; padding-top: 8px; }
.hero-panel { height: 431px; width: 100%; position: relative; transform-style: preserve-3d; --rest: -3deg; }
.panel-elf { margin-top: 32px; --rest: 0deg; }
.panel-mage { margin-top: 64px; --rest: 3deg; }
.card-surface { position: absolute; inset: 0; overflow: hidden; border: 1px solid #acbdc3; border-radius: 3px; background: radial-gradient(ellipse at 45% 20%,#789198,#253e4a 75%); }
.card-surface::before { content: ""; position: absolute; inset: 8px; border: 1px solid #ddc69d8a; z-index: 2; pointer-events: none; }
.hero-panel img { position: absolute; max-width: none; width: 390px; height: 400px; object-fit: contain; left: 50%; top: 9px; transform: translateX(-50%); filter: contrast(1.04) saturate(.93); transition: transform .5s cubic-bezier(.2,.7,.2,1),filter .5s; }
.panel-elf img { left: 38%; width: 397px; height: 394px; top: 19px; }
.panel-mage .card-surface { background: #222735; }
.panel-mage img { left: 47%; top: -5px; }
.card-surface::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,#111f3000 48%,#0e2029b5 78%,#0e2029 100%); z-index: 1; pointer-events: none; }
.hero-panel figcaption { position: absolute; bottom: 22px; left: 23px; right: 23px; z-index: 3; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 2px; transform: translateZ(22px); text-shadow: 0 2px 5px #0008; }
.hero-panel figcaption>span { font: italic 14px var(--serif); color: #e6cfaa; grid-column: 2; grid-row: 1; }
.hero-panel figcaption small { display: block; grid-column: 1/-1; grid-row: 2; font: 9px/1.6 Arial,sans-serif; letter-spacing: 1.6px; color: #e4d6c1; }
.hero-bottom { grid-column: 1/-1; padding: 37px 0 30px; margin-top: 33px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #354b53; font-size: 13px; letter-spacing: 2px; }
.hero-bottom>span { font-size: 12px; letter-spacing: 1px; }
.hero-bottom b { font-size: 22px; font-weight: 400; margin-left: 20px; color: var(--gold); }

/* A physical frame, a projected shadow and a restrained pointer-following reflection. */
.depth-card { --rx: 0deg; --ry: 0deg; --lift: 0px; --scale: 1; --rest: 0deg; position: relative; transform: perspective(1100px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rest)) scale(var(--scale)); transition: transform .55s cubic-bezier(.18,.7,.2,1),box-shadow .45s; box-shadow: 0 2px 3px #11273425, 0 13px 24px -12px #11273466, 0 32px 42px -30px #11273480; border-radius: 3px; }
.hero-panel.panel-sword { --rest: -3deg; }
.hero-panel.panel-mage { --rest: 3deg; }
.depth-card::after { content: ""; position: absolute; inset: 1px; border: 1px solid #ffffff30; background: radial-gradient(circle at var(--mx,50%) var(--my,25%),#ffedcd42,transparent 52%); opacity: 0; pointer-events: none; z-index: 5; border-radius: inherit; transition: opacity .4s; }
.depth-card.is-hovering,.depth-card:focus-visible { --lift: -15px; --scale: 1.04; --rest: 0deg; z-index: 6; box-shadow: 0 4px 0 #b69a6d,0 18px 24px -12px #142a3d80,0 40px 58px -19px #142a3d75; }
.depth-card.is-hovering { transition: transform .14s ease-out,box-shadow .4s; }
.depth-card.is-hovering::after,.depth-card:focus-visible::after { opacity: 1; }
.hero-panel.is-hovering img,.hero-panel:focus-visible img { transform: translateX(-50%) scale(1.06); filter: contrast(1.07) saturate(1.06); }
.panorama { height: 334px; position: relative; overflow: hidden; border: 1px solid #48616a; border-radius: 3px; background: #132735; box-shadow: 0 18px 35px -25px #132735bb; }
.panorama>img { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; filter: saturate(.88) contrast(1.06); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.panorama::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#0b1f30e8,#0b1f3060 48%,#0b1f3020); pointer-events: none; }
.panorama:hover>img { transform: scale(1.04); }
.panorama-frame { position: absolute; z-index: 2; inset: 16px; border: 1px solid #d1bd955c; pointer-events: none; }
.panorama-copy { position: absolute; z-index: 2; left: 49px; top: 54px; color: #fff; }
.panorama .eyebrow { color: #e3d2b6; }
.panorama h2 { font-size: 32px; line-height: 1.65; letter-spacing: 3px; margin-top: 23px; font-weight: 500; }
.panorama-note { position: absolute; bottom: 30px; right: 32px; z-index: 2; color: #f0e2ca; font: italic 13px var(--serif); letter-spacing: 3px; }
.section { padding: 86px 0; border-bottom: 1px solid var(--line); }
.section-index { font: 600 11px/1.5 Arial,sans-serif; color: #755932; letter-spacing: 2.5px; margin-bottom: 16px; }
.section-heading h2 { font-size: 30px; line-height: 1.55; letter-spacing: 1px; }
.section-heading>p:last-child:not(.section-index) { margin-top: 15px; font-size: 15px; color: var(--muted); }
.section-heading.horizontal { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.section-heading.horizontal>p { max-width: 320px; text-align: right; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 35px; padding: 31px 0; background: linear-gradient(135deg,#ffffffdc,#eceee7); border: 1px solid #d5d9d1; border-radius: 3px; box-shadow: inset 0 1px 0 #fff,0 14px 24px -22px #263e45; }
.stat { padding: 0 28px; border-left: 1px solid #c8d0c8; }
.stat:first-child { border-left: 0; }
.stat>p { font-size: 15px; font-weight: 600; color: #253b44; }
.stat strong { display: block; font: normal 68px/1.25 var(--serif); color: #254b56; margin: 7px 0 12px; }
.stat strong span { font: 14px "Microsoft YaHei",sans-serif; margin-left: 13px; color: #65543d; }
.stat small { font-size: 13px; color: #46565d; }
.rule-strip { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 22px; font-size: 14px; color: #293e48; }
.rule-strip span { display: inline-block; font-size: 12px; color: #5a4d37; background: #e8e4d9; border: 1px solid #d9d3c5; padding: 1px 9px; margin-right: 10px; }
.class-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin-top: 38px; perspective: 1500px; }
.class-grid figure { background: #fffdfa; border: 1px solid #c8cfc9; transform-style: preserve-3d; }
.class-art { height: 300px; position: relative; overflow: hidden; margin: 9px 9px 0; background: radial-gradient(ellipse at 50% 40%,#71888c,#243b48 84%); border: 1px solid #ffffff30; }
.class-art::before { content: "MU"; position: absolute; right: 8px; top: 4px; font: italic 110px var(--serif); color: #ffffff0c; letter-spacing: -9px; }
.class-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#1224318c,transparent 42%); pointer-events: none; }
.class-art.art-dark { background: #222735; }
.class-art img { position: absolute; max-width: none; width: 100%; height: 100%; object-fit: contain; left: 50%; transform: translateX(-50%); filter: saturate(.94) contrast(1.03); transition: transform .5s cubic-bezier(.2,.7,.2,1),filter .4s; }
.class-grid figure.is-hovering img,.class-grid figure:focus-visible img { transform: translateX(-50%) scale(1.075); filter: saturate(1.08) contrast(1.06); }
.class-grid figcaption { padding: 20px 22px 21px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 10px; font-size: 18px; font-weight: 600; letter-spacing: 2px; color: #203945; transform: translateZ(12px); }
.class-grid figcaption>span { grid-column: 2; grid-row: 1/3; font: italic 25px var(--serif); color: #826d4c; }
.class-grid figcaption small { grid-column: 1; grid-row: 2; font: 10px/1.8 Arial,sans-serif; color: #5b686b; letter-spacing: 1.6px; }
.performance { display: grid; grid-template-columns: 1.25fr .8fr .8fr 1.2fr; gap: 25px; align-items: center; margin-top: 46px; background: #203944; padding: 30px 32px; color: #fff; border: 1px solid #465c64; box-shadow: inset 0 1px 0 #ffffff22; }
.performance h3 { font-size: 20px; font-weight: 500; line-height: 1.8; }
.performance strong { font: 43px/1.4 var(--serif); color: #e8d2ad; }
.performance strong small { font-size: 14px; }
.performance p { font-size: 13px; color: #e0e7e7; }
.performance-copy { border-left: 1px solid #62747b; padding-left: 25px; }
.drop-layout { display: grid; grid-template-columns: .8fr 1.6fr; gap: 45px; margin-top: 36px; align-items: start; }
.drop-rates { padding: 26px 29px; background: #e9ece5; border: 1px solid #d0d8ce; }
.drop-rates>div+div { margin-top: 20px; }
.drop-rates>div>p { font-size: 15px; font-weight: 600; }
.drop-rates strong { display: block; font: 54px/1.45 var(--serif); color: #294d58; letter-spacing: -2px; }
.drop-rates strong span { font-size: 30px; padding: 0 10px; color: #7b6545; }
.rate-note { margin-top: 19px; font-size: 14px; line-height: 1.95; color: #3a4e55; border-top: 1px solid #c5cfc4; padding-top: 18px; }
.loot-table-wrap { border: 1px solid #cbd3cc; }
.loot-table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: left; background: #fffefa; }
.loot-table th,.loot-table td { padding: 15px 22px; border-bottom: 1px solid #d9ded5; }
.loot-table thead th { font-size: 13px; color: #fff; letter-spacing: 2px; background: #294751; font-weight: 500; }
.loot-table tbody th { font-weight: 600; width: 34%; color: #1e3944; white-space: nowrap; }
.loot-table td { color: #354c56; }
.loot-table tbody tr:nth-child(even) { background: #eef1e9; }
.loot-table tbody tr:last-child>* { border-bottom: 0; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.socket-rules { margin-top: 31px; }
.socket-rules article { padding: 25px 27px; border: 1px solid #d0d6ce; background: #fbfbf6; }
.sub-index { font-size: 12px; color: #755b37; letter-spacing: 1.3px; margin-bottom: 12px; }
.two-column h3 { font-size: 19px; margin-bottom: 13px; }
.two-column article>p:last-child { font-size: 15px; line-height: 1.95; color: #3e515b; }
.two-column b { color: #213f4a; font-weight: 700; }
.talasha { margin-top: 68px; border: 1px solid #cdd2c7; padding: 43px; background: linear-gradient(120deg,#e9ece2,#f3f3eb); box-shadow: inset 0 1px 0 #fff; }
.talasha-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; margin-top: 32px; }
.talasha-grid article { border-top: 2px solid #9f865e; padding: 23px 20px; background: #fffefa; box-shadow: 0 8px 16px -15px #20394366; }
.skill-level { font: 40px/1.4 var(--serif); color: #274752; margin-bottom: 22px; }
.skill-level span { font: 12px "Microsoft YaHei",sans-serif; color: #4d5c61; margin-left: 7px; }
.talasha-grid h3 { font-size: 19px; margin: 7px 0 12px; }
.talasha-grid article>p:not(.skill-level):not(.sub-index) { font-size: 14px; color: #3d525a; }
.talasha-grid strong { color: #253f49; font-weight: 600; }
.recipe { border-top: 1px solid #d1d8ce; margin-top: 24px; padding-top: 13px; font-size: 13px; color: #45575c; }
.craft-note { display: flex; gap: 18px; margin-top: 26px; align-items: center; }
.craft-note p { font-size: 14px; color: #394c53; }
.craft-note strong { color: #203b45; }
.note-mark { font: 28px var(--serif); color: #806641; }
.detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 29px; margin-top: 35px; }
.detail-grid article { border-top: 2px solid #879a96; padding: 24px 0 0; }
.detail-number { font: italic 27px var(--serif); color: #826c4a; }
.detail-grid h3 { font-size: 21px; margin: 15px 0 21px; }
.detail-grid ul { padding-left: 19px; margin: 0; font-size: 15px; line-height: 1.95; color: #3c515b; }
.detail-grid li { margin-bottom: 14px; padding-left: 4px; }
.detail-grid li::marker { color: #92744a; }
.fairness { display: grid; grid-template-columns: .83fr 1.5fr; gap: 76px; }
.fairness-intro h2 { font-size: 37px; line-height: 1.6; letter-spacing: 2px; }
.fairness-intro>p:not(.section-index) { font-size: 15px; color: #3c515b; margin-top: 20px; }
.duration { display: flex; gap: 20px; align-items: center; margin-top: 30px; }
.duration strong { font: 80px/1 var(--serif); color: #2e5560; }
.duration span { font-size: 13px; color: #3f535b; }
.fair-item { display: flex; gap: 22px; padding: 23px 0; border-bottom: 1px solid #cdd5cd; }
.fair-item:first-child { padding-top: 0; }
.fair-item>span { font: italic 17px var(--serif); color: #796445; padding-top: 4px; }
.fair-item h3 { font-size: 19px; margin-bottom: 9px; }
.fair-item p { font-size: 15px; color: #3c515b; line-height: 1.95; }
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 27px; padding: 25px; background: #e8ece3; border: 1px solid #d0d7ca; }
.prices>div+div { padding-left: 28px; border-left: 1px solid #c5cebf; }
.prices p { font-size: 14px; color: #354d56; }
.prices strong { display: block; font: 42px/1.6 var(--serif); color: #2a4f5b; }
.prices strong small { font: 12px "Microsoft YaHei",sans-serif; }
.prices div>span { font-size: 13px; color: #3c5057; }
.community-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 68px; margin-top: 34px; }
.community-grid article h3 { font-size: 20px; margin-bottom: 16px; }
.community-grid article p { font-size: 15px; line-height: 1.95; color: #3c515b; margin-top: 13px; }
.community-grid .warning-note { padding: 14px 18px; border-left: 3px solid #92744a; background: #ece8dc; color: #483f30; margin-top: 22px; }
.contact { padding: 29px 31px; background: #203d48; color: #fff; border: 1px solid #5e7177; box-shadow: inset 0 1px 0 #ffffff30; }
.contact .sub-index { color: #ecd8b5; }
.contact>div { margin-top: 22px; }
.contact>div>span { display: block; font-size: 13px; color: #e0e9eb; }
.contact strong { font: 31px/1.7 var(--serif); color: #f1ddbb; letter-spacing: 1px; }
.contact>p:last-child { font-size: 13px; color: #e1e9e9; margin-top: 20px; }
.site-footer { min-height: 159px; display: flex; align-items: center; gap: 35px; color: #485b62; }
.site-footer .wordmark { font-size: 34px; letter-spacing: -4px; gap: 17px; }
.site-footer .wordmark span { font-size: 13px; letter-spacing: 1px; padding-left: 17px; }
.site-footer>p { font-size: 12px; }
.site-footer>p span { display: block; margin-top: 3px; }
.footer-end { font-size: 12px; margin-left: auto; letter-spacing: 1px; }
.visually-hidden { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }

@media (max-width: 1150px) {
  .site-shell { width: calc(100% - 72px); }
  .hero { gap: 0 32px; padding-top: 47px; grid-template-columns: .8fr 1.45fr; }
  .hero h1 { font-size: 130px; }
  .hero h1 span { font-size: 28px; letter-spacing: 3px; }
  .hero-gallery { height: 460px; gap: 12px; }
  .hero-panel { height: 380px; }
  .hero-panel img { width: 350px; height: 366px; }
  .hero-panel figcaption { left: 17px; right: 17px; font-size: 14px; letter-spacing: 1px; }
  .hero-panel figcaption small { font-size: 8px; letter-spacing: .7px; }
  .hero-copy { padding-top: 5px; }
  .hero h1 { margin-top: 28px; }
  .hero-caption { font-size: 15px; }
  .section { padding: 64px 0; }
  .section-heading h2 { font-size: 27px; }
  .stat { padding: 0 20px; }
  .stat small { font-size: 12px; }
  .class-grid { gap: 22px; }
  .class-art { height: 253px; }
  .performance { padding: 24px; gap: 20px; }
  .performance h3 { font-size: 18px; }
  .performance p { font-size: 12px; }
  .performance-copy { padding-left: 17px; }
  .drop-layout { gap: 27px; }
  .drop-rates { padding: 23px; }
  .talasha { padding: 32px; margin-top: 54px; }
  .talasha-grid { gap: 17px; }
  .talasha-grid article { padding: 22px 17px; }
  .talasha-grid h3 { font-size: 17px; }
  .fairness { gap: 42px; }
  .community-grid { gap: 35px; }
  .contact { padding: 25px; }
  .site-footer { gap: 22px; }
  .footer-end { display: none; }
}
@media (max-width: 850px) {
  .site-shell { width: calc(100% - 48px); }
  .site-header { height: 96px; }
  .wordmark { font-size: 38px; gap: 17px; }
  .wordmark span { font-size: 14px; padding-left: 17px; }
  .edition-detail { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 38px; }
  .hero-copy { position: relative; padding-bottom: 35px; }
  .hero h1 { font-size: 120px; }
  .hero h1 span { font-size: 28px; }
  .hero-caption { margin-top: 19px; }
  .start-game { position: absolute; right: 0; bottom: 77px; width: 218px; }
  .download-status { position: absolute; right: 0; bottom: 43px; width: 218px; text-align: center; }
  .hero-gallery { margin-top: 12px; height: 458px; gap: 20px; padding: 8px 8px 0; }
  .hero-panel { height: 382px; }
  .hero-panel img { height: 373px; width: 355px; }
  .hero-panel figcaption { font-size: 16px; }
  .hero-panel figcaption small { font-size: 9px; letter-spacing: 1px; }
  .hero-bottom { margin-top: 16px; padding: 23px 0; font-size: 12px; letter-spacing: 1px; }
  .hero-bottom>span { font-size: 11px; }
  .panorama { height: 292px; }
  .panorama-copy { left: 35px; top: 41px; }
  .panorama h2 { font-size: 28px; }
  .section-heading.horizontal { display: block; }
  .section-heading.horizontal>p { text-align: left; max-width: none; }
  .section-heading h2 { font-size: 26px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .stat:nth-child(3) { border-left: 0; }
  .stat { padding: 0 27px; }
  .stat small { font-size: 13px; }
  .class-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
  .class-art { height: 275px; }
  .performance { grid-template-columns: 1.1fr 1fr 1fr; }
  .performance-copy { grid-column: 1/-1; border-left: 0; border-top: 1px solid #62747b; padding: 18px 0 0; display: flex; justify-content: space-between; gap: 15px; }
  .drop-layout { grid-template-columns: 1fr; }
  .drop-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .drop-rates>div+div { margin: 0; }
  .rate-note { grid-column: 1/-1; }
  .rate-note br { display: none; }
  .two-column { gap: 22px; }
  .socket-rules article { padding: 22px; }
  .talasha-grid { grid-template-columns: 1fr; }
  .talasha-grid h3 { font-size: 20px; }
  .skill-level { float: right; }
  .talasha-grid article { padding: 24px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-number { float: right; }
  .detail-grid h3 { margin: 0 0 19px; }
  .detail-grid article { padding-top: 23px; }
  .fairness { grid-template-columns: 1fr; gap: 36px; }
  .fairness-intro { position: relative; }
  .duration { position: absolute; right: 0; bottom: 0; }
  .community-grid { grid-template-columns: 1fr; }
  .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 24px; }
  .contact>.sub-index,.contact>p:last-child { grid-column: 1/-1; margin: 0; }
  .contact>div { margin: 0; }
}
@media (max-width: 540px) {
  .site-shell { width: calc(100% - 40px); }
  .site-header { height: 87px; }
  .wordmark { font-size: 35px; gap: 15px; }
  .wordmark span { font-size: 13px; letter-spacing: 1px; padding-left: 15px; }
  .edition { font-size: 10px; letter-spacing: 1px; gap: 9px; }
  .hero { padding-top: 32px; }
  .hero .eyebrow { font-size: 11px; letter-spacing: 2px; }
  .hero h1 { font-size: 105px; letter-spacing: -11px; margin-top: 26px; }
  .hero h1 span { font-size: 25px; letter-spacing: 3px; margin: 18px 0 0 7px; }
  .hero-caption { font-size: 13px; letter-spacing: .2px; }
  .hero-copy { padding-bottom: 27px; }
  .start-game { width: 143px; font-size: 13px; min-height: 52px; letter-spacing: 2px; padding: 12px 15px; bottom: 73px; }
  .download-status { width: 143px; font-size: 10px; bottom: 45px; letter-spacing: 0; }
  .hero-gallery { gap: 10px; height: 316px; padding: 6px 3px 0; margin-top: 4px; }
  .hero-panel { height: 273px; }
  .hero-panel img { width: 256px; height: 273px; top: 4px; }
  .panel-elf { margin-top: 16px; }
  .panel-mage { margin-top: 32px; }
  .panel-elf img { left: 32%; top: 13px; }
  .panel-mage img { top: -2px; }
  .card-surface::before { inset: 5px; border-color: #ddc69d66; }
  .hero-panel figcaption { left: 12px; right: 12px; bottom: 15px; font-size: 12px; letter-spacing: .5px; }
  .hero-panel figcaption>span { font-size: 10px; }
  .hero-panel figcaption small { font-size: 6px; letter-spacing: .1px; }
  .hero-bottom { margin-top: 13px; padding: 19px 0; font-size: 11px; letter-spacing: .3px; }
  .hero-bottom>span { font-size: 0; }
  .hero-bottom b { margin-left: 0; font-size: 21px; }
  .panorama { height: 261px; }
  .panorama>img { object-position: 59% center; }
  .panorama-frame { inset: 11px; }
  .panorama-copy { left: 27px; top: 38px; }
  .panorama .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .panorama h2 { font-size: 26px; letter-spacing: 2px; margin-top: 18px; }
  .panorama-note { right: 22px; bottom: 23px; font-size: 10px; }
  .section { padding: 47px 0; }
  .section-index { font-size: 10px; letter-spacing: 1.8px; margin-bottom: 14px; }
  .section-heading h2 { font-size: 24px; line-height: 1.55; letter-spacing: 0; }
  .section-heading>p:last-child:not(.section-index) { font-size: 14px; margin-top: 12px; }
  .stats-grid { margin-top: 26px; padding: 25px 0; gap: 24px 0; }
  .stat { padding: 0 18px; }
  .stat>p { font-size: 14px; }
  .stat strong { font-size: 58px; margin: 6px 0 9px; }
  .stat small { font-size: 12px; }
  .rule-strip { display: block; font-size: 13px; margin-top: 19px; }
  .rule-strip p+p { margin-top: 12px; }
  .rule-strip span { font-size: 11px; padding: 1px 7px; margin-right: 8px; }
  .class-grid { margin-top: 29px; gap: 20px 14px; }
  .class-art { margin: 6px 6px 0; height: 194px; }
  .class-art img { width: auto; height: 100%; }
  .class-grid figcaption { padding: 14px 12px 16px; font-size: 15px; letter-spacing: 1px; }
  .class-grid figcaption>span { font-size: 19px; }
  .class-grid figcaption small { font-size: 7px; letter-spacing: .4px; }
  .performance { margin-top: 31px; grid-template-columns: 1fr 1fr; gap: 21px; padding: 24px; }
  .performance h3 { grid-column: 1/-1; font-size: 20px; }
  .performance h3 br { display: none; }
  .performance strong { font-size: 40px; }
  .performance p { font-size: 12px; }
  .performance-copy { flex-direction: column; gap: 6px; }
  .drop-layout { margin-top: 26px; gap: 23px; }
  .drop-rates { padding: 23px; }
  .drop-rates strong { font-size: 42px; letter-spacing: -1px; }
  .drop-rates strong span { font-size: 25px; padding: 0 5px; }
  .rate-note { font-size: 14px; }
  .loot-table { font-size: 14px; }
  .loot-table th,.loot-table td { padding: 13px 11px; }
  .loot-table thead th { font-size: 12px; }
  .two-column { grid-template-columns: 1fr; gap: 18px; }
  .socket-rules { margin-top: 23px; }
  .two-column h3 { font-size: 18px; }
  .two-column article>p:last-child { font-size: 14px; }
  .talasha { padding: 28px 20px; margin: 22px -4px 0; }
  .talasha-grid { margin-top: 26px; }
  .talasha-grid article { padding: 22px 18px; }
  .talasha-grid h3 { font-size: 18px; }
  .skill-level { font-size: 31px; margin-left: 10px; }
  .skill-level span { display: block; font-size: 11px; text-align: right; }
  .recipe { margin-top: 21px; font-size: 12px; }
  .craft-note { gap: 12px; align-items: flex-start; }
  .craft-note p { font-size: 13px; }
  .detail-grid { margin-top: 28px; gap: 24px; }
  .detail-grid h3 { font-size: 19px; }
  .detail-grid ul { font-size: 14px; }
  .fairness-intro h2 { font-size: 32px; }
  .fairness-intro>p:not(.section-index) { font-size: 14px; }
  .duration { position: static; margin-top: 23px; }
  .duration strong { font-size: 65px; }
  .fairness { gap: 29px; }
  .fair-item { gap: 16px; padding: 22px 0; }
  .fair-item h3 { font-size: 18px; }
  .fair-item p { font-size: 14px; }
  .prices { padding: 20px 17px; gap: 19px; }
  .prices>div+div { padding-left: 19px; }
  .prices strong { font-size: 33px; }
  .prices div>span { font-size: 12px; }
  .community-grid { margin-top: 27px; gap: 28px; }
  .community-grid article h3 { font-size: 19px; }
  .community-grid article p { font-size: 14px; }
  .contact { padding: 25px 22px; gap: 16px; }
  .contact strong { font-size: 25px; letter-spacing: 0; }
  .contact>div>span,.contact>p:last-child { font-size: 12px; }
  .site-footer { padding: 29px 0; display: block; min-height: 0; }
  .site-footer>p { margin-top: 20px; }
}
@media (max-width: 360px) {
  .site-shell { width: calc(100% - 32px); }
  .hero h1 { font-size: 96px; }
  .hero h1 span { font-size: 22px; }
  .hero-caption { font-size: 12px; }
  .start-game,.download-status { width: 128px; }
  .start-game { font-size: 12px; }
  .hero-panel figcaption { left: 10px; right: 10px; font-size: 11px; }
  .hero-panel figcaption>span { display: none; }
  .hero-panel figcaption small { font-size: 5px; }
  .class-art { height: 174px; }
  .class-grid figcaption { font-size: 14px; }
  .class-grid figcaption>span { font-size: 15px; }
  .class-grid figcaption small { font-size: 6px; }
  .contact strong { font-size: 23px; }
}
@media (hover: none) {
  .depth-card:focus-visible { --lift: 0px; --scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none!important; transition: none!important; }
  .depth-card,.depth-card.is-hovering,.depth-card:focus-visible { transform: none; }
  .hero-panel.is-hovering img,.hero-panel:focus-visible img,.class-grid figure.is-hovering img,.class-grid figure:focus-visible img { transform: translateX(-50%); }
  .panorama:hover>img { transform: none; }
}

/* Player contact information now occupies the left side of the hero. */
.hero-copy { padding-top: 5px; }
.hero-copy>.eyebrow { margin-bottom: 20px; }
.hero-contact { position: relative; padding: 26px 30px 25px; background: linear-gradient(135deg,#2d505b,#18343f); border-color: #728185; box-shadow: inset 0 1px 0 #ffffff29,0 14px 30px -22px #172f3b80; }
.hero-contact::after { content: ""; position: absolute; top: 0; left: 30px; width: 46px; height: 2px; background: #d8bf95; }
.hero-contact .contact-title { margin: 0 0 22px; color: #efdfc3; font: 500 19px/1.6 "Microsoft YaHei",sans-serif; letter-spacing: 2px; text-shadow: none; }
.hero-contact>div { margin-top: 20px; }
.hero-contact>div+div { border-top: 1px solid #78909855; padding-top: 17px; margin-top: 16px; }
.hero-contact>div>span { font-size: 13px; letter-spacing: 1px; }
.hero-contact strong { display: block; font-size: clamp(30px,3vw,39px); line-height: 1.6; letter-spacing: 1px; color: #f0d7ac; }
.hero-contact>p:last-child { margin-top: 19px; font-size: 12px; color: #e0e9e9; }
.hero-copy .start-game { margin-top: 20px; min-height: 54px; width: 100%; }
.hero-copy .download-status { margin-top: 9px; text-align: center; }
.community-grid { grid-template-columns: 1.2fr 1fr; gap: 45px; align-items: center; }
.community-photo { padding: 9px; border: 1px solid #bec9c4; background: #fffefa; box-shadow: 0 12px 28px -22px #213d48aa; border-radius: 3px; }
.community-photo-art { overflow: hidden; background: #1a252b; }
.community-photo img { width: 100%; height: auto; transition: transform .7s ease; }
.community-photo:hover img { transform: scale(1.025); }
.community-photo figcaption { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 19px 15px 16px; }
.community-photo .sub-index { display: block; font: 10px/1.6 Arial,sans-serif; letter-spacing: 1.6px; margin-bottom: 5px; }
.community-photo h3 { font-size: 18px; letter-spacing: 2px; }
.community-photo figcaption>p { font-size: 12px; color: #465760; text-align: right; }
@media(max-width:1150px) {
  .hero-contact { padding: 24px; }
  .hero-contact .contact-title { font-size: 18px; margin-bottom: 18px; }
  .hero-contact strong { font-size: 32px; }
  .hero-contact>div { margin-top: 17px; }
  .community-grid { gap: 30px; }
  .community-photo figcaption { display: block; padding: 16px 12px; }
  .community-photo figcaption>p { margin-top: 8px; text-align: left; }
}
@media(max-width:850px) {
  .hero-copy { padding-bottom: 18px; }
  .hero-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 24px; }
  .hero-contact .contact-title { grid-column: 1/-1; margin: 0; }
  .hero-contact>div { margin: 0; }
  .hero-contact>div+div { padding: 0 0 0 24px; margin: 0; border-top: 0; border-left: 1px solid #78909855; }
  .hero-contact>p:last-child { grid-column: 1/-1; margin: 0; }
  .hero-contact strong { font-size: 34px; }
  .hero-copy .start-game { position: static; width: 228px; margin-top: 19px; }
  .hero-copy .download-status { position: static; width: 228px; margin-top: 9px; }
  .community-grid { grid-template-columns: 1fr; }
  .community-photo { max-width: 590px; width: 100%; margin: 0 auto; }
  .community-photo figcaption { display: flex; }
}
@media(max-width:540px) {
  .hero-copy>.eyebrow { margin-bottom: 17px; }
  .hero-contact { padding: 24px 23px; gap: 17px 15px; }
  .hero-contact .contact-title { font-size: 18px; }
  .hero-contact>div+div { padding-left: 15px; }
  .hero-contact strong { font-size: 25px; letter-spacing: 0; }
  .hero-contact>div>span { font-size: 12px; }
  .hero-copy .start-game { width: 100%; min-height: 54px; }
  .hero-copy .download-status { width: 100%; }
  .community-photo { padding: 7px; }
  .community-photo figcaption { padding: 16px 10px 12px; gap: 10px; }
  .community-photo h3 { font-size: 17px; }
  .community-photo .sub-index { font-size: 8px; letter-spacing: 1px; }
  .community-photo figcaption>p { max-width: 140px; margin: 0; text-align: right; font-size: 11px; }
}
@media(max-width:360px) {
  .hero-contact { padding: 23px 17px; gap: 16px 10px; }
  .hero-contact>div+div { padding-left: 10px; }
  .hero-contact strong { font-size: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  .community-photo:hover img { transform: none; }
}