/* LAW TOWER — bright toy-block construction site. Rounded, bouncy, daytime. */
.toy{--sky:#7CD2FF;--ink:#17306B;--y:#FFD23F;--o:#FF8A3D;--g:#4CD08C;--r:#FF5E6C;--b:#4F9DFF;--p:#A78BFA;background:#5BB8EE;color:var(--ink);font-family:'Fredoka',system-ui,sans-serif;font-weight:600}
.toy #app{background:linear-gradient(#6CC6F7 0%,#BDEBFF 60%,#E8F8FF 100%)}
.toy #app:before{content:"";position:absolute;left:-10%;top:12%;width:120px;height:40px;background:#fff;border-radius:40px;box-shadow:50px -18px 0 8px #fff,90px 0 0 0 #fff;opacity:.9;animation:cloud 40s linear infinite}
@keyframes cloud{to{transform:translateX(560px)}}
.toy .screen{animation:fade .25s both}
.toy h1,.toy h2{margin:0;font-weight:700}
.toy .ib{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);font-size:18px;box-shadow:0 4px 0 rgba(23,48,107,.25)}
.toy .btn{display:inline-flex;justify-content:center;align-items:center;font-size:22px;padding:15px 26px;border-radius:999px;background:var(--o);color:#fff;font-weight:700;box-shadow:0 6px 0 #C2561A;text-shadow:0 2px 0 rgba(0,0,0,.15);transition:transform .08s}
.toy .btn:active{transform:translateY(5px);box-shadow:0 1px 0 #C2561A}
.toy .btn.big{width:100%}.toy .btn.ghost{background:#fff;color:var(--ink);box-shadow:0 5px 0 rgba(23,48,107,.25);text-shadow:none}
/* title */
.tt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
.tt .stack{display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:6px}
.tt .stack i{display:block;height:30px;border-radius:8px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.15);animation:drop .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes drop{from{transform:translateY(-120px);opacity:0}to{transform:none;opacity:1}}
.tt h1{font-size:54px;line-height:.95;color:#fff;text-shadow:0 5px 0 var(--ink),0 0 0 #000;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.tt p{margin:0;max-width:290px;font-size:19px;line-height:1.25}
.tt ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;font-size:16.5px;text-align:left}
.tt li{background:#fff;border-radius:16px;padding:8px 14px;box-shadow:0 3px 0 rgba(23,48,107,.2)}
.tt li b{color:var(--o)}
/* play */
.tb{display:flex;align-items:center;gap:10px;position:relative;z-index:4}
.tb .grow{flex:1}
.prog{height:16px;background:rgba(255,255,255,.6);border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 0 rgba(23,48,107,.15)}
.prog i{display:block;height:100%;width:0;background:linear-gradient(var(--y),#FFB300);border-radius:10px;transition:width .5s cubic-bezier(.3,1.4,.5,1)}
.wob{display:flex;gap:5px}.wob i{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.7);display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff}
.wob i.on{background:var(--r);animation:pop .3s}
.field{position:relative;flex:0 0 52%;min-height:210px;margin:8px -16px 0;overflow:hidden}
.ground{position:absolute;left:0;right:0;bottom:0;height:var(--gh,22px);background:linear-gradient(#6FD36B 0 30%,#8A5A2B 30%);border-top:3px solid #4DB04A}
.jib{position:absolute;left:0;right:0;top:6px;height:14px;background:repeating-linear-gradient(90deg,var(--y) 0 14px,#E3A600 14px 17px);border-bottom:3px solid #B88200;z-index:2}
.mast{position:absolute;left:14px;top:6px;bottom:0;width:18px;background:repeating-linear-gradient(var(--y) 0 14px,#E3A600 14px 17px);border-right:3px solid #B88200;z-index:1}
.hang{position:absolute;left:50%;top:20px;z-index:3;will-change:transform}
.hang:before{content:"";position:absolute;left:50%;bottom:100%;width:3px;height:400px;margin-left:-1.5px;background:#4a4a4a}
.tw{position:absolute;left:50%;bottom:var(--gh,22px);width:0;transform-origin:50% 100%;z-index:2}
.tw.w1{animation:sway 2.6s ease-in-out infinite;--a:1.6deg}.tw.w2{animation:sway 1.3s ease-in-out infinite;--a:3.4deg}
@keyframes sway{0%,100%{transform:rotate(calc(var(--a)*-1))}50%{transform:rotate(var(--a))}}
.tw.shake{animation:tshake .55s}@keyframes tshake{20%{transform:rotate(-6deg)}45%{transform:rotate(5deg)}70%{transform:rotate(-2.5deg)}}
.blk{position:absolute;left:0;height:var(--bh);display:flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;font-weight:700;color:#fff;font-size:calc(var(--bh)*.42);white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.2);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),inset 0 4px 0 rgba(255,255,255,.3),0 2px 0 rgba(0,0,0,.12);transform:translateX(-50%);padding:0 10px}
.blk:before,.blk:after{content:"";position:absolute;top:4px;width:8px;height:5px;border-radius:50% 50% 0 0;background:inherit;filter:brightness(1.15)}.blk:before{left:16px}.blk:after{right:16px}
.blk small{opacity:.8;font-size:.78em}
.blk.land{animation:land .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes land{0%{transform:translateX(-50%) scaleY(1.25) scaleX(.9)}45%{transform:translateX(-50%) scaleY(.82) scaleX(1.1)}100%{transform:translateX(-50%)}}
.hang .blk{position:relative;transform:translateX(-50%);animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateX(-50%) rotate(2deg)}}
.hang.snap{transition:transform .22s cubic-bezier(.5,0,1,1)}
.hang.fall{transition:transform .8s cubic-bezier(.5,0,1,.6),opacity .8s}
.hang.hint .blk{animation:pulse .5s infinite alternate}@keyframes pulse{to{filter:brightness(1.3)}}
.dust{position:absolute;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.9);animation:dust .6s ease-out both;z-index:3}
@keyframes dust{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--dx),-22px) scale(1.8)}}
.tw.fall .blk{transition:transform 1.1s cubic-bezier(.5,0,1,.6),opacity 1.1s}
.panel{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding-top:10px;position:relative;z-index:3}
.qq{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.story{margin:0;font-size:18px;line-height:1.25;background:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 4px 0 rgba(23,48,107,.2)}
.opts{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.opt{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;background:#fff;border-radius:16px;padding:11px 14px;font-size:18px;font-weight:700;box-shadow:0 5px 0 rgba(23,48,107,.25);border:3px solid transparent;transition:transform .08s}
.opt small{font-size:12px;opacity:.55;font-weight:600}
.opt:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(23,48,107,.25)}
.opt.good{border-color:var(--g);background:#E8FFF2}.opt.bad{border-color:var(--r);background:#FFEDEF}
.tmsg{background:#fff;border-radius:16px;padding:10px 14px;font-size:15px;line-height:1.3;box-shadow:0 3px 0 rgba(23,48,107,.2);animation:in .3s both;font-weight:500}.tmsg b{font-weight:700}
.res{align-items:center;text-align:center;justify-content:center;gap:10px}.res h1{font-size:50px;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.res .bignum{font-size:84px;font-weight:700;line-height:1;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.res .acts{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:10px}