Refine Pixel Landing Page with Tír na nÓg spatial architecture

- Implement Doors and Alleys spatial navigation system
- Add Tír na nÓg pixel-art aesthetic and smooth transitions
- Support keyboard (WASD/Arrows) and mouse-based navigation
- Restructure HTML into a navigable 2D grid of rooms

Co-authored-by: micmug <185775013+micmug@users.noreply.github.com>

styles.css

@@ -0,0 +1,114 @@
+/* Tír na nÓg - Pixel Art Theme */
+:root {
+    --gold: #f1c40f;
+    --emerald: #2ecc71;
+    --dark-green: #1b4d3e;
+    --night: #2c3e50;
+    --cloud: #ecf0f1;
+    --pixel-border: 4px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    image-rendering: pixelated;
+}
+
+body {
+    font-family: 'Courier New', Courier, monospace;
+    background-color: var(--night);
+    color: var(--cloud);
+    overflow: hidden; /* Viewport handles navigation */
+    line-height: 1.6;
+}
+
+#viewport {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+}
+
+#world {
+    display: grid;
+    grid-template-columns: repeat(2, 100vw);
+    grid-template-rows: repeat(2, 100vh);
+    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    width: 200vw;
+    height: 200vh;
+}
+
+.room {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    border: var(--pixel-border) solid var(--gold);
+    background: linear-gradient(135deg, var(--dark-green) 0%, var(--night) 100%);
+    text-align: center;
+    padding: 2rem;
+}
+
+.content {
+    background: rgba(0, 0, 0, 0.7);
+    padding: 2rem;
+    border: var(--pixel-border) double var(--emerald);
+    box-shadow: 10px 10px 0px var(--dark-green);
+    max-width: 80%;
+}
+
+h1, h2 {
+    color: var(--gold);
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+    font-size: 3rem;
+    text-shadow: 4px 4px 0px var(--dark-green);
+}
+
+p {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+}
+
+/* Doors - Navigation UI */
+.doors {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.door {
+    pointer-events: auto;
+    position: absolute;
+    padding: 1rem;
+    background: var(--gold);
+    color: var(--night);
+    border: var(--pixel-border) solid var(--dark-green);
+    cursor: pointer;
+    font-family: inherit;
+    font-weight: bold;
+    font-size: 1rem;
+    transition: all 0.2s;
+}
+
+.door:hover {
+    background: var(--emerald);
+    color: white;
+    transform: scale(1.1);
+}
+
+.door-north { top: 20px; left: 50%; transform: translateX(-50%); }
+.door-south { bottom: 20px; left: 50%; transform: translateX(-50%); }
+.door-east { right: 20px; top: 50%; transform: translateY(-50%); }
+.door-west { left: 20px; top: 50%; transform: translateY(-50%); }
+
+/* Mobile optimization */
+@media (max-width: 768px) {
+    h1, h2 { font-size: 2rem; }
+    .content { max-width: 95%; }
+}