*{box-sizing:border-box}body{margin:0;background:#17231b;color:#fff0c6;font-family:Arial,sans-serif}button,a,input{touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible+span{outline:3px solid #fff7cb;outline-offset:5px}.courtyard{position:relative;width:100%;max-width:520px;height:max(780px,100svh);max-height:1050px;margin:auto;overflow:hidden;background:#675135 url('./assets/shells-courtyard.png') center/100% 100% no-repeat;isolation:isolate;box-shadow:0 0 100px #0008}.courtyard:before{content:'';position:absolute;inset:0;background:linear-gradient(#152318aa,transparent 25%,transparent 64%,#201508b3 83%,#201508e8);z-index:-1}header{display:flex;align-items:center;justify-content:space-between;padding: max(16px,env(safe-area-inset-top)) 20px 0;font-size:12px;letter-spacing:3px;font-weight:bold}header a,header button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #fff3;border-radius:50%;background:#1a3029;color:#fff0c6;text-decoration:none;font-size:25px}h1{text-align:center;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(40px,11vw,64px);letter-spacing:1px;margin:17px 0 0;text-shadow:3px 5px #172719;transform:rotate(-3deg)}.subtitle{text-align:center;font-size:10px;letter-spacing:3px;margin:12px 0}.speech{position:absolute;top:29%;right:4%;max-width:42%;background:#fff0ca;color:#302819;padding:16px;border:2px solid #342f20;border-radius:50% 50% 50% 8%;font-size:clamp(15px,4vw,21px);font-weight:bold;transform:rotate(-5deg);box-shadow:2px 4px #0002}.table{position:absolute;top:58%;left:5%;width:90%;height:21%}.cup{position:absolute;left:0;bottom:18%;width:26%;height:76%;padding:0;background:none;border:0;will-change:transform;z-index:2}.cup:disabled{opacity:1}.cup-shape{position:absolute;inset:0;filter:drop-shadow(6px 10px 4px #241a1099);transition:transform .4s ease}.cup svg{width:100%;height:100%;overflow:visible}.cup.lifted .cup-shape{transform:translateY(-58%)}.cup.selectable:hover .cup-shape{filter:drop-shadow(0 0 8px #ffe298)}.cup.selectable:after{content:attr(data-position);position:absolute;left:40%;bottom:-25px;color:#fff0c6;font-size:14px;text-shadow:1px 2px #251e13}.ball{position:absolute;width:24px;height:24px;bottom:20%;left:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffbf98 0 8%,#ed4627 17%,#b21b12 65%,#68140d);box-shadow:4px 5px 4px #21100588;z-index:1}.controls{position:absolute;left:6%;right:6%;bottom:max(15px,env(safe-area-inset-bottom));text-align:center}#status{font-weight:bold;font-size:16px;min-height:20px;text-shadow:1px 2px 3px #000;margin:0 0 12px}fieldset{border:0;padding:0;margin:0 0 13px;display:flex;gap:6px;justify-content:center}legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}label{position:relative;flex:1}input{position:absolute;opacity:0}label span{display:block;border:1px solid #eed5a64d;border-radius:20px;padding:8px 3px;font-size:11px;background:#30231699}input:checked+span{background:#f0d29c;color:#34261a;border-color:#f0d29c}fieldset:disabled{opacity:.55}.play{width:100%;border:2px solid #ffe098;border-radius:24px;background:linear-gradient(#ffda70,#f0a727);box-shadow:0 5px #975310, inset 0 3px #fff3;color:#452508;font-size:26px;font-weight:900;letter-spacing:2px;padding:14px}.play:disabled{filter:saturate(.5);font-size:20px}.score{font-size:12px;margin:16px 0 7px}.demo{font-size:9px;letter-spacing:2px;opacity:.7;margin:0}dialog{max-width:340px;width:90%;background:#fff0cf;color:#30291d;border:2px solid #5d513b;border-radius:20px;padding:26px;line-height:1.6}dialog::backdrop{background:#122018bb}dialog h2{margin-top:0}dialog button{width:100%;border:0;background:#284332;color:#fff0cf;border-radius:12px;padding:12px}@media(min-width:700px){body{padding:20px}.courtyard{height:900px;min-height:780px;border-radius:24px}}@media(prefers-reduced-motion:reduce){.cup-shape{transition-duration:.1s}}
/* This courtyard deliberately has its own daylight palette and typography. */
.game-meta{position:absolute;top:51%;left:50%;transform:translateX(-50%);display:flex;gap:14px;white-space:nowrap;padding:7px 12px;border:1px solid #ead5a64d;border-radius:20px;background:#1f302be8;font-size:9px;letter-spacing:1px;box-shadow:0 4px 12px #0003}.game-meta strong{color:#fbd37c}.stake-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 13px;padding:11px 12px;border:1px solid #c6a36c66;background:#241b10bc;border-radius:14px;text-align:left;box-shadow:inset 0 1px #fff1}.stake-row small,.bet-label>span{display:block;font-size:8px;letter-spacing:.8px;opacity:.75;margin-bottom:5px}.stake-row strong{font-size:17px;font-variant-numeric:tabular-nums}.bet-label{flex:0 0 auto;text-align:center}.bet-label>span{padding:0;background:none;border:0}.bet-label select{background:#f2d9a6;color:#372616;font:bold 15px Arial;padding:7px 8px;border:0;border-radius:8px}.potential{text-align:right}.bottom-line{display:flex;justify-content:space-between;align-items:center;gap:7px;margin:14px 0 10px}.bottom-line button{border:0;background:none;color:#f2ddb8;font-size:10px;padding:4px 0}.bottom-line>span{font-size:9px;letter-spacing:1px;color:#e6c898}.history-row{border-bottom:1px solid #aa926966;font-size:12px;padding-bottom:10px}#historyRows{max-height:45vh;overflow:auto}.won .ball{box-shadow:0 0 22px #ffd56a,4px 5px 4px #21100588}.won .play{box-shadow:0 5px #975310,0 0 25px #ffd26344}.table{top:55%;height:19%}.cup{height:70%;bottom:12%}.ball{bottom:14%}.controls{bottom:max(18px,env(safe-area-inset-bottom))}#status{font-size:15px}.cup-shape img{width:100%;height:100%;object-fit:contain;pointer-events:none}.cup:before{content:'';position:absolute;left:0;right:-9%;bottom:0;height:15%;border-radius:50%;background:#20170866;filter:blur(4px)}@media(max-width:360px){.stake-row{padding:9px 7px;gap:5px}.stake-row small{font-size:7px}.stake-row strong{font-size:14px}.game-meta{font-size:8px;gap:8px}.bottom-line>span{font-size:8px}}

.table.rapid .cup-shape{filter:blur(1.3px) drop-shadow(9px 5px 3px #241a1077)}
@media(max-height:779px){.courtyard{height:max(650px,100svh);min-height:650px}.table{top:52%;height:17%}.game-meta{top:48%;font-size:8px}.controls{bottom:12px}#status{font-size:13px;margin-bottom:8px}.stake-row{margin-bottom:9px;padding:8px 10px}.stake-row strong{font-size:15px}.play{padding:10px;font-size:23px}.bottom-line{margin:10px 0 7px}h1{font-size:44px;margin-top:12px}.subtitle{font-size:8px;margin-top:9px}.speech{top:27%;padding:12px}.demo{font-size:8px}}
@media(min-width:700px) and (max-height:779px){body{padding:10px}.courtyard{height:max(650px,calc(100svh - 20px));max-width:390px}}
.courtyard{background-image:url('./assets/mobile-v1/shells-table.webp')}.wolf{position:absolute;left:8%;top:13.5%;width:84%;height:46.5%;pointer-events:none;transform-origin:50% 95%;z-index:0;animation:wolf-breathe 4.7s ease-in-out infinite;filter:drop-shadow(2px 3px 2px #2a201529)}.wolf-pose{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .14s ease}.wolf-pose.visible{opacity:1}.wolf-pose[data-pose=blink]{transition:none}header,h1,.subtitle{position:relative;z-index:3}.speech{z-index:3}.game-meta{z-index:2}.table{z-index:3}.controls{z-index:4}.wolf[data-mood=shuffle]{animation:wolf-deal var(--dealer-tempo,650ms) ease-in-out infinite}.wolf[data-mood=choose]{animation:wolf-watch 2.6s ease-in-out infinite}.wolf[data-mood=win]{animation:wolf-proud 3.2s ease-in-out infinite}.wolf[data-mood=lose]{animation:wolf-smug 3s ease-in-out infinite}.wolf.gesture[data-mood=win]{animation:wolf-win 1.1s cubic-bezier(.25,.8,.3,1) both}.wolf.gesture[data-mood=lose]{animation:wolf-lose 1.1s ease-in-out both}.wolf.gesture[data-mood=show]{animation:wolf-nod 1.1s ease-in-out both}.wolf[data-direction=left]{--lean:-1}.wolf[data-direction=right]{--lean:1}@keyframes wolf-breathe{0%,100%{transform:scaleY(1) rotate(-.35deg)}50%{transform:scaleY(1.009) rotate(.35deg)}}@keyframes wolf-deal{0%,100%{transform:rotate(-.8deg) translateX(-2px) scaleY(.988)}50%{transform:rotate(.8deg) translateX(2px) scaleY(1.006)}}@keyframes wolf-watch{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg) scaleY(1.006)}}@keyframes wolf-proud{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.5deg) scaleY(1.008)}}@keyframes wolf-smug{0%,100%{transform:rotate(.5deg)}50%{transform:rotate(-.5deg) scaleY(.996)}}@keyframes wolf-win{0%{transform:scaleY(.975) rotate(-2deg)}28%{transform:scaleY(1.028) rotate(1.7deg)}48%{transform:scaleY(.992) rotate(-1deg)}70%{transform:scaleY(1.015) rotate(.7deg)}100%{transform:scaleY(1) rotate(0)}}@keyframes wolf-lose{0%{transform:rotate(-1.7deg)}25%{transform:rotate(1.6deg) scaleY(1.015)}50%{transform:rotate(-1.2deg)}75%{transform:rotate(.9deg)}100%{transform:rotate(0)}}@keyframes wolf-nod{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.981) rotate(-.8deg)}70%{transform:scaleY(1.012)}}@media(prefers-reduced-motion:reduce){.wolf,.wolf.gesture{animation:none!important}.wolf-pose{transition:none}}
.wolf.idle-nod{animation:wolf-nod 1.1s ease-in-out both}
.wolf{height:48%}.courtyard[data-wolf-mood=win] .speech,.courtyard[data-wolf-mood=lose] .speech{top:22%;font-size:17px;max-width:38%}