*{box-sizing:border-box}body{margin:0;background:#eaf6dd;color:#28472d;font:18px system-ui}header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#fff7df}button{font:inherit;padding:12px 18px;border:0;border-radius:16px;background:#ffda70;color:#263d2c;cursor:pointer;min-height:48px}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:4px solid #167bc4}main{text-align:center;padding:16px}.start{max-width:720px;margin:auto}.cover{width:min(100%,420px);border-radius:24px}.buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:16px}.opponents{display:flex;justify-content:center;gap:24px;min-height:140px}.opponent{background:#ffffffdc;border-radius:22px;padding:10px;min-width:130px}.backs img{height:65px;width:44px;object-fit:contain;margin-left:-20px}.backs{padding-left:20px}.table{margin:15px auto;background:radial-gradient(ellipse,#edc483,#b98043);border:9px solid #8c5d32;border-radius:45%;padding:24px;max-width:550px;min-height:210px;display:flex;justify-content:center;align-items:center;gap:28px}.table img{height:145px;max-width:110px;object-fit:contain}.pile{background:transparent;padding:0}.status{min-height:56px}.hand{display:flex;overflow-x:auto;justify-content:flex-start;padding:20px 12px;max-width:1000px;margin:auto;gap:8px}.card{padding:0;background:transparent;flex:0 0 auto;border-radius:10px;position:relative}.card img{display:block;width:95px;height:143px;object-fit:contain;border-radius:9px}.card.playable{outline:3px solid #539d35}.card:disabled{opacity:.7}.card:hover:enabled{transform:translateY(-8px)}.badge{padding:8px;border-radius:14px;background:#fff7df;display:inline-block}.bubble{font-size:16px;min-height:22px}dialog{border:0;border-radius:24px;max-width:650px;width:92%;padding:24px;color:#28472d}dialog::backdrop{background:#14321c99}.rules{text-align:left;font-size:17px;line-height:1.55}.rot{background:#ef5b5b}.blau{background:#74baff}.gruen{background:#87ce78}.gelb{background:#ffe06b}@media(max-width:480px){main{padding:8px}.card img{width:79px;height:119px}.table{padding:15px;min-height:190px}.opponents{gap:12px}.opponent{min-width:120px}header{font-size:16px}}
.scene{position:relative;width:min(100%,1080px);aspect-ratio:3/2;margin:auto;background:url('assets/garden.webp') center/100% 100%;border-radius:24px;overflow:hidden;isolation:isolate}.opponents{position:absolute;inset:0;display:block;z-index:2;pointer-events:none}.opponent{position:absolute;top:6%;left:22%;width:31%;height:68%;background:none;padding:0;border-radius:0;min-width:0}.duo .opponent:nth-child(2){left:55%;width:28%;top:12%;height:62%}.solo .opponent{left:35%;width:30%}.character{width:100%;height:100%;object-fit:contain;object-position:center bottom}.opponent-label{position:absolute;top:71%;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:15px;background:#fff9e9ed;padding:7px 14px;z-index:5;font-size:clamp(12px,1.8vw,18px);box-shadow:0 2px 5px #53371b55}.table-foreground{position:absolute;inset:0;background:url('assets/garden.webp') center/100% 100%;clip-path:polygon(50% 57.8%,65% 58.8%,80% 61.5%,90% 67%,94% 75%,100% 100%,0 100%,6% 75%,10% 67%,20% 61.5%,35% 58.8%);z-index:3;pointer-events:none}.scene .table{position:absolute;left:50%;top:68%;transform:translate(-50%,-50%);margin:0;min-height:0;width:37%;padding:0;gap:15%;background:none;border:0;border-radius:0;z-index:4}.scene .table img{height:auto;width:100%;max-width:none;max-height:none;filter:drop-shadow(2px 5px 3px #51311188)}.scene .table>img,.scene .pile{width:34%}.scene .pile img{width:100%}.scene .status{position:absolute;top:1.5%;left:50%;transform:translateX(-50%);width:max-content;max-width:92%;min-height:0;padding:6px 16px;border-radius:16px;background:#fff9e9ed;z-index:6;font-size:clamp(13px,1.8vw,18px)}.scene .badge{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);z-index:5;font-size:clamp(13px,1.8vw,18px)}.bubble{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:max-content;max-width:95%;background:#fffdf3;border:2px solid #8a713f;border-radius:20px;padding:10px 14px;z-index:8;opacity:0;min-height:0;font-size:clamp(13px,1.8vw,19px);box-shadow:0 4px 12px #23392144}.bubble:after{content:'';position:absolute;bottom:-10px;left:45%;border-width:10px 9px 0;border-style:solid;border-color:#fffdf3 transparent transparent}.bubble.visible{opacity:1}@keyframes bubble-pop{from{opacity:0;transform:translate(-50%,12px) scale(.82)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes bubble-out{to{opacity:0;transform:translate(-50%,-5px) scale(.95)}}.hand{justify-content:safe center}.scene~.buttons{min-height:48px;margin:8px} @media(max-width:600px){.scene{aspect-ratio:4/3;background-size:cover}.table-foreground{background-size:cover}.opponent{left:15%;width:36%;top:10%;height:65%}.duo .opponent:nth-child(2){left:53%;width:34%;top:15%;height:60%}.solo .opponent{left:30%;width:40%}.scene .table{width:46%;top:69%}.opponent-label{padding:4px 8px}.bubble{padding:6px 9px;max-width:115%}.scene .badge{bottom:7%}}@media(prefers-reduced-motion:reduce){.bubble{animation:none!important}.card:hover:enabled{transform:none}}
/* Version 0.3: all controls remain in one viewport. */
.playing{height:100dvh;overflow:hidden}.playing header{height:64px;padding:6px 16px}.playing main{height:calc(100dvh - 64px);display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 8px;overflow:hidden}.playing .scene{flex:1 1 auto;min-height:0;width:auto;height:auto;max-width:100%;aspect-ratio:3/2;max-height:calc(100dvh - 64px - 210px);overflow:visible;border-radius:20px}.playing .scene~.buttons{flex:0 0 48px;min-height:48px;margin:0}.playing .hand{flex:0 0 150px;width:100%;max-width:1100px;padding:10px 12px;margin:0;overflow-x:auto;overflow-y:hidden;align-items:flex-start;gap:8px}.playing .card img{height:128px;width:86px}.opponent-label{display:none}.player-labels{position:absolute;top:57%;left:14%;right:14%;display:flex;justify-content:space-around;gap:12px;z-index:7;pointer-events:none}.player-label{background:#fff9e9;border:2px solid #947144;color:#28472d;box-shadow:0 3px 8px #40240044;border-radius:15px;padding:6px 12px;font-size:clamp(12px,1.8vh,18px);white-space:nowrap}.bubble{top:20%;left:0;transform:translateX(-100%);max-width:160px;width:max-content}.lucy .bubble{left:100%;transform:none}.bubble:after{bottom:auto;top:50%;left:auto;right:-10px;border-width:9px 0 9px 10px;border-color:transparent transparent transparent #fffdf3}.lucy .bubble:after{right:auto;left:-10px;border-width:9px 10px 9px 0;border-color:transparent #fffdf3 transparent transparent}.bubble.visible{animation:bubble-pop .5s ease-out both!important}.bubble.hiding{animation:bubble-out .5s ease-in both!important}@keyframes bubble-pop{from{opacity:0;translate:0 12px;scale:.85}to{opacity:1;translate:0 0;scale:1}}@keyframes bubble-out{to{opacity:0;translate:0 -5px;scale:.95}}.scene{overflow:visible}.scene .status{top:1%;font-size:clamp(12px,2vh,18px)}
@media(max-width:600px){.playing header{height:58px;font-size:13px;padding:4px 8px}.playing header button{font-size:13px;padding:8px;min-height:40px}.playing main{height:calc(100dvh - 58px)}.playing .scene{width:100%;aspect-ratio:auto;max-height:none;min-height:230px;background-size:100% 100%;overflow:hidden}.playing .table-foreground{background-size:100% 100%}.playing .hand{flex-basis:134px}.playing .card img{width:74px;height:111px}.bubble{font-size:12px;max-width:110px;padding:5px 7px;top:10%}.duo .opponent{left:23%;width:28%}.duo .opponent:nth-child(2){left:53%;width:27%}.solo .opponent{left:36%;width:32%}.player-labels{left:5%;right:5%;top:57%}.player-label{padding:4px 8px}.scene .table{width:47%;top:74%}.scene .badge{bottom:2%}}
@media(max-height:550px) and (min-width:601px){.playing .scene{max-height:calc(100dvh - 64px - 145px)}.playing .hand{flex-basis:90px;padding:4px}.playing .card img{height:78px;width:53px}.playing .scene~.buttons{flex-basis:44px;min-height:44px}.bubble{font-size:12px;padding:5px 7px;max-width:130px}.player-label{font-size:12px;padding:3px 7px}.scene .badge{font-size:12px}}
@media(prefers-reduced-motion:reduce){.bubble.visible,.bubble.hiding{animation:none!important}}
/* Keep opponent counts outside the central playing area. */
.player-labels{left:2%;right:2%;top:57%;justify-content:space-between}.player-label{max-width:30%;white-space:normal}.solo~.player-labels{justify-content:center}.scene:has(.solo) .player-labels{justify-content:flex-start}@media(max-width:600px){.player-labels{left:1%;right:1%;top:55%}.player-label{font-size:11px;padding:4px 5px;max-width:26%}.scene .status{width:94%;font-size:12px;line-height:1.3}}

.victory{text-align:center;margin:auto;max-width:1000px;padding:12px}.victory-art{display:block;width:100%;max-height:62vh;object-fit:contain;border-radius:20px;margin:0 auto 12px}.victory h1{margin:8px 0}.victory p{margin:6px 0}

/* Sunny lakeside frame and compact game wordmark. */
body{background:radial-gradient(ellipse at 12% 8%,#ffffffa8 0,transparent 35%),radial-gradient(ellipse at 90% 25%,#fff6cd65 0,transparent 32%),linear-gradient(180deg,#d4edff 0%,#eaf7ee 48%,#bddba4 100%);background-attachment:fixed;min-height:100dvh;position:relative;isolation:isolate}
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:180px;height:310px;opacity:.22;background:radial-gradient(ellipse 18px 43px at 28% 20%,#5a9750 98%,transparent),radial-gradient(ellipse 19px 42px at 55% 38%,#77ae56 98%,transparent),radial-gradient(ellipse 16px 40px at 27% 58%,#5a9750 98%,transparent),radial-gradient(ellipse 17px 44px at 52% 78%,#77ae56 98%,transparent);filter:blur(.4px)}
body::before{left:-75px;bottom:0;transform:rotate(-28deg)}body::after{right:-80px;top:90px;transform:rotate(150deg)}
header{background:linear-gradient(180deg,#fffaf1f5,#fff3d9e8);box-shadow:0 2px 12px #35577818;gap:12px;border-bottom:1px solid #e1c99780}
header>div:last-child{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.game-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;width:190px;line-height:1}
.logo-title{font-family:Georgia,'Times New Roman',serif;font-weight:900;font-size:35px;letter-spacing:-1.5px;color:#ffc84b;background:linear-gradient(180deg,#fff8b2 8%,#ffd45c 40%,#ef920f 82%,#ffe075);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #233b66;filter:drop-shadow(1px 2px 0 #122949);transform:rotate(-2deg);white-space:nowrap}
.logo-ribbon{font-family:Georgia,'Times New Roman',serif;font-weight:bold;font-size:15px;color:#fff5ca;background:linear-gradient(#f34332,#b91f22);padding:3px 25px 4px;clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%);text-shadow:1px 1px 0 #6c1e26;margin-top:1px;white-space:nowrap}
.playing header{height:64px}.playing .game-logo{width:178px}.playing .logo-title{font-size:32px}.playing .logo-ribbon{font-size:13px;padding:2px 25px 3px}
.hand{background:linear-gradient(180deg,#ffffff12,#fff9e578);border-radius:20px}
@media(max-width:600px){header{padding:6px 8px;gap:5px}.game-logo,.playing .game-logo{width:118px}.logo-title,.playing .logo-title{font-size:23px;letter-spacing:-1px;-webkit-text-stroke:.7px #233b66}.logo-ribbon,.playing .logo-ribbon{font-size:11px;padding:2px 15px}.playing header{height:58px}header>div:last-child{gap:4px}header button,.playing header button{font-size:12px;padding:7px 8px;min-height:40px}}
@media(max-width:370px){.game-logo,.playing .game-logo{width:102px}.logo-title,.playing .logo-title{font-size:20px}header button,.playing header button{font-size:11px;padding:6px}}

.site-return{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border-radius:16px;background:#ffda70;color:#263d2c;text-decoration:none}