<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Realm — cytrogen.icu</title>
<meta name="description" content="Realm — the visual exploration territory of cytrogen.icu">
<meta name="theme-color" content="#1a1a2e">
<link rel="me" href="https://gts.cytrogen.icu/@Cytrogen">
<link rel="me" href="mailto:realm@cytrogen.icu">
<link rel="stylesheet" href="realm.css">
</head>
<body>
<a class="skip-link" href="#scene-nav-exterior">跳过场景</a>
<!-- ============================================================
Skull Opening Animation Overlay
Demon skull splits open to reveal the realm.
aria-hidden: purely decorative, not for screen readers.
============================================================ -->
<div class="skull-overlay" aria-hidden="true">
<svg class="skull" viewBox="-200 -250 800 1000" preserveAspectRatio="xMidYMid slice">
<!-- Lower half: wall only, renders first (behind skull) -->
<g class="skull-bottom">
<!-- Wall background -->
<rect class="fill-wall-dark" x="-200" y="250" width="800" height="500"/>
</g>
<!-- Upper half: goat skull, rises with the wall (renders last = on top) -->
<g class="skull-top">
<!-- Wall background -->
<rect class="fill-wall-dark" x="-200" y="-250" width="800" height="500"/>
<!-- Goat skull silhouette -->
<path class="fill-skull" d="
M175 380 L158 340 L138 290 L125 245
L130 200 L155 170 L200 158
L245 170 L270 200 L275 245
L262 290 L242 340 L225 380 Z
"/>
<!-- Left horn -->
<path class="fill-skull" d="
M130 205 Q70 170 35 110
L65 95 Q85 145 145 180 Z
"/>
<!-- Right horn -->
<path class="fill-skull" d="
M270 205 Q330 170 365 110
L335 95 Q315 145 255 180 Z
"/>
<!-- Left eye socket -->
<path class="fill-skull-eye" d="
M140 245 L168 238 L172 268 L148 278 Z
"/>
<!-- Right eye socket -->
<path class="fill-skull-eye" d="
M232 238 L260 245 L252 278 L228 268 Z
"/>
<!-- Left nostril -->
<path class="fill-skull-eye" d="
M182 325 L190 313 L194 330 L187 348 Z
"/>
<!-- Right nostril -->
<path class="fill-skull-eye" d="
M210 313 L218 325 L213 348 L206 330 Z
"/>
</g>
</svg>
</div>
<!-- ============================================================
Main Folder Layout
============================================================ -->
<main class="realm-folder">
<h1 class="visually-hidden">城堡外观</h1>
<!-- Folder Content -->
<div class="folder-content">
<!-- ======================================================
Castle Exterior (城堡外观)
====================================================== -->
<svg role="group" aria-labelledby="scene-exterior-title" viewBox="0 0 800 500">
<title id="scene-exterior-title">城堡外观 — Castle exterior scene with gate, contact phone, notice board, and grave</title>
<!-- Sky -->
<rect class="fill-sky" x="0" y="0" width="800" height="500"/>
<!-- Stars (decorative detail) -->
<g class="scene-detail" aria-hidden="true">
<rect class="fill-star" x="80" y="30" width="3" height="3"/>
<rect class="fill-star" x="200" y="55" width="2" height="2"/>
<rect class="fill-star" x="350" y="20" width="3" height="3"/>
<rect class="fill-star" x="520" y="45" width="2" height="2"/>
<rect class="fill-star" x="680" y="25" width="3" height="3"/>
<rect class="fill-star" x="740" y="60" width="2" height="2"/>
<rect class="fill-star" x="150" y="80" width="2" height="2"/>
<rect class="fill-star" x="600" y="70" width="2" height="2"/>
</g>
<!-- Moon -->
<circle class="fill-moon" cx="680" cy="80" r="30" aria-hidden="true"/>
<circle class="fill-sky" cx="695" cy="70" r="28" aria-hidden="true"/>
<!-- Distant mountains -->
<path class="fill-mountain-far" d="M0 280 L100 180 L200 240 L320 160 L440 220 L540 170 L650 230 L750 190 L800 220 L800 320 L0 320 Z" aria-hidden="true"/>
<path class="fill-mountain" d="M0 310 L80 250 L180 290 L280 230 L380 270 L500 220 L600 280 L700 250 L800 290 L800 340 L0 340 Z" aria-hidden="true"/>
<!-- Ground -->
<rect class="fill-ground" x="0" y="330" width="800" height="170"/>
<!-- === HOTSPOT: Road → Neighboring Lands === -->
<a class="hotspot" href="neighbors.html" aria-label="邻邦 — Neighboring lands">
<title>邻邦 — Neighboring lands</title>
<path class="hotspot-shape fill-path" d="M350 500 L450 500 L438 380 L362 380 Z"/>
<text class="hotspot-label" x="400" y="470" text-anchor="middle">走</text>
</a>
<!-- Castle main wall -->
<rect class="fill-wall" x="150" y="200" width="500" height="180"/>
<!-- Castle battlements -->
<path class="fill-wall" d="
M150 200 L150 180 L180 180 L180 170 L210 170 L210 180 L240 180 L240 170 L270 170 L270 180
L300 180 L300 170 L330 170 L330 180 L360 180 L360 170 L390 170 L390 180
L420 180 L420 170 L450 170 L450 180 L480 180 L480 170 L510 170 L510 180
L540 180 L540 170 L570 170 L570 180 L600 180 L600 170 L630 170 L630 180
L650 180 L650 200 Z
" aria-hidden="true"/>
<!-- Left tower -->
<rect class="fill-wall-dark" x="130" y="140" width="60" height="240"/>
<path class="fill-wall-dark" d="M130 140 L130 120 L145 120 L145 110 L160 100 L175 110 L175 120 L190 120 L190 140 Z"/>
<!-- Left tower windows -->
<rect class="fill-window" x="150" y="160" width="12" height="18"/>
<rect class="fill-window" x="150" y="200" width="12" height="18"/>
<!-- Right tower -->
<rect class="fill-wall-dark" x="610" y="140" width="60" height="240"/>
<path class="fill-wall-dark" d="M610 140 L610 120 L625 120 L625 110 L640 100 L655 110 L655 120 L670 120 L670 140 Z"/>
<!-- Right tower windows -->
<rect class="fill-window" x="630" y="160" width="12" height="18"/>
<rect class="fill-window" x="630" y="200" width="12" height="18"/>
<!-- Wall detail bands -->
<rect class="fill-wall-dark" x="190" y="280" width="420" height="5" aria-hidden="true"/>
<rect class="fill-wall-light" x="190" y="250" width="420" height="3" aria-hidden="true"/>
<!-- === HOTSPOT: Grand Gate → Castle Interior === -->
<!-- Gate archway (decorative frame) -->
<g aria-hidden="true">
<path class="fill-wall-dark" d="
M355 380 L355 298
Q355 255 400 245
Q445 255 445 298
L445 380 Z
"/>
</g>
<!-- Gate door surface + link to interior -->
<a class="hotspot" href="interior.html" aria-label="大门 — Enter the castle interior">
<title>大门 — Enter the castle interior</title>
<path class="hotspot-shape" d="
M362 380 L362 302
Q362 265 400 255
Q438 265 438 302
L438 380 Z
"/>
<!-- Gate door center line -->
<rect class="hotspot-icon" x="397" y="255" width="6" height="125"/>
<!-- Gate door handles -->
<circle class="fill-accent-dim" cx="390" cy="340" r="4"/>
<circle class="fill-accent-dim" cx="410" cy="340" r="4"/>
<!-- Label -->
<text class="hotspot-label" x="400" y="242" text-anchor="middle">大门</text>
</a>
<!-- === HOTSPOT: Contact Phone === -->
<a class="hotspot" href="contact.html" aria-label="联络处 — Contact">
<title>联络处 — Contact</title>
<rect class="hotspot-hitarea" x="215" y="276" width="100" height="100"/>
<!-- Phone hood/canopy (wider than body, protective overhang) -->
<rect class="hotspot-icon" x="247" y="304" width="36" height="5"/>
<!-- Phone body -->
<rect class="hotspot-shape" x="252" y="309" width="26" height="34"/>
<!-- Handset hanging on left side (cord implied) -->
<rect class="hotspot-icon" x="247" y="315" width="5" height="14"/>
<!-- Keypad area -->
<rect class="fill-accent-dim" x="258" y="315" width="14" height="10"/>
<!-- Coin slot -->
<rect class="fill-accent-dim" x="261" y="330" width="8" height="2"/>
<!-- Shelf (wider than body, resting surface) -->
<rect class="hotspot-icon" x="250" y="337" width="30" height="3"/>
<!-- Label -->
<text class="hotspot-label" x="265" y="298" text-anchor="middle">联络处</text>
</a>
<!-- === HOTSPOT: Notice Board (Announcement) === -->
<a class="hotspot" href="announcement.html" aria-label="领地公告 — Announcement">
<title>领地公告 — Announcement</title>
<rect class="hotspot-hitarea" x="493" y="298" width="100" height="100"/>
<!-- Board -->
<rect class="hotspot-shape" x="520" y="330" width="45" height="35"/>
<!-- Board post -->
<rect class="hotspot-icon" x="540" y="365" width="5" height="30"/>
<!-- Board text lines -->
<rect class="fill-accent-dim" x="527" y="338" width="31" height="3"/>
<rect class="fill-accent-dim" x="527" y="345" width="25" height="3"/>
<rect class="fill-accent-dim" x="527" y="352" width="28" height="3"/>
<!-- Label -->
<text class="hotspot-label" x="543" y="323" text-anchor="middle">公告</text>
</a>
<!-- === HOTSPOT: Tombstone (Death / 遗言) === -->
<a class="hotspot" href="death.html" aria-label="遗言 — Death">
<title>遗言 — Death</title>
<rect class="hotspot-hitarea" x="35" y="308" width="100" height="100"/>
<!-- Tombstone -->
<path class="hotspot-shape" d="
M70 380 L70 360
Q70 340 85 335
Q100 340 100 360
L100 380 Z
"/>
<!-- Ground mound -->
<path class="fill-ground" d="M60 380 Q85 370 110 380 Z"/>
<!-- Label -->
<text class="hotspot-label" x="85" y="328" text-anchor="middle">遗言</text>
</a>
<!-- Trees (decorative) -->
<g class="scene-detail" aria-hidden="true">
<!-- Left tree cluster -->
<polygon class="fill-tree" points="30,340 50,280 70,340"/>
<polygon class="fill-tree" points="20,360 50,310 80,360"/>
<rect class="fill-tree" x="45" y="360" width="10" height="20"/>
<!-- Right tree -->
<polygon class="fill-tree" points="720,370 740,310 760,370"/>
<polygon class="fill-tree" points="710,390 740,340 770,390"/>
<rect class="fill-tree" x="735" y="390" width="10" height="20"/>
</g>
</svg>
</div>
<nav id="scene-nav-exterior" class="scene-nav" aria-label="城堡外观导航">
<ul class="scene-nav__list">
<li><a class="scene-nav__link" href="interior.html">大门 — 城堡内部</a></li>
<li><a class="scene-nav__link" href="contact.html">联络处 — 联系方式</a></li>
<li><a class="scene-nav__link" href="announcement.html">公告 — 领地公告</a></li>
<li><a class="scene-nav__link" href="death.html">遗言 — 墓志铭</a></li>
<li><a class="scene-nav__link" href="neighbors.html">邻邦 — 离开城堡</a></li>
</ul>
</nav>
</main>
</body>
</html>