/* Rabbla – formgivning Palett hämtad från SAOL:s blå klotband med guldtryck: pärm #16294D, saolblå #1E3A6E, papper #F6F1E3, guld #C9A227, bläck #1C1B18 */ :root { --pärm: #16294D; --saolblå: #1E3A6E; --saolblå-ljus: #2C4D8C; --papper: #F6F1E3; --papper-skugga: #DDD3BC; --guld: #C9A227; --guld-ljus: #E6C75A; --bläck: #1C1B18; --grönt: #3E7C4F; --rött: #A8453A; --dis: rgba(246, 241, 227, 0.55); --radie: 10px; --meny-bg: rgba(13, 22, 45, 0.94); } /* ---- Universella färgteman (sätts via data-tema på ) ---- */ :root[data-tema="rod"] { --pärm: #3A1414; --saolblå: #6E1E1E; --saolblå-ljus: #8C2C2C; --papper: #F6EFE3; --papper-skugga: #DDCBBC; --guld: #C97A22; --guld-ljus: #E6A45A; --bläck: #1C1818; --dis: rgba(246,239,227,0.55); --meny-bg: rgba(40, 14, 14, 0.94); } :root[data-tema="gron"] { --pärm: #142A1C; --saolblå: #1E5236; --saolblå-ljus: #2C7049; --papper: #F1F6EC; --papper-skugga: #CBDDC2; --guld: #B79A22; --guld-ljus: #D8C75A; --bläck: #181C18; --dis: rgba(241,246,236,0.55); --meny-bg: rgba(13, 30, 18, 0.94); } :root[data-tema="lila"] { --pärm: #241440; --saolblå: #3E1E6E; --saolblå-ljus: #5A2C8C; --papper: #F2EFF6; --papper-skugga: #D3C8DD; --guld: #B7229A; --guld-ljus: #D85AC7; --bläck: #1C181C; --dis: rgba(242,239,246,0.55); --meny-bg: rgba(28, 14, 46, 0.94); } :root[data-tema="rosa"] { --pärm: #3A1426; --saolblå: #7A1E52; --saolblå-ljus: #9C2C6E; --papper: #F9EEF3; --papper-skugga: #DDC2D0; --guld: #D14E8C; --guld-ljus: #F2A0C4; --bläck: #1C181A; --dis: rgba(249,238,243,0.55); --meny-bg: rgba(40, 14, 34, 0.94); } :root[data-tema="orange"] { --pärm: #3A1E0A; --saolblå: #8C4A16; --saolblå-ljus: #B26020; --papper: #F9F1E6; --papper-skugga: #DDCBB4; --guld: #D07A1E; --guld-ljus: #F2B45A; --bläck: #1C1712; --dis: rgba(249,241,230,0.55); --meny-bg: rgba(40, 22, 10, 0.94); } :root[data-tema="gult"] { --pärm: #302A08; --saolblå: #6E5E14; --saolblå-ljus: #8C781E; --papper: #F8F4E2; --papper-skugga: #DDD5B4; --guld: #C9A81E; --guld-ljus: #F2D84A; --bläck: #1B1A12; --dis: rgba(248,244,226,0.5); --meny-bg: rgba(34, 28, 8, 0.94); } :root[data-tema="mork"] { --pärm: #0D0D10; --saolblå: #1A1A22; --saolblå-ljus: #2A2A36; --papper: #E8E8EC; --papper-skugga: #C0C0CA; --guld: #C9A227; --guld-ljus: #E6C75A; --bläck: #16161A; --dis: rgba(232,232,236,0.5); --meny-bg: rgba(10, 10, 14, 0.96); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--pärm); background-image: radial-gradient(ellipse at 50% -10%, var(--saolblå) 0%, var(--pärm) 65%); color: var(--papper); font-family: "Inter", system-ui, sans-serif; min-height: 100vh; } /* ---- Topp ---- */ .topp { display: flex; align-items: center; justify-content: space-between; max-width: 880px; margin: 0 auto; padding: 18px 16px 6px; } .titelblock { text-align: center; } .titel { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 2.1rem; letter-spacing: 0.06em; margin: 0; color: var(--guld-ljus); text-transform: uppercase; } .undertitel { margin: 2px 0 0; font-size: 0.8rem; color: var(--dis); letter-spacing: 0.08em; } .ikonknapp { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(246, 241, 227, 0.35); background: transparent; color: var(--papper); font-size: 1.1rem; cursor: pointer; } .ikonknapp:hover { border-color: var(--guld-ljus); color: var(--guld-ljus); } .ikonknapp.liten { width: 34px; height: 34px; font-size: 1rem; } /* ---- Layout ---- */ .layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(220px, 320px); gap: 28px; justify-content: center; max-width: 880px; margin: 0 auto; padding: 8px 16px 48px; } /* ---- Spelyta ---- */ .ordrad { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 30px; } .aktuelltOrd { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0; min-width: 2ch; text-align: center; color: var(--guld-ljus); } .bräde { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; aspect-ratio: 1; max-width: 420px; margin: 0 auto 0; padding: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(201, 162, 39, 0.35); border-radius: 16px; touch-action: none; user-select: none; -webkit-user-select: none; } .bricka { position: relative; display: flex; align-items: center; justify-content: center; border-radius: var(--radie); background: linear-gradient(160deg, #FBF7EC 0%, var(--papper) 55%, var(--papper-skugga) 100%); color: var(--bläck); font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: clamp(1.6rem, 6.5vw, 2.3rem); text-transform: uppercase; box-shadow: 0 3px 0 var(--papper-skugga), 0 5px 10px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.08s ease, background 0.12s ease; } .bricka.vald { background: linear-gradient(160deg, var(--guld-ljus), var(--guld)); transform: translateY(2px); box-shadow: 0 1px 0 #8a6d12, 0 3px 6px rgba(0, 0, 0, 0.35); } .bricka.död { background: #6b6f78; color: #3c3f45; box-shadow: 0 3px 0 #50535a, 0 5px 10px rgba(0, 0, 0, 0.3); } .bricka .hörn { position: absolute; top: 4px; right: 7px; font-family: "Inter", sans-serif; font-size: 0.68rem; font-weight: 600; color: var(--saolblå); } .bricka.död .hörn { color: #3c3f45; } @keyframes blinkGrönt { 0%,100% { } 30% { background: #BFE3C6; } } @keyframes skaka { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .bräde.rätt .bricka.vald { animation: blinkGrönt 0.45s ease; } .bräde.fel { animation: skaka 0.3s ease; } .meddelande { text-align: center; min-height: 1.4em; margin: 10px 0 0; font-size: 0.95rem; color: var(--dis); } .meddelande.grönt { color: #9FD8AC; } .meddelande.rött { color: #E5A79E; } /* ---- Poäng & utmaningar ---- */ .poängrad { display: flex; align-items: center; gap: 18px; margin-top: 14px; } .poängblock { text-align: center; min-width: 64px; } .poängtal { display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.9rem; font-weight: 700; color: var(--guld-ljus); } .poängetikett { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dis); } .utmaningar { flex: 1; } .mätare { position: relative; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(246, 241, 227, 0.2); } .mätarfyllning { height: 100%; width: 0%; border-radius: 5px; background: linear-gradient(90deg, var(--guld), var(--guld-ljus)); transition: width 0.4s ease; position: relative; } /* Spelarens avatar i spetsen på den gula markören */ .matar-avatar { position: absolute; right: 0; top: 50%; width: 24px; height: 24px; transform: translate(50%, -50%); border-radius: 50%; object-fit: cover; border: 2px solid var(--guld-ljus); box-shadow: 0 1px 4px rgba(0,0,0,0.4); background: var(--pärm); z-index: 3; pointer-events: none; } /* Vänners avatarer på mätaren (delat dagspussel) */ .van-markor { position: absolute; left: 0; top: calc(-22px - var(--rad, 0) * 7px); transform: translateX(-50%); z-index: 2; pointer-events: auto; transition: left 0.4s ease; } .van-markor img { display: block; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 2px solid var(--saolblå-ljus, var(--dis)); box-shadow: 0 1px 4px rgba(0,0,0,0.45); background: var(--pärm); } .van-markor.hoppar img { animation: vanHopp 0.8s ease; } .cirkel-framsteg { margin: 14px 6px 22px; } .cirkel-klarknappar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; } .cirkel-klarknappar .knapp { text-decoration: none; } @keyframes vanHopp { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(-11px) scale(1.12); } 50% { transform: translateY(0) scale(1); } 68% { transform: translateY(-5px) scale(1.05); } 100% { transform: translateY(0) scale(1); } } .milstolpe { position: absolute; top: -5px; width: 18px; height: 18px; transform: translateX(-50%); border-radius: 50%; background: var(--pärm); border: 2px solid var(--dis); display: flex; align-items: center; justify-content: center; font-size: 0.6rem; } .milstolpe.klar { border-color: var(--guld-ljus); background: var(--guld); } .milstolpe.klar span::after { content: "★"; color: var(--pärm); } .utmaningstext { margin: 8px 0 0; font-size: 0.8rem; color: var(--dis); } .knapp { border: 1px solid var(--guld); background: transparent; color: var(--guld-ljus); font: 600 0.85rem "Inter", sans-serif; letter-spacing: 0.06em; padding: 9px 18px; border-radius: 999px; cursor: pointer; } .knapp:hover { background: var(--guld); color: var(--pärm); } /* ---- Panel: hittade ord ---- */ .panel { background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(246, 241, 227, 0.15); border-radius: 16px; padding: 16px; align-self: start; max-height: 78vh; overflow: auto; } .panelhuvud h2 { font-family: "Darumadrop One", "Fraunces", Georgia, serif; font-size: 1.05rem; margin: 0 0 10px; color: var(--papper); } #ordRäknare { color: var(--guld-ljus); font-weight: 500; } .flikar { display: flex; gap: 6px; margin-bottom: 12px; } .flik { border: 1px solid rgba(246, 241, 227, 0.25); background: transparent; color: var(--dis); font-size: 0.75rem; padding: 4px 12px; border-radius: 999px; cursor: pointer; } .flik.aktiv { background: var(--papper); color: var(--pärm); border-color: var(--papper); font-weight: 600; } .ordgrupp { margin-bottom: 12px; } .ordgrupp h3 { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dis); margin: 0 0 5px; border-bottom: 1px solid rgba(246, 241, 227, 0.12); padding-bottom: 3px; } .ordgrupp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .ordgrupp a { color: var(--papper); text-decoration: none; font-size: 0.88rem; padding: 2px 8px; border-radius: 6px; background: rgba(246, 241, 227, 0.08); } .ordgrupp a:hover { background: var(--guld); color: var(--pärm); } /* ---- Modaler ---- */ .modal { border: 1px solid var(--guld); border-radius: 16px; background: var(--papper); color: var(--bläck); max-width: 440px; padding: 26px 28px; font-family: "Inter", sans-serif; } .modal::backdrop { background: rgba(10, 18, 38, 0.7); } .modal h2 { font-family: "Darumadrop One", "Fraunces", Georgia, serif; margin-top: 0; color: var(--saolblå); } .regler { padding-left: 20px; } .regler li { margin-bottom: 6px; } .finstilt { font-size: 0.8rem; color: #5a5648; } .modal .knapp { border-color: var(--saolblå); color: var(--saolblå); margin-top: 8px; } .modal .knapp:hover { background: var(--saolblå); color: var(--papper); } .statsrad { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; } .statsrad .stat { text-align: center; } .statsrad .tal { display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; font-weight: 700; color: var(--saolblå); } .statsrad .etikett { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #5a5648; } /* ---- Fokus & rörelse ---- */ :focus-visible { outline: 2px solid var(--guld-ljus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---- Mobil ---- */ @media (max-width: 720px) { .layout { grid-template-columns: 1fr; gap: 18px; padding-bottom: 32px; } .panel { max-height: none; } .titel { font-size: 1.7rem; } } /* ---- Konton, banner, gemenskap ---- */ .toppknappar { display: flex; gap: 6px; } .banner { max-width: 880px; margin: 4px auto 0; padding: 8px 16px; text-align: center; font-size: 0.85rem; color: var(--guld-ljus); background: rgba(201, 162, 39, 0.12); border-top: 1px solid rgba(201, 162, 39, 0.3); border-bottom: 1px solid rgba(201, 162, 39, 0.3); } .länkknapp { background: none; border: none; padding: 0; color: var(--guld-ljus); font: inherit; text-decoration: underline; cursor: pointer; } .modal label { display: block; margin: 10px 0; font-size: 0.85rem; } .modal input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; border: 1px solid #b9b09a; border-radius: 8px; background: #fff; } .formfel { color: var(--rött); font-size: 0.85rem; min-height: 1.2em; } .modal .flikar { margin-bottom: 14px; } .modal .flik { color: #5a5648; border-color: #b9b09a; } .modal .flik.aktiv { background: var(--saolblå); color: var(--papper); border-color: var(--saolblå); } .knapp.sekundär { border-color: #b9b09a; color: #5a5648; } .profil { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .profil img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--guld); } .topplista { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .topplista th, .topplista td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e2dac6; } .topplista th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5a5648; } .topplista img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; } .livelogg { list-style: none; margin: 10px 0; padding: 0; max-height: 50vh; overflow: auto; } .livelogg li { padding: 6px 4px; border-bottom: 1px solid #e2dac6; font-size: 0.88rem; } .livelogg .klockan { color: #8a8470; font-size: 0.75rem; margin-right: 8px; } .livelogg li.ny { background: #f3ecd6; } .hemflode li.ny { background: rgba(201, 162, 39, 0.16); } /* ---- Fas 1: rubrikfont, broar, effekter, definitioner ---- */ .titel { font-family: "Darumadrop One", "Fraunces", Georgia, serif; letter-spacing: 0.04em; } .bräde { position: relative; } #broar { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } #broar line { stroke: var(--guld); stroke-width: 7; stroke-linecap: round; opacity: 0.85; } #broar line.levande { opacity: 0.45; stroke-dasharray: 2 9; } .bricka { z-index: 1; } .bricka.död { cursor: not-allowed; } .igårRad { text-align: center; margin: 12px 0 0; } .igårRad .länkknapp { font-size: 0.85rem; color: var(--dis); } .igårRad .länkknapp:hover { color: var(--guld-ljus); } /* Ordexplosion */ .partikel { position: fixed; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; z-index: 99; } .ordpop { position: fixed; transform: translate(-50%, -50%); font-family: "Fraunces", Georgia, serif; font-weight: 700; color: var(--guld-ljus); text-shadow: 0 2px 8px rgba(0,0,0,0.6); pointer-events: none; z-index: 99; animation: ordpop 0.55s ease-out forwards; } @keyframes ordpop { 0% { opacity: 0; scale: 0.5; } 25% { opacity: 1; scale: 1.25; } 100% { opacity: 0; scale: 1; translate: 0 -34px; } } /* Konfetti */ .konfettibit { position: fixed; top: -14px; width: 9px; height: 14px; pointer-events: none; z-index: 98; animation: konfettifall linear forwards; } @keyframes konfettifall { to { transform: translateY(105vh) rotate(720deg); opacity: 0.7; } } /* Definitionsruta */ .definition { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(246, 241, 227, 0.95); color: var(--bläck); font-size: 0.85rem; line-height: 1.45; } .definition h4 { margin: 0 0 6px; font-family: "Fraunces", Georgia, serif; font-size: 1rem; color: var(--saolblå); text-transform: uppercase; letter-spacing: 0.06em; } .definition .källa { display: block; margin-top: 8px; font-size: 0.72rem; color: #5a5648; } .definition .källa a { color: var(--saolblå); } .definition .stängDef { float: right; background: none; border: none; cursor: pointer; font-size: 1rem; color: #5a5648; } .modal .definition { background: #fff; border: 1px solid #e2dac6; } /* Livelogg med utfallsfärger */ .livelogg li { border-radius: 6px; margin-bottom: 3px; border-bottom: none; padding: 7px 9px; } .livelogg li.h-ord { background: rgba(62, 124, 79, 0.18); } .livelogg li.h-dubblett{ background: rgba(201, 162, 39, 0.18); } .livelogg li.h-lost { background: rgba(201, 162, 39, 0.32); font-weight: 600; } .livelogg li.h-delmal { background: rgba(44, 77, 140, 0.25); } .livelogg li.h-nyreg { background: rgba(246, 241, 227, 0.1); } .modal .livelogg li.h-ord { background: #E2F0E5; } .modal .livelogg li.h-dubblett { background: #F6ECC8; } .modal .livelogg li.h-lost { background: #F3E3A8; font-weight: 600; } .modal .livelogg li.h-delmal { background: #DFE8F6; } .modal .livelogg li.h-nyreg { background: #EFEAD9; } .livelogg li.h-fel { background: rgba(168, 69, 58, 0.18); } .modal .livelogg li.h-fel { background: #F0E2E2; } .loggveg { width: 22px; height: 22px; vertical-align: middle; object-fit: contain; } .hemspelare { display: flex; flex-wrap: wrap; gap: 6px; } .hemspelare-ava { display: inline-block; line-height: 0; } .hemspelare-ava img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--papper-skugga); object-fit: cover; display: block; } .hemspelarpanel h2 { margin-bottom: 10px; } .igårListor .ordgrupp a.missat { background: rgba(168, 69, 58, 0.12); color: #7c2f26; } .modal .ordgrupp h3 { color: #5a5648; border-color: #e2dac6; } .modal .ordgrupp a { background: #efead9; color: var(--saolblå); } .modal .ordgrupp a:hover { background: var(--saolblå); color: #fff; } @media (prefers-reduced-motion: reduce) { .partikel, .konfettibit, .ordpop { display: none; } } /* ---- Fas 2: profilredigering, chatt, vänner ---- */ .kryssrad { display: flex !important; gap: 8px; align-items: flex-start; font-size: 0.82rem !important; } .kryssrad input { width: auto !important; margin-top: 2px; } .kryssrad a { color: var(--saolblå); } /* Kompakt registreringsformulär + live-status + banan-captcha */ .regform label { margin: 7px 0; } .faltrad { display: flex; align-items: center; gap: 8px; } .faltrad input { flex: 1; } .faltstatus { flex: none; width: 1.3em; text-align: center; font-weight: 700; font-size: 1.05rem; line-height: 1; margin-top: 4px; } .faltstatus.ok { color: #1f8b4c; } .faltstatus.fel { color: #c0392b; } .faltstatus.vantar { color: #9a937e; } .kryssrad.enrad { align-items: center; font-size: 0.8rem !important; } .captcha { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; flex-wrap: wrap; } .captchafraga { font-weight: 600; font-size: 0.9rem; } .captchaval { display: flex; gap: 8px; } .captchaknapp { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid #b9b09a; border-radius: 999px; cursor: pointer; background: #fff; line-height: 1; } .captchaknapp span { font-size: 1.25rem; } .captchaknapp input { width: auto !important; display: inline-block; margin: 0; } .captchaknapp:has(input:checked) { border-color: var(--saolblå); box-shadow: 0 0 0 2px rgba(44, 77, 140, 0.25); } /* Smalare fält (75 %) så grön bock / rött kryss får plats bredvid */ .regform input { width: 75%; max-width: 360px; } .faltrad { justify-content: flex-start; } .faltrad input { flex: 0 0 75%; max-width: 360px; } .modal textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; border: 1px solid #b9b09a; border-radius: 8px; background: #fff; resize: vertical; } .modal select { padding: 5px 8px; font: inherit; border: 1px solid #b9b09a; border-radius: 6px; background: #fff; } .syngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-bottom: 10px; } .syngrid label { font-size: 0.78rem; margin: 4px 0; } .rankmärke { display: inline-block; padding: 1px 9px; border-radius: 99px; background: var(--guld); color: var(--pärm); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; vertical-align: middle; } .iflik form { padding: 10px 0; border-bottom: 1px solid #e2dac6; } .iflik form:last-child { border-bottom: none; } .vänrad { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #e2dac6; font-size: 0.88rem; } .vänrad img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .vänrad .namn { flex: 1; } .vänrad a { color: var(--saolblå); text-decoration: none; } .vänrad button { font-size: 0.72rem; padding: 4px 10px; } .chattmodal { max-width: 520px; width: 92vw; } .chattlista { list-style: none; margin: 0 0 10px; padding: 8px; height: 46vh; overflow-y: auto; border-radius: 10px; background: var(--pärm); /* fallback för gamla webbläsare */ background: color-mix(in srgb, var(--saolblå) 55%, #000 12%); border: 1px solid rgba(246, 241, 227, 0.18); } .chattlista li { padding: 5px 6px; font-size: 0.88rem; line-height: 1.4; color: var(--papper); } .chattlista img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: -4px; margin-right: 4px; } .chattlista .namn { font-weight: 600; color: var(--guld-ljus); text-decoration: none; } .chattlista .namn:hover { text-decoration: underline; } .chattlista .klockan { color: var(--dis); font-size: 0.72rem; margin-left: 6px; } .chattform { display: flex; gap: 8px; } .chattform input { flex: 1; min-width: 0; margin-top: 0 !important; } /* [3] PC: enkel emoji-knapp mellan fält och Skicka, med popover. Döljs på mobil. */ .cb-emojiknapp { flex: 0 0 auto; align-self: stretch; width: 42px; border: 1px solid rgba(246, 241, 227, 0.25); border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: var(--papper); font-size: 1.2rem; line-height: 1; cursor: pointer; } .cb-emojiknapp:hover { background: rgba(255, 255, 255, 0.16); } .cb-emojipop { position: fixed; z-index: 3000; display: flex; flex-wrap: wrap; gap: 2px; max-width: 300px; padding: 6px; background: var(--meny-bg, rgba(20, 24, 40, .96)); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); } /* Måste vinna över display:flex ovan – annars döljs aldrig popovern via hidden. */ .cb-emojipop[hidden] { display: none; } .cb-emojipop-em { background: transparent; border: 0; cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 5px 6px; border-radius: 8px; } .cb-emojipop-em:hover { background: rgba(255, 255, 255, .12); } @media (max-width: 720px) { .cb-emojiknapp { display: none !important; } } /* Emojiväljare under chatten – endast PC. Döljs på mobil längre ned. */ .emojirad { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .emojirad:empty { display: none; } .emojirad .emojiknapp { font-size: 1.2rem; line-height: 1; padding: 4px 6px; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background-color .1s, border-color .1s, transform .05s; } .emojirad .emojiknapp:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); } .emojirad .emojiknapp:active { transform: scale(.92); } /* ===== Inbyggd chatt – WhatsApp-stil (pratbubblor, reaktioner, svar) ===== */ /* När modulen tagit över får listan klassen .cb-lista → kolumn med bubblor. */ .chattlista.cb-lista { display: flex; flex-direction: column; gap: 8px; padding: 12px; } .chattlista.cb-lista li.cb-rad { padding: 0; margin: 0; font-size: inherit; line-height: 1.35; } .cb-tom { text-align: center; } .cb-rad { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; } .cb-rad.dem { justify-content: flex-start; } .cb-rad.jag { justify-content: flex-end; } .cb-ava { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #2C4D8C; margin: 0; vertical-align: baseline; } .cb-bubbla { position: relative; max-width: min(76%, 460px); padding: 7px 11px 8px; border-radius: 16px; background: var(--cbg, #2C6FE0); color: var(--ctxt, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); word-break: break-word; overflow-wrap: anywhere; -webkit-touch-callout: none; /* inget iOS-preview vid långtryck */ } .cb-namn { -webkit-touch-callout: none; } /* På touch-enheter: stäng av markering/förstoringsglas så långtryck bara ger vår Reagera/Svara-meny (ej native textmarkering). Datorn behåller markering. */ @media (hover: none) { .cb-rad, .cb-bubbla, .cb-namn { -webkit-user-select: none; -moz-user-select: none; user-select: none; } } .cb-rad.dem .cb-bubbla { border-bottom-left-radius: 5px; } .cb-rad.jag .cb-bubbla { border-bottom-right-radius: 5px; } .cb-huvud { display: block; margin-bottom: 2px; line-height: 1.15; } .cb-huvud-jag { text-align: right; } .cb-namn { display: inline; font-weight: 700; font-size: .78rem; color: inherit; opacity: .95; text-decoration: none; } .cb-namn:hover { text-decoration: underline; } .cb-text { white-space: pre-wrap; } .cb-tid { font-size: .68rem; opacity: .62; font-weight: 500; } /* Citat (nästlat svar) inuti bubblan */ .cb-citat { display: block; margin: 0 0 5px; padding: 4px 8px; border-left: 3px solid currentColor; border-radius: 6px; background: rgba(255, 255, 255, .16); font-size: .78rem; line-height: 1.25; } .cb-citat-namn { display: block; font-weight: 700; opacity: .95; } .cb-citat-text { display: block; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } /* ⋮-knappen (på bubblans inre sida) */ .cb-mer-knapp { flex: 0 0 auto; align-self: center; width: 22px; height: 26px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--dis); font-size: 1.15rem; line-height: 1; border-radius: 6px; opacity: 0; transition: opacity .12s, color .12s, background-color .12s; } .cb-rad:hover .cb-mer-knapp { opacity: 1; } .cb-mer-knapp:hover { color: var(--papper); background: rgba(255, 255, 255, .1); } @media (hover: none) { .cb-mer-knapp { opacity: .55; } } /* Nedtryckt/aktiverad effekt (klick + long-press) */ .cb-rad.nedtryckt .cb-bubbla { filter: brightness(1.12); transform: scale(.98); transition: transform .08s ease; } /* Reaktioner i bubblans underkant */ .cb-reaktioner { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px -3px -3px; padding-top: 2px; } .cb-pill { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: 11px; cursor: pointer; background: rgba(0, 0, 0, .22); border: 1px solid transparent; color: inherit; font-size: .82rem; line-height: 1.5; } .cb-pill b { font-weight: 700; font-size: .72rem; } .cb-pill.min { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .5); } .cb-pill:active { transform: scale(.94); } /* Svarsbanner ovanför inmatningen */ .cb-svarbanner { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; padding: 6px 10px; border-left: 3px solid var(--guld-ljus); border-radius: 8px; background: rgba(255, 255, 255, .08); font-size: .82rem; color: var(--papper); } .cb-svarbanner-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-svarbanner-x { flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; color: var(--dis); font-size: .95rem; line-height: 1; padding: 2px 4px; } .cb-svarbanner-x:hover { color: var(--papper); } /* Flytande lager: meny + reaktionsväljare + egen-emoji */ .cb-lager { position: fixed; z-index: 3000; background: var(--meny-bg, rgba(20, 24, 40, .96)); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); } .cb-meny { display: flex; flex-direction: column; min-width: 132px; } .cb-menyval { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; cursor: pointer; color: var(--papper); font-size: .9rem; text-align: left; padding: 8px 10px; border-radius: 8px; } .cb-menyval:hover { background: rgba(255, 255, 255, .12); } .cb-reaktrad { display: flex; gap: 2px; } .cb-remoji { background: transparent; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 5px 7px; border-radius: 10px; transition: transform .08s, background-color .1s; } .cb-remoji:hover { background: rgba(255, 255, 255, .12); transform: scale(1.12); } .cb-remoji:active { transform: scale(.95); } .cb-remoji.cb-mer { font-size: 1.25rem; color: var(--dis); } .cb-egengrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-width: 320px; max-height: 220px; overflow-y: auto; } .cb-egenemoji { background: transparent; border: 0; cursor: pointer; font-size: 1.35rem; line-height: 1; padding: 5px; border-radius: 8px; } .cb-egenemoji:hover { background: rgba(255, 255, 255, .12); } @media (max-width: 560px) { .cb-bubbla { max-width: 82%; } .cb-egengrid { grid-template-columns: repeat(6, 1fr); } } /* Mobilt tangentbordsläge för inbyggda chatten: "Skriv ett meddelande" + Skicka närmast tangentbordet, bottenmeny/header dolda, konversationen packad ovanför. Klassen sätts av chatt-inbyggd.js när chattfältet fokuseras (speglar spelens sk-tangentbord men med egna variabler så det inte krockar). */ @media (max-width: 720px) { body.cb-tangentbord { overflow: hidden; padding-bottom: 0 !important; } body.cb-tangentbord .huvudmeny, body.cb-tangentbord .topp, body.cb-tangentbord header.topp, body.cb-tangentbord #loginBanner, body.cb-tangentbord .onlinerad, body.cb-tangentbord .onlinelista { display: none !important; } body.cb-tangentbord #chattInbyggd { position: fixed; left: 0; right: 0; top: var(--cbvtop, 0px); height: var(--cbvh, 100dvh); margin: 0; padding: 8px 12px; z-index: 60; display: flex !important; flex-direction: column; background-color: var(--pärm); background-image: radial-gradient(ellipse at 50% -10%, var(--saolblå) 0%, var(--pärm) 65%); } body.cb-tangentbord #chattInbyggd > h2 { flex: 0 0 auto; margin: 2px 0 6px; } body.cb-tangentbord #chattInbyggd .chattlista { flex: 1 1 auto; height: auto !important; min-height: 0; margin: 0 0 8px; } body.cb-tangentbord #chattInbyggd .cb-svarbanner { flex: 0 0 auto; margin: 0 0 6px; } body.cb-tangentbord #chattInbyggd .chattform { flex: 0 0 auto; margin: 0; } body.cb-tangentbord #chattInbyggd #chattFel { flex: 0 0 auto; margin: 4px 0 0; } body.cb-tangentbord #chattInbyggd .emojirad { display: none !important; } } /* Profilsidan */ .profil.stor img { width: 72px; height: 72px; } .profilsida .rankrad { margin: 4px 0 0; color: #5a5648; } .panel.profilsida { color: var(--bläck); background: var(--papper); } .panel.profilsida h2, .panel.profilsida h3 { color: var(--saolblå); font-family: "Darumadrop One", "Fraunces", Georgia, serif; } /* Profilomslag (header) överst – fyller panelens bredd, ev. förminskad bild. */ .profil-omslag { margin: -16px -16px 0; /* full bredd ut mot panelkanterna (motverkar padding) */ height: 156px; border-radius: 16px 16px 0 0; background-color: var(--saolblå); background-size: cover; background-position: center; } .profil-omslag.utan-bild { /* inget valt omslag: tonad färg efter temat */ background-image: linear-gradient(135deg, var(--saolblå-ljus) 0%, var(--saolblå) 55%, var(--guld) 175%); } .profilsida .profil.stor { align-items: flex-end; margin-bottom: 14px; } .profilsida .profil.stor .avatar-wrap { margin-top: -52px; } /* avataren reser sig in i omslaget */ .profilsida .profil.stor .avatar-wrap > img:not(.kompanjon-overlay) { border: 3px solid var(--papper); box-shadow: 0 3px 10px rgba(0,0,0,0.3); background: var(--papper); } @media (max-width: 560px) { .profil-omslag { height: 118px; } } .beskrivning { background: #fdfbf4; border: 1px solid #e2dac6; border-radius: 10px; padding: 12px 14px; } /* Statusväljare i konto */ .statusemojis { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .statusemoji { font-size: 1.4rem; line-height: 1; padding: 6px 8px; border: 2px solid transparent; border-radius: 10px; background: rgba(0,0,0,0.04); cursor: pointer; } .statusemoji:hover { background: rgba(201, 162, 39, 0.12); } .statusemoji.vald { border-color: var(--guld, #c9a227); background: rgba(201, 162, 39, 0.18); } #statusForm input[type="text"] { width: 100%; box-sizing: border-box; margin-bottom: 8px; } /* Status-raden på publika profilen */ .statusrad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fdfbf4; border: 1px solid #e2dac6; border-radius: 10px; padding: 10px 12px; margin-top: 10px; } .statusrad .status-emoji { font-size: 1.5rem; line-height: 1; } .statusrad .status-text { font-size: 1.02rem; } /* Kompanjon: overlay ovanpå avatar */ .avatar-wrap { position: relative; display: inline-block; line-height: 0; } .kompanjon-overlay { position: absolute; right: -6px; bottom: -6px; width: 46%; max-width: 60px; height: auto; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); } /* Starkare selektor så overlayn inte ärver .profil.stor img-storleken (full storlek-buggen) */ .profil .avatar-wrap .kompanjon-overlay { width: 42%; max-width: 36px; height: auto; right: -4px; bottom: -4px; background: transparent; border: none; } /* Liten overlay på menyns profilavatar (slår .menyikon img) */ #menyProfilIkon .kompanjon-overlay { width: 62%; max-width: 14px; height: auto; right: -3px; bottom: -3px; } /* Kompanjon: väljare i konto */ .komp-grupp { margin-bottom: 14px; } .komp-arttitel { margin: 6px 0; font-size: 0.98rem; } .komp-rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; } .komp-ruta { position: relative; padding: 6px; border: 2px solid transparent; border-radius: 12px; background: rgba(0,0,0,0.04); cursor: pointer; } .komp-ruta:hover { background: rgba(201, 162, 39, 0.12); } .komp-ruta.vald { border-color: var(--guld, #c9a227); background: rgba(201, 162, 39, 0.18); } .komp-ruta.agd::after { content: "★"; position: absolute; top: 2px; right: 5px; font-size: 0.8rem; color: var(--guld, #c9a227); } .komp-ruta img { width: 100%; height: auto; display: block; } .komp-rutnamn { display: block; font-size: 0.72rem; text-align: center; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .komp-vald-kort { display: flex; align-items: center; gap: 12px; } .komp-vald-bild { width: 84px; } .komp-stor { width: 84px; height: auto; } .komp-namn { font-weight: 600; } #kompNamnForm input[type="text"] { width: 100%; box-sizing: border-box; margin: 8px 0; } /* Infobanner – hover-kort över spelares avatar (PC). Hela bakgrunden färgas efter spelarens tema. */ .spelarkort { position: fixed; z-index: 9999; max-width: 260px; min-width: 200px; padding: 12px 14px; border-radius: 14px; background: var(--sk-bg, #1E3A6E); color: var(--sk-text, #F6F1E3); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 10px 30px rgba(0,0,0,0.34); font-size: 0.9rem; line-height: 1.35; } .spelarkort .sk-huvud { display: flex; align-items: center; gap: 10px; } .spelarkort .sk-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--sk-accent, #E6C75A); } .spelarkort .avatar-wrap { flex: none; } .spelarkort .kompanjon-overlay { width: 50%; max-width: 30px; right: -4px; bottom: -4px; } .spelarkort .sk-namnblock { display: flex; flex-direction: column; min-width: 0; } .spelarkort .sk-namn { font-size: 1.02rem; color: var(--sk-accent, #E6C75A); } .spelarkort .sk-meta { font-size: 0.78rem; opacity: 0.85; } .spelarkort .sk-status { margin-top: 9px; padding: 6px 9px; border-radius: 9px; background: rgba(255,255,255,0.13); } .spelarkort .sk-emoji { font-size: 1.05rem; } .spelarkort .sk-komp { margin-top: 7px; font-size: 0.8rem; opacity: 0.9; } /* Temapaletter: bakgrund = spelarens valda färg, accent = guld/ljus, ljus text */ .spelarkort[data-tema="bla"] { --sk-bg:#1E3A6E; --sk-accent:#E6C75A; --sk-text:#F6F1E3; } .spelarkort[data-tema="rod"] { --sk-bg:#6E1E1E; --sk-accent:#E6A45A; --sk-text:#F6EFE3; } .spelarkort[data-tema="gron"] { --sk-bg:#1E5236; --sk-accent:#D8C75A; --sk-text:#F1F6EC; } .spelarkort[data-tema="lila"] { --sk-bg:#3E1E6E; --sk-accent:#D85AC7; --sk-text:#F2EFF6; } .spelarkort[data-tema="rosa"] { --sk-bg:#7A1E52; --sk-accent:#F2A0C4; --sk-text:#F9EEF3; } .spelarkort[data-tema="orange"] { --sk-bg:#8C4A16; --sk-accent:#F2B45A; --sk-text:#F9F1E6; } .spelarkort[data-tema="gult"] { --sk-bg:#6E5E14; --sk-accent:#F2D84A; --sk-text:#F8F4E2; } .spelarkort[data-tema="mork"] { --sk-bg:#1A1A22; --sk-accent:#E6C75A; --sk-text:#E8E8EC; } /* "Händer just nu" – behåll .bredmodal-bredden (720px), begränsa bara höjden + scroll */ #loggModal { max-height: 78vh; } #loggModal .livelogg { max-height: 56vh; overflow-y: auto; margin: 0; } /* Konto: ikon-toppmeny (ersätter pill-flikarna som spillde över på mobil) */ .konto-toppmeny { position: sticky; top: 54px; z-index: 40; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; background: var(--meny-bg, var(--pärm)); backdrop-filter: blur(6px); margin: 0 0 14px; padding: 6px; border-radius: 0 0 12px 12px; border-bottom: 1px solid rgba(201, 162, 39, 0.4); } .kt-flik { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; color: var(--papper); padding: 7px 2px; border-radius: 12px; font-size: 0.7rem; line-height: 1.1; } .kt-flik .kt-ikon { font-size: 1.25rem; } .kt-flik img.kt-ikon { width: 24px; height: 24px; object-fit: contain; image-rendering: auto; display: block; } .kt-flik.aktiv { background: rgba(201, 162, 39, 0.18); color: var(--guld-ljus); font-weight: 600; } .kt-flik:hover { background: rgba(201, 162, 39, 0.10); } .kt-flik #vänBadge { font-size: 0.62rem; margin-left: 2px; } @media (max-width: 720px) { /* Mobil: fast längst upp på skärmen (utanför den beiga kortytan), precis som bottenmenyn fast i toppen */ .konto-toppmeny { position: fixed; top: 0; left: 0; right: 0; z-index: 60; margin: 0; border-radius: 0; padding: calc(6px + env(safe-area-inset-top)) 6px 6px; } body:has(.konto-toppmeny) { padding-top: 72px; } .kt-flik { font-size: 0.6rem; padding: 6px 1px; } .kt-flik .kt-ikon { font-size: 1.15rem; } .kt-flik img.kt-ikon { width: 21px; height: 21px; } } /* ===== Statistik-fliken ===== */ .streakrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 4px; } .streakkort { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 6px; border-radius: 12px; text-decoration: none; background: #fbf5e6; background: color-mix(in srgb, var(--papper) 82%, var(--guld) 18%); border: 1px solid rgba(201, 162, 39, 0.35); color: var(--bläck); } .streakkort:hover { border-color: var(--guld); } .streak-spel { font-size: 0.74rem; font-weight: 600; text-align: center; color: var(--saolblå); } .streak-dagar { font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: #b9b3a3; } .streak-dagar.aktiv { color: var(--guld-ljus); } .streak-enhet { font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: #5a5648; } .statgrafer { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; } .statgraf-ensam { margin-top: 4px; } @media (max-width: 560px) { .statgrafer { grid-template-columns: 1fr; } } .statkort { padding: 10px 12px 8px; border-radius: 12px; background: #fbf5e6; background: color-mix(in srgb, var(--papper) 86%, var(--guld) 14%); border: 1px solid rgba(201, 162, 39, 0.3); } .statkort-topp { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; } .statkort-spel { font-size: 0.82rem; font-weight: 600; color: var(--saolblå); text-decoration: none; } a.statkort-spel:hover { text-decoration: underline; } .statkort-sum { font-size: 0.68rem; color: #5a5648; white-space: nowrap; } .statsvg { display: block; width: 100%; height: 56px; } .profilsida .statsrad .tal { color: var(--saolblå); } .utmlista { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .utmlista li { background: #efead9; border-radius: 99px; padding: 5px 14px 5px 8px; font-size: 0.82rem; } .utmikon { font-size: 1rem; margin-right: 3px; } .profilknappar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .profilsida .finstilt { color: #5a5648; } .topplista .topplänk { color: var(--saolblå); text-decoration: none; } .topplista .topplänk:hover { text-decoration: underline; } /* ---- Fas 2-justeringar ---- */ /* 1: Kontomodal med fast storlek som fyller sidan */ .helmodal:not([open]) { display: none; } .helmodal { width: min(96vw, 760px); height: min(92dvh, 820px); max-width: none; display: flex; flex-direction: column; overflow-y: auto; } .helmodal #stängKonto { margin-top: auto; align-self: flex-start; } @media (max-width: 720px) { .helmodal { width: 100vw; height: 100dvh; border-radius: 0; border: none; padding: 20px 18px; } } /* 2: Röd plupp på kontoikonen */ .ikonknapp { position: relative; } .plopp[hidden] { display: none; } .plopp { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 99px; background: #C9372C; color: #fff; font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--pärm); } /* 4: Klickbara namn i loggar */ .livelogg .namn, .livelogg a { color: inherit; font-weight: 600; text-decoration: none; } .livelogg a:hover { text-decoration: underline; } .loggspel { color: var(--saolblå); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } .loggspel:hover { text-decoration-style: solid; } /* 6: Standardavatar – samma platser som riktiga avatarer */ .profil img, .chattlista img, .topplista img, .vänrad img { background: #2C4D8C; } /* 5: Aktivitetsloggen – en rad per händelse, oavsett namnlängd */ .livelogg li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bredare aktivitetslogg på större skärmar */ .bredmodal { width: min(94vw, 720px); max-width: none; } /* ---- Delmålsstege, utmärkelser, topplisteflikar ---- */ .sorterbar { cursor: pointer; user-select: none; } .sorterbar:hover { color: var(--saolblå); } .topplista .löst { color: var(--grönt); font-weight: 600; } .utm-grupp { margin-top: 8px; } .utm-grupp h3 { margin-bottom: 8px; } .utm-galleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; } .utm-galleri li { text-align: center; } .utm-galleri img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #efead9; padding: 4px; } .utm-galleri .utm-namn { display: block; font-size: 0.72rem; font-weight: 600; margin-top: 4px; } .utm-galleri .utm-datum { display: block; font-size: 0.65rem; color: #8a8470; } .utm-galleri li.utm-klickbar { cursor: pointer; } .utm-galleri li.utm-klickbar:hover img { box-shadow: 0 2px 10px rgba(120, 90, 30, 0.35); } .utmmodal .utm-modal-bild { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; background: #efead9; padding: 6px; } .utmmodal .utm-modal-beskr { margin: 10px 0 4px; color: #4a463a; font-size: 0.95rem; line-height: 1.5; } .utm-kategori { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: #8a8470; margin: 14px 0 6px; border-bottom: 1px solid #e2dac6; padding-bottom: 3px; } /* Spelare online */ .onlinelista { text-align: center; font-size: 0.85rem; color: var(--dis); margin: 4px auto 0; max-width: 420px; } .onlinelista:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; align-items: center; } .online-spelare { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--guld-ljus); background: rgba(246, 241, 227, 0.06); border: 1px solid rgba(201, 162, 39, 0.3); border-radius: 999px; padding: 2px 9px 2px 2px; transition: background 0.15s ease, border-color 0.15s ease; } .online-spelare:hover { background: rgba(246, 241, 227, 0.12); border-color: var(--guld-ljus); } .online-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--pärm); } .online-anon { color: var(--dis); align-self: center; } /* ---- Ordkuls universalmeny ---- */ .huvudmeny { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px; height: 54px; background: var(--meny-bg); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(201, 162, 39, 0.45); } .ordmärke { font-family: "Darumadrop One", "Fraunces", Georgia, serif; font-size: 1.45rem; color: var(--guld-ljus); text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; } .menypunkter { display: flex; gap: 6px; } .menypunkt { position: relative; display: flex; align-items: center; gap: 7px; border: none; background: transparent; color: var(--dis); font: 500 0.9rem "Inter", sans-serif; padding: 8px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; } .menypunkt:hover { color: var(--guld-ljus); background: rgba(246, 241, 227, 0.07); } .menypunkt.aktiv { color: var(--pärm); background: var(--guld); font-weight: 600; } .menyikon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .menyikon img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } /* inloggad: avatar (rund) */ .menypunkt .menyikon-bild { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; } /* målade menyikoner */ .menyikon-emoji { font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .menypunkt .plopp { top: 0; right: 4px; } /* Mobil: fast ikonmeny i botten med fyra boxar */ @media (max-width: 720px) { .huvudmeny { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-bottom: none; border-top: 1px solid rgba(201, 162, 39, 0.45); } .ordmärke { display: none; } /* En rad oavsett hur många punkter menyn har. repeat(7, 1fr) var hårdkodat och sprack den dag Ordby blev den åttonde – då hamnade den på egen rad under. grid-auto-flow:column lägger en kolumn per punkt automatiskt, så nästa nyhet inte heller bryter raden. minmax(0, 1fr) i stället för 1fr: ett bart 1fr har min-content som minsta mått, och då kan den längsta etiketten ("Notiser") tvinga isär rutnätet och spilla ut över skärmkanten. Nollan låter kolumnen bli smalare än sin text, och ellipsen nedan tar hand om resten. */ .menypunkter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; width: 100%; flex: 1; } .menypunkt { flex-direction: column; gap: 2px; padding: 7px 2px; border-radius: 12px; font-size: 0.66rem; min-width: 0; /* utan denna vägrar flex/grid-barnet krympa */ } /* Etiketten kapas hellre än att den knuffar ut grannen. */ .menynamn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menyikon { width: 28px; height: 28px; } .menypunkt .menyikon-bild { width: 28px; height: 28px; } .menyikon-emoji { font-size: 1.3rem; } .menypunkt .plopp { top: 2px; right: 14px; } body { padding-bottom: 84px; } } /* Mellanläget: surfplattor och små fönster, 721–900 px. Där gäller den sticky TOPPmenyn, och .menypunkter är en flexrad utan radbrytning – den spiller alltså ut över kanten i stället för att vika ner sig. Sju punkter plus ordmärket låg redan nära gränsen; Ordby som åttonde punkt tippar över den. Etiketterna göms hellre än att punkter klipps – ikonerna är desamma som i mobilmenyn och bär betydelsen på egen hand. Göms med klippning, inte display:none. display:none plockar bort texten ur tillgänglighetsträdet, och eftersom ikonbilden har alt="" hade länkarna då stått helt utan uppläsbart namn. Så här ser skärmläsaren dem fortfarande. */ @media (min-width: 721px) and (max-width: 900px) { .huvudmeny { gap: 10px; padding: 0 12px; } .menypunkter { gap: 4px; } .menypunkt { padding: 8px 11px; } .menypunkt .menynamn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* Riktigt smala telefoner (iPhone SE och nedåt). Åtta punkter får plats även här, men bara om etiketten och luften mellan dem krymper något. Ikonerna lämnas orörda – det är dem man träffar med tummen. */ @media (max-width: 400px) { .menypunkter { gap: 1px; } .menypunkt { padding: 7px 1px; font-size: 0.6rem; } .huvudmeny { padding-left: 4px; padding-right: 4px; } } /* Spelkort på Hem/Spel */ .spelkort { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 16px 18px; border-radius: 14px; background: rgba(246, 241, 227, 0.07); border: 1px solid rgba(201, 162, 39, 0.4); color: var(--papper); text-decoration: none; text-align: left; transition: transform 0.1s ease, border-color 0.1s ease; } .spelkort:hover { transform: translateY(-2px); border-color: var(--guld-ljus); } .spelkort.kommande { opacity: 0.55; } .spelkortikon { font-size: 1.9rem; } .spelkortinfo { flex: 1; display: flex; flex-direction: column; gap: 2px; } .spelkortinfo strong { font-family: "Fraunces", Georgia, serif; font-size: 1.1rem; } .spelkortinfo span { font-size: 0.84rem; color: var(--dis); } .spelkortpil { color: var(--guld-ljus); font-weight: 600; white-space: nowrap; } /* ---- Kontosidan (f.d. popup) ---- */ .kontosida { position: static; width: min(96vw, 760px); height: auto; margin: 24px auto; display: block; } /* ---- Spelgrid 3x3 med bilder ---- */ .spelgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; } @media (max-width: 560px) { .spelgrid { grid-template-columns: repeat(2, 1fr); } } .spelruta { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid rgba(201, 162, 39, 0.4); text-decoration: none; background: rgba(0, 0, 0, 0.25); transition: transform 0.1s ease, border-color 0.1s ease; -webkit-user-select: none; user-select: none; /* hindrar att drag startar textmarkering -> Chrome auto-scroll */ } .spelruta img { -webkit-user-drag: none; user-select: none; } .spelruta:hover { transform: translateY(-3px); border-color: var(--guld-ljus); } .spelruta img { width: 100%; height: 100%; object-fit: cover; display: block; } .spelruta .spelnamn { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(13, 22, 45, 0.92)); color: var(--guld-ljus); font: 700 1rem "Fraunces", Georgia, serif; text-align: center; } .spelruta.kommande { opacity: 0.45; pointer-events: none; } /* ---- Inbyggd chatt under spelet ---- */ .inbyggdChatt { max-width: 420px; margin: 22px auto 0; } .inbyggdChatt h2 { font-family: "Darumadrop One", "Fraunces", Georgia, serif; font-size: 1.05rem; margin: 0 0 8px; } .inbyggdChatt .chattlista { height: 260px; } .inbyggdChatt .chattform input { background: rgba(255, 255, 255, 0.1); color: var(--papper); border: 1px solid rgba(246, 241, 227, 0.25); border-radius: 8px; padding: 9px 11px; font: inherit; width: 100%; } .inbyggdChatt .chattform input::placeholder { color: var(--dis); } .chattLoginText { text-align: center; font-size: 0.88rem; color: var(--dis); } .chattLoginText a { color: var(--guld-ljus); } /* Chatten på välkomstsidan – full panelbredd i stället för smal, centrerad kolumn */ .hemchatt { max-width: none; margin: 4px 0 0; } .hemchatt .chattlista { height: 300px; } /* Fristående chattsida */ .chattsida .chattlista { height: 56vh; } /* ---- Statistik-widget på publika profilen ---- */ .stat-widget { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 18px 0; } .stat-ruta { background: linear-gradient(150deg, var(--saolblå-ljus), var(--saolblå)); color: var(--papper); border-radius: 14px; padding: 16px 10px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .stat-tal { display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.9rem; font-weight: 700; color: var(--guld-ljus); } .stat-etikett { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; } /* ---- Darumadrop-rubriker + spelgrid-namn ---- */ .darum { font-family: "Darumadrop One", "Fraunces", Georgia, serif; letter-spacing: 0.04em; color: var(--guld-ljus); } h1, h2 { font-family: "Darumadrop One", "Fraunces", Georgia, serif; } .spelruta .spelnamn { font-family: "Darumadrop One", "Fraunces", Georgia, serif; letter-spacing: 0.03em; } /* ---- Kontosidan: bred PC-layout med sektioner ---- */ .kontosida { max-width: 920px; } .ksektion { background: rgba(255,255,255,0.4); border: 1px solid #e2dac6; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; } .ksekt-rubrik { font-family: "Fraunces", Georgia, serif; font-size: 1rem; color: var(--saolblå); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #e2dac6; padding-bottom: 5px; } .avatarrad { display: flex; align-items: center; gap: 16px; border: none; padding: 0; } .avatar-prev { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--guld); } /* PC: sektionerna i två kolumner för att utnyttja bredden */ @media (min-width: 760px) { #iflik-profil:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } #iflik-profil .ksektion { margin-bottom: 0; min-width: 0; } /* min-width:0 = låt cellen krympa så overflow-scroll funkar */ #iflik-profil .ksektion.kfull { grid-column: 1 / -1; } /* sektioner som ska spänna över båda kolumnerna */ } /* Temaval */ .temaval { display: flex; flex-wrap: wrap; gap: 8px; } .temaknapp { display: flex; align-items: center; gap: 7px; border: 1px solid #b9b09a; background: #fff; border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; font-size: 0.85rem; } .temaknapp.vald { border-color: var(--saolblå); box-shadow: 0 0 0 2px var(--saolblå); font-weight: 600; } .temaprick { width: 16px; height: 16px; border-radius: 50%; display: inline-block; } .tema-bla .temaprick { background: #1E3A6E; } .tema-rod .temaprick { background: #6E1E1E; } .tema-gron .temaprick { background: #1E5236; } .tema-lila .temaprick { background: #3E1E6E; } .tema-rosa .temaprick { background: #7A1E52; } .tema-orange .temaprick { background: #8C4A16; } .tema-gult .temaprick { background: #6E5E14; } .tema-mork .temaprick { background: #16161A; } /* Vänner-grid 3x3 */ .vängrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 14px; } @media (max-width: 520px) { .vängrid { grid-template-columns: repeat(3, 1fr); } } .väncell { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fdfbf4; border: 1px solid #e2dac6; border-radius: 12px; padding: 12px 6px; } .väncell img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--guld); } .väncell-namn { font-weight: 600; color: var(--saolblå); text-decoration: none; font-size: 0.85rem; text-align: center; word-break: break-word; } .väncell-namn:hover { text-decoration: underline; } .väncell-tid { font-size: 0.68rem; color: #8a8470; } .knapp.liten { font-size: 0.68rem; padding: 3px 10px; } /* ---- Chatt: temafärgade inmatningsfält ---- */ .chattsida .chattform input, .inbyggdChatt .chattform input { background: rgba(255, 255, 255, 0.1); color: var(--papper); border: 1px solid rgba(246, 241, 227, 0.25); border-radius: 8px; padding: 9px 11px; font: inherit; flex: 1; } .chattsida .chattform input::placeholder, .inbyggdChatt .chattform input::placeholder { color: var(--dis); } /* ================= Ordel ================= */ .ordel-layout { max-width: 520px; margin: 0 auto; padding: 12px 16px 90px; } .ordel-spelyta { display: flex; flex-direction: column; align-items: center; } .ordel-bräde { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; margin: 8px 0; } .ordel-rad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .ordel-cell { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 1.8rem; text-transform: uppercase; color: var(--papper); border: 2px solid rgba(246, 241, 227, 0.28); border-radius: 6px; background: transparent; } .ordel-cell.ifylld { border-color: var(--guld-ljus); animation: cellpop 0.1s ease; } @keyframes cellpop { 50% { transform: scale(1.08); } } .ordel-cell.vänd { animation: vänd 0.5s ease; } @keyframes vänd { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } } .ordel-cell.rätt { background: var(--grönt); border-color: var(--grönt); color: #fff; } .ordel-cell.delvis { background: var(--guld); border-color: var(--guld); color: var(--pärm); } .ordel-cell.fel { background: rgba(0,0,0,0.35); border-color: rgba(0,0,0,0.4); color: var(--dis); } .ordel-cell.skaka { animation: skaka 0.35s ease; } @keyframes skaka { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } .tangentbord { width: 100%; max-width: 500px; margin: 14px 0; display: flex; flex-direction: column; gap: 6px; } .kb-rad { display: flex; gap: 5px; justify-content: center; } .kb-tangent { flex: 1; min-width: 0; height: 52px; border: none; border-radius: 6px; background: rgba(246, 241, 227, 0.16); color: var(--papper); font: 600 0.95rem "Inter", sans-serif; text-transform: uppercase; cursor: pointer; } .kb-tangent.bred { flex: 1.6; font-size: 0.72rem; } .kb-tangent:hover { background: rgba(246, 241, 227, 0.26); } .kb-tangent.rätt { background: var(--grönt); color: #fff; } .kb-tangent.delvis { background: var(--guld); color: var(--pärm); } .kb-tangent.fel { background: rgba(0,0,0,0.4); color: var(--dis); } .kb-tangent:disabled { cursor: default; opacity: 0.92; } .kb-tangent:disabled:hover { background: rgba(246, 241, 227, 0.16); } .kb-tangent.rätt:disabled:hover { background: var(--grönt); } .kb-tangent.fel:disabled:hover { background: rgba(0,0,0,0.4); } /* ================= Hänga gubben ================= */ .hang-galge { display: flex; flex-direction: column; align-items: center; margin: 4px 0 2px; } .hang-galge img { width: 230px; max-width: 70vw; height: auto; image-rendering: pixelated; /* skarp 16-bitars pixelart */ border-radius: 10px; background: rgba(0,0,0,0.18); } .hang-fel { margin: 6px 0 0; font: 600 0.9rem "Inter", sans-serif; color: var(--dis); letter-spacing: 0.5px; } .hang-galge img.skaka { animation: skaka 0.35s ease; } .hang-ord { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 4px; min-height: 48px; } .hang-bokstav { width: 36px; height: 46px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 1.7rem; text-transform: uppercase; color: var(--papper); border-bottom: 3px solid rgba(246, 241, 227, 0.4); } .hang-bokstav.hittad { animation: cellpop 0.18s ease; } .hang-bokstav.avslojad { color: var(--rött, #c0524a); border-bottom-color: var(--rött, #c0524a); } @media (max-width: 560px) { .hang-bokstav { width: 28px; height: 40px; font-size: 1.35rem; } } .exruta { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; font-weight: 700; color: #fff; margin-right: 4px; vertical-align: middle; } .exruta.rätt { background: var(--grönt); } .exruta.delvis { background: var(--guld); color: var(--pärm); } .exruta.fel { background: rgba(0,0,0,0.45); } .ordel-dagensord { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; color: var(--guld-ljus); text-align: center; letter-spacing: 0.1em; } .ordel-def { margin: 10px auto 4px; max-width: 360px; text-align: left; background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 12px 14px; } .ordel-def h4 { margin: 0 0 4px; font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; text-transform: capitalize; } .ordel-def p { margin: 0; font-size: 0.9rem; line-height: 1.4; } .ordel-def .ordel-def-laddar { color: #5a5648; font-style: italic; } .ordel-def .källa { display: block; margin-top: 8px; font-size: 0.72rem; color: #5a5648; } .ordel-def .källa a { color: var(--saolblå); } .resultatknappar { display: flex; gap: 10px; margin-top: 12px; } .utm-spel { font-family: "Darumadrop One","Fraunces",serif; font-size: 1.1rem; color: var(--saolblå); margin: 18px 0 4px; } .utm-kategori { margin-top: 10px; } @media (max-width: 480px) { .ordel-cell { width: 52px; height: 52px; font-size: 1.5rem; } .kb-tangent { height: 48px; font-size: 0.85rem; } } /* Rutmönster i Ordet-loggen */ .loggrad .loggrutor { display: block; font-family: monospace; font-size: 0.95rem; line-height: 1.15; letter-spacing: 1px; margin: 4px 0 2px 46px; } .livelogg li.loggrad { white-space: normal; } /* Ordet: chatten lika bred som tangentbordet (max 500px), centrerad */ .ordel-spelyta .inbyggdChatt { width: 100%; max-width: 500px; margin-top: 22px; } /* Logg: avatar + rutor på en rad */ .livelogg .loggava { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: -5px; margin-right: 4px; background: #2C4D8C; } .loggrad .loggrutor { display: inline; font-family: monospace; font-size: 0.95rem; letter-spacing: 1px; margin-left: 8px; white-space: nowrap; } .livelogg li.loggrad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .onlinerad { margin-top: 4px; } .livelogg .loggbadge { width: 22px; height: 22px; object-fit: contain; vertical-align: -6px; margin-right: 2px; } /* Hem-flödet */ .hemflode { max-height: 60vh; } .hemflode li { white-space: normal; } /* Två rutor sida vid sida (statistik + dagens ord) */ .hemrutor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hemrutor .panel { max-height: none; } /* Hem-sidans paneler ska aldrig få egen inre scroll – sidan scrollar som vanligt. */ body[data-sida="hem"] .panel { max-height: none; overflow: visible; } @media (max-width: 560px) { .hemrutor { grid-template-columns: 1fr; } } /* Ordsamlare-topplistor på välkomstsidan (mörka paneler) */ .ordsamlare-lista { list-style: none; margin: 0; padding: 0; } .ordsamlare-rad { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid rgba(246, 241, 227, 0.12); } .ordsamlare-rad:last-child { border-bottom: none; } .ordsamlare-rad .os-plats { flex: none; width: 22px; text-align: center; font-family: "Fraunces", Georgia, serif; font-weight: 700; color: var(--guld-ljus); } .ordsamlare-rad .os-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #2C4D8C; } .ordsamlare-rad .os-namn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ordsamlare-rad .os-namn a { color: var(--papper); text-decoration: none; } .ordsamlare-rad .os-namn a:hover { color: var(--guld-ljus); text-decoration: underline; } .ordsamlare-rad .os-ord { flex: none; font-weight: 600; color: var(--guld-ljus); font-size: 0.85rem; } /* Dagens statistik */ .statlista { list-style: none; margin: 0; padding: 0; } .statlista li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 0.9rem; border-bottom: 1px solid rgba(246, 241, 227, 0.10); } .statlista li:last-child { border-bottom: none; } .statlista .statikon { width: 1.4em; text-align: center; flex: none; } .statlista .stattext { flex: 1; color: var(--dis); } .statlista .statvärde { font-weight: 600; color: var(--guld-ljus); font-variant-numeric: tabular-nums; } /* Välkomstruta */ .valkommen .knapp { display: inline-block; margin-top: 4px; text-decoration: none; } .hem-formaner { text-align: left; margin: 0 auto 14px; padding-left: 20px; display: inline-block; max-width: 520px; } .hem-formaner li { margin: 5px 0; } .hem-knappar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; } .hem-knappar .knapp { text-decoration: none; } .hem-knappar .knapp.sekundär { border-color: var(--guld); color: var(--guld-ljus); } .hem-knappar .knapp.sekundär:hover { background: var(--saolblå); color: var(--papper); border-color: var(--saolblå); } /* Veckans fråga (omröstning) */ .fragetext { margin: 0 0 12px; font-weight: 500; } .fragealt { display: flex; flex-direction: column; gap: 8px; } .frageknapp { text-align: left; } .frageresultat { list-style: none; margin: 0; padding: 0; } .frageresultat li { margin-bottom: 10px; font-size: 0.85rem; } .frageresultat li.min { font-weight: 600; color: var(--guld-ljus); } .fragerad { display: flex; justify-content: space-between; margin-bottom: 3px; } .fragepct { font-variant-numeric: tabular-nums; color: var(--guld-ljus); } .frstapel { height: 8px; border-radius: 999px; background: rgba(246, 241, 227, 0.12); overflow: hidden; } .frfyll { height: 100%; background: var(--guld); border-radius: 999px; transition: width 0.5s ease; } /* Veckans spelare */ .veckospelare { display: flex; gap: 12px; align-items: flex-start; } .vsavatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--guld); } .vsinfo { flex: 1; min-width: 0; } .vsinfo strong { font-size: 1.05rem; } .vsinfo strong a { color: var(--guld-ljus); text-decoration: none; } .vsinfo .statlista { margin-top: 6px; } .vsinfo .statlista li { padding: 4px 0; } /* In- och utfade för flödesrader (10 senaste) */ .hemflode li.loggrad { overflow: hidden; } .hemflode li.loggrad.ny { animation: loggIn 0.45s ease both; } .hemflode li.loggrad.bort { animation: loggUt 0.5s ease forwards; pointer-events: none; } @keyframes loggIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes loggUt { 0% { opacity: 1; max-height: 200px; } 100% { opacity: 0; max-height: 0; transform: translateY(-6px); margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } } /* ============ Notiser: toast, panel & utmärkelse-dialog ============ */ /* Toast-popup (matchar valt tema via variablerna) */ .toastlager { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; max-width: 340px; padding: 13px 14px; background: var(--papper); color: var(--bläck); border: 1px solid var(--guld); border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); font: 400 0.86rem "Inter", sans-serif; line-height: 1.4; cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; } .toast.in { opacity: 1; transform: none; } .toast.bort { opacity: 0; transform: translateY(8px); } .toast .toastikon { width: 42px; height: 42px; flex: none; border-radius: 10px; object-fit: contain; background: rgba(0,0,0,0.05); } .toast .toastikon.emoji { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .toast .toasttext { flex: 1; } .toast .toasttext strong { color: var(--saolblå); } .toast .toaststang { background: none; border: none; cursor: pointer; font-size: 0.95rem; color: #8a8676; padding: 0 2px; line-height: 1; } /* Notispanel */ .notispanel { position: fixed; top: 60px; right: 16px; width: 340px; max-height: 70vh; overflow: auto; background: var(--papper); color: var(--bläck); border: 1px solid var(--guld); border-radius: 14px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.32); z-index: 60; } .notispanel-huvud { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--papper-skugga); position: sticky; top: 0; background: var(--papper); } .notispanel-huvud strong { font-family: "Darumadrop One", "Fraunces", Georgia, serif; color: var(--saolblå); } .notis-lasalla { background: none; border: none; color: var(--saolblå); font-size: 0.76rem; cursor: pointer; text-decoration: underline; } .notislista { display: flex; flex-direction: column; } .notisrad { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 14px; background: none; border: none; border-bottom: 1px solid var(--papper-skugga); cursor: pointer; font: 400 0.85rem "Inter", sans-serif; color: var(--bläck); } .notisrad:hover { background: rgba(201, 162, 39, 0.10); } .notisrad.olast { background: rgba(201, 162, 39, 0.14); } .notisrad .notisikon img { width: 36px; height: 36px; border-radius: 9px; object-fit: contain; flex: none; background: rgba(0,0,0,0.05); } .notisrad .notistext { flex: 1; line-height: 1.35; } .notisrad .notistext strong { color: var(--saolblå); } .notisrad .notisprick { width: 9px; height: 9px; border-radius: 50%; background: #C9372C; flex: none; } .notis-tom { padding: 22px 14px; text-align: center; color: #8a8676; font-size: 0.85rem; } /* Utmärkelse-dialog */ .utmmodal { text-align: center; } .utmmodal .stangModal { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.1rem; color: var(--saolblå); cursor: pointer; } .utmmodal .utmtopp { display: flex; flex-direction: column; align-items: center; gap: 8px; } .utmmodal #utmBild { width: 84px; height: 84px; object-fit: contain; } .utmmodal h2 { margin: 0; } .utmmodal .utmlank { display: inline-block; margin-top: 14px; color: var(--saolblå); font-size: 0.85rem; } /* ============ Kompanjon-jakt: gåvo-modal ============ */ .gavamodal { text-align: center; } .gavamodal .stangModal { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.1rem; color: var(--saolblå); cursor: pointer; } .gavamodal .gava-topp { display: flex; align-items: center; justify-content: center; width: 132px; height: 132px; margin: 4px auto 10px; background: radial-gradient(circle at 50% 38%, #fff7e6, #f1ead7); border-radius: 50%; box-shadow: 0 4px 18px rgba(120, 90, 30, 0.18); } .gavamodal #gavaBild { width: 96px; height: 96px; object-fit: contain; animation: gavaPop 0.5s ease; } @keyframes gavaPop { 0% { transform: scale(0.4) rotate(-8deg); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } .gavamodal h2 { margin: 0 0 6px; font-size: 1.25rem; } .gavamodal .gava-progress { margin: 0 0 4px; font-size: 0.9rem; color: #5a5648; } .gavamodal .gava-progress strong { color: var(--saolblå); } .gavamodal .gava-tacka { margin-top: 12px; min-width: 180px; } .gavamodal .gava-tassar { display: flex; gap: 14px; justify-content: center; font-size: 1.6rem; margin-top: 10px; } .gavamodal .gava-tassar span { animation: gavaTass 0.9s ease both; } .gavamodal .gava-tassar span:nth-child(2) { animation-delay: 0.12s; } .gavamodal .gava-tassar span:nth-child(3) { animation-delay: 0.24s; } @keyframes gavaTass { 0% { transform: translateY(10px) scale(0.5); opacity: 0; } 60% { transform: translateY(-4px) scale(1.2); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .toast.toast-gava { cursor: pointer; border-left: 4px solid var(--guld); } .toast.toast-omslag { cursor: pointer; border-left: 4px solid var(--saolblå); } /* ---------- Omslagsgäst-dialog ---------- */ .omslagmodal { text-align: center; max-width: 420px; } .omslagmodal .stangModal { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.1rem; color: var(--saolblå); cursor: pointer; } .omslagmodal .omslag-topp { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; margin: 6px auto 12px; background: radial-gradient(circle at 50% 38%, #fff7e6, #f1ead7); border-radius: 50%; box-shadow: 0 4px 18px rgba(120, 90, 30, 0.18); overflow: hidden; } .omslagmodal #omBild { width: 132px; height: 132px; object-fit: contain; animation: gavaPop 0.45s ease; } .omslagmodal .omslag-text { margin: 0 0 14px; font-size: 1rem; line-height: 1.5; color: #4a463a; } .omslagmodal .omslag-val { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .omslagmodal .omslag-knapp { margin-top: 0; min-width: 0; } .knapp.knapp-gron { border-color: #3f7d4f; color: #2f6b40; } .knapp.knapp-gron:hover { background: #3f7d4f; color: #fff; } .knapp.knapp-rod { border-color: #a8453f; color: #93362f; } .knapp.knapp-rod:hover { background: #a8453f; color: #fff; } .knapp.knapp-bla { border-color: var(--saolblå); color: var(--saolblå); } .knapp.knapp-bla:hover { background: var(--saolblå); color: var(--papper); } /* Kompanjon-jakt: intro-/progresslåda på kontosidan */ .jakt-info { background: rgba(246, 241, 227, 0.5); border: 1px solid #e2dac6; border-radius: 10px; padding: 12px 14px; margin: 10px 0 4px; font-size: 0.9rem; } .jakt-info p { margin: 0 0 6px; } .jakt-progress { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .jakt-pill { background: #fff; border: 1px solid #d8cfb6; border-radius: 999px; padding: 2px 10px; font-size: 0.82rem; color: #5a5648; } .jakt-pill.klar { background: var(--guld); border-color: var(--guld); color: var(--pärm); font-weight: 600; } .jakt-pill.aktiv { border-color: var(--saolblå); color: var(--saolblå); } @media (max-width: 560px) { .toastlager { left: 12px; right: 12px; bottom: auto; top: 12px; align-items: center; } .toast { max-width: 460px; width: 100%; } .notispanel { left: 8px; right: 8px; width: auto; top: 8px; max-height: 78vh; } } /* ============ Reaktioner i aktivitetsflödet ============ */ .reakt { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; } .reakt:empty { display: none; } .reakt-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; cursor: pointer; background: rgba(246, 241, 227, 0.10); border: 1px solid rgba(246, 241, 227, 0.18); color: var(--papper); font-size: 0.78rem; line-height: 1.6; } .reakt-pill.min { background: var(--guld); color: var(--pärm); border-color: var(--guld); font-weight: 600; } /* Händelse-ikonen är reaktions-triggern */ .reakt-trigger { background: none; border: none; cursor: pointer; padding: 1px 4px; margin: 0 -2px; font: inherit; line-height: 1; border-radius: 7px; transition: background 0.15s ease; } .reakt-trigger:hover { background: rgba(246, 241, 227, 0.14); } .reakt-trigger .loggbadge { vertical-align: middle; } /* Flytande emoji-väljare (lager ovanpå) */ .reakt-val { position: fixed; z-index: 300; display: flex; gap: 2px; padding: 5px 7px; border-radius: 999px; background: var(--papper); border: 1px solid var(--guld); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); } .reakt-val[hidden] { display: none; } .reakt-emoji { background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 2px 4px; border-radius: 8px; } .reakt-emoji:hover { background: rgba(0,0,0,0.08); transform: scale(1.15); } /* Liten flash-ruta (t.ex. vid timgränsen) */ .reaktflash { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--pärm); color: var(--papper); border: 1px solid var(--guld); padding: 10px 16px; border-radius: 999px; font-size: 0.85rem; z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; max-width: 90vw; text-align: center; } .reaktflash.syns { opacity: 1; transform: translateX(-50%) translateY(0); } /* Avatar (rund) i toast + emoji-ikon i notispanelen */ .toast .toastikon.rund { border-radius: 50%; background: none; } .notisrad .notisemoji { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } /* ============ Flytande privatchatt (dock nere till höger) ============ */ #chattDock { position: fixed; right: 16px; bottom: 16px; z-index: 150; display: flex; align-items: flex-end; gap: 12px; } #chattFonster { display: flex; align-items: flex-end; gap: 12px; } #chattMin { display: none; } .chattlauncher-wrap { position: relative; } .chattlauncher { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; cursor: pointer; background: var(--guld); color: var(--pärm); border: none; font: 600 0.9rem "Inter", sans-serif; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .chattlauncher:hover { filter: brightness(1.05); } .chattlauncher .cl-ikon { display: inline-flex; align-items: center; justify-content: center; } .chattlauncher .cl-ikon-bild { width: 20px; height: 20px; object-fit: contain; display: block; border-radius: 4px; } .chattlauncher .plopp { position: static; margin-left: 2px; border: none; } /* Saldo-indikator intill Vänner-knappen (PC). Temafärgad men avvikande från den guldfärgade launchern, med en subtil blänkande sken-effekt. */ .ordsaldo { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; background: var(--saolblå-ljus); color: var(--papper); font: 700 0.9rem "Inter", sans-serif; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); } .ordsaldo:hover { filter: brightness(1.08); } .ordsaldo .ordsaldo-ikon { width: 20px; height: 20px; object-fit: contain; display: block; border-radius: 4px; } .ordsaldo .ordsaldo-varde { font-variant-numeric: tabular-nums; } /* Ordby-läget: guld/silver/koppar i stället för en ordsumma. */ .ordsaldo .m-guld { color: var(--guld-ljus); } .ordsaldo .m-silver { color: #C0C0C0; } .ordsaldo .m-koppar { color: #D89A6A; } .ordsaldo::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); animation: ordsaldoBlank 3.4s ease-in-out infinite; } @keyframes ordsaldoBlank { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { .ordsaldo::after { animation: none; display: none; } } /* Vänlista-popover */ #meny_vanner { display: none; } /* Vänner-menyvalet visas bara på mobil; desktop använder den flytande launchern */ .chattvanner { position: fixed; right: 16px; bottom: 80px; width: 290px; max-height: 60vh; overflow: auto; background: var(--papper); color: var(--bläck); border: 1px solid var(--guld); border-radius: 14px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34); z-index: 152; } .chattv-huvud { font-family: "Darumadrop One", "Fraunces", Georgia, serif; color: var(--saolblå); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--papper-skugga); position: sticky; top: 0; background: var(--papper); } .chattv-rad { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 14px; background: none; border: none; border-bottom: 1px solid var(--papper-skugga); cursor: pointer; } .chattv-rad:hover { background: rgba(201, 162, 39, 0.10); } .chattv-rad img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; } .chattv-ava.online { border: 2px solid #2ecc40; box-shadow: 0 0 0 1px rgba(46,204,64,0.25); } .chattv-ava.offline { border: 2px solid #d23b3b; box-shadow: 0 0 0 1px rgba(210,59,59,0.20); } .chattv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .chattv-info strong { color: var(--bläck); font-size: 0.9rem; } .chattv-sen { color: #6a6657; font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; } .chattv-rad .plopp { position: static; border: none; } .chattv-tom { padding: 18px 14px; text-align: center; color: #8a8676; font-size: 0.82rem; } /* Chattfönster */ .chattfonster { width: 290px; height: 400px; display: flex; flex-direction: column; background: var(--papper); color: var(--bläck); border: 1px solid var(--guld); border-radius: 14px 14px 0 0; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34); overflow: hidden; } .chattfonster.minimerad { height: auto; } .chattfonster.minimerad .cf-medd, .chattfonster.minimerad .cf-skriv { display: none; } .cf-huvud { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--saolblå); color: #fff; cursor: pointer; } .cf-huvud .cf-ava { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.2); } .cf-huvud .cf-namn { flex: 1; font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-huvud button { background: none; border: none; color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 3px; } .cf-huvud .cf-olast { position: static; border: none; margin-right: 2px; } .cf-medd { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 7px; background: rgba(0,0,0,0.02); } .cf-rad { display: flex; } .cf-rad.jag { justify-content: flex-end; } .cf-bubbla { max-width: 78%; padding: 7px 11px 5px; border-radius: 14px; font-size: 0.85rem; line-height: 1.35; position: relative; word-break: break-word; } .cf-rad.dem .cf-bubbla { background: #fff; border: 1px solid var(--papper-skugga); border-bottom-left-radius: 4px; } .cf-rad.jag .cf-bubbla { background: var(--guld); color: var(--pärm); border-bottom-right-radius: 4px; } .cf-tid { display: block; text-align: right; font-size: 0.62rem; opacity: 0.6; margin-top: 2px; } .cf-fel { color: #C9372C; font-size: 0.76rem; text-align: center; } .cf-skriv { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--papper-skugga); background: var(--papper); } .cf-skriv textarea { flex: 1; resize: none; border: 1px solid #c9c0aa; border-radius: 10px; padding: 7px 10px; font: 400 0.85rem "Inter", sans-serif; max-height: 90px; } .cf-skriv button { background: var(--saolblå); color: #fff; border: none; border-radius: 10px; width: 38px; cursor: pointer; font-size: 1rem; flex: none; } @media (max-width: 560px) { /* iOS zoomar in på fält med < 16px text – det gör att chatten "kapas" i bredd */ .cf-skriv textarea { font-size: 16px; } /* På mobil: Vänner ligger i menyn i stället för som flytande knapp */ .chattlauncher-wrap { display: none; } #meny_vanner { display: flex; } .chattvanner { position: fixed; left: 8px; right: 8px; bottom: 70px; width: auto; z-index: 152; } /* Aktivt fönster: fyller skärmen mellan topp-pillrarna och menyn, lyfts ovanför tangentbordet */ #chattFonster { position: fixed; left: 8px; right: 8px; top: 58px; bottom: calc(72px + var(--kbd, 0px)); display: block; } #chattFonster:empty { display: none; } .chattfonster { width: auto; height: 100%; border-radius: 14px; } /* Minimerade chattar = små namn-pillrar sticky i toppen */ #chattMin:not(:empty) { display: flex; position: fixed; top: 8px; left: 8px; right: 8px; gap: 6px; flex-wrap: wrap; z-index: 151; } #chattMin .chattfonster.minimerad { width: auto; height: auto; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); } #chattMin .cf-huvud { border-radius: 999px; padding: 7px 12px 7px 8px; } #chattMin .cf-min { display: none; } #chattMin .cf-namn { flex: none; max-width: 130px; } } /* ============ Cirkeln (ordhjul) ============ */ .cirkel-yta { position: relative; width: 100%; max-width: 380px; margin: 8px auto 4px; aspect-ratio: 1 / 1; min-height: 300px; /* fallback om aspect-ratio inte tillämpas */ } .cirkel-yta.skaka { animation: skaka 0.3s ease; } .cirkel-svg { width: 100%; height: 100%; display: block; overflow: visible; } .cirkel-slice { cursor: pointer; } .cirkel-slice-yta { fill: var(--papper); stroke: var(--bläck); stroke-width: 0.7; stroke-linejoin: round; transition: fill 0.12s ease; } .cirkel-slice:hover .cirkel-slice-yta { fill: var(--papper-skugga); } .cirkel-slice.vald .cirkel-slice-yta { fill: var(--saolblå-ljus); } .cirkel-bokstav { font-family: "Fraunces", serif; font-weight: 700; font-size: 9px; fill: var(--bläck); text-anchor: middle; dominant-baseline: central; pointer-events: none; user-select: none; } .cirkel-slice.vald .cirkel-bokstav { fill: var(--papper); } .cirkel-center-yta { fill: var(--saolblå); stroke: var(--bläck); stroke-width: 0.7; transition: fill 0.12s ease; } .cirkel-center-g:hover .cirkel-center-yta { fill: var(--saolblå-ljus); } .cirkel-center-g.vald .cirkel-center-yta { fill: var(--guld); } .cirkel-center-bokstav { fill: var(--papper); font-size: 10px; } .cirkel-center-g.vald .cirkel-center-bokstav { fill: var(--bläck); } .cirkel-hint { font-family: "Inter", sans-serif; font-size: 4.4px; font-weight: 600; fill: var(--grönt); text-anchor: middle; dominant-baseline: central; pointer-events: none; } .cirkel-slice.vald .cirkel-hint { fill: var(--papper); } .cirkel-center-hint { fill: var(--guld-ljus); } .cirkel-knappar { display: flex; justify-content: center; gap: 24px; margin-top: 12px; } .ikonknapp.grön { border-color: var(--grönt); color: var(--grönt); } .ikonknapp.grön:hover { background: var(--grönt); color: var(--papper); } /* Cirkeln: bild-ikoner för Radera / Blanda / Pröva (ersätter emojin) */ .ikonknapp.ikonbild { width: 66px; height: 66px; padding: 0; border: none; background: transparent; overflow: visible; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.14s ease; } .ikonknapp.ikonbild img { width: 122%; height: 122%; object-fit: contain; display: block; pointer-events: none; } .ikonknapp.ikonbild:hover { transform: scale(1.12); filter: brightness(1.08) drop-shadow(0 2px 5px rgba(0,0,0,0.35)); } .ikonknapp.ikonbild:focus-visible { outline: 2px solid var(--guld-ljus); outline-offset: 2px; border-radius: 50%; } .ikonknapp.ikonbild:active { transform: scale(0.86); transition: transform 0.07s ease; } .ikonknapp.ikonbild.grön:hover { background: transparent; } /* åsidosätt grön-knappens hover-bakgrund för bilden */ @media (prefers-reduced-motion: reduce) { .ikonknapp.ikonbild { transition: none; } .ikonknapp.ikonbild:hover, .ikonknapp.ikonbild:active { transform: none; } } /* ===== Globala bild-ikoner i toppraden (hjälp, topplista, aktivitet) v20260630 ===== */ /* Hjälp: enkel bild i den runda cirkeln, skakar vid hover */ .ikonknapp.bildikon { display: inline-flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; } .ikonknapp.bildikon > img { width: 58%; height: 58%; object-fit: contain; display: block; pointer-events: none; } @keyframes hjälpSkak { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-13deg); } 30% { transform: rotate(11deg); } 45% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } } .ikonknapp.hjälpikon:hover > img { animation: hjälpSkak 0.55s ease; } /* Hjälp: ingen ring, ingen cirkelbeskärning, större bild */ .ikonknapp.hjälpikon { border: none; background: transparent; width: 50px; height: 50px; overflow: visible; border-radius: 0; } .ikonknapp.hjälpikon:hover { border: none; background: transparent; } .ikonknapp.hjälpikon > img { width: 100%; height: 100%; } /* Topplista + aktivitet: två bildvarianter, mjuk övergång vid hover (cirkeln behålls) */ .ikonknapp.swapikon { overflow: visible; } .ikonknapp.swapikon > img { position: absolute; top: 50%; left: 50%; width: 58%; height: 58%; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .ikonknapp.swapikon .ikon-hover { opacity: 0; } .ikonknapp.swapikon:hover .ikon-normal { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } .ikonknapp.swapikon:hover .ikon-hover { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } /* Aktivitet (blixt): snabb "flash" när hover-varianten tänds */ @keyframes blixtFlash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); filter: brightness(2.2); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); filter: brightness(1.7); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); filter: brightness(1); } } .ikonknapp.blixtikon:hover .ikon-hover { animation: blixtFlash 0.4s ease; } /* Rotera (Glosjakt): bild utan cirkel som snurrar vid hover */ .ikonknapp.roteraikon { border: none; background: transparent; padding: 0; overflow: visible; display: inline-flex; align-items: center; justify-content: center; } .ikonknapp.roteraikon > img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } @keyframes roteraSnurr { from { transform: rotate(0); } to { transform: rotate(360deg); } } .ikonknapp.roteraikon:hover > img { animation: roteraSnurr 0.7s ease; } @media (prefers-reduced-motion: reduce) { .ikonknapp.hjälpikon:hover > img, .ikonknapp.blixtikon:hover .ikon-hover, .ikonknapp.roteraikon:hover > img { animation: none; } .ikonknapp.swapikon > img { transition: opacity 0.15s ease; } .ikonknapp.swapikon:hover .ikon-normal, .ikonknapp.swapikon:hover .ikon-hover { transform: translate(-50%, -50%); } } /* ===== Instruktionsvideo i hjälpmodalen ===== */ .guidevideo { display: block; width: 100%; margin: 16px 0 4px; border-radius: 14px; border: 2px solid #000; background: #000; } .meddelande.neutral { color: var(--dis); } .cirkel-räknare { margin: 2px 0 0; font-size: 0.9rem; color: var(--bläck); font-weight: 600; } .cirkel-längdrubrik { margin: 12px 0 4px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--saolblå-ljus); } .cirkel-ordlista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .cirkel-ordlista li { background: var(--papper-skugga); border-radius: 8px; padding: 3px 10px; font-size: 0.86rem; color: var(--bläck); } /* Cirkeln – panel-tal, ledtrådar */ .cirkel-längdtal { font-weight: 600; color: var(--saolblå-ljus); } .cirkel-ordlista li.cirkel-tom { background: transparent; color: var(--dis); padding: 3px 0; } .cirkel-ord-klick { cursor: pointer; transition: background 0.12s; } .cirkel-ord-klick:hover, .cirkel-ord-klick:focus-visible { background: var(--saolblå-ljus); color: #fff; outline: none; } .cirkel-ledtradrad { display: flex; justify-content: center; margin-top: 14px; } .knapp.ljus { background: transparent; color: var(--guld); border: 1px solid var(--guld); box-shadow: none; } .knapp.ljus:hover:not(:disabled) { background: var(--guld); color: var(--pärm); } .knapp.ljus:disabled { opacity: 0.45; cursor: default; } .cirkel-ledtrad { text-align: center; min-height: 1.4em; margin: 8px 0 0; font-family: "Fraunces", serif; letter-spacing: 0.12em; color: var(--guld-ljus); font-weight: 600; } /* Hindra mobilens dubbeltryck-zoom på tappbara spelkontroller (nyp-zoom behålls) */ button, .kb-tangent, .bricka, .cirkel-slice, .cirkel-svg, .ikonknapp, .knapp, .spelruta, .cirkel-knappar, .tangentbord { touch-action: manipulation; } /* ===== Stadskedjan – chatt mot datorn ===== */ .sk-layout { max-width: 560px; margin: 0 auto; padding: 12px 16px 90px; } .sk-spelyta { display: flex; flex-direction: column; } .sk-chatt { display: flex; flex-direction: column; gap: 8px; height: 52vh; min-height: 280px; overflow-y: auto; padding: 12px; border-radius: 12px; background: var(--pärm); background: color-mix(in srgb, var(--saolblå) 55%, #000 12%); border: 1px solid rgba(246, 241, 227, 0.18); } .sk-bubbla { max-width: 78%; padding: 9px 13px; border-radius: 16px; font-size: 1rem; line-height: 1.35; word-break: break-word; animation: skIn 0.18s ease-out; } @keyframes skIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .sk-dator { align-self: flex-start; background: var(--papper); color: var(--bläck); border-bottom-left-radius: 5px; } .sk-spelare { align-self: flex-end; background: var(--guld); color: var(--bläck); font-weight: 600; border-bottom-right-radius: 5px; } .sk-system { align-self: center; max-width: 92%; text-align: center; background: transparent; color: var(--dis); font-size: 0.86rem; padding: 4px 10px; border: 1px dashed rgba(246, 241, 227, 0.25); border-radius: 10px; } .sk-system strong, .sk-system em { color: var(--guld-ljus); font-style: normal; } /* Skriver-prickar */ .sk-skriver { display: inline-flex; gap: 5px; align-items: center; padding: 13px 15px; } .sk-skriver span { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--bläck) 55%, transparent); animation: skPrick 1.2s infinite ease-in-out; } .sk-skriver span:nth-child(2) { animation-delay: 0.2s; } .sk-skriver span:nth-child(3) { animation-delay: 0.4s; } @keyframes skPrick { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sk-bubbla { animation: none; } .sk-skriver span { animation: none; opacity: 0.7; } } .sk-nasta { text-align: center; color: var(--guld-ljus); font-size: 0.85rem; min-height: 1.1em; margin: 10px 0 4px; } .sk-form { display: flex; gap: 8px; } .sk-form input { flex: 1; margin-top: 0 !important; font-size: 16px; } .sk-form input:disabled { opacity: 0.6; } .sk-knapprad { display: flex; justify-content: center; gap: 18px; margin: 8px 0 4px; } /* Melokedjan: bildknappar för ledtråd och ge upp, isärdragna */ .sk-knapprad.melo-knapprad { justify-content: space-between; gap: 12px; align-items: center; } .melo-bildknapp { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.12s ease; } .melo-bildknapp img { display: block; height: 56px; width: auto; pointer-events: none; } .melo-bildknapp:hover:not(:disabled) { transform: translateY(-2px) scale(1.05); filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); } .melo-bildknapp:active:not(:disabled) { transform: scale(0.93); } .melo-bildknapp:disabled { opacity: 0.45; cursor: default; filter: grayscale(0.3); } .melo-bildknapp:focus-visible { outline: 2px solid var(--guld-ljus); outline-offset: 3px; border-radius: 10px; } @media (prefers-reduced-motion: reduce) { .melo-bildknapp { transition: none; } .melo-bildknapp:hover:not(:disabled), .melo-bildknapp:active:not(:disabled) { transform: none; } } .sk-rekord { text-align: center; color: var(--guld-ljus); font-weight: 600; margin: 4px 0; } /* ===== Stadskedjan – väntel* och tangentbordsläge på mobil ===== */ .sk-form.sk-väntar input { opacity: 0.6; } @media (max-width: 720px) { /* När inmatningen är fokuserad (tangentbordet uppe): fyll synliga ytan med spelet, göm bottenmeny, header och sekundära sektioner så konversationen ligger direkt ovanför tangentbordet. */ body.sk-tangentbord { padding-bottom: 0 !important; overflow: hidden; } body.sk-tangentbord .huvudmeny, body.sk-tangentbord .topp, body.sk-tangentbord #loginBanner, body.sk-tangentbord .onlinerad, body.sk-tangentbord .onlinelista, body.sk-tangentbord .inbyggdChatt { display: none !important; } body.sk-tangentbord .sk-layout { position: fixed; left: 0; right: 0; top: var(--vvtop, 0px); height: var(--vvh, 100dvh); max-width: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; background-color: var(--pärm); background-image: radial-gradient(ellipse at 50% -10%, var(--saolblå) 0%, var(--pärm) 65%); z-index: 60; } body.sk-tangentbord .sk-spelyta { flex: 1; min-height: 0; display: flex; flex-direction: column; } body.sk-tangentbord .sk-chatt { flex: 1; height: auto; min-height: 0; margin: 0; } body.sk-tangentbord .sk-nasta { margin: 6px 0 4px; } body.sk-tangentbord .sk-form { margin: 0; } body.sk-tangentbord .sk-knapprad { margin: 5px 0 0; } } /* ===== Melokedjan – inforuta med maskot (endast PC) ===== */ .melo-info { display: flex; gap: 12px; align-items: center; margin: 0 0 10px; background: color-mix(in srgb, var(--saolblå) 32%, #000 6%); border: 1px solid rgba(246, 241, 227, 0.18); border-radius: 12px; padding: 10px 12px; animation: skIn 0.2s ease-out; } .melo-maskot { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; } .melo-bubbla { font-size: 0.95rem; line-height: 1.4; color: var(--papper); } .melo-bubbla strong { color: var(--guld-ljus); } .melo-bubbla em { color: var(--papper); } @media (max-width: 720px) { .melo-info { display: none !important; } } /* Emojiväljaren i chatten är en PC-funktion – aldrig på mobil. */ @media (max-width: 720px) { .emojirad { display: none !important; } } /* ============ Bokstavsskott (breakout) ============ */ .layout.enkelspalt { grid-template-columns: minmax(0, 460px); max-width: 520px; } .brk-raknare { margin: 2px 0 0; font-size: 0.9rem; color: var(--guld-ljus); font-weight: 600; } .brk-matare { position: relative; height: 8px; max-width: 420px; margin: 4px auto 10px; background: rgba(0,0,0,0.28); border-radius: 999px; overflow: visible; } .brk-matarfyll { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--guld), var(--guld-ljus)); transition: width 0.3s ease; position: relative; } .brk-matarfyll .matar-avatar { width: 22px; height: 22px; border-width: 2px; } .brk-milstolpe { position: absolute; top: -3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: rgba(0,0,0,0.4); border: 2px solid var(--papper-skugga); } /* Vänners avatarer på Breakord-mätaren (vännens eget bräde ⇒ funna/mojliga) */ .brk-van-markor { position: absolute; left: 0; top: calc(-21px - var(--rad, 0) * 7px); transform: translateX(-50%); z-index: 2; pointer-events: auto; transition: left 0.3s ease; } .brk-van-markor img { display: block; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 2px solid var(--saolblå-ljus, var(--dis)); box-shadow: 0 1px 4px rgba(0,0,0,0.45); background: var(--pärm); } .brk-van-markor.hoppar img { animation: vanHopp 0.8s ease; } .brk-milstolpe.nadd { background: var(--guld); border-color: var(--guld-ljus); box-shadow: 0 0 8px var(--guld); } .brk-hud { display: flex; justify-content: space-between; align-items: center; max-width: 460px; margin: 0 auto 8px; padding: 0 4px; font-family: "Inter", sans-serif; font-size: 0.9rem; color: var(--papper); } .brk-hud span { background: rgba(0,0,0,0.22); border-radius: 999px; padding: 3px 12px; } .brk-scen { position: relative; max-width: 460px; margin: 0 auto; } #brkCanvas { display: block; width: 100%; height: auto; aspect-ratio: 360 / 480; border-radius: 16px; touch-action: none; cursor: pointer; background: rgba(0,0,0,0.15); } .brk-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: rgba(10,18,38,0.55); border-radius: 16px; padding: 20px; color: var(--papper); font-size: 1.05rem; } .brk-overlay[hidden] { display: none; } .brk-overlay p { margin: 0; max-width: 280px; } .brk-banked { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 460px; margin: 12px auto 0; } .brk-chip { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-family: "Fraunces", Georgia, serif; font-weight: 700; background: #6b6f78; color: #3c3f45; font-size: 0.95rem; } .brk-chip.fylld { background: linear-gradient(160deg, var(--guld-ljus), var(--guld)); color: var(--pärm); box-shadow: 0 2px 5px rgba(0,0,0,0.3); } .brk-chip.ny { animation: brkChipPop 0.4s ease; } @keyframes brkChipPop { 0% { transform: scale(0.4) rotate(-12deg); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } .brk-bradeknappar { display: flex; justify-content: center; margin-top: 14px; } .brk-ord-klick { cursor: pointer; transition: background 0.12s; } .brk-ord-klick:hover, .brk-ord-klick:focus-visible { background: var(--saolblå-ljus); color: #fff; outline: none; } @media (max-width: 560px) { .brk-hud, .brk-scen, .brk-banked { max-width: 100%; } } /* ============ Kapten Kloks Utmaning (anagram) ============ */ .anag-yta { max-width: 540px; margin: 0 auto; } .anag-kapten { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; } .anag-kapten img { width: 132px; height: 132px; object-fit: contain; flex: none; } @media (max-width: 720px) { .anag-kapten img { width: 108px; height: 108px; } } .anag-pratbubbla { position: relative; background: var(--papper); color: var(--bläck); border-radius: 14px; padding: 12px 14px; font-size: 0.95rem; line-height: 1.4; box-shadow: 0 3px 10px rgba(0,0,0,0.2); } .anag-pratbubbla::before { content: ""; position: absolute; left: -8px; top: 22px; border: 8px solid transparent; border-right-color: var(--papper); border-left: 0; } .anag-mitten { text-align: center; padding: 18px 0; } .anag-mitten h2 { font-family: "Darumadrop One", "Fraunces", Georgia, serif; color: var(--guld-ljus); margin: 0 0 8px; } .knapp.stor { font-size: 1.1rem; padding: 12px 22px; } .anag-rond { text-align: center; font-weight: 600; color: var(--papper); margin: 4px 0 14px; letter-spacing: 0.02em; } .anag-rutor { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 auto 18px; } .anag-ruta { width: 46px; height: 52px; border-radius: 10px; background: rgba(0,0,0,0.22); border: 2px dashed rgba(246,241,227,0.3); display: flex; align-items: center; justify-content: center; transition: border-color 0.12s, transform 0.12s; } .anag-ruta.fylld { border-style: solid; border-color: transparent; background: transparent; } .anag-ruta.nära { border-color: var(--guld); transform: scale(1.06); } .anag-bricktray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 56px; padding: 10px; margin: 0 auto 14px; background: rgba(0,0,0,0.12); border-radius: 12px; } .anag-bricka { width: 46px; height: 52px; border-radius: 10px; background: linear-gradient(160deg, #F6F1E3, #E3DAC5); color: #2b2a25; display: flex; align-items: center; justify-content: center; font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 1.5rem; box-shadow: 0 3px 0 #b9ad8c, 0 4px 8px rgba(0,0,0,0.25); cursor: grab; user-select: none; touch-action: none; } .anag-bricka:active { cursor: grabbing; } .anag-bricka.flyttas { opacity: 0.25; } .anag-bricka.drar { position: fixed; z-index: 300; margin: 0; pointer-events: none; transform: translate(-50%, -50%) scale(1.1) rotate(-3deg); cursor: grabbing; } .anag-ledtrad { display: flex; gap: 12px; align-items: center; justify-content: center; background: rgba(62,124,79,0.16); border: 1px solid rgba(62,124,79,0.4); border-radius: 12px; padding: 10px 14px; margin: 0 auto 14px; max-width: 420px; } .anag-ledtrad[hidden] { display: none; } .anag-ledtrad img { width: 54px; height: 54px; object-fit: contain; flex: none; } .anag-ledtrad p { margin: 0; font-size: 1.05rem; letter-spacing: 0.12em; color: var(--papper); font-weight: 600; } .anag-knappar { display: flex; gap: 12px; align-items: center; justify-content: space-between; } .anag-ledtradknapp { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; transition: transform .08s; } .anag-ledtradknapp:hover:not(:disabled) { transform: scale(1.06); } .anag-ledtradknapp:disabled { cursor: default; } .anag-ledtradknapp img { height: 72px; width: auto; object-fit: contain; display: block; } @media (max-width: 480px) { .anag-ledtradknapp img { height: 58px; } } /* ===== Olåsta utmärkelser (publik profil): blurrade/grå, avslöjar inget ===== */ .utm-galleri li.utm-last img { filter: grayscale(1) blur(6px); opacity: 0.5; pointer-events: none; } .utm-galleri li.utm-last .utm-last-namn { color: #c2bba6; letter-spacing: 0.22em; font-weight: 700; } /* ===== Avatar-galleri (välj färdig avatar) – sidledsbläddring ===== */ .avatar-galleri-wrap { position: relative; min-width: 0; } .avatar-galleri { display: flex; gap: 10px; overflow-x: auto; min-width: 0; /* tillåt krympning i grid/flex så scroll funkar */ padding: 6px 2px 10px; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .avatar-galleri::-webkit-scrollbar { height: 8px; } .avatar-galleri::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 8px; } .avatar-galleri .avatar-val { flex: 0 0 auto; width: 72px; height: 72px; padding: 0; border: 3px solid transparent; border-radius: 50%; background: rgba(0,0,0,0.04); cursor: pointer; scroll-snap-align: center; overflow: hidden; transition: border-color .12s, transform .12s; } .avatar-galleri .avatar-val:hover { transform: translateY(-2px); } .avatar-galleri .avatar-val img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-galleri .avatar-val.vald { border-color: var(--guld, #c9a227); } .avatar-galleri-tom { color: #8a8470; font-size: 0.85rem; padding: 8px 2px; } .avatar-spara-rad { margin-top: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* Omslags-väljare (headers) – visar hela bilden (samma 1024:500-förhållande). */ .omslag-galleri-wrap { position: relative; min-width: 0; } .omslag-galleri { display: flex; gap: 10px; overflow-x: auto; min-width: 0; padding: 6px 2px 10px; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .omslag-galleri::-webkit-scrollbar { height: 8px; } .omslag-galleri::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 8px; } .omslag-galleri .omslag-val { flex: 0 0 auto; width: 230px; aspect-ratio: 1024 / 500; /* samma som headerbilderna => hela bilden syns */ padding: 0; border: 3px solid transparent; border-radius: 12px; background: rgba(0,0,0,0.04); cursor: pointer; overflow: hidden; scroll-snap-align: center; transition: border-color .12s, transform .12s; } .omslag-galleri .omslag-val:hover { transform: translateY(-2px); } .omslag-galleri .omslag-val img { width: 100%; height: 100%; object-fit: cover; display: block; } .omslag-galleri .omslag-val.vald { border-color: var(--guld, #c9a227); } @media (max-width: 560px) { .omslag-galleri .omslag-val { width: 200px; } } /* Pilar för att bläddra på datorn (mobil använder swipe – pilarna döljs där). */ .avatar-pil { display: none; position: absolute; top: calc(50% - 5px); /* mitt på avatarerna, ovanför scrollbaren */ transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d8cdb6; background: var(--papper, #f6efe3); color: var(--saolblå, #1E3A6E); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.18); align-items: center; justify-content: center; } .avatar-pil:hover { background: var(--saolblå, #1E3A6E); color: var(--papper, #f6efe3); } .avatar-pil.synlig { display: flex; } .avatar-pil-vänster { left: -6px; } .avatar-pil-höger { right: -6px; } @media (hover: none), (pointer: coarse), (max-width: 759px) { .avatar-pil, .avatar-pil.synlig { display: none; } /* touch/mobil: swipe i stället */ } /* Spara-notis vid muspekaren på Konto ("Sparat ✓") */ .spara-notis { position: fixed; z-index: 9999; transform: translate(-50%, -120%) translateY(6px); background: var(--saolblå, #1E3A6E); color: #fff; font: 600 0.82rem "Inter", system-ui, sans-serif; padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .28s ease; white-space: nowrap; } .spara-notis.synlig { opacity: 1; transform: translate(-50%, -120%) translateY(-4px); } /* Sidfot (footer) – på alla sidor */ .sidfot { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 36px auto 18px; padding: 0 16px; color: var(--dis, #9aa6c0); font-size: 0.82rem; text-align: center; } .sidfot a { color: var(--guld-ljus, #e6c87a); text-decoration: none; } .sidfot a:hover { text-decoration: underline; } .sidfot-sep { opacity: 0.6; } @media (max-width: 760px) { .sidfot { margin-bottom: 96px; } } /* fri från fasta bottenmenyn på mobil */ /* ============ Shop (gåvobevis) ============ */ /* Ingen inre scroll på shop-sidan – hela sidan scrollar normalt på utsidan. */ body[data-sida="shop"] .panel { max-height: none; overflow: visible; } .shopintro { color: var(--papper); opacity: .92; line-height: 1.55; } .shop-saldo { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 14px 16px; margin: 8px 0 4px; } .shop-saldo-rad { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .shop-saldo-stor { font-size: 1.5rem; font-weight: 700; color: var(--guld-ljus); } .shop-saldo-enhet { font-size: .95rem; font-weight: 500; color: var(--papper); } .shop-kostnad-tagg { background: rgba(255,255,255,.08); border-radius: 999px; padding: 4px 12px; font-size: .85rem; white-space: nowrap; } .shop-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); margin: 12px 0 6px; overflow: hidden; } .shop-bar-fyll { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--guld), var(--guld-ljus)); transition: width .4s ease; } .shop-bar-fyll.full { background: linear-gradient(90deg, #4caf50, #8bc34a); } .shop-behov { margin: 8px 0 0; } .shop-behov a, .shop-org-belopp a { color: var(--guld-ljus); } .shop-orgar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .shop-org { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .shop-org-bildwrap { position: relative; width: 80px; height: 80px; border-radius: 14px; overflow: hidden; border: 2px solid #000; background: #fff; } .shop-org-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; } .shop-org-skimmer { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(255,0,0,.4), rgba(255,165,0,.4), rgba(255,255,0,.4), rgba(0,255,0,.4), rgba(0,255,255,.4), rgba(0,0,255,.4), rgba(180,0,255,.4)); mix-blend-mode: screen; transform: skewX(-20deg) translateX(-150%); } .shop-org:hover .shop-org-skimmer { opacity: .85; animation: shopSkimmer 1.6s ease; } @keyframes shopSkimmer { 0% { opacity: .85; transform: skewX(-20deg) translateX(-150%); } 100% { opacity: .85; transform: skewX(-20deg) translateX(250%); } } @media (prefers-reduced-motion: reduce) { .shop-org:hover .shop-org-skimmer { animation: none; opacity: 0; } } .shop-org-namn { font-weight: 600; } .shop-org-belopp { font-size: .85rem; color: var(--dis); } .shop-lagg { width: 100%; margin-top: auto; } .shop-lagg:disabled { opacity: .5; cursor: not-allowed; } .shop-varukorg { margin-top: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px; } .shop-vk-rad { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .shop-vk-falt { display: block; margin: 10px 0; } .shop-vk-falt input { width: 100%; margin-top: 4px; } .shop-vk-samtycke { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; margin: 10px 0; } .shop-vk-samtycke input { margin-top: 3px; } .shop-klart { background: rgba(76,175,80,.15); border: 1px solid rgba(76,175,80,.4); border-radius: 12px; padding: 12px 14px; margin-top: 14px; } .shop-mina { display: flex; flex-direction: column; gap: 6px; } .shop-mina-rad { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.04); } .shop-mina-status { font-size: .85rem; } .shop-status-skickad .shop-mina-status { color: #8bc34a; } .shop-status-avbruten { opacity: .55; } .shop-notisikon { display: inline-flex; align-items: center; justify-content: center; font-size: 22px; width: 38px; height: 38px; } .lankknapp { background: none; border: none; color: var(--guld-ljus); cursor: pointer; text-decoration: underline; padding: 0; font: inherit; } @media (max-width: 720px) { .shop-orgar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-mina-rad { grid-template-columns: 1fr auto; } .shop-mina-belopp, .shop-mina-datum { display: none; } } /* ================= Sticky-flikar (PC): Feedback (vänster) & Att göra (höger) ================= Smala lodräta flikar mitt på vänster/höger kant. Panelen glider ut mjukt när fliken trycks. Döljs helt på mobil. */ .sticky-feedback, .sticky-todo { position: fixed; top: 50%; transform: translateY(-50%); z-index: 140; display: flex; align-items: center; } .sticky-feedback { left: 0; } .sticky-todo { right: 0; flex-direction: row-reverse; } .sticky-flik { writing-mode: vertical-rl; text-orientation: mixed; width: 24px; padding: 12px 3px; border: none; cursor: pointer; background: var(--saolblå-ljus); color: var(--papper); font: 700 0.62rem "Inter", sans-serif; letter-spacing: 0.12em; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); transition: filter 0.15s ease; } .sticky-flik-vänster { border-radius: 0 8px 8px 0; } .sticky-flik-höger { border-radius: 8px 0 0 8px; transform: rotate(180deg); } .sticky-flik:hover { filter: brightness(1.1); } .sticky-panel { position: absolute; top: 50%; transform: translateY(-50%); width: 290px; max-height: 80vh; overflow-y: auto; background: var(--meny-bg); color: var(--papper); border: 1px solid rgba(246, 241, 227, 0.18); border-radius: 12px; padding: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease; } .sticky-panel-vänster { left: 24px; transform: translate(-16px, -50%); } .sticky-panel-höger { right: 24px; transform: translate(16px, -50%); } .sticky-feedback.öppen .sticky-panel-vänster, .sticky-todo.öppen .sticky-panel-höger { opacity: 1; pointer-events: auto; transform: translate(0, -50%); } .sticky-panel h3 { margin: 0 0 10px; font-size: 1rem; } /* Feedback-formulär */ .fb-typer { display: flex; gap: 6px; margin-bottom: 10px; } .fb-typ { flex: 1; padding: 7px 4px; border-radius: 8px; cursor: pointer; background: rgba(246, 241, 227, 0.08); color: var(--papper); border: 1px solid rgba(246, 241, 227, 0.2); font: 600 0.78rem "Inter", sans-serif; } .fb-typ.vald { background: var(--guld); color: var(--pärm); border-color: var(--guld); } .sticky-panel textarea { width: 100%; box-sizing: border-box; resize: vertical; border-radius: 8px; border: 1px solid rgba(246, 241, 227, 0.25); background: rgba(0, 0, 0, 0.25); color: var(--papper); padding: 8px; font: 400 0.85rem "Inter", sans-serif; } .fb-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .fb-sida { margin: 8px 0 4px; color: var(--dis); word-break: break-all; } .fb-status { min-height: 1.1em; margin: 6px 0; font-size: 0.82rem; } .fb-status.fel { color: var(--guld-ljus); } .fb-status.ok { color: #7fd39a; } /* Att göra-lista */ .td-sammanfattning { margin: 0 0 10px; color: var(--dis); } .td-lista { list-style: none; margin: 0; padding: 0; } .td-rad { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgba(246, 241, 227, 0.08); } .td-rad:last-child { border-bottom: none; } .td-namn { color: var(--papper); text-decoration: none; font-weight: 600; font-size: 0.88rem; } .td-namn:hover { text-decoration: underline; } .td-höger { display: inline-flex; align-items: center; gap: 8px; } .td-antal { font-size: 0.78rem; color: var(--dis); font-variant-numeric: tabular-nums; } .td-ikon { font-weight: 700; font-size: 0.95rem; line-height: 1; } .td-ikon.klar { color: #56c878; } .td-ikon.ej { color: var(--rött); } .td-ikon.pabörjad { color: var(--guld-ljus); } @media (max-width: 560px) { .sticky-feedback, .sticky-todo { display: none; } }