new sesctions and hidden pages and effects

static/styles2.css

@@ -70,6 +70,15 @@ nav{
   margin:0 auto;
 }
 
+
+.sidebar-links a.hidden {
+  display: none;
+}
+
+.sidebar-links:hover a.hidden {
+  display: block;
+}
+
 aside{
   border-right:1px solid var(--border);
   padding:2.5rem 1.5rem;
@@ -308,4 +317,99 @@ footer{
   font-size: 12px;
   text-align: center;
   line-height: 1.4;
-}
+}
+
+.game-grid {
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 1rem 0;
+}
+
+.game-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 180px;
+}
+
+.page-header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 2.5rem;
+}
+
+.page-title {
+  font-family: var(--ff-mono);
+  font-size: clamp(1rem, 4vw, 2rem);
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  color: var(--accent);
+}
+
+.page-title::before {
+  content: '> ';
+  color: var(--green);
+  font-weight: 500;
+}
+
+.page-sub {
+  font-family: var(--ff-mono);
+  font-size: 0.72rem;
+  color: var(--muted);
+  letter-spacing: 0.08em;
+  padding-left: 1.1rem;
+}
+
+
+.posterhover:hover   img  {
+  transform: scale(1.07);
+}
+
+
+#rain-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 999;
+  opacity: 0;
+  transition: opacity 0.8s ease;
+}
+
+#dragon-grid {
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 999;
+  opacity: 0.15;
+}
+
+.rice-wrap {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.5rem;
+}
+
+.rice-wrap img {
+  flex-shrink: 0;
+}
+
+.rice-wrap .exp-body {
+  flex: 1;
+}
+
+
+.outlink {font-family:var(--ff-mono);font-size:0.78rem;color:var(--accent);text-decoration:none;}
+.outlink:hover{text-decoration:underline;}
+
+a{
+  font-family:var(--ff-mono);font-size:0.78rem;color:var(--muted);
+  text-decoration:none;padding:0.3rem 0.6rem;border-radius:4px;
+  transition:color 0.15s,background 0.15s;
+  display:flex;align-items:center;gap:6px;
+}