.server-info-page {
    width: min(1280px, calc(100% - 32px));
    margin: 52px auto 80px;
}

.intro-panel { text-align: center; }

.realm-address {
    display: flex;
    margin-top: 24px;
    padding: 23px 28px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 1px solid rgba(208, 159, 69, .55);
    background: linear-gradient(180deg, rgba(34, 25, 22, .97), rgba(12, 12, 11, .98));
    box-shadow: inset 0 0 24px rgba(147, 229, 65, .04), 0 14px 32px rgba(0, 0, 0, .42);
    text-align: center;
}
.realm-address small { display: block; color: #a99b86; font: 700 10px Arial,sans-serif; letter-spacing: 1.7px; text-transform: uppercase; }
.realm-address strong { color: #c9f165; font-size: clamp(23px, 4vw, 35px); font-weight: 400; text-shadow: 0 0 18px rgba(150, 235, 69, .24); }
.address-rune { color: #ddad4f; font-size: 30px; }

.rate-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.rate-grid article,
.economy-strip article {
    position: relative;
    padding: 25px 14px;
    overflow: hidden;
    border: 1px solid rgba(205, 153, 62, .4);
    text-align: center;
    background: linear-gradient(160deg, rgba(43, 30, 26, .97), rgba(12, 12, 12, .99));
    box-shadow: inset 0 0 20px rgba(160, 86, 196, .025), 0 10px 24px rgba(0,0,0,.35);
}
.rate-grid article::before,
.economy-strip article::before {
    position: absolute; top: 0; right: 18%; left: 18%; height: 2px; content: "";
    background: linear-gradient(90deg, transparent, #9ee74d, #d6a84e, transparent);
}
.rate-grid span { display: block; color: #b7ec58; font-size: 27px; }
.rate-grid small,
.economy-strip small { display: block; margin: 9px 0 5px; color: #a99c89; font: 700 10px Arial,sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.rate-grid strong,
.economy-strip strong { color: #f1d388; font-size: 31px; font-weight: 400; }
.economy-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }

.hero-book {
    position: relative;
    display: grid;
    padding: 34px 42px 42px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px;
    border: 13px solid #291a14;
    border-radius: 20px 20px 28px 28px;
    background: linear-gradient(90deg, #382319, #1b1110 49%, #130d0c 50%, #382319);
    box-shadow: 0 24px 60px rgba(0,0,0,.7), inset 0 0 0 2px #704420, inset 0 0 35px #080606;
}
.hero-book::before,
.hero-book::after {
    position: absolute; top: 14px; bottom: 14px; width: 18px; content: "";
    border: 1px solid #9b672c; background: linear-gradient(90deg,#19100d,#5d371d,#1c110e);
}
.hero-book::before { left: 10px; }
.hero-book::after { right: 10px; }
.book-spine {
    position: absolute; z-index: 3; top: 22px; bottom: 22px; left: 50%; width: 22px;
    border-right: 1px solid rgba(255,222,143,.25); border-left: 1px solid rgba(67,38,20,.8);
    background: linear-gradient(90deg,#3a2115,#130d0b 48%,#462817); transform: translateX(-50%);
    box-shadow: 0 0 15px rgba(0,0,0,.65);
}
.book-page {
    position: relative;
    min-width: 0;
    padding: 36px 34px 30px;
    color: #3b291d;
    background:
        radial-gradient(circle at 12% 14%, rgba(123,82,38,.12), transparent 20%),
        radial-gradient(circle at 87% 82%, rgba(92,53,25,.13), transparent 23%),
        linear-gradient(100deg,#b8945d,#e0c991 15%,#d5ba80 83%,#aa814d);
    box-shadow: inset 0 0 35px rgba(67,37,18,.42), 0 3px 10px rgba(0,0,0,.45);
}
.book-page-left { border-radius: 15px 3px 3px 18px; transform: perspective(900px) rotateY(2deg); }
.book-page-right { border-radius: 3px 15px 18px 3px; transform: perspective(900px) rotateY(-2deg); }
.page-ornament { margin-bottom: 15px; color: #6e351e; font-size: 28px; text-align: center; }
.book-entry { display: grid; padding: 16px 0; grid-template-columns: 28px 42px minmax(0,1fr); gap: 11px; border-bottom: 1px solid rgba(83,47,24,.26); }
.book-entry:last-child { border-bottom: 0; }
.entry-number { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(87,45,24,.55); border-radius: 50%; color: #f0d59a; font: 700 11px Arial,sans-serif; background: #6a2b1d; }
.entry-icon { color: #63281c; font-size: 26px; text-align: center; filter: drop-shadow(0 1px rgba(255,238,187,.45)); }
.book-entry h3 { margin: 0 0 6px; color: #552719; font-size: 20px; font-weight: 700; text-shadow: 0 1px rgba(255,240,188,.45); }
.book-entry p { margin: 0; color: #483225; font: 13px/1.58 Arial,sans-serif; }

.feature-grimoire { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.feature-scroll {
    position: relative; display: flex; min-height: 142px; padding: 25px 27px; align-items: flex-start; gap: 18px;
    border: 1px solid rgba(206,154,64,.48); background: linear-gradient(145deg,rgba(42,29,26,.98),rgba(12,12,12,.99));
    box-shadow: inset 0 0 28px rgba(160,89,195,.025), 0 13px 28px rgba(0,0,0,.38);
}
.feature-scroll::after { position:absolute; right:12px; bottom:8px; color:rgba(205,158,71,.24); content:"❦"; font-size:22px; }
.feature-seal { display:grid; width:54px; height:54px; flex:0 0 54px; place-items:center; border:1px solid #9f6f2f; border-radius:50%; color:#b9ee58; font-size:25px; background:radial-gradient(circle,rgba(112,190,45,.22),#12120f 68%); box-shadow:0 0 18px rgba(121,215,52,.08); }
.feature-scroll h3 { margin:2px 0 8px; color:#edcf82; font-size:21px; font-weight:400; }
.feature-scroll p { margin:0; color:#ada18f; font:14px/1.65 Arial,sans-serif; }

@media (max-width: 960px) {
    .rate-grid { grid-template-columns: repeat(3,1fr); }
    .hero-book { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
    .book-spine { display:none; }
    .book-page-left,.book-page-right { transform:none; border-radius:12px; }
}
@media (max-width: 720px) {
	.server-info-page {
		width: min(100% - 18px, 1280px);
		margin-top: 28px;
	}
    .rate-grid,.economy-strip,.feature-grimoire { grid-template-columns:1fr; }
    .hero-book { padding:16px; border-width:8px; }
    .book-page { padding:28px 18px 22px; }
    .book-entry { grid-template-columns:26px 34px minmax(0,1fr); }
    .feature-scroll { padding:21px 18px; }
}