.fp-party { --fp-ink:#171933; --fp-color:#fadaa2; position:relative; min-width:0; container-type:inline-size; isolation:isolate; color:var(--fp-ink); background:#fff9eb; border:3px solid var(--fp-ink); border-radius:1rem; overflow:clip; font-family:'Avenir Next','Trebuchet MS',system-ui,sans-serif; box-shadow:0 4px 0 var(--fp-ink); }
.fp-party .fp-head,.fp-foot,.fp-legends { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.55rem; }
.fp-head { padding:.7rem 1.05rem; background:var(--fp-color); border-bottom:2px solid var(--fp-ink); }
.fp-party .fp-head h3 { margin:0; color:var(--fp-ink); font-size:clamp(1.05rem,3cqi,1.6rem); line-height:1.12; }
.fp-head small { font-weight:750; font-size:.76rem; }
.fp-clock { font-variant-numeric:tabular-nums; background:var(--fp-ink); color:#fff5dc; padding:.23rem .65rem; border-radius:1rem; }
.fp-foot { padding:.55rem 1rem; background:#ffedce; }
.fp-foot p,.fp-party .fp-isle-status { margin:0; font-size:.88rem; font-weight:600; }
.fp-rules { font-size:.8rem; padding:.4rem .9rem; border-top:1px solid #483d4c40; background:#fff8e7; }
.fp-rules summary { cursor:pointer; font-weight:700; }
.fp-rules p { margin:.35rem 0 .1rem; }
.fp-bombe .fp-head { color:#fff0da; background:linear-gradient(100deg,#ffbb72,#f8a16a); }
.fp-ring { position:relative; height:clamp(270px,min(48vh,51cqi),410px); overflow:hidden; background:radial-gradient(ellipse at 50% 47%,#78426b 0,#4d315d 48%,#302748 88%); }
.fp-ring::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 4px 7px,#f6cd8755 1.3px,transparent 1.6px),radial-gradient(circle at 21px 15px,#b494c344 1.2px,transparent 1.6px); background-size:47px 43px; }
.fp-orbit { position:absolute; inset:15% 15% 17%; border:2px dashed #e4c8b365; border-radius:50%; }
.play .fp-seat { --seat:#cfc4ea; position:absolute; z-index:2; display:grid; justify-items:center; align-content:center; gap:.08rem; min-width:min(7rem,22cqi); margin:0; transform:translate(-50%,-50%); border:2px solid #211d37; border-radius:12px; background:#f9ecdb; color:#27253d; padding:.3rem .45rem; line-height:1.1; box-shadow:1px 3px 0 #241d3a; }
.fp-seat[data-tint="1"],.fp-legends [data-tint="1"],.fp-isle-token[data-tint="1"] { --seat:#edaa8a; }
.fp-seat[data-tint="2"],.fp-legends [data-tint="2"],.fp-isle-token[data-tint="2"] { --seat:#91d0d0; }
.fp-seat[data-tint="3"],.fp-legends [data-tint="3"],.fp-isle-token[data-tint="3"] { --seat:#f0cc71; }
.fp-seat[data-tint="4"],.fp-legends [data-tint="4"],.fp-isle-token[data-tint="4"] { --seat:#b2da91; }
.fp-seat[data-tint="5"],.fp-legends [data-tint="5"],.fp-isle-token[data-tint="5"] { --seat:#dfafe5; }
.play .fp-seat:disabled { opacity:1;cursor:default; }
.play .fp-seat[data-target=true] { border-color:#ffdb6c;box-shadow:0 0 0 2px #47374f,0 0 0 4px #efd397; }
.play .fp-seat[data-holder=true] { background:#ffe6aa; }
.fp-seat strong { font-size:clamp(.76rem,1.6cqi,1rem); }
.fp-seat small { font-weight:600; font-size:.65rem; }
.fp-avatar { position:relative; background:var(--seat); border:1.6px solid #31223f; border-radius:45% 52% 47% 42%; width:24px;height:20px; }
.fp-avatar::before { content:'';position:absolute;top:6px;left:5px;width:2.5px;height:4px;border-radius:50%;background:#30243f;box-shadow:9px 0 #30243f; }
.fp-avatar i { position:absolute;left:7px;bottom:3px;width:8px;height:4px;border-bottom:1.4px solid #30243f;border-radius:50%; }
.fp-token { position:absolute;z-index:3;width:clamp(29px,5cqi,47px);aspect-ratio:1;pointer-events:none;transform:translate(-50%,-50%);transition:left .4s cubic-bezier(.16,.75,.23,1),top .4s cubic-bezier(.16,.75,.23,1);background:radial-gradient(circle at 32% 24%,#fff0b2 0 8%,#ffd758 9% 23%,#ed7f59 24% 46%,#843f7a 47% 56%,#ffb966 57% 70%,#be5565 73%);border:2px solid #261b3e;border-radius:46% 50% 47% 48%;box-shadow:0 3px 0 #281d40,0 0 17px #ffcf6555; }
.fp-token::before,.fp-token::after { content:'';position:absolute;top:-11%;left:33%;width:23%;height:23%;background:#a0dcce;border:1.6px solid #2b2940;transform:rotate(-24deg);border-radius:45% 15%; }
.fp-token::after { left:51%;top:-12%;transform:rotate(18deg);background:#efaa8c; }
.fp-confetti { pointer-events:none;position:absolute;z-index:4;inset:0; }
.fp-confetti i { display:none;position:absolute;left:50%;top:45%;width:8px;height:13px;transform:rotate(var(--spin)) translateY(-60px);background:#ffd765; }
.fp-confetti i:nth-child(3n+1) {background:#96d9cc;border-radius:50%;} .fp-confetti i:nth-child(3n+2){background:#e3adf0;}
.fp-bombe:not([data-phase=playing]) .fp-confetti i {display:block;animation:fp-pop .55s ease-out;}
@keyframes fp-pop{from{transform:rotate(var(--spin)) translateY(0) scale(.1)}to{transform:rotate(var(--spin)) translateY(-60px) scale(1)}}
.play .fp-ready {background:#f3ca68;color:#372b40;border:2px solid #513851;min-height:42px;font-size:.85rem;}
.fp-islands { --fp-color:#b2dfcb; }
.fp-water {position:relative;width:100%;height:clamp(255px,min(47vh,58cqi),420px);background:repeating-radial-gradient(ellipse at 20% 100%,#3f9da9 0 22px,#489fae 23px 26px,#37929d 27px 53px);overflow:hidden;}
.fp-tiles,.fp-tokens {position:absolute;inset:3% 8%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));}
.fp-tokens {pointer-events:none;display:block;}
.play .fp-isle {--isle:#e9c477;display:grid;place-content:end center;justify-self:center;align-self:center;gap:0;position:relative;min-width:0;width:83%;height:82%;margin:0;border:2px solid #244c50;border-radius:43% 39% 37% 42% / 34% 44% 37% 46%;color:#26383d;background:var(--isle);box-shadow:0 5px #977752,0 8px #2f828d;transition:opacity .3s,transform .3s;font-weight:800;line-height:1;padding:.12rem .2rem .38rem;}
.play .fp-isle[data-symbol=welle] {--isle:#9dd3ec;} .play .fp-isle[data-symbol=blatt] {--isle:#a5d88d;}
.play .fp-isle[data-symbol=stern] {--isle:#dfadd8;}
.play .fp-isle:hover:enabled {background:var(--isle);outline:2px solid #fffcdf;outline-offset:2px;}
.play .fp-isle:disabled {opacity:1;}
.play .fp-isle[data-sunken=true] {opacity:.25;transform:translateY(4px);}
.fp-isle>span {font:750 clamp(1.45rem,4.3cqi,2.25rem)/.96 Georgia,serif;}
.fp-isle>small {font-size:clamp(.68rem,1.7cqi,.85rem);}
.fp-isle-token,.fp-legends i {--seat:#d8c0e8;display:grid;place-items:center;width:clamp(22px,3.4cqi,31px);height:clamp(22px,3.4cqi,31px);border:2px solid #253845;border-radius:50% 48% 40% 44%;font-weight:850;font-size:.86rem;background:var(--seat);color:#273343;}
.fp-isle-token {position:absolute;box-shadow:0 2px 3px #19414e60;}
.fp-isle-token.fp-own {outline:2px solid white;outline-offset:1px;}
.fp-legends {padding:.45rem .7rem;justify-content:center;background:#e7efcf;}
.fp-legends span {display:inline-flex;align-items:center;gap:.2rem;font-size:.77rem;font-weight:650;}
.fp-legends i {width:19px;height:19px;font-size:.68rem;background:var(--seat,#d8c0e8);border-width:1px;}
.fp-party .fp-isle-status {padding:.4rem;text-align:center;background:#eff4dc;}
@media (prefers-reduced-motion:reduce){.fp-party *, .fp-party *::before,.fp-party *::after{transition:none!important;animation:none!important;}}
@media(max-height:740px) and (min-width:650px){.fp-ring,.fp-water{height:min(48vh,345px);}}