/* Schriften (lokal in public/fonts, Lizenz OFL): Pirata One = Titel, Knöpfe, Kapitel (nah an der Logo-Schrift); Almendra = Fließtext, Zahlen in Hinweisen */ @font-face { font-family: "Grenze Gotisch"; src: url("fonts/GrenzeGotisch-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Almendra"; src: url("fonts/Almendra-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Almendra"; src: url("fonts/Almendra-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Almendra"; src: url("fonts/Almendra-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Almendra"; src: url("fonts/Almendra-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } :root { --font-display: "Grenze Gotisch", "Palatino Linotype", Palatino, Georgia, serif; --font-body: "Almendra", "Palatino Linotype", Palatino, Georgia, serif; } :root { color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: #140d24; color: #f0e6ff; font-family: var(--font-body); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; } [hidden] { display: none !important; } #stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; } #hud { position: fixed; inset: 0; pointer-events: none; padding: max(12px, env(safe-area-inset-top)) 16px 12px; } #hud button { pointer-events: auto; background: #2a1d47cc; color: #f0e6ff; border: 1px solid #f6d77a66; border-radius: 8px; padding: 7px 13px; font: inherit; cursor: pointer; } #hud button:hover { background: #3b2a63dd; } #hud button.on { background: #f6d77a; color: #1b1030; } #sc-opts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; } #bar .chk { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; background: #2a1d47cc; border: 1px solid #f6d77a66; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: .95rem; backdrop-filter: blur(4px); } #bar .chk input { accent-color: #f6d77a; width: 16px; height: 16px; } #topmenu { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 16px; } #bar, #demobar { display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 110px); } #back { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); } #hint { position: fixed; bottom: max(12px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; margin: 0; font-size: .85rem; opacity: .7; } #ver { position: fixed; right: 12px; bottom: 12px; font-size: .7rem; opacity: .45; } #menu { pointer-events: none; position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse 27% 52% at 50% 48%, rgba(5,9,28,.78) 0%, rgba(5,9,28,.5) 55%, rgba(5,9,28,0) 100%); z-index: 5; } /* Mitte abgedunkelt für die Lesbarkeit, am Rand frei für die Karten; kein Weichzeichner (kostet Leistung) */ #menu .panel { width: min(92vw, 380px); display: flex; flex-direction: column; gap: 12px; text-align: center; } #menu h1:has(.logo) { align-self: center; width: min(92vw, 540px); } #menu h1 .logo { display: block; width: 100%; height: auto; margin: 0 auto; filter: drop-shadow(0 4px 14px #000a); } #menu h1 { margin: 0; font-size: 2.2rem; letter-spacing: .06em; color: #f6d77a; text-shadow: 0 3px 14px #000a; } #menu .sub { margin: 0 0 12px; opacity: .75; font-size: .95rem; } #menu button { background: #2a1d47; color: #f0e6ff; border: 1px solid #f6d77a88; border-radius: 12px; padding: 14px 18px; font: inherit; font-size: 1.1rem; cursor: pointer; display: flex; flex-direction: column; gap: 2px; } #menu button:hover:not(:disabled) { background: #3b2a63; border-color: #f6d77a; } #menu button:disabled { opacity: .45; cursor: not-allowed; } #menu button small { font-size: .78rem; opacity: .65; } /* Hauptmenü-Knöpfe mit goldenem Rahmen (public/img/frame_*.jpg, Schwarz freigestellt in js/frames.js); ohne Bilder bleiben die schlichten Knöpfe */ html.frames-menu #menu #menu-main > button { --fill: #1f1438; border: none; border-radius: 6px; padding: 24px 34px; background: transparent; background: var(--fr, none) 0 0 / 100% 100% no-repeat, linear-gradient(var(--fill), var(--fill)) var(--inl, 7px) var(--int, 7px) / calc(100% - var(--inl, 7px) - var(--inr, 7px)) calc(100% - var(--int, 7px) - var(--inb, 7px)) no-repeat; /* Rahmenbild und Füllung exakt in Boxgröße (js/frames.js) */ transition: filter .15s, transform .15s; } html.frames-menu #menu #menu-main > button:hover:not(:disabled) { --fill: #33235a; border: none; filter: drop-shadow(0 0 10px #f6d77a88) brightness(1.1); transform: translateY(-1px); } html.frames-menu #menu #menu-main > button small { opacity: .75; } /* Menü: Spielerzahl */ #menu .count { display: flex; align-items: center; justify-content: center; gap: 8px; } #menu .count span { opacity: .7; margin-right: 4px; } #menu .count button { padding: 8px 16px; font-size: 1rem; } #menu .go { background: #f6d77a !important; color: #1b1030 !important; font-weight: 600; } #menu .count button.on { background: #f6d77a; color: #1b1030; border-color: #f6d77a; } /* Spieltisch */ #players { position: absolute; top: 12px; left: 340px; right: 340px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; pointer-events: none; } /* zwischen den Hinweisen links (Anleitung, Farbe, Ereignis) und dem Menü-Knopf rechts */ .chip { background: #1d1236cc; border: 1px solid #f6d77a33; border-radius: 10px; padding: 5px 10px; font-size: .8rem; line-height: 1.25; } .chip b { display: block; color: #f6d77a; } .chip span { opacity: .8; font-size: .72rem; } .chip.turn { border-color: #f6d77a; box-shadow: 0 0 12px #f6d77a66; } .chip.me b::after { content: ' (du)'; font-weight: 400; opacity: .6; } #sortbtn, #p-toggle { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: .85rem; padding: 6px 12px !important; } #trumpchip { pointer-events: auto; cursor: pointer; position: absolute; top: 78px; left: 16px; background: #1d1236cc; border: 1px solid #f6d77a55; border-radius: 10px; padding: 6px 12px; font-size: .9rem; } #ledchip { align-self: center; background: #1d1236cc; border: 1px solid #f6d77a55; border-radius: 10px; padding: 6px 12px; font-size: .9rem; white-space: nowrap; pointer-events: none; } #ledchip.wait { opacity: .75; font-style: italic; } #ledchip .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin: 0 6px 0 2px; vertical-align: -1px; } #trumpchip small { opacity: .6; margin-left: 4px; } #trumpchip .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin: 0 6px 0 2px; vertical-align: -1px; } #playbar { position: absolute; top: 12px; left: 16px; display: flex; gap: 14px; } #trickmsg { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); background: #140d24f0; border: 1px solid #f6d77acc; border-radius: 12px; padding: 12px 22px; max-width: min(92vw, 760px); text-align: center; font-size: 1.15rem; font-weight: 600; color: #fff4dc; box-shadow: 0 6px 30px #000a; pointer-events: none; z-index: 3; } #msg .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 0 6px 0 3px; vertical-align: -1px; } #msg.sum { text-align: left; padding: 14px 20px; min-width: min(86vw, 340px); } #msg .sumhead { text-align: center; font-weight: 600; color: #f6d77a; margin-bottom: 8px; } #msg .sumsub { text-align: center; opacity: .6; font-size: .8rem; margin: -4px 0 8px; } #msg .sumrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 18px; align-items: baseline; padding: 5px 0; border-top: 1px solid #f6d77a22; } #msg .sumrow.me .nm { color: #f6d77a; font-weight: 600; } #msg .sumrow .st { opacity: .85; font-size: .95rem; } #msg .sumrow .pt { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } #msg .pos { color: #7ee08f; } #msg .neg { color: #ff8a80; } #msg { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); background: #140d24ee; border: 1px solid #f6d77a88; border-radius: 12px; padding: 12px 20px; max-width: min(92vw, 760px); text-align: center; font-size: 1.05rem; box-shadow: 0 6px 30px #000a; pointer-events: none; } .dock { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; max-width: 94vw; background: #140d24ee; border: 1px solid #f6d77a77; border-radius: 12px; padding: 10px 14px; pointer-events: auto; } .dock #bidbtns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .dock button { min-width: 42px; } .dock button:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; } #continue { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); font-size: 1.05rem; padding: 10px 22px !important; background: #f6d77a !important; color: #1b1030 !important; } #endpanel { position: fixed; inset: 0; display: grid; place-items: center; background: #140d24d9; pointer-events: auto; z-index: 4; } #endpanel .panel { width: min(92vw, 380px); display: flex; flex-direction: column; gap: 10px; text-align: center; } #endpanel h2 { margin: 0 0 6px; color: #f6d77a; font-size: 1.7rem; } #end-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; } #end-list li { display: flex; gap: 8px; background: #2a1d47; border-radius: 8px; padding: 8px 12px; text-align: left; } #end-list li span { margin-left: auto; font-variant-numeric: tabular-nums; } #end-list li.me { border: 1px solid #f6d77a; } #endpanel button { background: #2a1d47; color: #f0e6ff; border: 1px solid #f6d77a88; border-radius: 10px; padding: 11px; font: inherit; cursor: pointer; } #players.dim { opacity: 0; transition: opacity .25s; } #players { transition: opacity .25s; } /* Mehrspieler: Menü-Unterseite und Lobby */ #menu input, #mp input { background: #1d1236; color: #f0e6ff; border: 1px solid #f6d77a66; border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 1.05rem; text-align: center; width: 100%; } #mp .join { display: flex; gap: 8px; } #mp .join input { letter-spacing: .3em; text-transform: uppercase; } #mp .join button { flex: none; } #menu .ghost, #lobby .ghost { background: transparent !important; border-color: #f0e6ff33 !important; font-size: .95rem !important; padding: 9px !important; } #menu .note, #lobby .note { margin: 0; min-height: 1.2em; font-size: .85rem; color: #ffb4a8; } #lobby { pointer-events: none; position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse 27% 52% at 50% 48%, rgba(5,9,28,.78) 0%, rgba(5,9,28,.5) 55%, rgba(5,9,28,0) 100%); z-index: 5; } #lobby .panel { width: min(92vw, 400px); display: flex; flex-direction: column; gap: 10px; text-align: center; } #lobby h1 { margin: 0; font-size: 1.8rem; color: #f6d77a; } #lb-code { letter-spacing: .25em; } #lobby .sub { margin: 0; opacity: .75; font-size: .9rem; } #lobby a { color: #f6d77a; } #lb-list { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #lb-list li { display: flex; align-items: center; gap: 8px; background: #2a1d47; border-radius: 8px; padding: 9px 12px; text-align: left; } #lb-list li.me { border: 1px solid #f6d77a; } #lb-list li.off { opacity: .5; } #lb-list small { margin-left: auto; opacity: .7; background: #140d24; border-radius: 6px; padding: 2px 7px; } #lb-list small + small { margin-left: 4px; } #lobby .row { display: flex; gap: 8px; } #lobby .row button { flex: 1; } #lobby button, #menu #mp button { background: #2a1d47; color: #f0e6ff; border: 1px solid #f6d77a88; border-radius: 10px; padding: 11px; font: inherit; cursor: pointer; } #lobby button:disabled { opacity: .4; cursor: not-allowed; } #lobby .go { background: #f6d77a; color: #1b1030; font-weight: 600; } /* ---------- Spielanleitung: magisches Pergament ---------- */ #rules { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: max(10px, env(safe-area-inset-top)) 10px 10px; background: radial-gradient(circle at 50% 40%, #0b061aee, #05020cf8); pointer-events: auto; touch-action: pan-y; user-select: text; -webkit-user-select: text; animation: rulesIn .3s ease-out; } @keyframes rulesIn { from { opacity: 0; transform: scale(.97); } } #rules .book { position: relative; width: min(100%, 820px); height: min(100%, 94vh); display: flex; flex-direction: column; color: #3a2512; font-family: var(--font-body); font-size: 1.04rem; border-radius: 10px 14px 9px 13px / 13px 9px 14px 10px; overflow: hidden; background: radial-gradient(ellipse at 18% 12%, #fff3cf99, transparent 45%), radial-gradient(ellipse at 85% 90%, #b8864399, transparent 50%), radial-gradient(ellipse at 50% 50%, #ecd7a4, #dcc08a 70%, #c49c61); box-shadow: inset 0 0 70px #6a3f1a, inset 0 0 14px #3d2008, 0 0 0 2px #2a1408, 0 18px 60px #000c, 0 0 80px #f6d77a22; } #rules .book::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3; background-image: url("data:image/svg+xml;utf8,"); } #rules .book.loading { place-items: center; display: grid; font-size: 1.2rem; font-style: italic; } #rules .close { position: absolute; top: 10px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #7a4a18; background: #e9d39ccc; color: #5a2c0a; font-size: 1rem; cursor: pointer; } #rules .close:hover { background: #f6e3b0; } #rules header { position: relative; z-index: 2; text-align: center; padding: 16px 52px 8px; border-bottom: 1px solid #7a4a1855; background: linear-gradient(#e9d39c77, transparent); } #rules header h1 { margin: 2px 0 0; font-family: var(--font-display); letter-spacing: .04em; font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.7rem); color: #5b1d0b; letter-spacing: .02em; text-shadow: 0 1px 0 #fff6, 0 0 14px #f6d77a55; } #rules header .logo { display: block; width: min(78%, 400px); height: auto; margin: 0 auto -4px; filter: drop-shadow(0 2px 4px #3a2a1688); } #rules header:has(.logo) h1 { font-size: clamp(1.2rem, 3.4vw, 1.6rem); margin-top: 0; } #rules .tag { margin: 0 0 6px; font-style: italic; opacity: .75; font-size: .9rem; } #rules .exts { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; align-items: center; margin: 4px 0 6px; font-size: .9rem; } #rules .tg { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid #7a4a18aa; border-radius: 999px; background: #f3e2b588; cursor: pointer; } #rules .tg input { accent-color: #8c1710; width: 16px; height: 16px; } #rules .tg span { font-weight: 700; } #rules .tg small { opacity: .7; font-style: italic; } #rules nav { display: flex; flex-wrap: wrap; gap: 4px 4px; justify-content: center; } #rules nav a { text-decoration: none; color: #5a2c0a; font-size: .82rem; padding: 3px 11px; border-radius: 999px; border: 1px solid #7a4a1877; background: #f3e2b566; } #rules nav a:hover { background: #f6e3b0; border-color: #8c1710; } #rules nav a.gold { color: #6a1a05; border-color: #b8860b; background: linear-gradient(#ffe9a8, #e6bb55); font-weight: 700; } #rules .scroll { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 4px 22px 24px; scrollbar-width: thin; scrollbar-color: #8a5a28 transparent; } #rules .pages { max-width: 660px; margin: 0 auto; } #rules .chap { padding: 14px 0 6px; line-height: 1.55; font-size: 1.02rem; } #rules .chap h2 { margin: 6px 0 0; text-align: center; font-family: var(--font-display); letter-spacing: .04em; font-weight: 400; font-size: 1.85rem; color: #5b1d0b; text-shadow: 0 1px 0 #fff5; } #rules .chap h3 { margin: 14px 0 4px; font-size: 1.08rem; color: #6a1f0c; font-variant: small-caps; letter-spacing: .06em; border-bottom: 1px solid #7a4a1844; } #rules .flourish { display: block; width: 62%; max-width: 280px; margin: 2px auto 8px; color: #8a5a28; } #rules p { margin: .5em 0; } #rules .lead::first-letter { float: left; font: 400 3.3rem/0.85 var(--font-display); color: #8c1710; margin: 4px 8px 0 0; text-shadow: 1px 1px 0 #f6d77a88; } #rules .chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; } #rules .chips span { border: 1px solid #7a4a18; border-radius: 999px; padding: 3px 12px; font-size: .85rem; background: #f3e2b5aa; } #rules .chips .gold, #rules .ribbon { border-color: #b8860b; background: linear-gradient(#ffe9a8, #e6bb55); color: #5a1a05; font-weight: 700; } #rules .ribbon { display: block; width: fit-content; margin: 0 auto 8px; border: 1px solid #b8860b; border-radius: 4px; padding: 3px 18px; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; box-shadow: 0 2px 6px #0004; } #rules .elem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; } #rules .elem div { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid #7a4a1866; border-radius: 10px; background: #f3e2b577; } #rules .elem small, #rules .cycle small { opacity: .75; font-size: .78rem; font-style: italic; } #rules .ico { width: 56px; height: 56px; filter: drop-shadow(0 2px 3px #0006); } #rules .elem .ico { background: radial-gradient(circle, #1d1236, #140d24); border-radius: 50%; padding: 3px; margin-bottom: 4px; } #rules .cardrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 12px 0; } #rules .mini { margin: 0; width: 120px; text-align: center; font-size: .85rem; } #rules .mini img { width: 100%; border-radius: 6px; box-shadow: 0 5px 14px #0008, 0 0 0 1px #2a1408; transform: rotate(-1.5deg); } #rules .mini:nth-child(even) img { transform: rotate(1.5deg); } #rules .mini small { display: block; opacity: .75; font-style: italic; font-size: .75rem; } #rules .cardrow.small .mini { width: 84px; } #rules .tbl { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .96rem; } #rules .tbl th, #rules .tbl td { padding: 6px 10px; border: 1px solid #7a4a1866; text-align: left; vertical-align: top; } #rules .tbl th { background: #c9a263aa; font-variant: small-caps; letter-spacing: .05em; } #rules .tbl td { background: #f3e2b555; } #rules .tbl.ex td:first-child { width: 40%; } #rules .rules { margin: 8px 0; padding-left: 1.2em; } #rules .rules li { margin: .4em 0; } #rules .rules li::marker { color: #8c1710; content: "✦ "; } #rules .order { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } #rules .order li { display: flex; gap: 10px; align-items: flex-start; } #rules .step { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #f6d9a0; background: radial-gradient(circle at 35% 30%, #a8321a, #5c0d09); box-shadow: 0 1px 3px #0006; } #rules .step.dr { background: radial-gradient(circle at 35% 30%, #ffb13a, #c2411f); color: #3a0b0b; } #rules .box { margin: 12px 0; padding: 10px 14px; border-left: 4px solid #8c1710; background: #f3e2b5aa; border-radius: 0 8px 8px 0; } #rules .box.gold { border-left-color: #b8860b; background: linear-gradient(90deg, #ffe9a899, #f3e2b588); } #rules .note { font-style: italic; opacity: .9; font-size: .95rem; } #rules .cycle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 12px 0; } #rules .cycle div { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 108px; padding: 8px; border: 1px solid #7a4a18aa; border-radius: 10px; background: #f3e2b5aa; } #rules .cycle .arr { font-size: .75rem; font-style: italic; color: #8c1710; max-width: 86px; text-align: center; } #rules .cycle .ico { background: radial-gradient(circle, #1d1236, #140d24); border-radius: 50%; padding: 4px; } #rules .chap.ext { margin-top: 12px; padding: 14px 14px 10px; border: 1.5px solid #b8860b; border-radius: 12px; background: radial-gradient(ellipse at 50% 0, #ffe9a877, transparent 70%); box-shadow: inset 0 0 22px #b8860b44; } #rules .end { text-align: center; margin: 18px 0 4px; font-style: italic; opacity: .8; } #rules .end svg { display: block; margin: 0 auto 6px; width: 50%; max-width: 220px; color: #8a5a28; } @media (max-width: 560px) { #rules .scroll { padding: 4px 14px 20px; } #rules .elem { grid-template-columns: repeat(2, 1fr); } #rules header { padding: 14px 44px 6px; } #rules .mini { width: 96px; } } /* Menü: Erweiterungen, Spielanleitung */ #menu .ext, #lobby .ext { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 9px 14px; border: 1px solid #f6d77a55; border-radius: 10px; background: #1d1236; cursor: pointer; font-size: .95rem; } #menu .ext input, #lobby .ext input { width: 18px; height: 18px; accent-color: #f6d77a; flex: none; padding: 0; } #menu .ext small, #lobby .ext small { opacity: .65; } #lobby .ext.off { opacity: .75; cursor: default; } #lobby .ext-title { margin: 2px 0 -4px; opacity: .6; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; } /* Schmale Fenster: Spielerleiste rutscht unter die Hinweis-Chips (Anleitung, geforderte Farbe, Ereigniskarte) */ @media (max-width: 1000px) { #players { top: 100px; left: 20px; right: 20px; } } #continue:disabled { opacity: .7; cursor: default; } /* Menü und Lobby lassen Zeigerbewegungen neben dem Menü zur 3D-Szene durch (Hintergrundkarten geben leicht nach); Bedienelemente bleiben klickbar */ #menu .panel, #lobby .panel, #menu button, #lobby button, #menu input, #lobby input, #menu label, #lobby a { pointer-events: auto; } /* ---------- Goldene Rahmen für die Boxen im Spiel (public/img/frame_*.jpg, Schwarz freigestellt in js/frames.js) ---------- Gemeinsames Muster: Rahmenbild über die ganze Box, darunter die Füllung etwas eingerückt (--in = Rahmendicke). Ohne Bilder bleibt alles wie vorher. */ html.frames-game #topmenu, html.frames-game #p-rules, html.frames-game #p-toggle, html.frames-game #sortbtn, html.frames-game #back, html.frames-game #ledchip, html.frames-game #trumpchip, html.frames-game #msg:not(.sum), html.frames-game #trickmsg, html.frames-game #players .chip, html.frames-game #hud #continue { border: none !important; border-radius: 4px !important; box-shadow: none; backdrop-filter: none; background: var(--fr, none) 0 0 / 100% 100% no-repeat, linear-gradient(var(--fill), var(--fill)) var(--inl, 5px) var(--int, 5px) / calc(100% - var(--inl, 5px) - var(--inr, 5px)) calc(100% - var(--int, 5px) - var(--inb, 5px)) no-repeat !important; } html.frames-game #topmenu, html.frames-game #p-rules, html.frames-game #p-toggle, html.frames-game #sortbtn, html.frames-game #back { --fill: #1b1233; padding: var(--fp-action, 9px 20px) !important; } html.frames-game #topmenu:hover, html.frames-game #p-rules:hover, html.frames-game #p-toggle:hover, html.frames-game #sortbtn:hover, html.frames-game #back:hover { --fill: #33235a; filter: brightness(1.12); } html.frames-game #ledchip { --fill: #1b1233; padding: var(--fp-action, 9px 20px); } html.frames-game #trumpchip { --fill: #1b1233; padding: var(--fp-action, 9px 20px); } html.frames-game #msg:not(.sum), html.frames-game #trickmsg { --fill: #130c26; padding: var(--fp-message, 22px 34px) !important; } html.frames-game #players .chip { --fill: #1b1233; padding: var(--fp-player, 10px 20px); } html.frames-game #players .chip.turn { box-shadow: none; } html.frames-game #hud #continue { --fill: #3a2a0a; padding: var(--fp-next, 16px 40px) !important; color: #fff4dc !important; font-weight: 600; text-shadow: 0 1px 3px #000a; } html.frames-game #hud #continue:hover:not(:disabled) { --fill: #5a420e; filter: brightness(1.15); } /* Schrift: Überschriften und Knöpfe in Pirata One, Nebentexte in Almendra */ h1, h2, h3, button { font-family: var(--font-display); letter-spacing: .03em; } button small, #hud button small, #menu button small { font-family: var(--font-body); letter-spacing: 0; } input { font-family: var(--font-body); } #menu h1 { font-weight: 400; } #menu .sub { font-style: italic; font-size: 1.1rem; letter-spacing: .04em; opacity: .85; color: #d9c8f0; } .chip b { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; font-size: .95rem; } #msg, #trickmsg { font-family: var(--font-body); } #msg .sumhead, #end-title { font-family: var(--font-display); font-weight: 400; letter-spacing: .05em; } #rules .chap h3, #rules table th { font-family: var(--font-display); font-weight: 400; } #rules nav a { font-family: var(--font-display); letter-spacing: .04em; } #hud button, #menu button, #lobby button, #endpanel button, #rules .close { font-family: var(--font-display); } #hud button small, #menu button small, #lobby button small { font-family: var(--font-body); } /* Pirata One wirkt bei gleicher Schriftgröße kleiner: Knöpfe etwas größer */ #menu button { font-size: 1.45rem; } #menu button small { font-size: .98rem; opacity: .8; } #hud button { font-size: 1.05rem; } #hud button small { font-size: .85rem; } .dock button { font-size: 1.2rem; } #continue { font-size: 1.25rem !important; } .chip { font-size: .9rem; } .chip span { font-size: .85rem; } #trumpchip, #ledchip { font-size: 1rem; } /* Almendra hat historische Ligaturen (z. B. langes ſ in „st“): abschalten, damit Texte normal aussehen */ html, body, button, input { font-variant-ligatures: none; font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "clig" 0; } #rules .chap h3 { font-size: 1.25rem; font-variant: normal; letter-spacing: .04em; } /* Gold-Ton des Logos für die Titel der Hauptmenü-Knöpfe (nicht für die Zusatzzeilen) */ html #menu #menu-main > button, html #menu #menu-main > button:hover, html #menu #menu-main > button:focus, html #menu #menu-main > button:active { color: #e9b94a; text-shadow: 0 1px 0 #3a2208, 0 0 10px #c8861f44; } html #menu #menu-main > button small { color: #f0e6ff; text-shadow: none; } /* Schlichter Standard-Rahmen (frame_simple): 9-Teile-Rahmen, nur die geraden Kanten werden gestreckt, die Ecken bleiben scharf */ html.frames-menu #menu .count button, html.frames-menu #menu #mp button, html.frames-menu #menu .ghost, html.frames-menu #lobby button:not(.go), html.frames-menu #hud #bar button, html.frames-menu #endpanel button, html.frames-menu .dock { --fill: #1b1233; border: 12px solid transparent !important; border-image: var(--frame-simple) 58 / 12px stretch !important; border-radius: 0 !important; background: var(--fill) !important; background-clip: padding-box !important; backdrop-filter: none; box-shadow: none; } html.frames-menu #menu .count button, html.frames-menu #menu #mp button, html.frames-menu #menu .ghost, html.frames-menu #lobby button:not(.go), html.frames-menu #hud #bar button, html.frames-menu #endpanel button { padding: 6px 14px !important; } html.frames-menu #menu .count button:hover:not(:disabled), html.frames-menu #menu #mp button:hover:not(:disabled), html.frames-menu #menu .ghost:hover, html.frames-menu #lobby button:not(.go):hover:not(:disabled), html.frames-menu #hud #bar button:hover, html.frames-menu #endpanel button:hover { --fill: #33235a; filter: brightness(1.12); } html.frames-menu #menu .count button.on, html.frames-menu #hud #bar button.on { --fill: #3b2a63; border-image-source: var(--frame-simple_on) !important; color: #fff4dc; } html.frames-menu .dock { --fill: #140d24; padding: 6px 16px !important; } /* Auch Eingabefelder (Name, Code) und die Dragon's-Age-Felder bekommen den schlichten Rahmen */ html.frames-menu #menu input:not([type=checkbox]), html.frames-menu #lobby input:not([type=checkbox]), html.frames-menu #menu label.ext, html.frames-menu #lobby label.ext, html.frames-menu #bar .chk { --fill: #1d1236; border: 12px solid transparent !important; border-image: var(--frame-simple) 58 / 12px stretch !important; border-radius: 0 !important; background: var(--fill) !important; background-clip: padding-box !important; backdrop-filter: none; box-shadow: none; } html.frames-menu #menu input:not([type=checkbox]), html.frames-menu #lobby input:not([type=checkbox]) { padding: 4px 12px; } html.frames-menu #menu label.ext, html.frames-menu #lobby label.ext, html.frames-menu #bar .chk { --fill: #1b1233; padding: 6px 14px; } /* Anleitung: schärfer lesen. Keine künstlich verfettete/verkleinerte Schrift (font-synthesis aus, kein small-caps), dunklerer Text, kein Mischmodus-Layer über dem Papier */ #rules, #rules * { font-synthesis: none; } #rules .book { color: #2b1807; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-size: 1.08rem; } #rules .chap { font-size: 1.08rem; line-height: 1.6; } #rules .chap h3 { font-variant: normal; font-size: 1.3rem; letter-spacing: .02em; color: #5e1808; } /* Rundenwertung: schlichter Rahmen (9 Teile), Füllung bleibt im Innenbereich */ html.frames-menu #msg.sum { --fill: #130c26; border: 12px solid transparent !important; border-image: var(--frame-simple) 58 / 12px stretch !important; border-radius: 0 !important; background: var(--fill) !important; background-clip: padding-box !important; backdrop-filter: none; box-shadow: none; padding: 12px 22px !important; } /* Namen mittig */ #players .chip { text-align: center; } /* Schlichter Rahmen über den Renderer (js/frames.js): Rahmenbild und Füllung exakt in Boxgröße, Füllung genau im Rahmeninneren */ html.frames-menu #menu .count button, html.frames-menu #menu #mp button, html.frames-menu #menu .ghost, html.frames-menu #lobby button:not(.go), html.frames-menu #hud #bar button, html.frames-menu #endpanel button, html.frames-menu .dock, html.frames-menu #menu input:not([type=checkbox]), html.frames-menu #lobby input:not([type=checkbox]), html.frames-menu #menu label.ext, html.frames-menu #lobby label.ext, html.frames-menu #bar .chk, html.frames-menu #msg.sum { border: none !important; border-image: none !important; border-radius: 0 !important; backdrop-filter: none; box-shadow: none; background: var(--fr, none) 0 0 / 100% 100% no-repeat, linear-gradient(var(--fill), var(--fill)) var(--inl, 6px) var(--int, 6px) / calc(100% - var(--inl, 6px) - var(--inr, 6px)) calc(100% - var(--int, 6px) - var(--inb, 6px)) no-repeat !important; } html.frames-menu #menu .count button, html.frames-menu #menu #mp button, html.frames-menu #menu .ghost, html.frames-menu #lobby button:not(.go), html.frames-menu #hud #bar button, html.frames-menu #endpanel button, html.frames-menu #menu input:not([type=checkbox]), html.frames-menu #lobby input:not([type=checkbox]), html.frames-menu #menu label.ext, html.frames-menu #lobby label.ext, html.frames-menu #bar .chk { padding: var(--fp-simple, 8px 14px) !important; } html.frames-menu .dock { padding: 10px 20px !important; } html.frames-menu #msg.sum { padding: 14px 24px !important; } /* Spieler-Chips oben: Name, darunter Ansage (Megafon) und gewonnene Stiche (Dolch), nicht mehr nebeneinander; Gesamtleiste mittig auf der Seite */ #players .chip { min-width: 0; } #players .chip span.ic { display: block; font-size: .95rem; opacity: .95; line-height: 1.3; } /* Mitspieler: Avatar, Name darunter, nach innen aufgefächerte Kartenrücken */ #opps { position: absolute; inset: 0; pointer-events: none; transition: opacity .25s; } #opps.dim { opacity: 0; } #opps .opp { position: absolute; width: 0; height: 0; } #opps .av { position: absolute; width: var(--av); height: var(--av); left: calc(var(--av) / -2); top: calc(var(--av) / -2); border-radius: 50%; object-fit: cover; border: 2px solid #f6d77a99; background: #1d1236; box-shadow: 0 2px 10px #000a; z-index: 5; } #opps .opp.turn .av { border-color: #f6d77a; box-shadow: 0 0 16px 3px #f6d77acc; } #opps .nm { position: absolute; left: -70px; width: 140px; top: calc(var(--av) / 2 + 3px); text-align: center; font-family: var(--font-display); font-size: calc(1rem * var(--f)); color: #f6d77a; text-shadow: 0 1px 4px #000, 0 0 8px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 6; } #opps .fan { position: absolute; width: 0; height: 0; z-index: 2; } #opps .bk { position: absolute; left: calc(var(--cw) / -2); top: calc(var(--ch) * -1); width: var(--cw); height: var(--ch); transform-origin: 50% 100%; border-radius: 3px; border: 1px solid #d8b66a99; background: #2a1d47 url("cards/Back.jpg") center / cover; box-shadow: 0 1px 4px #0009; filter: brightness(1.35); } #opps .opp.me .nm { left: calc(var(--av) / 2 + 8px); top: 50%; transform: translateY(-50%); width: auto; max-width: 120px; text-align: left; } #opps .opp.me { transition: opacity .2s; } #opps .opp.me .nm { font-size: calc(1.2rem * var(--f)); } /* Spiellänge (Runden, schnelles Spiel) in Solo-Setup und Lobby */ #lobby .count { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } #lobby .count span { opacity: .7; margin-right: 4px; } #menu .count, #lobby .count { row-gap: 6px; } #lobby .count button.on, #menu .count button.on { background: #f6d77a; color: #1b1030; } #menu .count button, #lobby .count button { white-space: nowrap; }