.temple-puzzle{--bg-size:1254px;--bg-scale:0.5;--bg-display-size:calc(var(--bg-size) * var(--bg-scale));--brick-size:200px;--tile-size:111px;--tile-gap:15px;--tile-row-gap:12px;--display-width:calc(3 * var(--tile-size) + 2 * var(--tile-gap));--display-height:calc(3 * var(--tile-size) + 2 * var(--tile-row-gap));--board-offset-x:0px;--board-offset-y:0px;--bg-deep:#0b120b;--gold:#d4a85a;min-height:100vh;background-color:var(--bg-deep);background-image:url(/repeat-bg.png);background-repeat:repeat;background-size:var(--brick-size) var(--brick-size);background-attachment:fixed;color:#efe6d6;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.temple-puzzle.placement-loading .tile{visibility:hidden}.temple-puzzle__main{width:100vw;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:calc(var(--tile-gap) * 1.5)}@property --chase-angle{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes chase-border{to{--chase-angle:360deg}}.temple-puzzle .board{width:var(--bg-display-size);height:var(--bg-display-size);position:relative;margin:0;flex-shrink:0;background-image:url(/temple-entrance-puzzle/background.png);background-size:var(--bg-display-size) var(--bg-display-size);background-position:calc(50% + var(--board-offset-x)) calc(50% + var(--board-offset-y));background-repeat:no-repeat;padding:0;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 10px 22px rgba(0,0,0,.42),0 12px 32px rgba(0,0,0,.55),0 2px 0 rgba(255,230,180,.04)}.temple-puzzle .board:before{display:none}.temple-puzzle .slots{position:absolute;left:100px;top:96px;display:grid;grid-template-columns:repeat(3,var(--tile-size));grid-template-rows:repeat(3,var(--tile-size));gap:var(--tile-row-gap) var(--tile-gap);width:var(--display-width);height:var(--display-height);padding:0;place-items:center;justify-self:center;align-self:center}.temple-puzzle .numeral-panel{position:absolute;inset:0;pointer-events:none}.temple-puzzle .numeral-target{position:absolute;width:73px;height:64px;display:grid;place-items:center;color:transparent;background:rgba(14,11,6,0);border:1px solid rgba(255,222,140,.35);border-radius:6px}.temple-puzzle .numeral-target.glow{border-color:#ffe678;box-shadow:0 0 24px rgba(255,214,74,.9),inset 0 0 10px rgba(255,214,74,.5);background:rgba(255,220,130,.08)}.temple-puzzle .numeral-right-1,.temple-puzzle .numeral-right-2,.temple-puzzle .numeral-right-3{width:74px;right:37px}.temple-puzzle .numeral-right-1{top:130px}.temple-puzzle .numeral-right-2{top:254px}.temple-puzzle .numeral-right-3{top:377px}.temple-puzzle .numeral-bottom-1{left:135px;bottom:71px;height:58px}.temple-puzzle .numeral-bottom-2{left:285px;bottom:71px;width:75px;height:58px;transform:translateX(-50%)}.temple-puzzle .numeral-bottom-3{right:191px;bottom:71px;height:58px}.temple-puzzle .slot,.temple-puzzle .tile{display:grid;place-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-height:0;text-transform:uppercase;font-weight:800;letter-spacing:.06em;color:#efe6d6;font-size:clamp(.64rem,2.2vw,.98rem)}.temple-puzzle .slot{width:var(--tile-size);height:var(--tile-size);border-radius:8px;background:transparent;box-shadow:inset 0 8px 18px rgba(0,0,0,.7);border:2px solid rgba(0,0,0,.25);position:relative;overflow:visible;transition:transform .12s ease,box-shadow .12s ease}.temple-puzzle .slot.hovered{box-shadow:0 0 0 6px rgba(212,168,90,.1),inset 0 6px 12px rgba(0,0,0,.55)}.temple-puzzle .tile{width:var(--tile-size);height:var(--tile-size);border-radius:8px;padding:0;position:relative;overflow:hidden;background:url(/temple-entrance-puzzle/sprite.png) no-repeat;background-size:330px 330px;box-shadow:inset 0 4px 10px hsla(0,0%,100%,.02),0 12px 28px rgba(0,0,0,.55);border:1px solid rgba(0,0,0,.25);cursor:grab;transform-origin:center;touch-action:none;transform:rotate(var(--tile-rotation,0deg));transition:transform .16s cubic-bezier(.2,.9,.2,1),box-shadow .16s cubic-bezier(.2,.9,.2,1);will-change:transform;color:transparent;font-size:0}.temple-puzzle .tile.in-slot{box-shadow:inset 0 4px 10px hsla(0,0%,100%,.02),0 8px 20px rgba(0,0,0,.46)}.temple-puzzle .tile[data-position=KUBAZAN]{background-position:-220px -220px}.temple-puzzle .tile[data-position=NANGNANG]{background-position:-220px -110px}.temple-puzzle .tile[data-position=IJIN]{background-position:-220px 0}.temple-puzzle .tile[data-position=WONGO]{background-position:0 -220px}.temple-puzzle .tile[data-position=MOA]{background-position:0 -110px}.temple-puzzle .tile[data-position=UNKH]{background-position:-110px 0}.temple-puzzle .tile[data-position=PAPAZOTL]{background-position:-110px -110px}.temple-puzzle .tile[data-position=SHAGAMBI]{background-position:-110px -220px}.temple-puzzle .tile[data-position=OBOLAKA]{background-position:0 0}.temple-puzzle .tile.dragging{position:fixed;z-index:9999;transform:rotate(var(--tile-rotation,0deg)) scale(1.03);box-shadow:0 0 0 3px rgba(212,168,90,.8),0 0 16px rgba(212,168,90,.6),0 36px 72px rgba(6,6,6,.7);cursor:grabbing}.temple-puzzle .tile.placed{opacity:.99;transform:rotate(var(--tile-rotation,0deg)) scale(.998)}.temple-puzzle .tile:not(.in-slot):not(.dragging){box-shadow:0 24px 54px rgba(0,0,0,.75),inset 0 4px 10px hsla(0,0%,100%,.02)}.temple-puzzle .tile:hover{transform:rotate(var(--tile-rotation,0deg));box-shadow:0 0 0 3px rgba(212,168,90,.8),0 0 16px rgba(212,168,90,.6),inset 0 4px 10px hsla(0,0%,100%,.02);z-index:50}.temple-puzzle.solved{--celebrate-glow:0 0 40px rgba(255,220,120,.85)}.temple-puzzle.solved .board{transform:scale(1.02);transition:transform .42s cubic-bezier(.2,.9,.2,1);box-shadow:inset 0 10px 22px rgba(0,0,0,.42),0 12px 32px rgba(0,0,0,.55),0 2px 0 rgba(255,230,180,.04),var(--celebrate-glow)}.temple-puzzle.solved:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at top left,rgba(255,223,140,.06),transparent 20%),radial-gradient(ellipse at bottom right,rgba(255,170,90,.04),transparent 30%);mix-blend-mode:screen;z-index:2000}@keyframes popTile{0%{transform:rotate(var(--tile-rotation,0deg)) scale(.98)}50%{transform:rotate(var(--tile-rotation,0deg)) scale(1.12)}to{transform:rotate(var(--tile-rotation,0deg)) scale(1.06)}}.temple-puzzle.solved .tile{animation:popTile .6s ease both;filter:drop-shadow(0 18px 36px rgba(0,0,0,.45))}.temple-puzzle .numeral-target.glow{box-shadow:0 0 28px rgba(255,214,74,.9),inset 0 0 12px rgba(255,214,74,.35)}.temple-puzzle .floating-tiles{position:fixed;inset:0;pointer-events:none;z-index:10}.temple-puzzle .floating-tiles .tile{pointer-events:auto}.temple-puzzle__reset{position:fixed;bottom:8px;left:50%;z-index:100;transform:translateX(-50%);padding:0;border:none;background:transparent;cursor:pointer;transition:transform .16s cubic-bezier(.2,.9,.2,1),filter .16s cubic-bezier(.2,.9,.2,1)}.temple-puzzle__reset-image{display:block;width:min(240px,42vw);height:auto;border-radius:8px;box-shadow:inset 0 4px 10px hsla(0,0%,100%,.02),0 12px 28px rgba(0,0,0,.55);transition:box-shadow .16s cubic-bezier(.2,.9,.2,1),transform .16s cubic-bezier(.2,.9,.2,1)}.temple-puzzle__reset:after{content:"";position:absolute;inset:-8px;border-radius:14px;background:conic-gradient(from var(--chase-angle),transparent 50%,rgba(180,110,10,0) 58%,rgba(220,160,60,.35) 66%,rgba(255,230,120,.75) 72%,rgba(255,255,200,.85) 75%,rgba(255,230,120,.75) 78%,rgba(220,160,60,.35) 85%,rgba(180,110,10,0) 92%,transparent 97%);filter:blur(10px);opacity:0;z-index:-1;transition:opacity .2s ease;pointer-events:none}.temple-puzzle__reset:hover .temple-puzzle__reset-image{box-shadow:0 0 0 3px rgba(212,168,90,.8),0 0 16px rgba(212,168,90,.6),inset 0 4px 10px hsla(0,0%,100%,.02),0 16px 36px rgba(0,0,0,.65)}.temple-puzzle__reset:hover:after{opacity:1;animation:chase-border 5s linear infinite}.temple-puzzle__reset:active{transform:translateX(-50%) scale(.97)}.temple-puzzle__reset:active .temple-puzzle__reset-image{box-shadow:inset 0 6px 14px rgba(0,0,0,.7),0 6px 16px rgba(0,0,0,.45)}.temple-puzzle__reset:focus-visible .temple-puzzle__reset-image{box-shadow:0 0 0 3px rgba(212,168,90,.8),0 0 16px rgba(212,168,90,.6),0 12px 28px rgba(0,0,0,.55)}