#family-toggle{position:absolute;right:38px;top:30px;z-index:12;border:0;background:#211b1466;border-radius:24px;padding:10px 16px;color:#f3e5cc;font:12px Arial;backdrop-filter:blur(12px)}
#family-panel{position:absolute;right:26px;top:80px;bottom:100px;width:min(350px,calc(100vw - 32px));z-index:25;background:#211a13ed;backdrop-filter:blur(24px);border:1px solid #eed7ac25;border-radius:12px;box-shadow:0 16px 50px #0005;display:flex;flex-direction:column;padding:20px;color:#f3e5cc}
#family-panel[hidden],#family-name-form[hidden],#family-compose[hidden],#family-login[hidden]{display:none}
#family-panel header{position:static;display:flex;justify-content:space-between;align-items:center;gap:10px}#family-panel h2{font:24px Georgia;margin:0}#family-close{border:0;background:none;font-size:25px;padding:4px 8px}#family-people{font-size:11px;line-height:1.6;color:#d8c6a6;margin:12px 0}#family-messages{flex:1;overflow:auto;min-height:50px;scrollbar-width:thin;font-size:13px;line-height:1.5;overflow-wrap:anywhere}#family-messages p{margin:0 0 14px}#family-messages strong{display:block;font-size:11px;color:#d5b886;margin-bottom:3px}#family-messages .arrival{font:italic 12px Georgia;color:#c3b396}#family-status{font-size:11px;color:#d5b886;min-height:15px;margin:8px 0}#family-panel input,#family-panel textarea{width:100%;background:#ffffff09;color:inherit;border:1px solid #e2c89f35;border-radius:6px;padding:10px;font:14px Arial;resize:none}#family-panel label{display:block;font:13px Georgia;margin-bottom:8px}#family-panel form button{border:0;background:#ddc49c;color:#30261b;border-radius:5px;padding:8px 14px;margin-top:8px;float:right}#family-panel form:after{content:'';display:block;clear:both}#family-login{color:#efd8b1;padding:12px 0}#family-notice{position:absolute;z-index:24;top:85px;left:50%;transform:translateX(-50%);pointer-events:none;color:#f4e7cd;text-shadow:0 2px 8px #000;font:italic 17px Georgia;opacity:0;transition:opacity .8s;white-space:nowrap}#family-notice.visible{opacity:1}
@media(max-width:650px){#family-toggle{right:16px;top:18px}#family-panel{right:16px;top:64px;bottom:80px}#family-notice{top:70px;font-size:14px}}
/* Portraits use the approved originals, losslessly encoded, with CSS framing only. */
.portrait-face{display:inline-block;flex-shrink:0;width:48px;height:48px;border-radius:50%;border:2px solid #c4a16b;background-color:#f4ecdc;background-size:125%;background-position:50% 25%;background-repeat:no-repeat;color:#304b3f;text-align:center;font:24px/44px Georgia;overflow:hidden}
.portrait-face[data-character=kimball]{background-image:url('assets/portraits/kimball-natalie.webp');background-size:240%;background-position:7% 28%}.portrait-face[data-character=natalie]{background-image:url('assets/portraits/kimball-natalie.webp');background-size:240%;background-position:94% 28%}.portrait-face[data-character=matthew]{background-image:url('assets/portraits/matthew-greg.webp');background-size:240%;background-position:7% 25%}.portrait-face[data-character=greg]{background-image:url('assets/portraits/matthew-greg.webp');background-size:240%;background-position:93% 25%}
.portrait-face[data-character=becca]{background-image:url('assets/portraits/becca.webp')}.portrait-face[data-character=dad]{background-image:url('assets/portraits/dad.webp')}.portrait-face[data-character=emily]{background-image:url('assets/portraits/emily.webp')}.portrait-face[data-character=travis]{background-image:url('assets/portraits/travis.webp')}.portrait-face[data-character=tommy]{background-image:url('assets/portraits/tommy.webp')}.portrait-face[data-character=mom]{background-image:url('assets/portraits/mom.webp')}
#portrait-bowl{position:absolute;left:48.7%;top:56.2%;width:4.7%;height:5.4%;border:0;background:transparent;border-radius:50%;z-index:4;filter:drop-shadow(0 4px 4px #0008)}.bowl-tokens{position:absolute;left:10%;top:0;width:80%;height:55%;display:flex;align-items:center;justify-content:center}.bowl-tokens .portrait-face{position:absolute;width:36%;height:auto;aspect-ratio:1;border-width:1px;transform:rotate(-18deg)}.bowl-tokens .portrait-face:nth-child(1){left:8%}.bowl-tokens .portrait-face:nth-child(2){left:32%;top:-20%;transform:rotate(10deg)}.bowl-tokens .portrait-face:nth-child(3){right:4%;transform:rotate(22deg)}#bowl-label{position:absolute;top:110%;left:50%;transform:translateX(-50%);white-space:nowrap;font:italic clamp(11px,1vw,17px) Georgia;color:#ffebc6;background:#21170de0;padding:6px 12px;border:1px solid #d6af7066;border-radius:20px}.unclaimed .bowl-tokens{animation:bowl-glow 3s ease-in-out infinite}@keyframes bowl-glow{50%{filter:drop-shadow(0 0 9px #ffd28a)}}
#family-panel{background:#18352ff5;border-color:#ac8c575c;width:min(440px,calc(100vw - 32px));border-radius:18px}#family-panel h2{font-size:25px}#family-count{font-size:11px;color:#d6c9af;margin:8px 0}#family-people{display:flex;flex-wrap:wrap;gap:12px 8px;max-height:176px;overflow:auto;padding:8px 0 14px;border-bottom:1px solid #d5bc8c33;flex-shrink:0}.family-person{width:54px;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:0;color:#eaddc3;font:10px Arial}.family-person .portrait-face{width:43px;height:43px;box-shadow:0 0 0 2px #18352f,0 0 0 3px #7c9a72}#family-identity{display:flex;gap:9px;align-items:center;font-size:12px;border:0;background:none;padding:0 0 14px;text-align:left;color:#f1dfbd}#family-identity .portrait-face{width:30px;height:30px;font-size:17px;line-height:26px}#family-messages .family-message{display:flex;gap:10px}#family-messages .family-message>.portrait-face{width:36px;height:36px}.family-message>div{background:#f4eadb0b;border-radius:0 12px 12px;padding:9px 12px;min-width:0}#family-choose{border:1px solid #b99a65;background:#e9d9b9;color:#243a30;padding:12px;border-radius:8px;width:100%}
#portrait-picker{color:#f3e7ce;background:radial-gradient(ellipse at top,#35564a,#142c25 80%);width:min(760px,calc(100vw - 28px));max-height:calc(100dvh - 36px);border:1px solid #bba06c;border-radius:22px;padding:30px 34px;text-align:center;box-shadow:0 30px 100px #0009;overflow:auto}#portrait-picker::backdrop{background:#100e0aa8;backdrop-filter:blur(5px)}#portrait-close{position:absolute;top:12px;right:14px;border:0;background:none;font-size:27px}#portrait-picker h2{font:38px Georgia;margin:10px 0}.portrait-eyebrow{font:10px Arial;letter-spacing:.22em;color:#d5b780;margin:10px 0}.portrait-intro{font:14px Georgia;color:#d7cbb3;margin:0 0 24px}#portrait-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 12px}.portrait-choice{display:flex;align-items:center;flex-direction:column;gap:9px;border:1px solid transparent;background:transparent;border-radius:14px;padding:9px 3px;font:15px Georgia;transition:background .2s,transform .2s}.portrait-choice .portrait-face{width:min(100%,98px);height:auto;aspect-ratio:1;box-shadow:0 5px 12px #0005;border:3px solid #b99c67}.portrait-choice:hover{background:#ffffff0c;transform:translateY(-3px)}.portrait-choice[aria-pressed=true]{background:#e3c68822;border-color:#dbc18d}.portrait-choice[aria-pressed=true] .portrait-face{border-color:#ffdf9c;box-shadow:0 0 20px #c3a06855}#portrait-confirm{display:block;margin:18px auto 0;padding:13px 28px;border:1px solid #f3ddb3;background:#e4cea5;color:#20372e;border-radius:25px;font-size:14px}#portrait-confirm:disabled{opacity:.45;cursor:default}#portrait-status{font-size:13px;color:#f0c49c}#portrait-login{color:#f1d5a2;font-size:14px}#portrait-login[hidden]{display:none}.portrait-footnote{font-size:11px;color:#bfbca8;margin:15px 0 0;line-height:1.5}
@media(max-width:650px){#portrait-picker{padding:24px 16px}#portrait-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 5px}#portrait-picker h2{font-size:30px}.portrait-choice .portrait-face{width:74px}.portrait-choice{font-size:13px;padding:5px}.portrait-intro{margin-bottom:14px}#family-panel{bottom:24px}#family-people{max-height:155px}}
@media(prefers-reduced-motion:reduce){.unclaimed .bowl-tokens{animation:none}.portrait-choice{transition:none}}
#portrait-bowl:before{content:'';position:absolute;inset:18% 0 32%;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,#6b431c 25%,#261b10 65%,#bd914a 68%,#edc77d 73%,#795021 79%);box-shadow:0 1px 2px #f3d49444}#portrait-bowl:after{content:'';position:absolute;left:2%;right:2%;top:44%;height:52%;border-radius:0 0 50% 50% / 0 0 95% 95%;background:linear-gradient(100deg,#3d2915,#b2823f 23%,#e2b66b 39%,#9d6b2d 58%,#4d3219 90%);box-shadow:0 5px 4px #0004,inset 0 1px #f4cd8999;pointer-events:none}.bowl-tokens{z-index:1}#bowl-label{z-index:2}

/* Portrait tokens rest in the photographed bowl rather than a second drawn bowl. */
#portrait-bowl{filter:none}
#portrait-bowl::before,#portrait-bowl::after{display:none}
#portrait-bowl .bowl-tokens{left:10%;top:10%;width:80%;height:42%;transform:perspective(180px) rotateX(42deg);filter:brightness(.96) saturate(.95) contrast(.98);animation:none}
#portrait-bowl .bowl-tokens .portrait-face{width:29%;border:1px solid #a28a65;box-shadow:1px 2px 2px #24160dbb;opacity:1}
#portrait-bowl .bowl-tokens .portrait-face:nth-child(1){left:7%;top:-8%;transform:rotate(-14deg)}
#portrait-bowl .bowl-tokens .portrait-face:nth-child(2){left:35%;top:18%;transform:rotate(3deg)}
#portrait-bowl .bowl-tokens .portrait-face:nth-child(3){right:7%;top:-8%;transform:rotate(14deg)}
#portrait-bowl #bowl-label{top:115%;background:none;border:0;border-radius:0;padding:3px 0;font:italic 10px Georgia;color:#e3cfad;text-shadow:0 1px 4px #20150b;opacity:0;transition:opacity .2s;pointer-events:none}
#portrait-bowl:hover #bowl-label,#portrait-bowl:focus-visible #bowl-label{opacity:.85}

/* Never paint empty ivory tokens while the portrait textures are loading. */
#portrait-bowl .bowl-tokens{visibility:hidden;opacity:0;transition:opacity .18s ease}
#portrait-bowl .bowl-tokens.portraits-ready{visibility:visible;opacity:1}