body .game-farbpfad .game-art { color:#fff; background:conic-gradient(from 25deg,#e24b45 0 25%,#2589c2 25% 50%,#efbf32 50% 75%,#39a965 75%); border:3px solid #f5ead0; box-shadow:0 3px 12px #0004; }
body .game-library:has(.game-farbpfad:not(.control-hidden)) { grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }

body .fp-panel { --fp-ink:#f9f4e8; width:min(1180px,100%); height:100%; min-height:0; margin:auto; display:grid; grid-template-rows:auto minmax(190px,1fr) auto auto auto; align-content:stretch; justify-items:center; gap:clamp(8px,1.3vh,16px); padding:clamp(12px,2vw,24px); overflow:auto; border:1px solid #f2d98d66; border-radius:22px; color:var(--fp-ink); background:radial-gradient(ellipse at 50% 38%,#22544d 0,#143b36 54%,#102e2d 100%); box-shadow:inset 0 0 0 5px #ffffff08,0 14px 36px #08171955; }
body .fp-header { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:3px 5px 12px; border-bottom:1px solid #ffffff24; }
body .fp-header > div { display:grid; gap:5px; }
body .fp-header strong { font:600 clamp(1.05rem,2.4vw,1.55rem)/1.15 system-ui,sans-serif; letter-spacing:-.025em; }
body .fp-eyebrow { color:#f3cf76; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
body .fp-pile-count { padding:8px 12px; border:1px solid #ffffff26; border-radius:999px; color:#e4eadc; font:700 .78rem/1 system-ui,sans-serif; white-space:nowrap; }

body .fp-center { position:relative; width:100%; min-height:190px; display:grid; place-items:center; align-content:center; gap:12px; }
body .fp-piles { width:min(620px,100%); min-height:180px; display:flex; align-items:center; justify-content:center; gap:clamp(48px,13vw,150px); }
body .fp-draw-pile { position:relative; width:clamp(82px,10vw,112px); aspect-ratio:.69; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:0; border-radius:14px; color:#f8f4e8; background:repeating-linear-gradient(45deg,#172f38 0 7px,#20444b 7px 14px); box-shadow:4px 5px 0 #d1bd8d,8px 9px 0 #f2e6cd,0 13px 24px #061b1a88; transform:rotate(-7deg); cursor:pointer; }
body .fp-draw-pile::after { content:''; position:absolute; inset:7px; border:1px solid #f8f4e877; border-radius:9px; }
body .fp-draw-pile span,body .fp-draw-pile small { position:relative; z-index:1; }
body .fp-draw-pile span { font:900 clamp(1.45rem,3vw,2rem)/1 system-ui,sans-serif; }
body .fp-draw-pile small { font:800 .58rem/1 system-ui,sans-serif; letter-spacing:.15em; }
body .fp-draw-pile:disabled { opacity:.55; cursor:default; }
body .fp-discard { position:relative; width:clamp(108px,16vw,160px); aspect-ratio:.69; display:grid; place-items:center; }
body .fp-color-current { position:absolute; z-index:0; inset:-15%; display:grid; place-items:center; border-radius:50%; background:transparent; }
body .fp-color-current::before { content:''; position:absolute; inset:4%; border:2px solid #fff; border-radius:50%; background:var(--fp-tone); opacity:.32; filter:blur(1px); }
body .fp-color-current span { display:grid; gap:3px; color:#fff; text-align:center; font:800 .48rem/1.1 system-ui,sans-serif; letter-spacing:.13em; text-shadow:0 1px 4px #000; }
body .fp-color-current strong { font-size:.8rem; letter-spacing:0; }
body .fp-center-caption { position:absolute; bottom:-27px; color:#d7e3d9; font:800 .63rem/1 system-ui,sans-serif; letter-spacing:.1em; white-space:nowrap; }
body .fp-drawn-note { padding:7px 12px; border:1px solid #f3cf7666; border-radius:999px; color:#fff0c5; background:#071c1b66; font:600 .76rem/1.2 system-ui,sans-serif; }

body .fp-coral { --fp-tone:#e34b45; --fp-ink:#fff9ed; --fp-accent:#9c282b; }
body .fp-ocean { --fp-tone:#238bc5; --fp-ink:#f5fbff; --fp-accent:#124e78; }
body .fp-leaf { --fp-tone:#32a865; --fp-ink:#f3fff5; --fp-accent:#17693f; }
body .fp-sun { --fp-tone:#efbd30; --fp-ink:#2b260f; --fp-accent:#74500c; }
body .fp-wild,body .fp-wild4 { --fp-tone:#273a3c; --fp-ink:#fff9ed; --fp-accent:#17292c; }
body .fp-color-coral { --fp-tone:#e34b45; background:#e34b45; }
body .fp-color-ocean { --fp-tone:#238bc5; background:#238bc5; }
body .fp-color-leaf { --fp-tone:#32a865; background:#32a865; }
body .fp-color-sun { --fp-tone:#efbd30; background:#efbd30; }
body .fp-color-current.fp-color-coral,body .fp-color-current.fp-color-ocean,body .fp-color-current.fp-color-leaf,body .fp-color-current.fp-color-sun { background:transparent; }

body .fp-top-card,body .fp-card { position:relative; isolation:isolate; overflow:hidden; border:2px solid #fff9ed; border-radius:16px; color:var(--fp-ink); background:var(--fp-tone); box-shadow:0 8px 16px #061a1a55,inset 0 0 0 2px #071c1c24; }
body .fp-top-card::before,body .fp-card::before { content:''; position:absolute; z-index:0; inset:5px; border:1px solid #ffffff88; border-radius:12px; pointer-events:none; }
body .fp-top-card::after,body .fp-card::after { content:''; position:absolute; z-index:-1; inset:16% 10%; border-radius:50%; background:#fff9ed; transform:rotate(-27deg) scaleX(.58); box-shadow:0 0 0 2px #ffffff5c; }
body .fp-tone-wild.fp-card::after,body .fp-top-card.fp-tone-wild::after { z-index:0; inset:0; border-radius:0; background:conic-gradient(#e34b45 0 25%,#238bc5 25% 50%,#efbd30 50% 75%,#32a865 75%); transform:none; box-shadow:none; }
body .fp-top-card { position:absolute; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:14px 8px; transform:rotate(4deg); box-shadow:0 14px 25px #05191888,inset 0 0 0 2px #071c1c24; }
body .fp-top-card .fp-card-corner { display:none; }
body .fp-top-card .fp-card-mark { height:70%; }
body .fp-top-card .fp-card-name { position:absolute; bottom:10px; font-size:.62rem; }
body .fp-hand { width:min(100%,1080px); min-height:clamp(128px,21vh,190px); display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:clamp(6px,.8vw,12px); padding:12px 10px 16px; overflow-x:auto; overflow-y:visible; overscroll-behavior-inline:contain; scrollbar-color:#f3cf7688 transparent; }
body .fp-card { flex:0 0 clamp(76px,8vw,106px); height:clamp(112px,14vw,150px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:13px 6px 11px; cursor:pointer; transition:transform .16s,box-shadow .16s,filter .16s; touch-action:none; user-select:none; -webkit-user-select:none; }
body .fp-card:not(:disabled).is-playable { box-shadow:0 8px 15px #061a1a66,0 0 0 2px #f6d16d; }
body .fp-card:not(:disabled).is-playable:hover { transform:translateY(-9px) rotate(-1deg); box-shadow:0 14px 23px #061a1a88,0 0 0 3px #f6d16d; }
body .fp-card.is-selected { transform:translateY(-14px); outline:4px solid #ffe28a; outline-offset:2px; box-shadow:0 17px 26px #061a1aaa; }
body .fp-card:disabled { filter:saturate(.72) brightness(.82); cursor:default; }
body .fp-card.is-pointer-dragging { opacity:.32; }
body .fp-center.is-card-drop-target { outline:3px solid #ffe28a; outline-offset:7px; border-radius:20px; }
body .fp-card-corner { position:absolute; z-index:1; top:8px; left:10px; color:var(--fp-ink); font:900 .76rem/1 system-ui,sans-serif; text-shadow:0 1px 3px #0005; }
body .fp-corner-bottom { top:auto; right:10px; bottom:8px; left:auto; transform:rotate(180deg); }
body .fp-card-mark { position:relative; z-index:1; flex:1; width:100%; display:grid; place-items:center; color:var(--fp-accent); }
body .fp-mark-number { font:900 clamp(2.7rem,5vw,4.2rem)/1 system-ui,sans-serif; letter-spacing:-.08em; text-shadow:0 1px 0 #fff8; }
body .fp-card-name { position:relative; z-index:1; max-width:100%; padding:3px 7px; border-radius:999px; color:var(--fp-accent); background:#fff9ed; font:850 clamp(.54rem,.78vw,.68rem)/1 system-ui,sans-serif; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; }
body .fp-mark-icon { width:min(72%,54px); fill:none; stroke:var(--fp-accent); stroke-width:5; stroke-linecap:round; }
body .fp-mark-draw { padding:6px 8px; border:3px solid var(--fp-accent); border-radius:12px; color:var(--fp-accent); font:950 1.35rem/1 system-ui,sans-serif; }
body .fp-mark-wild { width:clamp(37px,4vw,54px); aspect-ratio:1; position:relative; display:block; transform:rotate(45deg); }
body .fp-mark-wild i { position:absolute; width:50%; height:50%; border:2px solid #fff9ed; }
body .fp-mark-wild i:nth-child(1) { top:0; left:0; border-radius:100% 15% 15% 15%; background:#e34b45; }
body .fp-mark-wild i:nth-child(2) { top:0; right:0; border-radius:15% 100% 15% 15%; background:#238bc5; }
body .fp-mark-wild i:nth-child(3) { right:0; bottom:0; border-radius:15% 15% 100% 15%; background:#efbd30; }
body .fp-mark-wild i:nth-child(4) { bottom:0; left:0; border-radius:15% 15% 15% 100%; background:#32a865; }

body .fp-controls { width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
body .fp-controls button { min-height:42px; padding:8px 15px; border-radius:10px; font-size:.8rem; }
body .fp-controls .fp-primary-action { min-width:210px; color:#1c2e26; background:linear-gradient(#ffe18a,#e7bd55); border-color:#fff0bd; font-weight:850; box-shadow:0 4px 12px #061a1a55; }
body .fp-color-picker { min-height:58px; display:flex; align-items:center; justify-content:center; gap:13px; }
body .fp-color-picker > span { color:#f3cf76; font:850 .7rem system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
body .fp-colors { display:flex; gap:8px; }
body button.fp-color { width:clamp(72px,8vw,92px); min-width:0; min-height:46px; padding:5px 8px; border:2px solid #fff9ed; border-radius:999px; color:#fff; box-shadow:0 3px 8px #061a1a66; transition:transform .12s,outline-color .12s,filter .12s; }
body button.fp-color span { font:850 .67rem/1 system-ui,sans-serif; text-shadow:0 1px 3px #071c1caa; }
body button.fp-color.fp-color-sun span { color:#28220d; text-shadow:none; }
body button.fp-color:disabled { display:none; }
body button.fp-color:not(:disabled):hover { transform:translateY(-3px) scale(1.04); outline:3px solid #ffe28a; outline-offset:2px; }
body .fp-last-call { margin:0; color:#d9e5d8; font-size:.74rem; text-align:center; }
body .fp-empty,body .fp-spectator { color:#e5ecdf; }
body .fp-rules { margin:0; padding-left:22px; display:grid; gap:9px; }

@media (max-width:760px) { body .game-library:has(.game-farbpfad:not(.control-hidden)) { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(7,minmax(0,1fr)); } body .fp-panel { grid-template-rows:auto minmax(155px,1fr) auto auto auto; } body .fp-hand { justify-content:flex-start; } }
@media (max-width:520px) { body .fp-panel { gap:5px; padding:8px; border-radius:14px; } body .fp-header { gap:8px; padding-bottom:7px; } body .fp-header strong { font-size:.9rem; } body .fp-eyebrow { font-size:.55rem; } body .fp-pile-count { padding:7px 9px; font-size:.65rem; } body .fp-center { min-height:145px; } body .fp-piles { min-height:130px; gap:clamp(40px,16vw,75px); } body .fp-draw-pile { width:70px; border-radius:11px; } body .fp-discard { width:92px; } body .fp-top-card { border-radius:12px; } body .fp-top-card::before,body .fp-card::before { inset:4px; border-radius:8px; } body .fp-center-caption { bottom:-21px; font-size:.52rem; } body .fp-hand { min-height:112px; justify-content:flex-start; gap:6px; padding:8px 7px 12px; } body .fp-card { flex-basis:67px; height:99px; border-radius:11px; } body .fp-mark-number { font-size:2.6rem; } body .fp-card-corner { top:7px; left:8px; font-size:.65rem; } body .fp-corner-bottom { top:auto; right:8px; bottom:7px; left:auto; } body .fp-card-name { font-size:.49rem; } body .fp-controls { gap:5px; } body .fp-controls button { min-height:38px; padding:6px 9px; font-size:.68rem; } body .fp-controls .fp-primary-action { min-width:155px; } body .fp-color-picker { min-height:44px; gap:7px; } body .fp-color-picker > span { font-size:.56rem; } body .fp-colors { gap:5px; } body button.fp-color { width:64px; min-height:38px; } body button.fp-color span { font-size:.56rem; } body .fp-last-call { font-size:.63rem; } }
@media (max-height:440px) { body .fp-panel { grid-template-rows:auto minmax(100px,1fr) auto auto auto; gap:4px; padding:5px; } body .fp-center { min-height:102px; } body .fp-piles { min-height:96px; } body .fp-draw-pile { width:56px; } body .fp-discard { width:72px; } body .fp-center-caption { bottom:-17px; font-size:.45rem; } body .fp-hand { min-height:83px; padding-block:4px; } body .fp-card { flex-basis:57px; height:78px; } body .fp-card-name { font-size:.42rem; } body .fp-mark-number { font-size:1.9rem; } body .fp-last-call { display:none; } }