/* ---------- ROCK PAPER SCISSORS ---------- */
.cab[data-world="rps"]{--w1:#CDEFFF;--w2:#8CD2FF}
.cab[data-world="rps"] .cab-world{background:
  radial-gradient(circle at 50% 50%,rgba(255,255,255,.55) 3px,transparent 3.6px) 0 0/48px 48px,
  radial-gradient(ellipse 70% 40% at 50% 112%,rgba(255,255,255,.45),transparent 70%)}

.rps-game{position:absolute;inset:0;margin:0 auto;max-width:820px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;padding:2px 14px 14px}
.rps-score{display:grid;justify-content:center;gap:6px}
.rps-row{display:flex;align-items:center;gap:7px}
.rps-face{width:34px;height:34px;flex:none;margin-right:4px}
.rps-face svg{display:block;width:100%;height:100%}
.rps-pt{width:clamp(20px,5.4vw,26px);height:clamp(20px,5.4vw,26px);border-radius:50%;border:3px solid var(--ink);background:rgba(255,255,255,.65);transition:transform .3s var(--spring),background .2s}
.rps-pt.on{transform:scale(1.15);box-shadow:inset 0 -3px 0 rgba(26,16,51,.18)}
.rps-pt.kid.on{background:var(--mint)}
.rps-pt.omo.on{background:var(--orange)}

.rps-arena{position:relative;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto minmax(0,1fr);align-items:center;min-height:0;column-gap:4px}
.rps-beats{grid-column:1/-1;display:flex;justify-content:center;gap:12px;padding:4px 0}
.rps-beats i{width:42px;height:42px;border-radius:50%;border:3px solid rgba(26,16,51,.25);background:rgba(255,255,255,.35);display:grid;place-items:center;transition:transform .25s var(--spring),background .2s,border-color .2s}
.rps-beats i svg{width:76%;height:auto;opacity:.35;transition:opacity .2s}
.rps-beats i.on{background:var(--paper);border-color:var(--ink);transform:scale(1.18);box-shadow:0 3px 0 var(--ink)}
.rps-beats i.on svg{opacity:1}
.rps-side{display:grid;justify-items:end;align-content:center;gap:24px;min-height:0}
.rps-side.omo{justify-items:start}
.rps-hand{--dir:1;position:relative;width:min(44vw,260px,30vh);transform-origin:-160% 55%;transition:transform .45s var(--spring),filter .4s,opacity .4s}
.rps-hand.omo{--dir:-1;transform-origin:260% 55%}
.rps-hand svg{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 5px 0 rgba(26,16,51,.18))}
.rps-hand svg.flip{transform:scaleX(-1)}
.rps-hand::before{content:"";position:absolute;inset:-14% -8%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,210,63,.95),rgba(255,210,63,.5) 55%,transparent);opacity:0;transform:scale(.5);transition:opacity .3s,transform .45s var(--spring)}
.rps-hand.beat{animation:rpsBeat .4s ease-in-out}
@keyframes rpsBeat{45%{transform:translateY(-10px) rotate(calc(-7deg * var(--dir)))}100%{transform:translateY(0) rotate(0)}}
.rps-hand.show{animation:rpsShow .45s var(--spring)}
@keyframes rpsShow{0%{transform:scale(.7)}60%{transform:scale(1.12)}}
.rps-hand.win{transform:scale(1.12) translateX(calc(8px * var(--dir)))}
.rps-hand.win::before{opacity:1;transform:scale(1)}
.rps-hand.lose{transform:translateY(8px) rotate(calc(5deg * var(--dir))) scale(.94);filter:saturate(.45) brightness(1.05);opacity:.75}
.rps-hand.tie{animation:rpsTie .45s ease-in-out}
@keyframes rpsTie{30%{transform:translateX(calc(10px * var(--dir)))}60%{transform:translateX(calc(-4px * var(--dir)))}}
.rps-spark{width:30px;height:30px;align-self:center;opacity:0;transform:scale(.3);transition:opacity .2s,transform .35s var(--spring);
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l3 8 8 3-8 3-3 8-3-8-8-3 8-3z' fill='%23fff' stroke='%231A1033' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.rps-spark.on{opacity:1;transform:scale(1.3) rotate(20deg)}

.rps-mem{display:grid;grid-template-columns:repeat(4,clamp(28px,8vw,34px));gap:4px;justify-content:center;min-height:clamp(28px,8vw,34px);padding:5px;border-radius:14px;border:3px dashed rgba(26,16,51,.3);background:rgba(255,255,255,.3)}
.rps-mem:empty{width:calc(4 * clamp(28px,8vw,34px) + 26px)}
.rps-mem i{display:grid;place-items:center;aspect-ratio:1;border-radius:9px;background:var(--paper);border:2.5px solid var(--ink)}
.rps-mem i svg{width:86%;height:auto;transform:scaleX(-1)}
.rps-mem i.new{animation:rpsMem .45s var(--spring)}
@keyframes rpsMem{from{transform:scale(0) rotate(-30deg)}}
.rps-mem.glow{animation:rpsGlow .7s ease-in-out 3}
@keyframes rpsGlow{50%{background:rgba(255,210,63,.75);border-color:var(--ink);transform:scale(1.06)}}
@media (min-width:700px){.rps-mem{grid-template-columns:repeat(8,34px)}.rps-mem:empty{width:calc(8 * 34px + 38px)}}

.rps-picks{position:relative;display:flex;justify-content:center;gap:clamp(10px,3vw,18px)}
.rps-pick{width:clamp(84px,24vw,112px);height:clamp(84px,24vw,112px);display:grid;place-items:center;padding:0;background:var(--paper);border:var(--bd);border-radius:24px;box-shadow:0 5px 0 var(--ink);touch-action:manipulation;transition:transform .15s var(--spring),box-shadow .15s,background .15s,opacity .2s;cursor:pointer}
.rps-pick svg{width:84%;height:auto;transform:rotate(-90deg)}
.rps-pick:hover:not(:disabled){transform:translateY(-4px) rotate(-3deg)}
.rps-pick:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.rps-pick:disabled{opacity:.5;cursor:default}
.rps-pick.chosen{opacity:1;background:var(--sun);transform:translateY(-6px)}
.rps-pick:focus-visible{outline:4px solid var(--grape);outline-offset:4px}
.rps-hint{width:46px}
@media (max-width:700px){.rps-game{padding-bottom:112px}}

.rps-habit{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:12px 14px 120px;animation:fadeIn .3s}
.rps-game.ended .rps-arena,.rps-game.ended .rps-picks{opacity:.25;transition:opacity .4s}
.rps-habit-card{background:var(--paper);border:var(--bd);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:14px 18px 16px;width:min(100%,440px);display:grid;gap:10px;justify-items:center;animation:popIn .5s var(--spring)}
.rps-habit-title{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:clamp(1.3rem,5vw,1.7rem);line-height:1}
.rps-habit-title svg{width:36px;height:36px}
.rps-bars{display:flex;justify-content:center;align-items:flex-end;gap:14px;--ih:min(30px,calc(220px / var(--n)))}
.rps-bar{display:grid;justify-items:center;gap:4px;padding:6px 8px 8px;border-radius:18px;min-width:76px}
.rps-bar.fav{background:#FFE58A;box-shadow:inset 0 0 0 3px var(--ink)}
.rps-heart{height:24px}
.rps-heart svg{width:26px;height:24px;display:block;animation:rpsHeart .5s ease-in-out 4 alternate}
@keyframes rpsHeart{to{transform:scale(1.18)}}
.rps-stack{display:flex;flex-direction:column-reverse;align-items:center;min-height:var(--ih)}
.rps-stack i{display:block;height:var(--ih);width:calc(var(--ih) * 1.25);animation:rpsStack .4s var(--spring) backwards;animation-delay:calc(var(--k) * 70ms + .3s)}
.rps-stack i svg{width:100%;height:100%;transform:scaleX(-1)}
@keyframes rpsStack{from{transform:translateY(-30px) scale(.4);opacity:0}}
.rps-base{width:58px;height:46px;display:grid;place-items:center;border-top:4px solid var(--ink);padding-top:4px}
.rps-base svg{width:100%;height:100%;transform:scaleX(-1)}

.rps-game.calm .rps-hand,.rps-game.calm .rps-pick,.rps-game.calm .rps-hand::before{transition:none}
.rps-game.calm .rps-hand.show,.rps-game.calm .rps-hand.tie,.rps-game.calm .rps-mem i.new,.rps-game.calm .rps-stack i,.rps-game.calm .rps-mem.glow,.rps-game.calm .rps-heart svg{animation:none}