body.freebeer{background:radial-gradient(ellipse at 45% 0,#23443a,#0b1915 70%);color:#f6f2df}
.freebeer header{border-color:#466354}.freebeer .brand{color:#d8c38e}.freebeer header button,.freebeer button,.freebeer select{background:#233d32;border-color:#6d8167}.freebeer button:hover,.freebeer button:focus-visible{background:#3f5c42}
.freebeer #board{background:radial-gradient(ellipse at 48% 25%,#315346,#152e25 80%);border-color:#69866b;--w:calc((100% - 7 * 8px)/8)}
.freebeer #columns{grid-template-columns:repeat(8,minmax(0,1fr))}
.freebeer #top{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;flex:none}
.freebeer .side-table #top{grid-template-columns:repeat(2,var(--pile-width));grid-template-rows:repeat(4,var(--pile-height))}
.freebeer #top .slot{width:100%;height:var(--pile-height);border-color:#e0ca8b88;overflow:hidden}.freebeer .slot .card{top:0}
.freebeer .free-cell{background:linear-gradient(#153b2399,#0c2518aa),url(freebeer-back.webp) center/cover no-repeat;position:relative}
.freebeer .cell-label{font:600 clamp(10px,1.3vw,14px)/1.15 system-ui;position:absolute;bottom:3px;left:0;right:0;text-align:center;padding:3px;color:#fff4cf;background:#143523e8;pointer-events:auto}
.freebeer .card.back{background:#143523 url(freebeer-back.webp) center/cover no-repeat;border-color:#d4b56f}
.freebeer .zoom-panel{background:#244332;border-color:#c2b582}.freebeer #message{background:#173b29f5;color:#fff5d7;border-color:#d2c18477}
.freebeer .win-sign.beer-win{height:auto;text-align:center;position:relative;background:radial-gradient(ellipse,#3d5934,#173b29 75%);padding:12px}.freebeer .win-sign.beer-win img{position:static;transform:none;width:100px;height:142px;object-fit:cover;border-radius:10px;box-shadow:0 5px 15px #0007}.beer-win p{font-size:19px;line-height:1.4;color:#ffe8ab;margin:12px 0}
.freebeer header h1::before{content:'';display:inline-block;width:29px;height:38px;vertical-align:middle;margin-right:7px;background:url(freebeer-back.webp) center/cover;border-radius:5px}
@media(max-height:450px){.freebeer header h1::before{width:23px;height:33px}.freebeer .cell-label{font-size:10px;padding:2px}}
@media(prefers-reduced-motion:no-preference){.beer-win img{animation:beer-cheer 600ms ease-out}@keyframes beer-cheer{from{transform:translateY(18px) rotate(-8deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}}

/* Foam writes YOU WIN once; the score and close controls stay available. */
.freebeer .win-sign.beer-win{height:228px;padding:0 8px 8px;overflow:hidden}
.beer-win .beer-foam{position:absolute;inset:0;width:100%;height:150px;pointer-events:none}
.freebeer .win-sign.beer-win img{position:relative;margin-top:80px;width:66px;height:94px;z-index:1}
.beer-win p{position:relative;margin:5px 0;font-size:16px;line-height:1.25}
.foam-letter{stroke-dasharray:1;stroke-dashoffset:0}
@media(prefers-reduced-motion:no-preference){
 .foam-letter{animation:foam-write 1.5s var(--foam-delay) both}
 .beer-bubble{animation:beer-bubbles 2s var(--bubble-delay) both}
 @keyframes foam-write{from{stroke-dashoffset:1;opacity:0;transform:translateY(7px)}15%{opacity:1}to{stroke-dashoffset:0;opacity:1;transform:translateY(0)}}
 @keyframes beer-bubbles{from{opacity:0;transform:translateY(0)}20%{opacity:.9}to{opacity:0;transform:translate(var(--bubble-shift),-80px)}}
}
@media(prefers-reduced-motion:reduce){.beer-bubble{display:none}.beer-win img{animation:none!important}}
@media(max-height:450px){.freebeer .win-sign.beer-win{height:139px}.beer-win .beer-foam{height:94px}.freebeer .win-sign.beer-win img{margin-top:48px;width:39px;height:56px}.beer-win p{font-size:14px;margin:3px 0}}