@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:wght@400;600&display=swap'); /* ====================== ALLMÄNNA STILAR ====================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Botten under sidan. ------------------------------------------------------------------- Färgen låg bara på , och body är precis så hög som sidan. Drar mobilens adressfält ihop sig växer vyn förbi den höjden, och det som lyste igenom var webbläsarens egen vita duk — en vit remsa i underkanten som kom och gick när man rullade. Färgen hör hemma på , som alltid täcker hela vyn. overscroll-behavior stoppar studsen i samma veva: utan den går det att dra fram samma vita remsa med fingret. */ html { background: #12100c; overscroll-behavior-y: none; } body { font-family: 'Crimson Text', serif; background: #1a1a1a; background-image: radial-gradient(circle at 25% 25%, #2d2d2d 0%, transparent 50%), radial-gradient(circle at 75% 75%, #2d2d2d 0%, transparent 50%), linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%); color: #d4af37; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; align-items: center; } /* ====================== LOGIN-SIDA STILAR ====================== */ /* Inloggningssidan bär spelets färger. ------------------------------------------------------------------- Sidan var byggd i en annan palett än resten: sadelbrunt (#8b4513), peru (#cd853f) och mörkt gullris (#b8860b), med glöd runt rubriken och ornament i hörnen. Den läste sig som orange, och den som loggat in möttes av något som inte såg ut som spelet hen just kommit till. Här används samma tokens som arket och klanvyn: nästan svart brunt som botten, en hårfin ram i #3d3527, guld till rubriker och dämpat linne till brödtext. Ingen glöd, inga hörnornament — det som skiljer sidorna åt ska vara innehållet. Reglerna hänger på .login-page och rör därför inget annat. */ .login-page { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: #12100c; background-image: /* Storleken står utskriven. Ett sken utan mått tar sin utsträckning ur rutans proportioner, så samma regel ger en cirkel på en telefon och en utdragen strimma på en bred skärm — och den skarva syns. */ radial-gradient(circle 42rem at 50% 0%, rgba(212, 175, 55, 0.07) 0%, rgba(212, 175, 55, 0.03) 45%, transparent 75%), linear-gradient(180deg, #1a1611 0%, #12100c 100%); color: #ddd5c2; } .login-container { width: 100%; max-width: 28rem; } /* Rubriken är centrerad, med lådans indrag. ------------------------------------------------------------------- Indraget står kvar fast texten är centrerad: det håller underrubriken inom samma bredd som lådans innehåll, så att den bryter rad på samma ställe. Det var *det* som saknades förut, inte centreringen. */ .login-header { text-align: center; margin-bottom: 1.7rem; padding: 0 1.3rem; } .login-header h1 { font-family: 'Cinzel', serif; font-size: clamp(2.5rem, 11vw, 3.5rem); font-weight: 700; letter-spacing: 0.18em; color: #d4af37; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); } .login-header p { margin-top: 0.6rem; font-size: 1.08rem; font-style: italic; color: #9c9080; } /* Lådan är ett

, och sidfoten är en